@bmsuisse/ui 0.13.0 → 0.16.0

package/dist/index.js

@@ -29,7 +29,16 @@ var buttonVariants = cva(
         // Tailwind theme (this package doesn't define them) — same pattern as AlertBox's
         // warning/info/success colors, which assume tokens the shared theme doesn't have.
         "swiss-primary": "bg-swiss-primary text-swiss-primary-foreground font-semibold shadow-sm hover:bg-swiss-primary-hover hover:-translate-y-px active:translate-y-px",
-        "swiss-secondary": "border border-input bg-background font-semibold text-foreground shadow-sm hover:bg-accent hover:-translate-y-px active:translate-y-px"
+        "swiss-secondary": "border border-input bg-background font-semibold text-foreground shadow-sm hover:bg-accent hover:-translate-y-px active:translate-y-px",
+        // Violet "AI action" accent, in the same three weights as default/outline/ghost.
+        // Fixed Tailwind palette rather than a token — same choice as Badge's `warning`
+        // and AlertBox/StatusBadge's warning/info/success tones: the shared theme has no
+        // `ai` color, and unlike `swiss-primary` these should work in a consuming app with
+        // zero setup. Tints go through `violet-500/N` (not per-mode `violet-50`/`-950`
+        // shades) so one class list reads correctly on both light and dark surfaces.
+        ai: "bg-violet-600 text-white shadow-sm hover:bg-violet-600/90",
+        "ai-subtle": "border border-violet-500/30 bg-violet-500/10 text-violet-700 hover:bg-violet-500/20 dark:text-violet-300",
+        "ai-ghost": "text-violet-700 hover:bg-violet-500/10 dark:text-violet-300"
       },
       size: {
         default: "h-9 px-3",
@@ -219,7 +228,7 @@ DialogDescription.displayName = "DialogDescription";
 var DialogFooter = ({
   className,
   ...props
-}) => /* @__PURE__ */ jsx7("div", { className: cn("flex justify-end gap-2", className), ...props });
+}) => /* @__PURE__ */ jsx7("div", { className: cn("mt-4 flex justify-end gap-2", className), ...props });
 
 // src/primitives/popover.tsx
 import * as PopoverPrimitive from "@radix-ui/react-popover";
@@ -802,8 +811,42 @@ var Modal = ({
 ] }) });
 
 // src/patterns/modal/ConfirmDialog.tsx
-import { useState as useState2 } from "react";
-import { Fragment, jsx as jsx21, jsxs as jsxs7 } from "react/jsx-runtime";
+import { useState as useState3 } from "react";
+
+// src/patterns/modal/DialogActions.tsx
+import { Fragment, useState as useState2 } from "react";
+
+// src/lib/platform.ts
+function isWindowsPlatform() {
+  if (typeof navigator === "undefined") return false;
+  return /Windows/i.test(navigator.userAgent);
+}
+function getConfirmButtonPlacement() {
+  return isWindowsPlatform() ? "leading" : "trailing";
+}
+
+// src/patterns/modal/DialogActions.tsx
+import { Fragment as Fragment2, jsx as jsx21, jsxs as jsxs7 } from "react/jsx-runtime";
+function DialogActions({ actions, cancel }) {
+  const [placement] = useState2(getConfirmButtonPlacement);
+  const cancelLeading = placement === "trailing";
+  const ordered = cancelLeading ? actions : [...actions].reverse();
+  const renderedActions = ordered.map((action, index) => /* @__PURE__ */ jsx21(Fragment, { children: action }, actionKey(action, index)));
+  return cancelLeading ? /* @__PURE__ */ jsxs7(Fragment2, { children: [
+    cancel,
+    renderedActions
+  ] }) : /* @__PURE__ */ jsxs7(Fragment2, { children: [
+    renderedActions,
+    cancel
+  ] });
+}
+function actionKey(action, index) {
+  if (action && typeof action === "object" && "key" in action && action.key !== null) return action.key;
+  return index;
+}
+
+// src/patterns/modal/ConfirmDialog.tsx
+import { jsx as jsx22 } from "react/jsx-runtime";
 var ConfirmDialog = ({
   open,
   onOpenChange,
@@ -816,7 +859,7 @@ var ConfirmDialog = ({
   confirmTestId,
   cancelTestId
 }) => {
-  const [pending, setPending] = useState2(false);
+  const [pending, setPending] = useState3(false);
   const handleCancel = () => {
     onOpenChange(false);
   };
@@ -831,34 +874,33 @@ var ConfirmDialog = ({
       setPending(false);
     }
   };
-  return /* @__PURE__ */ jsx21(
+  const cancelButton = /* @__PURE__ */ jsx22(Button, { variant: "outline", onClick: handleCancel, disabled: pending, "data-testid": cancelTestId, children: cancelLabel });
+  const confirmButton = /* @__PURE__ */ jsx22(
+    Button,
+    {
+      variant: variant === "destructive" ? "destructive" : "default",
+      onClick: handleConfirm,
+      disabled: pending,
+      "data-testid": confirmTestId,
+      children: pending ? `${confirmLabel}\u2026` : confirmLabel
+    }
+  );
+  return /* @__PURE__ */ jsx22(
     Modal,
     {
       open,
       onOpenChange,
       title,
       description,
-      footer: /* @__PURE__ */ jsxs7(Fragment, { children: [
-        /* @__PURE__ */ jsx21(Button, { variant: "outline", onClick: handleCancel, disabled: pending, "data-testid": cancelTestId, children: cancelLabel }),
-        /* @__PURE__ */ jsx21(
-          Button,
-          {
-            variant: variant === "destructive" ? "destructive" : "default",
-            onClick: handleConfirm,
-            disabled: pending,
-            "data-testid": confirmTestId,
-            children: pending ? `${confirmLabel}\u2026` : confirmLabel
-          }
-        )
-      ] }),
+      footer: /* @__PURE__ */ jsx22(DialogActions, { actions: [confirmButton], cancel: cancelButton }),
       children: null
     }
   );
 };
 
 // src/patterns/modal/FormModal.tsx
-import { useState as useState3 } from "react";
-import { jsx as jsx22, jsxs as jsxs8 } from "react/jsx-runtime";
+import { useState as useState4 } from "react";
+import { jsx as jsx23, jsxs as jsxs8 } from "react/jsx-runtime";
 var FormModal = ({
   open,
   onOpenChange,
@@ -873,7 +915,7 @@ var FormModal = ({
   submitTestId,
   cancelTestId
 }) => {
-  const [pending, setPending] = useState3(false);
+  const [pending, setPending] = useState4(false);
   const handleSubmit = async (event) => {
     event.preventDefault();
     setPending(true);
@@ -886,14 +928,14 @@ var FormModal = ({
   const handleCancel = () => {
     onOpenChange(false);
   };
-  return /* @__PURE__ */ jsx22(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsx22(DialogContent, { className, children: /* @__PURE__ */ jsxs8("form", { onSubmit: handleSubmit, children: [
+  return /* @__PURE__ */ jsx23(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsx23(DialogContent, { className, children: /* @__PURE__ */ jsxs8("form", { onSubmit: handleSubmit, children: [
     /* @__PURE__ */ jsxs8(DialogHeader, { children: [
-      /* @__PURE__ */ jsx22(DialogTitle, { children: title }),
-      description ? /* @__PURE__ */ jsx22(DialogDescription, { children: description }) : null
+      /* @__PURE__ */ jsx23(DialogTitle, { children: title }),
+      description ? /* @__PURE__ */ jsx23(DialogDescription, { children: description }) : null
     ] }),
     children,
     /* @__PURE__ */ jsxs8(DialogFooter, { children: [
-      /* @__PURE__ */ jsx22(
+      /* @__PURE__ */ jsx23(
         Button,
         {
           type: "button",
@@ -904,18 +946,18 @@ var FormModal = ({
           children: cancelLabel
         }
       ),
-      /* @__PURE__ */ jsx22(Button, { type: "submit", disabled: pending || submitDisabled, "data-testid": submitTestId, children: pending ? `${submitLabel}\u2026` : submitLabel })
+      /* @__PURE__ */ jsx23(Button, { type: "submit", disabled: pending || submitDisabled, "data-testid": submitTestId, children: pending ? `${submitLabel}\u2026` : submitLabel })
     ] })
   ] }) }) });
 };
 
 // src/patterns/modal/ResponsivePanel.tsx
-import { useRef as useRef2, useState as useState5 } from "react";
+import { useRef as useRef2, useState as useState6 } from "react";
 
 // src/lib/useMediaQuery.ts
-import { useEffect as useEffect2, useState as useState4 } from "react";
+import { useEffect as useEffect2, useState as useState5 } from "react";
 function useMediaQuery(query) {
-  const [matches, setMatches] = useState4(
+  const [matches, setMatches] = useState5(
     () => typeof window !== "undefined" ? window.matchMedia(query).matches : false
   );
   useEffect2(() => {
@@ -929,7 +971,7 @@ function useMediaQuery(query) {
 }
 
 // src/patterns/modal/ResponsivePanel.tsx
-import { jsx as jsx23, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs9 } from "react/jsx-runtime";
 var desktopSizeClasses = {
   sm: "max-w-md",
   md: "max-w-xl",
@@ -964,8 +1006,8 @@ var cornerGripPosition = {
   "bottom-right": "right-1 bottom-1 border-r-2 border-b-2"
 };
 function useDesktopPanelGeometry() {
-  const [style, setStyle] = useState5(void 0);
-  const [isDragging, setIsDragging] = useState5(false);
+  const [style, setStyle] = useState6(void 0);
+  const [isDragging, setIsDragging] = useState6(false);
   const drag = useRef2(null);
   const lastRect = useRef2(null);
   const beginDrag = (mode, corner) => (e) => {
@@ -1055,7 +1097,7 @@ var ResponsivePanel = ({
   const onInteractOutside = closeOnOutsideClick ? void 0 : (e) => e.preventDefault();
   if (isDesktop) {
     const corners = ["top-left", "top-right", "bottom-left", "bottom-right"];
-    return /* @__PURE__ */ jsx23(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs9(
+    return /* @__PURE__ */ jsx24(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs9(
       DialogContent,
       {
         "data-slot": "dialog-content",
@@ -1068,7 +1110,7 @@ var ResponsivePanel = ({
           className
         ),
         children: [
-          resizable && corners.map((corner) => /* @__PURE__ */ jsx23(
+          resizable && corners.map((corner) => /* @__PURE__ */ jsx24(
             "div",
             {
               "data-testid": `panel-resize-handle-${corner}`,
@@ -1081,7 +1123,7 @@ var ResponsivePanel = ({
               onPointerMove: geometry.onPointerMove,
               onPointerUp: geometry.onPointerUp,
               onPointerCancel: geometry.onPointerUp,
-              children: /* @__PURE__ */ jsx23(
+              children: /* @__PURE__ */ jsx24(
                 "div",
                 {
                   className: cn(
@@ -1102,18 +1144,18 @@ var ResponsivePanel = ({
               onPointerUp: draggable ? geometry.onPointerUp : void 0,
               onPointerCancel: draggable ? geometry.onPointerUp : void 0,
               children: [
-                /* @__PURE__ */ jsx23(DialogTitle, { children: title }),
-                description ? /* @__PURE__ */ jsx23(DialogDescription, { children: description }) : null
+                /* @__PURE__ */ jsx24(DialogTitle, { children: title }),
+                description ? /* @__PURE__ */ jsx24(DialogDescription, { children: description }) : null
               ]
             }
           ),
           children,
-          footer ? /* @__PURE__ */ jsx23(DialogFooter, { children: footer }) : null
+          footer ? /* @__PURE__ */ jsx24(DialogFooter, { children: footer }) : null
         ]
       }
     ) });
   }
-  return /* @__PURE__ */ jsx23(Sheet, { open, onOpenChange, children: /* @__PURE__ */ jsxs9(
+  return /* @__PURE__ */ jsx24(Sheet, { open, onOpenChange, children: /* @__PURE__ */ jsxs9(
     SheetContent,
     {
       side: "bottom",
@@ -1126,19 +1168,76 @@ var ResponsivePanel = ({
       ),
       children: [
         /* @__PURE__ */ jsxs9(SheetHeader, { children: [
-          /* @__PURE__ */ jsx23(SheetTitle, { children: title }),
-          description ? /* @__PURE__ */ jsx23(SheetDescription, { children: description }) : null
+          /* @__PURE__ */ jsx24(SheetTitle, { children: title }),
+          description ? /* @__PURE__ */ jsx24(SheetDescription, { children: description }) : null
         ] }),
         children,
-        footer ? /* @__PURE__ */ jsx23(SheetFooter, { children: footer }) : null
+        footer ? /* @__PURE__ */ jsx24(SheetFooter, { children: footer }) : null
       ]
     }
   ) });
 };
 
+// src/patterns/modal/QuestionDialog.tsx
+import { useState as useState7 } from "react";
+import { jsx as jsx25 } from "react/jsx-runtime";
+var QuestionDialog = ({
+  open,
+  onOpenChange,
+  title,
+  description,
+  actions,
+  cancelLabel = "Cancel",
+  cancelTestId
+}) => {
+  const [pendingIndex, setPendingIndex] = useState7(null);
+  const pending = pendingIndex !== null;
+  const handleCancel = () => {
+    onOpenChange(false);
+  };
+  const handleActionClick = async (action, index) => {
+    setPendingIndex(index);
+    try {
+      await action.onClick();
+      onOpenChange(false);
+    } catch (error) {
+      console.error(error);
+    } finally {
+      setPendingIndex(null);
+    }
+  };
+  return /* @__PURE__ */ jsx25(
+    Modal,
+    {
+      open,
+      onOpenChange,
+      title,
+      description,
+      footer: /* @__PURE__ */ jsx25(
+        DialogActions,
+        {
+          actions: actions.map((action, index) => /* @__PURE__ */ jsx25(
+            Button,
+            {
+              variant: action.variant ?? "default",
+              onClick: () => handleActionClick(action, index),
+              disabled: pending,
+              "data-testid": action.testId,
+              children: pendingIndex === index ? `${action.label}\u2026` : action.label
+            },
+            action.label
+          )),
+          cancel: /* @__PURE__ */ jsx25(Button, { variant: "outline", onClick: handleCancel, disabled: pending, "data-testid": cancelTestId, children: cancelLabel })
+        }
+      ),
+      children: null
+    }
+  );
+};
+
 // src/patterns/form-field/FormField.tsx
 import { cloneElement, isValidElement, useId } from "react";
-import { jsx as jsx24, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs10 } from "react/jsx-runtime";
 function FormField({
   label,
   htmlFor,
@@ -1172,13 +1271,13 @@ function FormField({
       ] }) : null
     ] }),
     child,
-    error ? /* @__PURE__ */ jsx24("p", { id: messageId, className: "text-sm text-destructive", children: error }) : description ? /* @__PURE__ */ jsx24("p", { id: messageId, className: "text-sm text-muted-foreground", children: description }) : null
+    error ? /* @__PURE__ */ jsx26("p", { id: messageId, className: "text-sm text-destructive", children: error }) : description ? /* @__PURE__ */ jsx26("p", { id: messageId, className: "text-sm text-muted-foreground", children: description }) : null
   ] });
 }
 
 // src/patterns/combobox/Combobox.tsx
 import { Check as Check4, ChevronsUpDown, X as X3 } from "lucide-react";
-import { useEffect as useEffect3, useMemo, useRef as useRef3, useState as useState6 } from "react";
+import { useEffect as useEffect3, useMemo, useRef as useRef3, useState as useState8 } from "react";
 
 // src/lib/optionGrouping.ts
 function groupMembers(options, group) {
@@ -1207,7 +1306,7 @@ function buildRenderChunks(visibleOptions) {
 }
 
 // src/lib/optionGrid.tsx
-import { jsx as jsx25, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs11 } from "react/jsx-runtime";
 function renderGridOptions({
   columns,
   options,
@@ -1219,9 +1318,9 @@ function renderGridOptions({
   testId
 }) {
   return /* @__PURE__ */ jsxs11(Table, { className: "text-sm", children: [
-    /* @__PURE__ */ jsx25(TableHeader, { children: /* @__PURE__ */ jsxs11(TableRow, { className: "hover:bg-transparent", children: [
-      multiple && /* @__PURE__ */ jsx25(TableHead, { className: "sticky top-0 z-10 w-6 bg-muted" }),
-      columns.map((column) => /* @__PURE__ */ jsx25(
+    /* @__PURE__ */ jsx27(TableHeader, { children: /* @__PURE__ */ jsxs11(TableRow, { className: "hover:bg-transparent", children: [
+      multiple && /* @__PURE__ */ jsx27(TableHead, { className: "sticky top-0 z-10 w-6 bg-muted" }),
+      columns.map((column) => /* @__PURE__ */ jsx27(
         TableHead,
         {
           className: cn("sticky top-0 z-10 whitespace-nowrap bg-muted text-xs", column.className),
@@ -1230,7 +1329,7 @@ function renderGridOptions({
         column.key
       ))
     ] }) }),
-    /* @__PURE__ */ jsx25(TableBody, { children: options.map((option, index) => {
+    /* @__PURE__ */ jsx27(TableBody, { children: options.map((option, index) => {
       const selected = isSelected(option);
       const active = index === activeIndex;
       return /* @__PURE__ */ jsxs11(
@@ -1257,7 +1356,7 @@ function renderGridOptions({
             option.disabled && "pointer-events-none opacity-50"
           ),
           children: [
-            multiple && /* @__PURE__ */ jsx25(TableCell, { className: "w-6", children: /* @__PURE__ */ jsx25(
+            multiple && /* @__PURE__ */ jsx27(TableCell, { className: "w-6", children: /* @__PURE__ */ jsx27(
               "input",
               {
                 type: "checkbox",
@@ -1267,7 +1366,7 @@ function renderGridOptions({
                 className: "pointer-events-none h-3.5 w-3.5 shrink-0 accent-primary"
               }
             ) }),
-            columns.map((column) => /* @__PURE__ */ jsx25(TableCell, { className: cn("truncate", column.className), children: column.key === "label" ? option.label : option.data?.[column.key] }, column.key))
+            columns.map((column) => /* @__PURE__ */ jsx27(TableCell, { className: cn("truncate", column.className), children: column.key === "label" ? option.label : option.data?.[column.key] }, column.key))
           ]
         },
         option.value
@@ -1277,7 +1376,7 @@ function renderGridOptions({
 }
 
 // src/patterns/combobox/Combobox.tsx
-import { jsx as jsx26, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx28, jsxs as jsxs12 } from "react/jsx-runtime";
 function resolveGroupTriggerLabel(options, selectedValues, groupLabel) {
   const selectedSet = new Set(selectedValues);
   const groupsPresent = Array.from(
@@ -1316,9 +1415,9 @@ function Combobox(props) {
     columns
   } = props;
   const testId = props["data-testid"];
-  const [open, setOpen] = useState6(false);
-  const [search, setSearch] = useState6("");
-  const [activeIndex, setActiveIndex] = useState6(0);
+  const [open, setOpen] = useState8(false);
+  const [search, setSearch] = useState8("");
+  const [activeIndex, setActiveIndex] = useState8(0);
   const inputRef = useRef3(null);
   const selectedValues = useMemo(
     () => props.multiple ? props.value : props.value ? [props.value] : [],
@@ -1397,7 +1496,7 @@ function Combobox(props) {
           isActive && "bg-accent text-accent-foreground"
         ),
         children: [
-          props.multiple ? /* @__PURE__ */ jsx26(
+          props.multiple ? /* @__PURE__ */ jsx28(
             "input",
             {
               type: "checkbox",
@@ -1406,15 +1505,15 @@ function Combobox(props) {
               tabIndex: -1,
               className: "pointer-events-none h-3.5 w-3.5 shrink-0 accent-primary"
             }
-          ) : /* @__PURE__ */ jsx26(Check4, { className: cn("h-4 w-4 shrink-0", isSelected ? "opacity-100" : "opacity-0") }),
-          /* @__PURE__ */ jsx26("span", { className: "truncate", children: option.label })
+          ) : /* @__PURE__ */ jsx28(Check4, { className: cn("h-4 w-4 shrink-0", isSelected ? "opacity-100" : "opacity-0") }),
+          /* @__PURE__ */ jsx28("span", { className: "truncate", children: option.label })
         ]
       },
       option.value
     );
   }
   return /* @__PURE__ */ jsxs12(Popover, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsx26(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs12(
+    /* @__PURE__ */ jsx28(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs12(
       Button,
       {
         id,
@@ -1430,9 +1529,9 @@ function Combobox(props) {
           className
         ),
         children: [
-          /* @__PURE__ */ jsx26("span", { className: "truncate", children: triggerLabel }),
+          /* @__PURE__ */ jsx28("span", { className: "truncate", children: triggerLabel }),
           /* @__PURE__ */ jsxs12("span", { className: "flex items-center gap-1", children: [
-            clearable && !loading && selectedValues.length > 0 ? /* @__PURE__ */ jsx26(
+            clearable && !loading && selectedValues.length > 0 ? /* @__PURE__ */ jsx28(
               "span",
               {
                 role: "button",
@@ -1447,15 +1546,15 @@ function Combobox(props) {
                     props.onChange(null);
                   }
                 },
-                children: /* @__PURE__ */ jsx26(X3, { className: "h-3.5 w-3.5" })
+                children: /* @__PURE__ */ jsx28(X3, { className: "h-3.5 w-3.5" })
               }
             ) : null,
-            /* @__PURE__ */ jsx26(ChevronsUpDown, { className: "h-4 w-4 shrink-0 opacity-50", "aria-hidden": "true" })
+            /* @__PURE__ */ jsx28(ChevronsUpDown, { className: "h-4 w-4 shrink-0 opacity-50", "aria-hidden": "true" })
           ] })
         ]
       }
     ) }),
-    /* @__PURE__ */ jsx26(
+    /* @__PURE__ */ jsx28(
       PopoverContent,
       {
         align: "start",
@@ -1466,7 +1565,7 @@ function Combobox(props) {
         ),
         onOpenAutoFocus: (event) => event.preventDefault(),
         children: /* @__PURE__ */ jsxs12("div", { className: "flex flex-col gap-2", children: [
-          /* @__PURE__ */ jsx26(
+          /* @__PURE__ */ jsx28(
             Input,
             {
               ref: inputRef,
@@ -1480,7 +1579,7 @@ function Combobox(props) {
               "aria-label": searchPlaceholder
             }
           ),
-          /* @__PURE__ */ jsx26("div", { role: "listbox", className: cn("max-h-60 overflow-y-auto", !columns && "flex flex-col gap-0.5"), children: visibleOptions.length === 0 ? /* @__PURE__ */ jsx26("p", { className: "py-2 text-center text-sm text-muted-foreground", children: emptyMessage }) : columns ? renderGridOptions({
+          /* @__PURE__ */ jsx28("div", { role: "listbox", className: cn("max-h-60 overflow-y-auto", !columns && "flex flex-col gap-0.5"), children: visibleOptions.length === 0 ? /* @__PURE__ */ jsx28("p", { className: "py-2 text-center text-sm text-muted-foreground", children: emptyMessage }) : columns ? renderGridOptions({
             columns,
             options: visibleOptions,
             activeIndex,
@@ -1507,7 +1606,7 @@ function Combobox(props) {
                     "data-group-header": true,
                     className: "sticky top-0 z-10 flex items-center gap-2 rounded-sm bg-muted px-2 py-1.5 text-sm font-semibold text-foreground",
                     children: [
-                      props.multiple ? /* @__PURE__ */ jsx26(
+                      props.multiple ? /* @__PURE__ */ jsx28(
                         "input",
                         {
                           type: "checkbox",
@@ -1521,7 +1620,7 @@ function Combobox(props) {
                           "aria-label": `Select all of ${groupLabel(chunk.group)}`
                         }
                       ) : null,
-                      /* @__PURE__ */ jsx26("span", { className: "truncate", children: groupLabel(chunk.group) })
+                      /* @__PURE__ */ jsx28("span", { className: "truncate", children: groupLabel(chunk.group) })
                     ]
                   }
                 ),
@@ -1537,8 +1636,8 @@ function Combobox(props) {
 
 // src/patterns/tag-combobox/TagCombobox.tsx
 import { X as X4 } from "lucide-react";
-import { useEffect as useEffect4, useMemo as useMemo2, useRef as useRef4, useState as useState7 } from "react";
-import { jsx as jsx27, jsxs as jsxs13 } from "react/jsx-runtime";
+import { useEffect as useEffect4, useMemo as useMemo2, useRef as useRef4, useState as useState9 } from "react";
+import { jsx as jsx29, jsxs as jsxs13 } from "react/jsx-runtime";
 function TagCombobox({
   options,
   value,
@@ -1557,9 +1656,9 @@ function TagCombobox({
   ...rest
 }) {
   const testId = rest["data-testid"];
-  const [open, setOpen] = useState7(false);
-  const [search, setSearch] = useState7("");
-  const [activeIndex, setActiveIndex] = useState7(0);
+  const [open, setOpen] = useState9(false);
+  const [search, setSearch] = useState9("");
+  const [activeIndex, setActiveIndex] = useState9(0);
   const inputRef = useRef4(null);
   const fieldRef = useRef4(null);
   const selectedOptions = useMemo2(
@@ -1645,7 +1744,7 @@ function TagCombobox({
           isActive && "bg-accent text-accent-foreground"
         ),
         children: [
-          /* @__PURE__ */ jsx27(
+          /* @__PURE__ */ jsx29(
             "input",
             {
               type: "checkbox",
@@ -1655,14 +1754,14 @@ function TagCombobox({
               className: "pointer-events-none h-3.5 w-3.5 shrink-0 accent-primary"
             }
           ),
-          /* @__PURE__ */ jsx27("span", { className: "truncate", children: option.label })
+          /* @__PURE__ */ jsx29("span", { className: "truncate", children: option.label })
         ]
       },
       option.value
     );
   }
   return /* @__PURE__ */ jsxs13(Popover, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsx27(PopoverAnchor, { asChild: true, children: /* @__PURE__ */ jsxs13(
+    /* @__PURE__ */ jsx29(PopoverAnchor, { asChild: true, children: /* @__PURE__ */ jsxs13(
       "div",
       {
         ref: fieldRef,
@@ -1685,8 +1784,8 @@ function TagCombobox({
             {
               className: "inline-flex items-center gap-1 rounded-full bg-muted py-0.5 pr-1 pl-2.5 text-xs font-medium text-muted-foreground",
               children: [
-                /* @__PURE__ */ jsx27("span", { className: "max-w-48 truncate", children: option.label }),
-                !disabled && /* @__PURE__ */ jsx27(
+                /* @__PURE__ */ jsx29("span", { className: "max-w-48 truncate", children: option.label }),
+                !disabled && /* @__PURE__ */ jsx29(
                   "button",
                   {
                     type: "button",
@@ -1696,14 +1795,14 @@ function TagCombobox({
                       event.stopPropagation();
                       removeValue(option.value);
                     },
-                    children: /* @__PURE__ */ jsx27(X4, { className: "h-3 w-3" })
+                    children: /* @__PURE__ */ jsx29(X4, { className: "h-3 w-3" })
                   }
                 )
               ]
             },
             option.value
           )),
-          /* @__PURE__ */ jsx27(
+          /* @__PURE__ */ jsx29(
             "input",
             {
               ref: inputRef,
@@ -1721,7 +1820,7 @@ function TagCombobox({
         ]
       }
     ) }),
-    /* @__PURE__ */ jsx27(
+    /* @__PURE__ */ jsx29(
       PopoverContent,
       {
         align: "start",
@@ -1735,7 +1834,7 @@ function TagCombobox({
         onInteractOutside: (event) => {
           if (fieldRef.current?.contains(event.target)) event.preventDefault();
         },
-        children: /* @__PURE__ */ jsx27("div", { role: "listbox", className: cn("max-h-60 overflow-y-auto", !columns && "flex flex-col gap-0.5"), children: loading ? /* @__PURE__ */ jsx27("p", { className: "py-2 text-center text-sm text-muted-foreground", children: loadingMessage }) : visibleOptions.length === 0 ? /* @__PURE__ */ jsx27("p", { className: "py-2 text-center text-sm text-muted-foreground", children: emptyMessage }) : columns ? renderGridOptions({
+        children: /* @__PURE__ */ jsx29("div", { role: "listbox", className: cn("max-h-60 overflow-y-auto", !columns && "flex flex-col gap-0.5"), children: loading ? /* @__PURE__ */ jsx29("p", { className: "py-2 text-center text-sm text-muted-foreground", children: loadingMessage }) : visibleOptions.length === 0 ? /* @__PURE__ */ jsx29("p", { className: "py-2 text-center text-sm text-muted-foreground", children: emptyMessage }) : columns ? renderGridOptions({
           columns,
           options: visibleOptions,
           activeIndex,
@@ -1761,7 +1860,7 @@ function TagCombobox({
                   "data-group-header": true,
                   className: "sticky top-0 z-10 flex items-center gap-2 rounded-sm bg-muted px-2 py-1.5 text-sm font-semibold text-foreground",
                   children: [
-                    /* @__PURE__ */ jsx27(
+                    /* @__PURE__ */ jsx29(
                       "input",
                       {
                         type: "checkbox",
@@ -1775,7 +1874,7 @@ function TagCombobox({
                         "aria-label": `Select all of ${groupLabel(chunk.group)}`
                       }
                     ),
-                    /* @__PURE__ */ jsx27("span", { className: "truncate", children: groupLabel(chunk.group) })
+                    /* @__PURE__ */ jsx29("span", { className: "truncate", children: groupLabel(chunk.group) })
                   ]
                 }
               ),
@@ -1790,7 +1889,7 @@ function TagCombobox({
 
 // src/patterns/alert-box/AlertBox.tsx
 import { AlertCircle, AlertTriangle, CheckCircle2, Info } from "lucide-react";
-import { jsx as jsx28, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx30, jsxs as jsxs14 } from "react/jsx-runtime";
 var variantStyles = {
   error: "border-destructive bg-destructive/10 text-red-800 dark:text-red-300",
   warning: "border-amber-500 bg-amber-500/10 text-amber-900 dark:text-amber-200",
@@ -1798,24 +1897,24 @@ var variantStyles = {
   success: "border-emerald-500 bg-emerald-500/10 text-emerald-700 dark:text-emerald-300"
 };
 var defaultIcons = {
-  error: /* @__PURE__ */ jsx28(AlertCircle, { className: "h-4 w-4 shrink-0", "aria-hidden": "true" }),
-  warning: /* @__PURE__ */ jsx28(AlertTriangle, { className: "h-4 w-4 shrink-0", "aria-hidden": "true" }),
-  info: /* @__PURE__ */ jsx28(Info, { className: "h-4 w-4 shrink-0", "aria-hidden": "true" }),
-  success: /* @__PURE__ */ jsx28(CheckCircle2, { className: "h-4 w-4 shrink-0", "aria-hidden": "true" })
+  error: /* @__PURE__ */ jsx30(AlertCircle, { className: "h-4 w-4 shrink-0", "aria-hidden": "true" }),
+  warning: /* @__PURE__ */ jsx30(AlertTriangle, { className: "h-4 w-4 shrink-0", "aria-hidden": "true" }),
+  info: /* @__PURE__ */ jsx30(Info, { className: "h-4 w-4 shrink-0", "aria-hidden": "true" }),
+  success: /* @__PURE__ */ jsx30(CheckCircle2, { className: "h-4 w-4 shrink-0", "aria-hidden": "true" })
 };
 var AlertBox = ({ variant, title, children, className, icon }) => {
   const resolvedIcon = icon === void 0 ? defaultIcons[variant] : icon;
-  return /* @__PURE__ */ jsx28("div", { className: cn("rounded-md border p-3 text-sm", variantStyles[variant], className), children: /* @__PURE__ */ jsxs14("div", { className: "flex flex-row items-start gap-2", children: [
-    resolvedIcon != null && /* @__PURE__ */ jsx28("span", { className: "mt-0.5 shrink-0", children: resolvedIcon }),
+  return /* @__PURE__ */ jsx30("div", { className: cn("rounded-md border p-3 text-sm", variantStyles[variant], className), children: /* @__PURE__ */ jsxs14("div", { className: "flex flex-row items-start gap-2", children: [
+    resolvedIcon != null && /* @__PURE__ */ jsx30("span", { className: "mt-0.5 shrink-0", children: resolvedIcon }),
     /* @__PURE__ */ jsxs14("div", { className: "flex flex-col gap-1", children: [
-      title && /* @__PURE__ */ jsx28("p", { className: "font-bold", children: title }),
-      /* @__PURE__ */ jsx28("div", { children })
+      title && /* @__PURE__ */ jsx30("p", { className: "font-bold", children: title }),
+      /* @__PURE__ */ jsx30("div", { children })
     ] })
   ] }) });
 };
 
 // src/patterns/status-badge/StatusBadge.tsx
-import { jsx as jsx29 } from "react/jsx-runtime";
+import { jsx as jsx31 } from "react/jsx-runtime";
 var TONE_CLASSES = {
   success: "border-transparent bg-emerald-500/15 text-emerald-700 dark:bg-emerald-500/20 dark:text-emerald-300",
   warning: "border-transparent bg-amber-500/15 text-amber-800 dark:bg-amber-500/20 dark:text-amber-300",
@@ -1862,11 +1961,11 @@ function resolveTone(status, tone, toneMap) {
 var StatusBadge = ({ status, label, tone, toneMap, className, ...props }) => {
   const resolvedTone = resolveTone(status, tone, toneMap);
   const displayLabel = label ?? deriveLabel(status);
-  return /* @__PURE__ */ jsx29(Badge, { variant: "outline", className: cn(TONE_CLASSES[resolvedTone], className), ...props, children: displayLabel });
+  return /* @__PURE__ */ jsx31(Badge, { variant: "outline", className: cn(TONE_CLASSES[resolvedTone], className), ...props, children: displayLabel });
 };
 
 // src/patterns/button-group/ButtonGroup.tsx
-import { jsx as jsx30, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs15 } from "react/jsx-runtime";
 function ButtonGroup({
   options,
   value,
@@ -1876,7 +1975,7 @@ function ButtonGroup({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx30("div", { role: "group", "aria-label": props["aria-label"], className: cn("inline-flex", className), "data-testid": props["data-testid"], children: options.map((option, index) => {
+  return /* @__PURE__ */ jsx32("div", { role: "group", "aria-label": props["aria-label"], className: cn("inline-flex", className), "data-testid": props["data-testid"], children: options.map((option, index) => {
     const selected = option.value === value;
     const Icon2 = option.icon;
     return /* @__PURE__ */ jsxs15(
@@ -1897,7 +1996,7 @@ function ButtonGroup({
           index > 0 && "-ml-px"
         ),
         children: [
-          Icon2 && /* @__PURE__ */ jsx30(Icon2, { className: "h-4 w-4" }),
+          Icon2 && /* @__PURE__ */ jsx32(Icon2, { className: "h-4 w-4" }),
           option.label
         ]
       },
@@ -1909,7 +2008,7 @@ function ButtonGroup({
 // src/patterns/loading-spinner/LoadingSpinner.tsx
 import { cva as cva4 } from "class-variance-authority";
 import { Loader2 } from "lucide-react";
-import { jsx as jsx31, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs16 } from "react/jsx-runtime";
 var loadingSpinnerIconVariants = cva4("animate-spin text-muted-foreground", {
   variants: {
     size: {
@@ -1928,26 +2027,26 @@ var LoadingSpinner = ({
   className,
   ...props
 }) => /* @__PURE__ */ jsxs16("span", { role: "status", className: cn("inline-flex items-center gap-2", className), ...props, children: [
-  /* @__PURE__ */ jsx31(Loader2, { className: cn(loadingSpinnerIconVariants({ size })), "aria-hidden": "true" }),
-  label ? /* @__PURE__ */ jsx31("span", { children: label }) : null
+  /* @__PURE__ */ jsx33(Loader2, { className: cn(loadingSpinnerIconVariants({ size })), "aria-hidden": "true" }),
+  label ? /* @__PURE__ */ jsx33("span", { children: label }) : null
 ] });
 var LoadingOverlay = ({
   size = "lg",
   label,
   className,
   ...props
-}) => /* @__PURE__ */ jsx31(
+}) => /* @__PURE__ */ jsx33(
   "div",
   {
     className: cn("flex h-full min-h-32 w-full items-center justify-center", className),
     ...props,
-    children: /* @__PURE__ */ jsx31(LoadingSpinner, { size, label })
+    children: /* @__PURE__ */ jsx33(LoadingSpinner, { size, label })
   }
 );
 
 // src/patterns/search-bar/SearchBar.tsx
 import { Search, X as X5 } from "lucide-react";
-import { jsx as jsx32, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx34, jsxs as jsxs17 } from "react/jsx-runtime";
 function SearchBar({
   value,
   onChange,
@@ -1960,8 +2059,8 @@ function SearchBar({
 }) {
   const showClear = onClear !== false && value.length > 0;
   return /* @__PURE__ */ jsxs17("div", { className: cn("relative", className), children: [
-    /* @__PURE__ */ jsx32("span", { className: "pointer-events-none absolute top-1/2 left-4 -translate-y-1/2 text-muted-foreground", children: isLoading ? /* @__PURE__ */ jsx32(LoadingSpinner, { size: "sm" }) : /* @__PURE__ */ jsx32(Search, { className: "h-4 w-4", "aria-hidden": "true" }) }),
-    /* @__PURE__ */ jsx32(
+    /* @__PURE__ */ jsx34("span", { className: "pointer-events-none absolute top-1/2 left-4 -translate-y-1/2 text-muted-foreground", children: isLoading ? /* @__PURE__ */ jsx34(LoadingSpinner, { size: "sm" }) : /* @__PURE__ */ jsx34(Search, { className: "h-4 w-4", "aria-hidden": "true" }) }),
+    /* @__PURE__ */ jsx34(
       "input",
       {
         ref: inputRef,
@@ -1980,14 +2079,14 @@ function SearchBar({
         ...props
       }
     ),
-    showClear && /* @__PURE__ */ jsx32(
+    showClear && /* @__PURE__ */ jsx34(
       "button",
       {
         type: "button",
         onClick: () => onClear ? onClear() : onChange(""),
         "aria-label": clearLabel,
         className: "absolute top-1/2 right-2 flex h-7 w-7 -translate-y-1/2 items-center justify-center rounded-full text-muted-foreground hover:bg-accent hover:text-foreground",
-        children: /* @__PURE__ */ jsx32(X5, { className: "h-4 w-4", "aria-hidden": "true" })
+        children: /* @__PURE__ */ jsx34(X5, { className: "h-4 w-4", "aria-hidden": "true" })
       }
     )
   ] });
@@ -1995,7 +2094,7 @@ function SearchBar({
 
 // src/patterns/kpi-card/KpiCard.tsx
 import { memo } from "react";
-import { Fragment as Fragment2, jsx as jsx33, jsxs as jsxs18 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx35, jsxs as jsxs18 } from "react/jsx-runtime";
 var DONUT_COLORS = [
   "var(--chart-1, #3b82f6)",
   "var(--chart-2, #22c55e)",
@@ -2018,11 +2117,11 @@ function DonutChart({
   let offset = 0;
   return /* @__PURE__ */ jsxs18("div", { className: "relative inline-flex shrink-0 items-center justify-center", style: { width: size, height: size }, children: [
     /* @__PURE__ */ jsxs18("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, className: "-rotate-90", children: [
-      /* @__PURE__ */ jsx33("circle", { cx: size / 2, cy: size / 2, r: radius, fill: "none", stroke: "currentColor", className: "text-muted/40", strokeWidth: thickness }),
+      /* @__PURE__ */ jsx35("circle", { cx: size / 2, cy: size / 2, r: radius, fill: "none", stroke: "currentColor", className: "text-muted/40", strokeWidth: thickness }),
       data.map((segment, i) => {
         const fraction = segment.value / total;
         const dash = fraction * circumference;
-        const el = /* @__PURE__ */ jsx33(
+        const el = /* @__PURE__ */ jsx35(
           "circle",
           {
             cx: size / 2,
@@ -2042,8 +2141,8 @@ function DonutChart({
       })
     ] }),
     (centerValue || centerLabel) && /* @__PURE__ */ jsxs18("div", { className: "absolute inset-0 flex flex-col items-center justify-center", children: [
-      centerValue && /* @__PURE__ */ jsx33("span", { className: "text-base font-black tracking-tight text-foreground tabular-nums", children: centerValue }),
-      centerLabel && /* @__PURE__ */ jsx33("span", { className: "text-[9px] font-medium text-muted-foreground uppercase", children: centerLabel })
+      centerValue && /* @__PURE__ */ jsx35("span", { className: "text-base font-black tracking-tight text-foreground tabular-nums", children: centerValue }),
+      centerLabel && /* @__PURE__ */ jsx35("span", { className: "text-[9px] font-medium text-muted-foreground uppercase", children: centerLabel })
     ] })
   ] });
 }
@@ -2055,7 +2154,7 @@ function Sparkline({ data, color }) {
   const W = 72;
   const H = 28;
   const pts = data.map((v, i) => `${i / (data.length - 1) * W},${H - (v - min) / range * (H - 2) - 1}`).join(" ");
-  return /* @__PURE__ */ jsx33("svg", { width: W, height: H, viewBox: `0 0 ${W} ${H}`, className: "overflow-visible opacity-70", children: /* @__PURE__ */ jsx33("polyline", { points: pts, fill: "none", stroke: color, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
+  return /* @__PURE__ */ jsx35("svg", { width: W, height: H, viewBox: `0 0 ${W} ${H}`, className: "overflow-visible opacity-70", children: /* @__PURE__ */ jsx35("polyline", { points: pts, fill: "none", stroke: color, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
 }
 function AreaSparkline({ data, color }) {
   if (data.length < 2) return null;
@@ -2070,13 +2169,13 @@ function AreaSparkline({ data, color }) {
   const linePts = xs.map((x, i) => `${x},${ys[i]}`).join(" ");
   const areaPath = `M${xs[0]},${H} ` + xs.map((x, i) => `L${x},${ys[i]}`).join(" ") + ` L${xs[xs.length - 1]},${H} Z`;
   return /* @__PURE__ */ jsxs18("svg", { width: W, height: H, viewBox: `0 0 ${W} ${H}`, className: "overflow-visible", preserveAspectRatio: "none", children: [
-    /* @__PURE__ */ jsx33("defs", { children: /* @__PURE__ */ jsxs18("linearGradient", { id: "kpi-card-spark-fill", x1: "0", y1: "0", x2: "0", y2: "1", children: [
-      /* @__PURE__ */ jsx33("stop", { offset: "0%", stopColor: color, stopOpacity: "0.22" }),
-      /* @__PURE__ */ jsx33("stop", { offset: "100%", stopColor: color, stopOpacity: "0" })
+    /* @__PURE__ */ jsx35("defs", { children: /* @__PURE__ */ jsxs18("linearGradient", { id: "kpi-card-spark-fill", x1: "0", y1: "0", x2: "0", y2: "1", children: [
+      /* @__PURE__ */ jsx35("stop", { offset: "0%", stopColor: color, stopOpacity: "0.22" }),
+      /* @__PURE__ */ jsx35("stop", { offset: "100%", stopColor: color, stopOpacity: "0" })
     ] }) }),
-    /* @__PURE__ */ jsx33("path", { d: areaPath, fill: "url(#kpi-card-spark-fill)" }),
-    /* @__PURE__ */ jsx33("polyline", { points: linePts, fill: "none", stroke: color, strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round" }),
-    /* @__PURE__ */ jsx33("circle", { cx: xs[xs.length - 1], cy: ys[ys.length - 1], r: "2.5", fill: color })
+    /* @__PURE__ */ jsx35("path", { d: areaPath, fill: "url(#kpi-card-spark-fill)" }),
+    /* @__PURE__ */ jsx35("polyline", { points: linePts, fill: "none", stroke: color, strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round" }),
+    /* @__PURE__ */ jsx35("circle", { cx: xs[xs.length - 1], cy: ys[ys.length - 1], r: "2.5", fill: color })
   ] });
 }
 var rowBetween = "flex items-center justify-between";
@@ -2097,8 +2196,10 @@ var KpiCard = memo(function KpiCard2({
   progressLabel,
   segments,
   centerValue,
+  background,
   testId
 }) {
+  const bgStyle = background ? { background } : void 0;
   if (variant === "hero") {
     return /* @__PURE__ */ jsxs18(
       "div",
@@ -2106,17 +2207,17 @@ var KpiCard = memo(function KpiCard2({
         "data-testid": testId,
         className: "relative col-span-2 flex min-w-0 flex-1 flex-col gap-1.5 overflow-hidden rounded-2xl p-4 md:p-3 lg:col-span-1 lg:max-w-[340px] lg:min-w-[260px]",
         style: {
-          background: "var(--color-primary)",
-          boxShadow: "0 2px 10px color-mix(in oklch, var(--color-primary) 18%, transparent)"
+          background: background ?? "var(--color-primary)",
+          boxShadow: `0 2px 10px color-mix(in oklch, ${background ?? "var(--color-primary)"} 18%, transparent)`
         },
         children: [
           /* @__PURE__ */ jsxs18("div", { className: "relative flex items-start justify-between", children: [
-            /* @__PURE__ */ jsx33("p", { className: "text-[11px] font-bold tracking-[0.14em] text-white/70 uppercase", children: label }),
-            Icon2 && /* @__PURE__ */ jsx33("div", { className: "flex h-6 w-6 items-center justify-center rounded-lg bg-white/15 ring-1 ring-white/20", children: /* @__PURE__ */ jsx33(Icon2, { className: "h-3 w-3 text-white/90", "aria-hidden": "true" }) })
+            /* @__PURE__ */ jsx35("p", { className: "text-[11px] font-bold tracking-[0.14em] text-white/70 uppercase", children: label }),
+            Icon2 && /* @__PURE__ */ jsx35("div", { className: "flex h-6 w-6 items-center justify-center rounded-lg bg-white/15 ring-1 ring-white/20", children: /* @__PURE__ */ jsx35(Icon2, { className: "h-3 w-3 text-white/90", "aria-hidden": "true" }) })
           ] }),
-          /* @__PURE__ */ jsx33("div", { className: "relative", children: loading ? /* @__PURE__ */ jsx33("div", { className: "h-6 w-28 animate-pulse rounded-lg bg-white/15" }) : /* @__PURE__ */ jsx33("p", { className: "text-2xl leading-none font-black tracking-tight text-white tabular-nums md:text-[22px]", children: value ?? "\u2014" }) }),
+          /* @__PURE__ */ jsx35("div", { className: "relative", children: loading ? /* @__PURE__ */ jsx35("div", { className: "h-6 w-28 animate-pulse rounded-lg bg-white/15" }) : /* @__PURE__ */ jsx35("p", { className: "text-2xl leading-none font-black tracking-tight text-white tabular-nums md:text-[22px]", children: value ?? "\u2014" }) }),
           (badge || badgeLabel) && !loading && /* @__PURE__ */ jsxs18("div", { className: "relative flex items-center gap-2", children: [
-            badge && /* @__PURE__ */ jsx33(
+            badge && /* @__PURE__ */ jsx35(
               "span",
               {
                 className: cn(
@@ -2126,43 +2227,44 @@ var KpiCard = memo(function KpiCard2({
                 children: badge.text
               }
             ),
-            badgeLabel && /* @__PURE__ */ jsx33("span", { className: "text-[11px] text-white/70", children: badgeLabel })
+            badgeLabel && /* @__PURE__ */ jsx35("span", { className: "text-[11px] text-white/70", children: badgeLabel })
           ] }),
-          sub && !loading && /* @__PURE__ */ jsx33("p", { className: "relative -mt-1 text-[11px] font-medium text-white/75 tabular-nums", children: sub }),
+          sub && !loading && /* @__PURE__ */ jsx35("p", { className: "relative -mt-1 text-[11px] font-medium text-white/75 tabular-nums", children: sub }),
           progress != null && !loading && /* @__PURE__ */ jsxs18("div", { className: "relative flex items-center gap-1.5", children: [
-            /* @__PURE__ */ jsx33("div", { className: "h-1 flex-1 overflow-hidden rounded-full bg-white/20", children: /* @__PURE__ */ jsx33("div", { className: "h-1 rounded-full bg-white/85", style: { width: `${Math.min(100, Math.max(0, progress))}%` } }) }),
-            progressLabel && /* @__PURE__ */ jsx33("span", { className: "shrink-0 text-[11px] font-semibold text-white/80 tabular-nums", children: progressLabel })
+            /* @__PURE__ */ jsx35("div", { className: "h-1 flex-1 overflow-hidden rounded-full bg-white/20", children: /* @__PURE__ */ jsx35("div", { className: "h-1 rounded-full bg-white/85", style: { width: `${Math.min(100, Math.max(0, progress))}%` } }) }),
+            progressLabel && /* @__PURE__ */ jsx35("span", { className: "shrink-0 text-[11px] font-semibold text-white/80 tabular-nums", children: progressLabel })
           ] }),
-          sparkline && sparkline.length > 1 && !loading && /* @__PURE__ */ jsx33("div", { className: "relative -mx-4 mt-auto -mb-4 md:-mx-3 md:-mb-3", children: /* @__PURE__ */ jsx33(AreaSparkline, { data: sparkline, color: "#ffffff" }) })
+          sparkline && sparkline.length > 1 && !loading && /* @__PURE__ */ jsx35("div", { className: "relative -mx-4 mt-auto -mb-4 md:-mx-3 md:-mb-3", children: /* @__PURE__ */ jsx35(AreaSparkline, { data: sparkline, color: "#ffffff" }) })
         ]
       }
     );
   }
   if (variant === "mini") {
-    const iconSlot = Icon2 ? href ? /* @__PURE__ */ jsx33(
+    const iconSlot = Icon2 ? href ? /* @__PURE__ */ jsx35(
       "a",
       {
         href,
         className: "tap-target flex h-7 w-7 shrink-0 items-center justify-center rounded-xl bg-primary/10 text-primary transition-[background-color,scale] hover:bg-primary/20 active:scale-90 motion-reduce:transition-none md:h-6 md:w-6",
-        children: /* @__PURE__ */ jsx33(Icon2, { className: "h-4 w-4 md:h-3.5 md:w-3.5", "aria-hidden": "true" })
+        children: /* @__PURE__ */ jsx35(Icon2, { className: "h-4 w-4 md:h-3.5 md:w-3.5", "aria-hidden": "true" })
       }
-    ) : /* @__PURE__ */ jsx33("div", { className: "flex h-7 w-7 shrink-0 items-center justify-center rounded-xl bg-primary/10 text-primary md:h-6 md:w-6", children: /* @__PURE__ */ jsx33(Icon2, { className: "h-4 w-4 md:h-3.5 md:w-3.5", "aria-hidden": "true" }) }) : null;
+    ) : /* @__PURE__ */ jsx35("div", { className: "flex h-7 w-7 shrink-0 items-center justify-center rounded-xl bg-primary/10 text-primary md:h-6 md:w-6", children: /* @__PURE__ */ jsx35(Icon2, { className: "h-4 w-4 md:h-3.5 md:w-3.5", "aria-hidden": "true" }) }) : null;
     return /* @__PURE__ */ jsxs18(
       "div",
       {
         "data-testid": testId,
+        style: bgStyle,
         className: cn(
           "flex h-full min-w-0 flex-1 flex-col gap-1.5 overflow-hidden rounded-2xl border border-border bg-card p-3 transition-shadow md:p-2.5",
           href && "hover:border-primary/20 hover:shadow-md"
         ),
         children: [
           /* @__PURE__ */ jsxs18("div", { className: rowBetween, children: [
-            /* @__PURE__ */ jsx33("p", { className: "text-[11px] font-bold tracking-[0.12em] text-muted-foreground uppercase", children: label }),
+            /* @__PURE__ */ jsx35("p", { className: "text-[11px] font-bold tracking-[0.12em] text-muted-foreground uppercase", children: label }),
             iconSlot
           ] }),
-          /* @__PURE__ */ jsx33("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: loading ? /* @__PURE__ */ jsx33(Skeleton, { className: "h-6 w-16" }) : /* @__PURE__ */ jsxs18(Fragment2, { children: [
-            /* @__PURE__ */ jsx33("p", { className: "min-w-0 animate-in truncate text-[20px] leading-none font-black tracking-tight text-foreground duration-200 fade-in-0 tabular-nums motion-reduce:animate-none md:text-[16px]", children: value ?? "\u2014" }),
-            badge && /* @__PURE__ */ jsx33(
+          /* @__PURE__ */ jsx35("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: loading ? /* @__PURE__ */ jsx35(Skeleton, { className: "h-6 w-16" }) : /* @__PURE__ */ jsxs18(Fragment3, { children: [
+            /* @__PURE__ */ jsx35("p", { className: "min-w-0 animate-in truncate text-[20px] leading-none font-black tracking-tight text-foreground duration-200 fade-in-0 tabular-nums motion-reduce:animate-none md:text-[16px]", children: value ?? "\u2014" }),
+            badge && /* @__PURE__ */ jsx35(
               "span",
               {
                 className: cn(
@@ -2174,7 +2276,7 @@ var KpiCard = memo(function KpiCard2({
             )
           ] }) }),
           (sub || sparkline) && !loading && /* @__PURE__ */ jsxs18("div", { className: "flex items-end justify-between gap-2", children: [
-            sub && /* @__PURE__ */ jsx33(
+            sub && /* @__PURE__ */ jsx35(
               "p",
               {
                 className: cn(
@@ -2184,7 +2286,7 @@ var KpiCard = memo(function KpiCard2({
                 children: sub
               }
             ),
-            sparkline && /* @__PURE__ */ jsx33(Sparkline, { data: sparkline, color: sparklineColor })
+            sparkline && /* @__PURE__ */ jsx35(Sparkline, { data: sparkline, color: sparklineColor })
           ] })
         ]
       }
@@ -2192,22 +2294,22 @@ var KpiCard = memo(function KpiCard2({
   }
   if (variant === "donut") {
     const total = segments?.reduce((sum, s) => sum + s.value, 0) ?? 0;
-    return /* @__PURE__ */ jsxs18("div", { "data-testid": testId, className: "rounded-xl border border-border bg-card p-5", children: [
+    return /* @__PURE__ */ jsxs18("div", { "data-testid": testId, style: bgStyle, className: "rounded-xl border border-border bg-card p-5", children: [
       /* @__PURE__ */ jsxs18("div", { className: rowBetween, children: [
-        /* @__PURE__ */ jsx33("p", { className: "text-[11px] font-bold tracking-[0.12em] text-muted-foreground uppercase", children: label }),
-        Icon2 && /* @__PURE__ */ jsx33("div", { className: "flex h-7 w-7 shrink-0 items-center justify-center rounded-xl bg-primary/8 text-primary", children: /* @__PURE__ */ jsx33(Icon2, { className: "h-3.5 w-3.5", "aria-hidden": "true" }) })
+        /* @__PURE__ */ jsx35("p", { className: "text-[11px] font-bold tracking-[0.12em] text-muted-foreground uppercase", children: label }),
+        Icon2 && /* @__PURE__ */ jsx35("div", { className: "flex h-7 w-7 shrink-0 items-center justify-center rounded-xl bg-primary/8 text-primary", children: /* @__PURE__ */ jsx35(Icon2, { className: "h-3.5 w-3.5", "aria-hidden": "true" }) })
       ] }),
       loading ? /* @__PURE__ */ jsxs18("div", { className: "mt-3 flex items-center gap-4", children: [
-        /* @__PURE__ */ jsx33(Skeleton, { className: "h-24 w-24 shrink-0 rounded-full" }),
+        /* @__PURE__ */ jsx35(Skeleton, { className: "h-24 w-24 shrink-0 rounded-full" }),
         /* @__PURE__ */ jsxs18("div", { className: "flex flex-1 flex-col gap-2", children: [
-          /* @__PURE__ */ jsx33(Skeleton, { className: "h-3 w-full" }),
-          /* @__PURE__ */ jsx33(Skeleton, { className: "h-3 w-3/4" }),
-          /* @__PURE__ */ jsx33(Skeleton, { className: "h-3 w-1/2" })
+          /* @__PURE__ */ jsx35(Skeleton, { className: "h-3 w-full" }),
+          /* @__PURE__ */ jsx35(Skeleton, { className: "h-3 w-3/4" }),
+          /* @__PURE__ */ jsx35(Skeleton, { className: "h-3 w-1/2" })
         ] })
       ] }) : segments && segments.length > 0 ? /* @__PURE__ */ jsxs18("div", { className: "mt-3 flex items-center gap-4", children: [
-        /* @__PURE__ */ jsx33(DonutChart, { data: segments, centerValue: centerValue ?? String(total) }),
-        /* @__PURE__ */ jsx33("ul", { className: "flex min-w-0 flex-1 flex-col gap-1.5", children: segments.map((segment, i) => /* @__PURE__ */ jsxs18("li", { className: "flex items-center gap-2 text-[12px]", children: [
-          /* @__PURE__ */ jsx33(
+        /* @__PURE__ */ jsx35(DonutChart, { data: segments, centerValue: centerValue ?? String(total) }),
+        /* @__PURE__ */ jsx35("ul", { className: "flex min-w-0 flex-1 flex-col gap-1.5", children: segments.map((segment, i) => /* @__PURE__ */ jsxs18("li", { className: "flex items-center gap-2 text-[12px]", children: [
+          /* @__PURE__ */ jsx35(
             "span",
             {
               className: "h-2 w-2 shrink-0 rounded-full",
@@ -2215,11 +2317,11 @@ var KpiCard = memo(function KpiCard2({
               "aria-hidden": "true"
             }
           ),
-          /* @__PURE__ */ jsx33("span", { className: "min-w-0 flex-1 truncate text-muted-foreground", children: segment.label }),
-          /* @__PURE__ */ jsx33("span", { className: "shrink-0 font-semibold text-foreground tabular-nums", children: total > 0 ? `${Math.round(segment.value / total * 100)}%` : segment.value })
+          /* @__PURE__ */ jsx35("span", { className: "min-w-0 flex-1 truncate text-muted-foreground", children: segment.label }),
+          /* @__PURE__ */ jsx35("span", { className: "shrink-0 font-semibold text-foreground tabular-nums", children: total > 0 ? `${Math.round(segment.value / total * 100)}%` : segment.value })
         ] }, segment.label)) })
-      ] }) : /* @__PURE__ */ jsx33("span", { className: "mt-3 block text-2xl font-black text-muted-foreground/40", children: "\u2014" }),
-      sub && !loading && /* @__PURE__ */ jsx33("p", { className: "mt-2.5 text-[11px] text-muted-foreground tabular-nums", children: sub })
+      ] }) : /* @__PURE__ */ jsx35("span", { className: "mt-3 block text-2xl font-black text-muted-foreground/40", children: "\u2014" }),
+      sub && !loading && /* @__PURE__ */ jsx35("p", { className: "mt-2.5 text-[11px] text-muted-foreground tabular-nums", children: sub })
     ] });
   }
   const strValue = value != null ? String(value) : null;
@@ -2229,28 +2331,28 @@ var KpiCard = memo(function KpiCard2({
   const prefix = isSuffix ? null : parts?.[0];
   const number = isSuffix ? parts[0] : parts?.[1] ?? parts?.[0];
   const suffix = isSuffix ? parts[1] : null;
-  return /* @__PURE__ */ jsxs18("div", { "data-testid": testId, className: "rounded-xl border border-border bg-card p-5", children: [
+  return /* @__PURE__ */ jsxs18("div", { "data-testid": testId, style: bgStyle, className: "rounded-xl border border-border bg-card p-5", children: [
     /* @__PURE__ */ jsxs18("div", { className: rowBetween, children: [
-      /* @__PURE__ */ jsx33("p", { className: "text-[11px] font-bold tracking-[0.12em] text-muted-foreground uppercase", children: label }),
-      Icon2 && /* @__PURE__ */ jsx33("div", { className: "flex h-7 w-7 shrink-0 items-center justify-center rounded-xl bg-primary/8 text-primary", children: /* @__PURE__ */ jsx33(Icon2, { className: "h-3.5 w-3.5", "aria-hidden": "true" }) })
+      /* @__PURE__ */ jsx35("p", { className: "text-[11px] font-bold tracking-[0.12em] text-muted-foreground uppercase", children: label }),
+      Icon2 && /* @__PURE__ */ jsx35("div", { className: "flex h-7 w-7 shrink-0 items-center justify-center rounded-xl bg-primary/8 text-primary", children: /* @__PURE__ */ jsx35(Icon2, { className: "h-3.5 w-3.5", "aria-hidden": "true" }) })
     ] }),
     /* @__PURE__ */ jsxs18("div", { className: "mt-3", children: [
-      loading ? /* @__PURE__ */ jsx33(Skeleton, { className: "h-7 w-20" }) : value == null ? /* @__PURE__ */ jsx33("span", { className: "text-2xl font-black text-muted-foreground/40", children: "\u2014" }) : plain ? /* @__PURE__ */ jsx33("span", { className: "animate-in text-2xl font-black tracking-tight text-foreground duration-200 fade-in-0 tabular-nums motion-reduce:animate-none", children: strValue }) : /* @__PURE__ */ jsxs18("span", { className: "animate-in font-black tracking-tight text-foreground duration-200 fade-in-0 tabular-nums motion-reduce:animate-none", children: [
+      loading ? /* @__PURE__ */ jsx35(Skeleton, { className: "h-7 w-20" }) : value == null ? /* @__PURE__ */ jsx35("span", { className: "text-2xl font-black text-muted-foreground/40", children: "\u2014" }) : plain ? /* @__PURE__ */ jsx35("span", { className: "animate-in text-2xl font-black tracking-tight text-foreground duration-200 fade-in-0 tabular-nums motion-reduce:animate-none", children: strValue }) : /* @__PURE__ */ jsxs18("span", { className: "animate-in font-black tracking-tight text-foreground duration-200 fade-in-0 tabular-nums motion-reduce:animate-none", children: [
         prefix && /* @__PURE__ */ jsxs18("span", { className: "text-sm text-muted-foreground", children: [
           prefix,
           " "
         ] }),
-        /* @__PURE__ */ jsx33("span", { className: "text-2xl", children: number }),
+        /* @__PURE__ */ jsx35("span", { className: "text-2xl", children: number }),
         suffix && /* @__PURE__ */ jsxs18("span", { className: "text-sm text-muted-foreground", children: [
           " ",
           suffix
         ] })
       ] }),
-      sub && !loading && /* @__PURE__ */ jsx33("p", { className: "mt-0.5 text-[11px] text-muted-foreground tabular-nums", children: sub })
+      sub && !loading && /* @__PURE__ */ jsx35("p", { className: "mt-0.5 text-[11px] text-muted-foreground tabular-nums", children: sub })
     ] }),
     (badge || badgeLabel || sparkline) && !loading && /* @__PURE__ */ jsxs18("div", { className: "mt-2.5 flex items-end justify-between gap-2", children: [
       /* @__PURE__ */ jsxs18("div", { className: "flex flex-wrap items-center gap-2", children: [
-        badge && /* @__PURE__ */ jsx33(
+        badge && /* @__PURE__ */ jsx35(
           "span",
           {
             className: cn(
@@ -2260,16 +2362,16 @@ var KpiCard = memo(function KpiCard2({
             children: badge.text
           }
         ),
-        badgeLabel && /* @__PURE__ */ jsx33("span", { className: "text-[11px] text-muted-foreground", children: badgeLabel })
+        badgeLabel && /* @__PURE__ */ jsx35("span", { className: "text-[11px] text-muted-foreground", children: badgeLabel })
       ] }),
-      sparkline && /* @__PURE__ */ jsx33(Sparkline, { data: sparkline, color: sparklineColor })
+      sparkline && /* @__PURE__ */ jsx35(Sparkline, { data: sparkline, color: sparklineColor })
     ] })
   ] });
 });
 
 // src/patterns/search-panel/SearchPanel.tsx
 import { Search as Search2 } from "lucide-react";
-import { jsx as jsx34, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx36, jsxs as jsxs19 } from "react/jsx-runtime";
 function SearchPanel({
   value,
   onChange,
@@ -2294,8 +2396,8 @@ function SearchPanel({
       ),
       children: [
         /* @__PURE__ */ jsxs19("div", { className: "flex h-14 items-center gap-3 px-4", children: [
-          isLoading ? /* @__PURE__ */ jsx34(LoadingSpinner, { size: "sm" }) : /* @__PURE__ */ jsx34(Search2, { className: "h-5 w-5 shrink-0 text-muted-foreground", "aria-hidden": "true" }),
-          /* @__PURE__ */ jsx34(
+          isLoading ? /* @__PURE__ */ jsx36(LoadingSpinner, { size: "sm" }) : /* @__PURE__ */ jsx36(Search2, { className: "h-5 w-5 shrink-0 text-muted-foreground", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx36(
             "input",
             {
               ref: inputRef,
@@ -2307,7 +2409,7 @@ function SearchPanel({
             }
           ),
           trailingSlot,
-          shortcutHint && /* @__PURE__ */ jsx34(
+          shortcutHint && /* @__PURE__ */ jsx36(
             "kbd",
             {
               "aria-hidden": "true",
@@ -2316,7 +2418,7 @@ function SearchPanel({
             }
           )
         ] }),
-        modes && modes.length > 0 && /* @__PURE__ */ jsx34("div", { className: "flex items-center gap-2 px-4 pb-3", children: modes.map(({ key, label, icon: Icon2 }) => /* @__PURE__ */ jsxs19(
+        modes && modes.length > 0 && /* @__PURE__ */ jsx36("div", { className: "flex items-center gap-2 px-4 pb-3", children: modes.map(({ key, label, icon: Icon2 }) => /* @__PURE__ */ jsxs19(
           "button",
           {
             type: "button",
@@ -2326,7 +2428,7 @@ function SearchPanel({
               activeMode === key ? "bg-primary text-primary-foreground" : "text-muted-foreground hover:bg-muted"
             ),
             children: [
-              Icon2 && /* @__PURE__ */ jsx34(Icon2, { className: "h-3.5 w-3.5", "aria-hidden": "true" }),
+              Icon2 && /* @__PURE__ */ jsx36(Icon2, { className: "h-3.5 w-3.5", "aria-hidden": "true" }),
               label
             ]
           },
@@ -2339,9 +2441,9 @@ function SearchPanel({
 
 // src/patterns/search-panel/SearchTrigger.tsx
 import { Search as Search3 } from "lucide-react";
-import { jsx as jsx35 } from "react/jsx-runtime";
+import { jsx as jsx37 } from "react/jsx-runtime";
 function SearchTrigger({ label = "Search", ...props }) {
-  return /* @__PURE__ */ jsx35(Button, { type: "button", variant: "ghost", size: "icon", "aria-label": label, ...props, children: /* @__PURE__ */ jsx35(Search3, { className: "h-[18px] w-[18px]", "aria-hidden": "true" }) });
+  return /* @__PURE__ */ jsx37(Button, { type: "button", variant: "ghost", size: "icon", "aria-label": label, ...props, children: /* @__PURE__ */ jsx37(Search3, { className: "h-[18px] w-[18px]", "aria-hidden": "true" }) });
 }
 
 // src/patterns/sidebar/context.ts
@@ -2353,7 +2455,7 @@ function useSidebarCollapsed() {
 }
 
 // src/patterns/sidebar/NavItem.tsx
-import { jsx as jsx36, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx38, jsxs as jsxs20 } from "react/jsx-runtime";
 function NavItem({
   as,
   icon: Icon2,
@@ -2377,7 +2479,7 @@ function NavItem({
       ),
       ...rest,
       children: [
-        Icon2 && /* @__PURE__ */ jsx36(
+        Icon2 && /* @__PURE__ */ jsx38(
           Icon2,
           {
             className: cn("h-[18px] w-[18px] shrink-0", active ? "text-nav-primary" : "text-muted-foreground"),
@@ -2385,7 +2487,7 @@ function NavItem({
             "aria-hidden": true
           }
         ),
-        /* @__PURE__ */ jsx36(
+        /* @__PURE__ */ jsx38(
           "span",
           {
             className: cn(
@@ -2401,7 +2503,7 @@ function NavItem({
   );
   if (!collapsed) return row;
   return /* @__PURE__ */ jsxs20(Tooltip, { children: [
-    /* @__PURE__ */ jsx36(TooltipTrigger, { asChild: true, children: row }),
+    /* @__PURE__ */ jsx38(TooltipTrigger, { asChild: true, children: row }),
     /* @__PURE__ */ jsxs20(TooltipContent, { side: "right", className: "flex items-center gap-1.5", children: [
       label,
       badge
@@ -2411,8 +2513,8 @@ function NavItem({
 
 // src/patterns/sidebar/NavGroup.tsx
 import { ChevronDown as ChevronDown2 } from "lucide-react";
-import { useState as useState8 } from "react";
-import { jsx as jsx37, jsxs as jsxs21 } from "react/jsx-runtime";
+import { useState as useState10 } from "react";
+import { jsx as jsx39, jsxs as jsxs21 } from "react/jsx-runtime";
 function NavGroup({
   label,
   defaultCollapsed = false,
@@ -2421,7 +2523,7 @@ function NavGroup({
   children,
   className
 }) {
-  const [internalCollapsed, setInternalCollapsed] = useState8(defaultCollapsed);
+  const [internalCollapsed, setInternalCollapsed] = useState10(defaultCollapsed);
   const groupCollapsed = collapsed ?? internalCollapsed;
   const railCollapsed = useSidebarCollapsed();
   const setGroupCollapsed = (next) => {
@@ -2429,7 +2531,7 @@ function NavGroup({
     if (collapsed === void 0) setInternalCollapsed(next);
   };
   return /* @__PURE__ */ jsxs21("div", { className: cn("flex flex-col gap-0.5", className), children: [
-    label && (railCollapsed ? /* @__PURE__ */ jsx37("div", { className: "mx-2 my-1 h-px bg-border/50", "aria-hidden": true }) : /* @__PURE__ */ jsxs21(
+    label && (railCollapsed ? /* @__PURE__ */ jsx39("div", { className: "mx-2 my-1 h-px bg-border/50", "aria-hidden": true }) : /* @__PURE__ */ jsxs21(
       "button",
       {
         type: "button",
@@ -2437,8 +2539,8 @@ function NavGroup({
         "aria-expanded": !groupCollapsed,
         className: "group flex w-full items-center justify-between px-2.5 py-0.5 text-[11px] font-medium text-muted-foreground/80 hover:text-foreground",
         children: [
-          /* @__PURE__ */ jsx37("span", { children: label }),
-          /* @__PURE__ */ jsx37(
+          /* @__PURE__ */ jsx39("span", { children: label }),
+          /* @__PURE__ */ jsx39(
             ChevronDown2,
             {
               className: cn(
@@ -2451,7 +2553,7 @@ function NavGroup({
         ]
       }
     )),
-    !groupCollapsed && /* @__PURE__ */ jsx37("div", { className: "flex flex-col gap-0.5", children })
+    !groupCollapsed && /* @__PURE__ */ jsx39("div", { className: "flex flex-col gap-0.5", children })
   ] });
 }
 
@@ -2461,9 +2563,9 @@ import {
   useCallback,
   useEffect as useEffect5,
   useRef as useRef5,
-  useState as useState9
+  useState as useState11
 } from "react";
-import { Fragment as Fragment3, jsx as jsx38, jsxs as jsxs22 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx40, jsxs as jsxs22 } from "react/jsx-runtime";
 function resolve(value, collapsed) {
   return typeof value === "function" ? value(collapsed) : value;
 }
@@ -2482,9 +2584,9 @@ function Sidebar({
   children,
   className
 }) {
-  const [internalWidth, setInternalWidth] = useState9(defaultWidth);
+  const [internalWidth, setInternalWidth] = useState11(defaultWidth);
   const currentWidth = width ?? internalWidth;
-  const [isDragging, setIsDragging] = useState9(false);
+  const [isDragging, setIsDragging] = useState11(false);
   const setWidth = useCallback(
     (next) => {
       const clamped = Math.min(maxWidth, Math.max(minWidth, next));
@@ -2510,7 +2612,7 @@ function Sidebar({
     dragStartRef.current = null;
     setIsDragging(false);
   };
-  return /* @__PURE__ */ jsx38(SidebarContextProvider, { value: { collapsed }, children: /* @__PURE__ */ jsx38(TooltipProvider, { delayDuration: 200, children: /* @__PURE__ */ jsxs22(
+  return /* @__PURE__ */ jsx40(SidebarContextProvider, { value: { collapsed }, children: /* @__PURE__ */ jsx40(TooltipProvider, { delayDuration: 200, children: /* @__PURE__ */ jsxs22(
     "aside",
     {
       style: { width: collapsed ? railWidth : currentWidth },
@@ -2520,7 +2622,7 @@ function Sidebar({
         className
       ),
       children: [
-        (header || onCollapsedChange) && /* @__PURE__ */ jsx38("div", { className: "flex h-16 items-center gap-2 border-b border-border px-3", children: collapsed && onCollapsedChange ? (
+        (header || onCollapsedChange) && /* @__PURE__ */ jsx40("div", { className: "flex h-16 items-center gap-2 border-b border-border px-3", children: collapsed && onCollapsedChange ? (
           // Collapsed rail: the header slot (e.g. a compact logo mark) and the
           // expand toggle would otherwise compete for the narrow rail's width
           // and clip each other, so they're stacked instead — the header shows
@@ -2534,8 +2636,8 @@ function Sidebar({
               "aria-label": "Expand sidebar",
               className: "group relative flex h-9 w-9 shrink-0 items-center justify-center",
               children: [
-                header && /* @__PURE__ */ jsx38("span", { className: "transition-opacity group-hover:opacity-0", children: resolve(header, collapsed) }),
-                /* @__PURE__ */ jsx38(
+                header && /* @__PURE__ */ jsx40("span", { className: "transition-opacity group-hover:opacity-0", children: resolve(header, collapsed) }),
+                /* @__PURE__ */ jsx40(
                   PanelLeftOpen,
                   {
                     className: "absolute h-4 w-4 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100",
@@ -2545,22 +2647,22 @@ function Sidebar({
               ]
             }
           )
-        ) : /* @__PURE__ */ jsxs22(Fragment3, { children: [
-          header && /* @__PURE__ */ jsx38("div", { className: "min-w-0 flex-1", children: resolve(header, collapsed) }),
-          onCollapsedChange && /* @__PURE__ */ jsx38(
+        ) : /* @__PURE__ */ jsxs22(Fragment4, { children: [
+          header && /* @__PURE__ */ jsx40("div", { className: "min-w-0 flex-1", children: resolve(header, collapsed) }),
+          onCollapsedChange && /* @__PURE__ */ jsx40(
             "button",
             {
               type: "button",
               onClick: () => onCollapsedChange(!collapsed),
               "aria-label": "Collapse sidebar",
               className: "flex h-7 w-7 shrink-0 items-center justify-center rounded-md text-muted-foreground hover:bg-muted hover:text-foreground",
-              children: /* @__PURE__ */ jsx38(PanelLeftClose, { className: "h-4 w-4", "aria-hidden": true })
+              children: /* @__PURE__ */ jsx40(PanelLeftClose, { className: "h-4 w-4", "aria-hidden": true })
             }
           )
         ] }) }),
-        /* @__PURE__ */ jsx38(SidebarNav, { children }),
-        footer && /* @__PURE__ */ jsx38("div", { className: "border-t border-border/50 px-2 py-2", children: resolve(footer, collapsed) }),
-        resizable && !collapsed && /* @__PURE__ */ jsx38(
+        /* @__PURE__ */ jsx40(SidebarNav, { children }),
+        footer && /* @__PURE__ */ jsx40("div", { className: "border-t border-border/50 px-2 py-2", children: resolve(footer, collapsed) }),
+        resizable && !collapsed && /* @__PURE__ */ jsx40(
           "div",
           {
             onPointerDown: handlePointerDown,
@@ -2576,7 +2678,7 @@ function Sidebar({
 }
 function SidebarNav({ children, className, ...rest }) {
   const ref = useRef5(null);
-  const [showFade, setShowFade] = useState9(false);
+  const [showFade, setShowFade] = useState11(false);
   useEffect5(() => {
     const el = ref.current;
     if (!el) return;
@@ -2591,7 +2693,7 @@ function SidebarNav({ children, className, ...rest }) {
     };
   }, []);
   return /* @__PURE__ */ jsxs22("div", { className: "relative flex min-h-0 flex-1 flex-col", children: [
-    /* @__PURE__ */ jsx38(
+    /* @__PURE__ */ jsx40(
       "div",
       {
         ref,
@@ -2600,7 +2702,7 @@ function SidebarNav({ children, className, ...rest }) {
         children
       }
     ),
-    showFade && /* @__PURE__ */ jsx38(
+    showFade && /* @__PURE__ */ jsx40(
       "div",
       {
         className: "pointer-events-none absolute right-0 bottom-0 left-0 h-6 bg-gradient-to-t from-sidebar to-transparent",
@@ -2610,10 +2712,326 @@ function SidebarNav({ children, className, ...rest }) {
   ] });
 }
 
+// src/patterns/ai/AiButton.tsx
+import { Sparkles } from "lucide-react";
+import { forwardRef as forwardRef17 } from "react";
+import { jsx as jsx41, jsxs as jsxs23 } from "react/jsx-runtime";
+var AiButton = forwardRef17(
+  ({ variant = "ai-subtle", loading = false, icon: Icon2 = Sparkles, disabled, children, ...props }, ref) => /* @__PURE__ */ jsxs23(
+    Button,
+    {
+      ref,
+      variant,
+      disabled: disabled || loading,
+      "aria-busy": loading || void 0,
+      ...props,
+      children: [
+        loading ? /* @__PURE__ */ jsx41(LoadingSpinner, { size: "sm", className: "[&_svg]:text-current" }) : /* @__PURE__ */ jsx41(Icon2, { className: "h-4 w-4", "aria-hidden": "true" }),
+        children
+      ]
+    }
+  )
+);
+AiButton.displayName = "AiButton";
+
+// src/patterns/ai/AiExplainButton.tsx
+import { RefreshCw, Sparkles as Sparkles2 } from "lucide-react";
+import { useState as useState12 } from "react";
+import { jsx as jsx42, jsxs as jsxs24 } from "react/jsx-runtime";
+function AiExplainButton({
+  onExplain,
+  label = "Explain",
+  title,
+  align = "start",
+  contentClassName = "w-80",
+  size = "sm",
+  ...props
+}) {
+  const [open, setOpen] = useState12(false);
+  const [loading, setLoading] = useState12(false);
+  const [content, setContent] = useState12(null);
+  const [error, setError] = useState12(null);
+  const load = async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      setContent(await onExplain());
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setLoading(false);
+    }
+  };
+  const handleOpenChange = (next) => {
+    setOpen(next);
+    if (next && content === null && error === null && !loading) void load();
+  };
+  return /* @__PURE__ */ jsxs24(Popover, { open, onOpenChange: handleOpenChange, children: [
+    /* @__PURE__ */ jsx42(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx42(AiButton, { size, ...props, children: label }) }),
+    /* @__PURE__ */ jsxs24(PopoverContent, { align, className: contentClassName, children: [
+      /* @__PURE__ */ jsxs24("p", { className: "mb-2 flex items-center gap-1.5 text-sm font-semibold", children: [
+        /* @__PURE__ */ jsx42(Sparkles2, { className: "h-4 w-4 shrink-0 text-muted-foreground", "aria-hidden": "true" }),
+        title ?? label
+      ] }),
+      loading ? /* @__PURE__ */ jsx42(LoadingSpinner, { size: "sm", label: "Thinking\u2026", className: "text-sm text-muted-foreground" }) : error ? /* @__PURE__ */ jsxs24("div", { className: "flex flex-col items-start gap-2", children: [
+        /* @__PURE__ */ jsx42("div", { role: "alert", className: "w-full", children: /* @__PURE__ */ jsx42(AlertBox, { variant: "error", children: error }) }),
+        /* @__PURE__ */ jsxs24(Button, { type: "button", variant: "outline", size: "sm", onClick: () => void load(), children: [
+          /* @__PURE__ */ jsx42(RefreshCw, { className: "h-4 w-4", "aria-hidden": "true" }),
+          "Try again"
+        ] })
+      ] }) : /* @__PURE__ */ jsx42("div", { className: "max-h-80 overflow-y-auto text-sm leading-relaxed", children: content })
+    ] })
+  ] });
+}
+
+// src/patterns/ai/VoiceInputButton.tsx
+import { Mic, MicOff } from "lucide-react";
+import { forwardRef as forwardRef18 } from "react";
+
+// src/patterns/ai/useSpeechRecognition.ts
+import { useCallback as useCallback2, useEffect as useEffect6, useRef as useRef6, useState as useState13 } from "react";
+function getCtor() {
+  if (typeof window === "undefined") return void 0;
+  const w = window;
+  return w.SpeechRecognition ?? w.webkitSpeechRecognition;
+}
+function browserEngine() {
+  const Ctor = getCtor();
+  return Ctor ? new Ctor() : null;
+}
+function describeSpeechError(code) {
+  switch (code) {
+    case "aborted":
+      return null;
+    case "not-allowed":
+    case "service-not-allowed":
+      return "Microphone access is blocked. Allow it in the browser's site settings and try again.";
+    case "audio-capture":
+      return "No microphone was found.";
+    case "no-speech":
+      return "No speech was detected.";
+    case "network":
+      return "Speech recognition needs a network connection.";
+    default:
+      return `Speech recognition failed (${code}).`;
+  }
+}
+function useSpeechRecognition({
+  lang,
+  onResult,
+  onError,
+  engine
+} = {}) {
+  const [listening, setListening] = useState13(false);
+  const [interim, setInterim] = useState13("");
+  const [error, setError] = useState13(null);
+  const recognitionRef = useRef6(null);
+  const onResultRef = useRef6(onResult);
+  const onErrorRef = useRef6(onError);
+  const engineRef = useRef6(engine);
+  onResultRef.current = onResult;
+  onErrorRef.current = onError;
+  engineRef.current = engine;
+  const supported = engine !== void 0 || getCtor() !== void 0;
+  const stop = useCallback2(() => {
+    recognitionRef.current?.stop();
+  }, []);
+  const start = useCallback2(() => {
+    if (recognitionRef.current) return;
+    const recognition = engineRef.current ? engineRef.current() : browserEngine();
+    if (!recognition) return;
+    recognition.lang = lang ?? (typeof document !== "undefined" ? document.documentElement.lang : "") ?? "";
+    if (!recognition.lang) recognition.lang = "en-US";
+    recognition.continuous = true;
+    recognition.interimResults = true;
+    recognition.onresult = (event) => {
+      let pending = "";
+      for (let i = event.resultIndex; i < event.results.length; i += 1) {
+        const result = event.results[i];
+        if (!result) continue;
+        if (result.isFinal) onResultRef.current?.(result[0].transcript.trim());
+        else pending += result[0].transcript;
+      }
+      setInterim(pending);
+    };
+    recognition.onerror = (event) => {
+      setError(event.error);
+      onErrorRef.current?.(event.error);
+    };
+    recognition.onend = () => {
+      recognitionRef.current = null;
+      setListening(false);
+      setInterim("");
+    };
+    recognitionRef.current = recognition;
+    setError(null);
+    setInterim("");
+    setListening(true);
+    recognition.start();
+  }, [lang]);
+  const toggle = useCallback2(() => {
+    if (recognitionRef.current) stop();
+    else start();
+  }, [start, stop]);
+  useEffect6(() => () => recognitionRef.current?.abort(), []);
+  return { supported, listening, interim, error, start, stop, toggle };
+}
+
+// src/patterns/ai/VoiceInputButton.tsx
+import { jsx as jsx43, jsxs as jsxs25 } from "react/jsx-runtime";
+var VoiceInputButton = forwardRef18(
+  ({
+    onTranscript,
+    onError,
+    lang,
+    engine,
+    label,
+    startLabel = "Start dictation",
+    stopLabel = "Stop dictation",
+    showInterim = false,
+    size,
+    disabled,
+    className,
+    ...props
+  }, ref) => {
+    const { supported, listening, interim, toggle } = useSpeechRecognition({
+      lang,
+      onResult: onTranscript,
+      onError,
+      engine
+    });
+    const unsupportedTitle = "Speech recognition isn't available in this browser";
+    return (
+      // `title` lives on the wrapper, not the button: buttonVariants sets
+      // `disabled:pointer-events-none`, so a disabled button never shows its own.
+      /* @__PURE__ */ jsxs25("span", { className: "inline-flex min-w-0 items-center gap-2", title: supported ? void 0 : unsupportedTitle, children: [
+        /* @__PURE__ */ jsxs25(
+          Button,
+          {
+            ref,
+            type: "button",
+            variant: "outline",
+            size: size ?? (label ? "default" : "icon"),
+            onClick: toggle,
+            disabled: disabled || !supported,
+            "aria-label": label ? void 0 : supported ? listening ? stopLabel : startLabel : unsupportedTitle,
+            "aria-pressed": supported ? listening : void 0,
+            className: cn(
+              listening && "border-destructive bg-destructive/10 text-red-800 hover:bg-destructive/15 hover:text-red-800 dark:text-red-300 dark:hover:text-red-300",
+              className
+            ),
+            ...props,
+            children: [
+              supported ? /* @__PURE__ */ jsx43(Mic, { className: cn("h-4 w-4", listening && "animate-pulse motion-reduce:animate-none"), "aria-hidden": "true" }) : /* @__PURE__ */ jsx43(MicOff, { className: "h-4 w-4", "aria-hidden": "true" }),
+              label
+            ]
+          }
+        ),
+        showInterim && interim ? /* @__PURE__ */ jsx43("span", { "aria-live": "polite", className: "truncate text-sm text-muted-foreground italic", children: interim }) : null
+      ] })
+    );
+  }
+);
+VoiceInputButton.displayName = "VoiceInputButton";
+
+// src/patterns/ai/VoiceTranscript.tsx
+import { Undo2, Wand2 } from "lucide-react";
+import { useState as useState14 } from "react";
+import { jsx as jsx44, jsxs as jsxs26 } from "react/jsx-runtime";
+function VoiceTranscript({
+  value,
+  onChange,
+  onTransform,
+  transformLabel = "Transform with AI",
+  placeholder = "Speak or type\u2026",
+  lang,
+  engine,
+  rows = 4,
+  disabled,
+  className,
+  ...props
+}) {
+  const [loading, setLoading] = useState14(false);
+  const [error, setError] = useState14(null);
+  const [previous, setPrevious] = useState14(null);
+  const append = (chunk) => {
+    onChange(value ? `${value.trimEnd()} ${chunk}` : chunk);
+  };
+  const transform = async () => {
+    if (!onTransform) return;
+    const before = value;
+    setLoading(true);
+    setError(null);
+    try {
+      const next = await onTransform(before);
+      setPrevious(before);
+      onChange(next);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setLoading(false);
+    }
+  };
+  const undo = () => {
+    if (previous === null) return;
+    onChange(previous);
+    setPrevious(null);
+  };
+  return /* @__PURE__ */ jsxs26("div", { className: cn("flex flex-col gap-2", className), ...props, children: [
+    /* @__PURE__ */ jsx44(
+      Textarea,
+      {
+        value,
+        onChange: (event) => onChange(event.target.value),
+        placeholder,
+        rows,
+        disabled: disabled || loading,
+        "aria-busy": loading || void 0
+      }
+    ),
+    /* @__PURE__ */ jsxs26("div", { className: "flex flex-wrap items-center gap-2", children: [
+      /* @__PURE__ */ jsx44(
+        VoiceInputButton,
+        {
+          onTranscript: append,
+          onError: (code) => setError(describeSpeechError(code)),
+          lang,
+          engine,
+          label: "Dictate",
+          size: "sm",
+          showInterim: true,
+          disabled: disabled || loading
+        }
+      ),
+      onTransform ? /* @__PURE__ */ jsx44(
+        AiButton,
+        {
+          variant: "ai",
+          size: "sm",
+          icon: Wand2,
+          loading,
+          disabled: disabled || value.trim().length === 0,
+          onClick: () => void transform(),
+          children: transformLabel
+        }
+      ) : null,
+      previous !== null && !loading ? /* @__PURE__ */ jsxs26(Button, { type: "button", variant: "ghost", size: "sm", onClick: undo, children: [
+        /* @__PURE__ */ jsx44(Undo2, { className: "h-4 w-4", "aria-hidden": "true" }),
+        "Undo"
+      ] }) : null
+    ] }),
+    error ? (
+      // AlertBox has no `role` prop, so the live region wraps it; same shape
+      // a consuming app's own form errors take.
+      /* @__PURE__ */ jsx44("div", { role: "alert", children: /* @__PURE__ */ jsx44(AlertBox, { variant: "error", children: error }) })
+    ) : null
+  ] });
+}
+
 // src/patterns/stepper/Stepper.tsx
-import { useEffect as useEffect6, useRef as useRef6 } from "react";
+import { useEffect as useEffect7, useRef as useRef7 } from "react";
 import { Check as Check5, Plus } from "lucide-react";
-import { jsx as jsx39, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx45, jsxs as jsxs27 } from "react/jsx-runtime";
 function Stepper({
   step,
   maxStep,
@@ -2625,8 +3043,8 @@ function Stepper({
   scrollTestId = "stepper-scroll",
   newTestId
 }) {
-  const stepRefs = useRef6(/* @__PURE__ */ new Map());
-  useEffect6(() => {
+  const stepRefs = useRef7(/* @__PURE__ */ new Map());
+  useEffect7(() => {
     const activeStep = stepRefs.current.get(step);
     activeStep?.scrollIntoView({ block: "nearest", inline: "center" });
   }, [step]);
@@ -2634,19 +3052,19 @@ function Stepper({
     // onNew is pinned outside the horizontally-scrolling region below (a sibling of
     // it, not a child) so its own edge never scrolls off-screen along with the
     // later steps once the scroller's min-width doesn't fit the viewport.
-    /* @__PURE__ */ jsxs23("div", { className: "flex w-full shrink-0 items-center gap-2", children: [
-      /* @__PURE__ */ jsx39("nav", { "aria-label": navLabel, className: "min-w-0 flex-1", children: /* @__PURE__ */ jsx39(
+    /* @__PURE__ */ jsxs27("div", { className: "flex w-full shrink-0 items-center gap-2", children: [
+      /* @__PURE__ */ jsx45("nav", { "aria-label": navLabel, className: "min-w-0 flex-1", children: /* @__PURE__ */ jsx45(
         "div",
         {
           "data-testid": scrollTestId,
           className: "flex w-full items-center gap-0 overflow-x-auto px-2 py-1",
-          children: /* @__PURE__ */ jsx39("ol", { className: "flex min-w-[700px] flex-1 items-start", children: steps.map(({ n, label, phase }, i) => {
+          children: /* @__PURE__ */ jsx45("ol", { className: "flex min-w-[700px] flex-1 items-start", children: steps.map(({ n, label, phase }, i) => {
             const done = step > n;
             const active = step === n;
             const navigable = n <= maxStep && n !== step;
             const last = i === steps.length - 1;
-            return /* @__PURE__ */ jsxs23("li", { className: cn("flex items-start", !last && "flex-1"), children: [
-              /* @__PURE__ */ jsxs23(
+            return /* @__PURE__ */ jsxs27("li", { className: cn("flex items-start", !last && "flex-1"), children: [
+              /* @__PURE__ */ jsxs27(
                 "button",
                 {
                   ref: (element) => {
@@ -2662,17 +3080,17 @@ function Stepper({
                     navigable ? "cursor-pointer hover:opacity-80" : "cursor-default"
                   ),
                   children: [
-                    /* @__PURE__ */ jsx39(
+                    /* @__PURE__ */ jsx45(
                       "div",
                       {
                         className: cn(
                           "flex h-7 w-7 shrink-0 items-center justify-center rounded-full text-[11px] font-bold transition-colors",
                           done ? "bg-primary/15 text-primary" : active ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground"
                         ),
-                        children: done ? /* @__PURE__ */ jsx39(Check5, { className: "h-3 w-3" }) : n
+                        children: done ? /* @__PURE__ */ jsx45(Check5, { className: "h-3 w-3" }) : n
                       }
                     ),
-                    /* @__PURE__ */ jsx39(
+                    /* @__PURE__ */ jsx45(
                       "span",
                       {
                         className: cn(
@@ -2682,11 +3100,11 @@ function Stepper({
                         children: label
                       }
                     ),
-                    /* @__PURE__ */ jsx39("span", { className: "text-[9px] tracking-[0.5px] text-muted-foreground/50 uppercase", children: phase })
+                    /* @__PURE__ */ jsx45("span", { className: "text-[9px] tracking-[0.5px] text-muted-foreground/50 uppercase", children: phase })
                   ]
                 }
               ),
-              !last && /* @__PURE__ */ jsx39(
+              !last && /* @__PURE__ */ jsx45(
                 "div",
                 {
                   className: cn(
@@ -2699,7 +3117,7 @@ function Stepper({
           }) })
         }
       ) }),
-      onNew && /* @__PURE__ */ jsxs23(
+      onNew && /* @__PURE__ */ jsxs27(
         "button",
         {
           "data-testid": newTestId,
@@ -2707,7 +3125,7 @@ function Stepper({
           title: newLabel,
           className: "flex shrink-0 items-center gap-1.5 rounded-lg border border-border px-3 py-1.5 text-[12px] font-semibold text-foreground transition-colors hover:bg-muted/50",
           children: [
-            /* @__PURE__ */ jsx39(Plus, { className: "h-3.5 w-3.5" }),
+            /* @__PURE__ */ jsx45(Plus, { className: "h-3.5 w-3.5" }),
             newLabel
           ]
         }
@@ -2716,6 +3134,8 @@ function Stepper({
   );
 }
 export {
+  AiButton,
+  AiExplainButton,
   AlertBox,
   Badge,
   Button,
@@ -2730,6 +3150,7 @@ export {
   Combobox,
   ConfirmDialog,
   Dialog,
+  DialogActions,
   DialogContent,
   DialogDescription,
   DialogFooter,
@@ -2766,6 +3187,7 @@ export {
   PopoverAnchor,
   PopoverContent,
   PopoverTrigger,
+  QuestionDialog,
   ResponsivePanel,
   ScrollArea,
   ScrollBar,
@@ -2813,12 +3235,18 @@ export {
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
+  VoiceInputButton,
+  VoiceTranscript,
   badgeVariants,
   buttonVariants,
   cn,
+  describeSpeechError,
+  getConfirmButtonPlacement,
+  isWindowsPlatform,
   loadingSpinnerIconVariants,
   sheetVariants,
   useMediaQuery,
-  useSidebarCollapsed
+  useSidebarCollapsed,
+  useSpeechRecognition
 };
 //# sourceMappingURL=index.js.map