@conscia-labs/design-system 0.4.0 → 1.0.1

package/dist/{chunk-KYH7IZ3Z.js → chunk-WEI3PU4A.js}

@@ -4,6 +4,16 @@ import {
   densityOptions
 } from "./chunk-YNQWIH6V.js";
 import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogBody,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
   Button,
   Card,
   Checkbox,
@@ -12,19 +22,18 @@ import {
   CollapsibleTrigger,
   Dialog,
   DialogBody,
-  DialogClose,
   DialogContent,
   DialogDescription,
-  DialogFooter,
   DialogHeader,
   DialogTitle,
   DialogTrigger,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuGroup,
-  DropdownMenuItem,
   DropdownMenuLabel,
+  DropdownMenuLinkItem,
   DropdownMenuTrigger,
+  IconButton,
   Input,
   Select,
   SelectContent,
@@ -37,9 +46,11 @@ import {
   SheetDescription,
   SheetHeader,
   SheetTitle,
+  ShortcutHint,
   Skeleton,
   Table,
   TableBody,
+  TableCaption,
   TableCell,
   TableHead,
   TableHeader,
@@ -51,8 +62,10 @@ import {
   Tooltip,
   TooltipContent,
   TooltipProvider,
-  TooltipTrigger
-} from "./chunk-RAGHGWLB.js";
+  TooltipTrigger,
+  index_parts_exports,
+  useRender
+} from "./chunk-YAJUTCGD.js";
 import {
   cn
 } from "./chunk-JU5DQXFC.js";
@@ -77,7 +90,7 @@ function PaginationControls({
     "div",
     {
       "data-slot": "pagination-controls",
-      className: cn("flex flex-col gap-2 border-t border-border-subtle px-5 py-3 text-sm text-muted-foreground sm:flex-row sm:items-center sm:justify-between", className),
+      className: cn("flex flex-col gap-2 border-t border-border-subtle px-5 py-3 text-sm text-text-supporting sm:flex-row sm:items-center sm:justify-between", className),
       ...props,
       children: [
         /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [
@@ -91,14 +104,14 @@ function PaginationControls({
           ] }) : null
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
-          /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", size: "icon", className: "size-8", "aria-label": "Previous page", onClick: onPrevious ?? (() => onPageChange?.(currentPage - 1)), disabled: currentPage <= 1, children: /* @__PURE__ */ jsx(ChevronLeft, {}) }),
-          onPageChange ? pageItems(currentPage, pageCount).map((item, index) => item === "ellipsis" ? /* @__PURE__ */ jsx("span", { className: "flex size-8 items-center justify-center text-muted-foreground", "aria-hidden": "true", children: "\u2026" }, `ellipsis-${index}`) : /* @__PURE__ */ jsx(Button, { type: "button", variant: item === currentPage ? "secondary" : "ghost", size: "icon", className: "size-8", "aria-label": `Page ${item}`, "aria-current": item === currentPage ? "page" : void 0, onClick: () => onPageChange(item), children: item }, item)) : /* @__PURE__ */ jsxs("span", { className: "px-2 text-[var(--ds-metadata)]", children: [
+          /* @__PURE__ */ jsx(IconButton, { type: "button", variant: "outline", size: "sm", className: "size-8", "aria-label": "Previous page", onClick: onPrevious ?? (() => onPageChange?.(currentPage - 1)), disabled: currentPage <= 1, children: /* @__PURE__ */ jsx(ChevronLeft, {}) }),
+          onPageChange ? pageItems(currentPage, pageCount).map((item, index) => item === "ellipsis" ? /* @__PURE__ */ jsx("span", { className: "flex size-8 items-center justify-center text-text-supporting", "aria-hidden": "true", children: "\u2026" }, `ellipsis-${index}`) : /* @__PURE__ */ jsx(IconButton, { type: "button", variant: item === currentPage ? "secondary" : "ghost", size: "sm", className: "size-8", "aria-label": `Page ${item}`, "aria-current": item === currentPage ? "page" : void 0, onClick: () => onPageChange(item), children: item }, item)) : /* @__PURE__ */ jsxs("span", { className: "px-2 text-[var(--ds-metadata)]", children: [
             "Page ",
             currentPage,
             " of ",
             pageCount
           ] }),
-          /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", size: "icon", className: "size-8", "aria-label": "Next page", onClick: onNext ?? (() => onPageChange?.(currentPage + 1)), disabled: currentPage >= pageCount, children: /* @__PURE__ */ jsx(ChevronRight, {}) })
+          /* @__PURE__ */ jsx(IconButton, { type: "button", variant: "outline", size: "sm", className: "size-8", "aria-label": "Next page", onClick: onNext ?? (() => onPageChange?.(currentPage + 1)), disabled: currentPage >= pageCount, children: /* @__PURE__ */ jsx(ChevronRight, {}) })
         ] })
       ]
     }
@@ -148,6 +161,7 @@ function DataTable({
   pageSizeOptions,
   totalLabel,
   mobileRow,
+  caption,
   empty,
   className
 }) {
@@ -168,7 +182,8 @@ function DataTable({
           Checkbox,
           {
             "aria-label": "Select all rows on this page",
-            checked: table2.getIsAllPageRowsSelected() || table2.getIsSomePageRowsSelected() && "indeterminate",
+            checked: table2.getIsAllPageRowsSelected(),
+            indeterminate: table2.getIsSomePageRowsSelected() && !table2.getIsAllPageRowsSelected(),
             onCheckedChange: (checked) => table2.toggleAllPageRowsSelected(Boolean(checked))
           }
         ),
@@ -240,8 +255,9 @@ function DataTable({
   if (!data.length && empty) return /* @__PURE__ */ jsx2(Fragment, { children: empty });
   const visibleRows = table.getRowModel().rows;
   const showPagination = Boolean(pagination && onPaginationChange);
-  return /* @__PURE__ */ jsxs2("div", { "data-slot": "data-table", className: cn("bg-background", className), children: [
+  return /* @__PURE__ */ jsxs2("div", { "data-slot": "data-table", className: cn("bg-canvas", className), children: [
     /* @__PURE__ */ jsx2("div", { className: mobileRow ? "hidden md:block" : void 0, children: /* @__PURE__ */ jsxs2(Table, { children: [
+      caption ? /* @__PURE__ */ jsx2(TableCaption, { children: caption }) : null,
       /* @__PURE__ */ jsx2(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx2(TableRow, { children: headerGroup.headers.map((header) => {
         const meta = header.column.columnDef.meta;
         const canSort = header.column.getCanSort();
@@ -257,7 +273,7 @@ function DataTable({
                 type: "button",
                 variant: "ghost",
                 size: "sm",
-                className: "-ml-2 h-8 gap-1.5 px-2 text-[var(--ds-metadata)] font-semibold uppercase text-muted-foreground hover:text-foreground",
+                className: "-ml-2 h-8 gap-1.5 px-2 text-[var(--ds-metadata)] font-semibold uppercase text-text-supporting hover:text-text-primary",
                 onClick: header.column.getToggleSortingHandler(),
                 "aria-label": `Sort by ${meta?.label ?? header.column.id}`,
                 children: [
@@ -277,10 +293,11 @@ function DataTable({
         return /* @__PURE__ */ jsx2(
           TableRow,
           {
-            "data-state": row.getIsSelected() ? "selected" : void 0,
+            "data-selected": row.getIsSelected() ? "true" : void 0,
+            "aria-selected": row.getIsSelected() ? "true" : void 0,
             tabIndex: rowClickable ? 0 : void 0,
             "aria-label": rowClickable ? getRowLabel?.(row.original) ?? row.id : void 0,
-            className: cn(rowClickable && "cursor-pointer outline-none focus-visible:ring-[3px] focus-visible:ring-ring/45"),
+            className: cn(rowClickable && "cursor-pointer outline-none focus-visible:ring-[3px] focus-visible:ring-focus/45"),
             onClick: () => {
               if (rowClickable) onRowClick?.(row.original);
             },
@@ -325,6 +342,7 @@ function EntityTable({
   onRowClick,
   getRowLabel,
   rowActions,
+  caption,
   className
 }) {
   return /* @__PURE__ */ jsx3(
@@ -338,37 +356,200 @@ function EntityTable({
       onRowClick,
       getRowLabel,
       rowActions,
+      caption,
       className
     }
   );
 }
 
+// src/patterns/command-palette.tsx
+import * as React2 from "react";
+import { SearchIcon } from "lucide-react";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+function CommandPalette({
+  className,
+  closeOnSelect = true,
+  defaultOpen = false,
+  description,
+  emptyMessage = "No commands found.",
+  items,
+  onOpenChange,
+  onSelect,
+  open,
+  placeholder = "Search commands...",
+  title = "Command menu",
+  trigger,
+  ...props
+}) {
+  const [query, setQuery] = React2.useState("");
+  const [internalOpen, setInternalOpen] = React2.useState(defaultOpen);
+  const isControlled = open !== void 0;
+  const isOpen = open ?? internalOpen;
+  const filteredItems = React2.useMemo(() => {
+    const normalizedQuery = query.trim().toLocaleLowerCase();
+    if (!normalizedQuery) {
+      return items;
+    }
+    return items.filter(
+      (item) => [item.label, ...item.keywords ?? []].some(
+        (value) => value.toLocaleLowerCase().includes(normalizedQuery)
+      )
+    );
+  }, [items, query]);
+  const handleOpenChange = React2.useCallback(
+    (nextOpen) => {
+      if (!isControlled) {
+        setInternalOpen(nextOpen);
+      }
+      if (nextOpen) {
+        setQuery("");
+      }
+      onOpenChange?.(nextOpen);
+    },
+    [isControlled, onOpenChange]
+  );
+  const handleSelect = React2.useCallback(
+    (item) => {
+      onSelect(item);
+      if (closeOnSelect) {
+        handleOpenChange(false);
+      }
+    },
+    [closeOnSelect, handleOpenChange, onSelect]
+  );
+  return /* @__PURE__ */ jsx4("div", { "data-slot": "command-palette", className: cn("contents", className), ...props, children: /* @__PURE__ */ jsxs3(Dialog, { open: isOpen, onOpenChange: handleOpenChange, children: [
+    trigger ? /* @__PURE__ */ jsx4(DialogTrigger, { render: trigger }) : null,
+    /* @__PURE__ */ jsxs3(
+      DialogContent,
+      {
+        showCloseButton: false,
+        size: "small",
+        "aria-label": typeof title === "string" ? void 0 : "Command menu",
+        className: "max-w-xl gap-0 p-0",
+        children: [
+          /* @__PURE__ */ jsxs3(DialogHeader, { className: "sr-only", children: [
+            /* @__PURE__ */ jsx4(DialogTitle, { children: title }),
+            description ? /* @__PURE__ */ jsx4(DialogDescription, { children: description }) : null
+          ] }),
+          /* @__PURE__ */ jsx4(DialogBody, { className: "overflow-hidden", children: /* @__PURE__ */ jsxs3(
+            index_parts_exports.Root,
+            {
+              items: filteredItems,
+              filter: () => true,
+              open: true,
+              autoHighlight: true,
+              inputValue: query,
+              onInputValueChange: setQuery,
+              onValueChange: (item) => {
+                if (item) {
+                  handleSelect(item);
+                }
+              },
+              itemToStringLabel: (item) => [item.label, ...item.keywords ?? []].join(" "),
+              itemToStringValue: (item) => item.id,
+              children: [
+                /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-2 border-b border-border-subtle px-4", children: [
+                  /* @__PURE__ */ jsx4(SearchIcon, { "aria-hidden": "true", className: "size-4 shrink-0 text-text-supporting" }),
+                  /* @__PURE__ */ jsx4(
+                    index_parts_exports.Input,
+                    {
+                      "aria-label": "Search commands",
+                      autoFocus: true,
+                      className: "ds-type-control h-12 min-w-0 flex-1 bg-transparent outline-none placeholder:text-text-supporting",
+                      placeholder
+                    }
+                  )
+                ] }),
+                filteredItems.length === 0 ? /* @__PURE__ */ jsx4("div", { role: "status", className: "px-3 py-8 text-center text-sm text-text-supporting", children: emptyMessage }) : null,
+                /* @__PURE__ */ jsx4(
+                  index_parts_exports.List,
+                  {
+                    "aria-label": "Commands",
+                    className: "max-h-[min(24rem,calc(100vh-10rem))] overflow-y-auto p-2 outline-none",
+                    children: filteredItems.map((item, index) => /* @__PURE__ */ jsxs3(React2.Fragment, { children: [
+                      item.group && (index === 0 || filteredItems[index - 1]?.group !== item.group) ? /* @__PURE__ */ jsx4("div", { role: "presentation", className: "px-3 pb-1 pt-3 text-xs font-semibold uppercase tracking-wide text-text-supporting first:pt-1", children: item.group }) : null,
+                      /* @__PURE__ */ jsxs3(
+                        index_parts_exports.Item,
+                        {
+                          index,
+                          value: item,
+                          disabled: item.disabled,
+                          className: "data-highlighted:bg-surface-muted data-highlighted:text-text-primary relative flex min-w-0 items-start gap-3 rounded-md px-3 py-2.5 text-left outline-none data-disabled:pointer-events-none data-disabled:opacity-50",
+                          children: [
+                            item.icon ? /* @__PURE__ */ jsx4("span", { className: "mt-0.5 flex size-4 shrink-0 items-center justify-center text-text-supporting", children: item.icon }) : null,
+                            /* @__PURE__ */ jsxs3("span", { className: "min-w-0 flex-1", children: [
+                              /* @__PURE__ */ jsx4("span", { className: "block truncate text-sm font-medium", children: item.label }),
+                              item.description ? /* @__PURE__ */ jsx4("span", { className: "mt-0.5 block truncate text-xs text-text-supporting", children: item.description }) : null
+                            ] }),
+                            item.shortcut ? /* @__PURE__ */ jsx4("span", { className: "shrink-0 text-xs text-text-supporting", children: item.shortcut }) : null
+                          ]
+                        }
+                      )
+                    ] }, item.id))
+                  }
+                )
+              ]
+            }
+          ) })
+        ]
+      }
+    )
+  ] }) });
+}
+
 // src/patterns/detail-back-link.tsx
 import { ArrowLeft } from "lucide-react";
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 function DetailBackLink({ label, className, ...props }) {
-  return /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsxs4(
     "a",
     {
       "data-slot": "detail-back-link",
       className: cn(
-        "inline-flex h-8 w-fit items-center gap-2 rounded-md px-2 text-sm font-medium text-muted-foreground outline-none transition-colors hover:bg-surface-muted hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/45",
+        "inline-flex h-8 w-fit items-center gap-2 rounded-md px-2 text-sm font-medium text-text-supporting outline-none transition-colors hover:bg-surface-muted hover:text-text-primary focus-visible:ring-[3px] focus-visible:ring-focus/45",
         className
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsx4(ArrowLeft, { className: "size-4", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx5(ArrowLeft, { className: "size-4", "aria-hidden": "true" }),
         label
       ]
     }
   );
 }
 
+// src/patterns/filter-bar.tsx
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+function FilterBar({
+  children,
+  clearAllLabel = "Clear all",
+  className,
+  onClearAll,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs5(
+    "div",
+    {
+      "data-slot": "filter-bar",
+      className: cn(
+        "flex min-w-0 flex-wrap items-center gap-2 rounded-[var(--ds-radius-control)] border border-border-subtle bg-surface-muted/60 px-2 py-1.5",
+        className
+      ),
+      role: "group",
+      "aria-label": props["aria-label"] ?? "Active filters",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx6("div", { className: "flex min-w-0 flex-1 flex-wrap items-center gap-1.5", children }),
+        onClearAll ? /* @__PURE__ */ jsx6(Button, { type: "button", variant: "ghost", size: "sm", onClick: onClearAll, className: "shrink-0", children: clearAllLabel }) : null
+      ]
+    }
+  );
+}
+
 // src/patterns/app-shell.tsx
-import * as React2 from "react";
-import { Slot } from "@radix-ui/react-slot";
+import * as React3 from "react";
 import { PanelLeftIcon, Search, X } from "lucide-react";
-import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
 var SIDEBAR_COOKIE_NAME = "conscia_sidebar_state";
 var SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 30;
 var SIDEBAR_KEYBOARD_SHORTCUT = "b";
@@ -417,17 +598,17 @@ function subscribeToSidebarOpen(onStoreChange) {
     window.removeEventListener("storage", onStorage);
   };
 }
-var AppShellContext = React2.createContext(null);
+var AppShellContext = React3.createContext(null);
 function useAppShell() {
-  const context = React2.useContext(AppShellContext);
+  const context = React3.useContext(AppShellContext);
   if (!context) {
     throw new Error("useAppShell must be used within AppShell.");
   }
   return context;
 }
 function useMediaQuery(query) {
-  const [matches, setMatches] = React2.useState(false);
-  React2.useEffect(() => {
+  const [matches, setMatches] = React3.useState(false);
+  React3.useEffect(() => {
     const media = window.matchMedia(query);
     const sync = () => setMatches(media.matches);
     sync();
@@ -436,6 +617,44 @@ function useMediaQuery(query) {
   }, [query]);
   return matches;
 }
+function useSidebarOverflow() {
+  const contentRef = React3.useRef(null);
+  const subscribe = React3.useCallback((onStoreChange) => {
+    const element = contentRef.current;
+    if (!element) {
+      return () => void 0;
+    }
+    const handleScroll = () => onStoreChange();
+    element.addEventListener("scroll", handleScroll, { passive: true });
+    const resizeObserver = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(onStoreChange);
+    resizeObserver?.observe(element);
+    window.addEventListener("resize", onStoreChange);
+    return () => {
+      element.removeEventListener("scroll", handleScroll);
+      resizeObserver?.disconnect();
+      window.removeEventListener("resize", onStoreChange);
+    };
+  }, []);
+  const getSnapshot = React3.useCallback(() => {
+    const element = contentRef.current;
+    if (!element) {
+      return 0;
+    }
+    const hasScrollBefore = element.scrollTop > 1;
+    const hasScrollAfter = element.scrollHeight - element.clientHeight - element.scrollTop > 1;
+    return (hasScrollBefore ? 1 : 0) | (hasScrollAfter ? 2 : 0);
+  }, []);
+  const scrollState = React3.useSyncExternalStore(
+    subscribe,
+    getSnapshot,
+    () => 0
+  );
+  return {
+    contentRef,
+    hasScrollBefore: Boolean(scrollState & 1),
+    hasScrollAfter: Boolean(scrollState & 2)
+  };
+}
 function AppShell({
   defaultSidebarOpen = true,
   children,
@@ -444,10 +663,10 @@ function AppShell({
   ...props
 }) {
   const isMobile = useMediaQuery("(max-width: 1023px)");
-  const [sidebarOpen, setSidebarOpenState] = React2.useState(defaultSidebarOpen);
-  const [sidebarSide, setSidebarSide] = React2.useState("left");
-  const [mobileOpen, setMobileOpen] = React2.useState(false);
-  React2.useEffect(() => {
+  const [sidebarOpen, setSidebarOpenState] = React3.useState(defaultSidebarOpen);
+  const [sidebarSide, setSidebarSide] = React3.useState("left");
+  const [mobileOpen, setMobileOpen] = React3.useState(false);
+  React3.useEffect(() => {
     function syncSidebarOpen() {
       setSidebarOpenState(readPersistedSidebarOpen() ?? defaultSidebarOpen);
     }
@@ -455,17 +674,17 @@ function AppShell({
     queueMicrotask(syncSidebarOpen);
     return unsubscribe;
   }, [defaultSidebarOpen]);
-  const setSidebarOpen = React2.useCallback((open) => {
+  const setSidebarOpen = React3.useCallback((open) => {
     persistSidebarOpen(open);
   }, []);
-  const toggleSidebar = React2.useCallback(() => {
+  const toggleSidebar = React3.useCallback(() => {
     if (isMobile) {
       setMobileOpen((current) => !current);
       return;
     }
     persistSidebarOpen(!sidebarOpen);
   }, [isMobile, sidebarOpen]);
-  React2.useEffect(() => {
+  React3.useEffect(() => {
     const onKeyDown = (event) => {
       if (event.key.toLowerCase() === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
         event.preventDefault();
@@ -475,7 +694,7 @@ function AppShell({
     window.addEventListener("keydown", onKeyDown);
     return () => window.removeEventListener("keydown", onKeyDown);
   }, [toggleSidebar]);
-  const contextValue = React2.useMemo(
+  const contextValue = React3.useMemo(
     () => ({
       sidebarState: sidebarOpen ? "expanded" : "collapsed",
       sidebarSide,
@@ -496,7 +715,7 @@ function AppShell({
       toggleSidebar
     ]
   );
-  return /* @__PURE__ */ jsx5(AppShellContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx5(TooltipProvider, { delayDuration: 120, children: /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx7(AppShellContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx7(TooltipProvider, { delayDuration: 120, children: /* @__PURE__ */ jsx7(
     "div",
     {
       "data-slot": "app-shell",
@@ -504,7 +723,7 @@ function AppShell({
       "data-sidebar-side": sidebarSide,
       suppressHydrationWarning: true,
       className: cn(
-        "group/shell min-h-svh bg-canvas text-foreground",
+        "group/shell min-h-svh bg-canvas text-text-primary",
         "[--ds-app-sidebar-width:var(--ds-sidebar-width)] [--ds-app-sidebar-width-mobile:var(--ds-sidebar-width-mobile)] data-[sidebar-state=collapsed]:[--ds-app-sidebar-width:3.5rem]",
         className
       ),
@@ -516,7 +735,7 @@ function AppShell({
 }
 function AppSidebar({
   side = "left",
-  variant = "dark",
+  variant = "auto",
   className,
   children,
   title = "Application navigation",
@@ -524,26 +743,26 @@ function AppSidebar({
   ...props
 }) {
   const { mobileOpen, setMobileOpen, setSidebarSide } = useAppShell();
-  React2.useEffect(() => {
+  React3.useEffect(() => {
     setSidebarSide(side);
   }, [setSidebarSide, side]);
-  return /* @__PURE__ */ jsxs4(Fragment2, { children: [
-    /* @__PURE__ */ jsx5(Sheet, { open: mobileOpen, onOpenChange: setMobileOpen, children: /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs6(Fragment3, { children: [
+    /* @__PURE__ */ jsx7(Sheet, { side, open: mobileOpen, onOpenChange: setMobileOpen, children: /* @__PURE__ */ jsxs6(
       SheetContent,
       {
         side,
         "data-sidebar-variant": variant,
         className: "w-[var(--ds-sidebar-width-mobile)] border-sidebar-border bg-sidebar-canvas p-0 text-sidebar-primary-text [&>[data-slot=sheet-close]]:right-3 [&>[data-slot=sheet-close]]:top-3 [&>[data-slot=sheet-close]]:text-sidebar-secondary-text [&>[data-slot=sheet-close]]:hover:text-sidebar-primary-text",
         children: [
-          /* @__PURE__ */ jsxs4(SheetHeader, { className: "sr-only", children: [
-            /* @__PURE__ */ jsx5(SheetTitle, { children: title }),
-            /* @__PURE__ */ jsx5(SheetDescription, { children: description })
+          /* @__PURE__ */ jsxs6(SheetHeader, { className: "sr-only", children: [
+            /* @__PURE__ */ jsx7(SheetTitle, { children: title }),
+            /* @__PURE__ */ jsx7(SheetDescription, { children: description })
           ] }),
-          /* @__PURE__ */ jsx5("div", { className: "flex h-full min-h-0 flex-col", children })
+          /* @__PURE__ */ jsx7("div", { className: "flex h-full min-h-0 flex-col", children })
         ]
       }
     ) }),
-    /* @__PURE__ */ jsx5(
+    /* @__PURE__ */ jsx7(
       "aside",
       {
         "data-slot": "app-sidebar",
@@ -565,7 +784,7 @@ function AppSidebarHeader({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx7(
     "div",
     {
       "data-slot": "app-sidebar-header",
@@ -581,12 +800,16 @@ function AppSidebarContent({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx5(
+  const { contentRef, hasScrollBefore, hasScrollAfter } = useSidebarOverflow();
+  return /* @__PURE__ */ jsx7(
     "div",
     {
       "data-slot": "app-sidebar-content",
+      "data-scroll-before": hasScrollBefore ? "true" : void 0,
+      "data-scroll-after": hasScrollAfter ? "true" : void 0,
+      ref: contentRef,
       className: cn(
-        "flex min-h-0 min-w-0 flex-1 flex-col gap-[var(--ds-sidebar-group-gap)] overflow-x-hidden overflow-y-auto bg-sidebar-content px-[var(--ds-sidebar-content-padding-x)] py-[var(--ds-sidebar-content-padding-y)]",
+        "relative flex min-h-0 min-w-0 flex-1 flex-col gap-[var(--ds-sidebar-group-gap)] overflow-x-clip overflow-y-auto bg-sidebar-content px-[var(--ds-sidebar-content-padding-x)] py-[var(--ds-sidebar-content-padding-y)]",
         className
       ),
       ...props
@@ -597,7 +820,7 @@ function AppSidebarFooter({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx7(
     "div",
     {
       "data-slot": "app-sidebar-footer",
@@ -613,18 +836,20 @@ function ProductIdentity({
   label,
   description,
   icon,
+  collapsedLabel,
   className
 }) {
-  return /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs6(
     "div",
     {
       "data-slot": "product-identity",
       className: cn("flex min-w-0 items-center gap-2", className),
       children: [
-        icon ? /* @__PURE__ */ jsx5("div", { className: "flex size-7 shrink-0 items-center justify-center rounded-[var(--ds-radius-control)] bg-sidebar-hover text-sidebar-icon", children: icon }) : null,
-        /* @__PURE__ */ jsxs4("div", { className: "min-w-0 group-data-[sidebar-state=collapsed]/shell:hidden", children: [
-          /* @__PURE__ */ jsx5("div", { className: "ds-type-navigation truncate font-semibold text-sidebar-primary-text", children: label }),
-          description ? /* @__PURE__ */ jsx5("div", { className: "ds-type-metadata truncate text-sidebar-metadata-text", children: description }) : null
+        icon ? /* @__PURE__ */ jsx7("div", { className: "flex size-7 shrink-0 items-center justify-center rounded-[var(--ds-radius-control)] bg-sidebar-hover text-sidebar-icon", children: icon }) : null,
+        collapsedLabel && !icon ? /* @__PURE__ */ jsx7("div", { className: "hidden shrink-0 items-center justify-center rounded-[var(--ds-radius-control)] bg-sidebar-hover px-2 py-1 text-xs font-semibold text-sidebar-primary-text group-data-[sidebar-state=collapsed]/shell:flex", children: collapsedLabel }) : null,
+        /* @__PURE__ */ jsxs6("div", { className: "min-w-0 group-data-[sidebar-state=collapsed]/shell:hidden", children: [
+          /* @__PURE__ */ jsx7("div", { className: "ds-type-navigation truncate font-semibold text-sidebar-primary-text", children: label }),
+          description ? /* @__PURE__ */ jsx7("div", { className: "ds-type-metadata truncate text-sidebar-metadata-text", children: description }) : null
         ] })
       ]
     }
@@ -634,7 +859,7 @@ function SidebarSeparator({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx7(
     Separator,
     {
       "data-slot": "app-sidebar-separator",
@@ -649,7 +874,7 @@ function NavigationGroup({
   children,
   className
 }) {
-  return /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs6(
     "section",
     {
       "data-slot": "navigation-group",
@@ -658,18 +883,18 @@ function NavigationGroup({
         className
       ),
       children: [
-        label ? /* @__PURE__ */ jsxs4(
+        label ? /* @__PURE__ */ jsxs6(
           "div",
           {
             "data-slot": "navigation-group-label",
             className: "flex min-h-6 items-center gap-2 px-2 pb-0 pt-2 text-[length:var(--ds-sidebar-group-label-size)] font-semibold uppercase leading-[var(--ds-sidebar-group-label-line-height)] tracking-[0.04em] text-sidebar-group-label group-data-[sidebar-state=collapsed]/shell:hidden",
             children: [
               label,
-              count !== void 0 ? /* @__PURE__ */ jsx5("span", { className: "ds-type-metadata ml-auto shrink-0 font-medium normal-case tracking-normal text-sidebar-group-count", children: count }) : null
+              count !== void 0 ? /* @__PURE__ */ jsx7("span", { className: "ds-type-metadata ml-auto shrink-0 font-medium normal-case tracking-normal text-sidebar-group-count", children: count }) : null
             ]
           }
         ) : null,
-        /* @__PURE__ */ jsx5("div", { className: "flex min-w-0 flex-col gap-[var(--ds-sidebar-item-gap)]", children })
+        /* @__PURE__ */ jsx7("div", { className: "flex min-w-0 flex-col gap-[var(--ds-sidebar-item-gap)]", children })
       ]
     }
   );
@@ -682,75 +907,83 @@ function navigationItemClasses(active) {
     "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:cursor-not-allowed aria-disabled:opacity-50",
     "group-data-[sidebar-state=collapsed]/shell:justify-center group-data-[sidebar-state=collapsed]/shell:px-0",
     "[&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:stroke-[1.75] [&>svg]:text-sidebar-icon",
-    active && "bg-sidebar-active text-sidebar-active-foreground shadow-[inset_3px_0_0_var(--sidebar-active-indicator)] hover:bg-sidebar-active hover:text-sidebar-active-foreground [&>svg]:text-sidebar-active-foreground"
+    active && "bg-sidebar-active-background font-semibold text-sidebar-active-foreground shadow-[inset_3px_0_0_var(--sidebar-active-indicator)] hover:bg-sidebar-active-background hover:text-sidebar-active-foreground [&>svg]:text-sidebar-active-foreground"
   );
 }
-function NavigationItem({
-  asChild = false,
-  active = false,
-  tooltip,
-  type,
-  className,
-  children,
-  ...props
-}) {
-  const Comp = asChild ? Slot : "button";
-  const { sidebarState, sidebarSide, isMobile } = useAppShell();
-  const item = /* @__PURE__ */ jsx5(
-    Comp,
-    {
-      "data-slot": "navigation-item",
-      "data-active": active ? "true" : void 0,
-      type: asChild ? void 0 : type ?? "button",
-      className: cn(navigationItemClasses(active), className),
-      ...props,
-      children
+var NavigationItem = React3.forwardRef(
+  function NavigationItem2({
+    active = false,
+    tooltip,
+    render,
+    type,
+    "aria-expanded": ariaExpanded,
+    className,
+    children,
+    ...props
+  }, ref) {
+    const { sidebarState, sidebarSide, isMobile } = useAppShell();
+    const item = useRender({
+      defaultTagName: "button",
+      render,
+      ref,
+      props: {
+        "data-slot": "navigation-item",
+        "data-active": active ? "true" : void 0,
+        "aria-expanded": ariaExpanded,
+        type: render ? void 0 : type ?? "button",
+        className: cn(navigationItemClasses(active), className),
+        ...props,
+        ...render ? {} : { children }
+      }
+    });
+    if (!tooltip) {
+      return item;
     }
-  );
-  if (!tooltip) {
-    return item;
+    return /* @__PURE__ */ jsxs6(Tooltip, { children: [
+      /* @__PURE__ */ jsx7(TooltipTrigger, { render: item }),
+      /* @__PURE__ */ jsx7(
+        TooltipContent,
+        {
+          side: sidebarSide === "left" ? "right" : "left",
+          align: "center",
+          hidden: sidebarState !== "collapsed" || isMobile,
+          children: tooltip
+        }
+      )
+    ] });
   }
-  return /* @__PURE__ */ jsxs4(Tooltip, { children: [
-    /* @__PURE__ */ jsx5(TooltipTrigger, { asChild: true, children: item }),
-    /* @__PURE__ */ jsx5(
-      TooltipContent,
-      {
-        side: sidebarSide === "left" ? "right" : "left",
-        align: "center",
-        hidden: sidebarState !== "collapsed" || isMobile,
-        children: tooltip
+);
+var NavigationSubItem = React3.forwardRef(
+  function NavigationSubItem2({
+    active = false,
+    render,
+    className,
+    ...props
+  }, ref) {
+    return useRender({
+      defaultTagName: "a",
+      render,
+      ref,
+      props: {
+        "data-slot": "navigation-sub-item",
+        "data-active": active ? "true" : void 0,
+        className: cn(
+          "ds-type-navigation flex min-h-[var(--ds-sidebar-item-height-touch)] min-w-0 cursor-pointer items-center gap-2 rounded-[var(--ds-radius-control)] px-2 text-sidebar-secondary-text outline-none transition-colors duration-150 lg:h-[calc(var(--ds-sidebar-item-height)-0.25rem)] lg:min-h-0",
+          "hover:bg-sidebar-hover hover:text-sidebar-primary-text focus-visible:ring-[3px] focus-visible:ring-sidebar-focus-ring",
+          "group-data-[sidebar-state=collapsed]/shell:hidden [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:stroke-[1.75] [&>svg]:text-sidebar-icon",
+          active && "bg-sidebar-active-background text-sidebar-active-foreground shadow-[inset_3px_0_0_var(--sidebar-active-indicator)] hover:bg-sidebar-active-background hover:text-sidebar-active-foreground [&>svg]:text-sidebar-active-foreground",
+          className
+        ),
+        ...props
       }
-    )
-  ] });
-}
-function NavigationSubItem({
-  asChild = false,
-  active = false,
-  className,
-  ...props
-}) {
-  const Comp = asChild ? Slot : "a";
-  return /* @__PURE__ */ jsx5(
-    Comp,
-    {
-      "data-slot": "navigation-sub-item",
-      "data-active": active ? "true" : void 0,
-      className: cn(
-        "ds-type-navigation flex min-h-[var(--ds-sidebar-item-height-touch)] min-w-0 cursor-pointer items-center gap-2 rounded-[var(--ds-radius-control)] px-2 text-sidebar-secondary-text outline-none transition-colors duration-150 lg:h-[calc(var(--ds-sidebar-item-height)-0.25rem)] lg:min-h-0",
-        "hover:bg-sidebar-hover hover:text-sidebar-primary-text focus-visible:ring-[3px] focus-visible:ring-sidebar-focus-ring",
-        "group-data-[sidebar-state=collapsed]/shell:hidden [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:stroke-[1.75] [&>svg]:text-sidebar-icon",
-        active && "bg-sidebar-active text-sidebar-active-foreground shadow-[inset_3px_0_0_var(--sidebar-active-indicator)] hover:bg-sidebar-active hover:text-sidebar-active-foreground [&>svg]:text-sidebar-active-foreground",
-        className
-      ),
-      ...props
-    }
-  );
-}
+    });
+  }
+);
 function NavigationSubList({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx7(
     "div",
     {
       "data-slot": "navigation-sub-list",
@@ -764,33 +997,31 @@ function NavigationSubList({
 }
 function SidebarTrigger({
   className,
+  "aria-label": ariaLabel,
   onClick,
   ...props
 }) {
   const { isMobile, mobileOpen, sidebarOpen, toggleSidebar } = useAppShell();
-  return /* @__PURE__ */ jsxs4(
-    Button,
-    {
-      "data-slot": "sidebar-trigger",
-      type: "button",
-      variant: "ghost",
-      size: "icon",
-      className: cn(
-        "shrink-0 cursor-pointer text-muted-foreground hover:bg-surface-muted hover:text-foreground focus-visible:ring-ring",
-        className
-      ),
-      "aria-expanded": isMobile ? mobileOpen : sidebarOpen,
-      onClick: (event) => {
-        onClick?.(event);
-        toggleSidebar();
-      },
-      ...props,
-      children: [
-        /* @__PURE__ */ jsx5(PanelLeftIcon, {}),
-        /* @__PURE__ */ jsx5("span", { className: "sr-only", children: "Toggle navigation" })
-      ]
+  const triggerProps = {
+    ...props,
+    "data-slot": "sidebar-trigger",
+    type: "button",
+    variant: "ghost",
+    className: cn(
+      "shrink-0 cursor-pointer text-text-supporting hover:bg-surface-muted hover:text-text-primary focus-visible:ring-focus",
+      className
+    ),
+    "aria-label": ariaLabel ?? "Toggle navigation",
+    "aria-expanded": isMobile ? mobileOpen : sidebarOpen,
+    onClick: (event) => {
+      onClick?.(event);
+      toggleSidebar();
     }
-  );
+  };
+  return /* @__PURE__ */ jsxs6(IconButton, { ...triggerProps, children: [
+    /* @__PURE__ */ jsx7(PanelLeftIcon, {}),
+    /* @__PURE__ */ jsx7("span", { className: "sr-only", children: "Toggle navigation" })
+  ] });
 }
 function SidebarSearch({
   expanded: expandedProp,
@@ -802,12 +1033,12 @@ function SidebarSearch({
   onKeyDown,
   ...props
 }) {
-  const [expandedState, setExpandedState] = React2.useState(defaultExpanded);
+  const [expandedState, setExpandedState] = React3.useState(defaultExpanded);
   const expanded = expandedProp ?? expandedState;
-  const inputRef = React2.useRef(null);
-  const triggerRef = React2.useRef(null);
-  const mountedRef = React2.useRef(false);
-  const setExpanded = React2.useCallback(
+  const inputRef = React3.useRef(null);
+  const triggerRef = React3.useRef(null);
+  const mountedRef = React3.useRef(false);
+  const setExpanded = React3.useCallback(
     (nextExpanded) => {
       if (expandedProp === void 0) {
         setExpandedState(nextExpanded);
@@ -816,7 +1047,7 @@ function SidebarSearch({
     },
     [expandedProp, onExpandedChange]
   );
-  React2.useEffect(() => {
+  React3.useEffect(() => {
     if (expanded) {
       queueMicrotask(() => inputRef.current?.focus());
     } else if (mountedRef.current) {
@@ -825,7 +1056,7 @@ function SidebarSearch({
     mountedRef.current = true;
   }, [expanded]);
   if (!expanded) {
-    return /* @__PURE__ */ jsxs4(
+    return /* @__PURE__ */ jsxs6(
       "button",
       {
         ref: triggerRef,
@@ -839,14 +1070,14 @@ function SidebarSearch({
         onClick: () => setExpanded(true),
         "aria-label": triggerLabel,
         children: [
-          /* @__PURE__ */ jsx5(Search, { className: "size-4 shrink-0 text-sidebar-icon" }),
-          /* @__PURE__ */ jsx5("span", { className: "truncate group-data-[sidebar-state=collapsed]/shell:hidden", children: triggerLabel }),
-          shortcut ? /* @__PURE__ */ jsx5("kbd", { className: "ds-type-metadata ml-auto rounded border border-sidebar-border px-1.5 py-0.5 font-medium text-sidebar-metadata-text group-data-[sidebar-state=collapsed]/shell:hidden", children: shortcut }) : null
+          /* @__PURE__ */ jsx7(Search, { className: "size-4 shrink-0 text-sidebar-icon" }),
+          /* @__PURE__ */ jsx7("span", { className: "truncate group-data-[sidebar-state=collapsed]/shell:hidden", children: triggerLabel }),
+          shortcut ? /* @__PURE__ */ jsx7(ShortcutHint, { className: "ds-type-metadata ml-auto border-sidebar-border bg-transparent text-sidebar-metadata-text group-data-[sidebar-state=collapsed]/shell:hidden", children: shortcut }) : null
         ]
       }
     );
   }
-  return /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs6(
     "div",
     {
       "data-slot": "sidebar-search",
@@ -856,8 +1087,8 @@ function SidebarSearch({
         className
       ),
       children: [
-        /* @__PURE__ */ jsx5(Search, { className: "size-4 shrink-0 text-sidebar-icon" }),
-        /* @__PURE__ */ jsx5(
+        /* @__PURE__ */ jsx7(Search, { className: "size-4 shrink-0 text-sidebar-icon" }),
+        /* @__PURE__ */ jsx7(
           Input,
           {
             ref: inputRef,
@@ -873,7 +1104,7 @@ function SidebarSearch({
             ...props
           }
         ),
-        /* @__PURE__ */ jsx5(
+        /* @__PURE__ */ jsx7(
           "button",
           {
             type: "button",
@@ -883,7 +1114,7 @@ function SidebarSearch({
               setExpanded(false);
             },
             "aria-label": "Close search",
-            children: /* @__PURE__ */ jsx5(X, { className: "size-4" })
+            children: /* @__PURE__ */ jsx7(X, { className: "size-4" })
           }
         )
       ]
@@ -894,7 +1125,7 @@ function MainRegion({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx7(
     "div",
     {
       "data-slot": "main-region",
@@ -911,13 +1142,13 @@ function TopBar({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx7(
     "header",
     {
       "data-slot": "top-bar",
       className: cn(
-        "sticky top-0 z-10 flex h-[var(--ds-topbar-height)] min-h-[var(--ds-topbar-height)] shrink-0 items-center justify-between gap-3 border-b border-border-subtle bg-background/96 px-[var(--ds-topbar-padding-x)] backdrop-blur md:px-[var(--ds-topbar-padding-x-wide)]",
-        "supports-[backdrop-filter]:bg-background/88",
+        "sticky top-0 z-10 flex h-[var(--ds-topbar-height)] min-h-[var(--ds-topbar-height)] shrink-0 items-center justify-between gap-3 border-b border-border-subtle bg-canvas/96 px-[var(--ds-topbar-padding-x)] backdrop-blur md:px-[var(--ds-topbar-padding-x-wide)]",
+        "supports-[backdrop-filter]:bg-canvas/88",
         className
       ),
       ...props
@@ -929,7 +1160,7 @@ function PageFrame({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx7(
     "main",
     {
       "data-slot": "page-frame",
@@ -949,7 +1180,7 @@ function PageContent({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx7(
     "div",
     {
       "data-slot": "page-content",
@@ -962,7 +1193,7 @@ function PageBoundary({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx7(
     "div",
     {
       "data-slot": "page-boundary",
@@ -978,7 +1209,7 @@ function InspectorRegion({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx7(
     "aside",
     {
       "data-slot": "inspector-region",
@@ -992,28 +1223,28 @@ function InspectorRegion({
 }
 
 // src/patterns/activity-list.tsx
-import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
 function ActivityList({ className, ...props }) {
-  return /* @__PURE__ */ jsx6("div", { "data-slot": "activity-list", className: cn("divide-y divide-border-subtle", className), ...props });
+  return /* @__PURE__ */ jsx8("div", { "data-slot": "activity-list", className: cn("divide-y divide-border-subtle", className), ...props });
 }
 function ActivityItem({ icon, title, description, metadata, status, className, ...props }) {
-  return /* @__PURE__ */ jsxs5("div", { "data-slot": "activity-item", className: cn("grid grid-cols-[auto_minmax(0,1fr)_auto] gap-3 py-3", className), ...props, children: [
-    /* @__PURE__ */ jsx6("div", { className: "flex size-8 items-center justify-center rounded-md bg-neutral-background text-neutral-foreground [&_svg]:size-4", children: icon }),
-    /* @__PURE__ */ jsxs5("div", { className: "min-w-0", children: [
-      /* @__PURE__ */ jsx6("div", { className: "ds-type-ui font-medium text-foreground", children: title }),
-      description ? /* @__PURE__ */ jsx6("div", { className: "ds-type-ui mt-0.5 text-muted-foreground", children: description }) : null,
-      metadata ? /* @__PURE__ */ jsx6("div", { className: "ds-type-metadata mt-1 text-muted-foreground", children: metadata }) : null
+  return /* @__PURE__ */ jsxs7("div", { "data-slot": "activity-item", className: cn("grid grid-cols-[auto_minmax(0,1fr)_auto] gap-3 py-3", className), ...props, children: [
+    /* @__PURE__ */ jsx8("div", { className: "flex size-8 items-center justify-center rounded-md bg-neutral-background text-neutral-foreground [&_svg]:size-4", children: icon }),
+    /* @__PURE__ */ jsxs7("div", { className: "min-w-0", children: [
+      /* @__PURE__ */ jsx8("div", { className: "ds-type-ui font-medium text-text-primary", children: title }),
+      description ? /* @__PURE__ */ jsx8("div", { className: "ds-type-ui mt-0.5 text-text-supporting", children: description }) : null,
+      metadata ? /* @__PURE__ */ jsx8("div", { className: "ds-type-metadata mt-1 text-text-supporting", children: metadata }) : null
     ] }),
-    status ? /* @__PURE__ */ jsx6("div", { className: "shrink-0", children: status }) : null
+    status ? /* @__PURE__ */ jsx8("div", { className: "shrink-0", children: status }) : null
   ] });
 }
 
 // src/patterns/confirmation-dialog.tsx
-import * as React3 from "react";
-import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+import * as React4 from "react";
+import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
 function ConfirmationDialog({ trigger, title, description, children, confirmLabel = "Confirm", cancelLabel = "Cancel", confirmVariant = "destructive", pending = false, onConfirm, onError }) {
-  const [open, setOpen] = React3.useState(false);
-  const [confirming, setConfirming] = React3.useState(false);
+  const [open, setOpen] = React4.useState(false);
+  const [confirming, setConfirming] = React4.useState(false);
   const isPending = pending || confirming;
   async function confirm() {
     if (isPending) {
@@ -1029,26 +1260,26 @@ function ConfirmationDialog({ trigger, title, description, children, confirmLabe
       setConfirming(false);
     }
   }
-  return /* @__PURE__ */ jsxs6(Dialog, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsx7(DialogTrigger, { asChild: true, children: trigger }),
-    /* @__PURE__ */ jsxs6(DialogContent, { size: "small", children: [
-      /* @__PURE__ */ jsxs6(DialogHeader, { children: [
-        /* @__PURE__ */ jsx7(DialogTitle, { children: title }),
-        /* @__PURE__ */ jsx7(DialogDescription, { children: description })
+  return /* @__PURE__ */ jsxs8(AlertDialog, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx9(AlertDialogTrigger, { render: trigger, children: trigger }),
+    /* @__PURE__ */ jsxs8(AlertDialogContent, { children: [
+      /* @__PURE__ */ jsxs8(AlertDialogHeader, { children: [
+        /* @__PURE__ */ jsx9(AlertDialogTitle, { children: title }),
+        /* @__PURE__ */ jsx9(AlertDialogDescription, { children: description })
       ] }),
-      /* @__PURE__ */ jsx7(DialogBody, { children }),
-      /* @__PURE__ */ jsxs6(DialogFooter, { children: [
-        /* @__PURE__ */ jsx7(DialogClose, { asChild: true, children: /* @__PURE__ */ jsx7(Button, { type: "button", variant: "outline", disabled: isPending, children: cancelLabel }) }),
-        /* @__PURE__ */ jsx7(Button, { type: "button", variant: confirmVariant, disabled: isPending, onClick: confirm, children: isPending ? "Working..." : confirmLabel })
+      /* @__PURE__ */ jsx9(AlertDialogBody, { children }),
+      /* @__PURE__ */ jsxs8(AlertDialogFooter, { children: [
+        /* @__PURE__ */ jsx9(AlertDialogCancel, { render: /* @__PURE__ */ jsx9(Button, { type: "button", variant: "outline", disabled: isPending }), children: cancelLabel }),
+        /* @__PURE__ */ jsx9(AlertDialogAction, { render: /* @__PURE__ */ jsx9(Button, { type: "button", variant: confirmVariant, disabled: isPending, onClick: confirm }), children: isPending ? "Working..." : confirmLabel })
       ] })
     ] })
   ] });
 }
 
 // src/patterns/code-block.tsx
-import * as React4 from "react";
+import * as React5 from "react";
 import { Check, Copy } from "lucide-react";
-import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
 function CodeBlock({
   snippets,
   defaultValue,
@@ -1057,22 +1288,22 @@ function CodeBlock({
   ...props
 }) {
   const initialValue = defaultValue ?? snippets[0]?.value ?? "";
-  const [activeValue, setActiveValue] = React4.useState(initialValue);
-  const [copiedValue, setCopiedValue] = React4.useState(null);
-  const [copyError, setCopyError] = React4.useState(false);
-  const copyStatusId = React4.useId();
+  const [activeValue, setActiveValue] = React5.useState(initialValue);
+  const [copiedValue, setCopiedValue] = React5.useState(null);
+  const [copyError, setCopyError] = React5.useState(false);
+  const copyStatusId = React5.useId();
   const activeSnippet = snippets.find((snippet) => snippet.value === activeValue) ?? snippets[0];
   if (!activeSnippet) return null;
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx10(
     "div",
     {
       "data-slot": "code-block",
       className: cn("overflow-hidden rounded-lg border border-border-subtle bg-surface", className),
       ...props,
-      children: /* @__PURE__ */ jsxs7(Tabs, { value: activeSnippet.value, onValueChange: setActiveValue, variant: "segmented", className: "gap-0", children: [
-        /* @__PURE__ */ jsxs7("div", { className: "flex items-center justify-between gap-3 border-b border-border-subtle bg-surface-muted px-3 py-2", children: [
-          /* @__PURE__ */ jsx8(TabsList, { variant: "segmented", size: "compact", "aria-label": "Code language", children: snippets.map((snippet) => /* @__PURE__ */ jsx8(TabsTrigger, { value: snippet.value, children: snippet.label }, snippet.value)) }),
-          /* @__PURE__ */ jsxs7(
+      children: /* @__PURE__ */ jsxs9(Tabs, { value: activeSnippet.value, onValueChange: setActiveValue, variant: "segmented", className: "gap-0", children: [
+        /* @__PURE__ */ jsxs9("div", { className: "flex items-center justify-between gap-3 border-b border-border-subtle bg-surface-muted px-3 py-2", children: [
+          /* @__PURE__ */ jsx10(TabsList, { variant: "segmented", size: "compact", "aria-label": "Code language", children: snippets.map((snippet) => /* @__PURE__ */ jsx10(TabsTrigger, { value: snippet.value, children: snippet.label }, snippet.value)) }),
+          /* @__PURE__ */ jsxs9(
             Button,
             {
               type: "button",
@@ -1090,23 +1321,23 @@ function CodeBlock({
               },
               "aria-describedby": copyStatusId,
               children: [
-                copiedValue === activeSnippet.value ? /* @__PURE__ */ jsx8(Check, {}) : /* @__PURE__ */ jsx8(Copy, {}),
+                copiedValue === activeSnippet.value ? /* @__PURE__ */ jsx10(Check, {}) : /* @__PURE__ */ jsx10(Copy, {}),
                 copiedValue === activeSnippet.value ? "Copied" : copyLabel
               ]
             }
           ),
-          /* @__PURE__ */ jsx8("span", { id: copyStatusId, className: "sr-only", role: "status", "aria-live": "polite", children: copyError ? "Code could not be copied. Select the code and copy it manually." : copiedValue === activeSnippet.value ? "Code copied to clipboard." : "" })
+          /* @__PURE__ */ jsx10("span", { id: copyStatusId, className: "sr-only", role: "status", "aria-live": "polite", children: copyError ? "Code could not be copied. Select the code and copy it manually." : copiedValue === activeSnippet.value ? "Code copied to clipboard." : "" })
         ] }),
-        snippets.map((snippet) => /* @__PURE__ */ jsx8(TabsContent, { value: snippet.value, className: "m-0", children: /* @__PURE__ */ jsx8("pre", { className: "max-h-[32rem] overflow-auto p-4 text-sm leading-6", children: /* @__PURE__ */ jsx8("code", { children: snippet.code }) }) }, snippet.value))
+        snippets.map((snippet) => /* @__PURE__ */ jsx10(TabsContent, { value: snippet.value, className: "m-0", children: /* @__PURE__ */ jsx10("pre", { className: "max-h-[32rem] overflow-auto p-4 text-sm leading-6", children: /* @__PURE__ */ jsx10("code", { children: snippet.code }) }) }, snippet.value))
       ] })
     }
   );
 }
 
 // src/patterns/inventory-surface.tsx
-import { jsx as jsx9 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
 function InventorySurface({ className, ...props }) {
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx11(
     Card,
     {
       "data-slot": "inventory-surface",
@@ -1116,16 +1347,16 @@ function InventorySurface({ className, ...props }) {
   );
 }
 function InventoryDesktop({ className, ...props }) {
-  return /* @__PURE__ */ jsx9("div", { "data-slot": "inventory-desktop", className: cn("hidden lg:block", className), ...props });
+  return /* @__PURE__ */ jsx11("div", { "data-slot": "inventory-desktop", className: cn("hidden lg:block", className), ...props });
 }
 function InventoryMobile({ className, ...props }) {
-  return /* @__PURE__ */ jsx9("div", { "data-slot": "inventory-mobile", className: cn("divide-y divide-border-subtle lg:hidden", className), ...props });
+  return /* @__PURE__ */ jsx11("div", { "data-slot": "inventory-mobile", className: cn("divide-y divide-border-subtle lg:hidden", className), ...props });
 }
 
 // src/patterns/metric-band.tsx
-import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
 function MetricBand({ columns = 4, className, ...props }) {
-  return /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx12(
     "div",
     {
       "data-slot": "metric-band",
@@ -1152,7 +1383,7 @@ function MetricBandItem({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs8(
+  return /* @__PURE__ */ jsxs10(
     "div",
     {
       "data-slot": "metric-band-item",
@@ -1163,7 +1394,7 @@ function MetricBandItem({
       ),
       ...props,
       children: [
-        icon ? /* @__PURE__ */ jsx10(
+        icon ? /* @__PURE__ */ jsx12(
           "div",
           {
             className: cn(
@@ -1173,10 +1404,10 @@ function MetricBandItem({
             children: icon
           }
         ) : null,
-        /* @__PURE__ */ jsxs8("div", { className: "grid min-w-0 gap-1", children: [
-          /* @__PURE__ */ jsx10("div", { className: "ds-type-ui text-muted-foreground", children: label }),
-          loading ? /* @__PURE__ */ jsx10(Skeleton, { className: "h-7 w-14" }) : /* @__PURE__ */ jsx10("div", { className: "text-2xl font-semibold tracking-tight", children: value ?? 0 }),
-          detail ? /* @__PURE__ */ jsx10("div", { className: "ds-type-metadata text-muted-foreground", children: detail }) : null
+        /* @__PURE__ */ jsxs10("div", { className: "grid min-w-0 gap-1", children: [
+          /* @__PURE__ */ jsx12("div", { className: "ds-type-ui text-text-supporting", children: label }),
+          loading ? /* @__PURE__ */ jsx12(Skeleton, { className: "h-7 w-14" }) : /* @__PURE__ */ jsx12("div", { className: "text-2xl font-semibold tracking-tight", children: value ?? 0 }),
+          detail ? /* @__PURE__ */ jsx12("div", { className: "ds-type-metadata text-text-supporting", children: detail }) : null
         ] })
       ]
     }
@@ -1184,7 +1415,7 @@ function MetricBandItem({
 }
 
 // src/patterns/page-header.tsx
-import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
 function PageHeader({
   title,
   description,
@@ -1196,37 +1427,37 @@ function PageHeader({
   className,
   ...props
 }) {
-  const resolvedActions = actions ?? actionNode ?? (action ? /* @__PURE__ */ jsx11(
+  const resolvedActions = actions ?? actionNode ?? (action ? /* @__PURE__ */ jsx13(
     "a",
     {
-      className: "ds-type-button inline-flex h-[var(--ds-control-height)] items-center justify-center gap-2 whitespace-nowrap rounded-md bg-primary px-3 py-2 text-primary-foreground shadow-xs outline-none transition-colors hover:bg-accent-hover focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50",
+      className: "ds-type-button inline-flex h-[var(--ds-control-height)] items-center justify-center gap-2 whitespace-nowrap rounded-md bg-action px-3 py-2 text-action-foreground shadow-xs outline-none transition-colors hover:bg-action-hover focus-visible:border-focus focus-visible:ring-3 focus-visible:ring-focus/50",
       href: action.href,
       children: action.label
     }
   ) : null);
-  return /* @__PURE__ */ jsxs9(
+  return /* @__PURE__ */ jsxs11(
     "header",
     {
       "data-slot": "page-header",
-      className: cn("flex flex-col gap-3 border-b border-border-subtle bg-background px-5 py-4 lg:flex-row lg:items-start lg:justify-between", className),
+      className: cn("flex flex-col gap-3 border-b border-border-subtle bg-canvas px-5 py-4 lg:flex-row lg:items-start lg:justify-between", className),
       ...props,
       children: [
-        /* @__PURE__ */ jsxs9("div", { className: "min-w-0", children: [
-          /* @__PURE__ */ jsxs9("div", { className: "flex min-w-0 flex-wrap items-center gap-2", children: [
-            /* @__PURE__ */ jsx11("h1", { className: "ds-type-page-title truncate", children: title }),
+        /* @__PURE__ */ jsxs11("div", { className: "min-w-0", children: [
+          /* @__PURE__ */ jsxs11("div", { className: "flex min-w-0 flex-wrap items-center gap-2", children: [
+            /* @__PURE__ */ jsx13("h1", { className: "ds-type-page-title truncate", children: title }),
             status
           ] }),
-          description ? /* @__PURE__ */ jsx11("p", { className: "ds-type-ui mt-1 max-w-3xl text-muted-foreground", children: description }) : null,
-          metadata ? /* @__PURE__ */ jsx11("div", { className: "ds-type-metadata mt-2 text-muted-foreground", children: metadata }) : null
+          description ? /* @__PURE__ */ jsx13("p", { className: "ds-type-ui mt-1 max-w-3xl text-text-supporting", children: description }) : null,
+          metadata ? /* @__PURE__ */ jsx13("div", { className: "ds-type-metadata mt-2 text-text-supporting", children: metadata }) : null
         ] }),
-        resolvedActions ? /* @__PURE__ */ jsx11("div", { className: "flex shrink-0 flex-wrap items-center gap-2", children: resolvedActions }) : null
+        resolvedActions ? /* @__PURE__ */ jsx13("div", { className: "flex shrink-0 flex-wrap items-center gap-2", children: resolvedActions }) : null
       ]
     }
   );
 }
 
 // src/patterns/page-toolbar.tsx
-import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
 function PageToolbar({
   search,
   filters,
@@ -1236,19 +1467,19 @@ function PageToolbar({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsxs12(
     "div",
     {
       "data-slot": "page-toolbar",
-      className: cn("grid gap-2 border-b border-border-subtle bg-background px-5 py-3 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-center", className),
+      className: cn("grid gap-2 border-b border-border-subtle bg-canvas px-5 py-3 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-center", className),
       ...props,
       children: [
-        /* @__PURE__ */ jsxs10("div", { className: "flex min-w-0 flex-1 flex-col gap-2 sm:flex-row sm:items-center", children: [
-          search ? /* @__PURE__ */ jsx12("div", { className: "min-w-0 flex-1 sm:min-w-48 sm:max-w-sm", children: search }) : null,
-          filters ? /* @__PURE__ */ jsx12("div", { className: "flex w-full flex-col gap-2 sm:w-auto sm:flex-row sm:flex-wrap sm:items-center", children: filters }) : null
+        /* @__PURE__ */ jsxs12("div", { className: "flex min-w-0 flex-1 flex-col gap-2 sm:flex-row sm:items-center", children: [
+          search ? /* @__PURE__ */ jsx14("div", { className: "min-w-0 flex-1 sm:min-w-48 sm:max-w-sm", children: search }) : null,
+          filters ? /* @__PURE__ */ jsx14("div", { className: "flex w-full flex-col gap-2 sm:w-auto sm:flex-row sm:flex-wrap sm:items-center", children: filters }) : null
         ] }),
-        /* @__PURE__ */ jsxs10("div", { className: "flex min-h-[var(--ds-control-height)] flex-wrap items-center gap-2 lg:justify-end", children: [
-          bulkActions ? /* @__PURE__ */ jsx12("div", { "data-slot": "page-toolbar-bulk-actions", className: "contents", children: bulkActions }) : null,
+        /* @__PURE__ */ jsxs12("div", { className: "flex min-h-[var(--ds-control-height)] flex-wrap items-center gap-2 lg:justify-end", children: [
+          bulkActions ? /* @__PURE__ */ jsx14("div", { "data-slot": "page-toolbar-bulk-actions", className: "contents", children: bulkActions }) : null,
           viewControls,
           children
         ] })
@@ -1258,8 +1489,8 @@ function PageToolbar({
 }
 
 // src/patterns/preference-controls.tsx
-import * as React5 from "react";
-import { jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
+import * as React6 from "react";
+import { jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
 var APPEARANCE_KEY = "conscia-appearance:v1";
 var DENSITY_KEY = "conscia-density:v1";
 var PREFERENCE_EVENT = "conscia-preferences";
@@ -1285,7 +1516,7 @@ function writePreference(key, value) {
   window.dispatchEvent(new Event(PREFERENCE_EVENT));
 }
 function useStoredPreference(key, fallback, allowedValues) {
-  return React5.useSyncExternalStore(
+  return React6.useSyncExternalStore(
     (onStoreChange) => {
       window.addEventListener("storage", onStoreChange);
       window.addEventListener(PREFERENCE_EVENT, onStoreChange);
@@ -1313,7 +1544,7 @@ function useConsciaPreferences() {
 }
 function DesignSystemPreferenceSync() {
   const { appearance, density } = useConsciaPreferences();
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     const media = window.matchMedia("(prefers-color-scheme: dark)");
     const sync = () => applyConsciaPreferences(
       document.documentElement,
@@ -1329,7 +1560,7 @@ function DesignSystemPreferenceSync() {
 }
 function AppearanceControl({ className }) {
   const { appearance } = useConsciaPreferences();
-  return /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx15(
     SegmentedControl,
     {
       className,
@@ -1342,7 +1573,7 @@ function AppearanceControl({ className }) {
 }
 function DensityControl({ className }) {
   const { density } = useConsciaPreferences();
-  return /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx15(
     SegmentedControl,
     {
       className,
@@ -1354,9 +1585,9 @@ function DensityControl({ className }) {
   );
 }
 function DesignPreferenceControls({ className }) {
-  return /* @__PURE__ */ jsxs11("div", { className: cn("flex flex-col gap-3 text-sm", className), children: [
-    /* @__PURE__ */ jsx13(AppearanceControl, {}),
-    /* @__PURE__ */ jsx13(DensityControl, {})
+  return /* @__PURE__ */ jsxs13("div", { className: cn("flex flex-col gap-3 text-sm", className), children: [
+    /* @__PURE__ */ jsx15(AppearanceControl, {}),
+    /* @__PURE__ */ jsx15(DensityControl, {})
   ] });
 }
 function SegmentedControl({
@@ -1366,16 +1597,16 @@ function SegmentedControl({
   values,
   onChange
 }) {
-  return /* @__PURE__ */ jsxs11("fieldset", { className: cn("flex flex-col gap-2", className), children: [
-    /* @__PURE__ */ jsx13("legend", { className: "text-[var(--ds-metadata)] font-medium text-muted-foreground", children: label }),
-    /* @__PURE__ */ jsx13("div", { className: "inline-flex rounded-[var(--ds-radius-control)] bg-muted p-1", children: values.map((item) => /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsxs13("fieldset", { className: cn("flex flex-col gap-2", className), children: [
+    /* @__PURE__ */ jsx15("legend", { className: "text-[var(--ds-metadata)] font-medium text-text-supporting", children: label }),
+    /* @__PURE__ */ jsx15("div", { className: "inline-flex rounded-[var(--ds-radius-control)] bg-surface-muted p-1", children: values.map((item) => /* @__PURE__ */ jsx15(
       "button",
       {
         type: "button",
         "aria-pressed": value === item,
         suppressHydrationWarning: true,
         onClick: () => onChange(item),
-        className: "h-7 rounded-[calc(var(--ds-radius-control)-2px)] px-2.5 text-[var(--ds-metadata)] font-medium capitalize text-muted-foreground outline-none transition-colors hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-pressed:bg-background aria-pressed:text-foreground aria-pressed:shadow-xs",
+        className: "h-7 rounded-[calc(var(--ds-radius-control)-2px)] px-2.5 text-[var(--ds-metadata)] font-medium capitalize text-text-supporting outline-none transition-colors hover:text-text-primary focus-visible:ring-[3px] focus-visible:ring-focus/50 aria-pressed:bg-canvas aria-pressed:text-text-primary aria-pressed:shadow-xs",
         children: item
       },
       item
@@ -1384,29 +1615,29 @@ function SegmentedControl({
 }
 
 // src/patterns/provider-mark.tsx
-import { jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs14 } from "react/jsx-runtime";
 function ProviderMark({ name, shortName, description, size = "default", className, ...props }) {
-  return /* @__PURE__ */ jsxs12("div", { "data-slot": "provider-mark", className: cn("flex min-w-0 items-center gap-3", className), ...props, children: [
-    /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsxs14("div", { "data-slot": "provider-mark", className: cn("flex min-w-0 items-center gap-3", className), ...props, children: [
+    /* @__PURE__ */ jsx16(
       "div",
       {
         "aria-hidden": "true",
         className: cn(
-          "flex shrink-0 items-center justify-center rounded-md border border-border-subtle bg-surface-muted font-semibold tracking-tight text-foreground",
+          "flex shrink-0 items-center justify-center rounded-md border border-border-subtle bg-surface-muted font-semibold tracking-tight text-text-primary",
           size === "sm" ? "size-8 text-[10px]" : "size-10 text-xs"
         ),
         children: shortName
       }
     ),
-    /* @__PURE__ */ jsxs12("div", { className: "min-w-0", children: [
-      /* @__PURE__ */ jsx14("div", { className: "ds-type-ui truncate font-medium text-foreground", children: name }),
-      description ? /* @__PURE__ */ jsx14("div", { className: "ds-type-metadata mt-0.5 truncate text-muted-foreground", children: description }) : null
+    /* @__PURE__ */ jsxs14("div", { className: "min-w-0", children: [
+      /* @__PURE__ */ jsx16("div", { className: "ds-type-ui truncate font-medium text-text-primary", children: name }),
+      description ? /* @__PURE__ */ jsx16("div", { className: "ds-type-metadata mt-0.5 truncate text-text-supporting", children: description }) : null
     ] })
   ] });
 }
 
 // src/patterns/resource-detail.tsx
-import { jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs15 } from "react/jsx-runtime";
 function ResourceSummary({
   variant = "plain",
   title,
@@ -1418,30 +1649,30 @@ function ResourceSummary({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs13(
+  return /* @__PURE__ */ jsxs15(
     "section",
     {
       "data-slot": "resource-summary",
       className: cn(
         "px-5 py-4",
-        variant === "plain" && "border-b border-border-subtle bg-background",
+        variant === "plain" && "border-b border-border-subtle bg-canvas",
         variant === "surface" && "rounded-[var(--ds-radius-surface)] border border-border-subtle bg-surface",
         className
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsxs13("div", { className: "flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between", children: [
-          /* @__PURE__ */ jsxs13("div", { className: "min-w-0", children: [
-            title || status ? /* @__PURE__ */ jsxs13("div", { className: "flex min-w-0 flex-wrap items-center gap-2", children: [
-              title ? /* @__PURE__ */ jsx15("h2", { className: "ds-type-section-title truncate", children: title }) : null,
+        /* @__PURE__ */ jsxs15("div", { className: "flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between", children: [
+          /* @__PURE__ */ jsxs15("div", { className: "min-w-0", children: [
+            title || status ? /* @__PURE__ */ jsxs15("div", { className: "flex min-w-0 flex-wrap items-center gap-2", children: [
+              title ? /* @__PURE__ */ jsx17("h2", { className: "ds-type-section-title truncate", children: title }) : null,
               status
             ] }) : null,
-            description ? /* @__PURE__ */ jsx15("p", { className: "ds-type-ui mt-1 max-w-3xl text-muted-foreground", children: description }) : null,
-            metadata ? /* @__PURE__ */ jsx15("div", { className: "ds-type-metadata mt-2 text-muted-foreground", children: metadata }) : null
+            description ? /* @__PURE__ */ jsx17("p", { className: "ds-type-ui mt-1 max-w-3xl text-text-supporting", children: description }) : null,
+            metadata ? /* @__PURE__ */ jsx17("div", { className: "ds-type-metadata mt-2 text-text-supporting", children: metadata }) : null
           ] }),
-          actions ? /* @__PURE__ */ jsx15("div", { className: "flex shrink-0 flex-wrap items-center gap-2", children: actions }) : null
+          actions ? /* @__PURE__ */ jsx17("div", { className: "flex shrink-0 flex-wrap items-center gap-2", children: actions }) : null
         ] }),
-        children ? /* @__PURE__ */ jsx15("div", { className: "mt-4", children }) : null
+        children ? /* @__PURE__ */ jsx17("div", { className: "mt-4", children }) : null
       ]
     }
   );
@@ -1450,7 +1681,7 @@ function DetailSections({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsx17(
     "div",
     {
       "data-slot": "detail-sections",
@@ -1468,7 +1699,7 @@ function DetailSection({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs13(
+  return /* @__PURE__ */ jsxs15(
     "section",
     {
       "data-slot": "detail-section",
@@ -1479,14 +1710,14 @@ function DetailSection({
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsxs13("div", { className: "flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between", children: [
-          /* @__PURE__ */ jsxs13("div", { className: "min-w-0", children: [
-            /* @__PURE__ */ jsx15("h2", { className: "ds-type-section-title", children: title }),
-            description ? /* @__PURE__ */ jsx15("p", { className: "ds-type-ui mt-1 max-w-3xl text-muted-foreground", children: description }) : null
+        /* @__PURE__ */ jsxs15("div", { className: "flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between", children: [
+          /* @__PURE__ */ jsxs15("div", { className: "min-w-0", children: [
+            /* @__PURE__ */ jsx17("h2", { className: "ds-type-section-title", children: title }),
+            description ? /* @__PURE__ */ jsx17("p", { className: "ds-type-ui mt-1 max-w-3xl text-text-supporting", children: description }) : null
           ] }),
-          actions ? /* @__PURE__ */ jsx15("div", { className: "flex shrink-0 items-center gap-2", children: actions }) : null
+          actions ? /* @__PURE__ */ jsx17("div", { className: "flex shrink-0 items-center gap-2", children: actions }) : null
         ] }),
-        children ? /* @__PURE__ */ jsx15("div", { className: "mt-4", children }) : null
+        children ? /* @__PURE__ */ jsx17("div", { className: "mt-4", children }) : null
       ]
     }
   );
@@ -1495,7 +1726,7 @@ function KeyValueList({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsx17(
     "dl",
     {
       "data-slot": "key-value-list",
@@ -1509,9 +1740,9 @@ function KeyValueItem({
   value,
   breakValue = false
 }) {
-  return /* @__PURE__ */ jsxs13("div", { "data-slot": "key-value-item", className: "flex justify-between gap-4", children: [
-    /* @__PURE__ */ jsx15("dt", { className: "text-muted-foreground", children: label }),
-    /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsxs15("div", { "data-slot": "key-value-item", className: "flex justify-between gap-4", children: [
+    /* @__PURE__ */ jsx17("dt", { className: "text-text-supporting", children: label }),
+    /* @__PURE__ */ jsx17(
       "dd",
       {
         className: cn(
@@ -1525,12 +1756,35 @@ function KeyValueItem({
 }
 
 // src/patterns/sidebar-navigation.tsx
-import * as React6 from "react";
+import * as React7 from "react";
 import { ChevronRight as ChevronRight2 } from "lucide-react";
-import { Fragment as Fragment3, jsx as jsx16, jsxs as jsxs14 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx18, jsxs as jsxs16 } from "react/jsx-runtime";
 function isSection(entry) {
   return "items" in entry;
 }
+function getNavigationAccessibleLabel(item) {
+  const metadata = [item.badgeLabel, item.countLabel].filter(Boolean);
+  return metadata.length > 0 ? `${item.label}, ${metadata.join(", ")}` : item.label;
+}
+function NavigationMetadata({
+  badge,
+  count
+}) {
+  if (badge === void 0 && count === void 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs16(
+    "span",
+    {
+      "aria-hidden": "true",
+      className: "ml-auto flex min-w-0 shrink-0 items-center gap-1.5 text-sidebar-metadata-text",
+      children: [
+        badge !== void 0 ? /* @__PURE__ */ jsx18("span", { className: "max-w-28 truncate rounded-full bg-sidebar-hover px-1.5 py-0.5 text-[length:var(--ds-metadata)] font-semibold leading-none", children: badge }) : null,
+        count !== void 0 ? /* @__PURE__ */ jsx18("span", { className: "ds-type-metadata tabular-nums", children: count }) : null
+      ]
+    }
+  );
+}
 function readOpenSections(storageKey) {
   if (!storageKey || typeof window === "undefined") {
     return {};
@@ -1553,10 +1807,10 @@ function SidebarNavigation({
   storageKey,
   className
 }) {
-  const { isMobile, sidebarSide, sidebarState } = useAppShell();
-  const [openSections, setOpenSections] = React6.useState({});
-  const storageReady = React6.useRef(false);
-  React6.useEffect(() => {
+  const { isMobile, setMobileOpen, sidebarSide, sidebarState } = useAppShell();
+  const [openSections, setOpenSections] = React7.useState({});
+  const storageReady = React7.useRef(false);
+  React7.useEffect(() => {
     storageReady.current = false;
     const storedSections = readOpenSections(storageKey);
     queueMicrotask(() => {
@@ -1564,7 +1818,7 @@ function SidebarNavigation({
       setOpenSections(storedSections);
     });
   }, [storageKey]);
-  React6.useEffect(() => {
+  React7.useEffect(() => {
     if (!storageReady.current || !storageKey || !entries.some(isSection)) {
       return;
     }
@@ -1573,10 +1827,13 @@ function SidebarNavigation({
     } catch {
     }
   }, [entries, openSections, storageKey]);
-  const handleNavigate = React6.useCallback(() => {
+  const handleNavigate = React7.useCallback(() => {
+    if (isMobile) {
+      setMobileOpen(false);
+    }
     onNavigate?.();
-  }, [onNavigate]);
-  return /* @__PURE__ */ jsx16(
+  }, [isMobile, onNavigate, setMobileOpen]);
+  return /* @__PURE__ */ jsx18(
     "nav",
     {
       "data-slot": "sidebar-navigation",
@@ -1587,44 +1844,57 @@ function SidebarNavigation({
       ),
       children: entries.map((entry) => {
         if (!isSection(entry)) {
-          return /* @__PURE__ */ jsx16(
+          return /* @__PURE__ */ jsx18(
             NavigationGroup,
             {
               className: entry.startsSection ? "mt-[var(--ds-sidebar-group-gap)]" : void 0,
-              children: /* @__PURE__ */ jsx16(NavigationItem, { asChild: true, active: entry.active, tooltip: entry.label, children: renderLink(entry, {
-                "aria-current": entry.active ? "page" : void 0,
-                "aria-label": entry.label,
-                onClick: handleNavigate,
-                children: /* @__PURE__ */ jsxs14(Fragment3, { children: [
-                  entry.icon,
-                  /* @__PURE__ */ jsx16("span", { className: "truncate group-data-[sidebar-state=collapsed]/shell:hidden", children: entry.label })
-                ] })
-              }) })
+              children: /* @__PURE__ */ jsx18(
+                NavigationItem,
+                {
+                  active: entry.active,
+                  tooltip: entry.label,
+                  render: renderLink(entry, {
+                    "aria-current": entry.active ? "page" : void 0,
+                    "aria-label": getNavigationAccessibleLabel(entry),
+                    onClick: handleNavigate,
+                    children: /* @__PURE__ */ jsxs16(Fragment4, { children: [
+                      entry.icon,
+                      /* @__PURE__ */ jsx18("span", { className: "truncate group-data-[sidebar-state=collapsed]/shell:hidden", children: entry.label }),
+                      /* @__PURE__ */ jsx18(NavigationMetadata, { badge: entry.badge, count: entry.count })
+                    ] })
+                  })
+                }
+              )
             },
             entry.id
           );
         }
         const sectionOpen = (openSections[entry.id] ?? false) || entry.active;
         if (sidebarState === "collapsed" && !isMobile) {
-          return /* @__PURE__ */ jsxs14(DropdownMenu, { children: [
-            /* @__PURE__ */ jsx16(
+          return /* @__PURE__ */ jsxs16(DropdownMenu, { children: [
+            /* @__PURE__ */ jsx18(
               NavigationGroup,
               {
                 className: entry.startsSection ? "mt-[var(--ds-sidebar-group-gap)]" : void 0,
-                children: /* @__PURE__ */ jsx16(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs14(
-                  NavigationItem,
+                children: /* @__PURE__ */ jsx18(
+                  DropdownMenuTrigger,
                   {
-                    active: entry.active,
-                    "aria-label": `${entry.label} menu`,
-                    children: [
-                      entry.icon,
-                      /* @__PURE__ */ jsx16("span", { className: "sr-only", children: entry.label })
-                    ]
+                    render: /* @__PURE__ */ jsxs16(
+                      NavigationItem,
+                      {
+                        active: entry.active,
+                        "aria-label": `${getNavigationAccessibleLabel(entry)} menu`,
+                        children: [
+                          entry.icon,
+                          /* @__PURE__ */ jsx18("span", { className: "sr-only", children: entry.label })
+                        ]
+                      }
+                    )
                   }
-                ) })
+                )
               }
             ),
-            /* @__PURE__ */ jsxs14(
+            /* @__PURE__ */ jsxs16(
               DropdownMenuContent,
               {
                 side: sidebarSide === "left" ? "right" : "left",
@@ -1632,24 +1902,25 @@ function SidebarNavigation({
                 sideOffset: 8,
                 className: "min-w-56 rounded-[var(--ds-radius-surface)] p-1.5",
                 children: [
-                  /* @__PURE__ */ jsx16(DropdownMenuLabel, { className: "px-2 py-1.5 font-semibold text-muted-foreground", children: entry.label }),
-                  /* @__PURE__ */ jsx16(DropdownMenuGroup, { children: entry.items.map((item) => /* @__PURE__ */ jsx16(
-                    DropdownMenuItem,
+                  /* @__PURE__ */ jsx18(DropdownMenuLabel, { className: "px-2 py-1.5 font-semibold text-text-supporting", children: entry.label }),
+                  /* @__PURE__ */ jsx18(DropdownMenuGroup, { children: entry.items.map((item) => /* @__PURE__ */ jsx18(
+                    DropdownMenuLinkItem,
                     {
-                      asChild: true,
-                      className: cn(
-                        "min-h-9 cursor-pointer rounded-[var(--ds-radius-control)] [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:stroke-[1.75]",
-                        item.active && "bg-selection-background text-selection-foreground shadow-[inset_2px_0_0_var(--selection-indicator)] focus:bg-selection-background focus:text-selection-foreground"
-                      ),
-                      children: renderLink(item, {
+                      closeOnClick: true,
+                      render: renderLink(item, {
                         "aria-current": item.active ? "page" : void 0,
-                        "aria-label": item.label,
+                        "aria-label": getNavigationAccessibleLabel(item),
                         onClick: handleNavigate,
-                        children: /* @__PURE__ */ jsxs14(Fragment3, { children: [
+                        children: /* @__PURE__ */ jsxs16(Fragment4, { children: [
                           item.icon,
-                          /* @__PURE__ */ jsx16("span", { className: "truncate", children: item.label })
+                          /* @__PURE__ */ jsx18("span", { className: "truncate", children: item.label }),
+                          /* @__PURE__ */ jsx18(NavigationMetadata, { badge: item.badge, count: item.count })
                         ] })
-                      })
+                      }),
+                      className: cn(
+                        "min-h-9 cursor-pointer rounded-[var(--ds-radius-control)] [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:stroke-[1.75]",
+                        item.active && "bg-selection-background text-selection-foreground shadow-[inset_2px_0_0_var(--selection-indicator)] focus:bg-selection-background focus:text-selection-foreground"
+                      )
                     },
                     item.id
                   )) })
@@ -1658,7 +1929,7 @@ function SidebarNavigation({
             )
           ] }, entry.id);
         }
-        return /* @__PURE__ */ jsx16(
+        return /* @__PURE__ */ jsx18(
           Collapsible,
           {
             open: sectionOpen,
@@ -1670,38 +1941,43 @@ function SidebarNavigation({
               "group/collapsible",
               entry.startsSection && "mt-2"
             ),
-            children: /* @__PURE__ */ jsxs14(NavigationGroup, { children: [
-              /* @__PURE__ */ jsx16(CollapsibleTrigger, { asChild: true, children: /* @__PURE__ */ jsxs14(
-                NavigationItem,
+            children: /* @__PURE__ */ jsxs16(NavigationGroup, { children: [
+              /* @__PURE__ */ jsx18(
+                CollapsibleTrigger,
                 {
-                  active: entry.active,
-                  tooltip: entry.label,
-                  "aria-label": entry.label,
-                  "aria-expanded": sectionOpen,
-                  children: [
-                    entry.icon,
-                    /* @__PURE__ */ jsx16("span", { className: "truncate group-data-[sidebar-state=collapsed]/shell:hidden", children: entry.label }),
-                    /* @__PURE__ */ jsx16(ChevronRight2, { className: "ml-auto transition-transform duration-150 ease-out group-data-[sidebar-state=collapsed]/shell:hidden group-data-[state=open]/collapsible:rotate-90" })
-                  ]
+                  render: /* @__PURE__ */ jsxs16(
+                    NavigationItem,
+                    {
+                      active: entry.active,
+                      tooltip: entry.label,
+                      "aria-label": getNavigationAccessibleLabel(entry),
+                      children: [
+                        entry.icon,
+                        /* @__PURE__ */ jsx18("span", { className: "truncate group-data-[sidebar-state=collapsed]/shell:hidden", children: entry.label }),
+                        /* @__PURE__ */ jsx18(NavigationMetadata, { badge: entry.badge, count: entry.count }),
+                        /* @__PURE__ */ jsx18(ChevronRight2, { className: "ml-auto transition-transform duration-150 ease-out group-data-[sidebar-state=collapsed]/shell:hidden group-data-[open]/collapsible:rotate-90" })
+                      ]
+                    }
+                  )
                 }
-              ) }),
-              /* @__PURE__ */ jsx16(
+              ),
+              /* @__PURE__ */ jsx18(
                 CollapsibleContent,
                 {
                   "data-slot": "sidebar-collapsible-content",
                   className: "overflow-hidden",
-                  children: /* @__PURE__ */ jsx16(NavigationSubList, { children: entry.items.map((item) => /* @__PURE__ */ jsx16(
+                  children: /* @__PURE__ */ jsx18(NavigationSubList, { children: entry.items.map((item) => /* @__PURE__ */ jsx18(
                     NavigationSubItem,
                     {
-                      asChild: true,
                       active: item.active,
-                      children: renderLink(item, {
+                      render: renderLink(item, {
                         "aria-current": item.active ? "page" : void 0,
-                        "aria-label": item.label,
+                        "aria-label": getNavigationAccessibleLabel(item),
                         onClick: handleNavigate,
-                        children: /* @__PURE__ */ jsxs14(Fragment3, { children: [
+                        children: /* @__PURE__ */ jsxs16(Fragment4, { children: [
                           item.icon,
-                          /* @__PURE__ */ jsx16("span", { className: "truncate", children: item.label })
+                          /* @__PURE__ */ jsx18("span", { className: "truncate", children: item.label }),
+                          /* @__PURE__ */ jsx18(NavigationMetadata, { badge: item.badge, count: item.count })
                         ] })
                       })
                     },
@@ -1719,19 +1995,19 @@ function SidebarNavigation({
 }
 
 // src/patterns/state-views.tsx
-import { jsx as jsx17, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs17 } from "react/jsx-runtime";
 function StateView({ title, description, action, icon, className, ...props }) {
-  return /* @__PURE__ */ jsxs15(
+  return /* @__PURE__ */ jsxs17(
     "div",
     {
       "data-slot": "state-view",
       className: cn("flex min-h-72 flex-col items-center justify-center gap-3 border-b px-6 py-12 text-center", className),
       ...props,
       children: [
-        icon ? /* @__PURE__ */ jsx17("div", { className: "flex size-10 items-center justify-center rounded-md bg-neutral-background text-neutral-foreground [&_svg]:size-5", children: icon }) : null,
-        /* @__PURE__ */ jsx17("h2", { className: "ds-type-section-title", children: title }),
-        description ? /* @__PURE__ */ jsx17("p", { className: "ds-type-ui max-w-md text-muted-foreground", children: description }) : null,
-        action ? /* @__PURE__ */ jsx17("div", { className: "mt-1", children: action }) : null
+        icon ? /* @__PURE__ */ jsx19("div", { className: "flex size-10 items-center justify-center rounded-md bg-neutral-background text-neutral-foreground [&_svg]:size-5", children: icon }) : null,
+        /* @__PURE__ */ jsx19("h2", { className: "ds-type-section-title", children: title }),
+        description ? /* @__PURE__ */ jsx19("p", { className: "ds-type-ui max-w-md text-text-supporting", children: description }) : null,
+        action ? /* @__PURE__ */ jsx19("div", { className: "mt-1", children: action }) : null
       ]
     }
   );
@@ -1740,16 +2016,16 @@ function LoadingRows({
   rows = 6,
   columns = 5
 }) {
-  return /* @__PURE__ */ jsx17("div", { "data-slot": "loading-rows", className: "border-b", children: Array.from({ length: rows }).map((_, index) => /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx19("div", { "data-slot": "loading-rows", className: "border-b", children: Array.from({ length: rows }).map((_, index) => /* @__PURE__ */ jsx19(
     "div",
     {
       className: "grid h-[var(--ds-row-height)] items-center gap-4 border-b px-5 last:border-b-0",
       style: { gridTemplateColumns: `2fr repeat(${Math.max(columns - 1, 1)}, minmax(5rem, 1fr))` },
-      children: Array.from({ length: columns }).map((_2, columnIndex) => /* @__PURE__ */ jsx17(
+      children: Array.from({ length: columns }).map((_2, columnIndex) => /* @__PURE__ */ jsx19(
         "div",
         {
           className: cn(
-            "h-3 rounded bg-muted",
+            "h-3 rounded bg-surface-muted",
             columnIndex === 0 ? "w-44" : "w-24"
           )
         },
@@ -1760,7 +2036,7 @@ function LoadingRows({
   )) });
 }
 function ErrorState({ title, description, action, className, ...props }) {
-  return /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx19(
     StateView,
     {
       title,
@@ -1775,8 +2051,8 @@ function ErrorState({ title, description, action, className, ...props }) {
 }
 
 // src/patterns/value-meter.tsx
-import * as React7 from "react";
-import { jsx as jsx18, jsxs as jsxs16 } from "react/jsx-runtime";
+import * as React8 from "react";
+import { jsx as jsx20, jsxs as jsxs18 } from "react/jsx-runtime";
 function ValueMeter({
   label,
   value,
@@ -1787,23 +2063,23 @@ function ValueMeter({
   className,
   ...props
 }) {
-  const labelId = React7.useId();
+  const labelId = React8.useId();
   const hasMaximum = typeof maximum === "number" && maximum > 0;
   const boundedValue = hasMaximum ? Math.min(maximum, Math.max(0, value)) : value;
   const percentage = hasMaximum ? boundedValue / maximum * 100 : null;
   const resolvedValueLabel = valueLabel ?? (hasMaximum ? `${boundedValue} of ${maximum}` : String(boundedValue));
-  return /* @__PURE__ */ jsxs16(
+  return /* @__PURE__ */ jsxs18(
     "div",
     {
       "data-slot": "value-meter",
       className: cn("grid gap-2", className),
       ...props,
       children: [
-        /* @__PURE__ */ jsxs16("div", { className: "flex items-baseline justify-between gap-4 text-sm", children: [
-          /* @__PURE__ */ jsx18("span", { id: labelId, className: "font-medium text-foreground", children: label }),
-          /* @__PURE__ */ jsx18("span", { className: "text-muted-foreground", children: resolvedValueLabel })
+        /* @__PURE__ */ jsxs18("div", { className: "flex items-baseline justify-between gap-4 text-sm", children: [
+          /* @__PURE__ */ jsx20("span", { id: labelId, className: "font-medium text-text-primary", children: label }),
+          /* @__PURE__ */ jsx20("span", { className: "text-text-supporting", children: resolvedValueLabel })
         ] }),
-        percentage === null ? null : /* @__PURE__ */ jsx18(
+        percentage === null ? null : /* @__PURE__ */ jsx20(
           "div",
           {
             role: "progressbar",
@@ -1812,7 +2088,7 @@ function ValueMeter({
             "aria-valuemax": maximum ?? void 0,
             "aria-valuenow": boundedValue,
             className: "h-2 overflow-hidden rounded-full bg-surface-muted",
-            children: /* @__PURE__ */ jsx18(
+            children: /* @__PURE__ */ jsx20(
               "div",
               {
                 className: cn(
@@ -1826,20 +2102,20 @@ function ValueMeter({
             )
           }
         ),
-        detail ? /* @__PURE__ */ jsx18("div", { className: "text-xs text-muted-foreground", children: detail }) : null
+        detail ? /* @__PURE__ */ jsx20("div", { className: "text-xs text-text-supporting", children: detail }) : null
       ]
     }
   );
 }
 
 // src/patterns/workbench.tsx
-import * as React8 from "react";
-import { jsx as jsx19, jsxs as jsxs17 } from "react/jsx-runtime";
+import * as React9 from "react";
+import { jsx as jsx21, jsxs as jsxs19 } from "react/jsx-runtime";
 function WorkbenchShell({ className, ...props }) {
-  return /* @__PURE__ */ jsx19("div", { "data-slot": "workbench-shell", className: cn("min-w-0", className), ...props });
+  return /* @__PURE__ */ jsx21("div", { "data-slot": "workbench-shell", className: cn("min-w-0", className), ...props });
 }
 function WorkbenchRail({ variant = "secondary", open = true, className, ...props }) {
-  return /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsx21(
     "aside",
     {
       "data-slot": "workbench-rail",
@@ -1851,16 +2127,16 @@ function WorkbenchRail({ variant = "secondary", open = true, className, ...props
   );
 }
 function WorkbenchMain({ className, ...props }) {
-  return /* @__PURE__ */ jsx19("main", { "data-slot": "workbench-main", className: cn("min-w-0", className), ...props });
+  return /* @__PURE__ */ jsx21("main", { "data-slot": "workbench-main", className: cn("min-w-0", className), ...props });
 }
 function WorkbenchInspector({ className, ...props }) {
-  return /* @__PURE__ */ jsx19("aside", { "data-slot": "workbench-inspector", className: cn("min-w-0", className), ...props });
+  return /* @__PURE__ */ jsx21("aside", { "data-slot": "workbench-inspector", className: cn("min-w-0", className), ...props });
 }
 function WorkbenchMobileToolbar({ className, ...props }) {
-  return /* @__PURE__ */ jsx19("div", { "data-slot": "workbench-mobile-toolbar", className: cn(className), ...props });
+  return /* @__PURE__ */ jsx21("div", { "data-slot": "workbench-mobile-toolbar", className: cn(className), ...props });
 }
 function WorkbenchBackdrop({ open = true, className, ...props }) {
-  return /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsx21(
     "button",
     {
       type: "button",
@@ -1872,19 +2148,19 @@ function WorkbenchBackdrop({ open = true, className, ...props }) {
   );
 }
 function WorkbenchSection({ className, ...props }) {
-  return /* @__PURE__ */ jsx19("section", { "data-slot": "workbench-section", className: cn(className), ...props });
+  return /* @__PURE__ */ jsx21("section", { "data-slot": "workbench-section", className: cn(className), ...props });
 }
 function WorkbenchSectionHeader({ title, metadata, action, className, ...props }) {
-  return /* @__PURE__ */ jsxs17("div", { "data-slot": "workbench-section-header", className: cn(className), ...props, children: [
-    /* @__PURE__ */ jsxs17("div", { "data-slot": "workbench-section-heading", children: [
-      /* @__PURE__ */ jsx19("h2", { children: title }),
-      metadata ? /* @__PURE__ */ jsx19("span", { children: metadata }) : null
+  return /* @__PURE__ */ jsxs19("div", { "data-slot": "workbench-section-header", className: cn(className), ...props, children: [
+    /* @__PURE__ */ jsxs19("div", { "data-slot": "workbench-section-heading", children: [
+      /* @__PURE__ */ jsx21("h2", { children: title }),
+      metadata ? /* @__PURE__ */ jsx21("span", { children: metadata }) : null
     ] }),
-    action ? /* @__PURE__ */ jsx19("div", { "data-slot": "workbench-section-action", children: action }) : null
+    action ? /* @__PURE__ */ jsx21("div", { "data-slot": "workbench-section-action", children: action }) : null
   ] });
 }
 function ResourceRow({ as = "div", href, selected = false, className, children, ...props }) {
-  return React8.createElement(
+  return React9.createElement(
     as,
     {
       ...props,
@@ -1898,35 +2174,35 @@ function ResourceRow({ as = "div", href, selected = false, className, children,
   );
 }
 function ResourceRowIcon({ className, ...props }) {
-  return /* @__PURE__ */ jsx19("span", { "data-slot": "resource-row-icon", className: cn(className), ...props });
+  return /* @__PURE__ */ jsx21("span", { "data-slot": "resource-row-icon", className: cn(className), ...props });
 }
 function ResourceRowContent({ className, ...props }) {
-  return /* @__PURE__ */ jsx19("span", { "data-slot": "resource-row-content", className: cn(className), ...props });
+  return /* @__PURE__ */ jsx21("span", { "data-slot": "resource-row-content", className: cn(className), ...props });
 }
 function ResourceRowTitle({ className, ...props }) {
-  return /* @__PURE__ */ jsx19("strong", { "data-slot": "resource-row-title", className: cn(className), ...props });
+  return /* @__PURE__ */ jsx21("strong", { "data-slot": "resource-row-title", className: cn(className), ...props });
 }
 function ResourceRowDescription({ className, ...props }) {
-  return /* @__PURE__ */ jsx19("span", { "data-slot": "resource-row-description", className: cn(className), ...props });
+  return /* @__PURE__ */ jsx21("span", { "data-slot": "resource-row-description", className: cn(className), ...props });
 }
 function ResourceRowMeta({ className, ...props }) {
-  return /* @__PURE__ */ jsx19("span", { "data-slot": "resource-row-meta", className: cn(className), ...props });
+  return /* @__PURE__ */ jsx21("span", { "data-slot": "resource-row-meta", className: cn(className), ...props });
 }
 function WorkbenchInspectorSection({ label, action, className, children, ...props }) {
-  return /* @__PURE__ */ jsxs17("section", { "data-slot": "workbench-inspector-section", className: cn(className), ...props, children: [
-    /* @__PURE__ */ jsxs17("div", { "data-slot": "workbench-inspector-label", children: [
-      /* @__PURE__ */ jsx19("h3", { children: label }),
-      action ? /* @__PURE__ */ jsx19("div", { children: action }) : null
+  return /* @__PURE__ */ jsxs19("section", { "data-slot": "workbench-inspector-section", className: cn(className), ...props, children: [
+    /* @__PURE__ */ jsxs19("div", { "data-slot": "workbench-inspector-label", children: [
+      /* @__PURE__ */ jsx21("h3", { children: label }),
+      action ? /* @__PURE__ */ jsx21("div", { children: action }) : null
     ] }),
     children
   ] });
 }
 function IdentityRow({ initials, name, detail, compact = false, className, ...props }) {
-  return /* @__PURE__ */ jsxs17("div", { "data-slot": "identity-row", "data-compact": compact ? "true" : "false", className: cn(className), ...props, children: [
-    /* @__PURE__ */ jsx19("span", { "data-slot": "identity-avatar", children: initials }),
-    /* @__PURE__ */ jsxs17("span", { "data-slot": "identity-copy", children: [
-      /* @__PURE__ */ jsx19("strong", { children: name }),
-      detail ? /* @__PURE__ */ jsx19("small", { children: detail }) : null
+  return /* @__PURE__ */ jsxs19("div", { "data-slot": "identity-row", "data-compact": compact ? "true" : "false", className: cn(className), ...props, children: [
+    /* @__PURE__ */ jsx21("span", { "data-slot": "identity-avatar", children: initials }),
+    /* @__PURE__ */ jsxs19("span", { "data-slot": "identity-copy", children: [
+      /* @__PURE__ */ jsx21("strong", { children: name }),
+      detail ? /* @__PURE__ */ jsx21("small", { children: detail }) : null
     ] })
   ] });
 }
@@ -1935,7 +2211,9 @@ export {
   PaginationControls,
   DataTable,
   EntityTable,
+  CommandPalette,
   DetailBackLink,
+  FilterBar,
   useAppShell,
   AppShell,
   AppSidebar,
@@ -2000,4 +2278,4 @@ export {
   WorkbenchInspectorSection,
   IdentityRow
 };
-//# sourceMappingURL=chunk-KYH7IZ3Z.js.map
+//# sourceMappingURL=chunk-WEI3PU4A.js.map