@poodle64/ui 2026.10.6 → 2026.10.8

package/README.md

@@ -96,6 +96,7 @@ rather than rebuilding it:
 | `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.                                                                                                                                                                                                                                                      |
+| `about` | About content for a page or dialogue: `name`, `version`, optional `description`/`brand`/`links`, and explicitly selected non-sensitive `diagnostics`. Never pass settings or environment objects. `writeClipboard` accepts the host clipboard API directly; otherwise the browser API is used. Mount the shared Toaster once for copy success/failure. |
 | `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 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.                                                                                                                                                                                                       |

package/dist/components/ui/about/about.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { toast } from 'svelte-sonner';
+	import Panel from '../panel/panel.svelte';
+	import FactGrid from '../fact-grid/fact-grid.svelte';
+	import Button from '../button/button.svelte';
+
+	let { name, version, description, brand, links = [], diagnostics = {},
+		writeClipboard = (text: string) => navigator.clipboard.writeText(text) }: {
+		name: string;
+		version: string;
+		description?: string;
+		brand?: Snippet;
+		links?: readonly { label: string; href: string }[];
+		/** Explicit non-sensitive fields, never a settings/environment object. */
+		diagnostics?: Record<string, string>;
+		/** Pass the host's clipboard API directly where the browser API is unavailable. */
+		writeClipboard?: (text: string) => Promise<void>;
+	} = $props();
+	const facts = $derived([
+		{ key: 'version', label: 'Version', value: version },
+		...Object.entries(diagnostics).map(([label, value]) => ({ key: `diagnostic:${label}`, label, value }))
+	]);
+
+	async function copyDiagnostics() {
+		try {
+			await writeClipboard(`${name}\n${facts.map((fact) => `${fact.label}: ${fact.value}`).join('\n')}`);
+			toast.success('Diagnostics copied');
+		} catch {
+			toast.error('Could not copy diagnostics', { description: 'Clipboard access is unavailable.' });
+		}
+	}
+</script>
+
+<Panel title={name} {description}>
+	<div class="flex flex-col gap-4">
+		{#if brand}{@render brand()}{/if}
+		<FactGrid {facts} />
+		<div class="flex flex-wrap gap-2">
+			{#each links as link}
+				<Button variant="outline" href={link.href} target="_blank" rel="noopener noreferrer">{link.label}</Button>
+			{/each}
+			<Button variant="outline" onclick={copyDiagnostics}>Copy diagnostics</Button>
+		</div>
+	</div>
+</Panel>

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

@@ -0,0 +1,18 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    name: string;
+    version: string;
+    description?: string;
+    brand?: Snippet;
+    links?: readonly {
+        label: string;
+        href: string;
+    }[];
+    /** Explicit non-sensitive fields, never a settings/environment object. */
+    diagnostics?: Record<string, string>;
+    /** Pass the host's clipboard API directly where the browser API is unavailable. */
+    writeClipboard?: (text: string) => Promise<void>;
+};
+declare const About: import("svelte").Component<$$ComponentProps, {}, "">;
+type About = ReturnType<typeof About>;
+export default About;

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

@@ -0,0 +1,2 @@
+export { default as About } from './about.svelte';
+export { default } from './about.svelte';

package/dist/components/ui/about/index.js

@@ -0,0 +1,2 @@
+export { default as About } from './about.svelte';
+export { default } from './about.svelte';

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

@@ -427,6 +427,7 @@
 
 	const money = (value: number | string) => ledgerMoney(value, currency, locale);
 	const number = (n: number) => n.toLocaleString(locale);
+	const titleColumn = $derived(resolved.find((c) => c.key === 'title'));
 	const count = (n: number) => `${number(n)} ${n === 1 ? noun[0] : noun[1]}`;
 	const income = (value: number | string | null | undefined) => cents(value) > 0;
 	/** Green for money in; a conversion is neither in nor out, so plain. */
@@ -500,6 +501,7 @@
 		{#if c.key === 'date'}
 			<span class={cn(CELL, through, 'text-muted-foreground self-center tabular-nums')} {style}>
 				{ledgerDate(r.date, WIDE)}
+				{#if c.actions}<span class="pointer-events-auto flex flex-none items-center gap-1" data-slot="ledger-actions">{@render c.actions(r)}</span>{/if}
 			</span>
 		{:else if c.key === 'title'}
 			<span
@@ -514,6 +516,7 @@
 					<span class="min-w-0 truncate">{r.title}</span>
 					{#if r.attachment}{@render clip(r)}{/if}
 					{@render chip(r)}
+					{#if c.actions}<span class="pointer-events-auto flex flex-none items-center gap-1" data-slot="ledger-actions">{@render c.actions(r)}</span>{/if}
 				</span>
 				{#if r.note || r.origins}
 					<span class="text-muted-foreground flex min-w-0 items-center gap-2 text-xs font-normal">
@@ -535,18 +538,22 @@
 				data-slot="ledger-amount"
 			>
 				{money(r.amount)}
+				{#if c.actions}<span class="pointer-events-auto flex flex-none items-center gap-1" data-slot="ledger-actions">{@render c.actions(r)}</span>{/if}
 			</span>
 		{:else if c.key === 'balance'}
 			<span class={cn(CELL, END, through, 'self-center tabular-nums')} {style}
-				>{balanceText(r)}</span
+				>{balanceText(r)}
+				{#if c.actions}<span class="pointer-events-auto flex flex-none items-center gap-1" data-slot="ledger-actions">{@render c.actions(r)}</span>{/if}</span
 			>
 		{:else if c.cell}
 			<span class={cn(CELL, through, 'flex items-center self-center')} {style}
-				>{@render c.cell(r)}</span
+				>{@render c.cell(r)}
+				{#if c.actions}<span class="pointer-events-auto flex flex-none items-center gap-1" data-slot="ledger-actions">{@render c.actions(r)}</span>{/if}</span
 			>
 		{:else}
 			<span class={cn(CELL, through, 'self-center', c.align === 'end' && END)} {style}>
 				{c.text?.(r) ?? ''}
+				{#if c.actions}<span class="pointer-events-auto flex flex-none items-center gap-1" data-slot="ledger-actions">{@render c.actions(r)}</span>{/if}
 			</span>
 		{/if}
 	{/each}
@@ -661,6 +668,7 @@
 					<span class="min-w-0 truncate font-medium">{r.title}</span>
 					{#if r.attachment}{@render clip(r)}{/if}
 					{@render chip(r)}
+					{#if titleColumn?.actions}<span class="pointer-events-auto flex flex-none items-center gap-1" data-slot="ledger-actions">{@render titleColumn.actions(r)}</span>{/if}
 				</span>
 				{#if two || r.origins}
 					<span class="text-muted-foreground flex min-w-0 items-center gap-2 text-xs">

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

@@ -88,7 +88,15 @@ export interface ListColumn<R> {
  * 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>;
+export interface LedgerColumn<R extends LedgerRow = LedgerRow> extends ListColumn<R> {
+    /**
+     * Controls after the column's value in each row, the ledger's own cells
+     * included: a payee's "Show only / Hide". Drawn `pointer-events-auto`, so
+     * a click lands on a control and not on the row; on a phone, only the
+     * title's are drawn, after its chips.
+     */
+    actions?: Snippet<[R]>;
+}
 /** The viewer's own choices, which the consumer persists. */
 export interface LedgerPreferences {
     /** The ticked columns' keys, `balance` included. */

package/dist/components/ui/sonner/sonner.svelte

@@ -7,11 +7,26 @@
 	import InfoIcon from '@lucide/svelte/icons/info';
 	import TriangleAlertIcon from '@lucide/svelte/icons/triangle-alert';
 
-	let { ...restProps }: SonnerProps = $props();
+	let { toastOptions = {}, ...restProps }: SonnerProps = $props();
+	const options = $derived({
+		...toastOptions,
+		style: 'font-family: var(--ds-font-body, inherit); font-size: var(--ds-text-sm, 0.875rem); ' + (toastOptions.style ?? ''),
+		classes: {
+			icon: 'size-4!',
+			content: 'min-w-0 max-h-[calc(100dvh-6rem)] overflow-y-auto',
+			title: 'whitespace-pre-wrap [overflow-wrap:anywhere]',
+			description: 'whitespace-pre-wrap [overflow-wrap:anywhere] text-inherit!',
+			...toastOptions.classes
+		}
+	});
 </script>
 
 <Sonner
 	theme={mode.current}
+	position="top-right"
+	closeButton
+	richColors={false}
+	toastOptions={options}
 	class="toaster group"
 	style="--normal-bg: var(--popover, var(--ds-color-surface-3)); --normal-text: var(--popover-foreground, var(--ds-color-foreground)); --normal-border: var(--border);"
 	{...restProps}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@poodle64/ui",
-	"version": "2026.10.6",
+	"version": "2026.10.8",
 	"description": "Household shared component layer: shadcn-svelte primitives (bits-ui) plus the composed page chrome every app builds its routes from, restyled by each app's @poodle64/design-tokens alias layer. One fix reaches every app.",
 	"type": "module",
 	"license": "MIT",

package/registry/component-map.json

@@ -1,10 +1,10 @@
 {
 	"meta": {
 		"package": "@poodle64/ui",
-		"version": "2026.10.6",
+		"version": "2026.10.8",
 		"generatedBy": "scripts/generate-registry.mjs",
 		"source": "scripts/situations.json + package source (DO NOT EDIT the outputs by hand)",
-		"componentCount": 66,
+		"componentCount": 67,
 		"situationCount": 18
 	},
 	"situations": [
@@ -404,6 +404,13 @@
 					"import": "@poodle64/ui/settings-shell",
 					"props": "sections, children, currentPath?, listLabel?",
 					"insteadOf": "a hand-built two-pane settings layout, or a card of tab links in a grid, per app"
+				},
+				{
+					"name": "About",
+					"dir": "about",
+					"import": "@poodle64/ui/about",
+					"props": "name, version, description?, brand?, links?, diagnostics?, writeClipboard?",
+					"insteadOf": "a per-app About page or dialogue with duplicated version, links and diagnostic copying"
 				}
 			]
 		},

package/registry/component-map.md

@@ -1,7 +1,7 @@
 # @poodle64/ui — situation → component map
 
 <!-- GENERATED by scripts/generate-registry.mjs from scripts/situations.json + package source. DO NOT EDIT. -->
-Generated from `@poodle64/ui@2026.10.6`. 66 components, 18 situations.
+Generated from `@poodle64/ui@2026.10.8`. 67 components, 18 situations.
 
 **Read this before writing a `<div>`.** Find the SITUATION you are in below, then compose the component named for it — do not hand-build it from raw `Card` or utility classes. Import is `import { Name } from '<import path>'`. Props marked `?` are optional. This map is the retrieval step the [`frontend-design` skill] makes mandatory; the [CHI 2026 study] measured composing-from-a-registry at 95% design-system compliance against 71% for writing the CSS from a prose style guide.
 
@@ -160,6 +160,7 @@ _The one settings surface: a grouped section list beside the section you are rea
 | Component | Import | Key props | Reach for it instead of |
 | --- | --- | --- | --- |
 | `SettingsShell` | `@poodle64/ui/settings-shell` | `sections, children, currentPath?, listLabel?` | a hand-built two-pane settings layout, or a card of tab links in a grid, per app |
+| `About` | `@poodle64/ui/about` | `name, version, description?, brand?, links?, diagnostics?, writeClipboard?` | a per-app About page or dialogue with duplicated version, links and diagnostic copying |
 
 ## A dialog or overlay