@poodle64/ui 2026.10.4 → 2026.10.5

package/README.md

@@ -90,10 +90,14 @@ rather than rebuilding it:
 | Import                                          | What it is                                                                                                                                                                                                                                                                                                                                                              |
 | ----------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `page-header`                                   | The only page-title pattern: optional `breadcrumbs` and `icon` snippets, eyebrow, an optional title, one clamped subtitle, an `info` tooltip, a `meta` row and an `actions` slot. Omit `title` for a header that is a breadcrumb bar.                                                                                                                                   |
-| `panel`                                         | The generic titled card, and the settings section: optional icon, a clamped one-line `subtitle` or a wrapping `description`, trailing `action`s, a body that can opt out of padding, an optional `footer` strip for Save/Cancel, and `tone="destructive"` for a danger zone. There is no `SettingsSection`; see [The settings destination](#the-settings-destination). |
+| `panel`                                         | The generic titled card, and the settings section: optional icon, a clamped one-line `subtitle` or a wrapping `description`, trailing `action`s, a body that can opt out of padding or scroll inside the card (`scroll`), an optional `footer` strip for Save/Cancel, and `tone="destructive"` for a danger zone. There is no `SettingsSection`; see [The settings destination](#the-settings-destination). |
+| `list-toolbar`                                  | The bar above a list, on the page ground: title, count, icon actions named by their tooltips, one labelled action. The Ledger and the RecordList draw theirs with it. |
+| `record-list`                                   | The ledger's look for a list that is not money. See [Lists that are not money](#lists-that-are-not-money). |
+| `record-switcher`                               | The open record's whole name as the top bar's control, its menu finding, grouping and picturing every record, and the record's pages as tabs. |
+| `document-pane`                                 | One document beside what it belongs to: titled, closable, its page fitted, with paging and zoom (a `PageCanvas` in a `Panel`). |
 | `detail-panel`                                  | The entity-detail surface: header with icon/eyebrow/title/`StatusBadge`/close, scrollable body, footer of actions.                                                                                                                                                                                                                                                      |
 | `settings-shell`                                | The settings destination: a grouped section list of `NavItem` rows beside the section you are reading, both scrolling independently from `md`, stacked below it. Render it inside `AppShell` with `padded={false}`.                                                                                                                                                     |
-| `context-column`                                | The persistent right-hand column: a standing `StatList` plus an optional detail that flows in on select. Below `xl` (1280px), where the column has nowhere to sit, the same content opens from a floating trigger instead of disappearing.                                                                                                                              |
+| `context-column`                                | The persistent right-hand column. A list page's: a standing `StatList` plus an optional detail that flows in on select. A record page's (`title`, `children`): the one opened item, closable, scrolling inside itself, and its `documentPane` beside it once the page's row has room. Below `xl` (1280px) the same content opens from a floating trigger instead of disappearing. See [A record's page](#a-records-page). |
 | `app-dialog`                                    | The dialogue frame: titled header, scrollable body, footer action bar, five sizes (`xs`…`xl`), and an `onOpenChange` for the dismissals the caller did not drive.                                                                                                                                                                                                       |
 | `dialog-section`                                | One section of a dialogue body; adjacent sections are divided automatically.                                                                                                                                                                                                                                                                                            |
 | `stat-card`                                     | A single metric that earns its space (label, value, unit, sub, status dot, and `valueTone` to colour the figure itself).                                                                                                                                                                                                                                                |
@@ -887,11 +891,11 @@ no module rebuilds them and a need one module finds becomes a toggle for all.
 | Prop | Purpose |
 | --- | --- |
 | `rows` | `LedgerRow`s, extended with whatever the module's columns read: `id`, `date` (ISO), `title`, `note`, `amount` (signed), `balance`, `review` (`true` or a `Status`) with `reviewLabel` (the chip's words, "Review" by default), `conversion` (a swap inside the account: plain amount, in no total), `attachment` (its name), `origins` (a synthetic row's statement lines). Pass every row the view covers, filtered: the ledger sorts newest first, keeps a day's rows in the order given, and mounts only those near the view. |
-| `columns` | The module's columns, in order after the amount. The keys `date`, `title`, `amount` and `balance` are the ledger's own cells: list one to rename or resize it (the title reads "Description" until the module names it), and list `balance` to offer the running balance at all, with `text` saying what it counts (money, a coin, units). A `cell` snippet's links and buttons take their own clicks; the rest of the cell opens the row. A column's `sort` gives the real value its head sorts by (a number, not its text); a `text` column sorts by its text without one, a `cell`-only column does not sort, and the balance never does. |
+| `columns` | The module's columns, in order after the amount. The keys `date`, `title`, `amount` and `balance` are the ledger's own cells: list one to rename or resize it (the title reads "Description" until the module names it), and list `balance` to offer the running balance at all, with `text` saying what it counts (money, a coin, units). A column `on: 'wide'` is ticked only on a wide ledger. A `cell` snippet's links and buttons take their own clicks; the rest of the cell opens the row. A column's `sort` gives the real value its head sorts by (a number, not its text); a `text` column sorts by its text without one, a `cell`-only column does not sort, and the balance never does. |
 | `preferences`, `onPreferencesChange` | The viewer's `{ columns, period }`. Missing fields take the module's defaults (each column's `on`, the balance off, grouped by month); an unknown column key is ignored. The ledger stores nothing. |
 | `fyStart` | The month a financial year starts, 1–12. July by default; anything else groups from July and logs an error in development. |
 | `locale`, `currency` | Every figure, amounts, nets and counts, in this locale (`AU_LOCALE` by default) and currency (AUD). Dates keep the drawn "15 Sep": the ledger's words are English. |
-| `title`, `meta`, `actions` | The toolbar on the page ground: its title, the count beside it, and the module's own actions after the Columns menu. |
+| `title`, `meta`, `actions`, `tools`, `action` | The bar on the page ground, a `ListToolbar`: its title (a heading), the count beside it, the module's own controls after the Columns menu, its icon actions (each named by its tooltip) and its one labelled action. |
 | `selected`, `bulkActions` | Ticking exists only with `bulkActions`, whose snippet gets the ticked rows in the bar that replaces the toolbar. |
 | `open`, `editor` | Opening exists only with `editor`: the row lifts out of its card as its own surface, holding the snippet. Its second argument carries the row's `template` and each column's grid line, so fields can sit under their columns. |
 | `originActions`, `onAttachment` | Split, join and undo under a synthetic row's statement lines; the paperclip as a button. |
@@ -940,6 +944,98 @@ row in about 300ms with some 20 mounted, where mounting them all took 7.6 to 8.6
 seconds and 65,000 nodes. Its look is measured in a real engine at 390, 1000,
 1440 and 3360px, and at 5,000 rows (`harness/drive.md` §"The ledger").
 
+## Lists that are not money
+
+Properties, managers, tools, the lines of a profit and loss: `RecordList` wears
+the ledger's look, so every list in an app reads one way. The same bar, head
+card, row cards with hairlines and group labels on the ground, drawn from the
+ledger's own classes (`ledger/look.ts`), so the two cannot drift. `DataTable`
+stays for a dense grid of data; a module's own records are a RecordList.
+
+```svelte
+<script lang="ts">
+	import RecordList, { type RecordListColumn, type RecordListRow } from '@poodle64/ui/record-list';
+	import House from '@lucide/svelte/icons/house';
+
+	type Property = RecordListRow & { value: number; loan: number };
+	const columns: RecordListColumn<Property>[] = [
+		{ key: 'title', label: 'Property' },
+		{ key: 'value', label: 'Value', align: 'end', sort: (r) => r.value, text: (r) => aud(r.value) },
+		{ key: 'loan', label: 'Loan', align: 'end', on: 'wide', text: (r) => aud(r.loan) }
+	];
+</script>
+
+<RecordList rows={properties} {columns} title="Owned properties" noun={['property', 'properties']}
+	icon={House} href={(r) => `/property/${r.id}`} bind:preferences
+	tools={[{ label: 'Download as CSV', icon: Download, onclick: save }]}
+	action={{ label: 'Add property', icon: Plus, href: '/property/new' }} />
+```
+
+| Prop | Purpose |
+| --- | --- |
+| `rows` | `RecordListRow`s: `id`, `title`, `note`, `image` (a thumbnail), `icon` (a row's own tile, for a tool), `flags` (what wants the viewer: the first a chip on line two with "+N more" naming the rest, every one on a phone). |
+| `columns` | The module's columns after the title, the Ledger's `ListColumn` shape plus `total`. List `title` to rename, resize or draw it with `cell`. `on: 'wide'` ticks a column only on a wide list (1200px of list), so extra width shows more columns and the viewer can tick it back. |
+| `preferences`, `onPreferencesChange`, `preferencesNote` | The viewer's `{ columns }` from the Columns menu, which the bar carries while the list has heads. The list stores nothing. |
+| `title`, `meta`, `leading`, `toolbar`, `tools`, `action` | The `ListToolbar`. No title, no bar. |
+| `group` | A row's group label: groups show in the order their first rows come, each label on the ground with its count and each column's `total` over its rows. |
+| `totalLabel` | A card after the rows with each column's `total` over every row: "All three". |
+| `head` | `false` drops the head card (and the Columns menu): a tools list. |
+| `icon` | The quiet tile a row without a photo or its own `icon` shows; with it every row has a thumbnail. |
+| `href`, `onOpen`, `open` | A row is a link, or a button that opens a detail beside the list; `open` marks that row. A control in a `cell` takes its own click. |
+| `noun`, `empty`, `footer`, `layout` | As the Ledger's. |
+
+A sort orders rows inside their groups, largest first (words from A), then
+reversed, then the list's own order. On a phone (below 600px of list) a row is its thumbnail, title
+and lines, with the first end-aligned column's value beside the title. Measured
+in a real engine at 390, 1440 and 3360px (`harness/drive.mjs`, `?surface=records`).
+
+## A record's page
+
+The record's whole name is the top bar's control; its column holds the one item
+the page opened; that item's document stands beside it (`?surface=record`).
+
+```svelte
+<ShellControls>
+	<RecordSwitcher name="4. Banksia" current={4} noun="property" icon={House}
+		groups={[{ label: 'Owned', items: owned }, { label: 'Sold', items: sold }]}
+		all={{ label: 'All properties', href: '/property' }}
+		pages={[{ label: 'Overview', href: '/property/4', current: true }, …]} />
+</ShellControls>
+
+<div class="flex min-h-0 flex-1 gap-5">
+	<div class="min-w-0 flex-1"><!-- header card, one line a section --></div>
+	<ContextColumn title={opened.title} subtitle="Opened on what needs you"
+		onClose={reopenWhatNeedsYou} documentPane={lease ? leaseDoc : undefined}>
+		<!-- the opened section -->
+	</ContextColumn>
+</div>
+
+{#snippet leaseDoc()}
+	<DocumentPane title="Residential tenancy agreement" subtitle={lease.span} pages={lease.pages}
+		actions={[{ label: 'Download', icon: Download, href: lease.url, download: true }]}
+		onClose={() => (lease = null)} />
+{/snippet}
+```
+
+- **RecordSwitcher** is a raised button, its chevron inside, after the section's
+  name and a "/". Its menu searches by name and note, lists each group under its
+  heading with a thumbnail (`image`, else `icon`'s tile), opens on the open
+  record ticked, and ends on `all`. Every record is a link. `pages` are the
+  record's own tabs. It places nothing itself: put it in `ShellControls` with
+  whatever else the page sets in the bar.
+- **ContextColumn's record form** holds one item, never none: the page opens it
+  on what needs the viewer first and `onClose` reopens that. The item is as tall
+  as what it holds up to the column, then scrolls inside itself; a new `title`
+  swaps it in from the top. Its `documentPane` takes the column's place, and
+  stands beside the column as a third pane once the page's row is 1250px wide,
+  which a 1600px screen gives with the rail open. The row decides, not the
+  screen, so a folded rail or a narrow window is read as the room there is.
+- **DocumentPane** fills the height it is given: `pages` as one image URL a page,
+  or `page` and `pageCount` to draw them yourself, as `PageCanvas` takes them. A
+  page that fails to load says so and keeps its place. Another document swapped
+  into the same pane opens on its first page, fitted; so does one the column
+  moves beside itself as the row crosses 1250px.
+
 ## Hand-written forms
 
 The shadcn-svelte Formsnap wrapper set, over `sveltekit-superforms`:

package/dist/components/ui/context-column/context-column.svelte

@@ -5,13 +5,30 @@
 	import StatList from '../stat-list/stat-list.svelte';
 	import type { StatItem } from '../stat-list/stat-list.svelte';
 	import AppDialog from '../app-dialog/app-dialog.svelte';
+	import Panel from '../panel/panel.svelte';
+	import * as Tooltip from '../tooltip/index.js';
+	import IconAction from '../list-toolbar/icon-action.svelte';
 	import PanelRight from '@lucide/svelte/icons/panel-right';
+	import X from '@lucide/svelte/icons/x';
 
-	// The persistent right-hand context column, identical on every route. It holds
-	// one standing "At a glance" stat card and, on routes with a selectable table,
-	// the selected-row detail beneath it (a DetailPanel passed as the `detail`
-	// snippet). The stat card stays put; the detail flows in on select and leaves
-	// on deselect, so the column never changes shape.
+	// The persistent right-hand context column, identical on every route, in
+	// one of two forms.
+	//
+	// A list page's: one standing "At a glance" stat card and, beneath it, a
+	// Find or the selected row's detail (the `detail` snippet). The stat card
+	// stays put; the detail flows in on select and leaves on deselect, so the
+	// column never changes shape.
+	//
+	// A record page's (`title` and `children`): the one item the page has
+	// opened, a card with its title and a close button whose body scrolls
+	// inside it, as tall as what it holds up to the column. A click elsewhere
+	// on the page swaps it, and it is never empty: the page opens it on what
+	// needs the viewer first, and a close reopens that. An opened item's
+	// document (`documentPane`, a DocumentPane) takes the column's place, and
+	// stands beside it as a third pane once the page's row has room for three:
+	// 1250px of row, which a 1600px screen gives with the rail open. The row,
+	// not the screen, decides, so a folded rail or a narrow window is read
+	// as the room the page actually has.
 	//
 	// Width is clamped (shared-design-language §6) so a wide screen earns
 	// information, not emptiness. The column is a flex child of the page body row;
@@ -20,50 +37,130 @@
 	//
 	// Below xl (1280px) a fixed nav rail plus a ~400px column would crush the
 	// primary pane, so the standing `<aside>` stays hidden there — but its content
-	// does not vanish with it. A floating trigger opens the identical stats/detail
-	// pair in a dialogue instead: the column's shape is a desktop affordance, the
+	// does not vanish with it. A floating trigger opens the identical content in a
+	// dialogue instead: the column's shape is a desktop affordance, the
 	// information inside it is not.
+	type ListForm = {
+		stats: StatItem[];
+		statsTitle?: string;
+		statsInfo?: string;
+		detail?: Snippet;
+		title?: never;
+		subtitle?: never;
+		onClose?: never;
+		children?: never;
+		documentPane?: never;
+	};
+	type RecordForm = {
+		/** The opened item's name. */
+		title: string;
+		/** One line under it: why it is the one open. */
+		subtitle?: string;
+		/** Shows a close button. Reopen what needs the viewer: the column is never empty. */
+		onClose?: () => void;
+		/** The opened item. */
+		children: Snippet;
+		/** The opened item's document: a DocumentPane, in the column's place or beside it. */
+		documentPane?: Snippet;
+		stats?: never;
+		statsTitle?: never;
+		statsInfo?: never;
+		detail?: never;
+	};
+
 	let {
 		stats,
 		statsTitle = 'At a glance',
 		statsInfo,
 		detail,
+		title,
+		subtitle,
+		onClose,
+		children,
+		documentPane,
 		/** The landmark's accessible name. `<aside>` with no name is exposed as
 		    "complementary" alone — set this to identify which one. */
 		ariaLabel,
 		ref = $bindable(null),
 		class: className,
 		...restProps
-	}: WithElementRef<HTMLAttributes<HTMLElement>> & {
-		stats: StatItem[];
-		statsTitle?: string;
-		statsInfo?: string;
-		detail?: Snippet;
-		ariaLabel?: string;
-	} = $props();
+	}: Omit<WithElementRef<HTMLAttributes<HTMLElement>>, 'title' | 'children'> &
+		(ListForm | RecordForm) & { ariaLabel?: string } = $props();
 
 	let sheetOpen = $state(false);
+	/**
+	 * The page row the column stands in, by its width; null until read, so a
+	 * document is placed once rather than mounted in the column and moved.
+	 * Crossing the threshold later moves it, opening it afresh.
+	 */
+	let row = $state<number | null>(null);
+	$effect(() => {
+		const parent = ref?.parentElement;
+		if (!parent) return;
+		row = parent.clientWidth;
+		if (typeof ResizeObserver === 'undefined') return;
+		const observer = new ResizeObserver(([entry]) => (row = entry?.contentRect.width ?? 0));
+		observer.observe(parent);
+		return () => observer.disconnect();
+	});
+	/** Room for the document beside the column, not in its place. */
+	const BESIDE = 1250;
+	const beside = $derived(row !== null && row >= BESIDE);
+	const name = $derived(ariaLabel ?? title ?? statsTitle);
 </script>
 
+{#snippet close()}
+	<Tooltip.Provider delayDuration={150}>
+		<IconAction action={{ label: `Close ${title}`, icon: X, onclick: onClose }} />
+	</Tooltip.Provider>
+{/snippet}
+
+{#snippet item()}
+	{#key title}
+		<Panel
+			{title}
+			{subtitle}
+			action={onClose ? close : undefined}
+			pad={false}
+			scroll
+			class="max-h-full min-h-0"
+			data-slot="context-column-item"
+		>
+			{@render children?.()}
+		</Panel>
+	{/key}
+{/snippet}
+
 {#snippet body()}
-	<StatList items={stats} title={statsTitle} info={statsInfo} />
-	{#if detail}
-		{@render detail()}
+	{#if children}
+		{#if documentPane && row !== null && !beside}{@render documentPane()}{:else}{@render item()}{/if}
+	{:else}
+		<StatList items={stats ?? []} title={statsTitle} info={statsInfo} />
+		{#if detail}
+			{@render detail()}
+		{/if}
 	{/if}
 {/snippet}
 
 <aside
 	bind:this={ref}
-	aria-label={ariaLabel}
+	aria-label={ariaLabel ?? title}
 	class={cn(
 		'hidden max-h-full min-h-0 w-[clamp(360px,28vw,460px)] shrink-0 flex-col gap-5 xl:flex',
 		className
 	)}
+	data-slot="context-column"
 	{...restProps}
 >
 	{@render body()}
 </aside>
 
+{#if children && documentPane && beside}
+	<div class="hidden min-h-0 min-w-0 flex-1 flex-col xl:flex" data-slot="context-column-document">
+		{@render documentPane()}
+	</div>
+{/if}
+
 <!-- The reachable stand-in below xl. `size-11` (44px) rather than this
      package's usual 36px control row: this is the one control whose entire
      job is making otherwise-unreachable content reachable, so it earns the
@@ -72,13 +169,13 @@
 	type="button"
 	onclick={() => (sheetOpen = true)}
 	class="border-border bg-card text-muted-foreground hover:text-foreground ds-edge fixed right-4 bottom-[calc(1rem+env(safe-area-inset-bottom))] z-30 grid size-11 flex-none place-items-center rounded-full border xl:hidden"
-	aria-label={ariaLabel ? `Open ${ariaLabel}` : `Open ${statsTitle}`}
+	aria-label="Open {name}"
 >
 	<PanelRight class="size-4.5" />
 </button>
 
-<AppDialog bind:open={sheetOpen} title={ariaLabel ?? statsTitle} size="sm">
-	<div class="flex flex-col gap-5">
+<AppDialog bind:open={sheetOpen} title={name} size="sm">
+	<div class={cn('flex flex-col gap-5', children && documentPane && 'h-[70dvh]')}>
 		{@render body()}
 	</div>
 </AppDialog>

package/dist/components/ui/context-column/context-column.svelte.d.ts

@@ -2,11 +2,34 @@ import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 import { type WithElementRef } from '../../../utils.js';
 import type { StatItem } from '../stat-list/stat-list.svelte';
-type $$ComponentProps = WithElementRef<HTMLAttributes<HTMLElement>> & {
+type ListForm = {
     stats: StatItem[];
     statsTitle?: string;
     statsInfo?: string;
     detail?: Snippet;
+    title?: never;
+    subtitle?: never;
+    onClose?: never;
+    children?: never;
+    documentPane?: never;
+};
+type RecordForm = {
+    /** The opened item's name. */
+    title: string;
+    /** One line under it: why it is the one open. */
+    subtitle?: string;
+    /** Shows a close button. Reopen what needs the viewer: the column is never empty. */
+    onClose?: () => void;
+    /** The opened item. */
+    children: Snippet;
+    /** The opened item's document: a DocumentPane, in the column's place or beside it. */
+    documentPane?: Snippet;
+    stats?: never;
+    statsTitle?: never;
+    statsInfo?: never;
+    detail?: never;
+};
+type $$ComponentProps = Omit<WithElementRef<HTMLAttributes<HTMLElement>>, 'title' | 'children'> & (ListForm | RecordForm) & {
     ariaLabel?: string;
 };
 declare const ContextColumn: import("svelte").Component<$$ComponentProps, {}, "ref">;

package/dist/components/ui/document-pane/document-pane.svelte

@@ -0,0 +1,136 @@
+<script lang="ts">
+	/**
+	 * One document beside what it belongs to: titled, closable, its page
+	 * fitted to the pane, with paging and zoom. The record page's third pane
+	 * (ContextColumn's `document`), the ledger's document, the Fat
+	 * Controller's page. It fills the height it is given.
+	 *
+	 * The pages are image URLs, one a page; or draw them yourself through
+	 * `page` with `pageCount`, as PageCanvas takes them (a PDF canvas).
+	 *
+	 *     <DocumentPane title="Residential tenancy agreement"
+	 *       subtitle="House · 19 Jul 2025 to 18 Jan 2026" pages={leasePages}
+	 *       actions={[{ label: 'Download', icon: Download, href: leaseUrl, download: true }]}
+	 *       onClose={() => (lease = null)} />
+	 */
+	import { untrack, type Snippet } from 'svelte';
+	import { SvelteSet } from 'svelte/reactivity';
+	import X from '@lucide/svelte/icons/x';
+	import Panel from '../panel/panel.svelte';
+	import PageCanvas from '../page-canvas/page-canvas.svelte';
+	import type { PageCanvasRenderInfo } from '../page-canvas/types.js';
+	import * as Tooltip from '../tooltip/index.js';
+	import IconAction from '../list-toolbar/icon-action.svelte';
+	import type { ListIconAction } from '../list-toolbar/types.js';
+	import { cn } from '../../../utils.js';
+
+	let {
+		title,
+		subtitle,
+		pages,
+		pageCount,
+		page,
+		currentPage = $bindable(1),
+		zoom = $bindable(1),
+		actions = [],
+		onClose,
+		class: className
+	}: {
+		title: string;
+		/** One line under the title: what the document is of, and when. */
+		subtitle?: string;
+		/** 1-based. */
+		currentPage?: number;
+		zoom?: number;
+		/** Icon actions in the header, each named by its tooltip: download, open in a tab. */
+		actions?: ListIconAction[];
+		/** Shows a close button, last in the header. */
+		onClose?: () => void;
+		class?: string;
+	} & (
+		| {
+				/** One image URL a page. */
+				pages: readonly string[];
+				pageCount?: never;
+				page?: never;
+		  }
+		| {
+				pages?: never;
+				pageCount: number;
+				/** Draws one page at the size it is handed, and reports its own size once known. */
+				page: Snippet<[pageNumber: number, info: PageCanvasRenderInfo]>;
+		  }
+	) = $props();
+
+	const count = $derived(pages ? pages.length : (pageCount ?? 0));
+	/** Pages whose image did not load. */
+	const failed = new SvelteSet<number>();
+	/**
+	 * Which document this is. Another one opens on its first page, fitted, with
+	 * nothing failed: the pane is kept when the page swaps the document in it.
+	 */
+	const identity = $derived(pages ? pages.join('\n') : `${title}\n${pageCount}`);
+	let opened = untrack(() => identity);
+	$effect.pre(() => {
+		if (identity === opened) return;
+		opened = identity;
+		currentPage = 1;
+		zoom = 1;
+		failed.clear();
+	});
+</script>
+
+{#snippet image(n: number, info: PageCanvasRenderInfo)}
+	{#if failed.has(n)}
+		<div
+			class="bg-card border-border text-muted-foreground grid size-full place-items-center rounded-sm border p-4 text-center text-sm"
+		>
+			Page {n} could not be loaded
+		</div>
+	{:else}
+		<img
+			src={pages![n - 1]}
+			alt="{title}, page {n} of {count}"
+			class="border-border block size-full rounded-sm border object-contain"
+			onload={(e) => {
+				const img = e.currentTarget as HTMLImageElement;
+				info.reportSize(img.naturalWidth, img.naturalHeight);
+			}}
+			onerror={() => {
+				failed.add(n);
+				// A page's place keeps A4's proportions, so the pane still pages past it.
+				info.reportSize(210, 297);
+			}}
+		/>
+	{/if}
+{/snippet}
+
+{#snippet header()}
+	<Tooltip.Provider delayDuration={150}>
+		{#each actions as a (a.label)}<IconAction action={a} />{/each}
+		{#if onClose}
+			<IconAction action={{ label: `Close ${title}`, icon: X, onclick: onClose }} />
+		{/if}
+	</Tooltip.Provider>
+{/snippet}
+
+<Panel
+	{title}
+	{subtitle}
+	action={actions.length || onClose ? header : undefined}
+	pad={false}
+	scroll
+	class={cn('h-full min-h-0', className)}
+	aria-label={title}
+	data-slot="document-pane"
+>
+	{#key identity}
+		<PageCanvas
+			pageCount={count}
+			page={pages ? image : page!}
+			bind:currentPage
+			bind:zoom
+			class="bg-surface-2 h-full"
+		/>
+	{/key}
+</Panel>

package/dist/components/ui/document-pane/document-pane.svelte.d.ts

@@ -0,0 +1,43 @@
+/**
+     * One document beside what it belongs to: titled, closable, its page
+     * fitted to the pane, with paging and zoom. The record page's third pane
+     * (ContextColumn's `document`), the ledger's document, the Fat
+     * Controller's page. It fills the height it is given.
+     *
+     * The pages are image URLs, one a page; or draw them yourself through
+     * `page` with `pageCount`, as PageCanvas takes them (a PDF canvas).
+     *
+     *     <DocumentPane title="Residential tenancy agreement"
+     *       subtitle="House · 19 Jul 2025 to 18 Jan 2026" pages={leasePages}
+     *       actions={[{ label: 'Download', icon: Download, href: leaseUrl, download: true }]}
+     *       onClose={() => (lease = null)} />
+     */
+import { type Snippet } from 'svelte';
+import type { PageCanvasRenderInfo } from '../page-canvas/types.js';
+import type { ListIconAction } from '../list-toolbar/types.js';
+type $$ComponentProps = {
+    title: string;
+    /** One line under the title: what the document is of, and when. */
+    subtitle?: string;
+    /** 1-based. */
+    currentPage?: number;
+    zoom?: number;
+    /** Icon actions in the header, each named by its tooltip: download, open in a tab. */
+    actions?: ListIconAction[];
+    /** Shows a close button, last in the header. */
+    onClose?: () => void;
+    class?: string;
+} & ({
+    /** One image URL a page. */
+    pages: readonly string[];
+    pageCount?: never;
+    page?: never;
+} | {
+    pages?: never;
+    pageCount: number;
+    /** Draws one page at the size it is handed, and reports its own size once known. */
+    page: Snippet<[pageNumber: number, info: PageCanvasRenderInfo]>;
+});
+declare const DocumentPane: import("svelte").Component<$$ComponentProps, {}, "currentPage" | "zoom">;
+type DocumentPane = ReturnType<typeof DocumentPane>;
+export default DocumentPane;

package/dist/components/ui/document-pane/index.d.ts

@@ -0,0 +1,2 @@
+export { default as DocumentPane } from './document-pane.svelte';
+export { default } from './document-pane.svelte';

package/dist/components/ui/document-pane/index.js

@@ -0,0 +1,2 @@
+export { default as DocumentPane } from './document-pane.svelte';
+export { default } from './document-pane.svelte';

package/dist/components/ui/ledger/head-cell.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+	/**
+	 * One column's head in a head card. A sortable column's head is a button:
+	 * a click sorts (largest or newest first, unless `first` says otherwise),
+	 * again reverses, a third time restores the list's own order.
+	 */
+	import ChevronDown from '@lucide/svelte/icons/chevron-down';
+	import ChevronUp from '@lucide/svelte/icons/chevron-up';
+	import { cn } from '../../../utils.js';
+	import { CELL, END, HEAD_TEXT, RING_INSET } from './look.js';
+
+	let {
+		label,
+		name,
+		align = 'start',
+		sortable,
+		sort,
+		first = 'desc',
+		onsort,
+		owner,
+		class: className
+	}: {
+		/** What the head says. */
+		label: string;
+		/** The column's whole name, for the sort button's label. */
+		name: string;
+		align?: 'start' | 'end';
+		sortable: boolean;
+		/** This column's sort, when it is the one in force. */
+		sort: 'asc' | 'desc' | null;
+		/** The direction the first click sorts in. */
+		first?: 'asc' | 'desc';
+		onsort: () => void;
+		/** The `data-slot` prefix: the list that owns the head. */
+		owner: string;
+		class?: string;
+	} = $props();
+
+	const klass = $derived(cn(CELL, HEAD_TEXT, align === 'end' && END, className));
+</script>
+
+{#if sortable}
+	<button
+		type="button"
+		class={cn(
+			klass,
+			'group flex cursor-pointer items-center gap-0.5 rounded-md hover:text-foreground',
+			RING_INSET,
+			align === 'end' && 'justify-end',
+			sort && 'text-foreground'
+		)}
+		aria-label={sort
+			? `Sorted by ${name}, ${sort === 'desc' ? 'descending' : 'ascending'}. Click ${sort === first ? 'to reverse' : 'for the default order'}`
+			: `Sort by ${name}`}
+		onclick={onsort}
+		data-slot="{owner}-sort"
+		data-sort={sort ?? undefined}
+	>
+		<span class="truncate">{label}</span>
+		{#if sort === 'asc'}
+			<ChevronUp class="size-3 flex-none" />
+		{:else}
+			<ChevronDown
+				class={cn(
+					'size-3 flex-none',
+					!sort && 'opacity-0 group-hover:opacity-50 group-focus-visible:opacity-50'
+				)}
+			/>
+		{/if}
+	</button>
+{:else}
+	<span class={klass}>{label}</span>
+{/if}

package/dist/components/ui/ledger/head-cell.svelte.d.ts

@@ -0,0 +1,19 @@
+type $$ComponentProps = {
+    /** What the head says. */
+    label: string;
+    /** The column's whole name, for the sort button's label. */
+    name: string;
+    align?: 'start' | 'end';
+    sortable: boolean;
+    /** This column's sort, when it is the one in force. */
+    sort: 'asc' | 'desc' | null;
+    /** The direction the first click sorts in. */
+    first?: 'asc' | 'desc';
+    onsort: () => void;
+    /** The `data-slot` prefix: the list that owns the head. */
+    owner: string;
+    class?: string;
+};
+declare const HeadCell: import("svelte").Component<$$ComponentProps, {}, "">;
+type HeadCell = ReturnType<typeof HeadCell>;
+export default HeadCell;

package/dist/components/ui/ledger/index.d.ts

@@ -1,3 +1,3 @@
 export { default as Ledger } from './ledger.svelte';
 export { default } from './ledger.svelte';
-export type { LedgerColumn, LedgerOpenContext, LedgerOrigin, LedgerPeriod, LedgerPreferences, LedgerRow } from './types.js';
+export type { LedgerColumn, LedgerOpenContext, LedgerOrigin, LedgerPeriod, LedgerPreferences, LedgerRow, ListColumn } from './types.js';