Add tree view provider coverage

continue.md

@@ -72,9 +72,11 @@ Actualizacion 2026-05-15:
     navegación horizontal entre triggers y cambio de menú desde content.
   - Cobertura nueva para Listbox: props ARIA root, selección, navegación,
     typeahead, indicador de item y grupos.
+  - Cobertura nueva para TreeView: expansión/selección, navegación root,
+    typeahead, props de ramas/hojas y partes auxiliares.
   - Validado por fase:
     - `npm run check` -> 0 errores, 0 warnings.
-    - `npm run test` -> 196 archivos, 2129 tests OK.
+    - `npm run test` -> 197 archivos, 2133 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.
@@ -99,6 +101,7 @@ Actualizacion 2026-05-15:
     - `context-menu-provider.svelte.test.ts` -> 6 tests OK.
     - `menubar-provider.svelte.test.ts` -> 4 tests OK.
     - `listbox-provider.svelte.test.ts` -> 4 tests OK.
+    - `tree-view-provider.svelte.test.ts` -> 4 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

@@ -504,10 +504,12 @@ Los tests por componente estan creciendo desde las piezas de mayor riesgo. A
   hover-follow, navegación horizontal y cambio de menú desde content.
 - `listbox/listbox-provider.svelte.test.ts` — props ARIA root, selección,
   navegación, typeahead, indicador de item y grupos.
+- `tree-view/tree-view-provider.svelte.test.ts` — expansión/selección,
+  navegación root, typeahead, props de ramas/hojas y partes auxiliares.
 
 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/context-menu/menubar/listbox.
+navegacion superior/treegrid/tree-view/dropdown/context-menu/menubar/listbox.
 `table-core`, `form-core` y el scorer de Command ya no viven dentro de Soma:
 se consumen desde `$libs/datagrid`, `$libs/forms` y `$libs/strings`.
 

src/uix/soma/components/tree-view/tree-view-provider.svelte.test.ts

@@ -0,0 +1,326 @@
+// @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 {
+	TreeViewBranchContentProvider,
+	TreeViewBranchControlProvider,
+	TreeViewBranchIndentGuideProvider,
+	TreeViewBranchIndicatorProvider,
+	TreeViewBranchProvider,
+	TreeViewItemProvider,
+	TreeViewLabelProvider,
+	TreeViewProvider
+} from './tree-view-provider.svelte';
+
+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 timers = {
+		schedule: vi.fn((_key: string, _delay: number, _callback: () => void) => ({
+			cancel: vi.fn()
+		}))
+	};
+	const soma = {
+		dom,
+		langs: { ts: vi.fn(() => 'Tree') },
+		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(TreeViewProvider.ctx, 'set').mockImplementation((value) => value);
+	vi.spyOn(TreeViewBranchProvider.ctx, 'set').mockImplementation((value) => value);
+
+	return { dom };
+}
+
+function createTreeViewOpts(root = document.createElement('ul')) {
+	root.setAttribute('data-tree-view', '');
+	document.body.appendChild(root);
+	return {
+		id: state('tree-view-root'),
+		ref: state<HTMLElement | null>(root),
+		expandedValue: state<string[]>([]),
+		selectedValue: state<string[]>([]),
+		selectionMode: state<'single' | 'multiple'>('single'),
+		dir: state<'ltr' | 'rtl'>('ltr'),
+		expandOnClick: state(true),
+		typeahead: state(true),
+		ariaLabel: state<string | undefined>(undefined),
+		ariaLabelledby: state<string | undefined>(undefined)
+	};
+}
+
+function branchOpts(id: string, value: string, el: HTMLElement, depth = 0, disabled = false) {
+	return {
+		id: state(id),
+		ref: state<HTMLElement | null>(el),
+		value: state(value),
+		disabled: state(disabled),
+		depth: state(depth)
+	};
+}
+
+function itemOpts(id: string, value: string, el: HTMLElement, depth = 0, disabled = false) {
+	return {
+		id: state(id),
+		ref: state<HTMLElement | null>(el),
+		value: state(value),
+		disabled: state(disabled),
+		depth: state(depth)
+	};
+}
+
+function partOpts(id: string, el: HTMLElement = document.createElement('div')) {
+	return {
+		id: state(id),
+		ref: state<HTMLElement | null>(el)
+	};
+}
+
+function applyAttrs(el: HTMLElement, props: Record<string, unknown>) {
+	for (const [key, value] of Object.entries(props)) {
+		if (!key.startsWith('data-') && !key.startsWith('aria-') && key !== 'role' && key !== 'id') {
+			continue;
+		}
+		if (value === undefined || value === false || typeof value === 'function') continue;
+		el.setAttribute(key, value === true ? '' : String(value));
+	}
+}
+
+function keyEvent(key: string, extras: Record<string, unknown> = {}) {
+	return {
+		key,
+		preventDefault: vi.fn(),
+		ctrlKey: false,
+		metaKey: false,
+		altKey: false,
+		...extras
+	};
+}
+
+function clickEvent() {
+	return {
+		stopPropagation: vi.fn()
+	};
+}
+
+describe('TreeViewProvider', () => {
+	afterEach(() => {
+		vi.restoreAllMocks();
+		document.body.innerHTML = '';
+	});
+
+	it('exposes root props and tracks expansion/selection state', () => {
+		const { dom } = installSomaHarness();
+		const opts = createTreeViewOpts();
+		opts.selectionMode.current = 'multiple';
+
+		const { result: provider, cleanup } = withEffectRoot(() => TreeViewProvider.create(opts));
+
+		expect(provider.props).toMatchObject({
+			role: 'tree',
+			dir: 'ltr',
+			'aria-multiselectable': true,
+			'aria-label': 'Tree'
+		});
+
+		provider.expand('docs');
+		expect(opts.expandedValue.current).toEqual(['docs']);
+		provider.toggleExpand('docs');
+		expect(opts.expandedValue.current).toEqual([]);
+
+		provider.select('alpha');
+		provider.select('beta');
+		expect(opts.selectedValue.current).toEqual(['alpha', 'beta']);
+		provider.select('alpha');
+		expect(opts.selectedValue.current).toEqual(['beta']);
+
+		cleanup();
+		dom.dispose();
+	});
+
+	it('navigates visible treeitems, expands branches and supports typeahead', () => {
+		const { dom } = installSomaHarness();
+		const focusSpy = vi.spyOn(dom, 'focus');
+		const root = document.createElement('ul');
+		const opts = createTreeViewOpts(root);
+
+		const { result, cleanup } = withEffectRoot(() => {
+			const provider = TreeViewProvider.create(opts);
+			vi.spyOn(TreeViewProvider.ctx, 'get').mockReturnValue(provider);
+			applyAttrs(root, provider.props);
+
+			const branchEl = document.createElement('li');
+			const contentEl = document.createElement('ul');
+			const childEl = document.createElement('li');
+			const siblingEl = document.createElement('li');
+			childEl.textContent = 'Bravo';
+			siblingEl.textContent = 'Charlie';
+			root.append(branchEl, siblingEl);
+			branchEl.appendChild(contentEl);
+			contentEl.appendChild(childEl);
+
+			const branch = TreeViewBranchProvider.create(branchOpts('tree-branch', 'docs', branchEl));
+			applyAttrs(branchEl, branch.props);
+			const child = TreeViewItemProvider.create(itemOpts('tree-child', 'child', childEl, 1));
+			applyAttrs(childEl, child.props);
+			const sibling = TreeViewItemProvider.create(itemOpts('tree-sibling', 'sibling', siblingEl));
+			applyAttrs(siblingEl, sibling.props);
+
+			return { provider, branchEl, childEl, siblingEl };
+		});
+
+		expect(result.provider.getVisibleItems()).toEqual([
+			result.branchEl,
+			result.childEl,
+			result.siblingEl
+		]);
+
+		vi.spyOn(dom, 'activeElement').mockReturnValue(result.branchEl);
+		const expand = keyEvent('ArrowRight');
+		result.provider.onkeydown(expand as never);
+		expect(expand.preventDefault).toHaveBeenCalledOnce();
+		expect(opts.expandedValue.current).toEqual(['docs']);
+
+		result.provider.onkeydown(keyEvent('ArrowRight') as never);
+		expect(focusSpy).toHaveBeenCalledWith(result.childEl);
+
+		vi.spyOn(dom, 'activeElement').mockReturnValue(result.childEl);
+		result.provider.onkeydown(keyEvent('ArrowDown') as never);
+		expect(focusSpy).toHaveBeenLastCalledWith(result.siblingEl);
+
+		result.provider.onkeydown(keyEvent('c') as never);
+		expect(focusSpy).toHaveBeenLastCalledWith(result.siblingEl);
+
+		cleanup();
+		dom.dispose();
+	});
+
+	it('wires branch control, indicator, content and indent guide props', () => {
+		const { dom } = installSomaHarness();
+		const root = document.createElement('ul');
+		const opts = createTreeViewOpts(root);
+
+		const { result, cleanup } = withEffectRoot(() => {
+			const provider = TreeViewProvider.create(opts);
+			vi.spyOn(TreeViewProvider.ctx, 'get').mockReturnValue(provider);
+			applyAttrs(root, provider.props);
+			const branchEl = document.createElement('li');
+			const controlEl = document.createElement('div');
+			const contentEl = document.createElement('ul');
+			root.appendChild(branchEl);
+			branchEl.append(controlEl, contentEl);
+
+			const branch = TreeViewBranchProvider.create(branchOpts('tree-branch', 'docs', branchEl, 1));
+			applyAttrs(branchEl, branch.props);
+			vi.spyOn(TreeViewBranchProvider, 'require').mockReturnValue(branch);
+			const control = TreeViewBranchControlProvider.create(
+				partOpts('tree-branch-control', controlEl)
+			);
+			applyAttrs(controlEl, control.props);
+			const content = TreeViewBranchContentProvider.create(
+				partOpts('tree-branch-content', contentEl)
+			);
+			const indicator = TreeViewBranchIndicatorProvider.create(partOpts('tree-branch-indicator'));
+			const guide = TreeViewBranchIndentGuideProvider.create(partOpts('tree-branch-guide'));
+			return { branch, control, content, indicator, guide };
+		});
+
+		expect(result.branch.props).toMatchObject({
+			role: 'treeitem',
+			'aria-expanded': false,
+			'aria-level': 2,
+			'data-state': 'closed',
+			'data-depth': 1
+		});
+		expect(result.control.props).toMatchObject({
+			tabindex: 0,
+			'data-value': 'docs',
+			'data-state': 'closed',
+			'data-depth': 1
+		});
+
+		result.control.onclick({} as never);
+		expect(opts.expandedValue.current).toEqual(['docs']);
+		expect(opts.selectedValue.current).toEqual(['docs']);
+		expect(result.content.props).toMatchObject({
+			role: 'group',
+			'data-state': 'open',
+			'data-depth': 1
+		});
+
+		const event = clickEvent();
+		result.indicator.onclick(event as never);
+		expect(event.stopPropagation).toHaveBeenCalledOnce();
+		expect(opts.expandedValue.current).toEqual([]);
+		expect(result.indicator.props).toMatchObject({
+			'aria-hidden': true,
+			'data-state': 'closed'
+		});
+		expect(result.guide.props).toMatchObject({
+			'aria-hidden': true,
+			'data-depth': 1
+		});
+
+		cleanup();
+		dom.dispose();
+	});
+
+	it('wires leaf item and label props', () => {
+		const { dom } = installSomaHarness();
+		const root = document.createElement('ul');
+		const opts = createTreeViewOpts(root);
+		opts.selectedValue.current = ['leaf'];
+		const leafEl = document.createElement('li');
+		leafEl.setAttribute('data-tree-view-item', '');
+		leafEl.setAttribute('data-value', 'leaf');
+		leafEl.setAttribute('role', 'treeitem');
+		root.appendChild(leafEl);
+
+		const { result, cleanup } = withEffectRoot(() => {
+			const provider = TreeViewProvider.create(opts);
+			vi.spyOn(TreeViewProvider.ctx, 'get').mockReturnValue(provider);
+			applyAttrs(root, provider.props);
+			const item = TreeViewItemProvider.create(itemOpts('tree-leaf', 'leaf', leafEl, 2));
+			const label = TreeViewLabelProvider.create(partOpts('tree-label'));
+			return { item, label };
+		});
+
+		expect(result.item.props).toMatchObject({
+			role: 'treeitem',
+			'aria-selected': true,
+			'aria-level': 3,
+			tabindex: 0,
+			'data-value': 'leaf',
+			'data-selected': '',
+			'data-depth': 2
+		});
+
+		result.item.onclick({} as never);
+		expect(opts.selectedValue.current).toEqual([]);
+		expect(result.label.props.id).toBe('tree-label');
+
+		cleanup();
+		dom.dispose();
+	});
+});