@mt-gloss/ui 0.1.122 → 0.1.123

package/composites-panels.js

@@ -1,28 +1,28 @@
-import { u as O, h as fe, j as B, g as we, S as Ee, b as Pe, k as xe } from "./COMMITS-C1VHNgld.js";
-import { C as Ut, N as zt, o as Ht, d as Vt, p as Bt, l as Kt, c as Yt, n as Wt, P as Gt, m as Qt, f as qt, i as jt, r as Zt, e as Xt } from "./COMMITS-C1VHNgld.js";
-import { jsx as n, jsxs as f, Fragment as K } from "react/jsx-runtime";
-import z, { useState as x, useRef as Y, createContext as ge, useContext as be, useMemo as ie, useEffect as F, useCallback as D, useLayoutEffect as Ae } from "react";
-import { useSensors as ke, useSensor as ce, PointerSensor as De, KeyboardSensor as Le, DndContext as Oe, closestCenter as Me } from "@dnd-kit/core";
-import { sortableKeyboardCoordinates as Ie, SortableContext as $e, horizontalListSortingStrategy as Re, arrayMove as Fe, useSortable as Ue } from "@dnd-kit/sortable";
-import { CSS as ze } from "@dnd-kit/utilities";
-import { M as de } from "./MetricCard-Cyoxhb_S.js";
+import { u as O, h as he, j as Y, g as we, S as Pe, b as Te, k as Ae } from "./COMMITS-C1VHNgld.js";
+import { C as zt, N as Ht, o as Ut, d as Bt, p as Yt, l as Vt, c as Kt, n as qt, P as Qt, m as Wt, f as Gt, i as jt, r as Zt, e as Xt } from "./COMMITS-C1VHNgld.js";
+import { jsx as n, jsxs as f, Fragment as V } from "react/jsx-runtime";
+import H, { useState as A, useRef as K, createContext as fe, useContext as ge, useMemo as le, useEffect as F, useCallback as D, useLayoutEffect as xe } from "react";
+import { useSensors as ke, useSensor as ie, PointerSensor as De, KeyboardSensor as Le, DndContext as Oe, closestCenter as Me } from "@dnd-kit/core";
+import { sortableKeyboardCoordinates as Ie, SortableContext as Re, horizontalListSortingStrategy as $e, arrayMove as Fe, useSortable as ze } from "@dnd-kit/sortable";
+import { CSS as He } from "@dnd-kit/utilities";
+import { M as ce } from "./MetricCard-Cyoxhb_S.js";
 function wt() {
   const e = O();
   if (e?.state.activePanelId !== "settings") return null;
   const t = e.state.activeTrigger;
   return t?.kind === "card-overflow" ? t.cardId : null;
 }
-function He({ span: e, rotating: t = !0, children: r }) {
+function Ue({ span: e, rotating: t = !0, children: r }) {
   const l = ["clone-card", `span-${e}`, t ? "rotating" : ""].filter(Boolean).join(" "), a = r != null ? "full" : "fallback";
   return /* @__PURE__ */ n("div", { className: l, "data-clone-fidelity": a, children: r });
 }
-function Et({ primary: e, secondary: t }) {
+function Pt({ primary: e, secondary: t }) {
   return /* @__PURE__ */ f("div", { className: "gloss-panel-chrome-v2__footer-msg", children: [
     /* @__PURE__ */ n("span", { className: "gloss-panel-chrome-v2__footer-msg-primary", children: e }),
     t != null && /* @__PURE__ */ n("span", { className: "gloss-panel-chrome-v2__footer-msg-secondary", children: t })
   ] });
 }
-function Ve({
+function Be({
   value: e,
   onChange: t,
   enabled: r = !1,
@@ -46,7 +46,7 @@ function Ve({
         }
       )
     ] }),
-    r ? /* @__PURE__ */ f(K, { children: [
+    r ? /* @__PURE__ */ f(V, { children: [
       /* @__PURE__ */ n("span", { className: "settings-shell__label", "aria-hidden": "true", children: "Alert level (%)" }),
       /* @__PURE__ */ f("div", { className: "settings-shell__slider-row", children: [
         /* @__PURE__ */ n(
@@ -73,7 +73,7 @@ function Ve({
     ] }) : /* @__PURE__ */ n("p", { className: "settings-shell__help", "aria-live": "polite", children: "Off — the card uses its default styling. Turn on to tint values below the threshold." })
   ] });
 }
-function Be({ value: e, onChange: t }) {
+function Ye({ value: e, onChange: t }) {
   return /* @__PURE__ */ f("div", { className: "settings-shell__field settings-shell__field--timeframe", children: [
     /* @__PURE__ */ n("span", { className: "settings-shell__label", "aria-hidden": "true", children: "Rolling period (days)" }),
     /* @__PURE__ */ f("div", { className: "settings-shell__slider-row", children: [
@@ -100,9 +100,9 @@ function Be({ value: e, onChange: t }) {
     ] })
   ] });
 }
-function Ke({ id: e, onRemove: t }) {
-  const { attributes: r, listeners: l, setNodeRef: a, transform: i, transition: u, isDragging: o } = Ue({ id: e }), s = {
-    transform: ze.Transform.toString(i),
+function Ve({ id: e, onRemove: t }) {
+  const { attributes: r, listeners: l, setNodeRef: a, transform: i, transition: u, isDragging: o } = ze({ id: e }), s = {
+    transform: He.Transform.toString(i),
     transition: u,
     opacity: o ? 0.6 : 1
   };
@@ -139,11 +139,11 @@ function Ke({ id: e, onRemove: t }) {
     }
   );
 }
-function Ye({ value: e, onChange: t }) {
+function Ke({ value: e, onChange: t }) {
   const r = ke(
-    ce(De, { activationConstraint: { distance: 4 } }),
-    ce(Le, { coordinateGetter: Ie })
-  ), l = z.useRef(!1), [a, i] = z.useState(!1), u = (s) => {
+    ie(De, { activationConstraint: { distance: 4 } }),
+    ie(Le, { coordinateGetter: Ie })
+  ), l = H.useRef(!1), [a, i] = H.useState(!1), u = (s) => {
     const { active: c, over: d } = s;
     if (!d || c.id === d.id) return;
     const m = e.findIndex((b) => b === c.id), h = e.findIndex((b) => b === d.id);
@@ -152,13 +152,13 @@ function Ye({ value: e, onChange: t }) {
     l.current || (l.current = !0, i(!0)), t(e.filter((c) => c !== s));
   };
   return /* @__PURE__ */ f("div", { className: "settings-shell__field settings-shell__field--slots", "aria-label": "Stack slots", children: [
-    /* @__PURE__ */ n(Oe, { sensors: r, collisionDetection: Me, onDragEnd: u, children: /* @__PURE__ */ n($e, { items: [...e], strategy: Re, children: /* @__PURE__ */ n("ul", { className: "settings-shell__slots-list", role: "list", children: e.map((s) => /* @__PURE__ */ n(Ke, { id: s, onRemove: () => o(s) }, s)) }) }) }),
+    /* @__PURE__ */ n(Oe, { sensors: r, collisionDetection: Me, onDragEnd: u, children: /* @__PURE__ */ n(Re, { items: [...e], strategy: $e, children: /* @__PURE__ */ n("ul", { className: "settings-shell__slots-list", role: "list", children: e.map((s) => /* @__PURE__ */ n(Ve, { id: s, onRemove: () => o(s) }, s)) }) }) }),
     e.length === 0 && a && /* @__PURE__ */ n("p", { className: "settings-shell__help", children: "All slots removed. Apply to commit, or Reset to restore." }),
     /* @__PURE__ */ n("p", { className: "settings-shell__help settings-shell__help--small", children: "Drag to reorder · click × to remove" })
   ] });
 }
-const We = ["#1d6fd8", "#10b981", "#f59e0b", "#ef4444", "#8b5cf6"];
-function Ge({
+const qe = ["#1d6fd8", "#10b981", "#f59e0b", "#ef4444", "#8b5cf6"];
+function Qe({
   value: e,
   onSelect: t,
   enabled: r = !1,
@@ -182,9 +182,9 @@ function Ge({
         }
       )
     ] }),
-    r ? /* @__PURE__ */ f(K, { children: [
+    r ? /* @__PURE__ */ f(V, { children: [
       /* @__PURE__ */ n("span", { className: "settings-shell__label", children: "Accent color" }),
-      /* @__PURE__ */ n("div", { className: "settings-shell__swatch-row", children: We.map((i) => {
+      /* @__PURE__ */ n("div", { className: "settings-shell__swatch-row", children: qe.map((i) => {
         const u = e === i;
         return /* @__PURE__ */ n(
           "button",
@@ -202,40 +202,40 @@ function Ge({
     ] }) : /* @__PURE__ */ n("p", { className: "settings-shell__help", "aria-live": "polite", children: "Off — the card uses its default accent. Turn on to override." })
   ] });
 }
-const Qe = ["Orders", "Quota", "Unassigned"], qe = ["threshold", "timeframe", "color"];
-function Pt({
+const We = ["Orders", "Quota", "Unassigned"], Ge = ["threshold", "timeframe", "color"];
+function Tt({
   isOpen: e,
   cardSpan: t,
   cardLabel: r = "Metric",
   cardValue: l = "—",
   previewSlot: a,
-  dimensions: i = qe,
+  dimensions: i = Ge,
   initialTab: u,
   initialValues: o
 }) {
-  const s = O(), c = s?.state.activeTrigger, d = c?.kind === "card-overflow" ? c.cardId : null, m = fe(), h = c?.span, b = t ?? h ?? 1, p = i[0] ?? "threshold", [_, E] = z.useState(u ?? p);
-  z.useEffect(() => {
-    i.includes(_) || E(p);
+  const s = O(), c = s?.state.activeTrigger, d = c?.kind === "card-overflow" ? c.cardId : null, m = he(), h = c?.span, b = t ?? h ?? 1, p = i[0] ?? "threshold", [_, P] = H.useState(u ?? p);
+  H.useEffect(() => {
+    i.includes(_) || P(p);
   }, [i, _, p]);
-  const v = d != null ? s?.state?.bufferByCard?.[d]?.changes ?? {} : {}, N = typeof v.threshold == "number" ? v.threshold : typeof o?.threshold == "number" ? o.threshold : 80, I = typeof v.timeframe == "number" ? v.timeframe : typeof o?.timeframe == "number" ? o.timeframe : 30, $ = typeof v.accent == "string" ? v.accent : typeof o?.accent == "string" ? o.accent : null, R = Array.isArray(v.slots) ? v.slots : Array.isArray(o?.slots) ? o.slots : Qe, T = typeof v.thresholdEnabled == "boolean" ? v.thresholdEnabled : typeof o?.thresholdEnabled == "boolean" ? o.thresholdEnabled : !1, L = typeof v.accentEnabled == "boolean" ? v.accentEnabled : typeof o?.accentEnabled == "boolean" ? o.accentEnabled : !1, W = (P) => {
-    d == null || s == null || s.dispatch({ type: "SET_BUFFER_VALUE", cardId: d, key: "threshold", value: Number(P.target.value) });
-  }, G = (P) => {
-    d == null || s == null || s.dispatch({ type: "SET_BUFFER_VALUE", cardId: d, key: "timeframe", value: Number(P.target.value) });
-  }, le = (P) => {
-    d == null || s == null || s.dispatch({ type: "SET_BUFFER_VALUE", cardId: d, key: "accent", value: P });
-  }, Q = (P) => {
-    d == null || s == null || s.dispatch({ type: "SET_BUFFER_VALUE", cardId: d, key: "slots", value: P });
-  }, q = (P) => {
-    d == null || s == null || s.dispatch({ type: "SET_BUFFER_VALUE", cardId: d, key: "thresholdEnabled", value: P });
-  }, g = (P) => {
-    d == null || s == null || s.dispatch({ type: "SET_BUFFER_VALUE", cardId: d, key: "accentEnabled", value: P });
+  const y = d != null ? s?.state?.bufferByCard?.[d]?.changes ?? {} : {}, N = typeof y.threshold == "number" ? y.threshold : typeof o?.threshold == "number" ? o.threshold : 80, I = typeof y.timeframe == "number" ? y.timeframe : typeof o?.timeframe == "number" ? o.timeframe : 30, R = typeof y.accent == "string" ? y.accent : typeof o?.accent == "string" ? o.accent : null, $ = Array.isArray(y.slots) ? y.slots : Array.isArray(o?.slots) ? o.slots : We, S = typeof y.thresholdEnabled == "boolean" ? y.thresholdEnabled : typeof o?.thresholdEnabled == "boolean" ? o.thresholdEnabled : !1, L = typeof y.accentEnabled == "boolean" ? y.accentEnabled : typeof o?.accentEnabled == "boolean" ? o.accentEnabled : !1, q = (T) => {
+    d == null || s == null || s.dispatch({ type: "SET_BUFFER_VALUE", cardId: d, key: "threshold", value: Number(T.target.value) });
+  }, Q = (T) => {
+    d == null || s == null || s.dispatch({ type: "SET_BUFFER_VALUE", cardId: d, key: "timeframe", value: Number(T.target.value) });
+  }, oe = (T) => {
+    d == null || s == null || s.dispatch({ type: "SET_BUFFER_VALUE", cardId: d, key: "accent", value: T });
+  }, W = (T) => {
+    d == null || s == null || s.dispatch({ type: "SET_BUFFER_VALUE", cardId: d, key: "slots", value: T });
+  }, G = (T) => {
+    d == null || s == null || s.dispatch({ type: "SET_BUFFER_VALUE", cardId: d, key: "thresholdEnabled", value: T });
+  }, g = (T) => {
+    d == null || s == null || s.dispatch({ type: "SET_BUFFER_VALUE", cardId: d, key: "accentEnabled", value: T });
   }, C = s?.state.isDirty ?? !1, w = d;
   return /* @__PURE__ */ n(
-    B,
+    Y,
     {
       variant: "with-stage",
       onClose: () => s?.dispatch({ type: "CLOSE_PANEL", reason: "header-x" }),
-      stage: /* @__PURE__ */ n(He, { span: b, rotating: !m, children: a ?? /* @__PURE__ */ f(K, { children: [
+      stage: /* @__PURE__ */ n(Ue, { span: b, rotating: !m, children: a ?? /* @__PURE__ */ f(V, { children: [
         /* @__PURE__ */ n("div", { style: { fontSize: 9, textTransform: "uppercase", letterSpacing: "0.06em", color: "#9ca3af", marginBottom: 6 }, children: r }),
         /* @__PURE__ */ n("div", { style: { fontSize: 22, fontWeight: 700, color: "#111827", lineHeight: 1 }, children: l })
       ] }) }),
@@ -244,7 +244,7 @@ function Pt({
         {
           dimensions: i,
           activeTab: _,
-          onSelect: E,
+          onSelect: P,
           reduced: m
         }
       ),
@@ -284,21 +284,21 @@ function Pt({
           className: "settings-shell__tabpanel",
           children: [
             _ === "threshold" && /* @__PURE__ */ n(
-              Ve,
+              Be,
               {
                 value: N,
-                onChange: W,
-                enabled: T,
-                onToggleEnabled: q
+                onChange: q,
+                enabled: S,
+                onToggleEnabled: G
               }
             ),
-            _ === "timeframe" && /* @__PURE__ */ n(Be, { value: I, onChange: G }),
-            _ === "slots" && /* @__PURE__ */ n(Ye, { value: R, onChange: Q }),
+            _ === "timeframe" && /* @__PURE__ */ n(Ye, { value: I, onChange: Q }),
+            _ === "slots" && /* @__PURE__ */ n(Ke, { value: $, onChange: W }),
             _ === "color" && /* @__PURE__ */ n(
-              Ge,
+              Qe,
               {
-                value: $,
-                onSelect: le,
+                value: R,
+                onSelect: oe,
                 enabled: L,
                 onToggleEnabled: g
               }
@@ -309,190 +309,41 @@ function Pt({
     }
   );
 }
-const ve = [
-  "Overbought",
-  "What's selling",
-  "On track vs plan",
-  "Orders on time",
-  "Vendor performance",
-  "Assortment mix",
-  "Customer retention"
-], ye = "Overbought", ae = {
-  Overbought: {
-    headline: "Am I overbought?",
-    helper: "Find slow-moving inventory before discount cycles eat margin."
+const be = [
+  "Revenue",
+  "Order flow",
+  "Rep performance",
+  "Brand portfolio",
+  "Account coverage",
+  "Commission"
+], ye = "Revenue", ve = {
+  Revenue: {
+    headline: "Are we hitting our number?",
+    helper: "Top-line sales, growth, average order value, and pace-to-plan signals."
   },
-  "What's selling": {
-    headline: "What's selling right now?",
-    helper: "Velocity leaders and sleepers across your assortment."
+  "Order flow": {
+    headline: "Are orders flowing through?",
+    helper: "Daily activity, pipeline, unassigned work, and cancel-rate health."
   },
-  "On track vs plan": {
-    headline: "Am I on track vs plan?",
-    helper: "Pace-to-plan signals across revenue, units, and margin."
+  "Rep performance": {
+    headline: "How are my reps performing?",
+    helper: "Quota attainment, leaderboards, and activity flags across the rep team."
   },
-  "Orders on time": {
-    headline: "Are orders going out on time?",
-    helper: "Fulfillment SLA performance and at-risk shipments."
+  "Brand portfolio": {
+    headline: "Which brands matter?",
+    helper: "Manufacturer mix, top performers, and emerging line health."
   },
-  "Vendor performance": {
-    headline: "Who are my best and worst vendors?",
-    helper: "Sell-through, lead time, and fill-rate across the vendor mix."
+  "Account coverage": {
+    headline: "Where are the gaps?",
+    helper: "New, active, inactive, and at-risk customer accounts."
   },
-  "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."
+  Commission: {
+    headline: "What's our commission rate?",
+    helper: "Outstanding balances, aging buckets, and effective commission yield."
   }
-};
-ae["Customer retention"].beta = !0;
-const _e = {
-  Overbought: {
+}, _e = {
+  Revenue: {
     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,
-        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"],
-        cardType: "standard"
-      },
-      {
-        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" }
-        ],
-        cardType: "stacked-group",
-        stackedTimeframes: ["MTD", "QTD", "YTD"]
-      }
-    ],
-    secondary: [
-      {
-        id: "ob-sku-coverage",
-        label: "SKUs over plan",
-        value: "342",
-        desc: "SKUs exceeding planned forward cover.",
-        cardType: "standard"
-      },
-      {
-        id: "ob-vendor-share",
-        label: "Top vendor share",
-        value: "38%",
-        desc: "Share of overbought inventory concentrated in the top vendor.",
-        donut: !0,
-        accent: "#7c3aed",
-        cardType: "donut",
-        donutValue: 0.38,
-        accentColor: "#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,
-        cardType: "name"
-      },
-      {
-        id: "ws-velocity",
-        label: "Velocity Δ",
-        value: "+12.4%",
-        desc: "Rolling 7-day velocity change versus the prior comparable period.",
-        variants: ["1×1"],
-        cardType: "sparkline",
-        sparklineData: [10, 12, 15, 14, 18, 21, 19, 23, 25, 28]
-      },
-      {
-        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.",
-        cardType: "stacked-group",
-        stackedTimeframes: ["MTD", "QTD", "YTD", "LYTD", "7D"]
-      }
-    ],
-    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,
-        cardType: "sparkline",
-        sparklineData: [3, 4, 5, 6, 6, 7, 8, 8]
-      }
-    ]
-  },
-  "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,
-        cardType: "donut",
-        donutValue: 1.02,
-        accentColor: "#16a34a"
-      },
-      {
-        id: "pl-units-pace",
-        label: "Units pace",
-        value: "94%",
-        desc: "Units pace versus plan, period-to-date.",
-        donut: !0,
-        accent: "#f59e0b",
-        cardType: "donut",
-        donutValue: 0.94,
-        accentColor: "#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.",
-        cardType: "stacked-group",
-        stackedTimeframes: ["MTD", "QTD", "YTD"]
-      },
-      // PHASE 17 D1 — agency-revenue port (J1) + commission-economics port (J6)
       {
         id: "agency-sales",
         label: "Sales",
@@ -500,15 +351,22 @@ const _e = {
         desc: "Agency total sales with trend sparkline",
         cardType: "sparkline",
         sparklineData: [620, 640, 680, 700, 740, 760, 790, 820, 850, 892],
-        prefix: "$"
+        prefix: "$",
+        startHere: !0
       },
       {
-        id: "agency-commission",
-        label: "Commissions",
-        value: "$133,868",
-        desc: "Total commission earned by the agency",
-        cardType: "standard",
-        prefix: "$"
+        id: "agency-sales-stacked",
+        label: "Sales",
+        value: "$892,450",
+        desc: "Agency sales across three timeframes at a glance (MTD shown)",
+        variants: ["1×3"],
+        subStats: [
+          { label: "MTD", value: "$892K" },
+          { label: "QTD", value: "$2.4M" },
+          { label: "YTD", value: "$8.6M" }
+        ],
+        cardType: "stacked-group",
+        stackedTimeframes: ["MTD", "QTD", "YTD"]
       },
       {
         id: "agency-growth",
@@ -528,6 +386,20 @@ const _e = {
         sparklineData: [2100, 2150, 2200, 2180, 2250, 2280, 2300, 2320, 2335, 2340],
         prefix: "$"
       },
+      {
+        id: "agency-aov-stacked",
+        label: "Avg Order",
+        value: "$2,340",
+        desc: "Average order value across three timeframes",
+        variants: ["1×3"],
+        subStats: [
+          { label: "MTD", value: "$2,340" },
+          { label: "QTD", value: "$2,280" },
+          { label: "YTD", value: "$2,210" }
+        ],
+        cardType: "stacked-group",
+        stackedTimeframes: ["MTD", "QTD", "YTD"]
+      },
       {
         id: "agency-conversion",
         label: "Conversion",
@@ -537,7 +409,9 @@ const _e = {
         donutValue: 0.68,
         accentColor: "#10b981",
         suffix: "%"
-      },
+      }
+    ],
+    secondary: [
       {
         id: "agency-revenue-compact",
         label: "Total Revenue",
@@ -547,23 +421,6 @@ const _e = {
         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)",
-        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)",
-        cardType: "stacked-group",
-        stackedTimeframes: ["MTD", "QTD", "YTD"]
-      },
       {
         id: "agency-yoy-versus",
         label: "YoY Comparison",
@@ -587,70 +444,19 @@ const _e = {
           { 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",
-        cardType: "standard",
-        prefix: "$"
-      },
-      {
-        id: "agency-commission-rate",
-        label: "Commission",
-        value: "8.4%",
-        desc: "Effective commission rate %",
-        cardType: "standard",
-        suffix: "%"
-      },
-      {
-        id: "agency-commission-aging",
-        label: "Commission Aging",
-        value: "$24K",
-        desc: "Unpaid commission aging by buckets",
-        cardType: "bars",
-        barData: [4, 8, 7, 5]
       }
     ]
   },
-  "Orders on time": {
+  "Order flow": {
     primary: [
-      {
-        id: "ot-on-time-rate",
-        label: "On-time rate",
-        value: "94.2%",
-        desc: "Share of orders shipped within SLA.",
-        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,
-        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",
         cardType: "bars",
-        barData: [12, 18, 15, 22, 19, 25, 28]
-      },
-      {
-        id: "agency-unassigned-orders",
-        label: "Unassigned",
-        value: "0",
-        desc: "Orders awaiting salesperson assignment",
-        cardType: "standard"
+        barData: [12, 18, 15, 22, 19, 25, 28],
+        startHere: !0
       },
       {
         id: "agency-orders-compact",
@@ -660,12 +466,17 @@ const _e = {
         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",
+        variants: ["1×3"],
+        subStats: [
+          { label: "MTD", value: "156" },
+          { label: "QTD", value: "482" },
+          { label: "YTD", value: "1,847" }
+        ],
         cardType: "stacked-group",
         stackedTimeframes: ["MTD", "QTD", "YTD"]
       },
@@ -677,6 +488,13 @@ const _e = {
         cardType: "standard",
         prefix: "$"
       },
+      {
+        id: "agency-unassigned-orders",
+        label: "Unassigned",
+        value: "0",
+        desc: "Orders awaiting salesperson assignment",
+        cardType: "standard"
+      },
       {
         id: "agency-cancel-rate",
         label: "Cancel Rate",
@@ -688,29 +506,37 @@ const _e = {
       }
     ]
   },
-  "Vendor performance": {
+  "Rep performance": {
     primary: [
       {
-        id: "vp-top-vendor",
-        label: "Top vendor",
-        value: "Acme Co.",
-        desc: "Highest sell-through vendor over the trailing 30 days.",
-        startHere: !0,
-        cardType: "name"
+        id: "agency-top-rep",
+        label: "#1 Rep",
+        value: "Sarah Mitchell",
+        desc: "Top-performing rep on the team this period",
+        cardType: "name",
+        startHere: !0
       },
       {
-        id: "vp-fill-rate",
-        label: "Fill rate",
-        value: "97.1%",
-        desc: "Vendor fill rate against placed orders.",
-        donut: !0,
-        accent: "#2563eb",
-        cardType: "donut",
-        donutValue: 0.971,
-        accentColor: "#2563eb",
-        suffix: "%"
+        id: "agency-quota",
+        label: "Below Quota",
+        value: "3 of 12",
+        desc: "Reps currently tracking under their quota",
+        cardType: "ratio",
+        numerator: 3,
+        denominator: 12
       },
-      // PHASE 17 D1 — agency-brand-portfolio port (J3)
+      {
+        id: "agency-rep-leaderboard-sales",
+        label: "Rep Sales",
+        value: "Top 5",
+        desc: "Sales leaderboard across the rep team",
+        cardType: "leaderboard",
+        catalogValue: "Top 5"
+      }
+    ]
+  },
+  "Brand portfolio": {
+    primary: [
       {
         id: "agency-mfr-mix",
         label: "Mfr Mix",
@@ -722,7 +548,8 @@ const _e = {
           { label: "B", value: 28, color: "#1d6fd8" },
           { label: "C", value: 22, color: "#10b981" },
           { label: "D", value: 15, color: "#f59e0b" }
-        ]
+        ],
+        startHere: !0
       },
       {
         id: "agency-mfr-new-line",
@@ -733,58 +560,15 @@ const _e = {
       }
     ]
   },
-  "Assortment mix": {
+  "Account coverage": {
     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,
-        cardType: "segmented",
-        segments: [
-          { label: "Core", value: 58, color: "#7c3aed" },
-          { label: "Growth", value: 27, color: "#10b981" },
-          { label: "Test", value: 15, color: "#f59e0b" }
-        ]
-      }
-    ]
-  },
-  "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,
-        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.",
-        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",
-        cardType: "standard"
+        cardType: "standard",
+        startHere: !0
       },
       {
         id: "agency-customers-compact",
@@ -811,6 +595,35 @@ const _e = {
         suffix: "%"
       }
     ]
+  },
+  Commission: {
+    primary: [
+      {
+        id: "agency-outstanding",
+        label: "Outstanding",
+        value: "$24,500",
+        desc: "Unpaid order balance across all accounts",
+        cardType: "standard",
+        prefix: "$",
+        startHere: !0
+      },
+      {
+        id: "agency-commission-rate",
+        label: "Commission",
+        value: "8.4%",
+        desc: "Effective commission rate %",
+        cardType: "standard",
+        suffix: "%"
+      },
+      {
+        id: "agency-commission-aging",
+        label: "Commission Aging",
+        value: "$24K",
+        desc: "Unpaid commission aging by buckets",
+        cardType: "bars",
+        barData: [4, 8, 7, 5]
+      }
+    ]
   }
 };
 function Ce({
@@ -818,7 +631,7 @@ function Ce({
   activeLens: t,
   onLensChange: r,
   variant: l = "pills",
-  lensMeta: a = ae
+  lensMeta: a = ve
 }) {
   return l === "pills" ? /* @__PURE__ */ n("div", { className: "cat-pills-wrap", children: /* @__PURE__ */ n("div", { className: "cat-pills", role: "tablist", "aria-label": "Metric lenses", children: e.map((i) => {
     const u = i === t, o = a[i], s = ["cat-pill"];
@@ -847,7 +660,7 @@ function je({
   activeLens: t,
   onLensChange: r
 }) {
-  const [l, a] = x(!1), i = Y(null), u = () => {
+  const [l, a] = A(!1), i = K(null), u = () => {
     i.current != null && (window.clearTimeout(i.current), i.current = null);
   }, o = () => {
     u(), i.current = window.setTimeout(() => a(!1), 100);
@@ -939,7 +752,7 @@ function te({ tiles: e, selectedTileId: t, onSelectTile: r, renderTile: l }) {
               style: { pointerEvents: "none", width: "100%", height: "100%" },
               "aria-hidden": "true",
               children: a.donut ? /* @__PURE__ */ n(
-                de,
+                ce,
                 {
                   variant: "donut",
                   label: a.label,
@@ -950,7 +763,7 @@ function te({ tiles: e, selectedTileId: t, onSelectTile: r, renderTile: l }) {
                   colSpan: c
                 }
               ) : /* @__PURE__ */ n(
-                de,
+                ce,
                 {
                   variant: "standard",
                   label: a.label,
@@ -968,12 +781,12 @@ function te({ tiles: e, selectedTileId: t, onSelectTile: r, renderTile: l }) {
     );
   }) });
 }
-const se = ge(null);
-function re() {
-  return be(se);
+const ae = fe(null);
+function se() {
+  return ge(ae);
 }
-function xt({ mode: e, dispatch: t }) {
-  const r = re();
+function At({ mode: e, dispatch: t }) {
+  const r = se();
   if (r == null && e == null) return null;
   const l = r?.mode ?? e ?? "add", a = r?.selectedTileId ?? null, i = r?.description ?? null, u = a == null;
   return /* @__PURE__ */ f("div", { className: "panel-footer catalog", children: [
@@ -1015,7 +828,7 @@ function xt({ mode: e, dispatch: t }) {
     ] })
   ] });
 }
-function ue(e, t) {
+function de(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;
@@ -1026,37 +839,37 @@ function ue(e, t) {
   return !1;
 }
 function Ze() {
-  const t = re()?.description ?? null;
+  const t = se()?.description ?? null;
   return t == null ? /* @__PURE__ */ n("span", { style: { fontStyle: "italic" }, children: "Tap a metric to see its description" }) : /* @__PURE__ */ n("span", { children: t });
 }
-function At({
+function xt({
   isOpen: e,
-  lenses: t = ve,
+  lenses: t = be,
   defaultLens: r = ye,
   tilesByLens: l = _e,
-  lensMeta: a = ae,
+  lensMeta: a = ve,
   renderTile: i,
   onAdd: u
 }) {
-  const o = O(), [s, c] = x(r), [d, m] = x(null), [h, b] = x(null), [p, _] = x(""), E = l[s] ?? { primary: [] }, S = a[s], v = ie(
-    () => E.primary.filter((T) => ue(T, p)),
-    [E.primary, p]
-  ), N = ie(
-    () => (E.secondary ?? []).filter((T) => ue(T, p)),
-    [E.secondary, p]
+  const o = O(), [s, c] = A(r), [d, m] = A(null), [h, b] = A(null), [p, _] = A(""), P = l[s] ?? { primary: [] }, E = a[s], y = le(
+    () => P.primary.filter((S) => de(S, p)),
+    [P.primary, p]
+  ), N = le(
+    () => (P.secondary ?? []).filter((S) => de(S, p)),
+    [P.secondary, p]
   ), I = () => {
     d != null && u?.(d), o?.dispatch({ type: "CLOSE_PANEL", reason: "apply-button" });
-  }, $ = () => o?.dispatch({ type: "CLOSE_PANEL", reason: "header-x" }), R = d == null;
+  }, R = () => o?.dispatch({ type: "CLOSE_PANEL", reason: "header-x" }), $ = d == null;
   return /* @__PURE__ */ n(
-    se.Provider,
+    ae.Provider,
     {
       value: { mode: "add", selectedTileId: d, description: h },
       children: /* @__PURE__ */ n(
-        B,
+        Y,
         {
           variant: "no-stage",
           title: "Add a metric",
-          onClose: $,
+          onClose: R,
           footer: {
             left: /* @__PURE__ */ n(Ze, {}),
             right: /* @__PURE__ */ n(
@@ -1065,7 +878,7 @@ function At({
                 id: "btn-cat-add",
                 type: "button",
                 className: "gloss-panel-chrome-v2__footer-btn gloss-panel-chrome-v2__footer-btn--primary",
-                disabled: R,
+                disabled: $,
                 onClick: I,
                 children: "Add metric"
               }
@@ -1080,7 +893,7 @@ function At({
                 placeholder: "Search metrics",
                 "aria-label": "Search metrics",
                 value: p,
-                onChange: (T) => _(T.target.value)
+                onChange: (S) => _(S.target.value)
               }
             ) }),
             /* @__PURE__ */ n(
@@ -1090,22 +903,22 @@ function At({
                 activeLens: s,
                 lensMeta: a,
                 variant: "pills",
-                onLensChange: (T) => {
-                  c(T), m(null), b(null), _("");
+                onLensChange: (S) => {
+                  c(S), m(null), b(null), _("");
                 }
               }
             ),
-            S && /* @__PURE__ */ f("div", { className: "cat-lens-meta", children: [
-              /* @__PURE__ */ n("h3", { className: "cat-lens-headline", children: S.headline }),
-              /* @__PURE__ */ n("p", { className: "cat-lens-helper", children: S.helper })
+            E && /* @__PURE__ */ f("div", { className: "cat-lens-meta", children: [
+              /* @__PURE__ */ n("h3", { className: "cat-lens-headline", children: E.headline }),
+              /* @__PURE__ */ n("p", { className: "cat-lens-helper", children: E.helper })
             ] }),
             /* @__PURE__ */ n(
               te,
               {
-                tiles: v,
+                tiles: y,
                 selectedTileId: d,
-                onSelectTile: (T, L) => {
-                  m(T), b(L);
+                onSelectTile: (S, L) => {
+                  m(S), b(L);
                 },
                 renderTile: i
               }
@@ -1117,14 +930,14 @@ function At({
                 {
                   tiles: N,
                   selectedTileId: d,
-                  onSelectTile: (T, L) => {
-                    m(T), b(L);
+                  onSelectTile: (S, L) => {
+                    m(S), b(L);
                   },
                   renderTile: i
                 }
               )
             ] }),
-            v.length === 0 && N.length === 0 && p.length > 0 && /* @__PURE__ */ f("div", { className: "cat-empty", children: [
+            y.length === 0 && N.length === 0 && p.length > 0 && /* @__PURE__ */ f("div", { className: "cat-empty", children: [
               'No metrics match "',
               p,
               '".'
@@ -1136,28 +949,28 @@ function At({
   );
 }
 function Xe() {
-  const t = re()?.description ?? null;
-  return t == null ? /* @__PURE__ */ n("em", { children: "Tap a metric to see its description" }) : /* @__PURE__ */ n(K, { children: t });
+  const t = se()?.description ?? null;
+  return t == null ? /* @__PURE__ */ n("em", { children: "Tap a metric to see its description" }) : /* @__PURE__ */ n(V, { children: t });
 }
 function kt({
   isOpen: e,
   replacingLabel: t,
-  lenses: r = ve,
+  lenses: r = be,
   defaultLens: l = ye,
   tilesByLens: a = _e,
   renderTile: i
 }) {
-  const u = O(), [o, s] = x(l), [c, d] = x(null), [m, h] = x(null), b = a[o] ?? { primary: [] }, p = [...b.primary, ...b.secondary ?? []], _ = () => u?.dispatch({ type: "CLOSE_PANEL", reason: "apply-button" }), E = () => u?.dispatch({ type: "CLOSE_PANEL", reason: "header-x" }), S = c == null;
+  const u = O(), [o, s] = A(l), [c, d] = A(null), [m, h] = A(null), b = a[o] ?? { primary: [] }, p = [...b.primary, ...b.secondary ?? []], _ = () => u?.dispatch({ type: "CLOSE_PANEL", reason: "apply-button" }), P = () => u?.dispatch({ type: "CLOSE_PANEL", reason: "header-x" }), E = c == null;
   return /* @__PURE__ */ n(
-    se.Provider,
+    ae.Provider,
     {
       value: { mode: "replace", selectedTileId: c, description: m },
       children: /* @__PURE__ */ n(
-        B,
+        Y,
         {
           variant: "no-stage",
           title: "Replace metric",
-          onClose: E,
+          onClose: P,
           footer: {
             left: /* @__PURE__ */ n(Xe, {}),
             right: /* @__PURE__ */ n(
@@ -1166,7 +979,7 @@ function kt({
                 id: "btn-cat-replace",
                 type: "button",
                 className: "gloss-panel-chrome-v2__footer-btn gloss-panel-chrome-v2__footer-btn--primary",
-                disabled: S,
+                disabled: E,
                 onClick: _,
                 children: "Replace metric"
               }
@@ -1182,8 +995,8 @@ function kt({
               {
                 lenses: r,
                 activeLens: o,
-                onLensChange: (v) => {
-                  s(v), d(null), h(null);
+                onLensChange: (y) => {
+                  s(y), d(null), h(null);
                 }
               }
             ),
@@ -1192,8 +1005,8 @@ function kt({
               {
                 tiles: p,
                 selectedTileId: c,
-                onSelectTile: (v, N) => {
-                  d(v), h(N);
+                onSelectTile: (y, N) => {
+                  d(y), h(N);
                 },
                 renderTile: i
               }
@@ -1204,12 +1017,12 @@ function kt({
     }
   );
 }
-const Ne = ge(null);
-function Te() {
-  return be(Ne);
+const Ne = fe(null);
+function Se() {
+  return ge(Ne);
 }
 function Je(e = {}) {
-  const t = Te(), r = t?.createPage, l = t?.setPages;
+  const t = Se(), r = t?.createPage, l = t?.setPages;
   return /* @__PURE__ */ f(
     "div",
     {
@@ -1240,8 +1053,8 @@ function Je(e = {}) {
     }
   );
 }
-function pe({ page: e, onRename: t, onKebab: r, onDragStart: l, onSwitchPage: a }) {
-  const i = Te(), [u, o] = x(!1), s = Y(null);
+function ue({ page: e, onRename: t, onKebab: r, onDragStart: l, onSwitchPage: a }) {
+  const i = Se(), [u, o] = A(!1), s = K(null);
   F(() => {
     if (!u) return;
     const p = (_) => {
@@ -1346,39 +1159,39 @@ function Dt({
   onCreatePage: s,
   onSwitchPage: c
 }) {
-  const d = O(), [m, h] = x(() => [...t]), b = D((g, C) => {
-    h((w) => w.map((A) => A.id === g ? { ...A, name: C } : A));
+  const d = O(), [m, h] = A(() => [...t]), b = D((g, C) => {
+    h((w) => w.map((x) => x.id === g ? { ...x, name: C } : x));
   }, []), p = D((g) => {
     h((C) => {
-      const w = C.find((U) => U.id === g);
+      const w = C.find((z) => z.id === g);
       if (!w) return C;
-      const A = {
+      const x = {
         id: `${w.id}-copy-${Date.now()}`,
         name: `${w.name} copy`,
         active: !1
-      }, k = C.findIndex((U) => U.id === g);
-      return [...C.slice(0, k + 1), A, ...C.slice(k + 1)];
+      }, k = C.findIndex((z) => z.id === g);
+      return [...C.slice(0, k + 1), x, ...C.slice(k + 1)];
     });
   }, []), _ = D((g) => {
     h((C) => C.filter((w) => w.id !== g));
-  }, []), E = D((g) => {
+  }, []), P = D((g) => {
     h((C) => {
-      const w = new Map(C.map((k) => [k.id, k])), A = g.map((k) => w.get(k)).filter(Boolean);
-      return A.length === C.length ? A : C;
+      const w = new Map(C.map((k) => [k.id, k])), x = g.map((k) => w.get(k)).filter(Boolean);
+      return x.length === C.length ? x : C;
     });
-  }, []), S = r != null, v = S ? r : m, N = l != null ? v.map((g) => ({ ...g, active: g.id === l })) : [...v], I = a ?? (S ? void 0 : b), $ = i ?? (S ? void 0 : p), R = u ?? (S ? void 0 : _), T = o ?? (S ? void 0 : E), L = D(
+  }, []), E = r != null, y = E ? r : m, N = l != null ? y.map((g) => ({ ...g, active: g.id === l })) : [...y], I = a ?? (E ? void 0 : b), R = i ?? (E ? void 0 : p), $ = u ?? (E ? void 0 : _), S = o ?? (E ? void 0 : P), L = D(
     (g) => {
-      S || h(g);
+      E || h(g);
     },
-    [S]
-  ), W = D(
+    [E]
+  ), q = D(
     (g) => {
       const C = g[0]?.items.map((w) => w.id) ?? [];
-      C.length > 0 && T && T(C);
+      C.length > 0 && S && S(C);
     },
-    [T]
-  ), G = N.map((g) => `${g.id}:${g.name}`).join("|"), Q = T != null && N.length > 1 ? /* @__PURE__ */ n(
-    Ee,
+    [S]
+  ), Q = N.map((g) => `${g.id}:${g.name}`).join("|"), W = S != null && N.length > 1 ? /* @__PURE__ */ n(
+    Pe,
     {
       zones: [
         {
@@ -1386,10 +1199,10 @@ function Dt({
           items: N.map((g) => ({ ...g, id: g.id }))
         }
       ],
-      onZoneChange: W,
+      onZoneChange: q,
       renderZone: (g, C, w) => /* @__PURE__ */ n("div", { className: "pm-list", role: "list", children: w }),
       renderItem: (g) => /* @__PURE__ */ n(
-        pe,
+        ue,
         {
           page: g,
           onSwitchPage: c
@@ -1397,15 +1210,15 @@ function Dt({
         g.id
       )
     },
-    G
+    Q
   ) : /* @__PURE__ */ n("div", { className: "pm-list", role: "list", children: N.map((g) => /* @__PURE__ */ n(
-    pe,
+    ue,
     {
       page: g,
       onSwitchPage: c
     },
     g.id
-  )) }), q = () => d?.dispatch({ type: "CLOSE_PANEL", reason: "header-x" });
+  )) }), G = () => d?.dispatch({ type: "CLOSE_PANEL", reason: "header-x" });
   return /* @__PURE__ */ n(
     Ne.Provider,
     {
@@ -1413,19 +1226,19 @@ function Dt({
         pages: N,
         setPages: L,
         renamePage: I,
-        duplicatePage: $,
-        deletePage: R,
+        duplicatePage: R,
+        deletePage: $,
         // Sprint 2026-05-20 — propagate live create binding for footer.
         createPage: s
       },
       children: /* @__PURE__ */ n(
-        B,
+        Y,
         {
           variant: "no-stage",
           title: "Manage pages",
-          onClose: q,
+          onClose: G,
           footer: { right: /* @__PURE__ */ n(Je, {}) },
-          children: /* @__PURE__ */ n("div", { "data-shell": "page-management", "aria-hidden": !e, children: Q })
+          children: /* @__PURE__ */ n("div", { "data-shell": "page-management", "aria-hidden": !e, children: W })
         }
       )
     }
@@ -1452,7 +1265,7 @@ const Lt = {
   background: "rgba(0, 0, 0, 0.04)"
 };
 function Ot() {
-  const { state: e, dispatch: t, getCloseLog: r } = Pe();
+  const { state: e, dispatch: t, getCloseLog: r } = Te();
   F(() => {
     if (e.activePanelId == null) return;
     function i(u) {
@@ -1460,8 +1273,8 @@ function Ot() {
     }
     return document.addEventListener("keydown", i), () => document.removeEventListener("keydown", i);
   }, [e.activePanelId, t]);
-  const l = Y(e);
-  Ae(() => {
+  const l = K(e);
+  xe(() => {
     l.current = e;
   }), F(() => {
     if (process.env.NODE_ENV === "production") return;
@@ -1488,7 +1301,7 @@ function Ot() {
 }
 const at = 700;
 function st(e) {
-  const [t, r] = x(null), l = Y(null);
+  const [t, r] = A(null), l = K(null);
   return F(() => {
     if (e != null) {
       l.current != null && (clearTimeout(l.current), l.current = null), r(null);
@@ -1510,13 +1323,13 @@ function Mt({ panelComponents: e, children: t }) {
   return u == null && t == null ? (process.env.NODE_ENV !== "production" && console.error(
     "[panels] No panel component registered for activePanelId:",
     a
-  ), null) : /* @__PURE__ */ n(xe, { isOpen: i, children: u != null ? /* @__PURE__ */ n(u, { isOpen: i }) : t });
+  ), null) : /* @__PURE__ */ n(Ae, { isOpen: i, children: u != null ? /* @__PURE__ */ n(u, { isOpen: i }) : t });
 }
-function me(e) {
+function pe(e) {
   return e === null ? null : e.kind === "manage-pages-action" ? `global-${e.align ?? "left"}` : e.kind === "card-overflow" || e.kind === "empty-cell" ? `section-${e.sectionIndex}` : null;
 }
-const rt = 685, he = 627, ot = "cubic-bezier(0.22, 1, 0.36, 1)", lt = 200;
-function Se(e, t) {
+const rt = 685, me = 627, ot = "cubic-bezier(0.22, 1, 0.36, 1)", lt = 200;
+function Ee(e, t) {
   if (typeof window > "u") return t;
   const r = window.getComputedStyle(document.documentElement).getPropertyValue(e).trim();
   if (!r) return t;
@@ -1526,13 +1339,13 @@ function Se(e, t) {
 function it(e, t) {
   return typeof window > "u" ? t : window.getComputedStyle(document.documentElement).getPropertyValue(e).trim() || t;
 }
-function H(e) {
+function U(e) {
   e.dispatch({ type: "OPEN_PANEL", panelId: e.panelId, trigger: e.trigger });
 }
 function ct(e) {
   const { mountEl: t, chromeEl: r, reducedMotion: l, onAssert: a } = e;
   if (t == null || r == null) {
-    H(e), a?.({ branch: "slide-fallback-no-dom", timestamp: Date.now() });
+    U(e), a?.({ branch: "slide-fallback-no-dom", timestamp: Date.now() });
     return;
   }
   if (l) {
@@ -1540,12 +1353,12 @@ function ct(e) {
     return;
   }
   if (typeof r.animate != "function") {
-    H(e), a?.({ branch: "slide-no-waapi", timestamp: Date.now() });
+    U(e), a?.({ 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 = Se("--panel-open-dur", rt), o = it("--panel-easing", ot), s = r.animate(
+  const u = Ee("--panel-open-dur", rt), o = it("--panel-easing", ot), s = r.animate(
     [{ transform: "translateY(100%)" }, { transform: "translateY(0)" }],
     { duration: u, easing: o, fill: "forwards" }
   );
@@ -1560,10 +1373,10 @@ function ct(e) {
 function dt(e) {
   const { mountEl: t, onAssert: r } = e;
   if (t == null) {
-    e.dispatch({ type: "CLOSE_PANEL", reason: "mutex-handoff" }), setTimeout(() => H(e), he), r?.({ branch: "handoff-fallback-no-mount", timestamp: Date.now() });
+    e.dispatch({ type: "CLOSE_PANEL", reason: "mutex-handoff" }), setTimeout(() => U(e), me), r?.({ branch: "handoff-fallback-no-mount", timestamp: Date.now() });
     return;
   }
-  const l = Se("--panel-close-dur", he);
+  const l = Ee("--panel-close-dur", me);
   let a = !1, i = null;
   const u = (s) => {
     s.target !== t || s.propertyName !== "max-height" || a || (a = !0, i != null && clearTimeout(i), t.removeEventListener("transitionend", u), e.dispatch({ type: "OPEN_PANEL", panelId: e.panelId, trigger: e.trigger }), r?.({ branch: "handoff-complete", timestamp: Date.now() }));
@@ -1578,7 +1391,7 @@ function ut(e) {
     e.dispatch({ type: "OPEN_PANEL", panelId: e.panelId, trigger: e.trigger }), r?.({ branch: "blocked-dirty", timestamp: Date.now() });
     return;
   }
-  const l = me(t.activeTrigger), a = me(e.trigger);
+  const l = pe(t.activeTrigger), a = pe(e.trigger);
   if (!!t.activePanelId && l != null && l === a) {
     ct(e);
     return;
@@ -1587,14 +1400,14 @@ function ut(e) {
     dt(e);
     return;
   }
-  H(e), r?.({ branch: "fresh-open", timestamp: Date.now() });
+  U(e), r?.({ branch: "fresh-open", timestamp: Date.now() });
 }
 function pt() {
   if (!(typeof window > "u"))
     return window.__panelsAsserter;
 }
 function It() {
-  const e = O(), t = fe();
+  const e = O(), t = he();
   return D(
     (r, l) => {
       if (!e)
@@ -1616,10 +1429,10 @@ function It() {
     [e, t]
   );
 }
-function $t({ children: e }) {
+function Rt({ children: e }) {
   return /* @__PURE__ */ n("div", { className: "clone-stage", children: e });
 }
-let V = !1, j = null;
+let B = !1, j = null;
 function ne() {
   const e = [];
   let t = "cleaned";
@@ -1644,21 +1457,21 @@ function ne() {
   };
 }
 const Z = "8px 8px 0px", X = "64px", J = "inset(0px 0px 60px 0px)", ee = "inset(0px -40px -40px -40px)";
-function y(e, t, r, l, a) {
+function v(e, t, r, l, a) {
   return { id: e, constraint: t, expected: r, actual: l, pass: a };
 }
 function M(e) {
   const t = parseInt(e, 10);
   return Number.isFinite(t) ? t : NaN;
 }
-function oe() {
+function re() {
   const e = [], t = document.querySelector(".gloss-panel-mount"), r = t?.querySelector(".gloss-panel-chrome") ?? null, l = document.querySelector(".gloss-panel-coordinator") ?? document.querySelector("[data-panel-coordinator]"), a = document.querySelector(".bell-cutout"), i = document.querySelector(".bell-popover"), u = document.querySelector(".gloss-bottom-toolbar");
   if (!t)
-    e.push(y("C1", "mount --reveal-y matches clip-path inset-bottom Npx", "mount present", "absent", !1));
+    e.push(v("C1", "mount --reveal-y matches clip-path inset-bottom Npx", "mount present", "absent", !1));
   else {
     const o = getComputedStyle(t), s = o.getPropertyValue("--reveal-y").trim() || t.style.getPropertyValue("--reveal-y").trim(), c = o.clipPath || t.style.clipPath || "", d = c.match(/inset\(\s*0(?:px)?\s+0(?:px)?\s+(\d+)px\s+0(?:px)?\s*\)/), m = d ? parseInt(d[1], 10) : NaN, h = M(s), b = Number.isFinite(m) && Number.isFinite(h) && m === h;
     e.push(
-      y(
+      v(
         "C1",
         "mount --reveal-y matches clip-path inset-bottom Npx",
         `inset(0 0 ${h}px 0) === --reveal-y(${h}px)`,
@@ -1668,19 +1481,19 @@ function oe() {
     );
   }
   if (!t)
-    e.push(y("C2", "mount padding constant", Z, "absent", !1));
+    e.push(v("C2", "mount padding constant", Z, "absent", !1));
   else {
     const o = t.style.padding, s = getComputedStyle(t), c = o || s.padding || "", d = c === Z || c === "8px 8px 0px 8px";
-    e.push(y("C2", "mount padding constant", Z, c || "n/a", d));
+    e.push(v("C2", "mount padding constant", Z, c || "n/a", d));
   }
   if (!t)
-    e.push(y("C3", "mount.bottom resolves to var(--tb-h)=64px", X, "absent", !1));
+    e.push(v("C3", "mount.bottom resolves to var(--tb-h)=64px", X, "absent", !1));
   else {
     const s = getComputedStyle(t).bottom || t.style.bottom || "", c = s === X;
-    e.push(y("C3", "mount.bottom resolves to var(--tb-h)=64px", X, s || "n/a", c));
+    e.push(v("C3", "mount.bottom resolves to var(--tb-h)=64px", X, s || "n/a", c));
   }
   if (!r)
-    e.push(y("C4", "panel-chrome height formula = (row-h*3)+(row-gap*3)-8px", "formula match", "absent", !1));
+    e.push(v("C4", "panel-chrome height formula = (row-h*3)+(row-gap*3)-8px", "formula match", "absent", !1));
   else {
     const o = getComputedStyle(r), s = M(
       o.getPropertyValue("--row-h").trim() || r.style.getPropertyValue("--row-h").trim() || "0"
@@ -1688,7 +1501,7 @@ function oe() {
       o.getPropertyValue("--row-gap").trim() || r.style.getPropertyValue("--row-gap").trim() || "0"
     ), d = s * 3 + c * 3 - 8, m = M(o.height || r.style.height || ""), h = Number.isFinite(s) && Number.isFinite(c) && Number.isFinite(m) && Number.isFinite(d) && m === d;
     e.push(
-      y(
+      v(
         "C4",
         "panel-chrome height formula = (row-h*3)+(row-gap*3)-8px",
         `${d}px (rh=${s} rg=${c})`,
@@ -1699,7 +1512,7 @@ function oe() {
   }
   if (!l || !r)
     e.push(
-      y(
+      v(
         "C5",
         'coordinator perspective + origin "center bottom"; chrome perspective-style flat',
         "present",
@@ -1710,7 +1523,7 @@ function oe() {
   else {
     const o = getComputedStyle(l), s = getComputedStyle(r), c = o.perspective || l.style.perspective || "", d = (o.perspectiveOrigin || l.style.perspectiveOrigin || "").trim(), m = s.perspectiveStyle || r.style.perspectiveStyle || "", _ = c !== "" && c !== "none" && (d === "center bottom" || d === "50% 100%") && m === "flat";
     e.push(
-      y(
+      v(
         "C5",
         'coordinator perspective + origin "center bottom"; chrome perspective-style flat',
         "perspective:not-none, origin:center bottom, chrome-style:flat",
@@ -1731,8 +1544,8 @@ function oe() {
         }
         for (const m of d)
           if (m.name === "stage-spin") {
-            const b = Array.from(m.cssRules), p = b.find((N) => N.keyText === "0%" || N.keyText === "from"), _ = b.find((N) => N.keyText === "100%" || N.keyText === "to"), E = p?.style.transform ?? "", S = _?.style.transform ?? "", v = /rotateY\(\s*0(?:deg)?\s*\)/;
-            o = v.test(E) && v.test(S), s = `0%=${E || "n/a"} 100%=${S || "n/a"}`;
+            const b = Array.from(m.cssRules), p = b.find((N) => N.keyText === "0%" || N.keyText === "from"), _ = b.find((N) => N.keyText === "100%" || N.keyText === "to"), P = p?.style.transform ?? "", E = _?.style.transform ?? "", y = /rotateY\(\s*0(?:deg)?\s*\)/;
+            o = y.test(P) && y.test(E), s = `0%=${P || "n/a"} 100%=${E || "n/a"}`;
             break;
           }
         if (s !== "absent") break;
@@ -1741,7 +1554,7 @@ function oe() {
       s = "inspection-error";
     }
     e.push(
-      y(
+      v(
         "C6",
         "@keyframes stage-spin 0% AND 100% anchor at rotateY(0)",
         "both frames rotateY(0)",
@@ -1753,15 +1566,15 @@ function oe() {
   {
     const o = document.documentElement, s = getComputedStyle(o), c = s.getPropertyValue("--panel-open-dur").trim() || o.style.getPropertyValue("--panel-open-dur").trim(), d = s.getPropertyValue("--panel-close-dur").trim() || o.style.getPropertyValue("--panel-close-dur").trim(), m = M(c) || parseFloat(c) * (c.endsWith("s") && !c.endsWith("ms") ? 1e3 : 1), h = M(d) || parseFloat(d) * (d.endsWith("s") && !d.endsWith("ms") ? 1e3 : 1), b = Number.isFinite(m) && Number.isFinite(h) && m > h;
     e.push(
-      y("C7", "--panel-open-dur > --panel-close-dur", "open > close", `open=${c || "n/a"} close=${d || "n/a"}`, b)
+      v("C7", "--panel-open-dur > --panel-close-dur", "open > close", `open=${c || "n/a"} close=${d || "n/a"}`, b)
     );
   }
   if (!a)
-    e.push(y("C8", "BellCutout zero computed animation/transition", "no inline timing", "absent", !1));
+    e.push(v("C8", "BellCutout zero computed animation/transition", "no inline timing", "absent", !1));
   else {
     const o = getComputedStyle(a), s = o.animationName || "", c = o.transitionProperty || "", d = (s === "" || s === "none") && (c === "" || c === "none" || c === "all");
     e.push(
-      y(
+      v(
         "C8",
         "BellCutout zero computed animation/transition",
         "animation:none AND transition:none",
@@ -1771,17 +1584,17 @@ function oe() {
     );
   }
   if (!t)
-    e.push(y("C9", "mount closed-state clipPath", J, "absent", !1));
+    e.push(v("C9", "mount closed-state clipPath", J, "absent", !1));
   else {
     const o = t.style.clipPath, s = getComputedStyle(t), c = o || s.clipPath || "", d = c === J;
-    e.push(y("C9", "mount closed-state clipPath", J, c || "n/a", d));
+    e.push(v("C9", "mount closed-state clipPath", J, c || "n/a", d));
   }
   if (!i)
-    e.push(y("C10", "bell-popover parentElement === document.body (open)", "body", "absent", !1));
+    e.push(v("C10", "bell-popover parentElement === document.body (open)", "body", "absent", !1));
   else {
     const o = i.parentElement, s = o === document.body;
     e.push(
-      y(
+      v(
         "C10",
         "bell-popover parentElement === document.body (open)",
         "body",
@@ -1791,19 +1604,19 @@ function oe() {
     );
   }
   if (!l)
-    e.push(y("C11", "coordinator overflow === visible", "visible", "absent", !1));
+    e.push(v("C11", "coordinator overflow === visible", "visible", "absent", !1));
   else {
     const s = getComputedStyle(l).overflow || l.style.overflow || "", c = s === "visible";
-    e.push(y("C11", "coordinator overflow === visible", "visible", s || "n/a", c));
+    e.push(v("C11", "coordinator overflow === visible", "visible", s || "n/a", c));
   }
   if (!u)
-    e.push(y("C12", "toolbar clipPath = inset(0 -40 -40 -40)", ee, "absent", !1));
+    e.push(v("C12", "toolbar clipPath = inset(0 -40 -40 -40)", ee, "absent", !1));
   else {
     const o = u.style.clipPath, s = getComputedStyle(u), c = o || s.clipPath || "", d = c === ee;
-    e.push(y("C12", "toolbar clipPath = inset(0 -40 -40 -40)", ee, c || "n/a", d));
+    e.push(v("C12", "toolbar clipPath = inset(0 -40 -40 -40)", ee, c || "n/a", d));
   }
   return e.push(
-    y(
+    v(
       "C13",
       "same-position slide via WAAPI (mid-transition getAnimations().length > 0)",
       "WAAPI driver wired in orchestrator (source-proof)",
@@ -1811,7 +1624,7 @@ function oe() {
       "wiring_only"
     )
   ), e.push(
-    y(
+    v(
       "C14",
       'cross-position handoff transitionend filtered by propertyName="max-height"',
       "transitionend filter wired in orchestrator (source-proof)",
@@ -1821,7 +1634,7 @@ function oe() {
   ), e;
 }
 function mt(e) {
-  return oe().find((t) => t.id === e);
+  return re().find((t) => t.id === e);
 }
 function ht() {
   const e = ne();
@@ -1833,84 +1646,84 @@ function ht() {
       actual: `valid=${e.valid} mount=${e.mount} chrome=${e.chrome} frozen=${e.frozen} orphans=[${e.orphans.join(",")}]`,
       pass: e.valid
     }
-  ], cc: oe() };
+  ], cc: re() };
 }
 function ft() {
   return {
     enable: gt,
     disable: bt,
-    isEnabled: () => V,
+    isEnabled: () => B,
     getLastReport: () => j,
     recordTransition: (e) => {
-      V && (j = { ...e, ...ne() });
+      B && (j = { ...e, ...ne() });
     },
     assertOnce: () => {
       const e = ne();
       return j = e, e;
     },
-    assertCcOnly: oe,
+    assertCcOnly: re,
     getCcRowById: mt,
     assertPanelTruths: ht
   };
 }
 function gt() {
-  if (V = !0, typeof window > "u") return;
+  if (B = !0, typeof window > "u") return;
   window.__panelsAsserter || (window.__panelsAsserter = ft(), console.info(
     "[panels] asserter enabled (P3b Q12-12 + P6 W5 cc:C1..C14). Inspect via window.__panelsAsserter."
   ));
 }
 function bt() {
-  V = !1;
+  B = !1;
 }
 export {
-  Ut as COMMITS,
-  At as CatalogAddShell,
-  xt as CatalogFooter,
+  zt as COMMITS,
+  xt as CatalogAddShell,
+  At as CatalogFooter,
   kt as CatalogReplaceShell,
-  se as CatalogStateContext,
-  He as CloneCard,
-  $t as CloneStage,
+  ae as CatalogStateContext,
+  Ue as CloneCard,
+  Rt as CloneStage,
   ye as MOCK_DEFAULT_LENS,
-  ve as MOCK_LENSES,
-  ae as MOCK_LENS_META,
+  be as MOCK_LENSES,
+  ve as MOCK_LENS_META,
   et as MOCK_PAGES,
   _e as MOCK_TILES_BY_LENS,
-  zt as NotificationCenterShell,
+  Ht as NotificationCenterShell,
   Lt as PANEL_IDS,
   Je as PageMgmtFooter,
   Dt as PageMgmtShell,
   Ne as PageMgmtStateContext,
-  Ht as PanelBody,
-  Vt as PanelChrome,
-  B as PanelChromeV2,
-  Bt as PanelFooter,
-  Et as PanelFooterMessage,
-  Kt as PanelHeader,
-  Yt as PanelHost,
+  Ut as PanelBody,
+  Bt as PanelChrome,
+  Y as PanelChromeV2,
+  Yt as PanelFooter,
+  Pt as PanelFooterMessage,
+  Vt as PanelHeader,
+  Kt as PanelHost,
   Ot as PanelHostShell,
-  xe as PanelMount,
-  Wt as PanelNavigation,
-  Gt as PanelProvider,
+  Ae as PanelMount,
+  qt as PanelNavigation,
+  Qt as PanelProvider,
   Mt as PanelSlot,
-  Qt as PanelStage,
-  Pt as SettingsShell,
-  oe as assertCcOnly,
+  Wt as PanelStage,
+  Tt as SettingsShell,
+  re as assertCcOnly,
   ne as assertPanelDomShape,
   ht as assertPanelTruths,
-  qt as deriveSurfaceState,
+  Gt as deriveSurfaceState,
   bt as disablePanelAsserter,
   gt as enablePanelAsserter,
   mt as getCcRowById,
   jt as initialState,
-  me as positionKey,
+  pe as positionKey,
   Zt as reducer,
   ut as transitionToPanel,
-  re as useCatalogState,
+  se as useCatalogState,
   wt as useEditingCardId,
-  Te as usePageMgmtState,
-  Pe as usePanelContext,
+  Se as usePageMgmtState,
+  Te as usePanelContext,
   O as usePanelContextOptional,
   Xt as usePanelCoordinator,
-  fe as useReducedMotionPanel,
+  he as useReducedMotionPanel,
   It as useTransitionToPanel
 };