@mt-gloss/ui 0.1.118 → 0.1.119

package/composites-panels.js

@@ -1,102 +1,36 @@
-import { u as H, h as he, g as Se, S as we, b as Ee, j as $, d as q } from "./COMMITS-BxJQwv4H.js";
-import { C as Kt, c as Yt, P as Wt, f as Gt, i as Qt, r as qt, e as jt } from "./COMMITS-BxJQwv4H.js";
-import { jsx as n, jsxs as p, Fragment as R } from "react/jsx-runtime";
-import F, { useState as x, useRef as V, createContext as fe, useContext as ge, useMemo as oe, useEffect as I, useCallback as k, useLayoutEffect as Pe } from "react";
-import { useSensors as xe, useSensor as ie, PointerSensor as Ae, KeyboardSensor as ke, DndContext as De, closestCenter as Oe } from "@dnd-kit/core";
-import { sortableKeyboardCoordinates as Le, SortableContext as Ie, horizontalListSortingStrategy as Me, arrayMove as $e, useSortable as Re } from "@dnd-kit/sortable";
-import { CSS as Fe } from "@dnd-kit/utilities";
-import { M as ce } from "./MetricCard-Cyoxhb_S.js";
-function Dt() {
-  const e = H();
+import { u as I, h as fe, j as K, g as we, S as Ee, b as Pe, k as xe } from "./COMMITS-BkM1Urzh.js";
+import { C as zt, N as Ht, o as Vt, d as Bt, p as Kt, l as Yt, c as Wt, n as Gt, P as Qt, m as qt, f as jt, i as Zt, r as Xt, e as Jt } from "./COMMITS-BkM1Urzh.js";
+import { jsx as n, jsxs as f, Fragment as L } from "react/jsx-runtime";
+import H, { useState as x, useRef as Y, createContext as ge, useContext as be, useMemo as ie, useEffect as U, useCallback as D, useLayoutEffect as Ae } from "react";
+import { useSensors as ke, useSensor as ce, PointerSensor as De, KeyboardSensor as Le, DndContext as Oe, closestCenter as Me } from "@dnd-kit/core";
+import { sortableKeyboardCoordinates as Ie, SortableContext as $e, horizontalListSortingStrategy as Re, arrayMove as Fe, useSortable as Ue } from "@dnd-kit/sortable";
+import { CSS as ze } from "@dnd-kit/utilities";
+import { M as de } from "./MetricCard-Cyoxhb_S.js";
+function Et() {
+  const e = I();
   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: l }) {
-  const o = ["clone-card", `span-${e}`, t ? "rotating" : ""].filter(Boolean).join(" "), a = l != null ? "full" : "fallback";
-  return /* @__PURE__ */ n("div", { className: o, "data-clone-fidelity": a, children: l });
+function He({ span: e, rotating: t = !0, children: r }) {
+  const o = ["clone-card", `span-${e}`, t ? "rotating" : ""].filter(Boolean).join(" "), a = r != null ? "full" : "fallback";
+  return /* @__PURE__ */ n("div", { className: o, "data-clone-fidelity": a, children: r });
 }
-function ze({ title: e, onClose: t }) {
-  return /* @__PURE__ */ p("div", { className: "gloss-panel-chrome-v2__header", children: [
-    e != null && /* @__PURE__ */ n("span", { className: "gloss-panel-chrome-v2__title", children: e }),
-    /* @__PURE__ */ n(
-      "button",
-      {
-        id: "panel-close",
-        type: "button",
-        "aria-label": "Close panel",
-        className: "gloss-panel-chrome-v2__close",
-        onClick: t,
-        children: "×"
-      }
-    )
-  ] });
-}
-function He({ children: e }) {
-  return /* @__PURE__ */ n(
-    "div",
-    {
-      "data-panel-stage": !0,
-      "aria-hidden": "true",
-      className: "gloss-panel-chrome-v2__stage",
-      children: e
-    }
-  );
-}
-function Ve({ children: e }) {
-  return /* @__PURE__ */ n("div", { className: "gloss-panel-chrome-v2__navigation", children: e });
-}
-function Be({ children: e }) {
-  return /* @__PURE__ */ n("div", { className: "gloss-panel-chrome-v2__body", children: e });
-}
-function Ke({ left: e, right: t }) {
-  return /* @__PURE__ */ p("div", { className: "gloss-panel-chrome-v2__footer", children: [
-    /* @__PURE__ */ n("div", { className: "gloss-panel-chrome-v2__footer-left", children: e }),
-    /* @__PURE__ */ n("div", { className: "gloss-panel-chrome-v2__footer-right", children: t })
-  ] });
-}
-function Ye({
-  children: e,
-  onClose: t,
-  title: l,
-  variant: o = "no-stage",
-  stage: a,
-  navigation: i,
-  footer: u
-}) {
-  return /* @__PURE__ */ p(
-    "div",
-    {
-      "data-chrome": "panel-v2",
-      "data-chrome-variant": o,
-      role: "dialog",
-      "aria-modal": "true",
-      className: `gloss-panel-chrome-v2 gloss-panel-chrome-v2--${o}`,
-      children: [
-        /* @__PURE__ */ n(ze, { title: l, onClose: t }),
-        o === "with-stage" && /* @__PURE__ */ n(He, { children: a }),
-        i != null && /* @__PURE__ */ n(Ve, { children: i }),
-        /* @__PURE__ */ n(Be, { children: e }),
-        u != null && /* @__PURE__ */ n(Ke, { left: u.left, right: u.right })
-      ]
-    }
-  );
-}
-function Ot({ primary: e, secondary: t }) {
-  return /* @__PURE__ */ p("div", { className: "gloss-panel-chrome-v2__footer-msg", children: [
+function Pt({ 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 })
   ] });
 }
-function We({
+function Ve({
   value: e,
   onChange: t,
-  enabled: l = !1,
+  enabled: r = !1,
   onToggleEnabled: o
 }) {
   const a = "settings-threshold-enabled";
-  return /* @__PURE__ */ p("div", { className: "settings-shell__field settings-shell__field--threshold", children: [
-    /* @__PURE__ */ p("div", { className: "settings-shell__toggle-row", children: [
+  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(
         "input",
@@ -105,16 +39,16 @@ function We({
           type: "checkbox",
           role: "switch",
           "aria-label": "Enable threshold indicator",
-          "aria-checked": l,
-          checked: l,
+          "aria-checked": r,
+          checked: r,
           onChange: (i) => o?.(i.target.checked),
           className: "settings-shell__toggle"
         }
       )
     ] }),
-    l ? /* @__PURE__ */ p(R, { children: [
+    r ? /* @__PURE__ */ f(L, { children: [
       /* @__PURE__ */ n("span", { className: "settings-shell__label", "aria-hidden": "true", children: "Alert level (%)" }),
-      /* @__PURE__ */ p("div", { className: "settings-shell__slider-row", children: [
+      /* @__PURE__ */ f("div", { className: "settings-shell__slider-row", children: [
         /* @__PURE__ */ n(
           "input",
           {
@@ -131,7 +65,7 @@ function We({
             className: "settings-shell__slider"
           }
         ),
-        /* @__PURE__ */ p("span", { className: "settings-shell__slider-value", "aria-live": "polite", children: [
+        /* @__PURE__ */ f("span", { className: "settings-shell__slider-value", "aria-live": "polite", children: [
           e,
           "%"
         ] })
@@ -139,10 +73,10 @@ function We({
     ] }) : /* @__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." })
   ] });
 }
-function Ge({ value: e, onChange: t }) {
-  return /* @__PURE__ */ p("div", { className: "settings-shell__field settings-shell__field--timeframe", children: [
+function Be({ 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__ */ p("div", { className: "settings-shell__slider-row", children: [
+    /* @__PURE__ */ f("div", { className: "settings-shell__slider-row", children: [
       /* @__PURE__ */ n(
         "input",
         {
@@ -159,25 +93,25 @@ function Ge({ value: e, onChange: t }) {
           className: "settings-shell__slider"
         }
       ),
-      /* @__PURE__ */ p("span", { className: "settings-shell__slider-value", "aria-live": "polite", children: [
+      /* @__PURE__ */ f("span", { className: "settings-shell__slider-value", "aria-live": "polite", children: [
         e,
         " days"
       ] })
     ] })
   ] });
 }
-function Qe({ id: e, onRemove: t }) {
-  const { attributes: l, listeners: o, setNodeRef: a, transform: i, transition: u, isDragging: r } = Re({ id: e }), s = {
-    transform: Fe.Transform.toString(i),
+function Ke({ id: e, onRemove: t }) {
+  const { attributes: r, listeners: o, setNodeRef: a, transform: i, transition: u, isDragging: l } = Ue({ id: e }), s = {
+    transform: ze.Transform.toString(i),
     transition: u,
-    opacity: r ? 0.6 : 1
+    opacity: l ? 0.6 : 1
   };
-  return /* @__PURE__ */ p(
+  return /* @__PURE__ */ f(
     "li",
     {
       ref: a,
       style: s,
-      className: `settings-shell__slot-pill${r ? " settings-shell__slot-pill--dragging" : ""}`,
+      className: `settings-shell__slot-pill${l ? " settings-shell__slot-pill--dragging" : ""}`,
       children: [
         /* @__PURE__ */ n(
           "button",
@@ -185,7 +119,7 @@ function Qe({ id: e, onRemove: t }) {
             type: "button",
             className: "settings-shell__slot-pill__handle",
             "aria-label": `Reorder ${e}`,
-            ...l,
+            ...r,
             ...o,
             children: /* @__PURE__ */ n("span", { "aria-hidden": "true", className: "settings-shell__slot-pill__grip", children: "⋮⋮" })
           }
@@ -205,35 +139,35 @@ function Qe({ id: e, onRemove: t }) {
     }
   );
 }
-function qe({ value: e, onChange: t }) {
-  const l = xe(
-    ie(Ae, { activationConstraint: { distance: 4 } }),
-    ie(ke, { coordinateGetter: Le })
-  ), o = F.useRef(!1), [a, i] = F.useState(!1), u = (s) => {
+function Ye({ value: e, onChange: t }) {
+  const r = ke(
+    ce(De, { activationConstraint: { distance: 4 } }),
+    ce(Le, { coordinateGetter: Ie })
+  ), o = H.useRef(!1), [a, i] = H.useState(!1), u = (s) => {
     const { active: c, over: d } = s;
     if (!d || c.id === d.id) return;
-    const h = e.findIndex((b) => b === c.id), f = e.findIndex((b) => b === d.id);
-    h === -1 || f === -1 || t($e([...e], h, f));
-  }, r = (s) => {
+    const m = e.findIndex((b) => b === c.id), h = e.findIndex((b) => b === d.id);
+    m === -1 || h === -1 || t(Fe([...e], m, h));
+  }, l = (s) => {
     o.current || (o.current = !0, i(!0)), t(e.filter((c) => c !== s));
   };
-  return /* @__PURE__ */ p("div", { className: "settings-shell__field settings-shell__field--slots", "aria-label": "Stack slots", children: [
+  return /* @__PURE__ */ f("div", { className: "settings-shell__field settings-shell__field--slots", "aria-label": "Stack slots", children: [
     /* @__PURE__ */ n("span", { className: "settings-shell__label", children: "Stack slots" }),
-    /* @__PURE__ */ n(De, { sensors: l, collisionDetection: Oe, onDragEnd: u, children: /* @__PURE__ */ n(Ie, { items: [...e], strategy: Me, children: /* @__PURE__ */ n("ul", { className: "settings-shell__slots-list", role: "list", children: e.map((s) => /* @__PURE__ */ n(Qe, { id: s, onRemove: () => r(s) }, s)) }) }) }),
+    /* @__PURE__ */ n(Oe, { sensors: r, collisionDetection: Me, onDragEnd: u, children: /* @__PURE__ */ n($e, { items: [...e], strategy: Re, children: /* @__PURE__ */ n("ul", { className: "settings-shell__slots-list", role: "list", children: e.map((s) => /* @__PURE__ */ n(Ke, { id: s, onRemove: () => l(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" })
   ] });
 }
-const je = ["#1d6fd8", "#10b981", "#f59e0b", "#ef4444", "#8b5cf6"];
-function Ze({
+const We = ["#1d6fd8", "#10b981", "#f59e0b", "#ef4444", "#8b5cf6"];
+function Ge({
   value: e,
   onSelect: t,
-  enabled: l = !1,
+  enabled: r = !1,
   onToggleEnabled: o
 }) {
   const a = "settings-accent-enabled";
-  return /* @__PURE__ */ p("div", { className: "settings-shell__field settings-shell__field--color", role: "group", "aria-label": "Accent color", children: [
-    /* @__PURE__ */ p("div", { className: "settings-shell__toggle-row", children: [
+  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(
         "input",
@@ -242,16 +176,16 @@ function Ze({
           type: "checkbox",
           role: "switch",
           "aria-label": "Enable accent override",
-          "aria-checked": l,
-          checked: l,
+          "aria-checked": r,
+          checked: r,
           onChange: (i) => o?.(i.target.checked),
           className: "settings-shell__toggle"
         }
       )
     ] }),
-    l ? /* @__PURE__ */ p(R, { children: [
+    r ? /* @__PURE__ */ f(L, { children: [
       /* @__PURE__ */ n("span", { className: "settings-shell__label", children: "Accent color" }),
-      /* @__PURE__ */ n("div", { className: "settings-shell__swatch-row", children: je.map((i) => {
+      /* @__PURE__ */ n("div", { className: "settings-shell__swatch-row", children: We.map((i) => {
         const u = e === i;
         return /* @__PURE__ */ n(
           "button",
@@ -269,51 +203,51 @@ function Ze({
     ] }) : /* @__PURE__ */ n("p", { className: "settings-shell__help", "aria-live": "polite", children: "Off — the card uses its default accent. Turn on to override." })
   ] });
 }
-const Xe = ["Orders", "Quota", "Unassigned"], Je = ["threshold", "timeframe", "color"];
-function Lt({
+const Qe = ["Orders", "Quota", "Unassigned"], qe = ["threshold", "timeframe", "color"];
+function xt({
   isOpen: e,
   cardSpan: t,
-  cardLabel: l = "Metric",
+  cardLabel: r = "Metric",
   cardValue: o = "—",
   previewSlot: a,
-  dimensions: i = Je,
+  dimensions: i = qe,
   initialTab: u,
-  initialValues: r
+  initialValues: l
 }) {
-  const s = H(), c = s?.state.activeTrigger, d = c?.kind === "card-overflow" ? c.cardId : null, h = he(), f = c?.span, b = t ?? f ?? 1, m = i[0] ?? "threshold", [v, w] = F.useState(u ?? m);
-  F.useEffect(() => {
-    i.includes(v) || w(m);
-  }, [i, v, m]);
-  const C = d != null ? s?.state?.bufferByCard?.[d]?.changes ?? {} : {}, y = typeof C.threshold == "number" ? C.threshold : typeof r?.threshold == "number" ? r.threshold : 80, D = typeof C.timeframe == "number" ? C.timeframe : typeof r?.timeframe == "number" ? r.timeframe : 30, B = typeof C.accent == "string" ? C.accent : typeof r?.accent == "string" ? r.accent : null, K = Array.isArray(C.slots) ? C.slots : Array.isArray(r?.slots) ? r.slots : Xe, O = typeof C.thresholdEnabled == "boolean" ? C.thresholdEnabled : typeof r?.thresholdEnabled == "boolean" ? r.thresholdEnabled : !1, Y = typeof C.accentEnabled == "boolean" ? C.accentEnabled : typeof r?.accentEnabled == "boolean" ? r.accentEnabled : !1, W = (P) => {
+  const s = I(), c = s?.state.activeTrigger, d = c?.kind === "card-overflow" ? c.cardId : null, m = fe(), h = c?.span, b = t ?? h ?? 1, p = i[0] ?? "threshold", [v, E] = H.useState(u ?? p);
+  H.useEffect(() => {
+    i.includes(v) || E(p);
+  }, [i, v, p]);
+  const y = d != null ? s?.state?.bufferByCard?.[d]?.changes ?? {} : {}, N = typeof y.threshold == "number" ? y.threshold : typeof l?.threshold == "number" ? l.threshold : 80, O = typeof y.timeframe == "number" ? y.timeframe : typeof l?.timeframe == "number" ? l.timeframe : 30, R = typeof y.accent == "string" ? y.accent : typeof l?.accent == "string" ? l.accent : null, F = Array.isArray(y.slots) ? y.slots : Array.isArray(l?.slots) ? l.slots : Qe, T = typeof y.thresholdEnabled == "boolean" ? y.thresholdEnabled : typeof l?.thresholdEnabled == "boolean" ? l.thresholdEnabled : !1, M = typeof y.accentEnabled == "boolean" ? y.accentEnabled : typeof l?.accentEnabled == "boolean" ? l.accentEnabled : !1, W = (P) => {
     d == null || s == null || s.dispatch({ type: "SET_BUFFER_VALUE", cardId: d, key: "threshold", value: Number(P.target.value) });
   }, G = (P) => {
     d == null || s == null || s.dispatch({ type: "SET_BUFFER_VALUE", cardId: d, key: "timeframe", value: Number(P.target.value) });
-  }, le = (P) => {
+  }, oe = (P) => {
     d == null || s == null || s.dispatch({ type: "SET_BUFFER_VALUE", cardId: d, key: "accent", value: P });
   }, Q = (P) => {
     d == null || s == null || s.dispatch({ type: "SET_BUFFER_VALUE", cardId: d, key: "slots", value: P });
-  }, g = (P) => {
+  }, q = (P) => {
     d == null || s == null || s.dispatch({ type: "SET_BUFFER_VALUE", cardId: d, key: "thresholdEnabled", value: P });
-  }, N = (P) => {
+  }, g = (P) => {
     d == null || s == null || s.dispatch({ type: "SET_BUFFER_VALUE", cardId: d, key: "accentEnabled", value: P });
-  }, T = s?.state.isDirty ?? !1, E = d;
+  }, C = s?.state.isDirty ?? !1, w = d;
   return /* @__PURE__ */ n(
-    Ye,
+    K,
     {
       variant: "with-stage",
       title: "Configure metric",
       onClose: () => s?.dispatch({ type: "CLOSE_PANEL", reason: "header-x" }),
-      stage: /* @__PURE__ */ n(Ue, { span: b, rotating: !h, children: a ?? /* @__PURE__ */ p(R, { children: [
-        /* @__PURE__ */ n("div", { style: { fontSize: 9, textTransform: "uppercase", letterSpacing: "0.06em", color: "#9ca3af", marginBottom: 6 }, children: l }),
+      stage: /* @__PURE__ */ n(He, { span: b, rotating: !m, children: a ?? /* @__PURE__ */ f(L, { 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: o })
       ] }) }),
       navigation: /* @__PURE__ */ n(
-        Se,
+        we,
         {
           dimensions: i,
           activeTab: v,
-          onSelect: w,
-          reduced: h
+          onSelect: E,
+          reduced: m
         }
       ),
       footer: {
@@ -323,14 +257,14 @@ function Lt({
             id: "btn-reset",
             type: "button",
             className: "gloss-panel-chrome-v2__footer-btn",
-            disabled: !T,
+            disabled: !C,
             onClick: () => {
-              E != null && s?.dispatch({ type: "CLEAR_BUFFER", cardId: E });
+              w != null && s?.dispatch({ type: "CLEAR_BUFFER", cardId: w });
             },
             children: "Reset"
           }
         ),
-        right: /* @__PURE__ */ p(R, { children: [
+        right: /* @__PURE__ */ f(L, { children: [
           /* @__PURE__ */ n(
             "button",
             {
@@ -347,14 +281,14 @@ function Lt({
               id: "settings-apply",
               type: "button",
               className: "gloss-panel-chrome-v2__footer-btn gloss-panel-chrome-v2__footer-btn--primary",
-              disabled: !T,
+              disabled: !C,
               onClick: () => s?.dispatch({ type: "CLOSE_PANEL", reason: "apply-button" }),
               children: "Apply"
             }
           )
         ] })
       },
-      children: /* @__PURE__ */ n("div", { className: "settings-shell", "data-shell": "settings", "aria-hidden": !e, children: /* @__PURE__ */ p(
+      children: /* @__PURE__ */ n("div", { className: "settings-shell", "data-shell": "settings", "aria-hidden": !e, children: /* @__PURE__ */ f(
         "div",
         {
           role: "tabpanel",
@@ -364,23 +298,23 @@ function Lt({
           className: "settings-shell__tabpanel",
           children: [
             v === "threshold" && /* @__PURE__ */ n(
-              We,
+              Ve,
               {
-                value: y,
+                value: N,
                 onChange: W,
-                enabled: O,
-                onToggleEnabled: g
+                enabled: T,
+                onToggleEnabled: q
               }
             ),
-            v === "timeframe" && /* @__PURE__ */ n(Ge, { value: D, onChange: G }),
-            v === "slots" && /* @__PURE__ */ n(qe, { value: K, onChange: Q }),
+            v === "timeframe" && /* @__PURE__ */ n(Be, { value: O, onChange: G }),
+            v === "slots" && /* @__PURE__ */ n(Ye, { value: F, onChange: Q }),
             v === "color" && /* @__PURE__ */ n(
-              Ze,
+              Ge,
               {
-                value: B,
-                onSelect: le,
-                enabled: Y,
-                onToggleEnabled: N
+                value: R,
+                onSelect: oe,
+                enabled: M,
+                onToggleEnabled: g
               }
             )
           ]
@@ -389,7 +323,7 @@ function Lt({
     }
   );
 }
-const be = [
+const ve = [
   "Overbought",
   "What's selling",
   "On track vs plan",
@@ -397,7 +331,7 @@ const be = [
   "Vendor performance",
   "Assortment mix",
   "Customer retention"
-], ve = "Overbought", ae = {
+], ye = "Overbought", ae = {
   Overbought: {
     headline: "Am I overbought?",
     helper: "Find slow-moving inventory before discount cycles eat margin."
@@ -428,7 +362,7 @@ const be = [
   }
 };
 ae["Customer retention"].beta = !0;
-const ye = {
+const _e = {
   Overbought: {
     primary: [
       {
@@ -893,16 +827,16 @@ const ye = {
     ]
   }
 };
-function _e({
+function Ce({
   lenses: e,
   activeLens: t,
-  onLensChange: l,
+  onLensChange: r,
   variant: o = "pills",
   lensMeta: a = ae
 }) {
   return o === "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, r = a[i], s = ["cat-pill"];
-    return u && s.push("active"), /* @__PURE__ */ p(
+    const u = i === t, l = a[i], s = ["cat-pill"];
+    return u && s.push("active"), /* @__PURE__ */ f(
       "button",
       {
         type: "button",
@@ -911,28 +845,28 @@ function _e({
         className: s.join(" "),
         "data-lens": i,
         onClick: () => {
-          u || l(i);
+          u || r(i);
         },
         children: [
           i,
-          r?.beta && /* @__PURE__ */ n("span", { className: "cat-pill-beta", "aria-label": "Beta", children: "BETA" })
+          l?.beta && /* @__PURE__ */ n("span", { className: "cat-pill-beta", "aria-label": "Beta", children: "BETA" })
         ]
       },
       i
     );
-  }) }) }) : /* @__PURE__ */ n(et, { lenses: e, activeLens: t, onLensChange: l });
+  }) }) }) : /* @__PURE__ */ n(je, { lenses: e, activeLens: t, onLensChange: r });
 }
-function et({
+function je({
   lenses: e,
   activeLens: t,
-  onLensChange: l
+  onLensChange: r
 }) {
-  const [o, a] = x(!1), i = V(null), u = () => {
+  const [o, a] = x(!1), i = Y(null), u = () => {
     i.current != null && (window.clearTimeout(i.current), i.current = null);
-  }, r = () => {
+  }, l = () => {
     u(), i.current = window.setTimeout(() => a(!1), 100);
   }, s = e.filter((c) => c !== t);
-  return /* @__PURE__ */ n("div", { className: "cat-segmented-wrap", children: /* @__PURE__ */ p("div", { className: "cat-segmented", children: [
+  return /* @__PURE__ */ n("div", { className: "cat-segmented-wrap", children: /* @__PURE__ */ f("div", { className: "cat-segmented", children: [
     /* @__PURE__ */ n(
       "button",
       {
@@ -943,14 +877,14 @@ function et({
         children: t
       }
     ),
-    /* @__PURE__ */ p(
+    /* @__PURE__ */ f(
       "div",
       {
         className: "cat-seg-more",
         onMouseEnter: () => {
           u(), a(!0);
         },
-        onMouseLeave: r,
+        onMouseLeave: l,
         children: [
           /* @__PURE__ */ n("button", { type: "button", className: "cat-seg cat-seg-more-btn", "aria-haspopup": "menu", "aria-expanded": o, children: "More ▾" }),
           o && /* @__PURE__ */ n(
@@ -959,7 +893,7 @@ function et({
               className: "cat-seg-overflow",
               role: "menu",
               onMouseEnter: u,
-              onMouseLeave: r,
+              onMouseLeave: l,
               children: s.map((c) => /* @__PURE__ */ n(
                 "button",
                 {
@@ -967,7 +901,7 @@ function et({
                   "data-lens": c,
                   role: "menuitem",
                   onClick: () => {
-                    l(c), a(!1);
+                    r(c), a(!1);
                   },
                   children: c
                 },
@@ -980,23 +914,23 @@ function et({
     )
   ] }) });
 }
-function te({ tiles: e, selectedTileId: t, onSelectTile: l, renderTile: o }) {
+function te({ tiles: e, selectedTileId: t, onSelectTile: r, renderTile: o }) {
   return /* @__PURE__ */ n("div", { className: "cat-tiles", children: e.map((a) => {
     const i = a.id === t, u = a.subStats != null && a.subStats.length > 0;
-    let r = null;
-    u ? a.subStats.length === 5 ? r = "span-5" : a.subStats.length === 3 ? r = "span-3" : r = "span-2" : a.stack === !0 && (r = "span-2");
+    let l = null;
+    u ? a.subStats.length === 5 ? l = "span-5" : a.subStats.length === 3 ? l = "span-3" : l = "span-2" : a.stack === !0 && (l = "span-2");
     const s = ["cat-tile"];
-    r && s.push(r), i && s.push("selected"), a.isNew && s.push("is-new"), a.startHere && s.push("start-here"), a.donut && s.push("has-donut");
+    l && s.push(l), i && s.push("selected"), a.isNew && s.push("is-new"), a.startHere && s.push("start-here"), a.donut && s.push("has-donut");
     const c = 1;
     let d = 0.7;
     if (a.donut) {
-      const h = /([\d.]+)\s*%/.exec(a.value);
-      if (h) {
-        const f = parseFloat(h[1]);
-        Number.isFinite(f) && (d = Math.max(0, Math.min(1, f / 100)));
+      const m = /([\d.]+)\s*%/.exec(a.value);
+      if (m) {
+        const h = parseFloat(m[1]);
+        Number.isFinite(h) && (d = Math.max(0, Math.min(1, h / 100)));
       }
     }
-    return /* @__PURE__ */ p(
+    return /* @__PURE__ */ f(
       "button",
       {
         type: "button",
@@ -1007,7 +941,7 @@ function te({ tiles: e, selectedTileId: t, onSelectTile: l, renderTile: o }) {
         "data-donut": a.donut ? "true" : void 0,
         "data-accent": a.accent,
         "aria-pressed": i,
-        onClick: () => l(a.id, a.desc),
+        onClick: () => r(a.id, a.desc),
         style: a.accent ? { "--cat-tile-accent": a.accent } : void 0,
         children: [
           a.startHere && /* @__PURE__ */ n("span", { className: "cat-tile-start-here", "aria-hidden": "true", children: "START HERE" }),
@@ -1019,7 +953,7 @@ function te({ tiles: e, selectedTileId: t, onSelectTile: l, renderTile: o }) {
               style: { pointerEvents: "none", width: "100%", height: "100%" },
               "aria-hidden": "true",
               children: a.donut ? /* @__PURE__ */ n(
-                ce,
+                de,
                 {
                   variant: "donut",
                   label: a.label,
@@ -1030,7 +964,7 @@ function te({ tiles: e, selectedTileId: t, onSelectTile: l, renderTile: o }) {
                   colSpan: c
                 }
               ) : /* @__PURE__ */ n(
-                ce,
+                de,
                 {
                   variant: "standard",
                   label: a.label,
@@ -1040,7 +974,7 @@ function te({ tiles: e, selectedTileId: t, onSelectTile: l, renderTile: o }) {
               )
             }
           ),
-          a.variants && a.variants.length > 0 && /* @__PURE__ */ n("span", { className: "cat-tile-variants", "aria-hidden": "true", children: a.variants.map((h) => /* @__PURE__ */ n("span", { children: h }, h)) }),
+          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" })
         ]
       },
@@ -1048,17 +982,17 @@ function te({ tiles: e, selectedTileId: t, onSelectTile: l, renderTile: o }) {
     );
   }) });
 }
-const se = fe(null);
-function tt() {
-  return ge(se);
+const se = ge(null);
+function re() {
+  return be(se);
 }
-function nt({ mode: e, dispatch: t }) {
-  const l = tt();
-  if (l == null && e == null) return null;
-  const o = l?.mode ?? e ?? "add", a = l?.selectedTileId ?? null, i = l?.description ?? null, u = a == null;
-  return /* @__PURE__ */ p("div", { className: "panel-footer catalog", children: [
+function At({ mode: e, dispatch: t }) {
+  const r = re();
+  if (r == null && e == null) return null;
+  const o = r?.mode ?? e ?? "add", a = r?.selectedTileId ?? null, i = r?.description ?? null, u = a == 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__ */ p("div", { style: { display: "flex", padding: "10px 14px", gap: 8 }, children: [
+    /* @__PURE__ */ f("div", { style: { display: "flex", padding: "10px 14px", gap: 8 }, children: [
       /* @__PURE__ */ n("div", { className: "spacer", style: { flex: 1 } }),
       /* @__PURE__ */ n(
         "button",
@@ -1095,155 +1029,223 @@ function nt({ mode: e, dispatch: t }) {
     ] })
   ] });
 }
-function de(e, t) {
+function ue(e, t) {
   if (t.length === 0) return !0;
-  const l = t.toLowerCase();
-  if (e.label.toLowerCase().includes(l) || e.value.toLowerCase().includes(l)) return !0;
+  const r = t.toLowerCase();
+  if (e.label.toLowerCase().includes(r) || e.value.toLowerCase().includes(r)) return !0;
   if (e.subStats) {
     for (const o of e.subStats)
-      if (o.label.toLowerCase().includes(l) || o.value.toLowerCase().includes(l)) return !0;
+      if (o.label.toLowerCase().includes(r) || o.value.toLowerCase().includes(r)) return !0;
   }
   return !1;
 }
-function It({
+function Ze() {
+  const t = re()?.description ?? null;
+  return t == null ? /* @__PURE__ */ n("em", { children: "Tap a metric to see its description" }) : /* @__PURE__ */ n(L, { children: t });
+}
+function kt({
   isOpen: e,
-  lenses: t = be,
-  defaultLens: l = ve,
-  tilesByLens: o = ye,
+  lenses: t = ve,
+  defaultLens: r = ye,
+  tilesByLens: o = _e,
   lensMeta: a = ae,
-  footerSlot: i,
-  renderTile: u
+  renderTile: i
 }) {
-  const [r, s] = x(l), [c, d] = x(null), [h, f] = x(null), [b, m] = x(""), v = o[r] ?? { primary: [] }, w = a[r], S = oe(
-    () => v.primary.filter((y) => de(y, b)),
+  const u = I(), [l, s] = x(r), [c, d] = x(null), [m, h] = x(null), [b, p] = x(""), v = o[l] ?? { primary: [] }, E = a[l], S = ie(
+    () => v.primary.filter((T) => ue(T, b)),
     [v.primary, b]
-  ), C = oe(
-    () => (v.secondary ?? []).filter((y) => de(y, b)),
+  ), y = ie(
+    () => (v.secondary ?? []).filter((T) => ue(T, b)),
     [v.secondary, b]
-  );
-  return /* @__PURE__ */ p(
+  ), N = () => u?.dispatch({ type: "CLOSE_PANEL", reason: "cancel-button" }), O = () => u?.dispatch({ type: "CLOSE_PANEL", reason: "apply-button" }), R = () => u?.dispatch({ type: "CLOSE_PANEL", reason: "header-x" }), F = c == null;
+  return /* @__PURE__ */ n(
     se.Provider,
     {
-      value: { mode: "add", selectedTileId: c, description: h },
-      children: [
-        /* @__PURE__ */ p("div", { "data-shell": "catalog-add", "aria-hidden": !e, children: [
-          /* @__PURE__ */ n("div", { className: "cat-search", children: /* @__PURE__ */ n(
-            "input",
-            {
-              type: "search",
-              className: "cat-search-input",
-              placeholder: "Search metrics",
-              "aria-label": "Search metrics",
-              value: b,
-              onChange: (y) => m(y.target.value)
-            }
-          ) }),
-          /* @__PURE__ */ n(
-            _e,
-            {
-              lenses: t,
-              activeLens: r,
-              lensMeta: a,
-              variant: "pills",
-              onLensChange: (y) => {
-                s(y), d(null), f(null), m("");
+      value: { mode: "add", selectedTileId: c, description: m },
+      children: /* @__PURE__ */ n(
+        K,
+        {
+          variant: "no-stage",
+          title: "Add a metric",
+          onClose: R,
+          footer: {
+            left: /* @__PURE__ */ n(Ze, {}),
+            right: /* @__PURE__ */ f(L, { children: [
+              /* @__PURE__ */ n(
+                "button",
+                {
+                  id: "btn-cat-cancel",
+                  type: "button",
+                  className: "gloss-panel-chrome-v2__footer-btn",
+                  onClick: N,
+                  children: "Cancel"
+                }
+              ),
+              /* @__PURE__ */ n(
+                "button",
+                {
+                  id: "btn-cat-add",
+                  type: "button",
+                  className: "gloss-panel-chrome-v2__footer-btn gloss-panel-chrome-v2__footer-btn--primary",
+                  disabled: F,
+                  onClick: O,
+                  children: "Add metric"
+                }
+              )
+            ] })
+          },
+          children: /* @__PURE__ */ f("div", { "data-shell": "catalog-add", "aria-hidden": !e, children: [
+            /* @__PURE__ */ n("div", { className: "cat-search", children: /* @__PURE__ */ n(
+              "input",
+              {
+                type: "search",
+                className: "cat-search-input",
+                placeholder: "Search metrics",
+                "aria-label": "Search metrics",
+                value: b,
+                onChange: (T) => p(T.target.value)
               }
-            }
-          ),
-          w && /* @__PURE__ */ p("div", { className: "cat-lens-meta", children: [
-            /* @__PURE__ */ n("h3", { className: "cat-lens-headline", children: w.headline }),
-            /* @__PURE__ */ n("p", { className: "cat-lens-helper", children: w.helper })
-          ] }),
-          /* @__PURE__ */ n(
-            te,
-            {
-              tiles: S,
-              selectedTileId: c,
-              onSelectTile: (y, D) => {
-                d(y), f(D);
-              },
-              renderTile: u
-            }
-          ),
-          C.length > 0 && /* @__PURE__ */ p("div", { className: "cat-more-in-lens", children: [
-            /* @__PURE__ */ n("div", { className: "cat-more-in-lens__heading", children: "MORE IN THIS LENS" }),
+            ) }),
+            /* @__PURE__ */ n(
+              Ce,
+              {
+                lenses: t,
+                activeLens: l,
+                lensMeta: a,
+                variant: "pills",
+                onLensChange: (T) => {
+                  s(T), d(null), h(null), p("");
+                }
+              }
+            ),
+            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__ */ n(
               te,
               {
-                tiles: C,
+                tiles: S,
                 selectedTileId: c,
-                onSelectTile: (y, D) => {
-                  d(y), f(D);
+                onSelectTile: (T, M) => {
+                  d(T), h(M);
                 },
-                renderTile: u
+                renderTile: i
               }
-            )
-          ] }),
-          S.length === 0 && C.length === 0 && b.length > 0 && /* @__PURE__ */ p("div", { className: "cat-empty", children: [
-            'No metrics match "',
-            b,
-            '".'
+            ),
+            y.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(
+                te,
+                {
+                  tiles: y,
+                  selectedTileId: c,
+                  onSelectTile: (T, M) => {
+                    d(T), h(M);
+                  },
+                  renderTile: i
+                }
+              )
+            ] }),
+            S.length === 0 && y.length === 0 && b.length > 0 && /* @__PURE__ */ f("div", { className: "cat-empty", children: [
+              'No metrics match "',
+              b,
+              '".'
+            ] })
           ] })
-        ] }),
-        i
-      ]
+        }
+      )
     }
   );
 }
-function Mt({
+function Xe() {
+  const t = re()?.description ?? null;
+  return t == null ? /* @__PURE__ */ n("em", { children: "Tap a metric to see its description" }) : /* @__PURE__ */ n(L, { children: t });
+}
+function Dt({
   isOpen: e,
   replacingLabel: t,
-  lenses: l = be,
-  defaultLens: o = ve,
-  tilesByLens: a = ye,
-  footerSlot: i,
-  renderTile: u
+  lenses: r = ve,
+  defaultLens: o = ye,
+  tilesByLens: a = _e,
+  renderTile: i
 }) {
-  const [r, s] = x(o), [c, d] = x(null), [h, f] = x(null), b = a[r] ?? { primary: [] }, m = [...b.primary, ...b.secondary ?? []];
-  return /* @__PURE__ */ p(
+  const u = I(), [l, s] = x(o), [c, d] = x(null), [m, h] = x(null), b = a[l] ?? { primary: [] }, p = [...b.primary, ...b.secondary ?? []], v = () => u?.dispatch({ type: "CLOSE_PANEL", reason: "cancel-button" }), E = () => u?.dispatch({ type: "CLOSE_PANEL", reason: "apply-button" }), S = () => u?.dispatch({ type: "CLOSE_PANEL", reason: "header-x" }), y = c == null;
+  return /* @__PURE__ */ n(
     se.Provider,
     {
-      value: { mode: "replace", selectedTileId: c, description: h },
-      children: [
-        /* @__PURE__ */ p("div", { "data-shell": "catalog-replace", "aria-hidden": !e, children: [
-          t && /* @__PURE__ */ p("p", { className: "cat-subtitle", children: [
-            "replacing ",
-            t
-          ] }),
-          /* @__PURE__ */ n(
-            _e,
-            {
-              lenses: l,
-              activeLens: r,
-              onLensChange: (v) => {
-                s(v), d(null), f(null);
+      value: { mode: "replace", selectedTileId: c, description: m },
+      children: /* @__PURE__ */ n(
+        K,
+        {
+          variant: "no-stage",
+          title: "Replace metric",
+          onClose: S,
+          footer: {
+            left: /* @__PURE__ */ n(Xe, {}),
+            right: /* @__PURE__ */ f(L, { children: [
+              /* @__PURE__ */ n(
+                "button",
+                {
+                  id: "btn-cat-cancel",
+                  type: "button",
+                  className: "gloss-panel-chrome-v2__footer-btn",
+                  onClick: v,
+                  children: "Cancel"
+                }
+              ),
+              /* @__PURE__ */ n(
+                "button",
+                {
+                  id: "btn-cat-replace",
+                  type: "button",
+                  className: "gloss-panel-chrome-v2__footer-btn gloss-panel-chrome-v2__footer-btn--primary",
+                  disabled: y,
+                  onClick: E,
+                  children: "Replace metric"
+                }
+              )
+            ] })
+          },
+          children: /* @__PURE__ */ f("div", { "data-shell": "catalog-replace", "aria-hidden": !e, children: [
+            t && /* @__PURE__ */ f("p", { className: "cat-subtitle", children: [
+              "replacing ",
+              t
+            ] }),
+            /* @__PURE__ */ n(
+              Ce,
+              {
+                lenses: r,
+                activeLens: l,
+                onLensChange: (N) => {
+                  s(N), d(null), h(null);
+                }
               }
-            }
-          ),
-          /* @__PURE__ */ n(
-            te,
-            {
-              tiles: m,
-              selectedTileId: c,
-              onSelectTile: (v, w) => {
-                d(v), f(w);
-              },
-              renderTile: u
-            }
-          )
-        ] }),
-        i
-      ]
+            ),
+            /* @__PURE__ */ n(
+              te,
+              {
+                tiles: p,
+                selectedTileId: c,
+                onSelectTile: (N, O) => {
+                  d(N), h(O);
+                },
+                renderTile: i
+              }
+            )
+          ] })
+        }
+      )
     }
   );
 }
-const Ce = fe(null);
-function Ne() {
-  return ge(Ce);
+const Ne = ge(null);
+function Te() {
+  return be(Ne);
 }
-function at(e = {}) {
-  const t = Ne(), l = t?.createPage, o = t?.setPages;
-  return /* @__PURE__ */ p(
+function Je(e = {}) {
+  const t = Te(), r = t?.createPage, o = t?.setPages;
+  return /* @__PURE__ */ f(
     "div",
     {
       className: "panel-footer pm",
@@ -1257,8 +1259,8 @@ function at(e = {}) {
             type: "button",
             className: "btn btn-primary",
             onClick: () => {
-              if (l) {
-                l();
+              if (r) {
+                r();
                 return;
               }
               o && o((a) => [
@@ -1273,28 +1275,28 @@ function at(e = {}) {
     }
   );
 }
-function ue({ page: e, onRename: t, onKebab: l, onDragStart: o, onSwitchPage: a }) {
-  const i = Ne(), [u, r] = x(!1), s = V(null);
-  I(() => {
+function pe({ page: e, onRename: t, onKebab: r, onDragStart: o, onSwitchPage: a }) {
+  const i = Te(), [u, l] = x(!1), s = Y(null);
+  U(() => {
     if (!u) return;
-    const m = (v) => {
-      s.current && (s.current.contains(v.target) || r(!1));
+    const p = (v) => {
+      s.current && (s.current.contains(v.target) || l(!1));
     };
-    return document.addEventListener("mousedown", m, !0), () => document.removeEventListener("mousedown", m, !0);
+    return document.addEventListener("mousedown", p, !0), () => document.removeEventListener("mousedown", p, !0);
   }, [u]);
   const c = () => {
-    if (r(!1), t) return t(e.id);
+    if (l(!1), t) return t(e.id);
     if (!i?.renamePage) return;
-    const m = window.prompt("Rename page", e.name);
-    m != null && m.trim().length > 0 && i.renamePage(e.id, m.trim());
+    const p = window.prompt("Rename page", e.name);
+    p != null && p.trim().length > 0 && i.renamePage(e.id, p.trim());
   }, d = () => {
-    r(!1), i?.duplicatePage?.(e.id);
-  }, h = () => {
-    r(!1), i?.deletePage?.(e.id);
-  }, f = (m) => {
-    m.stopPropagation(), a && !e.active && a(e.id);
+    l(!1), i?.duplicatePage?.(e.id);
+  }, m = () => {
+    l(!1), i?.deletePage?.(e.id);
+  }, h = (p) => {
+    p.stopPropagation(), a && !e.active && a(e.id);
   }, b = ["pm-row"];
-  return e.active && b.push("active"), /* @__PURE__ */ p("div", { ref: s, className: b.join(" "), "data-page-id": e.id, role: "listitem", children: [
+  return e.active && b.push("active"), /* @__PURE__ */ f("div", { ref: s, className: b.join(" "), "data-page-id": e.id, role: "listitem", children: [
     /* @__PURE__ */ n(
       "div",
       {
@@ -1310,9 +1312,9 @@ function ue({ page: e, onRename: t, onKebab: l, onDragStart: o, onSwitchPage: a
         className: "pm-name",
         role: a && !e.active ? "button" : void 0,
         tabIndex: a && !e.active ? 0 : void 0,
-        onClick: a ? f : void 0,
-        onKeyDown: (m) => {
-          !a || e.active || (m.key === "Enter" || m.key === " ") && (m.preventDefault(), m.stopPropagation(), a(e.id));
+        onClick: a ? h : void 0,
+        onKeyDown: (p) => {
+          !a || e.active || (p.key === "Enter" || p.key === " ") && (p.preventDefault(), p.stopPropagation(), a(e.id));
         },
         "aria-label": a && !e.active ? `Switch to ${e.name}` : void 0,
         children: e.name
@@ -1326,23 +1328,23 @@ function ue({ page: e, onRename: t, onKebab: l, onDragStart: o, onSwitchPage: a
         "aria-label": "Page options",
         "aria-haspopup": "menu",
         "aria-expanded": u,
-        onPointerDown: (m) => m.stopPropagation(),
-        onMouseDown: (m) => m.stopPropagation(),
-        onClick: (m) => {
-          if (m.stopPropagation(), l) return l(e.id);
-          r((v) => !v);
+        onPointerDown: (p) => p.stopPropagation(),
+        onMouseDown: (p) => p.stopPropagation(),
+        onClick: (p) => {
+          if (p.stopPropagation(), r) return r(e.id);
+          l((v) => !v);
         },
         children: "⋯"
       }
     ),
-    u && /* @__PURE__ */ p(
+    u && /* @__PURE__ */ f(
       "div",
       {
         className: "pm-kebab-menu",
         role: "menu",
         "data-page-id": e.id,
-        onPointerDown: (m) => m.stopPropagation(),
-        onMouseDown: (m) => m.stopPropagation(),
+        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" }),
@@ -1352,7 +1354,7 @@ function ue({ page: e, onRename: t, onKebab: l, onDragStart: o, onSwitchPage: a
               type: "button",
               role: "menuitem",
               className: "pm-kebab-menu__item pm-kebab-menu__item--danger",
-              onClick: h,
+              onClick: m,
               children: "Delete"
             }
           )
@@ -1361,116 +1363,121 @@ function ue({ page: e, onRename: t, onKebab: l, onDragStart: o, onSwitchPage: a
     )
   ] });
 }
-const st = [
+const et = [
   { id: "p-pipeline", name: "My Pipeline", active: !0 },
   { id: "p-numbers", name: "My Numbers", active: !1 },
   { id: "p-morning", name: "My Morning", active: !1 },
   { id: "p-accounts", name: "My Accounts", active: !1 }
 ];
-function $t({
+function Lt({
   isOpen: e,
-  pages: t = st,
-  footerSlot: l,
-  externalPages: o,
-  activePageId: a,
-  onRename: i,
-  onDuplicate: u,
-  onDelete: r,
-  onReorder: s,
-  onCreatePage: c,
-  onSwitchPage: d
+  pages: t = et,
+  externalPages: r,
+  activePageId: o,
+  onRename: a,
+  onDuplicate: i,
+  onDelete: u,
+  onReorder: l,
+  onCreatePage: s,
+  onSwitchPage: c
 }) {
-  const [h, f] = x(() => [...t]), b = k((g, N) => {
-    f((T) => T.map((E) => E.id === g ? { ...E, name: N } : E));
-  }, []), m = k((g) => {
-    f((N) => {
-      const T = N.find((M) => M.id === g);
-      if (!T) return N;
-      const E = {
-        id: `${T.id}-copy-${Date.now()}`,
-        name: `${T.name} copy`,
+  const d = I(), [m, h] = x(() => [...t]), b = D((g, C) => {
+    h((w) => w.map((A) => A.id === g ? { ...A, name: C } : A));
+  }, []), p = D((g) => {
+    h((C) => {
+      const w = C.find((z) => z.id === g);
+      if (!w) return C;
+      const A = {
+        id: `${w.id}-copy-${Date.now()}`,
+        name: `${w.name} copy`,
         active: !1
-      }, A = N.findIndex((M) => M.id === g);
-      return [...N.slice(0, A + 1), E, ...N.slice(A + 1)];
+      }, k = C.findIndex((z) => z.id === g);
+      return [...C.slice(0, k + 1), A, ...C.slice(k + 1)];
     });
-  }, []), v = k((g) => {
-    f((N) => N.filter((T) => T.id !== g));
-  }, []), w = k((g) => {
-    f((N) => {
-      const T = new Map(N.map((A) => [A.id, A])), E = g.map((A) => T.get(A)).filter(Boolean);
-      return E.length === N.length ? E : N;
+  }, []), v = D((g) => {
+    h((C) => C.filter((w) => w.id !== g));
+  }, []), E = D((g) => {
+    h((C) => {
+      const w = new Map(C.map((k) => [k.id, k])), A = g.map((k) => w.get(k)).filter(Boolean);
+      return A.length === C.length ? A : C;
     });
-  }, []), S = o != null, C = S ? o : h, y = a != null ? C.map((g) => ({ ...g, active: g.id === a })) : [...C], D = i ?? (S ? void 0 : b), B = u ?? (S ? void 0 : m), K = r ?? (S ? void 0 : v), O = s ?? (S ? void 0 : w), Y = k(
+  }, []), S = r != null, y = S ? r : m, N = o != null ? y.map((g) => ({ ...g, active: g.id === o })) : [...y], O = a ?? (S ? void 0 : b), R = i ?? (S ? void 0 : p), F = u ?? (S ? void 0 : v), T = l ?? (S ? void 0 : E), M = D(
     (g) => {
-      S || f(g);
+      S || h(g);
     },
     [S]
-  ), W = k(
+  ), W = D(
     (g) => {
-      const N = g[0]?.items.map((T) => T.id) ?? [];
-      N.length > 0 && O && O(N);
+      const C = g[0]?.items.map((w) => w.id) ?? [];
+      C.length > 0 && T && T(C);
     },
-    [O]
-  ), G = y.map((g) => `${g.id}:${g.name}`).join("|"), Q = O != null && y.length > 1 ? /* @__PURE__ */ n(
-    we,
+    [T]
+  ), G = N.map((g) => `${g.id}:${g.name}`).join("|"), Q = T != null && N.length > 1 ? /* @__PURE__ */ n(
+    Ee,
     {
       zones: [
         {
           zoneKey: "pm-pages",
-          items: y.map((g) => ({ ...g, id: g.id }))
+          items: N.map((g) => ({ ...g, id: g.id }))
         }
       ],
       onZoneChange: W,
-      renderZone: (g, N, T) => /* @__PURE__ */ n("div", { className: "pm-list", role: "list", children: T }),
+      renderZone: (g, C, w) => /* @__PURE__ */ n("div", { className: "pm-list", role: "list", children: w }),
       renderItem: (g) => /* @__PURE__ */ n(
-        ue,
+        pe,
         {
           page: g,
-          onSwitchPage: d
+          onSwitchPage: c
         },
         g.id
       )
     },
     G
-  ) : /* @__PURE__ */ n("div", { className: "pm-list", role: "list", children: y.map((g) => /* @__PURE__ */ n(
-    ue,
+  ) : /* @__PURE__ */ n("div", { className: "pm-list", role: "list", children: N.map((g) => /* @__PURE__ */ n(
+    pe,
     {
       page: g,
-      onSwitchPage: d
+      onSwitchPage: c
     },
     g.id
-  )) });
+  )) }), q = () => d?.dispatch({ type: "CLOSE_PANEL", reason: "header-x" });
   return /* @__PURE__ */ n(
-    Ce.Provider,
+    Ne.Provider,
     {
       value: {
-        pages: y,
-        setPages: Y,
-        renamePage: D,
-        duplicatePage: B,
-        deletePage: K,
+        pages: N,
+        setPages: M,
+        renamePage: O,
+        duplicatePage: R,
+        deletePage: F,
         // Sprint 2026-05-20 — propagate live create binding for footer.
-        createPage: c
+        createPage: s
       },
-      children: /* @__PURE__ */ p("div", { "data-shell": "page-management", "aria-hidden": !e, children: [
-        Q,
-        l != null && /* @__PURE__ */ n("div", { className: "pm-footer-pin", children: l })
-      ] })
+      children: /* @__PURE__ */ n(
+        K,
+        {
+          variant: "no-stage",
+          title: "Manage pages",
+          onClose: q,
+          footer: { right: /* @__PURE__ */ n(Je, {}) },
+          children: /* @__PURE__ */ n("div", { "data-shell": "page-management", "aria-hidden": !e, children: Q })
+        }
+      )
     }
   );
 }
-const Rt = {
+const Ot = {
   SETTINGS: "settings",
   CATALOG_ADD: "catalog-add",
   CATALOG_REPLACE: "catalog-replace",
   PAGE_MGMT: "page-management",
   NOTIFICATION_CENTER: "notification-center"
-}, rt = {
+}, tt = {
   position: "fixed",
   inset: 0,
   pointerEvents: "none",
   zIndex: 55
-}, lt = {
+}, nt = {
   position: "absolute",
   inset: 0,
   zIndex: 1,
@@ -1479,218 +1486,175 @@ const Rt = {
   pointerEvents: "none",
   background: "rgba(0, 0, 0, 0.04)"
 };
-function Ft() {
-  const { state: e, dispatch: t, getCloseLog: l } = Ee();
-  I(() => {
+function Mt() {
+  const { state: e, dispatch: t, getCloseLog: r } = Pe();
+  U(() => {
     if (e.activePanelId == null) return;
     function i(u) {
       u.key === "Escape" && t({ type: "CLOSE_PANEL", reason: "escape-key" });
     }
     return document.addEventListener("keydown", i), () => document.removeEventListener("keydown", i);
   }, [e.activePanelId, t]);
-  const o = V(e);
-  Pe(() => {
+  const o = Y(e);
+  Ae(() => {
     o.current = e;
-  }), I(() => {
+  }), U(() => {
     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 = {
       dispatch: t,
       getState: () => o.current,
-      getCloseLog: l
+      getCloseLog: r
     }, () => {
       i.__panelsHostHandle?.dispatch === t && delete window.__panelsHostHandle;
     };
-  }, [t, l]);
-  const a = k(() => {
+  }, [t, r]);
+  const a = D(() => {
     t({ type: "CLOSE_PANEL", reason: "nav-escape-hatch" });
   }, [t]);
-  return /* @__PURE__ */ n("div", { "data-panel-host": "true", style: rt, children: e.activePanelId != null && /* @__PURE__ */ n(
+  return /* @__PURE__ */ n("div", { "data-panel-host": "true", style: tt, children: e.activePanelId != null && /* @__PURE__ */ n(
     "div",
     {
       "data-panel-scrim": "true",
-      style: lt,
+      style: nt,
       onClick: a
     }
   ) });
 }
-const ot = 700;
-function it(e) {
-  const [t, l] = x(null), o = V(null);
-  return I(() => {
+const at = 700;
+function st(e) {
+  const [t, r] = x(null), o = Y(null);
+  return U(() => {
     if (e != null) {
-      o.current != null && (clearTimeout(o.current), o.current = null), l(null);
+      o.current != null && (clearTimeout(o.current), o.current = null), r(null);
       return;
     }
-    return l((a) => a), o.current = setTimeout(() => {
-      l(null), o.current = null;
-    }, ot), () => {
+    return r((a) => a), o.current = setTimeout(() => {
+      r(null), o.current = null;
+    }, at), () => {
       o.current != null && (clearTimeout(o.current), o.current = null);
     };
-  }, [e]), I(() => {
-    e != null && l(e);
+  }, [e]), U(() => {
+    e != null && r(e);
   }, [e]), e != null ? { panelId: e, isOpen: !0 } : t != null ? { panelId: t, isOpen: !1 } : { panelId: null, isOpen: !1 };
 }
-function Ut({ panelComponents: e, children: t }) {
-  const l = H();
-  if (l == null) return null;
-  const { state: o, dispatch: a } = l, i = it(o.activePanelId);
-  if (i.panelId == null) return null;
-  const u = i.panelId, r = i.isOpen, s = e?.[u];
-  if (s == null && t == null)
-    return process.env.NODE_ENV !== "production" && console.error(
-      "[panels] No panel component registered for activePanelId:",
-      u
-    ), null;
-  if (u === "settings")
-    return /* @__PURE__ */ n($, { isOpen: r, children: s != null ? /* @__PURE__ */ n(s, { isOpen: r }) : t });
-  if (u === "catalog-add" || u === "catalog-replace") {
-    if (s == null) return null;
-    const c = u === "catalog-replace" ? "replace" : "add";
-    return /* @__PURE__ */ n($, { isOpen: r, children: /* @__PURE__ */ n(
-      q,
-      {
-        isOpen: r,
-        onClose: () => a({ type: "CLOSE_PANEL", reason: "header-x" }),
-        footer: null,
-        title: c === "replace" ? "Replace metric" : "Add a metric",
-        children: /* @__PURE__ */ n(
-          s,
-          {
-            isOpen: r,
-            footerSlot: /* @__PURE__ */ n(nt, { mode: c, dispatch: a })
-          }
-        )
-      }
-    ) });
-  }
-  return u === "page-management" ? s == null ? null : /* @__PURE__ */ n($, { isOpen: r, children: /* @__PURE__ */ n(
-    q,
-    {
-      isOpen: r,
-      onClose: () => a({ type: "CLOSE_PANEL", reason: "header-x" }),
-      footer: null,
-      title: "Manage pages",
-      children: /* @__PURE__ */ n(s, { isOpen: r, footerSlot: /* @__PURE__ */ n(at, {}) })
-    }
-  ) }) : /* @__PURE__ */ n($, { isOpen: r, children: /* @__PURE__ */ n(
-    q,
-    {
-      isOpen: !0,
-      onClose: () => a({ type: "CLOSE_PANEL", reason: "header-x" }),
-      footer: null,
-      children: s != null ? /* @__PURE__ */ n(s, { isOpen: r }) : t
-    }
-  ) });
+function It({ panelComponents: e, children: t }) {
+  const r = I(), o = st(r?.state.activePanelId ?? null);
+  if (r == null || o.panelId == null) return null;
+  const a = o.panelId, i = o.isOpen, u = e?.[a];
+  return u == null && t == null ? (process.env.NODE_ENV !== "production" && console.error(
+    "[panels] No panel component registered for activePanelId:",
+    a
+  ), null) : /* @__PURE__ */ n(xe, { isOpen: i, children: u != null ? /* @__PURE__ */ n(u, { isOpen: i }) : t });
 }
-function pe(e) {
+function me(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;
 }
-const ct = 685, me = 627, dt = "cubic-bezier(0.22, 1, 0.36, 1)", ut = 200;
-function Te(e, t) {
+const rt = 685, he = 627, lt = "cubic-bezier(0.22, 1, 0.36, 1)", ot = 200;
+function Se(e, t) {
   if (typeof window > "u") return t;
-  const l = window.getComputedStyle(document.documentElement).getPropertyValue(e).trim();
-  if (!l) return t;
-  const o = parseFloat(l);
-  return Number.isNaN(o) ? t : l.endsWith("s") && !l.endsWith("ms") ? o * 1e3 : o;
+  const r = window.getComputedStyle(document.documentElement).getPropertyValue(e).trim();
+  if (!r) return t;
+  const o = parseFloat(r);
+  return Number.isNaN(o) ? t : r.endsWith("s") && !r.endsWith("ms") ? o * 1e3 : o;
 }
-function pt(e, t) {
+function it(e, t) {
   return typeof window > "u" ? t : window.getComputedStyle(document.documentElement).getPropertyValue(e).trim() || t;
 }
-function U(e) {
+function V(e) {
   e.dispatch({ type: "OPEN_PANEL", panelId: e.panelId, trigger: e.trigger });
 }
-function mt(e) {
-  const { mountEl: t, chromeEl: l, reducedMotion: o, onAssert: a } = e;
-  if (t == null || l == null) {
-    U(e), a?.({ branch: "slide-fallback-no-dom", timestamp: Date.now() });
+function ct(e) {
+  const { mountEl: t, chromeEl: r, reducedMotion: o, onAssert: a } = e;
+  if (t == null || r == null) {
+    V(e), a?.({ branch: "slide-fallback-no-dom", timestamp: Date.now() });
     return;
   }
   if (o) {
     e.dispatch({ type: "OPEN_PANEL", panelId: e.panelId, trigger: e.trigger }), a?.({ branch: "slide-reduced-motion", timestamp: Date.now() });
     return;
   }
-  if (typeof l.animate != "function") {
-    U(e), a?.({ branch: "slide-no-waapi", timestamp: Date.now() });
+  if (typeof r.animate != "function") {
+    V(e), a?.({ branch: "slide-no-waapi", timestamp: Date.now() });
     return;
   }
-  const i = l.cloneNode(!0);
-  i.id = "panel-chrome-frozen", i.style.cssText = "position:absolute;left:8px;right:8px;top:8px;z-index:1;pointer-events:none;", t.appendChild(i), l.style.zIndex = "2", e.dispatch({ type: "OPEN_PANEL", panelId: e.panelId, trigger: e.trigger });
-  const u = Te("--panel-open-dur", ct), r = pt("--panel-easing", dt), s = l.animate(
+  const i = r.cloneNode(!0);
+  i.id = "panel-chrome-frozen", i.style.cssText = "position:absolute;left:8px;right:8px;top:8px;z-index:1;pointer-events:none;", t.appendChild(i), r.style.zIndex = "2", e.dispatch({ type: "OPEN_PANEL", panelId: e.panelId, trigger: e.trigger });
+  const u = Se("--panel-open-dur", rt), l = it("--panel-easing", lt), s = r.animate(
     [{ transform: "translateY(100%)" }, { transform: "translateY(0)" }],
-    { duration: u, easing: r, fill: "forwards" }
+    { duration: u, easing: l, fill: "forwards" }
   );
   s.addEventListener(
     "finish",
     () => {
-      i.remove(), l.style.zIndex = "", s.cancel(), a?.({ branch: "slide-complete", frozen: "cleaned", timestamp: Date.now() });
+      i.remove(), r.style.zIndex = "", s.cancel(), a?.({ branch: "slide-complete", frozen: "cleaned", timestamp: Date.now() });
     },
     { once: !0 }
   );
 }
-function ht(e) {
-  const { mountEl: t, onAssert: l } = e;
+function dt(e) {
+  const { mountEl: t, onAssert: r } = e;
   if (t == null) {
-    e.dispatch({ type: "CLOSE_PANEL", reason: "mutex-handoff" }), setTimeout(() => U(e), me), l?.({ branch: "handoff-fallback-no-mount", timestamp: Date.now() });
+    e.dispatch({ type: "CLOSE_PANEL", reason: "mutex-handoff" }), setTimeout(() => V(e), he), r?.({ branch: "handoff-fallback-no-mount", timestamp: Date.now() });
     return;
   }
-  const o = Te("--panel-close-dur", me);
+  const o = Se("--panel-close-dur", he);
   let a = !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 }), l?.({ branch: "handoff-complete", timestamp: Date.now() }));
-  }, r = () => {
-    a || (a = !0, t.removeEventListener("transitionend", u), e.dispatch({ type: "OPEN_PANEL", panelId: e.panelId, trigger: e.trigger }), l?.({ branch: "handoff-forced", timestamp: Date.now() }));
+    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() }));
+  }, l = () => {
+    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() }));
   };
-  t.addEventListener("transitionend", u), e.dispatch({ type: "CLOSE_PANEL", reason: "mutex-handoff" }), i = setTimeout(r, o + ut);
+  t.addEventListener("transitionend", u), e.dispatch({ type: "CLOSE_PANEL", reason: "mutex-handoff" }), i = setTimeout(l, o + ot);
 }
-function ft(e) {
-  const { state: t, onAssert: l } = e;
+function ut(e) {
+  const { state: t, onAssert: r } = e;
   if (t.activePanelId && t.isDirty) {
-    e.dispatch({ type: "OPEN_PANEL", panelId: e.panelId, trigger: e.trigger }), l?.({ branch: "blocked-dirty", timestamp: Date.now() });
+    e.dispatch({ type: "OPEN_PANEL", panelId: e.panelId, trigger: e.trigger }), r?.({ branch: "blocked-dirty", timestamp: Date.now() });
     return;
   }
-  const o = pe(t.activeTrigger), a = pe(e.trigger);
+  const o = me(t.activeTrigger), a = me(e.trigger);
   if (!!t.activePanelId && o != null && o === a) {
-    mt(e);
+    ct(e);
     return;
   }
   if (t.activePanelId) {
-    ht(e);
+    dt(e);
     return;
   }
-  U(e), l?.({ branch: "fresh-open", timestamp: Date.now() });
+  V(e), r?.({ branch: "fresh-open", timestamp: Date.now() });
 }
-function gt() {
+function pt() {
   if (!(typeof window > "u"))
     return window.__panelsAsserter;
 }
-function zt() {
-  const e = H(), t = he();
-  return k(
-    (l, o) => {
+function $t() {
+  const e = I(), t = fe();
+  return D(
+    (r, o) => {
       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 = {
-        panelId: l,
+        panelId: r,
         trigger: o,
         state: e.state,
         dispatch: e.dispatch,
         mountEl: a,
         chromeEl: i,
         reducedMotion: t,
-        onAssert: (r) => {
-          gt()?.recordTransition?.(r);
+        onAssert: (l) => {
+          pt()?.recordTransition?.(l);
         }
       };
-      ft(u);
+      ut(u);
     },
     [e, t]
   );
 }
-function Ht({ children: e }) {
+function Rt({ children: e }) {
   return /* @__PURE__ */ n("div", { className: "clone-stage", children: e });
 }
-let z = !1, j = null;
+let B = !1, j = null;
 function ne() {
   const e = [];
   let t = "cleaned";
@@ -1704,10 +1668,10 @@ function ne() {
     const d = u.style.zIndex;
     d !== "" && d !== "2" && e.push(`chrome-zindex=${d}`);
   }
-  const r = a ? "present" : "absent", s = u ? "present" : "absent";
+  const l = a ? "present" : "absent", s = u ? "present" : "absent";
   return {
     valid: e.length === 0,
-    mount: r,
+    mount: l,
     chrome: s,
     frozen: t,
     orphans: e,
@@ -1715,24 +1679,24 @@ function ne() {
   };
 }
 const Z = "8px 8px 0px", X = "64px", J = "inset(0px 0px 60px 0px)", ee = "inset(0px -40px -40px -40px)";
-function _(e, t, l, o, a) {
-  return { id: e, constraint: t, expected: l, actual: o, pass: a };
+function _(e, t, r, o, a) {
+  return { id: e, constraint: t, expected: r, actual: o, pass: a };
 }
-function L(e) {
+function $(e) {
   const t = parseInt(e, 10);
   return Number.isFinite(t) ? t : NaN;
 }
-function re() {
-  const e = [], t = document.querySelector(".gloss-panel-mount"), l = t?.querySelector(".gloss-panel-chrome") ?? null, o = 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");
+function le() {
+  const e = [], t = document.querySelector(".gloss-panel-mount"), r = t?.querySelector(".gloss-panel-chrome") ?? null, o = 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");
   if (!t)
     e.push(_("C1", "mount --reveal-y matches clip-path inset-bottom Npx", "mount present", "absent", !1));
   else {
-    const r = getComputedStyle(t), s = r.getPropertyValue("--reveal-y").trim() || t.style.getPropertyValue("--reveal-y").trim(), c = r.clipPath || t.style.clipPath || "", d = c.match(/inset\(\s*0(?:px)?\s+0(?:px)?\s+(\d+)px\s+0(?:px)?\s*\)/), h = d ? parseInt(d[1], 10) : NaN, f = L(s), b = Number.isFinite(h) && Number.isFinite(f) && h === f;
+    const l = getComputedStyle(t), s = l.getPropertyValue("--reveal-y").trim() || t.style.getPropertyValue("--reveal-y").trim(), c = l.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 = $(s), b = Number.isFinite(m) && Number.isFinite(h) && m === h;
     e.push(
       _(
         "C1",
         "mount --reveal-y matches clip-path inset-bottom Npx",
-        `inset(0 0 ${f}px 0) === --reveal-y(${f}px)`,
+        `inset(0 0 ${h}px 0) === --reveal-y(${h}px)`,
         `--reveal-y=${s || "n/a"} clip-path=${c || "n/a"}`,
         b
       )
@@ -1741,7 +1705,7 @@ function re() {
   if (!t)
     e.push(_("C2", "mount padding constant", Z, "absent", !1));
   else {
-    const r = t.style.padding, s = getComputedStyle(t), c = r || s.padding || "", d = c === Z || c === "8px 8px 0px 8px";
+    const l = t.style.padding, s = getComputedStyle(t), c = l || s.padding || "", d = c === Z || c === "8px 8px 0px 8px";
     e.push(_("C2", "mount padding constant", Z, c || "n/a", d));
   }
   if (!t)
@@ -1750,48 +1714,48 @@ function re() {
     const s = getComputedStyle(t).bottom || t.style.bottom || "", c = s === X;
     e.push(_("C3", "mount.bottom resolves to var(--tb-h)=64px", X, s || "n/a", c));
   }
-  if (!l)
+  if (!r)
     e.push(_("C4", "panel-chrome height formula = (row-h*3)+(row-gap*3)-8px", "formula match", "absent", !1));
   else {
-    const r = getComputedStyle(l), s = L(
-      r.getPropertyValue("--row-h").trim() || l.style.getPropertyValue("--row-h").trim() || "0"
-    ), c = L(
-      r.getPropertyValue("--row-gap").trim() || l.style.getPropertyValue("--row-gap").trim() || "0"
-    ), d = s * 3 + c * 3 - 8, h = L(r.height || l.style.height || ""), f = Number.isFinite(s) && Number.isFinite(c) && Number.isFinite(h) && Number.isFinite(d) && h === d;
+    const l = getComputedStyle(r), s = $(
+      l.getPropertyValue("--row-h").trim() || r.style.getPropertyValue("--row-h").trim() || "0"
+    ), c = $(
+      l.getPropertyValue("--row-gap").trim() || r.style.getPropertyValue("--row-gap").trim() || "0"
+    ), d = s * 3 + c * 3 - 8, m = $(l.height || r.style.height || ""), h = Number.isFinite(s) && Number.isFinite(c) && Number.isFinite(m) && Number.isFinite(d) && m === d;
     e.push(
       _(
         "C4",
         "panel-chrome height formula = (row-h*3)+(row-gap*3)-8px",
         `${d}px (rh=${s} rg=${c})`,
-        `${h}px`,
-        f
+        `${m}px`,
+        h
       )
     );
   }
-  if (!o || !l)
+  if (!o || !r)
     e.push(
       _(
         "C5",
         'coordinator perspective + origin "center bottom"; chrome perspective-style flat',
         "present",
-        `coordinator=${o ? "present" : "absent"} chrome=${l ? "present" : "absent"}`,
+        `coordinator=${o ? "present" : "absent"} chrome=${r ? "present" : "absent"}`,
         !1
       )
     );
   else {
-    const r = getComputedStyle(o), s = getComputedStyle(l), c = r.perspective || o.style.perspective || "", d = (r.perspectiveOrigin || o.style.perspectiveOrigin || "").trim(), h = s.perspectiveStyle || l.style.perspectiveStyle || "", v = c !== "" && c !== "none" && (d === "center bottom" || d === "50% 100%") && h === "flat";
+    const l = getComputedStyle(o), s = getComputedStyle(r), c = l.perspective || o.style.perspective || "", d = (l.perspectiveOrigin || o.style.perspectiveOrigin || "").trim(), m = s.perspectiveStyle || r.style.perspectiveStyle || "", v = c !== "" && c !== "none" && (d === "center bottom" || d === "50% 100%") && m === "flat";
     e.push(
       _(
         "C5",
         'coordinator perspective + origin "center bottom"; chrome perspective-style flat',
         "perspective:not-none, origin:center bottom, chrome-style:flat",
-        `perspective=${c} origin=${d} chrome-style=${h}`,
+        `perspective=${c} origin=${d} chrome-style=${m}`,
         v
       )
     );
   }
   {
-    let r = !1, s = "absent";
+    let l = !1, s = "absent";
     try {
       for (const c of Array.from(document.styleSheets)) {
         let d = [];
@@ -1800,10 +1764,10 @@ function re() {
         } catch {
           continue;
         }
-        for (const h of d)
-          if (h.name === "stage-spin") {
-            const b = Array.from(h.cssRules), m = b.find((y) => y.keyText === "0%" || y.keyText === "from"), v = b.find((y) => y.keyText === "100%" || y.keyText === "to"), w = m?.style.transform ?? "", S = v?.style.transform ?? "", C = /rotateY\(\s*0(?:deg)?\s*\)/;
-            r = C.test(w) && C.test(S), s = `0%=${w || "n/a"} 100%=${S || "n/a"}`;
+        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"), v = b.find((N) => N.keyText === "100%" || N.keyText === "to"), E = p?.style.transform ?? "", S = v?.style.transform ?? "", y = /rotateY\(\s*0(?:deg)?\s*\)/;
+            l = y.test(E) && y.test(S), s = `0%=${E || "n/a"} 100%=${S || "n/a"}`;
             break;
           }
         if (s !== "absent") break;
@@ -1817,12 +1781,12 @@ function re() {
         "@keyframes stage-spin 0% AND 100% anchor at rotateY(0)",
         "both frames rotateY(0)",
         s,
-        r
+        l
       )
     );
   }
   {
-    const r = document.documentElement, s = getComputedStyle(r), c = s.getPropertyValue("--panel-open-dur").trim() || r.style.getPropertyValue("--panel-open-dur").trim(), d = s.getPropertyValue("--panel-close-dur").trim() || r.style.getPropertyValue("--panel-close-dur").trim(), h = L(c) || parseFloat(c) * (c.endsWith("s") && !c.endsWith("ms") ? 1e3 : 1), f = L(d) || parseFloat(d) * (d.endsWith("s") && !d.endsWith("ms") ? 1e3 : 1), b = Number.isFinite(h) && Number.isFinite(f) && h > f;
+    const l = document.documentElement, s = getComputedStyle(l), c = s.getPropertyValue("--panel-open-dur").trim() || l.style.getPropertyValue("--panel-open-dur").trim(), d = s.getPropertyValue("--panel-close-dur").trim() || l.style.getPropertyValue("--panel-close-dur").trim(), m = $(c) || parseFloat(c) * (c.endsWith("s") && !c.endsWith("ms") ? 1e3 : 1), h = $(d) || parseFloat(d) * (d.endsWith("s") && !d.endsWith("ms") ? 1e3 : 1), b = Number.isFinite(m) && Number.isFinite(h) && m > h;
     e.push(
       _("C7", "--panel-open-dur > --panel-close-dur", "open > close", `open=${c || "n/a"} close=${d || "n/a"}`, b)
     );
@@ -1830,7 +1794,7 @@ function re() {
   if (!a)
     e.push(_("C8", "BellCutout zero computed animation/transition", "no inline timing", "absent", !1));
   else {
-    const r = getComputedStyle(a), s = r.animationName || "", c = r.transitionProperty || "", d = (s === "" || s === "none") && (c === "" || c === "none" || c === "all");
+    const l = getComputedStyle(a), s = l.animationName || "", c = l.transitionProperty || "", d = (s === "" || s === "none") && (c === "" || c === "none" || c === "all");
     e.push(
       _(
         "C8",
@@ -1844,19 +1808,19 @@ function re() {
   if (!t)
     e.push(_("C9", "mount closed-state clipPath", J, "absent", !1));
   else {
-    const r = t.style.clipPath, s = getComputedStyle(t), c = r || s.clipPath || "", d = c === J;
+    const l = t.style.clipPath, s = getComputedStyle(t), c = l || s.clipPath || "", d = c === J;
     e.push(_("C9", "mount closed-state clipPath", J, c || "n/a", d));
   }
   if (!i)
     e.push(_("C10", "bell-popover parentElement === document.body (open)", "body", "absent", !1));
   else {
-    const r = i.parentElement, s = r === document.body;
+    const l = i.parentElement, s = l === document.body;
     e.push(
       _(
         "C10",
         "bell-popover parentElement === document.body (open)",
         "body",
-        r === document.body ? "body" : r?.tagName ?? "n/a",
+        l === document.body ? "body" : l?.tagName ?? "n/a",
         s
       )
     );
@@ -1870,7 +1834,7 @@ function re() {
   if (!u)
     e.push(_("C12", "toolbar clipPath = inset(0 -40 -40 -40)", ee, "absent", !1));
   else {
-    const r = u.style.clipPath, s = getComputedStyle(u), c = r || s.clipPath || "", d = c === ee;
+    const l = u.style.clipPath, s = getComputedStyle(u), c = l || s.clipPath || "", d = c === ee;
     e.push(_("C12", "toolbar clipPath = inset(0 -40 -40 -40)", ee, c || "n/a", d));
   }
   return e.push(
@@ -1891,10 +1855,10 @@ function re() {
     )
   ), e;
 }
-function bt(e) {
-  return re().find((t) => t.id === e);
+function mt(e) {
+  return le().find((t) => t.id === e);
 }
-function vt() {
+function ht() {
   const e = ne();
   return { q12: [
     {
@@ -1904,83 +1868,84 @@ function vt() {
       actual: `valid=${e.valid} mount=${e.mount} chrome=${e.chrome} frozen=${e.frozen} orphans=[${e.orphans.join(",")}]`,
       pass: e.valid
     }
-  ], cc: re() };
+  ], cc: le() };
 }
-function yt() {
+function ft() {
   return {
-    enable: _t,
-    disable: Ct,
-    isEnabled: () => z,
+    enable: gt,
+    disable: bt,
+    isEnabled: () => B,
     getLastReport: () => j,
     recordTransition: (e) => {
-      z && (j = { ...e, ...ne() });
+      B && (j = { ...e, ...ne() });
     },
     assertOnce: () => {
       const e = ne();
       return j = e, e;
     },
-    assertCcOnly: re,
-    getCcRowById: bt,
-    assertPanelTruths: vt
+    assertCcOnly: le,
+    getCcRowById: mt,
+    assertPanelTruths: ht
   };
 }
-function _t() {
-  if (z = !0, typeof window > "u") return;
-  window.__panelsAsserter || (window.__panelsAsserter = yt(), console.info(
+function gt() {
+  if (B = !0, typeof window > "u") return;
+  window.__panelsAsserter || (window.__panelsAsserter = ft(), console.info(
     "[panels] asserter enabled (P3b Q12-12 + P6 W5 cc:C1..C14). Inspect via window.__panelsAsserter."
   ));
 }
-function Ct() {
-  z = !1;
+function bt() {
+  B = !1;
 }
 export {
-  Kt as COMMITS,
-  It as CatalogAddShell,
-  nt as CatalogFooter,
-  Mt as CatalogReplaceShell,
+  zt as COMMITS,
+  kt as CatalogAddShell,
+  At as CatalogFooter,
+  Dt as CatalogReplaceShell,
   se as CatalogStateContext,
-  Ue as CloneCard,
-  Ht as CloneStage,
-  ve as MOCK_DEFAULT_LENS,
-  be as MOCK_LENSES,
+  He as CloneCard,
+  Rt as CloneStage,
+  ye as MOCK_DEFAULT_LENS,
+  ve as MOCK_LENSES,
   ae as MOCK_LENS_META,
-  st as MOCK_PAGES,
-  ye as MOCK_TILES_BY_LENS,
-  Rt as PANEL_IDS,
-  at as PageMgmtFooter,
-  $t as PageMgmtShell,
-  Ce as PageMgmtStateContext,
-  Be as PanelBody,
-  q as PanelChrome,
-  Ye as PanelChromeV2,
-  Ke as PanelFooter,
-  Ot as PanelFooterMessage,
-  ze as PanelHeader,
-  Yt as PanelHost,
-  Ft as PanelHostShell,
-  $ as PanelMount,
-  Ve as PanelNavigation,
-  Wt as PanelProvider,
-  Ut as PanelSlot,
-  He as PanelStage,
-  Lt as SettingsShell,
-  re as assertCcOnly,
+  et as MOCK_PAGES,
+  _e as MOCK_TILES_BY_LENS,
+  Ht as NotificationCenterShell,
+  Ot as PANEL_IDS,
+  Je as PageMgmtFooter,
+  Lt as PageMgmtShell,
+  Ne as PageMgmtStateContext,
+  Vt as PanelBody,
+  Bt as PanelChrome,
+  K as PanelChromeV2,
+  Kt as PanelFooter,
+  Pt as PanelFooterMessage,
+  Yt as PanelHeader,
+  Wt as PanelHost,
+  Mt as PanelHostShell,
+  xe as PanelMount,
+  Gt as PanelNavigation,
+  Qt as PanelProvider,
+  It as PanelSlot,
+  qt as PanelStage,
+  xt as SettingsShell,
+  le as assertCcOnly,
   ne as assertPanelDomShape,
-  vt as assertPanelTruths,
-  Gt as deriveSurfaceState,
-  Ct as disablePanelAsserter,
-  _t as enablePanelAsserter,
-  bt as getCcRowById,
-  Qt as initialState,
-  pe as positionKey,
-  qt as reducer,
-  ft as transitionToPanel,
-  tt as useCatalogState,
-  Dt as useEditingCardId,
-  Ne as usePageMgmtState,
-  Ee as usePanelContext,
-  H as usePanelContextOptional,
-  jt as usePanelCoordinator,
-  he as useReducedMotionPanel,
-  zt as useTransitionToPanel
+  ht as assertPanelTruths,
+  jt as deriveSurfaceState,
+  bt as disablePanelAsserter,
+  gt as enablePanelAsserter,
+  mt as getCcRowById,
+  Zt as initialState,
+  me as positionKey,
+  Xt as reducer,
+  ut as transitionToPanel,
+  re as useCatalogState,
+  Et as useEditingCardId,
+  Te as usePageMgmtState,
+  Pe as usePanelContext,
+  I as usePanelContextOptional,
+  Jt as usePanelCoordinator,
+  fe as useReducedMotionPanel,
+  $t as useTransitionToPanel
 };