@yorozu/context-menu 0.5.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Ivan
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/default.css

@@ -0,0 +1,87 @@
+@import "./tokens.css";
+
+/* Compact default layout for [data-yorozu-menu]. Host supplies item markup. */
+[data-yorozu-menu] {
+    position: fixed;
+    z-index: var(--yorozu-menu-z);
+    min-width: var(--yorozu-menu-min-width);
+    padding-block: var(--yorozu-menu-pad-block);
+    border-radius: var(--yorozu-menu-radius);
+    color: var(--yorozu-menu-color);
+    font-size: var(--yorozu-menu-font-size);
+    font-weight: var(--yorozu-menu-font-weight);
+    font-family: var(--yorozu-menu-font-family);
+    background: var(--yorozu-menu-bg);
+    box-shadow: var(--yorozu-menu-shadow);
+    backdrop-filter: blur(var(--yorozu-menu-blur));
+    opacity: 0;
+    outline: none;
+}
+
+[data-yorozu-menu] [role="menuitem"],
+[data-yorozu-menu] [role="menuitemcheckbox"] {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: var(--yorozu-menu-item-gap);
+    margin: var(--yorozu-menu-item-margin);
+    padding: var(--yorozu-menu-item-padding);
+    padding-inline-end: var(--yorozu-menu-item-padding-inline-end);
+    border-radius: var(--yorozu-menu-item-radius);
+    min-block-size: var(--yorozu-menu-item-min-block);
+    outline: none;
+    box-shadow: none;
+    cursor: pointer;
+}
+
+[data-yorozu-menu] [role="menuitem"]:hover,
+[data-yorozu-menu] [role="menuitem"]:focus,
+[data-yorozu-menu] [role="menuitem"]:focus-visible,
+[data-yorozu-menu] [role="menuitemcheckbox"]:hover,
+[data-yorozu-menu] [role="menuitemcheckbox"]:focus,
+[data-yorozu-menu] [role="menuitemcheckbox"]:focus-visible {
+    outline: none;
+    box-shadow: none;
+    background: var(--yorozu-menu-item-hover);
+}
+
+[data-yorozu-menu] [role="menuitem"]:active:not(.disabled):not([aria-disabled="true"]),
+[data-yorozu-menu] [role="menuitemcheckbox"]:active:not(.disabled):not([aria-disabled="true"]) {
+    transform: scale(var(--yorozu-menu-item-active-scale));
+}
+
+[data-yorozu-menu] [role="menuitem"].disabled,
+[data-yorozu-menu] [role="menuitem"][aria-disabled="true"],
+[data-yorozu-menu] [role="menuitemcheckbox"].disabled,
+[data-yorozu-menu] [role="menuitemcheckbox"][aria-disabled="true"] {
+    opacity: var(--yorozu-menu-disabled-opacity);
+    pointer-events: none;
+}
+
+[data-yorozu-menu] [role="menuitem"].disabled:hover,
+[data-yorozu-menu] [role="menuitem"].disabled:focus,
+[data-yorozu-menu] [role="menuitem"].disabled:focus-visible,
+[data-yorozu-menu] [role="menuitem"][aria-disabled="true"]:hover,
+[data-yorozu-menu] [role="menuitem"][aria-disabled="true"]:focus,
+[data-yorozu-menu] [role="menuitem"][aria-disabled="true"]:focus-visible,
+[data-yorozu-menu] [role="menuitemcheckbox"].disabled:hover,
+[data-yorozu-menu] [role="menuitemcheckbox"].disabled:focus,
+[data-yorozu-menu] [role="menuitemcheckbox"].disabled:focus-visible,
+[data-yorozu-menu] [role="menuitemcheckbox"][aria-disabled="true"]:hover,
+[data-yorozu-menu] [role="menuitemcheckbox"][aria-disabled="true"]:focus,
+[data-yorozu-menu] [role="menuitemcheckbox"][aria-disabled="true"]:focus-visible {
+    background: transparent;
+}
+
+[data-yorozu-menu] .destructive,
+[data-yorozu-menu] [role="menuitem"].destructive,
+[data-yorozu-menu] [role="menuitemcheckbox"].destructive {
+    color: var(--yorozu-menu-destructive);
+}
+
+[data-yorozu-menu] [role="separator"] {
+    height: 1px;
+    margin: var(--yorozu-menu-divider-margin);
+    background: var(--yorozu-menu-divider);
+    border: none;
+}

package/history.d.ts

@@ -0,0 +1,11 @@
+export declare const MENU_HISTORY_STATE: {
+    yorozuMenu: 1;
+};
+export declare function isMenuHistoryState(state: unknown, marker?: Record<string, unknown>): boolean;
+export type HistoryLayer = {
+    release: () => void;
+};
+export declare function bindHistoryLayer(opts: {
+    onBack: () => void;
+    state?: Record<string, unknown>;
+}): HistoryLayer;

package/index.d.ts

@@ -0,0 +1,14 @@
+export { MENU_VIEW_MARGIN_PX, MENU_POINTER_NUDGE_PX, MENU_MAX_HEIGHT_BOTTOM_MARGIN_PX, placeFixedMenu, } from './place-fixed';
+export type { MenuPositionX, MenuPositionY, PlaceFixedMenuInput, PlaceFixedMenuResult } from './place-fixed';
+export { COMPOSER_MENU_GAP_PX, placeAboveAnchor } from './place-above';
+export type { MenuAlign, AnchorBox, ViewportBox, AboveAnchorPlacement } from './place-above';
+export { MENU_FOCUSABLE_SELECTOR, moveMenuFocus } from './keyboard';
+export { MENU_SUBMENU_DELAY_MS, createSubmenuOpenRegistry, createSubmenuHover } from './submenu';
+export type { SubmenuAnchor, SubmenuOpenRegistry, SubmenuHover } from './submenu';
+export { MENU_LONG_PRESS_MS, MENU_LONG_PRESS_SWALLOW_MS, bindLongPress } from './long-press';
+export type { LongPressBinding } from './long-press';
+export { MENU_HISTORY_STATE, isMenuHistoryState, bindHistoryLayer } from './history';
+export type { HistoryLayer } from './history';
+export { MENU_POPOVER_OPEN_MS, MENU_POPOVER_CLOSE_MS, MENU_POPOVER_OPEN_EASING, MENU_POPOVER_CLOSE_EASING, MENU_POPOVER_SCALE, createMenuPopover, } from './popover';
+export { createMenuSession } from './session';
+export type { PlacePointerOpts, MenuSessionOpts, MenuSession } from './session';

package/index.js

@@ -0,0 +1,603 @@
+//#region src/place-fixed.ts
+var MENU_VIEW_MARGIN_PX = 16;
+var MENU_POINTER_NUDGE_PX = 3;
+var MENU_MAX_HEIGHT_BOTTOM_MARGIN_PX = 12;
+function clamp(n, min, max) {
+	if (max < min) return min;
+	return Math.min(Math.max(n, min), max);
+}
+function placeFixedMenu(input) {
+	let margin = input.margin ?? 16;
+	let extraMinWidth = input.extraMinWidth ?? 0;
+	let extraTopSpace = input.extraTopSpace ?? 0;
+	let extraPaddingX = input.extraPaddingX ?? 0;
+	let width = Math.max(input.menuWidth, extraMinWidth);
+	let height = input.menuHeight;
+	let positionX;
+	if (input.anchorX + width + extraPaddingX < input.viewportWidth) positionX = "left";
+	else if (input.anchorX - width > 0) positionX = "right";
+	else positionX = "left";
+	let positionY = input.anchorY + height < input.viewportHeight ? "top" : "bottom";
+	let left = positionX === "left" ? input.anchorX + 3 : input.anchorX - width;
+	let top = positionY === "top" ? input.anchorY : input.anchorY - height;
+	left = clamp(left, margin, input.viewportWidth - width - margin);
+	top = clamp(top, margin + extraTopSpace, input.viewportHeight - height - margin);
+	let originX = input.anchorX - left;
+	let originY = input.anchorY - top;
+	let origin = `${originX}px ${originY}px`;
+	let maxHeight = input.withMaxHeight ? Math.max(0, input.viewportHeight - 12) : void 0;
+	return {
+		left,
+		top,
+		positionX,
+		positionY,
+		originX,
+		originY,
+		origin,
+		maxHeight
+	};
+}
+//#endregion
+//#region src/place-above.ts
+var COMPOSER_MENU_GAP_PX = 8;
+function placeAboveAnchor(anchor, align, viewport, gapPx) {
+	let vp = viewport ?? {
+		width: window.innerWidth,
+		height: window.innerHeight
+	};
+	let gap = gapPx ?? 8;
+	let bottom = Math.max(0, vp.height - anchor.top + gap);
+	if (align === "end") return {
+		bottom,
+		left: void 0,
+		right: Math.max(0, vp.width - anchor.right),
+		origin: "bottom right"
+	};
+	return {
+		bottom,
+		left: Math.max(0, anchor.left),
+		right: void 0,
+		origin: "bottom left"
+	};
+}
+//#endregion
+//#region src/keyboard.ts
+var MENU_FOCUSABLE_SELECTOR = "[role=\"menuitem\"]:not(.disabled):not([aria-disabled=\"true\"]), [role=\"menuitemcheckbox\"]:not(.disabled):not([aria-disabled=\"true\"])";
+function moveMenuFocus(root, direction) {
+	let items = Array.from(root.querySelectorAll(MENU_FOCUSABLE_SELECTOR));
+	if (items.length === 0) return;
+	let activeIndex = items.indexOf(document.activeElement);
+	let nextIndex;
+	if (activeIndex < 0) nextIndex = direction === 1 ? 0 : items.length - 1;
+	else nextIndex = Math.min(Math.max(activeIndex + direction, 0), items.length - 1);
+	let item = items[nextIndex];
+	item.focus({ preventScroll: true });
+	item.scrollIntoView({ block: "nearest" });
+}
+//#endregion
+//#region src/submenu.ts
+var MENU_SUBMENU_DELAY_MS = 150;
+function createSubmenuOpenRegistry() {
+	let current = null;
+	return {
+		registerOpen(closeFn) {
+			if (current === closeFn) return;
+			current?.();
+			current = closeFn;
+		},
+		unregister(closeFn) {
+			if (current === closeFn) current = null;
+		}
+	};
+}
+function createSubmenuHover(opts) {
+	let openTimer;
+	let closeTimer;
+	let stickyUntilEnter = false;
+	function clearOpenTimer() {
+		if (openTimer != null) {
+			clearTimeout(openTimer);
+			openTimer = void 0;
+		}
+	}
+	function clearCloseTimer() {
+		if (closeTimer != null) {
+			clearTimeout(closeTimer);
+			closeTimer = void 0;
+		}
+	}
+	function open() {
+		let rect = opts.getRect();
+		if (rect == null) return;
+		clearOpenTimer();
+		clearCloseTimer();
+		opts.setOpen({
+			x: rect.right - 16,
+			y: rect.top
+		});
+	}
+	function close() {
+		stickyUntilEnter = false;
+		clearOpenTimer();
+		clearCloseTimer();
+		opts.setOpen(null);
+	}
+	function openFromClick() {
+		stickyUntilEnter = true;
+		open();
+	}
+	function scheduleOpen() {
+		clearCloseTimer();
+		if (opts.isOpen() || openTimer != null) return;
+		openTimer = setTimeout(() => {
+			openTimer = void 0;
+			open();
+		}, 150);
+	}
+	function scheduleClose() {
+		clearOpenTimer();
+		if (stickyUntilEnter) return;
+		if (closeTimer != null) return;
+		closeTimer = setTimeout(() => {
+			closeTimer = void 0;
+			stickyUntilEnter = false;
+			opts.setOpen(null);
+		}, 150);
+	}
+	function cancelClose() {
+		stickyUntilEnter = false;
+		clearCloseTimer();
+	}
+	function clear() {
+		stickyUntilEnter = false;
+		clearOpenTimer();
+		clearCloseTimer();
+	}
+	return {
+		open,
+		openFromClick,
+		close,
+		scheduleOpen,
+		scheduleClose,
+		cancelClose,
+		clear
+	};
+}
+//#endregion
+//#region src/long-press.ts
+var MENU_LONG_PRESS_MS = 200;
+var MENU_LONG_PRESS_SWALLOW_MS = 400;
+function bindLongPress(node, opts) {
+	let enabled = opts?.enabled !== false;
+	let pressTimer;
+	let swallowTimer;
+	let attached = false;
+	function clearPressTimer() {
+		if (pressTimer != null) {
+			clearTimeout(pressTimer);
+			pressTimer = void 0;
+		}
+	}
+	function removeSwallow() {
+		if (swallowTimer != null) {
+			clearTimeout(swallowTimer);
+			swallowTimer = void 0;
+		}
+		node.removeEventListener("touchend", swallow, true);
+		node.removeEventListener("click", swallow, true);
+	}
+	function swallow(event) {
+		event.preventDefault();
+		event.stopPropagation();
+	}
+	function armSwallow() {
+		removeSwallow();
+		node.addEventListener("touchend", swallow, true);
+		node.addEventListener("click", swallow, true);
+		swallowTimer = setTimeout(() => {
+			swallowTimer = void 0;
+			removeSwallow();
+		}, 400);
+	}
+	function onTouchStart(event) {
+		if (!enabled) return;
+		clearPressTimer();
+		let touch = event.changedTouches[0] ?? event.touches[0];
+		if (touch == null) return;
+		let clientX = touch.clientX;
+		let clientY = touch.clientY;
+		pressTimer = setTimeout(() => {
+			pressTimer = void 0;
+			node.dispatchEvent(new MouseEvent("contextmenu", {
+				bubbles: true,
+				cancelable: true,
+				clientX,
+				clientY
+			}));
+			armSwallow();
+		}, 200);
+	}
+	function onMousePointerDown(event) {
+		if (event.pointerType === "mouse") clearPressTimer();
+	}
+	function attach() {
+		if (attached) return;
+		attached = true;
+		node.addEventListener("touchstart", onTouchStart, { passive: true });
+		node.addEventListener("touchmove", clearPressTimer);
+		node.addEventListener("touchend", clearPressTimer);
+		node.addEventListener("touchcancel", clearPressTimer);
+		node.addEventListener("pointerdown", onMousePointerDown);
+	}
+	function detach() {
+		if (!attached) return;
+		attached = false;
+		clearPressTimer();
+		removeSwallow();
+		node.removeEventListener("touchstart", onTouchStart);
+		node.removeEventListener("touchmove", clearPressTimer);
+		node.removeEventListener("touchend", clearPressTimer);
+		node.removeEventListener("touchcancel", clearPressTimer);
+		node.removeEventListener("pointerdown", onMousePointerDown);
+	}
+	if (enabled) attach();
+	return {
+		update(o) {
+			let next = o?.enabled !== false;
+			if (next === enabled) return;
+			enabled = next;
+			if (enabled) attach();
+			else detach();
+		},
+		destroy() {
+			enabled = false;
+			detach();
+		}
+	};
+}
+//#endregion
+//#region src/history.ts
+var MENU_HISTORY_STATE = { yorozuMenu: 1 };
+function isMenuHistoryState(state, marker) {
+	if (state == null || typeof state !== "object") return false;
+	let expected = marker ?? MENU_HISTORY_STATE;
+	let record = state;
+	for (let key of Object.keys(expected)) if (record[key] !== expected[key]) return false;
+	return true;
+}
+function bindHistoryLayer(opts) {
+	let marker = opts.state ?? MENU_HISTORY_STATE;
+	let released = false;
+	history.pushState(marker, "");
+	function onPopState() {
+		if (released) return;
+		released = true;
+		window.removeEventListener("popstate", onPopState);
+		opts.onBack();
+	}
+	window.addEventListener("popstate", onPopState);
+	return { release() {
+		if (released) return;
+		released = true;
+		window.removeEventListener("popstate", onPopState);
+		if (isMenuHistoryState(history.state, marker)) history.go(-1);
+	} };
+}
+//#endregion
+//#region ../animations/src/core/playback.ts
+function createPlayback() {
+	let cancelled = false;
+	let settled = false;
+	let resolveDone;
+	let done = new Promise((resolve) => {
+		resolveDone = resolve;
+	});
+	let resolve = (ran) => {
+		if (settled) return;
+		settled = true;
+		resolveDone(cancelled ? false : ran);
+	};
+	return {
+		playback: {
+			done,
+			cancel: () => {
+				cancelled = true;
+				resolve(false);
+			}
+		},
+		resolve,
+		isCancelled: () => cancelled
+	};
+}
+function animateElement(el, keyframes, options) {
+	if (typeof el.animate !== "function") return null;
+	return el.animate(keyframes, options);
+}
+//#endregion
+//#region ../animations/src/core/styles.ts
+function applyStyles(el, styles) {
+	for (let key in styles) el.style.setProperty(key, styles[key]);
+}
+function clearStyles(el, keys) {
+	for (let key of keys) el.style.removeProperty(key);
+}
+function closedFrame(scale) {
+	return {
+		transform: `scale(${scale})`,
+		opacity: "0"
+	};
+}
+var OPEN = {
+	transform: "scale(1)",
+	opacity: "1"
+};
+var STYLE_KEYS = ["will-change"];
+function createPopover(config) {
+	let lastOrigin = config?.origin ?? "center top";
+	let lastScale = config?.scale ?? .92;
+	let defaultDuration = config?.durationMs ?? 120;
+	let defaultEasing = config?.easing ?? "ease-out";
+	let current = null;
+	let stopCurrent = () => {
+		if (!current) return;
+		current.anim?.cancel();
+		current.resolve(false);
+		current = null;
+	};
+	let play = (el, opening, options) => {
+		stopCurrent();
+		let { playback, resolve, isCancelled } = createPlayback();
+		let durationMs = options?.durationMs ?? defaultDuration;
+		let easing = options?.easing ?? defaultEasing;
+		if (options?.origin != null) lastOrigin = options.origin;
+		if (options?.scale != null) lastScale = options.scale;
+		let origin = options?.origin ?? lastOrigin;
+		let closed = closedFrame(options?.scale ?? lastScale);
+		applyStyles(el, { "transform-origin": origin });
+		let from = opening ? closed : OPEN;
+		let to = opening ? OPEN : closed;
+		if (durationMs <= 0) {
+			applyStyles(el, {
+				transform: to.transform,
+				opacity: to.opacity
+			});
+			resolve(true);
+			return playback;
+		}
+		applyStyles(el, {
+			transform: from.transform,
+			opacity: from.opacity,
+			"will-change": "transform, opacity"
+		});
+		let anim = animateElement(el, [from, to], {
+			duration: durationMs,
+			easing,
+			fill: "forwards"
+		});
+		let run = {
+			anim,
+			resolve
+		};
+		current = run;
+		let finish = (ran) => {
+			if (current !== run) return;
+			current = null;
+			clearStyles(el, STYLE_KEYS);
+			applyStyles(el, {
+				transform: to.transform,
+				opacity: to.opacity
+			});
+			resolve(ran);
+		};
+		let cancel = playback.cancel;
+		playback.cancel = () => {
+			if (current === run) {
+				anim?.cancel();
+				current = null;
+				clearStyles(el, STYLE_KEYS);
+			}
+			cancel();
+		};
+		if (!anim) {
+			finish(true);
+			return playback;
+		}
+		anim.finished.then(() => finish(true), () => {
+			if (!isCancelled() && current === run) finish(false);
+		});
+		return playback;
+	};
+	return {
+		playOpen: (el, options) => play(el, true, options),
+		playClose: (el, options) => play(el, false, options)
+	};
+}
+//#endregion
+//#region src/popover.ts
+var MENU_POPOVER_OPEN_MS = 150;
+var MENU_POPOVER_CLOSE_MS = 200;
+var MENU_POPOVER_OPEN_EASING = "cubic-bezier(0.2, 0, 0.2, 1)";
+var MENU_POPOVER_CLOSE_EASING = "ease-in";
+var MENU_POPOVER_SCALE = .85;
+function createMenuPopover() {
+	let inner = createPopover({ scale: MENU_POPOVER_SCALE });
+	return {
+		playOpen: (el, options) => inner.playOpen(el, {
+			durationMs: 150,
+			easing: MENU_POPOVER_OPEN_EASING,
+			...options
+		}),
+		playClose: (el, options) => inner.playClose(el, {
+			durationMs: 200,
+			easing: MENU_POPOVER_CLOSE_EASING,
+			...options
+		})
+	};
+}
+//#endregion
+//#region src/session.ts
+function createMenuSession(opts) {
+	let popover = createMenuPopover();
+	let el = null;
+	let closing = false;
+	let currentPlayback = null;
+	let rafId = null;
+	let historyLayer = null;
+	let insideSelector = opts.insideSelector ?? "[data-yorozu-menu]";
+	function durationFor(kind) {
+		let d = opts.getDurationMs?.(kind);
+		if (d === 0) return 0;
+		if (typeof d === "number" && d > 0) return d;
+		return kind === "open" ? 150 : 200;
+	}
+	function cancelRaf() {
+		if (rafId == null) return;
+		cancelAnimationFrame(rafId);
+		rafId = null;
+	}
+	function resetClosing() {
+		if (!closing) return;
+		currentPlayback?.cancel();
+		currentPlayback = null;
+		closing = false;
+	}
+	function finishClose() {
+		historyLayer?.release();
+		historyLayer = null;
+	}
+	function playOpen(origin) {
+		if (el == null) return;
+		currentPlayback = popover.playOpen(el, {
+			origin,
+			durationMs: durationFor("open"),
+			easing: MENU_POPOVER_OPEN_EASING
+		});
+		el.focus({ preventScroll: true });
+	}
+	function applyPointer(anchor, placeOpts) {
+		if (el == null) return;
+		let placed = placeFixedMenu({
+			anchorX: anchor.x,
+			anchorY: anchor.y,
+			menuWidth: el.offsetWidth,
+			menuHeight: el.offsetHeight,
+			viewportWidth: window.innerWidth,
+			viewportHeight: window.innerHeight,
+			margin: placeOpts?.margin,
+			extraMinWidth: placeOpts?.extraMinWidth,
+			extraTopSpace: placeOpts?.extraTopSpace,
+			extraPaddingX: placeOpts?.extraPaddingX,
+			withMaxHeight: placeOpts?.withMaxHeight
+		});
+		el.style.left = `${placed.left}px`;
+		el.style.top = `${placed.top}px`;
+		el.style.right = "unset";
+		el.style.bottom = "unset";
+		if (placed.maxHeight != null) {
+			el.style.setProperty("--yorozu-menu-max-height", `${placed.maxHeight}px`);
+			if (placeOpts?.applyMaxHeightStyle !== false) {
+				el.style.maxHeight = `${placed.maxHeight}px`;
+				el.style.overflow = "auto";
+			}
+		} else {
+			el.style.removeProperty("--yorozu-menu-max-height");
+			el.style.maxHeight = "";
+			el.style.overflow = "";
+		}
+		playOpen(placed.origin);
+	}
+	function close() {
+		if (closing) return;
+		closing = true;
+		cancelRaf();
+		if (el == null) {
+			finishClose();
+			return;
+		}
+		let playback = popover.playClose(el, {
+			durationMs: durationFor("close"),
+			easing: MENU_POPOVER_CLOSE_EASING
+		});
+		currentPlayback = playback;
+		playback.done.then((ran) => {
+			if (!ran || !closing || currentPlayback !== playback) return;
+			finishClose();
+			opts.onClose();
+		});
+	}
+	function onPointerDown(event) {
+		if (closing) return;
+		if (event.target?.closest?.(insideSelector)) return;
+		close();
+	}
+	function onKeyDown(event) {
+		if (event.key === "Escape") close();
+	}
+	function attach(node) {
+		if (el === node) return;
+		if (el != null) {
+			document.removeEventListener("pointerdown", onPointerDown, false);
+			document.removeEventListener("keydown", onKeyDown);
+			historyLayer?.release();
+			historyLayer = null;
+		}
+		el = node;
+		if (!opts.nested) historyLayer = bindHistoryLayer({
+			onBack: close,
+			state: opts.historyState
+		});
+		document.addEventListener("pointerdown", onPointerDown, false);
+		if (opts.listenEsc !== false) document.addEventListener("keydown", onKeyDown);
+	}
+	function placePointer(anchor, placeOpts) {
+		resetClosing();
+		cancelRaf();
+		if (el == null) return;
+		if (el.offsetWidth === 0 || el.offsetHeight === 0) {
+			rafId = requestAnimationFrame(() => {
+				rafId = null;
+				applyPointer(anchor, placeOpts);
+			});
+			return;
+		}
+		applyPointer(anchor, placeOpts);
+	}
+	function placeAbove(placed) {
+		resetClosing();
+		cancelRaf();
+		if (el == null) return;
+		el.style.bottom = `${placed.bottom}px`;
+		el.style.top = "unset";
+		if (placed.left != null) {
+			el.style.left = `${placed.left}px`;
+			el.style.right = "unset";
+		} else {
+			el.style.right = `${placed.right ?? 0}px`;
+			el.style.left = "unset";
+		}
+		el.style.removeProperty("--yorozu-menu-max-height");
+		el.style.maxHeight = "";
+		el.style.overflow = "";
+		playOpen(placed.origin);
+	}
+	function destroy() {
+		currentPlayback?.cancel();
+		currentPlayback = null;
+		cancelRaf();
+		document.removeEventListener("pointerdown", onPointerDown, false);
+		document.removeEventListener("keydown", onKeyDown);
+		historyLayer?.release();
+		historyLayer = null;
+		el = null;
+		closing = false;
+	}
+	return {
+		attach,
+		placePointer,
+		placeAbove,
+		close,
+		destroy
+	};
+}
+//#endregion
+export { COMPOSER_MENU_GAP_PX, MENU_FOCUSABLE_SELECTOR, MENU_HISTORY_STATE, MENU_LONG_PRESS_MS, MENU_LONG_PRESS_SWALLOW_MS, MENU_MAX_HEIGHT_BOTTOM_MARGIN_PX, MENU_POINTER_NUDGE_PX, MENU_POPOVER_CLOSE_EASING, MENU_POPOVER_CLOSE_MS, MENU_POPOVER_OPEN_EASING, MENU_POPOVER_OPEN_MS, MENU_POPOVER_SCALE, MENU_SUBMENU_DELAY_MS, MENU_VIEW_MARGIN_PX, bindHistoryLayer, bindLongPress, createMenuPopover, createMenuSession, createSubmenuHover, createSubmenuOpenRegistry, isMenuHistoryState, moveMenuFocus, placeAboveAnchor, placeFixedMenu };

package/keyboard.d.ts

@@ -0,0 +1,2 @@
+export declare const MENU_FOCUSABLE_SELECTOR: string;
+export declare function moveMenuFocus(root: HTMLElement, direction: 1 | -1): void;

package/long-press.d.ts

@@ -0,0 +1,11 @@
+export declare const MENU_LONG_PRESS_MS: number;
+export declare const MENU_LONG_PRESS_SWALLOW_MS: number;
+export type LongPressBinding = {
+    update: (o?: {
+        enabled?: boolean;
+    }) => void;
+    destroy: () => void;
+};
+export declare function bindLongPress(node: HTMLElement, opts?: {
+    enabled?: boolean;
+}): LongPressBinding;

package/package.json

@@ -0,0 +1,28 @@
+{
+    "name": "@yorozu/context-menu",
+    "type": "module",
+    "version": "0.5.0",
+    "description": "framework-agnostic pointer-menu placement, motion, and session",
+    "license": "MIT",
+    "dependencies": {
+        "@yorozu/animations": "^0.5.0"
+    },
+    "exports": {
+        ".": {
+            "import": {
+                "types": "./index.d.ts",
+                "default": "./index.js"
+            }
+        },
+        "./tokens.css": "./tokens.css",
+        "./default.css": "./default.css"
+    },
+    "sideEffects": [
+        "*.css"
+    ],
+    "author": "inshinrei",
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/inshinrei/yorozu.git"
+    }
+}

package/place-above.d.ts

@@ -0,0 +1,18 @@
+export declare const COMPOSER_MENU_GAP_PX: number;
+export type MenuAlign = "start" | "end";
+export type AnchorBox = {
+    top: number;
+    left: number;
+    right: number;
+};
+export type ViewportBox = {
+    width: number;
+    height: number;
+};
+export type AboveAnchorPlacement = {
+    bottom: number;
+    left: number | undefined;
+    right: number | undefined;
+    origin: "bottom left" | "bottom right";
+};
+export declare function placeAboveAnchor(anchor: AnchorBox, align: MenuAlign, viewport?: ViewportBox, gapPx?: number): AboveAnchorPlacement;

package/place-fixed.d.ts

@@ -0,0 +1,29 @@
+export declare const MENU_VIEW_MARGIN_PX: number;
+export declare const MENU_POINTER_NUDGE_PX: number;
+export declare const MENU_MAX_HEIGHT_BOTTOM_MARGIN_PX: number;
+export type MenuPositionX = "left" | "right";
+export type MenuPositionY = "top" | "bottom";
+export type PlaceFixedMenuInput = {
+    anchorX: number;
+    anchorY: number;
+    menuWidth: number;
+    menuHeight: number;
+    viewportWidth: number;
+    viewportHeight: number;
+    margin?: number;
+    extraMinWidth?: number;
+    extraTopSpace?: number;
+    extraPaddingX?: number;
+    withMaxHeight?: boolean;
+};
+export type PlaceFixedMenuResult = {
+    left: number;
+    top: number;
+    positionX: MenuPositionX;
+    positionY: MenuPositionY;
+    originX: number;
+    originY: number;
+    origin: string;
+    maxHeight: number | undefined;
+};
+export declare function placeFixedMenu(input: PlaceFixedMenuInput): PlaceFixedMenuResult;

package/popover.d.ts

@@ -0,0 +1,7 @@
+import { Popover } from '@yorozu/animations';
+export declare const MENU_POPOVER_OPEN_MS: number;
+export declare const MENU_POPOVER_CLOSE_MS: number;
+export declare const MENU_POPOVER_OPEN_EASING: string;
+export declare const MENU_POPOVER_CLOSE_EASING: string;
+export declare const MENU_POPOVER_SCALE: number;
+export declare function createMenuPopover(): Popover;

package/session.d.ts

@@ -0,0 +1,28 @@
+import { AboveAnchorPlacement } from './place-above';
+export type PlacePointerOpts = {
+    extraMinWidth?: number;
+    extraTopSpace?: number;
+    extraPaddingX?: number;
+    withMaxHeight?: boolean;
+    margin?: number;
+    applyMaxHeightStyle?: boolean;
+};
+export type MenuSessionOpts = {
+    onClose: () => void;
+    getDurationMs?: (kind: "open" | "close") => number;
+    nested?: boolean;
+    listenEsc?: boolean;
+    insideSelector?: string;
+    historyState?: Record<string, unknown>;
+};
+export type MenuSession = {
+    attach: (el: HTMLElement) => void;
+    placePointer: (anchor: {
+        x: number;
+        y: number;
+    }, opts?: PlacePointerOpts) => void;
+    placeAbove: (placed: AboveAnchorPlacement) => void;
+    close: () => void;
+    destroy: () => void;
+};
+export declare function createMenuSession(opts: MenuSessionOpts): MenuSession;

package/submenu.d.ts

@@ -0,0 +1,27 @@
+export declare const MENU_SUBMENU_DELAY_MS: number;
+export type SubmenuOpenRegistry = {
+    registerOpen: (closeFn: () => void) => void;
+    unregister: (closeFn: () => void) => void;
+};
+export declare function createSubmenuOpenRegistry(): SubmenuOpenRegistry;
+export type SubmenuAnchor = {
+    x: number;
+    y: number;
+};
+export type SubmenuHover = {
+    open: () => void;
+    openFromClick: () => void;
+    close: () => void;
+    scheduleOpen: () => void;
+    scheduleClose: () => void;
+    cancelClose: () => void;
+    clear: () => void;
+};
+export declare function createSubmenuHover(opts: {
+    getRect: () => {
+        right: number;
+        top: number;
+    } | undefined;
+    isOpen: () => boolean;
+    setOpen: (next: SubmenuAnchor | null) => void;
+}): SubmenuHover;

package/tokens.css

@@ -0,0 +1,28 @@
+/* Compact default tokens for [data-yorozu-menu]. Override via CSS custom properties. */
+[data-yorozu-menu] {
+    --yorozu-menu-min-width: 13.5rem;
+    --yorozu-menu-radius: 1rem;
+    --yorozu-menu-pad-block: 0.25rem;
+    --yorozu-menu-z: 1000;
+    --yorozu-menu-bg: #ffffffbb;
+    --yorozu-menu-shadow: 0 0.25rem 0.5rem 0.125rem #72727240;
+    --yorozu-menu-color: #000000;
+    --yorozu-menu-font-size: 0.875rem;
+    --yorozu-menu-font-weight: 500;
+    --yorozu-menu-font-family: system-ui, sans-serif;
+    --yorozu-menu-blur: 10px;
+    --yorozu-menu-item-margin: 0.125rem 0.25rem;
+    --yorozu-menu-item-padding: 0.25rem;
+    --yorozu-menu-item-padding-inline-end: 0.75rem;
+    --yorozu-menu-item-radius: 0.75rem;
+    --yorozu-menu-item-gap: 0.5rem;
+    --yorozu-menu-item-min-block: 2rem;
+    --yorozu-menu-item-hover: #000000b2;
+    --yorozu-menu-item-active-scale: 0.98;
+    --yorozu-menu-icon-size: 1.25rem;
+    --yorozu-menu-icon-color: #707579;
+    --yorozu-menu-destructive: #e53935;
+    --yorozu-menu-divider: #0000001a;
+    --yorozu-menu-disabled-opacity: 0.5;
+    --yorozu-menu-divider-margin: 0.25rem 0.5rem;
+}