@unpunnyfuns/swatchbook-blocks 0.64.0 → 0.66.0

package/dist/index.mjs

@@ -166,6 +166,7 @@ let snapshot = {
 	diagnostics: [],
 	css: "",
 	cssVarPrefix: "",
+	indicators: {},
 	listing: {},
 	tokenGraph: {
 		nodes: {},
@@ -185,6 +186,7 @@ function applyPatch(patch) {
 		diagnostics: patch.diagnostics ?? snapshot.diagnostics,
 		css: patch.css ?? snapshot.css,
 		cssVarPrefix: patch.cssVarPrefix ?? snapshot.cssVarPrefix,
+		indicators: patch.indicators ?? snapshot.indicators,
 		listing: patch.listing ?? snapshot.listing,
 		tokenGraph: patch.tokenGraph ?? snapshot.tokenGraph,
 		defaultTuple: patch.defaultTuple ?? snapshot.defaultTuple,
@@ -269,6 +271,7 @@ function useProject() {
 	const activeTheme = snapshot?.activeTheme;
 	const diagnostics = snapshot?.diagnostics;
 	const cssVarPrefix = snapshot?.cssVarPrefix;
+	const indicators = snapshot?.indicators;
 	const listing = snapshot?.listing;
 	const tokenGraph = snapshot?.tokenGraph;
 	const resolveAt = useMemo(() => {
@@ -285,6 +288,7 @@ function useProject() {
 			resolved: resolveAt(activeAxes),
 			diagnostics: diagnostics ?? [],
 			cssVarPrefix: cssVarPrefix ?? "",
+			indicators: indicators ?? {},
 			listing: listing ?? {},
 			varianceByPath: derivedVarianceByPath,
 			resolveAt
@@ -297,6 +301,7 @@ function useProject() {
 		activeAxes,
 		diagnostics,
 		cssVarPrefix,
+		indicators,
 		listing,
 		derivedVarianceByPath,
 		tokenGraph
@@ -330,6 +335,7 @@ function useVirtualModuleFallback(enabled) {
 		resolved: resolveAt(activeAxes),
 		diagnostics: tokens.diagnostics,
 		cssVarPrefix: tokens.cssVarPrefix,
+		indicators: tokens.indicators,
 		listing: tokens.listing,
 		varianceByPath: fallbackVarianceByPath,
 		resolveAt
@@ -339,6 +345,7 @@ function useVirtualModuleFallback(enabled) {
 		tokens.axes,
 		tokens.diagnostics,
 		tokens.cssVarPrefix,
+		tokens.indicators,
 		tokens.listing,
 		fallbackVarianceByPath,
 		resolveAt
@@ -760,6 +767,273 @@ function ColorPalette({ filter, groupBy, caption, sortBy = "path", sortDir = "as
 	});
 }
 //#endregion
+//#region src/indicators/resolve.ts
+/** Established-on set; `description` and `composes` are opt-in. */
+const DEFAULT_INDICATORS = {
+	alias: true,
+	variance: true,
+	gamut: true,
+	deprecation: true,
+	description: false,
+	composes: false
+};
+/**
+* Normalize an `IndicatorsProp` into a full enabled-map. Precedence
+* (lowest→highest): `DEFAULT_INDICATORS` → `baseline` (the project-wide
+* `config.indicators` default) → per-block `prop`. An explicit boolean
+* `prop` (`true`/`false`) forces every key on/off and wins over the
+* baseline; an object `prop` overlays on top of defaults+baseline; an
+* absent `prop` leaves the result at defaults overlaid with baseline.
+*/
+function resolveIndicators(prop, baseline) {
+	if (prop === true) return {
+		alias: true,
+		variance: true,
+		gamut: true,
+		deprecation: true,
+		description: true,
+		composes: true
+	};
+	if (prop === false) return {
+		alias: false,
+		variance: false,
+		gamut: false,
+		deprecation: false,
+		description: false,
+		composes: false
+	};
+	return {
+		...DEFAULT_INDICATORS,
+		...baseline,
+		...prop
+	};
+}
+//#endregion
+//#region src/indicators/RowIndicators.tsx
+function relativeLabel(path, root) {
+	if (root && path.startsWith(`${root}.`)) return path.slice(root.length + 1);
+	return path;
+}
+const COMPOSITE_TYPES = new Set([
+	"border",
+	"typography",
+	"transition",
+	"gradient",
+	"shadow"
+]);
+function compositeFieldCount(token) {
+	if (!token.$type || !COMPOSITE_TYPES.has(token.$type)) return void 0;
+	const v = token.$value;
+	if (Array.isArray(v)) return v.length > 0 ? v.length : void 0;
+	if (v !== null && typeof v === "object") {
+		const n = Object.keys(v).length;
+		return n > 0 ? n : void 0;
+	}
+}
+/**
+* The forward alias chain for one row. Full chain in `aria-label`; visually
+* 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, 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-indicator__alias-forward",
+		"data-testid": "row-indicator-alias-forward",
+		"aria-label": `aliases ${full}`,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "sb-indicator__alias-arrow",
+			"aria-hidden": true,
+			children: "→"
+		}), shown.map((target, i) => {
+			const label = relativeLabel(target, root);
+			return /* @__PURE__ */ jsxs("span", { children: [canReference(target) ? /* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: "sb-indicator__alias-node",
+				"data-testid": "alias-node",
+				"aria-label": target,
+				onClick: (e) => {
+					e.stopPropagation();
+					onReferenceClick(target);
+				},
+				children: label
+			}) : /* @__PURE__ */ jsx("span", {
+				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-indicator__alias-arrow",
+				"aria-hidden": true,
+				children: [
+					" ",
+					"→ … →",
+					" "
+				]
+			}) : i < shown.length - 1 ? /* @__PURE__ */ jsxs("span", {
+				className: "sb-indicator__alias-arrow",
+				"aria-hidden": true,
+				children: [
+					" ",
+					"→",
+					" "
+				]
+			}) : null] }, target);
+		})]
+	});
+}
+function DeprecatedBadge({ deprecated }) {
+	const label = typeof deprecated === "string" ? `deprecated: ${deprecated}` : "deprecated";
+	return /* @__PURE__ */ jsx("span", {
+		className: "sb-indicator__deprecated",
+		"data-testid": "row-indicator-deprecated",
+		title: label,
+		"aria-label": label,
+		children: "deprecated"
+	});
+}
+function VarianceBadge({ variance }) {
+	if (variance.kind === "constant") return null;
+	const axes = variance.varyingAxes;
+	const label = variance.kind === "single" ? variance.axis : `${axes.length} axes`;
+	return /* @__PURE__ */ jsxs("span", {
+		className: "sb-indicator__variance",
+		"data-testid": "row-indicator-variance",
+		"aria-label": `varies by ${axes.join(", ")}`,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "sb-indicator__variance-glyph",
+			"aria-hidden": true,
+			children: "⊹"
+		}), label]
+	});
+}
+function ReverseCount({ referents, canReference, onReferenceClick }) {
+	const [open, setOpen] = useState(false);
+	const wrapRef = useRef(null);
+	const count = referents.length;
+	const single = count === 1;
+	useEffect(() => {
+		if (single || !open) return;
+		(wrapRef.current?.querySelector("button[role=\"menuitem\"]:not(:disabled)"))?.focus();
+		const handlePointerDown = (e) => {
+			if (wrapRef.current && !wrapRef.current.contains(e.target)) setOpen(false);
+		};
+		document.addEventListener("pointerdown", handlePointerDown);
+		return () => {
+			document.removeEventListener("pointerdown", handlePointerDown);
+		};
+	}, [open, single]);
+	return /* @__PURE__ */ jsxs("span", {
+		ref: wrapRef,
+		className: "sb-indicator__reverse-wrap",
+		onKeyDown: (e) => {
+			if (e.key === "Escape") setOpen(false);
+		},
+		children: [/* @__PURE__ */ jsxs("button", {
+			type: "button",
+			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) onReferenceClick(referents[0]);
+				else setOpen((v) => !v);
+			},
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "sb-indicator__alias-arrow",
+				"aria-hidden": true,
+				children: "←"
+			}), count]
+		}), !single && open && /* @__PURE__ */ jsx("ul", {
+			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-indicator__reverse-item",
+					disabled: !canReference(ref),
+					title: canReference(ref) ? void 0 : "outside current view",
+					onClick: (e) => {
+						e.stopPropagation();
+						setOpen(false);
+						onReferenceClick(ref);
+					},
+					children: ref
+				})
+			}, ref))
+		})]
+	});
+}
+/** Per-row indicator strip: alias references, variance, gamut, deprecation. */
+function RowIndicators(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;
+	const description = typeof token.$description === "string" && token.$description.length > 0 ? token.$description : void 0;
+	const composesCount = en.composes ? compositeFieldCount(token) : 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;
+	const showComposes = composesCount !== void 0;
+	if (!showDeprecated && !showForward && !showReverse && !showVariance && !showGamut && !showDescription && !showComposes) return null;
+	return /* @__PURE__ */ jsxs("span", {
+		className: "sb-indicator__indicators",
+		children: [
+			showDeprecated && deprecated !== void 0 && /* @__PURE__ */ jsx(DeprecatedBadge, { deprecated }),
+			showForward && aliasChain && /* @__PURE__ */ jsx(ForwardChain, {
+				chain: aliasChain,
+				root,
+				canReference,
+				onReferenceClick
+			}),
+			showReverse && token.aliasedBy && /* @__PURE__ */ jsx(ReverseCount, {
+				referents: token.aliasedBy,
+				canReference,
+				onReferenceClick
+			}),
+			showComposes && composesCount !== void 0 && /* @__PURE__ */ jsxs("span", {
+				className: "sb-indicator__composes",
+				"data-testid": "row-indicator-composes",
+				title: `composes ${composesCount} parts`,
+				"aria-label": `composes ${composesCount} parts`,
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "sb-indicator__composes-glyph",
+					"aria-hidden": true,
+					children: "⊞"
+				}), composesCount]
+			}),
+			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: "ⓘ"
+			})
+		]
+	});
+}
+//#endregion
 //#region src/internal/CopyButton.tsx
 /**
 * Copy the given string to the clipboard and briefly surface a "Copied!"
@@ -862,11 +1136,16 @@ function usePersistedState(key, initial) {
 }
 //#endregion
 //#region src/ColorTable.tsx
+const NOOP_REFERENCE = () => {};
 const BASE_LABEL = "base";
 const COLUMN_COUNT = 6;
-function ColorTable({ filter, caption, sortBy = "path", sortDir = "asc", searchable = true, onSelect, variants, id }) {
-	const { resolved, activeTheme, activeAxes, cssVarPrefix, listing } = useProject();
+function ColorTable({ filter, caption, sortBy = "path", sortDir = "asc", searchable = true, onSelect, variants, id, indicators }) {
+	const { resolved, activeTheme, activeAxes, cssVarPrefix, listing, varianceByPath } = useProject();
 	const colorFormat = useColorFormat();
+	const enabledIndicators = useMemo(() => ({
+		...resolveIndicators(indicators),
+		gamut: false
+	}), [indicators]);
 	const blockKey = useBlockKey("ColorTable", [
 		filter,
 		caption,
@@ -900,6 +1179,8 @@ function ColorTable({ filter, caption, sortBy = "path", sortDir = "asc", searcha
 			const variant = {
 				label: match?.label ?? BASE_LABEL,
 				path,
+				token,
+				variance: varianceByPath[path],
 				cssVar: resolveCssVar(path, projectFields),
 				value: active.value,
 				outOfGamut: active.outOfGamut,
@@ -933,6 +1214,7 @@ function ColorTable({ filter, caption, sortBy = "path", sortDir = "asc", searcha
 		resolved,
 		listing,
 		cssVarPrefix,
+		varianceByPath,
 		filter,
 		sortBy,
 		sortDir,
@@ -1014,8 +1296,11 @@ function ColorTable({ filter, caption, sortBy = "path", sortDir = "asc", searcha
 							children: "CSS var"
 						}),
 						/* @__PURE__ */ jsx("th", {
-							className: "sb-color-table__th",
-							children: "Alias"
+							className: "sb-color-table__th sb-color-table__th--refs",
+							children: /* @__PURE__ */ jsx("span", {
+								className: "sb-color-table__sr-only",
+								children: "References and status"
+							})
 						}),
 						/* @__PURE__ */ jsx("th", {
 							className: "sb-color-table__th sb-color-table__th--expand",
@@ -1039,6 +1324,8 @@ function ColorTable({ filter, caption, sortBy = "path", sortDir = "asc", searcha
 						expanded: expandedByBase.has(group.base),
 						onToggleExpand: toggleExpand,
 						onSelectVariant: selectVariant,
+						enabled: enabledIndicators,
+						colorFormat,
 						...onSelect !== void 0 && { onSelect }
 					}, group.base))] })
 				]
@@ -1046,10 +1333,12 @@ function ColorTable({ filter, caption, sortBy = "path", sortDir = "asc", searcha
 		})]
 	});
 }
-const GroupRow = memo(function GroupRow({ group, selectedLabel, expanded, onToggleExpand, onSelectVariant, onSelect }) {
+const GroupRow = memo(function GroupRow({ group, selectedLabel, expanded, onToggleExpand, onSelectVariant, onSelect, enabled, colorFormat }) {
 	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;
+	const dep = active.token.$deprecated;
+	const isDeprecated = dep === true || typeof dep === "string" && dep.length > 0;
 	const handleRowActivate = () => {
 		if (onSelect) onSelect(active.path);
 		else onToggleExpand(group.base);
@@ -1080,6 +1369,7 @@ const GroupRow = memo(function GroupRow({ group, selectedLabel, expanded, onTogg
 			}),
 			/* @__PURE__ */ jsxs("td", {
 				className: cx("sb-color-table__td", "sb-color-table__path"),
+				"data-deprecated": enabled.deprecation && isDeprecated ? "true" : void 0,
 				children: [/* @__PURE__ */ jsx("span", {
 					className: "sb-color-table__path-text",
 					children: nameText
@@ -1114,14 +1404,16 @@ const GroupRow = memo(function GroupRow({ group, selectedLabel, expanded, onTogg
 				label: `Copy CSS var ${active.cssVar}`
 			}),
 			/* @__PURE__ */ jsx("td", {
-				className: "sb-color-table__td sb-color-table__alias",
-				children: active.aliasOf ? /* @__PURE__ */ jsx("span", {
-					className: "sb-color-table__alias-text",
-					children: active.aliasOf
-				}) : /* @__PURE__ */ jsx("span", {
-					className: "sb-color-table__alias-empty",
-					"aria-hidden": true,
-					children: "—"
+				className: "sb-color-table__td sb-color-table__refs",
+				children: /* @__PURE__ */ jsx(RowIndicators, {
+					path: active.path,
+					token: active.token,
+					root: void 0,
+					variance: active.variance,
+					colorFormat,
+					canReference: () => false,
+					onReferenceClick: NOOP_REFERENCE,
+					enabled
 				})
 			}),
 			/* @__PURE__ */ jsx("td", {
@@ -3640,187 +3932,6 @@ function isInView(path, ctx) {
 	return true;
 }
 //#endregion
-//#region src/indicators/RowIndicators.tsx
-function relativeLabel(path, root) {
-	if (root && path.startsWith(`${root}.`)) return path.slice(root.length + 1);
-	return path;
-}
-/**
-* The forward alias chain for one row. Full chain in `aria-label`; visually
-* 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, 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-indicator__alias-forward",
-		"data-testid": "row-indicator-alias-forward",
-		"aria-label": `aliases ${full}`,
-		children: [/* @__PURE__ */ jsx("span", {
-			className: "sb-indicator__alias-arrow",
-			"aria-hidden": true,
-			children: "→"
-		}), shown.map((target, i) => {
-			const label = relativeLabel(target, root);
-			return /* @__PURE__ */ jsxs("span", { children: [canReference(target) ? /* @__PURE__ */ jsx("button", {
-				type: "button",
-				className: "sb-indicator__alias-node",
-				"data-testid": "alias-node",
-				"aria-label": target,
-				onClick: (e) => {
-					e.stopPropagation();
-					onReferenceClick(target);
-				},
-				children: label
-			}) : /* @__PURE__ */ jsx("span", {
-				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-indicator__alias-arrow",
-				"aria-hidden": true,
-				children: [
-					" ",
-					"→ … →",
-					" "
-				]
-			}) : i < shown.length - 1 ? /* @__PURE__ */ jsxs("span", {
-				className: "sb-indicator__alias-arrow",
-				"aria-hidden": true,
-				children: [
-					" ",
-					"→",
-					" "
-				]
-			}) : null] }, target);
-		})]
-	});
-}
-function DeprecatedBadge({ deprecated }) {
-	const label = typeof deprecated === "string" ? `deprecated: ${deprecated}` : "deprecated";
-	return /* @__PURE__ */ jsx("span", {
-		className: "sb-indicator__deprecated",
-		"data-testid": "row-indicator-deprecated",
-		title: label,
-		"aria-label": label,
-		children: "deprecated"
-	});
-}
-function VarianceBadge({ variance }) {
-	if (variance.kind === "constant") return null;
-	const axes = variance.varyingAxes;
-	const label = variance.kind === "single" ? variance.axis : `${axes.length} axes`;
-	return /* @__PURE__ */ jsxs("span", {
-		className: "sb-indicator__variance",
-		"data-testid": "row-indicator-variance",
-		"aria-label": `varies by ${axes.join(", ")}`,
-		children: [/* @__PURE__ */ jsx("span", {
-			className: "sb-indicator__variance-glyph",
-			"aria-hidden": true,
-			children: "⊹"
-		}), label]
-	});
-}
-function ReverseCount({ referents, canReference, onReferenceClick }) {
-	const [open, setOpen] = useState(false);
-	const wrapRef = useRef(null);
-	const count = referents.length;
-	const single = count === 1;
-	useEffect(() => {
-		if (single || !open) return;
-		(wrapRef.current?.querySelector("button[role=\"menuitem\"]:not(:disabled)"))?.focus();
-		const handlePointerDown = (e) => {
-			if (wrapRef.current && !wrapRef.current.contains(e.target)) setOpen(false);
-		};
-		document.addEventListener("pointerdown", handlePointerDown);
-		return () => {
-			document.removeEventListener("pointerdown", handlePointerDown);
-		};
-	}, [open, single]);
-	return /* @__PURE__ */ jsxs("span", {
-		ref: wrapRef,
-		className: "sb-indicator__reverse-wrap",
-		onKeyDown: (e) => {
-			if (e.key === "Escape") setOpen(false);
-		},
-		children: [/* @__PURE__ */ jsxs("button", {
-			type: "button",
-			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) onReferenceClick(referents[0]);
-				else setOpen((v) => !v);
-			},
-			children: [/* @__PURE__ */ jsx("span", {
-				className: "sb-indicator__alias-arrow",
-				"aria-hidden": true,
-				children: "←"
-			}), count]
-		}), !single && open && /* @__PURE__ */ jsx("ul", {
-			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-indicator__reverse-item",
-					disabled: !canReference(ref),
-					title: canReference(ref) ? void 0 : "outside current view",
-					onClick: (e) => {
-						e.stopPropagation();
-						setOpen(false);
-						onReferenceClick(ref);
-					},
-					children: ref
-				})
-			}, ref))
-		})]
-	});
-}
-/** Per-row indicator strip: alias references, variance, gamut, deprecation. */
-function RowIndicators(props) {
-	const { token, root, variance, colorFormat, canReference, onReferenceClick } = props;
-	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;
-	return /* @__PURE__ */ jsxs("span", {
-		className: "sb-indicator__indicators",
-		children: [
-			isDeprecated && deprecated !== void 0 && /* @__PURE__ */ jsx(DeprecatedBadge, { deprecated }),
-			aliasChain && /* @__PURE__ */ jsx(ForwardChain, {
-				chain: aliasChain,
-				root,
-				canReference,
-				onReferenceClick
-			}),
-			reverseCount > 0 && token.aliasedBy && /* @__PURE__ */ jsx(ReverseCount, {
-				referents: token.aliasedBy,
-				canReference,
-				onReferenceClick
-			}),
-			variance && /* @__PURE__ */ jsx(VarianceBadge, { variance }),
-			outOfGamut && /* @__PURE__ */ jsx("span", {
-				className: "sb-indicator__gamut",
-				title: "Out of sRGB gamut for this format",
-				"aria-label": "out of gamut",
-				children: "⚠"
-			})
-		]
-	});
-}
-//#endregion
 //#region src/TokenNavigator.tsx
 function buildTree(resolved, root, typeFilter) {
 	const rootPrefix = root && root.length > 0 ? `${root}.` : "";
@@ -3924,8 +4035,8 @@ function pruneTreeForMatches(nodes, matches, expandOut) {
 	}
 	return out;
 }
-function TokenNavigator({ root, type, initiallyExpanded = 1, searchable = true, onSelect, id }) {
-	const { resolved, activeTheme, activeAxes, cssVarPrefix } = useProject();
+function TokenNavigator({ root, type, initiallyExpanded = 1, searchable = true, onSelect, id, indicators }) {
+	const { resolved, activeTheme, activeAxes, cssVarPrefix, indicators: indicatorBaseline } = useProject();
 	const blockKey = useBlockKey("TokenNavigator", [
 		root,
 		type === void 0 ? "" : typeof type === "string" ? type : type.join(","),
@@ -3935,6 +4046,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, indicatorBaseline), [indicators, indicatorBaseline]);
 	const tree = useMemo(() => buildTree(resolved, root, typeFilter), [
 		resolved,
 		root,
@@ -4206,6 +4318,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 +4332,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 +4342,7 @@ function TreeNodeRow({ node, expanded, focusedPath, registerTreeItem, onToggle,
 		root,
 		resolveInView,
 		onNavigate,
+		enabled,
 		level,
 		setsize,
 		posinset
@@ -4279,6 +4393,7 @@ function TreeNodeRow({ node, expanded, focusedPath, registerTreeItem, onToggle,
 				root,
 				resolveInView,
 				onNavigate,
+				enabled,
 				level: level + 1,
 				setsize: node.children.length,
 				posinset: i + 1
@@ -4286,7 +4401,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 +4421,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);
@@ -4332,7 +4447,8 @@ const LeafRow = memo(function LeafRow({ node, isFocused, registerTreeItem, onFoc
 					variance,
 					colorFormat,
 					canReference: resolveInView,
-					onReferenceClick: onNavigate
+					onReferenceClick: onNavigate,
+					enabled
 				}),
 				/* @__PURE__ */ jsx(LeafPreview, {
 					path: node.path,
@@ -4404,8 +4520,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, varianceByPath } = useProject();
+function TokenTable({ filter, type, caption, sortBy = "path", sortDir = "asc", searchable = true, onSelect, id, indicators }) {
+	const { resolved, activeTheme, activeAxes, cssVarPrefix, listing, varianceByPath, indicators: indicatorBaseline } = useProject();
 	const colorFormat = useColorFormat();
 	const blockKey = useBlockKey("TokenTable", [
 		filter,
@@ -4413,6 +4529,7 @@ function TokenTable({ filter, type, caption, sortBy = "path", sortDir = "asc", s
 		caption,
 		id
 	]);
+	const enabledIndicators = useMemo(() => resolveIndicators(indicators, indicatorBaseline), [indicators, indicatorBaseline]);
 	const [selectedPath, setSelectedPath] = usePersistedState(`${blockKey}::selected`, null);
 	const [query, setQuery] = usePersistedState(`${blockKey}::query`, "");
 	const deferredQuery = useDeferredValue(query);
@@ -4545,7 +4662,7 @@ function TokenTable({ filter, type, caption, sortBy = "path", sortDir = "asc", s
 							children: [
 								/* @__PURE__ */ jsx("td", {
 									className: cx("sb-token-table__td", "sb-token-table__path"),
-									"data-deprecated": isDeprecated ? "true" : void 0,
+									"data-deprecated": enabledIndicators.deprecation && isDeprecated ? "true" : void 0,
 									children: row.path
 								}),
 								/* @__PURE__ */ jsx("td", {
@@ -4597,7 +4714,8 @@ function TokenTable({ filter, type, caption, sortBy = "path", sortDir = "asc", s
 										variance: varianceByPath[row.path],
 										colorFormat,
 										canReference: (p) => p in resolved,
-										onReferenceClick: (p) => setSelectedPath(p)
+										onReferenceClick: (p) => setSelectedPath(p),
+										enabled: enabledIndicators
 									})
 								})
 							]