@ai-matrx/design-system 0.86.333 → 0.86.334

package/dist/index.js

@@ -383,11 +383,14 @@ import {
 import {
   AtSignIcon,
   BadgeCheckIcon,
+  BellOffIcon,
   CheckIcon,
   ChevronDownIcon,
   ChevronRightIcon,
+  ClockIcon,
   CopyIcon,
   CopyPlusIcon,
+  CornerDownRightIcon,
   DownloadIcon,
   ExternalLinkIcon,
   GlobeIcon,
@@ -2756,7 +2759,7 @@ import * as React16 from "react";
 import { createPortal } from "react-dom";
 import { openOutbound } from "@ai-matrx/kit/outbound";
 import { OutboundLink as OutboundLink2 } from "@ai-matrx/kit/outbound-react";
-import { Fragment as Fragment2, jsx as jsx19, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx19, jsxs as jsxs9 } from "react/jsx-runtime";
 function defaultDensity(size) {
   return size === "xs" || size === "sm" ? "compact" : "comfortable";
 }
@@ -2829,7 +2832,7 @@ var PeekCard = React16.forwardRef((allProps, ref) => {
         // Every height is capped by the room the host left (`--matrx-peek-room`, set by the hover
         // and click hosts from the popper's available height), so a card that cannot fit above or
         // below its trigger shrinks and scrolls inside instead of leaving the screen.
-        ...height === "fixed" || loading ? { height: `min(${box.height}px, var(${PEEK_ROOM_VAR}, 100vh))` } : {
+        ...height === "content" ? { maxHeight: `min(${box.height}px, var(${PEEK_ROOM_VAR}, 100vh))` } : height === "fixed" || loading ? { height: `min(${box.height}px, var(${PEEK_ROOM_VAR}, 100vh))` } : {
           minHeight: `min(${box.minHeight}px, var(${PEEK_ROOM_VAR}, 100vh))`,
           maxHeight: `min(${box.height}px, var(${PEEK_ROOM_VAR}, 100vh))`
         }
@@ -2848,7 +2851,7 @@ function PeekRule({ vertical = false }) {
 function PeekCardHeader({ title, subtitle, leading, trailing, pinned, id }) {
   const { density, window: window2 } = usePeekCard();
   const pad = PAD[density];
-  return /* @__PURE__ */ jsxs9(Fragment2, { children: [
+  return /* @__PURE__ */ jsxs9(Fragment3, { children: [
     /* @__PURE__ */ jsxs9(
       "div",
       {
@@ -3146,16 +3149,44 @@ function recordDoors(doors) {
       href: door.href,
       newTab: door.newTab,
       inMenu: known.inMenu,
-      busy: door.busy
+      busy: door.busy,
+      menu: door.kind === "action" && door.menu?.length ? door.menu : void 0
     });
   }
   return out;
 }
 var PEEK_SHEET_FOOTER_SLOTS = 4;
 var PEEK_DOOR = "flex shrink-0 items-center justify-center rounded-md text-foreground transition-colors hover:bg-accent hover:text-primary disabled:text-disabled-foreground disabled:hover:bg-transparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary";
+function MenuDoor({ action, menu, disabled }) {
+  const { sheet } = usePeekCard();
+  const [open, setOpen] = React16.useState(false);
+  usePeekHoldWhile(open);
+  const glyph = sheet ? /* @__PURE__ */ jsx19(action.icon, { className: "size-5" }) : /* @__PURE__ */ jsx19(action.icon, { className: "size-3.5" });
+  return /* @__PURE__ */ jsxs9(DropdownMenu, { modal: false, open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx19(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx19(
+      Button2,
+      {
+        type: "button",
+        variant: "quiet",
+        "aria-label": action.label,
+        title: action.label,
+        icon: action.busy ? /* @__PURE__ */ jsx19(Loader2Icon, { className: "animate-spin" }) : glyph,
+        className: "shrink-0",
+        disabled: disabled || action.busy,
+        onClick: (event) => event.stopPropagation()
+      }
+    ) }),
+    /* @__PURE__ */ jsx19(DropdownMenuContent, { align: "end", "data-peek-no-drag": "", children: menu.map((group, i) => /* @__PURE__ */ jsxs9(React16.Fragment, { children: [
+      i > 0 ? /* @__PURE__ */ jsx19(DropdownMenuSeparator, {}) : null,
+      group.label ? /* @__PURE__ */ jsx19(DropdownMenuLabel, { children: group.label }) : null,
+      group.items.map((item) => /* @__PURE__ */ jsx19(DropdownMenuItem, { ...item.tone ? { tone: item.tone } : {}, onSelect: () => item.onSelect(), children: item.label }, item.key))
+    ] }, `${group.label ?? ""}-${i}`)) })
+  ] });
+}
 function FooterDoor({ action, disabled = false }) {
   const { sheet } = usePeekCard();
   const { Link } = useMatrxDataTableHost();
+  if (action.menu) return /* @__PURE__ */ jsx19(MenuDoor, { action, menu: action.menu, disabled });
   const box = sheet ? "size-11" : "size-7";
   const glyph = /* @__PURE__ */ jsx19(action.icon, { className: sheet ? "size-5" : "size-3.5" });
   if (action.href && !disabled && !action.newTab && Link) {
@@ -3332,7 +3363,7 @@ function useDoorsThatFit(row, primaryRef, opts) {
   }, [row, primaryRef, doorPx, fixedDoors, fills, hasPrimary, sheet, actionCount]);
   return fit;
 }
-function PeekCardFooter({ primary, onSettings, doors = [], copy, openHref }) {
+function PeekCardFooter({ primary, primaryAt, onSettings, doors = [], copy, openHref }) {
   const { density, size, orientation, loading, sheet } = usePeekCard();
   const row = React16.useRef(null);
   const primaryRef = React16.useRef(null);
@@ -3340,8 +3371,8 @@ function PeekCardFooter({ primary, onSettings, doors = [], copy, openHref }) {
   const [moreOpen, setMoreOpen] = React16.useState(false);
   const actions2 = recordDoors(doors);
   const open = openHref ? { icon: ExternalLinkIcon, label: "Open in new tab", href: openHref, newTab: true } : null;
-  const fixedDoors = [settings, copy, open].filter(Boolean).length;
-  const fills = Boolean(sheet) || orientation === "portrait";
+  const fixedDoors = [settings, copy, open].filter(Boolean).length + actions2.filter((action) => action.menu).length;
+  const fills = Boolean(sheet) || (primaryAt ?? (orientation === "portrait" ? "fill" : "end")) === "fill";
   const measured = useDoorsThatFit(row, primaryRef, {
     doorPx: sheet ? 44 : 28,
     fixedDoors,
@@ -3351,8 +3382,9 @@ function PeekCardFooter({ primary, onSettings, doors = [], copy, openHref }) {
     actionCount: actions2.length
   });
   const room = measured ?? (sheet ? PEEK_SHEET_FOOTER_SLOTS : PEEK_CARD_FOOTER_SLOTS[size]) - fixedDoors;
-  const inline = actions2.filter((action) => !action.inMenu);
+  const inline = actions2.filter((action) => !action.inMenu && !action.menu);
   const menuOnly = actions2.filter((action) => action.inMenu);
+  const menuDoors = actions2.filter((action) => action.menu);
   const inlineRoom = menuOnly.length ? Math.max(0, room - 1) : room;
   const shown = inline.length <= inlineRoom ? inline : inline.slice(0, Math.max(0, inlineRoom - (menuOnly.length ? 0 : 1)));
   const overflow = [...inline.slice(shown.length), ...menuOnly];
@@ -3365,7 +3397,9 @@ function PeekCardFooter({ primary, onSettings, doors = [], copy, openHref }) {
       variant: "primary",
       className: cn("mx-1", fills && "flex-1"),
       style: fills ? { minWidth: PEEK_PRIMARY_MIN_PX[sheet ? "sheet" : "card"] } : void 0,
-      disabled: loading,
+      disabled: loading || primary.disabled || primary.busy,
+      title: primary.title,
+      icon: primary.busy ? /* @__PURE__ */ jsx19(Loader2Icon, { className: "animate-spin" }) : void 0,
       onClick: primary.onClick,
       children: primary.label
     }
@@ -3377,7 +3411,7 @@ function PeekCardFooter({ primary, onSettings, doors = [], copy, openHref }) {
       action.label
     ] }, `${action.label}-${i}`)) })
   ] }) : null;
-  return /* @__PURE__ */ jsxs9(Fragment2, { children: [
+  return /* @__PURE__ */ jsxs9(Fragment3, { children: [
     sheet ? /* @__PURE__ */ jsx19("div", { "aria-hidden": true, className: "h-px shrink-0 bg-border" }) : /* @__PURE__ */ jsx19(PeekRule, {}),
     /* @__PURE__ */ jsxs9(
       "div",
@@ -3393,6 +3427,7 @@ function PeekCardFooter({ primary, onSettings, doors = [], copy, openHref }) {
           settings ? /* @__PURE__ */ jsx19(FooterDoor, { action: settings, disabled: loading }) : null,
           fills && primaryButton ? primaryButton : /* @__PURE__ */ jsx19("span", { className: "flex-1" }),
           more,
+          menuDoors.map((action, i) => /* @__PURE__ */ jsx19(FooterDoor, { action, disabled: loading }, `menu-${action.label}-${i}`)),
           shown.map((action, i) => /* @__PURE__ */ jsx19(FooterDoor, { action, disabled: loading }, `${action.label}-${i}`)),
           copy ? /* @__PURE__ */ jsx19(PeekCopyDoor, { copy, disabled: loading }) : null,
           open ? /* @__PURE__ */ jsx19(FooterDoor, { action: open, disabled: loading }) : null,
@@ -3434,7 +3469,7 @@ function SheetHost({ trigger, children, label = "Details", open, onOpenChange, s
     setOwn(next);
     onOpenChange?.(next);
   };
-  return /* @__PURE__ */ jsxs9(Fragment2, { children: [
+  return /* @__PURE__ */ jsxs9(Fragment3, { children: [
     /* @__PURE__ */ jsx19(Slot2, { onClick: () => setOpen(true), children: trigger }),
     /* @__PURE__ */ jsx19(PeekSheet, { open: isOpen, onOpenChange: setOpen, label, sheetFooter, children })
   ] });
@@ -3450,7 +3485,7 @@ function PeekHoverCard(props) {
     {
       openDelay: Math.max(HOVER_CARD_OPEN_DELAY_MS, HOVER_CARD_OPEN_DELAY_FLOOR_MS),
       closeDelay: HOVER_CARD_CLOSE_DELAY_MS,
-      open: open ?? (hovered || held),
+      open: (open ?? hovered) || held,
       onOpenChange: (next) => {
         setHovered(next);
         onOpenChange?.(next);
@@ -3591,7 +3626,7 @@ function FloatingPeekWindow({ open, onClose, initialPosition, children }) {
 }
 
 // src/peek.tsx
-import { Fragment as Fragment3, jsx as jsx20, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx20, jsxs as jsxs10 } from "react/jsx-runtime";
 var PeekEntityRendererContext = React17.createContext(null);
 function PeekEntityRendererProvider({ render, children }) {
   return /* @__PURE__ */ jsx20(PeekEntityRendererContext.Provider, { value: render, children });
@@ -3609,7 +3644,7 @@ function screamPartOnce(kind) {
 function HostPart({ part }) {
   const render = React17.useContext(PeekPartRendererContext);
   const drawn = render?.(part);
-  if (drawn) return /* @__PURE__ */ jsx20(Fragment3, { children: drawn });
+  if (drawn) return /* @__PURE__ */ jsx20(Fragment4, { children: drawn });
   if (!render) {
     screamPartOnce("token" in part ? `${part.part}:${part.token}` : part.part);
   }
@@ -3643,7 +3678,7 @@ function EntityText({ entity, name }) {
   const { EntityRef } = useMatrxDataTableHost();
   const className = "type-secondary min-w-0 max-w-full truncate text-foreground";
   const drawn = render?.({ ...entity, name, className });
-  if (drawn) return /* @__PURE__ */ jsx20(Fragment3, { children: drawn });
+  if (drawn) return /* @__PURE__ */ jsx20(Fragment4, { children: drawn });
   if (EntityRef) {
     return /* @__PURE__ */ jsx20(
       EntityRef,
@@ -3836,7 +3871,7 @@ function PeekBody({ record, size, orientation, height, density, frame, loading }
             } : {},
             ...record.avatar ? { leading: /* @__PURE__ */ jsx20(PeekCardAvatar, { initials: record.avatar.initials, src: record.avatar.src }) } : record.glyph ? { leading: /* @__PURE__ */ jsx20(record.glyph, {}) } : {},
             ...record.favorite || record.badge ? {
-              trailing: /* @__PURE__ */ jsxs10(Fragment3, { children: [
+              trailing: /* @__PURE__ */ jsxs10(Fragment4, { children: [
                 record.badge ? /* @__PURE__ */ jsx20(
                   Chip,
                   {
@@ -3860,7 +3895,7 @@ function PeekBody({ record, size, orientation, height, density, frame, loading }
             children: [
               record.failure ? /* @__PURE__ */ jsx20(Failure, { failure: record.failure }) : null,
               record.media ? /* @__PURE__ */ jsx20(Media, { media: record.media }) : null,
-              record.callout ? /* @__PURE__ */ jsx20(PeekCardCallout, { title: record.callout.title, ...record.callout.glyph ? { icon: record.callout.glyph } : {}, children: record.callout.text || record.callout.lines?.length ? /* @__PURE__ */ jsxs10(Fragment3, { children: [
+              record.callout ? /* @__PURE__ */ jsx20(PeekCardCallout, { title: record.callout.title, ...record.callout.glyph ? { icon: record.callout.glyph } : {}, children: record.callout.text || record.callout.lines?.length ? /* @__PURE__ */ jsxs10(Fragment4, { children: [
                 record.callout.text,
                 record.callout.lines?.map((line, i) => /* @__PURE__ */ jsx20("div", { className: "type-meta text-muted-foreground", ...line.hint ? { title: line.hint } : {}, children: line.text }, `${i}:${line.text}`))
               ] }) : null }) : null,
@@ -4187,7 +4222,7 @@ function compactCount(n) {
 }
 
 // src/contact-values/contact-values.tsx
-import { Fragment as Fragment4, jsx as jsx22, jsxs as jsxs11 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx22, jsxs as jsxs11 } from "react/jsx-runtime";
 var HostContext = React18.createContext({});
 function ContactValuesHostProvider({ children, ...host }) {
   const value = React18.useMemo(() => host, [host.validateAddress]);
@@ -4260,7 +4295,7 @@ function ValueShell({ kind, glyph: Glyph, text, copy, state, record, peek, wrap
   const { open, setHovered, setHeld, setPinned, trigger } = usePinnedHover();
   const off = state !== "ok";
   const value = /* @__PURE__ */ jsx22("span", { className: cn("min-w-0", wrap ? "whitespace-pre-line break-words" : "truncate", off ? "text-muted-foreground line-through" : "text-foreground"), children: text });
-  const body = /* @__PURE__ */ jsxs11(Fragment4, { children: [
+  const body = /* @__PURE__ */ jsxs11(Fragment5, { children: [
     /* @__PURE__ */ jsx22(Glyph, { className: cn("size-[1em] shrink-0", off ? "text-muted-foreground" : "text-muted-foreground") }),
     value,
     off ? /* @__PURE__ */ jsx22("span", { className: "shrink-0 text-muted-foreground no-underline", children: `\xB7 ${CONTACT_STATE_LABEL[state]}` }) : null
@@ -4676,11 +4711,143 @@ var AddTile = React20.forwardRef(function AddTile2({ icon, className, children,
   );
 });
 
-// src/radio-group.tsx
-import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+// src/assist-peek.tsx
 import * as React21 from "react";
+import { Slot as Slot3 } from "@radix-ui/react-slot";
 import { jsx as jsx25, jsxs as jsxs14 } from "react/jsx-runtime";
-var RadioGroupSizeContext = React21.createContext("md");
+function AssistPeekCard({
+  title,
+  icon: Icon,
+  subtitle,
+  children,
+  why,
+  evidence,
+  yourNote,
+  explainer,
+  primary,
+  later,
+  stopShowing,
+  deciding = false,
+  onNotNow,
+  step
+}) {
+  const laterDoor = later?.length ? { kind: "action", id: "later", label: "Later", icon: ClockIcon, menu: later, busy: deciding } : null;
+  const stopDoor = stopShowing?.length ? { kind: "action", id: "stop", label: "Stop showing", icon: BellOffIcon, menu: stopShowing, busy: deciding } : null;
+  const doors = laterDoor && stopDoor ? [laterDoor, stopDoor] : laterDoor ? [laterDoor] : stopDoor ? [stopDoor] : [];
+  return /* @__PURE__ */ jsxs14(PeekCard, { size: "xl", height: "content", "data-matrx-assist-peek": "", "data-matrx-notice-surface": "", children: [
+    /* @__PURE__ */ jsx25(
+      PeekCardHeader,
+      {
+        title,
+        leading: Icon ? /* @__PURE__ */ jsx25(Icon, {}) : void 0,
+        subtitle,
+        trailing: /* @__PURE__ */ jsx25(Button2, { type: "button", variant: "quiet", "aria-label": "Not now", title: "Not now", icon: /* @__PURE__ */ jsx25(XIcon, {}), disabled: Boolean(primary.busy) || deciding, onClick: onNotNow })
+      }
+    ),
+    /* @__PURE__ */ jsxs14(PeekCardBody, { children: [
+      children ? (
+        // The explanation is what the person came to read: 14px (the size the host's markdown
+        // paragraphs draw at), one step above the card's secondary sections.
+        /* @__PURE__ */ jsx25("div", { "data-matrx-assist-body": "", className: "type-value min-w-0 break-words text-foreground", children: typeof children === "string" ? /* @__PURE__ */ jsx25("p", { className: "whitespace-pre-wrap", children }) : children })
+      ) : null,
+      why ? /* @__PURE__ */ jsx25(PeekCardSection, { label: "Why", children: /* @__PURE__ */ jsx25(PeekCardText, { children: why }) }) : null,
+      evidence ? /* @__PURE__ */ jsx25(EvidenceSection, { evidence }) : null,
+      yourNote ? /* @__PURE__ */ jsx25(PeekCardSection, { label: "Your note", children: /* @__PURE__ */ jsx25(PeekCardText, { children: yourNote }) }) : null,
+      explainer ? (
+        // What pressing the verb will do, hung off a return arrow like a consequence.
+        /* @__PURE__ */ jsx25(PeekCardRow, { icon: CornerDownRightIcon, tone: "muted", wrap: true, children: explainer })
+      ) : /* @__PURE__ */ jsx25(PeekCardSection, { label: "Not available here", tone: "danger", children: /* @__PURE__ */ jsx25(PeekCardText, { children: "This version of the app does not know how to do this." }) }),
+      step
+    ] }),
+    /* @__PURE__ */ jsx25(
+      PeekCardFooter,
+      {
+        primaryAt: "end",
+        primary: { ...primary, disabled: Boolean(primary.disabled) || explainer === null || deciding },
+        doors
+      }
+    )
+  ] });
+}
+function EvidenceSection({ evidence }) {
+  const items = evidence.items ?? [];
+  return /* @__PURE__ */ jsxs14(PeekCardSection, { label: "What we saw", children: [
+    /* @__PURE__ */ jsx25(
+      PeekCardRows,
+      {
+        rows: [{ key: "evidence", text: evidence.label, title: evidence.label, href: evidence.href }]
+      }
+    ),
+    evidence.snippet ? /* @__PURE__ */ jsx25(PeekCardText, { clamp: 4, breaks: true, children: evidence.snippet }) : null,
+    items.length ? /* @__PURE__ */ jsx25(PeekCardRows, { limit: 6, rows: items.map((item, i) => ({ key: `${i}-${item}`, text: item, title: item })) }) : null
+  ] });
+}
+function inCardMenu(target) {
+  return target instanceof Element && target.closest("[data-radix-menu-content]") !== null;
+}
+function AssistPeekHover({ trigger, label, side = "top", align = "end", presentation, children }) {
+  const [hovered, setHovered] = React21.useState(false);
+  const [kept, setKept] = React21.useState(false);
+  const isMobile = useIsMobile();
+  const sheet = presentation === "sheet" || presentation !== "float" && isMobile;
+  const card = React21.useRef(null);
+  const close = React21.useCallback(() => {
+    setHovered(false);
+    setKept(false);
+  }, []);
+  React21.useEffect(() => {
+    if (!kept) return;
+    const onPress = (event) => {
+      if (card.current?.contains(event.target) || inCardMenu(event.target)) return;
+      close();
+    };
+    const onKey = (event) => {
+      if (event.key !== "Escape" || document.querySelector("[data-radix-menu-content]")) return;
+      close();
+    };
+    document.addEventListener("pointerdown", onPress, true);
+    document.addEventListener("keydown", onKey);
+    return () => {
+      document.removeEventListener("pointerdown", onPress, true);
+      document.removeEventListener("keydown", onKey);
+    };
+  }, [kept, close]);
+  const keep = () => {
+    setHovered(true);
+    setKept(true);
+  };
+  return /* @__PURE__ */ jsx25(
+    PeekHoverCard,
+    {
+      trigger: /* @__PURE__ */ jsx25(
+        Slot3,
+        {
+          onClick: (event) => {
+            event.stopPropagation();
+            keep();
+          },
+          children: trigger
+        }
+      ),
+      label,
+      side,
+      align,
+      open: hovered || kept,
+      onOpenChange: (next) => {
+        setHovered(next);
+        if (!next && (sheet || !kept)) close();
+      },
+      ...presentation ? { presentation } : {},
+      children: /* @__PURE__ */ jsx25("div", { ref: card, onPointerDownCapture: keep, onFocusCapture: keep, children: children(close) })
+    }
+  );
+}
+
+// src/radio-group.tsx
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+import * as React22 from "react";
+import { jsx as jsx26, jsxs as jsxs15 } from "react/jsx-runtime";
+var RadioGroupSizeContext = React22.createContext("md");
 var CONTROL_CLASSES = {
   sm: "h-3.5 w-3.5",
   md: "h-4 w-4",
@@ -4691,7 +4858,7 @@ var DOT_CLASSES = {
   md: "h-1.5 w-1.5",
   lg: "h-2 w-2"
 };
-var RadioGroup = React21.forwardRef(({ className, size = "md", ...props }, ref) => /* @__PURE__ */ jsx25(RadioGroupSizeContext.Provider, { value: size, children: /* @__PURE__ */ jsx25(
+var RadioGroup = React22.forwardRef(({ className, size = "md", ...props }, ref) => /* @__PURE__ */ jsx26(RadioGroupSizeContext.Provider, { value: size, children: /* @__PURE__ */ jsx26(
   RadioGroupPrimitive.Root,
   {
     ref,
@@ -4701,10 +4868,10 @@ var RadioGroup = React21.forwardRef(({ className, size = "md", ...props }, ref)
   }
 ) }));
 RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
-var RadioGroupItem = React21.forwardRef(({ className, size, ...props }, ref) => {
-  const groupSize = React21.useContext(RadioGroupSizeContext);
+var RadioGroupItem = React22.forwardRef(({ className, size, ...props }, ref) => {
+  const groupSize = React22.useContext(RadioGroupSizeContext);
   const resolved = size ?? groupSize;
-  return /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsx26(
     RadioGroupPrimitive.Item,
     {
       ref,
@@ -4721,7 +4888,7 @@ var RadioGroupItem = React21.forwardRef(({ className, size, ...props }, ref) =>
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsx25(RadioGroupPrimitive.Indicator, { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx25(
+      children: /* @__PURE__ */ jsx26(RadioGroupPrimitive.Indicator, { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx26(
         "div",
         {
           className: cn("rounded-full bg-primary-foreground", DOT_CLASSES[resolved])
@@ -4739,8 +4906,8 @@ function RadioList({
   className,
   "aria-label": ariaLabel
 }) {
-  const baseId = React21.useId();
-  return /* @__PURE__ */ jsx25(
+  const baseId = React22.useId();
+  return /* @__PURE__ */ jsx26(
     RadioGroup,
     {
       value,
@@ -4751,7 +4918,7 @@ function RadioList({
       children: options.map((opt, i) => {
         const selected = value === opt.value;
         const id = `${baseId}-${i}`;
-        return /* @__PURE__ */ jsxs14(
+        return /* @__PURE__ */ jsxs15(
           "label",
           {
             htmlFor: id,
@@ -4762,9 +4929,9 @@ function RadioList({
               opt.disabled && "cursor-not-allowed text-disabled-foreground"
             ),
             children: [
-              /* @__PURE__ */ jsx25(RadioGroupItem, { id, value: opt.value, disabled: opt.disabled }),
-              /* @__PURE__ */ jsx25("span", { className: "flex-1 truncate", children: opt.label }),
-              opt.hint != null && opt.hint !== "" ? /* @__PURE__ */ jsx25("span", { className: "shrink-0 text-xs tabular-nums text-muted-foreground", children: opt.hint }) : null
+              /* @__PURE__ */ jsx26(RadioGroupItem, { id, value: opt.value, disabled: opt.disabled }),
+              /* @__PURE__ */ jsx26("span", { className: "flex-1 truncate", children: opt.label }),
+              opt.hint != null && opt.hint !== "" ? /* @__PURE__ */ jsx26("span", { className: "shrink-0 text-xs tabular-nums text-muted-foreground", children: opt.hint }) : null
             ]
           },
           opt.value
@@ -4778,8 +4945,8 @@ function RadioList({
 import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
 import * as TogglePrimitive from "@radix-ui/react-toggle";
 import { cva as cva4 } from "class-variance-authority";
-import * as React22 from "react";
-import { jsx as jsx26 } from "react/jsx-runtime";
+import * as React23 from "react";
+import { jsx as jsx27 } from "react/jsx-runtime";
 var toggleVariants = cva4(
   "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
   {
@@ -4805,7 +4972,7 @@ var toggleVariants = cva4(
     }
   }
 );
-var Toggle = React22.forwardRef(({ className, variant, size, ...props }, ref) => /* @__PURE__ */ jsx26(
+var Toggle = React23.forwardRef(({ className, variant, size, ...props }, ref) => /* @__PURE__ */ jsx27(
   TogglePrimitive.Root,
   {
     ref,
@@ -4815,21 +4982,21 @@ var Toggle = React22.forwardRef(({ className, variant, size, ...props }, ref) =>
   }
 ));
 Toggle.displayName = TogglePrimitive.Root.displayName;
-var ToggleGroupContext = React22.createContext({ size: "default", variant: "default" });
-var ToggleGroup = React22.forwardRef(({ className, variant, size, children, ...props }, ref) => /* @__PURE__ */ jsx26(
+var ToggleGroupContext = React23.createContext({ size: "default", variant: "default" });
+var ToggleGroup = React23.forwardRef(({ className, variant, size, children, ...props }, ref) => /* @__PURE__ */ jsx27(
   ToggleGroupPrimitive.Root,
   {
     ref,
     "data-slot": "toggle-group",
     className: cn("flex items-center justify-center gap-1", className),
     ...props,
-    children: /* @__PURE__ */ jsx26(ToggleGroupContext.Provider, { value: { variant, size }, children })
+    children: /* @__PURE__ */ jsx27(ToggleGroupContext.Provider, { value: { variant, size }, children })
   }
 ));
 ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
-var ToggleGroupItem = React22.forwardRef(({ className, children, variant, size, ...props }, ref) => {
-  const context = React22.useContext(ToggleGroupContext);
-  return /* @__PURE__ */ jsx26(
+var ToggleGroupItem = React23.forwardRef(({ className, children, variant, size, ...props }, ref) => {
+  const context = React23.useContext(ToggleGroupContext);
+  return /* @__PURE__ */ jsx27(
     ToggleGroupPrimitive.Item,
     {
       ref,
@@ -4849,8 +5016,8 @@ var ToggleGroupItem = React22.forwardRef(({ className, children, variant, size,
 ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
 
 // src/floating-dock.tsx
-import * as React23 from "react";
-import { jsx as jsx27, jsxs as jsxs15 } from "react/jsx-runtime";
+import * as React24 from "react";
+import { jsx as jsx28, jsxs as jsxs16 } from "react/jsx-runtime";
 var BASE_SIZE = 40;
 var BASE_ICON = 20;
 var REACH = 150;
@@ -4870,29 +5037,29 @@ function FloatingDock({
   growthFactor = 2,
   labelPosition = "top"
 }) {
-  return /* @__PURE__ */ jsxs15("div", { className: cn("flex w-auto items-center justify-center bg-background", className), children: [
-    /* @__PURE__ */ jsx27(FloatingDockPhone, { items }),
-    /* @__PURE__ */ jsx27(FloatingDockDesktop, { items, growthFactor, labelPosition })
+  return /* @__PURE__ */ jsxs16("div", { className: cn("flex w-auto items-center justify-center bg-background", className), children: [
+    /* @__PURE__ */ jsx28(FloatingDockPhone, { items }),
+    /* @__PURE__ */ jsx28(FloatingDockDesktop, { items, growthFactor, labelPosition })
   ] });
 }
 function BalancedFloatingDock(props) {
-  return /* @__PURE__ */ jsx27(FloatingDock, { growthFactor: 1.8, labelPosition: "side", ...props });
+  return /* @__PURE__ */ jsx28(FloatingDock, { growthFactor: 1.8, labelPosition: "side", ...props });
 }
 function FloatingDockPhone({ items }) {
-  const [open, setOpen] = React23.useState(false);
-  return /* @__PURE__ */ jsxs15("div", { className: "relative block md:hidden", children: [
-    /* @__PURE__ */ jsx27(
+  const [open, setOpen] = React24.useState(false);
+  return /* @__PURE__ */ jsxs16("div", { className: "relative block md:hidden", children: [
+    /* @__PURE__ */ jsx28(
       Button2,
       {
         type: "button",
         variant: "quiet",
         "aria-label": open ? "Close menu" : "Open menu",
-        icon: open ? /* @__PURE__ */ jsx27(PanelTopCloseIcon, { className: "h-5 w-5" }) : /* @__PURE__ */ jsx27(PanelTopOpenIcon, { className: "h-5 w-5" }),
+        icon: open ? /* @__PURE__ */ jsx28(PanelTopCloseIcon, { className: "h-5 w-5" }) : /* @__PURE__ */ jsx28(PanelTopOpenIcon, { className: "h-5 w-5" }),
         "aria-expanded": open,
         onClick: () => setOpen(!open)
       }
     ),
-    /* @__PURE__ */ jsx27(
+    /* @__PURE__ */ jsx28(
       "div",
       {
         "data-open": open,
@@ -4902,32 +5069,32 @@ function FloatingDockPhone({ items }) {
           PANEL_MOTION_CLASS,
           open ? "translate-y-0" : "pointer-events-none -translate-y-full"
         ),
-        children: /* @__PURE__ */ jsxs15("div", { className: "flex h-full flex-col", children: [
-          /* @__PURE__ */ jsxs15("div", { className: "flex items-center justify-between border-b border-border p-4", children: [
-            /* @__PURE__ */ jsx27("h2", { className: "text-lg font-medium", children: "Menu" }),
-            /* @__PURE__ */ jsx27(
+        children: /* @__PURE__ */ jsxs16("div", { className: "flex h-full flex-col", children: [
+          /* @__PURE__ */ jsxs16("div", { className: "flex items-center justify-between border-b border-border p-4", children: [
+            /* @__PURE__ */ jsx28("h2", { className: "text-lg font-medium", children: "Menu" }),
+            /* @__PURE__ */ jsx28(
               Button2,
               {
                 type: "button",
                 variant: "quiet",
                 "aria-label": "Close menu",
-                icon: /* @__PURE__ */ jsx27(XIcon, { className: "h-6 w-6" }),
+                icon: /* @__PURE__ */ jsx28(XIcon, { className: "h-6 w-6" }),
                 onClick: () => setOpen(false)
               }
             )
           ] }),
-          /* @__PURE__ */ jsx27("div", { className: "flex-1 overflow-y-auto", children: items.map((item) => /* @__PURE__ */ jsxs15(
+          /* @__PURE__ */ jsx28("div", { className: "flex-1 overflow-y-auto", children: items.map((item) => /* @__PURE__ */ jsxs16(
             HostLink,
             {
               href: item.href,
               className: "flex items-center justify-between border-b border-border p-4",
               onClick: () => setOpen(false),
               children: [
-                /* @__PURE__ */ jsxs15("div", { className: "flex items-center space-x-4", children: [
-                  /* @__PURE__ */ jsx27("div", { className: "flex h-10 w-10 items-center justify-center rounded-full bg-muted", children: /* @__PURE__ */ jsx27("div", { className: "h-5 w-5 [&>svg]:h-full [&>svg]:w-full", children: item.icon }) }),
-                  /* @__PURE__ */ jsx27("span", { className: "font-medium", children: item.label })
+                /* @__PURE__ */ jsxs16("div", { className: "flex items-center space-x-4", children: [
+                  /* @__PURE__ */ jsx28("div", { className: "flex h-10 w-10 items-center justify-center rounded-full bg-muted", children: /* @__PURE__ */ jsx28("div", { className: "h-5 w-5 [&>svg]:h-full [&>svg]:w-full", children: item.icon }) }),
+                  /* @__PURE__ */ jsx28("span", { className: "font-medium", children: item.label })
                 ] }),
-                /* @__PURE__ */ jsx27(ChevronRightIcon, { className: "h-5 w-5 text-muted-foreground" })
+                /* @__PURE__ */ jsx28(ChevronRightIcon, { className: "h-5 w-5 text-muted-foreground" })
               ]
             },
             item.label
@@ -4942,9 +5109,9 @@ function FloatingDockDesktop({
   growthFactor,
   labelPosition
 }) {
-  const circles = React23.useRef([]);
-  const [pointerX, setPointerX] = React23.useState(null);
-  const [centers, setCenters] = React23.useState([]);
+  const circles = React24.useRef([]);
+  const [pointerX, setPointerX] = React24.useState(null);
+  const [centers, setCenters] = React24.useState([]);
   const measure = (x) => {
     setPointerX(x);
     setCenters(
@@ -4954,7 +5121,7 @@ function FloatingDockDesktop({
       })
     );
   };
-  return /* @__PURE__ */ jsx27(
+  return /* @__PURE__ */ jsx28(
     "div",
     {
       onMouseMove: (e) => measure(e.clientX),
@@ -4968,8 +5135,8 @@ function FloatingDockDesktop({
         const size = dockSize(BASE_SIZE, growthFactor, distance);
         const icon = dockSize(BASE_ICON, growthFactor, distance);
         const under = Number.isFinite(distance) && Math.abs(distance) < BASE_SIZE / 2;
-        return /* @__PURE__ */ jsx27(HostLink, { href: item.href, "aria-label": item.label, children: /* @__PURE__ */ jsxs15("div", { className: "relative", children: [
-          /* @__PURE__ */ jsx27(
+        return /* @__PURE__ */ jsx28(HostLink, { href: item.href, "aria-label": item.label, children: /* @__PURE__ */ jsxs16("div", { className: "relative", children: [
+          /* @__PURE__ */ jsx28(
             "div",
             {
               ref: (el) => {
@@ -4980,7 +5147,7 @@ function FloatingDockDesktop({
                 "relative flex aspect-square items-center justify-center rounded-full bg-muted transition-[width,height]",
                 MAGNIFY_MOTION
               ),
-              children: /* @__PURE__ */ jsx27(
+              children: /* @__PURE__ */ jsx28(
                 "div",
                 {
                   style: { width: icon, height: icon },
@@ -4993,7 +5160,7 @@ function FloatingDockDesktop({
               )
             }
           ),
-          /* @__PURE__ */ jsx27(
+          /* @__PURE__ */ jsx28(
             "div",
             {
               "data-shown": under,
@@ -5014,18 +5181,18 @@ function FloatingDockDesktop({
 }
 
 // src/deferred-dialog.tsx
-import * as React24 from "react";
-import { jsx as jsx28 } from "react/jsx-runtime";
+import * as React25 from "react";
+import { jsx as jsx29 } from "react/jsx-runtime";
 function deferredDialog(name, load, isOpen) {
   let pending = null;
   const preload = () => pending ??= load().then((component) => ({ default: component }));
-  const Body = React24.lazy(preload);
+  const Body = React25.lazy(preload);
   function Deferred(props) {
     const open = isOpen(props);
-    const [opened, setOpened] = React24.useState(open);
+    const [opened, setOpened] = React25.useState(open);
     if (open && !opened) setOpened(true);
     if (!open && !opened) return null;
-    return /* @__PURE__ */ jsx28(React24.Suspense, { fallback: null, children: /* @__PURE__ */ jsx28(Body, { ...props }) });
+    return /* @__PURE__ */ jsx29(React25.Suspense, { fallback: null, children: /* @__PURE__ */ jsx29(Body, { ...props }) });
   }
   Deferred.displayName = name;
   return Object.assign(Deferred, { preload });
@@ -5071,10 +5238,10 @@ var TextInputDialog = deferredDialog(
 // src/clipboard-fallback-host.tsx
 import { clipboardFallbackOpener } from "@ai-matrx/kit/clipboard-fallback-opener";
 import { useOpenerHost } from "@ai-matrx/kit/opener-react";
-import { jsx as jsx29 } from "react/jsx-runtime";
+import { jsx as jsx30 } from "react/jsx-runtime";
 function ClipboardFallbackHost() {
   const { open, shown, settle } = useOpenerHost(clipboardFallbackOpener);
-  return /* @__PURE__ */ jsx29(
+  return /* @__PURE__ */ jsx30(
     ClipboardFallbackDialog,
     {
       open,
@@ -5089,8 +5256,8 @@ function ClipboardFallbackHost() {
 }
 
 // src/floating-sheet.tsx
-import { useState as useState14, useEffect as useEffect8, useCallback as useCallback6, useRef as useRef8 } from "react";
-import { Fragment as Fragment5, jsx as jsx30, jsxs as jsxs16 } from "react/jsx-runtime";
+import { useState as useState15, useEffect as useEffect9, useCallback as useCallback7, useRef as useRef9 } from "react";
+import { Fragment as Fragment6, jsx as jsx31, jsxs as jsxs17 } from "react/jsx-runtime";
 var FloatingSheet = ({
   children,
   isOpen,
@@ -5125,16 +5292,16 @@ var FloatingSheet = ({
   respectHeader = true
   // Default to true - sheets should respect the header by default
 }) => {
-  const [hasRendered, setHasRendered] = useState14(false);
-  const sheetRef = useRef8(null);
-  const contentRef = useRef8(null);
-  const [scrollPosition, setScrollPosition] = useState14(0);
-  useEffect8(() => {
+  const [hasRendered, setHasRendered] = useState15(false);
+  const sheetRef = useRef9(null);
+  const contentRef = useRef9(null);
+  const [scrollPosition, setScrollPosition] = useState15(0);
+  useEffect9(() => {
     if (!hasRendered) {
       setHasRendered(true);
     }
   }, []);
-  useEffect8(() => {
+  useEffect9(() => {
     if (!lockScroll) return void 0;
     if (isOpen) {
       const scrollY = window.scrollY;
@@ -5159,7 +5326,7 @@ var FloatingSheet = ({
       document.body.style.overflow = "";
     };
   }, [isOpen, lockScroll]);
-  useEffect8(() => {
+  useEffect9(() => {
     const handleKeyDown = (e) => {
       if (e.key === "Escape" && isOpen && closeOnEsc && !e.defaultPrevented) {
         if (holdsUnsentWork) {
@@ -5176,22 +5343,22 @@ var FloatingSheet = ({
       document.removeEventListener("keydown", handleKeyDown);
     };
   }, [isOpen, closeOnEsc, holdsUnsentWork, onClose]);
-  useEffect8(() => {
+  useEffect9(() => {
     if (isOpen && initialFocus && sheetRef.current) {
       sheetRef.current.focus();
     }
   }, [isOpen, initialFocus]);
-  useEffect8(() => {
+  useEffect9(() => {
     if (isOpen && contentRef.current && preserveScrollPosition) {
       contentRef.current.scrollTop = scrollPosition;
     }
   }, [isOpen, preserveScrollPosition, scrollPosition]);
-  useEffect8(() => {
+  useEffect9(() => {
     if (!isOpen && contentRef.current && preserveScrollPosition) {
       setScrollPosition(contentRef.current.scrollTop);
     }
   }, [isOpen, preserveScrollPosition]);
-  const handleBackdropClick = useCallback6(() => {
+  const handleBackdropClick = useCallback7(() => {
     if (holdsUnsentWork) return;
     if (onBackdropClick) {
       onBackdropClick();
@@ -5396,8 +5563,8 @@ var FloatingSheet = ({
     const bottomPadding = showFooter ? "" : "pb-safe";
     return `${basePadding} ${bottomPadding}`.trim();
   };
-  return /* @__PURE__ */ jsxs16(Fragment5, { children: [
-    isOpen && hasBackdrop && /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsxs17(Fragment6, { children: [
+    isOpen && hasBackdrop && /* @__PURE__ */ jsx31(
       "div",
       {
         className: `fixed ${respectHeader ? "left-0 right-0 top-10 bottom-0" : "inset-0"} bg-[var(--matrx-overlay-scrim-soft)] z-40 ${isMobile ? "backdrop-blur-sm" : ""} transition-opacity ${durationClass} ${backdropClassName}`,
@@ -5406,7 +5573,7 @@ var FloatingSheet = ({
         "data-testid": "floating-sheet-backdrop"
       }
     ),
-    /* @__PURE__ */ jsx30(
+    /* @__PURE__ */ jsx31(
       "div",
       {
         ref: sheetRef,
@@ -5418,25 +5585,25 @@ var FloatingSheet = ({
         "aria-labelledby": "sheet-title",
         tabIndex: -1,
         "data-testid": "floating-sheet",
-        children: /* @__PURE__ */ jsxs16("div", { className: "flex flex-col h-full overflow-hidden", children: [
-          showHeader && /* @__PURE__ */ jsxs16(
+        children: /* @__PURE__ */ jsxs17("div", { className: "flex flex-col h-full overflow-hidden", children: [
+          showHeader && /* @__PURE__ */ jsxs17(
             "div",
             {
               className: `flex items-center justify-between border-b border-border ${getMobileHeaderClass()} ${headerClassName}`,
               children: [
-                /* @__PURE__ */ jsxs16("div", { className: "flex-1 min-w-0", children: [
-                  typeof title === "string" ? /* @__PURE__ */ jsx30("h2", { id: "sheet-title", className: `${isMobile ? "text-xl" : "text-lg"} font-semibold text-foreground`, children: title }) : /* @__PURE__ */ jsx30("div", { id: "sheet-title", children: title }),
-                  description && (typeof description === "string" ? /* @__PURE__ */ jsx30("p", { className: "type-body text-muted-foreground mt-1", children: description }) : /* @__PURE__ */ jsx30("div", { className: "mt-1", children: description }))
+                /* @__PURE__ */ jsxs17("div", { className: "flex-1 min-w-0", children: [
+                  typeof title === "string" ? /* @__PURE__ */ jsx31("h2", { id: "sheet-title", className: `${isMobile ? "text-xl" : "text-lg"} font-semibold text-foreground`, children: title }) : /* @__PURE__ */ jsx31("div", { id: "sheet-title", children: title }),
+                  description && (typeof description === "string" ? /* @__PURE__ */ jsx31("p", { className: "type-body text-muted-foreground mt-1", children: description }) : /* @__PURE__ */ jsx31("div", { className: "mt-1", children: description }))
                 ] }),
-                headerContent && /* @__PURE__ */ jsx30("div", { className: "ml-4 flex items-center", children: headerContent }),
-                showCloseButton && /* @__PURE__ */ jsx30(
+                headerContent && /* @__PURE__ */ jsx31("div", { className: "ml-4 flex items-center", children: headerContent }),
+                showCloseButton && /* @__PURE__ */ jsx31(
                   "button",
                   {
                     onClick: onClose,
                     className: `ml-4 rounded-full ${isMobile ? "p-2" : "p-1.5"} text-muted-foreground hover:text-foreground bg-transparent hover:bg-accent focus:outline-none focus:ring-2 focus:ring-ring`,
                     "aria-label": "Close",
                     "data-testid": "floating-sheet-close",
-                    children: closeButton || /* @__PURE__ */ jsxs16(
+                    children: closeButton || /* @__PURE__ */ jsxs17(
                       "svg",
                       {
                         xmlns: "http://www.w3.org/2000/svg",
@@ -5448,8 +5615,8 @@ var FloatingSheet = ({
                         strokeLinecap: "round",
                         strokeLinejoin: "round",
                         children: [
-                          /* @__PURE__ */ jsx30("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
-                          /* @__PURE__ */ jsx30("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+                          /* @__PURE__ */ jsx31("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+                          /* @__PURE__ */ jsx31("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
                         ]
                       }
                     )
@@ -5458,7 +5625,7 @@ var FloatingSheet = ({
               ]
             }
           ),
-          /* @__PURE__ */ jsx30(
+          /* @__PURE__ */ jsx31(
             "div",
             {
               ref: contentRef,
@@ -5467,7 +5634,7 @@ var FloatingSheet = ({
               children
             }
           ),
-          showFooter && /* @__PURE__ */ jsx30(
+          showFooter && /* @__PURE__ */ jsx31(
             "div",
             {
               className: `border-t border-border ${getMobileFooterClass()} ${footerClassName}`,
@@ -5482,12 +5649,12 @@ var FloatingSheet = ({
 };
 
 // src/simple-tooltip.tsx
-import { jsx as jsx31, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs18 } from "react/jsx-runtime";
 var SimpleTooltip = ({ children, text }) => {
   if (!text) return children;
-  return /* @__PURE__ */ jsxs17(Tooltip, { children: [
-    /* @__PURE__ */ jsx31(TooltipTrigger, { asChild: true, children }),
-    /* @__PURE__ */ jsx31(TooltipContent, { children: /* @__PURE__ */ jsx31("p", { children: text }) })
+  return /* @__PURE__ */ jsxs18(Tooltip, { children: [
+    /* @__PURE__ */ jsx32(TooltipTrigger, { asChild: true, children }),
+    /* @__PURE__ */ jsx32(TooltipContent, { children: /* @__PURE__ */ jsx32("p", { children: text }) })
   ] });
 };
 var AdvancedTooltip = ({
@@ -5510,24 +5677,24 @@ var AdvancedTooltip = ({
     success: "bg-success text-success-foreground"
   };
   const baseContentClasses = "rounded-md px-3 py-1.5 text-sm shadow-md";
-  return /* @__PURE__ */ jsxs17(Tooltip, { delayDuration, children: [
-    /* @__PURE__ */ jsx31(TooltipTrigger, { asChild: true, className, children }),
-    /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsxs18(Tooltip, { delayDuration, children: [
+    /* @__PURE__ */ jsx32(TooltipTrigger, { asChild: true, className, children }),
+    /* @__PURE__ */ jsx32(
       TooltipContent,
       {
         side,
         align,
         sideOffset,
         className: `${baseContentClasses} ${variantStyles[variant]} ${contentClassName}`,
-        children: /* @__PURE__ */ jsx31("p", { className: "leading-none whitespace-pre-wrap", children: text })
+        children: /* @__PURE__ */ jsx32("p", { className: "leading-none whitespace-pre-wrap", children: text })
       }
     )
   ] });
 };
 
 // src/loading-spinner.tsx
-import React26 from "react";
-import { Fragment as Fragment6, jsx as jsx32, jsxs as jsxs18 } from "react/jsx-runtime";
+import React27 from "react";
+import { Fragment as Fragment7, jsx as jsx33, jsxs as jsxs19 } from "react/jsx-runtime";
 var animationStyles = `
   @keyframes pulseWave {
     0% { opacity: 0.3; transform: scale(0.8); }
@@ -5584,7 +5751,7 @@ var LoadingSpinner = ({
   subtitle,
   showProgressSteps = true
 }) => {
-  React26.useEffect(() => {
+  React27.useEffect(() => {
     const styleId = "loading-spinner-styles";
     if (!document.getElementById(styleId)) {
       const style = document.createElement("style");
@@ -5604,19 +5771,19 @@ var LoadingSpinner = ({
     }
   };
   const sizeClasses2 = getSizeClasses();
-  const renderDots = () => /* @__PURE__ */ jsxs18("div", { className: cn("flex items-center", sizeClasses2.container), children: [
-    /* @__PURE__ */ jsx32("div", { className: cn(sizeClasses2.dot, "bg-primary dark:bg-primary-foreground rounded-full loading-pulse-1") }),
-    /* @__PURE__ */ jsx32("div", { className: cn(sizeClasses2.dot, "bg-primary dark:bg-primary-foreground rounded-full loading-pulse-2") }),
-    /* @__PURE__ */ jsx32("div", { className: cn(sizeClasses2.dot, "bg-primary dark:bg-primary-foreground rounded-full loading-pulse-3") })
+  const renderDots = () => /* @__PURE__ */ jsxs19("div", { className: cn("flex items-center", sizeClasses2.container), children: [
+    /* @__PURE__ */ jsx33("div", { className: cn(sizeClasses2.dot, "bg-primary dark:bg-primary-foreground rounded-full loading-pulse-1") }),
+    /* @__PURE__ */ jsx33("div", { className: cn(sizeClasses2.dot, "bg-primary dark:bg-primary-foreground rounded-full loading-pulse-2") }),
+    /* @__PURE__ */ jsx33("div", { className: cn(sizeClasses2.dot, "bg-primary dark:bg-primary-foreground rounded-full loading-pulse-3") })
   ] });
-  const renderBars = () => /* @__PURE__ */ jsxs18("div", { className: cn("flex items-center", sizeClasses2.container), children: [
-    /* @__PURE__ */ jsx32("div", { className: cn(sizeClasses2.bar, "bg-primary dark:bg-primary-foreground rounded-sm loading-bounce-1") }),
-    /* @__PURE__ */ jsx32("div", { className: cn(sizeClasses2.bar, "bg-primary dark:bg-primary-foreground rounded-sm loading-bounce-2") }),
-    /* @__PURE__ */ jsx32("div", { className: cn(sizeClasses2.bar, "bg-primary dark:bg-primary-foreground rounded-sm loading-bounce-3") }),
-    /* @__PURE__ */ jsx32("div", { className: cn(sizeClasses2.bar, "bg-primary dark:bg-primary-foreground rounded-sm loading-bounce-4") })
+  const renderBars = () => /* @__PURE__ */ jsxs19("div", { className: cn("flex items-center", sizeClasses2.container), children: [
+    /* @__PURE__ */ jsx33("div", { className: cn(sizeClasses2.bar, "bg-primary dark:bg-primary-foreground rounded-sm loading-bounce-1") }),
+    /* @__PURE__ */ jsx33("div", { className: cn(sizeClasses2.bar, "bg-primary dark:bg-primary-foreground rounded-sm loading-bounce-2") }),
+    /* @__PURE__ */ jsx33("div", { className: cn(sizeClasses2.bar, "bg-primary dark:bg-primary-foreground rounded-sm loading-bounce-3") }),
+    /* @__PURE__ */ jsx33("div", { className: cn(sizeClasses2.bar, "bg-primary dark:bg-primary-foreground rounded-sm loading-bounce-4") })
   ] });
-  const renderBrain = () => /* @__PURE__ */ jsxs18("div", { className: "relative w-6 h-6 flex items-center justify-center", children: [
-    /* @__PURE__ */ jsx32("div", { className: "absolute", children: /* @__PURE__ */ jsx32(
+  const renderBrain = () => /* @__PURE__ */ jsxs19("div", { className: "relative w-6 h-6 flex items-center justify-center", children: [
+    /* @__PURE__ */ jsx33("div", { className: "absolute", children: /* @__PURE__ */ jsx33(
       "svg",
       {
         width: "24",
@@ -5624,7 +5791,7 @@ var LoadingSpinner = ({
         viewBox: "0 0 24 24",
         fill: "none",
         className: "w-5 h-5 text-primary dark:text-primary-foreground",
-        children: /* @__PURE__ */ jsx32(
+        children: /* @__PURE__ */ jsx33(
           "path",
           {
             d: "M12 4C9.5 4 7.5 5.5 7.5 8C7.5 9 7.5 9.5 7 10.5C6.5 11.5 6 12 6 13.5C6 15.5 7.5 17 9.5 17C10.5 17 11 16.5 12 16.5C13 16.5 13.5 17 14.5 17C16.5 17 18 15.5 18 13.5C18 12 17.5 11.5 17 10.5C16.5 9.5 16.5 9 16.5 8C16.5 5.5 14.5 4 12 4Z",
@@ -5635,44 +5802,44 @@ var LoadingSpinner = ({
         )
       }
     ) }),
-    /* @__PURE__ */ jsxs18("div", { className: "absolute inset-0", children: [
-      /* @__PURE__ */ jsx32("div", { className: "absolute w-1 h-1 bg-primary/60 dark:bg-primary-foreground/60 rounded-full left-[8px] top-[10px] loading-neuron-1" }),
-      /* @__PURE__ */ jsx32("div", { className: "absolute w-1 h-1 bg-primary/60 dark:bg-primary-foreground/60 rounded-full left-[12px] top-[8px] loading-neuron-2" }),
-      /* @__PURE__ */ jsx32("div", { className: "absolute w-1 h-1 bg-primary/60 dark:bg-primary-foreground/60 rounded-full left-[16px] top-[10px] loading-neuron-3" }),
-      /* @__PURE__ */ jsx32("div", { className: "absolute w-1 h-1 bg-primary/60 dark:bg-primary-foreground/60 rounded-full left-[10px] top-[14px] loading-neuron-4" }),
-      /* @__PURE__ */ jsx32("div", { className: "absolute w-1 h-1 bg-primary/60 dark:bg-primary-foreground/60 rounded-full left-[14px] top-[14px] loading-neuron-5" })
+    /* @__PURE__ */ jsxs19("div", { className: "absolute inset-0", children: [
+      /* @__PURE__ */ jsx33("div", { className: "absolute w-1 h-1 bg-primary/60 dark:bg-primary-foreground/60 rounded-full left-[8px] top-[10px] loading-neuron-1" }),
+      /* @__PURE__ */ jsx33("div", { className: "absolute w-1 h-1 bg-primary/60 dark:bg-primary-foreground/60 rounded-full left-[12px] top-[8px] loading-neuron-2" }),
+      /* @__PURE__ */ jsx33("div", { className: "absolute w-1 h-1 bg-primary/60 dark:bg-primary-foreground/60 rounded-full left-[16px] top-[10px] loading-neuron-3" }),
+      /* @__PURE__ */ jsx33("div", { className: "absolute w-1 h-1 bg-primary/60 dark:bg-primary-foreground/60 rounded-full left-[10px] top-[14px] loading-neuron-4" }),
+      /* @__PURE__ */ jsx33("div", { className: "absolute w-1 h-1 bg-primary/60 dark:bg-primary-foreground/60 rounded-full left-[14px] top-[14px] loading-neuron-5" })
     ] }),
-    /* @__PURE__ */ jsx32("div", { className: "absolute w-full h-full rounded-full border border-primary/30 dark:border-primary-foreground/30 loading-brain-pulse-1" }),
-    /* @__PURE__ */ jsx32("div", { className: "absolute w-full h-full rounded-full border border-primary/30 dark:border-primary-foreground/30 loading-brain-pulse-2" })
+    /* @__PURE__ */ jsx33("div", { className: "absolute w-full h-full rounded-full border border-primary/30 dark:border-primary-foreground/30 loading-brain-pulse-1" }),
+    /* @__PURE__ */ jsx33("div", { className: "absolute w-full h-full rounded-full border border-primary/30 dark:border-primary-foreground/30 loading-brain-pulse-2" })
   ] });
-  const renderMinimal = () => /* @__PURE__ */ jsx32("div", { className: "relative", children: /* @__PURE__ */ jsx32("div", { className: cn(sizeClasses2.dot, "bg-primary dark:bg-primary-foreground rounded-full loading-pulse-1") }) });
-  const renderWorkflow = () => /* @__PURE__ */ jsxs18("div", { className: "flex flex-col items-center justify-center space-y-6", children: [
-    /* @__PURE__ */ jsxs18("div", { className: "relative", children: [
-      /* @__PURE__ */ jsx32("div", { className: "w-16 h-16 bg-primary/10 dark:bg-primary-foreground/10 rounded-full flex items-center justify-center", children: /* @__PURE__ */ jsx32(WorkflowIcon, { className: "w-8 h-8 text-primary dark:text-primary-foreground" }) }),
-      /* @__PURE__ */ jsx32("div", { className: "absolute -top-1 -right-1 w-6 h-6 bg-primary dark:bg-primary-foreground rounded-full flex items-center justify-center", children: /* @__PURE__ */ jsx32(PlusIcon, { className: "w-3 h-3 text-primary-foreground dark:text-primary" }) }),
-      /* @__PURE__ */ jsx32("div", { className: "absolute inset-0 border-2 border-transparent border-t-primary dark:border-t-primary-foreground rounded-full matrx-spin" })
+  const renderMinimal = () => /* @__PURE__ */ jsx33("div", { className: "relative", children: /* @__PURE__ */ jsx33("div", { className: cn(sizeClasses2.dot, "bg-primary dark:bg-primary-foreground rounded-full loading-pulse-1") }) });
+  const renderWorkflow = () => /* @__PURE__ */ jsxs19("div", { className: "flex flex-col items-center justify-center space-y-6", children: [
+    /* @__PURE__ */ jsxs19("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx33("div", { className: "w-16 h-16 bg-primary/10 dark:bg-primary-foreground/10 rounded-full flex items-center justify-center", children: /* @__PURE__ */ jsx33(WorkflowIcon, { className: "w-8 h-8 text-primary dark:text-primary-foreground" }) }),
+      /* @__PURE__ */ jsx33("div", { className: "absolute -top-1 -right-1 w-6 h-6 bg-primary dark:bg-primary-foreground rounded-full flex items-center justify-center", children: /* @__PURE__ */ jsx33(PlusIcon, { className: "w-3 h-3 text-primary-foreground dark:text-primary" }) }),
+      /* @__PURE__ */ jsx33("div", { className: "absolute inset-0 border-2 border-transparent border-t-primary dark:border-t-primary-foreground rounded-full matrx-spin" })
     ] }),
-    /* @__PURE__ */ jsxs18("div", { className: "text-center space-y-2", children: [
-      /* @__PURE__ */ jsxs18("h2", { className: "text-lg font-semibold text-foreground flex items-center gap-2 justify-center", children: [
-        /* @__PURE__ */ jsx32(Loader2Icon, { className: "w-4 h-4 matrx-spin" }),
+    /* @__PURE__ */ jsxs19("div", { className: "text-center space-y-2", children: [
+      /* @__PURE__ */ jsxs19("h2", { className: "text-lg font-semibold text-foreground flex items-center gap-2 justify-center", children: [
+        /* @__PURE__ */ jsx33(Loader2Icon, { className: "w-4 h-4 matrx-spin" }),
         title || "Loading Workflow"
       ] }),
-      /* @__PURE__ */ jsx32("p", { className: "type-body text-muted-foreground max-w-sm", children: subtitle || message || "Setting up your workflow..." })
+      /* @__PURE__ */ jsx33("p", { className: "type-body text-muted-foreground max-w-sm", children: subtitle || message || "Setting up your workflow..." })
     ] }),
-    showProgressSteps && /* @__PURE__ */ jsxs18("div", { className: "flex items-center gap-2 type-secondary text-muted-foreground", children: [
-      /* @__PURE__ */ jsxs18("div", { className: "flex items-center gap-1", children: [
-        /* @__PURE__ */ jsx32("div", { className: "w-2 h-2 bg-primary dark:bg-primary-foreground rounded-full matrx-pulse" }),
-        /* @__PURE__ */ jsx32("span", { children: "Loading" })
+    showProgressSteps && /* @__PURE__ */ jsxs19("div", { className: "flex items-center gap-2 type-secondary text-muted-foreground", children: [
+      /* @__PURE__ */ jsxs19("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx33("div", { className: "w-2 h-2 bg-primary dark:bg-primary-foreground rounded-full matrx-pulse" }),
+        /* @__PURE__ */ jsx33("span", { children: "Loading" })
       ] }),
-      /* @__PURE__ */ jsx32("div", { className: "w-4 h-px bg-muted-foreground/30" }),
-      /* @__PURE__ */ jsxs18("div", { className: "flex items-center gap-1", children: [
-        /* @__PURE__ */ jsx32("div", { className: "w-2 h-2 bg-muted-foreground/30 rounded-full" }),
-        /* @__PURE__ */ jsx32("span", { children: "Initializing" })
+      /* @__PURE__ */ jsx33("div", { className: "w-4 h-px bg-muted-foreground/30" }),
+      /* @__PURE__ */ jsxs19("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx33("div", { className: "w-2 h-2 bg-muted-foreground/30 rounded-full" }),
+        /* @__PURE__ */ jsx33("span", { children: "Initializing" })
       ] }),
-      /* @__PURE__ */ jsx32("div", { className: "w-4 h-px bg-muted-foreground/30" }),
-      /* @__PURE__ */ jsxs18("div", { className: "flex items-center gap-1", children: [
-        /* @__PURE__ */ jsx32("div", { className: "w-2 h-2 bg-muted-foreground/30 rounded-full" }),
-        /* @__PURE__ */ jsx32("span", { children: "Ready" })
+      /* @__PURE__ */ jsx33("div", { className: "w-4 h-px bg-muted-foreground/30" }),
+      /* @__PURE__ */ jsxs19("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx33("div", { className: "w-2 h-2 bg-muted-foreground/30 rounded-full" }),
+        /* @__PURE__ */ jsx33("span", { children: "Ready" })
       ] })
     ] })
   ] });
@@ -5701,32 +5868,32 @@ var LoadingSpinner = ({
     }
   };
   if (variant === "workflow" && (fullscreen || overlay)) {
-    return /* @__PURE__ */ jsxs18("div", { className: cn(
+    return /* @__PURE__ */ jsxs19("div", { className: cn(
       "flex items-center justify-center bg-background",
       fullscreen && "h-dvh w-full",
       className
     ), children: [
-      overlay && /* @__PURE__ */ jsx32("div", { className: "absolute inset-0 bg-background/80 backdrop-blur-sm z-50" }),
-      /* @__PURE__ */ jsx32("div", { className: cn(
+      overlay && /* @__PURE__ */ jsx33("div", { className: "absolute inset-0 bg-background/80 backdrop-blur-sm z-50" }),
+      /* @__PURE__ */ jsx33("div", { className: cn(
         "flex flex-col items-center justify-center",
         overlay && "relative z-50"
       ), children: renderWorkflow() })
     ] });
   }
-  return /* @__PURE__ */ jsx32("div", { className: cn("flex items-center", className), children: variant === "workflow" ? renderWorkflow() : /* @__PURE__ */ jsxs18(Fragment6, { children: [
+  return /* @__PURE__ */ jsx33("div", { className: cn("flex items-center", className), children: variant === "workflow" ? renderWorkflow() : /* @__PURE__ */ jsxs19(Fragment7, { children: [
     renderSpinner(),
-    showMessage && /* @__PURE__ */ jsx32("span", { className: cn("ml-3 text-muted-foreground", sizeClasses2.text), children: message || getDefaultMessage() })
+    showMessage && /* @__PURE__ */ jsx33("span", { className: cn("ml-3 text-muted-foreground", sizeClasses2.text), children: message || getDefaultMessage() })
   ] }) });
 };
 
 // src/mini-loader.tsx
-import { jsx as jsx33 } from "react/jsx-runtime";
+import { jsx as jsx34 } from "react/jsx-runtime";
 function MatrxMiniLoader() {
-  return /* @__PURE__ */ jsx33(LoadingSpinner, { variant: "dots", message: "Initializing Matrx...", size: "md" });
+  return /* @__PURE__ */ jsx34(LoadingSpinner, { variant: "dots", message: "Initializing Matrx...", size: "md" });
 }
 
 // src/suspense-loader.tsx
-import { jsx as jsx34, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx35, jsxs as jsxs20 } from "react/jsx-runtime";
 var sizeClasses = {
   xs: "h-3 w-3",
   sm: "h-4 w-4",
@@ -5739,7 +5906,7 @@ function SuspenseLoader({
   message,
   className = ""
 }) {
-  const spinner = /* @__PURE__ */ jsx34(
+  const spinner = /* @__PURE__ */ jsx35(
     Loader2Icon,
     {
       className: `${sizeClasses[size]} matrx-spin text-disabled-foreground ${className}`,
@@ -5747,7 +5914,7 @@ function SuspenseLoader({
       "aria-label": message ? void 0 : "Loading"
     }
   );
-  const content = message ? /* @__PURE__ */ jsxs19(
+  const content = message ? /* @__PURE__ */ jsxs20(
     "span",
     {
       className: "inline-flex items-center gap-2",
@@ -5755,19 +5922,19 @@ function SuspenseLoader({
       "aria-live": "polite",
       children: [
         spinner,
-        /* @__PURE__ */ jsx34("span", { children: message })
+        /* @__PURE__ */ jsx35("span", { children: message })
       ]
     }
   ) : spinner;
   if (centered) {
-    return /* @__PURE__ */ jsx34("div", { className: "flex items-center justify-center w-full h-full min-h-[2rem]", children: content });
+    return /* @__PURE__ */ jsx35("div", { className: "flex items-center justify-center w-full h-full min-h-[2rem]", children: content });
   }
   return content;
 }
 
 // src/shimmer-text.tsx
-import { useCallback as useCallback7, useRef as useRef9 } from "react";
-import { jsx as jsx35 } from "react/jsx-runtime";
+import { useCallback as useCallback8, useRef as useRef10 } from "react";
+import { jsx as jsx36 } from "react/jsx-runtime";
 var SHIMMER_STYLE = {
   backgroundImage: "linear-gradient(90deg, color-mix(in srgb, currentColor 18%, transparent) 0%, currentColor 50%, color-mix(in srgb, currentColor 18%, transparent) 100%)",
   backgroundSize: "200% 100%",
@@ -5776,8 +5943,8 @@ var SHIMMER_STYLE = {
   WebkitTextFillColor: "transparent"
 };
 function useShimmerSweep(durationMs = 2e3) {
-  const animationRef = useRef9(null);
-  return useCallback7(
+  const animationRef = useRef10(null);
+  return useCallback8(
     (el) => {
       animationRef.current?.cancel();
       animationRef.current = null;
@@ -5795,7 +5962,7 @@ function useShimmerSweep(durationMs = 2e3) {
 }
 function ShimmerText({ text, className }) {
   const ref = useShimmerSweep();
-  return /* @__PURE__ */ jsx35(
+  return /* @__PURE__ */ jsx36(
     "span",
     {
       ref,
@@ -5852,24 +6019,24 @@ function formThemeClasses(theme) {
 
 // src/first-use-hint.tsx
 import * as PopoverPrimitive2 from "@radix-ui/react-popover";
-import { Slot as Slot3 } from "@radix-ui/react-slot";
-import * as React27 from "react";
-import { Fragment as Fragment7, jsx as jsx36, jsxs as jsxs20 } from "react/jsx-runtime";
+import { Slot as Slot4 } from "@radix-ui/react-slot";
+import * as React28 from "react";
+import { Fragment as Fragment8, jsx as jsx37, jsxs as jsxs21 } from "react/jsx-runtime";
 var FIRST_USE_HINT_TITLE_MAX = 32;
 var FIRST_USE_HINT_DETAIL_MAX = 60;
-var FirstUseHintContext = React27.createContext(null);
+var FirstUseHintContext = React28.createContext(null);
 function FirstUseHintProvider({
   store,
   children
 }) {
-  return /* @__PURE__ */ jsx36(FirstUseHintContext.Provider, { value: store, children });
+  return /* @__PURE__ */ jsx37(FirstUseHintContext.Provider, { value: store, children });
 }
 var sessionLearned = /* @__PURE__ */ new Set();
 var warnedNoProvider = false;
 function useFirstUseHint(id) {
-  const store = React27.useContext(FirstUseHintContext);
-  const [, rerender] = React27.useReducer((n) => n + 1, 0);
-  const [dismissed, setDismissed] = React27.useState(false);
+  const store = React28.useContext(FirstUseHintContext);
+  const [, rerender] = React28.useReducer((n) => n + 1, 0);
+  const [dismissed, setDismissed] = React28.useState(false);
   if (!store && !warnedNoProvider) {
     warnedNoProvider = true;
     console.warn(
@@ -5878,7 +6045,7 @@ function useFirstUseHint(id) {
   }
   const learned = store ? store.learned.includes(id) : sessionLearned.has(id);
   const ready = store ? store.ready : true;
-  const learn = React27.useCallback(() => {
+  const learn = React28.useCallback(() => {
     setDismissed(true);
     if (store) {
       if (!store.learned.includes(id)) store.learn(id);
@@ -5901,11 +6068,11 @@ function FirstUseHint({
   pulse,
   children
 }) {
-  const hostRef = React27.useRef(null);
+  const hostRef = React28.useRef(null);
   const { visible, learn } = useFirstUseHint(id);
   const eligible = visible && when;
-  const [shown, setShown] = React27.useState(false);
-  React27.useEffect(() => {
+  const [shown, setShown] = React28.useState(false);
+  React28.useEffect(() => {
     if (!eligible) {
       setShown(false);
       return void 0;
@@ -5922,11 +6089,11 @@ function FirstUseHint({
   }
   const open = eligible && shown;
   const beaconOn = open && beacon !== "none";
-  const target = React27.useCallback(
+  const target = React28.useCallback(
     () => pulse ? hostRef.current?.querySelector(pulse) ?? hostRef.current : hostRef.current,
     [pulse]
   );
-  React27.useEffect(() => {
+  React28.useEffect(() => {
     if (!pulse || !beaconOn) return void 0;
     const el = target();
     if (!el || el === hostRef.current) return void 0;
@@ -5937,7 +6104,7 @@ function FirstUseHint({
       el.removeAttribute("data-matrx-hint-beacon");
     };
   }, [pulse, beaconOn, beacon, target]);
-  const virtualRef = React27.useMemo(
+  const virtualRef = React28.useMemo(
     () => ({
       current: {
         getBoundingClientRect: () => target()?.getBoundingClientRect() ?? new DOMRect()
@@ -5945,10 +6112,10 @@ function FirstUseHint({
     }),
     [target]
   );
-  return /* @__PURE__ */ jsxs20(Popover, { open, children: [
-    pulse ? /* @__PURE__ */ jsxs20(Fragment7, { children: [
-      /* @__PURE__ */ jsx36(
-        Slot3,
+  return /* @__PURE__ */ jsxs21(Popover, { open, children: [
+    pulse ? /* @__PURE__ */ jsxs21(Fragment8, { children: [
+      /* @__PURE__ */ jsx37(
+        Slot4,
         {
           ref: hostRef,
           "data-matrx-first-use-hint": open ? id : void 0,
@@ -5956,8 +6123,8 @@ function FirstUseHint({
           children
         }
       ),
-      /* @__PURE__ */ jsx36(PopoverAnchor, { virtualRef })
-    ] }) : /* @__PURE__ */ jsx36(
+      /* @__PURE__ */ jsx37(PopoverAnchor, { virtualRef })
+    ] }) : /* @__PURE__ */ jsx37(
       PopoverAnchor,
       {
         asChild: true,
@@ -5969,7 +6136,7 @@ function FirstUseHint({
         children
       }
     ),
-    /* @__PURE__ */ jsxs20(
+    /* @__PURE__ */ jsxs21(
       PopoverContent,
       {
         side,
@@ -5986,17 +6153,17 @@ function FirstUseHint({
         onInteractOutside: (e) => e.preventDefault(),
         onEscapeKeyDown: learn,
         children: [
-          /* @__PURE__ */ jsxs20("div", { className: "flex items-center gap-1 py-0.5 pl-3 pr-0.5", children: [
-            /* @__PURE__ */ jsxs20("div", { className: "flex min-w-0 flex-col py-1", children: [
-              /* @__PURE__ */ jsx36("span", { className: "type-secondary truncate font-medium text-foreground", children: title }),
+          /* @__PURE__ */ jsxs21("div", { className: "flex items-center gap-1 py-0.5 pl-3 pr-0.5", children: [
+            /* @__PURE__ */ jsxs21("div", { className: "flex min-w-0 flex-col py-1", children: [
+              /* @__PURE__ */ jsx37("span", { className: "type-secondary truncate font-medium text-foreground", children: title }),
               detail ? (
                 // Two lines at most: on a 375px phone a full 60-character line can wrap once.
-                /* @__PURE__ */ jsx36("span", { className: "type-secondary line-clamp-2 text-muted-foreground", children: detail })
+                /* @__PURE__ */ jsx37("span", { className: "type-secondary line-clamp-2 text-muted-foreground", children: detail })
               ) : null
             ] }),
-            /* @__PURE__ */ jsx36(IconButton, { icon: XIcon, "aria-label": "Dismiss tip", className: "shrink-0", onClick: learn })
+            /* @__PURE__ */ jsx37(IconButton, { icon: XIcon, "aria-label": "Dismiss tip", className: "shrink-0", onClick: learn })
           ] }),
-          /* @__PURE__ */ jsx36(PopoverPrimitive2.Arrow, { className: "fill-popover", width: 10, height: 5 })
+          /* @__PURE__ */ jsx37(PopoverPrimitive2.Arrow, { className: "fill-popover", width: 10, height: 5 })
         ]
       }
     )
@@ -6004,8 +6171,8 @@ function FirstUseHint({
 }
 
 // src/review-changes.tsx
-import * as React28 from "react";
-import { jsx as jsx37, jsxs as jsxs21 } from "react/jsx-runtime";
+import * as React29 from "react";
+import { jsx as jsx38, jsxs as jsxs22 } from "react/jsx-runtime";
 var SKIP = "skip";
 function unansweredQuestions(preview, answers) {
   return preview.questions.filter((q) => !answers[q.id]);
@@ -6018,16 +6185,16 @@ function acceptSuggestions(preview, answers) {
   for (const q of preview.questions) if (!next[q.id] && q.suggested) next[q.id] = q.suggested;
   return next;
 }
-var RenderItemContext = React28.createContext(void 0);
+var RenderItemContext = React29.createContext(void 0);
 function ItemDoor({ item, onOpenItem }) {
-  const renderItem = React28.useContext(RenderItemContext);
+  const renderItem = React29.useContext(RenderItemContext);
   const hosted = renderItem ? renderItem(item) : null;
   if (hosted != null) {
-    return /* @__PURE__ */ jsx37("span", { "data-change-item": item.id, className: "inline-flex max-w-full items-center", children: hosted });
+    return /* @__PURE__ */ jsx38("span", { "data-change-item": item.id, className: "inline-flex max-w-full items-center", children: hosted });
   }
   const title = item.title?.trim() || "Untitled";
-  return /* @__PURE__ */ jsxs21("span", { "data-change-item": item.id, className: "inline-flex max-w-full items-center gap-0.5", children: [
-    /* @__PURE__ */ jsx37(
+  return /* @__PURE__ */ jsxs22("span", { "data-change-item": item.id, className: "inline-flex max-w-full items-center gap-0.5", children: [
+    /* @__PURE__ */ jsx38(
       Button2,
       {
         type: "button",
@@ -6038,12 +6205,12 @@ function ItemDoor({ item, onOpenItem }) {
         children: title
       }
     ),
-    /* @__PURE__ */ jsx37(
+    /* @__PURE__ */ jsx38(
       Button2,
       {
         type: "button",
         variant: "quiet",
-        icon: /* @__PURE__ */ jsx37(ExternalLinkIcon, {}),
+        icon: /* @__PURE__ */ jsx38(ExternalLinkIcon, {}),
         "data-clickable": "",
         "aria-label": `Open ${title} in a new tab`,
         className: "shrink-0",
@@ -6055,9 +6222,9 @@ function ItemDoor({ item, onOpenItem }) {
 function Doors({ items, total, onOpenItem }) {
   if (!items.length) return null;
   const more = (total ?? items.length) - items.length;
-  return /* @__PURE__ */ jsxs21("span", { className: "flex min-w-0 flex-wrap items-center gap-x-3 gap-y-1", children: [
-    items.map((item) => /* @__PURE__ */ jsx37(ItemDoor, { item, onOpenItem }, `${item.table ?? item.type}:${item.id}`)),
-    more > 0 ? /* @__PURE__ */ jsxs21("span", { className: "text-xs text-muted-foreground", children: [
+  return /* @__PURE__ */ jsxs22("span", { className: "flex min-w-0 flex-wrap items-center gap-x-3 gap-y-1", children: [
+    items.map((item) => /* @__PURE__ */ jsx38(ItemDoor, { item, onOpenItem }, `${item.table ?? item.type}:${item.id}`)),
+    more > 0 ? /* @__PURE__ */ jsxs22("span", { className: "text-xs text-muted-foreground", children: [
       "+",
       more,
       " more"
@@ -6065,17 +6232,17 @@ function Doors({ items, total, onOpenItem }) {
   ] });
 }
 function Row({ title, meta, children }) {
-  return /* @__PURE__ */ jsxs21("div", { "data-change-row": "", className: "flex flex-col gap-1 px-3 py-2", children: [
-    /* @__PURE__ */ jsxs21("div", { className: "flex items-baseline justify-between gap-3", children: [
-      /* @__PURE__ */ jsx37("span", { className: "min-w-0 text-sm text-foreground", children: title }),
-      meta ? /* @__PURE__ */ jsx37("span", { className: "shrink-0 text-xs text-muted-foreground", children: meta }) : null
+  return /* @__PURE__ */ jsxs22("div", { "data-change-row": "", className: "flex flex-col gap-1 px-3 py-2", children: [
+    /* @__PURE__ */ jsxs22("div", { className: "flex items-baseline justify-between gap-3", children: [
+      /* @__PURE__ */ jsx38("span", { className: "min-w-0 text-sm text-foreground", children: title }),
+      meta ? /* @__PURE__ */ jsx38("span", { className: "shrink-0 text-xs text-muted-foreground", children: meta }) : null
     ] }),
     children
   ] });
 }
 function Alarm({ warning, onOpenItem }) {
   const items = [...warning.items ?? [], ...warning.users ?? []];
-  return /* @__PURE__ */ jsxs21(
+  return /* @__PURE__ */ jsxs22(
     "div",
     {
       role: "alert",
@@ -6083,8 +6250,8 @@ function Alarm({ warning, onOpenItem }) {
       "data-severity": warning.severity,
       className: "flex flex-col gap-1.5 rounded-group border border-destructive bg-destructive/10 px-3 py-2",
       children: [
-        /* @__PURE__ */ jsx37("span", { className: "text-sm font-medium text-foreground", children: warning.message }),
-        /* @__PURE__ */ jsx37(Doors, { items, total: warning.count ?? items.length, onOpenItem })
+        /* @__PURE__ */ jsx38("span", { className: "text-sm font-medium text-foreground", children: warning.message }),
+        /* @__PURE__ */ jsx38(Doors, { items, total: warning.count ?? items.length, onOpenItem })
       ]
     }
   );
@@ -6101,10 +6268,10 @@ function Question({ question, answer, onAnswer, onOpenItem, disabled }) {
   const suggested = !question.suggested ? null : yes && question.suggested === yes.value ? "yes" : noOption && question.suggested === noOption.value ? "no" : "other";
   const wayOut = rest.map((o) => ({ value: o.value, label: o.label }));
   const chosen = [...question.options, ...question.way_out].find((o) => o.value === answer);
-  return /* @__PURE__ */ jsxs21("div", { "data-change-question": question.id, "data-kind": question.kind, className: "flex flex-col gap-1.5 px-3 py-2", children: [
-    /* @__PURE__ */ jsx37("span", { className: "text-sm text-foreground", children: question.prompt }),
-    /* @__PURE__ */ jsx37(Doors, { items: question.items.sample, total: question.items.count, onOpenItem }),
-    /* @__PURE__ */ jsx37(
+  return /* @__PURE__ */ jsxs22("div", { "data-change-question": question.id, "data-kind": question.kind, className: "flex flex-col gap-1.5 px-3 py-2", children: [
+    /* @__PURE__ */ jsx38("span", { className: "text-sm text-foreground", children: question.prompt }),
+    /* @__PURE__ */ jsx38(Doors, { items: question.items.sample, total: question.items.count, onOpenItem }),
+    /* @__PURE__ */ jsx38(
       DecisionControl,
       {
         value,
@@ -6126,7 +6293,7 @@ function Question({ question, answer, onAnswer, onOpenItem, disabled }) {
         "aria-label": question.prompt
       }
     ),
-    chosen?.consequence ? /* @__PURE__ */ jsx37("span", { className: "text-xs text-muted-foreground", children: chosen.consequence }) : null
+    chosen?.consequence ? /* @__PURE__ */ jsx38("span", { className: "text-xs text-muted-foreground", children: chosen.consequence }) : null
   ] });
 }
 var VERB_WORDS = {
@@ -6135,7 +6302,7 @@ var VERB_WORDS = {
   move: { goes: "Moves with it", commit: "Move" }
 };
 function ReviewChanges({ renderItem, ...props }) {
-  return /* @__PURE__ */ jsx37(RenderItemContext.Provider, { value: renderItem, children: /* @__PURE__ */ jsx37(ReviewChangesBody, { ...props }) });
+  return /* @__PURE__ */ jsx38(RenderItemContext.Provider, { value: renderItem, children: /* @__PURE__ */ jsx38(ReviewChangesBody, { ...props }) });
 }
 function ReviewChangesBody({ preview, answers, onAnswer, onOpenItem, onCommit, onCancel, busy, commitLabel, className }) {
   const words = VERB_WORDS[preview.verb] ?? { goes: "Changes with it", commit: "Apply" };
@@ -6149,33 +6316,33 @@ function ReviewChangesBody({ preview, answers, onAnswer, onOpenItem, onCommit, o
   const suggestible = pending.filter((q) => q.suggested);
   const ready = canCommitChanges(preview, answers);
   const target = preview.target_organization?.name;
-  return /* @__PURE__ */ jsxs21("div", { "data-review-changes": "", "data-verb": preview.verb, className: cn("flex min-h-0 flex-col gap-3", className), children: [
-    alarms.map((w, i) => /* @__PURE__ */ jsx37(Alarm, { warning: w, onOpenItem }, `${w.kind}:${i}`)),
-    /* @__PURE__ */ jsx37(RowGroup, { title: preview.verb === "move" && target ? `Moving to ${target}` : void 0, children: /* @__PURE__ */ jsx37(Row, { title: /* @__PURE__ */ jsx37(Doors, { items: preview.roots, onOpenItem }) }) }),
-    moving.length ? /* @__PURE__ */ jsx37(RowGroup, { title: words.goes, children: moving.map((g) => /* @__PURE__ */ jsx37(Row, { title: g.noun, meta: `${g.count_is_estimate ? "about " : ""}${g.count}`, children: /* @__PURE__ */ jsx37(Doors, { items: g.sample, total: g.count, onOpenItem }) }, `${g.rule_id ?? "root"}:${g.table ?? g.type}`)) }) : null,
-    kept.length || staying.length ? /* @__PURE__ */ jsxs21(RowGroup, { title: "Stays where it is", children: [
-      kept.map((w, i) => /* @__PURE__ */ jsx37(Row, { title: w.message ?? w.noun ?? "Used elsewhere", meta: w.count ?? void 0, children: /* @__PURE__ */ jsx37(Doors, { items: w.items ?? [], total: w.count, onOpenItem }) }, `kept:${i}`)),
-      staying.map((g) => /* @__PURE__ */ jsx37(Row, { title: g.noun, meta: g.count, children: /* @__PURE__ */ jsx37(Doors, { items: g.sample, total: g.count, onOpenItem }) }, `stay:${g.table ?? g.type}`))
+  return /* @__PURE__ */ jsxs22("div", { "data-review-changes": "", "data-verb": preview.verb, className: cn("flex min-h-0 flex-col gap-3", className), children: [
+    alarms.map((w, i) => /* @__PURE__ */ jsx38(Alarm, { warning: w, onOpenItem }, `${w.kind}:${i}`)),
+    /* @__PURE__ */ jsx38(RowGroup, { title: preview.verb === "move" && target ? `Moving to ${target}` : void 0, children: /* @__PURE__ */ jsx38(Row, { title: /* @__PURE__ */ jsx38(Doors, { items: preview.roots, onOpenItem }) }) }),
+    moving.length ? /* @__PURE__ */ jsx38(RowGroup, { title: words.goes, children: moving.map((g) => /* @__PURE__ */ jsx38(Row, { title: g.noun, meta: `${g.count_is_estimate ? "about " : ""}${g.count}`, children: /* @__PURE__ */ jsx38(Doors, { items: g.sample, total: g.count, onOpenItem }) }, `${g.rule_id ?? "root"}:${g.table ?? g.type}`)) }) : null,
+    kept.length || staying.length ? /* @__PURE__ */ jsxs22(RowGroup, { title: "Stays where it is", children: [
+      kept.map((w, i) => /* @__PURE__ */ jsx38(Row, { title: w.message ?? w.noun ?? "Used elsewhere", meta: w.count ?? void 0, children: /* @__PURE__ */ jsx38(Doors, { items: w.items ?? [], total: w.count, onOpenItem }) }, `kept:${i}`)),
+      staying.map((g) => /* @__PURE__ */ jsx38(Row, { title: g.noun, meta: g.count, children: /* @__PURE__ */ jsx38(Doors, { items: g.sample, total: g.count, onOpenItem }) }, `stay:${g.table ?? g.type}`))
     ] }) : null,
-    preview.questions.length ? /* @__PURE__ */ jsx37(RowGroup, { title: "Decide", children: preview.questions.map((q) => /* @__PURE__ */ jsx37(Question, { question: q, answer: answers[q.id], onAnswer, onOpenItem, disabled: busy }, q.id)) }) : null,
-    auto || unchecked ? /* @__PURE__ */ jsxs21("div", { className: "flex flex-wrap gap-2 px-1", children: [
-      auto ? /* @__PURE__ */ jsx37(Badge, { tone: "neutral", children: `${auto.count ?? ""} decided automatically`.trim() }) : null,
-      unchecked ? /* @__PURE__ */ jsx37(Badge, { tone: "neutral", children: "Links inside text not checked" }) : null
+    preview.questions.length ? /* @__PURE__ */ jsx38(RowGroup, { title: "Decide", children: preview.questions.map((q) => /* @__PURE__ */ jsx38(Question, { question: q, answer: answers[q.id], onAnswer, onOpenItem, disabled: busy }, q.id)) }) : null,
+    auto || unchecked ? /* @__PURE__ */ jsxs22("div", { className: "flex flex-wrap gap-2 px-1", children: [
+      auto ? /* @__PURE__ */ jsx38(Badge, { tone: "neutral", children: `${auto.count ?? ""} decided automatically`.trim() }) : null,
+      unchecked ? /* @__PURE__ */ jsx38(Badge, { tone: "neutral", children: "Links inside text not checked" }) : null
     ] }) : null,
-    /* @__PURE__ */ jsxs21("div", { "data-review-changes-actions": "", className: "flex flex-wrap items-center justify-end gap-2", children: [
-      suggestible.length ? /* @__PURE__ */ jsx37(Button2, { variant: "quiet", disabled: busy, onClick: () => suggestible.forEach((q) => onAnswer(q.id, q.suggested)), children: "Accept suggestions" }) : null,
-      /* @__PURE__ */ jsx37(Button2, { variant: "outline", disabled: busy, onClick: onCancel, children: "Cancel" }),
-      /* @__PURE__ */ jsx37(Button2, { variant: preview.verb === "delete" ? "danger" : "primary", disabled: busy || !ready, onClick: onCommit, children: commitLabel ?? words.commit })
+    /* @__PURE__ */ jsxs22("div", { "data-review-changes-actions": "", className: "flex flex-wrap items-center justify-end gap-2", children: [
+      suggestible.length ? /* @__PURE__ */ jsx38(Button2, { variant: "quiet", disabled: busy, onClick: () => suggestible.forEach((q) => onAnswer(q.id, q.suggested)), children: "Accept suggestions" }) : null,
+      /* @__PURE__ */ jsx38(Button2, { variant: "outline", disabled: busy, onClick: onCancel, children: "Cancel" }),
+      /* @__PURE__ */ jsx38(Button2, { variant: preview.verb === "delete" ? "danger" : "primary", disabled: busy || !ready, onClick: onCommit, children: commitLabel ?? words.commit })
     ] })
   ] });
 }
 
 // src/grid-canvas/grid-canvas.tsx
 import {
-  useEffect as useEffect10,
+  useEffect as useEffect11,
   useLayoutEffect as useLayoutEffect3,
-  useRef as useRef11,
-  useState as useState16
+  useRef as useRef12,
+  useState as useState17
 } from "react";
 
 // src/grid-canvas/layout.ts
@@ -6336,7 +6503,7 @@ function insertLines(boxes, id, line, col, cols) {
 }
 
 // src/grid-canvas/grid-canvas.tsx
-import { jsx as jsx38, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx39, jsxs as jsxs23 } from "react/jsx-runtime";
 var GRID_CANVAS_COLUMNS = { lg: 12, sm: 4 };
 var GRID_CANVAS_PHONE_MAX_PX = 640;
 var GRID_CANVAS_ROW_PX = 24;
@@ -6380,7 +6547,7 @@ function resolveGridCanvas(items, fit = "cells") {
 }
 var sameGrid = (a, b) => a.length === b.length && a.every((x, i) => x.x === b[i].x && x.y === b[i].y && x.w === b[i].w && x.h === b[i].h);
 function useBreakpoint(ref) {
-  const [breakpoint, setBreakpoint] = useState16("lg");
+  const [breakpoint, setBreakpoint] = useState17("lg");
   useLayoutEffect3(() => {
     const el = ref.current;
     if (!el) return;
@@ -6408,14 +6575,14 @@ function GridCanvas({
   className,
   "aria-label": ariaLabel
 }) {
-  const rootRef = useRef11(null);
+  const rootRef = useRef12(null);
   const breakpoint = useBreakpoint(rootRef);
   const resolved = resolveGridCanvas(items, fit);
-  const [preview, setPreview] = useState16(null);
-  const gesture = useRef11(null);
-  const itemEls = useRef11(/* @__PURE__ */ new Map());
-  const [announcement, setAnnouncement] = useState16("");
-  useEffect10(() => () => gesture.current?.handle.cancel(), []);
+  const [preview, setPreview] = useState17(null);
+  const gesture = useRef12(null);
+  const itemEls = useRef12(/* @__PURE__ */ new Map());
+  const [announcement, setAnnouncement] = useState17("");
+  useEffect11(() => () => gesture.current?.handle.cancel(), []);
   const grids = {
     lg: preview?.breakpoint === "lg" ? preview.boxes : resolved.lg,
     sm: preview?.breakpoint === "sm" ? preview.boxes : resolved.sm
@@ -6511,7 +6678,7 @@ function GridCanvas({
   };
   const rows = { lg: gridRows(grids.lg), sm: gridRows(grids.sm) };
   const active = preview ? preview.boxes.find((b) => b.id === preview.id) : void 0;
-  return /* @__PURE__ */ jsxs22(
+  return /* @__PURE__ */ jsxs23(
     "div",
     {
       ref: rootRef,
@@ -6531,8 +6698,8 @@ function GridCanvas({
         "--grid-rows-sm": preview?.breakpoint === "sm" ? rows.sm + 1 : rows.sm
       },
       children: [
-        /* @__PURE__ */ jsxs22("div", { className: "matrx-grid-canvas-field", children: [
-          active && preview ? /* @__PURE__ */ jsx38("div", { className: "matrx-grid-canvas-placeholder", "aria-hidden": true, style: placementVars(active, active) }) : null,
+        /* @__PURE__ */ jsxs23("div", { className: "matrx-grid-canvas-field", children: [
+          active && preview ? /* @__PURE__ */ jsx39("div", { className: "matrx-grid-canvas-placeholder", "aria-hidden": true, style: placementVars(active, active) }) : null,
           items.map((item, n) => {
             const lg = grids.lg[n];
             const sm = grids.sm[n];
@@ -6541,7 +6708,7 @@ function GridCanvas({
             const drawLg = moving && preview.breakpoint === "lg" ? startBox : lg;
             const drawSm = moving && preview.breakpoint === "sm" ? startBox : sm;
             const label = itemLabel?.(item.id);
-            return /* @__PURE__ */ jsxs22(
+            return /* @__PURE__ */ jsxs23(
               "div",
               {
                 ref: (el) => {
@@ -6557,8 +6724,8 @@ function GridCanvas({
                 onPointerDown: editable ? (e) => onItemPointerDown(e, item.id) : void 0,
                 onKeyDown: editable ? (e) => onItemKeyDown(e, item.id) : void 0,
                 children: [
-                  /* @__PURE__ */ jsx38("div", { className: "matrx-grid-canvas-content", children: renderItem(item.id, { breakpoint, editing: editable }) }),
-                  editable ? /* @__PURE__ */ jsx38(
+                  /* @__PURE__ */ jsx39("div", { className: "matrx-grid-canvas-content", children: renderItem(item.id, { breakpoint, editing: editable }) }),
+                  editable ? /* @__PURE__ */ jsx39(
                     "span",
                     {
                       className: "matrx-grid-canvas-resize",
@@ -6573,7 +6740,7 @@ function GridCanvas({
             );
           })
         ] }),
-        /* @__PURE__ */ jsx38("span", { className: "matrx-grid-canvas-live", "aria-live": "polite", children: announcement })
+        /* @__PURE__ */ jsx39("span", { className: "matrx-grid-canvas-live", "aria-live": "polite", children: announcement })
       ]
     }
   );
@@ -6643,6 +6810,8 @@ export {
   AppRailSpacer,
   ArchiveFilter,
   ArchivedDisclosure,
+  AssistPeekCard,
+  AssistPeekHover,
   AuthGateDialog,
   Avatar,
   AvatarFallback,