@mt-gloss/ui 0.1.137 → 0.1.138

package/composites-panels.js

@@ -1,31 +1,153 @@
-import { u as D, g as J, h as z, f as we, S as Te, b as xe, j as Ee } from "./COMMITS-B7dc_-m8.js";
-import { C as Rt, N as Ft, n as zt, o as Ht, k as Bt, c as Yt, m as Vt, P as Ut, l as Kt, e as qt, i as Gt, r as Qt, d as Wt } from "./COMMITS-B7dc_-m8.js";
-import { jsx as a, jsxs as y, Fragment as pe } from "react/jsx-runtime";
-import B, { useState as x, useRef as U, createContext as me, useContext as he, useMemo as re, useEffect as F, useCallback as L, useLayoutEffect as Ae } from "react";
-import { useSensors as De, useSensor as oe, PointerSensor as ke, KeyboardSensor as Le, DndContext as Me, closestCenter as Oe } from "@dnd-kit/core";
-import { sortableKeyboardCoordinates as Ie, SortableContext as $e, horizontalListSortingStrategy as Re, arrayMove as Fe, useSortable as ze } from "@dnd-kit/sortable";
-import { CSS as He } from "@dnd-kit/utilities";
-import { M as le } from "./MetricCard-DOPtBpek.js";
-function St() {
-  const e = D();
+import { u as O, g as ke, m as be, n as K, l as De, S as Le, e as Me, o as Oe } from "./COMMITS-aGwevMtR.js";
+import { C as en, N as tn, w as nn, x as an, q as sn, f as rn, v as on, P as ln, t as cn, k as dn, j as un, i as pn, h as mn } from "./COMMITS-aGwevMtR.js";
+import { jsx as a, jsxs as f, Fragment as q } from "react/jsx-runtime";
+import * as H from "react";
+import R, { useState as A, useRef as Q, createContext as ye, useContext as ve, useMemo as ce, useEffect as z, useCallback as M, useLayoutEffect as Ie } from "react";
+import { SPIN_COMMIT_REDUCED as Re, SPIN_COMMIT_FULL as $e } from "@mt-gloss/motion";
+import { useMotionValue as de, animate as B, motion as Fe } from "framer-motion";
+import { useSensors as Ue, useSensor as ue, PointerSensor as ze, KeyboardSensor as He, DndContext as Be, closestCenter as Ye } from "@dnd-kit/core";
+import { sortableKeyboardCoordinates as Ve, SortableContext as Ke, horizontalListSortingStrategy as qe, arrayMove as Qe, useSortable as We } from "@dnd-kit/sortable";
+import { CSS as Ge } from "@dnd-kit/utilities";
+import { M as pe } from "./MetricCard-DOPtBpek.js";
+function Ht() {
+  const e = O();
   if (e?.state.activePanelId !== "settings") return null;
   const t = e.state.activeTrigger;
   return t?.kind === "card-overflow" ? t.cardId : null;
 }
-function fe({ span: e, rotating: t = !0, children: s }) {
-  const o = ["clone-card", `span-${e}`, t ? "rotating" : ""].filter(Boolean).join(" "), n = s != null ? "full" : "fallback";
-  return /* @__PURE__ */ a("div", { className: o, "data-clone-fidelity": n, children: s });
+function je({ span: e, rotating: t = !0, 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 }) {
-  return /* @__PURE__ */ y("div", { className: "gloss-panel-chrome-v2__footer-msg", children: [
+const Ze = 500, Xe = 1, Je = "var(--gloss-color-primary, #6366f1)";
+function et({
+  children: e,
+  spinTrigger: t,
+  onSpinComplete: r,
+  spinDuration: l,
+  spinRotations: n,
+  accentColor: i
+}) {
+  const u = de(0), o = de(1), s = H.useRef(null), c = H.useMemo(() => ke() === "reduced", []), d = H.useRef(t);
+  return H.useEffect(() => {
+    if (t === void 0 || t === d.current) return;
+    d.current = t;
+    const h = (l ?? Ze) / 1e3, y = n ?? Xe, p = s.current;
+    if (c) {
+      const _ = [];
+      if (p) {
+        const x = B(
+          p,
+          { opacity: [0, 0.4, 0] },
+          Re
+        );
+        _.push(x), x.then(() => {
+          r?.();
+        });
+      } else
+        Promise.resolve().then(() => {
+          r?.();
+        });
+      return () => {
+        _.forEach((x) => x.stop());
+      };
+    }
+    const v = { ...$e, duration: h }, T = B(u, [0, 360 * y], v), S = B(o, [1, 1.03, 1], v), b = [T, S];
+    if (p) {
+      const _ = B(
+        p,
+        { opacity: [0, 0.6, 0, 0] },
+        { ...v, times: [0, 0.3, 0.8, 1] }
+      );
+      b.push(_);
+    }
+    return T.then(() => {
+      r?.();
+    }), () => {
+      b.forEach((_) => _.stop());
+    };
+  }, [t, l, n, c, r, u, o]), /* @__PURE__ */ f(
+    Fe.div,
+    {
+      className: "clone-stage",
+      style: { rotateY: u, scale: o },
+      children: [
+        e,
+        /* @__PURE__ */ a(
+          "div",
+          {
+            ref: s,
+            className: "clone-stage__accent",
+            style: {
+              "--spin-accent-color": i ?? Je
+            }
+          }
+        )
+      ]
+    }
+  );
+}
+function Bt({ primary: e, secondary: t }) {
+  return /* @__PURE__ */ f("div", { className: "gloss-panel-chrome-v2__footer-msg", children: [
     /* @__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({ value: e, onChange: t }) {
-  return /* @__PURE__ */ y("div", { className: "settings-shell__field settings-shell__field--timeframe", children: [
+function tt({
+  value: e,
+  onChange: t,
+  enabled: r = !1,
+  onToggleEnabled: l
+}) {
+  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__ */ a("label", { htmlFor: n, className: "settings-shell__toggle-label", children: "Show threshold indicator" }),
+      /* @__PURE__ */ a(
+        "input",
+        {
+          id: n,
+          type: "checkbox",
+          role: "switch",
+          "aria-label": "Enable threshold indicator",
+          "aria-checked": r,
+          checked: r,
+          onChange: (i) => l?.(i.target.checked),
+          className: "settings-shell__toggle"
+        }
+      )
+    ] }),
+    r ? /* @__PURE__ */ f(q, { children: [
+      /* @__PURE__ */ a("span", { className: "settings-shell__label", "aria-hidden": "true", children: "Alert level (%)" }),
+      /* @__PURE__ */ f("div", { className: "settings-shell__slider-row", children: [
+        /* @__PURE__ */ a(
+          "input",
+          {
+            id: "settings-threshold-input",
+            type: "range",
+            min: 0,
+            max: 100,
+            value: e,
+            onChange: t,
+            "aria-label": "Threshold",
+            "aria-valuenow": e,
+            "aria-valuemin": 0,
+            "aria-valuemax": 100,
+            className: "settings-shell__slider"
+          }
+        ),
+        /* @__PURE__ */ f("span", { className: "settings-shell__slider-value", "aria-live": "polite", children: [
+          e,
+          "%"
+        ] })
+      ] })
+    ] }) : /* @__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 nt({ value: e, onChange: t }) {
+  return /* @__PURE__ */ f("div", { className: "settings-shell__field settings-shell__field--timeframe", children: [
     /* @__PURE__ */ a("span", { className: "settings-shell__label", "aria-hidden": "true", children: "Rolling period (days)" }),
-    /* @__PURE__ */ y("div", { className: "settings-shell__slider-row", children: [
+    /* @__PURE__ */ f("div", { className: "settings-shell__slider-row", children: [
       /* @__PURE__ */ a(
         "input",
         {
@@ -42,47 +164,25 @@ function Be({ value: e, onChange: t }) {
           className: "settings-shell__slider"
         }
       ),
-      /* @__PURE__ */ y("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 Ye({
-  id: e,
-  onActivate: t,
-  disabled: s
-}) {
-  const o = "settings-shell__slot-pill settings-shell__slot-pill--ghost" + (s ? " settings-shell__slot-pill--ghost-disabled" : "");
-  return /* @__PURE__ */ a("li", { className: o, "data-ghost": "true", children: /* @__PURE__ */ a(
-    "button",
-    {
-      type: "button",
-      className: "settings-shell__slot-pill__ghost-activate",
-      "aria-label": `Restore ${e}`,
-      "aria-disabled": s ? "true" : void 0,
-      onClick: s ? void 0 : t,
-      children: /* @__PURE__ */ a("span", { className: "settings-shell__slot-pill__label", children: e })
-    }
-  ) });
-}
-function Ve({
-  id: e,
-  onRemove: t,
-  removeDisabled: s
-}) {
-  const { attributes: o, listeners: n, setNodeRef: c, transform: p, transition: r, isDragging: i } = ze({ id: e }), l = {
-    transform: He.Transform.toString(p),
-    transition: r,
-    opacity: i ? 0.6 : 1
+function at({ id: e, onRemove: t }) {
+  const { attributes: r, listeners: l, setNodeRef: n, transform: i, transition: u, isDragging: o } = We({ id: e }), s = {
+    transform: Ge.Transform.toString(i),
+    transition: u,
+    opacity: o ? 0.6 : 1
   };
-  return /* @__PURE__ */ y(
+  return /* @__PURE__ */ f(
     "li",
     {
-      ref: c,
-      style: l,
-      className: `settings-shell__slot-pill${i ? " settings-shell__slot-pill--dragging" : ""}`,
+      ref: n,
+      style: s,
+      className: `settings-shell__slot-pill${o ? " settings-shell__slot-pill--dragging" : ""}`,
       children: [
         /* @__PURE__ */ a(
           "button",
@@ -90,8 +190,8 @@ function Ve({
             type: "button",
             className: "settings-shell__slot-pill__handle",
             "aria-label": `Reorder ${e}`,
-            ...o,
-            ...n,
+            ...r,
+            ...l,
             children: /* @__PURE__ */ a("span", { "aria-hidden": "true", className: "settings-shell__slot-pill__grip", children: "⋮⋮" })
           }
         ),
@@ -100,10 +200,9 @@ function Ve({
           "button",
           {
             type: "button",
-            className: "settings-shell__slot-pill__remove" + (s ? " settings-shell__slot-pill__remove--disabled" : ""),
+            className: "settings-shell__slot-pill__remove",
             "aria-label": `Remove ${e}`,
-            "aria-disabled": s ? "true" : void 0,
-            onClick: s ? void 0 : t,
+            onClick: t,
             children: "×"
           }
         )
@@ -111,88 +210,124 @@ function Ve({
     }
   );
 }
-function Ue({
+function st({ value: e, onChange: t }) {
+  const r = Ue(
+    ue(ze, { activationConstraint: { distance: 4 } }),
+    ue(He, { coordinateGetter: Ve })
+  ), l = R.useRef(!1), [n, i] = R.useState(!1), u = (s) => {
+    const { active: c, over: d } = s;
+    if (!d || c.id === d.id) return;
+    const m = e.findIndex((y) => y === c.id), h = e.findIndex((y) => y === d.id);
+    m === -1 || h === -1 || t(Qe([...e], m, h));
+  }, o = (s) => {
+    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__ */ a(Be, { sensors: r, collisionDetection: Ye, onDragEnd: u, children: /* @__PURE__ */ a(Ke, { items: [...e], strategy: qe, children: /* @__PURE__ */ a("ul", { className: "settings-shell__slots-list", role: "list", children: e.map((s) => /* @__PURE__ */ a(at, { 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 rt = ["#1d6fd8", "#10b981", "#f59e0b", "#ef4444", "#8b5cf6"];
+function ot({
   value: e,
-  onChange: t,
-  naturalSlots: s
+  onSelect: t,
+  enabled: r = !1,
+  onToggleEnabled: l
 }) {
-  const o = De(
-    oe(ke, { activationConstraint: { distance: 4 } }),
-    oe(Le, { coordinateGetter: Ie })
-  ), n = (d) => {
-    const { active: h, over: g } = d;
-    if (!g || h.id === g.id) return;
-    const m = e.findIndex((v) => v === h.id), _ = e.findIndex((v) => v === g.id);
-    m === -1 || _ === -1 || t(Fe([...e], m, _));
-  }, c = e.length === 1, p = (d) => {
-    c || t(e.filter((h) => h !== d));
-  }, r = B.useMemo(() => new Set(e), [e]), i = B.useMemo(
-    () => (s ?? []).filter((d) => !r.has(d)),
-    [s, r]
-  ), l = !1, u = (d) => {
-    t([...e, d]);
-  };
-  return /* @__PURE__ */ y("div", { className: "settings-shell__field settings-shell__field--slots", "aria-label": "Stack slots", children: [
-    /* @__PURE__ */ a(Me, { sensors: o, collisionDetection: Oe, onDragEnd: n, children: /* @__PURE__ */ a($e, { items: [...e], strategy: Re, children: /* @__PURE__ */ y("ul", { className: "settings-shell__slots-list", role: "list", children: [
-      e.map((d) => /* @__PURE__ */ a(
-        Ve,
-        {
-          id: d,
-          onRemove: () => p(d),
-          removeDisabled: c
-        },
-        d
-      )),
-      i.map((d) => /* @__PURE__ */ a(
-        Ye,
+  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__ */ a("label", { htmlFor: n, className: "settings-shell__toggle-label", children: "Override default accent" }),
+      /* @__PURE__ */ a(
+        "input",
         {
-          id: d,
-          onActivate: () => u(d),
-          disabled: l
-        },
-        `ghost:${d}`
-      ))
-    ] }) }) }),
-    /* @__PURE__ */ a("p", { className: "settings-shell__help settings-shell__help--small", children: "Drag to reorder · click × to remove" })
+          id: n,
+          type: "checkbox",
+          role: "switch",
+          "aria-label": "Enable accent override",
+          "aria-checked": r,
+          checked: r,
+          onChange: (i) => l?.(i.target.checked),
+          className: "settings-shell__toggle"
+        }
+      )
+    ] }),
+    r ? /* @__PURE__ */ f(q, { children: [
+      /* @__PURE__ */ a("span", { className: "settings-shell__label", children: "Accent color" }),
+      /* @__PURE__ */ a("div", { className: "settings-shell__swatch-row", children: rt.map((i) => {
+        const u = e === i;
+        return /* @__PURE__ */ a(
+          "button",
+          {
+            type: "button",
+            "aria-pressed": u,
+            "aria-label": `Accent ${i}`,
+            className: `settings-shell__swatch${u ? " settings-shell__swatch--active" : ""}`,
+            style: { backgroundColor: i },
+            onClick: () => t(i)
+          },
+          i
+        );
+      }) })
+    ] }) : /* @__PURE__ */ a("p", { className: "settings-shell__help", "aria-live": "polite", children: "Off — the card uses its default accent. Turn on to override." })
   ] });
 }
-const Ke = ["Orders", "Quota", "Unassigned"], qe = ["timeframe"];
-function wt({
+const lt = ["Orders", "Quota", "Unassigned"], it = ["threshold", "timeframe", "color"];
+function Yt({
   isOpen: e,
   cardSpan: t,
-  cardLabel: s = "Metric",
-  cardValue: o = "—",
+  cardLabel: r = "Metric",
+  cardValue: l = "—",
   previewSlot: n,
-  dimensions: c = qe,
-  initialTab: p,
-  initialValues: r,
-  naturalSlots: i
+  dimensions: i = it,
+  initialTab: u,
+  initialValues: o
 }) {
-  const l = D(), u = l?.state.activeTrigger, d = u?.kind === "card-overflow" ? u.cardId : null, h = J(), g = u?.span, m = t ?? g ?? 1, _ = c[0] ?? "timeframe", [v, N] = B.useState(p ?? _);
-  B.useEffect(() => {
-    c.includes(v) || N(_);
-  }, [c, v, _]);
-  const C = d != null ? l?.state?.bufferByCard?.[d]?.changes ?? {} : {}, O = typeof C.timeframe == "number" ? C.timeframe : typeof r?.timeframe == "number" ? r.timeframe : 30, I = Array.isArray(C.slots) ? C.slots : Array.isArray(r?.slots) ? r.slots : Ke, $ = (R) => {
-    d == null || l == null || l.dispatch({ type: "SET_BUFFER_VALUE", cardId: d, key: "timeframe", value: Number(R.target.value) });
-  }, S = (R) => {
-    d == null || l == null || l.dispatch({ type: "SET_BUFFER_VALUE", cardId: d, key: "slots", value: R });
-  }, E = l?.state.isDirty ?? !1, H = d;
+  const s = O(), c = s?.state.activeTrigger, d = c?.kind === "card-overflow" ? c.cardId : null, m = be(), h = c?.span, y = t ?? h ?? 1, p = i[0] ?? "threshold", [v, T] = R.useState(u ?? p);
+  R.useEffect(() => {
+    i.includes(v) || T(p);
+  }, [i, v, p]);
+  const b = d != null ? s?.state?.bufferByCard?.[d]?.changes ?? {} : {}, _ = typeof b.threshold == "number" ? b.threshold : typeof o?.threshold == "number" ? o.threshold : 80, x = typeof b.timeframe == "number" ? b.timeframe : typeof o?.timeframe == "number" ? o.timeframe : 30, $ = typeof b.accent == "string" ? b.accent : typeof o?.accent == "string" ? o.accent : null, F = Array.isArray(b.slots) ? b.slots : Array.isArray(o?.slots) ? o.slots : lt, E = typeof b.thresholdEnabled == "boolean" ? b.thresholdEnabled : typeof o?.thresholdEnabled == "boolean" ? o.thresholdEnabled : !1, L = typeof b.accentEnabled == "boolean" ? b.accentEnabled : typeof o?.accentEnabled == "boolean" ? o.accentEnabled : !1, W = (w) => {
+    d == null || s == null || s.dispatch({ type: "SET_BUFFER_VALUE", cardId: d, key: "threshold", value: Number(w.target.value) });
+  }, G = (w) => {
+    d == null || s == null || s.dispatch({ type: "SET_BUFFER_VALUE", cardId: d, key: "timeframe", value: Number(w.target.value) });
+  }, ie = (w) => {
+    d == null || s == null || s.dispatch({ type: "SET_BUFFER_VALUE", cardId: d, key: "accent", value: w });
+  }, j = (w) => {
+    d == null || s == null || s.dispatch({ type: "SET_BUFFER_VALUE", cardId: d, key: "slots", value: w });
+  }, Z = (w) => {
+    d == null || s == null || s.dispatch({ type: "SET_BUFFER_VALUE", cardId: d, key: "thresholdEnabled", value: w });
+  }, g = (w) => {
+    d == null || s == null || s.dispatch({ type: "SET_BUFFER_VALUE", cardId: d, key: "accentEnabled", value: w });
+  }, N = s?.state.isDirty ?? !1, P = d, k = () => {
+    P != null && s?.dispatch({ type: "CLEAR_BUFFER", cardId: P });
+  }, [D, U] = R.useState(0), Ae = () => {
+    U((w) => w + 1), s?.dispatch({ type: "CLOSE_PANEL", reason: "apply-button" });
+  }, xe = R.useCallback(() => {
+  }, []);
   return /* @__PURE__ */ a(
-    z,
+    K,
     {
       variant: "with-stage",
-      onClose: () => l?.dispatch({ type: "CLOSE_PANEL", reason: "header-x" }),
-      stage: /* @__PURE__ */ a(fe, { span: m, rotating: !h, children: n ?? /* @__PURE__ */ y(pe, { children: [
-        /* @__PURE__ */ a("div", { style: { fontSize: 9, textTransform: "uppercase", letterSpacing: "0.06em", color: "#9ca3af", marginBottom: 6 }, children: s }),
-        /* @__PURE__ */ a("div", { style: { fontSize: 22, fontWeight: 700, color: "#111827", lineHeight: 1 }, children: o })
-      ] }) }),
+      onClose: () => s?.dispatch({ type: "CLOSE_PANEL", reason: "header-x" }),
+      stage: (
+        // M003-S004-MOT-02 — CloneStage wraps CloneCard so the spin-commit
+        // gesture has a transform host that does NOT disturb the inner
+        // CloneCard's existing sway / span-N geometry. Counter is owned here
+        // (Option 3); reptime sees no spinTrigger plumbing.
+        /* @__PURE__ */ a(et, { spinTrigger: D, onSpinComplete: xe, children: /* @__PURE__ */ a(je, { span: y, rotating: !m, children: n ?? /* @__PURE__ */ f(q, { 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__ */ a(
-        we,
+        De,
         {
-          dimensions: c,
+          dimensions: i,
           activeTab: v,
-          onSelect: N,
-          reduced: h
+          onSelect: T,
+          reduced: m
         }
       ),
       footer: {
@@ -202,10 +337,8 @@ function wt({
             id: "btn-reset",
             type: "button",
             className: "gloss-panel-chrome-v2__footer-btn",
-            disabled: !E,
-            onClick: () => {
-              H != null && l?.dispatch({ type: "CLEAR_BUFFER", cardId: H });
-            },
+            disabled: !N,
+            onClick: k,
             children: "Reset"
           }
         ),
@@ -215,13 +348,13 @@ function wt({
             id: "settings-apply",
             type: "button",
             className: "gloss-panel-chrome-v2__footer-btn gloss-panel-chrome-v2__footer-btn--primary",
-            disabled: !E,
-            onClick: () => l?.dispatch({ type: "CLOSE_PANEL", reason: "apply-button" }),
+            disabled: !N,
+            onClick: Ae,
             children: "Apply"
           }
         )
       },
-      children: /* @__PURE__ */ a("div", { className: "settings-shell", "data-shell": "settings", "aria-hidden": !e, children: /* @__PURE__ */ y(
+      children: /* @__PURE__ */ a("div", { className: "settings-shell", "data-shell": "settings", "aria-hidden": !e, children: /* @__PURE__ */ f(
         "div",
         {
           role: "tabpanel",
@@ -230,51 +363,40 @@ function wt({
           tabIndex: 0,
           className: "settings-shell__tabpanel",
           children: [
-            v === "timeframe" && /* @__PURE__ */ a(Be, { value: O, onChange: $ }),
-            v === "slots" && /* @__PURE__ */ a(Ue, { value: I, onChange: S, naturalSlots: i })
+            v === "threshold" && /* @__PURE__ */ a(
+              tt,
+              {
+                value: _,
+                onChange: W,
+                enabled: E,
+                onToggleEnabled: Z
+              }
+            ),
+            v === "timeframe" && /* @__PURE__ */ a(nt, { value: x, onChange: G }),
+            v === "slots" && /* @__PURE__ */ a(st, { value: F, onChange: j }),
+            v === "color" && /* @__PURE__ */ a(
+              ot,
+              {
+                value: $,
+                onSelect: ie,
+                enabled: L,
+                onToggleEnabled: g
+              }
+            )
           ]
         }
       ) })
     }
   );
 }
-function Ge({
-  isOpen: e,
-  cardSpan: t,
-  previewSlot: s,
-  metricInfo: o
-}) {
-  const n = D(), c = n?.state.activeTrigger, p = J(), r = c?.span;
-  return /* @__PURE__ */ a(
-    z,
-    {
-      variant: "with-stage",
-      onClose: () => n?.dispatch({ type: "CLOSE_PANEL", reason: "header-x" }),
-      stage: /* @__PURE__ */ a(fe, { span: t ?? r ?? 1, rotating: !p, children: s }),
-      children: /* @__PURE__ */ y(
-        "div",
-        {
-          className: "metric-info-shell",
-          "data-shell": "metric-info",
-          "aria-hidden": !e,
-          children: [
-            /* @__PURE__ */ a("h2", { className: "metric-info-shell__title", children: o.title }),
-            /* @__PURE__ */ a("p", { className: "metric-info-shell__description", children: o.description })
-          ]
-        }
-      )
-    }
-  );
-}
-Ge.displayName = "MetricInfoShell";
-const ge = [
+const _e = [
   "Revenue",
   "Order flow",
   "Rep performance",
   "Brand portfolio",
   "Account coverage",
   "Commission"
-], ye = "Revenue", be = {
+], Ce = "Revenue", Ne = {
   Revenue: {
     headline: "Are we hitting our number?",
     helper: "Top-line sales, growth, average order value, and pace-to-plan signals."
@@ -299,7 +421,7 @@ const ge = [
     headline: "What's our commission rate?",
     helper: "Outstanding balances, aging buckets, and effective commission yield."
   }
-}, ve = {
+}, Se = {
   Revenue: {
     primary: [
       {
@@ -584,46 +706,46 @@ const ge = [
     ]
   }
 };
-function Ce({
+function Ee({
   lenses: e,
   activeLens: t,
-  onLensChange: s,
-  variant: o = "pills",
-  lensMeta: n = be
+  onLensChange: r,
+  variant: l = "pills",
+  lensMeta: n = Ne
 }) {
-  return o === "pills" ? /* @__PURE__ */ a("div", { className: "cat-pills-wrap", children: /* @__PURE__ */ a("div", { className: "cat-pills", role: "tablist", "aria-label": "Metric lenses", children: e.map((c) => {
-    const p = c === t, r = n[c], i = ["cat-pill"];
-    return p && i.push("active"), /* @__PURE__ */ y(
+  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",
       {
         type: "button",
         role: "tab",
-        "aria-selected": p,
-        className: i.join(" "),
-        "data-lens": c,
+        "aria-selected": u,
+        className: s.join(" "),
+        "data-lens": i,
         onClick: () => {
-          p || s(c);
+          u || r(i);
         },
         children: [
-          c,
-          r?.beta && /* @__PURE__ */ a("span", { className: "cat-pill-beta", "aria-label": "Beta", children: "BETA" })
+          i,
+          o?.beta && /* @__PURE__ */ a("span", { className: "cat-pill-beta", "aria-label": "Beta", children: "BETA" })
         ]
       },
-      c
+      i
     );
-  }) }) }) : /* @__PURE__ */ a(Qe, { lenses: e, activeLens: t, onLensChange: s });
+  }) }) }) : /* @__PURE__ */ a(ct, { lenses: e, activeLens: t, onLensChange: r });
 }
-function Qe({
+function ct({
   lenses: e,
   activeLens: t,
-  onLensChange: s
+  onLensChange: r
 }) {
-  const [o, n] = x(!1), c = U(null), p = () => {
-    c.current != null && (window.clearTimeout(c.current), c.current = null);
-  }, r = () => {
-    p(), c.current = window.setTimeout(() => n(!1), 100);
-  }, i = e.filter((l) => l !== t);
-  return /* @__PURE__ */ a("div", { className: "cat-segmented-wrap", children: /* @__PURE__ */ y("div", { className: "cat-segmented", children: [
+  const [l, n] = A(!1), i = Q(null), u = () => {
+    i.current != null && (window.clearTimeout(i.current), i.current = null);
+  }, o = () => {
+    u(), i.current = window.setTimeout(() => n(!1), 100);
+  }, s = e.filter((c) => c !== t);
+  return /* @__PURE__ */ a("div", { className: "cat-segmented-wrap", children: /* @__PURE__ */ f("div", { className: "cat-segmented", children: [
     /* @__PURE__ */ a(
       "button",
       {
@@ -634,35 +756,35 @@ function Qe({
         children: t
       }
     ),
-    /* @__PURE__ */ y(
+    /* @__PURE__ */ f(
       "div",
       {
         className: "cat-seg-more",
         onMouseEnter: () => {
-          p(), n(!0);
+          u(), n(!0);
         },
-        onMouseLeave: r,
+        onMouseLeave: o,
         children: [
-          /* @__PURE__ */ a("button", { type: "button", className: "cat-seg cat-seg-more-btn", "aria-haspopup": "menu", "aria-expanded": o, children: "More ▾" }),
-          o && /* @__PURE__ */ a(
+          /* @__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: p,
-              onMouseLeave: r,
-              children: i.map((l) => /* @__PURE__ */ a(
+              onMouseEnter: u,
+              onMouseLeave: o,
+              children: s.map((c) => /* @__PURE__ */ a(
                 "button",
                 {
                   type: "button",
-                  "data-lens": l,
+                  "data-lens": c,
                   role: "menuitem",
                   onClick: () => {
-                    s(l), n(!1);
+                    r(c), n(!1);
                   },
-                  children: l
+                  children: c
                 },
-                l
+                c
               ))
             }
           )
@@ -671,38 +793,38 @@ function Qe({
     )
   ] }) });
 }
-function Z({ tiles: e, selectedTileId: t, onSelectTile: s, renderTile: o }) {
+function ae({ tiles: e, selectedTileId: t, onSelectTile: r, renderTile: l }) {
   return /* @__PURE__ */ a("div", { className: "cat-tiles", children: e.map((n) => {
-    const c = n.id === t, p = n.subStats != null && n.subStats.length > 0;
-    let r = null;
-    p ? n.subStats.length === 5 ? r = "span-5" : n.subStats.length === 3 ? r = "span-3" : r = "span-2" : n.stack === !0 && (r = "span-2");
-    const i = ["cat-tile"];
-    r && i.push(r), c && i.push("selected"), n.isNew && i.push("is-new"), n.startHere && i.push("start-here"), n.donut && i.push("has-donut");
-    const l = 1;
-    let u = 0.7;
+    const i = n.id === t, u = n.subStats != null && n.subStats.length > 0;
+    let o = null;
+    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"), 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 (n.donut) {
-      const d = /([\d.]+)\s*%/.exec(n.value);
-      if (d) {
-        const h = parseFloat(d[1]);
-        Number.isFinite(h) && (u = Math.max(0, Math.min(1, h / 100)));
+      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)));
       }
     }
-    return /* @__PURE__ */ y(
+    return /* @__PURE__ */ f(
       "button",
       {
         type: "button",
-        className: i.join(" "),
+        className: s.join(" "),
         "data-metric": n.id,
         "data-desc": n.desc,
-        "data-col-span": String(l),
+        "data-col-span": String(c),
         "data-donut": n.donut ? "true" : void 0,
         "data-accent": n.accent,
-        "aria-pressed": c,
-        onClick: () => s(n.id, n.desc),
+        "aria-pressed": i,
+        onClick: () => r(n.id, n.desc),
         style: n.accent ? { "--cat-tile-accent": n.accent } : void 0,
         children: [
           n.startHere && /* @__PURE__ */ a("span", { className: "cat-tile-start-here", "aria-hidden": "true", children: "START HERE" }),
-          o ? o(n) : /* @__PURE__ */ a(
+          l ? l(n) : /* @__PURE__ */ a(
             "div",
             {
               className: "cat-tile-primitive-wrapper gloss-metric-card",
@@ -710,28 +832,28 @@ function Z({ tiles: e, selectedTileId: t, onSelectTile: s, renderTile: o }) {
               style: { pointerEvents: "none", width: "100%", height: "100%" },
               "aria-hidden": "true",
               children: n.donut ? /* @__PURE__ */ a(
-                le,
+                pe,
                 {
                   variant: "donut",
                   label: n.label,
                   value: n.value,
-                  donutValue: u,
+                  donutValue: d,
                   donutMax: 1,
                   accentColor: n.accent,
-                  colSpan: l
+                  colSpan: c
                 }
               ) : /* @__PURE__ */ a(
-                le,
+                pe,
                 {
                   variant: "standard",
                   label: n.label,
                   value: n.value,
-                  colSpan: l
+                  colSpan: c
                 }
               )
             }
           ),
-          n.variants && n.variants.length > 0 && /* @__PURE__ */ a("span", { className: "cat-tile-variants", "aria-hidden": "true", children: n.variants.map((d) => /* @__PURE__ */ a("span", { children: d }, d)) }),
+          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" })
         ]
       },
@@ -739,17 +861,17 @@ function Z({ tiles: e, selectedTileId: t, onSelectTile: s, renderTile: o }) {
     );
   }) });
 }
-const ee = me(null);
-function te() {
-  return he(ee);
+const re = ye(null);
+function oe() {
+  return ve(re);
 }
-function Tt({ mode: e, dispatch: t }) {
-  const s = te();
-  if (s == null && e == null) return null;
-  const o = s?.mode ?? e ?? "add", n = s?.selectedTileId ?? null, c = s?.description ?? null, p = n == null;
-  return /* @__PURE__ */ y("div", { className: "panel-footer catalog", children: [
-    /* @__PURE__ */ a("div", { className: "cat-description", id: "cat-desc", children: c ?? /* @__PURE__ */ a("em", { children: "Tap a metric to see its description" }) }),
-    /* @__PURE__ */ y("div", { style: { display: "flex", padding: "10px 14px", gap: 8 }, children: [
+function Vt({ mode: e, dispatch: t }) {
+  const r = oe();
+  if (r == null && e == null) return 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__ */ 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__ */ a("div", { className: "spacer", style: { flex: 1 } }),
       /* @__PURE__ */ a(
         "button",
@@ -761,24 +883,24 @@ function Tt({ mode: e, dispatch: t }) {
           children: "Cancel"
         }
       ),
-      o === "add" && /* @__PURE__ */ a(
+      l === "add" && /* @__PURE__ */ a(
         "button",
         {
           id: "btn-cat-add",
           type: "button",
           className: "btn btn-primary",
-          disabled: p,
+          disabled: u,
           onClick: () => t({ type: "CLOSE_PANEL", reason: "apply-button" }),
           children: "Add metric"
         }
       ),
-      o === "replace" && /* @__PURE__ */ a(
+      l === "replace" && /* @__PURE__ */ a(
         "button",
         {
           id: "btn-cat-replace",
           type: "button",
           className: "btn btn-primary",
-          disabled: p,
+          disabled: u,
           onClick: () => t({ type: "CLOSE_PANEL", reason: "apply-button" }),
           children: "Replace metric"
         }
@@ -786,63 +908,63 @@ function Tt({ mode: e, dispatch: t }) {
     ] })
   ] });
 }
-function ie(e, t) {
+function me(e, t) {
   if (t.length === 0) return !0;
-  const s = t.toLowerCase();
-  if (e.label.toLowerCase().includes(s) || e.value.toLowerCase().includes(s)) 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(s) || o.value.toLowerCase().includes(s)) return !0;
+    for (const l of e.subStats)
+      if (l.label.toLowerCase().includes(r) || l.value.toLowerCase().includes(r)) return !0;
   }
   return !1;
 }
-function We() {
-  const t = te()?.description ?? null;
+function dt() {
+  const t = oe()?.description ?? null;
   return t == null ? /* @__PURE__ */ a("span", { style: { fontStyle: "italic" }, children: "Tap a metric to see its description" }) : /* @__PURE__ */ a("span", { children: t });
 }
-function xt({
+function Kt({
   isOpen: e,
-  lenses: t = ge,
-  defaultLens: s = ye,
-  tilesByLens: o = ve,
-  lensMeta: n = be,
-  renderTile: c,
-  onAdd: p
+  lenses: t = _e,
+  defaultLens: r = Ce,
+  tilesByLens: l = Se,
+  lensMeta: n = Ne,
+  renderTile: i,
+  onAdd: u
 }) {
-  const r = D(), [i, l] = x(s), [u, d] = x(null), [h, g] = x(null), [m, _] = x(""), v = o[i] ?? { primary: [] }, N = n[i], w = re(
-    () => v.primary.filter((S) => ie(S, m)),
-    [v.primary, m]
-  ), C = re(
-    () => (v.secondary ?? []).filter((S) => ie(S, m)),
-    [v.secondary, m]
-  ), O = () => {
-    u != null && p?.(u), r?.dispatch({ type: "CLOSE_PANEL", reason: "apply-button" });
-  }, I = () => r?.dispatch({ type: "CLOSE_PANEL", reason: "header-x" }), $ = u == null;
+  const o = O(), [s, c] = A(r), [d, m] = A(null), [h, y] = A(null), [p, v] = A(""), T = l[s] ?? { primary: [] }, S = n[s], b = ce(
+    () => T.primary.filter((E) => me(E, p)),
+    [T.primary, p]
+  ), _ = ce(
+    () => (T.secondary ?? []).filter((E) => me(E, p)),
+    [T.secondary, p]
+  ), x = () => {
+    d != null && u?.(d), o?.dispatch({ type: "CLOSE_PANEL", reason: "apply-button" });
+  }, $ = () => o?.dispatch({ type: "CLOSE_PANEL", reason: "header-x" }), F = d == null;
   return /* @__PURE__ */ a(
-    ee.Provider,
+    re.Provider,
     {
-      value: { mode: "add", selectedTileId: u, description: h },
+      value: { mode: "add", selectedTileId: d, description: h },
       children: /* @__PURE__ */ a(
-        z,
+        K,
         {
           variant: "no-stage",
           title: "Add a metric",
-          onClose: I,
+          onClose: $,
           footer: {
-            left: /* @__PURE__ */ a(We, {}),
+            left: /* @__PURE__ */ a(dt, {}),
             right: /* @__PURE__ */ a(
               "button",
               {
                 id: "btn-cat-add",
                 type: "button",
                 className: "gloss-panel-chrome-v2__footer-btn gloss-panel-chrome-v2__footer-btn--primary",
-                disabled: $,
-                onClick: O,
+                disabled: F,
+                onClick: x,
                 children: "Add metric"
               }
             )
           },
-          children: /* @__PURE__ */ y("div", { "data-shell": "catalog-add", "aria-hidden": !e, children: [
+          children: /* @__PURE__ */ f("div", { "data-shell": "catalog-add", "aria-hidden": !e, children: [
             /* @__PURE__ */ a("div", { className: "cat-search", children: /* @__PURE__ */ a(
               "input",
               {
@@ -850,54 +972,54 @@ function xt({
                 className: "cat-search-input",
                 placeholder: "Search metrics",
                 "aria-label": "Search metrics",
-                value: m,
-                onChange: (S) => _(S.target.value)
+                value: p,
+                onChange: (E) => v(E.target.value)
               }
             ) }),
             /* @__PURE__ */ a(
-              Ce,
+              Ee,
               {
                 lenses: t,
-                activeLens: i,
+                activeLens: s,
                 lensMeta: n,
                 variant: "pills",
-                onLensChange: (S) => {
-                  l(S), d(null), g(null), _("");
+                onLensChange: (E) => {
+                  c(E), m(null), y(null), v("");
                 }
               }
             ),
-            N && /* @__PURE__ */ y("div", { className: "cat-lens-meta", children: [
-              /* @__PURE__ */ a("h3", { className: "cat-lens-headline", children: N.headline }),
-              /* @__PURE__ */ a("p", { className: "cat-lens-helper", children: N.helper })
+            S && /* @__PURE__ */ f("div", { className: "cat-lens-meta", children: [
+              /* @__PURE__ */ a("h3", { className: "cat-lens-headline", children: S.headline }),
+              /* @__PURE__ */ a("p", { className: "cat-lens-helper", children: S.helper })
             ] }),
             /* @__PURE__ */ a(
-              Z,
+              ae,
               {
-                tiles: w,
-                selectedTileId: u,
-                onSelectTile: (S, E) => {
-                  d(S), g(E);
+                tiles: b,
+                selectedTileId: d,
+                onSelectTile: (E, L) => {
+                  m(E), y(L);
                 },
-                renderTile: c
+                renderTile: i
               }
             ),
-            C.length > 0 && /* @__PURE__ */ y("div", { className: "cat-more-in-lens", children: [
+            _.length > 0 && /* @__PURE__ */ f("div", { className: "cat-more-in-lens", children: [
               /* @__PURE__ */ a("div", { className: "cat-more-in-lens__heading", children: "MORE IN THIS LENS" }),
               /* @__PURE__ */ a(
-                Z,
+                ae,
                 {
-                  tiles: C,
-                  selectedTileId: u,
-                  onSelectTile: (S, E) => {
-                    d(S), g(E);
+                  tiles: _,
+                  selectedTileId: d,
+                  onSelectTile: (E, L) => {
+                    m(E), y(L);
                   },
-                  renderTile: c
+                  renderTile: i
                 }
               )
             ] }),
-            w.length === 0 && C.length === 0 && m.length > 0 && /* @__PURE__ */ y("div", { className: "cat-empty", children: [
+            b.length === 0 && _.length === 0 && p.length > 0 && /* @__PURE__ */ f("div", { className: "cat-empty", children: [
               'No metrics match "',
-              m,
+              p,
               '".'
             ] })
           ] })
@@ -906,67 +1028,67 @@ function xt({
     }
   );
 }
-function je() {
-  const t = te()?.description ?? null;
-  return t == null ? /* @__PURE__ */ a("em", { children: "Tap a metric to see its description" }) : /* @__PURE__ */ a(pe, { children: t });
+function ut() {
+  const t = oe()?.description ?? null;
+  return t == null ? /* @__PURE__ */ a("em", { children: "Tap a metric to see its description" }) : /* @__PURE__ */ a(q, { children: t });
 }
-function Et({
+function qt({
   isOpen: e,
   replacingLabel: t,
-  lenses: s = ge,
-  defaultLens: o = ye,
-  tilesByLens: n = ve,
-  renderTile: c
+  lenses: r = _e,
+  defaultLens: l = Ce,
+  tilesByLens: n = Se,
+  renderTile: i
 }) {
-  const p = D(), [r, i] = x(o), [l, u] = x(null), [d, h] = x(null), g = n[r] ?? { primary: [] }, m = [...g.primary, ...g.secondary ?? []], _ = () => p?.dispatch({ type: "CLOSE_PANEL", reason: "apply-button" }), v = () => p?.dispatch({ type: "CLOSE_PANEL", reason: "header-x" }), N = l == null;
+  const u = O(), [o, s] = A(l), [c, d] = A(null), [m, h] = A(null), y = n[o] ?? { primary: [] }, p = [...y.primary, ...y.secondary ?? []], v = () => u?.dispatch({ type: "CLOSE_PANEL", reason: "apply-button" }), T = () => u?.dispatch({ type: "CLOSE_PANEL", reason: "header-x" }), S = c == null;
   return /* @__PURE__ */ a(
-    ee.Provider,
+    re.Provider,
     {
-      value: { mode: "replace", selectedTileId: l, description: d },
+      value: { mode: "replace", selectedTileId: c, description: m },
       children: /* @__PURE__ */ a(
-        z,
+        K,
         {
           variant: "no-stage",
           title: "Replace metric",
-          onClose: v,
+          onClose: T,
           footer: {
-            left: /* @__PURE__ */ a(je, {}),
+            left: /* @__PURE__ */ a(ut, {}),
             right: /* @__PURE__ */ a(
               "button",
               {
                 id: "btn-cat-replace",
                 type: "button",
                 className: "gloss-panel-chrome-v2__footer-btn gloss-panel-chrome-v2__footer-btn--primary",
-                disabled: N,
-                onClick: _,
+                disabled: S,
+                onClick: v,
                 children: "Replace metric"
               }
             )
           },
-          children: /* @__PURE__ */ y("div", { "data-shell": "catalog-replace", "aria-hidden": !e, children: [
-            t && /* @__PURE__ */ y("p", { className: "cat-subtitle", children: [
+          children: /* @__PURE__ */ f("div", { "data-shell": "catalog-replace", "aria-hidden": !e, children: [
+            t && /* @__PURE__ */ f("p", { className: "cat-subtitle", children: [
               "replacing ",
               t
             ] }),
             /* @__PURE__ */ a(
-              Ce,
+              Ee,
               {
-                lenses: s,
-                activeLens: r,
-                onLensChange: (w) => {
-                  i(w), u(null), h(null);
+                lenses: r,
+                activeLens: o,
+                onLensChange: (b) => {
+                  s(b), d(null), h(null);
                 }
               }
             ),
             /* @__PURE__ */ a(
-              Z,
+              ae,
               {
-                tiles: m,
-                selectedTileId: l,
-                onSelectTile: (w, C) => {
-                  u(w), h(C);
+                tiles: p,
+                selectedTileId: c,
+                onSelectTile: (b, _) => {
+                  d(b), h(_);
                 },
-                renderTile: c
+                renderTile: i
               }
             )
           ] })
@@ -975,13 +1097,13 @@ function Et({
     }
   );
 }
-const _e = me(null);
-function Ne() {
-  return he(_e);
+const Te = ye(null);
+function Pe() {
+  return ve(Te);
 }
-function Ze(e = {}) {
-  const t = Ne(), s = t?.createPage, o = t?.setPages;
-  return /* @__PURE__ */ y(
+function pt(e = {}) {
+  const t = Pe(), r = t?.createPage, l = t?.setPages;
+  return /* @__PURE__ */ f(
     "div",
     {
       className: "panel-footer pm",
@@ -995,11 +1117,11 @@ function Ze(e = {}) {
             type: "button",
             className: "btn btn-primary",
             onClick: () => {
-              if (s) {
-                s();
+              if (r) {
+                r();
                 return;
               }
-              o && o((n) => [
+              l && l((n) => [
                 ...n,
                 { id: `new-${Date.now()}`, name: "Untitled", active: !1 }
               ]);
@@ -1011,34 +1133,34 @@ function Ze(e = {}) {
     }
   );
 }
-function ce({ page: e, onRename: t, onKebab: s, onDragStart: o, onSwitchPage: n }) {
-  const c = Ne(), [p, r] = x(!1), i = U(null);
-  F(() => {
-    if (!p) return;
-    const m = (_) => {
-      i.current && (i.current.contains(_.target) || r(!1));
+function he({ page: e, onRename: t, onKebab: r, onDragStart: l, onSwitchPage: n }) {
+  const i = Pe(), [u, o] = A(!1), s = Q(null);
+  z(() => {
+    if (!u) return;
+    const p = (v) => {
+      s.current && (s.current.contains(v.target) || o(!1));
     };
-    return document.addEventListener("mousedown", m, !0), () => document.removeEventListener("mousedown", m, !0);
-  }, [p]);
-  const l = () => {
-    if (r(!1), t) return t(e.id);
-    if (!c?.renamePage) return;
-    const m = window.prompt("Rename page", e.name);
-    m != null && m.trim().length > 0 && c.renamePage(e.id, m.trim());
-  }, u = () => {
-    r(!1), c?.duplicatePage?.(e.id);
+    return document.addEventListener("mousedown", p, !0), () => document.removeEventListener("mousedown", p, !0);
+  }, [u]);
+  const c = () => {
+    if (o(!1), t) return t(e.id);
+    if (!i?.renamePage) return;
+    const p = window.prompt("Rename page", e.name);
+    p != null && p.trim().length > 0 && i.renamePage(e.id, p.trim());
   }, d = () => {
-    r(!1), c?.deletePage?.(e.id);
-  }, h = (m) => {
-    m.stopPropagation(), n && !e.active && n(e.id);
-  }, g = ["pm-row"];
-  return e.active && g.push("active"), /* @__PURE__ */ y("div", { ref: i, className: g.join(" "), "data-page-id": e.id, role: "listitem", children: [
+    o(!1), i?.duplicatePage?.(e.id);
+  }, m = () => {
+    o(!1), i?.deletePage?.(e.id);
+  }, h = (p) => {
+    p.stopPropagation(), n && !e.active && n(e.id);
+  }, y = ["pm-row"];
+  return e.active && y.push("active"), /* @__PURE__ */ f("div", { ref: s, className: y.join(" "), "data-page-id": e.id, role: "listitem", children: [
     /* @__PURE__ */ a(
       "div",
       {
         className: "pm-handle",
         "aria-hidden": "true",
-        onMouseDown: () => o?.(e.id),
+        onMouseDown: () => l?.(e.id),
         children: "⋮⋮"
       }
     ),
@@ -1049,8 +1171,8 @@ function ce({ page: e, onRename: t, onKebab: s, onDragStart: o, onSwitchPage: n
         role: n && !e.active ? "button" : void 0,
         tabIndex: n && !e.active ? 0 : void 0,
         onClick: n ? h : void 0,
-        onKeyDown: (m) => {
-          !n || e.active || (m.key === "Enter" || m.key === " ") && (m.preventDefault(), m.stopPropagation(), n(e.id));
+        onKeyDown: (p) => {
+          !n || e.active || (p.key === "Enter" || p.key === " ") && (p.preventDefault(), p.stopPropagation(), n(e.id));
         },
         "aria-label": n && !e.active ? `Switch to ${e.name}` : void 0,
         children: e.name
@@ -1063,34 +1185,34 @@ function ce({ page: e, onRename: t, onKebab: s, onDragStart: o, onSwitchPage: n
         className: "pm-kebab",
         "aria-label": "Page options",
         "aria-haspopup": "menu",
-        "aria-expanded": p,
-        onPointerDown: (m) => m.stopPropagation(),
-        onMouseDown: (m) => m.stopPropagation(),
-        onClick: (m) => {
-          if (m.stopPropagation(), s) return s(e.id);
-          r((_) => !_);
+        "aria-expanded": u,
+        onPointerDown: (p) => p.stopPropagation(),
+        onMouseDown: (p) => p.stopPropagation(),
+        onClick: (p) => {
+          if (p.stopPropagation(), r) return r(e.id);
+          o((v) => !v);
         },
         children: "⋯"
       }
     ),
-    p && /* @__PURE__ */ y(
+    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__ */ a("button", { type: "button", role: "menuitem", className: "pm-kebab-menu__item", onClick: l, children: "Rename" }),
-          /* @__PURE__ */ a("button", { type: "button", role: "menuitem", className: "pm-kebab-menu__item", onClick: u, children: "Duplicate" }),
+          /* @__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",
               role: "menuitem",
               className: "pm-kebab-menu__item pm-kebab-menu__item--danger",
-              onClick: d,
+              onClick: m,
               children: "Delete"
             }
           )
@@ -1099,121 +1221,121 @@ function ce({ page: e, onRename: t, onKebab: s, onDragStart: o, onSwitchPage: n
     )
   ] });
 }
-const Xe = [
+const mt = [
   { 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 At({
+function Qt({
   isOpen: e,
-  pages: t = Xe,
-  externalPages: s,
-  activePageId: o,
+  pages: t = mt,
+  externalPages: r,
+  activePageId: l,
   onRename: n,
-  onDuplicate: c,
-  onDelete: p,
-  onReorder: r,
-  onCreatePage: i,
-  onSwitchPage: l
+  onDuplicate: i,
+  onDelete: u,
+  onReorder: o,
+  onCreatePage: s,
+  onSwitchPage: c
 }) {
-  const u = D(), [d, h] = x(() => [...t]), g = L((f, P) => {
-    h((T) => T.map((A) => A.id === f ? { ...A, name: P } : A));
-  }, []), m = L((f) => {
-    h((P) => {
-      const T = P.find((K) => K.id === f);
-      if (!T) return P;
-      const A = {
-        id: `${T.id}-copy-${Date.now()}`,
-        name: `${T.name} copy`,
+  const d = O(), [m, h] = A(() => [...t]), y = M((g, N) => {
+    h((P) => P.map((k) => k.id === g ? { ...k, name: N } : k));
+  }, []), p = M((g) => {
+    h((N) => {
+      const P = N.find((U) => U.id === g);
+      if (!P) return N;
+      const k = {
+        id: `${P.id}-copy-${Date.now()}`,
+        name: `${P.name} copy`,
         active: !1
-      }, k = P.findIndex((K) => K.id === f);
-      return [...P.slice(0, k + 1), A, ...P.slice(k + 1)];
+      }, D = N.findIndex((U) => U.id === g);
+      return [...N.slice(0, D + 1), k, ...N.slice(D + 1)];
     });
-  }, []), _ = L((f) => {
-    h((P) => P.filter((T) => T.id !== f));
-  }, []), v = L((f) => {
-    h((P) => {
-      const T = new Map(P.map((k) => [k.id, k])), A = f.map((k) => T.get(k)).filter(Boolean);
-      return A.length === P.length ? A : P;
+  }, []), v = M((g) => {
+    h((N) => N.filter((P) => P.id !== g));
+  }, []), T = M((g) => {
+    h((N) => {
+      const P = new Map(N.map((D) => [D.id, D])), k = g.map((D) => P.get(D)).filter(Boolean);
+      return k.length === N.length ? k : N;
     });
-  }, []), N = s != null, w = N ? s : d, C = o != null ? w.map((f) => ({ ...f, active: f.id === o })) : [...w], O = n ?? (N ? void 0 : g), I = c ?? (N ? void 0 : m), $ = p ?? (N ? void 0 : _), S = r ?? (N ? void 0 : v), E = L(
-    (f) => {
-      N || h(f);
-    },
-    [N]
-  ), H = L(
-    (f) => {
-      const P = f[0]?.items.map((T) => T.id) ?? [];
-      P.length > 0 && S && S(P);
+  }, []), S = r != null, b = S ? r : m, _ = l != null ? b.map((g) => ({ ...g, active: g.id === l })) : [...b], x = n ?? (S ? void 0 : y), $ = i ?? (S ? void 0 : p), F = u ?? (S ? void 0 : v), E = o ?? (S ? void 0 : T), L = M(
+    (g) => {
+      S || h(g);
     },
     [S]
-  ), ae = C.map((f) => `${f.id}:${f.name}`).join("|"), se = S != null && C.length > 1 ? /* @__PURE__ */ a(
-    Te,
+  ), W = M(
+    (g) => {
+      const N = g[0]?.items.map((P) => P.id) ?? [];
+      N.length > 0 && E && E(N);
+    },
+    [E]
+  ), G = _.map((g) => `${g.id}:${g.name}`).join("|"), j = E != null && _.length > 1 ? /* @__PURE__ */ a(
+    Le,
     {
       zones: [
         {
           zoneKey: "pm-pages",
-          items: C.map((f) => ({ ...f, id: f.id }))
+          items: _.map((g) => ({ ...g, id: g.id }))
         }
       ],
-      onZoneChange: H,
-      renderZone: (f, P, T) => /* @__PURE__ */ a("div", { className: "pm-list", role: "list", children: T }),
-      renderItem: (f) => /* @__PURE__ */ a(
-        ce,
+      onZoneChange: W,
+      renderZone: (g, N, P) => /* @__PURE__ */ a("div", { className: "pm-list", role: "list", children: P }),
+      renderItem: (g) => /* @__PURE__ */ a(
+        he,
         {
-          page: f,
-          onSwitchPage: l
+          page: g,
+          onSwitchPage: c
         },
-        f.id
+        g.id
       )
     },
-    ae
-  ) : /* @__PURE__ */ a("div", { className: "pm-list", role: "list", children: C.map((f) => /* @__PURE__ */ a(
-    ce,
+    G
+  ) : /* @__PURE__ */ a("div", { className: "pm-list", role: "list", children: _.map((g) => /* @__PURE__ */ a(
+    he,
     {
-      page: f,
-      onSwitchPage: l
+      page: g,
+      onSwitchPage: c
     },
-    f.id
-  )) }), R = () => u?.dispatch({ type: "CLOSE_PANEL", reason: "header-x" });
+    g.id
+  )) }), Z = () => d?.dispatch({ type: "CLOSE_PANEL", reason: "header-x" });
   return /* @__PURE__ */ a(
-    _e.Provider,
+    Te.Provider,
     {
       value: {
-        pages: C,
-        setPages: E,
-        renamePage: O,
-        duplicatePage: I,
-        deletePage: $,
+        pages: _,
+        setPages: L,
+        renamePage: x,
+        duplicatePage: $,
+        deletePage: F,
         // Sprint 2026-05-20 — propagate live create binding for footer.
-        createPage: i
+        createPage: s
       },
       children: /* @__PURE__ */ a(
-        z,
+        K,
         {
           variant: "no-stage",
           title: "Manage pages",
-          onClose: R,
-          footer: { right: /* @__PURE__ */ a(Ze, {}) },
-          children: /* @__PURE__ */ a("div", { "data-shell": "page-management", "aria-hidden": !e, children: se })
+          onClose: Z,
+          footer: { right: /* @__PURE__ */ a(pt, {}) },
+          children: /* @__PURE__ */ a("div", { "data-shell": "page-management", "aria-hidden": !e, children: j })
         }
       )
     }
   );
 }
-const Dt = {
+const Wt = {
   SETTINGS: "settings",
   CATALOG_ADD: "catalog-add",
   CATALOG_REPLACE: "catalog-replace",
   PAGE_MGMT: "page-management",
   NOTIFICATION_CENTER: "notification-center"
-}, Je = {
+}, ht = {
   position: "fixed",
   inset: 0,
   pointerEvents: "none",
   zIndex: 55
-}, et = {
+}, ft = {
   position: "absolute",
   inset: 0,
   zIndex: 1,
@@ -1222,358 +1344,355 @@ const Dt = {
   pointerEvents: "none",
   background: "rgba(0, 0, 0, 0.04)"
 };
-function kt() {
-  const { state: e, dispatch: t, getCloseLog: s } = xe();
-  F(() => {
+function Gt() {
+  const { state: e, dispatch: t, getCloseLog: r } = Me();
+  z(() => {
     if (e.activePanelId == null) return;
-    function n(c) {
-      c.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", n), () => document.removeEventListener("keydown", n);
   }, [e.activePanelId, t]);
-  const o = U(e);
-  return Ae(() => {
-    o.current = e;
-  }), F(() => {
+  const l = Q(e);
+  return Ie(() => {
+    l.current = e;
+  }), z(() => {
     if (process.env.NODE_ENV === "production") return;
     const n = window;
     return n.__panelsHostHandle && console.warn("[panels] multiple PanelHost/PanelHostShell instances mounted; dev handle is unreliable"), n.__panelsHostHandle = {
       dispatch: t,
-      getState: () => o.current,
-      getCloseLog: s
+      getState: () => l.current,
+      getCloseLog: r
     }, () => {
       n.__panelsHostHandle?.dispatch === t && delete window.__panelsHostHandle;
     };
-  }, [t, s]), /* @__PURE__ */ a("div", { "data-panel-host": "true", style: Je, children: e.activePanelId != null && /* @__PURE__ */ a(
+  }, [t, r]), /* @__PURE__ */ a("div", { "data-panel-host": "true", style: ht, children: e.activePanelId != null && /* @__PURE__ */ a(
     "div",
     {
       "data-panel-scrim": "true",
-      style: et
+      style: ft
     }
   ) });
 }
-const tt = 700;
-function nt(e, t) {
-  const [s, o] = x(null), n = U(null);
-  return F(() => {
+const gt = 700;
+function bt(e, t) {
+  const [r, l] = A(null), n = Q(null);
+  return z(() => {
     if (e != null) {
-      n.current != null && (clearTimeout(n.current), n.current = null), o(null);
+      n.current != null && (clearTimeout(n.current), n.current = null), l(null);
       return;
     }
     if (t) {
-      n.current != null && (clearTimeout(n.current), n.current = null), o(null);
+      n.current != null && (clearTimeout(n.current), n.current = null), l(null);
       return;
     }
     return n.current = setTimeout(() => {
-      o(null), n.current = null;
-    }, tt), () => {
+      l(null), n.current = null;
+    }, gt), () => {
       n.current != null && (clearTimeout(n.current), n.current = null);
     };
-  }, [e, t]), F(() => {
-    e != null && o(e);
-  }, [e]), e != null ? { panelId: e, isOpen: !0 } : s != null ? { panelId: s, isOpen: !1 } : { panelId: null, isOpen: !1 };
+  }, [e, t]), z(() => {
+    e != null && l(e);
+  }, [e]), e != null ? { panelId: e, isOpen: !0 } : r != null ? { panelId: r, isOpen: !1 } : { panelId: null, isOpen: !1 };
 }
-function Lt({ panelComponents: e, children: t }) {
-  const s = D(), o = s?.state.lastClose?.reason === "section-hidden", n = nt(s?.state.activePanelId ?? null, o);
-  if (s == null || n.panelId == null) return null;
-  const c = n.panelId, p = n.isOpen, r = e?.[c];
-  return r == null && t == null ? (process.env.NODE_ENV !== "production" && console.error(
+function jt({ panelComponents: e, children: t }) {
+  const r = O(), l = r?.state.lastClose?.reason === "section-hidden", n = bt(r?.state.activePanelId ?? null, l);
+  if (r == null || n.panelId == null) return null;
+  const i = n.panelId, u = n.isOpen, o = e?.[i];
+  return o == null && t == null ? (process.env.NODE_ENV !== "production" && console.error(
     "[panels] No panel component registered for activePanelId:",
-    c
-  ), null) : /* @__PURE__ */ a(Ee, { isOpen: p, children: r != null ? /* @__PURE__ */ a(r, { isOpen: p }) : t });
+    i
+  ), null) : /* @__PURE__ */ a(Oe, { isOpen: u, children: o != null ? /* @__PURE__ */ a(o, { isOpen: u }) : t });
 }
-function de(e) {
+function fe(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 at = 685, ue = 627, st = "cubic-bezier(0.22, 1, 0.36, 1)", rt = 200;
-function Se(e, t) {
+const yt = 685, ge = 627, vt = "cubic-bezier(0.22, 1, 0.36, 1)", _t = 200;
+function we(e, t) {
   if (typeof window > "u") return t;
-  const s = window.getComputedStyle(document.documentElement).getPropertyValue(e).trim();
-  if (!s) return t;
-  const o = parseFloat(s);
-  return Number.isNaN(o) ? t : s.endsWith("s") && !s.endsWith("ms") ? o * 1e3 : o;
+  const r = window.getComputedStyle(document.documentElement).getPropertyValue(e).trim();
+  if (!r) return t;
+  const l = parseFloat(r);
+  return Number.isNaN(l) ? t : r.endsWith("s") && !r.endsWith("ms") ? l * 1e3 : l;
 }
-function ot(e, t) {
+function Ct(e, t) {
   return typeof window > "u" ? t : window.getComputedStyle(document.documentElement).getPropertyValue(e).trim() || t;
 }
 function Y(e) {
   e.dispatch({ type: "OPEN_PANEL", panelId: e.panelId, trigger: e.trigger });
 }
-function lt(e) {
-  const { mountEl: t, chromeEl: s, reducedMotion: o, onAssert: n } = e;
-  if (t == null || s == null) {
+function Nt(e) {
+  const { mountEl: t, chromeEl: r, reducedMotion: l, onAssert: n } = e;
+  if (t == null || r == null) {
     Y(e), n?.({ branch: "slide-fallback-no-dom", timestamp: Date.now() });
     return;
   }
-  if (o) {
+  if (l) {
     e.dispatch({ type: "OPEN_PANEL", panelId: e.panelId, trigger: e.trigger }), n?.({ branch: "slide-reduced-motion", timestamp: Date.now() });
     return;
   }
-  if (typeof s.animate != "function") {
+  if (typeof r.animate != "function") {
     Y(e), n?.({ branch: "slide-no-waapi", timestamp: Date.now() });
     return;
   }
-  const c = s.cloneNode(!0);
-  c.id = "panel-chrome-frozen", c.style.cssText = "position:absolute;left:8px;right:8px;top:8px;z-index:1;pointer-events:none;", t.appendChild(c), s.style.zIndex = "2", e.dispatch({ type: "OPEN_PANEL", panelId: e.panelId, trigger: e.trigger });
-  const p = Se("--panel-open-dur", at), r = ot("--panel-easing", st), i = s.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 = we("--panel-open-dur", yt), o = Ct("--panel-easing", vt), s = r.animate(
     [{ transform: "translateY(100%)" }, { transform: "translateY(0)" }],
-    { duration: p, easing: r, fill: "forwards" }
+    { duration: u, easing: o, fill: "forwards" }
   );
-  i.addEventListener(
+  s.addEventListener(
     "finish",
     () => {
-      c.remove(), s.style.zIndex = "", i.cancel(), n?.({ 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 }
   );
 }
-function it(e) {
-  const { mountEl: t, onAssert: s } = e;
+function St(e) {
+  const { mountEl: t, onAssert: r } = e;
   if (t == null) {
-    e.dispatch({ type: "CLOSE_PANEL", reason: "mutex-handoff" }), setTimeout(() => Y(e), ue), s?.({ branch: "handoff-fallback-no-mount", timestamp: Date.now() });
+    e.dispatch({ type: "CLOSE_PANEL", reason: "mutex-handoff" }), setTimeout(() => Y(e), ge), r?.({ branch: "handoff-fallback-no-mount", timestamp: Date.now() });
     return;
   }
-  const o = Se("--panel-close-dur", ue);
-  let n = !1, c = null;
-  const p = (i) => {
-    i.target !== t || i.propertyName !== "max-height" || n || (n = !0, c != null && clearTimeout(c), t.removeEventListener("transitionend", p), e.dispatch({ type: "OPEN_PANEL", panelId: e.panelId, trigger: e.trigger }), s?.({ branch: "handoff-complete", timestamp: Date.now() }));
-  }, r = () => {
-    n || (n = !0, t.removeEventListener("transitionend", p), e.dispatch({ type: "OPEN_PANEL", panelId: e.panelId, trigger: e.trigger }), s?.({ branch: "handoff-forced", timestamp: Date.now() }));
+  const l = we("--panel-close-dur", ge);
+  let n = !1, i = null;
+  const u = (s) => {
+    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 = () => {
+    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", p), e.dispatch({ type: "CLOSE_PANEL", reason: "mutex-handoff" }), c = setTimeout(r, o + rt);
+  t.addEventListener("transitionend", u), e.dispatch({ type: "CLOSE_PANEL", reason: "mutex-handoff" }), i = setTimeout(o, l + _t);
 }
-function ct(e) {
-  const { state: t, onAssert: s } = e;
+function Et(e) {
+  const { state: t, onAssert: r } = e;
   if (t.activePanelId && t.isDirty) {
-    e.dispatch({ type: "OPEN_PANEL", panelId: e.panelId, trigger: e.trigger }), s?.({ 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 = de(t.activeTrigger), n = de(e.trigger);
-  if (!!t.activePanelId && o != null && o === n) {
-    lt(e);
+  const l = fe(t.activeTrigger), n = fe(e.trigger);
+  if (!!t.activePanelId && l != null && l === n) {
+    Nt(e);
     return;
   }
   if (t.activePanelId) {
-    it(e);
+    St(e);
     return;
   }
-  Y(e), s?.({ branch: "fresh-open", timestamp: Date.now() });
+  Y(e), r?.({ branch: "fresh-open", timestamp: Date.now() });
 }
-function dt() {
+function Tt() {
   if (!(typeof window > "u"))
     return window.__panelsAsserter;
 }
-function Mt() {
-  const e = D(), t = J();
-  return L(
-    (s, o) => {
+function Zt() {
+  const e = O(), t = be();
+  return M(
+    (r, l) => {
       if (!e)
         return;
-      const n = typeof document < "u" ? document.querySelector('[data-mount="panel"]') : null, c = typeof document < "u" ? document.querySelector('[data-chrome="panel"]') : null, p = {
-        panelId: s,
-        trigger: o,
+      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: n,
-        chromeEl: c,
+        chromeEl: i,
         reducedMotion: t,
-        onAssert: (r) => {
-          dt()?.recordTransition?.(r);
+        onAssert: (o) => {
+          Tt()?.recordTransition?.(o);
         }
       };
-      ct(p);
+      Et(u);
     },
     [e, t]
   );
 }
-function Ot({ children: e }) {
-  return /* @__PURE__ */ a("div", { className: "clone-stage", children: e });
-}
-let V = !1, q = null;
-function X() {
+let V = !1, X = null;
+function se() {
   const e = [];
   let t = "cleaned";
   document.querySelectorAll("#panel-chrome-frozen").length > 0 && (e.push("#panel-chrome-frozen"), t = "lingering");
-  const o = document.querySelectorAll(".gloss-panel-mount");
-  o.length > 1 && e.push(`mount-count=${o.length}`);
-  const n = o[0] ?? null, c = n ? n.querySelectorAll(".gloss-panel-chrome") : [];
-  c.length > 1 && e.push(`chrome-count=${c.length}`);
-  const p = c[0] ?? null;
-  if (p) {
-    const u = p.style.zIndex;
-    u !== "" && u !== "2" && e.push(`chrome-zindex=${u}`);
+  const l = document.querySelectorAll(".gloss-panel-mount");
+  l.length > 1 && e.push(`mount-count=${l.length}`);
+  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 r = n ? "present" : "absent", i = p ? "present" : "absent";
+  const o = n ? "present" : "absent", s = u ? "present" : "absent";
   return {
     valid: e.length === 0,
-    mount: r,
-    chrome: i,
+    mount: o,
+    chrome: s,
     frozen: t,
     orphans: e,
     timestamp: Date.now()
   };
 }
-const G = "8px 8px 0px", Q = "64px", W = "inset(0px 0px 60px 0px)", j = "inset(0px -40px -40px -40px)";
-function b(e, t, s, o, n) {
-  return { id: e, constraint: t, expected: s, actual: o, pass: n };
+const J = "8px 8px 0px", ee = "64px", te = "inset(0px 0px 60px 0px)", ne = "inset(0px -40px -40px -40px)";
+function C(e, t, r, l, n) {
+  return { id: e, constraint: t, expected: r, actual: l, pass: n };
 }
-function M(e) {
+function I(e) {
   const t = parseInt(e, 10);
   return Number.isFinite(t) ? t : NaN;
 }
-function ne() {
-  const e = [], t = document.querySelector(".gloss-panel-mount"), s = t?.querySelector(".gloss-panel-chrome") ?? null, o = document.querySelector(".gloss-panel-coordinator") ?? document.querySelector("[data-panel-coordinator]"), n = document.querySelector(".bell-cutout"), c = document.querySelector(".bell-popover"), p = document.querySelector(".gloss-bottom-toolbar");
+function le() {
+  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(b("C1", "mount --reveal-y matches clip-path inset-bottom Npx", "mount present", "absent", !1));
+    e.push(C("C1", "mount --reveal-y matches clip-path inset-bottom Npx", "mount present", "absent", !1));
   else {
-    const r = getComputedStyle(t), i = r.getPropertyValue("--reveal-y").trim() || t.style.getPropertyValue("--reveal-y").trim(), l = r.clipPath || t.style.clipPath || "", u = l.match(/inset\(\s*0(?:px)?\s+0(?:px)?\s+(\d+)px\s+0(?:px)?\s*\)/), d = u ? parseInt(u[1], 10) : NaN, h = M(i), g = Number.isFinite(d) && Number.isFinite(h) && d === 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 = I(s), y = Number.isFinite(m) && Number.isFinite(h) && m === h;
     e.push(
-      b(
+      C(
         "C1",
         "mount --reveal-y matches clip-path inset-bottom Npx",
         `inset(0 0 ${h}px 0) === --reveal-y(${h}px)`,
-        `--reveal-y=${i || "n/a"} clip-path=${l || "n/a"}`,
-        g
+        `--reveal-y=${s || "n/a"} clip-path=${c || "n/a"}`,
+        y
       )
     );
   }
   if (!t)
-    e.push(b("C2", "mount padding constant", G, "absent", !1));
+    e.push(C("C2", "mount padding constant", J, "absent", !1));
   else {
-    const r = t.style.padding, i = getComputedStyle(t), l = r || i.padding || "", u = l === G || l === "8px 8px 0px 8px";
-    e.push(b("C2", "mount padding constant", G, l || "n/a", u));
+    const o = t.style.padding, s = getComputedStyle(t), c = o || s.padding || "", d = c === J || c === "8px 8px 0px 8px";
+    e.push(C("C2", "mount padding constant", J, c || "n/a", d));
   }
   if (!t)
-    e.push(b("C3", "mount.bottom resolves to var(--tb-h)=64px", Q, "absent", !1));
+    e.push(C("C3", "mount.bottom resolves to var(--tb-h)=64px", ee, "absent", !1));
   else {
-    const i = getComputedStyle(t).bottom || t.style.bottom || "", l = i === Q;
-    e.push(b("C3", "mount.bottom resolves to var(--tb-h)=64px", Q, i || "n/a", l));
+    const s = getComputedStyle(t).bottom || t.style.bottom || "", c = s === ee;
+    e.push(C("C3", "mount.bottom resolves to var(--tb-h)=64px", ee, s || "n/a", c));
   }
-  if (!s)
-    e.push(b("C4", "panel-chrome height formula = (row-h*3)+(row-gap*3)-8px", "formula match", "absent", !1));
+  if (!r)
+    e.push(C("C4", "panel-chrome height formula = (row-h*3)+(row-gap*3)-8px", "formula match", "absent", !1));
   else {
-    const r = getComputedStyle(s), i = M(
-      r.getPropertyValue("--row-h").trim() || s.style.getPropertyValue("--row-h").trim() || "0"
-    ), l = M(
-      r.getPropertyValue("--row-gap").trim() || s.style.getPropertyValue("--row-gap").trim() || "0"
-    ), u = i * 3 + l * 3 - 8, d = M(r.height || s.style.height || ""), h = Number.isFinite(i) && Number.isFinite(l) && Number.isFinite(d) && Number.isFinite(u) && d === u;
+    const o = getComputedStyle(r), s = I(
+      o.getPropertyValue("--row-h").trim() || r.style.getPropertyValue("--row-h").trim() || "0"
+    ), c = I(
+      o.getPropertyValue("--row-gap").trim() || r.style.getPropertyValue("--row-gap").trim() || "0"
+    ), d = s * 3 + c * 3 - 8, m = I(o.height || r.style.height || ""), h = Number.isFinite(s) && Number.isFinite(c) && Number.isFinite(m) && Number.isFinite(d) && m === d;
     e.push(
-      b(
+      C(
         "C4",
         "panel-chrome height formula = (row-h*3)+(row-gap*3)-8px",
-        `${u}px (rh=${i} rg=${l})`,
-        `${d}px`,
+        `${d}px (rh=${s} rg=${c})`,
+        `${m}px`,
         h
       )
     );
   }
-  if (!o || !s)
+  if (!l || !r)
     e.push(
-      b(
+      C(
         "C5",
         'coordinator perspective + origin "center bottom"; chrome perspective-style flat',
         "present",
-        `coordinator=${o ? "present" : "absent"} chrome=${s ? "present" : "absent"}`,
+        `coordinator=${l ? "present" : "absent"} chrome=${r ? "present" : "absent"}`,
         !1
       )
     );
   else {
-    const r = getComputedStyle(o), i = getComputedStyle(s), l = r.perspective || o.style.perspective || "", u = (r.perspectiveOrigin || o.style.perspectiveOrigin || "").trim(), d = i.perspectiveStyle || s.style.perspectiveStyle || "", _ = l !== "" && l !== "none" && (u === "center bottom" || u === "50% 100%") && d === "flat";
+    const o = getComputedStyle(l), s = getComputedStyle(r), c = o.perspective || l.style.perspective || "", d = (o.perspectiveOrigin || l.style.perspectiveOrigin || "").trim(), m = s.perspectiveStyle || r.style.perspectiveStyle || "", v = c !== "" && c !== "none" && (d === "center bottom" || d === "50% 100%") && m === "flat";
     e.push(
-      b(
+      C(
         "C5",
         'coordinator perspective + origin "center bottom"; chrome perspective-style flat',
         "perspective:not-none, origin:center bottom, chrome-style:flat",
-        `perspective=${l} origin=${u} chrome-style=${d}`,
-        _
+        `perspective=${c} origin=${d} chrome-style=${m}`,
+        v
       )
     );
   }
   {
-    let r = !1, i = "absent";
+    let o = !1, s = "absent";
     try {
-      for (const l of Array.from(document.styleSheets)) {
-        let u = [];
+      for (const c of Array.from(document.styleSheets)) {
+        let d = [];
         try {
-          u = Array.from(l.cssRules ?? []);
+          d = Array.from(c.cssRules ?? []);
         } catch {
           continue;
         }
-        for (const d of u)
-          if (d.name === "stage-spin") {
-            const g = Array.from(d.cssRules), m = g.find((C) => C.keyText === "0%" || C.keyText === "from"), _ = g.find((C) => C.keyText === "100%" || C.keyText === "to"), v = m?.style.transform ?? "", N = _?.style.transform ?? "", w = /rotateY\(\s*0(?:deg)?\s*\)/;
-            r = w.test(v) && w.test(N), i = `0%=${v || "n/a"} 100%=${N || "n/a"}`;
+        for (const m of d)
+          if (m.name === "stage-spin") {
+            const y = Array.from(m.cssRules), p = y.find((_) => _.keyText === "0%" || _.keyText === "from"), v = y.find((_) => _.keyText === "100%" || _.keyText === "to"), T = p?.style.transform ?? "", S = v?.style.transform ?? "", b = /rotateY\(\s*0(?:deg)?\s*\)/;
+            o = b.test(T) && b.test(S), s = `0%=${T || "n/a"} 100%=${S || "n/a"}`;
             break;
           }
-        if (i !== "absent") break;
+        if (s !== "absent") break;
       }
     } catch {
-      i = "inspection-error";
+      s = "inspection-error";
     }
     e.push(
-      b(
+      C(
         "C6",
         "@keyframes stage-spin 0% AND 100% anchor at rotateY(0)",
         "both frames rotateY(0)",
-        i,
-        r
+        s,
+        o
       )
     );
   }
   {
-    const r = document.documentElement, i = getComputedStyle(r), l = i.getPropertyValue("--panel-open-dur").trim() || r.style.getPropertyValue("--panel-open-dur").trim(), u = i.getPropertyValue("--panel-close-dur").trim() || r.style.getPropertyValue("--panel-close-dur").trim(), d = M(l) || parseFloat(l) * (l.endsWith("s") && !l.endsWith("ms") ? 1e3 : 1), h = M(u) || parseFloat(u) * (u.endsWith("s") && !u.endsWith("ms") ? 1e3 : 1), g = Number.isFinite(d) && Number.isFinite(h) && d > 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 = I(c) || parseFloat(c) * (c.endsWith("s") && !c.endsWith("ms") ? 1e3 : 1), h = I(d) || parseFloat(d) * (d.endsWith("s") && !d.endsWith("ms") ? 1e3 : 1), y = Number.isFinite(m) && Number.isFinite(h) && m > h;
     e.push(
-      b("C7", "--panel-open-dur > --panel-close-dur", "open > close", `open=${l || "n/a"} close=${u || "n/a"}`, g)
+      C("C7", "--panel-open-dur > --panel-close-dur", "open > close", `open=${c || "n/a"} close=${d || "n/a"}`, y)
     );
   }
   if (!n)
-    e.push(b("C8", "BellCutout zero computed animation/transition", "no inline timing", "absent", !1));
+    e.push(C("C8", "BellCutout zero computed animation/transition", "no inline timing", "absent", !1));
   else {
-    const r = getComputedStyle(n), i = r.animationName || "", l = r.transitionProperty || "", u = (i === "" || i === "none") && (l === "" || l === "none" || l === "all");
+    const o = getComputedStyle(n), s = o.animationName || "", c = o.transitionProperty || "", d = (s === "" || s === "none") && (c === "" || c === "none" || c === "all");
     e.push(
-      b(
+      C(
         "C8",
         "BellCutout zero computed animation/transition",
         "animation:none AND transition:none",
-        `animation=${i || "n/a"} transition=${l || "n/a"}`,
-        u
+        `animation=${s || "n/a"} transition=${c || "n/a"}`,
+        d
       )
     );
   }
   if (!t)
-    e.push(b("C9", "mount closed-state clipPath", W, "absent", !1));
+    e.push(C("C9", "mount closed-state clipPath", te, "absent", !1));
   else {
-    const r = t.style.clipPath, i = getComputedStyle(t), l = r || i.clipPath || "", u = l === W;
-    e.push(b("C9", "mount closed-state clipPath", W, l || "n/a", u));
+    const o = t.style.clipPath, s = getComputedStyle(t), c = o || s.clipPath || "", d = c === te;
+    e.push(C("C9", "mount closed-state clipPath", te, c || "n/a", d));
   }
-  if (!c)
-    e.push(b("C10", "bell-popover parentElement === document.body (open)", "body", "absent", !1));
+  if (!i)
+    e.push(C("C10", "bell-popover parentElement === document.body (open)", "body", "absent", !1));
   else {
-    const r = c.parentElement, i = r === document.body;
+    const o = i.parentElement, s = o === document.body;
     e.push(
-      b(
+      C(
         "C10",
         "bell-popover parentElement === document.body (open)",
         "body",
-        r === document.body ? "body" : r?.tagName ?? "n/a",
-        i
+        o === document.body ? "body" : o?.tagName ?? "n/a",
+        s
       )
     );
   }
-  if (!o)
-    e.push(b("C11", "coordinator overflow === visible", "visible", "absent", !1));
+  if (!l)
+    e.push(C("C11", "coordinator overflow === visible", "visible", "absent", !1));
   else {
-    const i = getComputedStyle(o).overflow || o.style.overflow || "", l = i === "visible";
-    e.push(b("C11", "coordinator overflow === visible", "visible", i || "n/a", l));
+    const s = getComputedStyle(l).overflow || l.style.overflow || "", c = s === "visible";
+    e.push(C("C11", "coordinator overflow === visible", "visible", s || "n/a", c));
   }
-  if (!p)
-    e.push(b("C12", "toolbar clipPath = inset(0 -40 -40 -40)", j, "absent", !1));
+  if (!u)
+    e.push(C("C12", "toolbar clipPath = inset(0 -40 -40 -40)", ne, "absent", !1));
   else {
-    const r = p.style.clipPath, i = getComputedStyle(p), l = r || i.clipPath || "", u = l === j;
-    e.push(b("C12", "toolbar clipPath = inset(0 -40 -40 -40)", j, l || "n/a", u));
+    const o = u.style.clipPath, s = getComputedStyle(u), c = o || s.clipPath || "", d = c === ne;
+    e.push(C("C12", "toolbar clipPath = inset(0 -40 -40 -40)", ne, c || "n/a", d));
   }
   return e.push(
-    b(
+    C(
       "C13",
       "same-position slide via WAAPI (mid-transition getAnimations().length > 0)",
       "WAAPI driver wired in orchestrator (source-proof)",
@@ -1581,7 +1700,7 @@ function ne() {
       "wiring_only"
     )
   ), e.push(
-    b(
+    C(
       "C14",
       'cross-position handoff transitionend filtered by propertyName="max-height"',
       "transitionend filter wired in orchestrator (source-proof)",
@@ -1590,11 +1709,11 @@ function ne() {
     )
   ), e;
 }
-function ut(e) {
-  return ne().find((t) => t.id === e);
+function Pt(e) {
+  return le().find((t) => t.id === e);
 }
-function pt() {
-  const e = X();
+function wt() {
+  const e = se();
   return { q12: [
     {
       id: "Q12-12",
@@ -1603,84 +1722,83 @@ function pt() {
       actual: `valid=${e.valid} mount=${e.mount} chrome=${e.chrome} frozen=${e.frozen} orphans=[${e.orphans.join(",")}]`,
       pass: e.valid
     }
-  ], cc: ne() };
+  ], cc: le() };
 }
-function mt() {
+function At() {
   return {
-    enable: ht,
-    disable: ft,
+    enable: xt,
+    disable: kt,
     isEnabled: () => V,
-    getLastReport: () => q,
+    getLastReport: () => X,
     recordTransition: (e) => {
-      V && (q = { ...e, ...X() });
+      V && (X = { ...e, ...se() });
     },
     assertOnce: () => {
-      const e = X();
-      return q = e, e;
+      const e = se();
+      return X = e, e;
     },
-    assertCcOnly: ne,
-    getCcRowById: ut,
-    assertPanelTruths: pt
+    assertCcOnly: le,
+    getCcRowById: Pt,
+    assertPanelTruths: wt
   };
 }
-function ht() {
+function xt() {
   if (V = !0, typeof window > "u") return;
-  window.__panelsAsserter || (window.__panelsAsserter = mt(), console.info(
+  window.__panelsAsserter || (window.__panelsAsserter = At(), console.info(
     "[panels] asserter enabled (P3b Q12-12 + P6 W5 cc:C1..C14). Inspect via window.__panelsAsserter."
   ));
 }
-function ft() {
+function kt() {
   V = !1;
 }
 export {
-  Rt as COMMITS,
-  xt as CatalogAddShell,
-  Tt as CatalogFooter,
-  Et as CatalogReplaceShell,
-  ee as CatalogStateContext,
-  fe as CloneCard,
-  Ot as CloneStage,
-  ye as MOCK_DEFAULT_LENS,
-  ge as MOCK_LENSES,
-  be as MOCK_LENS_META,
-  Xe as MOCK_PAGES,
-  ve as MOCK_TILES_BY_LENS,
-  Ge as MetricInfoShell,
-  Ft as NotificationCenterShell,
-  Dt as PANEL_IDS,
-  Ze as PageMgmtFooter,
-  At as PageMgmtShell,
-  _e as PageMgmtStateContext,
-  zt as PanelBody,
-  z as PanelChromeV2,
-  Ht as PanelFooter,
-  Pt as PanelFooterMessage,
-  Bt as PanelHeader,
-  Yt as PanelHost,
-  kt as PanelHostShell,
-  Ee as PanelMount,
-  Vt as PanelNavigation,
-  Ut as PanelProvider,
-  Lt as PanelSlot,
-  Kt as PanelStage,
-  wt as SettingsShell,
-  ne as assertCcOnly,
-  X as assertPanelDomShape,
-  pt as assertPanelTruths,
-  qt as deriveSurfaceState,
-  ft as disablePanelAsserter,
-  ht as enablePanelAsserter,
-  ut as getCcRowById,
-  Gt as initialState,
-  de as positionKey,
-  Qt as reducer,
-  ct as transitionToPanel,
-  te as useCatalogState,
-  St as useEditingCardId,
-  Ne as usePageMgmtState,
-  xe as usePanelContext,
-  D as usePanelContextOptional,
-  Wt as usePanelCoordinator,
-  J as useReducedMotionPanel,
-  Mt as useTransitionToPanel
+  en as COMMITS,
+  Kt as CatalogAddShell,
+  Vt as CatalogFooter,
+  qt as CatalogReplaceShell,
+  re as CatalogStateContext,
+  je as CloneCard,
+  et as CloneStage,
+  Ce as MOCK_DEFAULT_LENS,
+  _e as MOCK_LENSES,
+  Ne as MOCK_LENS_META,
+  mt as MOCK_PAGES,
+  Se as MOCK_TILES_BY_LENS,
+  tn as NotificationCenterShell,
+  Wt as PANEL_IDS,
+  pt as PageMgmtFooter,
+  Qt as PageMgmtShell,
+  Te as PageMgmtStateContext,
+  nn as PanelBody,
+  K as PanelChromeV2,
+  an as PanelFooter,
+  Bt as PanelFooterMessage,
+  sn as PanelHeader,
+  rn as PanelHost,
+  Gt as PanelHostShell,
+  Oe as PanelMount,
+  on as PanelNavigation,
+  ln as PanelProvider,
+  jt as PanelSlot,
+  cn as PanelStage,
+  Yt as SettingsShell,
+  le as assertCcOnly,
+  se as assertPanelDomShape,
+  wt as assertPanelTruths,
+  dn as deriveSurfaceState,
+  kt as disablePanelAsserter,
+  xt as enablePanelAsserter,
+  Pt as getCcRowById,
+  un as initialState,
+  fe as positionKey,
+  pn as reducer,
+  Et as transitionToPanel,
+  oe as useCatalogState,
+  Ht as useEditingCardId,
+  Pe as usePageMgmtState,
+  Me as usePanelContext,
+  O as usePanelContextOptional,
+  mn as usePanelCoordinator,
+  be as useReducedMotionPanel,
+  Zt as useTransitionToPanel
 };