@poodle64/ui 2026.9.0 → 2026.9.2

package/README.md

@@ -1089,6 +1089,42 @@ one is bound to Xero tax codes besides. Relative time ("2 hours ago") is out
 too — it rides on `date-fns` in the one app that has it, and a display formatter
 is not worth making that a dependency of every consumer.
 
+## The gate: `ds-check-colour-surface`
+
+The package ships the gate that proves its own surface actually resolves in the
+consuming app:
+
+```bash
+pnpm exec ds-check-colour-surface                          # entry: src/app.css
+pnpm exec ds-check-colour-surface --entry frontend/src/app.css   # from a repo root
+```
+
+Tailwind and this package are both resolved from the STYLESHEET's directory, not
+the working directory, so the second form works from a repo root — which is where
+a pre-commit hook runs, and how the vendored copies this replaces were invoked.
+
+An app's `app.css` carries two load-bearing lines, and dropping either breaks
+nothing any other gate can see — `build`, `lint`, `lint:css` and `check` all
+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   */
+```
+
+They fail differently, so the gate asserts them differently: it compiles the
+semantic utilities and requires each to emit a real declaration (the `@import`),
+then asks the compiler which sources it resolved and requires this package's own
+classes to appear and compile (the `@source`). Tailwind comes from the app, not
+from this package's tree, so what it compiles is what the app ships.
+
+It was vendored into nine apps as a byte-identical `scripts/check-colour-surface.mjs`
+and absent from three. If an app still carries that copy, delete it and the
+`lint:colour` script that calls it once the app is on this version or later —
+the estate's shared frontend-CI workflow prefers the shipped bin and keeps the
+vendored path only as a fallback.
+
 ## Verifying a change
 
 ```bash

package/bin/check-colour-surface.mjs

@@ -0,0 +1,262 @@
+#!/usr/bin/env node
+/**
+ * The shadcn colour surface must actually resolve. Nothing else notices if it does not.
+ *
+ * The consuming app's `src/app.css` carries two load-bearing lines:
+ *
+ *   @import '@poodle64/ui/styles.css'   the shadcn semantic surface AND its
+ *                                       Tailwind v4 `@theme inline` registration
+ *   @source '.../@poodle64/ui/dist'     puts the package inside Tailwind's scan
+ *
+ * Delete either and every gate an app has still passes: `pnpm build`, `lint`,
+ * `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
+ * app in the estate before anyone saw it: dropdowns with no hover, inputs with no
+ * border, cards and popovers with no surface.
+ *
+ * The two lines fail differently, so this asserts them differently:
+ *
+ *   registration  compile a fixed set of semantic utilities and require each to
+ *                 emit a real declaration. Losing the @import kills all of them.
+ *   scanning      ask the compiler which sources it resolved, read the package's
+ *                 own dist through them, and require that its classes both appear
+ *                 and compile. Losing the @source leaves registration intact — the
+ *                 utilities still compile when named explicitly — and silently
+ *                 stops generating everything the shared components themselves use.
+ *
+ * It ships from the package because nine apps carried a byte-identical copy of it
+ * under `frontend/scripts/`, and three carried none: a gate that guards THIS
+ * package's surface, maintained in nine places, is the divergence it exists to
+ * stop. The only substantive change from that vendored form is where it looks —
+ * the app root comes from the working directory or `--entry`, not from the
+ * script's own location, because the script no longer lives in the app.
+ *
+ * Usage: ds-check-colour-surface [--entry <path to app.css>]   (default: src/app.css)
+ */
+
+import { existsSync, readFileSync, realpathSync, statSync } from 'node:fs';
+import { readFile, readdir } from 'node:fs/promises';
+import { createRequire } from 'node:module';
+import { dirname, join, relative, resolve } from 'node:path';
+import { fileURLToPath, pathToFileURL } from 'node:url';
+import process from 'node:process';
+
+/** Semantic names the package registers; each must emit a real declaration. */
+const REGISTERED = ['bg-card', 'bg-muted', 'bg-accent', 'bg-popover', 'border-input'];
+const PACKAGE = '@poodle64/ui';
+
+/**
+ * Resolve a stylesheet the way the bundler does.
+ *
+ * `require.resolve` cannot be used: a CSS-only package exports neither a JS main
+ * nor `./package.json`. Walk `node_modules` on disk instead, from the REAL path —
+ * pnpm links each dependency into a store directory and a package's own siblings
+ * live beside it there, not under this app's symlink.
+ */
+function resolveStylesheet(id, base) {
+	if (id.startsWith('.') || id.startsWith('/')) return resolve(base, id);
+	const scoped = id.startsWith('@');
+	const pkgName = id
+		.split('/')
+		.slice(0, scoped ? 2 : 1)
+		.join('/');
+	const sub = id
+		.split('/')
+		.slice(scoped ? 2 : 1)
+		.join('/');
+	for (let dir = realpathSync(base); ; dir = dirname(dir)) {
+		const root = resolve(dir, 'node_modules', pkgName);
+		if (existsSync(root)) {
+			const pkg = JSON.parse(readFileSync(resolve(root, 'package.json'), 'utf8'));
+			const pick = (e) =>
+				typeof e === 'string' ? e : (e?.style ?? e?.default ?? e?.import ?? e?.require);
+			const key = sub ? `./${sub}` : '.';
+			let entry = pick(pkg.exports?.[key]) ?? pick(pkg.exports?.[`${key}.css`]);
+			if (!entry && sub) {
+				const direct = resolve(root, sub.endsWith('.css') ? sub : `${sub}.css`);
+				if (existsSync(direct)) return direct;
+			}
+			entry ??= pkg.style ?? pick(pkg.exports?.['.']) ?? pkg.main;
+			if (!entry) throw new Error(`no stylesheet entry for ${id}`);
+			return resolve(root, entry);
+		}
+		if (dirname(dir) === dir) throw new Error(`cannot resolve stylesheet ${id} from ${base}`);
+	}
+}
+
+/**
+ * Tailwind comes from the APP, never from this package's own tree.
+ *
+ * Under pnpm a bin runs from inside the store, where only what @poodle64/ui
+ * itself declares is reachable; the compiler that matters is the one the app
+ * builds with, and compiling against a different copy would prove nothing about
+ * the app's own output.
+ *
+ * Resolution starts at the STYLESHEET, not the working directory, so
+ * `--entry frontend/src/app.css` works from a repo root — which is where a
+ * pre-commit hook runs, and where the nine vendored copies this replaces were
+ * invoked from.
+ */
+async function loadCompiler(from) {
+	const require = createRequire(resolve(from, '_'));
+	let manifestPath;
+	try {
+		manifestPath = require.resolve('tailwindcss/package.json');
+	} catch {
+		throw new Error(
+			`tailwindcss is not resolvable from ${from} — this gate compiles the app's own ` +
+				'stylesheet, so it needs the compiler the app builds with'
+		);
+	}
+
+	// Resolve the ESM condition explicitly. `require.resolve('tailwindcss')`
+	// picks the `require` condition — Tailwind's CJS bundle — from which
+	// `compile` is not an ESM named export, so the import succeeds and hands
+	// back undefined. That reads as "compile is not a function" several frames
+	// later, which is a long way from the actual cause.
+	const manifest = JSON.parse(readFileSync(manifestPath, 'utf8'));
+	const map = manifest.exports?.['.'] ?? {};
+	const relative_ = typeof map === 'string' ? map : (map.import ?? map.default ?? map.require);
+	if (!relative_) throw new Error('tailwindcss declares no importable entry point');
+	const entry = resolve(dirname(manifestPath), relative_);
+
+	const module = await import(pathToFileURL(entry).href);
+	const compile = module.compile ?? module.default?.compile;
+	if (typeof compile !== 'function') {
+		throw new Error(`tailwindcss at ${entry} exports no compile(): is it v4?`);
+	}
+	return compile;
+}
+
+async function buildCompiler(compile, entryPath) {
+	return compile(await readFile(entryPath, 'utf8'), {
+		base: dirname(entryPath),
+		loadStylesheet: async (id, base) => {
+			const path = resolveStylesheet(id, base);
+			return { path, base: dirname(path), content: await readFile(path, 'utf8') };
+		},
+		loadModule: async (id, base) => {
+			const req = createRequire(resolve(base, '_'));
+			const path = id.startsWith('.') ? resolve(base, id) : req.resolve(id);
+			return { path, base: dirname(path), module: (await import(pathToFileURL(path).href)).default };
+		}
+	});
+}
+
+async function filesUnder(dir, acc = []) {
+	for (const e of await readdir(dir, { withFileTypes: true })) {
+		const p = join(dir, e.name);
+		if (e.isDirectory()) await filesUnder(p, acc);
+		else if (/\.(svelte|js|ts)$/.test(e.name)) acc.push(p);
+	}
+	return acc;
+}
+
+/** Class-ish tokens, deliberately loose: a superset is fine, we only need some to compile. */
+function candidatesIn(text) {
+	return new Set(
+		(text.match(/[a-z][a-z0-9]*(?:-[a-z0-9]+)+/g) ?? []).filter(
+			(c) => c.length < 40 && !c.includes('--')
+		)
+	);
+}
+
+export async function checkColourSurface({ cwd = process.cwd(), entry } = {}) {
+	const entryPath = resolve(cwd, entry ?? join('src', 'app.css'));
+	if (!existsSync(entryPath)) {
+		throw new Error(
+			`no stylesheet at ${relative(cwd, entryPath) || entryPath} — run this from the app ` +
+				'directory, or pass --entry'
+		);
+	}
+
+	const failures = [];
+	const compiler = await buildCompiler(await loadCompiler(dirname(entryPath)), entryPath);
+
+	// 1. Registration — the @import.
+	const registeredCss = compiler.build(REGISTERED);
+	for (const utility of REGISTERED) {
+		const rule = registeredCss.match(new RegExp(`\\.${utility}\\s*\\{([^}]*)\\}`));
+		if (!rule) {
+			failures.push(`${utility}: no rule at all — the shadcn surface is not registered`);
+		} else if (!/var\(--/.test(rule[1])) {
+			failures.push(`${utility}: emits ${rule[1].trim()} — not resolving to a token`);
+		}
+	}
+
+	// 2. Scanning — the @source.
+	// Each entry is { base, pattern, negated }; the pattern is the @source argument,
+	// relative to the file that declared it. Removing the @source line empties this
+	// list entirely, which is the signal.
+	const scanned = (compiler.sources ?? [])
+		.filter((s) => !s.negated)
+		.map((s) => (typeof s === 'string' ? s : resolve(s.base, s.pattern)));
+	const packageSource = scanned.find((s) => s.includes(PACKAGE));
+	if (!packageSource) {
+		failures.push(
+			`no @source covers ${PACKAGE}: Tailwind never scans the shared components, so every ` +
+				`utility they use and this app does not compiles to nothing`
+		);
+	} else if (!existsSync(packageSource) || !statSync(packageSource).isDirectory()) {
+		failures.push(`the @source for ${PACKAGE} points at ${packageSource}, which is not a directory`);
+	} else {
+		const candidates = new Set();
+		for (const file of await filesUnder(packageSource)) {
+			for (const c of candidatesIn(await readFile(file, 'utf8'))) candidates.add(c);
+		}
+		const produced = compiler.build([...candidates]);
+		const emitted = [...candidates].filter((c) => produced.includes(`.${c}`));
+		if (emitted.length === 0) {
+			failures.push(
+				`${PACKAGE}'s own sources produced no utilities: the package is in the scan but ` +
+					`nothing it uses compiles`
+			);
+		}
+	}
+
+	return { entryPath, failures };
+}
+
+async function main(argv) {
+	const at = argv.indexOf('--entry');
+	const entry = at === -1 ? undefined : argv[at + 1];
+	if (at !== -1 && !entry) {
+		console.error('ds-check-colour-surface: --entry needs a path');
+		return 1;
+	}
+
+	let result;
+	try {
+		result = await checkColourSurface({ entry });
+	} catch (error) {
+		// A gate that could not run has not passed. Say which, and where it looked.
+		console.error(`ds-check-colour-surface: ${error.message}`);
+		console.error(`  cwd: ${process.cwd()}`);
+		return 1;
+	}
+
+	if (result.failures.length > 0) {
+		console.error('\nThe shadcn colour surface does not resolve:\n');
+		for (const f of result.failures) console.error(`  - ${f}`);
+		console.error(
+			`\n${relative(process.cwd(), result.entryPath)} must keep BOTH ` +
+				`\`@import '${PACKAGE}/styles.css'\` and \`@source '../node_modules/${PACKAGE}/dist'\`,\n` +
+				`and must not re-declare the shadcn names (--card, --muted, --accent, --popover,\n` +
+				`--input) as plain custom properties: that makes the variable exist without\n` +
+				`registering it as a theme colour.\n`
+		);
+		return 1;
+	}
+
+	console.log(
+		`colour surface: ${REGISTERED.length} semantic utilities resolve, ${PACKAGE} is scanned`
+	);
+	return 0;
+}
+
+// Importable for the test suite; only a direct CLI invocation exits.
+if (process.argv[1] && realpathSync(process.argv[1]) === fileURLToPath(import.meta.url)) {
+	process.exit(await main(process.argv.slice(2)));
+}

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/package.json

@@ -1,15 +1,17 @@
 {
   "name": "@poodle64/ui",
-  "version": "2026.9.0",
+  "version": "2026.9.2",
   "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"
+    "access": "public",
+    "provenance": false
   },
   "files": [
+    "bin",
     "dist",
     "registry"
   ],
@@ -29,6 +31,9 @@
       "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",

package/registry/component-map.json

@@ -1,10 +1,10 @@
 {
 	"meta": {
 		"package": "@poodle64/ui",
-		"version": "2026.9.0",
+		"version": "2026.9.2",
 		"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.0`. 55 components, 15 situations.
+Generated from `@poodle64/ui@2026.9.2`. 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