@caqophony/ui 0.1.0 → 0.2.0

package/dist/index.js

@@ -2,7 +2,7 @@
 import {
   MarkdownRenderer,
   cn
-} from "./chunk-K3SEIIA3.js";
+} from "./chunk-4YA6BZDJ.js";
 
 // src/button.tsx
 import { Slot } from "@radix-ui/react-slot";
@@ -15,12 +15,12 @@ var buttonVariants = cva(
   {
     variants: {
       variant: {
-        default: "bg-primary dark:bg-primary text-primary-foreground dark:text-primary-foreground shadow hover:bg-primary/90 dark:hover:bg-primary/90",
-        destructive: "bg-intent-error dark:bg-intent-error text-intent-error-foreground dark:text-intent-error-foreground shadow-sm hover:bg-intent-error/90 dark:hover:bg-intent-error/90",
-        outline: "border border-border dark:border-border bg-background dark:bg-background shadow-sm hover:bg-muted dark:hover:bg-muted hover:text-foreground dark:hover:text-foreground",
+        default: "bg-primary-solid dark:bg-primary-solid text-primary-foreground dark:text-primary-foreground shadow hover:bg-primary-solid/90 dark:hover:bg-primary-solid/90",
+        destructive: "bg-intent-error-solid dark:bg-intent-error-solid text-intent-error-solid-fg dark:text-intent-error-solid-fg shadow-sm hover:bg-intent-error-solid/90 dark:hover:bg-intent-error-solid/90",
+        outline: "border border-border dark:border-border bg-background dark:bg-background text-foreground dark:text-foreground shadow-sm hover:bg-muted dark:hover:bg-muted hover:text-foreground dark:hover:text-foreground",
         secondary: "bg-muted dark:bg-muted text-muted-foreground dark:text-muted-foreground shadow-sm hover:bg-muted/80 dark:hover:bg-muted/80",
         ghost: "hover:bg-muted dark:hover:bg-muted hover:text-foreground dark:hover:text-foreground",
-        link: "text-primary dark:text-primary underline-offset-4 hover:underline"
+        link: "text-primary-text dark:text-primary-text underline-offset-4 hover:underline"
       },
       size: {
         default: "h-10 px-4 py-2",
@@ -99,7 +99,9 @@ var Card = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ j
   {
     ref,
     className: cn(
-      "rounded-lg border bg-card text-card-foreground shadow-sm",
+      // W1 (#5823): the border names its colour; Tailwind v4's bare
+      // `border` is currentColor (a near-black card edge)
+      "rounded-lg border border-border bg-card text-card-foreground shadow-sm",
       className
     ),
     ...props
@@ -214,7 +216,7 @@ var TooltipContent = React5.forwardRef(({ className, sideOffset = 4, ...props },
     ref,
     sideOffset,
     className: cn(
-      "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      "z-50 overflow-hidden rounded-md border border-border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
       className
     ),
     ...props
@@ -251,11 +253,18 @@ function FormField({
             htmlFor: name,
             className: cn(
               "block text-sm font-medium",
-              hasError ? "text-intent-error dark:text-intent-error" : "text-foreground dark:text-foreground"
+              hasError ? "text-intent-error-foreground dark:text-intent-error-foreground" : "text-foreground dark:text-foreground"
             ),
             children: [
               label,
-              required && /* @__PURE__ */ jsx6("span", { className: "text-intent-error ml-1", "aria-hidden": "true", children: "*" })
+              required && /* @__PURE__ */ jsx6(
+                "span",
+                {
+                  className: "text-intent-error-foreground ml-1",
+                  "aria-hidden": "true",
+                  children: "*"
+                }
+              )
             ]
           }
         ),
@@ -275,7 +284,7 @@ function FormField({
         hasError && /* @__PURE__ */ jsxs3(
           "p",
           {
-            className: "text-intent-error dark:text-intent-error flex items-center gap-1 text-sm",
+            className: "text-intent-error-foreground dark:text-intent-error-foreground flex items-center gap-1 text-sm",
             role: "alert",
             "aria-live": "polite",
             children: [
@@ -338,7 +347,7 @@ function FormError({ error, className }) {
       role: "alert",
       children: /* @__PURE__ */ jsxs3("div", { className: "flex gap-3", children: [
         /* @__PURE__ */ jsx6(ErrorIcon, { className: "text-intent-error dark:text-intent-error size-5 shrink-0" }),
-        /* @__PURE__ */ jsx6("p", { className: "text-intent-error dark:text-intent-error text-sm", children: error })
+        /* @__PURE__ */ jsx6("p", { className: "text-intent-error-foreground dark:text-intent-error-foreground text-sm", children: error })
       ] })
     }
   );
@@ -356,7 +365,7 @@ function FormSuccess({ message, className }) {
       role: "status",
       children: /* @__PURE__ */ jsxs3("div", { className: "flex gap-3", children: [
         /* @__PURE__ */ jsx6(SuccessIcon, { className: "text-intent-success dark:text-intent-success size-5 shrink-0" }),
-        /* @__PURE__ */ jsx6("p", { className: "text-intent-success dark:text-intent-success text-sm", children: message })
+        /* @__PURE__ */ jsx6("p", { className: "text-intent-success-foreground dark:text-intent-success-foreground text-sm", children: message })
       ] })
     }
   );
@@ -501,8 +510,8 @@ function GlobalErrorContent({
                     {
                       style: {
                         fontSize: "0.75rem",
-                        color: "#9ca3af",
-                        // gossamer-ignore
+                        color: "#6b7280",
+                        // gossamer-ignore (W0 #5823: AA on #f9fafb; #9ca3af was 2.4:1)
                         marginBottom: "0.25rem"
                       },
                       children: "Error Reference"
@@ -619,8 +628,8 @@ function GlobalErrorContent({
                 style: {
                   marginTop: "1.5rem",
                   fontSize: "0.75rem",
-                  color: "#9ca3af"
-                  // gossamer-ignore
+                  color: "#6b7280"
+                  // gossamer-ignore (W0 #5823: AA on #f9fafb; #9ca3af was 2.4:1)
                 },
                 children: [
                   "If this problem persists, please",
@@ -646,14 +655,218 @@ function GlobalErrorContent({
 
 // src/collapsible-sidebar.tsx
 import {
-  useState,
-  useEffect,
+  useState as useState2,
+  useEffect as useEffect2,
   useCallback,
   createContext,
   useContext
 } from "react";
-import { ChevronLeft, ChevronRight } from "lucide-react";
-import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+import { ChevronLeft as ChevronLeft2, ChevronRight as ChevronRight2 } from "lucide-react";
+
+// src/nav-drawer.tsx
+import * as React6 from "react";
+
+// src/icon.tsx
+import {
+  ArrowLeft,
+  ArrowRight,
+  Bell,
+  Calendar,
+  Check,
+  ChevronDown,
+  ChevronLeft,
+  ChevronRight,
+  ChevronUp,
+  CircleAlert,
+  CircleCheck,
+  ClipboardList,
+  Clock,
+  Database,
+  Download,
+  Ellipsis,
+  ExternalLink,
+  Eye,
+  EyeOff,
+  FileText,
+  Filter,
+  Folder,
+  Heart,
+  House,
+  Inbox,
+  Info,
+  LayoutGrid,
+  Link,
+  List,
+  LoaderCircle,
+  Lock,
+  LogOut,
+  Mail,
+  MapPin,
+  Menu,
+  Package,
+  Pencil,
+  Phone,
+  Plus,
+  RefreshCw,
+  Rocket,
+  Search,
+  Settings,
+  Star,
+  Tag,
+  Trash2,
+  TriangleAlert,
+  Upload,
+  User,
+  Users,
+  X
+} from "lucide-react";
+import { jsx as jsx8 } from "react/jsx-runtime";
+var ICONS = {
+  "arrow-left": ArrowLeft,
+  "arrow-right": ArrowRight,
+  bell: Bell,
+  calendar: Calendar,
+  check: Check,
+  "chevron-down": ChevronDown,
+  "chevron-left": ChevronLeft,
+  "chevron-right": ChevronRight,
+  "chevron-up": ChevronUp,
+  "circle-alert": CircleAlert,
+  "circle-check": CircleCheck,
+  "clipboard-list": ClipboardList,
+  clock: Clock,
+  database: Database,
+  download: Download,
+  ellipsis: Ellipsis,
+  "external-link": ExternalLink,
+  eye: Eye,
+  "eye-off": EyeOff,
+  "file-text": FileText,
+  filter: Filter,
+  folder: Folder,
+  heart: Heart,
+  house: House,
+  inbox: Inbox,
+  info: Info,
+  "layout-grid": LayoutGrid,
+  link: Link,
+  list: List,
+  loader: LoaderCircle,
+  lock: Lock,
+  "log-out": LogOut,
+  mail: Mail,
+  "map-pin": MapPin,
+  menu: Menu,
+  package: Package,
+  pencil: Pencil,
+  phone: Phone,
+  plus: Plus,
+  "refresh-cw": RefreshCw,
+  rocket: Rocket,
+  search: Search,
+  settings: Settings,
+  star: Star,
+  tag: Tag,
+  trash: Trash2,
+  "triangle-alert": TriangleAlert,
+  upload: Upload,
+  user: User,
+  users: Users,
+  x: X
+};
+var ICON_SIZES = {
+  xs: "size-3",
+  sm: "size-4",
+  md: "size-5",
+  lg: "size-6",
+  xl: "size-8"
+};
+function Icon({ name, size, className }) {
+  const Glyph = ICONS[name];
+  return /* @__PURE__ */ jsx8(Glyph, { className: cn(ICON_SIZES[size], className), "aria-hidden": "true" });
+}
+
+// src/nav-drawer.tsx
+import { Fragment as Fragment2, jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
+function NavDrawer({
+  label,
+  side,
+  defaultOpen,
+  children
+}) {
+  const [open, setOpen] = React6.useState(defaultOpen);
+  const id = React6.useId();
+  React6.useEffect(() => {
+    if (!open) return;
+    const onKey = (e) => {
+      if (e.key === "Escape") setOpen(false);
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [open]);
+  const left = side === "left";
+  return /* @__PURE__ */ jsxs5(Fragment2, { children: [
+    /* @__PURE__ */ jsx9(
+      Button,
+      {
+        variant: "ghost",
+        size: "icon",
+        "aria-label": label,
+        "aria-expanded": open,
+        "aria-controls": open ? id : void 0,
+        onClick: () => setOpen(!open),
+        children: /* @__PURE__ */ jsx9(Icon, { name: "menu", size: "sm" })
+      }
+    ),
+    open && /* @__PURE__ */ jsxs5("div", { className: "z-overlay fixed inset-0", children: [
+      /* @__PURE__ */ jsx9(
+        "div",
+        {
+          "aria-hidden": "true",
+          className: "absolute inset-0 bg-foreground/40",
+          onClick: () => setOpen(false)
+        }
+      ),
+      /* @__PURE__ */ jsxs5(
+        "aside",
+        {
+          id,
+          "aria-label": label,
+          className: cn(
+            "absolute inset-y-0 flex w-72 max-w-[calc(100%-3rem)] flex-col overflow-y-auto bg-card shadow-lg",
+            left ? "left-0 border-r" : "right-0 border-l",
+            "border-border"
+          ),
+          children: [
+            /* @__PURE__ */ jsx9(
+              "div",
+              {
+                className: cn(
+                  "flex px-2 py-2",
+                  left ? "justify-end" : "justify-start"
+                ),
+                children: /* @__PURE__ */ jsx9(
+                  Button,
+                  {
+                    variant: "ghost",
+                    size: "icon",
+                    "aria-label": "Close",
+                    onClick: () => setOpen(false),
+                    children: /* @__PURE__ */ jsx9(Icon, { name: "x", size: "sm" })
+                  }
+                )
+              }
+            ),
+            children
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/collapsible-sidebar.tsx
+import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
 var SidebarContext = createContext(null);
 function useSidebar() {
   const context = useContext(SidebarContext);
@@ -668,7 +881,7 @@ var DefaultLink = ({
   href,
   className,
   children
-}) => /* @__PURE__ */ jsx8("a", { href: String(href), className, children });
+}) => /* @__PURE__ */ jsx10("a", { href: String(href), className, children });
 function CollapsibleSidebar({
   storageKey = "sidebar-collapsed",
   defaultCollapsed = false,
@@ -681,12 +894,12 @@ function CollapsibleSidebar({
   collapsedFooter,
   className,
   collapsedWidth = COLLAPSED_WIDTH,
-  expandedWidth = EXPANDED_WIDTH
+  expandedWidth = EXPANDED_WIDTH,
+  navLabel = "Navigation",
+  defaultNavOpen = false
 }) {
-  const [isCollapsed, setIsCollapsed] = useState(defaultCollapsed);
-  const [mounted, setMounted] = useState(false);
-  useEffect(() => {
-    setMounted(true);
+  const [isCollapsed, setIsCollapsed] = useState2(defaultCollapsed);
+  useEffect2(() => {
     const stored = localStorage.getItem(storageKey);
     if (stored !== null) {
       setIsCollapsed(stored === "true");
@@ -699,104 +912,106 @@ function CollapsibleSidebar({
       return newValue;
     });
   }, [storageKey]);
-  if (!mounted) {
-    return /* @__PURE__ */ jsx8(
-      "nav",
+  const renderItem = (item, collapsed) => {
+    const Icon2 = item.icon;
+    const active = isActive?.(item.href) ?? false;
+    const linkContent = /* @__PURE__ */ jsxs6(
+      LinkComponent,
       {
+        href: item.href,
         className: cn(
-          "hidden min-h-screen flex-col border-r bg-card lg:flex",
-          className
+          "flex items-center gap-3 rounded-lg px-3 py-2 transition-colors",
+          collapsed && "justify-center px-2",
+          active ? "bg-primary-solid text-primary-foreground" : "text-muted-foreground hover:bg-muted hover:text-foreground"
         ),
-        style: { width: defaultCollapsed ? collapsedWidth : expandedWidth }
+        children: [
+          /* @__PURE__ */ jsx10(Icon2, { className: cn("size-5 shrink-0", collapsed && "size-5") }),
+          !collapsed && /* @__PURE__ */ jsxs6("div", { className: "min-w-0 flex-1 overflow-hidden", children: [
+            /* @__PURE__ */ jsx10("div", { className: "truncate text-sm font-medium", children: item.name }),
+            item.description && /* @__PURE__ */ jsx10(
+              "div",
+              {
+                className: cn(
+                  "truncate text-xs",
+                  // W1 (#5823): full white on the solid fill (at /80 it
+                  // was below AA)
+                  active ? "text-primary-foreground" : "text-muted-foreground"
+                ),
+                children: item.description
+              }
+            )
+          ] })
+        ]
       }
     );
-  }
-  return /* @__PURE__ */ jsx8(SidebarContext.Provider, { value: { isCollapsed, toggle }, children: /* @__PURE__ */ jsx8(TooltipProvider, { delayDuration: 100, children: /* @__PURE__ */ jsxs5(
-    "nav",
-    {
-      className: cn(
-        "relative hidden min-h-screen flex-col border-r bg-card transition-all duration-300 ease-in-out lg:flex",
-        className
-      ),
-      style: { width: isCollapsed ? collapsedWidth : expandedWidth },
-      children: [
-        /* @__PURE__ */ jsx8(
-          "button",
-          {
-            onClick: toggle,
-            className: cn(
-              "absolute -right-3 top-6 z-10 flex size-6 items-center justify-center rounded-full border bg-card shadow-sm transition-colors hover:bg-muted"
-            ),
-            "aria-label": isCollapsed ? "Expand sidebar" : "Collapse sidebar",
-            children: isCollapsed ? /* @__PURE__ */ jsx8(ChevronRight, { className: "size-4" }) : /* @__PURE__ */ jsx8(ChevronLeft, { className: "size-4" })
-          }
+    if (collapsed) {
+      return /* @__PURE__ */ jsxs6(Tooltip, { children: [
+        /* @__PURE__ */ jsx10(TooltipTrigger, { asChild: true, children: linkContent }),
+        /* @__PURE__ */ jsxs6(TooltipContent, { side: "right", className: "flex flex-col", children: [
+          /* @__PURE__ */ jsx10("span", { className: "font-medium", children: item.name }),
+          item.description && /* @__PURE__ */ jsx10("span", { className: "text-xs text-muted-foreground", children: item.description })
+        ] })
+      ] }, item.href);
+    }
+    return /* @__PURE__ */ jsx10("div", { children: linkContent }, item.href);
+  };
+  return /* @__PURE__ */ jsx10(SidebarContext.Provider, { value: { isCollapsed, toggle }, children: /* @__PURE__ */ jsxs6(TooltipProvider, { delayDuration: 100, children: [
+    /* @__PURE__ */ jsx10(
+      "div",
+      {
+        className: cn(
+          "flex min-h-screen w-14 flex-shrink-0 flex-col items-center border-r border-border bg-card py-2 lg:hidden",
+          className
         ),
-        (header || collapsedHeader) && /* @__PURE__ */ jsx8(
-          "div",
-          {
-            className: cn(
-              "border-b p-4 transition-all duration-300",
-              isCollapsed ? "px-2" : "px-4"
-            ),
-            children: isCollapsed ? collapsedHeader || null : header
-          }
+        children: /* @__PURE__ */ jsxs6(NavDrawer, { label: navLabel, side: "left", defaultOpen: defaultNavOpen, children: [
+          header && /* @__PURE__ */ jsx10("div", { className: "border-b border-border px-4 pb-4", children: header }),
+          /* @__PURE__ */ jsx10("div", { className: "flex-1 space-y-1 p-2", children: items.map((item) => renderItem(item, false)) }),
+          footer && /* @__PURE__ */ jsx10("div", { className: "mt-auto border-t border-border p-2", children: footer })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsxs6(
+      "nav",
+      {
+        className: cn(
+          "relative hidden min-h-screen flex-col border-r border-border bg-card transition-all duration-300 ease-in-out lg:flex",
+          className
         ),
-        /* @__PURE__ */ jsx8("div", { className: "flex-1 space-y-1 overflow-y-auto p-2", children: items.map((item) => {
-          const Icon = item.icon;
-          const active = isActive?.(item.href) ?? false;
-          const linkContent = /* @__PURE__ */ jsxs5(
-            LinkComponent,
+        style: { width: isCollapsed ? collapsedWidth : expandedWidth },
+        children: [
+          /* @__PURE__ */ jsx10(
+            "button",
             {
-              href: item.href,
+              onClick: toggle,
               className: cn(
-                "flex items-center gap-3 rounded-lg px-3 py-2 transition-colors",
-                isCollapsed && "justify-center px-2",
-                active ? "bg-primary text-primary-foreground" : "text-muted-foreground hover:bg-muted hover:text-foreground"
+                "absolute -right-3 top-6 z-10 flex size-6 items-center justify-center rounded-full border border-border bg-card shadow-sm transition-colors hover:bg-muted"
               ),
-              children: [
-                /* @__PURE__ */ jsx8(
-                  Icon,
-                  {
-                    className: cn("size-5 shrink-0", isCollapsed && "size-5")
-                  }
-                ),
-                !isCollapsed && /* @__PURE__ */ jsxs5("div", { className: "min-w-0 flex-1 overflow-hidden", children: [
-                  /* @__PURE__ */ jsx8("div", { className: "truncate text-sm font-medium", children: item.name }),
-                  item.description && /* @__PURE__ */ jsx8(
-                    "div",
-                    {
-                      className: cn(
-                        "truncate text-xs",
-                        active ? "text-primary-foreground/80" : "text-muted-foreground"
-                      ),
-                      children: item.description
-                    }
-                  )
-                ] })
-              ]
+              "aria-label": isCollapsed ? "Expand sidebar" : "Collapse sidebar",
+              children: isCollapsed ? /* @__PURE__ */ jsx10(ChevronRight2, { className: "size-4" }) : /* @__PURE__ */ jsx10(ChevronLeft2, { className: "size-4" })
             }
-          );
-          if (isCollapsed) {
-            return /* @__PURE__ */ jsxs5(Tooltip, { children: [
-              /* @__PURE__ */ jsx8(TooltipTrigger, { asChild: true, children: linkContent }),
-              /* @__PURE__ */ jsxs5(TooltipContent, { side: "right", className: "flex flex-col", children: [
-                /* @__PURE__ */ jsx8("span", { className: "font-medium", children: item.name }),
-                item.description && /* @__PURE__ */ jsx8("span", { className: "text-xs text-muted-foreground", children: item.description })
-              ] })
-            ] }, item.href);
-          }
-          return /* @__PURE__ */ jsx8("div", { children: linkContent }, item.href);
-        }) }),
-        (footer || collapsedFooter) && /* @__PURE__ */ jsx8("div", { className: "mt-auto border-t p-2", children: isCollapsed ? collapsedFooter || null : footer })
-      ]
-    }
-  ) }) });
+          ),
+          (header || collapsedHeader) && /* @__PURE__ */ jsx10(
+            "div",
+            {
+              className: cn(
+                "border-b border-border p-4 transition-all duration-300",
+                isCollapsed ? "px-2" : "px-4"
+              ),
+              children: isCollapsed ? collapsedHeader || null : header
+            }
+          ),
+          /* @__PURE__ */ jsx10("div", { className: "flex-1 space-y-1 overflow-y-auto p-2", children: items.map((item) => renderItem(item, isCollapsed)) }),
+          (footer || collapsedFooter) && /* @__PURE__ */ jsx10("div", { className: "mt-auto border-t border-border p-2", children: isCollapsed ? collapsedFooter || null : footer })
+        ]
+      }
+    )
+  ] }) });
 }
 
 // src/accordion.tsx
-import { createContext as createContext2, useContext as useContext2, useState as useState2, useCallback as useCallback2, useId as useId2 } from "react";
-import { ChevronDown } from "lucide-react";
-import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+import { createContext as createContext2, useContext as useContext2, useState as useState3, useCallback as useCallback2, useId as useId3 } from "react";
+import { ChevronDown as ChevronDown2 } from "lucide-react";
+import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
 var AccordionContext = createContext2(null);
 var AccordionItemContext = createContext2(
   null
@@ -825,7 +1040,7 @@ function AccordionSingle({
   children,
   className
 }) {
-  const [uncontrolledValue, setUncontrolledValue] = useState2(defaultValue);
+  const [uncontrolledValue, setUncontrolledValue] = useState3(defaultValue);
   const isControlled = controlledValue !== void 0;
   const value = isControlled ? controlledValue : uncontrolledValue;
   const handleValueChange = useCallback2(
@@ -838,7 +1053,7 @@ function AccordionSingle({
     },
     [value, collapsible, isControlled, onValueChange]
   );
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx11(
     AccordionContext.Provider,
     {
       value: {
@@ -846,7 +1061,7 @@ function AccordionSingle({
         value,
         onValueChange: handleValueChange
       },
-      children: /* @__PURE__ */ jsx9("div", { className: cn("space-y-2", className), "data-accordion-root": "", children })
+      children: /* @__PURE__ */ jsx11("div", { className: cn("space-y-2", className), "data-accordion-root": "", children })
     }
   );
 }
@@ -857,7 +1072,7 @@ function AccordionMultiple({
   children,
   className
 }) {
-  const [uncontrolledValue, setUncontrolledValue] = useState2(defaultValue);
+  const [uncontrolledValue, setUncontrolledValue] = useState3(defaultValue);
   const isControlled = controlledValue !== void 0;
   const value = isControlled ? controlledValue : uncontrolledValue;
   const handleValueChange = useCallback2(
@@ -870,7 +1085,7 @@ function AccordionMultiple({
     },
     [value, isControlled, onValueChange]
   );
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx11(
     AccordionContext.Provider,
     {
       value: {
@@ -878,15 +1093,15 @@ function AccordionMultiple({
         value,
         onValueChange: handleValueChange
       },
-      children: /* @__PURE__ */ jsx9("div", { className: cn("space-y-2", className), "data-accordion-root": "", children })
+      children: /* @__PURE__ */ jsx11("div", { className: cn("space-y-2", className), "data-accordion-root": "", children })
     }
   );
 }
 function Accordion(props) {
   if (props.type === "multiple") {
-    return /* @__PURE__ */ jsx9(AccordionMultiple, { ...props });
+    return /* @__PURE__ */ jsx11(AccordionMultiple, { ...props });
   }
-  return /* @__PURE__ */ jsx9(AccordionSingle, { ...props });
+  return /* @__PURE__ */ jsx11(AccordionSingle, { ...props });
 }
 function AccordionItem({
   value,
@@ -896,15 +1111,15 @@ function AccordionItem({
   testId
 }) {
   const { value: accordionValue, type } = useAccordion();
-  const uniqueId = useId2();
+  const uniqueId = useId3();
   const triggerId = `accordion-trigger-${uniqueId}`;
   const contentId = `accordion-content-${uniqueId}`;
   const isOpen = type === "single" ? accordionValue === value : accordionValue.includes(value);
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx11(
     AccordionItemContext.Provider,
     {
-      value: { value, isOpen, triggerId, contentId },
-      children: /* @__PURE__ */ jsx9(
+      value: { value, isOpen, triggerId, contentId, disabled },
+      children: /* @__PURE__ */ jsx11(
         "div",
         {
           className: cn(
@@ -929,12 +1144,13 @@ function AccordionTrigger({
   testId
 }) {
   const { onValueChange } = useAccordion();
-  const { value, isOpen, triggerId, contentId } = useAccordionItem();
-  return /* @__PURE__ */ jsxs6(
+  const { value, isOpen, triggerId, contentId, disabled } = useAccordionItem();
+  return /* @__PURE__ */ jsxs7(
     "button",
     {
       id: triggerId,
       type: "button",
+      disabled,
       onClick: () => onValueChange(value),
       className: cn(
         "flex w-full items-center justify-between gap-3 p-4 text-left font-medium",
@@ -948,14 +1164,14 @@ function AccordionTrigger({
       "data-state": isOpen ? "open" : "closed",
       "data-testid": testId,
       children: [
-        /* @__PURE__ */ jsxs6("span", { className: "flex items-center gap-3", children: [
-          icon && /* @__PURE__ */ jsx9("span", { className: "shrink-0", children: icon }),
-          /* @__PURE__ */ jsx9("span", { children })
+        /* @__PURE__ */ jsxs7("span", { className: "flex items-center gap-3", children: [
+          icon && /* @__PURE__ */ jsx11("span", { className: "shrink-0", children: icon }),
+          /* @__PURE__ */ jsx11("span", { children })
         ] }),
-        /* @__PURE__ */ jsxs6("span", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxs7("span", { className: "flex items-center gap-2", children: [
           rightContent,
-          /* @__PURE__ */ jsx9(
-            ChevronDown,
+          /* @__PURE__ */ jsx11(
+            ChevronDown2,
             {
               className: cn(
                 "size-5 shrink-0 text-muted-foreground transition-transform duration-300 [transition-timing-function:cubic-bezier(0.32,0.72,0,1)]",
@@ -975,7 +1191,7 @@ function AccordionContent({
   testId
 }) {
   const { isOpen, contentId, triggerId } = useAccordionItem();
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx11(
     "div",
     {
       id: contentId,
@@ -989,7 +1205,7 @@ function AccordionContent({
         "grid transition-all duration-300 [transition-timing-function:cubic-bezier(0.32,0.72,0,1)]",
         isOpen ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0"
       ),
-      children: /* @__PURE__ */ jsx9("div", { className: "overflow-hidden", children: /* @__PURE__ */ jsx9("div", { className: cn("px-4 pb-4", className), children }) })
+      children: /* @__PURE__ */ jsx11("div", { className: "overflow-hidden", children: /* @__PURE__ */ jsx11("div", { className: cn("px-4 pb-4", className), children }) })
     }
   );
 }
@@ -1007,10 +1223,10 @@ function SimpleAccordion({
   triggerTestId,
   contentTestId
 }) {
-  const [uncontrolledOpen, setUncontrolledOpen] = useState2(defaultOpen);
+  const [uncontrolledOpen, setUncontrolledOpen] = useState3(defaultOpen);
   const isControlled = controlledOpen !== void 0;
   const isOpen = isControlled ? controlledOpen : uncontrolledOpen;
-  const uniqueId = useId2();
+  const uniqueId = useId3();
   const triggerId = `simple-accordion-trigger-${uniqueId}`;
   const contentId = `simple-accordion-content-${uniqueId}`;
   const toggle = useCallback2(() => {
@@ -1020,7 +1236,7 @@ function SimpleAccordion({
     }
     onOpenChange?.(newValue);
   }, [isOpen, isControlled, onOpenChange]);
-  return /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsxs7(
     "div",
     {
       className: cn(
@@ -1029,7 +1245,7 @@ function SimpleAccordion({
       ),
       "data-state": isOpen ? "open" : "closed",
       children: [
-        /* @__PURE__ */ jsxs6(
+        /* @__PURE__ */ jsxs7(
           "button",
           {
             id: triggerId,
@@ -1047,14 +1263,14 @@ function SimpleAccordion({
             "data-state": isOpen ? "open" : "closed",
             "data-testid": triggerTestId,
             children: [
-              /* @__PURE__ */ jsxs6("span", { className: "flex items-center gap-3", children: [
-                icon && /* @__PURE__ */ jsx9("span", { className: "shrink-0", children: icon }),
-                /* @__PURE__ */ jsx9("span", { children: title })
+              /* @__PURE__ */ jsxs7("span", { className: "flex items-center gap-3", children: [
+                icon && /* @__PURE__ */ jsx11("span", { className: "shrink-0", children: icon }),
+                /* @__PURE__ */ jsx11("span", { children: title })
               ] }),
-              /* @__PURE__ */ jsxs6("span", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsxs7("span", { className: "flex items-center gap-2", children: [
                 rightContent,
-                /* @__PURE__ */ jsx9(
-                  ChevronDown,
+                /* @__PURE__ */ jsx11(
+                  ChevronDown2,
                   {
                     className: cn(
                       "size-5 shrink-0 text-muted-foreground transition-transform duration-300 [transition-timing-function:cubic-bezier(0.32,0.72,0,1)]",
@@ -1067,7 +1283,7 @@ function SimpleAccordion({
             ]
           }
         ),
-        /* @__PURE__ */ jsx9(
+        /* @__PURE__ */ jsx11(
           "div",
           {
             id: contentId,
@@ -1080,7 +1296,7 @@ function SimpleAccordion({
               "grid transition-all duration-300 [transition-timing-function:cubic-bezier(0.32,0.72,0,1)]",
               isOpen ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0"
             ),
-            children: /* @__PURE__ */ jsx9("div", { className: "overflow-hidden", children: /* @__PURE__ */ jsx9("div", { className: cn("px-4 pb-4", contentClassName), children }) })
+            children: /* @__PURE__ */ jsx11("div", { className: "overflow-hidden", children: /* @__PURE__ */ jsx11("div", { className: cn("px-4 pb-4", contentClassName), children }) })
           }
         )
       ]
@@ -1089,9 +1305,9 @@ function SimpleAccordion({
 }
 
 // src/confirm-dialog.tsx
-import * as React6 from "react";
+import * as React7 from "react";
 import { Loader2 as Loader22 } from "lucide-react";
-import { Fragment as Fragment2, jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
 function ConfirmDialog({
   title,
   message,
@@ -1106,7 +1322,7 @@ function ConfirmDialog({
   confirmVariant = "default",
   className
 }) {
-  React6.useEffect(() => {
+  React7.useEffect(() => {
     function handleKeyDown(e) {
       if (e.key === "Escape" && !isLoading) {
         onCancel();
@@ -1115,7 +1331,7 @@ function ConfirmDialog({
     document.addEventListener("keydown", handleKeyDown);
     return () => document.removeEventListener("keydown", handleKeyDown);
   }, [onCancel, isLoading]);
-  return /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx12(
     "div",
     {
       className: "fixed inset-0 z-50 flex items-center justify-center bg-background/80 backdrop-blur-sm dark:bg-background/80",
@@ -1124,7 +1340,7 @@ function ConfirmDialog({
       "aria-labelledby": "confirm-dialog-title",
       "aria-describedby": "confirm-dialog-description",
       "data-testid": dialogTestId,
-      children: /* @__PURE__ */ jsxs7(
+      children: /* @__PURE__ */ jsxs8(
         "div",
         {
           className: cn(
@@ -1133,7 +1349,7 @@ function ConfirmDialog({
             className
           ),
           children: [
-            /* @__PURE__ */ jsx10(
+            /* @__PURE__ */ jsx12(
               "h3",
               {
                 id: "confirm-dialog-title",
@@ -1141,7 +1357,7 @@ function ConfirmDialog({
                 children: title
               }
             ),
-            /* @__PURE__ */ jsx10(
+            /* @__PURE__ */ jsx12(
               "p",
               {
                 id: "confirm-dialog-description",
@@ -1149,8 +1365,8 @@ function ConfirmDialog({
                 children: message
               }
             ),
-            /* @__PURE__ */ jsxs7("div", { className: "mt-6 flex justify-end gap-3", children: [
-              /* @__PURE__ */ jsx10(
+            /* @__PURE__ */ jsxs8("div", { className: "mt-6 flex justify-end gap-3", children: [
+              /* @__PURE__ */ jsx12(
                 Button,
                 {
                   variant: "ghost",
@@ -1160,15 +1376,15 @@ function ConfirmDialog({
                   children: cancelLabel
                 }
               ),
-              /* @__PURE__ */ jsx10(
+              /* @__PURE__ */ jsx12(
                 Button,
                 {
                   variant: confirmVariant,
                   onClick: onConfirm,
                   disabled: isLoading,
                   "data-testid": confirmTestId,
-                  children: isLoading ? /* @__PURE__ */ jsxs7(Fragment2, { children: [
-                    /* @__PURE__ */ jsx10(Loader22, { className: "mr-2 size-4 animate-spin" }),
+                  children: isLoading ? /* @__PURE__ */ jsxs8(Fragment3, { children: [
+                    /* @__PURE__ */ jsx12(Loader22, { className: "mr-2 size-4 animate-spin" }),
                     confirmLabel,
                     "..."
                   ] }) : confirmLabel
@@ -1183,9 +1399,9 @@ function ConfirmDialog({
 }
 
 // src/dicebear-avatar.tsx
-import * as React7 from "react";
+import * as React8 from "react";
 import { cva as cva2 } from "class-variance-authority";
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { jsx as jsx13 } from "react/jsx-runtime";
 var avatarVariants = cva2(
   "relative inline-flex shrink-0 overflow-hidden rounded-full bg-muted dark:bg-muted",
   {
@@ -1209,7 +1425,7 @@ function buildDiceBearUrl(seed, style = "adventurer-neutral") {
   const encodedSeed = encodeURIComponent(seed);
   return `${DICEBEAR_BASE_URL}/${style}/svg?seed=${encodedSeed}`;
 }
-var DiceBearAvatar = React7.forwardRef(
+var DiceBearAvatar = React8.forwardRef(
   ({
     seed,
     avatarStyle = "adventurer-neutral",
@@ -1219,18 +1435,18 @@ var DiceBearAvatar = React7.forwardRef(
     className,
     ...props
   }, ref) => {
-    const [hasError, setHasError] = React7.useState(false);
+    const [hasError, setHasError] = React8.useState(false);
     const url = buildDiceBearUrl(seed, avatarStyle);
-    React7.useEffect(() => {
+    React8.useEffect(() => {
       setHasError(false);
     }, [seed, avatarStyle]);
-    return /* @__PURE__ */ jsx11(
+    return /* @__PURE__ */ jsx13(
       "div",
       {
         ref,
         className: cn(avatarVariants({ size }), className),
         ...props,
-        children: hasError ? fallback ? /* @__PURE__ */ jsx11("div", { className: "flex h-full w-full items-center justify-center text-xs font-medium text-muted-foreground dark:text-muted-foreground", children: fallback }) : /* @__PURE__ */ jsx11("div", { className: "flex h-full w-full items-center justify-center bg-primary/10 text-xs font-medium text-primary dark:bg-primary/10 dark:text-primary", children: seed.charAt(0).toUpperCase() }) : /* @__PURE__ */ jsx11(
+        children: hasError ? fallback ? /* @__PURE__ */ jsx13("div", { className: "flex h-full w-full items-center justify-center text-xs font-medium text-muted-foreground dark:text-muted-foreground", children: fallback }) : /* @__PURE__ */ jsx13("div", { className: "text-primary-text dark:text-primary-text flex h-full w-full items-center justify-center bg-primary/10 text-xs font-medium dark:bg-primary/10", children: seed.charAt(0).toUpperCase() }) : /* @__PURE__ */ jsx13(
           "img",
           {
             src: url,
@@ -1246,14 +1462,14 @@ var DiceBearAvatar = React7.forwardRef(
 DiceBearAvatar.displayName = "DiceBearAvatar";
 
 // src/intent-icon.tsx
-import { Check, AlertTriangle, X, Info } from "lucide-react";
-import { jsx as jsx12 } from "react/jsx-runtime";
+import { Check as Check2, AlertTriangle, X as X2, Info as Info2 } from "lucide-react";
+import { jsx as jsx14 } from "react/jsx-runtime";
 var intentConfig = {
   success: {
     outerBg: "bg-[rgba(33,196,93,0.10)] dark:bg-[rgba(33,196,93,0.10)]",
     innerBg: "bg-[rgba(33,196,93,0.20)] dark:bg-[rgba(33,196,93,0.20)]",
     iconColor: "text-[#21c45d] dark:text-[#21c45d]",
-    Icon: Check
+    Icon: Check2
   },
   warning: {
     outerBg: "bg-[rgba(245,159,10,0.10)] dark:bg-[rgba(245,159,10,0.10)]",
@@ -1265,13 +1481,13 @@ var intentConfig = {
     outerBg: "bg-[rgba(239,67,67,0.10)] dark:bg-[rgba(239,67,67,0.10)]",
     innerBg: "bg-[rgba(239,67,67,0.20)] dark:bg-[rgba(239,67,67,0.20)]",
     iconColor: "text-[#ef4343] dark:text-[#ef4343]",
-    Icon: X
+    Icon: X2
   },
   info: {
     outerBg: "bg-[rgba(60,131,246,0.10)] dark:bg-[rgba(60,131,246,0.10)]",
     innerBg: "bg-[rgba(60,131,246,0.20)] dark:bg-[rgba(60,131,246,0.20)]",
     iconColor: "text-[#3c83f6] dark:text-[#3c83f6]",
-    Icon: Info
+    Icon: Info2
   }
 };
 var sizeConfig = {
@@ -1290,20 +1506,20 @@ function IntentIcon({
   intent = "success",
   size = "md"
 }) {
-  const { outerBg, innerBg, iconColor, Icon } = intentConfig[intent];
+  const { outerBg, innerBg, iconColor, Icon: Icon2 } = intentConfig[intent];
   const { outer, inner, iconSize } = sizeConfig[size];
-  return /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx14(
     "div",
     {
       "data-testid": "intent-icon",
       className: `${outer} ${outerBg} flex items-center justify-center`,
-      children: /* @__PURE__ */ jsx12("div", { className: `${inner} ${innerBg} flex items-center justify-center`, children: /* @__PURE__ */ jsx12(Icon, { className: iconColor, size: iconSize }) })
+      children: /* @__PURE__ */ jsx14("div", { className: `${inner} ${innerBg} flex items-center justify-center`, children: /* @__PURE__ */ jsx14(Icon2, { className: iconColor, size: iconSize }) })
     }
   );
 }
 
 // src/section-heading.tsx
-import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
 var sizeConfig2 = {
   display: {
     className: "text-4xl font-bold leading-10",
@@ -1328,8 +1544,8 @@ function SectionHeading({
   align = "center",
   size = "h1"
 }) {
-  const { className: sizeClass, tag: Tag } = sizeConfig2[size];
-  return /* @__PURE__ */ jsxs8(
+  const { className: sizeClass, tag: Tag2 } = sizeConfig2[size];
+  return /* @__PURE__ */ jsxs9(
     "div",
     {
       "data-testid": "section-heading",
@@ -1339,15 +1555,15 @@ function SectionHeading({
         align === "left" && "items-start text-left"
       ),
       children: [
-        /* @__PURE__ */ jsx13(Tag, { className: cn("text-foreground dark:text-foreground", sizeClass), children: title }),
-        description && /* @__PURE__ */ jsx13("p", { className: "text-sm font-normal leading-[21px] text-muted-foreground dark:text-muted-foreground", children: description })
+        /* @__PURE__ */ jsx15(Tag2, { className: cn("text-foreground dark:text-foreground", sizeClass), children: title }),
+        description && /* @__PURE__ */ jsx15("p", { className: "text-sm font-normal leading-[21px] text-muted-foreground dark:text-muted-foreground", children: description })
       ]
     }
   );
 }
 
 // src/filter-chip.tsx
-import { jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs10 } from "react/jsx-runtime";
 function FilterChip({
   label,
   active = false,
@@ -1355,7 +1571,7 @@ function FilterChip({
   size = "md",
   onClick
 }) {
-  return /* @__PURE__ */ jsxs9(
+  return /* @__PURE__ */ jsxs10(
     "button",
     {
       type: "button",
@@ -1378,7 +1594,7 @@ function FilterChip({
       ),
       children: [
         label,
-        count != null && /* @__PURE__ */ jsx14(
+        count != null && /* @__PURE__ */ jsx16(
           "span",
           {
             className: cn(
@@ -1396,35 +1612,35 @@ function FilterChip({
 }
 
 // src/distribution-chip.tsx
-import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs11 } from "react/jsx-runtime";
 function DistributionChip({
   count,
   label,
   dotClass,
   testId
 }) {
-  return /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsxs11(
     "span",
     {
       "data-testid": testId,
       className: "inline-flex items-center gap-1.5 rounded-full border border-border bg-card px-3 py-1 text-sm font-medium text-foreground",
       children: [
-        /* @__PURE__ */ jsx15("span", { className: `size-2 rounded-full ${dotClass}` }),
-        /* @__PURE__ */ jsx15("span", { className: "tabular-nums", children: count }),
-        /* @__PURE__ */ jsx15("span", { className: "text-muted-foreground", children: label })
+        /* @__PURE__ */ jsx17("span", { className: `size-2 rounded-full ${dotClass}` }),
+        /* @__PURE__ */ jsx17("span", { className: "tabular-nums", children: count }),
+        /* @__PURE__ */ jsx17("span", { className: "text-muted-foreground", children: label })
       ]
     }
   );
 }
 
 // src/skeleton-bar.tsx
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { jsx as jsx18 } from "react/jsx-runtime";
 function SkeletonBar({
   width = "full",
   height = 14,
   className = ""
 }) {
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx18(
     "div",
     {
       "data-testid": "skeleton-bar",
@@ -1442,9 +1658,9 @@ function SkeletonBar({
 }
 
 // src/skeleton-card.tsx
-import { jsx as jsx17, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs12 } from "react/jsx-runtime";
 function SkeletonCard({ className = "" }) {
-  return /* @__PURE__ */ jsxs11(
+  return /* @__PURE__ */ jsxs12(
     "div",
     {
       "data-testid": "skeleton-card",
@@ -1453,18 +1669,18 @@ function SkeletonCard({ className = "" }) {
         className
       ),
       children: [
-        /* @__PURE__ */ jsx17(SkeletonBar, { width: 80, height: 10 }),
-        /* @__PURE__ */ jsx17(SkeletonBar, { width: 60, height: 24 }),
-        /* @__PURE__ */ jsx17(SkeletonBar, { width: 100, height: 10 })
+        /* @__PURE__ */ jsx19(SkeletonBar, { width: 80, height: 10 }),
+        /* @__PURE__ */ jsx19(SkeletonBar, { width: 60, height: 24 }),
+        /* @__PURE__ */ jsx19(SkeletonBar, { width: 100, height: 10 })
       ]
     }
   );
 }
 
 // src/skeleton-row.tsx
-import { jsx as jsx18, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs13 } from "react/jsx-runtime";
 function SkeletonRow({ className = "" }) {
-  return /* @__PURE__ */ jsxs12(
+  return /* @__PURE__ */ jsxs13(
     "div",
     {
       "data-testid": "skeleton-row",
@@ -1473,10 +1689,10 @@ function SkeletonRow({ className = "" }) {
         className
       ),
       children: [
-        /* @__PURE__ */ jsx18("div", { className: "h-9 w-9 flex-shrink-0 animate-pulse rounded-full bg-muted dark:bg-muted" }),
-        /* @__PURE__ */ jsxs12("div", { className: "flex flex-1 flex-col gap-1.5", children: [
-          /* @__PURE__ */ jsx18(SkeletonBar, { width: 200, height: 12 }),
-          /* @__PURE__ */ jsx18(SkeletonBar, { width: 140, height: 10 })
+        /* @__PURE__ */ jsx20("div", { className: "h-9 w-9 flex-shrink-0 animate-pulse rounded-full bg-muted dark:bg-muted" }),
+        /* @__PURE__ */ jsxs13("div", { className: "flex flex-1 flex-col gap-1.5", children: [
+          /* @__PURE__ */ jsx20(SkeletonBar, { width: 200, height: 12 }),
+          /* @__PURE__ */ jsx20(SkeletonBar, { width: 140, height: 10 })
         ] })
       ]
     }
@@ -1484,10 +1700,10 @@ function SkeletonRow({ className = "" }) {
 }
 
 // src/stacked-list.tsx
-import * as React8 from "react";
-import { jsx as jsx19, jsxs as jsxs13 } from "react/jsx-runtime";
-var StackedList = React8.forwardRef(
-  ({ className, divided = true, density = "default", ...props }, ref) => /* @__PURE__ */ jsx19(
+import * as React9 from "react";
+import { jsx as jsx21, jsxs as jsxs14 } from "react/jsx-runtime";
+var StackedList = React9.forwardRef(
+  ({ className, divided = true, density = "default", ...props }, ref) => /* @__PURE__ */ jsx21(
     "ul",
     {
       ref,
@@ -1499,7 +1715,7 @@ var StackedList = React8.forwardRef(
   )
 );
 StackedList.displayName = "StackedList";
-var StackedListItem = React8.forwardRef(
+var StackedListItem = React9.forwardRef(
   ({
     className,
     avatar,
@@ -1509,7 +1725,7 @@ var StackedListItem = React8.forwardRef(
     action,
     density = "default",
     ...props
-  }, ref) => /* @__PURE__ */ jsxs13(
+  }, ref) => /* @__PURE__ */ jsxs14(
     "li",
     {
       ref,
@@ -1520,9 +1736,9 @@ var StackedListItem = React8.forwardRef(
       ),
       ...props,
       children: [
-        avatar && /* @__PURE__ */ jsx19("div", { className: "flex-shrink-0", children: avatar }),
-        /* @__PURE__ */ jsxs13("div", { className: "min-w-0 flex-1", children: [
-          /* @__PURE__ */ jsx19(
+        avatar && /* @__PURE__ */ jsx21("div", { className: "flex-shrink-0", children: avatar }),
+        /* @__PURE__ */ jsxs14("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsx21(
             "p",
             {
               className: cn(
@@ -1532,7 +1748,7 @@ var StackedListItem = React8.forwardRef(
               children: title
             }
           ),
-          description && /* @__PURE__ */ jsx19(
+          description && /* @__PURE__ */ jsx21(
             "p",
             {
               className: cn(
@@ -1543,8 +1759,8 @@ var StackedListItem = React8.forwardRef(
             }
           )
         ] }),
-        meta && /* @__PURE__ */ jsx19("span", { className: "flex-shrink-0 text-sm text-muted-foreground", children: meta }),
-        action && /* @__PURE__ */ jsx19("div", { className: "flex-shrink-0", children: action })
+        meta && /* @__PURE__ */ jsx21("span", { className: "flex-shrink-0 text-sm text-muted-foreground", children: meta }),
+        action && /* @__PURE__ */ jsx21("div", { className: "flex-shrink-0", children: action })
       ]
     }
   )
@@ -1552,8 +1768,8 @@ var StackedListItem = React8.forwardRef(
 StackedListItem.displayName = "StackedListItem";
 
 // src/grid-list.tsx
-import * as React9 from "react";
-import { jsx as jsx20 } from "react/jsx-runtime";
+import * as React10 from "react";
+import { jsx as jsx22 } from "react/jsx-runtime";
 var COLUMN_CLASSES = {
   2: "grid-cols-1 sm:grid-cols-2",
   3: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
@@ -1564,8 +1780,8 @@ var GAP_CLASSES = {
   md: "gap-4",
   lg: "gap-6"
 };
-var GridList = React9.forwardRef(
-  ({ className, columns = 3, gap = "md", ...props }, ref) => /* @__PURE__ */ jsx20(
+var GridList = React10.forwardRef(
+  ({ className, columns = 3, gap = "md", ...props }, ref) => /* @__PURE__ */ jsx22(
     "div",
     {
       ref,
@@ -1580,13 +1796,13 @@ var GridList = React9.forwardRef(
   )
 );
 GridList.displayName = "GridList";
-var GridListItem = React9.forwardRef(
-  ({ className, hoverable = false, ...props }, ref) => /* @__PURE__ */ jsx20(
+var GridListItem = React10.forwardRef(
+  ({ className, hoverable = false, ...props }, ref) => /* @__PURE__ */ jsx22(
     "div",
     {
       ref,
       className: cn(
-        "rounded-lg border bg-card p-4 text-card-foreground shadow-sm",
+        "rounded-lg border border-border bg-card p-4 text-card-foreground shadow-sm",
         hoverable && "duration-fast cursor-pointer transition-shadow hover:shadow-md",
         className
       ),
@@ -1597,8 +1813,8 @@ var GridListItem = React9.forwardRef(
 GridListItem.displayName = "GridListItem";
 
 // src/pagination.tsx
-import * as React10 from "react";
-import { jsx as jsx21, jsxs as jsxs14 } from "react/jsx-runtime";
+import * as React11 from "react";
+import { jsx as jsx23, jsxs as jsxs15 } from "react/jsx-runtime";
 function getPageRange(current, total, siblings) {
   const range = [];
   const left = Math.max(2, current - siblings);
@@ -1610,7 +1826,7 @@ function getPageRange(current, total, siblings) {
   if (total > 1) range.push(total);
   return range;
 }
-var PaginationButton = React10.forwardRef(({ className, active, disabled, ...props }, ref) => /* @__PURE__ */ jsx21(
+var PaginationButton = React11.forwardRef(({ className, active, disabled, ...props }, ref) => /* @__PURE__ */ jsx23(
   "button",
   {
     ref,
@@ -1618,7 +1834,7 @@ var PaginationButton = React10.forwardRef(({ className, active, disabled, ...pro
     disabled,
     className: cn(
       "inline-flex h-9 min-w-9 items-center justify-center rounded-md px-3 text-sm font-medium transition-colors",
-      active ? "bg-primary text-primary-foreground" : "bg-background text-foreground hover:bg-muted",
+      active ? "bg-primary-solid text-primary-foreground" : "bg-background text-foreground hover:bg-muted",
       disabled && "opacity-disabled pointer-events-none",
       "border border-input",
       className
@@ -1627,7 +1843,7 @@ var PaginationButton = React10.forwardRef(({ className, active, disabled, ...pro
   }
 ));
 PaginationButton.displayName = "PaginationButton";
-var Pagination = React10.forwardRef(
+var Pagination = React11.forwardRef(
   ({
     className,
     currentPage,
@@ -1643,7 +1859,7 @@ var Pagination = React10.forwardRef(
       }
     };
     if (variant === "simple") {
-      return /* @__PURE__ */ jsxs14(
+      return /* @__PURE__ */ jsxs15(
         "nav",
         {
           ref,
@@ -1651,7 +1867,7 @@ var Pagination = React10.forwardRef(
           className: cn("flex items-center justify-between", className),
           ...props,
           children: [
-            /* @__PURE__ */ jsx21(
+            /* @__PURE__ */ jsx23(
               PaginationButton,
               {
                 onClick: () => handleChange(currentPage - 1),
@@ -1659,13 +1875,13 @@ var Pagination = React10.forwardRef(
                 children: "Previous"
               }
             ),
-            /* @__PURE__ */ jsxs14("span", { className: "text-sm text-muted-foreground", children: [
+            /* @__PURE__ */ jsxs15("span", { className: "text-sm text-muted-foreground", children: [
               "Page ",
               currentPage,
               " of ",
               totalPages
             ] }),
-            /* @__PURE__ */ jsx21(
+            /* @__PURE__ */ jsx23(
               PaginationButton,
               {
                 onClick: () => handleChange(currentPage + 1),
@@ -1678,7 +1894,7 @@ var Pagination = React10.forwardRef(
       );
     }
     const pages = getPageRange(currentPage, totalPages, siblingCount);
-    return /* @__PURE__ */ jsxs14(
+    return /* @__PURE__ */ jsxs15(
       "nav",
       {
         ref,
@@ -1690,7 +1906,7 @@ var Pagination = React10.forwardRef(
         ),
         ...props,
         children: [
-          /* @__PURE__ */ jsx21(
+          /* @__PURE__ */ jsx23(
             PaginationButton,
             {
               onClick: () => handleChange(currentPage - 1),
@@ -1699,14 +1915,14 @@ var Pagination = React10.forwardRef(
             }
           ),
           pages.map(
-            (page, i) => page === "ellipsis" ? /* @__PURE__ */ jsx21(
+            (page, i) => page === "ellipsis" ? /* @__PURE__ */ jsx23(
               "span",
               {
                 className: "inline-flex h-9 min-w-9 items-center justify-center text-sm text-muted-foreground",
                 children: "..."
               },
               `ellipsis-${i}`
-            ) : /* @__PURE__ */ jsx21(
+            ) : /* @__PURE__ */ jsx23(
               PaginationButton,
               {
                 active: page === currentPage,
@@ -1716,7 +1932,7 @@ var Pagination = React10.forwardRef(
               page
             )
           ),
-          /* @__PURE__ */ jsx21(
+          /* @__PURE__ */ jsx23(
             PaginationButton,
             {
               onClick: () => handleChange(currentPage + 1),
@@ -1732,9 +1948,16 @@ var Pagination = React10.forwardRef(
 Pagination.displayName = "Pagination";
 
 // src/stepper.tsx
-import * as React11 from "react";
-import { jsx as jsx22, jsxs as jsxs15 } from "react/jsx-runtime";
-var StepContext = React11.createContext({
+import * as React12 from "react";
+
+// src/scroll-hint.ts
+var SCROLL_HINT_X = "pr-6 [mask-image:linear-gradient(to_right,black_calc(100%-1.5rem),transparent)]";
+var SCROLL_HINT_Y = "[container-type:scroll-state]";
+var SCROLL_HINT_Y_MARK = "pointer-events-none sticky bottom-1 -mt-7 flex h-6 justify-center supports-[container-type:scroll-state]:[@container_not_scroll-state(scrollable:bottom)]:hidden";
+
+// src/stepper.tsx
+import { jsx as jsx24, jsxs as jsxs16 } from "react/jsx-runtime";
+var StepContext = React12.createContext({
   index: 0,
   activeStep: 0,
   isLast: false,
@@ -1751,7 +1974,7 @@ var LABEL_SIZE = {
   md: "text-sm",
   lg: "text-base"
 };
-var StepperStep = React11.forwardRef(
+var StepperStep = React12.forwardRef(
   ({
     className,
     label,
@@ -1763,26 +1986,28 @@ var StepperStep = React11.forwardRef(
     href,
     ...props
   }, ref) => {
-    const { index, activeStep, isLast, variant, size } = React11.useContext(StepContext);
+    const { index, activeStep, isLast, variant, size } = React12.useContext(StepContext);
     const status = error ? "error" : disabled ? "disabled" : index < activeStep || completed ? "complete" : index === activeStep ? "current" : "upcoming";
     const isCurrent = index === activeStep && !error && !disabled;
-    const indicator = /* @__PURE__ */ jsx22(
+    const indicator = /* @__PURE__ */ jsx24(
       "div",
       {
         className: cn(
           "flex items-center justify-center rounded-full font-medium",
           INDICATOR_SIZE[size],
-          status === "complete" && "bg-primary text-primary-foreground",
-          status === "current" && "border-2 border-primary bg-background text-primary",
+          status === "complete" && "bg-primary-solid text-primary-foreground",
+          status === "current" && "text-primary-text border-2 border-primary bg-background",
           status === "upcoming" && "border-2 border-border bg-background text-muted-foreground dark:border-border dark:bg-background dark:text-muted-foreground",
-          status === "error" && "border-intent-error bg-intent-error/10 text-intent-error dark:border-intent-error dark:text-intent-error border-2",
-          status === "disabled" && "border-2 border-muted bg-muted text-muted-foreground opacity-50"
+          status === "error" && "border-intent-error bg-intent-error/10 text-intent-error-foreground dark:border-intent-error dark:text-intent-error-foreground border-2",
+          // the step row is already faded (`opacity-50`); fading the circle
+          // again drew it at a quarter (W0 #5823)
+          status === "disabled" && "border-2 border-muted bg-muted text-muted-foreground"
         ),
         children: icon ?? (status === "complete" ? "\u2713" : status === "error" ? "!" : index + 1)
       }
     );
     if (variant === "vertical") {
-      return /* @__PURE__ */ jsxs15(
+      return /* @__PURE__ */ jsxs16(
         "div",
         {
           ref,
@@ -1792,51 +2017,53 @@ var StepperStep = React11.forwardRef(
           className: cn("flex gap-3", disabled && "opacity-50", className),
           ...props,
           children: [
-            /* @__PURE__ */ jsxs15("div", { className: "flex flex-col items-center", children: [
+            /* @__PURE__ */ jsxs16("div", { className: "flex flex-col items-center", children: [
               indicator,
-              !isLast && /* @__PURE__ */ jsx22(
+              !isLast && /* @__PURE__ */ jsx24(
                 "div",
                 {
                   className: cn(
-                    "mt-1 w-0.5 flex-1",
+                    // circle to circle: no gap above, none below (the next
+                    // step's circle starts where this row ends)
+                    "w-0.5 flex-1",
                     status === "complete" ? "bg-primary" : "bg-muted"
                   )
                 }
               )
             ] }),
-            /* @__PURE__ */ jsxs15("div", { className: "pb-6", children: [
-              /* @__PURE__ */ jsx22(
+            /* @__PURE__ */ jsxs16("div", { className: "pb-6", children: [
+              /* @__PURE__ */ jsx24(
                 "p",
                 {
                   className: cn(
                     "font-medium",
                     LABEL_SIZE[size],
-                    status === "error" ? "text-intent-error dark:text-intent-error" : status === "upcoming" || status === "disabled" ? "text-muted-foreground" : "text-foreground"
+                    status === "error" ? "text-intent-error-foreground dark:text-intent-error-foreground" : status === "upcoming" || status === "disabled" ? "text-muted-foreground" : "text-foreground"
                   ),
                   children: label
                 }
               ),
-              description && /* @__PURE__ */ jsx22("p", { className: "mt-0.5 text-xs text-muted-foreground", children: description })
+              description && /* @__PURE__ */ jsx24("p", { className: "mt-0.5 text-xs text-muted-foreground", children: description })
             ] })
           ]
         }
       );
     }
-    const stepContent = /* @__PURE__ */ jsxs15("div", { className: "flex items-center gap-2", children: [
+    const stepContent = /* @__PURE__ */ jsxs16("div", { className: "flex items-center gap-2", children: [
       indicator,
-      /* @__PURE__ */ jsx22(
+      /* @__PURE__ */ jsx24(
         "span",
         {
           className: cn(
             "whitespace-nowrap font-medium",
             LABEL_SIZE[size],
-            status === "error" ? "text-intent-error dark:text-intent-error" : status === "upcoming" || status === "disabled" ? "text-muted-foreground dark:text-muted-foreground" : "text-foreground dark:text-foreground"
+            status === "error" ? "text-intent-error-foreground dark:text-intent-error-foreground" : status === "upcoming" || status === "disabled" ? "text-muted-foreground dark:text-muted-foreground" : "text-foreground dark:text-foreground"
           ),
           children: label
         }
       )
     ] });
-    return /* @__PURE__ */ jsxs15(
+    return /* @__PURE__ */ jsxs16(
       "div",
       {
         ref,
@@ -1846,7 +2073,7 @@ var StepperStep = React11.forwardRef(
         className: cn("flex items-center", className),
         ...props,
         children: [
-          href && !disabled ? /* @__PURE__ */ jsx22(
+          href && !disabled ? /* @__PURE__ */ jsx24(
             "a",
             {
               href,
@@ -1855,7 +2082,7 @@ var StepperStep = React11.forwardRef(
               children: stepContent
             }
           ) : stepContent,
-          !isLast && /* @__PURE__ */ jsx22(
+          !isLast && /* @__PURE__ */ jsx24(
             "div",
             {
               className: cn(
@@ -1870,7 +2097,7 @@ var StepperStep = React11.forwardRef(
   }
 );
 StepperStep.displayName = "StepperStep";
-var Stepper = React11.forwardRef(
+var Stepper = React12.forwardRef(
   ({
     className,
     variant = "horizontal",
@@ -1879,18 +2106,19 @@ var Stepper = React11.forwardRef(
     children,
     ...props
   }, ref) => {
-    const steps = React11.Children.toArray(children);
-    return /* @__PURE__ */ jsx22(
+    const steps = React12.Children.toArray(children);
+    return /* @__PURE__ */ jsx24(
       "div",
       {
         ref,
         role: "list",
         className: cn(
-          variant === "horizontal" ? "flex items-center" : "flex flex-col",
+          // horizontal: scrolls on a narrow screen, never runs off the page
+          variant === "horizontal" ? cn("flex items-center overflow-x-auto", SCROLL_HINT_X) : "flex flex-col",
           className
         ),
         ...props,
-        children: steps.map((child, i) => /* @__PURE__ */ jsx22(
+        children: steps.map((child, i) => /* @__PURE__ */ jsx24(
           StepContext.Provider,
           {
             value: {
@@ -1911,14 +2139,14 @@ var Stepper = React11.forwardRef(
 Stepper.displayName = "Stepper";
 
 // src/command-palette.tsx
-import * as React12 from "react";
-import { Fragment as Fragment3, jsx as jsx23, jsxs as jsxs16 } from "react/jsx-runtime";
+import * as React13 from "react";
+import { Fragment as Fragment4, jsx as jsx25, jsxs as jsxs17 } from "react/jsx-runtime";
 var SIZE_CLASSES = {
   sm: "max-w-sm",
   md: "max-w-lg",
   lg: "max-w-2xl"
 };
-var CommandPalette = React12.forwardRef(
+var CommandPalette = React13.forwardRef(
   ({
     className,
     open,
@@ -1929,9 +2157,9 @@ var CommandPalette = React12.forwardRef(
     size = "md",
     ...props
   }, ref) => {
-    const [query, setQuery] = React12.useState("");
-    const [activeIndex, setActiveIndex] = React12.useState(0);
-    React12.useEffect(() => {
+    const [query, setQuery] = React13.useState("");
+    const [activeIndex, setActiveIndex] = React13.useState(0);
+    React13.useEffect(() => {
       if (!open) return;
       const handler = (e) => {
         if (e.key === "Escape") onClose?.();
@@ -1951,7 +2179,7 @@ var CommandPalette = React12.forwardRef(
       document.addEventListener("keydown", handler);
       return () => document.removeEventListener("keydown", handler);
     }, [open, onClose, results, activeIndex]);
-    React12.useEffect(() => {
+    React13.useEffect(() => {
       setActiveIndex(0);
     }, [query]);
     if (!open) return null;
@@ -1964,15 +2192,15 @@ var CommandPalette = React12.forwardRef(
       },
       {}
     );
-    return /* @__PURE__ */ jsxs16(Fragment3, { children: [
-      /* @__PURE__ */ jsx23(
+    return /* @__PURE__ */ jsxs17(Fragment4, { children: [
+      /* @__PURE__ */ jsx25(
         "div",
         {
           className: "z-modal fixed inset-0 bg-foreground/60",
           onClick: onClose
         }
       ),
-      /* @__PURE__ */ jsx23("div", { className: "z-modal fixed inset-0 flex items-start justify-center pt-[15vh]", children: /* @__PURE__ */ jsxs16(
+      /* @__PURE__ */ jsx25("div", { className: "z-modal fixed inset-0 flex items-start justify-center pt-[15vh]", children: /* @__PURE__ */ jsxs17(
         "div",
         {
           ref,
@@ -1983,9 +2211,9 @@ var CommandPalette = React12.forwardRef(
           ),
           ...props,
           children: [
-            /* @__PURE__ */ jsxs16("div", { className: "flex items-center border-b border-border px-4", children: [
-              /* @__PURE__ */ jsx23("span", { className: "mr-2 text-muted-foreground", children: "\u2318" }),
-              /* @__PURE__ */ jsx23(
+            /* @__PURE__ */ jsxs17("div", { className: "flex items-center border-b border-border px-4", children: [
+              /* @__PURE__ */ jsx25("span", { className: "mr-2 text-muted-foreground", children: "\u2318" }),
+              /* @__PURE__ */ jsx25(
                 "input",
                 {
                   type: "text",
@@ -1999,13 +2227,13 @@ var CommandPalette = React12.forwardRef(
                   autoFocus: true
                 }
               ),
-              /* @__PURE__ */ jsx23("kbd", { className: "rounded border border-border px-1.5 py-0.5 text-xs text-muted-foreground", children: "Esc" })
+              /* @__PURE__ */ jsx25("kbd", { className: "rounded border border-border px-1.5 py-0.5 text-xs text-muted-foreground", children: "Esc" })
             ] }),
-            /* @__PURE__ */ jsx23("div", { className: "max-h-80 overflow-y-auto p-2", children: Object.entries(grouped).length === 0 ? /* @__PURE__ */ jsx23("p", { className: "py-6 text-center text-sm text-muted-foreground", children: "No results found" }) : Object.entries(grouped).map(([group, items]) => /* @__PURE__ */ jsxs16("div", { children: [
-              /* @__PURE__ */ jsx23("p", { className: "px-2 py-1.5 text-xs font-medium text-muted-foreground", children: group }),
+            /* @__PURE__ */ jsx25("div", { className: "max-h-80 overflow-y-auto p-2", children: Object.entries(grouped).length === 0 ? /* @__PURE__ */ jsx25("p", { className: "py-6 text-center text-sm text-muted-foreground", children: "No results found" }) : Object.entries(grouped).map(([group, items]) => /* @__PURE__ */ jsxs17("div", { children: [
+              /* @__PURE__ */ jsx25("p", { className: "px-2 py-1.5 text-xs font-medium text-muted-foreground", children: group }),
               items.map((item) => {
                 const idx = results.indexOf(item);
-                return /* @__PURE__ */ jsxs16(
+                return /* @__PURE__ */ jsxs17(
                   "button",
                   {
                     type: "button",
@@ -2019,9 +2247,9 @@ var CommandPalette = React12.forwardRef(
                     },
                     onMouseEnter: () => setActiveIndex(idx),
                     children: [
-                      item.icon && /* @__PURE__ */ jsx23("span", { className: "flex-shrink-0 text-muted-foreground", children: item.icon }),
-                      /* @__PURE__ */ jsx23("span", { className: "flex-1", children: item.label }),
-                      item.shortcut && /* @__PURE__ */ jsx23("kbd", { className: "rounded border border-border px-1.5 py-0.5 text-xs text-muted-foreground", children: item.shortcut })
+                      item.icon && /* @__PURE__ */ jsx25("span", { className: "flex-shrink-0 text-muted-foreground", children: item.icon }),
+                      /* @__PURE__ */ jsx25("span", { className: "flex-1", children: item.label }),
+                      item.shortcut && /* @__PURE__ */ jsx25("kbd", { className: "rounded border border-border px-1.5 py-0.5 text-xs text-muted-foreground", children: item.shortcut })
                     ]
                   },
                   item.id
@@ -2037,9 +2265,9 @@ var CommandPalette = React12.forwardRef(
 CommandPalette.displayName = "CommandPalette";
 
 // src/app-shell.tsx
-import * as React13 from "react";
-import { jsx as jsx24, jsxs as jsxs17 } from "react/jsx-runtime";
-var AppShell = React13.forwardRef(
+import * as React14 from "react";
+import { jsx as jsx26, jsxs as jsxs18 } from "react/jsx-runtime";
+var AppShell = React14.forwardRef(
   ({
     className,
     variant = "stacked",
@@ -2048,11 +2276,13 @@ var AppShell = React13.forwardRef(
     header,
     sidebar,
     detailPanel,
+    navLabel = "Navigation",
+    defaultNavOpen = false,
     children,
     ...props
   }, ref) => {
     if (variant === "stacked") {
-      return /* @__PURE__ */ jsxs17(
+      return /* @__PURE__ */ jsxs18(
         "div",
         {
           ref,
@@ -2060,71 +2290,86 @@ var AppShell = React13.forwardRef(
           ...props,
           children: [
             header,
-            /* @__PURE__ */ jsx24("main", { className: "flex-1", children })
+            /* @__PURE__ */ jsx26("main", { className: "flex-1", children })
           ]
         }
       );
     }
     if (variant === "multi-column") {
-      return /* @__PURE__ */ jsxs17(
+      return /* @__PURE__ */ jsxs18(
         "div",
         {
           ref,
-          className: cn("flex min-h-screen bg-background", className),
+          className: cn(
+            "flex min-h-screen flex-col bg-background md:flex-row",
+            className
+          ),
           ...props,
           children: [
-            sidebar && /* @__PURE__ */ jsx24(
+            sidebar && /* @__PURE__ */ jsx26(
               "aside",
               {
                 className: cn(
-                  "flex-shrink-0 border-r border-border bg-card",
-                  sidebarCollapsed ? "w-16" : "w-60"
+                  "flex-shrink-0 border-b border-border bg-card md:border-b-0 md:border-r",
+                  sidebarCollapsed ? "md:w-16" : "md:w-60"
                 ),
                 children: sidebar
               }
             ),
-            /* @__PURE__ */ jsxs17("div", { className: "flex flex-1 flex-col", children: [
+            /* @__PURE__ */ jsxs18("div", { className: "flex min-w-0 flex-1 flex-col", children: [
               header,
-              /* @__PURE__ */ jsxs17("div", { className: "flex flex-1", children: [
-                /* @__PURE__ */ jsx24("main", { className: "flex-1 overflow-y-auto", children }),
-                detailPanel && /* @__PURE__ */ jsx24("aside", { className: "w-80 flex-shrink-0 border-l border-border bg-card", children: detailPanel })
+              /* @__PURE__ */ jsxs18("div", { className: "flex flex-1 flex-col lg:flex-row", children: [
+                /* @__PURE__ */ jsx26("main", { className: "min-w-0 flex-1 overflow-y-auto", children }),
+                detailPanel && /* @__PURE__ */ jsx26("aside", { className: "flex-shrink-0 border-t border-border bg-card lg:w-80 lg:border-l lg:border-t-0", children: detailPanel })
               ] })
             ] })
           ]
         }
       );
     }
-    return /* @__PURE__ */ jsxs17(
+    const left = sidebarPosition === "left";
+    const column = sidebar && /* @__PURE__ */ jsx26(
+      "aside",
+      {
+        className: cn(
+          "hidden flex-shrink-0 bg-card transition-all md:block",
+          left ? "border-r border-border" : "border-l border-border",
+          sidebarCollapsed ? "w-16" : "w-60"
+        ),
+        children: sidebar
+      }
+    );
+    return /* @__PURE__ */ jsxs18(
       "div",
       {
         ref,
         className: cn("flex min-h-screen bg-background", className),
         ...props,
         children: [
-          sidebarPosition === "left" && sidebar && /* @__PURE__ */ jsx24(
-            "aside",
-            {
-              className: cn(
-                "flex-shrink-0 border-r border-border bg-card transition-all",
-                sidebarCollapsed ? "w-16" : "w-60"
-              ),
-              children: sidebar
-            }
-          ),
-          /* @__PURE__ */ jsxs17("div", { className: "flex flex-1 flex-col", children: [
+          left && column,
+          /* @__PURE__ */ jsxs18("div", { className: "flex min-w-0 flex-1 flex-col", children: [
+            sidebar && /* @__PURE__ */ jsx26(
+              "div",
+              {
+                className: cn(
+                  "flex items-center border-b border-border bg-card px-2 py-2 md:hidden",
+                  !left && "justify-end"
+                ),
+                children: /* @__PURE__ */ jsx26(
+                  NavDrawer,
+                  {
+                    label: navLabel,
+                    side: left ? "left" : "right",
+                    defaultOpen: defaultNavOpen,
+                    children: sidebar
+                  }
+                )
+              }
+            ),
             header,
-            /* @__PURE__ */ jsx24("main", { className: "flex-1 overflow-y-auto", children })
+            /* @__PURE__ */ jsx26("main", { className: "min-w-0 flex-1 overflow-y-auto", children })
           ] }),
-          sidebarPosition === "right" && sidebar && /* @__PURE__ */ jsx24(
-            "aside",
-            {
-              className: cn(
-                "flex-shrink-0 border-l border-border bg-card transition-all",
-                sidebarCollapsed ? "w-16" : "w-60"
-              ),
-              children: sidebar
-            }
-          )
+          !left && column
         ]
       }
     );
@@ -2133,8 +2378,8 @@ var AppShell = React13.forwardRef(
 AppShell.displayName = "AppShell";
 
 // src/popover.tsx
-import * as React14 from "react";
-import { Fragment as Fragment4, jsx as jsx25, jsxs as jsxs18 } from "react/jsx-runtime";
+import * as React15 from "react";
+import { Fragment as Fragment5, jsx as jsx27, jsxs as jsxs19 } from "react/jsx-runtime";
 var SIDE_CLASSES = {
   top: "bottom-full mb-2",
   bottom: "top-full mt-2",
@@ -2146,7 +2391,7 @@ var ALIGN_CLASSES = {
   center: "left-1/2 -translate-x-1/2",
   end: "right-0"
 };
-var Popover = React14.forwardRef(
+var Popover = React15.forwardRef(
   ({
     className,
     open,
@@ -2157,10 +2402,10 @@ var Popover = React14.forwardRef(
     children,
     ...props
   }, ref) => {
-    const [internalOpen, setInternalOpen] = React14.useState(false);
+    const [internalOpen, setInternalOpen] = React15.useState(false);
     const isOpen = open ?? internalOpen;
     const setOpen = onOpenChange ?? setInternalOpen;
-    React14.useEffect(() => {
+    React15.useEffect(() => {
       if (!isOpen) return;
       const handler = (e) => {
         if (e.key === "Escape") setOpen(false);
@@ -2168,23 +2413,23 @@ var Popover = React14.forwardRef(
       document.addEventListener("keydown", handler);
       return () => document.removeEventListener("keydown", handler);
     }, [isOpen, setOpen]);
-    return /* @__PURE__ */ jsxs18(
+    return /* @__PURE__ */ jsxs19(
       "div",
       {
         ref,
         className: cn("relative inline-block", className),
         ...props,
         children: [
-          /* @__PURE__ */ jsx25("div", { onClick: () => setOpen(!isOpen), children: trigger }),
-          isOpen && /* @__PURE__ */ jsxs18(Fragment4, { children: [
-            /* @__PURE__ */ jsx25(
+          /* @__PURE__ */ jsx27("div", { onClick: () => setOpen(!isOpen), children: trigger }),
+          isOpen && /* @__PURE__ */ jsxs19(Fragment5, { children: [
+            /* @__PURE__ */ jsx27(
               "div",
               {
                 className: "z-popover fixed inset-0",
                 onClick: () => setOpen(false)
               }
             ),
-            /* @__PURE__ */ jsx25(
+            /* @__PURE__ */ jsx27(
               "div",
               {
                 className: cn(
@@ -2202,7 +2447,7 @@ var Popover = React14.forwardRef(
   }
 );
 Popover.displayName = "Popover";
-var HoverCard = React14.forwardRef(
+var HoverCard = React15.forwardRef(
   ({
     className,
     trigger,
@@ -2212,8 +2457,8 @@ var HoverCard = React14.forwardRef(
     children,
     ...props
   }, ref) => {
-    const [open, setOpen] = React14.useState(false);
-    const timeoutRef = React14.useRef();
+    const [open, setOpen] = React15.useState(false);
+    const timeoutRef = React15.useRef();
     const handleEnter = () => {
       clearTimeout(timeoutRef.current);
       timeoutRef.current = setTimeout(() => setOpen(true), delay);
@@ -2222,10 +2467,10 @@ var HoverCard = React14.forwardRef(
       clearTimeout(timeoutRef.current);
       timeoutRef.current = setTimeout(() => setOpen(false), 150);
     };
-    React14.useEffect(() => {
+    React15.useEffect(() => {
       return () => clearTimeout(timeoutRef.current);
     }, []);
-    return /* @__PURE__ */ jsxs18(
+    return /* @__PURE__ */ jsxs19(
       "div",
       {
         ref,
@@ -2235,7 +2480,7 @@ var HoverCard = React14.forwardRef(
         ...props,
         children: [
           trigger,
-          open && /* @__PURE__ */ jsx25(
+          open && /* @__PURE__ */ jsx27(
             "div",
             {
               className: cn(
@@ -2256,8 +2501,8 @@ var HoverCard = React14.forwardRef(
 HoverCard.displayName = "HoverCard";
 
 // src/calendar.tsx
-import * as React15 from "react";
-import { Fragment as Fragment5, jsx as jsx26, jsxs as jsxs19 } from "react/jsx-runtime";
+import * as React16 from "react";
+import { Fragment as Fragment6, jsx as jsx28, jsxs as jsxs20 } from "react/jsx-runtime";
 function getDaysInMonth(year, month) {
   return new Date(year, month + 1, 0).getDate();
 }
@@ -2295,7 +2540,7 @@ var SIZE_CONFIG = {
     dot: "h-1.5 w-1.5"
   }
 };
-var Calendar = React15.forwardRef(
+var Calendar2 = React16.forwardRef(
   ({
     className,
     value,
@@ -2311,16 +2556,16 @@ var Calendar = React15.forwardRef(
     size = "md",
     ...props
   }, ref) => {
-    const today = React15.useMemo(() => {
+    const today = React16.useMemo(() => {
       if (todayProp) return todayProp;
       const now = Date.now();
       const d = new Date(now);
       return new Date(d.getFullYear(), d.getMonth(), d.getDate());
     }, [todayProp]);
     const initialDate = value ?? rangeStart ?? today;
-    const [viewYear, setViewYear] = React15.useState(initialDate.getFullYear());
-    const [viewMonth, setViewMonth] = React15.useState(initialDate.getMonth());
-    const [focusedDay, setFocusedDay] = React15.useState(null);
+    const [viewYear, setViewYear] = React16.useState(initialDate.getFullYear());
+    const [viewMonth, setViewMonth] = React16.useState(initialDate.getMonth());
+    const [focusedDay, setFocusedDay] = React16.useState(null);
     const daysInMonth = getDaysInMonth(viewYear, viewMonth);
     const startDay = getStartDayOfWeek(viewYear, viewMonth);
     const config = SIZE_CONFIG[size];
@@ -2454,7 +2699,7 @@ var Calendar = React15.forwardRef(
     const cells = [];
     for (let i = 0; i < startDay; i++) cells.push(null);
     for (let d = 1; d <= daysInMonth; d++) cells.push(d);
-    return /* @__PURE__ */ jsxs19(
+    return /* @__PURE__ */ jsxs20(
       "div",
       {
         ref,
@@ -2469,8 +2714,8 @@ var Calendar = React15.forwardRef(
         ),
         ...props,
         children: [
-          /* @__PURE__ */ jsxs19("div", { className: "mb-2 flex items-center justify-between", children: [
-            /* @__PURE__ */ jsx26(
+          /* @__PURE__ */ jsxs20("div", { className: "mb-2 flex items-center justify-between", children: [
+            /* @__PURE__ */ jsx28(
               "button",
               {
                 type: "button",
@@ -2481,7 +2726,7 @@ var Calendar = React15.forwardRef(
                 children: "\u2039"
               }
             ),
-            /* @__PURE__ */ jsx26(
+            /* @__PURE__ */ jsx28(
               "span",
               {
                 className: "text-sm font-medium text-foreground",
@@ -2489,7 +2734,7 @@ var Calendar = React15.forwardRef(
                 children: formatMonth(viewYear, viewMonth)
               }
             ),
-            /* @__PURE__ */ jsx26(
+            /* @__PURE__ */ jsx28(
               "button",
               {
                 type: "button",
@@ -2501,7 +2746,7 @@ var Calendar = React15.forwardRef(
               }
             )
           ] }),
-          /* @__PURE__ */ jsx26("div", { role: "row", className: cn("grid grid-cols-7", config.gap), children: WEEKDAYS.map((day) => /* @__PURE__ */ jsx26(
+          /* @__PURE__ */ jsx28("div", { role: "row", className: cn("grid grid-cols-7", config.gap), children: WEEKDAYS.map((day) => /* @__PURE__ */ jsx28(
             "div",
             {
               role: "columnheader",
@@ -2513,9 +2758,9 @@ var Calendar = React15.forwardRef(
             },
             day
           )) }),
-          /* @__PURE__ */ jsx26("div", { className: cn("grid grid-cols-7", config.gap), children: cells.map((day, i) => {
+          /* @__PURE__ */ jsx28("div", { className: cn("grid grid-cols-7", config.gap), children: cells.map((day, i) => {
             if (day === null) {
-              return /* @__PURE__ */ jsx26("div", { className: config.cell }, `empty-${i}`);
+              return /* @__PURE__ */ jsx28("div", { className: config.cell }, `empty-${i}`);
             }
             const date = new Date(viewYear, viewMonth, day);
             const disabled = isDisabled(day);
@@ -2538,7 +2783,7 @@ var Calendar = React15.forwardRef(
             }
             const isToday = isSameDay(date, today);
             const eventDot = hasEvent(day);
-            return /* @__PURE__ */ jsxs19(
+            return /* @__PURE__ */ jsxs20(
               "button",
               {
                 type: "button",
@@ -2553,11 +2798,11 @@ var Calendar = React15.forwardRef(
                   config.cell,
                   disabled && "pointer-events-none opacity-50",
                   isFocused && "ring-2 ring-ring",
-                  isSelected || isRangeEndpoint ? "bg-primary font-semibold text-primary-foreground" : isInRange ? "bg-primary/10 font-medium text-foreground" : isToday ? "bg-muted font-semibold text-foreground" : "text-foreground hover:bg-muted"
+                  isSelected || isRangeEndpoint ? "bg-primary-solid font-semibold text-primary-foreground" : isInRange ? "bg-primary/10 font-medium text-foreground" : isToday ? "bg-muted font-semibold text-foreground" : "text-foreground hover:bg-muted"
                 ),
                 children: [
                   day,
-                  eventDot && /* @__PURE__ */ jsx26(
+                  eventDot && /* @__PURE__ */ jsx28(
                     "span",
                     {
                       className: cn(
@@ -2576,8 +2821,8 @@ var Calendar = React15.forwardRef(
     );
   }
 );
-Calendar.displayName = "Calendar";
-var DatePicker = React15.forwardRef(
+Calendar2.displayName = "Calendar";
+var DatePicker = React16.forwardRef(
   ({
     className,
     variant = "single",
@@ -2596,7 +2841,7 @@ var DatePicker = React15.forwardRef(
     disabled,
     ...props
   }, ref) => {
-    const [internalOpen, setInternalOpen] = React15.useState(false);
+    const [internalOpen, setInternalOpen] = React16.useState(false);
     const isOpen = controlledOpen ?? internalOpen;
     const setOpen = onOpenChange ?? setInternalOpen;
     const defaultPlaceholder = variant === "range" ? "Pick a date range" : "Pick a date";
@@ -2620,7 +2865,7 @@ var DatePicker = React15.forwardRef(
     } else if (variant === "range" && rangeStart) {
       displayText = rangeEnd ? `${formatDateForInput(rangeStart)} \u2013 ${formatDateForInput(rangeEnd)}` : formatDateForInput(rangeStart);
     }
-    return /* @__PURE__ */ jsxs19(
+    return /* @__PURE__ */ jsxs20(
       "div",
       {
         ref,
@@ -2628,7 +2873,7 @@ var DatePicker = React15.forwardRef(
         onKeyDown: handleKeyDown,
         ...props,
         children: [
-          /* @__PURE__ */ jsxs19(
+          /* @__PURE__ */ jsxs20(
             "button",
             {
               type: "button",
@@ -2641,22 +2886,22 @@ var DatePicker = React15.forwardRef(
                 displayText ? "text-foreground" : "text-muted-foreground"
               ),
               children: [
-                /* @__PURE__ */ jsx26("span", { className: "text-muted-foreground", "aria-hidden": "true", children: "\u{1F4C5}" }),
-                /* @__PURE__ */ jsx26("span", { className: "flex-1 text-left", children: displayText ?? placeholder ?? defaultPlaceholder }),
-                /* @__PURE__ */ jsx26("span", { className: "text-muted-foreground", "aria-hidden": "true", children: "\u25BE" })
+                /* @__PURE__ */ jsx28("span", { className: "text-muted-foreground", "aria-hidden": "true", children: "\u{1F4C5}" }),
+                /* @__PURE__ */ jsx28("span", { className: "flex-1 text-left", children: displayText ?? placeholder ?? defaultPlaceholder }),
+                /* @__PURE__ */ jsx28("span", { className: "text-muted-foreground", "aria-hidden": "true", children: "\u25BE" })
               ]
             }
           ),
-          isOpen && /* @__PURE__ */ jsxs19(Fragment5, { children: [
-            /* @__PURE__ */ jsx26(
+          isOpen && /* @__PURE__ */ jsxs20(Fragment6, { children: [
+            /* @__PURE__ */ jsx28(
               "div",
               {
                 className: "z-popover fixed inset-0",
                 onClick: () => setOpen(false)
               }
             ),
-            /* @__PURE__ */ jsx26("div", { className: "z-popover absolute left-0 top-full mt-1", children: /* @__PURE__ */ jsx26(
-              Calendar,
+            /* @__PURE__ */ jsx28("div", { className: "z-popover absolute left-0 top-full mt-1", children: /* @__PURE__ */ jsx28(
+              Calendar2,
               {
                 selectionMode: variant,
                 value: variant === "single" ? value : void 0,
@@ -2679,9 +2924,9 @@ var DatePicker = React15.forwardRef(
 DatePicker.displayName = "DatePicker";
 
 // src/navbar.tsx
-import * as React16 from "react";
-import { jsx as jsx27, jsxs as jsxs20 } from "react/jsx-runtime";
-var Navbar = React16.forwardRef(
+import * as React17 from "react";
+import { jsx as jsx29, jsxs as jsxs21 } from "react/jsx-runtime";
+var Navbar = React17.forwardRef(
   ({
     className,
     variant = "simple",
@@ -2692,7 +2937,7 @@ var Navbar = React16.forwardRef(
     secondaryNav,
     children,
     ...props
-  }, ref) => /* @__PURE__ */ jsxs20(
+  }, ref) => /* @__PURE__ */ jsxs21(
     "header",
     {
       ref,
@@ -2703,35 +2948,39 @@ var Navbar = React16.forwardRef(
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsxs20("div", { className: "mx-auto flex h-14 max-w-content-xl items-center gap-4 px-4 sm:px-6", children: [
-          logo && /* @__PURE__ */ jsx27("div", { className: "flex-shrink-0", children: logo }),
-          /* @__PURE__ */ jsx27(
+        /* @__PURE__ */ jsxs21("div", { className: "mx-auto flex h-14 max-w-content-xl items-center gap-4 px-4 sm:px-6", children: [
+          logo && /* @__PURE__ */ jsx29("div", { className: "flex-shrink-0", children: logo }),
+          /* @__PURE__ */ jsx29(
             "nav",
             {
               className: cn(
-                "flex items-center gap-4",
-                variant === "centered" && "flex-1 justify-center"
+                // W0 (#5823): the links scroll on a narrow screen, never push
+                // the bar off the page
+                "flex min-w-0 items-center gap-4 overflow-x-auto",
+                variant === "centered" && "flex-1 [&>:first-child]:ml-auto [&>:last-child]:mr-auto",
+                SCROLL_HINT_X
+                // W1: a clipped link fades
               ),
               children
             }
           ),
-          variant === "withSearch" && search && /* @__PURE__ */ jsx27("div", { className: "flex-1 px-4", children: search }),
-          variant !== "centered" && variant !== "withSearch" && /* @__PURE__ */ jsx27("div", { className: "flex-1" }),
-          actions && /* @__PURE__ */ jsx27("div", { className: "flex items-center gap-2", children: actions })
+          variant === "withSearch" && search && /* @__PURE__ */ jsx29("div", { className: "min-w-0 flex-1 px-4", children: search }),
+          variant !== "centered" && variant !== "withSearch" && /* @__PURE__ */ jsx29("div", { className: "flex-1" }),
+          actions && /* @__PURE__ */ jsx29("div", { className: "flex shrink-0 items-center gap-2", children: actions })
         ] }),
-        variant === "twoLevel" && secondaryNav && /* @__PURE__ */ jsx27("div", { className: "border-t border-border", children: /* @__PURE__ */ jsx27("div", { className: "mx-auto flex max-w-content-xl items-center gap-4 px-4 py-2 sm:px-6", children: secondaryNav }) })
+        variant === "twoLevel" && secondaryNav && /* @__PURE__ */ jsx29("div", { className: "border-t border-border", children: /* @__PURE__ */ jsx29("div", { className: "mx-auto flex max-w-content-xl items-center gap-4 px-4 py-2 sm:px-6", children: secondaryNav }) })
       ]
     }
   )
 );
 Navbar.displayName = "Navbar";
-var NavbarLink = React16.forwardRef(
-  ({ className, active, ...props }, ref) => /* @__PURE__ */ jsx27(
+var NavbarLink = React17.forwardRef(
+  ({ className, active, ...props }, ref) => /* @__PURE__ */ jsx29(
     "a",
     {
       ref,
       className: cn(
-        "text-sm font-medium transition-colors",
+        "shrink-0 whitespace-nowrap text-sm font-medium transition-colors",
         active ? "text-foreground" : "text-muted-foreground hover:text-foreground",
         className
       ),
@@ -2742,10 +2991,25 @@ var NavbarLink = React16.forwardRef(
 NavbarLink.displayName = "NavbarLink";
 
 // src/card-variants.tsx
-import * as React17 from "react";
-import { jsx as jsx28, jsxs as jsxs21 } from "react/jsx-runtime";
-var HorizontalCard = React17.forwardRef(
-  ({ className, media, hoverable, children, ...props }, ref) => /* @__PURE__ */ jsxs21(
+import * as React18 from "react";
+
+// src/empty-value.tsx
+import { jsx as jsx30, jsxs as jsxs22 } from "react/jsx-runtime";
+var EMPTY_VALUE_GLYPH = "\u2014";
+function isEmptyValue(value) {
+  return value === null || value === void 0 || value === false || typeof value === "string" && value.trim() === "";
+}
+function EmptyValue({ className }) {
+  return /* @__PURE__ */ jsxs22("span", { "data-empty-value": true, className: cn("text-muted-foreground", className), children: [
+    /* @__PURE__ */ jsx30("span", { "aria-hidden": "true", children: EMPTY_VALUE_GLYPH }),
+    /* @__PURE__ */ jsx30("span", { className: "sr-only", children: "Not set" })
+  ] });
+}
+
+// src/card-variants.tsx
+import { jsx as jsx31, jsxs as jsxs23 } from "react/jsx-runtime";
+var HorizontalCard = React18.forwardRef(
+  ({ className, media, hoverable, children, ...props }, ref) => /* @__PURE__ */ jsxs23(
     "div",
     {
       ref,
@@ -2756,15 +3020,15 @@ var HorizontalCard = React17.forwardRef(
       ),
       ...props,
       children: [
-        media && /* @__PURE__ */ jsx28("div", { className: "flex-shrink-0", children: media }),
-        /* @__PURE__ */ jsx28("div", { className: "flex-1 p-4", children })
+        media && /* @__PURE__ */ jsx31("div", { className: "flex-shrink-0", children: media }),
+        /* @__PURE__ */ jsx31("div", { className: "flex-1 p-4", children })
       ]
     }
   )
 );
 HorizontalCard.displayName = "HorizontalCard";
-var ImageCard = React17.forwardRef(
-  ({ className, imageSrc, imageAlt, hoverable, children, ...props }, ref) => /* @__PURE__ */ jsxs21(
+var ImageCard = React18.forwardRef(
+  ({ className, imageSrc, imageAlt, hoverable, children, ...props }, ref) => /* @__PURE__ */ jsxs23(
     "div",
     {
       ref,
@@ -2775,7 +3039,7 @@ var ImageCard = React17.forwardRef(
       ),
       ...props,
       children: [
-        imageSrc && /* @__PURE__ */ jsx28("div", { className: "aspect-video w-full bg-muted", children: /* @__PURE__ */ jsx28(
+        imageSrc && /* @__PURE__ */ jsx31("div", { className: "aspect-video w-full bg-muted", children: /* @__PURE__ */ jsx31(
           "img",
           {
             src: imageSrc,
@@ -2783,13 +3047,13 @@ var ImageCard = React17.forwardRef(
             className: "h-full w-full object-cover"
           }
         ) }),
-        /* @__PURE__ */ jsx28("div", { className: "p-4", children })
+        /* @__PURE__ */ jsx31("div", { className: "p-4", children })
       ]
     }
   )
 );
 ImageCard.displayName = "ImageCard";
-var StatCardExtended = React17.forwardRef(({ className, label, value, trend, icon, ...props }, ref) => /* @__PURE__ */ jsxs21(
+var StatCardExtended = React18.forwardRef(({ className, label, value, trend, icon, ...props }, ref) => /* @__PURE__ */ jsxs23(
   "div",
   {
     ref,
@@ -2799,18 +3063,18 @@ var StatCardExtended = React17.forwardRef(({ className, label, value, trend, ico
     ),
     ...props,
     children: [
-      /* @__PURE__ */ jsxs21("div", { className: "flex items-center justify-between", children: [
-        /* @__PURE__ */ jsx28("span", { className: "text-sm text-muted-foreground", children: label }),
-        icon && /* @__PURE__ */ jsx28("div", { className: "text-muted-foreground", children: icon })
+      /* @__PURE__ */ jsxs23("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsx31("span", { className: "text-sm text-muted-foreground", children: label }),
+        icon && /* @__PURE__ */ jsx31("div", { className: "text-muted-foreground", children: icon })
       ] }),
-      /* @__PURE__ */ jsx28("p", { className: "mt-2 text-3xl font-bold text-foreground", children: value }),
-      trend && /* @__PURE__ */ jsxs21(
+      /* @__PURE__ */ jsx31("p", { className: "mt-2 text-3xl font-bold text-foreground", children: isEmptyValue(value) ? /* @__PURE__ */ jsx31(EmptyValue, {}) : value }),
+      trend && /* @__PURE__ */ jsxs23(
         "p",
         {
           className: cn(
             "mt-1 text-sm font-medium",
-            trend.direction === "up" && "text-intent-success",
-            trend.direction === "down" && "text-intent-error",
+            trend.direction === "up" && "text-intent-success-foreground",
+            trend.direction === "down" && "text-intent-error-foreground",
             trend.direction === "neutral" && "text-muted-foreground"
           ),
           children: [
@@ -2824,8 +3088,8 @@ var StatCardExtended = React17.forwardRef(({ className, label, value, trend, ico
   }
 ));
 StatCardExtended.displayName = "StatCardExtended";
-var ActionCard = React17.forwardRef(
-  ({ className, title, description, actions, children, ...props }, ref) => /* @__PURE__ */ jsxs21(
+var ActionCard = React18.forwardRef(
+  ({ className, title, description, actions, children, ...props }, ref) => /* @__PURE__ */ jsxs23(
     "div",
     {
       ref,
@@ -2835,12 +3099,12 @@ var ActionCard = React17.forwardRef(
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsxs21("div", { className: "p-6", children: [
-          /* @__PURE__ */ jsx28("h3", { className: "font-semibold text-foreground", children: title }),
-          description && /* @__PURE__ */ jsx28("p", { className: "mt-1 text-sm text-muted-foreground", children: description }),
+        /* @__PURE__ */ jsxs23("div", { className: "p-6", children: [
+          /* @__PURE__ */ jsx31("h3", { className: "font-semibold text-foreground", children: title }),
+          description && /* @__PURE__ */ jsx31("p", { className: "mt-1 text-sm text-muted-foreground", children: description }),
           children
         ] }),
-        actions && /* @__PURE__ */ jsx28("div", { className: "flex items-center gap-2 border-t border-border px-6 py-4", children: actions })
+        actions && /* @__PURE__ */ jsx31("div", { className: "flex items-center gap-2 border-t border-border px-6 py-4", children: actions })
       ]
     }
   )
@@ -2848,9 +3112,9 @@ var ActionCard = React17.forwardRef(
 ActionCard.displayName = "ActionCard";
 
 // src/modal-dialog.tsx
-import * as React18 from "react";
+import * as React19 from "react";
 import { createPortal } from "react-dom";
-import { Fragment as Fragment6, jsx as jsx29, jsxs as jsxs22 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx32, jsxs as jsxs24 } from "react/jsx-runtime";
 var SIZE_CLASSES2 = {
   sm: "max-w-sm",
   md: "max-w-md",
@@ -2858,9 +3122,9 @@ var SIZE_CLASSES2 = {
   xl: "max-w-xl",
   fullscreen: "max-w-full mx-4 my-4 h-[calc(100vh-2rem)]"
 };
-var ModalDialog = React18.forwardRef(
+var ModalDialog = React19.forwardRef(
   ({ className, open, onClose, size = "md", children, ...props }, ref) => {
-    React18.useEffect(() => {
+    React19.useEffect(() => {
       if (!open) return;
       const handler = (e) => {
         if (e.key === "Escape") onClose?.();
@@ -2870,8 +3134,8 @@ var ModalDialog = React18.forwardRef(
     }, [open, onClose]);
     if (!open) return null;
     return createPortal(
-      /* @__PURE__ */ jsxs22(Fragment6, { children: [
-        /* @__PURE__ */ jsx29(
+      /* @__PURE__ */ jsxs24(Fragment7, { children: [
+        /* @__PURE__ */ jsx32(
           "div",
           {
             className: "z-overlay fixed inset-0 bg-foreground/60 transition-opacity",
@@ -2879,7 +3143,7 @@ var ModalDialog = React18.forwardRef(
             "aria-hidden": "true"
           }
         ),
-        /* @__PURE__ */ jsx29("div", { className: "z-modal fixed inset-0 flex items-center justify-center p-4", children: /* @__PURE__ */ jsx29(
+        /* @__PURE__ */ jsx32("div", { className: "z-modal fixed inset-0 flex items-center justify-center p-4", children: /* @__PURE__ */ jsx32(
           "div",
           {
             ref,
@@ -2901,7 +3165,7 @@ var ModalDialog = React18.forwardRef(
   }
 );
 ModalDialog.displayName = "ModalDialog";
-var ModalHeader = React18.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx29(
+var ModalHeader = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx32(
   "div",
   {
     ref,
@@ -2910,9 +3174,9 @@ var ModalHeader = React18.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 ModalHeader.displayName = "ModalHeader";
-var ModalBody = React18.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx29("div", { ref, className: cn("px-6 py-4", className), ...props }));
+var ModalBody = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx32("div", { ref, className: cn("px-6 py-4", className), ...props }));
 ModalBody.displayName = "ModalBody";
-var ModalFooter = React18.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx29(
+var ModalFooter = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx32(
   "div",
   {
     ref,
@@ -2926,9 +3190,9 @@ var ModalFooter = React18.forwardRef(({ className, ...props }, ref) => /* @__PUR
 ModalFooter.displayName = "ModalFooter";
 
 // src/drawer.tsx
-import * as React19 from "react";
+import * as React20 from "react";
 import { createPortal as createPortal2 } from "react-dom";
-import { Fragment as Fragment7, jsx as jsx30, jsxs as jsxs23 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx33, jsxs as jsxs25 } from "react/jsx-runtime";
 var SIZE_CLASSES3 = {
   left: { sm: "w-64", md: "w-80", lg: "w-96" },
   right: { sm: "w-64", md: "w-80", lg: "w-96" },
@@ -2939,7 +3203,7 @@ var POSITION_CLASSES = {
   right: "inset-y-0 right-0",
   bottom: "inset-x-0 bottom-0"
 };
-var Drawer = React19.forwardRef(
+var Drawer = React20.forwardRef(
   ({
     className,
     open,
@@ -2949,7 +3213,7 @@ var Drawer = React19.forwardRef(
     children,
     ...props
   }, ref) => {
-    React19.useEffect(() => {
+    React20.useEffect(() => {
       if (!open) return;
       const handler = (e) => {
         if (e.key === "Escape") onClose?.();
@@ -2959,8 +3223,8 @@ var Drawer = React19.forwardRef(
     }, [open, onClose]);
     if (!open) return null;
     return createPortal2(
-      /* @__PURE__ */ jsxs23(Fragment7, { children: [
-        /* @__PURE__ */ jsx30(
+      /* @__PURE__ */ jsxs25(Fragment8, { children: [
+        /* @__PURE__ */ jsx33(
           "div",
           {
             className: "z-overlay fixed inset-0 bg-foreground/60 transition-opacity",
@@ -2968,7 +3232,7 @@ var Drawer = React19.forwardRef(
             "aria-hidden": "true"
           }
         ),
-        /* @__PURE__ */ jsx30(
+        /* @__PURE__ */ jsx33(
           "div",
           {
             ref,
@@ -2993,7 +3257,7 @@ var Drawer = React19.forwardRef(
   }
 );
 Drawer.displayName = "Drawer";
-var DrawerHeader = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx30(
+var DrawerHeader = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx33(
   "div",
   {
     ref,
@@ -3002,7 +3266,7 @@ var DrawerHeader = React19.forwardRef(({ className, ...props }, ref) => /* @__PU
   }
 ));
 DrawerHeader.displayName = "DrawerHeader";
-var DrawerBody = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx30(
+var DrawerBody = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx33(
   "div",
   {
     ref,
@@ -3011,7 +3275,7 @@ var DrawerBody = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE
   }
 ));
 DrawerBody.displayName = "DrawerBody";
-var DrawerFooter = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx30(
+var DrawerFooter = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx33(
   "div",
   {
     ref,
@@ -3025,10 +3289,10 @@ var DrawerFooter = React19.forwardRef(({ className, ...props }, ref) => /* @__PU
 DrawerFooter.displayName = "DrawerFooter";
 
 // src/form-layout.tsx
-import * as React20 from "react";
-import { jsx as jsx31, jsxs as jsxs24 } from "react/jsx-runtime";
-var FormLayout = React20.forwardRef(
-  ({ className, layout = "stacked", ...props }, ref) => /* @__PURE__ */ jsx31(
+import * as React21 from "react";
+import { jsx as jsx34, jsxs as jsxs26 } from "react/jsx-runtime";
+var FormLayout = React21.forwardRef(
+  ({ className, layout = "stacked", ...props }, ref) => /* @__PURE__ */ jsx34(
     "form",
     {
       ref,
@@ -3043,27 +3307,27 @@ var FormLayout = React20.forwardRef(
   )
 );
 FormLayout.displayName = "FormLayout";
-var FormLayoutSection = React20.forwardRef(({ className, title, description, children, ...props }, ref) => /* @__PURE__ */ jsxs24(
+var FormLayoutSection = React21.forwardRef(({ className, title, description, children, ...props }, ref) => /* @__PURE__ */ jsxs26(
   "div",
   {
     ref,
     className: cn("border-b border-border pb-6", className),
     ...props,
     children: [
-      (title || description) && /* @__PURE__ */ jsxs24("div", { className: "mb-4", children: [
-        title && /* @__PURE__ */ jsx31("h3", { className: "text-base font-semibold text-foreground", children: title }),
-        description && /* @__PURE__ */ jsx31("p", { className: "mt-1 text-sm text-muted-foreground", children: description })
+      (title || description) && /* @__PURE__ */ jsxs26("div", { className: "mb-4", children: [
+        title && /* @__PURE__ */ jsx34("h3", { className: "text-base font-semibold text-foreground", children: title }),
+        description && /* @__PURE__ */ jsx34("p", { className: "mt-1 text-sm text-muted-foreground", children: description })
       ] }),
-      /* @__PURE__ */ jsx31("div", { className: "space-y-4", children })
+      /* @__PURE__ */ jsx34("div", { className: "space-y-4", children })
     ]
   }
 ));
 FormLayoutSection.displayName = "FormLayoutSection";
 
 // src/input-group.tsx
-import * as React21 from "react";
-import { jsx as jsx32, jsxs as jsxs25 } from "react/jsx-runtime";
-var InputGroup = React21.forwardRef(
+import * as React22 from "react";
+import { jsx as jsx35, jsxs as jsxs27 } from "react/jsx-runtime";
+var InputGroup = React22.forwardRef(
   ({
     className,
     addon = "prefix",
@@ -3071,15 +3335,15 @@ var InputGroup = React21.forwardRef(
     suffixContent,
     children,
     ...props
-  }, ref) => /* @__PURE__ */ jsxs25(
+  }, ref) => /* @__PURE__ */ jsxs27(
     "div",
     {
       ref,
       className: cn("flex rounded-md shadow-sm", className),
       ...props,
       children: [
-        (addon === "prefix" || addon === "both") && addonContent && /* @__PURE__ */ jsx32("span", { className: "inline-flex items-center rounded-l-md border border-r-0 border-input bg-muted px-3 text-sm text-muted-foreground", children: addonContent }),
-        /* @__PURE__ */ jsx32(
+        (addon === "prefix" || addon === "both") && addonContent && /* @__PURE__ */ jsx35("span", { className: "inline-flex items-center rounded-l-md border border-r-0 border-input bg-muted px-3 text-sm text-muted-foreground", children: addonContent }),
+        /* @__PURE__ */ jsx35(
           "div",
           {
             className: cn(
@@ -3089,7 +3353,7 @@ var InputGroup = React21.forwardRef(
             children
           }
         ),
-        (addon === "suffix" || addon === "both") && (suffixContent || addonContent) && /* @__PURE__ */ jsx32("span", { className: "inline-flex items-center rounded-r-md border border-l-0 border-input bg-muted px-3 text-sm text-muted-foreground", children: suffixContent || addonContent })
+        (addon === "suffix" || addon === "both") && (suffixContent || addonContent) && /* @__PURE__ */ jsx35("span", { className: "inline-flex items-center rounded-r-md border border-l-0 border-input bg-muted px-3 text-sm text-muted-foreground", children: suffixContent || addonContent })
       ]
     }
   )
@@ -3097,9 +3361,9 @@ var InputGroup = React21.forwardRef(
 InputGroup.displayName = "InputGroup";
 
 // src/radio-group.tsx
-import * as React22 from "react";
-import { jsx as jsx33, jsxs as jsxs26 } from "react/jsx-runtime";
-var RadioGroup = React22.forwardRef(
+import * as React23 from "react";
+import { jsx as jsx36, jsxs as jsxs28 } from "react/jsx-runtime";
+var RadioGroup = React23.forwardRef(
   ({
     className,
     options,
@@ -3109,9 +3373,9 @@ var RadioGroup = React22.forwardRef(
     name,
     label,
     ...props
-  }, ref) => /* @__PURE__ */ jsxs26("fieldset", { ref, className: cn("space-y-2", className), ...props, children: [
-    label && /* @__PURE__ */ jsx33("legend", { className: "mb-2 text-sm font-medium text-foreground", children: label }),
-    /* @__PURE__ */ jsx33(
+  }, ref) => /* @__PURE__ */ jsxs28("fieldset", { ref, className: cn("space-y-2", className), ...props, children: [
+    label && /* @__PURE__ */ jsx36("legend", { className: "mb-2 text-sm font-medium text-foreground", children: label }),
+    /* @__PURE__ */ jsx36(
       "div",
       {
         className: cn(
@@ -3122,7 +3386,7 @@ var RadioGroup = React22.forwardRef(
         children: options.map((option) => {
           const isSelected = value === option.value;
           if (variant === "card") {
-            return /* @__PURE__ */ jsxs26(
+            return /* @__PURE__ */ jsxs28(
               "label",
               {
                 className: cn(
@@ -3130,7 +3394,7 @@ var RadioGroup = React22.forwardRef(
                   isSelected ? "border-primary bg-primary/5" : "border-border bg-card hover:bg-muted/50"
                 ),
                 children: [
-                  /* @__PURE__ */ jsx33(
+                  /* @__PURE__ */ jsx36(
                     "input",
                     {
                       type: "radio",
@@ -3141,16 +3405,16 @@ var RadioGroup = React22.forwardRef(
                       className: "mt-0.5 h-4 w-4 accent-primary"
                     }
                   ),
-                  /* @__PURE__ */ jsxs26("div", { children: [
-                    /* @__PURE__ */ jsx33("span", { className: "text-sm font-medium text-foreground", children: option.label }),
-                    option.description && /* @__PURE__ */ jsx33("p", { className: "mt-0.5 text-xs text-muted-foreground", children: option.description })
+                  /* @__PURE__ */ jsxs28("div", { children: [
+                    /* @__PURE__ */ jsx36("span", { className: "text-sm font-medium text-foreground", children: option.label }),
+                    option.description && /* @__PURE__ */ jsx36("p", { className: "mt-0.5 text-xs text-muted-foreground", children: option.description })
                   ] })
                 ]
               },
               option.value
             );
           }
-          return /* @__PURE__ */ jsxs26(
+          return /* @__PURE__ */ jsxs28(
             "label",
             {
               className: cn(
@@ -3159,7 +3423,7 @@ var RadioGroup = React22.forwardRef(
                 variant === "stacked" && isSelected && "border-primary bg-primary/5"
               ),
               children: [
-                /* @__PURE__ */ jsx33(
+                /* @__PURE__ */ jsx36(
                   "input",
                   {
                     type: "radio",
@@ -3170,8 +3434,8 @@ var RadioGroup = React22.forwardRef(
                     className: "h-4 w-4 accent-primary"
                   }
                 ),
-                /* @__PURE__ */ jsx33("span", { className: "text-sm text-foreground", children: option.label }),
-                option.description && variant === "stacked" && /* @__PURE__ */ jsx33("span", { className: "ml-auto text-xs text-muted-foreground", children: option.description })
+                /* @__PURE__ */ jsx36("span", { className: "text-sm text-foreground", children: option.label }),
+                option.description && variant === "stacked" && /* @__PURE__ */ jsx36("span", { className: "ml-auto text-xs text-muted-foreground", children: option.description })
               ]
             },
             option.value
@@ -3184,9 +3448,9 @@ var RadioGroup = React22.forwardRef(
 RadioGroup.displayName = "RadioGroup";
 
 // src/combobox.tsx
-import * as React23 from "react";
-import { jsx as jsx34, jsxs as jsxs27 } from "react/jsx-runtime";
-var Combobox = React23.forwardRef(
+import * as React24 from "react";
+import { jsx as jsx37, jsxs as jsxs29 } from "react/jsx-runtime";
+var Combobox = React24.forwardRef(
   ({
     className,
     options,
@@ -3197,8 +3461,8 @@ var Combobox = React23.forwardRef(
     filterable = true,
     ...props
   }, ref) => {
-    const [open, setOpen] = React23.useState(false);
-    const [search, setSearch] = React23.useState("");
+    const [open, setOpen] = React24.useState(false);
+    const [search, setSearch] = React24.useState("");
     const selected = multi ? Array.isArray(value) ? value : [] : typeof value === "string" ? value : "";
     const filtered = filterable ? options.filter(
       (o) => o.label.toLowerCase().includes(search.toLowerCase())
@@ -3217,20 +3481,20 @@ var Combobox = React23.forwardRef(
       }
     };
     const displayValue = multi ? null : options.find((o) => o.value === selected)?.label;
-    return /* @__PURE__ */ jsxs27("div", { ref, className: cn("relative", className), ...props, children: [
-      /* @__PURE__ */ jsxs27(
+    return /* @__PURE__ */ jsxs29("div", { ref, className: cn("relative", className), ...props, children: [
+      /* @__PURE__ */ jsxs29(
         "div",
         {
           className: "flex min-h-9 cursor-pointer items-center gap-1 rounded-md border border-input bg-background px-3 py-1.5",
           onClick: () => setOpen(!open),
           children: [
-            multi && Array.isArray(selected) && selected.length > 0 ? /* @__PURE__ */ jsx34("div", { className: "flex flex-wrap gap-1", children: selected.map((v) => /* @__PURE__ */ jsxs27(
+            multi && Array.isArray(selected) && selected.length > 0 ? /* @__PURE__ */ jsx37("div", { className: "flex flex-wrap gap-1", children: selected.map((v) => /* @__PURE__ */ jsxs29(
               "span",
               {
-                className: "inline-flex items-center gap-1 rounded bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary",
+                className: "text-primary-text inline-flex items-center gap-1 rounded bg-primary/10 px-2 py-0.5 text-xs font-medium",
                 children: [
                   options.find((o) => o.value === v)?.label,
-                  /* @__PURE__ */ jsx34(
+                  /* @__PURE__ */ jsx37(
                     "button",
                     {
                       type: "button",
@@ -3238,14 +3502,14 @@ var Combobox = React23.forwardRef(
                         e.stopPropagation();
                         handleSelect(v);
                       },
-                      className: "text-primary/60 hover:text-primary",
+                      className: "text-primary-text hover:opacity-80",
                       children: "\u2715"
                     }
                   )
                 ]
               },
               v
-            )) }) : /* @__PURE__ */ jsx34(
+            )) }) : /* @__PURE__ */ jsx37(
               "span",
               {
                 className: cn(
@@ -3255,12 +3519,12 @@ var Combobox = React23.forwardRef(
                 children: displayValue || placeholder
               }
             ),
-            /* @__PURE__ */ jsx34("span", { className: "ml-auto text-muted-foreground", children: "\u25BE" })
+            /* @__PURE__ */ jsx37("span", { className: "ml-auto text-muted-foreground", children: "\u25BE" })
           ]
         }
       ),
-      open && /* @__PURE__ */ jsxs27("div", { className: "z-dropdown absolute mt-1 w-full rounded-md border border-border bg-card shadow-lg", children: [
-        filterable && /* @__PURE__ */ jsx34("div", { className: "border-b border-border p-2", children: /* @__PURE__ */ jsx34(
+      open && /* @__PURE__ */ jsxs29("div", { className: "z-dropdown absolute mt-1 w-full rounded-md border border-border bg-card shadow-lg", children: [
+        filterable && /* @__PURE__ */ jsx37("div", { className: "border-b border-border p-2", children: /* @__PURE__ */ jsx37(
           "input",
           {
             type: "text",
@@ -3271,21 +3535,21 @@ var Combobox = React23.forwardRef(
             autoFocus: true
           }
         ) }),
-        /* @__PURE__ */ jsx34("div", { className: "max-h-60 overflow-y-auto p-1", children: filtered.length === 0 ? /* @__PURE__ */ jsx34("div", { className: "px-3 py-2 text-sm text-muted-foreground", children: "No results" }) : filtered.map((option) => {
+        /* @__PURE__ */ jsx37("div", { className: "max-h-60 overflow-y-auto p-1", children: filtered.length === 0 ? /* @__PURE__ */ jsx37("div", { className: "px-3 py-2 text-sm text-muted-foreground", children: "No results" }) : filtered.map((option) => {
           const isSelected = multi ? Array.isArray(selected) && selected.includes(option.value) : selected === option.value;
-          return /* @__PURE__ */ jsxs27(
+          return /* @__PURE__ */ jsxs29(
             "button",
             {
               type: "button",
               className: cn(
                 "flex w-full items-center rounded-sm px-3 py-2 text-left text-sm transition-colors",
-                isSelected ? "bg-primary/10 font-medium text-primary" : "text-foreground hover:bg-muted"
+                isSelected ? "text-primary-text bg-primary/10 font-medium" : "text-foreground hover:bg-muted"
               ),
               onClick: () => handleSelect(option.value),
               children: [
-                multi && /* @__PURE__ */ jsx34("span", { className: "mr-2", children: isSelected ? "\u2611" : "\u2610" }),
+                multi && /* @__PURE__ */ jsx37("span", { className: "mr-2", children: isSelected ? "\u2611" : "\u2610" }),
                 option.label,
-                !multi && isSelected && /* @__PURE__ */ jsx34("span", { className: "ml-auto text-primary", children: "\u2713" })
+                !multi && isSelected && /* @__PURE__ */ jsx37("span", { className: "text-primary-text ml-auto", children: "\u2713" })
               ]
             },
             option.value
@@ -3298,37 +3562,37 @@ var Combobox = React23.forwardRef(
 Combobox.displayName = "Combobox";
 
 // src/notification-banner.tsx
-import * as React24 from "react";
-import { jsx as jsx35, jsxs as jsxs28 } from "react/jsx-runtime";
+import * as React25 from "react";
+import { jsx as jsx38, jsxs as jsxs30 } from "react/jsx-runtime";
 var INTENT_STYLES = {
   success: {
     subtle: "bg-intent-success/10 text-intent-success-foreground border-intent-success/20",
-    solid: "bg-intent-success text-primary-foreground",
-    accent: "border-l-4 border-l-intent-success bg-intent-success/5 text-intent-success-foreground"
+    solid: "border-transparent bg-intent-success-solid text-intent-success-solid-fg",
+    accent: "border-border border-l-4 border-l-intent-success bg-intent-success/5 text-intent-success-foreground"
   },
   warning: {
     subtle: "bg-intent-warning/10 text-intent-warning-foreground border-intent-warning/20",
-    solid: "bg-intent-warning text-primary-foreground",
-    accent: "border-l-4 border-l-intent-warning bg-intent-warning/5 text-intent-warning-foreground"
+    solid: "border-transparent bg-intent-warning-solid text-intent-warning-solid-fg",
+    accent: "border-border border-l-4 border-l-intent-warning bg-intent-warning/5 text-intent-warning-foreground"
   },
   error: {
     subtle: "bg-intent-error/10 text-intent-error-foreground border-intent-error/20",
-    solid: "bg-intent-error text-primary-foreground",
-    accent: "border-l-4 border-l-intent-error bg-intent-error/5 text-intent-error-foreground"
+    solid: "border-transparent bg-intent-error-solid text-intent-error-solid-fg",
+    accent: "border-border border-l-4 border-l-intent-error bg-intent-error/5 text-intent-error-foreground"
   },
   info: {
     subtle: "bg-intent-info/10 text-intent-info-foreground border-intent-info/20",
-    solid: "bg-intent-info text-primary-foreground",
-    accent: "border-l-4 border-l-intent-info bg-intent-info/5 text-intent-info-foreground"
+    solid: "border-transparent bg-intent-info-solid text-intent-info-solid-fg",
+    accent: "border-border border-l-4 border-l-intent-info bg-intent-info/5 text-intent-info-foreground"
   }
 };
 var ICON_MAP = {
-  success: "\u2713",
-  warning: "\u26A0",
-  error: "\u2715",
-  info: "\u2139"
+  success: "circle-check",
+  warning: "triangle-alert",
+  error: "circle-alert",
+  info: "info"
 };
-var NotificationBanner = React24.forwardRef(
+var NotificationBanner = React25.forwardRef(
   ({
     className,
     intent = "info",
@@ -3340,13 +3604,13 @@ var NotificationBanner = React24.forwardRef(
     children,
     ...props
   }, ref) => {
-    const [dismissed, setDismissed] = React24.useState(false);
+    const [dismissed, setDismissed] = React25.useState(false);
     if (dismissed) return null;
     const handleDismiss = () => {
       setDismissed(true);
       onDismiss?.();
     };
-    return /* @__PURE__ */ jsxs28(
+    return /* @__PURE__ */ jsxs30(
       "div",
       {
         ref,
@@ -3358,18 +3622,18 @@ var NotificationBanner = React24.forwardRef(
         ),
         ...props,
         children: [
-          /* @__PURE__ */ jsx35("span", { className: "flex-shrink-0 text-lg", "aria-hidden": "true", children: ICON_MAP[intent] }),
-          /* @__PURE__ */ jsxs28("div", { className: "min-w-0 flex-1", children: [
-            title && /* @__PURE__ */ jsx35("p", { className: "font-semibold", children: title }),
-            children && /* @__PURE__ */ jsx35("div", { className: cn(title && "mt-1", "text-sm"), children })
+          /* @__PURE__ */ jsx38("span", { className: "flex-shrink-0 pt-0.5", "aria-hidden": "true", children: /* @__PURE__ */ jsx38(Icon, { name: ICON_MAP[intent], size: "md" }) }),
+          /* @__PURE__ */ jsxs30("div", { className: "min-w-0 flex-1", children: [
+            title && /* @__PURE__ */ jsx38("p", { className: "font-semibold", children: title }),
+            children && /* @__PURE__ */ jsx38("div", { className: cn(title && "mt-1", "text-sm"), children })
           ] }),
-          action && /* @__PURE__ */ jsx35("div", { className: "flex-shrink-0", children: action }),
-          dismissible && /* @__PURE__ */ jsx35(
+          action && /* @__PURE__ */ jsx38("div", { className: "flex-shrink-0", children: action }),
+          dismissible && /* @__PURE__ */ jsx38(
             "button",
             {
               type: "button",
               onClick: handleDismiss,
-              className: "flex-shrink-0 text-current opacity-60 transition-opacity hover:opacity-100",
+              className: "flex-shrink-0 text-current transition-opacity hover:opacity-80",
               "aria-label": "Dismiss",
               children: "\u2715"
             }
@@ -3382,9 +3646,9 @@ var NotificationBanner = React24.forwardRef(
 NotificationBanner.displayName = "NotificationBanner";
 
 // src/notification-panel.tsx
-import * as React25 from "react";
-import { jsx as jsx36, jsxs as jsxs29 } from "react/jsx-runtime";
-var NotificationPanel = React25.forwardRef(({ className, unreadCount = 0, onMarkAllRead, children, ...props }, ref) => /* @__PURE__ */ jsxs29(
+import * as React26 from "react";
+import { jsx as jsx39, jsxs as jsxs31 } from "react/jsx-runtime";
+var NotificationPanel = React26.forwardRef(({ className, unreadCount = 0, onMarkAllRead, children, ...props }, ref) => /* @__PURE__ */ jsxs31(
   "div",
   {
     ref,
@@ -3394,27 +3658,27 @@ var NotificationPanel = React25.forwardRef(({ className, unreadCount = 0, onMark
     ),
     ...props,
     children: [
-      /* @__PURE__ */ jsxs29("div", { className: "flex items-center justify-between border-b border-border px-4 py-3", children: [
-        /* @__PURE__ */ jsxs29("h3", { className: "text-sm font-semibold text-foreground", children: [
+      /* @__PURE__ */ jsxs31("div", { className: "flex items-center justify-between border-b border-border px-4 py-3", children: [
+        /* @__PURE__ */ jsxs31("h3", { className: "text-sm font-semibold text-foreground", children: [
           "Notifications",
-          unreadCount > 0 && /* @__PURE__ */ jsx36("span", { className: "ml-2 inline-flex h-5 min-w-5 items-center justify-center rounded-full bg-primary px-1.5 text-xs text-primary-foreground", children: unreadCount })
+          unreadCount > 0 && /* @__PURE__ */ jsx39("span", { className: "bg-primary-solid ml-2 inline-flex h-5 min-w-5 items-center justify-center rounded-full px-1.5 text-xs text-primary-foreground", children: unreadCount })
         ] }),
-        onMarkAllRead && unreadCount > 0 && /* @__PURE__ */ jsx36(
+        onMarkAllRead && unreadCount > 0 && /* @__PURE__ */ jsx39(
           "button",
           {
             type: "button",
             onClick: onMarkAllRead,
-            className: "text-xs text-primary hover:underline",
+            className: "text-primary-text text-xs hover:underline",
             children: "Mark all read"
           }
         )
       ] }),
-      /* @__PURE__ */ jsx36("div", { className: "max-h-80 divide-y divide-border overflow-y-auto", children })
+      /* @__PURE__ */ jsx39("div", { className: "max-h-80 divide-y divide-border overflow-y-auto", children })
     ]
   }
 ));
 NotificationPanel.displayName = "NotificationPanel";
-var NotificationPanelItem = React25.forwardRef(({ className, title, description, time, unread, icon, ...props }, ref) => /* @__PURE__ */ jsxs29(
+var NotificationPanelItem = React26.forwardRef(({ className, title, description, time, unread, icon, ...props }, ref) => /* @__PURE__ */ jsxs31(
   "div",
   {
     ref,
@@ -3425,9 +3689,9 @@ var NotificationPanelItem = React25.forwardRef(({ className, title, description,
     ),
     ...props,
     children: [
-      icon && /* @__PURE__ */ jsx36("div", { className: "flex-shrink-0 pt-0.5", children: icon }),
-      /* @__PURE__ */ jsxs29("div", { className: "min-w-0 flex-1", children: [
-        /* @__PURE__ */ jsx36(
+      icon && /* @__PURE__ */ jsx39("div", { className: "flex-shrink-0 pt-0.5", children: icon }),
+      /* @__PURE__ */ jsxs31("div", { className: "min-w-0 flex-1", children: [
+        /* @__PURE__ */ jsx39(
           "p",
           {
             className: cn(
@@ -3437,22 +3701,22 @@ var NotificationPanelItem = React25.forwardRef(({ className, title, description,
             children: title
           }
         ),
-        description && /* @__PURE__ */ jsx36("p", { className: "mt-0.5 text-xs text-muted-foreground", children: description }),
-        time && /* @__PURE__ */ jsx36("p", { className: "mt-1 text-xs text-muted-foreground", children: time })
+        description && /* @__PURE__ */ jsx39("p", { className: "mt-0.5 text-xs text-muted-foreground", children: description }),
+        time && /* @__PURE__ */ jsx39("p", { className: "mt-1 text-xs text-muted-foreground", children: time })
       ] }),
-      unread && /* @__PURE__ */ jsx36("div", { className: "flex-shrink-0 pt-1.5", children: /* @__PURE__ */ jsx36("div", { className: "h-2 w-2 rounded-full bg-primary" }) })
+      unread && /* @__PURE__ */ jsx39("div", { className: "flex-shrink-0 pt-1.5", children: /* @__PURE__ */ jsx39("div", { className: "h-2 w-2 rounded-full bg-primary" }) })
     ]
   }
 ));
 NotificationPanelItem.displayName = "NotificationPanelItem";
 
 // src/skeleton-patterns.tsx
-import { jsx as jsx37, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx40, jsxs as jsxs32 } from "react/jsx-runtime";
 function SkeletonBar2({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx37(
+  return /* @__PURE__ */ jsx40(
     "div",
     {
       className: cn("animate-pulse rounded-md bg-muted", className),
@@ -3466,7 +3730,7 @@ function SkeletonTable({
   columns = 4,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs30(
+  return /* @__PURE__ */ jsxs32(
     "div",
     {
       className: cn(
@@ -3475,15 +3739,15 @@ function SkeletonTable({
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsx37("div", { className: "flex gap-4 border-b border-border bg-muted/50 px-4 py-3", children: Array.from({ length: columns }).map((_, i) => /* @__PURE__ */ jsx37(SkeletonBar2, { className: "h-4 flex-1" }, `h-${i}`)) }),
-        Array.from({ length: rows }).map((_, row) => /* @__PURE__ */ jsx37(
+        /* @__PURE__ */ jsx40("div", { className: "flex gap-4 border-b border-border bg-muted/50 px-4 py-3", children: Array.from({ length: columns }).map((_, i) => /* @__PURE__ */ jsx40(SkeletonBar2, { className: "h-4 flex-1" }, `h-${i}`)) }),
+        Array.from({ length: rows }).map((_, row) => /* @__PURE__ */ jsx40(
           "div",
           {
             className: cn(
               "flex gap-4 px-4 py-3",
               row < rows - 1 && "border-b border-border"
             ),
-            children: Array.from({ length: columns }).map((_2, col) => /* @__PURE__ */ jsx37(
+            children: Array.from({ length: columns }).map((_2, col) => /* @__PURE__ */ jsx40(
               SkeletonBar2,
               {
                 className: cn("h-4 flex-1", col === 0 && "max-w-[140px]")
@@ -3505,17 +3769,17 @@ function SkeletonCardGrid({
   ...props
 }) {
   const colClass = columns === 2 ? "grid-cols-1 sm:grid-cols-2" : "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3";
-  return /* @__PURE__ */ jsx37("div", { className: cn("grid gap-4", colClass, className), ...props, children: Array.from({ length: cards }).map((_, i) => /* @__PURE__ */ jsxs30(
+  return /* @__PURE__ */ jsx40("div", { className: cn("grid gap-4", colClass, className), ...props, children: Array.from({ length: cards }).map((_, i) => /* @__PURE__ */ jsxs32(
     "div",
     {
       className: "space-y-3 rounded-lg border border-border p-4",
       children: [
-        /* @__PURE__ */ jsx37(SkeletonBar2, { className: "h-4 w-3/4" }),
-        /* @__PURE__ */ jsx37(SkeletonBar2, { className: "h-3 w-full" }),
-        /* @__PURE__ */ jsx37(SkeletonBar2, { className: "h-3 w-5/6" }),
-        /* @__PURE__ */ jsxs30("div", { className: "flex gap-2 pt-2", children: [
-          /* @__PURE__ */ jsx37(SkeletonBar2, { className: "h-6 w-6 rounded-full" }),
-          /* @__PURE__ */ jsx37(SkeletonBar2, { className: "h-4 w-20" })
+        /* @__PURE__ */ jsx40(SkeletonBar2, { className: "h-4 w-3/4" }),
+        /* @__PURE__ */ jsx40(SkeletonBar2, { className: "h-3 w-full" }),
+        /* @__PURE__ */ jsx40(SkeletonBar2, { className: "h-3 w-5/6" }),
+        /* @__PURE__ */ jsxs32("div", { className: "flex gap-2 pt-2", children: [
+          /* @__PURE__ */ jsx40(SkeletonBar2, { className: "h-6 w-6 rounded-full" }),
+          /* @__PURE__ */ jsx40(SkeletonBar2, { className: "h-4 w-20" })
         ] })
       ]
     },
@@ -3524,34 +3788,34 @@ function SkeletonCardGrid({
 }
 SkeletonCardGrid.displayName = "SkeletonCardGrid";
 function SkeletonDetail({ className, ...props }) {
-  return /* @__PURE__ */ jsxs30("div", { className: cn("space-y-6", className), ...props, children: [
-    /* @__PURE__ */ jsxs30("div", { className: "space-y-2", children: [
-      /* @__PURE__ */ jsx37(SkeletonBar2, { className: "h-8 w-1/3" }),
-      /* @__PURE__ */ jsx37(SkeletonBar2, { className: "h-4 w-2/3" })
+  return /* @__PURE__ */ jsxs32("div", { className: cn("space-y-6", className), ...props, children: [
+    /* @__PURE__ */ jsxs32("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx40(SkeletonBar2, { className: "h-8 w-1/3" }),
+      /* @__PURE__ */ jsx40(SkeletonBar2, { className: "h-4 w-2/3" })
     ] }),
-    /* @__PURE__ */ jsx37("div", { className: "space-y-4", children: Array.from({ length: 4 }).map((_, i) => /* @__PURE__ */ jsxs30("div", { className: "flex justify-between", children: [
-      /* @__PURE__ */ jsx37(SkeletonBar2, { className: "h-4 w-24" }),
-      /* @__PURE__ */ jsx37(SkeletonBar2, { className: "h-4 w-40" })
+    /* @__PURE__ */ jsx40("div", { className: "space-y-4", children: Array.from({ length: 4 }).map((_, i) => /* @__PURE__ */ jsxs32("div", { className: "flex justify-between", children: [
+      /* @__PURE__ */ jsx40(SkeletonBar2, { className: "h-4 w-24" }),
+      /* @__PURE__ */ jsx40(SkeletonBar2, { className: "h-4 w-40" })
     ] }, `dl-${i}`)) }),
-    /* @__PURE__ */ jsxs30("div", { className: "space-y-2", children: [
-      /* @__PURE__ */ jsx37(SkeletonBar2, { className: "h-4 w-full" }),
-      /* @__PURE__ */ jsx37(SkeletonBar2, { className: "h-4 w-full" }),
-      /* @__PURE__ */ jsx37(SkeletonBar2, { className: "h-4 w-3/4" })
+    /* @__PURE__ */ jsxs32("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx40(SkeletonBar2, { className: "h-4 w-full" }),
+      /* @__PURE__ */ jsx40(SkeletonBar2, { className: "h-4 w-full" }),
+      /* @__PURE__ */ jsx40(SkeletonBar2, { className: "h-4 w-3/4" })
     ] })
   ] });
 }
 SkeletonDetail.displayName = "SkeletonDetail";
 
 // src/toggle.tsx
-import * as React26 from "react";
-import { jsx as jsx38 } from "react/jsx-runtime";
+import * as React27 from "react";
+import { jsx as jsx41 } from "react/jsx-runtime";
 var SIZE_CLASSES4 = {
   sm: "h-8 px-2 text-xs",
   md: "h-9 px-3 text-sm",
   lg: "h-10 px-4 text-base"
 };
-var Toggle = React26.forwardRef(
-  ({ className, pressed, variant = "default", size = "md", ...props }, ref) => /* @__PURE__ */ jsx38(
+var Toggle = React27.forwardRef(
+  ({ className, pressed, variant = "default", size = "md", ...props }, ref) => /* @__PURE__ */ jsx41(
     "button",
     {
       ref,
@@ -3570,7 +3834,7 @@ var Toggle = React26.forwardRef(
   )
 );
 Toggle.displayName = "Toggle";
-var ToggleGroup = React26.forwardRef(
+var ToggleGroup = React27.forwardRef(
   ({
     className,
     type = "single",
@@ -3597,18 +3861,18 @@ var ToggleGroup = React26.forwardRef(
         );
       }
     };
-    return /* @__PURE__ */ jsx38(
+    return /* @__PURE__ */ jsx41(
       "div",
       {
         ref,
         role: "group",
         className: cn("inline-flex items-center gap-1", className),
         ...props,
-        children: React26.Children.map(children, (child) => {
-          if (!React26.isValidElement(child)) return child;
+        children: React27.Children.map(children, (child) => {
+          if (!React27.isValidElement(child)) return child;
           const childProps = child.props;
           const itemValue = childProps.value ?? "";
-          return React26.cloneElement(child, {
+          return React27.cloneElement(child, {
             pressed: isPressed(itemValue),
             variant,
             size,
@@ -3625,8 +3889,8 @@ var ToggleGroup = React26.forwardRef(
 ToggleGroup.displayName = "ToggleGroup";
 
 // src/avatar-group.tsx
-import * as React27 from "react";
-import { jsx as jsx39, jsxs as jsxs31 } from "react/jsx-runtime";
+import * as React28 from "react";
+import { jsx as jsx42, jsxs as jsxs33 } from "react/jsx-runtime";
 var SIZE_MAP = {
   xs: { avatar: "h-6 w-6", ring: "ring-1", text: "text-[10px]" },
   sm: { avatar: "h-8 w-8", ring: "ring-2", text: "text-xs" },
@@ -3639,14 +3903,14 @@ var OVERLAP_MAP = {
   md: "-ml-3",
   lg: "-ml-3"
 };
-var AvatarGroup = React27.forwardRef(
+var AvatarGroup = React28.forwardRef(
   ({ className, max = 5, size = "md", children, ...props }, ref) => {
-    const items = React27.Children.toArray(children);
+    const items = React28.Children.toArray(children);
     const visible = items.slice(0, max);
     const overflow = items.length - max;
     const sizeConfig3 = SIZE_MAP[size];
-    return /* @__PURE__ */ jsxs31("div", { ref, className: cn("flex items-center", className), ...props, children: [
-      visible.map((child, i) => /* @__PURE__ */ jsx39(
+    return /* @__PURE__ */ jsxs33("div", { ref, className: cn("flex items-center", className), ...props, children: [
+      visible.map((child, i) => /* @__PURE__ */ jsx42(
         "div",
         {
           className: cn(
@@ -3658,7 +3922,7 @@ var AvatarGroup = React27.forwardRef(
         },
         i
       )),
-      overflow > 0 && /* @__PURE__ */ jsx39(
+      overflow > 0 && /* @__PURE__ */ jsx42(
         "div",
         {
           className: cn(
@@ -3667,7 +3931,7 @@ var AvatarGroup = React27.forwardRef(
             sizeConfig3.ring,
             OVERLAP_MAP[size]
           ),
-          children: /* @__PURE__ */ jsxs31(
+          children: /* @__PURE__ */ jsxs33(
             "span",
             {
               className: cn(
@@ -3686,14 +3950,14 @@ var AvatarGroup = React27.forwardRef(
   }
 );
 AvatarGroup.displayName = "AvatarGroup";
-var AvatarGroupItem = React27.forwardRef(({ className, fallback, size = "md", alt, src, ...props }, ref) => {
+var AvatarGroupItem = React28.forwardRef(({ className, fallback, size = "md", alt, src, ...props }, ref) => {
   const sizeConfig3 = SIZE_MAP[size];
   if (!src && fallback) {
-    return /* @__PURE__ */ jsx39(
+    return /* @__PURE__ */ jsx42(
       "div",
       {
         className: cn(
-          "flex items-center justify-center rounded-full bg-primary text-primary-foreground",
+          "bg-primary-solid flex items-center justify-center rounded-full text-primary-foreground",
           sizeConfig3.avatar,
           sizeConfig3.text,
           "font-medium",
@@ -3703,7 +3967,7 @@ var AvatarGroupItem = React27.forwardRef(({ className, fallback, size = "md", al
       }
     );
   }
-  return /* @__PURE__ */ jsx39(
+  return /* @__PURE__ */ jsx42(
     "img",
     {
       ref,
@@ -3717,26 +3981,33 @@ var AvatarGroupItem = React27.forwardRef(({ className, fallback, size = "md", al
 AvatarGroupItem.displayName = "AvatarGroupItem";
 
 // src/tab-bar.tsx
-import * as React28 from "react";
-import { jsx as jsx40 } from "react/jsx-runtime";
-var TabBar = React28.forwardRef(
-  ({ className, variant = "underline", children, ...props }, ref) => /* @__PURE__ */ jsx40(
+import * as React29 from "react";
+import { jsx as jsx43 } from "react/jsx-runtime";
+var TabBar = React29.forwardRef(
+  ({ className, variant = "underline", children, ...props }, ref) => /* @__PURE__ */ jsx43(
     "div",
     {
       ref,
       role: "tablist",
       className: cn(
-        "flex",
-        variant === "underline" && "gap-4 border-b border-border",
+        // W0 (#5823): scrolls horizontally on a narrow screen (never wraps,
+        // never runs off the page). A scroll box clips its own border, so the
+        // baseline is an inset shadow the items' own borders paint over.
+        // W1: the scroll hint (`SCROLL_HINT_X`): the last 1.5rem fades, and
+        // the same 1.5rem of end padding means only a clipped tab fades.
+        "flex overflow-x-auto",
+        variant === "underline" && "gap-4 shadow-[inset_0_-1px_0_hsl(var(--border))]",
         variant === "pills" && "gap-1 rounded-lg bg-muted p-1",
-        variant === "enclosed" && "border-b border-border",
+        variant === "enclosed" && "shadow-[inset_0_-1px_0_hsl(var(--border))]",
+        SCROLL_HINT_X,
+        // after the variant: its end padding wins over `p-1`
         className
       ),
       "data-variant": variant,
       ...props,
-      children: React28.Children.map(children, (child) => {
-        if (!React28.isValidElement(child)) return child;
-        return React28.cloneElement(
+      children: React29.Children.map(children, (child) => {
+        if (!React29.isValidElement(child)) return child;
+        return React29.cloneElement(
           child,
           { _variant: variant }
         );
@@ -3745,8 +4016,8 @@ var TabBar = React28.forwardRef(
   )
 );
 TabBar.displayName = "TabBar";
-var TabBarItem = React28.forwardRef(
-  ({ className, active, disabled, _variant: variant = "underline", ...props }, ref) => /* @__PURE__ */ jsx40(
+var TabBarItem = React29.forwardRef(
+  ({ className, active, disabled, _variant: variant = "underline", ...props }, ref) => /* @__PURE__ */ jsx43(
     "button",
     {
       ref,
@@ -3756,7 +4027,7 @@ var TabBarItem = React28.forwardRef(
       "aria-disabled": disabled || void 0,
       disabled,
       className: cn(
-        "inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-colors",
+        "inline-flex shrink-0 items-center justify-center whitespace-nowrap text-sm font-medium transition-colors",
         disabled && "pointer-events-none opacity-50",
         // Underline
         variant === "underline" && [
@@ -3770,7 +4041,7 @@ var TabBarItem = React28.forwardRef(
         ],
         // Enclosed
         variant === "enclosed" && [
-          "-mb-px rounded-t-md border border-b-0 px-4 py-2",
+          "rounded-t-md border border-b-0 px-4 py-2",
           active ? "border-border bg-background text-foreground" : "border-transparent text-muted-foreground hover:text-foreground"
         ],
         className
@@ -3782,7 +4053,7 @@ var TabBarItem = React28.forwardRef(
 TabBarItem.displayName = "TabBarItem";
 
 // src/sticky-action-bar.tsx
-import { jsx as jsx41, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx44, jsxs as jsxs34 } from "react/jsx-runtime";
 function StickyActionBar({
   context,
   actions,
@@ -3790,7 +4061,7 @@ function StickyActionBar({
   className,
   testId = "sticky-action-bar"
 }) {
-  return /* @__PURE__ */ jsx41(
+  return /* @__PURE__ */ jsx44(
     "div",
     {
       "data-testid": testId,
@@ -3801,24 +4072,24 @@ function StickyActionBar({
         topClassName,
         className
       ),
-      children: /* @__PURE__ */ jsxs32("div", { className: "flex flex-wrap items-center justify-between gap-3", children: [
-        context != null ? /* @__PURE__ */ jsx41("div", { className: "flex min-w-0 flex-wrap items-center gap-x-3 gap-y-1.5", children: context }) : /* @__PURE__ */ jsx41("span", {}),
-        /* @__PURE__ */ jsx41("div", { className: "flex shrink-0 items-center gap-2", children: actions })
+      children: /* @__PURE__ */ jsxs34("div", { className: "flex flex-wrap items-center justify-between gap-3", children: [
+        context != null ? /* @__PURE__ */ jsx44("div", { className: "flex min-w-0 flex-wrap items-center gap-x-3 gap-y-1.5", children: context }) : /* @__PURE__ */ jsx44("span", {}),
+        /* @__PURE__ */ jsx44("div", { className: "flex shrink-0 items-center gap-2", children: actions })
       ] })
     }
   );
 }
 
 // src/button-group.tsx
-import * as React29 from "react";
-import { jsx as jsx42 } from "react/jsx-runtime";
+import * as React30 from "react";
+import { jsx as jsx45 } from "react/jsx-runtime";
 var SIZE_CLASSES5 = {
   sm: "h-8 px-3 text-xs",
   md: "h-9 px-4 text-sm",
   lg: "h-10 px-5 text-base"
 };
-var ButtonGroup = React29.forwardRef(
-  ({ className, variant = "default", size = "md", children, ...props }, ref) => /* @__PURE__ */ jsx42(
+var ButtonGroup = React30.forwardRef(
+  ({ className, variant = "default", size = "md", children, ...props }, ref) => /* @__PURE__ */ jsx45(
     "div",
     {
       ref,
@@ -3831,9 +4102,9 @@ var ButtonGroup = React29.forwardRef(
       "data-variant": variant,
       "data-size": size,
       ...props,
-      children: React29.Children.map(children, (child) => {
-        if (!React29.isValidElement(child)) return child;
-        return React29.cloneElement(
+      children: React30.Children.map(children, (child) => {
+        if (!React30.isValidElement(child)) return child;
+        return React30.cloneElement(
           child,
           { _variant: variant, _size: size }
         );
@@ -3842,20 +4113,22 @@ var ButtonGroup = React29.forwardRef(
   )
 );
 ButtonGroup.displayName = "ButtonGroup";
-var ButtonGroupItem = React29.forwardRef(
+var ButtonGroupItem = React30.forwardRef(
   ({
     className,
     active,
     _variant: variant = "default",
     _size: size = "md",
     ...props
-  }, ref) => /* @__PURE__ */ jsx42(
+  }, ref) => /* @__PURE__ */ jsx45(
     "button",
     {
       ref,
       type: "button",
       className: cn(
         "inline-flex items-center justify-center font-medium transition-colors",
+        // W1 (#5823): a disabled segment reads as disabled
+        "disabled:pointer-events-none disabled:opacity-50",
         SIZE_CLASSES5[size],
         // Default: connected bordered buttons
         variant === "default" && [
@@ -3869,10 +4142,14 @@ var ButtonGroupItem = React29.forwardRef(
           "-ml-px first:ml-0 first:rounded-l-md last:rounded-r-md",
           active && "bg-muted font-semibold"
         ],
-        // Segmented: pill-style inside a container
+        // Segmented: pill-style inside a container. W1 (#5823): a hairline
+        // separates two inactive segments (they read as plain text without
+        // one); none beside the raised active segment.
         variant === "segmented" && [
-          "rounded-sm text-muted-foreground",
-          active && "bg-background font-semibold text-foreground shadow-sm"
+          "relative rounded-sm text-muted-foreground hover:text-foreground",
+          "not-first:before:absolute not-first:before:inset-y-1.5 not-first:before:left-0 not-first:before:w-px not-first:before:bg-border",
+          "[[aria-pressed=true]+&]:before:hidden",
+          active && "bg-background font-semibold text-foreground shadow-sm before:hidden"
         ],
         className
       ),
@@ -3884,16 +4161,16 @@ var ButtonGroupItem = React29.forwardRef(
 ButtonGroupItem.displayName = "ButtonGroupItem";
 
 // src/data-table.tsx
-import * as React30 from "react";
-import { jsx as jsx43, jsxs as jsxs33 } from "react/jsx-runtime";
-var DataTable = React30.forwardRef(
+import * as React31 from "react";
+import { jsx as jsx46, jsxs as jsxs35 } from "react/jsx-runtime";
+var DataTable = React31.forwardRef(
   ({
     className,
     density = "default",
     striped = false,
     bordered = false,
     ...props
-  }, ref) => /* @__PURE__ */ jsx43("div", { className: "w-full overflow-x-auto", children: /* @__PURE__ */ jsx43(
+  }, ref) => /* @__PURE__ */ jsx46("div", { className: cn("w-full overflow-x-auto", SCROLL_HINT_X), children: /* @__PURE__ */ jsx46(
     "table",
     {
       ref,
@@ -3909,7 +4186,7 @@ var DataTable = React30.forwardRef(
   ) })
 );
 DataTable.displayName = "DataTable";
-var TableHeader = React30.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx43(
+var TableHeader = React31.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx46(
   "thead",
   {
     ref,
@@ -3918,7 +4195,7 @@ var TableHeader = React30.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 TableHeader.displayName = "TableHeader";
-var TableBody = React30.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx43(
+var TableBody = React31.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx46(
   "tbody",
   {
     ref,
@@ -3927,8 +4204,8 @@ var TableBody = React30.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   }
 ));
 TableBody.displayName = "TableBody";
-var TableRow = React30.forwardRef(
-  ({ className, selected, ...props }, ref) => /* @__PURE__ */ jsx43(
+var TableRow = React31.forwardRef(
+  ({ className, selected, ...props }, ref) => /* @__PURE__ */ jsx46(
     "tr",
     {
       ref,
@@ -3951,12 +4228,12 @@ var DENSITY_CELL = {
   default: "px-4 py-2",
   relaxed: "px-4 py-3"
 };
-var TableCell = React30.forwardRef(
+var TableCell = React31.forwardRef(
   ({ className, header, sortDirection, onSort, children, ...props }, ref) => {
-    const Tag = header ? "th" : "td";
+    const Tag2 = header ? "th" : "td";
     const sortIndicator = sortDirection === "asc" ? " \u2191" : sortDirection === "desc" ? " \u2193" : "";
-    return /* @__PURE__ */ jsxs33(
-      Tag,
+    return /* @__PURE__ */ jsxs35(
+      Tag2,
       {
         ref,
         className: cn(
@@ -3970,14 +4247,14 @@ var TableCell = React30.forwardRef(
         ...props,
         children: [
           children,
-          header && sortIndicator && /* @__PURE__ */ jsx43("span", { className: "ml-1 text-primary", children: sortIndicator })
+          header && sortIndicator && /* @__PURE__ */ jsx46("span", { className: "text-primary-text ml-1", children: sortIndicator })
         ]
       }
     );
   }
 );
 TableCell.displayName = "TableCell";
-var TableCaption = React30.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx43(
+var TableCaption = React31.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx46(
   "caption",
   {
     ref,
@@ -3988,15 +4265,15 @@ var TableCaption = React30.forwardRef(({ className, ...props }, ref) => /* @__PU
 TableCaption.displayName = "TableCaption";
 
 // src/stat-group.tsx
-import * as React31 from "react";
-import { jsx as jsx44 } from "react/jsx-runtime";
+import * as React32 from "react";
+import { jsx as jsx47 } from "react/jsx-runtime";
 var COL_CLASSES = {
   2: "grid-cols-1 sm:grid-cols-2",
   3: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
   4: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4"
 };
-var StatGroup = React31.forwardRef(
-  ({ className, columns = 3, variant = "card", children, ...props }, ref) => /* @__PURE__ */ jsx44(
+var StatGroup = React32.forwardRef(
+  ({ className, columns = 3, variant = "card", children, ...props }, ref) => /* @__PURE__ */ jsx47(
     "div",
     {
       ref,
@@ -4014,67 +4291,71 @@ var StatGroup = React31.forwardRef(
 StatGroup.displayName = "StatGroup";
 
 // src/description-list.tsx
-import * as React32 from "react";
-import { jsx as jsx45, jsxs as jsxs34 } from "react/jsx-runtime";
-var DescriptionList = React32.forwardRef(({ className, layout = "stacked", ...props }, ref) => /* @__PURE__ */ jsx45(
+import * as React33 from "react";
+import { jsx as jsx48, jsxs as jsxs36 } from "react/jsx-runtime";
+var DescriptionLayoutContext = React33.createContext("stacked");
+var DescriptionList = React33.forwardRef(({ className, layout = "stacked", ...props }, ref) => /* @__PURE__ */ jsx48(DescriptionLayoutContext.Provider, { value: layout, children: /* @__PURE__ */ jsx48(
   "dl",
   {
     ref,
     className: cn(
-      layout === "grid" && "grid grid-cols-1 gap-4 sm:grid-cols-2",
+      layout === "grid" && "grid grid-cols-1 gap-x-6 gap-y-4 sm:grid-cols-2",
       layout === "side-by-side" && "divide-y divide-border",
       layout === "stacked" && "space-y-4",
       className
     ),
     ...props
   }
-));
+) }));
 DescriptionList.displayName = "DescriptionList";
-var DescriptionItem = React32.forwardRef(
-  ({ className, label, value, layout = "stacked", ...props }, ref) => /* @__PURE__ */ jsxs34(
-    "div",
-    {
-      ref,
-      className: cn(
-        layout === "side-by-side" && "flex justify-between py-3 sm:gap-4",
-        layout === "stacked" && "",
-        layout === "grid" && "",
-        className
-      ),
-      ...props,
-      children: [
-        /* @__PURE__ */ jsx45(
-          "dt",
-          {
-            className: cn(
-              "text-sm font-medium text-muted-foreground",
-              layout === "side-by-side" && "flex-shrink-0"
-            ),
-            children: label
-          }
+var DescriptionItem = React33.forwardRef(
+  ({ className, label, value, ...props }, ref) => {
+    const layout = React33.useContext(DescriptionLayoutContext);
+    return /* @__PURE__ */ jsxs36(
+      "div",
+      {
+        ref,
+        className: cn(
+          layout === "side-by-side" && "flex justify-between py-3 sm:gap-4",
+          layout === "stacked" && "",
+          layout === "grid" && "",
+          className
         ),
-        /* @__PURE__ */ jsx45(
-          "dd",
-          {
-            className: cn(
-              "text-sm text-foreground",
-              layout === "stacked" && "mt-1",
-              layout === "side-by-side" && "text-right"
-            ),
-            children: value
-          }
-        )
-      ]
-    }
-  )
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx48(
+            "dt",
+            {
+              className: cn(
+                "text-sm font-medium text-muted-foreground",
+                layout === "side-by-side" && "flex-shrink-0"
+              ),
+              children: label
+            }
+          ),
+          /* @__PURE__ */ jsx48(
+            "dd",
+            {
+              className: cn(
+                "min-w-0 break-words text-sm text-foreground",
+                layout !== "side-by-side" && "mt-1",
+                layout === "side-by-side" && "text-right"
+              ),
+              children: isEmptyValue(value) ? /* @__PURE__ */ jsx48(EmptyValue, {}) : value
+            }
+          )
+        ]
+      }
+    );
+  }
 );
 DescriptionItem.displayName = "DescriptionItem";
 
 // src/activity-feed.tsx
-import * as React33 from "react";
-import { jsx as jsx46, jsxs as jsxs35 } from "react/jsx-runtime";
-var ActivityFeed = React33.forwardRef(
-  ({ className, variant = "simple", ...props }, ref) => /* @__PURE__ */ jsx46(
+import * as React34 from "react";
+import { jsx as jsx49, jsxs as jsxs37 } from "react/jsx-runtime";
+var ActivityFeed = React34.forwardRef(
+  ({ className, variant = "simple", ...props }, ref) => /* @__PURE__ */ jsx49(
     "div",
     {
       ref,
@@ -4085,19 +4366,19 @@ var ActivityFeed = React33.forwardRef(
   )
 );
 ActivityFeed.displayName = "ActivityFeed";
-var ActivityFeedItem = React33.forwardRef(
-  ({ className, avatar, eventDescription, timestamp, isLast, ...props }, ref) => /* @__PURE__ */ jsxs35(
+var ActivityFeedItem = React34.forwardRef(
+  ({ className, avatar, eventDescription, timestamp, isLast, ...props }, ref) => /* @__PURE__ */ jsxs37(
     "div",
     {
       ref,
       className: cn("relative flex gap-3 pb-6", className),
       ...props,
       children: [
-        !isLast && /* @__PURE__ */ jsx46("div", { className: "absolute left-5 top-10 -ml-px h-full w-0.5 bg-muted" }),
-        /* @__PURE__ */ jsx46("div", { className: "relative flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full bg-muted", children: avatar }),
-        /* @__PURE__ */ jsxs35("div", { className: "min-w-0 flex-1 pt-1", children: [
-          /* @__PURE__ */ jsx46("div", { className: "text-sm text-foreground", children: eventDescription }),
-          timestamp && /* @__PURE__ */ jsx46("p", { className: "mt-0.5 text-xs text-muted-foreground", children: timestamp })
+        !isLast && /* @__PURE__ */ jsx49("div", { className: "absolute left-5 top-10 -ml-px h-full w-0.5 bg-muted" }),
+        /* @__PURE__ */ jsx49("div", { className: "relative flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full bg-muted", children: avatar }),
+        /* @__PURE__ */ jsxs37("div", { className: "min-w-0 flex-1 pt-1", children: [
+          /* @__PURE__ */ jsx49("div", { className: "text-sm text-foreground", children: eventDescription }),
+          timestamp && /* @__PURE__ */ jsx49("p", { className: "mt-0.5 text-xs text-muted-foreground", children: timestamp })
         ] })
       ]
     }
@@ -4106,19 +4387,19 @@ var ActivityFeedItem = React33.forwardRef(
 ActivityFeedItem.displayName = "ActivityFeedItem";
 
 // src/alert.tsx
-import * as React34 from "react";
-import { jsx as jsx47, jsxs as jsxs36 } from "react/jsx-runtime";
-var SUBTLE_STYLES = {
+import * as React35 from "react";
+import { jsx as jsx50, jsxs as jsxs38 } from "react/jsx-runtime";
+var INTENT_SUBTLE_STYLES = {
   success: "bg-intent-success/10 text-intent-success-foreground border-intent-success/20",
   warning: "bg-intent-warning/10 text-intent-warning-foreground border-intent-warning/20",
   error: "bg-intent-error/10 text-intent-error-foreground border-intent-error/20",
   info: "bg-intent-info/10 text-intent-info-foreground border-intent-info/20"
 };
 var SOLID_STYLES = {
-  success: "bg-intent-success text-primary-foreground",
-  warning: "bg-intent-warning text-primary-foreground",
-  error: "bg-intent-error text-primary-foreground",
-  info: "bg-intent-info text-primary-foreground"
+  success: "border-transparent bg-intent-success-solid text-intent-success-solid-fg",
+  warning: "border-transparent bg-intent-warning-solid text-intent-warning-solid-fg",
+  error: "border-transparent bg-intent-error-solid text-intent-error-solid-fg",
+  info: "border-transparent bg-intent-info-solid text-intent-info-solid-fg"
 };
 var OUTLINE_STYLES = {
   success: "border-intent-success-border text-intent-success-foreground bg-background",
@@ -4127,12 +4408,12 @@ var OUTLINE_STYLES = {
   info: "border-intent-info-border text-intent-info-foreground bg-background"
 };
 var ICON_MAP2 = {
-  success: "\u2713",
-  warning: "\u26A0",
-  error: "\u2715",
-  info: "\u2139"
+  success: "circle-check",
+  warning: "triangle-alert",
+  error: "circle-alert",
+  info: "info"
 };
-var Alert = React34.forwardRef(
+var Alert = React35.forwardRef(
   ({
     className,
     intent = "info",
@@ -4143,8 +4424,8 @@ var Alert = React34.forwardRef(
     children,
     ...props
   }, ref) => {
-    const styles = variant === "solid" ? SOLID_STYLES[intent] : variant === "outline" ? OUTLINE_STYLES[intent] : SUBTLE_STYLES[intent];
-    return /* @__PURE__ */ jsxs36(
+    const styles = variant === "solid" ? SOLID_STYLES[intent] : variant === "outline" ? OUTLINE_STYLES[intent] : INTENT_SUBTLE_STYLES[intent];
+    return /* @__PURE__ */ jsxs38(
       "div",
       {
         ref,
@@ -4152,17 +4433,17 @@ var Alert = React34.forwardRef(
         className: cn("flex gap-3 rounded-lg border p-4", styles, className),
         ...props,
         children: [
-          /* @__PURE__ */ jsx47("span", { className: "flex-shrink-0 text-lg", "aria-hidden": "true", children: ICON_MAP2[intent] }),
-          /* @__PURE__ */ jsxs36("div", { className: "min-w-0 flex-1", children: [
-            title && /* @__PURE__ */ jsx47("p", { className: "font-semibold", children: title }),
-            children && /* @__PURE__ */ jsx47("div", { className: cn(title && "mt-1", "text-sm"), children })
+          /* @__PURE__ */ jsx50("span", { className: "flex-shrink-0 pt-0.5", "aria-hidden": "true", children: /* @__PURE__ */ jsx50(Icon, { name: ICON_MAP2[intent], size: "md" }) }),
+          /* @__PURE__ */ jsxs38("div", { className: "min-w-0 flex-1", children: [
+            title && /* @__PURE__ */ jsx50("p", { className: "font-semibold", children: title }),
+            children && /* @__PURE__ */ jsx50("div", { className: cn(title && "mt-1", "text-sm"), children })
           ] }),
-          dismissible && /* @__PURE__ */ jsx47(
+          dismissible && /* @__PURE__ */ jsx50(
             "button",
             {
               type: "button",
               onClick: onDismiss,
-              className: "opacity-hover flex-shrink-0 hover:opacity-100",
+              className: "flex-shrink-0 hover:opacity-80",
               "aria-label": "Dismiss",
               children: "\u2715"
             }
@@ -4175,9 +4456,9 @@ var Alert = React34.forwardRef(
 Alert.displayName = "Alert";
 
 // src/empty-state.tsx
-import { jsx as jsx48, jsxs as jsxs37 } from "react/jsx-runtime";
+import { jsx as jsx51, jsxs as jsxs39 } from "react/jsx-runtime";
 function EmptyState({
-  icon: Icon,
+  icon: Icon2,
   title,
   description,
   action,
@@ -4186,7 +4467,7 @@ function EmptyState({
   className
 }) {
   const compact = size === "compact";
-  return /* @__PURE__ */ jsxs37(
+  return /* @__PURE__ */ jsxs39(
     "div",
     {
       "data-testid": testId,
@@ -4196,7 +4477,7 @@ function EmptyState({
         className
       ),
       children: [
-        Icon && /* @__PURE__ */ jsx48(
+        Icon2 && /* @__PURE__ */ jsx51(
           "div",
           {
             "aria-hidden": "true",
@@ -4204,10 +4485,10 @@ function EmptyState({
               "flex items-center justify-center rounded-full bg-primary/10 text-primary",
               compact ? "mb-3 size-12" : "mb-5 size-16"
             ),
-            children: /* @__PURE__ */ jsx48(Icon, { className: compact ? "size-6" : "size-8" })
+            children: /* @__PURE__ */ jsx51(Icon2, { className: compact ? "size-6" : "size-8" })
           }
         ),
-        /* @__PURE__ */ jsx48(
+        /* @__PURE__ */ jsx51(
           "h2",
           {
             className: cn(
@@ -4217,7 +4498,7 @@ function EmptyState({
             children: title
           }
         ),
-        description && /* @__PURE__ */ jsx48(
+        description && /* @__PURE__ */ jsx51(
           "p",
           {
             className: cn(
@@ -4227,21 +4508,21 @@ function EmptyState({
             children: description
           }
         ),
-        action && /* @__PURE__ */ jsx48("div", { className: compact ? "mt-4" : "mt-6", children: action })
+        action && /* @__PURE__ */ jsx51("div", { className: compact ? "mt-4" : "mt-6", children: action })
       ]
     }
   );
 }
 
 // src/action-panel.tsx
-import * as React35 from "react";
-import { Fragment as Fragment8, jsx as jsx49, jsxs as jsxs38 } from "react/jsx-runtime";
+import * as React36 from "react";
+import { Fragment as Fragment9, jsx as jsx52, jsxs as jsxs40 } from "react/jsx-runtime";
 var BORDER_INTENT = {
   default: "border-l-primary",
   warning: "border-l-intent-warning",
   destructive: "border-l-intent-error"
 };
-var ActionPanel = React35.forwardRef(
+var ActionPanel = React36.forwardRef(
   ({
     className,
     title,
@@ -4250,7 +4531,7 @@ var ActionPanel = React35.forwardRef(
     variant = "simple",
     intent = "default",
     ...props
-  }, ref) => /* @__PURE__ */ jsx49(
+  }, ref) => /* @__PURE__ */ jsx52(
     "div",
     {
       ref,
@@ -4261,16 +4542,16 @@ var ActionPanel = React35.forwardRef(
         className
       ),
       ...props,
-      children: variant === "split" ? /* @__PURE__ */ jsxs38(Fragment8, { children: [
-        /* @__PURE__ */ jsxs38("div", { className: "min-w-0", children: [
-          /* @__PURE__ */ jsx49("h3", { className: "font-semibold text-foreground", children: title }),
-          description && /* @__PURE__ */ jsx49("p", { className: "mt-1 text-sm text-muted-foreground", children: description })
+      children: variant === "split" ? /* @__PURE__ */ jsxs40(Fragment9, { children: [
+        /* @__PURE__ */ jsxs40("div", { className: "min-w-0", children: [
+          /* @__PURE__ */ jsx52("h3", { className: "font-semibold text-foreground", children: title }),
+          description && /* @__PURE__ */ jsx52("p", { className: "mt-1 text-sm text-muted-foreground", children: description })
         ] }),
-        action && /* @__PURE__ */ jsx49("div", { className: "flex-shrink-0", children: action })
-      ] }) : /* @__PURE__ */ jsxs38(Fragment8, { children: [
-        /* @__PURE__ */ jsx49("h3", { className: "font-semibold text-foreground", children: title }),
-        description && /* @__PURE__ */ jsx49("p", { className: "mt-1 text-sm text-muted-foreground", children: description }),
-        action && /* @__PURE__ */ jsx49("div", { className: "mt-4", children: action })
+        action && /* @__PURE__ */ jsx52("div", { className: "flex-shrink-0", children: action })
+      ] }) : /* @__PURE__ */ jsxs40(Fragment9, { children: [
+        /* @__PURE__ */ jsx52("h3", { className: "font-semibold text-foreground", children: title }),
+        description && /* @__PURE__ */ jsx52("p", { className: "mt-1 text-sm text-muted-foreground", children: description }),
+        action && /* @__PURE__ */ jsx52("div", { className: "mt-4", children: action })
       ] })
     }
   )
@@ -4278,14 +4559,14 @@ var ActionPanel = React35.forwardRef(
 ActionPanel.displayName = "ActionPanel";
 
 // src/divider.tsx
-import * as React36 from "react";
-import { jsx as jsx50, jsxs as jsxs39 } from "react/jsx-runtime";
+import * as React37 from "react";
+import { jsx as jsx53, jsxs as jsxs41 } from "react/jsx-runtime";
 var VARIANT_CLASSES = {
   solid: "border-solid",
   dashed: "border-dashed",
   dotted: "border-dotted"
 };
-var Divider = React36.forwardRef(
+var Divider = React37.forwardRef(
   ({
     className,
     label,
@@ -4295,7 +4576,7 @@ var Divider = React36.forwardRef(
     ...props
   }, ref) => {
     if (orientation === "vertical") {
-      return /* @__PURE__ */ jsx50(
+      return /* @__PURE__ */ jsx53(
         "div",
         {
           ref,
@@ -4312,7 +4593,7 @@ var Divider = React36.forwardRef(
       );
     }
     if (!label) {
-      return /* @__PURE__ */ jsx50(
+      return /* @__PURE__ */ jsx53(
         "div",
         {
           ref,
@@ -4326,7 +4607,7 @@ var Divider = React36.forwardRef(
         }
       );
     }
-    return /* @__PURE__ */ jsxs39(
+    return /* @__PURE__ */ jsxs41(
       "div",
       {
         ref,
@@ -4334,7 +4615,7 @@ var Divider = React36.forwardRef(
         role: "separator",
         ...props,
         children: [
-          labelPosition !== "left" && /* @__PURE__ */ jsx50(
+          labelPosition !== "left" && /* @__PURE__ */ jsx53(
             "div",
             {
               className: cn(
@@ -4343,7 +4624,7 @@ var Divider = React36.forwardRef(
               )
             }
           ),
-          /* @__PURE__ */ jsx50(
+          /* @__PURE__ */ jsx53(
             "span",
             {
               className: cn(
@@ -4353,7 +4634,7 @@ var Divider = React36.forwardRef(
               children: label
             }
           ),
-          labelPosition !== "right" && /* @__PURE__ */ jsx50(
+          labelPosition !== "right" && /* @__PURE__ */ jsx53(
             "div",
             {
               className: cn(
@@ -4370,8 +4651,8 @@ var Divider = React36.forwardRef(
 Divider.displayName = "Divider";
 
 // src/container.tsx
-import * as React37 from "react";
-import { jsx as jsx51 } from "react/jsx-runtime";
+import * as React38 from "react";
+import { jsx as jsx54 } from "react/jsx-runtime";
 var SIZE_CLASSES6 = {
   sm: "max-w-content-sm",
   md: "max-w-content-md",
@@ -4379,8 +4660,8 @@ var SIZE_CLASSES6 = {
   xl: "max-w-content-xl",
   full: "max-w-full"
 };
-var Container = React37.forwardRef(
-  ({ className, size = "xl", padded = true, ...props }, ref) => /* @__PURE__ */ jsx51(
+var Container = React38.forwardRef(
+  ({ className, size = "xl", padded = true, ...props }, ref) => /* @__PURE__ */ jsx54(
     "div",
     {
       ref,
@@ -4397,16 +4678,16 @@ var Container = React37.forwardRef(
 Container.displayName = "Container";
 
 // src/page-content.tsx
-import * as React38 from "react";
-import { jsx as jsx52 } from "react/jsx-runtime";
+import * as React39 from "react";
+import { jsx as jsx55 } from "react/jsx-runtime";
 var GAP_CLASSES2 = {
   sm: "space-y-4",
   md: "space-y-6",
   lg: "space-y-8",
   none: ""
 };
-var PageContent = React38.forwardRef(
-  ({ className, gap = "md", padded = true, children, ...props }, ref) => /* @__PURE__ */ jsx52(
+var PageContent = React39.forwardRef(
+  ({ className, gap = "md", padded = true, children, ...props }, ref) => /* @__PURE__ */ jsx55(
     "div",
     {
       ref,
@@ -4419,14 +4700,14 @@ var PageContent = React38.forwardRef(
 PageContent.displayName = "PageContent";
 
 // src/media-object.tsx
-import * as React39 from "react";
-import { jsx as jsx53, jsxs as jsxs40 } from "react/jsx-runtime";
+import * as React40 from "react";
+import { jsx as jsx56, jsxs as jsxs42 } from "react/jsx-runtime";
 var MEDIA_SIZE = {
   sm: "h-8 w-8",
   md: "h-10 w-10",
   lg: "h-12 w-12"
 };
-var MediaObject = React39.forwardRef(
+var MediaObject = React40.forwardRef(
   ({
     className,
     media,
@@ -4439,7 +4720,7 @@ var MediaObject = React39.forwardRef(
     ...props
   }, ref) => {
     if (stacked) {
-      return /* @__PURE__ */ jsxs40(
+      return /* @__PURE__ */ jsxs42(
         "div",
         {
           ref,
@@ -4449,17 +4730,17 @@ var MediaObject = React39.forwardRef(
           ),
           ...props,
           children: [
-            /* @__PURE__ */ jsx53("div", { className: cn("flex-shrink-0", MEDIA_SIZE[mediaSize]), children: media }),
-            /* @__PURE__ */ jsxs40("div", { className: "min-w-0", children: [
-              title && /* @__PURE__ */ jsx53("p", { className: "font-medium text-foreground", children: title }),
-              description && /* @__PURE__ */ jsx53("p", { className: "text-sm text-muted-foreground", children: description })
+            /* @__PURE__ */ jsx56("div", { className: cn("flex-shrink-0", MEDIA_SIZE[mediaSize]), children: media }),
+            /* @__PURE__ */ jsxs42("div", { className: "min-w-0", children: [
+              title && /* @__PURE__ */ jsx56("p", { className: "font-medium text-foreground", children: title }),
+              description && /* @__PURE__ */ jsx56("p", { className: "text-sm text-muted-foreground", children: description })
             ] }),
-            action && /* @__PURE__ */ jsx53("div", { children: action })
+            action && /* @__PURE__ */ jsx56("div", { children: action })
           ]
         }
       );
     }
-    return /* @__PURE__ */ jsxs40(
+    return /* @__PURE__ */ jsxs42(
       "div",
       {
         ref,
@@ -4470,12 +4751,12 @@ var MediaObject = React39.forwardRef(
         ),
         ...props,
         children: [
-          /* @__PURE__ */ jsx53("div", { className: cn("flex-shrink-0", MEDIA_SIZE[mediaSize]), children: media }),
-          /* @__PURE__ */ jsxs40("div", { className: "min-w-0 flex-1", children: [
-            title && /* @__PURE__ */ jsx53("p", { className: "font-medium text-foreground", children: title }),
-            description && /* @__PURE__ */ jsx53("p", { className: "text-sm text-muted-foreground", children: description })
+          /* @__PURE__ */ jsx56("div", { className: cn("flex-shrink-0", MEDIA_SIZE[mediaSize]), children: media }),
+          /* @__PURE__ */ jsxs42("div", { className: "min-w-0 flex-1", children: [
+            title && /* @__PURE__ */ jsx56("p", { className: "font-medium text-foreground", children: title }),
+            description && /* @__PURE__ */ jsx56("p", { className: "text-sm text-muted-foreground", children: description })
           ] }),
-          action && /* @__PURE__ */ jsx53("div", { className: "flex-shrink-0", children: action })
+          action && /* @__PURE__ */ jsx56("div", { className: "flex-shrink-0", children: action })
         ]
       }
     );
@@ -4483,11 +4764,332 @@ var MediaObject = React39.forwardRef(
 );
 MediaObject.displayName = "MediaObject";
 
+// src/page-patterns.tsx
+import * as React41 from "react";
+import { jsx as jsx57, jsxs as jsxs43 } from "react/jsx-runtime";
+var GUTTER_WIDTHS = {
+  /** A single column of reading or a short list. */
+  narrow: "max-w-content-md",
+  /** A detail or list page with a side panel. */
+  default: "max-w-content-xl"
+};
+var PageGutter = React41.forwardRef(
+  ({ className, width = "default", ...props }, ref) => /* @__PURE__ */ jsx57(
+    "div",
+    {
+      ref,
+      className: cn(
+        "mx-auto flex w-full min-w-0 flex-col gap-6 px-4 py-6 sm:px-6 sm:py-8 lg:px-8",
+        GUTTER_WIDTHS[width],
+        className
+      ),
+      ...props
+    }
+  )
+);
+PageGutter.displayName = "PageGutter";
+var PageHeading = React41.forwardRef(
+  ({ className, title, description, meta, actions, ...props }, ref) => /* @__PURE__ */ jsxs43(
+    "header",
+    {
+      ref,
+      className: cn(
+        "flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs43("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [
+          /* @__PURE__ */ jsx57("h1", { className: "break-words text-2xl font-semibold tracking-tight text-foreground sm:text-3xl", children: title }),
+          description && /* @__PURE__ */ jsx57("p", { className: "break-words text-sm text-muted-foreground sm:text-base", children: description }),
+          meta && /* @__PURE__ */ jsx57("div", { className: "mt-2 flex flex-wrap gap-2", children: meta })
+        ] }),
+        actions && /* @__PURE__ */ jsx57("div", { className: "flex shrink-0 flex-wrap items-center gap-2", children: actions })
+      ]
+    }
+  )
+);
+PageHeading.displayName = "PageHeading";
+var SectionCard = React41.forwardRef(
+  ({
+    className,
+    title,
+    description,
+    actions,
+    size = "default",
+    flush = false,
+    children,
+    ...props
+  }, ref) => {
+    const pad = size === "compact" ? "p-4" : "p-4 sm:p-6";
+    const hasHead = Boolean(title || description || actions);
+    return /* @__PURE__ */ jsxs43(
+      Card,
+      {
+        ref,
+        className: cn("min-w-0 overflow-hidden", className),
+        ...props,
+        children: [
+          hasHead && /* @__PURE__ */ jsxs43(
+            "div",
+            {
+              className: cn(
+                "flex flex-wrap items-start justify-between gap-x-4 gap-y-2",
+                pad,
+                flush || !children ? "" : "pb-0 sm:pb-0",
+                flush && children ? "border-b border-border" : ""
+              ),
+              children: [
+                /* @__PURE__ */ jsxs43("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [
+                  title && /* @__PURE__ */ jsx57(
+                    "h2",
+                    {
+                      className: cn(
+                        "break-words font-semibold text-foreground",
+                        size === "compact" ? "text-sm" : "text-base"
+                      ),
+                      children: title
+                    }
+                  ),
+                  description && /* @__PURE__ */ jsx57("p", { className: "text-sm text-muted-foreground", children: description })
+                ] }),
+                actions && /* @__PURE__ */ jsx57("div", { className: "flex shrink-0 flex-wrap items-center gap-2", children: actions })
+              ]
+            }
+          ),
+          children !== void 0 && children !== null && /* @__PURE__ */ jsx57("div", { className: cn("min-w-0", !flush && pad), children })
+        ]
+      }
+    );
+  }
+);
+SectionCard.displayName = "SectionCard";
+var TabbedCard = React41.forwardRef(
+  ({ className, tabs, tabsLabel, children, ...props }, ref) => /* @__PURE__ */ jsxs43(
+    Card,
+    {
+      ref,
+      className: cn("min-w-0 overflow-hidden", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx57("div", { className: "px-4 pt-3 sm:px-6", children: /* @__PURE__ */ jsx57(TabBar, { variant: "underline", "aria-label": tabsLabel, children: tabs }) }),
+        /* @__PURE__ */ jsx57("div", { className: "min-w-0 p-4 sm:p-6", children })
+      ]
+    }
+  )
+);
+TabbedCard.displayName = "TabbedCard";
+var SidePanelLayout = React41.forwardRef(
+  ({ className, aside, asideLabel, children, ...props }, ref) => /* @__PURE__ */ jsxs43(
+    "div",
+    {
+      ref,
+      className: cn(
+        "grid min-w-0 grid-cols-1 items-start gap-6 lg:grid-cols-3",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx57("div", { className: "flex min-w-0 flex-col gap-6 lg:col-span-2", children }),
+        /* @__PURE__ */ jsx57(
+          "aside",
+          {
+            "aria-label": asideLabel,
+            className: "flex min-w-0 flex-col gap-4 lg:sticky lg:top-6",
+            children: aside
+          }
+        )
+      ]
+    }
+  )
+);
+SidePanelLayout.displayName = "SidePanelLayout";
+
+// src/intent-badge.tsx
+import * as React42 from "react";
+import { jsx as jsx58 } from "react/jsx-runtime";
+var INTENT_CLASSES = {
+  neutral: "bg-muted text-muted-foreground border-border",
+  // the primary tint is lighter than the intents': `primary-text` on a 10%
+  // tint over the page grey drew 4.46:1 (W1 sheet), under AA
+  primary: "bg-primary/5 text-primary-text border-primary/30",
+  ...INTENT_SUBTLE_STYLES
+};
+var IntentBadge = React42.forwardRef(
+  ({ className, intent = "neutral", children, ...props }, ref) => /* @__PURE__ */ jsx58(
+    "span",
+    {
+      ref,
+      title: typeof children === "string" ? children : void 0,
+      className: cn(
+        "inline-flex max-w-full items-center rounded-full border px-2.5 py-0.5 text-xs font-medium",
+        INTENT_CLASSES[intent],
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx58("span", { className: "truncate", children: isEmptyValue(children) ? /* @__PURE__ */ jsx58(EmptyValue, {}) : children })
+    }
+  )
+);
+IntentBadge.displayName = "IntentBadge";
+
+// src/overflow-menu.tsx
+import * as React43 from "react";
+import { Fragment as Fragment10, jsx as jsx59, jsxs as jsxs44 } from "react/jsx-runtime";
+function OverflowMenu({
+  label,
+  items,
+  defaultOpen = false,
+  className
+}) {
+  const [open, setOpen] = React43.useState(defaultOpen);
+  const menuId = React43.useId();
+  React43.useEffect(() => {
+    if (!open) return;
+    const onKey = (e) => {
+      if (e.key === "Escape") setOpen(false);
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [open]);
+  return /* @__PURE__ */ jsxs44("div", { className: cn("relative inline-block", className), children: [
+    /* @__PURE__ */ jsx59(
+      Button,
+      {
+        variant: "outline",
+        size: "icon",
+        "aria-label": label,
+        "aria-haspopup": "menu",
+        "aria-expanded": open,
+        "aria-controls": open ? menuId : void 0,
+        onClick: () => setOpen(!open),
+        children: /* @__PURE__ */ jsx59(Icon, { name: "ellipsis", size: "sm" })
+      }
+    ),
+    open && /* @__PURE__ */ jsxs44(Fragment10, { children: [
+      /* @__PURE__ */ jsx59(
+        "div",
+        {
+          "aria-hidden": "true",
+          className: "z-dropdown fixed inset-0",
+          onClick: () => setOpen(false)
+        }
+      ),
+      /* @__PURE__ */ jsx59(
+        "div",
+        {
+          id: menuId,
+          role: "menu",
+          "aria-label": label,
+          className: "z-dropdown absolute right-0 top-full mt-2 flex w-56 max-w-[calc(100vw-2rem)] flex-col rounded-lg border border-border bg-popover p-1 text-popover-foreground shadow-lg",
+          children: items.map((item) => /* @__PURE__ */ jsxs44(
+            "button",
+            {
+              type: "button",
+              role: "menuitem",
+              disabled: item.disabled,
+              onClick: () => {
+                setOpen(false);
+                item.onSelect();
+              },
+              className: cn(
+                "flex w-full items-center gap-2 rounded-md px-3 py-2 text-left text-sm transition-colors hover:bg-muted focus-visible:bg-muted focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50",
+                item.destructive ? "text-intent-error-foreground" : "text-popover-foreground"
+              ),
+              children: [
+                item.icon && /* @__PURE__ */ jsx59(Icon, { name: item.icon, size: "sm" }),
+                /* @__PURE__ */ jsx59("span", { className: "min-w-0 truncate", children: item.label })
+              ]
+            },
+            item.label
+          ))
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/stage-list.tsx
+import * as React44 from "react";
+import { jsx as jsx60, jsxs as jsxs45 } from "react/jsx-runtime";
+var StageList = React44.forwardRef(
+  ({ stages, outcomes = [], current, ...props }, ref) => {
+    const at = stages.findIndex((s) => s.value === current);
+    const outcome = outcomes.find((s) => s.value === current);
+    if (at < 0 && !outcome)
+      throw new Error(
+        `StageList: current "${current}" is not one of the stages (${stages.map((s) => s.value).join(", ")}) or outcomes (${outcomes.map((s) => s.value).join(", ") || "none"})`
+      );
+    return /* @__PURE__ */ jsxs45(
+      Stepper,
+      {
+        ref,
+        variant: "vertical",
+        size: "sm",
+        activeStep: outcome ? stages.length : at,
+        ...props,
+        children: [
+          stages.map((s) => /* @__PURE__ */ jsx60(
+            StepperStep,
+            {
+              label: s.label,
+              disabled: outcome !== void 0
+            },
+            s.value
+          )),
+          outcome && /* @__PURE__ */ jsx60(StepperStep, { label: outcome.label, error: true }, outcome.value)
+        ]
+      }
+    );
+  }
+);
+StageList.displayName = "StageList";
+
+// src/clamped-list.tsx
+import * as React45 from "react";
+import { jsx as jsx61, jsxs as jsxs46 } from "react/jsx-runtime";
+var MAX_HEIGHTS = {
+  sm: "max-h-48",
+  md: "max-h-72",
+  lg: "max-h-96"
+};
+var ClampedList = React45.forwardRef(
+  ({ className, label, maxHeight = "md", children, ...props }, ref) => /* @__PURE__ */ jsxs46(
+    "div",
+    {
+      ref,
+      role: "region",
+      "aria-label": label,
+      tabIndex: 0,
+      className: cn(
+        "min-w-0 overflow-y-auto overscroll-contain rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        MAX_HEIGHTS[maxHeight],
+        SCROLL_HINT_Y,
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx61(
+          "div",
+          {
+            "aria-hidden": "true",
+            "data-scroll-hint": "y",
+            className: SCROLL_HINT_Y_MARK,
+            children: /* @__PURE__ */ jsx61("span", { className: "flex items-center rounded-full border border-border bg-card px-2 text-muted-foreground shadow-sm", children: /* @__PURE__ */ jsx61(Icon, { name: "chevron-down", size: "sm" }) })
+          }
+        )
+      ]
+    }
+  )
+);
+ClampedList.displayName = "ClampedList";
+
 // src/hooks/use-debounce.ts
-import { useEffect as useEffect8, useState as useState9 } from "react";
+import { useEffect as useEffect10, useState as useState11 } from "react";
 function useDebounce(value, ms) {
-  const [debounced, setDebounced] = useState9(value);
-  useEffect8(() => {
+  const [debounced, setDebounced] = useState11(value);
+  useEffect10(() => {
     const handle = setTimeout(() => setDebounced(value), ms);
     return () => clearTimeout(handle);
   }, [value, ms]);
@@ -4509,13 +5111,14 @@ export {
   Button,
   ButtonGroup,
   ButtonGroupItem,
-  Calendar,
+  Calendar2 as Calendar,
   Card,
   CardContent,
   CardDescription,
   CardFooter,
   CardHeader,
   CardTitle,
+  ClampedList,
   CollapsibleSidebar,
   Combobox,
   CommandPalette,
@@ -4532,7 +5135,9 @@ export {
   DrawerBody,
   DrawerFooter,
   DrawerHeader,
+  EMPTY_VALUE_GLYPH,
   EmptyState,
+  EmptyValue,
   FilterChip,
   FormError,
   FormField,
@@ -4546,9 +5151,14 @@ export {
   GridListItem,
   HorizontalCard,
   HoverCard,
+  ICONS,
+  ICON_SIZES,
+  INTENT_SUBTLE_STYLES,
+  Icon,
   ImageCard,
   Input,
   InputGroup,
+  IntentBadge,
   IntentIcon,
   MarkdownRenderer,
   MediaObject,
@@ -4561,12 +5171,18 @@ export {
   NotificationBanner,
   NotificationPanel,
   NotificationPanelItem,
+  OverflowMenu,
   PageContent,
+  PageGutter,
+  PageHeading,
   Pagination,
   PaginationButton,
   Popover,
   RadioGroup,
+  SCROLL_HINT_X,
+  SectionCard,
   SectionHeading,
+  SidePanelLayout,
   SimpleAccordion,
   SkeletonBar,
   SkeletonCard,
@@ -4576,6 +5192,7 @@ export {
   SkeletonTable,
   StackedList,
   StackedListItem,
+  StageList,
   StatCardExtended,
   StatGroup,
   Stepper,
@@ -4584,6 +5201,7 @@ export {
   Switch,
   TabBar,
   TabBarItem,
+  TabbedCard,
   TableBody,
   TableCaption,
   TableCell,
@@ -4600,6 +5218,7 @@ export {
   buttonVariants,
   cn,
   getPageRange,
+  isEmptyValue,
   useDebounce,
   useSidebar
 };