@ai-matrx/design-system 0.86.339 → 0.86.340

package/dist/{chunk-T4IJELSS.js → chunk-KYH42WEX.js}

@@ -114,9 +114,64 @@ import {
   cn
 } from "./chunk-M6KA5EHN.js";
 
-// src/controls/decision-control.tsx
+// src/controls/window-controls.tsx
 import * as React from "react";
-import { Fragment as Fragment2, jsx, jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
+var WindowLights = React.forwardRef(
+  ({ className, inactive, touch, role = "group", "aria-label": ariaLabel = "Window controls", ...props }, ref) => /* @__PURE__ */ 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__ */ jsx(XIcon, { "aria-hidden": "true" });
+  if (kind === "minimize") return restores ? /* @__PURE__ */ jsx(Maximize2Icon, { "aria-hidden": "true" }) : /* @__PURE__ */ jsx(MinusIcon, { "aria-hidden": "true" });
+  return restores ? /* @__PURE__ */ jsx(Minimize2Icon, { "aria-hidden": "true" }) : /* @__PURE__ */ jsx(Maximize2Icon, { "aria-hidden": "true" });
+}
+var WindowLight = React.forwardRef(
+  ({ className, kind, restores = false, type, ...props }, ref) => /* @__PURE__ */ 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 = React.forwardRef(
+  ({ className, icon, type, title, ...props }, ref) => /* @__PURE__ */ 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
+import * as React2 from "react";
+import { Fragment as Fragment2, jsx as jsx2, jsxs } from "react/jsx-runtime";
 function find(items, value) {
   if (!items || !value) return null;
   for (const i of items) {
@@ -127,21 +182,21 @@ function find(items, value) {
   return null;
 }
 function WayOutEntries({ items, chosen, onPick }) {
-  return /* @__PURE__ */ jsx(Fragment2, { children: items.map((item, index) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+  return /* @__PURE__ */ jsx2(Fragment2, { children: items.map((item, index) => /* @__PURE__ */ jsxs(React2.Fragment, { children: [
     item.group ? /* @__PURE__ */ jsxs(Fragment2, { children: [
-      index > 0 ? /* @__PURE__ */ jsx(DropdownMenuSeparator, {}) : null,
-      /* @__PURE__ */ jsx(DropdownMenuLabel, { "data-way-out-group": "", children: item.group })
+      index > 0 ? /* @__PURE__ */ jsx2(DropdownMenuSeparator, {}) : null,
+      /* @__PURE__ */ jsx2(DropdownMenuLabel, { "data-way-out-group": "", children: item.group })
     ] }) : null,
     item.items?.length ? /* @__PURE__ */ jsxs(DropdownMenuSub, { children: [
       /* @__PURE__ */ jsxs(DropdownMenuSubTrigger, { "data-way-out": item.value, className: "text-foreground", children: [
-        /* @__PURE__ */ jsx("span", { className: "flex-1", children: item.label }),
-        find(item.items, chosen) ? /* @__PURE__ */ jsx(RadixCheckIcon, { className: "mr-1 size-3.5", "aria-hidden": "true" }) : null
+        /* @__PURE__ */ jsx2("span", { className: "flex-1", children: item.label }),
+        find(item.items, chosen) ? /* @__PURE__ */ jsx2(RadixCheckIcon, { className: "mr-1 size-3.5", "aria-hidden": "true" }) : null
       ] }),
-      /* @__PURE__ */ jsx(DropdownMenuSubContent, { children: /* @__PURE__ */ jsx(WayOutEntries, { items: item.items, chosen, onPick }) })
+      /* @__PURE__ */ jsx2(DropdownMenuSubContent, { children: /* @__PURE__ */ jsx2(WayOutEntries, { items: item.items, chosen, onPick }) })
     ] }) : /* @__PURE__ */ jsxs(DropdownMenuItem, { "data-way-out": item.value, className: "text-foreground", onSelect: () => onPick(item.value), children: [
-      /* @__PURE__ */ jsx("span", { className: "flex-1", children: item.label }),
-      item.meta ? /* @__PURE__ */ jsx("span", { className: "text-[11px] text-muted-foreground", children: item.meta }) : null,
-      chosen === item.value ? /* @__PURE__ */ jsx(RadixCheckIcon, { className: "size-3.5", "aria-hidden": "true" }) : null
+      /* @__PURE__ */ jsx2("span", { className: "flex-1", children: item.label }),
+      item.meta ? /* @__PURE__ */ jsx2("span", { className: "text-[11px] text-muted-foreground", children: item.meta }) : null,
+      chosen === item.value ? /* @__PURE__ */ jsx2(RadixCheckIcon, { className: "size-3.5", "aria-hidden": "true" }) : null
     ] })
   ] }, item.value)) });
 }
@@ -169,8 +224,8 @@ function DecisionControl({
   className,
   "aria-label": ariaLabel
 }) {
-  const [otherOpen, setOtherOpen] = React.useState(false);
-  const [chipOpen, setChipOpen] = React.useState(false);
+  const [otherOpen, setOtherOpen] = React2.useState(false);
+  const [chipOpen, setChipOpen] = React2.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);
@@ -180,16 +235,16 @@ function DecisionControl({
   const primary = yesMode && yesKinds?.[0]?.value === yesKind;
   const wayOutMenu = /* @__PURE__ */ jsxs(Fragment2, { children: [
     wayOut?.length ? /* @__PURE__ */ jsxs(Fragment2, { children: [
-      /* @__PURE__ */ jsx(WayOutEntries, { items: wayOut, chosen: wayOutValue, onPick: (v) => onWayOut?.(v) }),
-      /* @__PURE__ */ jsx(DropdownMenuSeparator, {})
+      /* @__PURE__ */ jsx2(WayOutEntries, { items: wayOut, chosen: wayOutValue, onPick: (v) => onWayOut?.(v) }),
+      /* @__PURE__ */ jsx2(DropdownMenuSeparator, {})
     ] }) : null,
     /* @__PURE__ */ jsxs(DropdownMenuItem, { "data-way-out": "skip", className: "text-foreground", onSelect: onSkip, children: [
-      /* @__PURE__ */ jsx("span", { className: "flex-1", children: skipLabel }),
-      skipped ? /* @__PURE__ */ jsx(RadixCheckIcon, { className: "size-3.5", "aria-hidden": "true" }) : null
+      /* @__PURE__ */ jsx2("span", { className: "flex-1", children: skipLabel }),
+      skipped ? /* @__PURE__ */ jsx2(RadixCheckIcon, { className: "size-3.5", "aria-hidden": "true" }) : null
     ] })
   ] });
   const stage = size === "stage";
-  const button = (a) => /* @__PURE__ */ 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__ */ jsx(
+  const button = (a) => /* @__PURE__ */ jsx2("span", { "data-decision-slot": a, "data-suggested": suggested === a ? "" : void 0, className: cn("inline-flex max-sm:flex-1", suggested === a && ring), children: /* @__PURE__ */ jsx2(
     Button2,
     {
       variant: value === a ? a === "no" ? "danger" : "primary" : "outline",
@@ -227,7 +282,7 @@ function DecisionControl({
               setOtherOpen(next);
             },
             children: [
-              /* @__PURE__ */ 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__ */ jsx(DropdownMenuTrigger, { asChild: true, disabled, children: /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsx2("span", { "data-decision-slot": "other", "data-suggested": suggested === "other" ? "" : void 0, className: cn("inline-flex max-sm:flex-1", suggested === "other" && ring), children: /* @__PURE__ */ jsx2(DropdownMenuTrigger, { asChild: true, disabled, children: /* @__PURE__ */ jsx2(
                 Button2,
                 {
                   variant: otherOn ? "primary" : "outline",
@@ -240,12 +295,12 @@ function DecisionControl({
                   children: word("other")
                 }
               ) }) }),
-              /* @__PURE__ */ jsx(DropdownMenuContent, { align: "start", className: "min-w-48", children: wayOutMenu })
+              /* @__PURE__ */ jsx2(DropdownMenuContent, { align: "start", className: "min-w-48", children: wayOutMenu })
             ]
           }
         ),
-        /* @__PURE__ */ 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__ */ jsxs(DropdownMenu, { open: chipOpen, onOpenChange: setChipOpen, children: [
-          /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, disabled, children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx2("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__ */ jsxs(DropdownMenu, { open: chipOpen, onOpenChange: setChipOpen, children: [
+          /* @__PURE__ */ jsx2(DropdownMenuTrigger, { asChild: true, disabled, children: /* @__PURE__ */ jsx2(
             Chip,
             {
               asChild: true,
@@ -254,10 +309,10 @@ function DecisionControl({
               "data-decision-picker": "",
               "data-picker-primary": primary ? "" : void 0,
               "aria-label": `${yesMode ? word("yes") : word("other")}: ${chipLabel}`,
-              children: /* @__PURE__ */ jsx("button", { type: "button", disabled })
+              children: /* @__PURE__ */ jsx2("button", { type: "button", disabled })
             }
           ) }),
-          /* @__PURE__ */ jsx(DropdownMenuContent, { align: "start", className: "min-w-48", children: yesMode ? /* @__PURE__ */ jsx(WayOutEntries, { items: yesKinds ?? [], chosen: yesKind, onPick: (v) => onYesKind?.(v) }) : wayOutMenu })
+          /* @__PURE__ */ jsx2(DropdownMenuContent, { align: "start", className: "min-w-48", children: yesMode ? /* @__PURE__ */ jsx2(WayOutEntries, { items: yesKinds ?? [], chosen: yesKind, onPick: (v) => onYesKind?.(v) }) : wayOutMenu })
         ] }) })
       ]
     }
@@ -266,7 +321,7 @@ function DecisionControl({
 
 // src/controls/date-field.tsx
 import { parseDateOnly as parseDateOnly2, toDateOnly as toDateOnly2 } from "@ai-matrx/kit/dates";
-import * as React2 from "react";
+import * as React3 from "react";
 
 // src/controls/date-parse.ts
 import { isValidDateOnly, parseDateOnly, toDateOnly } from "@ai-matrx/kit/dates";
@@ -421,9 +476,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
-import { Fragment as Fragment3, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 var sameDay = (a, b) => a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
-var DateField = React2.forwardRef(
+var DateField = React3.forwardRef(
   ({
     value,
     onValueChange,
@@ -446,15 +501,15 @@ var DateField = React2.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] = React2.useState(null);
-    const [timeDraft, setTimeDraft] = React2.useState(null);
-    const [dayInvalid, setDayInvalid] = React2.useState(false);
-    const [timeInvalid, setTimeInvalid] = React2.useState(false);
-    const [open, setOpen] = React2.useState(false);
-    const dayRef = React2.useRef(null);
-    const timeRef = React2.useRef(null);
+    const [dayDraft, setDayDraft] = React3.useState(null);
+    const [timeDraft, setTimeDraft] = React3.useState(null);
+    const [dayInvalid, setDayInvalid] = React3.useState(false);
+    const [timeInvalid, setTimeInvalid] = React3.useState(false);
+    const [open, setOpen] = React3.useState(false);
+    const dayRef = React3.useRef(null);
+    const timeRef = React3.useRef(null);
     const hasDraft = dayDraft !== null || timeDraft !== null;
-    React2.useEffect(() => {
+    React3.useEffect(() => {
       if (!hasDraft) return;
       const onKey = (e) => {
         if (e.key !== "Escape") return;
@@ -550,7 +605,7 @@ var DateField = React2.forwardRef(
       }
     };
     const panelKind = hasDay ? "day" : "time";
-    const panel = panelKind === "day" ? /* @__PURE__ */ jsx2(
+    const panel = panelKind === "day" ? /* @__PURE__ */ jsx3(
       CalendarGrid,
       {
         value: day,
@@ -558,12 +613,12 @@ var DateField = React2.forwardRef(
         onPick: pickDay,
         onClose: () => setOpen(false),
         footer: /* @__PURE__ */ jsxs2(Fragment3, { children: [
-          /* @__PURE__ */ jsx2("button", { type: "button", className: "matrx-date-panel-action", onClick: () => pickDay(toDateOnly2(/* @__PURE__ */ new Date())), children: "Today" }),
-          !empty && clearable ? /* @__PURE__ */ jsx2("button", { type: "button", className: "matrx-date-panel-action", onClick: clear, children: "Clear" }) : null
+          /* @__PURE__ */ jsx3("button", { type: "button", className: "matrx-date-panel-action", onClick: () => pickDay(toDateOnly2(/* @__PURE__ */ new Date())), children: "Today" }),
+          !empty && clearable ? /* @__PURE__ */ jsx3("button", { type: "button", className: "matrx-date-panel-action", onClick: clear, children: "Clear" }) : null
         ] })
       }
-    ) : /* @__PURE__ */ jsx2(TimeList, { value: time, locale, onPick: pickTime, onClose: () => setOpen(false) });
-    const glyph = /* @__PURE__ */ jsx2(
+    ) : /* @__PURE__ */ jsx3(TimeList, { value: time, locale, onPick: pickTime, onClose: () => setOpen(false) });
+    const glyph = /* @__PURE__ */ jsx3(
       "button",
       {
         type: "button",
@@ -574,7 +629,7 @@ var DateField = React2.forwardRef(
         "aria-expanded": open,
         "data-matrx-date-trigger": "",
         onClick: () => setOpen((o) => !o),
-        children: hasDay ? /* @__PURE__ */ jsx2(CalendarIcon, {}) : /* @__PURE__ */ jsx2(ClockIcon, {})
+        children: hasDay ? /* @__PURE__ */ jsx3(CalendarIcon, {}) : /* @__PURE__ */ jsx3(ClockIcon, {})
       }
     );
     const capsule = /* @__PURE__ */ jsxs2(
@@ -599,7 +654,7 @@ var DateField = React2.forwardRef(
         },
         children: [
           glyph,
-          hasDay ? /* @__PURE__ */ jsx2(
+          hasDay ? /* @__PURE__ */ jsx3(
             "input",
             {
               ref: dayRef,
@@ -624,7 +679,7 @@ var DateField = React2.forwardRef(
               onKeyDown: inputKeys("day")
             }
           ) : null,
-          hasTime ? /* @__PURE__ */ jsx2(
+          hasTime ? /* @__PURE__ */ jsx3(
             "input",
             {
               ref: timeRef,
@@ -650,19 +705,19 @@ var DateField = React2.forwardRef(
               onKeyDown: inputKeys("time")
             }
           ) : null,
-          clearable && !empty && !disabled ? /* @__PURE__ */ jsx2("button", { type: "button", "aria-label": "Clear", "data-matrx-date-clear": "", onClick: clear, children: /* @__PURE__ */ jsx2(XIcon, {}) }) : null
+          clearable && !empty && !disabled ? /* @__PURE__ */ jsx3("button", { type: "button", "aria-label": "Clear", "data-matrx-date-clear": "", onClick: clear, children: /* @__PURE__ */ jsx3(XIcon, {}) }) : null
         ]
       }
     );
     if (isMobile) {
       return /* @__PURE__ */ jsxs2(Fragment3, { children: [
         capsule,
-        /* @__PURE__ */ jsx2(BottomSheet, { open, onOpenChange: setOpen, title: hasDay ? "Pick a date" : "Pick a time", surface: "solid", children: /* @__PURE__ */ jsx2("div", { className: "matrx-date-sheet", children: panel }) })
+        /* @__PURE__ */ jsx3(BottomSheet, { open, onOpenChange: setOpen, title: hasDay ? "Pick a date" : "Pick a time", surface: "solid", children: /* @__PURE__ */ jsx3("div", { className: "matrx-date-sheet", children: panel }) })
       ] });
     }
     return /* @__PURE__ */ jsxs2(Popover, { open, onOpenChange: setOpen, children: [
-      /* @__PURE__ */ jsx2(PopoverAnchor, { asChild: true, children: capsule }),
-      /* @__PURE__ */ jsx2(
+      /* @__PURE__ */ jsx3(PopoverAnchor, { asChild: true, children: capsule }),
+      /* @__PURE__ */ jsx3(
         PopoverContent,
         {
           sizing: "content",
@@ -681,9 +736,9 @@ var DateField = React2.forwardRef(
   }
 );
 DateField.displayName = "DateField";
-var DateTimeField = React2.forwardRef((props, ref) => /* @__PURE__ */ jsx2(DateField, { ref, ...props, mode: "datetime" }));
+var DateTimeField = React3.forwardRef((props, ref) => /* @__PURE__ */ jsx3(DateField, { ref, ...props, mode: "datetime" }));
 DateTimeField.displayName = "DateTimeField";
-var TimeField = React2.forwardRef((props, ref) => /* @__PURE__ */ jsx2(DateField, { ref, ...props, mode: "time" }));
+var TimeField = React3.forwardRef((props, ref) => /* @__PURE__ */ jsx3(DateField, { ref, ...props, mode: "time" }));
 TimeField.displayName = "TimeField";
 function CalendarGrid({
   value,
@@ -694,15 +749,15 @@ function CalendarGrid({
 }) {
   const selected = parseDateOnly2(value);
   const today = /* @__PURE__ */ new Date();
-  const [focus, setFocus] = React2.useState(() => selected ?? today);
-  const gridRef = React2.useRef(null);
+  const [focus, setFocus] = React3.useState(() => selected ?? today);
+  const gridRef = React3.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" });
-  React2.useEffect(() => {
+  React3.useEffect(() => {
     gridRef.current?.querySelector('[tabindex="0"]')?.focus();
   }, [focus]);
   const move = (days2, months = 0) => setFocus((f) => {
@@ -738,16 +793,16 @@ function CalendarGrid({
   const headers = days.slice(0, 7);
   return /* @__PURE__ */ jsxs2("div", { className: "matrx-date-panel", "data-matrx-date-panel": "calendar", children: [
     /* @__PURE__ */ jsxs2("div", { className: "matrx-date-panel-head", children: [
-      /* @__PURE__ */ jsx2("button", { type: "button", className: "matrx-date-panel-nav", "aria-label": "Previous month", onClick: () => move(0, -1), children: /* @__PURE__ */ jsx2(ChevronLeftIcon, {}) }),
-      /* @__PURE__ */ jsx2("span", { className: "matrx-date-panel-title", "aria-live": "polite", children: monthFmt.format(focus) }),
-      /* @__PURE__ */ jsx2("button", { type: "button", className: "matrx-date-panel-nav", "aria-label": "Next month", onClick: () => move(0, 1), children: /* @__PURE__ */ jsx2(ChevronRightIcon, {}) })
+      /* @__PURE__ */ jsx3("button", { type: "button", className: "matrx-date-panel-nav", "aria-label": "Previous month", onClick: () => move(0, -1), children: /* @__PURE__ */ jsx3(ChevronLeftIcon, {}) }),
+      /* @__PURE__ */ jsx3("span", { className: "matrx-date-panel-title", "aria-live": "polite", children: monthFmt.format(focus) }),
+      /* @__PURE__ */ jsx3("button", { type: "button", className: "matrx-date-panel-nav", "aria-label": "Next month", onClick: () => move(0, 1), children: /* @__PURE__ */ jsx3(ChevronRightIcon, {}) })
     ] }),
     /* @__PURE__ */ jsxs2("div", { ref: gridRef, role: "grid", "aria-label": monthFmt.format(focus), className: "matrx-date-grid", onKeyDown, children: [
-      /* @__PURE__ */ jsx2("div", { role: "row", className: "matrx-date-row", children: headers.map((d) => /* @__PURE__ */ jsx2("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__ */ jsx2("div", { role: "row", className: "matrx-date-row", children: days.slice(w * 7, w * 7 + 7).map((d) => {
+      /* @__PURE__ */ jsx3("div", { role: "row", className: "matrx-date-row", children: headers.map((d) => /* @__PURE__ */ jsx3("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__ */ jsx3("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__ */ jsx2("span", { role: "gridcell", "aria-selected": isSelected, children: /* @__PURE__ */ jsx2(
+        return /* @__PURE__ */ jsx3("span", { role: "gridcell", "aria-selected": isSelected, children: /* @__PURE__ */ jsx3(
           "button",
           {
             type: "button",
@@ -767,7 +822,7 @@ function CalendarGrid({
         ) }, d.toISOString());
       }) }, w))
     ] }),
-    footer ? /* @__PURE__ */ jsx2("div", { className: "matrx-date-panel-foot", children: footer }) : null
+    footer ? /* @__PURE__ */ jsx3("div", { className: "matrx-date-panel-foot", children: footer }) : null
   ] });
 }
 function TimeList({
@@ -776,10 +831,10 @@ function TimeList({
   onPick,
   onClose
 }) {
-  const listRef = React2.useRef(null);
+  const listRef = React3.useRef(null);
   const start = value ? TIME_SLOTS.findIndex((s) => s >= value) : TIME_SLOTS.indexOf("09:00");
-  const [active, setActive] = React2.useState(start < 0 ? TIME_SLOTS.length - 1 : start);
-  React2.useEffect(() => {
+  const [active, setActive] = React3.useState(start < 0 ? TIME_SLOTS.length - 1 : start);
+  React3.useEffect(() => {
     const el = listRef.current?.querySelector(`[data-index="${active}"]`);
     el?.focus();
     el?.scrollIntoView?.({ block: "nearest" });
@@ -799,7 +854,7 @@ function TimeList({
       run();
     }
   };
-  return /* @__PURE__ */ jsx2("div", { ref: listRef, role: "listbox", "aria-label": "Times", className: "matrx-date-panel matrx-time-list", onKeyDown, children: TIME_SLOTS.map((slot, i) => /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx3("div", { ref: listRef, role: "listbox", "aria-label": "Times", className: "matrx-date-panel matrx-time-list", onKeyDown, children: TIME_SLOTS.map((slot, i) => /* @__PURE__ */ jsx3(
     "button",
     {
       type: "button",
@@ -818,7 +873,7 @@ function TimeList({
 
 // src/controls/number-stepper.tsx
 import { useState as useState3, useEffect as useEffect2 } from "react";
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 function NumberStepper({
   value,
   onChange,
@@ -855,7 +910,7 @@ function NumberStepper({
         className
       ),
       children: [
-        /* @__PURE__ */ jsx3(
+        /* @__PURE__ */ jsx4(
           "button",
           {
             type: "button",
@@ -866,10 +921,10 @@ function NumberStepper({
             className: cn(btnCls, "rounded-l-md border-r-0"),
             tabIndex: -1,
             "aria-label": "Decrease",
-            children: /* @__PURE__ */ jsx3(MinusIcon, { width: 12, height: 12, strokeWidth: 2.25 })
+            children: /* @__PURE__ */ jsx4(MinusIcon, { width: 12, height: 12, strokeWidth: 2.25 })
           }
         ),
-        /* @__PURE__ */ jsx3(
+        /* @__PURE__ */ jsx4(
           "input",
           {
             type: "text",
@@ -900,7 +955,7 @@ function NumberStepper({
             )
           }
         ),
-        /* @__PURE__ */ jsx3(
+        /* @__PURE__ */ jsx4(
           "button",
           {
             type: "button",
@@ -911,7 +966,7 @@ function NumberStepper({
             className: cn(btnCls, "rounded-r-md border-l-0"),
             tabIndex: -1,
             "aria-label": "Increase",
-            children: /* @__PURE__ */ jsx3(PlusIcon, { width: 12, height: 12, strokeWidth: 2.25 })
+            children: /* @__PURE__ */ jsx4(PlusIcon, { width: 12, height: 12, strokeWidth: 2.25 })
           }
         )
       ]
@@ -920,7 +975,7 @@ function NumberStepper({
 }
 
 // src/controls/stage-steps.tsx
-import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs4 } from "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;
@@ -943,7 +998,7 @@ 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__ */ jsx4("ol", { "data-matrx-control": "stage-steps", "data-labels": labels, className: cn("matrx-stage-steps", className), ...props, children: slots.map((slot, n) => {
+  return /* @__PURE__ */ jsx5("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];
@@ -957,7 +1012,7 @@ function StageSteps({ steps, current, labels = "all", maxVisible, className, ...
           "aria-label": `${hidden.length} more steps: ${names}`,
           className: "matrx-stage-steps-item",
           children: [
-            n > 0 ? /* @__PURE__ */ jsx4("span", { className: "matrx-stage-steps-sep", "aria-hidden": "true" }) : null,
+            n > 0 ? /* @__PURE__ */ jsx5("span", { className: "matrx-stage-steps-sep", "aria-hidden": "true" }) : null,
             /* @__PURE__ */ jsxs4("span", { className: "matrx-stage-steps-more", "aria-hidden": "true", children: [
               "+",
               hidden.length
@@ -979,11 +1034,11 @@ function StageSteps({ steps, current, labels = "all", maxVisible, className, ...
         title: step.label,
         className: "matrx-stage-steps-item",
         children: [
-          n > 0 ? /* @__PURE__ */ jsx4("span", { className: "matrx-stage-steps-sep", "aria-hidden": "true" }) : null,
-          /* @__PURE__ */ jsx4("span", { className: "matrx-stage-steps-mark", "aria-hidden": "true", children: state === "done" ? /* @__PURE__ */ jsx4(RadixCheckIcon, {}) : i + 1 }),
+          n > 0 ? /* @__PURE__ */ jsx5("span", { className: "matrx-stage-steps-sep", "aria-hidden": "true" }) : null,
+          /* @__PURE__ */ jsx5("span", { className: "matrx-stage-steps-mark", "aria-hidden": "true", children: state === "done" ? /* @__PURE__ */ jsx5(RadixCheckIcon, {}) : i + 1 }),
           /* @__PURE__ */ jsxs4("span", { className: "matrx-stage-steps-label", children: [
             step.label,
-            state === "done" ? /* @__PURE__ */ jsx4("span", { className: "matrx-sr-only", children: " (done)" }) : null
+            state === "done" ? /* @__PURE__ */ jsx5("span", { className: "matrx-sr-only", children: " (done)" }) : null
           ] })
         ]
       },
@@ -994,7 +1049,7 @@ function StageSteps({ steps, current, labels = "all", maxVisible, className, ...
 
 // src/controls/clamped-number-input.tsx
 import { useEffect as useEffect3, useState as useState4 } from "react";
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { jsx as jsx6 } from "react/jsx-runtime";
 function shownDraft(raw, min, max, decimal = false) {
   const next = clampDraft(raw, min, max, decimal);
   if (next === null) return null;
@@ -1039,7 +1094,7 @@ function ClampedNumberInput({
     setDraft(String(next));
     if (next !== value) onChange(next);
   };
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx6(
     Input,
     {
       id,
@@ -1071,13 +1126,13 @@ function ClampedNumberInput({
 }
 
 // src/controls/light-switch-toggle.tsx
-import { useState as useState5, forwardRef as forwardRef2 } from "react";
-import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+import { useState as useState5, forwardRef as forwardRef3 } from "react";
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
 var defaultSizes = {
   width: "w-48",
   height: "h-16"
 };
-var LightSwitchToggle = forwardRef2(
+var LightSwitchToggle = forwardRef3(
   ({
     variant,
     defaultValue = false,
@@ -1122,7 +1177,7 @@ var LightSwitchToggle = forwardRef2(
           isActive ? activeButtonClasses : inactiveButtonClasses
         ),
         children: [
-          /* @__PURE__ */ jsx6(
+          /* @__PURE__ */ jsx7(
             "div",
             {
               className: cn(
@@ -1133,7 +1188,7 @@ var LightSwitchToggle = forwardRef2(
               )
             }
           ),
-          /* @__PURE__ */ jsx6(
+          /* @__PURE__ */ jsx7(
             "span",
             {
               className: cn(
@@ -1146,8 +1201,8 @@ var LightSwitchToggle = forwardRef2(
         ]
       }
     );
-    return /* @__PURE__ */ jsx6("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsxs5("div", { ref, className: containerClasses, children: [
-      /* @__PURE__ */ jsx6("div", { className: "absolute left-1/2 top-0 bottom-0 w-[2px] bg-border transform -translate-x-1/2 z-10" }),
+    return /* @__PURE__ */ jsx7("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsxs5("div", { ref, className: containerClasses, children: [
+      /* @__PURE__ */ jsx7("div", { className: "absolute left-1/2 top-0 bottom-0 w-[2px] bg-border transform -translate-x-1/2 z-10" }),
       renderOption(!isOn, labels.off, "left", () => handleToggle(false)),
       renderOption(isOn, labels.on, "right", () => handleToggle(true))
     ] }) });
@@ -1157,7 +1212,7 @@ LightSwitchToggle.displayName = "LightSwitchToggle";
 
 // src/controls/option-combobox.tsx
 import { useState as useState6 } from "react";
-import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
 function OptionCombobox({
   value,
   onChange,
@@ -1203,7 +1258,7 @@ function OptionCombobox({
         }
       },
       children: [
-        /* @__PURE__ */ jsx7(PopoverTrigger, { asChild: true, disabled, children: /* @__PURE__ */ jsxs6(
+        /* @__PURE__ */ jsx8(PopoverTrigger, { asChild: true, disabled, children: /* @__PURE__ */ jsxs6(
           "button",
           {
             id,
@@ -1233,22 +1288,22 @@ function OptionCombobox({
                   ),
                   children: [
                     hasValue ? getLabel(value) : placeholder,
-                    hint && /* @__PURE__ */ jsx7("span", { className: "ml-1.5 text-muted-foreground", children: hint })
+                    hint && /* @__PURE__ */ jsx8("span", { className: "ml-1.5 text-muted-foreground", children: hint })
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx7(SelectChevron, { size: "sm", className: variant === "inline" ? "h-3 w-3" : void 0 })
+              /* @__PURE__ */ jsx8(SelectChevron, { size: "sm", className: variant === "inline" ? "h-3 w-3" : void 0 })
             ]
           }
         ) }),
-        /* @__PURE__ */ jsx7(
+        /* @__PURE__ */ jsx8(
           PopoverContent,
           {
             sizing: "content",
             align: "start",
             className: "p-0",
             children: /* @__PURE__ */ jsxs6(Command, { shouldFilter: false, children: [
-              searchable && /* @__PURE__ */ jsx7(
+              searchable && /* @__PURE__ */ jsx8(
                 CommandInput,
                 {
                   placeholder: searchPlaceholder,
@@ -1267,21 +1322,21 @@ function OptionCombobox({
                   if (visible.length === 0) return null;
                   const folded = group.collapsed && !showMore && !q && !group.options.includes(value);
                   if (folded) {
-                    return /* @__PURE__ */ jsx7(CommandGroup, { children: /* @__PURE__ */ jsxs6(
+                    return /* @__PURE__ */ jsx8(CommandGroup, { children: /* @__PURE__ */ jsxs6(
                       CommandItem,
                       {
                         value: `__more_${gi}`,
                         onSelect: () => setShowMore(true),
                         className: "text-muted-foreground",
                         children: [
-                          /* @__PURE__ */ jsx7(ChevronRightIcon, { className: "h-3.5 w-3.5" }),
+                          /* @__PURE__ */ jsx8(ChevronRightIcon, { className: "h-3.5 w-3.5" }),
                           group.heading ?? "More",
-                          /* @__PURE__ */ jsx7("span", { className: "ml-auto type-secondary tabular-nums", children: group.options.length })
+                          /* @__PURE__ */ jsx8("span", { className: "ml-auto type-secondary tabular-nums", children: group.options.length })
                         ]
                       }
                     ) }, `g-${gi}`);
                   }
-                  return /* @__PURE__ */ jsx7(CommandGroup, { heading: group.heading, children: visible.map((o) => {
+                  return /* @__PURE__ */ jsx8(CommandGroup, { heading: group.heading, children: visible.map((o) => {
                     const selected = o === value;
                     const h = getHint?.(o);
                     return /* @__PURE__ */ jsxs6(
@@ -1294,9 +1349,9 @@ function OptionCombobox({
                           renderIcon?.(o),
                           /* @__PURE__ */ jsxs6("span", { className: "min-w-0 flex-1 truncate", children: [
                             getLabel(o),
-                            h && /* @__PURE__ */ jsx7("span", { className: "ml-1.5 text-muted-foreground", children: h })
+                            h && /* @__PURE__ */ jsx8("span", { className: "ml-1.5 text-muted-foreground", children: h })
                           ] }),
-                          /* @__PURE__ */ jsx7(
+                          /* @__PURE__ */ jsx8(
                             CheckIcon,
                             {
                               className: cn(
@@ -1398,7 +1453,7 @@ function groupRatioOptions(options) {
 }
 
 // src/controls/aspect-ratio-select.tsx
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { jsx as jsx9 } from "react/jsx-runtime";
 function AspectRatioGlyph({
   value,
   className
@@ -1406,7 +1461,7 @@ function AspectRatioGlyph({
   const r = parseRatio(value);
   const box = 14;
   if (!r) {
-    return /* @__PURE__ */ jsx8(
+    return /* @__PURE__ */ jsx9(
       "span",
       {
         "aria-hidden": true,
@@ -1414,14 +1469,14 @@ function AspectRatioGlyph({
           "inline-flex h-3.5 w-3.5 shrink-0 items-center justify-center",
           className
         ),
-        children: /* @__PURE__ */ jsx8("span", { className: "h-2.5 w-2.5 rounded-[2px] border border-dashed border-current opacity-60" })
+        children: /* @__PURE__ */ jsx9("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__ */ jsx8(
+  return /* @__PURE__ */ jsx9(
     "span",
     {
       "aria-hidden": true,
@@ -1429,7 +1484,7 @@ function AspectRatioGlyph({
         "inline-flex h-3.5 w-3.5 shrink-0 items-center justify-center",
         className
       ),
-      children: /* @__PURE__ */ jsx8(
+      children: /* @__PURE__ */ jsx9(
         "span",
         {
           className: "rounded-[2px] border-[1.5px] border-current opacity-80",
@@ -1456,7 +1511,7 @@ function AspectRatioSelect({
     { options: common },
     ...more.length ? [{ heading: "More ratios", options: more, collapsed: true }] : []
   ];
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx9(
     OptionCombobox,
     {
       value,
@@ -1464,7 +1519,7 @@ function AspectRatioSelect({
       groups,
       getLabel: (o) => parseRatio(o) ? o : humanizeRatioWord(o),
       getHint: (o) => ratioShapeName(o),
-      renderIcon: (o) => /* @__PURE__ */ jsx8(AspectRatioGlyph, { value: o, className: "text-muted-foreground" }),
+      renderIcon: (o) => /* @__PURE__ */ jsx9(AspectRatioGlyph, { value: o, className: "text-muted-foreground" }),
       searchable: options.length > 12,
       searchPlaceholder: "Search ratios\u2026",
       placeholder,
@@ -1478,7 +1533,7 @@ function AspectRatioSelect({
 }
 
 // src/indicator-strip.tsx
-import { jsx as jsx9 } from "react/jsx-runtime";
+import { jsx as jsx10 } from "react/jsx-runtime";
 var TONE = {
   danger: "text-destructive",
   warning: "text-warning",
@@ -1491,7 +1546,7 @@ function indicatorText(item) {
   return item.detail ? `${item.label}: yes \u2014 ${item.detail}` : `${item.label}: yes`;
 }
 function IndicatorStrip({ items, className, ...props }) {
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx10(
     "span",
     {
       "data-slot": "indicator-strip",
@@ -1501,7 +1556,7 @@ function IndicatorStrip({ items, className, ...props }) {
       children: items.map((item) => {
         const Icon = item.icon;
         const text = indicatorText(item);
-        return /* @__PURE__ */ jsx9(
+        return /* @__PURE__ */ jsx10(
           "span",
           {
             role: "listitem",
@@ -1514,7 +1569,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__ */ jsx9(Icon, { className: "size-3.5", "aria-hidden": true })
+            children: /* @__PURE__ */ jsx10(Icon, { className: "size-3.5", "aria-hidden": true })
           },
           item.id
         );
@@ -1524,7 +1579,7 @@ function IndicatorStrip({ items, className, ...props }) {
 }
 
 // src/controls/middle-truncate.tsx
-import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
 var DEFAULT_TAIL = 10;
 function splitForMiddleTruncate(text, tail = DEFAULT_TAIL) {
   const keep = Math.min(tail, Math.floor(text.length / 2));
@@ -1538,14 +1593,14 @@ function MiddleTruncate({
 }) {
   const { head, end } = splitForMiddleTruncate(text, tail);
   return /* @__PURE__ */ jsxs7("span", { className: cn("flex min-w-0 items-baseline", className), title: text, children: [
-    /* @__PURE__ */ jsx10("span", { className: "sr-only", children: text }),
-    /* @__PURE__ */ jsx10("span", { "aria-hidden": true, className: "min-w-0 truncate whitespace-pre", children: head }),
-    end ? /* @__PURE__ */ jsx10("span", { "aria-hidden": true, className: "shrink-0 whitespace-pre", children: end }) : null
+    /* @__PURE__ */ jsx11("span", { className: "sr-only", children: text }),
+    /* @__PURE__ */ jsx11("span", { "aria-hidden": true, className: "min-w-0 truncate whitespace-pre", children: head }),
+    end ? /* @__PURE__ */ jsx11("span", { "aria-hidden": true, className: "shrink-0 whitespace-pre", children: end }) : null
   ] });
 }
 
 // src/controls/callout-banner.tsx
-import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
 var TONE2 = {
   destructive: { container: "border-destructive/30 bg-destructive/10", icon: "text-destructive" },
   warning: { container: "border-warning/30 bg-warning/10", icon: "text-warning" },
@@ -1574,15 +1629,15 @@ function CalloutBanner({
       role: "status",
       children: [
         /* @__PURE__ */ jsxs8("div", { className: "flex min-w-0 flex-1 items-start gap-2", children: [
-          Icon && /* @__PURE__ */ jsx11(Icon, { className: cn("mt-0.5 h-4 w-4 shrink-0", t.icon), "aria-hidden": true }),
+          Icon && /* @__PURE__ */ jsx12(Icon, { className: cn("mt-0.5 h-4 w-4 shrink-0", t.icon), "aria-hidden": true }),
           /* @__PURE__ */ jsxs8("div", { className: "min-w-0", children: [
-            /* @__PURE__ */ jsx11("p", { className: "type-title text-foreground", children: title }),
-            description && /* @__PURE__ */ jsx11("p", { className: "mt-0.5 type-secondary text-muted-foreground", children: description })
+            /* @__PURE__ */ jsx12("p", { className: "type-title text-foreground", children: title }),
+            description && /* @__PURE__ */ jsx12("p", { className: "mt-0.5 type-secondary text-muted-foreground", children: description })
           ] })
         ] }),
         /* @__PURE__ */ jsxs8("div", { className: "flex shrink-0 items-center gap-1.5 sm:ml-2", children: [
           actions,
-          onDismiss && /* @__PURE__ */ jsx11(Button2, { variant: "quiet", icon: /* @__PURE__ */ jsx11(XIcon, {}), "aria-label": "Dismiss", onClick: onDismiss, disabled: dismissing })
+          onDismiss && /* @__PURE__ */ jsx12(Button2, { variant: "quiet", icon: /* @__PURE__ */ jsx12(XIcon, {}), "aria-label": "Dismiss", onClick: onDismiss, disabled: dismissing })
         ] })
       ]
     }
@@ -1590,8 +1645,8 @@ function CalloutBanner({
 }
 
 // src/controls/gated-action-button.tsx
-import * as React3 from "react";
-import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
+import * as React4 from "react";
+import { jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
 function firstBlockingReason(checks) {
   for (const check of checks) {
     if (check && check.when) return check.reason;
@@ -1607,7 +1662,7 @@ function GatedActionButton({
   children,
   ...buttonProps
 }) {
-  const reactId = React3.useId();
+  const reactId = React4.useId();
   const blocked = Boolean(reason && reason.trim());
   const reasonId = `gated-action-reason-${reactId}`;
   return /* @__PURE__ */ jsxs9(
@@ -1618,7 +1673,7 @@ function GatedActionButton({
         wrapperClassName
       ),
       children: [
-        blocked ? /* @__PURE__ */ jsx12(
+        blocked ? /* @__PURE__ */ jsx13(
           "span",
           {
             id: reasonId,
@@ -1631,7 +1686,7 @@ function GatedActionButton({
             children: reason
           }
         ) : null,
-        /* @__PURE__ */ jsx12(
+        /* @__PURE__ */ jsx13(
           Button,
           {
             ...buttonProps,
@@ -1649,7 +1704,7 @@ GatedActionButton.displayName = "GatedActionButton";
 
 // src/controls/search-input.tsx
 import { useEffect as useEffect4, useRef as useRef2, useState as useState7 } from "react";
-import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
 function SearchInput({
   value,
   defaultValue = "",
@@ -1712,14 +1767,14 @@ function SearchInput({
       className: cn("flex min-w-0 items-center gap-2", className),
       children: [
         /* @__PURE__ */ jsxs10("div", { className: "relative min-w-0 flex-1", children: [
-          /* @__PURE__ */ jsx13(
+          /* @__PURE__ */ jsx14(
             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__ */ jsx13(
+          /* @__PURE__ */ jsx14(
             Input,
             {
               ref: inputRef,
@@ -1733,7 +1788,7 @@ function SearchInput({
               adornment: showClearButton && searchValue ? "both" : "start"
             }
           ),
-          showClearButton && searchValue ? /* @__PURE__ */ jsx13(
+          showClearButton && searchValue ? /* @__PURE__ */ jsx14(
             "button",
             {
               type: "button",
@@ -1741,14 +1796,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__ */ jsx13(XIcon, { className: "h-3.5 w-3.5" })
+              children: /* @__PURE__ */ jsx14(XIcon, { className: "h-3.5 w-3.5" })
             }
           ) : null
         ] }),
-        showSubmitButton ? /* @__PURE__ */ jsx13(
+        showSubmitButton ? /* @__PURE__ */ jsx14(
           Button2,
           {
-            icon: loading ? /* @__PURE__ */ jsx13(Loader2Icon, { className: "animate-spin" }) : /* @__PURE__ */ jsx13(SearchIcon, {}),
+            icon: loading ? /* @__PURE__ */ jsx14(Loader2Icon, { className: "animate-spin" }) : /* @__PURE__ */ jsx14(SearchIcon, {}),
             variant: "primary",
             type: "submit",
             disabled: disabled || loading,
@@ -1763,7 +1818,7 @@ function SearchInput({
 
 // src/controls/collapsible-text.tsx
 import { useLayoutEffect, useRef as useRef3, useState as useState8 } from "react";
-import { jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
 function CollapsibleText({
   children,
   expanded,
@@ -1798,7 +1853,7 @@ function CollapsibleText({
   const isCollapsed = isOverflowing && !expanded;
   if (showLabel) {
     return /* @__PURE__ */ jsxs11("div", { className: "relative min-w-0", children: [
-      /* @__PURE__ */ jsx14(
+      /* @__PURE__ */ jsx15(
         "div",
         {
           ref: contentRef,
@@ -1822,7 +1877,7 @@ 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__ */ jsx14(ChevronDownIcon, { className: "h-3.5 w-3.5", "aria-hidden": true }) : /* @__PURE__ */ jsx14(ChevronUpIcon, { className: "h-3.5 w-3.5", "aria-hidden": true }),
+            isCollapsed ? /* @__PURE__ */ jsx15(ChevronDownIcon, { className: "h-3.5 w-3.5", "aria-hidden": true }) : /* @__PURE__ */ jsx15(ChevronUpIcon, { className: "h-3.5 w-3.5", "aria-hidden": true }),
             isCollapsed ? expandLabel : collapseLabel
           ]
         }
@@ -1830,7 +1885,7 @@ function CollapsibleText({
     ] });
   }
   return /* @__PURE__ */ jsxs11("div", { className: "relative min-w-0", children: [
-    /* @__PURE__ */ jsx14(
+    /* @__PURE__ */ jsx15(
       "div",
       {
         ref: contentRef,
@@ -1843,10 +1898,10 @@ function CollapsibleText({
         children
       }
     ),
-    isCollapsed ? /* @__PURE__ */ jsx14("div", { className: "pointer-events-none absolute inset-x-0 bottom-0 flex justify-center", children: /* @__PURE__ */ jsx14(
+    isCollapsed ? /* @__PURE__ */ jsx15("div", { className: "pointer-events-none absolute inset-x-0 bottom-0 flex justify-center", children: /* @__PURE__ */ jsx15(
       Button2,
       {
-        icon: /* @__PURE__ */ jsx14(ChevronDownIcon, {}),
+        icon: /* @__PURE__ */ jsx15(ChevronDownIcon, {}),
         type: "button",
         variant: "outline",
         "aria-label": expandLabel,
@@ -1857,10 +1912,10 @@ function CollapsibleText({
         },
         className: "pointer-events-auto"
       }
-    ) }) : isOverflowing ? /* @__PURE__ */ jsx14("div", { className: "flex justify-center pt-0.5", children: /* @__PURE__ */ jsx14(
+    ) }) : isOverflowing ? /* @__PURE__ */ jsx15("div", { className: "flex justify-center pt-0.5", children: /* @__PURE__ */ jsx15(
       Button2,
       {
-        icon: /* @__PURE__ */ jsx14(ChevronUpIcon, {}),
+        icon: /* @__PURE__ */ jsx15(ChevronUpIcon, {}),
         type: "button",
         variant: "quiet",
         "aria-label": collapseLabel,
@@ -1882,10 +1937,10 @@ function CollapsibleTextGroupControls({
 }) {
   return /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-0.5", children: [
     /* @__PURE__ */ jsxs11(Tooltip, { children: [
-      /* @__PURE__ */ jsx14(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx14(
+      /* @__PURE__ */ jsx15(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx15(
         Button2,
         {
-          icon: /* @__PURE__ */ jsx14(ChevronsDownIcon, { className: "!size-[18px] lg:!size-3.5" }),
+          icon: /* @__PURE__ */ jsx15(ChevronsDownIcon, { className: "!size-[18px] lg:!size-3.5" }),
           type: "button",
           variant: "quiet",
           "aria-label": "Expand all",
@@ -1893,13 +1948,13 @@ function CollapsibleTextGroupControls({
           disabled: disabled || allExpanded
         }
       ) }),
-      /* @__PURE__ */ jsx14(TooltipContent, { side: "top", children: "Expand all" })
+      /* @__PURE__ */ jsx15(TooltipContent, { side: "top", children: "Expand all" })
     ] }),
     /* @__PURE__ */ jsxs11(Tooltip, { children: [
-      /* @__PURE__ */ jsx14(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx14(
+      /* @__PURE__ */ jsx15(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx15(
         Button2,
         {
-          icon: /* @__PURE__ */ jsx14(ChevronsUpIcon, { className: "!size-[18px] lg:!size-3.5" }),
+          icon: /* @__PURE__ */ jsx15(ChevronsUpIcon, { className: "!size-[18px] lg:!size-3.5" }),
           type: "button",
           variant: "quiet",
           "aria-label": "Collapse all",
@@ -1907,14 +1962,14 @@ function CollapsibleTextGroupControls({
           disabled: disabled || !anyExpanded
         }
       ) }),
-      /* @__PURE__ */ jsx14(TooltipContent, { side: "top", children: "Collapse all" })
+      /* @__PURE__ */ jsx15(TooltipContent, { side: "top", children: "Collapse all" })
     ] })
   ] });
 }
 
 // src/controls/info-hint.tsx
 import { useState as useState9, useSyncExternalStore } from "react";
-import { jsx as jsx15, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
 var COARSE_POINTER_QUERY = "(pointer: coarse)";
 function subscribeCoarse(onChange) {
   const mq = window.matchMedia(COARSE_POINTER_QUERY);
@@ -1938,10 +1993,10 @@ function InfoHint({ text, label = "More info", className, side = "top" }) {
   const coarse = useCoarsePointer();
   const isMobile = useIsMobile();
   const [open, setOpen] = useState9(false);
-  const glyph = /* @__PURE__ */ jsx15(InfoIcon, { "aria-hidden": true, className: "h-3.5 w-3.5", strokeWidth: 2 });
+  const glyph = /* @__PURE__ */ jsx16(InfoIcon, { "aria-hidden": true, className: "h-3.5 w-3.5", strokeWidth: 2 });
   if (coarse || isMobile) {
     return /* @__PURE__ */ jsxs12(Popover, { open, onOpenChange: setOpen, children: [
-      /* @__PURE__ */ jsx15(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx15(
+      /* @__PURE__ */ jsx16(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx16(
         "button",
         {
           type: "button",
@@ -1955,7 +2010,7 @@ function InfoHint({ text, label = "More info", className, side = "top" }) {
           children: glyph
         }
       ) }),
-      /* @__PURE__ */ jsx15(
+      /* @__PURE__ */ jsx16(
         PopoverContent,
         {
           side,
@@ -1972,8 +2027,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__ */ jsx15(TooltipProvider, { delayDuration: 200, children: /* @__PURE__ */ jsxs12(Tooltip, { open, onOpenChange: setOpen, children: [
-      /* @__PURE__ */ jsx15(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx15(
+    /* @__PURE__ */ jsx16(TooltipProvider, { delayDuration: 200, children: /* @__PURE__ */ jsxs12(Tooltip, { open, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ jsx16(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx16(
         "button",
         {
           type: "button",
@@ -1989,13 +2044,13 @@ function InfoHint({ text, label = "More info", className, side = "top" }) {
           children: glyph
         }
       ) }),
-      /* @__PURE__ */ jsx15(TooltipContent, { side, className: CONTENT_CLASS, onClick: isolate, children: text })
+      /* @__PURE__ */ jsx16(TooltipContent, { side, className: CONTENT_CLASS, onClick: isolate, children: text })
     ] }) })
   );
 }
 
 // src/controls/status-badge.tsx
-import { jsx as jsx16, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
 var STATUS_TONES = ["success", "warning", "danger", "neutral", "info"];
 var TONE_CLASS = {
   success: "border-success/40 bg-success/15 text-success-ink",
@@ -2027,7 +2082,7 @@ function StatusBadge({ label, tone: tone2, icon: Icon, size = "md", title, trail
         className
       ),
       children: [
-        Icon ? /* @__PURE__ */ jsx16(Icon, { "aria-hidden": true, className: cn("shrink-0", s.icon) }) : null,
+        Icon ? /* @__PURE__ */ jsx17(Icon, { "aria-hidden": true, className: cn("shrink-0", s.icon) }) : null,
         label,
         trailing
       ]
@@ -2036,8 +2091,8 @@ function StatusBadge({ label, tone: tone2, icon: Icon, size = "md", title, trail
 }
 
 // src/controls/structured-section-card.tsx
-import * as React5 from "react";
-import { jsx as jsx17, jsxs as jsxs14 } from "react/jsx-runtime";
+import * as React6 from "react";
+import { jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
 var TITLE_TONE = {
   primary: "text-primary-ink",
   foreground: "text-foreground"
@@ -2062,16 +2117,16 @@ function StructuredSectionCard({
       children: [
         /* @__PURE__ */ jsxs14("div", { className: "flex items-center justify-between border-b border-border bg-muted px-4 py-3", children: [
           /* @__PURE__ */ jsxs14("div", { className: "min-w-0", children: [
-            /* @__PURE__ */ jsx17("h3", { className: cn("font-medium", TITLE_TONE[titleTone]), children: title }),
-            description && /* @__PURE__ */ jsx17("p", { className: "type-body text-muted-foreground", children: description })
+            /* @__PURE__ */ jsx18("h3", { className: cn("font-medium", TITLE_TONE[titleTone]), children: title }),
+            description && /* @__PURE__ */ jsx18("p", { className: "type-body text-muted-foreground", children: description })
           ] }),
-          headerActions.length > 0 && /* @__PURE__ */ jsx17("div", { className: "ml-4 flex shrink-0 items-center space-x-2", children: headerActions.map((action, index) => /* @__PURE__ */ jsx17(React5.Fragment, { children: action }, index)) })
+          headerActions.length > 0 && /* @__PURE__ */ jsx18("div", { className: "ml-4 flex shrink-0 items-center space-x-2", children: headerActions.map((action, index) => /* @__PURE__ */ jsx18(React6.Fragment, { children: action }, index)) })
         ] }),
-        /* @__PURE__ */ jsx17("div", { className: "p-4", children }),
+        /* @__PURE__ */ jsx18("div", { className: "p-4", children }),
         hasFooter && /* @__PURE__ */ jsxs14("div", { className: "flex flex-wrap items-center border-t border-border px-4 py-3", children: [
-          /* @__PURE__ */ jsx17("div", { className: "flex min-w-[33%] flex-1 justify-start space-x-2 sm:min-w-0", children: footerLeft }),
-          /* @__PURE__ */ jsx17("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__ */ jsx17("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__ */ jsx18("div", { className: "flex min-w-[33%] flex-1 justify-start space-x-2 sm:min-w-0", children: footerLeft }),
+          /* @__PURE__ */ jsx18("div", { className: "mt-2 flex min-w-[33%] flex-1 justify-center space-x-2 sm:mt-0 sm:min-w-0", children: footerCenter }),
+          /* @__PURE__ */ jsx18("div", { className: "mt-2 flex min-w-[33%] flex-1 justify-end space-x-2 sm:mt-0 sm:min-w-0", children: footerRight })
         ] })
       ]
     }
@@ -2079,7 +2134,7 @@ function StructuredSectionCard({
 }
 
 // src/controls/icon-dropdown-menu.tsx
-import { jsx as jsx18, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs15 } from "react/jsx-runtime";
 function IconDropdownMenu({
   options,
   value,
@@ -2095,17 +2150,17 @@ function IconDropdownMenu({
     return null;
   }
   return /* @__PURE__ */ jsxs15(DropdownMenu, { children: [
-    /* @__PURE__ */ jsx18(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx18(
+    /* @__PURE__ */ jsx19(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx19(
       Button2,
       {
-        icon: /* @__PURE__ */ jsx18(SelectedIcon, {}),
-        iconEnd: /* @__PURE__ */ jsx18(ChevronDownIcon, {}),
+        icon: /* @__PURE__ */ jsx19(SelectedIcon, {}),
+        iconEnd: /* @__PURE__ */ jsx19(ChevronDownIcon, {}),
         variant: "outline",
         "aria-label": selected.label,
         ...className ? { className } : {}
       }
     ) }),
-    /* @__PURE__ */ jsx18(DropdownMenuContent, { align, className: cn("rounded-2xl p-1", menuWidth), children: options.map((option) => {
+    /* @__PURE__ */ jsx19(DropdownMenuContent, { align, className: cn("rounded-2xl p-1", menuWidth), children: options.map((option) => {
       const isSelected = option.value === value;
       const OptionIcon = option.icon;
       return /* @__PURE__ */ jsxs15(
@@ -2118,9 +2173,9 @@ function IconDropdownMenu({
             isSelected && "bg-primary/10"
           ),
           children: [
-            /* @__PURE__ */ jsx18(OptionIcon, { className: cn("h-4 w-4 shrink-0", isSelected ? "text-primary-ink" : "text-muted-foreground") }),
-            /* @__PURE__ */ jsx18("span", { className: cn("type-body flex-1 leading-tight", isSelected ? "font-medium text-primary-ink" : "text-foreground"), children: option.label }),
-            isSelected && /* @__PURE__ */ jsx18(CheckIcon, { className: "h-4 w-4 shrink-0 text-primary-ink" })
+            /* @__PURE__ */ jsx19(OptionIcon, { className: cn("h-4 w-4 shrink-0", isSelected ? "text-primary-ink" : "text-muted-foreground") }),
+            /* @__PURE__ */ jsx19("span", { className: cn("type-body flex-1 leading-tight", isSelected ? "font-medium text-primary-ink" : "text-foreground"), children: option.label }),
+            isSelected && /* @__PURE__ */ jsx19(CheckIcon, { className: "h-4 w-4 shrink-0 text-primary-ink" })
           ]
         },
         String(option.value)
@@ -2130,7 +2185,7 @@ function IconDropdownMenu({
 }
 
 // src/controls/field.tsx
-import { jsx as jsx19, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs16 } from "react/jsx-runtime";
 function LabeledField({
   label,
   htmlFor,
@@ -2161,27 +2216,27 @@ function LabeledField({
           ),
           children: [
             label,
-            required && /* @__PURE__ */ jsx19("span", { className: "text-destructive ml-1", "aria-hidden": true, children: "*" }),
-            !required && optional && /* @__PURE__ */ jsx19("span", { className: "text-muted-foreground ml-1.5 type-secondary font-normal", children: "(optional)" })
+            required && /* @__PURE__ */ jsx20("span", { className: "text-destructive ml-1", "aria-hidden": true, children: "*" }),
+            !required && optional && /* @__PURE__ */ jsx20("span", { className: "text-muted-foreground ml-1.5 type-secondary font-normal", children: "(optional)" })
           ]
         }
       ),
-      typeof help === "string" && help && /* @__PURE__ */ jsx19(InfoHint, { text: help, label: typeof label === "string" ? `About ${label}` : "Help" }),
-      help && typeof help !== "string" && /* @__PURE__ */ jsx19(TooltipProvider, { delayDuration: 150, children: /* @__PURE__ */ jsxs16(Tooltip, { children: [
-        /* @__PURE__ */ jsx19(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx19(
+      typeof help === "string" && help && /* @__PURE__ */ jsx20(InfoHint, { text: help, label: typeof label === "string" ? `About ${label}` : "Help" }),
+      help && typeof help !== "string" && /* @__PURE__ */ jsx20(TooltipProvider, { delayDuration: 150, children: /* @__PURE__ */ jsxs16(Tooltip, { children: [
+        /* @__PURE__ */ jsx20(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx20(
           "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__ */ jsx19(CircleHelpIcon, { className: "h-3.5 w-3.5" })
+            children: /* @__PURE__ */ jsx20(CircleHelpIcon, { className: "h-3.5 w-3.5" })
           }
         ) }),
-        /* @__PURE__ */ jsx19(TooltipContent, { side: "top", className: "max-w-xs type-secondary", children: help })
+        /* @__PURE__ */ jsx20(TooltipContent, { side: "top", className: "max-w-xs type-secondary", children: help })
       ] }) })
     ] }),
-    description && !error && /* @__PURE__ */ jsx19("p", { className: "type-secondary text-muted-foreground", children: description }),
-    /* @__PURE__ */ jsx19(
+    description && !error && /* @__PURE__ */ jsx20("p", { className: "type-secondary text-muted-foreground", children: description }),
+    /* @__PURE__ */ jsx20(
       "div",
       {
         "data-slot": "field-control",
@@ -2205,9 +2260,9 @@ function LabeledField({
         ),
         children: [
           error ? /* @__PURE__ */ jsxs16("p", { className: "type-secondary text-destructive flex items-center gap-1", children: [
-            /* @__PURE__ */ jsx19(CircleAlertIcon, { className: "h-3 w-3 flex-shrink-0" }),
-            /* @__PURE__ */ jsx19("span", { children: error }),
-            /* @__PURE__ */ jsx19(
+            /* @__PURE__ */ jsx20(CircleAlertIcon, { className: "h-3 w-3 flex-shrink-0" }),
+            /* @__PURE__ */ jsx20("span", { children: error }),
+            /* @__PURE__ */ jsx20(
               ErrorActions,
               {
                 ...typeof error === "string" ? { message: error } : {},
@@ -2221,12 +2276,12 @@ function LabeledField({
               "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__ */ jsx19(CircleAlertIcon, { className: "h-3 w-3 flex-shrink-0" }),
-                /* @__PURE__ */ jsx19("span", { children: "Empty \u2014 the gray text is an example, not your answer." })
+                /* @__PURE__ */ jsx20(CircleAlertIcon, { className: "h-3 w-3 flex-shrink-0" }),
+                /* @__PURE__ */ jsx20("span", { children: "Empty \u2014 the gray text is an example, not your answer." })
               ]
             }
-          ) : /* @__PURE__ */ jsx19("span", {}),
-          hasCounter && /* @__PURE__ */ jsx19(
+          ) : /* @__PURE__ */ jsx20("span", {}),
+          hasCounter && /* @__PURE__ */ jsx20(
             "span",
             {
               className: cn(
@@ -2247,10 +2302,10 @@ function LabeledField({
 import { copyText } from "@ai-matrx/kit/clipboard";
 import { openClipboardFallback } from "@ai-matrx/kit/clipboard-fallback-opener";
 import { toast } from "@ai-matrx/kit/notify";
-import * as React6 from "react";
+import * as React7 from "react";
 import { createPortal } from "react-dom";
-import { jsx as jsx20, jsxs as jsxs17 } from "react/jsx-runtime";
-var { useState: useState10, useLayoutEffect: useLayoutEffect2, useRef: useRef4 } = React6;
+import { jsx as jsx21, jsxs as jsxs17 } from "react/jsx-runtime";
+var { useState: useState10, useLayoutEffect: useLayoutEffect2, useRef: useRef4 } = React7;
 function HelpIcon({
   text,
   content,
@@ -2348,8 +2403,8 @@ function HelpIcon({
   }, [isVisible]);
   const formatTextWithLineBreaks = (text2) => {
     const processedText = text2.replace(/\\n/g, "\n");
-    return processedText.split("\n").map((line, index) => /* @__PURE__ */ jsxs17(React6.Fragment, { children: [
-      index > 0 && /* @__PURE__ */ jsx20("br", {}),
+    return processedText.split("\n").map((line, index) => /* @__PURE__ */ jsxs17(React7.Fragment, { children: [
+      index > 0 && /* @__PURE__ */ jsx21("br", {}),
       line
     ] }, index));
   };
@@ -2362,7 +2417,7 @@ function HelpIcon({
       onMouseEnter: showTooltip,
       onMouseLeave: hideTooltip,
       children: [
-        /* @__PURE__ */ jsx20(InfoIcon, { className: "h-4 w-4 text-muted-foreground transition-colors duration-200" }),
+        /* @__PURE__ */ jsx21(InfoIcon, { className: "h-4 w-4 text-muted-foreground transition-colors duration-200" }),
         isVisible && typeof document !== "undefined" && createPortal(
           /* @__PURE__ */ jsxs17(
             "div",
@@ -2379,27 +2434,27 @@ function HelpIcon({
               children: [
                 /* @__PURE__ */ jsxs17("div", { className: "p-3", children: [
                   /* @__PURE__ */ jsxs17("div", { className: "flex items-center gap-2 mb-2", children: [
-                    /* @__PURE__ */ jsx20(CircleHelpIcon, { className: "h-4 w-4 flex-shrink-0 text-info-ink" }),
-                    title && /* @__PURE__ */ jsx20("h3", { className: "text-foreground type-title", children: title }),
-                    text && /* @__PURE__ */ jsx20(
+                    /* @__PURE__ */ jsx21(CircleHelpIcon, { className: "h-4 w-4 flex-shrink-0 text-info-ink" }),
+                    title && /* @__PURE__ */ jsx21("h3", { className: "text-foreground type-title", children: title }),
+                    text && /* @__PURE__ */ jsx21(
                       Button2,
                       {
                         variant: "quiet",
                         className: "ml-auto",
-                        icon: copied ? /* @__PURE__ */ jsx20(CheckIcon, {}) : /* @__PURE__ */ jsx20(CopyIcon, {}),
+                        icon: copied ? /* @__PURE__ */ jsx21(CheckIcon, {}) : /* @__PURE__ */ jsx21(CopyIcon, {}),
                         "aria-label": "Copy to clipboard",
                         onClick: handleCopy
                       }
                     )
                   ] }),
-                  /* @__PURE__ */ jsx20("div", { className: "type-body text-foreground leading-relaxed", children: content ? content : text && formatTextWithLineBreaks(text) }),
+                  /* @__PURE__ */ jsx21("div", { className: "type-body text-foreground leading-relaxed", children: content ? content : text && formatTextWithLineBreaks(text) }),
                   required && /* @__PURE__ */ jsxs17("div", { className: "mt-3 inline-flex items-center gap-1.5 px-2.5 py-1 bg-warning/15 text-warning-ink type-secondary font-medium rounded-full", children: [
-                    /* @__PURE__ */ jsx20("div", { className: "w-1.5 h-1.5 bg-warning-ink rounded-full" }),
+                    /* @__PURE__ */ jsx21("div", { className: "w-1.5 h-1.5 bg-warning-ink rounded-full" }),
                     "Required Field"
                   ] }),
-                  onAiAssistance && /* @__PURE__ */ jsx20(Button2, { variant: "primary", icon: /* @__PURE__ */ jsx20(CircleDotIcon, {}), className: "mt-3 w-full", onClick: handleAiClick, children: "Get Help From Matrx AI" })
+                  onAiAssistance && /* @__PURE__ */ jsx21(Button2, { variant: "primary", icon: /* @__PURE__ */ jsx21(CircleDotIcon, {}), className: "mt-3 w-full", onClick: handleAiClick, children: "Get Help From Matrx AI" })
                 ] }),
-                /* @__PURE__ */ jsx20("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__ */ jsx21("div", { className: "absolute -bottom-1.5 left-1/2 -translate-x-1/2 w-3 h-3 bg-textured border-r border-b border-border rotate-45" })
               ]
             }
           ),
@@ -2414,8 +2469,8 @@ function HelpIcon({
 import { copyText as copyText2 } from "@ai-matrx/kit/clipboard";
 import { toast as toast2 } from "@ai-matrx/kit/notify";
 import { openClipboardFallback as openClipboardFallback2 } from "@ai-matrx/kit/clipboard-fallback-opener";
-import * as React7 from "react";
-import { jsx as jsx21, jsxs as jsxs18 } from "react/jsx-runtime";
+import * as React8 from "react";
+import { jsx as jsx22, jsxs as jsxs18 } from "react/jsx-runtime";
 function cleanUrl(url) {
   try {
     const parsed = new URL(url);
@@ -2440,9 +2495,9 @@ function TextArrayInput({
   shouldCleanUrl = false,
   auxiliaryControlsTabIndex
 }) {
-  const [internalValue, setInternalValue] = React7.useState([]);
-  const [inputValue, setInputValue] = React7.useState("");
-  const [copied, setCopied] = React7.useState(false);
+  const [internalValue, setInternalValue] = React8.useState([]);
+  const [inputValue, setInputValue] = React8.useState("");
+  const [copied, setCopied] = React8.useState(false);
   const value = externalValue || internalValue;
   const tabIndexProp = auxiliaryControlsTabIndex === void 0 ? {} : { tabIndex: auxiliaryControlsTabIndex };
   const handleCopy = async () => {
@@ -2473,7 +2528,7 @@ function TextArrayInput({
   };
   return /* @__PURE__ */ jsxs18("div", { className: `space-y-3 ${className}`, children: [
     /* @__PURE__ */ jsxs18("form", { onSubmit: handleSubmit, className: "relative w-full", children: [
-      /* @__PURE__ */ jsx21(
+      /* @__PURE__ */ jsx22(
         Input,
         {
           adornment: "end",
@@ -2487,12 +2542,12 @@ function TextArrayInput({
           className: "w-full"
         }
       ),
-      showCopyIcon && value.length > 0 && /* @__PURE__ */ jsx21(
+      showCopyIcon && value.length > 0 && /* @__PURE__ */ jsx22(
         Button2,
         {
           ...tabIndexProp,
           variant: "quiet",
-          icon: copied ? /* @__PURE__ */ jsx21(CheckIcon, {}) : /* @__PURE__ */ jsx21(CopyIcon, {}),
+          icon: copied ? /* @__PURE__ */ jsx22(CheckIcon, {}) : /* @__PURE__ */ jsx22(CopyIcon, {}),
           ...copied ? { glyphTone: "success" } : {},
           "aria-label": "Copy values",
           onClick: handleCopy,
@@ -2500,13 +2555,13 @@ function TextArrayInput({
         }
       )
     ] }),
-    /* @__PURE__ */ jsx21("div", { className: "flex flex-wrap gap-2", children: value.length === 0 ? /* @__PURE__ */ jsx21("span", { className: "type-body inline-flex items-center rounded-full bg-muted px-3 py-1 text-muted-foreground", children: "None Added" }) : value.map((item, index) => /* @__PURE__ */ jsxs18(
+    /* @__PURE__ */ jsx22("div", { className: "flex flex-wrap gap-2", children: value.length === 0 ? /* @__PURE__ */ jsx22("span", { className: "type-body inline-flex items-center rounded-full bg-muted px-3 py-1 text-muted-foreground", children: "None Added" }) : value.map((item, index) => /* @__PURE__ */ jsxs18(
       "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__ */ jsx21(
+          /* @__PURE__ */ jsx22(
             "button",
             {
               ...tabIndexProp,
@@ -2517,7 +2572,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__ */ jsx21(XIcon, { className: "h-3.5 w-3.5" })
+              children: /* @__PURE__ */ jsx22(XIcon, { className: "h-3.5 w-3.5" })
             }
           )
         ]
@@ -2528,7 +2583,7 @@ function TextArrayInput({
 }
 
 // src/read-state/untrusted-count.tsx
-import { jsx as jsx22 } from "react/jsx-runtime";
+import { jsx as jsx23 } from "react/jsx-runtime";
 function countReadState(input) {
   const { read, trustworthy } = input;
   if (trustworthy === false) return "failed";
@@ -2557,7 +2612,7 @@ function UntrustedCount({
   const state = countReadState({ read, trustworthy });
   if (state === "ready") {
     if (countIsStale(read)) {
-      return /* @__PURE__ */ jsx22(
+      return /* @__PURE__ */ jsx23(
         "span",
         {
           className,
@@ -2567,12 +2622,12 @@ function UntrustedCount({
         }
       );
     }
-    return /* @__PURE__ */ jsx22("span", { className, children: value });
+    return /* @__PURE__ */ jsx23("span", { className, children: value });
   }
   if (state === "loading") {
-    return /* @__PURE__ */ jsx22("span", { className, "aria-busy": "true", "aria-label": `${label} loading`, children: "\u2026" });
+    return /* @__PURE__ */ jsx23("span", { className, "aria-busy": "true", "aria-label": `${label} loading`, children: "\u2026" });
   }
-  return /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx23(
     "span",
     {
       className,
@@ -2584,7 +2639,7 @@ function UntrustedCount({
 }
 
 // src/controls/kpi-tile.tsx
-import { Fragment as Fragment6, jsx as jsx23, jsxs as jsxs19 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx24, jsxs as jsxs19 } from "react/jsx-runtime";
 var TONE_VALUE = {
   neutral: "text-foreground",
   good: "text-success-ink",
@@ -2616,9 +2671,9 @@ function KpiSparkline({ trend, label }) {
       "aria-label": `${trend.label ?? label}, last ${trend.period}`,
       className: "h-5 w-16 shrink-0 text-primary",
       children: [
-        /* @__PURE__ */ jsx23("title", { children: `${trend.label ?? label}, last ${trend.period}` }),
-        max === min ? null : /* @__PURE__ */ jsx23("polygon", { points: `0,${SPARK_H} ${pts} ${SPARK_W},${SPARK_H}`, fill: "currentColor", fillOpacity: 0.15 }),
-        /* @__PURE__ */ jsx23("polyline", { points: pts, fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinejoin: "round", vectorEffect: "non-scaling-stroke" })
+        /* @__PURE__ */ jsx24("title", { children: `${trend.label ?? label}, last ${trend.period}` }),
+        max === min ? null : /* @__PURE__ */ jsx24("polygon", { points: `0,${SPARK_H} ${pts} ${SPARK_W},${SPARK_H}`, fill: "currentColor", fillOpacity: 0.15 }),
+        /* @__PURE__ */ jsx24("polyline", { points: pts, fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinejoin: "round", vectorEffect: "non-scaling-stroke" })
       ]
     }
   );
@@ -2642,17 +2697,17 @@ function KpiTile({
   const dot = TONE_DOT[tone2];
   const body = /* @__PURE__ */ jsxs19(Fragment6, { children: [
     /* @__PURE__ */ jsxs19("div", { className: "flex min-w-0 items-start gap-1.5 type-meta font-medium uppercase tracking-wide text-muted-foreground", children: [
-      dot ? /* @__PURE__ */ jsx23("span", { "aria-hidden": true, className: cn("mt-1 inline-block h-2 w-2 shrink-0 rounded-sm", dot) }) : null,
+      dot ? /* @__PURE__ */ jsx24("span", { "aria-hidden": true, className: cn("mt-1 inline-block h-2 w-2 shrink-0 rounded-sm", dot) }) : null,
       /* @__PURE__ */ jsxs19("span", { className: "line-clamp-2 break-words", children: [
         label,
         title ? /* @__PURE__ */ jsxs19(Fragment6, { children: [
           " ",
-          /* @__PURE__ */ jsx23(InfoHint, { text: title, label: `What ${label} means` })
+          /* @__PURE__ */ jsx24(InfoHint, { text: title, label: `What ${label} means` })
         ] }) : null
       ] })
     ] }),
-    loading ? /* @__PURE__ */ jsx23("div", { className: "my-0.5 h-6 w-12 animate-pulse rounded bg-muted", "aria-hidden": true }) : /* @__PURE__ */ jsxs19("div", { className: "flex min-w-0 items-end justify-between gap-2", children: [
-      /* @__PURE__ */ jsx23(
+    loading ? /* @__PURE__ */ jsx24("div", { className: "my-0.5 h-6 w-12 animate-pulse rounded bg-muted", "aria-hidden": true }) : /* @__PURE__ */ jsxs19("div", { className: "flex min-w-0 items-end justify-between gap-2", children: [
+      /* @__PURE__ */ jsx24(
         "div",
         {
           className: cn(
@@ -2664,16 +2719,16 @@ function KpiTile({
           children: shown === null ? "\u2014" : shown
         }
       ),
-      trend && shown !== null ? /* @__PURE__ */ jsx23(KpiSparkline, { trend, label }) : null
+      trend && shown !== null ? /* @__PURE__ */ jsx24(KpiSparkline, { trend, label }) : null
     ] }),
-    hint ? /* @__PURE__ */ jsx23("div", { className: "truncate type-meta text-muted-foreground", children: hint }) : null
+    hint ? /* @__PURE__ */ jsx24("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__ */ jsx23(
+    return /* @__PURE__ */ jsx24(
       HostLink,
       {
         href,
@@ -2686,13 +2741,13 @@ function KpiTile({
       }
     );
   }
-  return /* @__PURE__ */ jsx23("div", { className: shell, "data-look-surface": "card", "aria-busy": loading || void 0, children: body });
+  return /* @__PURE__ */ jsx24("div", { className: shell, "data-look-surface": "card", "aria-busy": loading || void 0, children: body });
 }
 function KpiGrid({
   children,
   className
 }) {
-  return /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsx24(
     "div",
     {
       className: cn(
@@ -2705,8 +2760,8 @@ function KpiGrid({
 }
 
 // src/controls/action-feedback-button.tsx
-import * as React8 from "react";
-import { jsx as jsx24, jsxs as jsxs20 } from "react/jsx-runtime";
+import * as React9 from "react";
+import { jsx as jsx25, jsxs as jsxs20 } from "react/jsx-runtime";
 function ActionFeedbackButton({
   icon,
   tooltip,
@@ -2720,9 +2775,9 @@ function ActionFeedbackButton({
   disabled = false,
   ...props
 }) {
-  const [showSuccess, setShowSuccess] = React8.useState(false);
-  const timer = React8.useRef(null);
-  React8.useEffect(() => () => {
+  const [showSuccess, setShowSuccess] = React9.useState(false);
+  const timer = React9.useRef(null);
+  React9.useEffect(() => () => {
     if (timer.current) clearTimeout(timer.current);
   }, []);
   const handleClick = () => {
@@ -2732,11 +2787,11 @@ function ActionFeedbackButton({
     timer.current = setTimeout(() => setShowSuccess(false), feedbackDuration);
   };
   const text = showSuccess ? successTooltip : disabled && disabledTooltip ? disabledTooltip : tooltip;
-  const button = /* @__PURE__ */ jsx24(
+  const button = /* @__PURE__ */ jsx25(
     Button2,
     {
       variant,
-      icon: showSuccess ? successIcon ?? /* @__PURE__ */ jsx24(CheckCircle2Icon, {}) : icon,
+      icon: showSuccess ? successIcon ?? /* @__PURE__ */ jsx25(CheckCircle2Icon, {}) : icon,
       ...showSuccess ? { glyphTone: "success" } : glyphTone ? { glyphTone } : {},
       ...props,
       "aria-label": text,
@@ -2745,14 +2800,14 @@ function ActionFeedbackButton({
     }
   );
   return /* @__PURE__ */ jsxs20(Tooltip, { children: [
-    /* @__PURE__ */ jsx24(TooltipTrigger, { asChild: true, children: disabled ? /* @__PURE__ */ jsx24("span", { className: "inline-flex", children: button }) : button }),
-    /* @__PURE__ */ jsx24(TooltipContent, { side: "bottom", sideOffset: 5, className: "z-[9999]", children: text })
+    /* @__PURE__ */ jsx25(TooltipTrigger, { asChild: true, children: disabled ? /* @__PURE__ */ jsx25("span", { className: "inline-flex", children: button }) : button }),
+    /* @__PURE__ */ jsx25(TooltipContent, { side: "bottom", sideOffset: 5, className: "z-[9999]", children: text })
   ] });
 }
 
 // src/controls/citation-chip.tsx
 import { useState as useState13 } from "react";
-import { jsx as jsx25, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs21 } from "react/jsx-runtime";
 function CitationPopoverBody({
   icon: Icon,
   label,
@@ -2764,7 +2819,7 @@ function CitationPopoverBody({
 }) {
   return /* @__PURE__ */ jsxs21("div", { className: "flex flex-col gap-2", children: [
     /* @__PURE__ */ jsxs21("div", { className: "flex items-start gap-2", children: [
-      /* @__PURE__ */ jsx25(
+      /* @__PURE__ */ jsx26(
         Icon,
         {
           className: "mt-0.5 h-4 w-4 shrink-0 text-muted-foreground",
@@ -2772,13 +2827,13 @@ function CitationPopoverBody({
         }
       ),
       /* @__PURE__ */ jsxs21("div", { className: "min-w-0", children: [
-        /* @__PURE__ */ jsx25("p", { className: "truncate type-title text-foreground", children: label }),
-        locator && /* @__PURE__ */ jsx25("p", { className: "type-secondary text-muted-foreground", children: locator })
+        /* @__PURE__ */ jsx26("p", { className: "truncate type-title text-foreground", children: label }),
+        locator && /* @__PURE__ */ jsx26("p", { className: "type-secondary text-muted-foreground", children: locator })
       ] })
     ] }),
     excerpt && /* @__PURE__ */ jsxs21("blockquote", { className: "flex gap-2 rounded-md bg-muted/60 p-2 type-secondary italic text-muted-foreground", children: [
-      /* @__PURE__ */ jsx25(QuoteIcon, { className: "h-3 w-3 shrink-0", "aria-hidden": true }),
-      /* @__PURE__ */ jsx25("span", { className: cn("not-italic", clampExcerpt && "line-clamp-6"), children: excerpt })
+      /* @__PURE__ */ jsx26(QuoteIcon, { className: "h-3 w-3 shrink-0", "aria-hidden": true }),
+      /* @__PURE__ */ jsx26("span", { className: cn("not-italic", clampExcerpt && "line-clamp-6"), children: excerpt })
     ] }),
     onOpen && /* @__PURE__ */ jsxs21(
       "button",
@@ -2787,7 +2842,7 @@ function CitationPopoverBody({
         onClick: onOpen,
         className: "inline-flex items-center gap-1 self-start text-xs font-medium text-primary hover:underline",
         children: [
-          /* @__PURE__ */ jsx25(ArrowUpRightIcon, { className: "h-3 w-3", "aria-hidden": true }),
+          /* @__PURE__ */ jsx26(ArrowUpRightIcon, { className: "h-3 w-3", "aria-hidden": true }),
           openLabel
         ]
       }
@@ -2808,7 +2863,7 @@ function CitationChip({
     body.onOpen?.();
   } : void 0;
   return /* @__PURE__ */ jsxs21(Popover, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsx25(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs21(
+    /* @__PURE__ */ jsx26(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs21(
       "button",
       {
         type: "button",
@@ -2818,20 +2873,20 @@ function CitationChip({
           chipClassName
         ),
         children: [
-          number != null && /* @__PURE__ */ jsx25("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__ */ jsx25(Icon, { className: "h-3 w-3 shrink-0 text-muted-foreground", "aria-hidden": true }),
-          /* @__PURE__ */ jsx25("span", { className: "truncate", children: label }),
-          chipSuffix && /* @__PURE__ */ jsx25("span", { className: "shrink-0 text-muted-foreground", children: chipSuffix })
+          number != null && /* @__PURE__ */ jsx26("span", { className: "inline-flex h-4 min-w-4 shrink-0 items-center justify-center rounded-full bg-muted px-1 text-[0.65rem] font-medium leading-none text-muted-foreground", children: number }),
+          /* @__PURE__ */ jsx26(Icon, { className: "h-3 w-3 shrink-0 text-muted-foreground", "aria-hidden": true }),
+          /* @__PURE__ */ jsx26("span", { className: "truncate", children: label }),
+          chipSuffix && /* @__PURE__ */ jsx26("span", { className: "shrink-0 text-muted-foreground", children: chipSuffix })
         ]
       }
     ) }),
-    /* @__PURE__ */ jsx25(PopoverContent, { sizing: "content", align: "start", className: "p-3", children: /* @__PURE__ */ jsx25(CitationPopoverBody, { ...body, onOpen }) })
+    /* @__PURE__ */ jsx26(PopoverContent, { sizing: "content", align: "start", className: "p-3", children: /* @__PURE__ */ jsx26(CitationPopoverBody, { ...body, onOpen }) })
   ] });
 }
 
 // src/controls/tool-rail.tsx
-import * as React9 from "react";
-import { jsx as jsx26, jsxs as jsxs22 } from "react/jsx-runtime";
+import * as React10 from "react";
+import { jsx as jsx27, jsxs as jsxs22 } from "react/jsx-runtime";
 function ToolRail({
   groups,
   value,
@@ -2841,11 +2896,11 @@ function ToolRail({
   className,
   "aria-label": ariaLabel
 }) {
-  const flat = React9.useMemo(() => groups.flat(), [groups]);
-  const refs = React9.useRef(/* @__PURE__ */ new Map());
+  const flat = React10.useMemo(() => groups.flat(), [groups]);
+  const refs = React10.useRef(/* @__PURE__ */ new Map());
   const enabled = flat.filter((t) => !t.disabled);
   const activeEnabled = enabled.find((t) => t.id === value);
-  const [focusId, setFocusId] = React9.useState(null);
+  const [focusId, setFocusId] = React10.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) => {
@@ -2871,7 +2926,7 @@ function ToolRail({
       focusAt(enabled[enabled.length - 1]?.id);
     }
   };
-  return /* @__PURE__ */ jsx26(
+  return /* @__PURE__ */ jsx27(
     "div",
     {
       role: "toolbar",
@@ -2880,8 +2935,8 @@ function ToolRail({
       "data-matrx-tool-rail": "",
       "data-orientation": orientation,
       className: cn("flex w-fit shrink-0 items-center gap-1", vertical ? "flex-col" : "flex-row", className),
-      children: groups.map((group, gi) => /* @__PURE__ */ jsxs22(React9.Fragment, { children: [
-        gi > 0 ? /* @__PURE__ */ jsx26(
+      children: groups.map((group, gi) => /* @__PURE__ */ jsxs22(React10.Fragment, { children: [
+        gi > 0 ? /* @__PURE__ */ jsx27(
           "div",
           {
             role: "separator",
@@ -2894,7 +2949,7 @@ function ToolRail({
           const Icon = tool.icon;
           const name = tool.shortcut ? `${tool.label} (${tool.shortcut})` : tool.label;
           return /* @__PURE__ */ jsxs22(Tooltip, { children: [
-            /* @__PURE__ */ jsx26(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx26(
+            /* @__PURE__ */ jsx27(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx27(
               Button2,
               {
                 ref: (el) => {
@@ -2902,7 +2957,7 @@ function ToolRail({
                   else refs.current.delete(tool.id);
                 },
                 variant: on ? "primary" : "quiet",
-                icon: /* @__PURE__ */ jsx26(Icon, {}),
+                icon: /* @__PURE__ */ jsx27(Icon, {}),
                 "aria-label": name,
                 pressed: on,
                 disabled: tool.disabled,
@@ -2913,7 +2968,7 @@ function ToolRail({
                 onClick: () => onValueChange(on && allowDeselect ? null : tool.id, tool)
               }
             ) }),
-            /* @__PURE__ */ jsx26(TooltipContent, { side: vertical ? "right" : "bottom", sideOffset: 6, children: name })
+            /* @__PURE__ */ jsx27(TooltipContent, { side: vertical ? "right" : "bottom", sideOffset: 6, children: name })
           ] }, tool.id);
         })
       ] }, gi))
@@ -2922,7 +2977,7 @@ function ToolRail({
 }
 
 // src/controls/page-range-input.tsx
-import * as React10 from "react";
+import * as React11 from "react";
 
 // src/controls/page-ranges.ts
 var WORD_END = /^(end|last)$/i;
@@ -2993,7 +3048,7 @@ function formatPageRanges(pages) {
 }
 
 // src/controls/page-range-input.tsx
-import { jsx as jsx27, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx28, jsxs as jsxs23 } from "react/jsx-runtime";
 function PageRangeInput({
   value,
   onChange,
@@ -3005,13 +3060,13 @@ function PageRangeInput({
   id,
   "aria-label": ariaLabel = "Page range"
 }) {
-  const autoId = React10.useId();
+  const autoId = React11.useId();
   const hintId = `${id ?? autoId}-hint`;
-  const parsed = React10.useMemo(() => parsePageRanges(value, pageCount), [value, pageCount]);
+  const parsed = React11.useMemo(() => parsePageRanges(value, pageCount), [value, pageCount]);
   const first = parsed.issues[0];
   const hint = parsed.empty ? `${pageCount} page${pageCount === 1 ? "" : "s"}` : first ? first.hint : `${parsed.pages.length} page${parsed.pages.length === 1 ? "" : "s"}: ${formatPageRanges(parsed.pages)}`;
   return /* @__PURE__ */ jsxs23("div", { className: cn("flex min-w-0 flex-col gap-1", className), "data-matrx-page-range-input": "", children: [
-    /* @__PURE__ */ jsx27(
+    /* @__PURE__ */ jsx28(
       Input,
       {
         id,
@@ -3030,7 +3085,7 @@ function PageRangeInput({
         }
       }
     ),
-    /* @__PURE__ */ jsx27(
+    /* @__PURE__ */ jsx28(
       "p",
       {
         id: hintId,
@@ -3044,8 +3099,8 @@ function PageRangeInput({
 }
 
 // src/controls/opacity-slider.tsx
-import * as React11 from "react";
-import { jsx as jsx28, jsxs as jsxs24 } from "react/jsx-runtime";
+import * as React12 from "react";
+import { jsx as jsx29, jsxs as jsxs24 } from "react/jsx-runtime";
 var clamp = (n, lo, hi) => Math.min(hi, Math.max(lo, n));
 var toPercent = (v) => Math.round(v * 100);
 function OpacitySlider({
@@ -3057,7 +3112,7 @@ function OpacitySlider({
   className,
   "aria-label": ariaLabel = "Opacity"
 }) {
-  const [draft, setDraft] = React11.useState(null);
+  const [draft, setDraft] = React12.useState(null);
   const percent = toPercent(clamp(value, min, max));
   const commit = () => {
     if (draft !== null && draft.trim() !== "" && Number.isFinite(Number(draft))) {
@@ -3066,7 +3121,7 @@ function OpacitySlider({
     setDraft(null);
   };
   return /* @__PURE__ */ jsxs24("div", { className: cn("flex min-w-0 items-center gap-2", className), "data-matrx-opacity-slider": "", children: [
-    /* @__PURE__ */ jsx28(
+    /* @__PURE__ */ jsx29(
       Slider,
       {
         className: "min-w-0 flex-1",
@@ -3080,7 +3135,7 @@ function OpacitySlider({
       }
     ),
     /* @__PURE__ */ jsxs24("div", { className: "flex w-16 shrink-0 items-center gap-1", style: { ["--matrx-control-field-min"]: "0px" }, children: [
-      /* @__PURE__ */ jsx28(
+      /* @__PURE__ */ jsx29(
         Input,
         {
           numeric: true,
@@ -3099,14 +3154,14 @@ function OpacitySlider({
           }
         }
       ),
-      /* @__PURE__ */ jsx28("span", { "aria-hidden": true, className: "text-xs text-muted-foreground", children: "%" })
+      /* @__PURE__ */ jsx29("span", { "aria-hidden": true, className: "text-xs text-muted-foreground", children: "%" })
     ] })
   ] });
 }
 
 // src/controls/color-swatch-row.tsx
-import * as React12 from "react";
-import { jsx as jsx29 } from "react/jsx-runtime";
+import * as React13 from "react";
+import { jsx as jsx30 } from "react/jsx-runtime";
 function ColorSwatchRow({
   colors,
   value,
@@ -3115,7 +3170,7 @@ function ColorSwatchRow({
   className,
   "aria-label": ariaLabel = "Color"
 }) {
-  const refs = React12.useRef([]);
+  const refs = React13.useRef([]);
   const chosen = colors.findIndex((c) => c.value.toLowerCase() === (value ?? "").toLowerCase());
   const stop = chosen >= 0 ? chosen : 0;
   const move = (to) => {
@@ -3125,7 +3180,7 @@ function ColorSwatchRow({
     refs.current[i]?.focus();
     onChange(c.value, c);
   };
-  return /* @__PURE__ */ jsx29(
+  return /* @__PURE__ */ jsx30(
     "div",
     {
       role: "radiogroup",
@@ -3135,7 +3190,7 @@ function ColorSwatchRow({
       "data-matrx-color-swatch-row": "",
       children: colors.map((c, i) => {
         const on = i === chosen;
-        return /* @__PURE__ */ jsx29(
+        return /* @__PURE__ */ jsx30(
           "button",
           {
             ref: (el) => {
@@ -3173,7 +3228,7 @@ function ColorSwatchRow({
               on && "ring-2 ring-foreground ring-offset-1 ring-offset-background"
             ),
             style: { backgroundColor: c.value },
-            children: on ? /* @__PURE__ */ jsx29(RadixCheckIcon, { className: "size-3 mix-blend-difference text-white" }) : null
+            children: on ? /* @__PURE__ */ jsx30(RadixCheckIcon, { className: "size-3 mix-blend-difference text-white" }) : null
           },
           `${c.value}-${i}`
         );
@@ -3183,8 +3238,8 @@ function ColorSwatchRow({
 }
 
 // src/controls/anchored-toolbar.tsx
-import * as React13 from "react";
-import { jsx as jsx30, jsxs as jsxs25 } from "react/jsx-runtime";
+import * as React14 from "react";
+import { jsx as jsx31, jsxs as jsxs25 } from "react/jsx-runtime";
 function virtualFor(rect) {
   return {
     getBoundingClientRect: () => ({
@@ -3212,14 +3267,14 @@ function AnchoredToolbar({
   children
 }) {
   const x = rect?.x ?? 0, y = rect?.y ?? 0, w = rect?.width ?? 0, h = rect?.height ?? 0;
-  const virtualRef = React13.useMemo(
+  const virtualRef = React14.useMemo(
     () => ({ current: virtualFor({ x, y, width: w, height: h }) }),
     [x, y, w, h]
   );
   const visible = open && rect !== null;
   return /* @__PURE__ */ jsxs25(Popover, { open: visible, ...onOpenChange ? { onOpenChange } : {}, children: [
-    /* @__PURE__ */ jsx30(PopoverAnchor, { virtualRef }),
-    /* @__PURE__ */ jsx30(
+    /* @__PURE__ */ jsx31(PopoverAnchor, { virtualRef }),
+    /* @__PURE__ */ jsx31(
       PopoverContent,
       {
         role: "toolbar",
@@ -3242,9 +3297,9 @@ function AnchoredToolbar({
 }
 
 // src/controls/icon-select.tsx
-import * as React14 from "react";
+import * as React15 from "react";
 import { openOutbound } from "@ai-matrx/kit/outbound";
-import { jsx as jsx31, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs26 } from "react/jsx-runtime";
 function wantsNewTab(e) {
   return Boolean(e.metaKey || e.ctrlKey || e.shiftKey || e.altKey || e.button === 1);
 }
@@ -3253,8 +3308,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 = React14.forwardRef(function IconSelectTrigger2({ icon, disabled, ariaLabel, size = "default", className, ...rest }, ref) {
-  return /* @__PURE__ */ jsx31(
+var IconSelectTrigger = React15.forwardRef(function IconSelectTrigger2({ icon, disabled, ariaLabel, size = "default", className, ...rest }, ref) {
+  return /* @__PURE__ */ jsx32(
     Button2,
     {
       ref,
@@ -3279,16 +3334,16 @@ function IconSelect({
   size = "default",
   className
 }) {
-  const [open, setOpen] = React14.useState(false);
-  const skipSelectRef = React14.useRef(false);
+  const [open, setOpen] = React15.useState(false);
+  const skipSelectRef = React15.useRef(false);
   if (searchable) {
     return /* @__PURE__ */ jsxs26(Popover, { open, onOpenChange: setOpen, children: [
-      /* @__PURE__ */ jsx31(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx31(IconSelectTrigger, { icon, disabled, ariaLabel, size, className }) }),
-      /* @__PURE__ */ jsx31(PopoverContent, { sizing: "content", className: "p-0", align: "start", children: /* @__PURE__ */ jsxs26(Command, { children: [
-        /* @__PURE__ */ jsx31(CommandInput, { placeholder: searchPlaceholder, className: "h-9 text-sm" }),
+      /* @__PURE__ */ jsx32(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx32(IconSelectTrigger, { icon, disabled, ariaLabel, size, className }) }),
+      /* @__PURE__ */ jsx32(PopoverContent, { sizing: "content", className: "p-0", align: "start", children: /* @__PURE__ */ jsxs26(Command, { children: [
+        /* @__PURE__ */ jsx32(CommandInput, { placeholder: searchPlaceholder, className: "h-9 text-sm" }),
         /* @__PURE__ */ jsxs26(CommandList, { children: [
-          /* @__PURE__ */ jsx31(CommandEmpty, { children: "No results found." }),
-          /* @__PURE__ */ jsx31(CommandGroup, { className: "max-h-72 overflow-auto", children: items.map((item) => /* @__PURE__ */ jsx31(
+          /* @__PURE__ */ jsx32(CommandEmpty, { children: "No results found." }),
+          /* @__PURE__ */ jsx32(CommandGroup, { className: "max-h-72 overflow-auto", children: items.map((item) => /* @__PURE__ */ jsx32(
             CommandItem,
             {
               value: item.label,
@@ -3309,7 +3364,7 @@ function IconSelect({
                 setOpen(false);
               },
               children: /* @__PURE__ */ jsxs26("div", { className: "flex items-center", children: [
-                item.icon && /* @__PURE__ */ jsx31("span", { className: "mr-2", children: item.icon }),
+                item.icon && /* @__PURE__ */ jsx32("span", { className: "mr-2", children: item.icon }),
                 item.label
               ] })
             },
@@ -3320,7 +3375,7 @@ function IconSelect({
     ] });
   }
   return /* @__PURE__ */ jsxs26(Select, { ...value === void 0 ? {} : { value }, ...onValueChange ? { onValueChange } : {}, disabled, children: [
-    /* @__PURE__ */ jsx31(
+    /* @__PURE__ */ jsx32(
       SelectTrigger,
       {
         "aria-label": ariaLabel,
@@ -3329,7 +3384,7 @@ function IconSelect({
         children: icon
       }
     ),
-    /* @__PURE__ */ jsx31(SelectContent, { children: /* @__PURE__ */ jsx31(SelectGroup, { children: items.map((item) => /* @__PURE__ */ jsx31(
+    /* @__PURE__ */ jsx32(SelectContent, { children: /* @__PURE__ */ jsx32(SelectGroup, { children: items.map((item) => /* @__PURE__ */ jsx32(
       SelectItem,
       {
         value: item.value,
@@ -3340,7 +3395,7 @@ function IconSelect({
           }
         },
         children: /* @__PURE__ */ jsxs26("div", { className: "flex items-center", children: [
-          item.icon && /* @__PURE__ */ jsx31("span", { className: "mr-2", children: item.icon }),
+          item.icon && /* @__PURE__ */ jsx32("span", { className: "mr-2", children: item.icon }),
           item.label
         ] })
       },
@@ -3350,13 +3405,13 @@ function IconSelect({
 }
 
 // src/controls/advanced-collapsible.tsx
-import * as React15 from "react";
+import * as React16 from "react";
 import { copyText as copyText3 } from "@ai-matrx/kit/clipboard";
 import { openClipboardFallback as openClipboardFallback3 } from "@ai-matrx/kit/clipboard-fallback-opener";
 import { toast as toast3 } from "@ai-matrx/kit/notify";
 
 // src/icon-button.tsx
-import { jsx as jsx32, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs27 } from "react/jsx-runtime";
 var VARIANT = {
   ghost: "quiet",
   outline: "outline",
@@ -3377,11 +3432,11 @@ function IconButton({
   "aria-label": ariaLabel,
   ...props
 }) {
-  const control = /* @__PURE__ */ jsx32(
+  const control = /* @__PURE__ */ jsx33(
     Button2,
     {
       variant: VARIANT[variant],
-      icon: spinning ? /* @__PURE__ */ jsx32(Icon, { className: MOTION_SPIN }) : /* @__PURE__ */ jsx32(Icon, {}),
+      icon: spinning ? /* @__PURE__ */ jsx33(Icon, { className: MOTION_SPIN }) : /* @__PURE__ */ jsx33(Icon, {}),
       ...glyphTone ? { glyphTone } : {},
       "aria-label": ariaLabel ?? tooltip ?? "Action",
       ...props
@@ -3389,13 +3444,13 @@ function IconButton({
   );
   if (!tooltip) return control;
   return /* @__PURE__ */ jsxs27(Tooltip, { children: [
-    /* @__PURE__ */ jsx32(TooltipTrigger, { asChild: true, children: control }),
-    /* @__PURE__ */ jsx32(TooltipContent, { side: tooltipSide, align: tooltipAlign, className: "z-[9999]", sideOffset: tooltipOffset, children: tooltip })
+    /* @__PURE__ */ jsx33(TooltipTrigger, { asChild: true, children: control }),
+    /* @__PURE__ */ jsx33(TooltipContent, { side: tooltipSide, align: tooltipAlign, className: "z-[9999]", sideOffset: tooltipOffset, children: tooltip })
   ] });
 }
 
 // src/controls/advanced-collapsible.tsx
-import { Fragment as Fragment8, jsx as jsx33, jsxs as jsxs28 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx34, jsxs as jsxs28 } from "react/jsx-runtime";
 function AdvancedCollapsible({
   icon,
   title,
@@ -3414,10 +3469,10 @@ function AdvancedCollapsible({
   fullScreenTitle,
   fullScreenDescription
 }) {
-  const [isOpen, setIsOpen] = React15.useState(initialOpen);
-  const [isFullScreen, setIsFullScreen] = React15.useState(false);
-  const contentRef = React15.useRef(null);
-  const fullRef = React15.useRef(null);
+  const [isOpen, setIsOpen] = React16.useState(initialOpen);
+  const [isFullScreen, setIsFullScreen] = React16.useState(false);
+  const contentRef = React16.useRef(null);
+  const fullRef = React16.useRef(null);
   const handleOpenChange = (open) => {
     setIsOpen(open);
     onStateChange?.(open);
@@ -3436,28 +3491,28 @@ function AdvancedCollapsible({
     else onCopy?.();
   };
   const actions = /* @__PURE__ */ jsxs28("div", { className: "flex items-center justify-end gap-2", children: [
-    onSave && /* @__PURE__ */ jsx33(
+    onSave && /* @__PURE__ */ jsx34(
       ActionFeedbackButton,
       {
-        icon: /* @__PURE__ */ jsx33(SaveIcon, {}),
+        icon: /* @__PURE__ */ jsx34(SaveIcon, {}),
         glyphTone: "info",
         tooltip: saveTooltip,
         successTooltip: "Saved!",
         onClick: onSave
       }
     ),
-    onReset && /* @__PURE__ */ jsx33(
+    onReset && /* @__PURE__ */ jsx34(
       ActionFeedbackButton,
       {
-        icon: /* @__PURE__ */ jsx33(RefreshCwIcon, {}),
+        icon: /* @__PURE__ */ jsx34(RefreshCwIcon, {}),
         glyphTone: "warning",
         tooltip: resetTooltip,
         successTooltip: "Reset!",
         onClick: onReset
       }
     ),
-    /* @__PURE__ */ jsx33(IconButton, { icon: CopyIcon, tooltip: copyTooltip, onClick: () => void handleCopy() }),
-    /* @__PURE__ */ jsx33(
+    /* @__PURE__ */ jsx34(IconButton, { icon: CopyIcon, tooltip: copyTooltip, onClick: () => void handleCopy() }),
+    /* @__PURE__ */ jsx34(
       IconButton,
       {
         icon: isFullScreen ? Minimize2Icon : Maximize2Icon,
@@ -3479,9 +3534,9 @@ function AdvancedCollapsible({
           /* @__PURE__ */ jsxs28(CollapsibleTrigger, { className: "relative flex w-full items-center justify-between rounded-t-xl px-4 py-3 font-medium hover:bg-muted", children: [
             /* @__PURE__ */ jsxs28("div", { className: "flex items-center gap-2", children: [
               icon,
-              typeof title === "string" ? /* @__PURE__ */ jsx33("span", { children: title }) : title
+              typeof title === "string" ? /* @__PURE__ */ jsx34("span", { children: title }) : title
             ] }),
-            /* @__PURE__ */ jsx33(
+            /* @__PURE__ */ jsx34(
               ChevronDownIcon,
               {
                 className: cn(
@@ -3491,27 +3546,27 @@ function AdvancedCollapsible({
               }
             )
           ] }),
-          /* @__PURE__ */ jsx33(CollapsibleContent, { children: /* @__PURE__ */ jsxs28("div", { className: "relative", children: [
-            /* @__PURE__ */ jsx33("div", { className: "absolute left-8 right-8 top-0 h-px bg-border" }),
-            /* @__PURE__ */ jsx33("div", { ref: contentRef, className: "p-4", children }),
-            /* @__PURE__ */ jsx33("div", { className: "mb-1 mr-1 mt-2", children: actions })
+          /* @__PURE__ */ jsx34(CollapsibleContent, { children: /* @__PURE__ */ jsxs28("div", { className: "relative", children: [
+            /* @__PURE__ */ jsx34("div", { className: "absolute left-8 right-8 top-0 h-px bg-border" }),
+            /* @__PURE__ */ jsx34("div", { ref: contentRef, className: "p-4", children }),
+            /* @__PURE__ */ jsx34("div", { className: "mb-1 mr-1 mt-2", children: actions })
           ] }) })
         ]
       }
     ),
-    /* @__PURE__ */ jsx33(Dialog, { open: isFullScreen, onOpenChange: setIsFullScreen, children: /* @__PURE__ */ jsxs28(DialogContent, { size: "full", height: "tall", children: [
+    /* @__PURE__ */ jsx34(Dialog, { open: isFullScreen, onOpenChange: setIsFullScreen, children: /* @__PURE__ */ jsxs28(DialogContent, { size: "full", height: "tall", children: [
       /* @__PURE__ */ jsxs28(DialogHeader, { children: [
-        /* @__PURE__ */ jsx33(DialogTitle, { children: fullScreenTitle || heading }),
-        fullScreenDescription ? /* @__PURE__ */ jsx33(DialogDescription, { children: fullScreenDescription }) : null
+        /* @__PURE__ */ jsx34(DialogTitle, { children: fullScreenTitle || heading }),
+        fullScreenDescription ? /* @__PURE__ */ jsx34(DialogDescription, { children: fullScreenDescription }) : null
       ] }),
       actions,
-      /* @__PURE__ */ jsx33("div", { ref: fullRef, className: "min-h-0 flex-1 overflow-auto p-4", children })
+      /* @__PURE__ */ jsx34("div", { ref: fullRef, className: "min-h-0 flex-1 overflow-auto p-4", children })
     ] }) })
   ] });
 }
 
 // src/controls/empty-state-card.tsx
-import { jsx as jsx34, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx35, jsxs as jsxs29 } from "react/jsx-runtime";
 var TONE3 = {
   primary: { data: "primary", button: "primary" },
   success: { data: "success", button: "outline" }
@@ -3527,19 +3582,19 @@ function EmptyStateCard({
 }) {
   const t = TONE3[tone2];
   return /* @__PURE__ */ jsxs29("div", { "data-tone": t.data, className: "matrx-hue-card flex flex-col items-center justify-center px-6 py-12 text-center", children: [
-    /* @__PURE__ */ jsx34("div", { className: "matrx-hue-icon mb-6 rounded-full p-6", children: /* @__PURE__ */ jsx34(Icon, { className: "h-12 w-12", strokeWidth: 1.5 }) }),
-    /* @__PURE__ */ jsx34("h3", { className: cn("mb-3 text-xl font-semibold", tone2 === "success" ? "text-success-ink" : "text-foreground"), children: title }),
-    /* @__PURE__ */ jsx34("p", { className: "mb-8 max-w-md text-muted-foreground", children: description }),
+    /* @__PURE__ */ jsx35("div", { className: "matrx-hue-icon mb-6 rounded-full p-6", children: /* @__PURE__ */ jsx35(Icon, { className: "h-12 w-12", strokeWidth: 1.5 }) }),
+    /* @__PURE__ */ jsx35("h3", { className: cn("mb-3 text-xl font-semibold", tone2 === "success" ? "text-success-ink" : "text-foreground"), children: title }),
+    /* @__PURE__ */ jsx35("p", { className: "mb-8 max-w-md text-muted-foreground", children: description }),
     buttonText && /* @__PURE__ */ jsxs29("div", { className: "flex flex-col gap-4 sm:flex-row", children: [
-      /* @__PURE__ */ jsx34(Button2, { variant: t.button, ...tone2 === "success" ? { tone: "success" } : {}, ...onButtonClick ? { onClick: onButtonClick } : {}, children: buttonText }),
+      /* @__PURE__ */ jsx35(Button2, { variant: t.button, ...tone2 === "success" ? { tone: "success" } : {}, ...onButtonClick ? { onClick: onButtonClick } : {}, children: buttonText }),
       secondaryButton
     ] })
   ] });
 }
 
 // src/controls/hue-cards.tsx
-import * as React16 from "react";
-import { Fragment as Fragment9, jsx as jsx35, jsxs as jsxs30 } from "react/jsx-runtime";
+import * as React17 from "react";
+import { Fragment as Fragment9, jsx as jsx36, jsxs as jsxs30 } from "react/jsx-runtime";
 var HUE_TONE = {
   indigo: "indigo",
   emerald: "emerald",
@@ -3560,7 +3615,7 @@ var HUE_TONE = {
   slate: "slate"
 };
 function sizedIcon(icon, fallback) {
-  return React16.isValidElement(icon) ? React16.cloneElement(icon, { size: icon.props.size || fallback }) : icon;
+  return React17.isValidElement(icon) ? React17.cloneElement(icon, { size: icon.props.size || fallback }) : icon;
 }
 function tone(color) {
   return HUE_TONE[color] ?? HUE_TONE.slate;
@@ -3573,7 +3628,7 @@ function Destination({
   children
 }) {
   if (path) {
-    return /* @__PURE__ */ jsx35(
+    return /* @__PURE__ */ jsx36(
       HostLink,
       {
         href: path,
@@ -3584,7 +3639,7 @@ function Destination({
       }
     );
   }
-  return /* @__PURE__ */ jsx35("div", { ...className ? { className } : {}, ...onClick ? { onClick } : {}, children });
+  return /* @__PURE__ */ jsx36("div", { ...className ? { className } : {}, ...onClick ? { onClick } : {}, children });
 }
 var SIZE_PADDING = {
   xs: "p-3",
@@ -3607,19 +3662,19 @@ function HueCard({
   external = false
 }) {
   if (compact) {
-    return /* @__PURE__ */ jsx35(Destination, { path, onClick, external, children: /* @__PURE__ */ jsxs30(
+    return /* @__PURE__ */ jsx36(Destination, { path, onClick, external, children: /* @__PURE__ */ jsxs30(
       "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__ */ jsx35("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__ */ jsx35("span", { className: "type-meta w-full truncate px-0.5 text-center font-medium leading-tight text-foreground", children: title })
+          /* @__PURE__ */ jsx36("div", { className: "matrx-hue-squircle flex aspect-square w-full max-w-[62px] items-center justify-center rounded-[22%] shadow-sm transition-colors", children: sizedIcon(icon, 36) }),
+          /* @__PURE__ */ jsx36("span", { className: "type-meta w-full truncate px-0.5 text-center font-medium leading-tight text-foreground", children: title })
         ]
       }
     ) });
   }
-  return /* @__PURE__ */ jsx35(Destination, { path, onClick, external, children: /* @__PURE__ */ jsx35(
+  return /* @__PURE__ */ jsx36(Destination, { path, onClick, external, children: /* @__PURE__ */ jsx36(
     "div",
     {
       "data-tone": tone(color),
@@ -3629,9 +3684,9 @@ function HueCard({
         className
       ),
       children: /* @__PURE__ */ jsxs30("div", { className: "flex flex-col items-center space-y-3 text-center", children: [
-        /* @__PURE__ */ jsx35("div", { className: "matrx-hue-icon rounded-full p-3", children: sizedIcon(icon, 28) }),
-        /* @__PURE__ */ jsx35("h3", { className: "text-lg font-semibold", children: title }),
-        description && /* @__PURE__ */ jsx35("p", { className: "type-body text-muted-foreground", children: description }),
+        /* @__PURE__ */ jsx36("div", { className: "matrx-hue-icon rounded-full p-3", children: sizedIcon(icon, 28) }),
+        /* @__PURE__ */ jsx36("h3", { className: "text-lg font-semibold", children: title }),
+        description && /* @__PURE__ */ jsx36("p", { className: "type-body text-muted-foreground", children: description }),
         descriptionNode && !description && descriptionNode
       ] })
     }
@@ -3659,10 +3714,10 @@ function HueGrid({
 }) {
   const colsClass = compact ? "grid-cols-4" : GRID_COLUMNS[Math.min(6, Math.max(1, columns))];
   return /* @__PURE__ */ jsxs30("div", { className, children: [
-    title && /* @__PURE__ */ jsx35("h2", { className: "mb-4 text-base font-semibold", children: title }),
-    description && /* @__PURE__ */ jsx35("p", { className: "type-body mb-4 text-muted-foreground", children: description }),
+    title && /* @__PURE__ */ jsx36("h2", { className: "mb-4 text-base font-semibold", children: title }),
+    description && /* @__PURE__ */ jsx36("p", { className: "type-body mb-4 text-muted-foreground", children: description }),
     /* @__PURE__ */ jsxs30("div", { className: cn("grid", compact ? "gap-2" : "gap-4", colsClass), children: [
-      items.map((item, index) => /* @__PURE__ */ jsx35(HueCard, { ...item, compact, className: cn(cardClassName, item.className) }, `card-${index}`)),
+      items.map((item, index) => /* @__PURE__ */ jsx36(HueCard, { ...item, compact, className: cn(cardClassName, item.className) }, `card-${index}`)),
       showAddButton && /* @__PURE__ */ jsxs30(
         "button",
         {
@@ -3673,8 +3728,8 @@ function HueGrid({
             cardClassName
           ),
           children: [
-            /* @__PURE__ */ jsx35("span", { className: "rounded-full bg-muted p-3 text-muted-foreground", children: /* @__PURE__ */ jsx35(PlusIcon, { className: "h-7 w-7" }) }),
-            /* @__PURE__ */ jsx35("span", { className: "text-lg font-semibold", children: addButtonText })
+            /* @__PURE__ */ jsx36("span", { className: "rounded-full bg-muted p-3 text-muted-foreground", children: /* @__PURE__ */ jsx36(PlusIcon, { className: "h-7 w-7" }) }),
+            /* @__PURE__ */ jsx36("span", { className: "text-lg font-semibold", children: addButtonText })
           ]
         }
       )
@@ -3689,12 +3744,12 @@ function HueRow({
   color,
   path,
   className,
-  rightIcon = /* @__PURE__ */ jsx35(ChevronRightIcon, { className: "h-5 w-5 text-muted-foreground" }),
+  rightIcon = /* @__PURE__ */ jsx36(ChevronRightIcon, { className: "h-5 w-5 text-muted-foreground" }),
   onClick,
   showBorder = true,
   isLast = false
 }) {
-  return /* @__PURE__ */ jsx35(Destination, { path, onClick, children: /* @__PURE__ */ jsxs30(
+  return /* @__PURE__ */ jsx36(Destination, { path, onClick, children: /* @__PURE__ */ jsxs30(
     "div",
     {
       "data-tone": tone(color),
@@ -3705,10 +3760,10 @@ function HueRow({
       ),
       children: [
         /* @__PURE__ */ jsxs30("div", { className: "flex items-center", children: [
-          /* @__PURE__ */ jsx35("div", { className: "matrx-hue-icon mr-4 rounded-lg p-2", children: sizedIcon(icon, 20) }),
+          /* @__PURE__ */ jsx36("div", { className: "matrx-hue-icon mr-4 rounded-lg p-2", children: sizedIcon(icon, 20) }),
           /* @__PURE__ */ jsxs30("div", { children: [
-            /* @__PURE__ */ jsx35("h3", { className: "font-medium", children: title }),
-            description && /* @__PURE__ */ jsx35("p", { className: "type-body text-muted-foreground", children: description }),
+            /* @__PURE__ */ jsx36("h3", { className: "font-medium", children: title }),
+            description && /* @__PURE__ */ jsx36("p", { className: "type-body text-muted-foreground", children: description }),
             descriptionNode && !description && descriptionNode
           ] })
         ] }),
@@ -3726,7 +3781,7 @@ function HueList({
   showBorders = true,
   showContainer = true
 }) {
-  const rows = items.map((item, index) => /* @__PURE__ */ jsx35(
+  const rows = items.map((item, index) => /* @__PURE__ */ jsx36(
     HueRow,
     {
       ...item,
@@ -3737,13 +3792,13 @@ function HueList({
     `row-${index}`
   ));
   return /* @__PURE__ */ jsxs30("div", { className, children: [
-    title && /* @__PURE__ */ jsx35("h2", { className: "mb-4 text-base font-semibold", children: title }),
-    description && /* @__PURE__ */ jsx35("p", { className: "type-body mb-4 text-muted-foreground", children: description }),
-    showContainer ? /* @__PURE__ */ jsx35("div", { className: "rounded-xl bg-card shadow-md", children: rows }) : rows
+    title && /* @__PURE__ */ jsx36("h2", { className: "mb-4 text-base font-semibold", children: title }),
+    description && /* @__PURE__ */ jsx36("p", { className: "type-body mb-4 text-muted-foreground", children: description }),
+    showContainer ? /* @__PURE__ */ jsx36("div", { className: "rounded-xl bg-card shadow-md", children: rows }) : rows
   ] });
 }
 function IosWidget({ title, description, icon, color, path, badge, className, onClick }) {
-  return /* @__PURE__ */ jsx35(Destination, { path, onClick, className: "contents", children: /* @__PURE__ */ jsxs30(
+  return /* @__PURE__ */ jsx36(Destination, { path, onClick, className: "contents", children: /* @__PURE__ */ jsxs30(
     "div",
     {
       "data-tone": tone(color),
@@ -3753,12 +3808,12 @@ function IosWidget({ title, description, icon, color, path, badge, className, on
       ),
       children: [
         /* @__PURE__ */ jsxs30("div", { className: "flex items-start justify-between", children: [
-          /* @__PURE__ */ jsx35("div", { children: sizedIcon(icon, 32) }),
-          badge && /* @__PURE__ */ jsx35("span", { className: "type-meta rounded-full bg-black/25 px-2 py-0.5 font-semibold leading-tight", children: badge })
+          /* @__PURE__ */ jsx36("div", { children: sizedIcon(icon, 32) }),
+          badge && /* @__PURE__ */ jsx36("span", { className: "type-meta rounded-full bg-black/25 px-2 py-0.5 font-semibold leading-tight", children: badge })
         ] }),
         /* @__PURE__ */ jsxs30("div", { children: [
-          /* @__PURE__ */ jsx35("p", { className: "type-title line-clamp-2 leading-tight", children: title }),
-          description && /* @__PURE__ */ jsx35("p", { className: "type-meta mt-0.5 line-clamp-2 leading-tight", children: description })
+          /* @__PURE__ */ jsx36("p", { className: "type-title line-clamp-2 leading-tight", children: title }),
+          description && /* @__PURE__ */ jsx36("p", { className: "type-meta mt-0.5 line-clamp-2 leading-tight", children: description })
         ] })
       ]
     }
@@ -3770,20 +3825,20 @@ function TileCard({ icon, title, description, onClick, href, className }) {
     className
   );
   const content = /* @__PURE__ */ jsxs30(Fragment9, { children: [
-    icon && /* @__PURE__ */ jsx35("div", { className: "h-12 w-12 text-primary-ink", children: icon }),
-    title && /* @__PURE__ */ jsx35("span", { className: "font-medium text-primary-ink", children: title }),
-    description && /* @__PURE__ */ jsx35("p", { className: "type-secondary mt-1 text-center text-muted-foreground", children: description })
+    icon && /* @__PURE__ */ jsx36("div", { className: "h-12 w-12 text-primary-ink", children: icon }),
+    title && /* @__PURE__ */ jsx36("span", { className: "font-medium text-primary-ink", children: title }),
+    description && /* @__PURE__ */ jsx36("p", { className: "type-secondary mt-1 text-center text-muted-foreground", children: description })
   ] });
-  return href ? /* @__PURE__ */ jsx35(HostLink, { href, className: face, children: content }) : /* @__PURE__ */ jsx35("div", { onClick, className: face, children: content });
+  return href ? /* @__PURE__ */ jsx36(HostLink, { href, className: face, children: content }) : /* @__PURE__ */ jsx36("div", { onClick, className: face, children: content });
 }
 var TILE_COLUMNS = { 1: "md:grid-cols-1", 2: "md:grid-cols-2", 3: "md:grid-cols-3", 4: "md:grid-cols-4" };
 function TileCardGrid({ title, description, cards, columns = 2, className }) {
   return /* @__PURE__ */ jsxs30("div", { className: cn("w-full", className), children: [
     (title || description) && /* @__PURE__ */ jsxs30("div", { className: "pb-8 text-center", children: [
-      title && /* @__PURE__ */ jsx35("h2", { className: "text-2xl font-bold text-foreground md:text-3xl", children: title }),
-      description && /* @__PURE__ */ jsx35("p", { className: "mt-2 text-muted-foreground", children: description })
+      title && /* @__PURE__ */ jsx36("h2", { className: "text-2xl font-bold text-foreground md:text-3xl", children: title }),
+      description && /* @__PURE__ */ jsx36("p", { className: "mt-2 text-muted-foreground", children: description })
     ] }),
-    /* @__PURE__ */ jsx35("div", { className: cn("grid grid-cols-1 gap-6", TILE_COLUMNS[columns] ?? TILE_COLUMNS[2]), children: cards.map((card, index) => /* @__PURE__ */ jsx35(TileCard, { ...card }, index)) })
+    /* @__PURE__ */ jsx36("div", { className: cn("grid grid-cols-1 gap-6", TILE_COLUMNS[columns] ?? TILE_COLUMNS[2]), children: cards.map((card, index) => /* @__PURE__ */ jsx36(TileCard, { ...card }, index)) })
   ] });
 }
 
@@ -3792,6 +3847,9 @@ export {
   countIsStale,
   unavailableCountLabel,
   UntrustedCount,
+  WindowLights,
+  WindowLight,
+  WindowChromeButton,
   DecisionControl,
   parseTypedDate,
   parseTypedTime,
@@ -3860,4 +3918,4 @@ export {
   TileCard,
   TileCardGrid
 };
-//# sourceMappingURL=chunk-T4IJELSS.js.map
+//# sourceMappingURL=chunk-KYH42WEX.js.map