@poodle64/ui 2026.10.5 → 2026.10.7

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.                                                                                                                                                                                                       |
@@ -899,7 +900,7 @@ no module rebuilds them and a need one module finds becomes a toggle for all.
 | `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. |
-| `noun`, `empty`, `footer`, `layout` | "line" for a printed layer; the empty state; "Show more" after the last group; a forced `phone`/`narrow`/`wide` where the ledger's own width (below 600px, from 1200px) should not decide. |
+| `noun`, `empty`, `footer`, `layout` | "line" for a printed layer; the empty state; "Show more" after the last group; a forced `phone`/`narrow`/`wide` where the ledger's own width (below 480px, from 1200px) should not decide. |
 
 Settled here, the same in every module, and not props:
 
@@ -985,7 +986,7 @@ stays for a dense grid of data; a module's own records are a RecordList.
 | `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
+reversed, then the list's own order. On a phone (below 480px 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`).
 

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

@@ -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';
@@ -42,7 +42,8 @@
 		ROW_TEXT,
 		RULE,
 		THROUGH,
-		groupSpacing
+		groupSpacing,
+		listLayout
 	} from './look.js';
 	import { AU_LOCALE } from '../../../format.js';
 	import { cn } from '../../../utils.js';
@@ -212,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');

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

@@ -7,7 +7,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';

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

@@ -3,6 +3,15 @@
  * 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. */

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

@@ -3,6 +3,17 @@
  * 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. */

package/dist/components/ui/record-list/record-list.svelte

@@ -13,7 +13,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`). Width picks
-	 * the layout, as the Ledger's does: a phone's list below 600px, the wide
+	 * the layout, as the Ledger's does: a phone's list below 480px, the wide
 	 * tracks and the `'wide'` columns from 1200px. On a phone a row is its
 	 * thumbnail, title and lines, with the first end-aligned column's value
 	 * beside the title.
@@ -38,7 +38,8 @@
 		ROW_TEXT,
 		RULE,
 		THROUGH,
-		groupSpacing
+		groupSpacing,
+		listLayout
 	} from '../ledger/look.js';
 	import ListToolbar from '../list-toolbar/list-toolbar.svelte';
 	import type { ListAction, ListIconAction } from '../list-toolbar/types.js';
@@ -146,15 +147,7 @@
 	/** The bar ends where the cards do: clear of the 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');

package/dist/components/ui/record-list/record-list.svelte.d.ts

@@ -12,7 +12,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`). Width picks
-     * the layout, as the Ledger's does: a phone's list below 600px, the wide
+     * the layout, as the Ledger's does: a phone's list below 480px, the wide
      * tracks and the `'wide'` columns from 1200px. On a phone a row is its
      * thumbnail, title and lines, with the first end-aligned column's value
      * beside the title.

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.5",
+	"version": "2026.10.7",
 	"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.5",
+		"version": "2026.10.7",
 		"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.5`. 66 components, 18 situations.
+Generated from `@poodle64/ui@2026.10.7`. 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