@mt-gloss/ui 0.1.109 → 0.1.111

package/composites-panels.js

@@ -1,29 +1,29 @@
-import { u as k, f as X, S as fe, a as ge, g as x, c as T } from "./COMMITS-DG0Q_9DU.js";
-import { C as Et, b as At, P as xt, e as Tt, i as Ot, r as Lt, d as kt } from "./COMMITS-DG0Q_9DU.js";
-import { jsx as a, jsxs as h, Fragment as J } from "react/jsx-runtime";
-import B, { useState as C, useRef as I, createContext as Z, useContext as ee, useMemo as Y, useEffect as A, useCallback as E, useLayoutEffect as ve } from "react";
-import { useSensors as be, useSensor as W, PointerSensor as ye, KeyboardSensor as Se, DndContext as Ce, closestCenter as _e } from "@dnd-kit/core";
-import { sortableKeyboardCoordinates as Ne, SortableContext as we, horizontalListSortingStrategy as Pe, arrayMove as Ee, useSortable as Ae } from "@dnd-kit/sortable";
-import { CSS as xe } from "@dnd-kit/utilities";
-import { M as G } from "./MetricCard-Cyoxhb_S.js";
+import { u as L, f as J, S as fe, a as ge, g as E, c as k } from "./COMMITS-DG0Q_9DU.js";
+import { C as Pt, b as xt, P as At, e as Et, i as kt, r as Dt, d as Ot } from "./COMMITS-DG0Q_9DU.js";
+import { jsx as s, jsxs as h, Fragment as Z } from "react/jsx-runtime";
+import B, { useState as T, useRef as I, createContext as ee, useContext as te, useMemo as W, useEffect as A, useCallback as x, useLayoutEffect as be } from "react";
+import { useSensors as ye, useSensor as G, PointerSensor as ve, KeyboardSensor as Ce, DndContext as Se, closestCenter as Te } from "@dnd-kit/core";
+import { sortableKeyboardCoordinates as _e, SortableContext as we, horizontalListSortingStrategy as Ne, arrayMove as Pe, useSortable as xe } from "@dnd-kit/sortable";
+import { CSS as Ae } from "@dnd-kit/utilities";
+import { M as Q } from "./MetricCard-Cyoxhb_S.js";
 function ft() {
-  const e = k();
+  const e = L();
   if (e?.state.activePanelId !== "settings") return null;
   const t = e.state.activeTrigger;
   return t?.kind === "card-overflow" ? t.cardId : null;
 }
-function Te({ children: e }) {
-  return /* @__PURE__ */ a("div", { className: "clone-stage", children: e });
+function Ee({ children: e }) {
+  return /* @__PURE__ */ s("div", { className: "clone-stage", children: e });
 }
-function Oe({ span: e, rotating: t = !0, children: r }) {
-  const n = ["clone-card", `span-${e}`, t ? "rotating" : ""].filter(Boolean).join(" "), d = r != null ? "full" : "fallback";
-  return /* @__PURE__ */ a("div", { className: n, "data-clone-fidelity": d, children: r });
+function ke({ span: e, rotating: t = !0, children: l }) {
+  const i = ["clone-card", `span-${e}`, t ? "rotating" : ""].filter(Boolean).join(" "), n = l != null ? "full" : "fallback";
+  return /* @__PURE__ */ s("div", { className: i, "data-clone-fidelity": n, children: l });
 }
-function Le({ value: e, onChange: t }) {
+function De({ value: e, onChange: t }) {
   return /* @__PURE__ */ h("div", { className: "settings-shell__field settings-shell__field--threshold", children: [
-    /* @__PURE__ */ a("span", { className: "settings-shell__label", "aria-hidden": "true", children: "Alert level (%)" }),
+    /* @__PURE__ */ s("span", { className: "settings-shell__label", "aria-hidden": "true", children: "Alert level (%)" }),
     /* @__PURE__ */ h("div", { className: "settings-shell__slider-row", children: [
-      /* @__PURE__ */ a(
+      /* @__PURE__ */ s(
         "input",
         {
           id: "settings-threshold-input",
@@ -46,11 +46,11 @@ function Le({ value: e, onChange: t }) {
     ] })
   ] });
 }
-function ke({ value: e, onChange: t }) {
+function Oe({ value: e, onChange: t }) {
   return /* @__PURE__ */ h("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__ */ s("span", { className: "settings-shell__label", "aria-hidden": "true", children: "Rolling period (days)" }),
     /* @__PURE__ */ h("div", { className: "settings-shell__slider-row", children: [
-      /* @__PURE__ */ a(
+      /* @__PURE__ */ s(
         "input",
         {
           id: "settings-timeframe-input",
@@ -73,32 +73,32 @@ function ke({ value: e, onChange: t }) {
     ] })
   ] });
 }
-function Ie({ id: e, onRemove: t }) {
-  const { attributes: r, listeners: n, setNodeRef: d, transform: i, transition: u, isDragging: l } = Ae({ id: e }), s = {
-    transform: xe.Transform.toString(i),
+function Le({ id: e, onRemove: t }) {
+  const { attributes: l, listeners: i, setNodeRef: n, transform: c, transition: u, isDragging: r } = xe({ id: e }), a = {
+    transform: Ae.Transform.toString(c),
     transition: u,
-    opacity: l ? 0.6 : 1
+    opacity: r ? 0.6 : 1
   };
   return /* @__PURE__ */ h(
     "li",
     {
-      ref: d,
-      style: s,
-      className: `settings-shell__slot-pill${l ? " settings-shell__slot-pill--dragging" : ""}`,
+      ref: n,
+      style: a,
+      className: `settings-shell__slot-pill${r ? " settings-shell__slot-pill--dragging" : ""}`,
       children: [
-        /* @__PURE__ */ a(
+        /* @__PURE__ */ s(
           "button",
           {
             type: "button",
             className: "settings-shell__slot-pill__handle",
             "aria-label": `Reorder ${e}`,
-            ...r,
-            ...n,
-            children: /* @__PURE__ */ a("span", { "aria-hidden": "true", className: "settings-shell__slot-pill__grip", children: "⋮⋮" })
+            ...l,
+            ...i,
+            children: /* @__PURE__ */ s("span", { "aria-hidden": "true", className: "settings-shell__slot-pill__grip", children: "⋮⋮" })
           }
         ),
-        /* @__PURE__ */ a("span", { className: "settings-shell__slot-pill__label", children: e }),
-        /* @__PURE__ */ a(
+        /* @__PURE__ */ s("span", { className: "settings-shell__slot-pill__label", children: e }),
+        /* @__PURE__ */ s(
           "button",
           {
             type: "button",
@@ -112,42 +112,42 @@ function Ie({ id: e, onRemove: t }) {
     }
   );
 }
-function De({ value: e, onChange: t }) {
-  const r = be(
-    W(ye, { activationConstraint: { distance: 4 } }),
-    W(Se, { coordinateGetter: Ne })
-  ), n = (i) => {
-    const { active: u, over: l } = i;
-    if (!l || u.id === l.id) return;
-    const s = e.findIndex((c) => c === u.id), o = e.findIndex((c) => c === l.id);
-    s === -1 || o === -1 || t(Ee([...e], s, o));
-  }, d = (i) => {
-    t(e.filter((u) => u !== i));
+function Ie({ value: e, onChange: t }) {
+  const l = ye(
+    G(ve, { activationConstraint: { distance: 4 } }),
+    G(Ce, { coordinateGetter: _e })
+  ), i = (c) => {
+    const { active: u, over: r } = c;
+    if (!r || u.id === r.id) return;
+    const a = e.findIndex((d) => d === u.id), o = e.findIndex((d) => d === r.id);
+    a === -1 || o === -1 || t(Pe([...e], a, o));
+  }, n = (c) => {
+    t(e.filter((u) => u !== c));
   };
   return /* @__PURE__ */ h("div", { className: "settings-shell__field settings-shell__field--slots", "aria-label": "Stack slots", children: [
-    /* @__PURE__ */ a("span", { className: "settings-shell__label", children: "Stack slots" }),
-    /* @__PURE__ */ a(Ce, { sensors: r, collisionDetection: _e, onDragEnd: n, children: /* @__PURE__ */ a(we, { items: [...e], strategy: Pe, children: /* @__PURE__ */ a("ul", { className: "settings-shell__slots-list", role: "list", children: e.map((i) => /* @__PURE__ */ a(Ie, { id: i, onRemove: () => d(i) }, i)) }) }) }),
-    e.length === 0 && /* @__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" })
+    /* @__PURE__ */ s("span", { className: "settings-shell__label", children: "Stack slots" }),
+    /* @__PURE__ */ s(Se, { sensors: l, collisionDetection: Te, onDragEnd: i, children: /* @__PURE__ */ s(we, { items: [...e], strategy: Ne, children: /* @__PURE__ */ s("ul", { className: "settings-shell__slots-list", role: "list", children: e.map((c) => /* @__PURE__ */ s(Le, { id: c, onRemove: () => n(c) }, c)) }) }) }),
+    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 $e({ value: e, onSelect: t }) {
   return /* @__PURE__ */ h("div", { className: "settings-shell__field settings-shell__field--color", role: "group", "aria-label": "Accent color", children: [
-    /* @__PURE__ */ a("span", { className: "settings-shell__label", children: "Accent color" }),
-    /* @__PURE__ */ a("div", { className: "settings-shell__swatch-row", children: Me.map((r) => {
-      const n = e === r;
-      return /* @__PURE__ */ a(
+    /* @__PURE__ */ s("span", { className: "settings-shell__label", children: "Accent color" }),
+    /* @__PURE__ */ s("div", { className: "settings-shell__swatch-row", children: Me.map((l) => {
+      const i = e === l;
+      return /* @__PURE__ */ s(
         "button",
         {
           type: "button",
-          "aria-pressed": n,
-          "aria-label": `Accent ${r}`,
-          className: `settings-shell__swatch${n ? " settings-shell__swatch--active" : ""}`,
-          style: { backgroundColor: r },
-          onClick: () => t(r)
+          "aria-pressed": i,
+          "aria-label": `Accent ${l}`,
+          className: `settings-shell__swatch${i ? " settings-shell__swatch--active" : ""}`,
+          style: { backgroundColor: l },
+          onClick: () => t(l)
         },
-        r
+        l
       );
     }) })
   ] });
@@ -156,37 +156,37 @@ const Re = ["Orders", "Quota", "Unassigned"], Fe = ["threshold", "timeframe", "c
 function gt({
   isOpen: e,
   cardSpan: t,
-  cardLabel: r = "Metric",
-  cardValue: n = "—",
-  previewSlot: d,
-  dimensions: i = Fe,
+  cardLabel: l = "Metric",
+  cardValue: i = "—",
+  previewSlot: n,
+  dimensions: c = Fe,
   initialTab: u,
-  initialValues: l
+  initialValues: r
 }) {
-  const s = k(), o = s?.state.activeTrigger, c = o?.kind === "card-overflow" ? o.cardId : null, p = X(), m = o?.span, v = t ?? m ?? 1, y = i[0] ?? "threshold", [b, _] = B.useState(u ?? y);
+  const a = L(), o = a?.state.activeTrigger, d = o?.kind === "card-overflow" ? o.cardId : null, p = J(), m = o?.span, f = t ?? m ?? 1, C = c[0] ?? "threshold", [b, S] = B.useState(u ?? C);
   B.useEffect(() => {
-    i.includes(b) || _(y);
-  }, [i, b, y]);
-  const g = c != null ? s?.state?.bufferByCard?.[c]?.changes ?? {} : {}, S = typeof g.threshold == "number" ? g.threshold : typeof l?.threshold == "number" ? l.threshold : 80, ie = typeof g.timeframe == "number" ? g.timeframe : typeof l?.timeframe == "number" ? l.timeframe : 30, ce = typeof g.accent == "string" ? g.accent : typeof l?.accent == "string" ? l.accent : null, de = Array.isArray(g.slots) ? g.slots : Array.isArray(l?.slots) ? l.slots : Re, ue = (w) => {
-    c == null || s == null || s.dispatch({ type: "SET_BUFFER_VALUE", cardId: c, key: "threshold", value: Number(w.target.value) });
-  }, pe = (w) => {
-    c == null || s == null || s.dispatch({ type: "SET_BUFFER_VALUE", cardId: c, key: "timeframe", value: Number(w.target.value) });
-  }, me = (w) => {
-    c == null || s == null || s.dispatch({ type: "SET_BUFFER_VALUE", cardId: c, key: "accent", value: w });
-  }, he = (w) => {
-    c == null || s == null || s.dispatch({ type: "SET_BUFFER_VALUE", cardId: c, key: "slots", value: w });
+    c.includes(b) || S(C);
+  }, [c, b, C]);
+  const v = d != null ? a?.state?.bufferByCard?.[d]?.changes ?? {} : {}, y = typeof v.threshold == "number" ? v.threshold : typeof r?.threshold == "number" ? r.threshold : 80, P = typeof v.timeframe == "number" ? v.timeframe : typeof r?.timeframe == "number" ? r.timeframe : 30, ce = typeof v.accent == "string" ? v.accent : typeof r?.accent == "string" ? r.accent : null, de = Array.isArray(v.slots) ? v.slots : Array.isArray(r?.slots) ? r.slots : Re, ue = (_) => {
+    d == null || a == null || a.dispatch({ type: "SET_BUFFER_VALUE", cardId: d, key: "threshold", value: Number(_.target.value) });
+  }, pe = (_) => {
+    d == null || a == null || a.dispatch({ type: "SET_BUFFER_VALUE", cardId: d, key: "timeframe", value: Number(_.target.value) });
+  }, me = (_) => {
+    d == null || a == null || a.dispatch({ type: "SET_BUFFER_VALUE", cardId: d, key: "accent", value: _ });
+  }, he = (_) => {
+    d == null || a == null || a.dispatch({ type: "SET_BUFFER_VALUE", cardId: d, key: "slots", value: _ });
   };
   return /* @__PURE__ */ h("div", { className: "settings-shell", "data-shell": "settings", "aria-hidden": !e, children: [
-    /* @__PURE__ */ a("div", { "aria-hidden": "true", children: /* @__PURE__ */ a(Te, { children: /* @__PURE__ */ a(Oe, { span: v, rotating: !p, children: d ?? /* @__PURE__ */ h(J, { 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: n })
+    /* @__PURE__ */ s("div", { "aria-hidden": "true", children: /* @__PURE__ */ s(Ee, { children: /* @__PURE__ */ s(ke, { span: f, rotating: !p, children: n ?? /* @__PURE__ */ h(Z, { children: [
+      /* @__PURE__ */ s("div", { style: { fontSize: 9, textTransform: "uppercase", letterSpacing: "0.06em", color: "#9ca3af", marginBottom: 6 }, children: l }),
+      /* @__PURE__ */ s("div", { style: { fontSize: 22, fontWeight: 700, color: "#111827", lineHeight: 1 }, children: i })
     ] }) }) }) }),
-    /* @__PURE__ */ a(
+    /* @__PURE__ */ s(
       fe,
       {
-        dimensions: i,
+        dimensions: c,
         activeTab: b,
-        onSelect: _,
+        onSelect: S,
         reduced: p
       }
     ),
@@ -199,16 +199,16 @@ function gt({
         tabIndex: 0,
         className: "settings-shell__tabpanel",
         children: [
-          b === "threshold" && /* @__PURE__ */ a(Le, { value: S, onChange: ue }),
-          b === "timeframe" && /* @__PURE__ */ a(ke, { value: ie, onChange: pe }),
-          b === "slots" && /* @__PURE__ */ a(De, { value: de, onChange: he }),
-          b === "color" && /* @__PURE__ */ a($e, { value: ce, onSelect: me })
+          b === "threshold" && /* @__PURE__ */ s(De, { value: y, onChange: ue }),
+          b === "timeframe" && /* @__PURE__ */ s(Oe, { value: P, onChange: pe }),
+          b === "slots" && /* @__PURE__ */ s(Ie, { value: de, onChange: he }),
+          b === "color" && /* @__PURE__ */ s($e, { value: ce, onSelect: me })
         ]
       }
     )
   ] });
 }
-const te = [
+const ne = [
   "Overbought",
   "What's selling",
   "On track vs plan",
@@ -216,7 +216,7 @@ const te = [
   "Vendor performance",
   "Assortment mix",
   "Customer retention"
-], ne = "Overbought", z = {
+], ae = "Overbought", z = {
   Overbought: {
     headline: "Am I overbought?",
     helper: "Find slow-moving inventory before discount cycles eat margin."
@@ -257,14 +257,16 @@ const se = {
         desc: "Inventory units flagged as overbought relative to forward demand.",
         variants: ["1×1"],
         startHere: !0,
-        isNew: !0
+        isNew: !0,
+        cardType: "standard"
       },
       {
         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"]
+        variants: ["1×1"],
+        cardType: "standard"
       },
       {
         id: "ob-discount-exposure",
@@ -276,7 +278,9 @@ const se = {
           { label: "MTD", value: "$48K" },
           { label: "QTD", value: "$112K" },
           { label: "YTD", value: "$184K" }
-        ]
+        ],
+        cardType: "stacked-group",
+        stackedTimeframes: ["MTD", "QTD", "YTD"]
       }
     ],
     secondary: [
@@ -284,7 +288,8 @@ const se = {
         id: "ob-sku-coverage",
         label: "SKUs over plan",
         value: "342",
-        desc: "SKUs exceeding planned forward cover."
+        desc: "SKUs exceeding planned forward cover.",
+        cardType: "standard"
       },
       {
         id: "ob-vendor-share",
@@ -292,7 +297,10 @@ const se = {
         value: "38%",
         desc: "Share of overbought inventory concentrated in the top vendor.",
         donut: !0,
-        accent: "#7c3aed"
+        accent: "#7c3aed",
+        cardType: "donut",
+        donutValue: 0.38,
+        accentColor: "#7c3aed"
       }
     ]
   },
@@ -303,14 +311,17 @@ const se = {
         label: "Top SKU",
         value: "SKU-9241",
         desc: "Highest-velocity SKU over the trailing 7 days.",
-        startHere: !0
+        startHere: !0,
+        cardType: "name"
       },
       {
         id: "ws-velocity",
         label: "Velocity Δ",
         value: "+12.4%",
         desc: "Rolling 7-day velocity change versus the prior comparable period.",
-        variants: ["1×1"]
+        variants: ["1×1"],
+        cardType: "sparkline",
+        sparklineData: [10, 12, 15, 14, 18, 21, 19, 23, 25, 28]
       },
       {
         id: "ws-sellthrough",
@@ -324,7 +335,9 @@ const se = {
           { label: "LYTD", value: "62%" },
           { label: "7D", value: "74%" }
         ],
-        desc: "Sell-through across multiple windows."
+        desc: "Sell-through across multiple windows.",
+        cardType: "stacked-group",
+        stackedTimeframes: ["MTD", "QTD", "YTD", "LYTD", "7D"]
       }
     ],
     secondary: [
@@ -333,7 +346,9 @@ const se = {
         label: "New arrival lift",
         value: "+8.1%",
         desc: "Velocity boost from new-arrival SKUs versus the assortment mean.",
-        isNew: !0
+        isNew: !0,
+        cardType: "sparkline",
+        sparklineData: [3, 4, 5, 6, 6, 7, 8, 8]
       }
     ]
   },
@@ -346,7 +361,10 @@ const se = {
         desc: "Revenue pace versus plan, period-to-date.",
         donut: !0,
         accent: "#16a34a",
-        startHere: !0
+        startHere: !0,
+        cardType: "donut",
+        donutValue: 1.02,
+        accentColor: "#16a34a"
       },
       {
         id: "pl-units-pace",
@@ -354,7 +372,10 @@ const se = {
         value: "94%",
         desc: "Units pace versus plan, period-to-date.",
         donut: !0,
-        accent: "#f59e0b"
+        accent: "#f59e0b",
+        cardType: "donut",
+        donutValue: 0.94,
+        accentColor: "#f59e0b"
       },
       {
         id: "pl-margin-pace",
@@ -366,87 +387,129 @@ const se = {
           { label: "QTD", value: "37.9%" },
           { label: "YTD", value: "38.1%" }
         ],
-        desc: "Gross margin pace across multiple windows."
+        desc: "Gross margin pace across multiple windows.",
+        cardType: "stacked-group",
+        stackedTimeframes: ["MTD", "QTD", "YTD"]
       },
       // PHASE 17 D1 — agency-revenue port (J1) + commission-economics port (J6)
       {
         id: "agency-sales",
         label: "Sales",
         value: "$892,450",
-        desc: "Agency total sales with trend sparkline"
+        desc: "Agency total sales with trend sparkline",
+        cardType: "sparkline",
+        sparklineData: [620, 640, 680, 700, 740, 760, 790, 820, 850, 892],
+        prefix: "$"
       },
       {
         id: "agency-commission",
         label: "Commissions",
         value: "$133,868",
-        desc: "Total commission earned by the agency"
+        desc: "Total commission earned by the agency",
+        cardType: "standard",
+        prefix: "$"
       },
       {
         id: "agency-growth",
         label: "Sales Growth",
         value: "+18%",
-        desc: "Year-over-year agency sales growth rate"
+        desc: "Year-over-year agency sales growth rate",
+        cardType: "standard",
+        suffix: "%",
+        trend: { value: 18, direction: "up" }
       },
       {
         id: "agency-aov",
         label: "Avg Order",
         value: "$2,340",
-        desc: "Average order value with trend sparkline"
+        desc: "Average order value with trend sparkline",
+        cardType: "sparkline",
+        sparklineData: [2100, 2150, 2200, 2180, 2250, 2280, 2300, 2320, 2335, 2340],
+        prefix: "$"
       },
       {
         id: "agency-conversion",
         label: "Conversion",
         value: "68%",
-        desc: "Order completion rate vs cancellations"
+        desc: "Order completion rate vs cancellations",
+        cardType: "donut",
+        donutValue: 0.68,
+        accentColor: "#10b981",
+        suffix: "%"
       },
       {
         id: "agency-revenue-compact",
         label: "Total Revenue",
         value: "$892,450",
-        desc: "Agency revenue with sparkline trend"
+        desc: "Agency revenue with sparkline trend",
+        cardType: "sparkline",
+        sparklineData: [620, 660, 700, 740, 780, 820, 860, 892],
+        prefix: "$"
       },
       // degrade-to-standard: stacked-group with MTD segment shown at span-1
       {
         id: "agency-sales-stacked",
         label: "Sales",
         value: "$892,450",
-        desc: "Agency sales across three timeframes at a glance (MTD shown)"
+        desc: "Agency sales across three timeframes at a glance (MTD shown)",
+        cardType: "stacked-group",
+        stackedTimeframes: ["MTD", "QTD", "YTD"]
       },
       {
         id: "agency-aov-stacked",
         label: "Avg Order",
         value: "$2,340",
-        desc: "Average order value across three timeframes (MTD shown)"
+        desc: "Average order value across three timeframes (MTD shown)",
+        cardType: "stacked-group",
+        stackedTimeframes: ["MTD", "QTD", "YTD"]
       },
       {
         id: "agency-yoy-versus",
         label: "YoY Comparison",
         value: "$892K",
-        desc: "TY vs LY sales side-by-side"
+        desc: "TY vs LY sales side-by-side",
+        cardType: "versus",
+        comparison: {
+          current: { value: "$892K", label: "This year" },
+          prior: { value: "$724K", label: "Last year" }
+        }
       },
       {
         id: "agency-revenue-by-mfr",
         label: "Mfr Revenue",
         value: "$892K",
-        desc: "Revenue mix across top manufacturers"
+        desc: "Revenue mix across top manufacturers",
+        cardType: "segmented",
+        segments: [
+          { label: "A", value: 35, color: "#7c3aed" },
+          { label: "B", value: 28, color: "#1d6fd8" },
+          { label: "C", value: 22, color: "#10b981" },
+          { label: "D", value: 15, color: "#f59e0b" }
+        ]
       },
       {
         id: "agency-outstanding",
         label: "Outstanding",
         value: "$24,500",
-        desc: "Unpaid order balance across all accounts"
+        desc: "Unpaid order balance across all accounts",
+        cardType: "standard",
+        prefix: "$"
       },
       {
         id: "agency-commission-rate",
         label: "Commission",
         value: "8.4%",
-        desc: "Effective commission rate %"
+        desc: "Effective commission rate %",
+        cardType: "standard",
+        suffix: "%"
       },
       {
         id: "agency-commission-aging",
         label: "Commission Aging",
         value: "$24K",
-        desc: "Unpaid commission aging by buckets"
+        desc: "Unpaid commission aging by buckets",
+        cardType: "bars",
+        barData: [4, 8, 7, 5]
       }
     ]
   },
@@ -457,52 +520,70 @@ const se = {
         label: "On-time rate",
         value: "94.2%",
         desc: "Share of orders shipped within SLA.",
-        startHere: !0
+        startHere: !0,
+        cardType: "donut",
+        donutValue: 0.942,
+        accentColor: "#16a34a",
+        suffix: "%"
       },
       {
         id: "ot-at-risk",
         label: "At-risk shipments",
         value: "18",
         desc: "Open shipments projected to miss SLA.",
-        isNew: !0
+        isNew: !0,
+        cardType: "highlight",
+        highlightColor: "#f59e0b"
       },
       // PHASE 17 D1 — agency-order-flow port (J5)
       {
         id: "agency-activity",
         label: "Orders",
         value: "47 Orders",
-        desc: "Daily team order count with bar chart"
+        desc: "Daily team order count with bar chart",
+        cardType: "bars",
+        barData: [12, 18, 15, 22, 19, 25, 28]
       },
       {
         id: "agency-unassigned-orders",
         label: "Unassigned",
         value: "0",
-        desc: "Orders awaiting salesperson assignment"
+        desc: "Orders awaiting salesperson assignment",
+        cardType: "standard"
       },
       {
         id: "agency-orders-compact",
         label: "Order Count",
         value: "156",
-        desc: "Total order count with bar chart trend"
+        desc: "Total order count with bar chart trend",
+        cardType: "bars",
+        barData: [18, 22, 19, 24, 26, 23, 28]
       },
       // degrade-to-standard: stacked-group with MTD segment shown at span-1
       {
         id: "agency-orders-stacked",
         label: "Orders",
         value: "156",
-        desc: "Order count across three timeframes at a glance (MTD shown)"
+        desc: "Order count across three timeframes at a glance (MTD shown)",
+        cardType: "stacked-group",
+        stackedTimeframes: ["MTD", "QTD", "YTD"]
       },
       {
         id: "agency-order-pipeline-value",
         label: "Pipeline Value",
         value: "$284,500",
-        desc: "Open + transmitted order $ pipeline"
+        desc: "Open + transmitted order $ pipeline",
+        cardType: "standard",
+        prefix: "$"
       },
       {
         id: "agency-cancel-rate",
         label: "Cancel Rate",
         value: "4.2%",
-        desc: "Order cancel-rate percentage (warn-tinted highlight)"
+        desc: "Order cancel-rate percentage (warn-tinted highlight)",
+        cardType: "highlight",
+        highlightColor: "#f59e0b",
+        suffix: "%"
       }
     ]
   },
@@ -513,7 +594,8 @@ const se = {
         label: "Top vendor",
         value: "Acme Co.",
         desc: "Highest sell-through vendor over the trailing 30 days.",
-        startHere: !0
+        startHere: !0,
+        cardType: "name"
       },
       {
         id: "vp-fill-rate",
@@ -521,20 +603,32 @@ const se = {
         value: "97.1%",
         desc: "Vendor fill rate against placed orders.",
         donut: !0,
-        accent: "#2563eb"
+        accent: "#2563eb",
+        cardType: "donut",
+        donutValue: 0.971,
+        accentColor: "#2563eb",
+        suffix: "%"
       },
       // PHASE 17 D1 — agency-brand-portfolio port (J3)
       {
         id: "agency-mfr-mix",
         label: "Mfr Mix",
         value: "$892K",
-        desc: "Revenue mix by manufacturer (segmented bar)"
+        desc: "Revenue mix by manufacturer (segmented bar)",
+        cardType: "segmented",
+        segments: [
+          { label: "A", value: 35, color: "#7c3aed" },
+          { label: "B", value: 28, color: "#1d6fd8" },
+          { label: "C", value: 22, color: "#10b981" },
+          { label: "D", value: 15, color: "#f59e0b" }
+        ]
       },
       {
         id: "agency-mfr-new-line",
         label: "New Mfrs",
         value: "3",
-        desc: "New manufacturer count for the period"
+        desc: "New manufacturer count for the period",
+        cardType: "standard"
       }
     ]
   },
@@ -551,7 +645,13 @@ const se = {
           { label: "Test", value: "15%" }
         ],
         desc: "Assortment mix across brand tiers.",
-        startHere: !0
+        startHere: !0,
+        cardType: "segmented",
+        segments: [
+          { label: "Core", value: 58, color: "#7c3aed" },
+          { label: "Growth", value: 27, color: "#10b981" },
+          { label: "Test", value: 15, color: "#f59e0b" }
+        ]
       }
     ]
   },
@@ -563,83 +663,96 @@ const se = {
         value: "62.4%",
         desc: "Share of buyers placing two or more orders in the period.",
         startHere: !0,
-        isNew: !0
+        isNew: !0,
+        cardType: "donut",
+        donutValue: 0.624,
+        accentColor: "#1d6fd8",
+        suffix: "%"
       },
       {
         id: "cr-lapsed",
         label: "Lapsed accounts",
         value: "47",
-        desc: "Accounts with zero orders in the last 90 days."
+        desc: "Accounts with zero orders in the last 90 days.",
+        cardType: "highlight",
+        highlightColor: "#f59e0b"
       },
       // PHASE 17 D1 — agency-account-coverage port (J4)
       {
         id: "agency-new-accounts",
         label: "New Accounts",
         value: "12",
-        desc: "New customer accounts opened this period"
+        desc: "New customer accounts opened this period",
+        cardType: "standard"
       },
       {
         id: "agency-customers-compact",
         label: "Customers",
         value: "287",
-        desc: "Active customer count with bar chart trend"
+        desc: "Active customer count with bar chart trend",
+        cardType: "bars",
+        barData: [240, 250, 260, 270, 275, 280, 287]
       },
       {
         id: "agency-inactive-accounts",
         label: "Inactive Act",
         value: "5",
-        desc: "Inactive customer-account count (warn-tinted)"
+        desc: "Inactive customer-account count (warn-tinted)",
+        cardType: "highlight",
+        highlightColor: "#f59e0b"
       },
       {
         id: "agency-account-churn",
         label: "Account Churn",
         value: "8%",
-        desc: "Customer churn rate (LY-active not TY-active)"
+        desc: "Customer churn rate (LY-active not TY-active)",
+        cardType: "standard",
+        suffix: "%"
       }
     ]
   }
 };
-function ae({
+function re({
   lenses: e,
   activeLens: t,
-  onLensChange: r,
-  variant: n = "pills",
-  lensMeta: d = z
+  onLensChange: l,
+  variant: i = "pills",
+  lensMeta: n = z
 }) {
-  return n === "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, l = d[i], s = ["cat-pill"];
-    return u && s.push("active"), /* @__PURE__ */ h(
+  return i === "pills" ? /* @__PURE__ */ s("div", { className: "cat-pills-wrap", children: /* @__PURE__ */ s("div", { className: "cat-pills", role: "tablist", "aria-label": "Metric lenses", children: e.map((c) => {
+    const u = c === t, r = n[c], a = ["cat-pill"];
+    return u && a.push("active"), /* @__PURE__ */ h(
       "button",
       {
         type: "button",
         role: "tab",
         "aria-selected": u,
-        className: s.join(" "),
-        "data-lens": i,
+        className: a.join(" "),
+        "data-lens": c,
         onClick: () => {
-          u || r(i);
+          u || l(c);
         },
         children: [
-          i,
-          l?.beta && /* @__PURE__ */ a("span", { className: "cat-pill-beta", "aria-label": "Beta", children: "BETA" })
+          c,
+          r?.beta && /* @__PURE__ */ s("span", { className: "cat-pill-beta", "aria-label": "Beta", children: "BETA" })
         ]
       },
-      i
+      c
     );
-  }) }) }) : /* @__PURE__ */ a(Ue, { lenses: e, activeLens: t, onLensChange: r });
+  }) }) }) : /* @__PURE__ */ s(Ue, { lenses: e, activeLens: t, onLensChange: l });
 }
 function Ue({
   lenses: e,
   activeLens: t,
-  onLensChange: r
+  onLensChange: l
 }) {
-  const [n, d] = C(!1), i = I(null), u = () => {
-    i.current != null && (window.clearTimeout(i.current), i.current = null);
-  }, l = () => {
-    u(), i.current = window.setTimeout(() => d(!1), 100);
-  }, s = e.filter((o) => o !== t);
-  return /* @__PURE__ */ a("div", { className: "cat-segmented-wrap", children: /* @__PURE__ */ h("div", { className: "cat-segmented", children: [
-    /* @__PURE__ */ a(
+  const [i, n] = T(!1), c = I(null), u = () => {
+    c.current != null && (window.clearTimeout(c.current), c.current = null);
+  }, r = () => {
+    u(), c.current = window.setTimeout(() => n(!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",
       {
         type: "button",
@@ -654,26 +767,26 @@ function Ue({
       {
         className: "cat-seg-more",
         onMouseEnter: () => {
-          u(), d(!0);
+          u(), n(!0);
         },
-        onMouseLeave: l,
+        onMouseLeave: r,
         children: [
-          /* @__PURE__ */ a("button", { type: "button", className: "cat-seg cat-seg-more-btn", "aria-haspopup": "menu", "aria-expanded": n, children: "More ▾" }),
-          n && /* @__PURE__ */ a(
+          /* @__PURE__ */ s("button", { type: "button", className: "cat-seg cat-seg-more-btn", "aria-haspopup": "menu", "aria-expanded": i, children: "More ▾" }),
+          i && /* @__PURE__ */ s(
             "div",
             {
               className: "cat-seg-overflow",
               role: "menu",
               onMouseEnter: u,
-              onMouseLeave: l,
-              children: s.map((o) => /* @__PURE__ */ a(
+              onMouseLeave: r,
+              children: a.map((o) => /* @__PURE__ */ s(
                 "button",
                 {
                   type: "button",
                   "data-lens": o,
                   role: "menuitem",
                   onClick: () => {
-                    r(o), d(!1);
+                    l(o), n(!1);
                   },
                   children: o
                 },
@@ -686,86 +799,87 @@ function Ue({
     )
   ] }) });
 }
-function U({ tiles: e, selectedTileId: t, onSelectTile: r }) {
-  return /* @__PURE__ */ a("div", { className: "cat-tiles", children: e.map((n) => {
-    const d = n.id === t, i = n.subStats != null && n.subStats.length > 0;
-    let u = null;
-    i ? n.subStats.length === 5 ? u = "span-5" : n.subStats.length === 3 ? u = "span-3" : u = "span-2" : n.stack === !0 && (u = "span-2");
-    const l = ["cat-tile"];
-    u && l.push(u), d && l.push("selected"), n.isNew && l.push("is-new"), n.startHere && l.push("start-here"), n.donut && l.push("has-donut");
-    const s = 1;
-    let o = 0.7;
+function V({ tiles: e, selectedTileId: t, onSelectTile: l, renderTile: i }) {
+  return /* @__PURE__ */ s("div", { className: "cat-tiles", children: e.map((n) => {
+    const c = n.id === t, u = n.subStats != null && n.subStats.length > 0;
+    let r = null;
+    u ? n.subStats.length === 5 ? r = "span-5" : n.subStats.length === 3 ? r = "span-3" : r = "span-2" : n.stack === !0 && (r = "span-2");
+    const a = ["cat-tile"];
+    r && a.push(r), c && a.push("selected"), n.isNew && a.push("is-new"), n.startHere && a.push("start-here"), n.donut && a.push("has-donut");
+    const o = 1;
+    let d = 0.7;
     if (n.donut) {
-      const c = /([\d.]+)\s*%/.exec(n.value);
-      if (c) {
-        const p = parseFloat(c[1]);
-        Number.isFinite(p) && (o = Math.max(0, Math.min(1, p / 100)));
+      const p = /([\d.]+)\s*%/.exec(n.value);
+      if (p) {
+        const m = parseFloat(p[1]);
+        Number.isFinite(m) && (d = Math.max(0, Math.min(1, m / 100)));
       }
     }
     return /* @__PURE__ */ h(
       "button",
       {
         type: "button",
-        className: l.join(" "),
+        className: a.join(" "),
         "data-metric": n.id,
         "data-desc": n.desc,
-        "data-col-span": String(s),
+        "data-col-span": String(o),
         "data-donut": n.donut ? "true" : void 0,
         "data-accent": n.accent,
-        "aria-pressed": d,
-        onClick: () => r(n.id, n.desc),
+        "aria-pressed": c,
+        onClick: () => l(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" }),
-          /* @__PURE__ */ a(
+          n.startHere && /* @__PURE__ */ s("span", { className: "cat-tile-start-here", "aria-hidden": "true", children: "START HERE" }),
+          i ? i(n) : /* @__PURE__ */ s(
             "div",
             {
               className: "cat-tile-primitive-wrapper gloss-metric-card",
+              "data-col-span": "1",
               style: { pointerEvents: "none", width: "100%", height: "100%" },
               "aria-hidden": "true",
-              children: n.donut ? /* @__PURE__ */ a(
-                G,
+              children: n.donut ? /* @__PURE__ */ s(
+                Q,
                 {
                   variant: "donut",
                   label: n.label,
                   value: n.value,
-                  donutValue: o,
+                  donutValue: d,
                   donutMax: 1,
                   accentColor: n.accent,
-                  colSpan: s
+                  colSpan: o
                 }
-              ) : /* @__PURE__ */ a(
-                G,
+              ) : /* @__PURE__ */ s(
+                Q,
                 {
                   variant: "standard",
                   label: n.label,
                   value: n.value,
-                  colSpan: s
+                  colSpan: o
                 }
               )
             }
           ),
-          n.variants && n.variants.length > 0 && /* @__PURE__ */ a("span", { className: "cat-tile-variants", "aria-hidden": "true", children: n.variants.map((c) => /* @__PURE__ */ a("span", { children: c }, c)) }),
-          n.isNew && /* @__PURE__ */ a("span", { className: "cat-tile-new-dot", "aria-hidden": "true" })
+          n.variants && n.variants.length > 0 && /* @__PURE__ */ s("span", { className: "cat-tile-variants", "aria-hidden": "true", children: n.variants.map((p) => /* @__PURE__ */ s("span", { children: p }, p)) }),
+          n.isNew && /* @__PURE__ */ s("span", { className: "cat-tile-new-dot", "aria-hidden": "true" })
         ]
       },
       n.id
     );
   }) });
 }
-const V = Z(null);
-function He() {
-  return ee(V);
+const Y = ee(null);
+function Ve() {
+  return te(Y);
 }
-function ze({ mode: e, dispatch: t }) {
-  const r = He();
-  if (r == null && e == null) return null;
-  const n = r?.mode ?? e ?? "add", d = r?.selectedTileId ?? null, i = r?.description ?? null, u = d == null;
+function He({ mode: e, dispatch: t }) {
+  const l = Ve();
+  if (l == null && e == null) return null;
+  const i = l?.mode ?? e ?? "add", n = l?.selectedTileId ?? null, c = l?.description ?? null, u = n == null;
   return /* @__PURE__ */ h("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__ */ s("div", { className: "cat-description", id: "cat-desc", children: c ?? /* @__PURE__ */ s("em", { children: "Tap a metric to see its description" }) }),
     /* @__PURE__ */ h("div", { style: { display: "flex", padding: "10px 14px", gap: 8 }, children: [
-      /* @__PURE__ */ a("div", { className: "spacer", style: { flex: 1 } }),
-      /* @__PURE__ */ a(
+      /* @__PURE__ */ s("div", { className: "spacer", style: { flex: 1 } }),
+      /* @__PURE__ */ s(
         "button",
         {
           id: "btn-cat-cancel",
@@ -775,7 +889,7 @@ function ze({ mode: e, dispatch: t }) {
           children: "Cancel"
         }
       ),
-      n === "add" && /* @__PURE__ */ a(
+      i === "add" && /* @__PURE__ */ s(
         "button",
         {
           id: "btn-cat-add",
@@ -786,7 +900,7 @@ function ze({ mode: e, dispatch: t }) {
           children: "Add metric"
         }
       ),
-      n === "replace" && /* @__PURE__ */ a(
+      i === "replace" && /* @__PURE__ */ s(
         "button",
         {
           id: "btn-cat-replace",
@@ -802,163 +916,168 @@ function ze({ mode: e, dispatch: t }) {
 }
 function q(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;
+  const l = t.toLowerCase();
+  if (e.label.toLowerCase().includes(l) || e.value.toLowerCase().includes(l)) return !0;
   if (e.subStats) {
-    for (const n of e.subStats)
-      if (n.label.toLowerCase().includes(r) || n.value.toLowerCase().includes(r)) return !0;
+    for (const i of e.subStats)
+      if (i.label.toLowerCase().includes(l) || i.value.toLowerCase().includes(l)) return !0;
   }
   return !1;
 }
-function vt({
+function bt({
   isOpen: e,
-  lenses: t = te,
-  defaultLens: r = ne,
-  tilesByLens: n = se,
-  lensMeta: d = z,
-  footerSlot: i
+  lenses: t = ne,
+  defaultLens: l = ae,
+  tilesByLens: i = se,
+  lensMeta: n = z,
+  footerSlot: c,
+  renderTile: u
 }) {
-  const [u, l] = C(r), [s, o] = C(null), [c, p] = C(null), [m, v] = C(""), y = n[u] ?? { primary: [] }, b = d[u], _ = Y(
-    () => y.primary.filter((g) => q(g, m)),
-    [y.primary, m]
-  ), N = Y(
-    () => (y.secondary ?? []).filter((g) => q(g, m)),
-    [y.secondary, m]
+  const [r, a] = T(l), [o, d] = T(null), [p, m] = T(null), [f, C] = T(""), b = i[r] ?? { primary: [] }, S = n[r], w = W(
+    () => b.primary.filter((y) => q(y, f)),
+    [b.primary, f]
+  ), v = W(
+    () => (b.secondary ?? []).filter((y) => q(y, f)),
+    [b.secondary, f]
   );
   return /* @__PURE__ */ h(
-    V.Provider,
+    Y.Provider,
     {
-      value: { mode: "add", selectedTileId: s, description: c },
+      value: { mode: "add", selectedTileId: o, description: p },
       children: [
         /* @__PURE__ */ h("div", { "data-shell": "catalog-add", "aria-hidden": !e, children: [
-          /* @__PURE__ */ a("div", { className: "cat-search", children: /* @__PURE__ */ a(
+          /* @__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) => v(g.target.value)
+              value: f,
+              onChange: (y) => C(y.target.value)
             }
           ) }),
-          /* @__PURE__ */ a(
-            ae,
+          /* @__PURE__ */ s(
+            re,
             {
               lenses: t,
-              activeLens: u,
-              lensMeta: d,
+              activeLens: r,
+              lensMeta: n,
               variant: "pills",
-              onLensChange: (g) => {
-                l(g), o(null), p(null), v("");
+              onLensChange: (y) => {
+                a(y), d(null), m(null), C("");
               }
             }
           ),
-          b && /* @__PURE__ */ h("div", { className: "cat-lens-meta", children: [
-            /* @__PURE__ */ a("h3", { className: "cat-lens-headline", children: b.headline }),
-            /* @__PURE__ */ a("p", { className: "cat-lens-helper", children: b.helper })
+          S && /* @__PURE__ */ h("div", { className: "cat-lens-meta", children: [
+            /* @__PURE__ */ s("h3", { className: "cat-lens-headline", children: S.headline }),
+            /* @__PURE__ */ s("p", { className: "cat-lens-helper", children: S.helper })
           ] }),
-          /* @__PURE__ */ a(
-            U,
+          /* @__PURE__ */ s(
+            V,
             {
-              tiles: _,
-              selectedTileId: s,
-              onSelectTile: (g, S) => {
-                o(g), p(S);
-              }
+              tiles: w,
+              selectedTileId: o,
+              onSelectTile: (y, P) => {
+                d(y), m(P);
+              },
+              renderTile: u
             }
           ),
-          N.length > 0 && /* @__PURE__ */ h("div", { className: "cat-more-in-lens", children: [
-            /* @__PURE__ */ a("div", { className: "cat-more-in-lens__heading", children: "MORE IN THIS LENS" }),
-            /* @__PURE__ */ a(
-              U,
+          v.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(
+              V,
               {
-                tiles: N,
-                selectedTileId: s,
-                onSelectTile: (g, S) => {
-                  o(g), p(S);
-                }
+                tiles: v,
+                selectedTileId: o,
+                onSelectTile: (y, P) => {
+                  d(y), m(P);
+                },
+                renderTile: u
               }
             )
           ] }),
-          _.length === 0 && N.length === 0 && m.length > 0 && /* @__PURE__ */ h("div", { className: "cat-empty", children: [
+          w.length === 0 && v.length === 0 && f.length > 0 && /* @__PURE__ */ h("div", { className: "cat-empty", children: [
             'No metrics match "',
-            m,
+            f,
             '".'
           ] })
         ] }),
-        i
+        c
       ]
     }
   );
 }
-function bt({
+function yt({
   isOpen: e,
   replacingLabel: t,
-  lenses: r = te,
-  defaultLens: n = ne,
-  tilesByLens: d = se,
-  footerSlot: i
+  lenses: l = ne,
+  defaultLens: i = ae,
+  tilesByLens: n = se,
+  footerSlot: c,
+  renderTile: u
 }) {
-  const [u, l] = C(n), [s, o] = C(null), [c, p] = C(null), m = d[u] ?? { primary: [] }, v = [...m.primary, ...m.secondary ?? []];
+  const [r, a] = T(i), [o, d] = T(null), [p, m] = T(null), f = n[r] ?? { primary: [] }, C = [...f.primary, ...f.secondary ?? []];
   return /* @__PURE__ */ h(
-    V.Provider,
+    Y.Provider,
     {
-      value: { mode: "replace", selectedTileId: s, description: c },
+      value: { mode: "replace", selectedTileId: o, description: p },
       children: [
         /* @__PURE__ */ h("div", { "data-shell": "catalog-replace", "aria-hidden": !e, children: [
           t && /* @__PURE__ */ h("p", { className: "cat-subtitle", children: [
             "replacing ",
             t
           ] }),
-          /* @__PURE__ */ a(
-            ae,
+          /* @__PURE__ */ s(
+            re,
             {
-              lenses: r,
-              activeLens: u,
-              onLensChange: (y) => {
-                l(y), o(null), p(null);
+              lenses: l,
+              activeLens: r,
+              onLensChange: (b) => {
+                a(b), d(null), m(null);
               }
             }
           ),
-          /* @__PURE__ */ a(
-            U,
+          /* @__PURE__ */ s(
+            V,
             {
-              tiles: v,
-              selectedTileId: s,
-              onSelectTile: (y, b) => {
-                o(y), p(b);
-              }
+              tiles: C,
+              selectedTileId: o,
+              onSelectTile: (b, S) => {
+                d(b), m(S);
+              },
+              renderTile: u
             }
           )
         ] }),
-        i
+        c
       ]
     }
   );
 }
-const re = Z(null);
-function le() {
-  return ee(re);
+const le = ee(null);
+function oe() {
+  return te(le);
 }
-function Ve(e = {}) {
-  const r = le()?.setPages;
+function ze(e = {}) {
+  const l = oe()?.setPages;
   return /* @__PURE__ */ h(
     "div",
     {
       className: "panel-footer pm",
       style: { display: "flex", justifyContent: "flex-end", padding: "10px 14px" },
       children: [
-        /* @__PURE__ */ a("div", { className: "spacer", style: { flex: 1 } }),
-        /* @__PURE__ */ a(
+        /* @__PURE__ */ s("div", { className: "spacer", style: { flex: 1 } }),
+        /* @__PURE__ */ s(
           "button",
           {
             id: "btn-new-page",
             type: "button",
             className: "btn btn-primary",
             onClick: () => {
-              r && r((n) => [
-                ...n,
+              l && l((i) => [
+                ...i,
                 { id: `new-${Date.now()}`, name: "Untitled", active: !1 }
               ]);
             },
@@ -969,61 +1088,61 @@ function Ve(e = {}) {
     }
   );
 }
-function Ke({ page: e, onRename: t, onKebab: r, onDragStart: n }) {
-  const d = le(), [i, u] = C(!1), l = I(null);
+function Ye({ page: e, onRename: t, onKebab: l, onDragStart: i }) {
+  const n = oe(), [c, u] = T(!1), r = I(null);
   A(() => {
-    if (!i) return;
-    const m = (v) => {
-      l.current && (l.current.contains(v.target) || u(!1));
+    if (!c) return;
+    const m = (f) => {
+      r.current && (r.current.contains(f.target) || u(!1));
     };
     return document.addEventListener("mousedown", m, !0), () => document.removeEventListener("mousedown", m, !0);
-  }, [i]);
-  const s = () => {
+  }, [c]);
+  const a = () => {
     if (u(!1), t) return t(e.id);
-    if (!d?.renamePage) return;
+    if (!n?.renamePage) return;
     const m = window.prompt("Rename page", e.name);
-    m != null && m.trim().length > 0 && d.renamePage(e.id, m.trim());
+    m != null && m.trim().length > 0 && n.renamePage(e.id, m.trim());
   }, o = () => {
-    u(!1), d?.duplicatePage?.(e.id);
-  }, c = () => {
-    u(!1), !e.active && d?.deletePage?.(e.id);
+    u(!1), n?.duplicatePage?.(e.id);
+  }, d = () => {
+    u(!1), !e.active && n?.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__ */ a(
+  return e.active && p.push("active"), /* @__PURE__ */ h("div", { ref: r, className: p.join(" "), "data-page-id": e.id, role: "listitem", children: [
+    /* @__PURE__ */ s(
       "div",
       {
         className: "pm-handle",
         "aria-hidden": "true",
-        onMouseDown: () => n?.(e.id),
+        onMouseDown: () => i?.(e.id),
         children: "⋮⋮"
       }
     ),
-    /* @__PURE__ */ a("div", { className: "pm-name", children: e.name }),
-    /* @__PURE__ */ a(
+    /* @__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,
+        "aria-expanded": c,
         onClick: (m) => {
-          if (m.stopPropagation(), r) return r(e.id);
-          u((v) => !v);
+          if (m.stopPropagation(), l) return l(e.id);
+          u((f) => !f);
         },
         children: "⋯"
       }
     ),
-    i && /* @__PURE__ */ h("div", { className: "pm-kebab-menu", role: "menu", "data-page-id": e.id, children: [
-      /* @__PURE__ */ a("button", { type: "button", role: "menuitem", className: "pm-kebab-menu__item", onClick: s, children: "Rename" }),
-      /* @__PURE__ */ a("button", { type: "button", role: "menuitem", className: "pm-kebab-menu__item", onClick: o, children: "Duplicate" }),
-      /* @__PURE__ */ a(
+    c && /* @__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: c,
+          onClick: d,
           "aria-disabled": e.active,
           children: "Delete"
         }
@@ -1031,45 +1150,45 @@ function Ke({ page: e, onRename: t, onKebab: r, onDragStart: n }) {
     ] })
   ] });
 }
-const Be = [
+const Ke = [
   { 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 yt({
+function vt({
   isOpen: e,
-  pages: t = Be,
-  footerSlot: r
+  pages: t = Ke,
+  footerSlot: l
 }) {
-  const [n, d] = C(() => [...t]), i = E((s, o) => {
-    d((c) => c.map((p) => p.id === s ? { ...p, name: o } : p));
-  }, []), u = E((s) => {
-    d((o) => {
-      const c = o.find((v) => v.id === s);
-      if (!c) return o;
+  const [i, n] = T(() => [...t]), c = x((a, o) => {
+    n((d) => d.map((p) => p.id === a ? { ...p, name: o } : p));
+  }, []), u = x((a) => {
+    n((o) => {
+      const d = o.find((f) => f.id === a);
+      if (!d) return o;
       const p = {
-        id: `${c.id}-copy-${Date.now()}`,
-        name: `${c.name} copy`,
+        id: `${d.id}-copy-${Date.now()}`,
+        name: `${d.name} copy`,
         active: !1
-      }, m = o.findIndex((v) => v.id === s);
+      }, m = o.findIndex((f) => f.id === a);
       return [...o.slice(0, m + 1), p, ...o.slice(m + 1)];
     });
-  }, []), l = E((s) => {
-    d((o) => o.filter((c) => c.id !== s));
+  }, []), r = x((a) => {
+    n((o) => o.filter((d) => d.id !== a));
   }, []);
-  return /* @__PURE__ */ a(re.Provider, { value: { pages: n, setPages: d, renamePage: i, duplicatePage: u, deletePage: l }, children: /* @__PURE__ */ h("div", { "data-shell": "page-management", "aria-hidden": !e, children: [
-    /* @__PURE__ */ a("div", { className: "pm-list", role: "list", children: n.map((s) => /* @__PURE__ */ a(Ke, { page: s }, s.id)) }),
-    r != null && /* @__PURE__ */ a("div", { className: "pm-footer-pin", children: r })
+  return /* @__PURE__ */ s(le.Provider, { value: { pages: i, setPages: n, renamePage: c, duplicatePage: u, deletePage: r }, children: /* @__PURE__ */ h("div", { "data-shell": "page-management", "aria-hidden": !e, children: [
+    /* @__PURE__ */ s("div", { className: "pm-list", role: "list", children: i.map((a) => /* @__PURE__ */ s(Ye, { page: a }, a.id)) }),
+    l != null && /* @__PURE__ */ s("div", { className: "pm-footer-pin", children: l })
   ] }) });
 }
-const St = {
+const Ct = {
   SETTINGS: "settings",
   CATALOG_ADD: "catalog-add",
   CATALOG_REPLACE: "catalog-replace",
   PAGE_MGMT: "page-management",
   NOTIFICATION_CENTER: "notification-center"
-}, Ye = {
+}, Be = {
   position: "fixed",
   inset: 0,
   pointerEvents: "none",
@@ -1083,80 +1202,80 @@ const St = {
   pointerEvents: "none",
   background: "rgba(0, 0, 0, 0.04)"
 };
-function Ct() {
-  const { state: e, dispatch: t, getCloseLog: r } = ge();
+function St() {
+  const { state: e, dispatch: t, getCloseLog: l } = ge();
   A(() => {
     if (e.activePanelId == null) return;
-    function i(u) {
+    function c(u) {
       u.key === "Escape" && t({ type: "CLOSE_PANEL", reason: "escape-key" });
     }
-    return document.addEventListener("keydown", i), () => document.removeEventListener("keydown", i);
+    return document.addEventListener("keydown", c), () => document.removeEventListener("keydown", c);
   }, [e.activePanelId, t]);
-  const n = I(e);
-  ve(() => {
-    n.current = e;
+  const i = I(e);
+  be(() => {
+    i.current = e;
   }), A(() => {
     if (process.env.NODE_ENV === "production") return;
-    const i = window;
-    return i.__panelsHostHandle && console.warn("[panels] multiple PanelHost/PanelHostShell instances mounted; dev handle is unreliable"), i.__panelsHostHandle = {
+    const c = window;
+    return c.__panelsHostHandle && console.warn("[panels] multiple PanelHost/PanelHostShell instances mounted; dev handle is unreliable"), c.__panelsHostHandle = {
       dispatch: t,
-      getState: () => n.current,
-      getCloseLog: r
+      getState: () => i.current,
+      getCloseLog: l
     }, () => {
-      i.__panelsHostHandle?.dispatch === t && delete window.__panelsHostHandle;
+      c.__panelsHostHandle?.dispatch === t && delete window.__panelsHostHandle;
     };
-  }, [t, r]);
-  const d = E(() => {
+  }, [t, l]);
+  const n = x(() => {
     t({ type: "CLOSE_PANEL", reason: "nav-escape-hatch" });
   }, [t]);
-  return /* @__PURE__ */ a("div", { "data-panel-host": "true", style: Ye, children: e.activePanelId != null && /* @__PURE__ */ a(
+  return /* @__PURE__ */ s("div", { "data-panel-host": "true", style: Be, children: e.activePanelId != null && /* @__PURE__ */ s(
     "div",
     {
       "data-panel-scrim": "true",
       style: We,
-      onClick: d
+      onClick: n
     }
   ) });
 }
 const Ge = 700;
-function qe(e) {
-  const [t, r] = C(null), n = I(null);
+function Qe(e) {
+  const [t, l] = T(null), i = I(null);
   return A(() => {
     if (e != null) {
-      n.current != null && (clearTimeout(n.current), n.current = null), r(null);
+      i.current != null && (clearTimeout(i.current), i.current = null), l(null);
       return;
     }
-    return r((d) => d), n.current = setTimeout(() => {
-      r(null), n.current = null;
+    return l((n) => n), i.current = setTimeout(() => {
+      l(null), i.current = null;
     }, Ge), () => {
-      n.current != null && (clearTimeout(n.current), n.current = null);
+      i.current != null && (clearTimeout(i.current), i.current = null);
     };
   }, [e]), A(() => {
-    e != null && r(e);
+    e != null && l(e);
   }, [e]), e != null ? { panelId: e, isOpen: !0 } : t != null ? { panelId: t, isOpen: !1 } : { panelId: null, isOpen: !1 };
 }
-function _t({ panelComponents: e, children: t }) {
-  const r = k();
-  if (r == null) return null;
-  const { state: n, dispatch: d } = r, i = qe(n.activePanelId);
-  if (i.panelId == null) return null;
-  const u = i.panelId, l = i.isOpen, s = e?.[u];
-  if (s == null && t == null)
+function Tt({ panelComponents: e, children: t }) {
+  const l = L();
+  if (l == null) return null;
+  const { state: i, dispatch: n } = l, c = Qe(i.activePanelId);
+  if (c.panelId == null) return null;
+  const u = c.panelId, r = c.isOpen, a = e?.[u];
+  if (a == null && t == null)
     return process.env.NODE_ENV !== "production" && console.error(
       "[panels] No panel component registered for activePanelId:",
       u
     ), null;
   if (u === "settings") {
-    const o = n.isDirty, c = n.activeTrigger, p = c?.kind === "card-overflow" ? c.cardId : null;
-    return /* @__PURE__ */ a(x, { isOpen: l, children: /* @__PURE__ */ a(
-      T,
+    const o = i.isDirty, d = i.activeTrigger, p = d?.kind === "card-overflow" ? d.cardId : null;
+    return /* @__PURE__ */ s(E, { isOpen: r, children: /* @__PURE__ */ s(
+      k,
       {
-        isOpen: l,
+        isOpen: r,
         title: "Configure metric",
         variant: "merged-stage",
-        onClose: () => d({ type: "CLOSE_PANEL", reason: "header-x" }),
-        footer: /* @__PURE__ */ h(J, { children: [
-          /* @__PURE__ */ a(
+        onClose: () => n({ type: "CLOSE_PANEL", reason: "header-x" }),
+        footer: /* @__PURE__ */ h(Z, { children: [
+          /* @__PURE__ */ s(
             "button",
             {
               id: "btn-reset",
@@ -1164,145 +1283,145 @@ function _t({ panelComponents: e, children: t }) {
               className: "gloss-panel-chrome__footer-btn",
               disabled: !o,
               onClick: () => {
-                p != null && d({ type: "CLEAR_BUFFER", cardId: p });
+                p != null && n({ type: "CLEAR_BUFFER", cardId: p });
               },
               children: "Reset"
             }
           ),
-          /* @__PURE__ */ a("span", { style: { flex: 1 } }),
-          /* @__PURE__ */ a(
+          /* @__PURE__ */ s("span", { style: { flex: 1 } }),
+          /* @__PURE__ */ s(
             "button",
             {
               id: "settings-cancel",
               type: "button",
               className: "gloss-panel-chrome__footer-btn",
-              onClick: () => d({ type: "CLOSE_PANEL", reason: "cancel-button" }),
+              onClick: () => n({ type: "CLOSE_PANEL", reason: "cancel-button" }),
               children: "Cancel"
             }
           ),
-          /* @__PURE__ */ a(
+          /* @__PURE__ */ s(
             "button",
             {
               id: "settings-apply",
               type: "button",
               className: "gloss-panel-chrome__footer-btn gloss-panel-chrome__footer-btn--primary",
               disabled: !o,
-              onClick: () => d({ type: "CLOSE_PANEL", reason: "apply-button" }),
+              onClick: () => n({ type: "CLOSE_PANEL", reason: "apply-button" }),
               children: "Apply"
             }
           )
         ] }),
-        children: s != null ? /* @__PURE__ */ a(s, { isOpen: l }) : t
+        children: a != null ? /* @__PURE__ */ s(a, { isOpen: r }) : t
       }
     ) });
   }
   if (u === "catalog-add" || u === "catalog-replace") {
-    if (s == null) return null;
+    if (a == null) return null;
     const o = u === "catalog-replace" ? "replace" : "add";
-    return /* @__PURE__ */ a(x, { isOpen: l, children: /* @__PURE__ */ a(
-      T,
+    return /* @__PURE__ */ s(E, { isOpen: r, children: /* @__PURE__ */ s(
+      k,
       {
-        isOpen: l,
-        onClose: () => d({ type: "CLOSE_PANEL", reason: "header-x" }),
+        isOpen: r,
+        onClose: () => n({ type: "CLOSE_PANEL", reason: "header-x" }),
         footer: null,
         title: o === "replace" ? "Replace metric" : "Add a metric",
-        children: /* @__PURE__ */ a(
-          s,
+        children: /* @__PURE__ */ s(
+          a,
           {
-            isOpen: l,
-            footerSlot: /* @__PURE__ */ a(ze, { mode: o, dispatch: d })
+            isOpen: r,
+            footerSlot: /* @__PURE__ */ s(He, { mode: o, dispatch: n })
           }
         )
       }
     ) });
   }
-  return u === "page-management" ? s == null ? null : /* @__PURE__ */ a(x, { isOpen: l, children: /* @__PURE__ */ a(
-    T,
+  return u === "page-management" ? a == null ? null : /* @__PURE__ */ s(E, { isOpen: r, children: /* @__PURE__ */ s(
+    k,
     {
-      isOpen: l,
-      onClose: () => d({ type: "CLOSE_PANEL", reason: "header-x" }),
+      isOpen: r,
+      onClose: () => n({ type: "CLOSE_PANEL", reason: "header-x" }),
       footer: null,
       title: "Manage pages",
-      children: /* @__PURE__ */ a(s, { isOpen: l, footerSlot: /* @__PURE__ */ a(Ve, {}) })
+      children: /* @__PURE__ */ s(a, { isOpen: r, footerSlot: /* @__PURE__ */ s(ze, {}) })
     }
-  ) }) : /* @__PURE__ */ a(x, { isOpen: l, children: /* @__PURE__ */ a(
-    T,
+  ) }) : /* @__PURE__ */ s(E, { isOpen: r, children: /* @__PURE__ */ s(
+    k,
     {
       isOpen: !0,
-      onClose: () => d({ type: "CLOSE_PANEL", reason: "header-x" }),
+      onClose: () => n({ type: "CLOSE_PANEL", reason: "header-x" }),
       footer: null,
-      children: s != null ? /* @__PURE__ */ a(s, { isOpen: l }) : t
+      children: a != null ? /* @__PURE__ */ s(a, { isOpen: r }) : t
     }
   ) });
 }
 function j(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 je = 685, Q = 627, Qe = "cubic-bezier(0.22, 1, 0.36, 1)", Xe = 200;
-function oe(e, t) {
+const qe = 685, X = 627, je = "cubic-bezier(0.22, 1, 0.36, 1)", Xe = 200;
+function ie(e, t) {
   if (typeof window > "u") return t;
-  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;
+  const l = window.getComputedStyle(document.documentElement).getPropertyValue(e).trim();
+  if (!l) return t;
+  const i = parseFloat(l);
+  return Number.isNaN(i) ? t : l.endsWith("s") && !l.endsWith("ms") ? i * 1e3 : i;
 }
 function Je(e, t) {
   return typeof window > "u" ? t : window.getComputedStyle(document.documentElement).getPropertyValue(e).trim() || t;
 }
-function O(e) {
+function D(e) {
   e.dispatch({ type: "OPEN_PANEL", panelId: e.panelId, trigger: e.trigger });
 }
 function Ze(e) {
-  const { mountEl: t, chromeEl: r, reducedMotion: n, onAssert: d } = e;
-  if (t == null || r == null) {
-    O(e), d?.({ branch: "slide-fallback-no-dom", timestamp: Date.now() });
+  const { mountEl: t, chromeEl: l, reducedMotion: i, onAssert: n } = e;
+  if (t == null || l == null) {
+    D(e), n?.({ branch: "slide-fallback-no-dom", timestamp: Date.now() });
     return;
   }
-  if (n) {
-    e.dispatch({ type: "OPEN_PANEL", panelId: e.panelId, trigger: e.trigger }), d?.({ branch: "slide-reduced-motion", timestamp: Date.now() });
+  if (i) {
+    e.dispatch({ type: "OPEN_PANEL", panelId: e.panelId, trigger: e.trigger }), n?.({ branch: "slide-reduced-motion", timestamp: Date.now() });
     return;
   }
-  if (typeof r.animate != "function") {
-    O(e), d?.({ branch: "slide-no-waapi", timestamp: Date.now() });
+  if (typeof l.animate != "function") {
+    D(e), n?.({ branch: "slide-no-waapi", timestamp: Date.now() });
     return;
   }
-  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 = oe("--panel-open-dur", je), l = Je("--panel-easing", Qe), s = r.animate(
+  const c = l.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), l.style.zIndex = "2", e.dispatch({ type: "OPEN_PANEL", panelId: e.panelId, trigger: e.trigger });
+  const u = ie("--panel-open-dur", qe), r = Je("--panel-easing", je), a = l.animate(
     [{ transform: "translateY(100%)" }, { transform: "translateY(0)" }],
-    { duration: u, easing: l, fill: "forwards" }
+    { duration: u, easing: r, fill: "forwards" }
   );
-  s.addEventListener(
+  a.addEventListener(
     "finish",
     () => {
-      i.remove(), r.style.zIndex = "", s.cancel(), d?.({ branch: "slide-complete", frozen: "cleaned", timestamp: Date.now() });
+      c.remove(), l.style.zIndex = "", a.cancel(), n?.({ branch: "slide-complete", frozen: "cleaned", timestamp: Date.now() });
     },
     { once: !0 }
   );
 }
 function et(e) {
-  const { mountEl: t, onAssert: r } = e;
+  const { mountEl: t, onAssert: l } = e;
   if (t == null) {
-    e.dispatch({ type: "CLOSE_PANEL", reason: "mutex-handoff" }), setTimeout(() => O(e), Q), r?.({ branch: "handoff-fallback-no-mount", timestamp: Date.now() });
+    e.dispatch({ type: "CLOSE_PANEL", reason: "mutex-handoff" }), setTimeout(() => D(e), X), l?.({ branch: "handoff-fallback-no-mount", timestamp: Date.now() });
     return;
   }
-  const n = oe("--panel-close-dur", Q);
-  let d = !1, i = null;
-  const u = (s) => {
-    s.target !== t || s.propertyName !== "max-height" || d || (d = !0, i != null && clearTimeout(i), t.removeEventListener("transitionend", u), e.dispatch({ type: "OPEN_PANEL", panelId: e.panelId, trigger: e.trigger }), r?.({ branch: "handoff-complete", timestamp: Date.now() }));
-  }, l = () => {
-    d || (d = !0, t.removeEventListener("transitionend", u), e.dispatch({ type: "OPEN_PANEL", panelId: e.panelId, trigger: e.trigger }), r?.({ branch: "handoff-forced", timestamp: Date.now() }));
+  const i = ie("--panel-close-dur", X);
+  let n = !1, c = null;
+  const u = (a) => {
+    a.target !== t || a.propertyName !== "max-height" || n || (n = !0, c != null && clearTimeout(c), t.removeEventListener("transitionend", u), e.dispatch({ type: "OPEN_PANEL", panelId: e.panelId, trigger: e.trigger }), l?.({ branch: "handoff-complete", timestamp: Date.now() }));
+  }, r = () => {
+    n || (n = !0, t.removeEventListener("transitionend", u), e.dispatch({ type: "OPEN_PANEL", panelId: e.panelId, trigger: e.trigger }), l?.({ branch: "handoff-forced", timestamp: Date.now() }));
   };
-  t.addEventListener("transitionend", u), e.dispatch({ type: "CLOSE_PANEL", reason: "mutex-handoff" }), i = setTimeout(l, n + Xe);
+  t.addEventListener("transitionend", u), e.dispatch({ type: "CLOSE_PANEL", reason: "mutex-handoff" }), c = setTimeout(r, i + Xe);
 }
 function tt(e) {
-  const { state: t, onAssert: r } = e;
+  const { state: t, onAssert: l } = e;
   if (t.activePanelId && t.isDirty) {
-    e.dispatch({ type: "OPEN_PANEL", panelId: e.panelId, trigger: e.trigger }), r?.({ branch: "blocked-dirty", timestamp: Date.now() });
+    e.dispatch({ type: "OPEN_PANEL", panelId: e.panelId, trigger: e.trigger }), l?.({ branch: "blocked-dirty", timestamp: Date.now() });
     return;
   }
-  const n = j(t.activeTrigger), d = j(e.trigger);
-  if (!!t.activePanelId && n != null && n === d) {
+  const i = j(t.activeTrigger), n = j(e.trigger);
+  if (!!t.activePanelId && i != null && i === n) {
     Ze(e);
     return;
   }
@@ -1310,28 +1429,28 @@ function tt(e) {
     et(e);
     return;
   }
-  O(e), r?.({ branch: "fresh-open", timestamp: Date.now() });
+  D(e), l?.({ branch: "fresh-open", timestamp: Date.now() });
 }
 function nt() {
   if (!(typeof window > "u"))
     return window.__panelsAsserter;
 }
-function Nt() {
-  const e = k(), t = X();
-  return E(
-    (r, n) => {
+function _t() {
+  const e = L(), t = J();
+  return x(
+    (l, i) => {
       if (!e)
         return;
-      const d = typeof document < "u" ? document.querySelector('[data-mount="panel"]') : null, i = typeof document < "u" ? document.querySelector('[data-chrome="panel"]') : null, u = {
-        panelId: r,
-        trigger: n,
+      const n = typeof document < "u" ? document.querySelector('[data-mount="panel"]') : null, c = typeof document < "u" ? document.querySelector('[data-chrome="panel"]') : null, u = {
+        panelId: l,
+        trigger: i,
         state: e.state,
         dispatch: e.dispatch,
-        mountEl: d,
-        chromeEl: i,
+        mountEl: n,
+        chromeEl: c,
         reducedMotion: t,
-        onAssert: (l) => {
-          nt()?.recordTransition?.(l);
+        onAssert: (r) => {
+          nt()?.recordTransition?.(r);
         }
       };
       tt(u);
@@ -1339,191 +1458,191 @@ function Nt() {
     [e, t]
   );
 }
-let L = !1, D = null;
+let O = !1, M = null;
 function H() {
   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 d = n[0] ?? null, i = d ? d.querySelectorAll(".gloss-panel-chrome") : [];
-  i.length > 1 && e.push(`chrome-count=${i.length}`);
-  const u = i[0] ?? null;
+  const i = document.querySelectorAll(".gloss-panel-mount");
+  i.length > 1 && e.push(`mount-count=${i.length}`);
+  const n = i[0] ?? null, c = n ? n.querySelectorAll(".gloss-panel-chrome") : [];
+  c.length > 1 && e.push(`chrome-count=${c.length}`);
+  const u = c[0] ?? null;
   if (u) {
-    const c = u.style.zIndex;
-    c !== "" && c !== "2" && e.push(`chrome-zindex=${c}`);
+    const d = u.style.zIndex;
+    d !== "" && d !== "2" && e.push(`chrome-zindex=${d}`);
   }
-  const l = d ? "present" : "absent", s = u ? "present" : "absent";
+  const r = n ? "present" : "absent", a = u ? "present" : "absent";
   return {
     valid: e.length === 0,
-    mount: l,
-    chrome: s,
+    mount: r,
+    chrome: a,
     frozen: t,
     orphans: e,
     timestamp: Date.now()
   };
 }
-const M = "8px 8px 0px", $ = "64px", R = "inset(0px 0px 60px 0px)", F = "inset(0px -40px -40px -40px)";
-function f(e, t, r, n, d) {
-  return { id: e, constraint: t, expected: r, actual: n, pass: d };
+const $ = "8px 8px 0px", R = "64px", F = "inset(0px 0px 60px 0px)", U = "inset(0px -40px -40px -40px)";
+function g(e, t, l, i, n) {
+  return { id: e, constraint: t, expected: l, actual: i, pass: n };
 }
-function P(e) {
+function N(e) {
   const t = parseInt(e, 10);
   return Number.isFinite(t) ? t : NaN;
 }
 function K() {
-  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]"), d = document.querySelector(".bell-cutout"), i = document.querySelector(".bell-popover"), u = document.querySelector(".gloss-bottom-toolbar");
+  const e = [], t = document.querySelector(".gloss-panel-mount"), l = t?.querySelector(".gloss-panel-chrome") ?? null, i = document.querySelector(".gloss-panel-coordinator") ?? document.querySelector("[data-panel-coordinator]"), n = document.querySelector(".bell-cutout"), c = document.querySelector(".bell-popover"), u = document.querySelector(".gloss-bottom-toolbar");
   if (!t)
-    e.push(f("C1", "mount --reveal-y matches clip-path inset-bottom Npx", "mount present", "absent", !1));
+    e.push(g("C1", "mount --reveal-y matches clip-path inset-bottom Npx", "mount present", "absent", !1));
   else {
-    const l = getComputedStyle(t), s = l.getPropertyValue("--reveal-y").trim() || t.style.getPropertyValue("--reveal-y").trim(), o = l.clipPath || t.style.clipPath || "", c = o.match(/inset\(\s*0(?:px)?\s+0(?:px)?\s+(\d+)px\s+0(?:px)?\s*\)/), p = c ? parseInt(c[1], 10) : NaN, m = P(s), v = Number.isFinite(p) && Number.isFinite(m) && p === m;
+    const r = getComputedStyle(t), a = r.getPropertyValue("--reveal-y").trim() || t.style.getPropertyValue("--reveal-y").trim(), o = r.clipPath || t.style.clipPath || "", d = o.match(/inset\(\s*0(?:px)?\s+0(?:px)?\s+(\d+)px\s+0(?:px)?\s*\)/), p = d ? parseInt(d[1], 10) : NaN, m = N(a), f = Number.isFinite(p) && Number.isFinite(m) && p === m;
     e.push(
-      f(
+      g(
         "C1",
         "mount --reveal-y matches clip-path inset-bottom Npx",
         `inset(0 0 ${m}px 0) === --reveal-y(${m}px)`,
-        `--reveal-y=${s || "n/a"} clip-path=${o || "n/a"}`,
-        v
+        `--reveal-y=${a || "n/a"} clip-path=${o || "n/a"}`,
+        f
       )
     );
   }
   if (!t)
-    e.push(f("C2", "mount padding constant", M, "absent", !1));
+    e.push(g("C2", "mount padding constant", $, "absent", !1));
   else {
-    const l = t.style.padding, s = getComputedStyle(t), o = l || s.padding || "", c = o === M || o === "8px 8px 0px 8px";
-    e.push(f("C2", "mount padding constant", M, o || "n/a", c));
+    const r = t.style.padding, a = getComputedStyle(t), o = r || a.padding || "", d = o === $ || o === "8px 8px 0px 8px";
+    e.push(g("C2", "mount padding constant", $, o || "n/a", d));
   }
   if (!t)
-    e.push(f("C3", "mount.bottom resolves to var(--tb-h)=64px", $, "absent", !1));
+    e.push(g("C3", "mount.bottom resolves to var(--tb-h)=64px", R, "absent", !1));
   else {
-    const s = getComputedStyle(t).bottom || t.style.bottom || "", o = s === $;
-    e.push(f("C3", "mount.bottom resolves to var(--tb-h)=64px", $, s || "n/a", o));
+    const a = getComputedStyle(t).bottom || t.style.bottom || "", o = a === R;
+    e.push(g("C3", "mount.bottom resolves to var(--tb-h)=64px", R, a || "n/a", o));
   }
-  if (!r)
-    e.push(f("C4", "panel-chrome height formula = (row-h*3)+(row-gap*3)-8px", "formula match", "absent", !1));
+  if (!l)
+    e.push(g("C4", "panel-chrome height formula = (row-h*3)+(row-gap*3)-8px", "formula match", "absent", !1));
   else {
-    const l = getComputedStyle(r), s = 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"
-    ), c = s * 3 + o * 3 - 8, p = P(l.height || r.style.height || ""), m = Number.isFinite(s) && Number.isFinite(o) && Number.isFinite(p) && Number.isFinite(c) && p === c;
+    const r = getComputedStyle(l), a = N(
+      r.getPropertyValue("--row-h").trim() || l.style.getPropertyValue("--row-h").trim() || "0"
+    ), o = N(
+      r.getPropertyValue("--row-gap").trim() || l.style.getPropertyValue("--row-gap").trim() || "0"
+    ), d = a * 3 + o * 3 - 8, p = N(r.height || l.style.height || ""), m = Number.isFinite(a) && Number.isFinite(o) && Number.isFinite(p) && Number.isFinite(d) && p === d;
     e.push(
-      f(
+      g(
         "C4",
         "panel-chrome height formula = (row-h*3)+(row-gap*3)-8px",
-        `${c}px (rh=${s} rg=${o})`,
+        `${d}px (rh=${a} rg=${o})`,
         `${p}px`,
         m
       )
     );
   }
-  if (!n || !r)
+  if (!i || !l)
     e.push(
-      f(
+      g(
         "C5",
         'coordinator perspective + origin "center bottom"; chrome perspective-style flat',
         "present",
-        `coordinator=${n ? "present" : "absent"} chrome=${r ? "present" : "absent"}`,
+        `coordinator=${i ? "present" : "absent"} chrome=${l ? "present" : "absent"}`,
         !1
       )
     );
   else {
-    const l = getComputedStyle(n), s = getComputedStyle(r), o = l.perspective || n.style.perspective || "", c = (l.perspectiveOrigin || n.style.perspectiveOrigin || "").trim(), p = s.perspectiveStyle || r.style.perspectiveStyle || "", b = o !== "" && o !== "none" && (c === "center bottom" || c === "50% 100%") && p === "flat";
+    const r = getComputedStyle(i), a = getComputedStyle(l), o = r.perspective || i.style.perspective || "", d = (r.perspectiveOrigin || i.style.perspectiveOrigin || "").trim(), p = a.perspectiveStyle || l.style.perspectiveStyle || "", b = o !== "" && o !== "none" && (d === "center bottom" || d === "50% 100%") && p === "flat";
     e.push(
-      f(
+      g(
         "C5",
         'coordinator perspective + origin "center bottom"; chrome perspective-style flat',
         "perspective:not-none, origin:center bottom, chrome-style:flat",
-        `perspective=${o} origin=${c} chrome-style=${p}`,
+        `perspective=${o} origin=${d} chrome-style=${p}`,
         b
       )
     );
   }
   {
-    let l = !1, s = "absent";
+    let r = !1, a = "absent";
     try {
       for (const o of Array.from(document.styleSheets)) {
-        let c = [];
+        let d = [];
         try {
-          c = Array.from(o.cssRules ?? []);
+          d = Array.from(o.cssRules ?? []);
         } catch {
           continue;
         }
-        for (const p of c)
+        for (const p of d)
           if (p.name === "stage-spin") {
-            const v = Array.from(p.cssRules), y = v.find((S) => S.keyText === "0%" || S.keyText === "from"), b = v.find((S) => S.keyText === "100%" || S.keyText === "to"), _ = y?.style.transform ?? "", N = b?.style.transform ?? "", g = /rotateY\(\s*0(?:deg)?\s*\)/;
-            l = g.test(_) && g.test(N), s = `0%=${_ || "n/a"} 100%=${N || "n/a"}`;
+            const f = Array.from(p.cssRules), C = f.find((y) => y.keyText === "0%" || y.keyText === "from"), b = f.find((y) => y.keyText === "100%" || y.keyText === "to"), S = C?.style.transform ?? "", w = b?.style.transform ?? "", v = /rotateY\(\s*0(?:deg)?\s*\)/;
+            r = v.test(S) && v.test(w), a = `0%=${S || "n/a"} 100%=${w || "n/a"}`;
             break;
           }
-        if (s !== "absent") break;
+        if (a !== "absent") break;
       }
     } catch {
-      s = "inspection-error";
+      a = "inspection-error";
     }
     e.push(
-      f(
+      g(
         "C6",
         "@keyframes stage-spin 0% AND 100% anchor at rotateY(0)",
         "both frames rotateY(0)",
-        s,
-        l
+        a,
+        r
       )
     );
   }
   {
-    const l = document.documentElement, s = getComputedStyle(l), o = s.getPropertyValue("--panel-open-dur").trim() || l.style.getPropertyValue("--panel-open-dur").trim(), c = s.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(c) || parseFloat(c) * (c.endsWith("s") && !c.endsWith("ms") ? 1e3 : 1), v = Number.isFinite(p) && Number.isFinite(m) && p > m;
+    const r = document.documentElement, a = getComputedStyle(r), o = a.getPropertyValue("--panel-open-dur").trim() || r.style.getPropertyValue("--panel-open-dur").trim(), d = a.getPropertyValue("--panel-close-dur").trim() || r.style.getPropertyValue("--panel-close-dur").trim(), p = N(o) || parseFloat(o) * (o.endsWith("s") && !o.endsWith("ms") ? 1e3 : 1), m = N(d) || parseFloat(d) * (d.endsWith("s") && !d.endsWith("ms") ? 1e3 : 1), f = Number.isFinite(p) && Number.isFinite(m) && p > m;
     e.push(
-      f("C7", "--panel-open-dur > --panel-close-dur", "open > close", `open=${o || "n/a"} close=${c || "n/a"}`, v)
+      g("C7", "--panel-open-dur > --panel-close-dur", "open > close", `open=${o || "n/a"} close=${d || "n/a"}`, f)
     );
   }
-  if (!d)
-    e.push(f("C8", "BellCutout zero computed animation/transition", "no inline timing", "absent", !1));
+  if (!n)
+    e.push(g("C8", "BellCutout zero computed animation/transition", "no inline timing", "absent", !1));
   else {
-    const l = getComputedStyle(d), s = l.animationName || "", o = l.transitionProperty || "", c = (s === "" || s === "none") && (o === "" || o === "none" || o === "all");
+    const r = getComputedStyle(n), a = r.animationName || "", o = r.transitionProperty || "", d = (a === "" || a === "none") && (o === "" || o === "none" || o === "all");
     e.push(
-      f(
+      g(
         "C8",
         "BellCutout zero computed animation/transition",
         "animation:none AND transition:none",
-        `animation=${s || "n/a"} transition=${o || "n/a"}`,
-        c
+        `animation=${a || "n/a"} transition=${o || "n/a"}`,
+        d
       )
     );
   }
   if (!t)
-    e.push(f("C9", "mount closed-state clipPath", R, "absent", !1));
+    e.push(g("C9", "mount closed-state clipPath", F, "absent", !1));
   else {
-    const l = t.style.clipPath, s = getComputedStyle(t), o = l || s.clipPath || "", c = o === R;
-    e.push(f("C9", "mount closed-state clipPath", R, o || "n/a", c));
+    const r = t.style.clipPath, a = getComputedStyle(t), o = r || a.clipPath || "", d = o === F;
+    e.push(g("C9", "mount closed-state clipPath", F, o || "n/a", d));
   }
-  if (!i)
-    e.push(f("C10", "bell-popover parentElement === document.body (open)", "body", "absent", !1));
+  if (!c)
+    e.push(g("C10", "bell-popover parentElement === document.body (open)", "body", "absent", !1));
   else {
-    const l = i.parentElement, s = l === document.body;
+    const r = c.parentElement, a = r === document.body;
     e.push(
-      f(
+      g(
         "C10",
         "bell-popover parentElement === document.body (open)",
         "body",
-        l === document.body ? "body" : l?.tagName ?? "n/a",
-        s
+        r === document.body ? "body" : r?.tagName ?? "n/a",
+        a
       )
     );
   }
-  if (!n)
-    e.push(f("C11", "coordinator overflow === visible", "visible", "absent", !1));
+  if (!i)
+    e.push(g("C11", "coordinator overflow === visible", "visible", "absent", !1));
   else {
-    const s = getComputedStyle(n).overflow || n.style.overflow || "", o = s === "visible";
-    e.push(f("C11", "coordinator overflow === visible", "visible", s || "n/a", o));
+    const a = getComputedStyle(i).overflow || i.style.overflow || "", o = a === "visible";
+    e.push(g("C11", "coordinator overflow === visible", "visible", a || "n/a", o));
   }
   if (!u)
-    e.push(f("C12", "toolbar clipPath = inset(0 -40 -40 -40)", F, "absent", !1));
+    e.push(g("C12", "toolbar clipPath = inset(0 -40 -40 -40)", U, "absent", !1));
   else {
-    const l = u.style.clipPath, s = getComputedStyle(u), o = l || s.clipPath || "", c = o === F;
-    e.push(f("C12", "toolbar clipPath = inset(0 -40 -40 -40)", F, o || "n/a", c));
+    const r = u.style.clipPath, a = getComputedStyle(u), o = r || a.clipPath || "", d = o === U;
+    e.push(g("C12", "toolbar clipPath = inset(0 -40 -40 -40)", U, o || "n/a", d));
   }
   return e.push(
-    f(
+    g(
       "C13",
       "same-position slide via WAAPI (mid-transition getAnimations().length > 0)",
       "WAAPI driver wired in orchestrator (source-proof)",
@@ -1531,7 +1650,7 @@ function K() {
       "wiring_only"
     )
   ), e.push(
-    f(
+    g(
       "C14",
       'cross-position handoff transitionend filtered by propertyName="max-height"',
       "transitionend filter wired in orchestrator (source-proof)",
@@ -1540,10 +1659,10 @@ function K() {
     )
   ), e;
 }
-function st(e) {
+function at(e) {
   return K().find((t) => t.id === e);
 }
-function at() {
+function st() {
   const e = H();
   return { q12: [
     {
@@ -1559,70 +1678,70 @@ function rt() {
   return {
     enable: lt,
     disable: ot,
-    isEnabled: () => L,
-    getLastReport: () => D,
+    isEnabled: () => O,
+    getLastReport: () => M,
     recordTransition: (e) => {
-      L && (D = { ...e, ...H() });
+      O && (M = { ...e, ...H() });
     },
     assertOnce: () => {
       const e = H();
-      return D = e, e;
+      return M = e, e;
     },
     assertCcOnly: K,
-    getCcRowById: st,
-    assertPanelTruths: at
+    getCcRowById: at,
+    assertPanelTruths: st
   };
 }
 function lt() {
-  if (L = !0, typeof window > "u") return;
+  if (O = !0, typeof window > "u") return;
   window.__panelsAsserter || (window.__panelsAsserter = rt(), console.info(
     "[panels] asserter enabled (P3b Q12-12 + P6 W5 cc:C1..C14). Inspect via window.__panelsAsserter."
   ));
 }
 function ot() {
-  L = !1;
+  O = !1;
 }
 export {
-  Et as COMMITS,
-  vt as CatalogAddShell,
-  ze as CatalogFooter,
-  bt as CatalogReplaceShell,
-  V as CatalogStateContext,
-  Oe as CloneCard,
-  Te as CloneStage,
-  ne as MOCK_DEFAULT_LENS,
-  te as MOCK_LENSES,
+  Pt as COMMITS,
+  bt as CatalogAddShell,
+  He as CatalogFooter,
+  yt as CatalogReplaceShell,
+  Y as CatalogStateContext,
+  ke as CloneCard,
+  Ee as CloneStage,
+  ae as MOCK_DEFAULT_LENS,
+  ne as MOCK_LENSES,
   z as MOCK_LENS_META,
-  Be as MOCK_PAGES,
+  Ke as MOCK_PAGES,
   se as MOCK_TILES_BY_LENS,
-  St as PANEL_IDS,
-  Ve as PageMgmtFooter,
-  yt as PageMgmtShell,
-  re as PageMgmtStateContext,
-  T as PanelChrome,
-  At as PanelHost,
-  Ct as PanelHostShell,
-  x as PanelMount,
-  xt as PanelProvider,
-  _t as PanelSlot,
+  Ct as PANEL_IDS,
+  ze as PageMgmtFooter,
+  vt as PageMgmtShell,
+  le as PageMgmtStateContext,
+  k as PanelChrome,
+  xt as PanelHost,
+  St as PanelHostShell,
+  E as PanelMount,
+  At as PanelProvider,
+  Tt as PanelSlot,
   gt as SettingsShell,
   K as assertCcOnly,
   H as assertPanelDomShape,
-  at as assertPanelTruths,
-  Tt as deriveSurfaceState,
+  st as assertPanelTruths,
+  Et as deriveSurfaceState,
   ot as disablePanelAsserter,
   lt as enablePanelAsserter,
-  st as getCcRowById,
-  Ot as initialState,
+  at as getCcRowById,
+  kt as initialState,
   j as positionKey,
-  Lt as reducer,
+  Dt as reducer,
   tt as transitionToPanel,
-  He as useCatalogState,
+  Ve as useCatalogState,
   ft as useEditingCardId,
-  le as usePageMgmtState,
+  oe as usePageMgmtState,
   ge as usePanelContext,
-  k as usePanelContextOptional,
-  kt as usePanelCoordinator,
-  X as useReducedMotionPanel,
-  Nt as useTransitionToPanel
+  L as usePanelContextOptional,
+  Ot as usePanelCoordinator,
+  J as useReducedMotionPanel,
+  _t as useTransitionToPanel
 };