@conscia-labs/design-system 1.0.3 → 1.2.0

package/dist/{chunk-LPUWW7XF.js → chunk-OYJH5CVD.js}

@@ -65,7 +65,7 @@ import {
   TooltipTrigger,
   index_parts_exports,
   useRender
-} from "./chunk-HAJMOT3P.js";
+} from "./chunk-HWUUODVE.js";
 import {
   cn
 } from "./chunk-JU5DQXFC.js";
@@ -456,6 +456,12 @@ function CommandPalette({
                       "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",
+                      onKeyDown: (event) => {
+                        if (event.key === "Escape") {
+                          event.preventDefault();
+                          handleOpenChange(false);
+                        }
+                      },
                       placeholder
                     }
                   )
@@ -497,11 +503,35 @@ function CommandPalette({
   ] }) });
 }
 
+// src/patterns/data-panel.tsx
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+function DataPanel({ className, ...props }) {
+  return /* @__PURE__ */ jsx5("section", { "data-slot": "data-panel", className: cn("min-w-0 overflow-hidden rounded-[var(--ds-radius-surface)] border border-border-default bg-surface text-text-primary shadow-[var(--ds-shadow-raised)]", className), ...props });
+}
+function DataPanelHeader({ title, description, status, actions, className, ...props }) {
+  return /* @__PURE__ */ jsxs4("header", { "data-slot": "data-panel-header", className: cn("flex min-w-0 items-start justify-between gap-4 border-b border-border-subtle px-[var(--ds-surface-padding)] py-3", className), ...props, children: [
+    /* @__PURE__ */ jsxs4("div", { className: "min-w-0", children: [
+      /* @__PURE__ */ jsxs4("div", { className: "flex flex-wrap items-center gap-2", children: [
+        /* @__PURE__ */ jsx5("h2", { className: "ds-type-card-title", children: title }),
+        status
+      ] }),
+      description ? /* @__PURE__ */ jsx5("p", { className: "ds-type-metadata mt-0.5 text-text-supporting", children: description }) : null
+    ] }),
+    actions ? /* @__PURE__ */ jsx5("div", { className: "shrink-0", children: actions }) : null
+  ] });
+}
+function DataPanelContent({ padded = false, className, ...props }) {
+  return /* @__PURE__ */ jsx5("div", { "data-slot": "data-panel-content", "data-padded": padded ? "true" : void 0, className: cn(padded && "p-[var(--ds-surface-padding)]", className), ...props });
+}
+function DataPanelFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx5("footer", { "data-slot": "data-panel-footer", className: cn("border-t border-border-subtle px-[var(--ds-surface-padding)] py-3 ds-type-metadata text-text-supporting", className), ...props });
+}
+
 // src/patterns/detail-back-link.tsx
 import { ArrowLeft } from "lucide-react";
-import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 function DetailBackLink({ label, className, ...props }) {
-  return /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs5(
     "a",
     {
       "data-slot": "detail-back-link",
@@ -511,7 +541,7 @@ function DetailBackLink({ label, className, ...props }) {
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsx5(ArrowLeft, { className: "size-4", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx6(ArrowLeft, { className: "size-4", "aria-hidden": "true" }),
         label
       ]
     }
@@ -519,7 +549,7 @@ function DetailBackLink({ label, className, ...props }) {
 }
 
 // src/patterns/filter-bar.tsx
-import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
 function FilterBar({
   children,
   clearAllLabel = "Clear all",
@@ -527,7 +557,7 @@ function FilterBar({
   onClearAll,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs6(
     "div",
     {
       "data-slot": "filter-bar",
@@ -539,8 +569,8 @@ function FilterBar({
       "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
+        /* @__PURE__ */ jsx7("div", { className: "flex min-w-0 flex-1 flex-wrap items-center gap-1.5", children }),
+        onClearAll ? /* @__PURE__ */ jsx7(Button, { type: "button", variant: "ghost", size: "sm", onClick: onClearAll, className: "shrink-0", children: clearAllLabel }) : null
       ]
     }
   );
@@ -549,7 +579,7 @@ function FilterBar({
 // src/patterns/app-shell.tsx
 import * as React3 from "react";
 import { PanelLeftIcon, Search, X } from "lucide-react";
-import { Fragment as Fragment3, jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx8, jsxs as jsxs7 } 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";
@@ -657,6 +687,7 @@ function useSidebarOverflow() {
 }
 function AppShell({
   defaultSidebarOpen = true,
+  headerLayout = "split",
   children,
   className,
   style,
@@ -715,12 +746,13 @@ function AppShell({
       toggleSidebar
     ]
   );
-  return /* @__PURE__ */ jsx7(AppShellContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx7(TooltipProvider, { delayDuration: 120, children: /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx8(AppShellContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx8(TooltipProvider, { delayDuration: 120, children: /* @__PURE__ */ jsx8(
     "div",
     {
       "data-slot": "app-shell",
       "data-sidebar-state": sidebarOpen ? "expanded" : "collapsed",
       "data-sidebar-side": sidebarSide,
+      "data-header-layout": headerLayout,
       suppressHydrationWarning: true,
       className: cn(
         "group/shell min-h-svh bg-canvas text-text-primary",
@@ -746,23 +778,23 @@ function AppSidebar({
   React3.useEffect(() => {
     setSidebarSide(side);
   }, [setSidebarSide, side]);
-  return /* @__PURE__ */ jsxs6(Fragment3, { children: [
-    /* @__PURE__ */ jsx7(Sheet, { side, open: mobileOpen, onOpenChange: setMobileOpen, children: /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsxs7(Fragment3, { children: [
+    /* @__PURE__ */ jsx8(Sheet, { side, open: mobileOpen, onOpenChange: setMobileOpen, children: /* @__PURE__ */ jsxs7(
       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__ */ jsxs6(SheetHeader, { className: "sr-only", children: [
-            /* @__PURE__ */ jsx7(SheetTitle, { children: title }),
-            /* @__PURE__ */ jsx7(SheetDescription, { children: description })
+          /* @__PURE__ */ jsxs7(SheetHeader, { className: "sr-only", children: [
+            /* @__PURE__ */ jsx8(SheetTitle, { children: title }),
+            /* @__PURE__ */ jsx8(SheetDescription, { children: description })
           ] }),
-          /* @__PURE__ */ jsx7("div", { className: "flex h-full min-h-0 flex-col", children })
+          /* @__PURE__ */ jsx8("div", { className: "flex h-full min-h-0 flex-col", children })
         ]
       }
     ) }),
-    /* @__PURE__ */ jsx7(
+    /* @__PURE__ */ jsx8(
       "aside",
       {
         "data-slot": "app-sidebar",
@@ -772,6 +804,7 @@ function AppSidebar({
           "fixed inset-y-0 z-20 hidden w-[var(--ds-app-sidebar-width)] shrink-0 flex-col border-sidebar-border bg-sidebar-canvas text-sidebar-primary-text transition-[width] duration-200 ease-linear lg:flex",
           side === "left" ? "left-0 border-r" : "right-0 border-l",
           "group-data-[sidebar-state=collapsed]/shell:w-[var(--ds-app-sidebar-width)]",
+          "group-data-[header-layout=integrated]/shell:top-[var(--ds-topbar-height)]",
           className
         ),
         ...props,
@@ -784,7 +817,7 @@ function AppSidebarHeader({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx8(
     "div",
     {
       "data-slot": "app-sidebar-header",
@@ -801,7 +834,7 @@ function AppSidebarContent({
   ...props
 }) {
   const { contentRef, hasScrollBefore, hasScrollAfter } = useSidebarOverflow();
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx8(
     "div",
     {
       "data-slot": "app-sidebar-content",
@@ -820,7 +853,7 @@ function AppSidebarFooter({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx8(
     "div",
     {
       "data-slot": "app-sidebar-footer",
@@ -839,17 +872,17 @@ function ProductIdentity({
   collapsedLabel,
   className
 }) {
-  return /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsxs7(
     "div",
     {
       "data-slot": "product-identity",
       className: cn("flex min-w-0 items-center gap-2", className),
       children: [
-        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
+        icon ? /* @__PURE__ */ jsx8("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__ */ jsx8("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__ */ jsxs7("div", { className: "min-w-0 group-data-[sidebar-state=collapsed]/shell:hidden", children: [
+          /* @__PURE__ */ jsx8("div", { className: "ds-type-navigation truncate font-semibold text-sidebar-primary-text", children: label }),
+          description ? /* @__PURE__ */ jsx8("div", { className: "ds-type-metadata truncate text-sidebar-metadata-text", children: description }) : null
         ] })
       ]
     }
@@ -859,7 +892,7 @@ function SidebarSeparator({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx8(
     Separator,
     {
       "data-slot": "app-sidebar-separator",
@@ -874,27 +907,30 @@ function NavigationGroup({
   children,
   className
 }) {
-  return /* @__PURE__ */ jsxs6(
+  const labelId = React3.useId();
+  return /* @__PURE__ */ jsxs7(
     "section",
     {
       "data-slot": "navigation-group",
+      "aria-labelledby": label ? labelId : void 0,
       className: cn(
         "flex min-w-0 flex-col gap-[var(--ds-sidebar-label-gap)]",
         className
       ),
       children: [
-        label ? /* @__PURE__ */ jsxs6(
+        label ? /* @__PURE__ */ jsxs7(
           "div",
           {
             "data-slot": "navigation-group-label",
+            id: labelId,
             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__ */ jsx7("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__ */ jsx8("span", { className: "ds-type-metadata ml-auto shrink-0 font-medium normal-case tracking-normal text-sidebar-group-count", children: count }) : null
             ]
           }
         ) : null,
-        /* @__PURE__ */ jsx7("div", { className: "flex min-w-0 flex-col gap-[var(--ds-sidebar-item-gap)]", children })
+        /* @__PURE__ */ jsx8("div", { className: "flex min-w-0 flex-col gap-[var(--ds-sidebar-item-gap)]", children })
       ]
     }
   );
@@ -907,7 +943,7 @@ 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-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"
+    active && "bg-sidebar-active-background font-semibold text-sidebar-active-foreground hover:bg-sidebar-active-background hover:text-sidebar-active-foreground [&>svg]:text-sidebar-active-foreground"
   );
 }
 var NavigationItem = React3.forwardRef(
@@ -939,9 +975,9 @@ var NavigationItem = React3.forwardRef(
     if (!tooltip) {
       return item;
     }
-    return /* @__PURE__ */ jsxs6(Tooltip, { children: [
-      /* @__PURE__ */ jsx7(TooltipTrigger, { render: item }),
-      /* @__PURE__ */ jsx7(
+    return /* @__PURE__ */ jsxs7(Tooltip, { children: [
+      /* @__PURE__ */ jsx8(TooltipTrigger, { render: item }),
+      /* @__PURE__ */ jsx8(
         TooltipContent,
         {
           side: sidebarSide === "left" ? "right" : "left",
@@ -971,7 +1007,7 @@ var NavigationSubItem = React3.forwardRef(
           "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",
+          active && "bg-sidebar-active-background font-semibold text-sidebar-active-foreground hover:bg-sidebar-active-background hover:text-sidebar-active-foreground [&>svg]:text-sidebar-active-foreground",
           className
         ),
         ...props
@@ -983,7 +1019,7 @@ function NavigationSubList({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx8(
     "div",
     {
       "data-slot": "navigation-sub-list",
@@ -1018,9 +1054,9 @@ function SidebarTrigger({
       toggleSidebar();
     }
   };
-  return /* @__PURE__ */ jsxs6(IconButton, { ...triggerProps, children: [
-    /* @__PURE__ */ jsx7(PanelLeftIcon, {}),
-    /* @__PURE__ */ jsx7("span", { className: "sr-only", children: "Toggle navigation" })
+  return /* @__PURE__ */ jsxs7(IconButton, { ...triggerProps, children: [
+    /* @__PURE__ */ jsx8(PanelLeftIcon, {}),
+    /* @__PURE__ */ jsx8("span", { className: "sr-only", children: "Toggle navigation" })
   ] });
 }
 function SidebarSearch({
@@ -1056,7 +1092,7 @@ function SidebarSearch({
     mountedRef.current = true;
   }, [expanded]);
   if (!expanded) {
-    return /* @__PURE__ */ jsxs6(
+    return /* @__PURE__ */ jsxs7(
       "button",
       {
         ref: triggerRef,
@@ -1070,14 +1106,14 @@ function SidebarSearch({
         onClick: () => setExpanded(true),
         "aria-label": triggerLabel,
         children: [
-          /* @__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
+          /* @__PURE__ */ jsx8(Search, { className: "size-4 shrink-0 text-sidebar-icon" }),
+          /* @__PURE__ */ jsx8("span", { className: "truncate group-data-[sidebar-state=collapsed]/shell:hidden", children: triggerLabel }),
+          shortcut ? /* @__PURE__ */ jsx8(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__ */ jsxs6(
+  return /* @__PURE__ */ jsxs7(
     "div",
     {
       "data-slot": "sidebar-search",
@@ -1087,8 +1123,8 @@ function SidebarSearch({
         className
       ),
       children: [
-        /* @__PURE__ */ jsx7(Search, { className: "size-4 shrink-0 text-sidebar-icon" }),
-        /* @__PURE__ */ jsx7(
+        /* @__PURE__ */ jsx8(Search, { className: "size-4 shrink-0 text-sidebar-icon" }),
+        /* @__PURE__ */ jsx8(
           Input,
           {
             ref: inputRef,
@@ -1104,7 +1140,7 @@ function SidebarSearch({
             ...props
           }
         ),
-        /* @__PURE__ */ jsx7(
+        /* @__PURE__ */ jsx8(
           "button",
           {
             type: "button",
@@ -1114,7 +1150,7 @@ function SidebarSearch({
               setExpanded(false);
             },
             "aria-label": "Close search",
-            children: /* @__PURE__ */ jsx7(X, { className: "size-4" })
+            children: /* @__PURE__ */ jsx8(X, { className: "size-4" })
           }
         )
       ]
@@ -1125,24 +1161,86 @@ function MainRegion({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx8(
     "div",
     {
       "data-slot": "main-region",
       className: cn(
         "flex min-h-svh min-w-0 w-full flex-1 flex-col transition-[padding] duration-200 ease-linear",
         "group-data-[sidebar-side=left]/shell:lg:pl-[var(--ds-app-sidebar-width)] group-data-[sidebar-side=right]/shell:lg:pr-[var(--ds-app-sidebar-width)]",
+        "group-data-[header-layout=integrated]/shell:pt-[var(--ds-topbar-height)]",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function AppHeader({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx8(
+    "header",
+    {
+      "data-slot": "app-header",
+      className: cn(
+        "fixed inset-x-0 top-0 z-30 flex h-[var(--ds-topbar-height)] min-h-[var(--ds-topbar-height)] items-center gap-2 border-b border-border-subtle bg-canvas/96 px-[var(--ds-topbar-padding-x)] backdrop-blur supports-[backdrop-filter]:bg-canvas/88 md:gap-3 md:px-[var(--ds-topbar-padding-x-wide)]",
         className
       ),
       ...props
     }
   );
 }
+function AppHeaderStart({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx8(
+    "div",
+    {
+      "data-slot": "app-header-start",
+      className: cn("flex min-w-0 flex-1 items-center gap-2", className),
+      ...props
+    }
+  );
+}
+function AppHeaderSearch({
+  mobileTrigger,
+  children,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs7(
+    "div",
+    {
+      "data-slot": "app-header-search",
+      className: cn("ml-auto flex shrink-0 items-center", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx8("div", { className: "hidden w-[min(22rem,32vw)] md:block", children }),
+        /* @__PURE__ */ jsx8("div", { className: "md:hidden", children: mobileTrigger })
+      ]
+    }
+  );
+}
+function AppHeaderActions({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx8(
+    "div",
+    {
+      "data-slot": "app-header-actions",
+      className: cn("flex shrink-0 items-center gap-1", className),
+      ...props
+    }
+  );
+}
 function TopBar({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx8(
     "header",
     {
       "data-slot": "top-bar",
@@ -1160,7 +1258,7 @@ function PageFrame({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx8(
     "main",
     {
       "data-slot": "page-frame",
@@ -1180,7 +1278,7 @@ function PageContent({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx8(
     "div",
     {
       "data-slot": "page-content",
@@ -1193,7 +1291,7 @@ function PageBoundary({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx8(
     "div",
     {
       "data-slot": "page-boundary",
@@ -1209,7 +1307,7 @@ function InspectorRegion({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx8(
     "aside",
     {
       "data-slot": "inspector-region",
@@ -1223,25 +1321,85 @@ function InspectorRegion({
 }
 
 // src/patterns/activity-list.tsx
-import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
 function ActivityList({ 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__ */ 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
+  return /* @__PURE__ */ jsx9("div", { "data-slot": "activity-list", className: cn("divide-y divide-border-subtle", className), ...props });
+}
+function ActivityItem({
+  leading,
+  icon,
+  title,
+  description,
+  metadata,
+  trailing,
+  status,
+  layout = "standard",
+  className,
+  ...props
+}) {
+  const hasLeading = leading !== void 0 || icon !== void 0;
+  const resolvedTrailing = trailing ?? status;
+  return /* @__PURE__ */ jsxs8(
+    "div",
+    {
+      "data-slot": "activity-item",
+      "data-layout": layout,
+      className: cn(
+        "grid gap-3 py-3",
+        hasLeading && resolvedTrailing && "grid-cols-[auto_minmax(0,1fr)_auto]",
+        hasLeading && !resolvedTrailing && "grid-cols-[auto_minmax(0,1fr)]",
+        !hasLeading && resolvedTrailing && "grid-cols-[minmax(0,1fr)_auto]",
+        !hasLeading && !resolvedTrailing && "grid-cols-1",
+        layout === "compact" && "py-2",
+        className
+      ),
+      ...props,
+      children: [
+        leading !== void 0 ? /* @__PURE__ */ jsx9("div", { "data-slot": "activity-item-leading", className: "shrink-0", children: leading }) : icon !== void 0 ? /* @__PURE__ */ jsx9("div", { "data-slot": "activity-item-leading", className: "flex size-8 items-center justify-center rounded-md bg-neutral-background text-neutral-foreground [&_svg]:size-4", children: icon }) : null,
+        /* @__PURE__ */ jsxs8("div", { className: "min-w-0", children: [
+          /* @__PURE__ */ jsx9("div", { className: "ds-type-ui font-medium text-text-primary", children: title }),
+          description ? /* @__PURE__ */ jsx9("div", { className: "ds-type-ui mt-0.5 text-text-supporting", children: description }) : null,
+          metadata ? /* @__PURE__ */ jsx9("div", { className: "ds-type-metadata mt-1 text-text-supporting", children: metadata }) : null
+        ] }),
+        resolvedTrailing ? /* @__PURE__ */ jsx9("div", { "data-slot": "activity-item-trailing", className: "shrink-0", children: resolvedTrailing }) : null
+      ]
+    }
+  );
+}
+
+// src/patterns/attention-list.tsx
+import { CheckCircle2, CircleAlert, CircleX, Info } from "lucide-react";
+import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
+function AttentionList({ className, ...props }) {
+  return /* @__PURE__ */ jsx10("ul", { "data-slot": "attention-list", className: cn("grid gap-2", className), ...props });
+}
+var toneClasses = {
+  neutral: "border-neutral-border bg-neutral-background text-neutral-foreground",
+  information: "border-information-border bg-information-background text-information-foreground",
+  success: "border-success-border bg-success-background text-success-foreground",
+  warning: "border-warning-border bg-warning-background text-warning-foreground",
+  danger: "border-danger-border bg-danger-background text-danger-foreground"
+};
+function AttentionItem({ title, description, metadata, action, tone = "neutral", severityLabel = `${tone[0].toUpperCase()}${tone.slice(1)}`, icon, className, ...props }) {
+  const Icon = tone === "danger" ? CircleX : tone === "warning" ? CircleAlert : tone === "success" ? CheckCircle2 : Info;
+  return /* @__PURE__ */ jsxs9("li", { "data-slot": "attention-item", "data-tone": tone, className: cn("grid grid-cols-[auto_minmax(0,1fr)_auto] items-start gap-3 rounded-[var(--ds-radius-control)] border px-3 py-2.5", toneClasses[tone], className), ...props, children: [
+    /* @__PURE__ */ jsx10("span", { className: "mt-0.5 [&>svg]:size-4", "aria-hidden": "true", children: icon ?? /* @__PURE__ */ jsx10(Icon, {}) }),
+    /* @__PURE__ */ jsxs9("div", { className: "min-w-0", children: [
+      /* @__PURE__ */ jsxs9("span", { className: "sr-only", children: [
+        severityLabel,
+        ": "
+      ] }),
+      /* @__PURE__ */ jsx10("div", { className: "ds-type-ui font-medium", children: title }),
+      description ? /* @__PURE__ */ jsx10("div", { className: "ds-type-metadata mt-0.5 opacity-85", children: description }) : null,
+      metadata ? /* @__PURE__ */ jsx10("div", { className: "ds-type-metadata mt-1 opacity-85", children: metadata }) : null
     ] }),
-    status ? /* @__PURE__ */ jsx8("div", { className: "shrink-0", children: status }) : null
+    action ? /* @__PURE__ */ jsx10("div", { className: "shrink-0", children: action }) : null
   ] });
 }
 
 // src/patterns/confirmation-dialog.tsx
 import * as React4 from "react";
-import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
 function ConfirmationDialog({ trigger, title, description, children, confirmLabel = "Confirm", cancelLabel = "Cancel", confirmVariant = "destructive", pending = false, onConfirm, onError }) {
   const [open, setOpen] = React4.useState(false);
   const [confirming, setConfirming] = React4.useState(false);
@@ -1260,17 +1418,17 @@ function ConfirmationDialog({ trigger, title, description, children, confirmLabe
       setConfirming(false);
     }
   }
-  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 })
+  return /* @__PURE__ */ jsxs10(AlertDialog, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx11(AlertDialogTrigger, { render: trigger, children: trigger }),
+    /* @__PURE__ */ jsxs10(AlertDialogContent, { children: [
+      /* @__PURE__ */ jsxs10(AlertDialogHeader, { children: [
+        /* @__PURE__ */ jsx11(AlertDialogTitle, { children: title }),
+        /* @__PURE__ */ jsx11(AlertDialogDescription, { children: description })
       ] }),
-      /* @__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 })
+      /* @__PURE__ */ jsx11(AlertDialogBody, { children }),
+      /* @__PURE__ */ jsxs10(AlertDialogFooter, { children: [
+        /* @__PURE__ */ jsx11(AlertDialogCancel, { render: /* @__PURE__ */ jsx11(Button, { type: "button", variant: "outline", disabled: isPending }), children: cancelLabel }),
+        /* @__PURE__ */ jsx11(AlertDialogAction, { render: /* @__PURE__ */ jsx11(Button, { type: "button", variant: confirmVariant, disabled: isPending, onClick: confirm }), children: isPending ? "Working..." : confirmLabel })
       ] })
     ] })
   ] });
@@ -1279,7 +1437,7 @@ function ConfirmationDialog({ trigger, title, description, children, confirmLabe
 // src/patterns/code-block.tsx
 import * as React5 from "react";
 import { Check, Copy } from "lucide-react";
-import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
 function CodeBlock({
   snippets,
   defaultValue,
@@ -1294,16 +1452,16 @@ function CodeBlock({
   const copyStatusId = React5.useId();
   const activeSnippet = snippets.find((snippet) => snippet.value === activeValue) ?? snippets[0];
   if (!activeSnippet) return null;
-  return /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx12(
     "div",
     {
       "data-slot": "code-block",
       className: cn("overflow-hidden rounded-lg border border-border-subtle bg-surface", className),
       ...props,
-      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(
+      children: /* @__PURE__ */ jsxs11(Tabs, { value: activeSnippet.value, onValueChange: setActiveValue, variant: "segmented", className: "gap-0", children: [
+        /* @__PURE__ */ jsxs11("div", { className: "flex items-center justify-between gap-3 border-b border-border-subtle bg-surface-muted px-3 py-2", children: [
+          /* @__PURE__ */ jsx12(TabsList, { variant: "segmented", size: "compact", "aria-label": "Code language", children: snippets.map((snippet) => /* @__PURE__ */ jsx12(TabsTrigger, { value: snippet.value, children: snippet.label }, snippet.value)) }),
+          /* @__PURE__ */ jsxs11(
             Button,
             {
               type: "button",
@@ -1321,23 +1479,31 @@ function CodeBlock({
               },
               "aria-describedby": copyStatusId,
               children: [
-                copiedValue === activeSnippet.value ? /* @__PURE__ */ jsx10(Check, {}) : /* @__PURE__ */ jsx10(Copy, {}),
+                copiedValue === activeSnippet.value ? /* @__PURE__ */ jsx12(Check, {}) : /* @__PURE__ */ jsx12(Copy, {}),
                 copiedValue === activeSnippet.value ? "Copied" : copyLabel
               ]
             }
           ),
-          /* @__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." : "" })
+          /* @__PURE__ */ jsx12("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__ */ 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))
+        snippets.map((snippet) => /* @__PURE__ */ jsx12(TabsContent, { value: snippet.value, className: "m-0", children: /* @__PURE__ */ jsx12(
+          "pre",
+          {
+            "aria-label": `${snippet.label} code example`,
+            tabIndex: 0,
+            className: "max-h-[32rem] overflow-auto p-4 text-sm leading-6 outline-none focus-visible:ring-[3px] focus-visible:ring-inset focus-visible:ring-focus/50",
+            children: /* @__PURE__ */ jsx12("code", { children: snippet.code })
+          }
+        ) }, snippet.value))
       ] })
     }
   );
 }
 
 // src/patterns/inventory-surface.tsx
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { jsx as jsx13 } from "react/jsx-runtime";
 function InventorySurface({ className, ...props }) {
-  return /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx13(
     Card,
     {
       "data-slot": "inventory-surface",
@@ -1347,16 +1513,16 @@ function InventorySurface({ className, ...props }) {
   );
 }
 function InventoryDesktop({ className, ...props }) {
-  return /* @__PURE__ */ jsx11("div", { "data-slot": "inventory-desktop", className: cn("hidden lg:block", className), ...props });
+  return /* @__PURE__ */ jsx13("div", { "data-slot": "inventory-desktop", className: cn("hidden lg:block", className), ...props });
 }
 function InventoryMobile({ className, ...props }) {
-  return /* @__PURE__ */ jsx11("div", { "data-slot": "inventory-mobile", className: cn("divide-y divide-border-subtle lg:hidden", className), ...props });
+  return /* @__PURE__ */ jsx13("div", { "data-slot": "inventory-mobile", className: cn("divide-y divide-border-subtle lg:hidden", className), ...props });
 }
 
 // src/patterns/metric-band.tsx
-import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
 function MetricBand({ columns = 4, className, ...props }) {
-  return /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx14(
     "div",
     {
       "data-slot": "metric-band",
@@ -1383,7 +1549,7 @@ function MetricBandItem({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsxs12(
     "div",
     {
       "data-slot": "metric-band-item",
@@ -1394,7 +1560,7 @@ function MetricBandItem({
       ),
       ...props,
       children: [
-        icon ? /* @__PURE__ */ jsx12(
+        icon ? /* @__PURE__ */ jsx14(
           "div",
           {
             className: cn(
@@ -1404,18 +1570,104 @@ function MetricBandItem({
             children: icon
           }
         ) : 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
+        /* @__PURE__ */ jsxs12("div", { className: "grid min-w-0 gap-1", children: [
+          /* @__PURE__ */ jsx14("div", { className: "ds-type-ui text-text-supporting", children: label }),
+          loading ? /* @__PURE__ */ jsx14(Skeleton, { className: "h-7 w-14" }) : /* @__PURE__ */ jsx14("div", { className: "text-2xl font-semibold tracking-tight", children: value ?? 0 }),
+          detail ? /* @__PURE__ */ jsx14("div", { className: "ds-type-metadata text-text-supporting", children: detail }) : null
         ] })
       ]
     }
   );
 }
 
+// src/patterns/metric-card.tsx
+import * as React6 from "react";
+import { ArrowDown as ArrowDown2, ArrowUp as ArrowUp2, Minus } from "lucide-react";
+import { Fragment as Fragment4, jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
+function MetricTrend({
+  direction,
+  sentiment = "neutral",
+  value,
+  accessibleLabel,
+  className,
+  ...props
+}) {
+  const Icon = direction === "up" ? ArrowUp2 : direction === "down" ? ArrowDown2 : Minus;
+  return /* @__PURE__ */ jsxs13(
+    "span",
+    {
+      "data-slot": "metric-trend",
+      "data-direction": direction,
+      "data-sentiment": sentiment,
+      role: "img",
+      "aria-label": accessibleLabel,
+      className: cn(
+        "inline-flex items-center gap-1 ds-type-metadata font-medium text-trend-neutral",
+        sentiment === "positive" && "text-trend-positive",
+        sentiment === "negative" && "text-trend-negative",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx15(Icon, { "aria-hidden": "true", className: "size-3.5 stroke-[2]" }),
+        /* @__PURE__ */ jsx15("span", { "aria-hidden": "true", children: value })
+      ]
+    }
+  );
+}
+function MetricCard({
+  label,
+  description,
+  value,
+  unit,
+  trend,
+  status,
+  emphasis = "supporting",
+  loading = false,
+  visualization,
+  visualizationSummary,
+  className,
+  ...props
+}) {
+  const labelId = React6.useId();
+  return /* @__PURE__ */ jsxs13(
+    "section",
+    {
+      "data-slot": "metric-card",
+      "data-emphasis": emphasis,
+      "aria-labelledby": labelId,
+      className: cn(
+        "flex min-w-0 flex-col overflow-hidden rounded-[var(--ds-radius-surface)] border border-border-default bg-surface text-text-primary shadow-[var(--ds-shadow-raised)]",
+        emphasis === "primary" ? "min-h-80" : "min-h-40",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs13("div", { className: "flex items-start justify-between gap-4 px-[var(--ds-surface-padding)] pt-[var(--ds-surface-padding)]", children: [
+          /* @__PURE__ */ jsxs13("div", { className: "min-w-0", children: [
+            /* @__PURE__ */ jsx15("h2", { id: labelId, className: "ds-type-card-title", children: label }),
+            description ? /* @__PURE__ */ jsx15("p", { className: "ds-type-metadata mt-0.5 text-text-supporting", children: description }) : null
+          ] }),
+          status ? /* @__PURE__ */ jsx15("div", { className: "shrink-0", children: status }) : null
+        ] }),
+        /* @__PURE__ */ jsxs13("div", { className: "flex flex-wrap items-baseline gap-x-2 gap-y-1 px-[var(--ds-surface-padding)] pt-3", children: [
+          loading ? /* @__PURE__ */ jsx15(Skeleton, { className: cn("h-8", emphasis === "primary" ? "w-24" : "w-16") }) : /* @__PURE__ */ jsxs13(Fragment4, { children: [
+            /* @__PURE__ */ jsx15("span", { className: cn("font-semibold tabular-nums tracking-tight", emphasis === "primary" ? "text-4xl" : "text-2xl"), children: value ?? 0 }),
+            unit ? /* @__PURE__ */ jsx15("span", { className: "ds-type-ui text-text-supporting", children: unit }) : null
+          ] }),
+          trend ? /* @__PURE__ */ jsx15("div", { className: "ml-1", children: trend }) : null
+        ] }),
+        visualization ? /* @__PURE__ */ jsxs13("figure", { className: "mt-auto min-h-0 flex-1 pt-4", children: [
+          /* @__PURE__ */ jsx15("div", { "data-slot": "metric-card-visualization", className: "h-full min-h-20 w-full", children: visualization }),
+          /* @__PURE__ */ jsx15("figcaption", { className: "sr-only", children: visualizationSummary })
+        ] }) : null
+      ]
+    }
+  );
+}
+
 // src/patterns/page-header.tsx
-import { jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs14 } from "react/jsx-runtime";
 function PageHeader({
   title,
   description,
@@ -1427,7 +1679,7 @@ function PageHeader({
   className,
   ...props
 }) {
-  const resolvedActions = actions ?? actionNode ?? (action ? /* @__PURE__ */ jsx13(
+  const resolvedActions = actions ?? actionNode ?? (action ? /* @__PURE__ */ jsx16(
     "a",
     {
       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",
@@ -1435,29 +1687,29 @@ function PageHeader({
       children: action.label
     }
   ) : null);
-  return /* @__PURE__ */ jsxs11(
+  return /* @__PURE__ */ jsxs14(
     "header",
     {
       "data-slot": "page-header",
       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__ */ 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 }),
+        /* @__PURE__ */ jsxs14("div", { className: "min-w-0", children: [
+          /* @__PURE__ */ jsxs14("div", { className: "flex min-w-0 flex-wrap items-center gap-2", children: [
+            /* @__PURE__ */ jsx16("h1", { className: "ds-type-page-title truncate", children: title }),
             status
           ] }),
-          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
+          description ? /* @__PURE__ */ jsx16("p", { className: "ds-type-ui mt-1 max-w-3xl text-text-supporting", children: description }) : null,
+          metadata ? /* @__PURE__ */ jsx16("div", { className: "ds-type-metadata mt-2 text-text-supporting", children: metadata }) : null
         ] }),
-        resolvedActions ? /* @__PURE__ */ jsx13("div", { className: "flex shrink-0 flex-wrap items-center gap-2", children: resolvedActions }) : null
+        resolvedActions ? /* @__PURE__ */ jsx16("div", { className: "flex shrink-0 flex-wrap items-center gap-2", children: resolvedActions }) : null
       ]
     }
   );
 }
 
 // src/patterns/page-toolbar.tsx
-import { jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs15 } from "react/jsx-runtime";
 function PageToolbar({
   search,
   filters,
@@ -1467,19 +1719,19 @@ function PageToolbar({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs12(
+  return /* @__PURE__ */ jsxs15(
     "div",
     {
       "data-slot": "page-toolbar",
       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__ */ 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__ */ jsxs15("div", { className: "flex min-w-0 flex-1 flex-col gap-2 sm:flex-row sm:items-center", children: [
+          search ? /* @__PURE__ */ jsx17("div", { className: "min-w-0 flex-1 sm:min-w-48 sm:max-w-sm", children: search }) : null,
+          filters ? /* @__PURE__ */ jsx17("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-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,
+        /* @__PURE__ */ jsxs15("div", { className: "flex min-h-[var(--ds-control-height)] flex-wrap items-center gap-2 lg:justify-end", children: [
+          bulkActions ? /* @__PURE__ */ jsx17("div", { "data-slot": "page-toolbar-bulk-actions", className: "contents", children: bulkActions }) : null,
           viewControls,
           children
         ] })
@@ -1489,8 +1741,8 @@ function PageToolbar({
 }
 
 // src/patterns/preference-controls.tsx
-import * as React6 from "react";
-import { jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
+import * as React7 from "react";
+import { jsx as jsx18, jsxs as jsxs16 } from "react/jsx-runtime";
 var APPEARANCE_KEY = "conscia-appearance:v1";
 var DENSITY_KEY = "conscia-density:v1";
 var PREFERENCE_EVENT = "conscia-preferences";
@@ -1516,7 +1768,7 @@ function writePreference(key, value) {
   window.dispatchEvent(new Event(PREFERENCE_EVENT));
 }
 function useStoredPreference(key, fallback, allowedValues) {
-  return React6.useSyncExternalStore(
+  return React7.useSyncExternalStore(
     (onStoreChange) => {
       window.addEventListener("storage", onStoreChange);
       window.addEventListener(PREFERENCE_EVENT, onStoreChange);
@@ -1544,7 +1796,7 @@ function useConsciaPreferences() {
 }
 function DesignSystemPreferenceSync() {
   const { appearance, density } = useConsciaPreferences();
-  React6.useEffect(() => {
+  React7.useEffect(() => {
     const media = window.matchMedia("(prefers-color-scheme: dark)");
     const sync = () => applyConsciaPreferences(
       document.documentElement,
@@ -1560,7 +1812,7 @@ function DesignSystemPreferenceSync() {
 }
 function AppearanceControl({ className }) {
   const { appearance } = useConsciaPreferences();
-  return /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsx18(
     SegmentedControl,
     {
       className,
@@ -1573,7 +1825,7 @@ function AppearanceControl({ className }) {
 }
 function DensityControl({ className }) {
   const { density } = useConsciaPreferences();
-  return /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsx18(
     SegmentedControl,
     {
       className,
@@ -1585,9 +1837,9 @@ function DensityControl({ className }) {
   );
 }
 function DesignPreferenceControls({ className }) {
-  return /* @__PURE__ */ jsxs13("div", { className: cn("flex flex-col gap-3 text-sm", className), children: [
-    /* @__PURE__ */ jsx15(AppearanceControl, {}),
-    /* @__PURE__ */ jsx15(DensityControl, {})
+  return /* @__PURE__ */ jsxs16("div", { className: cn("flex flex-col gap-3 text-sm", className), children: [
+    /* @__PURE__ */ jsx18(AppearanceControl, {}),
+    /* @__PURE__ */ jsx18(DensityControl, {})
   ] });
 }
 function SegmentedControl({
@@ -1597,16 +1849,16 @@ function SegmentedControl({
   values,
   onChange
 }) {
-  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(
+  return /* @__PURE__ */ jsxs16("fieldset", { className: cn("flex flex-col gap-2", className), children: [
+    /* @__PURE__ */ jsx18("legend", { className: "text-[var(--ds-metadata)] font-medium text-text-supporting", children: label }),
+    /* @__PURE__ */ jsx18("div", { className: "grid w-full grid-cols-3 rounded-[var(--ds-radius-control)] bg-surface-muted p-1", children: values.map((item) => /* @__PURE__ */ jsx18(
       "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-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",
+        className: "min-w-0 h-7 rounded-[calc(var(--ds-radius-control)-2px)] px-1.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
@@ -1615,10 +1867,10 @@ function SegmentedControl({
 }
 
 // src/patterns/provider-mark.tsx
-import { jsx as jsx16, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs17 } from "react/jsx-runtime";
 function ProviderMark({ name, shortName, description, size = "default", className, ...props }) {
-  return /* @__PURE__ */ jsxs14("div", { "data-slot": "provider-mark", className: cn("flex min-w-0 items-center gap-3", className), ...props, children: [
-    /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsxs17("div", { "data-slot": "provider-mark", className: cn("flex min-w-0 items-center gap-3", className), ...props, children: [
+    /* @__PURE__ */ jsx19(
       "div",
       {
         "aria-hidden": "true",
@@ -1629,15 +1881,15 @@ function ProviderMark({ name, shortName, description, size = "default", classNam
         children: shortName
       }
     ),
-    /* @__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
+    /* @__PURE__ */ jsxs17("div", { className: "min-w-0", children: [
+      /* @__PURE__ */ jsx19("div", { className: "ds-type-ui truncate font-medium text-text-primary", children: name }),
+      description ? /* @__PURE__ */ jsx19("div", { className: "ds-type-metadata mt-0.5 truncate text-text-supporting", children: description }) : null
     ] })
   ] });
 }
 
 // src/patterns/resource-detail.tsx
-import { jsx as jsx17, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs18 } from "react/jsx-runtime";
 function ResourceSummary({
   variant = "plain",
   title,
@@ -1649,7 +1901,7 @@ function ResourceSummary({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs15(
+  return /* @__PURE__ */ jsxs18(
     "section",
     {
       "data-slot": "resource-summary",
@@ -1661,18 +1913,18 @@ function ResourceSummary({
       ),
       ...props,
       children: [
-        /* @__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,
+        /* @__PURE__ */ jsxs18("div", { className: "flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between", children: [
+          /* @__PURE__ */ jsxs18("div", { className: "min-w-0", children: [
+            title || status ? /* @__PURE__ */ jsxs18("div", { className: "flex min-w-0 flex-wrap items-center gap-2", children: [
+              title ? /* @__PURE__ */ jsx20("h2", { className: "ds-type-section-title truncate", children: title }) : null,
               status
             ] }) : 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
+            description ? /* @__PURE__ */ jsx20("p", { className: "ds-type-ui mt-1 max-w-3xl text-text-supporting", children: description }) : null,
+            metadata ? /* @__PURE__ */ jsx20("div", { className: "ds-type-metadata mt-2 text-text-supporting", children: metadata }) : null
           ] }),
-          actions ? /* @__PURE__ */ jsx17("div", { className: "flex shrink-0 flex-wrap items-center gap-2", children: actions }) : null
+          actions ? /* @__PURE__ */ jsx20("div", { className: "flex shrink-0 flex-wrap items-center gap-2", children: actions }) : null
         ] }),
-        children ? /* @__PURE__ */ jsx17("div", { className: "mt-4", children }) : null
+        children ? /* @__PURE__ */ jsx20("div", { className: "mt-4", children }) : null
       ]
     }
   );
@@ -1681,7 +1933,7 @@ function DetailSections({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx20(
     "div",
     {
       "data-slot": "detail-sections",
@@ -1699,7 +1951,7 @@ function DetailSection({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs15(
+  return /* @__PURE__ */ jsxs18(
     "section",
     {
       "data-slot": "detail-section",
@@ -1710,14 +1962,14 @@ function DetailSection({
       ),
       ...props,
       children: [
-        /* @__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
+        /* @__PURE__ */ jsxs18("div", { className: "flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between", children: [
+          /* @__PURE__ */ jsxs18("div", { className: "min-w-0", children: [
+            /* @__PURE__ */ jsx20("h2", { className: "ds-type-section-title", children: title }),
+            description ? /* @__PURE__ */ jsx20("p", { className: "ds-type-ui mt-1 max-w-3xl text-text-supporting", children: description }) : null
           ] }),
-          actions ? /* @__PURE__ */ jsx17("div", { className: "flex shrink-0 items-center gap-2", children: actions }) : null
+          actions ? /* @__PURE__ */ jsx20("div", { className: "flex shrink-0 items-center gap-2", children: actions }) : null
         ] }),
-        children ? /* @__PURE__ */ jsx17("div", { className: "mt-4", children }) : null
+        children ? /* @__PURE__ */ jsx20("div", { className: "mt-4", children }) : null
       ]
     }
   );
@@ -1726,7 +1978,7 @@ function KeyValueList({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx20(
     "dl",
     {
       "data-slot": "key-value-list",
@@ -1740,9 +1992,9 @@ function KeyValueItem({
   value,
   breakValue = false
 }) {
-  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(
+  return /* @__PURE__ */ jsxs18("div", { "data-slot": "key-value-item", className: "flex justify-between gap-4", children: [
+    /* @__PURE__ */ jsx20("dt", { className: "text-text-supporting", children: label }),
+    /* @__PURE__ */ jsx20(
       "dd",
       {
         className: cn(
@@ -1756,12 +2008,18 @@ function KeyValueItem({
 }
 
 // src/patterns/sidebar-navigation.tsx
-import * as React7 from "react";
+import * as React8 from "react";
 import { ChevronRight as ChevronRight2 } from "lucide-react";
-import { Fragment as Fragment4, jsx as jsx18, jsxs as jsxs16 } from "react/jsx-runtime";
-function isSection(entry) {
+import { Fragment as Fragment5, jsx as jsx21, jsxs as jsxs19 } from "react/jsx-runtime";
+function hasItems(entry) {
   return "items" in entry;
 }
+function isStaticGroup(entry) {
+  return hasItems(entry) && entry.type === "group";
+}
+function isCollapsibleSection(entry) {
+  return hasItems(entry) && entry.type !== "group";
+}
 function getNavigationAccessibleLabel(item) {
   const metadata = [item.badgeLabel, item.countLabel].filter(Boolean);
   return metadata.length > 0 ? `${item.label}, ${metadata.join(", ")}` : item.label;
@@ -1773,18 +2031,26 @@ function NavigationMetadata({
   if (badge === void 0 && count === void 0) {
     return null;
   }
-  return /* @__PURE__ */ jsxs16(
+  return /* @__PURE__ */ jsxs19(
     "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
+        badge !== void 0 ? /* @__PURE__ */ jsx21("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__ */ jsx21("span", { className: "ds-type-metadata tabular-nums", children: count }) : null
       ]
     }
   );
 }
+function NavigationItemContent({ item }) {
+  return /* @__PURE__ */ jsxs19(Fragment5, { children: [
+    item.icon,
+    !item.icon && item.collapsedLabel ? /* @__PURE__ */ jsx21("span", { className: "hidden shrink-0 font-semibold group-data-[sidebar-state=collapsed]/shell:inline", children: item.collapsedLabel }) : null,
+    /* @__PURE__ */ jsx21("span", { className: "truncate group-data-[sidebar-state=collapsed]/shell:hidden", children: item.label }),
+    /* @__PURE__ */ jsx21(NavigationMetadata, { badge: item.badge, count: item.count })
+  ] });
+}
 function readOpenSections(storageKey) {
   if (!storageKey || typeof window === "undefined") {
     return {};
@@ -1808,9 +2074,9 @@ function SidebarNavigation({
   className
 }) {
   const { isMobile, setMobileOpen, sidebarSide, sidebarState } = useAppShell();
-  const [openSections, setOpenSections] = React7.useState({});
-  const storageReady = React7.useRef(false);
-  React7.useEffect(() => {
+  const [openSections, setOpenSections] = React8.useState({});
+  const storageReady = React8.useRef(false);
+  React8.useEffect(() => {
     storageReady.current = false;
     const storedSections = readOpenSections(storageKey);
     queueMicrotask(() => {
@@ -1818,8 +2084,8 @@ function SidebarNavigation({
       setOpenSections(storedSections);
     });
   }, [storageKey]);
-  React7.useEffect(() => {
-    if (!storageReady.current || !storageKey || !entries.some(isSection)) {
+  React8.useEffect(() => {
+    if (!storageReady.current || !storageKey || !entries.some(isCollapsibleSection)) {
       return;
     }
     try {
@@ -1827,13 +2093,13 @@ function SidebarNavigation({
     } catch {
     }
   }, [entries, openSections, storageKey]);
-  const handleNavigate = React7.useCallback(() => {
+  const handleNavigate = React8.useCallback(() => {
     if (isMobile) {
       setMobileOpen(false);
     }
     onNavigate?.();
   }, [isMobile, onNavigate, setMobileOpen]);
-  return /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsx21(
     "nav",
     {
       "data-slot": "sidebar-navigation",
@@ -1843,12 +2109,28 @@ function SidebarNavigation({
         className
       ),
       children: entries.map((entry) => {
-        if (!isSection(entry)) {
-          return /* @__PURE__ */ jsx18(
+        if (isStaticGroup(entry)) {
+          return /* @__PURE__ */ jsx21(NavigationGroup, { label: entry.label, count: entry.count, children: entry.items.map((item) => /* @__PURE__ */ jsx21(
+            NavigationItem,
+            {
+              active: item.active,
+              tooltip: item.label,
+              render: renderLink(item, {
+                "aria-current": item.active ? "page" : void 0,
+                "aria-label": getNavigationAccessibleLabel(item),
+                onClick: handleNavigate,
+                children: /* @__PURE__ */ jsx21(NavigationItemContent, { item })
+              })
+            },
+            item.id
+          )) }, entry.id);
+        }
+        if (!hasItems(entry)) {
+          return /* @__PURE__ */ jsx21(
             NavigationGroup,
             {
               className: entry.startsSection ? "mt-[var(--ds-sidebar-group-gap)]" : void 0,
-              children: /* @__PURE__ */ jsx18(
+              children: /* @__PURE__ */ jsx21(
                 NavigationItem,
                 {
                   active: entry.active,
@@ -1857,11 +2139,7 @@ function SidebarNavigation({
                     "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 })
-                    ] })
+                    children: /* @__PURE__ */ jsx21(NavigationItemContent, { item: entry })
                   })
                 }
               )
@@ -1869,24 +2147,27 @@ function SidebarNavigation({
             entry.id
           );
         }
-        const sectionOpen = (openSections[entry.id] ?? false) || entry.active;
+        const activeChild = entry.items.some((item) => item.active);
+        const defaultOpen = entry.type === "submenu" ? entry.defaultOpen : false;
+        const legacyActive = entry.type === void 0 ? entry.active : false;
+        const sectionOpen = (openSections[entry.id] ?? defaultOpen) || activeChild || legacyActive;
         if (sidebarState === "collapsed" && !isMobile) {
-          return /* @__PURE__ */ jsxs16(DropdownMenu, { children: [
-            /* @__PURE__ */ jsx18(
+          return /* @__PURE__ */ jsxs19(DropdownMenu, { children: [
+            /* @__PURE__ */ jsx21(
               NavigationGroup,
               {
                 className: entry.startsSection ? "mt-[var(--ds-sidebar-group-gap)]" : void 0,
-                children: /* @__PURE__ */ jsx18(
+                children: /* @__PURE__ */ jsx21(
                   DropdownMenuTrigger,
                   {
-                    render: /* @__PURE__ */ jsxs16(
+                    render: /* @__PURE__ */ jsxs19(
                       NavigationItem,
                       {
-                        active: entry.active,
                         "aria-label": `${getNavigationAccessibleLabel(entry)} menu`,
+                        className: activeChild ? "text-sidebar-primary-text" : void 0,
                         children: [
                           entry.icon,
-                          /* @__PURE__ */ jsx18("span", { className: "sr-only", children: entry.label })
+                          /* @__PURE__ */ jsx21("span", { className: "sr-only", children: entry.label })
                         ]
                       }
                     )
@@ -1894,7 +2175,7 @@ function SidebarNavigation({
                 )
               }
             ),
-            /* @__PURE__ */ jsxs16(
+            /* @__PURE__ */ jsxs19(
               DropdownMenuContent,
               {
                 side: sidebarSide === "left" ? "right" : "left",
@@ -1902,8 +2183,8 @@ function SidebarNavigation({
                 sideOffset: 8,
                 className: "min-w-56 rounded-[var(--ds-radius-surface)] p-1.5",
                 children: [
-                  /* @__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(
+                  /* @__PURE__ */ jsx21(DropdownMenuLabel, { className: "px-2 py-1.5 font-semibold text-text-supporting", children: entry.label }),
+                  /* @__PURE__ */ jsx21(DropdownMenuGroup, { children: entry.items.map((item) => /* @__PURE__ */ jsx21(
                     DropdownMenuLinkItem,
                     {
                       closeOnClick: true,
@@ -1911,15 +2192,15 @@ function SidebarNavigation({
                         "aria-current": item.active ? "page" : void 0,
                         "aria-label": getNavigationAccessibleLabel(item),
                         onClick: handleNavigate,
-                        children: /* @__PURE__ */ jsxs16(Fragment4, { children: [
+                        children: /* @__PURE__ */ jsxs19(Fragment5, { children: [
                           item.icon,
-                          /* @__PURE__ */ jsx18("span", { className: "truncate", children: item.label }),
-                          /* @__PURE__ */ jsx18(NavigationMetadata, { badge: item.badge, count: item.count })
+                          /* @__PURE__ */ jsx21("span", { className: "truncate", children: item.label }),
+                          /* @__PURE__ */ jsx21(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.active && "bg-selection-background font-semibold text-selection-foreground focus:bg-selection-background focus:text-selection-foreground"
                       )
                     },
                     item.id
@@ -1929,7 +2210,7 @@ function SidebarNavigation({
             )
           ] }, entry.id);
         }
-        return /* @__PURE__ */ jsx18(
+        return /* @__PURE__ */ jsx21(
           Collapsible,
           {
             open: sectionOpen,
@@ -1941,32 +2222,32 @@ function SidebarNavigation({
               "group/collapsible",
               entry.startsSection && "mt-2"
             ),
-            children: /* @__PURE__ */ jsxs16(NavigationGroup, { children: [
-              /* @__PURE__ */ jsx18(
+            children: /* @__PURE__ */ jsxs19(NavigationGroup, { children: [
+              /* @__PURE__ */ jsx21(
                 CollapsibleTrigger,
                 {
-                  render: /* @__PURE__ */ jsxs16(
+                  render: /* @__PURE__ */ jsxs19(
                     NavigationItem,
                     {
-                      active: entry.active,
                       tooltip: entry.label,
                       "aria-label": getNavigationAccessibleLabel(entry),
+                      className: activeChild ? "text-sidebar-primary-text" : void 0,
                       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__ */ jsx21("span", { className: "truncate group-data-[sidebar-state=collapsed]/shell:hidden", children: entry.label }),
+                        /* @__PURE__ */ jsx21(NavigationMetadata, { badge: entry.badge, count: entry.count }),
+                        /* @__PURE__ */ jsx21(ChevronRight2, { className: "ml-auto transition-transform duration-150 ease-out group-data-[sidebar-state=collapsed]/shell:hidden group-data-[open]/collapsible:rotate-90" })
                       ]
                     }
                   )
                 }
               ),
-              /* @__PURE__ */ jsx18(
+              /* @__PURE__ */ jsx21(
                 CollapsibleContent,
                 {
                   "data-slot": "sidebar-collapsible-content",
                   className: "overflow-hidden",
-                  children: /* @__PURE__ */ jsx18(NavigationSubList, { children: entry.items.map((item) => /* @__PURE__ */ jsx18(
+                  children: /* @__PURE__ */ jsx21(NavigationSubList, { children: entry.items.map((item) => /* @__PURE__ */ jsx21(
                     NavigationSubItem,
                     {
                       active: item.active,
@@ -1974,10 +2255,10 @@ function SidebarNavigation({
                         "aria-current": item.active ? "page" : void 0,
                         "aria-label": getNavigationAccessibleLabel(item),
                         onClick: handleNavigate,
-                        children: /* @__PURE__ */ jsxs16(Fragment4, { children: [
+                        children: /* @__PURE__ */ jsxs19(Fragment5, { children: [
                           item.icon,
-                          /* @__PURE__ */ jsx18("span", { className: "truncate", children: item.label }),
-                          /* @__PURE__ */ jsx18(NavigationMetadata, { badge: item.badge, count: item.count })
+                          /* @__PURE__ */ jsx21("span", { className: "truncate", children: item.label }),
+                          /* @__PURE__ */ jsx21(NavigationMetadata, { badge: item.badge, count: item.count })
                         ] })
                       })
                     },
@@ -1995,19 +2276,19 @@ function SidebarNavigation({
 }
 
 // src/patterns/state-views.tsx
-import { jsx as jsx19, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs20 } from "react/jsx-runtime";
 function StateView({ title, description, action, icon, className, ...props }) {
-  return /* @__PURE__ */ jsxs17(
+  return /* @__PURE__ */ jsxs20(
     "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__ */ 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
+        icon ? /* @__PURE__ */ jsx22("div", { className: "flex size-10 items-center justify-center rounded-md bg-neutral-background text-neutral-foreground [&_svg]:size-5", children: icon }) : null,
+        /* @__PURE__ */ jsx22("h2", { className: "ds-type-section-title", children: title }),
+        description ? /* @__PURE__ */ jsx22("p", { className: "ds-type-ui max-w-md text-text-supporting", children: description }) : null,
+        action ? /* @__PURE__ */ jsx22("div", { className: "mt-1", children: action }) : null
       ]
     }
   );
@@ -2016,12 +2297,12 @@ function LoadingRows({
   rows = 6,
   columns = 5
 }) {
-  return /* @__PURE__ */ jsx19("div", { "data-slot": "loading-rows", className: "border-b", children: Array.from({ length: rows }).map((_, index) => /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsx22("div", { "data-slot": "loading-rows", className: "border-b", children: Array.from({ length: rows }).map((_, index) => /* @__PURE__ */ jsx22(
     "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__ */ jsx19(
+      children: Array.from({ length: columns }).map((_2, columnIndex) => /* @__PURE__ */ jsx22(
         "div",
         {
           className: cn(
@@ -2036,7 +2317,7 @@ function LoadingRows({
   )) });
 }
 function ErrorState({ title, description, action, className, ...props }) {
-  return /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsx22(
     StateView,
     {
       title,
@@ -2051,8 +2332,8 @@ function ErrorState({ title, description, action, className, ...props }) {
 }
 
 // src/patterns/value-meter.tsx
-import * as React8 from "react";
-import { jsx as jsx20, jsxs as jsxs18 } from "react/jsx-runtime";
+import * as React9 from "react";
+import { jsx as jsx23, jsxs as jsxs21 } from "react/jsx-runtime";
 function ValueMeter({
   label,
   value,
@@ -2063,23 +2344,23 @@ function ValueMeter({
   className,
   ...props
 }) {
-  const labelId = React8.useId();
+  const labelId = React9.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__ */ jsxs18(
+  return /* @__PURE__ */ jsxs21(
     "div",
     {
       "data-slot": "value-meter",
       className: cn("grid gap-2", className),
       ...props,
       children: [
-        /* @__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 })
+        /* @__PURE__ */ jsxs21("div", { className: "flex items-baseline justify-between gap-4 text-sm", children: [
+          /* @__PURE__ */ jsx23("span", { id: labelId, className: "font-medium text-text-primary", children: label }),
+          /* @__PURE__ */ jsx23("span", { className: "text-text-supporting", children: resolvedValueLabel })
         ] }),
-        percentage === null ? null : /* @__PURE__ */ jsx20(
+        percentage === null ? null : /* @__PURE__ */ jsx23(
           "div",
           {
             role: "progressbar",
@@ -2088,7 +2369,7 @@ function ValueMeter({
             "aria-valuemax": maximum ?? void 0,
             "aria-valuenow": boundedValue,
             className: "h-2 overflow-hidden rounded-full bg-surface-muted",
-            children: /* @__PURE__ */ jsx20(
+            children: /* @__PURE__ */ jsx23(
               "div",
               {
                 className: cn(
@@ -2102,20 +2383,20 @@ function ValueMeter({
             )
           }
         ),
-        detail ? /* @__PURE__ */ jsx20("div", { className: "text-xs text-text-supporting", children: detail }) : null
+        detail ? /* @__PURE__ */ jsx23("div", { className: "text-xs text-text-supporting", children: detail }) : null
       ]
     }
   );
 }
 
 // src/patterns/workbench.tsx
-import * as React9 from "react";
-import { jsx as jsx21, jsxs as jsxs19 } from "react/jsx-runtime";
+import * as React10 from "react";
+import { jsx as jsx24, jsxs as jsxs22 } from "react/jsx-runtime";
 function WorkbenchShell({ className, ...props }) {
-  return /* @__PURE__ */ jsx21("div", { "data-slot": "workbench-shell", className: cn("min-w-0", className), ...props });
+  return /* @__PURE__ */ jsx24("div", { "data-slot": "workbench-shell", className: cn("min-w-0", className), ...props });
 }
 function WorkbenchRail({ variant = "secondary", open = true, className, ...props }) {
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx24(
     "aside",
     {
       "data-slot": "workbench-rail",
@@ -2127,16 +2408,16 @@ function WorkbenchRail({ variant = "secondary", open = true, className, ...props
   );
 }
 function WorkbenchMain({ className, ...props }) {
-  return /* @__PURE__ */ jsx21("main", { "data-slot": "workbench-main", className: cn("min-w-0", className), ...props });
+  return /* @__PURE__ */ jsx24("main", { "data-slot": "workbench-main", className: cn("min-w-0", className), ...props });
 }
 function WorkbenchInspector({ className, ...props }) {
-  return /* @__PURE__ */ jsx21("aside", { "data-slot": "workbench-inspector", className: cn("min-w-0", className), ...props });
+  return /* @__PURE__ */ jsx24("aside", { "data-slot": "workbench-inspector", className: cn("min-w-0", className), ...props });
 }
 function WorkbenchMobileToolbar({ className, ...props }) {
-  return /* @__PURE__ */ jsx21("div", { "data-slot": "workbench-mobile-toolbar", className: cn(className), ...props });
+  return /* @__PURE__ */ jsx24("div", { "data-slot": "workbench-mobile-toolbar", className: cn(className), ...props });
 }
 function WorkbenchBackdrop({ open = true, className, ...props }) {
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx24(
     "button",
     {
       type: "button",
@@ -2148,19 +2429,19 @@ function WorkbenchBackdrop({ open = true, className, ...props }) {
   );
 }
 function WorkbenchSection({ className, ...props }) {
-  return /* @__PURE__ */ jsx21("section", { "data-slot": "workbench-section", className: cn(className), ...props });
+  return /* @__PURE__ */ jsx24("section", { "data-slot": "workbench-section", className: cn(className), ...props });
 }
 function WorkbenchSectionHeader({ title, metadata, action, className, ...props }) {
-  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
+  return /* @__PURE__ */ jsxs22("div", { "data-slot": "workbench-section-header", className: cn(className), ...props, children: [
+    /* @__PURE__ */ jsxs22("div", { "data-slot": "workbench-section-heading", children: [
+      /* @__PURE__ */ jsx24("h2", { children: title }),
+      metadata ? /* @__PURE__ */ jsx24("span", { children: metadata }) : null
     ] }),
-    action ? /* @__PURE__ */ jsx21("div", { "data-slot": "workbench-section-action", children: action }) : null
+    action ? /* @__PURE__ */ jsx24("div", { "data-slot": "workbench-section-action", children: action }) : null
   ] });
 }
 function ResourceRow({ as = "div", href, selected = false, className, children, ...props }) {
-  return React9.createElement(
+  return React10.createElement(
     as,
     {
       ...props,
@@ -2174,35 +2455,35 @@ function ResourceRow({ as = "div", href, selected = false, className, children,
   );
 }
 function ResourceRowIcon({ className, ...props }) {
-  return /* @__PURE__ */ jsx21("span", { "data-slot": "resource-row-icon", className: cn(className), ...props });
+  return /* @__PURE__ */ jsx24("span", { "data-slot": "resource-row-icon", className: cn(className), ...props });
 }
 function ResourceRowContent({ className, ...props }) {
-  return /* @__PURE__ */ jsx21("span", { "data-slot": "resource-row-content", className: cn(className), ...props });
+  return /* @__PURE__ */ jsx24("span", { "data-slot": "resource-row-content", className: cn(className), ...props });
 }
 function ResourceRowTitle({ className, ...props }) {
-  return /* @__PURE__ */ jsx21("strong", { "data-slot": "resource-row-title", className: cn(className), ...props });
+  return /* @__PURE__ */ jsx24("strong", { "data-slot": "resource-row-title", className: cn(className), ...props });
 }
 function ResourceRowDescription({ className, ...props }) {
-  return /* @__PURE__ */ jsx21("span", { "data-slot": "resource-row-description", className: cn(className), ...props });
+  return /* @__PURE__ */ jsx24("span", { "data-slot": "resource-row-description", className: cn(className), ...props });
 }
 function ResourceRowMeta({ className, ...props }) {
-  return /* @__PURE__ */ jsx21("span", { "data-slot": "resource-row-meta", className: cn(className), ...props });
+  return /* @__PURE__ */ jsx24("span", { "data-slot": "resource-row-meta", className: cn(className), ...props });
 }
 function WorkbenchInspectorSection({ label, action, className, children, ...props }) {
-  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
+  return /* @__PURE__ */ jsxs22("section", { "data-slot": "workbench-inspector-section", className: cn(className), ...props, children: [
+    /* @__PURE__ */ jsxs22("div", { "data-slot": "workbench-inspector-label", children: [
+      /* @__PURE__ */ jsx24("h3", { children: label }),
+      action ? /* @__PURE__ */ jsx24("div", { children: action }) : null
     ] }),
     children
   ] });
 }
 function IdentityRow({ initials, name, detail, compact = false, className, ...props }) {
-  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
+  return /* @__PURE__ */ jsxs22("div", { "data-slot": "identity-row", "data-compact": compact ? "true" : "false", className: cn(className), ...props, children: [
+    /* @__PURE__ */ jsx24("span", { "data-slot": "identity-avatar", children: initials }),
+    /* @__PURE__ */ jsxs22("span", { "data-slot": "identity-copy", children: [
+      /* @__PURE__ */ jsx24("strong", { children: name }),
+      detail ? /* @__PURE__ */ jsx24("small", { children: detail }) : null
     ] })
   ] });
 }
@@ -2212,6 +2493,10 @@ export {
   DataTable,
   EntityTable,
   CommandPalette,
+  DataPanel,
+  DataPanelHeader,
+  DataPanelContent,
+  DataPanelFooter,
   DetailBackLink,
   FilterBar,
   useAppShell,
@@ -2229,6 +2514,10 @@ export {
   SidebarTrigger,
   SidebarSearch,
   MainRegion,
+  AppHeader,
+  AppHeaderStart,
+  AppHeaderSearch,
+  AppHeaderActions,
   TopBar,
   PageFrame,
   PageContent,
@@ -2236,6 +2525,8 @@ export {
   InspectorRegion,
   ActivityList,
   ActivityItem,
+  AttentionList,
+  AttentionItem,
   ConfirmationDialog,
   CodeBlock,
   InventorySurface,
@@ -2243,6 +2534,8 @@ export {
   InventoryMobile,
   MetricBand,
   MetricBandItem,
+  MetricTrend,
+  MetricCard,
   PageHeader,
   PageToolbar,
   useConsciaPreferences,
@@ -2278,4 +2571,4 @@ export {
   WorkbenchInspectorSection,
   IdentityRow
 };
-//# sourceMappingURL=chunk-LPUWW7XF.js.map
+//# sourceMappingURL=chunk-OYJH5CVD.js.map