@unpunnyfuns/swatchbook-blocks 0.63.0 → 0.65.0

package/dist/index.d.mts

@@ -99,11 +99,14 @@ interface ProjectSnapshot {
   /** The default tuple — `{ axis: axis.default }` for every axis. */
   defaultTuple: Record<string, string>;
   /**
-   * Pre-built `resolveAt(tuple)` accessor. The addon's preview
-   * decorator instantiates this once per iframe lifetime, backed by
-   * `resolveAllAt` over the stable `tokenGraph` export. Hand-built
-   * snapshots (tests, MDX) can omit this; blocks fall back to
-   * building a graph-backed resolver from `tokenGraph`.
+   * Pre-built `resolveAt(tuple)` accessor. The addon's preview decorator
+   * instantiates this once per iframe lifetime. When present, use-project
+   * prefers it over building its own from `tokenGraph`, so it MUST preserve
+   * alias provenance — back it with `resolveAllWithProvenanceAt`, not the raw
+   * leaf `resolveAllAt`, or axis-varying aliases silently lose their chain /
+   * reverse refs / description at non-default tuples. Hand-built snapshots
+   * (tests, MDX) can omit this; blocks then fall back to a provenance-aware
+   * graph-backed resolver built from `tokenGraph`.
    */
   resolveAt?: (tuple: Record<string, string>) => Record<string, VirtualTokenShape>;
 }
@@ -765,6 +768,18 @@ declare function TokenUsageSnippet({
   path
 }: TokenUsageSnippetProps): ReactElement | null;
 //#endregion
+//#region src/indicators/resolve.d.ts
+/** The individually-toggleable indicators in the row strip. `alias` covers the whole alias unit (forward chain + reverse count). */
+type IndicatorName = 'alias' | 'variance' | 'gamut' | 'deprecation' | 'description';
+/**
+ * Consumer-facing indicator config for the strip-hosting blocks:
+ * - `true` — every indicator on (including the opt-in `description`)
+ * - `false` — every indicator off
+ * - object — per-key override layered over the defaults
+ * - omitted — the defaults
+ */
+type IndicatorsProp = boolean | Partial<Record<IndicatorName, boolean>>;
+//#endregion
 //#region src/TokenNavigator.d.ts
 interface TokenNavigatorProps {
   /** If provided, mount at this dot-path subtree and hide everything outside it. */
@@ -805,6 +820,8 @@ interface TokenNavigatorProps {
    * props otherwise.
    */
   id?: string;
+  /** Configure the per-row indicator strip. See `IndicatorsProp`. */
+  indicators?: IndicatorsProp;
 }
 declare function TokenNavigator({
   root,
@@ -812,7 +829,8 @@ declare function TokenNavigator({
   initiallyExpanded,
   searchable,
   onSelect,
-  id
+  id,
+  indicators
 }: TokenNavigatorProps): ReactElement;
 //#endregion
 //#region src/TokenTable.d.ts
@@ -855,6 +873,8 @@ interface TokenTableProps {
   onSelect?(path: string): void;
   /** Disambiguates persisted UI state for two identical-prop tables on a page. */
   id?: string;
+  /** Configure the per-row indicator strip. See `IndicatorsProp`. */
+  indicators?: IndicatorsProp;
 }
 declare function TokenTable({
   filter,
@@ -864,7 +884,8 @@ declare function TokenTable({
   sortDir,
   searchable,
   onSelect,
-  id
+  id,
+  indicators
 }: TokenTableProps): ReactElement;
 //#endregion
 //#region src/TypographyScale.d.ts

package/dist/index.mjs

@@ -3640,7 +3640,39 @@ function isInView(path, ctx) {
 	return true;
 }
 //#endregion
-//#region src/token-navigator/RowIndicators.tsx
+//#region src/indicators/resolve.ts
+/** Established-on set; `description` is opt-in. */
+const DEFAULT_INDICATORS = {
+	alias: true,
+	variance: true,
+	gamut: true,
+	deprecation: true,
+	description: false
+};
+/** Normalize an `IndicatorsProp` into a full enabled-map by layering over the defaults. */
+function resolveIndicators(prop) {
+	if (prop === void 0) return { ...DEFAULT_INDICATORS };
+	if (prop === true) return {
+		alias: true,
+		variance: true,
+		gamut: true,
+		deprecation: true,
+		description: true
+	};
+	if (prop === false) return {
+		alias: false,
+		variance: false,
+		gamut: false,
+		deprecation: false,
+		description: false
+	};
+	return {
+		...DEFAULT_INDICATORS,
+		...prop
+	};
+}
+//#endregion
+//#region src/indicators/RowIndicators.tsx
 function relativeLabel(path, root) {
 	if (root && path.startsWith(`${root}.`)) return path.slice(root.length + 1);
 	return path;
@@ -3650,37 +3682,37 @@ function relativeLabel(path, root) {
 * capped to first … last beyond two hops (no width measurement). Each shown
 * node navigates when in view, else renders as plain text.
 */
-function ForwardChain({ chain, root, resolveInView, onNavigate }) {
+function ForwardChain({ chain, root, canReference, onReferenceClick }) {
 	const full = chain.map((p) => relativeLabel(p, root)).join(" → ");
 	const capped = chain.length > 2;
 	const shown = capped ? [chain[0], chain[chain.length - 1]] : [...chain];
 	return /* @__PURE__ */ jsxs("span", {
-		className: "sb-token-navigator__alias-forward",
+		className: "sb-indicator__alias-forward",
 		"data-testid": "row-indicator-alias-forward",
 		"aria-label": `aliases ${full}`,
 		children: [/* @__PURE__ */ jsx("span", {
-			className: "sb-token-navigator__alias-arrow",
+			className: "sb-indicator__alias-arrow",
 			"aria-hidden": true,
 			children: "→"
 		}), shown.map((target, i) => {
 			const label = relativeLabel(target, root);
-			return /* @__PURE__ */ jsxs("span", { children: [resolveInView(target) ? /* @__PURE__ */ jsx("button", {
+			return /* @__PURE__ */ jsxs("span", { children: [canReference(target) ? /* @__PURE__ */ jsx("button", {
 				type: "button",
-				className: "sb-token-navigator__alias-node",
+				className: "sb-indicator__alias-node",
 				"data-testid": "alias-node",
 				"aria-label": target,
 				onClick: (e) => {
 					e.stopPropagation();
-					onNavigate(target);
+					onReferenceClick(target);
 				},
 				children: label
 			}) : /* @__PURE__ */ jsx("span", {
-				className: "sb-token-navigator__alias-node sb-token-navigator__alias-node--offview",
+				className: "sb-indicator__alias-node sb-indicator__alias-node--offview",
 				"data-testid": "alias-node",
 				title: "outside current view",
 				children: label
 			}), capped && i === 0 ? /* @__PURE__ */ jsxs("span", {
-				className: "sb-token-navigator__alias-arrow",
+				className: "sb-indicator__alias-arrow",
 				"aria-hidden": true,
 				children: [
 					" ",
@@ -3688,7 +3720,7 @@ function ForwardChain({ chain, root, resolveInView, onNavigate }) {
 					" "
 				]
 			}) : i < shown.length - 1 ? /* @__PURE__ */ jsxs("span", {
-				className: "sb-token-navigator__alias-arrow",
+				className: "sb-indicator__alias-arrow",
 				"aria-hidden": true,
 				children: [
 					" ",
@@ -3702,7 +3734,7 @@ function ForwardChain({ chain, root, resolveInView, onNavigate }) {
 function DeprecatedBadge({ deprecated }) {
 	const label = typeof deprecated === "string" ? `deprecated: ${deprecated}` : "deprecated";
 	return /* @__PURE__ */ jsx("span", {
-		className: "sb-token-navigator__deprecated",
+		className: "sb-indicator__deprecated",
 		"data-testid": "row-indicator-deprecated",
 		title: label,
 		"aria-label": label,
@@ -3714,17 +3746,17 @@ function VarianceBadge({ variance }) {
 	const axes = variance.varyingAxes;
 	const label = variance.kind === "single" ? variance.axis : `${axes.length} axes`;
 	return /* @__PURE__ */ jsxs("span", {
-		className: "sb-token-navigator__variance",
+		className: "sb-indicator__variance",
 		"data-testid": "row-indicator-variance",
 		"aria-label": `varies by ${axes.join(", ")}`,
 		children: [/* @__PURE__ */ jsx("span", {
-			className: "sb-token-navigator__variance-glyph",
+			className: "sb-indicator__variance-glyph",
 			"aria-hidden": true,
 			children: "⊹"
 		}), label]
 	});
 }
-function ReverseCount({ referents, resolveInView, onNavigate }) {
+function ReverseCount({ referents, canReference, onReferenceClick }) {
 	const [open, setOpen] = useState(false);
 	const wrapRef = useRef(null);
 	const count = referents.length;
@@ -3742,42 +3774,42 @@ function ReverseCount({ referents, resolveInView, onNavigate }) {
 	}, [open, single]);
 	return /* @__PURE__ */ jsxs("span", {
 		ref: wrapRef,
-		className: "sb-token-navigator__reverse-wrap",
+		className: "sb-indicator__reverse-wrap",
 		onKeyDown: (e) => {
 			if (e.key === "Escape") setOpen(false);
 		},
 		children: [/* @__PURE__ */ jsxs("button", {
 			type: "button",
-			className: "sb-token-navigator__alias-reverse",
+			className: "sb-indicator__alias-reverse",
 			"data-testid": "row-indicator-alias-reverse",
 			"aria-label": `referenced by ${count} ${count === 1 ? "token" : "tokens"}`,
 			"aria-haspopup": single ? void 0 : "menu",
 			"aria-expanded": single ? void 0 : open,
 			onClick: (e) => {
 				e.stopPropagation();
-				if (single) onNavigate(referents[0]);
+				if (single) onReferenceClick(referents[0]);
 				else setOpen((v) => !v);
 			},
 			children: [/* @__PURE__ */ jsx("span", {
-				className: "sb-token-navigator__alias-arrow",
+				className: "sb-indicator__alias-arrow",
 				"aria-hidden": true,
 				children: "←"
 			}), count]
 		}), !single && open && /* @__PURE__ */ jsx("ul", {
-			className: "sb-token-navigator__reverse-menu",
+			className: "sb-indicator__reverse-menu",
 			role: "menu",
 			children: referents.map((ref) => /* @__PURE__ */ jsx("li", {
 				role: "none",
 				children: /* @__PURE__ */ jsx("button", {
 					type: "button",
 					role: "menuitem",
-					className: "sb-token-navigator__reverse-item",
-					disabled: !resolveInView(ref),
-					title: resolveInView(ref) ? void 0 : "outside current view",
+					className: "sb-indicator__reverse-item",
+					disabled: !canReference(ref),
+					title: canReference(ref) ? void 0 : "outside current view",
 					onClick: (e) => {
 						e.stopPropagation();
 						setOpen(false);
-						onNavigate(ref);
+						onReferenceClick(ref);
 					},
 					children: ref
 				})
@@ -3787,35 +3819,50 @@ function ReverseCount({ referents, resolveInView, onNavigate }) {
 }
 /** Per-row indicator strip: alias references, variance, gamut, deprecation. */
 function RowIndicators(props) {
-	const { token, root, variance, colorFormat, resolveInView, onNavigate } = props;
+	const { token, root, variance, colorFormat, canReference, onReferenceClick } = props;
+	const en = props.enabled ?? resolveIndicators(void 0);
 	const aliasChain = Array.isArray(token.aliasChain) && token.aliasChain.length > 0 ? token.aliasChain : void 0;
 	const reverseCount = Array.isArray(token.aliasedBy) && token.aliasedBy.length > 0 ? token.aliasedBy.length : 0;
 	const isVarying = variance !== void 0 && variance.kind !== "constant";
 	const outOfGamut = token.$type === "color" && (formatColor(token.$value, colorFormat)?.outOfGamut ?? false);
 	const deprecated = token.$deprecated;
 	const isDeprecated = deprecated === true || typeof deprecated === "string" && deprecated.length > 0;
-	if (!aliasChain && reverseCount === 0 && !isVarying && !outOfGamut && !isDeprecated) return null;
+	const description = typeof token.$description === "string" && token.$description.length > 0 ? token.$description : void 0;
+	const showDeprecated = en.deprecation && isDeprecated;
+	const showForward = en.alias && aliasChain !== void 0;
+	const showReverse = en.alias && reverseCount > 0;
+	const showVariance = en.variance && isVarying;
+	const showGamut = en.gamut && outOfGamut;
+	const showDescription = en.description && description !== void 0;
+	if (!showDeprecated && !showForward && !showReverse && !showVariance && !showGamut && !showDescription) return null;
 	return /* @__PURE__ */ jsxs("span", {
-		className: "sb-token-navigator__indicators",
+		className: "sb-indicator__indicators",
 		children: [
-			isDeprecated && deprecated !== void 0 && /* @__PURE__ */ jsx(DeprecatedBadge, { deprecated }),
-			aliasChain && /* @__PURE__ */ jsx(ForwardChain, {
+			showDeprecated && deprecated !== void 0 && /* @__PURE__ */ jsx(DeprecatedBadge, { deprecated }),
+			showForward && aliasChain && /* @__PURE__ */ jsx(ForwardChain, {
 				chain: aliasChain,
 				root,
-				resolveInView,
-				onNavigate
+				canReference,
+				onReferenceClick
 			}),
-			reverseCount > 0 && token.aliasedBy && /* @__PURE__ */ jsx(ReverseCount, {
+			showReverse && token.aliasedBy && /* @__PURE__ */ jsx(ReverseCount, {
 				referents: token.aliasedBy,
-				resolveInView,
-				onNavigate
+				canReference,
+				onReferenceClick
 			}),
-			variance && /* @__PURE__ */ jsx(VarianceBadge, { variance }),
-			outOfGamut && /* @__PURE__ */ jsx("span", {
-				className: "sb-token-navigator__gamut",
+			showVariance && variance && /* @__PURE__ */ jsx(VarianceBadge, { variance }),
+			showGamut && /* @__PURE__ */ jsx("span", {
+				className: "sb-indicator__gamut",
 				title: "Out of sRGB gamut for this format",
 				"aria-label": "out of gamut",
 				children: "⚠"
+			}),
+			showDescription && description !== void 0 && /* @__PURE__ */ jsx("span", {
+				className: "sb-indicator__description",
+				"data-testid": "row-indicator-description",
+				title: description,
+				"aria-label": `description: ${description}`,
+				children: "ⓘ"
 			})
 		]
 	});
@@ -3924,7 +3971,7 @@ function pruneTreeForMatches(nodes, matches, expandOut) {
 	}
 	return out;
 }
-function TokenNavigator({ root, type, initiallyExpanded = 1, searchable = true, onSelect, id }) {
+function TokenNavigator({ root, type, initiallyExpanded = 1, searchable = true, onSelect, id, indicators }) {
 	const { resolved, activeTheme, activeAxes, cssVarPrefix } = useProject();
 	const blockKey = useBlockKey("TokenNavigator", [
 		root,
@@ -3935,6 +3982,7 @@ function TokenNavigator({ root, type, initiallyExpanded = 1, searchable = true,
 		if (type === void 0) return void 0;
 		return new Set(Array.isArray(type) ? type : [type]);
 	}, [type]);
+	const enabledIndicators = useMemo(() => resolveIndicators(indicators), [indicators]);
 	const tree = useMemo(() => buildTree(resolved, root, typeFilter), [
 		resolved,
 		root,
@@ -4206,6 +4254,7 @@ function TokenNavigator({ root, type, initiallyExpanded = 1, searchable = true,
 					root,
 					resolveInView,
 					onNavigate: navigateTo,
+					enabled: enabledIndicators,
 					level: 1,
 					setsize: visibleTree.length,
 					posinset: i + 1
@@ -4219,7 +4268,7 @@ function TokenNavigator({ root, type, initiallyExpanded = 1, searchable = true,
 		]
 	});
 }
-function TreeNodeRow({ node, expanded, focusedPath, registerTreeItem, onToggle, onFocusPath, onLeafClick, root, resolveInView, onNavigate, level, setsize, posinset }) {
+function TreeNodeRow({ node, expanded, focusedPath, registerTreeItem, onToggle, onFocusPath, onLeafClick, root, resolveInView, onNavigate, enabled, level, setsize, posinset }) {
 	if (node.kind === "leaf") return /* @__PURE__ */ jsx(LeafRow, {
 		node,
 		isFocused: focusedPath === node.path,
@@ -4229,6 +4278,7 @@ function TreeNodeRow({ node, expanded, focusedPath, registerTreeItem, onToggle,
 		root,
 		resolveInView,
 		onNavigate,
+		enabled,
 		level,
 		setsize,
 		posinset
@@ -4279,6 +4329,7 @@ function TreeNodeRow({ node, expanded, focusedPath, registerTreeItem, onToggle,
 				root,
 				resolveInView,
 				onNavigate,
+				enabled,
 				level: level + 1,
 				setsize: node.children.length,
 				posinset: i + 1
@@ -4286,7 +4337,7 @@ function TreeNodeRow({ node, expanded, focusedPath, registerTreeItem, onToggle,
 		})]
 	});
 }
-const LeafRow = memo(function LeafRow({ node, isFocused, registerTreeItem, onFocusPath, onLeafClick, root, resolveInView, onNavigate, level, setsize, posinset }) {
+const LeafRow = memo(function LeafRow({ node, isFocused, registerTreeItem, onFocusPath, onLeafClick, root, resolveInView, onNavigate, enabled, level, setsize, posinset }) {
 	const type = node.token.$type ?? "";
 	const project = useProject();
 	const colorFormat = useColorFormat();
@@ -4306,7 +4357,7 @@ const LeafRow = memo(function LeafRow({ node, isFocused, registerTreeItem, onFoc
 		children: /* @__PURE__ */ jsxs("div", {
 			className: "sb-token-navigator__leaf-row",
 			"data-testid": "token-navigator-leaf-row",
-			"data-deprecated": isDeprecated ? "true" : void 0,
+			"data-deprecated": enabled.deprecation && isDeprecated ? "true" : void 0,
 			onClick: () => {
 				onFocusPath(node.path);
 				onLeafClick(node.path);
@@ -4331,8 +4382,9 @@ const LeafRow = memo(function LeafRow({ node, isFocused, registerTreeItem, onFoc
 					root,
 					variance,
 					colorFormat,
-					resolveInView,
-					onNavigate
+					canReference: resolveInView,
+					onReferenceClick: onNavigate,
+					enabled
 				}),
 				/* @__PURE__ */ jsx(LeafPreview, {
 					path: node.path,
@@ -4404,8 +4456,8 @@ const LeafPreview = memo(function LeafPreview({ path, token }) {
 });
 //#endregion
 //#region src/TokenTable.tsx
-function TokenTable({ filter, type, caption, sortBy = "path", sortDir = "asc", searchable = true, onSelect, id }) {
-	const { resolved, activeTheme, activeAxes, cssVarPrefix, listing } = useProject();
+function TokenTable({ filter, type, caption, sortBy = "path", sortDir = "asc", searchable = true, onSelect, id, indicators }) {
+	const { resolved, activeTheme, activeAxes, cssVarPrefix, listing, varianceByPath } = useProject();
 	const colorFormat = useColorFormat();
 	const blockKey = useBlockKey("TokenTable", [
 		filter,
@@ -4413,6 +4465,7 @@ function TokenTable({ filter, type, caption, sortBy = "path", sortDir = "asc", s
 		caption,
 		id
 	]);
+	const enabledIndicators = useMemo(() => resolveIndicators(indicators), [indicators]);
 	const [selectedPath, setSelectedPath] = usePersistedState(`${blockKey}::selected`, null);
 	const [query, setQuery] = usePersistedState(`${blockKey}::query`, "");
 	const deferredQuery = useDeferredValue(query);
@@ -4499,79 +4552,111 @@ function TokenTable({ filter, type, caption, sortBy = "path", sortDir = "asc", s
 						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("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("th", {
+							className: "sb-token-table__th sb-token-table__th--refs",
+							children: /* @__PURE__ */ jsx("span", {
+								className: "sb-token-table__sr-status",
+								children: "References and status"
+							})
+						})
+					] }) }),
 					/* @__PURE__ */ jsxs("tbody", { children: [visibleRows.length === 0 && /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsxs("td", {
-						colSpan: 2,
+						colSpan: 3,
 						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-haspopup": "dialog",
-						"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: "⚠"
-									}),
-									/* @__PURE__ */ jsx("span", {
-										className: "sb-token-table__copy-wrap",
-										onClick: (e) => e.stopPropagation(),
-										onKeyDown: (e) => e.stopPropagation(),
-										role: "presentation",
-										children: /* @__PURE__ */ jsx(CopyButton$1, {
-											value: row.value,
-											label: `Copy value ${row.value}`,
-											className: "sb-token-table__copy"
-										})
+					}) }), visibleRows.map((row) => {
+						const token = resolved[row.path];
+						const dep = token?.$deprecated;
+						const isDeprecated = dep === true || typeof dep === "string" && dep.length > 0;
+						return /* @__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-haspopup": "dialog",
+							"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"),
+									"data-deprecated": enabledIndicators.deprecation && isDeprecated ? "true" : void 0,
+									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: "⚠"
+											}),
+											/* @__PURE__ */ jsx("span", {
+												className: "sb-token-table__copy-wrap",
+												onClick: (e) => e.stopPropagation(),
+												onKeyDown: (e) => e.stopPropagation(),
+												role: "presentation",
+												children: /* @__PURE__ */ jsx(CopyButton$1, {
+													value: row.value,
+													label: `Copy value ${row.value}`,
+													className: "sb-token-table__copy"
+												})
+											})
+										]
 									})
-								]
-							})
-						})]
-					}, row.path))] })
+								}),
+								/* @__PURE__ */ jsx("td", {
+									className: "sb-token-table__td sb-token-table__refs",
+									children: token && /* @__PURE__ */ jsx(RowIndicators, {
+										path: row.path,
+										token,
+										root: void 0,
+										variance: varianceByPath[row.path],
+										colorFormat,
+										canReference: (p) => p in resolved,
+										onReferenceClick: (p) => setSelectedPath(p),
+										enabled: enabledIndicators
+									})
+								})
+							]
+						}, row.path);
+					})] })
 				]
 			}),
 			selectedPath !== null && /* @__PURE__ */ jsx(DetailOverlay, {