@unpunnyfuns/swatchbook-blocks 0.67.0 → 0.69.0

package/dist/index.mjs

@@ -2,39 +2,37 @@ import './style.css';
 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, 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";
-import { addons } from "storybook/preview-api";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { dataAttr } from "@unpunnyfuns/swatchbook-core/data-attr";
 import { matchPath } from "@unpunnyfuns/swatchbook-core/match-path";
 import { fuzzyFilter } from "@unpunnyfuns/swatchbook-core/fuzzy";
 import cx from "clsx";
-//#region src/internal/styles.tsx
+//#region src/internal/channel.ts
+let channel = null;
+const pending = /* @__PURE__ */ new Set();
 /**
-* Chrome-style primitives shared across every block. Kept as JS exports
-* for the inline-style sites that still compose them into per-block style
-* objects (e.g. TokenNavigator's `typePill` that builds on the shared
-* pill base). The pure direct-reference chrome — surface wrapper, caption,
-* empty-state — lives in `styles.css` and is applied via class names.
+* Inject the host channel. Called once by the addon preview at init. Runs any
+* subscribers that registered before the channel existed, then clears the
+* queue. Idempotent for consumers: each subscriber guards its own attach, so a
+* re-register (HMR) does not double-wire.
 */
-const TEXT_MUTED = "var(--swatchbook-text-muted, CanvasText)";
-const SURFACE_RAISED = "var(--swatchbook-surface-raised, Canvas)";
-const SURFACE_MUTED = "var(--swatchbook-surface-muted, rgba(128,128,128,0.15))";
-const BORDER_FAINT = `1px solid var(--swatchbook-border-default, rgba(128,128,128,0.15))`;
-const BORDER_STRONG = `1px solid var(--swatchbook-border-default, rgba(128,128,128,0.3))`;
+function registerChannel(next) {
+	channel = next;
+	for (const attach of pending) attach(next);
+	pending.clear();
+}
 /**
-* Inner content for a block's "nothing to render" state. Call sites wrap
-* it in their own block wrapper (which already carries `blockWrapperAttrs`), so
-* the message itself just needs the muted type.
+* Attach a subscriber to the host channel now if one is registered, else queue
+* it to run the moment {@link registerChannel} fires. Blocks call this at
+* module load; the queue absorbs the gap until the addon injects the channel.
 */
-function EmptyState({ children }) {
-	return /* @__PURE__ */ jsx("div", {
-		className: "sb-block__empty",
-		children
-	});
+function onChannel(attach) {
+	if (channel) attach(channel);
+	else pending.add(attach);
 }
 //#endregion
 //#region src/internal/channel-globals.ts
@@ -49,10 +47,9 @@ let subscribed$1 = false;
 function isColorFormat(value) {
 	return typeof value === "string" && COLOR_FORMATS.includes(value);
 }
-function ensureSubscribed$1() {
-	if (subscribed$1 || typeof window === "undefined") return;
+function attach$1(channel) {
+	if (subscribed$1) return;
 	subscribed$1 = true;
-	const channel = addons.getChannel();
 	let lastFingerprint = "";
 	const onGlobals = (payload) => {
 		const globals = payload.globals;
@@ -74,9 +71,8 @@ function ensureSubscribed$1() {
 	channel.on("updateGlobals", onGlobals);
 	channel.on("setGlobals", onGlobals);
 }
-ensureSubscribed$1();
+onChannel(attach$1);
 function subscribe$2(cb) {
-	ensureSubscribed$1();
 	listeners$1.add(cb);
 	return () => {
 		listeners$1.delete(cb);
@@ -204,16 +200,15 @@ function applyPatch(patch) {
 function registerTokenSource(source) {
 	applyPatch(source);
 }
-function ensureSubscribed() {
-	if (subscribed || typeof window === "undefined") return;
+function attach(channel) {
+	if (subscribed) return;
 	subscribed = true;
-	addons.getChannel().on(TOKENS_UPDATED_EVENT, (payload) => {
+	channel.on(TOKENS_UPDATED_EVENT, (payload) => {
 		applyPatch(payload);
 	});
 }
-ensureSubscribed();
+onChannel(attach);
 function subscribe$1(cb) {
-	ensureSubscribed();
 	listeners.add(cb);
 	return () => {
 		listeners.delete(cb);
@@ -260,9 +255,9 @@ function snapshotResolveAt(snapshot) {
 *
 * The provider-less path is what makes the hook safe to call from MDX
 * doc blocks and autodocs renders where no story is active. It
-* self-mounts the virtual module's per-theme CSS and tracks the active
-* tuple via the `globalsUpdated` channel event; {@link useGlobals} from
-* `storybook/preview-api` would throw outside a story render.
+* self-mounts the injected snapshot's per-theme CSS and tracks the active
+* tuple via the injected channel's `globalsUpdated` event, since a
+* story-scoped globals hook only works while a story is rendering.
 */
 function useProject() {
 	const snapshot = useOptionalSwatchbookData();
@@ -388,22 +383,25 @@ function resolveColorValue(path, raw, colorFormat, project) {
 }
 //#endregion
 //#region src/border-preview/BorderSample.tsx
-const sampleStyle$1 = {
-	width: 120,
-	height: 56,
-	background: SURFACE_RAISED,
-	borderRadius: 6
-};
-function BorderSample({ path }) {
-	const cssVar = resolveCssVar(path, useProject());
+/**
+* Pure derivation of a single border token's sample data from resolved
+* project data. Extracted so it is unit-testable without React or a store.
+*/
+function deriveBorderSample(path, project) {
+	return { cssVar: resolveCssVar(path, project) };
+}
+/** Pure presentation for a single border token's sample. Renders from plain props. */
+function BorderSampleView({ cssVar }) {
 	return /* @__PURE__ */ jsx("div", {
-		style: {
-			...sampleStyle$1,
-			border: cssVar
-		},
+		className: "sb-border-sample",
+		style: { border: cssVar },
 		"aria-hidden": true
 	});
 }
+function BorderSample({ path }) {
+	const { cssVar } = deriveBorderSample(path, useProject());
+	return /* @__PURE__ */ jsx(BorderSampleView, { cssVar });
+}
 //#endregion
 //#region src/internal/composite-sample-format.ts
 /**
@@ -586,29 +584,34 @@ function toDisplayable(v) {
 }
 //#endregion
 //#region src/BorderPreview.tsx
-function BorderPreview({ filter, caption, sortBy = "path", sortDir = "asc" }) {
-	const project = useProject();
-	const { resolved, activeTheme, activeAxes, cssVarPrefix } = project;
-	const colorFormat = useColorFormat();
-	const rows = useMemo(() => {
-		return sortTokens(Object.entries(resolved).filter(([path, token]) => {
-			if (token.$type !== "border") return false;
-			return matchPath(path, filter);
-		}), {
-			by: sortBy,
-			dir: sortDir
-		}).map(([path, token]) => ({
+/**
+* Pure derivation of the preview's display rows from resolved project data.
+* Extracted so it is unit-testable without React or a store.
+*/
+function deriveBorderRows(resolved, project, { filter, sortBy, sortDir, colorFormat }) {
+	return sortTokens(Object.entries(resolved).filter(([path, token]) => {
+		if (token.$type !== "border") return false;
+		return matchPath(path, filter);
+	}), {
+		by: sortBy,
+		dir: sortDir
+	}).map(([path, token]) => {
+		const value = token.$value ?? {};
+		return {
 			path,
 			cssVar: resolveCssVar(path, project),
-			value: token.$value ?? {}
-		}));
-	}, [
-		resolved,
-		filter,
-		project,
-		sortBy,
-		sortDir
-	]);
+			width: formatDimension$1(value.width),
+			style: value.style != null ? String(value.style) : "—",
+			color: formatSubColor(value.color, colorFormat)
+		};
+	});
+}
+/**
+* Pure presentation for the border preview. Renders from plain props;
+* composes the connected `BorderSample` as a child (that child reads the
+* project itself).
+*/
+function BorderPreviewView({ rows, activeTheme, cssVarPrefix, activeAxes, filter, caption }) {
 	const captionText = caption ?? `${rows.length} border${rows.length === 1 ? "" : "s"}${filter ? ` matching \`${filter}\`` : ""} · ${activeTheme}`;
 	if (rows.length === 0) return /* @__PURE__ */ jsx("div", {
 		...blockWrapperAttrs(cssVarPrefix, activeAxes),
@@ -646,23 +649,48 @@ function BorderPreview({ filter, caption, sortBy = "path", sortDir = "asc" }) {
 							className: "sb-border-preview__breakdown-key",
 							children: "width"
 						}),
-						/* @__PURE__ */ jsx("span", { children: formatDimension$1(row.value.width) }),
+						/* @__PURE__ */ jsx("span", { children: row.width }),
 						/* @__PURE__ */ jsx("span", {
 							className: "sb-border-preview__breakdown-key",
 							children: "style"
 						}),
-						/* @__PURE__ */ jsx("span", { children: row.value.style != null ? String(row.value.style) : "—" }),
+						/* @__PURE__ */ jsx("span", { children: row.style }),
 						/* @__PURE__ */ jsx("span", {
 							className: "sb-border-preview__breakdown-key",
 							children: "color"
 						}),
-						/* @__PURE__ */ jsx("span", { children: formatSubColor(row.value.color, colorFormat) })
+						/* @__PURE__ */ jsx("span", { children: row.color })
 					]
 				})
 			]
 		}, row.path))]
 	});
 }
+function BorderPreview({ filter, caption, sortBy = "path", sortDir = "asc" }) {
+	const project = useProject();
+	const { resolved, activeTheme, activeAxes, cssVarPrefix } = project;
+	const colorFormat = useColorFormat();
+	return /* @__PURE__ */ jsx(BorderPreviewView, {
+		rows: useMemo(() => deriveBorderRows(resolved, project, {
+			filter,
+			sortBy,
+			sortDir,
+			colorFormat
+		}), [
+			resolved,
+			project,
+			filter,
+			sortBy,
+			sortDir,
+			colorFormat
+		]),
+		activeTheme,
+		cssVarPrefix,
+		activeAxes,
+		filter,
+		caption
+	});
+}
 //#endregion
 //#region src/ColorPalette.tsx
 function fixedPrefixLength(filter) {
@@ -675,51 +703,48 @@ function fixedPrefixLength(filter) {
 	}
 	return fixed;
 }
-function ColorPalette({ filter, groupBy, caption, sortBy = "path", sortDir = "asc" }) {
-	const { resolved, activeTheme, activeAxes, cssVarPrefix, listing } = useProject();
-	const colorFormat = useColorFormat();
-	const groups = useMemo(() => {
-		const projectFields = {
-			listing,
-			cssVarPrefix
-		};
-		const entries = sortTokens(Object.entries(resolved).filter(([path, token]) => {
-			if (token.$type !== "color") return false;
-			return matchPath(path, filter);
-		}), {
-			by: sortBy,
-			dir: sortDir
-		});
-		const maxDepth = entries.reduce((m, [p]) => Math.max(m, p.split(".").length), 0);
-		const effectiveGroupBy = groupBy ?? Math.min(fixedPrefixLength(filter) + 1, Math.max(maxDepth - 1, 1));
-		const bucket = /* @__PURE__ */ new Map();
-		for (const [path, token] of entries) {
-			const segments = path.split(".");
-			const groupKey = segments.slice(0, effectiveGroupBy).join(".");
-			const leaf = segments.slice(effectiveGroupBy).join(".") || segments.at(-1) || path;
-			const list = bucket.get(groupKey) ?? [];
-			const formatted = resolveColorValue(path, token.$value, colorFormat, projectFields);
-			list.push({
-				path,
-				leaf,
-				cssVar: resolveCssVar(path, projectFields),
-				value: formatted.value,
-				outOfGamut: formatted.outOfGamut
-			});
-			bucket.set(groupKey, list);
-		}
-		return [...bucket.entries()].toSorted(([a], [b]) => a.localeCompare(b, void 0, { numeric: true }));
-	}, [
-		resolved,
+/**
+* Pure derivation of the palette's grouped swatch rows from resolved project
+* data. Extracted so it is unit-testable without React or a store.
+*/
+function deriveColorPaletteGroups(resolved, listing, cssVarPrefix, { filter, groupBy, sortBy, sortDir, colorFormat }) {
+	const projectFields = {
 		listing,
-		cssVarPrefix,
-		filter,
-		groupBy,
-		colorFormat,
-		sortBy,
-		sortDir
-	]);
-	const totalCount = groups.reduce((acc, [, swatches]) => acc + swatches.length, 0);
+		cssVarPrefix
+	};
+	const entries = sortTokens(Object.entries(resolved).filter(([path, token]) => {
+		if (token.$type !== "color") return false;
+		return matchPath(path, filter);
+	}), {
+		by: sortBy,
+		dir: sortDir
+	});
+	const maxDepth = entries.reduce((m, [p]) => Math.max(m, p.split(".").length), 0);
+	const effectiveGroupBy = groupBy ?? Math.min(fixedPrefixLength(filter) + 1, Math.max(maxDepth - 1, 1));
+	const bucket = /* @__PURE__ */ new Map();
+	for (const [path, token] of entries) {
+		const segments = path.split(".");
+		const groupKey = segments.slice(0, effectiveGroupBy).join(".");
+		const leaf = segments.slice(effectiveGroupBy).join(".") || segments.at(-1) || path;
+		const list = bucket.get(groupKey) ?? [];
+		const formatted = resolveColorValue(path, token.$value, colorFormat, projectFields);
+		list.push({
+			path,
+			leaf,
+			cssVar: resolveCssVar(path, projectFields),
+			value: formatted.value,
+			outOfGamut: formatted.outOfGamut
+		});
+		bucket.set(groupKey, list);
+	}
+	return [...bucket.entries()].toSorted(([a], [b]) => a.localeCompare(b, void 0, { numeric: true })).map(([group, swatches]) => ({
+		group,
+		swatches
+	}));
+}
+/** Pure presentation for the color palette. Renders from plain props. */
+function ColorPaletteView({ groups, activeTheme, cssVarPrefix, activeAxes, filter, caption }) {
+	const totalCount = groups.reduce((acc, { swatches }) => acc + swatches.length, 0);
 	const captionText = caption ?? `${totalCount} color${totalCount === 1 ? "" : "s"}${filter ? ` matching \`${filter}\`` : ""} · ${activeTheme}`;
 	if (totalCount === 0) return /* @__PURE__ */ jsx("div", {
 		...blockWrapperAttrs(cssVarPrefix, activeAxes),
@@ -733,7 +758,7 @@ function ColorPalette({ filter, groupBy, caption, sortBy = "path", sortDir = "as
 		children: [/* @__PURE__ */ jsx("div", {
 			className: "sb-block__caption",
 			children: captionText
-		}), groups.map(([group, swatches]) => /* @__PURE__ */ jsxs("section", {
+		}), groups.map(({ group, swatches }) => /* @__PURE__ */ jsxs("section", {
 			className: "sb-color-palette__group",
 			children: [/* @__PURE__ */ jsx("div", {
 				className: "sb-color-palette__group-header",
@@ -766,6 +791,33 @@ function ColorPalette({ filter, groupBy, caption, sortBy = "path", sortDir = "as
 		}, group))]
 	});
 }
+function ColorPalette({ filter, groupBy, caption, sortBy = "path", sortDir = "asc" }) {
+	const { resolved, activeTheme, activeAxes, cssVarPrefix, listing } = useProject();
+	const colorFormat = useColorFormat();
+	return /* @__PURE__ */ jsx(ColorPaletteView, {
+		groups: useMemo(() => deriveColorPaletteGroups(resolved, listing, cssVarPrefix, {
+			filter,
+			groupBy,
+			sortBy,
+			sortDir,
+			colorFormat
+		}), [
+			resolved,
+			listing,
+			cssVarPrefix,
+			filter,
+			groupBy,
+			sortBy,
+			sortDir,
+			colorFormat
+		]),
+		activeTheme,
+		cssVarPrefix,
+		activeAxes,
+		filter,
+		caption
+	});
+}
 //#endregion
 //#region src/indicators/resolve.ts
 /** Established-on set; `description` and `composes` are opt-in. */
@@ -1057,12 +1109,9 @@ function CopyButton$1({ value, label, variant = "icon", className }) {
 		timerRef.current = setTimeout(() => setCopied(false), 1500);
 	}, [value]);
 	const ariaLabel = label ?? `Copy ${value}`;
-	const classes = ["sb-copy-button", `sb-copy-button--${variant}`];
-	if (copied) classes.push("sb-copy-button--copied");
-	if (className) classes.push(className);
 	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("button", {
 		type: "button",
-		className: classes.join(" "),
+		className: cx("sb-copy-button", `sb-copy-button--${variant}`, copied && "sb-copy-button--copied", className),
 		onClick: handleClick,
 		"aria-label": ariaLabel,
 		title: ariaLabel,
@@ -1139,88 +1188,81 @@ function usePersistedState(key, initial) {
 const NOOP_REFERENCE = () => {};
 const BASE_LABEL = "base";
 const COLUMN_COUNT = 6;
-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,
-		id
-	]);
+/**
+* Pure derivation of the table's display groups from resolved project data.
+* Carries per-variant `isDeprecated` / `token` / `variance` so the View
+* renders the indicator strip and deprecation state without reaching back
+* into the project. Extracted so it is unit-testable without React or a
+* store.
+*/
+function deriveColorGroups(resolved, listing, cssVarPrefix, varianceByPath, { filter, variants, sortBy, sortDir, colorFormat }) {
+	const defs = buildVariantDefs(variants);
+	const projectFields = {
+		listing,
+		cssVarPrefix
+	};
+	const sorted = sortTokens(Object.entries(resolved).filter(([path, token]) => {
+		if (token.$type !== "color") return false;
+		return matchPath(path, filter);
+	}), {
+		by: sortBy,
+		dir: sortDir
+	});
+	const groupMap = /* @__PURE__ */ new Map();
+	for (const [path, token] of sorted) {
+		const raw = token.$value;
+		const hex = resolveColorValue(path, raw, "hex", projectFields);
+		const hsl = formatColor(raw, "hsl");
+		const oklch = formatColor(raw, "oklch");
+		const active = pickActiveFormat(raw, colorFormat, hex, hsl, oklch);
+		const match = matchVariant(path, defs.matchOrder);
+		const dep = token.$deprecated;
+		const variant = {
+			label: match?.label ?? BASE_LABEL,
+			path,
+			token,
+			variance: varianceByPath[path],
+			cssVar: resolveCssVar(path, projectFields),
+			value: active.value,
+			outOfGamut: active.outOfGamut,
+			hex: hex.value,
+			hsl: hsl.value,
+			oklch: oklch.value,
+			isDeprecated: dep === true || typeof dep === "string" && dep.length > 0,
+			...token.$description !== void 0 && { description: token.$description },
+			...token.aliasOf !== void 0 && { aliasOf: token.aliasOf },
+			...token.aliasChain !== void 0 && { aliasChain: token.aliasChain }
+		};
+		const basePath = match?.basePath ?? path;
+		const existing = groupMap.get(basePath);
+		if (existing) existing.variants.push(variant);
+		else groupMap.set(basePath, {
+			base: basePath,
+			variants: [variant]
+		});
+	}
+	const out = [];
+	for (const { base, variants: vs } of groupMap.values()) {
+		vs.sort((a, b) => orderIndex(a.label, defs) - orderIndex(b.label, defs));
+		const searchText = vs.map((v) => `${v.path} ${v.value}`).join(" ");
+		out.push({
+			base,
+			variants: vs,
+			searchText
+		});
+	}
+	return out;
+}
+/**
+* Pure presentation for the color table. Owns its own search, variant
+* selection, and row-expansion UI state; renders from the derived `groups`
+* view-model.
+*/
+function ColorTableView({ groups, activeTheme, cssVarPrefix, activeAxes, colorFormat, enabledIndicators, blockKey, filter, caption, searchable = true, onSelect }) {
 	const [query, setQuery] = usePersistedState(`${blockKey}::query`, "");
 	const deferredQuery = useDeferredValue(query);
 	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 = {
-			listing,
-			cssVarPrefix
-		};
-		const sorted = sortTokens(Object.entries(resolved).filter(([path, token]) => {
-			if (token.$type !== "color") return false;
-			return matchPath(path, filter);
-		}), {
-			by: sortBy,
-			dir: sortDir
-		});
-		const groupMap = /* @__PURE__ */ new Map();
-		for (const [path, token] of sorted) {
-			const raw = token.$value;
-			const hex = resolveColorValue(path, raw, "hex", projectFields);
-			const hsl = formatColor(raw, "hsl");
-			const oklch = formatColor(raw, "oklch");
-			const active = pickActiveFormat(raw, colorFormat, hex, hsl, oklch);
-			const match = matchVariant(path, defs.matchOrder);
-			const variant = {
-				label: match?.label ?? BASE_LABEL,
-				path,
-				token,
-				variance: varianceByPath[path],
-				cssVar: resolveCssVar(path, projectFields),
-				value: active.value,
-				outOfGamut: active.outOfGamut,
-				hex: hex.value,
-				hsl: hsl.value,
-				oklch: oklch.value,
-				...token.$description !== void 0 && { description: token.$description },
-				...token.aliasOf !== void 0 && { aliasOf: token.aliasOf },
-				...token.aliasChain !== void 0 && { aliasChain: token.aliasChain }
-			};
-			const basePath = match?.basePath ?? path;
-			const existing = groupMap.get(basePath);
-			if (existing) existing.variants.push(variant);
-			else groupMap.set(basePath, {
-				base: basePath,
-				variants: [variant]
-			});
-		}
-		const out = [];
-		for (const { base, variants: vs } of groupMap.values()) {
-			vs.sort((a, b) => orderIndex(a.label, defs) - orderIndex(b.label, defs));
-			const searchText = vs.map((v) => `${v.path} ${v.value}`).join(" ");
-			out.push({
-				base,
-				variants: vs,
-				searchText
-			});
-		}
-		return out;
-	}, [
-		resolved,
-		listing,
-		cssVarPrefix,
-		varianceByPath,
-		filter,
-		sortBy,
-		sortDir,
-		defs,
-		colorFormat
-	]);
 	const visibleGroups = useMemo(() => {
 		if (!searchable || deferredQuery.trim() === "") return groups;
 		return fuzzyFilter(groups, deferredQuery, (g) => g.searchText);
@@ -1333,12 +1375,59 @@ function ColorTable({ filter, caption, sortBy = "path", sortDir = "asc", searcha
 		})]
 	});
 }
+/**
+* A grouped, searchable table of `$type: color` tokens. Suffix-matched
+* variants (see `variants` prop) collapse into a single row with a pill
+* selector; clicking a row expands it in place to show the description,
+* alias chain, and (for grouped rows) every variant's hex/HSL/OKLCH values.
+*/
+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,
+		id
+	]);
+	return /* @__PURE__ */ jsx(ColorTableView, {
+		groups: useMemo(() => deriveColorGroups(resolved, listing, cssVarPrefix, varianceByPath, {
+			filter,
+			variants,
+			sortBy,
+			sortDir,
+			colorFormat
+		}), [
+			resolved,
+			listing,
+			cssVarPrefix,
+			varianceByPath,
+			filter,
+			variants,
+			sortBy,
+			sortDir,
+			colorFormat
+		]),
+		activeTheme,
+		cssVarPrefix,
+		activeAxes,
+		colorFormat,
+		enabledIndicators,
+		blockKey,
+		filter,
+		caption,
+		searchable,
+		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 isDeprecated = active.isDeprecated;
 	const handleRowActivate = () => {
 		if (onSelect) onSelect(active.path);
 		else onToggleExpand(group.base);
@@ -1627,6 +1716,7 @@ const severityLabel = {
 	warn: "WARN",
 	info: "INFO"
 };
+/** Aggregate diagnostics into a summary line + severity variant for the header. */
 function summarize(diagnostics) {
 	if (diagnostics.length === 0) return {
 		text: "✔ OK · no diagnostics",
@@ -1653,18 +1743,8 @@ function summarize(diagnostics) {
 function diagnosticKey(d, i) {
 	return `${d.severity}:${d.group}:${d.filename ?? ""}:${d.line ?? ""}:${d.message}:${i}`;
 }
-/**
-* Render the project's load diagnostics — parser errors, resolver warnings,
-* disabled-axes validation issues, etc. — as a collapsible list. Auto-opens
-* when the project carries errors or warnings; stays collapsed for clean
-* loads and info-only loads.
-*
-* Replaces the diagnostics section from the addon's (now-retired) Design
-* Tokens panel. Consumers compose it alongside TokenNavigator / TokenTable
-* on their own MDX pages.
-*/
-function Diagnostics({ caption } = {}) {
-	const { activeAxes, cssVarPrefix, diagnostics } = useProject();
+/** Pure presentation for the diagnostics list. Renders from plain props. */
+function DiagnosticsView({ caption, diagnostics, cssVarPrefix, activeAxes }) {
 	const summary = useMemo(() => summarize(diagnostics), [diagnostics]);
 	const headingText = caption ?? `Diagnostics · ${summary.text}`;
 	return /* @__PURE__ */ jsx("div", {
@@ -1698,6 +1778,25 @@ function Diagnostics({ caption } = {}) {
 		})
 	});
 }
+/**
+* Render the project's load diagnostics — parser errors, resolver warnings,
+* disabled-axes validation issues, etc. — as a collapsible list. Auto-opens
+* when the project carries errors or warnings; stays collapsed for clean
+* loads and info-only loads.
+*
+* Replaces the diagnostics section from the addon's (now-retired) Design
+* Tokens panel. Consumers compose it alongside TokenNavigator / TokenTable
+* on their own MDX pages.
+*/
+function Diagnostics({ caption } = {}) {
+	const { activeAxes, cssVarPrefix, diagnostics } = useProject();
+	return /* @__PURE__ */ jsx(DiagnosticsView, {
+		caption,
+		diagnostics,
+		cssVarPrefix,
+		activeAxes
+	});
+}
 //#endregion
 //#region src/dimension-scale/dimension-px.ts
 /**
@@ -1746,44 +1845,25 @@ function useRootFontSize() {
 }
 //#endregion
 //#region src/dimension-scale/DimensionBar.tsx
-const styles$1 = {
-	cappedWrap: {
-		display: "inline-flex",
-		alignItems: "center",
-		gap: "var(--swatchbook-space-3xs)",
-		maxWidth: "100%",
-		minWidth: 0
-	},
-	cap: {
-		color: "var(--swatchbook-text-muted)",
-		fontSize: 11,
-		lineHeight: 1,
-		userSelect: "none"
-	},
-	bar: {
-		height: 14,
-		background: "var(--swatchbook-accent-bg, #3b82f6)",
-		borderRadius: 2,
-		minWidth: 1,
-		maxWidth: "100%"
-	},
-	radiusSample: {
-		width: 56,
-		height: 56,
-		background: "var(--swatchbook-accent-bg, #3b82f6)",
-		border: BORDER_STRONG
-	},
-	sizeSample: {
-		background: "var(--swatchbook-accent-bg, #3b82f6)",
-		border: BORDER_STRONG,
-		minWidth: 1,
-		minHeight: 1
-	}
-};
+/**
+* Pure derivation of a single dimension token's bar geometry from resolved
+* project data. Extracted so it is unit-testable without React or a store.
+*/
+function deriveDimensionBar(path, project, rootFontSizePx) {
+	const cssVar = resolveCssVar(path, project);
+	const token = project.resolved[path];
+	const pxValue = toPixels(token?.$value, rootFontSizePx);
+	const capped = Number.isFinite(pxValue) && pxValue > 480;
+	return {
+		cssVar,
+		pxValue,
+		capped,
+		cappedValue: capped ? `480px` : cssVar
+	};
+}
 function withCap(visual) {
 	return /* @__PURE__ */ jsxs("span", {
 		className: "sb-dimension-bar sb-dimension-bar--capped",
-		style: styles$1.cappedWrap,
 		title: `capped at 480px`,
 		children: [visual, /* @__PURE__ */ jsx("span", {
 			className: "sb-dimension-bar__cap",
@@ -1792,27 +1872,18 @@ function withCap(visual) {
 		})]
 	});
 }
-function DimensionBar({ path, visual = "length" }) {
-	const project = useProject();
-	const { resolved } = project;
-	const rootFontSize = useRootFontSize();
-	const cssVar = resolveCssVar(path, project);
-	const token = resolved[path];
-	const pxValue = toPixels(token?.$value, rootFontSize);
-	const capped = Number.isFinite(pxValue) && pxValue > 480;
-	const cappedValue = capped ? `480px` : cssVar;
+/** Pure presentation for a single dimension token's bar/sample. Renders from plain props. */
+function DimensionBarView({ cssVar, capped, cappedValue, visual }) {
 	switch (visual) {
 		case "radius": return /* @__PURE__ */ jsx("div", {
-			style: {
-				...styles$1.radiusSample,
-				borderRadius: cssVar
-			},
+			className: "sb-dimension-bar__radius-sample",
+			style: { borderRadius: cssVar },
 			"aria-hidden": true
 		});
 		case "size": {
 			const sample = /* @__PURE__ */ jsx("div", {
+				className: "sb-dimension-bar__size-sample",
 				style: {
-					...styles$1.sizeSample,
 					width: cappedValue,
 					height: cappedValue
 				},
@@ -1822,16 +1893,23 @@ function DimensionBar({ path, visual = "length" }) {
 		}
 		default: {
 			const bar = /* @__PURE__ */ jsx("div", {
-				style: {
-					...styles$1.bar,
-					width: cappedValue
-				},
+				className: "sb-dimension-bar__bar",
+				style: { width: cappedValue },
 				"aria-hidden": true
 			});
 			return capped ? withCap(bar) : bar;
 		}
 	}
 }
+function DimensionBar({ path, visual = "length" }) {
+	const { cssVar, capped, cappedValue } = deriveDimensionBar(path, useProject(), useRootFontSize());
+	return /* @__PURE__ */ jsx(DimensionBarView, {
+		cssVar,
+		capped,
+		cappedValue,
+		visual
+	});
+}
 //#endregion
 //#region src/internal/format-token-value.ts
 /**
@@ -1936,31 +2014,30 @@ function formatUnknown(v) {
 }
 //#endregion
 //#region src/DimensionScale.tsx
-function DimensionScale({ filter, visual = "length", caption, sortBy = "value", sortDir = "asc" }) {
-	const project = useProject();
-	const { resolved, activeTheme, activeAxes, cssVarPrefix } = project;
-	const rootFontSize = useRootFontSize();
-	const rows = useMemo(() => {
-		return sortTokens(Object.entries(resolved).filter(([path, token]) => {
-			if (token.$type !== "dimension") return false;
-			return matchPath(path, filter);
-		}), {
-			by: sortBy,
-			dir: sortDir,
-			rootFontSizePx: rootFontSize
-		}).map(([path, token]) => ({
-			path,
-			cssVar: resolveCssVar(path, project),
-			displayValue: formatTokenValue(token.$value, token.$type, "raw", project.listing[path])
-		}));
-	}, [
-		resolved,
-		filter,
-		project,
-		sortBy,
-		sortDir,
-		rootFontSize
-	]);
+/**
+* Pure derivation of the scale's display rows from resolved project data.
+* Extracted so it is unit-testable without React or a store.
+*/
+function deriveDimensionRows(resolved, project, { filter, sortBy, sortDir, rootFontSizePx }) {
+	return sortTokens(Object.entries(resolved).filter(([path, token]) => {
+		if (token.$type !== "dimension") return false;
+		return matchPath(path, filter);
+	}), {
+		by: sortBy,
+		dir: sortDir,
+		rootFontSizePx
+	}).map(([path, token]) => ({
+		path,
+		cssVar: resolveCssVar(path, project),
+		displayValue: formatTokenValue(token.$value, token.$type, "raw", project.listing[path])
+	}));
+}
+/**
+* Pure presentation for the dimension scale. Renders from plain props;
+* composes the connected `DimensionBar` as a child (that child reads the
+* project itself).
+*/
+function DimensionScaleView({ rows, activeTheme, cssVarPrefix, activeAxes, visual, filter, caption }) {
 	const captionText = caption ?? `${rows.length} dimension${rows.length === 1 ? "" : "s"}${filter ? ` matching \`${filter}\`` : ""} · ${activeTheme}`;
 	if (rows.length === 0) return /* @__PURE__ */ jsx("div", {
 		...blockWrapperAttrs(cssVarPrefix, activeAxes),
@@ -2002,6 +2079,32 @@ function DimensionScale({ filter, visual = "length", caption, sortBy = "value",
 		}, row.path))]
 	});
 }
+function DimensionScale({ filter, visual = "length", caption, sortBy = "value", sortDir = "asc" }) {
+	const project = useProject();
+	const { resolved, activeTheme, activeAxes, cssVarPrefix } = project;
+	const rootFontSize = useRootFontSize();
+	return /* @__PURE__ */ jsx(DimensionScaleView, {
+		rows: useMemo(() => deriveDimensionRows(resolved, project, {
+			filter,
+			sortBy,
+			sortDir,
+			rootFontSizePx: rootFontSize
+		}), [
+			resolved,
+			project,
+			filter,
+			sortBy,
+			sortDir,
+			rootFontSize
+		]),
+		activeTheme,
+		cssVarPrefix,
+		activeAxes,
+		visual,
+		filter,
+		caption
+	});
+}
 //#endregion
 //#region src/FontFamilyPreview.tsx
 function stackString(raw) {
@@ -2009,28 +2112,25 @@ function stackString(raw) {
 	if (Array.isArray(raw)) return raw.map(String).join(", ");
 	return "";
 }
-function FontFamilyPreview({ filter, sample = "The quick brown fox jumps over the lazy dog.", caption, sortBy = "path", sortDir = "asc" }) {
-	const project = useProject();
-	const { resolved, activeTheme, activeAxes, cssVarPrefix } = project;
-	const rows = useMemo(() => {
-		return sortTokens(Object.entries(resolved).filter(([path, token]) => {
-			if (token.$type !== "fontFamily") return false;
-			return matchPath(path, filter);
-		}), {
-			by: sortBy,
-			dir: sortDir
-		}).map(([path, token]) => ({
-			path,
-			cssVar: resolveCssVar(path, project),
-			stack: stackString(token.$value)
-		}));
-	}, [
-		resolved,
-		filter,
-		project,
-		sortBy,
-		sortDir
-	]);
+/**
+* Pure derivation of the preview's display rows from resolved project data.
+* Extracted so it is unit-testable without React or a store.
+*/
+function deriveFontFamilyRows(resolved, project, { filter, sortBy, sortDir }) {
+	return sortTokens(Object.entries(resolved).filter(([path, token]) => {
+		if (token.$type !== "fontFamily") return false;
+		return matchPath(path, filter);
+	}), {
+		by: sortBy,
+		dir: sortDir
+	}).map(([path, token]) => ({
+		path,
+		cssVar: resolveCssVar(path, project),
+		stack: stackString(token.$value)
+	}));
+}
+/** Pure presentation for the font-family preview. Renders from plain props. */
+function FontFamilyPreviewView({ rows, activeTheme, cssVarPrefix, activeAxes, sample, filter, caption }) {
 	const captionText = caption ?? `${rows.length} fontFamily token${rows.length === 1 ? "" : "s"}${filter && filter !== "fontFamily" ? ` matching \`${filter}\`` : ""} · ${activeTheme}`;
 	if (rows.length === 0) return /* @__PURE__ */ jsx("div", {
 		...blockWrapperAttrs(cssVarPrefix, activeAxes),
@@ -2070,6 +2170,29 @@ function FontFamilyPreview({ filter, sample = "The quick brown fox jumps over th
 		}, row.path))]
 	});
 }
+function FontFamilyPreview({ filter, sample = "The quick brown fox jumps over the lazy dog.", caption, sortBy = "path", sortDir = "asc" }) {
+	const project = useProject();
+	const { resolved, activeTheme, activeAxes, cssVarPrefix } = project;
+	return /* @__PURE__ */ jsx(FontFamilyPreviewView, {
+		rows: useMemo(() => deriveFontFamilyRows(resolved, project, {
+			filter,
+			sortBy,
+			sortDir
+		}), [
+			resolved,
+			project,
+			filter,
+			sortBy,
+			sortDir
+		]),
+		activeTheme,
+		cssVarPrefix,
+		activeAxes,
+		sample,
+		filter,
+		caption
+	});
+}
 //#endregion
 //#region src/internal/css-var-style.ts
 /**
@@ -2095,29 +2218,26 @@ function toWeight(raw) {
 	}
 	return NaN;
 }
-function FontWeightScale({ filter, sample = "Aa", caption, sortBy = "value", sortDir = "asc" }) {
-	const project = useProject();
-	const { resolved, activeTheme, activeAxes, cssVarPrefix } = project;
-	const rows = useMemo(() => {
-		return sortTokens(Object.entries(resolved).filter(([path, token]) => {
-			if (token.$type !== "fontWeight") return false;
-			return matchPath(path, filter);
-		}), {
-			by: sortBy,
-			dir: sortDir
-		}).map(([path, token]) => ({
-			path,
-			cssVar: resolveCssVar(path, project),
-			display: token.$value == null ? "" : String(token.$value),
-			weight: toWeight(token.$value)
-		}));
-	}, [
-		resolved,
-		filter,
-		project,
-		sortBy,
-		sortDir
-	]);
+/**
+* Pure derivation of the scale's display rows from resolved project data.
+* Extracted so it is unit-testable without React or a store.
+*/
+function deriveFontWeightRows(resolved, project, { filter, sortBy, sortDir }) {
+	return sortTokens(Object.entries(resolved).filter(([path, token]) => {
+		if (token.$type !== "fontWeight") return false;
+		return matchPath(path, filter);
+	}), {
+		by: sortBy,
+		dir: sortDir
+	}).map(([path, token]) => ({
+		path,
+		cssVar: resolveCssVar(path, project),
+		display: token.$value == null ? "" : String(token.$value),
+		weight: toWeight(token.$value)
+	}));
+}
+/** Pure presentation for the font-weight scale. Renders from plain props. */
+function FontWeightScaleView({ rows, activeTheme, cssVarPrefix, activeAxes, sample, filter, caption }) {
 	const captionText = caption ?? `${rows.length} fontWeight token${rows.length === 1 ? "" : "s"}${filter && filter !== "fontWeight" ? ` matching \`${filter}\`` : ""} · ${activeTheme}`;
 	if (rows.length === 0) return /* @__PURE__ */ jsx("div", {
 		...blockWrapperAttrs(cssVarPrefix, activeAxes),
@@ -2157,6 +2277,29 @@ function FontWeightScale({ filter, sample = "Aa", caption, sortBy = "value", sor
 		}, row.path))]
 	});
 }
+function FontWeightScale({ filter, sample = "Aa", caption, sortBy = "value", sortDir = "asc" }) {
+	const project = useProject();
+	const { resolved, activeTheme, activeAxes, cssVarPrefix } = project;
+	return /* @__PURE__ */ jsx(FontWeightScaleView, {
+		rows: useMemo(() => deriveFontWeightRows(resolved, project, {
+			filter,
+			sortBy,
+			sortDir
+		}), [
+			resolved,
+			project,
+			filter,
+			sortBy,
+			sortDir
+		]),
+		activeTheme,
+		cssVarPrefix,
+		activeAxes,
+		sample,
+		filter,
+		caption
+	});
+}
 //#endregion
 //#region src/GradientPalette.tsx
 function asStops(raw) {
@@ -2171,33 +2314,37 @@ function stopCssColor(stop) {
 function stopKey(path, stop, fallback) {
 	return `${path}|${stop.position ?? fallback}|${stopCssColor(stop)}`;
 }
-function GradientPalette({ filter, caption, sortBy = "path", sortDir = "asc" }) {
-	const { resolved, activeTheme, activeAxes, cssVarPrefix, listing } = useProject();
-	const colorFormat = useColorFormat();
-	const rows = useMemo(() => {
-		const projectFields = {
-			listing,
-			cssVarPrefix
-		};
-		return sortTokens(Object.entries(resolved).filter(([path, token]) => {
-			if (token.$type !== "gradient") return false;
-			return matchPath(path, filter);
-		}), {
-			by: sortBy,
-			dir: sortDir
-		}).map(([path, token]) => ({
+/**
+* Pure derivation of the palette's gradient rows from resolved project
+* data. Extracted so it is unit-testable without React or a store.
+*/
+function deriveGradientRows(resolved, listing, cssVarPrefix, { filter, sortBy, sortDir, colorFormat }) {
+	const projectFields = {
+		listing,
+		cssVarPrefix
+	};
+	return sortTokens(Object.entries(resolved).filter(([path, token]) => {
+		if (token.$type !== "gradient") return false;
+		return matchPath(path, filter);
+	}), {
+		by: sortBy,
+		dir: sortDir
+	}).map(([path, token]) => {
+		const stops = asStops(token.$value);
+		return {
 			path,
 			cssVar: resolveCssVar(path, projectFields),
-			stops: asStops(token.$value)
-		}));
-	}, [
-		resolved,
-		listing,
-		cssVarPrefix,
-		filter,
-		sortBy,
-		sortDir
-	]);
+			stops: stops.map((stop, i) => ({
+				key: stopKey(path, stop, i),
+				cssColor: stopCssColor(stop),
+				value: formatColor(stop.color, colorFormat).value,
+				positionPercent: ((stop.position ?? 0) * 100).toFixed(0)
+			}))
+		};
+	});
+}
+/** Pure presentation for the gradient palette. Renders from plain props. */
+function GradientPaletteView({ rows, activeTheme, cssVarPrefix, activeAxes, filter, caption }) {
 	const captionText = caption ?? `${rows.length} gradient${rows.length === 1 ? "" : "s"}${filter ? ` matching \`${filter}\`` : ""} · ${activeTheme}`;
 	if (rows.length === 0) return /* @__PURE__ */ jsx("div", {
 		...blockWrapperAttrs(cssVarPrefix, activeAxes),
@@ -2231,30 +2378,55 @@ function GradientPalette({ filter, caption, sortBy = "path", sortDir = "asc" })
 				}),
 				/* @__PURE__ */ jsx("div", {
 					className: "sb-gradient-palette__stops",
-					children: row.stops.map((stop, i) => /* @__PURE__ */ jsxs("div", {
+					children: row.stops.map((stop) => /* @__PURE__ */ jsxs("div", {
 						className: "sb-gradient-palette__stop-row",
 						children: [
 							/* @__PURE__ */ jsx("span", {
 								className: "sb-gradient-palette__stop-swatch",
-								style: { background: stopCssColor(stop) },
+								style: { background: stop.cssColor },
 								"aria-hidden": true
 							}),
-							/* @__PURE__ */ jsx("span", { children: formatColor(stop.color, colorFormat).value }),
+							/* @__PURE__ */ jsx("span", { children: stop.value }),
 							/* @__PURE__ */ jsxs("span", {
 								className: "sb-gradient-palette__stop-position",
 								children: [
 									"@ ",
-									((stop.position ?? 0) * 100).toFixed(0),
+									stop.positionPercent,
 									"%"
 								]
 							})
 						]
-					}, stopKey(row.path, stop, i)))
+					}, stop.key))
 				})
 			]
 		}, row.path))]
 	});
 }
+function GradientPalette({ filter, caption, sortBy = "path", sortDir = "asc" }) {
+	const { resolved, activeTheme, activeAxes, cssVarPrefix, listing } = useProject();
+	const colorFormat = useColorFormat();
+	return /* @__PURE__ */ jsx(GradientPaletteView, {
+		rows: useMemo(() => deriveGradientRows(resolved, listing, cssVarPrefix, {
+			filter,
+			sortBy,
+			sortDir,
+			colorFormat
+		}), [
+			resolved,
+			listing,
+			cssVarPrefix,
+			filter,
+			sortBy,
+			sortDir,
+			colorFormat
+		]),
+		activeTheme,
+		cssVarPrefix,
+		activeAxes,
+		filter,
+		caption
+	});
+}
 //#endregion
 //#region src/internal/prefers-reduced-motion.ts
 function isChromatic() {
@@ -2287,29 +2459,6 @@ function usePrefersReducedMotion() {
 //#region src/motion-preview/MotionSample.tsx
 const DEFAULT_DURATION_MS = 300;
 const DEFAULT_EASING = "cubic-bezier(0.2, 0, 0, 1)";
-const styles = {
-	track: {
-		position: "relative",
-		height: 36,
-		background: SURFACE_MUTED,
-		borderRadius: 18,
-		overflow: "hidden"
-	},
-	ball: {
-		position: "absolute",
-		top: "50%",
-		width: 28,
-		height: 28,
-		marginTop: -14,
-		borderRadius: "50%",
-		background: "var(--swatchbook-accent-bg, #3b82f6)"
-	},
-	reducedMotion: {
-		fontSize: 11,
-		color: TEXT_MUTED,
-		fontStyle: "italic"
-	}
-};
 function extractDurationMs(raw) {
 	if (raw == null) return NaN;
 	if (typeof raw === "object") {
@@ -2379,10 +2528,16 @@ function resolveMotionSpec(token, themeTokens) {
 	}
 	return null;
 }
-function MotionSample({ path, speed = 1, runKey = 0 }) {
-	const { resolved } = useProject();
+/**
+* Pure derivation of a single motion token's animation spec from resolved
+* project data. Extracted so it is unit-testable without React or a store.
+*/
+function deriveMotionSample(path, project) {
+	return { spec: resolveMotionSpec(project.resolved[path], project.resolved) };
+}
+/** Pure presentation + animation for a single motion token's sample. Renders from plain props. */
+function MotionSampleView({ spec, speed, runKey }) {
 	const reducedMotion = usePrefersReducedMotion();
-	const spec = useMemo(() => resolveMotionSpec(resolved[path], resolved), [resolved, path]);
 	const durationMs = spec?.durationMs ?? DEFAULT_DURATION_MS;
 	const easing = spec?.easing ?? DEFAULT_EASING;
 	const scaledDuration = Math.max(1, durationMs / speed);
@@ -2404,7 +2559,7 @@ function MotionSample({ path, speed = 1, runKey = 0 }) {
 		reducedMotion
 	]);
 	if (reducedMotion) return /* @__PURE__ */ jsxs("div", {
-		style: styles.reducedMotion,
+		className: "sb-motion-sample__reduced-motion",
 		children: [
 			"Animation suppressed by ",
 			/* @__PURE__ */ jsx("code", { children: "prefers-reduced-motion: reduce" }),
@@ -2412,17 +2567,22 @@ function MotionSample({ path, speed = 1, runKey = 0 }) {
 		]
 	});
 	return /* @__PURE__ */ jsx("div", {
-		style: styles.track,
+		className: "sb-motion-sample__track",
 		children: /* @__PURE__ */ jsx("div", {
-			style: {
-				...styles.ball,
-				left: phase === 1 ? "calc(100% - 32px)" : "4px",
-				transition: `left ${scaledDuration}ms ${easing}`
-			},
+			className: cx("sb-motion-sample__ball", phase === 1 ? "sb-motion-sample__ball--end" : "sb-motion-sample__ball--start"),
+			style: { transition: `left ${scaledDuration}ms ${easing}` },
 			"aria-hidden": true
 		})
 	});
 }
+function MotionSample({ path, speed = 1, runKey = 0 }) {
+	const { spec } = deriveMotionSample(path, useProject());
+	return /* @__PURE__ */ jsx(MotionSampleView, {
+		spec,
+		speed,
+		runKey
+	});
+}
 //#endregion
 //#region src/MotionPreview.tsx
 const SPEEDS = [
@@ -2438,43 +2598,48 @@ function formatSpec(row) {
 		case "cubicBezier": return `cubicBezier · ${row.easing}`;
 	}
 }
-function MotionPreview({ filter, caption }) {
-	const project = useProject();
-	const { resolved, activeTheme, activeAxes, cssVarPrefix } = project;
+/**
+* Pure derivation of the preview's display rows from resolved project data.
+* Extracted so it is unit-testable without React or a store.
+*/
+function deriveMotionRows(resolved, project, { filter }) {
+	const collected = [];
+	for (const [path, token] of Object.entries(resolved)) {
+		if (filter && !matchPath(path, filter)) continue;
+		if (!filter && ![
+			"transition",
+			"duration",
+			"cubicBezier"
+		].includes(token.$type ?? "")) continue;
+		const kind = token.$type;
+		if (!kind) continue;
+		const spec = resolveMotionSpec(token, resolved);
+		if (!spec) continue;
+		collected.push({
+			path,
+			cssVar: resolveCssVar(path, project),
+			durationMs: spec.durationMs,
+			easing: spec.easing,
+			kind
+		});
+	}
+	collected.sort((a, b) => {
+		if (a.kind !== b.kind) return a.kind.localeCompare(b.kind);
+		return a.path.localeCompare(b.path, void 0, { numeric: true });
+	});
+	return collected;
+}
+/**
+* Pure presentation for the motion preview. Owns the speed/replay controls'
+* local UI state and the `prefers-reduced-motion` read (a browser-environment
+* concern, not project data); renders from the derived `rows` view-model.
+* Composes the connected `MotionSample` as a child (that child reads the
+* project itself).
+*/
+function MotionPreviewView({ rows, activeTheme, cssVarPrefix, activeAxes, filter, caption }) {
 	const [speed, setSpeed] = useState(1);
 	const [run, setRun] = useState(0);
 	const reducedMotion = usePrefersReducedMotion();
-	const rows = useMemo(() => {
-		const collected = [];
-		for (const [path, token] of Object.entries(resolved)) {
-			if (filter && !matchPath(path, filter)) continue;
-			if (!filter && ![
-				"transition",
-				"duration",
-				"cubicBezier"
-			].includes(token.$type ?? "")) continue;
-			const kind = token.$type;
-			if (!kind) continue;
-			const spec = resolveMotionSpec(token, resolved);
-			if (!spec) continue;
-			collected.push({
-				path,
-				cssVar: resolveCssVar(path, project),
-				durationMs: spec.durationMs,
-				easing: spec.easing,
-				kind
-			});
-		}
-		collected.sort((a, b) => {
-			if (a.kind !== b.kind) return a.kind.localeCompare(b.kind);
-			return a.path.localeCompare(b.path, void 0, { numeric: true });
-		});
-		return collected;
-	}, [
-		resolved,
-		filter,
-		project
-	]);
 	const captionText = caption ?? `${rows.length} motion token${rows.length === 1 ? "" : "s"}${filter ? ` matching \`${filter}\`` : ""} · ${activeTheme}`;
 	if (rows.length === 0) return /* @__PURE__ */ jsx("div", {
 		...blockWrapperAttrs(cssVarPrefix, activeAxes),
@@ -2540,6 +2705,22 @@ function MotionPreview({ filter, caption }) {
 		]
 	});
 }
+function MotionPreview({ filter, caption }) {
+	const project = useProject();
+	const { resolved, activeTheme, activeAxes, cssVarPrefix } = project;
+	return /* @__PURE__ */ jsx(MotionPreviewView, {
+		rows: useMemo(() => deriveMotionRows(resolved, project, { filter }), [
+			resolved,
+			project,
+			filter
+		]),
+		activeTheme,
+		cssVarPrefix,
+		activeAxes,
+		filter,
+		caption
+	});
+}
 //#endregion
 //#region src/OpacityScale.tsx
 function toOpacity(raw) {
@@ -2547,44 +2728,33 @@ function toOpacity(raw) {
 	return NaN;
 }
 /**
-* Render each opacity token as a colored sample at that opacity over a
-* checkerboard backdrop, so the transparency is visually readable. The
-* number by itself (`0.4`) doesn't convey what the token looks like
-* applied to a surface; the sample does.
-*
-* Only tokens whose `$value` is a finite number between 0 and 1
-* inclusive are rendered — non-opacity `number` siblings (`line-height`,
-* `z-index`) fall out naturally.
+* Pure derivation of the scale's display rows from resolved project data.
+* Only tokens whose `$value` is a finite number between 0 and 1 inclusive
+* are included — non-opacity `number` siblings (`line-height`, `z-index`)
+* fall out naturally. Extracted so it is unit-testable without React or
+* a store.
 */
-function OpacityScale({ filter, type = "number", sampleColor = "color.accent.bg", caption, sortBy = "value", sortDir = "asc" }) {
-	const project = useProject();
-	const { resolved, activeTheme, activeAxes, cssVarPrefix } = project;
-	const rows = useMemo(() => {
-		return sortTokens(Object.entries(resolved).filter(([path, token]) => {
-			if (token.$type !== type) return false;
-			const v = toOpacity(token.$value);
-			if (!Number.isFinite(v) || v < 0 || v > 1) return false;
-			return matchPath(path, filter);
-		}), {
-			by: sortBy,
-			dir: sortDir
-		}).map(([path, token]) => {
-			const opacity = toOpacity(token.$value);
-			return {
-				path,
-				cssVar: resolveCssVar(path, project),
-				opacity,
-				displayValue: String(opacity)
-			};
-		});
-	}, [
-		resolved,
-		filter,
-		type,
-		project,
-		sortBy,
-		sortDir
-	]);
+function deriveOpacityRows(resolved, project, { filter, type, sortBy, sortDir }) {
+	return sortTokens(Object.entries(resolved).filter(([path, token]) => {
+		if (token.$type !== type) return false;
+		const v = toOpacity(token.$value);
+		if (!Number.isFinite(v) || v < 0 || v > 1) return false;
+		return matchPath(path, filter);
+	}), {
+		by: sortBy,
+		dir: sortDir
+	}).map(([path, token]) => {
+		const opacity = toOpacity(token.$value);
+		return {
+			path,
+			cssVar: resolveCssVar(path, project),
+			opacity,
+			displayValue: String(opacity)
+		};
+	});
+}
+/** Pure presentation for the opacity scale. Renders from plain props. */
+function OpacityScaleView({ rows, activeTheme, cssVarPrefix, activeAxes, sampleColorVar, filter, caption }) {
 	const captionText = caption ?? `${rows.length} opacity token${rows.length === 1 ? "" : "s"}${filter ? ` matching \`${filter}\`` : ""} · ${activeTheme}`;
 	if (rows.length === 0) return /* @__PURE__ */ jsx("div", {
 		...blockWrapperAttrs(cssVarPrefix, activeAxes),
@@ -2593,7 +2763,6 @@ function OpacityScale({ filter, type = "number", sampleColor = "color.accent.bg"
 			children: "No opacity tokens match this filter."
 		})
 	});
-	const sampleColorVar = resolveCssVar(sampleColor, project);
 	return /* @__PURE__ */ jsxs("div", {
 		...blockWrapperAttrs(cssVarPrefix, activeAxes),
 		children: [/* @__PURE__ */ jsx("div", {
@@ -2631,6 +2800,37 @@ function OpacityScale({ filter, type = "number", sampleColor = "color.accent.bg"
 		})]
 	});
 }
+/**
+* Render each opacity token as a colored sample at that opacity over a
+* checkerboard backdrop, so the transparency is visually readable. The
+* number by itself (`0.4`) doesn't convey what the token looks like
+* applied to a surface; the sample does.
+*/
+function OpacityScale({ filter, type = "number", sampleColor = "color.accent.bg", caption, sortBy = "value", sortDir = "asc" }) {
+	const project = useProject();
+	const { resolved, activeTheme, activeAxes, cssVarPrefix } = project;
+	return /* @__PURE__ */ jsx(OpacityScaleView, {
+		rows: useMemo(() => deriveOpacityRows(resolved, project, {
+			filter,
+			type,
+			sortBy,
+			sortDir
+		}), [
+			resolved,
+			project,
+			filter,
+			type,
+			sortBy,
+			sortDir
+		]),
+		activeTheme,
+		cssVarPrefix,
+		activeAxes,
+		sampleColorVar: resolveCssVar(sampleColor, project),
+		filter,
+		caption
+	});
+}
 //#endregion
 //#region src/provider.tsx
 /**
@@ -2660,56 +2860,67 @@ function useSwatchbookData() {
 }
 //#endregion
 //#region src/shadow-preview/ShadowSample.tsx
-const sampleStyle = {
-	width: 120,
-	height: 56,
-	background: SURFACE_RAISED,
-	border: BORDER_FAINT,
-	borderRadius: 6
-};
-function ShadowSample({ path }) {
-	const cssVar = resolveCssVar(path, useProject());
+/**
+* Pure derivation of a single shadow token's sample data from resolved
+* project data. Extracted so it is unit-testable without React or a store.
+*/
+function deriveShadowSample(path, project) {
+	return { cssVar: resolveCssVar(path, project) };
+}
+/** Pure presentation for a single shadow token's sample. Renders from plain props. */
+function ShadowSampleView({ cssVar }) {
 	return /* @__PURE__ */ jsx("div", {
-		style: {
-			...sampleStyle,
-			boxShadow: cssVar
-		},
+		className: "sb-shadow-sample",
+		style: { boxShadow: cssVar },
 		"aria-hidden": true
 	});
 }
+function ShadowSample({ path }) {
+	const { cssVar } = deriveShadowSample(path, useProject());
+	return /* @__PURE__ */ jsx(ShadowSampleView, { cssVar });
+}
 //#endregion
 //#region src/ShadowPreview.tsx
+function layerKey(path, layer, fallback) {
+	return `${path}|${layer.offset}|${layer.blur}|${layer.spread}|${fallback}`;
+}
 function asLayers(raw) {
 	if (Array.isArray(raw)) return raw;
 	if (raw && typeof raw === "object") return [raw];
 	return [];
 }
-function layerKey(path, layer, fallback) {
-	return `${path}|${`${formatDimension$1(layer.offsetX)},${formatDimension$1(layer.offsetY)}`}|${formatDimension$1(layer.blur)}|${formatDimension$1(layer.spread)}|${fallback}`;
+function formatLayer(layer, colorFormat) {
+	return {
+		offset: `${formatDimension$1(layer.offsetX)} ${formatDimension$1(layer.offsetY)}`,
+		blur: formatDimension$1(layer.blur),
+		spread: formatDimension$1(layer.spread),
+		color: formatSubColor(layer.color, colorFormat),
+		inset: layer.inset ? String(layer.inset) : void 0
+	};
 }
-function ShadowPreview({ filter, caption, sortBy = "path", sortDir = "asc" }) {
-	const project = useProject();
-	const { resolved, activeTheme, activeAxes, cssVarPrefix } = project;
-	const colorFormat = useColorFormat();
-	const rows = useMemo(() => {
-		return sortTokens(Object.entries(resolved).filter(([path, token]) => {
-			if (token.$type !== "shadow") return false;
-			return matchPath(path, filter);
-		}), {
-			by: sortBy,
-			dir: sortDir
-		}).map(([path, token]) => ({
-			path,
-			cssVar: resolveCssVar(path, project),
-			layers: asLayers(token.$value)
-		}));
-	}, [
-		resolved,
-		filter,
-		project,
-		sortBy,
-		sortDir
-	]);
+/**
+* Pure derivation of the preview's display rows from resolved project data.
+* Extracted so it is unit-testable without React or a store.
+*/
+function deriveShadowRows(resolved, project, { filter, sortBy, sortDir, colorFormat }) {
+	return sortTokens(Object.entries(resolved).filter(([path, token]) => {
+		if (token.$type !== "shadow") return false;
+		return matchPath(path, filter);
+	}), {
+		by: sortBy,
+		dir: sortDir
+	}).map(([path, token]) => ({
+		path,
+		cssVar: resolveCssVar(path, project),
+		layers: asLayers(token.$value).map((layer) => formatLayer(layer, colorFormat))
+	}));
+}
+/**
+* Pure presentation for the shadow preview. Renders from plain props;
+* composes the connected `ShadowSample` as a child (that child reads the
+* project itself).
+*/
+function ShadowPreviewView({ rows, activeTheme, cssVarPrefix, activeAxes, filter, caption }) {
 	const captionText = caption ?? `${rows.length} shadow${rows.length === 1 ? "" : "s"}${filter ? ` matching \`${filter}\`` : ""} · ${activeTheme}`;
 	if (rows.length === 0) return /* @__PURE__ */ jsx("div", {
 		...blockWrapperAttrs(cssVarPrefix, activeAxes),
@@ -2742,32 +2953,31 @@ function ShadowPreview({ filter, caption, sortBy = "path", sortDir = "asc" }) {
 				}),
 				/* @__PURE__ */ jsx("div", {
 					className: "sb-shadow-preview__breakdown",
-					children: row.layers.length === 1 ? renderLayer(row.layers[0], colorFormat) : row.layers.map((layer, i) => /* @__PURE__ */ jsx(Layer, {
+					children: row.layers.length === 1 ? renderLayerEntries(row.layers[0]) : row.layers.map((layer, i) => /* @__PURE__ */ jsx(Layer, {
 						layer,
 						index: i,
-						total: row.layers.length,
-						colorFormat
+						total: row.layers.length
 					}, layerKey(row.path, layer, i)))
 				})
 			]
 		}, row.path))]
 	});
 }
-function renderLayer(layer, format) {
+function renderLayerEntries(layer) {
 	if (!layer) return [];
 	const entries = [
-		["offset", `${formatDimension$1(layer.offsetX)} ${formatDimension$1(layer.offsetY)}`],
-		["blur", formatDimension$1(layer.blur)],
-		["spread", formatDimension$1(layer.spread)],
-		["color", formatSubColor(layer.color, format)]
+		["offset", layer.offset],
+		["blur", layer.blur],
+		["spread", layer.spread],
+		["color", layer.color]
 	];
-	if (layer.inset) entries.push(["inset", String(layer.inset)]);
+	if (layer.inset) entries.push(["inset", layer.inset]);
 	return entries.flatMap(([k, v]) => [/* @__PURE__ */ jsx("span", {
 		className: "sb-shadow-preview__breakdown-key",
 		children: k
 	}, `k-${k}`), /* @__PURE__ */ jsx("span", { children: v }, `v-${k}`)]);
 }
-function Layer({ layer, index, total, colorFormat }) {
+function Layer({ layer, index, total }) {
 	return /* @__PURE__ */ jsxs("div", {
 		className: "sb-shadow-preview__layer",
 		children: [/* @__PURE__ */ jsxs("div", {
@@ -2780,10 +2990,35 @@ function Layer({ layer, index, total, colorFormat }) {
 			]
 		}), /* @__PURE__ */ jsx("div", {
 			className: cx("sb-shadow-preview__breakdown", "sb-shadow-preview__layer-breakdown"),
-			children: renderLayer(layer, colorFormat)
+			children: renderLayerEntries(layer)
 		})]
 	});
 }
+function ShadowPreview({ filter, caption, sortBy = "path", sortDir = "asc" }) {
+	const project = useProject();
+	const { resolved, activeTheme, activeAxes, cssVarPrefix } = project;
+	const colorFormat = useColorFormat();
+	return /* @__PURE__ */ jsx(ShadowPreviewView, {
+		rows: useMemo(() => deriveShadowRows(resolved, project, {
+			filter,
+			sortBy,
+			sortDir,
+			colorFormat
+		}), [
+			resolved,
+			project,
+			filter,
+			sortBy,
+			sortDir,
+			colorFormat
+		]),
+		activeTheme,
+		cssVarPrefix,
+		activeAxes,
+		filter,
+		caption
+	});
+}
 //#endregion
 //#region src/StrokeStylePreview.tsx
 const STRING_STYLES = new Set([
@@ -2800,29 +3035,26 @@ function extractCssStyle(value) {
 	if (typeof value === "string" && STRING_STYLES.has(value)) return value;
 	return null;
 }
-function StrokeStylePreview({ filter, caption, sortBy = "path", sortDir = "asc" }) {
-	const project = useProject();
-	const { resolved, activeTheme, activeAxes, cssVarPrefix } = project;
-	const rows = useMemo(() => {
-		return sortTokens(Object.entries(resolved).filter(([path, token]) => {
-			if (token.$type !== "strokeStyle") return false;
-			return matchPath(path, filter);
-		}), {
-			by: sortBy,
-			dir: sortDir
-		}).map(([path, token]) => ({
-			path,
-			cssVar: resolveCssVar(path, project),
-			displayValue: formatTokenValue(token.$value, token.$type, "raw", project.listing[path]),
-			cssStyle: extractCssStyle(token.$value)
-		}));
-	}, [
-		resolved,
-		filter,
-		project,
-		sortBy,
-		sortDir
-	]);
+/**
+* Pure derivation of the preview's display rows from resolved project data.
+* Extracted so it is unit-testable without React or a store.
+*/
+function deriveStrokeStyleRows(resolved, project, { filter, sortBy, sortDir }) {
+	return sortTokens(Object.entries(resolved).filter(([path, token]) => {
+		if (token.$type !== "strokeStyle") return false;
+		return matchPath(path, filter);
+	}), {
+		by: sortBy,
+		dir: sortDir
+	}).map(([path, token]) => ({
+		path,
+		cssVar: resolveCssVar(path, project),
+		displayValue: formatTokenValue(token.$value, token.$type, "raw", project.listing[path]),
+		cssStyle: extractCssStyle(token.$value)
+	}));
+}
+/** Pure presentation for the stroke-style preview. Renders from plain props. */
+function StrokeStylePreviewView({ rows, activeTheme, cssVarPrefix, activeAxes, filter, caption }) {
 	const captionText = caption ?? `${rows.length} strokeStyle token${rows.length === 1 ? "" : "s"}${filter && filter !== "strokeStyle" ? ` matching \`${filter}\`` : ""} · ${activeTheme}`;
 	if (rows.length === 0) return /* @__PURE__ */ jsx("div", {
 		...blockWrapperAttrs(cssVarPrefix, activeAxes),
@@ -2865,6 +3097,28 @@ function StrokeStylePreview({ filter, caption, sortBy = "path", sortDir = "asc"
 		}, row.path))]
 	});
 }
+function StrokeStylePreview({ filter, caption, sortBy = "path", sortDir = "asc" }) {
+	const project = useProject();
+	const { resolved, activeTheme, activeAxes, cssVarPrefix } = project;
+	return /* @__PURE__ */ jsx(StrokeStylePreviewView, {
+		rows: useMemo(() => deriveStrokeStyleRows(resolved, project, {
+			filter,
+			sortBy,
+			sortDir
+		}), [
+			resolved,
+			project,
+			filter,
+			sortBy,
+			sortDir
+		]),
+		activeTheme,
+		cssVarPrefix,
+		activeAxes,
+		filter,
+		caption
+	});
+}
 //#endregion
 //#region src/token-detail/internal.ts
 function useTokenDetailData(path) {
@@ -3048,10 +3302,7 @@ function AxisVariance({ path }) {
 						}),
 						value,
 						/* @__PURE__ */ jsx("span", {
-							style: {
-								opacity: .6,
-								marginLeft: 8
-							},
+							className: "sb-token-detail__constant-label-note",
 							children: "same across every axis"
 						})
 					]
@@ -3085,8 +3336,7 @@ function AxisVariance({ path }) {
 				"data-axis": axisName,
 				"data-context": row.ctx,
 				children: [/* @__PURE__ */ jsx("td", {
-					className: "sb-token-detail__theme-cell",
-					style: { width: "30%" },
+					className: "sb-token-detail__theme-cell sb-token-detail__theme-cell--label",
 					children: row.ctx
 				}), /* @__PURE__ */ jsxs("td", {
 					className: "sb-token-detail__theme-cell",
@@ -3113,22 +3363,14 @@ function AxisVariance({ path }) {
 			children: [/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", {
 				className: "sb-token-detail__theme-row",
 				children: [/* @__PURE__ */ jsxs("th", {
-					className: "sb-token-detail__theme-cell",
-					style: {
-						textAlign: "left",
-						opacity: .7
-					},
+					className: "sb-token-detail__theme-cell sb-token-detail__theme-cell--header",
 					children: [
 						rowAxis.name,
 						" \\ ",
 						colAxis.name
 					]
 				}), colAxis.contexts.map((col) => /* @__PURE__ */ jsx("th", {
-					className: "sb-token-detail__theme-cell",
-					style: {
-						textAlign: "left",
-						opacity: .7
-					},
+					className: "sb-token-detail__theme-cell sb-token-detail__theme-cell--header",
 					children: col
 				}, col))]
 			}) }), /* @__PURE__ */ jsx("tbody", { children: rowAxis.contexts.map((row) => /* @__PURE__ */ jsxs("tr", {
@@ -3158,8 +3400,7 @@ function AxisVariance({ path }) {
 			}, row)) })]
 		}),
 		extra.length > 0 && /* @__PURE__ */ jsxs("div", {
-			className: "sb-token-detail__aliased-by-truncated",
-			style: { marginTop: 6 },
+			className: "sb-token-detail__aliased-by-truncated sb-token-detail__aliased-by-truncated--axis-note",
 			children: [
 				"Values also vary with ",
 				extra.map((a) => a.name).join(", "),
@@ -3270,7 +3511,7 @@ function CompositeBreakdownContent({ type, rawValue, partialAliasOf, resolved, c
 			children: layers.map((layer, i) => {
 				const v = layer;
 				return /* @__PURE__ */ jsxs("div", {
-					style: { display: "contents" },
+					className: "sb-token-detail__shadow-layer",
 					children: [
 						multi && /* @__PURE__ */ jsxs("div", {
 							className: "sb-token-detail__breakdown-layer-header",
@@ -3612,24 +3853,30 @@ function TransitionSample({ transition, durationMs }) {
 	return /* @__PURE__ */ jsx("div", {
 		className: "sb-token-detail__motion-track",
 		children: /* @__PURE__ */ jsx("div", {
-			className: "sb-token-detail__motion-ball",
-			style: {
-				left: phase === 1 ? "calc(100% - 28px)" : "4px",
-				transition
-			},
+			className: cx("sb-token-detail__motion-ball", phase === 1 ? "sb-token-detail__motion-ball--end" : "sb-token-detail__motion-ball--start"),
+			style: { transition },
 			"aria-hidden": true
 		})
 	});
 }
 //#endregion
 //#region src/token-detail/ConsumerOutput.tsx
-function ConsumerOutput({ path }) {
-	const { token, cssVar, activeAxes } = useTokenDetailData(path);
-	const { listing } = useProject();
-	if (!token) return null;
-	const tupleLabel = Object.entries(activeAxes).map(([k, v]) => `${k}=${v}`).join(", ");
+/**
+* Pure derivation of the consumer-output platform rows from the Token
+* Listing. Extracted so it is unit-testable without React or a store.
+*/
+function deriveConsumerOutput(path, listing) {
 	const names = listing[path]?.names ?? {};
-	const extraPlatforms = Object.keys(names).filter((platform) => platform !== "css" && names[platform]).toSorted();
+	return { extraPlatforms: Object.keys(names).filter((platform) => platform !== "css" && names[platform]).toSorted().map((platform) => ({
+		platform,
+		label: formatPlatformLabel(platform),
+		value: names[platform]
+	})) };
+}
+/** Pure presentation for the consumer-output section. Renders from plain props; owns the copy-button's local feedback state. */
+function ConsumerOutputView({ path, cssVar, activeAxes, hasToken, extraPlatforms }) {
+	if (!hasToken) return null;
+	const tupleLabel = Object.entries(activeAxes).map(([k, v]) => `${k}=${v}`).join(", ");
 	return /* @__PURE__ */ jsxs(Fragment, { children: [
 		/* @__PURE__ */ jsx("div", {
 			className: "sb-token-detail__section-header",
@@ -3649,13 +3896,25 @@ function ConsumerOutput({ path }) {
 			value: cssVar,
 			testId: "consumer-output-css"
 		}),
-		extraPlatforms.map((platform) => /* @__PURE__ */ jsx(OutputRow, {
-			label: formatPlatformLabel(platform),
-			value: names[platform],
-			testId: `consumer-output-${platform}`
-		}, platform))
+		extraPlatforms.map((entry) => /* @__PURE__ */ jsx(OutputRow, {
+			label: entry.label,
+			value: entry.value,
+			testId: `consumer-output-${entry.platform}`
+		}, entry.platform))
 	] });
 }
+function ConsumerOutput({ path }) {
+	const { token, cssVar, activeAxes } = useTokenDetailData(path);
+	const { listing } = useProject();
+	const { extraPlatforms } = deriveConsumerOutput(path, listing);
+	return /* @__PURE__ */ jsx(ConsumerOutputView, {
+		path,
+		cssVar,
+		activeAxes,
+		hasToken: Boolean(token),
+		extraPlatforms
+	});
+}
 function formatPlatformLabel(platform) {
 	if (platform.length === 0) return platform;
 	return platform[0].toUpperCase() + platform.slice(1);
@@ -3776,10 +4035,43 @@ function TokenUsageSnippet({ path }) {
 }
 //#endregion
 //#region src/TokenDetail.tsx
-function TokenDetail({ path, heading }) {
-	const { token, cssVar, activeTheme, activeAxes, cssVarPrefix } = useTokenDetailData(path);
-	const colorFormat = useColorFormat();
-	const { listing } = useProject();
+const EMPTY_DERIVED = {
+	value: "",
+	outOfGamut: false,
+	isColor: false,
+	isDeprecated: false,
+	deprecationMessage: void 0
+};
+/**
+* Pure derivation of the token's display value and status flags. Mirrors
+* `formatTokenValue` + `formatColor`'s gamut check, both of which need the
+* resolved token's raw `$value`/`$type` — the listing alone (no `$value`)
+* can't drive this. Extracted so it is unit-testable without React or a
+* store; the View renders purely from this shape plus the token's presence.
+*/
+function deriveTokenDetail(path, token, listing, colorFormat) {
+	if (!token) return EMPTY_DERIVED;
+	const isColor = token.$type === "color";
+	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;
+	return {
+		value,
+		outOfGamut,
+		isColor,
+		isDeprecated: dep === true || typeof dep === "string" && dep.length > 0,
+		deprecationMessage: typeof dep === "string" ? dep : void 0
+	};
+}
+/**
+* Pure presentation for the token detail panel. Renders from plain props;
+* composes the connected `TokenHeader` / `CompositePreview` /
+* `CompositeBreakdown` / `AliasChain` / `AliasedBy` / `TokenUsageSnippet` /
+* `ConsumerOutput` / `AxisVariance` as children (each reads the project
+* itself for `path`).
+*/
+function TokenDetailView({ path, heading, token, cssVar, activeTheme, activeAxes, cssVarPrefix, value, outOfGamut, isColor, isDeprecated, deprecationMessage }) {
 	const wrapperAttrs = blockWrapperAttrs(cssVarPrefix, activeAxes);
 	if (!token) return /* @__PURE__ */ jsx("div", {
 		...wrapperAttrs,
@@ -3795,12 +4087,6 @@ function TokenDetail({ path, heading }) {
 			]
 		})
 	});
-	const isColor = token.$type === "color";
-	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"),
@@ -3819,7 +4105,7 @@ function TokenDetail({ path, heading }) {
 						children: "⚠ "
 					}),
 					"Deprecated",
-					typeof dep === "string" ? `: ${dep}` : ""
+					deprecationMessage ? `: ${deprecationMessage}` : ""
 				]
 			}),
 			/* @__PURE__ */ jsxs("div", {
@@ -3840,7 +4126,7 @@ function TokenDetail({ path, heading }) {
 					outOfGamut && /* @__PURE__ */ jsx("span", {
 						title: "Out of sRGB gamut for this format",
 						"aria-label": "out of gamut",
-						style: { marginLeft: 6 },
+						className: "sb-token-detail__out-of-gamut-icon",
 						children: "⚠"
 					}),
 					/* @__PURE__ */ jsx(CopyButton$1, {
@@ -3857,6 +4143,22 @@ function TokenDetail({ path, heading }) {
 		]
 	});
 }
+function TokenDetail({ path, heading }) {
+	const { token, cssVar, activeTheme, activeAxes, cssVarPrefix } = useTokenDetailData(path);
+	const colorFormat = useColorFormat();
+	const { listing } = useProject();
+	const derived = deriveTokenDetail(path, token, listing, colorFormat);
+	return /* @__PURE__ */ jsx(TokenDetailView, {
+		path,
+		...heading !== void 0 && { heading },
+		token,
+		cssVar,
+		activeTheme,
+		activeAxes,
+		cssVarPrefix,
+		...derived
+	});
+}
 //#endregion
 //#region src/internal/DetailOverlay.tsx
 const FOCUSABLE_SELECTOR = [
@@ -3985,6 +4287,13 @@ function isInView(path, ctx) {
 }
 //#endregion
 //#region src/TokenNavigator.tsx
+/**
+* Pure derivation of the navigator's tree from the resolved token map:
+* groups paths by dotted segment (scoped to `root` when set, restricted to
+* `typeFilter`'s `$type`s when set), producing nested `GroupNode`s down to
+* `LeafNode`s, sorted groups-before-leaves and alphanumeric within a level.
+* Extracted so it is unit-testable without React or a store.
+*/
 function buildTree(resolved, root, typeFilter) {
 	const rootPrefix = root && root.length > 0 ? `${root}.` : "";
 	const rootSegments = root ? root.split(".") : [];
@@ -4061,6 +4370,12 @@ function collectLeafPaths(nodes, out) {
 	for (const node of nodes) if (node.kind === "leaf") out.push(node.path);
 	else collectLeafPaths(node.children, out);
 }
+/**
+* Pure derivation of the flattened, currently-visible treeitem order from a
+* tree plus the set of expanded group paths — depth-first, only descending
+* into expanded groups. Appends to `out` (caller passes `[]`). Extracted so
+* it is unit-testable without React or a store.
+*/
 function flattenVisible(nodes, expanded, parentPath, out) {
 	for (const node of nodes) {
 		out.push({
@@ -4087,18 +4402,18 @@ function pruneTreeForMatches(nodes, matches, expandOut) {
 	}
 	return out;
 }
-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(","),
-		id
-	]);
+/**
+* Pure presentation for the token navigator. Owns its own expand/collapse,
+* selection, search, and roving-tabindex keyboard-nav state; renders the
+* tree from the `resolved` view-model. Composes the connected `RowIndicators`
+* / `DetailOverlay` / sample previews as children (those read the project
+* themselves).
+*/
+function TokenNavigatorView({ resolved, root, enabledIndicators, cssVarPrefix, activeAxes, activeTheme, blockKey, type, initiallyExpanded = 1, searchable = true, onSelect }) {
 	const typeFilter = useMemo(() => {
 		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,
@@ -4314,7 +4629,10 @@ function TokenNavigator({ root, type, initiallyExpanded = 1, searchable = true,
 	}, [visibleTree, searchExpanded]);
 	if (tree.length === 0) return /* @__PURE__ */ jsx("div", {
 		...blockWrapperAttrs(cssVarPrefix, activeAxes),
-		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." })
+		children: /* @__PURE__ */ jsx("div", {
+			className: "sb-block__empty",
+			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."
+		})
 	});
 	return /* @__PURE__ */ jsxs("div", {
 		...blockWrapperAttrs(cssVarPrefix, activeAxes),
@@ -4384,6 +4702,32 @@ function TokenNavigator({ root, type, initiallyExpanded = 1, searchable = true,
 		]
 	});
 }
+/**
+* A collapsible, searchable tree of tokens with roving-tabindex keyboard
+* navigation. Click a leaf to inspect it in a slide-over (unless `onSelect`
+* is provided, which hands the follow-up to the consumer).
+*/
+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(","),
+		id
+	]);
+	return /* @__PURE__ */ jsx(TokenNavigatorView, {
+		resolved,
+		root,
+		enabledIndicators: useMemo(() => resolveIndicators(indicators, indicatorBaseline), [indicators, indicatorBaseline]),
+		cssVarPrefix,
+		activeAxes,
+		activeTheme,
+		blockKey,
+		type,
+		initiallyExpanded,
+		searchable,
+		onSelect
+	});
+}
 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,
@@ -4572,56 +4916,51 @@ 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, indicators }) {
-	const { resolved, activeTheme, activeAxes, cssVarPrefix, listing, varianceByPath, indicators: indicatorBaseline } = useProject();
-	const colorFormat = useColorFormat();
-	const rootFontSize = useRootFontSize();
-	const blockKey = useBlockKey("TokenTable", [
-		filter,
-		type,
-		caption,
-		id
-	]);
-	const enabledIndicators = useMemo(() => resolveIndicators(indicators, indicatorBaseline), [indicators, indicatorBaseline]);
+/**
+* Pure derivation of the table's display rows from resolved project data.
+* Carries per-row `isDeprecated` / `token` / `variance` so the View renders
+* the indicator strip and deprecation state without reaching back into the
+* project. Extracted so it is unit-testable without React or a store.
+*/
+function deriveTokenRows(resolved, listing, cssVarPrefix, varianceByPath, { filter, type, sortBy, sortDir, colorFormat, rootFontSizePx }) {
+	const projectFields = {
+		listing,
+		cssVarPrefix
+	};
+	return sortTokens(Object.entries(resolved).filter(([path, token]) => {
+		if (!matchPath(path, filter)) return false;
+		if (type && token.$type !== type) return false;
+		return true;
+	}), {
+		by: sortBy,
+		dir: sortDir,
+		rootFontSizePx
+	}).map(([path, token]) => {
+		const isColor = token.$type === "color";
+		const color = isColor ? resolveColorValue(path, token.$value, colorFormat, projectFields) : null;
+		const dep = token.$deprecated;
+		return {
+			path,
+			type: token.$type ?? "",
+			value: formatTokenValue(token.$value, token.$type, colorFormat, listing[path]),
+			outOfGamut: color?.outOfGamut ?? false,
+			cssVar: resolveCssVar(path, projectFields),
+			isColor,
+			isDeprecated: dep === true || typeof dep === "string" && dep.length > 0,
+			token,
+			variance: varianceByPath[path]
+		};
+	});
+}
+/**
+* Pure presentation for the token table. Owns its own search + selection UI
+* state; renders from the derived `rows` view-model. Composes the connected
+* DetailOverlay as a child (that child reads the project itself).
+*/
+function TokenTableView({ rows, activeTheme, cssVarPrefix, activeAxes, colorFormat, enabledIndicators, validPaths, blockKey, filter, type, caption, searchable = true, onSelect }) {
 	const [selectedPath, setSelectedPath] = usePersistedState(`${blockKey}::selected`, null);
 	const [query, setQuery] = usePersistedState(`${blockKey}::query`, "");
 	const deferredQuery = useDeferredValue(query);
-	const rows = useMemo(() => {
-		const projectFields = {
-			listing,
-			cssVarPrefix
-		};
-		return sortTokens(Object.entries(resolved).filter(([path, token]) => {
-			if (!matchPath(path, filter)) return false;
-			if (type && token.$type !== type) return false;
-			return true;
-		}), {
-			by: sortBy,
-			dir: sortDir,
-			rootFontSizePx: rootFontSize
-		}).map(([path, token]) => {
-			const isColor = token.$type === "color";
-			const color = isColor ? resolveColorValue(path, token.$value, colorFormat, projectFields) : null;
-			return {
-				path,
-				type: token.$type ?? "",
-				value: formatTokenValue(token.$value, token.$type, colorFormat, listing[path]),
-				outOfGamut: color?.outOfGamut ?? false,
-				cssVar: resolveCssVar(path, projectFields),
-				isColor
-			};
-		});
-	}, [
-		resolved,
-		listing,
-		cssVarPrefix,
-		filter,
-		type,
-		colorFormat,
-		sortBy,
-		sortDir,
-		rootFontSize
-	]);
 	const visibleRows = useMemo(() => {
 		if (!searchable || deferredQuery.trim() === "") return rows;
 		return fuzzyFilter(rows, deferredQuery, (row) => `${row.path} ${row.type} ${row.value}`);
@@ -4697,9 +5036,7 @@ function TokenTable({ filter, type, caption, sortBy = "path", sortDir = "asc", s
 							"\"."
 						]
 					}) }), visibleRows.map((row) => {
-						const token = resolved[row.path];
-						const dep = token?.$deprecated;
-						const isDeprecated = dep === true || typeof dep === "string" && dep.length > 0;
+						const token = row.token;
 						return /* @__PURE__ */ jsxs("tr", {
 							className: "sb-token-table__row",
 							onClick: () => handleRowClick(row.path),
@@ -4717,7 +5054,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": enabledIndicators.deprecation && isDeprecated ? "true" : void 0,
+									"data-deprecated": enabledIndicators.deprecation && row.isDeprecated ? "true" : void 0,
 									children: row.path
 								}),
 								/* @__PURE__ */ jsx("td", {
@@ -4766,9 +5103,9 @@ function TokenTable({ filter, type, caption, sortBy = "path", sortDir = "asc", s
 										path: row.path,
 										token,
 										root: void 0,
-										variance: varianceByPath[row.path],
+										variance: row.variance,
 										colorFormat,
-										canReference: (p) => p in resolved,
+										canReference: (p) => validPaths.has(p),
 										onReferenceClick: (p) => setSelectedPath(p),
 										enabled: enabledIndicators
 									})
@@ -4786,6 +5123,56 @@ function TokenTable({ filter, type, caption, sortBy = "path", sortDir = "asc", s
 		]
 	});
 }
+/**
+* A sortable, searchable table of tokens. Click a row to inspect it in a
+* slide-over (unless `onSelect` is provided, which hands the follow-up to the
+* consumer).
+*/
+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 rootFontSize = useRootFontSize();
+	const blockKey = useBlockKey("TokenTable", [
+		filter,
+		type,
+		caption,
+		id
+	]);
+	const enabledIndicators = useMemo(() => resolveIndicators(indicators, indicatorBaseline), [indicators, indicatorBaseline]);
+	return /* @__PURE__ */ jsx(TokenTableView, {
+		rows: useMemo(() => deriveTokenRows(resolved, listing, cssVarPrefix, varianceByPath, {
+			filter,
+			type,
+			sortBy,
+			sortDir,
+			colorFormat,
+			rootFontSizePx: rootFontSize
+		}), [
+			resolved,
+			listing,
+			cssVarPrefix,
+			varianceByPath,
+			filter,
+			type,
+			sortBy,
+			sortDir,
+			colorFormat,
+			rootFontSize
+		]),
+		activeTheme,
+		cssVarPrefix,
+		activeAxes,
+		colorFormat,
+		enabledIndicators,
+		validPaths: useMemo(() => new Set(Object.keys(resolved)), [resolved]),
+		blockKey,
+		filter,
+		type,
+		caption,
+		searchable,
+		onSelect
+	});
+}
 //#endregion
 //#region src/TypographyScale.tsx
 function asDimension(raw) {
@@ -4822,30 +5209,29 @@ function buildRow(path, composite) {
 		].filter(Boolean).join(" · ")
 	};
 }
-function TypographyScale({ filter, sample = "The quick brown fox jumps over the lazy dog.", caption, sortBy = "path", sortDir = "asc" }) {
-	const { resolved, activeTheme, activeAxes, cssVarPrefix } = useProject();
-	const rows = useMemo(() => {
-		return sortTokens(Object.entries(resolved).filter(([path, token]) => {
-			if (token.$type !== "typography") return false;
-			return matchPath(path, filter);
-		}), {
-			by: sortBy,
-			dir: sortDir
-		}).map(([path, token]) => {
-			const value = token.$value;
-			if (!value || typeof value !== "object") return {
-				path,
-				sampleStyle: {},
-				specs: ""
-			};
-			return buildRow(path, value);
-		});
-	}, [
-		resolved,
-		filter,
-		sortBy,
-		sortDir
-	]);
+/**
+* Pure derivation of the scale's display rows from resolved project data.
+* Extracted so it is unit-testable without React or a store.
+*/
+function deriveTypographyRows(resolved, { filter, sortBy, sortDir }) {
+	return sortTokens(Object.entries(resolved).filter(([path, token]) => {
+		if (token.$type !== "typography") return false;
+		return matchPath(path, filter);
+	}), {
+		by: sortBy,
+		dir: sortDir
+	}).map(([path, token]) => {
+		const value = token.$value;
+		if (!value || typeof value !== "object") return {
+			path,
+			sampleStyle: {},
+			specs: ""
+		};
+		return buildRow(path, value);
+	});
+}
+/** Pure presentation for the typography scale. Renders from plain props. */
+function TypographyScaleView({ rows, activeTheme, cssVarPrefix, activeAxes, sample, filter, caption }) {
 	const captionText = caption ?? `${rows.length} typography token${rows.length === 1 ? "" : "s"}${filter && filter !== "typography" ? ` matching \`${filter}\`` : ""} · ${activeTheme}`;
 	if (rows.length === 0) return /* @__PURE__ */ jsx("div", {
 		...blockWrapperAttrs(cssVarPrefix, activeAxes),
@@ -4877,7 +5263,28 @@ function TypographyScale({ filter, sample = "The quick brown fox jumps over the
 		}, row.path))]
 	});
 }
+function TypographyScale({ filter, sample = "The quick brown fox jumps over the lazy dog.", caption, sortBy = "path", sortDir = "asc" }) {
+	const { resolved, activeTheme, activeAxes, cssVarPrefix } = useProject();
+	return /* @__PURE__ */ jsx(TypographyScaleView, {
+		rows: useMemo(() => deriveTypographyRows(resolved, {
+			filter,
+			sortBy,
+			sortDir
+		}), [
+			resolved,
+			filter,
+			sortBy,
+			sortDir
+		]),
+		activeTheme,
+		cssVarPrefix,
+		activeAxes,
+		sample,
+		filter,
+		caption
+	});
+}
 //#endregion
-export { AliasChain, AliasedBy, AxesContext, AxisVariance, BorderPreview, BorderSample, COLOR_FORMATS, ColorFormatContext, ColorPalette, ColorTable, CompositeBreakdown, CompositePreview, ConsumerOutput, Diagnostics, DimensionBar, DimensionScale, FontFamilyPreview, FontWeightScale, GradientPalette, MotionPreview, MotionSample, OpacityScale, ShadowPreview, ShadowSample, StrokeStylePreview, SwatchbookContext, SwatchbookProvider, TOKENS_UPDATED_EVENT, ThemeContext, TokenDetail, TokenHeader, TokenNavigator, TokenTable, TokenUsageSnippet, TypographyScale, formatColor, registerTokenSource, useActiveAxes, useActiveTheme, useChannelGlobals, useColorFormat, useOptionalSwatchbookData, useSwatchbookData, useTokenSnapshot };
+export { AliasChain, AliasedBy, AxesContext, AxisVariance, BorderPreview, BorderSample, COLOR_FORMATS, ColorFormatContext, ColorPalette, ColorTable, CompositeBreakdown, CompositePreview, ConsumerOutput, Diagnostics, DimensionBar, DimensionScale, FontFamilyPreview, FontWeightScale, GradientPalette, MotionPreview, MotionSample, OpacityScale, ShadowPreview, ShadowSample, StrokeStylePreview, SwatchbookContext, SwatchbookProvider, TOKENS_UPDATED_EVENT, ThemeContext, TokenDetail, TokenHeader, TokenNavigator, TokenTable, TokenUsageSnippet, TypographyScale, formatColor, onChannel, registerChannel, registerTokenSource, useActiveAxes, useActiveTheme, useChannelGlobals, useColorFormat, useOptionalSwatchbookData, useSwatchbookData, useTokenSnapshot };
 
 //# sourceMappingURL=index.mjs.map