@assure-one/design-system 0.3.0 → 0.4.0

package/dist/index.js

@@ -1,5 +1,5 @@
 "use client";
-import * as React13 from 'react';
+import * as React36 from 'react';
 import { forwardRef, useState, useCallback, useId, useRef, useImperativeHandle, useEffect, createContext, useContext, useMemo } from 'react';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
 import { clsx } from 'clsx';
@@ -272,6 +272,7 @@ var systemTokens = {
   },
   layout: {
     shellSidebarWidth: "var(--shell-sidebar-w)",
+    shellSidebarRailWidth: "var(--shell-sidebar-w-rail)",
     shellHeaderHeight: "var(--shell-header-h)",
     contentPad: "var(--content-pad)"
   },
@@ -451,7 +452,7 @@ function MenuIcon({ size = 24, ...props }) {
     {
       d: "M3 12h18M3 6h18M3 18h18",
       stroke: "currentColor",
-      strokeWidth: "2",
+      strokeWidth: "1.5",
       strokeLinecap: "round"
     }
   ) });
@@ -2107,7 +2108,19 @@ function MicrosoftBrandIcon({ size = 24, ...props }) {
     /* @__PURE__ */ jsx("rect", { x: "13", y: "13", width: "10", height: "10", fill: "#FFB900" })
   ] });
 }
-var Accordion = React13.forwardRef(function Accordion2({ className, ...props }, ref) {
+function FilterIcon({ size = 24, ...props }) {
+  return /* @__PURE__ */ jsx(Icon, { size, ...props, children: /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M3 4h18l-7 8v6l-4 2v-8L3 4z",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) });
+}
+var Accordion = React36.forwardRef(function Accordion2({ className, ...props }, ref) {
   return /* @__PURE__ */ jsx(
     AccordionPrimitive.Root,
     {
@@ -2118,11 +2131,11 @@ var Accordion = React13.forwardRef(function Accordion2({ className, ...props },
   );
 });
 Accordion.displayName = AccordionPrimitive.Root.displayName;
-var AccordionItem = React13.forwardRef(function AccordionItem2({ className, ...props }, ref) {
+var AccordionItem = React36.forwardRef(function AccordionItem2({ className, ...props }, ref) {
   return /* @__PURE__ */ jsx(AccordionPrimitive.Item, { ref, className: cn(className), ...props });
 });
 AccordionItem.displayName = AccordionPrimitive.Item.displayName;
-var AccordionTrigger = React13.forwardRef(function AccordionTrigger2({ children, className, ...props }, ref) {
+var AccordionTrigger = React36.forwardRef(function AccordionTrigger2({ children, className, ...props }, ref) {
   return /* @__PURE__ */ jsx(AccordionPrimitive.Header, { className: "flex", children: /* @__PURE__ */ jsxs(
     AccordionPrimitive.Trigger,
     {
@@ -2150,7 +2163,7 @@ var AccordionTrigger = React13.forwardRef(function AccordionTrigger2({ children,
   ) });
 });
 AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
-var AccordionContent = React13.forwardRef(function AccordionContent2({ children, className, ...props }, ref) {
+var AccordionContent = React36.forwardRef(function AccordionContent2({ children, className, ...props }, ref) {
   return /* @__PURE__ */ jsx(
     AccordionPrimitive.Content,
     {
@@ -2170,7 +2183,7 @@ AccordionContent.displayName = AccordionPrimitive.Content.displayName;
 var AlertDialog = AlertDialogPrimitive.Root;
 var AlertDialogTrigger = AlertDialogPrimitive.Trigger;
 var AlertDialogPortal = AlertDialogPrimitive.Portal;
-var AlertDialogOverlay = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var AlertDialogOverlay = React36.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   AlertDialogPrimitive.Overlay,
   {
     ref,
@@ -2185,7 +2198,7 @@ var AlertDialogOverlay = React13.forwardRef(({ className, ...props }, ref) => /*
   }
 ));
 AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
-var AlertDialogContent = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs(AlertDialogPortal, { children: [
+var AlertDialogContent = React36.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs(AlertDialogPortal, { children: [
   /* @__PURE__ */ jsx(AlertDialogOverlay, {}),
   /* @__PURE__ */ jsx(
     AlertDialogPrimitive.Content,
@@ -2220,7 +2233,7 @@ var AlertDialogFooter = ({ className, ...props }) => /* @__PURE__ */ jsx(
   }
 );
 AlertDialogFooter.displayName = "AlertDialogFooter";
-var AlertDialogTitle = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var AlertDialogTitle = React36.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   AlertDialogPrimitive.Title,
   {
     ref,
@@ -2232,7 +2245,7 @@ var AlertDialogTitle = React13.forwardRef(({ className, ...props }, ref) => /* @
   }
 ));
 AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
-var AlertDialogDescription = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var AlertDialogDescription = React36.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   AlertDialogPrimitive.Description,
   {
     ref,
@@ -2241,7 +2254,7 @@ var AlertDialogDescription = React13.forwardRef(({ className, ...props }, ref) =
   }
 ));
 AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;
-var AlertDialogAction = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var AlertDialogAction = React36.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   AlertDialogPrimitive.Action,
   {
     ref,
@@ -2257,7 +2270,7 @@ var AlertDialogAction = React13.forwardRef(({ className, ...props }, ref) => /*
   }
 ));
 AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
-var AlertDialogCancel = React13.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
+var AlertDialogCancel = React36.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
   AlertDialogPrimitive.Cancel,
   {
     ref,
@@ -2355,7 +2368,7 @@ var AlertDescription = forwardRef(function AlertDescription2({ className, ...pro
   return /* @__PURE__ */ jsx("p", { ref, className: cn("text-sm opacity-90", className), ...props });
 });
 AlertDescription.displayName = "AlertDescription";
-var AspectRatio = React13.forwardRef(function AspectRatio2({ className, ratio = 16 / 9, ...props }, ref) {
+var AspectRatio = React36.forwardRef(function AspectRatio2({ className, ratio = 16 / 9, ...props }, ref) {
   return /* @__PURE__ */ jsx(
     AspectRatioPrimitive.Root,
     {
@@ -2408,7 +2421,7 @@ var statusDotSizes = {
 function getInitials(name) {
   return name.split(" ").map((part) => part[0]).filter(Boolean).slice(0, 2).join("").toUpperCase();
 }
-var Avatar = React13.forwardRef(
+var Avatar = React36.forwardRef(
   function Avatar2({ src, alt, name, size = "md", variant = "initials", status, className, ...props }, ref) {
     const initials = name ? getInitials(name) : "?";
     const resolvedSize = size ?? "md";
@@ -2697,7 +2710,7 @@ function Calendar({
   classNames,
   ...props
 }) {
-  const { modifiers, modifiersClassNames } = React13.useMemo(() => {
+  const { modifiers, modifiersClassNames } = React36.useMemo(() => {
     const buckets = {};
     for (const h of highlights) {
       const key = h.color ?? "primary";
@@ -2712,7 +2725,7 @@ function Calendar({
     }
     return { modifiers: mods, modifiersClassNames: modClasses };
   }, [highlights]);
-  const disabledMatcher = React13.useMemo(() => {
+  const disabledMatcher = React36.useMemo(() => {
     if (!minDate && !maxDate) return void 0;
     if (minDate && maxDate) return [{ before: minDate }, { after: maxDate }];
     if (minDate) return { before: minDate };
@@ -2844,8 +2857,8 @@ var CardAction = forwardRef(
   }
 );
 CardAction.displayName = "CardAction";
-var Checkbox = React13.forwardRef(function Checkbox2({ label, indeterminate, checked, defaultChecked, className, id: providedId, ...props }, ref) {
-  const generatedId = React13.useId();
+var Checkbox = React36.forwardRef(function Checkbox2({ label, indeterminate, checked, defaultChecked, className, id: providedId, ...props }, ref) {
+  const generatedId = React36.useId();
   const id = providedId ?? generatedId;
   const resolvedChecked = indeterminate ? "indeterminate" : checked;
   return /* @__PURE__ */ jsxs("div", { className: "inline-flex items-center gap-2", children: [
@@ -2885,7 +2898,7 @@ Checkbox.displayName = CheckboxPrimitive.Root.displayName;
 var SelectRoot = SelectPrimitive.Root;
 var SelectGroup = SelectPrimitive.Group;
 var SelectValue = SelectPrimitive.Value;
-var SelectTrigger = React13.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+var SelectTrigger = React36.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   SelectPrimitive.Trigger,
   {
     ref,
@@ -2916,7 +2929,7 @@ var SelectTrigger = React13.forwardRef(({ className, children, ...props }, ref)
   }
 ));
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
-var SelectScrollUpButton = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SelectScrollUpButton = React36.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SelectPrimitive.ScrollUpButton,
   {
     ref,
@@ -2926,7 +2939,7 @@ var SelectScrollUpButton = React13.forwardRef(({ className, ...props }, ref) =>
   }
 ));
 SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
-var SelectScrollDownButton = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SelectScrollDownButton = React36.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SelectPrimitive.ScrollDownButton,
   {
     ref,
@@ -2936,7 +2949,7 @@ var SelectScrollDownButton = React13.forwardRef(({ className, ...props }, ref) =
   }
 ));
 SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
-var SelectContent = React13.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
+var SelectContent = React36.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
   SelectPrimitive.Content,
   {
     ref,
@@ -2970,7 +2983,7 @@ var SelectContent = React13.forwardRef(({ className, children, position = "poppe
   }
 ) }));
 SelectContent.displayName = SelectPrimitive.Content.displayName;
-var SelectLabel = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SelectLabel = React36.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SelectPrimitive.Label,
   {
     ref,
@@ -2982,7 +2995,7 @@ var SelectLabel = React13.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 SelectLabel.displayName = SelectPrimitive.Label.displayName;
-var SelectItem = React13.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+var SelectItem = React36.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   SelectPrimitive.Item,
   {
     ref,
@@ -3003,7 +3016,7 @@ var SelectItem = React13.forwardRef(({ className, children, ...props }, ref) =>
   }
 ));
 SelectItem.displayName = SelectPrimitive.Item.displayName;
-var SelectSeparator = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SelectSeparator = React36.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SelectPrimitive.Separator,
   {
     ref,
@@ -3087,11 +3100,11 @@ function ClientSelect({
   ] });
 }
 ClientSelect.displayName = "ClientSelect";
-var Collapsible = React13.forwardRef(function Collapsible2({ className, ...props }, ref) {
+var Collapsible = React36.forwardRef(function Collapsible2({ className, ...props }, ref) {
   return /* @__PURE__ */ jsx(CollapsiblePrimitive.Root, { ref, className: cn(className), ...props });
 });
 Collapsible.displayName = CollapsiblePrimitive.Root.displayName;
-var CollapsibleTrigger = React13.forwardRef(function CollapsibleTrigger2({ className, ...props }, ref) {
+var CollapsibleTrigger = React36.forwardRef(function CollapsibleTrigger2({ className, ...props }, ref) {
   return /* @__PURE__ */ jsx(
     CollapsiblePrimitive.Trigger,
     {
@@ -3106,7 +3119,7 @@ var CollapsibleTrigger = React13.forwardRef(function CollapsibleTrigger2({ class
   );
 });
 CollapsibleTrigger.displayName = CollapsiblePrimitive.Trigger.displayName;
-var CollapsibleContent = React13.forwardRef(function CollapsibleContent2({ className, ...props }, ref) {
+var CollapsibleContent = React36.forwardRef(function CollapsibleContent2({ className, ...props }, ref) {
   return /* @__PURE__ */ jsx(
     CollapsiblePrimitive.Content,
     {
@@ -3183,7 +3196,7 @@ ComingSoon.displayName = "ComingSoon";
 var Dialog = DialogPrimitive.Root;
 var DialogTrigger = DialogPrimitive.Trigger;
 var DialogPortal = DialogPrimitive.Portal;
-var DialogOverlay = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var DialogOverlay = React36.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   DialogPrimitive.Overlay,
   {
     ref,
@@ -3204,7 +3217,7 @@ var dialogSizeStyles = {
   lg: "max-w-2xl",
   full: "max-w-[calc(100vw-2rem)]"
 };
-var DialogContent = React13.forwardRef(({ size = "md", showCloseButton = true, className, children, ...props }, ref) => /* @__PURE__ */ jsxs(DialogPortal, { children: [
+var DialogContent = React36.forwardRef(({ size = "md", showCloseButton = true, className, children, ...props }, ref) => /* @__PURE__ */ jsxs(DialogPortal, { children: [
   /* @__PURE__ */ jsx(DialogOverlay, {}),
   /* @__PURE__ */ jsxs(
     DialogPrimitive.Content,
@@ -3245,7 +3258,7 @@ var DialogContent = React13.forwardRef(({ size = "md", showCloseButton = true, c
   )
 ] }));
 DialogContent.displayName = DialogPrimitive.Content.displayName;
-var DialogClose = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(DialogPrimitive.Close, { ref, className: cn(className), ...props }));
+var DialogClose = React36.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(DialogPrimitive.Close, { ref, className: cn(className), ...props }));
 DialogClose.displayName = "DialogClose";
 var DialogHeader = ({ className, ...props }) => /* @__PURE__ */ jsx("div", { className: cn("mb-4 flex flex-col gap-1.5 pr-8", className), ...props });
 DialogHeader.displayName = "DialogHeader";
@@ -3260,7 +3273,7 @@ var DialogFooter = ({ className, ...props }) => /* @__PURE__ */ jsx(
   }
 );
 DialogFooter.displayName = "DialogFooter";
-var DialogTitle = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var DialogTitle = React36.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   DialogPrimitive.Title,
   {
     ref,
@@ -3272,7 +3285,7 @@ var DialogTitle = React13.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 DialogTitle.displayName = DialogPrimitive.Title.displayName;
-var DialogDescription = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var DialogDescription = React36.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   DialogPrimitive.Description,
   {
     ref,
@@ -3302,17 +3315,17 @@ function CommandPalette({
   onOpenChange,
   placeholder = "Type a command or search..."
 }) {
-  const [internalOpen, setInternalOpen] = React13.useState(false);
+  const [internalOpen, setInternalOpen] = React36.useState(false);
   const isControlled = controlledOpen !== void 0;
   const open = isControlled ? controlledOpen : internalOpen;
-  const setOpen = React13.useCallback(
+  const setOpen = React36.useCallback(
     (value) => {
       if (!isControlled) setInternalOpen(value);
       onOpenChange?.(value);
     },
     [isControlled, onOpenChange]
   );
-  React13.useEffect(() => {
+  React36.useEffect(() => {
     function handleKeyDown(e) {
       if ((e.metaKey || e.ctrlKey) && e.key === "k") {
         e.preventDefault();
@@ -3462,8 +3475,8 @@ function ConfirmActionButton({
   destructive = true,
   contentClassName
 }) {
-  const [open, setOpen] = React13.useState(false);
-  const [pending, setPending] = React13.useState(false);
+  const [open, setOpen] = React36.useState(false);
+  const [pending, setPending] = React36.useState(false);
   const handleConfirm = async (event) => {
     event.preventDefault();
     setPending(true);
@@ -3514,7 +3527,7 @@ var ContextMenuGroup = ContextMenuPrimitive.Group;
 var ContextMenuPortal = ContextMenuPrimitive.Portal;
 var ContextMenuSub = ContextMenuPrimitive.Sub;
 var ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;
-var ContextMenuSubTrigger = React13.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+var ContextMenuSubTrigger = React36.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   ContextMenuPrimitive.SubTrigger,
   {
     ref,
@@ -3535,7 +3548,7 @@ var ContextMenuSubTrigger = React13.forwardRef(({ className, inset, children, ..
   }
 ));
 ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName;
-var ContextMenuSubContent = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var ContextMenuSubContent = React36.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   ContextMenuPrimitive.SubContent,
   {
     ref,
@@ -3551,7 +3564,7 @@ var ContextMenuSubContent = React13.forwardRef(({ className, ...props }, ref) =>
   }
 ));
 ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName;
-var ContextMenuContent = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(ContextMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+var ContextMenuContent = React36.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(ContextMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(
   ContextMenuPrimitive.Content,
   {
     ref,
@@ -3567,7 +3580,7 @@ var ContextMenuContent = React13.forwardRef(({ className, ...props }, ref) => /*
   }
 ) }));
 ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName;
-var ContextMenuItem = React13.forwardRef(({ className, destructive, inset, ...props }, ref) => /* @__PURE__ */ jsx(
+var ContextMenuItem = React36.forwardRef(({ className, destructive, inset, ...props }, ref) => /* @__PURE__ */ jsx(
   ContextMenuPrimitive.Item,
   {
     ref,
@@ -3585,7 +3598,7 @@ var ContextMenuItem = React13.forwardRef(({ className, destructive, inset, ...pr
   }
 ));
 ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName;
-var ContextMenuCheckboxItem = React13.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs(
+var ContextMenuCheckboxItem = React36.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs(
   ContextMenuPrimitive.CheckboxItem,
   {
     ref,
@@ -3605,7 +3618,7 @@ var ContextMenuCheckboxItem = React13.forwardRef(({ className, children, checked
   }
 ));
 ContextMenuCheckboxItem.displayName = ContextMenuPrimitive.CheckboxItem.displayName;
-var ContextMenuRadioItem = React13.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+var ContextMenuRadioItem = React36.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   ContextMenuPrimitive.RadioItem,
   {
     ref,
@@ -3624,7 +3637,7 @@ var ContextMenuRadioItem = React13.forwardRef(({ className, children, ...props }
   }
 ));
 ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName;
-var ContextMenuLabel = React13.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
+var ContextMenuLabel = React36.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
   ContextMenuPrimitive.Label,
   {
     ref,
@@ -3637,7 +3650,7 @@ var ContextMenuLabel = React13.forwardRef(({ className, inset, ...props }, ref)
   }
 ));
 ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName;
-var ContextMenuSeparator = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var ContextMenuSeparator = React36.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   ContextMenuPrimitive.Separator,
   {
     ref,
@@ -3686,7 +3699,7 @@ var PopoverTrigger = PopoverPrimitive.Trigger;
 var PopoverAnchor = PopoverPrimitive.Anchor;
 var PopoverPortal = PopoverPrimitive.Portal;
 var PopoverClose = PopoverPrimitive.Close;
-var PopoverContent = React13.forwardRef(({ className, align = "center", side = "bottom", sideOffset = 8, ...props }, ref) => /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+var PopoverContent = React36.forwardRef(({ className, align = "center", side = "bottom", sideOffset = 8, ...props }, ref) => /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(
   PopoverPrimitive.Content,
   {
     ref,
@@ -3896,13 +3909,50 @@ var DatePicker = forwardRef(function DatePicker2({
   ] });
 });
 DatePicker.displayName = "DatePicker";
+var chipVariants = cva(
+  cn(
+    "inline-flex items-center gap-1 rounded-full px-2.5 py-1",
+    "text-[12px] font-medium",
+    "transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quart)]",
+    "motion-reduce:transition-none",
+    "focus-visible:outline-none focus-visible:[box-shadow:var(--shadow-focus-ring)]"
+  ),
+  {
+    variants: {
+      variant: {
+        primary: "bg-primary/10 text-primary hover:bg-primary/15",
+        neutral: "bg-muted text-fg-2 hover:bg-muted/80"
+      }
+    },
+    defaultVariants: {
+      variant: "primary"
+    }
+  }
+);
+var DismissibleChip = React36.forwardRef(function DismissibleChip2({ label, onDismiss, variant, className, ...props }, ref) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ref,
+      type: "button",
+      onClick: onDismiss,
+      "aria-label": typeof label === "string" ? `Remove ${label} filter` : "Remove filter",
+      className: cn(chipVariants({ variant }), className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { children: label }),
+        /* @__PURE__ */ jsx(XIcon, { size: 12, "aria-hidden": "true" })
+      ]
+    }
+  );
+});
 var DropdownMenu = DropdownMenuPrimitive.Root;
 var DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
 var DropdownMenuGroup = DropdownMenuPrimitive.Group;
 var DropdownMenuPortal = DropdownMenuPrimitive.Portal;
 var DropdownMenuSub = DropdownMenuPrimitive.Sub;
 var DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
-var DropdownMenuSubTrigger = React13.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+var DropdownMenuSubTrigger = React36.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   DropdownMenuPrimitive.SubTrigger,
   {
     ref,
@@ -3923,7 +3973,7 @@ var DropdownMenuSubTrigger = React13.forwardRef(({ className, inset, children, .
   }
 ));
 DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
-var DropdownMenuSubContent = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var DropdownMenuSubContent = React36.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   DropdownMenuPrimitive.SubContent,
   {
     ref,
@@ -3939,7 +3989,7 @@ var DropdownMenuSubContent = React13.forwardRef(({ className, ...props }, ref) =
   }
 ));
 DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
-var DropdownMenuContent = React13.forwardRef(({ className, sideOffset = 6, align = "start", ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+var DropdownMenuContent = React36.forwardRef(({ className, sideOffset = 6, align = "start", ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(
   DropdownMenuPrimitive.Content,
   {
     ref,
@@ -3957,7 +4007,7 @@ var DropdownMenuContent = React13.forwardRef(({ className, sideOffset = 6, align
   }
 ) }));
 DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
-var DropdownMenuItem = React13.forwardRef(({ className, destructive, inset, ...props }, ref) => /* @__PURE__ */ jsx(
+var DropdownMenuItem = React36.forwardRef(({ className, destructive, inset, ...props }, ref) => /* @__PURE__ */ jsx(
   DropdownMenuPrimitive.Item,
   {
     ref,
@@ -3975,7 +4025,7 @@ var DropdownMenuItem = React13.forwardRef(({ className, destructive, inset, ...p
   }
 ));
 DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
-var DropdownMenuCheckboxItem = React13.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs(
+var DropdownMenuCheckboxItem = React36.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs(
   DropdownMenuPrimitive.CheckboxItem,
   {
     ref,
@@ -3995,7 +4045,7 @@ var DropdownMenuCheckboxItem = React13.forwardRef(({ className, children, checke
   }
 ));
 DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
-var DropdownMenuRadioItem = React13.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+var DropdownMenuRadioItem = React36.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   DropdownMenuPrimitive.RadioItem,
   {
     ref,
@@ -4014,7 +4064,7 @@ var DropdownMenuRadioItem = React13.forwardRef(({ className, children, ...props
   }
 ));
 DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
-var DropdownMenuLabel = React13.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
+var DropdownMenuLabel = React36.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
   DropdownMenuPrimitive.Label,
   {
     ref,
@@ -4027,7 +4077,7 @@ var DropdownMenuLabel = React13.forwardRef(({ className, inset, ...props }, ref)
   }
 ));
 DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
-var DropdownMenuSeparator = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var DropdownMenuSeparator = React36.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   DropdownMenuPrimitive.Separator,
   {
     ref,
@@ -4229,7 +4279,7 @@ function FormSuccess({ children, className, ...props }) {
 var HoverCard = HoverCardPrimitive.Root;
 var HoverCardTrigger = HoverCardPrimitive.Trigger;
 var HoverCardPortal = HoverCardPrimitive.Portal;
-var HoverCardContent = React13.forwardRef(({ className, align = "center", side = "bottom", sideOffset = 8, ...props }, ref) => /* @__PURE__ */ jsx(HoverCardPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+var HoverCardContent = React36.forwardRef(({ className, align = "center", side = "bottom", sideOffset = 8, ...props }, ref) => /* @__PURE__ */ jsx(HoverCardPrimitive.Portal, { children: /* @__PURE__ */ jsx(
   HoverCardPrimitive.Content,
   {
     ref,
@@ -4391,8 +4441,8 @@ var kbdClass2 = cn(
   "[border-bottom-width:1.5px]"
 );
 function KeyboardShortcutsDialog() {
-  const [open, setOpen] = React13.useState(false);
-  React13.useEffect(() => {
+  const [open, setOpen] = React36.useState(false);
+  React36.useEffect(() => {
     function handleKeyDown(e) {
       const target = e.target;
       if (target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement || target instanceof HTMLSelectElement || target?.isContentEditable) {
@@ -4428,7 +4478,7 @@ function KeyboardShortcutsDialog() {
           className: "flex items-center justify-between gap-3 py-1",
           children: [
             /* @__PURE__ */ jsx("span", { className: "text-fg text-sm", children: shortcut.description }),
-            /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center gap-1", children: shortcut.keys.map((key, i) => /* @__PURE__ */ jsxs(React13.Fragment, { children: [
+            /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center gap-1", children: shortcut.keys.map((key, i) => /* @__PURE__ */ jsxs(React36.Fragment, { children: [
               i > 0 && /* @__PURE__ */ jsx("span", { className: "text-fg-4 mx-0.5 text-[11px]", children: "then" }),
               /* @__PURE__ */ jsx("kbd", { className: kbdClass2, children: key })
             ] }, i)) })
@@ -4447,7 +4497,7 @@ function KeyboardShortcutsDialog() {
 var labelVariants = cva(
   "text-[13px] font-medium leading-none text-fg select-none peer-disabled:cursor-not-allowed peer-disabled:text-fg-disabled has-[+input:disabled]:text-fg-disabled"
 );
-var Label4 = React13.forwardRef(
+var Label4 = React36.forwardRef(
   function Label5({ children, required, className, ...props }, ref) {
     return /* @__PURE__ */ jsxs(LabelPrimitive.Root, { ref, className: cn(labelVariants(), className), ...props, children: [
       children,
@@ -4669,7 +4719,7 @@ function MultiSelectField({
   size = "md",
   id
 }) {
-  const selected = React13.useMemo(
+  const selected = React36.useMemo(
     () => new Set(value ? value.split(",").filter(Boolean) : []),
     [value]
   );
@@ -4682,7 +4732,7 @@ function MultiSelectField({
     }
     onChange(Array.from(next).join(","));
   };
-  const generatedId = React13.useId();
+  const generatedId = React36.useId();
   const groupId = id ?? generatedId;
   return /* @__PURE__ */ jsxs("div", { className: cn("w-full", className), children: [
     /* @__PURE__ */ jsx(
@@ -5090,12 +5140,12 @@ var ProgressRing = forwardRef(function ProgressRing2({ value, max = 100, size =
   );
 });
 ProgressRing.displayName = "ProgressRing";
-var RadioGroup3 = React13.forwardRef(function RadioGroup4({ className, ...props }, ref) {
+var RadioGroup3 = React36.forwardRef(function RadioGroup4({ className, ...props }, ref) {
   return /* @__PURE__ */ jsx(RadioGroupPrimitive.Root, { ref, className: cn("grid gap-2", className), ...props });
 });
 RadioGroup3.displayName = RadioGroupPrimitive.Root.displayName;
-var RadioGroupItem = React13.forwardRef(function RadioGroupItem2({ className, label, id: providedId, ...props }, ref) {
-  const generatedId = React13.useId();
+var RadioGroupItem = React36.forwardRef(function RadioGroupItem2({ className, label, id: providedId, ...props }, ref) {
+  const generatedId = React36.useId();
   const id = providedId ?? generatedId;
   const root = /* @__PURE__ */ jsx(
     RadioGroupPrimitive.Item,
@@ -5130,7 +5180,7 @@ var RadioGroupItem = React13.forwardRef(function RadioGroupItem2({ className, la
   ] });
 });
 RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
-var ScrollArea = React13.forwardRef(function ScrollArea2({ className, children, ...props }, ref) {
+var ScrollArea = React36.forwardRef(function ScrollArea2({ className, children, ...props }, ref) {
   return /* @__PURE__ */ jsxs(
     ScrollAreaPrimitive.Root,
     {
@@ -5146,7 +5196,7 @@ var ScrollArea = React13.forwardRef(function ScrollArea2({ className, children,
   );
 });
 ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
-var ScrollBar = React13.forwardRef(function ScrollBar2({ className, orientation = "vertical", ...props }, ref) {
+var ScrollBar = React36.forwardRef(function ScrollBar2({ className, orientation = "vertical", ...props }, ref) {
   return /* @__PURE__ */ jsx(
     ScrollAreaPrimitive.ScrollAreaScrollbar,
     {
@@ -5208,7 +5258,7 @@ var searchInputVariants = cva(
     }
   }
 );
-var SearchInput = React13.forwardRef(
+var SearchInput = React36.forwardRef(
   function SearchInput2({
     value,
     onValueChange,
@@ -5221,8 +5271,8 @@ var SearchInput = React13.forwardRef(
     ...props
   }, ref) {
     const debouncedValue = useDebounce(value, debounceMs);
-    const isFirstRender = React13.useRef(true);
-    React13.useEffect(() => {
+    const isFirstRender = React36.useRef(true);
+    React36.useEffect(() => {
       if (isFirstRender.current) {
         isFirstRender.current = false;
         return;
@@ -5290,27 +5340,27 @@ function SearchSelect({
   className,
   disabled = false
 }) {
-  const [search, setSearch] = React13.useState("");
-  const [open, setOpen] = React13.useState(false);
-  const selectedIds = React13.useMemo(() => new Set(selected.map((s) => s.id)), [selected]);
-  const filtered = React13.useMemo(
+  const [search, setSearch] = React36.useState("");
+  const [open, setOpen] = React36.useState(false);
+  const selectedIds = React36.useMemo(() => new Set(selected.map((s) => s.id)), [selected]);
+  const filtered = React36.useMemo(
     () => options.filter((opt) => !selectedIds.has(opt.id)),
     [options, selectedIds]
   );
   const trimmedSearch = search.trim();
-  const hasExactMatch = React13.useMemo(
+  const hasExactMatch = React36.useMemo(
     () => options.some((opt) => opt.label.toLowerCase() === trimmedSearch.toLowerCase()),
     [options, trimmedSearch]
   );
   const showCreate = !!onCreate && trimmedSearch.length > 0 && !hasExactMatch;
-  const handleSelect = React13.useCallback(
+  const handleSelect = React36.useCallback(
     (option) => {
       onSelect(option);
       setSearch("");
     },
     [onSelect]
   );
-  const handleCreate = React13.useCallback(() => {
+  const handleCreate = React36.useCallback(() => {
     if (onCreate && trimmedSearch) {
       onCreate(trimmedSearch);
       setSearch("");
@@ -5536,7 +5586,7 @@ var SectionHead = forwardRef(function SectionHead2({ eyebrow, title, meta, class
   );
 });
 SectionHead.displayName = "SectionHead";
-var Separator4 = React13.forwardRef(function Separator5({ className, orientation = "horizontal", decorative = true, ...props }, ref) {
+var Separator4 = React36.forwardRef(function Separator5({ className, orientation = "horizontal", decorative = true, ...props }, ref) {
   return /* @__PURE__ */ jsx(
     SeparatorPrimitive.Root,
     {
@@ -5553,13 +5603,13 @@ var Separator4 = React13.forwardRef(function Separator5({ className, orientation
   );
 });
 Separator4.displayName = SeparatorPrimitive.Root.displayName;
-var SheetSideContext = React13.createContext({});
+var SheetSideContext = React36.createContext({});
 var Sheet = ({ side, children, ...props }) => /* @__PURE__ */ jsx(DialogPrimitive.Root, { ...props, children: /* @__PURE__ */ jsx(SheetSideContext, { value: { side }, children }) });
 Sheet.displayName = "Sheet";
 var SheetTrigger = DialogPrimitive.Trigger;
 var SheetClose = DialogPrimitive.Close;
 var SheetPortal = DialogPrimitive.Portal;
-var SheetOverlay = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SheetOverlay = React36.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   DialogPrimitive.Overlay,
   {
     ref,
@@ -5604,8 +5654,8 @@ var sheetVariants = cva(
     defaultVariants: { side: "right" }
   }
 );
-var SheetContent = React13.forwardRef(({ side, className, children, showCloseButton = true, ...props }, ref) => {
-  const ctx = React13.use(SheetSideContext);
+var SheetContent = React36.forwardRef(({ side, className, children, showCloseButton = true, ...props }, ref) => {
+  const ctx = React36.use(SheetSideContext);
   const resolvedSide = side ?? ctx.side ?? "right";
   return /* @__PURE__ */ jsxs(SheetPortal, { children: [
     /* @__PURE__ */ jsx(SheetOverlay, {}),
@@ -5650,7 +5700,7 @@ var SheetFooter = ({ className, ...props }) => /* @__PURE__ */ jsx(
   }
 );
 SheetFooter.displayName = "SheetFooter";
-var SheetTitle = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SheetTitle = React36.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   DialogPrimitive.Title,
   {
     ref,
@@ -5662,7 +5712,7 @@ var SheetTitle = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE
   }
 ));
 SheetTitle.displayName = DialogPrimitive.Title.displayName;
-var SheetDescription = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(DialogPrimitive.Description, { ref, className: cn("text-fg-3 text-sm", className), ...props }));
+var SheetDescription = React36.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(DialogPrimitive.Description, { ref, className: cn("text-fg-3 text-sm", className), ...props }));
 SheetDescription.displayName = DialogPrimitive.Description.displayName;
 var sideDrawerVariants = cva(
   cn(
@@ -5819,7 +5869,7 @@ var SkeletonCircle = forwardRef(
   }
 );
 SkeletonCircle.displayName = "SkeletonCircle";
-var Slider = React13.forwardRef(
+var Slider = React36.forwardRef(
   function Slider2({
     className,
     label,
@@ -5831,7 +5881,7 @@ var Slider = React13.forwardRef(
     defaultValue,
     ...props
   }, ref) {
-    const generatedId = React13.useId();
+    const generatedId = React36.useId();
     const id = providedId ?? generatedId;
     const displayValue = (() => {
       const v = value ?? defaultValue;
@@ -6119,9 +6169,9 @@ var switchThumbVariants = cva(
     }
   }
 );
-var Switch = React13.forwardRef(
+var Switch = React36.forwardRef(
   function Switch2({ label, size, className, id: providedId, ...props }, ref) {
-    const generatedId = React13.useId();
+    const generatedId = React36.useId();
     const id = providedId ?? generatedId;
     const root = /* @__PURE__ */ jsx(
       SwitchPrimitive.Root,
@@ -6253,13 +6303,13 @@ var TableCaption = forwardRef(
   }
 );
 TableCaption.displayName = "TableCaption";
-var Tabs = React13.forwardRef(
+var Tabs = React36.forwardRef(
   function Tabs2({ className, ...props }, ref) {
     return /* @__PURE__ */ jsx(TabsPrimitive.Root, { ref, className: cn(className), ...props });
   }
 );
 Tabs.displayName = TabsPrimitive.Root.displayName;
-var TabsList = React13.forwardRef(function TabsList2({ className, ...props }, ref) {
+var TabsList = React36.forwardRef(function TabsList2({ className, ...props }, ref) {
   return /* @__PURE__ */ jsx(
     TabsPrimitive.List,
     {
@@ -6282,13 +6332,16 @@ var triggerVariants = cva(
   {
     variants: {
       variant: {
-        // §5.16: tab current = text-accent + 2px accent underline (tabs are
-        // interaction, so cyan; Pro purple is reserved for selection state
-        // on list/dropdown surfaces).
+        // §5.16: tab current = 2px accent underline + bold foreground text.
+        // The cyan rule carries the brand statement (tabs are interaction,
+        // so cyan; Pro purple is reserved for selection state on
+        // list/dropdown surfaces). The active LABEL stays in `text-fg` for
+        // legibility — accent on text was too low-contrast against the page
+        // background, especially in dark mode.
         underline: cn(
           "rounded-none bg-transparent px-3.5 py-2.5",
           "border-b-2 border-transparent -mb-px",
-          "data-[state=active]:border-accent data-[state=active]:text-accent"
+          "data-[state=active]:border-accent data-[state=active]:text-fg data-[state=active]:font-semibold"
         ),
         pill: cn(
           "rounded-pill px-3 py-1.5",
@@ -6301,7 +6354,7 @@ var triggerVariants = cva(
     }
   }
 );
-var TabsTrigger = React13.forwardRef(function TabsTrigger2({ className, variant, ...props }, ref) {
+var TabsTrigger = React36.forwardRef(function TabsTrigger2({ className, variant, ...props }, ref) {
   return /* @__PURE__ */ jsx(
     TabsPrimitive.Trigger,
     {
@@ -6312,7 +6365,7 @@ var TabsTrigger = React13.forwardRef(function TabsTrigger2({ className, variant,
   );
 });
 TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
-var TabsContent = React13.forwardRef(function TabsContent2({ className, ...props }, ref) {
+var TabsContent = React36.forwardRef(function TabsContent2({ className, ...props }, ref) {
   return /* @__PURE__ */ jsx(
     TabsPrimitive.Content,
     {
@@ -6337,7 +6390,7 @@ function TeamMemberSelect({
   placeholder = "Select team member...",
   className
 }) {
-  const options = React13.useMemo(() => {
+  const options = React36.useMemo(() => {
     const meBadge = /* @__PURE__ */ jsx(
       Badge,
       {
@@ -6604,10 +6657,10 @@ var itemVariants = cva(
     }
   }
 );
-var ToggleGroupContext = React13.createContext({
+var ToggleGroupContext = React36.createContext({
   variant: "default"
 });
-var ToggleGroup = React13.forwardRef(function ToggleGroup2({ className, variant, children, ...props }, ref) {
+var ToggleGroup = React36.forwardRef(function ToggleGroup2({ className, variant, children, ...props }, ref) {
   return /* @__PURE__ */ jsx(
     ToggleGroupPrimitive.Root,
     {
@@ -6619,8 +6672,8 @@ var ToggleGroup = React13.forwardRef(function ToggleGroup2({ className, variant,
   );
 });
 ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
-var ToggleGroupItem = React13.forwardRef(function ToggleGroupItem2({ className, variant, ...props }, ref) {
-  const ctx = React13.useContext(ToggleGroupContext);
+var ToggleGroupItem = React36.forwardRef(function ToggleGroupItem2({ className, variant, ...props }, ref) {
+  const ctx = React36.useContext(ToggleGroupContext);
   return /* @__PURE__ */ jsx(
     ToggleGroupPrimitive.Item,
     {
@@ -6639,7 +6692,7 @@ var Tooltip = ({ delayMs, delayDuration, children, ...props }) => {
   return /* @__PURE__ */ jsx(TooltipPrimitive.Provider, { delayDuration: resolvedDelay, children: /* @__PURE__ */ jsx(TooltipPrimitive.Root, { delayDuration: resolvedDelay, ...props, children }) });
 };
 Tooltip.displayName = "Tooltip";
-var TooltipContent = React13.forwardRef(({ className, sideOffset = 6, ...props }, ref) => /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+var TooltipContent = React36.forwardRef(({ className, sideOffset = 6, ...props }, ref) => /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx(
   TooltipPrimitive.Content,
   {
     ref,
@@ -6691,88 +6744,420 @@ var Content15 = forwardRef(function Content16({ padBottom, className, style, ...
   );
 });
 Content15.displayName = "Content";
-var Sidebar = forwardRef(function Sidebar2({ className, ...props }, ref) {
-  return /* @__PURE__ */ jsx(
-    "aside",
-    {
-      ref,
-      className: cn(
-        "scrollbar-thin flex h-dvh w-[var(--shell-sidebar-w)] shrink-0 flex-col overflow-y-auto",
-        "border-rule bg-bg-2 border-r px-3 pt-4 pb-4",
-        className
-      ),
-      ...props
+var SidebarContext = React36.createContext(null);
+var NOOP_CONTEXT = {
+  state: "expanded",
+  setState: () => {
+  },
+  toggle: () => {
+  },
+  collapsible: false
+};
+function useSidebarState() {
+  return React36.useContext(SidebarContext) ?? NOOP_CONTEXT;
+}
+var DEFAULT_SHORTCUT = "Mod+\\";
+function readStorage(key) {
+  if (!key || typeof window === "undefined") return null;
+  try {
+    const v = window.localStorage.getItem(key);
+    return v === "rail" || v === "expanded" ? v : null;
+  } catch {
+    return null;
+  }
+}
+function SidebarProvider({
+  children,
+  state: controlled,
+  defaultState = "expanded",
+  onStateChange,
+  storageKey,
+  shortcut = DEFAULT_SHORTCUT
+}) {
+  const [uncontrolled, setUncontrolled] = React36.useState(() => {
+    if (controlled !== void 0) return controlled;
+    const stored = readStorage(storageKey);
+    return stored ?? defaultState;
+  });
+  React36.useEffect(() => {
+    if (controlled !== void 0) return;
+    const stored = readStorage(storageKey);
+    if (stored && stored !== uncontrolled) setUncontrolled(stored);
+  }, []);
+  const state = controlled ?? uncontrolled;
+  const setState = React36.useCallback(
+    (next) => {
+      if (controlled === void 0) setUncontrolled(next);
+      onStateChange?.(next);
+      if (storageKey && typeof window !== "undefined") {
+        try {
+          window.localStorage.setItem(storageKey, next);
+        } catch {
+        }
+      }
+    },
+    [controlled, onStateChange, storageKey]
+  );
+  const toggle = React36.useCallback(() => {
+    setState(state === "expanded" ? "rail" : "expanded");
+  }, [state, setState]);
+  React36.useEffect(() => {
+    if (!shortcut) return;
+    const parts = shortcut.split("+");
+    const key = parts.pop() ?? "";
+    const wantMod = parts.includes("Mod");
+    const wantShift = parts.includes("Shift");
+    const wantAlt = parts.includes("Alt");
+    function onKey(e) {
+      const isMac = typeof navigator !== "undefined" && /Mac|iPhone|iPad/.test(navigator.platform);
+      const mod = isMac ? e.metaKey : e.ctrlKey;
+      if (e.key.toLowerCase() !== key.toLowerCase()) return;
+      if (wantMod !== mod) return;
+      if (wantShift !== e.shiftKey) return;
+      if (wantAlt !== e.altKey) return;
+      e.preventDefault();
+      toggle();
+    }
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [shortcut, toggle]);
+  const value = React36.useMemo(
+    () => ({ state, setState, toggle, collapsible: true }),
+    [state, setState, toggle]
+  );
+  return /* @__PURE__ */ jsx(SidebarContext.Provider, { value, children });
+}
+SidebarProvider.displayName = "SidebarProvider";
+var PEEK_ENTER_DELAY_MS = 100;
+var PEEK_LEAVE_DELAY_MS = 200;
+var Sidebar = React36.forwardRef(function Sidebar2({ className, collapsible = false, onMouseEnter, onMouseLeave, style, ...props }, ref) {
+  const ctx = React36.useContext(SidebarContext);
+  const state = collapsible && ctx ? ctx.state : "expanded";
+  const [peek, setPeek] = React36.useState(false);
+  const enterTimer = React36.useRef(null);
+  const leaveTimer = React36.useRef(null);
+  const clearTimers = React36.useCallback(() => {
+    if (enterTimer.current != null) {
+      window.clearTimeout(enterTimer.current);
+      enterTimer.current = null;
+    }
+    if (leaveTimer.current != null) {
+      window.clearTimeout(leaveTimer.current);
+      leaveTimer.current = null;
     }
+  }, []);
+  React36.useEffect(() => () => clearTimers(), [clearTimers]);
+  React36.useEffect(() => {
+    if (state === "expanded") {
+      clearTimers();
+      setPeek(false);
+    }
+  }, [state, clearTimers]);
+  const handleEnter = (e) => {
+    onMouseEnter?.(e);
+    if (!collapsible || state !== "rail") return;
+    if (leaveTimer.current != null) {
+      window.clearTimeout(leaveTimer.current);
+      leaveTimer.current = null;
+    }
+    if (peek) return;
+    enterTimer.current = window.setTimeout(() => setPeek(true), PEEK_ENTER_DELAY_MS);
+  };
+  const handleLeave = (e) => {
+    onMouseLeave?.(e);
+    if (!collapsible) return;
+    if (enterTimer.current != null) {
+      window.clearTimeout(enterTimer.current);
+      enterTimer.current = null;
+    }
+    if (!peek) return;
+    leaveTimer.current = window.setTimeout(() => setPeek(false), PEEK_LEAVE_DELAY_MS);
+  };
+  const labelsHidden = state === "rail" && !peek;
+  const effectiveWidth = labelsHidden ? "var(--shell-sidebar-w-rail)" : "var(--shell-sidebar-w)";
+  return (
+    // Hover-peek is *enhancement only*: the canonical way to toggle the
+    // sidebar is <SidebarTrigger> (button) or the Mod+\ shortcut, both
+    // fully keyboard- and screen-reader-accessible. The mouse handlers
+    // here exist to widen the column on pointer hover, which has no
+    // keyboard analogue and intentionally so.
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
+    /* @__PURE__ */ jsx(
+      "aside",
+      {
+        ref,
+        "data-state": state,
+        "data-peek": peek ? "true" : void 0,
+        "data-labels": labelsHidden ? "hide" : "show",
+        "data-collapsible": collapsible ? "true" : void 0,
+        suppressHydrationWarning: true,
+        onMouseEnter: handleEnter,
+        onMouseLeave: handleLeave,
+        style: { width: effectiveWidth, ...style },
+        className: cn(
+          "group/sidebar scrollbar-thin flex h-dvh shrink-0 flex-col overflow-y-auto",
+          "border-rule bg-bg-2 border-r px-3 pt-4 pb-4",
+          // 220ms feels right for a ~192px width sweep — slower than the
+          // 150ms `--duration-fast` (which reads as a snap on this size of
+          // movement) but well short of `--duration-slow` (which feels
+          // sluggish). `will-change` hints the compositor so the column
+          // doesn't repaint every frame mid-transition.
+          "transition-[width,box-shadow] duration-[220ms] ease-[var(--ease-out-quart)] motion-reduce:transition-none",
+          "[will-change:width]",
+          // Peek overlay: float above the canvas without reflowing layout.
+          "data-[peek=true]:fixed data-[peek=true]:top-0 data-[peek=true]:left-0",
+          "data-[peek=true]:z-[var(--z-overlay)] data-[peek=true]:shadow-pop",
+          // Padding is held constant across states so icons keep their
+          // horizontal anchor when the column widens — peek expands the
+          // labels rightward rather than shifting the icons leftward.
+          className
+        ),
+        ...props
+      }
+    )
   );
 });
 Sidebar.displayName = "Sidebar";
-var SidebarBrand = forwardRef(function SidebarBrand2({ className, ...props }, ref) {
-  return /* @__PURE__ */ jsx("div", { ref, className: cn("px-2 pt-1 pb-4", className), ...props });
-});
+var SidebarTrigger = React36.forwardRef(
+  function SidebarTrigger2({
+    className,
+    expandLabel = "Expand sidebar",
+    collapseLabel = "Collapse sidebar",
+    onClick,
+    ...props
+  }, ref) {
+    const ctx = React36.useContext(SidebarContext);
+    if (!ctx) return null;
+    const { state, toggle } = ctx;
+    const label = state === "expanded" ? collapseLabel : expandLabel;
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref,
+        type: "button",
+        "aria-label": label,
+        "aria-expanded": state === "expanded",
+        onClick: (e) => {
+          onClick?.(e);
+          if (!e.defaultPrevented) toggle();
+        },
+        className: cn(
+          "inline-flex size-7 shrink-0 items-center justify-center rounded-md",
+          "text-fg-3 hover:bg-bg-3 hover:text-fg",
+          "transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quart)] motion-reduce:transition-none",
+          "focus-visible:[box-shadow:var(--shadow-focus-ring)] focus-visible:outline-none",
+          "[&_svg]:size-4",
+          className
+        ),
+        ...props,
+        children: state === "expanded" ? /* @__PURE__ */ jsx(PanelLeftCloseIcon, {}) : /* @__PURE__ */ jsx(PanelLeftIcon, {})
+      }
+    );
+  }
+);
+SidebarTrigger.displayName = "SidebarTrigger";
+var SidebarBrand = React36.forwardRef(
+  function SidebarBrand2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          "flex min-w-0 items-center gap-2 px-2 pt-1 pb-4",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
 SidebarBrand.displayName = "SidebarBrand";
-var SidebarSection = forwardRef(
+var SidebarBrandText = React36.forwardRef(
+  function SidebarBrandText2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref,
+        "aria-hidden": "false",
+        className: cn(
+          "min-w-0 truncate",
+          // Smooth fade + width collapse on rail. Keeps the wordmark
+          // legible up to the moment the column reaches rail width, then
+          // fully drops out (visibility:hidden cuts hit-testing).
+          "transition-[opacity,max-width] duration-[180ms] ease-[var(--ease-out-quart)] motion-reduce:transition-none",
+          "max-w-[160px] opacity-100",
+          "group-data-[labels=hide]/sidebar:max-w-0 group-data-[labels=hide]/sidebar:opacity-0 group-data-[labels=hide]/sidebar:invisible",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+SidebarBrandText.displayName = "SidebarBrandText";
+var SidebarGroupScopeContext = React36.createContext(null);
+var SidebarSection = React36.forwardRef(
   function SidebarSection2({ label, tone = "pro", className, children, ...props }, ref) {
-    return /* @__PURE__ */ jsxs("div", { ref, className: cn("mb-4", className), ...props, children: [
-      label != null && /* @__PURE__ */ jsx("div", { className: "mb-1 flex items-center justify-between px-2.5 py-1", children: /* @__PURE__ */ jsx(
-        "span",
-        {
-          className: cn(
-            "font-mono text-[11px] tracking-[0.14em] uppercase",
-            tone === "muted" ? "text-fg-3" : "text-pro-fg"
+    const ariaLabel = typeof label === "string" ? label : typeof label === "number" ? String(label) : void 0;
+    const [exclusiveId, setExclusiveIdState] = React36.useState(null);
+    const setExclusive = React36.useCallback(
+      (id) => setExclusiveIdState(id),
+      []
+    );
+    const scope = React36.useMemo(
+      () => ({ exclusiveId, setExclusive }),
+      [exclusiveId, setExclusive]
+    );
+    return /* @__PURE__ */ jsx(SidebarGroupScopeContext.Provider, { value: scope, children: /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        role: ariaLabel ? "group" : void 0,
+        "aria-label": ariaLabel,
+        className: cn(
+          "mb-4",
+          // In rail, the visible section labels disappear and the only
+          // grouping cue is a thin rule. No extra mb/pb — the border
+          // itself separates groups, so inter-section spacing matches
+          // intra-section spacing and the rail stays dense.
+          "group-data-[labels=hide]/sidebar:mb-0 group-data-[labels=hide]/sidebar:border-b group-data-[labels=hide]/sidebar:border-rule group-data-[labels=hide]/sidebar:pb-0 group-data-[labels=hide]/sidebar:last:border-b-0",
+          className
+        ),
+        ...props,
+        children: [
+          label != null && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "mb-1 flex items-center justify-between px-2.5 py-1",
+                "transition-opacity duration-[180ms] ease-[var(--ease-out-quart)] motion-reduce:transition-none",
+                "opacity-100",
+                "group-data-[labels=hide]/sidebar:invisible group-data-[labels=hide]/sidebar:opacity-0"
+              ),
+              children: /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: cn(
+                    "font-mono text-[11px] tracking-[0.14em] uppercase",
+                    tone === "muted" ? "text-fg-3" : "text-pro-fg"
+                  ),
+                  children: label
+                }
+              )
+            }
           ),
-          children: label
-        }
-      ) }),
-      children
-    ] });
+          children
+        ]
+      }
+    ) });
   }
 );
 SidebarSection.displayName = "SidebarSection";
-var SidebarLink = forwardRef(function SidebarLink2({ href, icon, active = false, asChild, className, children, ...props }, ref) {
-  const Comp = asChild ? Slot : "a";
-  return /* @__PURE__ */ jsx(
-    Comp,
-    {
-      ref,
-      ...asChild ? {} : { href },
-      "data-active": active ? "true" : void 0,
-      "aria-current": active ? "page" : void 0,
-      className: cn(
-        "group relative mb-px flex items-center gap-2.5 rounded-md px-2.5 py-1.5",
-        "text-fg-2 text-[13px] font-normal no-underline",
-        "transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quart)]",
-        "motion-reduce:transition-none",
-        "hover:bg-bg-3 hover:text-fg",
-        "focus-visible:[box-shadow:var(--shadow-focus-ring)] focus-visible:outline-none",
-        "data-[active=true]:bg-pro-bg data-[active=true]:text-pro-fg data-[active=true]:font-medium",
-        // Active rail: 2px wide, 16px tall, anchored to the link's own left
-        // edge (no parent-padding dependency — fixes G12).
-        "data-[active=true]:before:absolute data-[active=true]:before:content-['']",
-        "data-[active=true]:before:top-1/2 data-[active=true]:before:left-0",
-        "data-[active=true]:before:h-4 data-[active=true]:before:w-[2px] data-[active=true]:before:-translate-y-1/2",
-        "data-[active=true]:before:bg-pro-fg data-[active=true]:before:rounded-r-full",
-        "motion-reduce:transition-none",
-        "[&_svg]:size-3.5 [&_svg]:shrink-0 [&_svg]:opacity-85",
-        className
-      ),
-      ...props,
-      children: asChild ? children : /* @__PURE__ */ jsxs(Fragment, { children: [
-        icon,
-        /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children })
-      ] })
-    }
-  );
-});
+var SidebarLink = React36.forwardRef(
+  function SidebarLink2({ href, icon, active = false, asChild, className, children, ...props }, ref) {
+    const Comp = asChild ? Slot : "a";
+    return /* @__PURE__ */ jsx(
+      Comp,
+      {
+        ref,
+        ...asChild ? {} : { href },
+        "data-active": active ? "true" : void 0,
+        "aria-current": active ? "page" : void 0,
+        className: cn(
+          "group/link relative mb-px flex items-center gap-2.5 rounded-md px-2.5 py-1.5",
+          "text-fg-2 text-[13px] font-normal no-underline",
+          "transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quart)]",
+          "motion-reduce:transition-none",
+          "hover:bg-bg-3 hover:text-fg",
+          "focus-visible:[box-shadow:var(--shadow-focus-ring)] focus-visible:outline-none",
+          "data-[active=true]:bg-pro-bg data-[active=true]:text-pro-fg data-[active=true]:font-medium",
+          // In rail, the icon itself carries the active state rather
+          // than just the rule bar — color is more legible than a 2px
+          // vertical mark at the column's left edge when labels are
+          // hidden. The full-opacity icon override (`opacity-100`)
+          // counters the default `[&_svg]:opacity-85` so the active
+          // icon doesn't read as "still inactive but darker".
+          "group-data-[labels=hide]/sidebar:data-[active=true]:[&_svg]:text-pro-fg group-data-[labels=hide]/sidebar:data-[active=true]:[&_svg]:opacity-100",
+          // Active rail: 2px wide, 16px tall, anchored to the link's
+          // own left edge — no parent-padding dependency. Continues
+          // working unchanged when the aside narrows to a rail.
+          "data-[active=true]:before:absolute data-[active=true]:before:content-['']",
+          "data-[active=true]:before:top-1/2 data-[active=true]:before:left-0",
+          "data-[active=true]:before:h-4 data-[active=true]:before:w-[2px] data-[active=true]:before:-translate-y-1/2",
+          "data-[active=true]:before:bg-pro-fg data-[active=true]:before:rounded-r-full",
+          // Padding/gap stay constant so the icon stays under the cursor
+          // when the column widens during peek. The label simply collapses
+          // to width 0 via <SidebarLinkLabel>.
+          "[&_svg]:size-3.5 [&_svg]:shrink-0 [&_svg]:opacity-85",
+          className
+        ),
+        ...props,
+        children: asChild ? children : /* @__PURE__ */ jsxs(Fragment, { children: [
+          icon,
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "min-w-0 flex-1 truncate",
+                "transition-[opacity,max-width] duration-[180ms] ease-[var(--ease-out-quart)] motion-reduce:transition-none",
+                "max-w-full opacity-100",
+                "group-data-[labels=hide]/sidebar:max-w-0 group-data-[labels=hide]/sidebar:opacity-0 group-data-[labels=hide]/sidebar:invisible"
+              ),
+              children
+            }
+          )
+        ] })
+      }
+    );
+  }
+);
 SidebarLink.displayName = "SidebarLink";
+var SidebarLinkLabel = React36.forwardRef(
+  function SidebarLinkLabel2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref,
+        className: cn(
+          "min-w-0 flex-1 truncate",
+          // Fade + collapse instead of hard display:none so a single
+          // 180ms opacity tween covers all labels in lockstep with the
+          // 220ms aside-width transition — no snap on the last frame.
+          "transition-[opacity,max-width] duration-[180ms] ease-[var(--ease-out-quart)] motion-reduce:transition-none",
+          "max-w-full opacity-100",
+          "group-data-[labels=hide]/sidebar:max-w-0 group-data-[labels=hide]/sidebar:opacity-0 group-data-[labels=hide]/sidebar:invisible",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+SidebarLinkLabel.displayName = "SidebarLinkLabel";
+var SidebarLinkAction = React36.forwardRef(
+  function SidebarLinkAction2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref,
+        className: cn(
+          "transition-opacity duration-[180ms] ease-[var(--ease-out-quart)] motion-reduce:transition-none",
+          "opacity-100",
+          "group-data-[labels=hide]/sidebar:invisible group-data-[labels=hide]/sidebar:opacity-0",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+SidebarLinkAction.displayName = "SidebarLinkAction";
 var sidebarLinkBadgeVariants = cva(
-  "ml-auto inline-flex shrink-0 items-center justify-center font-mono tabular-nums",
+  "ml-auto inline-flex shrink-0 items-center justify-center font-mono tabular-nums group-data-[labels=hide]/sidebar:hidden",
   {
     variants: {
       tone: {
-        // Default: bare mono digit, picks up Pro fg on the active link.
-        default: "text-[10.5px] text-fg-4 group-data-[active=true]:text-pro-fg",
-        // Semantic pills — for nav items with action signals
-        // (unread messages, due tasks, blocked actions).
+        default: "text-[10.5px] text-fg-4 group-data-[active=true]/link:text-pro-fg",
         danger: "rounded-pill bg-danger-bg px-1.5 py-0.5 text-[10.5px] text-danger-fg",
         warning: "rounded-pill bg-warning-bg px-1.5 py-0.5 text-[10.5px] text-warning-fg",
         neutral: "rounded-pill bg-bg-3 px-1.5 py-0.5 text-[10.5px] text-fg-2"
@@ -6781,34 +7166,176 @@ var sidebarLinkBadgeVariants = cva(
     defaultVariants: { tone: "default" }
   }
 );
-var SidebarLinkBadge = forwardRef(
+var SidebarLinkBadge = React36.forwardRef(
   function SidebarLinkBadge2({ tone, className, ...props }, ref) {
     return /* @__PURE__ */ jsx("span", { ref, className: cn(sidebarLinkBadgeVariants({ tone }), className), ...props });
   }
 );
 SidebarLinkBadge.displayName = "SidebarLinkBadge";
-var SidebarFooter = forwardRef(function SidebarFooter2({ className, ...props }, ref) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref,
-      className: cn(
-        "border-rule mt-auto flex items-center gap-2.5 border-t px-2 pt-2.5 pb-1",
-        "text-fg-3 text-xs",
-        className
-      ),
-      ...props
-    }
-  );
-});
+var SidebarLinkGroup = React36.forwardRef(
+  function SidebarLinkGroup2({
+    id: idProp,
+    icon,
+    label,
+    href,
+    active = false,
+    defaultOpen = false,
+    open: controlled,
+    onOpenChange,
+    onActivate,
+    className,
+    children,
+    ...props
+  }, ref) {
+    const reactId = React36.useId();
+    const id = idProp ?? reactId;
+    const scope = React36.useContext(SidebarGroupScopeContext);
+    const [uncontrolledOpen, setUncontrolledOpen] = React36.useState(defaultOpen);
+    const open = controlled ?? uncontrolledOpen;
+    const setOpen = React36.useCallback(
+      (next) => {
+        if (controlled === void 0) setUncontrolledOpen(next);
+        onOpenChange?.(next);
+      },
+      [controlled, onOpenChange]
+    );
+    React36.useEffect(() => {
+      if (scope?.exclusiveId && scope.exclusiveId !== id && open) {
+        setOpen(false);
+      }
+    }, [scope?.exclusiveId, id, open, setOpen]);
+    const handleBodyClick = (e) => {
+      onActivate?.(e);
+      if (e.defaultPrevented) return;
+      scope?.setExclusive(id);
+      setOpen(true);
+    };
+    const handleChevronClick = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      setOpen(!open);
+    };
+    const contentId = `${id}-content`;
+    const bodyClassName = cn(
+      "group/link relative flex flex-1 items-center gap-2.5 rounded-md px-2.5 py-1.5",
+      "text-fg-2 text-[13px] font-normal no-underline",
+      "transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quart)]",
+      "motion-reduce:transition-none",
+      "hover:bg-bg-3 hover:text-fg",
+      "focus-visible:[box-shadow:var(--shadow-focus-ring)] focus-visible:outline-none",
+      "data-[active=true]:bg-pro-bg data-[active=true]:text-pro-fg data-[active=true]:font-medium",
+      // In rail, color carries active state since the chevron is hidden.
+      "group-data-[labels=hide]/sidebar:data-[active=true]:[&_svg]:text-pro-fg group-data-[labels=hide]/sidebar:data-[active=true]:[&_svg]:opacity-100",
+      // Active rail mark — anchored to body row's left edge.
+      "data-[active=true]:before:absolute data-[active=true]:before:content-['']",
+      "data-[active=true]:before:top-1/2 data-[active=true]:before:left-0",
+      "data-[active=true]:before:h-4 data-[active=true]:before:w-[2px] data-[active=true]:before:-translate-y-1/2",
+      "data-[active=true]:before:bg-pro-fg data-[active=true]:before:rounded-r-full",
+      "[&_svg]:size-3.5 [&_svg]:shrink-0 [&_svg]:opacity-85"
+    );
+    const labelSpan = /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cn(
+          "min-w-0 flex-1 truncate",
+          "transition-[opacity,max-width] duration-[180ms] ease-[var(--ease-out-quart)] motion-reduce:transition-none",
+          "max-w-full opacity-100",
+          "group-data-[labels=hide]/sidebar:max-w-0 group-data-[labels=hide]/sidebar:opacity-0 group-data-[labels=hide]/sidebar:invisible"
+        ),
+        children: label
+      }
+    );
+    return /* @__PURE__ */ jsx("div", { ref, className: cn("mb-px", className), ...props, children: /* @__PURE__ */ jsxs(Collapsible, { open, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-stretch", children: [
+        /* @__PURE__ */ jsxs(
+          "a",
+          {
+            href,
+            "data-active": active ? "true" : void 0,
+            "aria-current": active ? "page" : void 0,
+            onClick: handleBodyClick,
+            className: bodyClassName,
+            children: [
+              icon,
+              labelSpan
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-expanded": open,
+            "aria-controls": contentId,
+            "aria-label": open ? "Collapse section" : "Expand section",
+            onClick: handleChevronClick,
+            className: cn(
+              "ml-px inline-flex size-7 shrink-0 items-center justify-center rounded-md",
+              "text-fg-4 hover:bg-bg-3 hover:text-fg-2",
+              "transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quart)] motion-reduce:transition-none",
+              "focus-visible:[box-shadow:var(--shadow-focus-ring)] focus-visible:outline-none",
+              "[&_svg]:size-3.5 [&_svg]:shrink-0 [&_svg]:transition-transform [&_svg]:duration-[var(--duration-fast)] [&_svg]:ease-[var(--ease-out-quart)] motion-reduce:[&_svg]:transition-none",
+              // Hide in rail — content tree is hidden too, so the
+              // affordance has nothing to control.
+              "group-data-[labels=hide]/sidebar:hidden"
+            ),
+            children: /* @__PURE__ */ jsx(ChevronDownIcon, { className: open ? "" : "-rotate-90" })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(
+        CollapsibleContent,
+        {
+          id: contentId,
+          className: cn(
+            // Indent column + connecting rule. Children render as
+            // standard <SidebarLink>s and keep their own active-rail
+            // indicator, which lands flush at the indented column's
+            // left edge.
+            "group-data-[labels=hide]/sidebar:hidden"
+          ),
+          children: /* @__PURE__ */ jsx("div", { className: "border-rule mt-px ml-[18px] border-l pl-2", children })
+        }
+      )
+    ] }) });
+  }
+);
+SidebarLinkGroup.displayName = "SidebarLinkGroup";
+var SidebarFooter = React36.forwardRef(
+  function SidebarFooter2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          "border-rule mt-auto flex items-center gap-2.5 border-t px-2 pt-2.5 pb-1",
+          "text-fg-3 text-xs",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
 SidebarFooter.displayName = "SidebarFooter";
-var SidebarUser = forwardRef(function SidebarUser2({ name, subtitle, avatarSrc, className, ...props }, ref) {
+var SidebarUser = React36.forwardRef(function SidebarUser2({ name, subtitle, avatarSrc, className, ...props }, ref) {
   return /* @__PURE__ */ jsxs("div", { ref, className: cn("flex min-w-0 items-center gap-2.5", className), ...props, children: [
     /* @__PURE__ */ jsx(Avatar, { size: "sm", variant: "branded", name, src: avatarSrc ?? void 0 }),
-    /* @__PURE__ */ jsxs("div", { className: "min-w-0 leading-tight", children: [
-      /* @__PURE__ */ jsx("div", { className: "text-fg truncate text-[13px] font-medium", children: name }),
-      subtitle != null && /* @__PURE__ */ jsx("div", { className: "text-fg-4 truncate font-mono text-[10.5px]", children: subtitle })
-    ] })
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "min-w-0 leading-tight",
+          "transition-[opacity,max-width] duration-[180ms] ease-[var(--ease-out-quart)] motion-reduce:transition-none",
+          "max-w-full opacity-100",
+          "group-data-[labels=hide]/sidebar:max-w-0 group-data-[labels=hide]/sidebar:opacity-0 group-data-[labels=hide]/sidebar:invisible"
+        ),
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "text-fg truncate text-[13px] font-medium", children: name }),
+          subtitle != null && /* @__PURE__ */ jsx("div", { className: "text-fg-4 truncate font-mono text-[10.5px]", children: subtitle })
+        ]
+      }
+    )
   ] });
 });
 SidebarUser.displayName = "SidebarUser";
@@ -7532,6 +8059,6 @@ var KbdHint = forwardRef(function KbdHint2({ className, children, ...props }, re
 });
 KbdHint.displayName = "KbdHint";
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, ActivityItem, ActivityList, Alert, AlertCircleIcon, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AlertTriangleIcon, AppHeader, AppHeaderActions, AppHeaderBreadcrumb, AppHeaderSearch, AppHeaderTitle, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowRightSmallIcon, ArrowUpIcon, AspectRatio, AtSignIcon, Avatar, Badge, BarChartIcon, BellIcon, Blockquote, BoldIcon, Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, BriefcaseIcon, Building2Icon, BuildingIcon, Button, Calendar, CalendarIcon, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, ChatBubbleIcon, CheckCircle2Icon, CheckIcon, Checkbox, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronsUpDownIcon, CircleDotIcon, CircleIcon, ClientSelect, ClipboardCheckIcon, ClockIcon, CloseIcon, Collapsible, CollapsibleContent, CollapsibleTrigger, ComingSoon, CommandIcon, CommandPalette, ConfirmActionButton, Content15 as Content, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CopyButton, CopyIcon, CornerDownLeftIcon, CreditCardIcon, DATE_DISPLAY_PLACEHOLDER, DangerAction, DataTable, DataTableBody, DataTableCell, DataTableCellDue, DataTableCellId, DataTableCellMono, DataTableCellName, DataTableCheckbox, DataTableHead, DataTableHeader, DataTablePagination, DataTableResultsCount, DataTableRow, DataTableSearch, DataTableSpacer, DataTableToolbar, DatePicker, DetailGrid, DetailMain, DetailSpine, DetailSpineHeader, DetailSpineSection, DetailSpineStats, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DocumentIcon, DollarSignIcon, DownloadIcon, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, EyeIcon, EyeOffIcon, Eyebrow, FileIcon, FileReturnIcon, FileTextIcon, FileUpload, FilterChip, FlagIcon, FolderClosedIcon, FolderOpenIcon, FolderPlusIcon, FormError, FormSuccess, GlobeIcon, GoogleBrandIcon, HelpCircleIcon, HistoryIcon, HomeIcon, HoverCard, HoverCardContent, HoverCardPortal, HoverCardTrigger, IconAction, InboxIcon, InfoIcon, Input, ItalicIcon, Kanban, KanbanCard, KanbanColumn, KanbanIcon, KbdHint, KeyIcon, KeyboardShortcutsDialog, Label4 as Label, LayoutDashboardIcon, LayoutGridIcon, LayoutListIcon, LightningIcon, Link2Icon, LinkAction, LinkButton, LinkIcon, ListChecksIcon, ListIcon, ListOrderedIcon, LoaderIcon, LockIcon, LockKeyholeIcon, LockOpenIcon, LogOutIcon, Logo, MailIcon, Main, MapPinIcon, MenuIcon, MessageCircleIcon, MessageCircleWarningIcon, MicrosoftBrandIcon, MinusIcon, MonitorIcon, MoonIcon, MoreHorizontalIcon, MoveIcon, MultiFilterPill, MultiSelectField, MutedSpec, Numeric, OTPInput, PageHeader, PageHeaderSep, PageHeaderSpec, Pagination, PaletteIcon, PanelLeftCloseIcon, PanelLeftIcon, PaperclipIcon, PenSignIcon, PencilIcon, PhoneIcon, PhoneInput, PlusIcon, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverPortal, PopoverTrigger, PrimaryAction, ProgressBar, ProgressRing, RadioGroup3 as RadioGroup, RadioGroupItem, ReceiptIcon, ReplyIcon, RotateCcwIcon, SaveIcon, ScrollArea, ScrollBar, SearchIcon, SearchInput, SearchSelect, SecondaryAction, Section, SectionHead, SectionHeader, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectRoot, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SendIcon, Separator4 as Separator, SettingsIcon, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Shell, ShieldIcon, SideDrawer, Sidebar, SidebarBrand, SidebarFooter, SidebarLink, SidebarLinkBadge, SidebarSection, SidebarUser, Skeleton, SkeletonCircle, SkeletonText, SlashIcon, Slider, SmartphoneIcon, SparkleIcon, SparklesIcon, StarIcon, StarRating, Stat, Stepper, StrikethroughIcon, SubmitButton, SunIcon, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableIcon, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, TagIcon, TeamIcon, TeamMemberSelect, Textarea, ToastProvider, ToggleGroup, ToggleGroupItem, Toolbar, Tooltip, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger, Trash2Icon, TrashIcon, UnderlineIcon, UploadIcon, UserCircleIcon, UserIcon, UsersIcon, VisuallyHidden, WorkflowIcon, XIcon, ZoomInIcon, ZoomOutIcon, alertVariants, badgeVariants, buttonVariants, cardVariants, cn, colors, displayToIso, filterChipVariants, inputVariants, isoToDisplay, kanbanCardVariants, labelVariants, progressBarVariants, progressRingVariants, radii, reference, searchInputVariants, shadows, sidebarLinkBadgeVariants, spacing, starRatingVariants, surfaces, systemTokens, textareaVariants, typography, useToast };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, ActivityItem, ActivityList, Alert, AlertCircleIcon, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AlertTriangleIcon, AppHeader, AppHeaderActions, AppHeaderBreadcrumb, AppHeaderSearch, AppHeaderTitle, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowRightSmallIcon, ArrowUpIcon, AspectRatio, AtSignIcon, Avatar, Badge, BarChartIcon, BellIcon, Blockquote, BoldIcon, Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, BriefcaseIcon, Building2Icon, BuildingIcon, Button, Calendar, CalendarIcon, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, ChatBubbleIcon, CheckCircle2Icon, CheckIcon, Checkbox, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronsUpDownIcon, CircleDotIcon, CircleIcon, ClientSelect, ClipboardCheckIcon, ClockIcon, CloseIcon, Collapsible, CollapsibleContent, CollapsibleTrigger, ComingSoon, CommandIcon, CommandPalette, ConfirmActionButton, Content15 as Content, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CopyButton, CopyIcon, CornerDownLeftIcon, CreditCardIcon, DATE_DISPLAY_PLACEHOLDER, DangerAction, DataTable, DataTableBody, DataTableCell, DataTableCellDue, DataTableCellId, DataTableCellMono, DataTableCellName, DataTableCheckbox, DataTableHead, DataTableHeader, DataTablePagination, DataTableResultsCount, DataTableRow, DataTableSearch, DataTableSpacer, DataTableToolbar, DatePicker, DetailGrid, DetailMain, DetailSpine, DetailSpineHeader, DetailSpineSection, DetailSpineStats, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DismissibleChip, DocumentIcon, DollarSignIcon, DownloadIcon, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, EyeIcon, EyeOffIcon, Eyebrow, FileIcon, FileReturnIcon, FileTextIcon, FileUpload, FilterChip, FilterIcon, FlagIcon, FolderClosedIcon, FolderOpenIcon, FolderPlusIcon, FormError, FormSuccess, GlobeIcon, GoogleBrandIcon, HelpCircleIcon, HistoryIcon, HomeIcon, HoverCard, HoverCardContent, HoverCardPortal, HoverCardTrigger, IconAction, InboxIcon, InfoIcon, Input, ItalicIcon, Kanban, KanbanCard, KanbanColumn, KanbanIcon, KbdHint, KeyIcon, KeyboardShortcutsDialog, Label4 as Label, LayoutDashboardIcon, LayoutGridIcon, LayoutListIcon, LightningIcon, Link2Icon, LinkAction, LinkButton, LinkIcon, ListChecksIcon, ListIcon, ListOrderedIcon, LoaderIcon, LockIcon, LockKeyholeIcon, LockOpenIcon, LogOutIcon, Logo, MailIcon, Main, MapPinIcon, MenuIcon, MessageCircleIcon, MessageCircleWarningIcon, MicrosoftBrandIcon, MinusIcon, MonitorIcon, MoonIcon, MoreHorizontalIcon, MoveIcon, MultiFilterPill, MultiSelectField, MutedSpec, Numeric, OTPInput, PageHeader, PageHeaderSep, PageHeaderSpec, Pagination, PaletteIcon, PanelLeftCloseIcon, PanelLeftIcon, PaperclipIcon, PenSignIcon, PencilIcon, PhoneIcon, PhoneInput, PlusIcon, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverPortal, PopoverTrigger, PrimaryAction, ProgressBar, ProgressRing, RadioGroup3 as RadioGroup, RadioGroupItem, ReceiptIcon, ReplyIcon, RotateCcwIcon, SaveIcon, ScrollArea, ScrollBar, SearchIcon, SearchInput, SearchSelect, SecondaryAction, Section, SectionHead, SectionHeader, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectRoot, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SendIcon, Separator4 as Separator, SettingsIcon, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Shell, ShieldIcon, SideDrawer, Sidebar, SidebarBrand, SidebarBrandText, SidebarFooter, SidebarLink, SidebarLinkAction, SidebarLinkBadge, SidebarLinkGroup, SidebarLinkLabel, SidebarProvider, SidebarSection, SidebarTrigger, SidebarUser, Skeleton, SkeletonCircle, SkeletonText, SlashIcon, Slider, SmartphoneIcon, SparkleIcon, SparklesIcon, StarIcon, StarRating, Stat, Stepper, StrikethroughIcon, SubmitButton, SunIcon, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableIcon, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, TagIcon, TeamIcon, TeamMemberSelect, Textarea, ToastProvider, ToggleGroup, ToggleGroupItem, Toolbar, Tooltip, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger, Trash2Icon, TrashIcon, UnderlineIcon, UploadIcon, UserCircleIcon, UserIcon, UsersIcon, VisuallyHidden, WorkflowIcon, XIcon, ZoomInIcon, ZoomOutIcon, alertVariants, badgeVariants, buttonVariants, cardVariants, cn, colors, displayToIso, filterChipVariants, inputVariants, isoToDisplay, kanbanCardVariants, labelVariants, progressBarVariants, progressRingVariants, radii, reference, searchInputVariants, shadows, sidebarLinkBadgeVariants, spacing, starRatingVariants, surfaces, systemTokens, textareaVariants, typography, useSidebarState, useToast };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map