@poodle64/ui 2026.9.20 → 2026.9.21

package/README.md

@@ -42,6 +42,8 @@ src/lib/
                           page-chrome components built on top of them
   components/feedback/  ReportWidget: the fixed bottom-right "report a problem"
                           trigger and dialogue every app mounts (see below)
+  components/alerts/    AlertBell: the top-bar bell over the app factory's alerts
+                          routes (see below)
 dist/                    generated by `pnpm build` (@sveltejs/package); never edit
 ```
 
@@ -404,14 +406,6 @@ wrapper: the pane stacks them on the package's section rhythm itself.
 
 ### A working list beside a page's own content
 
-AppShell has no second-column slot, on purpose: a module's own **pages**
-belong in the rail (`NavItem.children`), never a hand-rolled column beside it.
-A module's **data** (a queue, an inbox, a working list of things waiting on
-the user) is a different situation, not navigation, so it belongs in the page
-beside the content it serves, exactly as the settings destination does.
-`ListShell` is that shape: a foldable list, in the rail's own chrome, that
-vanishes entirely when closed and hands the freed width back to the page.
-
 ```svelte
 <script lang="ts">
 	import AppShell from '@poodle64/ui/app-shell';
@@ -454,12 +448,6 @@ vanishes entirely when closed and hands the freed width back to the page.
 | `label`    | The landmark's accessible name. Defaults to `title`.                          |
 | `actions`  | Leading header actions beside the title: an "Add" button, a filter.           |
 
-Width is fixed at 25rem (400px) and not a prop, the same anti-drift discipline
-`SettingsShell` applies to its own 240px: one width, chosen once, rather than
-every module guessing its own. Below `md` this never renders, at either state,
-since a 400px column has nowhere to go beside a rail that is already a drawer
-there; a module's phone view is its own route.
-
 ### The content measure
 
 How wide the page body may get, chosen once in the layout from a scale of four:
@@ -1334,6 +1322,19 @@ routes by situation, so it stands outside the situation→component registry
 for the same reason. `getSessionId()` reading null when telemetry is off is
 ordinary, not an error: the report sends with a null `session_id`.
 
+## The alerts bell
+
+`@poodle64/ui/alerts` (`AlertBell`) is app machinery of the same kind: the app
+factory's layout mounts it once, in the shell's `actions` slot, for callers
+holding `admin`. It shows what machines raised through the app's `/mcp` `alerts`
+tool, from the factory's routes under the `endpoint` prop (default
+`/api/alerts`): `GET <endpoint>/` lists `{ alerts, total, unread }`, `POST
+<endpoint>/<id>/read` marks one read, `DELETE <endpoint>/<id>` dismisses it.
+`src/test/alert-bell.test.ts` asserts each call. It renders nothing while no
+alert is open, polls once a minute and again as its panel opens, and reports a
+failed read or dismissal with `toast.error`, so `svelte-sonner` is required
+here. The app factory's `docs/design/alerts.md` carries the design.
+
 ## The gate: `ds-check-colour-surface`
 
 The package ships the gate that proves its own surface actually resolves in the

package/dist/components/alerts/alert-bell.svelte

@@ -0,0 +1,177 @@
+<script lang="ts" module>
+	/** One alert as the endpoint lists it: the app factory's `AlertRead`. */
+	export type Alert = {
+		id: number;
+		key: string;
+		title: string;
+		body: string | null;
+		link: string | null;
+		raised_at: string;
+		read_at: string | null;
+	};
+</script>
+
+<script lang="ts">
+	import Bell from '@lucide/svelte/icons/bell';
+	import X from '@lucide/svelte/icons/x';
+	import { onMount } from 'svelte';
+	import { toast } from 'svelte-sonner';
+	import { Badge } from '../ui/badge/index.js';
+	import { Button } from '../ui/button/index.js';
+	import * as Popover from '../ui/popover/index.js';
+	import { cn } from '../../utils';
+
+	// The alerts bell: what machines told this deployment's operator, in the
+	// shell's top-bar `actions` slot. App machinery like ReportWidget, mounted
+	// once by the layout and talking to the app factory's own routes: GET
+	// `<endpoint>/` lists, POST `<endpoint>/<id>/read` marks read, DELETE
+	// `<endpoint>/<id>` dismisses.
+	//
+	// It renders NOTHING while no alert is open, so an app no producer writes
+	// to carries no bell. The layout decides who may see it; the server's gate
+	// is the real one.
+
+	let {
+		/** The app's alerts route, defaulting to the one every factory app serves. */
+		endpoint = '/api/alerts'
+	}: { endpoint?: string } = $props();
+
+	const POLL_MS = 60_000;
+	const TIMEOUT_MS = 30_000;
+	const since = new Intl.RelativeTimeFormat(undefined, { numeric: 'auto' });
+
+	let alerts: Alert[] = $state([]);
+	let total = $state(0);
+	let unread = $state(0);
+	let open = $state(false);
+
+	function call(path: string, method = 'GET'): Promise<Response | null> {
+		return fetch(`${endpoint}/${path}`, { method, signal: AbortSignal.timeout(TIMEOUT_MS) }).catch(
+			() => null
+		);
+	}
+
+	// A failed poll keeps what the bell last showed and is not worth a toast:
+	// the next one, a minute on, tries again.
+	async function load() {
+		const response = await call('');
+		if (!response?.ok) return;
+		const data = (await response.json()) as { alerts: Alert[]; total: number; unread: number };
+		alerts = data.alerts;
+		total = data.total;
+		unread = data.unread;
+	}
+
+	async function act(path: string, method: string, failure: string) {
+		const response = await call(path, method);
+		if (!response?.ok) toast.error(failure);
+		await load();
+	}
+
+	function markRead(alert: Alert) {
+		if (alert.read_at) return;
+		void act(`${alert.id}/read`, 'POST', 'Could not mark the alert read');
+	}
+
+	// Following a link closes the panel; the read is recorded on the way out.
+	function follow(alert: Alert) {
+		open = false;
+		markRead(alert);
+	}
+
+	function age(iso: string): string {
+		const minutes = Math.round((new Date(iso).getTime() - Date.now()) / 60_000);
+		if (minutes > -60) return since.format(minutes, 'minute');
+		if (minutes > -60 * 24) return since.format(Math.round(minutes / 60), 'hour');
+		return since.format(Math.round(minutes / (60 * 24)), 'day');
+	}
+
+	onMount(() => {
+		void load();
+		const timer = setInterval(() => void load(), POLL_MS);
+		return () => clearInterval(timer);
+	});
+</script>
+
+{#if total > 0}
+	<Popover.Root bind:open onOpenChange={(opened) => opened && void load()}>
+		<Popover.Trigger>
+			{#snippet child({ props })}
+				<!-- size-9 is the shell's own top-bar control size (its search and
+				     theme buttons), which size="icon" follows at one density only. -->
+				<Button
+					{...props}
+					variant="outline"
+					size="icon"
+					class="relative size-9"
+					aria-label={unread > 0 ? `Alerts, ${unread} unread` : 'Alerts'}
+					data-testid="alert-bell"
+				>
+					<Bell />
+					{#if unread > 0}
+						<Badge
+							class="absolute -top-1.5 -right-1.5 h-4 min-w-4 px-1"
+							aria-hidden="true"
+							data-testid="alert-bell-unread"
+						>
+							{unread > 99 ? '99+' : unread}
+						</Badge>
+					{/if}
+				</Button>
+			{/snippet}
+		</Popover.Trigger>
+
+		<Popover.Content align="end" class="w-96 p-0">
+			<p class="border-b px-4 py-3 text-sm font-semibold">Alerts</p>
+			<ul class="divide-y">
+				{#each alerts as alert (alert.id)}
+					<li class="flex items-start gap-2 px-4 py-3" data-testid="alert-item">
+						<span
+							class={cn('mt-1.5 size-2 shrink-0 rounded-full', !alert.read_at && 'bg-primary')}
+							aria-hidden="true"
+						></span>
+						{#if alert.link}
+							<a
+								href={alert.link}
+								class="min-w-0 flex-1 text-left"
+								target={alert.link.startsWith('/') ? undefined : '_blank'}
+								rel={alert.link.startsWith('/') ? undefined : 'noreferrer'}
+								onclick={() => follow(alert)}
+							>
+								{@render content(alert)}
+							</a>
+						{:else}
+							<button type="button" class="min-w-0 flex-1 text-left" onclick={() => markRead(alert)}>
+								{@render content(alert)}
+							</button>
+						{/if}
+						<Button
+							variant="ghost"
+							size="icon-xs"
+							aria-label="Dismiss"
+							onclick={() => void act(String(alert.id), 'DELETE', 'Could not dismiss the alert')}
+							data-testid="alert-dismiss"
+						>
+							<X />
+						</Button>
+					</li>
+				{/each}
+			</ul>
+			{#if total > alerts.length}
+				<p class="text-muted-foreground border-t px-4 py-2 text-xs">
+					Showing the newest {alerts.length} of {total}.
+				</p>
+			{/if}
+		</Popover.Content>
+	</Popover.Root>
+{/if}
+
+{#snippet content(alert: Alert)}
+	<span class={cn('block text-sm leading-tight', !alert.read_at && 'font-medium')}>
+		{alert.title}
+	</span>
+	{#if alert.body}
+		<span class="text-muted-foreground mt-1 block text-xs whitespace-pre-line">{alert.body}</span>
+	{/if}
+	<span class="text-muted-foreground mt-1 block text-xs">{age(alert.raised_at)}</span>
+{/snippet}

package/dist/components/alerts/alert-bell.svelte.d.ts

@@ -0,0 +1,16 @@
+/** One alert as the endpoint lists it: the app factory's `AlertRead`. */
+export type Alert = {
+    id: number;
+    key: string;
+    title: string;
+    body: string | null;
+    link: string | null;
+    raised_at: string;
+    read_at: string | null;
+};
+type $$ComponentProps = {
+    endpoint?: string;
+};
+declare const AlertBell: import("svelte").Component<$$ComponentProps, {}, "">;
+type AlertBell = ReturnType<typeof AlertBell>;
+export default AlertBell;

package/dist/components/alerts/index.d.ts

@@ -0,0 +1,2 @@
+import AlertBell, { type Alert } from './alert-bell.svelte';
+export { AlertBell, AlertBell as default, type Alert };

package/dist/components/alerts/index.js

@@ -0,0 +1,2 @@
+import AlertBell, {} from './alert-bell.svelte';
+export { AlertBell, AlertBell as default };

package/dist/components/ui/command/command-dialog.svelte.d.ts

@@ -9,6 +9,6 @@ type $$ComponentProps = WithoutChildrenOrChild<DialogPrimitive.RootProps> & With
     showCloseButton?: boolean;
     class?: string;
 };
-declare const CommandDialog: import("svelte").Component<$$ComponentProps, {}, "open" | "ref" | "value">;
+declare const CommandDialog: import("svelte").Component<$$ComponentProps, {}, "ref" | "value" | "open">;
 type CommandDialog = ReturnType<typeof CommandDialog>;
 export default CommandDialog;

package/dist/components/ui/input-group/input-group-input.svelte.d.ts

@@ -2,7 +2,7 @@ declare const InputGroupInput: import("svelte").Component<(Omit<import("svelte/e
     type: "file";
     files?: FileList;
 } | {
-    type?: "number" | "month" | "url" | "hidden" | "color" | "submit" | "reset" | "button" | "search" | "checkbox" | "radio" | (string & {}) | "text" | "tel" | "email" | "date" | "time" | "image" | "datetime-local" | "password" | "range" | "week";
+    type?: "number" | "month" | "url" | "hidden" | "color" | "submit" | "reset" | "button" | "search" | "checkbox" | "radio" | (string & {}) | "text" | "tel" | "email" | "week" | "date" | "time" | "image" | "datetime-local" | "password" | "range";
     files?: undefined;
 })) & {
     ref?: HTMLElement | null | undefined;

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

@@ -1,79 +1,15 @@
 <script lang="ts">
 	/**
-	 * ListShell — a module's working list, folded away and brought back by the
-	 * app that owns it, beside the content it serves.
-	 *
-	 * AppShell carries no second-column slot for this on purpose: `sidebar` was
-	 * such a slot until 2026.8.11, and what it produced was two apps rendering a
-	 * module's own PAGES beside the rail while the other seven rendered them
-	 * inside it — the shell shape differing per app, and in one app per module.
-	 * Operator ruling, 21/08/2026: no app supports an additional sidebar; a
-	 * section's own pages roll out beneath it in the rail (`NavItem.children`).
-	 * That ruling is about NAVIGATION. A working list is not navigation — it is
-	 * data the module owns (a queue of things waiting on the user), and
-	 * `20-sveltekit-frontend.md` already answers where that belongs: "a column
-	 * that is not NavItem-shaped … belongs in the page beside the content it
-	 * serves." `ContextColumn` is the household's other proof this is a real,
-	 * sanctioned shape — a page-level flanking `<aside>`, not a shell slot.
-	 *
-	 * So this is a companion to AppShell, exactly as `SettingsShell` is: the
-	 * shell provides ONE chrome (the rail, the bar, the content frame), and any
-	 * module reaches for this to add a foldable list beside its own content,
-	 * inside AppShell's content area. Every module gets the same list, not a
-	 * hand-rolled column per module — which is the actual thing the 21/08/2026
-	 * ruling exists to prevent, still true one level down.
-	 *
-	 * USE IT WITH `padded={false}` on AppShell, exactly as `SettingsShell`
-	 * requires: the list has to reach the content area's edge — flush against
-	 * the rail, with no gap — or it reads as a floating card rather than chrome.
-	 * It paints itself in the rail's OWN chrome tokens (`bg-shell`,
-	 * `text-shell-foreground`) for the same reason: a list that is chrome reads
-	 * as chrome, not as a panel someone built inside the page.
-	 *
-	 * Width is fixed at 25rem (400px), measured off the operator's approved
-	 * mockup (radar-hooves/godswood#839, Focus-List.dc.html) rather than picked,
-	 * and not exposed as a prop — the same anti-drift discipline `SettingsShell`
-	 * applies to its own 240px: one width, chosen once, or ten modules each
-	 * guess their own.
-	 *
-	 * Open/closed is the CALLER's state (`open`, bindable), the same way
-	 * AppShell's own `collapsed` is: bind it to persist the choice across
-	 * reloads (a module-scoped `$state` in a `.svelte.ts` file, synced to
-	 * `localStorage` — `svelte-basics.md` §shared state — or the app's own
-	 * settings store). This component holds no storage of its own, on purpose:
-	 * a module that already persists user preferences server-side should not
-	 * gain a second, disagreeing mechanism here.
-	 *
-	 * When `open` is false this renders NOTHING — no placeholder, no rail — so
-	 * the content beside it gets the freed width back, exactly like the
-	 * operator's mockup (Focus-Run.dc.html). Reopening it is deliberately NOT
-	 * this component's job: the fold toggle only exists while the list is open
-	 * (inside its own header, where the mockup puts it); the reopen affordance
-	 * — a "Waiting on you 338" pill, a bare icon, wherever the module wants it —
-	 * is the CALLER's own markup, driving the same bound `open`. Fixing that
-	 * button's position here would be exactly the one-shape-per-module drift
-	 * this file exists to end; the module's own page already earned that
-	 * decision by owning the content beside this list. A caller's reopen
-	 * control should carry `aria-expanded={open}` itself, so the two controls
-	 * (this one, and the caller's) read as one continuous toggle to a screen
-	 * reader even though only one is ever in the document at a time:
-	 *
-	 *     <button onclick={() => (open = true)} aria-expanded={open}>
-	 *       Waiting on you <Badge>{waitingCount}</Badge>
-	 *     </button>
-	 *
-	 * Below `md` this never renders, at either state: the rail is already a
-	 * drawer there, and a 400px column has nowhere to go beside it. Godswood's
-	 * own answer is a dedicated phone route for the same list (Phone.dc.html);
-	 * that choice is the app's, not this component's — it only gets out of the
-	 * way so the app's own mobile route can render undisturbed.
-	 *
-	 * The header is chrome (title, the fold toggle, and an optional leading
-	 * `actions` snippet for a module-specific control — an "Add" button in the
-	 * mockup). Everything below it — tabs, grouped headings, the rows
-	 * themselves — is the module's own `children`, exactly as `SettingsShell`
-	 * hands its list body to the caller rather than describing a row shape of
-	 * its own. A queue is not the only thing this list will ever hold.
+	 * ListShell — a module's working list, folded away and brought back by
+	 * the app that owns it, beside the content it serves. Not an AppShell
+	 * slot: `sidebar` was removed 2026.8.11 after two apps disagreed on
+	 * where a module's own PAGES render (operator ruling 21/08/2026); a
+	 * working list is data, not navigation, so it is a page-level companion
+	 * like `SettingsShell`/`ContextColumn` — pair with `padded={false}` on
+	 * AppShell, as `SettingsShell` requires. `open` is the caller's own
+	 * bindable state, never persisted here; closed, this renders nothing,
+	 * and reopening is the caller's own control, placed wherever the module
+	 * chooses. Hidden below `md` at every state.
 	 */
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';

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

@@ -1,78 +1,14 @@
 /**
-     * ListShell — a module's working list, folded away and brought back by the
-     * app that owns it, beside the content it serves.
-     *
-     * AppShell carries no second-column slot for this on purpose: `sidebar` was
-     * such a slot until 2026.8.11, and what it produced was two apps rendering a
-     * module's own PAGES beside the rail while the other seven rendered them
-     * inside it — the shell shape differing per app, and in one app per module.
-     * Operator ruling, 21/08/2026: no app supports an additional sidebar; a
-     * section's own pages roll out beneath it in the rail (`NavItem.children`).
-     * That ruling is about NAVIGATION. A working list is not navigation — it is
-     * data the module owns (a queue of things waiting on the user), and
-     * `20-sveltekit-frontend.md` already answers where that belongs: "a column
-     * that is not NavItem-shaped … belongs in the page beside the content it
-     * serves." `ContextColumn` is the household's other proof this is a real,
-     * sanctioned shape — a page-level flanking `<aside>`, not a shell slot.
-     *
-     * So this is a companion to AppShell, exactly as `SettingsShell` is: the
-     * shell provides ONE chrome (the rail, the bar, the content frame), and any
-     * module reaches for this to add a foldable list beside its own content,
-     * inside AppShell's content area. Every module gets the same list, not a
-     * hand-rolled column per module — which is the actual thing the 21/08/2026
-     * ruling exists to prevent, still true one level down.
-     *
-     * USE IT WITH `padded={false}` on AppShell, exactly as `SettingsShell`
-     * requires: the list has to reach the content area's edge — flush against
-     * the rail, with no gap — or it reads as a floating card rather than chrome.
-     * It paints itself in the rail's OWN chrome tokens (`bg-shell`,
-     * `text-shell-foreground`) for the same reason: a list that is chrome reads
-     * as chrome, not as a panel someone built inside the page.
-     *
-     * Width is fixed at 25rem (400px), measured off the operator's approved
-     * mockup (radar-hooves/godswood#839, Focus-List.dc.html) rather than picked,
-     * and not exposed as a prop — the same anti-drift discipline `SettingsShell`
-     * applies to its own 240px: one width, chosen once, or ten modules each
-     * guess their own.
-     *
-     * Open/closed is the CALLER's state (`open`, bindable), the same way
-     * AppShell's own `collapsed` is: bind it to persist the choice across
-     * reloads (a module-scoped `$state` in a `.svelte.ts` file, synced to
-     * `localStorage` — `svelte-basics.md` §shared state — or the app's own
-     * settings store). This component holds no storage of its own, on purpose:
-     * a module that already persists user preferences server-side should not
-     * gain a second, disagreeing mechanism here.
-     *
-     * When `open` is false this renders NOTHING — no placeholder, no rail — so
-     * the content beside it gets the freed width back, exactly like the
-     * operator's mockup (Focus-Run.dc.html). Reopening it is deliberately NOT
-     * this component's job: the fold toggle only exists while the list is open
-     * (inside its own header, where the mockup puts it); the reopen affordance
-     * — a "Waiting on you 338" pill, a bare icon, wherever the module wants it —
-     * is the CALLER's own markup, driving the same bound `open`. Fixing that
-     * button's position here would be exactly the one-shape-per-module drift
-     * this file exists to end; the module's own page already earned that
-     * decision by owning the content beside this list. A caller's reopen
-     * control should carry `aria-expanded={open}` itself, so the two controls
-     * (this one, and the caller's) read as one continuous toggle to a screen
-     * reader even though only one is ever in the document at a time:
-     *
-     *     <button onclick={() => (open = true)} aria-expanded={open}>
-     *       Waiting on you <Badge>{waitingCount}</Badge>
-     *     </button>
-     *
-     * Below `md` this never renders, at either state: the rail is already a
-     * drawer there, and a 400px column has nowhere to go beside it. Godswood's
-     * own answer is a dedicated phone route for the same list (Phone.dc.html);
-     * that choice is the app's, not this component's — it only gets out of the
-     * way so the app's own mobile route can render undisturbed.
-     *
-     * The header is chrome (title, the fold toggle, and an optional leading
-     * `actions` snippet for a module-specific control — an "Add" button in the
-     * mockup). Everything below it — tabs, grouped headings, the rows
-     * themselves — is the module's own `children`, exactly as `SettingsShell`
-     * hands its list body to the caller rather than describing a row shape of
-     * its own. A queue is not the only thing this list will ever hold.
+     * ListShell — a module's working list, folded away and brought back by
+     * the app that owns it, beside the content it serves. Not an AppShell
+     * slot: `sidebar` was removed 2026.8.11 after two apps disagreed on
+     * where a module's own PAGES render (operator ruling 21/08/2026); a
+     * working list is data, not navigation, so it is a page-level companion
+     * like `SettingsShell`/`ContextColumn` — pair with `padded={false}` on
+     * AppShell, as `SettingsShell` requires. `open` is the caller's own
+     * bindable state, never persisted here; closed, this renders nothing,
+     * and reopening is the caller's own control, placed wherever the module
+     * chooses. Hidden below `md` at every state.
      */
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
@@ -98,6 +34,6 @@ type $$ComponentProps = WithElementRef<HTMLAttributes<HTMLElement>> & {
     /** The list body: tabs, group headings, rows — entirely the module's own. */
     children: Snippet;
 };
-declare const ListShell: import("svelte").Component<$$ComponentProps, {}, "open" | "ref">;
+declare const ListShell: import("svelte").Component<$$ComponentProps, {}, "ref" | "open">;
 type ListShell = ReturnType<typeof ListShell>;
 export default ListShell;

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

@@ -1,3 +1,3 @@
-declare const Select: import("svelte").Component<import("bits-ui").SelectRootPropsWithoutHTML, {}, "open" | "value">;
+declare const Select: import("svelte").Component<import("bits-ui").SelectRootPropsWithoutHTML, {}, "value" | "open">;
 type Select = ReturnType<typeof Select>;
 export default Select;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@poodle64/ui",
-	"version": "2026.9.20",
+	"version": "2026.9.21",
 	"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",
@@ -37,6 +37,10 @@
 			"types": "./dist/components/feedback/index.d.ts",
 			"svelte": "./dist/components/feedback/index.js"
 		},
+		"./alerts": {
+			"types": "./dist/components/alerts/index.d.ts",
+			"svelte": "./dist/components/alerts/index.js"
+		},
 		"./*": {
 			"types": "./dist/components/ui/*/index.d.ts",
 			"svelte": "./dist/components/ui/*/index.js"

package/registry/component-map.json

@@ -1,7 +1,7 @@
 {
 	"meta": {
 		"package": "@poodle64/ui",
-		"version": "2026.9.20",
+		"version": "2026.9.21",
 		"generatedBy": "scripts/generate-registry.mjs",
 		"source": "scripts/situations.json + package source (DO NOT EDIT the outputs by hand)",
 		"componentCount": 61,

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.9.20`. 61 components, 17 situations.
+Generated from `@poodle64/ui@2026.9.21`. 61 components, 17 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.