@unpunnyfuns/swatchbook-blocks 0.62.3 → 0.63.0

package/dist/index.d.mts

@@ -29,6 +29,12 @@ interface VirtualTokenShape {
   $type?: string | undefined;
   $value?: unknown;
   $description?: string | undefined;
+  /**
+   * DTCG `$deprecated` — `true` or a message string. Mirrors core's
+   * `SwatchbookToken.$deprecated`; reaches blocks via the resolved token
+   * map reconstructed from the wire `tokenGraph`.
+   */
+  $deprecated?: string | boolean | undefined;
   aliasOf?: string | undefined;
   aliasChain?: readonly string[] | undefined;
   aliasedBy?: readonly string[] | undefined;
@@ -271,6 +277,8 @@ interface ColorTableProps {
    * own row.
    */
   variants?: Record<string, string>;
+  /** Disambiguates persisted UI state for two identical-prop tables on a page. */
+  id?: string;
 }
 declare function ColorTable({
   filter,
@@ -279,7 +287,8 @@ declare function ColorTable({
   sortDir,
   searchable,
   onSelect,
-  variants
+  variants,
+  id
 }: ColorTableProps): ReactElement;
 //#endregion
 //#region src/Diagnostics.d.ts
@@ -789,13 +798,21 @@ interface TokenNavigatorProps {
    * the follow-up UI.
    */
   onSelect?(path: string): void;
+  /**
+   * Disambiguates persisted UI state (expand/collapse, selection, search)
+   * when two navigators with otherwise-identical props sit on the same docs
+   * page. Only needed in that case; the state key is derived from the other
+   * props otherwise.
+   */
+  id?: string;
 }
 declare function TokenNavigator({
   root,
   type,
   initiallyExpanded,
   searchable,
-  onSelect
+  onSelect,
+  id
 }: TokenNavigatorProps): ReactElement;
 //#endregion
 //#region src/TokenTable.d.ts
@@ -836,6 +853,8 @@ interface TokenTableProps {
    * follow-up UI (inline panel, drill-down route, …).
    */
   onSelect?(path: string): void;
+  /** Disambiguates persisted UI state for two identical-prop tables on a page. */
+  id?: string;
 }
 declare function TokenTable({
   filter,
@@ -844,7 +863,8 @@ declare function TokenTable({
   sortBy,
   sortDir,
   searchable,
-  onSelect
+  onSelect,
+  id
 }: TokenTableProps): ReactElement;
 //#endregion
 //#region src/TypographyScale.d.ts

package/dist/index.mjs

@@ -3,7 +3,7 @@ import { COLOR_FORMATS } from "@unpunnyfuns/swatchbook-core/color-formats";
 import { formatColor, parseColor } from "@unpunnyfuns/swatchbook-core/format-color";
 import { createContext, memo, useCallback, useContext, useDeferredValue, useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { getVariance, listPaths, resolveAllAt } from "@unpunnyfuns/swatchbook-core/graph";
+import { getVariance, listPaths, resolveAllWithProvenanceAt } from "@unpunnyfuns/swatchbook-core/graph";
 import { makeCssVar } from "@unpunnyfuns/swatchbook-core/css-var";
 import { SWATCHBOOK_STYLE_ELEMENT_ID, ensureStyleElement } from "@unpunnyfuns/swatchbook-core/style-element";
 import { tupleToName } from "@unpunnyfuns/swatchbook-core/themes";
@@ -244,7 +244,7 @@ function defaultTuple(axes) {
 }
 function makeResolveAt(graph) {
 	if (!graph) return () => ({});
-	return (tuple) => resolveAllAt(graph, tuple);
+	return (tuple) => resolveAllWithProvenanceAt(graph, tuple);
 }
 function snapshotResolveAt(snapshot) {
 	if (snapshot.resolveAt) return snapshot.resolveAt;
@@ -809,16 +809,73 @@ function CopyButton$1({ value, label, variant = "icon", className }) {
 	})] });
 }
 //#endregion
+//#region src/internal/persistent-state.ts
+/**
+* Block UI state that survives a docs-mode remount.
+*
+* In MDX docs mode Storybook re-renders the docs container on every
+* `updateGlobals` (axis flip), which unmounts and remounts the embedded
+* blocks — destroying any plain `useState` (expand/collapse, selection,
+* search). This is the same problem `channel-globals` solves for the
+* globals: lift the value out of React into module state so it persists
+* across the remount, and re-seed component state from it on mount.
+*
+* `usePersistedState` is a drop-in `useState` whose value is mirrored to a
+* module-level store under a caller-supplied key, and read back from it on
+* (re)mount. `useBlockKey` builds a stable key scoped to the current docs
+* page + block identity so two pages (or two distinct blocks) don't share
+* an entry.
+*/
+const store = /* @__PURE__ */ new Map();
+function pageScope() {
+	if (typeof window === "undefined") return "";
+	try {
+		return new URLSearchParams(window.location.search).get("id") ?? window.location.pathname;
+	} catch {
+		return "";
+	}
+}
+const SEP = "
";
+/**
+* Build a stable persistence key for a block's UI state: docs page + block
+* type + the props that distinguish one instance from another (and an
+* optional explicit `id` for identical-prop siblings on the same page).
+*/
+function useBlockKey(blockType, parts) {
+	const partsKey = parts.map((p) => p === void 0 ? "" : String(p)).join(SEP);
+	return useMemo(() => `${pageScope()}${SEP}${blockType}${SEP}${partsKey}`, [blockType, partsKey]);
+}
+/**
+* `useState`, but the value persists across remounts under `key`. `initial`
+* may be a value or a lazy initializer (used only on the first mount when the
+* store has no entry yet — never an actual `T` that's a function here).
+*/
+function usePersistedState(key, initial) {
+	const [value, setValue] = useState(() => {
+		if (store.has(key)) return store.get(key);
+		return typeof initial === "function" ? initial() : initial;
+	});
+	useEffect(() => {
+		store.set(key, value);
+	}, [key, value]);
+	return [value, setValue];
+}
+//#endregion
 //#region src/ColorTable.tsx
 const BASE_LABEL = "base";
 const COLUMN_COUNT = 6;
-function ColorTable({ filter, caption, sortBy = "path", sortDir = "asc", searchable = true, onSelect, variants }) {
+function ColorTable({ filter, caption, sortBy = "path", sortDir = "asc", searchable = true, onSelect, variants, id }) {
 	const { resolved, activeTheme, activeAxes, cssVarPrefix, listing } = useProject();
 	const colorFormat = useColorFormat();
-	const [query, setQuery] = useState("");
+	const blockKey = useBlockKey("ColorTable", [
+		filter,
+		caption,
+		id
+	]);
+	const [query, setQuery] = usePersistedState(`${blockKey}::query`, "");
 	const deferredQuery = useDeferredValue(query);
-	const [selectedByBase, setSelectedByBase] = useState({});
-	const [expandedByBase, setExpandedByBase] = useState(() => /* @__PURE__ */ new Set());
+	const [selectedByBase, setSelectedByBase] = usePersistedState(`${blockKey}::selected`, {});
+	const [expandedByBase, setExpandedByBase] = usePersistedState(`${blockKey}::expanded`, () => /* @__PURE__ */ new Set());
 	const defs = useMemo(() => buildVariantDefs(variants), [variants]);
 	const groups = useMemo(() => {
 		const projectFields = {
@@ -898,13 +955,13 @@ function ColorTable({ filter, caption, sortBy = "path", sortDir = "asc", searcha
 			else next.add(base);
 			return next;
 		});
-	}, []);
+	}, [setExpandedByBase]);
 	const selectVariant = useCallback((base, label) => {
 		setSelectedByBase((prev) => ({
 			...prev,
 			[base]: label
 		}));
-	}, []);
+	}, [setSelectedByBase]);
 	const matchSuffix = searchable && query.trim() !== "" ? ` · ${visibleGroups.length} matching "${query.trim()}"` : "";
 	const captionText = caption ?? `${totalTokens} color${totalTokens === 1 ? "" : "s"} across ${groups.length} group${groups.length === 1 ? "" : "s"}${filter ? ` matching \`${filter}\`` : ""}${matchSuffix} · ${activeTheme}`;
 	if (groups.length === 0) return /* @__PURE__ */ jsx("div", {
@@ -3398,6 +3455,8 @@ function TokenDetail({ path, heading }) {
 	const gamut = isColor ? formatColor(token.$value, colorFormat) : null;
 	const value = formatTokenValue(token.$value, token.$type, colorFormat, listing[path]);
 	const outOfGamut = gamut?.outOfGamut ?? false;
+	const dep = token.$deprecated;
+	const isDeprecated = dep === true || typeof dep === "string" && dep.length > 0;
 	return /* @__PURE__ */ jsxs("div", {
 		...wrapperAttrs,
 		className: cx(wrapperAttrs["className"], "sb-token-detail"),
@@ -3406,6 +3465,19 @@ function TokenDetail({ path, heading }) {
 				path,
 				...heading !== void 0 && { heading }
 			}),
+			isDeprecated && /* @__PURE__ */ jsxs("div", {
+				className: "sb-token-detail__deprecated",
+				"data-testid": "token-detail-deprecated",
+				role: "note",
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						"aria-hidden": true,
+						children: "⚠ "
+					}),
+					"Deprecated",
+					typeof dep === "string" ? `: ${dep}` : ""
+				]
+			}),
 			/* @__PURE__ */ jsxs("div", {
 				className: "sb-token-detail__section-header",
 				children: ["Resolved value · ", activeTheme]
@@ -3536,6 +3608,219 @@ function findBodyChildContaining(node) {
 	return cursor;
 }
 //#endregion
+//#region src/token-navigator/navigate.ts
+/**
+* The group paths to expand so `path` becomes visible in the tree — the
+* cumulative dotted prefixes of `path`, excluding `path` itself and any
+* prefix at or above `root` (the navigator's implicit root container is not
+* a group node). Matches `buildTree`'s full-dotted group-path scheme.
+*/
+function ancestorGroupPaths(path, root) {
+	const segments = path.split(".");
+	const out = [];
+	for (let i = 1; i < segments.length; i += 1) {
+		const prefix = segments.slice(0, i).join(".");
+		if (root && !prefix.startsWith(`${root}.`)) continue;
+		out.push(prefix);
+	}
+	return out;
+}
+/**
+* Whether `path` survives the navigator's structural (`root` / `type`)
+* filters and exists in the resolved map — i.e. it can be selected in the
+* current tree. Transient search is NOT considered here: a target hidden
+* only by an active query is still "in view" once the query is cleared,
+* which the caller handles.
+*/
+function isInView(path, ctx) {
+	const token = ctx.resolved[path];
+	if (!token) return false;
+	if (ctx.root && !(path === ctx.root || path.startsWith(`${ctx.root}.`))) return false;
+	if (ctx.typeFilter && !(token.$type !== void 0 && ctx.typeFilter.has(token.$type))) return false;
+	return true;
+}
+//#endregion
+//#region src/token-navigator/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, resolveInView, onNavigate }) {
+	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",
+		"data-testid": "row-indicator-alias-forward",
+		"aria-label": `aliases ${full}`,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "sb-token-navigator__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", {
+				type: "button",
+				className: "sb-token-navigator__alias-node",
+				"data-testid": "alias-node",
+				"aria-label": target,
+				onClick: (e) => {
+					e.stopPropagation();
+					onNavigate(target);
+				},
+				children: label
+			}) : /* @__PURE__ */ jsx("span", {
+				className: "sb-token-navigator__alias-node sb-token-navigator__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",
+				"aria-hidden": true,
+				children: [
+					" ",
+					"→ … →",
+					" "
+				]
+			}) : i < shown.length - 1 ? /* @__PURE__ */ jsxs("span", {
+				className: "sb-token-navigator__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-token-navigator__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-token-navigator__variance",
+		"data-testid": "row-indicator-variance",
+		"aria-label": `varies by ${axes.join(", ")}`,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "sb-token-navigator__variance-glyph",
+			"aria-hidden": true,
+			children: "⊹"
+		}), label]
+	});
+}
+function ReverseCount({ referents, resolveInView, onNavigate }) {
+	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-token-navigator__reverse-wrap",
+		onKeyDown: (e) => {
+			if (e.key === "Escape") setOpen(false);
+		},
+		children: [/* @__PURE__ */ jsxs("button", {
+			type: "button",
+			className: "sb-token-navigator__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]);
+				else setOpen((v) => !v);
+			},
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "sb-token-navigator__alias-arrow",
+				"aria-hidden": true,
+				children: "←"
+			}), count]
+		}), !single && open && /* @__PURE__ */ jsx("ul", {
+			className: "sb-token-navigator__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",
+					onClick: (e) => {
+						e.stopPropagation();
+						setOpen(false);
+						onNavigate(ref);
+					},
+					children: ref
+				})
+			}, ref))
+		})]
+	});
+}
+/** Per-row indicator strip: alias references, variance, gamut, deprecation. */
+function RowIndicators(props) {
+	const { token, root, variance, colorFormat, resolveInView, onNavigate } = 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-token-navigator__indicators",
+		children: [
+			isDeprecated && deprecated !== void 0 && /* @__PURE__ */ jsx(DeprecatedBadge, { deprecated }),
+			aliasChain && /* @__PURE__ */ jsx(ForwardChain, {
+				chain: aliasChain,
+				root,
+				resolveInView,
+				onNavigate
+			}),
+			reverseCount > 0 && token.aliasedBy && /* @__PURE__ */ jsx(ReverseCount, {
+				referents: token.aliasedBy,
+				resolveInView,
+				onNavigate
+			}),
+			variance && /* @__PURE__ */ jsx(VarianceBadge, { variance }),
+			outOfGamut && /* @__PURE__ */ jsx("span", {
+				className: "sb-token-navigator__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}.` : "";
@@ -3639,8 +3924,13 @@ function pruneTreeForMatches(nodes, matches, expandOut) {
 	}
 	return out;
 }
-function TokenNavigator({ root, type, initiallyExpanded = 1, searchable = true, onSelect }) {
+function TokenNavigator({ root, type, initiallyExpanded = 1, searchable = true, onSelect, id }) {
 	const { resolved, activeTheme, activeAxes, cssVarPrefix } = useProject();
+	const blockKey = useBlockKey("TokenNavigator", [
+		root,
+		type === void 0 ? "" : typeof type === "string" ? type : type.join(","),
+		id
+	]);
 	const typeFilter = useMemo(() => {
 		if (type === void 0) return void 0;
 		return new Set(Array.isArray(type) ? type : [type]);
@@ -3655,15 +3945,19 @@ function TokenNavigator({ root, type, initiallyExpanded = 1, searchable = true,
 		collectInitialExpanded(tree, initiallyExpanded, out);
 		return out;
 	}, [tree, initiallyExpanded]);
-	const [expanded, setExpanded] = useState(initialExpanded);
+	const [expanded, setExpanded] = usePersistedState(`${blockKey}::expanded`, initialExpanded);
 	const initiallyExpandedRef = useRef(initiallyExpanded);
 	useEffect(() => {
 		if (initiallyExpandedRef.current === initiallyExpanded) return;
 		initiallyExpandedRef.current = initiallyExpanded;
 		setExpanded(initialExpanded);
-	}, [initiallyExpanded, initialExpanded]);
-	const [selectedPath, setSelectedPath] = useState(null);
-	const [query, setQuery] = useState("");
+	}, [
+		initiallyExpanded,
+		initialExpanded,
+		setExpanded
+	]);
+	const [selectedPath, setSelectedPath] = usePersistedState(`${blockKey}::selected`, null);
+	const [query, setQuery] = usePersistedState(`${blockKey}::query`, "");
 	const deferredQuery = useDeferredValue(query);
 	const { visibleTree, searchExpanded } = useMemo(() => {
 		if (!searchable || deferredQuery.trim() === "") return {
@@ -3696,13 +3990,44 @@ function TokenNavigator({ root, type, initiallyExpanded = 1, searchable = true,
 			else next.add(path);
 			return next;
 		});
-	}, []);
+	}, [setExpanded]);
 	const handleLeafClick = useCallback((path) => {
 		if (onSelect) onSelect(path);
 		else setSelectedPath(path);
-	}, [onSelect]);
+	}, [onSelect, setSelectedPath]);
 	const [storedFocus, setStoredFocus] = useState(null);
 	const treeItemRefs = useRef(/* @__PURE__ */ new Map());
+	const resolveInView = useCallback((path) => isInView(path, {
+		resolved,
+		root,
+		typeFilter
+	}), [
+		resolved,
+		root,
+		typeFilter
+	]);
+	const navigateTo = useCallback((target) => {
+		setQuery("");
+		setExpanded((prev) => {
+			const next = new Set(prev);
+			for (const p of ancestorGroupPaths(target, root)) next.add(p);
+			return next;
+		});
+		if (onSelect) onSelect(target);
+		else setSelectedPath(target);
+		setStoredFocus(target);
+		requestAnimationFrame(() => {
+			const el = treeItemRefs.current.get(target);
+			el?.scrollIntoView({ block: "nearest" });
+			el?.focus();
+		});
+	}, [
+		root,
+		onSelect,
+		setQuery,
+		setExpanded,
+		setSelectedPath
+	]);
 	const registerTreeItem = useCallback((path) => (el) => {
 		if (el) treeItemRefs.current.set(path, el);
 		else treeItemRefs.current.delete(path);
@@ -3878,6 +4203,9 @@ function TokenNavigator({ root, type, initiallyExpanded = 1, searchable = true,
 					onToggle: toggle,
 					onFocusPath: setStoredFocus,
 					onLeafClick: handleLeafClick,
+					root,
+					resolveInView,
+					onNavigate: navigateTo,
 					level: 1,
 					setsize: visibleTree.length,
 					posinset: i + 1
@@ -3891,13 +4219,16 @@ function TokenNavigator({ root, type, initiallyExpanded = 1, searchable = true,
 		]
 	});
 }
-function TreeNodeRow({ node, expanded, focusedPath, registerTreeItem, onToggle, onFocusPath, onLeafClick, level, setsize, posinset }) {
+function TreeNodeRow({ node, expanded, focusedPath, registerTreeItem, onToggle, onFocusPath, onLeafClick, root, resolveInView, onNavigate, level, setsize, posinset }) {
 	if (node.kind === "leaf") return /* @__PURE__ */ jsx(LeafRow, {
 		node,
 		isFocused: focusedPath === node.path,
 		registerTreeItem,
 		onFocusPath,
 		onLeafClick,
+		root,
+		resolveInView,
+		onNavigate,
 		level,
 		setsize,
 		posinset
@@ -3945,6 +4276,9 @@ function TreeNodeRow({ node, expanded, focusedPath, registerTreeItem, onToggle,
 				onToggle,
 				onFocusPath,
 				onLeafClick,
+				root,
+				resolveInView,
+				onNavigate,
 				level: level + 1,
 				setsize: node.children.length,
 				posinset: i + 1
@@ -3952,8 +4286,13 @@ function TreeNodeRow({ node, expanded, focusedPath, registerTreeItem, onToggle,
 		})]
 	});
 }
-const LeafRow = memo(function LeafRow({ node, isFocused, registerTreeItem, onFocusPath, onLeafClick, level, setsize, posinset }) {
+const LeafRow = memo(function LeafRow({ node, isFocused, registerTreeItem, onFocusPath, onLeafClick, root, resolveInView, onNavigate, level, setsize, posinset }) {
 	const type = node.token.$type ?? "";
+	const project = useProject();
+	const colorFormat = useColorFormat();
+	const variance = project.varianceByPath[node.path];
+	const dep = node.token.$deprecated;
+	const isDeprecated = dep === true || typeof dep === "string" && dep.length > 0;
 	return /* @__PURE__ */ jsx("li", {
 		ref: registerTreeItem(node.path),
 		role: "treeitem",
@@ -3967,6 +4306,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,
 			onClick: () => {
 				onFocusPath(node.path);
 				onLeafClick(node.path);
@@ -3985,6 +4325,15 @@ const LeafRow = memo(function LeafRow({ node, isFocused, registerTreeItem, onFoc
 					className: "sb-token-navigator__type-pill",
 					children: type
 				}),
+				/* @__PURE__ */ jsx(RowIndicators, {
+					path: node.path,
+					token: node.token,
+					root,
+					variance,
+					colorFormat,
+					resolveInView,
+					onNavigate
+				}),
 				/* @__PURE__ */ jsx(LeafPreview, {
 					path: node.path,
 					token: node.token
@@ -4055,11 +4404,17 @@ const LeafPreview = memo(function LeafPreview({ path, token }) {
 });
 //#endregion
 //#region src/TokenTable.tsx
-function TokenTable({ filter, type, caption, sortBy = "path", sortDir = "asc", searchable = true, onSelect }) {
+function TokenTable({ filter, type, caption, sortBy = "path", sortDir = "asc", searchable = true, onSelect, id }) {
 	const { resolved, activeTheme, activeAxes, cssVarPrefix, listing } = useProject();
 	const colorFormat = useColorFormat();
-	const [selectedPath, setSelectedPath] = useState(null);
-	const [query, setQuery] = useState("");
+	const blockKey = useBlockKey("TokenTable", [
+		filter,
+		type,
+		caption,
+		id
+	]);
+	const [selectedPath, setSelectedPath] = usePersistedState(`${blockKey}::selected`, null);
+	const [query, setQuery] = usePersistedState(`${blockKey}::query`, "");
 	const deferredQuery = useDeferredValue(query);
 	const rows = useMemo(() => {
 		const projectFields = {
@@ -4106,7 +4461,7 @@ function TokenTable({ filter, type, caption, sortBy = "path", sortDir = "asc", s
 	const handleRowClick = useCallback((path) => {
 		if (onSelect) onSelect(path);
 		else setSelectedPath(path);
-	}, [onSelect]);
+	}, [onSelect, setSelectedPath]);
 	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", {