@mt-gloss/ui 0.1.95 → 0.1.97

package/composites-panels.js

@@ -1,36 +1,391 @@
-import { a as h, f as S, u as b, g as N, c as A } from "./COMMITS-By42AA8m.js";
-import { C as ee, b as ne, P as te, e as oe, i as re, r as se, d as ie } from "./COMMITS-By42AA8m.js";
-import { jsx as a, jsxs as m, Fragment as I } from "react/jsx-runtime";
-import { useEffect as y, useRef as L, useLayoutEffect as C, useCallback as v } from "react";
-function x({ children: e }) {
-  return /* @__PURE__ */ a("div", { className: "clone-stage", children: e });
+import { a as C, f as L, u as K, g, c as b } from "./COMMITS-By42AA8m.js";
+import { C as we, b as Ae, P as _e, e as Le, i as Oe, r as xe, d as Ie } from "./COMMITS-By42AA8m.js";
+import { jsx as o, jsxs as c, Fragment as j } from "react/jsx-runtime";
+import { useState as m, useRef as O, createContext as x, useContext as I, useEffect as N, useLayoutEffect as q, useCallback as T } from "react";
+function B({ children: e }) {
+  return /* @__PURE__ */ o("div", { className: "clone-stage", children: e });
 }
-function O({ span: e, rotating: n = !0, children: t }) {
-  const r = ["clone-card", `span-${e}`, n ? "rotating" : ""].filter(Boolean).join(" ");
-  return /* @__PURE__ */ a("div", { className: r, children: t });
+function G({ span: e, rotating: t = !0, children: a }) {
+  const n = ["clone-card", `span-${e}`, t ? "rotating" : ""].filter(Boolean).join(" ");
+  return /* @__PURE__ */ o("div", { className: n, children: a });
 }
-function K({
+function he({
   isOpen: e,
-  cardSpan: n,
-  cardLabel: t = "Metric",
-  cardValue: r = "—"
+  cardSpan: t,
+  cardLabel: a = "Metric",
+  cardValue: n = "—"
 }) {
-  const o = h()?.state.activeTrigger, i = o?.kind === "card-overflow" ? o.cardId : null, l = S(), c = o?.span;
-  return /* @__PURE__ */ m("div", { "data-shell": "settings", "aria-hidden": !e, children: [
-    /* @__PURE__ */ a(x, { children: /* @__PURE__ */ m(O, { span: n ?? c ?? 1, rotating: !l, children: [
-      /* @__PURE__ */ a("div", { style: { fontSize: 9, textTransform: "uppercase", letterSpacing: "0.06em", color: "#9ca3af", marginBottom: 6 }, children: t }),
-      /* @__PURE__ */ a("div", { style: { fontSize: 22, fontWeight: 700, color: "#111827", lineHeight: 1 }, children: r })
+  const r = C()?.state.activeTrigger, s = r?.kind === "card-overflow" ? r.cardId : null, i = L(), d = r?.span;
+  return /* @__PURE__ */ c("div", { "data-shell": "settings", "aria-hidden": !e, children: [
+    /* @__PURE__ */ o(B, { children: /* @__PURE__ */ c(G, { span: t ?? d ?? 1, rotating: !i, children: [
+      /* @__PURE__ */ o("div", { style: { fontSize: 9, textTransform: "uppercase", letterSpacing: "0.06em", color: "#9ca3af", marginBottom: 6 }, children: a }),
+      /* @__PURE__ */ o("div", { style: { fontSize: 22, fontWeight: 700, color: "#111827", lineHeight: 1 }, children: n })
     ] }) }),
-    /* @__PURE__ */ a("p", { style: { margin: "12px 0 0", fontSize: 14, color: "#495057" }, children: i ? `Settings for card: ${i}` : "Settings" }),
-    /* @__PURE__ */ a("p", { style: { margin: "8px 0 0", fontSize: 12, color: "#adb5bd" }, children: "Configuration options coming soon." })
+    /* @__PURE__ */ o("p", { style: { margin: "12px 0 0", fontSize: 14, color: "#495057" }, children: s ? `Settings for card: ${s}` : "Settings" }),
+    /* @__PURE__ */ o("p", { style: { margin: "8px 0 0", fontSize: 12, color: "#adb5bd" }, children: "Configuration options coming soon." })
   ] });
 }
-const z = {
+function M({ lenses: e, activeLens: t, onLensChange: a }) {
+  const [n, l] = m(!1), r = O(null), s = () => {
+    r.current != null && (window.clearTimeout(r.current), r.current = null);
+  }, i = () => {
+    s(), r.current = window.setTimeout(() => l(!1), 100);
+  }, d = e.filter((u) => u !== t);
+  return /* @__PURE__ */ o("div", { className: "cat-segmented-wrap", children: /* @__PURE__ */ c("div", { className: "cat-segmented", children: [
+    /* @__PURE__ */ o(
+      "button",
+      {
+        type: "button",
+        className: "cat-seg active",
+        "data-lens": t,
+        "aria-pressed": "true",
+        children: t
+      }
+    ),
+    /* @__PURE__ */ c(
+      "div",
+      {
+        className: "cat-seg-more",
+        onMouseEnter: () => {
+          s(), l(!0);
+        },
+        onMouseLeave: i,
+        children: [
+          /* @__PURE__ */ o("button", { type: "button", className: "cat-seg cat-seg-more-btn", "aria-haspopup": "menu", "aria-expanded": n, children: "More ▾" }),
+          n && /* @__PURE__ */ o(
+            "div",
+            {
+              className: "cat-seg-overflow",
+              role: "menu",
+              onMouseEnter: s,
+              onMouseLeave: i,
+              children: d.map((u) => /* @__PURE__ */ o(
+                "button",
+                {
+                  type: "button",
+                  "data-lens": u,
+                  role: "menuitem",
+                  onClick: () => {
+                    a(u), l(!1);
+                  },
+                  children: u
+                },
+                u
+              ))
+            }
+          )
+        ]
+      }
+    )
+  ] }) });
+}
+function U(e) {
+  return e.split("·").map((t, a) => {
+    const n = t.trim(), l = n.match(/^([$+\-]?[\d,]+(?:\.\d+)?[%+]?)\s*(.*)$/), r = l ? l[1] : "", s = l ? l[2] : n;
+    return /* @__PURE__ */ c("span", { children: [
+      /* @__PURE__ */ o("strong", { children: r }),
+      /* @__PURE__ */ o("small", { children: s })
+    ] }, a);
+  });
+}
+function D({ tiles: e, selectedTileId: t, onSelectTile: a }) {
+  return /* @__PURE__ */ o("div", { className: "cat-tiles", children: e.map((n) => {
+    const l = n.id === t, r = n.stack === !0, s = ["cat-tile"];
+    return r && s.push("span-2"), l && s.push("selected"), /* @__PURE__ */ c(
+      "button",
+      {
+        type: "button",
+        className: s.join(" "),
+        "data-metric": n.id,
+        "data-desc": n.desc,
+        "aria-pressed": l,
+        onClick: () => a(n.id, n.desc),
+        children: [
+          /* @__PURE__ */ o("span", { className: "cat-tile-label", children: n.label }),
+          /* @__PURE__ */ o("span", { className: "cat-tile-value", children: r ? U(n.value) : n.value }),
+          n.variants && n.variants.length > 0 && /* @__PURE__ */ o("span", { className: "cat-tile-variants", "aria-hidden": "true", children: n.variants.map((i) => /* @__PURE__ */ o("span", { children: i }, i)) })
+        ]
+      },
+      n.id
+    );
+  }) });
+}
+const E = x(null);
+function Y() {
+  return I(E);
+}
+function V({ mode: e, dispatch: t }) {
+  const a = Y();
+  if (a == null && e == null) return null;
+  const n = a?.mode ?? e ?? "add", l = a?.selectedTileId ?? null, r = a?.description ?? null, s = l == null;
+  return /* @__PURE__ */ c("div", { className: "panel-footer catalog", children: [
+    /* @__PURE__ */ o("div", { className: "cat-description", id: "cat-desc", children: r ?? /* @__PURE__ */ o("em", { children: "Tap a metric to see its description" }) }),
+    /* @__PURE__ */ c("div", { style: { display: "flex", padding: "10px 14px", gap: 8 }, children: [
+      /* @__PURE__ */ o("div", { className: "spacer", style: { flex: 1 } }),
+      /* @__PURE__ */ o(
+        "button",
+        {
+          id: "btn-cat-cancel",
+          type: "button",
+          className: "btn btn-ghost",
+          onClick: () => t({ type: "CLOSE_PANEL", reason: "cancel-button" }),
+          children: "Cancel"
+        }
+      ),
+      n === "add" && /* @__PURE__ */ o(
+        "button",
+        {
+          id: "btn-cat-add",
+          type: "button",
+          className: "btn btn-primary",
+          disabled: s,
+          onClick: () => t({ type: "CLOSE_PANEL", reason: "apply-button" }),
+          children: "Add metric"
+        }
+      ),
+      n === "replace" && /* @__PURE__ */ o(
+        "button",
+        {
+          id: "btn-cat-replace",
+          type: "button",
+          className: "btn btn-primary",
+          disabled: s,
+          onClick: () => t({ type: "CLOSE_PANEL", reason: "apply-button" }),
+          children: "Replace metric"
+        }
+      )
+    ] })
+  ] });
+}
+const R = [
+  "Revenue",
+  "Order flow",
+  "Rep performance",
+  "Brand portfolio",
+  "Account coverage",
+  "Commission"
+], k = "Order flow", z = {
+  Revenue: [
+    { id: "rev-mtd", label: "Revenue MTD", value: "$184K", desc: "Month-to-date revenue across all manufacturers and territories." },
+    { id: "rev-ytd", label: "Revenue YTD", value: "$2.1M", desc: "Year-to-date revenue including pending and posted orders.", variants: ["1×1", "1×3"] },
+    { id: "rev-yoy", label: "YoY Δ", value: "+12.4%", desc: "Revenue growth versus the prior comparable period." },
+    { id: "rev-avg", label: "Avg order", value: "$1,820", desc: "Average order value over the last 30 days." }
+  ],
+  "Order flow": [
+    {
+      id: "of-funnel",
+      label: "Order funnel",
+      value: "New 42 · Incomplete 18 · Transmitted 91",
+      stack: !0,
+      desc: "Funnel snapshot — new orders, incomplete (awaiting attention), and transmitted to manufacturer.",
+      variants: ["1×3"]
+    },
+    { id: "of-incomplete", label: "Incomplete", value: "18", desc: "Orders started but not yet transmitted." },
+    { id: "of-transmitted", label: "Transmitted", value: "91", desc: "Orders successfully sent to manufacturer." },
+    { id: "of-today", label: "New today", value: "7", desc: "Orders created in the current calendar day." },
+    { id: "of-velocity", label: "Order velocity", value: "+3.1/d", desc: "Rolling 7-day order-creation rate change." }
+  ],
+  "Rep performance": [
+    { id: "rp-leader", label: "#1 Rep", value: "A. Chen", desc: "Top revenue performer in the current period." },
+    { id: "rp-quota", label: "Below quota", value: "4 reps", desc: "Reps currently tracking below pace-to-quota." },
+    { id: "rp-commission", label: "Commission pace", value: "$48K", desc: "Projected commission pool at current burn rate." },
+    { id: "rp-active", label: "Active reps", value: "14", desc: "Reps with at least one order this period." }
+  ],
+  "Brand portfolio": [
+    { id: "bp-top", label: "Top brand", value: "Acme Co.", desc: "Highest-revenue manufacturer this period." },
+    { id: "bp-mix", label: "Mix Δ", value: "+2pp", desc: "Portfolio mix shift versus the prior period." },
+    { id: "bp-coverage", label: "Brand coverage", value: "73%", desc: "Percent of accounts with at least one active brand." },
+    { id: "bp-new", label: "New brand adds", value: "3", desc: "Brands with first-order activity this period." }
+  ],
+  "Account coverage": [
+    { id: "ac-active", label: "Active accounts", value: "128", desc: "Accounts with at least one order in the period." },
+    { id: "ac-untouched", label: "Untouched", value: "34", desc: "Accounts with zero activity in the period." },
+    { id: "ac-concentration", label: "Concentration", value: "38% top-5", desc: "Revenue concentration in top-5 accounts." },
+    { id: "ac-new", label: "New accounts", value: "6", desc: "Accounts with first-ever order this period." }
+  ],
+  Commission: [
+    { id: "cm-projected", label: "Projected", value: "$48K", desc: "Forecast commission at current pace." },
+    { id: "cm-paid", label: "Paid", value: "$31K", desc: "Commission posted to ledger this period." },
+    { id: "cm-pending", label: "Pending", value: "$17K", desc: "Commission earned but not yet posted." },
+    { id: "cm-rate", label: "Effective rate", value: "6.8%", desc: "Realized commission rate across all orders." }
+  ]
+};
+function ve({
+  isOpen: e,
+  lenses: t = R,
+  defaultLens: a = k,
+  tilesByLens: n = z,
+  footerSlot: l
+}) {
+  const [r, s] = m(a), [i, d] = m(null), [u, p] = m(null), v = n[r] ?? [];
+  return /* @__PURE__ */ c(
+    E.Provider,
+    {
+      value: { mode: "add", selectedTileId: i, description: u },
+      children: [
+        /* @__PURE__ */ c("div", { "data-shell": "catalog-add", "aria-hidden": !e, children: [
+          /* @__PURE__ */ o("h3", { children: "Add a metric" }),
+          /* @__PURE__ */ o(
+            M,
+            {
+              lenses: t,
+              activeLens: r,
+              onLensChange: (f) => {
+                s(f), d(null), p(null);
+              }
+            }
+          ),
+          /* @__PURE__ */ o(
+            D,
+            {
+              tiles: v,
+              selectedTileId: i,
+              onSelectTile: (f, h) => {
+                d(f), p(h);
+              }
+            }
+          )
+        ] }),
+        l
+      ]
+    }
+  );
+}
+function ge({
+  isOpen: e,
+  replacingLabel: t,
+  lenses: a = R,
+  defaultLens: n = k,
+  tilesByLens: l = z,
+  footerSlot: r
+}) {
+  const [s, i] = m(n), [d, u] = m(null), [p, v] = m(null), f = l[s] ?? [];
+  return /* @__PURE__ */ c(
+    E.Provider,
+    {
+      value: { mode: "replace", selectedTileId: d, description: p },
+      children: [
+        /* @__PURE__ */ c("div", { "data-shell": "catalog-replace", "aria-hidden": !e, children: [
+          /* @__PURE__ */ o("h3", { children: "Replace metric" }),
+          t && /* @__PURE__ */ c("p", { className: "cat-subtitle", children: [
+            "replacing ",
+            t
+          ] }),
+          /* @__PURE__ */ o(
+            M,
+            {
+              lenses: a,
+              activeLens: s,
+              onLensChange: (h) => {
+                i(h), u(null), v(null);
+              }
+            }
+          ),
+          /* @__PURE__ */ o(
+            D,
+            {
+              tiles: f,
+              selectedTileId: d,
+              onSelectTile: (h, H) => {
+                u(h), v(H);
+              }
+            }
+          )
+        ] }),
+        r
+      ]
+    }
+  );
+}
+function W({ page: e, onRename: t, onKebab: a, onDragStart: n }) {
+  const l = ["pm-row"];
+  return e.active && l.push("active"), /* @__PURE__ */ c("div", { className: l.join(" "), "data-page-id": e.id, role: "listitem", children: [
+    /* @__PURE__ */ o(
+      "div",
+      {
+        className: "pm-handle",
+        "aria-hidden": "true",
+        onMouseDown: () => n?.(e.id),
+        children: "⋮⋮"
+      }
+    ),
+    /* @__PURE__ */ o("div", { className: "pm-name", onClick: () => t?.(e.id), children: e.name }),
+    /* @__PURE__ */ o(
+      "button",
+      {
+        type: "button",
+        className: "pm-kebab",
+        "aria-label": "Page options",
+        onClick: () => a?.(e.id),
+        children: "⋯"
+      }
+    )
+  ] });
+}
+const $ = x(null);
+function Q() {
+  return I($);
+}
+function J(e = {}) {
+  const a = Q()?.setPages;
+  return /* @__PURE__ */ c(
+    "div",
+    {
+      className: "panel-footer pm",
+      style: { display: "flex", justifyContent: "flex-end", padding: "10px 14px" },
+      children: [
+        /* @__PURE__ */ o("div", { className: "spacer", style: { flex: 1 } }),
+        /* @__PURE__ */ o(
+          "button",
+          {
+            id: "btn-new-page",
+            type: "button",
+            className: "btn btn-primary",
+            onClick: () => {
+              a && a((n) => [
+                ...n,
+                { id: `new-${Date.now()}`, name: "Untitled", active: !1 }
+              ]);
+            },
+            children: "+ New page"
+          }
+        )
+      ]
+    }
+  );
+}
+const X = [
+  { 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 be({
+  isOpen: e,
+  pages: t = X,
+  footerSlot: a
+}) {
+  const [n, l] = m(() => [...t]);
+  return /* @__PURE__ */ c($.Provider, { value: { pages: n, setPages: l }, children: [
+    /* @__PURE__ */ c("div", { "data-shell": "page-management", "aria-hidden": !e, children: [
+      /* @__PURE__ */ o("h3", { children: "Manage pages" }),
+      /* @__PURE__ */ o("div", { className: "pm-list", role: "list", children: n.map((r) => /* @__PURE__ */ o(W, { page: r }, r.id)) })
+    ] }),
+    a
+  ] });
+}
+const ye = {
+  SETTINGS: "settings",
+  CATALOG_ADD: "catalog-add",
+  CATALOG_REPLACE: "catalog-replace",
+  PAGE_MGMT: "page-management",
+  NOTIFICATION_CENTER: "notification-center"
+}, Z = {
   position: "fixed",
   inset: 0,
   pointerEvents: "none",
   zIndex: 55
-}, D = {
+}, ee = {
   position: "absolute",
   inset: 0,
   zIndex: 1,
@@ -39,259 +394,308 @@ const z = {
   pointerEvents: "none",
   background: "rgba(0, 0, 0, 0.04)"
 };
-function G() {
-  const { state: e, dispatch: n, getCloseLog: t } = b();
-  y(() => {
+function Pe() {
+  const { state: e, dispatch: t, getCloseLog: a } = K();
+  N(() => {
     if (e.activePanelId == null) return;
-    function o(i) {
-      i.key === "Escape" && n({ type: "CLOSE_PANEL", reason: "escape-key" });
+    function r(s) {
+      s.key === "Escape" && t({ type: "CLOSE_PANEL", reason: "escape-key" });
     }
-    return document.addEventListener("keydown", o), () => document.removeEventListener("keydown", o);
-  }, [e.activePanelId, n]);
-  const r = L(e);
-  C(() => {
-    r.current = e;
-  }), y(() => {
+    return document.addEventListener("keydown", r), () => document.removeEventListener("keydown", r);
+  }, [e.activePanelId, t]);
+  const n = O(e);
+  q(() => {
+    n.current = e;
+  }), N(() => {
     if (process.env.NODE_ENV === "production") return;
-    const o = window;
-    return o.__panelsHostHandle && console.warn("[panels] multiple PanelHost/PanelHostShell instances mounted; dev handle is unreliable"), o.__panelsHostHandle = {
-      dispatch: n,
-      getState: () => r.current,
-      getCloseLog: t
+    const r = window;
+    return r.__panelsHostHandle && console.warn("[panels] multiple PanelHost/PanelHostShell instances mounted; dev handle is unreliable"), r.__panelsHostHandle = {
+      dispatch: t,
+      getState: () => n.current,
+      getCloseLog: a
     }, () => {
-      o.__panelsHostHandle?.dispatch === n && delete window.__panelsHostHandle;
+      r.__panelsHostHandle?.dispatch === t && delete window.__panelsHostHandle;
     };
-  }, [n, t]);
-  const s = v(() => {
-    n({ type: "CLOSE_PANEL", reason: "nav-escape-hatch" });
-  }, [n]);
-  return /* @__PURE__ */ a("div", { "data-panel-host": "true", style: z, children: e.activePanelId != null && /* @__PURE__ */ a(
+  }, [t, a]);
+  const l = T(() => {
+    t({ type: "CLOSE_PANEL", reason: "nav-escape-hatch" });
+  }, [t]);
+  return /* @__PURE__ */ o("div", { "data-panel-host": "true", style: Z, children: e.activePanelId != null && /* @__PURE__ */ o(
     "div",
     {
       "data-panel-scrim": "true",
-      style: D,
-      onClick: s
+      style: ee,
+      onClick: l
     }
   ) });
 }
-function Q({ panelComponents: e }) {
-  const n = h();
-  if (n == null) return null;
-  const { state: t, dispatch: r } = n;
-  if (t.activePanelId == null) return null;
-  const s = e[t.activePanelId];
-  if (s == null)
+function Se({ panelComponents: e }) {
+  const t = C();
+  if (t == null) return null;
+  const { state: a, dispatch: n } = t;
+  if (a.activePanelId == null) return null;
+  const l = e[a.activePanelId];
+  if (l == null)
     return process.env.NODE_ENV !== "production" && console.error(
       "[panels] No panel component registered for activePanelId:",
-      t.activePanelId
+      a.activePanelId
     ), null;
-  const o = t.activePanelId === "settings" ? /* @__PURE__ */ m(I, { children: [
-    /* @__PURE__ */ a(
-      "button",
+  if (a.activePanelId === "settings")
+    return /* @__PURE__ */ o(g, { isOpen: !0, children: /* @__PURE__ */ o(
+      b,
       {
-        id: "settings-cancel",
-        type: "button",
-        className: "gloss-panel-chrome__footer-btn",
-        onClick: () => r({ type: "CLOSE_PANEL", reason: "cancel-button" }),
-        children: "Cancel"
+        isOpen: !0,
+        onClose: () => n({ type: "CLOSE_PANEL", reason: "header-x" }),
+        footer: /* @__PURE__ */ c(j, { children: [
+          /* @__PURE__ */ o(
+            "button",
+            {
+              id: "settings-cancel",
+              type: "button",
+              className: "gloss-panel-chrome__footer-btn",
+              onClick: () => n({ type: "CLOSE_PANEL", reason: "cancel-button" }),
+              children: "Cancel"
+            }
+          ),
+          /* @__PURE__ */ o(
+            "button",
+            {
+              id: "settings-apply",
+              type: "button",
+              className: "gloss-panel-chrome__footer-btn gloss-panel-chrome__footer-btn--primary",
+              onClick: () => n({ type: "CLOSE_PANEL", reason: "apply-button" }),
+              children: "Apply"
+            }
+          )
+        ] }),
+        children: /* @__PURE__ */ o(l, { isOpen: !0 })
       }
-    ),
-    /* @__PURE__ */ a(
-      "button",
+    ) });
+  if (a.activePanelId === "catalog-add" || a.activePanelId === "catalog-replace") {
+    const r = a.activePanelId === "catalog-replace" ? "replace" : "add";
+    return /* @__PURE__ */ o(g, { isOpen: !0, children: /* @__PURE__ */ o(
+      b,
       {
-        id: "settings-apply",
-        type: "button",
-        className: "gloss-panel-chrome__footer-btn gloss-panel-chrome__footer-btn--primary",
-        onClick: () => r({ type: "CLOSE_PANEL", reason: "apply-button" }),
-        children: "Apply"
+        isOpen: !0,
+        onClose: () => n({ type: "CLOSE_PANEL", reason: "header-x" }),
+        footer: null,
+        children: /* @__PURE__ */ o(
+          l,
+          {
+            isOpen: !0,
+            footerSlot: /* @__PURE__ */ o(V, { mode: r, dispatch: n })
+          }
+        )
       }
-    )
-  ] }) : null;
-  return /* @__PURE__ */ a(N, { isOpen: !0, children: /* @__PURE__ */ a(
-    A,
+    ) });
+  }
+  return a.activePanelId === "page-management" ? /* @__PURE__ */ o(g, { isOpen: !0, children: /* @__PURE__ */ o(
+    b,
+    {
+      isOpen: !0,
+      onClose: () => n({ type: "CLOSE_PANEL", reason: "header-x" }),
+      footer: null,
+      children: /* @__PURE__ */ o(l, { isOpen: !0, footerSlot: /* @__PURE__ */ o(J, {}) })
+    }
+  ) }) : /* @__PURE__ */ o(g, { isOpen: !0, children: /* @__PURE__ */ o(
+    b,
     {
       isOpen: !0,
-      onClose: () => r({ type: "CLOSE_PANEL", reason: "header-x" }),
-      footer: o,
-      children: /* @__PURE__ */ a(s, { isOpen: !0 })
+      onClose: () => n({ type: "CLOSE_PANEL", reason: "header-x" }),
+      footer: null,
+      children: /* @__PURE__ */ o(l, { isOpen: !0 })
     }
   ) });
 }
-function P(e) {
+function w(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 T = 685, g = 627, k = "cubic-bezier(0.22, 1, 0.36, 1)", H = 200;
-function w(e, n) {
-  if (typeof window > "u") return n;
-  const t = window.getComputedStyle(document.documentElement).getPropertyValue(e).trim();
-  if (!t) return n;
-  const r = parseFloat(t);
-  return Number.isNaN(r) ? n : t.endsWith("s") && !t.endsWith("ms") ? r * 1e3 : r;
+const te = 685, A = 627, ne = "cubic-bezier(0.22, 1, 0.36, 1)", ae = 200;
+function F(e, t) {
+  if (typeof window > "u") return t;
+  const a = window.getComputedStyle(document.documentElement).getPropertyValue(e).trim();
+  if (!a) return t;
+  const n = parseFloat(a);
+  return Number.isNaN(n) ? t : a.endsWith("s") && !a.endsWith("ms") ? n * 1e3 : n;
 }
-function M(e, n) {
-  return typeof window > "u" ? n : window.getComputedStyle(document.documentElement).getPropertyValue(e).trim() || n;
+function oe(e, t) {
+  return typeof window > "u" ? t : window.getComputedStyle(document.documentElement).getPropertyValue(e).trim() || t;
 }
-function d(e) {
+function y(e) {
   e.dispatch({ type: "OPEN_PANEL", panelId: e.panelId, trigger: e.trigger });
 }
-function R(e) {
-  const { mountEl: n, chromeEl: t, reducedMotion: r, onAssert: s } = e;
-  if (n == null || t == null) {
-    d(e), s?.({ branch: "slide-fallback-no-dom", timestamp: Date.now() });
+function re(e) {
+  const { mountEl: t, chromeEl: a, reducedMotion: n, onAssert: l } = e;
+  if (t == null || a == null) {
+    y(e), l?.({ branch: "slide-fallback-no-dom", timestamp: Date.now() });
     return;
   }
-  if (r) {
-    e.dispatch({ type: "OPEN_PANEL", panelId: e.panelId, trigger: e.trigger }), s?.({ branch: "slide-reduced-motion", timestamp: Date.now() });
+  if (n) {
+    e.dispatch({ type: "OPEN_PANEL", panelId: e.panelId, trigger: e.trigger }), l?.({ branch: "slide-reduced-motion", timestamp: Date.now() });
     return;
   }
-  if (typeof t.animate != "function") {
-    d(e), s?.({ branch: "slide-no-waapi", timestamp: Date.now() });
+  if (typeof a.animate != "function") {
+    y(e), l?.({ branch: "slide-no-waapi", timestamp: Date.now() });
     return;
   }
-  const o = t.cloneNode(!0);
-  o.id = "panel-chrome-frozen", o.style.cssText = "position:absolute;left:8px;right:8px;top:8px;z-index:1;pointer-events:none;", n.appendChild(o), t.style.zIndex = "2", e.dispatch({ type: "OPEN_PANEL", panelId: e.panelId, trigger: e.trigger });
-  const i = w("--panel-open-dur", T), l = M("--panel-easing", k), c = t.animate(
+  const r = a.cloneNode(!0);
+  r.id = "panel-chrome-frozen", r.style.cssText = "position:absolute;left:8px;right:8px;top:8px;z-index:1;pointer-events:none;", t.appendChild(r), a.style.zIndex = "2", e.dispatch({ type: "OPEN_PANEL", panelId: e.panelId, trigger: e.trigger });
+  const s = F("--panel-open-dur", te), i = oe("--panel-easing", ne), d = a.animate(
     [{ transform: "translateY(100%)" }, { transform: "translateY(0)" }],
-    { duration: i, easing: l, fill: "forwards" }
+    { duration: s, easing: i, fill: "forwards" }
   );
-  c.addEventListener(
+  d.addEventListener(
     "finish",
     () => {
-      o.remove(), t.style.zIndex = "", c.cancel(), s?.({ branch: "slide-complete", frozen: "cleaned", timestamp: Date.now() });
+      r.remove(), a.style.zIndex = "", d.cancel(), l?.({ branch: "slide-complete", frozen: "cleaned", timestamp: Date.now() });
     },
     { once: !0 }
   );
 }
-function F(e) {
-  const { mountEl: n, onAssert: t } = e;
-  if (n == null) {
-    e.dispatch({ type: "CLOSE_PANEL", reason: "mutex-handoff" }), setTimeout(() => d(e), g), t?.({ branch: "handoff-fallback-no-mount", timestamp: Date.now() });
+function le(e) {
+  const { mountEl: t, onAssert: a } = e;
+  if (t == null) {
+    e.dispatch({ type: "CLOSE_PANEL", reason: "mutex-handoff" }), setTimeout(() => y(e), A), a?.({ branch: "handoff-fallback-no-mount", timestamp: Date.now() });
     return;
   }
-  const r = w("--panel-close-dur", g);
-  let s = !1, o = null;
-  const i = (c) => {
-    c.target !== n || c.propertyName !== "max-height" || s || (s = !0, o != null && clearTimeout(o), n.removeEventListener("transitionend", i), e.dispatch({ type: "OPEN_PANEL", panelId: e.panelId, trigger: e.trigger }), t?.({ branch: "handoff-complete", timestamp: Date.now() }));
-  }, l = () => {
-    s || (s = !0, n.removeEventListener("transitionend", i), e.dispatch({ type: "OPEN_PANEL", panelId: e.panelId, trigger: e.trigger }), t?.({ branch: "handoff-forced", timestamp: Date.now() }));
+  const n = F("--panel-close-dur", A);
+  let l = !1, r = null;
+  const s = (d) => {
+    d.target !== t || d.propertyName !== "max-height" || l || (l = !0, r != null && clearTimeout(r), t.removeEventListener("transitionend", s), e.dispatch({ type: "OPEN_PANEL", panelId: e.panelId, trigger: e.trigger }), a?.({ branch: "handoff-complete", timestamp: Date.now() }));
+  }, i = () => {
+    l || (l = !0, t.removeEventListener("transitionend", s), e.dispatch({ type: "OPEN_PANEL", panelId: e.panelId, trigger: e.trigger }), a?.({ branch: "handoff-forced", timestamp: Date.now() }));
   };
-  n.addEventListener("transitionend", i), e.dispatch({ type: "CLOSE_PANEL", reason: "mutex-handoff" }), o = setTimeout(l, r + H);
+  t.addEventListener("transitionend", s), e.dispatch({ type: "CLOSE_PANEL", reason: "mutex-handoff" }), r = setTimeout(i, n + ae);
 }
-function $(e) {
-  const { state: n, onAssert: t } = e;
-  if (n.activePanelId && n.isDirty) {
-    e.dispatch({ type: "OPEN_PANEL", panelId: e.panelId, trigger: e.trigger }), t?.({ branch: "blocked-dirty", timestamp: Date.now() });
+function se(e) {
+  const { state: t, onAssert: a } = e;
+  if (t.activePanelId && t.isDirty) {
+    e.dispatch({ type: "OPEN_PANEL", panelId: e.panelId, trigger: e.trigger }), a?.({ branch: "blocked-dirty", timestamp: Date.now() });
     return;
   }
-  const r = P(n.activeTrigger), s = P(e.trigger);
-  if (!!n.activePanelId && r != null && r === s) {
-    R(e);
+  const n = w(t.activeTrigger), l = w(e.trigger);
+  if (!!t.activePanelId && n != null && n === l) {
+    re(e);
     return;
   }
-  if (n.activePanelId) {
-    F(e);
+  if (t.activePanelId) {
+    le(e);
     return;
   }
-  d(e), t?.({ branch: "fresh-open", timestamp: Date.now() });
+  y(e), a?.({ branch: "fresh-open", timestamp: Date.now() });
 }
-function q() {
+function ie() {
   if (!(typeof window > "u"))
     return window.__panelsAsserter;
 }
-function J() {
-  const e = h(), n = S();
-  return v(
-    (t, r) => {
+function Ce() {
+  const e = C(), t = L();
+  return T(
+    (a, n) => {
       if (!e)
         return;
-      const s = typeof document < "u" ? document.querySelector('[data-mount="panel"]') : null, o = typeof document < "u" ? document.querySelector('[data-chrome="panel"]') : null, i = {
-        panelId: t,
-        trigger: r,
+      const l = typeof document < "u" ? document.querySelector('[data-mount="panel"]') : null, r = typeof document < "u" ? document.querySelector('[data-chrome="panel"]') : null, s = {
+        panelId: a,
+        trigger: n,
         state: e.state,
         dispatch: e.dispatch,
-        mountEl: s,
-        chromeEl: o,
-        reducedMotion: n,
-        onAssert: (l) => {
-          q()?.recordTransition?.(l);
+        mountEl: l,
+        chromeEl: r,
+        reducedMotion: t,
+        onAssert: (i) => {
+          ie()?.recordTransition?.(i);
         }
       };
-      $(i);
+      se(s);
     },
-    [e, n]
+    [e, t]
   );
 }
-let u = !1, f = null;
-function E() {
+let P = !1, S = null;
+function _() {
   const e = [];
-  let n = "cleaned";
-  document.querySelectorAll("#panel-chrome-frozen").length > 0 && (e.push("#panel-chrome-frozen"), n = "lingering");
-  const r = document.querySelectorAll(".gloss-panel-mount");
-  r.length > 1 && e.push(`mount-count=${r.length}`);
-  const s = r[0] ?? null, o = s ? s.querySelectorAll(".gloss-panel-chrome") : [];
-  o.length > 1 && e.push(`chrome-count=${o.length}`);
-  const i = o[0] ?? null;
-  if (i) {
-    const p = i.style.zIndex;
+  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 l = n[0] ?? null, r = l ? l.querySelectorAll(".gloss-panel-chrome") : [];
+  r.length > 1 && e.push(`chrome-count=${r.length}`);
+  const s = r[0] ?? null;
+  if (s) {
+    const p = s.style.zIndex;
     p !== "" && p !== "2" && e.push(`chrome-zindex=${p}`);
   }
-  const l = s ? "present" : "absent", c = i ? "present" : "absent";
+  const i = l ? "present" : "absent", d = s ? "present" : "absent";
   return {
     valid: e.length === 0,
-    mount: l,
-    chrome: c,
-    frozen: n,
+    mount: i,
+    chrome: d,
+    frozen: t,
     orphans: e,
     timestamp: Date.now()
   };
 }
-function U() {
+function ce() {
   return {
-    enable: V,
-    disable: j,
-    isEnabled: () => u,
-    getLastReport: () => f,
+    enable: de,
+    disable: ue,
+    isEnabled: () => P,
+    getLastReport: () => S,
     recordTransition: (e) => {
-      u && (f = { ...e, ...E() });
+      P && (S = { ...e, ..._() });
     },
     assertOnce: () => {
-      const e = E();
-      return f = e, e;
+      const e = _();
+      return S = e, e;
     }
   };
 }
-function V() {
-  if (u = !0, typeof window > "u") return;
+function de() {
+  if (P = !0, typeof window > "u") return;
   const e = window;
-  e.__panelsAsserter || (e.__panelsAsserter = U(), console.info(
+  e.__panelsAsserter || (e.__panelsAsserter = ce(), console.info(
     "[panels] Q12-12 asserter enabled. Inspect via window.__panelsAsserter.getLastReport()."
   ));
 }
-function j() {
-  u = !1;
+function ue() {
+  P = !1;
 }
 export {
-  ee as COMMITS,
-  O as CloneCard,
-  x as CloneStage,
-  A as PanelChrome,
-  ne as PanelHost,
-  G as PanelHostShell,
-  N as PanelMount,
-  te as PanelProvider,
-  Q as PanelSlot,
-  K as SettingsShell,
-  E as assertPanelDomShape,
-  oe as deriveSurfaceState,
-  j as disablePanelAsserter,
-  V as enablePanelAsserter,
-  re as initialState,
-  P as positionKey,
-  se as reducer,
-  $ as transitionToPanel,
-  b as usePanelContext,
-  h as usePanelContextOptional,
-  ie as usePanelCoordinator,
-  S as useReducedMotionPanel,
-  J as useTransitionToPanel
+  we as COMMITS,
+  ve as CatalogAddShell,
+  V as CatalogFooter,
+  ge as CatalogReplaceShell,
+  E as CatalogStateContext,
+  G as CloneCard,
+  B as CloneStage,
+  k as MOCK_DEFAULT_LENS,
+  R as MOCK_LENSES,
+  X as MOCK_PAGES,
+  z as MOCK_TILES_BY_LENS,
+  ye as PANEL_IDS,
+  J as PageMgmtFooter,
+  be as PageMgmtShell,
+  $ as PageMgmtStateContext,
+  b as PanelChrome,
+  Ae as PanelHost,
+  Pe as PanelHostShell,
+  g as PanelMount,
+  _e as PanelProvider,
+  Se as PanelSlot,
+  he as SettingsShell,
+  _ as assertPanelDomShape,
+  Le as deriveSurfaceState,
+  ue as disablePanelAsserter,
+  de as enablePanelAsserter,
+  Oe as initialState,
+  w as positionKey,
+  xe as reducer,
+  se as transitionToPanel,
+  Y as useCatalogState,
+  Q as usePageMgmtState,
+  K as usePanelContext,
+  C as usePanelContextOptional,
+  Ie as usePanelCoordinator,
+  L as useReducedMotionPanel,
+  Ce as useTransitionToPanel
 };