@ai-matrx/design-system 0.86.339 → 0.86.340

package/dist/controls.cjs

@@ -119,6 +119,9 @@ __export(controls_exports, {
   TileCardGrid: () => TileCardGrid,
   TimeField: () => TimeField,
   ToolRail: () => ToolRail,
+  WindowChromeButton: () => WindowChromeButton,
+  WindowLight: () => WindowLight,
+  WindowLights: () => WindowLights,
   clampDraft: () => clampDraft,
   cleanUrl: () => cleanUrl,
   firstBlockingReason: () => firstBlockingReason,
@@ -1681,9 +1684,64 @@ var Textarea2 = React10.forwardRef(
 );
 Textarea2.displayName = "Textarea";
 
-// src/controls/decision-control.tsx
+// src/controls/window-controls.tsx
 var React11 = __toESM(require("react"), 1);
 var import_jsx_runtime10 = require("react/jsx-runtime");
+var WindowLights = React11.forwardRef(
+  ({ className, inactive, touch, role = "group", "aria-label": ariaLabel = "Window controls", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    "div",
+    {
+      ref,
+      role,
+      "aria-label": ariaLabel,
+      "data-matrx-window-lights": "",
+      "data-inactive": inactive ? "" : void 0,
+      "data-touch": touch ? "" : void 0,
+      className: cn("matrx-window-lights", className),
+      ...props
+    }
+  )
+);
+WindowLights.displayName = "WindowLights";
+function lightGlyph(kind, restores) {
+  if (kind === "close") return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(XIcon, { "aria-hidden": "true" });
+  if (kind === "minimize") return restores ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Maximize2Icon, { "aria-hidden": "true" }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(MinusIcon, { "aria-hidden": "true" });
+  return restores ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Minimize2Icon, { "aria-hidden": "true" }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Maximize2Icon, { "aria-hidden": "true" });
+}
+var WindowLight = React11.forwardRef(
+  ({ className, kind, restores = false, type, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    "button",
+    {
+      ref,
+      type: type ?? "button",
+      "data-matrx-window-light": kind,
+      "data-restores": restores ? "" : void 0,
+      className: cn("matrx-window-light", className),
+      ...props,
+      children: lightGlyph(kind, restores)
+    }
+  )
+);
+WindowLight.displayName = "WindowLight";
+var WindowChromeButton = React11.forwardRef(
+  ({ className, icon, type, title, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    "button",
+    {
+      ref,
+      type: type ?? "button",
+      "data-matrx-window-chrome-button": "",
+      className: cn("matrx-window-chrome-button", className),
+      title: title ?? props["aria-label"],
+      ...props,
+      children: icon
+    }
+  )
+);
+WindowChromeButton.displayName = "WindowChromeButton";
+
+// src/controls/decision-control.tsx
+var React12 = __toESM(require("react"), 1);
+var import_jsx_runtime11 = require("react/jsx-runtime");
 function find(items, value) {
   if (!items || !value) return null;
   for (const i of items) {
@@ -1694,21 +1752,21 @@ function find(items, value) {
   return null;
 }
 function WayOutEntries({ items, chosen, onPick }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_jsx_runtime10.Fragment, { children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(React11.Fragment, { children: [
-    item.group ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
-      index > 0 ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(DropdownMenuSeparator, {}) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(DropdownMenuLabel, { "data-way-out-group": "", children: item.group })
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_jsx_runtime11.Fragment, { children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(React12.Fragment, { children: [
+    item.group ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
+      index > 0 ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DropdownMenuSeparator, {}) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DropdownMenuLabel, { "data-way-out-group": "", children: item.group })
     ] }) : null,
-    item.items?.length ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(DropdownMenuSub, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(DropdownMenuSubTrigger, { "data-way-out": item.value, className: "text-foreground", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "flex-1", children: item.label }),
-        find(item.items, chosen) ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(RadixCheckIcon, { className: "mr-1 size-3.5", "aria-hidden": "true" }) : null
+    item.items?.length ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(DropdownMenuSub, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(DropdownMenuSubTrigger, { "data-way-out": item.value, className: "text-foreground", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "flex-1", children: item.label }),
+        find(item.items, chosen) ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(RadixCheckIcon, { className: "mr-1 size-3.5", "aria-hidden": "true" }) : null
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(DropdownMenuSubContent, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(WayOutEntries, { items: item.items, chosen, onPick }) })
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(DropdownMenuItem, { "data-way-out": item.value, className: "text-foreground", onSelect: () => onPick(item.value), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "flex-1", children: item.label }),
-      item.meta ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-[11px] text-muted-foreground", children: item.meta }) : null,
-      chosen === item.value ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(RadixCheckIcon, { className: "size-3.5", "aria-hidden": "true" }) : null
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DropdownMenuSubContent, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(WayOutEntries, { items: item.items, chosen, onPick }) })
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(DropdownMenuItem, { "data-way-out": item.value, className: "text-foreground", onSelect: () => onPick(item.value), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "flex-1", children: item.label }),
+      item.meta ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "text-[11px] text-muted-foreground", children: item.meta }) : null,
+      chosen === item.value ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(RadixCheckIcon, { className: "size-3.5", "aria-hidden": "true" }) : null
     ] })
   ] }, item.value)) });
 }
@@ -1736,8 +1794,8 @@ function DecisionControl({
   className,
   "aria-label": ariaLabel
 }) {
-  const [otherOpen, setOtherOpen] = React11.useState(false);
-  const [chipOpen, setChipOpen] = React11.useState(false);
+  const [otherOpen, setOtherOpen] = React12.useState(false);
+  const [chipOpen, setChipOpen] = React12.useState(false);
   const otherOn = value === "other" || otherOpen;
   const word = (a) => labels?.[a] ?? (a === "yes" ? "Yes" : a === "no" ? "No" : "Other");
   const yesMode = value === "yes" && Boolean(yesKinds?.length);
@@ -1745,18 +1803,18 @@ function DecisionControl({
   const chosen = yesMode ? find(yesKinds, yesKind) : otherMode ? find(wayOut, wayOutValue) : null;
   const chipLabel = yesMode ? chosen?.label ?? pickerPlaceholder : otherMode ? chosen?.label ?? (skipped ? skippedLabel : null) : null;
   const primary = yesMode && yesKinds?.[0]?.value === yesKind;
-  const wayOutMenu = /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
-    wayOut?.length ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(WayOutEntries, { items: wayOut, chosen: wayOutValue, onPick: (v) => onWayOut?.(v) }),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(DropdownMenuSeparator, {})
+  const wayOutMenu = /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
+    wayOut?.length ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(WayOutEntries, { items: wayOut, chosen: wayOutValue, onPick: (v) => onWayOut?.(v) }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DropdownMenuSeparator, {})
     ] }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(DropdownMenuItem, { "data-way-out": "skip", className: "text-foreground", onSelect: onSkip, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "flex-1", children: skipLabel }),
-      skipped ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(RadixCheckIcon, { className: "size-3.5", "aria-hidden": "true" }) : null
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(DropdownMenuItem, { "data-way-out": "skip", className: "text-foreground", onSelect: onSkip, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "flex-1", children: skipLabel }),
+      skipped ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(RadixCheckIcon, { className: "size-3.5", "aria-hidden": "true" }) : null
     ] })
   ] });
   const stage = size === "stage";
-  const button = (a) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { "data-decision-slot": a, "data-suggested": suggested === a ? "" : void 0, className: cn("inline-flex max-sm:flex-1", suggested === a && ring), children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  const button = (a) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { "data-decision-slot": a, "data-suggested": suggested === a ? "" : void 0, className: cn("inline-flex max-sm:flex-1", suggested === a && ring), children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
     Button2,
     {
       variant: value === a ? a === "no" ? "danger" : "primary" : "outline",
@@ -1770,7 +1828,7 @@ function DecisionControl({
       children: word(a)
     }
   ) });
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
     "div",
     {
       role: "group",
@@ -1782,7 +1840,7 @@ function DecisionControl({
       children: [
         button("yes"),
         button("no"),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
           DropdownMenu,
           {
             open: otherOpen,
@@ -1794,7 +1852,7 @@ function DecisionControl({
               setOtherOpen(next);
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { "data-decision-slot": "other", "data-suggested": suggested === "other" ? "" : void 0, className: cn("inline-flex max-sm:flex-1", suggested === "other" && ring), children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(DropdownMenuTrigger, { asChild: true, disabled, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { "data-decision-slot": "other", "data-suggested": suggested === "other" ? "" : void 0, className: cn("inline-flex max-sm:flex-1", suggested === "other" && ring), children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DropdownMenuTrigger, { asChild: true, disabled, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                 Button2,
                 {
                   variant: otherOn ? "primary" : "outline",
@@ -1807,12 +1865,12 @@ function DecisionControl({
                   children: word("other")
                 }
               ) }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(DropdownMenuContent, { align: "start", className: "min-w-48", children: wayOutMenu })
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DropdownMenuContent, { align: "start", className: "min-w-48", children: wayOutMenu })
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: cn("flex min-w-0 items-center sm:w-40", chipLabel === null && "max-sm:hidden", "max-sm:w-full"), "data-decision-picker-slot": "", children: chipLabel === null ? null : /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(DropdownMenu, { open: chipOpen, onOpenChange: setChipOpen, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(DropdownMenuTrigger, { asChild: true, disabled, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: cn("flex min-w-0 items-center sm:w-40", chipLabel === null && "max-sm:hidden", "max-sm:w-full"), "data-decision-picker-slot": "", children: chipLabel === null ? null : /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(DropdownMenu, { open: chipOpen, onOpenChange: setChipOpen, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DropdownMenuTrigger, { asChild: true, disabled, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
             Chip,
             {
               asChild: true,
@@ -1821,10 +1879,10 @@ function DecisionControl({
               "data-decision-picker": "",
               "data-picker-primary": primary ? "" : void 0,
               "aria-label": `${yesMode ? word("yes") : word("other")}: ${chipLabel}`,
-              children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { type: "button", disabled })
+              children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("button", { type: "button", disabled })
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(DropdownMenuContent, { align: "start", className: "min-w-48", children: yesMode ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(WayOutEntries, { items: yesKinds ?? [], chosen: yesKind, onPick: (v) => onYesKind?.(v) }) : wayOutMenu })
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DropdownMenuContent, { align: "start", className: "min-w-48", children: yesMode ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(WayOutEntries, { items: yesKinds ?? [], chosen: yesKind, onPick: (v) => onYesKind?.(v) }) : wayOutMenu })
         ] }) })
       ]
     }
@@ -1833,7 +1891,7 @@ function DecisionControl({
 
 // src/controls/date-field.tsx
 var import_dates2 = require("@ai-matrx/kit/dates");
-var React16 = __toESM(require("react"), 1);
+var React17 = __toESM(require("react"), 1);
 
 // src/bottom-sheet.tsx
 var import_react_visually_hidden = require("@radix-ui/react-visually-hidden");
@@ -1841,13 +1899,13 @@ var import_vaul2 = require("vaul");
 
 // src/drawer.tsx
 var import_react_tree = require("@ai-matrx/kit/react-tree");
-var React14 = __toESM(require("react"), 1);
+var React15 = __toESM(require("react"), 1);
 var import_vaul = require("vaul");
 
 // src/floating-layer.tsx
 var import_react_focus_scope = require("@radix-ui/react-focus-scope");
 var import_react_slot3 = require("@radix-ui/react-slot");
-var React12 = __toESM(require("react"), 1);
+var React13 = __toESM(require("react"), 1);
 
 // src/title-tooltips.ts
 function tooltipSide(el, fallback) {
@@ -2233,7 +2291,7 @@ function install(doc) {
 }
 
 // src/floating-layer.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var FLOATING_LAYER_ATTR = "data-matrx-floating-layer";
 var REGISTRY_SLOT = /* @__PURE__ */ Symbol.for("ai-matrx.design-system.modal-layer-registry");
 var registryHost = globalThis;
@@ -2272,7 +2330,7 @@ function isModalLayerOpen() {
   return registry.count > 0;
 }
 function useModalLayer(active) {
-  React12.useLayoutEffect(() => active ? registerModalLayer() : void 0, [active]);
+  React13.useLayoutEffect(() => active ? registerModalLayer() : void 0, [active]);
 }
 var POPPER_WRAPPER = "[data-radix-popper-content-wrapper]";
 function isInsideFloatingLayer(target) {
@@ -2287,8 +2345,8 @@ function keepFloatingLayersInside(handler) {
   };
 }
 var preventAutoFocus = (event) => event.preventDefault();
-var FloatingLayer = React12.forwardRef(({ children }, ref) => {
-  const [opener] = React12.useState(
+var FloatingLayer = React13.forwardRef(({ children }, ref) => {
+  const [opener] = React13.useState(
     () => typeof document === "undefined" ? null : document.activeElement
   );
   const returnFocus = (event) => {
@@ -2299,7 +2357,7 @@ var FloatingLayer = React12.forwardRef(({ children }, ref) => {
       opener.focus({ preventScroll: true });
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
     import_react_focus_scope.FocusScope,
     {
       asChild: true,
@@ -2307,7 +2365,7 @@ var FloatingLayer = React12.forwardRef(({ children }, ref) => {
       loop: false,
       onMountAutoFocus: preventAutoFocus,
       onUnmountAutoFocus: returnFocus,
-      children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
         import_react_slot3.Slot,
         {
           ref,
@@ -2322,25 +2380,25 @@ var FloatingLayer = React12.forwardRef(({ children }, ref) => {
 FloatingLayer.displayName = "FloatingLayer";
 
 // src/radix-dialog-modal-context.tsx
-var React13 = __toESM(require("react"), 1);
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var React14 = __toESM(require("react"), 1);
+var import_jsx_runtime13 = require("react/jsx-runtime");
 var CONTEXT_SLOT2 = /* @__PURE__ */ Symbol.for("ai-matrx.design-system.dialog-modal-context");
 var contextRegistry2 = globalThis;
-var RadixDialogModalContext = contextRegistry2[CONTEXT_SLOT2] ??= React13.createContext(true);
+var RadixDialogModalContext = contextRegistry2[CONTEXT_SLOT2] ??= React14.createContext(true);
 function RadixDialogModalProvider({
   children,
   modal
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(RadixDialogModalContext.Provider, { value: modal, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(RadixDialogModalContext.Provider, { value: modal, children });
 }
 function useRadixDialogModal() {
-  return React13.useContext(RadixDialogModalContext);
+  return React14.useContext(RadixDialogModalContext);
 }
 
 // src/drawer.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
-var DrawerDirectionContext = React14.createContext("bottom");
-var useDrawerDirection = () => React14.useContext(DrawerDirectionContext);
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var DrawerDirectionContext = React15.createContext("bottom");
+var useDrawerDirection = () => React15.useContext(DrawerDirectionContext);
 var Drawer = ({
   children,
   shouldScaleBackground = true,
@@ -2354,7 +2412,7 @@ var Drawer = ({
     }
     onOpenChange?.(open);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(RadixDialogModalProvider, { modal: true, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DrawerDirectionContext.Provider, { value: direction, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(RadixDialogModalProvider, { modal: true, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DrawerDirectionContext.Provider, { value: direction, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     import_vaul.Drawer.Root,
     {
       modal: true,
@@ -2370,7 +2428,7 @@ Drawer.displayName = "Drawer";
 var DrawerTrigger = import_vaul.Drawer.Trigger;
 var DrawerPortal = import_vaul.Drawer.Portal;
 var DrawerClose = import_vaul.Drawer.Close;
-var DrawerOverlay = React14.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+var DrawerOverlay = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
   import_vaul.Drawer.Overlay,
   {
     ref,
@@ -2383,7 +2441,7 @@ var DrawerOverlay = React14.forwardRef(({ className, ...props }, ref) => /* @__P
   }
 ));
 DrawerOverlay.displayName = import_vaul.Drawer.Overlay.displayName;
-var DrawerDescription = React14.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+var DrawerDescription = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
   import_vaul.Drawer.Description,
   {
     ref,
@@ -2393,9 +2451,9 @@ var DrawerDescription = React14.forwardRef(({ className, ...props }, ref) => /*
   }
 ));
 DrawerDescription.displayName = import_vaul.Drawer.Description.displayName;
-var DrawerContentPrimitive = React14.forwardRef(({ onInteractOutside, ...props }, ref) => {
+var DrawerContentPrimitive = React15.forwardRef(({ onInteractOutside, ...props }, ref) => {
   useModalLayer(true);
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     import_vaul.Drawer.Content,
     {
       "data-matrx-entrance": "none",
@@ -2419,13 +2477,13 @@ var SIZE_CLASSES = {
   left: { adaptive: "w-auto max-w-[92vw]", full: "h-dvh w-[92vw] max-w-sm" },
   right: { adaptive: "w-auto max-w-[92vw]", full: "h-dvh w-[92vw] max-w-sm" }
 };
-var DrawerContent = React14.forwardRef(({ className, children, size = "adaptive", showHandle, ...props }, ref) => {
+var DrawerContent = React15.forwardRef(({ className, children, size = "adaptive", showHandle, ...props }, ref) => {
   const direction = useDrawerDirection();
   const hasDescription = (0, import_react_tree.treeContainsComponent)(children, DrawerDescription) || (0, import_react_tree.treeContainsComponent)(children, import_vaul.Drawer.Description);
   const withHandle = showHandle ?? (direction === "bottom" || direction === "top");
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(DrawerPortal, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DrawerOverlay, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(DrawerPortal, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DrawerOverlay, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
       DrawerContentPrimitive,
       {
         ref,
@@ -2442,7 +2500,7 @@ var DrawerContent = React14.forwardRef(({ className, children, size = "adaptive"
         children: [
           withHandle ? (
             // Rule 3: the pill is 4px; the TARGET is 44px.
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
               "div",
               {
                 "aria-hidden": true,
@@ -2451,7 +2509,7 @@ var DrawerContent = React14.forwardRef(({ className, children, size = "adaptive"
                   "flex min-h-11 w-full shrink-0 cursor-grab items-center justify-center active:cursor-grabbing",
                   direction === "top" && "order-last"
                 ),
-                children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "h-1 w-[100px] rounded-full bg-muted" })
+                children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "h-1 w-[100px] rounded-full bg-muted" })
               }
             )
           ) : null,
@@ -2465,7 +2523,7 @@ DrawerContent.displayName = "DrawerContent";
 var DrawerHeader = ({
   className,
   ...props
-}) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
   "div",
   {
     "data-slot": "drawer-header",
@@ -2480,7 +2538,7 @@ DrawerHeader.displayName = "DrawerHeader";
 var DrawerBody = ({
   className,
   ...props
-}) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
   "div",
   {
     "data-slot": "drawer-body",
@@ -2492,7 +2550,7 @@ DrawerBody.displayName = "DrawerBody";
 var DrawerFooter = ({
   className,
   ...props
-}) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
   "div",
   {
     "data-slot": "drawer-footer",
@@ -2501,7 +2559,7 @@ var DrawerFooter = ({
   }
 );
 DrawerFooter.displayName = "DrawerFooter";
-var DrawerTitle = React14.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+var DrawerTitle = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
   import_vaul.Drawer.Title,
   {
     ref,
@@ -2516,7 +2574,7 @@ var DrawerTitle = React14.forwardRef(({ className, ...props }, ref) => /* @__PUR
 DrawerTitle.displayName = import_vaul.Drawer.Title.displayName;
 
 // src/bottom-sheet.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 function BottomSheet({
   open,
   onOpenChange,
@@ -2527,15 +2585,15 @@ function BottomSheet({
   children
 }) {
   const container = usePortalContainer();
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Drawer, { open, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_vaul2.Drawer.Portal, { container, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Drawer, { open, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_vaul2.Drawer.Portal, { container, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       import_vaul2.Drawer.Overlay,
       {
         className: cn("fixed inset-0 z-[10000] bg-[var(--matrx-overlay-scrim)]", "fixed inset-0 z-[10000]"),
         style: { background: "var(--matrx-overlay-scrim-drawer)" }
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
       DrawerContentPrimitive,
       {
         className: cn(
@@ -2554,11 +2612,11 @@ function BottomSheet({
           borderBottom: "none"
         } : void 0,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_react_visually_hidden.VisuallyHidden, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_vaul2.Drawer.Title, { children: title }),
-            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_vaul2.Drawer.Description, { children: "Bottom sheet panel." })
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_react_visually_hidden.VisuallyHidden, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_vaul2.Drawer.Title, { children: title }),
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_vaul2.Drawer.Description, { children: "Bottom sheet panel." })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "mx-auto mt-3 mb-1 h-1.5 w-10 rounded-full bg-muted-foreground/30 flex-shrink-0" }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "mx-auto mt-3 mb-1 h-1.5 w-10 rounded-full bg-muted-foreground/30 flex-shrink-0" }),
           children
         ]
       }
@@ -2568,8 +2626,8 @@ function BottomSheet({
 
 // src/popover.tsx
 var PopoverPrimitive = __toESM(require("@radix-ui/react-popover"), 1);
-var React15 = __toESM(require("react"), 1);
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var React16 = __toESM(require("react"), 1);
+var import_jsx_runtime16 = require("react/jsx-runtime");
 var Popover = PopoverPrimitive.Root;
 var PopoverTrigger = PopoverPrimitive.Trigger;
 var PopoverAnchor = PopoverPrimitive.Anchor;
@@ -2588,7 +2646,7 @@ var POPOVER_PADDING_CLASS = {
   md: "p-3",
   default: "p-4"
 };
-var PopoverContent = React15.forwardRef(
+var PopoverContent = React16.forwardRef(
   ({
     className,
     align = "center",
@@ -2604,7 +2662,7 @@ var PopoverContent = React15.forwardRef(
     ...props
   }, ref) => {
     const portalContainer = usePortalContainer(container);
-    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(PopoverPrimitive.Portal, { container: portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(PopoverPrimitive.Portal, { container: portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
       PopoverPrimitive.Content,
       {
         ref,
@@ -2792,9 +2850,9 @@ function monthGrid(year, month, firstDay) {
 var TIME_SLOTS = Array.from({ length: 48 }, (_, i) => `${pad(Math.floor(i / 2))}:${i % 2 ? "30" : "00"}`);
 
 // src/controls/date-field.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 var sameDay = (a, b) => a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
-var DateField = React16.forwardRef(
+var DateField = React17.forwardRef(
   ({
     value,
     onValueChange,
@@ -2817,15 +2875,15 @@ var DateField = React16.forwardRef(
     const word = emptyLabel ?? (mode === "time" ? "Pick a time" : "Pick a date");
     const dayText = day ? formatDay(day, locale) : "";
     const timeText = time ? formatTime(time, locale) : "";
-    const [dayDraft, setDayDraft] = React16.useState(null);
-    const [timeDraft, setTimeDraft] = React16.useState(null);
-    const [dayInvalid, setDayInvalid] = React16.useState(false);
-    const [timeInvalid, setTimeInvalid] = React16.useState(false);
-    const [open, setOpen] = React16.useState(false);
-    const dayRef = React16.useRef(null);
-    const timeRef = React16.useRef(null);
+    const [dayDraft, setDayDraft] = React17.useState(null);
+    const [timeDraft, setTimeDraft] = React17.useState(null);
+    const [dayInvalid, setDayInvalid] = React17.useState(false);
+    const [timeInvalid, setTimeInvalid] = React17.useState(false);
+    const [open, setOpen] = React17.useState(false);
+    const dayRef = React17.useRef(null);
+    const timeRef = React17.useRef(null);
     const hasDraft = dayDraft !== null || timeDraft !== null;
-    React16.useEffect(() => {
+    React17.useEffect(() => {
       if (!hasDraft) return;
       const onKey = (e) => {
         if (e.key !== "Escape") return;
@@ -2921,20 +2979,20 @@ var DateField = React16.forwardRef(
       }
     };
     const panelKind = hasDay ? "day" : "time";
-    const panel = panelKind === "day" ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    const panel = panelKind === "day" ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
       CalendarGrid,
       {
         value: day,
         locale,
         onPick: pickDay,
         onClose: () => setOpen(false),
-        footer: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("button", { type: "button", className: "matrx-date-panel-action", onClick: () => pickDay((0, import_dates2.toDateOnly)(/* @__PURE__ */ new Date())), children: "Today" }),
-          !empty && clearable ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("button", { type: "button", className: "matrx-date-panel-action", onClick: clear, children: "Clear" }) : null
+        footer: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("button", { type: "button", className: "matrx-date-panel-action", onClick: () => pickDay((0, import_dates2.toDateOnly)(/* @__PURE__ */ new Date())), children: "Today" }),
+          !empty && clearable ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("button", { type: "button", className: "matrx-date-panel-action", onClick: clear, children: "Clear" }) : null
         ] })
       }
-    ) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(TimeList, { value: time, locale, onPick: pickTime, onClose: () => setOpen(false) });
-    const glyph = /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    ) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(TimeList, { value: time, locale, onPick: pickTime, onClose: () => setOpen(false) });
+    const glyph = /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
       "button",
       {
         type: "button",
@@ -2945,10 +3003,10 @@ var DateField = React16.forwardRef(
         "aria-expanded": open,
         "data-matrx-date-trigger": "",
         onClick: () => setOpen((o) => !o),
-        children: hasDay ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(CalendarIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ClockIcon, {})
+        children: hasDay ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(CalendarIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ClockIcon, {})
       }
     );
-    const capsule = /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+    const capsule = /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
       "div",
       {
         ref,
@@ -2970,7 +3028,7 @@ var DateField = React16.forwardRef(
         },
         children: [
           glyph,
-          hasDay ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          hasDay ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
             "input",
             {
               ref: dayRef,
@@ -2995,7 +3053,7 @@ var DateField = React16.forwardRef(
               onKeyDown: inputKeys("day")
             }
           ) : null,
-          hasTime ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          hasTime ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
             "input",
             {
               ref: timeRef,
@@ -3021,19 +3079,19 @@ var DateField = React16.forwardRef(
               onKeyDown: inputKeys("time")
             }
           ) : null,
-          clearable && !empty && !disabled ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("button", { type: "button", "aria-label": "Clear", "data-matrx-date-clear": "", onClick: clear, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(XIcon, {}) }) : null
+          clearable && !empty && !disabled ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("button", { type: "button", "aria-label": "Clear", "data-matrx-date-clear": "", onClick: clear, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(XIcon, {}) }) : null
         ]
       }
     );
     if (isMobile) {
-      return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
+      return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
         capsule,
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(BottomSheet, { open, onOpenChange: setOpen, title: hasDay ? "Pick a date" : "Pick a time", surface: "solid", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "matrx-date-sheet", children: panel }) })
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(BottomSheet, { open, onOpenChange: setOpen, title: hasDay ? "Pick a date" : "Pick a time", surface: "solid", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "matrx-date-sheet", children: panel }) })
       ] });
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Popover, { open, onOpenChange: setOpen, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(PopoverAnchor, { asChild: true, children: capsule }),
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(Popover, { open, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(PopoverAnchor, { asChild: true, children: capsule }),
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
         PopoverContent,
         {
           sizing: "content",
@@ -3052,9 +3110,9 @@ var DateField = React16.forwardRef(
   }
 );
 DateField.displayName = "DateField";
-var DateTimeField = React16.forwardRef((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(DateField, { ref, ...props, mode: "datetime" }));
+var DateTimeField = React17.forwardRef((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(DateField, { ref, ...props, mode: "datetime" }));
 DateTimeField.displayName = "DateTimeField";
-var TimeField = React16.forwardRef((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(DateField, { ref, ...props, mode: "time" }));
+var TimeField = React17.forwardRef((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(DateField, { ref, ...props, mode: "time" }));
 TimeField.displayName = "TimeField";
 function CalendarGrid({
   value,
@@ -3065,15 +3123,15 @@ function CalendarGrid({
 }) {
   const selected = (0, import_dates2.parseDateOnly)(value);
   const today = /* @__PURE__ */ new Date();
-  const [focus, setFocus] = React16.useState(() => selected ?? today);
-  const gridRef = React16.useRef(null);
+  const [focus, setFocus] = React17.useState(() => selected ?? today);
+  const gridRef = React17.useRef(null);
   const firstDay = weekStart(locale);
   const days = monthGrid(focus.getFullYear(), focus.getMonth(), firstDay);
   const weekdayFmt = new Intl.DateTimeFormat(locale, { weekday: "short" });
   const weekdayLong = new Intl.DateTimeFormat(locale, { weekday: "long" });
   const monthFmt = new Intl.DateTimeFormat(locale, { month: "long", year: "numeric" });
   const dayLabel = new Intl.DateTimeFormat(locale, { weekday: "long", month: "long", day: "numeric", year: "numeric" });
-  React16.useEffect(() => {
+  React17.useEffect(() => {
     gridRef.current?.querySelector('[tabindex="0"]')?.focus();
   }, [focus]);
   const move = (days2, months = 0) => setFocus((f) => {
@@ -3107,18 +3165,18 @@ function CalendarGrid({
     }
   };
   const headers = days.slice(0, 7);
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "matrx-date-panel", "data-matrx-date-panel": "calendar", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "matrx-date-panel-head", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("button", { type: "button", className: "matrx-date-panel-nav", "aria-label": "Previous month", onClick: () => move(0, -1), children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ChevronLeftIcon, {}) }),
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "matrx-date-panel-title", "aria-live": "polite", children: monthFmt.format(focus) }),
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("button", { type: "button", className: "matrx-date-panel-nav", "aria-label": "Next month", onClick: () => move(0, 1), children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ChevronRightIcon, {}) })
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "matrx-date-panel", "data-matrx-date-panel": "calendar", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "matrx-date-panel-head", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("button", { type: "button", className: "matrx-date-panel-nav", "aria-label": "Previous month", onClick: () => move(0, -1), children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ChevronLeftIcon, {}) }),
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "matrx-date-panel-title", "aria-live": "polite", children: monthFmt.format(focus) }),
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("button", { type: "button", className: "matrx-date-panel-nav", "aria-label": "Next month", onClick: () => move(0, 1), children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ChevronRightIcon, {}) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { ref: gridRef, role: "grid", "aria-label": monthFmt.format(focus), className: "matrx-date-grid", onKeyDown, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { role: "row", className: "matrx-date-row", children: headers.map((d) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { role: "columnheader", "aria-label": weekdayLong.format(d), className: "matrx-date-weekday", children: weekdayFmt.format(d).slice(0, 2) }, d.getDay())) }),
-      [0, 1, 2, 3, 4, 5].map((w) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { role: "row", className: "matrx-date-row", children: days.slice(w * 7, w * 7 + 7).map((d) => {
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { ref: gridRef, role: "grid", "aria-label": monthFmt.format(focus), className: "matrx-date-grid", onKeyDown, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { role: "row", className: "matrx-date-row", children: headers.map((d) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { role: "columnheader", "aria-label": weekdayLong.format(d), className: "matrx-date-weekday", children: weekdayFmt.format(d).slice(0, 2) }, d.getDay())) }),
+      [0, 1, 2, 3, 4, 5].map((w) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { role: "row", className: "matrx-date-row", children: days.slice(w * 7, w * 7 + 7).map((d) => {
         const isSelected = selected ? sameDay(d, selected) : false;
         const isFocus = sameDay(d, focus);
-        return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { role: "gridcell", "aria-selected": isSelected, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { role: "gridcell", "aria-selected": isSelected, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
           "button",
           {
             type: "button",
@@ -3138,7 +3196,7 @@ function CalendarGrid({
         ) }, d.toISOString());
       }) }, w))
     ] }),
-    footer ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "matrx-date-panel-foot", children: footer }) : null
+    footer ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "matrx-date-panel-foot", children: footer }) : null
   ] });
 }
 function TimeList({
@@ -3147,10 +3205,10 @@ function TimeList({
   onPick,
   onClose
 }) {
-  const listRef = React16.useRef(null);
+  const listRef = React17.useRef(null);
   const start = value ? TIME_SLOTS.findIndex((s) => s >= value) : TIME_SLOTS.indexOf("09:00");
-  const [active, setActive] = React16.useState(start < 0 ? TIME_SLOTS.length - 1 : start);
-  React16.useEffect(() => {
+  const [active, setActive] = React17.useState(start < 0 ? TIME_SLOTS.length - 1 : start);
+  React17.useEffect(() => {
     const el = listRef.current?.querySelector(`[data-index="${active}"]`);
     el?.focus();
     el?.scrollIntoView?.({ block: "nearest" });
@@ -3170,7 +3228,7 @@ function TimeList({
       run();
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { ref: listRef, role: "listbox", "aria-label": "Times", className: "matrx-date-panel matrx-time-list", onKeyDown, children: TIME_SLOTS.map((slot, i) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { ref: listRef, role: "listbox", "aria-label": "Times", className: "matrx-date-panel matrx-time-list", onKeyDown, children: TIME_SLOTS.map((slot, i) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     "button",
     {
       type: "button",
@@ -3190,10 +3248,10 @@ function TimeList({
 // src/controls/doors.tsx
 var SelectPrimitive2 = __toESM(require("@radix-ui/react-select"), 1);
 var TabsPrimitive = __toESM(require("@radix-ui/react-tabs"), 1);
-var React17 = __toESM(require("react"), 1);
-var import_jsx_runtime17 = require("react/jsx-runtime");
-var Input = React17.forwardRef(
-  ({ className, variant = "field", mono, adornment, align, numeric, mark, width, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+var React18 = __toESM(require("react"), 1);
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var Input = React18.forwardRef(
+  ({ className, variant = "field", mono, adornment, align, numeric, mark, width, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     "input",
     {
       ref,
@@ -3211,7 +3269,7 @@ var Input = React17.forwardRef(
   )
 );
 Input.displayName = "Input";
-var SelectTrigger2 = React17.forwardRef(({ className, children, hideArrow = false, variant = "field", width, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+var SelectTrigger2 = React18.forwardRef(({ className, children, hideArrow = false, variant = "field", width, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
   SelectPrimitive2.Trigger,
   {
     ref,
@@ -3223,14 +3281,14 @@ var SelectTrigger2 = React17.forwardRef(({ className, children, hideArrow = fals
     ...props,
     children: [
       children,
-      !hideArrow && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(SelectPrimitive2.Icon, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(SelectChevron, {}) })
+      !hideArrow && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(SelectPrimitive2.Icon, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(SelectChevron, {}) })
     ]
   }
 ));
 SelectTrigger2.displayName = "SelectTrigger";
-var TabsVariantContext = React17.createContext("capsule");
-var TabsList = React17.forwardRef(
-  ({ className, variant = "capsule", fill, rule = true, overflow, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(TabsVariantContext.Provider, { value: variant, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+var TabsVariantContext = React18.createContext("capsule");
+var TabsList = React18.forwardRef(
+  ({ className, variant = "capsule", fill, rule = true, overflow, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(TabsVariantContext.Provider, { value: variant, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     TabsPrimitive.List,
     {
       ref,
@@ -3245,9 +3303,9 @@ var TabsList = React17.forwardRef(
   ) })
 );
 TabsList.displayName = "TabsList";
-var TabsTrigger = React17.forwardRef(({ className, ...props }, ref) => {
-  const variant = React17.useContext(TabsVariantContext);
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+var TabsTrigger = React18.forwardRef(({ className, ...props }, ref) => {
+  const variant = React18.useContext(TabsVariantContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     TabsPrimitive.Trigger,
     {
       ref,
@@ -3261,23 +3319,23 @@ TabsTrigger.displayName = "TabsTrigger";
 
 // src/controls/surfaces.tsx
 var import_react_slot4 = require("@radix-ui/react-slot");
-var React19 = __toESM(require("react"), 1);
+var React20 = __toESM(require("react"), 1);
 
 // src/alert-dialog.tsx
 var AlertDialogPrimitive = __toESM(require("@radix-ui/react-alert-dialog"), 1);
 var import_react_tree2 = require("@ai-matrx/kit/react-tree");
-var React18 = __toESM(require("react"), 1);
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var React19 = __toESM(require("react"), 1);
+var import_jsx_runtime19 = require("react/jsx-runtime");
 var AlertDialog = AlertDialogPrimitive.Root;
 var AlertDialogPortal = ({
   container,
   ...props
 }) => {
   const resolved = usePortalContainer(container);
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(AlertDialogPrimitive.Portal, { container: resolved ?? null, ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(AlertDialogPrimitive.Portal, { container: resolved ?? null, ...props });
 };
 AlertDialogPortal.displayName = "AlertDialogPortal";
-var AlertDialogOverlay = React18.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+var AlertDialogOverlay = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
   AlertDialogPrimitive.Overlay,
   {
     ref,
@@ -3291,12 +3349,12 @@ var AlertDialogOverlay = React18.forwardRef(({ className, ...props }, ref) => /*
   }
 ));
 AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
-var AlertDialogContentPrimitive = React18.forwardRef(({ onCloseAutoFocus, ...props }, ref) => {
+var AlertDialogContentPrimitive = React19.forwardRef(({ onCloseAutoFocus, ...props }, ref) => {
   useModalLayer(true);
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(AlertDialogPrimitive.Content, { ...props, ref, "aria-modal": "true", onCloseAutoFocus: keepMovedFocus(onCloseAutoFocus) });
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(AlertDialogPrimitive.Content, { ...props, ref, "aria-modal": "true", onCloseAutoFocus: keepMovedFocus(onCloseAutoFocus) });
 });
 AlertDialogContentPrimitive.displayName = "AlertDialogContentPrimitive";
-var AlertDialogDescription = React18.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+var AlertDialogDescription = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
   AlertDialogPrimitive.Description,
   {
     ref,
@@ -3306,11 +3364,11 @@ var AlertDialogDescription = React18.forwardRef(({ className, ...props }, ref) =
   }
 ));
 AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;
-var AlertDialogContent = React18.forwardRef(({ className, children, container, animated = true, ...props }, ref) => {
+var AlertDialogContent = React19.forwardRef(({ className, children, container, animated = true, ...props }, ref) => {
   const hasDescription = (0, import_react_tree2.treeContainsComponent)(children, AlertDialogDescription) || (0, import_react_tree2.treeContainsComponent)(children, AlertDialogPrimitive.Description);
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(AlertDialogPortal, { container, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(AlertDialogOverlay, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(AlertDialogPortal, { container, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(AlertDialogOverlay, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
       AlertDialogContentPrimitive,
       {
         ref,
@@ -3330,7 +3388,7 @@ var AlertDialogContent = React18.forwardRef(({ className, children, container, a
         ),
         ...props,
         children: [
-          hasDescription ? null : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(AlertDialogPrimitive.Description, { className: "sr-only", children: "Please confirm the action described in this dialog." }),
+          hasDescription ? null : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(AlertDialogPrimitive.Description, { className: "sr-only", children: "Please confirm the action described in this dialog." }),
           children
         ]
       }
@@ -3341,7 +3399,7 @@ AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
 var AlertDialogHeader = ({
   className,
   ...props
-}) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
   "div",
   {
     "data-slot": "alert-dialog-header",
@@ -3353,7 +3411,7 @@ AlertDialogHeader.displayName = "AlertDialogHeader";
 var AlertDialogFooter = ({
   className,
   ...props
-}) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
   "div",
   {
     "data-slot": "alert-dialog-footer",
@@ -3385,7 +3443,7 @@ var AlertDialogFooter = ({
   }
 );
 AlertDialogFooter.displayName = "AlertDialogFooter";
-var AlertDialogTitle = React18.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+var AlertDialogTitle = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
   AlertDialogPrimitive.Title,
   {
     ref,
@@ -3395,7 +3453,7 @@ var AlertDialogTitle = React18.forwardRef(({ className, ...props }, ref) => /* @
   }
 ));
 AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
-var AlertDialogAction = React18.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+var AlertDialogAction = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
   AlertDialogPrimitive.Action,
   {
     ref,
@@ -3405,7 +3463,7 @@ var AlertDialogAction = React18.forwardRef(({ className, ...props }, ref) => /*
   }
 ));
 AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
-var AlertDialogCancel = React18.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+var AlertDialogCancel = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
   AlertDialogPrimitive.Cancel,
   {
     ref,
@@ -3421,7 +3479,7 @@ var AlertDialogCancel = React18.forwardRef(({ className, ...props }, ref) => /*
 AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
 
 // src/confirm-dialog.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 function ConfirmDialog({
   open,
   onOpenChange,
@@ -3438,20 +3496,20 @@ function ConfirmDialog({
   portalContainer,
   onConfirm
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(AlertDialog, { open, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(AlertDialog, { open, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
     AlertDialogContent,
     {
       className: contentClassName,
       ...portalContainer === void 0 ? {} : { container: portalContainer },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(AlertDialogHeader, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(AlertDialogTitle, { children: title }),
-          description ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(AlertDialogDescription, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { children: description }) }) : null
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(AlertDialogHeader, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(AlertDialogTitle, { children: title }),
+          description ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(AlertDialogDescription, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { children: description }) }) : null
         ] }),
         content ?? null,
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(AlertDialogFooter, { children: [
-          cancelLabel === null ? null : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(AlertDialogCancel, { className: "max-lg:min-h-11", disabled: busy, children: cancelLabel }),
-          confirmHeld ? null : /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(AlertDialogFooter, { children: [
+          cancelLabel === null ? null : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(AlertDialogCancel, { className: "max-lg:min-h-11", disabled: busy, children: cancelLabel }),
+          confirmHeld ? null : /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
             AlertDialogAction,
             {
               disabled: busy || confirmDisabled,
@@ -3467,7 +3525,7 @@ function ConfirmDialog({
                 variant === "destructive" && buttonVariants({ variant: "destructive" })
               ),
               children: [
-                busy ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Loader2Icon, { className: cn("mr-2 h-4 w-4", MOTION_SPIN) }) : null,
+                busy ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Loader2Icon, { className: cn("mr-2 h-4 w-4", MOTION_SPIN) }) : null,
                 confirmLabel
               ]
             }
@@ -3479,7 +3537,7 @@ function ConfirmDialog({
 }
 
 // src/skeleton.tsx
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 var SHAPE_CLASS = {
   line: "h-3.5 rounded",
   title: "h-6 rounded-md",
@@ -3518,7 +3576,7 @@ function Skeleton({ className, animated = true, motion = "pulse", shape, height,
     shape === "block" && HEIGHT_CLASS[height ?? "md"],
     shape && WIDTH_CLASS[width ?? "full"]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     "div",
     {
       "data-slot": "skeleton",
@@ -3537,9 +3595,9 @@ function Skeleton({ className, animated = true, motion = "pulse", shape, height,
 }
 
 // src/controls/surfaces.tsx
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 function RowGroup({ title, danger, className, children, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
     "section",
     {
       "data-matrx-row-group": "",
@@ -3547,35 +3605,35 @@ function RowGroup({ title, danger, className, children, ...props }) {
       className: cn("matrx-control-group", className),
       ...props,
       children: [
-        title ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("h2", { className: "matrx-control-group-title", children: title }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "matrx-control-group-body", children })
+        title ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("h2", { className: "matrx-control-group-title", children: title }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "matrx-control-group-body", children })
       ]
     }
   );
 }
 function SettingRow({ label, line, htmlFor, children, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { "data-matrx-setting-row": "", className: cn("matrx-control-setting-row", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "matrx-control-setting-text", children: [
-      htmlFor ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("label", { htmlFor, className: "matrx-control-setting-label", children: label }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "matrx-control-setting-label", children: label }),
-      line ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "matrx-control-setting-line", children: line }) : null
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { "data-matrx-setting-row": "", className: cn("matrx-control-setting-row", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "matrx-control-setting-text", children: [
+      htmlFor ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("label", { htmlFor, className: "matrx-control-setting-label", children: label }) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "matrx-control-setting-label", children: label }),
+      line ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "matrx-control-setting-line", children: line }) : null
     ] }),
-    children ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ControlRow, { nowrap: true, "data-matrx-row-actions": "", children }) : null
+    children ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ControlRow, { nowrap: true, "data-matrx-row-actions": "", children }) : null
   ] });
 }
-var Tile = React19.forwardRef(
+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) => {
     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_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
-      icon ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "matrx-tile-icon", children: icon }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("span", { className: "matrx-tile-text", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "matrx-tile-title", children: title }),
-        line ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "matrx-tile-line", children: line }) : null
+    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,
+      /* @__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
       ] }),
-      end ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "matrx-tile-end", children: end }) : null
+      end ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "matrx-tile-end", children: end }) : null
     ] });
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
       Component,
       {
         ref,
@@ -3603,14 +3661,14 @@ var Tile = React19.forwardRef(
         className: cn("matrx-tile", className),
         ...props,
         onClick: inert ? swallowClick : onClick,
-        children: asChild && React19.isValidElement(children) ? React19.cloneElement(children, void 0, body) : body
+        children: asChild && React20.isValidElement(children) ? React20.cloneElement(children, void 0, body) : body
       }
     );
   }
 );
 Tile.displayName = "Tile";
-var DisclosureHeader = React19.forwardRef(
-  ({ open, variant = "row", icon, glyphTone, title, meta, end, line, chevron = "start", className, type, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+var DisclosureHeader = React20.forwardRef(
+  ({ open, variant = "row", icon, glyphTone, title, meta, end, line, chevron = "start", className, type, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
     "button",
     {
       ref,
@@ -3623,28 +3681,28 @@ var DisclosureHeader = React19.forwardRef(
       className: cn("matrx-disclosure", className),
       ...props,
       children: [
-        chevron === "start" ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "matrx-disclosure-chevron", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ChevronRightIcon, {}) }) : null,
-        icon ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "matrx-disclosure-icon", "data-glyph-tone": glyphTone, children: icon }) : null,
-        line ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("span", { className: "matrx-disclosure-text", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "matrx-disclosure-title", children: title }),
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "matrx-disclosure-line", children: line })
-        ] }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "matrx-disclosure-title", children: title }),
-        meta === void 0 || meta === null || meta === false ? null : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "matrx-disclosure-meta", children: meta }),
-        end ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "matrx-disclosure-end", children: end }) : null,
-        chevron === "end" ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "matrx-disclosure-chevron", "data-end": "", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ChevronRightIcon, {}) }) : null
+        chevron === "start" ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "matrx-disclosure-chevron", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ChevronRightIcon, {}) }) : null,
+        icon ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "matrx-disclosure-icon", "data-glyph-tone": glyphTone, children: icon }) : null,
+        line ? /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("span", { className: "matrx-disclosure-text", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "matrx-disclosure-title", children: title }),
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "matrx-disclosure-line", children: line })
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "matrx-disclosure-title", children: title }),
+        meta === void 0 || meta === null || meta === false ? null : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "matrx-disclosure-meta", children: meta }),
+        end ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "matrx-disclosure-end", children: end }) : null,
+        chevron === "end" ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "matrx-disclosure-chevron", "data-end": "", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ChevronRightIcon, {}) }) : null
       ]
     }
   )
 );
 DisclosureHeader.displayName = "DisclosureHeader";
 function EmptyState({ icon, title, line, action, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { "data-matrx-empty-state": "", className: cn("matrx-control-empty", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "matrx-control-empty-disc", "aria-hidden": "true", children: icon }),
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "matrx-control-empty-title", children: title }),
-      line ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "matrx-control-empty-line", children: line }) : null
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { "data-matrx-empty-state": "", className: cn("matrx-control-empty", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "matrx-control-empty-disc", "aria-hidden": "true", children: icon }),
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "matrx-control-empty-title", children: title }),
+      line ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "matrx-control-empty-line", children: line }) : null
     ] }),
-    action ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ControlRow, { className: "justify-center", children: action }) : null
+    action ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ControlRow, { className: "justify-center", children: action }) : null
   ] });
 }
 function RegionSkeleton({
@@ -3656,34 +3714,34 @@ function RegionSkeleton({
 }) {
   const items = Array.from({ length: count }, (_, i) => i);
   if (shape === "form") {
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { "aria-busy": "true", "aria-label": ariaLabel, className: cn("flex flex-col gap-3", className), children: items.map((i) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex flex-col gap-1.5", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Skeleton, { className: "h-3 w-24" }),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Skeleton, { className: "h-7 rounded-full" })
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { "aria-busy": "true", "aria-label": ariaLabel, className: cn("flex flex-col gap-3", className), children: items.map((i) => /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex flex-col gap-1.5", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Skeleton, { className: "h-3 w-24" }),
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Skeleton, { className: "h-7 rounded-full" })
     ] }, i)) });
   }
   if (shape === "cards") {
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { "aria-busy": "true", "aria-label": ariaLabel, className: cn("grid gap-2 sm:grid-cols-3", className), children: items.map((i) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex items-center gap-3 rounded-lg border border-border p-3", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Skeleton, { className: "size-8 rounded-full" }),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex flex-1 flex-col gap-1.5", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Skeleton, { className: "h-3.5 w-2/3" }),
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Skeleton, { className: "h-2.5 w-1/2" })
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { "aria-busy": "true", "aria-label": ariaLabel, className: cn("grid gap-2 sm:grid-cols-3", className), children: items.map((i) => /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex items-center gap-3 rounded-lg border border-border p-3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Skeleton, { className: "size-8 rounded-full" }),
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex flex-1 flex-col gap-1.5", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Skeleton, { className: "h-3.5 w-2/3" }),
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Skeleton, { className: "h-2.5 w-1/2" })
       ] })
     ] }, i)) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { "aria-busy": "true", "aria-label": ariaLabel, className: cn("divide-y divide-border", className), children: items.map((i) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex min-h-9 items-center gap-3 px-3 py-1.5", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Skeleton, { className: "size-4 rounded-full" }),
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Skeleton, { className: "h-3.5", style: { width: `${30 + i * 17 % 35}%` } }),
-      twoLine ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Skeleton, { className: "h-2.5 w-1/4" }) : null
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { "aria-busy": "true", "aria-label": ariaLabel, className: cn("divide-y divide-border", className), children: items.map((i) => /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex min-h-9 items-center gap-3 px-3 py-1.5", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Skeleton, { className: "size-4 rounded-full" }),
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Skeleton, { className: "h-3.5", style: { width: `${30 + i * 17 % 35}%` } }),
+      twoLine ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Skeleton, { className: "h-2.5 w-1/4" }) : null
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Skeleton, { className: "hidden h-[1.125rem] w-16 rounded-md sm:block" }),
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Skeleton, { className: "size-5 rounded-full" })
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Skeleton, { className: "hidden h-[1.125rem] w-16 rounded-md sm:block" }),
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Skeleton, { className: "size-5 rounded-full" })
   ] }, i)) });
 }
-var DeleteButton = React19.forwardRef((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Button2, { ref, variant: "quiet", icon: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Trash2Icon, {}), "data-delete": "", title: props["aria-label"], ...props }));
+var DeleteButton = React20.forwardRef((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Button2, { ref, variant: "quiet", icon: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Trash2Icon, {}), "data-delete": "", title: props["aria-label"], ...props }));
 DeleteButton.displayName = "DeleteButton";
 function ConfirmDelete({ open, onOpenChange, title, cost, confirmLabel, onConfirm, busy }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     ConfirmDialog,
     {
       open,
@@ -3702,7 +3760,7 @@ function DangerZone({
   children,
   className
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(RowGroup, { title, danger: true, className, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(RowGroup, { title, danger: true, className, children });
 }
 function PromoBanner({
   icon,
@@ -3716,7 +3774,7 @@ function PromoBanner({
   className,
   "aria-label": ariaLabel
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
     "section",
     {
       "aria-label": ariaLabel ?? (typeof eyebrow === "string" ? eyebrow : "Featured"),
@@ -3725,17 +3783,17 @@ function PromoBanner({
       "data-wrap": wrap ? "" : void 0,
       className: cn("matrx-control-promo", className),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "matrx-control-promo-disc", "aria-hidden": "true", children: icon }),
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "matrx-control-promo-text", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "matrx-control-promo-head", children: [
-            eyebrow ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "matrx-control-promo-eyebrow", children: eyebrow }) : null,
-            eyebrow ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "matrx-control-promo-eyebrow", "aria-hidden": "true", children: "\xB7" }) : null,
-            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "matrx-control-promo-title", children: title })
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "matrx-control-promo-disc", "aria-hidden": "true", children: icon }),
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "matrx-control-promo-text", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "matrx-control-promo-head", children: [
+            eyebrow ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "matrx-control-promo-eyebrow", children: eyebrow }) : null,
+            eyebrow ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "matrx-control-promo-eyebrow", "aria-hidden": "true", children: "\xB7" }) : null,
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "matrx-control-promo-title", children: title })
           ] }),
-          line ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "matrx-control-promo-line", children: line }) : null
+          line ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "matrx-control-promo-line", children: line }) : null
         ] }),
-        chips ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "matrx-control-promo-chips", children: chips }) : null,
-        action ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ControlRow, { nowrap: true, className: "matrx-control-promo-action", children: action }) : null
+        chips ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "matrx-control-promo-chips", children: chips }) : null,
+        action ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ControlRow, { nowrap: true, className: "matrx-control-promo-action", children: action }) : null
       ]
     }
   );
@@ -3743,7 +3801,7 @@ function PromoBanner({
 
 // src/controls/number-stepper.tsx
 var import_react2 = require("react");
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 function NumberStepper({
   value,
   onChange,
@@ -3772,7 +3830,7 @@ function NumberStepper({
     commit(base + delta);
   };
   const btnCls = "flex items-center justify-center border border-input bg-background text-muted-foreground hover:text-foreground hover:bg-muted transition-colors select-none shrink-0 h-full aspect-square leading-none";
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
     "div",
     {
       className: cn(
@@ -3780,7 +3838,7 @@ function NumberStepper({
         className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
           "button",
           {
             type: "button",
@@ -3791,10 +3849,10 @@ function NumberStepper({
             className: cn(btnCls, "rounded-l-md border-r-0"),
             tabIndex: -1,
             "aria-label": "Decrease",
-            children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(MinusIcon, { width: 12, height: 12, strokeWidth: 2.25 })
+            children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(MinusIcon, { width: 12, height: 12, strokeWidth: 2.25 })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
           "input",
           {
             type: "text",
@@ -3825,7 +3883,7 @@ function NumberStepper({
             )
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
           "button",
           {
             type: "button",
@@ -3836,7 +3894,7 @@ function NumberStepper({
             className: cn(btnCls, "rounded-r-md border-l-0"),
             tabIndex: -1,
             "aria-label": "Increase",
-            children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(PlusIcon, { width: 12, height: 12, strokeWidth: 2.25 })
+            children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(PlusIcon, { width: 12, height: 12, strokeWidth: 2.25 })
           }
         )
       ]
@@ -3846,8 +3904,8 @@ function NumberStepper({
 
 // src/slider.tsx
 var SliderPrimitive = __toESM(require("@radix-ui/react-slider"), 1);
-var React20 = __toESM(require("react"), 1);
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var React21 = __toESM(require("react"), 1);
+var import_jsx_runtime24 = require("react/jsx-runtime");
 var TRACK_CLASSES = {
   sm: "h-1",
   md: "h-1.5",
@@ -3858,12 +3916,12 @@ var THUMB_CLASSES = {
   md: "h-4 w-4",
   lg: "h-5 w-5"
 };
-var Slider = React20.forwardRef(({ className, size = "md", ...props }, ref) => {
+var Slider = React21.forwardRef(({ className, size = "md", ...props }, ref) => {
   const thumbCount = Math.max(
     1,
     (props.value ?? props.defaultValue ?? [0]).length
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
     SliderPrimitive.Root,
     {
       ref,
@@ -3875,7 +3933,7 @@ var Slider = React20.forwardRef(({ className, size = "md", ...props }, ref) => {
       ),
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
           SliderPrimitive.Track,
           {
             "data-slot": "slider-track",
@@ -3884,7 +3942,7 @@ var Slider = React20.forwardRef(({ className, size = "md", ...props }, ref) => {
               TRACK_CLASSES[size],
               "data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5"
             ),
-            children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
               SliderPrimitive.Range,
               {
                 "data-slot": "slider-range",
@@ -3893,7 +3951,7 @@ var Slider = React20.forwardRef(({ className, size = "md", ...props }, ref) => {
             )
           }
         ),
-        Array.from({ length: thumbCount }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        Array.from({ length: thumbCount }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
           SliderPrimitive.Thumb,
           {
             "data-slot": "slider-thumb",
@@ -3918,7 +3976,7 @@ var Slider = React20.forwardRef(({ className, size = "md", ...props }, ref) => {
 Slider.displayName = SliderPrimitive.Root.displayName;
 
 // src/controls/stage-steps.tsx
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 function stageSlots(count, current, maxVisible) {
   const all = Array.from({ length: count }, (_, index) => ({ kind: "step", index }));
   if (!maxVisible || count <= Math.max(5, maxVisible)) return all;
@@ -3941,12 +3999,12 @@ function stageStates(count, current) {
 function StageSteps({ steps, current, labels = "all", maxVisible, className, ...props }) {
   const states = stageStates(steps.length, current);
   const slots = stageSlots(steps.length, current, maxVisible);
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("ol", { "data-matrx-control": "stage-steps", "data-labels": labels, className: cn("matrx-stage-steps", className), ...props, children: slots.map((slot, n) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("ol", { "data-matrx-control": "stage-steps", "data-labels": labels, className: cn("matrx-stage-steps", className), ...props, children: slots.map((slot, n) => {
     if (slot.kind === "more") {
       const hidden = steps.slice(slot.from, slot.to + 1);
       const state2 = states[slot.from];
       const names = hidden.map((step2) => step2.label).join(", ");
-      return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
         "li",
         {
           "data-stage": "more",
@@ -3955,8 +4013,8 @@ function StageSteps({ steps, current, labels = "all", maxVisible, className, ...
           "aria-label": `${hidden.length} more steps: ${names}`,
           className: "matrx-stage-steps-item",
           children: [
-            n > 0 ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "matrx-stage-steps-sep", "aria-hidden": "true" }) : null,
-            /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("span", { className: "matrx-stage-steps-more", "aria-hidden": "true", children: [
+            n > 0 ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "matrx-stage-steps-sep", "aria-hidden": "true" }) : null,
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("span", { className: "matrx-stage-steps-more", "aria-hidden": "true", children: [
               "+",
               hidden.length
             ] })
@@ -3968,7 +4026,7 @@ function StageSteps({ steps, current, labels = "all", maxVisible, className, ...
     const i = slot.index;
     const step = steps[i];
     const state = states[i];
-    return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
       "li",
       {
         "data-stage": step.id,
@@ -3977,11 +4035,11 @@ function StageSteps({ steps, current, labels = "all", maxVisible, className, ...
         title: step.label,
         className: "matrx-stage-steps-item",
         children: [
-          n > 0 ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "matrx-stage-steps-sep", "aria-hidden": "true" }) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "matrx-stage-steps-mark", "aria-hidden": "true", children: state === "done" ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(RadixCheckIcon, {}) : i + 1 }),
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("span", { className: "matrx-stage-steps-label", children: [
+          n > 0 ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "matrx-stage-steps-sep", "aria-hidden": "true" }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "matrx-stage-steps-mark", "aria-hidden": "true", children: state === "done" ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(RadixCheckIcon, {}) : i + 1 }),
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("span", { className: "matrx-stage-steps-label", children: [
             step.label,
-            state === "done" ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "matrx-sr-only", children: " (done)" }) : null
+            state === "done" ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "matrx-sr-only", children: " (done)" }) : null
           ] })
         ]
       },
@@ -3992,7 +4050,7 @@ function StageSteps({ steps, current, labels = "all", maxVisible, className, ...
 
 // src/controls/clamped-number-input.tsx
 var import_react3 = require("react");
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 function shownDraft(raw, min, max, decimal = false) {
   const next = clampDraft(raw, min, max, decimal);
   if (next === null) return null;
@@ -4037,7 +4095,7 @@ function ClampedNumberInput({
     setDraft(String(next));
     if (next !== value) onChange(next);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
     Input,
     {
       id,
@@ -4070,7 +4128,7 @@ function ClampedNumberInput({
 
 // src/controls/light-switch-toggle.tsx
 var import_react4 = require("react");
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 var defaultSizes = {
   width: "w-48",
   height: "h-16"
@@ -4108,7 +4166,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_runtime26.jsxs)(
+    const renderOption = (isActive, label, side, onClick) => /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
       "button",
       {
         type: "button",
@@ -4120,7 +4178,7 @@ var LightSwitchToggle = (0, import_react4.forwardRef)(
           isActive ? activeButtonClasses : inactiveButtonClasses
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
             "div",
             {
               className: cn(
@@ -4131,7 +4189,7 @@ var LightSwitchToggle = (0, import_react4.forwardRef)(
               )
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
             "span",
             {
               className: cn(
@@ -4144,8 +4202,8 @@ var LightSwitchToggle = (0, import_react4.forwardRef)(
         ]
       }
     );
-    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { ref, className: containerClasses, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime26.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_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" }),
       renderOption(!isOn, labels.off, "left", () => handleToggle(false)),
       renderOption(isOn, labels.on, "right", () => handleToggle(true))
     ] }) });
@@ -4159,39 +4217,39 @@ var import_react5 = require("react");
 // src/command.tsx
 var DialogPrimitive2 = __toESM(require("@radix-ui/react-dialog"), 1);
 var import_cmdk = require("cmdk");
-var React22 = __toESM(require("react"), 1);
+var React23 = __toESM(require("react"), 1);
 
 // src/close-slot.tsx
 var DialogPrimitive = __toESM(require("@radix-ui/react-dialog"), 1);
-var React21 = __toESM(require("react"), 1);
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var React22 = __toESM(require("react"), 1);
+var import_jsx_runtime28 = 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_runtime27.jsxs)(DialogPrimitive.Close, { "data-slot": "dialog-close", "aria-label": "Close", className: cn(CLOSE_CONTROL_CLASSES, className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(XIcon, { className: "h-4 w-4", "aria-hidden": "true" }),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "sr-only", children: "Close" })
+  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" })
   ] });
 }
-var CloseSlotContext = React21.createContext(null);
-var SearchRowCloseSlotContext = React21.createContext(null);
+var CloseSlotContext = React22.createContext(null);
+var SearchRowCloseSlotContext = React22.createContext(null);
 function useCloseSlot(enabled) {
-  const [claims, setClaims] = React21.useState([]);
+  const [claims, setClaims] = React22.useState([]);
   const owner = claims[0] ?? null;
-  const claim = React21.useCallback((id) => {
+  const claim = React22.useCallback((id) => {
     setClaims((list) => [...list, id]);
     return () => setClaims((list) => list.filter((c) => c !== id));
   }, []);
-  const slot = React21.useMemo(() => enabled ? { claim, owner } : null, [enabled, claim, owner]);
+  const slot = React22.useMemo(() => enabled ? { claim, owner } : null, [enabled, claim, owner]);
   return { slot, claimed: owner !== null };
 }
 var CloseSlotProvider = CloseSlotContext.Provider;
 var SearchRowCloseSlotProvider = SearchRowCloseSlotContext.Provider;
 function useClaim(context, declined) {
-  const slot = React21.useContext(context);
-  const id = React21.useId();
+  const slot = React22.useContext(context);
+  const id = React22.useId();
   const claim = slot?.claim;
   const wants = claim !== void 0 && !declined;
-  React21.useLayoutEffect(() => wants && claim ? claim(id) : void 0, [wants, claim, id]);
+  React22.useLayoutEffect(() => wants && claim ? claim(id) : void 0, [wants, claim, id]);
   return wants && slot?.owner === id;
 }
 function useCloseSlotClaim(declined = false) {
@@ -4201,7 +4259,7 @@ function useSearchRowCloseSlotClaim() {
   return useClaim(SearchRowCloseSlotContext, false);
 }
 function CloseRow({ className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { "data-slot": "close-row", className: cn("flex justify-end", className), children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(CloseControl, {}) });
+  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, {}) });
 }
 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)$/;
@@ -4224,19 +4282,19 @@ function HeaderWithClose({
 }) {
   const owns = useCloseSlotClaim(/(?:^|\s)(?:sr-only|hidden)(?:\s|$)/.test(className ?? ""));
   if (!owns) {
-    return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { "data-slot": slotName, className: cn(baseClassName, className), ...props, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime28.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_runtime27.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_runtime27.jsx)("div", { "data-slot": `${slotName}-body`, className: cn("min-w-0 flex-1", baseClassName, body), children }),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(CloseControl, { className: cn("-mr-2", !rowish && closeOffsetClassName) })
+  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) })
   ] });
 }
 
 // src/command.tsx
-var import_jsx_runtime28 = require("react/jsx-runtime");
-var Command = React22.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+var import_jsx_runtime29 = require("react/jsx-runtime");
+var Command = React23.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
   import_cmdk.Command,
   {
     ref,
@@ -4251,14 +4309,14 @@ Command.displayName = import_cmdk.Command.displayName;
 var DIALOG_DESKTOP_CLASSES = `fixed left-[50%] top-[50%] z-[10000] grid min-w-0 w-full max-w-lg ${CENTERED_DIALOG} gap-4 overflow-x-clip border bg-background p-6 shadow-lg [overflow-wrap:anywhere] [&>*]:min-w-0 [&>*]:max-w-full sm:rounded-lg`;
 var DIALOG_MOBILE_SHEET_CLASSES = "fixed inset-x-0 bottom-0 left-0 right-0 top-auto z-[10000] flex min-w-0 flex-col w-full max-w-full max-h-[90dvh] translate-x-0 translate-y-0 gap-4 overflow-x-clip border-t bg-background p-4 pb-safe shadow-lg [overflow-wrap:anywhere] [&>*]:min-w-0 [&>*]:max-w-full rounded-t-2xl rounded-b-none overflow-y-auto overscroll-contain";
 var DIALOG_MOBILE_SHEET_OVERRIDE = "inset-x-0 bottom-0 left-0 right-0 top-auto translate-x-0 translate-y-0 w-full max-w-full max-h-[90dvh] rounded-b-none rounded-t-2xl overflow-y-auto";
-var CommandDialogContent = React22.forwardRef(({ className, children, container, onInteractOutside, ...props }, ref) => {
+var CommandDialogContent = React23.forwardRef(({ className, children, container, onInteractOutside, ...props }, ref) => {
   const isMobile = (0, import_media_query.useIsMobile)();
   const isModal = useRadixDialogModal();
   useModalLayer(isModal);
   const portalContainer = usePortalContainer(container);
   const closeSlot = useCloseSlot(true);
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(DialogPrimitive2.Portal, { container: portalContainer, children: [
-    isModal ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(DialogPrimitive2.Portal, { container: portalContainer, children: [
+    isModal ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
       DialogPrimitive2.Overlay,
       {
         className: cn(
@@ -4267,7 +4325,7 @@ var CommandDialogContent = React22.forwardRef(({ className, children, container,
         )
       }
     ) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
       DialogPrimitive2.Content,
       {
         ref,
@@ -4283,19 +4341,19 @@ var CommandDialogContent = React22.forwardRef(({ className, children, container,
         ...props,
         onInteractOutside: keepFloatingLayersInside(onInteractOutside),
         children: [
-          closeSlot.slot && !closeSlot.claimed ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(CloseRow, { className: "px-4 pt-4" }) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(CloseSlotProvider, { value: null, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(SearchRowCloseSlotProvider, { value: closeSlot.slot, 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 }) })
         ]
       }
     )
   ] });
 });
 CommandDialogContent.displayName = "CommandDialogContent";
-var CommandInput = React22.forwardRef(({ className, ...props }, ref) => {
+var CommandInput = React23.forwardRef(({ className, ...props }, ref) => {
   const ownsClose = useSearchRowCloseSlotClaim();
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex items-center gap-2 border-b px-3", "cmdk-input-wrapper": "", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(MagnifyingGlassIcon, { className: "h-4 w-4 shrink-0 opacity-50" }),
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+  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)(
       import_cmdk.Command.Input,
       {
         ref,
@@ -4306,11 +4364,11 @@ var CommandInput = React22.forwardRef(({ className, ...props }, ref) => {
         ...props
       }
     ),
-    ownsClose ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(CloseControl, { className: "-mr-1" }) : null
+    ownsClose ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(CloseControl, { className: "-mr-1" }) : null
   ] });
 });
 CommandInput.displayName = import_cmdk.Command.Input.displayName;
-var CommandList = React22.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+var CommandList = React23.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
   import_cmdk.Command.List,
   {
     ref,
@@ -4319,7 +4377,7 @@ var CommandList = React22.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 CommandList.displayName = import_cmdk.Command.List.displayName;
-var CommandEmpty = React22.forwardRef((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+var CommandEmpty = React23.forwardRef((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
   import_cmdk.Command.Empty,
   {
     ref,
@@ -4328,7 +4386,7 @@ var CommandEmpty = React22.forwardRef((props, ref) => /* @__PURE__ */ (0, import
   }
 ));
 CommandEmpty.displayName = import_cmdk.Command.Empty.displayName;
-var CommandGroup = React22.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+var CommandGroup = React23.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
   import_cmdk.Command.Group,
   {
     ref,
@@ -4340,7 +4398,7 @@ var CommandGroup = React22.forwardRef(({ className, ...props }, ref) => /* @__PU
   }
 ));
 CommandGroup.displayName = import_cmdk.Command.Group.displayName;
-var CommandSeparator = React22.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+var CommandSeparator = React23.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
   import_cmdk.Command.Separator,
   {
     ref,
@@ -4349,7 +4407,7 @@ var CommandSeparator = React22.forwardRef(({ className, ...props }, ref) => /* @
   }
 ));
 CommandSeparator.displayName = import_cmdk.Command.Separator.displayName;
-var CommandItem = React22.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+var CommandItem = React23.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
   import_cmdk.Command.Item,
   {
     ref,
@@ -4365,7 +4423,7 @@ var CommandShortcut = ({
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
     "span",
     {
       className: cn(
@@ -4379,7 +4437,7 @@ var CommandShortcut = ({
 CommandShortcut.displayName = "CommandShortcut";
 
 // src/controls/option-combobox.tsx
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 function OptionCombobox({
   value,
   onChange,
@@ -4413,7 +4471,7 @@ function OptionCombobox({
     setOpen(false);
     setQuery("");
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
     Popover,
     {
       open,
@@ -4425,7 +4483,7 @@ function OptionCombobox({
         }
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(PopoverTrigger, { asChild: true, disabled, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(PopoverTrigger, { asChild: true, disabled, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
           "button",
           {
             id,
@@ -4446,7 +4504,7 @@ function OptionCombobox({
             ),
             children: [
               hasValue && renderIcon?.(value),
-              /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
                 "span",
                 {
                   className: cn(
@@ -4455,22 +4513,22 @@ function OptionCombobox({
                   ),
                   children: [
                     hasValue ? getLabel(value) : placeholder,
-                    hint && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "ml-1.5 text-muted-foreground", children: hint })
+                    hint && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "ml-1.5 text-muted-foreground", children: hint })
                   ]
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(SelectChevron, { size: "sm", className: variant === "inline" ? "h-3 w-3" : void 0 })
+              /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(SelectChevron, { size: "sm", className: variant === "inline" ? "h-3 w-3" : void 0 })
             ]
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
           PopoverContent,
           {
             sizing: "content",
             align: "start",
             className: "p-0",
-            children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(Command, { shouldFilter: false, children: [
-              searchable && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(Command, { shouldFilter: false, children: [
+              searchable && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
                 CommandInput,
                 {
                   placeholder: searchPlaceholder,
@@ -4478,8 +4536,8 @@ function OptionCombobox({
                   onValueChange: setQuery
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(CommandList, { className: "max-h-72", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(CommandEmpty, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(CommandList, { className: "max-h-72", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(CommandEmpty, { children: [
                   "No match for \u201C",
                   query,
                   "\u201D."
@@ -4489,24 +4547,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_runtime29.jsx)(CommandGroup, { children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+                    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(CommandGroup, { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
                       CommandItem,
                       {
                         value: `__more_${gi}`,
                         onSelect: () => setShowMore(true),
                         className: "text-muted-foreground",
                         children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(ChevronRightIcon, { className: "h-3.5 w-3.5" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(ChevronRightIcon, { className: "h-3.5 w-3.5" }),
                           group.heading ?? "More",
-                          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "ml-auto type-secondary tabular-nums", children: group.options.length })
+                          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "ml-auto type-secondary tabular-nums", children: group.options.length })
                         ]
                       }
                     ) }, `g-${gi}`);
                   }
-                  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(CommandGroup, { heading: group.heading, children: visible.map((o) => {
+                  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(CommandGroup, { heading: group.heading, children: visible.map((o) => {
                     const selected = o === value;
                     const h = getHint?.(o);
-                    return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+                    return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
                       CommandItem,
                       {
                         value: o,
@@ -4514,11 +4572,11 @@ function OptionCombobox({
                         className: "gap-2",
                         children: [
                           renderIcon?.(o),
-                          /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("span", { className: "min-w-0 flex-1 truncate", children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("span", { className: "min-w-0 flex-1 truncate", children: [
                             getLabel(o),
-                            h && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "ml-1.5 text-muted-foreground", children: h })
+                            h && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "ml-1.5 text-muted-foreground", children: h })
                           ] }),
-                          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+                          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
                             CheckIcon,
                             {
                               className: cn(
@@ -4620,7 +4678,7 @@ function groupRatioOptions(options) {
 }
 
 // src/controls/aspect-ratio-select.tsx
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 function AspectRatioGlyph({
   value,
   className
@@ -4628,7 +4686,7 @@ function AspectRatioGlyph({
   const r = parseRatio(value);
   const box = 14;
   if (!r) {
-    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
       "span",
       {
         "aria-hidden": true,
@@ -4636,14 +4694,14 @@ function AspectRatioGlyph({
           "inline-flex h-3.5 w-3.5 shrink-0 items-center justify-center",
           className
         ),
-        children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "h-2.5 w-2.5 rounded-[2px] border border-dashed border-current opacity-60" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime31.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_runtime30.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
     "span",
     {
       "aria-hidden": true,
@@ -4651,7 +4709,7 @@ function AspectRatioGlyph({
         "inline-flex h-3.5 w-3.5 shrink-0 items-center justify-center",
         className
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
         "span",
         {
           className: "rounded-[2px] border-[1.5px] border-current opacity-80",
@@ -4678,7 +4736,7 @@ function AspectRatioSelect({
     { options: common },
     ...more.length ? [{ heading: "More ratios", options: more, collapsed: true }] : []
   ];
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
     OptionCombobox,
     {
       value,
@@ -4686,7 +4744,7 @@ function AspectRatioSelect({
       groups,
       getLabel: (o) => parseRatio(o) ? o : humanizeRatioWord(o),
       getHint: (o) => ratioShapeName(o),
-      renderIcon: (o) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(AspectRatioGlyph, { value: o, className: "text-muted-foreground" }),
+      renderIcon: (o) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(AspectRatioGlyph, { value: o, className: "text-muted-foreground" }),
       searchable: options.length > 12,
       searchPlaceholder: "Search ratios\u2026",
       placeholder,
@@ -4703,19 +4761,19 @@ function AspectRatioSelect({
 var import_react6 = require("react");
 
 // src/table.tsx
-var React23 = __toESM(require("react"), 1);
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var React24 = __toESM(require("react"), 1);
+var import_jsx_runtime32 = require("react/jsx-runtime");
 var TABLE_SIZES = {
   sm: { head: "px-2", cell: "p-2" },
   md: { head: "px-3", cell: "p-3" }
 };
-var TableSizeContext = React23.createContext("md");
+var TableSizeContext = React24.createContext("md");
 function useTableSize() {
-  return React23.useContext(TableSizeContext);
+  return React24.useContext(TableSizeContext);
 }
-var Table = React23.forwardRef(
+var Table = React24.forwardRef(
   ({ className, size = "md", wrap = true, wrapperClassName, ...props }, ref) => {
-    const table = /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+    const table = /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
       "table",
       {
         ref,
@@ -4725,7 +4783,7 @@ var Table = React23.forwardRef(
         ...props
       }
     );
-    return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(TableSizeContext.Provider, { value: size, children: wrap ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(TableSizeContext.Provider, { value: size, children: wrap ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
       "div",
       {
         "data-slot": "table-wrapper",
@@ -4736,7 +4794,7 @@ var Table = React23.forwardRef(
   }
 );
 Table.displayName = "Table";
-var TableHeader = React23.forwardRef(({ className, sticky = false, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+var TableHeader = React24.forwardRef(({ className, sticky = false, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
   "thead",
   {
     ref,
@@ -4750,7 +4808,7 @@ var TableHeader = React23.forwardRef(({ className, sticky = false, ...props }, r
   }
 ));
 TableHeader.displayName = "TableHeader";
-var TableBody = React23.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+var TableBody = React24.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
   "tbody",
   {
     ref,
@@ -4760,7 +4818,7 @@ var TableBody = React23.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   }
 ));
 TableBody.displayName = "TableBody";
-var TableFooter = React23.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+var TableFooter = React24.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
   "tfoot",
   {
     ref,
@@ -4773,7 +4831,7 @@ var TableFooter = React23.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 TableFooter.displayName = "TableFooter";
-var TableRow = React23.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+var TableRow = React24.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
   "tr",
   {
     ref,
@@ -4786,9 +4844,9 @@ var TableRow = React23.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   }
 ));
 TableRow.displayName = "TableRow";
-var TableHead = React23.forwardRef(({ className, ...props }, ref) => {
+var TableHead = React24.forwardRef(({ className, ...props }, ref) => {
   const size = useTableSize();
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
     "th",
     {
       ref,
@@ -4803,9 +4861,9 @@ var TableHead = React23.forwardRef(({ className, ...props }, ref) => {
   );
 });
 TableHead.displayName = "TableHead";
-var TableCell = React23.forwardRef(({ className, ...props }, ref) => {
+var TableCell = React24.forwardRef(({ className, ...props }, ref) => {
   const size = useTableSize();
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
     "td",
     {
       ref,
@@ -4820,7 +4878,7 @@ var TableCell = React23.forwardRef(({ className, ...props }, ref) => {
   );
 });
 TableCell.displayName = "TableCell";
-var TableCaption = React23.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+var TableCaption = React24.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
   "caption",
   {
     ref,
@@ -4871,7 +4929,7 @@ function isReactElementLike(value) {
 }
 
 // src/controls/configuration-fields.tsx
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_jsx_runtime33 = 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({
@@ -4928,8 +4986,8 @@ function FieldHelp({
       if (closeTimer.current) clearTimeout(closeTimer.current);
     };
   }, [id]);
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(Popover, { open, onOpenChange: changeOpen, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+  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)(
       "button",
       {
         ref: trigger,
@@ -4965,10 +5023,10 @@ function FieldHelp({
           event.preventDefault();
           changeOpen(true);
         },
-        children: triggerIcon ?? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(CircleHelpIcon, { className: "size-3.5", "aria-hidden": "true" })
+        children: triggerIcon ?? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(CircleHelpIcon, { className: "size-3.5", "aria-hidden": "true" })
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
       PopoverContent,
       {
         ref: content,
@@ -5003,11 +5061,11 @@ function FieldHelp({
         ),
         onOpenAutoFocus: (event) => event.preventDefault(),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex items-center justify-between gap-3", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "font-medium", children: label }),
-            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Button2, { variant: "quiet", icon: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(XIcon, {}), "aria-label": `Close help: ${label}`, onClick: () => changeOpen(false), className: "shrink-0" })
+          /* @__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_runtime32.jsx)("div", { className: "whitespace-pre-wrap break-words text-foreground", children })
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "whitespace-pre-wrap break-words text-foreground", children })
         ]
       }
     )
@@ -5033,7 +5091,7 @@ function StatusToken({
   label
 }) {
   const { Icon: Icon3, color, label: defaultLabel } = STATUS[status];
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
     "span",
     {
       className: cn(
@@ -5042,14 +5100,14 @@ function StatusToken({
         color
       ),
       children: [
-        Icon3 ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Icon3, { className: "size-3.5 shrink-0", "aria-hidden": "true" }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "break-words", children: label ?? defaultLabel })
+        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 })
       ]
     }
   );
 }
 function MissingTag({ children = "Not provided" }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
     "span",
     {
       "data-matrx-missing": "",
@@ -5060,18 +5118,18 @@ function MissingTag({ children = "Not provided" }) {
 }
 function RowHelp({ label, help }) {
   if (typeof help === "string" || typeof help === "number") {
-    return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime33.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_runtime32.jsx)(InfoIcon, { className: "size-3", "aria-hidden": "true" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(InfoIcon, { className: "size-3", "aria-hidden": "true" })
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(FieldHelp, { label, triggerIcon: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(InfoIcon, { className: "size-3", "aria-hidden": "true" }), children: help });
+  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 });
 }
 function isBlank(v) {
   return v === null || v === void 0 || v === false || v === "";
@@ -5103,7 +5161,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_runtime32.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
       "div",
       {
         "data-matrx-property-row": "inline",
@@ -5113,32 +5171,32 @@ function PropertyRow({
           className
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime32.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_runtime32.jsx)("span", { className: "break-words", children: label }),
-            help != null ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(RowHelp, { label, help }) : null
+          /* @__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_runtime32.jsxs)("div", { className: "flex min-w-0 flex-1 flex-wrap items-center gap-x-6 gap-y-1", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: cn("flex-1", valueClass), children: isMissing ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(MissingTag, { children: missingText }) : content }),
-            source != null || state != null ? /* @__PURE__ */ (0, import_jsx_runtime32.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_runtime32.jsxs)("span", { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "font-medium", children: "Source:" }),
+          /* @__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:" }),
                 " ",
                 source
               ] }) : null,
-              state != null ? /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("span", { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "font-medium", children: "State:" }),
+              state != null ? /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("span", { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "font-medium", children: "State:" }),
                 " ",
                 state
               ] }) : null
             ] }) : null,
-            meta != null ? /* @__PURE__ */ (0, import_jsx_runtime32.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_runtime33.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_runtime32.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
     "div",
     {
       "data-matrx-property-row": "stacked",
@@ -5149,7 +5207,7 @@ function PropertyRow({
         className
       ),
       children: [
-        margin ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "flex h-4 items-center", children: expandable ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+        margin ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "flex h-4 items-center", children: expandable ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
           "button",
           {
             type: "button",
@@ -5157,15 +5215,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_runtime32.jsx)(ChevronDownIcon, { className: "size-3.5", "aria-hidden": "true" }) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ChevronRightIcon, { className: "size-3.5", "aria-hidden": "true" })
+            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" })
           }
         ) : null }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex h-4 min-w-0 items-center gap-1.5", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "truncate type-label leading-4", children: label }),
-          help != null ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(RowHelp, { label, help }) : null,
-          meta != null ? /* @__PURE__ */ (0, import_jsx_runtime32.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.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_runtime32.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
           "div",
           {
             className: cn(
@@ -5174,7 +5232,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_runtime32.jsx)(MissingTag, { children: missingText }) : expandable && open ? expanded : expandable ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+            children: isMissing ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(MissingTag, { children: missingText }) : expandable && open ? expanded : expandable ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
               "button",
               {
                 type: "button",
@@ -5182,7 +5240,7 @@ function PropertyRow({
                 className: cn("block max-w-full truncate text-left", valueClass, focusRing),
                 children: content
               }
-            ) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: valueClass, children: content })
+            ) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: valueClass, children: content })
           }
         )
       ]
@@ -5193,9 +5251,9 @@ function ConfigurationValueList({
   label,
   entries
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime32.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_runtime32.jsxs)("div", { className: "min-w-0 p-3", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("dt", { className: "mb-2 break-words font-semibold", children: entry.label }),
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("dd", { className: "min-w-0 [overflow-wrap:anywhere]", children: entry.value })
+  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 })
   ] }, entry.key)) });
 }
 function ConfigurationTable({
@@ -5203,7 +5261,7 @@ function ConfigurationTable({
   columns,
   children
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "min-w-0 rounded-lg border border-border bg-card", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+  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)(
     Table,
     {
       size: "sm",
@@ -5211,19 +5269,19 @@ function ConfigurationTable({
       "aria-label": label,
       className: cn("matrx-config-table", "type-body text-foreground"),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(TableHeader, { className: "matrx-config-head", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(TableRow, { className: "bg-accent/40 hover:bg-accent/40", children: columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+        /* @__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)(
           TableHead,
           {
             scope: "col",
             className: "whitespace-normal align-middle font-semibold text-foreground",
-            children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("span", { className: "matrx-config-heading", children: [
+            children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("span", { className: "matrx-config-heading", children: [
               column.label,
-              column.help ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(FieldHelp, { label: column.label, children: column.help }) : null
+              column.help ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(FieldHelp, { label: column.label, children: column.help }) : null
             ] })
           },
           column.key
         )) }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(TableBody, { className: "matrx-config-body", children })
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(TableBody, { className: "matrx-config-body", children })
       ]
     }
   ) });
@@ -5232,16 +5290,16 @@ function ConfigurationTableRow({
   columns,
   cells
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
     TableRow,
     {
       className: cn("matrx-config-row", "border-b border-border last:border-b-0"),
-      children: columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+      children: columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
         TableCell,
         {
           className: cn("matrx-config-cell", "min-w-0 whitespace-normal align-middle"),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
               "span",
               {
                 className: cn(
@@ -5251,11 +5309,11 @@ function ConfigurationTableRow({
                 children: [
                   column.label,
                   ":",
-                  column.help ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(FieldHelp, { label: column.label, children: column.help }) : null
+                  column.help ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(FieldHelp, { label: column.label, children: column.help }) : null
                 ]
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "matrx-config-cell-content", children: cells[column.key] ?? "Not specified" })
+            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "matrx-config-cell-content", children: cells[column.key] ?? "Not specified" })
           ]
         },
         column.key
@@ -5265,7 +5323,7 @@ function ConfigurationTableRow({
 }
 
 // src/indicator-strip.tsx
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 var TONE = {
   danger: "text-destructive",
   warning: "text-warning",
@@ -5278,7 +5336,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_runtime33.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
     "span",
     {
       "data-slot": "indicator-strip",
@@ -5288,7 +5346,7 @@ function IndicatorStrip({ items, className, ...props }) {
       children: items.map((item) => {
         const Icon3 = item.icon;
         const text = indicatorText(item);
-        return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
           "span",
           {
             role: "listitem",
@@ -5301,7 +5359,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_runtime33.jsx)(Icon3, { className: "size-3.5", "aria-hidden": true })
+            children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Icon3, { className: "size-3.5", "aria-hidden": true })
           },
           item.id
         );
@@ -5311,7 +5369,7 @@ function IndicatorStrip({ items, className, ...props }) {
 }
 
 // src/controls/middle-truncate.tsx
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_jsx_runtime35 = require("react/jsx-runtime");
 var DEFAULT_TAIL = 10;
 function splitForMiddleTruncate(text, tail = DEFAULT_TAIL) {
   const keep = Math.min(tail, Math.floor(text.length / 2));
@@ -5324,15 +5382,15 @@ function MiddleTruncate({
   className
 }) {
   const { head, end } = splitForMiddleTruncate(text, tail);
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("span", { className: cn("flex min-w-0 items-baseline", className), title: text, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "sr-only", children: text }),
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { "aria-hidden": true, className: "min-w-0 truncate whitespace-pre", children: head }),
-    end ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { "aria-hidden": true, className: "shrink-0 whitespace-pre", children: end }) : null
+  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
   ] });
 }
 
 // src/controls/callout-banner.tsx
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_jsx_runtime36 = 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" },
@@ -5350,7 +5408,7 @@ function CalloutBanner({
   className
 }) {
   const t = TONE2[tone2];
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
     "div",
     {
       className: cn(
@@ -5360,16 +5418,16 @@ function CalloutBanner({
       ),
       role: "status",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex min-w-0 flex-1 items-start gap-2", children: [
-          Icon3 && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Icon3, { className: cn("mt-0.5 h-4 w-4 shrink-0", t.icon), "aria-hidden": true }),
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "min-w-0", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: "type-title text-foreground", children: title }),
-            description && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: "mt-0.5 type-secondary text-muted-foreground", children: description })
+        /* @__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_runtime35.jsxs)("div", { className: "flex shrink-0 items-center gap-1.5 sm:ml-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex shrink-0 items-center gap-1.5 sm:ml-2", children: [
           actions,
-          onDismiss && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Button2, { variant: "quiet", icon: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(XIcon, {}), "aria-label": "Dismiss", onClick: onDismiss, disabled: dismissing })
+          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 })
         ] })
       ]
     }
@@ -5377,8 +5435,8 @@ function CalloutBanner({
 }
 
 // src/controls/gated-action-button.tsx
-var React24 = __toESM(require("react"), 1);
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var React25 = __toESM(require("react"), 1);
+var import_jsx_runtime37 = require("react/jsx-runtime");
 function firstBlockingReason(checks) {
   for (const check of checks) {
     if (check && check.when) return check.reason;
@@ -5394,10 +5452,10 @@ function GatedActionButton({
   children,
   ...buttonProps
 }) {
-  const reactId = React24.useId();
+  const reactId = React25.useId();
   const blocked = Boolean(reason && reason.trim());
   const reasonId = `gated-action-reason-${reactId}`;
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
     "span",
     {
       className: cn(
@@ -5405,7 +5463,7 @@ function GatedActionButton({
         wrapperClassName
       ),
       children: [
-        blocked ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+        blocked ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
           "span",
           {
             id: reasonId,
@@ -5418,7 +5476,7 @@ function GatedActionButton({
             children: reason
           }
         ) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
           Button,
           {
             ...buttonProps,
@@ -5436,7 +5494,7 @@ GatedActionButton.displayName = "GatedActionButton";
 
 // src/controls/search-input.tsx
 var import_react7 = require("react");
-var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 function SearchInput({
   value,
   defaultValue = "",
@@ -5492,21 +5550,21 @@ function SearchInput({
     onSearch?.("");
     inputRef.current?.focus();
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
     "form",
     {
       onSubmit: handleSubmit,
       className: cn("flex min-w-0 items-center gap-2", className),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "relative min-w-0 flex-1", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "relative min-w-0 flex-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime38.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_runtime37.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
             Input,
             {
               ref: inputRef,
@@ -5520,7 +5578,7 @@ function SearchInput({
               adornment: showClearButton && searchValue ? "both" : "start"
             }
           ),
-          showClearButton && searchValue ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+          showClearButton && searchValue ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
             "button",
             {
               type: "button",
@@ -5528,14 +5586,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_runtime37.jsx)(XIcon, { className: "h-3.5 w-3.5" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(XIcon, { className: "h-3.5 w-3.5" })
             }
           ) : null
         ] }),
-        showSubmitButton ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+        showSubmitButton ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
           Button2,
           {
-            icon: loading ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Loader2Icon, { className: "animate-spin" }) : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(SearchIcon, {}),
+            icon: loading ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Loader2Icon, { className: "animate-spin" }) : /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(SearchIcon, {}),
             variant: "primary",
             type: "submit",
             disabled: disabled || loading,
@@ -5553,22 +5611,22 @@ var import_react8 = require("react");
 
 // src/tooltip.tsx
 var TooltipPrimitive = __toESM(require("@radix-ui/react-tooltip"), 1);
-var React26 = __toESM(require("react"), 1);
-var import_jsx_runtime38 = require("react/jsx-runtime");
+var React27 = __toESM(require("react"), 1);
+var import_jsx_runtime39 = require("react/jsx-runtime");
 function TooltipProvider({ titleTooltips = true, disableHoverableContent = false, ...props }) {
-  React26.useEffect(() => {
+  React27.useEffect(() => {
     if (!titleTooltips) return;
     return acquireTitleTooltips();
   }, [titleTooltips]);
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(TooltipPrimitive.Provider, { ...props, disableHoverableContent });
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(TooltipPrimitive.Provider, { ...props, disableHoverableContent });
 }
-var TriggerContext = React26.createContext(null);
+var TriggerContext = React27.createContext(null);
 var Tooltip = ({ onOpenChange, ...props }) => {
-  const ref = React26.useRef(null);
-  const [open, setOpen] = React26.useState(Boolean(props.open ?? props.defaultOpen));
+  const ref = React27.useRef(null);
+  const [open, setOpen] = React27.useState(Boolean(props.open ?? props.defaultOpen));
   const shown = props.open ?? open;
-  const value = React26.useMemo(() => ({ ref, open: shown }), [shown]);
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(TriggerContext.Provider, { value, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+  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)(
     TooltipPrimitive.Root,
     {
       ...props,
@@ -5580,9 +5638,9 @@ var Tooltip = ({ onOpenChange, ...props }) => {
   ) });
 };
 Tooltip.displayName = "Tooltip";
-var TooltipTrigger = React26.forwardRef((props, ref) => {
-  const trigger = React26.useContext(TriggerContext);
-  const setRef = React26.useCallback(
+var TooltipTrigger = React27.forwardRef((props, ref) => {
+  const trigger = React27.useContext(TriggerContext);
+  const setRef = React27.useCallback(
     (node) => {
       if (trigger) trigger.ref.current = node;
       if (typeof ref === "function") ref(node);
@@ -5590,14 +5648,14 @@ var TooltipTrigger = React26.forwardRef((props, ref) => {
     },
     [trigger, ref]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(TooltipPrimitive.Trigger, { ref: setRef, ...{ [TOOLTIP_TRIGGER_ATTR]: "" }, ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(TooltipPrimitive.Trigger, { ref: setRef, ...{ [TOOLTIP_TRIGGER_ATTR]: "" }, ...props });
 });
 TooltipTrigger.displayName = TooltipPrimitive.Trigger.displayName;
-var TooltipContent = React26.forwardRef(({ className, side, fallbackSide, sideOffset = 4, collisionPadding = TOOLTIP_EDGE_PX, container, animated = true, children, style, ...props }, ref) => {
+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 = React26.useContext(TriggerContext);
+  const trigger = React27.useContext(TriggerContext);
   const placed = side ?? (trigger?.open ? tooltipSide(trigger.ref.current, fallbackSide) : fallbackSide ?? "top");
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(TooltipPrimitive.Portal, { container: resolved ?? null, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(TooltipPrimitive.Portal, { container: resolved ?? null, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
     TooltipPrimitive.Content,
     {
       ref,
@@ -5620,7 +5678,7 @@ var TooltipContent = React26.forwardRef(({ className, side, fallbackSide, sideOf
 TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 
 // src/controls/collapsible-text.tsx
-var import_jsx_runtime39 = require("react/jsx-runtime");
+var import_jsx_runtime40 = require("react/jsx-runtime");
 function CollapsibleText({
   children,
   expanded,
@@ -5654,8 +5712,8 @@ function CollapsibleText({
   }, [children, collapsedLines]);
   const isCollapsed = isOverflowing && !expanded;
   if (showLabel) {
-    return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "relative min-w-0", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "relative min-w-0", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
         "div",
         {
           ref: contentRef,
@@ -5668,7 +5726,7 @@ function CollapsibleText({
           children
         }
       ),
-      isOverflowing ? /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
+      isOverflowing ? /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
         "button",
         {
           type: "button",
@@ -5679,15 +5737,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_runtime39.jsx)(ChevronDownIcon, { className: "h-3.5 w-3.5", "aria-hidden": true }) : /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(ChevronUpIcon, { className: "h-3.5 w-3.5", "aria-hidden": true }),
+            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 ? expandLabel : collapseLabel
           ]
         }
       ) : null
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "relative min-w-0", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "relative min-w-0", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
       "div",
       {
         ref: contentRef,
@@ -5700,10 +5758,10 @@ function CollapsibleText({
         children
       }
     ),
-    isCollapsed ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "pointer-events-none absolute inset-x-0 bottom-0 flex justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+    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)(
       Button2,
       {
-        icon: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(ChevronDownIcon, {}),
+        icon: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(ChevronDownIcon, {}),
         type: "button",
         variant: "outline",
         "aria-label": expandLabel,
@@ -5714,10 +5772,10 @@ function CollapsibleText({
         },
         className: "pointer-events-auto"
       }
-    ) }) : isOverflowing ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "flex justify-center pt-0.5", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+    ) }) : isOverflowing ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "flex justify-center pt-0.5", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
       Button2,
       {
-        icon: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(ChevronUpIcon, {}),
+        icon: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(ChevronUpIcon, {}),
         type: "button",
         variant: "quiet",
         "aria-label": collapseLabel,
@@ -5737,12 +5795,12 @@ function CollapsibleTextGroupControls({
   anyExpanded,
   disabled = false
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "flex items-center gap-0.5", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(Tooltip, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+  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)(
         Button2,
         {
-          icon: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(ChevronsDownIcon, { className: "!size-[18px] lg:!size-3.5" }),
+          icon: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(ChevronsDownIcon, { className: "!size-[18px] lg:!size-3.5" }),
           type: "button",
           variant: "quiet",
           "aria-label": "Expand all",
@@ -5750,13 +5808,13 @@ function CollapsibleTextGroupControls({
           disabled: disabled || allExpanded
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(TooltipContent, { side: "top", children: "Expand all" })
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(TooltipContent, { side: "top", children: "Expand all" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(Tooltip, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(Tooltip, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
         Button2,
         {
-          icon: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(ChevronsUpIcon, { className: "!size-[18px] lg:!size-3.5" }),
+          icon: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(ChevronsUpIcon, { className: "!size-[18px] lg:!size-3.5" }),
           type: "button",
           variant: "quiet",
           "aria-label": "Collapse all",
@@ -5764,14 +5822,14 @@ function CollapsibleTextGroupControls({
           disabled: disabled || !anyExpanded
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(TooltipContent, { side: "top", children: "Collapse all" })
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(TooltipContent, { side: "top", children: "Collapse all" })
     ] })
   ] });
 }
 
 // src/controls/info-hint.tsx
 var import_react9 = require("react");
-var import_jsx_runtime40 = require("react/jsx-runtime");
+var import_jsx_runtime41 = require("react/jsx-runtime");
 var COARSE_POINTER_QUERY = "(pointer: coarse)";
 function subscribeCoarse(onChange) {
   const mq = window.matchMedia(COARSE_POINTER_QUERY);
@@ -5795,10 +5853,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_runtime40.jsx)(InfoIcon, { "aria-hidden": true, className: "h-3.5 w-3.5", strokeWidth: 2 });
+  const glyph = /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(InfoIcon, { "aria-hidden": true, className: "h-3.5 w-3.5", strokeWidth: 2 });
   if (coarse || isMobile) {
-    return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(Popover, { open, onOpenChange: setOpen, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+    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)(
         "button",
         {
           type: "button",
@@ -5812,7 +5870,7 @@ function InfoHint({ text, label = "More info", className, side = "top" }) {
           children: glyph
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
         PopoverContent,
         {
           side,
@@ -5829,8 +5887,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_runtime40.jsx)(TooltipProvider, { delayDuration: 200, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(Tooltip, { open, onOpenChange: setOpen, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+    /* @__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)(
         "button",
         {
           type: "button",
@@ -5846,13 +5904,13 @@ function InfoHint({ text, label = "More info", className, side = "top" }) {
           children: glyph
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(TooltipContent, { side, className: CONTENT_CLASS, onClick: isolate, children: text })
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(TooltipContent, { side, className: CONTENT_CLASS, onClick: isolate, children: text })
     ] }) })
   );
 }
 
 // src/controls/status-badge.tsx
-var import_jsx_runtime41 = require("react/jsx-runtime");
+var import_jsx_runtime42 = 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",
@@ -5868,7 +5926,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_runtime41.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
     "span",
     {
       role: "status",
@@ -5884,7 +5942,7 @@ function StatusBadge({ label, tone: tone2, icon: Icon3, size = "md", title, trai
         className
       ),
       children: [
-        Icon3 ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Icon3, { "aria-hidden": true, className: cn("shrink-0", s.icon) }) : null,
+        Icon3 ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Icon3, { "aria-hidden": true, className: cn("shrink-0", s.icon) }) : null,
         label,
         trailing
       ]
@@ -5893,8 +5951,8 @@ function StatusBadge({ label, tone: tone2, icon: Icon3, size = "md", title, trai
 }
 
 // src/controls/structured-section-card.tsx
-var React27 = __toESM(require("react"), 1);
-var import_jsx_runtime42 = require("react/jsx-runtime");
+var React28 = __toESM(require("react"), 1);
+var import_jsx_runtime43 = require("react/jsx-runtime");
 var TITLE_TONE = {
   primary: "text-primary-ink",
   foreground: "text-foreground"
@@ -5911,24 +5969,24 @@ function StructuredSectionCard({
   className
 }) {
   const hasFooter = footerLeft || footerCenter || footerRight;
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime43.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_runtime42.jsxs)("div", { className: "flex items-center justify-between border-b border-border bg-muted px-4 py-3", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "min-w-0", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("h3", { className: cn("font-medium", TITLE_TONE[titleTone]), children: title }),
-            description && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("p", { className: "type-body text-muted-foreground", children: description })
+        /* @__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 })
           ] }),
-          headerActions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "ml-4 flex shrink-0 items-center space-x-2", children: headerActions.map((action, index) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(React27.Fragment, { children: action }, index)) })
+          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)) })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "p-4", children }),
-        hasFooter && /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex flex-wrap items-center border-t border-border px-4 py-3", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "flex min-w-[33%] flex-1 justify-start space-x-2 sm:min-w-0", children: footerLeft }),
-          /* @__PURE__ */ (0, import_jsx_runtime42.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_runtime42.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_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 })
         ] })
       ]
     }
@@ -5936,7 +5994,7 @@ function StructuredSectionCard({
 }
 
 // src/controls/icon-dropdown-menu.tsx
-var import_jsx_runtime43 = require("react/jsx-runtime");
+var import_jsx_runtime44 = require("react/jsx-runtime");
 function IconDropdownMenu({
   options,
   value,
@@ -5951,21 +6009,21 @@ function IconDropdownMenu({
     console.warn("IconDropdownMenu: no option to show \u2014 pass at least one option.");
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(DropdownMenu, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+  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)(
       Button2,
       {
-        icon: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(SelectedIcon, {}),
-        iconEnd: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(ChevronDownIcon, {}),
+        icon: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(SelectedIcon, {}),
+        iconEnd: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(ChevronDownIcon, {}),
         variant: "outline",
         "aria-label": selected.label,
         ...className ? { className } : {}
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(DropdownMenuContent, { align, className: cn("rounded-2xl p-1", menuWidth), children: options.map((option) => {
+    /* @__PURE__ */ (0, import_jsx_runtime44.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_runtime43.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
         DropdownMenuItem,
         {
           onClick: () => onValueChange(option.value),
@@ -5975,9 +6033,9 @@ function IconDropdownMenu({
             isSelected && "bg-primary/10"
           ),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(OptionIcon, { className: cn("h-4 w-4 shrink-0", isSelected ? "text-primary-ink" : "text-muted-foreground") }),
-            /* @__PURE__ */ (0, import_jsx_runtime43.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_runtime43.jsx)(CheckIcon, { className: "h-4 w-4 shrink-0 text-primary-ink" })
+            /* @__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" })
           ]
         },
         String(option.value)
@@ -5987,23 +6045,23 @@ function IconDropdownMenu({
 }
 
 // src/error-box.tsx
-var React28 = __toESM(require("react"), 1);
-var import_jsx_runtime44 = require("react/jsx-runtime");
+var React29 = __toESM(require("react"), 1);
+var import_jsx_runtime45 = 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] = React28.createContext(null));
+var ErrorActionsContext = registry2[CONTEXT_KEY] ?? (registry2[CONTEXT_KEY] = React29.createContext(null));
 var MENUS_KEY = /* @__PURE__ */ Symbol.for("@ai-matrx/design-system/error-card-menus");
 var menusRegistry = globalThis;
-var ErrorCardMenusContext = menusRegistry[MENUS_KEY] ?? (menusRegistry[MENUS_KEY] = React28.createContext(null));
+var ErrorCardMenusContext = menusRegistry[MENUS_KEY] ?? (menusRegistry[MENUS_KEY] = React29.createContext(null));
 function useErrorActions() {
-  return React28.useContext(ErrorActionsContext);
+  return React29.useContext(ErrorActionsContext);
 }
 function ErrorActions(props) {
   const render = useErrorActions();
   if (!render) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_jsx_runtime44.Fragment, { children: render(props) });
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_jsx_runtime45.Fragment, { children: render(props) });
 }
-var ErrorBox = React28.forwardRef(function ErrorBox2({
+var ErrorBox = React29.forwardRef(function ErrorBox2({
   as = "p",
   message,
   title,
@@ -6025,17 +6083,17 @@ var ErrorBox = React28.forwardRef(function ErrorBox2({
     ...unsavedInput !== void 0 ? { unsavedInput } : {},
     ...origin !== void 0 ? { origin } : {}
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(Tag, { ref, role: "alert", "data-error-box": "", ...rest, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(Tag, { ref, role: "alert", "data-error-box": "", ...rest, children: [
     children ?? message,
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(ErrorActions, { ...facts })
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(ErrorActions, { ...facts })
   ] });
 });
 
 // src/label.tsx
 var LabelPrimitive = __toESM(require("@radix-ui/react-label"), 1);
-var React29 = __toESM(require("react"), 1);
-var import_jsx_runtime45 = require("react/jsx-runtime");
-var Label3 = React29.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+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)(
   LabelPrimitive.Root,
   {
     ref,
@@ -6049,7 +6107,7 @@ var Label3 = React29.forwardRef(({ className, ...props }, ref) => /* @__PURE__ *
 Label3.displayName = LabelPrimitive.Root.displayName;
 
 // src/controls/field.tsx
-var import_jsx_runtime46 = require("react/jsx-runtime");
+var import_jsx_runtime47 = require("react/jsx-runtime");
 function LabeledField({
   label,
   htmlFor,
@@ -6068,9 +6126,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_runtime46.jsxs)("div", { "data-field-root": "", className: cn("group/field space-y-1.5", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "flex items-center gap-1.5", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
+  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)(
         Label3,
         {
           htmlFor,
@@ -6080,27 +6138,27 @@ function LabeledField({
           ),
           children: [
             label,
-            required && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "text-destructive ml-1", "aria-hidden": true, children: "*" }),
-            !required && optional && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "text-muted-foreground ml-1.5 type-secondary font-normal", children: "(optional)" })
+            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)" })
           ]
         }
       ),
-      typeof help === "string" && help && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(InfoHint, { text: help, label: typeof label === "string" ? `About ${label}` : "Help" }),
-      help && typeof help !== "string" && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(TooltipProvider, { delayDuration: 150, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(Tooltip, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+      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)(
           "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_runtime46.jsx)(CircleHelpIcon, { className: "h-3.5 w-3.5" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(CircleHelpIcon, { className: "h-3.5 w-3.5" })
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(TooltipContent, { side: "top", className: "max-w-xs type-secondary", children: help })
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(TooltipContent, { side: "top", className: "max-w-xs type-secondary", children: help })
       ] }) })
     ] }),
-    description && !error && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("p", { className: "type-secondary text-muted-foreground", children: description }),
-    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+    description && !error && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("p", { className: "type-secondary text-muted-foreground", children: description }),
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
       "div",
       {
         "data-slot": "field-control",
@@ -6111,7 +6169,7 @@ function LabeledField({
         children
       }
     ),
-    (error || hasCounter || requiredEmpty) && /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
+    (error || hasCounter || requiredEmpty) && /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
       "div",
       {
         className: cn(
@@ -6123,10 +6181,10 @@ function LabeledField({
           !error && !hasCounter && "hidden [[data-field-root]:has(:placeholder-shown)_&]:flex"
         ),
         children: [
-          error ? /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("p", { className: "type-secondary text-destructive flex items-center gap-1", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(CircleAlertIcon, { className: "h-3 w-3 flex-shrink-0" }),
-            /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { children: error }),
-            /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+          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)(
               ErrorActions,
               {
                 ...typeof error === "string" ? { message: error } : {},
@@ -6134,18 +6192,18 @@ function LabeledField({
                 origin: "design-system/LabeledField"
               }
             )
-          ] }) : requiredEmpty ? /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
+          ] }) : requiredEmpty ? /* @__PURE__ */ (0, import_jsx_runtime47.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_runtime46.jsx)(CircleAlertIcon, { className: "h-3 w-3 flex-shrink-0" }),
-                /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { children: "Empty \u2014 the gray text is an example, not your answer." })
+                /* @__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_runtime46.jsx)("span", {}),
-          hasCounter && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+          ) : /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", {}),
+          hasCounter && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
             "span",
             {
               className: cn(
@@ -6166,10 +6224,10 @@ function LabeledField({
 var import_clipboard = require("@ai-matrx/kit/clipboard");
 var import_clipboard_fallback_opener = require("@ai-matrx/kit/clipboard-fallback-opener");
 var import_notify = require("@ai-matrx/kit/notify");
-var React30 = __toESM(require("react"), 1);
+var React31 = __toESM(require("react"), 1);
 var import_react_dom = require("react-dom");
-var import_jsx_runtime47 = require("react/jsx-runtime");
-var { useState: useState17, useLayoutEffect: useLayoutEffect4, useRef: useRef12 } = React30;
+var import_jsx_runtime48 = require("react/jsx-runtime");
+var { useState: useState17, useLayoutEffect: useLayoutEffect4, useRef: useRef12 } = React31;
 function HelpIcon({
   text,
   content,
@@ -6267,13 +6325,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_runtime47.jsxs)(React30.Fragment, { children: [
-      index > 0 && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("br", {}),
+    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", {}),
       line
     ] }, index));
   };
   if (!text && !content) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
     "div",
     {
       className: `inline-block relative cursor-help ${className}`,
@@ -6281,9 +6339,9 @@ function HelpIcon({
       onMouseEnter: showTooltip,
       onMouseLeave: hideTooltip,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(InfoIcon, { className: "h-4 w-4 text-muted-foreground transition-colors duration-200" }),
+        /* @__PURE__ */ (0, import_jsx_runtime48.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_runtime47.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
             "div",
             {
               ref: tooltipRef,
@@ -6296,29 +6354,29 @@ function HelpIcon({
               onMouseEnter: cancelHideTooltip,
               onMouseLeave: hideTooltip,
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "p-3", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "flex items-center gap-2 mb-2", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(CircleHelpIcon, { className: "h-4 w-4 flex-shrink-0 text-info-ink" }),
-                    title && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("h3", { className: "text-foreground type-title", children: title }),
-                    text && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+                /* @__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)(
                       Button2,
                       {
                         variant: "quiet",
                         className: "ml-auto",
-                        icon: copied ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(CheckIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(CopyIcon, {}),
+                        icon: copied ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(CheckIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(CopyIcon, {}),
                         "aria-label": "Copy to clipboard",
                         onClick: handleCopy
                       }
                     )
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "type-body text-foreground leading-relaxed", children: content ? content : text && formatTextWithLineBreaks(text) }),
-                  required && /* @__PURE__ */ (0, import_jsx_runtime47.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_runtime47.jsx)("div", { className: "w-1.5 h-1.5 bg-warning-ink rounded-full" }),
+                  /* @__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" }),
                     "Required Field"
                   ] }),
-                  onAiAssistance && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Button2, { variant: "primary", icon: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(CircleDotIcon, {}), className: "mt-3 w-full", onClick: handleAiClick, children: "Get Help From Matrx AI" })
+                  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" })
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime47.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_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" })
               ]
             }
           ),
@@ -6333,8 +6391,8 @@ function HelpIcon({
 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 React31 = __toESM(require("react"), 1);
-var import_jsx_runtime48 = require("react/jsx-runtime");
+var React32 = __toESM(require("react"), 1);
+var import_jsx_runtime49 = require("react/jsx-runtime");
 function cleanUrl(url) {
   try {
     const parsed = new URL(url);
@@ -6359,9 +6417,9 @@ function TextArrayInput({
   shouldCleanUrl = false,
   auxiliaryControlsTabIndex
 }) {
-  const [internalValue, setInternalValue] = React31.useState([]);
-  const [inputValue, setInputValue] = React31.useState("");
-  const [copied, setCopied] = React31.useState(false);
+  const [internalValue, setInternalValue] = React32.useState([]);
+  const [inputValue, setInputValue] = React32.useState("");
+  const [copied, setCopied] = React32.useState(false);
   const value = externalValue || internalValue;
   const tabIndexProp = auxiliaryControlsTabIndex === void 0 ? {} : { tabIndex: auxiliaryControlsTabIndex };
   const handleCopy = async () => {
@@ -6390,9 +6448,9 @@ function TextArrayInput({
     handleChange([...value, ...added]);
     setInputValue("");
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: `space-y-3 ${className}`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("form", { onSubmit: handleSubmit, className: "relative w-full", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+  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)(
         Input,
         {
           adornment: "end",
@@ -6406,12 +6464,12 @@ function TextArrayInput({
           className: "w-full"
         }
       ),
-      showCopyIcon && value.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+      showCopyIcon && value.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
         Button2,
         {
           ...tabIndexProp,
           variant: "quiet",
-          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, {}),
           ...copied ? { glyphTone: "success" } : {},
           "aria-label": "Copy values",
           onClick: handleCopy,
@@ -6419,13 +6477,13 @@ function TextArrayInput({
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "flex flex-wrap gap-2", children: value.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime48.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_runtime48.jsxs)(
+    /* @__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)(
       "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_runtime48.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
             "button",
             {
               ...tabIndexProp,
@@ -6436,7 +6494,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_runtime48.jsx)(XIcon, { className: "h-3.5 w-3.5" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(XIcon, { className: "h-3.5 w-3.5" })
             }
           )
         ]
@@ -6447,7 +6505,7 @@ function TextArrayInput({
 }
 
 // src/host-link.tsx
-var React32 = __toESM(require("react"), 1);
+var React33 = __toESM(require("react"), 1);
 
 // src/stand-in-notice.ts
 var announced = /* @__PURE__ */ new Set();
@@ -6465,21 +6523,21 @@ function getTapTargetLinkComponent() {
 }
 
 // src/host-link.tsx
-var import_jsx_runtime49 = require("react/jsx-runtime");
-var HostLink = React32.forwardRef(function HostLink2({ href, prefetch, ...rest }, ref) {
+var import_jsx_runtime50 = require("react/jsx-runtime");
+var HostLink = React33.forwardRef(function HostLink2({ href, prefetch, ...rest }, ref) {
   const Registered = getTapTargetLinkComponent();
   if (Registered) {
-    return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Registered, { ref, href, ...prefetch === void 0 ? {} : { prefetch }, ...rest });
+    return /* @__PURE__ */ (0, import_jsx_runtime50.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_runtime49.jsx)("a", { ref, href, "data-link-host": UNCONFIGURED, ...rest });
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("a", { ref, href, "data-link-host": UNCONFIGURED, ...rest });
 });
 
 // src/read-state/untrusted-count.tsx
-var import_jsx_runtime50 = require("react/jsx-runtime");
+var import_jsx_runtime51 = require("react/jsx-runtime");
 function countReadState(input) {
   const { read, trustworthy } = input;
   if (trustworthy === false) return "failed";
@@ -6496,7 +6554,7 @@ function unavailableCountLabel(label) {
 }
 
 // src/controls/kpi-tile.tsx
-var import_jsx_runtime51 = require("react/jsx-runtime");
+var import_jsx_runtime52 = require("react/jsx-runtime");
 var TONE_VALUE = {
   neutral: "text-foreground",
   good: "text-success-ink",
@@ -6519,7 +6577,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_runtime51.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
     "svg",
     {
       viewBox: `0 0 ${SPARK_W} ${SPARK_H}`,
@@ -6528,9 +6586,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_runtime51.jsx)("title", { children: `${trend.label ?? label}, last ${trend.period}` }),
-        max === min ? null : /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("polygon", { points: `0,${SPARK_H} ${pts} ${SPARK_W},${SPARK_H}`, fill: "currentColor", fillOpacity: 0.15 }),
-        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("polyline", { points: pts, fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinejoin: "round", vectorEffect: "non-scaling-stroke" })
+        /* @__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" })
       ]
     }
   );
@@ -6552,19 +6610,19 @@ function KpiTile({
   const failed = readState === "failed";
   const shown = failed ? null : value;
   const dot = TONE_DOT[tone2];
-  const body = /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_jsx_runtime51.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime51.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_runtime51.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_runtime51.jsxs)("span", { className: "line-clamp-2 break-words", children: [
+  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: [
         label,
-        title ? /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_jsx_runtime51.Fragment, { children: [
+        title ? /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(import_jsx_runtime52.Fragment, { children: [
           " ",
-          /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(InfoHint, { text: title, label: `What ${label} means` })
+          /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(InfoHint, { text: title, label: `What ${label} means` })
         ] }) : null
       ] })
     ] }),
-    loading ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "my-0.5 h-6 w-12 animate-pulse rounded bg-muted", "aria-hidden": true }) : /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "flex min-w-0 items-end justify-between gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+    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)(
         "div",
         {
           className: cn(
@@ -6576,16 +6634,16 @@ function KpiTile({
           children: shown === null ? "\u2014" : shown
         }
       ),
-      trend && shown !== null ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(KpiSparkline, { trend, label }) : null
+      trend && shown !== null ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(KpiSparkline, { trend, label }) : null
     ] }),
-    hint ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "truncate type-meta text-muted-foreground", children: hint }) : null
+    hint ? /* @__PURE__ */ (0, import_jsx_runtime52.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_runtime51.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
       HostLink,
       {
         href,
@@ -6598,13 +6656,13 @@ function KpiTile({
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: shell, "data-look-surface": "card", "aria-busy": loading || void 0, children: body });
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: shell, "data-look-surface": "card", "aria-busy": loading || void 0, children: body });
 }
 function KpiGrid({
   children,
   className
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
     "div",
     {
       className: cn(
@@ -6617,8 +6675,8 @@ function KpiGrid({
 }
 
 // src/controls/action-feedback-button.tsx
-var React33 = __toESM(require("react"), 1);
-var import_jsx_runtime52 = require("react/jsx-runtime");
+var React34 = __toESM(require("react"), 1);
+var import_jsx_runtime53 = require("react/jsx-runtime");
 function ActionFeedbackButton({
   icon,
   tooltip,
@@ -6632,9 +6690,9 @@ function ActionFeedbackButton({
   disabled = false,
   ...props
 }) {
-  const [showSuccess, setShowSuccess] = React33.useState(false);
-  const timer = React33.useRef(null);
-  React33.useEffect(() => () => {
+  const [showSuccess, setShowSuccess] = React34.useState(false);
+  const timer = React34.useRef(null);
+  React34.useEffect(() => () => {
     if (timer.current) clearTimeout(timer.current);
   }, []);
   const handleClick = () => {
@@ -6644,11 +6702,11 @@ function ActionFeedbackButton({
     timer.current = setTimeout(() => setShowSuccess(false), feedbackDuration);
   };
   const text = showSuccess ? successTooltip : disabled && disabledTooltip ? disabledTooltip : tooltip;
-  const button = /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+  const button = /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
     Button2,
     {
       variant,
-      icon: showSuccess ? successIcon ?? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(CheckCircle2Icon, {}) : icon,
+      icon: showSuccess ? successIcon ?? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(CheckCircle2Icon, {}) : icon,
       ...showSuccess ? { glyphTone: "success" } : glyphTone ? { glyphTone } : {},
       ...props,
       "aria-label": text,
@@ -6656,15 +6714,15 @@ function ActionFeedbackButton({
       onClick: handleClick
     }
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(Tooltip, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(TooltipTrigger, { asChild: true, children: disabled ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: "inline-flex", children: button }) : button }),
-    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(TooltipContent, { side: "bottom", sideOffset: 5, className: "z-[9999]", children: text })
+  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 })
   ] });
 }
 
 // src/controls/citation-chip.tsx
 var import_react10 = require("react");
-var import_jsx_runtime53 = require("react/jsx-runtime");
+var import_jsx_runtime54 = require("react/jsx-runtime");
 function CitationPopoverBody({
   icon: Icon3,
   label,
@@ -6674,32 +6732,32 @@ function CitationPopoverBody({
   onOpen,
   openLabel = "Open source"
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "flex flex-col gap-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "flex items-start gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+  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)(
         Icon3,
         {
           className: "mt-0.5 h-4 w-4 shrink-0 text-muted-foreground",
           "aria-hidden": true
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "min-w-0", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("p", { className: "truncate type-title text-foreground", children: label }),
-        locator && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("p", { className: "type-secondary text-muted-foreground", children: locator })
+      /* @__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 })
       ] })
     ] }),
-    excerpt && /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("blockquote", { className: "flex gap-2 rounded-md bg-muted/60 p-2 type-secondary italic text-muted-foreground", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(QuoteIcon, { className: "h-3 w-3 shrink-0", "aria-hidden": true }),
-      /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: cn("not-italic", clampExcerpt && "line-clamp-6"), children: excerpt })
+    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 })
     ] }),
-    onOpen && /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
+    onOpen && /* @__PURE__ */ (0, import_jsx_runtime54.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_runtime53.jsx)(ArrowUpRightIcon, { className: "h-3 w-3", "aria-hidden": true }),
+          /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(ArrowUpRightIcon, { className: "h-3 w-3", "aria-hidden": true }),
           openLabel
         ]
       }
@@ -6719,8 +6777,8 @@ function CitationChip({
     setOpen(false);
     body.onOpen?.();
   } : void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(Popover, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
+  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)(
       "button",
       {
         type: "button",
@@ -6730,20 +6788,20 @@ function CitationChip({
           chipClassName
         ),
         children: [
-          number != null && /* @__PURE__ */ (0, import_jsx_runtime53.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_runtime53.jsx)(Icon3, { className: "h-3 w-3 shrink-0 text-muted-foreground", "aria-hidden": true }),
-          /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "truncate", children: label }),
-          chipSuffix && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "shrink-0 text-muted-foreground", children: chipSuffix })
+          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 })
         ]
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(PopoverContent, { sizing: "content", align: "start", className: "p-3", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(CitationPopoverBody, { ...body, onOpen }) })
+    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(PopoverContent, { sizing: "content", align: "start", className: "p-3", children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(CitationPopoverBody, { ...body, onOpen }) })
   ] });
 }
 
 // src/controls/tool-rail.tsx
-var React34 = __toESM(require("react"), 1);
-var import_jsx_runtime54 = require("react/jsx-runtime");
+var React35 = __toESM(require("react"), 1);
+var import_jsx_runtime55 = require("react/jsx-runtime");
 function ToolRail({
   groups,
   value,
@@ -6753,11 +6811,11 @@ function ToolRail({
   className,
   "aria-label": ariaLabel
 }) {
-  const flat = React34.useMemo(() => groups.flat(), [groups]);
-  const refs = React34.useRef(/* @__PURE__ */ new Map());
+  const flat = React35.useMemo(() => groups.flat(), [groups]);
+  const refs = React35.useRef(/* @__PURE__ */ new Map());
   const enabled = flat.filter((t) => !t.disabled);
   const activeEnabled = enabled.find((t) => t.id === value);
-  const [focusId, setFocusId] = React34.useState(null);
+  const [focusId, setFocusId] = React35.useState(null);
   const stopId = (focusId && enabled.some((t) => t.id === focusId) ? focusId : null) ?? activeEnabled?.id ?? enabled[0]?.id;
   const vertical = orientation === "vertical";
   const focusAt = (id) => {
@@ -6783,7 +6841,7 @@ function ToolRail({
       focusAt(enabled[enabled.length - 1]?.id);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
     "div",
     {
       role: "toolbar",
@@ -6792,8 +6850,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_runtime54.jsxs)(React34.Fragment, { children: [
-        gi > 0 ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+      children: groups.map((group, gi) => /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(React35.Fragment, { children: [
+        gi > 0 ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
           "div",
           {
             role: "separator",
@@ -6805,8 +6863,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_runtime54.jsxs)(Tooltip, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+          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)(
               Button2,
               {
                 ref: (el) => {
@@ -6814,7 +6872,7 @@ function ToolRail({
                   else refs.current.delete(tool.id);
                 },
                 variant: on ? "primary" : "quiet",
-                icon: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Icon3, {}),
+                icon: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Icon3, {}),
                 "aria-label": name,
                 pressed: on,
                 disabled: tool.disabled,
@@ -6825,7 +6883,7 @@ function ToolRail({
                 onClick: () => onValueChange(on && allowDeselect ? null : tool.id, tool)
               }
             ) }),
-            /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(TooltipContent, { side: vertical ? "right" : "bottom", sideOffset: 6, children: name })
+            /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(TooltipContent, { side: vertical ? "right" : "bottom", sideOffset: 6, children: name })
           ] }, tool.id);
         })
       ] }, gi))
@@ -6834,7 +6892,7 @@ function ToolRail({
 }
 
 // src/controls/page-range-input.tsx
-var React35 = __toESM(require("react"), 1);
+var React36 = __toESM(require("react"), 1);
 
 // src/controls/page-ranges.ts
 var WORD_END = /^(end|last)$/i;
@@ -6905,7 +6963,7 @@ function formatPageRanges(pages) {
 }
 
 // src/controls/page-range-input.tsx
-var import_jsx_runtime55 = require("react/jsx-runtime");
+var import_jsx_runtime56 = require("react/jsx-runtime");
 function PageRangeInput({
   value,
   onChange,
@@ -6917,13 +6975,13 @@ function PageRangeInput({
   id,
   "aria-label": ariaLabel = "Page range"
 }) {
-  const autoId = React35.useId();
+  const autoId = React36.useId();
   const hintId = `${id ?? autoId}-hint`;
-  const parsed = React35.useMemo(() => parsePageRanges(value, pageCount), [value, pageCount]);
+  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_runtime55.jsxs)("div", { className: cn("flex min-w-0 flex-col gap-1", className), "data-matrx-page-range-input": "", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+  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)(
       Input,
       {
         id,
@@ -6942,7 +7000,7 @@ function PageRangeInput({
         }
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
       "p",
       {
         id: hintId,
@@ -6956,8 +7014,8 @@ function PageRangeInput({
 }
 
 // src/controls/opacity-slider.tsx
-var React36 = __toESM(require("react"), 1);
-var import_jsx_runtime56 = require("react/jsx-runtime");
+var React37 = __toESM(require("react"), 1);
+var import_jsx_runtime57 = 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({
@@ -6969,7 +7027,7 @@ function OpacitySlider({
   className,
   "aria-label": ariaLabel = "Opacity"
 }) {
-  const [draft, setDraft] = React36.useState(null);
+  const [draft, setDraft] = React37.useState(null);
   const percent = toPercent(clamp(value, min, max));
   const commit = () => {
     if (draft !== null && draft.trim() !== "" && Number.isFinite(Number(draft))) {
@@ -6977,8 +7035,8 @@ function OpacitySlider({
     }
     setDraft(null);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: cn("flex min-w-0 items-center gap-2", className), "data-matrx-opacity-slider": "", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+  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)(
       Slider,
       {
         className: "min-w-0 flex-1",
@@ -6991,8 +7049,8 @@ function OpacitySlider({
         onValueChange: ([v]) => onChange(clamp((v ?? 0) / 100, min, max))
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "flex w-16 shrink-0 items-center gap-1", style: { ["--matrx-control-field-min"]: "0px" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+    /* @__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)(
         Input,
         {
           numeric: true,
@@ -7011,14 +7069,14 @@ function OpacitySlider({
           }
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { "aria-hidden": true, className: "text-xs text-muted-foreground", children: "%" })
+      /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { "aria-hidden": true, className: "text-xs text-muted-foreground", children: "%" })
     ] })
   ] });
 }
 
 // src/controls/color-swatch-row.tsx
-var React37 = __toESM(require("react"), 1);
-var import_jsx_runtime57 = require("react/jsx-runtime");
+var React38 = __toESM(require("react"), 1);
+var import_jsx_runtime58 = require("react/jsx-runtime");
 function ColorSwatchRow({
   colors,
   value,
@@ -7027,7 +7085,7 @@ function ColorSwatchRow({
   className,
   "aria-label": ariaLabel = "Color"
 }) {
-  const refs = React37.useRef([]);
+  const refs = React38.useRef([]);
   const chosen = colors.findIndex((c) => c.value.toLowerCase() === (value ?? "").toLowerCase());
   const stop = chosen >= 0 ? chosen : 0;
   const move = (to) => {
@@ -7037,7 +7095,7 @@ function ColorSwatchRow({
     refs.current[i]?.focus();
     onChange(c.value, c);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
     "div",
     {
       role: "radiogroup",
@@ -7047,7 +7105,7 @@ function ColorSwatchRow({
       "data-matrx-color-swatch-row": "",
       children: colors.map((c, i) => {
         const on = i === chosen;
-        return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
           "button",
           {
             ref: (el) => {
@@ -7085,7 +7143,7 @@ function ColorSwatchRow({
               on && "ring-2 ring-foreground ring-offset-1 ring-offset-background"
             ),
             style: { backgroundColor: c.value },
-            children: on ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(RadixCheckIcon, { className: "size-3 mix-blend-difference text-white" }) : null
+            children: on ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(RadixCheckIcon, { className: "size-3 mix-blend-difference text-white" }) : null
           },
           `${c.value}-${i}`
         );
@@ -7095,8 +7153,8 @@ function ColorSwatchRow({
 }
 
 // src/controls/anchored-toolbar.tsx
-var React38 = __toESM(require("react"), 1);
-var import_jsx_runtime58 = require("react/jsx-runtime");
+var React39 = __toESM(require("react"), 1);
+var import_jsx_runtime59 = require("react/jsx-runtime");
 function virtualFor(rect) {
   return {
     getBoundingClientRect: () => ({
@@ -7124,14 +7182,14 @@ function AnchoredToolbar({
   children
 }) {
   const x = rect?.x ?? 0, y = rect?.y ?? 0, w = rect?.width ?? 0, h = rect?.height ?? 0;
-  const virtualRef = React38.useMemo(
+  const virtualRef = React39.useMemo(
     () => ({ current: virtualFor({ x, y, width: w, height: h }) }),
     [x, y, w, h]
   );
   const visible = open && rect !== null;
-  return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(Popover, { open: visible, ...onOpenChange ? { onOpenChange } : {}, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(PopoverAnchor, { virtualRef }),
-    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+  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)(
       PopoverContent,
       {
         role: "toolbar",
@@ -7154,9 +7212,9 @@ function AnchoredToolbar({
 }
 
 // src/controls/icon-select.tsx
-var React39 = __toESM(require("react"), 1);
+var React40 = __toESM(require("react"), 1);
 var import_outbound = require("@ai-matrx/kit/outbound");
-var import_jsx_runtime59 = require("react/jsx-runtime");
+var import_jsx_runtime60 = require("react/jsx-runtime");
 function wantsNewTab(e) {
   return Boolean(e.metaKey || e.ctrlKey || e.shiftKey || e.altKey || e.button === 1);
 }
@@ -7165,8 +7223,8 @@ var TRIGGER_SIZE = {
   touch: "!h-10 !w-10 sm:!h-8 sm:!w-8"
 };
 var TRIGGER_FACE = "h-7 w-7 justify-center border-none bg-muted px-0 focus:outline-none focus:ring-0";
-var IconSelectTrigger = React39.forwardRef(function IconSelectTrigger2({ icon, disabled, ariaLabel, size = "default", className, ...rest }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+var IconSelectTrigger = React40.forwardRef(function IconSelectTrigger2({ icon, disabled, ariaLabel, size = "default", className, ...rest }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
     Button2,
     {
       ref,
@@ -7191,16 +7249,16 @@ function IconSelect({
   size = "default",
   className
 }) {
-  const [open, setOpen] = React39.useState(false);
-  const skipSelectRef = React39.useRef(false);
+  const [open, setOpen] = React40.useState(false);
+  const skipSelectRef = React40.useRef(false);
   if (searchable) {
-    return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(Popover, { open, onOpenChange: setOpen, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(IconSelectTrigger, { icon, disabled, ariaLabel, size, className }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(PopoverContent, { sizing: "content", className: "p-0", align: "start", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(Command, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(CommandInput, { placeholder: searchPlaceholder, className: "h-9 text-sm" }),
-        /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(CommandList, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(CommandEmpty, { children: "No results found." }),
-          /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(CommandGroup, { className: "max-h-72 overflow-auto", children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+    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)(
             CommandItem,
             {
               value: item.label,
@@ -7220,8 +7278,8 @@ function IconSelect({
                 onValueChange?.(item.value);
                 setOpen(false);
               },
-              children: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "flex items-center", children: [
-                item.icon && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: "mr-2", children: item.icon }),
+              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 }),
                 item.label
               ] })
             },
@@ -7231,8 +7289,8 @@ function IconSelect({
       ] }) })
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(Select, { ...value === void 0 ? {} : { value }, ...onValueChange ? { onValueChange } : {}, disabled, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(Select, { ...value === void 0 ? {} : { value }, ...onValueChange ? { onValueChange } : {}, disabled, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
       SelectTrigger,
       {
         "aria-label": ariaLabel,
@@ -7241,7 +7299,7 @@ function IconSelect({
         children: icon
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(SelectContent, { children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(SelectGroup, { children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+    /* @__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)(
       SelectItem,
       {
         value: item.value,
@@ -7251,8 +7309,8 @@ function IconSelect({
             (0, import_outbound.openOutbound)(item.href, "_blank", "noopener");
           }
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "flex items-center", children: [
-          item.icon && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: "mr-2", children: item.icon }),
+        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 }),
           item.label
         ] })
       },
@@ -7262,18 +7320,18 @@ function IconSelect({
 }
 
 // src/controls/advanced-collapsible.tsx
-var React43 = __toESM(require("react"), 1);
+var React44 = __toESM(require("react"), 1);
 var import_clipboard3 = require("@ai-matrx/kit/clipboard");
 var import_clipboard_fallback_opener3 = require("@ai-matrx/kit/clipboard-fallback-opener");
 var import_notify3 = require("@ai-matrx/kit/notify");
 
 // src/collapsible.tsx
 var CollapsiblePrimitive = __toESM(require("@radix-ui/react-collapsible"), 1);
-var React40 = __toESM(require("react"), 1);
-var import_jsx_runtime60 = require("react/jsx-runtime");
+var React41 = __toESM(require("react"), 1);
+var import_jsx_runtime61 = require("react/jsx-runtime");
 var Collapsible = CollapsiblePrimitive.Root;
 var CollapsibleTrigger2 = CollapsiblePrimitive.CollapsibleTrigger;
-var CollapsibleContent2 = React40.forwardRef(({ className, animated = true, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+var CollapsibleContent2 = React41.forwardRef(({ className, animated = true, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
   CollapsiblePrimitive.CollapsibleContent,
   {
     ref,
@@ -7291,16 +7349,16 @@ CollapsibleContent2.displayName = "CollapsibleContent";
 var DialogPrimitive3 = __toESM(require("@radix-ui/react-dialog"), 1);
 var VisuallyHidden2 = __toESM(require("@radix-ui/react-visually-hidden"), 1);
 var import_react_tree3 = require("@ai-matrx/kit/react-tree");
-var React42 = __toESM(require("react"), 1);
+var React43 = __toESM(require("react"), 1);
 
 // src/look.tsx
-var React41 = __toESM(require("react"), 1);
-var import_jsx_runtime61 = require("react/jsx-runtime");
+var React42 = __toESM(require("react"), 1);
+var import_jsx_runtime62 = require("react/jsx-runtime");
 var CONTEXT_SLOT3 = /* @__PURE__ */ Symbol.for("ai-matrx.design-system.look-context");
 var registry3 = globalThis;
-var LookContext = registry3[CONTEXT_SLOT3] ??= React41.createContext("web");
+var LookContext = registry3[CONTEXT_SLOT3] ??= React42.createContext("web");
 function useLook() {
-  return React41.useContext(LookContext);
+  return React42.useContext(LookContext);
 }
 
 // src/layer-front.ts
@@ -7551,8 +7609,8 @@ function useDragMove(options) {
 }
 
 // src/dialog.tsx
-var import_jsx_runtime62 = require("react/jsx-runtime");
-var DialogWindowedByDefaultContext = React42.createContext(false);
+var import_jsx_runtime63 = require("react/jsx-runtime");
+var DialogWindowedByDefaultContext = React43.createContext(false);
 var Dialog = ({
   children,
   ...props
@@ -7560,7 +7618,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_runtime62.jsx)(DialogWindowedByDefaultContext.Provider, { value: !desktopLook && props.modal === void 0, children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(RadixDialogModalProvider, { modal, children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(DialogPrimitive3.Root, { ...props, modal, children }) }) });
+  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 }) }) });
 };
 Dialog.displayName = "Dialog";
 var DialogPortal = ({
@@ -7568,13 +7626,13 @@ var DialogPortal = ({
   ...props
 }) => {
   const resolved = usePortalContainer(container);
-  return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(DialogPrimitive3.Portal, { container: resolved ?? null, ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime63.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] ??= React42.createContext(null);
-var DialogOverlay = React42.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+var DialogContainerContext = contextRegistry3[CONTEXT_SLOT4] ??= React43.createContext(null);
+var DialogOverlay = React43.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
   DialogPrimitive3.Overlay,
   {
     ref,
@@ -7590,10 +7648,10 @@ var DialogOverlay = React42.forwardRef(({ className, ...props }, ref) => /* @__P
   }
 ));
 DialogOverlay.displayName = DialogPrimitive3.Overlay.displayName;
-var DialogContentPrimitive = React42.forwardRef(({ onInteractOutside, onCloseAutoFocus, ...props }, ref) => {
+var DialogContentPrimitive = React43.forwardRef(({ onInteractOutside, onCloseAutoFocus, ...props }, ref) => {
   const isModal = useRadixDialogModal();
   useModalLayer(isModal);
-  return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
     DialogPrimitive3.Content,
     {
       ...props,
@@ -7608,7 +7666,7 @@ DialogContentPrimitive.displayName = "DialogContentPrimitive";
 var DIALOG_DESKTOP_CLASSES2 = "matrx-dialog-card fixed inset-0 z-[10000] m-auto grid h-fit min-w-0 w-full max-w-lg gap-4 max-h-[85dvh] overflow-y-auto overscroll-contain [--dialog-pad:1.5rem] overflow-x-clip border bg-background p-6 shadow-lg [overflow-wrap:anywhere] [&>*]:min-w-0 [&>*]:max-w-full sm:rounded-lg";
 var DIALOG_MOBILE_SHEET_CLASSES2 = "matrx-mobile-sheet matrx-dialog-card fixed inset-x-0 bottom-0 left-0 right-0 top-auto z-[10000] flex min-w-0 flex-col w-full max-w-full max-h-[90dvh] gap-4 [--dialog-pad:1rem] overflow-x-clip border-t bg-background p-4 pb-safe shadow-lg [overflow-wrap:anywhere] [&>*]:min-w-0 [&>*]:max-w-full rounded-t-2xl rounded-b-none overflow-y-auto overscroll-contain";
 var DIALOG_MOBILE_SHEET_OVERRIDE2 = "inset-x-0 bottom-0 left-0 right-0 top-auto translate-none w-full max-w-full max-h-[90dvh] rounded-b-none rounded-t-2xl overflow-y-auto";
-var DialogWindowHandleContext = React42.createContext(null);
+var DialogWindowHandleContext = React43.createContext(null);
 var WINDOW_KEEP_VISIBLE = 80;
 var DIALOG_SIZE_CLASS = {
   sm: "max-w-md",
@@ -7619,7 +7677,7 @@ var DIALOG_SIZE_CLASS = {
   full: "max-w-[calc(100vw-2rem)]",
   screen: "max-w-none w-screen h-dvh max-h-none rounded-none sm:rounded-none"
 };
-var DialogContent = React42.forwardRef(
+var DialogContent = React43.forwardRef(
   ({
     className,
     children,
@@ -7644,13 +7702,13 @@ var DialogContent = React42.forwardRef(
     const desktopLook = useLook() === "desktop";
     const asSheet = mobileSheet && isMobile && !desktopLook;
     const windowed = !isModal && !asSheet;
-    const windowedByDefault = React42.useContext(DialogWindowedByDefaultContext);
-    const [containerEl, setContainerEl] = React42.useState(
+    const windowedByDefault = React43.useContext(DialogWindowedByDefaultContext);
+    const [containerEl, setContainerEl] = React43.useState(
       null
     );
     const stacks = windowed && windowedByDefault;
-    const [behind, setBehind] = React42.useState(false);
-    React42.useEffect(() => {
+    const [behind, setBehind] = React43.useState(false);
+    React43.useEffect(() => {
       if (!stacks || !containerEl) return;
       const onFront = (event) => {
         const element = event.detail?.element ?? null;
@@ -7666,7 +7724,7 @@ var DialogContent = React42.forwardRef(
       setBehind(false);
       announceLayerFront(containerEl);
     };
-    const [offset, setOffset] = React42.useState({ x: 0, y: 0 });
+    const [offset, setOffset] = React43.useState({ x: 0, y: 0 });
     const drag = useDragMove({
       element: containerEl,
       enabled: windowed,
@@ -7675,11 +7733,11 @@ var DialogContent = React42.forwardRef(
       constrain: (next) => clampRectToViewport(next, readViewport(), { keepVisible: WINDOW_KEEP_VISIBLE }),
       onCommit: (_rect, commit) => setOffset(commit.offset)
     });
-    const handle = React42.useMemo(
+    const handle = React43.useMemo(
       () => windowed ? { onPointerDown: drag.onPointerDown, onDoubleClick: () => setOffset({ x: 0, y: 0 }) } : null,
       [windowed, drag.onPointerDown]
     );
-    const mergedRef = React42.useCallback(
+    const mergedRef = React43.useCallback(
       (node) => {
         setContainerEl(node);
         if (typeof ref === "function") ref(node);
@@ -7691,9 +7749,9 @@ var DialogContent = React42.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_runtime62.jsxs)(DialogPortal, { container, children: [
-      isModal ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(DialogOverlay, {}) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
+    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)(
         DialogContentPrimitive,
         {
           ref: mergedRef,
@@ -7744,9 +7802,9 @@ var DialogContent = React42.forwardRef(
           ...hasDescription ? {} : { "aria-describedby": void 0 },
           ...props,
           children: [
-            hasTitle ? null : /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(VisuallyHidden2.Root, { children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(DialogPrimitive3.Title, { children: "Dialog" }) }),
-            closeSlot.slot && !closeSlot.claimed ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(CloseRow, {}) : null,
-            /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(CloseSlotProvider, { value: closeSlot.slot, children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(DialogContainerContext.Provider, { value: containerEl, children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(DialogWindowHandleContext.Provider, { value: handle, children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+            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)(
               PortalContainerProvider,
               {
                 container: containerEl ?? injectedContainer ?? null,
@@ -7764,8 +7822,8 @@ var DialogHeader = ({
   className,
   ...props
 }) => {
-  const handle = React42.useContext(DialogWindowHandleContext);
-  return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+  const handle = React43.useContext(DialogWindowHandleContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
     HeaderWithClose,
     {
       slotName: "dialog-header",
@@ -7785,7 +7843,7 @@ DialogHeader.displayName = "DialogHeader";
 var DialogFooter = ({
   className,
   ...props
-}) => /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
   "div",
   {
     "data-slot": "dialog-footer",
@@ -7819,7 +7877,7 @@ var DialogFooter = ({
   }
 );
 DialogFooter.displayName = "DialogFooter";
-var DialogTitle = React42.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+var DialogTitle = React43.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
   DialogPrimitive3.Title,
   {
     ref,
@@ -7829,7 +7887,7 @@ var DialogTitle = React42.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 DialogTitle.displayName = DialogPrimitive3.Title.displayName;
-var DialogDescription = React42.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+var DialogDescription = React43.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
   DialogPrimitive3.Description,
   {
     ref,
@@ -7841,7 +7899,7 @@ var DialogDescription = React42.forwardRef(({ className, ...props }, ref) => /*
 DialogDescription.displayName = DialogPrimitive3.Description.displayName;
 
 // src/icon-button.tsx
-var import_jsx_runtime63 = require("react/jsx-runtime");
+var import_jsx_runtime64 = require("react/jsx-runtime");
 var VARIANT = {
   ghost: "quiet",
   outline: "outline",
@@ -7862,25 +7920,25 @@ function IconButton({
   "aria-label": ariaLabel,
   ...props
 }) {
-  const control = /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+  const control = /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
     Button2,
     {
       variant: VARIANT[variant],
-      icon: spinning ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Icon3, { className: MOTION_SPIN }) : /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Icon3, {}),
+      icon: spinning ? /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(Icon3, { className: MOTION_SPIN }) : /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(Icon3, {}),
       ...glyphTone ? { glyphTone } : {},
       "aria-label": ariaLabel ?? tooltip ?? "Action",
       ...props
     }
   );
   if (!tooltip) return control;
-  return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(Tooltip, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(TooltipTrigger, { asChild: true, children: control }),
-    /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(TooltipContent, { side: tooltipSide2, align: tooltipAlign, className: "z-[9999]", sideOffset: tooltipOffset, children: tooltip })
+  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 })
   ] });
 }
 
 // src/controls/advanced-collapsible.tsx
-var import_jsx_runtime64 = require("react/jsx-runtime");
+var import_jsx_runtime65 = require("react/jsx-runtime");
 function AdvancedCollapsible({
   icon,
   title,
@@ -7899,10 +7957,10 @@ function AdvancedCollapsible({
   fullScreenTitle,
   fullScreenDescription
 }) {
-  const [isOpen, setIsOpen] = React43.useState(initialOpen);
-  const [isFullScreen, setIsFullScreen] = React43.useState(false);
-  const contentRef = React43.useRef(null);
-  const fullRef = React43.useRef(null);
+  const [isOpen, setIsOpen] = React44.useState(initialOpen);
+  const [isFullScreen, setIsFullScreen] = React44.useState(false);
+  const contentRef = React44.useRef(null);
+  const fullRef = React44.useRef(null);
   const handleOpenChange = (open) => {
     setIsOpen(open);
     onStateChange?.(open);
@@ -7920,29 +7978,29 @@ function AdvancedCollapsible({
     if (!landed) void (0, import_clipboard_fallback_opener3.openClipboardFallback)(text);
     else onCopy?.();
   };
-  const actions = /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { className: "flex items-center justify-end gap-2", children: [
-    onSave && /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+  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)(
       ActionFeedbackButton,
       {
-        icon: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(SaveIcon, {}),
+        icon: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(SaveIcon, {}),
         glyphTone: "info",
         tooltip: saveTooltip,
         successTooltip: "Saved!",
         onClick: onSave
       }
     ),
-    onReset && /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+    onReset && /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
       ActionFeedbackButton,
       {
-        icon: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(RefreshCwIcon, {}),
+        icon: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(RefreshCwIcon, {}),
         glyphTone: "warning",
         tooltip: resetTooltip,
         successTooltip: "Reset!",
         onClick: onReset
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(IconButton, { icon: CopyIcon, tooltip: copyTooltip, onClick: () => void handleCopy() }),
-    /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(IconButton, { icon: CopyIcon, tooltip: copyTooltip, onClick: () => void handleCopy() }),
+    /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
       IconButton,
       {
         icon: isFullScreen ? Minimize2Icon : Maximize2Icon,
@@ -7953,20 +8011,20 @@ function AdvancedCollapsible({
     )
   ] });
   const heading = typeof title === "string" ? title : "Content";
-  return /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(import_jsx_runtime64.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(import_jsx_runtime65.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
       Collapsible,
       {
         open: isOpen,
         onOpenChange: handleOpenChange,
         className: cn("w-full rounded-xl border border-border shadow-sm", className),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime64.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_runtime64.jsxs)("div", { className: "flex items-center gap-2", 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: [
               icon,
-              typeof title === "string" ? /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("span", { children: title }) : title
+              typeof title === "string" ? /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("span", { children: title }) : title
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
               ChevronDownIcon,
               {
                 className: cn(
@@ -7976,27 +8034,27 @@ function AdvancedCollapsible({
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(CollapsibleContent2, { children: /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { className: "relative", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { className: "absolute left-8 right-8 top-0 h-px bg-border" }),
-            /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { ref: contentRef, className: "p-4", children }),
-            /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { className: "mb-1 mr-1 mt-2", children: actions })
+          /* @__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_runtime64.jsx)(Dialog, { open: isFullScreen, onOpenChange: setIsFullScreen, children: /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(DialogContent, { size: "full", height: "tall", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(DialogHeader, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(DialogTitle, { children: fullScreenTitle || heading }),
-        fullScreenDescription ? /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(DialogDescription, { children: fullScreenDescription }) : null
+    /* @__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
       ] }),
       actions,
-      /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { ref: fullRef, className: "min-h-0 flex-1 overflow-auto p-4", children })
+      /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { ref: fullRef, className: "min-h-0 flex-1 overflow-auto p-4", children })
     ] }) })
   ] });
 }
 
 // src/controls/empty-state-card.tsx
-var import_jsx_runtime65 = require("react/jsx-runtime");
+var import_jsx_runtime66 = require("react/jsx-runtime");
 var TONE3 = {
   primary: { data: "primary", button: "primary" },
   success: { data: "success", button: "outline" }
@@ -8011,20 +8069,20 @@ function EmptyStateCard({
   tone: tone2 = "primary"
 }) {
   const t = TONE3[tone2];
-  return /* @__PURE__ */ (0, import_jsx_runtime65.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_runtime65.jsx)("div", { className: "matrx-hue-icon mb-6 rounded-full p-6", children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(Icon3, { className: "h-12 w-12", strokeWidth: 1.5 }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("h3", { className: cn("mb-3 text-xl font-semibold", tone2 === "success" ? "text-success-ink" : "text-foreground"), children: title }),
-    /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("p", { className: "mb-8 max-w-md text-muted-foreground", children: description }),
-    buttonText && /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "flex flex-col gap-4 sm:flex-row", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(Button2, { variant: t.button, ...tone2 === "success" ? { tone: "success" } : {}, ...onButtonClick ? { onClick: onButtonClick } : {}, children: buttonText }),
+  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 }),
       secondaryButton
     ] })
   ] });
 }
 
 // src/controls/hue-cards.tsx
-var React44 = __toESM(require("react"), 1);
-var import_jsx_runtime66 = require("react/jsx-runtime");
+var React45 = __toESM(require("react"), 1);
+var import_jsx_runtime67 = require("react/jsx-runtime");
 var HUE_TONE = {
   indigo: "indigo",
   emerald: "emerald",
@@ -8045,7 +8103,7 @@ var HUE_TONE = {
   slate: "slate"
 };
 function sizedIcon(icon, fallback) {
-  return React44.isValidElement(icon) ? React44.cloneElement(icon, { size: icon.props.size || fallback }) : icon;
+  return React45.isValidElement(icon) ? React45.cloneElement(icon, { size: icon.props.size || fallback }) : icon;
 }
 function tone(color) {
   return HUE_TONE[color] ?? HUE_TONE.slate;
@@ -8058,7 +8116,7 @@ function Destination({
   children
 }) {
   if (path) {
-    return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
       HostLink,
       {
         href: path,
@@ -8069,7 +8127,7 @@ function Destination({
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { ...className ? { className } : {}, ...onClick ? { onClick } : {}, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { ...className ? { className } : {}, ...onClick ? { onClick } : {}, children });
 }
 var SIZE_PADDING = {
   xs: "p-3",
@@ -8092,19 +8150,19 @@ function HueCard({
   external = false
 }) {
   if (compact) {
-    return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Destination, { path, onClick, external, children: /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Destination, { path, onClick, external, children: /* @__PURE__ */ (0, import_jsx_runtime67.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_runtime66.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_runtime66.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_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 })
         ]
       }
     ) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Destination, { path, onClick, external, children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Destination, { path, onClick, external, children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
     "div",
     {
       "data-tone": tone(color),
@@ -8113,10 +8171,10 @@ function HueCard({
         SIZE_PADDING[size],
         className
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "flex flex-col items-center space-y-3 text-center", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: "matrx-hue-icon rounded-full p-3", children: sizedIcon(icon, 28) }),
-        /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("h3", { className: "text-lg font-semibold", children: title }),
-        description && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("p", { className: "type-body text-muted-foreground", children: description }),
+      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 }),
         descriptionNode && !description && descriptionNode
       ] })
     }
@@ -8143,12 +8201,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_runtime66.jsxs)("div", { className, children: [
-    title && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("h2", { className: "mb-4 text-base font-semibold", children: title }),
-    description && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("p", { className: "type-body mb-4 text-muted-foreground", children: description }),
-    /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: cn("grid", compact ? "gap-2" : "gap-4", colsClass), children: [
-      items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(HueCard, { ...item, compact, className: cn(cardClassName, item.className) }, `card-${index}`)),
-      showAddButton && /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(
+  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)(
         "button",
         {
           type: "button",
@@ -8158,8 +8216,8 @@ function HueGrid({
             cardClassName
           ),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("span", { className: "rounded-full bg-muted p-3 text-muted-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(PlusIcon, { className: "h-7 w-7" }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("span", { className: "text-lg font-semibold", children: addButtonText })
+            /* @__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 })
           ]
         }
       )
@@ -8174,12 +8232,12 @@ function HueRow({
   color,
   path,
   className,
-  rightIcon = /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(ChevronRightIcon, { className: "h-5 w-5 text-muted-foreground" }),
+  rightIcon = /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(ChevronRightIcon, { className: "h-5 w-5 text-muted-foreground" }),
   onClick,
   showBorder = true,
   isLast = false
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Destination, { path, onClick, children: /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Destination, { path, onClick, children: /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(
     "div",
     {
       "data-tone": tone(color),
@@ -8189,11 +8247,11 @@ function HueRow({
         className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "flex items-center", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: "matrx-hue-icon mr-4 rounded-lg p-2", children: sizedIcon(icon, 20) }),
-          /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("h3", { className: "font-medium", children: title }),
-            description && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("p", { className: "type-body text-muted-foreground", children: description }),
+        /* @__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 }),
             descriptionNode && !description && descriptionNode
           ] })
         ] }),
@@ -8211,7 +8269,7 @@ function HueList({
   showBorders = true,
   showContainer = true
 }) {
-  const rows = items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+  const rows = items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
     HueRow,
     {
       ...item,
@@ -8221,14 +8279,14 @@ function HueList({
     },
     `row-${index}`
   ));
-  return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className, children: [
-    title && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("h2", { className: "mb-4 text-base font-semibold", children: title }),
-    description && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("p", { className: "type-body mb-4 text-muted-foreground", children: description }),
-    showContainer ? /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: "rounded-xl bg-card shadow-md", children: rows }) : rows
+  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
   ] });
 }
 function IosWidget({ title, description, icon, color, path, badge, className, onClick }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Destination, { path, onClick, className: "contents", children: /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Destination, { path, onClick, className: "contents", children: /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(
     "div",
     {
       "data-tone": tone(color),
@@ -8237,13 +8295,13 @@ function IosWidget({ title, description, icon, color, path, badge, className, on
         className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "flex items-start justify-between", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { children: sizedIcon(icon, 32) }),
-          badge && /* @__PURE__ */ (0, import_jsx_runtime66.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", { 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_runtime66.jsxs)("div", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("p", { className: "type-title line-clamp-2 leading-tight", children: title }),
-          description && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("p", { className: "type-meta mt-0.5 line-clamp-2 leading-tight", children: description })
+        /* @__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 })
         ] })
       ]
     }
@@ -8254,21 +8312,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_runtime66.jsxs)(import_jsx_runtime66.Fragment, { children: [
-    icon && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: "h-12 w-12 text-primary-ink", children: icon }),
-    title && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("span", { className: "font-medium text-primary-ink", children: title }),
-    description && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("p", { className: "type-secondary mt-1 text-center text-muted-foreground", children: description })
+  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 })
   ] });
-  return href ? /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(HostLink, { href, className: face, children: content }) : /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { onClick, className: face, children: content });
+  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 });
 }
 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_runtime66.jsxs)("div", { className: cn("w-full", className), children: [
-    (title || description) && /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "pb-8 text-center", children: [
-      title && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("h2", { className: "text-2xl font-bold text-foreground md:text-3xl", children: title }),
-      description && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("p", { className: "mt-2 text-muted-foreground", children: description })
+  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 })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime66.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_runtime66.jsx)(TileCard, { ...card }, index)) })
+    /* @__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)) })
   ] });
 }
 //# sourceMappingURL=controls.cjs.map