@poodle64/ui 2026.9.2 → 2026.9.4

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

@@ -23,6 +23,13 @@
 	 * 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.
+	 *
+	 * `onManageMembers` exists for the caller a workspace switcher has nothing
+	 * to show: `WorkspaceMenu` (the factory template) renders nothing in the
+	 * bar for a single-member workspace, and this is where Members lands
+	 * instead (operator ruling, 07/09/2026, master-project#291's org-of-one
+	 * case). Wire it whenever the app has a members route, whether or not it
+	 * also renders a switcher.
 	 */
 	import { toggleMode } from 'mode-watcher';
 	import * as DropdownMenu from '../dropdown-menu/index.js';
@@ -35,6 +42,7 @@
 		entitlements = [],
 		onSignOut,
 		onAccountSettings,
+		onManageMembers,
 		onSwitchTheme
 	}: {
 		user: { username: string; display_name: string | null; email: string | null };
@@ -47,6 +55,19 @@
 		onSignOut: () => void;
 		/** Optional until the app has an account-settings destination to send it to. */
 		onAccountSettings?: () => void;
+		/**
+		 * Reach the workspace's members surface from here. Ignored while
+		 * `workspace` is unset.
+		 *
+		 * A workspace holding exactly one member has nothing to switch, so the
+		 * app's own workspace switcher renders nothing for it (operator ruling,
+		 * 07/09/2026) — and Members was that switcher's one non-switching act,
+		 * the route an org-of-one needs to make its first grant. This is where
+		 * that act lives once the switcher is gone; a switcher still showing for
+		 * several workspaces keeps its own Members entry too, so the two never
+		 * disagree about where it is.
+		 */
+		onManageMembers?: () => void;
 		/** Override the theme action. Defaults to mode-watcher's toggleMode, matching AppShell. */
 		onSwitchTheme?: () => void;
 	} = $props();
@@ -63,7 +84,31 @@
 		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));
+
+	/**
+	 * Initials for a bare HANDLE — no display name to fall back on.
+	 *
+	 * A handle has no word boundaries a name has: `initialsOf` slicing the
+	 * first two characters of one unbroken token produces a pair that reads
+	 * as real initials while meaning nothing (operator ruling, 07/09/2026).
+	 * Where the handle itself encodes two parts — `firstname.lastname`,
+	 * `firstname-lastname` — one letter from each reads the same as a real
+	 * name's initials; where it does not, only the first letter is honest.
+	 */
+	function handleInitials(handle: string): string {
+		const parts = handle.trim().split(/[.-]+/).filter(Boolean);
+		if (parts.length === 0) return '';
+		if (parts.length === 1) return parts[0].slice(0, 1).toUpperCase();
+		return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
+	}
+
+	// Never text in the bar (operator ruling, 07/09/2026): with no display
+	// name, the trigger below still renders only this avatar, initialled off
+	// the handle rather than off `shown`, which for this branch just IS the
+	// handle.
+	const initials = $derived(
+		user.display_name ? initialsOf(user.display_name) : handleInitials(user.username)
+	);
 
 	function switchTheme() {
 		if (onSwitchTheme) onSwitchTheme();
@@ -128,6 +173,9 @@
 					{/each}
 				</div>
 			{/if}
+			{#if onManageMembers}
+				<DropdownMenu.Item onSelect={onManageMembers}>Members</DropdownMenu.Item>
+			{/if}
 		{/if}
 		<DropdownMenu.Separator />
 		<DropdownMenu.Item onSelect={switchTheme}>Switch theme</DropdownMenu.Item>

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

@@ -13,6 +13,19 @@ type $$ComponentProps = {
     onSignOut: () => void;
     /** Optional until the app has an account-settings destination to send it to. */
     onAccountSettings?: () => void;
+    /**
+     * Reach the workspace's members surface from here. Ignored while
+     * `workspace` is unset.
+     *
+     * A workspace holding exactly one member has nothing to switch, so the
+     * app's own workspace switcher renders nothing for it (operator ruling,
+     * 07/09/2026) — and Members was that switcher's one non-switching act,
+     * the route an org-of-one needs to make its first grant. This is where
+     * that act lives once the switcher is gone; a switcher still showing for
+     * several workspaces keeps its own Members entry too, so the two never
+     * disagree about where it is.
+     */
+    onManageMembers?: () => void;
     /** Override the theme action. Defaults to mode-watcher's toggleMode, matching AppShell. */
     onSwitchTheme?: () => void;
 };

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,104 +1,107 @@
 {
-  "name": "@poodle64/ui",
-  "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",
-    "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"
+	"name": "@poodle64/ui",
+	"version": "2026.9.4",
+	"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"
+	},
+	"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,7 +1,7 @@
 {
 	"meta": {
 		"package": "@poodle64/ui",
-		"version": "2026.9.2",
+		"version": "2026.9.4",
 		"generatedBy": "scripts/generate-registry.mjs",
 		"source": "scripts/situations.json + package source (DO NOT EDIT the outputs by hand)",
 		"componentCount": 56,

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.2`. 56 components, 15 situations.
+Generated from `@poodle64/ui@2026.9.4`. 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.