@poodle64/ui 2026.10.3 → 2026.10.5

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';

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

@@ -18,14 +18,32 @@
 	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
+	} from './look.js';
 	import { AU_LOCALE } from '../../../format.js';
 	import { cn } from '../../../utils.js';
 	import {
@@ -58,6 +76,8 @@
 		title,
 		meta,
 		actions,
+		tools = [],
+		action,
 		selected = $bindable([]),
 		bulkActions,
 		open = $bindable(null),
@@ -89,8 +109,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 +159,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 +186,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. */
@@ -220,9 +231,9 @@
 	/** What a column sorts by; the running balance depends on the order, so never it. */
 	const sorter = (c: { key: string; sort?: LedgerColumn<R>['sort']; text?: LedgerColumn<R>['text'] }) =>
 		c.key === 'balance' ? undefined : (c.sort ?? c.text);
-	/** Click a head to sort by it, largest or newest first; again to reverse. */
+	/** Click a head to sort by it, largest or newest first; again to reverse; a third time back to the default order. */
 	function sortBy(key: string) {
-		sort = sort?.key === key ? { key, dir: sort.dir === 1 ? -1 : 1 } : { key, dir: -1 };
+		sort = sort?.key !== key ? { key, dir: -1 } : sort.dir === -1 ? { key, dir: 1 } : null;
 	}
 	/** The sort in force: a column the viewer has since unticked no longer sorts. */
 	const activeSort = $derived.by(() => {
@@ -231,8 +242,8 @@
 			? sort
 			: null;
 	});
-	/** Until the viewer sorts, rows sit newest first in their period's groups. */
-	const grouped = $derived(prefs.period !== 'none' && !activeSort);
+	/** A sort orders rows inside their period's groups; only `none` is the flat list. */
+	const grouped = $derived(prefs.period !== 'none');
 	const BY_DAY = $derived(grouped && prefs.period === 'day');
 
 	const shown = $derived(
@@ -262,8 +273,9 @@
 	});
 	const groups = $derived.by(() => {
 		const by = activeSort && sorter(resolved.find((c) => c.key === activeSort.key)!);
-		if (activeSort && by) return [{ key: '', rows: sortRows(rows, by, activeSort.dir) }];
-		return groupRows(rows, prefs.period, fy);
+		const base = groupRows(rows, prefs.period, fy);
+		if (!activeSort || !by) return base;
+		return base.map((g) => ({ key: g.key, rows: sortRows(g.rows, by, activeSort.dir) }));
 	});
 	/** Closed groups, keyed with their period so a new period starts open. */
 	const closed = new SvelteSet<string>();
@@ -637,7 +649,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}
@@ -676,8 +688,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'
 			)}
@@ -725,12 +738,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. -->
@@ -769,7 +783,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}
@@ -785,7 +799,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
@@ -834,18 +848,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}
@@ -854,7 +865,7 @@
 				onreset={() => setPreferences(defaults)}
 			/>
 			{@render actions?.()}
-		</div>
+		</ListToolbar>
 	{/if}
 
 	<div
@@ -867,9 +878,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"
 				>
@@ -904,46 +915,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 to reverse`
-									: `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>
@@ -973,7 +954,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

@@ -12,6 +12,7 @@
      */
 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,32 @@
+/**
+ * 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.
+ */
+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,32 @@
+/**
+ * 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.
+ */
+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';