@unpunnyfuns/swatchbook-blocks 0.14.1 → 0.15.0

package/dist/index.d.mts

@@ -605,11 +605,12 @@ interface TokenNavigatorProps {
    */
   initiallyExpanded?: number;
   /**
-   * Render a runtime search input above the tree. Matches are
-   * case-insensitive substrings against a leaf's token path; groups
-   * that contain no matching leaves collapse out, and every group on
-   * the path to a match auto-expands so hits are visible without
-   * clicking. Defaults to `true`.
+   * Render a runtime search input above the tree. Matches are fuzzy
+   * (case-insensitive, out-of-order terms, single-character typo
+   * tolerance) against a leaf's token path; groups that contain no
+   * matching leaves collapse out, and every group on the path to a
+   * match auto-expands so hits are visible without clicking. Defaults
+   * to `true`.
    */
   searchable?: boolean;
   /**
@@ -652,10 +653,11 @@ interface TokenTableProps {
   sortDir?: SortDir;
   /**
    * Render a runtime search input above the table that narrows rows by
-   * case-insensitive substring against the token path, type, or value.
-   * Defaults to `true` because browsing a multi-hundred-token reference
-   * without search is painful. Pass `false` to hide the input (the
-   * `filter` / `type` props still apply at authoring time).
+   * fuzzy match (case-insensitive, out-of-order terms, single-character
+   * typo tolerance) against the token path, type, or value. Defaults to
+   * `true` because browsing a multi-hundred-token reference without
+   * search is painful. Pass `false` to hide the input (the `filter` /
+   * `type` props still apply at authoring time).
    */
   searchable?: boolean;
   /**

package/dist/index.mjs

@@ -6,6 +6,7 @@ import { addons } from "storybook/preview-api";
 import { axes, css, cssVarPrefix, defaultTheme, diagnostics, presets, themes, themesResolved } from "virtual:swatchbook/tokens";
 import cx from "clsx";
 import { analyzeAxisVariance } from "@unpunnyfuns/swatchbook-core/variance";
+import { fuzzyFilter } from "@unpunnyfuns/swatchbook-core/fuzzy";
 //#region src/format-color.ts
 const COLOR_FORMATS = [
 	"hex",
@@ -3015,18 +3016,21 @@ function countLeaves(node) {
 	for (const c of node.children) n += countLeaves(c);
 	return n;
 }
+function collectLeafPaths(nodes, out) {
+	for (const node of nodes) if (node.kind === "leaf") out.push(node.path);
+	else collectLeafPaths(node.children, out);
+}
 /**
-* Return a pruned copy of the tree containing only leaves whose path
-* matches `needle` (case-insensitive substring) plus the groups on the
-* way to them. Every surviving group's path is added to `expandOut` so
-* callers can force those groups open.
+* 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
+* path is added to `expandOut` so callers can force those groups open.
 */
-function pruneTreeForSearch(nodes, needle, expandOut) {
+function pruneTreeForMatches(nodes, matches, expandOut) {
 	const out = [];
 	for (const node of nodes) if (node.kind === "leaf") {
-		if (node.path.toLowerCase().includes(needle)) out.push(node);
+		if (matches.has(node.path)) out.push(node);
 	} else {
-		const children = pruneTreeForSearch(node.children, needle, expandOut);
+		const children = pruneTreeForMatches(node.children, matches, expandOut);
 		if (children.length > 0) {
 			expandOut.add(node.path);
 			out.push({
@@ -3064,10 +3068,12 @@ function TokenNavigator({ root, type, initiallyExpanded = 1, searchable = true,
 			visibleTree: tree,
 			searchExpanded: null
 		};
-		const needle = query.trim().toLowerCase();
+		const leafPaths = [];
+		collectLeafPaths(tree, leafPaths);
+		const matches = new Set(fuzzyFilter(leafPaths, query, (p) => p));
 		const expandOut = /* @__PURE__ */ new Set();
 		return {
-			visibleTree: pruneTreeForSearch(tree, needle, expandOut),
+			visibleTree: matches.size === 0 ? [] : pruneTreeForMatches(tree, matches, expandOut),
 			searchExpanded: expandOut
 		};
 	}, [
@@ -3340,8 +3346,7 @@ function TokenTable({ filter, type, caption, sortBy = "path", sortDir = "asc", s
 	]);
 	const visibleRows = useMemo(() => {
 		if (!searchable || query.trim() === "") return rows;
-		const needle = query.trim().toLowerCase();
-		return rows.filter((row) => row.path.toLowerCase().includes(needle) || row.type.toLowerCase().includes(needle) || row.value.toLowerCase().includes(needle));
+		return fuzzyFilter(rows, query, (row) => `${row.path} ${row.type} ${row.value}`);
 	}, [
 		rows,
 		query,
@@ -3371,7 +3376,7 @@ function TokenTable({ filter, type, caption, sortBy = "path", sortDir = "asc", s
 					placeholder: "Search tokens…",
 					value: query,
 					onChange: (e) => setQuery(e.target.value),
-					"aria-label": "Search tokens by path, type, or value",
+					"aria-label": "Fuzzy-search tokens by path, type, or value",
 					"data-testid": "token-table-search"
 				})
 			}),