@wisdomgarden/torque 0.2.1 → 0.2.3

package/dist/components/modal/modal.js

@@ -1,51 +1,198 @@
 "use client";
-import { jsxs as c, jsx as i } from "react/jsx-runtime";
-import { Modal as d } from "@mantine/core";
-import { clsx as s } from "clsx";
+import { jsx as r, jsxs as p } from "react/jsx-runtime";
+import { RemoveScroll as rt } from "@mantine/core";
+import { useMergedRef as nt, useIsomorphicEffect as at } from "@mantine/hooks";
+import { clsx as i } from "clsx";
+import { useId as ot, useRef as l, useEffect as f, useCallback as st } from "react";
 import "../../provider/ui-context.js";
-import "react";
-import { useLocale as f } from "../../provider/hooks.js";
-import { IconButton as p } from "../icon-button/icon-button.js";
-import { Text as h } from "../text/text.js";
-import a from "./modal.module.css.js";
-const n = (o, e) => o && typeof o == "object" ? o[e] : void 0, b = ({
-  children: o,
-  withCloseButton: e = !0,
-  title: r,
-  ...t
-}) => /* @__PURE__ */ c(d, { ...t, title: void 0, withCloseButton: !1, children: [
-  (r || e) && /* @__PURE__ */ i(
-    u,
-    {
-      title: r,
-      withCloseButton: e,
-      onClose: t.onClose,
-      classNames: t.classNames
-    }
-  ),
-  o
-] }), u = ({
-  title: o,
-  withCloseButton: e,
-  onClose: r,
-  classNames: t
+import { useLocale as ct } from "../../provider/hooks.js";
+import { Portal as it } from "../_inner/portal/portal.js";
+import { IconButton as lt } from "../icon-button/icon-button.js";
+import { OverlayParentProvider as dt } from "../overlay-layer/overlay-parent-context.js";
+import { useOverlayLayerInternal as ut } from "../overlay-layer/use-overlay-layer.js";
+import { useAnimatedMount as mt, getFocusableElements as M } from "../popover/hooks.js";
+import n from "./modal.module.css.js";
+const z = 200, ft = z + 100, xt = {
+  xs: "320px",
+  sm: "380px",
+  md: "440px",
+  lg: "620px",
+  xl: "780px"
+}, vt = {
+  xs: "var(--t-space-mini)",
+  sm: "var(--t-space-xs)",
+  md: "var(--t-space-lg)",
+  lg: "var(--t-space-xl)",
+  xl: "var(--t-space-xxl)"
+}, gt = {
+  xs: "2px",
+  sm: "var(--t-radius-xs)",
+  md: "var(--t-radius-sm)",
+  lg: "var(--t-radius-lg)",
+  xl: "var(--t-radius-lg)"
+}, ht = /^\d+(\.\d+)?$/, b = (t) => typeof t == "number" || ht.test(t) ? `${t}px` : t, E = (t, o) => typeof o == "string" && o in t ? t[o] : b(o), Lt = ({
+  opened: t,
+  onClose: o,
+  title: s,
+  children: D,
+  centered: U = !0,
+  size: I = "md",
+  classNames: d,
+  className: _,
+  zIndex: $,
+  padding: j = "xl",
+  radius: P = "lg",
+  withCloseButton: T = !0,
+  closeOnClickOutside: q = !1,
+  closeOnEscape: G = !0,
+  closeButtonProps: x,
+  onExitTransitionEnd: R,
+  transitionProps: N,
+  overlayProps: S,
+  onClick: H,
+  keepMounted: K = !1,
+  yOffset: X = "5dvh",
+  xOffset: Y = "5vw",
+  "aria-label": A
 }) => {
-  const l = f(), m = typeof o == "string" ? h : "div";
-  return /* @__PURE__ */ c("div", { className: s(a.header, n(t, "header")), children: [
-    /* @__PURE__ */ i(m, { className: s(a.title, n(t, "title")), children: o }),
-    e && /* @__PURE__ */ i(
-      p,
-      {
-        variant: "text",
-        color: "regular",
-        size: "lg",
-        iconName: "close",
-        onClick: () => r?.(),
-        "aria-label": l.close
+  const Z = ct(), C = ot(), c = l(null), { mounted: v, animState: O, handleTransitionEnd: w } = mt(
+    t,
+    K
+  ), g = ut({
+    opened: t,
+    zIndex: $,
+    close: () => o(),
+    closeOnEscape: G,
+    closeOnClickOutside: q,
+    name: "modal"
+  }), J = nt(c, g.ref), u = l(!1), h = l(t), L = l({
+    handleTransitionEnd: w,
+    onExitTransitionEnd: R,
+    onExited: N?.onExited
+  });
+  f(() => {
+    L.current = {
+      handleTransitionEnd: w,
+      onExitTransitionEnd: R,
+      onExited: N?.onExited
+    };
+  });
+  const y = st(() => {
+    if (!u.current) return;
+    u.current = !1;
+    const e = L.current;
+    e.onExitTransitionEnd?.(), e.onExited?.(), e.handleTransitionEnd();
+  }, []);
+  f(() => {
+    if (t) {
+      h.current = !0, u.current = !1;
+      return;
+    }
+    if (!h.current) return;
+    h.current = !1, u.current = !0;
+    const e = window.setTimeout(y, ft);
+    return () => window.clearTimeout(e);
+  }, [t, y]);
+  const Q = (e) => {
+    e.target === e.currentTarget && O === "closing" && y();
+  }, m = l(null);
+  at(() => {
+    t && !m.current && (m.current = document.activeElement);
+  }, [t]), f(() => {
+    if (!t || !v) return;
+    const e = c.current;
+    if (!e || e.contains(document.activeElement)) return;
+    (e.querySelector("[data-autofocus]") ?? M([e])[0] ?? e).focus();
+  }, [t, v]), f(() => {
+    if (t) return;
+    const e = m.current;
+    if (m.current = null, !e?.isConnected) return;
+    const a = document.activeElement;
+    (!a || a === document.body || c.current?.contains(a)) && e.focus();
+  }, [t]);
+  const k = (e) => /* @__PURE__ */ r(
+    "span",
+    {
+      tabIndex: 0,
+      "data-focus-sentinel": e,
+      "aria-hidden": "true",
+      className: n.sentinel,
+      onFocus: () => {
+        const a = M([c.current]);
+        ((e === "start" ? a[a.length - 1] : a[0]) ?? c.current)?.focus();
       }
-    )
-  ] });
+    }
+  );
+  if (!v) return null;
+  const F = s != null && s !== !1, V = F || T, W = S?.backgroundOpacity ?? S?.opacity ?? 0.6, B = typeof s == "string" ? "h2" : "div", tt = {
+    zIndex: g.zIndex,
+    "--modal-size": I === "auto" ? "auto" : E(xt, I),
+    "--modal-padding": E(vt, j),
+    "--modal-radius": E(gt, P),
+    "--modal-y-offset": b(X),
+    "--modal-x-offset": b(Y),
+    "--modal-overlay-opacity": W,
+    "--modal-duration": `${z}ms`
+  };
+  return /* @__PURE__ */ r(it, { children: /* @__PURE__ */ r(rt, { enabled: t, children: /* @__PURE__ */ p(
+    "div",
+    {
+      className: i(n.root, _),
+      style: tt,
+      "data-state": O,
+      "data-centered": U || void 0,
+      "aria-hidden": t ? void 0 : !0,
+      inert: t ? void 0 : !0,
+      children: [
+        /* @__PURE__ */ r("div", { className: n.overlay, "aria-hidden": "true" }),
+        /* @__PURE__ */ r("div", { className: n.inner, children: /* @__PURE__ */ p(
+          "div",
+          {
+            ref: J,
+            role: "dialog",
+            "aria-modal": "true",
+            "aria-label": A,
+            "aria-labelledby": !A && F ? C : void 0,
+            tabIndex: -1,
+            className: i(n.content, d?.content),
+            onClick: H,
+            onTransitionEnd: Q,
+            children: [
+              k("start"),
+              V && /* @__PURE__ */ p("div", { className: i(n.header, d?.header), children: [
+                /* @__PURE__ */ r(
+                  B,
+                  {
+                    id: C,
+                    className: i(n.title, d?.title),
+                    children: s
+                  }
+                ),
+                T && /* @__PURE__ */ r(
+                  lt,
+                  {
+                    variant: "text",
+                    color: "regular",
+                    size: "lg",
+                    iconName: "close",
+                    className: n.close,
+                    disabled: x?.disabled,
+                    "aria-label": x?.["aria-label"] ?? Z.close,
+                    onClick: (e) => {
+                      x?.onClick?.(e), o();
+                    }
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ r("div", { className: i(n.body, d?.body), children: /* @__PURE__ */ r(dt, { id: g.id, children: D }) }),
+              k("end")
+            ]
+          }
+        ) })
+      ]
+    }
+  ) }) });
 };
 export {
-  b as Modal
+  Lt as Modal
 };

package/dist/components/modal/modal.module.css.js

@@ -1,10 +1,24 @@
 "use client";
-const e = "_header_16ceg_2", t = "_title_16ceg_9", s = {
-  header: e,
-  title: t
+const e = "_root_pliga_3", t = "_overlay_pliga_12", n = "_inner_pliga_13", o = "_content_pliga_42", _ = "_header_pliga_67", l = "_title_pliga_81", s = "_close_pliga_92", i = "_body_pliga_97", a = "_sentinel_pliga_105", c = {
+  root: e,
+  overlay: t,
+  inner: n,
+  content: o,
+  header: _,
+  title: l,
+  close: s,
+  body: i,
+  sentinel: a
 };
 export {
-  s as default,
-  e as header,
-  t as title
+  i as body,
+  s as close,
+  o as content,
+  c as default,
+  _ as header,
+  n as inner,
+  t as overlay,
+  e as root,
+  a as sentinel,
+  l as title
 };

package/dist/components/modal/modal.types.d.ts

@@ -0,0 +1,96 @@
+import type React from 'react';
+export type ModalSizePreset = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type ModalSpacingPreset = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type ModalClassNames = Partial<Record<'header' | 'title' | 'body' | 'content', string>>;
+export interface ModalCloseButtonProps {
+    /** 覆盖关闭按钮默认的可访问名（默认取 locale 的「关闭」） */
+    'aria-label'?: string;
+    disabled?: boolean;
+    /** 点击关闭按钮时先调它，再调 `onClose` */
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+}
+export interface ModalOverlayProps {
+    /** 遮罩不透明度，与 `backgroundOpacity` 等价 */
+    opacity?: number;
+    /** 遮罩不透明度 */
+    backgroundOpacity?: number;
+}
+export interface ModalProps {
+    /** 是否打开（受控） */
+    opened: boolean;
+    /** 关闭回调：点关闭按钮、按 Escape、点遮罩（`closeOnClickOutside` 为 true 时）都会触发 */
+    onClose: () => void;
+    /** 标题。字符串会作为对话框的可访问名；传 `null` / 不传且 `withCloseButton={false}` 时不渲染头部 */
+    title?: React.ReactNode;
+    children?: React.ReactNode;
+    /**
+     * 是否垂直居中
+     * @default true
+     */
+    centered?: boolean;
+    /**
+     * 宽度：预设名、数字（px）、纯数字字符串（当 px，如 `"800"`）、`'auto'` 或带单位的 CSS 值（`'30rem'`、`'50%'`）
+     * @default 'md'
+     */
+    size?: ModalSizePreset | number | string;
+    /** 槽位类名：头部 / 标题 / 内容区 / 面板 */
+    classNames?: ModalClassNames;
+    /** 根节点类名 */
+    className?: string;
+    /** 显式层级。不传则由层级模块按打开顺序计算（普通层从 200 起） */
+    zIndex?: number;
+    /**
+     * 面板内边距（头部与内容区共用）：`'xl'` = 24px、`'lg'` = 20px，或数字（px）
+     * @default 'xl'
+     */
+    padding?: ModalSpacingPreset | number | string;
+    /**
+     * 面板圆角：预设名、数字（px）或 CSS 值（如 `'var(--t-radius-lg)'`）
+     * @default 'lg'
+     */
+    radius?: ModalSpacingPreset | number | string;
+    /**
+     * 是否显示右上角关闭按钮
+     * @default true
+     */
+    withCloseButton?: boolean;
+    /**
+     * 点遮罩是否关闭
+     * @default false
+     */
+    closeOnClickOutside?: boolean;
+    /**
+     * 本弹窗是参与关闭的最上层时，按 Escape 是否关闭
+     * @default true
+     */
+    closeOnEscape?: boolean;
+    /** 关闭按钮的少量属性 */
+    closeButtonProps?: ModalCloseButtonProps;
+    /** 关闭动画结束后调用（只认面板的过渡，恰好一次） */
+    onExitTransitionEnd?: () => void;
+    /** 兼容写法：`transitionProps.onExited` 等同 `onExitTransitionEnd` */
+    transitionProps?: {
+        onExited?: () => void;
+    };
+    /** 遮罩属性，只支持不透明度 */
+    overlayProps?: ModalOverlayProps;
+    /** 面板上的点击 */
+    onClick?: React.MouseEventHandler<HTMLDivElement>;
+    /**
+     * 关闭后保留 DOM（隐藏且不可交互，不占层级栈）
+     * @default false
+     */
+    keepMounted?: boolean;
+    /**
+     * 面板与视口上下边缘的最小距离：数字（px）或 CSS 值
+     * @default '5dvh'
+     */
+    yOffset?: number | string;
+    /**
+     * 面板与视口左右边缘的最小距离：数字（px）或 CSS 值
+     * @default '5vw'
+     */
+    xOffset?: number | string;
+    /** 对话框的可访问名；不传时用 `title` */
+    'aria-label'?: string;
+}

package/dist/components/modal-deprecated/index.d.ts

@@ -0,0 +1,2 @@
+export { ModalDeprecated } from './modal-deprecated';
+export type { ModalDeprecatedProps } from './modal-deprecated';

package/dist/components/modal-deprecated/index.js

@@ -0,0 +1,5 @@
+"use client";
+import { ModalDeprecated as r } from "./modal-deprecated.js";
+export {
+  r as ModalDeprecated
+};

package/dist/components/modal-deprecated/modal-deprecated.d.ts

@@ -0,0 +1,11 @@
+import { Modal as MModal } from '@mantine/core';
+/**
+ * @deprecated 用 `Modal`。只给暂时迁不了的调用点（`fullScreen` 等新 Modal 还没覆盖的能力）使用，迁完即删。
+ */
+export type ModalDeprecatedProps = Omit<Parameters<typeof MModal>[0], 'closeButtonProps'>;
+/**
+ * Pc端弹窗组件（Mantine 薄封装的旧实现）
+ *
+ * @deprecated 用 `Modal`。只给暂时迁不了的调用点（`fullScreen` 等新 Modal 还没覆盖的能力）使用，迁完即删。
+ */
+export declare const ModalDeprecated: ({ children, withCloseButton, title, ref, ...props }: ModalDeprecatedProps) => import("react").JSX.Element;

package/dist/components/modal-deprecated/modal-deprecated.js

@@ -0,0 +1,70 @@
+"use client";
+import { jsx as a, jsxs as m } from "react/jsx-runtime";
+import { Modal as p } from "@mantine/core";
+import { useMergedRef as u } from "@mantine/hooks";
+import { clsx as n } from "clsx";
+import "../../provider/ui-context.js";
+import "react";
+import { useLocale as g } from "../../provider/hooks.js";
+import { IconButton as v } from "../icon-button/icon-button.js";
+import { OverlayParentProvider as x } from "../overlay-layer/overlay-parent-context.js";
+import { useMantineOverlayLayer as h } from "../overlay-layer/use-mantine-overlay-layer.js";
+import { Text as y } from "../text/text.js";
+import c from "./modal-deprecated.module.css.js";
+const d = (e, o) => e && typeof e == "object" ? e[o] : void 0, P = ({
+  children: e,
+  withCloseButton: o = !0,
+  title: t,
+  ref: i,
+  ...r
+}) => {
+  const l = h("Modal", r, "modal-deprecated"), s = u(l.rootRef, i), f = t || o;
+  return /* @__PURE__ */ a(
+    p,
+    {
+      ...r,
+      ref: s,
+      zIndex: l.zIndex,
+      closeOnEscape: !1,
+      closeOnClickOutside: !1,
+      title: void 0,
+      withCloseButton: !1,
+      children: /* @__PURE__ */ m(x, { id: l.id, children: [
+        f && /* @__PURE__ */ a(
+          C,
+          {
+            title: t,
+            withCloseButton: o,
+            onClose: r.onClose,
+            classNames: r.classNames
+          }
+        ),
+        e
+      ] })
+    }
+  );
+}, C = ({
+  title: e,
+  withCloseButton: o,
+  onClose: t,
+  classNames: i
+}) => {
+  const r = g(), s = typeof e == "string" ? y : "div";
+  return /* @__PURE__ */ m("div", { className: n(c.header, d(i, "header")), children: [
+    /* @__PURE__ */ a(s, { className: n(c.title, d(i, "title")), children: e }),
+    o && /* @__PURE__ */ a(
+      v,
+      {
+        variant: "text",
+        color: "regular",
+        size: "lg",
+        iconName: "close",
+        onClick: () => t?.(),
+        "aria-label": r.close
+      }
+    )
+  ] });
+};
+export {
+  P as ModalDeprecated
+};

package/dist/components/modal-deprecated/modal-deprecated.module.css.js

@@ -0,0 +1,10 @@
+"use client";
+const e = "_header_16ceg_2", t = "_title_16ceg_9", s = {
+  header: e,
+  title: t
+};
+export {
+  s as default,
+  e as header,
+  t as title
+};

package/dist/components/notifications/index.d.ts

@@ -1,3 +1,5 @@
 export { notifications } from './notifications';
 export { Notification } from './notification';
+export { NotificationsContainer } from './notifications-container';
+export type { NotificationsContainerProps } from './notifications-container';
 export type { NotificationOption } from './notification.types';

package/dist/components/notifications/index.js

@@ -1,7 +1,9 @@
 "use client";
 import { notifications as t } from "./notifications.js";
-import { Notification as f } from "./notification.js";
+import { Notification as r } from "./notification.js";
+import { NotificationsContainer as f } from "./notifications-container.js";
 export {
-  f as Notification,
+  r as Notification,
+  f as NotificationsContainer,
   t as notifications
 };

package/dist/components/notifications/notifications-container.d.ts

@@ -0,0 +1,9 @@
+import { type NotificationsProps as MNotificationsProps } from '@mantine/notifications';
+export type NotificationsContainerProps = Omit<MNotificationsProps, 'zIndex'>;
+/**
+ * 通知与消息的渲染容器，应用根部挂一次即可。
+ *
+ * `notifications.showXxx()` 和 `messages.showXxx()` 都渲染在这里。层级固定为组件库保留的通知档
+ * （在引导层之下、其余所有浮层之上），不接受 `zIndex`，业务不需要也不能决定它。
+ */
+export declare function NotificationsContainer({ position, limit, ...props }: NotificationsContainerProps): import("react").JSX.Element;

package/dist/components/notifications/notifications-container.js

@@ -0,0 +1,22 @@
+"use client";
+import { jsx as r } from "react/jsx-runtime";
+import { Notifications as n } from "@mantine/notifications";
+import { OVERLAY_TIER_NOTIFICATION as e } from "../overlay-layer/constants.js";
+function I({
+  position: o = "top-right",
+  limit: t = 5,
+  ...i
+}) {
+  return /* @__PURE__ */ r(
+    n,
+    {
+      position: o,
+      limit: t,
+      ...i,
+      zIndex: e
+    }
+  );
+}
+export {
+  I as NotificationsContainer
+};

package/dist/components/overlay-layer/constants.d.ts

@@ -0,0 +1,14 @@
+/** 普通层的基准层级：所有普通浮层（弹窗、下拉、抽屉、提示）都从这里起算。 */
+export declare const OVERLAY_BASE = 200;
+/**
+ * 顶层档位的下限。小于它的层级都归普通层；10000 – 15999 按千位分档，
+ * 由业务在自己的档位表里声明（悬浮按钮、AI 侧边栏、引导层……）。
+ */
+export declare const OVERLAY_TOP_MIN = 10000;
+/**
+ * 组件库保留给通知 / 消息的一档，不对外导出：由 `NotificationsContainer` 直接用作显式层级，不进栈。
+ * 它不是最高档：引导层（15000）要盖住通知。
+ */
+export declare const OVERLAY_TIER_NOTIFICATION = 14000;
+/** 顶层档位的上限（不含），只用于开发环境校验 */
+export declare const OVERLAY_TOP_MAX = 16000;

package/dist/components/overlay-layer/constants.js

@@ -0,0 +1,8 @@
+"use client";
+const O = 200, A = 1e4, _ = 14e3, e = 16e3;
+export {
+  O as OVERLAY_BASE,
+  _ as OVERLAY_TIER_NOTIFICATION,
+  e as OVERLAY_TOP_MAX,
+  A as OVERLAY_TOP_MIN
+};

package/dist/components/overlay-layer/index.d.ts

@@ -0,0 +1,5 @@
+export { useOverlayLayer } from './use-overlay-layer';
+export { OverlayTierScope } from './overlay-tier-scope';
+export type { OverlayTierScopeProps } from './overlay-tier-scope';
+export { OVERLAY_BASE, OVERLAY_TOP_MIN } from './constants';
+export type { OverlayCloseReason, OverlayLayerOptions, OverlayLayerResult, } from './types';

package/dist/components/overlay-layer/index.js

@@ -0,0 +1,10 @@
+"use client";
+import { useOverlayLayer as o } from "./use-overlay-layer.js";
+import { OverlayTierScope as p } from "./overlay-tier-scope.js";
+import { OVERLAY_BASE as a, OVERLAY_TOP_MIN as f } from "./constants.js";
+export {
+  a as OVERLAY_BASE,
+  f as OVERLAY_TOP_MIN,
+  p as OverlayTierScope,
+  o as useOverlayLayer
+};

package/dist/components/overlay-layer/overlay-parent-context.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export declare function useOverlayAncestors(): readonly string[];
+export declare function OverlayParentProvider({ id, children, }: Readonly<{
+    id: string;
+    children?: React.ReactNode;
+}>): React.JSX.Element;

package/dist/components/overlay-layer/overlay-parent-context.js

@@ -0,0 +1,18 @@
+"use client";
+import { jsx as c } from "react/jsx-runtime";
+import { useContext as n, useMemo as u, createContext as a } from "react";
+const i = [], e = a(i);
+function m() {
+  return n(e);
+}
+function x({
+  id: t,
+  children: o
+}) {
+  const r = n(e), s = u(() => [...r, t], [r, t]);
+  return /* @__PURE__ */ c(e.Provider, { value: s, children: o });
+}
+export {
+  x as OverlayParentProvider,
+  m as useOverlayAncestors
+};

package/dist/components/overlay-layer/overlay-stack-debug.d.ts

@@ -0,0 +1,24 @@
+import type { OverlayStackDebugEntry } from './types';
+/** 面板根节点上的标记：层级模块的全局监听看到它就跳过，调试面板不参与 Escape / 点外面 */
+export declare const OVERLAY_DEBUG_ATTRIBUTE = "data-torque-overlay-debug";
+export declare const OVERLAY_DEBUG_GLOBAL = "torqueOverlayStack";
+interface DebugDeps {
+    subscribe: (listener: () => void) => () => void;
+    getSnapshot: () => readonly OverlayStackDebugEntry[];
+}
+export interface OverlayStackDebugApi {
+    /** 打开层级栈调试面板 */
+    open: () => void;
+    /** 关闭面板，停止订阅栈 */
+    close: () => void;
+}
+/**
+ * 开发环境的层级栈调试面板。原生 DOM 实现，不依赖宿主的 React 树。
+ *
+ * 只在打开期间订阅栈、生成快照；关闭后退订并移除节点，栈那边不再为它做任何事。
+ * 打开状态和位置记在 sessionStorage，刷新页面后保持。
+ */
+export declare function createOverlayStackDebug({ subscribe, getSnapshot, }: DebugDeps): OverlayStackDebugApi;
+/** 开发环境：把调试入口挂到 window 上；上次刷新前开着的话直接恢复 */
+export declare function installOverlayStackDebug(deps: DebugDeps): void;
+export {};