@mt-gloss/ui 0.1.118 → 0.1.120

package/{COMMITS-BxJQwv4H.js → COMMITS-8eHelQHO.js}

@@ -1,7 +1,7 @@
-import { jsx as d, jsxs as k } from "react/jsx-runtime";
-import { motion as ie } from "framer-motion";
-import M, { useSyncExternalStore as se, useState as H, useRef as N, useMemo as V, useEffect as T, useCallback as O, createContext as le, useContext as W, useReducer as ae, useLayoutEffect as X } from "react";
-import { z as w } from "zod";
+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, useLayoutEffect as X } from "react";
+import { z as T } from "zod";
 const ce = "(prefers-reduced-motion: reduce)";
 function G() {
   return typeof window > "u" || typeof window.matchMedia != "function" ? null : window.matchMedia(ce);
@@ -21,7 +21,7 @@ function fe() {
   return !1;
 }
 function J() {
-  return se(de, ue, fe);
+  return ie(de, ue, fe);
 }
 const pe = {
   threshold: "Threshold",
@@ -35,37 +35,37 @@ function me({
   onSelect: t,
   reduced: r,
   labels: o,
-  ariaLabel: l = "Settings dimensions"
+  ariaLabel: a = "Settings dimensions"
 }) {
   const c = J(), s = r ?? c;
   if (e.length < 2) return null;
-  const p = (a) => o?.[a] ?? pe[a], u = (a, m) => {
-    a.key === "ArrowRight" ? (a.preventDefault(), t(e[(m + 1) % e.length])) : a.key === "ArrowLeft" ? (a.preventDefault(), t(e[(m - 1 + e.length) % e.length])) : a.key === "Home" ? (a.preventDefault(), t(e[0])) : a.key === "End" && (a.preventDefault(), t(e[e.length - 1]));
+  const p = (d) => o?.[d] ?? pe[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__ */ d(
+  return /* @__PURE__ */ i(
     "div",
     {
       role: "tablist",
-      "aria-label": l,
+      "aria-label": a,
       className: "settings-tab-strip",
-      children: e.map((a, m) => {
-        const _ = n === a;
-        return /* @__PURE__ */ k(
+      children: e.map((d, m) => {
+        const _ = n === d;
+        return /* @__PURE__ */ N(
           "button",
           {
             role: "tab",
             type: "button",
-            id: `settings-tab-${a}`,
+            id: `settings-tab-${d}`,
             "aria-selected": _,
-            "aria-controls": `settings-tabpanel-${a}`,
+            "aria-controls": `settings-tabpanel-${d}`,
             tabIndex: _ ? 0 : -1,
             className: `settings-tab-strip__tab${_ ? " settings-tab-strip__tab--active" : ""}`,
-            onClick: () => t(a),
-            onKeyDown: (L) => u(L, m),
+            onClick: () => t(d),
+            onKeyDown: (R) => u(R, m),
             children: [
-              /* @__PURE__ */ d("span", { className: "settings-tab-strip__label", children: p(a) }),
-              _ && !s && /* @__PURE__ */ d(
-                ie.span,
+              /* @__PURE__ */ i("span", { className: "settings-tab-strip__label", children: p(d) }),
+              _ && !s && /* @__PURE__ */ i(
+                se.span,
                 {
                   layoutId: "settings-active-tab-indicator",
                   "data-layout-id": "settings-active-tab-indicator",
@@ -76,7 +76,7 @@ function me({
               )
             ]
           },
-          a
+          d
         );
       })
     }
@@ -102,101 +102,101 @@ function he(e) {
 }
 function ve(e) {
   const [n, t] = H(
-    () => e.zones.map((i) => i.maxItems !== void 0 && i.items.length > i.maxItems ? (process.env.NODE_ENV !== "production" && console.warn(
-      `useSortableZones: zone "${i.zoneKey}" exceeds maxItems (${i.items.length} > ${i.maxItems}); trimming to cap.`
-    ), { ...i, items: i.items.slice(0, i.maxItems) }) : i)
-  ), [r, o] = H(null), [l, c] = H(null), s = N(null), p = N(e.onZoneChange);
+    () => 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), p = w(e.onZoneChange);
   p.current = e.onZoneChange;
   const u = V(
     () => he(e.zones),
     [e.zones]
-  ), a = N(u);
-  T(() => {
-    a.current !== u && (a.current = u, !r && t(
-      e.zones.map((i) => i.maxItems !== void 0 && i.items.length > i.maxItems ? (process.env.NODE_ENV !== "production" && console.warn(
-        `useSortableZones: zone "${i.zoneKey}" exceeds maxItems (${i.items.length} > ${i.maxItems}); trimming to cap.`
-      ), { ...i, items: i.items.slice(0, i.maxItems) }) : i)
+  ), d = w(u);
+  L(() => {
+    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(
-    (i) => {
-      const g = i.active.id;
-      let C = null, E = null;
+    (l) => {
+      const g = l.active.id;
+      let S = null, y = null;
       for (const b of n) {
         const P = b.items.find((f) => f.id === g);
         if (P) {
-          C = P, E = b.zoneKey;
+          S = P, y = b.zoneKey;
           break;
         }
       }
-      s.current = E, o(C), c(E);
+      s.current = y, o(S), c(y);
     },
     [n]
   ), _ = O(
-    (i) => {
-      if (!i.over) {
+    (l) => {
+      if (!l.over) {
         c(s.current);
         return;
       }
-      const g = Q(n, i.over.id);
+      const g = Q(n, l.over.id);
       c(g);
     },
     [n]
-  ), L = O(
-    (i) => {
-      const { active: g, over: C } = i, E = () => {
+  ), R = O(
+    (l) => {
+      const { active: g, over: S } = l, y = () => {
         s.current = null, o(null), c(null);
       };
-      if (!C) {
-        E();
+      if (!S) {
+        y();
         return;
       }
-      const b = U(n, g.id), P = Q(n, C.id);
+      const b = U(n, g.id), P = Q(n, S.id);
       if (!b || !P) {
-        E();
+        y();
         return;
       }
-      let f = n.map((I) => ({ ...I, items: [...I.items] }));
+      let f = n.map((E) => ({ ...E, items: [...E.items] }));
       if (b === P) {
-        const I = f.findIndex((D) => D.zoneKey === b), y = f[I], h = y.items.findIndex((D) => D.id === g.id), S = y.items.findIndex((D) => D.id === C.id), A = S >= 0 ? S : Math.max(0, y.items.length - 1);
-        f[I] = {
-          ...y,
-          items: ge(y.items, h, A)
+        const E = f.findIndex((D) => D.zoneKey === b), I = f[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);
+        f[E] = {
+          ...I,
+          items: ge(I.items, h, A)
         };
       } else {
-        const I = f.findIndex((v) => v.zoneKey === b), y = f.findIndex((v) => v.zoneKey === P), h = f[I], S = f[y], A = h.items.find((v) => v.id === g.id);
+        const E = f.findIndex((v) => v.zoneKey === b), I = f.findIndex((v) => v.zoneKey === P), h = f[E], C = f[I], A = h.items.find((v) => v.id === g.id);
         if (!A) {
-          E();
+          y();
           return;
         }
-        const D = h.items.filter((v) => v.id !== g.id), z = S.items.findIndex((v) => v.id === C.id), re = z >= 0 ? z : S.items.length;
-        let j = D, x = [...S.items];
-        if (S.maxItems !== void 0 && x.length >= S.maxItems) {
+        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;
+        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, S.maxItems - 1), j = [...D, v];
+          x = x.slice(0, C.maxItems - 1), j = [...D, v];
         }
         const q = Math.min(re, x.length), oe = [
           ...x.slice(0, q),
           A,
           ...x.slice(q)
         ];
-        f[I] = { ...h, items: j }, f[y] = { ...S, items: oe };
+        f[E] = { ...h, items: j }, f[I] = { ...C, items: oe };
       }
-      t(f), p.current?.(f), E();
+      t(f), p.current?.(f), y();
     },
     [n]
   ), B = O(
-    (i) => ({
-      id: i,
-      "data-zone-key": i
+    (l) => ({
+      id: l,
+      "data-zone-key": l
     }),
     []
   ), Z = O(
-    (i) => {
-      const g = U(n, i.id) ?? "";
+    (l) => {
+      const g = U(n, l.id) ?? "";
       return {
-        id: i.id,
-        "data-item-id": i.id,
+        id: l.id,
+        "data-item-id": l.id,
         "data-zone-key": g
       };
     },
@@ -204,17 +204,17 @@ function ve(e) {
   );
   return {
     zones: n,
-    activeZone: l,
+    activeZone: a,
     activeItem: r,
     getZoneProps: B,
     getItemProps: Z,
     handleDragStart: m,
     handleDragOver: _,
-    handleDragEnd: L
+    handleDragEnd: R
   };
 }
-let R = null, F = null, K = !1;
-const Ee = [
+let k = null, F = null, K = !1;
+const ye = [
   "DndContext",
   "DragOverlay",
   "useSensors",
@@ -223,22 +223,22 @@ const Ee = [
   "PointerSensor",
   "KeyboardSensor",
   "closestCenter"
-], Ie = [
+], Ee = [
   "SortableContext",
   "useSortable",
   "verticalListSortingStrategy"
 ];
-function ye(e, n) {
+function Ie(e, n) {
   const t = [], r = e ?? {};
-  for (const l of Ee)
-    r[l] === void 0 && t.push(`@dnd-kit/core:${l}`);
+  for (const a of ye)
+    r[a] === void 0 && t.push(`@dnd-kit/core:${a}`);
   const o = n ?? {};
-  for (const l of Ie)
-    o[l] === void 0 && t.push(`@dnd-kit/sortable:${l}`);
+  for (const a of Ee)
+    o[a] === void 0 && t.push(`@dnd-kit/sortable:${a}`);
   return t.length === 0 ? { ok: !0 } : { ok: !1, missing: t };
 }
-function Se() {
-  return R ? Promise.resolve(R) : K ? Promise.resolve(null) : F || (F = (async () => {
+function Ce() {
+  return k ? Promise.resolve(k) : K ? Promise.resolve(null) : F || (F = (async () => {
     try {
       const [e, n, t] = await Promise.all([
         import("@dnd-kit/core"),
@@ -246,12 +246,12 @@ function Se() {
         import("@dnd-kit/utilities").catch(() => (process.env.NODE_ENV !== "production" && console.warn(
           "SortableZones: @dnd-kit/utilities failed to load; drag-overlay positioning will fall back (items may teleport instead of slide)."
         ), {}))
-      ]), r = ye(e, n);
-      return r.ok ? (R = {
+      ]), r = Ie(e, n);
+      return r.ok ? (k = {
         core: e,
         sortable: n,
         utilities: t
-      }, R) : (K = !0, process.env.NODE_ENV !== "production" && console.error(
+      }, k) : (K = !0, process.env.NODE_ENV !== "production" && console.error(
         `SortableZones: @dnd-kit shape mismatch — missing exports: ${r.missing.join(", ")}. Check installed versions against optionalDependencies in @mt-gloss/ui.`
       ), null);
     } catch {
@@ -259,31 +259,31 @@ function Se() {
     }
   })(), F);
 }
-function Ce(e) {
-  const { zones: n, onZoneChange: t, renderZone: r, renderItem: o, renderDragOverlay: l } = e, c = ve({ zones: n, onZoneChange: t }), [s, p] = M.useState(R);
+function Se(e) {
+  const { zones: n, onZoneChange: t, renderZone: r, renderItem: o, renderDragOverlay: a } = e, c = ve({ zones: n, onZoneChange: t }), [s, p] = M.useState(k);
   return M.useEffect(() => {
     if (s) return;
     let u = !0;
-    return Se().then((a) => {
-      u && p(a);
+    return Ce().then((d) => {
+      u && p(d);
     }), () => {
       u = !1;
     };
-  }, [s]), s ? /* @__PURE__ */ d(
+  }, [s]), s ? /* @__PURE__ */ i(
     ee,
     {
       state: c,
       modules: s,
       renderZone: r,
       renderItem: o,
-      renderDragOverlay: l
+      renderDragOverlay: a
     }
-  ) : /* @__PURE__ */ d("div", { "data-sortable-zones-passive": "true", children: c.zones.map((u) => {
-    const a = u.items.map((m) => /* @__PURE__ */ d(M.Fragment, { children: o(m) }, m.id));
-    return /* @__PURE__ */ d("div", { ...c.getZoneProps(u.zoneKey), children: r(u.zoneKey, u.items, a) }, u.zoneKey);
+  ) : /* @__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));
+    return /* @__PURE__ */ i("div", { ...c.getZoneProps(u.zoneKey), children: r(u.zoneKey, u.items, d) }, u.zoneKey);
   }) });
 }
-Ce.displayName = "SortableZones";
+Se.displayName = "SortableZones";
 function ee({
   state: e,
   modules: n,
@@ -291,21 +291,21 @@ function ee({
   renderItem: r,
   renderDragOverlay: o
 }) {
-  const { core: l, sortable: c, utilities: s } = n, { DndContext: p, DragOverlay: u, useSensors: a, useSensor: m, useDroppable: _, PointerSensor: L, KeyboardSensor: B, closestCenter: Z } = l, { SortableContext: i, verticalListSortingStrategy: g } = c, C = a(
-    m(L, { activationConstraint: { distance: 5 } }),
+  const { core: a, sortable: c, utilities: s } = 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)
-  ), E = p, b = u, P = i;
-  return /* @__PURE__ */ k(
-    E,
+  ), y = p, b = u, P = l;
+  return /* @__PURE__ */ N(
+    y,
     {
-      sensors: C,
+      sensors: S,
       collisionDetection: Z,
       onDragStart: e.handleDragStart,
       onDragOver: e.handleDragOver,
       onDragEnd: e.handleDragEnd,
       children: [
         e.zones.map((f) => {
-          const I = f.items.map((h) => h.id), y = f.items.map((h) => /* @__PURE__ */ d(
+          const E = f.items.map((h) => h.id), I = f.items.map((h) => /* @__PURE__ */ i(
             ne,
             {
               id: h.id,
@@ -315,30 +315,30 @@ function ee({
             },
             h.id
           ));
-          return /* @__PURE__ */ d(
+          return /* @__PURE__ */ i(
             te,
             {
               zoneKey: f.zoneKey,
               zoneProps: e.getZoneProps(f.zoneKey),
               useDroppable: _,
-              children: /* @__PURE__ */ d(P, { items: I, strategy: g, children: t(f.zoneKey, f.items, y) })
+              children: /* @__PURE__ */ i(P, { items: E, strategy: g, children: t(f.zoneKey, f.items, I) })
             },
             f.zoneKey
           );
         }),
-        /* @__PURE__ */ d(b, { children: e.activeItem ? o?.(e.activeItem) ?? r(e.activeItem) : null })
+        /* @__PURE__ */ i(b, { children: e.activeItem ? o?.(e.activeItem) ?? r(e.activeItem) : null })
       ]
     }
   );
 }
 ee.displayName = "SortableZonesInner";
 function ne({ id: e, useSortable: n, cssHelper: t, children: r }) {
-  const { attributes: o, listeners: l, setNodeRef: c, transform: s, transition: p, isDragging: u } = n({ id: e }), a = {
+  const { attributes: o, listeners: a, setNodeRef: c, transform: s, transition: p, isDragging: u } = n({ id: e }), d = {
     transform: t?.Transform?.toString(s) ?? void 0,
     transition: p,
     opacity: u ? 0.5 : 1
   };
-  return /* @__PURE__ */ d("div", { ref: c, style: a, "data-sortable-item-id": e, ...o, ...l, children: r });
+  return /* @__PURE__ */ i("div", { ref: c, style: d, "data-sortable-item-id": e, ...o, ...a, children: r });
 }
 ne.displayName = "SortableItem";
 function te({
@@ -347,8 +347,8 @@ function te({
   useDroppable: t,
   children: r
 }) {
-  const { setNodeRef: o, isOver: l } = t({ id: e });
-  return /* @__PURE__ */ d("div", { ref: o, "data-zone-is-over": l || void 0, ...n, 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 });
 }
 te.displayName = "ZoneDroppable";
 const $ = le(null);
@@ -360,25 +360,25 @@ function be() {
     );
   return e;
 }
-function ze() {
+function _e() {
   return W($);
 }
-const _e = w.number().min(0).max(100), Pe = w.number().min(7).max(90), De = w.enum(["#1d6fd8", "#10b981", "#f59e0b", "#ef4444", "#8b5cf6"]), xe = w.array(w.string().min(1)).max(3), Oe = w.boolean();
-function Ne(e, n) {
+const Pe = T.number().min(0).max(100), De = T.number().min(7).max(90), xe = T.enum(["#1d6fd8", "#10b981", "#f59e0b", "#ef4444", "#8b5cf6"]), Ne = T.array(T.string().min(1)).max(3), Oe = T.boolean();
+function we(e, n) {
   if (e === "threshold") {
-    const t = _e.safeParse(n);
+    const t = Pe.safeParse(n);
     return t.success ? t.data : 80;
   }
   if (e === "timeframe") {
-    const t = Pe.safeParse(n);
+    const t = De.safeParse(n);
     return t.success ? t.data : 30;
   }
   if (e === "accent") {
-    const t = De.safeParse(n);
+    const t = xe.safeParse(n);
     return t.success ? t.data : null;
   }
   if (e === "slots") {
-    const t = xe.safeParse(n);
+    const t = Ne.safeParse(n);
     return t.success ? t.data : [];
   }
   if (e === "thresholdEnabled" || e === "accentEnabled") {
@@ -387,7 +387,7 @@ function Ne(e, n) {
   }
   return n;
 }
-const Te = {
+const Le = {
   activePanelId: null,
   activeTrigger: null,
   bellCutoutOpen: !1,
@@ -398,7 +398,7 @@ const Te = {
   lastClose: null,
   pendingSideEffects: []
 }, Y = /* @__PURE__ */ new Set(["settings"]);
-function we(e, n) {
+function Te(e, n) {
   if (e == null || e.kind !== n.kind) return !1;
   switch (e.kind) {
     case "bell":
@@ -413,7 +413,7 @@ function we(e, n) {
       return e.action === n.action && e.blockedCardId === n.blockedCardId && e.activeCardId === n.activeCardId;
   }
 }
-function Le(e, n) {
+function Re(e, n) {
   switch (n.type) {
     case "OPEN_PANEL": {
       if (e.activePanelId && e.isDirty)
@@ -431,7 +431,7 @@ function Le(e, n) {
             }
           ]
         };
-      if (e.activePanelId === n.panelId && we(e.activeTrigger, n.trigger))
+      if (e.activePanelId === n.panelId && Te(e.activeTrigger, n.trigger))
         return e;
       const t = e.activePanelId != null ? [
         {
@@ -456,7 +456,7 @@ function Le(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, l = e.isDirty ? n.reason === "apply-button" ? r != null && o != null ? [
+      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 ? [
         {
           type: "COMMIT_BUFFER",
           payload: { cardId: r, delta: o }
@@ -476,7 +476,7 @@ function Le(e, n) {
         // closing clears any active lockHint (dirty-buffer condition gone)
         bufferByCard: c,
         lastClose: { panelId: t, reason: n.reason },
-        pendingSideEffects: [...e.pendingSideEffects, ...l]
+        pendingSideEffects: [...e.pendingSideEffects, ...a]
       };
     }
     case "OPEN_BELL_CUTOUT":
@@ -501,7 +501,7 @@ function Le(e, n) {
             { type: "INVALID_DISPATCH", reason: "no-buffer-panel" }
           ]
         };
-      const t = e.bufferByCard[n.cardId], r = t == null, o = Ne(n.key, n.value);
+      const t = e.bufferByCard[n.cardId], r = t == null, o = we(n.key, n.value);
       if (!r && t.changes[n.key] === o)
         return e;
       const c = { kind: "settings", changes: {
@@ -525,7 +525,7 @@ function Le(e, n) {
         return e;
       const r = Object.keys(e.bufferByCard).length === 1, o = { ...e.bufferByCard };
       delete o[n.cardId];
-      const l = r && e.isDirty ? [
+      const a = r && e.isDirty ? [
         {
           type: "SCHEDULE_TIMER",
           ms: 0,
@@ -535,7 +535,7 @@ function Le(e, n) {
       return {
         ...e,
         bufferByCard: o,
-        pendingSideEffects: [...e.pendingSideEffects, ...l]
+        pendingSideEffects: [...e.pendingSideEffects, ...a]
       };
     }
     case "BUFFER_BECOMES_DIRTY":
@@ -575,14 +575,14 @@ function Le(e, n) {
       return e;
   }
 }
-function Re(e) {
+function ke(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 ke() {
-  const [e, n] = ae(Le, Te), t = N([]), r = N(null);
-  T(() => () => {
+function Ae() {
+  const [e, n] = ae(Re, Le), t = w([]), r = w(null);
+  L(() => () => {
     r.current != null && (window.clearTimeout(r.current), r.current = null);
-  }, []), T(() => {
+  }, []), L(() => {
     const c = e.pendingSideEffects.length;
     if (c !== 0) {
       for (const s of e.pendingSideEffects)
@@ -599,7 +599,7 @@ function ke() {
         ] : s.type === "INVALID_DISPATCH" && process.env.NODE_ENV !== "production" && console.warn("[panels] INVALID_DISPATCH:", s.reason);
       n({ type: "DRAIN_SIDE_EFFECTS", count: c });
     }
-  }, [e.pendingSideEffects, n]), T(() => {
+  }, [e.pendingSideEffects, n]), L(() => {
     if (!e.lastClose) return;
     const c = {
       panelId: e.lastClose.panelId,
@@ -613,26 +613,125 @@ function ke() {
     ];
   }, [e.lastClose]);
   const o = V(
-    () => Re(e),
+    () => ke(e),
     [e.activePanelId, e.bellCutoutOpen, e.isDirty]
-  ), l = O(() => t.current.slice(), []);
-  return { state: e, surfaceState: o, dispatch: n, getCloseLog: l };
+  ), a = O(() => t.current.slice(), []);
+  return { state: e, surfaceState: o, dispatch: n, getCloseLog: a };
 }
-function je({ children: e }) {
-  const n = ke(), t = V(
+function Ge({ children: e }) {
+  const n = Ae(), t = V(
     () => 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__ */ d($.Provider, { value: t, children: e });
+  return /* @__PURE__ */ i($.Provider, { value: t, children: e });
+}
+function Fe({ title: e, onClose: n }) {
+  return /* @__PURE__ */ N("div", { className: "gloss-panel-chrome-v2__header", children: [
+    e != null && /* @__PURE__ */ i("span", { className: "gloss-panel-chrome-v2__title", children: e }),
+    /* @__PURE__ */ i(
+      "button",
+      {
+        id: "panel-close",
+        type: "button",
+        "aria-label": "Close panel",
+        className: "gloss-panel-chrome-v2__close",
+        onClick: n,
+        children: "×"
+      }
+    )
+  ] });
+}
+function He({ children: e }) {
+  return /* @__PURE__ */ i(
+    "div",
+    {
+      "data-panel-stage": !0,
+      "aria-hidden": "true",
+      className: "gloss-panel-chrome-v2__stage",
+      children: e
+    }
+  );
+}
+function Be({ children: e }) {
+  return /* @__PURE__ */ i("div", { className: "gloss-panel-chrome-v2__navigation", children: e });
+}
+function Ze({ children: e }) {
+  return /* @__PURE__ */ i("div", { className: "gloss-panel-chrome-v2__body", children: e });
+}
+function Me({ left: e, right: n }) {
+  return /* @__PURE__ */ N("div", { className: "gloss-panel-chrome-v2__footer", children: [
+    /* @__PURE__ */ i("div", { className: "gloss-panel-chrome-v2__footer-left", children: e }),
+    /* @__PURE__ */ i("div", { className: "gloss-panel-chrome-v2__footer-right", children: n })
+  ] });
+}
+function Ke({
+  children: e,
+  onClose: n,
+  title: t,
+  variant: r = "no-stage",
+  stage: o,
+  navigation: a,
+  footer: c
+}) {
+  const s = t == null && r === "with-stage";
+  return /* @__PURE__ */ N(
+    "div",
+    {
+      "data-chrome": "panel-v2",
+      "data-chrome-variant": r,
+      "data-headerless": s || void 0,
+      role: "dialog",
+      "aria-modal": "true",
+      className: `gloss-panel-chrome-v2 gloss-panel-chrome-v2--${r}${s ? " gloss-panel-chrome-v2--headerless" : ""}`,
+      children: [
+        !s && /* @__PURE__ */ i(Fe, { title: t, onClose: n }),
+        r === "with-stage" && /* @__PURE__ */ i(He, { children: o }),
+        a != null && /* @__PURE__ */ i(Be, { children: a }),
+        /* @__PURE__ */ i(Ze, { children: e }),
+        c != null && /* @__PURE__ */ i(Me, { left: c.left, right: c.right }),
+        s && /* @__PURE__ */ i(
+          "button",
+          {
+            id: "panel-close",
+            type: "button",
+            "aria-label": "Close panel",
+            className: "gloss-panel-chrome-v2__close gloss-panel-chrome-v2__close--floating",
+            onClick: n,
+            children: "×"
+          }
+        )
+      ]
+    }
+  );
+}
+function Je({ isOpen: e }) {
+  const n = _e();
+  return /* @__PURE__ */ i(
+    Ke,
+    {
+      variant: "no-stage",
+      title: "Notifications",
+      onClose: () => n?.dispatch({ type: "CLOSE_PANEL", reason: "header-x" }),
+      children: /* @__PURE__ */ i(
+        "div",
+        {
+          "data-shell": "notification-center",
+          "data-panel": "notification-center",
+          "aria-hidden": !e,
+          children: /* @__PURE__ */ i("p", { children: "No notifications" })
+        }
+      )
+    }
+  );
 }
-const Ae = {
+const Ue = {
   position: "relative",
   pointerEvents: "auto"
 };
-function Fe({ children: e, onClose: n, footer: t, title: r, variant: o = "default" }) {
-  return /* @__PURE__ */ k(
+function Ve({ children: e, onClose: n, footer: t, title: r, variant: o = "default" }) {
+  return /* @__PURE__ */ N(
     "div",
     {
       "data-chrome": "panel",
@@ -640,11 +739,11 @@ function Fe({ children: e, onClose: n, footer: t, title: r, variant: o = "defaul
       role: "dialog",
       "aria-modal": "true",
       className: o === "merged-stage" ? "gloss-panel-chrome gloss-panel-chrome--merged-stage" : "gloss-panel-chrome",
-      style: Ae,
+      style: Ue,
       children: [
-        /* @__PURE__ */ k("div", { className: "gloss-panel-chrome__header", children: [
-          r != null && /* @__PURE__ */ d("span", { className: "gloss-panel-chrome__title", children: r }),
-          /* @__PURE__ */ d(
+        /* @__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",
@@ -656,13 +755,13 @@ function Fe({ children: e, onClose: n, footer: t, title: r, variant: o = "defaul
             }
           )
         ] }),
-        /* @__PURE__ */ d("div", { className: "gloss-panel-chrome__body", children: e }),
-        t != null && /* @__PURE__ */ d("div", { className: "gloss-panel-chrome__footer", children: t })
+        /* @__PURE__ */ i("div", { className: "gloss-panel-chrome__body", children: e }),
+        t != null && /* @__PURE__ */ i("div", { className: "gloss-panel-chrome__footer", children: t })
       ]
     }
   );
 }
-function He(e) {
+function $e(e) {
   if (process.env.NODE_ENV === "production" || !e || !e.parentElement) return;
   const n = e.parentElement, t = window.getComputedStyle(n);
   t.perspective === "none" && console.warn(
@@ -673,18 +772,18 @@ function He(e) {
     n
   );
 }
-function Be({ isOpen: e, children: n }) {
-  const t = J(), r = N(null);
+function ze({ isOpen: e, children: n }) {
+  const t = J(), r = w(null);
   X(() => {
-    He(r.current);
+    $e(r.current);
   }, []);
-  const [o, l] = H(!1);
-  T(() => {
+  const [o, a] = H(!1);
+  L(() => {
     if (!e) {
-      l(!1);
+      a(!1);
       return;
     }
-    const s = requestAnimationFrame(() => l(!0));
+    const s = requestAnimationFrame(() => a(!0));
     return () => cancelAnimationFrame(s);
   }, [e]);
   const c = [
@@ -692,7 +791,7 @@ function Be({ isOpen: e, children: n }) {
     o ? "has-panel" : "",
     t ? "reduced-motion" : ""
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ d(
+  return /* @__PURE__ */ i(
     "div",
     {
       ref: r,
@@ -703,7 +802,7 @@ function Be({ isOpen: e, children: n }) {
     }
   );
 }
-const Ze = {
+const je = {
   position: "fixed",
   top: 0,
   left: 0,
@@ -714,7 +813,7 @@ const Ze = {
   overflow: "visible",
   pointerEvents: "none",
   zIndex: 55
-}, Me = {
+}, qe = {
   position: "fixed",
   top: "var(--tb-h, 60px)",
   left: 0,
@@ -730,12 +829,12 @@ const Ze = {
   pointerEvents: "none",
   background: "rgba(0, 0, 0, 0.04)"
 };
-function qe({ panelComponents: e }) {
+function en({ panelComponents: e }) {
   const { state: n, dispatch: t, getCloseLog: r } = be(), o = n.activePanelId ? e[n.activePanelId] : null;
   n.activePanelId && !o && process.env.NODE_ENV !== "production" && console.error(
     "[panels] No panel component registered for activePanelId:",
     n.activePanelId
-  ), T(() => {
+  ), L(() => {
     if (n.activePanelId == null) return;
     function p(u) {
       u.key === "Escape" && t({ type: "CLOSE_PANEL", reason: "escape-key" });
@@ -744,15 +843,15 @@ function qe({ panelComponents: e }) {
       document.removeEventListener("keydown", p);
     };
   }, [n.activePanelId, t]);
-  const l = N(n);
+  const a = w(n);
   X(() => {
-    l.current = n;
-  }), T(() => {
+    a.current = n;
+  }), L(() => {
     if (process.env.NODE_ENV === "production") return;
     const p = window;
     return p.__panelsHostHandle && console.warn("[panels] multiple PanelHost/PanelHostShell instances mounted; dev handle is unreliable"), p.__panelsHostHandle = {
       dispatch: t,
-      getState: () => l.current,
+      getState: () => a.current,
       getCloseLog: r
     }, () => {
       p.__panelsHostHandle?.dispatch === t && delete p.__panelsHostHandle;
@@ -761,26 +860,26 @@ function qe({ panelComponents: e }) {
   const c = O(() => {
     t({ type: "CLOSE_PANEL", reason: "nav-escape-hatch" });
   }, [t]), s = n.activePanelId != null && o != null;
-  return /* @__PURE__ */ k("div", { "data-panel-host": "true", style: Ze, children: [
-    s && /* @__PURE__ */ d(
+  return /* @__PURE__ */ N("div", { "data-panel-host": "true", style: je, children: [
+    s && /* @__PURE__ */ i(
       "div",
       {
         "data-panel-scrim": "true",
-        style: Me,
+        style: qe,
         onClick: c
       }
     ),
-    /* @__PURE__ */ d(Be, { isOpen: s, children: s && /* @__PURE__ */ d(
-      Fe,
+    /* @__PURE__ */ i(ze, { isOpen: s, children: s && /* @__PURE__ */ i(
+      Ve,
       {
         isOpen: !0,
         onClose: () => t({ type: "CLOSE_PANEL", reason: "header-x" }),
-        children: /* @__PURE__ */ d(o, { isOpen: !0 })
+        children: /* @__PURE__ */ i(o, { isOpen: !0 })
       }
     ) })
   ] });
 }
-const Qe = {
+const nn = {
   "apply-button": !0,
   // the ONLY commit reason
   "cancel-button": !1,
@@ -796,19 +895,26 @@ const Qe = {
   // Phase 11.6 D-19 — R9 drag-start auto-close discards buffer
 };
 export {
-  Qe as C,
-  je as P,
-  Ce as S,
+  nn as C,
+  Je as N,
+  Ge as P,
+  Se as S,
   ve as a,
   be as b,
-  qe as c,
-  Fe as d,
-  ke as e,
-  Re as f,
+  en as c,
+  Ve as d,
+  Ae as e,
+  ke as f,
   me as g,
   J as h,
-  Te as i,
-  Be as j,
-  Le as r,
-  ze as u
+  Le as i,
+  Ke as j,
+  ze as k,
+  Fe as l,
+  He as m,
+  Be as n,
+  Ze as o,
+  Me as p,
+  Re as r,
+  _e as u
 };