@greypan/web-ui 3.0.1 → 5.0.0

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  handleTransitionEnd(event: TransitionEvent): void\n  handleNativeClose(): void\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\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) dialog.close?.()\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          dialog.showModal?.()\n        } catch {\n          // 顶层已有其他 modal dialog 时 showModal 抛 InvalidStateError；\n          // 记录未打开状态，由 rAF 回调中的 dialog.open 判断中止动画\n        }\n      }\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 startClosing = () => {\n      const dialog = ctx.getDialog()\n      if (!dialog?.open) return\n      cancelOpenFrame()\n      isClosing = true\n      if (!dialog.classList.contains('is-visible')) {\n        finishClosing()\n        return\n      }\n\n      dialog.classList.add('is-closing')\n      dialog.classList.remove('is-visible')\n      clearCloseFallback()\n      closeFallbackTimer = setTimeout(() => finishClosing(), getTransitionDuration(dialog) + 80)\n    }\n\n    return {\n      sync(open) {\n        if (open) startOpening()\n        else startClosing()\n      },\n\n      handleTransitionEnd(event) {\n        if (event.target !== ctx.getDialog() || event.propertyName !== 'transform') return\n        finishClosing()\n      },\n\n      handleNativeClose() {\n        cancelOpenFrame()\n        clearCloseFallback()\n        isClosing = false\n        ctx.getDialog()?.classList.remove('is-closing', 'is-visible')\n      },\n\n      dispose() {\n        cancelOpenFrame()\n        clearCloseFallback()\n        isClosing = false\n      }\n    }\n  })\n"],"mappings":";;;AAkBA,IAAa,UACX,GAAmE,MAAO;CACxE,IAAI,GACA,GACA,IAAY,IAEV,UAA2B;EAC3B,MAAuB,KAAA,MAC3B,aAAa,CAAkB,GAC/B,IAAqB,KAAA;CACvB,GAEM,UAAwB;EACxB,MAAc,KAAA,MAClB,qBAAqB,CAAS,GAC9B,IAAY,KAAA;CACd,GAEM,UAAsB;EAC1B,IAAM,IAAS,EAAI,UAAU;EACzB,CAAC,KAAU,CAAC,KAAa,EAAI,OAAO,MACxC,EAAmB,GACnB,IAAY,IACZ,EAAO,UAAU,OAAO,cAAc,YAAY,GAC9C,EAAO,QAAM,EAAO,QAAQ;CAClC,GAEM,UAAqB;EACzB,IAAM,IAAS,EAAI,UAAU;EACxB,OAIL;OAHA,IAAY,IACZ,EAAmB,GACnB,EAAO,UAAU,OAAO,YAAY,GAChC,CAAC,EAAO,MACV,IAAI;IACF,EAAO,YAAY;GACrB,QAAQ,CAGR;GAIF,AADA,EAAgB,GAChB,IAAY,4BAA4B;IACtC,IAAY,KAAA,GACR,GAAC,EAAI,YAAY,KAAK,CAAC,EAAI,OAAO,KAAK,CAAC,EAAO,SACnD,EAAO,UAAU,IAAI,YAAY;GACnC,CAAC;EARC;CASJ,GAEM,UAAqB;EACzB,IAAM,IAAS,EAAI,UAAU;EACxB,OAAQ,MAGb;OAFA,EAAgB,GAChB,IAAY,IACR,CAAC,EAAO,UAAU,SAAS,YAAY,GAAG;IAC5C,EAAc;IACd;GACF;GAKA,AAHA,EAAO,UAAU,IAAI,YAAY,GACjC,EAAO,UAAU,OAAO,YAAY,GACpC,EAAmB,GACnB,IAAqB,iBAAiB,EAAc,GAAG,EAAsB,CAAM,IAAI,EAAE;EALzF;CAMF;CAEA,OAAO;EACL,KAAK,GAAM;GACT,AAAI,IAAM,EAAa,IAClB,EAAa;EACpB;EAEA,oBAAoB,GAAO;GACrB,EAAM,WAAW,EAAI,UAAU,KAAK,EAAM,iBAAiB,eAC/D,EAAc;EAChB;EAEA,oBAAoB;GAIlB,AAHA,EAAgB,GAChB,EAAmB,GACnB,IAAY,IACZ,EAAI,UAAU,CAAC,EAAE,UAAU,OAAO,cAAc,YAAY;EAC9D;EAEA,UAAU;GAGR,AAFA,EAAgB,GAChB,EAAmB,GACnB,IAAY;EACd;CACF;AACF,CAAC"}
+{"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  handleTransitionEnd(event: TransitionEvent): void\n  handleNativeClose(): void\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\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) dialog.close?.()\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\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 startClosing = () => {\n      const dialog = ctx.getDialog()\n      if (!dialog?.open) return\n      cancelOpenFrame()\n      isClosing = true\n      if (!dialog.classList.contains('is-visible')) {\n        finishClosing()\n        return\n      }\n\n      dialog.classList.add('is-closing')\n      dialog.classList.remove('is-visible')\n      clearCloseFallback()\n      closeFallbackTimer = setTimeout(() => finishClosing(), getTransitionDuration(dialog) + 80)\n    }\n\n    return {\n      sync(open) {\n        if (open) startOpening()\n        else startClosing()\n      },\n\n      handleTransitionEnd(event) {\n        if (event.target !== ctx.getDialog() || event.propertyName !== 'transform') return\n        finishClosing()\n      },\n\n      handleNativeClose() {\n        cancelOpenFrame()\n        clearCloseFallback()\n        isClosing = false\n        ctx.getDialog()?.classList.remove('is-closing', 'is-visible')\n      },\n\n      dispose() {\n        cancelOpenFrame()\n        clearCloseFallback()\n        isClosing = false\n      }\n    }\n  })\n"],"mappings":";;;AAkBA,IAAa,UACX,GAAmE,MAAO;CACxE,IAAI,GACA,GACA,IAAY,IAEV,UAA2B;EAC3B,MAAuB,KAAA,MAC3B,aAAa,CAAkB,GAC/B,IAAqB,KAAA;CACvB,GAEM,UAAwB;EACxB,MAAc,KAAA,MAClB,qBAAqB,CAAS,GAC9B,IAAY,KAAA;CACd,GAEM,UAAsB;EAC1B,IAAM,IAAS,EAAI,UAAU;EACzB,CAAC,KAAU,CAAC,KAAa,EAAI,OAAO,MACxC,EAAmB,GACnB,IAAY,IACZ,EAAO,UAAU,OAAO,cAAc,YAAY,GAC9C,EAAO,QAAM,EAAO,QAAQ;CAClC,GAEM,UAAqB;EACzB,IAAM,IAAS,EAAI,UAAU;EACxB,OAIL;OAHA,IAAY,IACZ,EAAmB,GACnB,EAAO,UAAU,OAAO,YAAY,GAChC,CAAC,EAAO,MACV,IAAI;IAIF,EAAO,YAAY;GACrB,QAAQ,CAER;GAIF,AADA,EAAgB,GAChB,IAAY,4BAA4B;IACtC,IAAY,KAAA,GACR,GAAC,EAAI,YAAY,KAAK,CAAC,EAAI,OAAO,KAAK,CAAC,EAAO,SACnD,EAAO,UAAU,IAAI,YAAY;GACnC,CAAC;EARC;CASJ,GAEM,UAAqB;EACzB,IAAM,IAAS,EAAI,UAAU;EACxB,OAAQ,MAGb;OAFA,EAAgB,GAChB,IAAY,IACR,CAAC,EAAO,UAAU,SAAS,YAAY,GAAG;IAC5C,EAAc;IACd;GACF;GAKA,AAHA,EAAO,UAAU,IAAI,YAAY,GACjC,EAAO,UAAU,OAAO,YAAY,GACpC,EAAmB,GACnB,IAAqB,iBAAiB,EAAc,GAAG,EAAsB,CAAM,IAAI,EAAE;EALzF;CAMF;CAEA,OAAO;EACL,KAAK,GAAM;GACT,AAAI,IAAM,EAAa,IAClB,EAAa;EACpB;EAEA,oBAAoB,GAAO;GACrB,EAAM,WAAW,EAAI,UAAU,KAAK,EAAM,iBAAiB,eAC/D,EAAc;EAChB;EAEA,oBAAoB;GAIlB,AAHA,EAAgB,GAChB,EAAmB,GACnB,IAAY,IACZ,EAAI,UAAU,CAAC,EAAE,UAAU,OAAO,cAAc,YAAY;EAC9D;EAEA,UAAU;GAGR,AAFA,EAAgB,GAChB,EAAmB,GACnB,IAAY;EACd;CACF;AACF,CAAC"}

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

@@ -0,0 +1,55 @@
+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 = 12, i = /* @__PURE__ */ new Set(), a = !1;
+function o() {
+	let e = [];
+	for (let t of i) {
+		let n = t.dialog;
+		if (!n.isConnected || !n.open) {
+			i.delete(t);
+			continue;
+		}
+		let r = t.placement() === "left" || t.placement() === "right" ? n.offsetWidth : n.offsetHeight;
+		e.push({
+			entry: t,
+			dialog: n,
+			size: r
+		});
+	}
+	let a = e.length;
+	for (let i = 0; i < a; i++) {
+		let { dialog: o, size: s } = e[i], c = a - 1 - i, l = n ** +c, u = s * (1 - l) / 2, d = 0;
+		for (let t = i + 1; t < a; t++) e[t].size > d && (d = e[t].size);
+		let f = Math.max(0, d - s), p = c > 0 ? u + f + c * r : 0;
+		o.style.setProperty(t, String(c)), o.style.setProperty("--wui-internal-drawer-nested-scale", l.toFixed(4)), o.style.setProperty("--wui-internal-drawer-nested-shift", `${p.toFixed(2)}px`), c > 0 ? o.classList.add("is-nested-lower") : o.classList.remove("is-nested-lower");
+	}
+}
+function s(e) {
+	e.target instanceof HTMLDialogElement && i.size > 0 && o();
+}
+function c() {
+	a ||= (document.addEventListener("close", s, !0), !0);
+}
+var l = () => e((e) => ({
+	register() {
+		let t = e.getDialog();
+		t && (c(), i.add({
+			dialog: t,
+			placement: () => e.getPlacement()
+		}), o());
+	},
+	unregister() {
+		let t = e.getDialog();
+		for (let e of i) e.dialog === t && i.delete(e);
+		i.size > 0 && o();
+	},
+	dispose() {
+		let t = e.getDialog();
+		for (let e of i) e.dialog === t && i.delete(e);
+		i.size === 0 && a && (document.removeEventListener("close", s, !0), a = !1);
+	}
+}));
+//#endregion
+export { l as defineNestedDrawerLayers };
+
+//# sourceMappingURL=nested-drawer-layers.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"nested-drawer-layers.js","names":[],"sources":["../../../src/shared/overlay/nested-drawer-layers.ts"],"sourcesContent":["/*\n * Nested drawer 层序管理（对齐 Base UI/shadcn nested drawer 行为）：\n * 每打开一层 modal drawer，其下所有已打开的 drawer 按 0.95^n 缩放并向\n * 屏幕内侧平移，在顶层抽屉后方露出阶梯式卡片边缘（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 * - shift = shrink + depth * 12px（向屏幕内侧偏移，露出阶梯卡片边缘）\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\nconst NESTED_PEEK_OFFSET = 12\n\ninterface NestedDrawerEntry {\n  dialog: HTMLDialogElement\n  placement: () => 'right' | 'left' | 'top' | 'bottom'\n}\n\nconst entries = new Set<NestedDrawerEntry>()\n\nlet documentListenerAttached = false\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    const shift = depth > 0 ? shrink + sizeDiff + depth * NESTED_PEEK_OFFSET : 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  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      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        documentListenerAttached = false\n      }\n    }\n  }))\n"],"mappings":";;AAqBA,IAAM,IAAiB,sCACjB,IAAe,KACf,IAAqB,IAOrB,oBAAU,IAAI,IAAuB,GAEvC,IAA2B;AAE/B,SAAS,IAAc;CACrB,IAAM,IAID,CAAC;CAEN,KAAK,IAAM,KAAS,GAAS;EAC3B,IAAM,IAAS,EAAM;EACrB,IAAI,CAAC,EAAO,eAAe,CAAC,EAAO,MAAM;GACvC,EAAQ,OAAO,CAAK;GACpB;EACF;EACA,IAAM,IACJ,EAAM,UAAU,MAAM,UAAU,EAAM,UAAU,MAAM,UAAU,EAAO,cAAc,EAAO;EAC9F,EAAY,KAAK;GAAE;GAAO;GAAQ;EAAK,CAAC;CAC1C;CAEA,IAAM,IAAQ,EAAY;CAC1B,KAAK,IAAI,IAAI,GAAG,IAAI,GAAO,KAAK;EAC9B,IAAM,EAAE,WAAQ,YAAS,EAAY,IAG/B,IAAQ,IAAQ,IAAI,GACpB,IAAiB,MAAc,GAC/B,IAAU,KAAQ,IAAI,KAAU,GAGlC,IAAe;EACnB,KAAK,IAAI,IAAI,IAAI,GAAG,IAAI,GAAO,KAC7B,AAAI,EAAY,EAAE,CAAC,OAAO,MACxB,IAAe,EAAY,EAAE,CAAC;EAGlC,IAAM,IAAW,KAAK,IAAI,GAAG,IAAe,CAAI,GAC1C,IAAQ,IAAQ,IAAI,IAAS,IAAW,IAAQ,IAAqB;EAK3E,AAHA,EAAO,MAAM,YAAY,GAAgB,OAAO,CAAK,CAAC,GACtD,EAAO,MAAM,YAAY,sCAAsC,EAAM,QAAQ,CAAC,CAAC,GAC/E,EAAO,MAAM,YAAY,sCAAsC,GAAG,EAAM,QAAQ,CAAC,EAAE,GAAG,GAClF,IAAQ,IACV,EAAO,UAAU,IAAI,iBAAiB,IAEtC,EAAO,UAAU,OAAO,iBAAiB;CAE7C;AACF;AAEA,SAAS,EAAqB,GAAc;CACpC,EAAM,kBAAkB,qBAE1B,EAAQ,OAAO,KAAG,EAAY;AACpC;AAEA,SAAS,IAAyB;CAC5B,AAEJ,OADA,SAAS,iBAAiB,SAAS,GAAsB,EAAI,GAClC;AAC7B;AAeA,IAAa,UACX,GAA6D,OAAQ;CACnE,WAAW;EACT,IAAM,IAAS,EAAI,UAAU;EACxB,MACL,EAAuB,GACvB,EAAQ,IAAI;GAAE;GAAQ,iBAAiB,EAAI,aAAa;EAAE,CAAC,GAC3D,EAAY;CACd;CAEA,aAAa;EACX,IAAM,IAAS,EAAI,UAAU;EAC7B,KAAK,IAAM,KAAS,GAClB,AAAI,EAAM,WAAW,KAAQ,EAAQ,OAAO,CAAK;EAGnD,AAAI,EAAQ,OAAO,KAAG,EAAY;CACpC;CAEA,UAAU;EACR,IAAM,IAAS,EAAI,UAAU;EAC7B,KAAK,IAAM,KAAS,GAClB,AAAI,EAAM,WAAW,KAAQ,EAAQ,OAAO,CAAK;EAEnD,AAAI,EAAQ,SAAS,KAAK,MACxB,SAAS,oBAAoB,SAAS,GAAsB,EAAI,GAChE,IAA2B;CAE/B;AACF,EAAE"}

package/dist/shared/overlay/overlay.js

@@ -57,7 +57,7 @@ var h = () => o((n) => {
 				strategy: r.strategy,
 				middleware: n
 			}).then(({ x: e, y: t, placement: n }) => {
-				i.style.left = `${e}px`, i.style.top = `${t}px`, i.style.setProperty("--wui-overlay-transform-origin", m(n));
+				i.style.left = `${e}px`, i.style.top = `${t}px`, i.style.setProperty("--wui-internal-overlay-transform-origin", m(n));
 			});
 		};
 		o(), s?.(), s = e(c, i, o);

package/dist/shared/overlay/overlay.js.map

@@ -1 +1 @@
-{"version":3,"file":"overlay.js","names":[],"sources":["../../../src/shared/overlay/overlay.ts"],"sourcesContent":["import {\n  autoUpdate,\n  computePosition,\n  flip,\n  offset,\n  shift,\n  size,\n  type Middleware,\n  type Placement,\n  type Strategy\n} from '@floating-ui/dom'\nimport { definePlugin } from '@greypan/js-kit'\n\nexport interface OverlayOptions {\n  placement?: Placement\n  offset?: number\n  flip?: boolean\n  shift?: boolean\n  /** 面板宽度与锚点宽度保持一致。 */\n  matchWidth?: boolean\n  /** 面板至少与锚点同宽，同时允许内容将面板撑宽。 */\n  minAnchorWidth?: boolean\n  strategy?: Strategy\n}\n\n/** 虚拟锚点：无对应 DOM 元素的定位基准（如右键菜单的鼠标坐标）。 */\nexport interface OverlayVirtualAnchor {\n  getBoundingClientRect(): DOMRect\n}\n\nexport type OverlayAnchor = HTMLElement | OverlayVirtualAnchor\n\nexport interface OverlayApi {\n  isOpen(): boolean\n  readonly options: Required<OverlayOptions>\n  open(): void\n  close(): void\n  toggle(): void\n  update(options: Partial<OverlayOptions>): void\n  updateAnchor(anchor: OverlayAnchor): void\n  dispose(): void\n}\n\nconst DEFAULT_OVERLAY_MIN_WIDTH = 120\nconst OVERLAY_MIN_WIDTH_VARIABLE = '--wui-overlay-min-width'\n\nconst DEFAULT_OPTIONS: Required<OverlayOptions> = {\n  placement: 'bottom-start',\n  offset: 4,\n  flip: true,\n  shift: true,\n  matchWidth: false,\n  minAnchorWidth: false,\n  strategy: 'absolute'\n}\n\ninterface WidthStyleState {\n  hasManagedStyles: boolean\n}\n\nfunction readOverlayMinWidth(overlay: HTMLElement): number {\n  if (typeof getComputedStyle !== 'function') return DEFAULT_OVERLAY_MIN_WIDTH\n\n  const minWidth = Number.parseFloat(getComputedStyle(overlay).getPropertyValue(OVERLAY_MIN_WIDTH_VARIABLE))\n  return Number.isFinite(minWidth) ? minWidth : DEFAULT_OVERLAY_MIN_WIDTH\n}\n\nfunction clearManagedWidthStyles(overlay: HTMLElement) {\n  overlay.style.removeProperty('width')\n  overlay.style.removeProperty('min-width')\n}\n\nfunction createWidthMiddleware(\n  overlay: HTMLElement,\n  options: Required<OverlayOptions>,\n  widthStyles: WidthStyleState\n): Middleware | undefined {\n  if (options.matchWidth) {\n    // matchWidth 必须移除之前 minAnchorWidth 写入的 min-width，才能精确跟随 trigger。\n    overlay.style.removeProperty('min-width')\n    widthStyles.hasManagedStyles = true\n    return size({\n      apply({ rects }) {\n        overlay.style.width = `${rects.reference.width}px`\n      }\n    })\n  }\n\n  if (options.minAnchorWidth) {\n    const minWidth = readOverlayMinWidth(overlay)\n    widthStyles.hasManagedStyles = true\n    return size({\n      apply({ rects }) {\n        // max-content 让内容决定宽度，min-width 再提供 trigger 与 floor 两个下限。\n        overlay.style.width = 'max-content'\n        overlay.style.minWidth = `${Math.max(rects.reference.width, minWidth)}px`\n      }\n    })\n  }\n\n  if (widthStyles.hasManagedStyles) {\n    clearManagedWidthStyles(overlay)\n    widthStyles.hasManagedStyles = false\n  }\n\n  return undefined\n}\n\nfunction createPositioningMiddleware(\n  overlay: HTMLElement,\n  options: Required<OverlayOptions>,\n  widthStyles: WidthStyleState\n): Middleware[] {\n  const middleware: Middleware[] = [offset(options.offset)]\n  if (options.flip) middleware.push(flip())\n  if (options.shift) middleware.push(shift({ padding: 8 }))\n\n  const widthMiddleware = createWidthMiddleware(overlay, options, widthStyles)\n  if (widthMiddleware) middleware.push(widthMiddleware)\n\n  return middleware\n}\n\nfunction getTransformOrigin(placement: Placement): string {\n  const [side, alignment] = placement.split('-')\n  const horizontalOrigin = alignment === 'start' ? 'left' : alignment === 'end' ? 'right' : 'center'\n  const verticalOrigin = alignment === 'start' ? 'top' : alignment === 'end' ? 'bottom' : 'center'\n\n  if (side === 'top') return `bottom ${horizontalOrigin}`\n  if (side === 'bottom') return `top ${horizontalOrigin}`\n  if (side === 'left') return `right ${verticalOrigin}`\n  return `left ${verticalOrigin}`\n}\n\nexport const defineOverlay = () =>\n  definePlugin<OverlayApi, { anchor: OverlayAnchor; overlay: HTMLElement } & OverlayOptions>(ctx => {\n    const options: Required<OverlayOptions> = {\n      placement: ctx.placement ?? DEFAULT_OPTIONS.placement,\n      offset: ctx.offset ?? DEFAULT_OPTIONS.offset,\n      flip: ctx.flip ?? DEFAULT_OPTIONS.flip,\n      shift: ctx.shift ?? DEFAULT_OPTIONS.shift,\n      matchWidth: ctx.matchWidth ?? DEFAULT_OPTIONS.matchWidth,\n      minAnchorWidth: ctx.minAnchorWidth ?? DEFAULT_OPTIONS.minAnchorWidth,\n      strategy: ctx.strategy ?? DEFAULT_OPTIONS.strategy\n    }\n\n    const overlay = ctx.overlay\n    const widthStyles: WidthStyleState = { hasManagedStyles: false }\n    let isOpen = false\n    let cleanupAutoUpdate: (() => void) | null = null\n    let currentAnchor = ctx.anchor\n\n    function updatePosition() {\n      const middleware = createPositioningMiddleware(overlay, options, widthStyles)\n\n      const applyPosition = () => {\n        void computePosition(currentAnchor, overlay, {\n          placement: options.placement,\n          strategy: options.strategy,\n          middleware\n        }).then(({ x, y, placement }) => {\n          overlay.style.left = `${x}px`\n          overlay.style.top = `${y}px`\n          overlay.style.setProperty('--wui-overlay-transform-origin', getTransformOrigin(placement))\n        })\n      }\n\n      // 立即定位一次，避免浮层首帧出现在左上角；autoUpdate 负责后续滚动/尺寸变化。\n      applyPosition()\n      cleanupAutoUpdate?.()\n      cleanupAutoUpdate = autoUpdate(currentAnchor, overlay, applyPosition)\n    }\n\n    return {\n      isOpen() {\n        return isOpen\n      },\n      options,\n\n      open() {\n        if (isOpen) return\n        isOpen = true\n        overlay.style.display = ''\n        updatePosition()\n      },\n\n      close() {\n        if (!isOpen) return\n        isOpen = false\n        cleanupAutoUpdate?.()\n        cleanupAutoUpdate = null\n      },\n\n      toggle() {\n        if (isOpen) this.close()\n        else this.open()\n      },\n\n      update(nextOptions) {\n        Object.assign(options, nextOptions)\n        if (isOpen) updatePosition()\n      },\n\n      updateAnchor(newAnchor: OverlayAnchor) {\n        currentAnchor = newAnchor\n        if (isOpen) updatePosition()\n      },\n\n      dispose() {\n        this.close()\n      }\n    }\n  })\n"],"mappings":"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"}
+{"version":3,"file":"overlay.js","names":[],"sources":["../../../src/shared/overlay/overlay.ts"],"sourcesContent":["import {\n  autoUpdate,\n  computePosition,\n  flip,\n  offset,\n  shift,\n  size,\n  type Middleware,\n  type Placement,\n  type Strategy\n} from '@floating-ui/dom'\nimport { definePlugin } from '@greypan/js-kit'\n\nexport interface OverlayOptions {\n  placement?: Placement\n  offset?: number\n  flip?: boolean\n  shift?: boolean\n  /** 面板宽度与锚点宽度保持一致。 */\n  matchWidth?: boolean\n  /** 面板至少与锚点同宽，同时允许内容将面板撑宽。 */\n  minAnchorWidth?: boolean\n  strategy?: Strategy\n}\n\n/** 虚拟锚点：无对应 DOM 元素的定位基准（如右键菜单的鼠标坐标）。 */\nexport interface OverlayVirtualAnchor {\n  getBoundingClientRect(): DOMRect\n}\n\nexport type OverlayAnchor = HTMLElement | OverlayVirtualAnchor\n\nexport interface OverlayApi {\n  isOpen(): boolean\n  readonly options: Required<OverlayOptions>\n  open(): void\n  close(): void\n  toggle(): void\n  update(options: Partial<OverlayOptions>): void\n  updateAnchor(anchor: OverlayAnchor): void\n  dispose(): void\n}\n\nconst DEFAULT_OVERLAY_MIN_WIDTH = 120\nconst OVERLAY_MIN_WIDTH_VARIABLE = '--wui-overlay-min-width'\n\nconst DEFAULT_OPTIONS: Required<OverlayOptions> = {\n  placement: 'bottom-start',\n  offset: 4,\n  flip: true,\n  shift: true,\n  matchWidth: false,\n  minAnchorWidth: false,\n  strategy: 'absolute'\n}\n\ninterface WidthStyleState {\n  hasManagedStyles: boolean\n}\n\nfunction readOverlayMinWidth(overlay: HTMLElement): number {\n  if (typeof getComputedStyle !== 'function') return DEFAULT_OVERLAY_MIN_WIDTH\n\n  const minWidth = Number.parseFloat(getComputedStyle(overlay).getPropertyValue(OVERLAY_MIN_WIDTH_VARIABLE))\n  return Number.isFinite(minWidth) ? minWidth : DEFAULT_OVERLAY_MIN_WIDTH\n}\n\nfunction clearManagedWidthStyles(overlay: HTMLElement) {\n  overlay.style.removeProperty('width')\n  overlay.style.removeProperty('min-width')\n}\n\nfunction createWidthMiddleware(\n  overlay: HTMLElement,\n  options: Required<OverlayOptions>,\n  widthStyles: WidthStyleState\n): Middleware | undefined {\n  if (options.matchWidth) {\n    // matchWidth 必须移除之前 minAnchorWidth 写入的 min-width，才能精确跟随 trigger。\n    overlay.style.removeProperty('min-width')\n    widthStyles.hasManagedStyles = true\n    return size({\n      apply({ rects }) {\n        overlay.style.width = `${rects.reference.width}px`\n      }\n    })\n  }\n\n  if (options.minAnchorWidth) {\n    const minWidth = readOverlayMinWidth(overlay)\n    widthStyles.hasManagedStyles = true\n    return size({\n      apply({ rects }) {\n        // max-content 让内容决定宽度，min-width 再提供 trigger 与 floor 两个下限。\n        overlay.style.width = 'max-content'\n        overlay.style.minWidth = `${Math.max(rects.reference.width, minWidth)}px`\n      }\n    })\n  }\n\n  if (widthStyles.hasManagedStyles) {\n    clearManagedWidthStyles(overlay)\n    widthStyles.hasManagedStyles = false\n  }\n\n  return undefined\n}\n\nfunction createPositioningMiddleware(\n  overlay: HTMLElement,\n  options: Required<OverlayOptions>,\n  widthStyles: WidthStyleState\n): Middleware[] {\n  const middleware: Middleware[] = [offset(options.offset)]\n  if (options.flip) middleware.push(flip())\n  if (options.shift) middleware.push(shift({ padding: 8 }))\n\n  const widthMiddleware = createWidthMiddleware(overlay, options, widthStyles)\n  if (widthMiddleware) middleware.push(widthMiddleware)\n\n  return middleware\n}\n\nfunction getTransformOrigin(placement: Placement): string {\n  const [side, alignment] = placement.split('-')\n  const horizontalOrigin = alignment === 'start' ? 'left' : alignment === 'end' ? 'right' : 'center'\n  const verticalOrigin = alignment === 'start' ? 'top' : alignment === 'end' ? 'bottom' : 'center'\n\n  if (side === 'top') return `bottom ${horizontalOrigin}`\n  if (side === 'bottom') return `top ${horizontalOrigin}`\n  if (side === 'left') return `right ${verticalOrigin}`\n  return `left ${verticalOrigin}`\n}\n\nexport const defineOverlay = () =>\n  definePlugin<OverlayApi, { anchor: OverlayAnchor; overlay: HTMLElement } & OverlayOptions>(ctx => {\n    const options: Required<OverlayOptions> = {\n      placement: ctx.placement ?? DEFAULT_OPTIONS.placement,\n      offset: ctx.offset ?? DEFAULT_OPTIONS.offset,\n      flip: ctx.flip ?? DEFAULT_OPTIONS.flip,\n      shift: ctx.shift ?? DEFAULT_OPTIONS.shift,\n      matchWidth: ctx.matchWidth ?? DEFAULT_OPTIONS.matchWidth,\n      minAnchorWidth: ctx.minAnchorWidth ?? DEFAULT_OPTIONS.minAnchorWidth,\n      strategy: ctx.strategy ?? DEFAULT_OPTIONS.strategy\n    }\n\n    const overlay = ctx.overlay\n    const widthStyles: WidthStyleState = { hasManagedStyles: false }\n    let isOpen = false\n    let cleanupAutoUpdate: (() => void) | null = null\n    let currentAnchor = ctx.anchor\n\n    function updatePosition() {\n      const middleware = createPositioningMiddleware(overlay, options, widthStyles)\n\n      const applyPosition = () => {\n        void computePosition(currentAnchor, overlay, {\n          placement: options.placement,\n          strategy: options.strategy,\n          middleware\n        }).then(({ x, y, placement }) => {\n          overlay.style.left = `${x}px`\n          overlay.style.top = `${y}px`\n          overlay.style.setProperty('--wui-internal-overlay-transform-origin', getTransformOrigin(placement))\n        })\n      }\n\n      // 立即定位一次，避免浮层首帧出现在左上角；autoUpdate 负责后续滚动/尺寸变化。\n      applyPosition()\n      cleanupAutoUpdate?.()\n      cleanupAutoUpdate = autoUpdate(currentAnchor, overlay, applyPosition)\n    }\n\n    return {\n      isOpen() {\n        return isOpen\n      },\n      options,\n\n      open() {\n        if (isOpen) return\n        isOpen = true\n        overlay.style.display = ''\n        updatePosition()\n      },\n\n      close() {\n        if (!isOpen) return\n        isOpen = false\n        cleanupAutoUpdate?.()\n        cleanupAutoUpdate = null\n      },\n\n      toggle() {\n        if (isOpen) this.close()\n        else this.open()\n      },\n\n      update(nextOptions) {\n        Object.assign(options, nextOptions)\n        if (isOpen) updatePosition()\n      },\n\n      updateAnchor(newAnchor: OverlayAnchor) {\n        currentAnchor = newAnchor\n        if (isOpen) updatePosition()\n      },\n\n      dispose() {\n        this.close()\n      }\n    }\n  })\n"],"mappings":"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"}

package/dist/shared/overlay/portal.js

@@ -2,42 +2,76 @@ import { getFallbackOverlayRoot as e } from "../theme/overlay-root.js";
 import { findNearestTheme as t, findRootTheme as n } from "../theme/theme-scope.js";
 import { definePlugin as r } from "@greypan/js-kit";
 //#region src/shared/overlay/portal.ts
-var i = () => r((e) => {
+function i(e, t, n) {
+	let r = getComputedStyle(t);
+	for (let t of n) {
+		let n = r.getPropertyValue(t).trim();
+		n && e.style.setProperty(t, n);
+	}
+}
+var a = () => r((e) => {
 	let t = document.createElement("div");
 	t.style.display = "contents";
 	let n = t.attachShadow({ mode: "open" }), r = document.createElement("style");
 	r.textContent = e.style;
 	let i = document.createElement("div");
-	i.className = e.className, i.dataset.wuiPresence = "entering", n.append(r, i), a(e.container, e.target).appendChild(t);
-	let o = [], s = (e) => {
+	i.className = e.className, i.dataset.wuiPresence = "entering", n.append(r, i);
+	let a = [], o = new MutationObserver((t) => e.onContentChange?.(t)), s = (e) => {
 		e.forEach((e) => {
-			let t = o.indexOf(e);
-			t >= 0 && o.splice(t, 1);
+			let t = a.indexOf(e);
+			t >= 0 && a.splice(t, 1);
 		});
 	};
-	return {
+	return c(e.container, e.target).appendChild(t), e.onContentChange && o.observe(i, {
+		childList: !0,
+		subtree: !0
+	}), {
 		panel: i,
 		moveContent(e, t = i) {
-			o.splice(0, o.length, ...e), t.append(...o);
+			a.splice(0, a.length, ...e), t.append(...a);
 		},
 		appendContent(e, t = i) {
-			s(e), o.push(...e), t.append(...e);
+			s(e), a.push(...e), t.append(...e);
 		},
 		removeContent(e) {
 			s(e);
 		},
 		restoreContent() {
-			e.target.append(...o), o.length = 0;
+			e.target.append(...a), a.length = 0;
 		},
 		remove() {
-			t.remove();
+			o.disconnect(), t.remove();
 		}
 	};
 });
-function a(r, i, a = {}) {
-	return (typeof r == "function" ? r() : r) || ((a.preferRootTheme ? n() : t(i))?.getOverlayRoot() ?? e());
+function o(e, t, n) {
+	let r = e;
+	for (; r && r !== n;) {
+		if (r === t) return !0;
+		r = r.parentNode;
+	}
+	return !1;
+}
+function s(e) {
+	let t = e;
+	for (; t && t !== document.documentElement;) {
+		if (t instanceof HTMLDialogElement && t.open) return t;
+		if (t instanceof Element && t.shadowRoot) {
+			let n = t.shadowRoot.querySelectorAll("dialog");
+			for (let r of n) {
+				if (!(r instanceof HTMLDialogElement) || !r.open) continue;
+				let n = r.querySelectorAll("slot");
+				for (let i of n) for (let n of i.assignedNodes()) if (n instanceof Node && o(e, n, t)) return r;
+			}
+		}
+		t = t.parentNode;
+	}
+	return null;
+}
+function c(r, i, a = {}) {
+	return (typeof r == "function" ? r() : r) || s(i) || ((a.preferRootTheme ? n() : t(i))?.getOverlayRoot() ?? e());
 }
 //#endregion
-export { i as defineOverlayPortal, a as resolveOverlayContainer };
+export { i as applyOverlayVariables, a as defineOverlayPortal, c as resolveOverlayContainer };
 
 //# sourceMappingURL=portal.js.map

package/dist/shared/overlay/portal.js.map

@@ -1 +1 @@
-{"version":3,"file":"portal.js","names":[],"sources":["../../../src/shared/overlay/portal.ts"],"sourcesContent":["import { definePlugin } from '@greypan/js-kit'\n\nimport { getFallbackOverlayRoot } from '@/shared/theme/overlay-root'\nimport { findNearestTheme, findRootTheme } from '@/shared/theme/theme-scope'\n\nexport type OverlayContainer = HTMLElement | (() => HTMLElement | undefined)\n\nexport interface OverlayContainerResolutionOptions {\n  /** 无 target 时优先使用文档中的 root theme。 */\n  preferRootTheme?: boolean\n}\n\nexport interface OverlayPortalOptions {\n  container?: OverlayContainer\n  target: Element\n  style: string\n  className: string\n}\n\nexport interface OverlayPortal {\n  readonly panel: HTMLElement\n  restoreContent(): void\n  moveContent(nodes: Node[], target?: HTMLElement): void\n  appendContent(nodes: Node[], target?: HTMLElement): void\n  removeContent(nodes: Node[]): void\n  remove(): void\n}\n\n/**\n * 构建带 Shadow DOM 样式边界的 Portal 面板，并追踪被迁移的内容节点以便恢复。\n */\nexport const defineOverlayPortal = () =>\n  definePlugin<OverlayPortal, OverlayPortalOptions>(ctx => {\n    const host = document.createElement('div')\n    // :host 规则可能让宿主在 overlay 容器中生成行盒；display: contents 保留面板定位而不参与布局。\n    host.style.display = 'contents'\n\n    const root = host.attachShadow({ mode: 'open' })\n    const style = document.createElement('style')\n    style.textContent = ctx.style\n    const panel = document.createElement('div')\n    panel.className = ctx.className\n    panel.dataset.wuiPresence = 'entering'\n    root.append(style, panel)\n\n    resolveOverlayContainer(ctx.container, ctx.target).appendChild(host)\n\n    const trackedNodes: Node[] = []\n    const untrackNodes = (nodes: Node[]) => {\n      nodes.forEach(node => {\n        const index = trackedNodes.indexOf(node)\n        if (index >= 0) trackedNodes.splice(index, 1)\n      })\n    }\n\n    return {\n      panel,\n\n      moveContent(nodes, target = panel) {\n        trackedNodes.splice(0, trackedNodes.length, ...nodes)\n        target.append(...trackedNodes)\n      },\n\n      appendContent(nodes, target = panel) {\n        untrackNodes(nodes)\n        trackedNodes.push(...nodes)\n        target.append(...nodes)\n      },\n\n      removeContent(nodes) {\n        untrackNodes(nodes)\n      },\n\n      restoreContent() {\n        ctx.target.append(...trackedNodes)\n        trackedNodes.length = 0\n      },\n\n      remove() {\n        host.remove()\n      }\n    }\n  })\n\nexport function resolveOverlayContainer(\n  container: OverlayContainer | undefined,\n  target: Element,\n  options: OverlayContainerResolutionOptions = {}\n): HTMLElement {\n  const explicit = typeof container === 'function' ? container() : container\n  if (explicit) return explicit\n\n  // 无 target 的调用（如菜单）优先使用 root theme；有 target 时使用最近的 theme。\n  const theme = options.preferRootTheme ? findRootTheme() : findNearestTheme(target)\n  return theme?.getOverlayRoot() ?? getFallbackOverlayRoot()\n}\n"],"mappings":";;;;AA+BA,IAAa,UACX,GAAkD,MAAO;CACvD,IAAM,IAAO,SAAS,cAAc,KAAK;CAEzC,EAAK,MAAM,UAAU;CAErB,IAAM,IAAO,EAAK,aAAa,EAAE,MAAM,OAAO,CAAC,GACzC,IAAQ,SAAS,cAAc,OAAO;CAC5C,EAAM,cAAc,EAAI;CACxB,IAAM,IAAQ,SAAS,cAAc,KAAK;CAK1C,AAJA,EAAM,YAAY,EAAI,WACtB,EAAM,QAAQ,cAAc,YAC5B,EAAK,OAAO,GAAO,CAAK,GAExB,EAAwB,EAAI,WAAW,EAAI,MAAM,CAAC,CAAC,YAAY,CAAI;CAEnE,IAAM,IAAuB,CAAC,GACxB,KAAgB,MAAkB;EACtC,EAAM,SAAQ,MAAQ;GACpB,IAAM,IAAQ,EAAa,QAAQ,CAAI;GACvC,AAAI,KAAS,KAAG,EAAa,OAAO,GAAO,CAAC;EAC9C,CAAC;CACH;CAEA,OAAO;EACL;EAEA,YAAY,GAAO,IAAS,GAAO;GAEjC,AADA,EAAa,OAAO,GAAG,EAAa,QAAQ,GAAG,CAAK,GACpD,EAAO,OAAO,GAAG,CAAY;EAC/B;EAEA,cAAc,GAAO,IAAS,GAAO;GAGnC,AAFA,EAAa,CAAK,GAClB,EAAa,KAAK,GAAG,CAAK,GAC1B,EAAO,OAAO,GAAG,CAAK;EACxB;EAEA,cAAc,GAAO;GACnB,EAAa,CAAK;EACpB;EAEA,iBAAiB;GAEf,AADA,EAAI,OAAO,OAAO,GAAG,CAAY,GACjC,EAAa,SAAS;EACxB;EAEA,SAAS;GACP,EAAK,OAAO;EACd;CACF;AACF,CAAC;AAEH,SAAgB,EACd,GACA,GACA,IAA6C,CAAC,GACjC;CAMb,QALiB,OAAO,KAAc,aAAa,EAAU,IAAI,QAInD,EAAQ,kBAAkB,EAAc,IAAI,EAAiB,CAAM,EAAA,EACnE,eAAe,KAAK,EAAuB;AAC3D"}
+{"version":3,"file":"portal.js","names":[],"sources":["../../../src/shared/overlay/portal.ts"],"sourcesContent":["import { definePlugin } from '@greypan/js-kit'\n\nimport { getFallbackOverlayRoot } from '@/shared/theme/overlay-root'\nimport { findNearestTheme, findRootTheme } from '@/shared/theme/theme-scope'\n\nexport type OverlayContainer = HTMLElement | (() => HTMLElement | undefined)\n\nexport interface OverlayContainerResolutionOptions {\n  /** 无 target 时优先使用文档中的 root theme。 */\n  preferRootTheme?: boolean\n}\n\nexport interface OverlayPortalOptions {\n  container?: OverlayContainer\n  target: Element\n  style: string\n  className: string\n  onContentChange?: (mutations: MutationRecord[]) => void\n}\n\nexport interface OverlayPortal {\n  readonly panel: HTMLElement\n  restoreContent(): void\n  moveContent(nodes: Node[], target?: HTMLElement): void\n  appendContent(nodes: Node[], target?: HTMLElement): void\n  removeContent(nodes: Node[]): void\n  remove(): void\n}\n\n/**\n * Portal 面板位于独立 shadow root，宿主上的 CSS 自定义属性不会沿渲染树继承到 panel。\n * 这里在创建时镜像锚点解析后的变量，让组件 host 上的尺寸配置对 portal 仍然生效。\n */\nexport function applyOverlayVariables(panel: HTMLElement, source: Element, variables: readonly string[]): void {\n  const computedStyle = getComputedStyle(source)\n  for (const variable of variables) {\n    const value = computedStyle.getPropertyValue(variable).trim()\n    if (value) panel.style.setProperty(variable, value)\n  }\n}\n\n/**\n * 构建带 Shadow DOM 样式边界的 Portal 面板，并追踪被迁移的内容节点以便恢复。\n */\nexport const defineOverlayPortal = () =>\n  definePlugin<OverlayPortal, OverlayPortalOptions>(ctx => {\n    const host = document.createElement('div')\n    // :host 规则可能让宿主在 overlay 容器中生成行盒；display: contents 保留面板定位而不参与布局。\n    host.style.display = 'contents'\n\n    const root = host.attachShadow({ mode: 'open' })\n    const style = document.createElement('style')\n    style.textContent = ctx.style\n    const panel = document.createElement('div')\n    panel.className = ctx.className\n    panel.dataset.wuiPresence = 'entering'\n    root.append(style, panel)\n\n    const trackedNodes: Node[] = []\n    const contentObserver = new MutationObserver(mutations => ctx.onContentChange?.(mutations))\n    const untrackNodes = (nodes: Node[]) => {\n      nodes.forEach(node => {\n        const index = trackedNodes.indexOf(node)\n        if (index >= 0) trackedNodes.splice(index, 1)\n      })\n    }\n\n    resolveOverlayContainer(ctx.container, ctx.target).appendChild(host)\n    if (ctx.onContentChange) contentObserver.observe(panel, { childList: true, subtree: true })\n\n    return {\n      panel,\n\n      moveContent(nodes, target = panel) {\n        trackedNodes.splice(0, trackedNodes.length, ...nodes)\n        target.append(...trackedNodes)\n      },\n\n      appendContent(nodes, target = panel) {\n        untrackNodes(nodes)\n        trackedNodes.push(...nodes)\n        target.append(...nodes)\n      },\n\n      removeContent(nodes) {\n        untrackNodes(nodes)\n      },\n\n      restoreContent() {\n        ctx.target.append(...trackedNodes)\n        trackedNodes.length = 0\n      },\n\n      remove() {\n        contentObserver.disconnect()\n        host.remove()\n      }\n    }\n  })\n\n/**\n * 判断 node 是否是 slot 已分配节点（或其 light DOM 后代），即 node 实际渲染在 shadowRoot 内。\n * slotted 内容的 parentNode 仍停留在 light DOM，因此不能用普通祖先遍历跨过 shadow 边界，\n * 只能通过 slot.assignedNodes() 判断内容被渲染到哪个 slot。\n */\nfunction isAssignedIntoTarget(node: Node, assignedNode: Node, boundary: Node): boolean {\n  let current: Node | null = node\n  while (current && current !== boundary) {\n    if (current === assignedNode) return true\n    current = current.parentNode\n  }\n  return false\n}\n\n/**\n * 查找包含 target 且处于打开态的最近原生 <dialog>。\n * 原生 showModal() 会把 dialog 提升到浏览器 top layer，而常规 overlay 容器在普通文档流，\n * 二者无法靠 z-index 叠序——overlay 会被 top layer 的 dialog 遮住。\n * 因此 target 被渲染到某个已打开的原生 dialog 内时，应把 overlay 挂到该 dialog 上，\n * 使其一并进入 top layer（抽屉 / 对话框内的 dropdown、tooltip、context-menu 均适用）。\n */\nfunction findEnclosingOpenDialog(target: Element): HTMLDialogElement | null {\n  let current: Node | null = target\n  while (current && current !== document.documentElement) {\n    if (current instanceof HTMLDialogElement && current.open) return current\n\n    // 跨过 shadow host：检查其 shadowRoot 内已打开的 dialog 是否渲染了 target。\n    if (current instanceof Element && current.shadowRoot) {\n      const dialogs = current.shadowRoot.querySelectorAll('dialog')\n      for (const dialog of dialogs) {\n        if (!(dialog instanceof HTMLDialogElement) || !dialog.open) continue\n        const slots = dialog.querySelectorAll('slot')\n        for (const slot of slots) {\n          for (const assigned of slot.assignedNodes()) {\n            if (!(assigned instanceof Node)) continue\n            if (isAssignedIntoTarget(target, assigned, current)) return dialog\n          }\n        }\n      }\n    }\n\n    current = current.parentNode\n  }\n  return null\n}\n\nexport function resolveOverlayContainer(\n  container: OverlayContainer | undefined,\n  target: Element,\n  options: OverlayContainerResolutionOptions = {}\n): HTMLElement {\n  const explicit = typeof container === 'function' ? container() : container\n  if (explicit) return explicit\n\n  // target 在已打开的原生 dialog / drawer 内：挂到该 dialog，加入 top layer。\n  const enclosingDialog = findEnclosingOpenDialog(target)\n  if (enclosingDialog) return enclosingDialog\n\n  // 无 target 的调用（如菜单）优先使用 root theme；有 target 时使用最近的 theme。\n  const theme = options.preferRootTheme ? findRootTheme() : findNearestTheme(target)\n  return theme?.getOverlayRoot() ?? getFallbackOverlayRoot()\n}\n"],"mappings":";;;;AAiCA,SAAgB,EAAsB,GAAoB,GAAiB,GAAoC;CAC7G,IAAM,IAAgB,iBAAiB,CAAM;CAC7C,KAAK,IAAM,KAAY,GAAW;EAChC,IAAM,IAAQ,EAAc,iBAAiB,CAAQ,CAAC,CAAC,KAAK;EAC5D,AAAI,KAAO,EAAM,MAAM,YAAY,GAAU,CAAK;CACpD;AACF;AAKA,IAAa,UACX,GAAkD,MAAO;CACvD,IAAM,IAAO,SAAS,cAAc,KAAK;CAEzC,EAAK,MAAM,UAAU;CAErB,IAAM,IAAO,EAAK,aAAa,EAAE,MAAM,OAAO,CAAC,GACzC,IAAQ,SAAS,cAAc,OAAO;CAC5C,EAAM,cAAc,EAAI;CACxB,IAAM,IAAQ,SAAS,cAAc,KAAK;CAG1C,AAFA,EAAM,YAAY,EAAI,WACtB,EAAM,QAAQ,cAAc,YAC5B,EAAK,OAAO,GAAO,CAAK;CAExB,IAAM,IAAuB,CAAC,GACxB,IAAkB,IAAI,kBAAiB,MAAa,EAAI,kBAAkB,CAAS,CAAC,GACpF,KAAgB,MAAkB;EACtC,EAAM,SAAQ,MAAQ;GACpB,IAAM,IAAQ,EAAa,QAAQ,CAAI;GACvC,AAAI,KAAS,KAAG,EAAa,OAAO,GAAO,CAAC;EAC9C,CAAC;CACH;CAKA,OAHA,EAAwB,EAAI,WAAW,EAAI,MAAM,CAAC,CAAC,YAAY,CAAI,GAC/D,EAAI,mBAAiB,EAAgB,QAAQ,GAAO;EAAE,WAAW;EAAM,SAAS;CAAK,CAAC,GAEnF;EACL;EAEA,YAAY,GAAO,IAAS,GAAO;GAEjC,AADA,EAAa,OAAO,GAAG,EAAa,QAAQ,GAAG,CAAK,GACpD,EAAO,OAAO,GAAG,CAAY;EAC/B;EAEA,cAAc,GAAO,IAAS,GAAO;GAGnC,AAFA,EAAa,CAAK,GAClB,EAAa,KAAK,GAAG,CAAK,GAC1B,EAAO,OAAO,GAAG,CAAK;EACxB;EAEA,cAAc,GAAO;GACnB,EAAa,CAAK;EACpB;EAEA,iBAAiB;GAEf,AADA,EAAI,OAAO,OAAO,GAAG,CAAY,GACjC,EAAa,SAAS;EACxB;EAEA,SAAS;GAEP,AADA,EAAgB,WAAW,GAC3B,EAAK,OAAO;EACd;CACF;AACF,CAAC;AAOH,SAAS,EAAqB,GAAY,GAAoB,GAAyB;CACrF,IAAI,IAAuB;CAC3B,OAAO,KAAW,MAAY,IAAU;EACtC,IAAI,MAAY,GAAc,OAAO;EACrC,IAAU,EAAQ;CACpB;CACA,OAAO;AACT;AASA,SAAS,EAAwB,GAA2C;CAC1E,IAAI,IAAuB;CAC3B,OAAO,KAAW,MAAY,SAAS,kBAAiB;EACtD,IAAI,aAAmB,qBAAqB,EAAQ,MAAM,OAAO;EAGjE,IAAI,aAAmB,WAAW,EAAQ,YAAY;GACpD,IAAM,IAAU,EAAQ,WAAW,iBAAiB,QAAQ;GAC5D,KAAK,IAAM,KAAU,GAAS;IAC5B,IAAI,EAAE,aAAkB,sBAAsB,CAAC,EAAO,MAAM;IAC5D,IAAM,IAAQ,EAAO,iBAAiB,MAAM;IAC5C,KAAK,IAAM,KAAQ,GACjB,KAAK,IAAM,KAAY,EAAK,cAAc,GAClC,iBAAoB,QACtB,EAAqB,GAAQ,GAAU,CAAO,GAAG,OAAO;GAGlE;EACF;EAEA,IAAU,EAAQ;CACpB;CACA,OAAO;AACT;AAEA,SAAgB,EACd,GACA,GACA,IAA6C,CAAC,GACjC;CAUb,QATiB,OAAO,KAAc,aAAa,EAAU,IAAI,MAIzC,EAAwB,CAC5C,OAGU,EAAQ,kBAAkB,EAAc,IAAI,EAAiB,CAAM,EAAA,EACnE,eAAe,KAAK,EAAuB;AAC3D"}

package/dist/shared/overlay/presence.js.map

@@ -1 +1 @@
-{"version":3,"file":"presence.js","names":[],"sources":["../../../src/shared/overlay/presence.ts"],"sourcesContent":["const DEFAULT_EXIT_DURATION = 160\nconst EXIT_FALLBACK_BUFFER = 80\n\nconst pendingExits = new WeakMap<HTMLElement, () => void>()\n\ninterface OverlayPresenceOptions {\n  isInstant?: boolean\n}\n\nfunction parseDuration(value: string): number {\n  const trimmed = value.trim()\n  if (trimmed.endsWith('ms')) return Number.parseFloat(trimmed)\n  if (trimmed.endsWith('s')) return Number.parseFloat(trimmed) * 1000\n  return 0\n}\n\n// 读取元素实际 CSS transition 的最长时长，供可覆盖主题 token 的 JS 生命周期使用。\nexport function getTransitionDuration(panel: HTMLElement, fallback = DEFAULT_EXIT_DURATION): number {\n  const style = getComputedStyle(panel)\n  const durations = style.transitionDuration.split(',').map(parseDuration)\n  const delays = style.transitionDelay.split(',').map(parseDuration)\n  const longest = durations.reduce(\n    (max, duration, index) => Math.max(max, duration + (delays[index] ?? delays[0] ?? 0)),\n    0\n  )\n\n  return longest || fallback\n}\n\n// 以可中断的方式显示浮层，避免快速切换时重启动画。\nexport function showOverlayPresence(panel: HTMLElement, options: OverlayPresenceOptions = {}) {\n  pendingExits.get(panel)?.()\n  panel.hidden = false\n  if (options.isInstant) {\n    panel.dataset.wuiPresence = 'open'\n    return\n  }\n  panel.dataset.wuiPresence = 'entering'\n\n  // Commit the initial state so a newly mounted panel has a transition source.\n  void panel.offsetWidth\n\n  requestAnimationFrame(() => {\n    if (panel.dataset.wuiPresence === 'entering') panel.dataset.wuiPresence = 'open'\n  })\n}\n\n// 播放退出过渡；若在结束前重新显示则返回 false。\nexport function hideOverlayPresence(panel: HTMLElement): Promise<boolean> {\n  pendingExits.get(panel)?.()\n  panel.dataset.wuiPresence = 'closing'\n\n  // jsdom 等没有计算 CSS transition 的环境无需伪造退场等待。\n  if (getTransitionDuration(panel, 0) === 0) {\n    panel.hidden = true\n    return Promise.resolve(true)\n  }\n\n  return new Promise(resolve => {\n    let settled = false\n    const finish = (didClose: boolean) => {\n      if (settled) return\n      settled = true\n      panel.removeEventListener('transitionend', onTransitionEnd)\n      clearTimeout(timeout)\n      pendingExits.delete(panel)\n      if (didClose && panel.dataset.wuiPresence === 'closing') panel.hidden = true\n      resolve(didClose)\n    }\n\n    const onTransitionEnd = (event: TransitionEvent) => {\n      if (event.target === panel && (event.propertyName === 'opacity' || event.propertyName === 'transform'))\n        finish(true)\n    }\n\n    pendingExits.set(panel, () => finish(false))\n    panel.addEventListener('transitionend', onTransitionEnd)\n    const timeout = setTimeout(() => finish(true), getTransitionDuration(panel) + EXIT_FALLBACK_BUFFER)\n  })\n}\n"],"mappings":";AAAA,IAGM,oBAAe,IAAI,QAAiC;AAM1D,SAAS,EAAc,GAAuB;CAC5C,IAAM,IAAU,EAAM,KAAK;CAG3B,OAFI,EAAQ,SAAS,IAAI,IAAU,OAAO,WAAW,CAAO,IACxD,EAAQ,SAAS,GAAG,IAAU,OAAO,WAAW,CAAO,IAAI,MACxD;AACT;AAGA,SAAgB,EAAsB,GAAoB,IAAW,KAA+B;CAClG,IAAM,IAAQ,iBAAiB,CAAK,GAC9B,IAAY,EAAM,mBAAmB,MAAM,GAAG,CAAC,CAAC,IAAI,CAAa,GACjE,IAAS,EAAM,gBAAgB,MAAM,GAAG,CAAC,CAAC,IAAI,CAAa;CAMjE,OALgB,EAAU,QACvB,GAAK,GAAU,MAAU,KAAK,IAAI,GAAK,KAAY,EAAO,MAAU,EAAO,MAAM,EAAE,GACpF,CAGK,KAAW;AACpB;AAGA,SAAgB,EAAoB,GAAoB,IAAkC,CAAC,GAAG;CAG5F,IAFA,EAAa,IAAI,CAAK,CAAC,GAAG,GAC1B,EAAM,SAAS,IACX,EAAQ,WAAW;EACrB,EAAM,QAAQ,cAAc;EAC5B;CACF;CAMA,AALA,EAAM,QAAQ,cAAc,YAG5B,EAAW,aAEX,4BAA4B;EAC1B,AAAI,EAAM,QAAQ,gBAAgB,eAAY,EAAM,QAAQ,cAAc;CAC5E,CAAC;AACH;AAGA,SAAgB,EAAoB,GAAsC;CAUxE,OATA,EAAa,IAAI,CAAK,CAAC,GAAG,GAC1B,EAAM,QAAQ,cAAc,WAGxB,EAAsB,GAAO,CAAC,MAAM,KACtC,EAAM,SAAS,IACR,QAAQ,QAAQ,EAAI,KAGtB,IAAI,SAAQ,MAAW;EAC5B,IAAI,IAAU,IACR,KAAU,MAAsB;GAChC,MACJ,IAAU,IACV,EAAM,oBAAoB,iBAAiB,CAAe,GAC1D,aAAa,CAAO,GACpB,EAAa,OAAO,CAAK,GACrB,KAAY,EAAM,QAAQ,gBAAgB,cAAW,EAAM,SAAS,KACxE,EAAQ,CAAQ;EAClB,GAEM,KAAmB,MAA2B;GAClD,AAAI,EAAM,WAAW,MAAU,EAAM,iBAAiB,aAAa,EAAM,iBAAiB,gBACxF,EAAO,EAAI;EACf;EAGA,AADA,EAAa,IAAI,SAAa,EAAO,EAAK,CAAC,GAC3C,EAAM,iBAAiB,iBAAiB,CAAe;EACvD,IAAM,IAAU,iBAAiB,EAAO,EAAI,GAAG,EAAsB,CAAK,IAAI,EAAoB;CACpG,CAAC;AACH"}
+{"version":3,"file":"presence.js","names":[],"sources":["../../../src/shared/overlay/presence.ts"],"sourcesContent":["const DEFAULT_EXIT_DURATION = 160\nconst EXIT_FALLBACK_BUFFER = 80\n\nconst pendingExits = new WeakMap<HTMLElement, () => void>()\n\ninterface OverlayPresenceOptions {\n  isInstant?: boolean\n}\n\nfunction parseDuration(value: string): number {\n  const trimmed = value.trim()\n  if (trimmed.endsWith('ms')) return Number.parseFloat(trimmed)\n  if (trimmed.endsWith('s')) return Number.parseFloat(trimmed) * 1000\n  return 0\n}\n\n// 读取元素实际 CSS transition 的最长时长，供可覆盖主题 token 的 JS 生命周期使用。\nexport function getTransitionDuration(panel: HTMLElement, fallback = DEFAULT_EXIT_DURATION): number {\n  const style = getComputedStyle(panel)\n  const durations = style.transitionDuration.split(',').map(parseDuration)\n  const delays = style.transitionDelay.split(',').map(parseDuration)\n  const longest = durations.reduce(\n    (max, duration, index) => Math.max(max, duration + (delays[index] ?? delays[0] ?? 0)),\n    0\n  )\n\n  return longest || fallback\n}\n\n// 以可中断的方式显示浮层，避免快速切换时重启动画。\nexport function showOverlayPresence(panel: HTMLElement, options: OverlayPresenceOptions = {}) {\n  pendingExits.get(panel)?.()\n  panel.hidden = false\n  if (options.isInstant) {\n    panel.dataset.wuiPresence = 'open'\n    return\n  }\n  panel.dataset.wuiPresence = 'entering'\n\n  // 提交初始状态，让新挂载的面板拥有过渡起点。\n  void panel.offsetWidth\n\n  requestAnimationFrame(() => {\n    if (panel.dataset.wuiPresence === 'entering') panel.dataset.wuiPresence = 'open'\n  })\n}\n\n// 播放退出过渡；若在结束前重新显示则返回 false。\nexport function hideOverlayPresence(panel: HTMLElement): Promise<boolean> {\n  pendingExits.get(panel)?.()\n  panel.dataset.wuiPresence = 'closing'\n\n  // jsdom 等没有计算 CSS transition 的环境无需伪造退场等待。\n  if (getTransitionDuration(panel, 0) === 0) {\n    panel.hidden = true\n    return Promise.resolve(true)\n  }\n\n  return new Promise(resolve => {\n    let settled = false\n    const finish = (didClose: boolean) => {\n      if (settled) return\n      settled = true\n      panel.removeEventListener('transitionend', onTransitionEnd)\n      clearTimeout(timeout)\n      pendingExits.delete(panel)\n      if (didClose && panel.dataset.wuiPresence === 'closing') panel.hidden = true\n      resolve(didClose)\n    }\n\n    const onTransitionEnd = (event: TransitionEvent) => {\n      if (event.target === panel && (event.propertyName === 'opacity' || event.propertyName === 'transform'))\n        finish(true)\n    }\n\n    pendingExits.set(panel, () => finish(false))\n    panel.addEventListener('transitionend', onTransitionEnd)\n    const timeout = setTimeout(() => finish(true), getTransitionDuration(panel) + EXIT_FALLBACK_BUFFER)\n  })\n}\n"],"mappings":";AAAA,IAGM,oBAAe,IAAI,QAAiC;AAM1D,SAAS,EAAc,GAAuB;CAC5C,IAAM,IAAU,EAAM,KAAK;CAG3B,OAFI,EAAQ,SAAS,IAAI,IAAU,OAAO,WAAW,CAAO,IACxD,EAAQ,SAAS,GAAG,IAAU,OAAO,WAAW,CAAO,IAAI,MACxD;AACT;AAGA,SAAgB,EAAsB,GAAoB,IAAW,KAA+B;CAClG,IAAM,IAAQ,iBAAiB,CAAK,GAC9B,IAAY,EAAM,mBAAmB,MAAM,GAAG,CAAC,CAAC,IAAI,CAAa,GACjE,IAAS,EAAM,gBAAgB,MAAM,GAAG,CAAC,CAAC,IAAI,CAAa;CAMjE,OALgB,EAAU,QACvB,GAAK,GAAU,MAAU,KAAK,IAAI,GAAK,KAAY,EAAO,MAAU,EAAO,MAAM,EAAE,GACpF,CAGK,KAAW;AACpB;AAGA,SAAgB,EAAoB,GAAoB,IAAkC,CAAC,GAAG;CAG5F,IAFA,EAAa,IAAI,CAAK,CAAC,GAAG,GAC1B,EAAM,SAAS,IACX,EAAQ,WAAW;EACrB,EAAM,QAAQ,cAAc;EAC5B;CACF;CAMA,AALA,EAAM,QAAQ,cAAc,YAG5B,EAAW,aAEX,4BAA4B;EAC1B,AAAI,EAAM,QAAQ,gBAAgB,eAAY,EAAM,QAAQ,cAAc;CAC5E,CAAC;AACH;AAGA,SAAgB,EAAoB,GAAsC;CAUxE,OATA,EAAa,IAAI,CAAK,CAAC,GAAG,GAC1B,EAAM,QAAQ,cAAc,WAGxB,EAAsB,GAAO,CAAC,MAAM,KACtC,EAAM,SAAS,IACR,QAAQ,QAAQ,EAAI,KAGtB,IAAI,SAAQ,MAAW;EAC5B,IAAI,IAAU,IACR,KAAU,MAAsB;GAChC,MACJ,IAAU,IACV,EAAM,oBAAoB,iBAAiB,CAAe,GAC1D,aAAa,CAAO,GACpB,EAAa,OAAO,CAAK,GACrB,KAAY,EAAM,QAAQ,gBAAgB,cAAW,EAAM,SAAS,KACxE,EAAQ,CAAQ;EAClB,GAEM,KAAmB,MAA2B;GAClD,AAAI,EAAM,WAAW,MAAU,EAAM,iBAAiB,aAAa,EAAM,iBAAiB,gBACxF,EAAO,EAAI;EACf;EAGA,AADA,EAAa,IAAI,SAAa,EAAO,EAAK,CAAC,GAC3C,EAAM,iBAAiB,iBAAiB,CAAe;EACvD,IAAM,IAAU,iBAAiB,EAAO,EAAI,GAAG,EAAsB,CAAK,IAAI,EAAoB;CACpG,CAAC;AACH"}

package/dist/shared/visible-area/index.js

@@ -0,0 +1,69 @@
+import { definePlugin as e } from "@greypan/js-kit";
+//#region src/shared/visible-area/index.ts
+var t = {
+	top: 0,
+	right: 0,
+	bottom: 0,
+	left: 0,
+	width: 0,
+	height: 0
+};
+function n(e) {
+	if (!e) return t;
+	let n = e.getBoundingClientRect(), r = Math.max(0, n.left), i = Math.max(0, n.top), a = Math.min(window.innerWidth, n.right), o = Math.min(window.innerHeight, n.bottom);
+	return a <= r || o <= i ? t : {
+		top: i,
+		right: a,
+		bottom: o,
+		left: r,
+		width: a - r,
+		height: o - i
+	};
+}
+function r(e, t) {
+	return e?.top === t.top && e.right === t.right && e.bottom === t.bottom && e.left === t.left && e.width === t.width && e.height === t.height;
+}
+function i(t) {
+	return e(() => {
+		let e = null, i, a, o = !1, s, c = () => {
+			if (a = void 0, !o) return;
+			let i = n(e);
+			r(s, i) || (s = i, t.onVisibleAreaChange(i));
+		}, l = () => {
+			!o || a !== void 0 || (a = requestAnimationFrame(c));
+		}, u = () => {
+			i?.disconnect(), i = void 0, !(!e || typeof ResizeObserver > "u") && (i = new ResizeObserver(l), i.observe(e));
+		};
+		return {
+			setTarget(t) {
+				if (e === t) {
+					l();
+					return;
+				}
+				e = t, s = void 0, o && (u(), l());
+			},
+			refresh: l,
+			connect() {
+				o || (o = !0, window.addEventListener("scroll", l, { passive: !0 }), window.addEventListener("resize", l, { passive: !0 }), u(), l());
+			},
+			disconnect() {
+				o && (o = !1, window.removeEventListener("scroll", l), window.removeEventListener("resize", l), i?.disconnect(), i = void 0, s = void 0, a !== void 0 && cancelAnimationFrame(a), a = void 0);
+			}
+		};
+	});
+}
+var a = class {
+	constructor(e, t) {
+		this.tracker = t, e.addController(this);
+	}
+	hostConnected() {
+		this.tracker.connect();
+	}
+	hostDisconnected() {
+		this.tracker.disconnect();
+	}
+};
+//#endregion
+export { a as VisibleAreaController, i as defineVisibleAreaTracker };
+
+//# sourceMappingURL=index.js.map

package/dist/shared/visible-area/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/shared/visible-area/index.ts"],"sourcesContent":["import { definePlugin } from '@greypan/js-kit'\nimport type { ReactiveController, ReactiveControllerHost } from 'lit'\n\nexport interface VisibleArea {\n  readonly top: number\n  readonly right: number\n  readonly bottom: number\n  readonly left: number\n  readonly width: number\n  readonly height: number\n}\n\nexport interface VisibleAreaTracker {\n  setTarget(target: Element | null): void\n  refresh(): void\n  connect(): void\n  disconnect(): void\n}\n\nconst emptyVisibleArea: VisibleArea = {\n  top: 0,\n  right: 0,\n  bottom: 0,\n  left: 0,\n  width: 0,\n  height: 0\n}\n\nfunction getVisibleArea(target: Element | null): VisibleArea {\n  if (!target) return emptyVisibleArea\n\n  const rect = target.getBoundingClientRect()\n  const left = Math.max(0, rect.left)\n  const top = Math.max(0, rect.top)\n  const right = Math.min(window.innerWidth, rect.right)\n  const bottom = Math.min(window.innerHeight, rect.bottom)\n\n  if (right <= left || bottom <= top) return emptyVisibleArea\n\n  return {\n    top,\n    right,\n    bottom,\n    left,\n    width: right - left,\n    height: bottom - top\n  }\n}\n\nfunction visibleAreasEqual(a: VisibleArea | undefined, b: VisibleArea): boolean {\n  return (\n    a?.top === b.top &&\n    a.right === b.right &&\n    a.bottom === b.bottom &&\n    a.left === b.left &&\n    a.width === b.width &&\n    a.height === b.height\n  )\n}\n\n/**\n * 追踪单个元素与浏览器 viewport 的交集区域。\n *\n * 模块统一持有 ResizeObserver、viewport 监听器和 rAF 合帧；\n * 使用方只需管理 target 并响应可见区域变化。\n */\nexport function defineVisibleAreaTracker(options: { readonly onVisibleAreaChange: (area: VisibleArea) => void }) {\n  return definePlugin<VisibleAreaTracker, Record<never, never>>(() => {\n    let target: Element | null = null\n    let observer: ResizeObserver | undefined\n    let frame: number | undefined\n    let connected = false\n    let previousArea: VisibleArea | undefined\n\n    const report = () => {\n      frame = undefined\n      if (!connected) return\n\n      const nextArea = getVisibleArea(target)\n      if (visibleAreasEqual(previousArea, nextArea)) return\n\n      previousArea = nextArea\n      options.onVisibleAreaChange(nextArea)\n    }\n\n    const refresh = () => {\n      if (!connected || frame !== undefined) return\n      frame = requestAnimationFrame(report)\n    }\n\n    const observeTarget = () => {\n      observer?.disconnect()\n      observer = undefined\n\n      if (!target || typeof ResizeObserver === 'undefined') return\n\n      observer = new ResizeObserver(refresh)\n      observer.observe(target)\n    }\n\n    return {\n      setTarget(nextTarget) {\n        if (target === nextTarget) {\n          refresh()\n          return\n        }\n\n        target = nextTarget\n        previousArea = undefined\n        if (!connected) return\n\n        observeTarget()\n        refresh()\n      },\n\n      refresh,\n\n      connect() {\n        if (connected) return\n\n        connected = true\n        window.addEventListener('scroll', refresh, { passive: true })\n        window.addEventListener('resize', refresh, { passive: true })\n        observeTarget()\n        refresh()\n      },\n\n      disconnect() {\n        if (!connected) return\n\n        connected = false\n        window.removeEventListener('scroll', refresh)\n        window.removeEventListener('resize', refresh)\n        observer?.disconnect()\n        observer = undefined\n        previousArea = undefined\n\n        if (frame !== undefined) cancelAnimationFrame(frame)\n        frame = undefined\n      }\n    }\n  })\n}\n\n/** 将内部可见区域追踪器接入 Lit host 生命周期。 */\nexport class VisibleAreaController implements ReactiveController {\n  constructor(\n    host: ReactiveControllerHost,\n    private readonly tracker: VisibleAreaTracker\n  ) {\n    host.addController(this)\n  }\n\n  hostConnected() {\n    this.tracker.connect()\n  }\n\n  hostDisconnected() {\n    this.tracker.disconnect()\n  }\n}\n"],"mappings":";;AAmBA,IAAM,IAAgC;CACpC,KAAK;CACL,OAAO;CACP,QAAQ;CACR,MAAM;CACN,OAAO;CACP,QAAQ;AACV;AAEA,SAAS,EAAe,GAAqC;CAC3D,IAAI,CAAC,GAAQ,OAAO;CAEpB,IAAM,IAAO,EAAO,sBAAsB,GACpC,IAAO,KAAK,IAAI,GAAG,EAAK,IAAI,GAC5B,IAAM,KAAK,IAAI,GAAG,EAAK,GAAG,GAC1B,IAAQ,KAAK,IAAI,OAAO,YAAY,EAAK,KAAK,GAC9C,IAAS,KAAK,IAAI,OAAO,aAAa,EAAK,MAAM;CAIvD,OAFI,KAAS,KAAQ,KAAU,IAAY,IAEpC;EACL;EACA;EACA;EACA;EACA,OAAO,IAAQ;EACf,QAAQ,IAAS;CACnB;AACF;AAEA,SAAS,EAAkB,GAA4B,GAAyB;CAC9E,OACE,GAAG,QAAQ,EAAE,OACb,EAAE,UAAU,EAAE,SACd,EAAE,WAAW,EAAE,UACf,EAAE,SAAS,EAAE,QACb,EAAE,UAAU,EAAE,SACd,EAAE,WAAW,EAAE;AAEnB;AAQA,SAAgB,EAAyB,GAAwE;CAC/G,OAAO,QAA6D;EAClE,IAAI,IAAyB,MACzB,GACA,GACA,IAAY,IACZ,GAEE,UAAe;GAEnB,IADA,IAAQ,KAAA,GACJ,CAAC,GAAW;GAEhB,IAAM,IAAW,EAAe,CAAM;GAClC,EAAkB,GAAc,CAAQ,MAE5C,IAAe,GACf,EAAQ,oBAAoB,CAAQ;EACtC,GAEM,UAAgB;GAChB,CAAC,KAAa,MAAU,KAAA,MAC5B,IAAQ,sBAAsB,CAAM;EACtC,GAEM,UAAsB;GAC1B,GAAU,WAAW,GACrB,IAAW,KAAA,GAEP,GAAC,KAAU,OAAO,iBAAmB,SAEzC,IAAW,IAAI,eAAe,CAAO,GACrC,EAAS,QAAQ,CAAM;EACzB;EAEA,OAAO;GACL,UAAU,GAAY;IACpB,IAAI,MAAW,GAAY;KACzB,EAAQ;KACR;IACF;IAEA,IAAS,GACT,IAAe,KAAA,GACV,MAEL,EAAc,GACd,EAAQ;GACV;GAEA;GAEA,UAAU;IACJ,MAEJ,IAAY,IACZ,OAAO,iBAAiB,UAAU,GAAS,EAAE,SAAS,GAAK,CAAC,GAC5D,OAAO,iBAAiB,UAAU,GAAS,EAAE,SAAS,GAAK,CAAC,GAC5D,EAAc,GACd,EAAQ;GACV;GAEA,aAAa;IACN,MAEL,IAAY,IACZ,OAAO,oBAAoB,UAAU,CAAO,GAC5C,OAAO,oBAAoB,UAAU,CAAO,GAC5C,GAAU,WAAW,GACrB,IAAW,KAAA,GACX,IAAe,KAAA,GAEX,MAAU,KAAA,KAAW,qBAAqB,CAAK,GACnD,IAAQ,KAAA;GACV;EACF;CACF,CAAC;AACH;AAGA,IAAa,IAAb,MAAiE;CAC/D,YACE,GACA,GACA;EACA,AAFiB,KAAA,UAAA,GAEjB,EAAK,cAAc,IAAI;CACzB;CAEA,gBAAgB;EACd,KAAK,QAAQ,QAAQ;CACvB;CAEA,mBAAmB;EACjB,KAAK,QAAQ,WAAW;CAC1B;AACF"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@greypan/web-ui",
-  "version": "3.0.1",
+  "version": "5.0.0",
   "description": "Lit-based web components for React, Vue, and vanilla JS",
   "license": "MIT",
   "repository": {
@@ -41,13 +41,15 @@
   },
   "dependencies": {
     "@floating-ui/dom": "^1.8.0",
-    "@greypan/browser-kit": "1.7.8",
-    "@greypan/js-kit": "1.6.7"
+    "@lit/context": "^1.1.6",
+    "@greypan/browser-kit": "2.1.0",
+    "@greypan/js-kit": "2.0.0"
   },
   "devDependencies": {
     "@iconify-json/jam": "^1.2.3",
-    "@iconify-json/lucide": "^1.2.117",
+    "@iconify-json/lucide": "^1.2.126",
     "@iconify-json/si": "^1.2.17",
+    "@iconify-json/tabler": "^1.2.38",
     "@iconify-json/heroicons": "^1.2.3",
     "@iconify-json/ooui": "^1.2.20",
     "@iconify-json/radix-icons": "^1.2.6",
@@ -56,6 +58,8 @@
     "lit": "^3.3.3",
     "vite-plugin-dts": "^5.0.3",
     "vue": "^3.5.39",
+    "vite": "npm:@voidzero-dev/vite-plus-core@0.3.0",
+    "vite-plus": "0.3.0",
     "@greypan/tsconfig": "1.0.5"
   },
   "peerDependencies": {