astryx-dracula 0.6.2 → 0.7.0

package/templates/table-tree.tsx

@@ -0,0 +1,707 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+// XLE (canonical structure of the tree below; the CLI had no XLE validator
+// after `astryx layout` was removed in 0.7.0, so this is a reading aid and a
+// human drift check — update it with the file, never alone):
+//   L[h=fill] > (LH[divider p=6] > V[g=2] > (Hd"Vault inventory"[level=1 t=display-2] + Tx[t=body] + Tx[t=supporting])) + (LC[p=4] > V[g=4] > (H[g=2 a=center wrap] > (SI[fill] > Tx[t=supporting]) + B.secondary"Reset column widths") + (C[p=0] > T[compact striped hover dv=none] > (TR > (THC"Name" + THC"Class" + THC"Items" + THC"Value" + THC"Updated")) + (TR > (TC > (H[g=2 a=center] > Ic + Tx)) + TC*4)) + Tx[t=supporting])
+
+/**
+ * Vault inventory — one hierarchical table whose collection rows roll up the
+ * stock, value and last-catalogued date of everything filed beneath them.
+ *
+ * ## The three plugins this page exists to demonstrate
+ *
+ * **The tree is state, not markup.** `useTableTreeState` owns the expanded id
+ * set and flattens the nested fixture into the rows the table actually mounts;
+ * `useTableTreeData` draws the indent and the chevron and applies `aria-level`
+ * / `aria-expanded`. Hand-rolling a Set plus a recursive flatten is the usual
+ * way this gets built, and it costs the ARIA, the header expand-all control,
+ * and the guarantee that every level shares one column grid.
+ *
+ * **Sorting is handed to the tree, not applied over its output.**
+ * `useTableSortableState` returns an `applySort` that `useTableTreeState`
+ * receives as `sortSiblings`. A sort therefore reorders each sibling group in
+ * place: a blade can never be lifted out of the armory that holds it.
+ *
+ * **Arrow keys are a local plugin.** `useTableTreeData` supplies the roles but
+ * no key handling, so `useTreeKeyboardNav` below implements the APG treegrid
+ * keys through `transformTable` (one handler for the whole table) and
+ * `transformBodyRow` (the roving `tabIndex` plus a cursor rule). It is a real
+ * `TablePlugin`, so it composes in the same bag as sort and resize instead of
+ * wrapping the table in a div.
+ *
+ * **Ids are paths, and that is load-bearing.** Every id is its full path, so
+ * the parent lookup for ArrowLeft and the row keys fall out of string
+ * operations rather than a second index. Swapping in uuid-keyed data would
+ * require an explicit parent id that the keyboard plugin would have to walk.
+ *
+ * **Rollups are computed from the leaves, never stored.** `withRollups` walks
+ * the fixture bottom-up, so a collection's stock, value and date can never
+ * disagree with the rows beneath it. A parent row that hardcodes any of the
+ * three is the bug this shape prevents.
+ */
+
+import { Button } from "@astryxdesign/core/Button";
+import { Card } from "@astryxdesign/core/Card";
+import { Icon } from "@astryxdesign/core/Icon";
+import {
+	HStack,
+	Layout,
+	LayoutContent,
+	LayoutHeader,
+	StackItem,
+	VStack,
+} from "@astryxdesign/core/Layout";
+import type { TableColumn, TablePlugin } from "@astryxdesign/core/Table";
+import {
+	pixel,
+	proportional,
+	Table,
+	useTableColumnResize,
+	useTableSortable,
+	useTableSortableState,
+	useTableTreeData,
+	useTableTreeState,
+} from "@astryxdesign/core/Table";
+import { Heading, Text } from "@astryxdesign/core/Text";
+import {
+	BookText,
+	Boxes,
+	FlaskConical,
+	Gem,
+	type LucideIcon,
+	Sword,
+	Telescope,
+} from "lucide-react";
+import {
+	type CSSProperties,
+	type KeyboardEvent,
+	useCallback,
+	useEffect,
+	useMemo,
+	useRef,
+	useState,
+} from "react";
+
+// ── Data ──────────────────────────────────────────────────────────────────────
+
+type VaultKind = "collection" | "relic" | "tome" | "blade" | "vial" | "instrument";
+
+type SortKey = "name" | "kind" | "items" | "value" | "updated";
+
+interface VaultEntry extends Record<string, unknown> {
+	/** Full path. Doubles as the ArrowLeft parent link and the row key. */
+	id: string;
+	name: string;
+	kind: VaultKind;
+	/** Leaf: how many objects are held. Collection: summed by `withRollups`. */
+	items: number;
+	/** Insured value in whole dollars. Collection: summed by `withRollups`. */
+	value: number;
+	/** Epoch ms. Collection: newest descendant, taken by `withRollups`. */
+	cataloguedAt: number;
+	children?: VaultEntry[];
+}
+
+const KIND_ICON: Record<VaultKind, LucideIcon> = {
+	collection: Boxes,
+	relic: Gem,
+	tome: BookText,
+	blade: Sword,
+	vial: FlaskConical,
+	instrument: Telescope,
+};
+
+const KIND_LABEL: Record<VaultKind, string> = {
+	collection: "Collection",
+	relic: "Relic",
+	tome: "Tome",
+	blade: "Blade",
+	vial: "Vial",
+	instrument: "Instrument",
+};
+
+/**
+ * A fixed clock. Every date is authored as an offset from it, so "2 hours ago"
+ * reads the same in every environment and snapshot — which a real `Date.now()`
+ * could not promise.
+ */
+const HOUR = 3_600_000;
+const DAY = 86_400_000;
+const NOW = Date.UTC(2026, 10, 7, 18, 0);
+
+const hoursAgo = (count: number): number => NOW - count * HOUR;
+const daysAgo = (count: number): number => NOW - count * DAY;
+
+function item(
+	id: string,
+	name: string,
+	kind: VaultKind,
+	items: number,
+	value: number,
+	cataloguedAt: number,
+): VaultEntry {
+	return { id, name, kind, items, value, cataloguedAt };
+}
+
+function collection(id: string, name: string, children: VaultEntry[]): VaultEntry {
+	return { id, name, kind: "collection", items: 0, value: 0, cataloguedAt: 0, children };
+}
+
+const VAULT_TREE: VaultEntry[] = [
+	collection("armory", "Armory", [
+		collection("armory/blades", "Blades", [
+			item("armory/blades/silver-stake", "Silver stake", "blade", 4, 320, hoursAgo(2)),
+			item("armory/blades/bone-saw", "Bone saw", "blade", 1, 180, daysAgo(34)),
+			item("armory/blades/obsidian-knife", "Obsidian knife", "blade", 2, 260, daysAgo(3)),
+		]),
+		collection("armory/warding", "Warding", [
+			item("armory/warding/garlic-wreath", "Garlic wreath", "relic", 12, 96, hoursAgo(6)),
+			item("armory/warding/threshold-salt", "Threshold salt", "vial", 30, 45, daysAgo(8)),
+			item("armory/warding/consecrated-oil", "Consecrated oil", "vial", 6, 210, daysAgo(21)),
+		]),
+		item("armory/ash-bolts", "Ash bolts", "blade", 24, 240, daysAgo(14)),
+	]),
+	collection("library", "Library", [
+		collection("library/grimoires", "Grimoires", [
+			item("library/grimoires/nocturne-codex", "Nocturne codex", "tome", 1, 1800, daysAgo(3)),
+			item("library/grimoires/blood-lexicon", "Blood lexicon", "tome", 1, 2400, daysAgo(21)),
+			item("library/grimoires/hollow-atlas", "Hollow atlas", "tome", 2, 3600, daysAgo(61)),
+		]),
+		collection("library/scrolls", "Scrolls", [
+			item("library/scrolls/tide-charts", "Tide charts", "tome", 8, 120, daysAgo(14)),
+			item("library/scrolls/star-almanac", "Star almanac", "tome", 3, 540, daysAgo(8)),
+		]),
+		collection("library/ledgers", "Ledgers", [
+			item("library/ledgers/tithe-ledger", "Tithe ledger", "tome", 1, 150, daysAgo(120)),
+			item(
+				"library/ledgers/bloodline-register",
+				"Bloodline register",
+				"tome",
+				1,
+				310,
+				daysAgo(240),
+			),
+		]),
+	]),
+	collection("reliquary", "Reliquary", [
+		collection("reliquary/saints", "Saints", [
+			item("reliquary/saints/thorn-finger", "Thorn finger", "relic", 1, 4200, daysAgo(34)),
+			item("reliquary/saints/wax-heart", "Wax heart", "relic", 1, 1150, daysAgo(3)),
+		]),
+		collection("reliquary/vessels", "Vessels", [
+			item("reliquary/vessels/obsidian-chalice", "Obsidian chalice", "relic", 1, 780, hoursAgo(6)),
+			item("reliquary/vessels/ash-urn", "Ash urn", "relic", 1, 430, daysAgo(61)),
+		]),
+		collection("reliquary/mirrors", "Mirrors", [
+			item("reliquary/mirrors/moon-glass", "Moon glass", "relic", 2, 960, daysAgo(21)),
+			item("reliquary/mirrors/black-mirror", "Black mirror", "relic", 1, 1240, daysAgo(8)),
+		]),
+	]),
+	collection("observatory", "Observatory", [
+		collection("observatory/instruments", "Instruments", [
+			item("observatory/instruments/moon-orrery", "Moon orrery", "instrument", 1, 5600, daysAgo(1)),
+			item(
+				"observatory/instruments/brass-sextant",
+				"Brass sextant",
+				"instrument",
+				1,
+				2100,
+				daysAgo(14),
+			),
+			item("observatory/instruments/star-chart", "Star chart", "instrument", 1, 640, daysAgo(34)),
+		]),
+		collection("observatory/clockwork", "Clockwork", [
+			item("observatory/clockwork/astro-clock", "Astro clock", "instrument", 1, 3400, daysAgo(8)),
+			item(
+				"observatory/clockwork/escapement",
+				"Spare escapement",
+				"instrument",
+				3,
+				270,
+				daysAgo(120),
+			),
+		]),
+	]),
+	item("gate-key", "Gate key", "relic", 1, 90, hoursAgo(2)),
+	item("crimson-seal", "Crimson seal", "relic", 1, 140, hoursAgo(6)),
+	item("night-ledger", "Night ledger", "tome", 1, 260, daysAgo(21)),
+];
+
+/**
+ * Give every collection the stock, insured value and newest date beneath it.
+ * All three are read from the same children, so a collection can never
+ * advertise a total that the rows inside it do not add up to.
+ */
+function withRollups(nodes: VaultEntry[]): VaultEntry[] {
+	return nodes.map((node) => {
+		if (node.children == null || node.children.length === 0) {
+			return node;
+		}
+		const children = withRollups(node.children);
+		return {
+			...node,
+			children,
+			items: children.reduce((total, child) => total + child.items, 0),
+			value: children.reduce((total, child) => total + child.value, 0),
+			cataloguedAt: children.reduce((newest, child) => Math.max(newest, child.cataloguedAt), 0),
+		};
+	});
+}
+
+const VAULT = withRollups(VAULT_TREE);
+
+const DEFAULT_EXPANDED = ["armory", "armory/blades", "library", "reliquary"];
+
+function countRows(nodes: readonly VaultEntry[]): number {
+	return nodes.reduce(
+		(total, node) => total + 1 + (node.children ? countRows(node.children) : 0),
+		0,
+	);
+}
+
+function countCollections(nodes: readonly VaultEntry[]): number {
+	return nodes.reduce(
+		(total, node) => total + (node.children ? 1 + countCollections(node.children) : 0),
+		0,
+	);
+}
+
+const TOTAL_ROWS = countRows(VAULT);
+const COLLECTION_COUNT = countCollections(VAULT);
+const TOTAL_ARTIFACTS = VAULT.reduce((total, entry) => total + entry.items, 0);
+const TOTAL_VALUE = VAULT.reduce((total, entry) => total + entry.value, 0);
+
+// ── Formatting ────────────────────────────────────────────────────────────────
+
+const numberFormat = new Intl.NumberFormat("en-US");
+
+const currencyFormat = new Intl.NumberFormat("en-US", {
+	style: "currency",
+	currency: "USD",
+	maximumFractionDigits: 0,
+});
+
+/*
+ * `numeric: 'auto'` is what turns a single unit into "yesterday", "last week"
+ * and "last month" instead of "1 day ago" — the phrasing an inventory expects.
+ * The locale is pinned so the page does not move with the runner's.
+ */
+const relativeFormat = new Intl.RelativeTimeFormat("en-US", { numeric: "auto" });
+
+// Largest first: the loop reports in the biggest unit that fits.
+const AGE_UNITS: ReadonlyArray<readonly [Intl.RelativeTimeFormatUnit, number]> = [
+	["year", 365 * DAY],
+	["month", 30 * DAY],
+	["week", 7 * DAY],
+	["day", DAY],
+	["hour", HOUR],
+	["minute", 60_000],
+];
+
+function formatAge(epochMs: number): string {
+	const elapsed = NOW - epochMs;
+	for (const [unit, size] of AGE_UNITS) {
+		if (elapsed >= size) {
+			return relativeFormat.format(-Math.floor(elapsed / size), unit);
+		}
+	}
+	return "just now";
+}
+
+// ── Columns ───────────────────────────────────────────────────────────────────
+
+/*
+ * Measured floors, not guesses. `pixel()` columns also become their own
+ * min-width, so each number below is the widest real value in the column plus
+ * the cell padding; the name column needs room for three levels of indent
+ * before the first character. The aggregate is deliberately wider than a
+ * phone, which is why Table's own horizontal scroller exists.
+ */
+const COLUMNS: TableColumn<VaultEntry>[] = [
+	{
+		key: "name",
+		header: "Name",
+		width: proportional(2, { minWidth: 300 }),
+		sortable: true,
+		renderCell: (entry) => (
+			<HStack gap={2} vAlign="center">
+				<Icon
+					icon={KIND_ICON[entry.kind]}
+					size="sm"
+					color={entry.kind === "collection" ? undefined : "secondary"}
+				/>
+				<Text type="body" weight={entry.kind === "collection" ? "semibold" : "normal"}>
+					{entry.name}
+				</Text>
+			</HStack>
+		),
+	},
+	{
+		key: "kind",
+		header: "Class",
+		width: pixel(120),
+		sortable: true,
+		renderCell: (entry) => (
+			<Text type="supporting" color="secondary">
+				{KIND_LABEL[entry.kind]}
+			</Text>
+		),
+	},
+	{
+		key: "items",
+		header: "Items",
+		width: pixel(96),
+		align: "end",
+		sortable: true,
+		renderCell: (entry) => (
+			<Text type="body" hasTabularNumbers>
+				{numberFormat.format(entry.items)}
+			</Text>
+		),
+	},
+	{
+		key: "value",
+		header: "Value",
+		width: pixel(128),
+		align: "end",
+		sortable: true,
+		renderCell: (entry) => (
+			<Text type="body" hasTabularNumbers>
+				{currencyFormat.format(entry.value)}
+			</Text>
+		),
+	},
+	{
+		key: "updated",
+		header: "Updated",
+		width: pixel(150),
+		align: "end",
+		sortable: true,
+		renderCell: (entry) => (
+			<Text type="body" color="secondary" hasTabularNumbers>
+				{formatAge(entry.cataloguedAt)}
+			</Text>
+		),
+	},
+];
+
+// ── Keyboard ──────────────────────────────────────────────────────────────────
+
+/*
+ * The cursor rule is an inset shadow rather than a background so it survives
+ * the zebra stripe, which sets `background-color` on the same row. 0.5 spacing
+ * step is the 2px focus line; it takes a token so it scales with the root.
+ */
+const cursorRowStyle: CSSProperties = {
+	boxShadow: "inset var(--spacing-0-5) 0 0 var(--color-accent)",
+};
+
+interface TreeKeyboardNavConfig {
+	/** The flattened, currently visible rows, in render order. */
+	rows: ReadonlyArray<VaultEntry>;
+	focusedId: string | null;
+	onFocusedIdChange: (id: string) => void;
+	expandedIds: ReadonlySet<string>;
+	onToggleItem: (item: VaultEntry) => void;
+}
+
+/**
+ * APG treegrid keys over the visible rows: Up/Down move, Right expands then
+ * descends, Left collapses then ascends, Home/End jump to the ends.
+ *
+ * The roving `tabIndex` makes the table one tab stop; once inside, the arrows
+ * own the movement. DOM focus is moved by the page effect that watches
+ * `focusedId`, so a click and a keypress converge on one path.
+ */
+function useTreeKeyboardNav({
+	rows,
+	focusedId,
+	onFocusedIdChange,
+	expandedIds,
+	onToggleItem,
+}: TreeKeyboardNavConfig): TablePlugin<VaultEntry> {
+	/*
+	 * Until the first move, the first row is the cursor. That is what gives
+	 * the table a `tabIndex={0}` on mount — without it every row would be -1
+	 * and the treegrid could not be entered from the keyboard at all.
+	 */
+	const cursorId = focusedId ?? rows[0]?.id ?? null;
+
+	const handleKeyDown = useCallback(
+		(event: KeyboardEvent<HTMLTableElement>) => {
+			// A resize handle or a nested control has already claimed the key.
+			if (event.defaultPrevented || rows.length === 0) {
+				return;
+			}
+			const index = rows.findIndex((row) => row.id === cursorId);
+			const current = index >= 0 ? rows[index] : undefined;
+			const hasChildren = Boolean(current?.children?.length);
+			const isExpanded = current != null && expandedIds.has(current.id);
+
+			let nextId: string | undefined;
+
+			switch (event.key) {
+				case "ArrowDown":
+					nextId = rows[index + 1]?.id ?? rows[0]?.id;
+					break;
+				case "ArrowUp":
+					nextId = index > 0 ? rows[index - 1].id : rows[0]?.id;
+					break;
+				case "ArrowRight":
+					if (current == null) {
+						nextId = rows[0]?.id;
+					} else if (hasChildren && !isExpanded) {
+						onToggleItem(current);
+					} else if (hasChildren) {
+						// Already open, so Right descends to the first child.
+						nextId = rows[index + 1]?.id;
+					}
+					break;
+				case "ArrowLeft":
+					if (current == null) {
+						nextId = rows[0]?.id;
+					} else if (hasChildren && isExpanded) {
+						onToggleItem(current);
+					} else {
+						// Ids are paths, so the parent is a prefix of this row's id.
+						const cut = current.id.lastIndexOf("/");
+						const parentId = cut > 0 ? current.id.slice(0, cut) : undefined;
+						nextId = rows.find((row) => row.id === parentId)?.id;
+					}
+					break;
+				case "Home":
+					nextId = rows[0]?.id;
+					break;
+				case "End":
+					nextId = rows[rows.length - 1]?.id;
+					break;
+				default:
+					return;
+			}
+
+			// Every branch moved focus or toggled a row, so the arrow key must
+			// not also scroll the page.
+			event.preventDefault();
+			if (nextId != null && nextId !== cursorId) {
+				onFocusedIdChange(nextId);
+			}
+		},
+		[rows, cursorId, expandedIds, onToggleItem, onFocusedIdChange],
+	);
+
+	return useMemo(
+		(): TablePlugin<VaultEntry> => ({
+			transformTable: (props) => ({
+				...props,
+				htmlProps: { ...props.htmlProps, onKeyDown: handleKeyDown },
+			}),
+			transformBodyRow: (props, row) => {
+				const isCursor = row.id === cursorId;
+				const onClick = props.htmlProps.onClick;
+				return {
+					...props,
+					htmlProps: {
+						...props.htmlProps,
+						tabIndex: isCursor ? 0 : -1,
+						"data-row-id": row.id,
+						style: isCursor
+							? { ...props.htmlProps.style, ...cursorRowStyle }
+							: props.htmlProps.style,
+						onClick: (event) => {
+							onClick?.(event);
+							onFocusedIdChange(row.id);
+						},
+					},
+				};
+			},
+		}),
+		[handleKeyDown, cursorId, onFocusedIdChange],
+	);
+}
+
+// ── Page ──────────────────────────────────────────────────────────────────────
+
+// A definite ancestor for `Layout height="fill"`. 100dvh, not minHeight: '100%':
+// a percentage min-height against an indefinite containing block computes to 0
+// (CSS 2.1 10.5), so the document would keep the scroll instead of the content
+// pane. Same shape as table-page.tsx and table-grouped.tsx.
+const pageStyle: CSSProperties = { height: "100dvh" };
+
+export default function TableTree() {
+	const [columnWidths, setColumnWidths] = useState<Record<string, number>>({});
+	const [focusedId, setFocusedId] = useState<string | null>(null);
+	const tableRef = useRef<HTMLTableElement>(null);
+	const shouldFocusRef = useRef(false);
+
+	const sortable = useTableSortableState<VaultEntry, SortKey>({
+		data: VAULT,
+		defaultSort: [{ sortKey: "name", direction: "ascending" }],
+		comparators: {
+			// Collections first, then by name — the ordering an inventory uses.
+			name: (a, b) =>
+				Number(b.kind === "collection") - Number(a.kind === "collection") ||
+				a.name.localeCompare(b.name),
+			kind: (a, b) => KIND_LABEL[a.kind].localeCompare(KIND_LABEL[b.kind]),
+			items: (a, b) => a.items - b.items,
+			value: (a, b) => a.value - b.value,
+			updated: (a, b) => a.cataloguedAt - b.cataloguedAt,
+		},
+	});
+
+	const { visibleData, treeConfig, expandedIds } = useTableTreeState<VaultEntry>({
+		data: VAULT,
+		idKey: "id",
+		defaultExpandedIds: DEFAULT_EXPANDED,
+		// Reorders each sibling group in place, so children never leave their
+		// parent — this is what keeps sorting and hierarchy compatible.
+		sortSiblings: sortable.applySort,
+	});
+
+	const moveFocus = useCallback((id: string) => {
+		shouldFocusRef.current = true;
+		setFocusedId(id);
+	}, []);
+
+	/*
+	 * Collapsing a branch can remove the row the cursor was sitting on. Move
+	 * the cursor to the nearest visible ancestor rather than leaving a roving
+	 * `tabIndex` on an unmounted row.
+	 */
+	useEffect(() => {
+		if (focusedId == null || visibleData.some((row) => row.id === focusedId)) {
+			return;
+		}
+		const nearest = visibleData.reduce<VaultEntry | undefined>((best, row) => {
+			if (!focusedId.startsWith(`${row.id}/`)) {
+				return best;
+			}
+			return best == null || row.id.length > best.id.length ? row : best;
+		}, undefined);
+		// Move the cursor, not the DOM focus: the row that disappeared was
+		// collapsed by a control that still has focus, and stealing it would
+		// strand the user away from the button they just pressed.
+		setFocusedId(nearest?.id ?? visibleData[0]?.id ?? null);
+	}, [focusedId, visibleData]);
+
+	// Focus follows `focusedId` whether it moved by arrow key or by click, so
+	// the roving tabindex and the DOM never disagree. The flag is what keeps a
+	// plain expand/collapse from stealing focus back into the table.
+	useEffect(() => {
+		if (focusedId == null) {
+			return;
+		}
+		const row = Array.from(
+			tableRef.current?.querySelectorAll<HTMLElement>("tr[data-row-id]") ?? [],
+		).find((element) => element.dataset.rowId === focusedId);
+		if (row == null) {
+			return;
+		}
+		if (shouldFocusRef.current) {
+			shouldFocusRef.current = false;
+			row.focus();
+		}
+		// No visibleData dependency: the effect reads the live DOM, and a row
+		// its own handler re-renders still lands here because that handler also
+		// moves `focusedId`.
+	}, [focusedId]);
+
+	const tree = useTableTreeData<VaultEntry>({
+		...treeConfig,
+		hasExpandAllControl: true,
+		getRowLabel: (entry) => entry.name,
+	});
+
+	const sort = useTableSortable<VaultEntry, SortKey>(sortable.sortConfig);
+
+	const resize = useTableColumnResize<VaultEntry>({
+		columnWidths,
+		onColumnResizeEnd: (updates) => setColumnWidths((previous) => ({ ...previous, ...updates })),
+		/*
+		 * No global `minWidth`: it would override every column's own floor and
+		 * flatten the name column down to one shared number. Each column
+		 * carries its own instead.
+		 */
+		columns: COLUMNS as TableColumn<Record<string, unknown>>[],
+	});
+
+	const keyboard = useTreeKeyboardNav({
+		rows: visibleData,
+		focusedId,
+		onFocusedIdChange: moveFocus,
+		expandedIds,
+		onToggleItem: treeConfig.onToggleItem,
+	});
+
+	const hasOverrides = Object.keys(columnWidths).length > 0;
+
+	return (
+		<Layout
+			style={pageStyle}
+			height="fill"
+			header={
+				<LayoutHeader hasDivider padding={6}>
+					<VStack gap={2}>
+						<Heading level={1} type="display-2">
+							Vault inventory
+						</Heading>
+						<Text type="body" color="secondary">
+							Every relic, tome and instrument in the estate, filed under the collection that holds
+							it. A collection's stock, insured value and last-catalogued date are rolled up from
+							everything beneath it.
+						</Text>
+						<Text type="supporting" color="secondary" hasTabularNumbers>
+							{COLLECTION_COUNT} collections · {numberFormat.format(TOTAL_ARTIFACTS)} artifacts ·{" "}
+							{currencyFormat.format(TOTAL_VALUE)} insured
+						</Text>
+					</VStack>
+				</LayoutHeader>
+			}
+			content={
+				<LayoutContent padding={4}>
+					<VStack gap={4}>
+						<HStack gap={2} vAlign="center" wrap="wrap">
+							<StackItem size="fill">
+								<Text type="supporting" color="secondary" hasTabularNumbers>
+									Showing {visibleData.length} of {TOTAL_ROWS} rows
+								</Text>
+							</StackItem>
+							<Button
+								label="Reset column widths"
+								variant="secondary"
+								size="sm"
+								isDisabled={!hasOverrides}
+								onClick={() => setColumnWidths({})}
+							/>
+						</HStack>
+						{/*
+							`padding={0}` lets the zebra stripes reach the border and
+							zeroes the container padding variables Table's edge-bleed
+							subtracts. The card clips, and Table's own overflow-x scroller
+							lives inside it, so a narrow viewport scrolls the table rather
+							than widening the page.
+						*/}
+						<Card padding={0}>
+							<Table<VaultEntry>
+								ref={tableRef}
+								aria-label="Vault inventory"
+								data={visibleData}
+								columns={COLUMNS}
+								idKey="id"
+								density="compact"
+								dividers="none"
+								isStriped
+								hasHover
+								textOverflow="truncate"
+								plugins={{ tree, sort, resize, keyboard }}
+							/>
+						</Card>
+						<Text type="supporting" color="secondary">
+							Arrow keys move the cursor: Right expands a collection or steps into it, Left
+							collapses it or steps back to its parent.
+						</Text>
+					</VStack>
+				</LayoutContent>
+			}
+		/>
+	);
+}