@greypan/web-ui 11.2.0 → 12.0.0

package/dist/shared/overlay/anchored-panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"anchored-panel.js","names":[],"sources":["../../../src/shared/overlay/anchored-panel.ts"],"sourcesContent":["import { definePlugin } from '@greypan/js-kit'\n\nimport type { OpenOverlay, OpenOverlayHandle, OverlayArbitration } from './open-overlay'\nimport { defineOverlay, type OverlayApi, type OverlayOptions } from './overlay'\nimport type { OverlayPortal } from './portal'\nimport { hideOverlayPresence, showOverlayPresence } from './presence'\n\nexport interface AnchoredPanelOptions {\n  getAnchor(): HTMLElement | null\n  getLocalPanel(): HTMLElement | null\n  getPositioning(): OverlayOptions\n  isPortal(): boolean\n  createPortal(): OverlayPortal\n  /**\n   * 承载「本 panel 是一次开启态 overlay」的实例：登记与 Escape 归属由它完成，本模块不再\n   * 自己维护逻辑父子关系。\n   *\n   * 必须是**调用方持有的那个实例**（而不是这里新建一个）——调用方同时要用它的帧\n   * 事务入口，两个实例会让「我开着吗」重新分裂。\n   */\n  openOverlay: OpenOverlay\n  /** 本 panel 与 Escape 仲裁的关系。tooltip 传 `none`；缺省 `escape`。 */\n  arbitration?: OverlayArbitration\n}\n\n/**\n * 管理锚定 panel 的本地/Portal 容器、定位器和可中断 presence。\n * 内容迁移与交互语义由各组件保留，避免把不同组件的 public contract 混入此模块。\n */\nexport interface AnchoredPanelApi {\n  getPanel(): HTMLElement | null\n  /**\n   * 当前在场会话的 handle；没有任何在场会话时为 `null`。\n   * 查询（`contains` / `containsEvent` / `hasFocusWithin`）与 `setInert` 都走它，\n   * 调用方因此不必持有 panel 引用，也不知道存在全局注册表。\n   * 退场等待期间仍是同一个 handle（暂缓仲裁），动画播完或重新 `open()` 才换人。\n   */\n  getHandle(): OpenOverlayHandle | null\n  open(isInstant?: boolean): void\n  close(isStillOpen: () => boolean): Promise<boolean>\n  updatePosition(): void\n  reconfigure(isOpen: boolean): void\n  dispose(): void\n}\n\nexport const defineAnchoredPanel = () =>\n  definePlugin<AnchoredPanelApi, AnchoredPanelOptions>(ctx => {\n    let overlay: OverlayApi | undefined\n    let portal: OverlayPortal | undefined\n    let handle: OpenOverlayHandle | null = null\n\n    const getPanel = () => portal?.panel ?? ctx.getLocalPanel()\n\n    const releaseHandle = () => {\n      handle?.release()\n      handle = null\n    }\n\n    const disposePortal = () => {\n      if (!portal) return\n      portal.restoreContent()\n      portal.remove()\n      portal = undefined\n      overlay = undefined\n    }\n\n    const getOrCreatePanel = (): HTMLElement | null => {\n      if (!ctx.isPortal()) return ctx.getLocalPanel()\n      portal ??= ctx.createPortal()\n      return portal.panel\n    }\n\n    const ensureOverlay = (anchor: HTMLElement, panel: HTMLElement) => {\n      if (overlay) {\n        overlay.updateAnchor(anchor)\n        overlay.update(ctx.getPositioning())\n        return\n      }\n      overlay = defineOverlay().make({ anchor, overlay: panel, ...ctx.getPositioning() })\n    }\n\n    const open = (isInstant = false) => {\n      const anchor = ctx.getAnchor()\n      if (!anchor) return\n      const panel = getOrCreatePanel()\n      if (!panel) return\n      // portal panel 与宿主物理分离；本地 panel 也可能隔着 shadow 边界。\n      // 以 anchor 祖先链寻找最近的已开启 overlay，建立统一逻辑父子关系。\n      // claim ⟺ open：重复 open 视为新的一次开启，旧会话整体作废。\n      releaseHandle()\n      handle = ctx.openOverlay.claim(panel, { arbitration: ctx.arbitration, ancestryFrom: anchor })\n      ensureOverlay(anchor, panel)\n      overlay?.open()\n      showOverlayPresence(panel, { isInstant })\n    }\n\n    const dispose = () => {\n      overlay?.dispose()\n      overlay = undefined\n      releaseHandle()\n      disposePortal()\n    }\n\n    return {\n      getPanel() {\n        return getPanel()\n      },\n\n      getHandle() {\n        return handle\n      },\n\n      open,\n\n      async close(isStillOpen) {\n        /*\n         * 第三态「可见但暂缓仲裁」：退场等待期间 panel 仍在场，登记不撤，但不再走关闭\n         * 入口——它已经在关的路上了。撤销推迟到动画结束，或被 `open()` 以新会话取代。\n         *\n         * 旧实现在这里立即 `releaseHandle()`，于是两条提前返回的路径都把还看得见的 panel\n         * 留在未登记状态：未登记即不参与「谁是最内层」的仲裁，直到下一次 `open()` 才\n         * 恢复（issue #138）。\n         *\n         * 暂缓层只是兜底候选：仍在开启的外层永远优先。否则「内层关掉后立刻再按一次\n         * Escape」会被退场动画吞掉，外层永远等不到自己那一次——issue #120 的契约。\n         *\n         * 退场被打断时 `showOverlayPresence` 已把 panel 带回场，`open()` 同时重新 claim\n         * （与「重复 open 视为新的一次开启」同一条路径），本条 `close()` 随后的\n         * `return false` 不碰那个新 handle。\n         *\n         * 走到 `isStillOpen()` 时退场已经播完：panel 已 `hidden`。此刻宿主仍认为开着，\n         * 是 panel 状态与宿主状态不一致的那一格——把层交还仲裁而不是继续暂缓。继续暂缓的\n         * 前提是「panel 可见」，而这里 panel 已经看不见了：一个隐藏的 panel 无限吞掉 Escape，\n         * 用户再也没有按键路径把这个状态收敛掉（按一次 Escape 走宿主的关闭入口，宿主\n         * 回写 open=false 后由随后的 close() 正常收尾）。登记仍然不撤，「宿主认为开着\n         * 就不掉出仲裁」的 #138 语义不变。\n         */\n        handle?.deferArbitration()\n        overlay?.close()\n        const panel = getPanel()\n        if (panel && !(await hideOverlayPresence(panel))) return false\n        if (isStillOpen()) {\n          handle?.deferArbitration(false)\n          return false\n        }\n        releaseHandle()\n        disposePortal()\n        return true\n      },\n\n      updatePosition() {\n        overlay?.update(ctx.getPositioning())\n      },\n\n      reconfigure(isOpen) {\n        const shouldAnimate = getPanel()?.dataset.wuiPresence === 'entering'\n        dispose()\n        if (isOpen) open(!shouldAnimate)\n      },\n\n      dispose\n    }\n  })\n"],"mappings":";;;;AA6CA,IAAa,UACX,GAAqD,MAAO;CAC1D,IAAI,GACA,GACA,IAAmC,MAEjC,UAAiB,GAAQ,SAAS,EAAI,cAAc,GAEpD,UAAsB;EAE1B,AADA,GAAQ,QAAQ,GAChB,IAAS;CACX,GAEM,UAAsB;EACrB,MACL,EAAO,eAAe,GACtB,EAAO,OAAO,GACd,IAAS,KAAA,GACT,IAAU,KAAA;CACZ,GAEM,UACC,EAAI,SAAS,KAClB,MAAW,EAAI,aAAa,GACrB,EAAO,SAFc,EAAI,cAAc,GAK1C,KAAiB,GAAqB,MAAuB;EACjE,IAAI,GAAS;GAEX,AADA,EAAQ,aAAa,CAAM,GAC3B,EAAQ,OAAO,EAAI,eAAe,CAAC;GACnC;EACF;EACA,IAAU,EAAc,CAAC,CAAC,KAAK;GAAE;GAAQ,SAAS;GAAO,GAAG,EAAI,eAAe;EAAE,CAAC;CACpF,GAEM,KAAQ,IAAY,OAAU;EAClC,IAAM,IAAS,EAAI,UAAU;EAC7B,IAAI,CAAC,GAAQ;EACb,IAAM,IAAQ,EAAiB;EAC1B,MAIL,EAAc,GACd,IAAS,EAAI,YAAY,MAAM,GAAO;GAAE,aAAa,EAAI;GAAa,cAAc;EAAO,CAAC,GAC5F,EAAc,GAAQ,CAAK,GAC3B,GAAS,KAAK,GACd,EAAoB,GAAO,EAAE,aAAU,CAAC;CAC1C,GAEM,UAAgB;EAIpB,AAHA,GAAS,QAAQ,GACjB,IAAU,KAAA,GACV,EAAc,GACd,EAAc;CAChB;CAEA,OAAO;EACL,WAAW;GACT,OAAO,EAAS;EAClB;EAEA,YAAY;GACV,OAAO;EACT;EAEA;EAEA,MAAM,MAAM,GAAa;GAwBvB,AADA,GAAQ,iBAAiB,GACzB,GAAS,MAAM;GACf,IAAM,IAAQ,EAAS;GAQvB,OAPI,KAAS,CAAE,MAAM,EAAoB,CAAK,IAAW,KACrD,EAAY,KACd,GAAQ,iBAAiB,EAAK,GACvB,OAET,EAAc,GACd,EAAc,GACP;EACT;EAEA,iBAAiB;GACf,GAAS,OAAO,EAAI,eAAe,CAAC;EACtC;EAEA,YAAY,GAAQ;GAClB,IAAM,IAAgB,EAAS,CAAC,EAAE,QAAQ,gBAAgB;GAE1D,AADA,EAAQ,GACJ,KAAQ,EAAK,CAAC,CAAa;EACjC;EAEA;CACF;AACF,CAAC"}
+{"version":3,"file":"anchored-panel.js","names":[],"sources":["../../../src/shared/overlay/anchored-panel.ts"],"sourcesContent":["import { definePlugin } from '@greypan/js-kit'\n\nimport type { OpenOverlay, OpenOverlayHandle, OverlayArbitration } from './open-overlay'\nimport { defineOverlay, type OverlayApi, type OverlayOptions } from './overlay'\nimport type { OverlayPortal } from './portal'\nimport { hideOverlayPresence, showOverlayPresence } from './presence'\n\nexport interface AnchoredPanelOptions {\n  getAnchor(): HTMLElement | null\n  getLocalPanel(): HTMLElement | null\n  getPositioning(): OverlayOptions\n  isPortal(): boolean\n  createPortal(): OverlayPortal\n  /**\n   * 承载「本 panel 是一次开启态 overlay」的实例：登记与 Escape 归属由它完成，本模块不\n   * 自己维护逻辑父子关系。\n   *\n   * 必须是**调用方持有的那个实例**（而不是这里新建一个）——调用方同时要用它的帧\n   * 事务入口，两个实例会让「我开着吗」重新分裂。\n   */\n  openOverlay: OpenOverlay\n  /** 本 panel 与 Escape 仲裁的关系。tooltip 传 `none`；缺省 `escape`。 */\n  arbitration?: OverlayArbitration\n}\n\n/**\n * 管理锚定 panel 的本地/Portal 容器、定位器和可中断 presence。\n * 内容迁移与交互语义由各组件保留，避免把不同组件的 public contract 混入此模块。\n */\nexport interface AnchoredPanelApi {\n  getPanel(): HTMLElement | null\n  /**\n   * 当前在场会话的 handle；没有任何在场会话时为 `null`。\n   * 查询（`contains` / `containsEvent` / `hasFocusWithin`）与 `setInert` 都走它，\n   * 调用方因此不必持有 panel 引用，也不知道存在全局注册表。\n   * 退场等待期间仍是同一个 handle（暂缓仲裁），动画播完或重新 `open()` 才换人。\n   */\n  getHandle(): OpenOverlayHandle | null\n  open(isInstant?: boolean): void\n  close(isStillOpen: () => boolean): Promise<boolean>\n  updatePosition(): void\n  reconfigure(isOpen: boolean): void\n  dispose(): void\n}\n\nexport const defineAnchoredPanel = () =>\n  definePlugin<AnchoredPanelApi, AnchoredPanelOptions>(ctx => {\n    let overlay: OverlayApi | undefined\n    let portal: OverlayPortal | undefined\n    let handle: OpenOverlayHandle | null = null\n\n    const getPanel = () => portal?.panel ?? ctx.getLocalPanel()\n\n    const releaseHandle = () => {\n      handle?.release()\n      handle = null\n    }\n\n    const disposePortal = () => {\n      if (!portal) return\n      portal.restoreContent()\n      portal.remove()\n      portal = undefined\n      overlay = undefined\n    }\n\n    const getOrCreatePanel = (): HTMLElement | null => {\n      if (!ctx.isPortal()) return ctx.getLocalPanel()\n      portal ??= ctx.createPortal()\n      return portal.panel\n    }\n\n    const ensureOverlay = (anchor: HTMLElement, panel: HTMLElement) => {\n      if (overlay) {\n        overlay.updateAnchor(anchor)\n        overlay.update(ctx.getPositioning())\n        return\n      }\n      overlay = defineOverlay().make({ anchor, overlay: panel, ...ctx.getPositioning() })\n    }\n\n    const open = (isInstant = false) => {\n      const anchor = ctx.getAnchor()\n      if (!anchor) return\n      const panel = getOrCreatePanel()\n      if (!panel) return\n      // portal panel 与宿主物理分离；本地 panel 也可能隔着 shadow 边界。\n      // 以 anchor 祖先链寻找最近的已开启 overlay，建立统一逻辑父子关系。\n      // claim ⟺ open：重复 open 视为新的一次开启，旧会话整体作废。\n      releaseHandle()\n      handle = ctx.openOverlay.claim(panel, { arbitration: ctx.arbitration, ancestryFrom: anchor })\n      ensureOverlay(anchor, panel)\n      overlay?.open()\n      showOverlayPresence(panel, { isInstant })\n    }\n\n    const dispose = () => {\n      overlay?.dispose()\n      overlay = undefined\n      releaseHandle()\n      disposePortal()\n    }\n\n    return {\n      getPanel() {\n        return getPanel()\n      },\n\n      getHandle() {\n        return handle\n      },\n\n      open,\n\n      async close(isStillOpen) {\n        /*\n         * 第三态「可见但暂缓仲裁」：退场等待期间 panel 仍在场，登记不撤，但不再走关闭\n         * 入口——它已经在关的路上了。撤销推迟到动画结束，或被 `open()` 以新会话取代。\n         *\n         * 若在这里立即 `releaseHandle()`，两条提前返回的路径都会把还看得见的 panel\n         * 留在未登记状态：未登记即不参与「谁是最内层」的仲裁，直到下一次 `open()` 才\n         * 恢复（issue #138）。\n         *\n         * 暂缓层只是兜底候选：仍在开启的外层永远优先。否则「内层关掉后立刻再按一次\n         * Escape」会被退场动画吞掉，外层永远等不到自己那一次——issue #120 的契约。\n         *\n         * 退场被打断时 `showOverlayPresence` 已把 panel 带回场，`open()` 同时重新 claim\n         * （与「重复 open 视为新的一次开启」同一条路径），本条 `close()` 随后的\n         * `return false` 不碰那个新 handle。\n         *\n         * 走到 `isStillOpen()` 时退场已经播完：panel 已 `hidden`。此刻宿主仍认为开着，\n         * 是 panel 状态与宿主状态不一致的那一格——把层交还仲裁而不是继续暂缓。继续暂缓的\n         * 前提是「panel 可见」，而这里 panel 已经看不见了：一个隐藏的 panel 无限吞掉 Escape，\n         * 用户再也没有按键路径把这个状态收敛掉（按一次 Escape 走宿主的关闭入口，宿主\n         * 回写 open=false 后由随后的 close() 正常收尾）。登记仍然不撤，「宿主认为开着\n         * 就不掉出仲裁」的 #138 语义不变。\n         */\n        handle?.deferArbitration()\n        overlay?.close()\n        const panel = getPanel()\n        if (panel && !(await hideOverlayPresence(panel))) return false\n        if (isStillOpen()) {\n          handle?.deferArbitration(false)\n          return false\n        }\n        releaseHandle()\n        disposePortal()\n        return true\n      },\n\n      updatePosition() {\n        overlay?.update(ctx.getPositioning())\n      },\n\n      reconfigure(isOpen) {\n        const shouldAnimate = getPanel()?.dataset.wuiPresence === 'entering'\n        dispose()\n        if (isOpen) open(!shouldAnimate)\n      },\n\n      dispose\n    }\n  })\n"],"mappings":";;;;AA6CA,MAAa,4BACX,cAAqD,QAAO;CAC1D,IAAI;CACJ,IAAI;CACJ,IAAI,SAAmC;CAEvC,MAAM,iBAAiB,QAAQ,SAAS,IAAI,cAAc;CAE1D,MAAM,sBAAsB;EAC1B,QAAQ,QAAQ;EAChB,SAAS;CACX;CAEA,MAAM,sBAAsB;EAC1B,IAAI,CAAC,QAAQ;EACb,OAAO,eAAe;EACtB,OAAO,OAAO;EACd,SAAS,KAAA;EACT,UAAU,KAAA;CACZ;CAEA,MAAM,yBAA6C;EACjD,IAAI,CAAC,IAAI,SAAS,GAAG,OAAO,IAAI,cAAc;EAC9C,WAAW,IAAI,aAAa;EAC5B,OAAO,OAAO;CAChB;CAEA,MAAM,iBAAiB,QAAqB,UAAuB;EACjE,IAAI,SAAS;GACX,QAAQ,aAAa,MAAM;GAC3B,QAAQ,OAAO,IAAI,eAAe,CAAC;GACnC;EACF;EACA,UAAU,cAAc,CAAC,CAAC,KAAK;GAAE;GAAQ,SAAS;GAAO,GAAG,IAAI,eAAe;EAAE,CAAC;CACpF;CAEA,MAAM,QAAQ,YAAY,UAAU;EAClC,MAAM,SAAS,IAAI,UAAU;EAC7B,IAAI,CAAC,QAAQ;EACb,MAAM,QAAQ,iBAAiB;EAC/B,IAAI,CAAC,OAAO;EAIZ,cAAc;EACd,SAAS,IAAI,YAAY,MAAM,OAAO;GAAE,aAAa,IAAI;GAAa,cAAc;EAAO,CAAC;EAC5F,cAAc,QAAQ,KAAK;EAC3B,SAAS,KAAK;EACd,oBAAoB,OAAO,EAAE,UAAU,CAAC;CAC1C;CAEA,MAAM,gBAAgB;EACpB,SAAS,QAAQ;EACjB,UAAU,KAAA;EACV,cAAc;EACd,cAAc;CAChB;CAEA,OAAO;EACL,WAAW;GACT,OAAO,SAAS;EAClB;EAEA,YAAY;GACV,OAAO;EACT;EAEA;EAEA,MAAM,MAAM,aAAa;GAuBvB,QAAQ,iBAAiB;GACzB,SAAS,MAAM;GACf,MAAM,QAAQ,SAAS;GACvB,IAAI,SAAS,CAAE,MAAM,oBAAoB,KAAK,GAAI,OAAO;GACzD,IAAI,YAAY,GAAG;IACjB,QAAQ,iBAAiB,KAAK;IAC9B,OAAO;GACT;GACA,cAAc;GACd,cAAc;GACd,OAAO;EACT;EAEA,iBAAiB;GACf,SAAS,OAAO,IAAI,eAAe,CAAC;EACtC;EAEA,YAAY,QAAQ;GAClB,MAAM,gBAAgB,SAAS,CAAC,EAAE,QAAQ,gBAAgB;GAC1D,QAAQ;GACR,IAAI,QAAQ,KAAK,CAAC,aAAa;EACjC;EAEA;CACF;AACF,CAAC"}

package/dist/shared/overlay/native-dialog-presence.js

@@ -1,78 +1,142 @@
-import { getTransitionDuration as e } from "./presence.js";
-import { definePlugin as t } from "@greypan/js-kit";
-//#region src/shared/overlay/native-dialog-presence.ts
-var n = () => t((t) => {
-	let n, r, i = !1, a = !1, o = () => {
-		n !== void 0 && (clearTimeout(n), n = void 0);
-	}, s = () => {
-		r !== void 0 && (cancelAnimationFrame(r), r = void 0);
-	}, c = () => {
-		let e = t.getDialog();
-		e && i && !t.isOpen() && (o(), i = !1, e.classList.remove("is-closing", "is-visible"), e.open && (a = !0, e.close?.()));
-	}, l = () => {
-		let e = t.getDialog();
-		if (e) {
-			if (i = !1, o(), e.classList.remove("is-closing"), !e.open) try {
-				e.showModal?.();
-			} catch {}
-			e.offsetWidth, s(), r = requestAnimationFrame(() => {
-				r = void 0, t.isConnected() && t.isOpen() && e.open && e.classList.add("is-visible");
-			});
+import { getTransitionDuration } from "./presence.js";
+import { definePlugin } from "@greypan/js-kit";
+// src/shared/overlay/native-dialog-presence.ts
+const defineNativeDialogPresence = () => definePlugin((ctx) => {
+	let closeFallbackTimer;
+	let openFrame;
+	let isClosing = false;
+	let selfClosePending = false;
+	const clearCloseFallback = () => {
+		if (closeFallbackTimer === void 0) return;
+		clearTimeout(closeFallbackTimer);
+		closeFallbackTimer = void 0;
+	};
+	const cancelOpenFrame = () => {
+		if (openFrame === void 0) return;
+		cancelAnimationFrame(openFrame);
+		openFrame = void 0;
+	};
+	const finishClosing = () => {
+		const dialog = ctx.getDialog();
+		if (!dialog || !isClosing || ctx.isOpen()) return;
+		clearCloseFallback();
+		isClosing = false;
+		dialog.classList.remove("is-closing", "is-visible");
+		if (dialog.open) {
+			selfClosePending = true;
+			dialog.close?.();
 		}
-	}, u = (t) => {
-		t.offsetWidth, t.classList.add("is-closing"), t.classList.remove("is-visible"), o(), n = setTimeout(() => c(), e(t) + 80);
-	}, d = () => {
-		let e = t.getDialog();
-		if (!e?.open) return;
-		let n = r !== void 0;
-		if (s(), i = !0, e.classList.contains("is-visible")) {
-			u(e);
+	};
+	const startOpening = () => {
+		const dialog = ctx.getDialog();
+		if (!dialog) return;
+		isClosing = false;
+		clearCloseFallback();
+		dialog.classList.remove("is-closing");
+		if (!dialog.open) try {
+			dialog.showModal?.();
+		} catch {}
+		dialog.offsetWidth;
+		cancelOpenFrame();
+		openFrame = requestAnimationFrame(() => {
+			openFrame = void 0;
+			if (!ctx.isConnected() || !ctx.isOpen() || !dialog.open) return;
+			dialog.classList.add("is-visible");
+		});
+	};
+	const startClosingTransition = (dialog) => {
+		dialog.offsetWidth;
+		dialog.classList.add("is-closing");
+		dialog.classList.remove("is-visible");
+		clearCloseFallback();
+		closeFallbackTimer = setTimeout(() => finishClosing(), getTransitionDuration(dialog) + 80);
+	};
+	const startClosing = () => {
+		const dialog = ctx.getDialog();
+		if (!dialog?.open) return;
+		const hasPendingOpenFrame = openFrame !== void 0;
+		cancelOpenFrame();
+		isClosing = true;
+		if (dialog.classList.contains("is-visible")) {
+			startClosingTransition(dialog);
 			return;
 		}
-		if (!n) {
-			c();
+		if (!hasPendingOpenFrame) {
+			finishClosing();
 			return;
 		}
-		r = requestAnimationFrame(() => {
-			if (r = void 0, !i || t.isOpen() || !e.open) return;
-			let n = e.style.getPropertyValue("transition"), a = e.style.getPropertyPriority("transition");
-			e.style.setProperty("transition", "none", "important"), e.classList.add("is-visible"), e.offsetWidth, n ? e.style.setProperty("transition", n, a) : e.style.removeProperty("transition"), r = requestAnimationFrame(() => {
-				r = void 0, i && !t.isOpen() && e.open && u(e);
+		openFrame = requestAnimationFrame(() => {
+			openFrame = void 0;
+			if (!isClosing || ctx.isOpen() || !dialog.open) return;
+			const transition = dialog.style.getPropertyValue("transition");
+			const transitionPriority = dialog.style.getPropertyPriority("transition");
+			dialog.style.setProperty("transition", "none", "important");
+			dialog.classList.add("is-visible");
+			dialog.offsetWidth;
+			if (transition) dialog.style.setProperty("transition", transition, transitionPriority);
+			else dialog.style.removeProperty("transition");
+			openFrame = requestAnimationFrame(() => {
+				openFrame = void 0;
+				if (!isClosing || ctx.isOpen() || !dialog.open) return;
+				startClosingTransition(dialog);
 			});
 		});
-	}, f = (e) => {
+	};
+	const isInTopLayer = (dialog) => {
 		try {
-			return e.matches(":modal");
+			return dialog.matches(":modal");
 		} catch {
-			return !1;
+			return false;
 		}
 	};
 	return {
-		sync(e) {
-			e ? l() : d();
+		sync(open) {
+			if (open) startOpening();
+			else startClosing();
 		},
 		reconcile() {
-			let e = t.getDialog();
-			if (e) {
-				if (!t.isOpen()) {
-					s(), o(), i = !1, e.open && (a = !0, e.close()), e.classList.remove("is-closing", "is-visible");
-					return;
+			const dialog = ctx.getDialog();
+			if (!dialog) return;
+			if (!ctx.isOpen()) {
+				cancelOpenFrame();
+				clearCloseFallback();
+				isClosing = false;
+				if (dialog.open) {
+					selfClosePending = true;
+					dialog.close();
 				}
-				e.open && !f(e) && (a = !0, e.close()), l();
+				dialog.classList.remove("is-closing", "is-visible");
+				return;
 			}
+			if (dialog.open && !isInTopLayer(dialog)) {
+				selfClosePending = true;
+				dialog.close();
+			}
+			startOpening();
 		},
-		handleTransitionEnd(e) {
-			e.target === t.getDialog() && e.propertyName === "transform" && c();
+		handleTransitionEnd(event) {
+			if (event.target !== ctx.getDialog() || event.propertyName !== "transform") return;
+			finishClosing();
 		},
 		handleNativeClose() {
-			return a ? (a = !1, !0) : (s(), o(), i = !1, t.getDialog()?.classList.remove("is-closing", "is-visible"), !1);
+			if (selfClosePending) {
+				selfClosePending = false;
+				return true;
+			}
+			cancelOpenFrame();
+			clearCloseFallback();
+			isClosing = false;
+			ctx.getDialog()?.classList.remove("is-closing", "is-visible");
+			return false;
 		},
 		dispose() {
-			s(), o(), i = !1, a = !1;
+			cancelOpenFrame();
+			clearCloseFallback();
+			isClosing = false;
+			selfClosePending = false;
 		}
 	};
 });
-//#endregion
-export { n as defineNativeDialogPresence };
+export { defineNativeDialogPresence };
 
 //# sourceMappingURL=native-dialog-presence.js.map

package/dist/shared/overlay/native-dialog-presence.js.map

@@ -1 +1 @@
-{"version":3,"file":"native-dialog-presence.js","names":[],"sources":["../../../src/shared/overlay/native-dialog-presence.ts"],"sourcesContent":["import { definePlugin } from '@greypan/js-kit'\n\nimport { getTransitionDuration } from './presence'\n\nexport interface NativeDialogPresenceOptions {\n  getDialog(): HTMLDialogElement | null\n  isConnected(): boolean\n  isOpen(): boolean\n}\n\nexport interface NativeDialogPresenceApi {\n  sync(open: boolean): void\n  /**\n   * 重挂载对账：宿主在打开态被移出文档再接回时调用。\n   *\n   * 平台行为（Chromium/WebKit 实测）：`<dialog>` 随宿主移出文档时脱离 top layer，\n   * 但 `open` 属性残留。此时 `sync(true)` 救不回来——`startOpening` 的\n   * `if (!dialog.open)` 守卫会跳过 `showModal`，而直接对残留 open 的 dialog 调\n   * `showModal` 会抛 `InvalidStateError`；且排队的 `close` 事件若被消费方当成\n   * 外部关闭，会把 `open` 误置为 false。本方法先标记 self-close 再真正 close，\n   * 随后走 `startOpening`（此刻 open 属性已清，`showModal` 正常执行，排队的\n   * `close` 事件由 `handleNativeClose` 消费），dialog 因此同步回到 top layer。\n   */\n  reconcile(): void\n  handleTransitionEnd(event: TransitionEvent): void\n  /**\n   * 处理原生 dialog 的 `close` 事件。\n   *\n   * 返回 `true` 表示该事件是本模块自己 `finishClosing → dialog.close()` 排队的\n   * 异步事件（正常时序在本关闭会话内到达，快速重开时在重开后到达的过期事件），\n   * 消费方不应把它当成外部关闭；返回 `false` 表示真实的外部关闭\n   * （如表单 method=\"dialog\"、宿主程序化 dialog.close()），消费方需自行恢复状态。\n   */\n  handleNativeClose(): boolean\n  dispose(): void\n}\n\n// 管理原生 dialog 保持在 top layer 直至退出动画完成的生命周期。\nexport const defineNativeDialogPresence = () =>\n  definePlugin<NativeDialogPresenceApi, NativeDialogPresenceOptions>(ctx => {\n    let closeFallbackTimer: ReturnType<typeof setTimeout> | undefined\n    let openFrame: number | undefined\n    let isClosing = false\n    // 由本模块 finishClosing 主动 dialog.close() 时置 true。原生 dialog 的 close 事件\n    // 是异步任务（queue a task），可能在之后任意时刻才到达：正常时序在本关闭会话内\n    // 到达（消费方 open 已为 false，本就该忽略）；快速「关闭→重开」时它在重新打开\n    // 之后才到达，若消费方把它当成外部关闭，会把刚重开的 dialog 关掉——这是 drawer\n    // 连续 toggle 后丢失过渡动画（重开即被误关）的根因。置位后由消费方的\n    // handleNativeClose 经 handleNativeClose() 消费；消费方 open 为 false 提前返回时\n    // 也必须调用一次以消费标志，避免泄漏到下一次真实关闭。\n    let selfClosePending = false\n\n    const clearCloseFallback = () => {\n      if (closeFallbackTimer === undefined) return\n      clearTimeout(closeFallbackTimer)\n      closeFallbackTimer = undefined\n    }\n\n    const cancelOpenFrame = () => {\n      if (openFrame === undefined) return\n      cancelAnimationFrame(openFrame)\n      openFrame = undefined\n    }\n\n    const finishClosing = () => {\n      const dialog = ctx.getDialog()\n      if (!dialog || !isClosing || ctx.isOpen()) return\n      clearCloseFallback()\n      isClosing = false\n      dialog.classList.remove('is-closing', 'is-visible')\n      if (dialog.open) {\n        selfClosePending = true\n        dialog.close?.()\n      }\n    }\n\n    const startOpening = () => {\n      const dialog = ctx.getDialog()\n      if (!dialog) return\n      isClosing = false\n      clearCloseFallback()\n      dialog.classList.remove('is-closing')\n      if (!dialog.open) {\n        try {\n          // 并发多个 modal dialog（nested drawer 场景）在规范中合法；\n          // 此 try/catch 为防御性兜底（如对已在 top layer 的 dialog 重复 showModal\n          // 会抛 InvalidStateError），失败时由下方 rAF 回调的 dialog.open 判断中止动画。\n          dialog.showModal?.()\n        } catch {\n          // 保留未打开状态\n        }\n      }\n      // 强制计算初始 top-layer 布局，确保 Safari 等浏览器在下一帧切换 class 时\n      // 有稳定的 transition 起点，而不是偶发跳过进场过渡。\n      void dialog.offsetWidth\n\n      cancelOpenFrame()\n      openFrame = requestAnimationFrame(() => {\n        openFrame = undefined\n        if (!ctx.isConnected() || !ctx.isOpen() || !dialog.open) return\n        dialog.classList.add('is-visible')\n      })\n    }\n\n    const startClosingTransition = (dialog: HTMLDialogElement) => {\n      // WebKit may coalesce class changes in the same style scope and skip the transition\n      // when the previous computed state has not been submitted yet.\n      void dialog.offsetWidth\n      dialog.classList.add('is-closing')\n      dialog.classList.remove('is-visible')\n      clearCloseFallback()\n      closeFallbackTimer = setTimeout(() => finishClosing(), getTransitionDuration(dialog) + 80)\n    }\n\n    const startClosing = () => {\n      const dialog = ctx.getDialog()\n      if (!dialog?.open) return\n      const hasPendingOpenFrame = openFrame !== undefined\n      cancelOpenFrame()\n      isClosing = true\n      if (dialog.classList.contains('is-visible')) {\n        startClosingTransition(dialog)\n        return\n      }\n      if (!hasPendingOpenFrame) {\n        finishClosing()\n        return\n      }\n\n      // 关闭可能先于打开路径的首个 rAF 到达。先用一帧补齐可见态并强制提交布局，\n      // 再用下一帧切换 closing，让退出 transition 有稳定的起点。进场 transition\n      // 不能参与这次布局提交，否则当前 transform 仍停在闭合起点。\n      openFrame = requestAnimationFrame(() => {\n        openFrame = undefined\n        if (!isClosing || ctx.isOpen() || !dialog.open) return\n        const transition = dialog.style.getPropertyValue('transition')\n        const transitionPriority = dialog.style.getPropertyPriority('transition')\n        dialog.style.setProperty('transition', 'none', 'important')\n        dialog.classList.add('is-visible')\n        void dialog.offsetWidth\n        if (transition) {\n          dialog.style.setProperty('transition', transition, transitionPriority)\n        } else {\n          dialog.style.removeProperty('transition')\n        }\n        openFrame = requestAnimationFrame(() => {\n          openFrame = undefined\n          if (!isClosing || ctx.isOpen() || !dialog.open) return\n          startClosingTransition(dialog)\n        })\n      })\n    }\n\n    // jsdom 的选择器引擎不认识 :modal（可能抛错）；抛错按「不在 top layer」处理，\n    // reconcile 随之走 close+showModal 的收敛路径，行为仍正确。\n    const isInTopLayer = (dialog: HTMLDialogElement): boolean => {\n      try {\n        return dialog.matches(':modal')\n      } catch {\n        return false\n      }\n    }\n\n    return {\n      sync(open) {\n        if (open) startOpening()\n        else startClosing()\n      },\n\n      reconcile() {\n        const dialog = ctx.getDialog()\n        if (!dialog) return\n\n        if (!ctx.isOpen()) {\n          // 宿主在断连期间被置为关闭（或关闭动画被 disconnect 打断）：\n          // updated() 在断连时被跳过，inner dialog 可能仍残留 open 属性与\n          // is-visible/is-closing class，补一次强制收敛到关闭态。\n          cancelOpenFrame()\n          clearCloseFallback()\n          isClosing = false\n          if (dialog.open) {\n            selfClosePending = true\n            dialog.close()\n          }\n          dialog.classList.remove('is-closing', 'is-visible')\n          return\n        }\n\n        // 打开态重挂载：open 属性残留但已脱离 top layer 时，必须先真关闭再重开。\n        if (dialog.open && !isInTopLayer(dialog)) {\n          selfClosePending = true\n          dialog.close()\n        }\n        startOpening()\n      },\n\n      handleTransitionEnd(event) {\n        if (event.target !== ctx.getDialog() || event.propertyName !== 'transform') return\n        finishClosing()\n      },\n\n      handleNativeClose() {\n        if (selfClosePending) {\n          // 我们自己的 dialog.close() 排队的事件：正常时序在本会话内到达、快速重开\n          // 时是上一会话的过期事件——两种情况本模块都已在 finishClosing 完成全部清理，\n          // 消费标志并让调用方跳过外部关闭处理即可。\n          selfClosePending = false\n          return true\n        }\n        // 真实的外部关闭：重置打开/关闭状态，等待消费方恢复（如 open=false）。\n        cancelOpenFrame()\n        clearCloseFallback()\n        isClosing = false\n        ctx.getDialog()?.classList.remove('is-closing', 'is-visible')\n        return false\n      },\n\n      dispose() {\n        cancelOpenFrame()\n        clearCloseFallback()\n        isClosing = false\n        selfClosePending = false\n      }\n    }\n  })\n"],"mappings":"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"}
+{"version":3,"file":"native-dialog-presence.js","names":[],"sources":["../../../src/shared/overlay/native-dialog-presence.ts"],"sourcesContent":["import { definePlugin } from '@greypan/js-kit'\n\nimport { getTransitionDuration } from './presence'\n\nexport interface NativeDialogPresenceOptions {\n  getDialog(): HTMLDialogElement | null\n  isConnected(): boolean\n  isOpen(): boolean\n}\n\nexport interface NativeDialogPresenceApi {\n  sync(open: boolean): void\n  /**\n   * 重挂载对账：宿主在打开态被移出文档再接回时调用。\n   *\n   * 平台行为（Chromium/WebKit 实测）：`<dialog>` 随宿主移出文档时脱离 top layer，\n   * 但 `open` 属性残留。此时 `sync(true)` 救不回来——`startOpening` 的\n   * `if (!dialog.open)` 守卫会跳过 `showModal`，而直接对残留 open 的 dialog 调\n   * `showModal` 会抛 `InvalidStateError`；且排队的 `close` 事件若被消费方当成\n   * 外部关闭，会把 `open` 误置为 false。本方法先标记 self-close 再真正 close，\n   * 随后走 `startOpening`（此刻 open 属性已清，`showModal` 正常执行，排队的\n   * `close` 事件由 `handleNativeClose` 消费），dialog 因此同步回到 top layer。\n   */\n  reconcile(): void\n  handleTransitionEnd(event: TransitionEvent): void\n  /**\n   * 处理原生 dialog 的 `close` 事件。\n   *\n   * 返回 `true` 表示该事件是本模块自己 `finishClosing → dialog.close()` 排队的\n   * 异步事件（正常时序在本关闭会话内到达，快速重开时在重开后到达的过期事件），\n   * 消费方不应把它当成外部关闭；返回 `false` 表示真实的外部关闭\n   * （如表单 method=\"dialog\"、宿主程序化 dialog.close()），消费方需自行恢复状态。\n   */\n  handleNativeClose(): boolean\n  dispose(): void\n}\n\n// 管理原生 dialog 保持在 top layer 直至退出动画完成的生命周期。\nexport const defineNativeDialogPresence = () =>\n  definePlugin<NativeDialogPresenceApi, NativeDialogPresenceOptions>(ctx => {\n    let closeFallbackTimer: ReturnType<typeof setTimeout> | undefined\n    let openFrame: number | undefined\n    let isClosing = false\n    // 由本模块 finishClosing 主动 dialog.close() 时置 true。原生 dialog 的 close 事件\n    // 是异步任务（queue a task），可能在之后任意时刻才到达：正常时序在本关闭会话内\n    // 到达（消费方 open 已为 false，本就该忽略）；快速「关闭→重开」时它在重新打开\n    // 之后才到达，若消费方把它当成外部关闭，会把刚重开的 dialog 关掉——这是 drawer\n    // 连续 toggle 后丢失过渡动画（重开即被误关）的根因。置位后由消费方的\n    // handleNativeClose 经 handleNativeClose() 消费；消费方 open 为 false 提前返回时\n    // 也必须调用一次以消费标志，避免泄漏到下一次真实关闭。\n    let selfClosePending = false\n\n    const clearCloseFallback = () => {\n      if (closeFallbackTimer === undefined) return\n      clearTimeout(closeFallbackTimer)\n      closeFallbackTimer = undefined\n    }\n\n    const cancelOpenFrame = () => {\n      if (openFrame === undefined) return\n      cancelAnimationFrame(openFrame)\n      openFrame = undefined\n    }\n\n    const finishClosing = () => {\n      const dialog = ctx.getDialog()\n      if (!dialog || !isClosing || ctx.isOpen()) return\n      clearCloseFallback()\n      isClosing = false\n      dialog.classList.remove('is-closing', 'is-visible')\n      if (dialog.open) {\n        selfClosePending = true\n        dialog.close?.()\n      }\n    }\n\n    const startOpening = () => {\n      const dialog = ctx.getDialog()\n      if (!dialog) return\n      isClosing = false\n      clearCloseFallback()\n      dialog.classList.remove('is-closing')\n      if (!dialog.open) {\n        try {\n          // 并发多个 modal dialog（nested drawer 场景）在规范中合法；\n          // 此 try/catch 为防御性兜底（如对已在 top layer 的 dialog 重复 showModal\n          // 会抛 InvalidStateError），失败时由下方 rAF 回调的 dialog.open 判断中止动画。\n          dialog.showModal?.()\n        } catch {\n          // 保留未打开状态\n        }\n      }\n      // 强制计算初始 top-layer 布局，确保 Safari 等浏览器在下一帧切换 class 时\n      // 有稳定的 transition 起点，而不是偶发跳过进场过渡。\n      void dialog.offsetWidth\n\n      cancelOpenFrame()\n      openFrame = requestAnimationFrame(() => {\n        openFrame = undefined\n        if (!ctx.isConnected() || !ctx.isOpen() || !dialog.open) return\n        dialog.classList.add('is-visible')\n      })\n    }\n\n    const startClosingTransition = (dialog: HTMLDialogElement) => {\n      // WebKit may coalesce class changes in the same style scope and skip the transition\n      // when the previous computed state has not been submitted yet.\n      void dialog.offsetWidth\n      dialog.classList.add('is-closing')\n      dialog.classList.remove('is-visible')\n      clearCloseFallback()\n      closeFallbackTimer = setTimeout(() => finishClosing(), getTransitionDuration(dialog) + 80)\n    }\n\n    const startClosing = () => {\n      const dialog = ctx.getDialog()\n      if (!dialog?.open) return\n      const hasPendingOpenFrame = openFrame !== undefined\n      cancelOpenFrame()\n      isClosing = true\n      if (dialog.classList.contains('is-visible')) {\n        startClosingTransition(dialog)\n        return\n      }\n      if (!hasPendingOpenFrame) {\n        finishClosing()\n        return\n      }\n\n      // 关闭可能先于打开路径的首个 rAF 到达。先用一帧补齐可见态并强制提交布局，\n      // 再用下一帧切换 closing，让退出 transition 有稳定的起点。进场 transition\n      // 不能参与这次布局提交，否则当前 transform 仍停在闭合起点。\n      openFrame = requestAnimationFrame(() => {\n        openFrame = undefined\n        if (!isClosing || ctx.isOpen() || !dialog.open) return\n        const transition = dialog.style.getPropertyValue('transition')\n        const transitionPriority = dialog.style.getPropertyPriority('transition')\n        dialog.style.setProperty('transition', 'none', 'important')\n        dialog.classList.add('is-visible')\n        void dialog.offsetWidth\n        if (transition) {\n          dialog.style.setProperty('transition', transition, transitionPriority)\n        } else {\n          dialog.style.removeProperty('transition')\n        }\n        openFrame = requestAnimationFrame(() => {\n          openFrame = undefined\n          if (!isClosing || ctx.isOpen() || !dialog.open) return\n          startClosingTransition(dialog)\n        })\n      })\n    }\n\n    // jsdom 的选择器引擎不认识 :modal（可能抛错）；抛错按「不在 top layer」处理，\n    // reconcile 随之走 close+showModal 的收敛路径，行为仍正确。\n    const isInTopLayer = (dialog: HTMLDialogElement): boolean => {\n      try {\n        return dialog.matches(':modal')\n      } catch {\n        return false\n      }\n    }\n\n    return {\n      sync(open) {\n        if (open) startOpening()\n        else startClosing()\n      },\n\n      reconcile() {\n        const dialog = ctx.getDialog()\n        if (!dialog) return\n\n        if (!ctx.isOpen()) {\n          // 宿主在断连期间被置为关闭（或关闭动画被 disconnect 打断）：\n          // updated() 在断连时被跳过，inner dialog 可能仍残留 open 属性与\n          // is-visible/is-closing class，补一次强制收敛到关闭态。\n          cancelOpenFrame()\n          clearCloseFallback()\n          isClosing = false\n          if (dialog.open) {\n            selfClosePending = true\n            dialog.close()\n          }\n          dialog.classList.remove('is-closing', 'is-visible')\n          return\n        }\n\n        // 打开态重挂载：open 属性残留但已脱离 top layer 时，必须先真关闭再重开。\n        if (dialog.open && !isInTopLayer(dialog)) {\n          selfClosePending = true\n          dialog.close()\n        }\n        startOpening()\n      },\n\n      handleTransitionEnd(event) {\n        if (event.target !== ctx.getDialog() || event.propertyName !== 'transform') return\n        finishClosing()\n      },\n\n      handleNativeClose() {\n        if (selfClosePending) {\n          // 我们自己的 dialog.close() 排队的事件：正常时序在本会话内到达、快速重开\n          // 时是上一会话的过期事件——两种情况本模块都已在 finishClosing 完成全部清理，\n          // 消费标志并让调用方跳过外部关闭处理即可。\n          selfClosePending = false\n          return true\n        }\n        // 真实的外部关闭：重置打开/关闭状态，等待消费方恢复（如 open=false）。\n        cancelOpenFrame()\n        clearCloseFallback()\n        isClosing = false\n        ctx.getDialog()?.classList.remove('is-closing', 'is-visible')\n        return false\n      },\n\n      dispose() {\n        cancelOpenFrame()\n        clearCloseFallback()\n        isClosing = false\n        selfClosePending = false\n      }\n    }\n  })\n"],"mappings":"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"}

package/dist/shared/overlay/nested-drawer-layers.js

@@ -1,65 +1,95 @@
-import { definePlugin as e } from "@greypan/js-kit";
-//#region src/shared/overlay/nested-drawer-layers.ts
-var t = "--wui-internal-drawer-nested-depth", n = .95, r = "--wui-drawer-nested-peek-base", i = 43.2, a = "(width <= 640px)", o = /* @__PURE__ */ new Set(), s = !1, c = null;
-function l(e) {
-	let t = getComputedStyle(e).getPropertyValue(r), n = Number.parseFloat(t);
-	return Number.isFinite(n) ? n : i;
+import { definePlugin } from "@greypan/js-kit";
+// src/shared/overlay/nested-drawer-layers.ts
+const DEPTH_VARIABLE = "--wui-internal-drawer-nested-depth";
+const NESTED_SCALE = .95;
+const PEEK_BASE_VARIABLE = "--wui-drawer-nested-peek-base";
+const NESTED_PEEK_BASE_FALLBACK = 43.2;
+const NESTED_PEEK_BASE_QUERY = "(width <= 640px)";
+const entries = /* @__PURE__ */ new Set();
+let documentListenerAttached = false;
+let peekBaseQuery = null;
+function readPeekBase(dialog) {
+	const raw = getComputedStyle(dialog).getPropertyValue(PEEK_BASE_VARIABLE);
+	const parsed = Number.parseFloat(raw);
+	return Number.isFinite(parsed) ? parsed : NESTED_PEEK_BASE_FALLBACK;
 }
-function u() {
-	o.size > 0 && d();
+function handlePeekBaseChange() {
+	if (entries.size > 0) applyLayers();
 }
-function d() {
-	let e = [];
-	for (let t of o) {
-		let n = t.dialog;
-		if (!n.isConnected || !n.open) {
-			o.delete(t);
+function applyLayers() {
+	const openEntries = [];
+	for (const entry of entries) {
+		const dialog = entry.dialog;
+		if (!dialog.isConnected || !dialog.open) {
+			entries.delete(entry);
 			continue;
 		}
-		let r = t.placement() === "left" || t.placement() === "right" ? n.offsetWidth : n.offsetHeight;
-		e.push({
-			entry: t,
-			dialog: n,
-			size: r
+		const size = entry.placement() === "left" || entry.placement() === "right" ? dialog.offsetWidth : dialog.offsetHeight;
+		openEntries.push({
+			entry,
+			dialog,
+			size
 		});
 	}
-	let r = e.length;
-	for (let i = 0; i < r; i++) {
-		let { dialog: a, size: o } = e[i], s = r - 1 - i, c = n ** +s, u = o * (1 - c) / 2, d = 0;
-		for (let t = i + 1; t < r; t++) e[t].size > d && (d = e[t].size);
-		let f = Math.max(0, d - o), p = l(a) * Math.log(s + 1), m = s > 0 ? u + f + p : 0;
-		a.style.setProperty(t, String(s)), a.style.setProperty("--wui-internal-drawer-nested-scale", c.toFixed(4)), a.style.setProperty("--wui-internal-drawer-nested-shift", `${m.toFixed(2)}px`), s > 0 ? a.classList.add("is-nested-lower") : a.classList.remove("is-nested-lower");
+	const total = openEntries.length;
+	for (let i = 0; i < total; i++) {
+		const { dialog, size } = openEntries[i];
+		const depth = total - 1 - i;
+		const scale = Math.pow(NESTED_SCALE, depth);
+		const shrink = size * (1 - scale) / 2;
+		let aboveMaxSize = 0;
+		for (let j = i + 1; j < total; j++) if (openEntries[j].size > aboveMaxSize) aboveMaxSize = openEntries[j].size;
+		const sizeDiff = Math.max(0, aboveMaxSize - size);
+		const peek = readPeekBase(dialog) * Math.log(depth + 1);
+		const shift = depth > 0 ? shrink + sizeDiff + peek : 0;
+		dialog.style.setProperty(DEPTH_VARIABLE, String(depth));
+		dialog.style.setProperty("--wui-internal-drawer-nested-scale", scale.toFixed(4));
+		dialog.style.setProperty("--wui-internal-drawer-nested-shift", `${shift.toFixed(2)}px`);
+		if (depth > 0) dialog.classList.add("is-nested-lower");
+		else dialog.classList.remove("is-nested-lower");
 	}
 }
-function f(e) {
-	e.target instanceof HTMLDialogElement && o.size > 0 && d();
+function handleAnyDialogClose(event) {
+	if (!(event.target instanceof HTMLDialogElement)) return;
+	if (entries.size > 0) applyLayers();
 }
-function p() {
-	s ||= (document.addEventListener("close", f, !0), typeof window.matchMedia == "function" && (c = window.matchMedia(a), c.addEventListener("change", u)), !0);
+function ensureDocumentListener() {
+	if (documentListenerAttached) return;
+	document.addEventListener("close", handleAnyDialogClose, true);
+	if (typeof window.matchMedia === "function") {
+		peekBaseQuery = window.matchMedia(NESTED_PEEK_BASE_QUERY);
+		peekBaseQuery.addEventListener("change", handlePeekBaseChange);
+	}
+	documentListenerAttached = true;
 }
-var m = () => e((e) => ({
+const defineNestedDrawerLayers = () => definePlugin((ctx) => ({
 	register() {
-		let t = e.getDialog();
-		if (t) {
-			for (let e of o) e.dialog === t && o.delete(e);
-			p(), o.add({
-				dialog: t,
-				placement: () => e.getPlacement()
-			}), d();
-		}
+		const dialog = ctx.getDialog();
+		if (!dialog) return;
+		for (const entry of entries) if (entry.dialog === dialog) entries.delete(entry);
+		ensureDocumentListener();
+		entries.add({
+			dialog,
+			placement: () => ctx.getPlacement()
+		});
+		applyLayers();
 	},
 	unregister() {
-		let t = e.getDialog();
-		for (let e of o) e.dialog === t && o.delete(e);
-		o.size > 0 && d();
+		const dialog = ctx.getDialog();
+		for (const entry of entries) if (entry.dialog === dialog) entries.delete(entry);
+		if (entries.size > 0) applyLayers();
 	},
 	dispose() {
-		let t = e.getDialog();
-		for (let e of o) e.dialog === t && o.delete(e);
-		o.size === 0 && s && (document.removeEventListener("close", f, !0), c?.removeEventListener("change", u), c = null, s = !1);
+		const dialog = ctx.getDialog();
+		for (const entry of entries) if (entry.dialog === dialog) entries.delete(entry);
+		if (entries.size === 0 && documentListenerAttached) {
+			document.removeEventListener("close", handleAnyDialogClose, true);
+			peekBaseQuery?.removeEventListener("change", handlePeekBaseChange);
+			peekBaseQuery = null;
+			documentListenerAttached = false;
+		}
 	}
 }));
-//#endregion
-export { i as NESTED_PEEK_BASE_FALLBACK, r as PEEK_BASE_VARIABLE, m as defineNestedDrawerLayers };
+export { NESTED_PEEK_BASE_FALLBACK, PEEK_BASE_VARIABLE, defineNestedDrawerLayers };
 
 //# sourceMappingURL=nested-drawer-layers.js.map

package/dist/shared/overlay/nested-drawer-layers.js.map

@@ -1 +1 @@
-{"version":3,"file":"nested-drawer-layers.js","names":[],"sources":["../../../src/shared/overlay/nested-drawer-layers.ts"],"sourcesContent":["/*\n * Nested drawer 层序管理：\n * 每打开一层 modal drawer，其下所有已打开的 drawer 按 0.95^n 缩放并向\n * 屏幕内侧平移，在顶层 drawer 后方露出阶梯式卡片边缘（peeking edge）；顶层全尺寸。\n *\n * 层序来源是原生 top layer 本身：depth = 在自身 showModal 之前已打开的\n * modal dialog 数。上层关闭通过 document 捕获阶段的 `close` 事件感知\n * （原生 close 事件不冒泡，但捕获阶段在 document 上可观察所有 target），\n * 底层重算 depth 后由 CSS transition 平滑回弹。\n *\n * 视觉规格：\n * - scale = 0.95^depth\n * - 堆叠总宽度随层数按对数曲线增长：T(n) = base · ln(n)。\n *   shift = shrink + sizeDiff + base · ln(depth + 1)（向屏幕内侧偏移，露出阶梯卡片边缘）。\n *   ln(1) = 0，单层不受影响；层数越多每层新增的露边越少，堆叠总宽不随层数线性膨胀。\n *   base 读自公开 token `--wui-drawer-nested-peek-base`（注册项的 initialValue 是桌面\n *   基准的唯一真相源，窄视口基准由 drawer 的媒体查询覆盖），消费方可整体改写层叠观感。\n * - 过渡 transform 450ms cubic-bezier(0.22, 1, 0.36, 1)\n *\n * 拖拽与释放后的收尾期间 JS 直接写 dialog.style.transform（优先级高于本机制的\n * CSS 变量组合），顶层才有拖拽，故无冲突。\n */\n\nimport { definePlugin } from '@greypan/js-kit'\n\nconst DEPTH_VARIABLE = '--wui-internal-drawer-nested-depth'\nconst NESTED_SCALE = 0.95\nexport const PEEK_BASE_VARIABLE = '--wui-drawer-nested-peek-base'\n/*\n * 注册项 initialValue 的镜像，**不是**第二真相源：真实基准由 drawer/index.ts 的\n * `CSS.registerProperty` 决定，浏览器里 computed style 永远有值，走不到这个兜底。\n * 保留它只为 jsdom——那里没有 registerProperty，getComputedStyle 返回空串，\n * 层序数学仍需要有定义的基准。浏览器 spec 有一条断言把两者钉在一起，防止漂移。\n */\nexport const NESTED_PEEK_BASE_FALLBACK = 43.2\n/*\n * 与 drawer/style.css 里 `@media (width <= 640px)` 同一条断点：跨越断点时媒体查询会\n * 换掉基准，已打开的堆叠要重算，否则会停留在旧断点的露边宽度上。\n */\nconst NESTED_PEEK_BASE_QUERY = '(width <= 640px)'\n\ninterface NestedDrawerEntry {\n  dialog: HTMLDialogElement\n  placement: () => 'right' | 'left' | 'top' | 'bottom'\n}\n\nconst entries = new Set<NestedDrawerEntry>()\n\nlet documentListenerAttached = false\nlet peekBaseQuery: MediaQueryList | null = null\n\nfunction readPeekBase(dialog: HTMLDialogElement): number {\n  const raw = getComputedStyle(dialog).getPropertyValue(PEEK_BASE_VARIABLE)\n  const parsed = Number.parseFloat(raw)\n  return Number.isFinite(parsed) ? parsed : NESTED_PEEK_BASE_FALLBACK\n}\n\nfunction handlePeekBaseChange() {\n  if (entries.size > 0) applyLayers()\n}\n\nfunction applyLayers() {\n  const openEntries: Array<{\n    entry: NestedDrawerEntry\n    dialog: HTMLDialogElement\n    size: number\n  }> = []\n\n  for (const entry of entries) {\n    const dialog = entry.dialog\n    if (!dialog.isConnected || !dialog.open) {\n      entries.delete(entry)\n      continue\n    }\n    const size =\n      entry.placement() === 'left' || entry.placement() === 'right' ? dialog.offsetWidth : dialog.offsetHeight\n    openEntries.push({ entry, dialog, size })\n  }\n\n  const total = openEntries.length\n  for (let i = 0; i < total; i++) {\n    const { dialog, size } = openEntries[i]\n    // 注册顺序：先打开的在前 (index 小)，后打开的在后 (index 大)。\n    // depth = 在我之后打开的 drawer 数量 = (total - 1) - i\n    const depth = total - 1 - i\n    const scale = Math.pow(NESTED_SCALE, depth)\n    const shrink = (size * (1 - scale)) / 2\n\n    // 检查所有排在我之后的上层 drawer 的最大尺寸（若上层更宽，补偿宽度差确保露边）\n    let aboveMaxSize = 0\n    for (let j = i + 1; j < total; j++) {\n      if (openEntries[j].size > aboveMaxSize) {\n        aboveMaxSize = openEntries[j].size\n      }\n    }\n    const sizeDiff = Math.max(0, aboveMaxSize - size)\n    // 逐层读基准：消费方可以给某一层单独换基准，不必所有层共用一个值。\n    const peek = readPeekBase(dialog) * Math.log(depth + 1)\n    // depth 0 显式归零：单层 drawer 的偏移不依赖 ln(1) 的浮点结果，也不依赖基准是否被改写。\n    const shift = depth > 0 ? shrink + sizeDiff + peek : 0\n\n    dialog.style.setProperty(DEPTH_VARIABLE, String(depth))\n    dialog.style.setProperty('--wui-internal-drawer-nested-scale', scale.toFixed(4))\n    dialog.style.setProperty('--wui-internal-drawer-nested-shift', `${shift.toFixed(2)}px`)\n    if (depth > 0) {\n      dialog.classList.add('is-nested-lower')\n    } else {\n      dialog.classList.remove('is-nested-lower')\n    }\n  }\n}\n\nfunction handleAnyDialogClose(event: Event) {\n  if (!(event.target instanceof HTMLDialogElement)) return\n  // 上层（或任意层）关闭后，重算所有存活 drawer 的 depth。\n  if (entries.size > 0) applyLayers()\n}\n\nfunction ensureDocumentListener() {\n  if (documentListenerAttached) return\n  document.addEventListener('close', handleAnyDialogClose, true)\n  // jsdom 等无 matchMedia 的环境：媒体查询换不掉基准，但打开/关闭路径仍会重算。\n  if (typeof window.matchMedia === 'function') {\n    peekBaseQuery = window.matchMedia(NESTED_PEEK_BASE_QUERY)\n    peekBaseQuery.addEventListener('change', handlePeekBaseChange)\n  }\n  documentListenerAttached = true\n}\n\nexport interface NestedDrawerLayerOptions {\n  getDialog(): HTMLDialogElement | null\n  getPlacement(): 'right' | 'left' | 'top' | 'bottom'\n}\n\nexport interface NestedDrawerLayerApi {\n  /** dialog 进入 top layer（打开动画就绪）后调用，纳入层序管理。 */\n  register(): void\n  /** 关闭流程开始时调用：移出层序并触发底层回弹。 */\n  unregister(): void\n  dispose(): void\n}\n\nexport const defineNestedDrawerLayers = () =>\n  definePlugin<NestedDrawerLayerApi, NestedDrawerLayerOptions>(ctx => ({\n    register() {\n      const dialog = ctx.getDialog()\n      if (!dialog) return\n      // 幂等保护：重挂载对账与 updated() 的 open 分支可能对同一 dialog 先后各调\n      // 一次 register，重复条目会让 applyLayers 把同一层计两次。\n      for (const entry of entries) {\n        if (entry.dialog === dialog) entries.delete(entry)\n      }\n      ensureDocumentListener()\n      entries.add({ dialog, placement: () => ctx.getPlacement() })\n      applyLayers()\n    },\n\n    unregister() {\n      const dialog = ctx.getDialog()\n      for (const entry of entries) {\n        if (entry.dialog === dialog) entries.delete(entry)\n      }\n      // 移除后重算剩余层（顶层关闭 → 次层回到 depth 0）。\n      if (entries.size > 0) applyLayers()\n    },\n\n    dispose() {\n      const dialog = ctx.getDialog()\n      for (const entry of entries) {\n        if (entry.dialog === dialog) entries.delete(entry)\n      }\n      if (entries.size === 0 && documentListenerAttached) {\n        document.removeEventListener('close', handleAnyDialogClose, true)\n        peekBaseQuery?.removeEventListener('change', handlePeekBaseChange)\n        peekBaseQuery = null\n        documentListenerAttached = false\n      }\n    }\n  }))\n"],"mappings":"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"}
+{"version":3,"file":"nested-drawer-layers.js","names":[],"sources":["../../../src/shared/overlay/nested-drawer-layers.ts"],"sourcesContent":["/*\n * Nested drawer 层序管理：\n * 每打开一层 modal drawer，其下所有已打开的 drawer 按 0.95^n 缩放并向\n * 屏幕内侧平移，在顶层 drawer 后方露出阶梯式卡片边缘（peeking edge）；顶层全尺寸。\n *\n * 层序来源是原生 top layer 本身：depth = 在自身 showModal 之前已打开的\n * modal dialog 数。上层关闭通过 document 捕获阶段的 `close` 事件感知\n * （原生 close 事件不冒泡，但捕获阶段在 document 上可观察所有 target），\n * 底层重算 depth 后由 CSS transition 平滑回弹。\n *\n * 视觉规格：\n * - scale = 0.95^depth\n * - 堆叠总宽度随层数按对数曲线增长：T(n) = base · ln(n)。\n *   shift = shrink + sizeDiff + base · ln(depth + 1)（向屏幕内侧偏移，露出阶梯卡片边缘）。\n *   ln(1) = 0，单层不受影响；层数越多每层新增的露边越少，堆叠总宽不随层数线性膨胀。\n *   base 读自公开 token `--wui-drawer-nested-peek-base`（注册项的 initialValue 是桌面\n *   基准的唯一真相源，窄视口基准由 drawer 的媒体查询覆盖），消费方可整体改写层叠观感。\n * - 过渡 transform 450ms cubic-bezier(0.22, 1, 0.36, 1)\n *\n * 拖拽与释放后的收尾期间 JS 直接写 dialog.style.transform（优先级高于本机制的\n * CSS 变量组合），顶层才有拖拽，故无冲突。\n */\n\nimport { definePlugin } from '@greypan/js-kit'\n\nconst DEPTH_VARIABLE = '--wui-internal-drawer-nested-depth'\nconst NESTED_SCALE = 0.95\nexport const PEEK_BASE_VARIABLE = '--wui-drawer-nested-peek-base'\n/*\n * 注册项 initialValue 的镜像，**不是**第二真相源：真实基准由 drawer/index.ts 的\n * `CSS.registerProperty` 决定，浏览器里 computed style 永远有值，走不到这个兜底。\n * 保留它只为 jsdom——那里没有 registerProperty，getComputedStyle 返回空串，\n * 层序数学仍需要有定义的基准。浏览器 spec 有一条断言把两者钉在一起，防止漂移。\n */\nexport const NESTED_PEEK_BASE_FALLBACK = 43.2\n/*\n * 与 drawer/style.css 里 `@media (width <= 640px)` 同一条断点：跨越断点时媒体查询会\n * 换掉基准，已打开的堆叠要重算，否则会停留在旧断点的露边宽度上。\n */\nconst NESTED_PEEK_BASE_QUERY = '(width <= 640px)'\n\ninterface NestedDrawerEntry {\n  dialog: HTMLDialogElement\n  placement: () => 'right' | 'left' | 'top' | 'bottom'\n}\n\nconst entries = new Set<NestedDrawerEntry>()\n\nlet documentListenerAttached = false\nlet peekBaseQuery: MediaQueryList | null = null\n\nfunction readPeekBase(dialog: HTMLDialogElement): number {\n  const raw = getComputedStyle(dialog).getPropertyValue(PEEK_BASE_VARIABLE)\n  const parsed = Number.parseFloat(raw)\n  return Number.isFinite(parsed) ? parsed : NESTED_PEEK_BASE_FALLBACK\n}\n\nfunction handlePeekBaseChange() {\n  if (entries.size > 0) applyLayers()\n}\n\nfunction applyLayers() {\n  const openEntries: Array<{\n    entry: NestedDrawerEntry\n    dialog: HTMLDialogElement\n    size: number\n  }> = []\n\n  for (const entry of entries) {\n    const dialog = entry.dialog\n    if (!dialog.isConnected || !dialog.open) {\n      entries.delete(entry)\n      continue\n    }\n    const size =\n      entry.placement() === 'left' || entry.placement() === 'right' ? dialog.offsetWidth : dialog.offsetHeight\n    openEntries.push({ entry, dialog, size })\n  }\n\n  const total = openEntries.length\n  for (let i = 0; i < total; i++) {\n    const { dialog, size } = openEntries[i]\n    // 注册顺序：先打开的在前 (index 小)，后打开的在后 (index 大)。\n    // depth = 在我之后打开的 drawer 数量 = (total - 1) - i\n    const depth = total - 1 - i\n    const scale = Math.pow(NESTED_SCALE, depth)\n    const shrink = (size * (1 - scale)) / 2\n\n    // 检查所有排在我之后的上层 drawer 的最大尺寸（若上层更宽，补偿宽度差确保露边）\n    let aboveMaxSize = 0\n    for (let j = i + 1; j < total; j++) {\n      if (openEntries[j].size > aboveMaxSize) {\n        aboveMaxSize = openEntries[j].size\n      }\n    }\n    const sizeDiff = Math.max(0, aboveMaxSize - size)\n    // 逐层读基准：消费方可以给某一层单独换基准，不必所有层共用一个值。\n    const peek = readPeekBase(dialog) * Math.log(depth + 1)\n    // depth 0 显式归零：单层 drawer 的偏移不依赖 ln(1) 的浮点结果，也不依赖基准是否被改写。\n    const shift = depth > 0 ? shrink + sizeDiff + peek : 0\n\n    dialog.style.setProperty(DEPTH_VARIABLE, String(depth))\n    dialog.style.setProperty('--wui-internal-drawer-nested-scale', scale.toFixed(4))\n    dialog.style.setProperty('--wui-internal-drawer-nested-shift', `${shift.toFixed(2)}px`)\n    if (depth > 0) {\n      dialog.classList.add('is-nested-lower')\n    } else {\n      dialog.classList.remove('is-nested-lower')\n    }\n  }\n}\n\nfunction handleAnyDialogClose(event: Event) {\n  if (!(event.target instanceof HTMLDialogElement)) return\n  // 上层（或任意层）关闭后，重算所有存活 drawer 的 depth。\n  if (entries.size > 0) applyLayers()\n}\n\nfunction ensureDocumentListener() {\n  if (documentListenerAttached) return\n  document.addEventListener('close', handleAnyDialogClose, true)\n  // jsdom 等无 matchMedia 的环境：媒体查询换不掉基准，但打开/关闭路径仍会重算。\n  if (typeof window.matchMedia === 'function') {\n    peekBaseQuery = window.matchMedia(NESTED_PEEK_BASE_QUERY)\n    peekBaseQuery.addEventListener('change', handlePeekBaseChange)\n  }\n  documentListenerAttached = true\n}\n\nexport interface NestedDrawerLayerOptions {\n  getDialog(): HTMLDialogElement | null\n  getPlacement(): 'right' | 'left' | 'top' | 'bottom'\n}\n\nexport interface NestedDrawerLayerApi {\n  /** dialog 进入 top layer（打开动画就绪）后调用，纳入层序管理。 */\n  register(): void\n  /** 关闭流程开始时调用：移出层序并触发底层回弹。 */\n  unregister(): void\n  dispose(): void\n}\n\nexport const defineNestedDrawerLayers = () =>\n  definePlugin<NestedDrawerLayerApi, NestedDrawerLayerOptions>(ctx => ({\n    register() {\n      const dialog = ctx.getDialog()\n      if (!dialog) return\n      // 幂等保护：重挂载对账与 updated() 的 open 分支可能对同一 dialog 先后各调\n      // 一次 register，重复条目会让 applyLayers 把同一层计两次。\n      for (const entry of entries) {\n        if (entry.dialog === dialog) entries.delete(entry)\n      }\n      ensureDocumentListener()\n      entries.add({ dialog, placement: () => ctx.getPlacement() })\n      applyLayers()\n    },\n\n    unregister() {\n      const dialog = ctx.getDialog()\n      for (const entry of entries) {\n        if (entry.dialog === dialog) entries.delete(entry)\n      }\n      // 移除后重算剩余层（顶层关闭 → 次层回到 depth 0）。\n      if (entries.size > 0) applyLayers()\n    },\n\n    dispose() {\n      const dialog = ctx.getDialog()\n      for (const entry of entries) {\n        if (entry.dialog === dialog) entries.delete(entry)\n      }\n      if (entries.size === 0 && documentListenerAttached) {\n        document.removeEventListener('close', handleAnyDialogClose, true)\n        peekBaseQuery?.removeEventListener('change', handlePeekBaseChange)\n        peekBaseQuery = null\n        documentListenerAttached = false\n      }\n    }\n  }))\n"],"mappings":"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"}