entasis 0.11.0 → 0.13.0

package/dist/components/Confirmation/Confirmation.svelte

@@ -7,7 +7,9 @@
 	import type { ConfirmationProps } from './confirmation.props.js';
 	import { useConfirmationTheme } from './confirmation.theme.js';
 	import { useTheme } from '../Theme/theme.state.svelte.js';
-	import { onMount, tick } from 'svelte';
+	import { onMount } from 'svelte';
+	import { composeHandlers } from '../../utils/handlers.js';
+	import type { OpenChangeDetails } from '../../utils/openChange.js';
 	let { theme }: ConfirmationProps = $props();
 
 	let confirmations = $state<ConfirmationState[]>([]);
@@ -15,45 +17,84 @@
 	const classes = $derived(useConfirmationTheme(theme));
 	const themeState = useTheme();
 
-	// Mounted first, then opened on the next tick so the Dialog plays its enter transition.
-	onMount(() =>
-		registerConfirmationHost(themeState, {
+	// Requests the user has not answered yet. A plain set, not `$state`: the unmount teardown
+	// reads it, and a `$state` read in teardown can return the value from before the last change.
+	// eslint-disable-next-line svelte/prefer-svelte-reactivity -- read in teardown, never rendered
+	const unanswered = new Set<(outcome: ConfirmationOutcome) => void>();
+	// Set by the unmount teardown; a plain flag for the same reason.
+	let unmounted = false;
+
+	// Each request mounts its Dialog open: the Dialog itself renders once mounted, so it still
+	// plays its enter transition and reports `onAfterOpen`.
+	onMount(() => {
+		const unregister = registerConfirmationHost(themeState, {
 			request: (detail) =>
-				new Promise<ConfirmationOutcome>((settle) => {
+				new Promise<ConfirmationOutcome>((resolve) => {
+					const settle = (outcome: ConfirmationOutcome) => {
+						unanswered.delete(settle);
+						resolve(outcome);
+					};
+					unanswered.add(settle);
 					const confirmationState = Object.assign({}, detail, {
-						isOpen: false,
+						isOpen: true,
 						loading: false,
 						settle
 					}) satisfies ConfirmationState;
 					confirmations.push(confirmationState);
-					tick().then(() => {
-						confirmations.forEach((a) => {
-							if (a.id === confirmationState.id) {
-								a.isOpen = true;
-							}
-						});
-					});
 				})
-		})
-	);
+		});
+		return () => {
+			unmounted = true;
+			unregister();
+			// Nobody can answer these dialogs any more: settle them as declined so an
+			// `await confirmation()` never hangs on a host that left (a layout remount). A request
+			// whose `onConfirm` is running was answered, and settles when that finishes.
+			for (const settle of [...unanswered]) settle({ confirmed: false });
+		};
+	});
 
-	const actionConfirmation =
-		(
-			confirmation: ConfirmationState,
-			continued: boolean,
-			onclick?: ButtonProps['onclick']
-		): NonNullable<ButtonProps['onclick']> =>
-		async (event) => {
-			onclick?.(event);
-			let result;
-			if (continued) {
-				const res = confirmation.onConfirm?.();
-				confirmation.loading = !!res && res instanceof Promise;
-				result = continued && res ? await res : undefined;
+	// The button's own `onclick` runs first; calling `event.preventDefault()` there keeps the
+	// question open.
+	const actionConfirmation = (
+		confirmation: ConfirmationState,
+		continued: boolean,
+		onclick?: ButtonProps['onclick']
+	): NonNullable<ButtonProps['onclick']> =>
+		composeHandlers(onclick, async () => {
+			let result: unknown;
+			if (continued && confirmation.onConfirm) {
+				// The user answered: while `onConfirm` runs, an unmount must not decline the request
+				// (the action may be what navigated away), so it settles with the action's outcome.
+				unanswered.delete(confirmation.settle);
+				// A throwing or rejected `onConfirm` ends the loading state and keeps the dialog
+				// open, so Cancel works again; the error still propagates like any handler error.
+				try {
+					const pending = confirmation.onConfirm();
+					if (pending instanceof Promise) confirmation.loading = true;
+					result = await pending;
+				} catch (error) {
+					// The question is open again, unless the host left and nobody can answer it.
+					if (unmounted) confirmation.settle({ confirmed: false });
+					else unanswered.add(confirmation.settle);
+					throw error;
+				} finally {
+					confirmation.loading = false;
+				}
 			}
-			confirmation.loading = false;
 			confirmation.isOpen = false;
 			confirmation.settle({ confirmed: continued, result });
+		});
+	// Escape (and the Android Back gesture) answers a question as Cancel, unless an action is
+	// running: then the dialog stays, like its buttons, until it finishes. Outside presses never
+	// answer it. The state it ends in is the one `confirmation.settle` reports.
+	const cancelOnEscape =
+		(confirmation: ConfirmationState) => (open: boolean, details: OpenChangeDetails) => {
+			if (open) return;
+			if (confirmation.loading) {
+				details.cancel();
+				return;
+			}
+			confirmation.settle({ confirmed: false });
 		};
 	// A Dialog sizes to its content, so it takes the device decision from JS rather than CSS — and
 	// from the SAME value the Dialog itself used to pick sheet-versus-floating, instead of a second
@@ -68,9 +109,9 @@
 		onAfterClose={() => {
 			confirmations = confirmations.filter((a) => a.id !== confirmation.id);
 		}}
-		closable={false}
+		closeButton={false}
 		closeOnClickOutside={false}
-		closeOnEscape={false}
+		onOpenChange={cancelOnEscape(confirmation)}
 		bind:open={confirmation.isOpen}
 		title={confirmation.title}
 		description={confirmation.description}

package/dist/components/Confirmation/confirmation.mcp.d.ts

@@ -1 +1 @@
-export declare const confirmationDescription = "\nThe confirmation function displays a modal dialog that asks the user to confirm or cancel an action. It returns a Promise that resolves with an object indicating whether the user confirmed or cancelled.\n\n**Usage:**\n```typescript\nimport { confirmation } from 'entasis/confirmation';\n\nconst { confirmed, result } = await confirmation({\n  title: 'Delete Item',\n  description: 'Are you sure you want to delete this item? This action cannot be undone.',\n  confirm: 'Delete',\n  cancel: 'Cancel',\n  onConfirm: async () => {\n    // Optional: Async function that runs when user confirms\n    await deleteItem();\n    return 'Item deleted successfully';\n  }\n});\n\nif (confirmed) {\n  console.log('User confirmed:', result); // result is the return value of onConfirm, or undefined\n} else {\n  console.log('User cancelled');\n}\n```\n\n**Parameters:**\n- `title` (string, required): The title displayed in the confirmation dialog\n- `description` (string, required): The description/message shown in the dialog\n- `confirm` (string | object, required): The confirm button text, or an object with `text` and Button props\n- `cancel` (string | object, required): The cancel button text, or an object with `text` and Button props\n- `onConfirm` (function, optional): An async function that runs when the user clicks confirm. Its return value is passed as `result` in the resolved promise\n\n**Returns:**\nA Promise that resolves to:\n- `{ confirmed: true, result: R }` if the user confirmed (where R is the return type of onConfirm, or void)\n- `{ confirmed: false, result: undefined }` if the user cancelled\n\n**Notes:**\n- The dialog is modal and prevents interaction with the rest of the page until the user responds\n- If `onConfirm` is provided, the confirm button shows a loading state while the function executes\n- The dialog cannot be closed by clicking outside or pressing Escape (user must click a button)\n- Requests made before any `<Confirmation />` is mounted are queued and served by the first one that mounts\n- With several mounted, the most recently mounted one serves; when it unmounts the previous one takes over again\n";
+export declare const confirmationDescription = "\nThe confirmation function displays a modal dialog that asks the user to confirm or cancel an action. It returns a Promise that resolves with an object indicating whether the user confirmed or cancelled.\n\n**Usage:**\n```typescript\nimport { confirmation } from 'entasis/confirmation';\n\nconst { confirmed, result } = await confirmation({\n  title: 'Delete Item',\n  description: 'Are you sure you want to delete this item? This action cannot be undone.',\n  confirm: 'Delete',\n  cancel: 'Cancel',\n  onConfirm: async () => {\n    // Optional: Async function that runs when user confirms\n    await deleteItem();\n    return 'Item deleted successfully';\n  }\n});\n\nif (confirmed) {\n  console.log('User confirmed:', result); // result is the return value of onConfirm, or undefined\n} else {\n  console.log('User cancelled');\n}\n```\n\n**Parameters:**\n- `title` (string, required): The title displayed in the confirmation dialog\n- `description` (string, required): The description/message shown in the dialog\n- `confirm` (string | object, required): The confirm button text, or an object with `text` and Button props\n- `cancel` (string | object, required): The cancel button text, or an object with `text` and Button props\n- `onConfirm` (function, optional): An async function that runs when the user clicks confirm. Its return value is passed as `result` in the resolved promise. If it throws or rejects, the loading state ends and the dialog stays open, so the user can retry or cancel; the error still propagates like any event handler error, so handle it inside `onConfirm` (for example with a toast)\n\n**Returns:**\nA Promise that resolves to:\n- `{ confirmed: true, result: R }` if the user confirmed (where R is the return type of onConfirm, or void)\n- `{ confirmed: false, result: undefined }` if the user cancelled, or if the `<Confirmation />` serving the request unmounts before an answer (or while a failed `onConfirm` has left the question open)\n\n**Notes:**\n- The dialog is a modal `role=\"alertdialog\"` named by `title` and described by `description`, and prevents interaction with the rest of the page until the user responds\n- If `onConfirm` is provided, the confirm button shows a loading state while the function executes\n- A press outside the dialog does nothing; Escape (and the Android Back gesture) answers it as Cancel: the promise resolves with `{ confirmed: false }` without running `onConfirm` or the Cancel button's `onclick`. While `onConfirm` is running, Escape is ignored like the buttons are. There is no close button, visible or hidden: the two answers are the only controls\n- Requests made before any `<Confirmation />` is mounted are queued and served by the first one that mounts\n- With several mounted, the most recently mounted one serves; when it unmounts the previous one takes over again\n- When a `<Confirmation />` unmounts, every request the user has not answered resolves as `{ confirmed: false }`, so an `await confirmation()` never hangs. A request whose `onConfirm` is already running (it may be what navigated away) still resolves with `{ confirmed: true, result }` when it finishes, or `{ confirmed: false }` if it fails\n";

package/dist/components/Confirmation/confirmation.mcp.js

@@ -29,17 +29,18 @@ if (confirmed) {
 - \`description\` (string, required): The description/message shown in the dialog
 - \`confirm\` (string | object, required): The confirm button text, or an object with \`text\` and Button props
 - \`cancel\` (string | object, required): The cancel button text, or an object with \`text\` and Button props
-- \`onConfirm\` (function, optional): An async function that runs when the user clicks confirm. Its return value is passed as \`result\` in the resolved promise
+- \`onConfirm\` (function, optional): An async function that runs when the user clicks confirm. Its return value is passed as \`result\` in the resolved promise. If it throws or rejects, the loading state ends and the dialog stays open, so the user can retry or cancel; the error still propagates like any event handler error, so handle it inside \`onConfirm\` (for example with a toast)
 
 **Returns:**
 A Promise that resolves to:
 - \`{ confirmed: true, result: R }\` if the user confirmed (where R is the return type of onConfirm, or void)
-- \`{ confirmed: false, result: undefined }\` if the user cancelled
+- \`{ confirmed: false, result: undefined }\` if the user cancelled, or if the \`<Confirmation />\` serving the request unmounts before an answer (or while a failed \`onConfirm\` has left the question open)
 
 **Notes:**
-- The dialog is modal and prevents interaction with the rest of the page until the user responds
+- The dialog is a modal \`role="alertdialog"\` named by \`title\` and described by \`description\`, and prevents interaction with the rest of the page until the user responds
 - If \`onConfirm\` is provided, the confirm button shows a loading state while the function executes
-- The dialog cannot be closed by clicking outside or pressing Escape (user must click a button)
+- A press outside the dialog does nothing; Escape (and the Android Back gesture) answers it as Cancel: the promise resolves with \`{ confirmed: false }\` without running \`onConfirm\` or the Cancel button's \`onclick\`. While \`onConfirm\` is running, Escape is ignored like the buttons are. There is no close button, visible or hidden: the two answers are the only controls
 - Requests made before any \`<Confirmation />\` is mounted are queued and served by the first one that mounts
 - With several mounted, the most recently mounted one serves; when it unmounts the previous one takes over again
+- When a \`<Confirmation />\` unmounts, every request the user has not answered resolves as \`{ confirmed: false }\`, so an \`await confirmation()\` never hangs. A request whose \`onConfirm\` is already running (it may be what navigated away) still resolves with \`{ confirmed: true, result }\` when it finishes, or \`{ confirmed: false }\` if it fails
 `;

package/dist/components/Confirmation/confirmation.theme.d.ts

@@ -1,30 +1,30 @@
 import { type InferComponentTheme } from '../../utils/cva/index.js';
 export declare const confirmationTheme: {
-    root: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    footer: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+    root: (props?: import("../../utils/cva/types.ts").CVAClassProp | undefined) => string;
+    footer: (props?: (import("../../utils/cva/types.ts").CVAVariantSchema<{
         layout: {
             stacked: string;
             inline: string;
         };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    }> & import("../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
 };
 export type ConfirmationTheme = typeof confirmationTheme;
 export type ConfirmationThemeProps = InferComponentTheme<ConfirmationTheme>;
 export declare const setConfirmationTheme: (theme: InferComponentTheme<{
-    root: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    footer: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+    root: (props?: import("../../utils/cva/types.ts").CVAClassProp | undefined) => string;
+    footer: (props?: (import("../../utils/cva/types.ts").CVAVariantSchema<{
         layout: {
             stacked: string;
             inline: string;
         };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    }> & import("../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
 }>) => void;
-export declare const useConfirmationTheme: import("../../utils/cva/theme.js").UseComponentTheme<{
-    root: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    footer: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+export declare const useConfirmationTheme: import("../../utils/cva/theme.ts").UseComponentTheme<{
+    root: (props?: import("../../utils/cva/types.ts").CVAClassProp | undefined) => string;
+    footer: (props?: (import("../../utils/cva/types.ts").CVAVariantSchema<{
         layout: {
             stacked: string;
             inline: string;
         };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    }> & import("../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
 }>;

package/dist/components/ContextMenu/ContextMenu.svelte

@@ -1,9 +1,11 @@
 <script lang="ts">
 	import { createBindableValue } from '../../utils/state.svelte.js';
-	import { tick } from 'svelte';
+	import { onDestroy, tick } from 'svelte';
 	import PopupMenu from '../PopupMenu/PopupMenu.svelte';
 	import type { ContextMenuProps } from './contextMenu.props.js';
+	import type { PopupMenuProps } from '../PopupMenu/popupMenu.props.js';
 	import { useContextMenuTheme } from './contextMenu.theme.js';
+	import { createOpenChangeDetails, type OpenChangeDetails } from '../../utils/openChange.js';
 
 	let {
 		items,
@@ -21,6 +23,14 @@
 		...attachments
 	}: ContextMenuProps = $props();
 	const classes = $derived(useContextMenuTheme(theme));
+	// How long a touch holds before it opens the menu, how far the finger may drift meanwhile (and
+	// how far from the anchor a second right-click still counts as the same spot), and how long
+	// after the finger lifts a native `contextmenu` is still taken for part of that touch.
+	const LONG_PRESS_MS = 500;
+	const GESTURE_TOLERANCE = 8;
+	const TOUCH_GESTURE_MS = 700;
+	// How long after the press that closed the menu its `contextmenu` still counts as part of it.
+	const SECONDARY_PRESS_MS = 1000;
 	const openState = createBindableValue(
 		() => open,
 		(next) => {
@@ -33,24 +43,92 @@
 	// pointer rather than the target element.
 	let reference = $state<{ getBoundingClientRect: () => DOMRect } | null>(null);
 
-	function setOpen(nextOpen: boolean) {
+	// Below and after the pointer unless `popup.position` says otherwise. A responsive record keeps
+	// that default below its first breakpoint, where Popover would otherwise fall back to `top`.
+	const position = $derived.by((): PopupMenuProps['position'] => {
+		const requested = popup?.position;
+		if (typeof requested !== 'object' || requested === null) return requested ?? 'bottom-start';
+		return { ...requested, xs: requested.xs ?? 'bottom-start' };
+	});
+
+	// Shifted back into the layout viewport, not the visual one, so the menu stays where it
+	// opened while a pinch-zoomed page pans. Submenus keep the default.
+	const collisionBoundary = $derived(popup?.collisionBoundary ?? 'layoutViewport');
+
+	// Also the PopupMenu's `onOpenChange`: its details (reason, event, `cancel()`) pass through.
+	function setOpen(nextOpen: boolean, details: OpenChangeDetails) {
 		if (openState.value === nextOpen) return;
+		onOpenChange?.(nextOpen, details);
+		if (details.isCanceled) return;
+		if (!nextOpen) noteSecondaryPress(details);
 		openState.value = nextOpen;
-		onOpenChange?.(nextOpen);
 	}
 
-	async function openAt(x: number, y: number) {
+	// A right-click on the open menu's anchor reaches the page as a `pointerdown` first, which the
+	// layer stack takes for an outside press and closes the menu with, before `contextmenu` fires.
+	// That close is remembered so the `contextmenu` that follows is read as the second right-click.
+	let secondaryDismissal: { x: number; y: number; at: number } | null = null;
+	function noteSecondaryPress({ reason, event }: OpenChangeDetails) {
+		secondaryDismissal = null;
+		if (reason !== 'outside-press' || !event) return;
+		const press = event as Partial<PointerEvent>;
+		if (press.pointerType === 'touch' || (press.button !== 2 && !press.ctrlKey)) return;
+		if (press.clientX === undefined || press.clientY === undefined) return;
+		secondaryDismissal = { x: press.clientX, y: press.clientY, at: event.timeStamp };
+	}
+	// Whether this `contextmenu` follows the press that just closed the menu at the same spot.
+	function followsDismissal(event: MouseEvent) {
+		const dismissal = secondaryDismissal;
+		secondaryDismissal = null;
+		return (
+			dismissal !== null &&
+			event.timeStamp - dismissal.at <= SECONDARY_PRESS_MS &&
+			Math.hypot(event.clientX - dismissal.x, event.clientY - dismissal.y) <= GESTURE_TOLERANCE
+		);
+	}
+
+	// The point the open menu is anchored to, so a second right-click near it closes the menu.
+	let anchorPoint: { x: number; y: number } | null = null;
+	// Whether the open in progress came from the keyboard. The PopupMenu receives `open` as a
+	// controlled prop, so it sees every open as one made from code and cannot read the key itself:
+	// a keyboard open asks for the first row, a pointer open leaves the menu container focused.
+	let keyboardOpen = $state(false);
+
+	async function openAt(x: number, y: number, event: Event) {
 		// Close first so a second request re-mounts the menu at the new point.
-		setOpen(false);
+		setOpen(false, createOpenChangeDetails({ reason: 'trigger-press', event }));
 		await tick();
+		anchorPoint = { x, y };
+		keyboardOpen = event instanceof KeyboardEvent;
 		reference = { getBoundingClientRect: () => new DOMRect(x, y, 0, 0) };
-		setOpen(true);
+		setOpen(true, createOpenChangeDetails({ reason: 'trigger-press', event }));
 	}
 
+	// A press this close to where the open menu was anchored is the same spot again.
+	const sameSpot = (x: number, y: number) =>
+		anchorPoint !== null && Math.hypot(x - anchorPoint.x, y - anchorPoint.y) <= GESTURE_TOLERANCE;
+
 	function handleContextMenu(event: MouseEvent) {
 		if (disabled) return;
 		event.preventDefault();
-		void openAt(event.clientX, event.clientY);
+		// Android Chrome follows a long-press with a native `contextmenu`: the gesture's own timer
+		// or this event opens the menu, never both.
+		if (touch) {
+			if (!touch.opened && !touch.cancelled) {
+				touch.opened = true;
+				cancelPress();
+				void openAt(touch.x, touch.y, event);
+			}
+			return;
+		}
+		// A second right-click on the spot the menu is anchored to dismisses it.
+		const dismissed = followsDismissal(event);
+		if (dismissed && sameSpot(event.clientX, event.clientY)) return;
+		if (openState.value && sameSpot(event.clientX, event.clientY)) {
+			setOpen(false, createOpenChangeDetails({ reason: 'trigger-press', event }));
+			return;
+		}
+		void openAt(event.clientX, event.clientY, event);
 	}
 
 	// Shift+F10 and the ContextMenu key open the menu anchored to the focused element.
@@ -59,24 +137,54 @@
 		if (event.key !== 'ContextMenu' && !(event.key === 'F10' && event.shiftKey)) return;
 		event.preventDefault();
 		const rect = (event.target as HTMLElement).getBoundingClientRect();
-		void openAt(rect.left + rect.width / 2, rect.bottom);
+		void openAt(rect.left + rect.width / 2, rect.bottom, event);
 	}
 
-	// Touch has no right-click: a 500 ms press opens the menu at the finger.
+	// Touch has no right-click: a 500 ms press opens the menu at the finger. A finger drifts a
+	// little while it presses, so only movement past the tolerance cancels it.
 	let pressTimer: ReturnType<typeof setTimeout> | null = null;
+	let touch: { x: number; y: number; opened: boolean; cancelled: boolean } | null = null;
+	let touchEnd: ReturnType<typeof setTimeout> | null = null;
 	function cancelPress() {
 		if (pressTimer) clearTimeout(pressTimer);
 		pressTimer = null;
 	}
+	function endPress() {
+		cancelPress();
+		// A native `contextmenu` can arrive just after the finger lifts: the gesture is remembered
+		// for a moment so it is not taken for a right-click.
+		if (touchEnd) clearTimeout(touchEnd);
+		touchEnd = setTimeout(() => {
+			touch = null;
+			touchEnd = null;
+		}, TOUCH_GESTURE_MS);
+	}
 	function handlePointerDown(event: PointerEvent) {
 		if (disabled || event.pointerType !== 'touch') return;
 		cancelPress();
+		if (touchEnd) clearTimeout(touchEnd);
+		touchEnd = null;
 		const { clientX, clientY } = event;
+		const gesture = { x: clientX, y: clientY, opened: false, cancelled: false };
+		touch = gesture;
 		pressTimer = setTimeout(() => {
 			pressTimer = null;
-			void openAt(clientX, clientY);
-		}, 500);
+			if (gesture.opened || gesture.cancelled) return;
+			gesture.opened = true;
+			void openAt(clientX, clientY, event);
+		}, LONG_PRESS_MS);
+	}
+	function handlePointerMove(event: PointerEvent) {
+		if (!touch || !pressTimer) return;
+		if (Math.hypot(event.clientX - touch.x, event.clientY - touch.y) <= GESTURE_TOLERANCE) return;
+		touch.cancelled = true;
+		cancelPress();
 	}
+
+	onDestroy(() => {
+		cancelPress();
+		if (touchEnd) clearTimeout(touchEnd);
+	});
 </script>
 
 <div
@@ -84,9 +192,9 @@
 	oncontextmenu={handleContextMenu}
 	onkeydown={handleKeyDown}
 	onpointerdown={handlePointerDown}
-	onpointerup={cancelPress}
-	onpointercancel={cancelPress}
-	onpointermove={cancelPress}
+	onpointerup={endPress}
+	onpointercancel={endPress}
+	onpointermove={handlePointerMove}
 	{...attachments}
 >
 	{@render children()}
@@ -101,6 +209,8 @@
 	{onAfterOpen}
 	{onAfterClose}
 	ref={reference}
-	position="bottom-start"
-	menu={{ items, ...menu }}
+	{position}
+	{collisionBoundary}
+	nativeMenu={false}
+	menu={{ items, focusOnMount: keyboardOpen ? true : undefined, ...menu }}
 />

package/dist/components/ContextMenu/contextMenu.mcp.d.ts

@@ -1 +1 @@
-export declare const contextMenuDescription = "\n# ContextMenu Component\n\nWraps a target and opens a menu anchored at the cursor on right-click. Built on PopupMenu using a\nfloating-ui virtual element, so the menu appears exactly at the pointer (and flips near viewport edges).\n\n## Basic Usage\n\n```svelte\n<script>\n\timport { ContextMenu } from 'entasis/context-menu';\n\timport { copyIcon } from 'entasis/icons/copy';\n\timport { trashIcon } from 'entasis/icons/trash';\n</script>\n\n<ContextMenu\n\titems={[\n\t\t{ type: 'option', prefix: copyIcon, title: 'Copy' },\n\t\t{ type: 'option', title: 'Paste' },\n\t\t{ type: 'separator' },\n\t\t{ type: 'option', prefix: trashIcon, title: 'Delete', color: 'danger' }\n\t]}\n>\n\t<div class=\"rounded border p-10\">Right-click me</div>\n</ContextMenu>\n```\n\n## Props\n\n### Core Props\n- **items**: MenuItem[] (required) - Menu entries shown on right-click. Same item shapes as Menu: type 'button', 'option', 'separator', or 'submenu'.\n- **children**: Snippet (required) - The right-click target content.\n- **disabled**: boolean (default: false) - When true, right-click is ignored and the native context menu shows.\n\n### Bindable Props\n- **open**: boolean - Open state of the context menu.\n- **defaultOpen**: boolean (default: false) - Initial state when open is not provided.\n- **onOpenChange**: (open: boolean) => void - Called once for each library-requested state change.\n- **onAfterOpen**: (payload) => void - Called after the open transition finishes.\n- **onAfterClose**: (payload) => void - Called after the close transition finishes.\n\n### Advanced Props\n- **menu**: Omit<MenuProps, 'items'> - Overrides forwarded to the underlying Menu (header, footer, theme).\n- **popup**: PopupMenu/Popover overrides (offset, closeOnEscape, ...). position and ref are managed internally.\n- **class**: string - Class on the wrapper around the target content.\n\n## Behavior\n\n- Right-click on the target opens the menu at the cursor via a virtual reference element.\n- Keyboard: Shift+F10 or the ContextMenu key, while focus is inside the target, opens the menu anchored to the focused element.\n- Touch: a 500 ms long-press opens the menu at the finger; moving or lifting the finger earlier cancels it.\n- A second right-click elsewhere re-mounts the menu at the new point.\n- Left-click outside, Escape, or selecting an item closes it.\n- Submenus, keyboard navigation, and highlighting are inherited from Menu.\n\n## Accessibility\n\nThe menu is a role=\"menu\" with role=\"menuitem\" children and full keyboard navigation (arrows, Home/End,\nEnter, Escape, and ArrowRight/Left for submenus), plus type-ahead. Keyboard users open it with\nShift+F10 or the ContextMenu key; touch users with a long-press. The target wrapper is a plain\nelement with contextmenu, keydown, and pointer handlers.\n\n## Notes\n\n- Anchoring uses a floating-ui virtual element (a zero-size DOMRect at clientX/clientY).\n- For a menu flush with the cursor, pass `popup={{ offset: 0 }}`.\n";
+export declare const contextMenuDescription = "\n# ContextMenu Component\n\nWraps a target and opens a menu anchored at the cursor on right-click. Built on PopupMenu using a\nfloating-ui virtual element, so the menu appears exactly at the pointer (and flips near viewport edges).\n\n## Basic Usage\n\n```svelte\n<script>\n\timport { ContextMenu } from 'entasis/context-menu';\n\timport { copyIcon } from 'entasis/icons/copy';\n\timport { trashIcon } from 'entasis/icons/trash';\n</script>\n\n<ContextMenu\n\titems={[\n\t\t{ type: 'option', prefix: copyIcon, title: 'Copy' },\n\t\t{ type: 'option', title: 'Paste' },\n\t\t{ type: 'separator' },\n\t\t{ type: 'option', prefix: trashIcon, title: 'Delete', color: 'danger' }\n\t]}\n>\n\t<div class=\"rounded border p-10\">Right-click me</div>\n</ContextMenu>\n```\n\n## Props\n\n### Core Props\n- **items**: MenuItem[] (required) - Menu entries shown on right-click. Same item shapes as Menu: type 'button', 'option', 'separator', 'submenu', 'checkbox', 'radio-group' or 'group'.\n- **children**: Snippet (required) - The right-click target content.\n- **disabled**: boolean (default: false) - When true, right-click is ignored and the native context menu shows.\n\n### Bindable Props\n- **open**: boolean - Open state of the context menu.\n- **defaultOpen**: boolean (default: false) - Initial state when open is not provided.\n- **onOpenChange**: (open: boolean, details: OpenChangeDetails) => void - Called before each library-requested state change, with `details.reason` (`'trigger-press'` for the right-click, long-press or keyboard request, `'item-press'`, `'escape-key'`, `'outside-press'`), `details.event` and `details.cancel()`.\n- **onAfterOpen**: (payload) => void - Called after the open transition finishes.\n- **onAfterClose**: (payload) => void - Called after the close transition finishes.\n\n### Advanced Props\n- **menu**: Omit<MenuProps, 'items'> - Overrides forwarded to the underlying Menu (header, footer, theme).\n- **popup**: PopupMenu/Popover overrides (position, offset, closeOnEscape, closeOnItemClick, ...). position places the menu relative to the pointer and defaults to 'bottom-start' (a responsive record keeps that default below its first breakpoint); collisionBoundary defaults to 'layoutViewport', so panning a pinch-zoomed page doesn't drag the menu along (submenus keep the visual viewport); ref is managed internally.\n- **class**: string - Class on the wrapper around the target content.\n\n## Behavior\n\n- Right-click on the target opens the menu at the cursor via a virtual reference element.\n- Keyboard: Shift+F10 or the ContextMenu key, while focus is inside the target, opens the menu anchored to the focused element.\n- Touch: a 500 ms long-press opens the menu at the finger. A finger may drift up to 8 px while it presses; moving further, or lifting earlier, cancels the press. The native `contextmenu` event Android Chrome sends with a long-press (before or just after the finger lifts) is part of the same gesture: the menu opens once, with one `onOpenChange(true)`.\n- A second right-click within 8 px of the point the open menu is anchored to closes it; a right-click elsewhere re-mounts the menu at the new point.\n- The browser's own context menu never opens over the open panel, its padding or its submenus. While the menu is enabled the wrapper sets `-webkit-touch-callout: none`, so iOS Safari's long-press callout does not compete with the long-press that opens the menu.\n- A pointer open (right-click, long-press) focuses the menu itself; Shift+F10 and the ContextMenu key highlight the first row.\n- Left-click outside, Escape, or selecting an item closes it. Selecting an item inside a submenu closes the submenu and the menu together, and focus returns to the element that had it before the menu opened.\n- Submenus, keyboard navigation, and highlighting are inherited from Menu.\n\n## Accessibility\n\nThe menu is a role=\"menu\" with role=\"menuitem\" children and full keyboard navigation (arrows, Home/End,\nEnter, Escape, and ArrowRight/Left for submenus, mirrored in right-to-left text), plus type-ahead. Tab closes the\nmenu and returns focus to the element that had it before the menu opened. Keyboard users open it with\nShift+F10 or the ContextMenu key; touch users with a long-press. The target wrapper is a plain\nelement with contextmenu, keydown, and pointer handlers.\n\n## Notes\n\n- Anchoring uses a floating-ui virtual element (a zero-size DOMRect at clientX/clientY).\n- For a menu flush with the cursor, pass `popup={{ offset: 0 }}`.\n";

package/dist/components/ContextMenu/contextMenu.mcp.js

@@ -28,35 +28,38 @@ floating-ui virtual element, so the menu appears exactly at the pointer (and fli
 ## Props
 
 ### Core Props
-- **items**: MenuItem[] (required) - Menu entries shown on right-click. Same item shapes as Menu: type 'button', 'option', 'separator', or 'submenu'.
+- **items**: MenuItem[] (required) - Menu entries shown on right-click. Same item shapes as Menu: type 'button', 'option', 'separator', 'submenu', 'checkbox', 'radio-group' or 'group'.
 - **children**: Snippet (required) - The right-click target content.
 - **disabled**: boolean (default: false) - When true, right-click is ignored and the native context menu shows.
 
 ### Bindable Props
 - **open**: boolean - Open state of the context menu.
 - **defaultOpen**: boolean (default: false) - Initial state when open is not provided.
-- **onOpenChange**: (open: boolean) => void - Called once for each library-requested state change.
+- **onOpenChange**: (open: boolean, details: OpenChangeDetails) => void - Called before each library-requested state change, with \`details.reason\` (\`'trigger-press'\` for the right-click, long-press or keyboard request, \`'item-press'\`, \`'escape-key'\`, \`'outside-press'\`), \`details.event\` and \`details.cancel()\`.
 - **onAfterOpen**: (payload) => void - Called after the open transition finishes.
 - **onAfterClose**: (payload) => void - Called after the close transition finishes.
 
 ### Advanced Props
 - **menu**: Omit<MenuProps, 'items'> - Overrides forwarded to the underlying Menu (header, footer, theme).
-- **popup**: PopupMenu/Popover overrides (offset, closeOnEscape, ...). position and ref are managed internally.
+- **popup**: PopupMenu/Popover overrides (position, offset, closeOnEscape, closeOnItemClick, ...). position places the menu relative to the pointer and defaults to 'bottom-start' (a responsive record keeps that default below its first breakpoint); collisionBoundary defaults to 'layoutViewport', so panning a pinch-zoomed page doesn't drag the menu along (submenus keep the visual viewport); ref is managed internally.
 - **class**: string - Class on the wrapper around the target content.
 
 ## Behavior
 
 - Right-click on the target opens the menu at the cursor via a virtual reference element.
 - Keyboard: Shift+F10 or the ContextMenu key, while focus is inside the target, opens the menu anchored to the focused element.
-- Touch: a 500 ms long-press opens the menu at the finger; moving or lifting the finger earlier cancels it.
-- A second right-click elsewhere re-mounts the menu at the new point.
-- Left-click outside, Escape, or selecting an item closes it.
+- Touch: a 500 ms long-press opens the menu at the finger. A finger may drift up to 8 px while it presses; moving further, or lifting earlier, cancels the press. The native \`contextmenu\` event Android Chrome sends with a long-press (before or just after the finger lifts) is part of the same gesture: the menu opens once, with one \`onOpenChange(true)\`.
+- A second right-click within 8 px of the point the open menu is anchored to closes it; a right-click elsewhere re-mounts the menu at the new point.
+- The browser's own context menu never opens over the open panel, its padding or its submenus. While the menu is enabled the wrapper sets \`-webkit-touch-callout: none\`, so iOS Safari's long-press callout does not compete with the long-press that opens the menu.
+- A pointer open (right-click, long-press) focuses the menu itself; Shift+F10 and the ContextMenu key highlight the first row.
+- Left-click outside, Escape, or selecting an item closes it. Selecting an item inside a submenu closes the submenu and the menu together, and focus returns to the element that had it before the menu opened.
 - Submenus, keyboard navigation, and highlighting are inherited from Menu.
 
 ## Accessibility
 
 The menu is a role="menu" with role="menuitem" children and full keyboard navigation (arrows, Home/End,
-Enter, Escape, and ArrowRight/Left for submenus), plus type-ahead. Keyboard users open it with
+Enter, Escape, and ArrowRight/Left for submenus, mirrored in right-to-left text), plus type-ahead. Tab closes the
+menu and returns focus to the element that had it before the menu opened. Keyboard users open it with
 Shift+F10 or the ContextMenu key; touch users with a long-press. The target wrapper is a plain
 element with contextmenu, keydown, and pointer handlers.
 

package/dist/components/ContextMenu/contextMenu.props.d.ts

@@ -3,9 +3,11 @@ import type { MenuItem, MenuProps } from '../Menu/menu.props.js';
 import type { PopupMenuProps } from '../PopupMenu/popupMenu.props.js';
 import type { WithAttachments } from '../../types/props.js';
 import type { ContextMenuThemeProps } from './contextMenu.theme.js';
+import type { OpenChangeHandler } from '../../utils/openChange.js';
 export type ContextMenuProps = WithAttachments<{
     /**
-     * The menu items shown on right-click (Button, MenuOption, Separator, or submenu).
+     * The menu items shown on right-click (Button, MenuOption, Separator, submenu, checkbox, radio
+     * group or group).
      */
     items: MenuItem[];
     /**
@@ -29,9 +31,13 @@ export type ContextMenuProps = WithAttachments<{
      */
     defaultOpen?: boolean;
     /**
-     * Called once when the library requests an open-state change.
+     * Called before the menu opens or closes, with the requested state and the change details
+     * (`reason`, `event`, `interaction`, `cancel()`): `'trigger-press'` for the right-click,
+     * long-press or keyboard request that opened it (or a second right-click on its anchor that
+     * closes it), `'item-press'`, `'escape-key'`, `'outside-press'` or `'focus-out'` (Tab) when it
+     * closes. `details.cancel()` keeps the menu as it is.
      */
-    onOpenChange?: (open: boolean) => void;
+    onOpenChange?: OpenChangeHandler;
     /**
      * Called after the open transition finishes.
      */
@@ -49,7 +55,10 @@ export type ContextMenuProps = WithAttachments<{
      */
     theme?: ContextMenuThemeProps;
     /**
-     * Additional PopupMenu/Popover overrides (position, offset, closeOnEscape, ...).
+     * Additional PopupMenu/Popover overrides (position, offset, closeOnEscape, closeOnItemClick,
+     * ...). `position` places the menu relative to the pointer and defaults to `'bottom-start'`;
+     * a responsive record keeps that default below its first breakpoint. `collisionBoundary`
+     * defaults to `'layoutViewport'`, so panning a pinch-zoomed page doesn't drag the menu along.
      */
     popup?: Omit<PopupMenuProps, 'menu' | 'trigger' | 'open' | 'defaultOpen' | 'onOpenChange' | 'onAfterOpen' | 'onAfterClose' | 'ref'>;
 }>;

package/dist/components/ContextMenu/contextMenu.theme.d.ts

@@ -1,30 +1,30 @@
 import { type InferComponentTheme } from '../../utils/cva/index.js';
 export declare const contextMenuTheme: {
-    root: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+    root: (props?: (import("../../utils/cva/types.ts").CVAVariantSchema<{
         disabled: {
             true: string;
-            false: null;
+            false: string;
         };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    panel: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
+    }> & import("../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    panel: (props?: import("../../utils/cva/types.ts").CVAClassProp | undefined) => string;
 };
 export type ContextMenuTheme = typeof contextMenuTheme;
 export type ContextMenuThemeProps = InferComponentTheme<ContextMenuTheme>;
 export declare const setContextMenuTheme: (theme: InferComponentTheme<{
-    root: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+    root: (props?: (import("../../utils/cva/types.ts").CVAVariantSchema<{
         disabled: {
             true: string;
-            false: null;
+            false: string;
         };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    panel: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
+    }> & import("../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    panel: (props?: import("../../utils/cva/types.ts").CVAClassProp | undefined) => string;
 }>) => void;
-export declare const useContextMenuTheme: import("../../utils/cva/theme.js").UseComponentTheme<{
-    root: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+export declare const useContextMenuTheme: import("../../utils/cva/theme.ts").UseComponentTheme<{
+    root: (props?: (import("../../utils/cva/types.ts").CVAVariantSchema<{
         disabled: {
             true: string;
-            false: null;
+            false: string;
         };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    panel: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
+    }> & import("../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    panel: (props?: import("../../utils/cva/types.ts").CVAClassProp | undefined) => string;
 }>;

package/dist/components/ContextMenu/contextMenu.theme.js

@@ -2,13 +2,14 @@ import { setComponentTheme, useComponentTheme } from '../../utils/cva/index.js';
 import { cva } from '../../utils/cva/index.js';
 // The wrapper around the right-click target. Layout-neutral by default (the target owns
 // its own box); `display: contents` is the usual override when the wrapper must disappear
-// from a grid or flex parent.
+// from a grid or flex parent. While the menu is enabled iOS Safari's own long-press callout
+// stays off, so the long-press that opens the menu is not met by a second system menu.
 const defaultContextMenuRoot = cva({
     base: '',
     variants: {
         disabled: {
             true: '',
-            false: null
+            false: '[-webkit-touch-callout:none]'
         }
     },
     defaultVariants: {