@ai-matrx/design-system 0.86.350 → 0.86.351

package/dist/{chunk-SC3XPADZ.js → chunk-UGQRAQTE.js}

@@ -1047,9 +1047,94 @@ function StageSteps({ steps, current, labels = "all", maxVisible, className, ...
   }) });
 }
 
+// src/controls/checklist.tsx
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+var STATE_WORD = {
+  done: "Met",
+  open: "Missing",
+  unknown: "Not measured"
+};
+function ChecklistMark({ state, className }) {
+  return /* @__PURE__ */ jsx6(
+    "span",
+    {
+      "data-matrx-checklist-mark": "",
+      "data-state": state,
+      role: "img",
+      "aria-label": STATE_WORD[state],
+      className: cn(
+        "grid size-4 shrink-0 place-items-center rounded-full",
+        state === "done" && "bg-success text-success-foreground",
+        state === "open" && "border-2 border-warning",
+        state === "unknown" && "border-2 border-dashed border-muted-foreground",
+        className
+      ),
+      children: state === "done" ? /* @__PURE__ */ jsx6(CheckIcon, { className: "size-3", strokeWidth: 3 }) : null
+    }
+  );
+}
+function Checklist({ className, children, ...props }) {
+  return /* @__PURE__ */ jsx6("ul", { "data-matrx-checklist": "", className: cn("grid min-w-0", className), ...props, children });
+}
+function ChecklistItem({ state, title, line, end, className, ...props }) {
+  return /* @__PURE__ */ jsxs5(
+    "li",
+    {
+      "data-matrx-checklist-item": "",
+      "data-state": state,
+      className: cn(
+        "grid min-w-0 grid-cols-[auto_minmax(0,1fr)] items-start gap-x-2 py-1.5 sm:grid-cols-[auto_minmax(0,1fr)_auto]",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx6(ChecklistMark, { state, className: "mt-0.5" }),
+        /* @__PURE__ */ jsxs5("div", { className: "min-w-0", children: [
+          /* @__PURE__ */ jsx6("div", { className: "type-title truncate text-foreground", children: title }),
+          line ? /* @__PURE__ */ jsx6("div", { className: "type-secondary truncate text-muted-foreground", title: line, children: line }) : null
+        ] }),
+        end ? /* @__PURE__ */ jsx6("div", { className: "col-start-2 mt-1.5 flex justify-start sm:col-start-3 sm:row-start-1 sm:mt-0 sm:justify-end sm:self-center", children: end }) : null
+      ]
+    }
+  );
+}
+function ChecklistMeter({ label, met, total, end, className }) {
+  const done = Math.max(0, Math.min(total, met));
+  return /* @__PURE__ */ jsxs5("div", { "data-matrx-checklist-meter": "", className: cn("grid min-w-0 gap-1.5", className), children: [
+    /* @__PURE__ */ jsxs5("div", { className: "flex min-w-0 items-center gap-2", children: [
+      /* @__PURE__ */ jsx6("span", { className: "type-title min-w-0 truncate text-foreground", children: label }),
+      /* @__PURE__ */ jsxs5("span", { className: "type-meta shrink-0 tabular-nums text-muted-foreground", children: [
+        done,
+        " of ",
+        total
+      ] }),
+      end ? /* @__PURE__ */ jsx6("span", { className: "ml-auto flex shrink-0 items-center", children: end }) : null
+    ] }),
+    /* @__PURE__ */ jsx6(
+      "div",
+      {
+        role: "meter",
+        "aria-valuemin": 0,
+        "aria-valuemax": total,
+        "aria-valuenow": done,
+        "aria-label": `${done} of ${total} met`,
+        className: "flex gap-1",
+        children: Array.from({ length: total }, (_, i) => /* @__PURE__ */ jsx6(
+          "span",
+          {
+            "data-filled": i < done ? "" : void 0,
+            className: cn("h-1.5 flex-1 rounded-full", i < done ? "bg-success" : "bg-border")
+          },
+          i
+        ))
+      }
+    )
+  ] });
+}
+
 // src/controls/clamped-number-input.tsx
 import { useEffect as useEffect3, useState as useState4 } from "react";
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { jsx as jsx7 } from "react/jsx-runtime";
 function shownDraft(raw, min, max, decimal = false) {
   const next = clampDraft(raw, min, max, decimal);
   if (next === null) return null;
@@ -1094,7 +1179,7 @@ function ClampedNumberInput({
     setDraft(String(next));
     if (next !== value) onChange(next);
   };
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx7(
     Input,
     {
       id,
@@ -1127,7 +1212,7 @@ function ClampedNumberInput({
 
 // src/controls/light-switch-toggle.tsx
 import { useState as useState5, forwardRef as forwardRef3 } from "react";
-import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
 var defaultSizes = {
   width: "w-48",
   height: "h-16"
@@ -1165,7 +1250,7 @@ var LightSwitchToggle = forwardRef3(
     const buttonBaseClasses = "relative w-1/2 h-full transition-all duration-300";
     const activeButtonClasses = "bg-primary transform -translate-y-px shadow-[inset_0_1px_3px_rgba(0,0,0,0.2)]";
     const inactiveButtonClasses = "bg-muted/60 transform -translate-y-1.5";
-    const renderOption = (isActive, label, side, onClick) => /* @__PURE__ */ jsxs5(
+    const renderOption = (isActive, label, side, onClick) => /* @__PURE__ */ jsxs6(
       "button",
       {
         type: "button",
@@ -1177,7 +1262,7 @@ var LightSwitchToggle = forwardRef3(
           isActive ? activeButtonClasses : inactiveButtonClasses
         ),
         children: [
-          /* @__PURE__ */ jsx7(
+          /* @__PURE__ */ jsx8(
             "div",
             {
               className: cn(
@@ -1188,7 +1273,7 @@ var LightSwitchToggle = forwardRef3(
               )
             }
           ),
-          /* @__PURE__ */ jsx7(
+          /* @__PURE__ */ jsx8(
             "span",
             {
               className: cn(
@@ -1201,8 +1286,8 @@ var LightSwitchToggle = forwardRef3(
         ]
       }
     );
-    return /* @__PURE__ */ jsx7("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsxs5("div", { ref, className: containerClasses, children: [
-      /* @__PURE__ */ jsx7("div", { className: "absolute left-1/2 top-0 bottom-0 w-[2px] bg-border transform -translate-x-1/2 z-10" }),
+    return /* @__PURE__ */ jsx8("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsxs6("div", { ref, className: containerClasses, children: [
+      /* @__PURE__ */ jsx8("div", { className: "absolute left-1/2 top-0 bottom-0 w-[2px] bg-border transform -translate-x-1/2 z-10" }),
       renderOption(!isOn, labels.off, "left", () => handleToggle(false)),
       renderOption(isOn, labels.on, "right", () => handleToggle(true))
     ] }) });
@@ -1212,7 +1297,7 @@ LightSwitchToggle.displayName = "LightSwitchToggle";
 
 // src/controls/option-combobox.tsx
 import { useState as useState6 } from "react";
-import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
 function OptionCombobox({
   value,
   onChange,
@@ -1246,7 +1331,7 @@ function OptionCombobox({
     setOpen(false);
     setQuery("");
   };
-  return /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsxs7(
     Popover,
     {
       open,
@@ -1258,7 +1343,7 @@ function OptionCombobox({
         }
       },
       children: [
-        /* @__PURE__ */ jsx8(PopoverTrigger, { asChild: true, disabled, children: /* @__PURE__ */ jsxs6(
+        /* @__PURE__ */ jsx9(PopoverTrigger, { asChild: true, disabled, children: /* @__PURE__ */ jsxs7(
           "button",
           {
             id,
@@ -1279,7 +1364,7 @@ function OptionCombobox({
             ),
             children: [
               hasValue && renderIcon?.(value),
-              /* @__PURE__ */ jsxs6(
+              /* @__PURE__ */ jsxs7(
                 "span",
                 {
                   className: cn(
@@ -1288,22 +1373,22 @@ function OptionCombobox({
                   ),
                   children: [
                     hasValue ? getLabel(value) : placeholder,
-                    hint && /* @__PURE__ */ jsx8("span", { className: "ml-1.5 text-muted-foreground", children: hint })
+                    hint && /* @__PURE__ */ jsx9("span", { className: "ml-1.5 text-muted-foreground", children: hint })
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx8(SelectChevron, { size: "sm", className: variant === "inline" ? "h-3 w-3" : void 0 })
+              /* @__PURE__ */ jsx9(SelectChevron, { size: "sm", className: variant === "inline" ? "h-3 w-3" : void 0 })
             ]
           }
         ) }),
-        /* @__PURE__ */ jsx8(
+        /* @__PURE__ */ jsx9(
           PopoverContent,
           {
             sizing: "content",
             align: "start",
             className: "p-0",
-            children: /* @__PURE__ */ jsxs6(Command, { shouldFilter: false, children: [
-              searchable && /* @__PURE__ */ jsx8(
+            children: /* @__PURE__ */ jsxs7(Command, { shouldFilter: false, children: [
+              searchable && /* @__PURE__ */ jsx9(
                 CommandInput,
                 {
                   placeholder: searchPlaceholder,
@@ -1311,8 +1396,8 @@ function OptionCombobox({
                   onValueChange: setQuery
                 }
               ),
-              /* @__PURE__ */ jsxs6(CommandList, { className: "max-h-72", children: [
-                /* @__PURE__ */ jsxs6(CommandEmpty, { children: [
+              /* @__PURE__ */ jsxs7(CommandList, { className: "max-h-72", children: [
+                /* @__PURE__ */ jsxs7(CommandEmpty, { children: [
                   "No match for \u201C",
                   query,
                   "\u201D."
@@ -1322,24 +1407,24 @@ function OptionCombobox({
                   if (visible.length === 0) return null;
                   const folded = group.collapsed && !showMore && !q && !group.options.includes(value);
                   if (folded) {
-                    return /* @__PURE__ */ jsx8(CommandGroup, { children: /* @__PURE__ */ jsxs6(
+                    return /* @__PURE__ */ jsx9(CommandGroup, { children: /* @__PURE__ */ jsxs7(
                       CommandItem,
                       {
                         value: `__more_${gi}`,
                         onSelect: () => setShowMore(true),
                         className: "text-muted-foreground",
                         children: [
-                          /* @__PURE__ */ jsx8(ChevronRightIcon, { className: "h-3.5 w-3.5" }),
+                          /* @__PURE__ */ jsx9(ChevronRightIcon, { className: "h-3.5 w-3.5" }),
                           group.heading ?? "More",
-                          /* @__PURE__ */ jsx8("span", { className: "ml-auto type-secondary tabular-nums", children: group.options.length })
+                          /* @__PURE__ */ jsx9("span", { className: "ml-auto type-secondary tabular-nums", children: group.options.length })
                         ]
                       }
                     ) }, `g-${gi}`);
                   }
-                  return /* @__PURE__ */ jsx8(CommandGroup, { heading: group.heading, children: visible.map((o) => {
+                  return /* @__PURE__ */ jsx9(CommandGroup, { heading: group.heading, children: visible.map((o) => {
                     const selected = o === value;
                     const h = getHint?.(o);
-                    return /* @__PURE__ */ jsxs6(
+                    return /* @__PURE__ */ jsxs7(
                       CommandItem,
                       {
                         value: o,
@@ -1347,11 +1432,11 @@ function OptionCombobox({
                         className: "gap-2",
                         children: [
                           renderIcon?.(o),
-                          /* @__PURE__ */ jsxs6("span", { className: "min-w-0 flex-1 truncate", children: [
+                          /* @__PURE__ */ jsxs7("span", { className: "min-w-0 flex-1 truncate", children: [
                             getLabel(o),
-                            h && /* @__PURE__ */ jsx8("span", { className: "ml-1.5 text-muted-foreground", children: h })
+                            h && /* @__PURE__ */ jsx9("span", { className: "ml-1.5 text-muted-foreground", children: h })
                           ] }),
-                          /* @__PURE__ */ jsx8(
+                          /* @__PURE__ */ jsx9(
                             CheckIcon,
                             {
                               className: cn(
@@ -1453,7 +1538,7 @@ function groupRatioOptions(options) {
 }
 
 // src/controls/aspect-ratio-select.tsx
-import { jsx as jsx9 } from "react/jsx-runtime";
+import { jsx as jsx10 } from "react/jsx-runtime";
 function AspectRatioGlyph({
   value,
   className
@@ -1461,7 +1546,7 @@ function AspectRatioGlyph({
   const r = parseRatio(value);
   const box = 14;
   if (!r) {
-    return /* @__PURE__ */ jsx9(
+    return /* @__PURE__ */ jsx10(
       "span",
       {
         "aria-hidden": true,
@@ -1469,14 +1554,14 @@ function AspectRatioGlyph({
           "inline-flex h-3.5 w-3.5 shrink-0 items-center justify-center",
           className
         ),
-        children: /* @__PURE__ */ jsx9("span", { className: "h-2.5 w-2.5 rounded-[2px] border border-dashed border-current opacity-60" })
+        children: /* @__PURE__ */ jsx10("span", { className: "h-2.5 w-2.5 rounded-[2px] border border-dashed border-current opacity-60" })
       }
     );
   }
   const k = r.w / r.h;
   const w = k >= 1 ? box : Math.max(3, box * k);
   const h = k >= 1 ? Math.max(3, box / k) : box;
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx10(
     "span",
     {
       "aria-hidden": true,
@@ -1484,7 +1569,7 @@ function AspectRatioGlyph({
         "inline-flex h-3.5 w-3.5 shrink-0 items-center justify-center",
         className
       ),
-      children: /* @__PURE__ */ jsx9(
+      children: /* @__PURE__ */ jsx10(
         "span",
         {
           className: "rounded-[2px] border-[1.5px] border-current opacity-80",
@@ -1511,7 +1596,7 @@ function AspectRatioSelect({
     { options: common },
     ...more.length ? [{ heading: "More ratios", options: more, collapsed: true }] : []
   ];
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx10(
     OptionCombobox,
     {
       value,
@@ -1519,7 +1604,7 @@ function AspectRatioSelect({
       groups,
       getLabel: (o) => parseRatio(o) ? o : humanizeRatioWord(o),
       getHint: (o) => ratioShapeName(o),
-      renderIcon: (o) => /* @__PURE__ */ jsx9(AspectRatioGlyph, { value: o, className: "text-muted-foreground" }),
+      renderIcon: (o) => /* @__PURE__ */ jsx10(AspectRatioGlyph, { value: o, className: "text-muted-foreground" }),
       searchable: options.length > 12,
       searchPlaceholder: "Search ratios\u2026",
       placeholder,
@@ -1533,7 +1618,7 @@ function AspectRatioSelect({
 }
 
 // src/indicator-strip.tsx
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
 var TONE = {
   danger: "text-destructive",
   warning: "text-warning",
@@ -1546,7 +1631,7 @@ function indicatorText(item) {
   return item.detail ? `${item.label}: yes \u2014 ${item.detail}` : `${item.label}: yes`;
 }
 function IndicatorStrip({ items, className, ...props }) {
-  return /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx11(
     "span",
     {
       "data-slot": "indicator-strip",
@@ -1556,7 +1641,7 @@ function IndicatorStrip({ items, className, ...props }) {
       children: items.map((item) => {
         const Icon = item.icon;
         const text = indicatorText(item);
-        return /* @__PURE__ */ jsx10(
+        return /* @__PURE__ */ jsx11(
           "span",
           {
             role: "listitem",
@@ -1569,7 +1654,7 @@ function IndicatorStrip({ items, className, ...props }) {
               item.on ? TONE[item.tone ?? "warning"] : "text-muted-foreground opacity-30",
               item.on && item.soft && "opacity-55"
             ),
-            children: /* @__PURE__ */ jsx10(Icon, { className: "size-3.5", "aria-hidden": true })
+            children: /* @__PURE__ */ jsx11(Icon, { className: "size-3.5", "aria-hidden": true })
           },
           item.id
         );
@@ -1579,7 +1664,7 @@ function IndicatorStrip({ items, className, ...props }) {
 }
 
 // src/controls/middle-truncate.tsx
-import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
 var DEFAULT_TAIL = 10;
 function splitForMiddleTruncate(text, tail = DEFAULT_TAIL) {
   const keep = Math.min(tail, Math.floor(text.length / 2));
@@ -1592,15 +1677,15 @@ function MiddleTruncate({
   className
 }) {
   const { head, end } = splitForMiddleTruncate(text, tail);
-  return /* @__PURE__ */ jsxs7("span", { className: cn("flex min-w-0 items-baseline", className), title: text, children: [
-    /* @__PURE__ */ jsx11("span", { className: "sr-only", children: text }),
-    /* @__PURE__ */ jsx11("span", { "aria-hidden": true, className: "min-w-0 truncate whitespace-pre", children: head }),
-    end ? /* @__PURE__ */ jsx11("span", { "aria-hidden": true, className: "shrink-0 whitespace-pre", children: end }) : null
+  return /* @__PURE__ */ jsxs8("span", { className: cn("flex min-w-0 items-baseline", className), title: text, children: [
+    /* @__PURE__ */ jsx12("span", { className: "sr-only", children: text }),
+    /* @__PURE__ */ jsx12("span", { "aria-hidden": true, className: "min-w-0 truncate whitespace-pre", children: head }),
+    end ? /* @__PURE__ */ jsx12("span", { "aria-hidden": true, className: "shrink-0 whitespace-pre", children: end }) : null
   ] });
 }
 
 // src/controls/callout-banner.tsx
-import { jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
 var TONE2 = {
   destructive: { container: "border-destructive/30 bg-destructive/10", icon: "text-destructive" },
   warning: { container: "border-warning/30 bg-warning/10", icon: "text-warning" },
@@ -1618,7 +1703,7 @@ function CalloutBanner({
   className
 }) {
   const t = TONE2[tone2];
-  return /* @__PURE__ */ jsxs8(
+  return /* @__PURE__ */ jsxs9(
     "div",
     {
       className: cn(
@@ -1628,16 +1713,16 @@ function CalloutBanner({
       ),
       role: "status",
       children: [
-        /* @__PURE__ */ jsxs8("div", { className: "flex min-w-0 flex-1 items-start gap-2", children: [
-          Icon && /* @__PURE__ */ jsx12(Icon, { className: cn("mt-0.5 h-4 w-4 shrink-0", t.icon), "aria-hidden": true }),
-          /* @__PURE__ */ jsxs8("div", { className: "min-w-0", children: [
-            /* @__PURE__ */ jsx12("p", { className: "type-title text-foreground", children: title }),
-            description && /* @__PURE__ */ jsx12("p", { className: "mt-0.5 type-secondary text-muted-foreground", children: description })
+        /* @__PURE__ */ jsxs9("div", { className: "flex min-w-0 flex-1 items-start gap-2", children: [
+          Icon && /* @__PURE__ */ jsx13(Icon, { className: cn("mt-0.5 h-4 w-4 shrink-0", t.icon), "aria-hidden": true }),
+          /* @__PURE__ */ jsxs9("div", { className: "min-w-0", children: [
+            /* @__PURE__ */ jsx13("p", { className: "type-title text-foreground", children: title }),
+            description && /* @__PURE__ */ jsx13("p", { className: "mt-0.5 type-secondary text-muted-foreground", children: description })
           ] })
         ] }),
-        /* @__PURE__ */ jsxs8("div", { className: "flex shrink-0 items-center gap-1.5 sm:ml-2", children: [
+        /* @__PURE__ */ jsxs9("div", { className: "flex shrink-0 items-center gap-1.5 sm:ml-2", children: [
           actions,
-          onDismiss && /* @__PURE__ */ jsx12(Button2, { variant: "quiet", icon: /* @__PURE__ */ jsx12(XIcon, {}), "aria-label": "Dismiss", onClick: onDismiss, disabled: dismissing })
+          onDismiss && /* @__PURE__ */ jsx13(Button2, { variant: "quiet", icon: /* @__PURE__ */ jsx13(XIcon, {}), "aria-label": "Dismiss", onClick: onDismiss, disabled: dismissing })
         ] })
       ]
     }
@@ -1646,7 +1731,7 @@ function CalloutBanner({
 
 // src/controls/gated-action-button.tsx
 import * as React4 from "react";
-import { jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
 function firstBlockingReason(checks) {
   for (const check of checks) {
     if (check && check.when) return check.reason;
@@ -1665,7 +1750,7 @@ function GatedActionButton({
   const reactId = React4.useId();
   const blocked = Boolean(reason && reason.trim());
   const reasonId = `gated-action-reason-${reactId}`;
-  return /* @__PURE__ */ jsxs9(
+  return /* @__PURE__ */ jsxs10(
     "span",
     {
       className: cn(
@@ -1673,7 +1758,7 @@ function GatedActionButton({
         wrapperClassName
       ),
       children: [
-        blocked ? /* @__PURE__ */ jsx13(
+        blocked ? /* @__PURE__ */ jsx14(
           "span",
           {
             id: reasonId,
@@ -1686,7 +1771,7 @@ function GatedActionButton({
             children: reason
           }
         ) : null,
-        /* @__PURE__ */ jsx13(
+        /* @__PURE__ */ jsx14(
           Button,
           {
             ...buttonProps,
@@ -1704,7 +1789,7 @@ GatedActionButton.displayName = "GatedActionButton";
 
 // src/controls/search-input.tsx
 import { useEffect as useEffect4, useRef as useRef2, useState as useState7 } from "react";
-import { jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
 function SearchInput({
   value,
   defaultValue = "",
@@ -1760,21 +1845,21 @@ function SearchInput({
     onSearch?.("");
     inputRef.current?.focus();
   };
-  return /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsxs11(
     "form",
     {
       onSubmit: handleSubmit,
       className: cn("flex min-w-0 items-center gap-2", className),
       children: [
-        /* @__PURE__ */ jsxs10("div", { className: "relative min-w-0 flex-1", children: [
-          /* @__PURE__ */ jsx14(
+        /* @__PURE__ */ jsxs11("div", { className: "relative min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsx15(
             SearchIcon,
             {
               className: "pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground",
               "aria-hidden": true
             }
           ),
-          /* @__PURE__ */ jsx14(
+          /* @__PURE__ */ jsx15(
             Input,
             {
               ref: inputRef,
@@ -1788,7 +1873,7 @@ function SearchInput({
               adornment: showClearButton && searchValue ? "both" : "start"
             }
           ),
-          showClearButton && searchValue ? /* @__PURE__ */ jsx14(
+          showClearButton && searchValue ? /* @__PURE__ */ jsx15(
             "button",
             {
               type: "button",
@@ -1796,14 +1881,14 @@ function SearchInput({
               disabled,
               "aria-label": "Clear search",
               className: "absolute right-2 top-1/2 flex h-6 w-6 -translate-y-1/2 items-center justify-center rounded text-muted-foreground transition-colors hover:bg-accent hover:text-foreground disabled:pointer-events-none disabled:text-disabled-foreground",
-              children: /* @__PURE__ */ jsx14(XIcon, { className: "h-3.5 w-3.5" })
+              children: /* @__PURE__ */ jsx15(XIcon, { className: "h-3.5 w-3.5" })
             }
           ) : null
         ] }),
-        showSubmitButton ? /* @__PURE__ */ jsx14(
+        showSubmitButton ? /* @__PURE__ */ jsx15(
           Button2,
           {
-            icon: loading ? /* @__PURE__ */ jsx14(Loader2Icon, { className: "animate-spin" }) : /* @__PURE__ */ jsx14(SearchIcon, {}),
+            icon: loading ? /* @__PURE__ */ jsx15(Loader2Icon, { className: "animate-spin" }) : /* @__PURE__ */ jsx15(SearchIcon, {}),
             variant: "primary",
             type: "submit",
             disabled: disabled || loading,
@@ -1818,7 +1903,7 @@ function SearchInput({
 
 // src/controls/collapsible-text.tsx
 import { useLayoutEffect, useRef as useRef3, useState as useState8 } from "react";
-import { jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
 function CollapsibleText({
   children,
   expanded,
@@ -1852,8 +1937,8 @@ function CollapsibleText({
   }, [children, collapsedLines]);
   const isCollapsed = isOverflowing && !expanded;
   if (showLabel) {
-    return /* @__PURE__ */ jsxs11("div", { className: "relative min-w-0", children: [
-      /* @__PURE__ */ jsx15(
+    return /* @__PURE__ */ jsxs12("div", { className: "relative min-w-0", children: [
+      /* @__PURE__ */ jsx16(
         "div",
         {
           ref: contentRef,
@@ -1866,7 +1951,7 @@ function CollapsibleText({
           children
         }
       ),
-      isOverflowing ? /* @__PURE__ */ jsxs11(
+      isOverflowing ? /* @__PURE__ */ jsxs12(
         "button",
         {
           type: "button",
@@ -1877,15 +1962,15 @@ function CollapsibleText({
           },
           className: "mt-0.5 inline-flex min-h-6 items-center gap-0.5 rounded text-xs font-medium text-primary hover:underline focus-visible:outline focus-visible:outline-2 focus-visible:outline-ring",
           children: [
-            isCollapsed ? /* @__PURE__ */ jsx15(ChevronDownIcon, { className: "h-3.5 w-3.5", "aria-hidden": true }) : /* @__PURE__ */ jsx15(ChevronUpIcon, { className: "h-3.5 w-3.5", "aria-hidden": true }),
+            isCollapsed ? /* @__PURE__ */ jsx16(ChevronDownIcon, { className: "h-3.5 w-3.5", "aria-hidden": true }) : /* @__PURE__ */ jsx16(ChevronUpIcon, { className: "h-3.5 w-3.5", "aria-hidden": true }),
             isCollapsed ? expandLabel : collapseLabel
           ]
         }
       ) : null
     ] });
   }
-  return /* @__PURE__ */ jsxs11("div", { className: "relative min-w-0", children: [
-    /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsxs12("div", { className: "relative min-w-0", children: [
+    /* @__PURE__ */ jsx16(
       "div",
       {
         ref: contentRef,
@@ -1898,10 +1983,10 @@ function CollapsibleText({
         children
       }
     ),
-    isCollapsed ? /* @__PURE__ */ jsx15("div", { className: "pointer-events-none absolute inset-x-0 bottom-0 flex justify-center", children: /* @__PURE__ */ jsx15(
+    isCollapsed ? /* @__PURE__ */ jsx16("div", { className: "pointer-events-none absolute inset-x-0 bottom-0 flex justify-center", children: /* @__PURE__ */ jsx16(
       Button2,
       {
-        icon: /* @__PURE__ */ jsx15(ChevronDownIcon, {}),
+        icon: /* @__PURE__ */ jsx16(ChevronDownIcon, {}),
         type: "button",
         variant: "outline",
         "aria-label": expandLabel,
@@ -1912,10 +1997,10 @@ function CollapsibleText({
         },
         className: "pointer-events-auto"
       }
-    ) }) : isOverflowing ? /* @__PURE__ */ jsx15("div", { className: "flex justify-center pt-0.5", children: /* @__PURE__ */ jsx15(
+    ) }) : isOverflowing ? /* @__PURE__ */ jsx16("div", { className: "flex justify-center pt-0.5", children: /* @__PURE__ */ jsx16(
       Button2,
       {
-        icon: /* @__PURE__ */ jsx15(ChevronUpIcon, {}),
+        icon: /* @__PURE__ */ jsx16(ChevronUpIcon, {}),
         type: "button",
         variant: "quiet",
         "aria-label": collapseLabel,
@@ -1935,12 +2020,12 @@ function CollapsibleTextGroupControls({
   anyExpanded,
   disabled = false
 }) {
-  return /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-0.5", children: [
-    /* @__PURE__ */ jsxs11(Tooltip, { children: [
-      /* @__PURE__ */ jsx15(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsxs12("div", { className: "flex items-center gap-0.5", children: [
+    /* @__PURE__ */ jsxs12(Tooltip, { children: [
+      /* @__PURE__ */ jsx16(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx16(
         Button2,
         {
-          icon: /* @__PURE__ */ jsx15(ChevronsDownIcon, { className: "!size-[18px] lg:!size-3.5" }),
+          icon: /* @__PURE__ */ jsx16(ChevronsDownIcon, { className: "!size-[18px] lg:!size-3.5" }),
           type: "button",
           variant: "quiet",
           "aria-label": "Expand all",
@@ -1948,13 +2033,13 @@ function CollapsibleTextGroupControls({
           disabled: disabled || allExpanded
         }
       ) }),
-      /* @__PURE__ */ jsx15(TooltipContent, { side: "top", children: "Expand all" })
+      /* @__PURE__ */ jsx16(TooltipContent, { side: "top", children: "Expand all" })
     ] }),
-    /* @__PURE__ */ jsxs11(Tooltip, { children: [
-      /* @__PURE__ */ jsx15(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx15(
+    /* @__PURE__ */ jsxs12(Tooltip, { children: [
+      /* @__PURE__ */ jsx16(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx16(
         Button2,
         {
-          icon: /* @__PURE__ */ jsx15(ChevronsUpIcon, { className: "!size-[18px] lg:!size-3.5" }),
+          icon: /* @__PURE__ */ jsx16(ChevronsUpIcon, { className: "!size-[18px] lg:!size-3.5" }),
           type: "button",
           variant: "quiet",
           "aria-label": "Collapse all",
@@ -1962,14 +2047,14 @@ function CollapsibleTextGroupControls({
           disabled: disabled || !anyExpanded
         }
       ) }),
-      /* @__PURE__ */ jsx15(TooltipContent, { side: "top", children: "Collapse all" })
+      /* @__PURE__ */ jsx16(TooltipContent, { side: "top", children: "Collapse all" })
     ] })
   ] });
 }
 
 // src/controls/info-hint.tsx
 import { useState as useState9, useSyncExternalStore } from "react";
-import { jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
 var COARSE_POINTER_QUERY = "(pointer: coarse)";
 function subscribeCoarse(onChange) {
   const mq = window.matchMedia(COARSE_POINTER_QUERY);
@@ -1993,10 +2078,10 @@ function InfoHint({ text, label = "More info", className, side = "top" }) {
   const coarse = useCoarsePointer();
   const isMobile = useIsMobile();
   const [open, setOpen] = useState9(false);
-  const glyph = /* @__PURE__ */ jsx16(InfoIcon, { "aria-hidden": true, className: "h-3.5 w-3.5", strokeWidth: 2 });
+  const glyph = /* @__PURE__ */ jsx17(InfoIcon, { "aria-hidden": true, className: "h-3.5 w-3.5", strokeWidth: 2 });
   if (coarse || isMobile) {
-    return /* @__PURE__ */ jsxs12(Popover, { open, onOpenChange: setOpen, children: [
-      /* @__PURE__ */ jsx16(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx16(
+    return /* @__PURE__ */ jsxs13(Popover, { open, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ jsx17(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx17(
         "button",
         {
           type: "button",
@@ -2010,7 +2095,7 @@ function InfoHint({ text, label = "More info", className, side = "top" }) {
           children: glyph
         }
       ) }),
-      /* @__PURE__ */ jsx16(
+      /* @__PURE__ */ jsx17(
         PopoverContent,
         {
           side,
@@ -2027,8 +2112,8 @@ function InfoHint({ text, label = "More info", className, side = "top" }) {
   return (
     // Brings its own provider: an official component works wherever it is imported (a
     // test, a portal, a page without the app shell) — 2026-09-30, final-switch tests.
-    /* @__PURE__ */ jsx16(TooltipProvider, { delayDuration: 200, children: /* @__PURE__ */ jsxs12(Tooltip, { open, onOpenChange: setOpen, children: [
-      /* @__PURE__ */ jsx16(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx16(
+    /* @__PURE__ */ jsx17(TooltipProvider, { delayDuration: 200, children: /* @__PURE__ */ jsxs13(Tooltip, { open, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ jsx17(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx17(
         "button",
         {
           type: "button",
@@ -2044,13 +2129,13 @@ function InfoHint({ text, label = "More info", className, side = "top" }) {
           children: glyph
         }
       ) }),
-      /* @__PURE__ */ jsx16(TooltipContent, { side, className: CONTENT_CLASS, onClick: isolate, children: text })
+      /* @__PURE__ */ jsx17(TooltipContent, { side, className: CONTENT_CLASS, onClick: isolate, children: text })
     ] }) })
   );
 }
 
 // src/controls/status-badge.tsx
-import { jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
 var STATUS_TONES = ["success", "warning", "danger", "neutral", "info"];
 var TONE_CLASS = {
   success: "border-success/40 bg-success/15 text-success-ink",
@@ -2066,7 +2151,7 @@ var SIZE_CLASS = {
 };
 function StatusBadge({ label, tone: tone2, icon: Icon, size = "md", title, trailing, className }) {
   const s = SIZE_CLASS[size];
-  return /* @__PURE__ */ jsxs13(
+  return /* @__PURE__ */ jsxs14(
     "span",
     {
       role: "status",
@@ -2082,7 +2167,7 @@ function StatusBadge({ label, tone: tone2, icon: Icon, size = "md", title, trail
         className
       ),
       children: [
-        Icon ? /* @__PURE__ */ jsx17(Icon, { "aria-hidden": true, className: cn("shrink-0", s.icon) }) : null,
+        Icon ? /* @__PURE__ */ jsx18(Icon, { "aria-hidden": true, className: cn("shrink-0", s.icon) }) : null,
         label,
         trailing
       ]
@@ -2092,7 +2177,7 @@ function StatusBadge({ label, tone: tone2, icon: Icon, size = "md", title, trail
 
 // src/controls/structured-section-card.tsx
 import * as React6 from "react";
-import { jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs15 } from "react/jsx-runtime";
 var TITLE_TONE = {
   primary: "text-primary-ink",
   foreground: "text-foreground"
@@ -2109,24 +2194,24 @@ function StructuredSectionCard({
   className
 }) {
   const hasFooter = footerLeft || footerCenter || footerRight;
-  return /* @__PURE__ */ jsxs14(
+  return /* @__PURE__ */ jsxs15(
     "div",
     {
       "data-slot": "structured-section-card",
       className: cn("overflow-hidden rounded-xl border-border bg-textured shadow-sm", className),
       children: [
-        /* @__PURE__ */ jsxs14("div", { className: "flex items-center justify-between border-b border-border bg-muted px-4 py-3", children: [
-          /* @__PURE__ */ jsxs14("div", { className: "min-w-0", children: [
-            /* @__PURE__ */ jsx18("h3", { className: cn("font-medium", TITLE_TONE[titleTone]), children: title }),
-            description && /* @__PURE__ */ jsx18("p", { className: "type-body text-muted-foreground", children: description })
+        /* @__PURE__ */ jsxs15("div", { className: "flex items-center justify-between border-b border-border bg-muted px-4 py-3", children: [
+          /* @__PURE__ */ jsxs15("div", { className: "min-w-0", children: [
+            /* @__PURE__ */ jsx19("h3", { className: cn("font-medium", TITLE_TONE[titleTone]), children: title }),
+            description && /* @__PURE__ */ jsx19("p", { className: "type-body text-muted-foreground", children: description })
           ] }),
-          headerActions.length > 0 && /* @__PURE__ */ jsx18("div", { className: "ml-4 flex shrink-0 items-center space-x-2", children: headerActions.map((action, index) => /* @__PURE__ */ jsx18(React6.Fragment, { children: action }, index)) })
+          headerActions.length > 0 && /* @__PURE__ */ jsx19("div", { className: "ml-4 flex shrink-0 items-center space-x-2", children: headerActions.map((action, index) => /* @__PURE__ */ jsx19(React6.Fragment, { children: action }, index)) })
         ] }),
-        /* @__PURE__ */ jsx18("div", { className: "p-4", children }),
-        hasFooter && /* @__PURE__ */ jsxs14("div", { className: "flex flex-wrap items-center border-t border-border px-4 py-3", children: [
-          /* @__PURE__ */ jsx18("div", { className: "flex min-w-[33%] flex-1 justify-start space-x-2 sm:min-w-0", children: footerLeft }),
-          /* @__PURE__ */ jsx18("div", { className: "mt-2 flex min-w-[33%] flex-1 justify-center space-x-2 sm:mt-0 sm:min-w-0", children: footerCenter }),
-          /* @__PURE__ */ jsx18("div", { className: "mt-2 flex min-w-[33%] flex-1 justify-end space-x-2 sm:mt-0 sm:min-w-0", children: footerRight })
+        /* @__PURE__ */ jsx19("div", { className: "p-4", children }),
+        hasFooter && /* @__PURE__ */ jsxs15("div", { className: "flex flex-wrap items-center border-t border-border px-4 py-3", children: [
+          /* @__PURE__ */ jsx19("div", { className: "flex min-w-[33%] flex-1 justify-start space-x-2 sm:min-w-0", children: footerLeft }),
+          /* @__PURE__ */ jsx19("div", { className: "mt-2 flex min-w-[33%] flex-1 justify-center space-x-2 sm:mt-0 sm:min-w-0", children: footerCenter }),
+          /* @__PURE__ */ jsx19("div", { className: "mt-2 flex min-w-[33%] flex-1 justify-end space-x-2 sm:mt-0 sm:min-w-0", children: footerRight })
         ] })
       ]
     }
@@ -2134,7 +2219,7 @@ function StructuredSectionCard({
 }
 
 // src/controls/icon-dropdown-menu.tsx
-import { jsx as jsx19, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs16 } from "react/jsx-runtime";
 function IconDropdownMenu({
   options,
   value,
@@ -2149,21 +2234,21 @@ function IconDropdownMenu({
     console.warn("IconDropdownMenu: no option to show \u2014 pass at least one option.");
     return null;
   }
-  return /* @__PURE__ */ jsxs15(DropdownMenu, { children: [
-    /* @__PURE__ */ jsx19(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsxs16(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx20(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx20(
       Button2,
       {
-        icon: /* @__PURE__ */ jsx19(SelectedIcon, {}),
-        iconEnd: /* @__PURE__ */ jsx19(ChevronDownIcon, {}),
+        icon: /* @__PURE__ */ jsx20(SelectedIcon, {}),
+        iconEnd: /* @__PURE__ */ jsx20(ChevronDownIcon, {}),
         variant: "outline",
         "aria-label": selected.label,
         ...className ? { className } : {}
       }
     ) }),
-    /* @__PURE__ */ jsx19(DropdownMenuContent, { align, className: cn("rounded-2xl p-1", menuWidth), children: options.map((option) => {
+    /* @__PURE__ */ jsx20(DropdownMenuContent, { align, className: cn("rounded-2xl p-1", menuWidth), children: options.map((option) => {
       const isSelected = option.value === value;
       const OptionIcon = option.icon;
-      return /* @__PURE__ */ jsxs15(
+      return /* @__PURE__ */ jsxs16(
         DropdownMenuItem,
         {
           onClick: () => onValueChange(option.value),
@@ -2173,9 +2258,9 @@ function IconDropdownMenu({
             isSelected && "bg-primary/10"
           ),
           children: [
-            /* @__PURE__ */ jsx19(OptionIcon, { className: cn("h-4 w-4 shrink-0", isSelected ? "text-primary-ink" : "text-muted-foreground") }),
-            /* @__PURE__ */ jsx19("span", { className: cn("type-body flex-1 leading-tight", isSelected ? "font-medium text-primary-ink" : "text-foreground"), children: option.label }),
-            isSelected && /* @__PURE__ */ jsx19(CheckIcon, { className: "h-4 w-4 shrink-0 text-primary-ink" })
+            /* @__PURE__ */ jsx20(OptionIcon, { className: cn("h-4 w-4 shrink-0", isSelected ? "text-primary-ink" : "text-muted-foreground") }),
+            /* @__PURE__ */ jsx20("span", { className: cn("type-body flex-1 leading-tight", isSelected ? "font-medium text-primary-ink" : "text-foreground"), children: option.label }),
+            isSelected && /* @__PURE__ */ jsx20(CheckIcon, { className: "h-4 w-4 shrink-0 text-primary-ink" })
           ]
         },
         String(option.value)
@@ -2185,7 +2270,7 @@ function IconDropdownMenu({
 }
 
 // src/controls/field.tsx
-import { jsx as jsx20, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs17 } from "react/jsx-runtime";
 function LabeledField({
   label,
   htmlFor,
@@ -2204,9 +2289,9 @@ function LabeledField({
   const hasCounter = typeof count === "number";
   const overLimit = hasCounter && maxCount != null && count > maxCount;
   const nearLimit = hasCounter && maxCount != null && count > maxCount * 0.9 && !overLimit;
-  return /* @__PURE__ */ jsxs16("div", { "data-field-root": "", className: cn("group/field space-y-1.5", className), children: [
-    /* @__PURE__ */ jsxs16("div", { className: "flex items-center gap-1.5", children: [
-      /* @__PURE__ */ jsxs16(
+  return /* @__PURE__ */ jsxs17("div", { "data-field-root": "", className: cn("group/field space-y-1.5", className), children: [
+    /* @__PURE__ */ jsxs17("div", { className: "flex items-center gap-1.5", children: [
+      /* @__PURE__ */ jsxs17(
         Label,
         {
           htmlFor,
@@ -2216,27 +2301,27 @@ function LabeledField({
           ),
           children: [
             label,
-            required && /* @__PURE__ */ jsx20("span", { className: "text-destructive ml-1", "aria-hidden": true, children: "*" }),
-            !required && optional && /* @__PURE__ */ jsx20("span", { className: "text-muted-foreground ml-1.5 type-secondary font-normal", children: "(optional)" })
+            required && /* @__PURE__ */ jsx21("span", { className: "text-destructive ml-1", "aria-hidden": true, children: "*" }),
+            !required && optional && /* @__PURE__ */ jsx21("span", { className: "text-muted-foreground ml-1.5 type-secondary font-normal", children: "(optional)" })
           ]
         }
       ),
-      typeof help === "string" && help && /* @__PURE__ */ jsx20(InfoHint, { text: help, label: typeof label === "string" ? `About ${label}` : "Help" }),
-      help && typeof help !== "string" && /* @__PURE__ */ jsx20(TooltipProvider, { delayDuration: 150, children: /* @__PURE__ */ jsxs16(Tooltip, { children: [
-        /* @__PURE__ */ jsx20(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx20(
+      typeof help === "string" && help && /* @__PURE__ */ jsx21(InfoHint, { text: help, label: typeof label === "string" ? `About ${label}` : "Help" }),
+      help && typeof help !== "string" && /* @__PURE__ */ jsx21(TooltipProvider, { delayDuration: 150, children: /* @__PURE__ */ jsxs17(Tooltip, { children: [
+        /* @__PURE__ */ jsx21(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx21(
           "button",
           {
             type: "button",
             "aria-label": "Help",
             className: "inline-flex items-center justify-center h-4 w-4 rounded-full text-muted-foreground hover:text-foreground transition-colors",
-            children: /* @__PURE__ */ jsx20(CircleHelpIcon, { className: "h-3.5 w-3.5" })
+            children: /* @__PURE__ */ jsx21(CircleHelpIcon, { className: "h-3.5 w-3.5" })
           }
         ) }),
-        /* @__PURE__ */ jsx20(TooltipContent, { side: "top", className: "max-w-xs type-secondary", children: help })
+        /* @__PURE__ */ jsx21(TooltipContent, { side: "top", className: "max-w-xs type-secondary", children: help })
       ] }) })
     ] }),
-    description && !error && /* @__PURE__ */ jsx20("p", { className: "type-secondary text-muted-foreground", children: description }),
-    /* @__PURE__ */ jsx20(
+    description && !error && /* @__PURE__ */ jsx21("p", { className: "type-secondary text-muted-foreground", children: description }),
+    /* @__PURE__ */ jsx21(
       "div",
       {
         "data-slot": "field-control",
@@ -2247,7 +2332,7 @@ function LabeledField({
         children
       }
     ),
-    (error || hasCounter || requiredEmpty) && /* @__PURE__ */ jsxs16(
+    (error || hasCounter || requiredEmpty) && /* @__PURE__ */ jsxs17(
       "div",
       {
         className: cn(
@@ -2259,10 +2344,10 @@ function LabeledField({
           !error && !hasCounter && "hidden [[data-field-root]:has(:placeholder-shown)_&]:flex"
         ),
         children: [
-          error ? /* @__PURE__ */ jsxs16("p", { className: "type-secondary text-destructive flex items-center gap-1", children: [
-            /* @__PURE__ */ jsx20(CircleAlertIcon, { className: "h-3 w-3 flex-shrink-0" }),
-            /* @__PURE__ */ jsx20("span", { children: error }),
-            /* @__PURE__ */ jsx20(
+          error ? /* @__PURE__ */ jsxs17("p", { className: "type-secondary text-destructive flex items-center gap-1", children: [
+            /* @__PURE__ */ jsx21(CircleAlertIcon, { className: "h-3 w-3 flex-shrink-0" }),
+            /* @__PURE__ */ jsx21("span", { children: error }),
+            /* @__PURE__ */ jsx21(
               ErrorActions,
               {
                 ...typeof error === "string" ? { message: error } : {},
@@ -2270,18 +2355,18 @@ function LabeledField({
                 origin: "design-system/LabeledField"
               }
             )
-          ] }) : requiredEmpty ? /* @__PURE__ */ jsxs16(
+          ] }) : requiredEmpty ? /* @__PURE__ */ jsxs17(
             "p",
             {
               "data-slot": "field-empty-notice",
               className: "hidden type-secondary text-muted-foreground items-center gap-1 [[data-field-root]:has(:placeholder-shown)_&]:flex",
               children: [
-                /* @__PURE__ */ jsx20(CircleAlertIcon, { className: "h-3 w-3 flex-shrink-0" }),
-                /* @__PURE__ */ jsx20("span", { children: "Empty \u2014 the gray text is an example, not your answer." })
+                /* @__PURE__ */ jsx21(CircleAlertIcon, { className: "h-3 w-3 flex-shrink-0" }),
+                /* @__PURE__ */ jsx21("span", { children: "Empty \u2014 the gray text is an example, not your answer." })
               ]
             }
-          ) : /* @__PURE__ */ jsx20("span", {}),
-          hasCounter && /* @__PURE__ */ jsx20(
+          ) : /* @__PURE__ */ jsx21("span", {}),
+          hasCounter && /* @__PURE__ */ jsx21(
             "span",
             {
               className: cn(
@@ -2304,7 +2389,7 @@ import { openClipboardFallback } from "@ai-matrx/kit/clipboard-fallback-opener";
 import { toast } from "@ai-matrx/kit/notify";
 import * as React7 from "react";
 import { createPortal } from "react-dom";
-import { jsx as jsx21, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs18 } from "react/jsx-runtime";
 var { useState: useState10, useLayoutEffect: useLayoutEffect2, useRef: useRef4 } = React7;
 function HelpIcon({
   text,
@@ -2403,13 +2488,13 @@ function HelpIcon({
   }, [isVisible]);
   const formatTextWithLineBreaks = (text2) => {
     const processedText = text2.replace(/\\n/g, "\n");
-    return processedText.split("\n").map((line, index) => /* @__PURE__ */ jsxs17(React7.Fragment, { children: [
-      index > 0 && /* @__PURE__ */ jsx21("br", {}),
+    return processedText.split("\n").map((line, index) => /* @__PURE__ */ jsxs18(React7.Fragment, { children: [
+      index > 0 && /* @__PURE__ */ jsx22("br", {}),
       line
     ] }, index));
   };
   if (!text && !content) return null;
-  return /* @__PURE__ */ jsxs17(
+  return /* @__PURE__ */ jsxs18(
     "div",
     {
       className: `inline-block relative cursor-help ${className}`,
@@ -2417,9 +2502,9 @@ function HelpIcon({
       onMouseEnter: showTooltip,
       onMouseLeave: hideTooltip,
       children: [
-        /* @__PURE__ */ jsx21(InfoIcon, { className: "h-4 w-4 text-muted-foreground transition-colors duration-200" }),
+        /* @__PURE__ */ jsx22(InfoIcon, { className: "h-4 w-4 text-muted-foreground transition-colors duration-200" }),
         isVisible && typeof document !== "undefined" && createPortal(
-          /* @__PURE__ */ jsxs17(
+          /* @__PURE__ */ jsxs18(
             "div",
             {
               ref: tooltipRef,
@@ -2432,29 +2517,29 @@ function HelpIcon({
               onMouseEnter: cancelHideTooltip,
               onMouseLeave: hideTooltip,
               children: [
-                /* @__PURE__ */ jsxs17("div", { className: "p-3", children: [
-                  /* @__PURE__ */ jsxs17("div", { className: "flex items-center gap-2 mb-2", children: [
-                    /* @__PURE__ */ jsx21(CircleHelpIcon, { className: "h-4 w-4 flex-shrink-0 text-info-ink" }),
-                    title && /* @__PURE__ */ jsx21("h3", { className: "text-foreground type-title", children: title }),
-                    text && /* @__PURE__ */ jsx21(
+                /* @__PURE__ */ jsxs18("div", { className: "p-3", children: [
+                  /* @__PURE__ */ jsxs18("div", { className: "flex items-center gap-2 mb-2", children: [
+                    /* @__PURE__ */ jsx22(CircleHelpIcon, { className: "h-4 w-4 flex-shrink-0 text-info-ink" }),
+                    title && /* @__PURE__ */ jsx22("h3", { className: "text-foreground type-title", children: title }),
+                    text && /* @__PURE__ */ jsx22(
                       Button2,
                       {
                         variant: "quiet",
                         className: "ml-auto",
-                        icon: copied ? /* @__PURE__ */ jsx21(CheckIcon, {}) : /* @__PURE__ */ jsx21(CopyIcon, {}),
+                        icon: copied ? /* @__PURE__ */ jsx22(CheckIcon, {}) : /* @__PURE__ */ jsx22(CopyIcon, {}),
                         "aria-label": "Copy to clipboard",
                         onClick: handleCopy
                       }
                     )
                   ] }),
-                  /* @__PURE__ */ jsx21("div", { className: "type-body text-foreground leading-relaxed", children: content ? content : text && formatTextWithLineBreaks(text) }),
-                  required && /* @__PURE__ */ jsxs17("div", { className: "mt-3 inline-flex items-center gap-1.5 px-2.5 py-1 bg-warning/15 text-warning-ink type-secondary font-medium rounded-full", children: [
-                    /* @__PURE__ */ jsx21("div", { className: "w-1.5 h-1.5 bg-warning-ink rounded-full" }),
+                  /* @__PURE__ */ jsx22("div", { className: "type-body text-foreground leading-relaxed", children: content ? content : text && formatTextWithLineBreaks(text) }),
+                  required && /* @__PURE__ */ jsxs18("div", { className: "mt-3 inline-flex items-center gap-1.5 px-2.5 py-1 bg-warning/15 text-warning-ink type-secondary font-medium rounded-full", children: [
+                    /* @__PURE__ */ jsx22("div", { className: "w-1.5 h-1.5 bg-warning-ink rounded-full" }),
                     "Required Field"
                   ] }),
-                  onAiAssistance && /* @__PURE__ */ jsx21(Button2, { variant: "primary", icon: /* @__PURE__ */ jsx21(CircleDotIcon, {}), className: "mt-3 w-full", onClick: handleAiClick, children: "Get Help From Matrx AI" })
+                  onAiAssistance && /* @__PURE__ */ jsx22(Button2, { variant: "primary", icon: /* @__PURE__ */ jsx22(CircleDotIcon, {}), className: "mt-3 w-full", onClick: handleAiClick, children: "Get Help From Matrx AI" })
                 ] }),
-                /* @__PURE__ */ jsx21("div", { className: "absolute -bottom-1.5 left-1/2 -translate-x-1/2 w-3 h-3 bg-textured border-r border-b border-border rotate-45" })
+                /* @__PURE__ */ jsx22("div", { className: "absolute -bottom-1.5 left-1/2 -translate-x-1/2 w-3 h-3 bg-textured border-r border-b border-border rotate-45" })
               ]
             }
           ),
@@ -2470,7 +2555,7 @@ import { copyText as copyText2 } from "@ai-matrx/kit/clipboard";
 import { toast as toast2 } from "@ai-matrx/kit/notify";
 import { openClipboardFallback as openClipboardFallback2 } from "@ai-matrx/kit/clipboard-fallback-opener";
 import * as React8 from "react";
-import { jsx as jsx22, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs19 } from "react/jsx-runtime";
 function cleanUrl(url) {
   try {
     const parsed = new URL(url);
@@ -2526,9 +2611,9 @@ function TextArrayInput({
     handleChange([...value, ...added]);
     setInputValue("");
   };
-  return /* @__PURE__ */ jsxs18("div", { className: `space-y-3 ${className}`, children: [
-    /* @__PURE__ */ jsxs18("form", { onSubmit: handleSubmit, className: "relative w-full", children: [
-      /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsxs19("div", { className: `space-y-3 ${className}`, children: [
+    /* @__PURE__ */ jsxs19("form", { onSubmit: handleSubmit, className: "relative w-full", children: [
+      /* @__PURE__ */ jsx23(
         Input,
         {
           adornment: "end",
@@ -2542,12 +2627,12 @@ function TextArrayInput({
           className: "w-full"
         }
       ),
-      showCopyIcon && value.length > 0 && /* @__PURE__ */ jsx22(
+      showCopyIcon && value.length > 0 && /* @__PURE__ */ jsx23(
         Button2,
         {
           ...tabIndexProp,
           variant: "quiet",
-          icon: copied ? /* @__PURE__ */ jsx22(CheckIcon, {}) : /* @__PURE__ */ jsx22(CopyIcon, {}),
+          icon: copied ? /* @__PURE__ */ jsx23(CheckIcon, {}) : /* @__PURE__ */ jsx23(CopyIcon, {}),
           ...copied ? { glyphTone: "success" } : {},
           "aria-label": "Copy values",
           onClick: handleCopy,
@@ -2555,13 +2640,13 @@ function TextArrayInput({
         }
       )
     ] }),
-    /* @__PURE__ */ jsx22("div", { className: "flex flex-wrap gap-2", children: value.length === 0 ? /* @__PURE__ */ jsx22("span", { className: "type-body inline-flex items-center rounded-full bg-muted px-3 py-1 text-muted-foreground", children: "None Added" }) : value.map((item, index) => /* @__PURE__ */ jsxs18(
+    /* @__PURE__ */ jsx23("div", { className: "flex flex-wrap gap-2", children: value.length === 0 ? /* @__PURE__ */ jsx23("span", { className: "type-body inline-flex items-center rounded-full bg-muted px-3 py-1 text-muted-foreground", children: "None Added" }) : value.map((item, index) => /* @__PURE__ */ jsxs19(
       "span",
       {
         className: `inline-flex cursor-default items-center gap-1 rounded-full px-3 py-1 text-sm transition-all duration-200 ${chipClassName}`,
         children: [
           item,
-          /* @__PURE__ */ jsx22(
+          /* @__PURE__ */ jsx23(
             "button",
             {
               ...tabIndexProp,
@@ -2572,7 +2657,7 @@ function TextArrayInput({
               },
               className: "cursor-pointer rounded-full p-0.5 transition-colors duration-200 hover:bg-primary-foreground/20",
               "aria-label": `Remove ${item}`,
-              children: /* @__PURE__ */ jsx22(XIcon, { className: "h-3.5 w-3.5" })
+              children: /* @__PURE__ */ jsx23(XIcon, { className: "h-3.5 w-3.5" })
             }
           )
         ]
@@ -2583,7 +2668,7 @@ function TextArrayInput({
 }
 
 // src/read-state/untrusted-count.tsx
-import { jsx as jsx23 } from "react/jsx-runtime";
+import { jsx as jsx24 } from "react/jsx-runtime";
 function countReadState(input) {
   const { read, trustworthy } = input;
   if (trustworthy === false) return "failed";
@@ -2612,7 +2697,7 @@ function UntrustedCount({
   const state = countReadState({ read, trustworthy });
   if (state === "ready") {
     if (countIsStale(read)) {
-      return /* @__PURE__ */ jsx23(
+      return /* @__PURE__ */ jsx24(
         "span",
         {
           className,
@@ -2622,12 +2707,12 @@ function UntrustedCount({
         }
       );
     }
-    return /* @__PURE__ */ jsx23("span", { className, children: value });
+    return /* @__PURE__ */ jsx24("span", { className, children: value });
   }
   if (state === "loading") {
-    return /* @__PURE__ */ jsx23("span", { className, "aria-busy": "true", "aria-label": `${label} loading`, children: "\u2026" });
+    return /* @__PURE__ */ jsx24("span", { className, "aria-busy": "true", "aria-label": `${label} loading`, children: "\u2026" });
   }
-  return /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsx24(
     "span",
     {
       className,
@@ -2639,7 +2724,7 @@ function UntrustedCount({
 }
 
 // src/controls/kpi-tile.tsx
-import { Fragment as Fragment6, jsx as jsx24, jsxs as jsxs19 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx25, jsxs as jsxs20 } from "react/jsx-runtime";
 var TONE_VALUE = {
   neutral: "text-foreground",
   good: "text-success-ink",
@@ -2662,7 +2747,7 @@ function KpiSparkline({ trend, label }) {
   const range = Math.max(max - min, Math.abs(max) * 0.1) || 1;
   const y = (v) => max === min ? SPARK_H / 2 : SPARK_H - 2 - (v - min) / range * (SPARK_H - 4);
   const pts = trend.values.map((v, i) => `${(i / (n - 1) * SPARK_W).toFixed(1)},${y(v).toFixed(1)}`).join(" ");
-  return /* @__PURE__ */ jsxs19(
+  return /* @__PURE__ */ jsxs20(
     "svg",
     {
       viewBox: `0 0 ${SPARK_W} ${SPARK_H}`,
@@ -2671,9 +2756,9 @@ function KpiSparkline({ trend, label }) {
       "aria-label": `${trend.label ?? label}, last ${trend.period}`,
       className: "h-5 w-16 shrink-0 text-primary",
       children: [
-        /* @__PURE__ */ jsx24("title", { children: `${trend.label ?? label}, last ${trend.period}` }),
-        max === min ? null : /* @__PURE__ */ jsx24("polygon", { points: `0,${SPARK_H} ${pts} ${SPARK_W},${SPARK_H}`, fill: "currentColor", fillOpacity: 0.15 }),
-        /* @__PURE__ */ jsx24("polyline", { points: pts, fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinejoin: "round", vectorEffect: "non-scaling-stroke" })
+        /* @__PURE__ */ jsx25("title", { children: `${trend.label ?? label}, last ${trend.period}` }),
+        max === min ? null : /* @__PURE__ */ jsx25("polygon", { points: `0,${SPARK_H} ${pts} ${SPARK_W},${SPARK_H}`, fill: "currentColor", fillOpacity: 0.15 }),
+        /* @__PURE__ */ jsx25("polyline", { points: pts, fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinejoin: "round", vectorEffect: "non-scaling-stroke" })
       ]
     }
   );
@@ -2695,19 +2780,19 @@ function KpiTile({
   const failed = readState === "failed";
   const shown = failed ? null : value;
   const dot = TONE_DOT[tone2];
-  const body = /* @__PURE__ */ jsxs19(Fragment6, { children: [
-    /* @__PURE__ */ jsxs19("div", { className: "flex min-w-0 items-start gap-1.5 type-meta font-medium uppercase tracking-wide text-muted-foreground", children: [
-      dot ? /* @__PURE__ */ jsx24("span", { "aria-hidden": true, className: cn("mt-1 inline-block h-2 w-2 shrink-0 rounded-sm", dot) }) : null,
-      /* @__PURE__ */ jsxs19("span", { className: "line-clamp-2 break-words", children: [
+  const body = /* @__PURE__ */ jsxs20(Fragment6, { children: [
+    /* @__PURE__ */ jsxs20("div", { className: "flex min-w-0 items-start gap-1.5 type-meta font-medium uppercase tracking-wide text-muted-foreground", children: [
+      dot ? /* @__PURE__ */ jsx25("span", { "aria-hidden": true, className: cn("mt-1 inline-block h-2 w-2 shrink-0 rounded-sm", dot) }) : null,
+      /* @__PURE__ */ jsxs20("span", { className: "line-clamp-2 break-words", children: [
         label,
-        title ? /* @__PURE__ */ jsxs19(Fragment6, { children: [
+        title ? /* @__PURE__ */ jsxs20(Fragment6, { children: [
           " ",
-          /* @__PURE__ */ jsx24(InfoHint, { text: title, label: `What ${label} means` })
+          /* @__PURE__ */ jsx25(InfoHint, { text: title, label: `What ${label} means` })
         ] }) : null
       ] })
     ] }),
-    loading ? /* @__PURE__ */ jsx24("div", { className: "my-0.5 h-6 w-12 animate-pulse rounded bg-muted", "aria-hidden": true }) : /* @__PURE__ */ jsxs19("div", { className: "flex min-w-0 items-end justify-between gap-2", children: [
-      /* @__PURE__ */ jsx24(
+    loading ? /* @__PURE__ */ jsx25("div", { className: "my-0.5 h-6 w-12 animate-pulse rounded bg-muted", "aria-hidden": true }) : /* @__PURE__ */ jsxs20("div", { className: "flex min-w-0 items-end justify-between gap-2", children: [
+      /* @__PURE__ */ jsx25(
         "div",
         {
           className: cn(
@@ -2719,16 +2804,16 @@ function KpiTile({
           children: shown === null ? "\u2014" : shown
         }
       ),
-      trend && shown !== null ? /* @__PURE__ */ jsx24(KpiSparkline, { trend, label }) : null
+      trend && shown !== null ? /* @__PURE__ */ jsx25(KpiSparkline, { trend, label }) : null
     ] }),
-    hint ? /* @__PURE__ */ jsx24("div", { className: "truncate type-meta text-muted-foreground", children: hint }) : null
+    hint ? /* @__PURE__ */ jsx25("div", { className: "truncate type-meta text-muted-foreground", children: hint }) : null
   ] });
   const shell = cn(
     "flex min-w-0 flex-col gap-0.5 rounded-md border border-border bg-card px-3 py-2",
     className
   );
   if (href && !loading && shown !== null) {
-    return /* @__PURE__ */ jsx24(
+    return /* @__PURE__ */ jsx25(
       HostLink,
       {
         href,
@@ -2741,13 +2826,13 @@ function KpiTile({
       }
     );
   }
-  return /* @__PURE__ */ jsx24("div", { className: shell, "data-look-surface": "card", "aria-busy": loading || void 0, children: body });
+  return /* @__PURE__ */ jsx25("div", { className: shell, "data-look-surface": "card", "aria-busy": loading || void 0, children: body });
 }
 function KpiGrid({
   children,
   className
 }) {
-  return /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsx25(
     "div",
     {
       className: cn(
@@ -2761,7 +2846,7 @@ function KpiGrid({
 
 // src/controls/action-feedback-button.tsx
 import * as React9 from "react";
-import { jsx as jsx25, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs21 } from "react/jsx-runtime";
 function ActionFeedbackButton({
   icon,
   tooltip,
@@ -2787,11 +2872,11 @@ function ActionFeedbackButton({
     timer.current = setTimeout(() => setShowSuccess(false), feedbackDuration);
   };
   const text = showSuccess ? successTooltip : disabled && disabledTooltip ? disabledTooltip : tooltip;
-  const button = /* @__PURE__ */ jsx25(
+  const button = /* @__PURE__ */ jsx26(
     Button2,
     {
       variant,
-      icon: showSuccess ? successIcon ?? /* @__PURE__ */ jsx25(CheckCircle2Icon, {}) : icon,
+      icon: showSuccess ? successIcon ?? /* @__PURE__ */ jsx26(CheckCircle2Icon, {}) : icon,
       ...showSuccess ? { glyphTone: "success" } : glyphTone ? { glyphTone } : {},
       ...props,
       "aria-label": text,
@@ -2799,15 +2884,15 @@ function ActionFeedbackButton({
       onClick: handleClick
     }
   );
-  return /* @__PURE__ */ jsxs20(Tooltip, { children: [
-    /* @__PURE__ */ jsx25(TooltipTrigger, { asChild: true, children: disabled ? /* @__PURE__ */ jsx25("span", { className: "inline-flex", children: button }) : button }),
-    /* @__PURE__ */ jsx25(TooltipContent, { side: "bottom", sideOffset: 5, className: "z-[9999]", children: text })
+  return /* @__PURE__ */ jsxs21(Tooltip, { children: [
+    /* @__PURE__ */ jsx26(TooltipTrigger, { asChild: true, children: disabled ? /* @__PURE__ */ jsx26("span", { className: "inline-flex", children: button }) : button }),
+    /* @__PURE__ */ jsx26(TooltipContent, { side: "bottom", sideOffset: 5, className: "z-[9999]", children: text })
   ] });
 }
 
 // src/controls/citation-chip.tsx
 import { useState as useState13 } from "react";
-import { jsx as jsx26, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs22 } from "react/jsx-runtime";
 function CitationPopoverBody({
   icon: Icon,
   label,
@@ -2817,32 +2902,32 @@ function CitationPopoverBody({
   onOpen,
   openLabel = "Open source"
 }) {
-  return /* @__PURE__ */ jsxs21("div", { className: "flex flex-col gap-2", children: [
-    /* @__PURE__ */ jsxs21("div", { className: "flex items-start gap-2", children: [
-      /* @__PURE__ */ jsx26(
+  return /* @__PURE__ */ jsxs22("div", { className: "flex flex-col gap-2", children: [
+    /* @__PURE__ */ jsxs22("div", { className: "flex items-start gap-2", children: [
+      /* @__PURE__ */ jsx27(
         Icon,
         {
           className: "mt-0.5 h-4 w-4 shrink-0 text-muted-foreground",
           "aria-hidden": true
         }
       ),
-      /* @__PURE__ */ jsxs21("div", { className: "min-w-0", children: [
-        /* @__PURE__ */ jsx26("p", { className: "truncate type-title text-foreground", children: label }),
-        locator && /* @__PURE__ */ jsx26("p", { className: "type-secondary text-muted-foreground", children: locator })
+      /* @__PURE__ */ jsxs22("div", { className: "min-w-0", children: [
+        /* @__PURE__ */ jsx27("p", { className: "truncate type-title text-foreground", children: label }),
+        locator && /* @__PURE__ */ jsx27("p", { className: "type-secondary text-muted-foreground", children: locator })
       ] })
     ] }),
-    excerpt && /* @__PURE__ */ jsxs21("blockquote", { className: "flex gap-2 rounded-md bg-muted/60 p-2 type-secondary italic text-muted-foreground", children: [
-      /* @__PURE__ */ jsx26(QuoteIcon, { className: "h-3 w-3 shrink-0", "aria-hidden": true }),
-      /* @__PURE__ */ jsx26("span", { className: cn("not-italic", clampExcerpt && "line-clamp-6"), children: excerpt })
+    excerpt && /* @__PURE__ */ jsxs22("blockquote", { className: "flex gap-2 rounded-md bg-muted/60 p-2 type-secondary italic text-muted-foreground", children: [
+      /* @__PURE__ */ jsx27(QuoteIcon, { className: "h-3 w-3 shrink-0", "aria-hidden": true }),
+      /* @__PURE__ */ jsx27("span", { className: cn("not-italic", clampExcerpt && "line-clamp-6"), children: excerpt })
     ] }),
-    onOpen && /* @__PURE__ */ jsxs21(
+    onOpen && /* @__PURE__ */ jsxs22(
       "button",
       {
         type: "button",
         onClick: onOpen,
         className: "inline-flex items-center gap-1 self-start text-xs font-medium text-primary hover:underline",
         children: [
-          /* @__PURE__ */ jsx26(ArrowUpRightIcon, { className: "h-3 w-3", "aria-hidden": true }),
+          /* @__PURE__ */ jsx27(ArrowUpRightIcon, { className: "h-3 w-3", "aria-hidden": true }),
           openLabel
         ]
       }
@@ -2862,8 +2947,8 @@ function CitationChip({
     setOpen(false);
     body.onOpen?.();
   } : void 0;
-  return /* @__PURE__ */ jsxs21(Popover, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsx26(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs21(
+  return /* @__PURE__ */ jsxs22(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx27(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs22(
       "button",
       {
         type: "button",
@@ -2873,20 +2958,20 @@ function CitationChip({
           chipClassName
         ),
         children: [
-          number != null && /* @__PURE__ */ jsx26("span", { className: "inline-flex h-4 min-w-4 shrink-0 items-center justify-center rounded-full bg-muted px-1 text-[0.65rem] font-medium leading-none text-muted-foreground", children: number }),
-          /* @__PURE__ */ jsx26(Icon, { className: "h-3 w-3 shrink-0 text-muted-foreground", "aria-hidden": true }),
-          /* @__PURE__ */ jsx26("span", { className: "truncate", children: label }),
-          chipSuffix && /* @__PURE__ */ jsx26("span", { className: "shrink-0 text-muted-foreground", children: chipSuffix })
+          number != null && /* @__PURE__ */ jsx27("span", { className: "inline-flex h-4 min-w-4 shrink-0 items-center justify-center rounded-full bg-muted px-1 text-[0.65rem] font-medium leading-none text-muted-foreground", children: number }),
+          /* @__PURE__ */ jsx27(Icon, { className: "h-3 w-3 shrink-0 text-muted-foreground", "aria-hidden": true }),
+          /* @__PURE__ */ jsx27("span", { className: "truncate", children: label }),
+          chipSuffix && /* @__PURE__ */ jsx27("span", { className: "shrink-0 text-muted-foreground", children: chipSuffix })
         ]
       }
     ) }),
-    /* @__PURE__ */ jsx26(PopoverContent, { sizing: "content", align: "start", className: "p-3", children: /* @__PURE__ */ jsx26(CitationPopoverBody, { ...body, onOpen }) })
+    /* @__PURE__ */ jsx27(PopoverContent, { sizing: "content", align: "start", className: "p-3", children: /* @__PURE__ */ jsx27(CitationPopoverBody, { ...body, onOpen }) })
   ] });
 }
 
 // src/controls/tool-rail.tsx
 import * as React10 from "react";
-import { jsx as jsx27, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx28, jsxs as jsxs23 } from "react/jsx-runtime";
 function ToolRail({
   groups,
   value,
@@ -2926,7 +3011,7 @@ function ToolRail({
       focusAt(enabled[enabled.length - 1]?.id);
     }
   };
-  return /* @__PURE__ */ jsx27(
+  return /* @__PURE__ */ jsx28(
     "div",
     {
       role: "toolbar",
@@ -2935,8 +3020,8 @@ function ToolRail({
       "data-matrx-tool-rail": "",
       "data-orientation": orientation,
       className: cn("flex w-fit shrink-0 items-center gap-1", vertical ? "flex-col" : "flex-row", className),
-      children: groups.map((group, gi) => /* @__PURE__ */ jsxs22(React10.Fragment, { children: [
-        gi > 0 ? /* @__PURE__ */ jsx27(
+      children: groups.map((group, gi) => /* @__PURE__ */ jsxs23(React10.Fragment, { children: [
+        gi > 0 ? /* @__PURE__ */ jsx28(
           "div",
           {
             role: "separator",
@@ -2948,8 +3033,8 @@ function ToolRail({
           const on = tool.id === value;
           const Icon = tool.icon;
           const name = tool.shortcut ? `${tool.label} (${tool.shortcut})` : tool.label;
-          return /* @__PURE__ */ jsxs22(Tooltip, { children: [
-            /* @__PURE__ */ jsx27(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx27(
+          return /* @__PURE__ */ jsxs23(Tooltip, { children: [
+            /* @__PURE__ */ jsx28(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx28(
               Button2,
               {
                 ref: (el) => {
@@ -2957,7 +3042,7 @@ function ToolRail({
                   else refs.current.delete(tool.id);
                 },
                 variant: on ? "primary" : "quiet",
-                icon: /* @__PURE__ */ jsx27(Icon, {}),
+                icon: /* @__PURE__ */ jsx28(Icon, {}),
                 "aria-label": name,
                 pressed: on,
                 disabled: tool.disabled,
@@ -2968,7 +3053,7 @@ function ToolRail({
                 onClick: () => onValueChange(on && allowDeselect ? null : tool.id, tool)
               }
             ) }),
-            /* @__PURE__ */ jsx27(TooltipContent, { side: vertical ? "right" : "bottom", sideOffset: 6, children: name })
+            /* @__PURE__ */ jsx28(TooltipContent, { side: vertical ? "right" : "bottom", sideOffset: 6, children: name })
           ] }, tool.id);
         })
       ] }, gi))
@@ -3048,7 +3133,7 @@ function formatPageRanges(pages) {
 }
 
 // src/controls/page-range-input.tsx
-import { jsx as jsx28, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx29, jsxs as jsxs24 } from "react/jsx-runtime";
 function PageRangeInput({
   value,
   onChange,
@@ -3065,8 +3150,8 @@ function PageRangeInput({
   const parsed = React11.useMemo(() => parsePageRanges(value, pageCount), [value, pageCount]);
   const first = parsed.issues[0];
   const hint = parsed.empty ? `${pageCount} page${pageCount === 1 ? "" : "s"}` : first ? first.hint : `${parsed.pages.length} page${parsed.pages.length === 1 ? "" : "s"}: ${formatPageRanges(parsed.pages)}`;
-  return /* @__PURE__ */ jsxs23("div", { className: cn("flex min-w-0 flex-col gap-1", className), "data-matrx-page-range-input": "", children: [
-    /* @__PURE__ */ jsx28(
+  return /* @__PURE__ */ jsxs24("div", { className: cn("flex min-w-0 flex-col gap-1", className), "data-matrx-page-range-input": "", children: [
+    /* @__PURE__ */ jsx29(
       Input,
       {
         id,
@@ -3085,7 +3170,7 @@ function PageRangeInput({
         }
       }
     ),
-    /* @__PURE__ */ jsx28(
+    /* @__PURE__ */ jsx29(
       "p",
       {
         id: hintId,
@@ -3100,7 +3185,7 @@ function PageRangeInput({
 
 // src/controls/opacity-slider.tsx
 import * as React12 from "react";
-import { jsx as jsx29, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx30, jsxs as jsxs25 } from "react/jsx-runtime";
 var clamp = (n, lo, hi) => Math.min(hi, Math.max(lo, n));
 var toPercent = (v) => Math.round(v * 100);
 function OpacitySlider({
@@ -3120,8 +3205,8 @@ function OpacitySlider({
     }
     setDraft(null);
   };
-  return /* @__PURE__ */ jsxs24("div", { className: cn("flex min-w-0 items-center gap-2", className), "data-matrx-opacity-slider": "", children: [
-    /* @__PURE__ */ jsx29(
+  return /* @__PURE__ */ jsxs25("div", { className: cn("flex min-w-0 items-center gap-2", className), "data-matrx-opacity-slider": "", children: [
+    /* @__PURE__ */ jsx30(
       Slider,
       {
         className: "min-w-0 flex-1",
@@ -3134,8 +3219,8 @@ function OpacitySlider({
         onValueChange: ([v]) => onChange(clamp((v ?? 0) / 100, min, max))
       }
     ),
-    /* @__PURE__ */ jsxs24("div", { className: "flex w-16 shrink-0 items-center gap-1", style: { ["--matrx-control-field-min"]: "0px" }, children: [
-      /* @__PURE__ */ jsx29(
+    /* @__PURE__ */ jsxs25("div", { className: "flex w-16 shrink-0 items-center gap-1", style: { ["--matrx-control-field-min"]: "0px" }, children: [
+      /* @__PURE__ */ jsx30(
         Input,
         {
           numeric: true,
@@ -3154,14 +3239,14 @@ function OpacitySlider({
           }
         }
       ),
-      /* @__PURE__ */ jsx29("span", { "aria-hidden": true, className: "text-xs text-muted-foreground", children: "%" })
+      /* @__PURE__ */ jsx30("span", { "aria-hidden": true, className: "text-xs text-muted-foreground", children: "%" })
     ] })
   ] });
 }
 
 // src/controls/color-swatch-row.tsx
 import * as React13 from "react";
-import { jsx as jsx30 } from "react/jsx-runtime";
+import { jsx as jsx31 } from "react/jsx-runtime";
 function ColorSwatchRow({
   colors,
   value,
@@ -3180,7 +3265,7 @@ function ColorSwatchRow({
     refs.current[i]?.focus();
     onChange(c.value, c);
   };
-  return /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsx31(
     "div",
     {
       role: "radiogroup",
@@ -3190,7 +3275,7 @@ function ColorSwatchRow({
       "data-matrx-color-swatch-row": "",
       children: colors.map((c, i) => {
         const on = i === chosen;
-        return /* @__PURE__ */ jsx30(
+        return /* @__PURE__ */ jsx31(
           "button",
           {
             ref: (el) => {
@@ -3228,7 +3313,7 @@ function ColorSwatchRow({
               on && "ring-2 ring-foreground ring-offset-1 ring-offset-background"
             ),
             style: { backgroundColor: c.value },
-            children: on ? /* @__PURE__ */ jsx30(RadixCheckIcon, { className: "size-3 mix-blend-difference text-white" }) : null
+            children: on ? /* @__PURE__ */ jsx31(RadixCheckIcon, { className: "size-3 mix-blend-difference text-white" }) : null
           },
           `${c.value}-${i}`
         );
@@ -3239,7 +3324,7 @@ function ColorSwatchRow({
 
 // src/controls/anchored-toolbar.tsx
 import * as React14 from "react";
-import { jsx as jsx31, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs26 } from "react/jsx-runtime";
 function virtualFor(rect) {
   return {
     getBoundingClientRect: () => ({
@@ -3272,9 +3357,9 @@ function AnchoredToolbar({
     [x, y, w, h]
   );
   const visible = open && rect !== null;
-  return /* @__PURE__ */ jsxs25(Popover, { open: visible, ...onOpenChange ? { onOpenChange } : {}, children: [
-    /* @__PURE__ */ jsx31(PopoverAnchor, { virtualRef }),
-    /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsxs26(Popover, { open: visible, ...onOpenChange ? { onOpenChange } : {}, children: [
+    /* @__PURE__ */ jsx32(PopoverAnchor, { virtualRef }),
+    /* @__PURE__ */ jsx32(
       PopoverContent,
       {
         role: "toolbar",
@@ -3299,7 +3384,7 @@ function AnchoredToolbar({
 // src/controls/icon-select.tsx
 import * as React15 from "react";
 import { openOutbound } from "@ai-matrx/kit/outbound";
-import { jsx as jsx32, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs27 } from "react/jsx-runtime";
 function wantsNewTab(e) {
   return Boolean(e.metaKey || e.ctrlKey || e.shiftKey || e.altKey || e.button === 1);
 }
@@ -3309,7 +3394,7 @@ var TRIGGER_SIZE = {
 };
 var TRIGGER_FACE = "h-7 w-7 justify-center border-none bg-muted px-0 focus:outline-none focus:ring-0";
 var IconSelectTrigger = React15.forwardRef(function IconSelectTrigger2({ icon, disabled, ariaLabel, size = "default", className, ...rest }, ref) {
-  return /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsx33(
     Button2,
     {
       ref,
@@ -3337,13 +3422,13 @@ function IconSelect({
   const [open, setOpen] = React15.useState(false);
   const skipSelectRef = React15.useRef(false);
   if (searchable) {
-    return /* @__PURE__ */ jsxs26(Popover, { open, onOpenChange: setOpen, children: [
-      /* @__PURE__ */ jsx32(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx32(IconSelectTrigger, { icon, disabled, ariaLabel, size, className }) }),
-      /* @__PURE__ */ jsx32(PopoverContent, { sizing: "content", className: "p-0", align: "start", children: /* @__PURE__ */ jsxs26(Command, { children: [
-        /* @__PURE__ */ jsx32(CommandInput, { placeholder: searchPlaceholder, className: "h-9 text-sm" }),
-        /* @__PURE__ */ jsxs26(CommandList, { children: [
-          /* @__PURE__ */ jsx32(CommandEmpty, { children: "No results found." }),
-          /* @__PURE__ */ jsx32(CommandGroup, { className: "max-h-72 overflow-auto", children: items.map((item) => /* @__PURE__ */ jsx32(
+    return /* @__PURE__ */ jsxs27(Popover, { open, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ jsx33(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx33(IconSelectTrigger, { icon, disabled, ariaLabel, size, className }) }),
+      /* @__PURE__ */ jsx33(PopoverContent, { sizing: "content", className: "p-0", align: "start", children: /* @__PURE__ */ jsxs27(Command, { children: [
+        /* @__PURE__ */ jsx33(CommandInput, { placeholder: searchPlaceholder, className: "h-9 text-sm" }),
+        /* @__PURE__ */ jsxs27(CommandList, { children: [
+          /* @__PURE__ */ jsx33(CommandEmpty, { children: "No results found." }),
+          /* @__PURE__ */ jsx33(CommandGroup, { className: "max-h-72 overflow-auto", children: items.map((item) => /* @__PURE__ */ jsx33(
             CommandItem,
             {
               value: item.label,
@@ -3363,8 +3448,8 @@ function IconSelect({
                 onValueChange?.(item.value);
                 setOpen(false);
               },
-              children: /* @__PURE__ */ jsxs26("div", { className: "flex items-center", children: [
-                item.icon && /* @__PURE__ */ jsx32("span", { className: "mr-2", children: item.icon }),
+              children: /* @__PURE__ */ jsxs27("div", { className: "flex items-center", children: [
+                item.icon && /* @__PURE__ */ jsx33("span", { className: "mr-2", children: item.icon }),
                 item.label
               ] })
             },
@@ -3374,8 +3459,8 @@ function IconSelect({
       ] }) })
     ] });
   }
-  return /* @__PURE__ */ jsxs26(Select, { ...value === void 0 ? {} : { value }, ...onValueChange ? { onValueChange } : {}, disabled, children: [
-    /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsxs27(Select, { ...value === void 0 ? {} : { value }, ...onValueChange ? { onValueChange } : {}, disabled, children: [
+    /* @__PURE__ */ jsx33(
       SelectTrigger,
       {
         "aria-label": ariaLabel,
@@ -3384,7 +3469,7 @@ function IconSelect({
         children: icon
       }
     ),
-    /* @__PURE__ */ jsx32(SelectContent, { children: /* @__PURE__ */ jsx32(SelectGroup, { children: items.map((item) => /* @__PURE__ */ jsx32(
+    /* @__PURE__ */ jsx33(SelectContent, { children: /* @__PURE__ */ jsx33(SelectGroup, { children: items.map((item) => /* @__PURE__ */ jsx33(
       SelectItem,
       {
         value: item.value,
@@ -3394,8 +3479,8 @@ function IconSelect({
             openOutbound(item.href, "_blank", "noopener");
           }
         },
-        children: /* @__PURE__ */ jsxs26("div", { className: "flex items-center", children: [
-          item.icon && /* @__PURE__ */ jsx32("span", { className: "mr-2", children: item.icon }),
+        children: /* @__PURE__ */ jsxs27("div", { className: "flex items-center", children: [
+          item.icon && /* @__PURE__ */ jsx33("span", { className: "mr-2", children: item.icon }),
           item.label
         ] })
       },
@@ -3411,7 +3496,7 @@ import { openClipboardFallback as openClipboardFallback3 } from "@ai-matrx/kit/c
 import { toast as toast3 } from "@ai-matrx/kit/notify";
 
 // src/icon-button.tsx
-import { jsx as jsx33, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx34, jsxs as jsxs28 } from "react/jsx-runtime";
 var VARIANT = {
   ghost: "quiet",
   outline: "outline",
@@ -3432,25 +3517,25 @@ function IconButton({
   "aria-label": ariaLabel,
   ...props
 }) {
-  const control = /* @__PURE__ */ jsx33(
+  const control = /* @__PURE__ */ jsx34(
     Button2,
     {
       variant: VARIANT[variant],
-      icon: spinning ? /* @__PURE__ */ jsx33(Icon, { className: MOTION_SPIN }) : /* @__PURE__ */ jsx33(Icon, {}),
+      icon: spinning ? /* @__PURE__ */ jsx34(Icon, { className: MOTION_SPIN }) : /* @__PURE__ */ jsx34(Icon, {}),
       ...glyphTone ? { glyphTone } : {},
       "aria-label": ariaLabel ?? tooltip ?? "Action",
       ...props
     }
   );
   if (!tooltip) return control;
-  return /* @__PURE__ */ jsxs27(Tooltip, { children: [
-    /* @__PURE__ */ jsx33(TooltipTrigger, { asChild: true, children: control }),
-    /* @__PURE__ */ jsx33(TooltipContent, { side: tooltipSide, align: tooltipAlign, className: "z-[9999]", sideOffset: tooltipOffset, children: tooltip })
+  return /* @__PURE__ */ jsxs28(Tooltip, { children: [
+    /* @__PURE__ */ jsx34(TooltipTrigger, { asChild: true, children: control }),
+    /* @__PURE__ */ jsx34(TooltipContent, { side: tooltipSide, align: tooltipAlign, className: "z-[9999]", sideOffset: tooltipOffset, children: tooltip })
   ] });
 }
 
 // src/controls/advanced-collapsible.tsx
-import { Fragment as Fragment8, jsx as jsx34, jsxs as jsxs28 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx35, jsxs as jsxs29 } from "react/jsx-runtime";
 function AdvancedCollapsible({
   icon,
   title,
@@ -3490,29 +3575,29 @@ function AdvancedCollapsible({
     if (!landed) void openClipboardFallback3(text);
     else onCopy?.();
   };
-  const actions = /* @__PURE__ */ jsxs28("div", { className: "flex items-center justify-end gap-2", children: [
-    onSave && /* @__PURE__ */ jsx34(
+  const actions = /* @__PURE__ */ jsxs29("div", { className: "flex items-center justify-end gap-2", children: [
+    onSave && /* @__PURE__ */ jsx35(
       ActionFeedbackButton,
       {
-        icon: /* @__PURE__ */ jsx34(SaveIcon, {}),
+        icon: /* @__PURE__ */ jsx35(SaveIcon, {}),
         glyphTone: "info",
         tooltip: saveTooltip,
         successTooltip: "Saved!",
         onClick: onSave
       }
     ),
-    onReset && /* @__PURE__ */ jsx34(
+    onReset && /* @__PURE__ */ jsx35(
       ActionFeedbackButton,
       {
-        icon: /* @__PURE__ */ jsx34(RefreshCwIcon, {}),
+        icon: /* @__PURE__ */ jsx35(RefreshCwIcon, {}),
         glyphTone: "warning",
         tooltip: resetTooltip,
         successTooltip: "Reset!",
         onClick: onReset
       }
     ),
-    /* @__PURE__ */ jsx34(IconButton, { icon: CopyIcon, tooltip: copyTooltip, onClick: () => void handleCopy() }),
-    /* @__PURE__ */ jsx34(
+    /* @__PURE__ */ jsx35(IconButton, { icon: CopyIcon, tooltip: copyTooltip, onClick: () => void handleCopy() }),
+    /* @__PURE__ */ jsx35(
       IconButton,
       {
         icon: isFullScreen ? Minimize2Icon : Maximize2Icon,
@@ -3523,20 +3608,20 @@ function AdvancedCollapsible({
     )
   ] });
   const heading = typeof title === "string" ? title : "Content";
-  return /* @__PURE__ */ jsxs28(Fragment8, { children: [
-    /* @__PURE__ */ jsxs28(
+  return /* @__PURE__ */ jsxs29(Fragment8, { children: [
+    /* @__PURE__ */ jsxs29(
       Collapsible,
       {
         open: isOpen,
         onOpenChange: handleOpenChange,
         className: cn("w-full rounded-xl border border-border shadow-sm", className),
         children: [
-          /* @__PURE__ */ jsxs28(CollapsibleTrigger, { className: "relative flex w-full items-center justify-between rounded-t-xl px-4 py-3 font-medium hover:bg-muted", children: [
-            /* @__PURE__ */ jsxs28("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxs29(CollapsibleTrigger, { className: "relative flex w-full items-center justify-between rounded-t-xl px-4 py-3 font-medium hover:bg-muted", children: [
+            /* @__PURE__ */ jsxs29("div", { className: "flex items-center gap-2", children: [
               icon,
-              typeof title === "string" ? /* @__PURE__ */ jsx34("span", { children: title }) : title
+              typeof title === "string" ? /* @__PURE__ */ jsx35("span", { children: title }) : title
             ] }),
-            /* @__PURE__ */ jsx34(
+            /* @__PURE__ */ jsx35(
               ChevronDownIcon,
               {
                 className: cn(
@@ -3546,27 +3631,27 @@ function AdvancedCollapsible({
               }
             )
           ] }),
-          /* @__PURE__ */ jsx34(CollapsibleContent, { children: /* @__PURE__ */ jsxs28("div", { className: "relative", children: [
-            /* @__PURE__ */ jsx34("div", { className: "absolute left-8 right-8 top-0 h-px bg-border" }),
-            /* @__PURE__ */ jsx34("div", { ref: contentRef, className: "p-4", children }),
-            /* @__PURE__ */ jsx34("div", { className: "mb-1 mr-1 mt-2", children: actions })
+          /* @__PURE__ */ jsx35(CollapsibleContent, { children: /* @__PURE__ */ jsxs29("div", { className: "relative", children: [
+            /* @__PURE__ */ jsx35("div", { className: "absolute left-8 right-8 top-0 h-px bg-border" }),
+            /* @__PURE__ */ jsx35("div", { ref: contentRef, className: "p-4", children }),
+            /* @__PURE__ */ jsx35("div", { className: "mb-1 mr-1 mt-2", children: actions })
           ] }) })
         ]
       }
     ),
-    /* @__PURE__ */ jsx34(Dialog, { open: isFullScreen, onOpenChange: setIsFullScreen, children: /* @__PURE__ */ jsxs28(DialogContent, { size: "full", height: "tall", children: [
-      /* @__PURE__ */ jsxs28(DialogHeader, { children: [
-        /* @__PURE__ */ jsx34(DialogTitle, { children: fullScreenTitle || heading }),
-        fullScreenDescription ? /* @__PURE__ */ jsx34(DialogDescription, { children: fullScreenDescription }) : null
+    /* @__PURE__ */ jsx35(Dialog, { open: isFullScreen, onOpenChange: setIsFullScreen, children: /* @__PURE__ */ jsxs29(DialogContent, { size: "full", height: "tall", children: [
+      /* @__PURE__ */ jsxs29(DialogHeader, { children: [
+        /* @__PURE__ */ jsx35(DialogTitle, { children: fullScreenTitle || heading }),
+        fullScreenDescription ? /* @__PURE__ */ jsx35(DialogDescription, { children: fullScreenDescription }) : null
       ] }),
       actions,
-      /* @__PURE__ */ jsx34("div", { ref: fullRef, className: "min-h-0 flex-1 overflow-auto p-4", children })
+      /* @__PURE__ */ jsx35("div", { ref: fullRef, className: "min-h-0 flex-1 overflow-auto p-4", children })
     ] }) })
   ] });
 }
 
 // src/controls/empty-state-card.tsx
-import { jsx as jsx35, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx36, jsxs as jsxs30 } from "react/jsx-runtime";
 var TONE3 = {
   primary: { data: "primary", button: "primary" },
   success: { data: "success", button: "outline" }
@@ -3581,12 +3666,12 @@ function EmptyStateCard({
   tone: tone2 = "primary"
 }) {
   const t = TONE3[tone2];
-  return /* @__PURE__ */ jsxs29("div", { "data-tone": t.data, className: "matrx-hue-card flex flex-col items-center justify-center px-6 py-12 text-center", children: [
-    /* @__PURE__ */ jsx35("div", { className: "matrx-hue-icon mb-6 rounded-full p-6", children: /* @__PURE__ */ jsx35(Icon, { className: "h-12 w-12", strokeWidth: 1.5 }) }),
-    /* @__PURE__ */ jsx35("h3", { className: cn("mb-3 text-xl font-semibold", tone2 === "success" ? "text-success-ink" : "text-foreground"), children: title }),
-    /* @__PURE__ */ jsx35("p", { className: "mb-8 max-w-md text-muted-foreground", children: description }),
-    buttonText && /* @__PURE__ */ jsxs29("div", { className: "flex flex-col gap-4 sm:flex-row", children: [
-      /* @__PURE__ */ jsx35(Button2, { variant: t.button, ...tone2 === "success" ? { tone: "success" } : {}, ...onButtonClick ? { onClick: onButtonClick } : {}, children: buttonText }),
+  return /* @__PURE__ */ jsxs30("div", { "data-tone": t.data, className: "matrx-hue-card flex flex-col items-center justify-center px-6 py-12 text-center", children: [
+    /* @__PURE__ */ jsx36("div", { className: "matrx-hue-icon mb-6 rounded-full p-6", children: /* @__PURE__ */ jsx36(Icon, { className: "h-12 w-12", strokeWidth: 1.5 }) }),
+    /* @__PURE__ */ jsx36("h3", { className: cn("mb-3 text-xl font-semibold", tone2 === "success" ? "text-success-ink" : "text-foreground"), children: title }),
+    /* @__PURE__ */ jsx36("p", { className: "mb-8 max-w-md text-muted-foreground", children: description }),
+    buttonText && /* @__PURE__ */ jsxs30("div", { className: "flex flex-col gap-4 sm:flex-row", children: [
+      /* @__PURE__ */ jsx36(Button2, { variant: t.button, ...tone2 === "success" ? { tone: "success" } : {}, ...onButtonClick ? { onClick: onButtonClick } : {}, children: buttonText }),
       secondaryButton
     ] })
   ] });
@@ -3594,7 +3679,7 @@ function EmptyStateCard({
 
 // src/controls/hue-cards.tsx
 import * as React17 from "react";
-import { Fragment as Fragment9, jsx as jsx36, jsxs as jsxs30 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx37, jsxs as jsxs31 } from "react/jsx-runtime";
 var HUE_TONE = {
   indigo: "indigo",
   emerald: "emerald",
@@ -3628,7 +3713,7 @@ function Destination({
   children
 }) {
   if (path) {
-    return /* @__PURE__ */ jsx36(
+    return /* @__PURE__ */ jsx37(
       HostLink,
       {
         href: path,
@@ -3639,7 +3724,7 @@ function Destination({
       }
     );
   }
-  return /* @__PURE__ */ jsx36("div", { ...className ? { className } : {}, ...onClick ? { onClick } : {}, children });
+  return /* @__PURE__ */ jsx37("div", { ...className ? { className } : {}, ...onClick ? { onClick } : {}, children });
 }
 var SIZE_PADDING = {
   xs: "p-3",
@@ -3662,19 +3747,19 @@ function HueCard({
   external = false
 }) {
   if (compact) {
-    return /* @__PURE__ */ jsx36(Destination, { path, onClick, external, children: /* @__PURE__ */ jsxs30(
+    return /* @__PURE__ */ jsx37(Destination, { path, onClick, external, children: /* @__PURE__ */ jsxs31(
       "div",
       {
         "data-tone": tone(color),
         className: cn("matrx-hue-card flex cursor-pointer select-none flex-col items-center gap-1.5", className),
         children: [
-          /* @__PURE__ */ jsx36("div", { className: "matrx-hue-squircle flex aspect-square w-full max-w-[62px] items-center justify-center rounded-[22%] shadow-sm transition-colors", children: sizedIcon(icon, 36) }),
-          /* @__PURE__ */ jsx36("span", { className: "type-meta w-full truncate px-0.5 text-center font-medium leading-tight text-foreground", children: title })
+          /* @__PURE__ */ jsx37("div", { className: "matrx-hue-squircle flex aspect-square w-full max-w-[62px] items-center justify-center rounded-[22%] shadow-sm transition-colors", children: sizedIcon(icon, 36) }),
+          /* @__PURE__ */ jsx37("span", { className: "type-meta w-full truncate px-0.5 text-center font-medium leading-tight text-foreground", children: title })
         ]
       }
     ) });
   }
-  return /* @__PURE__ */ jsx36(Destination, { path, onClick, external, children: /* @__PURE__ */ jsx36(
+  return /* @__PURE__ */ jsx37(Destination, { path, onClick, external, children: /* @__PURE__ */ jsx37(
     "div",
     {
       "data-tone": tone(color),
@@ -3683,10 +3768,10 @@ function HueCard({
         SIZE_PADDING[size],
         className
       ),
-      children: /* @__PURE__ */ jsxs30("div", { className: "flex flex-col items-center space-y-3 text-center", children: [
-        /* @__PURE__ */ jsx36("div", { className: "matrx-hue-icon rounded-full p-3", children: sizedIcon(icon, 28) }),
-        /* @__PURE__ */ jsx36("h3", { className: "text-lg font-semibold", children: title }),
-        description && /* @__PURE__ */ jsx36("p", { className: "type-body text-muted-foreground", children: description }),
+      children: /* @__PURE__ */ jsxs31("div", { className: "flex flex-col items-center space-y-3 text-center", children: [
+        /* @__PURE__ */ jsx37("div", { className: "matrx-hue-icon rounded-full p-3", children: sizedIcon(icon, 28) }),
+        /* @__PURE__ */ jsx37("h3", { className: "text-lg font-semibold", children: title }),
+        description && /* @__PURE__ */ jsx37("p", { className: "type-body text-muted-foreground", children: description }),
         descriptionNode && !description && descriptionNode
       ] })
     }
@@ -3713,12 +3798,12 @@ function HueGrid({
   compact = false
 }) {
   const colsClass = compact ? "grid-cols-4" : GRID_COLUMNS[Math.min(6, Math.max(1, columns))];
-  return /* @__PURE__ */ jsxs30("div", { className, children: [
-    title && /* @__PURE__ */ jsx36("h2", { className: "mb-4 text-base font-semibold", children: title }),
-    description && /* @__PURE__ */ jsx36("p", { className: "type-body mb-4 text-muted-foreground", children: description }),
-    /* @__PURE__ */ jsxs30("div", { className: cn("grid", compact ? "gap-2" : "gap-4", colsClass), children: [
-      items.map((item, index) => /* @__PURE__ */ jsx36(HueCard, { ...item, compact, className: cn(cardClassName, item.className) }, `card-${index}`)),
-      showAddButton && /* @__PURE__ */ jsxs30(
+  return /* @__PURE__ */ jsxs31("div", { className, children: [
+    title && /* @__PURE__ */ jsx37("h2", { className: "mb-4 text-base font-semibold", children: title }),
+    description && /* @__PURE__ */ jsx37("p", { className: "type-body mb-4 text-muted-foreground", children: description }),
+    /* @__PURE__ */ jsxs31("div", { className: cn("grid", compact ? "gap-2" : "gap-4", colsClass), children: [
+      items.map((item, index) => /* @__PURE__ */ jsx37(HueCard, { ...item, compact, className: cn(cardClassName, item.className) }, `card-${index}`)),
+      showAddButton && /* @__PURE__ */ jsxs31(
         "button",
         {
           type: "button",
@@ -3728,8 +3813,8 @@ function HueGrid({
             cardClassName
           ),
           children: [
-            /* @__PURE__ */ jsx36("span", { className: "rounded-full bg-muted p-3 text-muted-foreground", children: /* @__PURE__ */ jsx36(PlusIcon, { className: "h-7 w-7" }) }),
-            /* @__PURE__ */ jsx36("span", { className: "text-lg font-semibold", children: addButtonText })
+            /* @__PURE__ */ jsx37("span", { className: "rounded-full bg-muted p-3 text-muted-foreground", children: /* @__PURE__ */ jsx37(PlusIcon, { className: "h-7 w-7" }) }),
+            /* @__PURE__ */ jsx37("span", { className: "text-lg font-semibold", children: addButtonText })
           ]
         }
       )
@@ -3744,12 +3829,12 @@ function HueRow({
   color,
   path,
   className,
-  rightIcon = /* @__PURE__ */ jsx36(ChevronRightIcon, { className: "h-5 w-5 text-muted-foreground" }),
+  rightIcon = /* @__PURE__ */ jsx37(ChevronRightIcon, { className: "h-5 w-5 text-muted-foreground" }),
   onClick,
   showBorder = true,
   isLast = false
 }) {
-  return /* @__PURE__ */ jsx36(Destination, { path, onClick, children: /* @__PURE__ */ jsxs30(
+  return /* @__PURE__ */ jsx37(Destination, { path, onClick, children: /* @__PURE__ */ jsxs31(
     "div",
     {
       "data-tone": tone(color),
@@ -3759,11 +3844,11 @@ function HueRow({
         className
       ),
       children: [
-        /* @__PURE__ */ jsxs30("div", { className: "flex items-center", children: [
-          /* @__PURE__ */ jsx36("div", { className: "matrx-hue-icon mr-4 rounded-lg p-2", children: sizedIcon(icon, 20) }),
-          /* @__PURE__ */ jsxs30("div", { children: [
-            /* @__PURE__ */ jsx36("h3", { className: "font-medium", children: title }),
-            description && /* @__PURE__ */ jsx36("p", { className: "type-body text-muted-foreground", children: description }),
+        /* @__PURE__ */ jsxs31("div", { className: "flex items-center", children: [
+          /* @__PURE__ */ jsx37("div", { className: "matrx-hue-icon mr-4 rounded-lg p-2", children: sizedIcon(icon, 20) }),
+          /* @__PURE__ */ jsxs31("div", { children: [
+            /* @__PURE__ */ jsx37("h3", { className: "font-medium", children: title }),
+            description && /* @__PURE__ */ jsx37("p", { className: "type-body text-muted-foreground", children: description }),
             descriptionNode && !description && descriptionNode
           ] })
         ] }),
@@ -3781,7 +3866,7 @@ function HueList({
   showBorders = true,
   showContainer = true
 }) {
-  const rows = items.map((item, index) => /* @__PURE__ */ jsx36(
+  const rows = items.map((item, index) => /* @__PURE__ */ jsx37(
     HueRow,
     {
       ...item,
@@ -3791,14 +3876,14 @@ function HueList({
     },
     `row-${index}`
   ));
-  return /* @__PURE__ */ jsxs30("div", { className, children: [
-    title && /* @__PURE__ */ jsx36("h2", { className: "mb-4 text-base font-semibold", children: title }),
-    description && /* @__PURE__ */ jsx36("p", { className: "type-body mb-4 text-muted-foreground", children: description }),
-    showContainer ? /* @__PURE__ */ jsx36("div", { className: "rounded-xl bg-card shadow-md", children: rows }) : rows
+  return /* @__PURE__ */ jsxs31("div", { className, children: [
+    title && /* @__PURE__ */ jsx37("h2", { className: "mb-4 text-base font-semibold", children: title }),
+    description && /* @__PURE__ */ jsx37("p", { className: "type-body mb-4 text-muted-foreground", children: description }),
+    showContainer ? /* @__PURE__ */ jsx37("div", { className: "rounded-xl bg-card shadow-md", children: rows }) : rows
   ] });
 }
 function IosWidget({ title, description, icon, color, path, badge, className, onClick }) {
-  return /* @__PURE__ */ jsx36(Destination, { path, onClick, className: "contents", children: /* @__PURE__ */ jsxs30(
+  return /* @__PURE__ */ jsx37(Destination, { path, onClick, className: "contents", children: /* @__PURE__ */ jsxs31(
     "div",
     {
       "data-tone": tone(color),
@@ -3807,13 +3892,13 @@ function IosWidget({ title, description, icon, color, path, badge, className, on
         className
       ),
       children: [
-        /* @__PURE__ */ jsxs30("div", { className: "flex items-start justify-between", children: [
-          /* @__PURE__ */ jsx36("div", { children: sizedIcon(icon, 32) }),
-          badge && /* @__PURE__ */ jsx36("span", { className: "type-meta rounded-full bg-black/25 px-2 py-0.5 font-semibold leading-tight", children: badge })
+        /* @__PURE__ */ jsxs31("div", { className: "flex items-start justify-between", children: [
+          /* @__PURE__ */ jsx37("div", { children: sizedIcon(icon, 32) }),
+          badge && /* @__PURE__ */ jsx37("span", { className: "type-meta rounded-full bg-black/25 px-2 py-0.5 font-semibold leading-tight", children: badge })
         ] }),
-        /* @__PURE__ */ jsxs30("div", { children: [
-          /* @__PURE__ */ jsx36("p", { className: "type-title line-clamp-2 leading-tight", children: title }),
-          description && /* @__PURE__ */ jsx36("p", { className: "type-meta mt-0.5 line-clamp-2 leading-tight", children: description })
+        /* @__PURE__ */ jsxs31("div", { children: [
+          /* @__PURE__ */ jsx37("p", { className: "type-title line-clamp-2 leading-tight", children: title }),
+          description && /* @__PURE__ */ jsx37("p", { className: "type-meta mt-0.5 line-clamp-2 leading-tight", children: description })
         ] })
       ]
     }
@@ -3824,21 +3909,21 @@ function TileCard({ icon, title, description, onClick, href, className }) {
     "flex h-64 cursor-pointer flex-col items-center justify-center space-y-6 rounded-xl border-2 border-border bg-muted p-4 text-xl transition-colors hover:border-primary hover:bg-accent",
     className
   );
-  const content = /* @__PURE__ */ jsxs30(Fragment9, { children: [
-    icon && /* @__PURE__ */ jsx36("div", { className: "h-12 w-12 text-primary-ink", children: icon }),
-    title && /* @__PURE__ */ jsx36("span", { className: "font-medium text-primary-ink", children: title }),
-    description && /* @__PURE__ */ jsx36("p", { className: "type-secondary mt-1 text-center text-muted-foreground", children: description })
+  const content = /* @__PURE__ */ jsxs31(Fragment9, { children: [
+    icon && /* @__PURE__ */ jsx37("div", { className: "h-12 w-12 text-primary-ink", children: icon }),
+    title && /* @__PURE__ */ jsx37("span", { className: "font-medium text-primary-ink", children: title }),
+    description && /* @__PURE__ */ jsx37("p", { className: "type-secondary mt-1 text-center text-muted-foreground", children: description })
   ] });
-  return href ? /* @__PURE__ */ jsx36(HostLink, { href, className: face, children: content }) : /* @__PURE__ */ jsx36("div", { onClick, className: face, children: content });
+  return href ? /* @__PURE__ */ jsx37(HostLink, { href, className: face, children: content }) : /* @__PURE__ */ jsx37("div", { onClick, className: face, children: content });
 }
 var TILE_COLUMNS = { 1: "md:grid-cols-1", 2: "md:grid-cols-2", 3: "md:grid-cols-3", 4: "md:grid-cols-4" };
 function TileCardGrid({ title, description, cards, columns = 2, className }) {
-  return /* @__PURE__ */ jsxs30("div", { className: cn("w-full", className), children: [
-    (title || description) && /* @__PURE__ */ jsxs30("div", { className: "pb-8 text-center", children: [
-      title && /* @__PURE__ */ jsx36("h2", { className: "text-2xl font-bold text-foreground md:text-3xl", children: title }),
-      description && /* @__PURE__ */ jsx36("p", { className: "mt-2 text-muted-foreground", children: description })
+  return /* @__PURE__ */ jsxs31("div", { className: cn("w-full", className), children: [
+    (title || description) && /* @__PURE__ */ jsxs31("div", { className: "pb-8 text-center", children: [
+      title && /* @__PURE__ */ jsx37("h2", { className: "text-2xl font-bold text-foreground md:text-3xl", children: title }),
+      description && /* @__PURE__ */ jsx37("p", { className: "mt-2 text-muted-foreground", children: description })
     ] }),
-    /* @__PURE__ */ jsx36("div", { className: cn("grid grid-cols-1 gap-6", TILE_COLUMNS[columns] ?? TILE_COLUMNS[2]), children: cards.map((card, index) => /* @__PURE__ */ jsx36(TileCard, { ...card }, index)) })
+    /* @__PURE__ */ jsx37("div", { className: cn("grid grid-cols-1 gap-6", TILE_COLUMNS[columns] ?? TILE_COLUMNS[2]), children: cards.map((card, index) => /* @__PURE__ */ jsx37(TileCard, { ...card }, index)) })
   ] });
 }
 
@@ -3861,6 +3946,10 @@ export {
   NumberStepper,
   stageStates,
   StageSteps,
+  ChecklistMark,
+  Checklist,
+  ChecklistItem,
+  ChecklistMeter,
   shownDraft,
   clampDraft,
   ClampedNumberInput,
@@ -3918,4 +4007,4 @@ export {
   TileCard,
   TileCardGrid
 };
-//# sourceMappingURL=chunk-SC3XPADZ.js.map
+//# sourceMappingURL=chunk-UGQRAQTE.js.map