@greypan/web-ui 11.2.0 → 12.0.0

package/dist/components/context-menu/index.js

@@ -1,386 +1,801 @@
-import e from "../../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorate.js";
-import { normalizeNumber as t } from "../../shared/normalize/index.js";
-import { dispatchOpenChangeEvent as n } from "../../shared/open-state/index.js";
-import { defineOverlayPositioningGeneration as r } from "../../shared/overlay/positioning-generation.js";
-import { hideOverlayPresence as i, showOverlayPresence as a } from "../../shared/overlay/presence.js";
-import { defineOpenOverlay as o } from "../../shared/overlay/open-overlay.js";
-import { findNearestTheme as s } from "../../shared/overlay/theme-overlay-scope.js";
-import { defineScrollLockLease as c } from "../../shared/scroll-lock/scroll-lock.js";
-import { UserChangeController as l } from "../../shared/events/user-change.js";
-import { captureFrameworkAnchors as u, findFocusedMenuItem as d, focusMenuItem as f, getMenuChildren as p, getMenuItemFromEvent as m, hideNestedMenuChildren as h, moveMenuChildren as g, orderManagedMenuItems as _, reconcileManagedMenuItems as v, restoreFrameworkAnchors as y, returnManagedMenuItemsToSlot as b } from "../../shared/menu-portal/menu-tree.js";
-import { createClosingSubmenuStack as x, createMenuHoverBinder as S, createMenuOutsideClickGuard as C, getEnabledMenuLevelItems as w, getFocusedMenuItemFromPanels as T, handleMenuKeyboard as E } from "../../shared/menu-behavior/index.js";
-import { createMenuPortalOverlay as D } from "../../shared/menu-portal/menu-portal.js";
-import O from "./scrim.js";
-import k from "./style.js";
-import { LitElement as A, html as j, unsafeCSS as M } from "lit";
-import { customElement as N, property as P, state as F } from "lit/decorators.js";
-import { computePosition as I, flip as L, shift as R } from "@floating-ui/dom";
-//#region src/components/context-menu/index.ts
-var z = "wui-context-menu-item", B = 500, V = 5e3, H = 10, U = 1e3, W = "data-wui-menu-scrim", G = 5, K = 8, q = class extends A {
-	constructor(...e) {
-		super(...e), this.disabled = !1, this.noScrollLock = !1, this.longPress = !1, this._longPressDelay = B, this._isOpen = !1, this._x = 0, this._y = 0, this._activeSubmenus = [], this._activeSubmenuItems = [], this._longPressOpenedAt = null, this._longPressGestureEndedAt = null, this._submenuPositionEpochs = /* @__PURE__ */ new WeakMap(), this._centerOnPressPoint = !1, this._closeSource = "default", this._menuItemActivationEvent = null, this._menuHandle = null, this._submenuHandles = /* @__PURE__ */ new Map(), this._outsideClickGuard = C(this, (e) => this._menuHandle?.contains(e) ?? !1), this._closingSubmenus = x({
-			getPanel: (e) => e.panel,
-			restoreItems: (e, t) => this._restoreSubmenuItems(e, t),
-			dispose: (e) => {
-				this._releaseSubmenu(e.panel), e.panel.remove();
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.155.0/helpers/esm/decorate.js";
+import { normalizeNumber } from "../../shared/normalize/index.js";
+import { dispatchOpenChangeEvent } from "../../shared/open-state/index.js";
+import { defineOverlayPositioningGeneration } from "../../shared/overlay/positioning-generation.js";
+import { hideOverlayPresence, showOverlayPresence } from "../../shared/overlay/presence.js";
+import { defineOpenOverlay } from "../../shared/overlay/open-overlay.js";
+import { findNearestTheme } from "../../shared/overlay/theme-overlay-scope.js";
+import { defineScrollLockLease } from "../../shared/scroll-lock/scroll-lock.js";
+import { UserChangeController } from "../../shared/events/user-change.js";
+import { captureFrameworkAnchors, findFocusedMenuItem, focusMenuItem, getMenuChildren, getMenuItemFromEvent, hideNestedMenuChildren, moveMenuChildren, orderManagedMenuItems, reconcileManagedMenuItems, restoreFrameworkAnchors, returnManagedMenuItemsToSlot } from "../../shared/menu-portal/menu-tree.js";
+import { createClosingSubmenuStack, createMenuHoverBinder, createMenuOutsideClickGuard, getEnabledMenuLevelItems, getFocusedMenuItemFromPanels, handleMenuKeyboard } from "../../shared/menu-behavior/index.js";
+import { createMenuPortalOverlay } from "../../shared/menu-portal/menu-portal.js";
+import scrim_default from "./scrim.js";
+import style_default from "./style.js";
+import { LitElement, html, unsafeCSS } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { computePosition, flip, shift } from "@floating-ui/dom";
+// src/components/context-menu/index.ts
+const MARKER_TEXT = "wui-context-menu-item";
+/** 与 iOS / Android 原生长按一致的默认时长。 */
+const DEFAULT_LONG_PRESS_DELAY = 500;
+/** long-press-delay 的上界：超过 5s 的长按不再是「长按」，等同没有该属性。 */
+const MAX_LONG_PRESS_DELAY = 5e3;
+/** 按住期间的容差位移；超出即视为滚动/拖拽意图，取消长按。 */
+const LONG_PRESS_MOVE_TOLERANCE = 10;
+/**
+* 长按开 menu 后吸收浏览器补发事件的窗口上限。
+*
+* 这不是时序保证：实测补发几乎紧跟抬手（touchend(1019ms) → click(1022ms)，间隔 3ms），
+* 1000ms 远大于实际需要，只是一个陈旧兜底上限。真正的边界是下一次 `pointerdown`
+* （`_onPointerDown` 无条件清零，含鼠标）与 menu 关闭，两条硬边界都在窗口判定之外，
+* 所以窗口只负责兜住「补发事件既没等到下一次按下、menu 也没关闭」这种不该发生的路径。
+*
+* **窗口的起点是手势结束而不是 menu 打开**（见 `_longPressGestureEndedAt`）：补发事件由
+* 引擎在 touchend 处理时生成，主线程被长任务占住时这一步能比 menu 打开晚 1s 以上
+* （实测 click 比打开晚 1325ms）。以打开时刻为起点，这个上限会被那段延迟挤爆——
+* 补发 click 落到窗口外，被当成用户真实点击把**同一次长按刚打开**的 menu 关掉。
+* 以手势结束为起点，补发事件相对它只有几毫秒，窗口才真的覆盖「同一次手势的补发」。
+*/
+const LONG_PRESS_FOLLOW_UP_WINDOW_MS = 1e3;
+/**
+* menu 打开期间铺在整屏上的 scrim `<dialog>`。
+*
+* 用 `<dialog>` + `showModal()` 而不是 plain `div`：模态 dialog 进 top layer，
+* 于是「z-index 谁高谁低」这道约束整体消失 —— panel 与 scrim 同在 top layer，
+* 而 top layer 之下的任何 z-index 都碰不到它们。plain `div` 也能修好 light-dismiss
+* 穿透，但那样 scrim 必须靠 z-index 压过 `--wui-layer-menu`(100)，是另一套易碎的约定。
+*/
+const SCRIM_ATTR = "data-wui-menu-scrim";
+/** 首项聚焦的最大尝试次数（含首次）。见 `_focusFirstItem`。 */
+const FOCUS_FIRST_ITEM_ATTEMPTS = 5;
+/** panel 与视口边缘的最小间距，与既有夹取算术同源。 */
+const VIEWPORT_PADDING = 8;
+let WebUiContextMenu = class WebUiContextMenu extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.disabled = false;
+		this.noScrollLock = false;
+		this.longPress = false;
+		this._longPressDelay = DEFAULT_LONG_PRESS_DELAY;
+		this._isOpen = false;
+		this._x = 0;
+		this._y = 0;
+		this._activeSubmenus = [];
+		this._activeSubmenuItems = [];
+		this._longPressOpenedAt = null;
+		this._longPressGestureEndedAt = null;
+		this._submenuPositionEpochs = /* @__PURE__ */ new WeakMap();
+		this._centerOnPressPoint = false;
+		this._closeSource = "default";
+		this._menuItemActivationEvent = null;
+		this._menuHandle = null;
+		this._submenuHandles = /* @__PURE__ */ new Map();
+		this._outsideClickGuard = createMenuOutsideClickGuard(this, (node) => this._menuHandle?.contains(node) ?? false);
+		this._closingSubmenus = createClosingSubmenuStack({
+			getPanel: (container) => container.panel,
+			restoreItems: (container, parentItem) => this._restoreSubmenuItems(container, parentItem),
+			dispose: (container) => {
+				this._releaseSubmenu(container.panel);
+				container.panel.remove();
 			}
-		}), this._hoverDelegate = {
+		});
+		this._hoverDelegate = {
 			getOpenDepth: () => this._activeSubmenus.length,
-			getLevelItems: (e) => this._getLevelItems(e),
-			getActiveItem: (e) => this._activeSubmenuItems[e],
-			isSubmenuItem: (e) => e.hasAttribute("submenu"),
-			openSubmenu: (e) => this._openSubmenu(e),
-			closeFrom: (e) => {
-				this._closeSubmenusFrom(e), this._hoverBinder.bind();
+			getLevelItems: (level) => this._getLevelItems(level),
+			getActiveItem: (level) => this._activeSubmenuItems[level],
+			isSubmenuItem: (item) => item.hasAttribute("submenu"),
+			openSubmenu: (item) => this._openSubmenu(item),
+			closeFrom: (level) => {
+				this._closeSubmenusFrom(level);
+				this._hoverBinder.bind();
 			}
-		}, this._hoverBinder = S(this._hoverDelegate, "web-ui-dropdown-item"), this._keyboardDelegate = {
-			getFocusedItem: (e) => T(e, [this._menu?.content, ...this._activeSubmenus.map((e) => e.content)], "web-ui-dropdown-item"),
-			getLevelOf: (e) => {
-				let t = this._getItemLevel(e);
-				return t === -1 ? void 0 : t;
+		};
+		this._hoverBinder = createMenuHoverBinder(this._hoverDelegate, "web-ui-dropdown-item");
+		this._keyboardDelegate = {
+			getFocusedItem: (event) => getFocusedMenuItemFromPanels(event, [this._menu?.content, ...this._activeSubmenus.map((submenu) => submenu.content)], "web-ui-dropdown-item"),
+			getLevelOf: (item) => {
+				const level = this._getItemLevel(item);
+				return level === -1 ? void 0 : level;
 			},
-			getEnabledItems: (e) => w(this._getLevelContainer(e)?.content),
-			isSubmenuItem: (e) => e.hasAttribute("submenu"),
-			openSubmenuInstant: (e) => this._openSubmenu(e, !0),
-			closeToParent: (e) => {
-				let t = this._activeSubmenuItems[e - 1];
-				return this._closeSubmenusFrom(e - 1), this._hoverBinder.bind(), t;
+			getEnabledItems: (level) => getEnabledMenuLevelItems(this._getLevelContainer(level)?.content),
+			isSubmenuItem: (item) => item.hasAttribute("submenu"),
+			openSubmenuInstant: (item) => this._openSubmenu(item, true),
+			closeToParent: (level) => {
+				const parent = this._activeSubmenuItems[level - 1];
+				this._closeSubmenusFrom(level - 1);
+				this._hoverBinder.bind();
+				return parent;
 			},
 			closeDeepestOrAll: () => this._closeLastSubmenuOrMenu()
-		}, this._overlay = o().make({
+		};
+		this._overlay = defineOpenOverlay().make({
 			requestClose: () => this._keyboardDelegate.closeDeepestOrAll(),
 			isConnected: () => this.isConnected
-		}), this._menuItemAnchors = /* @__PURE__ */ new Map(), this._scrollLock = c().make(), this._userOpenChange = new l(), this._shouldOpenInstantly = !0, this._suppressInitialFocusVisible = !0, this._refreshScheduled = !1, this._menuPositionGeneration = r().make(), this._contentObserver = new MutationObserver(() => {
-			this._isOpen && this._scheduleRefresh();
-		}), this._closeFromUser = (e = "default") => {
-			this._isOpen && (this._userOpenChange.mark(), this._closeSource = e, this.close());
-		}, this._onScrimClick = (e) => {
-			e.target === this._scrim && (this._isLongPressFollowUp() || this._closeFromUser());
-		}, this._onScrimCancel = (e) => {
+		});
+		this._menuItemAnchors = /* @__PURE__ */ new Map();
+		this._scrollLock = defineScrollLockLease().make();
+		this._userOpenChange = new UserChangeController();
+		this._shouldOpenInstantly = true;
+		this._suppressInitialFocusVisible = true;
+		this._refreshScheduled = false;
+		this._menuPositionGeneration = defineOverlayPositioningGeneration().make();
+		this._contentObserver = new MutationObserver(() => {
+			if (this._isOpen) this._scheduleRefresh();
+		});
+		this._closeFromUser = (source = "default") => {
+			if (!this._isOpen) return;
+			this._userOpenChange.mark();
+			this._closeSource = source;
+			this.close();
+		};
+		this._onScrimClick = (e) => {
+			if (e.target !== this._scrim) return;
+			if (this._isLongPressFollowUp()) return;
+			this._closeFromUser();
+		};
+		this._onScrimCancel = (e) => {
 			e.preventDefault();
-		}, this._onPointerDown = (e) => {
-			this._clearLongPressFollowUp(), this.longPress && !this.disabled && e.pointerType === "touch" && (this._cancelLongPress(), this._longPressOrigin = {
+		};
+		this._onPointerDown = (e) => {
+			this._clearLongPressFollowUp();
+			if (!this.longPress || this.disabled || e.pointerType !== "touch") return;
+			this._cancelLongPress();
+			this._longPressOrigin = {
 				x: e.clientX,
 				y: e.clientY
-			}, this._longPressTimer = setTimeout(() => {
+			};
+			this._longPressTimer = setTimeout(() => {
 				this._longPressTimer = void 0;
-				let e = this._longPressOrigin;
-				e && (this._longPressOrigin = void 0, !this._isOpen && (this._longPressOpenedAt = performance.now(), this._openAt(e.x, e.y, !1, !0, !0) && this._userOpenChange.mark()));
-			}, this.longPressDelay));
-		}, this._onPointerMove = (e) => {
+				const origin = this._longPressOrigin;
+				if (!origin) return;
+				this._longPressOrigin = void 0;
+				if (this._isOpen) return;
+				this._longPressOpenedAt = performance.now();
+				if (this._openAt(origin.x, origin.y, false, true, true)) this._userOpenChange.mark();
+			}, this.longPressDelay);
+		};
+		this._onPointerMove = (e) => {
 			if (e.pointerType !== "touch") return;
-			let t = this._longPressOrigin;
-			t && Math.hypot(e.clientX - t.x, e.clientY - t.y) > H && this._cancelLongPress();
-		}, this._onPointerUp = (e) => {
-			e.pointerType === "touch" && (this._longPressOpenedAt !== null && this._longPressGestureEndedAt === null && (this._longPressGestureEndedAt = performance.now()), this._cancelLongPress());
-		}, this._onPointerCancel = () => {
+			const origin = this._longPressOrigin;
+			if (!origin) return;
+			if (Math.hypot(e.clientX - origin.x, e.clientY - origin.y) > LONG_PRESS_MOVE_TOLERANCE) this._cancelLongPress();
+		};
+		this._onPointerUp = (e) => {
+			if (e.pointerType !== "touch") return;
+			if (this._longPressOpenedAt !== null && this._longPressGestureEndedAt === null) this._longPressGestureEndedAt = performance.now();
 			this._cancelLongPress();
-		}, this._onContextMenu = (e) => {
-			if (!this.disabled) {
-				if (this._isLongPressFollowUp()) {
-					e.preventDefault();
-					return;
-				}
-				e.preventDefault(), this._openAt(e.clientX, e.clientY, !1, !0) && this._userOpenChange.mark();
+		};
+		this._onPointerCancel = () => {
+			this._cancelLongPress();
+		};
+		this._onContextMenu = (e) => {
+			if (this.disabled) return;
+			if (this._isLongPressFollowUp()) {
+				e.preventDefault();
+				return;
 			}
-		}, this._onContextMenuOutside = (e) => {
-			this._isOpen && !this._outsideClickGuard.isInside(e) && this._closeFromUser();
-		}, this._onKeydown = (e) => {
-			if (!this.disabled && (e.key === "ContextMenu" || e.shiftKey && e.key === "F10")) {
+			e.preventDefault();
+			if (this._openAt(e.clientX, e.clientY, false, true)) this._userOpenChange.mark();
+		};
+		this._onContextMenuOutside = (e) => {
+			if (this._isOpen && !this._outsideClickGuard.isInside(e)) this._closeFromUser();
+		};
+		this._onKeydown = (e) => {
+			if (this.disabled) return;
+			if (e.key === "ContextMenu" || e.shiftKey && e.key === "F10") {
 				e.preventDefault();
-				let t = document.activeElement;
-				if (t && t !== document.body) {
-					let e = t.getBoundingClientRect();
-					this._openAt(e.left, e.bottom, !0, !1) && this._userOpenChange.mark();
-				} else this._openAt(window.innerWidth / 2, window.innerHeight / 2, !0, !1) && this._userOpenChange.mark();
+				const focused = document.activeElement;
+				if (focused && focused !== document.body) {
+					const rect = focused.getBoundingClientRect();
+					if (this._openAt(rect.left, rect.bottom, true, false)) this._userOpenChange.mark();
+				} else if (this._openAt(window.innerWidth / 2, window.innerHeight / 2, true, false)) this._userOpenChange.mark();
 				return;
 			}
-		}, this._onMenuItemActivation = (e) => {
-			let t = m(e);
-			!t || t.hasAttribute("disabled") || t.hasAttribute("submenu") || (this._menuItemActivationEvent = e);
-		}, this._onMenuClick = (e) => {
-			let t = m(e);
-			if (t && !t.hasAttribute("disabled")) {
-				if (t.hasAttribute("submenu")) {
-					this._openSubmenu(t);
-					return;
-				}
-				this._closeFromUser("menu-item");
+		};
+		this._onMenuItemActivation = (e) => {
+			const item = getMenuItemFromEvent(e);
+			if (!item || item.hasAttribute("disabled") || item.hasAttribute("submenu")) return;
+			this._menuItemActivationEvent = e;
+		};
+		this._onMenuClick = (e) => {
+			const item = getMenuItemFromEvent(e);
+			if (!item || item.hasAttribute("disabled")) return;
+			if (item.hasAttribute("submenu")) {
+				this._openSubmenu(item);
+				return;
 			}
-		}, this._onWheel = (e) => {
+			this._closeFromUser("menu-item");
+		};
+		this._onWheel = (e) => {
 			this._preventBackgroundScroll(e);
-		}, this._onTouchMove = (e) => {
+		};
+		this._onTouchMove = (e) => {
 			this._preventBackgroundScroll(e);
-		}, this._onDocumentKeydown = (e) => {
-			this._isOpen && E(this._keyboardDelegate, e);
+		};
+		this._onDocumentKeydown = (e) => {
+			if (!this._isOpen) return;
+			handleMenuKeyboard(this._keyboardDelegate, e);
 		};
 	}
 	static {
-		this.styles = M(k);
-	}
+		this.styles = unsafeCSS(style_default);
+	}
+	/**
+	* 走包内既有的 `normalizeNumber` 通道（与 `dropdown.offset`、`popover.offset` 同形）。
+	* 不能只靠 `Math.max(0, …)` 挡负数：`Math.max(0, NaN) === NaN`，而属性写错
+	* （`long-press-delay="abc"`）时 Lit 的 Number converter 给的正是 NaN，
+	* `setTimeout(fn, NaN)` 会立刻触发，长按就在 pointerdown 同一帧开 menu、绕过全部时长语义。
+	*/
 	get longPressDelay() {
 		return this._longPressDelay;
 	}
-	set longPressDelay(e) {
-		let n = this._longPressDelay;
-		this._longPressDelay = t(e, 0, V, B), this.requestUpdate("longPressDelay", n);
+	set longPressDelay(v) {
+		const old = this._longPressDelay;
+		this._longPressDelay = normalizeNumber(v, 0, MAX_LONG_PRESS_DELAY, DEFAULT_LONG_PRESS_DELAY);
+		this.requestUpdate("longPressDelay", old);
 	}
 	get isOpen() {
 		return this._isOpen;
 	}
 	connectedCallback() {
-		super.connectedCallback(), this._hideMenuItems(), this.addEventListener("contextmenu", this._onContextMenu), this.addEventListener("keydown", this._onKeydown), this.addEventListener("click", this._onMenuClick), this.addEventListener("pointerdown", this._onPointerDown), this.addEventListener("pointermove", this._onPointerMove), this.addEventListener("pointerup", this._onPointerUp), this.addEventListener("pointercancel", this._onPointerCancel), document.addEventListener("contextmenu", this._onContextMenuOutside), document.addEventListener("wheel", this._onWheel, {
-			capture: !0,
-			passive: !1
-		}), document.addEventListener("touchmove", this._onTouchMove, {
-			capture: !0,
-			passive: !1
-		}), document.addEventListener("keydown", this._onDocumentKeydown);
+		super.connectedCallback();
+		this._hideMenuItems();
+		this.addEventListener("contextmenu", this._onContextMenu);
+		this.addEventListener("keydown", this._onKeydown);
+		this.addEventListener("click", this._onMenuClick);
+		this.addEventListener("pointerdown", this._onPointerDown);
+		this.addEventListener("pointermove", this._onPointerMove);
+		this.addEventListener("pointerup", this._onPointerUp);
+		this.addEventListener("pointercancel", this._onPointerCancel);
+		document.addEventListener("contextmenu", this._onContextMenuOutside);
+		document.addEventListener("wheel", this._onWheel, {
+			capture: true,
+			passive: false
+		});
+		document.addEventListener("touchmove", this._onTouchMove, {
+			capture: true,
+			passive: false
+		});
+		document.addEventListener("keydown", this._onDocumentKeydown);
 	}
 	disconnectedCallback() {
-		super.disconnectedCallback(), this.removeEventListener("contextmenu", this._onContextMenu), this.removeEventListener("keydown", this._onKeydown), this.removeEventListener("click", this._onMenuClick), this.removeEventListener("pointerdown", this._onPointerDown), this.removeEventListener("pointermove", this._onPointerMove), this.removeEventListener("pointerup", this._onPointerUp), this.removeEventListener("pointercancel", this._onPointerCancel), document.removeEventListener("contextmenu", this._onContextMenuOutside), document.removeEventListener("wheel", this._onWheel, !0), document.removeEventListener("touchmove", this._onTouchMove, !0), document.removeEventListener("keydown", this._onDocumentKeydown), this._contentObserver.disconnect(), this._menuPositionGeneration.invalidate(), this._outsideClickGuard.dispose(), this._hoverBinder.dispose(), this._scrollLock.release(), this._menuHandle?.release(), this._menuHandle = null, this._returnItemsToSlot(), this._menu?.panel.remove(), this._menu = void 0, this._closeSubmenusFrom(0, !0), this._closingSubmenus.restoreAll(), this._closeScrim(), this._isOpen = !1, this._cancelLongPress(), this._longPressOpenedAt = null, this._longPressGestureEndedAt = null;
-	}
-	updated(e) {
+		super.disconnectedCallback();
+		this.removeEventListener("contextmenu", this._onContextMenu);
+		this.removeEventListener("keydown", this._onKeydown);
+		this.removeEventListener("click", this._onMenuClick);
+		this.removeEventListener("pointerdown", this._onPointerDown);
+		this.removeEventListener("pointermove", this._onPointerMove);
+		this.removeEventListener("pointerup", this._onPointerUp);
+		this.removeEventListener("pointercancel", this._onPointerCancel);
+		document.removeEventListener("contextmenu", this._onContextMenuOutside);
+		document.removeEventListener("wheel", this._onWheel, true);
+		document.removeEventListener("touchmove", this._onTouchMove, true);
+		document.removeEventListener("keydown", this._onDocumentKeydown);
+		this._contentObserver.disconnect();
+		this._menuPositionGeneration.invalidate();
+		this._outsideClickGuard.dispose();
+		this._hoverBinder.dispose();
+		this._scrollLock.release();
+		this._menuHandle?.release();
+		this._menuHandle = null;
+		this._returnItemsToSlot();
+		this._menu?.panel.remove();
+		this._menu = void 0;
+		this._closeSubmenusFrom(0, true);
+		this._closingSubmenus.restoreAll();
+		this._closeScrim();
+		this._isOpen = false;
+		this._cancelLongPress();
+		this._longPressOpenedAt = null;
+		this._longPressGestureEndedAt = null;
+	}
+	updated(changed) {
 		if (!this.isConnected) {
-			this._syncScrollLock(!1);
+			this._syncScrollLock(false);
 			return;
 		}
-		if (e.has("_isOpen")) {
+		if (changed.has("_isOpen")) {
 			if (this._isOpen) {
-				if (this._syncScrollLock(), !this._menu) {
-					let e = this._openScrim();
-					this._menu = D("context-menu", this, e), this._menu.panel.setAttribute("role", "menu"), this._menu.panel.setAttribute("aria-label", "Context menu"), this._menu.panel.addEventListener("click", this._onMenuClick), this._menu.panel.addEventListener("click", this._onMenuItemActivation, !0);
+				this._syncScrollLock();
+				if (!this._menu) {
+					const scrim = this._openScrim();
+					this._menu = createMenuPortalOverlay("context-menu", this, scrim);
+					this._menu.panel.setAttribute("role", "menu");
+					this._menu.panel.setAttribute("aria-label", "Context menu");
+					this._menu.panel.addEventListener("click", this._onMenuClick);
+					this._menu.panel.addEventListener("click", this._onMenuItemActivation, true);
 				}
 				if (!this._menuHandle) {
 					this._menuHandle = this._overlay.claim(this._menu.panel);
-					for (let e of this._activeSubmenus) this._submenuHandles.delete(e.panel), this._submenuHandles.set(e.panel, this._menuHandle.adopt(e.panel));
-					for (let e of this._closingSubmenus.closing()) this._submenuHandles.set(e.panel, this._menuHandle.adopt(e.panel));
+					for (const submenu of this._activeSubmenus) {
+						this._submenuHandles.delete(submenu.panel);
+						this._submenuHandles.set(submenu.panel, this._menuHandle.adopt(submenu.panel));
+					}
+					for (const container of this._closingSubmenus.closing()) this._submenuHandles.set(container.panel, this._menuHandle.adopt(container.panel));
 				}
 				this._contentObserver.observe(this._menu.content, {
-					childList: !0,
-					subtree: !0
-				}), requestAnimationFrame(() => {
-					this._isOpen && this._menu && (this._refreshMenu(), a(this._menu.panel, { isInstant: this._shouldOpenInstantly }), this._shouldOpenInstantly = !0, requestAnimationFrame(() => {
-						this._isOpen && this._menu && this._focusFirstItem();
-					}));
+					childList: true,
+					subtree: true
+				});
+				requestAnimationFrame(() => {
+					if (!this._isOpen || !this._menu) return;
+					this._refreshMenu();
+					showOverlayPresence(this._menu.panel, { isInstant: this._shouldOpenInstantly });
+					this._shouldOpenInstantly = true;
+					requestAnimationFrame(() => {
+						if (!this._isOpen || !this._menu) return;
+						this._focusFirstItem();
+					});
 				});
-			} else this._syncScrollLock(!1), this._longPressOpenedAt = null, this._longPressGestureEndedAt = null, this._menuHandle?.release(), this._menuHandle = null, this._contentObserver.disconnect(), this._menuPositionGeneration.invalidate(), this._refreshScheduled = !1, this._closeMenuAfterPresence();
-			this._userOpenChange.consume() && this._dispatchChange(this._isOpen);
+			} else {
+				this._syncScrollLock(false);
+				this._longPressOpenedAt = null;
+				this._longPressGestureEndedAt = null;
+				this._menuHandle?.release();
+				this._menuHandle = null;
+				this._contentObserver.disconnect();
+				this._menuPositionGeneration.invalidate();
+				this._refreshScheduled = false;
+				this._closeMenuAfterPresence();
+			}
+			if (this._userOpenChange.consume()) this._dispatchChange(this._isOpen);
 		}
-		e.has("noScrollLock") && this._syncScrollLock();
-	}
-	openAt(e, t) {
-		this._openAt(e, t, !0, !0);
-	}
-	_openAt(e, t, n, r, i = !1) {
-		return !this.disabled && (this._x = e, this._y = t, this._shouldOpenInstantly = n, this._suppressInitialFocusVisible = r, this._centerOnPressPoint = i, this._outsideClickGuard.arm(), this._isOpen ? (this._closeSubmenusFrom(0, !0), this._closingSubmenus.restoreAll(), this._menuPositionGeneration.invalidate(), this._scheduleRefresh(), !1) : (this._isOpen = !0, this._menuItemActivationEvent = null, !0));
-	}
+		if (changed.has("noScrollLock")) this._syncScrollLock();
+	}
+	/**
+	* 在指定视口坐标打开 menu。
+	* @param x 水平坐标（px）。
+	* @param y 垂直坐标（px）。
+	* @returns 无返回值；命令式打开不派发 `open-change` 事件。
+	*/
+	openAt(x, y) {
+		this._openAt(x, y, true, true);
+	}
+	_openAt(x, y, isInstant, suppressFocusVisible, centerOnPressPoint = false) {
+		if (this.disabled) return false;
+		this._x = x;
+		this._y = y;
+		this._shouldOpenInstantly = isInstant;
+		this._suppressInitialFocusVisible = suppressFocusVisible;
+		this._centerOnPressPoint = centerOnPressPoint;
+		this._outsideClickGuard.arm();
+		if (this._isOpen) {
+			this._closeSubmenusFrom(0, true);
+			this._closingSubmenus.restoreAll();
+			this._menuPositionGeneration.invalidate();
+			this._scheduleRefresh();
+			return false;
+		}
+		this._isOpen = true;
+		this._menuItemActivationEvent = null;
+		return true;
+	}
+	/**
+	* 关闭 menu。
+	* @returns 无返回值；命令式关闭不派发 `open-change` 事件。
+	*/
 	close() {
-		this._isOpen && (this._isOpen = !1, this._menuPositionGeneration.invalidate(), (this._closeSource === "menu-item" || this._isDispatchingMenuItemActivation()) && this._releaseScrimModality(), this._closeSource = "default", this._menuItemActivationEvent = null);
-	}
+		if (!this._isOpen) return;
+		this._isOpen = false;
+		this._menuPositionGeneration.invalidate();
+		if (this._closeSource === "menu-item" || this._isDispatchingMenuItemActivation()) this._releaseScrimModality();
+		this._closeSource = "default";
+		this._menuItemActivationEvent = null;
+	}
+	/**
+	* 「当前是否正处在一次可激活 menu item 的点击派发里」。
+	*
+	* 判据是 `eventPhase !== 0`（DOM 规范：派发开始前置 CAPTURING_PHASE，结束后由派发算法的
+	* terminating 步骤置回 NONE），即**事件自己知道它此刻有没有在派发中**。于是作用域精确等于
+	* 「这一次派发」，既不需要定时器也不需要猜微任务检查点的位置：
+	*
+	* - 消费方在条目自己的监听器里同步调 `close()` → 派发未结束 → 判定为真（要的就是这个）。
+	* - 消费方 `stopPropagation()` 让 menu 留着 → 派发照样结束 → 之后的 Escape / 点外面 / 程序式
+	*   `close()` 一律判定为假，README 承诺的「那三条关闭不抢焦点」不会被这一次点击污染。
+	* - 消费方把 `close()` 推到下一个任务 → 判定为假，退回不提前出顶层（与没有这个标记时一致）。
+	*/
 	_isDispatchingMenuItemActivation() {
 		return this._menuItemActivationEvent !== null && this._menuItemActivationEvent.eventPhase !== 0;
 	}
 	_scheduleRefresh() {
-		!this._refreshScheduled && this._isOpen && (this._refreshScheduled = !0, requestAnimationFrame(() => {
-			this._refreshScheduled = !1, this._isOpen && this._menu && this._refreshMenu();
-		}));
+		if (this._refreshScheduled || !this._isOpen) return;
+		this._refreshScheduled = true;
+		requestAnimationFrame(() => {
+			this._refreshScheduled = false;
+			if (!this._isOpen || !this._menu) return;
+			this._refreshMenu();
+		});
 	}
 	_refreshMenu() {
-		this._menu && (this._setupMenuItems(), this._positionMenu(), this._hoverBinder.bind());
-	}
+		if (!this._menu) return;
+		this._setupMenuItems();
+		this._positionMenu();
+		this._hoverBinder.bind();
+	}
+	/**
+	* 定位：**触屏长按与鼠标右键共用这一条 Floating UI 路径**。
+	*
+	* 两条入口现在只差「触发点的 x/y 从哪来」，布局契约完全一致：
+	* `bottom-start` 表达「panel 上缘 == 触发点 y、向下展开」，水平以触发点 x 为基准。
+	* 落点交给 `flip` / `shift` 按**实际空间**决定，`placement` 只表达意图：把「贴视口底」硬编码
+	* 成算术，真机反馈证明那是错的（menu 跑到屏幕最底部，与手指按下的位置完全脱节）。
+	*
+	* 不按「是否触屏」分流：窄视口的鼠标右键同样期望 menu 贴着光标出现，按输入类型或视口
+	* 宽度分流会让同一块屏幕上的两种输入拿到两套布局。panel 恒为 open scrim `<dialog>` 的
+	* 直接子节点（`createMenuPortalOverlay` 第三参传入 scrim，`menu-portal.ts` 里
+	* `container = scrim ?? …`），所以「非 dialog 容器」的分支对 context-menu 不可达。
+	*
+	* 算出来的 left/top 是**视口坐标**。panel 是 `position: fixed`，而 scrim 刻意不带
+	* transform / filter / contain（见 style.css），因此不构成 fixed 的包含块 ——
+	* 坐标直接相对视口解析。这条等价关系由 style.css 的满屏声明保证，并由 R6 的
+	* 「scrim 无 transform/filter/contain」+ viewport-fit 的几何断言兜底。
+	*/
 	_positionMenu() {
-		let e = this._menu?.panel;
-		if (!e) return;
-		let t = this._safeAreaBottom();
-		e.style.visibility = "hidden", e.style.display = "";
-		let n = this._menuPositionGeneration.next(), r = {
-			top: K,
-			bottom: K + t,
-			left: K,
-			right: K
-		}, i = this._centerOnPressPoint ? ["bottom", "top"] : ["bottom-start", "top-start"];
-		I({ getBoundingClientRect: () => new DOMRect(this._x, this._y, 0, 0) }, e, {
+		const panel = this._menu?.panel;
+		if (!panel) return;
+		const safeAreaBottom = this._safeAreaBottom();
+		panel.style.visibility = "hidden";
+		panel.style.display = "";
+		const generation = this._menuPositionGeneration.next();
+		const boundaryPadding = {
+			top: VIEWPORT_PADDING,
+			bottom: VIEWPORT_PADDING + safeAreaBottom,
+			left: VIEWPORT_PADDING,
+			right: VIEWPORT_PADDING
+		};
+		const placements = this._centerOnPressPoint ? ["bottom", "top"] : ["bottom-start", "top-start"];
+		computePosition({ getBoundingClientRect: () => new DOMRect(this._x, this._y, 0, 0) }, panel, {
 			strategy: "fixed",
-			placement: i[0],
-			middleware: [L({
-				fallbackPlacements: [...i],
-				padding: r
-			}), R({
-				padding: r,
-				crossAxis: !0
+			placement: placements[0],
+			middleware: [flip({
+				fallbackPlacements: [...placements],
+				padding: boundaryPadding
+			}), shift({
+				padding: boundaryPadding,
+				crossAxis: true
 			})]
-		}).then(({ x: t, y: r, placement: i, middlewareData: a }) => {
-			if (!this._isOpen || this._menu?.panel !== e || !this._menuPositionGeneration.isCurrent(n)) return;
-			let o = a.shift?.x ?? 0, s = i.includes("-") ? o < 0 ? "right" : "left" : o === 0 ? "center" : o < 0 ? "right" : "left";
-			this._applyMenuPosition(e, t, r, s, i.startsWith("bottom") ? "top" : "bottom");
+		}).then(({ x, y, placement, middlewareData }) => {
+			if (!this._isOpen || this._menu?.panel !== panel || !this._menuPositionGeneration.isCurrent(generation)) return;
+			const shiftX = middlewareData.shift?.x ?? 0;
+			const horizontalOrigin = !placement.includes("-") ? shiftX === 0 ? "center" : shiftX < 0 ? "right" : "left" : shiftX < 0 ? "right" : "left";
+			this._applyMenuPosition(panel, x, y, horizontalOrigin, placement.startsWith("bottom") ? "top" : "bottom");
 		});
 	}
+	/**
+	* 视口下缘的安全区高度（px）。
+	*
+	* 它**仍然必需**，而且不只服务触屏：menu 默认从触发点向下长，触发点
+	* 落在屏幕下半部时 panel 下缘会进入 home indicator 区域。它折进 flip 与 shift 共用的
+	* 边界 padding（见 `_positionMenu`），不需要单独一条 `maxBottom` 算术。
+	*
+	* 读宿主的自定义属性而不是 `env()`：自定义属性读回的是**计算后**的解析值，
+	* 而 `env()` 在 JS 里没有对应的求值入口，只能间接经由声明它的属性取。
+	* 属性未解析时 `parseFloat` 得 NaN，落到 0 —— 与 `env(..., 0px)` 的缺省一致。
+	*/
 	_safeAreaBottom() {
-		let e = Number.parseFloat(getComputedStyle(this).getPropertyValue("--wui-context-menu-safe-area-bottom"));
-		return Number.isFinite(e) ? e : 0;
-	}
-	_applyMenuPosition(e, t, n, r, i) {
-		e.style.left = `${t}px`, e.style.top = `${n}px`, e.style.setProperty("--wui-internal-overlay-transform-origin", `${i} ${r}`), e.style.visibility = "";
-	}
-	_focusFirstItem(e = 0) {
-		let t = this._menu?.content.querySelectorAll("web-ui-dropdown-item:not([disabled])")?.[0];
-		t && (f(t, { suppressFocusVisible: this._suppressInitialFocusVisible }), !(e + 1 >= G) && (d([this._menu?.panel]) || requestAnimationFrame(() => {
-			this._isOpen && this._menu && this._focusFirstItem(e + 1);
-		})));
+		const value = Number.parseFloat(getComputedStyle(this).getPropertyValue("--wui-context-menu-safe-area-bottom"));
+		return Number.isFinite(value) ? value : 0;
+	}
+	/**
+	* 写下 panel 坐标与进场 transform 的原点。
+	*
+	* 两个 origin 必传且**不**再回退成坐标比较：flip 会改变垂直方向，回退表达式
+	* `y < this._y ? 'bottom' : 'top'` 在「panel 顶边与触发点重合」时两边都成立，等于随机取。
+	* 唯一调用方从 flip 后的 placement 与 shift 位移推出真实侧边，见 `_positionMenu`。
+	*/
+	_applyMenuPosition(panel, x, y, horizontalOrigin, verticalOrigin) {
+		panel.style.left = `${x}px`;
+		panel.style.top = `${y}px`;
+		panel.style.setProperty("--wui-internal-overlay-transform-origin", `${verticalOrigin} ${horizontalOrigin}`);
+		panel.style.visibility = "";
+	}
+	/**
+	* 把焦点带进 menu 的第一项。
+	*
+	* `attempt` 是重试计数：menu item 是刚被 `reconcileManagedMenuItems` 搬进来的自定义元素，
+	* 它们的 shadow（`.item-inner`）由各自的 Lit 更新**异步**渲染。`focusMenuItem()` 委托给
+	* 项的 `focusItem()`，那一刻 `.item-inner` 还不存在，于是**静默无操作** —— 不抛错、
+	* 也不留痕，只表现为「menu 开了但焦点没进去」。
+	*
+	* 所以这里不假设一次成功：调用后用 `findFocusedMenuItem` 复核，没落上就在下一帧再试，
+	* 最多 `FOCUS_FIRST_ITEM_ATTEMPTS` 次。上界是必要的 —— menu item 若始终渲染不出来
+	* （空 menu、内容被外部换掉），不能让重试链一直跑下去。
+	*/
+	_focusFirstItem(attempt = 0) {
+		const firstItem = (this._menu?.content.querySelectorAll("web-ui-dropdown-item:not([disabled])"))?.[0];
+		if (!firstItem) return;
+		focusMenuItem(firstItem, { suppressFocusVisible: this._suppressInitialFocusVisible });
+		if (attempt + 1 >= FOCUS_FIRST_ITEM_ATTEMPTS) return;
+		if (findFocusedMenuItem([this._menu?.panel])) return;
+		requestAnimationFrame(() => {
+			if (!this._isOpen || !this._menu) return;
+			this._focusFirstItem(attempt + 1);
+		});
 	}
 	_setupMenuItems() {
-		let e = this._menu;
-		if (!e) return;
-		let t = e.content;
-		v(this, t, this._menuItemAnchors, z), this._hideMenuItems(), h(t, "context-menu-hidden");
-		let n = u(t, z);
-		_(this, t, this._menuItemAnchors, z), y(t, n);
+		const menu = this._menu;
+		if (!menu) return;
+		const content = menu.content;
+		reconcileManagedMenuItems(this, content, this._menuItemAnchors, MARKER_TEXT);
+		this._hideMenuItems();
+		hideNestedMenuChildren(content, "context-menu-hidden");
+		const anchors = captureFrameworkAnchors(content, MARKER_TEXT);
+		orderManagedMenuItems(this, content, this._menuItemAnchors, MARKER_TEXT);
+		restoreFrameworkAnchors(content, anchors);
 	}
 	_returnItemsToSlot() {
-		let e = this._menu;
-		e && (this._closeSubmenusFrom(0, !0), this._closingSubmenus.restoreAll(), b(this, e.content, this._menuItemAnchors));
-	}
+		const menu = this._menu;
+		if (!menu) return;
+		this._closeSubmenusFrom(0, true);
+		this._closingSubmenus.restoreAll();
+		returnManagedMenuItemsToSlot(this, menu.content, this._menuItemAnchors);
+	}
+	/**
+	* 建 scrim 并让它进入模态态，返回容器供 panel 挂载。
+	*
+	* 每次开启都新建而不是复用：scrim 的生命周期必须与「这一次开启」严格同进同出。
+	* 复用一个 dialog 意味着上一轮的 `close()` 事件、`open` 属性与 UA 记下的焦点还原目标
+	* 会跨会话残留，而这些都不是本组件能重置的。
+	*/
 	_openScrim() {
-		let e = document.createElement("dialog");
-		e.className = "wui-context-menu-scrim";
-		let t = document.createElement("style");
-		return t.textContent = O, e.append(t), e.setAttribute(W, ""), e.addEventListener("click", this._onScrimClick), e.addEventListener("cancel", this._onScrimCancel), this._scrimParent().append(e), e.showModal(), this._scrim = e, e;
-	}
+		const scrim = document.createElement("dialog");
+		scrim.className = "wui-context-menu-scrim";
+		const scrimStyles = document.createElement("style");
+		scrimStyles.textContent = scrim_default;
+		scrim.append(scrimStyles);
+		scrim.setAttribute(SCRIM_ATTR, "");
+		scrim.addEventListener("click", this._onScrimClick);
+		scrim.addEventListener("cancel", this._onScrimCancel);
+		this._scrimParent().append(scrim);
+		scrim.showModal();
+		this._scrim = scrim;
+		return scrim;
+	}
+	/**
+	* scrim 的挂载点：**与 panel 在没有 scrim 时会落到的容器同源** —— 最近主题的 theme-owned
+	* overlay root。scrim 就是那个容器的替身（panel 必须挂进 scrim，见 `updated()` 的顺序注释），
+	* 所以它得站在容器该站的位置上。
+	*
+	* 为什么不能在整棵 DOM 里随便挑位置：`--wui-color-*` 由 `<web-ui-theme>` 写在自己的 `:host`
+	* 上，只沿 DOM 树向下继承。scrim 若挂到 `document.body`，而 `<web-ui-theme>` 是 body 的**子节点**，
+	* 这条继承链就断了 —— panel 与 scrim 双双落回 `var(--wui-color-*, <浅色字面量>)` 的 fallback，
+	* 深色外观下 menu 是一块浅色玻璃（app 侧的 `dark:` 变体也够不到它）。挂进 theme overlay root
+	* 之后，panel 与 scrim 跟 dropdown / select 一样吃同一份 token。
+	*
+	* 无主题时挂在 `document.body`：那条路径本来就没有 token 作用域可继承，改用
+	* fallback overlay root 只会改变既有测试与消费者的观察面，不换来任何东西。
+	*/
 	_scrimParent() {
-		return s(this)?.getOverlayRoot() ?? document.body;
+		return findNearestTheme(this)?.getOverlayRoot() ?? document.body;
 	}
+	/**
+	* 关掉并摘除 scrim。幂等：关闭分支与 `disconnectedCallback` 都会调。
+	*
+	* `close()` 触发 UA 的焦点归还，**必须先于 panel `remove()`** —— 理由见 `_closeMenuAfterPresence`。
+	*/
 	_closeScrim() {
-		let e = this._scrim;
-		e && (this._scrim = void 0, e.open && e.close(), e.remove());
-	}
+		const scrim = this._scrim;
+		if (!scrim) return;
+		this._scrim = void 0;
+		if (scrim.open) scrim.close();
+		scrim.remove();
+	}
+	/**
+	* 只让 scrim 出顶层，不摘除元素。panel 挂在 scrim 里，摘了就把退场动画一起摘掉。
+	*
+	* 提前出顶层是为了焦点（理由见 `close()`）。代价是这个尾巴上 scrim 已经在 top layer
+	* 之外：下层恢复可命中，且 panel 的层级退回普通流 —— 在「menu 开在 drawer/dialog 之上」
+	* 的场景里，退场动画会被下层的 top layer 盖住。
+	*
+	* 这条尾巴只有一次退场过渡的时长（默认 160ms），且只发生在 menu item 激活时。
+	* 摘除仍在 `_closeScrim()`，那时 panel 已经走完。
+	*/
 	_releaseScrimModality() {
-		let e = this._scrim;
-		e?.open && e.close();
+		const scrim = this._scrim;
+		if (scrim?.open) scrim.close();
 	}
 	async _closeMenuAfterPresence() {
-		let e = this._menu;
-		(!e || await i(e.panel)) && !this._isOpen && this.isConnected && this._menu === e && (this._closeScrim(), this._returnItemsToSlot(), e?.panel.remove(), this._menu = void 0);
+		const menu = this._menu;
+		if (menu && !await hideOverlayPresence(menu.panel)) return;
+		if (this._isOpen || !this.isConnected || this._menu !== menu) return;
+		this._closeScrim();
+		this._returnItemsToSlot();
+		menu?.panel.remove();
+		this._menu = void 0;
 	}
 	_hideMenuItems() {
-		p(this).forEach((e) => e.setAttribute("slot", "context-menu-hidden")), h(this, "context-menu-hidden");
-	}
-	_openSubmenu(e, t = !1) {
-		if (!this._isOpen || !e.hasAttribute("submenu") || e.hasAttribute("disabled")) return;
-		let n = this._getItemLevel(e);
-		if (n === -1 || this._activeSubmenuItems[n] === e) return;
-		this._closeSubmenusFrom(n);
-		let r = this._closingSubmenus.take(e);
-		if (r) {
-			this._activeSubmenus[n] = r, this._activeSubmenuItems[n] = e, this._menuHandle && this._submenuHandles.set(r.panel, this._menuHandle.adopt(r.panel)), e.setAttribute("active", ""), this._positionSubmenu(e, r), a(r.panel, { isInstant: t }), this._hoverBinder.bind();
+		getMenuChildren(this).forEach((child) => child.setAttribute("slot", "context-menu-hidden"));
+		hideNestedMenuChildren(this, "context-menu-hidden");
+	}
+	_openSubmenu(item, isInstant = false) {
+		if (!this._isOpen || !item.hasAttribute("submenu") || item.hasAttribute("disabled")) return;
+		const level = this._getItemLevel(item);
+		if (level === -1 || this._activeSubmenuItems[level] === item) return;
+		this._closeSubmenusFrom(level);
+		const closingSubmenu = this._closingSubmenus.take(item);
+		if (closingSubmenu) {
+			this._activeSubmenus[level] = closingSubmenu;
+			this._activeSubmenuItems[level] = item;
+			if (this._menuHandle) this._submenuHandles.set(closingSubmenu.panel, this._menuHandle.adopt(closingSubmenu.panel));
+			item.setAttribute("active", "");
+			this._positionSubmenu(item, closingSubmenu);
+			showOverlayPresence(closingSubmenu.panel, { isInstant });
+			this._hoverBinder.bind();
 			return;
 		}
-		if (p(e).length === 0) return;
-		let i = D("context-submenu", this, this._scrim);
-		i.panel.dataset.level = String(n), i.panel.setAttribute("role", "menu"), i.panel.setAttribute("aria-label", "submenu"), i.panel.style.visibility = "hidden", i.panel.addEventListener("click", this._onMenuClick), i.panel.addEventListener("click", this._onMenuItemActivation, !0), g(e, i.content), this._activeSubmenus[n] = i, this._activeSubmenuItems[n] = e, this._menuHandle && this._submenuHandles.set(i.panel, this._menuHandle.adopt(i.panel)), e.setAttribute("active", ""), this._positionSubmenu(e, i), a(i.panel, { isInstant: t }), this._hoverBinder.bind();
-	}
-	_closeSubmenusFrom(e, t = !1) {
-		for (let n = this._activeSubmenus.length - 1; n >= e; n--) {
-			let e = this._activeSubmenus[n], r = this._activeSubmenuItems[n];
-			r?.removeAttribute("active"), !r || t ? (e && this._releaseSubmenu(e.panel), this._restoreSubmenuItems(e, r), e.panel.remove()) : this._closingSubmenus.closeAsync(r, e);
+		if (getMenuChildren(item).length === 0) return;
+		const submenu = createMenuPortalOverlay("context-submenu", this, this._scrim);
+		submenu.panel.dataset.level = String(level);
+		submenu.panel.setAttribute("role", "menu");
+		submenu.panel.setAttribute("aria-label", "submenu");
+		submenu.panel.style.visibility = "hidden";
+		submenu.panel.addEventListener("click", this._onMenuClick);
+		submenu.panel.addEventListener("click", this._onMenuItemActivation, true);
+		moveMenuChildren(item, submenu.content);
+		this._activeSubmenus[level] = submenu;
+		this._activeSubmenuItems[level] = item;
+		if (this._menuHandle) this._submenuHandles.set(submenu.panel, this._menuHandle.adopt(submenu.panel));
+		item.setAttribute("active", "");
+		this._positionSubmenu(item, submenu);
+		showOverlayPresence(submenu.panel, { isInstant });
+		this._hoverBinder.bind();
+	}
+	_closeSubmenusFrom(level, isInstant = false) {
+		for (let index = this._activeSubmenus.length - 1; index >= level; index--) {
+			const submenu = this._activeSubmenus[index];
+			const item = this._activeSubmenuItems[index];
+			item?.removeAttribute("active");
+			if (!item || isInstant) {
+				if (submenu) this._releaseSubmenu(submenu.panel);
+				this._restoreSubmenuItems(submenu, item);
+				submenu.panel.remove();
+			} else this._closingSubmenus.closeAsync(item, submenu);
 		}
-		this._activeSubmenus.length = e, this._activeSubmenuItems.length = e;
-	}
-	_restoreSubmenuItems(e, t) {
-		t && (g(e.content, t), h(t, "context-menu-hidden"));
-	}
-	_getItemLevel(e) {
-		if (this._menu?.panel.contains(e)) return 0;
-		let t = this._activeSubmenus.findIndex((t) => t.panel.contains(e));
-		return t === -1 ? -1 : t + 1;
-	}
-	_positionSubmenu(e, t) {
-		if (t.panel.parentElement instanceof HTMLDialogElement && t.panel.parentElement.open) {
-			let n = e.getBoundingClientRect().right + t.panel.offsetWidth + 8 <= window.innerWidth, r = (this._submenuPositionEpochs.get(t.panel) ?? 0) + 1;
-			this._submenuPositionEpochs.set(t.panel, r), I(e, t.panel, {
+		this._activeSubmenus.length = level;
+		this._activeSubmenuItems.length = level;
+	}
+	_restoreSubmenuItems(submenu, item) {
+		if (!item) return;
+		moveMenuChildren(submenu.content, item);
+		hideNestedMenuChildren(item, "context-menu-hidden");
+	}
+	_getItemLevel(item) {
+		if (this._menu?.panel.contains(item)) return 0;
+		const parentLevel = this._activeSubmenus.findIndex((submenu) => submenu.panel.contains(item));
+		return parentLevel === -1 ? -1 : parentLevel + 1;
+	}
+	_positionSubmenu(item, submenu) {
+		if (submenu.panel.parentElement instanceof HTMLDialogElement && submenu.panel.parentElement.open) {
+			const itemRect = item.getBoundingClientRect();
+			const padding = 8;
+			const canOpenRight = itemRect.right + submenu.panel.offsetWidth + padding <= window.innerWidth;
+			const epoch = (this._submenuPositionEpochs.get(submenu.panel) ?? 0) + 1;
+			this._submenuPositionEpochs.set(submenu.panel, epoch);
+			computePosition(item, submenu.panel, {
 				strategy: "fixed",
-				placement: n ? "right-start" : "left-start",
-				middleware: [R({
-					padding: 8,
-					crossAxis: !0
+				placement: canOpenRight ? "right-start" : "left-start",
+				middleware: [shift({
+					padding,
+					crossAxis: true
 				})]
-			}).then(({ x: e, y: n, middlewareData: i }) => {
-				if (!this._activeSubmenus.includes(t) || r !== this._submenuPositionEpochs.get(t.panel)) return;
-				let a = i.shift?.x ?? 0, o = i.shift?.y ?? 0, s = a < 0 ? "right" : "left", c = o < 0 ? "bottom" : "top";
-				t.panel.style.left = `${e}px`, t.panel.style.top = `${n}px`, t.panel.style.setProperty("--wui-internal-overlay-transform-origin", `${c} ${s}`), t.panel.style.visibility = "";
+			}).then(({ x, y, middlewareData }) => {
+				if (!this._activeSubmenus.includes(submenu) || epoch !== this._submenuPositionEpochs.get(submenu.panel)) return;
+				const shiftX = middlewareData.shift?.x ?? 0;
+				const shiftY = middlewareData.shift?.y ?? 0;
+				const horizontalOrigin = shiftX < 0 ? "right" : "left";
+				const verticalOrigin = shiftY < 0 ? "bottom" : "top";
+				submenu.panel.style.left = `${x}px`;
+				submenu.panel.style.top = `${y}px`;
+				submenu.panel.style.setProperty("--wui-internal-overlay-transform-origin", `${verticalOrigin} ${horizontalOrigin}`);
+				submenu.panel.style.visibility = "";
 			});
 			return;
 		}
-		let n = e.getBoundingClientRect(), r = t.panel.offsetWidth, i = t.panel.offsetHeight, a = n.right + r + 8 <= window.innerWidth, o = a ? n.right : Math.max(8, n.left - r), s = Math.min(Math.max(8, n.top), window.innerHeight - i - 8);
-		t.panel.style.left = `${o}px`, t.panel.style.top = `${s}px`, t.panel.style.setProperty("--wui-internal-overlay-transform-origin", a ? "top left" : "top right"), t.panel.style.visibility = "";
-	}
-	_dispatchChange(e) {
-		n(this, e);
+		const itemRect = item.getBoundingClientRect();
+		const padding = 8;
+		const submenuWidth = submenu.panel.offsetWidth;
+		const submenuHeight = submenu.panel.offsetHeight;
+		const canOpenRight = itemRect.right + submenuWidth + padding <= window.innerWidth;
+		const left = canOpenRight ? itemRect.right : Math.max(padding, itemRect.left - submenuWidth);
+		const top = Math.min(Math.max(padding, itemRect.top), window.innerHeight - submenuHeight - padding);
+		submenu.panel.style.left = `${left}px`;
+		submenu.panel.style.top = `${top}px`;
+		submenu.panel.style.setProperty("--wui-internal-overlay-transform-origin", canOpenRight ? "top left" : "top right");
+		submenu.panel.style.visibility = "";
+	}
+	_dispatchChange(open) {
+		dispatchOpenChangeEvent(this, open);
 	}
 	_cancelLongPress() {
-		this._longPressTimer !== void 0 && (clearTimeout(this._longPressTimer), this._longPressTimer = void 0), this._longPressOrigin = void 0;
+		if (this._longPressTimer !== void 0) {
+			clearTimeout(this._longPressTimer);
+			this._longPressTimer = void 0;
+		}
+		this._longPressOrigin = void 0;
 	}
+	/** 该事件是否是长按开 menu 之后、浏览器为同一次触摸补发的事件。 */
 	_isLongPressFollowUp() {
-		let e = this._longPressOpenedAt;
-		if (e === null) return !1;
-		let t = this._longPressGestureEndedAt ?? e;
-		return performance.now() - t > U ? (this._clearLongPressFollowUp(), !1) : !0;
+		const openedAt = this._longPressOpenedAt;
+		if (openedAt === null) return false;
+		const anchor = this._longPressGestureEndedAt ?? openedAt;
+		if (performance.now() - anchor > LONG_PRESS_FOLLOW_UP_WINDOW_MS) {
+			this._clearLongPressFollowUp();
+			return false;
+		}
+		return true;
 	}
+	/** 结束「同一次手势的补发事件」窗口。与 _longPressOpenedAt 的清零同源，两处都要清。 */
 	_clearLongPressFollowUp() {
-		this._longPressOpenedAt = null, this._longPressGestureEndedAt = null;
+		this._longPressOpenedAt = null;
+		this._longPressGestureEndedAt = null;
 	}
-	_getLevelContainer(e) {
-		return e === 0 ? this._menu : this._activeSubmenus[e - 1];
+	_getLevelContainer(level) {
+		return level === 0 ? this._menu : this._activeSubmenus[level - 1];
 	}
-	_getLevelItems(e) {
-		let t = this._getLevelContainer(e);
-		return t ? p(t.content) : [];
+	_getLevelItems(level) {
+		const container = this._getLevelContainer(level);
+		if (!container) return [];
+		return getMenuChildren(container.content);
 	}
 	_closeLastSubmenuOrMenu() {
 		if (this._activeSubmenus.length > 0) {
-			let e = this._activeSubmenus.length - 1, t = this._activeSubmenuItems[e];
-			this._closeSubmenusFrom(e), f(t), this._hoverBinder.bind();
+			const level = this._activeSubmenus.length - 1;
+			const parent = this._activeSubmenuItems[level];
+			this._closeSubmenusFrom(level);
+			focusMenuItem(parent);
+			this._hoverBinder.bind();
 		} else this._closeFromUser();
 	}
 	_preventBackgroundScroll(e) {
-		!this._isOpen || this.noScrollLock || this._isMenuPanelEvent(e) || e.preventDefault();
+		if (!this._isOpen || this.noScrollLock || this._isMenuPanelEvent(e)) return;
+		e.preventDefault();
 	}
-	_syncScrollLock(e = this._isOpen) {
-		this._scrollLock.sync(e && !this.noScrollLock);
+	_syncScrollLock(isOpen = this._isOpen) {
+		this._scrollLock.sync(isOpen && !this.noScrollLock);
 	}
-	_releaseSubmenu(e) {
-		this._submenuHandles.get(e)?.release(), this._submenuHandles.delete(e);
+	/** 按 panel 撤销一层 submenu 的登记；handle 已随根层递归撤销时幂等无操作。 */
+	_releaseSubmenu(panel) {
+		this._submenuHandles.get(panel)?.release();
+		this._submenuHandles.delete(panel);
 	}
 	_isMenuPanelEvent(e) {
-		return this._menuHandle?.containsEvent(e) ?? !1;
+		return this._menuHandle?.containsEvent(e) ?? false;
 	}
 	render() {
-		return j`
+		return html`
       <div class="context-menu-anchor">
         <slot @slotchange=${this._onSlotChange}></slot>
       </div>
     `;
 	}
 	_onSlotChange() {
-		this._hideMenuItems(), this._isOpen && this._scheduleRefresh();
+		this._hideMenuItems();
+		if (this._isOpen) this._scheduleRefresh();
 	}
 };
-e([P({
+__decorate([property({
 	type: Boolean,
-	reflect: !0
-})], q.prototype, "disabled", void 0), e([P({
+	reflect: true
+})], WebUiContextMenu.prototype, "disabled", void 0);
+__decorate([property({
 	type: Boolean,
-	reflect: !0,
+	reflect: true,
 	attribute: "no-scroll-lock"
-})], q.prototype, "noScrollLock", void 0), e([P({
+})], WebUiContextMenu.prototype, "noScrollLock", void 0);
+__decorate([property({
 	type: Boolean,
-	reflect: !0,
+	reflect: true,
 	attribute: "long-press"
-})], q.prototype, "longPress", void 0), e([P({
+})], WebUiContextMenu.prototype, "longPress", void 0);
+__decorate([property({
 	type: Number,
 	attribute: "long-press-delay"
-})], q.prototype, "longPressDelay", null), e([F()], q.prototype, "_isOpen", void 0), e([F()], q.prototype, "_x", void 0), e([F()], q.prototype, "_y", void 0), q = e([N("web-ui-context-menu")], q);
-//#endregion
-export { q as WebUiContextMenu };
+})], WebUiContextMenu.prototype, "longPressDelay", null);
+__decorate([state()], WebUiContextMenu.prototype, "_isOpen", void 0);
+__decorate([state()], WebUiContextMenu.prototype, "_x", void 0);
+__decorate([state()], WebUiContextMenu.prototype, "_y", void 0);
+WebUiContextMenu = __decorate([customElement("web-ui-context-menu")], WebUiContextMenu);
+export { WebUiContextMenu };
 
 //# sourceMappingURL=index.js.map