@poodle64/ui 2026.9.20 → 2026.9.22

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
@@ -1410,6 +1411,6 @@ non-zero and naming the field on any difference.
 1. Change a component; bump `version` in `package.json` (CalVer).
 2. `pnpm build`, which runs `svelte-package` then `publint` (package.json/exports sanity).
 3. Commit, tag `ui-v<version>`, push the tag.
-4. `.github/workflows/publish.yaml` runs on that push and publishes via npm
-   OIDC trusted publishing: `gh run list --workflow=publish.yaml`.
+4. `.github/workflows/publish-kit-typescript.yaml` (repo root) runs on that push and publishes via npm
+   OIDC trusted publishing: `gh run list -R radar-hooves/app-factory --workflow=publish-kit-typescript.yaml`.
    Confirm with `npm view @poodle64/ui version`.

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/data-table-tanstack/data-table-tanstack.svelte

@@ -150,98 +150,115 @@
 			class="flex-1 rounded-none border-0"
 		/>
 	{:else}
-		<div class="min-h-0 flex-1 overflow-auto">
-			<TableRoot class="w-full">
-				<TableHeader class="bg-card sticky top-0 z-10">
-					{#each headerGroups as headerGroup (headerGroup.id)}
-						<TableRow class="border-0 hover:bg-transparent">
-							{#if selectable}
-								<TableHead class="border-border w-10 border-b px-3 py-1.5">
-									<Checkbox
-										checked={allSelected}
-										indeterminate={someSelected}
-										onCheckedChange={toggleAll}
-										aria-label="Select all rows"
+		<!-- containerClass targets table.svelte's own scroll container (`data-slot=
+		     table-container`), which otherwise carries only `overflow-x-auto` — and
+		     `overflow-x` other than visible forces `overflow-y` to compute `auto`
+		     too, making that div a scroll container in its own right even though it
+		     never actually scrolls (it is always sized to its own content). A
+		     `position: sticky` header's containing block is its NEAREST ancestor
+		     scroll container, so with no override here the header (radar-hooves/
+		     godswood, 30/09/2026) sticks to that inert box and never visibly pins,
+		     in every engine, not only WebKit — confirmed with this repo's own
+		     Playwright (chromium and webkit) driving the unmodified component.
+		     Folding this component's own intended scroll region into that SAME box
+		     (rather than wrapping a second one around it) makes it the one thing
+		     that actually scrolls, so sticky has a real ancestor to pin against. -->
+		<TableRoot class="w-full" containerClass="min-h-0 flex-1 overflow-y-auto">
+			<!-- Sticky lives on each `<th>`, not on `<thead>`: WebKit has a long
+			     history of not reliably keeping `position: sticky` on a table-section
+			     box (`<thead>`) pinned, while sticky on the `<th>` cells — which
+			     participate in table layout as ordinary boxes — sticks correctly. -->
+			<TableHeader>
+				{#each headerGroups as headerGroup (headerGroup.id)}
+					<TableRow class="border-0 hover:bg-transparent">
+						{#if selectable}
+							<TableHead
+								class="border-border bg-card sticky top-0 z-10 w-10 border-b px-3 py-1.5"
+							>
+								<Checkbox
+									checked={allSelected}
+									indeterminate={someSelected}
+									onCheckedChange={toggleAll}
+									aria-label="Select all rows"
+								/>
+							</TableHead>
+						{/if}
+						{#each headerGroup.headers as header (header.id)}
+							{@const meta = header.column.columnDef.meta}
+							<TableHead
+								class={cn(
+									'text-muted-foreground border-border bg-card sticky top-0 z-10 text-2xs tracking-eyebrow border-b px-3 py-1.5 text-left font-medium whitespace-nowrap uppercase',
+									meta?.class,
+									meta?.headClass
+								)}
+							>
+								{#if !header.isPlaceholder}
+									<FlexRender
+										content={header.column.columnDef.header}
+										context={header.getContext()}
 									/>
-								</TableHead>
-							{/if}
-							{#each headerGroup.headers as header (header.id)}
-								{@const meta = header.column.columnDef.meta}
-								<TableHead
-									class={cn(
-										'text-muted-foreground border-border text-2xs tracking-eyebrow border-b px-3 py-1.5 text-left font-medium whitespace-nowrap uppercase',
-										meta?.class,
-										meta?.headClass
-									)}
-								>
-									{#if !header.isPlaceholder}
-										<FlexRender
-											content={header.column.columnDef.header}
-											context={header.getContext()}
-										/>
-									{/if}
-								</TableHead>
-							{/each}
-						</TableRow>
-					{/each}
-				</TableHeader>
+								{/if}
+							</TableHead>
+						{/each}
+					</TableRow>
+				{/each}
+			</TableHeader>
 
-				<TableBody>
-					{#each rows as row (row.id)}
-						{@const originalRow = row.original}
-						{@const rowId = getRowId(originalRow)}
-						{@const isSelected = rowId === selectedId}
-						{@const isChecked = selectedSet.has(rowId)}
-						{@const extraStyle = getRowStyle ? getRowStyle(originalRow) : ''}
-						<TableRow
-							data-state={isSelected ? 'selected' : undefined}
-							class="border-border/60 border-b last:border-0 {onSelect
-								? 'cursor-pointer hover:bg-[color-mix(in_oklch,var(--foreground)_4%,transparent)]'
-								: ''} {isSelected ? 'bg-[color-mix(in_oklch,var(--primary)_10%,transparent)]' : ''}"
-							style="{extraStyle}{isSelected ? ' ' + selectedShadow : ''}"
-							onclick={onSelect ? () => onSelect(rowId) : undefined}
-							onkeydown={onSelect
-								? (e) => {
-										if (e.key === 'Enter' || e.key === ' ') {
-											e.preventDefault();
-											onSelect(rowId);
-										}
+			<TableBody>
+				{#each rows as row (row.id)}
+					{@const originalRow = row.original}
+					{@const rowId = getRowId(originalRow)}
+					{@const isSelected = rowId === selectedId}
+					{@const isChecked = selectedSet.has(rowId)}
+					{@const extraStyle = getRowStyle ? getRowStyle(originalRow) : ''}
+					<TableRow
+						data-state={isSelected ? 'selected' : undefined}
+						class="border-border/60 border-b last:border-0 {onSelect
+							? 'cursor-pointer hover:bg-[color-mix(in_oklch,var(--foreground)_4%,transparent)]'
+							: ''} {isSelected ? 'bg-[color-mix(in_oklch,var(--primary)_10%,transparent)]' : ''}"
+						style="{extraStyle}{isSelected ? ' ' + selectedShadow : ''}"
+						onclick={onSelect ? () => onSelect(rowId) : undefined}
+						onkeydown={onSelect
+							? (e) => {
+									if (e.key === 'Enter' || e.key === ' ') {
+										e.preventDefault();
+										onSelect(rowId);
 									}
-								: undefined}
-							tabindex={onSelect ? 0 : undefined}
-						>
-							{#if selectable}
-								<TableCell class="w-10 px-3 py-1.5">
-									<!-- The wrapper ONLY stops the event reaching the row, so ticking a
-									     checkbox never also opens the master-detail. The checkbox's own
-									     onCheckedChange is the single source of the selection change —
-									     handling the click here as well would toggle twice per click and
-									     net out to no selection at all. -->
-									<div
-										role="presentation"
-										onclick={(e) => e.stopPropagation()}
-										onkeydown={(e) => e.stopPropagation()}
-									>
-										<Checkbox
-											checked={isChecked}
-											onCheckedChange={(v) => setRowSelected(rowId, v)}
-											aria-label="Select row"
-										/>
-									</div>
-								</TableCell>
-							{/if}
-							{#each row.getVisibleCells() as cell (cell.id)}
-								{@const meta = cell.column.columnDef.meta}
-								<TableCell
-									class={cn('px-3 py-1.5 text-sm whitespace-nowrap', meta?.class, meta?.cellClass)}
+								}
+							: undefined}
+						tabindex={onSelect ? 0 : undefined}
+					>
+						{#if selectable}
+							<TableCell class="w-10 px-3 py-1.5">
+								<!-- The wrapper ONLY stops the event reaching the row, so ticking a
+								     checkbox never also opens the master-detail. The checkbox's own
+								     onCheckedChange is the single source of the selection change —
+								     handling the click here as well would toggle twice per click and
+								     net out to no selection at all. -->
+								<div
+									role="presentation"
+									onclick={(e) => e.stopPropagation()}
+									onkeydown={(e) => e.stopPropagation()}
 								>
-									<FlexRender content={cell.column.columnDef.cell} context={cell.getContext()} />
-								</TableCell>
-							{/each}
-						</TableRow>
-					{/each}
-				</TableBody>
-			</TableRoot>
-		</div>
+									<Checkbox
+										checked={isChecked}
+										onCheckedChange={(v) => setRowSelected(rowId, v)}
+										aria-label="Select row"
+									/>
+								</div>
+							</TableCell>
+						{/if}
+						{#each row.getVisibleCells() as cell (cell.id)}
+							{@const meta = cell.column.columnDef.meta}
+							<TableCell
+								class={cn('px-3 py-1.5 text-sm whitespace-nowrap', meta?.class, meta?.cellClass)}
+							>
+								<FlexRender content={cell.column.columnDef.cell} context={cell.getContext()} />
+							</TableCell>
+						{/each}
+					</TableRow>
+				{/each}
+			</TableBody>
+		</TableRoot>
 	{/if}
 </div>

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,17 +1,18 @@
 {
 	"name": "@poodle64/ui",
-	"version": "2026.9.20",
+	"version": "2026.9.22",
 	"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",
 	"repository": {
 		"type": "git",
-		"url": "git+https://github.com/radar-hooves/design-system.git"
+		"url": "git+https://github.com/radar-hooves/app-factory.git",
+		"directory": "kits/typescript/packages/ui"
 	},
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org",
 		"access": "public",
-		"provenance": false
+		"provenance": true
 	},
 	"files": [
 		"bin",
@@ -37,6 +38,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.22",
 		"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.22`. 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.