@unpunnyfuns/swatchbook-blocks 0.58.0 → 0.58.1

package/dist/index.mjs

@@ -1,6 +1,6 @@
 import './style.css';
 import Color from "colorjs.io";
-import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import { createContext, memo, useCallback, useContext, useDeferredValue, useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { buildResolveAt } from "@unpunnyfuns/swatchbook-core/resolve-at";
 import { makeCssVar } from "@unpunnyfuns/swatchbook-core/css-var";
@@ -881,10 +881,13 @@ function fixedPrefixLength(filter) {
 	return fixed;
 }
 function ColorPalette({ filter, groupBy, caption, sortBy = "path", sortDir = "asc" }) {
-	const project = useProject();
-	const { resolved, activeTheme, activeAxes, cssVarPrefix } = project;
+	const { resolved, activeTheme, activeAxes, cssVarPrefix, listing } = useProject();
 	const colorFormat = useColorFormat();
 	const groups = useMemo(() => {
+		const projectFields = {
+			listing,
+			cssVarPrefix
+		};
 		const entries = sortTokens(Object.entries(resolved).filter(([path, token]) => {
 			if (token.$type !== "color") return false;
 			return matchPath(path, filter);
@@ -900,11 +903,11 @@ function ColorPalette({ filter, groupBy, caption, sortBy = "path", sortDir = "as
 			const groupKey = segments.slice(0, effectiveGroupBy).join(".");
 			const leaf = segments.slice(effectiveGroupBy).join(".") || segments.at(-1) || path;
 			const list = bucket.get(groupKey) ?? [];
-			const formatted = resolveColorValue(path, token.$value, colorFormat, project);
+			const formatted = resolveColorValue(path, token.$value, colorFormat, projectFields);
 			list.push({
 				path,
 				leaf,
-				cssVar: resolveCssVar(path, project),
+				cssVar: resolveCssVar(path, projectFields),
 				value: formatted.value,
 				outOfGamut: formatted.outOfGamut
 			});
@@ -913,9 +916,10 @@ function ColorPalette({ filter, groupBy, caption, sortBy = "path", sortDir = "as
 		return [...bucket.entries()].toSorted(([a], [b]) => a.localeCompare(b, void 0, { numeric: true }));
 	}, [
 		resolved,
+		listing,
+		cssVarPrefix,
 		filter,
 		groupBy,
-		project,
 		colorFormat,
 		sortBy,
 		sortDir
@@ -1021,14 +1025,18 @@ function CopyButton$1({ value, label, variant = "icon", className }) {
 const BASE_LABEL = "base";
 const COLUMN_COUNT = 6;
 function ColorTable({ filter, caption, sortBy = "path", sortDir = "asc", searchable = true, onSelect, variants }) {
-	const project = useProject();
-	const { resolved, activeTheme, activeAxes, cssVarPrefix } = project;
+	const { resolved, activeTheme, activeAxes, cssVarPrefix, listing } = useProject();
 	const colorFormat = useColorFormat();
 	const [query, setQuery] = useState("");
+	const deferredQuery = useDeferredValue(query);
 	const [selectedByBase, setSelectedByBase] = useState({});
 	const [expandedByBase, setExpandedByBase] = useState(() => /* @__PURE__ */ new Set());
 	const defs = useMemo(() => buildVariantDefs(variants), [variants]);
 	const groups = useMemo(() => {
+		const projectFields = {
+			listing,
+			cssVarPrefix
+		};
 		const sorted = sortTokens(Object.entries(resolved).filter(([path, token]) => {
 			if (token.$type !== "color") return false;
 			return matchPath(path, filter);
@@ -1039,7 +1047,7 @@ function ColorTable({ filter, caption, sortBy = "path", sortDir = "asc", searcha
 		const groupMap = /* @__PURE__ */ new Map();
 		for (const [path, token] of sorted) {
 			const raw = token.$value;
-			const hex = resolveColorValue(path, raw, "hex", project);
+			const hex = resolveColorValue(path, raw, "hex", projectFields);
 			const hsl = formatColor(raw, "hsl");
 			const oklch = formatColor(raw, "oklch");
 			const active = pickActiveFormat(raw, colorFormat, hex, hsl, oklch);
@@ -1047,7 +1055,7 @@ function ColorTable({ filter, caption, sortBy = "path", sortDir = "asc", searcha
 			const variant = {
 				label: match?.label ?? BASE_LABEL,
 				path,
-				cssVar: resolveCssVar(path, project),
+				cssVar: resolveCssVar(path, projectFields),
 				value: active.value,
 				outOfGamut: active.outOfGamut,
 				hex: hex.value,
@@ -1078,19 +1086,20 @@ function ColorTable({ filter, caption, sortBy = "path", sortDir = "asc", searcha
 		return out;
 	}, [
 		resolved,
+		listing,
+		cssVarPrefix,
 		filter,
-		project,
 		sortBy,
 		sortDir,
 		defs,
 		colorFormat
 	]);
 	const visibleGroups = useMemo(() => {
-		if (!searchable || query.trim() === "") return groups;
-		return fuzzyFilter(groups, query, (g) => g.searchText);
+		if (!searchable || deferredQuery.trim() === "") return groups;
+		return fuzzyFilter(groups, deferredQuery, (g) => g.searchText);
 	}, [
 		groups,
-		query,
+		deferredQuery,
 		searchable
 	]);
 	const totalTokens = useMemo(() => groups.reduce((n, g) => n + g.variants.length, 0), [groups]);
@@ -1192,7 +1201,7 @@ function ColorTable({ filter, caption, sortBy = "path", sortDir = "asc", searcha
 		})]
 	});
 }
-function GroupRow({ group, selectedLabel, expanded, onToggleExpand, onSelectVariant, onSelect }) {
+const GroupRow = memo(function GroupRow({ group, selectedLabel, expanded, onToggleExpand, onSelectVariant, onSelect }) {
 	const multi = group.variants.length > 1;
 	const active = group.variants.find((v) => v.label === selectedLabel) ?? group.variants[0];
 	const nameText = multi ? group.base : active.path;
@@ -1291,7 +1300,7 @@ function GroupRow({ group, selectedLabel, expanded, onToggleExpand, onSelectVari
 			})
 		})
 	})] });
-}
+});
 function ExpandedDetail({ group, active }) {
 	const hasDescription = active.description !== void 0 && active.description.length > 0;
 	const chain = active.aliasChain && active.aliasChain.length > 0 ? active.aliasChain : void 0;
@@ -1507,29 +1516,32 @@ const severityLabel = {
 	warn: "WARN",
 	info: "INFO"
 };
-function summaryText(diagnostics) {
-	if (diagnostics.length === 0) return "✔ OK · no diagnostics";
-	const counts = {
-		error: 0,
-		warn: 0,
-		info: 0
+function summarize(diagnostics) {
+	if (diagnostics.length === 0) return {
+		text: "✔ OK · no diagnostics",
+		variant: "ok",
+		hasErrorsOrWarnings: false
 	};
-	for (const d of diagnostics) counts[d.severity] += 1;
+	let errors = 0;
+	let warnings = 0;
+	let infos = 0;
+	for (const d of diagnostics) if (d.severity === "error") errors += 1;
+	else if (d.severity === "warn") warnings += 1;
+	else infos += 1;
 	const parts = [];
-	if (counts.error > 0) parts.push(`✖ ${counts.error} error${counts.error === 1 ? "" : "s"}`);
-	if (counts.warn > 0) parts.push(`⚠ ${counts.warn} warning${counts.warn === 1 ? "" : "s"}`);
-	if (counts.info > 0) parts.push(`${counts.info} info`);
-	return parts.join(" · ");
+	if (errors > 0) parts.push(`✖ ${errors} error${errors === 1 ? "" : "s"}`);
+	if (warnings > 0) parts.push(`⚠ ${warnings} warning${warnings === 1 ? "" : "s"}`);
+	if (infos > 0) parts.push(`${infos} info`);
+	const variant = errors > 0 ? "error" : warnings > 0 ? "warn" : null;
+	return {
+		text: parts.join(" · "),
+		variant,
+		hasErrorsOrWarnings: errors > 0 || warnings > 0
+	};
 }
 function diagnosticKey(d, i) {
 	return `${d.severity}:${d.group}:${d.filename ?? ""}:${d.line ?? ""}:${d.message}:${i}`;
 }
-function summaryVariant(diagnostics) {
-	if (diagnostics.length === 0) return "ok";
-	if (diagnostics.some((d) => d.severity === "error")) return "error";
-	if (diagnostics.some((d) => d.severity === "warn")) return "warn";
-	return null;
-}
 /**
 * Render the project's load diagnostics — parser errors, resolver warnings,
 * disabled-axes validation issues, etc. — as a collapsible list. Auto-opens
@@ -1542,16 +1554,15 @@ function summaryVariant(diagnostics) {
 */
 function Diagnostics({ caption } = {}) {
 	const { activeAxes, cssVarPrefix, diagnostics } = useProject();
-	const hasErrorsOrWarnings = diagnostics.some((d) => d.severity === "error" || d.severity === "warn");
-	const headingText = caption ?? `Diagnostics · ${summaryText(diagnostics)}`;
-	const variant = summaryVariant(diagnostics);
+	const summary = useMemo(() => summarize(diagnostics), [diagnostics]);
+	const headingText = caption ?? `Diagnostics · ${summary.text}`;
 	return /* @__PURE__ */ jsx("div", {
 		...themeAttrs(cssVarPrefix, activeAxes),
 		"data-testid": "diagnostics",
 		children: /* @__PURE__ */ jsxs("details", {
-			open: hasErrorsOrWarnings,
+			open: summary.hasErrorsOrWarnings,
 			children: [/* @__PURE__ */ jsx("summary", {
-				className: cx("sb-diagnostics__summary", variant && `sb-diagnostics__summary--${variant}`),
+				className: cx("sb-diagnostics__summary", summary.variant && `sb-diagnostics__summary--${summary.variant}`),
 				children: headingText
 			}), diagnostics.length > 0 && /* @__PURE__ */ jsx("ul", {
 				role: "list",
@@ -3897,14 +3908,15 @@ function TokenNavigator({ root, type, initiallyExpanded = 1, searchable = true,
 	}, [initialExpanded]);
 	const [selectedPath, setSelectedPath] = useState(null);
 	const [query, setQuery] = useState("");
+	const deferredQuery = useDeferredValue(query);
 	const { visibleTree, searchExpanded } = useMemo(() => {
-		if (!searchable || query.trim() === "") return {
+		if (!searchable || deferredQuery.trim() === "") return {
 			visibleTree: tree,
 			searchExpanded: null
 		};
 		const leafPaths = [];
 		collectLeafPaths(tree, leafPaths);
-		const matches = new Set(fuzzyFilter(leafPaths, query, (p) => p));
+		const matches = new Set(fuzzyFilter(leafPaths, deferredQuery, (p) => p));
 		const expandOut = /* @__PURE__ */ new Set();
 		return {
 			visibleTree: matches.size === 0 ? [] : pruneTreeForMatches(tree, matches, expandOut),
@@ -3912,7 +3924,7 @@ function TokenNavigator({ root, type, initiallyExpanded = 1, searchable = true,
 		};
 	}, [
 		tree,
-		query,
+		deferredQuery,
 		searchable
 	]);
 	const effectiveExpanded = useMemo(() => {
@@ -3933,7 +3945,7 @@ function TokenNavigator({ root, type, initiallyExpanded = 1, searchable = true,
 		if (onSelect) onSelect(path);
 		else setSelectedPath(path);
 	}, [onSelect]);
-	const [focusedPath, setFocusedPath] = useState(null);
+	const [storedFocus, setStoredFocus] = useState(null);
 	const treeItemRefs = useRef(/* @__PURE__ */ new Map());
 	const registerTreeItem = useCallback((path) => (el) => {
 		if (el) treeItemRefs.current.set(path, el);
@@ -3944,22 +3956,15 @@ function TokenNavigator({ root, type, initiallyExpanded = 1, searchable = true,
 		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 focusedPath = useMemo(() => {
+		if (flatVisible.length === 0) return null;
+		if (storedFocus && flatVisible.some((entry) => entry.path === storedFocus)) return storedFocus;
+		return flatVisible[0]?.path ?? null;
+	}, [flatVisible, storedFocus]);
 	const focusByPath = useCallback((path) => {
 		const node = treeItemRefs.current.get(path);
-		if (node) {
-			node.focus();
-			setFocusedPath(path);
-		} else setFocusedPath(path);
+		if (node) node.focus();
+		setStoredFocus(path);
 	}, []);
 	useEffect(() => {
 		if (focusedPath === null) return;
@@ -4113,7 +4118,7 @@ function TokenNavigator({ root, type, initiallyExpanded = 1, searchable = true,
 					focusedPath,
 					registerTreeItem,
 					onToggle: toggle,
-					onFocusPath: setFocusedPath,
+					onFocusPath: setStoredFocus,
 					onLeafClick: handleLeafClick,
 					level: 1,
 					setsize: visibleTree.length,
@@ -4131,7 +4136,7 @@ function TokenNavigator({ root, type, initiallyExpanded = 1, searchable = true,
 function TreeNodeRow({ node, expanded, focusedPath, registerTreeItem, onToggle, onFocusPath, onLeafClick, level, setsize, posinset }) {
 	if (node.kind === "leaf") return /* @__PURE__ */ jsx(LeafRow, {
 		node,
-		focusedPath,
+		isFocused: focusedPath === node.path,
 		registerTreeItem,
 		onFocusPath,
 		onLeafClick,
@@ -4189,9 +4194,8 @@ function TreeNodeRow({ node, expanded, focusedPath, registerTreeItem, onToggle,
 		})]
 	});
 }
-function LeafRow({ node, focusedPath, registerTreeItem, onFocusPath, onLeafClick, level, setsize, posinset }) {
+const LeafRow = memo(function LeafRow({ node, isFocused, registerTreeItem, onFocusPath, onLeafClick, level, setsize, posinset }) {
 	const type = node.token.$type ?? "";
-	const isFocused = focusedPath === node.path;
 	return /* @__PURE__ */ jsx("li", {
 		ref: registerTreeItem(node.path),
 		role: "treeitem",
@@ -4230,8 +4234,8 @@ function LeafRow({ node, focusedPath, registerTreeItem, onFocusPath, onLeafClick
 			]
 		})
 	});
-}
-function LeafPreview({ path, token }) {
+});
+const LeafPreview = memo(function LeafPreview({ path, token }) {
 	const project = useProject();
 	const colorFormat = useColorFormat();
 	const type = token.$type;
@@ -4290,16 +4294,20 @@ function LeafPreview({ path, token }) {
 			children: formatTokenValue(token.$value, type, colorFormat, project.listing[path])
 		})
 	});
-}
+});
 //#endregion
 //#region src/TokenTable.tsx
 function TokenTable({ filter, type, caption, sortBy = "path", sortDir = "asc", searchable = true, onSelect }) {
-	const project = useProject();
-	const { resolved, activeTheme, activeAxes, cssVarPrefix } = project;
+	const { resolved, activeTheme, activeAxes, cssVarPrefix, listing } = useProject();
 	const colorFormat = useColorFormat();
 	const [selectedPath, setSelectedPath] = useState(null);
 	const [query, setQuery] = useState("");
+	const deferredQuery = useDeferredValue(query);
 	const rows = useMemo(() => {
+		const projectFields = {
+			listing,
+			cssVarPrefix
+		};
 		return sortTokens(Object.entries(resolved).filter(([path, token]) => {
 			if (!matchPath(path, filter)) return false;
 			if (type && token.$type !== type) return false;
@@ -4309,31 +4317,32 @@ function TokenTable({ filter, type, caption, sortBy = "path", sortDir = "asc", s
 			dir: sortDir
 		}).map(([path, token]) => {
 			const isColor = token.$type === "color";
-			const color = isColor ? resolveColorValue(path, token.$value, colorFormat, project) : null;
+			const color = isColor ? resolveColorValue(path, token.$value, colorFormat, projectFields) : null;
 			return {
 				path,
 				type: token.$type ?? "",
-				value: formatTokenValue(token.$value, token.$type, colorFormat, project.listing[path]),
+				value: formatTokenValue(token.$value, token.$type, colorFormat, listing[path]),
 				outOfGamut: color?.outOfGamut ?? false,
-				cssVar: resolveCssVar(path, project),
+				cssVar: resolveCssVar(path, projectFields),
 				isColor
 			};
 		});
 	}, [
 		resolved,
+		listing,
+		cssVarPrefix,
 		filter,
 		type,
-		project,
 		colorFormat,
 		sortBy,
 		sortDir
 	]);
 	const visibleRows = useMemo(() => {
-		if (!searchable || query.trim() === "") return rows;
-		return fuzzyFilter(rows, query, (row) => `${row.path} ${row.type} ${row.value}`);
+		if (!searchable || deferredQuery.trim() === "") return rows;
+		return fuzzyFilter(rows, deferredQuery, (row) => `${row.path} ${row.type} ${row.value}`);
 	}, [
 		rows,
-		query,
+		deferredQuery,
 		searchable
 	]);
 	const handleRowClick = useCallback((path) => {