@mt-gloss/ui 0.1.89 → 0.1.90

package/{COMMITS-CoGFzpf4.js → COMMITS-qn5rIipN.js}

@@ -1,7 +1,7 @@
-import { jsx as i, jsxs as f, Fragment as v } from "react/jsx-runtime";
-import { createContext as _, useContext as p, useReducer as h, useRef as u, useEffect as s, useMemo as E, useCallback as g, useState as P, useLayoutEffect as C } from "react";
-const d = _(null);
-function S() {
+import { jsx as i, jsxs as f, Fragment as I } from "react/jsx-runtime";
+import { createContext as h, useContext as p, useReducer as m, useRef as u, useEffect as a, useMemo as E, useCallback as g, useSyncExternalStore as S, useLayoutEffect as _ } from "react";
+const d = h(null);
+function P() {
   const e = p(d);
   if (!e)
     throw new Error(
@@ -9,10 +9,10 @@ function S() {
     );
   return e;
 }
-function F() {
+function V() {
   return p(d);
 }
-const m = {
+const y = {
   activePanelId: null,
   activeTrigger: null,
   bellCutoutOpen: !1,
@@ -20,8 +20,8 @@ const m = {
   lockHint: null,
   lastClose: null,
   pendingSideEffects: []
-}, y = /* @__PURE__ */ new Set(["settings"]);
-function O(e, n) {
+}, O = /* @__PURE__ */ new Set(["settings"]);
+function L(e, n) {
   if (e == null || e.kind !== n.kind) return !1;
   switch (e.kind) {
     case "bell":
@@ -34,7 +34,7 @@ function O(e, n) {
       return e.global === n.global && e.align === n.align;
   }
 }
-function L(e, n) {
+function T(e, n) {
   switch (n.type) {
     case "OPEN_PANEL": {
       if (e.activePanelId && e.isDirty)
@@ -52,7 +52,7 @@ function L(e, n) {
             }
           ]
         };
-      if (e.activePanelId === n.panelId && O(e.activeTrigger, n.trigger))
+      if (e.activePanelId === n.panelId && L(e.activeTrigger, n.trigger))
         return e;
       const t = e.activePanelId != null ? [
         {
@@ -101,7 +101,7 @@ function L(e, n) {
     case "CLOSE_BELL_CUTOUT":
       return e.bellCutoutOpen ? { ...e, bellCutoutOpen: !1 } : e;
     case "BUFFER_BECOMES_DIRTY":
-      return e.activePanelId == null || !y.has(e.activePanelId) ? {
+      return e.activePanelId == null || !O.has(e.activePanelId) ? {
         ...e,
         pendingSideEffects: [
           ...e.pendingSideEffects,
@@ -134,14 +134,14 @@ function L(e, n) {
       return e;
   }
 }
-function T(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 D() {
-  const [e, n] = h(L, m), t = u([]), l = u(null);
-  s(() => () => {
+function N() {
+  const [e, n] = m(T, y), t = u([]), l = u(null);
+  a(() => () => {
     l.current != null && (window.clearTimeout(l.current), l.current = null);
-  }, []), s(() => {
+  }, []), a(() => {
     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(() => {
@@ -157,7 +157,7 @@ function D() {
         ] : r.type === "INVALID_DISPATCH" && process.env.NODE_ENV !== "production" && console.warn("[panels] INVALID_DISPATCH:", r.reason);
       n({ type: "DRAIN_SIDE_EFFECTS" });
     }
-  }, [e.pendingSideEffects, n]), s(() => {
+  }, [e.pendingSideEffects, n]), a(() => {
     if (!e.lastClose) return;
     const r = {
       panelId: e.lastClose.panelId,
@@ -170,15 +170,14 @@ function D() {
       r
     ];
   }, [e.lastClose]);
-  const o = E(
-    () => T(e),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+  const c = E(
+    () => D(e),
     [e.activePanelId, e.bellCutoutOpen, e.isDirty]
-  ), a = g(() => t.current.slice(), []);
-  return { state: e, surfaceState: o, dispatch: n, getCloseLog: a };
+  ), s = g(() => t.current.slice(), []);
+  return { state: e, surfaceState: c, dispatch: n, getCloseLog: s };
 }
-function k({ children: e }) {
-  const n = D(), t = E(
+function j({ 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.
@@ -186,24 +185,19 @@ function k({ children: e }) {
   );
   return /* @__PURE__ */ i(d.Provider, { value: t, children: e });
 }
-const N = {
+const w = {
   position: "relative",
   pointerEvents: "auto"
 };
-function x({ children: e, onClose: n, isOpen: t = !0, footer: l }) {
-  const [o, a] = P(!1);
-  return C(() => {
-    const r = requestAnimationFrame(() => a(t));
-    return () => cancelAnimationFrame(r);
-  }, [t]), /* @__PURE__ */ f(
+function x({ children: e, onClose: n, footer: t }) {
+  return /* @__PURE__ */ f(
     "div",
     {
       "data-chrome": "panel",
-      "data-open": o ? "true" : "false",
       role: "dialog",
       "aria-modal": "true",
       className: "gloss-panel-chrome",
-      style: N,
+      style: w,
       children: [
         /* @__PURE__ */ i("div", { className: "gloss-panel-chrome__header", children: /* @__PURE__ */ i(
           "button",
@@ -217,23 +211,60 @@ function x({ children: e, onClose: n, isOpen: t = !0, footer: l }) {
           }
         ) }),
         /* @__PURE__ */ i("div", { className: "gloss-panel-chrome__body", children: e }),
-        l != null && /* @__PURE__ */ i("div", { className: "gloss-panel-chrome__footer", children: l })
+        t != null && /* @__PURE__ */ i("div", { className: "gloss-panel-chrome__footer", children: t })
       ]
     }
   );
 }
-const H = {
+const H = "(prefers-reduced-motion: reduce)";
+function v() {
+  return typeof window > "u" || typeof window.matchMedia != "function" ? null : window.matchMedia(H);
+}
+function b(e) {
+  const n = v();
+  return n ? (n.addEventListener("change", e), () => {
+    n.removeEventListener("change", e);
+  }) : () => {
+  };
+}
+function A() {
+  const e = v();
+  return e ? e.matches : !1;
+}
+function F() {
+  return !1;
+}
+function R() {
+  return S(b, A, F);
+}
+function k({ isOpen: e, children: n }) {
+  const t = R(), l = [
+    "gloss-panel-mount",
+    e ? "has-panel" : "",
+    t ? "reduced-motion" : ""
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ i(
+    "div",
+    {
+      className: l,
+      "data-mount": "panel",
+      "data-open": e ? "true" : "false",
+      children: n
+    }
+  );
+}
+const M = {
   position: "fixed",
   top: 0,
   left: 0,
   right: 0,
   height: "var(--tb-h, 60px)",
-  perspective: "1200px",
+  perspective: "var(--panel-perspective, 1500px)",
   perspectiveOrigin: "center bottom",
   overflow: "visible",
   pointerEvents: "none",
   zIndex: 55
-}, b = {
+}, U = {
   position: "fixed",
   top: "var(--tb-h, 60px)",
   left: 0,
@@ -249,57 +280,57 @@ const H = {
   pointerEvents: "none",
   background: "rgba(0, 0, 0, 0.04)"
 };
-function R({ panelComponents: e }) {
-  const { state: n, dispatch: t, getCloseLog: l } = S(), o = n.activePanelId ? e[n.activePanelId] : null;
-  n.activePanelId && !o && process.env.NODE_ENV !== "production" && console.error(
+function q({ panelComponents: e }) {
+  const { state: n, dispatch: t, getCloseLog: l } = P(), c = n.activePanelId ? e[n.activePanelId] : null;
+  n.activePanelId && !c && process.env.NODE_ENV !== "production" && console.error(
     "[panels] No panel component registered for activePanelId:",
     n.activePanelId
-  ), s(() => {
+  ), a(() => {
     if (n.activePanelId == null) return;
-    function c(I) {
-      I.key === "Escape" && t({ type: "CLOSE_PANEL", reason: "escape-key" });
+    function o(C) {
+      C.key === "Escape" && t({ type: "CLOSE_PANEL", reason: "escape-key" });
     }
-    return document.addEventListener("keydown", c), () => {
-      document.removeEventListener("keydown", c);
+    return document.addEventListener("keydown", o), () => {
+      document.removeEventListener("keydown", o);
     };
   }, [n.activePanelId, t]);
-  const a = u(n);
-  C(() => {
-    a.current = n;
-  }), s(() => {
+  const s = u(n);
+  _(() => {
+    s.current = n;
+  }), a(() => {
     if (process.env.NODE_ENV === "production") return;
-    const c = window;
-    return c.__panelsHostHandle && console.warn("[panels] multiple PanelHost/PanelHostShell instances mounted; dev handle is unreliable"), c.__panelsHostHandle = {
+    const o = window;
+    return o.__panelsHostHandle && console.warn("[panels] multiple PanelHost/PanelHostShell instances mounted; dev handle is unreliable"), o.__panelsHostHandle = {
       dispatch: t,
-      getState: () => a.current,
+      getState: () => s.current,
       getCloseLog: l
     }, () => {
-      c.__panelsHostHandle?.dispatch === t && delete c.__panelsHostHandle;
+      o.__panelsHostHandle?.dispatch === t && delete o.__panelsHostHandle;
     };
   }, [t, l]);
   const r = g(() => {
     t({ type: "CLOSE_PANEL", reason: "nav-escape-hatch" });
   }, [t]);
-  return /* @__PURE__ */ i("div", { "data-panel-host": "true", style: H, children: n.activePanelId != null && o != null && /* @__PURE__ */ f(v, { children: [
+  return /* @__PURE__ */ i("div", { "data-panel-host": "true", style: M, children: n.activePanelId != null && c != null && /* @__PURE__ */ f(I, { children: [
     /* @__PURE__ */ i(
       "div",
       {
         "data-panel-scrim": "true",
-        style: b,
+        style: U,
         onClick: r
       }
     ),
-    /* @__PURE__ */ i(
+    /* @__PURE__ */ i(k, { isOpen: !0, children: /* @__PURE__ */ i(
       x,
       {
         isOpen: !0,
         onClose: () => t({ type: "CLOSE_PANEL", reason: "header-x" }),
-        children: /* @__PURE__ */ i(o, { isOpen: !0 })
+        children: /* @__PURE__ */ i(c, { isOpen: !0 })
       }
-    )
+    ) })
   ] }) });
 }
-const U = {
+const z = {
   "apply-button": !0,
   // the ONLY commit reason
   "cancel-button": !1,
@@ -313,14 +344,16 @@ const U = {
   "nav-escape-hatch": !1
 };
 export {
-  U as C,
-  k as P,
-  F as a,
-  R as b,
+  z as C,
+  j as P,
+  V as a,
+  q as b,
   x as c,
-  D as d,
-  T as e,
-  m as i,
-  L as r,
-  S as u
+  N as d,
+  D as e,
+  k as f,
+  R as g,
+  y as i,
+  T as r,
+  P as u
 };

package/composites-panels.js

@@ -1,20 +1,20 @@
-import { a as i, u, c as p } from "./COMMITS-CoGFzpf4.js";
-import { C as I, b as H, P as N, e as k, i as O, r as w, d as A } from "./COMMITS-CoGFzpf4.js";
-import { jsxs as c, jsx as s, Fragment as f } from "react/jsx-runtime";
-import { useEffect as r, useRef as m, useLayoutEffect as h, useCallback as P } from "react";
-function E({ isOpen: t }) {
-  const n = i()?.state.activeTrigger, o = n?.kind === "card-overflow" ? n.cardId : null;
-  return /* @__PURE__ */ c("div", { "data-shell": "settings", "aria-hidden": !t, children: [
-    /* @__PURE__ */ s("p", { style: { margin: 0, fontSize: 14, color: "#495057" }, children: o ? `Settings for card: ${o}` : "Settings" }),
-    /* @__PURE__ */ s("p", { style: { margin: "8px 0 0", fontSize: 12, color: "#adb5bd" }, children: "Configuration options coming soon." })
+import { a as r, u, f as p, c as f } from "./COMMITS-qn5rIipN.js";
+import { C as H, b as N, P as O, e as w, i as A, r as z, d as M, g as D } from "./COMMITS-qn5rIipN.js";
+import { jsxs as c, jsx as a, Fragment as m } from "react/jsx-runtime";
+import { useEffect as i, useRef as P, useLayoutEffect as h, useCallback as v } from "react";
+function _({ isOpen: e }) {
+  const t = r()?.state.activeTrigger, o = t?.kind === "card-overflow" ? t.cardId : null;
+  return /* @__PURE__ */ c("div", { "data-shell": "settings", "aria-hidden": !e, children: [
+    /* @__PURE__ */ a("p", { style: { margin: 0, fontSize: 14, color: "#495057" }, children: o ? `Settings for card: ${o}` : "Settings" }),
+    /* @__PURE__ */ a("p", { style: { margin: "8px 0 0", fontSize: 12, color: "#adb5bd" }, children: "Configuration options coming soon." })
   ] });
 }
-const g = {
+const y = {
   position: "fixed",
   inset: 0,
   pointerEvents: "none",
   zIndex: 55
-}, v = {
+}, g = {
   position: "absolute",
   inset: 0,
   zIndex: 1,
@@ -23,54 +23,54 @@ const g = {
   pointerEvents: "none",
   background: "rgba(0, 0, 0, 0.04)"
 };
-function _() {
-  const { state: t, dispatch: e, getCloseLog: n } = u();
-  r(() => {
-    if (t.activePanelId == null) return;
-    function a(d) {
-      d.key === "Escape" && e({ type: "CLOSE_PANEL", reason: "escape-key" });
+function b() {
+  const { state: e, dispatch: n, getCloseLog: t } = u();
+  i(() => {
+    if (e.activePanelId == null) return;
+    function l(d) {
+      d.key === "Escape" && n({ type: "CLOSE_PANEL", reason: "escape-key" });
     }
-    return document.addEventListener("keydown", a), () => document.removeEventListener("keydown", a);
-  }, [t.activePanelId, e]);
-  const o = m(t);
+    return document.addEventListener("keydown", l), () => document.removeEventListener("keydown", l);
+  }, [e.activePanelId, n]);
+  const o = P(e);
   h(() => {
-    o.current = t;
-  }), r(() => {
+    o.current = e;
+  }), i(() => {
     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 = {
-      dispatch: e,
+    const l = window;
+    return l.__panelsHostHandle && console.warn("[panels] multiple PanelHost/PanelHostShell instances mounted; dev handle is unreliable"), l.__panelsHostHandle = {
+      dispatch: n,
       getState: () => o.current,
-      getCloseLog: n
+      getCloseLog: t
     }, () => {
-      a.__panelsHostHandle?.dispatch === e && delete window.__panelsHostHandle;
+      l.__panelsHostHandle?.dispatch === n && delete window.__panelsHostHandle;
     };
-  }, [e, n]);
-  const l = P(() => {
-    e({ type: "CLOSE_PANEL", reason: "nav-escape-hatch" });
-  }, [e]);
-  return /* @__PURE__ */ s("div", { "data-panel-host": "true", style: g, children: t.activePanelId != null && /* @__PURE__ */ s(
+  }, [n, t]);
+  const s = v(() => {
+    n({ type: "CLOSE_PANEL", reason: "nav-escape-hatch" });
+  }, [n]);
+  return /* @__PURE__ */ a("div", { "data-panel-host": "true", style: y, children: e.activePanelId != null && /* @__PURE__ */ a(
     "div",
     {
       "data-panel-scrim": "true",
-      style: v,
-      onClick: l
+      style: g,
+      onClick: s
     }
   ) });
 }
-function b({ panelComponents: t }) {
-  const e = i();
-  if (e == null) return null;
-  const { state: n, dispatch: o } = e;
-  if (n.activePanelId == null) return null;
-  const l = t[n.activePanelId];
-  if (l == null)
+function x({ panelComponents: e }) {
+  const n = r();
+  if (n == null) return null;
+  const { state: t, dispatch: o } = n;
+  if (t.activePanelId == null) return null;
+  const s = e[t.activePanelId];
+  if (s == null)
     return process.env.NODE_ENV !== "production" && console.error(
       "[panels] No panel component registered for activePanelId:",
-      n.activePanelId
+      t.activePanelId
     ), null;
-  const a = n.activePanelId === "settings" ? /* @__PURE__ */ c(f, { children: [
-    /* @__PURE__ */ s(
+  const l = t.activePanelId === "settings" ? /* @__PURE__ */ c(m, { children: [
+    /* @__PURE__ */ a(
       "button",
       {
         id: "settings-cancel",
@@ -80,7 +80,7 @@ function b({ panelComponents: t }) {
         children: "Cancel"
       }
     ),
-    /* @__PURE__ */ s(
+    /* @__PURE__ */ a(
       "button",
       {
         id: "settings-apply",
@@ -91,28 +91,34 @@ function b({ panelComponents: t }) {
       }
     )
   ] }) : null;
-  return /* @__PURE__ */ s(
-    p,
+  return /* @__PURE__ */ a(p, { isOpen: !0, children: /* @__PURE__ */ a(
+    f,
     {
       isOpen: !0,
       onClose: () => o({ type: "CLOSE_PANEL", reason: "header-x" }),
-      footer: a,
-      children: /* @__PURE__ */ s(l, { isOpen: !0 })
+      footer: l,
+      children: /* @__PURE__ */ a(s, { isOpen: !0 })
     }
-  );
+  ) });
+}
+function k(e) {
+  return e === null ? null : e.kind === "manage-pages-action" ? `global-${e.align ?? "left"}` : e.kind === "card-overflow" || e.kind === "empty-cell" ? `section-${e.sectionIndex}` : null;
 }
 export {
-  I as COMMITS,
-  p as PanelChrome,
-  H as PanelHost,
-  _ as PanelHostShell,
-  N as PanelProvider,
-  b as PanelSlot,
-  E as SettingsShell,
-  k as deriveSurfaceState,
-  O as initialState,
-  w as reducer,
+  H as COMMITS,
+  f as PanelChrome,
+  N as PanelHost,
+  b as PanelHostShell,
+  p as PanelMount,
+  O as PanelProvider,
+  x as PanelSlot,
+  _ as SettingsShell,
+  w as deriveSurfaceState,
+  A as initialState,
+  k as positionKey,
+  z as reducer,
   u as usePanelContext,
-  i as usePanelContextOptional,
-  A as usePanelCoordinator
+  r as usePanelContextOptional,
+  M as usePanelCoordinator,
+  D as useReducedMotionPanel
 };

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-CoGFzpf4.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-qn5rIipN.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

@@ -2,8 +2,12 @@ import { ReactNode } from 'react';
 export interface PanelChromeProps {
     children: ReactNode;
     onClose: () => void;
+    /**
+     * @deprecated No-op since Phase 11.5 P3a. PanelMount owns all enter/exit motion.
+     * Kept for back-compat with P1/P2 call sites; has no rendering effect.
+     */
     isOpen?: boolean;
     /** P2 — optional footer slot. Notification-center keeps null (no footer). */
     footer?: ReactNode;
 }
-export declare function PanelChrome({ children, onClose, isOpen, footer }: PanelChromeProps): import("react/jsx-runtime").JSX.Element;
+export declare function PanelChrome({ children, onClose, footer }: PanelChromeProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+export interface PanelMountProps {
+    /** Whether the panel is open. Maps to .has-panel class toggle. */
+    isOpen: boolean;
+    children: ReactNode;
+}
+export declare function PanelMount({ isOpen, children }: PanelMountProps): import("react/jsx-runtime").JSX.Element;

package/lib/composites/panels/hooks/useReducedMotionPanel.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Returns `true` when the user's system preference is `prefers-reduced-motion: reduce`.
+ * SSR-safe (returns false during server render).
+ * Reactive — re-renders the host component when the system pref changes.
+ */
+export declare function useReducedMotionPanel(): boolean;

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

@@ -17,6 +17,10 @@ export type { PanelHostProps, PanelShellProps } from './PanelHost';
 export type { PanelSlotProps } from './PanelSlot';
 export type { PanelProviderProps } from './PanelProvider';
 export type { PanelChromeProps } from './PanelChrome';
+export { positionKey } from './utils/positionKey';
+export { useReducedMotionPanel } from './hooks/useReducedMotionPanel';
+export { PanelMount } from './PanelMount';
+export type { PanelMountProps } from './PanelMount';
 export { usePanelCoordinator } from './hooks/usePanelCoordinator';
 export type { UsePanelCoordinatorReturn } from './hooks/usePanelCoordinator';
 export { reducer, initialState } from './coordinator/coordinator';

package/lib/composites/panels/utils/positionKey.d.ts

@@ -0,0 +1,2 @@
+import { TriggerContext } from '../coordinator/types';
+export declare function positionKey(trigger: TriggerContext | null): string | null;

package/package.json

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