@ai-matrx/design-system 0.86.362 → 0.86.363

package/dist/index.js

@@ -389,12 +389,15 @@ import {
   usePortalContainer
 } from "./chunk-XIUVUL2Y.js";
 import {
+  AlertTriangleIcon,
   AtSignIcon,
   BadgeCheckIcon,
   BellOffIcon,
   CheckIcon,
   ChevronDownIcon,
   ChevronRightIcon,
+  CircleCheckIcon,
+  CircleXIcon,
   ClockIcon,
   CopyIcon,
   CopyPlusIcon,
@@ -402,6 +405,7 @@ import {
   DownloadIcon,
   ExternalLinkIcon,
   GlobeIcon,
+  InfoIcon,
   LightbulbIcon,
   Link2OffIcon,
   Loader2Icon,
@@ -4997,10 +5001,54 @@ function TrayMenu({ menu }) {
   ] });
 }
 
+// src/peek-notice.tsx
+import { jsx as jsx26, jsxs as jsxs15 } from "react/jsx-runtime";
+var LEVEL = {
+  success: { icon: CircleCheckIcon, ink: "text-success-ink", label: "Done" },
+  info: { icon: InfoIcon, ink: "text-info-ink", label: "Notice" },
+  warning: { icon: AlertTriangleIcon, ink: "text-warning-ink", label: "Warning" },
+  error: { icon: CircleXIcon, ink: "text-destructive-ink", label: "Error" }
+};
+function PeekNotice({ level, title, subtitle, items, limit = 5, onDismiss }) {
+  const tone = LEVEL[level];
+  const Icon = tone.icon;
+  const rows = (items ?? []).map((item, i) => ({
+    key: `${i}:${item.text}`,
+    text: item.text,
+    title: item.text,
+    ...item.detail ? { detail: item.detail } : {}
+  }));
+  return /* @__PURE__ */ jsxs15(
+    PeekCard,
+    {
+      size: "md",
+      height: "content",
+      density: "compact",
+      role: level === "error" ? "alert" : "status",
+      "aria-label": `${tone.label}: ${title}`,
+      "data-matrx-peek-notice": level,
+      children: [
+        /* @__PURE__ */ jsx26(
+          PeekCardHeader,
+          {
+            title,
+            leading: /* @__PURE__ */ jsx26(Icon, { className: cn("size-4", tone.ink) }),
+            ...subtitle ? { subtitle } : {},
+            ...onDismiss ? {
+              trailing: /* @__PURE__ */ jsx26(Button2, { type: "button", variant: "quiet", "aria-label": "Dismiss", title: "Dismiss", icon: /* @__PURE__ */ jsx26(XIcon, { className: "size-3.5" }), onClick: onDismiss })
+            } : {}
+          }
+        ),
+        rows.length ? /* @__PURE__ */ jsx26(PeekCardBody, { children: /* @__PURE__ */ jsx26(PeekCardRows, { rows, limit }) }) : null
+      ]
+    }
+  );
+}
+
 // 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";
+import { jsx as jsx27, jsxs as jsxs16 } from "react/jsx-runtime";
 var RadioGroupSizeContext = React22.createContext("md");
 var CONTROL_CLASSES = {
   sm: "h-3.5 w-3.5",
@@ -5012,7 +5060,7 @@ var DOT_CLASSES = {
   md: "h-1.5 w-1.5",
   lg: "h-2 w-2"
 };
-var RadioGroup = React22.forwardRef(({ className, size = "md", ...props }, ref) => /* @__PURE__ */ jsx26(RadioGroupSizeContext.Provider, { value: size, children: /* @__PURE__ */ jsx26(
+var RadioGroup = React22.forwardRef(({ className, size = "md", ...props }, ref) => /* @__PURE__ */ jsx27(RadioGroupSizeContext.Provider, { value: size, children: /* @__PURE__ */ jsx27(
   RadioGroupPrimitive.Root,
   {
     ref,
@@ -5025,7 +5073,7 @@ RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
 var RadioGroupItem = React22.forwardRef(({ className, size, ...props }, ref) => {
   const groupSize = React22.useContext(RadioGroupSizeContext);
   const resolved = size ?? groupSize;
-  return /* @__PURE__ */ jsx26(
+  return /* @__PURE__ */ jsx27(
     RadioGroupPrimitive.Item,
     {
       ref,
@@ -5042,7 +5090,7 @@ var RadioGroupItem = React22.forwardRef(({ className, size, ...props }, ref) =>
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsx26(RadioGroupPrimitive.Indicator, { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx26(
+      children: /* @__PURE__ */ jsx27(RadioGroupPrimitive.Indicator, { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx27(
         "div",
         {
           className: cn("rounded-full bg-primary-foreground", DOT_CLASSES[resolved])
@@ -5061,7 +5109,7 @@ function RadioList({
   "aria-label": ariaLabel
 }) {
   const baseId = React22.useId();
-  return /* @__PURE__ */ jsx26(
+  return /* @__PURE__ */ jsx27(
     RadioGroup,
     {
       value,
@@ -5072,7 +5120,7 @@ function RadioList({
       children: options.map((opt, i) => {
         const selected = value === opt.value;
         const id = `${baseId}-${i}`;
-        return /* @__PURE__ */ jsxs15(
+        return /* @__PURE__ */ jsxs16(
           "label",
           {
             htmlFor: id,
@@ -5083,9 +5131,9 @@ function RadioList({
               opt.disabled && "cursor-not-allowed text-disabled-foreground"
             ),
             children: [
-              /* @__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
+              /* @__PURE__ */ jsx27(RadioGroupItem, { id, value: opt.value, disabled: opt.disabled }),
+              /* @__PURE__ */ jsx27("span", { className: "flex-1 truncate", children: opt.label }),
+              opt.hint != null && opt.hint !== "" ? /* @__PURE__ */ jsx27("span", { className: "shrink-0 text-xs tabular-nums text-muted-foreground", children: opt.hint }) : null
             ]
           },
           opt.value
@@ -5100,7 +5148,7 @@ 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 React23 from "react";
-import { jsx as jsx27 } from "react/jsx-runtime";
+import { jsx as jsx28 } 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",
   {
@@ -5126,7 +5174,7 @@ var toggleVariants = cva4(
     }
   }
 );
-var Toggle = React23.forwardRef(({ className, variant, size, ...props }, ref) => /* @__PURE__ */ jsx27(
+var Toggle = React23.forwardRef(({ className, variant, size, ...props }, ref) => /* @__PURE__ */ jsx28(
   TogglePrimitive.Root,
   {
     ref,
@@ -5137,20 +5185,20 @@ var Toggle = React23.forwardRef(({ className, variant, size, ...props }, ref) =>
 ));
 Toggle.displayName = TogglePrimitive.Root.displayName;
 var ToggleGroupContext = React23.createContext({ size: "default", variant: "default" });
-var ToggleGroup = React23.forwardRef(({ className, variant, size, children, ...props }, ref) => /* @__PURE__ */ jsx27(
+var ToggleGroup = React23.forwardRef(({ className, variant, size, children, ...props }, ref) => /* @__PURE__ */ jsx28(
   ToggleGroupPrimitive.Root,
   {
     ref,
     "data-slot": "toggle-group",
     className: cn("flex items-center justify-center gap-1", className),
     ...props,
-    children: /* @__PURE__ */ jsx27(ToggleGroupContext.Provider, { value: { variant, size }, children })
+    children: /* @__PURE__ */ jsx28(ToggleGroupContext.Provider, { value: { variant, size }, children })
   }
 ));
 ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
 var ToggleGroupItem = React23.forwardRef(({ className, children, variant, size, ...props }, ref) => {
   const context = React23.useContext(ToggleGroupContext);
-  return /* @__PURE__ */ jsx27(
+  return /* @__PURE__ */ jsx28(
     ToggleGroupPrimitive.Item,
     {
       ref,
@@ -5171,7 +5219,7 @@ ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
 
 // src/floating-dock.tsx
 import * as React24 from "react";
-import { jsx as jsx28, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx29, jsxs as jsxs17 } from "react/jsx-runtime";
 var BASE_SIZE = 40;
 var BASE_ICON = 20;
 var REACH = 150;
@@ -5191,29 +5239,29 @@ function FloatingDock({
   growthFactor = 2,
   labelPosition = "top"
 }) {
-  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 })
+  return /* @__PURE__ */ jsxs17("div", { className: cn("flex w-auto items-center justify-center bg-background", className), children: [
+    /* @__PURE__ */ jsx29(FloatingDockPhone, { items }),
+    /* @__PURE__ */ jsx29(FloatingDockDesktop, { items, growthFactor, labelPosition })
   ] });
 }
 function BalancedFloatingDock(props) {
-  return /* @__PURE__ */ jsx28(FloatingDock, { growthFactor: 1.8, labelPosition: "side", ...props });
+  return /* @__PURE__ */ jsx29(FloatingDock, { growthFactor: 1.8, labelPosition: "side", ...props });
 }
 function FloatingDockPhone({ items }) {
   const [open, setOpen] = React24.useState(false);
-  return /* @__PURE__ */ jsxs16("div", { className: "relative block md:hidden", children: [
-    /* @__PURE__ */ jsx28(
+  return /* @__PURE__ */ jsxs17("div", { className: "relative block md:hidden", children: [
+    /* @__PURE__ */ jsx29(
       Button2,
       {
         type: "button",
         variant: "quiet",
         "aria-label": open ? "Close menu" : "Open menu",
-        icon: open ? /* @__PURE__ */ jsx28(PanelTopCloseIcon, { className: "h-5 w-5" }) : /* @__PURE__ */ jsx28(PanelTopOpenIcon, { className: "h-5 w-5" }),
+        icon: open ? /* @__PURE__ */ jsx29(PanelTopCloseIcon, { className: "h-5 w-5" }) : /* @__PURE__ */ jsx29(PanelTopOpenIcon, { className: "h-5 w-5" }),
         "aria-expanded": open,
         onClick: () => setOpen(!open)
       }
     ),
-    /* @__PURE__ */ jsx28(
+    /* @__PURE__ */ jsx29(
       "div",
       {
         "data-open": open,
@@ -5223,32 +5271,32 @@ function FloatingDockPhone({ items }) {
           PANEL_MOTION_CLASS,
           open ? "translate-y-0" : "pointer-events-none -translate-y-full"
         ),
-        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(
+        children: /* @__PURE__ */ jsxs17("div", { className: "flex h-full flex-col", children: [
+          /* @__PURE__ */ jsxs17("div", { className: "flex items-center justify-between border-b border-border p-4", children: [
+            /* @__PURE__ */ jsx29("h2", { className: "text-lg font-medium", children: "Menu" }),
+            /* @__PURE__ */ jsx29(
               Button2,
               {
                 type: "button",
                 variant: "quiet",
                 "aria-label": "Close menu",
-                icon: /* @__PURE__ */ jsx28(XIcon, { className: "h-6 w-6" }),
+                icon: /* @__PURE__ */ jsx29(XIcon, { className: "h-6 w-6" }),
                 onClick: () => setOpen(false)
               }
             )
           ] }),
-          /* @__PURE__ */ jsx28("div", { className: "flex-1 overflow-y-auto", children: items.map((item) => /* @__PURE__ */ jsxs16(
+          /* @__PURE__ */ jsx29("div", { className: "flex-1 overflow-y-auto", children: items.map((item) => /* @__PURE__ */ jsxs17(
             HostLink,
             {
               href: item.href,
               className: "flex items-center justify-between border-b border-border p-4",
               onClick: () => setOpen(false),
               children: [
-                /* @__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__ */ jsxs17("div", { className: "flex items-center space-x-4", children: [
+                  /* @__PURE__ */ jsx29("div", { className: "flex h-10 w-10 items-center justify-center rounded-full bg-muted", children: /* @__PURE__ */ jsx29("div", { className: "h-5 w-5 [&>svg]:h-full [&>svg]:w-full", children: item.icon }) }),
+                  /* @__PURE__ */ jsx29("span", { className: "font-medium", children: item.label })
                 ] }),
-                /* @__PURE__ */ jsx28(ChevronRightIcon, { className: "h-5 w-5 text-muted-foreground" })
+                /* @__PURE__ */ jsx29(ChevronRightIcon, { className: "h-5 w-5 text-muted-foreground" })
               ]
             },
             item.label
@@ -5275,7 +5323,7 @@ function FloatingDockDesktop({
       })
     );
   };
-  return /* @__PURE__ */ jsx28(
+  return /* @__PURE__ */ jsx29(
     "div",
     {
       onMouseMove: (e) => measure(e.clientX),
@@ -5289,8 +5337,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__ */ jsx28(HostLink, { href: item.href, "aria-label": item.label, children: /* @__PURE__ */ jsxs16("div", { className: "relative", children: [
-          /* @__PURE__ */ jsx28(
+        return /* @__PURE__ */ jsx29(HostLink, { href: item.href, "aria-label": item.label, children: /* @__PURE__ */ jsxs17("div", { className: "relative", children: [
+          /* @__PURE__ */ jsx29(
             "div",
             {
               ref: (el) => {
@@ -5301,7 +5349,7 @@ function FloatingDockDesktop({
                 "relative flex aspect-square items-center justify-center rounded-full bg-muted transition-[width,height]",
                 MAGNIFY_MOTION
               ),
-              children: /* @__PURE__ */ jsx28(
+              children: /* @__PURE__ */ jsx29(
                 "div",
                 {
                   style: { width: icon, height: icon },
@@ -5314,7 +5362,7 @@ function FloatingDockDesktop({
               )
             }
           ),
-          /* @__PURE__ */ jsx28(
+          /* @__PURE__ */ jsx29(
             "div",
             {
               "data-shown": under,
@@ -5336,7 +5384,7 @@ function FloatingDockDesktop({
 
 // src/deferred-dialog.tsx
 import * as React25 from "react";
-import { jsx as jsx29 } from "react/jsx-runtime";
+import { jsx as jsx30 } from "react/jsx-runtime";
 function deferredDialog(name, load, isOpen) {
   let pending = null;
   const preload = () => pending ??= load().then((component) => ({ default: component }));
@@ -5346,7 +5394,7 @@ function deferredDialog(name, load, isOpen) {
     const [opened, setOpened] = React25.useState(open);
     if (open && !opened) setOpened(true);
     if (!open && !opened) return null;
-    return /* @__PURE__ */ jsx29(React25.Suspense, { fallback: null, children: /* @__PURE__ */ jsx29(Body, { ...props }) });
+    return /* @__PURE__ */ jsx30(React25.Suspense, { fallback: null, children: /* @__PURE__ */ jsx30(Body, { ...props }) });
   }
   Deferred.displayName = name;
   return Object.assign(Deferred, { preload });
@@ -5392,10 +5440,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 jsx30 } from "react/jsx-runtime";
+import { jsx as jsx31 } from "react/jsx-runtime";
 function ClipboardFallbackHost() {
   const { open, shown, settle } = useOpenerHost(clipboardFallbackOpener);
-  return /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsx31(
     ClipboardFallbackDialog,
     {
       open,
@@ -5411,7 +5459,7 @@ function ClipboardFallbackHost() {
 
 // src/floating-sheet.tsx
 import { useState as useState15, useEffect as useEffect9, useCallback as useCallback7, useRef as useRef9 } from "react";
-import { Fragment as Fragment7, jsx as jsx31, jsxs as jsxs17 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx32, jsxs as jsxs18 } from "react/jsx-runtime";
 var FloatingSheet = ({
   children,
   isOpen,
@@ -5717,8 +5765,8 @@ var FloatingSheet = ({
     const bottomPadding = showFooter ? "" : "pb-safe";
     return `${basePadding} ${bottomPadding}`.trim();
   };
-  return /* @__PURE__ */ jsxs17(Fragment7, { children: [
-    isOpen && hasBackdrop && /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsxs18(Fragment7, { children: [
+    isOpen && hasBackdrop && /* @__PURE__ */ jsx32(
       "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}`,
@@ -5727,7 +5775,7 @@ var FloatingSheet = ({
         "data-testid": "floating-sheet-backdrop"
       }
     ),
-    /* @__PURE__ */ jsx31(
+    /* @__PURE__ */ jsx32(
       "div",
       {
         ref: sheetRef,
@@ -5739,25 +5787,25 @@ var FloatingSheet = ({
         "aria-labelledby": "sheet-title",
         tabIndex: -1,
         "data-testid": "floating-sheet",
-        children: /* @__PURE__ */ jsxs17("div", { className: "flex flex-col h-full overflow-hidden", children: [
-          showHeader && /* @__PURE__ */ jsxs17(
+        children: /* @__PURE__ */ jsxs18("div", { className: "flex flex-col h-full overflow-hidden", children: [
+          showHeader && /* @__PURE__ */ jsxs18(
             "div",
             {
               className: `flex items-center justify-between border-b border-border ${getMobileHeaderClass()} ${headerClassName}`,
               children: [
-                /* @__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 }))
+                /* @__PURE__ */ jsxs18("div", { className: "flex-1 min-w-0", children: [
+                  typeof title === "string" ? /* @__PURE__ */ jsx32("h2", { id: "sheet-title", className: `${isMobile ? "text-xl" : "text-lg"} font-semibold text-foreground`, children: title }) : /* @__PURE__ */ jsx32("div", { id: "sheet-title", children: title }),
+                  description && (typeof description === "string" ? /* @__PURE__ */ jsx32("p", { className: "type-body text-muted-foreground mt-1", children: description }) : /* @__PURE__ */ jsx32("div", { className: "mt-1", children: description }))
                 ] }),
-                headerContent && /* @__PURE__ */ jsx31("div", { className: "ml-4 flex items-center", children: headerContent }),
-                showCloseButton && /* @__PURE__ */ jsx31(
+                headerContent && /* @__PURE__ */ jsx32("div", { className: "ml-4 flex items-center", children: headerContent }),
+                showCloseButton && /* @__PURE__ */ jsx32(
                   "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__ */ jsxs17(
+                    children: closeButton || /* @__PURE__ */ jsxs18(
                       "svg",
                       {
                         xmlns: "http://www.w3.org/2000/svg",
@@ -5769,8 +5817,8 @@ var FloatingSheet = ({
                         strokeLinecap: "round",
                         strokeLinejoin: "round",
                         children: [
-                          /* @__PURE__ */ jsx31("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
-                          /* @__PURE__ */ jsx31("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+                          /* @__PURE__ */ jsx32("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+                          /* @__PURE__ */ jsx32("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
                         ]
                       }
                     )
@@ -5779,7 +5827,7 @@ var FloatingSheet = ({
               ]
             }
           ),
-          /* @__PURE__ */ jsx31(
+          /* @__PURE__ */ jsx32(
             "div",
             {
               ref: contentRef,
@@ -5788,7 +5836,7 @@ var FloatingSheet = ({
               children
             }
           ),
-          showFooter && /* @__PURE__ */ jsx31(
+          showFooter && /* @__PURE__ */ jsx32(
             "div",
             {
               className: `border-t border-border ${getMobileFooterClass()} ${footerClassName}`,
@@ -5803,12 +5851,12 @@ var FloatingSheet = ({
 };
 
 // src/simple-tooltip.tsx
-import { jsx as jsx32, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs19 } from "react/jsx-runtime";
 var SimpleTooltip = ({ children, text }) => {
   if (!text) return children;
-  return /* @__PURE__ */ jsxs18(Tooltip, { children: [
-    /* @__PURE__ */ jsx32(TooltipTrigger, { asChild: true, children }),
-    /* @__PURE__ */ jsx32(TooltipContent, { children: /* @__PURE__ */ jsx32("p", { children: text }) })
+  return /* @__PURE__ */ jsxs19(Tooltip, { children: [
+    /* @__PURE__ */ jsx33(TooltipTrigger, { asChild: true, children }),
+    /* @__PURE__ */ jsx33(TooltipContent, { children: /* @__PURE__ */ jsx33("p", { children: text }) })
   ] });
 };
 var AdvancedTooltip = ({
@@ -5831,16 +5879,16 @@ var AdvancedTooltip = ({
     success: "bg-success text-success-foreground"
   };
   const baseContentClasses = "rounded-md px-3 py-1.5 text-sm shadow-md";
-  return /* @__PURE__ */ jsxs18(Tooltip, { delayDuration, children: [
-    /* @__PURE__ */ jsx32(TooltipTrigger, { asChild: true, className, children }),
-    /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsxs19(Tooltip, { delayDuration, children: [
+    /* @__PURE__ */ jsx33(TooltipTrigger, { asChild: true, className, children }),
+    /* @__PURE__ */ jsx33(
       TooltipContent,
       {
         side,
         align,
         sideOffset,
         className: `${baseContentClasses} ${variantStyles[variant]} ${contentClassName}`,
-        children: /* @__PURE__ */ jsx32("p", { className: "leading-none whitespace-pre-wrap", children: text })
+        children: /* @__PURE__ */ jsx33("p", { className: "leading-none whitespace-pre-wrap", children: text })
       }
     )
   ] });
@@ -5848,7 +5896,7 @@ var AdvancedTooltip = ({
 
 // src/loading-spinner.tsx
 import React27 from "react";
-import { Fragment as Fragment8, jsx as jsx33, jsxs as jsxs19 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx34, jsxs as jsxs20 } from "react/jsx-runtime";
 var animationStyles = `
   @keyframes pulseWave {
     0% { opacity: 0.3; transform: scale(0.8); }
@@ -5925,19 +5973,19 @@ var LoadingSpinner = ({
     }
   };
   const sizeClasses2 = getSizeClasses();
-  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 renderDots = () => /* @__PURE__ */ jsxs20("div", { className: cn("flex items-center", sizeClasses2.container), children: [
+    /* @__PURE__ */ jsx34("div", { className: cn(sizeClasses2.dot, "bg-primary dark:bg-primary-foreground rounded-full loading-pulse-1") }),
+    /* @__PURE__ */ jsx34("div", { className: cn(sizeClasses2.dot, "bg-primary dark:bg-primary-foreground rounded-full loading-pulse-2") }),
+    /* @__PURE__ */ jsx34("div", { className: cn(sizeClasses2.dot, "bg-primary dark:bg-primary-foreground rounded-full loading-pulse-3") })
   ] });
-  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 renderBars = () => /* @__PURE__ */ jsxs20("div", { className: cn("flex items-center", sizeClasses2.container), children: [
+    /* @__PURE__ */ jsx34("div", { className: cn(sizeClasses2.bar, "bg-primary dark:bg-primary-foreground rounded-sm loading-bounce-1") }),
+    /* @__PURE__ */ jsx34("div", { className: cn(sizeClasses2.bar, "bg-primary dark:bg-primary-foreground rounded-sm loading-bounce-2") }),
+    /* @__PURE__ */ jsx34("div", { className: cn(sizeClasses2.bar, "bg-primary dark:bg-primary-foreground rounded-sm loading-bounce-3") }),
+    /* @__PURE__ */ jsx34("div", { className: cn(sizeClasses2.bar, "bg-primary dark:bg-primary-foreground rounded-sm loading-bounce-4") })
   ] });
-  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(
+  const renderBrain = () => /* @__PURE__ */ jsxs20("div", { className: "relative w-6 h-6 flex items-center justify-center", children: [
+    /* @__PURE__ */ jsx34("div", { className: "absolute", children: /* @__PURE__ */ jsx34(
       "svg",
       {
         width: "24",
@@ -5945,7 +5993,7 @@ var LoadingSpinner = ({
         viewBox: "0 0 24 24",
         fill: "none",
         className: "w-5 h-5 text-primary dark:text-primary-foreground",
-        children: /* @__PURE__ */ jsx33(
+        children: /* @__PURE__ */ jsx34(
           "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",
@@ -5956,44 +6004,44 @@ var LoadingSpinner = ({
         )
       }
     ) }),
-    /* @__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__ */ jsxs20("div", { className: "absolute inset-0", children: [
+      /* @__PURE__ */ jsx34("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__ */ jsx34("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__ */ jsx34("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__ */ jsx34("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__ */ jsx34("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__ */ 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" })
+    /* @__PURE__ */ jsx34("div", { className: "absolute w-full h-full rounded-full border border-primary/30 dark:border-primary-foreground/30 loading-brain-pulse-1" }),
+    /* @__PURE__ */ jsx34("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__ */ 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" })
+  const renderMinimal = () => /* @__PURE__ */ jsx34("div", { className: "relative", children: /* @__PURE__ */ jsx34("div", { className: cn(sizeClasses2.dot, "bg-primary dark:bg-primary-foreground rounded-full loading-pulse-1") }) });
+  const renderWorkflow = () => /* @__PURE__ */ jsxs20("div", { className: "flex flex-col items-center justify-center space-y-6", children: [
+    /* @__PURE__ */ jsxs20("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx34("div", { className: "w-16 h-16 bg-primary/10 dark:bg-primary-foreground/10 rounded-full flex items-center justify-center", children: /* @__PURE__ */ jsx34(WorkflowIcon, { className: "w-8 h-8 text-primary dark:text-primary-foreground" }) }),
+      /* @__PURE__ */ jsx34("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__ */ jsx34(PlusIcon, { className: "w-3 h-3 text-primary-foreground dark:text-primary" }) }),
+      /* @__PURE__ */ jsx34("div", { className: "absolute inset-0 border-2 border-transparent border-t-primary dark:border-t-primary-foreground rounded-full 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" }),
+    /* @__PURE__ */ jsxs20("div", { className: "text-center space-y-2", children: [
+      /* @__PURE__ */ jsxs20("h2", { className: "text-lg font-semibold text-foreground flex items-center gap-2 justify-center", children: [
+        /* @__PURE__ */ jsx34(Loader2Icon, { className: "w-4 h-4 matrx-spin" }),
         title || "Loading Workflow"
       ] }),
-      /* @__PURE__ */ jsx33("p", { className: "type-body text-muted-foreground max-w-sm", children: subtitle || message || "Setting up your workflow..." })
+      /* @__PURE__ */ jsx34("p", { className: "type-body text-muted-foreground max-w-sm", children: subtitle || message || "Setting up your workflow..." })
     ] }),
-    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" })
+    showProgressSteps && /* @__PURE__ */ jsxs20("div", { className: "flex items-center gap-2 type-secondary text-muted-foreground", children: [
+      /* @__PURE__ */ jsxs20("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx34("div", { className: "w-2 h-2 bg-primary dark:bg-primary-foreground rounded-full matrx-pulse" }),
+        /* @__PURE__ */ jsx34("span", { children: "Loading" })
       ] }),
-      /* @__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__ */ jsx34("div", { className: "w-4 h-px bg-muted-foreground/30" }),
+      /* @__PURE__ */ jsxs20("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx34("div", { className: "w-2 h-2 bg-muted-foreground/30 rounded-full" }),
+        /* @__PURE__ */ jsx34("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: "Ready" })
+      /* @__PURE__ */ jsx34("div", { className: "w-4 h-px bg-muted-foreground/30" }),
+      /* @__PURE__ */ jsxs20("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx34("div", { className: "w-2 h-2 bg-muted-foreground/30 rounded-full" }),
+        /* @__PURE__ */ jsx34("span", { children: "Ready" })
       ] })
     ] })
   ] });
@@ -6022,13 +6070,13 @@ var LoadingSpinner = ({
     }
   };
   if (variant === "workflow" && (fullscreen || overlay)) {
-    return /* @__PURE__ */ jsxs19("div", { className: cn(
+    return /* @__PURE__ */ jsxs20("div", { className: cn(
       "flex items-center justify-center bg-background",
       fullscreen && "h-dvh w-full",
       className
     ), "aria-busy": "true", children: [
-      overlay && /* @__PURE__ */ jsx33("div", { className: "absolute inset-0 bg-background/80 backdrop-blur-sm z-50" }),
-      /* @__PURE__ */ jsx33("div", { className: cn(
+      overlay && /* @__PURE__ */ jsx34("div", { className: "absolute inset-0 bg-background/80 backdrop-blur-sm z-50" }),
+      /* @__PURE__ */ jsx34("div", { className: cn(
         "flex flex-col items-center justify-center",
         overlay && "relative z-50"
       ), children: renderWorkflow() })
@@ -6036,21 +6084,21 @@ var LoadingSpinner = ({
   }
   return (
     // aria-busy: a spinner is a stand-in, and whatever measures a settled layout waits for it.
-    /* @__PURE__ */ jsx33("div", { className: cn("flex items-center", className), "aria-busy": "true", children: variant === "workflow" ? renderWorkflow() : /* @__PURE__ */ jsxs19(Fragment8, { children: [
+    /* @__PURE__ */ jsx34("div", { className: cn("flex items-center", className), "aria-busy": "true", children: variant === "workflow" ? renderWorkflow() : /* @__PURE__ */ jsxs20(Fragment8, { children: [
       renderSpinner(),
-      showMessage && /* @__PURE__ */ jsx33("span", { className: cn("ml-3 text-muted-foreground", sizeClasses2.text), children: message || getDefaultMessage() })
+      showMessage && /* @__PURE__ */ jsx34("span", { className: cn("ml-3 text-muted-foreground", sizeClasses2.text), children: message || getDefaultMessage() })
     ] }) })
   );
 };
 
 // src/mini-loader.tsx
-import { jsx as jsx34 } from "react/jsx-runtime";
+import { jsx as jsx35 } from "react/jsx-runtime";
 function MatrxMiniLoader() {
-  return /* @__PURE__ */ jsx34(LoadingSpinner, { variant: "dots", message: "Initializing Matrx...", size: "md" });
+  return /* @__PURE__ */ jsx35(LoadingSpinner, { variant: "dots", message: "Initializing Matrx...", size: "md" });
 }
 
 // src/suspense-loader.tsx
-import { jsx as jsx35, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx36, jsxs as jsxs21 } from "react/jsx-runtime";
 var sizeClasses = {
   xs: "h-3 w-3",
   sm: "h-4 w-4",
@@ -6063,7 +6111,7 @@ function SuspenseLoader({
   message,
   className = ""
 }) {
-  const spinner = /* @__PURE__ */ jsx35(
+  const spinner = /* @__PURE__ */ jsx36(
     Loader2Icon,
     {
       className: `${sizeClasses[size]} matrx-spin text-disabled-foreground ${className}`,
@@ -6071,7 +6119,7 @@ function SuspenseLoader({
       "aria-label": message ? void 0 : "Loading"
     }
   );
-  const content = message ? /* @__PURE__ */ jsxs20(
+  const content = message ? /* @__PURE__ */ jsxs21(
     "span",
     {
       className: "inline-flex items-center gap-2",
@@ -6079,19 +6127,19 @@ function SuspenseLoader({
       "aria-live": "polite",
       children: [
         spinner,
-        /* @__PURE__ */ jsx35("span", { children: message })
+        /* @__PURE__ */ jsx36("span", { children: message })
       ]
     }
   ) : spinner;
   if (centered) {
-    return /* @__PURE__ */ jsx35("div", { className: "flex items-center justify-center w-full h-full min-h-[2rem]", children: content });
+    return /* @__PURE__ */ jsx36("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 useCallback8, useRef as useRef10 } from "react";
-import { jsx as jsx36 } from "react/jsx-runtime";
+import { jsx as jsx37 } 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%",
@@ -6119,7 +6167,7 @@ function useShimmerSweep(durationMs = 2e3) {
 }
 function ShimmerText({ text, className }) {
   const ref = useShimmerSweep();
-  return /* @__PURE__ */ jsx36(
+  return /* @__PURE__ */ jsx37(
     "span",
     {
       ref,
@@ -6178,7 +6226,7 @@ function formThemeClasses(theme) {
 import * as PopoverPrimitive2 from "@radix-ui/react-popover";
 import { Slot as Slot4 } from "@radix-ui/react-slot";
 import * as React28 from "react";
-import { Fragment as Fragment9, jsx as jsx37, jsxs as jsxs21 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx38, jsxs as jsxs22 } from "react/jsx-runtime";
 var FIRST_USE_HINT_TITLE_MAX = 32;
 var FIRST_USE_HINT_DETAIL_MAX = 60;
 var FirstUseHintContext = React28.createContext(null);
@@ -6186,7 +6234,7 @@ function FirstUseHintProvider({
   store,
   children
 }) {
-  return /* @__PURE__ */ jsx37(FirstUseHintContext.Provider, { value: store, children });
+  return /* @__PURE__ */ jsx38(FirstUseHintContext.Provider, { value: store, children });
 }
 var sessionLearned = /* @__PURE__ */ new Set();
 var warnedNoProvider = false;
@@ -6269,9 +6317,9 @@ function FirstUseHint({
     }),
     [target]
   );
-  return /* @__PURE__ */ jsxs21(Popover, { open, children: [
-    pulse ? /* @__PURE__ */ jsxs21(Fragment9, { children: [
-      /* @__PURE__ */ jsx37(
+  return /* @__PURE__ */ jsxs22(Popover, { open, children: [
+    pulse ? /* @__PURE__ */ jsxs22(Fragment9, { children: [
+      /* @__PURE__ */ jsx38(
         Slot4,
         {
           ref: hostRef,
@@ -6280,8 +6328,8 @@ function FirstUseHint({
           children
         }
       ),
-      /* @__PURE__ */ jsx37(PopoverAnchor, { virtualRef })
-    ] }) : /* @__PURE__ */ jsx37(
+      /* @__PURE__ */ jsx38(PopoverAnchor, { virtualRef })
+    ] }) : /* @__PURE__ */ jsx38(
       PopoverAnchor,
       {
         asChild: true,
@@ -6293,7 +6341,7 @@ function FirstUseHint({
         children
       }
     ),
-    /* @__PURE__ */ jsxs21(
+    /* @__PURE__ */ jsxs22(
       PopoverContent,
       {
         side,
@@ -6310,17 +6358,17 @@ function FirstUseHint({
         onInteractOutside: (e) => e.preventDefault(),
         onEscapeKeyDown: learn,
         children: [
-          /* @__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 }),
+          /* @__PURE__ */ jsxs22("div", { className: "flex items-center gap-1 py-0.5 pl-3 pr-0.5", children: [
+            /* @__PURE__ */ jsxs22("div", { className: "flex min-w-0 flex-col py-1", children: [
+              /* @__PURE__ */ jsx38("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__ */ jsx37("span", { className: "type-secondary line-clamp-2 text-muted-foreground", children: detail })
+                /* @__PURE__ */ jsx38("span", { className: "type-secondary line-clamp-2 text-muted-foreground", children: detail })
               ) : null
             ] }),
-            /* @__PURE__ */ jsx37(IconButton, { icon: XIcon, "aria-label": "Dismiss tip", className: "shrink-0", onClick: learn })
+            /* @__PURE__ */ jsx38(IconButton, { icon: XIcon, "aria-label": "Dismiss tip", className: "shrink-0", onClick: learn })
           ] }),
-          /* @__PURE__ */ jsx37(PopoverPrimitive2.Arrow, { className: "fill-popover", width: 10, height: 5 })
+          /* @__PURE__ */ jsx38(PopoverPrimitive2.Arrow, { className: "fill-popover", width: 10, height: 5 })
         ]
       }
     )
@@ -6329,7 +6377,7 @@ function FirstUseHint({
 
 // src/review-changes.tsx
 import * as React29 from "react";
-import { jsx as jsx38, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx39, jsxs as jsxs23 } from "react/jsx-runtime";
 var SKIP = "skip";
 function unansweredQuestions(preview, answers) {
   return preview.questions.filter((q) => !answers[q.id]);
@@ -6347,11 +6395,11 @@ function ItemDoor({ item, onOpenItem }) {
   const renderItem = React29.useContext(RenderItemContext);
   const hosted = renderItem ? renderItem(item) : null;
   if (hosted != null) {
-    return /* @__PURE__ */ jsx38("span", { "data-change-item": item.id, className: "inline-flex max-w-full items-center", children: hosted });
+    return /* @__PURE__ */ jsx39("span", { "data-change-item": item.id, className: "inline-flex max-w-full items-center", children: hosted });
   }
   const title = item.title?.trim() || "Untitled";
-  return /* @__PURE__ */ jsxs22("span", { "data-change-item": item.id, className: "inline-flex max-w-full items-center gap-0.5", children: [
-    /* @__PURE__ */ jsx38(
+  return /* @__PURE__ */ jsxs23("span", { "data-change-item": item.id, className: "inline-flex max-w-full items-center gap-0.5", children: [
+    /* @__PURE__ */ jsx39(
       Button2,
       {
         type: "button",
@@ -6362,12 +6410,12 @@ function ItemDoor({ item, onOpenItem }) {
         children: title
       }
     ),
-    /* @__PURE__ */ jsx38(
+    /* @__PURE__ */ jsx39(
       Button2,
       {
         type: "button",
         variant: "quiet",
-        icon: /* @__PURE__ */ jsx38(ExternalLinkIcon, {}),
+        icon: /* @__PURE__ */ jsx39(ExternalLinkIcon, {}),
         "data-clickable": "",
         "aria-label": `Open ${title} in a new tab`,
         className: "shrink-0",
@@ -6379,9 +6427,9 @@ function ItemDoor({ item, onOpenItem }) {
 function Doors({ items, total, onOpenItem }) {
   if (!items.length) return null;
   const more = (total ?? items.length) - items.length;
-  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: [
+  return /* @__PURE__ */ jsxs23("span", { className: "flex min-w-0 flex-wrap items-center gap-x-3 gap-y-1", children: [
+    items.map((item) => /* @__PURE__ */ jsx39(ItemDoor, { item, onOpenItem }, `${item.table ?? item.type}:${item.id}`)),
+    more > 0 ? /* @__PURE__ */ jsxs23("span", { className: "text-xs text-muted-foreground", children: [
       "+",
       more,
       " more"
@@ -6389,17 +6437,17 @@ function Doors({ items, total, onOpenItem }) {
   ] });
 }
 function Row({ title, meta, children }) {
-  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
+  return /* @__PURE__ */ jsxs23("div", { "data-change-row": "", className: "flex flex-col gap-1 px-3 py-2", children: [
+    /* @__PURE__ */ jsxs23("div", { className: "flex items-baseline justify-between gap-3", children: [
+      /* @__PURE__ */ jsx39("span", { className: "min-w-0 text-sm text-foreground", children: title }),
+      meta ? /* @__PURE__ */ jsx39("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__ */ jsxs22(
+  return /* @__PURE__ */ jsxs23(
     "div",
     {
       role: "alert",
@@ -6407,8 +6455,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__ */ jsx38("span", { className: "text-sm font-medium text-foreground", children: warning.message }),
-        /* @__PURE__ */ jsx38(Doors, { items, total: warning.count ?? items.length, onOpenItem })
+        /* @__PURE__ */ jsx39("span", { className: "text-sm font-medium text-foreground", children: warning.message }),
+        /* @__PURE__ */ jsx39(Doors, { items, total: warning.count ?? items.length, onOpenItem })
       ]
     }
   );
@@ -6425,10 +6473,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__ */ 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(
+  return /* @__PURE__ */ jsxs23("div", { "data-change-question": question.id, "data-kind": question.kind, className: "flex flex-col gap-1.5 px-3 py-2", children: [
+    /* @__PURE__ */ jsx39("span", { className: "text-sm text-foreground", children: question.prompt }),
+    /* @__PURE__ */ jsx39(Doors, { items: question.items.sample, total: question.items.count, onOpenItem }),
+    /* @__PURE__ */ jsx39(
       DecisionControl,
       {
         value,
@@ -6450,7 +6498,7 @@ function Question({ question, answer, onAnswer, onOpenItem, disabled }) {
         "aria-label": question.prompt
       }
     ),
-    chosen?.consequence ? /* @__PURE__ */ jsx38("span", { className: "text-xs text-muted-foreground", children: chosen.consequence }) : null
+    chosen?.consequence ? /* @__PURE__ */ jsx39("span", { className: "text-xs text-muted-foreground", children: chosen.consequence }) : null
   ] });
 }
 var VERB_WORDS = {
@@ -6459,7 +6507,7 @@ var VERB_WORDS = {
   move: { goes: "Moves with it", commit: "Move" }
 };
 function ReviewChanges({ renderItem, ...props }) {
-  return /* @__PURE__ */ jsx38(RenderItemContext.Provider, { value: renderItem, children: /* @__PURE__ */ jsx38(ReviewChangesBody, { ...props }) });
+  return /* @__PURE__ */ jsx39(RenderItemContext.Provider, { value: renderItem, children: /* @__PURE__ */ jsx39(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" };
@@ -6473,23 +6521,23 @@ 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__ */ 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}`))
+  return /* @__PURE__ */ jsxs23("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__ */ jsx39(Alarm, { warning: w, onOpenItem }, `${w.kind}:${i}`)),
+    /* @__PURE__ */ jsx39(RowGroup, { title: preview.verb === "move" && target ? `Moving to ${target}` : void 0, children: /* @__PURE__ */ jsx39(Row, { title: /* @__PURE__ */ jsx39(Doors, { items: preview.roots, onOpenItem }) }) }),
+    moving.length ? /* @__PURE__ */ jsx39(RowGroup, { title: words.goes, children: moving.map((g) => /* @__PURE__ */ jsx39(Row, { title: g.noun, meta: `${g.count_is_estimate ? "about " : ""}${g.count}`, children: /* @__PURE__ */ jsx39(Doors, { items: g.sample, total: g.count, onOpenItem }) }, `${g.rule_id ?? "root"}:${g.table ?? g.type}`)) }) : null,
+    kept.length || staying.length ? /* @__PURE__ */ jsxs23(RowGroup, { title: "Stays where it is", children: [
+      kept.map((w, i) => /* @__PURE__ */ jsx39(Row, { title: w.message ?? w.noun ?? "Used elsewhere", meta: w.count ?? void 0, children: /* @__PURE__ */ jsx39(Doors, { items: w.items ?? [], total: w.count, onOpenItem }) }, `kept:${i}`)),
+      staying.map((g) => /* @__PURE__ */ jsx39(Row, { title: g.noun, meta: g.count, children: /* @__PURE__ */ jsx39(Doors, { items: g.sample, total: g.count, onOpenItem }) }, `stay:${g.table ?? g.type}`))
     ] }) : 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
+    preview.questions.length ? /* @__PURE__ */ jsx39(RowGroup, { title: "Decide", children: preview.questions.map((q) => /* @__PURE__ */ jsx39(Question, { question: q, answer: answers[q.id], onAnswer, onOpenItem, disabled: busy }, q.id)) }) : null,
+    auto || unchecked ? /* @__PURE__ */ jsxs23("div", { className: "flex flex-wrap gap-2 px-1", children: [
+      auto ? /* @__PURE__ */ jsx39(Badge, { tone: "neutral", children: `${auto.count ?? ""} decided automatically`.trim() }) : null,
+      unchecked ? /* @__PURE__ */ jsx39(Badge, { tone: "neutral", children: "Links inside text not checked" }) : null
     ] }) : null,
-    /* @__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 })
+    /* @__PURE__ */ jsxs23("div", { "data-review-changes-actions": "", className: "flex flex-wrap items-center justify-end gap-2", children: [
+      suggestible.length ? /* @__PURE__ */ jsx39(Button2, { variant: "quiet", disabled: busy, onClick: () => suggestible.forEach((q) => onAnswer(q.id, q.suggested)), children: "Accept suggestions" }) : null,
+      /* @__PURE__ */ jsx39(Button2, { variant: "outline", disabled: busy, onClick: onCancel, children: "Cancel" }),
+      /* @__PURE__ */ jsx39(Button2, { variant: preview.verb === "delete" ? "danger" : "primary", disabled: busy || !ready, onClick: onCommit, children: commitLabel ?? words.commit })
     ] })
   ] });
 }
@@ -6660,7 +6708,7 @@ function insertLines(boxes, id, line, col, cols) {
 }
 
 // src/grid-canvas/grid-canvas.tsx
-import { jsx as jsx39, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx40, jsxs as jsxs24 } 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;
@@ -6835,7 +6883,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__ */ jsxs23(
+  return /* @__PURE__ */ jsxs24(
     "div",
     {
       ref: rootRef,
@@ -6855,8 +6903,8 @@ function GridCanvas({
         "--grid-rows-sm": preview?.breakpoint === "sm" ? rows.sm + 1 : rows.sm
       },
       children: [
-        /* @__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,
+        /* @__PURE__ */ jsxs24("div", { className: "matrx-grid-canvas-field", children: [
+          active && preview ? /* @__PURE__ */ jsx40("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];
@@ -6865,7 +6913,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__ */ jsxs23(
+            return /* @__PURE__ */ jsxs24(
               "div",
               {
                 ref: (el) => {
@@ -6881,8 +6929,8 @@ function GridCanvas({
                 onPointerDown: editable ? (e) => onItemPointerDown(e, item.id) : void 0,
                 onKeyDown: editable ? (e) => onItemKeyDown(e, item.id) : void 0,
                 children: [
-                  /* @__PURE__ */ jsx39("div", { className: "matrx-grid-canvas-content", children: renderItem(item.id, { breakpoint, editing: editable }) }),
-                  editable ? /* @__PURE__ */ jsx39(
+                  /* @__PURE__ */ jsx40("div", { className: "matrx-grid-canvas-content", children: renderItem(item.id, { breakpoint, editing: editable }) }),
+                  editable ? /* @__PURE__ */ jsx40(
                     "span",
                     {
                       className: "matrx-grid-canvas-resize",
@@ -6897,7 +6945,7 @@ function GridCanvas({
             );
           })
         ] }),
-        /* @__PURE__ */ jsx39("span", { className: "matrx-grid-canvas-live", "aria-live": "polite", children: announcement })
+        /* @__PURE__ */ jsx40("span", { className: "matrx-grid-canvas-live", "aria-live": "polite", children: announcement })
       ]
     }
   );
@@ -7146,6 +7194,7 @@ export {
   Peek,
   PeekEntityRendererProvider,
   PeekHoverCard,
+  PeekNotice,
   PeekPartRendererProvider,
   PeekPopover,
   PeekWindow,