@ai-matrx/design-system 0.86.348 → 0.86.350

package/dist/desktop.css

@@ -1281,3 +1281,30 @@
 [data-slot="scope-bar"]::-webkit-scrollbar {
   display: none;
 }
+
+/* ---------- The notice stack (layout.tsx Notices, ../notice-stack.ts) ----------
+   A macOS notification card: a 14 pt rounded panel of the popover's translucent, blurred material
+   with its shadow, floating in the frame's top-right corner. The tone lives in the icon only, so an
+   error is a small card with a red glyph, never a red bar across the window. */
+/* The stack: out of the flow, in the frame's top-right corner (the frame is `relative`), never wider
+   than the frame; it lets clicks through between its cards. */
+[data-slot="notices"][data-float] {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  z-index: 40;
+  max-width: calc(100% - 24px);
+  pointer-events: none;
+}
+[data-slot="notices"][data-float] > * {
+  pointer-events: auto;
+}
+[data-slot="banner"][data-float] {
+  border-radius: 14px;
+  background: var(--mx-popover);
+  -webkit-backdrop-filter: blur(30px) saturate(1.8);
+  backdrop-filter: blur(30px) saturate(1.8);
+  box-shadow: var(--mx-shadow-popover);
+  color: var(--mx-label);
+  padding: 10px 10px 10px 12px;
+}

package/dist/desktop.d.cts

@@ -238,9 +238,8 @@ interface PageProps extends React.HTMLAttributes<HTMLDivElement> {
     width?: PageWidth;
     /** The page header; drawn at the top of the scrolling column. */
     header?: React.ReactNode;
-    /** Banners (errors, "Not live", a result, a selection bar). They sit in the page's foot bar, in
-     *  the layout flow, never over content; the scrolling column's top never moves when one appears
-     *  or goes. The lint refuses a Banner anywhere else on a page. */
+    /** Banners (errors, "Not live", a result). They float as small cards in the page's top-right
+     *  corner (Notices), never a bar across it. The lint refuses a Banner anywhere else on a page. */
     notices?: React.ReactNode;
     /** A leading source list inside the page (Console's devices and reports, System Information's
      *  categories): a fixed column with its own scroll, a hairline on its trailing edge. */
@@ -265,7 +264,7 @@ declare function Notices({ children, className, onHeight, ...props }: React.HTML
 declare function NoticeSlot({ children, className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
 /**
  * One scrolling content page: 20 px window margins, the HIG spacing scale (20 px between groups),
- * and its notices in a foot bar below the scrolling column (see Notices).
+ * and its notices as small cards in its top-right corner (see Notices).
  */
 declare const Page: React.ForwardRefExoticComponent<PageProps & React.RefAttributes<HTMLDivElement>>;
 interface PageHeaderProps extends Omit<React.HTMLAttributes<HTMLElement>, "title"> {
@@ -2194,12 +2193,14 @@ interface BannerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"
     detail?: string;
     /** Shows the close (×) button: for notices the person can put away. */
     onDismiss?: () => void;
+    /** How many identical notices this card stands for (the stack collapses them, Notices). */
+    count?: number;
 }
 /**
  * THE inline notice (one pattern, every screen): the tone's icon, a semantic tint, one fixed
  * minimum height, the title and one line, trailing actions, and × when it can be put away.
  */
-declare function Banner({ tone, icon, title, message, actions, detail, onDismiss, className, ...props }: BannerProps): React.JSX.Element;
+declare function Banner({ tone, icon, title, message, actions, detail, onDismiss, count, className, ...props }: BannerProps): React.JSX.Element;
 interface ErrorBannerProps extends Omit<BannerProps, "tone" | "title" | "message" | "actions" | "detail" | "onDismiss"> {
     /** The failed action's error (e.g. `useDesktopAction().error`); nothing renders without one. */
     error: {

package/dist/desktop.d.ts

@@ -238,9 +238,8 @@ interface PageProps extends React.HTMLAttributes<HTMLDivElement> {
     width?: PageWidth;
     /** The page header; drawn at the top of the scrolling column. */
     header?: React.ReactNode;
-    /** Banners (errors, "Not live", a result, a selection bar). They sit in the page's foot bar, in
-     *  the layout flow, never over content; the scrolling column's top never moves when one appears
-     *  or goes. The lint refuses a Banner anywhere else on a page. */
+    /** Banners (errors, "Not live", a result). They float as small cards in the page's top-right
+     *  corner (Notices), never a bar across it. The lint refuses a Banner anywhere else on a page. */
     notices?: React.ReactNode;
     /** A leading source list inside the page (Console's devices and reports, System Information's
      *  categories): a fixed column with its own scroll, a hairline on its trailing edge. */
@@ -265,7 +264,7 @@ declare function Notices({ children, className, onHeight, ...props }: React.HTML
 declare function NoticeSlot({ children, className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
 /**
  * One scrolling content page: 20 px window margins, the HIG spacing scale (20 px between groups),
- * and its notices in a foot bar below the scrolling column (see Notices).
+ * and its notices as small cards in its top-right corner (see Notices).
  */
 declare const Page: React.ForwardRefExoticComponent<PageProps & React.RefAttributes<HTMLDivElement>>;
 interface PageHeaderProps extends Omit<React.HTMLAttributes<HTMLElement>, "title"> {
@@ -2194,12 +2193,14 @@ interface BannerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"
     detail?: string;
     /** Shows the close (×) button: for notices the person can put away. */
     onDismiss?: () => void;
+    /** How many identical notices this card stands for (the stack collapses them, Notices). */
+    count?: number;
 }
 /**
  * THE inline notice (one pattern, every screen): the tone's icon, a semantic tint, one fixed
  * minimum height, the title and one line, trailing actions, and × when it can be put away.
  */
-declare function Banner({ tone, icon, title, message, actions, detail, onDismiss, className, ...props }: BannerProps): React.JSX.Element;
+declare function Banner({ tone, icon, title, message, actions, detail, onDismiss, count, className, ...props }: BannerProps): React.JSX.Element;
 interface ErrorBannerProps extends Omit<BannerProps, "tone" | "title" | "message" | "actions" | "detail" | "onDismiss"> {
     /** The failed action's error (e.g. `useDesktopAction().error`); nothing renders without one. */
     error: {

package/dist/desktop.js

@@ -1,4 +1,10 @@
 "use client";
+import {
+  NOTICE_STACK,
+  collapseNotices,
+  noticeKey,
+  visibleNotices
+} from "./chunk-4WSXAP24.js";
 import {
   AppRail,
   AppRailAvatar,
@@ -13,7 +19,7 @@ import {
   matchesOrganizationQuery,
   orderOrganizationsForPicker,
   organizationColor
-} from "./chunk-54UK6P7E.js";
+} from "./chunk-BCGNEWZM.js";
 import {
   Collapsible,
   CollapsibleContent,
@@ -35,7 +41,7 @@ import {
 import "./chunk-VQQ3O7J5.js";
 import {
   Tile
-} from "./chunk-6CDAHINE.js";
+} from "./chunk-UTADJKVR.js";
 import "./chunk-HKLIRHT2.js";
 import {
   Skeleton
@@ -65,7 +71,7 @@ import {
 } from "./chunk-OPF265PU.js";
 import {
   Button
-} from "./chunk-XTP6HOB6.js";
+} from "./chunk-6XNYYROM.js";
 import "./chunk-BD77DHUO.js";
 import "./chunk-BKCJUFD3.js";
 import {
@@ -1114,12 +1120,26 @@ var WIDTH = {
   wide: "max-w-none",
   full: "max-w-none"
 };
-function hasNotices(children) {
-  return React8.Children.toArray(children).some((c) => React8.isValidElement(c) && c.type === React8.Fragment ? hasNotices(c.props.children) : Boolean(c));
+function noticeElements(children) {
+  const out = [];
+  for (const c of React8.Children.toArray(children)) {
+    if (!React8.isValidElement(c)) continue;
+    if (c.type === React8.Fragment) out.push(...noticeElements(c.props.children));
+    else out.push(c);
+  }
+  return out;
+}
+function elementKey(el) {
+  const p = el.props;
+  if (typeof p.tone !== "string" || typeof p.title !== "string" && typeof p.title !== "number") return null;
+  return noticeKey(p.tone, p.title, p.message);
 }
+var NoticeStackContext = React8.createContext(false);
 function Notices({ children, className, onHeight, ...props }) {
   const stack = React8.useRef(null);
-  const drawn = hasNotices(children);
+  const [expanded, setExpanded] = React8.useState(false);
+  const elements = noticeElements(children);
+  const drawn = elements.length > 0;
   React8.useLayoutEffect(() => {
     const el = stack.current;
     if (!onHeight) return;
@@ -1135,7 +1155,27 @@ function Notices({ children, className, onHeight, ...props }) {
     };
   }, [onHeight, drawn]);
   if (!drawn) return null;
-  return /* @__PURE__ */ jsx11("div", { ref: stack, "data-slot": "notices", "aria-live": "polite", className: cn2("flex shrink-0 flex-col gap-2 empty:hidden", className), ...props, children });
+  const groups = collapseNotices(elements, elementKey);
+  const { shown, folded } = expanded ? { shown: groups, folded: 0 } : visibleNotices(groups);
+  return /* @__PURE__ */ jsx11(
+    "div",
+    {
+      ref: stack,
+      "data-slot": "notices",
+      "data-float": "",
+      "aria-live": "polite",
+      style: { width: `${NOTICE_STACK.widthRem}rem` },
+      className: cn2("flex flex-col items-stretch gap-2 empty:hidden", className),
+      ...props,
+      children: /* @__PURE__ */ jsxs7(NoticeStackContext.Provider, { value: true, children: [
+        folded > 0 ? /* @__PURE__ */ jsx11("button", { type: "button", "data-slot": "notices-more", className: "self-end rounded-full px-2 py-0.5", onClick: () => setExpanded(true), children: /* @__PURE__ */ jsxs7(Text, { variant: "caption", tone: "secondary", children: [
+          folded,
+          " more"
+        ] }) }) : null,
+        shown.map((g) => g.count > 1 ? React8.cloneElement(g.item, { count: g.count }) : g.item)
+      ] })
+    }
+  );
 }
 function NoticeSlot({ children, className, ...props }) {
   return /* @__PURE__ */ jsx11("div", { "data-slot": "notice-slot", "aria-live": "polite", className: cn2("h-16 shrink-0 overflow-hidden [&>*]:h-full [&>*]:overflow-hidden", className), ...props, children });
@@ -1143,14 +1183,14 @@ function NoticeSlot({ children, className, ...props }) {
 var Page = React8.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__ */ jsxs7("div", { "data-slot": "page-frame", className: "flex h-full min-w-0 flex-1 flex-col bg-content", children: [
+    /* @__PURE__ */ jsxs7("div", { "data-slot": "page-frame", className: "relative flex h-full min-w-0 flex-1 flex-col bg-content", children: [
       scopeBar ? /* @__PURE__ */ jsx11("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__ */ jsx11("div", { ref, "data-slot": "page", "data-flush": flush || void 0, className: cn2("min-h-0 flex-1 overflow-y-auto bg-content", className), ...props, children: /* @__PURE__ */ jsxs7("div", { className: cn2("flex w-full flex-col", flush ? "min-h-full" : "gap-5 px-5 pb-5 pt-3", WIDTH[width]), children: [
         header,
         children
       ] }) }),
       footer ? /* @__PURE__ */ jsx11("div", { "data-slot": "page-footer", className: "flex shrink-0 flex-col border-t border-separator bg-content", children: footer }) : null,
-      /* @__PURE__ */ jsx11(Notices, { "data-page-notices": "", className: "border-t border-separator px-5 py-3", children: notices })
+      /* @__PURE__ */ jsx11(Notices, { "data-page-notices": "", children: notices })
     ] })
   );
   if (!sidebar) return frame;
@@ -3085,22 +3125,31 @@ var BANNER_ICON = {
   danger: /* @__PURE__ */ jsx28(Glyph, { d: ALERT }),
   success: /* @__PURE__ */ jsx28(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] = React20.useState(false);
+  const floating = React20.useContext(NoticeStackContext);
   return /* @__PURE__ */ jsxs22(
     "div",
     {
       role: tone === "danger" || tone === "warning" ? "alert" : "status",
       "data-slot": "banner",
       "data-tone": tone,
-      className: cn2("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: cn2("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__ */ jsx28("span", { className: cn2("flex shrink-0 self-start pt-px [&_svg]:size-icon", BANNER_TONE[tone].icon), children: icon ?? BANNER_ICON[tone] }),
         /* @__PURE__ */ jsxs22("div", { "data-slot": "banner-body", className: "flex min-w-0 flex-1 flex-wrap items-center gap-x-3 gap-y-2", children: [
           /* @__PURE__ */ jsxs22("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__ */ jsx28(Text, { emphasized: true, children: title }),
-            message ? /* @__PURE__ */ jsx28(Text, { as: "p", tone: "secondary", selectable: true, children: message }) : null
+            /* @__PURE__ */ jsxs22(Text, { emphasized: true, className: floating ? "line-clamp-1" : void 0, children: [
+              title,
+              count && count > 1 ? /* @__PURE__ */ jsxs22("span", { "data-slot": "banner-count", className: "ml-1.5 font-normal text-label-secondary", children: [
+                "\xD7",
+                count
+              ] }) : null
+            ] }),
+            message ? /* @__PURE__ */ jsx28(Text, { as: "p", tone: "secondary", selectable: true, className: floating ? "line-clamp-2" : void 0, children: message }) : null
           ] }),
           actions || detail ? /* @__PURE__ */ jsxs22("div", { "data-slot": "banner-actions", className: "ml-auto flex shrink-0 items-center gap-2", children: [
             detail ? /* @__PURE__ */ jsx28(
@@ -4392,7 +4441,7 @@ function EndOfList({ onEndReached }) {
 import { jsx as jsx33, jsxs as jsxs27 } from "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__ */ jsxs27("div", { "data-slot": "split-view", className: cn2("flex h-full min-h-0 flex-col bg-content", className), ...props, children: [
+  return /* @__PURE__ */ jsxs27("div", { "data-slot": "split-view", className: cn2("relative flex h-full min-h-0 flex-col bg-content", className), ...props, children: [
     header ? /* @__PURE__ */ jsx33("div", { className: "shrink-0 px-5 empty:hidden", children: header }) : null,
     /* @__PURE__ */ jsxs27("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__ */ jsx33("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,
@@ -4403,7 +4452,7 @@ function SplitView({ header, notices, source, list, listHeader, listFooter, deta
       ] }),
       detail !== void 0 ? /* @__PURE__ */ jsx33("div", { "data-slot": "split-view-detail", className: cn2("flex min-w-80 flex-1 flex-col", detailScrolls ? "overflow-y-auto" : "min-h-0"), children: detail }) : null
     ] }),
-    /* @__PURE__ */ jsx33(Notices, { "data-page-notices": "", className: "border-t border-separator px-5 py-3", children: notices })
+    /* @__PURE__ */ jsx33(Notices, { "data-page-notices": "", children: notices })
   ] });
 }