@poodle64/ui 2026.10.9 → 2026.10.11

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

@@ -701,8 +701,11 @@
 					data-testid="ds-shell-location"
 				>
 					{#if location}
-						<span class="text-shell-muted-foreground max-w-48 flex-none truncate text-sm"
-							>{location}</span
+						<span
+							class={cn(
+								'text-shell-muted-foreground max-w-48 flex-none truncate text-sm',
+								controls.content && 'max-sm:hidden'
+							)}>{location}</span
 						>
 					{/if}
 					{#if controls.content}{@render controls.content()}{/if}

package/dist/components/ui/ledger/ledger.svelte

@@ -547,7 +547,7 @@
 			>
 		{:else if c.cell}
 			<span class={cn(CELL, through, 'flex items-center self-center')} {style}
-				>{@render c.cell(r)}
+				>{@render c.cell(r, c)}
 				{#if c.actions}<span class="pointer-events-auto flex flex-none items-center gap-1" data-slot="ledger-actions">{@render c.actions(r)}</span>{/if}</span
 			>
 		{:else}

package/dist/components/ui/ledger/types.d.ts

@@ -77,8 +77,12 @@ export interface ListColumn<R> {
     /**
      * A cell of the module's own markup. On a row that opens, a click passes
      * through the cell to the row; a control inside takes `pointer-events-auto`.
+     * It gets the column too, so one snippet can serve columns built at runtime,
+     * telling them apart by `key`. Read the row's figures in the snippet's
+     * markup, which follows the row when it changes; a `createRawSnippet` draws
+     * once at mount and goes stale.
      */
-    cell?: Snippet<[R]>;
+    cell?: Snippet<[R, ListColumn<R>]>;
 }
 /**
  * A column the module offers the ledger. The keys `date`, `title`, `amount`

package/dist/components/ui/page-canvas/page-canvas.svelte

@@ -332,7 +332,7 @@
 						<ChevronLeft class="size-4" />
 					</Button>
 					<span class="text-foreground min-w-16 text-center text-xs font-medium tabular-nums">
-						{currentPage} / {pageCount}
+						{currentPage} of {pageCount}
 					</span>
 					<Button
 						variant="outline"
@@ -355,7 +355,7 @@
 				<Minus class="size-4" />
 			</Button>
 			<span class="text-foreground min-w-11 text-center text-xs font-medium tabular-nums">
-				{Math.round(zoom * 100)}%
+				{zoom === 1 ? 'Fit' : `${Math.round(zoom * 100)}%`}
 			</span>
 			<Button variant="outline" size="icon" class="size-8" onclick={zoomIn} aria-label="Zoom in">
 				<Plus class="size-4" />

package/dist/components/ui/record-list/record-list.svelte

@@ -220,7 +220,7 @@
 </script>
 
 {#snippet value(c: (typeof shown)[number], r: R)}
-	{#if c.cell}{@render c.cell(r)}{:else}{c.text?.(r) ?? ''}{/if}
+	{#if c.cell}{@render c.cell(r, c)}{:else}{c.text?.(r) ?? ''}{/if}
 {/snippet}
 
 {#snippet flags(r: R, all: boolean)}

package/dist/components/ui/record-switcher/record-switcher.svelte

@@ -4,7 +4,9 @@
 	 * with its chevron inside, after the section's name. Its menu finds a
 	 * record by name, lists them under their headings (owned, then sold) with
 	 * a thumbnail each, and ends with the way to all of them, so it still
-	 * works at fifty. The record's own pages follow as tabs.
+	 * works at fifty. The record's own pages follow as tabs. On a phone the
+	 * breadcrumb (the section's name and the "/") gives way, and the tabs scroll
+	 * sideways inside the row, so every page stays reachable.
 	 *
 	 * It places nothing itself: put it inside `ShellControls` with whatever
 	 * else the page sets in the bar.
@@ -81,7 +83,7 @@
 </script>
 
 <div class={cn('flex min-w-0 items-center gap-2 sm:gap-3', className)} data-slot="record-switcher">
-	{#if separator}<span class="text-shell-muted-foreground flex-none" aria-hidden="true">/</span>{/if}
+	{#if separator}<span class="text-shell-muted-foreground flex-none max-sm:hidden" aria-hidden="true">/</span>{/if}
 	<Popover.Root bind:open onOpenChange={(o) => o && (highlighted = here())}>
 		<Popover.Trigger
 			class={cn(
@@ -147,13 +149,16 @@
 	</Popover.Root>
 
 	{#if pages.length}
-		<nav aria-label="Pages of {name}" class="ml-1 flex items-stretch gap-1 self-stretch sm:ml-3">
+		<nav
+			aria-label="Pages of {name}"
+			class="ml-1 flex min-w-0 items-stretch gap-1 self-stretch overflow-x-auto sm:ml-3"
+		>
 			{#each pages as p (p.href)}
 				<a
 					href={p.href}
 					aria-current={p.current ? 'page' : undefined}
 					class={cn(
-						'flex items-center border-b-2 px-2 text-sm transition-colors sm:px-3',
+						'flex flex-none items-center border-b-2 px-2 text-sm transition-colors sm:px-3',
 						p.current
 							? 'border-primary text-foreground font-semibold'
 							: 'text-muted-foreground hover:text-foreground border-transparent'

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@poodle64/ui",
-	"version": "2026.10.9",
+	"version": "2026.10.11",
 	"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.10.9",
+		"version": "2026.10.11",
 		"generatedBy": "scripts/generate-registry.mjs",
 		"source": "scripts/situations.json + package source (DO NOT EDIT the outputs by hand)",
 		"componentCount": 68,

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.10.9`. 68 components, 19 situations.
+Generated from `@poodle64/ui@2026.10.11`. 68 components, 19 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.