@mt-gloss/ui 0.1.104 → 0.1.105

package/{COMMITS-BEa-B4Oc.js → COMMITS-kaUvc5jL.js}

@@ -1,56 +1,117 @@
-import { jsx as s, jsxs as C } from "react/jsx-runtime";
-import { useSyncExternalStore as h, createContext as _, useContext as g, useReducer as P, useRef as d, useEffect as u, useMemo as v, useCallback as m, useLayoutEffect as y, useState as b } from "react";
-import { z as f } from "zod";
-const O = "(prefers-reduced-motion: reduce)";
-function I() {
-  return typeof window > "u" || typeof window.matchMedia != "function" ? null : window.matchMedia(O);
+import { jsx as c, jsxs as C } from "react/jsx-runtime";
+import { motion as L } from "framer-motion";
+import { useSyncExternalStore as O, createContext as T, useContext as S, useReducer as w, useRef as g, useEffect as d, useMemo as m, useCallback as I, useLayoutEffect as _, useState as N } from "react";
+import { z as v } from "zod";
+const x = "(prefers-reduced-motion: reduce)";
+function b() {
+  return typeof window > "u" || typeof window.matchMedia != "function" ? null : window.matchMedia(x);
 }
-function L(e) {
-  const n = I();
+function H(e) {
+  const n = b();
   return n ? (n.addEventListener("change", e), () => {
     n.removeEventListener("change", e);
   }) : () => {
   };
 }
-function T() {
-  const e = I();
+function A() {
+  const e = b();
   return e ? e.matches : !1;
 }
-function D() {
+function F() {
   return !1;
 }
-function w() {
-  return h(L, T, D);
+function P() {
+  return O(H, A, F);
 }
-const p = _(null);
-function N() {
-  const e = g(p);
+const R = {
+  threshold: "Threshold",
+  timeframe: "Timeframe",
+  slots: "Slots",
+  color: "Color"
+};
+function k({
+  dimensions: e,
+  activeTab: n,
+  onSelect: t,
+  reduced: r,
+  labels: l,
+  ariaLabel: a = "Settings dimensions"
+}) {
+  const s = P(), i = r ?? s;
+  if (e.length < 2) return null;
+  const u = (o) => l?.[o] ?? R[o], E = (o, f) => {
+    o.key === "ArrowRight" ? (o.preventDefault(), t(e[(f + 1) % e.length])) : o.key === "ArrowLeft" ? (o.preventDefault(), t(e[(f - 1 + e.length) % e.length])) : o.key === "Home" ? (o.preventDefault(), t(e[0])) : o.key === "End" && (o.preventDefault(), t(e[e.length - 1]));
+  };
+  return /* @__PURE__ */ c(
+    "div",
+    {
+      role: "tablist",
+      "aria-label": a,
+      className: "settings-tab-strip",
+      children: e.map((o, f) => {
+        const p = n === o;
+        return /* @__PURE__ */ C(
+          "button",
+          {
+            role: "tab",
+            type: "button",
+            id: `settings-tab-${o}`,
+            "aria-selected": p,
+            "aria-controls": `settings-tabpanel-${o}`,
+            tabIndex: p ? 0 : -1,
+            className: `settings-tab-strip__tab${p ? " settings-tab-strip__tab--active" : ""}`,
+            onClick: () => t(o),
+            onKeyDown: (D) => E(D, f),
+            children: [
+              /* @__PURE__ */ c("span", { className: "settings-tab-strip__label", children: u(o) }),
+              p && !i && /* @__PURE__ */ c(
+                L.span,
+                {
+                  layoutId: "settings-active-tab-indicator",
+                  "data-layout-id": "settings-active-tab-indicator",
+                  className: "settings-tab-strip__indicator",
+                  "aria-hidden": "true",
+                  transition: { type: "spring", stiffness: 380, damping: 30 }
+                }
+              )
+            ]
+          },
+          o
+        );
+      })
+    }
+  );
+}
+k.displayName = "SettingsTabStrip";
+const h = T(null);
+function B() {
+  const e = S(h);
   if (!e)
     throw new Error(
       "[panels] usePanelContext must be used inside <PanelProvider>. See @mt-gloss/ui/composites/panels."
     );
   return e;
 }
-function J() {
-  return g(p);
+function ie() {
+  return S(h);
 }
-const x = f.number().min(0).max(100), H = f.number().min(7).max(90), F = f.enum(["#1d6fd8", "#10b981", "#f59e0b", "#ef4444", "#8b5cf6"]);
-function B(e, n) {
+const M = v.number().min(0).max(100), U = v.number().min(7).max(90), V = v.enum(["#1d6fd8", "#10b981", "#f59e0b", "#ef4444", "#8b5cf6"]);
+function K(e, n) {
   if (e === "threshold") {
-    const t = x.safeParse(n);
+    const t = M.safeParse(n);
     return t.success ? t.data : 80;
   }
   if (e === "timeframe") {
-    const t = H.safeParse(n);
+    const t = U.safeParse(n);
     return t.success ? t.data : 30;
   }
   if (e === "accent") {
-    const t = F.safeParse(n);
+    const t = V.safeParse(n);
     return t.success ? t.data : null;
   }
   return n;
 }
-const R = {
+const j = {
   activePanelId: null,
   activeTrigger: null,
   bellCutoutOpen: !1,
@@ -60,8 +121,8 @@ const R = {
   bufferByCard: {},
   lastClose: null,
   pendingSideEffects: []
-}, E = /* @__PURE__ */ new Set(["settings"]);
-function A(e, n) {
+}, y = /* @__PURE__ */ new Set(["settings"]);
+function q(e, n) {
   if (e == null || e.kind !== n.kind) return !1;
   switch (e.kind) {
     case "bell":
@@ -76,7 +137,7 @@ function A(e, n) {
       return e.action === n.action && e.blockedCardId === n.blockedCardId && e.activeCardId === n.activeCardId;
   }
 }
-function k(e, n) {
+function z(e, n) {
   switch (n.type) {
     case "OPEN_PANEL": {
       if (e.activePanelId && e.isDirty)
@@ -94,7 +155,7 @@ function k(e, n) {
             }
           ]
         };
-      if (e.activePanelId === n.panelId && A(e.activeTrigger, n.trigger))
+      if (e.activePanelId === n.panelId && q(e.activeTrigger, n.trigger))
         return e;
       const t = e.activePanelId != null ? [
         {
@@ -119,12 +180,12 @@ function k(e, n) {
     case "CLOSE_PANEL": {
       if (e.activePanelId == null)
         return e;
-      const t = e.activePanelId, r = e.activeTrigger?.cardId ?? null, l = r != null ? e.bufferByCard[r] : void 0, o = e.isDirty ? n.reason === "apply-button" ? r != null && l != null ? [
+      const t = e.activePanelId, r = e.activeTrigger?.cardId ?? null, l = r != null ? e.bufferByCard[r] : void 0, a = e.isDirty ? n.reason === "apply-button" ? r != null && l != null ? [
         {
           type: "COMMIT_BUFFER",
           payload: { cardId: r, delta: l }
         }
-      ] : [{ type: "COMMIT_BUFFER" }] : [{ type: "DISCARD_BUFFER" }] : [], c = r != null && l != null ? (() => {
+      ] : [{ type: "COMMIT_BUFFER" }] : [{ type: "DISCARD_BUFFER" }] : [], s = r != null && l != null ? (() => {
         const i = { ...e.bufferByCard };
         return delete i[r], i;
       })() : e.bufferByCard;
@@ -137,9 +198,9 @@ function k(e, n) {
         // Phase 16 P2 CC-17 — session ends on panel close (apply or discard)
         lockHint: null,
         // closing clears any active lockHint (dirty-buffer condition gone)
-        bufferByCard: c,
+        bufferByCard: s,
         lastClose: { panelId: t, reason: n.reason },
-        pendingSideEffects: [...e.pendingSideEffects, ...o]
+        pendingSideEffects: [...e.pendingSideEffects, ...a]
       };
     }
     case "OPEN_BELL_CUTOUT":
@@ -156,7 +217,7 @@ function k(e, n) {
     case "CLOSE_BELL_CUTOUT":
       return e.bellCutoutOpen ? { ...e, bellCutoutOpen: !1 } : e;
     case "SET_BUFFER_VALUE": {
-      if (e.activePanelId == null || !E.has(e.activePanelId))
+      if (e.activePanelId == null || !y.has(e.activePanelId))
         return {
           ...e,
           pendingSideEffects: [
@@ -164,13 +225,13 @@ function k(e, n) {
             { type: "INVALID_DISPATCH", reason: "no-buffer-panel" }
           ]
         };
-      const t = e.bufferByCard[n.cardId], r = t == null, l = B(n.key, n.value);
+      const t = e.bufferByCard[n.cardId], r = t == null, l = K(n.key, n.value);
       if (!r && t.changes[n.key] === l)
         return e;
-      const c = { kind: "settings", changes: {
+      const s = { kind: "settings", changes: {
         ...t?.kind === "settings" ? t.changes : {},
         [n.key]: l
-      } }, i = { ...e.bufferByCard, [n.cardId]: c }, a = r ? [
+      } }, i = { ...e.bufferByCard, [n.cardId]: s }, u = r ? [
         {
           type: "SCHEDULE_TIMER",
           ms: 0,
@@ -180,7 +241,7 @@ function k(e, n) {
       return {
         ...e,
         bufferByCard: i,
-        pendingSideEffects: [...e.pendingSideEffects, ...a]
+        pendingSideEffects: [...e.pendingSideEffects, ...u]
       };
     }
     case "CLEAR_BUFFER": {
@@ -188,7 +249,7 @@ function k(e, n) {
         return e;
       const r = Object.keys(e.bufferByCard).length === 1, l = { ...e.bufferByCard };
       delete l[n.cardId];
-      const o = r && e.isDirty ? [
+      const a = r && e.isDirty ? [
         {
           type: "SCHEDULE_TIMER",
           ms: 0,
@@ -198,11 +259,11 @@ function k(e, n) {
       return {
         ...e,
         bufferByCard: l,
-        pendingSideEffects: [...e.pendingSideEffects, ...o]
+        pendingSideEffects: [...e.pendingSideEffects, ...a]
       };
     }
     case "BUFFER_BECOMES_DIRTY":
-      return e.activePanelId == null || !E.has(e.activePanelId) ? {
+      return e.activePanelId == null || !y.has(e.activePanelId) ? {
         ...e,
         pendingSideEffects: [
           ...e.pendingSideEffects,
@@ -238,16 +299,16 @@ function k(e, n) {
       return e;
   }
 }
-function M(e) {
+function Y(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 U() {
-  const [e, n] = P(k, R), t = d([]), r = d(null);
-  u(() => () => {
+function $() {
+  const [e, n] = w(z, j), t = g([]), r = g(null);
+  d(() => () => {
     r.current != null && (window.clearTimeout(r.current), r.current = null);
-  }, []), u(() => {
-    const c = e.pendingSideEffects.length;
-    if (c !== 0) {
+  }, []), d(() => {
+    const s = e.pendingSideEffects.length;
+    if (s !== 0) {
       for (const i of e.pendingSideEffects)
         i.type === "SCHEDULE_TIMER" ? (r.current != null && window.clearTimeout(r.current), r.current = window.setTimeout(() => {
           r.current = null, n(i.action);
@@ -260,11 +321,11 @@ function U() {
             note: "F22: mutex-handoff synthetic close-log entry"
           }
         ] : i.type === "INVALID_DISPATCH" && process.env.NODE_ENV !== "production" && console.warn("[panels] INVALID_DISPATCH:", i.reason);
-      n({ type: "DRAIN_SIDE_EFFECTS", count: c });
+      n({ type: "DRAIN_SIDE_EFFECTS", count: s });
     }
-  }, [e.pendingSideEffects, n]), u(() => {
+  }, [e.pendingSideEffects, n]), d(() => {
     if (!e.lastClose) return;
-    const c = {
+    const s = {
       panelId: e.lastClose.panelId,
       reason: e.lastClose.reason,
       at: Date.now(),
@@ -272,29 +333,29 @@ function U() {
     };
     t.current = [
       ...t.current.slice(-99),
-      c
+      s
     ];
   }, [e.lastClose]);
-  const l = v(
-    () => M(e),
+  const l = m(
+    () => Y(e),
     [e.activePanelId, e.bellCutoutOpen, e.isDirty]
-  ), o = m(() => t.current.slice(), []);
-  return { state: e, surfaceState: l, dispatch: n, getCloseLog: o };
+  ), a = I(() => t.current.slice(), []);
+  return { state: e, surfaceState: l, dispatch: n, getCloseLog: a };
 }
-function X({ children: e }) {
-  const n = U(), t = v(
+function le({ children: e }) {
+  const n = $(), t = m(
     () => 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__ */ s(p.Provider, { value: t, children: e });
+  return /* @__PURE__ */ c(h.Provider, { value: t, children: e });
 }
-const V = {
+const Q = {
   position: "relative",
   pointerEvents: "auto"
 };
-function K({ children: e, onClose: n, footer: t }) {
+function W({ children: e, onClose: n, footer: t }) {
   return /* @__PURE__ */ C(
     "div",
     {
@@ -302,9 +363,9 @@ function K({ children: e, onClose: n, footer: t }) {
       role: "dialog",
       "aria-modal": "true",
       className: "gloss-panel-chrome",
-      style: V,
+      style: Q,
       children: [
-        /* @__PURE__ */ s("div", { className: "gloss-panel-chrome__header", children: /* @__PURE__ */ s(
+        /* @__PURE__ */ c("div", { className: "gloss-panel-chrome__header", children: /* @__PURE__ */ c(
           "button",
           {
             id: "panel-close",
@@ -315,13 +376,13 @@ function K({ children: e, onClose: n, footer: t }) {
             children: "×"
           }
         ) }),
-        /* @__PURE__ */ s("div", { className: "gloss-panel-chrome__body", children: e }),
-        t != null && /* @__PURE__ */ s("div", { className: "gloss-panel-chrome__footer", children: t })
+        /* @__PURE__ */ c("div", { className: "gloss-panel-chrome__body", children: e }),
+        t != null && /* @__PURE__ */ c("div", { className: "gloss-panel-chrome__footer", children: t })
       ]
     }
   );
 }
-function j(e) {
+function G(e) {
   if (process.env.NODE_ENV === "production" || !e || !e.parentElement) return;
   const n = e.parentElement, t = window.getComputedStyle(n);
   t.perspective === "none" && console.warn(
@@ -332,37 +393,37 @@ function j(e) {
     n
   );
 }
-function q({ isOpen: e, children: n }) {
-  const t = w(), r = d(null);
-  y(() => {
-    j(r.current);
+function J({ isOpen: e, children: n }) {
+  const t = P(), r = g(null);
+  _(() => {
+    G(r.current);
   }, []);
-  const [l, o] = b(!1);
-  u(() => {
+  const [l, a] = N(!1);
+  d(() => {
     if (!e) {
-      o(!1);
+      a(!1);
       return;
     }
-    const i = requestAnimationFrame(() => o(!0));
+    const i = requestAnimationFrame(() => a(!0));
     return () => cancelAnimationFrame(i);
   }, [e]);
-  const c = [
+  const s = [
     "gloss-panel-mount",
     l ? "has-panel" : "",
     t ? "reduced-motion" : ""
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ s(
+  return /* @__PURE__ */ c(
     "div",
     {
       ref: r,
-      className: c,
+      className: s,
       "data-mount": "panel",
       "data-open": e ? "true" : "false",
       children: n
     }
   );
 }
-const z = {
+const X = {
   position: "fixed",
   top: 0,
   left: 0,
@@ -373,7 +434,7 @@ const z = {
   overflow: "visible",
   pointerEvents: "none",
   zIndex: 55
-}, Y = {
+}, Z = {
   position: "fixed",
   top: "var(--tb-h, 60px)",
   left: 0,
@@ -389,57 +450,57 @@ const z = {
   pointerEvents: "none",
   background: "rgba(0, 0, 0, 0.04)"
 };
-function Z({ panelComponents: e }) {
-  const { state: n, dispatch: t, getCloseLog: r } = N(), l = n.activePanelId ? e[n.activePanelId] : null;
+function oe({ panelComponents: e }) {
+  const { state: n, dispatch: t, getCloseLog: r } = B(), l = n.activePanelId ? e[n.activePanelId] : null;
   n.activePanelId && !l && process.env.NODE_ENV !== "production" && console.error(
     "[panels] No panel component registered for activePanelId:",
     n.activePanelId
-  ), u(() => {
+  ), d(() => {
     if (n.activePanelId == null) return;
-    function a(S) {
-      S.key === "Escape" && t({ type: "CLOSE_PANEL", reason: "escape-key" });
+    function u(E) {
+      E.key === "Escape" && t({ type: "CLOSE_PANEL", reason: "escape-key" });
     }
-    return document.addEventListener("keydown", a), () => {
-      document.removeEventListener("keydown", a);
+    return document.addEventListener("keydown", u), () => {
+      document.removeEventListener("keydown", u);
     };
   }, [n.activePanelId, t]);
-  const o = d(n);
-  y(() => {
-    o.current = n;
-  }), u(() => {
+  const a = g(n);
+  _(() => {
+    a.current = n;
+  }), d(() => {
     if (process.env.NODE_ENV === "production") return;
-    const a = window;
-    return a.__panelsHostHandle && console.warn("[panels] multiple PanelHost/PanelHostShell instances mounted; dev handle is unreliable"), a.__panelsHostHandle = {
+    const u = window;
+    return u.__panelsHostHandle && console.warn("[panels] multiple PanelHost/PanelHostShell instances mounted; dev handle is unreliable"), u.__panelsHostHandle = {
       dispatch: t,
-      getState: () => o.current,
+      getState: () => a.current,
       getCloseLog: r
     }, () => {
-      a.__panelsHostHandle?.dispatch === t && delete a.__panelsHostHandle;
+      u.__panelsHostHandle?.dispatch === t && delete u.__panelsHostHandle;
     };
   }, [t, r]);
-  const c = m(() => {
+  const s = I(() => {
     t({ type: "CLOSE_PANEL", reason: "nav-escape-hatch" });
   }, [t]), i = n.activePanelId != null && l != null;
-  return /* @__PURE__ */ C("div", { "data-panel-host": "true", style: z, children: [
-    i && /* @__PURE__ */ s(
+  return /* @__PURE__ */ C("div", { "data-panel-host": "true", style: X, children: [
+    i && /* @__PURE__ */ c(
       "div",
       {
         "data-panel-scrim": "true",
-        style: Y,
-        onClick: c
+        style: Z,
+        onClick: s
       }
     ),
-    /* @__PURE__ */ s(q, { isOpen: i, children: i && /* @__PURE__ */ s(
-      K,
+    /* @__PURE__ */ c(J, { isOpen: i, children: i && /* @__PURE__ */ c(
+      W,
       {
         isOpen: !0,
         onClose: () => t({ type: "CLOSE_PANEL", reason: "header-x" }),
-        children: /* @__PURE__ */ s(l, { isOpen: !0 })
+        children: /* @__PURE__ */ c(l, { isOpen: !0 })
       }
     ) })
   ] });
 }
-const $ = {
+const ae = {
   "apply-button": !0,
   // the ONLY commit reason
   "cancel-button": !1,
@@ -453,16 +514,17 @@ const $ = {
   "nav-escape-hatch": !1
 };
 export {
-  $ as C,
-  X as P,
-  J as a,
-  N as b,
-  Z as c,
-  K as d,
-  U as e,
-  M as f,
-  q as g,
-  R as i,
-  k as r,
-  w as u
+  ae as C,
+  le as P,
+  k as S,
+  B as a,
+  oe as b,
+  W as c,
+  $ as d,
+  Y as e,
+  P as f,
+  J as g,
+  j as i,
+  z as r,
+  ie as u
 };