@joewinke/jatui 0.39.0 → 0.41.0

package/dist/components/tree/TreeView.svelte

@@ -0,0 +1,680 @@
+<!--
+  TreeView: data-driven tree with connector guides, the full WAI-ARIA tree
+  keyboard model, typeahead, single/multi selection and optional windowing
+  (BoardUI wave 3, jatui-6kitr).
+
+  Rendered as ONE flat list of role="treeitem" rows (aria-level / posinset /
+  setsize) produced by `flattenTree`, so it can be windowed with
+  `jatui/virtual`. The guide algorithm (trunks only while an ancestor has a
+  later sibling, elbow + tail + bridge) and the "ArrowRight on an open branch
+  steps into its first child" rule follow BoardUI's tree view (MIT, © 2026
+  Mertcan Dundar Esmergul); this is a clean Svelte re-implementation.
+-->
+<script lang="ts" module>
+	export interface TreeRowContext {
+		id: string;
+		level: number;
+		expanded: boolean;
+		hasChildren: boolean;
+		selected: boolean;
+		focused: boolean;
+		disabled: boolean;
+	}
+
+	/** Pass `createRowWindow` from `jatui/virtual`; TreeView never imports it itself. */
+	export interface TreeViewVirtualOptions {
+		createRowWindow: (opts: {
+			count: () => number;
+			getKey: (index: number) => string;
+			estimateSize: (index: number) => number;
+			overscan?: number;
+			threshold?: number;
+			scrollRoot?: HTMLElement | Window | 'auto';
+		}) => {
+			readonly items: ReadonlyArray<{ index: number; key: string; gapBefore: number }>;
+			readonly paddingTop: number;
+			readonly paddingBottom: number;
+			readonly windowed: boolean;
+			measure: (node: HTMLElement, key: string) => { update?(key: string): void; destroy(): void };
+			anchor: (node: HTMLElement) => { destroy(): void };
+			scrollToKey(key: string, opts?: { align?: 'auto' | 'start' | 'center' | 'end' }): void;
+		};
+		/** Row height estimate in px (default: the size's row height). */
+		estimateRowSize?: number;
+		overscan?: number;
+		/** Render everything below this many visible rows (default 0 = always window). */
+		threshold?: number;
+		scrollRoot?: HTMLElement | Window | 'auto';
+	}
+</script>
+
+<script lang="ts" generics="T">
+	import { tick, untrack, type Snippet } from 'svelte';
+	import { flattenTree, collectBranchIds, pathToNode, type FlatTreeNode } from './flattenTree';
+	import { resolveTreeKey, treeTypeahead } from './treeKeys';
+	import { motionSlide } from '../../motion/transitions';
+
+	interface Props {
+		nodes: readonly T[];
+		/** Default: `node.id`. */
+		getId?: (node: T) => string;
+		/** Default: `node.children`. */
+		getChildren?: (node: T) => readonly T[] | null | undefined;
+		/** Text for the row and typeahead. Default: `node.label ?? node.name ?? id`. */
+		getLabel?: (node: T) => string;
+		/** Branch override for lazily-loaded folders (show a chevron before children arrive). */
+		hasChildren?: (node: T) => boolean;
+		isDisabled?: (node: T) => boolean;
+		/** Open branch ids. Replaced (never mutated) on change. */
+		expanded?: Set<string>;
+		/** Selected ids. Replaced (never mutated) on change. */
+		selected?: Set<string>;
+		selectionMode?: 'none' | 'single' | 'multiple';
+		size?: 'sm' | 'md';
+		showGuides?: boolean;
+		/** Default folder/file icons. False hides them (an `icon` snippet still wins). */
+		icons?: boolean;
+		/** Clicking a branch row (not just its chevron) toggles it. */
+		expandOnClick?: boolean;
+		/** Expand/collapse animation. Always off under reduced motion and while windowed. */
+		animate?: boolean;
+		/** CSS max-height; makes the tree its own scroller. */
+		maxHeight?: string;
+		ariaLabel?: string;
+		emptyText?: string;
+		virtual?: TreeViewVirtualOptions;
+		label?: Snippet<[T, TreeRowContext]>;
+		icon?: Snippet<[T, TreeRowContext]>;
+		trailing?: Snippet<[T, TreeRowContext]>;
+		empty?: Snippet;
+		onExpandedChange?: (expanded: Set<string>) => void;
+		onSelectionChange?: (selected: Set<string>) => void;
+		/** A branch just opened: load its children here if they are lazy. */
+		onExpand?: (node: T) => void;
+		/** Enter or double-click. */
+		onAction?: (node: T) => void;
+		onRowContextMenu?: (node: T, event: MouseEvent) => void;
+		class?: string;
+	}
+
+	let {
+		nodes,
+		getId = (n: T) => String((n as { id?: unknown }).id),
+		getChildren = (n: T) => (n as { children?: T[] }).children,
+		getLabel,
+		hasChildren,
+		isDisabled,
+		expanded = $bindable(new Set<string>()),
+		selected = $bindable(new Set<string>()),
+		selectionMode = 'single',
+		size = 'md',
+		showGuides = true,
+		icons = true,
+		expandOnClick = false,
+		animate = true,
+		maxHeight,
+		ariaLabel = 'Tree',
+		emptyText = 'Nothing here',
+		virtual,
+		label,
+		icon,
+		trailing,
+		empty,
+		onExpandedChange,
+		onSelectionChange,
+		onExpand,
+		onAction,
+		onRowContextMenu,
+		class: className = ''
+	}: Props = $props();
+
+	const uid = $props.id();
+
+	const labelOf = (n: T, id: string) => {
+		if (getLabel) return getLabel(n);
+		const o = n as { label?: unknown; name?: unknown };
+		return String(o.label ?? o.name ?? id);
+	};
+
+	const rows = $derived(
+		flattenTree(nodes, { getId, getChildren, expanded, hasChildren })
+	);
+	const indexById = $derived(new Map(rows.map((r, i) => [r.id, i])));
+	const disabledIds = $derived(
+		isDisabled ? new Set(rows.filter((r) => isDisabled(r.node)).map((r) => r.id)) : new Set<string>()
+	);
+	const disabled = (id: string) => disabledIds.has(id);
+
+	let focusedId = $state<string | null>(null);
+	let anchorId: string | null = null;
+
+	const tabStopId = $derived.by(() => {
+		if (focusedId != null && indexById.has(focusedId)) return focusedId;
+		for (const r of rows) if (selected.has(r.id) && !disabled(r.id)) return r.id;
+		return rows.find((r) => !disabled(r.id))?.id ?? null;
+	});
+
+	// Stable DOM ids for arbitrary node ids.
+	const domIds = new Map<string, string>();
+	function domId(id: string): string {
+		let d = domIds.get(id);
+		if (!d) {
+			d = `${uid}-r${domIds.size}`;
+			domIds.set(id, d);
+		}
+		return d;
+	}
+
+	// ── Windowing ───────────────────────────────────────────────────────────
+	const rowHeight = $derived(size === 'sm' ? 28 : 32);
+	const virtualAtMount = untrack(() => virtual);
+	const win = virtualAtMount
+		? virtualAtMount.createRowWindow({
+				count: () => rows.length,
+				getKey: (i) => rows[i]?.id ?? String(i),
+				estimateSize: () => virtual?.estimateRowSize ?? rowHeight,
+				overscan: virtualAtMount.overscan,
+				get threshold() {
+					return virtual?.threshold ?? 0;
+				},
+				scrollRoot: virtualAtMount.scrollRoot ?? 'auto'
+			})
+		: null;
+	const noop = (_n: HTMLElement, _k?: string) => ({ update() {}, destroy() {} });
+	const measureAction = win ? win.measure : noop;
+	const anchorAction = win ? win.anchor : noop;
+
+	type Slot = { row: FlatTreeNode<T>; gap: number; bridge: boolean };
+	const slots = $derived.by((): Slot[] => {
+		const bridge = (i: number) => rows[i].expanded && rows[i + 1]?.parentId === rows[i].id;
+		if (!win) return rows.map((row, i) => ({ row, gap: 0, bridge: bridge(i) }));
+		return win.items
+			.filter((it) => rows[it.index])
+			.map((it) => ({ row: rows[it.index], gap: it.gapBefore, bridge: bridge(it.index) }));
+	});
+
+	// ── State changes ───────────────────────────────────────────────────────
+	function setExpanded(next: Set<string>) {
+		expanded = next;
+		onExpandedChange?.(next);
+	}
+
+	function expand(ids: string[]) {
+		const next = new Set(expanded);
+		const opened: T[] = [];
+		for (const id of ids) {
+			if (next.has(id)) continue;
+			next.add(id);
+			const r = rows[indexById.get(id) ?? -1];
+			if (r) opened.push(r.node);
+		}
+		if (next.size === expanded.size) return;
+		setExpanded(next);
+		for (const n of opened) onExpand?.(n);
+	}
+
+	function collapse(id: string) {
+		if (!expanded.has(id)) return;
+		const next = new Set(expanded);
+		next.delete(id);
+		setExpanded(next);
+	}
+
+	function toggle(row: FlatTreeNode<T>) {
+		if (!row.hasChildren || disabled(row.id)) return;
+		if (row.expanded) collapse(row.id);
+		else expand([row.id]);
+	}
+
+	function setSelected(next: Set<string>) {
+		selected = next;
+		onSelectionChange?.(next);
+	}
+
+	function selectRow(id: string, mode: 'replace' | 'toggle' | 'range') {
+		if (selectionMode === 'none' || disabled(id)) return;
+		if (selectionMode === 'single' || mode === 'replace') {
+			if (selected.size === 1 && selected.has(id)) return;
+			setSelected(new Set([id]));
+			anchorId = id;
+			return;
+		}
+		if (mode === 'toggle') {
+			const next = new Set(selected);
+			if (next.has(id)) next.delete(id);
+			else next.add(id);
+			setSelected(next);
+			anchorId = id;
+			return;
+		}
+		const a = indexById.get(anchorId ?? id) ?? indexById.get(id)!;
+		const b = indexById.get(id)!;
+		const [lo, hi] = a < b ? [a, b] : [b, a];
+		const next = new Set<string>();
+		for (let i = lo; i <= hi; i++) if (!disabled(rows[i].id)) next.add(rows[i].id);
+		setSelected(next);
+	}
+
+	async function focusRow(id: string) {
+		focusedId = id;
+		await tick();
+		let el = document.getElementById(domId(id));
+		if (!el && win) {
+			win.scrollToKey(id, { align: 'auto' });
+			await new Promise((r) => requestAnimationFrame(() => r(null)));
+			await tick();
+			el = document.getElementById(domId(id));
+		}
+		el?.focus();
+		if (!win) el?.scrollIntoView?.({ block: 'nearest' });
+	}
+
+	// ── Pointer ─────────────────────────────────────────────────────────────
+	function onRowClick(e: MouseEvent, row: FlatTreeNode<T>) {
+		if (disabled(row.id)) return;
+		focusedId = row.id;
+		if (selectionMode !== 'none') {
+			if (e.shiftKey && selectionMode === 'multiple') selectRow(row.id, 'range');
+			else if ((e.metaKey || e.ctrlKey) && selectionMode === 'multiple') selectRow(row.id, 'toggle');
+			else selectRow(row.id, 'replace');
+		}
+		if (expandOnClick && row.hasChildren && !e.shiftKey && !e.metaKey && !e.ctrlKey) toggle(row);
+	}
+
+	function onChevronClick(e: MouseEvent, row: FlatTreeNode<T>) {
+		e.stopPropagation();
+		if (disabled(row.id)) return;
+		focusedId = row.id;
+		toggle(row);
+	}
+
+	// ── Keyboard ────────────────────────────────────────────────────────────
+	let typeBuffer = '';
+	let typeTimer: ReturnType<typeof setTimeout> | undefined;
+
+	function onKeydown(e: KeyboardEvent) {
+		if (e.altKey || e.isComposing) return;
+		const current = focusedId != null && indexById.has(focusedId) ? focusedId : tabStopId;
+		const mod = e.metaKey || e.ctrlKey;
+
+		// Typeahead: single printable characters, no modifiers.
+		if (!mod && e.key.length === 1 && e.key !== ' ' && e.key !== '*') {
+			typeBuffer += e.key;
+			clearTimeout(typeTimer);
+			typeTimer = setTimeout(() => (typeBuffer = ''), 500);
+			const from = current != null ? (indexById.get(current) ?? -1) : -1;
+			const j = treeTypeahead(
+				rows.map((r) => labelOf(r.node, r.id)),
+				from,
+				typeBuffer,
+				(i) => disabled(rows[i].id)
+			);
+			if (j >= 0) {
+				e.preventDefault();
+				void focusRow(rows[j].id);
+			}
+			return;
+		}
+		if (mod && e.key !== 'a') return;
+
+		if (mod && e.key === 'a') {
+			if (selectionMode !== 'multiple') return;
+			e.preventDefault();
+			setSelected(new Set(rows.filter((r) => !disabled(r.id)).map((r) => r.id)));
+			return;
+		}
+
+		const res = resolveTreeKey(rows, current, e.key, disabled);
+		if (!res) return;
+		e.preventDefault();
+		switch (res.type) {
+			case 'focus':
+				void focusRow(res.id);
+				if (e.shiftKey && selectionMode === 'multiple' && (e.key === 'ArrowDown' || e.key === 'ArrowUp')) {
+					if (anchorId == null && current) anchorId = current;
+					selectRow(res.id, 'range');
+				}
+				break;
+			case 'expand':
+				expand([res.id]);
+				break;
+			case 'expandMany':
+				expand(res.ids);
+				break;
+			case 'collapse':
+				collapse(res.id);
+				break;
+			case 'action': {
+				const r = rows[indexById.get(res.id)!];
+				if (onAction) onAction(r.node);
+				else if (r.hasChildren) toggle(r);
+				else selectRow(r.id, 'replace');
+				break;
+			}
+			case 'select':
+				selectRow(res.id, selectionMode === 'multiple' ? 'toggle' : 'replace');
+				break;
+		}
+	}
+
+	// ── Transitions: leaving rows go inert at once, never stay in the tab order ─
+	const motionOn = () => animate && !(win?.windowed ?? false);
+	function rowIn(node: Element) {
+		return motionSlide(node, { duration: motionOn() ? 'fast' : 0, opacity: true });
+	}
+	function rowOut(node: Element) {
+		(node as HTMLElement).inert = true;
+		node.setAttribute('aria-hidden', 'true');
+		return motionSlide(node, { duration: motionOn() ? 'fast' : 0, opacity: true });
+	}
+
+	// ── Imperative API (bind:this) ──────────────────────────────────────────
+	export function expandAll() {
+		setExpanded(new Set(collectBranchIds(nodes, getId, (n) => getChildren(n))));
+	}
+	export function collapseAll() {
+		setExpanded(new Set());
+	}
+	/** Open every ancestor of `id`, then focus it. */
+	export async function reveal(id: string) {
+		const path = pathToNode(nodes, id, getId, (n) => getChildren(n));
+		if (!path) return;
+		expand(path.slice(0, -1));
+		await tick();
+		await focusRow(id);
+	}
+	export function focus(id?: string) {
+		const target = id ?? tabStopId;
+		if (target != null) void focusRow(target);
+	}
+	/** Visible ids in render order. */
+	export function visibleIds(): string[] {
+		return rows.map((r) => r.id);
+	}
+</script>
+
+{#snippet defaultIcon(row: { hasChildren: boolean; expanded: boolean })}
+	{#if row.hasChildren}
+		{#if row.expanded}
+			<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
+				<path stroke-linejoin="round" d="M2.75 6.25V5A1.75 1.75 0 0 1 4.5 3.25h3l1.75 2h6.25A1.75 1.75 0 0 1 17.25 7v.5" />
+				<path stroke-linejoin="round" d="M2.2 8.75h15.1a.9.9 0 0 1 .87 1.12l-1.36 5.4a1.75 1.75 0 0 1-1.7 1.33H4.4a1.75 1.75 0 0 1-1.73-1.5L2.2 8.75Z" />
+			</svg>
+		{:else}
+			<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
+				<path stroke-linejoin="round" d="M2.75 5A1.75 1.75 0 0 1 4.5 3.25h3l1.75 2h6.25A1.75 1.75 0 0 1 17.25 7v7.25a1.75 1.75 0 0 1-1.75 1.75h-11a1.75 1.75 0 0 1-1.75-1.75V5Z" />
+			</svg>
+		{/if}
+	{:else}
+		<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
+			<path stroke-linejoin="round" d="M5.5 2.75h5.25l4.5 4.5v9a1 1 0 0 1-1 1h-8.75a1 1 0 0 1-1-1v-12.5a1 1 0 0 1 1-1Z" />
+			<path stroke-linejoin="round" d="M10.5 2.75v4.5h4.5" />
+		</svg>
+	{/if}
+{/snippet}
+
+<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+<ul
+	role="tree"
+	class="jatui-tree jatui-tree-{size} {className}"
+	class:has-max={!!maxHeight}
+	aria-label={ariaLabel}
+	aria-multiselectable={selectionMode === 'multiple' ? 'true' : undefined}
+	style:max-height={maxHeight}
+	onkeydown={onKeydown}
+	use:anchorAction
+>
+	{#if rows.length === 0}
+		<li role="none" class="tree-empty">
+			{#if empty}{@render empty()}{:else}{emptyText}{/if}
+		</li>
+	{:else}
+		{#if win && win.paddingTop > 0}
+			<li role="none" class="tree-spacer" style:height="{win.paddingTop}px"></li>
+		{/if}
+		{#each slots as { row, gap, bridge } (row.id)}
+			{@const isSel = selected.has(row.id)}
+			{@const isDis = disabled(row.id)}
+			{@const ctx = {
+				id: row.id,
+				level: row.level,
+				expanded: row.expanded,
+				hasChildren: row.hasChildren,
+				selected: isSel,
+				focused: focusedId === row.id,
+				disabled: isDis
+			}}
+			{#if gap > 0}
+				<li role="none" class="tree-spacer" style:height="{gap}px"></li>
+			{/if}
+			<!-- Keys are handled once on the tree (roving focus), not per row. -->
+			<!-- svelte-ignore a11y_click_events_have_key_events -->
+			<li
+				id={domId(row.id)}
+				role="treeitem"
+				class="tree-row"
+				class:is-selected={isSel}
+				class:is-disabled={isDis}
+				class:is-leaf={!row.hasChildren}
+				aria-level={row.level}
+				aria-posinset={row.posinset}
+				aria-setsize={row.setsize}
+				aria-expanded={row.hasChildren ? row.expanded : undefined}
+				aria-selected={selectionMode === 'none' ? undefined : isSel}
+				aria-disabled={isDis || undefined}
+				aria-labelledby="{domId(row.id)}-l"
+				data-tree-id={row.id}
+				tabindex={row.id === tabStopId ? 0 : -1}
+				style:--level={row.level}
+				onclick={(e) => onRowClick(e, row)}
+				ondblclick={() => !isDis && onAction?.(row.node)}
+				oncontextmenu={onRowContextMenu ? (e) => onRowContextMenu(row.node, e) : undefined}
+				onfocus={() => (focusedId = row.id)}
+				use:measureAction={row.id}
+				in:rowIn
+				out:rowOut
+			>
+				{#if showGuides}
+					<span class="tree-guides" aria-hidden="true">
+						{#each row.guides as on, c}
+							{#if on}<span class="g g-trunk" style:--c={c}></span>{/if}
+						{/each}
+						{#if row.level > 1}
+							<span class="g g-elbow" style:--c={row.level - 2}></span>
+							{#if !row.isLastSibling}<span class="g g-tail" style:--c={row.level - 2}></span>{/if}
+						{/if}
+						{#if bridge}<span class="g g-bridge" style:--c={row.level - 1}></span>{/if}
+					</span>
+				{/if}
+				<!-- Pointer-only affordance; the keyboard toggles with ArrowRight/ArrowLeft. -->
+				<!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
+				<span
+					class="tree-chevron"
+					class:is-open={row.expanded}
+					aria-hidden="true"
+					onclick={row.hasChildren ? (e) => onChevronClick(e, row) : undefined}
+				>
+					{#if row.hasChildren}
+						<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.75">
+							<path stroke-linecap="round" stroke-linejoin="round" d="m6 4 4 4-4 4" />
+						</svg>
+					{/if}
+				</span>
+				{#if icon}
+					<span class="tree-icon" aria-hidden="true">{@render icon(row.node, ctx)}</span>
+				{:else if icons}
+					<span class="tree-icon" aria-hidden="true">{@render defaultIcon(row)}</span>
+				{/if}
+				<span class="tree-label" id="{domId(row.id)}-l">
+					{#if label}{@render label(row.node, ctx)}{:else}<bdi>{labelOf(row.node, row.id)}</bdi>{/if}
+				</span>
+				{#if trailing}
+					<span class="tree-trailing">{@render trailing(row.node, ctx)}</span>
+				{/if}
+			</li>
+		{/each}
+		{#if win && win.paddingBottom > 0}
+			<li role="none" class="tree-spacer" style:height="{win.paddingBottom}px"></li>
+		{/if}
+	{/if}
+</ul>
+
+<style>
+	.jatui-tree {
+		--tree-pad: 0.375rem;
+		--tree-indent: 1.25rem;
+		--tree-chevron: 1rem;
+		--tree-row-h: 2rem;
+		--tree-guide: color-mix(in oklch, var(--color-base-content) 22%, var(--color-base-100));
+		list-style: none;
+		margin: 0;
+		padding: var(--jatui-space-xs, 2px);
+		font-size: 0.875rem;
+		color: var(--color-base-content);
+	}
+	.jatui-tree-sm {
+		--tree-indent: 1rem;
+		--tree-row-h: 1.75rem;
+		font-size: 0.8125rem;
+	}
+	.jatui-tree.has-max {
+		overflow: auto;
+		overscroll-behavior: contain;
+	}
+
+	.tree-row {
+		position: relative;
+		display: flex;
+		align-items: center;
+		gap: var(--jatui-space-md, 6px);
+		min-height: var(--tree-row-h);
+		padding-inline-start: calc(var(--tree-pad) + (var(--level) - 1) * var(--tree-indent));
+		padding-inline-end: var(--jatui-space-base, 8px);
+		border-radius: var(--jatui-radius-field, 0.25rem);
+		cursor: default;
+		outline: none;
+		user-select: none;
+	}
+	.tree-row:hover {
+		background: color-mix(in oklch, var(--color-base-content) 6%, transparent);
+	}
+	.tree-row.is-selected {
+		background: color-mix(in oklch, var(--color-primary) 14%, transparent);
+	}
+	.tree-row:focus-visible {
+		outline: 2px solid var(--color-primary);
+		outline-offset: -2px;
+	}
+	.tree-row.is-disabled {
+		opacity: 0.5;
+	}
+
+	.tree-chevron {
+		flex: none;
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		width: var(--tree-chevron);
+		height: var(--tree-chevron);
+		color: color-mix(in oklch, var(--color-base-content) 55%, transparent);
+		border-radius: var(--jatui-radius-selector, 0.375rem);
+	}
+	.tree-chevron svg {
+		width: 0.875rem;
+		height: 0.875rem;
+		transition: transform var(--motion-fast, 150ms) var(--motion-standard, ease);
+	}
+	.tree-chevron.is-open svg {
+		transform: rotate(90deg);
+	}
+	.tree-chevron:not(:empty):hover {
+		color: var(--color-base-content);
+		background: color-mix(in oklch, var(--color-base-content) 8%, transparent);
+	}
+
+	.tree-icon {
+		flex: none;
+		display: inline-flex;
+		width: 1rem;
+		height: 1rem;
+		color: color-mix(in oklch, var(--color-base-content) 60%, transparent);
+	}
+	.tree-icon :global(svg) {
+		width: 100%;
+		height: 100%;
+	}
+	.tree-row.is-selected .tree-icon {
+		color: var(--color-primary);
+	}
+	.tree-label {
+		flex: 1 1 auto;
+		min-width: 0;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+	.tree-trailing {
+		flex: none;
+		display: inline-flex;
+		align-items: center;
+		gap: var(--jatui-space-sm, 4px);
+		color: color-mix(in oklch, var(--color-base-content) 55%, transparent);
+		font-size: 0.75rem;
+	}
+
+	/* Guides — purely presentational, never in the a11y tree. */
+	.tree-guides {
+		position: absolute;
+		inset: 0;
+		pointer-events: none;
+	}
+	.g {
+		position: absolute;
+		inset-inline-start: calc(var(--tree-pad) + var(--c) * var(--tree-indent) + var(--tree-chevron) / 2);
+		border-color: var(--tree-guide);
+		border-style: solid;
+		border-width: 0;
+	}
+	.g-trunk {
+		top: 0;
+		bottom: 0;
+		border-inline-start-width: 1px;
+	}
+	.g-elbow {
+		top: 0;
+		height: 50%;
+		width: calc(var(--tree-indent) - var(--tree-chevron) / 2 - 3px);
+		border-inline-start-width: 1px;
+		border-bottom-width: 1px;
+		border-end-start-radius: var(--jatui-radius-selector, 0.375rem);
+	}
+	.is-leaf .g-elbow {
+		width: calc(var(--tree-indent) + var(--tree-chevron) / 2 - 3px);
+	}
+	.g-tail {
+		top: 50%;
+		bottom: 0;
+		border-inline-start-width: 1px;
+	}
+	.g-bridge {
+		top: calc(50% + var(--tree-chevron) / 2);
+		bottom: 0;
+		border-inline-start-width: 1px;
+	}
+
+	.tree-empty {
+		padding: var(--jatui-space-lg, 12px);
+		text-align: center;
+		color: color-mix(in oklch, var(--color-base-content) 55%, transparent);
+	}
+	.tree-spacer {
+		padding: 0;
+		margin: 0;
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.tree-chevron svg {
+			transition: none;
+		}
+	}
+</style>