@mt-gloss/ui 0.1.123 → 0.1.124

package/composites-panels.js

@@ -1,25 +1,25 @@
-import { u as O, h as he, j as Y, g as we, S as Pe, b as Te, k as Ae } from "./COMMITS-C1VHNgld.js";
-import { C as zt, N as Ht, o as Ut, d as Bt, p as Yt, l as Vt, c as Kt, n as qt, P as Qt, m as Wt, f as Gt, i as jt, r as Zt, e as Xt } from "./COMMITS-C1VHNgld.js";
-import { jsx as n, jsxs as f, Fragment as V } from "react/jsx-runtime";
-import H, { useState as A, useRef as K, createContext as fe, useContext as ge, useMemo as le, useEffect as F, useCallback as D, useLayoutEffect as xe } from "react";
-import { useSensors as ke, useSensor as ie, PointerSensor as De, KeyboardSensor as Le, DndContext as Oe, closestCenter as Me } from "@dnd-kit/core";
+import { u as M, g as he, h as Y, f as we, S as Te, b as Pe, j as Ae } from "./COMMITS-DlJB1KcF.js";
+import { C as zt, N as Ht, n as Ut, o as Bt, k as Yt, c as Vt, m as Kt, P as qt, l as Qt, e as Wt, i as Gt, r as jt, d as Zt } from "./COMMITS-DlJB1KcF.js";
+import { jsx as a, jsxs as f, Fragment as V } from "react/jsx-runtime";
+import H, { useState as A, useRef as K, createContext as fe, useContext as ge, useMemo as le, useEffect as F, useCallback as L, useLayoutEffect as xe } from "react";
+import { useSensors as ke, useSensor as ie, PointerSensor as De, KeyboardSensor as Le, DndContext as Me, closestCenter as Oe } from "@dnd-kit/core";
 import { sortableKeyboardCoordinates as Ie, SortableContext as Re, horizontalListSortingStrategy as $e, arrayMove as Fe, useSortable as ze } from "@dnd-kit/sortable";
 import { CSS as He } from "@dnd-kit/utilities";
 import { M as ce } from "./MetricCard-Cyoxhb_S.js";
 function wt() {
-  const e = O();
+  const e = M();
   if (e?.state.activePanelId !== "settings") return null;
   const t = e.state.activeTrigger;
   return t?.kind === "card-overflow" ? t.cardId : null;
 }
 function Ue({ span: e, rotating: t = !0, children: r }) {
-  const l = ["clone-card", `span-${e}`, t ? "rotating" : ""].filter(Boolean).join(" "), a = r != null ? "full" : "fallback";
-  return /* @__PURE__ */ n("div", { className: l, "data-clone-fidelity": a, children: r });
+  const l = ["clone-card", `span-${e}`, t ? "rotating" : ""].filter(Boolean).join(" "), n = r != null ? "full" : "fallback";
+  return /* @__PURE__ */ a("div", { className: l, "data-clone-fidelity": n, children: r });
 }
-function Pt({ primary: e, secondary: t }) {
+function Tt({ primary: e, secondary: t }) {
   return /* @__PURE__ */ f("div", { className: "gloss-panel-chrome-v2__footer-msg", children: [
-    /* @__PURE__ */ n("span", { className: "gloss-panel-chrome-v2__footer-msg-primary", children: e }),
-    t != null && /* @__PURE__ */ n("span", { className: "gloss-panel-chrome-v2__footer-msg-secondary", children: t })
+    /* @__PURE__ */ a("span", { className: "gloss-panel-chrome-v2__footer-msg-primary", children: e }),
+    t != null && /* @__PURE__ */ a("span", { className: "gloss-panel-chrome-v2__footer-msg-secondary", children: t })
   ] });
 }
 function Be({
@@ -28,14 +28,14 @@ function Be({
   enabled: r = !1,
   onToggleEnabled: l
 }) {
-  const a = "settings-threshold-enabled";
+  const n = "settings-threshold-enabled";
   return /* @__PURE__ */ f("div", { className: "settings-shell__field settings-shell__field--threshold", children: [
     /* @__PURE__ */ f("div", { className: "settings-shell__toggle-row", children: [
-      /* @__PURE__ */ n("label", { htmlFor: a, className: "settings-shell__toggle-label", children: "Show threshold indicator" }),
-      /* @__PURE__ */ n(
+      /* @__PURE__ */ a("label", { htmlFor: n, className: "settings-shell__toggle-label", children: "Show threshold indicator" }),
+      /* @__PURE__ */ a(
         "input",
         {
-          id: a,
+          id: n,
           type: "checkbox",
           role: "switch",
           "aria-label": "Enable threshold indicator",
@@ -47,9 +47,9 @@ function Be({
       )
     ] }),
     r ? /* @__PURE__ */ f(V, { children: [
-      /* @__PURE__ */ n("span", { className: "settings-shell__label", "aria-hidden": "true", children: "Alert level (%)" }),
+      /* @__PURE__ */ a("span", { className: "settings-shell__label", "aria-hidden": "true", children: "Alert level (%)" }),
       /* @__PURE__ */ f("div", { className: "settings-shell__slider-row", children: [
-        /* @__PURE__ */ n(
+        /* @__PURE__ */ a(
           "input",
           {
             id: "settings-threshold-input",
@@ -70,14 +70,14 @@ function Be({
           "%"
         ] })
       ] })
-    ] }) : /* @__PURE__ */ n("p", { className: "settings-shell__help", "aria-live": "polite", children: "Off — the card uses its default styling. Turn on to tint values below the threshold." })
+    ] }) : /* @__PURE__ */ a("p", { className: "settings-shell__help", "aria-live": "polite", children: "Off — the card uses its default styling. Turn on to tint values below the threshold." })
   ] });
 }
 function Ye({ value: e, onChange: t }) {
   return /* @__PURE__ */ f("div", { className: "settings-shell__field settings-shell__field--timeframe", children: [
-    /* @__PURE__ */ n("span", { className: "settings-shell__label", "aria-hidden": "true", children: "Rolling period (days)" }),
+    /* @__PURE__ */ a("span", { className: "settings-shell__label", "aria-hidden": "true", children: "Rolling period (days)" }),
     /* @__PURE__ */ f("div", { className: "settings-shell__slider-row", children: [
-      /* @__PURE__ */ n(
+      /* @__PURE__ */ a(
         "input",
         {
           id: "settings-timeframe-input",
@@ -101,7 +101,7 @@ function Ye({ value: e, onChange: t }) {
   ] });
 }
 function Ve({ id: e, onRemove: t }) {
-  const { attributes: r, listeners: l, setNodeRef: a, transform: i, transition: u, isDragging: o } = ze({ id: e }), s = {
+  const { attributes: r, listeners: l, setNodeRef: n, transform: i, transition: u, isDragging: o } = ze({ id: e }), s = {
     transform: He.Transform.toString(i),
     transition: u,
     opacity: o ? 0.6 : 1
@@ -109,11 +109,11 @@ function Ve({ id: e, onRemove: t }) {
   return /* @__PURE__ */ f(
     "li",
     {
-      ref: a,
+      ref: n,
       style: s,
       className: `settings-shell__slot-pill${o ? " settings-shell__slot-pill--dragging" : ""}`,
       children: [
-        /* @__PURE__ */ n(
+        /* @__PURE__ */ a(
           "button",
           {
             type: "button",
@@ -121,11 +121,11 @@ function Ve({ id: e, onRemove: t }) {
             "aria-label": `Reorder ${e}`,
             ...r,
             ...l,
-            children: /* @__PURE__ */ n("span", { "aria-hidden": "true", className: "settings-shell__slot-pill__grip", children: "⋮⋮" })
+            children: /* @__PURE__ */ a("span", { "aria-hidden": "true", className: "settings-shell__slot-pill__grip", children: "⋮⋮" })
           }
         ),
-        /* @__PURE__ */ n("span", { className: "settings-shell__slot-pill__label", children: e }),
-        /* @__PURE__ */ n(
+        /* @__PURE__ */ a("span", { className: "settings-shell__slot-pill__label", children: e }),
+        /* @__PURE__ */ a(
           "button",
           {
             type: "button",
@@ -143,7 +143,7 @@ function Ke({ value: e, onChange: t }) {
   const r = ke(
     ie(De, { activationConstraint: { distance: 4 } }),
     ie(Le, { coordinateGetter: Ie })
-  ), l = H.useRef(!1), [a, i] = H.useState(!1), u = (s) => {
+  ), l = H.useRef(!1), [n, i] = H.useState(!1), u = (s) => {
     const { active: c, over: d } = s;
     if (!d || c.id === d.id) return;
     const m = e.findIndex((b) => b === c.id), h = e.findIndex((b) => b === d.id);
@@ -152,9 +152,9 @@ function Ke({ value: e, onChange: t }) {
     l.current || (l.current = !0, i(!0)), t(e.filter((c) => c !== s));
   };
   return /* @__PURE__ */ f("div", { className: "settings-shell__field settings-shell__field--slots", "aria-label": "Stack slots", children: [
-    /* @__PURE__ */ n(Oe, { sensors: r, collisionDetection: Me, onDragEnd: u, children: /* @__PURE__ */ n(Re, { items: [...e], strategy: $e, children: /* @__PURE__ */ n("ul", { className: "settings-shell__slots-list", role: "list", children: e.map((s) => /* @__PURE__ */ n(Ve, { id: s, onRemove: () => o(s) }, s)) }) }) }),
-    e.length === 0 && a && /* @__PURE__ */ n("p", { className: "settings-shell__help", children: "All slots removed. Apply to commit, or Reset to restore." }),
-    /* @__PURE__ */ n("p", { className: "settings-shell__help settings-shell__help--small", children: "Drag to reorder · click × to remove" })
+    /* @__PURE__ */ a(Me, { sensors: r, collisionDetection: Oe, onDragEnd: u, children: /* @__PURE__ */ a(Re, { items: [...e], strategy: $e, children: /* @__PURE__ */ a("ul", { className: "settings-shell__slots-list", role: "list", children: e.map((s) => /* @__PURE__ */ a(Ve, { id: s, onRemove: () => o(s) }, s)) }) }) }),
+    e.length === 0 && n && /* @__PURE__ */ a("p", { className: "settings-shell__help", children: "All slots removed. Apply to commit, or Reset to restore." }),
+    /* @__PURE__ */ a("p", { className: "settings-shell__help settings-shell__help--small", children: "Drag to reorder · click × to remove" })
   ] });
 }
 const qe = ["#1d6fd8", "#10b981", "#f59e0b", "#ef4444", "#8b5cf6"];
@@ -164,14 +164,14 @@ function Qe({
   enabled: r = !1,
   onToggleEnabled: l
 }) {
-  const a = "settings-accent-enabled";
+  const n = "settings-accent-enabled";
   return /* @__PURE__ */ f("div", { className: "settings-shell__field settings-shell__field--color", role: "group", "aria-label": "Accent color", children: [
     /* @__PURE__ */ f("div", { className: "settings-shell__toggle-row", children: [
-      /* @__PURE__ */ n("label", { htmlFor: a, className: "settings-shell__toggle-label", children: "Override default accent" }),
-      /* @__PURE__ */ n(
+      /* @__PURE__ */ a("label", { htmlFor: n, className: "settings-shell__toggle-label", children: "Override default accent" }),
+      /* @__PURE__ */ a(
         "input",
         {
-          id: a,
+          id: n,
           type: "checkbox",
           role: "switch",
           "aria-label": "Enable accent override",
@@ -183,10 +183,10 @@ function Qe({
       )
     ] }),
     r ? /* @__PURE__ */ f(V, { children: [
-      /* @__PURE__ */ n("span", { className: "settings-shell__label", children: "Accent color" }),
-      /* @__PURE__ */ n("div", { className: "settings-shell__swatch-row", children: qe.map((i) => {
+      /* @__PURE__ */ a("span", { className: "settings-shell__label", children: "Accent color" }),
+      /* @__PURE__ */ a("div", { className: "settings-shell__swatch-row", children: qe.map((i) => {
         const u = e === i;
-        return /* @__PURE__ */ n(
+        return /* @__PURE__ */ a(
           "button",
           {
             type: "button",
@@ -199,57 +199,57 @@ function Qe({
           i
         );
       }) })
-    ] }) : /* @__PURE__ */ n("p", { className: "settings-shell__help", "aria-live": "polite", children: "Off — the card uses its default accent. Turn on to override." })
+    ] }) : /* @__PURE__ */ a("p", { className: "settings-shell__help", "aria-live": "polite", children: "Off — the card uses its default accent. Turn on to override." })
   ] });
 }
 const We = ["Orders", "Quota", "Unassigned"], Ge = ["threshold", "timeframe", "color"];
-function Tt({
+function Pt({
   isOpen: e,
   cardSpan: t,
   cardLabel: r = "Metric",
   cardValue: l = "—",
-  previewSlot: a,
+  previewSlot: n,
   dimensions: i = Ge,
   initialTab: u,
   initialValues: o
 }) {
-  const s = O(), c = s?.state.activeTrigger, d = c?.kind === "card-overflow" ? c.cardId : null, m = he(), h = c?.span, b = t ?? h ?? 1, p = i[0] ?? "threshold", [_, P] = H.useState(u ?? p);
+  const s = M(), c = s?.state.activeTrigger, d = c?.kind === "card-overflow" ? c.cardId : null, m = he(), h = c?.span, b = t ?? h ?? 1, p = i[0] ?? "threshold", [_, T] = H.useState(u ?? p);
   H.useEffect(() => {
-    i.includes(_) || P(p);
+    i.includes(_) || T(p);
   }, [i, _, p]);
-  const y = d != null ? s?.state?.bufferByCard?.[d]?.changes ?? {} : {}, N = typeof y.threshold == "number" ? y.threshold : typeof o?.threshold == "number" ? o.threshold : 80, I = typeof y.timeframe == "number" ? y.timeframe : typeof o?.timeframe == "number" ? o.timeframe : 30, R = typeof y.accent == "string" ? y.accent : typeof o?.accent == "string" ? o.accent : null, $ = Array.isArray(y.slots) ? y.slots : Array.isArray(o?.slots) ? o.slots : We, S = typeof y.thresholdEnabled == "boolean" ? y.thresholdEnabled : typeof o?.thresholdEnabled == "boolean" ? o.thresholdEnabled : !1, L = typeof y.accentEnabled == "boolean" ? y.accentEnabled : typeof o?.accentEnabled == "boolean" ? o.accentEnabled : !1, q = (T) => {
-    d == null || s == null || s.dispatch({ type: "SET_BUFFER_VALUE", cardId: d, key: "threshold", value: Number(T.target.value) });
-  }, Q = (T) => {
-    d == null || s == null || s.dispatch({ type: "SET_BUFFER_VALUE", cardId: d, key: "timeframe", value: Number(T.target.value) });
-  }, oe = (T) => {
-    d == null || s == null || s.dispatch({ type: "SET_BUFFER_VALUE", cardId: d, key: "accent", value: T });
-  }, W = (T) => {
-    d == null || s == null || s.dispatch({ type: "SET_BUFFER_VALUE", cardId: d, key: "slots", value: T });
-  }, G = (T) => {
-    d == null || s == null || s.dispatch({ type: "SET_BUFFER_VALUE", cardId: d, key: "thresholdEnabled", value: T });
-  }, g = (T) => {
-    d == null || s == null || s.dispatch({ type: "SET_BUFFER_VALUE", cardId: d, key: "accentEnabled", value: T });
+  const y = d != null ? s?.state?.bufferByCard?.[d]?.changes ?? {} : {}, N = typeof y.threshold == "number" ? y.threshold : typeof o?.threshold == "number" ? o.threshold : 80, I = typeof y.timeframe == "number" ? y.timeframe : typeof o?.timeframe == "number" ? o.timeframe : 30, R = typeof y.accent == "string" ? y.accent : typeof o?.accent == "string" ? o.accent : null, $ = Array.isArray(y.slots) ? y.slots : Array.isArray(o?.slots) ? o.slots : We, S = typeof y.thresholdEnabled == "boolean" ? y.thresholdEnabled : typeof o?.thresholdEnabled == "boolean" ? o.thresholdEnabled : !1, D = typeof y.accentEnabled == "boolean" ? y.accentEnabled : typeof o?.accentEnabled == "boolean" ? o.accentEnabled : !1, q = (P) => {
+    d == null || s == null || s.dispatch({ type: "SET_BUFFER_VALUE", cardId: d, key: "threshold", value: Number(P.target.value) });
+  }, Q = (P) => {
+    d == null || s == null || s.dispatch({ type: "SET_BUFFER_VALUE", cardId: d, key: "timeframe", value: Number(P.target.value) });
+  }, oe = (P) => {
+    d == null || s == null || s.dispatch({ type: "SET_BUFFER_VALUE", cardId: d, key: "accent", value: P });
+  }, W = (P) => {
+    d == null || s == null || s.dispatch({ type: "SET_BUFFER_VALUE", cardId: d, key: "slots", value: P });
+  }, G = (P) => {
+    d == null || s == null || s.dispatch({ type: "SET_BUFFER_VALUE", cardId: d, key: "thresholdEnabled", value: P });
+  }, g = (P) => {
+    d == null || s == null || s.dispatch({ type: "SET_BUFFER_VALUE", cardId: d, key: "accentEnabled", value: P });
   }, C = s?.state.isDirty ?? !1, w = d;
-  return /* @__PURE__ */ n(
+  return /* @__PURE__ */ a(
     Y,
     {
       variant: "with-stage",
       onClose: () => s?.dispatch({ type: "CLOSE_PANEL", reason: "header-x" }),
-      stage: /* @__PURE__ */ n(Ue, { span: b, rotating: !m, children: a ?? /* @__PURE__ */ f(V, { children: [
-        /* @__PURE__ */ n("div", { style: { fontSize: 9, textTransform: "uppercase", letterSpacing: "0.06em", color: "#9ca3af", marginBottom: 6 }, children: r }),
-        /* @__PURE__ */ n("div", { style: { fontSize: 22, fontWeight: 700, color: "#111827", lineHeight: 1 }, children: l })
+      stage: /* @__PURE__ */ a(Ue, { span: b, rotating: !m, children: n ?? /* @__PURE__ */ f(V, { children: [
+        /* @__PURE__ */ a("div", { style: { fontSize: 9, textTransform: "uppercase", letterSpacing: "0.06em", color: "#9ca3af", marginBottom: 6 }, children: r }),
+        /* @__PURE__ */ a("div", { style: { fontSize: 22, fontWeight: 700, color: "#111827", lineHeight: 1 }, children: l })
       ] }) }),
-      navigation: /* @__PURE__ */ n(
+      navigation: /* @__PURE__ */ a(
         we,
         {
           dimensions: i,
           activeTab: _,
-          onSelect: P,
+          onSelect: T,
           reduced: m
         }
       ),
       footer: {
-        left: /* @__PURE__ */ n(
+        left: /* @__PURE__ */ a(
           "button",
           {
             id: "btn-reset",
@@ -262,7 +262,7 @@ function Tt({
             children: "Reset"
           }
         ),
-        right: /* @__PURE__ */ n(
+        right: /* @__PURE__ */ a(
           "button",
           {
             id: "settings-apply",
@@ -274,7 +274,7 @@ function Tt({
           }
         )
       },
-      children: /* @__PURE__ */ n("div", { className: "settings-shell", "data-shell": "settings", "aria-hidden": !e, children: /* @__PURE__ */ f(
+      children: /* @__PURE__ */ a("div", { className: "settings-shell", "data-shell": "settings", "aria-hidden": !e, children: /* @__PURE__ */ f(
         "div",
         {
           role: "tabpanel",
@@ -283,7 +283,7 @@ function Tt({
           tabIndex: 0,
           className: "settings-shell__tabpanel",
           children: [
-            _ === "threshold" && /* @__PURE__ */ n(
+            _ === "threshold" && /* @__PURE__ */ a(
               Be,
               {
                 value: N,
@@ -292,14 +292,14 @@ function Tt({
                 onToggleEnabled: G
               }
             ),
-            _ === "timeframe" && /* @__PURE__ */ n(Ye, { value: I, onChange: Q }),
-            _ === "slots" && /* @__PURE__ */ n(Ke, { value: $, onChange: W }),
-            _ === "color" && /* @__PURE__ */ n(
+            _ === "timeframe" && /* @__PURE__ */ a(Ye, { value: I, onChange: Q }),
+            _ === "slots" && /* @__PURE__ */ a(Ke, { value: $, onChange: W }),
+            _ === "color" && /* @__PURE__ */ a(
               Qe,
               {
                 value: R,
                 onSelect: oe,
-                enabled: L,
+                enabled: D,
                 onToggleEnabled: g
               }
             )
@@ -631,10 +631,10 @@ function Ce({
   activeLens: t,
   onLensChange: r,
   variant: l = "pills",
-  lensMeta: a = ve
+  lensMeta: n = ve
 }) {
-  return l === "pills" ? /* @__PURE__ */ n("div", { className: "cat-pills-wrap", children: /* @__PURE__ */ n("div", { className: "cat-pills", role: "tablist", "aria-label": "Metric lenses", children: e.map((i) => {
-    const u = i === t, o = a[i], s = ["cat-pill"];
+  return l === "pills" ? /* @__PURE__ */ a("div", { className: "cat-pills-wrap", children: /* @__PURE__ */ a("div", { className: "cat-pills", role: "tablist", "aria-label": "Metric lenses", children: e.map((i) => {
+    const u = i === t, o = n[i], s = ["cat-pill"];
     return u && s.push("active"), /* @__PURE__ */ f(
       "button",
       {
@@ -648,25 +648,25 @@ function Ce({
         },
         children: [
           i,
-          o?.beta && /* @__PURE__ */ n("span", { className: "cat-pill-beta", "aria-label": "Beta", children: "BETA" })
+          o?.beta && /* @__PURE__ */ a("span", { className: "cat-pill-beta", "aria-label": "Beta", children: "BETA" })
         ]
       },
       i
     );
-  }) }) }) : /* @__PURE__ */ n(je, { lenses: e, activeLens: t, onLensChange: r });
+  }) }) }) : /* @__PURE__ */ a(je, { lenses: e, activeLens: t, onLensChange: r });
 }
 function je({
   lenses: e,
   activeLens: t,
   onLensChange: r
 }) {
-  const [l, a] = A(!1), i = K(null), u = () => {
+  const [l, n] = A(!1), i = K(null), u = () => {
     i.current != null && (window.clearTimeout(i.current), i.current = null);
   }, o = () => {
-    u(), i.current = window.setTimeout(() => a(!1), 100);
+    u(), i.current = window.setTimeout(() => n(!1), 100);
   }, s = e.filter((c) => c !== t);
-  return /* @__PURE__ */ n("div", { className: "cat-segmented-wrap", children: /* @__PURE__ */ f("div", { className: "cat-segmented", children: [
-    /* @__PURE__ */ n(
+  return /* @__PURE__ */ a("div", { className: "cat-segmented-wrap", children: /* @__PURE__ */ f("div", { className: "cat-segmented", children: [
+    /* @__PURE__ */ a(
       "button",
       {
         type: "button",
@@ -681,26 +681,26 @@ function je({
       {
         className: "cat-seg-more",
         onMouseEnter: () => {
-          u(), a(!0);
+          u(), n(!0);
         },
         onMouseLeave: o,
         children: [
-          /* @__PURE__ */ n("button", { type: "button", className: "cat-seg cat-seg-more-btn", "aria-haspopup": "menu", "aria-expanded": l, children: "More ▾" }),
-          l && /* @__PURE__ */ n(
+          /* @__PURE__ */ a("button", { type: "button", className: "cat-seg cat-seg-more-btn", "aria-haspopup": "menu", "aria-expanded": l, children: "More ▾" }),
+          l && /* @__PURE__ */ a(
             "div",
             {
               className: "cat-seg-overflow",
               role: "menu",
               onMouseEnter: u,
               onMouseLeave: o,
-              children: s.map((c) => /* @__PURE__ */ n(
+              children: s.map((c) => /* @__PURE__ */ a(
                 "button",
                 {
                   type: "button",
                   "data-lens": c,
                   role: "menuitem",
                   onClick: () => {
-                    r(c), a(!1);
+                    r(c), n(!1);
                   },
                   children: c
                 },
@@ -714,16 +714,16 @@ function je({
   ] }) });
 }
 function te({ tiles: e, selectedTileId: t, onSelectTile: r, renderTile: l }) {
-  return /* @__PURE__ */ n("div", { className: "cat-tiles", children: e.map((a) => {
-    const i = a.id === t, u = a.subStats != null && a.subStats.length > 0;
+  return /* @__PURE__ */ a("div", { className: "cat-tiles", children: e.map((n) => {
+    const i = n.id === t, u = n.subStats != null && n.subStats.length > 0;
     let o = null;
-    u ? a.subStats.length === 5 ? o = "span-5" : a.subStats.length === 3 ? o = "span-3" : o = "span-2" : a.stack === !0 && (o = "span-2");
+    u ? n.subStats.length === 5 ? o = "span-5" : n.subStats.length === 3 ? o = "span-3" : o = "span-2" : n.stack === !0 && (o = "span-2");
     const s = ["cat-tile"];
-    o && s.push(o), i && s.push("selected"), a.isNew && s.push("is-new"), a.startHere && s.push("start-here"), a.donut && s.push("has-donut");
+    o && s.push(o), i && s.push("selected"), n.isNew && s.push("is-new"), n.startHere && s.push("start-here"), n.donut && s.push("has-donut");
     const c = 1;
     let d = 0.7;
-    if (a.donut) {
-      const m = /([\d.]+)\s*%/.exec(a.value);
+    if (n.donut) {
+      const m = /([\d.]+)\s*%/.exec(n.value);
       if (m) {
         const h = parseFloat(m[1]);
         Number.isFinite(h) && (d = Math.max(0, Math.min(1, h / 100)));
@@ -734,50 +734,50 @@ function te({ tiles: e, selectedTileId: t, onSelectTile: r, renderTile: l }) {
       {
         type: "button",
         className: s.join(" "),
-        "data-metric": a.id,
-        "data-desc": a.desc,
+        "data-metric": n.id,
+        "data-desc": n.desc,
         "data-col-span": String(c),
-        "data-donut": a.donut ? "true" : void 0,
-        "data-accent": a.accent,
+        "data-donut": n.donut ? "true" : void 0,
+        "data-accent": n.accent,
         "aria-pressed": i,
-        onClick: () => r(a.id, a.desc),
-        style: a.accent ? { "--cat-tile-accent": a.accent } : void 0,
+        onClick: () => r(n.id, n.desc),
+        style: n.accent ? { "--cat-tile-accent": n.accent } : void 0,
         children: [
-          a.startHere && /* @__PURE__ */ n("span", { className: "cat-tile-start-here", "aria-hidden": "true", children: "START HERE" }),
-          l ? l(a) : /* @__PURE__ */ n(
+          n.startHere && /* @__PURE__ */ a("span", { className: "cat-tile-start-here", "aria-hidden": "true", children: "START HERE" }),
+          l ? l(n) : /* @__PURE__ */ a(
             "div",
             {
               className: "cat-tile-primitive-wrapper gloss-metric-card",
               "data-col-span": "1",
               style: { pointerEvents: "none", width: "100%", height: "100%" },
               "aria-hidden": "true",
-              children: a.donut ? /* @__PURE__ */ n(
+              children: n.donut ? /* @__PURE__ */ a(
                 ce,
                 {
                   variant: "donut",
-                  label: a.label,
-                  value: a.value,
+                  label: n.label,
+                  value: n.value,
                   donutValue: d,
                   donutMax: 1,
-                  accentColor: a.accent,
+                  accentColor: n.accent,
                   colSpan: c
                 }
-              ) : /* @__PURE__ */ n(
+              ) : /* @__PURE__ */ a(
                 ce,
                 {
                   variant: "standard",
-                  label: a.label,
-                  value: a.value,
+                  label: n.label,
+                  value: n.value,
                   colSpan: c
                 }
               )
             }
           ),
-          a.variants && a.variants.length > 0 && /* @__PURE__ */ n("span", { className: "cat-tile-variants", "aria-hidden": "true", children: a.variants.map((m) => /* @__PURE__ */ n("span", { children: m }, m)) }),
-          a.isNew && /* @__PURE__ */ n("span", { className: "cat-tile-new-dot", "aria-hidden": "true" })
+          n.variants && n.variants.length > 0 && /* @__PURE__ */ a("span", { className: "cat-tile-variants", "aria-hidden": "true", children: n.variants.map((m) => /* @__PURE__ */ a("span", { children: m }, m)) }),
+          n.isNew && /* @__PURE__ */ a("span", { className: "cat-tile-new-dot", "aria-hidden": "true" })
         ]
       },
-      a.id
+      n.id
     );
   }) });
 }
@@ -788,12 +788,12 @@ function se() {
 function At({ mode: e, dispatch: t }) {
   const r = se();
   if (r == null && e == null) return null;
-  const l = r?.mode ?? e ?? "add", a = r?.selectedTileId ?? null, i = r?.description ?? null, u = a == null;
+  const l = r?.mode ?? e ?? "add", n = r?.selectedTileId ?? null, i = r?.description ?? null, u = n == null;
   return /* @__PURE__ */ f("div", { className: "panel-footer catalog", children: [
-    /* @__PURE__ */ n("div", { className: "cat-description", id: "cat-desc", children: i ?? /* @__PURE__ */ n("em", { children: "Tap a metric to see its description" }) }),
+    /* @__PURE__ */ a("div", { className: "cat-description", id: "cat-desc", children: i ?? /* @__PURE__ */ a("em", { children: "Tap a metric to see its description" }) }),
     /* @__PURE__ */ f("div", { style: { display: "flex", padding: "10px 14px", gap: 8 }, children: [
-      /* @__PURE__ */ n("div", { className: "spacer", style: { flex: 1 } }),
-      /* @__PURE__ */ n(
+      /* @__PURE__ */ a("div", { className: "spacer", style: { flex: 1 } }),
+      /* @__PURE__ */ a(
         "button",
         {
           id: "btn-cat-cancel",
@@ -803,7 +803,7 @@ function At({ mode: e, dispatch: t }) {
           children: "Cancel"
         }
       ),
-      l === "add" && /* @__PURE__ */ n(
+      l === "add" && /* @__PURE__ */ a(
         "button",
         {
           id: "btn-cat-add",
@@ -814,7 +814,7 @@ function At({ mode: e, dispatch: t }) {
           children: "Add metric"
         }
       ),
-      l === "replace" && /* @__PURE__ */ n(
+      l === "replace" && /* @__PURE__ */ a(
         "button",
         {
           id: "btn-cat-replace",
@@ -840,39 +840,39 @@ function de(e, t) {
 }
 function Ze() {
   const t = se()?.description ?? null;
-  return t == null ? /* @__PURE__ */ n("span", { style: { fontStyle: "italic" }, children: "Tap a metric to see its description" }) : /* @__PURE__ */ n("span", { children: t });
+  return t == null ? /* @__PURE__ */ a("span", { style: { fontStyle: "italic" }, children: "Tap a metric to see its description" }) : /* @__PURE__ */ a("span", { children: t });
 }
 function xt({
   isOpen: e,
   lenses: t = be,
   defaultLens: r = ye,
   tilesByLens: l = _e,
-  lensMeta: a = ve,
+  lensMeta: n = ve,
   renderTile: i,
   onAdd: u
 }) {
-  const o = O(), [s, c] = A(r), [d, m] = A(null), [h, b] = A(null), [p, _] = A(""), P = l[s] ?? { primary: [] }, E = a[s], y = le(
-    () => P.primary.filter((S) => de(S, p)),
-    [P.primary, p]
+  const o = M(), [s, c] = A(r), [d, m] = A(null), [h, b] = A(null), [p, _] = A(""), T = l[s] ?? { primary: [] }, E = n[s], y = le(
+    () => T.primary.filter((S) => de(S, p)),
+    [T.primary, p]
   ), N = le(
-    () => (P.secondary ?? []).filter((S) => de(S, p)),
-    [P.secondary, p]
+    () => (T.secondary ?? []).filter((S) => de(S, p)),
+    [T.secondary, p]
   ), I = () => {
     d != null && u?.(d), o?.dispatch({ type: "CLOSE_PANEL", reason: "apply-button" });
   }, R = () => o?.dispatch({ type: "CLOSE_PANEL", reason: "header-x" }), $ = d == null;
-  return /* @__PURE__ */ n(
+  return /* @__PURE__ */ a(
     ae.Provider,
     {
       value: { mode: "add", selectedTileId: d, description: h },
-      children: /* @__PURE__ */ n(
+      children: /* @__PURE__ */ a(
         Y,
         {
           variant: "no-stage",
           title: "Add a metric",
           onClose: R,
           footer: {
-            left: /* @__PURE__ */ n(Ze, {}),
-            right: /* @__PURE__ */ n(
+            left: /* @__PURE__ */ a(Ze, {}),
+            right: /* @__PURE__ */ a(
               "button",
               {
                 id: "btn-cat-add",
@@ -885,7 +885,7 @@ function xt({
             )
           },
           children: /* @__PURE__ */ f("div", { "data-shell": "catalog-add", "aria-hidden": !e, children: [
-            /* @__PURE__ */ n("div", { className: "cat-search", children: /* @__PURE__ */ n(
+            /* @__PURE__ */ a("div", { className: "cat-search", children: /* @__PURE__ */ a(
               "input",
               {
                 type: "search",
@@ -896,12 +896,12 @@ function xt({
                 onChange: (S) => _(S.target.value)
               }
             ) }),
-            /* @__PURE__ */ n(
+            /* @__PURE__ */ a(
               Ce,
               {
                 lenses: t,
                 activeLens: s,
-                lensMeta: a,
+                lensMeta: n,
                 variant: "pills",
                 onLensChange: (S) => {
                   c(S), m(null), b(null), _("");
@@ -909,29 +909,29 @@ function xt({
               }
             ),
             E && /* @__PURE__ */ f("div", { className: "cat-lens-meta", children: [
-              /* @__PURE__ */ n("h3", { className: "cat-lens-headline", children: E.headline }),
-              /* @__PURE__ */ n("p", { className: "cat-lens-helper", children: E.helper })
+              /* @__PURE__ */ a("h3", { className: "cat-lens-headline", children: E.headline }),
+              /* @__PURE__ */ a("p", { className: "cat-lens-helper", children: E.helper })
             ] }),
-            /* @__PURE__ */ n(
+            /* @__PURE__ */ a(
               te,
               {
                 tiles: y,
                 selectedTileId: d,
-                onSelectTile: (S, L) => {
-                  m(S), b(L);
+                onSelectTile: (S, D) => {
+                  m(S), b(D);
                 },
                 renderTile: i
               }
             ),
             N.length > 0 && /* @__PURE__ */ f("div", { className: "cat-more-in-lens", children: [
-              /* @__PURE__ */ n("div", { className: "cat-more-in-lens__heading", children: "MORE IN THIS LENS" }),
-              /* @__PURE__ */ n(
+              /* @__PURE__ */ a("div", { className: "cat-more-in-lens__heading", children: "MORE IN THIS LENS" }),
+              /* @__PURE__ */ a(
                 te,
                 {
                   tiles: N,
                   selectedTileId: d,
-                  onSelectTile: (S, L) => {
-                    m(S), b(L);
+                  onSelectTile: (S, D) => {
+                    m(S), b(D);
                   },
                   renderTile: i
                 }
@@ -950,30 +950,30 @@ function xt({
 }
 function Xe() {
   const t = se()?.description ?? null;
-  return t == null ? /* @__PURE__ */ n("em", { children: "Tap a metric to see its description" }) : /* @__PURE__ */ n(V, { children: t });
+  return t == null ? /* @__PURE__ */ a("em", { children: "Tap a metric to see its description" }) : /* @__PURE__ */ a(V, { children: t });
 }
 function kt({
   isOpen: e,
   replacingLabel: t,
   lenses: r = be,
   defaultLens: l = ye,
-  tilesByLens: a = _e,
+  tilesByLens: n = _e,
   renderTile: i
 }) {
-  const u = O(), [o, s] = A(l), [c, d] = A(null), [m, h] = A(null), b = a[o] ?? { primary: [] }, p = [...b.primary, ...b.secondary ?? []], _ = () => u?.dispatch({ type: "CLOSE_PANEL", reason: "apply-button" }), P = () => u?.dispatch({ type: "CLOSE_PANEL", reason: "header-x" }), E = c == null;
-  return /* @__PURE__ */ n(
+  const u = M(), [o, s] = A(l), [c, d] = A(null), [m, h] = A(null), b = n[o] ?? { primary: [] }, p = [...b.primary, ...b.secondary ?? []], _ = () => u?.dispatch({ type: "CLOSE_PANEL", reason: "apply-button" }), T = () => u?.dispatch({ type: "CLOSE_PANEL", reason: "header-x" }), E = c == null;
+  return /* @__PURE__ */ a(
     ae.Provider,
     {
       value: { mode: "replace", selectedTileId: c, description: m },
-      children: /* @__PURE__ */ n(
+      children: /* @__PURE__ */ a(
         Y,
         {
           variant: "no-stage",
           title: "Replace metric",
-          onClose: P,
+          onClose: T,
           footer: {
-            left: /* @__PURE__ */ n(Xe, {}),
-            right: /* @__PURE__ */ n(
+            left: /* @__PURE__ */ a(Xe, {}),
+            right: /* @__PURE__ */ a(
               "button",
               {
                 id: "btn-cat-replace",
@@ -990,7 +990,7 @@ function kt({
               "replacing ",
               t
             ] }),
-            /* @__PURE__ */ n(
+            /* @__PURE__ */ a(
               Ce,
               {
                 lenses: r,
@@ -1000,7 +1000,7 @@ function kt({
                 }
               }
             ),
-            /* @__PURE__ */ n(
+            /* @__PURE__ */ a(
               te,
               {
                 tiles: p,
@@ -1029,8 +1029,8 @@ function Je(e = {}) {
       className: "panel-footer pm",
       style: { display: "flex", justifyContent: "flex-end", padding: "10px 14px" },
       children: [
-        /* @__PURE__ */ n("div", { className: "spacer", style: { flex: 1 } }),
-        /* @__PURE__ */ n(
+        /* @__PURE__ */ a("div", { className: "spacer", style: { flex: 1 } }),
+        /* @__PURE__ */ a(
           "button",
           {
             id: "btn-new-page",
@@ -1041,8 +1041,8 @@ function Je(e = {}) {
                 r();
                 return;
               }
-              l && l((a) => [
-                ...a,
+              l && l((n) => [
+                ...n,
                 { id: `new-${Date.now()}`, name: "Untitled", active: !1 }
               ]);
             },
@@ -1053,7 +1053,7 @@ function Je(e = {}) {
     }
   );
 }
-function ue({ page: e, onRename: t, onKebab: r, onDragStart: l, onSwitchPage: a }) {
+function ue({ page: e, onRename: t, onKebab: r, onDragStart: l, onSwitchPage: n }) {
   const i = Se(), [u, o] = A(!1), s = K(null);
   F(() => {
     if (!u) return;
@@ -1072,10 +1072,10 @@ function ue({ page: e, onRename: t, onKebab: r, onDragStart: l, onSwitchPage: a
   }, m = () => {
     o(!1), i?.deletePage?.(e.id);
   }, h = (p) => {
-    p.stopPropagation(), a && !e.active && a(e.id);
+    p.stopPropagation(), n && !e.active && n(e.id);
   }, b = ["pm-row"];
   return e.active && b.push("active"), /* @__PURE__ */ f("div", { ref: s, className: b.join(" "), "data-page-id": e.id, role: "listitem", children: [
-    /* @__PURE__ */ n(
+    /* @__PURE__ */ a(
       "div",
       {
         className: "pm-handle",
@@ -1084,21 +1084,21 @@ function ue({ page: e, onRename: t, onKebab: r, onDragStart: l, onSwitchPage: a
         children: "⋮⋮"
       }
     ),
-    /* @__PURE__ */ n(
+    /* @__PURE__ */ a(
       "div",
       {
         className: "pm-name",
-        role: a && !e.active ? "button" : void 0,
-        tabIndex: a && !e.active ? 0 : void 0,
-        onClick: a ? h : void 0,
+        role: n && !e.active ? "button" : void 0,
+        tabIndex: n && !e.active ? 0 : void 0,
+        onClick: n ? h : void 0,
         onKeyDown: (p) => {
-          !a || e.active || (p.key === "Enter" || p.key === " ") && (p.preventDefault(), p.stopPropagation(), a(e.id));
+          !n || e.active || (p.key === "Enter" || p.key === " ") && (p.preventDefault(), p.stopPropagation(), n(e.id));
         },
-        "aria-label": a && !e.active ? `Switch to ${e.name}` : void 0,
+        "aria-label": n && !e.active ? `Switch to ${e.name}` : void 0,
         children: e.name
       }
     ),
-    /* @__PURE__ */ n(
+    /* @__PURE__ */ a(
       "button",
       {
         type: "button",
@@ -1124,9 +1124,9 @@ function ue({ page: e, onRename: t, onKebab: r, onDragStart: l, onSwitchPage: a
         onPointerDown: (p) => p.stopPropagation(),
         onMouseDown: (p) => p.stopPropagation(),
         children: [
-          /* @__PURE__ */ n("button", { type: "button", role: "menuitem", className: "pm-kebab-menu__item", onClick: c, children: "Rename" }),
-          /* @__PURE__ */ n("button", { type: "button", role: "menuitem", className: "pm-kebab-menu__item", onClick: d, children: "Duplicate" }),
-          /* @__PURE__ */ n(
+          /* @__PURE__ */ a("button", { type: "button", role: "menuitem", className: "pm-kebab-menu__item", onClick: c, children: "Rename" }),
+          /* @__PURE__ */ a("button", { type: "button", role: "menuitem", className: "pm-kebab-menu__item", onClick: d, children: "Duplicate" }),
+          /* @__PURE__ */ a(
             "button",
             {
               type: "button",
@@ -1152,16 +1152,16 @@ function Dt({
   pages: t = et,
   externalPages: r,
   activePageId: l,
-  onRename: a,
+  onRename: n,
   onDuplicate: i,
   onDelete: u,
   onReorder: o,
   onCreatePage: s,
   onSwitchPage: c
 }) {
-  const d = O(), [m, h] = A(() => [...t]), b = D((g, C) => {
+  const d = M(), [m, h] = A(() => [...t]), b = L((g, C) => {
     h((w) => w.map((x) => x.id === g ? { ...x, name: C } : x));
-  }, []), p = D((g) => {
+  }, []), p = L((g) => {
     h((C) => {
       const w = C.find((z) => z.id === g);
       if (!w) return C;
@@ -1172,26 +1172,26 @@ function Dt({
       }, k = C.findIndex((z) => z.id === g);
       return [...C.slice(0, k + 1), x, ...C.slice(k + 1)];
     });
-  }, []), _ = D((g) => {
+  }, []), _ = L((g) => {
     h((C) => C.filter((w) => w.id !== g));
-  }, []), P = D((g) => {
+  }, []), T = L((g) => {
     h((C) => {
       const w = new Map(C.map((k) => [k.id, k])), x = g.map((k) => w.get(k)).filter(Boolean);
       return x.length === C.length ? x : C;
     });
-  }, []), E = r != null, y = E ? r : m, N = l != null ? y.map((g) => ({ ...g, active: g.id === l })) : [...y], I = a ?? (E ? void 0 : b), R = i ?? (E ? void 0 : p), $ = u ?? (E ? void 0 : _), S = o ?? (E ? void 0 : P), L = D(
+  }, []), E = r != null, y = E ? r : m, N = l != null ? y.map((g) => ({ ...g, active: g.id === l })) : [...y], I = n ?? (E ? void 0 : b), R = i ?? (E ? void 0 : p), $ = u ?? (E ? void 0 : _), S = o ?? (E ? void 0 : T), D = L(
     (g) => {
       E || h(g);
     },
     [E]
-  ), q = D(
+  ), q = L(
     (g) => {
       const C = g[0]?.items.map((w) => w.id) ?? [];
       C.length > 0 && S && S(C);
     },
     [S]
-  ), Q = N.map((g) => `${g.id}:${g.name}`).join("|"), W = S != null && N.length > 1 ? /* @__PURE__ */ n(
-    Pe,
+  ), Q = N.map((g) => `${g.id}:${g.name}`).join("|"), W = S != null && N.length > 1 ? /* @__PURE__ */ a(
+    Te,
     {
       zones: [
         {
@@ -1200,8 +1200,8 @@ function Dt({
         }
       ],
       onZoneChange: q,
-      renderZone: (g, C, w) => /* @__PURE__ */ n("div", { className: "pm-list", role: "list", children: w }),
-      renderItem: (g) => /* @__PURE__ */ n(
+      renderZone: (g, C, w) => /* @__PURE__ */ a("div", { className: "pm-list", role: "list", children: w }),
+      renderItem: (g) => /* @__PURE__ */ a(
         ue,
         {
           page: g,
@@ -1211,7 +1211,7 @@ function Dt({
       )
     },
     Q
-  ) : /* @__PURE__ */ n("div", { className: "pm-list", role: "list", children: N.map((g) => /* @__PURE__ */ n(
+  ) : /* @__PURE__ */ a("div", { className: "pm-list", role: "list", children: N.map((g) => /* @__PURE__ */ a(
     ue,
     {
       page: g,
@@ -1219,26 +1219,26 @@ function Dt({
     },
     g.id
   )) }), G = () => d?.dispatch({ type: "CLOSE_PANEL", reason: "header-x" });
-  return /* @__PURE__ */ n(
+  return /* @__PURE__ */ a(
     Ne.Provider,
     {
       value: {
         pages: N,
-        setPages: L,
+        setPages: D,
         renamePage: I,
         duplicatePage: R,
         deletePage: $,
         // Sprint 2026-05-20 — propagate live create binding for footer.
         createPage: s
       },
-      children: /* @__PURE__ */ n(
+      children: /* @__PURE__ */ a(
         Y,
         {
           variant: "no-stage",
           title: "Manage pages",
           onClose: G,
-          footer: { right: /* @__PURE__ */ n(Je, {}) },
-          children: /* @__PURE__ */ n("div", { "data-shell": "page-management", "aria-hidden": !e, children: W })
+          footer: { right: /* @__PURE__ */ a(Je, {}) },
+          children: /* @__PURE__ */ a("div", { "data-shell": "page-management", "aria-hidden": !e, children: W })
         }
       )
     }
@@ -1260,42 +1260,37 @@ const Lt = {
   inset: 0,
   zIndex: 1,
   // CR-03 fix: pass-through tint — scrim is visual-only and must not intercept
-  // grid card clicks. See PanelHost.tsx CR-03 comment for full rationale.
+  // grid card clicks. Dismiss is ESC-only (see PanelHost.tsx CR-03 comment).
   pointerEvents: "none",
   background: "rgba(0, 0, 0, 0.04)"
 };
-function Ot() {
-  const { state: e, dispatch: t, getCloseLog: r } = Te();
+function Mt() {
+  const { state: e, dispatch: t, getCloseLog: r } = Pe();
   F(() => {
     if (e.activePanelId == null) return;
-    function i(u) {
-      u.key === "Escape" && t({ type: "CLOSE_PANEL", reason: "escape-key" });
+    function n(i) {
+      i.key === "Escape" && t({ type: "CLOSE_PANEL", reason: "escape-key" });
     }
-    return document.addEventListener("keydown", i), () => document.removeEventListener("keydown", i);
+    return document.addEventListener("keydown", n), () => document.removeEventListener("keydown", n);
   }, [e.activePanelId, t]);
   const l = K(e);
-  xe(() => {
+  return xe(() => {
     l.current = e;
   }), F(() => {
     if (process.env.NODE_ENV === "production") return;
-    const i = window;
-    return i.__panelsHostHandle && console.warn("[panels] multiple PanelHost/PanelHostShell instances mounted; dev handle is unreliable"), i.__panelsHostHandle = {
+    const n = window;
+    return n.__panelsHostHandle && console.warn("[panels] multiple PanelHost/PanelHostShell instances mounted; dev handle is unreliable"), n.__panelsHostHandle = {
       dispatch: t,
       getState: () => l.current,
       getCloseLog: r
     }, () => {
-      i.__panelsHostHandle?.dispatch === t && delete window.__panelsHostHandle;
+      n.__panelsHostHandle?.dispatch === t && delete window.__panelsHostHandle;
     };
-  }, [t, r]);
-  const a = D(() => {
-    t({ type: "CLOSE_PANEL", reason: "nav-escape-hatch" });
-  }, [t]);
-  return /* @__PURE__ */ n("div", { "data-panel-host": "true", style: tt, children: e.activePanelId != null && /* @__PURE__ */ n(
+  }, [t, r]), /* @__PURE__ */ a("div", { "data-panel-host": "true", style: tt, children: e.activePanelId != null && /* @__PURE__ */ a(
     "div",
     {
       "data-panel-scrim": "true",
-      style: nt,
-      onClick: a
+      style: nt
     }
   ) });
 }
@@ -1307,7 +1302,7 @@ function st(e) {
       l.current != null && (clearTimeout(l.current), l.current = null), r(null);
       return;
     }
-    return r((a) => a), l.current = setTimeout(() => {
+    return l.current = setTimeout(() => {
       r(null), l.current = null;
     }, at), () => {
       l.current != null && (clearTimeout(l.current), l.current = null);
@@ -1316,14 +1311,14 @@ function st(e) {
     e != null && r(e);
   }, [e]), e != null ? { panelId: e, isOpen: !0 } : t != null ? { panelId: t, isOpen: !1 } : { panelId: null, isOpen: !1 };
 }
-function Mt({ panelComponents: e, children: t }) {
-  const r = O(), l = st(r?.state.activePanelId ?? null);
+function Ot({ panelComponents: e, children: t }) {
+  const r = M(), l = st(r?.state.activePanelId ?? null);
   if (r == null || l.panelId == null) return null;
-  const a = l.panelId, i = l.isOpen, u = e?.[a];
+  const n = l.panelId, i = l.isOpen, u = e?.[n];
   return u == null && t == null ? (process.env.NODE_ENV !== "production" && console.error(
     "[panels] No panel component registered for activePanelId:",
-    a
-  ), null) : /* @__PURE__ */ n(Ae, { isOpen: i, children: u != null ? /* @__PURE__ */ n(u, { isOpen: i }) : t });
+    n
+  ), null) : /* @__PURE__ */ a(Ae, { isOpen: i, children: u != null ? /* @__PURE__ */ a(u, { isOpen: i }) : t });
 }
 function pe(e) {
   return e === null ? null : e.kind === "manage-pages-action" ? `global-${e.align ?? "left"}` : e.kind === "card-overflow" || e.kind === "empty-cell" ? `section-${e.sectionIndex}` : null;
@@ -1343,17 +1338,17 @@ function U(e) {
   e.dispatch({ type: "OPEN_PANEL", panelId: e.panelId, trigger: e.trigger });
 }
 function ct(e) {
-  const { mountEl: t, chromeEl: r, reducedMotion: l, onAssert: a } = e;
+  const { mountEl: t, chromeEl: r, reducedMotion: l, onAssert: n } = e;
   if (t == null || r == null) {
-    U(e), a?.({ branch: "slide-fallback-no-dom", timestamp: Date.now() });
+    U(e), n?.({ branch: "slide-fallback-no-dom", timestamp: Date.now() });
     return;
   }
   if (l) {
-    e.dispatch({ type: "OPEN_PANEL", panelId: e.panelId, trigger: e.trigger }), a?.({ branch: "slide-reduced-motion", timestamp: Date.now() });
+    e.dispatch({ type: "OPEN_PANEL", panelId: e.panelId, trigger: e.trigger }), n?.({ branch: "slide-reduced-motion", timestamp: Date.now() });
     return;
   }
   if (typeof r.animate != "function") {
-    U(e), a?.({ branch: "slide-no-waapi", timestamp: Date.now() });
+    U(e), n?.({ branch: "slide-no-waapi", timestamp: Date.now() });
     return;
   }
   const i = r.cloneNode(!0);
@@ -1365,7 +1360,7 @@ function ct(e) {
   s.addEventListener(
     "finish",
     () => {
-      i.remove(), r.style.zIndex = "", s.cancel(), a?.({ branch: "slide-complete", frozen: "cleaned", timestamp: Date.now() });
+      i.remove(), r.style.zIndex = "", s.cancel(), n?.({ branch: "slide-complete", frozen: "cleaned", timestamp: Date.now() });
     },
     { once: !0 }
   );
@@ -1377,11 +1372,11 @@ function dt(e) {
     return;
   }
   const l = Ee("--panel-close-dur", me);
-  let a = !1, i = null;
+  let n = !1, i = null;
   const u = (s) => {
-    s.target !== t || s.propertyName !== "max-height" || a || (a = !0, i != null && clearTimeout(i), t.removeEventListener("transitionend", u), e.dispatch({ type: "OPEN_PANEL", panelId: e.panelId, trigger: e.trigger }), r?.({ branch: "handoff-complete", timestamp: Date.now() }));
+    s.target !== t || s.propertyName !== "max-height" || n || (n = !0, i != null && clearTimeout(i), t.removeEventListener("transitionend", u), e.dispatch({ type: "OPEN_PANEL", panelId: e.panelId, trigger: e.trigger }), r?.({ branch: "handoff-complete", timestamp: Date.now() }));
   }, o = () => {
-    a || (a = !0, t.removeEventListener("transitionend", u), e.dispatch({ type: "OPEN_PANEL", panelId: e.panelId, trigger: e.trigger }), r?.({ branch: "handoff-forced", timestamp: Date.now() }));
+    n || (n = !0, t.removeEventListener("transitionend", u), e.dispatch({ type: "OPEN_PANEL", panelId: e.panelId, trigger: e.trigger }), r?.({ branch: "handoff-forced", timestamp: Date.now() }));
   };
   t.addEventListener("transitionend", u), e.dispatch({ type: "CLOSE_PANEL", reason: "mutex-handoff" }), i = setTimeout(o, l + lt);
 }
@@ -1391,8 +1386,8 @@ function ut(e) {
     e.dispatch({ type: "OPEN_PANEL", panelId: e.panelId, trigger: e.trigger }), r?.({ branch: "blocked-dirty", timestamp: Date.now() });
     return;
   }
-  const l = pe(t.activeTrigger), a = pe(e.trigger);
-  if (!!t.activePanelId && l != null && l === a) {
+  const l = pe(t.activeTrigger), n = pe(e.trigger);
+  if (!!t.activePanelId && l != null && l === n) {
     ct(e);
     return;
   }
@@ -1407,17 +1402,17 @@ function pt() {
     return window.__panelsAsserter;
 }
 function It() {
-  const e = O(), t = he();
-  return D(
+  const e = M(), t = he();
+  return L(
     (r, l) => {
       if (!e)
         return;
-      const a = typeof document < "u" ? document.querySelector('[data-mount="panel"]') : null, i = typeof document < "u" ? document.querySelector('[data-chrome="panel"]') : null, u = {
+      const n = typeof document < "u" ? document.querySelector('[data-mount="panel"]') : null, i = typeof document < "u" ? document.querySelector('[data-chrome="panel"]') : null, u = {
         panelId: r,
         trigger: l,
         state: e.state,
         dispatch: e.dispatch,
-        mountEl: a,
+        mountEl: n,
         chromeEl: i,
         reducedMotion: t,
         onAssert: (o) => {
@@ -1430,7 +1425,7 @@ function It() {
   );
 }
 function Rt({ children: e }) {
-  return /* @__PURE__ */ n("div", { className: "clone-stage", children: e });
+  return /* @__PURE__ */ a("div", { className: "clone-stage", children: e });
 }
 let B = !1, j = null;
 function ne() {
@@ -1439,14 +1434,14 @@ function ne() {
   document.querySelectorAll("#panel-chrome-frozen").length > 0 && (e.push("#panel-chrome-frozen"), t = "lingering");
   const l = document.querySelectorAll(".gloss-panel-mount");
   l.length > 1 && e.push(`mount-count=${l.length}`);
-  const a = l[0] ?? null, i = a ? a.querySelectorAll(".gloss-panel-chrome") : [];
+  const n = l[0] ?? null, i = n ? n.querySelectorAll(".gloss-panel-chrome") : [];
   i.length > 1 && e.push(`chrome-count=${i.length}`);
   const u = i[0] ?? null;
   if (u) {
     const d = u.style.zIndex;
     d !== "" && d !== "2" && e.push(`chrome-zindex=${d}`);
   }
-  const o = a ? "present" : "absent", s = u ? "present" : "absent";
+  const o = n ? "present" : "absent", s = u ? "present" : "absent";
   return {
     valid: e.length === 0,
     mount: o,
@@ -1457,19 +1452,19 @@ function ne() {
   };
 }
 const Z = "8px 8px 0px", X = "64px", J = "inset(0px 0px 60px 0px)", ee = "inset(0px -40px -40px -40px)";
-function v(e, t, r, l, a) {
-  return { id: e, constraint: t, expected: r, actual: l, pass: a };
+function v(e, t, r, l, n) {
+  return { id: e, constraint: t, expected: r, actual: l, pass: n };
 }
-function M(e) {
+function O(e) {
   const t = parseInt(e, 10);
   return Number.isFinite(t) ? t : NaN;
 }
 function re() {
-  const e = [], t = document.querySelector(".gloss-panel-mount"), r = t?.querySelector(".gloss-panel-chrome") ?? null, l = document.querySelector(".gloss-panel-coordinator") ?? document.querySelector("[data-panel-coordinator]"), a = document.querySelector(".bell-cutout"), i = document.querySelector(".bell-popover"), u = document.querySelector(".gloss-bottom-toolbar");
+  const e = [], t = document.querySelector(".gloss-panel-mount"), r = t?.querySelector(".gloss-panel-chrome") ?? null, l = document.querySelector(".gloss-panel-coordinator") ?? document.querySelector("[data-panel-coordinator]"), n = document.querySelector(".bell-cutout"), i = document.querySelector(".bell-popover"), u = document.querySelector(".gloss-bottom-toolbar");
   if (!t)
     e.push(v("C1", "mount --reveal-y matches clip-path inset-bottom Npx", "mount present", "absent", !1));
   else {
-    const o = getComputedStyle(t), s = o.getPropertyValue("--reveal-y").trim() || t.style.getPropertyValue("--reveal-y").trim(), c = o.clipPath || t.style.clipPath || "", d = c.match(/inset\(\s*0(?:px)?\s+0(?:px)?\s+(\d+)px\s+0(?:px)?\s*\)/), m = d ? parseInt(d[1], 10) : NaN, h = M(s), b = Number.isFinite(m) && Number.isFinite(h) && m === h;
+    const o = getComputedStyle(t), s = o.getPropertyValue("--reveal-y").trim() || t.style.getPropertyValue("--reveal-y").trim(), c = o.clipPath || t.style.clipPath || "", d = c.match(/inset\(\s*0(?:px)?\s+0(?:px)?\s+(\d+)px\s+0(?:px)?\s*\)/), m = d ? parseInt(d[1], 10) : NaN, h = O(s), b = Number.isFinite(m) && Number.isFinite(h) && m === h;
     e.push(
       v(
         "C1",
@@ -1495,11 +1490,11 @@ function re() {
   if (!r)
     e.push(v("C4", "panel-chrome height formula = (row-h*3)+(row-gap*3)-8px", "formula match", "absent", !1));
   else {
-    const o = getComputedStyle(r), s = M(
+    const o = getComputedStyle(r), s = O(
       o.getPropertyValue("--row-h").trim() || r.style.getPropertyValue("--row-h").trim() || "0"
-    ), c = M(
+    ), c = O(
       o.getPropertyValue("--row-gap").trim() || r.style.getPropertyValue("--row-gap").trim() || "0"
-    ), d = s * 3 + c * 3 - 8, m = M(o.height || r.style.height || ""), h = Number.isFinite(s) && Number.isFinite(c) && Number.isFinite(m) && Number.isFinite(d) && m === d;
+    ), d = s * 3 + c * 3 - 8, m = O(o.height || r.style.height || ""), h = Number.isFinite(s) && Number.isFinite(c) && Number.isFinite(m) && Number.isFinite(d) && m === d;
     e.push(
       v(
         "C4",
@@ -1544,8 +1539,8 @@ function re() {
         }
         for (const m of d)
           if (m.name === "stage-spin") {
-            const b = Array.from(m.cssRules), p = b.find((N) => N.keyText === "0%" || N.keyText === "from"), _ = b.find((N) => N.keyText === "100%" || N.keyText === "to"), P = p?.style.transform ?? "", E = _?.style.transform ?? "", y = /rotateY\(\s*0(?:deg)?\s*\)/;
-            o = y.test(P) && y.test(E), s = `0%=${P || "n/a"} 100%=${E || "n/a"}`;
+            const b = Array.from(m.cssRules), p = b.find((N) => N.keyText === "0%" || N.keyText === "from"), _ = b.find((N) => N.keyText === "100%" || N.keyText === "to"), T = p?.style.transform ?? "", E = _?.style.transform ?? "", y = /rotateY\(\s*0(?:deg)?\s*\)/;
+            o = y.test(T) && y.test(E), s = `0%=${T || "n/a"} 100%=${E || "n/a"}`;
             break;
           }
         if (s !== "absent") break;
@@ -1564,15 +1559,15 @@ function re() {
     );
   }
   {
-    const o = document.documentElement, s = getComputedStyle(o), c = s.getPropertyValue("--panel-open-dur").trim() || o.style.getPropertyValue("--panel-open-dur").trim(), d = s.getPropertyValue("--panel-close-dur").trim() || o.style.getPropertyValue("--panel-close-dur").trim(), m = M(c) || parseFloat(c) * (c.endsWith("s") && !c.endsWith("ms") ? 1e3 : 1), h = M(d) || parseFloat(d) * (d.endsWith("s") && !d.endsWith("ms") ? 1e3 : 1), b = Number.isFinite(m) && Number.isFinite(h) && m > h;
+    const o = document.documentElement, s = getComputedStyle(o), c = s.getPropertyValue("--panel-open-dur").trim() || o.style.getPropertyValue("--panel-open-dur").trim(), d = s.getPropertyValue("--panel-close-dur").trim() || o.style.getPropertyValue("--panel-close-dur").trim(), m = O(c) || parseFloat(c) * (c.endsWith("s") && !c.endsWith("ms") ? 1e3 : 1), h = O(d) || parseFloat(d) * (d.endsWith("s") && !d.endsWith("ms") ? 1e3 : 1), b = Number.isFinite(m) && Number.isFinite(h) && m > h;
     e.push(
       v("C7", "--panel-open-dur > --panel-close-dur", "open > close", `open=${c || "n/a"} close=${d || "n/a"}`, b)
     );
   }
-  if (!a)
+  if (!n)
     e.push(v("C8", "BellCutout zero computed animation/transition", "no inline timing", "absent", !1));
   else {
-    const o = getComputedStyle(a), s = o.animationName || "", c = o.transitionProperty || "", d = (s === "" || s === "none") && (c === "" || c === "none" || c === "all");
+    const o = getComputedStyle(n), s = o.animationName || "", c = o.transitionProperty || "", d = (s === "" || s === "none") && (c === "" || c === "none" || c === "all");
     e.push(
       v(
         "C8",
@@ -1694,36 +1689,35 @@ export {
   Dt as PageMgmtShell,
   Ne as PageMgmtStateContext,
   Ut as PanelBody,
-  Bt as PanelChrome,
   Y as PanelChromeV2,
-  Yt as PanelFooter,
-  Pt as PanelFooterMessage,
-  Vt as PanelHeader,
-  Kt as PanelHost,
-  Ot as PanelHostShell,
+  Bt as PanelFooter,
+  Tt as PanelFooterMessage,
+  Yt as PanelHeader,
+  Vt as PanelHost,
+  Mt as PanelHostShell,
   Ae as PanelMount,
-  qt as PanelNavigation,
-  Qt as PanelProvider,
-  Mt as PanelSlot,
-  Wt as PanelStage,
-  Tt as SettingsShell,
+  Kt as PanelNavigation,
+  qt as PanelProvider,
+  Ot as PanelSlot,
+  Qt as PanelStage,
+  Pt as SettingsShell,
   re as assertCcOnly,
   ne as assertPanelDomShape,
   ht as assertPanelTruths,
-  Gt as deriveSurfaceState,
+  Wt as deriveSurfaceState,
   bt as disablePanelAsserter,
   gt as enablePanelAsserter,
   mt as getCcRowById,
-  jt as initialState,
+  Gt as initialState,
   pe as positionKey,
-  Zt as reducer,
+  jt as reducer,
   ut as transitionToPanel,
   se as useCatalogState,
   wt as useEditingCardId,
   Se as usePageMgmtState,
-  Te as usePanelContext,
-  O as usePanelContextOptional,
-  Xt as usePanelCoordinator,
+  Pe as usePanelContext,
+  M as usePanelContextOptional,
+  Zt as usePanelCoordinator,
   he as useReducedMotionPanel,
   It as useTransitionToPanel
 };