@unpunnyfuns/swatchbook-blocks 0.5.0 → 0.6.1

package/dist/index.d.mts

@@ -590,12 +590,28 @@ declare function TokenUsageSnippet({
 interface TokenNavigatorProps {
   /** If provided, mount at this dot-path subtree and hide everything outside it. */
   root?: string;
+  /**
+   * Restrict the tree to tokens with the given DTCG `$type`(s). Pass a single
+   * string to scope to one type (`type="color"`), or an array for a narrow
+   * small-multiples view (`type={['duration', 'cubicBezier', 'transition']}`).
+   * Composes with `root` — both constraints must hold. Group nodes that end
+   * up with no surviving leaves collapse out.
+   */
+  type?: string | readonly string[];
   /**
    * Depth (from the mounted root) that is expanded on first render.
    * `0` = everything collapsed, `1` = top-level groups open (default),
    * `2` = one level deeper, etc.
    */
   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`.
+   */
+  searchable?: boolean;
   /**
    * Called with a leaf's full dot-path when it is clicked. When set, the
    * inline `<TokenDetail>` slide-over is suppressed — the consumer owns
@@ -605,7 +621,9 @@ interface TokenNavigatorProps {
 }
 declare function TokenNavigator({
   root,
+  type,
   initiallyExpanded,
+  searchable,
   onSelect
 }: TokenNavigatorProps): ReactElement;
 //#endregion
@@ -632,6 +650,14 @@ interface TokenTableProps {
   sortBy?: SortBy;
   /** `'asc'` (default) or `'desc'`. */
   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).
+   */
+  searchable?: boolean;
   /**
    * Called with the clicked row's dot-path. When set, the built-in
    * `<TokenDetail>` slide-over is suppressed — the consumer owns the
@@ -645,6 +671,7 @@ declare function TokenTable({
   caption,
   sortBy,
   sortDir,
+  searchable,
   onSelect
 }: TokenTableProps): ReactElement;
 //#endregion

package/dist/index.mjs

@@ -2830,12 +2830,13 @@ function DetailOverlay({ path, onClose, testId = "swatchbook-overlay" }) {
 }
 //#endregion
 //#region src/TokenNavigator.tsx
-function buildTree(resolved, root) {
+function buildTree(resolved, root, typeFilter) {
 	const rootPrefix = root && root.length > 0 ? `${root}.` : "";
 	const rootSegments = root ? root.split(".") : [];
-	const entries = Object.entries(resolved).filter(([path]) => {
-		if (!root) return true;
-		return path === root || path.startsWith(rootPrefix);
+	const entries = Object.entries(resolved).filter(([path, token]) => {
+		if (root && !(path === root || path.startsWith(rootPrefix))) return false;
+		if (typeFilter && !(token.$type && typeFilter.has(token.$type))) return false;
+		return true;
 	});
 	const rootNode = {
 		kind: "group",
@@ -2900,9 +2901,39 @@ function countLeaves(node) {
 	for (const c of node.children) n += countLeaves(c);
 	return n;
 }
-function TokenNavigator({ root, initiallyExpanded = 1, onSelect }) {
+/**
+* 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.
+*/
+function pruneTreeForSearch(nodes, needle, expandOut) {
+	const out = [];
+	for (const node of nodes) if (node.kind === "leaf") {
+		if (node.path.toLowerCase().includes(needle)) out.push(node);
+	} else {
+		const children = pruneTreeForSearch(node.children, needle, expandOut);
+		if (children.length > 0) {
+			expandOut.add(node.path);
+			out.push({
+				...node,
+				children
+			});
+		}
+	}
+	return out;
+}
+function TokenNavigator({ root, type, initiallyExpanded = 1, searchable = true, onSelect }) {
 	const { resolved, activeTheme, cssVarPrefix } = useProject();
-	const tree = useMemo(() => buildTree(resolved, root), [resolved, root]);
+	const typeFilter = useMemo(() => {
+		if (type === void 0) return void 0;
+		return new Set(Array.isArray(type) ? type : [type]);
+	}, [type]);
+	const tree = useMemo(() => buildTree(resolved, root, typeFilter), [
+		resolved,
+		root,
+		typeFilter
+	]);
 	const initialExpanded = useMemo(() => {
 		const out = /* @__PURE__ */ new Set();
 		collectInitialExpanded(tree, initiallyExpanded, out);
@@ -2913,6 +2944,29 @@ function TokenNavigator({ root, initiallyExpanded = 1, onSelect }) {
 		setExpanded(initialExpanded);
 	}, [initialExpanded]);
 	const [selectedPath, setSelectedPath] = useState(null);
+	const [query, setQuery] = useState("");
+	const { visibleTree, searchExpanded } = useMemo(() => {
+		if (!searchable || query.trim() === "") return {
+			visibleTree: tree,
+			searchExpanded: null
+		};
+		const needle = query.trim().toLowerCase();
+		const expandOut = /* @__PURE__ */ new Set();
+		return {
+			visibleTree: pruneTreeForSearch(tree, needle, expandOut),
+			searchExpanded: expandOut
+		};
+	}, [
+		tree,
+		query,
+		searchable
+	]);
+	const effectiveExpanded = useMemo(() => {
+		if (!searchExpanded) return expanded;
+		const merged = new Set(expanded);
+		for (const p of searchExpanded) merged.add(p);
+		return merged;
+	}, [expanded, searchExpanded]);
 	const toggle = useCallback((path) => {
 		setExpanded((prev) => {
 			const next = new Set(prev);
@@ -2925,27 +2979,56 @@ function TokenNavigator({ root, initiallyExpanded = 1, onSelect }) {
 		if (onSelect) onSelect(path);
 		else setSelectedPath(path);
 	}, [onSelect]);
+	const typeLabel = typeFilter ? ` · ${[...typeFilter].map((t) => `$type=${t}`).join(", ")}` : "";
 	if (tree.length === 0) return /* @__PURE__ */ jsx("div", {
 		...themeAttrs(cssVarPrefix, activeTheme),
-		children: /* @__PURE__ */ jsx(EmptyState, { children: root ? `No tokens under "${root}".` : "No tokens in the active theme." })
-	});
+		children: /* @__PURE__ */ jsx(EmptyState, { children: root ? `No tokens under "${root}"${typeFilter ? ` matching ${typeLabel.slice(3)}` : ""}.` : typeFilter ? `No tokens matching ${typeLabel.slice(3)} in the active theme.` : "No tokens in the active theme." })
+	});
+	const trimmedQuery = query.trim();
+	const matchCount = useMemo(() => {
+		if (!searchExpanded) return 0;
+		let n = 0;
+		for (const node of visibleTree) n += countLeaves(node);
+		return n;
+	}, [visibleTree, searchExpanded]);
 	return /* @__PURE__ */ jsxs("div", {
 		...themeAttrs(cssVarPrefix, activeTheme),
 		children: [
+			searchable && /* @__PURE__ */ jsx("div", {
+				className: "sb-token-navigator__search",
+				children: /* @__PURE__ */ jsx("input", {
+					type: "search",
+					className: "sb-token-navigator__search-input",
+					placeholder: "Search tokens…",
+					value: query,
+					onChange: (e) => setQuery(e.target.value),
+					"aria-label": "Search tokens by path",
+					"data-testid": "token-navigator-search"
+				})
+			}),
 			/* @__PURE__ */ jsxs("div", {
 				className: "sb-token-navigator__caption",
 				children: [
 					root ? `Tokens under ${root}` : "Token graph",
+					typeLabel,
+					trimmedQuery !== "" ? ` · ${matchCount} matching "${trimmedQuery}"` : "",
 					" · ",
 					activeTheme
 				]
 			}),
-			/* @__PURE__ */ jsx("ul", {
+			visibleTree.length === 0 ? /* @__PURE__ */ jsxs("div", {
+				className: "sb-block__empty",
+				children: [
+					"No tokens match \"",
+					trimmedQuery,
+					"\"."
+				]
+			}) : /* @__PURE__ */ jsx("ul", {
 				className: "sb-token-navigator__tree",
 				role: "tree",
-				children: tree.map((node) => /* @__PURE__ */ jsx(TreeNodeRow, {
+				children: visibleTree.map((node) => /* @__PURE__ */ jsx(TreeNodeRow, {
 					node,
-					expanded,
+					expanded: effectiveExpanded,
 					onToggle: toggle,
 					onLeafClick: handleLeafClick
 				}, node.path || node.segment))
@@ -3107,10 +3190,11 @@ function LeafPreview({ path, token }) {
 }
 //#endregion
 //#region src/TokenTable.tsx
-function TokenTable({ filter, type, caption, sortBy = "path", sortDir = "asc", onSelect }) {
+function TokenTable({ filter, type, caption, sortBy = "path", sortDir = "asc", searchable = true, onSelect }) {
 	const { resolved, activeTheme, cssVarPrefix } = useProject();
 	const colorFormat = useColorFormat();
 	const [selectedPath, setSelectedPath] = useState(null);
+	const [query, setQuery] = useState("");
 	const rows = useMemo(() => {
 		return sortTokens(Object.entries(resolved).filter(([path, token]) => {
 			if (!globMatch(path, filter)) return false;
@@ -3140,11 +3224,21 @@ function TokenTable({ filter, type, caption, sortBy = "path", sortDir = "asc", o
 		sortBy,
 		sortDir
 	]);
+	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));
+	}, [
+		rows,
+		query,
+		searchable
+	]);
 	const handleRowClick = useCallback((path) => {
 		if (onSelect) onSelect(path);
 		else setSelectedPath(path);
 	}, [onSelect]);
-	const captionText = caption ?? `${rows.length} token${rows.length === 1 ? "" : "s"}${filter ? ` matching \`${filter}\`` : ""}${type ? ` · $type=${type}` : ""} · ${activeTheme}`;
+	const matchSuffix = searchable && query.trim() !== "" ? ` · ${visibleRows.length} matching "${query.trim()}"` : "";
+	const captionText = caption ?? `${rows.length} token${rows.length === 1 ? "" : "s"}${filter ? ` matching \`${filter}\`` : ""}${type ? ` · $type=${type}` : ""}${matchSuffix} · ${activeTheme}`;
 	if (rows.length === 0) return /* @__PURE__ */ jsx("div", {
 		...themeAttrs(cssVarPrefix, activeTheme),
 		children: /* @__PURE__ */ jsx("div", {
@@ -3154,72 +3248,95 @@ function TokenTable({ filter, type, caption, sortBy = "path", sortDir = "asc", o
 	});
 	return /* @__PURE__ */ jsxs("div", {
 		...themeAttrs(cssVarPrefix, activeTheme),
-		children: [/* @__PURE__ */ jsxs("table", {
-			className: "sb-token-table__table",
-			children: [
-				/* @__PURE__ */ jsx("caption", {
-					className: "sb-token-table__caption",
-					children: captionText
-				}),
-				/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [/* @__PURE__ */ jsx("th", {
-					className: cx("sb-token-table__th", "sb-token-table__th--path"),
-					children: "Path"
-				}), /* @__PURE__ */ jsx("th", {
-					className: cx("sb-token-table__th", "sb-token-table__th--value"),
-					children: "Value"
-				})] }) }),
-				/* @__PURE__ */ jsx("tbody", { children: rows.map((row) => /* @__PURE__ */ jsxs("tr", {
-					className: "sb-token-table__row",
-					onClick: () => handleRowClick(row.path),
-					onKeyDown: (e) => {
-						if (e.key === "Enter" || e.key === " ") {
-							e.preventDefault();
-							handleRowClick(row.path);
-						}
-					},
-					tabIndex: 0,
-					"aria-label": `Inspect ${row.path}`,
-					"data-testid": "token-table-row",
-					"data-path": row.path,
-					children: [/* @__PURE__ */ jsx("td", {
-						className: cx("sb-token-table__td", "sb-token-table__path"),
-						children: row.path
-					}), /* @__PURE__ */ jsx("td", {
-						className: "sb-token-table__td",
-						children: /* @__PURE__ */ jsxs("span", {
-							className: "sb-token-table__value-cell",
-							children: [
-								row.type && /* @__PURE__ */ jsx("span", {
-									className: "sb-token-table__type-pill",
-									children: row.type
-								}),
-								row.isColor && /* @__PURE__ */ jsx("span", {
-									className: "sb-token-table__swatch",
-									style: { background: row.cssVar },
-									"aria-hidden": true
-								}),
-								/* @__PURE__ */ jsx("span", {
-									className: "sb-token-table__value-text",
-									title: row.value,
-									"data-testid": "token-table-value",
-									children: row.value
-								}),
-								row.outOfGamut && /* @__PURE__ */ jsx("span", {
-									title: "Out of sRGB gamut for this format",
-									"aria-label": "out of gamut",
-									className: "sb-token-table__gamut-warn",
-									children: "⚠"
-								})
-							]
-						})
-					})]
-				}, row.path)) })
-			]
-		}), selectedPath !== null && /* @__PURE__ */ jsx(DetailOverlay, {
-			path: selectedPath,
-			onClose: () => setSelectedPath(null),
-			testId: "token-table-overlay"
-		})]
+		children: [
+			searchable && /* @__PURE__ */ jsx("div", {
+				className: "sb-token-table__search",
+				children: /* @__PURE__ */ jsx("input", {
+					type: "search",
+					className: "sb-token-table__search-input",
+					placeholder: "Search tokens…",
+					value: query,
+					onChange: (e) => setQuery(e.target.value),
+					"aria-label": "Search tokens by path, type, or value",
+					"data-testid": "token-table-search"
+				})
+			}),
+			/* @__PURE__ */ jsxs("table", {
+				className: "sb-token-table__table",
+				children: [
+					/* @__PURE__ */ jsx("caption", {
+						className: "sb-token-table__caption",
+						children: captionText
+					}),
+					/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [/* @__PURE__ */ jsx("th", {
+						className: cx("sb-token-table__th", "sb-token-table__th--path"),
+						children: "Path"
+					}), /* @__PURE__ */ jsx("th", {
+						className: cx("sb-token-table__th", "sb-token-table__th--value"),
+						children: "Value"
+					})] }) }),
+					/* @__PURE__ */ jsxs("tbody", { children: [visibleRows.length === 0 && /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsxs("td", {
+						colSpan: 2,
+						className: "sb-token-table__td sb-token-table__empty-row",
+						children: [
+							"No tokens match \"",
+							query.trim(),
+							"\"."
+						]
+					}) }), visibleRows.map((row) => /* @__PURE__ */ jsxs("tr", {
+						className: "sb-token-table__row",
+						onClick: () => handleRowClick(row.path),
+						onKeyDown: (e) => {
+							if (e.key === "Enter" || e.key === " ") {
+								e.preventDefault();
+								handleRowClick(row.path);
+							}
+						},
+						tabIndex: 0,
+						"aria-label": `Inspect ${row.path}`,
+						"data-testid": "token-table-row",
+						"data-path": row.path,
+						children: [/* @__PURE__ */ jsx("td", {
+							className: cx("sb-token-table__td", "sb-token-table__path"),
+							children: row.path
+						}), /* @__PURE__ */ jsx("td", {
+							className: "sb-token-table__td",
+							children: /* @__PURE__ */ jsxs("span", {
+								className: "sb-token-table__value-cell",
+								children: [
+									row.type && /* @__PURE__ */ jsx("span", {
+										className: "sb-token-table__type-pill",
+										children: row.type
+									}),
+									row.isColor && /* @__PURE__ */ jsx("span", {
+										className: "sb-token-table__swatch",
+										style: { background: row.cssVar },
+										"aria-hidden": true
+									}),
+									/* @__PURE__ */ jsx("span", {
+										className: "sb-token-table__value-text",
+										title: row.value,
+										"data-testid": "token-table-value",
+										children: row.value
+									}),
+									row.outOfGamut && /* @__PURE__ */ jsx("span", {
+										title: "Out of sRGB gamut for this format",
+										"aria-label": "out of gamut",
+										className: "sb-token-table__gamut-warn",
+										children: "⚠"
+									})
+								]
+							})
+						})]
+					}, row.path))] })
+				]
+			}),
+			selectedPath !== null && /* @__PURE__ */ jsx(DetailOverlay, {
+				path: selectedPath,
+				onClose: () => setSelectedPath(null),
+				testId: "token-table-overlay"
+			})
+		]
 	});
 }
 //#endregion