@poodle64/ui 2026.9.11 → 2026.9.13

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

@@ -84,6 +84,7 @@
 	import Menu from '@lucide/svelte/icons/menu';
 	import X from '@lucide/svelte/icons/x';
 	import Search from '@lucide/svelte/icons/search';
+	import Settings from '@lucide/svelte/icons/settings';
 	import Sun from '@lucide/svelte/icons/sun';
 	import Moon from '@lucide/svelte/icons/moon';
 	import PanelLeftClose from '@lucide/svelte/icons/panel-left-close';
@@ -107,6 +108,10 @@
 		context,
 		actions,
 		identity,
+		settingsHref,
+		settingsLabel = 'Settings',
+		version,
+		versionHref,
 		onSearch,
 		searchLabel = 'Search…',
 		searchShortcut = '⌘K',
@@ -162,8 +167,25 @@
 		context?: Snippet;
 		/** Trailing top-bar slot, before the theme toggle: app-level action buttons. */
 		actions?: Snippet;
-		/** The signed-in user surface. Rendered once, at the end of the top bar. */
+		/** The signed-in user surface. Rendered once, at the end of the top bar.
+		 *  It stays there at EVERY width rather than moving into the rail foot on
+		 *  desktop: the rail is an overlay drawer below `md`, so a rail-placed
+		 *  account is two taps away and who-am-I is hidden behind the menu; and
+		 *  the alternative, rendering it in both, is the duplication this file
+		 *  exists to avoid. */
 		identity?: Snippet;
+		/** Where the Settings row at the rail's foot links. Absent renders no row.
+		 *  Settings sits at the foot because configuring the app is not navigating
+		 *  it, and the split reads without a label. */
+		settingsHref?: string;
+		settingsLabel?: string;
+		/** The build this person is looking at, e.g. `2026.9.3 · b032a3a`. Rendered
+		 *  as one muted line under the Settings row: no icon, no hover, not a nav
+		 *  row. It earns its place by answering "what am I running" the moment
+		 *  someone reports a bug, and it links into Settings where the full
+		 *  About section lives. */
+		version?: string;
+		versionHref?: string;
 		/** Provide to render the search affordance. Usually opens a CommandPalette. */
 		onSearch?: () => void;
 		searchLabel?: string;
@@ -638,6 +660,41 @@
 				label={navLabel}
 				onNavigate={() => (mobileNavOpen = false)}
 			/>
+
+			<!--
+				The rail's foot. `mt-auto` pins it under the nav however short the
+				section list is, so it sits on the rail's bottom edge rather than
+				trailing the last section. Two things live here and nothing else:
+				where you configure the app, and which build you are looking at.
+
+				Settings is a nav row like any other and takes the same active and
+				hover treatment, because it IS a destination — it is last rather
+				than separate because configuring the app is not navigating it.
+				The version is not a row: no icon, no tile, no hover, one muted
+				line, so it reads as metadata and never competes for a click.
+			-->
+			{#if settingsHref || version}
+				<div class="ds-shell-rail-foot mt-auto" class:sr-only={railCollapsed && !mobileNavOpen}>
+					{#if settingsHref}
+						<a
+							href={settingsHref}
+							class="ds-nav-item"
+							aria-current={currentPath?.startsWith(settingsHref) ? 'page' : undefined}
+							onclick={() => (mobileNavOpen = false)}
+						>
+							<Settings class="ds-nav-icon size-[1.125rem] flex-none" aria-hidden="true" />
+							<span class="truncate">{settingsLabel}</span>
+						</a>
+					{/if}
+					{#if version}
+						{#if versionHref}
+							<a href={versionHref} class="ds-shell-version">{version}</a>
+						{:else}
+							<p class="ds-shell-version">{version}</p>
+						{/if}
+					{/if}
+				</div>
+			{/if}
 			{#if collapsible && !railCollapsed && !mobileNavOpen}
 				<!-- The rail's right edge: drag to resize, drag past the snap to
 				     collapse, arrows to nudge, Home to reset, double-click to reset.
@@ -732,14 +789,14 @@
 
 			{#if onSearch && searchPlacement === 'leading'}
 				{@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'
+					'h-9 w-9 flex-none justify-center px-0 sm:h-auto sm:w-[clamp(200px,24vw,420px)] 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(
-						'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'
+						'h-9 w-9 flex-none justify-center px-0 sm:h-auto sm:w-[clamp(180px,18vw,300px)] sm:justify-start sm:gap-2 sm:px-3 sm:py-1.5'
 					)}
 				{/if}
 

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

@@ -124,8 +124,25 @@ type $$ComponentProps = {
     context?: Snippet;
     /** Trailing top-bar slot, before the theme toggle: app-level action buttons. */
     actions?: Snippet;
-    /** The signed-in user surface. Rendered once, at the end of the top bar. */
+    /** The signed-in user surface. Rendered once, at the end of the top bar.
+     *  It stays there at EVERY width rather than moving into the rail foot on
+     *  desktop: the rail is an overlay drawer below `md`, so a rail-placed
+     *  account is two taps away and who-am-I is hidden behind the menu; and
+     *  the alternative, rendering it in both, is the duplication this file
+     *  exists to avoid. */
     identity?: Snippet;
+    /** Where the Settings row at the rail's foot links. Absent renders no row.
+     *  Settings sits at the foot because configuring the app is not navigating
+     *  it, and the split reads without a label. */
+    settingsHref?: string;
+    settingsLabel?: string;
+    /** The build this person is looking at, e.g. `2026.9.3 · b032a3a`. Rendered
+     *  as one muted line under the Settings row: no icon, no hover, not a nav
+     *  row. It earns its place by answering "what am I running" the moment
+     *  someone reports a bug, and it links into Settings where the full
+     *  About section lives. */
+    version?: string;
+    versionHref?: string;
     /** Provide to render the search affordance. Usually opens a CommandPalette. */
     onSearch?: () => void;
     searchLabel?: string;

package/dist/styles.css

@@ -793,6 +793,43 @@
 		border-left: 1px solid color-mix(in oklch, var(--ds-nav-ink) 50%, transparent);
 	}
 
+	/* The rail's foot: where you configure the app, and which build you are on.
+	   Separated from the scrolling section list by a rule in the chrome's OWN
+	   ink rather than `--border`, for the reason the group guide takes the same
+	   treatment — a page-surface token cannot follow chrome an app has branded. */
+	/* `padding-inline` matches `.ds-nav`'s own `px-3`, because the foot sits
+	   OUTSIDE that wrapper: without it the Settings row's icon lands 0.75rem
+	   left of every icon above it and the rail reads as two lists. */
+	.ds-shell-rail-foot {
+		display: flex;
+		flex-direction: column;
+		padding-block: 0.375rem 0.75rem;
+		padding-inline: 0.75rem;
+		border-top: 1px solid color-mix(in oklch, var(--ds-nav-ink) 22%, transparent);
+	}
+
+	/* Metadata, not a row. No icon, no tile, no hover: it answers "what am I
+	   running" when someone reports a bug and otherwise stays out of the way.
+	   `tabular-nums` so a version does not re-flow as the digits change. */
+	/* Below Settings, on the rail's bottom edge, so the rail OPENS with the app's
+	   name and CLOSES with its build — identity at both ends, the action between
+	   them. Above Settings would put metadata before the thing people click.
+	   `padding-inline` matches `.ds-nav-item`'s own, so it starts on the same
+	   vertical as the icons rather than the labels: it is a line of metadata,
+	   not a row missing its icon. */
+	.ds-shell-version {
+		margin: 0;
+		padding: 0.25rem 0.625rem 0;
+		color: var(--ds-nav-ink-muted);
+		font-size: var(--ds-text-2xs);
+		font-variant-numeric: tabular-nums;
+		text-decoration: none;
+	}
+
+	a.ds-shell-version:hover {
+		color: var(--ds-nav-ink);
+	}
+
 	/* `hidden` is an attribute the UA stylesheet honours at the weakest possible
 	   specificity, so the `display: flex` above beats it and a closed group would
 	   render wide open. This is not belt-and-braces; without it the attribute is

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@poodle64/ui",
-	"version": "2026.9.11",
+	"version": "2026.9.13",
 	"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",

package/registry/component-map.json

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

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.11`. 57 components, 15 situations.
+Generated from `@poodle64/ui@2026.9.13`. 57 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.