@ai-matrx/design-system 0.86.353 → 0.86.355

package/dist/desktop.css

@@ -1309,12 +1309,15 @@
 [data-slot="notices"][data-float] > * {
   pointer-events: auto;
 }
+/* In a SplitView the stack floats over the viewer only, never over the list or its controls: its
+   left bound is the viewer's edge and its top the columns' top (split-view.tsx useNoticeBounds). */
+[data-slot="split-view"] > [data-slot="notices"][data-float] {
+  top: calc(12px + var(--split-notices-top, 0px));
+  max-width: calc(100% - 24px - var(--split-notices-left, 0px));
+}
+/* The card's material (background, blur, radius, shadow) is THE notice material, shared with the
+   web's toast: ../notice-material.css (imported by styles.css). */
 [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

@@ -1718,11 +1718,6 @@ interface SplitViewProps extends React.HTMLAttributes<HTMLDivElement> {
      */
     narrow?: "list" | "detail";
 }
-/**
- * Mail's, Messages' and Notes' window body: columns side by side under the unified toolbar, each
- * scrolling on its own, divided by hairlines — an optional source column, the list, and the viewer.
- * The columns fill the window's height; nothing scrolls the frame itself.
- */
 declare function SplitView({ header, notices, source, list, listHeader, listFooter, detail, listWidth, detailScrolls, narrow, className, ...props }: SplitViewProps): React.JSX.Element;
 
 interface ResizablePaneProps extends React.HTMLAttributes<HTMLDivElement> {

package/dist/desktop.d.ts

@@ -1718,11 +1718,6 @@ interface SplitViewProps extends React.HTMLAttributes<HTMLDivElement> {
      */
     narrow?: "list" | "detail";
 }
-/**
- * Mail's, Messages' and Notes' window body: columns side by side under the unified toolbar, each
- * scrolling on its own, divided by hairlines — an optional source column, the list, and the viewer.
- * The columns fill the window's height; nothing scrolls the frame itself.
- */
 declare function SplitView({ header, notices, source, list, listHeader, listFooter, detail, listWidth, detailScrolls, narrow, className, ...props }: SplitViewProps): React.JSX.Element;
 
 interface ResizablePaneProps extends React.HTMLAttributes<HTMLDivElement> {

package/dist/desktop.js

@@ -19,7 +19,7 @@ import {
   matchesOrganizationQuery,
   orderOrganizationsForPicker,
   organizationColor
-} from "./chunk-FLWSEDUW.js";
+} from "./chunk-ZMUPFGQO.js";
 import {
   Collapsible,
   CollapsibleContent,
@@ -42,7 +42,11 @@ import "./chunk-VQQ3O7J5.js";
 import {
   Tile
 } from "./chunk-GMNROZQJ.js";
-import "./chunk-HKLIRHT2.js";
+import {
+  describeError,
+  isRawErrorText,
+  peopleErrorSentence
+} from "./chunk-LJKF267O.js";
 import {
   Skeleton
 } from "./chunk-DRSBLHOF.js";
@@ -3072,44 +3076,6 @@ function PlaceStrip({ className, ...props }) {
 // src/desktop/state.tsx
 import * as React20 from "react";
 import { copyText } from "@ai-matrx/kit/clipboard";
-
-// src/desktop/errors.ts
-var RULES = [
-  { code: "ENOENT", test: /\b(spawn\s+\S+\s+)?ENOENT\b|command not found|no such file or directory/i, cause: "A program or file it needs isn't on this computer. Install it or update Matrx, then try again." },
-  { code: "EACCES", test: /\bEACCES\b|\bEPERM\b|permission denied|operation not permitted|not authori[sz]ed by the user/i, cause: "Matrx isn't allowed to do that. Grant access in System Settings \u203A Privacy & Security, then try again." },
-  { code: "EADDRINUSE", test: /\bEADDRINUSE\b|address already in use|port .* (is )?(already )?in use/i, cause: "Another program is already using that port. Stop it, or choose another port." },
-  { code: "ECONNREFUSED", test: /\bECONNREFUSED\b|connection refused/i, cause: "The service isn't answering. It may have stopped; start it again." },
-  { code: "OFFLINE", test: /\bENOTFOUND\b|\bEAI_AGAIN\b|\bENETUNREACH\b|getaddrinfo|network (is )?unreachable|failed to fetch|offline/i, cause: "Can't reach the internet. Check the connection and try again." },
-  { code: "TIMEOUT", test: /\bETIMEDOUT\b|timed? ?out|\bTIMEOUT\b|deadline exceeded/i, cause: "It took too long to answer. Try again in a moment." },
-  { code: "ENOSPC", test: /\bENOSPC\b|no space left/i, cause: "The disk is full. Free some space, then try again." },
-  { code: "ENOMEM", test: /\bENOMEM\b|out of memory|cannot allocate memory/i, cause: "The computer ran out of memory. Close something and try again." },
-  { code: "UNAUTHORIZED", test: /\b401\b|unauthori[sz]ed|invalid (api )?key|not signed in|jwt expired|session expired/i, cause: "You're signed out, or the key was refused. Sign in again." },
-  { code: "FORBIDDEN", test: /\b403\b|forbidden/i, cause: "This account isn't allowed to do that." },
-  { code: "NOT_FOUND", test: /\b404\b|not found/i, cause: "It isn't there any more. Refresh and try again." },
-  { code: "RATE_LIMIT", test: /\b429\b|rate.?limit|too many requests/i, cause: "Too many requests just now. Wait a moment and try again." },
-  { code: "SERVER", test: /\b5\d\d\b|internal server error|bad gateway|service unavailable/i, cause: "The server had a problem. Try again in a moment." },
-  { code: "EXITED", test: /exited with code|process exited|crashed|SIGKILL|SIGSEGV|SIGTERM/i, cause: "The service stopped unexpectedly. Start it again; Copy details if it keeps happening." }
-];
-var RAW = /\b[A-Z]{2,}[A-Z_]*\b|[\\/][\w.-]+[\\/]|\bat \S+ \(|\{|\}|errno|stack|undefined|null|\bspawn\b/;
-function rawText(error) {
-  if (error instanceof Error) return error.message || error.name;
-  if (typeof error === "string") return error;
-  if (error && typeof error === "object" && "message" in error && typeof error.message === "string") {
-    return error.message;
-  }
-  return "";
-}
-function describeError(error, fallback = "Something went wrong. Try again.") {
-  const detail = rawText(error).trim();
-  if (!detail) return { cause: fallback, detail: "" };
-  for (const rule of RULES) {
-    if (rule.test.test(detail)) return { cause: rule.cause, detail, code: rule.code };
-  }
-  if (!RAW.test(detail) && detail.length <= 160) return { cause: detail, detail: "" };
-  return { cause: fallback, detail };
-}
-
-// src/desktop/state.tsx
 import { jsx as jsx28, jsxs as jsxs22 } from "react/jsx-runtime";
 var EMPTY_ICON = /* @__PURE__ */ jsxs22("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.75, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: [
   /* @__PURE__ */ jsx28("path", { d: "M22 12h-6l-2 3h-4l-2-3H2" }),
@@ -3187,6 +3153,8 @@ var BANNER_ICON = {
 };
 function Banner({ tone, icon, title, message, actions, detail, onDismiss, count, className, ...props }) {
   const [copied, setCopied] = React20.useState(false);
+  if (typeof title === "string" && isRawErrorText(title)) title = peopleErrorSentence(null, title);
+  if (typeof message === "string" && isRawErrorText(message)) message = peopleErrorSentence(null, message);
   const registry = React20.useContext(NoticeStackContext);
   const floating = registry !== null;
   const id = React20.useId();
@@ -4513,15 +4481,47 @@ function EndOfList({ onEndReached }) {
 }
 
 // src/desktop/split-view.tsx
+import * as React25 from "react";
 import { jsx as jsx33, jsxs as jsxs27 } from "react/jsx-runtime";
 var LIST_WIDTH = { md: "w-70", lg: "w-85" };
+function useNoticeBounds(frame) {
+  React25.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__ */ jsxs27("div", { "data-slot": "split-view", className: cn2("relative flex h-full min-h-0 flex-col bg-content", className), ...props, children: [
+  const frame = React25.useRef(null);
+  useNoticeBounds(frame);
+  return /* @__PURE__ */ jsxs27("div", { ref: frame, "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,
       /* @__PURE__ */ jsxs27("div", { "data-slot": "split-view-list", className: cn2("flex flex-col", detail === void 0 ? "min-w-0 flex-1" : cn2("min-w-56 shrink border-r border-separator", LIST_WIDTH[listWidth])), children: [
-        listHeader ? /* @__PURE__ */ jsx33("div", { className: "flex shrink-0 flex-col gap-2 px-3 pb-2 pt-1", children: listHeader }) : null,
+        listHeader ? /* @__PURE__ */ jsx33("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__ */ jsx33("div", { className: "min-h-0 flex-1 overflow-y-auto", children: list }),
         listFooter ? /* @__PURE__ */ jsx33("div", { className: "flex shrink-0 items-center justify-center border-t border-separator px-3 py-3", children: listFooter }) : null
       ] }),
@@ -4532,7 +4532,7 @@ function SplitView({ header, notices, source, list, listHeader, listFooter, deta
 }
 
 // src/desktop/resizable-pane.tsx
-import * as React25 from "react";
+import * as React26 from "react";
 import { jsx as jsx34, jsxs as jsxs28 } from "react/jsx-runtime";
 var STEP = 16;
 var key = (name) => `mx-split:${name}`;
@@ -4586,16 +4586,16 @@ function ResizablePane({
   children,
   ...props
 }) {
-  const ref = React25.useRef(null);
-  const [size, setSize] = React25.useState(() => saved(autosaveName) ?? defaultSize);
-  const [ownState, setOwnState] = React25.useState(() => savedState(autosaveName) ?? (defaultCollapsed ? "collapsed" : "open"));
-  const [room, setRoom] = React25.useState(null);
+  const ref = React26.useRef(null);
+  const [size, setSize] = React26.useState(() => saved(autosaveName) ?? defaultSize);
+  const [ownState, setOwnState] = React26.useState(() => savedState(autosaveName) ?? (defaultCollapsed ? "collapsed" : "open"));
+  const [room, setRoom] = React26.useState(null);
   const collapsed = collapsedProp ?? ownState === "collapsed";
   const maximized = !collapsed && (maximizedProp ?? ownState === "maximized");
   const state = collapsed ? "collapsed" : maximized ? "maximized" : "open";
-  const live = React25.useRef({ state, onCollapsedChange, onMaximizedChange });
+  const live = React26.useRef({ state, onCollapsedChange, onMaximizedChange });
   live.current = { state, onCollapsedChange, onMaximizedChange };
-  const setState = React25.useCallback((next) => {
+  const setState = React26.useCallback((next) => {
     const { state: was, onCollapsedChange: oc, onMaximizedChange: om } = live.current;
     if (next === was) return;
     live.current = { ...live.current, state: next };
@@ -4603,8 +4603,8 @@ function ResizablePane({
     if (was === "collapsed" !== (next === "collapsed")) oc?.(next === "collapsed");
     if (was === "maximized" !== (next === "maximized")) om?.(next === "maximized");
   }, []);
-  React25.useEffect(() => saveState(autosaveName, state), [autosaveName, state]);
-  React25.useLayoutEffect(() => {
+  React26.useEffect(() => saveState(autosaveName, state), [autosaveName, state]);
+  React26.useLayoutEffect(() => {
     const el = ref.current;
     const frame = el?.closest('[data-slot="page-frame"], [data-slot="split-view"]') ?? el?.parentElement ?? null;
     if (!frame) return;
@@ -4870,7 +4870,7 @@ function CallButton({ icon, label, tone = "default", className, type = "button",
 }
 
 // src/desktop/media.tsx
-import * as React26 from "react";
+import * as React27 from "react";
 import { jsx as jsx37, jsxs as jsxs30 } from "react/jsx-runtime";
 function Waveform({ peaks, progress = 0, onSeek, className, "aria-label": label, ...props }) {
   const bars = peaks.length;
@@ -4926,7 +4926,7 @@ function peaksOf(samples, bars) {
   const loudest = Math.max(...out);
   return loudest > 0 ? out.map((p) => p / loudest) : out;
 }
-var RecordButton = React26.forwardRef(function RecordButton2({ recording = false, label, className, type = "button", ...props }, ref) {
+var RecordButton = React27.forwardRef(function RecordButton2({ recording = false, label, className, type = "button", ...props }, ref) {
   return /* @__PURE__ */ jsx37(
     "button",
     {
@@ -5039,7 +5039,7 @@ function SymbolTile({ children, color, size = "sm", className, ...props }) {
 }
 
 // src/desktop/library.tsx
-import * as React27 from "react";
+import * as React28 from "react";
 import { Fragment as Fragment15, jsx as jsx41, jsxs as jsxs33 } from "react/jsx-runtime";
 var TILE_COLOR = {
   red: "bg-system-red",
@@ -5089,7 +5089,7 @@ function MoreGlyph() {
   ] });
 }
 function ShortcutTile({ color, glyph, title, selected, onSelect, onOpen, run, menu, className, onKeyDown, ...props }) {
-  const [asking, setAsking] = React27.useState(null);
+  const [asking, setAsking] = React28.useState(null);
   const confirm = /* @__PURE__ */ jsx41(
     ConfirmDialog,
     {
@@ -5210,7 +5210,7 @@ function FavoriteTile({ title, icon, className, ...props }) {
 }
 
 // src/desktop/store.tsx
-import * as React28 from "react";
+import * as React29 from "react";
 import { jsx as jsx43, jsxs as jsxs35 } from "react/jsx-runtime";
 function ProgressRing({ value, label, className, ...props }) {
   const r = 10;
@@ -5302,7 +5302,7 @@ function GetButton({ state, name, onPress, onStop, className, disabled, ...props
   ] });
 }
 function StoreShelf({ title, subtitle, action, className, children, ...props }) {
-  const id = React28.useId();
+  const id = React29.useId();
   return /* @__PURE__ */ jsxs35("section", { "aria-labelledby": id, "data-slot": "store-shelf", className: cn2("flex flex-col gap-2", className), ...props, children: [
     /* @__PURE__ */ jsxs35("header", { className: "flex items-end gap-3 border-t border-separator pt-3", children: [
       /* @__PURE__ */ jsxs35("span", { className: "flex min-w-0 flex-1 flex-col", children: [
@@ -5370,7 +5370,7 @@ function InfoStrip({ items, className, ...props }) {
 }
 
 // src/desktop/credentials.tsx
-import * as React29 from "react";
+import * as React30 from "react";
 import { formatDurationMs, groupCode } from "@ai-matrx/kit/format";
 import { jsx as jsx44, jsxs as jsxs36 } from "react/jsx-runtime";
 function CredentialHeader({ icon, title, subtitle, actions, className, ...props }) {
@@ -5450,15 +5450,15 @@ function CodeTimer({ fraction, label, className }) {
   ] });
 }
 function TimedCode({ code, validUntilMs, periodSeconds, now = Date.now, onExpire, className, ...props }) {
-  const [at, setAt] = React29.useState(() => now());
-  const expired = React29.useRef(false);
-  React29.useEffect(() => {
+  const [at, setAt] = React30.useState(() => now());
+  const expired = React30.useRef(false);
+  React30.useEffect(() => {
     expired.current = false;
     const id = setInterval(() => setAt(now()), 1e3);
     return () => clearInterval(id);
   }, [validUntilMs, now]);
   const left = Math.max(0, validUntilMs - at);
-  React29.useEffect(() => {
+  React30.useEffect(() => {
     if (left === 0 && !expired.current) {
       expired.current = true;
       onExpire?.();
@@ -5684,10 +5684,10 @@ import { formatCount, formatRelativeTime as formatRelativeTime2 } from "@ai-matr
 
 // src/desktop/popover.tsx
 import * as PopoverPrimitive from "@radix-ui/react-popover";
-import * as React30 from "react";
+import * as React31 from "react";
 import { jsx as jsx46, jsxs as jsxs38 } from "react/jsx-runtime";
 var POPOVER_ARROW = { width: 18, height: 9 };
-var PopoverContent2 = React30.forwardRef(
+var PopoverContent2 = React31.forwardRef(
   ({ arrow = true, sideOffset, className, children, ...props }, ref) => /* @__PURE__ */ jsxs38(
     PopoverContent,
     {
@@ -5728,7 +5728,7 @@ function ListRow({ icon, title, secondary, accessory, onSelect, selected = false
 }
 
 // src/desktop/info-hint.tsx
-import * as React31 from "react";
+import * as React32 from "react";
 import { jsx as jsx48, jsxs as jsxs40 } from "react/jsx-runtime";
 var INFO_HINT_MAX = 140;
 function infoHintText(label, text) {
@@ -5744,7 +5744,7 @@ function InfoGlyph2() {
   ] });
 }
 function InfoHint({ label, text, side = "top", className }) {
-  const shown = React31.useMemo(() => infoHintText(label, text), [label, text]);
+  const shown = React32.useMemo(() => infoHintText(label, text), [label, text]);
   return /* @__PURE__ */ jsxs40(Popover, { children: [
     /* @__PURE__ */ jsx48(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx48(
       Button,
@@ -5762,7 +5762,7 @@ function InfoHint({ label, text, side = "top", className }) {
 }
 
 // src/desktop/organization-picker.tsx
-import * as React32 from "react";
+import * as React33 from "react";
 import { jsx as jsx49, jsxs as jsxs41 } from "react/jsx-runtime";
 var ROLE = { owner: "Owner", admin: "Admin", member: "Member" };
 function roleLabel(role) {
@@ -5777,9 +5777,9 @@ function OrganizationPickerSheet({
   onSwitch,
   onToggleFavorite
 }) {
-  const [query, setQuery] = React32.useState("");
-  const [chosen, setChosen] = React32.useState(activeOrganizationId);
-  React32.useEffect(() => {
+  const [query, setQuery] = React33.useState("");
+  const [chosen, setChosen] = React33.useState(activeOrganizationId);
+  React33.useEffect(() => {
     if (open) {
       setQuery("");
       setChosen(activeOrganizationId);