@poodle64/ui 2026.10.6 → 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.                                                                                                                                                                                                       |

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/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.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.6",
+		"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.6`. 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