@poodle64/ui 2026.10.5 → 2026.10.6

package/README.md

@@ -899,7 +899,7 @@ no module rebuilds them and a need one module finds becomes a toggle for all.
 | `selected`, `bulkActions` | Ticking exists only with `bulkActions`, whose snippet gets the ticked rows in the bar that replaces the toolbar. |
 | `open`, `editor` | Opening exists only with `editor`: the row lifts out of its card as its own surface, holding the snippet. Its second argument carries the row's `template` and each column's grid line, so fields can sit under their columns. |
 | `originActions`, `onAttachment` | Split, join and undo under a synthetic row's statement lines; the paperclip as a button. |
-| `noun`, `empty`, `footer`, `layout` | "line" for a printed layer; the empty state; "Show more" after the last group; a forced `phone`/`narrow`/`wide` where the ledger's own width (below 600px, from 1200px) should not decide. |
+| `noun`, `empty`, `footer`, `layout` | "line" for a printed layer; the empty state; "Show more" after the last group; a forced `phone`/`narrow`/`wide` where the ledger's own width (below 480px, from 1200px) should not decide. |
 
 Settled here, the same in every module, and not props:
 
@@ -985,7 +985,7 @@ stays for a dense grid of data; a module's own records are a RecordList.
 | `noun`, `empty`, `footer`, `layout` | As the Ledger's. |
 
 A sort orders rows inside their groups, largest first (words from A), then
-reversed, then the list's own order. On a phone (below 600px of list) a row is its thumbnail, title
+reversed, then the list's own order. On a phone (below 480px of list) a row is its thumbnail, title
 and lines, with the first end-aligned column's value beside the title. Measured
 in a real engine at 390, 1440 and 3360px (`harness/drive.mjs`, `?surface=records`).
 

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

@@ -8,7 +8,7 @@
 	 *
 	 * It fills its parent's height and scrolls its own rows, so the head card
 	 * stays at the top: give it a bounded parent (`flex-1 min-h-0` in a
-	 * full-height page). Width picks the layout: a phone's list below 600px, the
+	 * full-height page). Width picks the layout: a phone's list below 480px, the
 	 * wide column widths from 1200px.
 	 */
 	import type { Snippet } from 'svelte';
@@ -42,7 +42,8 @@
 		ROW_TEXT,
 		RULE,
 		THROUGH,
-		groupSpacing
+		groupSpacing,
+		listLayout
 	} from './look.js';
 	import { AU_LOCALE } from '../../../format.js';
 	import { cn } from '../../../utils.js';
@@ -212,15 +213,7 @@
 	/** The bars above the list end where its cards do: clear of its scroll bar's gutter. */
 	const edge = $derived(`calc(0.5rem + ${Math.max(0, listOuter - listInner)}px)`);
 	const mode = $derived(
-		layout !== 'auto'
-			? layout
-			: width === 0
-				? 'narrow'
-				: width < 600
-					? 'phone'
-					: width >= 1200
-						? 'wide'
-						: 'narrow'
+		layout !== 'auto' ? layout : listLayout(width)
 	);
 	const WIDE = $derived(mode === 'wide');
 	const PHONE = $derived(mode === 'phone');

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

@@ -7,7 +7,7 @@
      *
      * It fills its parent's height and scrolls its own rows, so the head card
      * stays at the top: give it a bounded parent (`flex-1 min-h-0` in a
-     * full-height page). Width picks the layout: a phone's list below 600px, the
+     * full-height page). Width picks the layout: a phone's list below 480px, the
      * wide column widths from 1200px.
      */
 import type { Snippet } from 'svelte';

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

@@ -3,6 +3,15 @@
  * the RecordList. A head card, row cards with hairlines between rows, and each
  * group's label on the page ground.
  */
+/**
+ * The layout a list's own width picks: a phone's list below 480px, the wide
+ * tracks from 1200px, the narrow tracks between. The list's width, not the
+ * window's: beside a ContextColumn at 1280px with the rail open it is 588px,
+ * which is a laptop's list, not a phone's.
+ */
+export declare const PHONE_BELOW = 480;
+export declare const WIDE_FROM = 1200;
+export declare function listLayout(width: number): 'phone' | 'narrow' | 'wide';
 export declare const CELL = "min-w-0 truncate px-2";
 export declare const END = "pr-5 text-right";
 /** The row's height rides the package's density ramp: 3.5rem, 3rem compact. */

package/dist/components/ui/ledger/look.js

@@ -3,6 +3,17 @@
  * the RecordList. A head card, row cards with hairlines between rows, and each
  * group's label on the page ground.
  */
+/**
+ * The layout a list's own width picks: a phone's list below 480px, the wide
+ * tracks from 1200px, the narrow tracks between. The list's width, not the
+ * window's: beside a ContextColumn at 1280px with the rail open it is 588px,
+ * which is a laptop's list, not a phone's.
+ */
+export const PHONE_BELOW = 480;
+export const WIDE_FROM = 1200;
+export function listLayout(width) {
+    return width === 0 ? 'narrow' : width < PHONE_BELOW ? 'phone' : width >= WIDE_FROM ? 'wide' : 'narrow';
+}
 export const CELL = 'min-w-0 truncate px-2';
 export const END = 'pr-5 text-right';
 /** The row's height rides the package's density ramp: 3.5rem, 3rem compact. */

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

@@ -13,7 +13,7 @@
 	 *
 	 * It fills its parent's height and scrolls its own rows, so the head card
 	 * stays at the top: give it a bounded parent (`flex-1 min-h-0`). Width picks
-	 * the layout, as the Ledger's does: a phone's list below 600px, the wide
+	 * the layout, as the Ledger's does: a phone's list below 480px, the wide
 	 * tracks and the `'wide'` columns from 1200px. On a phone a row is its
 	 * thumbnail, title and lines, with the first end-aligned column's value
 	 * beside the title.
@@ -38,7 +38,8 @@
 		ROW_TEXT,
 		RULE,
 		THROUGH,
-		groupSpacing
+		groupSpacing,
+		listLayout
 	} from '../ledger/look.js';
 	import ListToolbar from '../list-toolbar/list-toolbar.svelte';
 	import type { ListAction, ListIconAction } from '../list-toolbar/types.js';
@@ -146,15 +147,7 @@
 	/** The bar ends where the cards do: clear of the scroll bar's gutter. */
 	const edge = $derived(`calc(0.5rem + ${Math.max(0, listOuter - listInner)}px)`);
 	const mode = $derived(
-		layout !== 'auto'
-			? layout
-			: width === 0
-				? 'narrow'
-				: width < 600
-					? 'phone'
-					: width >= 1200
-						? 'wide'
-						: 'narrow'
+		layout !== 'auto' ? layout : listLayout(width)
 	);
 	const WIDE = $derived(mode === 'wide');
 	const PHONE = $derived(mode === 'phone');

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

@@ -12,7 +12,7 @@
      *
      * It fills its parent's height and scrolls its own rows, so the head card
      * stays at the top: give it a bounded parent (`flex-1 min-h-0`). Width picks
-     * the layout, as the Ledger's does: a phone's list below 600px, the wide
+     * the layout, as the Ledger's does: a phone's list below 480px, the wide
      * tracks and the `'wide'` columns from 1200px. On a phone a row is its
      * thumbnail, title and lines, with the first end-aligned column's value
      * beside the title.

package/package.json

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

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.5`. 66 components, 18 situations.
+Generated from `@poodle64/ui@2026.10.6`. 66 components, 18 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.