@mt-gloss/ui 0.1.84 → 0.1.85

package/COMMITS-BUj_vdP8.js

@@ -0,0 +1,292 @@
+import { jsx as i, jsxs as d, Fragment as v } from "react/jsx-runtime";
+import { createContext as I, useContext as f, useReducer as S, useRef as c, useEffect as a, useMemo as p, useCallback as E, useLayoutEffect as P } from "react";
+const s = I(null);
+function _() {
+  const e = f(s);
+  if (!e)
+    throw new Error(
+      "[panels] usePanelContext must be used inside <PanelProvider>. See @mt-gloss/ui/composites/panels."
+    );
+  return e;
+}
+function w() {
+  return f(s);
+}
+const y = {
+  activePanelId: null,
+  activeTrigger: null,
+  bellCutoutOpen: !1,
+  isDirty: !1,
+  lockHint: null,
+  lastClose: null,
+  pendingSideEffects: []
+}, h = /* @__PURE__ */ new Set(["settings"]);
+function O(e, n) {
+  return e == null ? !1 : JSON.stringify(e) === JSON.stringify(n);
+}
+function m(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 && O(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.isDirty ? n.reason === "apply-button" ? [{ type: "COMMIT_BUFFER" }] : [{ type: "DISCARD_BUFFER" }] : [];
+      return {
+        ...e,
+        activePanelId: null,
+        activeTrigger: null,
+        isDirty: !1,
+        lockHint: null,
+        // closing clears any active lockHint (dirty-buffer condition gone)
+        lastClose: { panelId: t, reason: n.reason },
+        pendingSideEffects: [...e.pendingSideEffects, ...r]
+      };
+    }
+    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 "BUFFER_BECOMES_DIRTY":
+      return e.activePanelId == null || !h.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 : {
+        ...e,
+        pendingSideEffects: []
+      };
+    default:
+      return e;
+  }
+}
+function L(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 D() {
+  const [e, n] = S(m, y), t = c([]);
+  c(null), a(() => {
+    if (e.pendingSideEffects.length !== 0) {
+      for (const l of e.pendingSideEffects)
+        l.type === "SCHEDULE_TIMER" ? window.setTimeout(() => n(l.action), Math.max(0, l.ms)) : l.type === "INVALID_DISPATCH" && process.env.NODE_ENV !== "production" && console.warn("[panels] INVALID_DISPATCH:", l.reason);
+      n({ type: "DRAIN_SIDE_EFFECTS" });
+    }
+  }, [e.pendingSideEffects]), a(() => {
+    if (!e.lastClose) return;
+    const l = {
+      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),
+      l
+    ];
+  }, [e.lastClose]);
+  const r = p(
+    () => L(e),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [e.activePanelId]
+  ), o = E(() => t.current.slice(), []);
+  return { state: e, surfaceState: r, dispatch: n, getCloseLog: o };
+}
+function F({ children: e }) {
+  const n = D(), t = p(
+    () => 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(s.Provider, { value: t, children: e });
+}
+const N = {
+  position: "relative",
+  pointerEvents: "auto"
+};
+function b({ children: e, onClose: n, isOpen: t = !0 }) {
+  return /* @__PURE__ */ d(
+    "div",
+    {
+      "data-chrome": "panel",
+      "data-open": t ? "true" : "false",
+      role: "dialog",
+      "aria-modal": "true",
+      className: "gloss-panel-chrome",
+      style: N,
+      children: [
+        /* @__PURE__ */ i("div", { className: "gloss-panel-chrome__header", children: /* @__PURE__ */ i(
+          "button",
+          {
+            id: "panel-close",
+            type: "button",
+            "aria-label": "Close panel",
+            className: "gloss-panel-chrome__close",
+            onClick: n,
+            children: "×"
+          }
+        ) }),
+        /* @__PURE__ */ i("div", { className: "gloss-panel-chrome__body", children: e })
+      ]
+    }
+  );
+}
+const T = {
+  position: "fixed",
+  top: 0,
+  left: 0,
+  right: 0,
+  height: "var(--tb-h, 60px)",
+  perspective: "1200px",
+  perspectiveOrigin: "center bottom",
+  overflow: "visible",
+  pointerEvents: "none",
+  zIndex: 55
+}, x = {
+  position: "fixed",
+  top: "var(--tb-h, 60px)",
+  left: 0,
+  right: 0,
+  bottom: 0,
+  zIndex: 1,
+  pointerEvents: "auto",
+  background: "rgba(0, 0, 0, 0.04)"
+};
+function R({ panelComponents: e }) {
+  const { state: n, dispatch: t, getCloseLog: r } = _(), 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
+  ), a(() => {
+    if (n.activePanelId == null) return;
+    function u(C) {
+      C.key === "Escape" && t({ type: "CLOSE_PANEL", reason: "escape-key" });
+    }
+    return document.addEventListener("keydown", u), () => {
+      document.removeEventListener("keydown", u);
+    };
+  }, [n.activePanelId, t]);
+  const l = c(n);
+  P(() => {
+    l.current = n;
+  }), a(() => {
+    if (process.env.NODE_ENV !== "production")
+      return window.__panelsHostHandle = {
+        dispatch: t,
+        getState: () => l.current,
+        getCloseLog: r
+      }, () => {
+        delete window.__panelsHostHandle;
+      };
+  }, [t, r]);
+  const g = E(() => {
+    t({ type: "CLOSE_PANEL", reason: "nav-escape-hatch" });
+  }, [t]);
+  return /* @__PURE__ */ i("div", { "data-panel-host": "true", style: T, children: n.activePanelId != null && o != null && /* @__PURE__ */ d(v, { children: [
+    /* @__PURE__ */ i(
+      "div",
+      {
+        "data-panel-scrim": "true",
+        style: x,
+        onClick: g
+      }
+    ),
+    /* @__PURE__ */ i(
+      b,
+      {
+        isOpen: !0,
+        onClose: () => t({ type: "CLOSE_PANEL", reason: "header-x" }),
+        children: /* @__PURE__ */ i(o, { isOpen: !0 })
+      }
+    )
+  ] }) });
+}
+const k = {
+  "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 {
+  k as C,
+  F as P,
+  w as a,
+  R as b,
+  b as c,
+  D as d,
+  L as e,
+  y as i,
+  m as r,
+  _ as u
+};