@poodle64/ui 2026.10.18 → 2026.10.19

package/README.md

@@ -574,6 +574,13 @@ paragraphs ~207px away from their own label. Both halves are gated in
 on the page's own left edge, and it follows a retune of
 `--ds-shell-measure-prose`.
 
+**Large screens.** The measures, the type and the rail are all rem, and past
+2560px the root size grows (1px per 160px of width, to 24px at 3840px), so a
+page fills a 4K screen as it fills a laptop's. At 2560px and below nothing
+moves. An app sets no per-page variant; one that sets its own root size does it
+after the `styles.css` import. Gated in `harness/drive.mjs` at 1440, 2560 and
+3840px.
+
 ### The page: container, sections and the type scale
 
 ```svelte

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

@@ -34,6 +34,8 @@
 		hiddenKinds?: string[];
 		/** Arrowheads at each edge's target. */
 		directed?: boolean;
+		/** A path to highlight: node ids in order. Its nodes and the edges between them stay lit, labelled with their verbs; the rest dims. */
+		path?: string[];
 		/** The accessible name. */
 		label?: string;
 		/** The find field. */
@@ -55,6 +57,7 @@
 		selected = $bindable(null),
 		hiddenKinds = $bindable([]),
 		directed = false,
+		path = [],
 		label = 'Graph',
 		search = true,
 		activateLabel = 'Open',
@@ -70,6 +73,7 @@
 	const NEIGHBOURS = 12;
 
 	const scene = new GraphScene<N>();
+	const nodeListId = `graph-nodes-${Math.random().toString(36).slice(2, 8)}`;
 	let root: HTMLDivElement;
 	let canvas: HTMLCanvasElement;
 	let probe: HTMLSpanElement;
@@ -80,6 +84,7 @@
 
 	let query = $state('');
 	let showAll = $state(false);
+	let listOpen = $state(false);
 	let settled = $state(false);
 	let cursor = $state('grab');
 
@@ -163,6 +168,24 @@
 		return hits.slice(0, 8).map((h) => h.node);
 	});
 
+	// The keyboard and screen-reader route to every node: a list in reading
+	// order, most connected first past the cap, the selected node always in it.
+	const NODE_LIST = 200;
+	const listed = $derived.by(() => {
+		const hidden = new Set(hiddenKinds);
+		const all = [...nodeById.values()].filter((n) => !hidden.has(n.kind));
+		const degree = new Map<string, number>();
+		for (const e of edges) {
+			degree.set(e.source, (degree.get(e.source) ?? 0) + 1);
+			degree.set(e.target, (degree.get(e.target) ?? 0) + 1);
+		}
+		const top = all.length > NODE_LIST ? [...all].sort((a, b) => (degree.get(b.id) ?? 0) - (degree.get(a.id) ?? 0)).slice(0, NODE_LIST) : all;
+		if (current && !top.includes(current)) top.push(current);
+		return { rows: top.sort((a, b) => a.label.localeCompare(b.label)), total: all.length };
+	});
+
+	const routeLabels = $derived(path.flatMap((id) => nodeById.get(id)?.label ?? []));
+
 	const summary = $derived(
 		`${formatNumber(nodes.length)} ${nodes.length === 1 ? 'node' : 'nodes'} · ${formatNumber(edges.length)} ${edges.length === 1 ? 'link' : 'links'}`
 	);
@@ -171,6 +194,7 @@
 			? `${current.label}, ${kindLabel(current.kind)}, ${neighbours.length} ${neighbours.length === 1 ? 'connection' : 'connections'}`
 			: ''
 	);
+	const routeText = $derived(routeLabels.length > 1 ? `Path: ${routeLabels.join(', then ')}.` : '');
 
 	function kindLabel(id: string): string {
 		return kindOf.get(id)?.label ?? id;
@@ -403,6 +427,11 @@
 		requestDraw();
 	});
 
+	$effect(() => {
+		scene.setRoute(path);
+		requestDraw();
+	});
+
 	$effect(() => {
 		scene.directed = directed;
 		requestDraw();
@@ -731,7 +760,7 @@
 		style:cursor
 		tabindex="0"
 		aria-roledescription="graph canvas"
-		aria-label={`${label}: ${summary}. Arrow keys pan, plus and minus zoom, 0 fits${search ? ', slash finds' : ''}.`}
+		aria-label={`${label}: ${summary}.${routeText ? ' ' + routeText : ''} Arrow keys pan, plus and minus zoom, 0 fits${search ? ', slash finds' : ''}.`}
 		onkeydown={onCanvasKey}
 	></canvas>
 
@@ -784,6 +813,44 @@
 			{/if}
 		{/if}
 
+		<div>
+			<button
+				type="button"
+				class="hover:bg-accent flex w-full items-center justify-between rounded-md border border-transparent px-2 py-1 text-xs @2xl:text-sm"
+				aria-expanded={listOpen}
+				aria-controls={nodeListId}
+				onclick={() => (listOpen = !listOpen)}
+			>
+				<span class="text-foreground">Nodes</span>
+				<span class="text-muted-foreground tabular-nums">{formatNumber(listed.total)}</span>
+			</button>
+			<ul
+				id={nodeListId}
+				class="mt-1 max-h-48 flex-col overflow-y-auto {listOpen ? 'flex' : 'hidden'}"
+				aria-label="Nodes"
+			>
+				{#each listed.rows as n (n.id)}
+					<li>
+						<button
+							type="button"
+							class="hover:bg-accent focus-visible:bg-accent flex w-full items-center gap-2 rounded-md px-2 py-1 text-left text-sm outline-none"
+							aria-pressed={selected === n.id}
+							onclick={() => focus(n.id)}
+						>
+							{@render swatch(n.kind)}
+							<span class="text-foreground min-w-0 flex-1 truncate">{n.label}</span>
+							<span class="text-muted-foreground shrink-0 text-xs">{kindLabel(n.kind)}</span>
+						</button>
+					</li>
+				{/each}
+				{#if listed.total > listed.rows.length}
+					<li class="text-muted-foreground px-2 py-1 text-xs">
+						Most connected {formatNumber(listed.rows.length)} of {formatNumber(listed.total)}; find narrows it.
+					</li>
+				{/if}
+			</ul>
+		</div>
+
 		{#if legendRows.length}
 			<ul
 				class="flex flex-wrap gap-x-1 @2xl:flex-col @2xl:flex-nowrap"
@@ -918,5 +985,5 @@
 		</section>
 	{/if}
 
-	<p class="sr-only" aria-live="polite">{announcement}</p>
+	<p class="sr-only" aria-live="polite">{[announcement, routeText].filter(Boolean).join(' ')}</p>
 </div>

package/dist/components/ui/graph-canvas/graph-canvas.svelte.d.ts

@@ -20,6 +20,8 @@ declare function $$render<N extends GraphNode>(): {
         hiddenKinds?: string[];
         /** Arrowheads at each edge's target. */
         directed?: boolean;
+        /** A path to highlight: node ids in order. Its nodes and the edges between them stay lit, labelled with their verbs; the rest dims. */
+        path?: string[];
         /** The accessible name. */
         label?: string;
         /** The find field. */

package/dist/components/ui/graph-canvas/scene.d.ts

@@ -65,6 +65,10 @@ export declare class GraphScene<N extends GraphNode = GraphNode> {
     selected: SimNode<N> | null;
     hovered: SimNode<N> | null;
     matches: Set<SimNode<N>>;
+    /** The highlighted route: its nodes and every edge joining consecutive ones. */
+    routeNodes: Set<SimNode<N>>;
+    routeEdges: Set<SimEdge<N>>;
+    private routeIds;
     readonly sim: Simulation<SimNode<N>, SimEdge<N>>;
     private link;
     private charge;
@@ -80,6 +84,8 @@ export declare class GraphScene<N extends GraphNode = GraphNode> {
     setAspect(width: number, height: number): void;
     /** Replace the data, keeping every surviving node where it is. */
     setData(nodes: readonly N[], edges: readonly GraphEdge[]): number;
+    /** Highlight a path given as node ids in order; ids not in the graph are skipped. */
+    setRoute(ids: readonly string[]): void;
     hot(): boolean;
     heat(alpha: number): void;
     /** Advance the layout for at most `budgetMs`, and at least one tick. */

package/dist/components/ui/graph-canvas/scene.js

@@ -34,6 +34,10 @@ export class GraphScene {
     selected = null;
     hovered = null;
     matches = new Set();
+    /** The highlighted route: its nodes and every edge joining consecutive ones. */
+    routeNodes = new Set();
+    routeEdges = new Set();
+    routeIds = [];
     sim;
     link = forceLink([]);
     charge = forceManyBody().strength((d) => -28 - 14 * Math.sqrt(d.degree));
@@ -143,8 +147,20 @@ export class GraphScene {
         if (this.hovered)
             this.hovered = byId.get(this.hovered.id) ?? null;
         this.matches = new Set([...this.matches].flatMap((m) => byId.get(m.id) ?? []));
+        this.setRoute(this.routeIds);
         return fresh.length;
     }
+    /** Highlight a path given as node ids in order; ids not in the graph are skipped. */
+    setRoute(ids) {
+        this.routeIds = ids;
+        const nodes = ids.flatMap((id) => this.byId.get(id) ?? []);
+        this.routeNodes = new Set(nodes);
+        const key = (a, b) => (a < b ? `${a}\u0000${b}` : `${b}\u0000${a}`);
+        const pairs = new Set();
+        for (let i = 1; i < nodes.length; i++)
+            pairs.add(key(nodes[i - 1].id, nodes[i].id));
+        this.routeEdges = new Set(this.edges.filter((e) => pairs.has(key(e.source.id, e.target.id))));
+    }
     hot() {
         return this.sim.alpha() >= this.sim.alphaMin();
     }
@@ -236,9 +252,12 @@ export class GraphScene {
         if (!P)
             return;
         const chosen = this.selected && this.visible(this.selected) ? this.selected : null;
-        const focus = this.hovered ?? chosen;
+        // A route holds the picture until the pointer rests on a node.
+        const route = !this.hovered && this.routeNodes.size > 0;
+        const focus = route ? null : (this.hovered ?? chosen);
         const near = focus ? this.adj.get(focus) : undefined;
-        const lit = (s) => !focus || s === focus || !!near?.has(s);
+        const dim = !!focus || route;
+        const lit = (s) => (route ? this.routeNodes.has(s) : !focus || s === focus || !!near?.has(s));
         const margin = 40 / k;
         const vx0 = -tx / k - margin;
         const vy0 = -ty / k - margin;
@@ -268,24 +287,26 @@ export class GraphScene {
         const curved = shown.length < 1200;
         // Edges: one batched path for the rest, one per colour for the lit ones.
         const rest = new Path2D();
+        const restDashed = new Path2D();
         const restHeads = new Path2D();
         const litPaths = new Map();
         const edgeLabels = [];
-        const heads = this.directed && (shown.length < 500 || !!focus);
+        const heads = this.directed && (shown.length < 500 || dim);
         // A hub's relations crowd its own spokes; past a dozen the card lists them instead.
         const relationWords = focus ? (this.adj.get(focus)?.size ?? 0) <= 12 : shown.length < 300;
         for (const e of shown) {
             const a = e.source;
             const b = e.target;
-            const hot = !!focus && (a === focus || b === focus);
-            let path = rest;
+            const hot = route ? this.routeEdges.has(e) : !!focus && (a === focus || b === focus);
+            const dashed = e.edge.style === 'dashed';
+            let path = dashed ? restDashed : rest;
             let head = restHeads;
             if (hot) {
-                const colour = this.colour(a === focus ? b : a);
+                const colour = route ? P.ink : this.colour(a === focus ? b : a);
                 let p = litPaths.get(colour);
                 if (!p)
-                    litPaths.set(colour, (p = { line: new Path2D(), head: new Path2D() }));
-                path = p.line;
+                    litPaths.set(colour, (p = { line: new Path2D(), dashed: new Path2D(), head: new Path2D() }));
+                path = dashed ? p.dashed : p.line;
                 head = p.head;
             }
             const [cx, cy] = curved || hot ? this.control(e) : [(a.x + b.x) / 2, (a.y + b.y) / 2];
@@ -294,30 +315,36 @@ export class GraphScene {
                 path.quadraticCurveTo(cx, cy, b.x, b.y);
             else
                 path.lineTo(b.x, b.y);
-            if (heads && (hot || !focus))
+            if (heads && (hot || !dim))
                 this.arrow(head, cx, cy, b, rad(b), k);
-            if (e.edge.label && relationWords && (hot || !focus))
+            if (e.edge.label && (route ? hot : relationWords && (hot || !focus)))
                 edgeLabels.push(e);
         }
         ctx.strokeStyle = P.edge;
         ctx.fillStyle = P.edge;
-        ctx.globalAlpha = focus ? 0.07 : Math.min(0.65, 0.12 + 0.35 * k);
+        ctx.globalAlpha = dim ? 0.07 : Math.min(0.65, 0.12 + 0.35 * k);
         ctx.lineWidth = 1 / k;
         ctx.stroke(rest);
+        ctx.setLineDash([5 / k, 4 / k]);
+        ctx.stroke(restDashed);
+        ctx.setLineDash([]);
         ctx.fill(restHeads);
         ctx.globalAlpha = 0.95;
-        ctx.lineWidth = 1.75 / k;
+        ctx.lineWidth = (route ? 2.75 : 1.75) / k;
         for (const [colour, p] of litPaths) {
             ctx.strokeStyle = colour;
             ctx.fillStyle = colour;
             ctx.stroke(p.line);
+            ctx.setLineDash([6 / k, 4 / k]);
+            ctx.stroke(p.dashed);
+            ctx.setLineDash([]);
             ctx.fill(p.head);
         }
         // Nodes: dimmed first, then lit, each batched by kind. A dot too small to
         // overlap its neighbour visibly skips the ground-coloured halo.
         const halo = k >= 0.5 ? 1.4 / k : 0;
         for (const pass of [false, true]) {
-            if (pass === false && !focus)
+            if (pass === false && !dim)
                 continue;
             const groups = new Map();
             for (const s of this.nodes) {
@@ -345,7 +372,8 @@ export class GraphScene {
             if (!this.visible(s) || !onScreen(s))
                 continue;
             const ring = s === this.selected || s === focus;
-            if (!s.node.emphasis && !ring && !this.matches.has(s))
+            const onRoute = route && this.routeNodes.has(s);
+            if (!s.node.emphasis && !ring && !onRoute && !this.matches.has(s))
                 continue;
             const r = rad(s);
             const shape = this.shapes.get(s.node.kind) ?? 'circle';
@@ -361,11 +389,11 @@ export class GraphScene {
             const p = new Path2D();
             this.shape(p, shape, s.x, s.y, r + 3.5 / k);
             ctx.lineWidth = (ring ? 2 : 1.4) / k;
-            ctx.strokeStyle = ring || this.matches.has(s) ? P.ink : this.colour(s);
+            ctx.strokeStyle = ring || onRoute || this.matches.has(s) ? P.ink : this.colour(s);
             ctx.stroke(p);
         }
         ctx.globalAlpha = 1;
-        this.labels(ctx, P, focus, near, edgeLabels, onScreen, rad);
+        this.labels(ctx, P, focus, near, edgeLabels, route, onScreen, rad);
     }
     colour(s) {
         return this.palette?.kinds.get(s.node.kind) ?? this.palette?.fallback ?? 'currentColor';
@@ -457,7 +485,7 @@ export class GraphScene {
         }
         return true;
     }
-    labels(ctx, P, focus, near, edgeLabels, onScreen, rad) {
+    labels(ctx, P, focus, near, edgeLabels, route, onScreen, rad) {
         const { k, x: tx, y: ty } = this.cam;
         const { dpr, width: W, height: H } = this;
         this.grid.clear();
@@ -487,8 +515,11 @@ export class GraphScene {
         else {
             if (this.selected)
                 order.push(this.selected);
+            if (route)
+                order.push(...this.routeNodes);
             order.push(...this.matches);
-            order.push(...this.ranked);
+            if (!route)
+                order.push(...this.ranked);
         }
         const seen = new Set();
         const quota = Math.ceil((W * H) / LABEL_AREA);
@@ -504,7 +535,7 @@ export class GraphScene {
             seen.add(s);
             tries++;
             const text = clip(s.node.label);
-            const prominent = s === focus || s === this.selected || !!s.node.emphasis;
+            const prominent = s === focus || s === this.selected || !!s.node.emphasis || (route && this.routeNodes.has(s));
             if (!focus && placed >= quota && rad(s) * k < 7 && !prominent && !this.matches.has(s))
                 continue;
             const font = prominent ? strong : body;
@@ -519,7 +550,7 @@ export class GraphScene {
             const below = ty + s.y * k + r + 4;
             const above = ty + s.y * k - r - 4 - h;
             const fits = (y) => this.claim(sx - w / 2 - 3, y - 2, sx + w / 2 + 3, y + h + 2);
-            const sy = fits(below) ? below : fits(above) ? above : s === focus || s === this.selected ? below : null;
+            const sy = fits(below) ? below : fits(above) ? above : s === focus || s === this.selected || (route && this.routeNodes.has(s)) ? below : null;
             if (sy === null || sy > H || sy + h < 0)
                 continue;
             this.text(ctx, font, text, sx, sy, 'top', P.ink, P.ground);
@@ -542,7 +573,7 @@ export class GraphScene {
             const w = this.measure(ctx, small, text);
             if (!this.claim(mx - w / 2 - 3, my - 7, mx + w / 2 + 3, my + 7))
                 continue;
-            const hot = !!focus && (e.source === focus || e.target === focus);
+            const hot = route || (!!focus && (e.source === focus || e.target === focus));
             this.text(ctx, small, text, mx, my, 'middle', hot ? P.ink : P.inkSoft, P.ground);
             edgesPlaced++;
         }

package/dist/components/ui/graph-canvas/types.d.ts

@@ -14,7 +14,10 @@ export interface GraphNode {
 export interface GraphEdge {
     source: string;
     target: string;
+    /** The relation's verb, drawn on the line on the highlighted path or around a focused node. */
     label?: string;
+    /** `dashed` for a weaker link, such as a claim with no citation yet. Defaults to `solid`. */
+    style?: 'solid' | 'dashed';
 }
 export type GraphShape = 'circle' | 'square' | 'diamond' | 'triangle';
 /** A legend row. The colour is any CSS colour; a `var(--…)` resolves against the graph's own element. */

package/dist/styles.css

@@ -441,6 +441,20 @@
 	--ds-control-pad-icon-lg: 0.625rem;
 }
 
+/**
+ * Large screens. Past 2560 CSS px the root size grows with the viewport, 1px of
+ * root per 160px of width, capped at 1.5rem (a 4K screen at 1x, 3840px, reads
+ * 24px), so everything set in rem grows with it: type, the shell's measures
+ * (`page` 80rem, `wide` 120rem) and the rail. At 2560px and below the rule
+ * resolves to 1rem and nothing moves; it is continuous at the seam. An app that
+ * sets its own root size sets it after this import.
+ */
+@media (min-width: 2560px) {
+	html {
+		font-size: clamp(1rem, 100vw / 160, 1.5rem);
+	}
+}
+
 @layer base {
 	/**
 	 * The milled edge. Cards read as having depth from a hairline border plus a

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@poodle64/ui",
-	"version": "2026.10.18",
+	"version": "2026.10.19",
 	"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",
@@ -100,6 +100,7 @@
 		"@testing-library/svelte": "^5.4.2",
 		"@types/d3-force": "^3.0.10",
 		"@types/node": "^22.20.1",
+		"axe-core": "^4.14.0",
 		"bits-ui": "^2.18.1",
 		"formsnap": "^2.0.1",
 		"jsdom": "^29.1.1",

package/registry/component-map.json

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

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.18`. 76 components, 20 situations.
+Generated from `@poodle64/ui@2026.10.19`. 76 components, 20 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.