@bmsuisse/ui 0.16.2 → 0.18.0

package/dist/index.js

@@ -167,7 +167,7 @@ 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 { 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;
@@ -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" })
             ]
           }
@@ -334,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;
@@ -353,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" }) })
       ]
     }
   )
@@ -384,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 })
     ]
   }
@@ -397,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(
@@ -409,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";
@@ -591,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;
@@ -637,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
     ]
   }
@@ -653,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
     ]
   }
@@ -692,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" })
     ]
   }
 ));
@@ -713,7 +713,7 @@ 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 { 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;
@@ -820,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" })
             ] })
           ]
@@ -1356,9 +1356,104 @@ function FormField({
 }
 
 // src/patterns/combobox/Combobox.tsx
-import { Check as Check4, ChevronsUpDown, X as X3 } from "lucide-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) {
   return options.filter((o) => o.group === group && !o.disabled).map((o) => o.value);
@@ -1386,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,
@@ -1397,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),
@@ -1409,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",
@@ -1436,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",
@@ -1446,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
@@ -1456,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(
@@ -1485,6 +1580,8 @@ function Combobox(props) {
     disabled,
     loading = false,
     loadingMessage = "Loading\u2026",
+    error,
+    onRetry,
     clearable = true,
     className,
     id,
@@ -1495,6 +1592,7 @@ 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);
@@ -1536,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));
@@ -1560,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",
@@ -1576,7 +1675,7 @@ function Combobox(props) {
           isActive && "bg-accent text-accent-foreground"
         ),
         children: [
-          props.multiple ? /* @__PURE__ */ jsx28(
+          props.multiple ? /* @__PURE__ */ jsx29(
             "input",
             {
               type: "checkbox",
@@ -1585,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,
@@ -1602,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",
@@ -1626,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",
@@ -1644,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,
@@ -1659,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,
@@ -1679,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",
@@ -1700,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) })
                     ]
                   }
                 ),
@@ -1715,9 +1816,9 @@ function Combobox(props) {
 }
 
 // src/patterns/tag-combobox/TagCombobox.tsx
-import { X as X4 } from "lucide-react";
+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 jsx29, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx30, jsxs as jsxs14 } from "react/jsx-runtime";
 function TagCombobox({
   options,
   value,
@@ -1727,6 +1828,8 @@ function TagCombobox({
   disabled,
   loading = false,
   loadingMessage = "Loading\u2026",
+  error,
+  onRetry,
   className,
   id,
   onSearchChange,
@@ -1786,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();
@@ -1797,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 === "") {
@@ -1808,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",
@@ -1824,7 +1928,7 @@ function TagCombobox({
           isActive && "bg-accent text-accent-foreground"
         ),
         children: [
-          /* @__PURE__ */ jsx29(
+          /* @__PURE__ */ jsx30(
             "input",
             {
               type: "checkbox",
@@ -1834,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,
@@ -1859,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",
@@ -1875,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,
@@ -1900,7 +2004,7 @@ function TagCombobox({
         ]
       }
     ) }),
-    /* @__PURE__ */ jsx29(
+    /* @__PURE__ */ jsx30(
       PopoverContent,
       {
         align: "start",
@@ -1914,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,
@@ -1933,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",
@@ -1954,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) })
                   ]
                 }
               ),
@@ -1968,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",
@@ -1977,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",
@@ -2041,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,
@@ -2055,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",
@@ -2076,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
         ]
       },
@@ -2087,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: {
@@ -2106,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)",
@@ -2195,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,
@@ -2220,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 })
     ] })
   ] });
 }
@@ -2234,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;
@@ -2248,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";
@@ -2267,6 +2468,8 @@ var KpiCard = memo(function KpiCard2({
   badgeLabel,
   variant = "default",
   loading = false,
+  error,
+  onRetry,
   sub,
   subTone = "default",
   href,
@@ -2279,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,
@@ -2291,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(
@@ -2307,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,
@@ -2338,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(
@@ -2355,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(
@@ -2366,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 })
           ] })
         ]
       }
@@ -2374,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",
@@ -2397,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;
@@ -2411,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(
@@ -2442,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,
@@ -2466,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(
@@ -2475,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,
@@ -2489,7 +2721,7 @@ function SearchPanel({
             }
           ),
           trailingSlot,
-          shortcutHint && /* @__PURE__ */ jsx36(
+          shortcutHint && /* @__PURE__ */ jsx39(
             "kbd",
             {
               "aria-hidden": "true",
@@ -2498,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",
@@ -2508,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
             ]
           },
@@ -2520,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
@@ -2535,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,
@@ -2547,7 +2780,7 @@ function NavItem({
 }) {
   const collapsed = useSidebarCollapsed();
   const Comp = as ?? "a";
-  const row = /* @__PURE__ */ jsxs20(
+  const row = /* @__PURE__ */ jsxs23(
     Comp,
     {
       className: cn(
@@ -2559,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"),
@@ -2567,7 +2800,7 @@ function NavItem({
             "aria-hidden": true
           }
         ),
-        /* @__PURE__ */ jsx38(
+        /* @__PURE__ */ jsx41(
           "span",
           {
             className: cn(
@@ -2582,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
     ] })
@@ -2592,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,
@@ -2603,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",
@@ -2619,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",
@@ -2633,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 as useCallback2,
-  useEffect as useEffect5,
+  useEffect as useEffect6,
   useRef as useRef6,
-  useState as useState11
+  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;
 }
@@ -2664,9 +2897,9 @@ function Sidebar({
   children,
   className
 }) {
-  const [internalWidth, setInternalWidth] = useState11(defaultWidth);
+  const [internalWidth, setInternalWidth] = useState12(defaultWidth);
   const currentWidth = width ?? internalWidth;
-  const [isDragging, setIsDragging] = useState11(false);
+  const [isDragging, setIsDragging] = useState12(false);
   const setWidth = useCallback2(
     (next) => {
       const clamped = Math.min(maxWidth, Math.max(minWidth, next));
@@ -2692,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 },
@@ -2702,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",
@@ -2716,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
@@ -2727,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,
@@ -2758,8 +2991,8 @@ function Sidebar({
 }
 function SidebarNav({ children, className, ...rest }) {
   const ref = useRef6(null);
-  const [showFade, setShowFade] = useState11(false);
-  useEffect5(() => {
+  const [showFade, setShowFade] = useState12(false);
+  useEffect6(() => {
     const el = ref.current;
     if (!el) return;
     const update = () => setShowFade(el.scrollHeight - el.scrollTop - el.clientHeight > 1);
@@ -2772,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,
@@ -2782,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",
@@ -2793,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,
@@ -2806,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
       ]
     }
@@ -2815,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",
@@ -2827,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);
@@ -2846,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 useCallback3, useEffect as useEffect6, useRef as useRef7, 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;
@@ -2902,9 +3137,9 @@ function useSpeechRecognition({
   onError,
   engine
 } = {}) {
-  const [listening, setListening] = useState13(false);
-  const [interim, setInterim] = useState13("");
-  const [error, setError] = useState13(null);
+  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);
@@ -2953,12 +3188,12 @@ function useSpeechRecognition({
     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,
@@ -2984,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,
@@ -3002,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
       ] })
     );
   }
@@ -3015,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,
@@ -3031,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);
   };
@@ -3057,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,
@@ -3069,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,
@@ -3083,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 useRef8 } 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,
@@ -3124,7 +3372,7 @@ function Stepper({
   newTestId
 }) {
   const stepRefs = useRef8(/* @__PURE__ */ new Map());
-  useEffect7(() => {
+  useEffect8(() => {
     const activeStep = stepRefs.current.get(step);
     activeStep?.scrollIntoView({ block: "nearest", inline: "center" });
   }, [step]);
@@ -3132,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) => {
@@ -3160,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(
@@ -3180,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(
@@ -3197,7 +3445,7 @@ function Stepper({
           }) })
         }
       ) }),
-      onNew && /* @__PURE__ */ jsxs27(
+      onNew && /* @__PURE__ */ jsxs30(
         "button",
         {
           "data-testid": newTestId,
@@ -3205,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
           ]
         }
@@ -3213,10 +3461,660 @@ function Stepper({
     ] })
   );
 }
+
+// src/patterns/animated-brand/AnimatedBrand.tsx
+import {
+  useEffect as useEffect9,
+  useRef as useRef9,
+  useState as useState16
+} from "react";
+
+// src/patterns/animated-brand/brandMotion.ts
+var BRAND_ANIMATIONS = [
+  { id: "bounce", label: "Bounce home" },
+  { id: "orbit", label: "Orbit and settle" },
+  { id: "impact", label: "Shot in, boom" },
+  { id: "liquid", label: "Liquid split" },
+  { id: "signature", label: "Solid to signature" },
+  { id: "burst", label: "Big bang, small dot" },
+  { id: "gravity", label: "Gravity press" }
+];
+function playBrandMotion(p, name, onComplete) {
+  const list = [];
+  if (!p.animate || window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+    onComplete?.();
+    return () => {
+    };
+  }
+  const accent2 = "var(--bms-brand-dot)";
+  const q = (s) => {
+    const element = p.querySelector(s);
+    if (!element) throw new Error(`Missing logo part: ${s}`);
+    return element;
+  }, logo = q('[data-logo-part="logo"]'), ring = q('[data-logo-part="ring"]'), bead = q('[data-logo-part="bead"]'), tail = q('[data-logo-part="tail"]'), core = q('[data-logo-part="core"]');
+  const unit = parseFloat(getComputedStyle(logo).fontSize) || 48;
+  const a = (el, k, d = 2e3, delay = 0) => {
+    const v = el.animate(k, {
+      duration: d,
+      delay,
+      iterations: 1,
+      fill: "both",
+      easing: "linear"
+    });
+    list.push(v);
+    return v;
+  };
+  const t = (x, y, sx = 1, sy = sx) => `translate(${x}em,${y}em) scale(${sx},${sy})`;
+  const points = (items) => items.map(([offset, x, y, sx = 1, sy = sx, color = accent2]) => ({
+    offset,
+    transform: t(x, y, sx, sy),
+    background: color
+  }));
+  const shock = (delay, strength = 1) => p.querySelectorAll('[data-logo-part="echo"]').forEach((e, j) => {
+    a(
+      e,
+      [
+        { opacity: 0, transform: "scale(1)" },
+        { opacity: 0.48 * strength, transform: "scale(1.6)", offset: 0.08 },
+        { opacity: 0, transform: `scale(${j ? 8 : 6})`, offset: 1 }
+      ],
+      650,
+      delay + j * 110
+    );
+  });
+  const sparks = (delay, out = 1) => p.querySelectorAll('[data-logo-part="particle"]').forEach((e, j) => {
+    const angle = j * Math.PI / 4, x = Math.cos(angle) * out, y = Math.sin(angle) * out;
+    a(
+      e,
+      [
+        { opacity: 0, transform: t(0, 0, 0.2) },
+        { opacity: 0.85, transform: t(x * 0.3, y * 0.3), offset: 0.12 },
+        { opacity: 0, transform: t(x, y, 0.25), offset: 1 }
+      ],
+      650,
+      delay
+    );
+  });
+  const impact = (start, duration) => {
+    a(
+      ring,
+      [
+        { offset: 0, transform: "scale(1)" },
+        { offset: start - 0.015, transform: "scale(1)" },
+        { offset: start + 0.045, transform: "scale(.82,1.12)" },
+        { offset: start + 0.12, transform: "scale(1.06,.97)" },
+        { offset: start + 0.24, transform: "scale(1)" },
+        { offset: 1, transform: "scale(1)" }
+      ],
+      duration
+    );
+    a(
+      tail,
+      [
+        { offset: 0, transform: "translateX(0)" },
+        { offset: start, transform: "translateX(0)" },
+        { offset: start + 0.04, transform: "translateX(-.065em)" },
+        { offset: start + 0.14, transform: "translateX(.018em)" },
+        { offset: start + 0.24, transform: "translateX(0)" },
+        { offset: 1, transform: "translateX(0)" }
+      ],
+      duration
+    );
+  };
+  if (name === "bounce") {
+    const beadRect = bead.getBoundingClientRect();
+    const viewportUnitX = beadRect.width > 0 ? beadRect.width / 0.2 : unit;
+    const viewportUnitY = beadRect.height > 0 ? beadRect.height / 0.2 : unit;
+    const originX = beadRect.x + beadRect.width / 2;
+    const originY = beadRect.y + beadRect.height / 2;
+    const letters = Array.from(
+      p.querySelectorAll("[data-brand-letter]")
+    ).reverse();
+    const baseline = p.querySelector("[data-brand-baseline]")?.getBoundingClientRect().top ?? originY;
+    const pen = typeof CanvasRenderingContext2D !== "undefined" ? document.createElement("canvas").getContext("2d") : null;
+    if (pen) pen.font = getComputedStyle(logo).font;
+    const stops = letters.length ? letters.map((letter) => {
+      const rect = letter.getBoundingClientRect();
+      const ascent = pen?.measureText(letter.textContent ?? "").actualBoundingBoxAscent ?? unit * 0.7;
+      return {
+        x: (rect.x + rect.width / 2 - originX) / viewportUnitX,
+        y: (baseline - originY) / viewportUnitY - ascent / unit - 0.1
+      };
+    }) : [
+      { x: -1.1, y: -0.7 },
+      { x: -0.3, y: -0.4 },
+      { x: 0.3, y: -0.4 }
+    ];
+    const duration = 1e3 + stops.length * 340;
+    let from = { x: stops[0].x + 0.5, y: stops[0].y - 0.65 };
+    const frames = [{ offset: 0, transform: t(from.x, from.y) }];
+    const destinations = [...stops, { x: 0, y: 0 }];
+    const jumpEnd = 0.94;
+    destinations.forEach((to, index) => {
+      const start = index / destinations.length * jumpEnd;
+      const length = jumpEnd / destinations.length;
+      for (let k = 1; k <= 10; k++) {
+        const u = k / 10;
+        frames.push({
+          offset: start + length * u * 0.87,
+          transform: t(
+            from.x + (to.x - from.x) * u,
+            from.y + (to.y - from.y) * u - 1.6 * u * (1 - u)
+          )
+        });
+      }
+      frames.push({
+        offset: start + length * 0.94,
+        transform: t(to.x, to.y + 0.018, 1.15, 0.82)
+      });
+      frames.push({ offset: start + length, transform: t(to.x, to.y) });
+      from = to;
+    });
+    frames.push({ offset: 1, transform: t(0, 0) });
+    a(bead, frames, duration);
+    shock(duration * 0.94, 0.5);
+  } else if (name === "orbit") {
+    const frames = [];
+    for (let step = 0; step <= 72; step++) {
+      const u = step / 72;
+      const angle = -Math.PI / 2 + u * Math.PI * 3.7;
+      const radius = 0.683 * (1 - u ** 2.4);
+      frames.push({
+        offset: u,
+        transform: t(Math.cos(angle) * radius, Math.sin(angle) * radius)
+      });
+    }
+    a(bead, frames, 2500);
+    a(
+      ring,
+      [
+        { transform: "scale(1)" },
+        { offset: 0.8, transform: "scale(1.06)" },
+        { offset: 1, transform: "scale(1)" }
+      ],
+      2500
+    );
+    shock(2400, 0.5);
+  } else if (name === "impact") {
+    const d = 1650;
+    a(
+      bead,
+      points([
+        [0, 6.5, 0, 4, 0.38],
+        [0.2, 6.5, 0, 4, 0.38],
+        [0.3, 1.5, 0, 4, 0.38],
+        [0.33, 0, 0, 0.55, 1.55],
+        [0.39, -0.09, 0, 1.35, 0.72],
+        [0.48, 0.035, 0, 0.93, 1.06],
+        [0.65, 0, 0, 1, 1],
+        [1, 0, 0, 1, 1]
+      ]),
+      d
+    );
+    a(
+      q('[data-logo-part="trail"]'),
+      [
+        { opacity: 0, transform: t(6.5, 0, 2, 1) },
+        { opacity: 0, transform: t(6.5, 0, 2, 1), offset: 0.2 },
+        { opacity: 0.6, transform: t(0.5, 0, 1.8, 1), offset: 0.32 },
+        { opacity: 0, transform: t(0, 0, 0.1, 1), offset: 0.39 },
+        { opacity: 0, offset: 1 }
+      ],
+      d
+    );
+    impact(0.33, d);
+    shock(545);
+    sparks(545, 0.94);
+  } else if (name === "liquid") {
+    const d = 2400;
+    a(
+      bead,
+      points([
+        [0, 0, 0, 4],
+        [0.15, 0, 0, 4],
+        [0.3, 0, 0, 5.2, 2.7],
+        [0.43, 0, 0, 2.8, 4.4],
+        [0.58, 0, 0, 1.6, 2],
+        [0.74, 0, 0, 0.85, 1.15],
+        [0.88, 0, 0, 1.06, 0.94],
+        [1, 0, 0, 1]
+      ]),
+      d
+    );
+    a(
+      ring,
+      [
+        { offset: 0, opacity: 0, transform: "scale(.2) rotate(-35deg)" },
+        { offset: 0.36, opacity: 0, transform: "scale(.2) rotate(-35deg)" },
+        { offset: 0.63, opacity: 1, transform: "scale(1.1,.9) rotate(8deg)" },
+        { offset: 0.8, opacity: 1, transform: "scale(.97,1.03) rotate(-2deg)" },
+        { offset: 1, opacity: 1, transform: "scale(1) rotate(0deg)" }
+      ],
+      d
+    );
+    a(
+      tail,
+      [
+        { offset: 0, opacity: 0, transform: "translateX(-.25em)" },
+        { offset: 0.35, opacity: 0, transform: "translateX(-.25em)" },
+        { offset: 0.72, opacity: 1, transform: "translateX(.025em)" },
+        { offset: 1, opacity: 1, transform: "translateX(0)" }
+      ],
+      d
+    );
+  } else if (name === "gravity") {
+    const d = 2600;
+    a(
+      bead,
+      points([
+        [0, 0, -1.15, 4],
+        [0.12, 0, -1.15, 4],
+        [0.24, 0, -0.88, 4],
+        [0.34, 0, -0.35, 3.7, 4.3],
+        [0.4, 0, 0.15, 5.1, 2.5],
+        [0.49, 0, -0.32, 3.4, 4.2],
+        [0.58, 0, 0.07, 4.4, 3.5],
+        [0.67, 0, 0, 3.8, 4],
+        [0.81, 0, 0, 0.78, 1.22],
+        [0.91, 0, 0, 1.1, 0.9],
+        [1, 0, 0, 1]
+      ]),
+      d
+    );
+    a(
+      ring,
+      [
+        { offset: 0, opacity: 0, transform: "scale(.25)" },
+        { offset: 0.64, opacity: 0, transform: "scale(.25)" },
+        { offset: 0.81, opacity: 1, transform: "scale(1.12,.88)" },
+        { offset: 0.92, opacity: 1, transform: "scale(.97,1.03)" },
+        { offset: 1, opacity: 1, transform: "scale(1)" }
+      ],
+      d
+    );
+    a(
+      tail,
+      [
+        { offset: 0, opacity: 0, transform: "translateY(.12em)" },
+        { offset: 0.43, opacity: 0, transform: "translateY(.12em)" },
+        { offset: 0.72, opacity: 1, transform: "translateY(0)" },
+        { offset: 1, opacity: 1, transform: "translateY(0)" }
+      ],
+      d
+    );
+    shock(1040, 0.5);
+  } else if (name === "signature") {
+    const d = 2200;
+    a(
+      core,
+      [
+        { opacity: 1, background: accent2, transform: "scale(1)" },
+        { opacity: 1, background: accent2, transform: "scale(1.08)", offset: 0.22 },
+        { opacity: 1, background: accent2, transform: "scale(.22)", offset: 0.65 },
+        { opacity: 1, background: accent2, transform: "scale(.25)", offset: 0.84 },
+        { opacity: 0, background: accent2, transform: "scale(.25)", offset: 1 }
+      ],
+      d
+    );
+    a(
+      bead,
+      [{ opacity: 0 }, { opacity: 0, offset: 0.85 }, { opacity: 1, offset: 1 }],
+      d
+    );
+    a(
+      ring,
+      [
+        { opacity: 0, transform: "scale(.3)" },
+        { opacity: 0, transform: "scale(.3)", offset: 0.25 },
+        { opacity: 1, transform: "scale(1.04)", offset: 0.65 },
+        { opacity: 1, transform: "scale(1)", offset: 0.83 },
+        { opacity: 1, transform: "scale(1)", offset: 1 }
+      ],
+      d
+    );
+    a(
+      tail,
+      [
+        { opacity: 0, transform: "translateX(-.18em)" },
+        { opacity: 0, transform: "translateX(-.18em)", offset: 0.22 },
+        { opacity: 1, transform: "translateX(0)", offset: 0.64 },
+        { opacity: 1, transform: "translateX(0)", offset: 1 }
+      ],
+      d
+    );
+  } else {
+    const d = 2500;
+    a(
+      core,
+      [
+        { opacity: 1, background: accent2, transform: "scale(.92)" },
+        { opacity: 1, background: accent2, transform: "scale(1.14)", offset: 0.24 },
+        { opacity: 0, background: accent2, transform: "scale(.1)", offset: 0.36 },
+        { opacity: 0, offset: 1 }
+      ],
+      d
+    );
+    a(
+      bead,
+      [
+        { opacity: 0, transform: "scale(.2)" },
+        { opacity: 0, transform: "scale(.2)", offset: 0.69 },
+        { opacity: 1, transform: "scale(1.2)", offset: 0.84 },
+        { opacity: 1, transform: "scale(1)", offset: 1 }
+      ],
+      d
+    );
+    a(
+      ring,
+      [
+        { opacity: 0, transform: "scale(.82)" },
+        { opacity: 0, transform: "scale(.82)", offset: 0.34 },
+        { opacity: 0.7, transform: "scale(1.04)", offset: 0.57 },
+        { opacity: 1, transform: "scale(1)", offset: 0.82 },
+        { opacity: 1, transform: "scale(1)", offset: 1 }
+      ],
+      d
+    );
+    a(
+      tail,
+      [
+        { opacity: 0.15, transform: "translateX(-.06em)" },
+        { opacity: 0.15, transform: "translateX(-.06em)", offset: 0.3 },
+        { opacity: 1, transform: "translateX(0)", offset: 0.68 },
+        { opacity: 1, transform: "translateX(0)", offset: 1 }
+      ],
+      d
+    );
+    p.querySelectorAll('[data-logo-part="particle"]').forEach((el, j) => {
+      const angle = j * Math.PI / 4, x = Math.cos(angle) * 0.86, y = Math.sin(angle) * 0.86;
+      a(
+        el,
+        [
+          { opacity: 0, transform: t(0, 0, 0.2) },
+          { opacity: 0, transform: t(0, 0, 0.2), offset: 0.27 },
+          { opacity: 1, transform: t(x, y, 1.2), offset: 0.43 },
+          { opacity: 1, transform: t(x * 0.85, y * 0.85), offset: 0.59 },
+          { opacity: 0, transform: t(0, 0, 0.5), offset: 0.82 },
+          { opacity: 0, transform: t(0, 0, 0.5), offset: 1 }
+        ],
+        d
+      );
+    });
+    shock(1800, 0.6);
+  }
+  let cancelled = false;
+  void Promise.all(list.map((animation) => animation.finished)).then(
+    () => {
+      if (!cancelled) {
+        for (const animation of list) animation.cancel();
+        onComplete?.();
+      }
+    },
+    () => {
+    }
+  );
+  return () => {
+    cancelled = true;
+    for (const animation of list) animation.cancel();
+  };
+}
+
+// src/patterns/animated-brand/AnimatedBrand.tsx
+import { jsx as jsx49, jsxs as jsxs31 } from "react/jsx-runtime";
+var absolute = {
+  position: "absolute",
+  borderRadius: "50%",
+  pointerEvents: "none"
+};
+var centered = {
+  ...absolute,
+  width: ".2em",
+  height: ".2em",
+  left: "50%",
+  top: "50%",
+  margin: "-.1em"
+};
+var accent = "var(--bms-brand-dot)";
+function AnimatedBrand({
+  product = "Brain",
+  dotColor = "#e60028",
+  textColor = "#929292",
+  oneColor,
+  productColor,
+  ringColor,
+  mode = "full",
+  animation = "random",
+  size = 48,
+  autoPlay = true,
+  replayKey,
+  onComplete,
+  className,
+  style
+}) {
+  const ref = useRef9(null);
+  const completion = useRef9(onComplete);
+  const [segmented, setSegmented] = useState16(null);
+  useEffect9(() => {
+    const letters2 = typeof Intl.Segmenter === "function" ? Array.from(new Intl.Segmenter(void 0, { granularity: "grapheme" }).segment(product), ({ segment }) => segment) : product ? [product] : [];
+    setSegmented({ product, letters: letters2 });
+  }, [product]);
+  useEffect9(() => {
+    completion.current = onComplete;
+  }, [onComplete]);
+  useEffect9(() => {
+    const element = ref.current;
+    if (!element || !autoPlay || segmented?.product !== product) return;
+    let disposed = false;
+    let stop;
+    let completed = false;
+    const finish = () => {
+      if (!disposed && !completed) {
+        completed = true;
+        completion.current?.();
+      }
+    };
+    const reduced = window.matchMedia("(prefers-reduced-motion: reduce)");
+    const changed = () => {
+      if (reduced.matches) {
+        stop?.();
+        finish();
+      }
+    };
+    reduced.addEventListener("change", changed);
+    const start = () => {
+      if (disposed || completed) return;
+      if (reduced.matches) {
+        finish();
+        return;
+      }
+      const choice = animation === "random" ? BRAND_ANIMATIONS[Math.floor(Math.random() * BRAND_ANIMATIONS.length)].id : animation;
+      stop = playBrandMotion(element, choice, finish);
+    };
+    void (document.fonts?.ready ?? Promise.resolve()).then(start, start);
+    return () => {
+      disposed = true;
+      stop?.();
+      reduced.removeEventListener("change", changed);
+    };
+  }, [product, mode, animation, size, autoPlay, replayKey, segmented]);
+  const tail = mode === "full" ? `ne${product}` : mode === "one" ? "ne" : "";
+  const suffix = mode === "full" && product ? segmented?.product === product ? segmented.letters : [product] : [];
+  const letters = tail ? ["n", "e", ...suffix] : [];
+  const label = mode === "full" ? `One${product}` : mode === "one" ? "One" : "O";
+  const wrapperStyle = {
+    "--bms-brand-dot": dotColor,
+    display: "inline-flex",
+    fontSize: size,
+    color: textColor,
+    ...style
+  };
+  return /* @__PURE__ */ jsx49(
+    "span",
+    {
+      ref,
+      className,
+      style: wrapperStyle,
+      children: /* @__PURE__ */ jsxs31(
+        "span",
+        {
+          "data-logo-part": "logo",
+          role: "img",
+          "aria-label": label,
+          style: {
+            display: "inline-flex",
+            position: "relative",
+            alignItems: "center",
+            fontSize: "inherit",
+            fontWeight: 700,
+            lineHeight: 1,
+            letterSpacing: "-.055em",
+            whiteSpace: "nowrap",
+            userSelect: "none"
+          },
+          children: [
+            /* @__PURE__ */ jsxs31(
+              "span",
+              {
+                "data-logo-part": "mark",
+                "aria-hidden": "true",
+                style: {
+                  position: "relative",
+                  flex: "none",
+                  color: ringColor ?? oneColor,
+                  width: ".8em",
+                  height: ".8em",
+                  marginRight: tail ? ".04em" : 0
+                },
+                children: [
+                  /* @__PURE__ */ jsx49(
+                    "span",
+                    {
+                      "data-logo-part": "ring",
+                      style: {
+                        ...absolute,
+                        inset: 0,
+                        border: ".157em solid currentColor",
+                        boxSizing: "border-box"
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ jsx49(
+                    "span",
+                    {
+                      "data-logo-part": "core",
+                      style: {
+                        ...absolute,
+                        inset: 0,
+                        background: accent,
+                        opacity: 0,
+                        zIndex: 2
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ jsx49(
+                    "span",
+                    {
+                      "data-logo-part": "trail",
+                      style: {
+                        position: "absolute",
+                        width: "1.8em",
+                        height: ".045em",
+                        left: "50%",
+                        top: "50%",
+                        marginTop: "-.0225em",
+                        background: `linear-gradient(90deg, ${accent}, transparent)`,
+                        transformOrigin: "left center",
+                        opacity: 0,
+                        pointerEvents: "none"
+                      }
+                    }
+                  ),
+                  [0, 1].map((id) => /* @__PURE__ */ jsx49(
+                    "span",
+                    {
+                      "data-logo-part": "echo",
+                      style: {
+                        ...centered,
+                        border: `.025em solid ${accent}`,
+                        boxSizing: "border-box",
+                        opacity: 0
+                      }
+                    },
+                    id
+                  )),
+                  Array.from({ length: 8 }, (_, id) => /* @__PURE__ */ jsx49(
+                    "span",
+                    {
+                      "data-logo-part": "particle",
+                      style: {
+                        ...centered,
+                        width: ".055em",
+                        height: ".055em",
+                        margin: "-.0275em",
+                        background: accent,
+                        opacity: 0
+                      }
+                    },
+                    id
+                  )),
+                  /* @__PURE__ */ jsx49(
+                    "span",
+                    {
+                      "data-logo-part": "bead",
+                      style: { ...centered, background: accent, zIndex: 3 }
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs31(
+              "span",
+              {
+                "data-logo-part": "tail",
+                "aria-hidden": "true",
+                style: {
+                  display: "inline-flex",
+                  alignItems: "baseline",
+                  whiteSpace: "pre"
+                },
+                children: [
+                  letters.map((letter, index) => /* @__PURE__ */ jsx49(
+                    "span",
+                    {
+                      "data-brand-letter": "",
+                      style: { display: "inline-block", color: index < 2 ? oneColor : productColor },
+                      children: letter
+                    },
+                    `${index}-${letter}`
+                  )),
+                  /* @__PURE__ */ jsx49(
+                    "span",
+                    {
+                      "data-brand-baseline": "",
+                      style: {
+                        display: "inline-block",
+                        width: 0,
+                        height: 0,
+                        alignSelf: "baseline"
+                      }
+                    }
+                  )
+                ]
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
 export {
   AiButton,
   AiExplainButton,
   AlertBox,
+  AnimatedBrand,
+  AsyncBoundary,
+  BRAND_ANIMATIONS,
   Badge,
   Button,
   ButtonGroup,
@@ -3254,13 +4152,16 @@ export {
   DropdownMenuSubContent,
   DropdownMenuSubTrigger,
   DropdownMenuTrigger,
+  ErrorState,
   FormField,
   FormModal,
+  InlineError,
   Input,
   KpiCard,
   Label,
   LoadingOverlay,
   LoadingSpinner,
+  LoadingState,
   Modal,
   NavGroup,
   NavItem,
@@ -3269,6 +4170,7 @@ export {
   PopoverContent,
   PopoverTrigger,
   QuestionDialog,
+  RefreshBar,
   ResponsivePanel,
   ScrollArea,
   ScrollBar,
@@ -3322,11 +4224,14 @@ export {
   badgeVariants,
   buttonVariants,
   cn,
+  defaultErrorStateLabels,
   describeSpeechError,
   getConfirmButtonPlacement,
   isWindowsPlatform,
   loadingSpinnerIconVariants,
   sheetVariants,
+  toErrorInfo,
+  useDelayedFlag,
   useMediaQuery,
   useSidebarCollapsed,
   useSpeechRecognition