@mt-gloss/ui 0.1.122 → 0.1.124

package/{COMMITS-C1VHNgld.js → COMMITS-DlJB1KcF.js}

@@ -1,27 +1,27 @@
 import { jsx as i, jsxs as N } from "react/jsx-runtime";
-import { motion as se } from "framer-motion";
-import M, { useSyncExternalStore as ie, useState as H, useRef as w, useMemo as V, useEffect as L, useCallback as O, createContext as le, useContext as W, useReducer as ae, useId as ce, useLayoutEffect as X } from "react";
-import { z as T } from "zod";
+import { motion as ie } from "framer-motion";
+import M, { useSyncExternalStore as le, useState as H, useRef as O, useMemo as $, useEffect as w, useCallback as T, createContext as ae, useContext as W, useReducer as ce, useId as X, useLayoutEffect as G } from "react";
+import { z as L } from "zod";
 const de = "(prefers-reduced-motion: reduce)";
-function G() {
+function J() {
   return typeof window > "u" || typeof window.matchMedia != "function" ? null : window.matchMedia(de);
 }
 function ue(e) {
-  const n = G();
+  const n = J();
   return n ? (n.addEventListener("change", e), () => {
     n.removeEventListener("change", e);
   }) : () => {
   };
 }
 function fe() {
-  const e = G();
+  const e = J();
   return e ? e.matches : !1;
 }
 function pe() {
   return !1;
 }
-function J() {
-  return ie(ue, fe, pe);
+function ee() {
+  return le(ue, fe, pe);
 }
 const me = {
   threshold: "Threshold",
@@ -34,12 +34,12 @@ function ge({
   activeTab: n,
   onSelect: t,
   reduced: r,
-  labels: o,
+  labels: s,
   ariaLabel: a = "Settings dimensions"
 }) {
-  const c = J(), s = r ?? c;
+  const c = ee(), o = r ?? c;
   if (e.length < 2) return null;
-  const f = (d) => o?.[d] ?? me[d], u = (d, m) => {
+  const p = (d) => s?.[d] ?? me[d], u = (d, m) => {
     d.key === "ArrowRight" ? (d.preventDefault(), t(e[(m + 1) % e.length])) : d.key === "ArrowLeft" ? (d.preventDefault(), t(e[(m - 1 + e.length) % e.length])) : d.key === "Home" ? (d.preventDefault(), t(e[0])) : d.key === "End" && (d.preventDefault(), t(e[e.length - 1]));
   };
   return /* @__PURE__ */ i(
@@ -63,9 +63,9 @@ function ge({
             onClick: () => t(d),
             onKeyDown: (R) => u(R, m),
             children: [
-              /* @__PURE__ */ i("span", { className: "settings-tab-strip__label", children: f(d) }),
-              _ && !s && /* @__PURE__ */ i(
-                se.span,
+              /* @__PURE__ */ i("span", { className: "settings-tab-strip__label", children: p(d) }),
+              _ && !o && /* @__PURE__ */ i(
+                ie.span,
                 {
                   layoutId: "settings-active-tab-indicator",
                   "data-layout-id": "settings-active-tab-indicator",
@@ -94,8 +94,8 @@ function Q(e, n) {
   return t ? t.zoneKey : U(e, n);
 }
 function he(e, n, t) {
-  const r = [...e], [o] = r.splice(n, 1);
-  return r.splice(t, 0, o), r;
+  const r = [...e], [s] = r.splice(n, 1);
+  return r.splice(t, 0, s), r;
 }
 function ve(e) {
   return e.map((n) => `${n.zoneKey}:${n.items.map((t) => t.id).join(",")}`).join("|");
@@ -105,47 +105,47 @@ function ye(e) {
     () => e.zones.map((l) => l.maxItems !== void 0 && l.items.length > l.maxItems ? (process.env.NODE_ENV !== "production" && console.warn(
       `useSortableZones: zone "${l.zoneKey}" exceeds maxItems (${l.items.length} > ${l.maxItems}); trimming to cap.`
     ), { ...l, items: l.items.slice(0, l.maxItems) }) : l)
-  ), [r, o] = H(null), [a, c] = H(null), s = w(null), f = w(e.onZoneChange);
-  f.current = e.onZoneChange;
-  const u = V(
+  ), [r, s] = H(null), [a, c] = H(null), o = O(null), p = O(e.onZoneChange);
+  p.current = e.onZoneChange;
+  const u = $(
     () => ve(e.zones),
     [e.zones]
-  ), d = w(u);
-  L(() => {
+  ), d = O(u);
+  w(() => {
     d.current !== u && (d.current = u, !r && t(
       e.zones.map((l) => l.maxItems !== void 0 && l.items.length > l.maxItems ? (process.env.NODE_ENV !== "production" && console.warn(
         `useSortableZones: zone "${l.zoneKey}" exceeds maxItems (${l.items.length} > ${l.maxItems}); trimming to cap.`
       ), { ...l, items: l.items.slice(0, l.maxItems) }) : l)
     ));
   }, [u, e.zones, r]);
-  const m = O(
+  const m = T(
     (l) => {
       const g = l.active.id;
       let S = null, y = null;
       for (const b of n) {
-        const P = b.items.find((p) => p.id === g);
+        const P = b.items.find((f) => f.id === g);
         if (P) {
           S = P, y = b.zoneKey;
           break;
         }
       }
-      s.current = y, o(S), c(y);
+      o.current = y, s(S), c(y);
     },
     [n]
-  ), _ = O(
+  ), _ = T(
     (l) => {
       if (!l.over) {
-        c(s.current);
+        c(o.current);
         return;
       }
       const g = Q(n, l.over.id);
       c(g);
     },
     [n]
-  ), R = O(
+  ), R = T(
     (l) => {
       const { active: g, over: S } = l, y = () => {
-        s.current = null, o(null), c(null);
+        o.current = null, s(null), c(null);
       };
       if (!S) {
         y();
@@ -156,42 +156,42 @@ function ye(e) {
         y();
         return;
       }
-      let p = n.map((E) => ({ ...E, items: [...E.items] }));
+      let f = n.map((I) => ({ ...I, items: [...I.items] }));
       if (b === P) {
-        const E = p.findIndex((D) => D.zoneKey === b), I = p[E], h = I.items.findIndex((D) => D.id === g.id), C = I.items.findIndex((D) => D.id === S.id), A = C >= 0 ? C : Math.max(0, I.items.length - 1);
-        p[E] = {
-          ...I,
-          items: he(I.items, h, A)
+        const I = f.findIndex((D) => D.zoneKey === b), E = f[I], h = E.items.findIndex((D) => D.id === g.id), C = E.items.findIndex((D) => D.id === S.id), F = C >= 0 ? C : Math.max(0, E.items.length - 1);
+        f[I] = {
+          ...E,
+          items: he(E.items, h, F)
         };
       } else {
-        const E = p.findIndex((v) => v.zoneKey === b), I = p.findIndex((v) => v.zoneKey === P), h = p[E], C = p[I], A = h.items.find((v) => v.id === g.id);
-        if (!A) {
+        const I = f.findIndex((v) => v.zoneKey === b), E = f.findIndex((v) => v.zoneKey === P), h = f[I], C = f[E], F = h.items.find((v) => v.id === g.id);
+        if (!F) {
           y();
           return;
         }
-        const D = h.items.filter((v) => v.id !== g.id), z = C.items.findIndex((v) => v.id === S.id), re = z >= 0 ? z : C.items.length;
+        const D = h.items.filter((v) => v.id !== g.id), z = C.items.findIndex((v) => v.id === S.id), oe = z >= 0 ? z : C.items.length;
         let j = D, x = [...C.items];
         if (C.maxItems !== void 0 && x.length >= C.maxItems) {
           const v = x[x.length - 1];
           x = x.slice(0, C.maxItems - 1), j = [...D, v];
         }
-        const q = Math.min(re, x.length), oe = [
+        const q = Math.min(oe, x.length), se = [
           ...x.slice(0, q),
-          A,
+          F,
           ...x.slice(q)
         ];
-        p[E] = { ...h, items: j }, p[I] = { ...C, items: oe };
+        f[I] = { ...h, items: j }, f[E] = { ...C, items: se };
       }
-      t(p), f.current?.(p), y();
+      t(f), p.current?.(f), y();
     },
     [n]
-  ), B = O(
+  ), B = T(
     (l) => ({
       id: l,
       "data-zone-key": l
     }),
     []
-  ), Z = O(
+  ), Z = T(
     (l) => {
       const g = U(n, l.id) ?? "";
       return {
@@ -213,8 +213,8 @@ function ye(e) {
     handleDragEnd: R
   };
 }
-let k = null, F = null, K = !1;
-const Ee = [
+let k = null, A = null, K = !1;
+const Ie = [
   "DndContext",
   "DragOverlay",
   "useSensors",
@@ -223,22 +223,22 @@ const Ee = [
   "PointerSensor",
   "KeyboardSensor",
   "closestCenter"
-], Ie = [
+], Ee = [
   "SortableContext",
   "useSortable",
   "verticalListSortingStrategy"
 ];
 function Ce(e, n) {
   const t = [], r = e ?? {};
-  for (const a of Ee)
-    r[a] === void 0 && t.push(`@dnd-kit/core:${a}`);
-  const o = n ?? {};
   for (const a of Ie)
-    o[a] === void 0 && t.push(`@dnd-kit/sortable:${a}`);
+    r[a] === void 0 && t.push(`@dnd-kit/core:${a}`);
+  const s = n ?? {};
+  for (const a of Ee)
+    s[a] === void 0 && t.push(`@dnd-kit/sortable:${a}`);
   return t.length === 0 ? { ok: !0 } : { ok: !1, missing: t };
 }
 function Se() {
-  return k ? Promise.resolve(k) : K ? Promise.resolve(null) : F || (F = (async () => {
+  return k ? Promise.resolve(k) : K ? Promise.resolve(null) : A || (A = (async () => {
     try {
       const [e, n, t] = await Promise.all([
         import("@dnd-kit/core"),
@@ -257,44 +257,44 @@ function Se() {
     } catch {
       return K = !0, null;
     }
-  })(), F);
+  })(), A);
 }
 function be(e) {
-  const { zones: n, onZoneChange: t, renderZone: r, renderItem: o, renderDragOverlay: a } = e, c = ye({ zones: n, onZoneChange: t }), [s, f] = M.useState(k);
+  const { zones: n, onZoneChange: t, renderZone: r, renderItem: s, renderDragOverlay: a } = e, c = ye({ zones: n, onZoneChange: t }), [o, p] = M.useState(k);
   return M.useEffect(() => {
-    if (s) return;
+    if (o) return;
     let u = !0;
     return Se().then((d) => {
-      u && f(d);
+      u && p(d);
     }), () => {
       u = !1;
     };
-  }, [s]), s ? /* @__PURE__ */ i(
-    ee,
+  }, [o]), o ? /* @__PURE__ */ i(
+    ne,
     {
       state: c,
-      modules: s,
+      modules: o,
       renderZone: r,
-      renderItem: o,
+      renderItem: s,
       renderDragOverlay: a
     }
   ) : /* @__PURE__ */ i("div", { "data-sortable-zones-passive": "true", children: c.zones.map((u) => {
-    const d = u.items.map((m) => /* @__PURE__ */ i(M.Fragment, { children: o(m) }, m.id));
+    const d = u.items.map((m) => /* @__PURE__ */ i(M.Fragment, { children: s(m) }, m.id));
     return /* @__PURE__ */ i("div", { ...c.getZoneProps(u.zoneKey), children: r(u.zoneKey, u.items, d) }, u.zoneKey);
   }) });
 }
 be.displayName = "SortableZones";
-function ee({
+function ne({
   state: e,
   modules: n,
   renderZone: t,
   renderItem: r,
-  renderDragOverlay: o
+  renderDragOverlay: s
 }) {
-  const { core: a, sortable: c, utilities: s } = n, { DndContext: f, DragOverlay: u, useSensors: d, useSensor: m, useDroppable: _, PointerSensor: R, KeyboardSensor: B, closestCenter: Z } = a, { SortableContext: l, verticalListSortingStrategy: g } = c, S = d(
+  const { core: a, sortable: c, utilities: o } = n, { DndContext: p, DragOverlay: u, useSensors: d, useSensor: m, useDroppable: _, PointerSensor: R, KeyboardSensor: B, closestCenter: Z } = a, { SortableContext: l, verticalListSortingStrategy: g } = c, S = d(
     m(R, { activationConstraint: { distance: 5 } }),
     m(B)
-  ), y = f, b = u, P = l;
+  ), y = p, b = u, P = l;
   return /* @__PURE__ */ N(
     y,
     {
@@ -304,56 +304,56 @@ function ee({
       onDragOver: e.handleDragOver,
       onDragEnd: e.handleDragEnd,
       children: [
-        e.zones.map((p) => {
-          const E = p.items.map((h) => h.id), I = p.items.map((h) => /* @__PURE__ */ i(
-            ne,
+        e.zones.map((f) => {
+          const I = f.items.map((h) => h.id), E = f.items.map((h) => /* @__PURE__ */ i(
+            te,
             {
               id: h.id,
               useSortable: c.useSortable,
-              cssHelper: s.CSS,
+              cssHelper: o.CSS,
               children: r(h)
             },
             h.id
           ));
           return /* @__PURE__ */ i(
-            te,
+            re,
             {
-              zoneKey: p.zoneKey,
-              zoneProps: e.getZoneProps(p.zoneKey),
+              zoneKey: f.zoneKey,
+              zoneProps: e.getZoneProps(f.zoneKey),
               useDroppable: _,
-              children: /* @__PURE__ */ i(P, { items: E, strategy: g, children: t(p.zoneKey, p.items, I) })
+              children: /* @__PURE__ */ i(P, { items: I, strategy: g, children: t(f.zoneKey, f.items, E) })
             },
-            p.zoneKey
+            f.zoneKey
           );
         }),
-        /* @__PURE__ */ i(b, { children: e.activeItem ? o?.(e.activeItem) ?? r(e.activeItem) : null })
+        /* @__PURE__ */ i(b, { children: e.activeItem ? s?.(e.activeItem) ?? r(e.activeItem) : null })
       ]
     }
   );
 }
-ee.displayName = "SortableZonesInner";
-function ne({ id: e, useSortable: n, cssHelper: t, children: r }) {
-  const { attributes: o, listeners: a, setNodeRef: c, transform: s, transition: f, isDragging: u } = n({ id: e }), d = {
-    transform: t?.Transform?.toString(s) ?? void 0,
-    transition: f,
+ne.displayName = "SortableZonesInner";
+function te({ id: e, useSortable: n, cssHelper: t, children: r }) {
+  const { attributes: s, listeners: a, setNodeRef: c, transform: o, transition: p, isDragging: u } = n({ id: e }), d = {
+    transform: t?.Transform?.toString(o) ?? void 0,
+    transition: p,
     opacity: u ? 0.5 : 1
   };
-  return /* @__PURE__ */ i("div", { ref: c, style: d, "data-sortable-item-id": e, ...o, ...a, children: r });
+  return /* @__PURE__ */ i("div", { ref: c, style: d, "data-sortable-item-id": e, ...s, ...a, children: r });
 }
-ne.displayName = "SortableItem";
-function te({
+te.displayName = "SortableItem";
+function re({
   zoneKey: e,
   zoneProps: n,
   useDroppable: t,
   children: r
 }) {
-  const { setNodeRef: o, isOver: a } = t({ id: e });
-  return /* @__PURE__ */ i("div", { ref: o, "data-zone-is-over": a || void 0, ...n, children: r });
+  const { setNodeRef: s, isOver: a } = t({ id: e });
+  return /* @__PURE__ */ i("div", { ref: s, "data-zone-is-over": a || void 0, ...n, children: r });
 }
-te.displayName = "ZoneDroppable";
-const $ = le(null);
+re.displayName = "ZoneDroppable";
+const V = ae(null);
 function _e() {
-  const e = W($);
+  const e = W(V);
   if (!e)
     throw new Error(
       "[panels] usePanelContext must be used inside <PanelProvider>. See @mt-gloss/ui/composites/panels."
@@ -361,10 +361,10 @@ function _e() {
   return e;
 }
 function Pe() {
-  return W($);
+  return W(V);
 }
-const De = T.number().min(0).max(100), xe = T.number().min(7).max(90), Ne = T.enum(["#1d6fd8", "#10b981", "#f59e0b", "#ef4444", "#8b5cf6"]), Oe = T.array(T.string().min(1)).max(3), we = T.boolean();
-function Le(e, n) {
+const De = L.number().min(0).max(100), xe = L.number().min(7).max(90), Ne = L.enum(["#1d6fd8", "#10b981", "#f59e0b", "#ef4444", "#8b5cf6"]), Oe = L.array(L.string().min(1)).max(3), we = L.boolean();
+function Te(e, n) {
   if (e === "threshold") {
     const t = De.safeParse(n);
     return t.success ? t.data : 80;
@@ -387,7 +387,7 @@ function Le(e, n) {
   }
   return n;
 }
-const Te = {
+const Le = {
   activePanelId: null,
   activeTrigger: null,
   bellCutoutOpen: !1,
@@ -456,14 +456,14 @@ function ke(e, n) {
     case "CLOSE_PANEL": {
       if (e.activePanelId == null)
         return e;
-      const t = e.activePanelId, r = e.activeTrigger?.cardId ?? null, o = r != null ? e.bufferByCard[r] : void 0, a = e.isDirty ? n.reason === "apply-button" ? r != null && o != null ? [
+      const t = e.activePanelId, r = e.activeTrigger?.cardId ?? null, s = r != null ? e.bufferByCard[r] : void 0, a = e.isDirty ? n.reason === "apply-button" ? r != null && s != null ? [
         {
           type: "COMMIT_BUFFER",
-          payload: { cardId: r, delta: o }
+          payload: { cardId: r, delta: s }
         }
-      ] : [{ type: "COMMIT_BUFFER" }] : [{ type: "DISCARD_BUFFER" }] : [], c = r != null && o != null ? (() => {
-        const s = { ...e.bufferByCard };
-        return delete s[r], s;
+      ] : [{ type: "COMMIT_BUFFER" }] : [{ type: "DISCARD_BUFFER" }] : [], c = r != null && s != null ? (() => {
+        const o = { ...e.bufferByCard };
+        return delete o[r], o;
       })() : e.bufferByCard;
       return {
         ...e,
@@ -501,13 +501,13 @@ function ke(e, n) {
             { type: "INVALID_DISPATCH", reason: "no-buffer-panel" }
           ]
         };
-      const t = e.bufferByCard[n.cardId], r = t == null, o = Le(n.key, n.value);
-      if (!r && t.changes[n.key] === o)
+      const t = e.bufferByCard[n.cardId], r = t == null, s = Te(n.key, n.value);
+      if (!r && t.changes[n.key] === s)
         return e;
       const c = { kind: "settings", changes: {
         ...t?.kind === "settings" ? t.changes : {},
-        [n.key]: o
-      } }, s = { ...e.bufferByCard, [n.cardId]: c }, f = r ? [
+        [n.key]: s
+      } }, o = { ...e.bufferByCard, [n.cardId]: c }, p = r ? [
         {
           type: "SCHEDULE_TIMER",
           ms: 0,
@@ -516,15 +516,15 @@ function ke(e, n) {
       ] : [];
       return {
         ...e,
-        bufferByCard: s,
-        pendingSideEffects: [...e.pendingSideEffects, ...f]
+        bufferByCard: o,
+        pendingSideEffects: [...e.pendingSideEffects, ...p]
       };
     }
     case "CLEAR_BUFFER": {
       if (e.bufferByCard[n.cardId] == null)
         return e;
-      const r = Object.keys(e.bufferByCard).length === 1, o = { ...e.bufferByCard };
-      delete o[n.cardId];
+      const r = Object.keys(e.bufferByCard).length === 1, s = { ...e.bufferByCard };
+      delete s[n.cardId];
       const a = r && e.isDirty ? [
         {
           type: "SCHEDULE_TIMER",
@@ -534,7 +534,7 @@ function ke(e, n) {
       ] : [];
       return {
         ...e,
-        bufferByCard: o,
+        bufferByCard: s,
         pendingSideEffects: [...e.pendingSideEffects, ...a]
       };
     }
@@ -575,31 +575,31 @@ function ke(e, n) {
       return e;
   }
 }
-function Ae(e) {
+function Fe(e) {
   return e.activePanelId === "notification-center" ? "notif-center" : e.activePanelId != null && e.bellCutoutOpen ? e.isDirty ? "panel-dirty+cutout" : "panel-clean+cutout" : e.activePanelId != null ? e.isDirty ? "panel-dirty" : "panel-clean" : e.bellCutoutOpen ? "bell-cutout-only" : "idle";
 }
-function Fe() {
-  const [e, n] = ae(ke, Te), t = w([]), r = w(null);
-  L(() => () => {
+function Ae() {
+  const [e, n] = ce(ke, Le), t = O([]), r = O(null);
+  w(() => () => {
     r.current != null && (window.clearTimeout(r.current), r.current = null);
-  }, []), L(() => {
+  }, []), w(() => {
     const c = e.pendingSideEffects.length;
     if (c !== 0) {
-      for (const s of e.pendingSideEffects)
-        s.type === "SCHEDULE_TIMER" ? (r.current != null && window.clearTimeout(r.current), r.current = window.setTimeout(() => {
-          r.current = null, n(s.action);
-        }, Math.max(0, s.ms))) : s.type === "SET_LOCK_HINT" ? n({ type: "SET_LOCK_HINT", hint: s.hint }) : s.type === "HANDOFF_CLOSE" ? t.current = [
+      for (const o of e.pendingSideEffects)
+        o.type === "SCHEDULE_TIMER" ? (r.current != null && window.clearTimeout(r.current), r.current = window.setTimeout(() => {
+          r.current = null, n(o.action);
+        }, Math.max(0, o.ms))) : o.type === "SET_LOCK_HINT" ? n({ type: "SET_LOCK_HINT", hint: o.hint }) : o.type === "HANDOFF_CLOSE" ? t.current = [
           ...t.current.slice(-99),
           {
-            panelId: s.previousPanelId,
+            panelId: o.previousPanelId,
             reason: "mutex-handoff",
             at: Date.now(),
             note: "F22: mutex-handoff synthetic close-log entry"
           }
-        ] : s.type === "INVALID_DISPATCH" && process.env.NODE_ENV !== "production" && console.warn("[panels] INVALID_DISPATCH:", s.reason);
+        ] : o.type === "INVALID_DISPATCH" && process.env.NODE_ENV !== "production" && console.warn("[panels] INVALID_DISPATCH:", o.reason);
       n({ type: "DRAIN_SIDE_EFFECTS", count: c });
     }
-  }, [e.pendingSideEffects, n]), L(() => {
+  }, [e.pendingSideEffects, n]), w(() => {
     if (!e.lastClose) return;
     const c = {
       panelId: e.lastClose.panelId,
@@ -612,20 +612,20 @@ function Fe() {
       c
     ];
   }, [e.lastClose]);
-  const o = V(
-    () => Ae(e),
+  const s = $(
+    () => Fe(e),
     [e.activePanelId, e.bellCutoutOpen, e.isDirty]
-  ), a = O(() => t.current.slice(), []);
-  return { state: e, surfaceState: o, dispatch: n, getCloseLog: a };
+  ), a = T(() => t.current.slice(), []);
+  return { state: e, surfaceState: s, dispatch: n, getCloseLog: a };
 }
 function Je({ children: e }) {
-  const n = Fe(), t = V(
+  const n = Ae(), t = $(
     () => n,
     // Re-publish only when one of the four coordinator fields changes identity.
     // dispatch + getCloseLog are stable. state + surfaceState change on dispatch.
     [n.state, n.surfaceState, n.dispatch, n.getCloseLog]
   );
-  return /* @__PURE__ */ i($.Provider, { value: t, children: e });
+  return /* @__PURE__ */ i(V.Provider, { value: t, children: e });
 }
 function He({ title: e, onClose: n, titleId: t }) {
   return /* @__PURE__ */ N("div", { className: "gloss-panel-chrome-v2__header", children: [
@@ -671,29 +671,29 @@ function Ue({
   onClose: n,
   title: t,
   variant: r = "no-stage",
-  stage: o,
+  stage: s,
   navigation: a,
   footer: c
 }) {
-  const s = t == null && r === "with-stage", f = ce(), u = t != null;
+  const o = t == null && r === "with-stage", p = X(), u = t != null;
   return /* @__PURE__ */ N(
     "div",
     {
       "data-chrome": "panel-v2",
       "data-chrome-variant": r,
-      "data-headerless": s || void 0,
+      "data-headerless": o || void 0,
       role: "dialog",
       "aria-modal": "true",
-      "aria-labelledby": u ? f : void 0,
+      "aria-labelledby": u ? p : void 0,
       "aria-label": u ? void 0 : "Panel",
-      className: `gloss-panel-chrome-v2 gloss-panel-chrome-v2--${r}${s ? " gloss-panel-chrome-v2--headerless" : ""}`,
+      className: `gloss-panel-chrome-v2 gloss-panel-chrome-v2--${r}${o ? " gloss-panel-chrome-v2--headerless" : ""}`,
       children: [
-        !s && /* @__PURE__ */ i(He, { title: t, onClose: n, titleId: f }),
-        r === "with-stage" && /* @__PURE__ */ i(Be, { children: o }),
+        !o && /* @__PURE__ */ i(He, { title: t, onClose: n, titleId: p }),
+        r === "with-stage" && /* @__PURE__ */ i(Be, { children: s }),
         a != null && /* @__PURE__ */ i(Ze, { children: a }),
         /* @__PURE__ */ i(Me, { children: e }),
         c != null && /* @__PURE__ */ i(Ke, { left: c.left, right: c.right }),
-        s && /* @__PURE__ */ i(
+        o && /* @__PURE__ */ i(
           "button",
           {
             id: "panel-close",
@@ -728,27 +728,28 @@ function en({ isOpen: e }) {
     }
   );
 }
-const Ve = {
+const $e = {
   position: "relative",
   pointerEvents: "auto"
 };
-function $e({ children: e, onClose: n, footer: t, title: r, variant: o = "default" }) {
+function Ve({ children: e, onClose: n, footer: t, title: r, variant: s = "default" }) {
+  const a = `panel-close-${X().replace(/:/g, "-")}`;
   return /* @__PURE__ */ N(
     "div",
     {
       "data-chrome": "panel",
-      "data-chrome-variant": o,
+      "data-chrome-variant": s,
       role: "dialog",
       "aria-modal": "true",
-      className: o === "merged-stage" ? "gloss-panel-chrome gloss-panel-chrome--merged-stage" : "gloss-panel-chrome",
-      style: Ve,
+      className: s === "merged-stage" ? "gloss-panel-chrome gloss-panel-chrome--merged-stage" : "gloss-panel-chrome",
+      style: $e,
       children: [
         /* @__PURE__ */ N("div", { className: "gloss-panel-chrome__header", children: [
           r != null && /* @__PURE__ */ i("span", { className: "gloss-panel-chrome__title", children: r }),
           /* @__PURE__ */ i(
             "button",
             {
-              id: "panel-close",
+              id: a,
               type: "button",
               "aria-label": "Close panel",
               className: "gloss-panel-chrome__close",
@@ -775,22 +776,22 @@ function ze(e) {
   );
 }
 function je({ isOpen: e, children: n }) {
-  const t = J(), r = w(null);
-  X(() => {
+  const t = ee(), r = O(null);
+  G(() => {
     ze(r.current);
   }, []);
-  const [o, a] = H(!1);
-  L(() => {
+  const [s, a] = H(!1);
+  w(() => {
     if (!e) {
       a(!1);
       return;
     }
-    const s = requestAnimationFrame(() => a(!0));
-    return () => cancelAnimationFrame(s);
+    const o = requestAnimationFrame(() => a(!0));
+    return () => cancelAnimationFrame(o);
   }, [e]);
   const c = [
     "gloss-panel-mount",
-    o ? "has-panel" : "",
+    s ? "has-panel" : "",
     t ? "reduced-motion" : ""
   ].filter(Boolean).join(" ");
   return /* @__PURE__ */ i(
@@ -823,60 +824,55 @@ const qe = {
   bottom: 0,
   zIndex: 1,
   // CR-03 fix: pass-through tint — scrim is visual-only and must not intercept
-  // grid card clicks. Click-outside / scrim-dismiss is handled via the onClick
-  // on the div below, which still fires because pointer events on the element
-  // itself are honoured when explicitly set; using 'none' prevents the invisible
-  // overlay from swallowing clicks on underlying controls (same class as the
-  // panel-wrapper-covers-grid-cards bug fixed at V2FeedbackSurface).
+  // grid card clicks. Dismiss is via ESC keydown (see useEffect above) only;
+  // no scrim-click-to-close by design (prevents accidental dismissal while
+  // interacting with cards behind the scrim).
   pointerEvents: "none",
   background: "rgba(0, 0, 0, 0.04)"
 };
 function nn({ panelComponents: e }) {
-  const { state: n, dispatch: t, getCloseLog: r } = _e(), o = n.activePanelId ? e[n.activePanelId] : null;
-  n.activePanelId && !o && process.env.NODE_ENV !== "production" && console.error(
+  const { state: n, dispatch: t, getCloseLog: r } = _e(), s = n.activePanelId ? e[n.activePanelId] : null;
+  n.activePanelId && !s && process.env.NODE_ENV !== "production" && console.error(
     "[panels] No panel component registered for activePanelId:",
     n.activePanelId
-  ), L(() => {
+  ), w(() => {
     if (n.activePanelId == null) return;
-    function f(u) {
-      u.key === "Escape" && t({ type: "CLOSE_PANEL", reason: "escape-key" });
+    function o(p) {
+      p.key === "Escape" && t({ type: "CLOSE_PANEL", reason: "escape-key" });
     }
-    return document.addEventListener("keydown", f), () => {
-      document.removeEventListener("keydown", f);
+    return document.addEventListener("keydown", o), () => {
+      document.removeEventListener("keydown", o);
     };
   }, [n.activePanelId, t]);
-  const a = w(n);
-  X(() => {
+  const a = O(n);
+  G(() => {
     a.current = n;
-  }), L(() => {
+  }), w(() => {
     if (process.env.NODE_ENV === "production") return;
-    const f = window;
-    return f.__panelsHostHandle && console.warn("[panels] multiple PanelHost/PanelHostShell instances mounted; dev handle is unreliable"), f.__panelsHostHandle = {
+    const o = window;
+    return o.__panelsHostHandle && console.warn("[panels] multiple PanelHost/PanelHostShell instances mounted; dev handle is unreliable"), o.__panelsHostHandle = {
       dispatch: t,
       getState: () => a.current,
       getCloseLog: r
     }, () => {
-      f.__panelsHostHandle?.dispatch === t && delete f.__panelsHostHandle;
+      o.__panelsHostHandle?.dispatch === t && delete o.__panelsHostHandle;
     };
   }, [t, r]);
-  const c = O(() => {
-    t({ type: "CLOSE_PANEL", reason: "nav-escape-hatch" });
-  }, [t]), s = n.activePanelId != null && o != null;
+  const c = n.activePanelId != null && s != null;
   return /* @__PURE__ */ N("div", { "data-panel-host": "true", style: qe, children: [
-    s && /* @__PURE__ */ i(
+    c && /* @__PURE__ */ i(
       "div",
       {
         "data-panel-scrim": "true",
-        style: Qe,
-        onClick: c
+        style: Qe
       }
     ),
-    /* @__PURE__ */ i(je, { isOpen: s, children: s && /* @__PURE__ */ i(
-      $e,
+    /* @__PURE__ */ i(je, { isOpen: c, children: c && /* @__PURE__ */ i(
+      Ve,
       {
         isOpen: !0,
         onClose: () => t({ type: "CLOSE_PANEL", reason: "header-x" }),
-        children: /* @__PURE__ */ i(o, { isOpen: !0 })
+        children: /* @__PURE__ */ i(s, { isOpen: !0 })
       }
     ) })
   ] });
@@ -904,19 +900,18 @@ export {
   ye as a,
   _e as b,
   nn as c,
-  $e as d,
+  Ae as d,
   Fe as e,
-  Ae as f,
-  ge as g,
-  J as h,
-  Te as i,
-  Ue as j,
-  je as k,
-  He as l,
-  Be as m,
-  Ze as n,
-  Me as o,
-  Ke as p,
+  ge as f,
+  ee as g,
+  Ue as h,
+  Le as i,
+  je as j,
+  He as k,
+  Be as l,
+  Ze as m,
+  Me as n,
+  Ke as o,
   ke as r,
   Pe as u
 };