@unpunnyfuns/swatchbook-blocks 0.51.1 → 0.53.0

package/dist/index.d.mts

@@ -1,5 +1,6 @@
 import * as _$react from "react";
 import { ReactElement, ReactNode } from "react";
+import { Axis, Diagnostic, Permutation, Preset } from "@unpunnyfuns/swatchbook-core";
 
 //#region src/format-color.d.ts
 /**
@@ -48,34 +49,24 @@ declare function formatColor(value: unknown, format: ColorFormat, fallback?: str
 //#endregion
 //#region src/contexts.d.ts
 /**
- * Typed shape of the addon's `virtual:swatchbook/tokens` module, duplicated
- * as value-importable interfaces so consumers outside the addon's Vite
- * plugin (unit tests, custom React apps) can construct a snapshot by hand.
+ * Typed shape of the addon's `virtual:swatchbook/tokens` module.
  *
- * The ambient `declare module 'virtual:swatchbook/tokens'` declarations in
- * `packages/addon/src/virtual.d.ts` describe the same payload; the two
- * stay in sync by eye.
+ * The axis / permutation / diagnostic / preset entries are deliberate
+ * type-aliases of core's authoritative shapes — the virtual module
+ * publishes those shapes verbatim, so single-sourcing the types prevents
+ * silent drift the moment core grows a field the plugin doesn't
+ * serialise.
+ *
+ * Token / listing shapes stay as narrowed interfaces because blocks
+ * only read a subset of Terrazzo's full token / listing structure; the
+ * narrower shape documents what's actually relied on.
+ *
+ * The ambient `declare module 'virtual:swatchbook/tokens'` declarations
+ * in `packages/addon/src/virtual.d.ts` describe the same payload.
  */
-interface VirtualAxisShape {
-  name: string;
-  contexts: readonly string[];
-  default: string;
-  description?: string;
-  source: 'resolver' | 'layered' | 'synthetic';
-}
-interface VirtualPermutationShape {
-  name: string;
-  input: Record<string, string>;
-  sources: string[];
-}
-interface VirtualDiagnosticShape {
-  severity: 'error' | 'warn' | 'info';
-  group: string;
-  message: string;
-  filename?: string;
-  line?: number;
-  column?: number;
-}
+type VirtualAxisShape = Axis;
+type VirtualPermutationShape = Permutation;
+type VirtualDiagnosticShape = Diagnostic;
 interface VirtualTokenShape {
   $type?: string;
   $value?: unknown;
@@ -112,11 +103,7 @@ interface VirtualTokenListingShape {
     };
   };
 }
-interface VirtualPresetShape {
-  name: string;
-  axes: Partial<Record<string, string>>;
-  description?: string;
-}
+type VirtualPresetShape = Preset;
 /**
  * Full project data read by blocks. Populated by the addon's preview
  * decorator (from the virtual module) or constructed by hand in

package/dist/index.mjs

@@ -46,16 +46,16 @@ function formatColor(value, format, fallback = DEFAULT_FALLBACK) {
 function coerce(value) {
 	if (!value || typeof value !== "object") return null;
 	const v = value;
-	const colorSpace = typeof v["colorSpace"] === "string" ? v["colorSpace"] : void 0;
-	const components = Array.isArray(v["components"]) ? v["components"] : Array.isArray(v["channels"]) ? v["channels"] : void 0;
+	const colorSpace = typeof v.colorSpace === "string" ? v.colorSpace : void 0;
+	const components = Array.isArray(v.components) ? v.components : Array.isArray(v.channels) ? v.channels : void 0;
 	if (!colorSpace || !components) {
-		if (typeof v["hex"] === "string") return {
+		if (typeof v.hex === "string") return {
 			colorSpace: "srgb",
-			components: hexToComponents(v["hex"])
+			components: hexToComponents(v.hex)
 		};
 		return null;
 	}
-	const alpha = typeof v["alpha"] === "number" ? v["alpha"] : void 0;
+	const alpha = typeof v.alpha === "number" ? v.alpha : void 0;
 	const hex = typeof v["hex"] === "string" ? v["hex"] : void 0;
 	return {
 		colorSpace,
@@ -926,11 +926,7 @@ function CopyButton$1({ value, label, variant = "icon", className }) {
 		};
 	}, []);
 	const handleClick = useCallback(() => {
-		try {
-			navigator.clipboard?.writeText(value);
-		} catch {
-			return;
-		}
+		navigator.clipboard?.writeText(value).catch(() => {});
 		setCopied(true);
 		if (timerRef.current !== null) clearTimeout(timerRef.current);
 		timerRef.current = setTimeout(() => setCopied(false), 1500);
@@ -1658,13 +1654,13 @@ function formatShadow(v, colorFormat) {
 		if (!layer || typeof layer !== "object") return formatUnknown(layer);
 		const s = layer;
 		const pieces = [
-			formatDimension$1(s["offsetX"]),
-			formatDimension$1(s["offsetY"]),
-			formatDimension$1(s["blur"]),
-			formatDimension$1(s["spread"]),
-			formatColor(s["color"], colorFormat).value
+			formatDimension$1(s.offsetX),
+			formatDimension$1(s.offsetY),
+			formatDimension$1(s.blur),
+			formatDimension$1(s.spread),
+			formatColor(s.color, colorFormat).value
 		].filter((p) => p !== "");
-		if (s["inset"]) pieces.push("inset");
+		if (s.inset) pieces.push("inset");
 		return pieces.join(" ");
 	}).join(", ");
 }
@@ -1672,9 +1668,9 @@ function formatBorder(v, colorFormat) {
 	if (!v || typeof v !== "object") return formatUnknown(v);
 	const b = v;
 	return [
-		formatDimension$1(b["width"]),
-		formatPrimitive$1(b["style"]),
-		formatColor(b["color"], colorFormat).value
+		formatDimension$1(b.width),
+		formatPrimitive$1(b.style),
+		formatColor(b.color, colorFormat).value
 	].filter((p) => p !== "").join(" ");
 }
 function formatUnknown(v) {
@@ -1844,6 +1840,21 @@ function FontFamilySample({ filter, sample = "The quick brown fox jumps over the
 	});
 }
 //#endregion
+//#region src/internal/css-var-style.ts
+/**
+* Coerce a CSS `var(--…)` reference into the numeric slot of a React
+* inline-style property.
+*
+* React's `CSSProperties` types unitless properties (`fontWeight`,
+* `lineHeight`, `zIndex`, …) as `number`. The DOM accepts a string at
+* runtime — the rendered stylesheet just receives whatever React passes —
+* so a `var(--font-weight)` reference works functionally. TypeScript still
+* complains. Centralising the type assertion in one named helper keeps
+* the gap visible (and greppable) instead of scattering casts across
+* block components that want CSS-var-driven typography or layout values.
+*/
+const cssVarAsNumber = (varRef) => varRef;
+//#endregion
 //#region src/FontWeightScale.tsx
 function toWeight(raw) {
 	if (typeof raw === "number") return raw;
@@ -1904,7 +1915,7 @@ function FontWeightScale({ filter, sample = "Aa", caption, sortBy = "value", sor
 				}),
 				/* @__PURE__ */ jsx("div", {
 					className: "sb-font-weight-scale__sample",
-					style: { fontWeight: row.cssVar },
+					style: { fontWeight: cssVarAsNumber(row.cssVar) },
 					children: sample
 				}),
 				/* @__PURE__ */ jsx("span", {
@@ -2984,27 +2995,27 @@ function CompositeBreakdownContent({ type, rawValue, partialAliasOf, resolved, c
 		return renderKeyValueList([
 			[
 				"fontFamily",
-				formatFontFamily(v["fontFamily"]),
+				formatFontFamily(v.fontFamily),
 				aliasFor("fontFamily")
 			],
 			[
 				"fontSize",
-				formatDimensionValue(v["fontSize"]),
+				formatDimensionValue(v.fontSize),
 				aliasFor("fontSize")
 			],
 			[
 				"fontWeight",
-				formatPrimitive(v["fontWeight"]),
+				formatPrimitive(v.fontWeight),
 				aliasFor("fontWeight")
 			],
 			[
 				"lineHeight",
-				formatPrimitive(v["lineHeight"]),
+				formatPrimitive(v.lineHeight),
 				aliasFor("lineHeight")
 			],
 			[
 				"letterSpacing",
-				formatDimensionValue(v["letterSpacing"]),
+				formatDimensionValue(v.letterSpacing),
 				aliasFor("letterSpacing")
 			]
 		]);
@@ -3014,17 +3025,17 @@ function CompositeBreakdownContent({ type, rawValue, partialAliasOf, resolved, c
 		return renderKeyValueList([
 			[
 				"color",
-				formatColorSubValue(v["color"], colorFormat),
+				formatColorSubValue(v.color, colorFormat),
 				aliasFor("color")
 			],
 			[
 				"width",
-				formatDimensionValue(v["width"]),
+				formatDimensionValue(v.width),
 				aliasFor("width")
 			],
 			[
 				"style",
-				formatPrimitive(v["style"]),
+				formatPrimitive(v.style),
 				aliasFor("style")
 			]
 		]);
@@ -3034,17 +3045,17 @@ function CompositeBreakdownContent({ type, rawValue, partialAliasOf, resolved, c
 		return renderKeyValueList([
 			[
 				"duration",
-				formatDimensionValue(v["duration"]),
+				formatDimensionValue(v.duration),
 				aliasFor("duration")
 			],
 			[
 				"timingFunction",
-				formatPrimitive(v["timingFunction"]),
+				formatPrimitive(v.timingFunction),
 				aliasFor("timingFunction")
 			],
 			[
 				"delay",
-				formatDimensionValue(v["delay"]),
+				formatDimensionValue(v.delay),
 				aliasFor("delay")
 			]
 		]);
@@ -3066,32 +3077,32 @@ function CompositeBreakdownContent({ type, rawValue, partialAliasOf, resolved, c
 						}),
 						/* @__PURE__ */ jsx(KeyValueRow, {
 							label: "color",
-							value: formatColorSubValue(v["color"], colorFormat),
+							value: formatColorSubValue(v.color, colorFormat),
 							alias: layerAliasFor(i, "color")
 						}),
 						/* @__PURE__ */ jsx(KeyValueRow, {
 							label: "offsetX",
-							value: formatDimensionValue(v["offsetX"]),
+							value: formatDimensionValue(v.offsetX),
 							alias: layerAliasFor(i, "offsetX")
 						}),
 						/* @__PURE__ */ jsx(KeyValueRow, {
 							label: "offsetY",
-							value: formatDimensionValue(v["offsetY"]),
+							value: formatDimensionValue(v.offsetY),
 							alias: layerAliasFor(i, "offsetY")
 						}),
 						/* @__PURE__ */ jsx(KeyValueRow, {
 							label: "blur",
-							value: formatDimensionValue(v["blur"]),
+							value: formatDimensionValue(v.blur),
 							alias: layerAliasFor(i, "blur")
 						}),
 						/* @__PURE__ */ jsx(KeyValueRow, {
 							label: "spread",
-							value: formatDimensionValue(v["spread"]),
+							value: formatDimensionValue(v.spread),
 							alias: layerAliasFor(i, "spread")
 						}),
-						"inset" in v && /* @__PURE__ */ jsx(KeyValueRow, {
+						v.inset !== void 0 && /* @__PURE__ */ jsx(KeyValueRow, {
 							label: "inset",
-							value: formatPrimitive(v["inset"]),
+							value: formatPrimitive(v.inset),
 							alias: void 0
 						})
 					]
@@ -3108,8 +3119,8 @@ function CompositeBreakdownContent({ type, rawValue, partialAliasOf, resolved, c
 			children: stops.map((stop, i) => {
 				const v = stop;
 				return /* @__PURE__ */ jsx(KeyValueRow, {
-					label: `${((typeof v["position"] === "number" ? v["position"] : 0) * 100).toFixed(0)}%`,
-					value: formatColorSubValue(v["color"], colorFormat),
+					label: `${((typeof v.position === "number" ? v.position : 0) * 100).toFixed(0)}%`,
+					value: formatColorSubValue(v.color, colorFormat),
 					alias: stopAliasFor(i)
 				}, gradientStopKey(v, i));
 			})
@@ -3200,16 +3211,16 @@ function subValueChain(aliasTarget, resolved) {
 }
 function shadowLayerKey(layer, fallback) {
 	return `shadow|${[
-		layer["color"],
-		layer["offsetX"],
-		layer["offsetY"],
-		layer["blur"],
-		layer["spread"],
-		layer["inset"]
+		layer.color,
+		layer.offsetX,
+		layer.offsetY,
+		layer.blur,
+		layer.spread,
+		layer.inset
 	].map((p) => p === void 0 ? "" : JSON.stringify(p)).join("|")}|${fallback}`;
 }
 function gradientStopKey(stop, fallback) {
-	return `stop|${stop["position"] ?? fallback}|${JSON.stringify(stop["color"])}`;
+	return `stop|${stop.position ?? fallback}|${JSON.stringify(stop.color)}`;
 }
 //#endregion
 //#region src/token-detail/CompositePreview.tsx
@@ -3241,8 +3252,8 @@ function CompositePreviewContent({ type, cssVar, rawValue }) {
 			style: {
 				fontFamily: `var(${base}-font-family)`,
 				fontSize: `var(${base}-font-size)`,
-				fontWeight: `var(${base}-font-weight)`,
-				lineHeight: `var(${base}-line-height)`,
+				fontWeight: cssVarAsNumber(`var(${base}-font-weight)`),
+				lineHeight: cssVarAsNumber(`var(${base}-line-height)`),
 				letterSpacing: `var(${base}-letter-spacing)`
 			},
 			children: PANGRAM
@@ -3275,7 +3286,7 @@ function CompositePreviewContent({ type, cssVar, rawValue }) {
 	});
 	if (type === "fontWeight") return /* @__PURE__ */ jsx("div", {
 		className: "sb-token-detail__font-weight-sample",
-		style: { fontWeight: cssVar },
+		style: { fontWeight: cssVarAsNumber(cssVar) },
 		children: "Aa"
 	});
 	if (type === "cubicBezier") return /* @__PURE__ */ jsx(TransitionSample, { transition: `left 800ms ${cssVar}` });
@@ -3585,7 +3596,30 @@ function TokenDetail({ path, heading }) {
 }
 //#endregion
 //#region src/internal/DetailOverlay.tsx
+/**
+* Selector for elements the trap considers focus stops. Mirrors the
+* "tabbable" set most focus-trap libraries use; the `:not(...)` clauses
+* skip the panel wrapper itself (we focus it manually on mount via its
+* own ref) and any explicitly-detabbed descendants.
+*/
+const FOCUSABLE_SELECTOR = [
+	"a[href]",
+	"button:not([disabled])",
+	"input:not([disabled])",
+	"select:not([disabled])",
+	"textarea:not([disabled])",
+	"[tabindex]:not([tabindex=\"-1\"])"
+].join(", ");
 function DetailOverlay({ path, onClose, testId = "swatchbook-overlay" }) {
+	const panelRef = useRef(null);
+	const openerRef = useRef(null);
+	useEffect(() => {
+		openerRef.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+		panelRef.current?.focus();
+		return () => {
+			openerRef.current?.focus();
+		};
+	}, []);
 	useEffect(() => {
 		const onKey = (e) => {
 			if (e.key === "Escape") onClose();
@@ -3593,17 +3627,48 @@ function DetailOverlay({ path, onClose, testId = "swatchbook-overlay" }) {
 		window.addEventListener("keydown", onKey);
 		return () => window.removeEventListener("keydown", onKey);
 	}, [onClose]);
+	/**
+	* Wrap Tab inside the panel: from the last focusable, jump to the first;
+	* from the first (or from the panel itself), Shift+Tab jumps to the last.
+	* Defers to the browser otherwise.
+	*/
+	const onPanelKeyDown = (e) => {
+		if (e.key !== "Tab") return;
+		const panel = panelRef.current;
+		if (!panel) return;
+		const focusables = panel.querySelectorAll(FOCUSABLE_SELECTOR);
+		if (focusables.length === 0) {
+			e.preventDefault();
+			return;
+		}
+		const first = focusables[0];
+		const last = focusables[focusables.length - 1];
+		const active = document.activeElement;
+		if (!first || !last) return;
+		if (e.shiftKey) {
+			if (active === first || active === panel) {
+				e.preventDefault();
+				last.focus();
+			}
+		} else if (active === last) {
+			e.preventDefault();
+			first.focus();
+		}
+	};
 	return /* @__PURE__ */ jsx("div", {
 		className: "sb-detail-overlay__backdrop",
 		onClick: onClose,
 		role: "presentation",
 		"data-testid": testId,
 		children: /* @__PURE__ */ jsxs("div", {
+			ref: panelRef,
 			className: "sb-detail-overlay__panel",
 			onClick: (e) => e.stopPropagation(),
+			onKeyDown: onPanelKeyDown,
 			role: "dialog",
 			"aria-modal": "true",
 			"aria-label": `Token detail for ${path}`,
+			tabIndex: -1,
 			children: [/* @__PURE__ */ jsx("button", {
 				type: "button",
 				className: "sb-detail-overlay__close",
@@ -3692,6 +3757,16 @@ function collectLeafPaths(nodes, out) {
 	for (const node of nodes) if (node.kind === "leaf") out.push(node.path);
 	else collectLeafPaths(node.children, out);
 }
+function flattenVisible(nodes, expanded, parentPath, out) {
+	for (const node of nodes) {
+		out.push({
+			path: node.path,
+			kind: node.kind,
+			parentPath
+		});
+		if (node.kind === "group" && expanded.has(node.path)) flattenVisible(node.children, expanded, node.path, out);
+	}
+}
 /**
 * Return a pruned copy of the tree keeping only leaves whose path is in
 * `matches`, plus the groups on the way to them. Every surviving group's
@@ -3771,6 +3846,125 @@ function TokenNavigator({ root, type, initiallyExpanded = 1, searchable = true,
 		if (onSelect) onSelect(path);
 		else setSelectedPath(path);
 	}, [onSelect]);
+	const [focusedPath, setFocusedPath] = useState(null);
+	const treeItemRefs = useRef(/* @__PURE__ */ new Map());
+	const registerTreeItem = useCallback((path) => (el) => {
+		if (el) treeItemRefs.current.set(path, el);
+		else treeItemRefs.current.delete(path);
+	}, []);
+	const flatVisible = useMemo(() => {
+		const out = [];
+		flattenVisible(visibleTree, effectiveExpanded, null, out);
+		return out;
+	}, [visibleTree, effectiveExpanded]);
+	useEffect(() => {
+		if (flatVisible.length === 0) {
+			setFocusedPath(null);
+			return;
+		}
+		setFocusedPath((prev) => {
+			if (prev && flatVisible.some((entry) => entry.path === prev)) return prev;
+			return flatVisible[0]?.path ?? null;
+		});
+	}, [flatVisible]);
+	const focusByPath = useCallback((path) => {
+		const node = treeItemRefs.current.get(path);
+		if (node) {
+			node.focus();
+			setFocusedPath(path);
+		} else setFocusedPath(path);
+	}, []);
+	useEffect(() => {
+		if (focusedPath === null) return;
+		const node = treeItemRefs.current.get(focusedPath);
+		if (node && document.activeElement !== node) {
+			const active = document.activeElement;
+			if (active instanceof HTMLElement && active.closest("[role=\"tree\"]")) node.focus();
+		}
+	}, [focusedPath]);
+	const handleTreeKeyDown = useCallback((e) => {
+		if (flatVisible.length === 0) return;
+		const active = document.activeElement;
+		if (!(active instanceof HTMLLIElement)) return;
+		const activePath = active.getAttribute("data-path");
+		if (activePath === null) return;
+		const currentIndex = flatVisible.findIndex((entry) => entry.path === activePath);
+		if (currentIndex < 0) return;
+		const current = flatVisible[currentIndex];
+		if (!current) return;
+		switch (e.key) {
+			case "ArrowDown": {
+				const next = flatVisible[currentIndex + 1];
+				if (next) {
+					e.preventDefault();
+					focusByPath(next.path);
+				}
+				return;
+			}
+			case "ArrowUp": {
+				const prev = flatVisible[currentIndex - 1];
+				if (prev) {
+					e.preventDefault();
+					focusByPath(prev.path);
+				}
+				return;
+			}
+			case "Home": {
+				const first = flatVisible[0];
+				if (first) {
+					e.preventDefault();
+					focusByPath(first.path);
+				}
+				return;
+			}
+			case "End": {
+				const last = flatVisible[flatVisible.length - 1];
+				if (last) {
+					e.preventDefault();
+					focusByPath(last.path);
+				}
+				return;
+			}
+			case "ArrowRight":
+				if (current.kind === "group") {
+					if (!effectiveExpanded.has(current.path)) {
+						e.preventDefault();
+						toggle(current.path);
+						return;
+					}
+					const firstChild = flatVisible[currentIndex + 1];
+					if (firstChild && firstChild.parentPath === current.path) {
+						e.preventDefault();
+						focusByPath(firstChild.path);
+					}
+				}
+				return;
+			case "ArrowLeft":
+				if (current.kind === "group" && effectiveExpanded.has(current.path)) {
+					e.preventDefault();
+					toggle(current.path);
+					return;
+				}
+				if (current.parentPath !== null) {
+					e.preventDefault();
+					focusByPath(current.parentPath);
+				}
+				return;
+			case "Enter":
+			case " ":
+				e.preventDefault();
+				if (current.kind === "group") toggle(current.path);
+				else handleLeafClick(current.path);
+				return;
+			default: return;
+		}
+	}, [
+		flatVisible,
+		effectiveExpanded,
+		toggle,
+		focusByPath,
+		handleLeafClick
+	]);
 	const typeLabel = typeFilter ? ` · ${[...typeFilter].map((t) => `$type=${t}`).join(", ")}` : "";
 	const trimmedQuery = query.trim();
 	const matchCount = useMemo(() => {
@@ -3819,10 +4013,15 @@ function TokenNavigator({ root, type, initiallyExpanded = 1, searchable = true,
 			}) : /* @__PURE__ */ jsx("ul", {
 				className: "sb-token-navigator__tree",
 				role: "tree",
+				"aria-label": "Token graph",
+				onKeyDown: handleTreeKeyDown,
 				children: visibleTree.map((node) => /* @__PURE__ */ jsx(TreeNodeRow, {
 					node,
 					expanded: effectiveExpanded,
+					focusedPath,
+					registerTreeItem,
 					onToggle: toggle,
+					onFocusPath: setFocusedPath,
 					onLeafClick: handleLeafClick
 				}, node.path || node.segment))
 			}),
@@ -3834,29 +4033,31 @@ function TokenNavigator({ root, type, initiallyExpanded = 1, searchable = true,
 		]
 	});
 }
-function TreeNodeRow({ node, expanded, onToggle, onLeafClick }) {
+function TreeNodeRow({ node, expanded, focusedPath, registerTreeItem, onToggle, onFocusPath, onLeafClick }) {
 	if (node.kind === "leaf") return /* @__PURE__ */ jsx(LeafRow, {
 		node,
+		focusedPath,
+		registerTreeItem,
+		onFocusPath,
 		onLeafClick
 	});
 	const isOpen = expanded.has(node.path);
-	const onKey = (e) => {
-		if (e.key === "Enter" || e.key === " ") {
-			e.preventDefault();
-			onToggle(node.path);
-		}
-	};
+	const isFocused = focusedPath === node.path;
 	return /* @__PURE__ */ jsxs("li", {
+		ref: registerTreeItem(node.path),
 		role: "treeitem",
 		"aria-expanded": isOpen,
+		tabIndex: isFocused ? 0 : -1,
+		onFocus: () => onFocusPath(node.path),
+		"data-path": node.path,
+		"data-testid": "token-navigator-group",
 		children: [/* @__PURE__ */ jsxs("div", {
-			role: "button",
-			tabIndex: 0,
 			className: "sb-token-navigator__group-row",
-			onClick: () => onToggle(node.path),
-			onKeyDown: onKey,
-			"data-path": node.path,
-			"data-testid": "token-navigator-group",
+			"data-testid": "token-navigator-group-row",
+			onClick: () => {
+				onFocusPath(node.path);
+				onToggle(node.path);
+			},
 			children: [
 				/* @__PURE__ */ jsx("span", {
 					className: "sb-token-navigator__caret",
@@ -3875,30 +4076,32 @@ function TreeNodeRow({ node, expanded, onToggle, onLeafClick }) {
 			children: node.children.map((c) => /* @__PURE__ */ jsx(TreeNodeRow, {
 				node: c,
 				expanded,
+				focusedPath,
+				registerTreeItem,
 				onToggle,
+				onFocusPath,
 				onLeafClick
 			}, c.path || c.segment))
 		})]
 	});
 }
-function LeafRow({ node, onLeafClick }) {
-	const onKey = (e) => {
-		if (e.key === "Enter" || e.key === " ") {
-			e.preventDefault();
-			onLeafClick(node.path);
-		}
-	};
+function LeafRow({ node, focusedPath, registerTreeItem, onFocusPath, onLeafClick }) {
 	const type = node.token.$type ?? "";
+	const isFocused = focusedPath === node.path;
 	return /* @__PURE__ */ jsx("li", {
+		ref: registerTreeItem(node.path),
 		role: "treeitem",
+		tabIndex: isFocused ? 0 : -1,
+		onFocus: () => onFocusPath(node.path),
+		"data-path": node.path,
+		"data-testid": "token-navigator-leaf",
 		children: /* @__PURE__ */ jsxs("div", {
-			role: "button",
-			tabIndex: 0,
 			className: "sb-token-navigator__leaf-row",
-			onClick: () => onLeafClick(node.path),
-			onKeyDown: onKey,
-			"data-path": node.path,
-			"data-testid": "token-navigator-leaf",
+			"data-testid": "token-navigator-leaf-row",
+			onClick: () => {
+				onFocusPath(node.path);
+				onLeafClick(node.path);
+			},
 			children: [
 				/* @__PURE__ */ jsx("span", {
 					className: "sb-token-navigator__caret",
@@ -4150,7 +4353,7 @@ function asDimension(raw) {
 	if (typeof raw === "string" || typeof raw === "number") return String(raw);
 	if (typeof raw === "object") {
 		const v = raw;
-		if ("value" in v && "unit" in v) return `${String(v["value"])}${String(v["unit"])}`;
+		if (v.value !== void 0 && v.unit !== void 0) return `${String(v.value)}${String(v.unit)}`;
 	}
 }
 function asFontFamily(raw) {
@@ -4158,11 +4361,11 @@ function asFontFamily(raw) {
 	if (Array.isArray(raw)) return raw.map(String).join(", ");
 }
 function buildRow(path, composite) {
-	const fontFamily = asFontFamily(composite["fontFamily"]);
-	const fontSize = asDimension(composite["fontSize"]);
-	const fontWeight = composite["fontWeight"] == null ? void 0 : String(composite["fontWeight"]);
-	const lineHeight = composite["lineHeight"] == null ? void 0 : String(composite["lineHeight"]);
-	const letterSpacing = asDimension(composite["letterSpacing"]);
+	const fontFamily = asFontFamily(composite.fontFamily);
+	const fontSize = asDimension(composite.fontSize);
+	const fontWeight = composite.fontWeight == null ? void 0 : String(composite.fontWeight);
+	const lineHeight = composite.lineHeight == null ? void 0 : String(composite.lineHeight);
+	const letterSpacing = asDimension(composite.letterSpacing);
 	const sampleStyle = {};
 	if (fontFamily) sampleStyle.fontFamily = fontFamily;
 	if (fontSize) sampleStyle.fontSize = fontSize;