@poodle64/ui 2026.9.1 → 2026.9.3

package/README.md

@@ -83,10 +83,10 @@ rather than rebuilding it:
 
 | Import                                          | What it is                                                                                                                                                                                                                                                                                                                                                  |
 | ----------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `page-header`                                   | The only page-title pattern: optional `breadcrumbs` and `icon` snippets, eyebrow, an optional title, one clamped subtitle, an `info` tooltip, a `meta` row and an `actions` slot. Omit `title` for a header that is a breadcrumb bar.                                                                                                                        |
+| `page-header`                                   | The only page-title pattern: optional `breadcrumbs` and `icon` snippets, eyebrow, an optional title, one clamped subtitle, an `info` tooltip, a `meta` row and an `actions` slot. Omit `title` for a header that is a breadcrumb bar.                                                                                                                       |
 | `panel`                                         | The generic titled card: optional icon, subtitle and trailing actions over a body that can opt out of padding.                                                                                                                                                                                                                                              |
 | `detail-panel`                                  | The entity-detail surface: header with icon/eyebrow/title/`StatusBadge`/close, scrollable body, footer of actions.                                                                                                                                                                                                                                          |
-| `context-column`                                | The persistent right-hand column: a standing `StatList` plus an optional detail that flows in on select.                                                                                                                                                                                                                                                    |
+| `context-column`                                | The persistent right-hand column: a standing `StatList` plus an optional detail that flows in on select. Below `xl` (1280px), where the column has nowhere to sit, the same content opens from a floating trigger instead of disappearing.                                                                                                                  |
 | `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.                                                                                                                                                                                           |
 | `dialog-section`                                | One section of a dialogue body; adjacent sections are divided automatically.                                                                                                                                                                                                                                                                                |
 | `stat-card`                                     | A single metric that earns its space (label, value, unit, sub, status dot, and `valueTone` to colour the figure itself).                                                                                                                                                                                                                                    |
@@ -380,10 +380,10 @@ top-right — painted once, by the shell, on the region that scrolls:
 </AppShell>
 ```
 
-| Value  | What it paints                                          | Reach for it when                                                        |
-| ------ | ------------------------------------------------------- | ------------------------------------------------------------------------ |
-| `grid` | a dot-grid floor plus one accent vignette in the corner | the default — the house "instrument-grade" surface                       |
-| `none` | nothing at all                                          | an app arguing a deliberate exception                                    |
+| Value  | What it paints                                          | Reach for it when                                  |
+| ------ | ------------------------------------------------------- | -------------------------------------------------- |
+| `grid` | a dot-grid floor plus one accent vignette in the corner | the default — the house "instrument-grade" surface |
+| `none` | nothing at all                                          | an app arguing a deliberate exception              |
 
 `grid` is the default since `2026.8.8`, so a shell that does not mention
 `texture` wears the house atmosphere. It shipped `none`-by-default in `2026.8.4`
@@ -1038,20 +1038,20 @@ Money, dates and times, percentages and plain numbers, in `en-AU` / AUD /
 `Australia/Brisbane`. No dependencies and no DOM — it is `Intl` and arithmetic,
 so it runs in a load function as happily as in a component.
 
-| Function                                                      | What it does                                                                                                                                |
-| ------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
-| `formatCurrency(dollars, opts)`                                | `$1,234.56`. `decimals` (default 2), `currency` (default AUD), `fallback`.                                                                   |
-| `formatCurrencyFromCents(cents, opts)`                         | The same, for money stored as integer cents.                                                                                                 |
-| `formatCurrencyString(str, opts)`                              | Groups a money STRING without ever parsing it to a float — for a figure that reaches a tax return.                                            |
-| `compactCurrency(value, opts)`                                 | `$1.1m` / `$12k`, for a chart axis or a dense tile.                                                                                          |
-| `isNegativeMoney(value)`                                       | The sign, without a parse, for choosing a tone class.                                                                                        |
-| `dollarsToCents(dollars)`                                      | Whole cents.                                                                                                                                 |
-| `formatNumber(value, opts)`                                    | `1,234,567`.                                                                                                                                 |
-| `formatPercentage(value, opts)`                                | Value is already in percentage POINTS: `4.5` → `4.5%`.                                                                                       |
-| `formatRatioAsPercentage(value, opts)`                         | Value is a 0–1 RATIO: `0.045` → `4.5%`.                                                                                                      |
-| `formatDate(value, opts)`                                      | `19 Dec 2024`, `19 December 2024` (`format: 'long'`) or `19/12/2024` (`format: 'numeric'`).                                                   |
-| `formatDateTime(value, opts)`                                  | The same plus a 24-hour time: `19 Dec 2024, 14:05`.                                                                                          |
-| `parseApiDate(iso)`                                            | Reads an offset-less timestamp as UTC — the naive-UTC backend trap below.                                                                     |
+| Function                               | What it does                                                                                       |
+| -------------------------------------- | -------------------------------------------------------------------------------------------------- |
+| `formatCurrency(dollars, opts)`        | `$1,234.56`. `decimals` (default 2), `currency` (default AUD), `fallback`.                         |
+| `formatCurrencyFromCents(cents, opts)` | The same, for money stored as integer cents.                                                       |
+| `formatCurrencyString(str, opts)`      | Groups a money STRING without ever parsing it to a float — for a figure that reaches a tax return. |
+| `compactCurrency(value, opts)`         | `$1.1m` / `$12k`, for a chart axis or a dense tile.                                                |
+| `isNegativeMoney(value)`               | The sign, without a parse, for choosing a tone class.                                              |
+| `dollarsToCents(dollars)`              | Whole cents.                                                                                       |
+| `formatNumber(value, opts)`            | `1,234,567`.                                                                                       |
+| `formatPercentage(value, opts)`        | Value is already in percentage POINTS: `4.5` → `4.5%`.                                             |
+| `formatRatioAsPercentage(value, opts)` | Value is a 0–1 RATIO: `0.045` → `4.5%`.                                                            |
+| `formatDate(value, opts)`              | `19 Dec 2024`, `19 December 2024` (`format: 'long'`) or `19/12/2024` (`format: 'numeric'`).        |
+| `formatDateTime(value, opts)`          | The same plus a 24-hour time: `19 Dec 2024, 14:05`.                                                |
+| `parseApiDate(iso)`                    | Reads an offset-less timestamp as UTC — the naive-UTC backend trap below.                          |
 
 Four decisions worth knowing before a migration, because each was settled
 against an app that had decided it the other way:
@@ -1109,8 +1109,8 @@ still pass while `bg-card`, `bg-muted`, `bg-accent`, `bg-popover` and
 `border-input` compile to no rule at all:
 
 ```css
-@import '@poodle64/ui/styles.css';            /* registers the surface */
-@source '../node_modules/@poodle64/ui/dist';  /* puts it in the scan   */
+@import '@poodle64/ui/styles.css'; /* registers the surface */
+@source '../node_modules/@poodle64/ui/dist'; /* puts it in the scan   */
 ```
 
 They fail differently, so the gate asserts them differently: it compiles the

package/bin/check-colour-surface.mjs

@@ -12,7 +12,7 @@
  * `lint:css` and `check` all succeed, and the app ships with `bg-card`,
  * `bg-muted`, `bg-accent`, `bg-popover` and `border-input` compiling to no rule
  * at all — no build error, no lint hit, no failing test, just classes in the DOM
- * with nothing behind them. That is poodle64/design-system#3, which reached every
+ * with nothing behind them. That is radar-hooves/design-system#3, which reached every
  * app in the estate before anyone saw it: dropdowns with no hover, inputs with no
  * border, cards and popovers with no surface.
  *

package/dist/components/ui/app-identity/app-identity.svelte

@@ -0,0 +1,138 @@
+<script lang="ts">
+	/**
+	 * The signed-in user surface for AppShell's `identity` slot.
+	 *
+	 * Graduated from the shell lab (`packages/console/src/routes/lab/+page.svelte`,
+	 * the `identity === 'avatar'` shape) — operator ruling 04/09/2026: avatar
+	 * only at rest, no name, no chevron, and no prop reintroduces a variant.
+	 * Opening it answers who is signed in, which workspace they act in, and the
+	 * ways out — identity first, because a menu that opens on a list of actions
+	 * makes you infer who you are from the avatar you just clicked.
+	 *
+	 * Prop names match the stamped template's auth store
+	 * (`frontend/src/lib/auth.svelte.ts` — `User`, `Membership`) exactly, so a
+	 * consumer wires this straight from `auth.user`, `auth.entitlements`,
+	 * `auth.activeWorkspace` and `auth.activeRole` with no reshaping. A guessed
+	 * shape needs rewriting the day it meets the real store, which is the whole
+	 * reason this one didn't. `display_name` and `email` are both nullable
+	 * there, and `activeWorkspace` is genuinely null until a caller with several
+	 * memberships chooses one — this component is built against that, not a
+	 * happy path.
+	 *
+	 * Sign-out and settings are the consuming app's concerns, never behaviour
+	 * baked in here: `onSignOut` and `onAccountSettings` are callbacks. Theme
+	 * follows AppShell's own `onToggleTheme` pattern — override it, or accept
+	 * mode-watcher's `toggleMode` by default.
+	 */
+	import { toggleMode } from 'mode-watcher';
+	import * as DropdownMenu from '../dropdown-menu/index.js';
+	import * as Avatar from '../avatar/index.js';
+
+	let {
+		user,
+		workspace = null,
+		role = null,
+		entitlements = [],
+		onSignOut,
+		onAccountSettings,
+		onSwitchTheme
+	}: {
+		user: { username: string; display_name: string | null; email: string | null };
+		/** The active workspace's name. Omit while none is chosen yet — the block hides rather than rendering empty. */
+		workspace?: string | null;
+		/** The caller's standing in `workspace`. Ignored while `workspace` is unset. */
+		role?: 'owner' | 'member' | null;
+		entitlements?: string[];
+		/** Required — the whole reason this slot exists is a stamped app rendering no way to sign out. */
+		onSignOut: () => void;
+		/** Optional until the app has an account-settings destination to send it to. */
+		onAccountSettings?: () => void;
+		/** Override the theme action. Defaults to mode-watcher's toggleMode, matching AppShell. */
+		onSwitchTheme?: () => void;
+	} = $props();
+
+	const shown = $derived(user.display_name ?? user.username);
+	// Shown separately only when it says something the display name doesn't —
+	// an audit log and a support question use the username, and it is not
+	// always the display name.
+	const showUsername = $derived(!!user.display_name && user.display_name !== user.username);
+
+	function initialsOf(name: string): string {
+		const parts = name.trim().split(/\s+/).filter(Boolean);
+		if (parts.length === 0) return '';
+		if (parts.length === 1) return parts[0].slice(0, 2).toUpperCase();
+		return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
+	}
+	const initials = $derived(initialsOf(shown));
+
+	function switchTheme() {
+		if (onSwitchTheme) onSwitchTheme();
+		else toggleMode();
+	}
+</script>
+
+<DropdownMenu.Root>
+	<DropdownMenu.Trigger>
+		{#snippet child({ props })}
+			<button
+				{...props}
+				aria-label="Account"
+				class="hover:bg-surface-2 grid size-[34px] cursor-pointer place-items-center rounded-md"
+			>
+				<Avatar.Root class="size-6.5 flex-none">
+					<Avatar.Fallback class="bg-primary text-primary-foreground text-[11px] font-bold">
+						{initials}
+					</Avatar.Fallback>
+				</Avatar.Root>
+			</button>
+		{/snippet}
+	</DropdownMenu.Trigger>
+	<DropdownMenu.Content align="end" class="w-72">
+		<div class="flex items-start gap-3 px-2 py-1.5">
+			<Avatar.Root class="size-9 flex-none">
+				<Avatar.Fallback class="bg-primary text-primary-foreground text-[13px] font-bold">
+					{initials}
+				</Avatar.Fallback>
+			</Avatar.Root>
+			<div class="min-w-0">
+				<div class="truncate text-[13.5px] font-semibold">{shown}</div>
+				{#if showUsername}
+					<div class="text-muted-foreground truncate font-mono text-[11px]">{user.username}</div>
+				{/if}
+				{#if user.email}
+					<div class="text-muted-foreground truncate text-[12px]">{user.email}</div>
+				{/if}
+			</div>
+		</div>
+		{#if workspace}
+			<DropdownMenu.Separator />
+			<DropdownMenu.Label class="text-muted-foreground text-[10px] tracking-[0.1em] uppercase">
+				Workspace
+			</DropdownMenu.Label>
+			<div class="flex items-center justify-between gap-2 px-2 pb-1.5">
+				<span class="truncate text-[13px]">{workspace}</span>
+				{#if role}
+					<span
+						class="border-border text-muted-foreground rounded-full border px-1.5 py-px text-[10px] capitalize"
+					>
+						{role}
+					</span>
+				{/if}
+			</div>
+			{#if entitlements.length}
+				<div class="flex flex-wrap gap-1 px-2 pb-2">
+					{#each entitlements as e (e)}
+						<span class="bg-surface-2 text-muted-foreground font-mono rounded px-1.5 py-px text-[10px]">
+							{e}
+						</span>
+					{/each}
+				</div>
+			{/if}
+		{/if}
+		<DropdownMenu.Separator />
+		<DropdownMenu.Item onSelect={switchTheme}>Switch theme</DropdownMenu.Item>
+		<DropdownMenu.Item onSelect={onAccountSettings}>Account settings</DropdownMenu.Item>
+		<DropdownMenu.Separator />
+		<DropdownMenu.Item class="text-status-error" onSelect={onSignOut}>Sign out</DropdownMenu.Item>
+	</DropdownMenu.Content>
+</DropdownMenu.Root>

package/dist/components/ui/app-identity/app-identity.svelte.d.ts

@@ -0,0 +1,21 @@
+type $$ComponentProps = {
+    user: {
+        username: string;
+        display_name: string | null;
+        email: string | null;
+    };
+    /** The active workspace's name. Omit while none is chosen yet — the block hides rather than rendering empty. */
+    workspace?: string | null;
+    /** The caller's standing in `workspace`. Ignored while `workspace` is unset. */
+    role?: 'owner' | 'member' | null;
+    entitlements?: string[];
+    /** Required — the whole reason this slot exists is a stamped app rendering no way to sign out. */
+    onSignOut: () => void;
+    /** Optional until the app has an account-settings destination to send it to. */
+    onAccountSettings?: () => void;
+    /** Override the theme action. Defaults to mode-watcher's toggleMode, matching AppShell. */
+    onSwitchTheme?: () => void;
+};
+declare const AppIdentity: import("svelte").Component<$$ComponentProps, {}, "">;
+type AppIdentity = ReturnType<typeof AppIdentity>;
+export default AppIdentity;

package/dist/components/ui/app-identity/index.d.ts

@@ -0,0 +1,2 @@
+export { default as AppIdentity } from './app-identity.svelte';
+export { default } from './app-identity.svelte';

package/dist/components/ui/app-identity/index.js

@@ -0,0 +1,2 @@
+export { default as AppIdentity } from './app-identity.svelte';
+export { default } from './app-identity.svelte';

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

@@ -420,16 +420,26 @@
 	trailing sizes to its clamp without stretching the right-hand group.
 -->
 {#snippet searchButton(sizing: string)}
+	<!--
+		Below `sm` this is an icon-only square, matching the menu/theme-toggle
+		buttons either side of it: a fixed-width pill sharing the row with a
+		`context` switcher or a couple of trailing `actions` badges has as little
+		as the width of one glyph to shrink into, and a button painting a single
+		truncated letter reads as broken rather than as a control. `sizing`
+		supplies the width/flex/padding pair at each tier (base then `sm:`), so
+		this snippet's own classes carry shape only and never fight it over the
+		same property.
+	-->
 	<button
 		onclick={onSearch}
 		class={cn(
-			'border-border text-shell-muted-foreground hover:text-shell-foreground flex items-center gap-2 rounded-md border px-3 py-1.5 text-sm transition-colors',
+			'border-border text-shell-muted-foreground hover:text-shell-foreground flex items-center rounded-md border transition-colors sm:text-sm',
 			sizing
 		)}
 		data-testid="ds-shell-search"
 	>
 		<Search class="size-4 flex-none" />
-		<span class="truncate">{searchLabel}</span>
+		<span class="hidden truncate sm:inline">{searchLabel}</span>
 		{#if searchShortcut}
 			<kbd
 				class="border-border bg-background text-shell-muted-foreground text-2xs ml-auto hidden rounded border px-1.5 py-0.5 font-mono sm:block"
@@ -481,7 +491,7 @@
 				<button
 					bind:this={overlayFirstFocus}
 					onclick={closeMobileNav}
-					class="border-border text-shell-muted-foreground hover:text-shell-foreground absolute top-3 right-3 z-10 grid size-8 place-items-center rounded-md border md:hidden"
+					class="border-border text-shell-muted-foreground hover:text-shell-foreground absolute top-[calc(0.75rem+env(safe-area-inset-top))] right-3 z-10 grid size-8 place-items-center rounded-md border md:hidden"
 					aria-label="Close menu"
 				>
 					<X class="size-4" />
@@ -535,7 +545,7 @@
 
 	<div class="flex min-h-0 min-w-0 flex-1 flex-col">
 		<header
-			class="ds-shell-bar bg-shell/80 text-shell-foreground border-border sticky top-0 z-20 flex h-14 flex-none items-center gap-2 border-b px-3 backdrop-blur sm:gap-3 sm:px-5"
+			class="ds-shell-bar bg-shell/80 text-shell-foreground border-border sticky top-0 z-20 flex min-h-14 flex-none items-center gap-2 border-b px-3 pt-[env(safe-area-inset-top)] backdrop-blur sm:gap-3 sm:px-5"
 		>
 			{#if hasNav}
 				<!-- `aria-controls` names the region this toggle opens. It is present
@@ -568,12 +578,16 @@
 			{#if context}{@render context()}{/if}
 
 			{#if onSearch && searchPlacement === 'leading'}
-				{@render searchButton('min-w-0 flex-1 sm:w-[clamp(200px,32vw,560px)] sm:flex-none')}
+				{@render searchButton(
+					'h-9 w-9 flex-none justify-center px-0 sm:h-auto sm:w-[clamp(200px,32vw,560px)] sm:flex-1 sm:justify-start sm:gap-2 sm:px-3 sm:py-1.5'
+				)}
 			{/if}
 
 			<div class="ml-auto flex flex-none items-center gap-2 sm:gap-3">
 				{#if onSearch && searchPlacement === 'trailing'}
-					{@render searchButton('min-w-0 flex-none sm:w-[clamp(200px,32vw,560px)]')}
+					{@render searchButton(
+						'h-9 w-9 flex-none justify-center px-0 sm:h-auto sm:w-[clamp(200px,32vw,560px)] sm:justify-start sm:gap-2 sm:px-3 sm:py-1.5'
+					)}
 				{/if}
 
 				{#if actions}{@render actions()}{/if}
@@ -694,7 +708,8 @@
 						'flex min-h-0 min-w-0 flex-1 flex-col',
 						'w-full',
 						capped && 'ds-shell-measure',
-						padded && 'px-4 py-5 sm:px-6 md:px-8 md:py-7 2xl:px-12'
+						padded &&
+							'px-4 pt-5 pb-[calc(1.25rem+env(safe-area-inset-bottom))] sm:px-6 md:px-8 md:pt-7 md:pb-[calc(1.75rem+env(safe-area-inset-bottom))] 2xl:px-12'
 					)}
 					data-measure={capped ?? undefined}
 				>

package/dist/components/ui/context-column/context-column.svelte

@@ -4,6 +4,8 @@
 	import { cn, type WithElementRef } from '../../../utils.js';
 	import StatList from '../stat-list/stat-list.svelte';
 	import type { StatItem } from '../stat-list/stat-list.svelte';
+	import AppDialog from '../app-dialog/app-dialog.svelte';
+	import PanelRight from '@lucide/svelte/icons/panel-right';
 
 	// The persistent right-hand context column, identical on every route. It holds
 	// one standing "At a glance" stat card and, on routes with a selectable table,
@@ -16,10 +18,11 @@
 	// the stat card is shrink-0 and any detail takes the remaining height with its
 	// own inner scroll.
 	//
-	// Below xl (1280px) the column is hidden so the primary pane keeps full width:
-	// a fixed nav rail plus a ~400px column would crush the content on a narrow
-	// screen. The proper narrow-viewport treatment (off-canvas nav, stacking panes)
-	// is a separate workstream; this is the regression guard until it lands.
+	// Below xl (1280px) a fixed nav rail plus a ~400px column would crush the
+	// primary pane, so the standing `<aside>` stays hidden there — but its content
+	// does not vanish with it. A floating trigger opens the identical stats/detail
+	// pair in a dialogue instead: the column's shape is a desktop affordance, the
+	// information inside it is not.
 	let {
 		stats,
 		statsTitle = 'At a glance',
@@ -38,8 +41,17 @@
 		detail?: Snippet;
 		ariaLabel?: string;
 	} = $props();
+
+	let sheetOpen = $state(false);
 </script>
 
+{#snippet body()}
+	<StatList items={stats} title={statsTitle} info={statsInfo} />
+	{#if detail}
+		{@render detail()}
+	{/if}
+{/snippet}
+
 <aside
 	bind:this={ref}
 	aria-label={ariaLabel}
@@ -49,8 +61,24 @@
 	)}
 	{...restProps}
 >
-	<StatList items={stats} title={statsTitle} info={statsInfo} />
-	{#if detail}
-		{@render detail()}
-	{/if}
+	{@render body()}
 </aside>
+
+<!-- The reachable stand-in below xl. `size-11` (44px) rather than this
+     package's usual 36px control row: this is the one control whose entire
+     job is making otherwise-unreachable content reachable, so it earns the
+     full touch-target minimum rather than the shell's ordinary density. -->
+<button
+	type="button"
+	onclick={() => (sheetOpen = true)}
+	class="border-border bg-card text-muted-foreground hover:text-foreground ds-edge fixed right-4 bottom-[calc(1rem+env(safe-area-inset-bottom))] z-30 grid size-11 flex-none place-items-center rounded-full border xl:hidden"
+	aria-label={ariaLabel ? `Open ${ariaLabel}` : `Open ${statsTitle}`}
+>
+	<PanelRight class="size-4.5" />
+</button>
+
+<AppDialog bind:open={sheetOpen} title={ariaLabel ?? statsTitle} size="sm">
+	<div class="flex flex-col gap-5">
+		{@render body()}
+	</div>
+</AppDialog>

package/dist/styles.css

@@ -867,6 +867,11 @@
 		transition: width 200ms ease;
 	}
 
+	/* Full viewport height (`inset-block: 0`), so the brand row at its top and
+	   the last nav row at its bottom sit exactly where a notch or a home
+	   indicator gesture bar would cover them. The rail's own sticky state
+	   never needs this — it starts below the page's own top edge in normal
+	   flow, not against the physical screen edge. */
 	.ds-shell-rail[data-drawer='true'] {
 		display: flex;
 		position: fixed;
@@ -874,6 +879,8 @@
 		left: 0;
 		z-index: 50;
 		max-width: 82vw;
+		padding-top: env(safe-area-inset-top);
+		padding-bottom: env(safe-area-inset-bottom);
 		box-shadow:
 			0 10px 15px -3px oklch(0 0 0 / 0.1),
 			0 4px 6px -4px oklch(0 0 0 / 0.1);
@@ -890,6 +897,8 @@
 			position: sticky;
 			z-index: auto;
 			max-width: none;
+			padding-top: 0;
+			padding-bottom: 0;
 			box-shadow: none;
 			animation: none;
 		}

package/package.json

@@ -1,103 +1,104 @@
 {
-  "name": "@poodle64/ui",
-  "version": "2026.9.1",
-  "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": "github:poodle64/design-system",
-  "publishConfig": {
-    "registry": "https://registry.npmjs.org",
-    "access": "public"
-  },
-  "files": [
-    "bin",
-    "dist",
-    "registry"
-  ],
-  "exports": {
-    "./package.json": "./package.json",
-    "./styles.css": "./dist/styles.css",
-    "./utils": {
-      "types": "./dist/utils.d.ts",
-      "svelte": "./dist/utils.js"
-    },
-    "./format": {
-      "types": "./dist/format.d.ts",
-      "svelte": "./dist/format.js"
-    },
-    "./*": {
-      "types": "./dist/components/ui/*/index.d.ts",
-      "svelte": "./dist/components/ui/*/index.js"
-    }
-  },
-  "bin": {
-    "ds-check-colour-surface": "./bin/check-colour-surface.mjs"
-  },
-  "peerDependencies": {
-    "bits-ui": "^2.18.1",
-    "formsnap": "^2.0.1",
-    "mode-watcher": "^1.1.0",
-    "svelte": "^5.33.0",
-    "svelte-sonner": "^1.1.1",
-    "sveltekit-superforms": "^2.30.0"
-  },
-  "peerDependenciesMeta": {
-    "mode-watcher": {
-      "optional": true
-    },
-    "svelte-sonner": {
-      "optional": true
-    },
-    "formsnap": {
-      "optional": true
-    },
-    "sveltekit-superforms": {
-      "optional": true
-    }
-  },
-  "dependencies": {
-    "@jsonforms/core": "^3.8.0",
-    "@lucide/svelte": "^1.25.0",
-    "@tanstack/table-core": "^8.21.3",
-    "clsx": "^2.1.1",
-    "tailwind-merge": "^3.6.0",
-    "tailwind-variants": "^3.2.2",
-    "tw-animate-css": "^1.4.0"
-  },
-  "devDependencies": {
-    "@poodle64/design-tokens": "workspace:*",
-    "@sveltejs/kit": "^2.63.0",
-    "@sveltejs/package": "^2.5.8",
-    "@sveltejs/vite-plugin-svelte": "^7.1.2",
-    "@tailwindcss/cli": "^4.3.2",
-    "@testing-library/jest-dom": "^7.0.0",
-    "@testing-library/svelte": "^5.4.2",
-    "@types/node": "^22.20.1",
-    "bits-ui": "^2.18.1",
-    "formsnap": "^2.0.1",
-    "jsdom": "^29.1.1",
-    "mode-watcher": "^1.1.0",
-    "playwright": "^1.62.0",
-    "publint": "^0.3.15",
-    "svelte": "^5.56.2",
-    "svelte-check": "^4.6.0",
-    "svelte-sonner": "^1.1.1",
-    "sveltekit-superforms": "^2.30.2",
-    "tailwindcss": "^4.3.2",
-    "typescript": "^6.0.3",
-    "vite": "^8.0.16",
-    "vitest": "^4.1.10"
-  },
-  "scripts": {
-    "build": "node scripts/generate-registry.mjs && svelte-kit sync && svelte-package && publint",
-    "registry": "node scripts/generate-registry.mjs",
-    "registry:check": "node scripts/generate-registry.mjs --check",
-    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-    "test": "pnpm run build && vitest run",
-    "test:browser": "pnpm run harness:build && node harness/drive.mjs",
-    "prepublishOnly": "pnpm run build",
-    "harness:build": "vite build --config harness/vite.config.ts && tailwindcss -i harness/harness.css -o harness/dist/app.css --minify",
-    "harness:serve": "python3 -m http.server 4180 --directory harness/dist"
-  },
-  "packageManager": "pnpm@10.28.0"
+	"name": "@poodle64/ui",
+	"version": "2026.9.3",
+	"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": "github:radar-hooves/design-system",
+	"publishConfig": {
+		"registry": "https://registry.npmjs.org",
+		"access": "public",
+		"provenance": false
+	},
+	"files": [
+		"bin",
+		"dist",
+		"registry"
+	],
+	"exports": {
+		"./package.json": "./package.json",
+		"./styles.css": "./dist/styles.css",
+		"./utils": {
+			"types": "./dist/utils.d.ts",
+			"svelte": "./dist/utils.js"
+		},
+		"./format": {
+			"types": "./dist/format.d.ts",
+			"svelte": "./dist/format.js"
+		},
+		"./*": {
+			"types": "./dist/components/ui/*/index.d.ts",
+			"svelte": "./dist/components/ui/*/index.js"
+		}
+	},
+	"bin": {
+		"ds-check-colour-surface": "./bin/check-colour-surface.mjs"
+	},
+	"peerDependencies": {
+		"bits-ui": "^2.18.1",
+		"formsnap": "^2.0.1",
+		"mode-watcher": "^1.1.0",
+		"svelte": "^5.33.0",
+		"svelte-sonner": "^1.1.1",
+		"sveltekit-superforms": "^2.30.0"
+	},
+	"peerDependenciesMeta": {
+		"mode-watcher": {
+			"optional": true
+		},
+		"svelte-sonner": {
+			"optional": true
+		},
+		"formsnap": {
+			"optional": true
+		},
+		"sveltekit-superforms": {
+			"optional": true
+		}
+	},
+	"dependencies": {
+		"@jsonforms/core": "^3.8.0",
+		"@lucide/svelte": "^1.25.0",
+		"@tanstack/table-core": "^8.21.3",
+		"clsx": "^2.1.1",
+		"tailwind-merge": "^3.6.0",
+		"tailwind-variants": "^3.2.2",
+		"tw-animate-css": "^1.4.0"
+	},
+	"devDependencies": {
+		"@poodle64/design-tokens": "workspace:*",
+		"@sveltejs/kit": "^2.63.0",
+		"@sveltejs/package": "^2.5.8",
+		"@sveltejs/vite-plugin-svelte": "^7.1.2",
+		"@tailwindcss/cli": "^4.3.2",
+		"@testing-library/jest-dom": "^7.0.0",
+		"@testing-library/svelte": "^5.4.2",
+		"@types/node": "^22.20.1",
+		"bits-ui": "^2.18.1",
+		"formsnap": "^2.0.1",
+		"jsdom": "^29.1.1",
+		"mode-watcher": "^1.1.0",
+		"playwright": "^1.62.0",
+		"publint": "^0.3.15",
+		"svelte": "^5.56.2",
+		"svelte-check": "^4.6.0",
+		"svelte-sonner": "^1.1.1",
+		"sveltekit-superforms": "^2.30.2",
+		"tailwindcss": "^4.3.2",
+		"typescript": "^6.0.3",
+		"vite": "^8.0.16",
+		"vitest": "^4.1.10"
+	},
+	"scripts": {
+		"build": "node scripts/generate-registry.mjs && svelte-kit sync && svelte-package && publint",
+		"registry": "node scripts/generate-registry.mjs",
+		"registry:check": "node scripts/generate-registry.mjs --check",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"test": "pnpm run build && vitest run",
+		"test:browser": "pnpm run harness:build && node harness/drive.mjs",
+		"prepublishOnly": "pnpm run build",
+		"harness:build": "vite build --config harness/vite.config.ts && tailwindcss -i harness/harness.css -o harness/dist/app.css --minify",
+		"harness:serve": "python3 -m http.server 4180 --directory harness/dist"
+	},
+	"packageManager": "pnpm@10.28.0"
 }

package/registry/component-map.json

@@ -1,10 +1,10 @@
 {
 	"meta": {
 		"package": "@poodle64/ui",
-		"version": "2026.9.1",
+		"version": "2026.9.3",
 		"generatedBy": "scripts/generate-registry.mjs",
 		"source": "scripts/situations.json + package source (DO NOT EDIT the outputs by hand)",
-		"componentCount": 55,
+		"componentCount": 56,
 		"situationCount": 15
 	},
 	"situations": [
@@ -299,6 +299,13 @@
 					"import": "@poodle64/ui/context-column",
 					"props": "stats, statsTitle?, statsInfo?, detail?, ariaLabel?",
 					"insteadOf": "a hand-built right-hand <aside> with a stat card and a detail pane"
+				},
+				{
+					"name": "AppIdentity",
+					"dir": "app-identity",
+					"import": "@poodle64/ui/app-identity",
+					"props": "user, workspace?, role?, entitlements?, onSignOut, onAccountSettings?, onSwitchTheme?",
+					"insteadOf": "a hand-rolled account/avatar dropdown wired to raw DropdownMenu.* + Avatar.*"
 				}
 			]
 		},

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.1`. 55 components, 15 situations.
+Generated from `@poodle64/ui@2026.9.3`. 56 components, 15 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.
 
@@ -127,6 +127,7 @@ _The standing chrome — the app shell and its nav, the one page-title treatment
 | `AppShell` | `@poodle64/ui/app-shell` | `nav, currentPath, brandTitle?, actions?, context?, children` | a bespoke nav rail + header layout per app |
 | `PageHeader` | `@poodle64/ui/page-header` | `title?, eyebrow?, breadcrumbs?, icon?, subtitle?, info?, meta?, actions?` | a hand-written <h1> and title bar (the drift gate fails this) |
 | `ContextColumn` | `@poodle64/ui/context-column` | `stats, statsTitle?, statsInfo?, detail?, ariaLabel?` | a hand-built right-hand <aside> with a stat card and a detail pane |
+| `AppIdentity` | `@poodle64/ui/app-identity` | `user, workspace?, role?, entitlements?, onSignOut, onAccountSettings?, onSwitchTheme?` | a hand-rolled account/avatar dropdown wired to raw DropdownMenu.* + Avatar.* |
 
 ## A dialog or overlay