@poodle64/ui 2026.10.4 → 2026.10.6

package/dist/components/ui/ledger/ledger-columns.svelte

@@ -1,8 +1,9 @@
-<script lang="ts">
+<script lang="ts" generics="P extends { columns: string[]; period?: LedgerPeriod }">
 	/**
 	 * The viewer's Columns menu: every column the module offers as a tick (the
-	 * running balance one more, always last), then the period rows group by.
-	 * An icon button named by its tooltip.
+	 * ledger's running balance one more, always last), then, where the list
+	 * groups by a period, the period. An icon button named by its tooltip.
+	 * The RecordList's menu is this one without the period.
 	 */
 	import Columns3 from '@lucide/svelte/icons/columns-3';
 	import { Button, buttonVariants } from '../button/index.js';
@@ -12,20 +13,23 @@
 	import * as Tooltip from '../tooltip/index.js';
 	import { cn } from '../../../utils.js';
 	import { LEDGER_PERIODS } from './ledger.js';
-	import type { LedgerPeriod, LedgerPreferences } from './types.js';
+	import type { LedgerPeriod } from './types.js';
 
 	let {
 		offered,
 		preferences,
 		note,
 		onchange,
-		onreset
+		onreset,
+		owner = 'ledger'
 	}: {
 		offered: { key: string; label: string; locked: boolean }[];
-		preferences: LedgerPreferences;
+		preferences: P;
 		note?: string;
-		onchange: (next: LedgerPreferences) => void;
+		onchange: (next: P) => void;
 		onreset: () => void;
+		/** The `data-slot` prefix: the list that owns the menu. */
+		owner?: string;
 	} = $props();
 
 	let open = $state(false);
@@ -48,6 +52,8 @@
 	}
 
 	const eyebrow = 'text-muted-foreground text-2xs tracking-eyebrow font-semibold uppercase';
+	/** The ledger's menu also holds its running balance and its grouping. */
+	const name = $derived(preferences.period ? 'Columns, balance and grouping' : 'Columns');
 </script>
 
 <Popover.Root bind:open>
@@ -58,17 +64,17 @@
 					<Popover.Trigger
 						{...props}
 						class={buttonVariants({ variant: open ? 'outline' : 'ghost', size: 'icon-sm' })}
-						aria-label="Columns, balance and grouping"
-						data-slot="ledger-columns-trigger"
+						aria-label={name}
+						data-slot="{owner}-columns-trigger"
 					>
 						<Columns3 />
 					</Popover.Trigger>
 				{/snippet}
 			</Tooltip.Trigger>
-			<Tooltip.Content side="bottom">Columns, balance and grouping</Tooltip.Content>
+			<Tooltip.Content side="bottom">{name}</Tooltip.Content>
 		</Tooltip.Root>
 	</Tooltip.Provider>
-	<Popover.Content align="end" class="w-80 p-0" data-slot="ledger-columns">
+	<Popover.Content align="end" class="w-80 p-0" data-slot="{owner}-columns">
 		<div class="flex flex-col px-2 pt-2.5 pb-2">
 			<span class={cn(eyebrow, 'px-1.5 pb-1.5')}>Columns</span>
 			{#each offered as c (c.key)}
@@ -89,16 +95,18 @@
 				</label>
 			{/each}
 		</div>
-		<div class="border-border flex flex-col gap-2 border-t px-3.5 pt-2.5 pb-3">
-			<span class={eyebrow}>Group by</span>
-			<Segmented
-				label="Group by"
-				options={LEDGER_PERIODS}
-				bind:value={() => preferences.period, (period) => onchange({ ...preferences, period })}
-				class="grid w-full grid-cols-2"
-			/>
-			<span class="text-muted-foreground text-xs">{HINT[preferences.period]}</span>
-		</div>
+		{#if preferences.period}
+			<div class="border-border flex flex-col gap-2 border-t px-3.5 pt-2.5 pb-3">
+				<span class={eyebrow}>Group by</span>
+				<Segmented
+					label="Group by"
+					options={LEDGER_PERIODS}
+					bind:value={() => preferences.period!, (period) => onchange({ ...preferences, period })}
+					class="grid w-full grid-cols-2"
+				/>
+				<span class="text-muted-foreground text-xs">{HINT[preferences.period]}</span>
+			</div>
+		{/if}
 		<div class="bg-surface-2 border-border flex items-center gap-2 border-t py-2 pr-2 pl-3.5">
 			<span class="text-muted-foreground min-w-0 flex-1 text-xs">{note ?? ''}</span>
 			<Button variant="ghost" size="sm" onclick={onreset}>Reset</Button>

package/dist/components/ui/ledger/ledger-columns.svelte.d.ts

@@ -1,15 +1,52 @@
-import type { LedgerPreferences } from './types.js';
-type $$ComponentProps = {
-    offered: {
-        key: string;
-        label: string;
-        locked: boolean;
-    }[];
-    preferences: LedgerPreferences;
-    note?: string;
-    onchange: (next: LedgerPreferences) => void;
-    onreset: () => void;
+import type { LedgerPeriod } from './types.js';
+declare function $$render<P extends {
+    columns: string[];
+    period?: LedgerPeriod;
+}>(): {
+    props: {
+        offered: {
+            key: string;
+            label: string;
+            locked: boolean;
+        }[];
+        preferences: P;
+        note?: string;
+        onchange: (next: P) => void;
+        onreset: () => void;
+        /** The `data-slot` prefix: the list that owns the menu. */
+        owner?: string;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
 };
-declare const LedgerColumns: import("svelte").Component<$$ComponentProps, {}, "">;
-type LedgerColumns = ReturnType<typeof LedgerColumns>;
+declare class __sveltets_Render<P extends {
+    columns: string[];
+    period?: LedgerPeriod;
+}> {
+    props(): ReturnType<typeof $$render<P>>['props'];
+    events(): ReturnType<typeof $$render<P>>['events'];
+    slots(): ReturnType<typeof $$render<P>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <P extends {
+        columns: string[];
+        period?: LedgerPeriod;
+    }>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<P>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<P>['props']>, ReturnType<__sveltets_Render<P>['events']>, ReturnType<__sveltets_Render<P>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<P>['bindings']>;
+    } & ReturnType<__sveltets_Render<P>['exports']>;
+    <P extends {
+        columns: string[];
+        period?: LedgerPeriod;
+    }>(internal: unknown, props: ReturnType<__sveltets_Render<P>['props']> & {}): ReturnType<__sveltets_Render<P>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const LedgerColumns: $$IsomorphicComponent;
+type LedgerColumns<P extends {
+    columns: string[];
+    period?: LedgerPeriod;
+}> = InstanceType<typeof LedgerColumns<P>>;
 export default LedgerColumns;

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

@@ -21,6 +21,12 @@ export declare function groupRows<R extends LedgerRow>(rows: readonly R[], perio
  * rows without a value come last either way, and equal values keep newest first.
  */
 export declare function sortRows<R extends LedgerRow>(rows: readonly R[], value: (row: R) => number | string | null | undefined, dir: 1 | -1): R[];
+/**
+ * Any list's rows ordered by a value, `dir` 1 ascending and -1 descending:
+ * numbers as numbers, text with its numerals read as numbers. Rows without a
+ * value come last either way, and equal values keep the order they came in.
+ */
+export declare function orderBy<R>(rows: readonly R[], value: (row: R) => number | string | null | undefined, dir: 1 | -1): R[];
 /** Whole cents, so a group's sum carries no float error. */
 export declare function cents(value: number | string | null | undefined): number;
 /** Money as the ledger prints it: in plain, out in brackets. */

package/dist/components/ui/ledger/ledger.js

@@ -127,7 +127,15 @@ export function groupRows(rows, period, fyStart = 7) {
  * rows without a value come last either way, and equal values keep newest first.
  */
 export function sortRows(rows, value, dir) {
-    const keyed = (groupRows(rows, 'none')[0]?.rows ?? []).map((row) => ({ row, v: value(row) }));
+    return orderBy(groupRows(rows, 'none')[0]?.rows ?? [], value, dir);
+}
+/**
+ * Any list's rows ordered by a value, `dir` 1 ascending and -1 descending:
+ * numbers as numbers, text with its numerals read as numbers. Rows without a
+ * value come last either way, and equal values keep the order they came in.
+ */
+export function orderBy(rows, value, dir) {
+    const keyed = rows.map((row) => ({ row, v: value(row) }));
     const missing = (v) => v === null || v === undefined || v === '';
     keyed.sort((a, b) => {
         if (missing(a.v) || missing(b.v))

package/dist/components/ui/ledger/ledger.svelte

@@ -8,7 +8,7 @@
 	 *
 	 * It fills its parent's height and scrolls its own rows, so the head card
 	 * stays at the top: give it a bounded parent (`flex-1 min-h-0` in a
-	 * full-height page). Width picks the layout: a phone's list below 600px, the
+	 * full-height page). Width picks the layout: a phone's list below 480px, the
 	 * wide column widths from 1200px.
 	 */
 	import type { Snippet } from 'svelte';
@@ -18,14 +18,33 @@
 	import { DEV } from 'esm-env';
 	import ChevronDown from '@lucide/svelte/icons/chevron-down';
 	import ChevronRight from '@lucide/svelte/icons/chevron-right';
-	import ChevronUp from '@lucide/svelte/icons/chevron-up';
 	import Paperclip from '@lucide/svelte/icons/paperclip';
 	import X from '@lucide/svelte/icons/x';
 	import Button from '../button/button.svelte';
 	import { Checkbox } from '../checkbox/index.js';
 	import EmptyState from '../empty-state/empty-state.svelte';
 	import StatusBadge from '../status-badge/status-badge.svelte';
+	import ListToolbar from '../list-toolbar/list-toolbar.svelte';
+	import type { ListAction, ListIconAction } from '../list-toolbar/types.js';
+	import HeadCell from './head-cell.svelte';
 	import LedgerColumns from './ledger-columns.svelte';
+	import {
+		CARD,
+		CELL,
+		END,
+		GROUP,
+		GROUP_LABEL,
+		HEAD,
+		HEAD_GROUND,
+		RING,
+		RING_INSET,
+		ROW_HEIGHT,
+		ROW_TEXT,
+		RULE,
+		THROUGH,
+		groupSpacing,
+		listLayout
+	} from './look.js';
 	import { AU_LOCALE } from '../../../format.js';
 	import { cn } from '../../../utils.js';
 	import {
@@ -58,6 +77,8 @@
 		title,
 		meta,
 		actions,
+		tools = [],
+		action,
 		selected = $bindable([]),
 		bulkActions,
 		open = $bindable(null),
@@ -89,8 +110,12 @@
 		title?: string;
 		/** Beside the title. Defaults to the row count. */
 		meta?: string;
-		/** The toolbar's own actions, after the Columns menu: export, add. */
+		/** The toolbar's own controls, after the Columns menu and before `tools`. */
 		actions?: Snippet;
+		/** The toolbar's icon actions, each named by its tooltip: export, print. */
+		tools?: ListIconAction[];
+		/** The toolbar's one labelled action, last: add. */
+		action?: ListAction;
 		/** The ticked rows' ids. Ticking needs `bulkActions`. */
 		selected?: Id[];
 		/** What the ticked rows allow, in the bar that replaces the toolbar. */
@@ -135,21 +160,6 @@
 	/** Ticking adds a checkbox to the gutter, so it widens to hold the chevron beside it. */
 	const GUTTER = '2.5rem';
 	const GUTTER_TICKS = '3.5rem';
-	const CELL = 'min-w-0 truncate px-2';
-	const END = 'pr-5 text-right';
-	/** The row's height rides the package's density ramp: 3.5rem, 3rem compact. */
-	const ROW_HEIGHT = 'min-height: calc(var(--ds-control-height-md) + 1rem);';
-	/** The house focus ring, and the same ring drawn inside a control that fills a clipped card. */
-	const RING = 'focus-visible:ring-ring/50 focus-visible:ring-3 focus-visible:outline-none';
-	const RING_INSET =
-		'focus-visible:inset-ring-ring/50 focus-visible:inset-ring-3 focus-visible:outline-none';
-	/**
-	 * A cell over an openable row lets a click through to the row beneath it, and
-	 * gives one back to any control a module's cell renders, so a link or a button
-	 * in a cell is never silently inert.
-	 */
-	const THROUGH =
-		'pointer-events-none [&_:is(a,button,input,select,textarea,label,summary,[role=button],[role=link],[role=checkbox],[tabindex])]:pointer-events-auto';
 
 	// ── Columns: the ledger's own three, the module's, the balance last ──
 	const resolved = $derived.by(() => {
@@ -177,7 +187,9 @@
 	});
 
 	const defaults = $derived<LedgerPreferences>({
-		columns: resolved.filter((c) => !c.locked && c.on).map((c) => c.key),
+		columns: resolved
+			.filter((c) => !c.locked && (c.on === true || (c.on === 'wide' && WIDE)))
+			.map((c) => c.key),
 		period: 'month'
 	});
 	/** What the consumer kept, read field by field: a stale or foreign key falls back. */
@@ -201,15 +213,7 @@
 	/** The bars above the list end where its cards do: clear of its scroll bar's gutter. */
 	const edge = $derived(`calc(0.5rem + ${Math.max(0, listOuter - listInner)}px)`);
 	const mode = $derived(
-		layout !== 'auto'
-			? layout
-			: width === 0
-				? 'narrow'
-				: width < 600
-					? 'phone'
-					: width >= 1200
-						? 'wide'
-						: 'narrow'
+		layout !== 'auto' ? layout : listLayout(width)
 	);
 	const WIDE = $derived(mode === 'wide');
 	const PHONE = $derived(mode === 'phone');
@@ -638,7 +642,7 @@
 		<div
 			class={cn(
 				'relative grid grid-cols-[minmax(0,1fr)_auto] items-center gap-x-3 px-3 py-2 text-sm',
-				!first && 'border-border/60 border-t',
+				!first && RULE,
 				openable && 'hover:bg-accent/40'
 			)}
 			style={ROW_HEIGHT}
@@ -677,8 +681,9 @@
 	{:else}
 		<div
 			class={cn(
-				'relative grid items-stretch text-[0.8125rem]',
-				!first && 'border-border/60 border-t',
+				'relative grid items-stretch',
+				ROW_TEXT,
+				!first && RULE,
 				on && 'bg-primary/9',
 				openable && !on && 'hover:bg-accent/40'
 			)}
@@ -726,12 +731,13 @@
 	{@const net = single ? '' : money(t.net)}
 	{@const netTone = t.net > 0 ? 'text-status-success' : 'text-muted-foreground'}
 	{@const klass = cn(
-		'text-muted-foreground h-6.5 w-full text-left text-xs',
+		GROUP,
+		'w-full text-left',
 		PHONE ? 'flex items-center gap-2 px-0.5' : 'grid items-center px-px'
 	)}
 	<!-- The spacing is padding, not margin, so the measured height is the height it takes. -->
 	<div
-		class={cn('pb-1.5', gi > 0 && 'pt-4.5')}
+		class={groupSpacing(gi)}
 		{@attach measure(`h:${key}`, gi > 0 ? 'head' : undefined)}
 	>
 		<!-- A day heads its rows and does not close; any other period's label opens and closes it. -->
@@ -770,7 +776,7 @@
 		{#if !BY_DAY}<ChevronRight
 				class={cn('size-3.5 flex-none transition-transform', isOpen && 'rotate-90')}
 			/>{/if}
-		<span class="text-[0.8125rem] font-semibold whitespace-nowrap">{label}</span>
+		<span class={cn(GROUP_LABEL, 'whitespace-nowrap')}>{label}</span>
 		<span class="min-w-0 flex-1 truncate">{metaText}</span>
 		<span class={cn('tabular-nums', netTone)}>{net}</span>
 	{:else}
@@ -786,7 +792,7 @@
 			class="flex min-w-0 items-baseline gap-3 overflow-hidden px-2 whitespace-nowrap"
 			style="grid-column: 2 / {cAmount};"
 		>
-			<span class="text-[0.8125rem] font-semibold">{label}</span>
+			<span class={GROUP_LABEL}>{label}</span>
 			<span class="min-w-0 truncate">{metaText}</span>
 		</span>
 		<span class={cn(CELL, END, 'tabular-nums', netTone)} style="grid-column: {cAmount};">{net}</span
@@ -835,18 +841,15 @@
 			</Button>
 		</div>
 	{:else}
-		<div
-			role="toolbar"
-			aria-label="This ledger"
-			class="flex min-h-11 flex-none items-center gap-2 px-2 pb-2"
-			style:padding-right={edge}
+		<ListToolbar
+			{title}
+			meta={meta ?? count(rows.length)}
+			{tools}
+			{action}
+			label="This ledger"
+			style="padding-right: {edge};"
 			data-slot="ledger-toolbar"
 		>
-			<span class="flex min-w-0 items-baseline gap-2.5 overflow-hidden whitespace-nowrap">
-				{#if title}<span class="text-body flex-none font-semibold">{title}</span>{/if}
-				<span class="text-muted-foreground truncate text-sm">{meta ?? count(rows.length)}</span>
-			</span>
-			<span class="min-w-0 flex-1"></span>
 			<LedgerColumns
 				offered={resolved.map((c) => ({ key: c.key, label: c.label, locked: c.locked }))}
 				preferences={prefs}
@@ -855,7 +858,7 @@
 				onreset={() => setPreferences(defaults)}
 			/>
 			{@render actions?.()}
-		</div>
+		</ListToolbar>
 	{/if}
 
 	<div
@@ -868,9 +871,9 @@
 		data-slot="ledger-rows"
 	>
 		{#if !PHONE}
-			<div class="bg-background sticky top-0 z-3 pb-3" bind:offsetHeight={headHeight}>
+			<div class={HEAD_GROUND} bind:offsetHeight={headHeight}>
 				<div
-					class="bg-card border-border grid h-9 items-center rounded-lg border"
+					class={HEAD}
 					style:grid-template-columns={template}
 					data-slot="ledger-head"
 				>
@@ -905,46 +908,16 @@
 						{/if}
 					</span>
 					{#each shown as c (c.key)}
-						{@const sortable = !!sorter(c)}
 						{@const mine = activeSort?.key === c.key ? activeSort : null}
-						{@const label = c.head ?? c.label}
-						{@const headClass = cn(
-							CELL,
-							'text-muted-foreground text-2xs tracking-eyebrow font-semibold uppercase',
-							c.align === 'end' && END
-						)}
-						{#if sortable}
-							<button
-								type="button"
-								class={cn(
-									headClass,
-									'group flex cursor-pointer items-center gap-0.5 rounded-md hover:text-foreground',
-									RING_INSET,
-									c.align === 'end' && 'justify-end',
-									mine && 'text-foreground'
-								)}
-								aria-label={mine
-									? `Sorted by ${c.label}, ${mine.dir === -1 ? 'descending' : 'ascending'}. Click ${mine.dir === -1 ? 'to reverse' : 'for the default order'}`
-									: `Sort by ${c.label}`}
-								onclick={() => sortBy(c.key)}
-								data-slot="ledger-sort"
-								data-sort={mine ? (mine.dir === -1 ? 'desc' : 'asc') : undefined}
-							>
-								<span class="truncate">{label}</span>
-								{#if mine?.dir === 1}
-									<ChevronUp class="size-3 flex-none" />
-								{:else}
-									<ChevronDown
-										class={cn(
-											'size-3 flex-none',
-											!mine && 'opacity-0 group-hover:opacity-50 group-focus-visible:opacity-50'
-										)}
-									/>
-								{/if}
-							</button>
-						{:else}
-							<span class={headClass}>{label}</span>
-						{/if}
+						<HeadCell
+							label={c.head ?? c.label}
+							name={c.label}
+							align={c.align}
+							sortable={!!sorter(c)}
+							sort={mine ? (mine.dir === -1 ? 'desc' : 'asc') : null}
+							onsort={() => sortBy(c.key)}
+							owner="ledger"
+						/>
 					{/each}
 				</div>
 			</div>
@@ -974,7 +947,7 @@
 						<!-- A card the window cuts keeps no edge at the cut, which is out of view. -->
 						<div
 							class={cn(
-								'bg-card border-border overflow-hidden rounded-lg border',
+								CARD,
 								block.cutTop && 'rounded-t-none border-t-0',
 								block.cutBottom && 'rounded-b-none border-b-0'
 							)}

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

@@ -7,11 +7,12 @@
      *
      * It fills its parent's height and scrolls its own rows, so the head card
      * stays at the top: give it a bounded parent (`flex-1 min-h-0` in a
-     * full-height page). Width picks the layout: a phone's list below 600px, the
+     * full-height page). Width picks the layout: a phone's list below 480px, the
      * wide column widths from 1200px.
      */
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
+import type { ListAction, ListIconAction } from '../list-toolbar/types.js';
 import type { LedgerColumn, LedgerOpenContext, LedgerPreferences, LedgerRow } from './types.js';
 declare function $$render<R extends LedgerRow>(): {
     props: Omit<HTMLAttributes<HTMLDivElement>, "title"> & {
@@ -33,8 +34,12 @@ declare function $$render<R extends LedgerRow>(): {
         title?: string;
         /** Beside the title. Defaults to the row count. */
         meta?: string;
-        /** The toolbar's own actions, after the Columns menu: export, add. */
+        /** The toolbar's own controls, after the Columns menu and before `tools`. */
         actions?: Snippet;
+        /** The toolbar's icon actions, each named by its tooltip: export, print. */
+        tools?: ListIconAction[];
+        /** The toolbar's one labelled action, last: add. */
+        action?: ListAction;
         /** The ticked rows' ids. Ticking needs `bulkActions`. */
         selected?: R["id"][];
         /** What the ticked rows allow, in the bar that replaces the toolbar. */

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

@@ -0,0 +1,41 @@
+/**
+ * The ledger's look, held once for every list that wears it: the Ledger and
+ * the RecordList. A head card, row cards with hairlines between rows, and each
+ * group's label on the page ground.
+ */
+/**
+ * The layout a list's own width picks: a phone's list below 480px, the wide
+ * tracks from 1200px, the narrow tracks between. The list's width, not the
+ * window's: beside a ContextColumn at 1280px with the rail open it is 588px,
+ * which is a laptop's list, not a phone's.
+ */
+export declare const PHONE_BELOW = 480;
+export declare const WIDE_FROM = 1200;
+export declare function listLayout(width: number): 'phone' | 'narrow' | 'wide';
+export declare const CELL = "min-w-0 truncate px-2";
+export declare const END = "pr-5 text-right";
+/** The row's height rides the package's density ramp: 3.5rem, 3rem compact. */
+export declare const ROW_HEIGHT = "min-height: calc(var(--ds-control-height-md) + 1rem);";
+/** The row text's size, between the body and the small print. */
+export declare const ROW_TEXT = "text-[0.8125rem]";
+/** The hairline between two rows of one card. */
+export declare const RULE = "border-border/60 border-t";
+/** The card that holds a group's rows. */
+export declare const CARD = "bg-card border-border overflow-hidden rounded-lg border";
+/** The head card, and the ground behind it that hides the rows scrolling under it. */
+export declare const HEAD_GROUND = "bg-background sticky top-0 z-3 pb-3";
+export declare const HEAD = "bg-card border-border grid h-9 items-center rounded-lg border";
+export declare const HEAD_TEXT = "text-muted-foreground text-2xs tracking-eyebrow font-semibold uppercase";
+/** A group's label line on the ground; the spacing is padding, so a measured height is the height it takes. */
+export declare const GROUP = "text-muted-foreground h-6.5 text-xs";
+export declare const GROUP_LABEL = "text-[0.8125rem] font-semibold";
+export declare const groupSpacing: (index: number) => "pt-4.5 pb-1.5" | "pb-1.5";
+/** The house focus ring, and the same ring drawn inside a control that fills a clipped card. */
+export declare const RING = "focus-visible:ring-ring/50 focus-visible:ring-3 focus-visible:outline-none";
+export declare const RING_INSET = "focus-visible:inset-ring-ring/50 focus-visible:inset-ring-3 focus-visible:outline-none";
+/**
+ * A cell over an openable row lets a click through to the row beneath it, and
+ * gives one back to any control a module's cell renders, so a link or a button
+ * in a cell is never silently inert.
+ */
+export declare const THROUGH = "pointer-events-none [&_:is(a,button,input,select,textarea,label,summary,[role=button],[role=link],[role=checkbox],[tabindex])]:pointer-events-auto";

package/dist/components/ui/ledger/look.js

@@ -0,0 +1,43 @@
+/**
+ * The ledger's look, held once for every list that wears it: the Ledger and
+ * the RecordList. A head card, row cards with hairlines between rows, and each
+ * group's label on the page ground.
+ */
+/**
+ * The layout a list's own width picks: a phone's list below 480px, the wide
+ * tracks from 1200px, the narrow tracks between. The list's width, not the
+ * window's: beside a ContextColumn at 1280px with the rail open it is 588px,
+ * which is a laptop's list, not a phone's.
+ */
+export const PHONE_BELOW = 480;
+export const WIDE_FROM = 1200;
+export function listLayout(width) {
+    return width === 0 ? 'narrow' : width < PHONE_BELOW ? 'phone' : width >= WIDE_FROM ? 'wide' : 'narrow';
+}
+export const CELL = 'min-w-0 truncate px-2';
+export const END = 'pr-5 text-right';
+/** The row's height rides the package's density ramp: 3.5rem, 3rem compact. */
+export const ROW_HEIGHT = 'min-height: calc(var(--ds-control-height-md) + 1rem);';
+/** The row text's size, between the body and the small print. */
+export const ROW_TEXT = 'text-[0.8125rem]';
+/** The hairline between two rows of one card. */
+export const RULE = 'border-border/60 border-t';
+/** The card that holds a group's rows. */
+export const CARD = 'bg-card border-border overflow-hidden rounded-lg border';
+/** The head card, and the ground behind it that hides the rows scrolling under it. */
+export const HEAD_GROUND = 'bg-background sticky top-0 z-3 pb-3';
+export const HEAD = 'bg-card border-border grid h-9 items-center rounded-lg border';
+export const HEAD_TEXT = 'text-muted-foreground text-2xs tracking-eyebrow font-semibold uppercase';
+/** A group's label line on the ground; the spacing is padding, so a measured height is the height it takes. */
+export const GROUP = 'text-muted-foreground h-6.5 text-xs';
+export const GROUP_LABEL = 'text-[0.8125rem] font-semibold';
+export const groupSpacing = (index) => (index > 0 ? 'pt-4.5 pb-1.5' : 'pb-1.5');
+/** The house focus ring, and the same ring drawn inside a control that fills a clipped card. */
+export const RING = 'focus-visible:ring-ring/50 focus-visible:ring-3 focus-visible:outline-none';
+export const RING_INSET = 'focus-visible:inset-ring-ring/50 focus-visible:inset-ring-3 focus-visible:outline-none';
+/**
+ * A cell over an openable row lets a click through to the row beneath it, and
+ * gives one back to any control a module's cell renders, so a link or a button
+ * in a cell is never silently inert.
+ */
+export const THROUGH = 'pointer-events-none [&_:is(a,button,input,select,textarea,label,summary,[role=button],[role=link],[role=checkbox],[tabindex])]:pointer-events-auto';

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

@@ -45,30 +45,31 @@ export interface LedgerRow {
     } | null;
 }
 /**
- * A column the module offers. The keys `date`, `title`, `amount` and `balance`
- * are the ledger's own cells: list one to rename or resize it (and, for
- * `balance`, to offer the running balance at all, with `text` saying what it
- * counts). Date, title and amount always show, first and in that order; the
- * balance is always last. Every other key is the module's, in its order.
+ * A column a module offers a list in the ledger's look: the Ledger, and the
+ * RecordList for rows that are not money.
  */
-export interface LedgerColumn<R extends LedgerRow = LedgerRow> {
+export interface ListColumn<R> {
     key: string;
     /** Its name in the Columns menu, and its head unless `head` is shorter. */
     label: string;
     head?: string;
-    /** A grid track, or one for a narrow ledger and one for a wide one. */
+    /** A grid track, or one for a narrow list and one for a wide one (1200px and up). */
     width?: string | {
         narrow: string;
         wide: string;
     };
     align?: 'start' | 'end';
-    /** Ticked until the viewer chooses. Defaults to true, and to false for `balance`. */
-    on?: boolean;
+    /**
+     * Ticked until the viewer chooses. Defaults to true. `'wide'` is ticked
+     * only on a wide list, so extra width shows more columns and the viewer
+     * can still tick it back on a narrow one.
+     */
+    on?: boolean | 'wide';
     /**
      * What a click on the head sorts this column by: the real value, a number
      * rather than its display text. Without it a column with `text` sorts by
-     * that text and a `cell`-only column does not sort. The running balance
-     * never sorts, since it depends on the order.
+     * that text and a `cell`-only column does not sort. The ledger's running
+     * balance never sorts, since it depends on the order.
      */
     sort?: (row: R) => number | string | null | undefined;
     /** A plain cell. */
@@ -79,6 +80,15 @@ export interface LedgerColumn<R extends LedgerRow = LedgerRow> {
      */
     cell?: Snippet<[R]>;
 }
+/**
+ * A column the module offers the ledger. The keys `date`, `title`, `amount`
+ * and `balance` are the ledger's own cells: list one to rename or resize it
+ * (and, for `balance`, to offer the running balance at all, with `text` saying
+ * what it counts). Date, title and amount always show, first and in that
+ * order; the balance is always last, and off until ticked. Every other key is
+ * the module's, in its order.
+ */
+export type LedgerColumn<R extends LedgerRow = LedgerRow> = ListColumn<R>;
 /** The viewer's own choices, which the consumer persists. */
 export interface LedgerPreferences {
     /** The ticked columns' keys, `balance` included. */