@multicomma/arkcn 0.1.2 → 0.1.3

package/registry/items/app-shell.json

@@ -58,6 +58,2659 @@
     "AppShellSidebarHeader",
     "useAppShell"
   ],
+  "parts": [
+    {
+      "name": "AppShell",
+      "props": [
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "arkcn"
+        },
+        {
+          "name": "collapsible",
+          "type": "SidebarCollapsible",
+          "required": false,
+          "description": "Controlled sidebar collapse mode: `offcanvas`, `icon`, or `none`.",
+          "from": "arkcn"
+        },
+        {
+          "name": "defaultCollapsible",
+          "type": "SidebarCollapsible",
+          "required": false,
+          "default": "\"icon\"",
+          "description": "Initial collapse mode when uncontrolled.",
+          "from": "arkcn"
+        },
+        {
+          "name": "defaultOpen",
+          "type": "boolean",
+          "required": false,
+          "description": "The initial open state when uncontrolled.",
+          "from": "arkcn"
+        },
+        {
+          "name": "defaultVariant",
+          "type": "SidebarVariant",
+          "required": false,
+          "default": "\"inset\"",
+          "description": "Initial sidebar variant when uncontrolled.",
+          "from": "arkcn"
+        },
+        {
+          "name": "onCollapsibleChange",
+          "type": "((collapsible: SidebarCollapsible) => void)",
+          "required": false,
+          "description": "Called when the collapse mode changes.",
+          "from": "arkcn"
+        },
+        {
+          "name": "onOpenChange",
+          "type": "((open: boolean) => void)",
+          "required": false,
+          "description": "Called when the open state changes.",
+          "from": "arkcn"
+        },
+        {
+          "name": "onVariantChange",
+          "type": "((variant: SidebarVariant) => void)",
+          "required": false,
+          "description": "Called when the sidebar variant changes.",
+          "from": "arkcn"
+        },
+        {
+          "name": "open",
+          "type": "boolean",
+          "required": false,
+          "description": "The controlled open state.",
+          "from": "arkcn"
+        },
+        {
+          "name": "searchShortcut",
+          "type": "boolean",
+          "required": false,
+          "default": "true",
+          "description": "Toggle the search dialog with Cmd/Ctrl+K.",
+          "from": "arkcn"
+        },
+        {
+          "name": "variant",
+          "type": "SidebarVariant",
+          "required": false,
+          "description": "Visual variant, styled with `cva`; sets a `data-variant` attribute.",
+          "from": "arkcn"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "AppShellBrand",
+      "props": [
+        {
+          "name": "asChild",
+          "type": "boolean",
+          "required": false,
+          "description": "Render the child element instead of the default one, merging props and behaviour onto it.",
+          "from": "arkcn"
+        },
+        {
+          "name": "isActive",
+          "type": "boolean",
+          "required": false,
+          "description": "Marks the current item.",
+          "from": "arkcn"
+        },
+        {
+          "name": "size",
+          "type": "\"default\" | \"sm\" | \"lg\" | null",
+          "required": false,
+          "description": "Size variant; sets a `data-size` attribute.",
+          "from": "arkcn"
+        },
+        {
+          "name": "tooltip",
+          "type": "string | (TooltipContentProps & RefAttributes<HTMLDivElement>)",
+          "required": false,
+          "description": "Tooltip content shown on hover, or `false` to disable it.",
+          "from": "arkcn"
+        },
+        {
+          "name": "variant",
+          "type": "\"default\" | \"outline\" | null",
+          "required": false,
+          "description": "Visual variant, styled with `cva`; sets a `data-variant` attribute.",
+          "from": "arkcn"
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "AppShellBrandChevron",
+      "props": [
+        {
+          "name": "absoluteStrokeWidth",
+          "type": "boolean",
+          "required": false,
+          "from": "lucide-react"
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "size",
+          "type": "string | number",
+          "required": false,
+          "description": "Size variant; sets a `data-size` attribute.",
+          "from": "lucide-react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "AppShellBrandDescription",
+      "props": [
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "AppShellBrandLogo",
+      "props": [
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "AppShellBrandText",
+      "props": [
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "AppShellBrandTitle",
+      "props": [
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "AppShellCommandDialog",
+      "props": [
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "arkcn"
+        },
+        {
+          "name": "description",
+          "type": "string",
+          "required": false,
+          "description": "Description text.",
+          "from": "arkcn"
+        },
+        {
+          "name": "showCloseButton",
+          "type": "boolean",
+          "required": false,
+          "description": "Render the close button.",
+          "from": "arkcn"
+        },
+        {
+          "name": "title",
+          "type": "string",
+          "required": false,
+          "description": "Title text.",
+          "from": "arkcn"
+        },
+        {
+          "name": "aria-label",
+          "type": "string",
+          "required": false,
+          "description": "Human readable label for the dialog, in event the dialog title is not rendered",
+          "from": "@zag-js/dialog"
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@ark-ui/react"
+        },
+        {
+          "name": "closeOnEscape",
+          "type": "boolean",
+          "required": false,
+          "default": "true",
+          "description": "Whether to close the dialog when the escape key is pressed",
+          "from": "@zag-js/dialog"
+        },
+        {
+          "name": "closeOnInteractOutside",
+          "type": "boolean",
+          "required": false,
+          "default": "true",
+          "description": "Whether to close the dialog when the outside is clicked",
+          "from": "@zag-js/dialog"
+        },
+        {
+          "name": "defaultOpen",
+          "type": "boolean",
+          "required": false,
+          "default": "false",
+          "description": "The initial open state of the dialog when rendered.\nUse when you don't need to control the open state of the dialog.",
+          "from": "@zag-js/dialog"
+        },
+        {
+          "name": "defaultTriggerValue",
+          "type": "string | null",
+          "required": false,
+          "description": "The initial active trigger value when rendered.\nUse when you don't need to control the active trigger value.",
+          "from": "@zag-js/dialog"
+        },
+        {
+          "name": "finalFocusEl",
+          "type": "(() => MaybeElement)",
+          "required": false,
+          "description": "Element to receive focus when the dialog is closed",
+          "from": "@zag-js/dialog"
+        },
+        {
+          "name": "hideMode",
+          "type": "HideMode",
+          "required": false,
+          "default": "'display-none'",
+          "description": "How to hide content when mounted but not present.\n- `'display-none'`: HTML `hidden` attribute. Effects stay alive.\n- `'activity'`: React 19 `<Activity mode=\"hidden\">`. Effects pause. Requires React 19+.",
+          "from": "@ark-ui/react"
+        },
+        {
+          "name": "id",
+          "type": "string",
+          "required": false,
+          "description": "The unique identifier of the machine.",
+          "from": "@zag-js/types"
+        },
+        {
+          "name": "ids",
+          "type": "ElementIds",
+          "required": false,
+          "description": "The ids of the elements in the dialog. Useful for composition.",
+          "from": "@zag-js/dialog"
+        },
+        {
+          "name": "immediate",
+          "type": "boolean",
+          "required": false,
+          "description": "Whether to synchronize the present change immediately or defer it to the next frame",
+          "from": "@zag-js/presence"
+        },
+        {
+          "name": "initialFocusEl",
+          "type": "(() => MaybeElement)",
+          "required": false,
+          "description": "Element to receive focus when the dialog is opened",
+          "from": "@zag-js/dialog"
+        },
+        {
+          "name": "lazyMount",
+          "type": "boolean",
+          "required": false,
+          "default": "false",
+          "description": "Whether to enable lazy mounting",
+          "from": "@ark-ui/react"
+        },
+        {
+          "name": "modal",
+          "type": "boolean",
+          "required": false,
+          "default": "true",
+          "description": "Whether to prevent pointer interaction outside the element and hide all content below it",
+          "from": "@zag-js/dialog"
+        },
+        {
+          "name": "onEnterComplete",
+          "type": "VoidFunction",
+          "required": false,
+          "description": "Function called when the animation ends in the open state",
+          "from": "@zag-js/presence"
+        },
+        {
+          "name": "onEscapeKeyDown",
+          "type": "((event: KeyboardEvent) => void)",
+          "required": false,
+          "description": "Function called when the escape key is pressed",
+          "from": "@zag-js/dismissable"
+        },
+        {
+          "name": "onExitComplete",
+          "type": "VoidFunction",
+          "required": false,
+          "description": "Function called when the animation ends in the closed state",
+          "from": "@zag-js/presence"
+        },
+        {
+          "name": "onFocusOutside",
+          "type": "((event: FocusOutsideEvent) => void)",
+          "required": false,
+          "description": "Function called when the focus is moved outside the component",
+          "from": "@zag-js/interact-outside"
+        },
+        {
+          "name": "onInteractOutside",
+          "type": "((event: InteractOutsideEvent) => void)",
+          "required": false,
+          "description": "Function called when an interaction happens outside the component",
+          "from": "@zag-js/interact-outside"
+        },
+        {
+          "name": "onPointerDownOutside",
+          "type": "((event: PointerDownOutsideEvent) => void)",
+          "required": false,
+          "description": "Function called when the pointer is pressed down outside the component",
+          "from": "@zag-js/interact-outside"
+        },
+        {
+          "name": "onRequestDismiss",
+          "type": "((event: LayerDismissEvent) => void)",
+          "required": false,
+          "description": "Function called when this layer is closed due to a parent layer being closed",
+          "from": "@zag-js/dismissable"
+        },
+        {
+          "name": "onTriggerValueChange",
+          "type": "((details: TriggerValueChangeDetails) => void)",
+          "required": false,
+          "description": "Function to call when the active trigger changes",
+          "from": "@zag-js/dialog"
+        },
+        {
+          "name": "persistentElements",
+          "type": "(() => Element | null)[]",
+          "required": false,
+          "description": "Returns the persistent elements that:\n- should not have pointer-events disabled\n- should not trigger the dismiss event",
+          "from": "@zag-js/dismissable"
+        },
+        {
+          "name": "present",
+          "type": "boolean",
+          "required": false,
+          "description": "Whether the node is present (controlled by the user)",
+          "from": "@zag-js/presence"
+        },
+        {
+          "name": "preventScroll",
+          "type": "boolean",
+          "required": false,
+          "default": "true",
+          "description": "Whether to prevent scrolling behind the dialog when it's opened",
+          "from": "@zag-js/dialog"
+        },
+        {
+          "name": "restoreFocus",
+          "type": "boolean",
+          "required": false,
+          "description": "Whether to restore focus to the element that had focus before the dialog was opened",
+          "from": "@zag-js/dialog"
+        },
+        {
+          "name": "role",
+          "type": "\"dialog\" | \"alertdialog\"",
+          "required": false,
+          "default": "\"dialog\"",
+          "description": "The dialog's role",
+          "from": "@zag-js/dialog"
+        },
+        {
+          "name": "skipAnimationOnMount",
+          "type": "boolean",
+          "required": false,
+          "default": "false",
+          "description": "Whether to allow the initial presence animation.",
+          "from": "@ark-ui/react"
+        },
+        {
+          "name": "trapFocus",
+          "type": "boolean",
+          "required": false,
+          "default": "true",
+          "description": "Whether to trap focus inside the dialog when it's opened",
+          "from": "@zag-js/dialog"
+        },
+        {
+          "name": "triggerValue",
+          "type": "string | null",
+          "required": false,
+          "description": "The controlled active trigger value",
+          "from": "@zag-js/dialog"
+        },
+        {
+          "name": "unmountOnExit",
+          "type": "boolean",
+          "required": false,
+          "default": "false",
+          "description": "Whether to unmount on exit.",
+          "from": "@ark-ui/react"
+        }
+      ]
+    },
+    {
+      "name": "AppShellContent",
+      "props": [
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "AppShellHeader",
+      "props": [
+        {
+          "name": "fixed",
+          "type": "boolean",
+          "required": false,
+          "default": "false",
+          "description": "Pin the header, or size the main area to the viewport so the page scrolls inside it.",
+          "from": "arkcn"
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "AppShellHeaderActions",
+      "props": [
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "AppShellMain",
+      "props": [
+        {
+          "name": "fixed",
+          "type": "boolean",
+          "required": false,
+          "default": "false",
+          "description": "Pin the header, or size the main area to the viewport so the page scrolls inside it.",
+          "from": "arkcn"
+        },
+        {
+          "name": "fluid",
+          "type": "boolean",
+          "required": false,
+          "default": "false",
+          "description": "Let the main area use the full width instead of the content max width.",
+          "from": "arkcn"
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "AppShellNav",
+      "props": [
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "AppShellNavBadge",
+      "props": [
+        {
+          "name": "asChild",
+          "type": "boolean",
+          "required": false,
+          "description": "Render the child element instead of the default one, merging props and behaviour onto it.",
+          "from": "arkcn"
+        },
+        {
+          "name": "variant",
+          "type": "\"link\" | \"default\" | \"outline\" | \"secondary\" | \"ghost\" | \"destructive\" | null",
+          "required": false,
+          "description": "Visual variant, styled with `cva`; sets a `data-variant` attribute.",
+          "from": "arkcn"
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "AppShellNavCollapsible",
+      "props": [
+        {
+          "name": "trigger",
+          "type": "ReactNode",
+          "required": true,
+          "description": "Element rendered as the trigger for the collapsible group.",
+          "from": "arkcn"
+        },
+        {
+          "name": "active",
+          "type": "boolean",
+          "required": false,
+          "default": "false",
+          "description": "Whether the part is the active one; sets `data-active`.",
+          "from": "arkcn"
+        },
+        {
+          "name": "defaultOpen",
+          "type": "boolean",
+          "required": false,
+          "description": "The initial open state when uncontrolled.",
+          "from": "arkcn"
+        },
+        {
+          "name": "menu",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Rendered inside the flyout when the sidebar is collapsed to icons.",
+          "from": "arkcn"
+        },
+        {
+          "name": "tooltip",
+          "type": "string",
+          "required": false,
+          "description": "Tooltip content shown on hover, or `false` to disable it.",
+          "from": "arkcn"
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "AppShellNavItem",
+      "props": [
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "AppShellNavLabel",
+      "props": [
+        {
+          "name": "asChild",
+          "type": "boolean",
+          "required": false,
+          "description": "Render the child element instead of the default one, merging props and behaviour onto it.",
+          "from": "arkcn"
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "AppShellNavLink",
+      "props": [
+        {
+          "name": "active",
+          "type": "boolean",
+          "required": false,
+          "default": "false",
+          "description": "Whether the part is the active one; sets `data-active`.",
+          "from": "arkcn"
+        },
+        {
+          "name": "asChild",
+          "type": "boolean",
+          "required": false,
+          "default": "true",
+          "description": "Render the child element instead of the default one, merging props and behaviour onto it.",
+          "from": "arkcn"
+        },
+        {
+          "name": "size",
+          "type": "\"default\" | \"sm\" | \"lg\" | null",
+          "required": false,
+          "description": "Size variant; sets a `data-size` attribute.",
+          "from": "arkcn"
+        },
+        {
+          "name": "tooltip",
+          "type": "string | (TooltipContentProps & RefAttributes<HTMLDivElement>)",
+          "required": false,
+          "description": "Tooltip content shown on hover, or `false` to disable it.",
+          "from": "arkcn"
+        },
+        {
+          "name": "variant",
+          "type": "\"default\" | \"outline\" | null",
+          "required": false,
+          "description": "Visual variant, styled with `cva`; sets a `data-variant` attribute.",
+          "from": "arkcn"
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "AppShellNavList",
+      "props": [
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "AppShellNavMenuLink",
+      "props": [
+        {
+          "name": "active",
+          "type": "boolean",
+          "required": false,
+          "default": "false",
+          "description": "Whether the part is the active one; sets `data-active`.",
+          "from": "arkcn"
+        },
+        {
+          "name": "inset",
+          "type": "boolean",
+          "required": false,
+          "description": "Indent the item to align with items that have an indicator.",
+          "from": "arkcn"
+        },
+        {
+          "name": "value",
+          "type": "string",
+          "required": false,
+          "description": "The controlled value.",
+          "from": "arkcn"
+        },
+        {
+          "name": "variant",
+          "type": "\"default\" | \"destructive\"",
+          "required": false,
+          "description": "Visual variant, styled with `cva`; sets a `data-variant` attribute.",
+          "from": "arkcn"
+        },
+        {
+          "name": "asChild",
+          "type": "boolean",
+          "required": false,
+          "default": "true",
+          "description": "Use the provided child element as the default rendered element, combining their props and behavior.",
+          "from": "@ark-ui/react"
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "closeOnSelect",
+          "type": "boolean",
+          "required": false,
+          "description": "Whether the menu should be closed when the option is selected.",
+          "from": "@zag-js/menu"
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "required": false,
+          "description": "Whether the menu item is disabled",
+          "from": "@zag-js/menu"
+        },
+        {
+          "name": "onSelect",
+          "type": "VoidFunction",
+          "required": false,
+          "description": "The function to call when the item is selected",
+          "from": "@ark-ui/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        },
+        {
+          "name": "valueText",
+          "type": "string",
+          "required": false,
+          "description": "The textual value of the option. Used in typeahead navigation of the menu.\nIf not provided, the text content of the menu item will be used.",
+          "from": "@zag-js/menu"
+        }
+      ]
+    },
+    {
+      "name": "AppShellNavSubItem",
+      "props": [
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "AppShellNavSubLink",
+      "props": [
+        {
+          "name": "active",
+          "type": "boolean",
+          "required": false,
+          "default": "false",
+          "description": "Whether the part is the active one; sets `data-active`.",
+          "from": "arkcn"
+        },
+        {
+          "name": "asChild",
+          "type": "boolean",
+          "required": false,
+          "default": "true",
+          "description": "Render the child element instead of the default one, merging props and behaviour onto it.",
+          "from": "arkcn"
+        },
+        {
+          "name": "size",
+          "type": "\"sm\" | \"md\"",
+          "required": false,
+          "description": "Size variant; sets a `data-size` attribute.",
+          "from": "arkcn"
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "AppShellNotificationItem",
+      "props": [
+        {
+          "name": "asChild",
+          "type": "boolean",
+          "required": false,
+          "description": "Render the item's child (e.g. an anchor or button) as the interactive surface.",
+          "from": "arkcn"
+        },
+        {
+          "name": "unread",
+          "type": "boolean",
+          "required": false,
+          "description": "Mark the notification unread; sets `data-unread` and shows the indicator.",
+          "from": "arkcn"
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "AppShellNotificationItemContent",
+      "props": [
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "AppShellNotificationItemDescription",
+      "props": [
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "AppShellNotificationItemIcon",
+      "props": [
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "AppShellNotificationItemIndicator",
+      "props": [
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "AppShellNotificationItemTime",
+      "props": [
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "AppShellNotificationItemTitle",
+      "props": [
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "AppShellNotifications",
+      "props": [
+        {
+          "name": "autoFocus",
+          "type": "boolean",
+          "required": false,
+          "default": "true",
+          "description": "Whether to automatically set focus on the first focusable\ncontent within the popover when opened.",
+          "from": "@zag-js/popover"
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@ark-ui/react"
+        },
+        {
+          "name": "closeOnEscape",
+          "type": "boolean",
+          "required": false,
+          "default": "true",
+          "description": "Whether to close the popover when the escape key is pressed.",
+          "from": "@zag-js/popover"
+        },
+        {
+          "name": "closeOnInteractOutside",
+          "type": "boolean",
+          "required": false,
+          "default": "true",
+          "description": "Whether to close the popover when the user clicks outside of the popover.",
+          "from": "@zag-js/popover"
+        },
+        {
+          "name": "defaultOpen",
+          "type": "boolean",
+          "required": false,
+          "description": "The initial open state of the popover when rendered.\nUse when you don't need to control the open state of the popover.",
+          "from": "@zag-js/popover"
+        },
+        {
+          "name": "defaultTriggerValue",
+          "type": "string | null",
+          "required": false,
+          "description": "The initial trigger value when rendered.\nUse when you don't need to control the trigger value.",
+          "from": "@zag-js/popover"
+        },
+        {
+          "name": "finalFocusEl",
+          "type": "(() => MaybeElement)",
+          "required": false,
+          "description": "Element to receive focus when the popover is closed.",
+          "from": "@zag-js/popover"
+        },
+        {
+          "name": "hideMode",
+          "type": "HideMode",
+          "required": false,
+          "default": "'display-none'",
+          "description": "How to hide content when mounted but not present.\n- `'display-none'`: HTML `hidden` attribute. Effects stay alive.\n- `'activity'`: React 19 `<Activity mode=\"hidden\">`. Effects pause. Requires React 19+.",
+          "from": "@ark-ui/react"
+        },
+        {
+          "name": "id",
+          "type": "string",
+          "required": false,
+          "description": "The unique identifier of the machine.",
+          "from": "@zag-js/types"
+        },
+        {
+          "name": "ids",
+          "type": "ElementIds",
+          "required": false,
+          "description": "The ids of the elements in the popover. Useful for composition.",
+          "from": "@zag-js/popover"
+        },
+        {
+          "name": "immediate",
+          "type": "boolean",
+          "required": false,
+          "description": "Whether to synchronize the present change immediately or defer it to the next frame",
+          "from": "@zag-js/presence"
+        },
+        {
+          "name": "initialFocusEl",
+          "type": "(() => HTMLElement | null)",
+          "required": false,
+          "description": "The element to focus on when the popover is opened.",
+          "from": "@zag-js/popover"
+        },
+        {
+          "name": "lazyMount",
+          "type": "boolean",
+          "required": false,
+          "default": "false",
+          "description": "Whether to enable lazy mounting",
+          "from": "@ark-ui/react"
+        },
+        {
+          "name": "modal",
+          "type": "boolean",
+          "required": false,
+          "default": "false",
+          "description": "Whether the popover should be modal. When set to `true`:\n- interaction with outside elements will be disabled\n- only popover content will be visible to screen readers\n- scrolling is blocked\n- focus is trapped within the popover",
+          "from": "@zag-js/popover"
+        },
+        {
+          "name": "onEnterComplete",
+          "type": "VoidFunction",
+          "required": false,
+          "description": "Function called when the animation ends in the open state",
+          "from": "@zag-js/presence"
+        },
+        {
+          "name": "onEscapeKeyDown",
+          "type": "((event: KeyboardEvent) => void)",
+          "required": false,
+          "description": "Function called when the escape key is pressed",
+          "from": "@zag-js/dismissable"
+        },
+        {
+          "name": "onExitComplete",
+          "type": "VoidFunction",
+          "required": false,
+          "description": "Function called when the animation ends in the closed state",
+          "from": "@zag-js/presence"
+        },
+        {
+          "name": "onFocusOutside",
+          "type": "((event: FocusOutsideEvent) => void)",
+          "required": false,
+          "description": "Function called when the focus is moved outside the component",
+          "from": "@zag-js/interact-outside"
+        },
+        {
+          "name": "onInteractOutside",
+          "type": "((event: InteractOutsideEvent) => void)",
+          "required": false,
+          "description": "Function called when an interaction happens outside the component",
+          "from": "@zag-js/interact-outside"
+        },
+        {
+          "name": "onOpenChange",
+          "type": "((details: OpenChangeDetails) => void)",
+          "required": false,
+          "description": "Function invoked when the popover opens or closes",
+          "from": "@zag-js/popover"
+        },
+        {
+          "name": "onPointerDownOutside",
+          "type": "((event: PointerDownOutsideEvent) => void)",
+          "required": false,
+          "description": "Function called when the pointer is pressed down outside the component",
+          "from": "@zag-js/interact-outside"
+        },
+        {
+          "name": "onRequestDismiss",
+          "type": "((event: LayerDismissEvent) => void)",
+          "required": false,
+          "description": "Function called when this layer is closed due to a parent layer being closed",
+          "from": "@zag-js/dismissable"
+        },
+        {
+          "name": "onTriggerValueChange",
+          "type": "((details: TriggerValueChangeDetails) => void)",
+          "required": false,
+          "description": "Function called when the trigger value changes.",
+          "from": "@zag-js/popover"
+        },
+        {
+          "name": "open",
+          "type": "boolean",
+          "required": false,
+          "description": "The controlled open state of the popover",
+          "from": "@zag-js/popover"
+        },
+        {
+          "name": "persistentElements",
+          "type": "(() => Element | null)[]",
+          "required": false,
+          "description": "Returns the persistent elements that:\n- should not have pointer-events disabled\n- should not trigger the dismiss event",
+          "from": "@zag-js/dismissable"
+        },
+        {
+          "name": "portalled",
+          "type": "boolean",
+          "required": false,
+          "default": "true",
+          "description": "Whether the popover is portalled. This will proxy the tabbing behavior regardless of the DOM position\nof the popover content.",
+          "from": "@zag-js/popover"
+        },
+        {
+          "name": "positioning",
+          "type": "PositioningOptions",
+          "required": false,
+          "description": "The user provided options used to position the popover content",
+          "from": "@zag-js/popover"
+        },
+        {
+          "name": "present",
+          "type": "boolean",
+          "required": false,
+          "description": "Whether the node is present (controlled by the user)",
+          "from": "@zag-js/presence"
+        },
+        {
+          "name": "restoreFocus",
+          "type": "boolean",
+          "required": false,
+          "default": "true",
+          "description": "Whether to restore focus to the element that had focus before the popover was opened.",
+          "from": "@zag-js/popover"
+        },
+        {
+          "name": "skipAnimationOnMount",
+          "type": "boolean",
+          "required": false,
+          "default": "false",
+          "description": "Whether to allow the initial presence animation.",
+          "from": "@ark-ui/react"
+        },
+        {
+          "name": "translations",
+          "type": "IntlTranslations",
+          "required": false,
+          "description": "Specifies the localized strings that identifies the accessibility elements and their states",
+          "from": "@zag-js/popover"
+        },
+        {
+          "name": "triggerValue",
+          "type": "string | null",
+          "required": false,
+          "description": "The controlled trigger value",
+          "from": "@zag-js/popover"
+        },
+        {
+          "name": "unmountOnExit",
+          "type": "boolean",
+          "required": false,
+          "default": "false",
+          "description": "Whether to unmount on exit.",
+          "from": "@ark-ui/react"
+        }
+      ]
+    },
+    {
+      "name": "AppShellNotificationsActionTrigger",
+      "props": [
+        {
+          "name": "asChild",
+          "type": "boolean",
+          "required": false,
+          "description": "Render the child element instead of the default one, merging props and behaviour onto it.",
+          "from": "arkcn"
+        },
+        {
+          "name": "size",
+          "type": "\"default\" | \"xs\" | \"sm\" | \"lg\" | \"icon\" | \"icon-xs\" | \"icon-sm\" | \"icon-lg\" | null",
+          "required": false,
+          "default": "\"sm\"",
+          "description": "Size variant; sets a `data-size` attribute.",
+          "from": "arkcn"
+        },
+        {
+          "name": "variant",
+          "type": "\"link\" | \"default\" | \"outline\" | \"secondary\" | \"ghost\" | \"destructive\" | null",
+          "required": false,
+          "default": "\"link\"",
+          "description": "Visual variant, styled with `cva`; sets a `data-variant` attribute.",
+          "from": "arkcn"
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "AppShellNotificationsContent",
+      "props": [
+        {
+          "name": "asChild",
+          "type": "boolean",
+          "required": false,
+          "description": "Use the provided child element as the default rendered element, combining their props and behavior.",
+          "from": "@ark-ui/react"
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "AppShellNotificationsEmpty",
+      "props": [
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "AppShellNotificationsFooter",
+      "props": [
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "AppShellNotificationsHeader",
+      "props": [
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "AppShellNotificationsList",
+      "props": [
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "AppShellNotificationsTitle",
+      "props": [
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "AppShellNotificationsTrigger",
+      "props": [
+        {
+          "name": "asChild",
+          "type": "boolean",
+          "required": false,
+          "description": "Render the child element instead of the default one, merging props and behaviour onto it.",
+          "from": "arkcn"
+        },
+        {
+          "name": "count",
+          "type": "number",
+          "required": false,
+          "default": "0",
+          "description": "Unread count shown as a badge; hidden when 0.",
+          "from": "arkcn"
+        },
+        {
+          "name": "max",
+          "type": "number",
+          "required": false,
+          "default": "99",
+          "description": "Cap for the badge count; larger counts render as `max+`.",
+          "from": "arkcn"
+        },
+        {
+          "name": "size",
+          "type": "\"default\" | \"xs\" | \"sm\" | \"lg\" | \"icon\" | \"icon-xs\" | \"icon-sm\" | \"icon-lg\" | null",
+          "required": false,
+          "description": "Size variant; sets a `data-size` attribute.",
+          "from": "arkcn"
+        },
+        {
+          "name": "variant",
+          "type": "\"link\" | \"default\" | \"outline\" | \"secondary\" | \"ghost\" | \"destructive\" | null",
+          "required": false,
+          "description": "Visual variant, styled with `cva`; sets a `data-variant` attribute.",
+          "from": "arkcn"
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "AppShellSearch",
+      "props": [
+        {
+          "name": "asChild",
+          "type": "boolean",
+          "required": false,
+          "description": "Render the child element instead of the default one, merging props and behaviour onto it.",
+          "from": "arkcn"
+        },
+        {
+          "name": "placeholder",
+          "type": "string",
+          "required": false,
+          "default": "\"Search\"",
+          "description": "Text shown while there is no value.",
+          "from": "arkcn"
+        },
+        {
+          "name": "size",
+          "type": "\"default\" | \"xs\" | \"sm\" | \"lg\" | \"icon\" | \"icon-xs\" | \"icon-sm\" | \"icon-lg\" | null",
+          "required": false,
+          "description": "Size variant; sets a `data-size` attribute.",
+          "from": "arkcn"
+        },
+        {
+          "name": "variant",
+          "type": "\"link\" | \"default\" | \"outline\" | \"secondary\" | \"ghost\" | \"destructive\" | null",
+          "required": false,
+          "description": "Visual variant, styled with `cva`; sets a `data-variant` attribute.",
+          "from": "arkcn"
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "AppShellSidebar",
+      "props": [
+        {
+          "name": "collapsible",
+          "type": "\"icon\" | \"offcanvas\" | \"none\"",
+          "required": false,
+          "description": "Collapse mode: `offcanvas`, `icon`, or `none`.",
+          "from": "arkcn"
+        },
+        {
+          "name": "side",
+          "type": "\"left\" | \"right\"",
+          "required": false,
+          "description": "Which side of the anchor or container the part sits on.",
+          "from": "arkcn"
+        },
+        {
+          "name": "variant",
+          "type": "\"sidebar\" | \"floating\" | \"inset\"",
+          "required": false,
+          "description": "Visual variant, styled with `cva`; sets a `data-variant` attribute.",
+          "from": "arkcn"
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "AppShellSkipLink",
+      "props": [
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "default": "\"Skip to main content\"",
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "AppShellThemeToggle",
+      "props": [
+        {
+          "name": "onThemeChange",
+          "type": "(theme: Theme) => void",
+          "required": true,
+          "description": "Called with the next theme when the toggle is used.",
+          "from": "arkcn"
+        },
+        {
+          "name": "theme",
+          "type": "Theme",
+          "required": true,
+          "description": "Current theme: `light`, `dark`, or `system`.",
+          "from": "arkcn"
+        },
+        {
+          "name": "asChild",
+          "type": "boolean",
+          "required": false,
+          "description": "Render the child element instead of the default one, merging props and behaviour onto it.",
+          "from": "arkcn"
+        },
+        {
+          "name": "size",
+          "type": "\"default\" | \"xs\" | \"sm\" | \"lg\" | \"icon\" | \"icon-xs\" | \"icon-sm\" | \"icon-lg\" | null",
+          "required": false,
+          "description": "Size variant; sets a `data-size` attribute.",
+          "from": "arkcn"
+        },
+        {
+          "name": "variant",
+          "type": "\"link\" | \"default\" | \"outline\" | \"secondary\" | \"ghost\" | \"destructive\" | null",
+          "required": false,
+          "description": "Visual variant, styled with `cva`; sets a `data-variant` attribute.",
+          "from": "arkcn"
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "AppShellTopNav",
+      "props": [
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "AppShellTopNavLink",
+      "props": [
+        {
+          "name": "active",
+          "type": "boolean",
+          "required": false,
+          "default": "false",
+          "description": "Whether the part is the active one; sets `data-active`.",
+          "from": "arkcn"
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "AppShellTopNavMenu",
+      "props": [
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "arkcn"
+        },
+        {
+          "name": "anchorPoint",
+          "type": "Point | null",
+          "required": false,
+          "description": "The positioning point for the menu. Can be set by the context menu trigger or the button trigger.",
+          "from": "@zag-js/menu"
+        },
+        {
+          "name": "aria-label",
+          "type": "string",
+          "required": false,
+          "description": "The accessibility label for the menu",
+          "from": "@zag-js/menu"
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@ark-ui/react"
+        },
+        {
+          "name": "closeOnSelect",
+          "type": "boolean",
+          "required": false,
+          "default": "true",
+          "description": "Whether to close the menu when an option is selected",
+          "from": "@zag-js/menu"
+        },
+        {
+          "name": "composite",
+          "type": "boolean",
+          "required": false,
+          "default": "true",
+          "description": "Whether the menu is a composed with other composite widgets like a combobox or tabs",
+          "from": "@zag-js/menu"
+        },
+        {
+          "name": "defaultHighlightedValue",
+          "type": "string | null",
+          "required": false,
+          "description": "The initial highlighted value of the menu item when rendered.\nUse when you don't need to control the highlighted value of the menu item.",
+          "from": "@zag-js/menu"
+        },
+        {
+          "name": "defaultOpen",
+          "type": "boolean",
+          "required": false,
+          "description": "The initial open state of the menu when rendered.\nUse when you don't need to control the open state of the menu.",
+          "from": "@zag-js/menu"
+        },
+        {
+          "name": "defaultTriggerValue",
+          "type": "string | null",
+          "required": false,
+          "description": "The initial trigger value when rendered.\nUse when you don't need to control the trigger value.",
+          "from": "@zag-js/menu"
+        },
+        {
+          "name": "hideMode",
+          "type": "HideMode",
+          "required": false,
+          "default": "'display-none'",
+          "description": "How to hide content when mounted but not present.\n- `'display-none'`: HTML `hidden` attribute. Effects stay alive.\n- `'activity'`: React 19 `<Activity mode=\"hidden\">`. Effects pause. Requires React 19+.",
+          "from": "@ark-ui/react"
+        },
+        {
+          "name": "highlightedValue",
+          "type": "string | null",
+          "required": false,
+          "description": "The controlled highlighted value of the menu item.",
+          "from": "@zag-js/menu"
+        },
+        {
+          "name": "id",
+          "type": "string",
+          "required": false,
+          "description": "The unique identifier of the machine.",
+          "from": "@zag-js/types"
+        },
+        {
+          "name": "ids",
+          "type": "ElementIds",
+          "required": false,
+          "description": "The ids of the elements in the menu. Useful for composition.",
+          "from": "@zag-js/menu"
+        },
+        {
+          "name": "immediate",
+          "type": "boolean",
+          "required": false,
+          "description": "Whether to synchronize the present change immediately or defer it to the next frame",
+          "from": "@zag-js/presence"
+        },
+        {
+          "name": "lazyMount",
+          "type": "boolean",
+          "required": false,
+          "default": "false",
+          "description": "Whether to enable lazy mounting",
+          "from": "@ark-ui/react"
+        },
+        {
+          "name": "loopFocus",
+          "type": "boolean",
+          "required": false,
+          "default": "false",
+          "description": "Whether to loop the keyboard navigation.",
+          "from": "@zag-js/menu"
+        },
+        {
+          "name": "navigate",
+          "type": "((details: NavigateDetails) => void) | null",
+          "required": false,
+          "description": "Function to navigate to the selected item if it's an anchor element",
+          "from": "@zag-js/menu"
+        },
+        {
+          "name": "onEnterComplete",
+          "type": "VoidFunction",
+          "required": false,
+          "description": "Function called when the animation ends in the open state",
+          "from": "@zag-js/presence"
+        },
+        {
+          "name": "onEscapeKeyDown",
+          "type": "((event: KeyboardEvent) => void)",
+          "required": false,
+          "description": "Function called when the escape key is pressed",
+          "from": "@zag-js/dismissable"
+        },
+        {
+          "name": "onExitComplete",
+          "type": "VoidFunction",
+          "required": false,
+          "description": "Function called when the animation ends in the closed state",
+          "from": "@zag-js/presence"
+        },
+        {
+          "name": "onFocusOutside",
+          "type": "((event: FocusOutsideEvent) => void)",
+          "required": false,
+          "description": "Function called when the focus is moved outside the component",
+          "from": "@zag-js/interact-outside"
+        },
+        {
+          "name": "onHighlightChange",
+          "type": "((details: HighlightChangeDetails) => void)",
+          "required": false,
+          "description": "Function called when the highlighted menu item changes.",
+          "from": "@zag-js/menu"
+        },
+        {
+          "name": "onInteractOutside",
+          "type": "((event: InteractOutsideEvent) => void)",
+          "required": false,
+          "description": "Function called when an interaction happens outside the component",
+          "from": "@zag-js/interact-outside"
+        },
+        {
+          "name": "onOpenChange",
+          "type": "((details: OpenChangeDetails) => void)",
+          "required": false,
+          "description": "Function called when the menu opens or closes",
+          "from": "@zag-js/menu"
+        },
+        {
+          "name": "onPointerDownOutside",
+          "type": "((event: PointerDownOutsideEvent) => void)",
+          "required": false,
+          "description": "Function called when the pointer is pressed down outside the component",
+          "from": "@zag-js/interact-outside"
+        },
+        {
+          "name": "onRequestDismiss",
+          "type": "((event: LayerDismissEvent) => void)",
+          "required": false,
+          "description": "Function called when this layer is closed due to a parent layer being closed",
+          "from": "@zag-js/dismissable"
+        },
+        {
+          "name": "onSelect",
+          "type": "((details: SelectionDetails) => void)",
+          "required": false,
+          "description": "Function called when a menu item is selected.",
+          "from": "@zag-js/menu"
+        },
+        {
+          "name": "onTriggerValueChange",
+          "type": "((details: TriggerValueChangeDetails) => void)",
+          "required": false,
+          "description": "Function called when the trigger value changes.",
+          "from": "@zag-js/menu"
+        },
+        {
+          "name": "open",
+          "type": "boolean",
+          "required": false,
+          "description": "The controlled open state of the menu",
+          "from": "@zag-js/menu"
+        },
+        {
+          "name": "positioning",
+          "type": "PositioningOptions",
+          "required": false,
+          "description": "The options used to dynamically position the menu",
+          "from": "@zag-js/menu"
+        },
+        {
+          "name": "present",
+          "type": "boolean",
+          "required": false,
+          "description": "Whether the node is present (controlled by the user)",
+          "from": "@zag-js/presence"
+        },
+        {
+          "name": "skipAnimationOnMount",
+          "type": "boolean",
+          "required": false,
+          "default": "false",
+          "description": "Whether to allow the initial presence animation.",
+          "from": "@ark-ui/react"
+        },
+        {
+          "name": "triggerValue",
+          "type": "string | null",
+          "required": false,
+          "description": "The controlled trigger value",
+          "from": "@zag-js/menu"
+        },
+        {
+          "name": "typeahead",
+          "type": "boolean",
+          "required": false,
+          "default": "true",
+          "description": "Whether the pressing printable characters should trigger typeahead navigation",
+          "from": "@zag-js/menu"
+        },
+        {
+          "name": "unmountOnExit",
+          "type": "boolean",
+          "required": false,
+          "default": "false",
+          "description": "Whether to unmount on exit.",
+          "from": "@ark-ui/react"
+        }
+      ]
+    },
+    {
+      "name": "AppShellUser",
+      "props": [
+        {
+          "name": "asChild",
+          "type": "boolean",
+          "required": false,
+          "description": "Render the child element instead of the default one, merging props and behaviour onto it.",
+          "from": "arkcn"
+        },
+        {
+          "name": "isActive",
+          "type": "boolean",
+          "required": false,
+          "description": "Marks the current item.",
+          "from": "arkcn"
+        },
+        {
+          "name": "size",
+          "type": "\"default\" | \"sm\" | \"lg\" | null",
+          "required": false,
+          "description": "Size variant; sets a `data-size` attribute.",
+          "from": "arkcn"
+        },
+        {
+          "name": "tooltip",
+          "type": "string | (TooltipContentProps & RefAttributes<HTMLDivElement>)",
+          "required": false,
+          "description": "Tooltip content shown on hover, or `false` to disable it.",
+          "from": "arkcn"
+        },
+        {
+          "name": "variant",
+          "type": "\"default\" | \"outline\" | null",
+          "required": false,
+          "description": "Visual variant, styled with `cva`; sets a `data-variant` attribute.",
+          "from": "arkcn"
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "AppShellUserAvatar",
+      "props": [
+        {
+          "name": "fallback",
+          "type": "ReactNode",
+          "required": true,
+          "description": "Text shown while the avatar image is missing or loading.",
+          "from": "arkcn"
+        },
+        {
+          "name": "alt",
+          "type": "string",
+          "required": false,
+          "description": "Alternative text for the avatar image.",
+          "from": "arkcn"
+        },
+        {
+          "name": "size",
+          "type": "\"default\" | \"sm\" | \"lg\"",
+          "required": false,
+          "description": "Size variant; sets a `data-size` attribute.",
+          "from": "arkcn"
+        },
+        {
+          "name": "src",
+          "type": "string",
+          "required": false,
+          "description": "Avatar image URL.",
+          "from": "arkcn"
+        },
+        {
+          "name": "asChild",
+          "type": "boolean",
+          "required": false,
+          "description": "Use the provided child element as the default rendered element, combining their props and behavior.",
+          "from": "@ark-ui/react"
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "ids",
+          "type": "ElementIds",
+          "required": false,
+          "description": "The ids of the elements in the avatar. Useful for composition.",
+          "from": "@zag-js/avatar"
+        },
+        {
+          "name": "onStatusChange",
+          "type": "((details: StatusChangeDetails) => void)",
+          "required": false,
+          "description": "Functional called when the image loading status changes.",
+          "from": "@zag-js/avatar"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "AppShellUserEmail",
+      "props": [
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "AppShellUserName",
+      "props": [
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "AppShellUserText",
+      "props": [
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "AppShellSidebarContent",
+      "props": [
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "AppShellSidebarFooter",
+      "props": [
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "AppShellSidebarHeader",
+      "props": [
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    }
+  ],
   "dependencies": {
     "lucide-react": "^1.41.0"
   },
@@ -77,7 +2730,7 @@
   "files": [
     {
       "path": "components/ui/app-shell.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  BellIcon,\n  CheckIcon,\n  ChevronRightIcon,\n  ChevronsUpDownIcon,\n  MenuIcon,\n  MoonIcon,\n  SearchIcon,\n  SunIcon,\n} from \"lucide-react\"\nimport { cn } from \"@/lib/utils\"\n\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Collapsible, CollapsibleContent, CollapsibleTrigger } from \"@/components/ui/collapsible\"\nimport { CommandDialog } from \"@/components/ui/command\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { Kbd } from \"@/components/ui/kbd\"\nimport { Popover, PopoverContent, PopoverTrigger } from \"@/components/ui/popover\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n  useSidebar,\n} from \"@/components/ui/sidebar\"\n\n/* -------------------------------------------------------------------------- */\n/*  Root                                                                      */\n/* -------------------------------------------------------------------------- */\n\ntype SidebarVariant = \"sidebar\" | \"floating\" | \"inset\"\ntype SidebarCollapsible = \"offcanvas\" | \"icon\" | \"none\"\n\ntype AppShellContextValue = {\n  variant: SidebarVariant\n  setVariant: (variant: SidebarVariant) => void\n  collapsible: SidebarCollapsible\n  setCollapsible: (collapsible: SidebarCollapsible) => void\n  searchOpen: boolean\n  setSearchOpen: React.Dispatch<React.SetStateAction<boolean>>\n}\n\nconst AppShellContext = React.createContext<AppShellContextValue | null>(null)\n\nfunction useAppShell() {\n  const ctx = React.useContext(AppShellContext)\n  if (!ctx) throw new Error(\"useAppShell must be used within <AppShell>\")\n  return ctx\n}\n\n/**\n * Root of the shell. Owns the sidebar open state (via `SidebarProvider`), the\n * sidebar variant and collapse mode, and the global search open state with its\n * Cmd/Ctrl+K shortcut. Routing, theming, and data are the consumer's.\n */\nfunction AppShell({\n  variant: variantProp,\n  defaultVariant = \"inset\",\n  onVariantChange,\n  collapsible: collapsibleProp,\n  defaultCollapsible = \"icon\",\n  onCollapsibleChange,\n  searchShortcut = true,\n  children,\n  ...sidebarProviderProps\n}: Omit<React.ComponentProps<typeof SidebarProvider>, \"children\"> & {\n  variant?: SidebarVariant\n  defaultVariant?: SidebarVariant\n  onVariantChange?: (variant: SidebarVariant) => void\n  collapsible?: SidebarCollapsible\n  defaultCollapsible?: SidebarCollapsible\n  onCollapsibleChange?: (collapsible: SidebarCollapsible) => void\n  /** Toggle the search dialog with Cmd/Ctrl+K. */\n  searchShortcut?: boolean\n  children?: React.ReactNode\n}) {\n  const [variantState, setVariantState] = React.useState(defaultVariant)\n  const [collapsibleState, setCollapsibleState] = React.useState(defaultCollapsible)\n  const [searchOpen, setSearchOpen] = React.useState(false)\n  const variant = variantProp ?? variantState\n  const collapsible = collapsibleProp ?? collapsibleState\n\n  React.useEffect(() => {\n    if (!searchShortcut) return\n    const down = (event: KeyboardEvent) => {\n      if (event.key === \"k\" && (event.metaKey || event.ctrlKey)) {\n        event.preventDefault()\n        setSearchOpen((open) => !open)\n      }\n    }\n    document.addEventListener(\"keydown\", down)\n    return () => document.removeEventListener(\"keydown\", down)\n  }, [searchShortcut])\n\n  const ctx = React.useMemo<AppShellContextValue>(\n    () => ({\n      variant,\n      setVariant: (next) => {\n        if (variantProp === undefined) setVariantState(next)\n        onVariantChange?.(next)\n      },\n      collapsible,\n      setCollapsible: (next) => {\n        if (collapsibleProp === undefined) setCollapsibleState(next)\n        onCollapsibleChange?.(next)\n      },\n      searchOpen,\n      setSearchOpen,\n    }),\n    [variant, variantProp, onVariantChange, collapsible, collapsibleProp, onCollapsibleChange, searchOpen]\n  )\n\n  return (\n    <AppShellContext.Provider value={ctx}>\n      <SidebarProvider {...sidebarProviderProps}>{children}</SidebarProvider>\n    </AppShellContext.Provider>\n  )\n}\n\nfunction AppShellSkipLink({\n  className,\n  href = \"#content\",\n  children = \"Skip to main content\",\n  ...props\n}: React.ComponentProps<\"a\">) {\n  return (\n    <a\n      data-slot=\"app-shell-skip-link\"\n      href={href}\n      className={cn(\n        \"fixed inset-s-44 z-999 -translate-y-52 rounded-md bg-primary px-4 py-2 text-sm font-medium whitespace-nowrap text-primary-foreground opacity-95 shadow-sm transition focus:translate-y-3 focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </a>\n  )\n}\n\n/* -------------------------------------------------------------------------- */\n/*  Sidebar                                                                   */\n/* -------------------------------------------------------------------------- */\n\nfunction AppShellSidebar({ variant, collapsible, children, ...props }: React.ComponentProps<typeof Sidebar>) {\n  const shell = useAppShell()\n  return (\n    <Sidebar\n      data-slot=\"app-shell-sidebar\"\n      variant={variant ?? shell.variant}\n      collapsible={collapsible ?? shell.collapsible}\n      {...props}\n    >\n      {children}\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n\n/* Brand / team switcher trigger ------------------------------------------- */\n\nfunction AppShellBrand({ className, ...props }: React.ComponentProps<typeof SidebarMenuButton>) {\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <SidebarMenuButton\n          data-slot=\"app-shell-brand\"\n          size=\"lg\"\n          className={cn(\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\", className)}\n          {...props}\n        />\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n\nfunction AppShellBrandLogo({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"app-shell-brand-logo\"\n      className={cn(\n        \"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground [&_svg]:size-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AppShellBrandText({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"app-shell-brand-text\"\n      className={cn(\"grid flex-1 text-start text-sm/tight\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AppShellBrandTitle({ className, ...props }: React.ComponentProps<\"span\">) {\n  return <span data-slot=\"app-shell-brand-title\" className={cn(\"truncate font-semibold\", className)} {...props} />\n}\n\nfunction AppShellBrandDescription({ className, ...props }: React.ComponentProps<\"span\">) {\n  return <span data-slot=\"app-shell-brand-description\" className={cn(\"truncate text-xs\", className)} {...props} />\n}\n\nfunction AppShellBrandChevron({ className, ...props }: React.ComponentProps<typeof ChevronsUpDownIcon>) {\n  return <ChevronsUpDownIcon data-slot=\"app-shell-brand-chevron\" className={cn(\"ms-auto\", className)} {...props} />\n}\n\n/* Navigation --------------------------------------------------------------- */\n\nfunction AppShellNav({ ...props }: React.ComponentProps<typeof SidebarGroup>) {\n  return <SidebarGroup data-slot=\"app-shell-nav\" {...props} />\n}\n\nfunction AppShellNavLabel({ ...props }: React.ComponentProps<typeof SidebarGroupLabel>) {\n  return <SidebarGroupLabel data-slot=\"app-shell-nav-label\" {...props} />\n}\n\nfunction AppShellNavList({ ...props }: React.ComponentProps<typeof SidebarMenu>) {\n  return <SidebarMenu data-slot=\"app-shell-nav-list\" {...props} />\n}\n\nfunction AppShellNavItem({ ...props }: React.ComponentProps<typeof SidebarMenuItem>) {\n  return <SidebarMenuItem data-slot=\"app-shell-nav-item\" {...props} />\n}\n\n/**\n * A top-level navigation link. Pass the link element as the child with\n * `asChild` (default) so any router's link works. `active` marks the current\n * route; `tooltip` shows when the sidebar is collapsed to icons.\n */\nfunction AppShellNavLink({\n  active = false,\n  asChild = true,\n  onClick,\n  ...props\n}: Omit<React.ComponentProps<typeof SidebarMenuButton>, \"isActive\"> & {\n  active?: boolean\n}) {\n  const { setOpenMobile } = useSidebar()\n  return (\n    <SidebarMenuButton\n      data-slot=\"app-shell-nav-link\"\n      asChild={asChild}\n      isActive={active}\n      onClick={(event) => {\n        onClick?.(event)\n        setOpenMobile(false)\n      }}\n      {...props}\n    />\n  )\n}\n\nfunction AppShellNavBadge({ className, ...props }: React.ComponentProps<typeof Badge>) {\n  return (\n    <Badge\n      data-slot=\"app-shell-nav-badge\"\n      className={cn(\"ms-auto rounded-full px-1 py-0 text-xs\", className)}\n      {...props}\n    />\n  )\n}\n\n/**\n * A navigation item with children. Expanded sidebar: a collapsible sub-list.\n * Icon-collapsed sidebar on desktop: a flyout menu. Supply `trigger` for the\n * button content and `menu` for the flyout items; `children` is the sub-list.\n */\nfunction AppShellNavCollapsible({\n  active = false,\n  defaultOpen,\n  tooltip,\n  trigger,\n  menu,\n  children,\n  ...props\n}: React.ComponentProps<typeof SidebarMenuItem> & {\n  active?: boolean\n  defaultOpen?: boolean\n  tooltip?: string\n  trigger: React.ReactNode\n  /** Rendered inside the flyout when the sidebar is collapsed to icons. */\n  menu?: React.ReactNode\n}) {\n  const { state, isMobile } = useSidebar()\n\n  if (state === \"collapsed\" && !isMobile) {\n    return (\n      <SidebarMenuItem data-slot=\"app-shell-nav-collapsible\" {...props}>\n        <DropdownMenu positioning={{ placement: \"right-start\", gutter: 4 }}>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton tooltip={tooltip} isActive={active}>\n              {trigger}\n              <ChevronRightIcon className=\"ms-auto\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent data-slot=\"app-shell-nav-flyout\">\n            <DropdownMenuGroup>\n              {tooltip && (\n                <>\n                  <DropdownMenuLabel>{tooltip}</DropdownMenuLabel>\n                  <DropdownMenuSeparator />\n                </>\n              )}\n              {menu}\n            </DropdownMenuGroup>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    )\n  }\n\n  return (\n    <Collapsible\n      defaultOpen={defaultOpen ?? active}\n      className=\"group/collapsible\"\n      unmountOnExit={false}\n      lazyMount={false}\n    >\n      <SidebarMenuItem data-slot=\"app-shell-nav-collapsible\" {...props}>\n        <CollapsibleTrigger asChild>\n          <SidebarMenuButton tooltip={tooltip} isActive={active}>\n            {trigger}\n            <ChevronRightIcon className=\"ms-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90 rtl:rotate-180\" />\n          </SidebarMenuButton>\n        </CollapsibleTrigger>\n        <CollapsibleContent>\n          <SidebarMenuSub data-slot=\"app-shell-nav-sublist\">{children}</SidebarMenuSub>\n        </CollapsibleContent>\n      </SidebarMenuItem>\n    </Collapsible>\n  )\n}\n\nfunction AppShellNavSubItem({ ...props }: React.ComponentProps<typeof SidebarMenuSubItem>) {\n  return <SidebarMenuSubItem data-slot=\"app-shell-nav-subitem\" {...props} />\n}\n\nfunction AppShellNavSubLink({\n  active = false,\n  asChild = true,\n  onClick,\n  ...props\n}: Omit<React.ComponentProps<typeof SidebarMenuSubButton>, \"isActive\"> & { active?: boolean }) {\n  const { setOpenMobile } = useSidebar()\n  return (\n    <SidebarMenuSubButton\n      data-slot=\"app-shell-nav-sublink\"\n      asChild={asChild}\n      isActive={active}\n      onClick={(event) => {\n        onClick?.(event)\n        setOpenMobile(false)\n      }}\n      {...props}\n    />\n  )\n}\n\n/** A flyout menu entry for the icon-collapsed state. */\nfunction AppShellNavMenuLink({\n  active = false,\n  className,\n  asChild = true,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuItem> & { active?: boolean }) {\n  return (\n    <DropdownMenuItem\n      data-slot=\"app-shell-nav-menu-link\"\n      asChild={asChild}\n      className={cn(active && \"bg-secondary\", className)}\n      {...props}\n    />\n  )\n}\n\n/* User footer trigger ------------------------------------------------------ */\n\nfunction AppShellUser({ className, ...props }: React.ComponentProps<typeof SidebarMenuButton>) {\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <SidebarMenuButton\n          data-slot=\"app-shell-user\"\n          size=\"lg\"\n          className={cn(\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\", className)}\n          {...props}\n        />\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n\nfunction AppShellUserAvatar({\n  src,\n  alt,\n  fallback,\n  className,\n  ...props\n}: React.ComponentProps<typeof Avatar> & { src?: string; alt?: string; fallback: React.ReactNode }) {\n  return (\n    <Avatar data-slot=\"app-shell-user-avatar\" className={cn(\"rounded-lg\", className)} {...props}>\n      {src && <AvatarImage src={src} alt={alt} />}\n      <AvatarFallback className=\"rounded-lg\">{fallback}</AvatarFallback>\n    </Avatar>\n  )\n}\n\nfunction AppShellUserText({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div data-slot=\"app-shell-user-text\" className={cn(\"grid flex-1 text-start text-sm/tight\", className)} {...props} />\n  )\n}\n\nfunction AppShellUserName({ className, ...props }: React.ComponentProps<\"span\">) {\n  return <span data-slot=\"app-shell-user-name\" className={cn(\"truncate font-semibold\", className)} {...props} />\n}\n\nfunction AppShellUserEmail({ className, ...props }: React.ComponentProps<\"span\">) {\n  return <span data-slot=\"app-shell-user-email\" className={cn(\"truncate text-xs\", className)} {...props} />\n}\n\n/* -------------------------------------------------------------------------- */\n/*  Content area: header, main                                                */\n/* -------------------------------------------------------------------------- */\n\nfunction AppShellContent({ className, ...props }: React.ComponentProps<typeof SidebarInset>) {\n  return (\n    <SidebarInset\n      data-slot=\"app-shell-content\"\n      id=\"content\"\n      className={cn(\n        \"@container/content\",\n        \"has-data-[layout=fixed]:h-svh\",\n        \"peer-data-[variant=inset]:has-data-[layout=fixed]:h-[calc(100svh-(var(--spacing)*4))]\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AppShellHeader({\n  className,\n  fixed = false,\n  children,\n  ...props\n}: React.ComponentProps<\"header\"> & { fixed?: boolean }) {\n  const [scrolled, setScrolled] = React.useState(false)\n  React.useEffect(() => {\n    if (!fixed) return\n    const onScroll = () => setScrolled((document.body.scrollTop || document.documentElement.scrollTop) > 10)\n    onScroll()\n    document.addEventListener(\"scroll\", onScroll, { passive: true })\n    return () => document.removeEventListener(\"scroll\", onScroll)\n  }, [fixed])\n  return (\n    <header\n      data-slot=\"app-shell-header\"\n      data-fixed={fixed ? \"\" : undefined}\n      data-scrolled={scrolled ? \"\" : undefined}\n      className={cn(\n        // Solid background; the top corners follow the inset card's radius so the\n        // header never squares off the rounded content area.\n        \"z-50 h-16 rounded-t-[inherit] bg-background\",\n        fixed && \"peer/header sticky top-0 w-[inherit]\",\n        fixed && scrolled ? \"shadow-sm\" : \"shadow-none\",\n        className\n      )}\n      {...props}\n    >\n      <div\n        className={cn(\n          \"relative flex h-full items-center gap-3 p-4 sm:gap-4\",\n          fixed &&\n            scrolled &&\n            \"after:absolute after:inset-0 after:-z-10 after:rounded-[inherit] after:bg-background/60 after:backdrop-blur-lg\"\n        )}\n      >\n        <SidebarTrigger variant=\"outline\" className=\"max-md:scale-125\" />\n        <Separator orientation=\"vertical\" className=\"h-6\" />\n        {children}\n      </div>\n    </header>\n  )\n}\n\nfunction AppShellHeaderActions({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"app-shell-header-actions\"\n      className={cn(\"ms-auto flex items-center gap-3 sm:gap-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AppShellMain({\n  className,\n  fixed = false,\n  fluid = false,\n  ...props\n}: React.ComponentProps<\"main\"> & { fixed?: boolean; fluid?: boolean }) {\n  return (\n    <main\n      data-slot=\"app-shell-main\"\n      data-layout={fixed ? \"fixed\" : \"auto\"}\n      className={cn(\n        \"px-4 py-6\",\n        fixed && \"flex grow flex-col overflow-hidden\",\n        !fluid && \"@7xl/content:mx-auto @7xl/content:w-full @7xl/content:max-w-7xl\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\n/* Top nav (secondary, in the header) --------------------------------------- */\n\nfunction AppShellTopNav({ className, ...props }: React.ComponentProps<\"nav\">) {\n  return (\n    <nav\n      data-slot=\"app-shell-top-nav\"\n      className={cn(\"hidden items-center gap-4 lg:flex xl:gap-6\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AppShellTopNavLink({ active = false, className, ...props }: React.ComponentProps<\"a\"> & { active?: boolean }) {\n  return (\n    <a\n      data-slot=\"app-shell-top-nav-link\"\n      data-active={active ? \"\" : undefined}\n      className={cn(\n        \"text-sm font-medium text-muted-foreground transition-colors hover:text-primary data-active:text-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\n/** The small-screen counterpart of `AppShellTopNav`: the same links in a menu. */\nfunction AppShellTopNavMenu({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof DropdownMenu> & { className?: string }) {\n  return (\n    <DropdownMenu positioning={{ placement: \"bottom-start\" }} {...props}>\n      <DropdownMenuTrigger asChild>\n        <Button\n          data-slot=\"app-shell-top-nav-menu-trigger\"\n          size=\"icon\"\n          variant=\"outline\"\n          className={cn(\"md:size-7 lg:hidden\", className)}\n        >\n          <MenuIcon />\n          <span className=\"sr-only\">Toggle navigation menu</span>\n        </Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent>{children}</DropdownMenuContent>\n    </DropdownMenu>\n  )\n}\n\n/* -------------------------------------------------------------------------- */\n/*  Search and command menu                                                   */\n/* -------------------------------------------------------------------------- */\n\nfunction AppShellSearch({\n  className,\n  placeholder = \"Search\",\n  onClick,\n  asChild,\n  children,\n  ...props\n}: React.ComponentProps<typeof Button> & { placeholder?: string }) {\n  const shell = useAppShell()\n  return (\n    <Button\n      data-slot=\"app-shell-search\"\n      variant=\"outline\"\n      asChild={asChild}\n      className={cn(\n        \"group relative h-8 w-full flex-1 justify-start rounded-md bg-muted/25 text-sm font-normal text-muted-foreground shadow-none hover:bg-accent sm:w-40 sm:pe-12 md:flex-none lg:w-52 xl:w-64\",\n        className\n      )}\n      aria-keyshortcuts=\"Meta+K Control+K\"\n      onClick={(event) => {\n        onClick?.(event)\n        if (!event.defaultPrevented) shell.setSearchOpen(true)\n      }}\n      {...props}\n    >\n      {asChild\n        ? children\n        : (children ?? (\n            <>\n              <SearchIcon aria-hidden className=\"absolute inset-s-1.5 top-1/2 size-4 -translate-y-1/2\" />\n              <span className=\"ms-4\">{placeholder}</span>\n              <Kbd className=\"pointer-events-none absolute inset-e-1.5 top-1.5 hidden sm:flex\">⌘K</Kbd>\n            </>\n          ))}\n    </Button>\n  )\n}\n\n/** A `CommandDialog` bound to the shell's search state. */\nfunction AppShellCommandDialog({\n  ...props\n}: Omit<React.ComponentProps<typeof CommandDialog>, \"open\" | \"onOpenChange\">) {\n  const shell = useAppShell()\n  return <CommandDialog open={shell.searchOpen} onOpenChange={({ open }) => shell.setSearchOpen(open)} {...props} />\n}\n\n/* -------------------------------------------------------------------------- */\n/*  Notifications                                                             */\n/* -------------------------------------------------------------------------- */\n\n/**\n * A header notifications popover. Data-agnostic: the consumer renders the\n * items and owns read state; pass `count` to the trigger for the unread badge.\n */\nfunction AppShellNotifications({ positioning, ...props }: React.ComponentProps<typeof Popover>) {\n  return (\n    <Popover\n      data-slot=\"app-shell-notifications\"\n      positioning={{ placement: \"bottom-end\", gutter: 8, ...positioning }}\n      {...props}\n    />\n  )\n}\n\nfunction AppShellNotificationsTrigger({\n  count = 0,\n  max = 99,\n  className,\n  children,\n  asChild,\n  ...props\n}: React.ComponentProps<typeof Button> & {\n  /** Unread count shown as a badge; hidden when 0. */\n  count?: number\n  max?: number\n}) {\n  const label = count > max ? `${max}+` : String(count)\n  return (\n    <PopoverTrigger asChild>\n      <Button\n        data-slot=\"app-shell-notifications-trigger\"\n        data-unread={count > 0 ? \"\" : undefined}\n        variant=\"ghost\"\n        size=\"icon-lg\"\n        asChild={asChild}\n        className={cn(\"relative scale-95 rounded-full\", className)}\n        aria-label={count > 0 ? `Notifications, ${label} unread` : \"Notifications\"}\n        {...props}\n      >\n        {asChild ? children : (children ?? <BellIcon className=\"size-[1.2rem]\" />)}\n        {!asChild && count > 0 && (\n          <span\n            data-slot=\"app-shell-notifications-badge\"\n            aria-hidden\n            className=\"absolute inset-e-0.5 top-0.5 flex h-4 min-w-4 items-center justify-center rounded-full bg-destructive px-1 text-[10px] leading-none font-medium text-white ring-2 ring-background\"\n          >\n            {label}\n          </span>\n        )}\n      </Button>\n    </PopoverTrigger>\n  )\n}\n\nfunction AppShellNotificationsContent({ className, ...props }: React.ComponentProps<typeof PopoverContent>) {\n  return (\n    <PopoverContent\n      data-slot=\"app-shell-notifications-content\"\n      className={cn(\"w-80 gap-0 p-0 sm:w-96\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AppShellNotificationsHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"app-shell-notifications-header\"\n      className={cn(\"flex items-center justify-between gap-2 border-b px-3.5 py-2.5\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AppShellNotificationsTitle({ className, ...props }: React.ComponentProps<\"h3\">) {\n  return <h3 data-slot=\"app-shell-notifications-title\" className={cn(\"text-sm font-semibold\", className)} {...props} />\n}\n\n/** A small text action for the header or footer, e.g. \"Mark all as read\". */\nfunction AppShellNotificationsActionTrigger({\n  className,\n  variant = \"link\",\n  size = \"sm\",\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  return (\n    <Button\n      data-slot=\"app-shell-notifications-action-trigger\"\n      variant={variant}\n      size={size}\n      className={cn(\"h-auto p-0 text-xs text-muted-foreground hover:text-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AppShellNotificationsList({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"app-shell-notifications-list\"\n      className={cn(\"no-scrollbar flex max-h-96 flex-col gap-0.5 overflow-y-auto p-1\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AppShellNotificationItem({\n  unread,\n  asChild,\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"li\"> & {\n  unread?: boolean\n  /** Render the item's child (e.g. an anchor or button) as the interactive surface. */\n  asChild?: boolean\n}) {\n  const itemClassName = cn(\n    \"group/notification relative flex w-full cursor-default gap-3 rounded-md px-2.5 py-2 text-start text-sm outline-hidden transition-colors select-none hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground data-unread:bg-primary/5 dark:data-unread:bg-primary/10\",\n    className\n  )\n  const inner =\n    asChild && React.isValidElement(children)\n      ? React.cloneElement(children as React.ReactElement<Record<string, unknown>>, {\n          \"data-slot\": \"app-shell-notification-item-surface\",\n          \"data-unread\": unread ? \"\" : undefined,\n          className: cn(itemClassName, (children as React.ReactElement<{ className?: string }>).props.className),\n        })\n      : children\n  return (\n    <li\n      data-slot=\"app-shell-notification-item\"\n      data-unread={unread ? \"\" : undefined}\n      className={asChild ? \"flex\" : itemClassName}\n      {...props}\n    >\n      {inner}\n    </li>\n  )\n}\n\nfunction AppShellNotificationItemIcon({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"app-shell-notification-item-icon\"\n      className={cn(\n        \"flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-muted-foreground [&_svg]:size-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AppShellNotificationItemContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"app-shell-notification-item-content\"\n      className={cn(\"flex min-w-0 flex-1 flex-col gap-0.5\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AppShellNotificationItemTitle({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"app-shell-notification-item-title\"\n      className={cn(\"truncate leading-tight font-medium group-data-unread/notification:text-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AppShellNotificationItemDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"app-shell-notification-item-description\"\n      className={cn(\"line-clamp-2 text-xs text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AppShellNotificationItemTime({ className, ...props }: React.ComponentProps<\"time\">) {\n  return (\n    <time\n      data-slot=\"app-shell-notification-item-time\"\n      className={cn(\"text-[11px] text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\n/** The unread dot; renders only inside an unread item. */\nfunction AppShellNotificationItemIndicator({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"app-shell-notification-item-indicator\"\n      aria-hidden\n      className={cn(\n        \"mt-1.5 hidden size-2 shrink-0 rounded-full bg-primary group-data-unread/notification:block\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AppShellNotificationsEmpty({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"app-shell-notifications-empty\"\n      className={cn(\n        \"flex flex-col items-center justify-center gap-1 px-4 py-10 text-center text-sm text-muted-foreground [&_svg]:mb-1 [&_svg]:size-6\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AppShellNotificationsFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"app-shell-notifications-footer\"\n      className={cn(\"flex items-center justify-center border-t px-3.5 py-2\", className)}\n      {...props}\n    />\n  )\n}\n\n/* -------------------------------------------------------------------------- */\n/*  Theme toggle                                                              */\n/* -------------------------------------------------------------------------- */\n\ntype Theme = \"light\" | \"dark\" | \"system\"\n\nfunction AppShellThemeToggle({\n  theme,\n  onThemeChange,\n  className,\n  ...props\n}: Omit<React.ComponentProps<typeof Button>, \"onChange\"> & {\n  theme: Theme\n  onThemeChange: (theme: Theme) => void\n}) {\n  return (\n    <DropdownMenu positioning={{ placement: \"bottom-end\" }}>\n      <DropdownMenuTrigger asChild>\n        <Button\n          data-slot=\"app-shell-theme-toggle\"\n          variant=\"ghost\"\n          size=\"icon-lg\"\n          className={cn(\"scale-95 rounded-full\", className)}\n          {...props}\n        >\n          <SunIcon className=\"size-[1.2rem] scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90\" />\n          <MoonIcon className=\"absolute size-[1.2rem] scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0\" />\n          <span className=\"sr-only\">Toggle theme</span>\n        </Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent>\n        {([\"light\", \"dark\", \"system\"] as const).map((option) => (\n          <DropdownMenuItem key={option} value={option} onSelect={() => onThemeChange(option)}>\n            <span className=\"capitalize\">{option}</span>\n            <CheckIcon className={cn(\"ms-auto size-3.5\", theme !== option && \"invisible\")} />\n          </DropdownMenuItem>\n        ))}\n      </DropdownMenuContent>\n    </DropdownMenu>\n  )\n}\n\nexport {\n  AppShell,\n  AppShellBrand,\n  AppShellBrandChevron,\n  AppShellBrandDescription,\n  AppShellBrandLogo,\n  AppShellBrandText,\n  AppShellBrandTitle,\n  AppShellCommandDialog,\n  AppShellContent,\n  AppShellHeader,\n  AppShellHeaderActions,\n  AppShellMain,\n  AppShellNav,\n  AppShellNavBadge,\n  AppShellNavCollapsible,\n  AppShellNavItem,\n  AppShellNavLabel,\n  AppShellNavLink,\n  AppShellNavList,\n  AppShellNavMenuLink,\n  AppShellNavSubItem,\n  AppShellNavSubLink,\n  AppShellNotificationItem,\n  AppShellNotificationItemContent,\n  AppShellNotificationItemDescription,\n  AppShellNotificationItemIcon,\n  AppShellNotificationItemIndicator,\n  AppShellNotificationItemTime,\n  AppShellNotificationItemTitle,\n  AppShellNotifications,\n  AppShellNotificationsActionTrigger,\n  AppShellNotificationsContent,\n  AppShellNotificationsEmpty,\n  AppShellNotificationsFooter,\n  AppShellNotificationsHeader,\n  AppShellNotificationsList,\n  AppShellNotificationsTitle,\n  AppShellNotificationsTrigger,\n  AppShellSearch,\n  AppShellSidebar,\n  AppShellSkipLink,\n  AppShellThemeToggle,\n  AppShellTopNav,\n  AppShellTopNavLink,\n  AppShellTopNavMenu,\n  AppShellUser,\n  AppShellUserAvatar,\n  AppShellUserEmail,\n  AppShellUserName,\n  AppShellUserText,\n  SidebarContent as AppShellSidebarContent,\n  SidebarFooter as AppShellSidebarFooter,\n  SidebarHeader as AppShellSidebarHeader,\n  useAppShell,\n  type SidebarCollapsible,\n  type SidebarVariant,\n  type Theme,\n}\n"
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  BellIcon,\n  CheckIcon,\n  ChevronRightIcon,\n  ChevronsUpDownIcon,\n  MenuIcon,\n  MoonIcon,\n  SearchIcon,\n  SunIcon,\n} from \"lucide-react\"\nimport { cn } from \"@/lib/utils\"\n\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Collapsible, CollapsibleContent, CollapsibleTrigger } from \"@/components/ui/collapsible\"\nimport { CommandDialog } from \"@/components/ui/command\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { Kbd } from \"@/components/ui/kbd\"\nimport { Popover, PopoverContent, PopoverTrigger } from \"@/components/ui/popover\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n  useSidebar,\n} from \"@/components/ui/sidebar\"\n\n/* -------------------------------------------------------------------------- */\n/*  Root                                                                      */\n/* -------------------------------------------------------------------------- */\n\ntype SidebarVariant = \"sidebar\" | \"floating\" | \"inset\"\ntype SidebarCollapsible = \"offcanvas\" | \"icon\" | \"none\"\n\ntype AppShellContextValue = {\n  variant: SidebarVariant\n  setVariant: (variant: SidebarVariant) => void\n  /** Controlled sidebar collapse mode: `offcanvas`, `icon`, or `none`. */\n  collapsible: SidebarCollapsible\n  setCollapsible: (collapsible: SidebarCollapsible) => void\n  searchOpen: boolean\n  setSearchOpen: React.Dispatch<React.SetStateAction<boolean>>\n}\n\nconst AppShellContext = React.createContext<AppShellContextValue | null>(null)\n\nfunction useAppShell() {\n  const ctx = React.useContext(AppShellContext)\n  if (!ctx) throw new Error(\"useAppShell must be used within <AppShell>\")\n  return ctx\n}\n\n/**\n * Root of the shell. Owns the sidebar open state (via `SidebarProvider`), the\n * sidebar variant and collapse mode, and the global search open state with its\n * Cmd/Ctrl+K shortcut. Routing, theming, and data are the consumer's.\n */\nfunction AppShell({\n  variant: variantProp,\n  defaultVariant = \"inset\",\n  onVariantChange,\n  collapsible: collapsibleProp,\n  defaultCollapsible = \"icon\",\n  onCollapsibleChange,\n  searchShortcut = true,\n  children,\n  ...sidebarProviderProps\n}: Omit<React.ComponentProps<typeof SidebarProvider>, \"children\"> & {\n  variant?: SidebarVariant\n  /** Initial sidebar variant when uncontrolled. */\n  defaultVariant?: SidebarVariant\n  /** Called when the sidebar variant changes. */\n  onVariantChange?: (variant: SidebarVariant) => void\n  /** Controlled sidebar collapse mode: `offcanvas`, `icon`, or `none`. */\n  collapsible?: SidebarCollapsible\n  /** Initial collapse mode when uncontrolled. */\n  defaultCollapsible?: SidebarCollapsible\n  /** Called when the collapse mode changes. */\n  onCollapsibleChange?: (collapsible: SidebarCollapsible) => void\n  /** Toggle the search dialog with Cmd/Ctrl+K. */\n  searchShortcut?: boolean\n  children?: React.ReactNode\n}) {\n  const [variantState, setVariantState] = React.useState(defaultVariant)\n  const [collapsibleState, setCollapsibleState] = React.useState(defaultCollapsible)\n  const [searchOpen, setSearchOpen] = React.useState(false)\n  const variant = variantProp ?? variantState\n  const collapsible = collapsibleProp ?? collapsibleState\n\n  React.useEffect(() => {\n    if (!searchShortcut) return\n    const down = (event: KeyboardEvent) => {\n      if (event.key === \"k\" && (event.metaKey || event.ctrlKey)) {\n        event.preventDefault()\n        setSearchOpen((open) => !open)\n      }\n    }\n    document.addEventListener(\"keydown\", down)\n    return () => document.removeEventListener(\"keydown\", down)\n  }, [searchShortcut])\n\n  const ctx = React.useMemo<AppShellContextValue>(\n    () => ({\n      variant,\n      setVariant: (next) => {\n        if (variantProp === undefined) setVariantState(next)\n        onVariantChange?.(next)\n      },\n      collapsible,\n      setCollapsible: (next) => {\n        if (collapsibleProp === undefined) setCollapsibleState(next)\n        onCollapsibleChange?.(next)\n      },\n      searchOpen,\n      setSearchOpen,\n    }),\n    [variant, variantProp, onVariantChange, collapsible, collapsibleProp, onCollapsibleChange, searchOpen]\n  )\n\n  return (\n    <AppShellContext.Provider value={ctx}>\n      <SidebarProvider {...sidebarProviderProps}>{children}</SidebarProvider>\n    </AppShellContext.Provider>\n  )\n}\n\nfunction AppShellSkipLink({\n  className,\n  href = \"#content\",\n  children = \"Skip to main content\",\n  ...props\n}: React.ComponentProps<\"a\">) {\n  return (\n    <a\n      data-slot=\"app-shell-skip-link\"\n      href={href}\n      className={cn(\n        \"fixed inset-s-44 z-999 -translate-y-52 rounded-md bg-primary px-4 py-2 text-sm font-medium whitespace-nowrap text-primary-foreground opacity-95 shadow-sm transition focus:translate-y-3 focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </a>\n  )\n}\n\n/* -------------------------------------------------------------------------- */\n/*  Sidebar                                                                   */\n/* -------------------------------------------------------------------------- */\n\nfunction AppShellSidebar({ variant, collapsible, children, ...props }: React.ComponentProps<typeof Sidebar>) {\n  const shell = useAppShell()\n  return (\n    <Sidebar\n      data-slot=\"app-shell-sidebar\"\n      variant={variant ?? shell.variant}\n      collapsible={collapsible ?? shell.collapsible}\n      {...props}\n    >\n      {children}\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n\n/* Brand / team switcher trigger ------------------------------------------- */\n\nfunction AppShellBrand({ className, ...props }: React.ComponentProps<typeof SidebarMenuButton>) {\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <SidebarMenuButton\n          data-slot=\"app-shell-brand\"\n          size=\"lg\"\n          className={cn(\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\", className)}\n          {...props}\n        />\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n\nfunction AppShellBrandLogo({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"app-shell-brand-logo\"\n      className={cn(\n        \"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground [&_svg]:size-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AppShellBrandText({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"app-shell-brand-text\"\n      className={cn(\"grid flex-1 text-start text-sm/tight\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AppShellBrandTitle({ className, ...props }: React.ComponentProps<\"span\">) {\n  return <span data-slot=\"app-shell-brand-title\" className={cn(\"truncate font-semibold\", className)} {...props} />\n}\n\nfunction AppShellBrandDescription({ className, ...props }: React.ComponentProps<\"span\">) {\n  return <span data-slot=\"app-shell-brand-description\" className={cn(\"truncate text-xs\", className)} {...props} />\n}\n\nfunction AppShellBrandChevron({ className, ...props }: React.ComponentProps<typeof ChevronsUpDownIcon>) {\n  return <ChevronsUpDownIcon data-slot=\"app-shell-brand-chevron\" className={cn(\"ms-auto\", className)} {...props} />\n}\n\n/* Navigation --------------------------------------------------------------- */\n\nfunction AppShellNav({ ...props }: React.ComponentProps<typeof SidebarGroup>) {\n  return <SidebarGroup data-slot=\"app-shell-nav\" {...props} />\n}\n\nfunction AppShellNavLabel({ ...props }: React.ComponentProps<typeof SidebarGroupLabel>) {\n  return <SidebarGroupLabel data-slot=\"app-shell-nav-label\" {...props} />\n}\n\nfunction AppShellNavList({ ...props }: React.ComponentProps<typeof SidebarMenu>) {\n  return <SidebarMenu data-slot=\"app-shell-nav-list\" {...props} />\n}\n\nfunction AppShellNavItem({ ...props }: React.ComponentProps<typeof SidebarMenuItem>) {\n  return <SidebarMenuItem data-slot=\"app-shell-nav-item\" {...props} />\n}\n\n/**\n * A top-level navigation link. Pass the link element as the child with\n * `asChild` (default) so any router's link works. `active` marks the current\n * route; `tooltip` shows when the sidebar is collapsed to icons.\n */\nfunction AppShellNavLink({\n  active = false,\n  asChild = true,\n  onClick,\n  ...props\n}: Omit<React.ComponentProps<typeof SidebarMenuButton>, \"isActive\"> & {\n  active?: boolean\n}) {\n  const { setOpenMobile } = useSidebar()\n  return (\n    <SidebarMenuButton\n      data-slot=\"app-shell-nav-link\"\n      asChild={asChild}\n      isActive={active}\n      onClick={(event) => {\n        onClick?.(event)\n        setOpenMobile(false)\n      }}\n      {...props}\n    />\n  )\n}\n\nfunction AppShellNavBadge({ className, ...props }: React.ComponentProps<typeof Badge>) {\n  return (\n    <Badge\n      data-slot=\"app-shell-nav-badge\"\n      className={cn(\"ms-auto rounded-full px-1 py-0 text-xs\", className)}\n      {...props}\n    />\n  )\n}\n\n/**\n * A navigation item with children. Expanded sidebar: a collapsible sub-list.\n * Icon-collapsed sidebar on desktop: a flyout menu. Supply `trigger` for the\n * button content and `menu` for the flyout items; `children` is the sub-list.\n */\nfunction AppShellNavCollapsible({\n  active = false,\n  defaultOpen,\n  tooltip,\n  trigger,\n  menu,\n  children,\n  ...props\n}: React.ComponentProps<typeof SidebarMenuItem> & {\n  active?: boolean\n  defaultOpen?: boolean\n  tooltip?: string\n  /** Element rendered as the trigger for the collapsible group. */\n  trigger: React.ReactNode\n  /** Rendered inside the flyout when the sidebar is collapsed to icons. */\n  menu?: React.ReactNode\n}) {\n  const { state, isMobile } = useSidebar()\n\n  if (state === \"collapsed\" && !isMobile) {\n    return (\n      <SidebarMenuItem data-slot=\"app-shell-nav-collapsible\" {...props}>\n        <DropdownMenu positioning={{ placement: \"right-start\", gutter: 4 }}>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton tooltip={tooltip} isActive={active}>\n              {trigger}\n              <ChevronRightIcon className=\"ms-auto\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent data-slot=\"app-shell-nav-flyout\">\n            <DropdownMenuGroup>\n              {tooltip && (\n                <>\n                  <DropdownMenuLabel>{tooltip}</DropdownMenuLabel>\n                  <DropdownMenuSeparator />\n                </>\n              )}\n              {menu}\n            </DropdownMenuGroup>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    )\n  }\n\n  return (\n    <Collapsible\n      defaultOpen={defaultOpen ?? active}\n      className=\"group/collapsible\"\n      unmountOnExit={false}\n      lazyMount={false}\n    >\n      <SidebarMenuItem data-slot=\"app-shell-nav-collapsible\" {...props}>\n        <CollapsibleTrigger asChild>\n          <SidebarMenuButton tooltip={tooltip} isActive={active}>\n            {trigger}\n            <ChevronRightIcon className=\"ms-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90 rtl:rotate-180\" />\n          </SidebarMenuButton>\n        </CollapsibleTrigger>\n        <CollapsibleContent>\n          <SidebarMenuSub data-slot=\"app-shell-nav-sublist\">{children}</SidebarMenuSub>\n        </CollapsibleContent>\n      </SidebarMenuItem>\n    </Collapsible>\n  )\n}\n\nfunction AppShellNavSubItem({ ...props }: React.ComponentProps<typeof SidebarMenuSubItem>) {\n  return <SidebarMenuSubItem data-slot=\"app-shell-nav-subitem\" {...props} />\n}\n\nfunction AppShellNavSubLink({\n  active = false,\n  asChild = true,\n  onClick,\n  ...props\n}: Omit<React.ComponentProps<typeof SidebarMenuSubButton>, \"isActive\"> & { active?: boolean }) {\n  const { setOpenMobile } = useSidebar()\n  return (\n    <SidebarMenuSubButton\n      data-slot=\"app-shell-nav-sublink\"\n      asChild={asChild}\n      isActive={active}\n      onClick={(event) => {\n        onClick?.(event)\n        setOpenMobile(false)\n      }}\n      {...props}\n    />\n  )\n}\n\n/** A flyout menu entry for the icon-collapsed state. */\nfunction AppShellNavMenuLink({\n  active = false,\n  className,\n  asChild = true,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuItem> & { active?: boolean }) {\n  return (\n    <DropdownMenuItem\n      data-slot=\"app-shell-nav-menu-link\"\n      asChild={asChild}\n      className={cn(active && \"bg-secondary\", className)}\n      {...props}\n    />\n  )\n}\n\n/* User footer trigger ------------------------------------------------------ */\n\nfunction AppShellUser({ className, ...props }: React.ComponentProps<typeof SidebarMenuButton>) {\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <SidebarMenuButton\n          data-slot=\"app-shell-user\"\n          size=\"lg\"\n          className={cn(\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\", className)}\n          {...props}\n        />\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n\nfunction AppShellUserAvatar({\n  src,\n  alt,\n  fallback,\n  className,\n  ...props\n}: React.ComponentProps<typeof Avatar> & { src?: string; alt?: string; fallback: React.ReactNode }) {\n  return (\n    <Avatar data-slot=\"app-shell-user-avatar\" className={cn(\"rounded-lg\", className)} {...props}>\n      {src && <AvatarImage src={src} alt={alt} />}\n      <AvatarFallback className=\"rounded-lg\">{fallback}</AvatarFallback>\n    </Avatar>\n  )\n}\n\nfunction AppShellUserText({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div data-slot=\"app-shell-user-text\" className={cn(\"grid flex-1 text-start text-sm/tight\", className)} {...props} />\n  )\n}\n\nfunction AppShellUserName({ className, ...props }: React.ComponentProps<\"span\">) {\n  return <span data-slot=\"app-shell-user-name\" className={cn(\"truncate font-semibold\", className)} {...props} />\n}\n\nfunction AppShellUserEmail({ className, ...props }: React.ComponentProps<\"span\">) {\n  return <span data-slot=\"app-shell-user-email\" className={cn(\"truncate text-xs\", className)} {...props} />\n}\n\n/* -------------------------------------------------------------------------- */\n/*  Content area: header, main                                                */\n/* -------------------------------------------------------------------------- */\n\nfunction AppShellContent({ className, ...props }: React.ComponentProps<typeof SidebarInset>) {\n  return (\n    <SidebarInset\n      data-slot=\"app-shell-content\"\n      id=\"content\"\n      className={cn(\n        \"@container/content\",\n        \"has-data-[layout=fixed]:h-svh\",\n        \"peer-data-[variant=inset]:has-data-[layout=fixed]:h-[calc(100svh-(var(--spacing)*4))]\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AppShellHeader({\n  className,\n  fixed = false,\n  children,\n  ...props\n}: React.ComponentProps<\"header\"> & { fixed?: boolean }) {\n  const [scrolled, setScrolled] = React.useState(false)\n  React.useEffect(() => {\n    if (!fixed) return\n    const onScroll = () => setScrolled((document.body.scrollTop || document.documentElement.scrollTop) > 10)\n    onScroll()\n    document.addEventListener(\"scroll\", onScroll, { passive: true })\n    return () => document.removeEventListener(\"scroll\", onScroll)\n  }, [fixed])\n  return (\n    <header\n      data-slot=\"app-shell-header\"\n      data-fixed={fixed ? \"\" : undefined}\n      data-scrolled={scrolled ? \"\" : undefined}\n      className={cn(\n        // Solid background; the top corners follow the inset card's radius so the\n        // header never squares off the rounded content area.\n        \"z-50 h-16 rounded-t-[inherit] bg-background\",\n        fixed && \"peer/header sticky top-0 w-[inherit]\",\n        fixed && scrolled ? \"shadow-sm\" : \"shadow-none\",\n        className\n      )}\n      {...props}\n    >\n      <div\n        className={cn(\n          \"relative flex h-full items-center gap-3 p-4 sm:gap-4\",\n          fixed &&\n            scrolled &&\n            \"after:absolute after:inset-0 after:-z-10 after:rounded-[inherit] after:bg-background/60 after:backdrop-blur-lg\"\n        )}\n      >\n        <SidebarTrigger variant=\"outline\" className=\"max-md:scale-125\" />\n        <Separator orientation=\"vertical\" className=\"h-6\" />\n        {children}\n      </div>\n    </header>\n  )\n}\n\nfunction AppShellHeaderActions({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"app-shell-header-actions\"\n      className={cn(\"ms-auto flex items-center gap-3 sm:gap-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AppShellMain({\n  className,\n  fixed = false,\n  fluid = false,\n  ...props\n}: React.ComponentProps<\"main\"> & { fixed?: boolean; fluid?: boolean }) {\n  return (\n    <main\n      data-slot=\"app-shell-main\"\n      data-layout={fixed ? \"fixed\" : \"auto\"}\n      className={cn(\n        \"px-4 py-6\",\n        fixed && \"flex grow flex-col overflow-hidden\",\n        !fluid && \"@7xl/content:mx-auto @7xl/content:w-full @7xl/content:max-w-7xl\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\n/* Top nav (secondary, in the header) --------------------------------------- */\n\nfunction AppShellTopNav({ className, ...props }: React.ComponentProps<\"nav\">) {\n  return (\n    <nav\n      data-slot=\"app-shell-top-nav\"\n      className={cn(\"hidden items-center gap-4 lg:flex xl:gap-6\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AppShellTopNavLink({ active = false, className, ...props }: React.ComponentProps<\"a\"> & { active?: boolean }) {\n  return (\n    <a\n      data-slot=\"app-shell-top-nav-link\"\n      data-active={active ? \"\" : undefined}\n      className={cn(\n        \"text-sm font-medium text-muted-foreground transition-colors hover:text-primary data-active:text-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\n/** The small-screen counterpart of `AppShellTopNav`: the same links in a menu. */\nfunction AppShellTopNavMenu({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof DropdownMenu> & { className?: string }) {\n  return (\n    <DropdownMenu positioning={{ placement: \"bottom-start\" }} {...props}>\n      <DropdownMenuTrigger asChild>\n        <Button\n          data-slot=\"app-shell-top-nav-menu-trigger\"\n          size=\"icon\"\n          variant=\"outline\"\n          className={cn(\"md:size-7 lg:hidden\", className)}\n        >\n          <MenuIcon />\n          <span className=\"sr-only\">Toggle navigation menu</span>\n        </Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent>{children}</DropdownMenuContent>\n    </DropdownMenu>\n  )\n}\n\n/* -------------------------------------------------------------------------- */\n/*  Search and command menu                                                   */\n/* -------------------------------------------------------------------------- */\n\nfunction AppShellSearch({\n  className,\n  placeholder = \"Search\",\n  onClick,\n  asChild,\n  children,\n  ...props\n}: React.ComponentProps<typeof Button> & { placeholder?: string }) {\n  const shell = useAppShell()\n  return (\n    <Button\n      data-slot=\"app-shell-search\"\n      variant=\"outline\"\n      asChild={asChild}\n      className={cn(\n        \"group relative h-8 w-full flex-1 justify-start rounded-md bg-muted/25 text-sm font-normal text-muted-foreground shadow-none hover:bg-accent sm:w-40 sm:pe-12 md:flex-none lg:w-52 xl:w-64\",\n        className\n      )}\n      aria-keyshortcuts=\"Meta+K Control+K\"\n      onClick={(event) => {\n        onClick?.(event)\n        if (!event.defaultPrevented) shell.setSearchOpen(true)\n      }}\n      {...props}\n    >\n      {asChild\n        ? children\n        : (children ?? (\n            <>\n              <SearchIcon aria-hidden className=\"absolute inset-s-1.5 top-1/2 size-4 -translate-y-1/2\" />\n              <span className=\"ms-4\">{placeholder}</span>\n              <Kbd className=\"pointer-events-none absolute inset-e-1.5 top-1.5 hidden sm:flex\">⌘K</Kbd>\n            </>\n          ))}\n    </Button>\n  )\n}\n\n/** A `CommandDialog` bound to the shell's search state. */\nfunction AppShellCommandDialog({\n  ...props\n}: Omit<React.ComponentProps<typeof CommandDialog>, \"open\" | \"onOpenChange\">) {\n  const shell = useAppShell()\n  return <CommandDialog open={shell.searchOpen} onOpenChange={({ open }) => shell.setSearchOpen(open)} {...props} />\n}\n\n/* -------------------------------------------------------------------------- */\n/*  Notifications                                                             */\n/* -------------------------------------------------------------------------- */\n\n/**\n * A header notifications popover. Data-agnostic: the consumer renders the\n * items and owns read state; pass `count` to the trigger for the unread badge.\n */\nfunction AppShellNotifications({ positioning, ...props }: React.ComponentProps<typeof Popover>) {\n  return (\n    <Popover\n      data-slot=\"app-shell-notifications\"\n      positioning={{ placement: \"bottom-end\", gutter: 8, ...positioning }}\n      {...props}\n    />\n  )\n}\n\nfunction AppShellNotificationsTrigger({\n  count = 0,\n  max = 99,\n  className,\n  children,\n  asChild,\n  ...props\n}: React.ComponentProps<typeof Button> & {\n  /** Unread count shown as a badge; hidden when 0. */\n  count?: number\n  /** Cap for the badge count; larger counts render as `max+`. */\n  max?: number\n}) {\n  const label = count > max ? `${max}+` : String(count)\n  return (\n    <PopoverTrigger asChild>\n      <Button\n        data-slot=\"app-shell-notifications-trigger\"\n        data-unread={count > 0 ? \"\" : undefined}\n        variant=\"ghost\"\n        size=\"icon-lg\"\n        asChild={asChild}\n        className={cn(\"relative scale-95 rounded-full\", className)}\n        aria-label={count > 0 ? `Notifications, ${label} unread` : \"Notifications\"}\n        {...props}\n      >\n        {asChild ? children : (children ?? <BellIcon className=\"size-[1.2rem]\" />)}\n        {!asChild && count > 0 && (\n          <span\n            data-slot=\"app-shell-notifications-badge\"\n            aria-hidden\n            className=\"absolute inset-e-0.5 top-0.5 flex h-4 min-w-4 items-center justify-center rounded-full bg-destructive px-1 text-[10px] leading-none font-medium text-white ring-2 ring-background\"\n          >\n            {label}\n          </span>\n        )}\n      </Button>\n    </PopoverTrigger>\n  )\n}\n\nfunction AppShellNotificationsContent({ className, ...props }: React.ComponentProps<typeof PopoverContent>) {\n  return (\n    <PopoverContent\n      data-slot=\"app-shell-notifications-content\"\n      className={cn(\"w-80 gap-0 p-0 sm:w-96\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AppShellNotificationsHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"app-shell-notifications-header\"\n      className={cn(\"flex items-center justify-between gap-2 border-b px-3.5 py-2.5\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AppShellNotificationsTitle({ className, ...props }: React.ComponentProps<\"h3\">) {\n  return <h3 data-slot=\"app-shell-notifications-title\" className={cn(\"text-sm font-semibold\", className)} {...props} />\n}\n\n/** A small text action for the header or footer, e.g. \"Mark all as read\". */\nfunction AppShellNotificationsActionTrigger({\n  className,\n  variant = \"link\",\n  size = \"sm\",\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  return (\n    <Button\n      data-slot=\"app-shell-notifications-action-trigger\"\n      variant={variant}\n      size={size}\n      className={cn(\"h-auto p-0 text-xs text-muted-foreground hover:text-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AppShellNotificationsList({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"app-shell-notifications-list\"\n      className={cn(\"no-scrollbar flex max-h-96 flex-col gap-0.5 overflow-y-auto p-1\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AppShellNotificationItem({\n  unread,\n  asChild,\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"li\"> & {\n  /** Mark the notification unread; sets `data-unread` and shows the indicator. */\n  unread?: boolean\n  /** Render the item's child (e.g. an anchor or button) as the interactive surface. */\n  asChild?: boolean\n}) {\n  const itemClassName = cn(\n    \"group/notification relative flex w-full cursor-default gap-3 rounded-md px-2.5 py-2 text-start text-sm outline-hidden transition-colors select-none hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground data-unread:bg-primary/5 dark:data-unread:bg-primary/10\",\n    className\n  )\n  const inner =\n    asChild && React.isValidElement(children)\n      ? React.cloneElement(children as React.ReactElement<Record<string, unknown>>, {\n          \"data-slot\": \"app-shell-notification-item-surface\",\n          \"data-unread\": unread ? \"\" : undefined,\n          className: cn(itemClassName, (children as React.ReactElement<{ className?: string }>).props.className),\n        })\n      : children\n  return (\n    <li\n      data-slot=\"app-shell-notification-item\"\n      data-unread={unread ? \"\" : undefined}\n      className={asChild ? \"flex\" : itemClassName}\n      {...props}\n    >\n      {inner}\n    </li>\n  )\n}\n\nfunction AppShellNotificationItemIcon({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"app-shell-notification-item-icon\"\n      className={cn(\n        \"flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-muted-foreground [&_svg]:size-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AppShellNotificationItemContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"app-shell-notification-item-content\"\n      className={cn(\"flex min-w-0 flex-1 flex-col gap-0.5\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AppShellNotificationItemTitle({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"app-shell-notification-item-title\"\n      className={cn(\"truncate leading-tight font-medium group-data-unread/notification:text-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AppShellNotificationItemDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"app-shell-notification-item-description\"\n      className={cn(\"line-clamp-2 text-xs text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AppShellNotificationItemTime({ className, ...props }: React.ComponentProps<\"time\">) {\n  return (\n    <time\n      data-slot=\"app-shell-notification-item-time\"\n      className={cn(\"text-[11px] text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\n/** The unread dot; renders only inside an unread item. */\nfunction AppShellNotificationItemIndicator({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"app-shell-notification-item-indicator\"\n      aria-hidden\n      className={cn(\n        \"mt-1.5 hidden size-2 shrink-0 rounded-full bg-primary group-data-unread/notification:block\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AppShellNotificationsEmpty({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"app-shell-notifications-empty\"\n      className={cn(\n        \"flex flex-col items-center justify-center gap-1 px-4 py-10 text-center text-sm text-muted-foreground [&_svg]:mb-1 [&_svg]:size-6\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AppShellNotificationsFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"app-shell-notifications-footer\"\n      className={cn(\"flex items-center justify-center border-t px-3.5 py-2\", className)}\n      {...props}\n    />\n  )\n}\n\n/* -------------------------------------------------------------------------- */\n/*  Theme toggle                                                              */\n/* -------------------------------------------------------------------------- */\n\ntype Theme = \"light\" | \"dark\" | \"system\"\n\nfunction AppShellThemeToggle({\n  theme,\n  onThemeChange,\n  className,\n  ...props\n}: Omit<React.ComponentProps<typeof Button>, \"onChange\"> & {\n  /** Current theme: `light`, `dark`, or `system`. */\n  theme: Theme\n  /** Called with the next theme when the toggle is used. */\n  onThemeChange: (theme: Theme) => void\n}) {\n  return (\n    <DropdownMenu positioning={{ placement: \"bottom-end\" }}>\n      <DropdownMenuTrigger asChild>\n        <Button\n          data-slot=\"app-shell-theme-toggle\"\n          variant=\"ghost\"\n          size=\"icon-lg\"\n          className={cn(\"scale-95 rounded-full\", className)}\n          {...props}\n        >\n          <SunIcon className=\"size-[1.2rem] scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90\" />\n          <MoonIcon className=\"absolute size-[1.2rem] scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0\" />\n          <span className=\"sr-only\">Toggle theme</span>\n        </Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent>\n        {([\"light\", \"dark\", \"system\"] as const).map((option) => (\n          <DropdownMenuItem key={option} value={option} onSelect={() => onThemeChange(option)}>\n            <span className=\"capitalize\">{option}</span>\n            <CheckIcon className={cn(\"ms-auto size-3.5\", theme !== option && \"invisible\")} />\n          </DropdownMenuItem>\n        ))}\n      </DropdownMenuContent>\n    </DropdownMenu>\n  )\n}\n\nexport {\n  AppShell,\n  AppShellBrand,\n  AppShellBrandChevron,\n  AppShellBrandDescription,\n  AppShellBrandLogo,\n  AppShellBrandText,\n  AppShellBrandTitle,\n  AppShellCommandDialog,\n  AppShellContent,\n  AppShellHeader,\n  AppShellHeaderActions,\n  AppShellMain,\n  AppShellNav,\n  AppShellNavBadge,\n  AppShellNavCollapsible,\n  AppShellNavItem,\n  AppShellNavLabel,\n  AppShellNavLink,\n  AppShellNavList,\n  AppShellNavMenuLink,\n  AppShellNavSubItem,\n  AppShellNavSubLink,\n  AppShellNotificationItem,\n  AppShellNotificationItemContent,\n  AppShellNotificationItemDescription,\n  AppShellNotificationItemIcon,\n  AppShellNotificationItemIndicator,\n  AppShellNotificationItemTime,\n  AppShellNotificationItemTitle,\n  AppShellNotifications,\n  AppShellNotificationsActionTrigger,\n  AppShellNotificationsContent,\n  AppShellNotificationsEmpty,\n  AppShellNotificationsFooter,\n  AppShellNotificationsHeader,\n  AppShellNotificationsList,\n  AppShellNotificationsTitle,\n  AppShellNotificationsTrigger,\n  AppShellSearch,\n  AppShellSidebar,\n  AppShellSkipLink,\n  AppShellThemeToggle,\n  AppShellTopNav,\n  AppShellTopNavLink,\n  AppShellTopNavMenu,\n  AppShellUser,\n  AppShellUserAvatar,\n  AppShellUserEmail,\n  AppShellUserName,\n  AppShellUserText,\n  SidebarContent as AppShellSidebarContent,\n  SidebarFooter as AppShellSidebarFooter,\n  SidebarHeader as AppShellSidebarHeader,\n  useAppShell,\n  type SidebarCollapsible,\n  type SidebarVariant,\n  type Theme,\n}\n"
     }
   ],
   "docs": "## App shell\n`src/components/ui/app-shell.tsx` is a compositional, router-agnostic shell built on\n`sidebar.tsx` (shadcn-admin layout): `AppShell` (context: sidebar variant/collapsible,\nsearch open state, `searchShortcut` for cmd/ctrl+K), `AppShellSidebar` + `AppShellBrand*`,\n`AppShellNav*` (groups, links with `active`, badges, `AppShellNavCollapsible` that becomes\na dropdown flyout when the sidebar is icon-collapsed), `AppShellUser*`, `AppShellContent`,\n`AppShellHeader` (fixed/sticky with scroll shadow, includes the sidebar trigger),\n`AppShellHeaderActions`, `AppShellMain` (`fixed` = viewport-height, `fluid` = full width),\n`AppShellTopNav*`, `AppShellSearch` + `AppShellCommandDialog` (bound to shell search\nstate; nest a `Command` inside), `AppShellNotifications*` (Popover-based bell with a `count`\nbadge on the trigger; header/title/action, list, `AppShellNotificationItem` with `unread` +\n`asChild` surface, icon/content/title/description/time/indicator, empty, footer; data and read\nstate are the consumer's), and `AppShellThemeToggle` (`theme`/`onThemeChange`, no theme\nlibrary assumed). Header icon buttons use `size=\"icon-lg\"` (size-9, `scale-95 rounded-full`)\nand `AppShellHeaderActions` uses the header's `gap-3 sm:gap-4` to match shadcn-admin. Navigation is plain anchors with `asChild` so any router works.\n`src/demo/shell/` is the reference (nav data, hash router, team/user menus, command menu)\nand `src/app.tsx` wraps every demo route in it. `AppShellDemo` takes `headerStart` for\npage-specific header content (the dashboard passes its `AppShellTopNav` + `AppShellTopNavMenu`)."