@ruckc/truss-ui 1.2.0 → 1.4.0

package/dist/components/DataTable.svelte

@@ -4,10 +4,13 @@
 	import Icon from '../icons/Icon.svelte';
 	import Button from './Button.svelte';
 	import Checkbox from './Checkbox.svelte';
+	import Menu from './Menu.svelte';
 	import Popover from './Popover.svelte';
 	import Spinner from './Spinner.svelte';
 
-	import type { Column, ColumnFilters, SortState } from '../types.js';
+	import { toasts } from '../toast.svelte.js';
+	import { displayValue, titleValue, serializeRows, type ExportFormat, type ExportSerializer } from '../table-export.js';
+	import type { Column, ColumnFilters, MenuEntry, SortState } from '../types.js';
 
 	let {
 		columns,
@@ -27,12 +30,24 @@
 		pageSize = 10,
 		// virtual scrolling + infinite loading
 		virtual = false,
-		rowHeight = 32,
+		rowHeight,
 		overscan = 6,
 		hasMore = false,
 		loading = false,
 		loadThreshold = 8,
 		onloadmore,
+		// streaming / refresh state
+		stale = false,
+		status,
+		oncancel,
+		// rows: activation, focus, context menu
+		onactivate,
+		onfocusrow,
+		rowMenu,
+		// formatting + export
+		locale,
+		headerExtra,
+		exporters,
 		// column filtering / sorting
 		filterable = false,
 		filters = $bindable({}),
@@ -65,7 +80,7 @@
 
 		/** Render only the rows in view (fixed `rowHeight`). Needs a bounded `maxHeight`. Use with `pagination={false}`. */
 		virtual?: boolean;
-		/** px; every row is exactly this tall when `virtual`. */
+		/** px; every row is exactly this tall when `virtual`. Defaults to the `--tr-row-h` density token (32px). */
 		rowHeight?: number;
 		/** Extra rows rendered above/below the viewport. */
 		overscan?: number;
@@ -77,6 +92,24 @@
 		loadThreshold?: number;
 		/** Called near the end of the list. Append to `rows` (or flip `hasMore` off); it is not called again until `rows.length` changes. */
 		onloadmore?: () => void | Promise<void>;
+		/** The rows are out of date while a refresh loads: dims them but keeps them visible and interactive, and marks the table `aria-busy`. */
+		stale?: boolean;
+		/** Status text in the bar (paged or continuous), e.g. "1,240 rows · streaming…". Replaces the default row count. */
+		status?: Snippet<[info: { count: number; hasMore: boolean; loading: boolean }]>;
+		/** Shows a Cancel button in the loading row; call it to abort the in-flight fetch. */
+		oncancel?: () => void;
+		/** Enter or double-click on a row (Space only selects). */
+		onactivate?: (row: T) => void;
+		/** A row received focus (mouse or keyboard); not called for focus inside a row's inner controls. */
+		onfocusrow?: (row: T) => void;
+		/** Context menu for a row: right-click, the Menu key or Shift+F10. Return an empty list to keep the browser's menu. */
+		rowMenu?: (row: T) => MenuEntry[];
+		/** BCP 47 locale for default number and date formatting (default: the runtime locale). */
+		locale?: string;
+		/** Rendered under each column's label, e.g. a type glyph, null % or a sparkline. */
+		headerExtra?: Snippet<[column: Column<T>]>;
+		/** Extra entries in the toolbar's Copy / Export menu, e.g. SQL `VALUES`. */
+		exporters?: { label: string; serialize: ExportSerializer<T> }[];
 
 		/** Show a filter row; columns opt in with `filter`. */
 		/**
@@ -103,6 +136,7 @@
 	const cols = $derived(columns.filter((c) => !hidden.includes(c.key)));
 	const total = $derived(cols.reduce((a, c) => a + w(c), selectable ? 40 : 0));
 	const toggleCol = (key: string) => (hidden = hidden.includes(key) ? hidden.filter((k) => k !== key) : [...hidden, key]);
+	const alignOf = (c: Column<T>) => c.align ?? (c.type === 'number' || c.type === 'date' || c.type === 'datetime' ? 'end' : 'start');
 	const ncols = $derived(cols.length + (selectable ? 1 : 0));
 	const rowFilters = $derived(filterable === true || filterable === 'row' || filterable === 'both');
 	const menuFilters = $derived(filterable === 'menu' || filterable === 'both');
@@ -258,16 +292,29 @@
 	let wrap = $state<HTMLDivElement>();
 	let viewH = $state(0);
 	let headH = $state(28);
+	let headRowH = $state(28);
 	let scrollTop = $state(0);
-	const start = $derived(virtual ? Math.max(0, Math.floor(scrollTop / rowHeight) - overscan) : 0);
-	const end = $derived(virtual ? Math.min(list.length, Math.ceil((scrollTop + viewH) / rowHeight) + overscan) : list.length);
+	// row height: explicit `rowHeight`, else whatever the --tr-row-h density token resolves to (measured via a hidden probe)
+	let probe = $state<HTMLElement>();
+	let probeH = $state(32);
+	$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);
+	const start = $derived(virtual ? Math.max(0, Math.floor(scrollTop / rowH) - overscan) : 0);
+	const end = $derived(virtual ? Math.min(list.length, Math.ceil((scrollTop + viewH) / rowH) + overscan) : list.length);
 	const shown = $derived(virtual ? list.slice(start, end) : list);
 
 	// ---------- infinite loading
 	let calledAt = -1;
 	function maybeLoad(el: HTMLElement) {
 		if (!onloadmore || !hasMore || loading || pagination) return;
-		if (el.scrollHeight - el.scrollTop - el.clientHeight > loadThreshold * rowHeight) return;
+		if (el.scrollHeight - el.scrollTop - el.clientHeight > loadThreshold * rowH) return;
 		if (calledAt === rows.length) return;
 		calledAt = rows.length;
 		onloadmore();
@@ -325,7 +372,7 @@
 	async function focusIndex(i: number) {
 		if (i < 0 || i >= list.length || !wrap) return;
 		if (virtual && (i < start + 1 || i >= end - 1)) {
-			scrollTop = wrap.scrollTop = Math.max(0, i * rowHeight - viewH / 2 + headH);
+			scrollTop = wrap.scrollTop = Math.max(0, i * rowH - viewH / 2 + headH);
 			await tick();
 		}
 		wrap.querySelector<HTMLElement>(`tr[data-index="${i}"]`)?.focus();
@@ -333,8 +380,19 @@
 	function rowKeydown(e: KeyboardEvent, f: Flat, index: number) {
 		if (e.target !== e.currentTarget) return; // ignore keys from inner controls (checkbox, twisty)
 		const id = rowKey(f.row);
-		const page_ = Math.max(1, Math.floor((viewH - headH) / rowHeight) - 1);
-		if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); selected = id; }
+		const page_ = Math.max(1, Math.floor((viewH - headH) / rowH) - 1);
+		if (e.key === 'ContextMenu' || (e.shiftKey && e.key === 'F10')) {
+			if (!rowMenu) return;
+			const r = (e.currentTarget as HTMLElement).getBoundingClientRect();
+			if (openRowMenu(f.row, r.left + 24, r.top + r.height / 2, e.currentTarget as HTMLElement)) e.preventDefault();
+		}
+		else if ((e.ctrlKey || e.metaKey) && !e.shiftKey && !e.altKey && e.key.toLowerCase() === 'c') {
+			if (getSelection()?.toString()) return; // let the browser copy highlighted text
+			e.preventDefault();
+			copyRows('tsv', { focus: f.row, header: false });
+		}
+		else if (e.key === 'Enter') { e.preventDefault(); selected = id; onactivate?.(f.row); }
+		else if (e.key === ' ') { e.preventDefault(); selected = id; }
 		else if (f.expandable && e.key === 'ArrowRight' && !expanded.has(id)) toggleExpand(id);
 		else if (f.expandable && e.key === 'ArrowLeft' && expanded.has(id)) toggleExpand(id);
 		else if (e.key === 'ArrowDown') { e.preventDefault(); focusIndex(index + 1); }
@@ -345,7 +403,91 @@
 		else if (e.key === 'End') { e.preventDefault(); focusIndex(list.length - 1); }
 	}
 
-	const showBar = $derived(selectable || columnMenu || !!toolbar || activeCount > 0 || !pagination);
+	// ---------- row events: focus, double-click, context menu
+	const inControl = (e: Event) => !!(e.target as HTMLElement).closest('button, a, input, select, textarea, label');
+	function rowDblclick(e: MouseEvent, f: Flat) {
+		if (onactivate && !inControl(e)) onactivate(f.row);
+	}
+	function rowContext(e: MouseEvent, f: Flat) {
+		if (!rowMenu || inControl(e)) return;
+		if (openRowMenu(f.row, e.clientX, e.clientY, e.currentTarget as HTMLElement)) e.preventDefault();
+	}
+	let ctx = $state<{ row: T; x: number; y: number; items: MenuEntry[]; opener: HTMLElement } | null>(null);
+	let ctxAnchor = $state<HTMLElement>();
+	function openRowMenu(row: T, x: number, y: number, opener: HTMLElement) {
+		const items = rowMenu?.(row) ?? [];
+		if (!items.length) return false; // nothing to offer: keep the browser's own menu
+		headMenu = null; filterMenu = null;
+		ctx = { row, x, y, items, opener };
+		return true;
+	}
+	function closeRowMenu(refocus: boolean) {
+		const o = ctx?.opener;
+		ctx = null;
+		if (refocus) o?.focus();
+	}
+
+	// ---------- copy + export
+	/** Rows an export covers: the checked rows, else (for `focus` / the selected row) that row, else every row in the current filter and sort. */
+	function rowsFor(scope: 'auto' | 'all', focus?: T): T[] {
+		if (scope === 'all') return flat.map((f) => f.row);
+		if (checked.length) {
+			const ids = new Set(checked);
+			return flat.filter((f) => ids.has(rowKey(f.row))).map((f) => f.row);
+		}
+		const one = focus ?? (selected != null ? flat.find((f) => rowKey(f.row) === selected)?.row : undefined);
+		return one ? [one] : flat.map((f) => f.row);
+	}
+	/**
+	 * Serialize rows to text without touching the clipboard. `scope: 'auto'` (default) uses the checked rows, else the
+	 * selected row, else every row in the current filter and sort order; `'all'` always uses every row.
+	 * Reach it with `bind:this`. Only visible columns are included; collapsed tree children are not.
+	 */
+	export function exportRows(format: ExportFormat | ExportSerializer<T>, opts: { scope?: 'auto' | 'all'; header?: boolean } = {}): string {
+		return serializeRows(rowsFor(opts.scope ?? 'auto'), cols, format, { header: opts.header, locale });
+	}
+	async function writeClip(text: string) {
+		try { await navigator.clipboard.writeText(text); return true; }
+		catch {
+			const back = document.activeElement as HTMLElement | null;
+			const ta = document.createElement('textarea');
+			ta.value = text; ta.setAttribute('readonly', ''); ta.style.cssText = 'position:fixed;top:0;left:0;opacity:0';
+			document.body.appendChild(ta); ta.select();
+			let ok = false;
+			try { ok = document.execCommand('copy'); } catch { /* unavailable */ }
+			ta.remove(); back?.focus();
+			return ok;
+		}
+	}
+	/** Copy rows to the clipboard (TSV by default) and confirm with a toast. Returns whether it worked. */
+	export async function copyRows(format: ExportFormat | ExportSerializer<T> = 'tsv', opts: { scope?: 'auto' | 'all'; header?: boolean; focus?: T } = {}): Promise<boolean> {
+		const picked = rowsFor(opts.scope ?? 'auto', opts.focus);
+		const ok = await writeClip(serializeRows(picked, cols, format, { header: opts.header, locale }));
+		const name = typeof format === 'string' ? format.toUpperCase() : 'custom format';
+		if (ok) toasts.success(`Copied ${fmt(picked.length)} ${picked.length === 1 ? 'row' : 'rows'} as ${name}`);
+		else toasts.danger('Could not copy to the clipboard');
+		return ok;
+	}
+	function download(format: 'csv' | 'json') {
+		const text = serializeRows(rowsFor('auto'), cols, format, { locale });
+		const url = URL.createObjectURL(new Blob([text], { type: format === 'csv' ? 'text/csv;charset=utf-8' : 'application/json' }));
+		const a = document.createElement('a');
+		a.href = url; a.download = `${caption.replace(/[^\w-]+/g, '-').replace(/^-|-$/g, '') || 'table'}.${format}`;
+		a.click();
+		setTimeout(() => URL.revokeObjectURL(url), 1000);
+	}
+	let copyOpen = $state(false);
+	const copyItems = $derived<MenuEntry[]>([
+		{ label: 'Copy as TSV', icon: 'copy', onselect: () => void copyRows('tsv') },
+		{ label: 'Copy as CSV', icon: 'copy', onselect: () => void copyRows('csv') },
+		{ label: 'Copy as JSON', icon: 'copy', onselect: () => void copyRows('json') },
+		...(exporters?.length ? [{ divider: true } as const, ...exporters.map((x) => ({ label: `Copy as ${x.label}`, icon: 'copy' as const, onselect: () => void copyRows(x.serialize) }))] : []),
+		{ divider: true },
+		{ label: 'Download CSV', icon: 'download', onselect: () => download('csv') },
+		{ label: 'Download JSON', icon: 'download', onselect: () => download('json') }
+	]);
+
+	const showBar = $derived(selectable || columnMenu || !!toolbar || !!status || activeCount > 0 || !pagination);
 	const fmt = (n: number) => n.toLocaleString();
 </script>
 
@@ -365,7 +507,8 @@
 	</span>
 {/snippet}
 
-<div class="tr-table" style:--rh="{rowHeight}px">
+<div class="tr-table" style:--rh={rowHeight != null ? `${rowHeight}px` : undefined}>
+<span class="probe" bind:this={probe} aria-hidden="true"></span>
 {#if showBar}
 	<div class="bar">
 		{#if selectable}<span class="sel" aria-live="polite">{checked.length ? `${fmt(checked.length)} selected` : ''}</span>{/if}
@@ -373,9 +516,17 @@
 		{#if activeCount > 0}
 			<Button variant="minimal" intent="neutral" size="sm" icon="cross" onclick={clearFilters}>Clear {activeCount === 1 ? 'filter' : `${activeCount} filters`}</Button>
 		{/if}
-		{#if !pagination}
+		{#if status}
+			<span class="rows" aria-live="polite">{@render status({ count: flat.length, hasMore, loading })}</span>
+		{:else if !pagination}
 			<span class="rows" aria-live="polite">{fmt(flat.length)}{hasMore ? '+' : ''} rows</span>
 		{/if}
+		<div class="tr-anchor">
+			<Button variant="minimal" intent="neutral" size="sm" icon="copy" aria-haspopup="menu" aria-expanded={copyOpen} onclick={() => (copyOpen = !copyOpen)}>Copy / Export</Button>
+			<Popover bind:open={copyOpen} align="end">
+				<Menu items={copyItems} label="Copy and export" autofocus onclose={() => (copyOpen = false)} />
+			</Popover>
+		</div>
 		{#if columnMenu}
 			<div class="tr-anchor">
 				<Button variant="minimal" intent="neutral" size="sm" icon="cog" aria-haspopup="true" aria-expanded={menuOpen} onclick={() => (menuOpen = !menuOpen)}>Columns</Button>
@@ -391,15 +542,15 @@
 	</div>
 {/if}
 
-<div class="tr-table-wrap" style:max-height={maxHeight} bind:this={wrap} bind:clientHeight={viewH} onscroll={onScroll} data-virtual={virtual}>
-	<table style:width="{total}px" role={getChildren ? 'treegrid' : 'grid'} aria-rowcount={virtual ? list.length + 1 : undefined} aria-busy={loading || undefined}>
+<div class="tr-table-wrap" style:max-height={maxHeight} style:--hh="{headRowH}px"  bind:this={wrap} bind:clientHeight={viewH} onscroll={onScroll} data-virtual={virtual}>
+	<table style:width="{total}px" role={getChildren ? 'treegrid' : 'grid'} aria-rowcount={virtual ? list.length + 1 : undefined} aria-busy={loading || stale || undefined} data-stale={stale || undefined}>
 		<caption class="tr-visually-hidden">{caption}</caption>
 		<colgroup>
 			{#if selectable}<col style:width="40px" />{/if}
 			{#each cols as c (c.key)}<col style:width="{w(c)}px" />{/each}
 		</colgroup>
 		<thead bind:clientHeight={headH}>
-			<tr>
+			<tr bind:clientHeight={headRowH}>
 				{#if selectable}
 					<th scope="col" class="chk"><Checkbox checked={allOn} indeterminate={!allOn && someOn} aria-label={pagination ? 'Select all rows on this page' : 'Select all rows'} onchange={(e) => toggleAll((e.currentTarget as HTMLInputElement).checked)} /></th>
 				{/if}
@@ -407,7 +558,7 @@
 					<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
 					<th
 						scope="col"
-						data-align={c.align}
+						data-align={alignOf(c)}
 						data-sortable={c.sortable}
 						data-menu={hasHeadMenu(c)}
 						oncontextmenu={(e) => onHeadContext(e, c)}
@@ -429,6 +580,7 @@
 								><Icon name="filter" /></button>
 							{/if}
 						</div>
+						{#if headerExtra}<div class="hx">{@render headerExtra(c)}</div>{/if}
 						{#if c.resizable !== false && i < cols.length - 1}
 							<!-- svelte-ignore a11y_no_noninteractive_tabindex, a11y_no_noninteractive_element_interactions -->
 							<div
@@ -467,7 +619,7 @@
 		</thead>
 		<tbody>
 			{#if virtual && start > 0}
-				<tr class="spacer" aria-hidden="true" style:height="{start * rowHeight}px"><td colspan={ncols} style:height="{start * rowHeight}px"></td></tr>
+				<tr class="spacer" aria-hidden="true" style:height="{start * rowH}px"><td colspan={ncols} style:height="{start * rowH}px"></td></tr>
 			{/if}
 			{#each shown as f, k (rowKey(f.row))}
 				{@const id = rowKey(f.row)}
@@ -481,14 +633,17 @@
 					aria-level={getChildren ? f.depth + 1 : undefined}
 					aria-expanded={f.expandable ? expanded.has(id) || !!kept : undefined}
 					onclick={() => (selected = id)}
+					ondblclick={(e) => rowDblclick(e, f)}
+					oncontextmenu={(e) => rowContext(e, f)}
+					onfocus={() => onfocusrow?.(f.row)}
 					onkeydown={(e) => rowKeydown(e, f, index)}
 				>
 					{#if selectable}
 						<td class="chk" onclick={(e) => e.stopPropagation()}><Checkbox checked={checked.includes(id)} aria-label="Select row" onchange={() => toggleRow(id)} /></td>
 					{/if}
 					{#each cols as c, ci (c.key)}
-						<td data-align={c.align}>
-							<div class="cell" style:padding-inline-start={ci === 0 && getChildren ? `${f.depth * 20}px` : undefined}>
+						<td data-align={alignOf(c)} data-type={c.type}>
+							<div class="cell" title={cell ? undefined : titleValue(f.row, c)} style:padding-inline-start={ci === 0 && getChildren ? `${f.depth * 20}px` : undefined}>
 								{#if ci === 0 && getChildren}
 									{#if f.expandable}
 										<button
@@ -501,17 +656,17 @@
 										</button>
 									{:else}<span class="twisty"></span>{/if}
 								{/if}
-								{#if cell}{@render cell(f.row, c)}{:else}{f.row[c.key]}{/if}
+								{#if cell}{@render cell(f.row, c)}{:else}{displayValue(f.row, c, locale)}{/if}
 							</div>
 						</td>
 					{/each}
 				</tr>
 			{/each}
 			{#if virtual && end < list.length}
-				<tr class="spacer" aria-hidden="true" style:height="{(list.length - end) * rowHeight}px"><td colspan={ncols} style:height="{(list.length - end) * rowHeight}px"></td></tr>
+				<tr class="spacer" aria-hidden="true" style:height="{(list.length - end) * rowH}px"><td colspan={ncols} style:height="{(list.length - end) * rowH}px"></td></tr>
 			{/if}
 			{#if loading}
-				<tr class="more" aria-live="polite"><td colspan={ncols}><span class="ld"><Spinner size={16} label="Loading more rows" /> Loading more…</span></td></tr>
+				<tr class="more" aria-live="polite"><td colspan={ncols}><span class="ld"><Spinner size={16} label="Loading more rows" /> Loading more…{#if oncancel} <Button variant="minimal" intent="neutral" size="sm" onclick={oncancel}>Cancel</Button>{/if}</span></td></tr>
 			{:else if list.length === 0}
 				<tr class="more"><td colspan={ncols}><span class="ld">{empty}</span></td></tr>
 			{/if}
@@ -560,6 +715,15 @@
 	</Popover>
 {/if}
 
+{#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={closeRowMenu}>
+			<Menu items={ctx.items} label="Row actions" autofocus onclose={() => closeRowMenu(true)} />
+		</Popover>
+	{/if}
+{/if}
+
 {#if filterMenu && menuCol}
 	<Popover open={true} fixed anchor={filterMenu.el} onclose={() => (filterMenu = null)}>
 		<ul class="fmenu" aria-label="{menuCol.header} values">
@@ -575,20 +739,28 @@
 <style>
 	.bar { display: flex; align-items: center; gap: 8px; min-height: 32px; margin-bottom: 6px; }
 	.grow { flex: 1; }
-	.sel { font-size: var(--tr-text-sm); font-weight: 600; color: var(--tr-primary); min-width: 80px; }
+	.sel { font-size: var(--tr-text-sm); font-weight: 600; color: var(--tr-primary-text, var(--tr-primary)); min-width: 80px; }
 	.rows { font-size: var(--tr-text-sm); color: var(--tr-on-surface-variant); font-variant-numeric: tabular-nums; }
 	.colmenu { list-style: none; margin: 0; padding: 8px 12px; display: grid; gap: 4px; white-space: nowrap; }
 	.chk { width: 40px; padding: 0 0 0 10px !important; }
 	.tr-table-wrap { position: relative; overflow: auto; border: 1px solid var(--tr-outline-variant); border-radius: var(--tr-radius-md); background: var(--tr-surface); }
 	table { table-layout: fixed; border-collapse: separate; border-spacing: 0; font-size: var(--tr-text-md); }
 	/* Frozen header */
+	.tr-table { --rh: var(--tr-row-h, 32px); position: relative; }
+	.probe { position: absolute; width: 0; height: var(--rh); visibility: hidden; pointer-events: none; }
+	.ctxpt { position: fixed; width: 0; height: 0; pointer-events: none; }
 	thead th {
-		position: sticky; top: 0; z-index: 2; height: 28px; padding: 0 8px; text-align: start;
+		position: sticky; top: 0; z-index: 2; height: var(--tr-row-h-head, 28px); padding: 0 8px; text-align: start;
 		background: var(--tr-surface-container); border-bottom: 1px solid var(--tr-outline-variant);
 		font-size: var(--tr-text-sm); font-weight: 700; letter-spacing: 0.02em; color: var(--tr-on-surface-variant);
 		white-space: nowrap; overflow: hidden;
 	}
 	th[data-align='end'], td[data-align='end'] { text-align: end; }
+	th[data-align='end'] .hc { justify-content: flex-end; }
+	td[data-type='number'], td[data-type='date'], td[data-type='datetime'] { font-variant-numeric: tabular-nums; }
+	td[data-type='json'] { font-family: var(--tr-font-mono); font-size: var(--tr-text-sm); }
+	.hx { font-weight: 400; letter-spacing: 0; min-width: 0; padding-bottom: 4px; }
+	th[data-align='end'] .hx { display: flex; justify-content: flex-end; }
 	.head { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; }
 	button.head { cursor: pointer; }
 	button.head:focus-visible { outline: none; box-shadow: var(--tr-focus-ring); border-radius: 2px; }
@@ -599,7 +771,7 @@
 	.grip:focus-visible { outline: none; }
 
 	/* Heading cell: label + (optional) funnel that opens the column menu */
-	.hc { display: flex; align-items: center; gap: 2px; height: 28px; min-width: 0; }
+	.hc { display: flex; align-items: center; gap: 2px; min-height: var(--tr-row-h-head, 28px); min-width: 0; }
 	.hf { 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; opacity: 0; transition: opacity var(--tr-dur-fast) var(--tr-ease), background-color var(--tr-dur-fast) var(--tr-ease); }
 	th:hover .hf, .hf:focus-visible, .hf[data-on='true'], .hf[aria-expanded='true'] { opacity: 1; }
 	.hf:hover { background: var(--tr-surface-container-highest); }
@@ -612,11 +784,11 @@
 	.hi { display: flex; align-items: center; gap: 8px; width: 100%; height: var(--tr-control-h); padding: 0 8px; border: 0; border-radius: var(--tr-radius-sm); background: none; color: var(--tr-on-surface); font: inherit; text-align: left; cursor: pointer; }
 	.hi:hover:not(:disabled), .hi:focus-visible { outline: none; background: var(--tr-surface-container-highest); }
 	.hi:disabled { opacity: 0.45; cursor: not-allowed; }
-	.hi[data-on='true'] { color: var(--tr-primary); font-weight: 700; }
+	.hi[data-on='true'] { color: var(--tr-primary-text, var(--tr-primary)); font-weight: 700; }
 	.fmenu.inline { padding: 0; max-height: 160px; }
 
 	/* Filter row sits under the header, also frozen */
-	thead tr.filters th { top: 28px; z-index: 2; height: 34px; padding: 4px 6px; font-weight: 400; background: var(--tr-surface-container-low); overflow: visible; }
+	thead tr.filters th { top: var(--hh, 28px); z-index: 2; height: 34px; padding: 4px 6px; font-weight: 400; background: var(--tr-surface-container-low); overflow: visible; }
 	.fi { width: 100%; min-width: 0; height: 24px; padding: 0 6px; border: 1px solid var(--tr-outline-variant); border-radius: var(--tr-radius-sm); background: var(--tr-surface); color: var(--tr-on-surface); font: var(--tr-text-sm) var(--tr-font-sans); box-sizing: border-box; }
 	.fi::placeholder { color: var(--tr-placeholder); }
 	.fi:hover { border-color: var(--tr-outline); }
@@ -634,6 +806,8 @@
 	tbody tr.spacer, tbody tr.spacer td { padding: 0; border: 0; pointer-events: none; }
 	tbody tr.more td { text-align: center; color: var(--tr-on-surface-variant); border-bottom: 0; }
 	tbody tr.more:hover { background: none; }
+	tbody { transition: opacity var(--tr-dur-fast) var(--tr-ease); }
+	table[data-stale] tbody tr:not(.more) { opacity: 0.55; }
 	.ld { display: inline-flex; align-items: center; gap: 8px; font-size: var(--tr-text-sm); }
 	.cell { display: flex; align-items: center; gap: 4px; min-width: 0; }
 	td[data-align='end'] .cell { justify-content: flex-end; }

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

@@ -1,5 +1,6 @@
 import { type Snippet } from 'svelte';
-import type { Column, ColumnFilters, SortState } from '../types.js';
+import { type ExportFormat, type ExportSerializer } from '../table-export.js';
+import type { Column, ColumnFilters, MenuEntry, SortState } from '../types.js';
 declare function $$render<T extends Record<string, any>>(): {
     props: {
         columns: Column<T>[];
@@ -24,7 +25,7 @@ declare function $$render<T extends Record<string, any>>(): {
         pageSize?: number;
         /** Render only the rows in view (fixed `rowHeight`). Needs a bounded `maxHeight`. Use with `pagination={false}`. */
         virtual?: boolean;
-        /** px; every row is exactly this tall when `virtual`. */
+        /** px; every row is exactly this tall when `virtual`. Defaults to the `--tr-row-h` density token (32px). */
         rowHeight?: number;
         /** Extra rows rendered above/below the viewport. */
         overscan?: number;
@@ -36,6 +37,31 @@ declare function $$render<T extends Record<string, any>>(): {
         loadThreshold?: number;
         /** Called near the end of the list. Append to `rows` (or flip `hasMore` off); it is not called again until `rows.length` changes. */
         onloadmore?: () => void | Promise<void>;
+        /** The rows are out of date while a refresh loads: dims them but keeps them visible and interactive, and marks the table `aria-busy`. */
+        stale?: boolean;
+        /** Status text in the bar (paged or continuous), e.g. "1,240 rows · streaming…". Replaces the default row count. */
+        status?: Snippet<[info: {
+            count: number;
+            hasMore: boolean;
+            loading: boolean;
+        }]>;
+        /** Shows a Cancel button in the loading row; call it to abort the in-flight fetch. */
+        oncancel?: () => void;
+        /** Enter or double-click on a row (Space only selects). */
+        onactivate?: (row: T) => void;
+        /** A row received focus (mouse or keyboard); not called for focus inside a row's inner controls. */
+        onfocusrow?: (row: T) => void;
+        /** Context menu for a row: right-click, the Menu key or Shift+F10. Return an empty list to keep the browser's menu. */
+        rowMenu?: (row: T) => MenuEntry[];
+        /** BCP 47 locale for default number and date formatting (default: the runtime locale). */
+        locale?: string;
+        /** Rendered under each column's label, e.g. a type glyph, null % or a sparkline. */
+        headerExtra?: Snippet<[column: Column<T>]>;
+        /** Extra entries in the toolbar's Copy / Export menu, e.g. SQL `VALUES`. */
+        exporters?: {
+            label: string;
+            serialize: ExportSerializer<T>;
+        }[];
         /** Show a filter row; columns opt in with `filter`. */
         /**
          * Column filtering UI (columns opt in with `filter`): `'row'` (or `true`) adds a filter row under the header;
@@ -52,7 +78,17 @@ declare function $$render<T extends Record<string, any>>(): {
         filterDelay?: number;
         empty?: string;
     };
-    exports: {};
+    exports: {
+        exportRows: (format: ExportFormat | ExportSerializer<T>, opts?: {
+            scope?: "auto" | "all";
+            header?: boolean;
+        }) => string;
+        copyRows: (format?: ExportFormat | ExportSerializer<T>, opts?: {
+            scope?: "auto" | "all";
+            header?: boolean;
+            focus?: T;
+        }) => Promise<boolean>;
+    };
     bindings: "checked" | "sort" | "selected" | "filters";
     slots: {};
     events: {};
@@ -62,7 +98,17 @@ declare class __sveltets_Render<T extends Record<string, any>> {
     events(): ReturnType<typeof $$render<T>>['events'];
     slots(): ReturnType<typeof $$render<T>>['slots'];
     bindings(): "checked" | "sort" | "selected" | "filters";
-    exports(): {};
+    exports(): {
+        exportRows: (format: ExportFormat | ExportSerializer<T>, opts?: {
+            scope?: "auto" | "all";
+            header?: boolean;
+        }) => string;
+        copyRows: (format?: ExportFormat | ExportSerializer<T>, opts?: {
+            scope?: "auto" | "all";
+            header?: boolean;
+            focus?: T | undefined;
+        }) => Promise<boolean>;
+    };
 }
 interface $$IsomorphicComponent {
     new <T extends Record<string, any>>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {

package/dist/components/Dialog.svelte

@@ -30,13 +30,14 @@
 	});
 </script>
 
+<!-- `close` fires asynchronously: when the dialog was reopened meanwhile, the event is stale and must not close it again -->
 <dialog
 	bind:this={el}
 	class="tr-dialog"
 	role={alert ? 'alertdialog' : undefined}
 	data-size={size}
 	aria-labelledby="{uid}-title"
-	onclose={() => { open = false; onclose?.(); }}
+	onclose={() => { if (el?.open) return; open = false; onclose?.(); }}
 	onclick={(e) => e.target === el && (open = false)}
 >
 	<div class="frame">

package/dist/components/Drawer.svelte

@@ -31,7 +31,7 @@
 
 <dialog
 	bind:this={el} class="tr-drawer" data-pos={position} data-size={size} aria-labelledby="{uid}-t"
-	onclose={() => { open = false; onclose?.(); }}
+	onclose={() => { if (el?.open) return; open = false; onclose?.(); }}
 	onclick={(e) => e.target === el && (open = false)}
 >
 	<div class="frame">

package/dist/components/EditableText.svelte

@@ -60,7 +60,7 @@
 {/if}
 
 <style>
-	.view { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 28px; padding: 0 6px; margin: 0 -6px; border: 0; border-radius: var(--tr-radius-sm); background: none; color: inherit; font: inherit; text-align: left; cursor: text; }
+	.view { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: calc(var(--tr-control-h) - 4px); padding: 0 6px; margin: 0 -6px; border: 0; border-radius: var(--tr-radius-sm); background: none; color: inherit; font: inherit; text-align: left; cursor: text; }
 	.view:disabled { cursor: default; }
 	.view:hover:not(:disabled) { background: var(--tr-surface-container-high); }
 	.view:focus-visible { outline: none; box-shadow: var(--tr-focus-ring); }
@@ -68,6 +68,6 @@
 	.view:hover :global(svg), .view:focus-visible :global(svg) { opacity: 1; }
 	.tx { white-space: pre-wrap; overflow-wrap: break-word; }
 	.tx[data-empty='true'] { color: var(--tr-placeholder); font-style: italic; }
-	.ed { width: 100%; min-height: 28px; padding: 2px 6px; margin: 0 -6px; box-sizing: content-box; border: 1px solid var(--tr-primary); border-radius: var(--tr-radius-sm); background: var(--tr-surface-container); color: var(--tr-on-surface); font: inherit; outline: none; box-shadow: inset 0 -2px 0 var(--tr-primary), var(--tr-focus-ring); }
+	.ed { width: 100%; min-height: calc(var(--tr-control-h) - 4px); padding: 2px 6px; margin: 0 -6px; box-sizing: content-box; border: 1px solid var(--tr-primary); border-radius: var(--tr-radius-sm); background: var(--tr-surface-container); color: var(--tr-on-surface); font: inherit; outline: none; box-shadow: inset 0 -2px 0 var(--tr-primary), var(--tr-focus-ring); }
 	textarea.ed { resize: vertical; line-height: 1.4; }
 </style>

package/dist/components/Eyebrow.svelte

@@ -14,7 +14,7 @@
 <svelte:element this={as} class="eb {klass}" data-tone={tone} {...rest}>{@render children?.()}</svelte:element>
 
 <style>
-	.eb { margin: 0; font-family: var(--tr-font-display, var(--tr-font-sans)); font-size: var(--tr-text-sm); font-weight: 700; line-height: 1.3; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tr-primary); }
+	.eb { margin: 0; font-family: var(--tr-font-display, var(--tr-font-sans)); font-size: var(--tr-text-sm); font-weight: 700; line-height: 1.3; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tr-primary-text, var(--tr-primary)); }
 	.eb[data-tone='muted'] { color: var(--tr-on-surface-variant); }
 	.eb[data-tone='default'] { color: var(--tr-on-surface); }
 </style>

package/dist/components/FileUpload.svelte

@@ -126,7 +126,7 @@
 	.zone:focus-visible { outline: none; border-color: var(--tr-primary); box-shadow: var(--tr-focus-ring); }
 	.zone[aria-disabled='true'] { opacity: 0.5; cursor: not-allowed; }
 	strong { color: var(--tr-on-surface); }
-	.link { color: var(--tr-primary); font-weight: 600; text-decoration: underline; }
+	.link { color: var(--tr-primary-text, var(--tr-primary)); font-weight: 600; text-decoration: underline; }
 	.ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--tr-primary-container); color: var(--tr-on-primary-container); }
 	.hint { font-size: var(--tr-text-sm); }
 	.list { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }

package/dist/components/Footer.svelte

@@ -6,8 +6,12 @@
 		start,
 		center,
 		end,
+		brand,
+		meta,
+		links,
 		children,
 		variant = 'plain',
+		contained = false,
 		class: klass,
 		...rest
 	}: {
@@ -17,18 +21,31 @@
 		center?: Snippet;
 		/** Trailing region (e.g. social links). */
 		end?: Snippet;
+		/** Identity (e.g. a logo) at the start. With `brand`, `meta` or `links`, `start`/`center`/`end` are ignored. */
+		brand?: Snippet;
+		/** Small print (e.g. copyright) stacked directly under `brand`. */
+		meta?: Snippet;
+		/** One or more link groups, right-aligned on the same row when wide. */
+		links?: Snippet;
 		/** Free-form content; replaces the three regions. */
 		children?: Snippet;
 		/** `bordered` adds a top border. */
 		variant?: 'plain' | 'bordered';
+		/** Align the content to the `Container` max-width and gutters while the background stays full-bleed. `true` is `lg`; sizes match `Container`. */
+		contained?: boolean | 'sm' | 'md' | 'lg';
 		class?: string;
 	} & Omit<HTMLAttributes<HTMLElement>, 'children' | 'class'> = $props();
 </script>
 
 <!-- A page-level <footer> is the contentinfo landmark; keep a single one per page. -->
-<footer {...rest} class={['ft', klass]} data-variant={variant}>
+<footer {...rest} class={['ft', klass]} data-variant={variant} data-contained={contained === true ? 'lg' : contained || undefined}>
 	{#if children}
 		<div class="in free">{@render children()}</div>
+	{:else if brand || meta || links}
+		<div class="in sem">
+			{#if brand || meta}<div class="bm">{#if brand}{@render brand()}{/if}{#if meta}<div class="meta">{@render meta()}</div>{/if}</div>{/if}
+			{#if links}<div class="l">{@render links()}</div>{/if}
+		</div>
 	{:else}
 		<div class="in">
 			<div class="s">{#if start}{@render start()}{/if}</div>
@@ -42,13 +59,23 @@
 	.ft { container-type: inline-size; background: var(--tr-surface-container); color: var(--tr-on-surface-variant); font-size: var(--tr-text-sm); }
 	.ft[data-variant='bordered'] { border-top: 1px solid var(--tr-outline-variant); }
 	.in { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px 16px; padding: 16px var(--tr-gutter, clamp(16px, 4vw, 32px)); }
+	.ft[data-contained] { --_w: var(--tr-container-max); }
+	.ft[data-contained='sm'] { --_w: 40rem; }
+	.ft[data-contained='md'] { --_w: 56rem; }
+	.ft[data-contained] .in { padding-inline: max(var(--tr-gutter, 16px), calc((100% - var(--_w)) / 2 + var(--tr-gutter, 16px))); }
+	.in.sem { grid-template-columns: minmax(0, 1fr) minmax(0, auto); }
+	.bm { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
+	.l { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 8px 24px; min-width: 0; }
 	.in.free { display: block; }
 	.s, .c, .e { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; min-width: 0; }
 	.c { justify-content: center; }
 	.e { justify-content: flex-end; }
 	.s:empty, .c:empty, .e:empty { display: none; }
+	/* each region keeps its own column, so an empty centre doesn't pull `end` into the middle */
+	.s { grid-column: 1; } .c { grid-column: 2; } .e { grid-column: 3; }
 	@container (max-width: 640px) {
 		.in:not(.free) { grid-template-columns: minmax(0, 1fr); justify-items: start; }
-		.c, .e { justify-content: flex-start; }
+		.s, .c, .e { grid-column: auto; }
+		.c, .e, .l { justify-content: flex-start; }
 	}
 </style>