@mt-gloss/ui 0.1.138 → 0.2.0

package/{BaseAsyncButton-CJlY7Uik.js → BaseAsyncButton-Cq_l7clO.js}

@@ -1,49 +1,48 @@
 import { jsx as o, jsxs as m } from "react/jsx-runtime";
-import { c as p } from "./BaseText-Dxbk1JJa.js";
-import b, { useEffect as B } from "react";
-import { b as f, ah as g, e as _ } from "./UIContext-CGQI_KJk.js";
-const h = function(t) {
-  const { as: e, htmlFor: s, className: l, ...n } = t;
+import { g as p, d as B, al as g, i as _ } from "./UIContext-DP6JGCto.js";
+import b, { useEffect as f } from "react";
+const N = function(l) {
+  const { as: e, htmlFor: s, className: t, ...n } = l;
   return /* @__PURE__ */ o(
     p,
     {
       as: e || "label",
       htmlFor: s,
-      className: l ? `gloss-base-label ${l}` : "gloss-base-label",
+      className: t ? `gloss-base-label ${t}` : "gloss-base-label",
       ...n
     }
   );
 };
-h.displayName = "BaseLabel";
-const N = function(t) {
-  const { as: e, className: s, ...l } = t;
+N.displayName = "BaseLabel";
+const h = function(l) {
+  const { as: e, className: s, ...t } = l;
   return /* @__PURE__ */ o(
     p,
     {
       as: e || "span",
       "data-role": "value",
       className: s ? `gloss-base-value ${s}` : "gloss-base-value",
-      ...l
+      ...t
     }
   );
 };
-N.displayName = "BaseValue";
+h.displayName = "BaseValue";
 function v({
   definition: a,
-  open: t,
+  open: l,
   onDismiss: e,
   className: s,
-  style: l,
+  style: t,
   children: n
 }) {
   const c = a?.position ?? "top-right", r = a?.duration ?? 0;
-  B(() => {
-    if (!t || r <= 0 || !e) return;
+  f(() => {
+    if (!l || r <= 0 || !e) return;
     const y = setTimeout(() => {
       e();
     }, r);
     return () => clearTimeout(y);
-  }, [t, r, e]);
+  }, [l, r, e]);
   const i = {
     portal: !0,
     dismissOnClickOutside: !1,
@@ -55,16 +54,16 @@ function v({
     zIndex: a?.zIndex
   }, u = ["gloss-base-toast", `gloss-base-toast--${c}`];
   return s && u.push(s), /* @__PURE__ */ o(
-    f,
+    B,
     {
       definition: i,
-      open: t,
+      open: l,
       onDismiss: e,
       children: /* @__PURE__ */ o(
         "div",
         {
           className: u.join(" "),
-          style: l,
+          style: t,
           role: "status",
           "aria-live": "polite",
           children: n
@@ -83,11 +82,11 @@ const A = {
   iconColor: "--_icon-color"
 };
 function C(a) {
-  const { definition: t, className: e, style: s, role: l, children: n, ...c } = a, { style: r, dataAttrs: i } = g(t, A);
+  const { definition: l, className: e, style: s, role: t, children: n, ...c } = a, { style: r, dataAttrs: i } = g(l, A);
   return /* @__PURE__ */ o(
     "div",
     {
-      role: l || "alert",
+      role: t || "alert",
       className: e ? `gloss-base-alert ${e}` : "gloss-base-alert",
       style: { ...r, ...s },
       ...i,
@@ -103,8 +102,8 @@ const S = {
   fontSize: "--_font-size"
 };
 function $(a) {
-  const { definition: t, separator: e = "/", className: s, style: l, children: n } = a, { style: c } = g(
-    t,
+  const { definition: l, separator: e = "/", className: s, style: t, children: n } = a, { style: c } = g(
+    l,
     S
   ), r = b.Children.toArray(n);
   return /* @__PURE__ */ o(
@@ -112,7 +111,7 @@ function $(a) {
     {
       "aria-label": "Breadcrumb",
       className: s ? `gloss-base-breadcrumbs-nav ${s}` : "gloss-base-breadcrumbs-nav",
-      style: { ...c, ...l },
+      style: { ...c, ...t },
       children: /* @__PURE__ */ o("ol", { className: "gloss-base-breadcrumbs", children: r.map((i, d) => {
         const u = d === r.length - 1;
         return /* @__PURE__ */ m(b.Fragment, { children: [
@@ -133,10 +132,10 @@ function $(a) {
 $.displayName = "BaseBreadcrumbs";
 function T(a) {
   const {
-    as: t,
+    as: l,
     definition: e,
     loading: s = !1,
-    disabled: l = !1,
+    disabled: t = !1,
     className: n,
     style: c,
     children: r,
@@ -148,9 +147,9 @@ function T(a) {
   return /* @__PURE__ */ m(
     _,
     {
-      as: t,
+      as: l,
       definition: e,
-      disabled: l || s,
+      disabled: t || s,
       loading: s,
       className: d,
       style: c,
@@ -171,8 +170,8 @@ function T(a) {
 }
 T.displayName = "BaseAsyncButton";
 export {
-  h as B,
-  N as a,
+  N as B,
+  h as a,
   v as b,
   C as c,
   $ as d,

package/COMMITS-Dm8qIHaq.js

@@ -0,0 +1,444 @@
+import { jsx as a, jsxs as E } from "react/jsx-runtime";
+import { createContext as S, useContext as g, useReducer as m, useRef as d, useEffect as u, useMemo as C, useCallback as v, useSyncExternalStore as _, useLayoutEffect as I, useState as P } from "react";
+const f = S(null);
+function O() {
+  const e = g(f);
+  if (!e)
+    throw new Error(
+      "[panels] usePanelContext must be used inside <PanelProvider>. See @mt-gloss/ui/composites/panels."
+    );
+  return e;
+}
+function q() {
+  return g(f);
+}
+const L = {
+  activePanelId: null,
+  activeTrigger: null,
+  bellCutoutOpen: !1,
+  isDirty: !1,
+  lockHint: null,
+  bufferByCard: {},
+  lastClose: null,
+  pendingSideEffects: []
+}, p = /* @__PURE__ */ new Set(["settings"]);
+function b(e, n) {
+  if (e == null || e.kind !== n.kind) return !1;
+  switch (e.kind) {
+    case "bell":
+      return !0;
+    case "card-overflow":
+      return e.cardId === n.cardId && e.sectionIndex === n.sectionIndex && e.action === n.action;
+    case "empty-cell":
+      return e.sectionIndex === n.sectionIndex && e.cellPosition.row === n.cellPosition.row && e.cellPosition.col === n.cellPosition.col;
+    case "manage-pages-action":
+      return e.global === n.global && e.align === n.align;
+  }
+}
+function T(e, n) {
+  switch (n.type) {
+    case "OPEN_PANEL": {
+      if (e.activePanelId && e.isDirty)
+        return {
+          ...e,
+          pendingSideEffects: [
+            ...e.pendingSideEffects,
+            {
+              type: "SET_LOCK_HINT",
+              hint: {
+                blockedTrigger: n.trigger,
+                activeCardId: e.activeTrigger?.cardId ?? null,
+                expiresAt: Date.now() + 4e3
+              }
+            }
+          ]
+        };
+      if (e.activePanelId === n.panelId && b(e.activeTrigger, n.trigger))
+        return e;
+      const t = e.activePanelId != null ? [
+        {
+          type: "HANDOFF_CLOSE",
+          reason: "mutex-handoff",
+          previousPanelId: e.activePanelId
+        }
+      ] : [], r = n.panelId === "notification-center" && e.bellCutoutOpen;
+      return {
+        ...e,
+        activePanelId: n.panelId,
+        activeTrigger: n.trigger,
+        isDirty: !1,
+        bellCutoutOpen: r ? !1 : e.bellCutoutOpen,
+        lastClose: null,
+        // reset on fresh open
+        pendingSideEffects: [...e.pendingSideEffects, ...t]
+      };
+    }
+    case "CLOSE_PANEL": {
+      if (e.activePanelId == null)
+        return e;
+      const t = e.activePanelId, r = e.activeTrigger?.cardId ?? null, i = r != null ? e.bufferByCard[r] : void 0, o = e.isDirty ? n.reason === "apply-button" ? r != null && i != null ? [
+        {
+          type: "COMMIT_BUFFER",
+          payload: { cardId: r, delta: i }
+        }
+      ] : [{ type: "COMMIT_BUFFER" }] : [{ type: "DISCARD_BUFFER" }] : [], c = r != null && i != null ? (() => {
+        const l = { ...e.bufferByCard };
+        return delete l[r], l;
+      })() : e.bufferByCard;
+      return {
+        ...e,
+        activePanelId: null,
+        activeTrigger: null,
+        isDirty: !1,
+        lockHint: null,
+        // closing clears any active lockHint (dirty-buffer condition gone)
+        bufferByCard: c,
+        lastClose: { panelId: t, reason: n.reason },
+        pendingSideEffects: [...e.pendingSideEffects, ...o]
+      };
+    }
+    case "OPEN_BELL_CUTOUT":
+      return e.bellCutoutOpen ? e : e.activePanelId === "notification-center" ? {
+        ...e,
+        activePanelId: null,
+        activeTrigger: null,
+        bellCutoutOpen: !0,
+        pendingSideEffects: [
+          ...e.pendingSideEffects,
+          { type: "AUTO_CLOSE_NOTIF_CENTER" }
+        ]
+      } : { ...e, bellCutoutOpen: !0 };
+    case "CLOSE_BELL_CUTOUT":
+      return e.bellCutoutOpen ? { ...e, bellCutoutOpen: !1 } : e;
+    case "SET_BUFFER_VALUE": {
+      if (e.activePanelId == null || !p.has(e.activePanelId))
+        return {
+          ...e,
+          pendingSideEffects: [
+            ...e.pendingSideEffects,
+            { type: "INVALID_DISPATCH", reason: "no-buffer-panel" }
+          ]
+        };
+      const t = e.bufferByCard[n.cardId], r = t == null;
+      if (!r && t.changes[n.key] === n.value)
+        return e;
+      const o = { kind: "settings", changes: {
+        ...t?.kind === "settings" ? t.changes : {},
+        [n.key]: n.value
+      } }, c = { ...e.bufferByCard, [n.cardId]: o }, l = r ? [
+        {
+          type: "SCHEDULE_TIMER",
+          ms: 0,
+          action: { type: "BUFFER_BECOMES_DIRTY" }
+        }
+      ] : [];
+      return {
+        ...e,
+        bufferByCard: c,
+        pendingSideEffects: [...e.pendingSideEffects, ...l]
+      };
+    }
+    case "CLEAR_BUFFER": {
+      if (e.bufferByCard[n.cardId] == null)
+        return e;
+      const r = Object.keys(e.bufferByCard).length === 1, i = { ...e.bufferByCard };
+      delete i[n.cardId];
+      const o = r && e.isDirty ? [
+        {
+          type: "SCHEDULE_TIMER",
+          ms: 0,
+          action: { type: "BUFFER_BECOMES_CLEAN" }
+        }
+      ] : [];
+      return {
+        ...e,
+        bufferByCard: i,
+        pendingSideEffects: [...e.pendingSideEffects, ...o]
+      };
+    }
+    case "BUFFER_BECOMES_DIRTY":
+      return e.activePanelId == null || !p.has(e.activePanelId) ? {
+        ...e,
+        pendingSideEffects: [
+          ...e.pendingSideEffects,
+          { type: "INVALID_DISPATCH", reason: "no-buffer-panel" }
+        ]
+      } : e.isDirty ? e : { ...e, isDirty: !0 };
+    case "BUFFER_BECOMES_CLEAN":
+      return e.isDirty ? { ...e, isDirty: !1 } : e;
+    case "SET_LOCK_HINT":
+      return {
+        ...e,
+        lockHint: n.hint,
+        pendingSideEffects: [
+          ...e.pendingSideEffects,
+          {
+            type: "SCHEDULE_TIMER",
+            ms: Math.max(0, n.hint.expiresAt - Date.now()),
+            action: { type: "CLEAR_LOCK_HINT" }
+          }
+        ]
+      };
+    case "CLEAR_LOCK_HINT":
+      return e.lockHint == null ? e : { ...e, lockHint: null };
+    case "DRAIN_SIDE_EFFECTS":
+      return e.pendingSideEffects.length === 0 ? e : typeof n.count == "number" && n.count > 0 ? n.count >= e.pendingSideEffects.length ? { ...e, pendingSideEffects: [] } : {
+        ...e,
+        pendingSideEffects: e.pendingSideEffects.slice(n.count)
+      } : {
+        ...e,
+        pendingSideEffects: []
+      };
+    default:
+      return e;
+  }
+}
+function D(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 w() {
+  const [e, n] = m(T, L), t = d([]), r = d(null);
+  u(() => () => {
+    r.current != null && (window.clearTimeout(r.current), r.current = null);
+  }, []), u(() => {
+    const c = e.pendingSideEffects.length;
+    if (c !== 0) {
+      for (const l of e.pendingSideEffects)
+        l.type === "SCHEDULE_TIMER" ? (r.current != null && window.clearTimeout(r.current), r.current = window.setTimeout(() => {
+          r.current = null, n(l.action);
+        }, Math.max(0, l.ms))) : l.type === "SET_LOCK_HINT" ? n({ type: "SET_LOCK_HINT", hint: l.hint }) : l.type === "HANDOFF_CLOSE" ? t.current = [
+          ...t.current.slice(-99),
+          {
+            panelId: l.previousPanelId,
+            reason: "mutex-handoff",
+            at: Date.now(),
+            note: "F22: mutex-handoff synthetic close-log entry"
+          }
+        ] : l.type === "INVALID_DISPATCH" && process.env.NODE_ENV !== "production" && console.warn("[panels] INVALID_DISPATCH:", l.reason);
+      n({ type: "DRAIN_SIDE_EFFECTS", count: c });
+    }
+  }, [e.pendingSideEffects, n]), u(() => {
+    if (!e.lastClose) return;
+    const c = {
+      panelId: e.lastClose.panelId,
+      reason: e.lastClose.reason,
+      at: Date.now(),
+      note: e.lastClose.reason === "nav-escape-hatch" ? "F21: backdrop-click OR page-nav escape" : void 0
+    };
+    t.current = [
+      ...t.current.slice(-99),
+      c
+    ];
+  }, [e.lastClose]);
+  const i = C(
+    () => D(e),
+    [e.activePanelId, e.bellCutoutOpen, e.isDirty]
+  ), o = v(() => t.current.slice(), []);
+  return { state: e, surfaceState: i, dispatch: n, getCloseLog: o };
+}
+function Y({ children: e }) {
+  const n = w(), t = C(
+    () => 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__ */ a(f.Provider, { value: t, children: e });
+}
+const N = "(prefers-reduced-motion: reduce)";
+function y() {
+  return typeof window > "u" || typeof window.matchMedia != "function" ? null : window.matchMedia(N);
+}
+function x(e) {
+  const n = y();
+  return n ? (n.addEventListener("change", e), () => {
+    n.removeEventListener("change", e);
+  }) : () => {
+  };
+}
+function H() {
+  const e = y();
+  return e ? e.matches : !1;
+}
+function F() {
+  return !1;
+}
+function R() {
+  return _(x, H, F);
+}
+const B = {
+  position: "relative",
+  pointerEvents: "auto"
+};
+function A({ children: e, onClose: n, footer: t }) {
+  return /* @__PURE__ */ E(
+    "div",
+    {
+      "data-chrome": "panel",
+      role: "dialog",
+      "aria-modal": "true",
+      className: "gloss-panel-chrome",
+      style: B,
+      children: [
+        /* @__PURE__ */ a("div", { className: "gloss-panel-chrome__header", children: /* @__PURE__ */ a(
+          "button",
+          {
+            id: "panel-close",
+            type: "button",
+            "aria-label": "Close panel",
+            className: "gloss-panel-chrome__close",
+            onClick: n,
+            children: "×"
+          }
+        ) }),
+        /* @__PURE__ */ a("div", { className: "gloss-panel-chrome__body", children: e }),
+        t != null && /* @__PURE__ */ a("div", { className: "gloss-panel-chrome__footer", children: t })
+      ]
+    }
+  );
+}
+function k(e) {
+  if (process.env.NODE_ENV === "production" || !e || !e.parentElement) return;
+  const n = e.parentElement, t = window.getComputedStyle(n);
+  t.perspective === "none" && console.warn(
+    "[PanelMount] §2.7 violation: parent of .gloss-panel-mount has perspective:none. Rotated mount will render flat. Parent:",
+    n
+  ), (t.overflow === "hidden" || t.overflowY === "hidden") && console.warn(
+    "[PanelMount] §2.9 violation: parent of .gloss-panel-mount has overflow:hidden. Rising panel will be clipped. Parent:",
+    n
+  );
+}
+function M({ isOpen: e, children: n }) {
+  const t = R(), r = d(null);
+  I(() => {
+    k(r.current);
+  }, []);
+  const [i, o] = P(!1);
+  u(() => {
+    if (!e) {
+      o(!1);
+      return;
+    }
+    const l = requestAnimationFrame(() => o(!0));
+    return () => cancelAnimationFrame(l);
+  }, [e]);
+  const c = [
+    "gloss-panel-mount",
+    i ? "has-panel" : "",
+    t ? "reduced-motion" : ""
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      ref: r,
+      className: c,
+      "data-mount": "panel",
+      "data-open": e ? "true" : "false",
+      children: n
+    }
+  );
+}
+const U = {
+  position: "fixed",
+  top: 0,
+  left: 0,
+  right: 0,
+  height: "var(--tb-h, 60px)",
+  perspective: "var(--panel-perspective, 1500px)",
+  perspectiveOrigin: "center bottom",
+  overflow: "visible",
+  pointerEvents: "none",
+  zIndex: 55
+}, V = {
+  position: "fixed",
+  top: "var(--tb-h, 60px)",
+  left: 0,
+  right: 0,
+  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).
+  pointerEvents: "none",
+  background: "rgba(0, 0, 0, 0.04)"
+};
+function z({ panelComponents: e }) {
+  const { state: n, dispatch: t, getCloseLog: r } = O(), i = n.activePanelId ? e[n.activePanelId] : null;
+  n.activePanelId && !i && process.env.NODE_ENV !== "production" && console.error(
+    "[panels] No panel component registered for activePanelId:",
+    n.activePanelId
+  ), u(() => {
+    if (n.activePanelId == null) return;
+    function s(h) {
+      h.key === "Escape" && t({ type: "CLOSE_PANEL", reason: "escape-key" });
+    }
+    return document.addEventListener("keydown", s), () => {
+      document.removeEventListener("keydown", s);
+    };
+  }, [n.activePanelId, t]);
+  const o = d(n);
+  I(() => {
+    o.current = n;
+  }), u(() => {
+    if (process.env.NODE_ENV === "production") return;
+    const s = window;
+    return s.__panelsHostHandle && console.warn("[panels] multiple PanelHost/PanelHostShell instances mounted; dev handle is unreliable"), s.__panelsHostHandle = {
+      dispatch: t,
+      getState: () => o.current,
+      getCloseLog: r
+    }, () => {
+      s.__panelsHostHandle?.dispatch === t && delete s.__panelsHostHandle;
+    };
+  }, [t, r]);
+  const c = v(() => {
+    t({ type: "CLOSE_PANEL", reason: "nav-escape-hatch" });
+  }, [t]), l = n.activePanelId != null && i != null;
+  return /* @__PURE__ */ E("div", { "data-panel-host": "true", style: U, children: [
+    l && /* @__PURE__ */ a(
+      "div",
+      {
+        "data-panel-scrim": "true",
+        style: V,
+        onClick: c
+      }
+    ),
+    /* @__PURE__ */ a(M, { isOpen: l, children: l && /* @__PURE__ */ a(
+      A,
+      {
+        isOpen: !0,
+        onClose: () => t({ type: "CLOSE_PANEL", reason: "header-x" }),
+        children: /* @__PURE__ */ a(i, { isOpen: !0 })
+      }
+    ) })
+  ] });
+}
+const Q = {
+  "apply-button": !0,
+  // the ONLY commit reason
+  "cancel-button": !1,
+  "header-x": !1,
+  "escape-key": !1,
+  "page-nav": !1,
+  "mutex-handoff": !1,
+  "ghost-anchor": !1,
+  "viewport-collapse": !1,
+  unmount: !1,
+  "nav-escape-hatch": !1
+};
+export {
+  Q as C,
+  Y as P,
+  O as a,
+  z as b,
+  A as c,
+  w as d,
+  D as e,
+  R as f,
+  M as g,
+  L as i,
+  T as r,
+  q as u
+};