@mt-gloss/ui 0.1.84 → 0.1.86

package/COMMITS-6U31xb_s.js

@@ -0,0 +1,303 @@
+import { jsx as i, jsxs as f, Fragment as v } from "react/jsx-runtime";
+import { createContext as I, useContext as p, useReducer as S, useRef as s, useEffect as c, useMemo as E, useCallback as C, useLayoutEffect as _ } from "react";
+const u = I(null);
+function h() {
+  const e = p(u);
+  if (!e)
+    throw new Error(
+      "[panels] usePanelContext must be used inside <PanelProvider>. See @mt-gloss/ui/composites/panels."
+    );
+  return e;
+}
+function w() {
+  return p(u);
+}
+const y = {
+  activePanelId: null,
+  activeTrigger: null,
+  bellCutoutOpen: !1,
+  isDirty: !1,
+  lockHint: null,
+  lastClose: null,
+  pendingSideEffects: []
+}, P = /* @__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
+        }
+      ] : [], l = n.panelId === "notification-center" && e.bellCutoutOpen;
+      return {
+        ...e,
+        activePanelId: n.panelId,
+        activeTrigger: n.trigger,
+        isDirty: !1,
+        bellCutoutOpen: l ? !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, l = 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, ...l]
+      };
+    }
+    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 || !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 : {
+        ...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 N() {
+  const [e, n] = S(m, y), t = s([]), l = s(null);
+  c(() => {
+    if (e.pendingSideEffects.length !== 0) {
+      for (const r of e.pendingSideEffects)
+        r.type === "SCHEDULE_TIMER" ? (l.current != null && window.clearTimeout(l.current), l.current = window.setTimeout(() => {
+          l.current = null, n(r.action);
+        }, Math.max(0, r.ms))) : r.type === "SET_LOCK_HINT" ? n({ type: "SET_LOCK_HINT", hint: r.hint }) : r.type === "HANDOFF_CLOSE" ? t.current = [
+          ...t.current.slice(-99),
+          {
+            panelId: r.previousPanelId,
+            reason: "mutex-handoff",
+            at: Date.now(),
+            note: "F22: mutex-handoff synthetic close-log entry"
+          }
+        ] : r.type === "INVALID_DISPATCH" && process.env.NODE_ENV !== "production" && console.warn("[panels] INVALID_DISPATCH:", r.reason);
+      n({ type: "DRAIN_SIDE_EFFECTS" });
+    }
+  }, [e.pendingSideEffects]), c(() => {
+    if (!e.lastClose) return;
+    const r = {
+      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),
+      r
+    ];
+  }, [e.lastClose]);
+  const o = E(
+    () => L(e),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [e.activePanelId, e.bellCutoutOpen, e.isDirty]
+  ), a = C(() => t.current.slice(), []);
+  return { state: e, surfaceState: o, dispatch: n, getCloseLog: a };
+}
+function F({ children: e }) {
+  const n = N(), t = E(
+    () => 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(u.Provider, { value: t, children: e });
+}
+const T = {
+  position: "relative",
+  pointerEvents: "auto"
+};
+function D({ children: e, onClose: n, isOpen: t = !0, footer: l }) {
+  return /* @__PURE__ */ f(
+    "div",
+    {
+      "data-chrome": "panel",
+      "data-open": t ? "true" : "false",
+      role: "dialog",
+      "aria-modal": "true",
+      className: "gloss-panel-chrome",
+      style: T,
+      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 }),
+        l != null && /* @__PURE__ */ i("div", { className: "gloss-panel-chrome__footer", children: l })
+      ]
+    }
+  );
+}
+const b = {
+  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: l } = h(), 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
+  ), c(() => {
+    if (n.activePanelId == null) return;
+    function d(g) {
+      g.key === "Escape" && t({ type: "CLOSE_PANEL", reason: "escape-key" });
+    }
+    return document.addEventListener("keydown", d), () => {
+      document.removeEventListener("keydown", d);
+    };
+  }, [n.activePanelId, t]);
+  const a = s(n);
+  _(() => {
+    a.current = n;
+  }), c(() => {
+    if (process.env.NODE_ENV !== "production")
+      return window.__panelsHostHandle = {
+        dispatch: t,
+        getState: () => a.current,
+        getCloseLog: l
+      }, () => {
+        delete window.__panelsHostHandle;
+      };
+  }, [t, l]);
+  const r = C(() => {
+    t({ type: "CLOSE_PANEL", reason: "nav-escape-hatch" });
+  }, [t]);
+  return /* @__PURE__ */ i("div", { "data-panel-host": "true", style: b, children: n.activePanelId != null && o != null && /* @__PURE__ */ f(v, { children: [
+    /* @__PURE__ */ i(
+      "div",
+      {
+        "data-panel-scrim": "true",
+        style: x,
+        onClick: r
+      }
+    ),
+    /* @__PURE__ */ i(
+      D,
+      {
+        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,
+  D as c,
+  N as d,
+  L as e,
+  y as i,
+  m as r,
+  h as u
+};

package/composites-panels.js

@@ -1,30 +1,37 @@
-import { u as c, a as u, c as d } from "./COMMITS-or4m2o8k.js";
-import { C as L, b as O, P as _, e as k, i as N, r as w, d as g } from "./COMMITS-or4m2o8k.js";
-import { jsx as r } from "react/jsx-runtime";
-import { useEffect as l, useRef as p, useLayoutEffect as f, useCallback as P } from "react";
+import { a as i, u, c as p } from "./COMMITS-6U31xb_s.js";
+import { C as I, b as N, P as k, e as O, i as w, r as A, d as H } from "./COMMITS-6U31xb_s.js";
+import { jsxs as c, jsx as r, Fragment as f } from "react/jsx-runtime";
+import { useEffect as l, useRef as m, useLayoutEffect as g, useCallback as P } from "react";
+function S({ isOpen: n }) {
+  const t = i()?.state.activeTrigger, o = t?.kind === "card-overflow" ? t.cardId : null;
+  return n ? /* @__PURE__ */ c("div", { "data-shell": "settings", children: [
+    /* @__PURE__ */ r("p", { style: { margin: 0, fontSize: 14, color: "#495057" }, children: o ? `Settings for card: ${o}` : "Settings" }),
+    /* @__PURE__ */ r("p", { style: { margin: "8px 0 0", fontSize: 12, color: "#adb5bd" }, children: "Configuration options coming soon." })
+  ] }) : null;
+}
 const v = {
   position: "fixed",
   inset: 0,
   pointerEvents: "none",
   zIndex: 55
-}, E = {
+}, y = {
   position: "absolute",
   inset: 0,
   zIndex: 1,
   pointerEvents: "auto",
   background: "rgba(0, 0, 0, 0.04)"
 };
-function S() {
-  const { state: n, dispatch: e, getCloseLog: t } = c();
+function _() {
+  const { state: n, dispatch: e, getCloseLog: t } = u();
   l(() => {
     if (n.activePanelId == null) return;
-    function s(i) {
-      i.key === "Escape" && e({ type: "CLOSE_PANEL", reason: "escape-key" });
+    function s(d) {
+      d.key === "Escape" && e({ type: "CLOSE_PANEL", reason: "escape-key" });
     }
     return document.addEventListener("keydown", s), () => document.removeEventListener("keydown", s);
   }, [n.activePanelId, e]);
-  const o = p(n);
-  f(() => {
+  const o = m(n);
+  g(() => {
     o.current = n;
   }), l(() => {
     if (process.env.NODE_ENV !== "production")
@@ -43,40 +50,66 @@ function S() {
     "div",
     {
       "data-panel-scrim": "true",
-      style: E,
+      style: y,
       onClick: a
     }
   ) });
 }
-function h({ panelComponents: n }) {
-  const e = u();
+function b({ panelComponents: n }) {
+  const e = i();
   if (e == null) return null;
   const { state: t, dispatch: o } = e;
   if (t.activePanelId == null) return null;
   const a = n[t.activePanelId];
-  return a == null ? (process.env.NODE_ENV !== "production" && console.error(
-    "[panels] No panel component registered for activePanelId:",
-    t.activePanelId
-  ), null) : /* @__PURE__ */ r(
-    d,
+  if (a == null)
+    return process.env.NODE_ENV !== "production" && console.error(
+      "[panels] No panel component registered for activePanelId:",
+      t.activePanelId
+    ), null;
+  const s = t.activePanelId === "settings" ? /* @__PURE__ */ c(f, { children: [
+    /* @__PURE__ */ r(
+      "button",
+      {
+        id: "settings-cancel",
+        type: "button",
+        className: "gloss-panel-chrome__footer-btn",
+        onClick: () => o({ type: "CLOSE_PANEL", reason: "cancel-button" }),
+        children: "Cancel"
+      }
+    ),
+    /* @__PURE__ */ r(
+      "button",
+      {
+        id: "settings-apply",
+        type: "button",
+        className: "gloss-panel-chrome__footer-btn gloss-panel-chrome__footer-btn--primary",
+        onClick: () => o({ type: "CLOSE_PANEL", reason: "apply-button" }),
+        children: "Apply"
+      }
+    )
+  ] }) : null;
+  return /* @__PURE__ */ r(
+    p,
     {
       isOpen: !0,
       onClose: () => o({ type: "CLOSE_PANEL", reason: "header-x" }),
+      footer: s,
       children: /* @__PURE__ */ r(a, { isOpen: !0 })
     }
   );
 }
 export {
-  L as COMMITS,
-  d as PanelChrome,
-  O as PanelHost,
-  S as PanelHostShell,
-  _ as PanelProvider,
-  h as PanelSlot,
-  k as deriveSurfaceState,
-  N as initialState,
-  w as reducer,
-  c as usePanelContext,
-  u as usePanelContextOptional,
-  g as usePanelCoordinator
+  I as COMMITS,
+  p as PanelChrome,
+  N as PanelHost,
+  _ as PanelHostShell,
+  k as PanelProvider,
+  b as PanelSlot,
+  S as SettingsShell,
+  O as deriveSurfaceState,
+  w as initialState,
+  A as reducer,
+  u as usePanelContext,
+  i as usePanelContextOptional,
+  H as usePanelCoordinator
 };

package/index.js

@@ -6,7 +6,7 @@ import F, { useRef as P, useEffect as A, useState as E, useCallback as C, useId
 import { motion as G, useMotionValue as tt, AnimatePresence as at, useDragControls as nt } from "framer-motion";
 import { B as rt, a as X, b as ce, U as fe } from "./UIContext-DP6JGCto.js";
 import { c as Wo, u as Vo } from "./UIContext-DP6JGCto.js";
-import { C as Uo, c as Yo, b as Zo, P as qo, e as Qo, i as Xo, r as Jo, u as el, a as tl, d as al } from "./COMMITS-or4m2o8k.js";
+import { C as Uo, c as Yo, b as Zo, P as qo, e as Qo, i as Xo, r as Jo, u as el, a as tl, d as al } from "./COMMITS-6U31xb_s.js";
 import { createPortal as st } from "react-dom";
 import { DEFAULT_MARKET_PRESETS as rl, DEFAULT_PINNED as sl, PERIOD_OPTIONS as il, ROLLING_OPTIONS as ol, TODAY_PRESET as ll, findPreset as cl, formatDateRange as dl, formatMarketDates as ul, formatTrend as ml, formatValue as gl, generateMarketId as pl, getAllPresets as hl, getDateRangeForPreset as fl, getPresetLabel as bl, isInRange as vl, isMarketActive as yl, isSameDay as wl, normalizePresetId as _l, toUppercasePresetId as Cl } from "@mt-gloss/utils";
 import it from "@mui/icons-material/AccessTime";

package/lib/composites/panels/PanelChrome.d.ts

@@ -3,5 +3,7 @@ export interface PanelChromeProps {
     children: ReactNode;
     onClose: () => void;
     isOpen?: boolean;
+    /** P2 — optional footer slot. Notification-center keeps null (no footer). */
+    footer?: ReactNode;
 }
-export declare function PanelChrome({ children, onClose, isOpen }: PanelChromeProps): import("react/jsx-runtime").JSX.Element;
+export declare function PanelChrome({ children, onClose, isOpen, footer }: PanelChromeProps): import("react/jsx-runtime").JSX.Element;

package/lib/composites/panels/coordinator/coordinator.d.ts

@@ -1,3 +1,8 @@
 import { PanelAction, PanelState } from './types';
 export declare const initialState: PanelState;
+/**
+ * Set of PanelIds that support the dirty-buffer flow.
+ * Only 'settings' in P2; future panels added here when P6+ wires buffer-becomes-dirty.
+ */
+export declare const PANELS_WITH_BUFFER: Set<string>;
 export declare function reducer(state: PanelState, action: PanelAction): PanelState;

package/lib/composites/panels/coordinator/types.d.ts

@@ -9,6 +9,10 @@
  * derivation in P1 reaches `'idle'` + `'notif-center'` only; other branches return
  * `'idle'` with a TODO until P2 extends the reducer to full 7-state.
  *
+ * P2 reach: full 7-state machine. All PanelIds supported. PanelState gains
+ * activeTrigger, bellCutoutOpen, isDirty, lockHint. PanelAction gains 6 new
+ * variants. SideEffect gains 5 new variants.
+ *
  * Plan refs:
  *   F1 — exhaustive types ship Day 1
  *   F4 — `lastClose` carries `{ panelId, reason }` so closeLog pump can append
@@ -48,9 +52,15 @@ export interface CloseLogEntry {
      * F21 — When `reason === 'nav-escape-hatch'`, the same enum literal fires for
      * both backdrop-click AND page-nav escape. Future analytics MUST inspect this
      * note before attributing UX intent.
+     * F22 — When `reason === 'mutex-handoff'`, synthetic close-log entry from pump 1.
      */
     note?: string;
 }
+export interface LockHint {
+    blockedTrigger: TriggerContext;
+    activeCardId: string | null;
+    expiresAt: number;
+}
 export type SideEffect = {
     type: 'SCHEDULE_TIMER';
     ms: number;
@@ -58,9 +68,26 @@ export type SideEffect = {
 } | {
     type: 'INVALID_DISPATCH';
     reason: string;
+} | {
+    type: 'SET_LOCK_HINT';
+    hint: LockHint;
+} | {
+    type: 'HANDOFF_CLOSE';
+    reason: CloseReason;
+    previousPanelId: PanelId;
+} | {
+    type: 'COMMIT_BUFFER';
+} | {
+    type: 'DISCARD_BUFFER';
+} | {
+    type: 'AUTO_CLOSE_NOTIF_CENTER';
 };
 export interface PanelState {
     activePanelId: PanelId | null;
+    activeTrigger: TriggerContext | null;
+    bellCutoutOpen: boolean;
+    isDirty: boolean;
+    lockHint: LockHint | null;
     lastClose: {
         panelId: PanelId;
         reason: CloseReason;
@@ -74,11 +101,19 @@ export type PanelAction = {
 } | {
     type: 'CLOSE_PANEL';
     reason: CloseReason;
+} | {
+    type: 'OPEN_BELL_CUTOUT';
+} | {
+    type: 'CLOSE_BELL_CUTOUT';
+} | {
+    type: 'BUFFER_BECOMES_DIRTY';
+} | {
+    type: 'BUFFER_BECOMES_CLEAN';
+} | {
+    type: 'SET_LOCK_HINT';
+    hint: LockHint;
+} | {
+    type: 'CLEAR_LOCK_HINT';
 } | {
     type: 'DRAIN_SIDE_EFFECTS';
 };
-export interface LockHint {
-    blockedTrigger: TriggerContext;
-    activeCardId: string | null;
-    expiresAt: number;
-}

package/lib/composites/panels/index.d.ts

@@ -8,6 +8,7 @@
  * `composites-panels.js` matching existing `internals` + `catalog` pattern.
  */
 export { PanelProvider, usePanelContext, usePanelContextOptional } from './PanelProvider';
+export { SettingsShell } from './shells/SettingsShell';
 export { PanelHost } from './PanelHost';
 export { PanelHostShell } from './PanelHostShell';
 export { PanelSlot } from './PanelSlot';

package/lib/composites/panels/shells/SettingsShell.d.ts

@@ -0,0 +1,2 @@
+import { PanelShellProps } from '../PanelHost';
+export declare function SettingsShell({ isOpen }: PanelShellProps): import("react/jsx-runtime").JSX.Element | null;

package/lib/composites/panels/shells/index.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Panel shells barrel — all shells available from '@mt-gloss/ui/composites/panels'.
+ */
+export { SettingsShell } from './SettingsShell';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mt-gloss/ui",
-  "version": "0.1.84",
+  "version": "0.1.86",
   "type": "module",
   "publishConfig": {
     "access": "restricted"