@ruckc/truss-ui 1.2.0 → 1.4.0

package/dist/components/TooltipTip.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import Kbd from './Kbd.svelte';
+
+	/** The floating bubble behind Tooltip and Button's `shortcut`: positions itself beside `anchor`, flipping to stay on screen. */
+	let {
+		anchor,
+		id,
+		text,
+		content,
+		shortcut,
+		placement = 'top'
+	}: {
+		anchor: HTMLElement;
+		id: string;
+		text?: string;
+		content?: Snippet;
+		shortcut?: string;
+		placement?: 'top' | 'bottom' | 'left' | 'right';
+	} = $props();
+
+	let ready = $state(false);
+	let x = $state(0);
+	let y = $state(0);
+	let tip = $state<HTMLDivElement>();
+
+	$effect(() => {
+		if (!tip) return;
+		const r = anchor.getBoundingClientRect();
+		const t = tip.getBoundingClientRect();
+		let p = placement;
+		if (p === 'top' && r.top < t.height + 10) p = 'bottom';
+		else if (p === 'bottom' && r.bottom + t.height + 10 > innerHeight) p = 'top';
+		else if (p === 'left' && r.left < t.width + 10) p = 'right';
+		else if (p === 'right' && r.right + t.width + 10 > innerWidth) p = 'left';
+		const cx = r.left + r.width / 2 - t.width / 2, cy = r.top + r.height / 2 - t.height / 2;
+		const pos = { top: [cx, r.top - t.height - 6], bottom: [cx, r.bottom + 6], left: [r.left - t.width - 6, cy], right: [r.right + 6, cy] }[p];
+		x = Math.min(Math.max(4, pos[0]), innerWidth - t.width - 4);
+		y = Math.max(4, pos[1]);
+		ready = true;
+	});
+</script>
+
+<div class="tip" role="tooltip" {id} bind:this={tip} style:left="{x}px" style:top="{y}px" data-ready={ready}>
+	{#if text}<span class="txt">{text}</span>{/if}
+	{#if content}<span class="rich">{@render content()}</span>{/if}
+	{#if shortcut}<Kbd keys={shortcut} />{/if}
+</div>
+
+<style>
+	.tip {
+		position: fixed; z-index: 200; max-width: 260px; padding: 4px 8px; pointer-events: none; visibility: hidden;
+		display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px;
+		background: var(--tr-on-surface); color: var(--tr-surface); border-radius: var(--tr-radius-sm);
+		font: 500 var(--tr-text-sm) / 1.35 var(--tr-font-sans); box-shadow: var(--tr-elevation-2);
+	}
+	.tip[data-ready='true'] { visibility: visible; animation: fade var(--tr-dur-fast) var(--tr-ease); }
+	@keyframes fade { from { opacity: 0; } }
+</style>

package/dist/components/TooltipTip.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    anchor: HTMLElement;
+    id: string;
+    text?: string;
+    content?: Snippet;
+    shortcut?: string;
+    placement?: 'top' | 'bottom' | 'left' | 'right';
+};
+declare const TooltipTip: import("svelte").Component<$$ComponentProps, {}, "">;
+type TooltipTip = ReturnType<typeof TooltipTip>;
+export default TooltipTip;

package/dist/components/Tree.svelte

@@ -1,24 +1,45 @@
 <script lang="ts">
-	import { tick } from 'svelte';
+	import { tick, type Snippet } from 'svelte';
 	import { SvelteMap } from 'svelte/reactivity';
 	import Icon from '../icons/Icon.svelte';
 	import Checkbox from './Checkbox.svelte';
 	import Spinner from './Spinner.svelte';
-	import type { TreeNode } from '../types.js';
+	import Menu from './Menu.svelte';
+	import Popover from './Popover.svelte';
+	import type { TreeNode, MenuEntry } from '../types.js';
+
+	type DropPosition = 'before' | 'after' | 'inside';
 
 	let {
 		nodes,
 		expanded = $bindable([]),
 		selected = $bindable(),
+		multiple = false,
+		selectedIds = $bindable([]),
 		checkable = false,
 		checked = $bindable([]),
 		loadChildren,
 		label = 'Tree',
-		onselect
+		onselect,
+		onactivate,
+		nodeMenu,
+		nodeActions,
+		virtual = false,
+		height,
+		rowHeight,
+		overscan = 8,
+		draggable = false,
+		canDrop,
+		ondrop
 	}: {
 		nodes: TreeNode[];
 		expanded?: string[];
+		/** The single selected id, or with `multiple` the most recently picked ("lead") node. */
 		selected?: string;
+		/** Multi-select: click, Ctrl/Cmd+click toggles, Shift+click or Shift+Arrow selects a range, Ctrl+A selects all visible nodes. */
+		multiple?: boolean;
+		/** With `multiple`: the selected ids. */
+		selectedIds?: string[];
 		/** Tri-state checkboxes. `checked` holds leaf ids. */
 		checkable?: boolean;
 		checked?: string[];
@@ -26,15 +47,37 @@
 		loadChildren?: (node: TreeNode) => Promise<TreeNode[]>;
 		label?: string;
 		onselect?: (node: TreeNode) => void;
+		/** Enter or double-click on an enabled node ("open"). A double-click still toggles an expandable node as well. */
+		onactivate?: (node: TreeNode) => void;
+		/** Context menu for a node: right-click, the Menu key or Shift+F10. Return an empty list to keep the browser's menu. */
+		nodeMenu?: (node: TreeNode) => MenuEntry[];
+		/** Trailing actions, revealed on hover and when the row is focused (Tab moves from the row into them). */
+		nodeActions?: Snippet<[node: TreeNode]>;
+		/** Render only the rows in view (needs `height`; scrolls inside the tree). */
+		virtual?: boolean;
+		/** Height of the scrolling area (CSS length or px number). Also enables scrolling without `virtual`. */
+		height?: string | number;
+		/** Row height in px (default: the `--tr-tree-row-h` density token). */
+		rowHeight?: number;
+		/** Extra rows rendered above and below the visible window. */
+		overscan?: number;
+		/** Move nodes by pointer drag, or by keyboard: Ctrl+X to cut, then Ctrl+V (inside), Ctrl+Shift+V (after) or Ctrl+Alt+V (before) on the target. */
+		draggable?: boolean;
+		/** Veto a drop. A node is never offered as a target of itself or its descendants. */
+		canDrop?: (sources: TreeNode[], target: TreeNode, position: DropPosition) => boolean;
+		/** The tree does not rearrange `nodes`: update your data here. */
+		ondrop?: (sources: TreeNode[], target: TreeNode, position: DropPosition) => void;
 	} = $props();
 
 	const loaded = new SvelteMap<string, TreeNode[]>();
 	let loading = $state<string[]>([]);
 	let focusId = $state<string>();
 	let root: HTMLUListElement;
+	let scroller = $state<HTMLDivElement>();
 
 	const kids = (n: TreeNode) => n.children ?? loaded.get(n.id);
 	const expandable = (n: TreeNode) => !!kids(n)?.length || (!!n.hasChildren && !kids(n));
+	const openSet = $derived(new Set(expanded));
 
 	type Row = { node: TreeNode; depth: number; parent?: TreeNode; pos: number; size: number };
 	const rows = $derived.by(() => {
@@ -42,15 +85,48 @@
 		const walk = (list: TreeNode[], depth: number, parent?: TreeNode) =>
 			list.forEach((node, i) => {
 				out.push({ node, depth, parent, pos: i + 1, size: list.length });
-				if (expanded.includes(node.id) && kids(node)) walk(kids(node)!, depth + 1, node);
+				if (openSet.has(node.id) && kids(node)) walk(kids(node)!, depth + 1, node);
 			});
 		walk(nodes, 0);
 		return out;
 	});
-	const tabbable = $derived(rows.some((r) => r.node.id === focusId) ? focusId : rows[0]?.node.id);
+	const indexOf = $derived(new Map(rows.map((r, i) => [r.node.id, i])));
+
+	// ---------- windowing
+	let probe = $state<HTMLElement>();
+	let probeH = $state(28);
+	$effect(() => {
+		if (!probe) return;
+		const read = () => { const h = probe!.getBoundingClientRect().height; if (h > 0) probeH = h; };
+		read();
+		const ro = new ResizeObserver(read);
+		ro.observe(probe);
+		return () => ro.disconnect();
+	});
+	const rowH = $derived(rowHeight ?? probeH);
+	let viewH = $state(0);
+	let scrollTop = $state(0);
+	const start = $derived(virtual ? Math.max(0, Math.min(rows.length, Math.floor(scrollTop / rowH) - overscan)) : 0);
+	const end = $derived(virtual ? Math.min(rows.length, Math.ceil((scrollTop + (viewH || 320)) / rowH) + overscan) : rows.length);
+	const shown = $derived(rows.slice(start, end));
+	const tabbable = $derived.by(() => {
+		const i = focusId == null ? undefined : indexOf.get(focusId);
+		if (i !== undefined && i >= start && i < end) return focusId;
+		return rows[Math.min(start, rows.length - 1)]?.node.id;
+	});
+	const heightCss = $derived(height == null ? (virtual ? '20rem' : undefined) : typeof height === 'number' ? `${height}px` : height);
+
+	function reveal(i: number) {
+		if (!virtual || !scroller) return;
+		const top = i * rowH, bottom = top + rowH;
+		let next = scrollTop;
+		if (top < scrollTop) next = top;
+		else if (bottom > scrollTop + scroller.clientHeight) next = bottom - scroller.clientHeight;
+		if (next !== scrollTop) scroller.scrollTop = scrollTop = next;
+	}
 
 	async function expand(n: TreeNode) {
-		if (!expanded.includes(n.id)) expanded = [...expanded, n.id];
+		if (!openSet.has(n.id)) expanded = [...expanded, n.id];
 		if (loadChildren && n.hasChildren && !kids(n) && !loading.includes(n.id)) {
 			loading = [...loading, n.id];
 			try { loaded.set(n.id, await loadChildren(n)); }
@@ -59,7 +135,7 @@
 		}
 	}
 	const collapse = (n: TreeNode) => (expanded = expanded.filter((x) => x !== n.id));
-	const toggle = (n: TreeNode) => (expanded.includes(n.id) ? collapse(n) : expand(n));
+	const toggle = (n: TreeNode) => (openSet.has(n.id) ? collapse(n) : expand(n));
 
 	function leaves(n: TreeNode): string[] {
 		const k = kids(n);
@@ -77,71 +153,294 @@
 
 	async function focusRow(id: string) {
 		focusId = id;
+		const i = indexOf.get(id);
+		if (i !== undefined) reveal(i);
 		await tick();
 		root.querySelector<HTMLElement>(`[data-id="${CSS.escape(id)}"]`)?.focus();
 	}
-	function pick(n: TreeNode) {
+
+	// ---------- selection
+	const selSet = $derived(new Set(multiple ? (selectedIds.length || !selected ? selectedIds : [selected]) : selected ? [selected] : []));
+	let anchor: string | undefined;
+	type Mods = { shift?: boolean; mod?: boolean };
+	function rangeIds(a: string, b: string) {
+		const i = indexOf.get(a) ?? indexOf.get(b)!, j = indexOf.get(b)!;
+		return rows.slice(Math.min(i, j), Math.max(i, j) + 1).filter((r) => !r.node.disabled).map((r) => r.node.id);
+	}
+	function pick(n: TreeNode, m: Mods = {}) {
 		if (n.disabled) return;
-		selected = n.id;
+		if (multiple) {
+			if (m.shift) selectedIds = rangeIds(anchor ?? selected ?? n.id, n.id);
+			else if (m.mod) {
+				const cur = [...selSet];
+				selectedIds = cur.includes(n.id) ? cur.filter((x) => x !== n.id) : [...cur, n.id];
+				anchor = n.id;
+			} else { selectedIds = [n.id]; anchor = n.id; }
+			selected = selectedIds.includes(n.id) ? n.id : selectedIds.at(-1);
+		} else selected = n.id;
 		onselect?.(n);
 	}
+	function selectAll() {
+		selectedIds = rows.filter((r) => !r.node.disabled).map((r) => r.node.id);
+	}
+
+	// ---------- activation
+	function activate(n: TreeNode) {
+		if (n.disabled) return;
+		// Enter on a node inside a multi-selection acts on that selection instead of collapsing it
+		if (!(multiple && selSet.has(n.id))) pick(n);
+		onactivate?.(n);
+	}
+
+	// ---------- node menu
+	let ctx = $state<{ x: number; y: number; items: MenuEntry[]; opener: HTMLElement } | null>(null);
+	let ctxAnchor = $state<HTMLElement>();
+	function openMenu(n: TreeNode, x: number, y: number, opener: HTMLElement) {
+		const items = nodeMenu?.(n) ?? [];
+		if (!items.length) return false; // nothing to offer: keep the browser's own menu
+		if (!selSet.has(n.id)) pick(n);
+		ctx = { x, y, items, opener };
+		return true;
+	}
+	function closeMenu(refocus: boolean) {
+		const o = ctx?.opener;
+		ctx = null;
+		if (refocus) o?.focus();
+	}
+	function onContext(e: MouseEvent, n: TreeNode) {
+		if (!nodeMenu || (e.target as Element).closest('.acts')) return;
+		if (openMenu(n, e.clientX, e.clientY, e.currentTarget as HTMLElement)) e.preventDefault();
+	}
+
+	// ---------- move: pointer drag + keyboard cut / paste
+	let live = $state('');
+	let flip = false;
+	function announce(msg: string) { live = msg + ((flip = !flip) ? '' : ' '); }
+	const nameOf = (list: TreeNode[]) => (list.length === 1 ? `"${list[0].label}"` : `${list.length} items`);
+	const rowOf = (id: string) => rows[indexOf.get(id)!];
+	function inside(id: string, ancestor: string) {
+		for (let r: Row | undefined = rowOf(id); r; r = r.parent ? rowOf(r.parent.id) : undefined) if (r.node.id === ancestor) return true;
+		return false;
+	}
+	/** Dragging a selection moves the whole selection; dragging an unselected node moves just it. */
+	function sourcesFor(id: string) {
+		const ids = multiple && selSet.has(id) ? rows.filter((r) => selSet.has(r.node.id) && !r.node.disabled).map((r) => r.node.id) : [id];
+		return ids.filter((x) => !ids.some((o) => o !== x && inside(x, o))); // a child travels with its dragged parent
+	}
+	function allowed(ids: string[], targetId: string, pos: DropPosition) {
+		if (!ids.length || !rowOf(targetId) || ids.some((s) => inside(targetId, s))) return false;
+		const t = rowOf(targetId).node;
+		if (t.disabled) return false;
+		return canDrop ? canDrop(ids.map((s) => rowOf(s).node), t, pos) !== false : true;
+	}
+	function drop(ids: string[], targetId: string, pos: DropPosition) {
+		const src = ids.map((s) => rowOf(s).node), t = rowOf(targetId).node;
+		ondrop?.(src, t, pos);
+		announce(`Moved ${nameOf(src)} ${pos === 'inside' ? 'into' : pos} "${t.label}"`);
+	}
+
+	let cut = $state<string[]>([]);
+	let drag = $state<{ ids: string[]; x: number; y: number; over?: { id: string; pos: DropPosition } } | null>(null);
+	let pending: { id: string; x: number; y: number } | null = null;
+	let suppressClick = false;
+
+	function pointerDown(e: PointerEvent, n: TreeNode) {
+		if (!draggable || e.button !== 0 || n.disabled || (e.target as Element).closest('.acts, .tw, .ck')) return;
+		pending = { id: n.id, x: e.clientX, y: e.clientY };
+		window.addEventListener('pointermove', pointerMove);
+		window.addEventListener('pointerup', pointerUp);
+		window.addEventListener('pointercancel', endDrag);
+		window.addEventListener('keydown', dragKey, true);
+	}
+	function pointerMove(e: PointerEvent) {
+		if (!pending) return;
+		if (!drag) {
+			if (Math.hypot(e.clientX - pending.x, e.clientY - pending.y) < 5) return;
+			drag = { ids: sourcesFor(pending.id), x: e.clientX, y: e.clientY };
+		}
+		let over: { id: string; pos: DropPosition } | undefined;
+		const li = document.elementFromPoint(e.clientX, e.clientY)?.closest<HTMLElement>('li[role="treeitem"]');
+		if (li && root.contains(li) && li.dataset.id) {
+			const r = li.getBoundingClientRect(), f = (e.clientY - r.top) / r.height;
+			const pos: DropPosition = f < 0.25 ? 'before' : f > 0.75 ? 'after' : 'inside';
+			for (const p of [pos, f < 0.5 ? 'before' : 'after'] as DropPosition[]) // fall back to the nearest edge
+				if (allowed(drag.ids, li.dataset.id, p)) { over = { id: li.dataset.id, pos: p }; break; }
+		}
+		drag = { ...drag, x: e.clientX, y: e.clientY, over };
+		if (scroller) { // edge auto-scroll
+			const r = scroller.getBoundingClientRect();
+			if (e.clientY < r.top + 24) scroller.scrollTop -= 12;
+			else if (e.clientY > r.bottom - 24) scroller.scrollTop += 12;
+		}
+	}
+	function swallowClick() { suppressClick = true; setTimeout(() => (suppressClick = false)); }
+	function pointerUp() {
+		const d = drag;
+		if (d) swallowClick();
+		endDrag();
+		if (d?.over) drop(d.ids, d.over.id, d.over.pos);
+	}
+	function dragKey(e: KeyboardEvent) {
+		if (e.key === 'Escape' && drag) { e.preventDefault(); e.stopPropagation(); swallowClick(); endDrag(); announce('Move cancelled'); }
+	}
+	function endDrag() {
+		pending = null;
+		drag = null;
+		window.removeEventListener('pointermove', pointerMove);
+		window.removeEventListener('pointerup', pointerUp);
+		window.removeEventListener('pointercancel', endDrag);
+		window.removeEventListener('keydown', dragKey, true);
+	}
+	$effect(() => endDrag);
+
+	function pasteOn(n: TreeNode, pos: DropPosition) {
+		if (!cut.length) return;
+		const ids = cut.filter((s) => rowOf(s));
+		if (!allowed(ids, n.id, pos)) { announce(`Cannot move ${nameOf(ids.map((s) => rowOf(s).node))} here`); return; }
+		cut = [];
+		drop(ids, n.id, pos);
+	}
+
 	function onKey(e: KeyboardEvent, i: number) {
 		const r = rows[i], n = r.node;
 		if (e.target !== e.currentTarget) return;
-		if (e.key === 'ArrowDown') rows[i + 1] && focusRow(rows[i + 1].node.id);
-		else if (e.key === 'ArrowUp') rows[i - 1] && focusRow(rows[i - 1].node.id);
-		else if (e.key === 'Home') focusRow(rows[0].node.id);
-		else if (e.key === 'End') focusRow(rows.at(-1)!.node.id);
+		const mod = e.ctrlKey || e.metaKey;
+		const go = (j: number) => {
+			const t = rows[Math.max(0, Math.min(rows.length - 1, j))];
+			if (!t) return;
+			focusRow(t.node.id);
+			if (multiple && e.shiftKey && !t.node.disabled) {
+				anchor ??= n.id;
+				selectedIds = rangeIds(anchor, t.node.id);
+				selected = t.node.id;
+				onselect?.(t.node);
+			}
+		};
+		const page = Math.max(1, Math.floor((viewH || 280) / rowH) - 1);
+		if (e.key === 'ContextMenu' || (e.shiftKey && e.key === 'F10')) {
+			if (!nodeMenu) return;
+			const b = (e.currentTarget as HTMLElement).getBoundingClientRect();
+			if (!openMenu(n, b.left + 24, b.top + b.height / 2, e.currentTarget as HTMLElement)) return;
+		}
+		else if (draggable && mod && !e.shiftKey && !e.altKey && e.key.toLowerCase() === 'x') {
+			if (n.disabled) return;
+			cut = sourcesFor(n.id);
+			announce(`${nameOf(cut.map((s) => rowOf(s).node))} cut. Move to a node and press Control V to move inside it.`);
+		}
+		else if (draggable && mod && e.key.toLowerCase() === 'v' && cut.length) pasteOn(n, e.altKey ? 'before' : e.shiftKey ? 'after' : 'inside');
+		else if (draggable && e.key === 'Escape' && cut.length) { cut = []; announce('Cut cancelled'); }
+		else if (multiple && mod && !e.shiftKey && e.key.toLowerCase() === 'a') selectAll();
+		else if (e.key === 'ArrowDown') go(i + 1);
+		else if (e.key === 'ArrowUp') go(i - 1);
+		else if (e.key === 'PageDown') go(i + page);
+		else if (e.key === 'PageUp') go(i - page);
+		else if (e.key === 'Home') go(0);
+		else if (e.key === 'End') go(rows.length - 1);
 		else if (e.key === 'ArrowRight') {
-			if (expandable(n) && !expanded.includes(n.id)) expand(n);
-			else if (expanded.includes(n.id) && rows[i + 1]?.parent === n) focusRow(rows[i + 1].node.id);
+			if (expandable(n) && !openSet.has(n.id)) expand(n);
+			else if (openSet.has(n.id) && rows[i + 1]?.parent === n) focusRow(rows[i + 1].node.id);
 		} else if (e.key === 'ArrowLeft') {
-			if (expanded.includes(n.id)) collapse(n);
+			if (openSet.has(n.id)) collapse(n);
 			else if (r.parent) focusRow(r.parent.id);
-		} else if (e.key === 'Enter') pick(n);
-		else if (e.key === ' ') { checkable ? toggleCheck(n) : pick(n); }
+		} else if (e.key === 'Enter') activate(n);
+		else if (e.key === ' ') {
+			if (checkable) toggleCheck(n);
+			else if (multiple) pick(n, { mod: true });
+			else pick(n);
+		}
 		else return;
 		e.preventDefault();
 	}
 </script>
 
-<ul class="tree" role="tree" aria-label={label} aria-multiselectable={checkable || undefined} bind:this={root}>
-	{#each rows as r, i (r.node.id)}
-		{@const n = r.node}
-		<!-- svelte-ignore a11y_click_events_have_key_events -->
-		<li
-			role="treeitem" data-id={n.id} aria-level={r.depth + 1} aria-setsize={r.size} aria-posinset={r.pos}
-			aria-expanded={expandable(n) ? expanded.includes(n.id) : undefined} aria-selected={selected === n.id}
-			aria-disabled={n.disabled} tabindex={n.id === tabbable ? 0 : -1} data-selected={selected === n.id}
-			style:padding-inline-start="{r.depth * 18 + 4}px"
-			onkeydown={(e) => onKey(e, i)} onfocus={() => (focusId = n.id)} onclick={() => { focusId = n.id; pick(n); }} ondblclick={() => expandable(n) && toggle(n)}
+<div class="wrap" style:--tr-tree-row-h={rowHeight != null ? `${rowHeight}px` : undefined}>
+	<span class="probe" bind:this={probe} aria-hidden="true"></span>
+	<div
+		class="scroll" data-scroll={heightCss ? '' : undefined} style:height={heightCss} bind:this={scroller} bind:clientHeight={viewH}
+		onscroll={(e) => { if (virtual) scrollTop = e.currentTarget.scrollTop; }}
+	>
+		<ul
+			class="tree" role="tree" aria-label={label} aria-multiselectable={multiple || checkable || undefined} bind:this={root}
+			data-virtual={virtual || undefined} data-dragging={drag ? '' : undefined}
+			style:padding-block-start={virtual ? `${start * rowH}px` : undefined}
+			style:padding-block-end={virtual ? `${(rows.length - end) * rowH}px` : undefined}
 		>
-			{#if expandable(n)}
-				<button type="button" class="tw" tabindex="-1" aria-hidden="true" onclick={(e) => { e.stopPropagation(); toggle(n); }}>
-					{#if loading.includes(n.id)}<Spinner size={14} />{:else}<Icon name={expanded.includes(n.id) ? 'chevron-down' : 'chevron-right'} />{/if}
-				</button>
-			{:else}<span class="tw"></span>{/if}
-			{#if checkable}
-				<span class="ck" onclick={(e) => e.stopPropagation()} role="presentation">
-					<Checkbox tabindex={-1} aria-label="Select {n.label}" disabled={n.disabled} checked={checkState(n) === 'all'} indeterminate={checkState(n) === 'some'} onchange={() => toggleCheck(n)} />
-				</span>
-			{/if}
-			{#if n.icon}<Icon name={n.icon} />{:else if expandable(n) || kids(n)}<Icon name="folder" />{:else}<Icon name="file" />{/if}
-			<span class="lbl">{n.label}</span>
-		</li>
-	{/each}
-</ul>
+			{#each shown as r, k (r.node.id)}
+				{@const n = r.node}
+				{@const i = start + k}
+				{@const sel = selSet.has(n.id)}
+				<!-- svelte-ignore a11y_click_events_have_key_events -->
+				<li
+					role="treeitem" data-id={n.id} aria-level={r.depth + 1} aria-setsize={r.size} aria-posinset={r.pos}
+					aria-expanded={expandable(n) ? openSet.has(n.id) : undefined} aria-selected={sel}
+					aria-disabled={n.disabled} tabindex={n.id === tabbable ? 0 : -1} data-selected={sel}
+					data-cut={cut.includes(n.id) || (drag?.ids.includes(n.id) ?? false) || undefined}
+					data-drop={drag?.over?.id === n.id ? drag.over.pos : undefined}
+					style:padding-inline-start="{r.depth * 18 + 4}px"
+					onkeydown={(e) => onKey(e, i)} onfocus={() => (focusId = n.id)}
+					onclick={(e) => { if (suppressClick) return; focusId = n.id; pick(n, { shift: e.shiftKey, mod: e.ctrlKey || e.metaKey }); }}
+					ondblclick={() => { if (expandable(n)) toggle(n); activate(n); }}
+					oncontextmenu={(e) => onContext(e, n)}
+					onpointerdown={(e) => pointerDown(e, n)}
+				>
+					{#if expandable(n)}
+						<button type="button" class="tw" tabindex="-1" aria-hidden="true" onclick={(e) => { e.stopPropagation(); toggle(n); }}>
+							{#if loading.includes(n.id)}<Spinner size={14} />{:else}<Icon name={openSet.has(n.id) ? 'chevron-down' : 'chevron-right'} />{/if}
+						</button>
+					{:else}<span class="tw"></span>{/if}
+					{#if checkable}
+						<span class="ck" onclick={(e) => e.stopPropagation()} role="presentation">
+							<Checkbox tabindex={-1} aria-label="Select {n.label}" disabled={n.disabled} checked={checkState(n) === 'all'} indeterminate={checkState(n) === 'some'} onchange={() => toggleCheck(n)} />
+						</span>
+					{/if}
+					{#if n.icon}<Icon name={n.icon} />{:else if expandable(n) || kids(n)}<Icon name="folder" />{:else}<Icon name="file" />{/if}
+					<span class="lbl">{n.label}</span>
+					{#if nodeActions && !n.disabled}
+						<!-- svelte-ignore a11y_no_static_element_interactions -->
+						<span class="acts" onclick={(e) => e.stopPropagation()} ondblclick={(e) => e.stopPropagation()} onpointerdown={(e) => e.stopPropagation()}>{@render nodeActions(n)}</span>
+					{/if}
+				</li>
+			{/each}
+		</ul>
+	</div>
+	<div class="sr" role="status" aria-live="polite">{live}</div>
+	{#if drag}<div class="ghost" aria-hidden="true" style:left="{drag.x + 12}px" style:top="{drag.y + 12}px">{drag.ids.length === 1 ? rowOf(drag.ids[0])?.node.label : `${drag.ids.length} items`}</div>{/if}
+</div>
+
+{#if ctx}
+	<div class="ctxpt" bind:this={ctxAnchor} style:left="{ctx.x}px" style:top="{ctx.y}px" aria-hidden="true"></div>
+	{#if ctxAnchor}
+		<Popover open={true} fixed anchor={ctxAnchor} onclose={closeMenu}>
+			<Menu items={ctx.items} label="Node actions" autofocus onclose={() => closeMenu(true)} />
+		</Popover>
+	{/if}
+{/if}
 
 <style>
+	.wrap { position: relative; }
+	.probe { position: absolute; width: 0; height: var(--tr-tree-row-h); visibility: hidden; pointer-events: none; }
+	.scroll[data-scroll] { overflow: auto; }
 	.tree { margin: 0; padding: 4px; list-style: none; }
-	li { display: flex; align-items: center; gap: 6px; height: 28px; padding-inline-end: 8px; border-radius: var(--tr-radius-sm); color: var(--tr-on-surface); cursor: default; outline: none; }
+	.tree[data-virtual] { padding-block: 0; }
+	li { position: relative; display: flex; align-items: center; gap: 6px; height: var(--tr-tree-row-h); box-sizing: border-box; padding-inline-end: 8px; border-radius: var(--tr-radius-sm); color: var(--tr-on-surface); cursor: default; outline: none; user-select: none; }
 	li:hover { background: var(--tr-surface-container-high); }
 	li[data-selected='true'] { background: color-mix(in srgb, var(--tr-primary-container) 60%, transparent); box-shadow: inset 3px 0 0 var(--tr-primary); }
 	li:focus-visible { box-shadow: inset 0 0 0 2px var(--tr-primary); }
 	li[aria-disabled='true'] { opacity: 0.45; }
+	li[data-cut] { opacity: 0.5; }
+	li[data-drop='inside'] { outline: 2px solid var(--tr-primary); outline-offset: -2px; background: color-mix(in srgb, var(--tr-primary-container) 40%, transparent); }
+	li[data-drop='before']::after, li[data-drop='after']::after { content: ''; position: absolute; inset-inline: 0; height: 2px; background: var(--tr-primary); pointer-events: none; }
+	li[data-drop='before']::after { top: -1px; }
+	li[data-drop='after']::after { bottom: -1px; }
 	.tw { display: inline-grid; place-items: center; flex: none; width: 20px; height: 20px; padding: 0; border: 0; border-radius: var(--tr-radius-sm); background: none; color: var(--tr-on-surface-variant); cursor: pointer; }
 	button.tw:hover { background: var(--tr-surface-container-highest); }
 	.ck { display: inline-flex; }
 	li > :global(svg) { color: var(--tr-on-surface-variant); }
 	.lbl { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+	/* hidden actions are also unfocusable, so Tab only enters the actions of the focused / hovered row */
+	.acts { display: inline-flex; flex: none; align-items: center; gap: 2px; visibility: hidden; }
+	li:hover .acts, li:focus-within .acts { visibility: visible; }
+	.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
+	.ghost { position: fixed; z-index: 400; pointer-events: none; padding: 2px 10px; border-radius: var(--tr-radius-sm); background: var(--tr-surface-container-highest); color: var(--tr-on-surface); box-shadow: 0 2px 8px rgb(0 0 0 / 0.3); font-size: 0.85em; white-space: nowrap; }
+	.ctxpt { position: fixed; width: 0; height: 0; pointer-events: none; }
 </style>

package/dist/components/Tree.svelte.d.ts

@@ -1,8 +1,15 @@
-import type { TreeNode } from '../types.js';
+import { type Snippet } from 'svelte';
+import type { TreeNode, MenuEntry } from '../types.js';
+type DropPosition = 'before' | 'after' | 'inside';
 type $$ComponentProps = {
     nodes: TreeNode[];
     expanded?: string[];
+    /** The single selected id, or with `multiple` the most recently picked ("lead") node. */
     selected?: string;
+    /** Multi-select: click, Ctrl/Cmd+click toggles, Shift+click or Shift+Arrow selects a range, Ctrl+A selects all visible nodes. */
+    multiple?: boolean;
+    /** With `multiple`: the selected ids. */
+    selectedIds?: string[];
     /** Tri-state checkboxes. `checked` holds leaf ids. */
     checkable?: boolean;
     checked?: string[];
@@ -10,7 +17,27 @@ type $$ComponentProps = {
     loadChildren?: (node: TreeNode) => Promise<TreeNode[]>;
     label?: string;
     onselect?: (node: TreeNode) => void;
+    /** Enter or double-click on an enabled node ("open"). A double-click still toggles an expandable node as well. */
+    onactivate?: (node: TreeNode) => void;
+    /** Context menu for a node: right-click, the Menu key or Shift+F10. Return an empty list to keep the browser's menu. */
+    nodeMenu?: (node: TreeNode) => MenuEntry[];
+    /** Trailing actions, revealed on hover and when the row is focused (Tab moves from the row into them). */
+    nodeActions?: Snippet<[node: TreeNode]>;
+    /** Render only the rows in view (needs `height`; scrolls inside the tree). */
+    virtual?: boolean;
+    /** Height of the scrolling area (CSS length or px number). Also enables scrolling without `virtual`. */
+    height?: string | number;
+    /** Row height in px (default: the `--tr-tree-row-h` density token). */
+    rowHeight?: number;
+    /** Extra rows rendered above and below the visible window. */
+    overscan?: number;
+    /** Move nodes by pointer drag, or by keyboard: Ctrl+X to cut, then Ctrl+V (inside), Ctrl+Shift+V (after) or Ctrl+Alt+V (before) on the target. */
+    draggable?: boolean;
+    /** Veto a drop. A node is never offered as a target of itself or its descendants. */
+    canDrop?: (sources: TreeNode[], target: TreeNode, position: DropPosition) => boolean;
+    /** The tree does not rearrange `nodes`: update your data here. */
+    ondrop?: (sources: TreeNode[], target: TreeNode, position: DropPosition) => void;
 };
-declare const Tree: import("svelte").Component<$$ComponentProps, {}, "checked" | "expanded" | "selected">;
+declare const Tree: import("svelte").Component<$$ComponentProps, {}, "checked" | "expanded" | "selected" | "selectedIds">;
 type Tree = ReturnType<typeof Tree>;
 export default Tree;

package/dist/grid-layout.d.ts

@@ -0,0 +1,42 @@
+/**
+ * Pure layout engine behind GridLayout: integer grid cells, collision resolution, vertical compaction,
+ * size clamping and responsive column mapping. Nothing here touches the DOM and no function mutates its input.
+ */
+export type GridItem = {
+    id: string;
+    /** Column of the left edge (0-based). */
+    x: number;
+    /** Row of the top edge (0-based). */
+    y: number;
+    /** Width in columns. */
+    w: number;
+    /** Height in rows. */
+    h: number;
+    minW?: number;
+    minH?: number;
+    maxW?: number;
+    maxH?: number;
+    /** Never moved or resized, and other tiles flow around it. */
+    static?: boolean;
+};
+/** Whether two items overlap (touching edges do not count). */
+export declare function collides(a: GridItem, b: GridItem): boolean;
+/** Number of rows the layout occupies. */
+export declare function bottom(items: GridItem[]): number;
+/** Clamp one item into `cols` columns: size within its min/max (and the grid), position inside the grid. */
+export declare function clampItem(item: GridItem, cols: number): GridItem;
+/** Clamp every item and compact the layout vertically. */
+export declare function compact(items: GridItem[], cols: number): GridItem[];
+/** Fit a layout to a (possibly narrower) column count: clamp, resolve collisions, compact. */
+export declare const fitToCols: typeof compact;
+/** Move an item to (x, y): clamped to the grid, colliding items are pushed down, the rest compact around it. */
+export declare function moveItem(items: GridItem[], id: string, x: number, y: number, cols: number): GridItem[];
+/** Resize an item to w by h cells, within its min/max and the grid edge; colliding items are pushed down. */
+export declare function resizeItem(items: GridItem[], id: string, w: number, h: number, cols: number): GridItem[];
+/**
+ * Columns for a container width. `breakpoints` maps a minimum width in px to a column count; the largest
+ * key not above `width` wins, and a width below every key uses the smallest key. Without breakpoints it is `fallback`.
+ */
+export declare function colsFor(width: number, breakpoints: Record<number, number> | undefined, fallback: number): number;
+/** Whether two layouts place every item identically. */
+export declare function sameLayout(a: GridItem[], b: GridItem[]): boolean;