Add context menu provider coverage

continue.md

@@ -65,9 +65,12 @@ Actualizacion 2026-05-15:
     bajo ancestros colapsados, navegación, row/cell/header y expand trigger.
   - Cobertura nueva para DropdownMenu: trigger open/close, scoping de items,
     item select, checkbox/radio groups, submenu delayed/open y group/separator.
+  - Cobertura nueva para ContextMenu: apertura por `contextmenu` con anchor
+    virtual, scoping de items, item select, checkbox/radio, submenu delayed/open
+    y group/separator.
   - Validado por fase:
     - `npm run check` -> 0 errores, 0 warnings.
-    - `npm run test` -> 193 archivos, 2115 tests OK.
+    - `npm run test` -> 194 archivos, 2121 tests OK.
     - tests focales de Select/Popover/Toast/RangeCalendar -> 11 tests OK.
     - tests focales Dialog/Drawer/Popover/Select -> 10 tests OK.
     - `command-provider.svelte.test.ts` -> 2 tests OK.
@@ -89,6 +92,7 @@ Actualizacion 2026-05-15:
     - `navigation-menu-provider.svelte.test.ts` -> 4 tests OK.
     - `tree-grid-provider.svelte.test.ts` -> 4 tests OK.
     - `dropdown-menu-provider.svelte.test.ts` -> 6 tests OK.
+    - `context-menu-provider.svelte.test.ts` -> 6 tests OK.
     - guardia `rg "from './.*provider\\.svelte'" src/uix/soma/components -g 'exports.ts'`
       -> solo queda `select/components/select-provider.svelte`, que es wrapper
       publico, no runtime provider.

src/uix/soma/SOMA_ARCHITECTURE.md

@@ -497,12 +497,15 @@ Los tests por componente estan creciendo desde las piezas de mayor riesgo. A
   filas visibles, navegación y props de row/cell/header/expand trigger.
 - `dropdown-menu/dropdown-menu-provider.svelte.test.ts` — trigger open/close,
   scoping de items, selección, checkbox/radio groups, submenu y group/separator.
+- `context-menu/context-menu-provider.svelte.test.ts` — apertura por
+  `contextmenu`, anchor virtual, scoping de items, selección, checkbox/radio,
+  submenu y group/separator.
 
 Pendiente: seguir ampliando cobertura por familias de alto riesgo fuera del
 bloque fecha/hora, virtualización, inputs numericos, file upload, color y
-navegacion superior/treegrid/dropdown. `table-core`, `form-core` y el scorer
+navegacion superior/treegrid/dropdown/context-menu. `table-core`, `form-core`
-de Command ya no viven dentro de Soma: se consumen desde `$libs/datagrid`,
+y el scorer de Command ya no viven dentro de Soma: se consumen desde
-`$libs/forms` y `$libs/strings`.
+`$libs/datagrid`, `$libs/forms` y `$libs/strings`.
 
 ### Convencion
 

src/uix/soma/components/context-menu/context-menu-provider.svelte.test.ts

@@ -0,0 +1,365 @@
+// @vitest-environment jsdom
+
+import { afterEach, describe, expect, it, vi } from 'vitest';
+
+import { createActiveDom } from '$adom';
+import { state } from '$libs/reactive';
+import type { Morfo } from '$uix/morfo';
+import { Soma } from '$soma/core/soma.svelte';
+import { createSomaRuntime, type SomaRuntimeSources } from '$soma/runtime.svelte';
+import { FloatingAnchor, FloatingProvider } from '../../layers/floating';
+
+import {
+	ContextMenuCheckboxItemProvider,
+	ContextMenuGroupHeadingProvider,
+	ContextMenuGroupProvider,
+	ContextMenuItemProvider,
+	ContextMenuProvider,
+	ContextMenuRadioGroupProvider,
+	ContextMenuRadioItemProvider,
+	ContextMenuSeparatorProvider,
+	ContextMenuSubProvider,
+	ContextMenuSubTriggerProvider,
+	ContextMenuTriggerProvider
+} from './context-menu-provider.svelte';
+
+type ScheduledTimer = {
+	key: string;
+	delay: number;
+	callback: () => void;
+	cancel: ReturnType<typeof vi.fn>;
+};
+
+function withEffectRoot<T>(fn: () => T): { result: T; cleanup: () => void } {
+	let result!: T;
+	const cleanup = $effect.root(() => {
+		result = fn();
+	});
+	return { result, cleanup };
+}
+
+function installSomaHarness() {
+	const dom = createActiveDom();
+	const scheduled: ScheduledTimer[] = [];
+	const timers = {
+		schedule: vi.fn((key: string, delay: number, callback: () => void) => {
+			const timer = { key, delay, callback, cancel: vi.fn() };
+			scheduled.push(timer);
+			return timer;
+		})
+	};
+	const soma = {
+		dom,
+		uix: { timers },
+		runtime: (morfo: Morfo, sources: Omit<SomaRuntimeSources, 'dom' | 'eventEngine'>) =>
+			createSomaRuntime(morfo, {
+				dom,
+				translate: (key) => key,
+				...sources
+			})
+	} as unknown as Soma;
+
+	vi.spyOn(Soma, 'require').mockReturnValue(soma);
+	vi.spyOn(FloatingProvider, 'create').mockReturnValue({} as FloatingProvider);
+	vi.spyOn(FloatingAnchor, 'create').mockReturnValue({} as FloatingAnchor);
+
+	vi.spyOn(ContextMenuProvider.ctx, 'set').mockImplementation((value) => value);
+	vi.spyOn(ContextMenuGroupProvider.ctx, 'set').mockImplementation((value) => value);
+	vi.spyOn(ContextMenuRadioGroupProvider.ctx, 'set').mockImplementation((value) => value);
+	vi.spyOn(ContextMenuSubProvider.ctx, 'set').mockImplementation((value) => value);
+
+	vi.spyOn(ContextMenuGroupProvider, 'get').mockReturnValue(undefined);
+
+	return { dom, scheduled, timers };
+}
+
+function createContextMenuOpts() {
+	return {
+		id: state('context-menu-root'),
+		ref: state<HTMLElement | null>(null),
+		open: state(false),
+		dir: state<'ltr' | 'rtl'>('ltr'),
+		onOpenChangeComplete: state<(open: boolean) => void>(() => undefined)
+	};
+}
+
+function partOpts(id: string, el: HTMLElement = document.createElement('div')) {
+	return {
+		id: state(id),
+		ref: state<HTMLElement | null>(el)
+	};
+}
+
+function keyEvent(key: string) {
+	return {
+		key,
+		preventDefault: vi.fn()
+	};
+}
+
+function clickEvent() {
+	return {
+		preventDefault: vi.fn(),
+		stopPropagation: vi.fn()
+	};
+}
+
+function contextMenuEvent(x: number, y: number) {
+	return {
+		clientX: x,
+		clientY: y,
+		preventDefault: vi.fn()
+	};
+}
+
+function menuItem(value: string, disabled = false): HTMLElement {
+	const item = document.createElement('div');
+	item.setAttribute('data-context-menu-item', '');
+	item.setAttribute('data-text-value', value);
+	item.textContent = value;
+	if (disabled) item.setAttribute('data-disabled', '');
+	return item;
+}
+
+describe('ContextMenuProvider', () => {
+	afterEach(() => {
+		vi.restoreAllMocks();
+		document.body.innerHTML = '';
+	});
+
+	it('opens from trigger contextmenu coordinates', () => {
+		const { dom } = installSomaHarness();
+		const opts = createContextMenuOpts();
+
+		const { result, cleanup } = withEffectRoot(() => {
+			const provider = ContextMenuProvider.create(opts);
+			vi.spyOn(ContextMenuProvider.ctx, 'get').mockReturnValue(provider);
+			provider.contentId.current = 'context-menu-content';
+			const trigger = ContextMenuTriggerProvider.create({
+				...partOpts('context-menu-trigger'),
+				disabled: state(false)
+			});
+			return { provider, trigger };
+		});
+
+		expect(result.trigger.props).toMatchObject({
+			'aria-haspopup': 'menu',
+			'aria-expanded': false,
+			'aria-controls': 'context-menu-content',
+			'data-state': 'closed'
+		});
+
+		const event = contextMenuEvent(12, 34);
+		result.trigger.oncontextmenu(event as never);
+
+		expect(event.preventDefault).toHaveBeenCalledOnce();
+		expect(opts.open.current).toBe(true);
+		expect(result.provider.anchorPoint.current).toEqual({ x: 12, y: 34 });
+		expect(result.provider.virtualAnchor.current?.getBoundingClientRect()).toMatchObject({
+			x: 12,
+			y: 34,
+			width: 0,
+			height: 0
+		});
+		expect(result.trigger.props['data-state']).toBe('open');
+
+		cleanup();
+		dom.dispose();
+	});
+
+	it('scopes item queries to the current content and skips disabled items', () => {
+		const { dom } = installSomaHarness();
+		const opts = createContextMenuOpts();
+		const container = document.createElement('div');
+		container.setAttribute('data-context-menu-content', '');
+		const first = menuItem('first');
+		const disabled = menuItem('disabled', true);
+		const nestedContent = document.createElement('div');
+		nestedContent.setAttribute('data-context-menu-sub-content', '');
+		const nested = menuItem('nested');
+		nestedContent.appendChild(nested);
+		container.append(first, disabled, nestedContent);
+
+		const { result: provider, cleanup } = withEffectRoot(() => ContextMenuProvider.create(opts));
+
+		expect(provider.getItems(container)).toEqual([first]);
+
+		cleanup();
+		dom.dispose();
+	});
+
+	it('activates items by click and keyboard, then closes when configured', () => {
+		const { dom } = installSomaHarness();
+		const opts = createContextMenuOpts();
+		opts.open.current = true;
+		const onSelect = vi.fn();
+
+		const { result, cleanup } = withEffectRoot(() => {
+			const provider = ContextMenuProvider.create(opts);
+			vi.spyOn(ContextMenuProvider.ctx, 'get').mockReturnValue(provider);
+			const item = ContextMenuItemProvider.create({
+				...partOpts('context-menu-item'),
+				disabled: state(false),
+				textValue: state('Save'),
+				closeOnSelect: state(true),
+				onSelect: state(onSelect)
+			});
+			return { item };
+		});
+
+		expect(result.item.props).toMatchObject({
+			role: 'menuitem',
+			tabindex: -1,
+			'data-text-value': 'Save'
+		});
+
+		result.item.onkeydown(keyEvent(' ') as never);
+		expect(onSelect).toHaveBeenCalledOnce();
+		expect(opts.open.current).toBe(false);
+
+		opts.open.current = true;
+		result.item.onclick({} as never);
+		expect(onSelect).toHaveBeenCalledTimes(2);
+		expect(opts.open.current).toBe(false);
+
+		cleanup();
+		dom.dispose();
+	});
+
+	it('updates checkbox and radio selections without duplicating selection logic', () => {
+		const { dom } = installSomaHarness();
+		const opts = createContextMenuOpts();
+		const checkboxChecked = state(false);
+		const radioValue = state('left');
+
+		const { result, cleanup } = withEffectRoot(() => {
+			const provider = ContextMenuProvider.create(opts);
+			vi.spyOn(ContextMenuProvider.ctx, 'get').mockReturnValue(provider);
+
+			const checkboxItem = ContextMenuCheckboxItemProvider.create({
+				...partOpts('context-menu-checkbox'),
+				checked: checkboxChecked,
+				disabled: state(false),
+				textValue: state('Bold'),
+				closeOnSelect: state(false),
+				onSelect: state(() => undefined)
+			});
+
+			const radioGroup = ContextMenuRadioGroupProvider.create({
+				...partOpts('context-menu-radio-group'),
+				value: radioValue
+			});
+			vi.spyOn(ContextMenuRadioGroupProvider, 'require').mockReturnValue(radioGroup);
+			const radioItem = ContextMenuRadioItemProvider.create({
+				...partOpts('context-menu-radio'),
+				value: state('right'),
+				disabled: state(false),
+				textValue: state('Right'),
+				closeOnSelect: state(false),
+				onSelect: state(() => undefined)
+			});
+
+			return { checkboxItem, radioItem };
+		});
+
+		expect(result.checkboxItem.props).toMatchObject({
+			role: 'menuitemcheckbox',
+			'aria-checked': false,
+			'data-state': 'unchecked'
+		});
+		result.checkboxItem.onclick({} as never);
+		expect(checkboxChecked.current).toBe(true);
+		expect(result.checkboxItem.props['data-state']).toBe('checked');
+
+		expect(result.radioItem.isChecked).toBe(false);
+		result.radioItem.onkeydown(keyEvent('Enter') as never);
+		expect(radioValue.current).toBe('right');
+		expect(result.radioItem.props['data-state']).toBe('checked');
+
+		cleanup();
+		dom.dispose();
+	});
+
+	it('opens submenus through delayed pointer hover and immediate click/keyboard paths', () => {
+		const { dom, scheduled, timers } = installSomaHarness();
+		const opts = createContextMenuOpts();
+		const subOpen = state(false);
+
+		const { result, cleanup } = withEffectRoot(() => {
+			const provider = ContextMenuProvider.create(opts);
+			vi.spyOn(ContextMenuProvider.ctx, 'get').mockReturnValue(provider);
+			const sub = ContextMenuSubProvider.create({ open: subOpen });
+			vi.spyOn(ContextMenuSubProvider, 'require').mockReturnValue(sub);
+			sub.contentId.current = 'context-menu-sub-content';
+			const trigger = ContextMenuSubTriggerProvider.create({
+				...partOpts('context-menu-sub-trigger'),
+				disabled: state(false),
+				textValue: state('More')
+			});
+			return { trigger };
+		});
+
+		result.trigger.onpointerenter();
+
+		expect(timers.schedule).toHaveBeenCalledWith(
+			'soma:context-menu:context-menu-sub-trigger:submenu-open',
+			100,
+			expect.any(Function),
+			{ replace: true, meta: { component: 'context-menu', action: 'submenu-open' } }
+		);
+		expect(subOpen.current).toBe(false);
+
+		scheduled.at(-1)?.callback();
+		expect(subOpen.current).toBe(true);
+		expect(result.trigger.props).toMatchObject({
+			role: 'menuitem',
+			'aria-haspopup': 'menu',
+			'aria-expanded': true,
+			'aria-controls': 'context-menu-sub-content',
+			'data-state': 'open',
+			'data-text-value': 'More'
+		});
+
+		subOpen.current = false;
+		const event = clickEvent();
+		result.trigger.onclick(event as never);
+		expect(event.preventDefault).toHaveBeenCalledOnce();
+		expect(event.stopPropagation).toHaveBeenCalledOnce();
+		expect(subOpen.current).toBe(true);
+
+		subOpen.current = false;
+		result.trigger.onkeydown(keyEvent('ArrowRight') as never);
+		expect(subOpen.current).toBe(true);
+
+		cleanup();
+		dom.dispose();
+	});
+
+	it('wires group heading and separator accessibility props', () => {
+		const { dom } = installSomaHarness();
+		const opts = createContextMenuOpts();
+
+		const { result, cleanup } = withEffectRoot(() => {
+			const provider = ContextMenuProvider.create(opts);
+			vi.spyOn(ContextMenuProvider.ctx, 'get').mockReturnValue(provider);
+			const group = ContextMenuGroupProvider.create(partOpts('context-menu-group'));
+			vi.spyOn(ContextMenuGroupProvider, 'get').mockReturnValue(group);
+			const heading = ContextMenuGroupHeadingProvider.create(partOpts('context-menu-heading'));
+			const separator = ContextMenuSeparatorProvider.create(partOpts('context-menu-separator'));
+			return { group, heading, separator };
+		});
+
+		expect(result.group.props).toMatchObject({
+			role: 'group',
+			'aria-labelledby': 'context-menu-heading'
+		});
+		expect(result.heading.props.id).toBe('context-menu-heading');
+		expect(result.separator.props).toMatchObject({
+			role: 'separator',
+			'aria-orientation': 'horizontal'
+		});
+
+		cleanup();
+		dom.dispose();
+	});
+});