@unpunnyfuns/swatchbook-blocks 0.4.0 → 0.6.0

package/README.md

@@ -50,15 +50,15 @@ import { TokenTable, ColorPalette, TokenDetail } from '@unpunnyfuns/swatchbook-b
 
 # Color tokens
 
-<ColorPalette filter="color.sys.*" />
+<ColorPalette filter="color.*" />
 
 ## Every color token
 
-<TokenTable filter="color.sys.*" type="color" />
+<TokenTable filter="color.*" type="color" />
 
 ## Inspect one
 
-<TokenDetail path="color.sys.accent.bg" />
+<TokenDetail path="color.accent.bg" />
 ```
 
 ### Outside Storybook
@@ -72,7 +72,7 @@ import snapshot from './tokens-snapshot.json';
 export function TokenDocs() {
   return (
     <SwatchbookProvider value={snapshot}>
-      <TokenTable filter='color.sys.*' />
+      <TokenTable filter='color.*' />
     </SwatchbookProvider>
   );
 }
@@ -83,10 +83,10 @@ export function TokenDocs() {
 ## Props
 
 ```ts
-<TokenTable filter="color.sys.*" type="color" />
-<ColorPalette filter="color.sys.*" />
+<TokenTable filter="color.*" type="color" />
+<ColorPalette filter="color.*" />
 <TypographyScale filter="typography" sample="The quick brown fox" />
-<TokenDetail path="color.sys.accent.bg" />
+<TokenDetail path="color.accent.bg" />
 ```
 
 ## Do / don't

package/dist/index.d.mts

@@ -155,7 +155,7 @@ type SortDir = 'asc' | 'desc';
 interface BorderPreviewProps {
   /**
    * Token-path filter. Defaults to every `border` token. Use e.g.
-   * `"border.sys.*"` to scope to the semantic layer.
+   * `"border.*"` to scope to the semantic layer.
    */
   filter?: string;
   /** Override the caption. */
@@ -189,20 +189,20 @@ declare function BorderSample({
 interface ColorPaletteProps {
   /**
    * Token-path filter. Defaults to every `color` token. Use e.g.
-   * `"color.sys.*"` to scope to the semantic layer, or `"color.ref.blue.*"`
+   * `"color.*"` to scope to the semantic layer, or `"color.palette.blue.*"`
    * for a single ref ramp.
    */
   filter?: string;
   /**
    * Grouping depth. Tokens are grouped by the first `groupBy` dot-segments
-   * of their path. `2` yields groups like `color.sys`, `color.ref`; `3`
-   * yields `color.sys.surface`, `color.sys.text`, etc.
+   * of their path. `1` yields a single `color` group; `2` yields
+   * `color.surface`, `color.text`, `color.blue`, etc.
    *
    * If omitted, groupBy is derived from the filter: one level below the
    * filter's fixed prefix (segments before the first `*`), clamped so each
-   * swatch still carries a leaf label. `"color.sys.*"` → groups at
-   * `color.sys.<family>`; `"color.ref.blue.*"` collapses all shades into
-   * one `color.ref.blue` group because the tokens have no deeper level.
+   * swatch still carries a leaf label. `"color.*"` → groups at
+   * `color.<family>`; `"color.palette.blue.*"` collapses all shades into
+   * one `color.blue` group because the tokens have no deeper level.
    */
   groupBy?: number;
   /** Override the section caption. */
@@ -267,7 +267,7 @@ declare function DimensionBar({
 interface DimensionScaleProps {
   /**
    * Token-path filter. Defaults to every `dimension` token. Use e.g.
-   * `"space.sys.*"` to scope to the spacing scale.
+   * `"space.*"` to scope to the spacing scale.
    */
   filter?: string;
   /**
@@ -302,7 +302,7 @@ declare function DimensionScale({
 interface FontFamilySampleProps {
   /**
    * Token-path filter. Defaults to every `fontFamily` token. Use e.g.
-   * `"font.ref.family.*"` to scope to the ref layer.
+   * `"font.family.*"` to scope to the ref layer.
    */
   filter?: string;
   /** Override the sample text rendered for each token. */
@@ -330,7 +330,7 @@ declare function FontFamilySample({
 interface FontWeightScaleProps {
   /**
    * Token-path filter. Defaults to every `fontWeight` token. Use e.g.
-   * `"font.ref.weight.*"` to scope to the ref layer.
+   * `"font.weight.*"` to scope to the ref layer.
    */
   filter?: string;
   /** Override the sample text rendered for each token. */
@@ -359,7 +359,7 @@ declare function FontWeightScale({
 interface GradientPaletteProps {
   /**
    * Token-path filter. Defaults to every `gradient` token. Use e.g.
-   * `"gradient.ref.*"` or `"gradient.sys.accent"` to scope.
+   * `"gradient.*"` or `"gradient.accent"` to scope.
    */
   filter?: string;
   /** Override the caption. */
@@ -404,7 +404,7 @@ declare function MotionSample({
 interface MotionPreviewProps {
   /**
    * Token-path filter. Defaults to transition + duration + cubicBezier
-   * tokens. Use e.g. `"motion.sys.*"` to scope to the semantic layer.
+   * tokens. Use e.g. `"transition.*"` to scope to the semantic layer.
    */
   filter?: string;
   /** Override the caption. */
@@ -444,7 +444,7 @@ declare function useSwatchbookData(): ProjectSnapshot;
 interface ShadowPreviewProps {
   /**
    * Token-path filter. Defaults to every `shadow` token. Use e.g.
-   * `"shadow.sys.*"` to scope to the semantic layer.
+   * `"shadow.*"` to scope to the semantic layer.
    */
   filter?: string;
   /** Override the caption. */
@@ -478,7 +478,7 @@ declare function ShadowSample({
 interface StrokeStyleSampleProps {
   /**
    * Token-path filter. Defaults to every `strokeStyle` token. Use e.g.
-   * `"stroke.ref.style.*"` to scope to the ref layer.
+   * `"stroke.style.*"` to scope to the ref layer.
    */
   filter?: string;
   /** Override the caption. */
@@ -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,14 +621,16 @@ interface TokenNavigatorProps {
 }
 declare function TokenNavigator({
   root,
+  type,
   initiallyExpanded,
+  searchable,
   onSelect
 }: TokenNavigatorProps): ReactElement;
 //#endregion
 //#region src/TokenTable.d.ts
 interface TokenTableProps {
   /**
-   * Token-path filter. `"color.sys.*"` matches every `color.sys.…` token;
+   * Token-path filter. `"color.*"` matches every `color.…` token;
    * omit to include everything. Combines with `type` (both must match).
    */
   filter?: string;
@@ -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
@@ -652,7 +679,7 @@ declare function TokenTable({
 interface TypographyScaleProps {
   /**
    * Token-path filter. Defaults to every `typography` token. Use e.g.
-   * `"typography.sys.*"` to scope to the semantic layer.
+   * `"typography.*"` to scope to the semantic layer.
    */
   filter?: string;
   /** Override the sample text rendered for each token. */

package/dist/index.mjs

@@ -408,7 +408,7 @@ function useVirtualModuleFallback(enabled) {
 	};
 }
 function makeCssVar(path, prefix) {
-	const tail = path.replaceAll(".", "-");
+	const tail = path.split(".").map((segment) => segment.replaceAll(/([a-z\d])([A-Z])/g, "$1-$2").toLowerCase()).join("-");
 	return prefix ? `var(--${prefix}-${tail})` : `var(--${tail})`;
 }
 /**
@@ -422,7 +422,7 @@ function makeCssVar(path, prefix) {
 * | `undefined` / `''` | everything                                          |
 * | `*` or `**`        | everything                                          |
 * | `color`            | exact path `color`, or any descendant `color.*`     |
-* | `color.sys.*`      | any path whose fixed prefix is `color.sys.`         |
+* | `color.*`      | any path whose fixed prefix is `color.`         |
 * | `color**`          | any path starting with `color`                      |
 *
 * Not supported (all pass through as literal segment matchers): brace
@@ -707,7 +707,7 @@ function BorderPreview({ filter, caption, sortBy = "path", sortDir = "asc" }) {
 //#region src/ColorPalette.tsx
 /**
 * Count segments in the filter before the first glob (`*` / `**`).
-* `color.ref.*` → 2; `color.sys.surface.*` → 3; `color` → 1; undefined → 0.
+* `color.*` → 2; `color.surface.*` → 3; `color` → 1; undefined → 0.
 */
 function fixedPrefixLength(filter) {
 	if (!filter) return 0;
@@ -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