@ai-matrx/design-system 0.86.356 → 0.86.358

package/dist/menu-look.js

@@ -34,10 +34,10 @@ import {
   MenuLookSubContent,
   MenuLookSubTrigger,
   menuLookItemClass
-} from "./chunk-T4D7WAV7.js";
+} from "./chunk-42GFQMLA.js";
 import "./chunk-HEFTQUJ5.js";
 import "./chunk-OPF265PU.js";
-import "./chunk-X6ZRHJQP.js";
+import "./chunk-T57DLONB.js";
 import "./chunk-BNXNIN2S.js";
 import "./chunk-FXXSZNER.js";
 import "./chunk-DGNHZBJY.js";

package/dist/notice-stack.cjs

@@ -22,6 +22,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var notice_stack_exports = {};
 __export(notice_stack_exports, {
   NOTICE_STACK: () => NOTICE_STACK,
+  NOTICE_TEXT_BUDGET: () => NOTICE_TEXT_BUDGET,
   collapseNotices: () => collapseNotices,
   noticeKey: () => noticeKey,
   noticeLifetimeMs: () => noticeLifetimeMs,
@@ -40,6 +41,7 @@ var NOTICE_STACK = {
   /** The card's width: small, never the window's. */
   widthRem: 22
 };
+var NOTICE_TEXT_BUDGET = { titleChars: 24, lineChars: 40 };
 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)}`;

package/dist/notice-stack.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/notice-stack.ts"],"sourcesContent":["/**\n * @ai-matrx/design-system/notice-stack — THE ONE NOTICE LOOK AND STACK RULE, for the web and Matrx 2.\n *\n * Arman, 2026-10-23, looking at two full-width red bars across Matrx 2 Cloud Chat: \"Let's eliminate\n * this terrible pattern of having giant errors that shit the entire ui. If we're going to have a\n * place for errors, it should be a small something that resembles errors from a normal macos\".\n *\n * Champion: the macOS notification banner. A small rounded card of translucent material in the\n * window's TOP-RIGHT corner (where macOS puts every notification, so the eye already looks there;\n * the bottom of our windows holds the composer and the list's foot, which a notice must not sit on),\n * the tone's icon, a one-line title, an optional second line, at most one action, and ×.\n *\n * The stack rule, the same on both hosts:\n *   - identical notices (same tone, title and line) collapse into ONE card with a count;\n *   - at most 3 cards show; the rest fold into \"N more\";\n *   - info and success go after NOTICE_STACK.infoMs; errors and warnings stay until dismissed\n *     or until NOTICE_STACK.errorMs (long, so a notice nobody saw does not sit there for ever).\n *\n * The desktop renders it through `Notices` + `Banner` (desktop/layout.tsx, desktop/state.tsx); the\n * web through its one sonner Toaster (matrx-frontend components/ui/sonner.tsx), which reads these\n * constants and keys every toast with `noticeKey` so the same notice never stacks twice.\n */\n\nexport const NOTICE_STACK = {\n  /** The corner every notice floats in. */\n  corner: \"top-right\",\n  /** Cards shown at once; the rest fold into \"N more\". */\n  maxVisible: 3,\n  /** Info and success: gone after this long. */\n  infoMs: 4000,\n  /** Errors and warnings: stay until dismissed, or this long at most. */\n  errorMs: 30000,\n  /** The card's width: small, never the window's. */\n  widthRem: 22,\n} as const;\n\nexport type NoticeStackTone = \"neutral\" | \"info\" | \"warning\" | \"danger\" | \"success\";\n\n/** The identity two notices share when they say the same thing (tone, title, line). */\nexport function noticeKey(tone: string, title: unknown, message?: unknown): string {\n  const text = (v: unknown): string => (typeof v === \"string\" || typeof v === \"number\" ? String(v).trim() : \"\");\n  return `${tone}\\u0000${text(title)}\\u0000${text(message)}`;\n}\n\nexport interface CollapsedNotice<T> {\n  /** The latest notice of the group (its dismiss and action are the live ones). */\n  readonly item: T;\n  /** Every notice the group holds, oldest first. */\n  readonly members: readonly T[];\n  /** How many identical notices it stands for. */\n  readonly count: number;\n}\n\n/**\n * Identical notices become one with a count, in the order each first appeared. A notice whose key\n * is null (a rich one that says nothing comparable) stands alone.\n */\nexport function collapseNotices<T>(items: readonly T[], keyOf: (item: T) => string | null): CollapsedNotice<T>[] {\n  const groups: { key: string | null; members: T[] }[] = [];\n  const byKey = new Map<string, { key: string | null; members: T[] }>();\n  for (const item of items) {\n    const key = keyOf(item);\n    const found = key !== null ? byKey.get(key) : undefined;\n    if (found) {\n      found.members.push(item);\n      continue;\n    }\n    const group = { key, members: [item] };\n    groups.push(group);\n    if (key !== null) byKey.set(key, group);\n  }\n  return groups.map((g) => ({ item: g.members[g.members.length - 1] as T, members: g.members, count: g.members.length }));\n}\n\n/** The cards on screen and how many fold away (the newest show). */\nexport function visibleNotices<T>(groups: readonly T[], max: number = NOTICE_STACK.maxVisible): { shown: T[]; folded: number } {\n  if (groups.length <= max) return { shown: [...groups], folded: 0 };\n  return { shown: groups.slice(groups.length - max), folded: groups.length - max };\n}\n\n/** How long a notice of this tone stays (ms; Infinity never happens: errors cap at errorMs). */\nexport function noticeLifetimeMs(tone: NoticeStackTone | \"error\"): number {\n  return tone === \"danger\" || tone === \"warning\" || tone === \"error\" ? NOTICE_STACK.errorMs : NOTICE_STACK.infoMs;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAuBO,IAAM,eAAe;AAAA;AAAA,EAE1B,QAAQ;AAAA;AAAA,EAER,YAAY;AAAA;AAAA,EAEZ,QAAQ;AAAA;AAAA,EAER,SAAS;AAAA;AAAA,EAET,UAAU;AACZ;AAKO,SAAS,UAAU,MAAc,OAAgB,SAA2B;AACjF,QAAM,OAAO,CAAC,MAAwB,OAAO,MAAM,YAAY,OAAO,MAAM,WAAW,OAAO,CAAC,EAAE,KAAK,IAAI;AAC1G,SAAO,GAAG,IAAI,KAAS,KAAK,KAAK,CAAC,KAAS,KAAK,OAAO,CAAC;AAC1D;AAeO,SAAS,gBAAmB,OAAqB,OAAyD;AAC/G,QAAM,SAAiD,CAAC;AACxD,QAAM,QAAQ,oBAAI,IAAkD;AACpE,aAAW,QAAQ,OAAO;AACxB,UAAM,MAAM,MAAM,IAAI;AACtB,UAAM,QAAQ,QAAQ,OAAO,MAAM,IAAI,GAAG,IAAI;AAC9C,QAAI,OAAO;AACT,YAAM,QAAQ,KAAK,IAAI;AACvB;AAAA,IACF;AACA,UAAM,QAAQ,EAAE,KAAK,SAAS,CAAC,IAAI,EAAE;AACrC,WAAO,KAAK,KAAK;AACjB,QAAI,QAAQ,KAAM,OAAM,IAAI,KAAK,KAAK;AAAA,EACxC;AACA,SAAO,OAAO,IAAI,CAAC,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,SAAS,CAAC,GAAQ,SAAS,EAAE,SAAS,OAAO,EAAE,QAAQ,OAAO,EAAE;AACxH;AAGO,SAAS,eAAkB,QAAsB,MAAc,aAAa,YAA4C;AAC7H,MAAI,OAAO,UAAU,IAAK,QAAO,EAAE,OAAO,CAAC,GAAG,MAAM,GAAG,QAAQ,EAAE;AACjE,SAAO,EAAE,OAAO,OAAO,MAAM,OAAO,SAAS,GAAG,GAAG,QAAQ,OAAO,SAAS,IAAI;AACjF;AAGO,SAAS,iBAAiB,MAAyC;AACxE,SAAO,SAAS,YAAY,SAAS,aAAa,SAAS,UAAU,aAAa,UAAU,aAAa;AAC3G;","names":[]}
+{"version":3,"sources":["../src/notice-stack.ts"],"sourcesContent":["/**\n * @ai-matrx/design-system/notice-stack — THE ONE NOTICE LOOK AND STACK RULE, for the web and Matrx 2.\n *\n * Arman, 2026-10-23, looking at two full-width red bars across Matrx 2 Cloud Chat: \"Let's eliminate\n * this terrible pattern of having giant errors that shit the entire ui. If we're going to have a\n * place for errors, it should be a small something that resembles errors from a normal macos\".\n *\n * Champion: the macOS notification banner. A small rounded card of translucent material in the\n * window's TOP-RIGHT corner (where macOS puts every notification, so the eye already looks there;\n * the bottom of our windows holds the composer and the list's foot, which a notice must not sit on),\n * the tone's icon, a one-line title, an optional second line, at most one action, and ×.\n *\n * The stack rule, the same on both hosts:\n *   - identical notices (same tone, title and line) collapse into ONE card with a count;\n *   - at most 3 cards show; the rest fold into \"N more\";\n *   - info and success go after NOTICE_STACK.infoMs; errors and warnings stay until dismissed\n *     or until NOTICE_STACK.errorMs (long, so a notice nobody saw does not sit there for ever).\n *\n * The desktop renders it through `Notices` + `Banner` (desktop/layout.tsx, desktop/state.tsx); the\n * web through its one sonner Toaster (matrx-frontend components/ui/sonner.tsx), which reads these\n * constants and keys every toast with `noticeKey` so the same notice never stacks twice.\n */\n\nexport const NOTICE_STACK = {\n  /** The corner every notice floats in. */\n  corner: \"top-right\",\n  /** Cards shown at once; the rest fold into \"N more\". */\n  maxVisible: 3,\n  /** Info and success: gone after this long. */\n  infoMs: 4000,\n  /** Errors and warnings: stay until dismissed, or this long at most. */\n  errorMs: 30000,\n  /** The card's width: small, never the window's. */\n  widthRem: 22,\n} as const;\n\n/**\n * How much a card can SAY with nothing cut by \"…\" at the smallest window (900 × 560, Matrx 2 Cloud\n * Chat: the card is 324 px wide over the viewer, and an action such as Retry shares the row, leaving\n * ~180 px of text): the title is one line, the line under it at most two short ones. Measured\n * 2026-10-24 (\"Your change was not saved …\" / \"Check the connection and tr…\"). In-app text is layout.\n */\nexport const NOTICE_TEXT_BUDGET = { titleChars: 24, lineChars: 40 } as const;\n\nexport type NoticeStackTone = \"neutral\" | \"info\" | \"warning\" | \"danger\" | \"success\";\n\n/** The identity two notices share when they say the same thing (tone, title, line). */\nexport function noticeKey(tone: string, title: unknown, message?: unknown): string {\n  const text = (v: unknown): string => (typeof v === \"string\" || typeof v === \"number\" ? String(v).trim() : \"\");\n  return `${tone}\\u0000${text(title)}\\u0000${text(message)}`;\n}\n\nexport interface CollapsedNotice<T> {\n  /** The latest notice of the group (its dismiss and action are the live ones). */\n  readonly item: T;\n  /** Every notice the group holds, oldest first. */\n  readonly members: readonly T[];\n  /** How many identical notices it stands for. */\n  readonly count: number;\n}\n\n/**\n * Identical notices become one with a count, in the order each first appeared. A notice whose key\n * is null (a rich one that says nothing comparable) stands alone.\n */\nexport function collapseNotices<T>(items: readonly T[], keyOf: (item: T) => string | null): CollapsedNotice<T>[] {\n  const groups: { key: string | null; members: T[] }[] = [];\n  const byKey = new Map<string, { key: string | null; members: T[] }>();\n  for (const item of items) {\n    const key = keyOf(item);\n    const found = key !== null ? byKey.get(key) : undefined;\n    if (found) {\n      found.members.push(item);\n      continue;\n    }\n    const group = { key, members: [item] };\n    groups.push(group);\n    if (key !== null) byKey.set(key, group);\n  }\n  return groups.map((g) => ({ item: g.members[g.members.length - 1] as T, members: g.members, count: g.members.length }));\n}\n\n/** The cards on screen and how many fold away (the newest show). */\nexport function visibleNotices<T>(groups: readonly T[], max: number = NOTICE_STACK.maxVisible): { shown: T[]; folded: number } {\n  if (groups.length <= max) return { shown: [...groups], folded: 0 };\n  return { shown: groups.slice(groups.length - max), folded: groups.length - max };\n}\n\n/** How long a notice of this tone stays (ms; Infinity never happens: errors cap at errorMs). */\nexport function noticeLifetimeMs(tone: NoticeStackTone | \"error\"): number {\n  return tone === \"danger\" || tone === \"warning\" || tone === \"error\" ? NOTICE_STACK.errorMs : NOTICE_STACK.infoMs;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAuBO,IAAM,eAAe;AAAA;AAAA,EAE1B,QAAQ;AAAA;AAAA,EAER,YAAY;AAAA;AAAA,EAEZ,QAAQ;AAAA;AAAA,EAER,SAAS;AAAA;AAAA,EAET,UAAU;AACZ;AAQO,IAAM,qBAAqB,EAAE,YAAY,IAAI,WAAW,GAAG;AAK3D,SAAS,UAAU,MAAc,OAAgB,SAA2B;AACjF,QAAM,OAAO,CAAC,MAAwB,OAAO,MAAM,YAAY,OAAO,MAAM,WAAW,OAAO,CAAC,EAAE,KAAK,IAAI;AAC1G,SAAO,GAAG,IAAI,KAAS,KAAK,KAAK,CAAC,KAAS,KAAK,OAAO,CAAC;AAC1D;AAeO,SAAS,gBAAmB,OAAqB,OAAyD;AAC/G,QAAM,SAAiD,CAAC;AACxD,QAAM,QAAQ,oBAAI,IAAkD;AACpE,aAAW,QAAQ,OAAO;AACxB,UAAM,MAAM,MAAM,IAAI;AACtB,UAAM,QAAQ,QAAQ,OAAO,MAAM,IAAI,GAAG,IAAI;AAC9C,QAAI,OAAO;AACT,YAAM,QAAQ,KAAK,IAAI;AACvB;AAAA,IACF;AACA,UAAM,QAAQ,EAAE,KAAK,SAAS,CAAC,IAAI,EAAE;AACrC,WAAO,KAAK,KAAK;AACjB,QAAI,QAAQ,KAAM,OAAM,IAAI,KAAK,KAAK;AAAA,EACxC;AACA,SAAO,OAAO,IAAI,CAAC,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,SAAS,CAAC,GAAQ,SAAS,EAAE,SAAS,OAAO,EAAE,QAAQ,OAAO,EAAE;AACxH;AAGO,SAAS,eAAkB,QAAsB,MAAc,aAAa,YAA4C;AAC7H,MAAI,OAAO,UAAU,IAAK,QAAO,EAAE,OAAO,CAAC,GAAG,MAAM,GAAG,QAAQ,EAAE;AACjE,SAAO,EAAE,OAAO,OAAO,MAAM,OAAO,SAAS,GAAG,GAAG,QAAQ,OAAO,SAAS,IAAI;AACjF;AAGO,SAAS,iBAAiB,MAAyC;AACxE,SAAO,SAAS,YAAY,SAAS,aAAa,SAAS,UAAU,aAAa,UAAU,aAAa;AAC3G;","names":[]}

package/dist/notice-stack.d.cts

@@ -32,6 +32,16 @@ declare const NOTICE_STACK: {
     /** The card's width: small, never the window's. */
     readonly widthRem: 22;
 };
+/**
+ * How much a card can SAY with nothing cut by "…" at the smallest window (900 × 560, Matrx 2 Cloud
+ * Chat: the card is 324 px wide over the viewer, and an action such as Retry shares the row, leaving
+ * ~180 px of text): the title is one line, the line under it at most two short ones. Measured
+ * 2026-10-24 ("Your change was not saved …" / "Check the connection and tr…"). In-app text is layout.
+ */
+declare const NOTICE_TEXT_BUDGET: {
+    readonly titleChars: 24;
+    readonly lineChars: 40;
+};
 type NoticeStackTone = "neutral" | "info" | "warning" | "danger" | "success";
 /** The identity two notices share when they say the same thing (tone, title, line). */
 declare function noticeKey(tone: string, title: unknown, message?: unknown): string;
@@ -56,5 +66,5 @@ declare function visibleNotices<T>(groups: readonly T[], max?: number): {
 /** How long a notice of this tone stays (ms; Infinity never happens: errors cap at errorMs). */
 declare function noticeLifetimeMs(tone: NoticeStackTone | "error"): number;
 
-export { NOTICE_STACK, collapseNotices, noticeKey, noticeLifetimeMs, visibleNotices };
+export { NOTICE_STACK, NOTICE_TEXT_BUDGET, collapseNotices, noticeKey, noticeLifetimeMs, visibleNotices };
 export type { CollapsedNotice, NoticeStackTone };

package/dist/notice-stack.d.ts

@@ -32,6 +32,16 @@ declare const NOTICE_STACK: {
     /** The card's width: small, never the window's. */
     readonly widthRem: 22;
 };
+/**
+ * How much a card can SAY with nothing cut by "…" at the smallest window (900 × 560, Matrx 2 Cloud
+ * Chat: the card is 324 px wide over the viewer, and an action such as Retry shares the row, leaving
+ * ~180 px of text): the title is one line, the line under it at most two short ones. Measured
+ * 2026-10-24 ("Your change was not saved …" / "Check the connection and tr…"). In-app text is layout.
+ */
+declare const NOTICE_TEXT_BUDGET: {
+    readonly titleChars: 24;
+    readonly lineChars: 40;
+};
 type NoticeStackTone = "neutral" | "info" | "warning" | "danger" | "success";
 /** The identity two notices share when they say the same thing (tone, title, line). */
 declare function noticeKey(tone: string, title: unknown, message?: unknown): string;
@@ -56,5 +66,5 @@ declare function visibleNotices<T>(groups: readonly T[], max?: number): {
 /** How long a notice of this tone stays (ms; Infinity never happens: errors cap at errorMs). */
 declare function noticeLifetimeMs(tone: NoticeStackTone | "error"): number;
 
-export { NOTICE_STACK, collapseNotices, noticeKey, noticeLifetimeMs, visibleNotices };
+export { NOTICE_STACK, NOTICE_TEXT_BUDGET, collapseNotices, noticeKey, noticeLifetimeMs, visibleNotices };
 export type { CollapsedNotice, NoticeStackTone };

package/dist/notice-stack.js

@@ -1,13 +1,15 @@
 "use client";
 import {
   NOTICE_STACK,
+  NOTICE_TEXT_BUDGET,
   collapseNotices,
   noticeKey,
   noticeLifetimeMs,
   visibleNotices
-} from "./chunk-4WSXAP24.js";
+} from "./chunk-BB5LA7FQ.js";
 export {
   NOTICE_STACK,
+  NOTICE_TEXT_BUDGET,
   collapseNotices,
   noticeKey,
   noticeLifetimeMs,

package/dist/record-list.cjs

@@ -340,6 +340,16 @@ function errorSentenceOf(error) {
 }
 var TIMED_OUT_SENTENCE = "That took too long. Nothing was lost; try again.";
 var FALLBACK_ERROR_SENTENCE = "Something went wrong. Try again.";
+var CARD_ERROR_LINE = {
+  OFFLINE: "No connection",
+  TIMEOUT: "Took too long. Nothing was lost.",
+  UNAUTHORIZED: "Signed out. Sign in again.",
+  FORBIDDEN: "Not allowed for this account",
+  NOT_FOUND: "Not found. Refresh and retry.",
+  RATE_LIMIT: "Too many requests. Wait a moment.",
+  SERVER: "Server problem. Try again soon.",
+  FALLBACK: "Something went wrong"
+};
 function isTimedOutError(error, message, code) {
   if (code === "57014" || code === "timed_out") return true;
   if (error && typeof error === "object") {
@@ -357,8 +367,9 @@ var ANY_HOST_CODES = /* @__PURE__ */ new Set(["OFFLINE", "TIMEOUT", "UNAUTHORIZE
 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 peopleErrorSentence(error, message, options = {}) {
-  if (isTimedOutError(error, message, options.code)) return TIMED_OUT_SENTENCE;
-  const fallback = options.fallback ?? FALLBACK_ERROR_SENTENCE;
+  const card = options.card === true;
+  if (isTimedOutError(error, message, options.code)) return card ? CARD_ERROR_LINE.TIMEOUT : TIMED_OUT_SENTENCE;
+  const fallback = options.fallback ?? (card ? CARD_ERROR_LINE.FALLBACK : FALLBACK_ERROR_SENTENCE);
   const raw = message?.trim() || errorSentenceOf(error).trim();
   if (!raw) return fallback;
   let text = raw;
@@ -366,7 +377,8 @@ function peopleErrorSentence(error, message, options = {}) {
   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;
+    if (!said.code || !ANY_HOST_CODES.has(said.code)) return fallback;
+    return card ? CARD_ERROR_LINE[said.code] : said.cause;
   }
   return text;
 }
@@ -1035,7 +1047,7 @@ var DropdownMenuSubTrigger = React7.forwardRef(({ className, inset, children, ..
 DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
 var DropdownMenuSubContent = React7.forwardRef(({ className, container, surface = "default", sideOffset = 2, alignOffset = -4, collisionPadding, onFocusOutside, children, ...props }, ref) => {
   const portalContainer = usePortalContainer(container);
-  const [bottomClearance] = React7.useState(readBottomClearance);
+  const [bottomClearance] = React7.useState(sharedBottomClearance);
   const padding = menuCollisionPadding(collisionPadding ?? 8, 0, bottomClearance);
   const nested = useNestedSubmenuPlacement(ref, padding);
   const keep = useSubmenuSurvivesParentPanelFocus(nested.ref, onFocusOutside);
@@ -1057,18 +1069,27 @@ var DropdownMenuSubContent = React7.forwardRef(({ className, container, surface
   ) });
 });
 DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
-function readTopClearance() {
-  return readClearance("var(--matrx-floating-top-clearance, var(--shell-header-h, 0px))");
-}
-function readBottomClearance() {
-  return readClearance("var(--matrx-floating-clearance, 0px)");
-}
 function menuCollisionPadding(caller, top, bottom, fallback = 0) {
   const side = (key) => typeof caller === "number" ? caller : caller?.[key] ?? fallback;
   return { top: Math.max(side("top"), top), right: side("right"), bottom: Math.max(side("bottom"), bottom), left: side("left") };
 }
-function readClearance(height) {
+var CLEARANCE_REUSE_MS = 500;
+var clearanceCache = /* @__PURE__ */ new Map();
+var clock = () => typeof performance !== "undefined" ? performance.now() : Date.now();
+function readClearance(height, shared = false) {
   if (typeof document === "undefined") return 0;
+  const now = clock();
+  const held = shared ? clearanceCache.get(height) : void 0;
+  if (held && now - held.at < CLEARANCE_REUSE_MS) return held.px;
+  const px = measureClearance(height);
+  clearanceCache.set(height, { px, at: now });
+  return px;
+}
+var TOP_CLEARANCE = "var(--matrx-floating-top-clearance, var(--shell-header-h, 0px))";
+var BOTTOM_CLEARANCE = "var(--matrx-floating-clearance, 0px)";
+var sharedTopClearance = () => readClearance(TOP_CLEARANCE, true);
+var sharedBottomClearance = () => readClearance(BOTTOM_CLEARANCE, true);
+function measureClearance(height) {
   const probe = document.createElement("div");
   probe.style.cssText = `position:fixed;top:0;left:0;width:0;visibility:hidden;pointer-events:none;height:${height}`;
   document.body.appendChild(probe);
@@ -1078,8 +1099,8 @@ function readClearance(height) {
 }
 var DropdownMenuContent = React7.forwardRef(({ className, sideOffset = 4, container, surface = "default", children, onCloseAutoFocus, collisionPadding, ...props }, ref) => {
   const portalContainer = usePortalContainer(container);
-  const [topClearance] = React7.useState(readTopClearance);
-  const [bottomClearance] = React7.useState(readBottomClearance);
+  const [topClearance] = React7.useState(sharedTopClearance);
+  const [bottomClearance] = React7.useState(sharedBottomClearance);
   const edges = useMenuScrollEdges(ref);
   return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DropdownMenuPrimitive.Portal, { container: portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
     DropdownMenuPrimitive.Content,