cli-jaw 2.17.63 → 2.17.64

package/public/manager/src/components/InstanceListContent.tsx

@@ -34,6 +34,7 @@ type InstanceListContentProps = {
     onPreview: (instance: DashboardInstance) => void;
     onMarkActivitySeen: (port: number) => void;
     onInstanceLabelSave: (port: number, label: string | null) => Promise<void>;
+    onToggleFavorite?: (instance: DashboardInstance) => void;
     onLifecycle: (action: DashboardLifecycleAction, instance: DashboardInstance) => void;
 };
 
@@ -92,6 +93,7 @@ export function InstanceListContent(props: InstanceListContentProps) {
                     onPreview={props.onPreview}
                     onMarkActivitySeen={props.onMarkActivitySeen}
                     onInstanceLabelSave={props.onInstanceLabelSave}
+                    {...(props.onToggleFavorite !== undefined ? { onToggleFavorite: props.onToggleFavorite } : {})}
                     onLifecycle={props.onLifecycle}
                 />
             )}

package/public/manager/src/components/InstanceRow.tsx

@@ -1,7 +1,20 @@
 import { useEffect, useRef, useState } from 'react';
-import type { FormEvent, MouseEvent } from 'react';
+import type { FormEvent, KeyboardEvent, MouseEvent } from 'react';
 import type { DashboardInstance, DashboardLifecycleAction, DashboardProfile } from '../types';
 import { composeInstanceRowTitle, formatWorkingDurationLabel, resolveInstanceRowStatus } from './instance-row-status';
+import { ContextMenu, useContextMenu, type ContextMenuEntry } from './context-menu/ContextMenu';
+import {
+    ArchiveGlyph,
+    CopyGlyph,
+    ExternalGlyph,
+    EyeGlyph,
+    PencilGlyph,
+    PinGlyph,
+    PlayGlyph,
+    RestartGlyph,
+    StopGlyph,
+} from './context-menu/icons';
+import { copyText } from '../clipboard/copy-text';
 
 type InstanceRowProps = {
     instance: DashboardInstance;
@@ -29,6 +42,7 @@ type InstanceRowProps = {
     onPreview: (instance: DashboardInstance) => void;
     onMarkActivitySeen: (port: number) => void;
     onInstanceLabelSave: (port: number, label: string | null) => Promise<void>;
+    onToggleFavorite?: (instance: DashboardInstance) => void;
     onLifecycle: (action: DashboardLifecycleAction, instance: DashboardInstance) => void;
     jumpHint?: string | null;
 };
@@ -45,20 +59,6 @@ function statusClass(status: DashboardInstance['status']): string {
     return `instance-status status-${status}`;
 }
 
-const StopIcon = () => (
-    <svg viewBox="0 0 16 16" width="12" height="12" fill="currentColor" aria-hidden="true">
-        <rect x="3" y="3" width="10" height="10" rx="1.5" />
-    </svg>
-);
-
-const OpenIcon = () => (
-    <svg viewBox="0 0 16 16" width="12" height="12" stroke="currentColor" strokeWidth="1.5" fill="none" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
-        <path d="M6.5 3.5H4a1 1 0 0 0-1 1V12a1 1 0 0 0 1 1h7.5a1 1 0 0 0 1-1V9.5" />
-        <path d="M9.5 2.5h4v4" />
-        <path d="M13.5 2.5 8 8" />
-    </svg>
-);
-
 const ChevronIcon = ({ open }: { open: boolean }) => (
     <svg viewBox="0 0 16 16" width="12" height="12" stroke="currentColor" strokeWidth="1.5" fill="none" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"
         style={{ transform: open ? 'rotate(180deg)' : undefined, transition: 'transform 0.12s' }}>
@@ -88,6 +88,8 @@ export function InstanceRow(props: InstanceRowProps) {
     const [draft, setDraft] = useState(props.instance.label || props.profile?.label || props.label);
     const [savingLabel, setSavingLabel] = useState(false);
     const [labelError, setLabelError] = useState<string | null>(null);
+    const rowMenu = useContextMenu();
+    const labelInputRef = useRef<HTMLInputElement | null>(null);
 
     function stopAction(event: MouseEvent<HTMLElement>): void {
         event.stopPropagation();
@@ -113,6 +115,118 @@ export function InstanceRow(props: InstanceRowProps) {
     const hideStatusLine = props.density === 'compact' || props.density === 'rail';
     const dotClass = `${statusClass(props.instance.status)}${transitionLabel ? ' is-transitioning' : ''}${props.agentBusy ? ' is-busy' : ''} is-${rowStatus}`;
     const primaryLabel = props.instance.label || props.profile?.label || props.label;
+
+    useEffect(() => {
+        if (editing) labelInputRef.current?.focus();
+    }, [editing]);
+
+    function startEditing(): void {
+        setDraft(props.instance.label || props.profile?.label || props.label);
+        setLabelError(null);
+        setEditing(true);
+    }
+
+    function openMenuFromKey(event: KeyboardEvent<HTMLElement>): void {
+        if (event.key === 'ContextMenu' || (event.key === 'F10' && event.shiftKey)) {
+            const target = event.target;
+            if (target instanceof HTMLElement && target.closest('input, textarea, select, [contenteditable]')) return;
+            rowMenu.openAt(event);
+        }
+    }
+
+    function menuEntries(): ContextMenuEntry[] {
+        const entries: ContextMenuEntry[] = [];
+        if (props.showInlineLabelEditor !== false) {
+            entries.push({
+                id: 'rename',
+                label: 'Rename',
+                icon: <PencilGlyph />,
+                onSelect: startEditing,
+            });
+        }
+        if (props.onToggleFavorite) {
+            entries.push({
+                id: 'pin',
+                label: props.instance.favorite ? 'Unpin' : 'Pin',
+                icon: <PinGlyph />,
+                onSelect: () => props.onToggleFavorite?.(props.instance),
+            });
+        }
+        if (entries.length) entries.push({ kind: 'separator', id: 'sep-edit' });
+        if (props.showSelectedActions !== false) {
+            entries.push({
+                id: 'preview',
+                label: 'Preview',
+                icon: <EyeGlyph />,
+                disabled: !props.instance.ok,
+                onSelect: () => props.onPreview(props.instance),
+            });
+        }
+        entries.push({
+            id: 'open',
+            label: 'Open in new tab',
+            icon: <ExternalGlyph />,
+            disabled: !props.instance.ok,
+            onSelect: () => {
+                props.onMarkActivitySeen(props.instance.port);
+                window.open(props.instance.url, '_blank', 'noreferrer');
+            },
+        });
+        entries.push({ kind: 'separator', id: 'sep-lifecycle' });
+        if (props.showSelectedActions !== false) {
+            const startTitle = lifecycle?.commandPreview?.join(' ');
+            entries.push(
+                {
+                    id: 'start',
+                    label: 'Start',
+                    icon: <PlayGlyph />,
+                    disabled: !lifecycle?.canStart || props.busy,
+                    ...(startTitle ? { title: startTitle } : {}),
+                    onSelect: () => props.onLifecycle('start', props.instance),
+                },
+                {
+                    id: 'restart',
+                    label: 'Restart',
+                    icon: <RestartGlyph />,
+                    disabled: !lifecycle?.canRestart || props.busy,
+                    onSelect: () => props.onLifecycle('restart', props.instance),
+                },
+                {
+                    id: 'perm',
+                    label: 'Register as persistent service',
+                    icon: <ArchiveGlyph />,
+                    disabled: !lifecycle?.canPerm || props.busy,
+                    onSelect: () => props.onLifecycle('perm', props.instance),
+                },
+            );
+        }
+        entries.push({
+            id: 'stop',
+            label: 'Stop',
+            icon: <StopGlyph />,
+            danger: true,
+            disabled: !lifecycle?.canStop || props.busy,
+            onSelect: () => props.onLifecycle('stop', props.instance),
+        });
+        entries.push({ kind: 'separator', id: 'sep-copy' });
+        entries.push(
+            {
+                id: 'copy-url',
+                label: 'Copy URL',
+                icon: <CopyGlyph />,
+                disabled: !props.instance.ok,
+                onSelect: () => void copyText(props.instance.url),
+            },
+            {
+                id: 'copy-port',
+                label: 'Copy port',
+                icon: <CopyGlyph />,
+                onSelect: () => void copyText(String(props.instance.port)),
+            },
+        );
+        return entries;
+    }
+
     async function submitLabel(event: FormEvent<HTMLFormElement>): Promise<void> {
         event.preventDefault();
         event.stopPropagation();
@@ -133,6 +247,8 @@ export function InstanceRow(props: InstanceRowProps) {
             className={`instance-row density-${props.density || 'comfortable'} priority-${props.priority || 'normal'} ${props.selected ? 'is-selected' : ''}${transitionLabel ? ' is-transitioning-row' : ''} is-${rowStatus}`}
             title={composeInstanceRowTitle(props.instance)}
             aria-current={props.selected ? 'true' : undefined}
+            onContextMenu={rowMenu.openAt}
+            onKeyDown={openMenuFromKey}
         >
             <div className="instance-row-body">
                 <button
@@ -201,7 +317,7 @@ export function InstanceRow(props: InstanceRowProps) {
                         title="Stop"
                         aria-label="Stop"
                     >
-                        <StopIcon />
+                        <StopGlyph />
                     </button>
                     <a
                         className={`quick-btn action-open${!props.instance.ok ? ' is-disabled' : ''}`}
@@ -218,14 +334,20 @@ export function InstanceRow(props: InstanceRowProps) {
                             props.onMarkActivitySeen(props.instance.port);
                         }}
                     >
-                        <OpenIcon />
+                        <ExternalGlyph />
                     </a>
                     <span className="port">:{props.instance.port}</span>
                 </div>
             </div>
             {props.showInlineLabelEditor !== false && editing ? (
-                <form className="instance-label-edit-form" onSubmit={(event) => void submitLabel(event)} onClick={stopAction}>
+                <form
+                    className="instance-label-edit-form"
+                    onSubmit={(event) => void submitLabel(event)}
+                    onClick={stopAction}
+                    onContextMenu={event => event.stopPropagation()}
+                >
                     <input
+                        ref={labelInputRef}
                         className="instance-label-input"
                         value={draft}
                         maxLength={120}
@@ -247,79 +369,14 @@ export function InstanceRow(props: InstanceRowProps) {
                     </button>
                     {labelError && <span className="instance-label-error">{labelError}</span>}
                 </form>
-            ) : props.showInlineLabelEditor !== false ? (
-                <button
-                    className="instance-label-edit-button"
-                    type="button"
-                    aria-label={`Rename ${primaryLabel}`}
-                    title="Rename"
-                    onClick={(event) => {
-                        stopAction(event);
-                        setDraft(props.instance.label || props.profile?.label || props.label);
-                        setLabelError(null);
-                        setEditing(true);
-                    }}
-                >
-                    <svg viewBox="0 0 24 24" width="13" height="13" stroke="currentColor" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
-                        <path d="M12 20h9" />
-                        <path d="M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z" />
-                    </svg>
-                </button>
             ) : null}
             {props.jumpHint ? <span className="instance-jump-hint" aria-hidden="true">{props.jumpHint}</span> : null}
-            {props.showSelectedActions !== false && (
-            <div className="instance-actions">
-                <button
-                    type="button"
-                    aria-label="Preview"
-                    title="Preview"
-                    onClick={(event) => {
-                        stopAction(event);
-                        props.onPreview(props.instance);
-                    }}
-                    disabled={!props.instance.ok}
-                >
-                    Prev
-                </button>
-                <button
-                    type="button"
-                    className="action-start"
-                    aria-label="Start"
-                    onClick={(event) => {
-                        stopAction(event);
-                        props.onLifecycle('start', props.instance);
-                    }}
-                    disabled={!lifecycle?.canStart || props.busy}
-                    title={lifecycle?.commandPreview?.join(' ')}
-                >
-                    Start
-                </button>
-                <button
-                    type="button"
-                    aria-label="Register as persistent service"
-                    onClick={(event) => {
-                        stopAction(event);
-                        props.onLifecycle('perm', props.instance);
-                    }}
-                    disabled={!lifecycle?.canPerm || props.busy}
-                    title="Register as persistent service"
-                >
-                    Perm
-                </button>
-                <button
-                    type="button"
-                    aria-label="Restart"
-                    title="Restart"
-                    onClick={(event) => {
-                        stopAction(event);
-                        props.onLifecycle('restart', props.instance);
-                    }}
-                    disabled={!lifecycle?.canRestart || props.busy}
-                >
-                    Res
-                </button>
-            </div>
-            )}
+            <ContextMenu
+                state={rowMenu.state}
+                entries={menuEntries()}
+                label={`${primaryLabel} actions`}
+                onClose={rowMenu.close}
+            />
         </article>
     );
 }

package/public/manager/src/components/SidebarRail.tsx

@@ -12,12 +12,11 @@ type SidebarRailProps = {
     onToggleHelp: () => void;
 };
 
-function ChevronIcon({ direction }: { direction: 'left' | 'right' }) {
-    const points = direction === 'left' ? '11 4 5 10 11 16' : '5 4 11 10 5 16';
+function SidebarToggleIcon({ expanded }: { expanded: boolean }) {
     return (
         <svg
             className="rail-collapse-chevron"
-            viewBox="0 0 16 20"
+            viewBox="0 0 20 20"
             width="18"
             height="18"
             fill="none"
@@ -28,7 +27,9 @@ function ChevronIcon({ direction }: { direction: 'left' | 'right' }) {
             aria-hidden="true"
             focusable="false"
         >
-            <polyline points={points} />
+            <rect x="3" y="4" width="14" height="12" rx="2.5" />
+            <path d="M8 4v12" />
+            {expanded && <rect x="4.5" y="5.5" width="2" height="9" rx="0.5" fill="currentColor" stroke="none" />}
         </svg>
     );
 }
@@ -112,7 +113,7 @@ export function SidebarRail(props: SidebarRailProps) {
                 aria-controls="manager-sidebar-list"
                 title={toggleLabel}
             >
-                <ChevronIcon direction={expanded ? 'left' : 'right'} />
+                <SidebarToggleIcon expanded={expanded} />
             </button>
             <button
                 className={`rail-button rail-workspace-button${props.mode === 'instances' ? ' is-active' : ''}`}

package/public/manager/src/components/ThemeSwitch.tsx

@@ -1,35 +1,59 @@
+import { useRef, type ReactNode } from 'react';
 import type { DashboardUiTheme } from '../types';
+import { ContextMenu, useContextMenu, type ContextMenuEntry } from './context-menu/ContextMenu';
+import { CheckGlyph } from './context-menu/icons';
 
 type ThemeSwitchProps = {
     theme: DashboardUiTheme;
     onChange: (next: DashboardUiTheme) => void;
 };
 
-const OPTIONS: ReadonlyArray<{ value: DashboardUiTheme; label: string; hint: string }> = [
-    { value: 'auto', label: 'Auto', hint: 'Follow OS preference' },
-    { value: 'light', label: 'Light', hint: 'Always light theme' },
-    { value: 'dark', label: 'Dark', hint: 'Always dark theme' },
+const glyph = {
+    viewBox: '0 0 20 20', width: 16, height: 16, fill: 'none', stroke: 'currentColor', strokeWidth: 1.6,
+    strokeLinecap: 'round', strokeLinejoin: 'round', 'aria-hidden': true, focusable: false,
+} as const;
+
+const OPTIONS: ReadonlyArray<{ value: DashboardUiTheme; label: string; hint: string; icon: ReactNode }> = [
+    { value: 'auto', label: 'Auto', hint: 'Follow OS preference', icon: <svg {...glyph}><circle cx="10" cy="10" r="6.5" /><path d="M10 3.5v13a6.5 6.5 0 0 0 0-13Z" fill="currentColor" stroke="none" /></svg> },
+    { value: 'light', label: 'Light', hint: 'Always light theme', icon: <svg {...glyph}><circle cx="10" cy="10" r="3.2" /><path d="M10 2.5v1.8M10 15.7v1.8M2.5 10h1.8M15.7 10h1.8M4.7 4.7l1.3 1.3M14 14l1.3 1.3M4.7 15.3 6 14M14 6l1.3-1.3" /></svg> },
+    { value: 'dark', label: 'Dark', hint: 'Always dark theme', icon: <svg {...glyph}><path d="M16 12.2A6.5 6.5 0 0 1 7.8 4a6.5 6.5 0 1 0 8.2 8.2Z" /></svg> },
 ];
 
 export function ThemeSwitch(props: ThemeSwitchProps) {
+    const trigger = useRef<HTMLButtonElement>(null);
+    const menu = useContextMenu();
+    const closedAt = useRef(0);
+    const suppressClick = useRef(false);
+    const closeMenu = () => { closedAt.current = performance.now(); menu.close(); };
+    const current = OPTIONS.find(option => option.value === props.theme) ?? OPTIONS[0]!;
+    const entries: ContextMenuEntry[] = OPTIONS.map(option => ({
+        id: option.value,
+        label: option.label,
+        title: option.hint,
+        icon: option.value === props.theme ? <CheckGlyph /> : undefined,
+        checked: option.value === props.theme,
+        onSelect: () => props.onChange(option.value),
+    }));
     return (
-        <div className="theme-switch" role="radiogroup" aria-label="Theme">
-            {OPTIONS.map(option => {
-                const active = props.theme === option.value;
-                return (
-                    <button
-                        key={option.value}
-                        type="button"
-                        role="radio"
-                        aria-checked={active}
-                        title={option.hint}
-                        className={active ? 'is-active' : ''}
-                        onClick={() => props.onChange(option.value)}
-                    >
-                        {option.label}
-                    </button>
-                );
-            })}
-        </div>
+        <>
+            <button
+                ref={trigger}
+                type="button"
+                className={`command-icon-button theme-switch${menu.open ? ' is-open' : ''}`}
+                aria-label={`Theme: ${current.label}`}
+                aria-haspopup="menu"
+                aria-expanded={menu.open}
+                title={`Theme: ${current.label}`}
+                onPointerDown={() => { suppressClick.current = performance.now() - closedAt.current < 50; }}
+                onClick={() => {
+                    if (menu.open) { menu.close(); return; }
+                    if (suppressClick.current) { suppressClick.current = false; return; }
+                    if (trigger.current) menu.openAtElement(trigger.current);
+                }}
+            >
+                {current.icon}
+            </button>
+            <ContextMenu state={menu.state} entries={entries} label="Theme" onClose={closeMenu} className="theme-switch-menu" />
+        </>
     );
 }

package/public/manager/src/components/context-menu/ContextMenu.tsx

@@ -0,0 +1,207 @@
+import { useCallback, useEffect, useLayoutEffect, useRef, useState, type KeyboardEvent as ReactKeyboardEvent, type MouseEvent as ReactMouseEvent, type ReactNode } from 'react';
+import { createPortal } from 'react-dom';
+
+export type ContextMenuAction = {
+    kind?: 'action';
+    id: string;
+    label: string;
+    icon?: ReactNode;
+    /** Display-only hint, e.g. formatShortcut(...). */
+    shortcut?: string;
+    disabled?: boolean;
+    danger?: boolean;
+    /** When set, the item renders as a `menuitemradio` with this checked state. */
+    checked?: boolean;
+    title?: string;
+    onSelect: () => void;
+};
+export type ContextMenuSeparator = { kind: 'separator'; id: string };
+export type ContextMenuEntry = ContextMenuAction | ContextMenuSeparator;
+
+export type ContextMenuState = { x: number; y: number; opener?: Element | null };
+
+const VIEWPORT_MARGIN = 8;
+
+function isAction(entry: ContextMenuEntry): entry is ContextMenuAction {
+    return entry.kind !== 'separator';
+}
+
+function isFocusable(element: HTMLElement): boolean {
+    if (element.matches(':disabled') || element.closest('[hidden], [inert]')) return false;
+    for (let node: HTMLElement | null = element; node; node = node.parentElement) {
+        const style = window.getComputedStyle(node);
+        if (style.display === 'none' || style.visibility === 'hidden' || style.visibility === 'collapse') return false;
+    }
+    return element.tabIndex >= 0 || element.hasAttribute('tabindex') || element.isContentEditable;
+}
+
+function isTabbable(element: HTMLElement): boolean {
+    return element.tabIndex >= 0 && isFocusable(element);
+}
+
+function nextTabbable(opener: Element | null, menu: HTMLElement | null, direction: 1 | -1): HTMLElement | null {
+    if (!(opener instanceof HTMLElement)) return null;
+    const tabbables = Array.from(document.querySelectorAll<HTMLElement>('*'))
+        .filter(element => !menu?.contains(element) && isTabbable(element));
+    const index = tabbables.indexOf(opener);
+    if (index < 0 || tabbables.length < 2) return null;
+    return tabbables[(index + direction + tabbables.length) % tabbables.length] ?? null;
+}
+
+/**
+ * Tracks one open menu. `openAt` takes the right-click (or keyboard) event and
+ * anchors the menu at the pointer, or at the target's bottom-left for keyboard
+ * invocations that report 0,0.
+ */
+export function useContextMenu() {
+    const [state, setState] = useState<ContextMenuState | null>(null);
+    const close = useCallback(() => setState(null), []);
+    const openAt = useCallback((event: ReactMouseEvent<HTMLElement> | ReactKeyboardEvent<HTMLElement>) => {
+        event.preventDefault();
+        event.stopPropagation();
+        const target = event.currentTarget;
+        const active = document.activeElement;
+        const opener = active && target.contains(active) ? active
+            : isFocusable(target) ? target
+                : Array.from(target.querySelectorAll<HTMLElement>('*')).find(isFocusable) ?? active;
+        if ('clientX' in event && (event.clientX !== 0 || event.clientY !== 0)) {
+            setState({ x: event.clientX, y: event.clientY, opener });
+            return;
+        }
+        const rect = target.getBoundingClientRect();
+        setState({ x: rect.left + 8, y: rect.bottom, opener });
+    }, []);
+    const openAtElement = useCallback((element: HTMLElement) => {
+        const rect = element.getBoundingClientRect();
+        setState({ x: rect.left, y: rect.bottom + 2, opener: element });
+    }, []);
+    return { state, open: state !== null, openAt, openAtElement, close };
+}
+
+export function ContextMenu({ state, entries, label, onClose, className }: {
+    state: ContextMenuState | null;
+    entries: ContextMenuEntry[];
+    label: string;
+    onClose: () => void;
+    className?: string;
+}) {
+    const menu = useRef<HTMLDivElement>(null);
+    /** Dismissal hands focus back to the captured opener. */
+    const restoreOnClose = useRef(true);
+    const pendingRestoreFrame = useRef<number | null>(null);
+    const cancelPendingRestore = useCallback(() => {
+        if (pendingRestoreFrame.current === null) return;
+        window.cancelAnimationFrame(pendingRestoreFrame.current);
+        pendingRestoreFrame.current = null;
+    }, []);
+    const [position, setPosition] = useState<ContextMenuState | null>(null);
+    const onCloseRef = useRef(onClose);
+    onCloseRef.current = onClose;
+    const anchorX = state?.x;
+    const anchorY = state?.y;
+    const opener = state?.opener;
+
+    useEffect(() => cancelPendingRestore, [cancelPendingRestore]);
+
+    useLayoutEffect(() => {
+        if (anchorX === undefined || anchorY === undefined) { setPosition(null); return; }
+        const node = menu.current;
+        const width = node?.offsetWidth ?? 0;
+        const height = node?.offsetHeight ?? 0;
+        const maxX = window.innerWidth - width - VIEWPORT_MARGIN;
+        const maxY = window.innerHeight - height - VIEWPORT_MARGIN;
+        setPosition({
+            x: Math.max(VIEWPORT_MARGIN, Math.min(anchorX, maxX)),
+            y: Math.max(VIEWPORT_MARGIN, Math.min(anchorY > maxY ? anchorY - height : anchorY, maxY)),
+        });
+    }, [anchorX, anchorY]);
+
+    useEffect(() => {
+        if (anchorX === undefined || anchorY === undefined) return;
+        cancelPendingRestore();
+        const onClose = () => onCloseRef.current();
+        restoreOnClose.current = true;
+        const first = menu.current?.querySelector<HTMLButtonElement>(':is([role="menuitem"], [role="menuitemradio"]):not(:disabled)');
+        first?.focus({ preventScroll: true });
+        const onPointerDown = (event: PointerEvent) => {
+            if (menu.current && event.target instanceof Node && menu.current.contains(event.target)) return;
+            onClose();
+        };
+        const onKey = (event: KeyboardEvent) => { if (event.key === 'Escape') { event.preventDefault(); onClose(); } };
+        const onDismiss = () => onClose();
+        const onScroll = (event: Event) => {
+            if (menu.current && event.target instanceof Node && menu.current.contains(event.target)) return;
+            onClose();
+        };
+        window.addEventListener('pointerdown', onPointerDown, true);
+        window.addEventListener('keydown', onKey);
+        window.addEventListener('blur', onDismiss);
+        window.addEventListener('resize', onDismiss);
+        window.addEventListener('scroll', onScroll, true);
+        return () => {
+            window.removeEventListener('pointerdown', onPointerDown, true);
+            window.removeEventListener('keydown', onKey);
+            window.removeEventListener('blur', onDismiss);
+            window.removeEventListener('resize', onDismiss);
+            window.removeEventListener('scroll', onScroll, true);
+            if (restoreOnClose.current && opener instanceof HTMLElement && opener.isConnected) opener.focus({ preventScroll: true });
+        };
+    }, [anchorX, anchorY, opener, cancelPendingRestore]);
+
+    if (!state) return null;
+
+    function moveFocus(step: 1 | -1 | 'first' | 'last') {
+        const items = Array.from(menu.current?.querySelectorAll<HTMLButtonElement>(':is([role="menuitem"], [role="menuitemradio"]):not(:disabled)') ?? []);
+        if (!items.length) return;
+        const index = items.indexOf(document.activeElement as HTMLButtonElement);
+        const next = step === 'first' ? 0 : step === 'last' ? items.length - 1
+            : (index + step + items.length) % items.length;
+        items[next]?.focus({ preventScroll: true });
+    }
+
+    function onKeyDown(event: ReactKeyboardEvent<HTMLDivElement>) {
+        const moves: Record<string, 1 | -1 | 'first' | 'last'> = { ArrowDown: 1, ArrowUp: -1, Home: 'first', End: 'last' };
+        const move = moves[event.key];
+        if (move !== undefined) { event.preventDefault(); moveFocus(move); }
+        else if (event.key === 'Escape') { event.preventDefault(); onClose(); }
+        else if (event.key === 'Tab') {
+            event.preventDefault();
+            const next = nextTabbable(opener ?? null, menu.current, event.shiftKey ? -1 : 1);
+            restoreOnClose.current = false;
+            onClose();
+            next?.focus({ preventScroll: true });
+        }
+        event.stopPropagation();
+    }
+
+    const shown = position ?? state;
+    return createPortal(<div ref={menu} className={`jaw-context-menu${className ? ` ${className}` : ''}`} role="menu" aria-label={label}
+        style={{ left: shown.x, top: shown.y, visibility: position ? 'visible' : 'hidden' }}
+        onKeyDown={onKeyDown} onContextMenu={event => event.preventDefault()}>
+        {entries.map(entry => isAction(entry)
+            ? <button key={entry.id} type="button" role={entry.checked === undefined ? 'menuitem' : 'menuitemradio'}
+                aria-checked={entry.checked} disabled={entry.disabled} title={entry.title}
+                className={`jaw-context-menu-item${entry.danger ? ' is-danger' : ''}`}
+                onClick={() => {
+                    const previousMenu = menu.current;
+                    const previousOpener = state.opener;
+                    restoreOnClose.current = false;
+                    onClose();
+                    entry.onSelect();
+                    cancelPendingRestore();
+                    pendingRestoreFrame.current = window.requestAnimationFrame(() => {
+                        pendingRestoreFrame.current = null;
+                        const active = document.activeElement;
+                        if ((!active || active === document.body || !active.isConnected || (previousMenu?.contains(active) ?? false))
+                            && previousOpener instanceof HTMLElement && previousOpener.isConnected) {
+                            previousOpener.focus({ preventScroll: true });
+                        }
+                    });
+                }}>
+                <span className="jaw-context-menu-icon" aria-hidden="true">{entry.icon}</span>
+                <span className="jaw-context-menu-label">{entry.label}</span>
+                {entry.shortcut && <kbd className="jaw-context-menu-shortcut" aria-hidden="true">{entry.shortcut}</kbd>}
+            </button>
+            : <div key={entry.id} className="jaw-context-menu-separator" role="separator" />)}
+    </div>, document.body);
+}