@unpunnyfuns/swatchbook-blocks 0.52.0 → 0.53.0

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) {
@@ -2999,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")
 			]
 		]);
@@ -3029,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")
 			]
 		]);
@@ -3049,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")
 			]
 		]);
@@ -3081,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
 						})
 					]
@@ -3123,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));
 			})
@@ -3215,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
@@ -3600,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();
@@ -3608,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",
@@ -3707,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
@@ -3786,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(() => {
@@ -3834,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))
 			}),
@@ -3849,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",
@@ -3890,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",
@@ -4165,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) {
@@ -4173,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;