@ai-matrx/design-system 0.86.349 → 0.86.351

package/dist/data-table/uuid-cell.js

@@ -3,8 +3,8 @@ import "../chunk-QFP4BUKZ.js";
 import {
   RecordId,
   shortUuid
-} from "../chunk-GLLPO66A.js";
-import "../chunk-XTP6HOB6.js";
+} from "../chunk-U46XUQI7.js";
+import "../chunk-6XNYYROM.js";
 import "../chunk-BD77DHUO.js";
 import "../chunk-BKCJUFD3.js";
 import "../chunk-PIQJULQB.js";

package/dist/desktop.cjs

@@ -2885,6 +2885,44 @@ function NavigatorCustomizeSheet({ open, onOpenChange, items, onChange, onRestor
   ] }) });
 }
 
+// src/notice-stack.ts
+var NOTICE_STACK = {
+  /** The corner every notice floats in. */
+  corner: "top-right",
+  /** Cards shown at once; the rest fold into "N more". */
+  maxVisible: 3,
+  /** Info and success: gone after this long. */
+  infoMs: 4e3,
+  /** Errors and warnings: stay until dismissed, or this long at most. */
+  errorMs: 3e4,
+  /** The card's width: small, never the window's. */
+  widthRem: 22
+};
+function noticeKey(tone, title, message) {
+  const text = (v) => typeof v === "string" || typeof v === "number" ? String(v).trim() : "";
+  return `${tone}\0${text(title)}\0${text(message)}`;
+}
+function collapseNotices(items, keyOf) {
+  const groups = [];
+  const byKey = /* @__PURE__ */ new Map();
+  for (const item2 of items) {
+    const key2 = keyOf(item2);
+    const found = key2 !== null ? byKey.get(key2) : void 0;
+    if (found) {
+      found.members.push(item2);
+      continue;
+    }
+    const group = { key: key2, members: [item2] };
+    groups.push(group);
+    if (key2 !== null) byKey.set(key2, group);
+  }
+  return groups.map((g) => ({ item: g.members[g.members.length - 1], members: g.members, count: g.members.length }));
+}
+function visibleNotices(groups, max = NOTICE_STACK.maxVisible) {
+  if (groups.length <= max) return { shown: [...groups], folded: 0 };
+  return { shown: groups.slice(groups.length - max), folded: groups.length - max };
+}
+
 // src/desktop/layout.tsx
 var import_jsx_runtime20 = require("react/jsx-runtime");
 var WIDTH = {
@@ -2892,16 +2930,78 @@ var WIDTH = {
   wide: "max-w-none",
   full: "max-w-none"
 };
-function hasNotices(children) {
-  return React16.Children.toArray(children).some((c) => React16.isValidElement(c) && c.type === React16.Fragment ? hasNotices(c.props.children) : Boolean(c));
+var EMPTY_LAYOUT = { drawn: /* @__PURE__ */ new Map(), folded: 0, total: 0 };
+function createNoticeRegistry() {
+  let entries = [];
+  let expanded = false;
+  let layout = EMPTY_LAYOUT;
+  const listeners = /* @__PURE__ */ new Set();
+  const recompute = () => {
+    const groups = collapseNotices(entries, (e) => e.key);
+    const { shown, folded } = expanded ? { shown: groups, folded: 0 } : visibleNotices(groups);
+    const drawn = /* @__PURE__ */ new Map();
+    for (const g of shown) {
+      const dismissers = g.members.map((m) => m.dismiss).filter((d) => typeof d === "function");
+      drawn.set(g.item.id, { count: g.count, dismissAll: g.item.dismiss ? () => dismissers.forEach((d) => d()) : void 0 });
+    }
+    layout = { drawn, folded, total: entries.length };
+    listeners.forEach((l) => l());
+  };
+  return {
+    set(id, key2, dismiss) {
+      const at = entries.findIndex((e) => e.id === id);
+      if (at >= 0) {
+        const old = entries[at];
+        if (old.key === key2 && old.dismiss === dismiss) return;
+        entries = entries.map((e, i) => i === at ? { id, key: key2, dismiss } : e);
+      } else {
+        entries = [...entries, { id, key: key2, dismiss }];
+      }
+      recompute();
+    },
+    remove(id) {
+      if (!entries.some((e) => e.id === id)) return;
+      entries = entries.filter((e) => e.id !== id);
+      if (entries.length === 0) expanded = false;
+      recompute();
+    },
+    subscribe(listener) {
+      listeners.add(listener);
+      return () => listeners.delete(listener);
+    },
+    snapshot: () => layout,
+    expand() {
+      expanded = true;
+      recompute();
+    }
+  };
+}
+var NoticeStackContext = React16.createContext(null);
+function useNoticeStackLayout(registry3) {
+  return React16.useSyncExternalStore(
+    React16.useCallback((l) => registry3 ? registry3.subscribe(l) : () => void 0, [registry3]),
+    () => registry3 ? registry3.snapshot() : EMPTY_LAYOUT,
+    () => registry3 ? registry3.snapshot() : EMPTY_LAYOUT
+  );
+}
+function bannerNoticeKey(tone, title, message) {
+  if (typeof title !== "string" && typeof title !== "number") return null;
+  return noticeKey(tone, title, message);
+}
+function holdsElements(children) {
+  return React16.Children.toArray(children).some(
+    (c) => React16.isValidElement(c) && c.type === React16.Fragment ? holdsElements(c.props.children) : React16.isValidElement(c)
+  );
 }
 function Notices({ children, className, onHeight, ...props }) {
   const stack = React16.useRef(null);
-  const drawn = hasNotices(children);
+  const [registry3] = React16.useState(createNoticeRegistry);
+  const layout = useNoticeStackLayout(registry3);
+  const drawn = layout.total > 0;
   React16.useLayoutEffect(() => {
     const el = stack.current;
     if (!onHeight) return;
-    if (!el) return onHeight(0);
+    if (!el || !drawn) return onHeight(0);
     const report = () => onHeight(el.offsetHeight);
     report();
     if (typeof ResizeObserver === "undefined") return;
@@ -2912,8 +3012,27 @@ function Notices({ children, className, onHeight, ...props }) {
       onHeight(0);
     };
   }, [onHeight, drawn]);
-  if (!drawn) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { ref: stack, "data-slot": "notices", "aria-live": "polite", className: cn("flex shrink-0 flex-col gap-2 empty:hidden", className), ...props, children });
+  if (!holdsElements(children)) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    "div",
+    {
+      ref: stack,
+      "data-slot": "notices",
+      "data-float": "",
+      "aria-live": "polite",
+      hidden: !drawn || void 0,
+      style: { width: `${NOTICE_STACK.widthRem}rem` },
+      className: cn("flex flex-col items-stretch gap-2 empty:hidden", className),
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(NoticeStackContext.Provider, { value: registry3, children: [
+        layout.folded > 0 ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("button", { type: "button", "data-slot": "notices-more", className: "order-first self-end rounded-full px-2 py-0.5", onClick: () => registry3.expand(), children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(Text, { variant: "caption", tone: "secondary", children: [
+          layout.folded,
+          " more"
+        ] }) }) : null,
+        children
+      ] })
+    }
+  );
 }
 function NoticeSlot({ children, className, ...props }) {
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { "data-slot": "notice-slot", "aria-live": "polite", className: cn("h-16 shrink-0 overflow-hidden [&>*]:h-full [&>*]:overflow-hidden", className), ...props, children });
@@ -2921,14 +3040,14 @@ function NoticeSlot({ children, className, ...props }) {
 var Page = React16.forwardRef(function Page2({ width = "wide", header, notices, sidebar, scopeBar, footer, flush, className, children, ...props }, ref) {
   const frame = (
     // The frame is always there (with or without notices), so a notice never remounts the page.
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { "data-slot": "page-frame", className: "flex h-full min-w-0 flex-1 flex-col bg-content", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { "data-slot": "page-frame", className: "relative flex h-full min-w-0 flex-1 flex-col bg-content", children: [
       scopeBar ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { "data-slot": "page-scope-bar", className: "flex h-control-lg shrink-0 items-center gap-2 border-b border-separator px-3", children: scopeBar }) : null,
       /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { ref, "data-slot": "page", "data-flush": flush || void 0, className: cn("min-h-0 flex-1 overflow-y-auto bg-content", className), ...props, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: cn("flex w-full flex-col", flush ? "min-h-full" : "gap-5 px-5 pb-5 pt-3", WIDTH[width]), children: [
         header,
         children
       ] }) }),
       footer ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { "data-slot": "page-footer", className: "flex shrink-0 flex-col border-t border-separator bg-content", children: footer }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Notices, { "data-page-notices": "", className: "border-t border-separator px-5 py-3", children: notices })
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Notices, { "data-page-notices": "", children: notices })
     ] })
   );
   if (!sidebar) return frame;
@@ -5413,22 +5532,45 @@ var BANNER_ICON = {
   danger: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Glyph, { d: ALERT }),
   success: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Glyph, { d: DONE })
 };
-function Banner({ tone, icon, title, message, actions, detail, onDismiss, className, ...props }) {
+function Banner({ tone, icon, title, message, actions, detail, onDismiss, count, className, ...props }) {
   const [copied, setCopied] = React34.useState(false);
+  const registry3 = React34.useContext(NoticeStackContext);
+  const floating = registry3 !== null;
+  const id = React34.useId();
+  const key2 = bannerNoticeKey(tone, title, message);
+  React34.useLayoutEffect(() => {
+    registry3?.set(id, key2, onDismiss);
+  }, [registry3, id, key2, onDismiss]);
+  React34.useLayoutEffect(() => registry3 ? () => registry3.remove(id) : void 0, [registry3, id]);
+  const layout = useNoticeStackLayout(registry3);
+  const slot = layout.drawn.get(id);
+  if (floating && !slot) return null;
+  if (slot) {
+    count = Math.max(count ?? 1, slot.count);
+    if (slot.dismissAll) onDismiss = slot.dismissAll;
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
     "div",
     {
       role: tone === "danger" || tone === "warning" ? "alert" : "status",
       "data-slot": "banner",
       "data-tone": tone,
-      className: cn("flex min-h-row items-center gap-2.5 rounded-group px-3 py-2", BANNER_TONE[tone].box, className),
+      "data-float": floating ? "" : void 0,
+      "data-count": count && count > 1 ? count : void 0,
+      className: cn("flex min-h-row items-center gap-2.5 rounded-group px-3 py-2", floating ? "items-start" : BANNER_TONE[tone].box, className),
       ...props,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: cn("flex shrink-0 self-start pt-px [&_svg]:size-icon", BANNER_TONE[tone].icon), children: icon ?? BANNER_ICON[tone] }),
         /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { "data-slot": "banner-body", className: "flex min-w-0 flex-1 flex-wrap items-center gap-x-3 gap-y-2", children: [
           /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { "data-slot": "banner-text", className: "flex min-w-0 flex-1 basis-56 flex-col gap-0.5", title: detail || void 0, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Text, { emphasized: true, children: title }),
-            message ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Text, { as: "p", tone: "secondary", selectable: true, children: message }) : null
+            /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(Text, { "data-slot": "banner-title", emphasized: true, ...floating && typeof title === "string" ? { title } : {}, children: [
+              title,
+              count && count > 1 ? /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("span", { "data-slot": "banner-count", className: "ml-1.5 font-normal text-label-secondary", children: [
+                "\xD7",
+                count
+              ] }) : null
+            ] }),
+            message ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Text, { "data-slot": "banner-message", as: "p", tone: "secondary", selectable: true, children: message }) : null
           ] }),
           actions || detail ? /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { "data-slot": "banner-actions", className: "ml-auto flex shrink-0 items-center gap-2", children: [
             detail ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
@@ -6720,7 +6862,7 @@ function EndOfList({ onEndReached }) {
 var import_jsx_runtime47 = require("react/jsx-runtime");
 var LIST_WIDTH = { md: "w-70", lg: "w-85" };
 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("flex h-full min-h-0 flex-col bg-content", className), ...props, children: [
+  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: [
     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,
@@ -6731,7 +6873,7 @@ function SplitView({ header, notices, source, list, listHeader, listFooter, deta
       ] }),
       detail !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { "data-slot": "split-view-detail", className: cn("flex min-w-80 flex-1 flex-col", detailScrolls ? "overflow-y-auto" : "min-h-0"), children: detail }) : null
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Notices, { "data-page-notices": "", className: "border-t border-separator px-5 py-3", children: notices })
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Notices, { "data-page-notices": "", children: notices })
   ] });
 }
 
@@ -8669,12 +8811,12 @@ 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(
-  ({ layout = "row", variant = "outline", icon, title, wrapTitle, line, end, selected, selectedStyle, tooltip, level, fit, endInset, oneLine, dashed, hoverStyle, danger, dimmed, glyphTone, hero, tone, dense, asChild = false, className, children, onClick, type, ...props }, ref) => {
+  ({ 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"];
     const inert = ariaDisabled === true || ariaDisabled === "true";
     const body = /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(import_jsx_runtime68.Fragment, { children: [
-      icon ? /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("span", { className: "matrx-tile-icon", children: icon }) : null,
+      icon ? /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("span", { className: "matrx-tile-icon", "data-tone": iconTone && iconTone !== "neutral" ? iconTone : void 0, children: icon }) : null,
       /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("span", { className: "matrx-tile-text", children: [
         /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("span", { className: "matrx-tile-title", children: title }),
         line ? /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("span", { className: "matrx-tile-line", children: line }) : null