@ai-matrx/design-system 0.86.350 → 0.86.351

package/dist/controls.cjs

@@ -44,6 +44,10 @@ __export(controls_exports, {
   CONTROLS_CONTAINER_CLASS: () => CONTROLS_CONTAINER_CLASS,
   CONTROLS_CONTAINER_NAME: () => CONTROLS_CONTAINER_NAME,
   CalloutBanner: () => CalloutBanner,
+  Checklist: () => Checklist,
+  ChecklistItem: () => ChecklistItem,
+  ChecklistMark: () => ChecklistMark,
+  ChecklistMeter: () => ChecklistMeter,
   Chip: () => Chip,
   ChipSet: () => ChipSet,
   CitationChip: () => CitationChip,
@@ -3621,12 +3625,12 @@ function SettingRow({ label, line, htmlFor, children, className }) {
   ] });
 }
 var Tile = React20.forwardRef(
-  ({ layout = "row", variant = "outline", icon, title, wrapTitle, line, end, selected, selectedStyle, tooltip, level, fit, endInset, oneLine, dashed, hoverStyle, danger, dimmed, glyphTone, hero, tone: tone2, dense, asChild = false, className, children, onClick, type, ...props }, ref) => {
+  ({ layout = "row", variant = "outline", icon, title, wrapTitle, line, end, selected, selectedStyle, tooltip, level, fit, endInset, oneLine, dashed, hoverStyle, danger, dimmed, glyphTone, hero, tone: tone2, iconTone, dense, asChild = false, className, children, onClick, type, ...props }, ref) => {
     const Component = asChild ? import_react_slot4.Slot : "button";
     const ariaDisabled = props["aria-disabled"];
     const inert = ariaDisabled === true || ariaDisabled === "true";
     const body = /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
-      icon ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "matrx-tile-icon", children: icon }) : null,
+      icon ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "matrx-tile-icon", "data-tone": iconTone && iconTone !== "neutral" ? iconTone : void 0, children: icon }) : null,
       /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("span", { className: "matrx-tile-text", children: [
         /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "matrx-tile-title", children: title }),
         line ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "matrx-tile-line", children: line }) : null
@@ -4048,9 +4052,94 @@ function StageSteps({ steps, current, labels = "all", maxVisible, className, ...
   }) });
 }
 
+// src/controls/checklist.tsx
+var import_jsx_runtime26 = require("react/jsx-runtime");
+var STATE_WORD = {
+  done: "Met",
+  open: "Missing",
+  unknown: "Not measured"
+};
+function ChecklistMark({ state, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+    "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__ */ (0, import_jsx_runtime26.jsx)(CheckIcon, { className: "size-3", strokeWidth: 3 }) : null
+    }
+  );
+}
+function Checklist({ className, children, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("ul", { "data-matrx-checklist": "", className: cn("grid min-w-0", className), ...props, children });
+}
+function ChecklistItem({ state, title, line, end, className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+    "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__ */ (0, import_jsx_runtime26.jsx)(ChecklistMark, { state, className: "mt-0.5" }),
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "min-w-0", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "type-title truncate text-foreground", children: title }),
+          line ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "type-secondary truncate text-muted-foreground", title: line, children: line }) : null
+        ] }),
+        end ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("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__ */ (0, import_jsx_runtime26.jsxs)("div", { "data-matrx-checklist-meter": "", className: cn("grid min-w-0 gap-1.5", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex min-w-0 items-center gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "type-title min-w-0 truncate text-foreground", children: label }),
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("span", { className: "type-meta shrink-0 tabular-nums text-muted-foreground", children: [
+        done,
+        " of ",
+        total
+      ] }),
+      end ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "ml-auto flex shrink-0 items-center", children: end }) : null
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+      "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__ */ (0, import_jsx_runtime26.jsx)(
+          "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
 var import_react3 = require("react");
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 function shownDraft(raw, min, max, decimal = false) {
   const next = clampDraft(raw, min, max, decimal);
   if (next === null) return null;
@@ -4095,7 +4184,7 @@ function ClampedNumberInput({
     setDraft(String(next));
     if (next !== value) onChange(next);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
     Input,
     {
       id,
@@ -4128,7 +4217,7 @@ function ClampedNumberInput({
 
 // src/controls/light-switch-toggle.tsx
 var import_react4 = require("react");
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 var defaultSizes = {
   width: "w-48",
   height: "h-16"
@@ -4166,7 +4255,7 @@ var LightSwitchToggle = (0, import_react4.forwardRef)(
     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__ */ (0, import_jsx_runtime27.jsxs)(
+    const renderOption = (isActive, label, side, onClick) => /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
       "button",
       {
         type: "button",
@@ -4178,7 +4267,7 @@ var LightSwitchToggle = (0, import_react4.forwardRef)(
           isActive ? activeButtonClasses : inactiveButtonClasses
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
             "div",
             {
               className: cn(
@@ -4189,7 +4278,7 @@ var LightSwitchToggle = (0, import_react4.forwardRef)(
               )
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
             "span",
             {
               className: cn(
@@ -4202,8 +4291,8 @@ var LightSwitchToggle = (0, import_react4.forwardRef)(
         ]
       }
     );
-    return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { ref, className: containerClasses, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "absolute left-1/2 top-0 bottom-0 w-[2px] bg-border transform -translate-x-1/2 z-10" }),
+    return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { ref, className: containerClasses, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("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))
     ] }) });
@@ -4222,12 +4311,12 @@ var React23 = __toESM(require("react"), 1);
 // src/close-slot.tsx
 var DialogPrimitive = __toESM(require("@radix-ui/react-dialog"), 1);
 var React22 = __toESM(require("react"), 1);
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 var CLOSE_CONTROL_CLASSES = "flex h-11 w-11 shrink-0 items-center justify-center rounded-sm text-muted-foreground ring-offset-background transition-colors hover:text-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none lg:h-8 lg:w-8";
 function CloseControl({ className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(DialogPrimitive.Close, { "data-slot": "dialog-close", "aria-label": "Close", className: cn(CLOSE_CONTROL_CLASSES, className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(XIcon, { className: "h-4 w-4", "aria-hidden": "true" }),
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "sr-only", children: "Close" })
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(DialogPrimitive.Close, { "data-slot": "dialog-close", "aria-label": "Close", className: cn(CLOSE_CONTROL_CLASSES, className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(XIcon, { className: "h-4 w-4", "aria-hidden": "true" }),
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "sr-only", children: "Close" })
   ] });
 }
 var CloseSlotContext = React22.createContext(null);
@@ -4259,7 +4348,7 @@ function useSearchRowCloseSlotClaim() {
   return useClaim(SearchRowCloseSlotContext, false);
 }
 function CloseRow({ className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { "data-slot": "close-row", className: cn("flex justify-end", className), children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(CloseControl, {}) });
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { "data-slot": "close-row", className: cn("flex justify-end", className), children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(CloseControl, {}) });
 }
 var BODY_LAYOUT = /^!?(?:[a-z0-9]+:)*(?:flex|grid|flex-(?:row|col)(?:-reverse)?|grid-(?:cols|rows|flow)-\S+|place-\S+|items-\S+|justify-\S+|content-\S+|gap(?:-[xy])?-\S+|space-[xy]-\S+|text-(?:left|center|right|start|end)|flex-wrap|flex-nowrap)$/;
 var OLD_CLOSE_RESERVE = /^pr-(?:8|9|10|11|12|14|16)$/;
@@ -4282,19 +4371,19 @@ function HeaderWithClose({
 }) {
   const owns = useCloseSlotClaim(/(?:^|\s)(?:sr-only|hidden)(?:\s|$)/.test(className ?? ""));
   if (!owns) {
-    return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { "data-slot": slotName, className: cn(baseClassName, className), ...props, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { "data-slot": slotName, className: cn(baseClassName, className), ...props, children });
   }
   const { row, body } = splitHeaderClasses(className);
   const rowish = /(?:^|\s)(?:[a-z0-9]+:)*flex-row(?:\s|$)/.test(body);
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { "data-slot": slotName, "data-has-close": "", className: cn("flex gap-2", rowish ? "items-center" : "items-start", row), ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { "data-slot": `${slotName}-body`, className: cn("min-w-0 flex-1", baseClassName, body), children }),
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(CloseControl, { className: cn("-mr-2", !rowish && closeOffsetClassName) })
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { "data-slot": slotName, "data-has-close": "", className: cn("flex gap-2", rowish ? "items-center" : "items-start", row), ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { "data-slot": `${slotName}-body`, className: cn("min-w-0 flex-1", baseClassName, body), children }),
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(CloseControl, { className: cn("-mr-2", !rowish && closeOffsetClassName) })
   ] });
 }
 
 // src/command.tsx
-var import_jsx_runtime29 = require("react/jsx-runtime");
-var Command = React23.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+var import_jsx_runtime30 = require("react/jsx-runtime");
+var Command = React23.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
   import_cmdk.Command,
   {
     ref,
@@ -4315,8 +4404,8 @@ var CommandDialogContent = React23.forwardRef(({ className, children, container,
   useModalLayer(isModal);
   const portalContainer = usePortalContainer(container);
   const closeSlot = useCloseSlot(true);
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(DialogPrimitive2.Portal, { container: portalContainer, children: [
-    isModal ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(DialogPrimitive2.Portal, { container: portalContainer, children: [
+    isModal ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
       DialogPrimitive2.Overlay,
       {
         className: cn(
@@ -4325,7 +4414,7 @@ var CommandDialogContent = React23.forwardRef(({ className, children, container,
         )
       }
     ) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
       DialogPrimitive2.Content,
       {
         ref,
@@ -4341,8 +4430,8 @@ var CommandDialogContent = React23.forwardRef(({ className, children, container,
         ...props,
         onInteractOutside: keepFloatingLayersInside(onInteractOutside),
         children: [
-          closeSlot.slot && !closeSlot.claimed ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(CloseRow, { className: "px-4 pt-4" }) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(CloseSlotProvider, { value: null, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(SearchRowCloseSlotProvider, { value: closeSlot.slot, children }) })
+          closeSlot.slot && !closeSlot.claimed ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(CloseRow, { className: "px-4 pt-4" }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(CloseSlotProvider, { value: null, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(SearchRowCloseSlotProvider, { value: closeSlot.slot, children }) })
         ]
       }
     )
@@ -4351,9 +4440,9 @@ var CommandDialogContent = React23.forwardRef(({ className, children, container,
 CommandDialogContent.displayName = "CommandDialogContent";
 var CommandInput = React23.forwardRef(({ className, ...props }, ref) => {
   const ownsClose = useSearchRowCloseSlotClaim();
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex items-center gap-2 border-b px-3", "cmdk-input-wrapper": "", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(MagnifyingGlassIcon, { className: "h-4 w-4 shrink-0 opacity-50" }),
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex items-center gap-2 border-b px-3", "cmdk-input-wrapper": "", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(MagnifyingGlassIcon, { className: "h-4 w-4 shrink-0 opacity-50" }),
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
       import_cmdk.Command.Input,
       {
         ref,
@@ -4364,11 +4453,11 @@ var CommandInput = React23.forwardRef(({ className, ...props }, ref) => {
         ...props
       }
     ),
-    ownsClose ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(CloseControl, { className: "-mr-1" }) : null
+    ownsClose ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(CloseControl, { className: "-mr-1" }) : null
   ] });
 });
 CommandInput.displayName = import_cmdk.Command.Input.displayName;
-var CommandList = React23.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+var CommandList = React23.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
   import_cmdk.Command.List,
   {
     ref,
@@ -4377,7 +4466,7 @@ var CommandList = React23.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 CommandList.displayName = import_cmdk.Command.List.displayName;
-var CommandEmpty = React23.forwardRef((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+var CommandEmpty = React23.forwardRef((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
   import_cmdk.Command.Empty,
   {
     ref,
@@ -4386,7 +4475,7 @@ var CommandEmpty = React23.forwardRef((props, ref) => /* @__PURE__ */ (0, import
   }
 ));
 CommandEmpty.displayName = import_cmdk.Command.Empty.displayName;
-var CommandGroup = React23.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+var CommandGroup = React23.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
   import_cmdk.Command.Group,
   {
     ref,
@@ -4398,7 +4487,7 @@ var CommandGroup = React23.forwardRef(({ className, ...props }, ref) => /* @__PU
   }
 ));
 CommandGroup.displayName = import_cmdk.Command.Group.displayName;
-var CommandSeparator = React23.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+var CommandSeparator = React23.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
   import_cmdk.Command.Separator,
   {
     ref,
@@ -4407,7 +4496,7 @@ var CommandSeparator = React23.forwardRef(({ className, ...props }, ref) => /* @
   }
 ));
 CommandSeparator.displayName = import_cmdk.Command.Separator.displayName;
-var CommandItem = React23.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+var CommandItem = React23.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
   import_cmdk.Command.Item,
   {
     ref,
@@ -4423,7 +4512,7 @@ var CommandShortcut = ({
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
     "span",
     {
       className: cn(
@@ -4437,7 +4526,7 @@ var CommandShortcut = ({
 CommandShortcut.displayName = "CommandShortcut";
 
 // src/controls/option-combobox.tsx
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 function OptionCombobox({
   value,
   onChange,
@@ -4471,7 +4560,7 @@ function OptionCombobox({
     setOpen(false);
     setQuery("");
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
     Popover,
     {
       open,
@@ -4483,7 +4572,7 @@ function OptionCombobox({
         }
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(PopoverTrigger, { asChild: true, disabled, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(PopoverTrigger, { asChild: true, disabled, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
           "button",
           {
             id,
@@ -4504,7 +4593,7 @@ function OptionCombobox({
             ),
             children: [
               hasValue && renderIcon?.(value),
-              /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
                 "span",
                 {
                   className: cn(
@@ -4513,22 +4602,22 @@ function OptionCombobox({
                   ),
                   children: [
                     hasValue ? getLabel(value) : placeholder,
-                    hint && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "ml-1.5 text-muted-foreground", children: hint })
+                    hint && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "ml-1.5 text-muted-foreground", children: hint })
                   ]
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(SelectChevron, { size: "sm", className: variant === "inline" ? "h-3 w-3" : void 0 })
+              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(SelectChevron, { size: "sm", className: variant === "inline" ? "h-3 w-3" : void 0 })
             ]
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
           PopoverContent,
           {
             sizing: "content",
             align: "start",
             className: "p-0",
-            children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(Command, { shouldFilter: false, children: [
-              searchable && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(Command, { shouldFilter: false, children: [
+              searchable && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
                 CommandInput,
                 {
                   placeholder: searchPlaceholder,
@@ -4536,8 +4625,8 @@ function OptionCombobox({
                   onValueChange: setQuery
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(CommandList, { className: "max-h-72", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(CommandEmpty, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(CommandList, { className: "max-h-72", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(CommandEmpty, { children: [
                   "No match for \u201C",
                   query,
                   "\u201D."
@@ -4547,24 +4636,24 @@ function OptionCombobox({
                   if (visible.length === 0) return null;
                   const folded = group.collapsed && !showMore && !q && !group.options.includes(value);
                   if (folded) {
-                    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(CommandGroup, { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+                    return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(CommandGroup, { children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
                       CommandItem,
                       {
                         value: `__more_${gi}`,
                         onSelect: () => setShowMore(true),
                         className: "text-muted-foreground",
                         children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(ChevronRightIcon, { className: "h-3.5 w-3.5" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(ChevronRightIcon, { className: "h-3.5 w-3.5" }),
                           group.heading ?? "More",
-                          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "ml-auto type-secondary tabular-nums", children: group.options.length })
+                          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "ml-auto type-secondary tabular-nums", children: group.options.length })
                         ]
                       }
                     ) }, `g-${gi}`);
                   }
-                  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(CommandGroup, { heading: group.heading, children: visible.map((o) => {
+                  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(CommandGroup, { heading: group.heading, children: visible.map((o) => {
                     const selected = o === value;
                     const h = getHint?.(o);
-                    return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+                    return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
                       CommandItem,
                       {
                         value: o,
@@ -4572,11 +4661,11 @@ function OptionCombobox({
                         className: "gap-2",
                         children: [
                           renderIcon?.(o),
-                          /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("span", { className: "min-w-0 flex-1 truncate", children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("span", { className: "min-w-0 flex-1 truncate", children: [
                             getLabel(o),
-                            h && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "ml-1.5 text-muted-foreground", children: h })
+                            h && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "ml-1.5 text-muted-foreground", children: h })
                           ] }),
-                          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
                             CheckIcon,
                             {
                               className: cn(
@@ -4678,7 +4767,7 @@ function groupRatioOptions(options) {
 }
 
 // src/controls/aspect-ratio-select.tsx
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 function AspectRatioGlyph({
   value,
   className
@@ -4686,7 +4775,7 @@ function AspectRatioGlyph({
   const r = parseRatio(value);
   const box = 14;
   if (!r) {
-    return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
       "span",
       {
         "aria-hidden": true,
@@ -4694,14 +4783,14 @@ function AspectRatioGlyph({
           "inline-flex h-3.5 w-3.5 shrink-0 items-center justify-center",
           className
         ),
-        children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "h-2.5 w-2.5 rounded-[2px] border border-dashed border-current opacity-60" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("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__ */ (0, import_jsx_runtime31.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
     "span",
     {
       "aria-hidden": true,
@@ -4709,7 +4798,7 @@ function AspectRatioGlyph({
         "inline-flex h-3.5 w-3.5 shrink-0 items-center justify-center",
         className
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
         "span",
         {
           className: "rounded-[2px] border-[1.5px] border-current opacity-80",
@@ -4736,7 +4825,7 @@ function AspectRatioSelect({
     { options: common },
     ...more.length ? [{ heading: "More ratios", options: more, collapsed: true }] : []
   ];
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
     OptionCombobox,
     {
       value,
@@ -4744,7 +4833,7 @@ function AspectRatioSelect({
       groups,
       getLabel: (o) => parseRatio(o) ? o : humanizeRatioWord(o),
       getHint: (o) => ratioShapeName(o),
-      renderIcon: (o) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(AspectRatioGlyph, { value: o, className: "text-muted-foreground" }),
+      renderIcon: (o) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(AspectRatioGlyph, { value: o, className: "text-muted-foreground" }),
       searchable: options.length > 12,
       searchPlaceholder: "Search ratios\u2026",
       placeholder,
@@ -4762,7 +4851,7 @@ var import_react6 = require("react");
 
 // src/table.tsx
 var React24 = __toESM(require("react"), 1);
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 var TABLE_SIZES = {
   sm: { head: "px-2", cell: "p-2" },
   md: { head: "px-3", cell: "p-3" }
@@ -4773,7 +4862,7 @@ function useTableSize() {
 }
 var Table = React24.forwardRef(
   ({ className, size = "md", wrap = true, wrapperClassName, ...props }, ref) => {
-    const table = /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+    const table = /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
       "table",
       {
         ref,
@@ -4783,7 +4872,7 @@ var Table = React24.forwardRef(
         ...props
       }
     );
-    return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(TableSizeContext.Provider, { value: size, children: wrap ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(TableSizeContext.Provider, { value: size, children: wrap ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
       "div",
       {
         "data-slot": "table-wrapper",
@@ -4794,7 +4883,7 @@ var Table = React24.forwardRef(
   }
 );
 Table.displayName = "Table";
-var TableHeader = React24.forwardRef(({ className, sticky = false, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+var TableHeader = React24.forwardRef(({ className, sticky = false, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
   "thead",
   {
     ref,
@@ -4808,7 +4897,7 @@ var TableHeader = React24.forwardRef(({ className, sticky = false, ...props }, r
   }
 ));
 TableHeader.displayName = "TableHeader";
-var TableBody = React24.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+var TableBody = React24.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
   "tbody",
   {
     ref,
@@ -4818,7 +4907,7 @@ var TableBody = React24.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   }
 ));
 TableBody.displayName = "TableBody";
-var TableFooter = React24.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+var TableFooter = React24.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
   "tfoot",
   {
     ref,
@@ -4831,7 +4920,7 @@ var TableFooter = React24.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 TableFooter.displayName = "TableFooter";
-var TableRow = React24.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+var TableRow = React24.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
   "tr",
   {
     ref,
@@ -4846,7 +4935,7 @@ var TableRow = React24.forwardRef(({ className, ...props }, ref) => /* @__PURE__
 TableRow.displayName = "TableRow";
 var TableHead = React24.forwardRef(({ className, ...props }, ref) => {
   const size = useTableSize();
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
     "th",
     {
       ref,
@@ -4863,7 +4952,7 @@ var TableHead = React24.forwardRef(({ className, ...props }, ref) => {
 TableHead.displayName = "TableHead";
 var TableCell = React24.forwardRef(({ className, ...props }, ref) => {
   const size = useTableSize();
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
     "td",
     {
       ref,
@@ -4878,7 +4967,7 @@ var TableCell = React24.forwardRef(({ className, ...props }, ref) => {
   );
 });
 TableCell.displayName = "TableCell";
-var TableCaption = React24.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+var TableCaption = React24.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
   "caption",
   {
     ref,
@@ -4929,7 +5018,7 @@ function isReactElementLike(value) {
 }
 
 // src/controls/configuration-fields.tsx
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 var CONFIGURATION_CHOICE_SIZE = "h-[34px] min-h-[34px] rounded-lg px-2.5 text-[11.5px] font-medium";
 var FIELD_HELP_OPEN = "matrx:field-help-open";
 function FieldHelp({
@@ -4986,8 +5075,8 @@ function FieldHelp({
       if (closeTimer.current) clearTimeout(closeTimer.current);
     };
   }, [id]);
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(Popover, { open, onOpenChange: changeOpen, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(Popover, { open, onOpenChange: changeOpen, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       "button",
       {
         ref: trigger,
@@ -5023,10 +5112,10 @@ function FieldHelp({
           event.preventDefault();
           changeOpen(true);
         },
-        children: triggerIcon ?? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(CircleHelpIcon, { className: "size-3.5", "aria-hidden": "true" })
+        children: triggerIcon ?? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(CircleHelpIcon, { className: "size-3.5", "aria-hidden": "true" })
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
       PopoverContent,
       {
         ref: content,
@@ -5061,11 +5150,11 @@ function FieldHelp({
         ),
         onOpenAutoFocus: (event) => event.preventDefault(),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex items-center justify-between gap-3", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "font-medium", children: label }),
-            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Button2, { variant: "quiet", icon: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(XIcon, {}), "aria-label": `Close help: ${label}`, onClick: () => changeOpen(false), className: "shrink-0" })
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex items-center justify-between gap-3", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "font-medium", children: label }),
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Button2, { variant: "quiet", icon: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(XIcon, {}), "aria-label": `Close help: ${label}`, onClick: () => changeOpen(false), className: "shrink-0" })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "whitespace-pre-wrap break-words text-foreground", children })
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "whitespace-pre-wrap break-words text-foreground", children })
         ]
       }
     )
@@ -5091,7 +5180,7 @@ function StatusToken({
   label
 }) {
   const { Icon: Icon3, color, label: defaultLabel } = STATUS[status];
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
     "span",
     {
       className: cn(
@@ -5100,14 +5189,14 @@ function StatusToken({
         color
       ),
       children: [
-        Icon3 ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Icon3, { className: "size-3.5 shrink-0", "aria-hidden": "true" }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "break-words", children: label ?? defaultLabel })
+        Icon3 ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Icon3, { className: "size-3.5 shrink-0", "aria-hidden": "true" }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "break-words", children: label ?? defaultLabel })
       ]
     }
   );
 }
 function MissingTag({ children = "Not provided" }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
     "span",
     {
       "data-matrx-missing": "",
@@ -5118,18 +5207,18 @@ function MissingTag({ children = "Not provided" }) {
 }
 function RowHelp({ label, help }) {
   if (typeof help === "string" || typeof help === "number") {
-    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       "span",
       {
         title: String(help),
         "aria-label": String(help),
         "data-matrx-row-help": "",
         className: "inline-flex shrink-0 cursor-help text-muted-foreground hover:text-foreground",
-        children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(InfoIcon, { className: "size-3", "aria-hidden": "true" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(InfoIcon, { className: "size-3", "aria-hidden": "true" })
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(FieldHelp, { label, triggerIcon: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(InfoIcon, { className: "size-3", "aria-hidden": "true" }), children: help });
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(FieldHelp, { label, triggerIcon: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(InfoIcon, { className: "size-3", "aria-hidden": "true" }), children: help });
 }
 function isBlank(v) {
   return v === null || v === void 0 || v === false || v === "";
@@ -5161,7 +5250,7 @@ function PropertyRow({
   const valueClass = cn("min-w-0 type-value leading-5 [overflow-wrap:anywhere]", mono && "font-mono");
   const focusRing = "rounded-sm outline-none focus-visible:ring-2 focus-visible:ring-ring";
   if (layout === "inline") {
-    return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
       "div",
       {
         "data-matrx-property-row": "inline",
@@ -5171,32 +5260,32 @@ function PropertyRow({
           className
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex min-w-0 shrink-0 items-center gap-1.5 type-label leading-4 sm:w-44", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "break-words", children: label }),
-            help != null ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(RowHelp, { label, help }) : null
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex min-w-0 shrink-0 items-center gap-1.5 type-label leading-4 sm:w-44", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "break-words", children: label }),
+            help != null ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(RowHelp, { label, help }) : null
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex min-w-0 flex-1 flex-wrap items-center gap-x-6 gap-y-1", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: cn("flex-1", valueClass), children: isMissing ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(MissingTag, { children: missingText }) : content }),
-            source != null || state != null ? /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex flex-wrap items-center gap-x-4 gap-y-1 type-secondary text-foreground", children: [
-              source != null ? /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("span", { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "font-medium", children: "Source:" }),
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex min-w-0 flex-1 flex-wrap items-center gap-x-6 gap-y-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: cn("flex-1", valueClass), children: isMissing ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(MissingTag, { children: missingText }) : content }),
+            source != null || state != null ? /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex flex-wrap items-center gap-x-4 gap-y-1 type-secondary text-foreground", children: [
+              source != null ? /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("span", { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "font-medium", children: "Source:" }),
                 " ",
                 source
               ] }) : null,
-              state != null ? /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("span", { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "font-medium", children: "State:" }),
+              state != null ? /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("span", { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "font-medium", children: "State:" }),
                 " ",
                 state
               ] }) : null
             ] }) : null,
-            meta != null ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "flex shrink-0 items-center gap-1.5 type-meta text-muted-foreground", children: meta }) : null
+            meta != null ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "flex shrink-0 items-center gap-1.5 type-meta text-muted-foreground", children: meta }) : null
           ] })
         ]
       }
     );
   }
   const margin = expandable || gutter;
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
     "div",
     {
       "data-matrx-property-row": "stacked",
@@ -5207,7 +5296,7 @@ function PropertyRow({
         className
       ),
       children: [
-        margin ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "flex h-4 items-center", children: expandable ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+        margin ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "flex h-4 items-center", children: expandable ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
           "button",
           {
             type: "button",
@@ -5215,15 +5304,15 @@ function PropertyRow({
             "aria-expanded": open,
             "aria-label": open ? `Collapse ${label}` : `Expand ${label}`,
             className: cn("inline-flex text-muted-foreground hover:text-foreground", focusRing),
-            children: open ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ChevronDownIcon, { className: "size-3.5", "aria-hidden": "true" }) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ChevronRightIcon, { className: "size-3.5", "aria-hidden": "true" })
+            children: open ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ChevronDownIcon, { className: "size-3.5", "aria-hidden": "true" }) : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ChevronRightIcon, { className: "size-3.5", "aria-hidden": "true" })
           }
         ) : null }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex h-4 min-w-0 items-center gap-1.5", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "truncate type-label leading-4", children: label }),
-          help != null ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(RowHelp, { label, help }) : null,
-          meta != null ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "ml-auto flex min-w-0 shrink-0 items-center gap-1.5 type-meta text-muted-foreground", children: meta }) : null
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex h-4 min-w-0 items-center gap-1.5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "truncate type-label leading-4", children: label }),
+          help != null ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(RowHelp, { label, help }) : null,
+          meta != null ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "ml-auto flex min-w-0 shrink-0 items-center gap-1.5 type-meta text-muted-foreground", children: meta }) : null
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
           "div",
           {
             className: cn(
@@ -5232,7 +5321,7 @@ function PropertyRow({
               // A "Not provided" row is exactly as tall as a text row: the value line is a fixed 20px.
               isMissing ? "flex h-5 items-center" : expandable && open ? "mt-1" : "flex min-h-5 items-center"
             ),
-            children: isMissing ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(MissingTag, { children: missingText }) : expandable && open ? expanded : expandable ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+            children: isMissing ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(MissingTag, { children: missingText }) : expandable && open ? expanded : expandable ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
               "button",
               {
                 type: "button",
@@ -5240,7 +5329,7 @@ function PropertyRow({
                 className: cn("block max-w-full truncate text-left", valueClass, focusRing),
                 children: content
               }
-            ) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: valueClass, children: content })
+            ) : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: valueClass, children: content })
           }
         )
       ]
@@ -5251,9 +5340,9 @@ function ConfigurationValueList({
   label,
   entries
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("dl", { "aria-label": label, className: "min-w-0 divide-y divide-border rounded-lg border border-border bg-card type-body text-foreground", children: entries.map((entry) => /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "min-w-0 p-3", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("dt", { className: "mb-2 break-words font-semibold", children: entry.label }),
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("dd", { className: "min-w-0 [overflow-wrap:anywhere]", children: entry.value })
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("dl", { "aria-label": label, className: "min-w-0 divide-y divide-border rounded-lg border border-border bg-card type-body text-foreground", children: entries.map((entry) => /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "min-w-0 p-3", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("dt", { className: "mb-2 break-words font-semibold", children: entry.label }),
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("dd", { className: "min-w-0 [overflow-wrap:anywhere]", children: entry.value })
   ] }, entry.key)) });
 }
 function ConfigurationTable({
@@ -5261,7 +5350,7 @@ function ConfigurationTable({
   columns,
   children
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "min-w-0 rounded-lg border border-border bg-card", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "min-w-0 rounded-lg border border-border bg-card", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
     Table,
     {
       size: "sm",
@@ -5269,19 +5358,19 @@ function ConfigurationTable({
       "aria-label": label,
       className: cn("matrx-config-table", "type-body text-foreground"),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(TableHeader, { className: "matrx-config-head", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(TableRow, { className: "bg-accent/40 hover:bg-accent/40", children: columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(TableHeader, { className: "matrx-config-head", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(TableRow, { className: "bg-accent/40 hover:bg-accent/40", children: columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
           TableHead,
           {
             scope: "col",
             className: "whitespace-normal align-middle font-semibold text-foreground",
-            children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("span", { className: "matrx-config-heading", children: [
+            children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("span", { className: "matrx-config-heading", children: [
               column.label,
-              column.help ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(FieldHelp, { label: column.label, children: column.help }) : null
+              column.help ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(FieldHelp, { label: column.label, children: column.help }) : null
             ] })
           },
           column.key
         )) }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(TableBody, { className: "matrx-config-body", children })
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(TableBody, { className: "matrx-config-body", children })
       ]
     }
   ) });
@@ -5290,16 +5379,16 @@ function ConfigurationTableRow({
   columns,
   cells
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
     TableRow,
     {
       className: cn("matrx-config-row", "border-b border-border last:border-b-0"),
-      children: columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+      children: columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
         TableCell,
         {
           className: cn("matrx-config-cell", "min-w-0 whitespace-normal align-middle"),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
               "span",
               {
                 className: cn(
@@ -5309,11 +5398,11 @@ function ConfigurationTableRow({
                 children: [
                   column.label,
                   ":",
-                  column.help ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(FieldHelp, { label: column.label, children: column.help }) : null
+                  column.help ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(FieldHelp, { label: column.label, children: column.help }) : null
                 ]
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "matrx-config-cell-content", children: cells[column.key] ?? "Not specified" })
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "matrx-config-cell-content", children: cells[column.key] ?? "Not specified" })
           ]
         },
         column.key
@@ -5323,7 +5412,7 @@ function ConfigurationTableRow({
 }
 
 // src/indicator-strip.tsx
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_jsx_runtime35 = require("react/jsx-runtime");
 var TONE = {
   danger: "text-destructive",
   warning: "text-warning",
@@ -5336,7 +5425,7 @@ function indicatorText(item) {
   return item.detail ? `${item.label}: yes \u2014 ${item.detail}` : `${item.label}: yes`;
 }
 function IndicatorStrip({ items, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
     "span",
     {
       "data-slot": "indicator-strip",
@@ -5346,7 +5435,7 @@ function IndicatorStrip({ items, className, ...props }) {
       children: items.map((item) => {
         const Icon3 = item.icon;
         const text = indicatorText(item);
-        return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
           "span",
           {
             role: "listitem",
@@ -5359,7 +5448,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__ */ (0, import_jsx_runtime34.jsx)(Icon3, { className: "size-3.5", "aria-hidden": true })
+            children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Icon3, { className: "size-3.5", "aria-hidden": true })
           },
           item.id
         );
@@ -5369,7 +5458,7 @@ function IndicatorStrip({ items, className, ...props }) {
 }
 
 // src/controls/middle-truncate.tsx
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 var DEFAULT_TAIL = 10;
 function splitForMiddleTruncate(text, tail = DEFAULT_TAIL) {
   const keep = Math.min(tail, Math.floor(text.length / 2));
@@ -5382,15 +5471,15 @@ function MiddleTruncate({
   className
 }) {
   const { head, end } = splitForMiddleTruncate(text, tail);
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("span", { className: cn("flex min-w-0 items-baseline", className), title: text, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "sr-only", children: text }),
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { "aria-hidden": true, className: "min-w-0 truncate whitespace-pre", children: head }),
-    end ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { "aria-hidden": true, className: "shrink-0 whitespace-pre", children: end }) : null
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("span", { className: cn("flex min-w-0 items-baseline", className), title: text, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "sr-only", children: text }),
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { "aria-hidden": true, className: "min-w-0 truncate whitespace-pre", children: head }),
+    end ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { "aria-hidden": true, className: "shrink-0 whitespace-pre", children: end }) : null
   ] });
 }
 
 // src/controls/callout-banner.tsx
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_jsx_runtime37 = require("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" },
@@ -5408,7 +5497,7 @@ function CalloutBanner({
   className
 }) {
   const t = TONE2[tone2];
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
     "div",
     {
       className: cn(
@@ -5418,16 +5507,16 @@ function CalloutBanner({
       ),
       role: "status",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex min-w-0 flex-1 items-start gap-2", children: [
-          Icon3 && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Icon3, { className: cn("mt-0.5 h-4 w-4 shrink-0", t.icon), "aria-hidden": true }),
-          /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "min-w-0", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("p", { className: "type-title text-foreground", children: title }),
-            description && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("p", { className: "mt-0.5 type-secondary text-muted-foreground", children: description })
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex min-w-0 flex-1 items-start gap-2", children: [
+          Icon3 && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Icon3, { className: cn("mt-0.5 h-4 w-4 shrink-0", t.icon), "aria-hidden": true }),
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "min-w-0", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { className: "type-title text-foreground", children: title }),
+            description && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { className: "mt-0.5 type-secondary text-muted-foreground", children: description })
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex shrink-0 items-center gap-1.5 sm:ml-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex shrink-0 items-center gap-1.5 sm:ml-2", children: [
           actions,
-          onDismiss && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Button2, { variant: "quiet", icon: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(XIcon, {}), "aria-label": "Dismiss", onClick: onDismiss, disabled: dismissing })
+          onDismiss && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Button2, { variant: "quiet", icon: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(XIcon, {}), "aria-label": "Dismiss", onClick: onDismiss, disabled: dismissing })
         ] })
       ]
     }
@@ -5436,7 +5525,7 @@ function CalloutBanner({
 
 // src/controls/gated-action-button.tsx
 var React25 = __toESM(require("react"), 1);
-var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 function firstBlockingReason(checks) {
   for (const check of checks) {
     if (check && check.when) return check.reason;
@@ -5455,7 +5544,7 @@ function GatedActionButton({
   const reactId = React25.useId();
   const blocked = Boolean(reason && reason.trim());
   const reasonId = `gated-action-reason-${reactId}`;
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
     "span",
     {
       className: cn(
@@ -5463,7 +5552,7 @@ function GatedActionButton({
         wrapperClassName
       ),
       children: [
-        blocked ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+        blocked ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
           "span",
           {
             id: reasonId,
@@ -5476,7 +5565,7 @@ function GatedActionButton({
             children: reason
           }
         ) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
           Button,
           {
             ...buttonProps,
@@ -5494,7 +5583,7 @@ GatedActionButton.displayName = "GatedActionButton";
 
 // src/controls/search-input.tsx
 var import_react7 = require("react");
-var import_jsx_runtime38 = require("react/jsx-runtime");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 function SearchInput({
   value,
   defaultValue = "",
@@ -5550,21 +5639,21 @@ function SearchInput({
     onSearch?.("");
     inputRef.current?.focus();
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
     "form",
     {
       onSubmit: handleSubmit,
       className: cn("flex min-w-0 items-center gap-2", className),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "relative min-w-0 flex-1", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "relative min-w-0 flex-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
             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__ */ (0, import_jsx_runtime38.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
             Input,
             {
               ref: inputRef,
@@ -5578,7 +5667,7 @@ function SearchInput({
               adornment: showClearButton && searchValue ? "both" : "start"
             }
           ),
-          showClearButton && searchValue ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+          showClearButton && searchValue ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
             "button",
             {
               type: "button",
@@ -5586,14 +5675,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__ */ (0, import_jsx_runtime38.jsx)(XIcon, { className: "h-3.5 w-3.5" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(XIcon, { className: "h-3.5 w-3.5" })
             }
           ) : null
         ] }),
-        showSubmitButton ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+        showSubmitButton ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
           Button2,
           {
-            icon: loading ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Loader2Icon, { className: "animate-spin" }) : /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(SearchIcon, {}),
+            icon: loading ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Loader2Icon, { className: "animate-spin" }) : /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(SearchIcon, {}),
             variant: "primary",
             type: "submit",
             disabled: disabled || loading,
@@ -5612,13 +5701,13 @@ var import_react8 = require("react");
 // src/tooltip.tsx
 var TooltipPrimitive = __toESM(require("@radix-ui/react-tooltip"), 1);
 var React27 = __toESM(require("react"), 1);
-var import_jsx_runtime39 = require("react/jsx-runtime");
+var import_jsx_runtime40 = require("react/jsx-runtime");
 function TooltipProvider({ titleTooltips = true, disableHoverableContent = false, ...props }) {
   React27.useEffect(() => {
     if (!titleTooltips) return;
     return acquireTitleTooltips();
   }, [titleTooltips]);
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(TooltipPrimitive.Provider, { ...props, disableHoverableContent });
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(TooltipPrimitive.Provider, { ...props, disableHoverableContent });
 }
 var TriggerContext = React27.createContext(null);
 var Tooltip = ({ onOpenChange, ...props }) => {
@@ -5626,7 +5715,7 @@ var Tooltip = ({ onOpenChange, ...props }) => {
   const [open, setOpen] = React27.useState(Boolean(props.open ?? props.defaultOpen));
   const shown = props.open ?? open;
   const value = React27.useMemo(() => ({ ref, open: shown }), [shown]);
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(TriggerContext.Provider, { value, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(TriggerContext.Provider, { value, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
     TooltipPrimitive.Root,
     {
       ...props,
@@ -5648,14 +5737,14 @@ var TooltipTrigger = React27.forwardRef((props, ref) => {
     },
     [trigger, ref]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(TooltipPrimitive.Trigger, { ref: setRef, ...{ [TOOLTIP_TRIGGER_ATTR]: "" }, ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(TooltipPrimitive.Trigger, { ref: setRef, ...{ [TOOLTIP_TRIGGER_ATTR]: "" }, ...props });
 });
 TooltipTrigger.displayName = TooltipPrimitive.Trigger.displayName;
 var TooltipContent = React27.forwardRef(({ className, side, fallbackSide, sideOffset = 4, collisionPadding = TOOLTIP_EDGE_PX, container, animated = true, children, style, ...props }, ref) => {
   const resolved = usePortalContainer(container);
   const trigger = React27.useContext(TriggerContext);
   const placed = side ?? (trigger?.open ? tooltipSide(trigger.ref.current, fallbackSide) : fallbackSide ?? "top");
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(TooltipPrimitive.Portal, { container: resolved ?? null, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(TooltipPrimitive.Portal, { container: resolved ?? null, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
     TooltipPrimitive.Content,
     {
       ref,
@@ -5678,7 +5767,7 @@ var TooltipContent = React27.forwardRef(({ className, side, fallbackSide, sideOf
 TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 
 // src/controls/collapsible-text.tsx
-var import_jsx_runtime40 = require("react/jsx-runtime");
+var import_jsx_runtime41 = require("react/jsx-runtime");
 function CollapsibleText({
   children,
   expanded,
@@ -5712,8 +5801,8 @@ function CollapsibleText({
   }, [children, collapsedLines]);
   const isCollapsed = isOverflowing && !expanded;
   if (showLabel) {
-    return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "relative min-w-0", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "relative min-w-0", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
         "div",
         {
           ref: contentRef,
@@ -5726,7 +5815,7 @@ function CollapsibleText({
           children
         }
       ),
-      isOverflowing ? /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
+      isOverflowing ? /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
         "button",
         {
           type: "button",
@@ -5737,15 +5826,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__ */ (0, import_jsx_runtime40.jsx)(ChevronDownIcon, { className: "h-3.5 w-3.5", "aria-hidden": true }) : /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(ChevronUpIcon, { className: "h-3.5 w-3.5", "aria-hidden": true }),
+            isCollapsed ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(ChevronDownIcon, { className: "h-3.5 w-3.5", "aria-hidden": true }) : /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(ChevronUpIcon, { className: "h-3.5 w-3.5", "aria-hidden": true }),
             isCollapsed ? expandLabel : collapseLabel
           ]
         }
       ) : null
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "relative min-w-0", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "relative min-w-0", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
       "div",
       {
         ref: contentRef,
@@ -5758,10 +5847,10 @@ function CollapsibleText({
         children
       }
     ),
-    isCollapsed ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "pointer-events-none absolute inset-x-0 bottom-0 flex justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+    isCollapsed ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "pointer-events-none absolute inset-x-0 bottom-0 flex justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
       Button2,
       {
-        icon: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(ChevronDownIcon, {}),
+        icon: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(ChevronDownIcon, {}),
         type: "button",
         variant: "outline",
         "aria-label": expandLabel,
@@ -5772,10 +5861,10 @@ function CollapsibleText({
         },
         className: "pointer-events-auto"
       }
-    ) }) : isOverflowing ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "flex justify-center pt-0.5", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+    ) }) : isOverflowing ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "flex justify-center pt-0.5", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
       Button2,
       {
-        icon: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(ChevronUpIcon, {}),
+        icon: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(ChevronUpIcon, {}),
         type: "button",
         variant: "quiet",
         "aria-label": collapseLabel,
@@ -5795,12 +5884,12 @@ function CollapsibleTextGroupControls({
   anyExpanded,
   disabled = false
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex items-center gap-0.5", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(Tooltip, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex items-center gap-0.5", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(Tooltip, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
         Button2,
         {
-          icon: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(ChevronsDownIcon, { className: "!size-[18px] lg:!size-3.5" }),
+          icon: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(ChevronsDownIcon, { className: "!size-[18px] lg:!size-3.5" }),
           type: "button",
           variant: "quiet",
           "aria-label": "Expand all",
@@ -5808,13 +5897,13 @@ function CollapsibleTextGroupControls({
           disabled: disabled || allExpanded
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(TooltipContent, { side: "top", children: "Expand all" })
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(TooltipContent, { side: "top", children: "Expand all" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(Tooltip, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(Tooltip, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
         Button2,
         {
-          icon: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(ChevronsUpIcon, { className: "!size-[18px] lg:!size-3.5" }),
+          icon: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(ChevronsUpIcon, { className: "!size-[18px] lg:!size-3.5" }),
           type: "button",
           variant: "quiet",
           "aria-label": "Collapse all",
@@ -5822,14 +5911,14 @@ function CollapsibleTextGroupControls({
           disabled: disabled || !anyExpanded
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(TooltipContent, { side: "top", children: "Collapse all" })
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(TooltipContent, { side: "top", children: "Collapse all" })
     ] })
   ] });
 }
 
 // src/controls/info-hint.tsx
 var import_react9 = require("react");
-var import_jsx_runtime41 = require("react/jsx-runtime");
+var import_jsx_runtime42 = require("react/jsx-runtime");
 var COARSE_POINTER_QUERY = "(pointer: coarse)";
 function subscribeCoarse(onChange) {
   const mq = window.matchMedia(COARSE_POINTER_QUERY);
@@ -5853,10 +5942,10 @@ function InfoHint({ text, label = "More info", className, side = "top" }) {
   const coarse = useCoarsePointer();
   const isMobile = (0, import_media_query.useIsMobile)();
   const [open, setOpen] = (0, import_react9.useState)(false);
-  const glyph = /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(InfoIcon, { "aria-hidden": true, className: "h-3.5 w-3.5", strokeWidth: 2 });
+  const glyph = /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(InfoIcon, { "aria-hidden": true, className: "h-3.5 w-3.5", strokeWidth: 2 });
   if (coarse || isMobile) {
-    return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(Popover, { open, onOpenChange: setOpen, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(Popover, { open, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
         "button",
         {
           type: "button",
@@ -5870,7 +5959,7 @@ function InfoHint({ text, label = "More info", className, side = "top" }) {
           children: glyph
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
         PopoverContent,
         {
           side,
@@ -5887,8 +5976,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__ */ (0, import_jsx_runtime41.jsx)(TooltipProvider, { delayDuration: 200, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(Tooltip, { open, onOpenChange: setOpen, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(TooltipProvider, { delayDuration: 200, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(Tooltip, { open, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
         "button",
         {
           type: "button",
@@ -5904,13 +5993,13 @@ function InfoHint({ text, label = "More info", className, side = "top" }) {
           children: glyph
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(TooltipContent, { side, className: CONTENT_CLASS, onClick: isolate, children: text })
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(TooltipContent, { side, className: CONTENT_CLASS, onClick: isolate, children: text })
     ] }) })
   );
 }
 
 // src/controls/status-badge.tsx
-var import_jsx_runtime42 = require("react/jsx-runtime");
+var import_jsx_runtime43 = require("react/jsx-runtime");
 var STATUS_TONES = ["success", "warning", "danger", "neutral", "info"];
 var TONE_CLASS = {
   success: "border-success/40 bg-success/15 text-success-ink",
@@ -5926,7 +6015,7 @@ var SIZE_CLASS = {
 };
 function StatusBadge({ label, tone: tone2, icon: Icon3, size = "md", title, trailing, className }) {
   const s = SIZE_CLASS[size];
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
     "span",
     {
       role: "status",
@@ -5942,7 +6031,7 @@ function StatusBadge({ label, tone: tone2, icon: Icon3, size = "md", title, trai
         className
       ),
       children: [
-        Icon3 ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Icon3, { "aria-hidden": true, className: cn("shrink-0", s.icon) }) : null,
+        Icon3 ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Icon3, { "aria-hidden": true, className: cn("shrink-0", s.icon) }) : null,
         label,
         trailing
       ]
@@ -5952,7 +6041,7 @@ function StatusBadge({ label, tone: tone2, icon: Icon3, size = "md", title, trai
 
 // src/controls/structured-section-card.tsx
 var React28 = __toESM(require("react"), 1);
-var import_jsx_runtime43 = require("react/jsx-runtime");
+var import_jsx_runtime44 = require("react/jsx-runtime");
 var TITLE_TONE = {
   primary: "text-primary-ink",
   foreground: "text-foreground"
@@ -5969,24 +6058,24 @@ function StructuredSectionCard({
   className
 }) {
   const hasFooter = footerLeft || footerCenter || footerRight;
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
     "div",
     {
       "data-slot": "structured-section-card",
       className: cn("overflow-hidden rounded-xl border-border bg-textured shadow-sm", className),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "flex items-center justify-between border-b border-border bg-muted px-4 py-3", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "min-w-0", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("h3", { className: cn("font-medium", TITLE_TONE[titleTone]), children: title }),
-            description && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("p", { className: "type-body text-muted-foreground", children: description })
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "flex items-center justify-between border-b border-border bg-muted px-4 py-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "min-w-0", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("h3", { className: cn("font-medium", TITLE_TONE[titleTone]), children: title }),
+            description && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("p", { className: "type-body text-muted-foreground", children: description })
           ] }),
-          headerActions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "ml-4 flex shrink-0 items-center space-x-2", children: headerActions.map((action, index) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(React28.Fragment, { children: action }, index)) })
+          headerActions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "ml-4 flex shrink-0 items-center space-x-2", children: headerActions.map((action, index) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(React28.Fragment, { children: action }, index)) })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "p-4", children }),
-        hasFooter && /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "flex flex-wrap items-center border-t border-border px-4 py-3", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "flex min-w-[33%] flex-1 justify-start space-x-2 sm:min-w-0", children: footerLeft }),
-          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("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__ */ (0, import_jsx_runtime43.jsx)("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__ */ (0, import_jsx_runtime44.jsx)("div", { className: "p-4", children }),
+        hasFooter && /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "flex flex-wrap items-center border-t border-border px-4 py-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "flex min-w-[33%] flex-1 justify-start space-x-2 sm:min-w-0", children: footerLeft }),
+          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("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__ */ (0, import_jsx_runtime44.jsx)("div", { className: "mt-2 flex min-w-[33%] flex-1 justify-end space-x-2 sm:mt-0 sm:min-w-0", children: footerRight })
         ] })
       ]
     }
@@ -5994,7 +6083,7 @@ function StructuredSectionCard({
 }
 
 // src/controls/icon-dropdown-menu.tsx
-var import_jsx_runtime44 = require("react/jsx-runtime");
+var import_jsx_runtime45 = require("react/jsx-runtime");
 function IconDropdownMenu({
   options,
   value,
@@ -6009,21 +6098,21 @@ function IconDropdownMenu({
     console.warn("IconDropdownMenu: no option to show \u2014 pass at least one option.");
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(DropdownMenu, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(DropdownMenu, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
       Button2,
       {
-        icon: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(SelectedIcon, {}),
-        iconEnd: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(ChevronDownIcon, {}),
+        icon: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(SelectedIcon, {}),
+        iconEnd: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(ChevronDownIcon, {}),
         variant: "outline",
         "aria-label": selected.label,
         ...className ? { className } : {}
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(DropdownMenuContent, { align, className: cn("rounded-2xl p-1", menuWidth), children: options.map((option) => {
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(DropdownMenuContent, { align, className: cn("rounded-2xl p-1", menuWidth), children: options.map((option) => {
       const isSelected = option.value === value;
       const OptionIcon = option.icon;
-      return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
         DropdownMenuItem,
         {
           onClick: () => onValueChange(option.value),
@@ -6033,9 +6122,9 @@ function IconDropdownMenu({
             isSelected && "bg-primary/10"
           ),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(OptionIcon, { className: cn("h-4 w-4 shrink-0", isSelected ? "text-primary-ink" : "text-muted-foreground") }),
-            /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: cn("type-body flex-1 leading-tight", isSelected ? "font-medium text-primary-ink" : "text-foreground"), children: option.label }),
-            isSelected && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(CheckIcon, { className: "h-4 w-4 shrink-0 text-primary-ink" })
+            /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(OptionIcon, { className: cn("h-4 w-4 shrink-0", isSelected ? "text-primary-ink" : "text-muted-foreground") }),
+            /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: cn("type-body flex-1 leading-tight", isSelected ? "font-medium text-primary-ink" : "text-foreground"), children: option.label }),
+            isSelected && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(CheckIcon, { className: "h-4 w-4 shrink-0 text-primary-ink" })
           ]
         },
         String(option.value)
@@ -6046,7 +6135,7 @@ function IconDropdownMenu({
 
 // src/error-box.tsx
 var React29 = __toESM(require("react"), 1);
-var import_jsx_runtime45 = require("react/jsx-runtime");
+var import_jsx_runtime46 = require("react/jsx-runtime");
 var CONTEXT_KEY = /* @__PURE__ */ Symbol.for("@ai-matrx/design-system/error-actions");
 var registry2 = globalThis;
 var ErrorActionsContext = registry2[CONTEXT_KEY] ?? (registry2[CONTEXT_KEY] = React29.createContext(null));
@@ -6059,7 +6148,7 @@ function useErrorActions() {
 function ErrorActions(props) {
   const render = useErrorActions();
   if (!render) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_jsx_runtime45.Fragment, { children: render(props) });
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_jsx_runtime46.Fragment, { children: render(props) });
 }
 var ErrorBox = React29.forwardRef(function ErrorBox2({
   as = "p",
@@ -6083,17 +6172,17 @@ var ErrorBox = React29.forwardRef(function ErrorBox2({
     ...unsavedInput !== void 0 ? { unsavedInput } : {},
     ...origin !== void 0 ? { origin } : {}
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(Tag, { ref, role: "alert", "data-error-box": "", ...rest, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(Tag, { ref, role: "alert", "data-error-box": "", ...rest, children: [
     children ?? message,
-    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(ErrorActions, { ...facts })
+    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(ErrorActions, { ...facts })
   ] });
 });
 
 // src/label.tsx
 var LabelPrimitive = __toESM(require("@radix-ui/react-label"), 1);
 var React30 = __toESM(require("react"), 1);
-var import_jsx_runtime46 = require("react/jsx-runtime");
-var Label3 = React30.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+var import_jsx_runtime47 = require("react/jsx-runtime");
+var Label3 = React30.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
   LabelPrimitive.Root,
   {
     ref,
@@ -6107,7 +6196,7 @@ var Label3 = React30.forwardRef(({ className, ...props }, ref) => /* @__PURE__ *
 Label3.displayName = LabelPrimitive.Root.displayName;
 
 // src/controls/field.tsx
-var import_jsx_runtime47 = require("react/jsx-runtime");
+var import_jsx_runtime48 = require("react/jsx-runtime");
 function LabeledField({
   label,
   htmlFor,
@@ -6126,9 +6215,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__ */ (0, import_jsx_runtime47.jsxs)("div", { "data-field-root": "", className: cn("group/field space-y-1.5", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "flex items-center gap-1.5", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { "data-field-root": "", className: cn("group/field space-y-1.5", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex items-center gap-1.5", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
         Label3,
         {
           htmlFor,
@@ -6138,27 +6227,27 @@ function LabeledField({
           ),
           children: [
             label,
-            required && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "text-destructive ml-1", "aria-hidden": true, children: "*" }),
-            !required && optional && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "text-muted-foreground ml-1.5 type-secondary font-normal", children: "(optional)" })
+            required && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "text-destructive ml-1", "aria-hidden": true, children: "*" }),
+            !required && optional && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "text-muted-foreground ml-1.5 type-secondary font-normal", children: "(optional)" })
           ]
         }
       ),
-      typeof help === "string" && help && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(InfoHint, { text: help, label: typeof label === "string" ? `About ${label}` : "Help" }),
-      help && typeof help !== "string" && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(TooltipProvider, { delayDuration: 150, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(Tooltip, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+      typeof help === "string" && help && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(InfoHint, { text: help, label: typeof label === "string" ? `About ${label}` : "Help" }),
+      help && typeof help !== "string" && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(TooltipProvider, { delayDuration: 150, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(Tooltip, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
           "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__ */ (0, import_jsx_runtime47.jsx)(CircleHelpIcon, { className: "h-3.5 w-3.5" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(CircleHelpIcon, { className: "h-3.5 w-3.5" })
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(TooltipContent, { side: "top", className: "max-w-xs type-secondary", children: help })
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(TooltipContent, { side: "top", className: "max-w-xs type-secondary", children: help })
       ] }) })
     ] }),
-    description && !error && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("p", { className: "type-secondary text-muted-foreground", children: description }),
-    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+    description && !error && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("p", { className: "type-secondary text-muted-foreground", children: description }),
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
       "div",
       {
         "data-slot": "field-control",
@@ -6169,7 +6258,7 @@ function LabeledField({
         children
       }
     ),
-    (error || hasCounter || requiredEmpty) && /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
+    (error || hasCounter || requiredEmpty) && /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
       "div",
       {
         className: cn(
@@ -6181,10 +6270,10 @@ function LabeledField({
           !error && !hasCounter && "hidden [[data-field-root]:has(:placeholder-shown)_&]:flex"
         ),
         children: [
-          error ? /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("p", { className: "type-secondary text-destructive flex items-center gap-1", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(CircleAlertIcon, { className: "h-3 w-3 flex-shrink-0" }),
-            /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { children: error }),
-            /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+          error ? /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("p", { className: "type-secondary text-destructive flex items-center gap-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(CircleAlertIcon, { className: "h-3 w-3 flex-shrink-0" }),
+            /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { children: error }),
+            /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
               ErrorActions,
               {
                 ...typeof error === "string" ? { message: error } : {},
@@ -6192,18 +6281,18 @@ function LabeledField({
                 origin: "design-system/LabeledField"
               }
             )
-          ] }) : requiredEmpty ? /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
+          ] }) : requiredEmpty ? /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
             "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__ */ (0, import_jsx_runtime47.jsx)(CircleAlertIcon, { className: "h-3 w-3 flex-shrink-0" }),
-                /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { children: "Empty \u2014 the gray text is an example, not your answer." })
+                /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(CircleAlertIcon, { className: "h-3 w-3 flex-shrink-0" }),
+                /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { children: "Empty \u2014 the gray text is an example, not your answer." })
               ]
             }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", {}),
-          hasCounter && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+          ) : /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", {}),
+          hasCounter && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
             "span",
             {
               className: cn(
@@ -6226,7 +6315,7 @@ var import_clipboard_fallback_opener = require("@ai-matrx/kit/clipboard-fallback
 var import_notify = require("@ai-matrx/kit/notify");
 var React31 = __toESM(require("react"), 1);
 var import_react_dom = require("react-dom");
-var import_jsx_runtime48 = require("react/jsx-runtime");
+var import_jsx_runtime49 = require("react/jsx-runtime");
 var { useState: useState17, useLayoutEffect: useLayoutEffect4, useRef: useRef12 } = React31;
 function HelpIcon({
   text,
@@ -6325,13 +6414,13 @@ function HelpIcon({
   }, [isVisible]);
   const formatTextWithLineBreaks = (text2) => {
     const processedText = text2.replace(/\\n/g, "\n");
-    return processedText.split("\n").map((line, index) => /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(React31.Fragment, { children: [
-      index > 0 && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("br", {}),
+    return processedText.split("\n").map((line, index) => /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(React31.Fragment, { children: [
+      index > 0 && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("br", {}),
       line
     ] }, index));
   };
   if (!text && !content) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
     "div",
     {
       className: `inline-block relative cursor-help ${className}`,
@@ -6339,9 +6428,9 @@ function HelpIcon({
       onMouseEnter: showTooltip,
       onMouseLeave: hideTooltip,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(InfoIcon, { className: "h-4 w-4 text-muted-foreground transition-colors duration-200" }),
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(InfoIcon, { className: "h-4 w-4 text-muted-foreground transition-colors duration-200" }),
         isVisible && typeof document !== "undefined" && (0, import_react_dom.createPortal)(
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
             "div",
             {
               ref: tooltipRef,
@@ -6354,29 +6443,29 @@ function HelpIcon({
               onMouseEnter: cancelHideTooltip,
               onMouseLeave: hideTooltip,
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "p-3", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex items-center gap-2 mb-2", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(CircleHelpIcon, { className: "h-4 w-4 flex-shrink-0 text-info-ink" }),
-                    title && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("h3", { className: "text-foreground type-title", children: title }),
-                    text && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "p-3", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "flex items-center gap-2 mb-2", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(CircleHelpIcon, { className: "h-4 w-4 flex-shrink-0 text-info-ink" }),
+                    title && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("h3", { className: "text-foreground type-title", children: title }),
+                    text && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
                       Button2,
                       {
                         variant: "quiet",
                         className: "ml-auto",
-                        icon: copied ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(CheckIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(CopyIcon, {}),
+                        icon: copied ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(CheckIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(CopyIcon, {}),
                         "aria-label": "Copy to clipboard",
                         onClick: handleCopy
                       }
                     )
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "type-body text-foreground leading-relaxed", children: content ? content : text && formatTextWithLineBreaks(text) }),
-                  required && /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("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__ */ (0, import_jsx_runtime48.jsx)("div", { className: "w-1.5 h-1.5 bg-warning-ink rounded-full" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "type-body text-foreground leading-relaxed", children: content ? content : text && formatTextWithLineBreaks(text) }),
+                  required && /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("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__ */ (0, import_jsx_runtime49.jsx)("div", { className: "w-1.5 h-1.5 bg-warning-ink rounded-full" }),
                     "Required Field"
                   ] }),
-                  onAiAssistance && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Button2, { variant: "primary", icon: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(CircleDotIcon, {}), className: "mt-3 w-full", onClick: handleAiClick, children: "Get Help From Matrx AI" })
+                  onAiAssistance && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Button2, { variant: "primary", icon: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(CircleDotIcon, {}), className: "mt-3 w-full", onClick: handleAiClick, children: "Get Help From Matrx AI" })
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("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__ */ (0, import_jsx_runtime49.jsx)("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" })
               ]
             }
           ),
@@ -6392,7 +6481,7 @@ var import_clipboard2 = require("@ai-matrx/kit/clipboard");
 var import_notify2 = require("@ai-matrx/kit/notify");
 var import_clipboard_fallback_opener2 = require("@ai-matrx/kit/clipboard-fallback-opener");
 var React32 = __toESM(require("react"), 1);
-var import_jsx_runtime49 = require("react/jsx-runtime");
+var import_jsx_runtime50 = require("react/jsx-runtime");
 function cleanUrl(url) {
   try {
     const parsed = new URL(url);
@@ -6448,9 +6537,9 @@ function TextArrayInput({
     handleChange([...value, ...added]);
     setInputValue("");
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: `space-y-3 ${className}`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("form", { onSubmit: handleSubmit, className: "relative w-full", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: `space-y-3 ${className}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("form", { onSubmit: handleSubmit, className: "relative w-full", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
         Input,
         {
           adornment: "end",
@@ -6464,12 +6553,12 @@ function TextArrayInput({
           className: "w-full"
         }
       ),
-      showCopyIcon && value.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+      showCopyIcon && value.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
         Button2,
         {
           ...tabIndexProp,
           variant: "quiet",
-          icon: copied ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(CheckIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(CopyIcon, {}),
+          icon: copied ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(CheckIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(CopyIcon, {}),
           ...copied ? { glyphTone: "success" } : {},
           "aria-label": "Copy values",
           onClick: handleCopy,
@@ -6477,13 +6566,13 @@ function TextArrayInput({
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "flex flex-wrap gap-2", children: value.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("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__ */ (0, import_jsx_runtime49.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "flex flex-wrap gap-2", children: value.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("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__ */ (0, import_jsx_runtime50.jsxs)(
       "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__ */ (0, import_jsx_runtime49.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
             "button",
             {
               ...tabIndexProp,
@@ -6494,7 +6583,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__ */ (0, import_jsx_runtime49.jsx)(XIcon, { className: "h-3.5 w-3.5" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(XIcon, { className: "h-3.5 w-3.5" })
             }
           )
         ]
@@ -6523,21 +6612,21 @@ function getTapTargetLinkComponent() {
 }
 
 // src/host-link.tsx
-var import_jsx_runtime50 = require("react/jsx-runtime");
+var import_jsx_runtime51 = require("react/jsx-runtime");
 var HostLink = React33.forwardRef(function HostLink2({ href, prefetch, ...rest }, ref) {
   const Registered = getTapTargetLinkComponent();
   if (Registered) {
-    return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Registered, { ref, href, ...prefetch === void 0 ? {} : { prefetch }, ...rest });
+    return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Registered, { ref, href, ...prefetch === void 0 ? {} : { prefetch }, ...rest });
   }
   announceStandIn(
     "link-host",
     "HostLink drew a plain <a>: register the app's link component once with setTapTargetLinkComponent() from @ai-matrx/design-system/tap-target."
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("a", { ref, href, "data-link-host": UNCONFIGURED, ...rest });
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("a", { ref, href, "data-link-host": UNCONFIGURED, ...rest });
 });
 
 // src/read-state/untrusted-count.tsx
-var import_jsx_runtime51 = require("react/jsx-runtime");
+var import_jsx_runtime52 = require("react/jsx-runtime");
 function countReadState(input) {
   const { read, trustworthy } = input;
   if (trustworthy === false) return "failed";
@@ -6554,7 +6643,7 @@ function unavailableCountLabel(label) {
 }
 
 // src/controls/kpi-tile.tsx
-var import_jsx_runtime52 = require("react/jsx-runtime");
+var import_jsx_runtime53 = require("react/jsx-runtime");
 var TONE_VALUE = {
   neutral: "text-foreground",
   good: "text-success-ink",
@@ -6577,7 +6666,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__ */ (0, import_jsx_runtime52.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
     "svg",
     {
       viewBox: `0 0 ${SPARK_W} ${SPARK_H}`,
@@ -6586,9 +6675,9 @@ function KpiSparkline({ trend, label }) {
       "aria-label": `${trend.label ?? label}, last ${trend.period}`,
       className: "h-5 w-16 shrink-0 text-primary",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("title", { children: `${trend.label ?? label}, last ${trend.period}` }),
-        max === min ? null : /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("polygon", { points: `0,${SPARK_H} ${pts} ${SPARK_W},${SPARK_H}`, fill: "currentColor", fillOpacity: 0.15 }),
-        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("polyline", { points: pts, fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinejoin: "round", vectorEffect: "non-scaling-stroke" })
+        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("title", { children: `${trend.label ?? label}, last ${trend.period}` }),
+        max === min ? null : /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("polygon", { points: `0,${SPARK_H} ${pts} ${SPARK_W},${SPARK_H}`, fill: "currentColor", fillOpacity: 0.15 }),
+        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("polyline", { points: pts, fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinejoin: "round", vectorEffect: "non-scaling-stroke" })
       ]
     }
   );
@@ -6610,19 +6699,19 @@ function KpiTile({
   const failed = readState === "failed";
   const shown = failed ? null : value;
   const dot = TONE_DOT[tone2];
-  const body = /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(import_jsx_runtime52.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "flex min-w-0 items-start gap-1.5 type-meta font-medium uppercase tracking-wide text-muted-foreground", children: [
-      dot ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { "aria-hidden": true, className: cn("mt-1 inline-block h-2 w-2 shrink-0 rounded-sm", dot) }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("span", { className: "line-clamp-2 break-words", children: [
+  const body = /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(import_jsx_runtime53.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "flex min-w-0 items-start gap-1.5 type-meta font-medium uppercase tracking-wide text-muted-foreground", children: [
+      dot ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { "aria-hidden": true, className: cn("mt-1 inline-block h-2 w-2 shrink-0 rounded-sm", dot) }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("span", { className: "line-clamp-2 break-words", children: [
         label,
-        title ? /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(import_jsx_runtime52.Fragment, { children: [
+        title ? /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(import_jsx_runtime53.Fragment, { children: [
           " ",
-          /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(InfoHint, { text: title, label: `What ${label} means` })
+          /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(InfoHint, { text: title, label: `What ${label} means` })
         ] }) : null
       ] })
     ] }),
-    loading ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "my-0.5 h-6 w-12 animate-pulse rounded bg-muted", "aria-hidden": true }) : /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "flex min-w-0 items-end justify-between gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+    loading ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "my-0.5 h-6 w-12 animate-pulse rounded bg-muted", "aria-hidden": true }) : /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "flex min-w-0 items-end justify-between gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
         "div",
         {
           className: cn(
@@ -6634,16 +6723,16 @@ function KpiTile({
           children: shown === null ? "\u2014" : shown
         }
       ),
-      trend && shown !== null ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(KpiSparkline, { trend, label }) : null
+      trend && shown !== null ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(KpiSparkline, { trend, label }) : null
     ] }),
-    hint ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "truncate type-meta text-muted-foreground", children: hint }) : null
+    hint ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("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__ */ (0, import_jsx_runtime52.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
       HostLink,
       {
         href,
@@ -6656,13 +6745,13 @@ function KpiTile({
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: shell, "data-look-surface": "card", "aria-busy": loading || void 0, children: body });
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: shell, "data-look-surface": "card", "aria-busy": loading || void 0, children: body });
 }
 function KpiGrid({
   children,
   className
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
     "div",
     {
       className: cn(
@@ -6676,7 +6765,7 @@ function KpiGrid({
 
 // src/controls/action-feedback-button.tsx
 var React34 = __toESM(require("react"), 1);
-var import_jsx_runtime53 = require("react/jsx-runtime");
+var import_jsx_runtime54 = require("react/jsx-runtime");
 function ActionFeedbackButton({
   icon,
   tooltip,
@@ -6702,11 +6791,11 @@ function ActionFeedbackButton({
     timer.current = setTimeout(() => setShowSuccess(false), feedbackDuration);
   };
   const text = showSuccess ? successTooltip : disabled && disabledTooltip ? disabledTooltip : tooltip;
-  const button = /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+  const button = /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
     Button2,
     {
       variant,
-      icon: showSuccess ? successIcon ?? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(CheckCircle2Icon, {}) : icon,
+      icon: showSuccess ? successIcon ?? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(CheckCircle2Icon, {}) : icon,
       ...showSuccess ? { glyphTone: "success" } : glyphTone ? { glyphTone } : {},
       ...props,
       "aria-label": text,
@@ -6714,15 +6803,15 @@ function ActionFeedbackButton({
       onClick: handleClick
     }
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(Tooltip, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(TooltipTrigger, { asChild: true, children: disabled ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "inline-flex", children: button }) : button }),
-    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(TooltipContent, { side: "bottom", sideOffset: 5, className: "z-[9999]", children: text })
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(Tooltip, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(TooltipTrigger, { asChild: true, children: disabled ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "inline-flex", children: button }) : button }),
+    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(TooltipContent, { side: "bottom", sideOffset: 5, className: "z-[9999]", children: text })
   ] });
 }
 
 // src/controls/citation-chip.tsx
 var import_react10 = require("react");
-var import_jsx_runtime54 = require("react/jsx-runtime");
+var import_jsx_runtime55 = require("react/jsx-runtime");
 function CitationPopoverBody({
   icon: Icon3,
   label,
@@ -6732,32 +6821,32 @@ function CitationPopoverBody({
   onOpen,
   openLabel = "Open source"
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "flex flex-col gap-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "flex items-start gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "flex flex-col gap-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "flex items-start gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
         Icon3,
         {
           className: "mt-0.5 h-4 w-4 shrink-0 text-muted-foreground",
           "aria-hidden": true
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "min-w-0", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("p", { className: "truncate type-title text-foreground", children: label }),
-        locator && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("p", { className: "type-secondary text-muted-foreground", children: locator })
+      /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "min-w-0", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("p", { className: "truncate type-title text-foreground", children: label }),
+        locator && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("p", { className: "type-secondary text-muted-foreground", children: locator })
       ] })
     ] }),
-    excerpt && /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("blockquote", { className: "flex gap-2 rounded-md bg-muted/60 p-2 type-secondary italic text-muted-foreground", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(QuoteIcon, { className: "h-3 w-3 shrink-0", "aria-hidden": true }),
-      /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: cn("not-italic", clampExcerpt && "line-clamp-6"), children: excerpt })
+    excerpt && /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("blockquote", { className: "flex gap-2 rounded-md bg-muted/60 p-2 type-secondary italic text-muted-foreground", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(QuoteIcon, { className: "h-3 w-3 shrink-0", "aria-hidden": true }),
+      /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { className: cn("not-italic", clampExcerpt && "line-clamp-6"), children: excerpt })
     ] }),
-    onOpen && /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
+    onOpen && /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
       "button",
       {
         type: "button",
         onClick: onOpen,
         className: "inline-flex items-center gap-1 self-start text-xs font-medium text-primary hover:underline",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(ArrowUpRightIcon, { className: "h-3 w-3", "aria-hidden": true }),
+          /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(ArrowUpRightIcon, { className: "h-3 w-3", "aria-hidden": true }),
           openLabel
         ]
       }
@@ -6777,8 +6866,8 @@ function CitationChip({
     setOpen(false);
     body.onOpen?.();
   } : void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(Popover, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
       "button",
       {
         type: "button",
@@ -6788,20 +6877,20 @@ function CitationChip({
           chipClassName
         ),
         children: [
-          number != null && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("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__ */ (0, import_jsx_runtime54.jsx)(Icon3, { className: "h-3 w-3 shrink-0 text-muted-foreground", "aria-hidden": true }),
-          /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "truncate", children: label }),
-          chipSuffix && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "shrink-0 text-muted-foreground", children: chipSuffix })
+          number != null && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("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__ */ (0, import_jsx_runtime55.jsx)(Icon3, { className: "h-3 w-3 shrink-0 text-muted-foreground", "aria-hidden": true }),
+          /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { className: "truncate", children: label }),
+          chipSuffix && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { className: "shrink-0 text-muted-foreground", children: chipSuffix })
         ]
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(PopoverContent, { sizing: "content", align: "start", className: "p-3", children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(CitationPopoverBody, { ...body, onOpen }) })
+    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(PopoverContent, { sizing: "content", align: "start", className: "p-3", children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(CitationPopoverBody, { ...body, onOpen }) })
   ] });
 }
 
 // src/controls/tool-rail.tsx
 var React35 = __toESM(require("react"), 1);
-var import_jsx_runtime55 = require("react/jsx-runtime");
+var import_jsx_runtime56 = require("react/jsx-runtime");
 function ToolRail({
   groups,
   value,
@@ -6841,7 +6930,7 @@ function ToolRail({
       focusAt(enabled[enabled.length - 1]?.id);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
     "div",
     {
       role: "toolbar",
@@ -6850,8 +6939,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__ */ (0, import_jsx_runtime55.jsxs)(React35.Fragment, { children: [
-        gi > 0 ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+      children: groups.map((group, gi) => /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(React35.Fragment, { children: [
+        gi > 0 ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
           "div",
           {
             role: "separator",
@@ -6863,8 +6952,8 @@ function ToolRail({
           const on = tool.id === value;
           const Icon3 = tool.icon;
           const name = tool.shortcut ? `${tool.label} (${tool.shortcut})` : tool.label;
-          return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(Tooltip, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(Tooltip, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
               Button2,
               {
                 ref: (el) => {
@@ -6872,7 +6961,7 @@ function ToolRail({
                   else refs.current.delete(tool.id);
                 },
                 variant: on ? "primary" : "quiet",
-                icon: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Icon3, {}),
+                icon: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Icon3, {}),
                 "aria-label": name,
                 pressed: on,
                 disabled: tool.disabled,
@@ -6883,7 +6972,7 @@ function ToolRail({
                 onClick: () => onValueChange(on && allowDeselect ? null : tool.id, tool)
               }
             ) }),
-            /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(TooltipContent, { side: vertical ? "right" : "bottom", sideOffset: 6, children: name })
+            /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(TooltipContent, { side: vertical ? "right" : "bottom", sideOffset: 6, children: name })
           ] }, tool.id);
         })
       ] }, gi))
@@ -6963,7 +7052,7 @@ function formatPageRanges(pages) {
 }
 
 // src/controls/page-range-input.tsx
-var import_jsx_runtime56 = require("react/jsx-runtime");
+var import_jsx_runtime57 = require("react/jsx-runtime");
 function PageRangeInput({
   value,
   onChange,
@@ -6980,8 +7069,8 @@ function PageRangeInput({
   const parsed = React36.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__ */ (0, import_jsx_runtime56.jsxs)("div", { className: cn("flex min-w-0 flex-col gap-1", className), "data-matrx-page-range-input": "", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: cn("flex min-w-0 flex-col gap-1", className), "data-matrx-page-range-input": "", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
       Input,
       {
         id,
@@ -7000,7 +7089,7 @@ function PageRangeInput({
         }
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
       "p",
       {
         id: hintId,
@@ -7015,7 +7104,7 @@ function PageRangeInput({
 
 // src/controls/opacity-slider.tsx
 var React37 = __toESM(require("react"), 1);
-var import_jsx_runtime57 = require("react/jsx-runtime");
+var import_jsx_runtime58 = require("react/jsx-runtime");
 var clamp = (n, lo, hi) => Math.min(hi, Math.max(lo, n));
 var toPercent = (v) => Math.round(v * 100);
 function OpacitySlider({
@@ -7035,8 +7124,8 @@ function OpacitySlider({
     }
     setDraft(null);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: cn("flex min-w-0 items-center gap-2", className), "data-matrx-opacity-slider": "", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: cn("flex min-w-0 items-center gap-2", className), "data-matrx-opacity-slider": "", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
       Slider,
       {
         className: "min-w-0 flex-1",
@@ -7049,8 +7138,8 @@ function OpacitySlider({
         onValueChange: ([v]) => onChange(clamp((v ?? 0) / 100, min, max))
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "flex w-16 shrink-0 items-center gap-1", style: { ["--matrx-control-field-min"]: "0px" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "flex w-16 shrink-0 items-center gap-1", style: { ["--matrx-control-field-min"]: "0px" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
         Input,
         {
           numeric: true,
@@ -7069,14 +7158,14 @@ function OpacitySlider({
           }
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { "aria-hidden": true, className: "text-xs text-muted-foreground", children: "%" })
+      /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { "aria-hidden": true, className: "text-xs text-muted-foreground", children: "%" })
     ] })
   ] });
 }
 
 // src/controls/color-swatch-row.tsx
 var React38 = __toESM(require("react"), 1);
-var import_jsx_runtime58 = require("react/jsx-runtime");
+var import_jsx_runtime59 = require("react/jsx-runtime");
 function ColorSwatchRow({
   colors,
   value,
@@ -7095,7 +7184,7 @@ function ColorSwatchRow({
     refs.current[i]?.focus();
     onChange(c.value, c);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
     "div",
     {
       role: "radiogroup",
@@ -7105,7 +7194,7 @@ function ColorSwatchRow({
       "data-matrx-color-swatch-row": "",
       children: colors.map((c, i) => {
         const on = i === chosen;
-        return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
           "button",
           {
             ref: (el) => {
@@ -7143,7 +7232,7 @@ function ColorSwatchRow({
               on && "ring-2 ring-foreground ring-offset-1 ring-offset-background"
             ),
             style: { backgroundColor: c.value },
-            children: on ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(RadixCheckIcon, { className: "size-3 mix-blend-difference text-white" }) : null
+            children: on ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(RadixCheckIcon, { className: "size-3 mix-blend-difference text-white" }) : null
           },
           `${c.value}-${i}`
         );
@@ -7154,7 +7243,7 @@ function ColorSwatchRow({
 
 // src/controls/anchored-toolbar.tsx
 var React39 = __toESM(require("react"), 1);
-var import_jsx_runtime59 = require("react/jsx-runtime");
+var import_jsx_runtime60 = require("react/jsx-runtime");
 function virtualFor(rect) {
   return {
     getBoundingClientRect: () => ({
@@ -7187,9 +7276,9 @@ function AnchoredToolbar({
     [x, y, w, h]
   );
   const visible = open && rect !== null;
-  return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(Popover, { open: visible, ...onOpenChange ? { onOpenChange } : {}, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(PopoverAnchor, { virtualRef }),
-    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(Popover, { open: visible, ...onOpenChange ? { onOpenChange } : {}, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(PopoverAnchor, { virtualRef }),
+    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
       PopoverContent,
       {
         role: "toolbar",
@@ -7214,7 +7303,7 @@ function AnchoredToolbar({
 // src/controls/icon-select.tsx
 var React40 = __toESM(require("react"), 1);
 var import_outbound = require("@ai-matrx/kit/outbound");
-var import_jsx_runtime60 = require("react/jsx-runtime");
+var import_jsx_runtime61 = require("react/jsx-runtime");
 function wantsNewTab(e) {
   return Boolean(e.metaKey || e.ctrlKey || e.shiftKey || e.altKey || e.button === 1);
 }
@@ -7224,7 +7313,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 = React40.forwardRef(function IconSelectTrigger2({ icon, disabled, ariaLabel, size = "default", className, ...rest }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
     Button2,
     {
       ref,
@@ -7252,13 +7341,13 @@ function IconSelect({
   const [open, setOpen] = React40.useState(false);
   const skipSelectRef = React40.useRef(false);
   if (searchable) {
-    return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(Popover, { open, onOpenChange: setOpen, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(IconSelectTrigger, { icon, disabled, ariaLabel, size, className }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(PopoverContent, { sizing: "content", className: "p-0", align: "start", children: /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(Command, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(CommandInput, { placeholder: searchPlaceholder, className: "h-9 text-sm" }),
-        /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(CommandList, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(CommandEmpty, { children: "No results found." }),
-          /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(CommandGroup, { className: "max-h-72 overflow-auto", children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(Popover, { open, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(IconSelectTrigger, { icon, disabled, ariaLabel, size, className }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(PopoverContent, { sizing: "content", className: "p-0", align: "start", children: /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(Command, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(CommandInput, { placeholder: searchPlaceholder, className: "h-9 text-sm" }),
+        /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(CommandList, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(CommandEmpty, { children: "No results found." }),
+          /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(CommandGroup, { className: "max-h-72 overflow-auto", children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
             CommandItem,
             {
               value: item.label,
@@ -7278,8 +7367,8 @@ function IconSelect({
                 onValueChange?.(item.value);
                 setOpen(false);
               },
-              children: /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: "flex items-center", children: [
-                item.icon && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("span", { className: "mr-2", children: item.icon }),
+              children: /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: "flex items-center", children: [
+                item.icon && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { className: "mr-2", children: item.icon }),
                 item.label
               ] })
             },
@@ -7289,8 +7378,8 @@ function IconSelect({
       ] }) })
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(Select, { ...value === void 0 ? {} : { value }, ...onValueChange ? { onValueChange } : {}, disabled, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(Select, { ...value === void 0 ? {} : { value }, ...onValueChange ? { onValueChange } : {}, disabled, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
       SelectTrigger,
       {
         "aria-label": ariaLabel,
@@ -7299,7 +7388,7 @@ function IconSelect({
         children: icon
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(SelectContent, { children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(SelectGroup, { children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(SelectContent, { children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(SelectGroup, { children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
       SelectItem,
       {
         value: item.value,
@@ -7309,8 +7398,8 @@ function IconSelect({
             (0, import_outbound.openOutbound)(item.href, "_blank", "noopener");
           }
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: "flex items-center", children: [
-          item.icon && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("span", { className: "mr-2", children: item.icon }),
+        children: /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: "flex items-center", children: [
+          item.icon && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { className: "mr-2", children: item.icon }),
           item.label
         ] })
       },
@@ -7328,10 +7417,10 @@ var import_notify3 = require("@ai-matrx/kit/notify");
 // src/collapsible.tsx
 var CollapsiblePrimitive = __toESM(require("@radix-ui/react-collapsible"), 1);
 var React41 = __toESM(require("react"), 1);
-var import_jsx_runtime61 = require("react/jsx-runtime");
+var import_jsx_runtime62 = require("react/jsx-runtime");
 var Collapsible = CollapsiblePrimitive.Root;
 var CollapsibleTrigger2 = CollapsiblePrimitive.CollapsibleTrigger;
-var CollapsibleContent2 = React41.forwardRef(({ className, animated = true, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+var CollapsibleContent2 = React41.forwardRef(({ className, animated = true, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
   CollapsiblePrimitive.CollapsibleContent,
   {
     ref,
@@ -7353,7 +7442,7 @@ var React43 = __toESM(require("react"), 1);
 
 // src/look.tsx
 var React42 = __toESM(require("react"), 1);
-var import_jsx_runtime62 = require("react/jsx-runtime");
+var import_jsx_runtime63 = require("react/jsx-runtime");
 var CONTEXT_SLOT3 = /* @__PURE__ */ Symbol.for("ai-matrx.design-system.look-context");
 var registry3 = globalThis;
 var LookContext = registry3[CONTEXT_SLOT3] ??= React42.createContext("web");
@@ -7609,7 +7698,7 @@ function useDragMove(options) {
 }
 
 // src/dialog.tsx
-var import_jsx_runtime63 = require("react/jsx-runtime");
+var import_jsx_runtime64 = require("react/jsx-runtime");
 var DialogWindowedByDefaultContext = React43.createContext(false);
 var Dialog = ({
   children,
@@ -7618,7 +7707,7 @@ var Dialog = ({
   const isMobile = (0, import_media_query.useIsMobile)();
   const desktopLook = useLook() === "desktop";
   const modal = desktopLook || (props.modal ?? isMobile);
-  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(DialogWindowedByDefaultContext.Provider, { value: !desktopLook && props.modal === void 0, children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(RadixDialogModalProvider, { modal, children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(DialogPrimitive3.Root, { ...props, modal, children }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(DialogWindowedByDefaultContext.Provider, { value: !desktopLook && props.modal === void 0, children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(RadixDialogModalProvider, { modal, children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(DialogPrimitive3.Root, { ...props, modal, children }) }) });
 };
 Dialog.displayName = "Dialog";
 var DialogPortal = ({
@@ -7626,13 +7715,13 @@ var DialogPortal = ({
   ...props
 }) => {
   const resolved = usePortalContainer(container);
-  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(DialogPrimitive3.Portal, { container: resolved ?? null, ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(DialogPrimitive3.Portal, { container: resolved ?? null, ...props });
 };
 DialogPortal.displayName = "DialogPortal";
 var CONTEXT_SLOT4 = /* @__PURE__ */ Symbol.for("ai-matrx.design-system.dialog-container-context");
 var contextRegistry3 = globalThis;
 var DialogContainerContext = contextRegistry3[CONTEXT_SLOT4] ??= React43.createContext(null);
-var DialogOverlay = React43.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+var DialogOverlay = React43.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
   DialogPrimitive3.Overlay,
   {
     ref,
@@ -7651,7 +7740,7 @@ DialogOverlay.displayName = DialogPrimitive3.Overlay.displayName;
 var DialogContentPrimitive = React43.forwardRef(({ onInteractOutside, onCloseAutoFocus, ...props }, ref) => {
   const isModal = useRadixDialogModal();
   useModalLayer(isModal);
-  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
     DialogPrimitive3.Content,
     {
       ...props,
@@ -7749,9 +7838,9 @@ var DialogContent = React43.forwardRef(
     const closeSlot = useCloseSlot(showCloseButton && !desktopLook);
     const hasTitle = (0, import_react_tree3.treeContainsComponent)(children, DialogTitle) || (0, import_react_tree3.treeContainsComponent)(children, DialogPrimitive3.Title);
     const hasDescription = (0, import_react_tree3.treeContainsComponent)(children, DialogDescription) || (0, import_react_tree3.treeContainsComponent)(children, DialogPrimitive3.Description);
-    return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(DialogPortal, { container, children: [
-      isModal ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(DialogOverlay, {}) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(DialogPortal, { container, children: [
+      isModal ? /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(DialogOverlay, {}) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(
         DialogContentPrimitive,
         {
           ref: mergedRef,
@@ -7802,9 +7891,9 @@ var DialogContent = React43.forwardRef(
           ...hasDescription ? {} : { "aria-describedby": void 0 },
           ...props,
           children: [
-            hasTitle ? null : /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(VisuallyHidden2.Root, { children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(DialogPrimitive3.Title, { children: "Dialog" }) }),
-            closeSlot.slot && !closeSlot.claimed ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(CloseRow, {}) : null,
-            /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(CloseSlotProvider, { value: closeSlot.slot, children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(DialogContainerContext.Provider, { value: containerEl, children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(DialogWindowHandleContext.Provider, { value: handle, children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+            hasTitle ? null : /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(VisuallyHidden2.Root, { children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(DialogPrimitive3.Title, { children: "Dialog" }) }),
+            closeSlot.slot && !closeSlot.claimed ? /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(CloseRow, {}) : null,
+            /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(CloseSlotProvider, { value: closeSlot.slot, children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(DialogContainerContext.Provider, { value: containerEl, children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(DialogWindowHandleContext.Provider, { value: handle, children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
               PortalContainerProvider,
               {
                 container: containerEl ?? injectedContainer ?? null,
@@ -7823,7 +7912,7 @@ var DialogHeader = ({
   ...props
 }) => {
   const handle = React43.useContext(DialogWindowHandleContext);
-  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
     HeaderWithClose,
     {
       slotName: "dialog-header",
@@ -7843,7 +7932,7 @@ DialogHeader.displayName = "DialogHeader";
 var DialogFooter = ({
   className,
   ...props
-}) => /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
   "div",
   {
     "data-slot": "dialog-footer",
@@ -7877,7 +7966,7 @@ var DialogFooter = ({
   }
 );
 DialogFooter.displayName = "DialogFooter";
-var DialogTitle = React43.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+var DialogTitle = React43.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
   DialogPrimitive3.Title,
   {
     ref,
@@ -7887,7 +7976,7 @@ var DialogTitle = React43.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 DialogTitle.displayName = DialogPrimitive3.Title.displayName;
-var DialogDescription = React43.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+var DialogDescription = React43.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
   DialogPrimitive3.Description,
   {
     ref,
@@ -7899,7 +7988,7 @@ var DialogDescription = React43.forwardRef(({ className, ...props }, ref) => /*
 DialogDescription.displayName = DialogPrimitive3.Description.displayName;
 
 // src/icon-button.tsx
-var import_jsx_runtime64 = require("react/jsx-runtime");
+var import_jsx_runtime65 = require("react/jsx-runtime");
 var VARIANT = {
   ghost: "quiet",
   outline: "outline",
@@ -7920,25 +8009,25 @@ function IconButton({
   "aria-label": ariaLabel,
   ...props
 }) {
-  const control = /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+  const control = /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
     Button2,
     {
       variant: VARIANT[variant],
-      icon: spinning ? /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(Icon3, { className: MOTION_SPIN }) : /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(Icon3, {}),
+      icon: spinning ? /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(Icon3, { className: MOTION_SPIN }) : /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(Icon3, {}),
       ...glyphTone ? { glyphTone } : {},
       "aria-label": ariaLabel ?? tooltip ?? "Action",
       ...props
     }
   );
   if (!tooltip) return control;
-  return /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(Tooltip, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(TooltipTrigger, { asChild: true, children: control }),
-    /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(TooltipContent, { side: tooltipSide2, align: tooltipAlign, className: "z-[9999]", sideOffset: tooltipOffset, children: tooltip })
+  return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(Tooltip, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(TooltipTrigger, { asChild: true, children: control }),
+    /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(TooltipContent, { side: tooltipSide2, align: tooltipAlign, className: "z-[9999]", sideOffset: tooltipOffset, children: tooltip })
   ] });
 }
 
 // src/controls/advanced-collapsible.tsx
-var import_jsx_runtime65 = require("react/jsx-runtime");
+var import_jsx_runtime66 = require("react/jsx-runtime");
 function AdvancedCollapsible({
   icon,
   title,
@@ -7978,29 +8067,29 @@ function AdvancedCollapsible({
     if (!landed) void (0, import_clipboard_fallback_opener3.openClipboardFallback)(text);
     else onCopy?.();
   };
-  const actions = /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "flex items-center justify-end gap-2", children: [
-    onSave && /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+  const actions = /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "flex items-center justify-end gap-2", children: [
+    onSave && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
       ActionFeedbackButton,
       {
-        icon: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(SaveIcon, {}),
+        icon: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(SaveIcon, {}),
         glyphTone: "info",
         tooltip: saveTooltip,
         successTooltip: "Saved!",
         onClick: onSave
       }
     ),
-    onReset && /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+    onReset && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
       ActionFeedbackButton,
       {
-        icon: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(RefreshCwIcon, {}),
+        icon: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(RefreshCwIcon, {}),
         glyphTone: "warning",
         tooltip: resetTooltip,
         successTooltip: "Reset!",
         onClick: onReset
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(IconButton, { icon: CopyIcon, tooltip: copyTooltip, onClick: () => void handleCopy() }),
-    /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(IconButton, { icon: CopyIcon, tooltip: copyTooltip, onClick: () => void handleCopy() }),
+    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
       IconButton,
       {
         icon: isFullScreen ? Minimize2Icon : Maximize2Icon,
@@ -8011,20 +8100,20 @@ function AdvancedCollapsible({
     )
   ] });
   const heading = typeof title === "string" ? title : "Content";
-  return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(import_jsx_runtime65.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(import_jsx_runtime66.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(
       Collapsible,
       {
         open: isOpen,
         onOpenChange: handleOpenChange,
         className: cn("w-full rounded-xl border border-border shadow-sm", className),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(CollapsibleTrigger2, { className: "relative flex w-full items-center justify-between rounded-t-xl px-4 py-3 font-medium hover:bg-muted", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(CollapsibleTrigger2, { className: "relative flex w-full items-center justify-between rounded-t-xl px-4 py-3 font-medium hover:bg-muted", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "flex items-center gap-2", children: [
               icon,
-              typeof title === "string" ? /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("span", { children: title }) : title
+              typeof title === "string" ? /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("span", { children: title }) : title
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
               ChevronDownIcon,
               {
                 className: cn(
@@ -8034,27 +8123,27 @@ function AdvancedCollapsible({
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(CollapsibleContent2, { children: /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "relative", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: "absolute left-8 right-8 top-0 h-px bg-border" }),
-            /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { ref: contentRef, className: "p-4", children }),
-            /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: "mb-1 mr-1 mt-2", children: actions })
+          /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(CollapsibleContent2, { children: /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "relative", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: "absolute left-8 right-8 top-0 h-px bg-border" }),
+            /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { ref: contentRef, className: "p-4", children }),
+            /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: "mb-1 mr-1 mt-2", children: actions })
           ] }) })
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(Dialog, { open: isFullScreen, onOpenChange: setIsFullScreen, children: /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(DialogContent, { size: "full", height: "tall", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(DialogHeader, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(DialogTitle, { children: fullScreenTitle || heading }),
-        fullScreenDescription ? /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(DialogDescription, { children: fullScreenDescription }) : null
+    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Dialog, { open: isFullScreen, onOpenChange: setIsFullScreen, children: /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(DialogContent, { size: "full", height: "tall", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(DialogHeader, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(DialogTitle, { children: fullScreenTitle || heading }),
+        fullScreenDescription ? /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(DialogDescription, { children: fullScreenDescription }) : null
       ] }),
       actions,
-      /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { ref: fullRef, className: "min-h-0 flex-1 overflow-auto p-4", children })
+      /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { ref: fullRef, className: "min-h-0 flex-1 overflow-auto p-4", children })
     ] }) })
   ] });
 }
 
 // src/controls/empty-state-card.tsx
-var import_jsx_runtime66 = require("react/jsx-runtime");
+var import_jsx_runtime67 = require("react/jsx-runtime");
 var TONE3 = {
   primary: { data: "primary", button: "primary" },
   success: { data: "success", button: "outline" }
@@ -8069,12 +8158,12 @@ function EmptyStateCard({
   tone: tone2 = "primary"
 }) {
   const t = TONE3[tone2];
-  return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { "data-tone": t.data, className: "matrx-hue-card flex flex-col items-center justify-center px-6 py-12 text-center", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: "matrx-hue-icon mb-6 rounded-full p-6", children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Icon3, { className: "h-12 w-12", strokeWidth: 1.5 }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("h3", { className: cn("mb-3 text-xl font-semibold", tone2 === "success" ? "text-success-ink" : "text-foreground"), children: title }),
-    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("p", { className: "mb-8 max-w-md text-muted-foreground", children: description }),
-    buttonText && /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "flex flex-col gap-4 sm:flex-row", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Button2, { variant: t.button, ...tone2 === "success" ? { tone: "success" } : {}, ...onButtonClick ? { onClick: onButtonClick } : {}, children: buttonText }),
+  return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { "data-tone": t.data, className: "matrx-hue-card flex flex-col items-center justify-center px-6 py-12 text-center", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: "matrx-hue-icon mb-6 rounded-full p-6", children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Icon3, { className: "h-12 w-12", strokeWidth: 1.5 }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("h3", { className: cn("mb-3 text-xl font-semibold", tone2 === "success" ? "text-success-ink" : "text-foreground"), children: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("p", { className: "mb-8 max-w-md text-muted-foreground", children: description }),
+    buttonText && /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "flex flex-col gap-4 sm:flex-row", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Button2, { variant: t.button, ...tone2 === "success" ? { tone: "success" } : {}, ...onButtonClick ? { onClick: onButtonClick } : {}, children: buttonText }),
       secondaryButton
     ] })
   ] });
@@ -8082,7 +8171,7 @@ function EmptyStateCard({
 
 // src/controls/hue-cards.tsx
 var React45 = __toESM(require("react"), 1);
-var import_jsx_runtime67 = require("react/jsx-runtime");
+var import_jsx_runtime68 = require("react/jsx-runtime");
 var HUE_TONE = {
   indigo: "indigo",
   emerald: "emerald",
@@ -8116,7 +8205,7 @@ function Destination({
   children
 }) {
   if (path) {
-    return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
       HostLink,
       {
         href: path,
@@ -8127,7 +8216,7 @@ function Destination({
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { ...className ? { className } : {}, ...onClick ? { onClick } : {}, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { ...className ? { className } : {}, ...onClick ? { onClick } : {}, children });
 }
 var SIZE_PADDING = {
   xs: "p-3",
@@ -8150,19 +8239,19 @@ function HueCard({
   external = false
 }) {
   if (compact) {
-    return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Destination, { path, onClick, external, children: /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(Destination, { path, onClick, external, children: /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(
       "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__ */ (0, import_jsx_runtime67.jsx)("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__ */ (0, import_jsx_runtime67.jsx)("span", { className: "type-meta w-full truncate px-0.5 text-center font-medium leading-tight text-foreground", children: title })
+          /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("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__ */ (0, import_jsx_runtime68.jsx)("span", { className: "type-meta w-full truncate px-0.5 text-center font-medium leading-tight text-foreground", children: title })
         ]
       }
     ) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Destination, { path, onClick, external, children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(Destination, { path, onClick, external, children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
     "div",
     {
       "data-tone": tone(color),
@@ -8171,10 +8260,10 @@ function HueCard({
         SIZE_PADDING[size],
         className
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "flex flex-col items-center space-y-3 text-center", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: "matrx-hue-icon rounded-full p-3", children: sizedIcon(icon, 28) }),
-        /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("h3", { className: "text-lg font-semibold", children: title }),
-        description && /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("p", { className: "type-body text-muted-foreground", children: description }),
+      children: /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: "flex flex-col items-center space-y-3 text-center", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "matrx-hue-icon rounded-full p-3", children: sizedIcon(icon, 28) }),
+        /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("h3", { className: "text-lg font-semibold", children: title }),
+        description && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("p", { className: "type-body text-muted-foreground", children: description }),
         descriptionNode && !description && descriptionNode
       ] })
     }
@@ -8201,12 +8290,12 @@ function HueGrid({
   compact = false
 }) {
   const colsClass = compact ? "grid-cols-4" : GRID_COLUMNS[Math.min(6, Math.max(1, columns))];
-  return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className, children: [
-    title && /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("h2", { className: "mb-4 text-base font-semibold", children: title }),
-    description && /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("p", { className: "type-body mb-4 text-muted-foreground", children: description }),
-    /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: cn("grid", compact ? "gap-2" : "gap-4", colsClass), children: [
-      items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(HueCard, { ...item, compact, className: cn(cardClassName, item.className) }, `card-${index}`)),
-      showAddButton && /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className, children: [
+    title && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("h2", { className: "mb-4 text-base font-semibold", children: title }),
+    description && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("p", { className: "type-body mb-4 text-muted-foreground", children: description }),
+    /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: cn("grid", compact ? "gap-2" : "gap-4", colsClass), children: [
+      items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(HueCard, { ...item, compact, className: cn(cardClassName, item.className) }, `card-${index}`)),
+      showAddButton && /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(
         "button",
         {
           type: "button",
@@ -8216,8 +8305,8 @@ function HueGrid({
             cardClassName
           ),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { className: "rounded-full bg-muted p-3 text-muted-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(PlusIcon, { className: "h-7 w-7" }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { className: "text-lg font-semibold", children: addButtonText })
+            /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("span", { className: "rounded-full bg-muted p-3 text-muted-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(PlusIcon, { className: "h-7 w-7" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("span", { className: "text-lg font-semibold", children: addButtonText })
           ]
         }
       )
@@ -8232,12 +8321,12 @@ function HueRow({
   color,
   path,
   className,
-  rightIcon = /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(ChevronRightIcon, { className: "h-5 w-5 text-muted-foreground" }),
+  rightIcon = /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(ChevronRightIcon, { className: "h-5 w-5 text-muted-foreground" }),
   onClick,
   showBorder = true,
   isLast = false
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Destination, { path, onClick, children: /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(Destination, { path, onClick, children: /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(
     "div",
     {
       "data-tone": tone(color),
@@ -8247,11 +8336,11 @@ function HueRow({
         className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "flex items-center", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: "matrx-hue-icon mr-4 rounded-lg p-2", children: sizedIcon(icon, 20) }),
-          /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("h3", { className: "font-medium", children: title }),
-            description && /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("p", { className: "type-body text-muted-foreground", children: description }),
+        /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: "flex items-center", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "matrx-hue-icon mr-4 rounded-lg p-2", children: sizedIcon(icon, 20) }),
+          /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("h3", { className: "font-medium", children: title }),
+            description && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("p", { className: "type-body text-muted-foreground", children: description }),
             descriptionNode && !description && descriptionNode
           ] })
         ] }),
@@ -8269,7 +8358,7 @@ function HueList({
   showBorders = true,
   showContainer = true
 }) {
-  const rows = items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+  const rows = items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
     HueRow,
     {
       ...item,
@@ -8279,14 +8368,14 @@ function HueList({
     },
     `row-${index}`
   ));
-  return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className, children: [
-    title && /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("h2", { className: "mb-4 text-base font-semibold", children: title }),
-    description && /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("p", { className: "type-body mb-4 text-muted-foreground", children: description }),
-    showContainer ? /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: "rounded-xl bg-card shadow-md", children: rows }) : rows
+  return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className, children: [
+    title && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("h2", { className: "mb-4 text-base font-semibold", children: title }),
+    description && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("p", { className: "type-body mb-4 text-muted-foreground", children: description }),
+    showContainer ? /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "rounded-xl bg-card shadow-md", children: rows }) : rows
   ] });
 }
 function IosWidget({ title, description, icon, color, path, badge, className, onClick }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Destination, { path, onClick, className: "contents", children: /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(Destination, { path, onClick, className: "contents", children: /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(
     "div",
     {
       "data-tone": tone(color),
@@ -8295,13 +8384,13 @@ function IosWidget({ title, description, icon, color, path, badge, className, on
         className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "flex items-start justify-between", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { children: sizedIcon(icon, 32) }),
-          badge && /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { className: "type-meta rounded-full bg-black/25 px-2 py-0.5 font-semibold leading-tight", children: badge })
+        /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: "flex items-start justify-between", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { children: sizedIcon(icon, 32) }),
+          badge && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("span", { className: "type-meta rounded-full bg-black/25 px-2 py-0.5 font-semibold leading-tight", children: badge })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("p", { className: "type-title line-clamp-2 leading-tight", children: title }),
-          description && /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("p", { className: "type-meta mt-0.5 line-clamp-2 leading-tight", children: description })
+        /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("p", { className: "type-title line-clamp-2 leading-tight", children: title }),
+          description && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("p", { className: "type-meta mt-0.5 line-clamp-2 leading-tight", children: description })
         ] })
       ]
     }
@@ -8312,21 +8401,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__ */ (0, import_jsx_runtime67.jsxs)(import_jsx_runtime67.Fragment, { children: [
-    icon && /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: "h-12 w-12 text-primary-ink", children: icon }),
-    title && /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { className: "font-medium text-primary-ink", children: title }),
-    description && /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("p", { className: "type-secondary mt-1 text-center text-muted-foreground", children: description })
+  const content = /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(import_jsx_runtime68.Fragment, { children: [
+    icon && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "h-12 w-12 text-primary-ink", children: icon }),
+    title && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("span", { className: "font-medium text-primary-ink", children: title }),
+    description && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("p", { className: "type-secondary mt-1 text-center text-muted-foreground", children: description })
   ] });
-  return href ? /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(HostLink, { href, className: face, children: content }) : /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { onClick, className: face, children: content });
+  return href ? /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(HostLink, { href, className: face, children: content }) : /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("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__ */ (0, import_jsx_runtime67.jsxs)("div", { className: cn("w-full", className), children: [
-    (title || description) && /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "pb-8 text-center", children: [
-      title && /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("h2", { className: "text-2xl font-bold text-foreground md:text-3xl", children: title }),
-      description && /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("p", { className: "mt-2 text-muted-foreground", children: description })
+  return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: cn("w-full", className), children: [
+    (title || description) && /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: "pb-8 text-center", children: [
+      title && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("h2", { className: "text-2xl font-bold text-foreground md:text-3xl", children: title }),
+      description && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("p", { className: "mt-2 text-muted-foreground", children: description })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: cn("grid grid-cols-1 gap-6", TILE_COLUMNS[columns] ?? TILE_COLUMNS[2]), children: cards.map((card, index) => /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(TileCard, { ...card }, index)) })
+    /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: cn("grid grid-cols-1 gap-6", TILE_COLUMNS[columns] ?? TILE_COLUMNS[2]), children: cards.map((card, index) => /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(TileCard, { ...card }, index)) })
   ] });
 }
 //# sourceMappingURL=controls.cjs.map