@mt-gloss/ui 0.1.80 → 0.1.82

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

@@ -1,48 +1,48 @@
 import { jsx as o, jsxs as m } from "react/jsx-runtime";
-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;
+import { d as p, B, ak as g, f } from "./UIContext-C7m-9sGv.js";
+import b, { useEffect as _ } from "react";
+const N = function(t) {
+  const { as: e, htmlFor: s, className: l, ...n } = t;
   return /* @__PURE__ */ o(
     p,
     {
       as: e || "label",
       htmlFor: s,
-      className: t ? `gloss-base-label ${t}` : "gloss-base-label",
+      className: l ? `gloss-base-label ${l}` : "gloss-base-label",
       ...n
     }
   );
 };
 N.displayName = "BaseLabel";
-const h = function(l) {
-  const { as: e, className: s, ...t } = l;
+const h = function(t) {
+  const { as: e, className: s, ...l } = t;
   return /* @__PURE__ */ o(
     p,
     {
       as: e || "span",
       "data-role": "value",
       className: s ? `gloss-base-value ${s}` : "gloss-base-value",
-      ...t
+      ...l
     }
   );
 };
 h.displayName = "BaseValue";
 function v({
   definition: a,
-  open: l,
+  open: t,
   onDismiss: e,
   className: s,
-  style: t,
+  style: l,
   children: n
 }) {
   const c = a?.position ?? "top-right", r = a?.duration ?? 0;
-  f(() => {
-    if (!l || r <= 0 || !e) return;
+  _(() => {
+    if (!t || r <= 0 || !e) return;
     const y = setTimeout(() => {
       e();
     }, r);
     return () => clearTimeout(y);
-  }, [l, r, e]);
+  }, [t, r, e]);
   const i = {
     portal: !0,
     dismissOnClickOutside: !1,
@@ -57,13 +57,13 @@ function v({
     B,
     {
       definition: i,
-      open: l,
+      open: t,
       onDismiss: e,
       children: /* @__PURE__ */ o(
         "div",
         {
           className: u.join(" "),
-          style: t,
+          style: l,
           role: "status",
           "aria-live": "polite",
           children: n
@@ -82,11 +82,11 @@ const A = {
   iconColor: "--_icon-color"
 };
 function C(a) {
-  const { definition: l, className: e, style: s, role: t, children: n, ...c } = a, { style: r, dataAttrs: i } = g(l, A);
+  const { definition: t, className: e, style: s, role: l, children: n, ...c } = a, { style: r, dataAttrs: i } = g(t, A);
   return /* @__PURE__ */ o(
     "div",
     {
-      role: t || "alert",
+      role: l || "alert",
       className: e ? `gloss-base-alert ${e}` : "gloss-base-alert",
       style: { ...r, ...s },
       ...i,
@@ -102,8 +102,8 @@ const S = {
   fontSize: "--_font-size"
 };
 function $(a) {
-  const { definition: l, separator: e = "/", className: s, style: t, children: n } = a, { style: c } = g(
-    l,
+  const { definition: t, separator: e = "/", className: s, style: l, children: n } = a, { style: c } = g(
+    t,
     S
   ), r = b.Children.toArray(n);
   return /* @__PURE__ */ o(
@@ -111,7 +111,7 @@ function $(a) {
     {
       "aria-label": "Breadcrumb",
       className: s ? `gloss-base-breadcrumbs-nav ${s}` : "gloss-base-breadcrumbs-nav",
-      style: { ...c, ...t },
+      style: { ...c, ...l },
       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: [
@@ -132,10 +132,10 @@ function $(a) {
 $.displayName = "BaseBreadcrumbs";
 function T(a) {
   const {
-    as: l,
+    as: t,
     definition: e,
     loading: s = !1,
-    disabled: t = !1,
+    disabled: l = !1,
     className: n,
     style: c,
     children: r,
@@ -145,11 +145,11 @@ function T(a) {
     n
   ].filter(Boolean).join(" ");
   return /* @__PURE__ */ m(
-    _,
+    f,
     {
-      as: l,
+      as: t,
       definition: e,
-      disabled: t || s,
+      disabled: l || s,
       loading: s,
       className: d,
       style: c,

package/COMMITS-BcbOliuF.js

@@ -0,0 +1,223 @@
+import { jsx as a, jsxs as u, Fragment as P } from "react/jsx-runtime";
+import { createContext as h, useContext as p, useReducer as g, useRef as i, useEffect as r, useMemo as f, useCallback as v, useLayoutEffect as C } from "react";
+const c = h(null);
+function m() {
+  const e = p(c);
+  if (!e)
+    throw new Error(
+      "[panels] usePanelContext must be used inside <PanelProvider>. See @mt-gloss/ui/composites/panels."
+    );
+  return e;
+}
+function O() {
+  return p(c);
+}
+const S = {
+  activePanelId: null,
+  lastClose: null,
+  pendingSideEffects: []
+};
+function _(e, n) {
+  switch (n.type) {
+    case "OPEN_PANEL":
+      return n.panelId === "notification-center" && e.activePanelId === null ? {
+        activePanelId: "notification-center",
+        lastClose: null,
+        // reset lastClose on fresh open
+        pendingSideEffects: e.pendingSideEffects
+        // preserve any draining queue
+      } : n.panelId === "notification-center" && e.activePanelId === "notification-center" ? e : {
+        ...e,
+        pendingSideEffects: [
+          ...e.pendingSideEffects,
+          {
+            type: "INVALID_DISPATCH",
+            reason: `panel-not-supported-in-P1:${n.panelId}`
+          }
+        ]
+      };
+    case "CLOSE_PANEL":
+      return e.activePanelId === null ? e : {
+        activePanelId: null,
+        lastClose: { panelId: e.activePanelId, reason: n.reason },
+        pendingSideEffects: e.pendingSideEffects
+      };
+    case "DRAIN_SIDE_EFFECTS":
+      return e.pendingSideEffects.length === 0 ? e : {
+        ...e,
+        pendingSideEffects: []
+      };
+    default:
+      return e;
+  }
+}
+function y(e) {
+  return e.activePanelId === "notification-center" ? "notif-center" : (e.activePanelId != null, "idle");
+}
+function x() {
+  const [e, n] = g(_, S), t = i([]);
+  i(null), r(() => {
+    if (e.pendingSideEffects.length !== 0) {
+      for (const o of e.pendingSideEffects)
+        o.type === "SCHEDULE_TIMER" ? window.setTimeout(() => n(o.action), Math.max(0, o.ms)) : o.type === "INVALID_DISPATCH" && process.env.NODE_ENV !== "production" && console.warn("[panels] INVALID_DISPATCH:", o.reason);
+      n({ type: "DRAIN_SIDE_EFFECTS" });
+    }
+  }, [e.pendingSideEffects]), r(() => {
+    if (!e.lastClose) return;
+    const o = {
+      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),
+      o
+    ];
+  }, [e.lastClose]);
+  const l = f(
+    () => y(e),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [e.activePanelId]
+  ), s = v(() => t.current.slice(), []);
+  return { state: e, surfaceState: l, dispatch: n, getCloseLog: s };
+}
+function k({ children: e }) {
+  const n = x(), t = f(
+    () => 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(c.Provider, { value: t, children: e });
+}
+const N = {
+  position: "absolute",
+  top: "100%",
+  left: 0,
+  right: 0,
+  zIndex: 2,
+  pointerEvents: "auto"
+};
+function L({ children: e, onClose: n, isOpen: t = !0 }) {
+  return /* @__PURE__ */ u(
+    "div",
+    {
+      "data-chrome": "panel",
+      "data-open": t ? "true" : "false",
+      role: "dialog",
+      "aria-modal": "true",
+      className: "gloss-panel-chrome",
+      style: N,
+      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 })
+      ]
+    }
+  );
+}
+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
+}, w = {
+  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 H({ panelComponents: e }) {
+  const { state: n, dispatch: t, getCloseLog: l } = m(), s = n.activePanelId ? e[n.activePanelId] : null;
+  n.activePanelId && !s && process.env.NODE_ENV !== "production" && console.error(
+    "[panels] No panel component registered for activePanelId:",
+    n.activePanelId
+  ), r(() => {
+    if (n.activePanelId == null) return;
+    function d(I) {
+      I.key === "Escape" && t({ type: "CLOSE_PANEL", reason: "escape-key" });
+    }
+    return document.addEventListener("keydown", d), () => {
+      document.removeEventListener("keydown", d);
+    };
+  }, [n.activePanelId, t]);
+  const o = i(n);
+  C(() => {
+    o.current = n;
+  }), r(() => {
+    if (process.env.NODE_ENV !== "production")
+      return window.__panelsHostHandle = {
+        dispatch: t,
+        getState: () => o.current,
+        getCloseLog: l
+      }, () => {
+        delete window.__panelsHostHandle;
+      };
+  }, [t, l]);
+  const E = v(() => {
+    t({ type: "CLOSE_PANEL", reason: "nav-escape-hatch" });
+  }, [t]);
+  return /* @__PURE__ */ a("div", { "data-panel-host": "true", style: b, children: n.activePanelId != null && s != null && /* @__PURE__ */ u(P, { children: [
+    /* @__PURE__ */ a(
+      "div",
+      {
+        "data-panel-scrim": "true",
+        style: w,
+        onClick: E
+      }
+    ),
+    /* @__PURE__ */ a(
+      L,
+      {
+        isOpen: !0,
+        onClose: () => t({ type: "CLOSE_PANEL", reason: "header-x" }),
+        children: /* @__PURE__ */ a(s, { isOpen: !0 })
+      }
+    )
+  ] }) });
+}
+const R = {
+  "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 {
+  R as C,
+  k as P,
+  O as a,
+  H as b,
+  L as c,
+  x as d,
+  y as e,
+  S as i,
+  _ as r,
+  m as u
+};