new(comp): marker

.github/workflows/validate-assets.yml

@@ -21,18 +21,17 @@ jobs:
         with:
           python-version: "3.12"
 
+      - name: Install uv
+        run: pip install uv
+
       - name: Install dependencies
-        run: |
-          python -m pip install --upgrade pip
-          pip install uv
-          uv pip install --system -e ".[dev]"
+        run: uv sync --group dev
 
       - name: Generate markdown files
-        run: python scripts/generate_markdown.py
+        run: uv run python scripts/generate_markdown.py
 
       - name: Check for uncommitted changes
-        run: |
-          git diff --exit-code assets/docs
+        run: git diff --exit-code assets/docs
 
       - name: Run asset verification tests
-        run: pytest tests/test_generated_assets.py
+        run: uv run pytest tests/test_generated_assets.py

app/registry/components.py

@@ -105,6 +105,10 @@
         "files": ["components/ui/link.py"],
         "dependencies": ["hugeicon", "twmerge"],
     },
+    "marker": {
+        "files": ["components/ui/marker.py"],
+        "dependencies": ["twmerge"],
+    },
     "menu": {
         "files": ["components/ui/menu.py"],
         "dependencies": ["hugeicon", "others_icons", "twmerge", "base_ui", "button"],
@@ -133,6 +137,10 @@
         "files": ["components/ui/slider.py"],
         "dependencies": ["base_ui"],
     },
+    "spinner": {
+        "files": ["components/ui/spinner.py"],
+        "dependencies": ["twmerge"],
+    },
     "switch": {
         "files": ["components/ui/switch.py"],
         "dependencies": ["base_ui"],

app/templates/toc.py

@@ -199,7 +199,14 @@ def table_of_content(url: str, toc_data: List[Dict]):
                         "On This Page",
                         class_name="text-xs text-muted-foreground font-medium pb-2",
                     ),
-                    _create_markdown_toc_links(url, toc_data),
+                    rx.el.div(
+                        _create_markdown_toc_links(url, toc_data),
+                        rx.el.div(class_name="py-2"),
+                        class_name=(
+                            "w-full flex flex-col "
+                            "h-[calc(100svh-22rem)] overflow-y-auto scrollbar-none scroll-fade scroll-fade-4"
+                        ),
+                    ),
                     class_name="w-full flex flex-col",
                 ),
                 class_name="flex flex-col w-full h-full p-4 gap-y-6",

app/www/anatomy.py

@@ -120,6 +120,12 @@
     kbd(),
 )""",
     "link": """link()""",
+    "marker": """marker.root(
+    marker.icon(),
+    marker.content(),
+)
+""",
+    "spinner": """spinner()""",
     "menu": """menu.root(
     menu.trigger(),
     menu.portal(

app/www/library/examples/marker_border.py

@@ -0,0 +1,25 @@
+import reflex as rx
+
+from components.icons.hugeicon import hi
+from components.ui.marker import marker
+
+
+def marker_border():
+    return rx.el.div(
+        marker.root(
+            marker.icon(hi("GitBranchIcon")),
+            marker.content("Switched to release-candidate"),
+            variant="border",
+        ),
+        marker.root(
+            marker.icon(hi("Search01Icon")),
+            marker.content("Reviewed 8 related files"),
+            variant="border",
+        ),
+        marker.root(
+            marker.icon(hi("File01Icon")),
+            marker.content("Opened implementation notes"),
+            variant="border",
+        ),
+        class_name="flex w-full max-w-sm flex-col gap-3 py-12",
+    )

app/www/library/examples/marker_links_and_buttons.py

@@ -0,0 +1,35 @@
+import reflex as rx
+
+from components.icons.hugeicon import hi
+from components.ui.marker import marker
+
+
+def marker_link_button():
+    return rx.el.div(
+        marker.root(
+            rx.el.a(
+                marker.icon(hi("GitBranchIcon")),
+                marker.content("View the pull request"),
+                href="#links-and-buttons",
+                class_name="group flex flex-row items-center gap-x-2 underline transition-colors hover:text-foreground",
+            ),
+            variant="default",
+        ),
+        marker.root(
+            rx.el.button(
+                marker.icon(
+                    hi("ArrowMoveUpRightIcon"),
+                    class_name="group-hover:text-foreground transition-colors",
+                ),
+                marker.content(
+                    "Revert this change",
+                    class_name="group-hover:text-foreground transition-colors",
+                ),
+                type="button",
+                class_name="group flex flex-row items-center gap-x-2 transition-colors",
+                on_click=rx.toast("You clicked the revert button"),
+            ),
+            variant="default",
+        ),
+        class_name="flex w-full max-w-sm flex-col gap-8 py-12 justify-center",
+    )

app/www/library/examples/marker_separator.py

@@ -0,0 +1,21 @@
+import reflex as rx
+
+from components.ui.marker import marker
+
+
+def marker_separator():
+    return rx.el.div(
+        marker.root(
+            marker.content("Today"),
+            variant="separator",
+        ),
+        marker.root(
+            marker.content("Worked for 42s"),
+            variant="separator",
+        ),
+        marker.root(
+            marker.content("Conversation compacted"),
+            variant="separator",
+        ),
+        class_name="flex w-full max-w-sm flex-col gap-8 py-12",
+    )

app/www/library/examples/marker_shimmer.py

@@ -0,0 +1,18 @@
+import reflex as rx
+
+from components.ui.marker import marker
+
+
+def marker_shimmer():
+    return rx.el.div(
+        marker.root(
+            marker.content("Thinking...", class_name="shimmer"),
+            role="status",
+        ),
+        marker.root(
+            marker.content("Reading 4 files", class_name="shimmer"),
+            variant="separator",
+            role="status",
+        ),
+        class_name="flex w-full max-w-sm flex-col gap-8 py-12",
+    )

app/www/library/examples/marker_status.py

@@ -0,0 +1,21 @@
+import reflex as rx
+
+from components.ui.marker import marker
+from components.ui.spinner import spinner
+
+
+def marker_status_demo():
+    return rx.el.div(
+        marker.root(
+            marker.icon(spinner()),
+            marker.content("Compacting conversation"),
+            role="status",
+        ),
+        marker.root(
+            marker.icon(spinner()),
+            marker.content("Running tests"),
+            variant="separator",
+            role="status",
+        ),
+        class_name="flex w-full max-w-sm flex-col gap-8 py-12",
+    )

app/www/library/examples/marker_variants.py

@@ -0,0 +1,23 @@
+import reflex as rx
+
+from components.ui.marker import marker
+
+
+def marker_variants_demo():
+    return rx.el.div(
+        # Default Marker
+        marker.root(
+            marker.content("A default marker for inline notes."),
+        ),
+        # Separator Marker
+        marker.root(
+            marker.content("A separator marker"),
+            variant="separator",
+        ),
+        # Border Marker
+        marker.root(
+            marker.content("A border marker for row boundaries."),
+            variant="border",
+        ),
+        class_name="flex w-full max-w-sm flex-col gap-8 py-12",
+    )

app/www/library/examples/marker_with_icon.py

@@ -0,0 +1,24 @@
+import reflex as rx
+
+from components.icons.hugeicon import hi
+from components.ui.marker import marker
+
+
+def marker_with_icon():
+    return rx.el.div(
+        marker.root(
+            marker.icon(hi("GitBranchIcon")),
+            marker.content("Switched to a new branch"),
+        ),
+        marker.root(
+            marker.icon(hi("Search01Icon")),
+            marker.content("Explored 4 files"),
+            variant="separator",
+        ),
+        marker.root(
+            marker.icon(hi("BookOpenCheckIcon")),
+            marker.content("Syncing completed"),
+            class_name="flex-col",
+        ),
+        class_name="flex w-full max-w-sm flex-col gap-12 py-12",
+    )

app/www/library/examples/spinner_badge.py

@@ -0,0 +1,13 @@
+import reflex as rx
+
+from components.ui.badge import badge
+from components.ui.spinner import spinner
+
+
+def spinner_badge():
+    return rx.el.div(
+        badge(spinner(), "Syncing"),
+        badge(spinner(), "Updating", variant="secondary"),
+        badge(spinner(), "Processing", variant="outline"),
+        class_name="flex items-center gap-4",
+    )

app/www/library/examples/spinner_button.py

@@ -0,0 +1,13 @@
+import reflex as rx
+
+from components.ui.button import button
+from components.ui.spinner import spinner
+
+
+def spinner_button():
+    return rx.el.div(
+        button(spinner(), "Loading...", disabled=True, size="sm"),
+        button(spinner(), "Please wait", disabled=True, size="sm", variant="outline"),
+        button(spinner(), "Processing", disabled=True, size="sm", variant="secondary"),
+        class_name="flex flex-col items-center gap-4",
+    )

app/www/library/examples/spinner_marker.py

@@ -0,0 +1,27 @@
+import reflex as rx
+
+from components.ui.marker import marker
+from components.ui.spinner import spinner
+
+
+def spinner_marker():
+    return rx.el.div(
+        marker.root(
+            marker.icon(spinner()),
+            marker.content("Thinking…", class_name="shimmer w-fit"),
+            role="status",
+        ),
+        marker.root(
+            marker.icon(spinner()),
+            marker.content("Generating response…", class_name="shimmer w-fit"),
+            variant="border",
+            role="status",
+        ),
+        marker.root(
+            marker.icon(spinner()),
+            marker.content("Processing"),
+            variant="separator",
+            role="status",
+        ),
+        class_name="flex w-full max-w-sm flex-col gap-6",
+    )

app/www/library/examples/spinner_size.py

@@ -0,0 +1,13 @@
+import reflex as rx
+
+from components.ui.spinner import spinner
+
+
+def spinner_size():
+    return rx.el.div(
+        spinner(class_name="size-3"),
+        spinner(class_name="size-4"),
+        spinner(class_name="size-6"),
+        spinner(class_name="size-8"),
+        class_name="flex items-center gap-6",
+    )