@ai-matrx/design-system 0.86.354 → 0.86.356

package/dist/desktop.cjs

@@ -5431,7 +5431,6 @@ function PlaceStrip({ className, ...props }) {
 
 // src/desktop/state.tsx
 var React34 = __toESM(require("react"), 1);
-var import_clipboard = require("@ai-matrx/kit/clipboard");
 
 // src/desktop/errors.ts
 var RULES = [
@@ -5469,7 +5468,52 @@ function describeError(error, fallback = "Something went wrong. Try again.") {
   return { cause: fallback, detail };
 }
 
+// src/error-sentence.ts
+function errorSentenceOf(error) {
+  if (error == null || error === true || error === false) return "";
+  if (typeof error === "string") return error;
+  if (typeof error !== "object") return String(error);
+  const message = error.message;
+  return typeof message === "string" ? message : "";
+}
+var TIMED_OUT_SENTENCE = "That took too long. Nothing was lost; try again.";
+var FALLBACK_ERROR_SENTENCE = "Something went wrong. Try again.";
+function isTimedOutError(error, message, code) {
+  if (code === "57014" || code === "timed_out") return true;
+  if (error && typeof error === "object") {
+    const o = error;
+    if (o.code === "57014" || o.code === "timed_out" || o.sqlstate === "57014") return true;
+  }
+  const text = `${message ?? ""} ${errorSentenceOf(error)}`;
+  return /canceling statement due to statement timeout/i.test(text);
+}
+function offlineText(text) {
+  const t = text.trim();
+  return t !== "" && (describeError(t).code === "OFFLINE" || /networkerror|network request failed|load failed/i.test(t));
+}
+var ANY_HOST_CODES = /* @__PURE__ */ new Set(["OFFLINE", "TIMEOUT", "UNAUTHORIZED", "FORBIDDEN", "NOT_FOUND", "RATE_LIMIT", "SERVER"]);
+var MACHINE_PREFIX = /^\s*(?:\[[\w./-]+\]\s*|[a-z][\w]*(?:[._][\w]+)+:\s+)/;
+var RAW_TEXT = /\b(?:Type|Reference|Syntax|Range|Internal|Eval|URI)Error\b|\bat\s+[\w$.<>]+\s*\(|\.(?:[cm]?[jt]sx?|py):\d+|(?:^|[\s(])(?:\/[\w.@-]+){2,}|\bundefined is not\b|\bcannot read propert(?:y|ies)\b|\bis not a function\b|\bunexpected token\b/i;
+function isRawErrorText(text) {
+  return MACHINE_PREFIX.test(text) || RAW_TEXT.test(text);
+}
+function peopleErrorSentence(error, message, options = {}) {
+  if (isTimedOutError(error, message, options.code)) return TIMED_OUT_SENTENCE;
+  const fallback = options.fallback ?? FALLBACK_ERROR_SENTENCE;
+  const raw = message?.trim() || errorSentenceOf(error).trim();
+  if (!raw) return fallback;
+  let text = raw;
+  for (let i = 0; i < 3 && MACHINE_PREFIX.test(text); i++) text = text.replace(MACHINE_PREFIX, "").trim();
+  if (!text) return fallback;
+  if (offlineText(text) || RAW_TEXT.test(text) || text !== raw) {
+    const said = describeError(text, fallback);
+    return said.code && ANY_HOST_CODES.has(said.code) ? said.cause : fallback;
+  }
+  return text;
+}
+
 // src/desktop/state.tsx
+var import_clipboard = require("@ai-matrx/kit/clipboard");
 var import_jsx_runtime42 = require("react/jsx-runtime");
 var EMPTY_ICON = /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.75, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: [
   /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("path", { d: "M22 12h-6l-2 3h-4l-2-3H2" }),
@@ -5547,6 +5591,8 @@ var BANNER_ICON = {
 };
 function Banner({ tone, icon, title, message, actions, detail, onDismiss, count, className, ...props }) {
   const [copied, setCopied] = React34.useState(false);
+  if (typeof title === "string" && isRawErrorText(title)) title = peopleErrorSentence(null, title);
+  if (typeof message === "string" && isRawErrorText(message)) message = peopleErrorSentence(null, message);
   const registry3 = React34.useContext(NoticeStackContext);
   const floating = registry3 !== null;
   const id = React34.useId();
@@ -6873,15 +6919,47 @@ function EndOfList({ onEndReached }) {
 }
 
 // src/desktop/split-view.tsx
+var React39 = __toESM(require("react"), 1);
 var import_jsx_runtime47 = require("react/jsx-runtime");
 var LIST_WIDTH = { md: "w-70", lg: "w-85" };
+function useNoticeBounds(frame) {
+  React39.useLayoutEffect(() => {
+    const el = frame.current;
+    if (!el) return;
+    const measure = () => {
+      const box = el.getBoundingClientRect();
+      const columns2 = el.querySelector(':scope > [data-slot="split-columns"]');
+      const viewer = columns2?.querySelector(':scope > [data-slot="split-view-detail"]');
+      const top = columns2 ? columns2.getBoundingClientRect().top - box.top : 0;
+      let left = 0;
+      let below = 0;
+      if (viewer && viewer.offsetWidth > 0) {
+        left = viewer.getBoundingClientRect().left - box.left;
+      } else {
+        const listHeader = columns2?.querySelector('[data-slot="split-view-list-header"]');
+        if (listHeader && listHeader.offsetHeight > 0) below = listHeader.getBoundingClientRect().bottom - box.top - top;
+      }
+      el.style.setProperty("--split-notices-left", `${Math.max(0, Math.round(left))}px`);
+      el.style.setProperty("--split-notices-top", `${Math.max(0, Math.round(top + below))}px`);
+    };
+    measure();
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(measure);
+    observer.observe(el);
+    const columns = el.querySelector(':scope > [data-slot="split-columns"]');
+    if (columns) for (const child of Array.from(columns.children)) observer.observe(child);
+    return () => observer.disconnect();
+  });
+}
 function SplitView({ header, notices, source, list, listHeader, listFooter, detail, listWidth = "lg", detailScrolls = true, narrow, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { "data-slot": "split-view", className: cn("relative flex h-full min-h-0 flex-col bg-content", className), ...props, children: [
+  const frame = React39.useRef(null);
+  useNoticeBounds(frame);
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { ref: frame, "data-slot": "split-view", className: cn("relative flex h-full min-h-0 flex-col bg-content", className), ...props, children: [
     header ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "shrink-0 px-5 empty:hidden", children: header }) : null,
     /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { "data-slot": "split-columns", "data-narrow": detail !== void 0 ? narrow : void 0, "data-has-source": source ? "" : void 0, className: "flex min-h-0 flex-1", children: [
       source ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { "data-slot": "split-view-source", className: "flex w-52 min-w-40 shrink flex-col overflow-y-auto border-r border-separator py-2", children: source }) : null,
       /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { "data-slot": "split-view-list", className: cn("flex flex-col", detail === void 0 ? "min-w-0 flex-1" : cn("min-w-56 shrink border-r border-separator", LIST_WIDTH[listWidth])), children: [
-        listHeader ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "flex shrink-0 flex-col gap-2 px-3 pb-2 pt-1", children: listHeader }) : null,
+        listHeader ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { "data-slot": "split-view-list-header", className: "flex shrink-0 flex-col gap-2 px-3 pb-2 pt-1", children: listHeader }) : null,
         /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "min-h-0 flex-1 overflow-y-auto", children: list }),
         listFooter ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "flex shrink-0 items-center justify-center border-t border-separator px-3 py-3", children: listFooter }) : null
       ] }),
@@ -6892,7 +6970,7 @@ function SplitView({ header, notices, source, list, listHeader, listFooter, deta
 }
 
 // src/desktop/resizable-pane.tsx
-var React39 = __toESM(require("react"), 1);
+var React40 = __toESM(require("react"), 1);
 var import_jsx_runtime48 = require("react/jsx-runtime");
 var STEP = 16;
 var key = (name) => `mx-split:${name}`;
@@ -6946,16 +7024,16 @@ function ResizablePane({
   children,
   ...props
 }) {
-  const ref = React39.useRef(null);
-  const [size, setSize] = React39.useState(() => saved(autosaveName) ?? defaultSize);
-  const [ownState, setOwnState] = React39.useState(() => savedState(autosaveName) ?? (defaultCollapsed ? "collapsed" : "open"));
-  const [room, setRoom] = React39.useState(null);
+  const ref = React40.useRef(null);
+  const [size, setSize] = React40.useState(() => saved(autosaveName) ?? defaultSize);
+  const [ownState, setOwnState] = React40.useState(() => savedState(autosaveName) ?? (defaultCollapsed ? "collapsed" : "open"));
+  const [room, setRoom] = React40.useState(null);
   const collapsed = collapsedProp ?? ownState === "collapsed";
   const maximized = !collapsed && (maximizedProp ?? ownState === "maximized");
   const state = collapsed ? "collapsed" : maximized ? "maximized" : "open";
-  const live = React39.useRef({ state, onCollapsedChange, onMaximizedChange });
+  const live = React40.useRef({ state, onCollapsedChange, onMaximizedChange });
   live.current = { state, onCollapsedChange, onMaximizedChange };
-  const setState = React39.useCallback((next) => {
+  const setState = React40.useCallback((next) => {
     const { state: was, onCollapsedChange: oc, onMaximizedChange: om } = live.current;
     if (next === was) return;
     live.current = { ...live.current, state: next };
@@ -6963,8 +7041,8 @@ function ResizablePane({
     if (was === "collapsed" !== (next === "collapsed")) oc?.(next === "collapsed");
     if (was === "maximized" !== (next === "maximized")) om?.(next === "maximized");
   }, []);
-  React39.useEffect(() => saveState(autosaveName, state), [autosaveName, state]);
-  React39.useLayoutEffect(() => {
+  React40.useEffect(() => saveState(autosaveName, state), [autosaveName, state]);
+  React40.useLayoutEffect(() => {
     const el = ref.current;
     const frame = el?.closest('[data-slot="page-frame"], [data-slot="split-view"]') ?? el?.parentElement ?? null;
     if (!frame) return;
@@ -7230,7 +7308,7 @@ function CallButton({ icon, label, tone = "default", className, type = "button",
 }
 
 // src/desktop/media.tsx
-var React40 = __toESM(require("react"), 1);
+var React41 = __toESM(require("react"), 1);
 var import_jsx_runtime51 = require("react/jsx-runtime");
 function Waveform({ peaks, progress = 0, onSeek, className, "aria-label": label, ...props }) {
   const bars = peaks.length;
@@ -7286,7 +7364,7 @@ function peaksOf(samples, bars) {
   const loudest = Math.max(...out);
   return loudest > 0 ? out.map((p) => p / loudest) : out;
 }
-var RecordButton = React40.forwardRef(function RecordButton2({ recording = false, label, className, type = "button", ...props }, ref) {
+var RecordButton = React41.forwardRef(function RecordButton2({ recording = false, label, className, type = "button", ...props }, ref) {
   return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
     "button",
     {
@@ -7399,7 +7477,7 @@ function SymbolTile({ children, color, size = "sm", className, ...props }) {
 }
 
 // src/desktop/library.tsx
-var React41 = __toESM(require("react"), 1);
+var React42 = __toESM(require("react"), 1);
 var import_jsx_runtime55 = require("react/jsx-runtime");
 var TILE_COLOR = {
   red: "bg-system-red",
@@ -7449,7 +7527,7 @@ function MoreGlyph() {
   ] });
 }
 function ShortcutTile({ color, glyph, title, selected, onSelect, onOpen, run, menu, className, onKeyDown, ...props }) {
-  const [asking, setAsking] = React41.useState(null);
+  const [asking, setAsking] = React42.useState(null);
   const confirm = /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
     ConfirmDialog,
     {
@@ -7570,7 +7648,7 @@ function FavoriteTile({ title, icon, className, ...props }) {
 }
 
 // src/desktop/store.tsx
-var React42 = __toESM(require("react"), 1);
+var React43 = __toESM(require("react"), 1);
 var import_jsx_runtime57 = require("react/jsx-runtime");
 function ProgressRing({ value, label, className, ...props }) {
   const r = 10;
@@ -7662,7 +7740,7 @@ function GetButton({ state, name, onPress, onStop, className, disabled, ...props
   ] });
 }
 function StoreShelf({ title, subtitle, action, className, children, ...props }) {
-  const id = React42.useId();
+  const id = React43.useId();
   return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("section", { "aria-labelledby": id, "data-slot": "store-shelf", className: cn("flex flex-col gap-2", className), ...props, children: [
     /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("header", { className: "flex items-end gap-3 border-t border-separator pt-3", children: [
       /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("span", { className: "flex min-w-0 flex-1 flex-col", children: [
@@ -7730,18 +7808,18 @@ function InfoStrip({ items, className, ...props }) {
 }
 
 // src/desktop/credentials.tsx
-var React46 = __toESM(require("react"), 1);
+var React47 = __toESM(require("react"), 1);
 var import_format = require("@ai-matrx/kit/format");
 
 // src/controls/controls.tsx
 var SwitchPrimitives = __toESM(require("@radix-ui/react-switch"), 1);
 var import_react_slot4 = require("@radix-ui/react-slot");
-var React45 = __toESM(require("react"), 1);
+var React46 = __toESM(require("react"), 1);
 
 // src/button.tsx
 var import_react_slot3 = require("@radix-ui/react-slot");
 var import_class_variance_authority3 = require("class-variance-authority");
-var React43 = __toESM(require("react"), 1);
+var React44 = __toESM(require("react"), 1);
 var import_jsx_runtime58 = require("react/jsx-runtime");
 var buttonVariants2 = (0, import_class_variance_authority3.cva)(
   "matrx-glyph-trim inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-0 disabled:opacity-50 active:scale-[0.98] [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
@@ -7809,7 +7887,7 @@ function swallowClick(event) {
   event.preventDefault();
   event.stopPropagation();
 }
-var Button3 = React43.forwardRef(
+var Button3 = React44.forwardRef(
   ({ className, variant, size, asChild = false, onClick, ...props }, ref) => {
     const Component = asChild ? import_react_slot3.Slot : "button";
     const resolvedSize = size ?? "default";
@@ -7835,7 +7913,7 @@ var Button3 = React43.forwardRef(
 Button3.displayName = "Button";
 
 // src/textarea.tsx
-var React44 = __toESM(require("react"), 1);
+var React45 = __toESM(require("react"), 1);
 var import_jsx_runtime59 = require("react/jsx-runtime");
 var FILL_HEIGHT_REGEX = /(?:^|\s)(h-full|h-dvh|flex-1|grow)(?:\s|$)/;
 var FILL_WIDTH_REGEX = /(?:^|\s)(w-full|w-screen)(?:\s|$)/;
@@ -7849,7 +7927,7 @@ function getStretchClasses(className) {
 var TEXTAREA_ELEVATED_CLASS = `flex h-auto w-full rounded-md ${FIELD_SURFACE_CLASS} px-3 py-2 text-sm text-foreground shadow-textarea transition duration-400 placeholder:text-muted-foreground focus-visible:outline-none focus-visible:border-primary focus-visible:ring-[3px] focus-visible:ring-primary/15 disabled:cursor-not-allowed disabled:opacity-50`;
 var TEXTAREA_CONTROL_CLASS = `flex w-full rounded-md ${FIELD_SURFACE_CLASS} px-3 py-2 text-sm text-foreground shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:border-primary focus-visible:ring-[3px] focus-visible:ring-primary/15 disabled:cursor-not-allowed disabled:opacity-50`;
 function useAutoGrow(ref, value, autoGrow = false, minHeight, maxHeight) {
-  React44.useEffect(() => {
+  React45.useEffect(() => {
     if (!autoGrow || !ref.current) return;
     const textarea = ref.current;
     textarea.style.height = "auto";
@@ -7865,8 +7943,8 @@ function useAutoGrow(ref, value, autoGrow = false, minHeight, maxHeight) {
   }, [value, autoGrow, minHeight, maxHeight, ref]);
 }
 function useMergedTextareaRef(forwarded) {
-  const internal = React44.useRef(null);
-  const callback = React44.useCallback(
+  const internal = React45.useRef(null);
+  const callback = React45.useCallback(
     (node) => {
       internal.current = node;
       if (typeof forwarded === "function") forwarded(node);
@@ -7883,7 +7961,7 @@ function boxStyle(minHeight, maxHeight) {
     maxHeight: maxHeight ? `${maxHeight}px` : void 0
   };
 }
-var Textarea = React44.forwardRef(
+var Textarea = React45.forwardRef(
   ({ className, autoGrow, minHeight, maxHeight, wrapperClassName, ...props }, forwarded) => {
     const { ref, callback } = useMergedTextareaRef(forwarded);
     const stretchClasses = getStretchClasses(className);
@@ -7909,7 +7987,7 @@ var Textarea = React44.forwardRef(
   }
 );
 Textarea.displayName = "Textarea";
-var BasicTextarea = React44.forwardRef(
+var BasicTextarea = React45.forwardRef(
   ({ className, autoGrow, minHeight, maxHeight, ...props }, forwarded) => {
     const { ref, callback } = useMergedTextareaRef(forwarded);
     useAutoGrow(ref, props.value, autoGrow, minHeight, maxHeight);
@@ -7931,7 +8009,7 @@ var BasicTextarea = React44.forwardRef(
   }
 );
 BasicTextarea.displayName = "BasicTextarea";
-var TextareaWithPrefix = React44.forwardRef(
+var TextareaWithPrefix = React45.forwardRef(
   ({
     prefix,
     className,
@@ -7974,7 +8052,7 @@ TextareaWithPrefix.displayName = "TextareaWithPrefix";
 
 // src/controls/controls.tsx
 var import_jsx_runtime60 = require("react/jsx-runtime");
-var ControlRow = React45.forwardRef(
+var ControlRow = React46.forwardRef(
   ({ className, nowrap, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
     "div",
     {
@@ -7987,7 +8065,7 @@ var ControlRow = React45.forwardRef(
   )
 );
 ControlRow.displayName = "ControlRow";
-var ControlScope = React45.forwardRef(
+var ControlScope = React46.forwardRef(
   (props, ref) => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { ref, "data-matrx-controls": "", ...props })
 );
 ControlScope.displayName = "ControlScope";
@@ -7998,14 +8076,14 @@ function glyphSlot(icon, iconEnd, label) {
   if (iconEnd) return "end";
   return void 0;
 }
-var Button4 = React45.forwardRef(
+var Button4 = React46.forwardRef(
   ({ className, variant = "outline", tone, icon, iconEnd, asChild = false, collapse, pressed, badge, glyphTone, removes, meta, width, hero, children, onClick, type, ...props }, ref) => {
     const Component = asChild ? import_react_slot4.Slot : "button";
     const badgeText = typeof badge === "number" ? badge > 0 ? badge > 99 ? "99+" : String(badge) : null : badge ? "" : null;
     const ariaDisabled = props["aria-disabled"];
     const disabledChild = asChild && Boolean(props.disabled);
     const inert = disabledChild || ariaDisabled === true || ariaDisabled === "true";
-    const label = asChild && React45.isValidElement(children) ? children.props.children : children;
+    const label = asChild && React46.isValidElement(children) ? children.props.children : children;
     const collapses = collapse === "container" && Boolean(icon) && Boolean(label);
     return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
       Component,
@@ -8043,11 +8121,11 @@ var Button4 = React45.forwardRef(
   }
 );
 Button4.displayName = "Button";
-var SplitButton = React45.forwardRef(
+var SplitButton = React46.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { ref, role: "group", "data-matrx-control": "split", className: cn2("matrx-control-split", className), ...props })
 );
 SplitButton.displayName = "SplitButton";
-var Field = React45.forwardRef(
+var Field = React46.forwardRef(
   ({ className, style, icon, end, width, hero, filled, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
     "label",
     {
@@ -8067,7 +8145,7 @@ var Field = React45.forwardRef(
   )
 );
 Field.displayName = "Field";
-var SearchField3 = React45.forwardRef(
+var SearchField3 = React46.forwardRef(
   ({ placeholder = "Search", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
     Field,
     {
@@ -8081,7 +8159,7 @@ var SearchField3 = React45.forwardRef(
   )
 );
 SearchField3.displayName = "SearchField";
-var Chip = React45.forwardRef(
+var Chip = React46.forwardRef(
   ({ label, variant = "item", tone, icon, asChild = false, pressed, children, className, title, ...props }, ref) => {
     const Component = asChild ? import_react_slot4.Slot : "span";
     const glyph = variant === "add" ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(PlusIcon, { className: "lucide lucide-plus" }) : icon;
@@ -8111,7 +8189,7 @@ var Chip = React45.forwardRef(
   }
 );
 Chip.displayName = "Chip";
-var ChipSet = React45.forwardRef(
+var ChipSet = React46.forwardRef(
   ({ layout = "flow", className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
     "div",
     {
@@ -8124,7 +8202,7 @@ var ChipSet = React45.forwardRef(
   )
 );
 ChipSet.displayName = "ChipSet";
-var Switch3 = React45.forwardRef(
+var Switch3 = React46.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
     SwitchPrimitives.Root,
     {
@@ -8137,7 +8215,7 @@ var Switch3 = React45.forwardRef(
   )
 );
 Switch3.displayName = "Switch";
-var Textarea2 = React45.forwardRef(
+var Textarea2 = React46.forwardRef(
   ({ className, style, variant = "field", mono, hero, joinedBottom, autoGrow, minHeight, maxHeight, reservedInlineEnd, reservedBlockEnd, ...props }, forwarded) => {
     const { ref, callback } = useMergedTextareaRef(forwarded);
     useAutoGrow(ref, props.value, autoGrow, minHeight, maxHeight);
@@ -8243,15 +8321,15 @@ function CodeTimer({ fraction, label, className }) {
   ] });
 }
 function TimedCode({ code, validUntilMs, periodSeconds, now = Date.now, onExpire, className, ...props }) {
-  const [at, setAt] = React46.useState(() => now());
-  const expired = React46.useRef(false);
-  React46.useEffect(() => {
+  const [at, setAt] = React47.useState(() => now());
+  const expired = React47.useRef(false);
+  React47.useEffect(() => {
     expired.current = false;
     const id = setInterval(() => setAt(now()), 1e3);
     return () => clearInterval(id);
   }, [validUntilMs, now]);
   const left = Math.max(0, validUntilMs - at);
-  React46.useEffect(() => {
+  React47.useEffect(() => {
     if (left === 0 && !expired.current) {
       expired.current = true;
       onExpire?.();
@@ -8478,12 +8556,12 @@ var import_format4 = require("@ai-matrx/kit/format");
 // src/confirm-host.tsx
 var import_confirm_opener = require("@ai-matrx/kit/confirm-opener");
 var import_opener_react = require("@ai-matrx/kit/opener-react");
-var React48 = __toESM(require("react"), 1);
+var React49 = __toESM(require("react"), 1);
 
 // src/alert-dialog.tsx
 var AlertDialogPrimitive = __toESM(require("@radix-ui/react-alert-dialog"), 1);
 var import_react_tree2 = require("@ai-matrx/kit/react-tree");
-var React47 = __toESM(require("react"), 1);
+var React48 = __toESM(require("react"), 1);
 var import_jsx_runtime63 = require("react/jsx-runtime");
 var AlertDialog = AlertDialogPrimitive.Root;
 var AlertDialogPortal = ({
@@ -8494,7 +8572,7 @@ var AlertDialogPortal = ({
   return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(AlertDialogPrimitive.Portal, { container: resolved ?? null, ...props });
 };
 AlertDialogPortal.displayName = "AlertDialogPortal";
-var AlertDialogOverlay = React47.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+var AlertDialogOverlay = React48.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
   AlertDialogPrimitive.Overlay,
   {
     ref,
@@ -8508,12 +8586,12 @@ var AlertDialogOverlay = React47.forwardRef(({ className, ...props }, ref) => /*
   }
 ));
 AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
-var AlertDialogContentPrimitive = React47.forwardRef(({ onCloseAutoFocus, ...props }, ref) => {
+var AlertDialogContentPrimitive = React48.forwardRef(({ onCloseAutoFocus, ...props }, ref) => {
   useModalLayer(true);
   return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(AlertDialogPrimitive.Content, { ...props, ref, "aria-modal": "true", onCloseAutoFocus: keepMovedFocus(onCloseAutoFocus) });
 });
 AlertDialogContentPrimitive.displayName = "AlertDialogContentPrimitive";
-var AlertDialogDescription = React47.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+var AlertDialogDescription = React48.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
   AlertDialogPrimitive.Description,
   {
     ref,
@@ -8523,7 +8601,7 @@ var AlertDialogDescription = React47.forwardRef(({ className, ...props }, ref) =
   }
 ));
 AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;
-var AlertDialogContent = React47.forwardRef(({ className, children, container, animated = true, ...props }, ref) => {
+var AlertDialogContent = React48.forwardRef(({ className, children, container, animated = true, ...props }, ref) => {
   const hasDescription = (0, import_react_tree2.treeContainsComponent)(children, AlertDialogDescription) || (0, import_react_tree2.treeContainsComponent)(children, AlertDialogPrimitive.Description);
   return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(AlertDialogPortal, { container, children: [
     /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(AlertDialogOverlay, {}),
@@ -8602,7 +8680,7 @@ var AlertDialogFooter = ({
   }
 );
 AlertDialogFooter.displayName = "AlertDialogFooter";
-var AlertDialogTitle = React47.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+var AlertDialogTitle = React48.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
   AlertDialogPrimitive.Title,
   {
     ref,
@@ -8612,7 +8690,7 @@ var AlertDialogTitle = React47.forwardRef(({ className, ...props }, ref) => /* @
   }
 ));
 AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
-var AlertDialogAction = React47.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+var AlertDialogAction = React48.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
   AlertDialogPrimitive.Action,
   {
     ref,
@@ -8622,7 +8700,7 @@ var AlertDialogAction = React47.forwardRef(({ className, ...props }, ref) => /*
   }
 ));
 AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
-var AlertDialogCancel = React47.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+var AlertDialogCancel = React48.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
   AlertDialogPrimitive.Cancel,
   {
     ref,
@@ -8699,9 +8777,9 @@ function ConfirmDialog2({
 var import_jsx_runtime65 = require("react/jsx-runtime");
 function ConfirmDialogHost() {
   const { shown, open, settle } = (0, import_opener_react.useOpenerHost)(import_confirm_opener.confirmOpener);
-  const [readyFor, setReadyFor] = React48.useState(null);
+  const [readyFor, setReadyFor] = React49.useState(null);
   const ready = shown?.ready;
-  React48.useEffect(() => {
+  React49.useEffect(() => {
     if (!shown || !ready) return void 0;
     let live = true;
     const release = () => {
@@ -8713,8 +8791,8 @@ function ConfirmDialogHost() {
     };
   }, [shown, ready]);
   const held = !!ready && readyFor !== shown;
-  const handleConfirm = React48.useCallback(() => settle(true), [settle]);
-  const handleOpenChange = React48.useCallback(
+  const handleConfirm = React49.useCallback(() => settle(true), [settle]);
+  const handleOpenChange = React49.useCallback(
     (next) => {
       if (!next) settle(false);
     },
@@ -8738,10 +8816,10 @@ function ConfirmDialogHost() {
 
 // src/desktop/popover.tsx
 var PopoverPrimitive2 = __toESM(require("@radix-ui/react-popover"), 1);
-var React49 = __toESM(require("react"), 1);
+var React50 = __toESM(require("react"), 1);
 var import_jsx_runtime66 = require("react/jsx-runtime");
 var POPOVER_ARROW = { width: 18, height: 9 };
-var PopoverContent2 = React49.forwardRef(
+var PopoverContent2 = React50.forwardRef(
   ({ arrow = true, sideOffset, className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(
     PopoverContent,
     {
@@ -8762,7 +8840,7 @@ PopoverContent2.displayName = "DesktopPopoverContent";
 
 // src/controls/surfaces.tsx
 var import_react_slot5 = require("@radix-ui/react-slot");
-var React50 = __toESM(require("react"), 1);
+var React51 = __toESM(require("react"), 1);
 
 // src/skeleton.tsx
 var import_jsx_runtime67 = require("react/jsx-runtime");
@@ -8824,7 +8902,7 @@ function Skeleton({ className, animated = true, motion = "pulse", shape, height,
 
 // src/controls/surfaces.tsx
 var import_jsx_runtime68 = require("react/jsx-runtime");
-var Tile = React50.forwardRef(
+var Tile = React51.forwardRef(
   ({ layout = "row", variant = "outline", icon, title, wrapTitle, line, end, selected, selectedStyle, tooltip, level, fit, endInset, oneLine, dashed, hoverStyle, danger, dimmed, glyphTone, hero, tone, iconTone, dense, asChild = false, className, children, onClick, type, ...props }, ref) => {
     const Component = asChild ? import_react_slot5.Slot : "button";
     const ariaDisabled = props["aria-disabled"];
@@ -8865,13 +8943,13 @@ var Tile = React50.forwardRef(
         className: cn2("matrx-tile", className),
         ...props,
         onClick: inert ? swallowClick : onClick,
-        children: asChild && React50.isValidElement(children) ? React50.cloneElement(children, void 0, body) : body
+        children: asChild && React51.isValidElement(children) ? React51.cloneElement(children, void 0, body) : body
       }
     );
   }
 );
 Tile.displayName = "Tile";
-var DisclosureHeader = React50.forwardRef(
+var DisclosureHeader = React51.forwardRef(
   ({ open, variant = "row", icon, glyphTone, title, meta, end, line, chevron = "start", className, type, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(
     "button",
     {
@@ -8899,7 +8977,7 @@ var DisclosureHeader = React50.forwardRef(
   )
 );
 DisclosureHeader.displayName = "DisclosureHeader";
-var DeleteButton = React50.forwardRef((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(Button4, { ref, variant: "quiet", icon: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(Trash2Icon, {}), "data-delete": "", title: props["aria-label"], ...props }));
+var DeleteButton = React51.forwardRef((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(Button4, { ref, variant: "quiet", icon: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(Trash2Icon, {}), "data-delete": "", title: props["aria-label"], ...props }));
 DeleteButton.displayName = "DeleteButton";
 
 // src/desktop/list-row.tsx
@@ -8924,7 +9002,7 @@ function ListRow({ icon, title, secondary, accessory, onSelect, selected = false
 }
 
 // src/desktop/info-hint.tsx
-var React51 = __toESM(require("react"), 1);
+var React52 = __toESM(require("react"), 1);
 var import_jsx_runtime70 = require("react/jsx-runtime");
 var INFO_HINT_MAX = 140;
 function infoHintText(label, text) {
@@ -8940,7 +9018,7 @@ function InfoGlyph2() {
   ] });
 }
 function InfoHint({ label, text, side = "top", className }) {
-  const shown = React51.useMemo(() => infoHintText(label, text), [label, text]);
+  const shown = React52.useMemo(() => infoHintText(label, text), [label, text]);
   return /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(Popover, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
       Button4,
@@ -8959,11 +9037,11 @@ function InfoHint({ label, text, side = "top", className }) {
 
 // src/collapsible.tsx
 var CollapsiblePrimitive = __toESM(require("@radix-ui/react-collapsible"), 1);
-var React52 = __toESM(require("react"), 1);
+var React53 = __toESM(require("react"), 1);
 var import_jsx_runtime71 = require("react/jsx-runtime");
 var Collapsible = CollapsiblePrimitive.Root;
 var CollapsibleTrigger2 = CollapsiblePrimitive.CollapsibleTrigger;
-var CollapsibleContent2 = React52.forwardRef(({ className, animated = true, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+var CollapsibleContent2 = React53.forwardRef(({ className, animated = true, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
   CollapsiblePrimitive.CollapsibleContent,
   {
     ref,
@@ -8978,7 +9056,7 @@ var CollapsibleContent2 = React52.forwardRef(({ className, animated = true, ...p
 CollapsibleContent2.displayName = "CollapsibleContent";
 
 // src/app-shell/app-rail.tsx
-var React53 = __toESM(require("react"), 1);
+var React54 = __toESM(require("react"), 1);
 
 // src/app-shell/status-dot.tsx
 var import_jsx_runtime72 = require("react/jsx-runtime");
@@ -9047,7 +9125,7 @@ function AppRailGroup({ className, ...props }) {
 function AppRailSpacer() {
   return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { "data-slot": "app-rail-spacer", className: "flex-1" });
 }
-var AppRailItem = React53.forwardRef(function AppRailItem2({ icon, label, shortcut, active = false, attention, attentionLabel, className, ...props }, ref) {
+var AppRailItem = React54.forwardRef(function AppRailItem2({ icon, label, shortcut, active = false, attention, attentionLabel, className, ...props }, ref) {
   return /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(Tooltip, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(
       "button",
@@ -9087,7 +9165,7 @@ var AppRailItem = React53.forwardRef(function AppRailItem2({ icon, label, shortc
     ] }) })
   ] });
 });
-var AppRailAvatar = React53.forwardRef(function AppRailAvatar2({ initials: initials2 = "", label, className, children, ...props }, ref) {
+var AppRailAvatar = React54.forwardRef(function AppRailAvatar2({ initials: initials2 = "", label, className, children, ...props }, ref) {
   return /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(Tooltip, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
       "button",
@@ -9110,7 +9188,7 @@ var AppRailAvatar = React53.forwardRef(function AppRailAvatar2({ initials: initi
 });
 
 // src/app-shell/canvas.tsx
-var React54 = __toESM(require("react"), 1);
+var React55 = __toESM(require("react"), 1);
 
 // src/resizable.tsx
 var import_react_resizable_panels = require("react-resizable-panels");
@@ -9177,7 +9255,7 @@ function CanvasLayout({ columns, expandedId = null, className }) {
   if (expanded) {
     return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("div", { "data-slot": "canvas-layout", "data-expanded": expanded.id, className: cn2("flex h-full w-full", className), children: expanded.node });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(ResizablePanelGroup, { "data-slot": "canvas-layout", orientation: "horizontal", className: cn2("gap-0", className), children: visible.map((column, ci) => /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(React54.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(ResizablePanelGroup, { "data-slot": "canvas-layout", orientation: "horizontal", className: cn2("gap-0", className), children: visible.map((column, ci) => /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(React55.Fragment, { children: [
     ci > 0 ? /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(ResizableHandle, { "data-canvas-gap": "column", size: "md", className: GAP }) : null,
     /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
       ResizablePanel,
@@ -9185,7 +9263,7 @@ function CanvasLayout({ columns, expandedId = null, className }) {
         id: column.id,
         minSize: column.minSize ?? 220,
         ...column.defaultSize !== void 0 ? { defaultSize: column.defaultSize } : {},
-        children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(ResizablePanelGroup, { "data-canvas-column": column.id, orientation: "vertical", children: column.panels.map((panel, pi) => /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(React54.Fragment, { children: [
+        children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(ResizablePanelGroup, { "data-canvas-column": column.id, orientation: "vertical", children: column.panels.map((panel, pi) => /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(React55.Fragment, { children: [
           pi > 0 ? /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(ResizableHandle, { "data-canvas-gap": "row", size: "md", className: GAP }) : null,
           /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
             ResizablePanel,
@@ -9203,10 +9281,10 @@ function CanvasLayout({ columns, expandedId = null, className }) {
 }
 
 // src/app-shell/mode-switch.tsx
-var React55 = __toESM(require("react"), 1);
+var React56 = __toESM(require("react"), 1);
 var import_jsx_runtime76 = require("react/jsx-runtime");
 function ModeSwitch({ value, onValueChange, options, label = "Mode", className }) {
-  const refs = React55.useRef([]);
+  const refs = React56.useRef([]);
   const move = (from, delta) => {
     const next = (from + delta + options.length) % options.length;
     const option = options[next];
@@ -9268,7 +9346,7 @@ function ModeSwitch({ value, onValueChange, options, label = "Mode", className }
 }
 
 // src/organization-picker.tsx
-var React56 = __toESM(require("react"), 1);
+var React57 = __toESM(require("react"), 1);
 var import_jsx_runtime77 = require("react/jsx-runtime");
 function matchesOrganizationQuery(org, query) {
   const q = query.trim().toLowerCase();
@@ -9330,7 +9408,7 @@ function orderOrganizationsForPicker(organizations, favoriteOrganizationIds, act
 }
 
 // src/desktop/organization-picker.tsx
-var React57 = __toESM(require("react"), 1);
+var React58 = __toESM(require("react"), 1);
 var import_jsx_runtime78 = require("react/jsx-runtime");
 var ROLE = { owner: "Owner", admin: "Admin", member: "Member" };
 function roleLabel(role) {
@@ -9345,9 +9423,9 @@ function OrganizationPickerSheet({
   onSwitch,
   onToggleFavorite
 }) {
-  const [query, setQuery] = React57.useState("");
-  const [chosen, setChosen] = React57.useState(activeOrganizationId);
-  React57.useEffect(() => {
+  const [query, setQuery] = React58.useState("");
+  const [chosen, setChosen] = React58.useState(activeOrganizationId);
+  React58.useEffect(() => {
     if (open) {
       setQuery("");
       setChosen(activeOrganizationId);