@poodle64/ui 2026.9.18 → 2026.9.19

package/dist/components/ui/fact-grid/fact-grid.svelte

@@ -1,6 +1,12 @@
 <script lang="ts" module>
 	export interface Fact {
-		/** Stable identity for #each; never rendered. */
+		/**
+		 * Stable identity for #each; never rendered. Also the id bound through
+		 * `activeFactId`/`focusedFactId` — a consumer keys this the same way it
+		 * keys the matching `PageCanvasRegion.id`, so the two lists share one
+		 * key space and a single pair of bound variables ties a fact to where
+		 * it is printed.
+		 */
 		key: string;
 		/** Uppercase eyebrow label. */
 		label: string;
@@ -8,6 +14,12 @@
 		value: string;
 		/** Render the value in the figures' face: mono, tabular. */
 		numeric?: boolean;
+		/**
+		 * This fact was actually placed somewhere on the page. Only then does
+		 * it become pointable (hoverable, focusable, clickable); absent or
+		 * false renders it as plain text, never a control that does nothing.
+		 */
+		hasEvidence?: boolean;
 	}
 </script>
 
@@ -21,18 +33,41 @@
 	// a titled card for the context column; reach for FactGrid instead where
 	// a Panel or DetailPanel already supplies the box, so nesting never
 	// doubles the border (godswood's FactGrid stop-gap, #839).
+	//
+	// An evidenced fact ties to its place on the page exactly as PageCanvas's
+	// own region list does: `activeFactId` mirrors `activeRegionId` (hover or
+	// keyboard focus), `focusedFactId` mirrors `focusedRegionId` (click, held
+	// until clicked again). A consumer binds both pairs to the same two
+	// variables — nothing FactGrid-specific lives here, it only reports and
+	// accepts the same two ids PageCanvas already reads (#839).
 	let {
 		facts,
+		activeFactId = $bindable(null),
+		focusedFactId = $bindable(null),
 		class: klass = '',
 		ref = $bindable(null),
 		...restProps
 	}: WithElementRef<HTMLAttributes<HTMLElement>> & {
 		facts: Fact[];
+		/** Hovered or keyboard-focused; mirrors PageCanvas's `activeRegionId`. */
+		activeFactId?: string | null;
+		/** Clicked, held until clicked again; mirrors `focusedRegionId`. */
+		focusedFactId?: string | null;
 	} = $props();
 
 	// A sentence takes the whole row; a short value shares it with its
 	// neighbours. 40 is the length the source stop-gap measured this against.
 	const LONG_VALUE = 40;
+
+	function setActive(key: string) {
+		activeFactId = key;
+	}
+	function clearActive(key: string) {
+		if (activeFactId === key) activeFactId = null;
+	}
+	function toggleFocus(key: string) {
+		focusedFactId = focusedFactId === key ? null : key;
+	}
 </script>
 
 <dl
@@ -46,7 +81,26 @@
 				{fact.label}
 			</dt>
 			<dd class={cn('mt-1 break-words', fact.numeric && 'font-mono tabular-nums')}>
-				{fact.value}
+				{#if fact.hasEvidence}
+					<button
+						type="button"
+						class={cn(
+							'-mx-0.5 block w-full rounded-sm px-0.5 text-left underline decoration-transparent underline-offset-2 transition-colors hover:decoration-current focus-visible:decoration-current focus-visible:outline-none',
+							(activeFactId === fact.key || focusedFactId === fact.key) &&
+								'bg-primary/10 text-primary decoration-current'
+						)}
+						aria-pressed={focusedFactId === fact.key}
+						onmouseenter={() => setActive(fact.key)}
+						onmouseleave={() => clearActive(fact.key)}
+						onfocus={() => setActive(fact.key)}
+						onblur={() => clearActive(fact.key)}
+						onclick={() => toggleFocus(fact.key)}
+					>
+						{fact.value}
+					</button>
+				{:else}
+					{fact.value}
+				{/if}
 			</dd>
 		</div>
 	{/each}

package/dist/components/ui/fact-grid/fact-grid.svelte.d.ts

@@ -1,5 +1,11 @@
 export interface Fact {
-    /** Stable identity for #each; never rendered. */
+    /**
+     * Stable identity for #each; never rendered. Also the id bound through
+     * `activeFactId`/`focusedFactId` — a consumer keys this the same way it
+     * keys the matching `PageCanvasRegion.id`, so the two lists share one
+     * key space and a single pair of bound variables ties a fact to where
+     * it is printed.
+     */
     key: string;
     /** Uppercase eyebrow label. */
     label: string;
@@ -7,12 +13,22 @@ export interface Fact {
     value: string;
     /** Render the value in the figures' face: mono, tabular. */
     numeric?: boolean;
+    /**
+     * This fact was actually placed somewhere on the page. Only then does
+     * it become pointable (hoverable, focusable, clickable); absent or
+     * false renders it as plain text, never a control that does nothing.
+     */
+    hasEvidence?: boolean;
 }
 import type { HTMLAttributes } from 'svelte/elements';
 import { type WithElementRef } from '../../../utils.js';
 type $$ComponentProps = WithElementRef<HTMLAttributes<HTMLElement>> & {
     facts: Fact[];
+    /** Hovered or keyboard-focused; mirrors PageCanvas's `activeRegionId`. */
+    activeFactId?: string | null;
+    /** Clicked, held until clicked again; mirrors `focusedRegionId`. */
+    focusedFactId?: string | null;
 };
-declare const FactGrid: import("svelte").Component<$$ComponentProps, {}, "ref">;
+declare const FactGrid: import("svelte").Component<$$ComponentProps, {}, "ref" | "activeFactId" | "focusedFactId">;
 type FactGrid = ReturnType<typeof FactGrid>;
 export default FactGrid;

package/package.json

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

package/registry/component-map.json

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

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.18`. 60 components, 17 situations.
+Generated from `@poodle64/ui@2026.9.19`. 60 components, 17 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.