@mt-gloss/ui 0.1.106 → 0.1.107

package/composites-panels.js

@@ -1,24 +1,27 @@
-import { u as I, f as q, S as se, a as oe, g as E, c as A } from "./COMMITS-kaUvc5jL.js";
-import { C as Je, b as Ze, P as et, e as tt, i as nt, r as st, d as ot } from "./COMMITS-kaUvc5jL.js";
-import { jsx as s, jsxs as p, Fragment as ae } from "react/jsx-runtime";
-import z, { useState as b, useRef as U, createContext as Y, useContext as K, useEffect as V, useLayoutEffect as re, useCallback as W } from "react";
-function Be() {
-  const e = I();
+import { u as k, f as Q, S as he, a as fe, g as A, c as T } from "./COMMITS-DG0Q_9DU.js";
+import { C as Et, b as xt, P as At, e as Tt, i as Lt, r as Ot, d as kt } from "./COMMITS-DG0Q_9DU.js";
+import { jsx as s, jsxs as h, Fragment as X } from "react/jsx-runtime";
+import K, { useState as _, useRef as I, createContext as J, useContext as Z, useMemo as W, useEffect as x, useCallback as E, useLayoutEffect as ge } from "react";
+import { useSensors as be, useSensor as q, PointerSensor as ve, KeyboardSensor as ye, DndContext as Se, closestCenter as _e } from "@dnd-kit/core";
+import { sortableKeyboardCoordinates as Ne, SortableContext as Ce, horizontalListSortingStrategy as we, arrayMove as Pe, useSortable as Ee } from "@dnd-kit/sortable";
+import { CSS as xe } from "@dnd-kit/utilities";
+function ft() {
+  const e = k();
   if (e?.state.activePanelId !== "settings") return null;
   const t = e.state.activeTrigger;
   return t?.kind === "card-overflow" ? t.cardId : null;
 }
-function le({ children: e }) {
+function Ae({ children: e }) {
   return /* @__PURE__ */ s("div", { className: "clone-stage", children: e });
 }
-function ie({ span: e, rotating: t = !0, children: o }) {
+function Te({ span: e, rotating: t = !0, children: r }) {
   const n = ["clone-card", `span-${e}`, t ? "rotating" : ""].filter(Boolean).join(" ");
-  return /* @__PURE__ */ s("div", { className: n, children: o });
+  return /* @__PURE__ */ s("div", { className: n, children: r });
 }
-function ce({ value: e, onChange: t }) {
-  return /* @__PURE__ */ p("div", { className: "settings-shell__field settings-shell__field--threshold", children: [
+function Le({ value: e, onChange: t }) {
+  return /* @__PURE__ */ h("div", { className: "settings-shell__field settings-shell__field--threshold", children: [
     /* @__PURE__ */ s("span", { className: "settings-shell__label", "aria-hidden": "true", children: "Alert level (%)" }),
-    /* @__PURE__ */ p("div", { className: "settings-shell__slider-row", children: [
+    /* @__PURE__ */ h("div", { className: "settings-shell__slider-row", children: [
       /* @__PURE__ */ s(
         "input",
         {
@@ -35,17 +38,17 @@ function ce({ value: e, onChange: t }) {
           className: "settings-shell__slider"
         }
       ),
-      /* @__PURE__ */ p("span", { className: "settings-shell__slider-value", "aria-live": "polite", children: [
+      /* @__PURE__ */ h("span", { className: "settings-shell__slider-value", "aria-live": "polite", children: [
         e,
         "%"
       ] })
     ] })
   ] });
 }
-function de({ value: e, onChange: t }) {
-  return /* @__PURE__ */ p("div", { className: "settings-shell__field settings-shell__field--timeframe", children: [
+function Oe({ value: e, onChange: t }) {
+  return /* @__PURE__ */ h("div", { className: "settings-shell__field settings-shell__field--timeframe", children: [
     /* @__PURE__ */ s("span", { className: "settings-shell__label", "aria-hidden": "true", children: "Rolling period (days)" }),
-    /* @__PURE__ */ p("div", { className: "settings-shell__slider-row", children: [
+    /* @__PURE__ */ h("div", { className: "settings-shell__slider-row", children: [
       /* @__PURE__ */ s(
         "input",
         {
@@ -62,100 +65,423 @@ function de({ value: e, onChange: t }) {
           className: "settings-shell__slider"
         }
       ),
-      /* @__PURE__ */ p("span", { className: "settings-shell__slider-value", "aria-live": "polite", children: [
+      /* @__PURE__ */ h("span", { className: "settings-shell__slider-value", "aria-live": "polite", children: [
         e,
         " days"
       ] })
     ] })
   ] });
 }
-const ue = ["Orders", "Quota", "Unassigned"];
-function pe() {
-  return /* @__PURE__ */ p("div", { className: "settings-shell__field settings-shell__field--slots", "aria-label": "Stack slots (display only)", children: [
-    /* @__PURE__ */ s("p", { className: "settings-shell__help", children: "Slots are currently fixed. Drag-to-reorder is coming in a later phase." }),
-    /* @__PURE__ */ s("ul", { className: "settings-shell__slots-list", children: ue.map((e) => /* @__PURE__ */ s("li", { className: "settings-shell__slot-pill", children: e }, e)) })
+function ke({ id: e, onRemove: t }) {
+  const { attributes: r, listeners: n, setNodeRef: c, transform: i, transition: d, isDragging: l } = Ee({ id: e }), a = {
+    transform: xe.Transform.toString(i),
+    transition: d,
+    opacity: l ? 0.6 : 1
+  };
+  return /* @__PURE__ */ h(
+    "li",
+    {
+      ref: c,
+      style: a,
+      className: `settings-shell__slot-pill${l ? " settings-shell__slot-pill--dragging" : ""}`,
+      children: [
+        /* @__PURE__ */ s(
+          "button",
+          {
+            type: "button",
+            className: "settings-shell__slot-pill__handle",
+            "aria-label": `Reorder ${e}`,
+            ...r,
+            ...n,
+            children: /* @__PURE__ */ s("span", { "aria-hidden": "true", className: "settings-shell__slot-pill__grip", children: "⋮⋮" })
+          }
+        ),
+        /* @__PURE__ */ s("span", { className: "settings-shell__slot-pill__label", children: e }),
+        /* @__PURE__ */ s(
+          "button",
+          {
+            type: "button",
+            className: "settings-shell__slot-pill__remove",
+            "aria-label": `Remove ${e}`,
+            onClick: t,
+            children: "×"
+          }
+        )
+      ]
+    }
+  );
+}
+function Ie({ value: e, onChange: t }) {
+  const r = be(
+    q(ve, { activationConstraint: { distance: 4 } }),
+    q(ye, { coordinateGetter: Ne })
+  ), n = (i) => {
+    const { active: d, over: l } = i;
+    if (!l || d.id === l.id) return;
+    const a = e.findIndex((u) => u === d.id), o = e.findIndex((u) => u === l.id);
+    a === -1 || o === -1 || t(Pe([...e], a, o));
+  }, c = (i) => {
+    t(e.filter((d) => d !== i));
+  };
+  return /* @__PURE__ */ h("div", { className: "settings-shell__field settings-shell__field--slots", "aria-label": "Stack slots", children: [
+    /* @__PURE__ */ s("span", { className: "settings-shell__label", children: "Stack slots" }),
+    /* @__PURE__ */ s(Se, { sensors: r, collisionDetection: _e, onDragEnd: n, children: /* @__PURE__ */ s(Ce, { items: [...e], strategy: we, children: /* @__PURE__ */ s("ul", { className: "settings-shell__slots-list", role: "list", children: e.map((i) => /* @__PURE__ */ s(ke, { id: i, onRemove: () => c(i) }, i)) }) }) }),
+    e.length === 0 && /* @__PURE__ */ s("p", { className: "settings-shell__help", children: "All slots removed. Apply to commit, or Reset to restore." }),
+    /* @__PURE__ */ s("p", { className: "settings-shell__help settings-shell__help--small", children: "Drag to reorder · click × to remove" })
   ] });
 }
-const me = ["#1d6fd8", "#10b981", "#f59e0b", "#ef4444", "#8b5cf6"];
-function he({ value: e, onSelect: t }) {
-  return /* @__PURE__ */ p("div", { className: "settings-shell__field settings-shell__field--color", role: "group", "aria-label": "Accent color", children: [
+const De = ["#1d6fd8", "#10b981", "#f59e0b", "#ef4444", "#8b5cf6"];
+function Me({ value: e, onSelect: t }) {
+  return /* @__PURE__ */ h("div", { className: "settings-shell__field settings-shell__field--color", role: "group", "aria-label": "Accent color", children: [
     /* @__PURE__ */ s("span", { className: "settings-shell__label", children: "Accent color" }),
-    /* @__PURE__ */ s("div", { className: "settings-shell__swatch-row", children: me.map((o) => {
-      const n = e === o;
+    /* @__PURE__ */ s("div", { className: "settings-shell__swatch-row", children: De.map((r) => {
+      const n = e === r;
       return /* @__PURE__ */ s(
         "button",
         {
           type: "button",
           "aria-pressed": n,
-          "aria-label": `Accent ${o}`,
+          "aria-label": `Accent ${r}`,
           className: `settings-shell__swatch${n ? " settings-shell__swatch--active" : ""}`,
-          style: { backgroundColor: o },
-          onClick: () => t(o)
+          style: { backgroundColor: r },
+          onClick: () => t(r)
         },
-        o
+        r
       );
     }) })
   ] });
 }
-const fe = ["threshold", "timeframe", "color"];
-function He({
+const Re = ["Orders", "Quota", "Unassigned"], $e = ["threshold", "timeframe", "color"];
+function gt({
   isOpen: e,
   cardSpan: t,
-  cardLabel: o = "Metric",
+  cardLabel: r = "Metric",
   cardValue: n = "—",
-  dimensions: r = fe,
-  initialTab: l
+  previewSlot: c,
+  dimensions: i = $e,
+  initialTab: d,
+  initialValues: l
 }) {
-  const d = I(), i = d?.state.activeTrigger, a = i?.kind === "card-overflow" ? i.cardId : null, c = q(), u = i?.span, h = t ?? u ?? 1, g = r[0] ?? "threshold", [f, y] = z.useState(l ?? g);
-  z.useEffect(() => {
-    r.includes(f) || y(g);
-  }, [r, f, g]);
-  const v = a != null ? d?.state?.bufferByCard?.[a]?.changes ?? {} : {}, N = typeof v.threshold == "number" ? v.threshold : 80, S = typeof v.timeframe == "number" ? v.timeframe : 30, w = typeof v.accent == "string" ? v.accent : null, C = (_) => {
-    a == null || d == null || d.dispatch({ type: "SET_BUFFER_VALUE", cardId: a, key: "threshold", value: Number(_.target.value) });
-  }, te = (_) => {
-    a == null || d == null || d.dispatch({ type: "SET_BUFFER_VALUE", cardId: a, key: "timeframe", value: Number(_.target.value) });
-  }, ne = (_) => {
-    a == null || d == null || d.dispatch({ type: "SET_BUFFER_VALUE", cardId: a, key: "accent", value: _ });
+  const a = k(), o = a?.state.activeTrigger, u = o?.kind === "card-overflow" ? o.cardId : null, p = Q(), m = o?.span, b = t ?? m ?? 1, y = i[0] ?? "threshold", [v, N] = K.useState(d ?? y);
+  K.useEffect(() => {
+    i.includes(v) || N(y);
+  }, [i, v, y]);
+  const g = u != null ? a?.state?.bufferByCard?.[u]?.changes ?? {} : {}, S = typeof g.threshold == "number" ? g.threshold : typeof l?.threshold == "number" ? l.threshold : 80, oe = typeof g.timeframe == "number" ? g.timeframe : typeof l?.timeframe == "number" ? l.timeframe : 30, ie = typeof g.accent == "string" ? g.accent : typeof l?.accent == "string" ? l.accent : null, ce = Array.isArray(g.slots) ? g.slots : Array.isArray(l?.slots) ? l.slots : Re, de = (w) => {
+    u == null || a == null || a.dispatch({ type: "SET_BUFFER_VALUE", cardId: u, key: "threshold", value: Number(w.target.value) });
+  }, ue = (w) => {
+    u == null || a == null || a.dispatch({ type: "SET_BUFFER_VALUE", cardId: u, key: "timeframe", value: Number(w.target.value) });
+  }, pe = (w) => {
+    u == null || a == null || a.dispatch({ type: "SET_BUFFER_VALUE", cardId: u, key: "accent", value: w });
+  }, me = (w) => {
+    u == null || a == null || a.dispatch({ type: "SET_BUFFER_VALUE", cardId: u, key: "slots", value: w });
   };
-  return /* @__PURE__ */ p("div", { className: "settings-shell", "data-shell": "settings", "aria-hidden": !e, children: [
-    /* @__PURE__ */ s("div", { "aria-hidden": "true", children: /* @__PURE__ */ s(le, { children: /* @__PURE__ */ p(ie, { span: h, rotating: !c, children: [
-      /* @__PURE__ */ s("div", { style: { fontSize: 9, textTransform: "uppercase", letterSpacing: "0.06em", color: "#9ca3af", marginBottom: 6 }, children: o }),
+  return /* @__PURE__ */ h("div", { className: "settings-shell", "data-shell": "settings", "aria-hidden": !e, children: [
+    /* @__PURE__ */ s("div", { "aria-hidden": "true", children: /* @__PURE__ */ s(Ae, { children: /* @__PURE__ */ s(Te, { span: b, rotating: !p, children: c ?? /* @__PURE__ */ h(X, { children: [
+      /* @__PURE__ */ s("div", { style: { fontSize: 9, textTransform: "uppercase", letterSpacing: "0.06em", color: "#9ca3af", marginBottom: 6 }, children: r }),
       /* @__PURE__ */ s("div", { style: { fontSize: 22, fontWeight: 700, color: "#111827", lineHeight: 1 }, children: n })
-    ] }) }) }),
+    ] }) }) }) }),
     /* @__PURE__ */ s(
-      se,
+      he,
       {
-        dimensions: r,
-        activeTab: f,
-        onSelect: y,
-        reduced: c
+        dimensions: i,
+        activeTab: v,
+        onSelect: N,
+        reduced: p
       }
     ),
-    /* @__PURE__ */ p(
+    /* @__PURE__ */ h(
       "div",
       {
         role: "tabpanel",
-        id: `settings-tabpanel-${f}`,
+        id: `settings-tabpanel-${v}`,
         "aria-label": "Settings dimension controls",
         tabIndex: 0,
         className: "settings-shell__tabpanel",
         children: [
-          f === "threshold" && /* @__PURE__ */ s(ce, { value: N, onChange: C }),
-          f === "timeframe" && /* @__PURE__ */ s(de, { value: S, onChange: te }),
-          f === "slots" && /* @__PURE__ */ s(pe, {}),
-          f === "color" && /* @__PURE__ */ s(he, { value: w, onSelect: ne })
+          v === "threshold" && /* @__PURE__ */ s(Le, { value: S, onChange: de }),
+          v === "timeframe" && /* @__PURE__ */ s(Oe, { value: oe, onChange: ue }),
+          v === "slots" && /* @__PURE__ */ s(Ie, { value: ce, onChange: me }),
+          v === "color" && /* @__PURE__ */ s(Me, { value: ie, onSelect: pe })
         ]
       }
     )
   ] });
 }
-function j({ lenses: e, activeLens: t, onLensChange: o }) {
-  const [n, r] = b(!1), l = U(null), d = () => {
-    l.current != null && (window.clearTimeout(l.current), l.current = null);
-  }, i = () => {
-    d(), l.current = window.setTimeout(() => r(!1), 100);
-  }, a = e.filter((c) => c !== t);
-  return /* @__PURE__ */ s("div", { className: "cat-segmented-wrap", children: /* @__PURE__ */ p("div", { className: "cat-segmented", children: [
+const ee = [
+  "Overbought",
+  "What's selling",
+  "On track vs plan",
+  "Orders on time",
+  "Vendor performance",
+  "Assortment mix",
+  "Customer retention"
+], te = "Overbought", U = {
+  Overbought: {
+    headline: "Am I overbought?",
+    helper: "Find slow-moving inventory before discount cycles eat margin."
+  },
+  "What's selling": {
+    headline: "What's selling right now?",
+    helper: "Velocity leaders and sleepers across your assortment."
+  },
+  "On track vs plan": {
+    headline: "Am I on track vs plan?",
+    helper: "Pace-to-plan signals across revenue, units, and margin."
+  },
+  "Orders on time": {
+    headline: "Are orders going out on time?",
+    helper: "Fulfillment SLA performance and at-risk shipments."
+  },
+  "Vendor performance": {
+    headline: "Who are my best and worst vendors?",
+    helper: "Sell-through, lead time, and fill-rate across the vendor mix."
+  },
+  "Assortment mix": {
+    headline: "Is my assortment balanced?",
+    helper: "Brand and category mix concentration vs target ranges."
+  },
+  "Customer retention": {
+    headline: "Are my best customers coming back?",
+    helper: "Repeat-rate and lapsed-account signals from the buyer file."
+  }
+};
+U["Customer retention"].beta = !0;
+const ne = {
+  Overbought: {
+    primary: [
+      {
+        id: "ob-units-at-risk",
+        label: "Units at risk",
+        value: "12,840",
+        desc: "Inventory units flagged as overbought relative to forward demand.",
+        variants: ["1×1"],
+        startHere: !0,
+        isNew: !0
+      },
+      {
+        id: "ob-weeks-of-supply",
+        label: "Weeks of supply",
+        value: "18.4",
+        desc: "Weighted average weeks of forward cover across the assortment.",
+        variants: ["1×1"]
+      },
+      {
+        id: "ob-discount-exposure",
+        label: "Discount exposure",
+        value: "$184K",
+        desc: "Estimated markdown dollars to clear excess at current sell-through.",
+        variants: ["1×3"],
+        subStats: [
+          { label: "MTD", value: "$48K" },
+          { label: "QTD", value: "$112K" },
+          { label: "YTD", value: "$184K" }
+        ]
+      }
+    ],
+    secondary: [
+      {
+        id: "ob-sku-coverage",
+        label: "SKUs over plan",
+        value: "342",
+        desc: "SKUs exceeding planned forward cover."
+      },
+      {
+        id: "ob-vendor-share",
+        label: "Top vendor share",
+        value: "38%",
+        desc: "Share of overbought inventory concentrated in the top vendor.",
+        donut: !0,
+        accent: "#7c3aed"
+      }
+    ]
+  },
+  "What's selling": {
+    primary: [
+      {
+        id: "ws-top-sku",
+        label: "Top SKU",
+        value: "SKU-9241",
+        desc: "Highest-velocity SKU over the trailing 7 days.",
+        startHere: !0
+      },
+      {
+        id: "ws-velocity",
+        label: "Velocity Δ",
+        value: "+12.4%",
+        desc: "Rolling 7-day velocity change versus the prior comparable period.",
+        variants: ["1×1"]
+      },
+      {
+        id: "ws-sellthrough",
+        label: "Sell-through",
+        value: "see breakdown",
+        variants: ["1×5"],
+        subStats: [
+          { label: "MTD", value: "64%" },
+          { label: "QTD", value: "71%" },
+          { label: "YTD", value: "68%" },
+          { label: "LYTD", value: "62%" },
+          { label: "7D", value: "74%" }
+        ],
+        desc: "Sell-through across multiple windows."
+      }
+    ],
+    secondary: [
+      {
+        id: "ws-new-arrivals",
+        label: "New arrival lift",
+        value: "+8.1%",
+        desc: "Velocity boost from new-arrival SKUs versus the assortment mean.",
+        isNew: !0
+      }
+    ]
+  },
+  "On track vs plan": {
+    primary: [
+      {
+        id: "pl-revenue-pace",
+        label: "Revenue pace",
+        value: "102%",
+        desc: "Revenue pace versus plan, period-to-date.",
+        donut: !0,
+        accent: "#16a34a",
+        startHere: !0
+      },
+      {
+        id: "pl-units-pace",
+        label: "Units pace",
+        value: "94%",
+        desc: "Units pace versus plan, period-to-date.",
+        donut: !0,
+        accent: "#f59e0b"
+      },
+      {
+        id: "pl-margin-pace",
+        label: "Margin pace",
+        value: "see breakdown",
+        variants: ["1×3"],
+        subStats: [
+          { label: "MTD", value: "38.4%" },
+          { label: "QTD", value: "37.9%" },
+          { label: "YTD", value: "38.1%" }
+        ],
+        desc: "Gross margin pace across multiple windows."
+      }
+    ]
+  },
+  "Orders on time": {
+    primary: [
+      {
+        id: "ot-on-time-rate",
+        label: "On-time rate",
+        value: "94.2%",
+        desc: "Share of orders shipped within SLA.",
+        startHere: !0
+      },
+      {
+        id: "ot-at-risk",
+        label: "At-risk shipments",
+        value: "18",
+        desc: "Open shipments projected to miss SLA.",
+        isNew: !0
+      }
+    ]
+  },
+  "Vendor performance": {
+    primary: [
+      {
+        id: "vp-top-vendor",
+        label: "Top vendor",
+        value: "Acme Co.",
+        desc: "Highest sell-through vendor over the trailing 30 days.",
+        startHere: !0
+      },
+      {
+        id: "vp-fill-rate",
+        label: "Fill rate",
+        value: "97.1%",
+        desc: "Vendor fill rate against placed orders.",
+        donut: !0,
+        accent: "#2563eb"
+      }
+    ]
+  },
+  "Assortment mix": {
+    primary: [
+      {
+        id: "am-brand-mix",
+        label: "Brand mix",
+        value: "see breakdown",
+        variants: ["1×3"],
+        subStats: [
+          { label: "Core", value: "58%" },
+          { label: "Growth", value: "27%" },
+          { label: "Test", value: "15%" }
+        ],
+        desc: "Assortment mix across brand tiers.",
+        startHere: !0
+      }
+    ]
+  },
+  "Customer retention": {
+    primary: [
+      {
+        id: "cr-repeat-rate",
+        label: "Repeat rate",
+        value: "62.4%",
+        desc: "Share of buyers placing two or more orders in the period.",
+        startHere: !0,
+        isNew: !0
+      },
+      {
+        id: "cr-lapsed",
+        label: "Lapsed accounts",
+        value: "47",
+        desc: "Accounts with zero orders in the last 90 days."
+      }
+    ]
+  }
+};
+function se({
+  lenses: e,
+  activeLens: t,
+  onLensChange: r,
+  variant: n = "pills",
+  lensMeta: c = U
+}) {
+  return n === "pills" ? /* @__PURE__ */ s("div", { className: "cat-pills-wrap", children: /* @__PURE__ */ s("div", { className: "cat-pills", role: "tablist", "aria-label": "Metric lenses", children: e.map((i) => {
+    const d = i === t, l = c[i], a = ["cat-pill"];
+    return d && a.push("active"), /* @__PURE__ */ h(
+      "button",
+      {
+        type: "button",
+        role: "tab",
+        "aria-selected": d,
+        className: a.join(" "),
+        "data-lens": i,
+        onClick: () => {
+          d || r(i);
+        },
+        children: [
+          i,
+          l?.beta && /* @__PURE__ */ s("span", { className: "cat-pill-beta", "aria-label": "Beta", children: "BETA" })
+        ]
+      },
+      i
+    );
+  }) }) }) : /* @__PURE__ */ s(Fe, { lenses: e, activeLens: t, onLensChange: r });
+}
+function Fe({
+  lenses: e,
+  activeLens: t,
+  onLensChange: r
+}) {
+  const [n, c] = _(!1), i = I(null), d = () => {
+    i.current != null && (window.clearTimeout(i.current), i.current = null);
+  }, l = () => {
+    d(), i.current = window.setTimeout(() => c(!1), 100);
+  }, a = e.filter((o) => o !== t);
+  return /* @__PURE__ */ s("div", { className: "cat-segmented-wrap", children: /* @__PURE__ */ h("div", { className: "cat-segmented", children: [
     /* @__PURE__ */ s(
       "button",
       {
@@ -166,14 +492,14 @@ function j({ lenses: e, activeLens: t, onLensChange: o }) {
         children: t
       }
     ),
-    /* @__PURE__ */ p(
+    /* @__PURE__ */ h(
       "div",
       {
         className: "cat-seg-more",
         onMouseEnter: () => {
-          d(), r(!0);
+          d(), c(!0);
         },
-        onMouseLeave: i,
+        onMouseLeave: l,
         children: [
           /* @__PURE__ */ s("button", { type: "button", className: "cat-seg cat-seg-more-btn", "aria-haspopup": "menu", "aria-expanded": n, children: "More ▾" }),
           n && /* @__PURE__ */ s(
@@ -182,19 +508,19 @@ function j({ lenses: e, activeLens: t, onLensChange: o }) {
               className: "cat-seg-overflow",
               role: "menu",
               onMouseEnter: d,
-              onMouseLeave: i,
-              children: a.map((c) => /* @__PURE__ */ s(
+              onMouseLeave: l,
+              children: a.map((o) => /* @__PURE__ */ s(
                 "button",
                 {
                   type: "button",
-                  "data-lens": c,
+                  "data-lens": o,
                   role: "menuitem",
                   onClick: () => {
-                    o(c), r(!1);
+                    r(o), c(!1);
                   },
-                  children: c
+                  children: o
                 },
-                c
+                o
               ))
             }
           )
@@ -203,48 +529,63 @@ function j({ lenses: e, activeLens: t, onLensChange: o }) {
     )
   ] }) });
 }
-function ge(e) {
-  return e.split("·").map((t, o) => {
-    const n = t.trim(), r = n.match(/^([$+\-]?[\d,]+(?:\.\d+)?[%+]?)\s*(.*)$/), l = r ? r[1] : "", d = r ? r[2] : n;
-    return /* @__PURE__ */ p("span", { children: [
-      /* @__PURE__ */ s("strong", { children: l }),
+function He(e) {
+  return e.split("·").map((t, r) => {
+    const n = t.trim(), c = n.match(/^([$+\-]?[\d,]+(?:\.\d+)?[%+]?)\s*(.*)$/), i = c ? c[1] : "", d = c ? c[2] : n;
+    return /* @__PURE__ */ h("span", { children: [
+      /* @__PURE__ */ s("strong", { children: i }),
       /* @__PURE__ */ s("small", { children: d })
-    ] }, o);
+    ] }, r);
   });
 }
-function G({ tiles: e, selectedTileId: t, onSelectTile: o }) {
+function ze(e) {
+  return e.map((t, r) => /* @__PURE__ */ h("span", { children: [
+    /* @__PURE__ */ s("strong", { children: t.value }),
+    /* @__PURE__ */ s("small", { children: t.label })
+  ] }, r));
+}
+function H({ tiles: e, selectedTileId: t, onSelectTile: r }) {
   return /* @__PURE__ */ s("div", { className: "cat-tiles", children: e.map((n) => {
-    const r = n.id === t, l = n.stack === !0, d = ["cat-tile"];
-    return l && d.push("span-2"), r && d.push("selected"), /* @__PURE__ */ p(
+    const c = n.id === t, i = n.subStats != null && n.subStats.length > 0;
+    let d = null;
+    i ? n.subStats.length === 5 ? d = "span-5" : n.subStats.length === 3 ? d = "span-3" : d = "span-2" : n.stack === !0 && (d = "span-2");
+    const l = ["cat-tile"];
+    return d && l.push(d), c && l.push("selected"), n.isNew && l.push("is-new"), n.startHere && l.push("start-here"), n.donut && l.push("has-donut"), /* @__PURE__ */ h(
       "button",
       {
         type: "button",
-        className: d.join(" "),
+        className: l.join(" "),
         "data-metric": n.id,
         "data-desc": n.desc,
-        "aria-pressed": r,
-        onClick: () => o(n.id, n.desc),
+        "data-donut": n.donut ? "true" : void 0,
+        "data-accent": n.accent,
+        "aria-pressed": c,
+        onClick: () => r(n.id, n.desc),
+        style: n.accent ? { "--cat-tile-accent": n.accent } : void 0,
         children: [
+          n.startHere && /* @__PURE__ */ s("span", { className: "cat-tile-start-here", "aria-hidden": "true", children: "START HERE" }),
           /* @__PURE__ */ s("span", { className: "cat-tile-label", children: n.label }),
-          /* @__PURE__ */ s("span", { className: "cat-tile-value", children: l ? ge(n.value) : n.value }),
-          n.variants && n.variants.length > 0 && /* @__PURE__ */ s("span", { className: "cat-tile-variants", "aria-hidden": "true", children: n.variants.map((i) => /* @__PURE__ */ s("span", { children: i }, i)) })
+          /* @__PURE__ */ s("span", { className: "cat-tile-value", children: i ? ze(n.subStats) : n.stack === !0 ? He(n.value) : n.value }),
+          n.variants && n.variants.length > 0 && /* @__PURE__ */ s("span", { className: "cat-tile-variants", "aria-hidden": "true", children: n.variants.map((a) => /* @__PURE__ */ s("span", { children: a }, a)) }),
+          n.isNew && /* @__PURE__ */ s("span", { className: "cat-tile-new-dot", "aria-hidden": "true" }),
+          n.donut && /* @__PURE__ */ s("span", { className: "cat-tile-donut", "aria-hidden": "true" })
         ]
       },
       n.id
     );
   }) });
 }
-const R = Y(null);
-function ve() {
-  return K(R);
+const V = J(null);
+function Ue() {
+  return Z(V);
 }
-function be({ mode: e, dispatch: t }) {
-  const o = ve();
-  if (o == null && e == null) return null;
-  const n = o?.mode ?? e ?? "add", r = o?.selectedTileId ?? null, l = o?.description ?? null, d = r == null;
-  return /* @__PURE__ */ p("div", { className: "panel-footer catalog", children: [
-    /* @__PURE__ */ s("div", { className: "cat-description", id: "cat-desc", children: l ?? /* @__PURE__ */ s("em", { children: "Tap a metric to see its description" }) }),
-    /* @__PURE__ */ p("div", { style: { display: "flex", padding: "10px 14px", gap: 8 }, children: [
+function Ve({ mode: e, dispatch: t }) {
+  const r = Ue();
+  if (r == null && e == null) return null;
+  const n = r?.mode ?? e ?? "add", c = r?.selectedTileId ?? null, i = r?.description ?? null, d = c == null;
+  return /* @__PURE__ */ h("div", { className: "panel-footer catalog", children: [
+    /* @__PURE__ */ s("div", { className: "cat-description", id: "cat-desc", children: i ?? /* @__PURE__ */ s("em", { children: "Tap a metric to see its description" }) }),
+    /* @__PURE__ */ h("div", { style: { display: "flex", padding: "10px 14px", gap: 8 }, children: [
       /* @__PURE__ */ s("div", { className: "spacer", style: { flex: 1 } }),
       /* @__PURE__ */ s(
         "button",
@@ -281,178 +622,150 @@ function be({ mode: e, dispatch: t }) {
     ] })
   ] });
 }
-const Q = [
-  "Revenue",
-  "Order flow",
-  "Rep performance",
-  "Brand portfolio",
-  "Account coverage",
-  "Commission"
-], X = "Order flow", J = {
-  Revenue: [
-    { id: "rev-mtd", label: "Revenue MTD", value: "$184K", desc: "Month-to-date revenue across all manufacturers and territories." },
-    { id: "rev-ytd", label: "Revenue YTD", value: "$2.1M", desc: "Year-to-date revenue including pending and posted orders.", variants: ["1×1", "1×3"] },
-    { id: "rev-yoy", label: "YoY Δ", value: "+12.4%", desc: "Revenue growth versus the prior comparable period." },
-    { id: "rev-avg", label: "Avg order", value: "$1,820", desc: "Average order value over the last 30 days." }
-  ],
-  "Order flow": [
-    {
-      id: "of-funnel",
-      label: "Order funnel",
-      value: "New 42 · Incomplete 18 · Transmitted 91",
-      stack: !0,
-      desc: "Funnel snapshot — new orders, incomplete (awaiting attention), and transmitted to manufacturer.",
-      variants: ["1×3"]
-    },
-    { id: "of-incomplete", label: "Incomplete", value: "18", desc: "Orders started but not yet transmitted." },
-    { id: "of-transmitted", label: "Transmitted", value: "91", desc: "Orders successfully sent to manufacturer." },
-    { id: "of-today", label: "New today", value: "7", desc: "Orders created in the current calendar day." },
-    { id: "of-velocity", label: "Order velocity", value: "+3.1/d", desc: "Rolling 7-day order-creation rate change." }
-  ],
-  "Rep performance": [
-    { id: "rp-leader", label: "#1 Rep", value: "A. Chen", desc: "Top revenue performer in the current period." },
-    { id: "rp-quota", label: "Below quota", value: "4 reps", desc: "Reps currently tracking below pace-to-quota." },
-    { id: "rp-commission", label: "Commission pace", value: "$48K", desc: "Projected commission pool at current burn rate." },
-    { id: "rp-active", label: "Active reps", value: "14", desc: "Reps with at least one order this period." }
-  ],
-  "Brand portfolio": [
-    { id: "bp-top", label: "Top brand", value: "Acme Co.", desc: "Highest-revenue manufacturer this period." },
-    { id: "bp-mix", label: "Mix Δ", value: "+2pp", desc: "Portfolio mix shift versus the prior period." },
-    { id: "bp-coverage", label: "Brand coverage", value: "73%", desc: "Percent of accounts with at least one active brand." },
-    { id: "bp-new", label: "New brand adds", value: "3", desc: "Brands with first-order activity this period." }
-  ],
-  "Account coverage": [
-    { id: "ac-active", label: "Active accounts", value: "128", desc: "Accounts with at least one order in the period." },
-    { id: "ac-untouched", label: "Untouched", value: "34", desc: "Accounts with zero activity in the period." },
-    { id: "ac-concentration", label: "Concentration", value: "38% top-5", desc: "Revenue concentration in top-5 accounts." },
-    { id: "ac-new", label: "New accounts", value: "6", desc: "Accounts with first-ever order this period." }
-  ],
-  Commission: [
-    { id: "cm-projected", label: "Projected", value: "$48K", desc: "Forecast commission at current pace." },
-    { id: "cm-paid", label: "Paid", value: "$31K", desc: "Commission posted to ledger this period." },
-    { id: "cm-pending", label: "Pending", value: "$17K", desc: "Commission earned but not yet posted." },
-    { id: "cm-rate", label: "Effective rate", value: "6.8%", desc: "Realized commission rate across all orders." }
-  ]
-};
-function qe({
+function G(e, t) {
+  if (t.length === 0) return !0;
+  const r = t.toLowerCase();
+  if (e.label.toLowerCase().includes(r) || e.value.toLowerCase().includes(r)) return !0;
+  if (e.subStats) {
+    for (const n of e.subStats)
+      if (n.label.toLowerCase().includes(r) || n.value.toLowerCase().includes(r)) return !0;
+  }
+  return !1;
+}
+function bt({
   isOpen: e,
-  lenses: t = Q,
-  defaultLens: o = X,
-  tilesByLens: n = J,
-  footerSlot: r
+  lenses: t = ee,
+  defaultLens: r = te,
+  tilesByLens: n = ne,
+  lensMeta: c = U,
+  footerSlot: i
 }) {
-  const [l, d] = b(o), [i, a] = b(null), [c, u] = b(null), h = n[l] ?? [];
-  return /* @__PURE__ */ p(
-    R.Provider,
+  const [d, l] = _(r), [a, o] = _(null), [u, p] = _(null), [m, b] = _(""), y = n[d] ?? { primary: [] }, v = c[d], N = W(
+    () => y.primary.filter((g) => G(g, m)),
+    [y.primary, m]
+  ), C = W(
+    () => (y.secondary ?? []).filter((g) => G(g, m)),
+    [y.secondary, m]
+  );
+  return /* @__PURE__ */ h(
+    V.Provider,
     {
-      value: { mode: "add", selectedTileId: i, description: c },
+      value: { mode: "add", selectedTileId: a, description: u },
       children: [
-        /* @__PURE__ */ p("div", { "data-shell": "catalog-add", "aria-hidden": !e, children: [
-          /* @__PURE__ */ s("h3", { children: "Add a metric" }),
+        /* @__PURE__ */ h("div", { "data-shell": "catalog-add", "aria-hidden": !e, children: [
+          /* @__PURE__ */ s("div", { className: "cat-search", children: /* @__PURE__ */ s(
+            "input",
+            {
+              type: "search",
+              className: "cat-search-input",
+              placeholder: "Search metrics",
+              "aria-label": "Search metrics",
+              value: m,
+              onChange: (g) => b(g.target.value)
+            }
+          ) }),
           /* @__PURE__ */ s(
-            j,
+            se,
             {
               lenses: t,
-              activeLens: l,
+              activeLens: d,
+              lensMeta: c,
+              variant: "pills",
               onLensChange: (g) => {
-                d(g), a(null), u(null);
+                l(g), o(null), p(null), b("");
               }
             }
           ),
+          v && /* @__PURE__ */ h("div", { className: "cat-lens-meta", children: [
+            /* @__PURE__ */ s("h3", { className: "cat-lens-headline", children: v.headline }),
+            /* @__PURE__ */ s("p", { className: "cat-lens-helper", children: v.helper })
+          ] }),
           /* @__PURE__ */ s(
-            G,
+            H,
             {
-              tiles: h,
-              selectedTileId: i,
-              onSelectTile: (g, f) => {
-                a(g), u(f);
+              tiles: N,
+              selectedTileId: a,
+              onSelectTile: (g, S) => {
+                o(g), p(S);
               }
             }
-          )
+          ),
+          C.length > 0 && /* @__PURE__ */ h("div", { className: "cat-more-in-lens", children: [
+            /* @__PURE__ */ s("div", { className: "cat-more-in-lens__heading", children: "MORE IN THIS LENS" }),
+            /* @__PURE__ */ s(
+              H,
+              {
+                tiles: C,
+                selectedTileId: a,
+                onSelectTile: (g, S) => {
+                  o(g), p(S);
+                }
+              }
+            )
+          ] }),
+          N.length === 0 && C.length === 0 && m.length > 0 && /* @__PURE__ */ h("div", { className: "cat-empty", children: [
+            'No metrics match "',
+            m,
+            '".'
+          ] })
         ] }),
-        r
+        i
       ]
     }
   );
 }
-function Ue({
+function vt({
   isOpen: e,
   replacingLabel: t,
-  lenses: o = Q,
-  defaultLens: n = X,
-  tilesByLens: r = J,
-  footerSlot: l
+  lenses: r = ee,
+  defaultLens: n = te,
+  tilesByLens: c = ne,
+  footerSlot: i
 }) {
-  const [d, i] = b(n), [a, c] = b(null), [u, h] = b(null), g = r[d] ?? [];
-  return /* @__PURE__ */ p(
-    R.Provider,
+  const [d, l] = _(n), [a, o] = _(null), [u, p] = _(null), m = c[d] ?? { primary: [] }, b = [...m.primary, ...m.secondary ?? []];
+  return /* @__PURE__ */ h(
+    V.Provider,
     {
       value: { mode: "replace", selectedTileId: a, description: u },
       children: [
-        /* @__PURE__ */ p("div", { "data-shell": "catalog-replace", "aria-hidden": !e, children: [
-          /* @__PURE__ */ s("h3", { children: "Replace metric" }),
-          t && /* @__PURE__ */ p("p", { className: "cat-subtitle", children: [
+        /* @__PURE__ */ h("div", { "data-shell": "catalog-replace", "aria-hidden": !e, children: [
+          t && /* @__PURE__ */ h("p", { className: "cat-subtitle", children: [
             "replacing ",
             t
           ] }),
           /* @__PURE__ */ s(
-            j,
+            se,
             {
-              lenses: o,
+              lenses: r,
               activeLens: d,
-              onLensChange: (f) => {
-                i(f), c(null), h(null);
+              onLensChange: (y) => {
+                l(y), o(null), p(null);
               }
             }
           ),
           /* @__PURE__ */ s(
-            G,
+            H,
             {
-              tiles: g,
+              tiles: b,
               selectedTileId: a,
-              onSelectTile: (f, y) => {
-                c(f), h(y);
+              onSelectTile: (y, v) => {
+                o(y), p(v);
               }
             }
           )
         ] }),
-        l
+        i
       ]
     }
   );
 }
-function ye({ page: e, onRename: t, onKebab: o, onDragStart: n }) {
-  const r = ["pm-row"];
-  return e.active && r.push("active"), /* @__PURE__ */ p("div", { className: r.join(" "), "data-page-id": e.id, role: "listitem", children: [
-    /* @__PURE__ */ s(
-      "div",
-      {
-        className: "pm-handle",
-        "aria-hidden": "true",
-        onMouseDown: () => n?.(e.id),
-        children: "⋮⋮"
-      }
-    ),
-    /* @__PURE__ */ s("div", { className: "pm-name", onClick: () => t?.(e.id), children: e.name }),
-    /* @__PURE__ */ s(
-      "button",
-      {
-        type: "button",
-        className: "pm-kebab",
-        "aria-label": "Page options",
-        onClick: () => o?.(e.id),
-        children: "⋯"
-      }
-    )
-  ] });
-}
-const Z = Y(null);
-function Ce() {
-  return K(Z);
+const ae = J(null);
+function re() {
+  return Z(ae);
 }
-function Pe(e = {}) {
-  const o = Ce()?.setPages;
-  return /* @__PURE__ */ p(
+function Be(e = {}) {
+  const r = re()?.setPages;
+  return /* @__PURE__ */ h(
     "div",
     {
       className: "panel-footer pm",
@@ -466,7 +779,7 @@ function Pe(e = {}) {
             type: "button",
             className: "btn btn-primary",
             onClick: () => {
-              o && o((n) => [
+              r && r((n) => [
                 ...n,
                 { id: `new-${Date.now()}`, name: "Untitled", active: !1 }
               ]);
@@ -478,38 +791,112 @@ function Pe(e = {}) {
     }
   );
 }
-const _e = [
+function Ke({ page: e, onRename: t, onKebab: r, onDragStart: n }) {
+  const c = re(), [i, d] = _(!1), l = I(null);
+  x(() => {
+    if (!i) return;
+    const m = (b) => {
+      l.current && (l.current.contains(b.target) || d(!1));
+    };
+    return document.addEventListener("mousedown", m, !0), () => document.removeEventListener("mousedown", m, !0);
+  }, [i]);
+  const a = () => {
+    if (d(!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());
+  }, o = () => {
+    d(!1), c?.duplicatePage?.(e.id);
+  }, u = () => {
+    d(!1), !e.active && c?.deletePage?.(e.id);
+  }, p = ["pm-row"];
+  return e.active && p.push("active"), /* @__PURE__ */ h("div", { ref: l, className: p.join(" "), "data-page-id": e.id, role: "listitem", children: [
+    /* @__PURE__ */ s(
+      "div",
+      {
+        className: "pm-handle",
+        "aria-hidden": "true",
+        onMouseDown: () => n?.(e.id),
+        children: "⋮⋮"
+      }
+    ),
+    /* @__PURE__ */ s("div", { className: "pm-name", children: e.name }),
+    /* @__PURE__ */ s(
+      "button",
+      {
+        type: "button",
+        className: "pm-kebab",
+        "aria-label": "Page options",
+        "aria-haspopup": "menu",
+        "aria-expanded": i,
+        onClick: (m) => {
+          if (m.stopPropagation(), r) return r(e.id);
+          d((b) => !b);
+        },
+        children: "⋯"
+      }
+    ),
+    i && /* @__PURE__ */ h("div", { className: "pm-kebab-menu", role: "menu", "data-page-id": e.id, children: [
+      /* @__PURE__ */ s("button", { type: "button", role: "menuitem", className: "pm-kebab-menu__item", onClick: a, children: "Rename" }),
+      /* @__PURE__ */ s("button", { type: "button", role: "menuitem", className: "pm-kebab-menu__item", onClick: o, children: "Duplicate" }),
+      /* @__PURE__ */ s(
+        "button",
+        {
+          type: "button",
+          role: "menuitem",
+          className: "pm-kebab-menu__item pm-kebab-menu__item--danger",
+          onClick: u,
+          "aria-disabled": e.active,
+          children: "Delete"
+        }
+      )
+    ] })
+  ] });
+}
+const We = [
   { 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 Ye({
+function yt({
   isOpen: e,
-  pages: t = _e,
-  footerSlot: o
+  pages: t = We,
+  footerSlot: r
 }) {
-  const [n, r] = b(() => [...t]);
-  return /* @__PURE__ */ p(Z.Provider, { value: { pages: n, setPages: r }, children: [
-    /* @__PURE__ */ p("div", { "data-shell": "page-management", "aria-hidden": !e, children: [
-      /* @__PURE__ */ s("h3", { children: "Manage pages" }),
-      /* @__PURE__ */ s("div", { className: "pm-list", role: "list", children: n.map((l) => /* @__PURE__ */ s(ye, { page: l }, l.id)) })
-    ] }),
-    o
-  ] });
+  const [n, c] = _(() => [...t]), i = E((a, o) => {
+    c((u) => u.map((p) => p.id === a ? { ...p, name: o } : p));
+  }, []), d = E((a) => {
+    c((o) => {
+      const u = o.find((b) => b.id === a);
+      if (!u) return o;
+      const p = {
+        id: `${u.id}-copy-${Date.now()}`,
+        name: `${u.name} copy`,
+        active: !1
+      }, m = o.findIndex((b) => b.id === a);
+      return [...o.slice(0, m + 1), p, ...o.slice(m + 1)];
+    });
+  }, []), l = E((a) => {
+    c((o) => o.filter((u) => u.id !== a));
+  }, []);
+  return /* @__PURE__ */ s(ae.Provider, { value: { pages: n, setPages: c, renamePage: i, duplicatePage: d, deletePage: l }, children: /* @__PURE__ */ h("div", { "data-shell": "page-management", "aria-hidden": !e, children: [
+    /* @__PURE__ */ s("div", { className: "pm-list", role: "list", children: n.map((a) => /* @__PURE__ */ s(Ke, { page: a }, a.id)) }),
+    r != null && /* @__PURE__ */ s("div", { className: "pm-footer-pin", children: r })
+  ] }) });
 }
-const Ke = {
+const St = {
   SETTINGS: "settings",
   CATALOG_ADD: "catalog-add",
   CATALOG_REPLACE: "catalog-replace",
   PAGE_MGMT: "page-management",
   NOTIFICATION_CENTER: "notification-center"
-}, Ne = {
+}, qe = {
   position: "fixed",
   inset: 0,
   pointerEvents: "none",
   zIndex: 55
-}, Se = {
+}, Ge = {
   position: "absolute",
   inset: 0,
   zIndex: 1,
@@ -518,69 +905,88 @@ const Ke = {
   pointerEvents: "none",
   background: "rgba(0, 0, 0, 0.04)"
 };
-function We() {
-  const { state: e, dispatch: t, getCloseLog: o } = oe();
-  V(() => {
+function _t() {
+  const { state: e, dispatch: t, getCloseLog: r } = fe();
+  x(() => {
     if (e.activePanelId == null) return;
-    function l(d) {
+    function i(d) {
       d.key === "Escape" && t({ type: "CLOSE_PANEL", reason: "escape-key" });
     }
-    return document.addEventListener("keydown", l), () => document.removeEventListener("keydown", l);
+    return document.addEventListener("keydown", i), () => document.removeEventListener("keydown", i);
   }, [e.activePanelId, t]);
-  const n = U(e);
-  re(() => {
+  const n = I(e);
+  ge(() => {
     n.current = e;
-  }), V(() => {
+  }), x(() => {
     if (process.env.NODE_ENV === "production") return;
-    const l = window;
-    return l.__panelsHostHandle && console.warn("[panels] multiple PanelHost/PanelHostShell instances mounted; dev handle is unreliable"), l.__panelsHostHandle = {
+    const i = window;
+    return i.__panelsHostHandle && console.warn("[panels] multiple PanelHost/PanelHostShell instances mounted; dev handle is unreliable"), i.__panelsHostHandle = {
       dispatch: t,
       getState: () => n.current,
-      getCloseLog: o
+      getCloseLog: r
     }, () => {
-      l.__panelsHostHandle?.dispatch === t && delete window.__panelsHostHandle;
+      i.__panelsHostHandle?.dispatch === t && delete window.__panelsHostHandle;
     };
-  }, [t, o]);
-  const r = W(() => {
+  }, [t, r]);
+  const c = E(() => {
     t({ type: "CLOSE_PANEL", reason: "nav-escape-hatch" });
   }, [t]);
-  return /* @__PURE__ */ s("div", { "data-panel-host": "true", style: Ne, children: e.activePanelId != null && /* @__PURE__ */ s(
+  return /* @__PURE__ */ s("div", { "data-panel-host": "true", style: qe, children: e.activePanelId != null && /* @__PURE__ */ s(
     "div",
     {
       "data-panel-scrim": "true",
-      style: Se,
-      onClick: r
+      style: Ge,
+      onClick: c
     }
   ) });
 }
-function je({ panelComponents: e, children: t }) {
-  const o = I();
-  if (o == null) return null;
-  const { state: n, dispatch: r } = o;
-  if (n.activePanelId == null) return null;
-  const l = e?.[n.activePanelId];
-  if (l == null && t == null)
+const Ye = 700;
+function je(e) {
+  const [t, r] = _(null), n = I(null);
+  return x(() => {
+    if (e != null) {
+      n.current != null && (clearTimeout(n.current), n.current = null), r(null);
+      return;
+    }
+    return r((c) => c), n.current = setTimeout(() => {
+      r(null), n.current = null;
+    }, Ye), () => {
+      n.current != null && (clearTimeout(n.current), n.current = null);
+    };
+  }, [e]), x(() => {
+    e != null && r(e);
+  }, [e]), e != null ? { panelId: e, isOpen: !0 } : t != null ? { panelId: t, isOpen: !1 } : { panelId: null, isOpen: !1 };
+}
+function Nt({ panelComponents: e, children: t }) {
+  const r = k();
+  if (r == null) return null;
+  const { state: n, dispatch: c } = r, i = je(n.activePanelId);
+  if (i.panelId == null) return null;
+  const d = i.panelId, l = i.isOpen, a = e?.[d];
+  if (a == null && t == null)
     return process.env.NODE_ENV !== "production" && console.error(
       "[panels] No panel component registered for activePanelId:",
-      n.activePanelId
+      d
     ), null;
-  if (n.activePanelId === "settings") {
-    const d = n.isDirty, i = n.activeTrigger, a = i?.kind === "card-overflow" ? i.cardId : null;
-    return /* @__PURE__ */ s(E, { isOpen: !0, children: /* @__PURE__ */ s(
-      A,
+  if (d === "settings") {
+    const o = n.isDirty, u = n.activeTrigger, p = u?.kind === "card-overflow" ? u.cardId : null;
+    return /* @__PURE__ */ s(A, { isOpen: l, children: /* @__PURE__ */ s(
+      T,
       {
-        isOpen: !0,
-        onClose: () => r({ type: "CLOSE_PANEL", reason: "header-x" }),
-        footer: /* @__PURE__ */ p(ae, { children: [
+        isOpen: l,
+        title: "Configure metric",
+        variant: "merged-stage",
+        onClose: () => c({ type: "CLOSE_PANEL", reason: "header-x" }),
+        footer: /* @__PURE__ */ h(X, { children: [
           /* @__PURE__ */ s(
             "button",
             {
               id: "btn-reset",
               type: "button",
               className: "gloss-panel-chrome__footer-btn",
-              disabled: !d,
+              disabled: !o,
               onClick: () => {
-                a != null && r({ type: "CLEAR_BUFFER", cardId: a });
+                p != null && c({ type: "CLEAR_BUFFER", cardId: p });
               },
               children: "Reset"
             }
@@ -592,7 +998,7 @@ function je({ panelComponents: e, children: t }) {
               id: "settings-cancel",
               type: "button",
               className: "gloss-panel-chrome__footer-btn",
-              onClick: () => r({ type: "CLOSE_PANEL", reason: "cancel-button" }),
+              onClick: () => c({ type: "CLOSE_PANEL", reason: "cancel-button" }),
               children: "Cancel"
             }
           ),
@@ -602,271 +1008,273 @@ function je({ panelComponents: e, children: t }) {
               id: "settings-apply",
               type: "button",
               className: "gloss-panel-chrome__footer-btn gloss-panel-chrome__footer-btn--primary",
-              disabled: !d,
-              onClick: () => r({ type: "CLOSE_PANEL", reason: "apply-button" }),
+              disabled: !o,
+              onClick: () => c({ type: "CLOSE_PANEL", reason: "apply-button" }),
               children: "Apply"
             }
           )
         ] }),
-        children: l != null ? /* @__PURE__ */ s(l, { isOpen: !0 }) : t
+        children: a != null ? /* @__PURE__ */ s(a, { isOpen: l }) : t
       }
     ) });
   }
-  if (n.activePanelId === "catalog-add" || n.activePanelId === "catalog-replace") {
-    if (l == null) return null;
-    const d = n.activePanelId === "catalog-replace" ? "replace" : "add";
-    return /* @__PURE__ */ s(E, { isOpen: !0, children: /* @__PURE__ */ s(
-      A,
+  if (d === "catalog-add" || d === "catalog-replace") {
+    if (a == null) return null;
+    const o = d === "catalog-replace" ? "replace" : "add";
+    return /* @__PURE__ */ s(A, { isOpen: l, children: /* @__PURE__ */ s(
+      T,
       {
-        isOpen: !0,
-        onClose: () => r({ type: "CLOSE_PANEL", reason: "header-x" }),
+        isOpen: l,
+        onClose: () => c({ type: "CLOSE_PANEL", reason: "header-x" }),
         footer: null,
+        title: o === "replace" ? "Replace metric" : "Add a metric",
         children: /* @__PURE__ */ s(
-          l,
+          a,
           {
-            isOpen: !0,
-            footerSlot: /* @__PURE__ */ s(be, { mode: d, dispatch: r })
+            isOpen: l,
+            footerSlot: /* @__PURE__ */ s(Ve, { mode: o, dispatch: c })
           }
         )
       }
     ) });
   }
-  return n.activePanelId === "page-management" ? l == null ? null : /* @__PURE__ */ s(E, { isOpen: !0, children: /* @__PURE__ */ s(
-    A,
+  return d === "page-management" ? a == null ? null : /* @__PURE__ */ s(A, { isOpen: l, children: /* @__PURE__ */ s(
+    T,
     {
-      isOpen: !0,
-      onClose: () => r({ type: "CLOSE_PANEL", reason: "header-x" }),
+      isOpen: l,
+      onClose: () => c({ type: "CLOSE_PANEL", reason: "header-x" }),
       footer: null,
-      children: /* @__PURE__ */ s(l, { isOpen: !0, footerSlot: /* @__PURE__ */ s(Pe, {}) })
+      title: "Manage pages",
+      children: /* @__PURE__ */ s(a, { isOpen: l, footerSlot: /* @__PURE__ */ s(Be, {}) })
     }
-  ) }) : /* @__PURE__ */ s(E, { isOpen: !0, children: /* @__PURE__ */ s(
-    A,
+  ) }) : /* @__PURE__ */ s(A, { isOpen: l, children: /* @__PURE__ */ s(
+    T,
     {
       isOpen: !0,
-      onClose: () => r({ type: "CLOSE_PANEL", reason: "header-x" }),
+      onClose: () => c({ type: "CLOSE_PANEL", reason: "header-x" }),
       footer: null,
-      children: l != null ? /* @__PURE__ */ s(l, { isOpen: !0 }) : t
+      children: a != null ? /* @__PURE__ */ s(a, { isOpen: l }) : t
     }
   ) });
 }
-function B(e) {
+function Y(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 we = 685, H = 627, Ee = "cubic-bezier(0.22, 1, 0.36, 1)", Ae = 200;
-function ee(e, t) {
+const Qe = 685, j = 627, Xe = "cubic-bezier(0.22, 1, 0.36, 1)", Je = 200;
+function le(e, t) {
   if (typeof window > "u") return t;
-  const o = window.getComputedStyle(document.documentElement).getPropertyValue(e).trim();
-  if (!o) return t;
-  const n = parseFloat(o);
-  return Number.isNaN(n) ? t : o.endsWith("s") && !o.endsWith("ms") ? n * 1e3 : n;
+  const r = window.getComputedStyle(document.documentElement).getPropertyValue(e).trim();
+  if (!r) return t;
+  const n = parseFloat(r);
+  return Number.isNaN(n) ? t : r.endsWith("s") && !r.endsWith("ms") ? n * 1e3 : n;
 }
-function xe(e, t) {
+function Ze(e, t) {
   return typeof window > "u" ? t : window.getComputedStyle(document.documentElement).getPropertyValue(e).trim() || t;
 }
-function x(e) {
+function L(e) {
   e.dispatch({ type: "OPEN_PANEL", panelId: e.panelId, trigger: e.trigger });
 }
-function Te(e) {
-  const { mountEl: t, chromeEl: o, reducedMotion: n, onAssert: r } = e;
-  if (t == null || o == null) {
-    x(e), r?.({ branch: "slide-fallback-no-dom", timestamp: Date.now() });
+function et(e) {
+  const { mountEl: t, chromeEl: r, reducedMotion: n, onAssert: c } = e;
+  if (t == null || r == null) {
+    L(e), c?.({ branch: "slide-fallback-no-dom", timestamp: Date.now() });
     return;
   }
   if (n) {
-    e.dispatch({ type: "OPEN_PANEL", panelId: e.panelId, trigger: e.trigger }), r?.({ branch: "slide-reduced-motion", timestamp: Date.now() });
+    e.dispatch({ type: "OPEN_PANEL", panelId: e.panelId, trigger: e.trigger }), c?.({ branch: "slide-reduced-motion", timestamp: Date.now() });
     return;
   }
-  if (typeof o.animate != "function") {
-    x(e), r?.({ branch: "slide-no-waapi", timestamp: Date.now() });
+  if (typeof r.animate != "function") {
+    L(e), c?.({ branch: "slide-no-waapi", timestamp: Date.now() });
     return;
   }
-  const l = o.cloneNode(!0);
-  l.id = "panel-chrome-frozen", l.style.cssText = "position:absolute;left:8px;right:8px;top:8px;z-index:1;pointer-events:none;", t.appendChild(l), o.style.zIndex = "2", e.dispatch({ type: "OPEN_PANEL", panelId: e.panelId, trigger: e.trigger });
-  const d = ee("--panel-open-dur", we), i = xe("--panel-easing", Ee), a = o.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 d = le("--panel-open-dur", Qe), l = Ze("--panel-easing", Xe), a = r.animate(
     [{ transform: "translateY(100%)" }, { transform: "translateY(0)" }],
-    { duration: d, easing: i, fill: "forwards" }
+    { duration: d, easing: l, fill: "forwards" }
   );
   a.addEventListener(
     "finish",
     () => {
-      l.remove(), o.style.zIndex = "", a.cancel(), r?.({ branch: "slide-complete", frozen: "cleaned", timestamp: Date.now() });
+      i.remove(), r.style.zIndex = "", a.cancel(), c?.({ branch: "slide-complete", frozen: "cleaned", timestamp: Date.now() });
     },
     { once: !0 }
   );
 }
-function Ie(e) {
-  const { mountEl: t, onAssert: o } = e;
+function tt(e) {
+  const { mountEl: t, onAssert: r } = e;
   if (t == null) {
-    e.dispatch({ type: "CLOSE_PANEL", reason: "mutex-handoff" }), setTimeout(() => x(e), H), o?.({ branch: "handoff-fallback-no-mount", timestamp: Date.now() });
+    e.dispatch({ type: "CLOSE_PANEL", reason: "mutex-handoff" }), setTimeout(() => L(e), j), r?.({ branch: "handoff-fallback-no-mount", timestamp: Date.now() });
     return;
   }
-  const n = ee("--panel-close-dur", H);
-  let r = !1, l = null;
+  const n = le("--panel-close-dur", j);
+  let c = !1, i = null;
   const d = (a) => {
-    a.target !== t || a.propertyName !== "max-height" || r || (r = !0, l != null && clearTimeout(l), t.removeEventListener("transitionend", d), e.dispatch({ type: "OPEN_PANEL", panelId: e.panelId, trigger: e.trigger }), o?.({ branch: "handoff-complete", timestamp: Date.now() }));
-  }, i = () => {
-    r || (r = !0, t.removeEventListener("transitionend", d), e.dispatch({ type: "OPEN_PANEL", panelId: e.panelId, trigger: e.trigger }), o?.({ branch: "handoff-forced", timestamp: Date.now() }));
+    a.target !== t || a.propertyName !== "max-height" || c || (c = !0, i != null && clearTimeout(i), t.removeEventListener("transitionend", d), e.dispatch({ type: "OPEN_PANEL", panelId: e.panelId, trigger: e.trigger }), r?.({ branch: "handoff-complete", timestamp: Date.now() }));
+  }, l = () => {
+    c || (c = !0, t.removeEventListener("transitionend", d), e.dispatch({ type: "OPEN_PANEL", panelId: e.panelId, trigger: e.trigger }), r?.({ branch: "handoff-forced", timestamp: Date.now() }));
   };
-  t.addEventListener("transitionend", d), e.dispatch({ type: "CLOSE_PANEL", reason: "mutex-handoff" }), l = setTimeout(i, n + Ae);
+  t.addEventListener("transitionend", d), e.dispatch({ type: "CLOSE_PANEL", reason: "mutex-handoff" }), i = setTimeout(l, n + Je);
 }
-function Le(e) {
-  const { state: t, onAssert: o } = e;
+function nt(e) {
+  const { state: t, onAssert: r } = e;
   if (t.activePanelId && t.isDirty) {
-    e.dispatch({ type: "OPEN_PANEL", panelId: e.panelId, trigger: e.trigger }), o?.({ 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 n = B(t.activeTrigger), r = B(e.trigger);
-  if (!!t.activePanelId && n != null && n === r) {
-    Te(e);
+  const n = Y(t.activeTrigger), c = Y(e.trigger);
+  if (!!t.activePanelId && n != null && n === c) {
+    et(e);
     return;
   }
   if (t.activePanelId) {
-    Ie(e);
+    tt(e);
     return;
   }
-  x(e), o?.({ branch: "fresh-open", timestamp: Date.now() });
+  L(e), r?.({ branch: "fresh-open", timestamp: Date.now() });
 }
-function Oe() {
+function st() {
   if (!(typeof window > "u"))
     return window.__panelsAsserter;
 }
-function Ge() {
-  const e = I(), t = q();
-  return W(
-    (o, n) => {
+function Ct() {
+  const e = k(), t = Q();
+  return E(
+    (r, n) => {
       if (!e)
         return;
-      const r = typeof document < "u" ? document.querySelector('[data-mount="panel"]') : null, l = typeof document < "u" ? document.querySelector('[data-chrome="panel"]') : null, d = {
-        panelId: o,
+      const c = typeof document < "u" ? document.querySelector('[data-mount="panel"]') : null, i = typeof document < "u" ? document.querySelector('[data-chrome="panel"]') : null, d = {
+        panelId: r,
         trigger: n,
         state: e.state,
         dispatch: e.dispatch,
-        mountEl: r,
-        chromeEl: l,
+        mountEl: c,
+        chromeEl: i,
         reducedMotion: t,
-        onAssert: (i) => {
-          Oe()?.recordTransition?.(i);
+        onAssert: (l) => {
+          st()?.recordTransition?.(l);
         }
       };
-      Le(d);
+      nt(d);
     },
     [e, t]
   );
 }
-let T = !1, L = null;
-function $() {
+let O = !1, D = null;
+function z() {
   const e = [];
   let t = "cleaned";
   document.querySelectorAll("#panel-chrome-frozen").length > 0 && (e.push("#panel-chrome-frozen"), t = "lingering");
   const n = document.querySelectorAll(".gloss-panel-mount");
   n.length > 1 && e.push(`mount-count=${n.length}`);
-  const r = n[0] ?? null, l = r ? r.querySelectorAll(".gloss-panel-chrome") : [];
-  l.length > 1 && e.push(`chrome-count=${l.length}`);
-  const d = l[0] ?? null;
+  const c = n[0] ?? null, i = c ? c.querySelectorAll(".gloss-panel-chrome") : [];
+  i.length > 1 && e.push(`chrome-count=${i.length}`);
+  const d = i[0] ?? null;
   if (d) {
     const u = d.style.zIndex;
     u !== "" && u !== "2" && e.push(`chrome-zindex=${u}`);
   }
-  const i = r ? "present" : "absent", a = d ? "present" : "absent";
+  const l = c ? "present" : "absent", a = d ? "present" : "absent";
   return {
     valid: e.length === 0,
-    mount: i,
+    mount: l,
     chrome: a,
     frozen: t,
     orphans: e,
     timestamp: Date.now()
   };
 }
-const O = "8px 8px 0px", k = "64px", M = "inset(0px 0px 60px 0px)", D = "inset(0px -40px -40px -40px)";
-function m(e, t, o, n, r) {
-  return { id: e, constraint: t, expected: o, actual: n, pass: r };
+const M = "8px 8px 0px", R = "64px", $ = "inset(0px 0px 60px 0px)", F = "inset(0px -40px -40px -40px)";
+function f(e, t, r, n, c) {
+  return { id: e, constraint: t, expected: r, actual: n, pass: c };
 }
 function P(e) {
   const t = parseInt(e, 10);
   return Number.isFinite(t) ? t : NaN;
 }
-function F() {
-  const e = [], t = document.querySelector(".gloss-panel-mount"), o = t?.querySelector(".gloss-panel-chrome") ?? null, n = document.querySelector(".gloss-panel-coordinator") ?? document.querySelector("[data-panel-coordinator]"), r = document.querySelector(".bell-cutout"), l = document.querySelector(".bell-popover"), d = document.querySelector(".gloss-bottom-toolbar");
+function B() {
+  const e = [], t = document.querySelector(".gloss-panel-mount"), r = t?.querySelector(".gloss-panel-chrome") ?? null, n = document.querySelector(".gloss-panel-coordinator") ?? document.querySelector("[data-panel-coordinator]"), c = document.querySelector(".bell-cutout"), i = document.querySelector(".bell-popover"), d = document.querySelector(".gloss-bottom-toolbar");
   if (!t)
-    e.push(m("C1", "mount --reveal-y matches clip-path inset-bottom Npx", "mount present", "absent", !1));
+    e.push(f("C1", "mount --reveal-y matches clip-path inset-bottom Npx", "mount present", "absent", !1));
   else {
-    const i = getComputedStyle(t), a = i.getPropertyValue("--reveal-y").trim() || t.style.getPropertyValue("--reveal-y").trim(), c = i.clipPath || t.style.clipPath || "", u = c.match(/inset\(\s*0(?:px)?\s+0(?:px)?\s+(\d+)px\s+0(?:px)?\s*\)/), h = u ? parseInt(u[1], 10) : NaN, g = P(a), f = Number.isFinite(h) && Number.isFinite(g) && h === g;
+    const l = getComputedStyle(t), a = l.getPropertyValue("--reveal-y").trim() || t.style.getPropertyValue("--reveal-y").trim(), o = l.clipPath || t.style.clipPath || "", u = o.match(/inset\(\s*0(?:px)?\s+0(?:px)?\s+(\d+)px\s+0(?:px)?\s*\)/), p = u ? parseInt(u[1], 10) : NaN, m = P(a), b = Number.isFinite(p) && Number.isFinite(m) && p === m;
     e.push(
-      m(
+      f(
         "C1",
         "mount --reveal-y matches clip-path inset-bottom Npx",
-        `inset(0 0 ${g}px 0) === --reveal-y(${g}px)`,
-        `--reveal-y=${a || "n/a"} clip-path=${c || "n/a"}`,
-        f
+        `inset(0 0 ${m}px 0) === --reveal-y(${m}px)`,
+        `--reveal-y=${a || "n/a"} clip-path=${o || "n/a"}`,
+        b
       )
     );
   }
   if (!t)
-    e.push(m("C2", "mount padding constant", O, "absent", !1));
+    e.push(f("C2", "mount padding constant", M, "absent", !1));
   else {
-    const i = t.style.padding, a = getComputedStyle(t), c = i || a.padding || "", u = c === O || c === "8px 8px 0px 8px";
-    e.push(m("C2", "mount padding constant", O, c || "n/a", u));
+    const l = t.style.padding, a = getComputedStyle(t), o = l || a.padding || "", u = o === M || o === "8px 8px 0px 8px";
+    e.push(f("C2", "mount padding constant", M, o || "n/a", u));
   }
   if (!t)
-    e.push(m("C3", "mount.bottom resolves to var(--tb-h)=64px", k, "absent", !1));
+    e.push(f("C3", "mount.bottom resolves to var(--tb-h)=64px", R, "absent", !1));
   else {
-    const a = getComputedStyle(t).bottom || t.style.bottom || "", c = a === k;
-    e.push(m("C3", "mount.bottom resolves to var(--tb-h)=64px", k, a || "n/a", c));
+    const a = getComputedStyle(t).bottom || t.style.bottom || "", o = a === R;
+    e.push(f("C3", "mount.bottom resolves to var(--tb-h)=64px", R, a || "n/a", o));
   }
-  if (!o)
-    e.push(m("C4", "panel-chrome height formula = (row-h*3)+(row-gap*3)-8px", "formula match", "absent", !1));
+  if (!r)
+    e.push(f("C4", "panel-chrome height formula = (row-h*3)+(row-gap*3)-8px", "formula match", "absent", !1));
   else {
-    const i = getComputedStyle(o), a = P(
-      i.getPropertyValue("--row-h").trim() || o.style.getPropertyValue("--row-h").trim() || "0"
-    ), c = P(
-      i.getPropertyValue("--row-gap").trim() || o.style.getPropertyValue("--row-gap").trim() || "0"
-    ), u = a * 3 + c * 3 - 8, h = P(i.height || o.style.height || ""), g = Number.isFinite(a) && Number.isFinite(c) && Number.isFinite(h) && Number.isFinite(u) && h === u;
+    const l = getComputedStyle(r), a = P(
+      l.getPropertyValue("--row-h").trim() || r.style.getPropertyValue("--row-h").trim() || "0"
+    ), o = P(
+      l.getPropertyValue("--row-gap").trim() || r.style.getPropertyValue("--row-gap").trim() || "0"
+    ), u = a * 3 + o * 3 - 8, p = P(l.height || r.style.height || ""), m = Number.isFinite(a) && Number.isFinite(o) && Number.isFinite(p) && Number.isFinite(u) && p === u;
     e.push(
-      m(
+      f(
         "C4",
         "panel-chrome height formula = (row-h*3)+(row-gap*3)-8px",
-        `${u}px (rh=${a} rg=${c})`,
-        `${h}px`,
-        g
+        `${u}px (rh=${a} rg=${o})`,
+        `${p}px`,
+        m
       )
     );
   }
-  if (!n || !o)
+  if (!n || !r)
     e.push(
-      m(
+      f(
         "C5",
         'coordinator perspective + origin "center bottom"; chrome perspective-style flat',
         "present",
-        `coordinator=${n ? "present" : "absent"} chrome=${o ? "present" : "absent"}`,
+        `coordinator=${n ? "present" : "absent"} chrome=${r ? "present" : "absent"}`,
         !1
       )
     );
   else {
-    const i = getComputedStyle(n), a = getComputedStyle(o), c = i.perspective || n.style.perspective || "", u = (i.perspectiveOrigin || n.style.perspectiveOrigin || "").trim(), h = a.perspectiveStyle || o.style.perspectiveStyle || "", v = c !== "" && c !== "none" && (u === "center bottom" || u === "50% 100%") && h === "flat";
+    const l = getComputedStyle(n), a = getComputedStyle(r), o = l.perspective || n.style.perspective || "", u = (l.perspectiveOrigin || n.style.perspectiveOrigin || "").trim(), p = a.perspectiveStyle || r.style.perspectiveStyle || "", v = o !== "" && o !== "none" && (u === "center bottom" || u === "50% 100%") && p === "flat";
     e.push(
-      m(
+      f(
         "C5",
         'coordinator perspective + origin "center bottom"; chrome perspective-style flat',
         "perspective:not-none, origin:center bottom, chrome-style:flat",
-        `perspective=${c} origin=${u} chrome-style=${h}`,
+        `perspective=${o} origin=${u} chrome-style=${p}`,
         v
       )
     );
   }
   {
-    let i = !1, a = "absent";
+    let l = !1, a = "absent";
     try {
-      for (const c of Array.from(document.styleSheets)) {
+      for (const o of Array.from(document.styleSheets)) {
         let u = [];
         try {
-          u = Array.from(c.cssRules ?? []);
+          u = Array.from(o.cssRules ?? []);
         } catch {
           continue;
         }
-        for (const h of u)
-          if (h.name === "stage-spin") {
-            const f = Array.from(h.cssRules), y = f.find((C) => C.keyText === "0%" || C.keyText === "from"), v = f.find((C) => C.keyText === "100%" || C.keyText === "to"), N = y?.style.transform ?? "", S = v?.style.transform ?? "", w = /rotateY\(\s*0(?:deg)?\s*\)/;
-            i = w.test(N) && w.test(S), a = `0%=${N || "n/a"} 100%=${S || "n/a"}`;
+        for (const p of u)
+          if (p.name === "stage-spin") {
+            const b = Array.from(p.cssRules), y = b.find((S) => S.keyText === "0%" || S.keyText === "from"), v = b.find((S) => S.keyText === "100%" || S.keyText === "to"), N = y?.style.transform ?? "", C = v?.style.transform ?? "", g = /rotateY\(\s*0(?:deg)?\s*\)/;
+            l = g.test(N) && g.test(C), a = `0%=${N || "n/a"} 100%=${C || "n/a"}`;
             break;
           }
         if (a !== "absent") break;
@@ -875,69 +1283,69 @@ function F() {
       a = "inspection-error";
     }
     e.push(
-      m(
+      f(
         "C6",
         "@keyframes stage-spin 0% AND 100% anchor at rotateY(0)",
         "both frames rotateY(0)",
         a,
-        i
+        l
       )
     );
   }
   {
-    const i = document.documentElement, a = getComputedStyle(i), c = a.getPropertyValue("--panel-open-dur").trim() || i.style.getPropertyValue("--panel-open-dur").trim(), u = a.getPropertyValue("--panel-close-dur").trim() || i.style.getPropertyValue("--panel-close-dur").trim(), h = P(c) || parseFloat(c) * (c.endsWith("s") && !c.endsWith("ms") ? 1e3 : 1), g = P(u) || parseFloat(u) * (u.endsWith("s") && !u.endsWith("ms") ? 1e3 : 1), f = Number.isFinite(h) && Number.isFinite(g) && h > g;
+    const l = document.documentElement, a = getComputedStyle(l), o = a.getPropertyValue("--panel-open-dur").trim() || l.style.getPropertyValue("--panel-open-dur").trim(), u = a.getPropertyValue("--panel-close-dur").trim() || l.style.getPropertyValue("--panel-close-dur").trim(), p = P(o) || parseFloat(o) * (o.endsWith("s") && !o.endsWith("ms") ? 1e3 : 1), m = P(u) || parseFloat(u) * (u.endsWith("s") && !u.endsWith("ms") ? 1e3 : 1), b = Number.isFinite(p) && Number.isFinite(m) && p > m;
     e.push(
-      m("C7", "--panel-open-dur > --panel-close-dur", "open > close", `open=${c || "n/a"} close=${u || "n/a"}`, f)
+      f("C7", "--panel-open-dur > --panel-close-dur", "open > close", `open=${o || "n/a"} close=${u || "n/a"}`, b)
     );
   }
-  if (!r)
-    e.push(m("C8", "BellCutout zero computed animation/transition", "no inline timing", "absent", !1));
+  if (!c)
+    e.push(f("C8", "BellCutout zero computed animation/transition", "no inline timing", "absent", !1));
   else {
-    const i = getComputedStyle(r), a = i.animationName || "", c = i.transitionProperty || "", u = (a === "" || a === "none") && (c === "" || c === "none" || c === "all");
+    const l = getComputedStyle(c), a = l.animationName || "", o = l.transitionProperty || "", u = (a === "" || a === "none") && (o === "" || o === "none" || o === "all");
     e.push(
-      m(
+      f(
         "C8",
         "BellCutout zero computed animation/transition",
         "animation:none AND transition:none",
-        `animation=${a || "n/a"} transition=${c || "n/a"}`,
+        `animation=${a || "n/a"} transition=${o || "n/a"}`,
         u
       )
     );
   }
   if (!t)
-    e.push(m("C9", "mount closed-state clipPath", M, "absent", !1));
+    e.push(f("C9", "mount closed-state clipPath", $, "absent", !1));
   else {
-    const i = t.style.clipPath, a = getComputedStyle(t), c = i || a.clipPath || "", u = c === M;
-    e.push(m("C9", "mount closed-state clipPath", M, c || "n/a", u));
+    const l = t.style.clipPath, a = getComputedStyle(t), o = l || a.clipPath || "", u = o === $;
+    e.push(f("C9", "mount closed-state clipPath", $, o || "n/a", u));
   }
-  if (!l)
-    e.push(m("C10", "bell-popover parentElement === document.body (open)", "body", "absent", !1));
+  if (!i)
+    e.push(f("C10", "bell-popover parentElement === document.body (open)", "body", "absent", !1));
   else {
-    const i = l.parentElement, a = i === document.body;
+    const l = i.parentElement, a = l === document.body;
     e.push(
-      m(
+      f(
         "C10",
         "bell-popover parentElement === document.body (open)",
         "body",
-        i === document.body ? "body" : i?.tagName ?? "n/a",
+        l === document.body ? "body" : l?.tagName ?? "n/a",
         a
       )
     );
   }
   if (!n)
-    e.push(m("C11", "coordinator overflow === visible", "visible", "absent", !1));
+    e.push(f("C11", "coordinator overflow === visible", "visible", "absent", !1));
   else {
-    const a = getComputedStyle(n).overflow || n.style.overflow || "", c = a === "visible";
-    e.push(m("C11", "coordinator overflow === visible", "visible", a || "n/a", c));
+    const a = getComputedStyle(n).overflow || n.style.overflow || "", o = a === "visible";
+    e.push(f("C11", "coordinator overflow === visible", "visible", a || "n/a", o));
   }
   if (!d)
-    e.push(m("C12", "toolbar clipPath = inset(0 -40 -40 -40)", D, "absent", !1));
+    e.push(f("C12", "toolbar clipPath = inset(0 -40 -40 -40)", F, "absent", !1));
   else {
-    const i = d.style.clipPath, a = getComputedStyle(d), c = i || a.clipPath || "", u = c === D;
-    e.push(m("C12", "toolbar clipPath = inset(0 -40 -40 -40)", D, c || "n/a", u));
+    const l = d.style.clipPath, a = getComputedStyle(d), o = l || a.clipPath || "", u = o === F;
+    e.push(f("C12", "toolbar clipPath = inset(0 -40 -40 -40)", F, o || "n/a", u));
   }
   return e.push(
-    m(
+    f(
       "C13",
       "same-position slide via WAAPI (mid-transition getAnimations().length > 0)",
       "WAAPI driver wired in orchestrator (source-proof)",
@@ -945,7 +1353,7 @@ function F() {
       "wiring_only"
     )
   ), e.push(
-    m(
+    f(
       "C14",
       'cross-position handoff transitionend filtered by propertyName="max-height"',
       "transitionend filter wired in orchestrator (source-proof)",
@@ -954,11 +1362,11 @@ function F() {
     )
   ), e;
 }
-function ke(e) {
-  return F().find((t) => t.id === e);
+function at(e) {
+  return B().find((t) => t.id === e);
 }
-function Me() {
-  const e = $();
+function rt() {
+  const e = z();
   return { q12: [
     {
       id: "Q12-12",
@@ -967,75 +1375,76 @@ function Me() {
       actual: `valid=${e.valid} mount=${e.mount} chrome=${e.chrome} frozen=${e.frozen} orphans=[${e.orphans.join(",")}]`,
       pass: e.valid
     }
-  ], cc: F() };
+  ], cc: B() };
 }
-function De() {
+function lt() {
   return {
-    enable: $e,
-    disable: Re,
-    isEnabled: () => T,
-    getLastReport: () => L,
+    enable: ot,
+    disable: it,
+    isEnabled: () => O,
+    getLastReport: () => D,
     recordTransition: (e) => {
-      T && (L = { ...e, ...$() });
+      O && (D = { ...e, ...z() });
     },
     assertOnce: () => {
-      const e = $();
-      return L = e, e;
+      const e = z();
+      return D = e, e;
     },
-    assertCcOnly: F,
-    getCcRowById: ke,
-    assertPanelTruths: Me
+    assertCcOnly: B,
+    getCcRowById: at,
+    assertPanelTruths: rt
   };
 }
-function $e() {
-  if (T = !0, typeof window > "u") return;
-  window.__panelsAsserter || (window.__panelsAsserter = De(), console.info(
+function ot() {
+  if (O = !0, typeof window > "u") return;
+  window.__panelsAsserter || (window.__panelsAsserter = lt(), console.info(
     "[panels] asserter enabled (P3b Q12-12 + P6 W5 cc:C1..C14). Inspect via window.__panelsAsserter."
   ));
 }
-function Re() {
-  T = !1;
+function it() {
+  O = !1;
 }
 export {
-  Je as COMMITS,
-  qe as CatalogAddShell,
-  be as CatalogFooter,
-  Ue as CatalogReplaceShell,
-  R as CatalogStateContext,
-  ie as CloneCard,
-  le as CloneStage,
-  X as MOCK_DEFAULT_LENS,
-  Q as MOCK_LENSES,
-  _e as MOCK_PAGES,
-  J as MOCK_TILES_BY_LENS,
-  Ke as PANEL_IDS,
-  Pe as PageMgmtFooter,
-  Ye as PageMgmtShell,
-  Z as PageMgmtStateContext,
-  A as PanelChrome,
-  Ze as PanelHost,
-  We as PanelHostShell,
-  E as PanelMount,
-  et as PanelProvider,
-  je as PanelSlot,
-  He as SettingsShell,
-  F as assertCcOnly,
-  $ as assertPanelDomShape,
-  Me as assertPanelTruths,
-  tt as deriveSurfaceState,
-  Re as disablePanelAsserter,
-  $e as enablePanelAsserter,
-  ke as getCcRowById,
-  nt as initialState,
-  B as positionKey,
-  st as reducer,
-  Le as transitionToPanel,
-  ve as useCatalogState,
-  Be as useEditingCardId,
-  Ce as usePageMgmtState,
-  oe as usePanelContext,
-  I as usePanelContextOptional,
-  ot as usePanelCoordinator,
-  q as useReducedMotionPanel,
-  Ge as useTransitionToPanel
+  Et as COMMITS,
+  bt as CatalogAddShell,
+  Ve as CatalogFooter,
+  vt as CatalogReplaceShell,
+  V as CatalogStateContext,
+  Te as CloneCard,
+  Ae as CloneStage,
+  te as MOCK_DEFAULT_LENS,
+  ee as MOCK_LENSES,
+  U as MOCK_LENS_META,
+  We as MOCK_PAGES,
+  ne as MOCK_TILES_BY_LENS,
+  St as PANEL_IDS,
+  Be as PageMgmtFooter,
+  yt as PageMgmtShell,
+  ae as PageMgmtStateContext,
+  T as PanelChrome,
+  xt as PanelHost,
+  _t as PanelHostShell,
+  A as PanelMount,
+  At as PanelProvider,
+  Nt as PanelSlot,
+  gt as SettingsShell,
+  B as assertCcOnly,
+  z as assertPanelDomShape,
+  rt as assertPanelTruths,
+  Tt as deriveSurfaceState,
+  it as disablePanelAsserter,
+  ot as enablePanelAsserter,
+  at as getCcRowById,
+  Lt as initialState,
+  Y as positionKey,
+  Ot as reducer,
+  nt as transitionToPanel,
+  Ue as useCatalogState,
+  ft as useEditingCardId,
+  re as usePageMgmtState,
+  fe as usePanelContext,
+  k as usePanelContextOptional,
+  kt as usePanelCoordinator,
+  Q as useReducedMotionPanel,
+  Ct as useTransitionToPanel
 };