@bmsuisse/ui 0.16.1 → 0.17.0

package/dist/index.js

@@ -167,8 +167,8 @@ var Badge = ({ className, variant, ...props }) => /* @__PURE__ */ jsx6("div", {
 
 // src/primitives/dialog.tsx
 import * as DialogPrimitive from "@radix-ui/react-dialog";
-import { X } from "lucide-react";
-import { forwardRef as forwardRef5 } from "react";
+import { XMarkIcon } from "@heroicons/react/24/outline";
+import { forwardRef as forwardRef5, useCallback, useLayoutEffect, useRef } from "react";
 import { jsx as jsx7, jsxs } from "react/jsx-runtime";
 var Dialog = DialogPrimitive.Root;
 var DialogTrigger = DialogPrimitive.Trigger;
@@ -188,7 +188,7 @@ var DialogContent = forwardRef5(({ className, children, showCloseButton = true,
     {
       ref,
       className: cn(
-        "fixed left-1/2 top-1/2 z-50 flex max-h-[85vh] w-full max-w-md -translate-x-1/2 -translate-y-1/2 flex-col overflow-hidden rounded-lg border bg-background shadow-lg",
+        "fixed left-1/2 top-1/2 z-50 flex max-h-[85vh] [--dialog-divider:color-mix(in_oklab,var(--color-foreground)_12%,transparent)] dark:[--dialog-divider:var(--color-border)] w-full max-w-md -translate-x-1/2 -translate-y-1/2 flex-col overflow-hidden rounded-lg border bg-background shadow-lg",
         className
       ),
       ...props,
@@ -200,7 +200,7 @@ var DialogContent = forwardRef5(({ className, children, showCloseButton = true,
             "data-testid": closeButtonTestId,
             className: "absolute right-4 top-4 z-20 rounded-sm opacity-70 hover:opacity-100",
             children: [
-              /* @__PURE__ */ jsx7(X, { className: "h-4 w-4" }),
+              /* @__PURE__ */ jsx7(XMarkIcon, { className: "h-4 w-4" }),
               /* @__PURE__ */ jsx7("span", { className: "sr-only", children: "Close" })
             ]
           }
@@ -213,7 +213,17 @@ DialogContent.displayName = "DialogContent";
 var DialogHeader = ({
   className,
   ...props
-}) => /* @__PURE__ */ jsx7("div", { className: cn("flex shrink-0 flex-col gap-1.5 px-6 pt-6", className), ...props });
+}) => /* @__PURE__ */ jsx7(
+  "div",
+  {
+    "data-slot": "dialog-header",
+    className: cn(
+      "flex shrink-0 flex-col gap-1.5 bg-background px-6 pb-3 pt-6 transition-shadow [&:has(+[data-overflow-top])]:shadow-[inset_0_-1px_0_var(--dialog-divider)]",
+      className
+    ),
+    ...props
+  }
+);
 var DialogTitle = forwardRef5(({ className, ...props }, ref) => /* @__PURE__ */ jsx7(DialogPrimitive.Title, { ref, className: cn("text-lg font-semibold", className), ...props }));
 DialogTitle.displayName = "DialogTitle";
 var DialogDescription = forwardRef5(({ className, ...props }, ref) => /* @__PURE__ */ jsx7(
@@ -225,17 +235,77 @@ var DialogDescription = forwardRef5(({ className, ...props }, ref) => /* @__PURE
   }
 ));
 DialogDescription.displayName = "DialogDescription";
-var DialogBody = ({
-  className,
-  ...props
-}) => /* @__PURE__ */ jsx7("div", { className: cn("min-h-0 flex-1 overflow-y-auto px-6 pb-6", className), ...props });
+function useScrollEdges(ref) {
+  useLayoutEffect(() => {
+    const el = ref.current;
+    if (!el) return void 0;
+    const update = () => {
+      el.toggleAttribute("data-overflow-top", el.scrollTop > 0.5);
+      el.toggleAttribute(
+        "data-overflow-bottom",
+        el.scrollTop + el.clientHeight < el.scrollHeight - 0.5
+      );
+    };
+    update();
+    el.addEventListener("scroll", update, { passive: true });
+    const resizeObserver = typeof ResizeObserver === "undefined" ? void 0 : new ResizeObserver(update);
+    const observeChildren = () => {
+      if (!resizeObserver) return;
+      resizeObserver.disconnect();
+      resizeObserver.observe(el);
+      for (const child of Array.from(el.children)) resizeObserver.observe(child);
+    };
+    observeChildren();
+    const mutationObserver = typeof MutationObserver === "undefined" ? void 0 : new MutationObserver(() => {
+      observeChildren();
+      update();
+    });
+    mutationObserver?.observe(el, { childList: true });
+    return () => {
+      el.removeEventListener("scroll", update);
+      resizeObserver?.disconnect();
+      mutationObserver?.disconnect();
+    };
+  }, [ref]);
+}
+var DialogBody = forwardRef5(
+  ({ className, ...props }, forwardedRef) => {
+    const ref = useRef(null);
+    useScrollEdges(ref);
+    const setRefs = useCallback(
+      (node) => {
+        ref.current = node;
+        if (typeof forwardedRef === "function") forwardedRef(node);
+        else if (forwardedRef) forwardedRef.current = node;
+      },
+      [forwardedRef]
+    );
+    return /* @__PURE__ */ jsx7(
+      "div",
+      {
+        ref: setRefs,
+        "data-slot": "dialog-body",
+        className: cn(
+          "min-h-0 flex-1 overflow-y-auto px-6 pb-6 pt-1 empty:pb-3 empty:pt-0 [&:empty:has(+[data-slot=dialog-footer])]:hidden [&:has(+[data-slot=dialog-footer])]:pb-1",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+DialogBody.displayName = "DialogBody";
 var DialogFooter = ({
   className,
   ...props
 }) => /* @__PURE__ */ jsx7(
   "div",
   {
-    className: cn("-mt-6 flex shrink-0 justify-end gap-2 px-6 pb-6 pt-4", className),
+    "data-slot": "dialog-footer",
+    className: cn(
+      "flex shrink-0 justify-end gap-2 bg-background px-6 pb-6 pt-3 transition-shadow [[data-overflow-bottom]+&]:shadow-[inset_0_1px_0_var(--dialog-divider)] [[data-slot=dialog-body]:empty+&]:pt-1 [[data-slot=dialog-header]+&]:pt-1",
+      className
+    ),
     ...props
   }
 );
@@ -264,7 +334,7 @@ PopoverContent.displayName = "PopoverContent";
 
 // src/primitives/select.tsx
 import * as SelectPrimitive from "@radix-ui/react-select";
-import { Check, ChevronDown } from "lucide-react";
+import { CheckIcon, ChevronDownIcon } from "@heroicons/react/24/outline";
 import { forwardRef as forwardRef7 } from "react";
 import { jsx as jsx9, jsxs as jsxs2 } from "react/jsx-runtime";
 var Select = SelectPrimitive.Root;
@@ -283,7 +353,7 @@ var SelectTrigger = forwardRef7(
       ...props,
       children: [
         children,
-        /* @__PURE__ */ jsx9(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx9(ChevronDown, { className: "h-4 w-4 opacity-50" }) })
+        /* @__PURE__ */ jsx9(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx9(ChevronDownIcon, { className: "h-4 w-4 opacity-50" }) })
       ]
     }
   )
@@ -314,7 +384,7 @@ var SelectItem = forwardRef7(({ className, children, ...props }, ref) => /* @__P
     ),
     ...props,
     children: [
-      /* @__PURE__ */ jsx9("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx9(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx9(Check, { className: "h-4 w-4" }) }) }),
+      /* @__PURE__ */ jsx9("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx9(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx9(CheckIcon, { className: "h-4 w-4" }) }) }),
       /* @__PURE__ */ jsx9(SelectPrimitive.ItemText, { children })
     ]
   }
@@ -327,7 +397,7 @@ var Skeleton = ({ className, ...props }) => /* @__PURE__ */ jsx10("div", { class
 
 // src/primitives/checkbox.tsx
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
-import { Check as Check2 } from "lucide-react";
+import { CheckIcon as CheckIcon2 } from "@heroicons/react/24/outline";
 import { forwardRef as forwardRef8 } from "react";
 import { jsx as jsx11 } from "react/jsx-runtime";
 var Checkbox = forwardRef8(({ className, ...props }, ref) => /* @__PURE__ */ jsx11(
@@ -339,7 +409,7 @@ var Checkbox = forwardRef8(({ className, ...props }, ref) => /* @__PURE__ */ jsx
       className
     ),
     ...props,
-    children: /* @__PURE__ */ jsx11(CheckboxPrimitive.Indicator, { className: "flex items-center justify-center text-current", children: /* @__PURE__ */ jsx11(Check2, { className: "h-3.5 w-3.5" }) })
+    children: /* @__PURE__ */ jsx11(CheckboxPrimitive.Indicator, { className: "flex items-center justify-center text-current", children: /* @__PURE__ */ jsx11(CheckIcon2, { className: "h-3.5 w-3.5" }) })
   }
 ));
 Checkbox.displayName = "Checkbox";
@@ -521,7 +591,7 @@ TableCaption.displayName = "TableCaption";
 
 // src/primitives/dropdown-menu.tsx
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
-import { Check as Check3, ChevronRight, Circle } from "lucide-react";
+import { CheckIcon as CheckIcon3, ChevronRightIcon } from "@heroicons/react/24/outline";
 import { forwardRef as forwardRef14 } from "react";
 import { jsx as jsx17, jsxs as jsxs4 } from "react/jsx-runtime";
 var DropdownMenu = DropdownMenuPrimitive.Root;
@@ -567,7 +637,7 @@ var DropdownMenuCheckboxItem = forwardRef14(({ className, children, checked, ...
     ),
     ...props,
     children: [
-      /* @__PURE__ */ jsx17("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx17(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx17(Check3, { className: "h-4 w-4" }) }) }),
+      /* @__PURE__ */ jsx17("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx17(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx17(CheckIcon3, { className: "h-4 w-4" }) }) }),
       children
     ]
   }
@@ -583,7 +653,7 @@ var DropdownMenuRadioItem = forwardRef14(({ className, children, ...props }, ref
     ),
     ...props,
     children: [
-      /* @__PURE__ */ jsx17("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx17(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx17(Circle, { className: "h-2 w-2 fill-current" }) }) }),
+      /* @__PURE__ */ jsx17("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx17(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx17("span", { className: "h-2 w-2 rounded-full bg-current" }) }) }),
       children
     ]
   }
@@ -622,7 +692,7 @@ var DropdownMenuSubTrigger = forwardRef14(({ className, children, ...props }, re
     ...props,
     children: [
       children,
-      /* @__PURE__ */ jsx17(ChevronRight, { className: "ml-auto h-4 w-4" })
+      /* @__PURE__ */ jsx17(ChevronRightIcon, { className: "ml-auto h-4 w-4" })
     ]
   }
 ));
@@ -643,8 +713,8 @@ DropdownMenuSubContent.displayName = "DropdownMenuSubContent";
 // src/primitives/sheet.tsx
 import { cva as cva3 } from "class-variance-authority";
 import * as DialogPrimitive2 from "@radix-ui/react-dialog";
-import { X as X2 } from "lucide-react";
-import { forwardRef as forwardRef15, useEffect, useRef, useState } from "react";
+import { XMarkIcon as XMarkIcon2 } from "@heroicons/react/24/outline";
+import { forwardRef as forwardRef15, useEffect, useRef as useRef2, useState } from "react";
 import { jsx as jsx18, jsxs as jsxs5 } from "react/jsx-runtime";
 var Sheet = DialogPrimitive2.Root;
 var SheetTrigger = DialogPrimitive2.Trigger;
@@ -695,7 +765,7 @@ var SheetContent = forwardRef15(
     }, []);
     const [dragHeight, setDragHeight] = useState(null);
     const [isDragging, setIsDragging] = useState(false);
-    const dragStart = useRef(null);
+    const dragStart = useRef2(null);
     const canResize = resizable && side === "bottom";
     const onHandlePointerDown = (e) => {
       const popup = e.currentTarget.closest('[data-slot="sheet-content"]');
@@ -750,7 +820,7 @@ var SheetContent = forwardRef15(
             ),
             children,
             /* @__PURE__ */ jsxs5(DialogPrimitive2.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 hover:opacity-100", children: [
-              /* @__PURE__ */ jsx18(X2, { className: "h-4 w-4" }),
+              /* @__PURE__ */ jsx18(XMarkIcon2, { className: "h-4 w-4" }),
               /* @__PURE__ */ jsx18("span", { className: "sr-only", children: "Close" })
             ] })
           ]
@@ -966,7 +1036,7 @@ var FormModal = ({
 };
 
 // src/patterns/modal/ResponsivePanel.tsx
-import { useRef as useRef2, useState as useState6 } from "react";
+import { useRef as useRef3, useState as useState6 } from "react";
 
 // src/lib/useMediaQuery.ts
 import { useEffect as useEffect2, useState as useState5 } from "react";
@@ -1022,8 +1092,8 @@ var cornerGripPosition = {
 function useDesktopPanelGeometry() {
   const [style, setStyle] = useState6(void 0);
   const [isDragging, setIsDragging] = useState6(false);
-  const drag = useRef2(null);
-  const lastRect = useRef2(null);
+  const drag = useRef3(null);
+  const lastRect = useRef3(null);
   const beginDrag = (mode, corner) => (e) => {
     const content = e.currentTarget.closest('[data-slot="dialog-content"]');
     if (!(content instanceof HTMLElement)) return;
@@ -1286,8 +1356,103 @@ function FormField({
 }
 
 // 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 useState8 } from "react";
+import { CheckIcon as CheckIcon4, ChevronUpDownIcon, XMarkIcon as XMarkIcon3 } from "@heroicons/react/24/outline";
+import { useEffect as useEffect3, useMemo, useRef as useRef4, useState as useState8 } from "react";
+
+// src/lib/errorState.ts
+function toErrorInfo(error) {
+  if (error == null || error === false || error === "") return void 0;
+  if (typeof error === "string") return { message: error };
+  if (error instanceof Error) {
+    return { message: error.message || void 0, details: error.stack };
+  }
+  if (typeof error === "object") {
+    const { title, message, details } = error;
+    if (title !== void 0 || message !== void 0 || details !== void 0) return { title, message, details };
+  }
+  try {
+    return { message: typeof error === "object" ? "Unknown error" : String(error) };
+  } catch {
+    return { message: "Unknown error" };
+  }
+}
+
+// src/patterns/error-state/ErrorState.tsx
+import { ArrowPathIcon, ExclamationTriangleIcon } from "@heroicons/react/24/outline";
+import { jsx as jsx27, jsxs as jsxs11 } from "react/jsx-runtime";
+var defaultErrorStateLabels = {
+  title: "Couldn't load data",
+  retry: "Retry",
+  showDetails: "Show details"
+};
+var ErrorState = ({
+  error,
+  onRetry,
+  variant = "block",
+  labels,
+  className,
+  ...props
+}) => {
+  const info = toErrorInfo(error);
+  if (!info) return null;
+  const l = { ...defaultErrorStateLabels, ...labels };
+  const compact = variant === "compact";
+  return /* @__PURE__ */ jsxs11(
+    "div",
+    {
+      role: "alert",
+      "data-testid": "error-state",
+      className: cn(
+        "flex gap-3 text-sm",
+        compact ? "items-start rounded-md border border-destructive bg-destructive/10 p-3 text-red-800 dark:text-red-300" : "min-h-32 w-full flex-col items-center justify-center p-6 text-center",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx27(
+          ExclamationTriangleIcon,
+          {
+            className: cn("shrink-0", compact ? "mt-0.5 h-4 w-4" : "h-8 w-8 text-destructive"),
+            "aria-hidden": "true"
+          }
+        ),
+        /* @__PURE__ */ jsxs11("div", { className: cn("flex min-w-0 flex-col gap-1", compact ? "items-start" : "items-center"), children: [
+          /* @__PURE__ */ jsx27("p", { className: "font-semibold", children: info.title ?? l.title }),
+          info.message ? /* @__PURE__ */ jsx27("p", { className: cn(!compact && "text-muted-foreground"), children: info.message }) : null,
+          info.details ? /* @__PURE__ */ jsxs11("details", { className: "mt-1 w-full max-w-full text-left text-xs", children: [
+            /* @__PURE__ */ jsx27("summary", { className: "cursor-pointer select-none underline underline-offset-2", children: l.showDetails }),
+            /* @__PURE__ */ jsx27("pre", { className: "mt-1 max-h-40 overflow-auto whitespace-pre-wrap break-words rounded bg-muted p-2 text-muted-foreground", children: info.details })
+          ] }) : null,
+          onRetry ? /* @__PURE__ */ jsxs11(Button, { type: "button", variant: "outline", size: "sm", className: "mt-2", onClick: onRetry, children: [
+            /* @__PURE__ */ jsx27(ArrowPathIcon, { className: "h-4 w-4", "aria-hidden": "true" }),
+            l.retry
+          ] }) : null
+        ] })
+      ]
+    }
+  );
+};
+var InlineError = ({ error, onRetry, labels, className, ...props }) => {
+  const info = toErrorInfo(error);
+  if (!info) return null;
+  const l = { ...defaultErrorStateLabels, ...labels };
+  const text = info.message ?? info.title ?? l.title;
+  return /* @__PURE__ */ jsxs11(
+    "span",
+    {
+      role: "alert",
+      "data-testid": "inline-error",
+      title: info.details,
+      className: cn("inline-flex min-w-0 items-center gap-1.5 text-xs text-red-700 dark:text-red-300", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx27(ExclamationTriangleIcon, { className: "h-3.5 w-3.5 shrink-0", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx27("span", { className: "truncate", children: text }),
+        onRetry ? /* @__PURE__ */ jsx27("button", { type: "button", className: "shrink-0 underline underline-offset-2", onClick: onRetry, children: l.retry }) : null
+      ]
+    }
+  );
+};
 
 // src/lib/optionGrouping.ts
 function groupMembers(options, group) {
@@ -1316,7 +1481,7 @@ function buildRenderChunks(visibleOptions) {
 }
 
 // src/lib/optionGrid.tsx
-import { jsx as jsx27, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx28, jsxs as jsxs12 } from "react/jsx-runtime";
 function renderGridOptions({
   columns,
   options,
@@ -1327,10 +1492,10 @@ function renderGridOptions({
   onHover,
   testId
 }) {
-  return /* @__PURE__ */ jsxs11(Table, { className: "text-sm", children: [
-    /* @__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(
+  return /* @__PURE__ */ jsxs12(Table, { className: "text-sm", children: [
+    /* @__PURE__ */ jsx28(TableHeader, { children: /* @__PURE__ */ jsxs12(TableRow, { className: "hover:bg-transparent", children: [
+      multiple && /* @__PURE__ */ jsx28(TableHead, { className: "sticky top-0 z-10 w-6 bg-muted" }),
+      columns.map((column) => /* @__PURE__ */ jsx28(
         TableHead,
         {
           className: cn("sticky top-0 z-10 whitespace-nowrap bg-muted text-xs", column.className),
@@ -1339,10 +1504,10 @@ function renderGridOptions({
         column.key
       ))
     ] }) }),
-    /* @__PURE__ */ jsx27(TableBody, { children: options.map((option, index) => {
+    /* @__PURE__ */ jsx28(TableBody, { children: options.map((option, index) => {
       const selected = isSelected(option);
       const active = index === activeIndex;
-      return /* @__PURE__ */ jsxs11(
+      return /* @__PURE__ */ jsxs12(
         TableRow,
         {
           role: "option",
@@ -1366,7 +1531,7 @@ function renderGridOptions({
             option.disabled && "pointer-events-none opacity-50"
           ),
           children: [
-            multiple && /* @__PURE__ */ jsx27(TableCell, { className: "w-6", children: /* @__PURE__ */ jsx27(
+            multiple && /* @__PURE__ */ jsx28(TableCell, { className: "w-6", children: /* @__PURE__ */ jsx28(
               "input",
               {
                 type: "checkbox",
@@ -1376,7 +1541,7 @@ function renderGridOptions({
                 className: "pointer-events-none h-3.5 w-3.5 shrink-0 accent-primary"
               }
             ) }),
-            columns.map((column) => /* @__PURE__ */ jsx27(TableCell, { className: cn("truncate", column.className), children: column.key === "label" ? option.label : option.data?.[column.key] }, column.key))
+            columns.map((column) => /* @__PURE__ */ jsx28(TableCell, { className: cn("truncate", column.className), children: column.key === "label" ? option.label : option.data?.[column.key] }, column.key))
           ]
         },
         option.value
@@ -1386,7 +1551,7 @@ function renderGridOptions({
 }
 
 // src/patterns/combobox/Combobox.tsx
-import { jsx as jsx28, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx29, jsxs as jsxs13 } from "react/jsx-runtime";
 function resolveGroupTriggerLabel(options, selectedValues, groupLabel) {
   const selectedSet = new Set(selectedValues);
   const groupsPresent = Array.from(
@@ -1415,6 +1580,8 @@ function Combobox(props) {
     disabled,
     loading = false,
     loadingMessage = "Loading\u2026",
+    error,
+    onRetry,
     clearable = true,
     className,
     id,
@@ -1425,10 +1592,11 @@ function Combobox(props) {
     columns
   } = props;
   const testId = props["data-testid"];
+  const hasError = toErrorInfo(error) !== void 0;
   const [open, setOpen] = useState8(false);
   const [search, setSearch] = useState8("");
   const [activeIndex, setActiveIndex] = useState8(0);
-  const inputRef = useRef3(null);
+  const inputRef = useRef4(null);
   const selectedValues = useMemo(
     () => props.multiple ? props.value : props.value ? [props.value] : [],
     [props.multiple, props.value]
@@ -1466,6 +1634,7 @@ function Combobox(props) {
     setOpen(false);
   }
   function handleKeyDown(event) {
+    if (hasError) return;
     if (event.key === "ArrowDown") {
       event.preventDefault();
       setActiveIndex((i) => Math.min(i + 1, visibleOptions.length - 1));
@@ -1490,7 +1659,7 @@ function Combobox(props) {
   function renderOption({ option, index }) {
     const isSelected = selectedValues.includes(option.value);
     const isActive = index === activeIndex;
-    return /* @__PURE__ */ jsxs12(
+    return /* @__PURE__ */ jsxs13(
       "button",
       {
         type: "button",
@@ -1506,7 +1675,7 @@ function Combobox(props) {
           isActive && "bg-accent text-accent-foreground"
         ),
         children: [
-          props.multiple ? /* @__PURE__ */ jsx28(
+          props.multiple ? /* @__PURE__ */ jsx29(
             "input",
             {
               type: "checkbox",
@@ -1515,15 +1684,15 @@ function Combobox(props) {
               tabIndex: -1,
               className: "pointer-events-none h-3.5 w-3.5 shrink-0 accent-primary"
             }
-          ) : /* @__PURE__ */ jsx28(Check4, { className: cn("h-4 w-4 shrink-0", isSelected ? "opacity-100" : "opacity-0") }),
-          /* @__PURE__ */ jsx28("span", { className: "truncate", children: option.label })
+          ) : /* @__PURE__ */ jsx29(CheckIcon4, { className: cn("h-4 w-4 shrink-0", isSelected ? "opacity-100" : "opacity-0") }),
+          /* @__PURE__ */ jsx29("span", { className: "truncate", children: option.label })
         ]
       },
       option.value
     );
   }
-  return /* @__PURE__ */ jsxs12(Popover, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsx28(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs12(
+  return /* @__PURE__ */ jsxs13(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx29(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs13(
       Button,
       {
         id,
@@ -1532,16 +1701,18 @@ function Combobox(props) {
         variant: "outline",
         role: "combobox",
         "aria-expanded": open,
+        "aria-invalid": hasError || void 0,
         disabled: disabled || loading,
         className: cn(
           "w-full justify-between font-normal",
+          hasError && "border-destructive",
           (selectedOptions.length === 0 || loading) && "text-muted-foreground",
           className
         ),
         children: [
-          /* @__PURE__ */ jsx28("span", { className: "truncate", children: triggerLabel }),
-          /* @__PURE__ */ jsxs12("span", { className: "flex items-center gap-1", children: [
-            clearable && !loading && selectedValues.length > 0 ? /* @__PURE__ */ jsx28(
+          /* @__PURE__ */ jsx29("span", { className: "truncate", children: triggerLabel }),
+          /* @__PURE__ */ jsxs13("span", { className: "flex items-center gap-1", children: [
+            clearable && !loading && selectedValues.length > 0 ? /* @__PURE__ */ jsx29(
               "span",
               {
                 role: "button",
@@ -1556,15 +1727,15 @@ function Combobox(props) {
                     props.onChange(null);
                   }
                 },
-                children: /* @__PURE__ */ jsx28(X3, { className: "h-3.5 w-3.5" })
+                children: /* @__PURE__ */ jsx29(XMarkIcon3, { className: "h-3.5 w-3.5" })
               }
             ) : null,
-            /* @__PURE__ */ jsx28(ChevronsUpDown, { className: "h-4 w-4 shrink-0 opacity-50", "aria-hidden": "true" })
+            /* @__PURE__ */ jsx29(ChevronUpDownIcon, { className: "h-4 w-4 shrink-0 opacity-50", "aria-hidden": "true" })
           ] })
         ]
       }
     ) }),
-    /* @__PURE__ */ jsx28(
+    /* @__PURE__ */ jsx29(
       PopoverContent,
       {
         align: "start",
@@ -1574,8 +1745,8 @@ function Combobox(props) {
           columns && "w-max min-w-[var(--radix-popover-trigger-width)] max-w-[min(40rem,90vw)]"
         ),
         onOpenAutoFocus: (event) => event.preventDefault(),
-        children: /* @__PURE__ */ jsxs12("div", { className: "flex flex-col gap-2", children: [
-          /* @__PURE__ */ jsx28(
+        children: /* @__PURE__ */ jsxs13("div", { className: "flex flex-col gap-2", children: [
+          /* @__PURE__ */ jsx29(
             Input,
             {
               ref: inputRef,
@@ -1589,7 +1760,7 @@ function Combobox(props) {
               "aria-label": searchPlaceholder
             }
           ),
-          /* @__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({
+          /* @__PURE__ */ jsx29("div", { role: hasError ? void 0 : "listbox", className: cn("max-h-60 overflow-y-auto", !columns && "flex flex-col gap-0.5"), children: hasError ? /* @__PURE__ */ jsx29("div", { className: "flex justify-center py-2", children: /* @__PURE__ */ jsx29(InlineError, { error, onRetry }) }) : visibleOptions.length === 0 ? /* @__PURE__ */ jsx29("p", { className: "py-2 text-center text-sm text-muted-foreground", children: emptyMessage }) : columns ? renderGridOptions({
             columns,
             options: visibleOptions,
             activeIndex,
@@ -1609,14 +1780,14 @@ function Combobox(props) {
               // lives on this wrapper's `pt-1`, not on the header itself -- a margin on
               // the sticky element would travel with it once stuck, leaving a gap at the
               // scrollport's top that the row behind it shows through.
-              /* @__PURE__ */ jsxs12("div", { className: "flex flex-col gap-0.5 pt-1 first:pt-0", children: [
-                /* @__PURE__ */ jsxs12(
+              /* @__PURE__ */ jsxs13("div", { className: "flex flex-col gap-0.5 pt-1 first:pt-0", children: [
+                /* @__PURE__ */ jsxs13(
                   "div",
                   {
                     "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__ */ jsx28(
+                      props.multiple ? /* @__PURE__ */ jsx29(
                         "input",
                         {
                           type: "checkbox",
@@ -1630,7 +1801,7 @@ function Combobox(props) {
                           "aria-label": `Select all of ${groupLabel(chunk.group)}`
                         }
                       ) : null,
-                      /* @__PURE__ */ jsx28("span", { className: "truncate", children: groupLabel(chunk.group) })
+                      /* @__PURE__ */ jsx29("span", { className: "truncate", children: groupLabel(chunk.group) })
                     ]
                   }
                 ),
@@ -1645,9 +1816,9 @@ 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 useState9 } from "react";
-import { jsx as jsx29, jsxs as jsxs13 } from "react/jsx-runtime";
+import { XMarkIcon as XMarkIcon4 } from "@heroicons/react/24/outline";
+import { useEffect as useEffect4, useMemo as useMemo2, useRef as useRef5, useState as useState9 } from "react";
+import { jsx as jsx30, jsxs as jsxs14 } from "react/jsx-runtime";
 function TagCombobox({
   options,
   value,
@@ -1657,6 +1828,8 @@ function TagCombobox({
   disabled,
   loading = false,
   loadingMessage = "Loading\u2026",
+  error,
+  onRetry,
   className,
   id,
   onSearchChange,
@@ -1669,8 +1842,8 @@ function TagCombobox({
   const [open, setOpen] = useState9(false);
   const [search, setSearch] = useState9("");
   const [activeIndex, setActiveIndex] = useState9(0);
-  const inputRef = useRef4(null);
-  const fieldRef = useRef4(null);
+  const inputRef = useRef5(null);
+  const fieldRef = useRef5(null);
   const selectedOptions = useMemo2(
     () => value.map((v) => options.find((o) => o.value === v) ?? { value: v, label: v }),
     [options, value]
@@ -1716,6 +1889,7 @@ function TagCombobox({
     onChange(next);
     inputRef.current?.focus();
   }
+  const hasError = toErrorInfo(error) !== void 0;
   function handleKeyDown(event) {
     if (event.key === "ArrowDown") {
       event.preventDefault();
@@ -1727,7 +1901,7 @@ function TagCombobox({
     } else if (event.key === "Enter") {
       event.preventDefault();
       const option = visibleOptions[activeIndex];
-      if (option) toggleOption(option);
+      if (option && !hasError) toggleOption(option);
     } else if (event.key === "Escape") {
       setOpen(false);
     } else if (event.key === "Backspace" && search === "") {
@@ -1738,7 +1912,7 @@ function TagCombobox({
   function renderOption({ option, index }) {
     const isSelected = value.includes(option.value);
     const isActive = index === activeIndex;
-    return /* @__PURE__ */ jsxs13(
+    return /* @__PURE__ */ jsxs14(
       "button",
       {
         type: "button",
@@ -1754,7 +1928,7 @@ function TagCombobox({
           isActive && "bg-accent text-accent-foreground"
         ),
         children: [
-          /* @__PURE__ */ jsx29(
+          /* @__PURE__ */ jsx30(
             "input",
             {
               type: "checkbox",
@@ -1764,14 +1938,14 @@ function TagCombobox({
               className: "pointer-events-none h-3.5 w-3.5 shrink-0 accent-primary"
             }
           ),
-          /* @__PURE__ */ jsx29("span", { className: "truncate", children: option.label })
+          /* @__PURE__ */ jsx30("span", { className: "truncate", children: option.label })
         ]
       },
       option.value
     );
   }
-  return /* @__PURE__ */ jsxs13(Popover, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsx29(PopoverAnchor, { asChild: true, children: /* @__PURE__ */ jsxs13(
+  return /* @__PURE__ */ jsxs14(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx30(PopoverAnchor, { asChild: true, children: /* @__PURE__ */ jsxs14(
       "div",
       {
         ref: fieldRef,
@@ -1789,13 +1963,13 @@ function TagCombobox({
           if (!disabled) inputRef.current?.focus();
         },
         children: [
-          selectedOptions.map((option) => /* @__PURE__ */ jsxs13(
+          selectedOptions.map((option) => /* @__PURE__ */ jsxs14(
             "span",
             {
               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__ */ jsx29("span", { className: "max-w-48 truncate", children: option.label }),
-                !disabled && /* @__PURE__ */ jsx29(
+                /* @__PURE__ */ jsx30("span", { className: "max-w-48 truncate", children: option.label }),
+                !disabled && /* @__PURE__ */ jsx30(
                   "button",
                   {
                     type: "button",
@@ -1805,14 +1979,14 @@ function TagCombobox({
                       event.stopPropagation();
                       removeValue(option.value);
                     },
-                    children: /* @__PURE__ */ jsx29(X4, { className: "h-3 w-3" })
+                    children: /* @__PURE__ */ jsx30(XMarkIcon4, { className: "h-3 w-3" })
                   }
                 )
               ]
             },
             option.value
           )),
-          /* @__PURE__ */ jsx29(
+          /* @__PURE__ */ jsx30(
             "input",
             {
               ref: inputRef,
@@ -1830,7 +2004,7 @@ function TagCombobox({
         ]
       }
     ) }),
-    /* @__PURE__ */ jsx29(
+    /* @__PURE__ */ jsx30(
       PopoverContent,
       {
         align: "start",
@@ -1844,7 +2018,7 @@ function TagCombobox({
         onInteractOutside: (event) => {
           if (fieldRef.current?.contains(event.target)) event.preventDefault();
         },
-        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({
+        children: /* @__PURE__ */ jsx30("div", { role: hasError ? void 0 : "listbox", className: cn("max-h-60 overflow-y-auto", !columns && "flex flex-col gap-0.5"), children: loading ? /* @__PURE__ */ jsx30("p", { className: "py-2 text-center text-sm text-muted-foreground", children: loadingMessage }) : hasError ? /* @__PURE__ */ jsx30("div", { className: "flex justify-center py-2", children: /* @__PURE__ */ jsx30(InlineError, { error, onRetry }) }) : visibleOptions.length === 0 ? /* @__PURE__ */ jsx30("p", { className: "py-2 text-center text-sm text-muted-foreground", children: emptyMessage }) : columns ? renderGridOptions({
           columns,
           options: visibleOptions,
           activeIndex,
@@ -1863,14 +2037,14 @@ function TagCombobox({
             // past its first row. Spacing above a group lives on this wrapper's
             // `pt-1`/`first:pt-0`, not on the header itself -- see `Combobox`'s own
             // identical structure for why both of these matter.
-            /* @__PURE__ */ jsxs13("div", { className: "flex flex-col gap-0.5 pt-1 first:pt-0", children: [
-              /* @__PURE__ */ jsxs13(
+            /* @__PURE__ */ jsxs14("div", { className: "flex flex-col gap-0.5 pt-1 first:pt-0", children: [
+              /* @__PURE__ */ jsxs14(
                 "div",
                 {
                   "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__ */ jsx29(
+                    /* @__PURE__ */ jsx30(
                       "input",
                       {
                         type: "checkbox",
@@ -1884,7 +2058,7 @@ function TagCombobox({
                         "aria-label": `Select all of ${groupLabel(chunk.group)}`
                       }
                     ),
-                    /* @__PURE__ */ jsx29("span", { className: "truncate", children: groupLabel(chunk.group) })
+                    /* @__PURE__ */ jsx30("span", { className: "truncate", children: groupLabel(chunk.group) })
                   ]
                 }
               ),
@@ -1898,8 +2072,13 @@ function TagCombobox({
 }
 
 // src/patterns/alert-box/AlertBox.tsx
-import { AlertCircle, AlertTriangle, CheckCircle2, Info } from "lucide-react";
-import { jsx as jsx30, jsxs as jsxs14 } from "react/jsx-runtime";
+import {
+  CheckCircleIcon,
+  ExclamationCircleIcon,
+  ExclamationTriangleIcon as ExclamationTriangleIcon2,
+  InformationCircleIcon
+} from "@heroicons/react/24/outline";
+import { jsx as jsx31, jsxs as jsxs15 } 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",
@@ -1907,24 +2086,24 @@ var variantStyles = {
   success: "border-emerald-500 bg-emerald-500/10 text-emerald-700 dark:text-emerald-300"
 };
 var defaultIcons = {
-  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" })
+  error: /* @__PURE__ */ jsx31(ExclamationCircleIcon, { className: "h-4 w-4 shrink-0", "aria-hidden": "true" }),
+  warning: /* @__PURE__ */ jsx31(ExclamationTriangleIcon2, { className: "h-4 w-4 shrink-0", "aria-hidden": "true" }),
+  info: /* @__PURE__ */ jsx31(InformationCircleIcon, { className: "h-4 w-4 shrink-0", "aria-hidden": "true" }),
+  success: /* @__PURE__ */ jsx31(CheckCircleIcon, { 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__ */ 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__ */ jsx30("p", { className: "font-bold", children: title }),
-      /* @__PURE__ */ jsx30("div", { children })
+  return /* @__PURE__ */ jsx31("div", { className: cn("rounded-md border p-3 text-sm", variantStyles[variant], className), children: /* @__PURE__ */ jsxs15("div", { className: "flex flex-row items-start gap-2", children: [
+    resolvedIcon != null && /* @__PURE__ */ jsx31("span", { className: "mt-0.5 shrink-0", children: resolvedIcon }),
+    /* @__PURE__ */ jsxs15("div", { className: "flex flex-col gap-1", children: [
+      title && /* @__PURE__ */ jsx31("p", { className: "font-bold", children: title }),
+      /* @__PURE__ */ jsx31("div", { children })
     ] })
   ] }) });
 };
 
 // src/patterns/status-badge/StatusBadge.tsx
-import { jsx as jsx31 } from "react/jsx-runtime";
+import { jsx as jsx32 } 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",
@@ -1971,11 +2150,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__ */ jsx31(Badge, { variant: "outline", className: cn(TONE_CLASSES[resolvedTone], className), ...props, children: displayLabel });
+  return /* @__PURE__ */ jsx32(Badge, { variant: "outline", className: cn(TONE_CLASSES[resolvedTone], className), ...props, children: displayLabel });
 };
 
 // src/patterns/button-group/ButtonGroup.tsx
-import { jsx as jsx32, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs16 } from "react/jsx-runtime";
 function ButtonGroup({
   options,
   value,
@@ -1985,10 +2164,10 @@ function ButtonGroup({
   className,
   ...props
 }) {
-  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) => {
+  return /* @__PURE__ */ jsx33("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(
+    return /* @__PURE__ */ jsxs16(
       Button,
       {
         type: "button",
@@ -2006,7 +2185,7 @@ function ButtonGroup({
           index > 0 && "-ml-px"
         ),
         children: [
-          Icon2 && /* @__PURE__ */ jsx32(Icon2, { className: "h-4 w-4" }),
+          Icon2 && /* @__PURE__ */ jsx33(Icon2, { className: "h-4 w-4" }),
           option.label
         ]
       },
@@ -2017,8 +2196,8 @@ function ButtonGroup({
 
 // src/patterns/loading-spinner/LoadingSpinner.tsx
 import { cva as cva4 } from "class-variance-authority";
-import { Loader2 } from "lucide-react";
-import { jsx as jsx33, jsxs as jsxs16 } from "react/jsx-runtime";
+import { ArrowPathIcon as ArrowPathIcon2 } from "@heroicons/react/24/outline";
+import { jsx as jsx34, jsxs as jsxs17 } from "react/jsx-runtime";
 var loadingSpinnerIconVariants = cva4("animate-spin text-muted-foreground", {
   variants: {
     size: {
@@ -2036,75 +2215,167 @@ var LoadingSpinner = ({
   label,
   className,
   ...props
-}) => /* @__PURE__ */ jsxs16("span", { role: "status", className: cn("inline-flex items-center gap-2", className), ...props, children: [
-  /* @__PURE__ */ jsx33(Loader2, { className: cn(loadingSpinnerIconVariants({ size })), "aria-hidden": "true" }),
-  label ? /* @__PURE__ */ jsx33("span", { children: label }) : null
+}) => /* @__PURE__ */ jsxs17("span", { role: "status", className: cn("inline-flex items-center gap-2", className), ...props, children: [
+  /* @__PURE__ */ jsx34(ArrowPathIcon2, { className: cn(loadingSpinnerIconVariants({ size })), "aria-hidden": "true" }),
+  label ? /* @__PURE__ */ jsx34("span", { children: label }) : null
 ] });
 var LoadingOverlay = ({
   size = "lg",
   label,
   className,
   ...props
-}) => /* @__PURE__ */ jsx33(
+}) => /* @__PURE__ */ jsx34(
   "div",
   {
     className: cn("flex h-full min-h-32 w-full items-center justify-center", className),
     ...props,
-    children: /* @__PURE__ */ jsx33(LoadingSpinner, { size, label })
+    children: /* @__PURE__ */ jsx34(LoadingSpinner, { size, label })
   }
 );
 
+// src/patterns/loading-spinner/LoadingState.tsx
+import { useEffect as useEffect5, useState as useState10 } from "react";
+import { jsx as jsx35, jsxs as jsxs18 } from "react/jsx-runtime";
+function useDelayedFlag(active, delayMs = 150) {
+  const [shown, setShown] = useState10(false);
+  useEffect5(() => {
+    if (!active) {
+      setShown(false);
+      return;
+    }
+    if (delayMs <= 0) {
+      setShown(true);
+      return;
+    }
+    const timer = setTimeout(() => setShown(true), delayMs);
+    return () => clearTimeout(timer);
+  }, [active, delayMs]);
+  return active && (delayMs <= 0 || shown);
+}
+var LoadingState = ({
+  variant = "skeleton",
+  lines = 3,
+  label = "Loading\u2026",
+  delayMs = 150,
+  className,
+  ...props
+}) => {
+  const visible = useDelayedFlag(true, delayMs);
+  if (variant === "spinner") {
+    return /* @__PURE__ */ jsx35("div", { "data-testid": "loading-state", "aria-busy": "true", className: cn(!visible && "invisible", className), ...props, children: /* @__PURE__ */ jsx35(LoadingOverlay, { label }) });
+  }
+  return /* @__PURE__ */ jsxs18(
+    "div",
+    {
+      role: "status",
+      "aria-busy": "true",
+      "data-testid": "loading-state",
+      className: cn("flex w-full flex-col gap-2 p-1", !visible && "invisible", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx35("span", { className: "sr-only", children: label }),
+        Array.from({ length: lines }, (_, i) => /* @__PURE__ */ jsx35(Skeleton, { "aria-hidden": "true", className: cn("h-4", i === lines - 1 && lines > 1 ? "w-2/3" : "w-full") }, i))
+      ]
+    }
+  );
+};
+var RefreshBar = ({ active, className }) => active ? /* @__PURE__ */ jsx35(
+  "div",
+  {
+    role: "progressbar",
+    "aria-label": "Refreshing",
+    "data-testid": "refresh-bar",
+    className: cn("absolute inset-x-0 top-0 z-30 h-0.5 overflow-hidden bg-muted", className),
+    children: /* @__PURE__ */ jsx35("div", { className: "h-full w-1/3 animate-pulse bg-primary motion-reduce:animate-none" })
+  }
+) : null;
+
+// src/patterns/async-boundary/AsyncBoundary.tsx
+import { Fragment as Fragment3, jsx as jsx36, jsxs as jsxs19 } from "react/jsx-runtime";
+var AsyncBoundary = ({
+  loading = false,
+  error,
+  onRetry,
+  empty = false,
+  emptyContent,
+  loadingContent,
+  hasData,
+  children
+}) => {
+  const failed = toErrorInfo(error) !== void 0;
+  const showData = hasData ?? false;
+  if (loading && !showData) return /* @__PURE__ */ jsx36(Fragment3, { children: loadingContent ?? /* @__PURE__ */ jsx36(LoadingState, {}) });
+  if (failed && !showData) return /* @__PURE__ */ jsx36(ErrorState, { error, onRetry });
+  if (empty && !showData) return /* @__PURE__ */ jsx36(Fragment3, { children: emptyContent ?? null });
+  return /* @__PURE__ */ jsxs19("div", { className: "relative", children: [
+    /* @__PURE__ */ jsx36(RefreshBar, { active: loading }),
+    failed ? /* @__PURE__ */ jsx36(InlineError, { error, onRetry, className: "mb-2" }) : null,
+    children
+  ] });
+};
+
 // src/patterns/search-bar/SearchBar.tsx
-import { Search, X as X5 } from "lucide-react";
-import { jsx as jsx34, jsxs as jsxs17 } from "react/jsx-runtime";
+import { ExclamationTriangleIcon as ExclamationTriangleIcon3, MagnifyingGlassIcon, XMarkIcon as XMarkIcon5 } from "@heroicons/react/24/outline";
+import { jsx as jsx37, jsxs as jsxs20 } from "react/jsx-runtime";
 function SearchBar({
   value,
   onChange,
+  loading,
   isLoading,
+  error,
+  onRetry,
   onClear,
   clearLabel = "Clear search",
   inputRef,
   className,
   ...props
 }) {
+  const busy = loading ?? isLoading;
+  const hasError = toErrorInfo(error) !== void 0;
   const showClear = onClear !== false && value.length > 0;
-  return /* @__PURE__ */ jsxs17("div", { className: cn("relative", className), children: [
-    /* @__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,
-        type: "search",
-        value,
-        onChange: (event) => onChange(event.target.value),
-        className: cn(
-          "h-11 w-full rounded-full border border-input bg-background text-[15px] text-foreground placeholder:text-muted-foreground focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none",
-          // Chromium/Safari render their own native clear (×) control on
-          // type="search" inputs -- left alone, it stacks on top of our own
-          // custom clear button below instead of replacing it.
-          "[&::-webkit-search-cancel-button]:appearance-none [&::-webkit-search-decoration]:appearance-none",
-          showClear ? "pr-11" : "pr-4",
-          "pl-11"
-        ),
-        ...props
-      }
-    ),
-    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__ */ jsx34(X5, { className: "h-4 w-4", "aria-hidden": "true" })
-      }
-    )
+  return /* @__PURE__ */ jsxs20("div", { className, children: [
+    /* @__PURE__ */ jsxs20("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx37("span", { className: "pointer-events-none absolute top-1/2 left-4 -translate-y-1/2 text-muted-foreground", children: busy ? /* @__PURE__ */ jsx37(LoadingSpinner, { size: "sm" }) : hasError ? /* @__PURE__ */ jsx37(ExclamationTriangleIcon3, { className: "h-4 w-4 text-destructive", "aria-hidden": "true" }) : /* @__PURE__ */ jsx37(MagnifyingGlassIcon, { className: "h-4 w-4", "aria-hidden": "true" }) }),
+      /* @__PURE__ */ jsx37(
+        "input",
+        {
+          ref: inputRef,
+          type: "search",
+          "aria-invalid": hasError || void 0,
+          value,
+          onChange: (event) => onChange(event.target.value),
+          className: cn(
+            "h-11 w-full rounded-full border bg-background text-[15px] text-foreground placeholder:text-muted-foreground focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none",
+            // Chromium/Safari render their own native clear (×) control on
+            // type="search" inputs -- left alone, it stacks on top of our own
+            // custom clear button below instead of replacing it.
+            "[&::-webkit-search-cancel-button]:appearance-none [&::-webkit-search-decoration]:appearance-none",
+            hasError ? "border-destructive" : "border-input",
+            showClear ? "pr-11" : "pr-4",
+            "pl-11"
+          ),
+          ...props
+        }
+      ),
+      showClear && /* @__PURE__ */ jsx37(
+        "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__ */ jsx37(XMarkIcon5, { className: "h-4 w-4", "aria-hidden": "true" })
+        }
+      )
+    ] }),
+    hasError && /* @__PURE__ */ jsx37(InlineError, { error, onRetry, className: "mt-1 ml-4" })
   ] });
 }
 
 // src/patterns/kpi-card/KpiCard.tsx
 import { memo } from "react";
-import { Fragment as Fragment3, jsx as jsx35, jsxs as jsxs18 } from "react/jsx-runtime";
+import { ExclamationTriangleIcon as ExclamationTriangleIcon4 } from "@heroicons/react/24/outline";
+import { Fragment as Fragment4, jsx as jsx38, jsxs as jsxs21 } from "react/jsx-runtime";
 var DONUT_COLORS = [
   "var(--chart-1, #3b82f6)",
   "var(--chart-2, #22c55e)",
@@ -2125,13 +2396,13 @@ function DonutChart({
   const radius = (size - thickness) / 2;
   const circumference = 2 * Math.PI * radius;
   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__ */ jsx35("circle", { cx: size / 2, cy: size / 2, r: radius, fill: "none", stroke: "currentColor", className: "text-muted/40", strokeWidth: thickness }),
+  return /* @__PURE__ */ jsxs21("div", { className: "relative inline-flex shrink-0 items-center justify-center", style: { width: size, height: size }, children: [
+    /* @__PURE__ */ jsxs21("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, className: "-rotate-90", children: [
+      /* @__PURE__ */ jsx38("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__ */ jsx35(
+        const el = /* @__PURE__ */ jsx38(
           "circle",
           {
             cx: size / 2,
@@ -2150,9 +2421,9 @@ function DonutChart({
         return el;
       })
     ] }),
-    (centerValue || centerLabel) && /* @__PURE__ */ jsxs18("div", { className: "absolute inset-0 flex flex-col items-center justify-center", children: [
-      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 })
+    (centerValue || centerLabel) && /* @__PURE__ */ jsxs21("div", { className: "absolute inset-0 flex flex-col items-center justify-center", children: [
+      centerValue && /* @__PURE__ */ jsx38("span", { className: "text-base font-black tracking-tight text-foreground tabular-nums", children: centerValue }),
+      centerLabel && /* @__PURE__ */ jsx38("span", { className: "text-[9px] font-medium text-muted-foreground uppercase", children: centerLabel })
     ] })
   ] });
 }
@@ -2164,7 +2435,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__ */ 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" }) });
+  return /* @__PURE__ */ jsx38("svg", { width: W, height: H, viewBox: `0 0 ${W} ${H}`, className: "overflow-visible opacity-70", children: /* @__PURE__ */ jsx38("polyline", { points: pts, fill: "none", stroke: color, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
 }
 function AreaSparkline({ data, color }) {
   if (data.length < 2) return null;
@@ -2178,14 +2449,14 @@ function AreaSparkline({ data, color }) {
   const ys = data.map((v) => H - (v - min) / range * (H - 2 * P) - P);
   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__ */ 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" })
+  return /* @__PURE__ */ jsxs21("svg", { width: W, height: H, viewBox: `0 0 ${W} ${H}`, className: "overflow-visible", preserveAspectRatio: "none", children: [
+    /* @__PURE__ */ jsx38("defs", { children: /* @__PURE__ */ jsxs21("linearGradient", { id: "kpi-card-spark-fill", x1: "0", y1: "0", x2: "0", y2: "1", children: [
+      /* @__PURE__ */ jsx38("stop", { offset: "0%", stopColor: color, stopOpacity: "0.22" }),
+      /* @__PURE__ */ jsx38("stop", { offset: "100%", stopColor: color, stopOpacity: "0" })
     ] }) }),
-    /* @__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 })
+    /* @__PURE__ */ jsx38("path", { d: areaPath, fill: "url(#kpi-card-spark-fill)" }),
+    /* @__PURE__ */ jsx38("polyline", { points: linePts, fill: "none", stroke: color, strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round" }),
+    /* @__PURE__ */ jsx38("circle", { cx: xs[xs.length - 1], cy: ys[ys.length - 1], r: "2.5", fill: color })
   ] });
 }
 var rowBetween = "flex items-center justify-between";
@@ -2197,6 +2468,8 @@ var KpiCard = memo(function KpiCard2({
   badgeLabel,
   variant = "default",
   loading = false,
+  error,
+  onRetry,
   sub,
   subTone = "default",
   href,
@@ -2209,9 +2482,33 @@ var KpiCard = memo(function KpiCard2({
   background,
   testId
 }) {
+  const errorInfo = loading ? void 0 : toErrorInfo(error);
+  if (errorInfo) {
+    const hero = variant === "hero";
+    return /* @__PURE__ */ jsxs21(
+      "div",
+      {
+        "data-testid": testId,
+        role: "status",
+        className: cn(
+          "flex min-w-0 flex-col gap-1 rounded-2xl border border-destructive/40 bg-card p-3",
+          hero && "col-span-2 flex-1 lg:col-span-1 lg:max-w-[340px] lg:min-w-[260px]"
+        ),
+        children: [
+          /* @__PURE__ */ jsx38("p", { className: "text-[11px] font-bold tracking-[0.14em] text-muted-foreground uppercase", children: label }),
+          /* @__PURE__ */ jsxs21("p", { className: "flex items-center gap-1.5 text-xl font-bold text-muted-foreground", children: [
+            "\u2014",
+            /* @__PURE__ */ jsx38(ExclamationTriangleIcon4, { className: "h-4 w-4 text-destructive", "aria-hidden": "true" })
+          ] }),
+          /* @__PURE__ */ jsx38("p", { className: "truncate text-xs text-red-700 dark:text-red-300", children: errorInfo.message ?? errorInfo.title ?? "Failed to load" }),
+          onRetry ? /* @__PURE__ */ jsx38("button", { type: "button", onClick: onRetry, className: "self-start text-xs text-red-700 underline underline-offset-2 dark:text-red-300", children: "Retry" }) : null
+        ]
+      }
+    );
+  }
   const bgStyle = background ? { background } : void 0;
   if (variant === "hero") {
-    return /* @__PURE__ */ jsxs18(
+    return /* @__PURE__ */ jsxs21(
       "div",
       {
         "data-testid": testId,
@@ -2221,13 +2518,13 @@ var KpiCard = memo(function KpiCard2({
           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__ */ 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__ */ jsxs21("div", { className: "relative flex items-start justify-between", children: [
+            /* @__PURE__ */ jsx38("p", { className: "text-[11px] font-bold tracking-[0.14em] text-white/70 uppercase", children: label }),
+            Icon2 && /* @__PURE__ */ jsx38("div", { className: "flex h-6 w-6 items-center justify-center rounded-lg bg-white/15 ring-1 ring-white/20", children: /* @__PURE__ */ jsx38(Icon2, { className: "h-3 w-3 text-white/90", "aria-hidden": "true" }) })
           ] }),
-          /* @__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__ */ jsx35(
+          /* @__PURE__ */ jsx38("div", { className: "relative", children: loading ? /* @__PURE__ */ jsx38("div", { className: "h-6 w-28 animate-pulse rounded-lg bg-white/15" }) : /* @__PURE__ */ jsx38("p", { className: "text-2xl leading-none font-black tracking-tight text-white tabular-nums md:text-[22px]", children: value ?? "\u2014" }) }),
+          (badge || badgeLabel) && !loading && /* @__PURE__ */ jsxs21("div", { className: "relative flex items-center gap-2", children: [
+            badge && /* @__PURE__ */ jsx38(
               "span",
               {
                 className: cn(
@@ -2237,28 +2534,28 @@ var KpiCard = memo(function KpiCard2({
                 children: badge.text
               }
             ),
-            badgeLabel && /* @__PURE__ */ jsx35("span", { className: "text-[11px] text-white/70", children: badgeLabel })
+            badgeLabel && /* @__PURE__ */ jsx38("span", { className: "text-[11px] text-white/70", children: badgeLabel })
           ] }),
-          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__ */ 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 })
+          sub && !loading && /* @__PURE__ */ jsx38("p", { className: "relative -mt-1 text-[11px] font-medium text-white/75 tabular-nums", children: sub }),
+          progress != null && !loading && /* @__PURE__ */ jsxs21("div", { className: "relative flex items-center gap-1.5", children: [
+            /* @__PURE__ */ jsx38("div", { className: "h-1 flex-1 overflow-hidden rounded-full bg-white/20", children: /* @__PURE__ */ jsx38("div", { className: "h-1 rounded-full bg-white/85", style: { width: `${Math.min(100, Math.max(0, progress))}%` } }) }),
+            progressLabel && /* @__PURE__ */ jsx38("span", { className: "shrink-0 text-[11px] font-semibold text-white/80 tabular-nums", children: progressLabel })
           ] }),
-          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" }) })
+          sparkline && sparkline.length > 1 && !loading && /* @__PURE__ */ jsx38("div", { className: "relative -mx-4 mt-auto -mb-4 md:-mx-3 md:-mb-3", children: /* @__PURE__ */ jsx38(AreaSparkline, { data: sparkline, color: "#ffffff" }) })
         ]
       }
     );
   }
   if (variant === "mini") {
-    const iconSlot = Icon2 ? href ? /* @__PURE__ */ jsx35(
+    const iconSlot = Icon2 ? href ? /* @__PURE__ */ jsx38(
       "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__ */ jsx35(Icon2, { className: "h-4 w-4 md:h-3.5 md:w-3.5", "aria-hidden": "true" })
+        children: /* @__PURE__ */ jsx38(Icon2, { className: "h-4 w-4 md:h-3.5 md:w-3.5", "aria-hidden": "true" })
       }
-    ) : /* @__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(
+    ) : /* @__PURE__ */ jsx38("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__ */ jsx38(Icon2, { className: "h-4 w-4 md:h-3.5 md:w-3.5", "aria-hidden": "true" }) }) : null;
+    return /* @__PURE__ */ jsxs21(
       "div",
       {
         "data-testid": testId,
@@ -2268,13 +2565,13 @@ var KpiCard = memo(function KpiCard2({
           href && "hover:border-primary/20 hover:shadow-md"
         ),
         children: [
-          /* @__PURE__ */ jsxs18("div", { className: rowBetween, children: [
-            /* @__PURE__ */ jsx35("p", { className: "text-[11px] font-bold tracking-[0.12em] text-muted-foreground uppercase", children: label }),
+          /* @__PURE__ */ jsxs21("div", { className: rowBetween, children: [
+            /* @__PURE__ */ jsx38("p", { className: "text-[11px] font-bold tracking-[0.12em] text-muted-foreground uppercase", children: label }),
             iconSlot
           ] }),
-          /* @__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(
+          /* @__PURE__ */ jsx38("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: loading ? /* @__PURE__ */ jsx38(Skeleton, { className: "h-6 w-16" }) : /* @__PURE__ */ jsxs21(Fragment4, { children: [
+            /* @__PURE__ */ jsx38("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__ */ jsx38(
               "span",
               {
                 className: cn(
@@ -2285,8 +2582,8 @@ var KpiCard = memo(function KpiCard2({
               }
             )
           ] }) }),
-          (sub || sparkline) && !loading && /* @__PURE__ */ jsxs18("div", { className: "flex items-end justify-between gap-2", children: [
-            sub && /* @__PURE__ */ jsx35(
+          (sub || sparkline) && !loading && /* @__PURE__ */ jsxs21("div", { className: "flex items-end justify-between gap-2", children: [
+            sub && /* @__PURE__ */ jsx38(
               "p",
               {
                 className: cn(
@@ -2296,7 +2593,7 @@ var KpiCard = memo(function KpiCard2({
                 children: sub
               }
             ),
-            sparkline && /* @__PURE__ */ jsx35(Sparkline, { data: sparkline, color: sparklineColor })
+            sparkline && /* @__PURE__ */ jsx38(Sparkline, { data: sparkline, color: sparklineColor })
           ] })
         ]
       }
@@ -2304,22 +2601,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, style: bgStyle, className: "rounded-xl border border-border bg-card p-5", children: [
-      /* @__PURE__ */ jsxs18("div", { className: rowBetween, children: [
-        /* @__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" }) })
+    return /* @__PURE__ */ jsxs21("div", { "data-testid": testId, style: bgStyle, className: "rounded-xl border border-border bg-card p-5", children: [
+      /* @__PURE__ */ jsxs21("div", { className: rowBetween, children: [
+        /* @__PURE__ */ jsx38("p", { className: "text-[11px] font-bold tracking-[0.12em] text-muted-foreground uppercase", children: label }),
+        Icon2 && /* @__PURE__ */ jsx38("div", { className: "flex h-7 w-7 shrink-0 items-center justify-center rounded-xl bg-primary/8 text-primary", children: /* @__PURE__ */ jsx38(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__ */ jsx35(Skeleton, { className: "h-24 w-24 shrink-0 rounded-full" }),
-        /* @__PURE__ */ jsxs18("div", { className: "flex flex-1 flex-col gap-2", children: [
-          /* @__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" })
+      loading ? /* @__PURE__ */ jsxs21("div", { className: "mt-3 flex items-center gap-4", children: [
+        /* @__PURE__ */ jsx38(Skeleton, { className: "h-24 w-24 shrink-0 rounded-full" }),
+        /* @__PURE__ */ jsxs21("div", { className: "flex flex-1 flex-col gap-2", children: [
+          /* @__PURE__ */ jsx38(Skeleton, { className: "h-3 w-full" }),
+          /* @__PURE__ */ jsx38(Skeleton, { className: "h-3 w-3/4" }),
+          /* @__PURE__ */ jsx38(Skeleton, { className: "h-3 w-1/2" })
         ] })
-      ] }) : segments && segments.length > 0 ? /* @__PURE__ */ jsxs18("div", { className: "mt-3 flex items-center gap-4", children: [
-        /* @__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(
+      ] }) : segments && segments.length > 0 ? /* @__PURE__ */ jsxs21("div", { className: "mt-3 flex items-center gap-4", children: [
+        /* @__PURE__ */ jsx38(DonutChart, { data: segments, centerValue: centerValue ?? String(total) }),
+        /* @__PURE__ */ jsx38("ul", { className: "flex min-w-0 flex-1 flex-col gap-1.5", children: segments.map((segment, i) => /* @__PURE__ */ jsxs21("li", { className: "flex items-center gap-2 text-[12px]", children: [
+          /* @__PURE__ */ jsx38(
             "span",
             {
               className: "h-2 w-2 shrink-0 rounded-full",
@@ -2327,11 +2624,11 @@ var KpiCard = memo(function KpiCard2({
               "aria-hidden": "true"
             }
           ),
-          /* @__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 })
+          /* @__PURE__ */ jsx38("span", { className: "min-w-0 flex-1 truncate text-muted-foreground", children: segment.label }),
+          /* @__PURE__ */ jsx38("span", { className: "shrink-0 font-semibold text-foreground tabular-nums", children: total > 0 ? `${Math.round(segment.value / total * 100)}%` : segment.value })
         ] }, segment.label)) })
-      ] }) : /* @__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 })
+      ] }) : /* @__PURE__ */ jsx38("span", { className: "mt-3 block text-2xl font-black text-muted-foreground/40", children: "\u2014" }),
+      sub && !loading && /* @__PURE__ */ jsx38("p", { className: "mt-2.5 text-[11px] text-muted-foreground tabular-nums", children: sub })
     ] });
   }
   const strValue = value != null ? String(value) : null;
@@ -2341,28 +2638,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, style: bgStyle, className: "rounded-xl border border-border bg-card p-5", children: [
-    /* @__PURE__ */ jsxs18("div", { className: rowBetween, children: [
-      /* @__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" }) })
+  return /* @__PURE__ */ jsxs21("div", { "data-testid": testId, style: bgStyle, className: "rounded-xl border border-border bg-card p-5", children: [
+    /* @__PURE__ */ jsxs21("div", { className: rowBetween, children: [
+      /* @__PURE__ */ jsx38("p", { className: "text-[11px] font-bold tracking-[0.12em] text-muted-foreground uppercase", children: label }),
+      Icon2 && /* @__PURE__ */ jsx38("div", { className: "flex h-7 w-7 shrink-0 items-center justify-center rounded-xl bg-primary/8 text-primary", children: /* @__PURE__ */ jsx38(Icon2, { className: "h-3.5 w-3.5", "aria-hidden": "true" }) })
     ] }),
-    /* @__PURE__ */ jsxs18("div", { className: "mt-3", 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: [
+    /* @__PURE__ */ jsxs21("div", { className: "mt-3", children: [
+      loading ? /* @__PURE__ */ jsx38(Skeleton, { className: "h-7 w-20" }) : value == null ? /* @__PURE__ */ jsx38("span", { className: "text-2xl font-black text-muted-foreground/40", children: "\u2014" }) : plain ? /* @__PURE__ */ jsx38("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__ */ jsxs21("span", { className: "animate-in font-black tracking-tight text-foreground duration-200 fade-in-0 tabular-nums motion-reduce:animate-none", children: [
+        prefix && /* @__PURE__ */ jsxs21("span", { className: "text-sm text-muted-foreground", children: [
           prefix,
           " "
         ] }),
-        /* @__PURE__ */ jsx35("span", { className: "text-2xl", children: number }),
-        suffix && /* @__PURE__ */ jsxs18("span", { className: "text-sm text-muted-foreground", children: [
+        /* @__PURE__ */ jsx38("span", { className: "text-2xl", children: number }),
+        suffix && /* @__PURE__ */ jsxs21("span", { className: "text-sm text-muted-foreground", children: [
           " ",
           suffix
         ] })
       ] }),
-      sub && !loading && /* @__PURE__ */ jsx35("p", { className: "mt-0.5 text-[11px] text-muted-foreground tabular-nums", children: sub })
+      sub && !loading && /* @__PURE__ */ jsx38("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__ */ jsx35(
+    (badge || badgeLabel || sparkline) && !loading && /* @__PURE__ */ jsxs21("div", { className: "mt-2.5 flex items-end justify-between gap-2", children: [
+      /* @__PURE__ */ jsxs21("div", { className: "flex flex-wrap items-center gap-2", children: [
+        badge && /* @__PURE__ */ jsx38(
           "span",
           {
             className: cn(
@@ -2372,20 +2669,23 @@ var KpiCard = memo(function KpiCard2({
             children: badge.text
           }
         ),
-        badgeLabel && /* @__PURE__ */ jsx35("span", { className: "text-[11px] text-muted-foreground", children: badgeLabel })
+        badgeLabel && /* @__PURE__ */ jsx38("span", { className: "text-[11px] text-muted-foreground", children: badgeLabel })
       ] }),
-      sparkline && /* @__PURE__ */ jsx35(Sparkline, { data: sparkline, color: sparklineColor })
+      sparkline && /* @__PURE__ */ jsx38(Sparkline, { data: sparkline, color: sparklineColor })
     ] })
   ] });
 });
 
 // src/patterns/search-panel/SearchPanel.tsx
-import { Search as Search2 } from "lucide-react";
-import { jsx as jsx36, jsxs as jsxs19 } from "react/jsx-runtime";
+import { ExclamationTriangleIcon as ExclamationTriangleIcon5, MagnifyingGlassIcon as MagnifyingGlassIcon2 } from "@heroicons/react/24/outline";
+import { jsx as jsx39, jsxs as jsxs22 } from "react/jsx-runtime";
 function SearchPanel({
   value,
   onChange,
+  loading,
   isLoading,
+  error,
+  onRetry,
   trailingSlot,
   shortcutHint,
   modes,
@@ -2396,7 +2696,9 @@ function SearchPanel({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs19(
+  const busy = loading ?? isLoading;
+  const hasError = toErrorInfo(error) !== void 0;
+  return /* @__PURE__ */ jsxs22(
     "div",
     {
       className: cn(
@@ -2405,9 +2707,9 @@ function SearchPanel({
         className
       ),
       children: [
-        /* @__PURE__ */ jsxs19("div", { className: "flex h-14 items-center gap-3 px-4", children: [
-          isLoading ? /* @__PURE__ */ jsx36(LoadingSpinner, { size: "sm" }) : /* @__PURE__ */ jsx36(Search2, { className: "h-5 w-5 shrink-0 text-muted-foreground", "aria-hidden": "true" }),
-          /* @__PURE__ */ jsx36(
+        /* @__PURE__ */ jsxs22("div", { className: "flex h-14 items-center gap-3 px-4", children: [
+          busy ? /* @__PURE__ */ jsx39(LoadingSpinner, { size: "sm" }) : hasError ? /* @__PURE__ */ jsx39(ExclamationTriangleIcon5, { className: "h-5 w-5 shrink-0 text-destructive", "aria-hidden": "true" }) : /* @__PURE__ */ jsx39(MagnifyingGlassIcon2, { className: "h-5 w-5 shrink-0 text-muted-foreground", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx39(
             "input",
             {
               ref: inputRef,
@@ -2419,7 +2721,7 @@ function SearchPanel({
             }
           ),
           trailingSlot,
-          shortcutHint && /* @__PURE__ */ jsx36(
+          shortcutHint && /* @__PURE__ */ jsx39(
             "kbd",
             {
               "aria-hidden": "true",
@@ -2428,7 +2730,8 @@ function SearchPanel({
             }
           )
         ] }),
-        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(
+        hasError && /* @__PURE__ */ jsx39("div", { className: "px-4 pb-3", children: /* @__PURE__ */ jsx39(InlineError, { error, onRetry }) }),
+        modes && modes.length > 0 && /* @__PURE__ */ jsx39("div", { className: "flex items-center gap-2 px-4 pb-3", children: modes.map(({ key, label, icon: Icon2 }) => /* @__PURE__ */ jsxs22(
           "button",
           {
             type: "button",
@@ -2438,7 +2741,7 @@ function SearchPanel({
               activeMode === key ? "bg-primary text-primary-foreground" : "text-muted-foreground hover:bg-muted"
             ),
             children: [
-              Icon2 && /* @__PURE__ */ jsx36(Icon2, { className: "h-3.5 w-3.5", "aria-hidden": "true" }),
+              Icon2 && /* @__PURE__ */ jsx39(Icon2, { className: "h-3.5 w-3.5", "aria-hidden": "true" }),
               label
             ]
           },
@@ -2450,10 +2753,10 @@ function SearchPanel({
 }
 
 // src/patterns/search-panel/SearchTrigger.tsx
-import { Search as Search3 } from "lucide-react";
-import { jsx as jsx37 } from "react/jsx-runtime";
+import { MagnifyingGlassIcon as MagnifyingGlassIcon3 } from "@heroicons/react/24/outline";
+import { jsx as jsx40 } from "react/jsx-runtime";
 function SearchTrigger({ label = "Search", ...props }) {
-  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" }) });
+  return /* @__PURE__ */ jsx40(Button, { type: "button", variant: "ghost", size: "icon", "aria-label": label, ...props, children: /* @__PURE__ */ jsx40(MagnifyingGlassIcon3, { className: "h-[18px] w-[18px]", "aria-hidden": "true" }) });
 }
 
 // src/patterns/sidebar/context.ts
@@ -2465,7 +2768,7 @@ function useSidebarCollapsed() {
 }
 
 // src/patterns/sidebar/NavItem.tsx
-import { jsx as jsx38, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx41, jsxs as jsxs23 } from "react/jsx-runtime";
 function NavItem({
   as,
   icon: Icon2,
@@ -2477,7 +2780,7 @@ function NavItem({
 }) {
   const collapsed = useSidebarCollapsed();
   const Comp = as ?? "a";
-  const row = /* @__PURE__ */ jsxs20(
+  const row = /* @__PURE__ */ jsxs23(
     Comp,
     {
       className: cn(
@@ -2489,7 +2792,7 @@ function NavItem({
       ),
       ...rest,
       children: [
-        Icon2 && /* @__PURE__ */ jsx38(
+        Icon2 && /* @__PURE__ */ jsx41(
           Icon2,
           {
             className: cn("h-[18px] w-[18px] shrink-0", active ? "text-nav-primary" : "text-muted-foreground"),
@@ -2497,7 +2800,7 @@ function NavItem({
             "aria-hidden": true
           }
         ),
-        /* @__PURE__ */ jsx38(
+        /* @__PURE__ */ jsx41(
           "span",
           {
             className: cn(
@@ -2512,9 +2815,9 @@ function NavItem({
     }
   );
   if (!collapsed) return row;
-  return /* @__PURE__ */ jsxs20(Tooltip, { children: [
-    /* @__PURE__ */ jsx38(TooltipTrigger, { asChild: true, children: row }),
-    /* @__PURE__ */ jsxs20(TooltipContent, { side: "right", className: "flex items-center gap-1.5", children: [
+  return /* @__PURE__ */ jsxs23(Tooltip, { children: [
+    /* @__PURE__ */ jsx41(TooltipTrigger, { asChild: true, children: row }),
+    /* @__PURE__ */ jsxs23(TooltipContent, { side: "right", className: "flex items-center gap-1.5", children: [
       label,
       badge
     ] })
@@ -2522,9 +2825,9 @@ function NavItem({
 }
 
 // src/patterns/sidebar/NavGroup.tsx
-import { ChevronDown as ChevronDown2 } from "lucide-react";
-import { useState as useState10 } from "react";
-import { jsx as jsx39, jsxs as jsxs21 } from "react/jsx-runtime";
+import { ChevronDownIcon as ChevronDownIcon2 } from "@heroicons/react/24/outline";
+import { useState as useState11 } from "react";
+import { jsx as jsx42, jsxs as jsxs24 } from "react/jsx-runtime";
 function NavGroup({
   label,
   defaultCollapsed = false,
@@ -2533,15 +2836,15 @@ function NavGroup({
   children,
   className
 }) {
-  const [internalCollapsed, setInternalCollapsed] = useState10(defaultCollapsed);
+  const [internalCollapsed, setInternalCollapsed] = useState11(defaultCollapsed);
   const groupCollapsed = collapsed ?? internalCollapsed;
   const railCollapsed = useSidebarCollapsed();
   const setGroupCollapsed = (next) => {
     onCollapsedChange?.(next);
     if (collapsed === void 0) setInternalCollapsed(next);
   };
-  return /* @__PURE__ */ jsxs21("div", { className: cn("flex flex-col gap-0.5", className), children: [
-    label && (railCollapsed ? /* @__PURE__ */ jsx39("div", { className: "mx-2 my-1 h-px bg-border/50", "aria-hidden": true }) : /* @__PURE__ */ jsxs21(
+  return /* @__PURE__ */ jsxs24("div", { className: cn("flex flex-col gap-0.5", className), children: [
+    label && (railCollapsed ? /* @__PURE__ */ jsx42("div", { className: "mx-2 my-1 h-px bg-border/50", "aria-hidden": true }) : /* @__PURE__ */ jsxs24(
       "button",
       {
         type: "button",
@@ -2549,9 +2852,9 @@ 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__ */ jsx39("span", { children: label }),
-          /* @__PURE__ */ jsx39(
-            ChevronDown2,
+          /* @__PURE__ */ jsx42("span", { children: label }),
+          /* @__PURE__ */ jsx42(
+            ChevronDownIcon2,
             {
               className: cn(
                 "h-4 w-4 opacity-40 transition-transform group-hover:opacity-100",
@@ -2563,19 +2866,19 @@ function NavGroup({
         ]
       }
     )),
-    !groupCollapsed && /* @__PURE__ */ jsx39("div", { className: "flex flex-col gap-0.5", children })
+    !groupCollapsed && /* @__PURE__ */ jsx42("div", { className: "flex flex-col gap-0.5", children })
   ] });
 }
 
 // src/patterns/sidebar/Sidebar.tsx
-import { PanelLeftClose, PanelLeftOpen } from "lucide-react";
+import { ChevronDoubleLeftIcon, ChevronDoubleRightIcon } from "@heroicons/react/24/outline";
 import {
-  useCallback,
-  useEffect as useEffect5,
-  useRef as useRef5,
-  useState as useState11
+  useCallback as useCallback2,
+  useEffect as useEffect6,
+  useRef as useRef6,
+  useState as useState12
 } from "react";
-import { Fragment as Fragment4, jsx as jsx40, jsxs as jsxs22 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx43, jsxs as jsxs25 } from "react/jsx-runtime";
 function resolve(value, collapsed) {
   return typeof value === "function" ? value(collapsed) : value;
 }
@@ -2594,10 +2897,10 @@ function Sidebar({
   children,
   className
 }) {
-  const [internalWidth, setInternalWidth] = useState11(defaultWidth);
+  const [internalWidth, setInternalWidth] = useState12(defaultWidth);
   const currentWidth = width ?? internalWidth;
-  const [isDragging, setIsDragging] = useState11(false);
-  const setWidth = useCallback(
+  const [isDragging, setIsDragging] = useState12(false);
+  const setWidth = useCallback2(
     (next) => {
       const clamped = Math.min(maxWidth, Math.max(minWidth, next));
       onWidthChange?.(clamped);
@@ -2605,7 +2908,7 @@ function Sidebar({
     },
     [maxWidth, minWidth, onWidthChange, width]
   );
-  const dragStartRef = useRef5(null);
+  const dragStartRef = useRef6(null);
   const handlePointerDown = (event) => {
     event.currentTarget.setPointerCapture(event.pointerId);
     dragStartRef.current = { x: event.clientX, width: currentWidth };
@@ -2622,7 +2925,7 @@ function Sidebar({
     dragStartRef.current = null;
     setIsDragging(false);
   };
-  return /* @__PURE__ */ jsx40(SidebarContextProvider, { value: { collapsed }, children: /* @__PURE__ */ jsx40(TooltipProvider, { delayDuration: 200, children: /* @__PURE__ */ jsxs22(
+  return /* @__PURE__ */ jsx43(SidebarContextProvider, { value: { collapsed }, children: /* @__PURE__ */ jsx43(TooltipProvider, { delayDuration: 200, children: /* @__PURE__ */ jsxs25(
     "aside",
     {
       style: { width: collapsed ? railWidth : currentWidth },
@@ -2632,13 +2935,13 @@ function Sidebar({
         className
       ),
       children: [
-        (header || onCollapsedChange) && /* @__PURE__ */ jsx40("div", { className: "flex h-16 items-center gap-2 border-b border-border px-3", children: collapsed && onCollapsedChange ? (
+        (header || onCollapsedChange) && /* @__PURE__ */ jsx43("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
           // by default and cross-fades to the toggle icon on hover, matching
           // the same affordance OneSales' own sidebar rail uses.
-          /* @__PURE__ */ jsxs22(
+          /* @__PURE__ */ jsxs25(
             "button",
             {
               type: "button",
@@ -2646,9 +2949,9 @@ function Sidebar({
               "aria-label": "Expand sidebar",
               className: "group relative flex h-9 w-9 shrink-0 items-center justify-center",
               children: [
-                header && /* @__PURE__ */ jsx40("span", { className: "transition-opacity group-hover:opacity-0", children: resolve(header, collapsed) }),
-                /* @__PURE__ */ jsx40(
-                  PanelLeftOpen,
+                header && /* @__PURE__ */ jsx43("span", { className: "transition-opacity group-hover:opacity-0", children: resolve(header, collapsed) }),
+                /* @__PURE__ */ jsx43(
+                  ChevronDoubleRightIcon,
                   {
                     className: "absolute h-4 w-4 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100",
                     "aria-hidden": true
@@ -2657,22 +2960,22 @@ function Sidebar({
               ]
             }
           )
-        ) : /* @__PURE__ */ jsxs22(Fragment4, { children: [
-          header && /* @__PURE__ */ jsx40("div", { className: "min-w-0 flex-1", children: resolve(header, collapsed) }),
-          onCollapsedChange && /* @__PURE__ */ jsx40(
+        ) : /* @__PURE__ */ jsxs25(Fragment5, { children: [
+          header && /* @__PURE__ */ jsx43("div", { className: "min-w-0 flex-1", children: resolve(header, collapsed) }),
+          onCollapsedChange && /* @__PURE__ */ jsx43(
             "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__ */ jsx40(PanelLeftClose, { className: "h-4 w-4", "aria-hidden": true })
+              children: /* @__PURE__ */ jsx43(ChevronDoubleLeftIcon, { className: "h-4 w-4", "aria-hidden": true })
             }
           )
         ] }) }),
-        /* @__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(
+        /* @__PURE__ */ jsx43(SidebarNav, { children }),
+        footer && /* @__PURE__ */ jsx43("div", { className: "border-t border-border/50 px-2 py-2", children: resolve(footer, collapsed) }),
+        resizable && !collapsed && /* @__PURE__ */ jsx43(
           "div",
           {
             onPointerDown: handlePointerDown,
@@ -2687,9 +2990,9 @@ function Sidebar({
   ) }) });
 }
 function SidebarNav({ children, className, ...rest }) {
-  const ref = useRef5(null);
-  const [showFade, setShowFade] = useState11(false);
-  useEffect5(() => {
+  const ref = useRef6(null);
+  const [showFade, setShowFade] = useState12(false);
+  useEffect6(() => {
     const el = ref.current;
     if (!el) return;
     const update = () => setShowFade(el.scrollHeight - el.scrollTop - el.clientHeight > 1);
@@ -2702,8 +3005,8 @@ function SidebarNav({ children, className, ...rest }) {
       observer.disconnect();
     };
   }, []);
-  return /* @__PURE__ */ jsxs22("div", { className: "relative flex min-h-0 flex-1 flex-col", children: [
-    /* @__PURE__ */ jsx40(
+  return /* @__PURE__ */ jsxs25("div", { className: "relative flex min-h-0 flex-1 flex-col", children: [
+    /* @__PURE__ */ jsx43(
       "div",
       {
         ref,
@@ -2712,7 +3015,7 @@ function SidebarNav({ children, className, ...rest }) {
         children
       }
     ),
-    showFade && /* @__PURE__ */ jsx40(
+    showFade && /* @__PURE__ */ jsx43(
       "div",
       {
         className: "pointer-events-none absolute right-0 bottom-0 left-0 h-6 bg-gradient-to-t from-sidebar to-transparent",
@@ -2723,11 +3026,11 @@ function SidebarNav({ children, className, ...rest }) {
 }
 
 // src/patterns/ai/AiButton.tsx
-import { Sparkles } from "lucide-react";
+import { SparklesIcon } from "@heroicons/react/24/outline";
 import { forwardRef as forwardRef17 } from "react";
-import { jsx as jsx41, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx44, jsxs as jsxs26 } from "react/jsx-runtime";
 var AiButton = forwardRef17(
-  ({ variant = "ai-subtle", loading = false, icon: Icon2 = Sparkles, disabled, children, ...props }, ref) => /* @__PURE__ */ jsxs23(
+  ({ variant = "ai-subtle", loading = false, icon: Icon2 = SparklesIcon, disabled, children, ...props }, ref) => /* @__PURE__ */ jsxs26(
     Button,
     {
       ref,
@@ -2736,7 +3039,7 @@ var AiButton = forwardRef17(
       "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" }),
+        loading ? /* @__PURE__ */ jsx44(LoadingSpinner, { size: "sm", className: "[&_svg]:text-current" }) : /* @__PURE__ */ jsx44(Icon2, { className: "h-4 w-4", "aria-hidden": "true" }),
         children
       ]
     }
@@ -2745,9 +3048,9 @@ var AiButton = forwardRef17(
 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";
+import { SparklesIcon as SparklesIcon2 } from "@heroicons/react/24/outline";
+import { useState as useState13 } from "react";
+import { jsx as jsx45, jsxs as jsxs27 } from "react/jsx-runtime";
 function AiExplainButton({
   onExplain,
   label = "Explain",
@@ -2757,10 +3060,10 @@ function AiExplainButton({
   size = "sm",
   ...props
 }) {
-  const [open, setOpen] = useState12(false);
-  const [loading, setLoading] = useState12(false);
-  const [content, setContent] = useState12(null);
-  const [error, setError] = useState12(null);
+  const [open, setOpen] = useState13(false);
+  const [loading, setLoading] = useState13(false);
+  const [content, setContent] = useState13(null);
+  const [error, setError] = useState13(null);
   const load = async () => {
     setLoading(true);
     setError(null);
@@ -2776,30 +3079,32 @@ function AiExplainButton({
     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" }),
+  return /* @__PURE__ */ jsxs27(Popover, { open, onOpenChange: handleOpenChange, children: [
+    /* @__PURE__ */ jsx45(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx45(AiButton, { size, ...props, children: label }) }),
+    /* @__PURE__ */ jsxs27(PopoverContent, { align, className: contentClassName, children: [
+      /* @__PURE__ */ jsxs27("p", { className: "mb-2 flex items-center gap-1.5 text-sm font-semibold", children: [
+        /* @__PURE__ */ jsx45(SparklesIcon2, { 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 })
+      loading ? /* @__PURE__ */ jsx45(LoadingSpinner, { size: "sm", label: "Thinking\u2026", className: "text-sm text-muted-foreground" }) : error ? /* @__PURE__ */ jsx45(
+        ErrorState,
+        {
+          variant: "compact",
+          error,
+          onRetry: () => void load(),
+          labels: { title: "Something went wrong", retry: "Try again" }
+        }
+      ) : /* @__PURE__ */ jsx45("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 { MicrophoneIcon, SlashIcon } from "@heroicons/react/24/outline";
 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";
+import { useCallback as useCallback3, useEffect as useEffect7, useRef as useRef7, useState as useState14 } from "react";
 function getCtor() {
   if (typeof window === "undefined") return void 0;
   const w = window;
@@ -2832,21 +3137,21 @@ function useSpeechRecognition({
   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);
+  const [listening, setListening] = useState14(false);
+  const [interim, setInterim] = useState14("");
+  const [error, setError] = useState14(null);
+  const recognitionRef = useRef7(null);
+  const onResultRef = useRef7(onResult);
+  const onErrorRef = useRef7(onError);
+  const engineRef = useRef7(engine);
   onResultRef.current = onResult;
   onErrorRef.current = onError;
   engineRef.current = engine;
   const supported = engine !== void 0 || getCtor() !== void 0;
-  const stop = useCallback2(() => {
+  const stop = useCallback3(() => {
     recognitionRef.current?.stop();
   }, []);
-  const start = useCallback2(() => {
+  const start = useCallback3(() => {
     if (recognitionRef.current) return;
     const recognition = engineRef.current ? engineRef.current() : browserEngine();
     if (!recognition) return;
@@ -2879,16 +3184,16 @@ function useSpeechRecognition({
     setListening(true);
     recognition.start();
   }, [lang]);
-  const toggle = useCallback2(() => {
+  const toggle = useCallback3(() => {
     if (recognitionRef.current) stop();
     else start();
   }, [start, stop]);
-  useEffect6(() => () => recognitionRef.current?.abort(), []);
+  useEffect7(() => () => 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";
+import { jsx as jsx46, jsxs as jsxs28 } from "react/jsx-runtime";
 var VoiceInputButton = forwardRef18(
   ({
     onTranscript,
@@ -2914,8 +3219,8 @@ var VoiceInputButton = forwardRef18(
     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(
+      /* @__PURE__ */ jsxs28("span", { className: "inline-flex min-w-0 items-center gap-2", title: supported ? void 0 : unsupportedTitle, children: [
+        /* @__PURE__ */ jsxs28(
           Button,
           {
             ref,
@@ -2932,12 +3237,25 @@ var VoiceInputButton = forwardRef18(
             ),
             ...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" }),
+              supported ? /* @__PURE__ */ jsx46(
+                MicrophoneIcon,
+                {
+                  className: cn("h-4 w-4", listening && "animate-pulse motion-reduce:animate-none"),
+                  "aria-hidden": "true"
+                }
+              ) : (
+                // heroicons has no muted-mic glyph -- MicrophoneIcon plus SlashIcon
+                // (same 24x24 viewBox/stroke) layered on top approximates one.
+                /* @__PURE__ */ jsxs28("span", { className: "relative inline-flex h-4 w-4", "aria-hidden": "true", children: [
+                  /* @__PURE__ */ jsx46(MicrophoneIcon, { className: "h-4 w-4" }),
+                  /* @__PURE__ */ jsx46(SlashIcon, { className: "absolute inset-0 h-4 w-4" })
+                ] })
+              ),
               label
             ]
           }
         ),
-        showInterim && interim ? /* @__PURE__ */ jsx43("span", { "aria-live": "polite", className: "truncate text-sm text-muted-foreground italic", children: interim }) : null
+        showInterim && interim ? /* @__PURE__ */ jsx46("span", { "aria-live": "polite", className: "truncate text-sm text-muted-foreground italic", children: interim }) : null
       ] })
     );
   }
@@ -2945,9 +3263,9 @@ var VoiceInputButton = forwardRef18(
 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";
+import { ArrowUturnLeftIcon, SparklesIcon as SparklesIcon3 } from "@heroicons/react/24/outline";
+import { useState as useState15 } from "react";
+import { jsx as jsx47, jsxs as jsxs29 } from "react/jsx-runtime";
 function VoiceTranscript({
   value,
   onChange,
@@ -2961,9 +3279,9 @@ function VoiceTranscript({
   className,
   ...props
 }) {
-  const [loading, setLoading] = useState14(false);
-  const [error, setError] = useState14(null);
-  const [previous, setPrevious] = useState14(null);
+  const [loading, setLoading] = useState15(false);
+  const [error, setError] = useState15(null);
+  const [previous, setPrevious] = useState15(null);
   const append = (chunk) => {
     onChange(value ? `${value.trimEnd()} ${chunk}` : chunk);
   };
@@ -2987,8 +3305,8 @@ function VoiceTranscript({
     onChange(previous);
     setPrevious(null);
   };
-  return /* @__PURE__ */ jsxs26("div", { className: cn("flex flex-col gap-2", className), ...props, children: [
-    /* @__PURE__ */ jsx44(
+  return /* @__PURE__ */ jsxs29("div", { className: cn("flex flex-col gap-2", className), ...props, children: [
+    /* @__PURE__ */ jsx47(
       Textarea,
       {
         value,
@@ -2999,8 +3317,8 @@ function VoiceTranscript({
         "aria-busy": loading || void 0
       }
     ),
-    /* @__PURE__ */ jsxs26("div", { className: "flex flex-wrap items-center gap-2", children: [
-      /* @__PURE__ */ jsx44(
+    /* @__PURE__ */ jsxs29("div", { className: "flex flex-wrap items-center gap-2", children: [
+      /* @__PURE__ */ jsx47(
         VoiceInputButton,
         {
           onTranscript: append,
@@ -3013,35 +3331,35 @@ function VoiceTranscript({
           disabled: disabled || loading
         }
       ),
-      onTransform ? /* @__PURE__ */ jsx44(
+      onTransform ? /* @__PURE__ */ jsx47(
         AiButton,
         {
           variant: "ai",
           size: "sm",
-          icon: Wand2,
+          icon: SparklesIcon3,
           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" }),
+      previous !== null && !loading ? /* @__PURE__ */ jsxs29(Button, { type: "button", variant: "ghost", size: "sm", onClick: undo, children: [
+        /* @__PURE__ */ jsx47(ArrowUturnLeftIcon, { 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 }) })
+      /* @__PURE__ */ jsx47("div", { role: "alert", children: /* @__PURE__ */ jsx47(AlertBox, { variant: "error", children: error }) })
     ) : null
   ] });
 }
 
 // src/patterns/stepper/Stepper.tsx
-import { useEffect as useEffect7, useRef as useRef7 } from "react";
-import { Check as Check5, Plus } from "lucide-react";
-import { jsx as jsx45, jsxs as jsxs27 } from "react/jsx-runtime";
+import { useEffect as useEffect8, useRef as useRef8 } from "react";
+import { CheckIcon as CheckIcon5, PlusIcon } from "@heroicons/react/24/outline";
+import { jsx as jsx48, jsxs as jsxs30 } from "react/jsx-runtime";
 function Stepper({
   step,
   maxStep,
@@ -3053,8 +3371,8 @@ function Stepper({
   scrollTestId = "stepper-scroll",
   newTestId
 }) {
-  const stepRefs = useRef7(/* @__PURE__ */ new Map());
-  useEffect7(() => {
+  const stepRefs = useRef8(/* @__PURE__ */ new Map());
+  useEffect8(() => {
     const activeStep = stepRefs.current.get(step);
     activeStep?.scrollIntoView({ block: "nearest", inline: "center" });
   }, [step]);
@@ -3062,19 +3380,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__ */ 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(
+    /* @__PURE__ */ jsxs30("div", { className: "flex w-full shrink-0 items-center gap-2", children: [
+      /* @__PURE__ */ jsx48("nav", { "aria-label": navLabel, className: "min-w-0 flex-1", children: /* @__PURE__ */ jsx48(
         "div",
         {
           "data-testid": scrollTestId,
           className: "flex w-full items-center gap-0 overflow-x-auto px-2 py-1",
-          children: /* @__PURE__ */ jsx45("ol", { className: "flex min-w-[700px] flex-1 items-start", children: steps.map(({ n, label, phase }, i) => {
+          children: /* @__PURE__ */ jsx48("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__ */ jsxs27("li", { className: cn("flex items-start", !last && "flex-1"), children: [
-              /* @__PURE__ */ jsxs27(
+            return /* @__PURE__ */ jsxs30("li", { className: cn("flex items-start", !last && "flex-1"), children: [
+              /* @__PURE__ */ jsxs30(
                 "button",
                 {
                   ref: (element) => {
@@ -3090,17 +3408,17 @@ function Stepper({
                     navigable ? "cursor-pointer hover:opacity-80" : "cursor-default"
                   ),
                   children: [
-                    /* @__PURE__ */ jsx45(
+                    /* @__PURE__ */ jsx48(
                       "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__ */ jsx45(Check5, { className: "h-3 w-3" }) : n
+                        children: done ? /* @__PURE__ */ jsx48(CheckIcon5, { className: "h-3 w-3" }) : n
                       }
                     ),
-                    /* @__PURE__ */ jsx45(
+                    /* @__PURE__ */ jsx48(
                       "span",
                       {
                         className: cn(
@@ -3110,11 +3428,11 @@ function Stepper({
                         children: label
                       }
                     ),
-                    /* @__PURE__ */ jsx45("span", { className: "text-[9px] tracking-[0.5px] text-muted-foreground/50 uppercase", children: phase })
+                    /* @__PURE__ */ jsx48("span", { className: "text-[9px] tracking-[0.5px] text-muted-foreground/50 uppercase", children: phase })
                   ]
                 }
               ),
-              !last && /* @__PURE__ */ jsx45(
+              !last && /* @__PURE__ */ jsx48(
                 "div",
                 {
                   className: cn(
@@ -3127,7 +3445,7 @@ function Stepper({
           }) })
         }
       ) }),
-      onNew && /* @__PURE__ */ jsxs27(
+      onNew && /* @__PURE__ */ jsxs30(
         "button",
         {
           "data-testid": newTestId,
@@ -3135,7 +3453,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__ */ jsx45(Plus, { className: "h-3.5 w-3.5" }),
+            /* @__PURE__ */ jsx48(PlusIcon, { className: "h-3.5 w-3.5" }),
             newLabel
           ]
         }
@@ -3147,6 +3465,7 @@ export {
   AiButton,
   AiExplainButton,
   AlertBox,
+  AsyncBoundary,
   Badge,
   Button,
   ButtonGroup,
@@ -3184,13 +3503,16 @@ export {
   DropdownMenuSubContent,
   DropdownMenuSubTrigger,
   DropdownMenuTrigger,
+  ErrorState,
   FormField,
   FormModal,
+  InlineError,
   Input,
   KpiCard,
   Label,
   LoadingOverlay,
   LoadingSpinner,
+  LoadingState,
   Modal,
   NavGroup,
   NavItem,
@@ -3199,6 +3521,7 @@ export {
   PopoverContent,
   PopoverTrigger,
   QuestionDialog,
+  RefreshBar,
   ResponsivePanel,
   ScrollArea,
   ScrollBar,
@@ -3252,11 +3575,14 @@ export {
   badgeVariants,
   buttonVariants,
   cn,
+  defaultErrorStateLabels,
   describeSpeechError,
   getConfirmButtonPlacement,
   isWindowsPlatform,
   loadingSpinnerIconVariants,
   sheetVariants,
+  toErrorInfo,
+  useDelayedFlag,
   useMediaQuery,
   useSidebarCollapsed,
   useSpeechRecognition