@unpunnyfuns/swatchbook-blocks 0.2.2 → 0.4.0

package/dist/index.mjs

@@ -1,8 +1,10 @@
+import './style.css';
 import Color from "colorjs.io";
 import { createContext, useCallback, useContext, useEffect, useMemo, useState, useSyncExternalStore } from "react";
-import { addons } from "storybook/preview-api";
-import { axes, css, cssVarPrefix, defaultTheme, themes, themesResolved } from "virtual:swatchbook/tokens";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { addons } from "storybook/preview-api";
+import { axes, css, cssVarPrefix, defaultTheme, diagnostics, themes, themesResolved } from "virtual:swatchbook/tokens";
+import cx from "clsx";
 //#region src/format-color.ts
 const COLOR_FORMATS = [
 	"hex",
@@ -178,59 +180,22 @@ function stringifyFallback(value, fallback) {
 	return fallback;
 }
 //#endregion
-//#region src/internal/data-attr.ts
-/**
-* Produce a prefixed `data-*` attribute name when `prefix` is set, bare
-* `data-<key>` otherwise. Mirrors `dataAttr` in `@unpunnyfuns/swatchbook-core`
-* so block wrappers and emitted-CSS selectors stay in lockstep without
-* blocks taking a runtime dep on core.
-*/
-function dataAttr(prefix, key) {
-	return prefix ? `data-${prefix}-${key}` : `data-${key}`;
-}
+//#region src/internal/styles.tsx
+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))`;
 /**
-* Spread helper for the common `<div data-<prefix>-theme="…">` block
-* wrapper. Returns an object keyed on the prefixed attribute name so the
-* call site stays readable: `<div {...themeAttrs(prefix, theme)} />`.
+* Inner content for a block's "nothing to render" state. Call sites wrap
+* it in their own block wrapper (which already carries `themeAttrs`), so
+* the message itself just needs the muted type.
 */
-function themeAttrs(prefix, themeName) {
-	return { [dataAttr(prefix, "theme")]: themeName };
-}
-/**
-* Vars block chrome reads by literal `var(--sb-*)` regardless of what the
-* project's actual `cssVarPrefix` is. Keeping the literal spelling means we
-* only need to alias these few names on each block wrapper; the bulk of
-* block styling stays untouched.
-*/
-const CHROME_VARS = [
-	"color-sys-border-default",
-	"color-sys-surface-default",
-	"color-sys-surface-muted",
-	"color-sys-surface-raised",
-	"color-sys-text-default",
-	"color-sys-text-muted",
-	"color-sys-accent-bg",
-	"color-sys-accent-fg",
-	"typography-sys-body-font-family",
-	"typography-sys-body-font-size"
-];
-/**
-* CSS custom-property aliases that redirect the block chrome's `var(--sb-*)`
-* reads to the project's actual `cssVarPrefix`. Block components spread the
-* return into their wrapper's inline `style`, so the aliases cascade down
-* into every nested block / sample / token-detail piece without each one
-* re-reading the prefix.
-*
-* When `prefix === 'sb'` the aliases are self-references — we skip emission
-* to keep the inline style shorter. When `prefix === ''` (opt-out) the
-* aliases point at the bare `var(--color-sys-…)` names core emitted.
-*/
-function chromeAliases(prefix) {
-	if (prefix === "sb") return {};
-	const out = {};
-	const head = prefix ? `${prefix}-` : "";
-	for (const name of CHROME_VARS) out[`--sb-${name}`] = `var(--${head}${name})`;
-	return out;
+function EmptyState({ children }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "sb-block__empty",
+		children
+	});
 }
 //#endregion
 //#region src/internal/channel-globals.ts
@@ -397,6 +362,7 @@ function snapshotToData(snapshot) {
 		themes: snapshot.themes,
 		themesResolved: snapshot.themesResolved,
 		resolved: snapshot.themesResolved[snapshot.activeTheme] ?? {},
+		diagnostics: snapshot.diagnostics,
 		cssVarPrefix: snapshot.cssVarPrefix
 	};
 }
@@ -437,6 +403,7 @@ function useVirtualModuleFallback(enabled) {
 		themes,
 		themesResolved,
 		resolved: themesResolved[activeTheme] ?? {},
+		diagnostics,
 		cssVarPrefix
 	};
 }
@@ -469,23 +436,12 @@ function globMatch(path, glob) {
 	if (glob.endsWith("**")) return path.startsWith(glob.slice(0, -2));
 	return path === glob || path.startsWith(`${glob}.`);
 }
-function formatValue(value) {
-	if (value == null) return "";
-	if (typeof value === "string" || typeof value === "number") return String(value);
-	if (typeof value === "object") {
-		const v = value;
-		if (typeof v["hex"] === "string") return v["hex"];
-		if ("value" in v && "unit" in v) return `${String(v["value"])}${String(v["unit"])}`;
-		return JSON.stringify(value).slice(0, 120);
-	}
-	return String(value);
-}
 //#endregion
 //#region src/border-preview/BorderSample.tsx
 const sampleStyle$1 = {
 	width: 120,
 	height: 56,
-	background: "var(--sb-color-sys-surface-raised, transparent)",
+	background: SURFACE_RAISED,
 	borderRadius: 6
 };
 function BorderSample({ path }) {
@@ -493,7 +449,6 @@ function BorderSample({ path }) {
 	const cssVar = makeCssVar(path, cssVarPrefix);
 	return /* @__PURE__ */ jsx("div", {
 		style: {
-			...chromeAliases(cssVarPrefix),
 			...sampleStyle$1,
 			border: cssVar
 		},
@@ -501,76 +456,156 @@ function BorderSample({ path }) {
 	});
 }
 //#endregion
-//#region src/internal/styles.ts
-const MONO_STACK = "ui-monospace, SFMono-Regular, Menlo, monospace";
-const BORDER_DEFAULT = "1px solid var(--sb-color-sys-border-default, rgba(128,128,128,0.2))";
-const BORDER_FAINT = "1px solid var(--sb-color-sys-border-default, rgba(128,128,128,0.15))";
-const surfaceStyle = {
-	fontFamily: "var(--sb-typography-sys-body-font-family, system-ui)",
-	fontSize: "var(--sb-typography-sys-body-font-size, 14px)",
-	color: "var(--sb-color-sys-text-default, CanvasText)",
-	background: "var(--sb-color-sys-surface-default, Canvas)",
-	padding: 12,
-	borderRadius: 6
-};
-const captionStyle = {
-	padding: "4px 0 12px",
-	opacity: .7,
-	fontSize: 12
-};
-const emptyStyle = {
-	padding: "24px 12px",
-	textAlign: "center",
-	opacity: .6
-};
+//#region src/internal/data-attr.ts
+/**
+* Produce a prefixed `data-*` attribute name when `prefix` is set, bare
+* `data-<key>` otherwise. Mirrors `dataAttr` in `@unpunnyfuns/swatchbook-core`
+* so block wrappers and emitted-CSS selectors stay in lockstep without
+* blocks taking a runtime dep on core.
+*/
+function dataAttr(prefix, key) {
+	return prefix ? `data-${prefix}-${key}` : `data-${key}`;
+}
+/**
+* Marker attribute set on every block wrapper. Retained as a stable hook
+* for consumer-side selectors (e.g. when a host app wants to target or
+* override block chrome without relying on hashed class names).
+*/
+const BLOCK_ATTR = "data-swatchbook-block";
+/**
+* Opt-out class that Storybook's `.sbdocs` stylesheet uses to self-exclude
+* on MDX docs pages — every `.sbdocs` house rule is wrapped in
+* `:not(.sb-unstyled, .sb-unstyled *)`, so any descendant of a `.sb-unstyled`
+* container is left alone. Stamped onto every block wrapper so blocks
+* render identically in MDX docs and regular stories without fighting
+* cascade specificity.
+*/
+const WRAPPER_CLASSES = "sb-unstyled sb-block";
+/**
+* Spread helper for the common block wrapper. Returns:
+* - `data-<prefix>-theme="<composed theme name>"` — so theme-keyed CSS
+*   emitted by `@unpunnyfuns/swatchbook-core` resolves against this
+*   subtree.
+* - `data-swatchbook-block` — stable consumer hook for targeting block
+*   chrome from outside.
+* - `className="sb-unstyled sb-block"` — Storybook's opt-out class so
+*   MDX docs house styles self-exclude the subtree, plus `sb-block`
+*   which carries the shared chrome from `internal/styles.css`.
+*/
+function themeAttrs(prefix, themeName) {
+	return {
+		[dataAttr(prefix, "theme")]: themeName,
+		[BLOCK_ATTR]: "",
+		className: WRAPPER_CLASSES
+	};
+}
+//#endregion
+//#region src/internal/sort-tokens.ts
+/**
+* Stable sort for a filtered `[path, token][]` list.
+*
+* `sortBy: 'path'` — lexicographic on the dot-path (locale-aware, numeric).
+* `sortBy: 'value'` — per-`$type` ordering:
+*   - `dimension` / `duration` → numeric pixels / ms (via `toMagnitude`).
+*   - `fontWeight` / `opacity` / `number` / `lineHeight` → numeric.
+*   - `color` → perceptual by oklch L → C → H.
+*   - `fontFamily` / `strokeStyle` (string form) → lexicographic.
+*   - Composites (`typography`, `shadow`, `border`, `gradient`, `transition`) →
+*     fall back to path-alpha. No useful single-axis order.
+* `sortBy: 'none'` — preserve input order (still respects `sortDir: 'desc'`
+*   as a reverse).
+*/
+function sortTokens(entries, options = {}) {
+	const by = options.by ?? "path";
+	const dir = options.dir ?? "asc";
+	const sign = dir === "desc" ? -1 : 1;
+	if (by === "none") return dir === "desc" ? [...entries].toReversed() : [...entries];
+	if (by === "path") return [...entries].toSorted(([a], [b]) => sign * a.localeCompare(b, void 0, { numeric: true }));
+	return [...entries].toSorted(([aPath, aTok], [bPath, bTok]) => {
+		const cmp = compareValue(aTok, bTok);
+		if (cmp !== 0) return sign * cmp;
+		return sign * aPath.localeCompare(bPath, void 0, { numeric: true });
+	});
+}
+function compareValue(a, b) {
+	const type = a.$type;
+	if (type !== b.$type) return String(type ?? "").localeCompare(String(b.$type ?? ""));
+	if (!type) return 0;
+	if (type === "dimension" || type === "duration" || type === "fontWeight" || type === "opacity" || type === "number" || type === "lineHeight") {
+		const av = toMagnitude(a.$value);
+		const bv = toMagnitude(b.$value);
+		if (Number.isFinite(av) && Number.isFinite(bv)) return av - bv;
+		if (Number.isFinite(av)) return -1;
+		if (Number.isFinite(bv)) return 1;
+		return 0;
+	}
+	if (type === "color") {
+		const ak = colorKey(a.$value);
+		const bk = colorKey(b.$value);
+		if (!ak && !bk) return 0;
+		if (!ak) return 1;
+		if (!bk) return -1;
+		if (ak.l !== bk.l) return ak.l - bk.l;
+		if (ak.c !== bk.c) return ak.c - bk.c;
+		return ak.h - bk.h;
+	}
+	if (type === "fontFamily" || type === "strokeStyle") {
+		const as = toDisplayable(a.$value);
+		const bs = toDisplayable(b.$value);
+		return as.localeCompare(bs, void 0, { numeric: true });
+	}
+	return 0;
+}
+function toMagnitude(v) {
+	if (typeof v === "number") return v;
+	if (v && typeof v === "object") {
+		const d = v;
+		if (typeof d.value !== "number") return NaN;
+		if (typeof d.unit !== "string") return d.value;
+		switch (d.unit) {
+			case "px":
+			case "ms": return d.value;
+			case "s": return d.value * 1e3;
+			case "rem":
+			case "em": return d.value * 16;
+			default: return d.value;
+		}
+	}
+	return NaN;
+}
+function colorKey(v) {
+	if (!v || typeof v !== "object") return null;
+	try {
+		const c = v;
+		let source;
+		if (typeof c.hex === "string") source = c.hex;
+		else if (typeof c.colorSpace === "string") {
+			const channels = Array.isArray(c.components) ? c.components : Array.isArray(c.channels) ? c.channels : void 0;
+			if (!channels) return null;
+			source = {
+				space: c.colorSpace,
+				coords: channels
+			};
+		} else return null;
+		const [l, chroma, h] = new Color(source).to("oklch").coords;
+		return {
+			l: Number.isFinite(l) ? l : 0,
+			c: Number.isFinite(chroma) ? chroma : 0,
+			h: Number.isFinite(h) ? h : 0
+		};
+	} catch {
+		return null;
+	}
+}
+function toDisplayable(v) {
+	if (typeof v === "string") return v;
+	if (Array.isArray(v)) return v.map(String).join(", ");
+	if (v && typeof v === "object") return JSON.stringify(v);
+	return String(v ?? "");
+}
 //#endregion
 //#region src/BorderPreview.tsx
-const styles$14 = {
-	wrapper: surfaceStyle,
-	caption: captionStyle,
-	empty: emptyStyle,
-	row: {
-		display: "grid",
-		gridTemplateColumns: "minmax(160px, 220px) 140px 1fr",
-		gap: 16,
-		alignItems: "center",
-		padding: "14px 0",
-		borderBottom: BORDER_DEFAULT
-	},
-	meta: {
-		display: "flex",
-		flexDirection: "column",
-		gap: 2,
-		minWidth: 0
-	},
-	path: {
-		fontFamily: MONO_STACK,
-		fontSize: 12,
-		overflow: "hidden",
-		textOverflow: "ellipsis",
-		whiteSpace: "nowrap"
-	},
-	cssVar: {
-		fontFamily: MONO_STACK,
-		fontSize: 11,
-		opacity: .7
-	},
-	sampleCell: {
-		display: "flex",
-		alignItems: "center",
-		justifyContent: "center"
-	},
-	breakdown: {
-		fontFamily: MONO_STACK,
-		fontSize: 11,
-		display: "grid",
-		gridTemplateColumns: "auto 1fr",
-		columnGap: 12,
-		rowGap: 2
-	},
-	breakdownKey: { color: "var(--sb-color-sys-text-muted, CanvasText)" }
-};
-function formatDimension$1(raw) {
+function formatDimension$2(raw) {
 	if (raw == null) return "—";
 	if (typeof raw === "number") return String(raw);
 	if (typeof raw === "string") return raw;
@@ -593,79 +628,72 @@ function formatColor$2(raw) {
 	}
 	return JSON.stringify(raw);
 }
-function BorderPreview({ filter = "border", caption }) {
+function BorderPreview({ filter, caption, sortBy = "path", sortDir = "asc" }) {
 	const { resolved, activeTheme, cssVarPrefix } = useProject();
 	const rows = useMemo(() => {
-		const collected = [];
-		for (const [path, token] of Object.entries(resolved)) {
-			if (token.$type !== "border") continue;
-			if (!globMatch(path, filter)) continue;
-			collected.push({
-				path,
-				cssVar: makeCssVar(path, cssVarPrefix),
-				value: token.$value ?? {}
-			});
-		}
-		collected.sort((a, b) => a.path.localeCompare(b.path, void 0, { numeric: true }));
-		return collected;
+		return sortTokens(Object.entries(resolved).filter(([path, token]) => {
+			if (token.$type !== "border") return false;
+			return globMatch(path, filter);
+		}), {
+			by: sortBy,
+			dir: sortDir
+		}).map(([path, token]) => ({
+			path,
+			cssVar: makeCssVar(path, cssVarPrefix),
+			value: token.$value ?? {}
+		}));
 	}, [
 		resolved,
 		filter,
-		cssVarPrefix
+		cssVarPrefix,
+		sortBy,
+		sortDir
 	]);
 	const captionText = caption ?? `${rows.length} border${rows.length === 1 ? "" : "s"}${filter ? ` matching \`${filter}\`` : ""} · ${activeTheme}`;
 	if (rows.length === 0) return /* @__PURE__ */ jsx("div", {
 		...themeAttrs(cssVarPrefix, activeTheme),
-		style: {
-			...chromeAliases(cssVarPrefix),
-			...styles$14.wrapper
-		},
 		children: /* @__PURE__ */ jsx("div", {
-			style: styles$14.empty,
+			className: "sb-block__empty",
 			children: "No border tokens match this filter."
 		})
 	});
 	return /* @__PURE__ */ jsxs("div", {
 		...themeAttrs(cssVarPrefix, activeTheme),
-		style: {
-			...chromeAliases(cssVarPrefix),
-			...styles$14.wrapper
-		},
 		children: [/* @__PURE__ */ jsx("div", {
-			style: styles$14.caption,
+			className: "sb-block__caption",
 			children: captionText
 		}), rows.map((row) => /* @__PURE__ */ jsxs("div", {
-			style: styles$14.row,
+			className: "sb-border-preview__row",
 			children: [
 				/* @__PURE__ */ jsxs("div", {
-					style: styles$14.meta,
+					className: "sb-border-preview__meta",
 					children: [/* @__PURE__ */ jsx("span", {
-						style: styles$14.path,
+						className: "sb-border-preview__path",
 						children: row.path
 					}), /* @__PURE__ */ jsx("span", {
-						style: styles$14.cssVar,
+						className: "sb-border-preview__css-var",
 						children: row.cssVar
 					})]
 				}),
 				/* @__PURE__ */ jsx("div", {
-					style: styles$14.sampleCell,
+					className: "sb-border-preview__sample-cell",
 					children: /* @__PURE__ */ jsx(BorderSample, { path: row.path })
 				}),
 				/* @__PURE__ */ jsxs("div", {
-					style: styles$14.breakdown,
+					className: "sb-border-preview__breakdown",
 					children: [
 						/* @__PURE__ */ jsx("span", {
-							style: styles$14.breakdownKey,
+							className: "sb-border-preview__breakdown-key",
 							children: "width"
 						}),
-						/* @__PURE__ */ jsx("span", { children: formatDimension$1(row.value.width) }),
+						/* @__PURE__ */ jsx("span", { children: formatDimension$2(row.value.width) }),
 						/* @__PURE__ */ jsx("span", {
-							style: styles$14.breakdownKey,
+							className: "sb-border-preview__breakdown-key",
 							children: "style"
 						}),
 						/* @__PURE__ */ jsx("span", { children: row.value.style != null ? String(row.value.style) : "—" }),
 						/* @__PURE__ */ jsx("span", {
-							style: styles$14.breakdownKey,
+							className: "sb-border-preview__breakdown-key",
 							children: "color"
 						}),
 						/* @__PURE__ */ jsx("span", { children: formatColor$2(row.value.color) })
@@ -677,57 +705,9 @@ function BorderPreview({ filter = "border", caption }) {
 }
 //#endregion
 //#region src/ColorPalette.tsx
-const styles$13 = {
-	wrapper: surfaceStyle,
-	caption: captionStyle,
-	empty: emptyStyle,
-	group: { marginBottom: 20 },
-	groupHeader: {
-		fontFamily: MONO_STACK,
-		fontSize: 11,
-		textTransform: "uppercase",
-		letterSpacing: .5,
-		opacity: .6,
-		marginBottom: 8
-	},
-	grid: {
-		display: "grid",
-		gridTemplateColumns: "repeat(auto-fill, minmax(120px, 1fr))",
-		gap: 8
-	},
-	card: {
-		border: BORDER_DEFAULT,
-		borderRadius: 6,
-		overflow: "hidden",
-		display: "flex",
-		flexDirection: "column"
-	},
-	swatch: {
-		height: 56,
-		width: "100%",
-		borderBottom: "1px solid var(--sb-color-sys-border-default, rgba(0,0,0,0.08))"
-	},
-	meta: {
-		padding: "8px 10px",
-		display: "flex",
-		flexDirection: "column",
-		gap: 2
-	},
-	leaf: {
-		fontFamily: MONO_STACK,
-		fontSize: 12
-	},
-	value: {
-		fontFamily: MONO_STACK,
-		fontSize: 11,
-		opacity: .7
-	}
-};
 /**
 * Count segments in the filter before the first glob (`*` / `**`).
 * `color.ref.*` → 2; `color.sys.surface.*` → 3; `color` → 1; undefined → 0.
-*
-* @internal Exported for tests; not part of the public API.
 */
 function fixedPrefixLength(filter) {
 	if (!filter) return 0;
@@ -739,22 +719,18 @@ function fixedPrefixLength(filter) {
 	}
 	return fixed;
 }
-function ColorPalette({ filter = "color", groupBy, caption }) {
+function ColorPalette({ filter, groupBy, caption, sortBy = "path", sortDir = "asc" }) {
 	const { resolved, activeTheme, cssVarPrefix } = useProject();
 	const colorFormat = useColorFormat();
 	const groups = useMemo(() => {
-		const entries = Object.entries(resolved).filter(([path, token]) => {
+		const entries = sortTokens(Object.entries(resolved).filter(([path, token]) => {
 			if (token.$type !== "color") return false;
 			return globMatch(path, filter);
-		}).toSorted(([a], [b]) => a.localeCompare(b, void 0, { numeric: true }));
+		}), {
+			by: sortBy,
+			dir: sortDir
+		});
 		const maxDepth = entries.reduce((m, [p]) => Math.max(m, p.split(".").length), 0);
-		/**
-		* Auto-derive: group one level below the filter's fixed prefix, but
-		* clamp so each swatch retains at least one leaf segment. A filter
-		* like `color.ref.blue.*` (fixed length 3) with only 4-segment tokens
-		* would try groupBy=4 → one-per-group; clamp to `maxDepth - 1` so the
-		* whole ramp lands in one group with each shade as a leaf.
-		*/
 		const effectiveGroupBy = groupBy ?? Math.min(fixedPrefixLength(filter) + 1, Math.max(maxDepth - 1, 1));
 		const bucket = /* @__PURE__ */ new Map();
 		for (const [path, token] of entries) {
@@ -778,56 +754,48 @@ function ColorPalette({ filter = "color", groupBy, caption }) {
 		filter,
 		groupBy,
 		cssVarPrefix,
-		colorFormat
+		colorFormat,
+		sortBy,
+		sortDir
 	]);
 	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", {
 		...themeAttrs(cssVarPrefix, activeTheme),
-		style: {
-			...chromeAliases(cssVarPrefix),
-			...styles$13.wrapper
-		},
 		children: /* @__PURE__ */ jsx("div", {
-			style: styles$13.empty,
+			className: "sb-block__empty",
 			children: "No color tokens match this filter."
 		})
 	});
 	return /* @__PURE__ */ jsxs("div", {
 		...themeAttrs(cssVarPrefix, activeTheme),
-		style: {
-			...chromeAliases(cssVarPrefix),
-			...styles$13.wrapper
-		},
 		children: [/* @__PURE__ */ jsx("div", {
-			style: styles$13.caption,
+			className: "sb-block__caption",
 			children: captionText
 		}), groups.map(([group, swatches]) => /* @__PURE__ */ jsxs("section", {
-			style: styles$13.group,
+			className: "sb-color-palette__group",
 			children: [/* @__PURE__ */ jsx("div", {
-				style: styles$13.groupHeader,
+				className: "sb-color-palette__group-header",
 				children: group
 			}), /* @__PURE__ */ jsx("div", {
-				style: styles$13.grid,
+				className: "sb-color-palette__grid",
 				children: swatches.map((swatch) => /* @__PURE__ */ jsxs("div", {
-					style: styles$13.card,
+					className: "sb-color-palette__card",
 					children: [/* @__PURE__ */ jsx("div", {
-						style: {
-							...styles$13.swatch,
-							background: swatch.cssVar
-						},
+						className: "sb-color-palette__swatch",
+						style: { background: swatch.cssVar },
 						"aria-hidden": true
 					}), /* @__PURE__ */ jsxs("div", {
-						style: styles$13.meta,
+						className: "sb-color-palette__meta",
 						children: [/* @__PURE__ */ jsx("span", {
-							style: styles$13.leaf,
+							className: "sb-color-palette__leaf",
 							children: swatch.leaf
 						}), /* @__PURE__ */ jsxs("span", {
-							style: styles$13.value,
+							className: "sb-color-palette__value",
 							children: [swatch.value, swatch.outOfGamut && /* @__PURE__ */ jsxs("span", {
 								title: "Out of sRGB gamut for this format",
 								"aria-label": "out of gamut",
-								style: { marginLeft: 4 },
+								className: "sb-color-palette__gamut-warn",
 								children: [" ", "⚠"]
 							})]
 						})]
@@ -838,24 +806,97 @@ function ColorPalette({ filter = "color", groupBy, caption }) {
 	});
 }
 //#endregion
+//#region src/Diagnostics.tsx
+const severityLabel = {
+	error: "ERROR",
+	warn: "WARN",
+	info: "INFO"
+};
+function summaryText(diagnostics) {
+	if (diagnostics.length === 0) return "✔ OK · no diagnostics";
+	const counts = {
+		error: 0,
+		warn: 0,
+		info: 0
+	};
+	for (const d of diagnostics) counts[d.severity] += 1;
+	const parts = [];
+	if (counts.error > 0) parts.push(`✖ ${counts.error} error${counts.error === 1 ? "" : "s"}`);
+	if (counts.warn > 0) parts.push(`⚠ ${counts.warn} warning${counts.warn === 1 ? "" : "s"}`);
+	if (counts.info > 0) parts.push(`${counts.info} info`);
+	return parts.join(" · ");
+}
+function diagnosticKey(d, i) {
+	return `${d.severity}:${d.group}:${d.filename ?? ""}:${d.line ?? ""}:${d.message}:${i}`;
+}
+function summaryVariant(diagnostics) {
+	if (diagnostics.length === 0) return "ok";
+	if (diagnostics.some((d) => d.severity === "error")) return "error";
+	if (diagnostics.some((d) => d.severity === "warn")) return "warn";
+	return null;
+}
+/**
+* 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 { activeTheme, cssVarPrefix, diagnostics } = useProject();
+	const hasErrorsOrWarnings = diagnostics.some((d) => d.severity === "error" || d.severity === "warn");
+	const headingText = caption ?? `Diagnostics · ${summaryText(diagnostics)}`;
+	const variant = summaryVariant(diagnostics);
+	return /* @__PURE__ */ jsx("div", {
+		...themeAttrs(cssVarPrefix, activeTheme),
+		"data-testid": "diagnostics",
+		children: /* @__PURE__ */ jsxs("details", {
+			open: hasErrorsOrWarnings,
+			children: [/* @__PURE__ */ jsx("summary", {
+				className: cx("sb-diagnostics__summary", variant && `sb-diagnostics__summary--${variant}`),
+				children: headingText
+			}), diagnostics.length > 0 && /* @__PURE__ */ jsx("ul", {
+				className: "sb-diagnostics__list",
+				children: diagnostics.map((d, i) => /* @__PURE__ */ jsxs("li", {
+					className: "sb-diagnostics__row",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: cx("sb-diagnostics__label", { [`sb-diagnostics__label--${d.severity}`]: d.severity !== "info" }),
+						children: severityLabel[d.severity]
+					}), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("div", { children: d.message }), (d.group || d.filename) && /* @__PURE__ */ jsx("div", {
+						className: "sb-diagnostics__meta",
+						children: [
+							d.group,
+							d.filename,
+							d.line ? `:${d.line}` : ""
+						].filter(Boolean).join(" · ")
+					})] })]
+				}, diagnosticKey(d, i)))
+			})]
+		})
+	});
+}
+//#endregion
 //#region src/dimension-scale/DimensionBar.tsx
 const MAX_RENDER_PX$1 = 480;
-const styles$12 = {
+const styles$1 = {
 	bar: {
 		height: 14,
-		background: "var(--sb-color-sys-accent-bg, #3b82f6)",
+		background: "var(--swatchbook-accent-bg, #3b82f6)",
 		borderRadius: 2,
 		minWidth: 1
 	},
 	radiusSample: {
 		width: 56,
 		height: 56,
-		background: "var(--sb-color-sys-accent-bg, #3b82f6)",
-		border: "1px solid var(--sb-color-sys-border-default, rgba(128,128,128,0.3))"
+		background: "var(--swatchbook-accent-bg, #3b82f6)",
+		border: BORDER_STRONG
 	},
 	sizeSample: {
-		background: "var(--sb-color-sys-accent-bg, #3b82f6)",
-		border: "1px solid var(--sb-color-sys-border-default, rgba(128,128,128,0.3))",
+		background: "var(--swatchbook-accent-bg, #3b82f6)",
+		border: BORDER_STRONG,
 		minWidth: 1,
 		minHeight: 1
 	}
@@ -883,20 +924,17 @@ function DimensionBar({ path, kind = "length" }) {
 	const token = resolved[path];
 	const pxValue = toPixels$1(token?.$value);
 	const cappedValue = Number.isFinite(pxValue) && pxValue > MAX_RENDER_PX$1 ? `${MAX_RENDER_PX$1}px` : cssVar;
-	const aliases = chromeAliases(cssVarPrefix);
 	switch (kind) {
 		case "radius": return /* @__PURE__ */ jsx("div", {
 			style: {
-				...aliases,
-				...styles$12.radiusSample,
+				...styles$1.radiusSample,
 				borderRadius: cssVar
 			},
 			"aria-hidden": true
 		});
 		case "size": return /* @__PURE__ */ jsx("div", {
 			style: {
-				...aliases,
-				...styles$12.sizeSample,
+				...styles$1.sizeSample,
 				width: cappedValue,
 				height: cappedValue
 			},
@@ -904,8 +942,7 @@ function DimensionBar({ path, kind = "length" }) {
 		});
 		default: return /* @__PURE__ */ jsx("div", {
 			style: {
-				...aliases,
-				...styles$12.bar,
+				...styles$1.bar,
 				width: cappedValue
 			},
 			"aria-hidden": true
@@ -913,60 +950,150 @@ function DimensionBar({ path, kind = "length" }) {
 	}
 }
 //#endregion
-//#region src/DimensionScale.tsx
-const MAX_RENDER_PX = 480;
-const styles$11 = {
-	wrapper: surfaceStyle,
-	caption: captionStyle,
-	empty: emptyStyle,
-	row: {
-		display: "grid",
-		gridTemplateColumns: "minmax(160px, 220px) 1fr auto",
-		gap: 16,
-		alignItems: "center",
-		padding: "10px 0",
-		borderBottom: BORDER_DEFAULT
-	},
-	meta: {
-		display: "flex",
-		flexDirection: "column",
-		gap: 2,
-		minWidth: 0
-	},
-	path: {
-		fontFamily: MONO_STACK,
-		fontSize: 12,
-		overflow: "hidden",
-		textOverflow: "ellipsis",
-		whiteSpace: "nowrap"
-	},
-	specs: {
-		fontFamily: MONO_STACK,
-		fontSize: 11,
-		opacity: .7
-	},
-	visualCell: {
-		display: "flex",
-		alignItems: "center",
-		minWidth: 0
-	},
-	cssVar: {
-		fontFamily: MONO_STACK,
-		fontSize: 11,
-		opacity: .7,
-		whiteSpace: "nowrap"
-	},
-	cap: {
-		fontFamily: MONO_STACK,
-		fontSize: 10,
-		opacity: .6,
-		marginLeft: 6
-	}
-};
+//#region src/internal/format-token-value.ts
 /**
-* Convert a DTCG dimension `$value` (`{ value, unit }`) to pixels for the
-* purpose of ordering and deciding whether to show a cap indicator.
+* Produce a single-line display string for any DTCG token `$value`,
+* respecting the active color format for color-typed tokens and the
+* color sub-values of composite types (border, shadow, gradient).
+*
+* Replaces the old `formatValue` one-shot that hex-short-circuited
+* colors and fell through to raw JSON for known composites.
+*
+* Shape by type:
+* - `color`              → `formatColor(value, colorFormat)` — e.g. `#3b82f6`, `oklch(...)`, `raw` JSON.
+* - `dimension|duration` → `value + unit` — e.g. `16px`, `200ms`.
+* - `fontFamily`         → string or array joined with `, `.
+* - `fontWeight`         → primitive.
+* - `cubicBezier`        → `cubic-bezier(a, b, c, d)`.
+* - `strokeStyle`        → primitive string, or `dashed · dashArray · lineCap` when it's the object shape.
+* - `shadow`             → one or more `offsetX offsetY blur spread color` layers joined with `, `.
+* - `border`             → `width style color`.
+* - `transition`         → `duration easing [delay]`.
+* - `typography`         → `family / size / line-height / weight`.
+* - `gradient`           → `stops joined with →` — compact representation, not a CSS gradient string (those live in GradientPalette's preview).
+*
+* Unknown object shapes fall through to truncated JSON.
 */
+function formatTokenValue(value, $type, colorFormat) {
+	if (value == null) return "";
+	if (typeof value === "string" || typeof value === "number" || typeof value === "boolean") return String(value);
+	switch ($type) {
+		case "color": return formatColor(value, colorFormat).value;
+		case "dimension":
+		case "duration": return formatDimension$1(value);
+		case "fontFamily": return formatFontFamily$1(value);
+		case "fontWeight":
+		case "lineHeight":
+		case "letterSpacing":
+		case "opacity":
+		case "number": return formatPrimitive$1(value);
+		case "cubicBezier": return formatCubicBezier(value);
+		case "strokeStyle": return formatStrokeStyle(value);
+		case "shadow": return formatShadow(value, colorFormat);
+		case "border": return formatBorder(value, colorFormat);
+		case "transition": return formatTransition(value);
+		case "typography": return formatTypography(value);
+		case "gradient": return formatGradient(value, colorFormat);
+		default: return formatUnknown(value);
+	}
+}
+function formatDimension$1(v) {
+	if (typeof v === "string" || typeof v === "number") return String(v);
+	if (v && typeof v === "object") {
+		const d = v;
+		if (typeof d.value === "number" && typeof d.unit === "string") return `${d.value}${d.unit}`;
+	}
+	return formatUnknown(v);
+}
+function formatFontFamily$1(v) {
+	if (typeof v === "string") return v;
+	if (Array.isArray(v)) return v.map(String).join(", ");
+	return formatUnknown(v);
+}
+function formatPrimitive$1(v) {
+	if (typeof v === "string" || typeof v === "number" || typeof v === "boolean") return String(v);
+	return formatUnknown(v);
+}
+function formatCubicBezier(v) {
+	if (Array.isArray(v) && v.length === 4) return `cubic-bezier(${v.map((n) => typeof n === "number" ? n : 0).join(", ")})`;
+	return formatUnknown(v);
+}
+function formatStrokeStyle(v) {
+	if (typeof v === "string") return v;
+	if (v && typeof v === "object") {
+		const s = v;
+		const parts = ["dashed"];
+		if (Array.isArray(s.dashArray)) parts.push(s.dashArray.map((n) => formatDimension$1(n)).join(" "));
+		if (typeof s.lineCap === "string") parts.push(s.lineCap);
+		return parts.join(" · ");
+	}
+	return formatUnknown(v);
+}
+function formatShadow(v, colorFormat) {
+	return (Array.isArray(v) ? v : [v]).map((layer) => {
+		if (!layer || typeof layer !== "object") return formatUnknown(layer);
+		const s = layer;
+		const pieces = [
+			formatDimension$1(s["offsetX"]),
+			formatDimension$1(s["offsetY"]),
+			formatDimension$1(s["blur"]),
+			formatDimension$1(s["spread"]),
+			formatColor(s["color"], colorFormat).value
+		].filter((p) => p !== "");
+		if (s["inset"]) pieces.push("inset");
+		return pieces.join(" ");
+	}).join(", ");
+}
+function formatBorder(v, colorFormat) {
+	if (!v || typeof v !== "object") return formatUnknown(v);
+	const b = v;
+	return [
+		formatDimension$1(b["width"]),
+		formatPrimitive$1(b["style"]),
+		formatColor(b["color"], colorFormat).value
+	].filter((p) => p !== "").join(" ");
+}
+function formatTransition(v) {
+	if (!v || typeof v !== "object") return formatUnknown(v);
+	const t = v;
+	const duration = formatDimension$1(t["duration"]);
+	const easing = formatPrimitive$1(t["timingFunction"]);
+	const delay = formatDimension$1(t["delay"]);
+	const parts = [duration, easing];
+	if (!/^0\D/.test(delay) && delay !== "") parts.push(delay);
+	return parts.filter((p) => p !== "").join(" ");
+}
+function formatTypography(v) {
+	if (!v || typeof v !== "object") return formatUnknown(v);
+	const t = v;
+	return [
+		formatFontFamily$1(t["fontFamily"]),
+		formatDimension$1(t["fontSize"]),
+		formatPrimitive$1(t["lineHeight"]),
+		formatPrimitive$1(t["fontWeight"])
+	].filter((p) => p !== "").join(" / ");
+}
+function formatGradient(v, colorFormat) {
+	if (!Array.isArray(v) || v.length === 0) return formatUnknown(v);
+	return v.map((stop) => {
+		if (!stop || typeof stop !== "object") return formatUnknown(stop);
+		const s = stop;
+		const position = typeof s["position"] === "number" ? `${Math.round(s["position"] * 100)}%` : "?";
+		return `${formatColor(s["color"], colorFormat).value} ${position}`;
+	}).join(" → ");
+}
+function formatUnknown(v) {
+	if (v == null) return "";
+	if (typeof v === "string" || typeof v === "number" || typeof v === "boolean") return String(v);
+	try {
+		return JSON.stringify(v).slice(0, 120);
+	} catch {
+		return String(v);
+	}
+}
+//#endregion
+//#region src/DimensionScale.tsx
+const MAX_RENDER_PX = 480;
 function toPixels(raw) {
 	if (raw == null || typeof raw !== "object") return NaN;
 	const v = raw;
@@ -978,73 +1105,65 @@ function toPixels(raw) {
 		default: return NaN;
 	}
 }
-function DimensionScale({ filter = "dimension", kind = "length", caption }) {
+function DimensionScale({ filter, kind = "length", caption, sortBy = "value", sortDir = "asc" }) {
 	const { resolved, activeTheme, cssVarPrefix } = useProject();
 	const rows = useMemo(() => {
-		const collected = [];
-		for (const [path, token] of Object.entries(resolved)) {
-			if (token.$type !== "dimension") continue;
-			if (!globMatch(path, filter)) continue;
+		return sortTokens(Object.entries(resolved).filter(([path, token]) => {
+			if (token.$type !== "dimension") return false;
+			return globMatch(path, filter);
+		}), {
+			by: sortBy,
+			dir: sortDir
+		}).map(([path, token]) => {
 			const pxValue = toPixels(token.$value);
-			collected.push({
+			return {
 				path,
 				cssVar: makeCssVar(path, cssVarPrefix),
-				displayValue: formatValue(token.$value),
+				displayValue: formatTokenValue(token.$value, token.$type, "raw"),
 				pxValue,
 				capped: Number.isFinite(pxValue) && pxValue > MAX_RENDER_PX
-			});
-		}
-		collected.sort((a, b) => {
-			if (Number.isFinite(a.pxValue) && Number.isFinite(b.pxValue)) return a.pxValue - b.pxValue;
-			return a.path.localeCompare(b.path, void 0, { numeric: true });
+			};
 		});
-		return collected;
 	}, [
 		resolved,
 		filter,
-		cssVarPrefix
+		cssVarPrefix,
+		sortBy,
+		sortDir
 	]);
 	const captionText = caption ?? `${rows.length} dimension${rows.length === 1 ? "" : "s"}${filter ? ` matching \`${filter}\`` : ""} · ${activeTheme}`;
 	if (rows.length === 0) return /* @__PURE__ */ jsx("div", {
 		...themeAttrs(cssVarPrefix, activeTheme),
-		style: {
-			...chromeAliases(cssVarPrefix),
-			...styles$11.wrapper
-		},
 		children: /* @__PURE__ */ jsx("div", {
-			style: styles$11.empty,
+			className: "sb-block__empty",
 			children: "No dimension tokens match this filter."
 		})
 	});
 	return /* @__PURE__ */ jsxs("div", {
 		...themeAttrs(cssVarPrefix, activeTheme),
-		style: {
-			...chromeAliases(cssVarPrefix),
-			...styles$11.wrapper
-		},
 		children: [/* @__PURE__ */ jsx("div", {
-			style: styles$11.caption,
+			className: "sb-block__caption",
 			children: captionText
 		}), rows.map((row) => /* @__PURE__ */ jsxs("div", {
-			style: styles$11.row,
+			className: "sb-dimension-scale__row",
 			children: [
 				/* @__PURE__ */ jsxs("div", {
-					style: styles$11.meta,
+					className: "sb-dimension-scale__meta",
 					children: [/* @__PURE__ */ jsx("span", {
-						style: styles$11.path,
+						className: "sb-dimension-scale__path",
 						children: row.path
 					}), /* @__PURE__ */ jsx("span", {
-						style: styles$11.specs,
+						className: "sb-dimension-scale__specs",
 						children: row.displayValue
 					})]
 				}),
 				/* @__PURE__ */ jsxs("div", {
-					style: styles$11.visualCell,
+					className: "sb-dimension-scale__visual-cell",
 					children: [/* @__PURE__ */ jsx(DimensionBar, {
 						path: row.path,
 						kind
 					}), row.capped && /* @__PURE__ */ jsxs("span", {
-						style: styles$11.cap,
+						className: "sb-dimension-scale__cap",
 						children: [
 							"capped at ",
 							MAX_RENDER_PX,
@@ -1053,7 +1172,7 @@ function DimensionScale({ filter = "dimension", kind = "length", caption }) {
 					})]
 				}),
 				/* @__PURE__ */ jsx("span", {
-					style: styles$11.cssVar,
+					className: "sb-dimension-scale__css-var",
 					children: row.cssVar
 				})
 			]
@@ -1062,58 +1181,21 @@ function DimensionScale({ filter = "dimension", kind = "length", caption }) {
 }
 //#endregion
 //#region src/FontFamilySample.tsx
-const styles$10 = {
-	wrapper: surfaceStyle,
-	caption: captionStyle,
-	row: {
-		display: "grid",
-		gridTemplateColumns: "minmax(160px, 220px) 1fr auto",
-		gap: 16,
-		alignItems: "baseline",
-		padding: "14px 0",
-		borderBottom: BORDER_DEFAULT
-	},
-	meta: {
-		display: "flex",
-		flexDirection: "column",
-		gap: 2,
-		minWidth: 0
-	},
-	path: {
-		fontFamily: MONO_STACK,
-		fontSize: 12,
-		overflow: "hidden",
-		textOverflow: "ellipsis",
-		whiteSpace: "nowrap"
-	},
-	stack: {
-		fontFamily: MONO_STACK,
-		fontSize: 11,
-		color: "var(--sb-color-sys-text-muted, CanvasText)"
-	},
-	sample: {
-		fontSize: 22,
-		lineHeight: 1.2
-	},
-	cssVar: {
-		fontFamily: MONO_STACK,
-		fontSize: 11,
-		color: "var(--sb-color-sys-text-muted, CanvasText)"
-	},
-	empty: emptyStyle
-};
 function stackString(raw) {
 	if (typeof raw === "string") return raw;
 	if (Array.isArray(raw)) return raw.map(String).join(", ");
 	return "";
 }
-function FontFamilySample({ filter = "fontFamily", sample = "The quick brown fox jumps over the lazy dog.", caption }) {
+function FontFamilySample({ filter, sample = "The quick brown fox jumps over the lazy dog.", caption, sortBy = "path", sortDir = "asc" }) {
 	const { resolved, activeTheme, cssVarPrefix } = useProject();
 	const rows = useMemo(() => {
-		return Object.entries(resolved).filter(([path, token]) => {
+		return sortTokens(Object.entries(resolved).filter(([path, token]) => {
 			if (token.$type !== "fontFamily") return false;
 			return globMatch(path, filter);
-		}).toSorted(([a], [b]) => a.localeCompare(b, void 0, { numeric: true })).map(([path, token]) => ({
+		}), {
+			by: sortBy,
+			dir: sortDir
+		}).map(([path, token]) => ({
 			path,
 			cssVar: makeCssVar(path, cssVarPrefix),
 			stack: stackString(token.$value)
@@ -1121,51 +1203,43 @@ function FontFamilySample({ filter = "fontFamily", sample = "The quick brown fox
 	}, [
 		resolved,
 		filter,
-		cssVarPrefix
+		cssVarPrefix,
+		sortBy,
+		sortDir
 	]);
 	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", {
 		...themeAttrs(cssVarPrefix, activeTheme),
-		style: {
-			...chromeAliases(cssVarPrefix),
-			...styles$10.wrapper
-		},
 		children: /* @__PURE__ */ jsx("div", {
-			style: styles$10.empty,
+			className: "sb-block__empty",
 			children: "No fontFamily tokens match this filter."
 		})
 	});
 	return /* @__PURE__ */ jsxs("div", {
 		...themeAttrs(cssVarPrefix, activeTheme),
-		style: {
-			...chromeAliases(cssVarPrefix),
-			...styles$10.wrapper
-		},
 		children: [/* @__PURE__ */ jsx("div", {
-			style: styles$10.caption,
+			className: "sb-block__caption",
 			children: captionText
 		}), rows.map((row) => /* @__PURE__ */ jsxs("div", {
-			style: styles$10.row,
+			className: "sb-font-family-sample__row",
 			children: [
 				/* @__PURE__ */ jsxs("div", {
-					style: styles$10.meta,
+					className: "sb-font-family-sample__meta",
 					children: [/* @__PURE__ */ jsx("span", {
-						style: styles$10.path,
+						className: "sb-font-family-sample__path",
 						children: row.path
 					}), /* @__PURE__ */ jsx("span", {
-						style: styles$10.stack,
+						className: "sb-font-family-sample__stack",
 						children: row.stack
 					})]
 				}),
 				/* @__PURE__ */ jsx("div", {
-					style: {
-						...styles$10.sample,
-						fontFamily: row.cssVar
-					},
+					className: "sb-font-family-sample__sample",
+					style: { fontFamily: row.cssVar },
 					children: sample
 				}),
 				/* @__PURE__ */ jsx("span", {
-					style: styles$10.cssVar,
+					className: "sb-font-family-sample__css-var",
 					children: row.cssVar
 				})
 			]
@@ -1174,46 +1248,6 @@ function FontFamilySample({ filter = "fontFamily", sample = "The quick brown fox
 }
 //#endregion
 //#region src/FontWeightScale.tsx
-const styles$9 = {
-	wrapper: surfaceStyle,
-	caption: captionStyle,
-	empty: emptyStyle,
-	row: {
-		display: "grid",
-		gridTemplateColumns: "minmax(160px, 220px) 1fr auto",
-		gap: 16,
-		alignItems: "baseline",
-		padding: "12px 0",
-		borderBottom: BORDER_DEFAULT
-	},
-	meta: {
-		display: "flex",
-		flexDirection: "column",
-		gap: 2,
-		minWidth: 0
-	},
-	path: {
-		fontFamily: MONO_STACK,
-		fontSize: 12,
-		overflow: "hidden",
-		textOverflow: "ellipsis",
-		whiteSpace: "nowrap"
-	},
-	value: {
-		fontFamily: MONO_STACK,
-		fontSize: 11,
-		color: "var(--sb-color-sys-text-muted, CanvasText)"
-	},
-	sample: {
-		fontSize: 28,
-		lineHeight: 1
-	},
-	cssVar: {
-		fontFamily: MONO_STACK,
-		fontSize: 11,
-		color: "var(--sb-color-sys-text-muted, CanvasText)"
-	}
-};
 function toWeight(raw) {
 	if (typeof raw === "number") return raw;
 	if (typeof raw === "string") {
@@ -1222,73 +1256,61 @@ function toWeight(raw) {
 	}
 	return NaN;
 }
-function FontWeightScale({ filter = "fontWeight", sample = "Aa", caption }) {
+function FontWeightScale({ filter, sample = "Aa", caption, sortBy = "value", sortDir = "asc" }) {
 	const { resolved, activeTheme, cssVarPrefix } = useProject();
 	const rows = useMemo(() => {
-		const collected = [];
-		for (const [path, token] of Object.entries(resolved)) {
-			if (token.$type !== "fontWeight") continue;
-			if (!globMatch(path, filter)) continue;
-			collected.push({
-				path,
-				cssVar: makeCssVar(path, cssVarPrefix),
-				display: token.$value == null ? "" : String(token.$value),
-				weight: toWeight(token.$value)
-			});
-		}
-		collected.sort((a, b) => {
-			if (Number.isFinite(a.weight) && Number.isFinite(b.weight)) return a.weight - b.weight;
-			return a.path.localeCompare(b.path, void 0, { numeric: true });
-		});
-		return collected;
+		return sortTokens(Object.entries(resolved).filter(([path, token]) => {
+			if (token.$type !== "fontWeight") return false;
+			return globMatch(path, filter);
+		}), {
+			by: sortBy,
+			dir: sortDir
+		}).map(([path, token]) => ({
+			path,
+			cssVar: makeCssVar(path, cssVarPrefix),
+			display: token.$value == null ? "" : String(token.$value),
+			weight: toWeight(token.$value)
+		}));
 	}, [
 		resolved,
 		filter,
-		cssVarPrefix
+		cssVarPrefix,
+		sortBy,
+		sortDir
 	]);
 	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", {
 		...themeAttrs(cssVarPrefix, activeTheme),
-		style: {
-			...chromeAliases(cssVarPrefix),
-			...styles$9.wrapper
-		},
 		children: /* @__PURE__ */ jsx("div", {
-			style: styles$9.empty,
+			className: "sb-block__empty",
 			children: "No fontWeight tokens match this filter."
 		})
 	});
 	return /* @__PURE__ */ jsxs("div", {
 		...themeAttrs(cssVarPrefix, activeTheme),
-		style: {
-			...chromeAliases(cssVarPrefix),
-			...styles$9.wrapper
-		},
 		children: [/* @__PURE__ */ jsx("div", {
-			style: styles$9.caption,
+			className: "sb-block__caption",
 			children: captionText
 		}), rows.map((row) => /* @__PURE__ */ jsxs("div", {
-			style: styles$9.row,
+			className: "sb-font-weight-scale__row",
 			children: [
 				/* @__PURE__ */ jsxs("div", {
-					style: styles$9.meta,
+					className: "sb-font-weight-scale__meta",
 					children: [/* @__PURE__ */ jsx("span", {
-						style: styles$9.path,
+						className: "sb-font-weight-scale__path",
 						children: row.path
 					}), /* @__PURE__ */ jsx("span", {
-						style: styles$9.value,
+						className: "sb-font-weight-scale__value",
 						children: row.display
 					})]
 				}),
 				/* @__PURE__ */ jsx("div", {
-					style: {
-						...styles$9.sample,
-						fontWeight: row.cssVar
-					},
+					className: "sb-font-weight-scale__sample",
+					style: { fontWeight: row.cssVar },
 					children: sample
 				}),
 				/* @__PURE__ */ jsx("span", {
-					style: styles$9.cssVar,
+					className: "sb-font-weight-scale__css-var",
 					children: row.cssVar
 				})
 			]
@@ -1297,62 +1319,6 @@ function FontWeightScale({ filter = "fontWeight", sample = "Aa", caption }) {
 }
 //#endregion
 //#region src/GradientPalette.tsx
-const styles$8 = {
-	wrapper: surfaceStyle,
-	caption: captionStyle,
-	empty: emptyStyle,
-	row: {
-		display: "grid",
-		gridTemplateColumns: "minmax(180px, 240px) 1fr minmax(140px, 220px)",
-		gap: 16,
-		alignItems: "center",
-		padding: "16px 0",
-		borderBottom: BORDER_DEFAULT
-	},
-	meta: {
-		display: "flex",
-		flexDirection: "column",
-		gap: 2,
-		minWidth: 0
-	},
-	path: {
-		fontFamily: MONO_STACK,
-		fontSize: 12,
-		overflow: "hidden",
-		textOverflow: "ellipsis",
-		whiteSpace: "nowrap"
-	},
-	cssVar: {
-		fontFamily: MONO_STACK,
-		fontSize: 11,
-		opacity: .7
-	},
-	sample: {
-		height: 56,
-		borderRadius: 6,
-		border: BORDER_FAINT
-	},
-	stops: {
-		fontFamily: MONO_STACK,
-		fontSize: 11,
-		display: "flex",
-		flexDirection: "column",
-		gap: 2
-	},
-	stopRow: {
-		display: "flex",
-		alignItems: "center",
-		gap: 8
-	},
-	stopSwatch: {
-		width: 10,
-		height: 10,
-		borderRadius: 2,
-		border: "1px solid var(--sb-color-sys-border-default, rgba(0,0,0,0.1))",
-		flex: "0 0 auto"
-	},
-	stopPosition: { opacity: .6 }
-};
 function asStops(raw) {
 	if (!Array.isArray(raw)) return [];
 	return raw;
@@ -1369,82 +1335,71 @@ function stopCssColor(stop) {
 function stopKey(path, stop, fallback) {
 	return `${path}|${stop.position ?? fallback}|${stopCssColor(stop)}`;
 }
-function GradientPalette({ filter = "gradient", caption }) {
+function GradientPalette({ filter, caption, sortBy = "path", sortDir = "asc" }) {
 	const { resolved, activeTheme, cssVarPrefix } = useProject();
 	const rows = useMemo(() => {
-		const collected = [];
-		for (const [path, token] of Object.entries(resolved)) {
-			if (token.$type !== "gradient") continue;
-			if (!globMatch(path, filter)) continue;
-			collected.push({
-				path,
-				cssVar: makeCssVar(path, cssVarPrefix),
-				stops: asStops(token.$value)
-			});
-		}
-		collected.sort((a, b) => a.path.localeCompare(b.path, void 0, { numeric: true }));
-		return collected;
+		return sortTokens(Object.entries(resolved).filter(([path, token]) => {
+			if (token.$type !== "gradient") return false;
+			return globMatch(path, filter);
+		}), {
+			by: sortBy,
+			dir: sortDir
+		}).map(([path, token]) => ({
+			path,
+			cssVar: makeCssVar(path, cssVarPrefix),
+			stops: asStops(token.$value)
+		}));
 	}, [
 		resolved,
 		filter,
-		cssVarPrefix
+		cssVarPrefix,
+		sortBy,
+		sortDir
 	]);
 	const captionText = caption ?? `${rows.length} gradient${rows.length === 1 ? "" : "s"}${filter ? ` matching \`${filter}\`` : ""} · ${activeTheme}`;
 	if (rows.length === 0) return /* @__PURE__ */ jsx("div", {
 		...themeAttrs(cssVarPrefix, activeTheme),
-		style: {
-			...chromeAliases(cssVarPrefix),
-			...styles$8.wrapper
-		},
 		children: /* @__PURE__ */ jsx("div", {
-			style: styles$8.empty,
+			className: "sb-block__empty",
 			children: "No gradient tokens match this filter."
 		})
 	});
 	return /* @__PURE__ */ jsxs("div", {
 		...themeAttrs(cssVarPrefix, activeTheme),
-		style: {
-			...chromeAliases(cssVarPrefix),
-			...styles$8.wrapper
-		},
 		children: [/* @__PURE__ */ jsx("div", {
-			style: styles$8.caption,
+			className: "sb-block__caption",
 			children: captionText
 		}), rows.map((row) => /* @__PURE__ */ jsxs("div", {
-			style: styles$8.row,
+			className: "sb-gradient-palette__row",
 			children: [
 				/* @__PURE__ */ jsxs("div", {
-					style: styles$8.meta,
+					className: "sb-gradient-palette__meta",
 					children: [/* @__PURE__ */ jsx("span", {
-						style: styles$8.path,
+						className: "sb-gradient-palette__path",
 						children: row.path
 					}), /* @__PURE__ */ jsx("span", {
-						style: styles$8.cssVar,
+						className: "sb-gradient-palette__css-var",
 						children: row.cssVar
 					})]
 				}),
 				/* @__PURE__ */ jsx("div", {
-					style: {
-						...styles$8.sample,
-						background: `linear-gradient(to right, ${row.cssVar})`
-					},
+					className: "sb-gradient-palette__sample",
+					style: { background: `linear-gradient(to right, ${row.cssVar})` },
 					"aria-hidden": true
 				}),
 				/* @__PURE__ */ jsx("div", {
-					style: styles$8.stops,
+					className: "sb-gradient-palette__stops",
 					children: row.stops.map((stop, i) => /* @__PURE__ */ jsxs("div", {
-						style: styles$8.stopRow,
+						className: "sb-gradient-palette__stop-row",
 						children: [
 							/* @__PURE__ */ jsx("span", {
-								style: {
-									...styles$8.stopSwatch,
-									background: stopCssColor(stop)
-								},
+								className: "sb-gradient-palette__stop-swatch",
+								style: { background: stopCssColor(stop) },
 								"aria-hidden": true
 							}),
 							/* @__PURE__ */ jsx("span", { children: stopCssColor(stop) }),
 							/* @__PURE__ */ jsxs("span", {
-								style: styles$8.stopPosition,
+								className: "sb-gradient-palette__stop-position",
 								children: [
 									"@ ",
 									((stop.position ?? 0) * 100).toFixed(0),
@@ -1480,11 +1435,11 @@ 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$7 = {
+const styles = {
 	track: {
 		position: "relative",
 		height: 36,
-		background: "var(--sb-color-sys-surface-muted, rgba(128,128,128,0.08))",
+		background: SURFACE_MUTED,
 		borderRadius: 18,
 		overflow: "hidden"
 	},
@@ -1495,11 +1450,11 @@ const styles$7 = {
 		height: 28,
 		marginTop: -14,
 		borderRadius: "50%",
-		background: "var(--sb-color-sys-accent-bg, #3b82f6)"
+		background: "var(--swatchbook-accent-bg, #3b82f6)"
 	},
 	reducedMotion: {
 		fontSize: 11,
-		color: "var(--sb-color-sys-text-muted, CanvasText)",
+		color: TEXT_MUTED,
 		fontStyle: "italic"
 	}
 };
@@ -1573,7 +1528,7 @@ function resolveMotionSpec(token, themeTokens) {
 	return null;
 }
 function MotionSample({ path, speed = 1, runKey = 0 }) {
-	const { resolved, cssVarPrefix } = useProject();
+	const { resolved } = useProject();
 	const reducedMotion = usePrefersReducedMotion();
 	const spec = useMemo(() => resolveMotionSpec(resolved[path], resolved), [resolved, path]);
 	const durationMs = spec?.durationMs ?? DEFAULT_DURATION_MS;
@@ -1597,20 +1552,14 @@ function MotionSample({ path, speed = 1, runKey = 0 }) {
 		reducedMotion
 	]);
 	if (reducedMotion) return /* @__PURE__ */ jsx("div", {
-		style: {
-			...chromeAliases(cssVarPrefix),
-			...styles$7.reducedMotion
-		},
+		style: styles.reducedMotion,
 		children: "Animation suppressed by `prefers-reduced-motion: reduce`."
 	});
 	return /* @__PURE__ */ jsx("div", {
-		style: {
-			...chromeAliases(cssVarPrefix),
-			...styles$7.track
-		},
+		style: styles.track,
 		children: /* @__PURE__ */ jsx("div", {
 			style: {
-				...styles$7.ball,
+				...styles.ball,
 				left: phase === 1 ? "calc(100% - 32px)" : "4px",
 				transition: `left ${scaledDuration}ms ${easing}`
 			},
@@ -1626,88 +1575,6 @@ const SPEEDS = [
 	1,
 	2
 ];
-const styles$6 = {
-	wrapper: surfaceStyle,
-	caption: {
-		padding: "4px 0 4px",
-		color: "var(--sb-color-sys-text-muted, CanvasText)",
-		fontSize: 12
-	},
-	controls: {
-		display: "flex",
-		alignItems: "center",
-		gap: 8,
-		padding: "8px 0 12px"
-	},
-	controlLabel: {
-		fontSize: 11,
-		color: "var(--sb-color-sys-text-muted, CanvasText)",
-		textTransform: "uppercase",
-		letterSpacing: .5
-	},
-	speedBtn: {
-		fontFamily: MONO_STACK,
-		fontSize: 11,
-		padding: "4px 8px",
-		background: "transparent",
-		color: "inherit",
-		border: "1px solid var(--sb-color-sys-border-default, rgba(128,128,128,0.3))",
-		borderRadius: 4,
-		cursor: "pointer"
-	},
-	speedBtnActive: {
-		background: "var(--sb-color-sys-accent-bg, #3b82f6)",
-		color: "var(--sb-color-sys-accent-fg, #fff)",
-		borderColor: "transparent"
-	},
-	replayBtn: {
-		fontSize: 11,
-		padding: "4px 10px",
-		marginLeft: "auto",
-		background: "transparent",
-		color: "inherit",
-		border: "1px solid var(--sb-color-sys-border-default, rgba(128,128,128,0.3))",
-		borderRadius: 4,
-		cursor: "pointer"
-	},
-	row: {
-		display: "grid",
-		gridTemplateColumns: "minmax(180px, 240px) 1fr auto",
-		gap: 16,
-		alignItems: "center",
-		padding: "14px 0",
-		borderBottom: BORDER_DEFAULT
-	},
-	meta: {
-		display: "flex",
-		flexDirection: "column",
-		gap: 2,
-		minWidth: 0
-	},
-	path: {
-		fontFamily: MONO_STACK,
-		fontSize: 12,
-		overflow: "hidden",
-		textOverflow: "ellipsis",
-		whiteSpace: "nowrap"
-	},
-	specs: {
-		fontFamily: MONO_STACK,
-		fontSize: 11,
-		color: "var(--sb-color-sys-text-muted, CanvasText)"
-	},
-	cssVar: {
-		fontFamily: MONO_STACK,
-		fontSize: 11,
-		color: "var(--sb-color-sys-text-muted, CanvasText)",
-		whiteSpace: "nowrap"
-	},
-	empty: {
-		padding: "24px 12px",
-		textAlign: "center",
-		color: "var(--sb-color-sys-text-muted, CanvasText)"
-	}
-};
 function formatSpec(row) {
 	switch (row.kind) {
 		case "transition": return `transition · ${Math.round(row.durationMs)}ms · ${row.easing}`;
@@ -1754,45 +1621,34 @@ function MotionPreview({ filter, caption }) {
 	const captionText = caption ?? `${rows.length} motion token${rows.length === 1 ? "" : "s"}${filter ? ` matching \`${filter}\`` : ""} · ${activeTheme}`;
 	if (rows.length === 0) return /* @__PURE__ */ jsx("div", {
 		...themeAttrs(cssVarPrefix, activeTheme),
-		style: {
-			...chromeAliases(cssVarPrefix),
-			...styles$6.wrapper
-		},
 		children: /* @__PURE__ */ jsx("div", {
-			style: styles$6.empty,
+			className: "sb-block__empty",
 			children: "No motion tokens match this filter."
 		})
 	});
 	return /* @__PURE__ */ jsxs("div", {
 		...themeAttrs(cssVarPrefix, activeTheme),
-		style: {
-			...chromeAliases(cssVarPrefix),
-			...styles$6.wrapper
-		},
 		children: [
 			/* @__PURE__ */ jsx("div", {
-				style: styles$6.caption,
+				className: "sb-block__caption",
 				children: captionText
 			}),
 			/* @__PURE__ */ jsxs("div", {
-				style: styles$6.controls,
+				className: "sb-motion-preview__controls",
 				children: [
 					/* @__PURE__ */ jsx("span", {
-						style: styles$6.controlLabel,
+						className: "sb-motion-preview__control-label",
 						children: "Speed"
 					}),
 					SPEEDS.map((s) => /* @__PURE__ */ jsxs("button", {
 						type: "button",
-						style: {
-							...styles$6.speedBtn,
-							...s === speed ? styles$6.speedBtnActive : {}
-						},
+						className: cx("sb-motion-preview__speed-btn", { "sb-motion-preview__speed-btn--active": s === speed }),
 						onClick: () => setSpeed(s),
 						children: [s, "×"]
 					}, s)),
 					/* @__PURE__ */ jsx("button", {
 						type: "button",
-						style: styles$6.replayBtn,
+						className: "sb-motion-preview__replay-btn",
 						onClick: () => setRun((n) => n + 1),
 						disabled: reducedMotion,
 						title: reducedMotion ? "Disabled by prefers-reduced-motion" : "Replay all",
@@ -1801,15 +1657,15 @@ function MotionPreview({ filter, caption }) {
 				]
 			}),
 			rows.map((row) => /* @__PURE__ */ jsxs("div", {
-				style: styles$6.row,
+				className: "sb-motion-preview__row",
 				children: [
 					/* @__PURE__ */ jsxs("div", {
-						style: styles$6.meta,
+						className: "sb-motion-preview__meta",
 						children: [/* @__PURE__ */ jsx("span", {
-							style: styles$6.path,
+							className: "sb-motion-preview__path",
 							children: row.path
 						}), /* @__PURE__ */ jsx("span", {
-							style: styles$6.specs,
+							className: "sb-motion-preview__specs",
 							children: formatSpec(row)
 						})]
 					}),
@@ -1819,7 +1675,7 @@ function MotionPreview({ filter, caption }) {
 						runKey: run
 					}),
 					/* @__PURE__ */ jsx("span", {
-						style: styles$6.cssVar,
+						className: "sb-motion-preview__css-var",
 						children: row.cssVar
 					})
 				]
@@ -1859,8 +1715,8 @@ function useSwatchbookData() {
 const sampleStyle = {
 	width: 120,
 	height: 56,
-	background: "var(--sb-color-sys-surface-raised, #fff)",
-	border: "1px solid var(--sb-color-sys-border-default, rgba(128,128,128,0.15))",
+	background: SURFACE_RAISED,
+	border: BORDER_FAINT,
 	borderRadius: 6
 };
 function ShadowSample({ path }) {
@@ -1868,7 +1724,6 @@ function ShadowSample({ path }) {
 	const cssVar = makeCssVar(path, cssVarPrefix);
 	return /* @__PURE__ */ jsx("div", {
 		style: {
-			...chromeAliases(cssVarPrefix),
 			...sampleStyle,
 			boxShadow: cssVar
 		},
@@ -1877,59 +1732,6 @@ function ShadowSample({ path }) {
 }
 //#endregion
 //#region src/ShadowPreview.tsx
-const styles$5 = {
-	wrapper: surfaceStyle,
-	caption: captionStyle,
-	empty: emptyStyle,
-	row: {
-		display: "grid",
-		gridTemplateColumns: "minmax(160px, 220px) 140px 1fr",
-		gap: 16,
-		alignItems: "center",
-		padding: "16px 0",
-		borderBottom: BORDER_DEFAULT
-	},
-	meta: {
-		display: "flex",
-		flexDirection: "column",
-		gap: 2,
-		minWidth: 0
-	},
-	path: {
-		fontFamily: MONO_STACK,
-		fontSize: 12,
-		overflow: "hidden",
-		textOverflow: "ellipsis",
-		whiteSpace: "nowrap"
-	},
-	cssVar: {
-		fontFamily: MONO_STACK,
-		fontSize: 11,
-		opacity: .7
-	},
-	sampleCell: {
-		display: "flex",
-		alignItems: "center",
-		justifyContent: "center",
-		height: 96
-	},
-	breakdown: {
-		fontFamily: MONO_STACK,
-		fontSize: 11,
-		display: "grid",
-		gridTemplateColumns: "auto 1fr",
-		columnGap: 12,
-		rowGap: 2
-	},
-	breakdownKey: { color: "var(--sb-color-sys-text-muted, CanvasText)" },
-	layerHeader: {
-		fontSize: 10,
-		textTransform: "uppercase",
-		letterSpacing: .5,
-		color: "var(--sb-color-sys-text-muted, CanvasText)",
-		marginTop: 6
-	}
-};
 function formatDimension(raw) {
 	if (raw == null) return "—";
 	if (typeof raw === "number") return String(raw);
@@ -1961,66 +1763,59 @@ function asLayers(raw) {
 function layerKey(path, layer, fallback) {
 	return `${path}|${`${formatDimension(layer.offsetX)},${formatDimension(layer.offsetY)}`}|${formatDimension(layer.blur)}|${formatDimension(layer.spread)}|${fallback}`;
 }
-function ShadowPreview({ filter = "shadow", caption }) {
+function ShadowPreview({ filter, caption, sortBy = "path", sortDir = "asc" }) {
 	const { resolved, activeTheme, cssVarPrefix } = useProject();
 	const rows = useMemo(() => {
-		const collected = [];
-		for (const [path, token] of Object.entries(resolved)) {
-			if (token.$type !== "shadow") continue;
-			if (!globMatch(path, filter)) continue;
-			collected.push({
-				path,
-				cssVar: makeCssVar(path, cssVarPrefix),
-				layers: asLayers(token.$value)
-			});
-		}
-		collected.sort((a, b) => a.path.localeCompare(b.path, void 0, { numeric: true }));
-		return collected;
+		return sortTokens(Object.entries(resolved).filter(([path, token]) => {
+			if (token.$type !== "shadow") return false;
+			return globMatch(path, filter);
+		}), {
+			by: sortBy,
+			dir: sortDir
+		}).map(([path, token]) => ({
+			path,
+			cssVar: makeCssVar(path, cssVarPrefix),
+			layers: asLayers(token.$value)
+		}));
 	}, [
 		resolved,
 		filter,
-		cssVarPrefix
+		cssVarPrefix,
+		sortBy,
+		sortDir
 	]);
 	const captionText = caption ?? `${rows.length} shadow${rows.length === 1 ? "" : "s"}${filter ? ` matching \`${filter}\`` : ""} · ${activeTheme}`;
 	if (rows.length === 0) return /* @__PURE__ */ jsx("div", {
 		...themeAttrs(cssVarPrefix, activeTheme),
-		style: {
-			...chromeAliases(cssVarPrefix),
-			...styles$5.wrapper
-		},
 		children: /* @__PURE__ */ jsx("div", {
-			style: styles$5.empty,
+			className: "sb-block__empty",
 			children: "No shadow tokens match this filter."
 		})
 	});
 	return /* @__PURE__ */ jsxs("div", {
 		...themeAttrs(cssVarPrefix, activeTheme),
-		style: {
-			...chromeAliases(cssVarPrefix),
-			...styles$5.wrapper
-		},
 		children: [/* @__PURE__ */ jsx("div", {
-			style: styles$5.caption,
+			className: "sb-block__caption",
 			children: captionText
 		}), rows.map((row) => /* @__PURE__ */ jsxs("div", {
-			style: styles$5.row,
+			className: "sb-shadow-preview__row",
 			children: [
 				/* @__PURE__ */ jsxs("div", {
-					style: styles$5.meta,
+					className: "sb-shadow-preview__meta",
 					children: [/* @__PURE__ */ jsx("span", {
-						style: styles$5.path,
+						className: "sb-shadow-preview__path",
 						children: row.path
 					}), /* @__PURE__ */ jsx("span", {
-						style: styles$5.cssVar,
+						className: "sb-shadow-preview__css-var",
 						children: row.cssVar
 					})]
 				}),
 				/* @__PURE__ */ jsx("div", {
-					style: styles$5.sampleCell,
+					className: "sb-shadow-preview__sample-cell",
 					children: /* @__PURE__ */ jsx(ShadowSample, { path: row.path })
 				}),
 				/* @__PURE__ */ jsx("div", {
-					style: styles$5.breakdown,
+					className: "sb-shadow-preview__breakdown",
 					children: row.layers.length === 1 ? renderLayer(row.layers[0]) : row.layers.map((layer, i) => /* @__PURE__ */ jsx(Layer, {
 						layer,
 						index: i,
@@ -2041,15 +1836,15 @@ function renderLayer(layer) {
 	];
 	if (layer.inset) entries.push(["inset", String(layer.inset)]);
 	return entries.flatMap(([k, v]) => [/* @__PURE__ */ jsx("span", {
-		style: styles$5.breakdownKey,
+		className: "sb-shadow-preview__breakdown-key",
 		children: k
 	}, `k-${k}`), /* @__PURE__ */ jsx("span", { children: v }, `v-${k}`)]);
 }
 function Layer({ layer, index, total }) {
 	return /* @__PURE__ */ jsxs("div", {
-		style: { gridColumn: "1 / -1" },
+		className: "sb-shadow-preview__layer",
 		children: [/* @__PURE__ */ jsxs("div", {
-			style: styles$5.layerHeader,
+			className: "sb-shadow-preview__layer-header",
 			children: [
 				"layer ",
 				index + 1,
@@ -2057,10 +1852,7 @@ function Layer({ layer, index, total }) {
 				total
 			]
 		}), /* @__PURE__ */ jsx("div", {
-			style: {
-				...styles$5.breakdown,
-				marginTop: 2
-			},
+			className: cx("sb-shadow-preview__breakdown", "sb-shadow-preview__layer-breakdown"),
 			children: renderLayer(layer)
 		})]
 	});
@@ -2077,120 +1869,68 @@ const STRING_STYLES = new Set([
 	"outset",
 	"inset"
 ]);
-const styles$4 = {
-	wrapper: surfaceStyle,
-	caption: captionStyle,
-	empty: emptyStyle,
-	row: {
-		display: "grid",
-		gridTemplateColumns: "minmax(160px, 220px) 1fr auto",
-		gap: 16,
-		alignItems: "center",
-		padding: "14px 0",
-		borderBottom: BORDER_DEFAULT
-	},
-	meta: {
-		display: "flex",
-		flexDirection: "column",
-		gap: 2,
-		minWidth: 0
-	},
-	path: {
-		fontFamily: MONO_STACK,
-		fontSize: 12,
-		overflow: "hidden",
-		textOverflow: "ellipsis",
-		whiteSpace: "nowrap"
-	},
-	value: {
-		fontFamily: MONO_STACK,
-		fontSize: 11,
-		color: "var(--sb-color-sys-text-muted, CanvasText)"
-	},
-	line: {
-		height: 0,
-		borderTopWidth: 4,
-		borderTopColor: "var(--sb-color-sys-text-default, CanvasText)",
-		width: "100%"
-	},
-	objectFallback: {
-		fontFamily: MONO_STACK,
-		fontSize: 11,
-		color: "var(--sb-color-sys-text-muted, CanvasText)"
-	},
-	cssVar: {
-		fontFamily: MONO_STACK,
-		fontSize: 11,
-		color: "var(--sb-color-sys-text-muted, CanvasText)"
-	}
-};
 function extractCssStyle(value) {
 	if (typeof value === "string" && STRING_STYLES.has(value)) return value;
 	return null;
 }
-function StrokeStyleSample({ filter = "strokeStyle", caption }) {
+function StrokeStyleSample({ filter, caption, sortBy = "path", sortDir = "asc" }) {
 	const { resolved, activeTheme, cssVarPrefix } = useProject();
 	const rows = useMemo(() => {
-		return Object.entries(resolved).filter(([path, token]) => {
+		return sortTokens(Object.entries(resolved).filter(([path, token]) => {
 			if (token.$type !== "strokeStyle") return false;
 			return globMatch(path, filter);
-		}).toSorted(([a], [b]) => a.localeCompare(b, void 0, { numeric: true })).map(([path, token]) => ({
+		}), {
+			by: sortBy,
+			dir: sortDir
+		}).map(([path, token]) => ({
 			path,
 			cssVar: makeCssVar(path, cssVarPrefix),
-			displayValue: formatValue(token.$value),
+			displayValue: formatTokenValue(token.$value, token.$type, "raw"),
 			cssStyle: extractCssStyle(token.$value)
 		}));
 	}, [
 		resolved,
 		filter,
-		cssVarPrefix
+		cssVarPrefix,
+		sortBy,
+		sortDir
 	]);
 	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", {
 		...themeAttrs(cssVarPrefix, activeTheme),
-		style: {
-			...chromeAliases(cssVarPrefix),
-			...styles$4.wrapper
-		},
 		children: /* @__PURE__ */ jsx("div", {
-			style: styles$4.empty,
+			className: "sb-block__empty",
 			children: "No strokeStyle tokens match this filter."
 		})
 	});
 	return /* @__PURE__ */ jsxs("div", {
-		...themeAttrs(cssVarPrefix, activeTheme),
-		style: {
-			...chromeAliases(cssVarPrefix),
-			...styles$4.wrapper
-		},
+		...themeAttrs(cssVarPrefix, activeTheme),
 		children: [/* @__PURE__ */ jsx("div", {
-			style: styles$4.caption,
+			className: "sb-block__caption",
 			children: captionText
 		}), rows.map((row) => /* @__PURE__ */ jsxs("div", {
-			style: styles$4.row,
+			className: "sb-stroke-style-sample__row",
 			children: [
 				/* @__PURE__ */ jsxs("div", {
-					style: styles$4.meta,
+					className: "sb-stroke-style-sample__meta",
 					children: [/* @__PURE__ */ jsx("span", {
-						style: styles$4.path,
+						className: "sb-stroke-style-sample__path",
 						children: row.path
 					}), /* @__PURE__ */ jsx("span", {
-						style: styles$4.value,
+						className: "sb-stroke-style-sample__value",
 						children: row.displayValue
 					})]
 				}),
 				row.cssStyle ? /* @__PURE__ */ jsx("div", {
-					style: {
-						...styles$4.line,
-						borderTopStyle: row.cssStyle
-					},
+					className: "sb-stroke-style-sample__line",
+					style: { borderTopStyle: row.cssStyle },
 					"aria-hidden": true
 				}) : /* @__PURE__ */ jsx("span", {
-					style: styles$4.objectFallback,
+					className: "sb-stroke-style-sample__object-fallback",
 					children: "Object-form (dashArray + lineCap) — no pure CSS `border-style` equivalent."
 				}),
 				/* @__PURE__ */ jsx("span", {
-					style: styles$4.cssVar,
+					className: "sb-stroke-style-sample__css-var",
 					children: row.cssVar
 				})
 			]
@@ -2198,275 +1938,6 @@ function StrokeStyleSample({ filter = "strokeStyle", caption }) {
 	});
 }
 //#endregion
-//#region src/token-detail/styles.ts
-const styles$3 = {
-	wrapper: {
-		...surfaceStyle,
-		padding: 16,
-		border: BORDER_DEFAULT
-	},
-	heading: {
-		margin: 0,
-		fontFamily: MONO_STACK,
-		fontSize: 16
-	},
-	subline: {
-		display: "flex",
-		alignItems: "center",
-		gap: 8,
-		margin: "4px 0 12px",
-		fontSize: 12,
-		opacity: .8
-	},
-	typePill: {
-		display: "inline-block",
-		padding: "2px 6px",
-		borderRadius: 4,
-		fontSize: 10,
-		letterSpacing: .5,
-		textTransform: "uppercase",
-		background: "var(--sb-color-sys-surface-muted, rgba(128,128,128,0.15))"
-	},
-	description: {
-		margin: "0 0 12px",
-		opacity: .85
-	},
-	sectionHeader: {
-		fontFamily: MONO_STACK,
-		fontSize: 11,
-		textTransform: "uppercase",
-		letterSpacing: .5,
-		opacity: .6,
-		margin: "12px 0 6px"
-	},
-	chain: {
-		display: "flex",
-		flexWrap: "wrap",
-		gap: 6,
-		alignItems: "center",
-		fontFamily: MONO_STACK,
-		fontSize: 12
-	},
-	chainNode: {
-		padding: "2px 6px",
-		borderRadius: 4,
-		border: BORDER_DEFAULT
-	},
-	arrow: { opacity: .5 },
-	themeTable: {
-		width: "100%",
-		borderCollapse: "collapse",
-		tableLayout: "fixed",
-		fontSize: 12
-	},
-	themeRow: { borderBottom: BORDER_FAINT },
-	themeCell: {
-		padding: "6px 8px",
-		verticalAlign: "middle"
-	},
-	swatch: {
-		display: "inline-block",
-		width: 14,
-		height: 14,
-		verticalAlign: "middle",
-		marginRight: 6,
-		borderRadius: 3,
-		border: "1px solid var(--sb-color-sys-border-default, rgba(0,0,0,0.1))"
-	},
-	snippet: {
-		display: "block",
-		padding: "8px 10px",
-		borderRadius: 4,
-		background: "var(--sb-color-sys-surface-muted, rgba(128,128,128,0.1))",
-		fontFamily: MONO_STACK,
-		fontSize: 12,
-		whiteSpace: "pre",
-		overflow: "auto"
-	},
-	missing: {
-		padding: 12,
-		opacity: .7
-	},
-	typographySample: { padding: "8px 0" },
-	shadowSample: {
-		width: 140,
-		height: 56,
-		background: "var(--sb-color-sys-surface-raised, #fff)",
-		border: BORDER_FAINT,
-		borderRadius: 6
-	},
-	borderSample: {
-		width: 140,
-		height: 56,
-		background: "var(--sb-color-sys-surface-raised, transparent)",
-		borderRadius: 6
-	},
-	gradientSample: {
-		width: 220,
-		height: 56,
-		borderRadius: 6,
-		border: BORDER_FAINT
-	},
-	strokeStyleLine: {
-		height: 0,
-		borderTopWidth: 4,
-		borderTopColor: "var(--sb-color-sys-text-default, CanvasText)",
-		width: 220
-	},
-	strokeStyleSvg: {
-		width: 220,
-		height: 24,
-		color: "var(--sb-color-sys-text-default, CanvasText)"
-	},
-	strokeStyleFallback: {
-		fontFamily: MONO_STACK,
-		fontSize: 12,
-		color: "var(--sb-color-sys-text-muted, CanvasText)"
-	},
-	colorSwatchRow: {
-		display: "flex",
-		gap: 1,
-		borderRadius: 6,
-		overflow: "hidden",
-		border: BORDER_DEFAULT,
-		width: 220,
-		height: 56
-	},
-	colorSwatchLight: {
-		flex: 1,
-		boxShadow: "inset 0 0 0 8px rgba(255, 255, 255, 0.9)"
-	},
-	colorSwatchDark: {
-		flex: 1,
-		boxShadow: "inset 0 0 0 8px rgba(17, 17, 17, 0.9)"
-	},
-	breakdownSection: {
-		fontFamily: MONO_STACK,
-		fontSize: 12,
-		display: "grid",
-		gridTemplateColumns: "auto 1fr",
-		columnGap: 12,
-		rowGap: 3,
-		marginTop: 6
-	},
-	breakdownKey: { color: "var(--sb-color-sys-text-muted, CanvasText)" },
-	breakdownLayerHeader: {
-		gridColumn: "1 / -1",
-		fontSize: 10,
-		textTransform: "uppercase",
-		letterSpacing: .5,
-		color: "var(--sb-color-sys-text-muted, CanvasText)",
-		marginTop: 4
-	},
-	fontFamilySample: {
-		padding: "4px 0",
-		fontSize: 22,
-		lineHeight: 1.2
-	},
-	fontWeightSample: {
-		padding: "4px 0",
-		fontSize: 32,
-		lineHeight: 1
-	},
-	dimensionTrack: {
-		display: "flex",
-		alignItems: "center",
-		height: 32,
-		maxWidth: "100%",
-		overflow: "hidden"
-	},
-	dimensionBar: {
-		height: 16,
-		background: "var(--sb-color-sys-accent-bg, #3b82f6)",
-		borderRadius: 3,
-		maxWidth: "100%"
-	},
-	motionTrack: {
-		position: "relative",
-		height: 32,
-		width: "100%",
-		maxWidth: 320,
-		background: "var(--sb-color-sys-surface-muted, rgba(128,128,128,0.08))",
-		borderRadius: 16,
-		overflow: "hidden"
-	},
-	motionBall: {
-		position: "absolute",
-		top: "50%",
-		width: 24,
-		height: 24,
-		marginTop: -12,
-		borderRadius: "50%",
-		background: "var(--sb-color-sys-accent-bg, #3b82f6)"
-	},
-	aliasedByList: {
-		listStyle: "none",
-		margin: 0,
-		padding: 0,
-		fontFamily: MONO_STACK,
-		fontSize: 12
-	},
-	aliasedByRow: {
-		padding: "2px 0",
-		display: "flex",
-		alignItems: "center",
-		gap: 6
-	},
-	aliasedByTruncated: {
-		fontSize: 11,
-		opacity: .6,
-		fontStyle: "italic",
-		marginTop: 4
-	},
-	reducedMotion: {
-		fontSize: 11,
-		color: "var(--sb-color-sys-text-muted, CanvasText)",
-		fontStyle: "italic"
-	},
-	tupleIndicator: {
-		fontSize: 11,
-		opacity: .7,
-		margin: "0 0 6px",
-		fontFamily: MONO_STACK
-	},
-	consumerRow: {
-		display: "flex",
-		alignItems: "center",
-		gap: 8,
-		padding: "6px 10px",
-		marginBottom: 4,
-		borderRadius: 4,
-		background: "var(--sb-color-sys-surface-muted, rgba(128,128,128,0.1))"
-	},
-	consumerRowLabel: {
-		fontFamily: MONO_STACK,
-		fontSize: 10,
-		textTransform: "uppercase",
-		letterSpacing: .5,
-		opacity: .6,
-		minWidth: 32,
-		flexShrink: 0
-	},
-	consumerRowValue: {
-		flex: 1,
-		fontFamily: MONO_STACK,
-		fontSize: 12,
-		whiteSpace: "nowrap",
-		overflow: "auto"
-	},
-	consumerRowCopy: {
-		padding: "3px 8px",
-		fontSize: 11,
-		fontFamily: MONO_STACK,
-		background: "var(--sb-color-sys-surface-raised, Canvas)",
-		color: "var(--sb-color-sys-text-default, CanvasText)",
-		border: "1px solid var(--sb-color-sys-border-default, rgba(128,128,128,0.3))",
-		borderRadius: 4,
-		cursor: "pointer",
-		flexShrink: 0
-	}
-};
-//#endregion
 //#region src/token-detail/internal.ts
 function useTokenDetailData(path) {
 	const { activeTheme, activeAxes, axes, themes, themesResolved, resolved, cssVarPrefix } = useProject();
@@ -2495,17 +1966,17 @@ function AliasChain({ path }) {
 	}, [token, path]);
 	if (chain.length <= 1) return null;
 	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
-		style: styles$3.sectionHeader,
+		className: "sb-token-detail__section-header",
 		children: "Alias chain"
 	}), /* @__PURE__ */ jsx("div", {
-		style: styles$3.chain,
+		className: "sb-token-detail__chain",
 		children: chain.map((step, i) => /* @__PURE__ */ jsxs("span", {
-			style: styles$3.chain,
+			className: "sb-token-detail__chain",
 			children: [/* @__PURE__ */ jsx("span", {
-				style: styles$3.chainNode,
+				className: "sb-token-detail__chain-node",
 				children: step
 			}), i < chain.length - 1 && /* @__PURE__ */ jsx("span", {
-				style: styles$3.arrow,
+				className: "sb-token-detail__arrow",
 				children: "→"
 			})]
 		}, step))
@@ -2525,18 +1996,18 @@ function AliasedBy({ path }) {
 	if (tree.length === 0) return null;
 	return /* @__PURE__ */ jsxs(Fragment, { children: [
 		/* @__PURE__ */ jsx("div", {
-			style: styles$3.sectionHeader,
+			className: "sb-token-detail__section-header",
 			children: "Aliased by"
 		}),
 		/* @__PURE__ */ jsx("ul", {
-			style: styles$3.aliasedByList,
+			className: "sb-token-detail__aliased-by-list",
 			children: tree.map((node) => /* @__PURE__ */ jsx(AliasedByRow, {
 				node,
 				depth: 0
 			}, node.path))
 		}),
 		truncated && /* @__PURE__ */ jsxs("div", {
-			style: styles$3.aliasedByTruncated,
+			className: "sb-token-detail__aliased-by-truncated",
 			children: [
 				"Further descendants truncated at depth ",
 				ALIASED_BY_DEPTH_CAP,
@@ -2547,16 +2018,14 @@ function AliasedBy({ path }) {
 }
 function AliasedByRow({ node, depth }) {
 	return /* @__PURE__ */ jsxs("li", { children: [/* @__PURE__ */ jsx("div", {
-		style: {
-			...styles$3.aliasedByRow,
-			paddingLeft: depth * 16
-		},
+		className: "sb-token-detail__aliased-by-row",
+		style: { paddingLeft: depth * 16 },
 		children: /* @__PURE__ */ jsx("span", {
-			style: styles$3.chainNode,
+			className: "sb-token-detail__chain-node",
 			children: node.path
 		})
 	}), node.children.length > 0 && /* @__PURE__ */ jsx("ul", {
-		style: styles$3.aliasedByList,
+		className: "sb-token-detail__aliased-by-list",
 		children: node.children.map((child) => /* @__PURE__ */ jsx(AliasedByRow, {
 			node: child,
 			depth: depth + 1
@@ -2609,8 +2078,9 @@ function treeHasTruncation(nodes) {
 function AxisVariance({ path }) {
 	const { token, cssVar, axes, themes, themesResolved, activeAxes, cssVarPrefix } = useTokenDetailData(path);
 	const colorFormat = useColorFormat();
-	const isColor = token?.$type === "color";
-	const formatFn = (t) => valueFor(t, isColor, colorFormat);
+	const tokenType = token?.$type;
+	const isColor = tokenType === "color";
+	const formatFn = (t) => valueFor(t, tokenType, colorFormat);
 	const variance = useMemo(() => analyzeVariance(path, axes, themes, themesResolved), [
 		path,
 		axes,
@@ -2622,22 +2092,20 @@ function AxisVariance({ path }) {
 		const anyTheme = themes[0];
 		const value = anyTheme ? formatFn(themesResolved[anyTheme.name]?.[path]) : "—";
 		return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
-			style: styles$3.sectionHeader,
+			className: "sb-token-detail__section-header",
 			children: "Values across axes"
 		}), /* @__PURE__ */ jsx("table", {
-			style: styles$3.themeTable,
+			className: "sb-token-detail__theme-table",
 			"data-testid": "token-detail-values",
 			children: /* @__PURE__ */ jsx("tbody", { children: /* @__PURE__ */ jsx("tr", {
-				style: styles$3.themeRow,
+				className: "sb-token-detail__theme-row",
 				children: /* @__PURE__ */ jsxs("td", {
-					style: styles$3.themeCell,
+					className: "sb-token-detail__theme-cell",
 					"data-testid": "token-detail-constant",
 					children: [
 						isColor && /* @__PURE__ */ jsx("span", {
-							style: {
-								...styles$3.swatch,
-								background: cssVar
-							},
+							className: "sb-token-detail__swatch",
+							style: { background: cssVar },
 							"aria-hidden": true
 						}),
 						value,
@@ -2678,28 +2146,24 @@ function AxisVariance({ path }) {
 			};
 		});
 		return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
-			style: styles$3.sectionHeader,
+			className: "sb-token-detail__section-header",
 			children: ["Varies with ", axisName]
 		}), /* @__PURE__ */ jsx("table", {
-			style: styles$3.themeTable,
+			className: "sb-token-detail__theme-table",
 			"data-testid": "token-detail-values",
 			children: /* @__PURE__ */ jsx("tbody", { children: contextValues.map((row) => /* @__PURE__ */ jsxs("tr", {
-				style: styles$3.themeRow,
+				className: "sb-token-detail__theme-row",
 				"data-axis": axisName,
 				"data-context": row.ctx,
 				children: [/* @__PURE__ */ jsx("td", {
-					style: {
-						...styles$3.themeCell,
-						width: "30%"
-					},
+					className: "sb-token-detail__theme-cell",
+					style: { width: "30%" },
 					children: row.ctx
 				}), /* @__PURE__ */ jsxs("td", {
-					style: styles$3.themeCell,
+					className: "sb-token-detail__theme-cell",
 					children: [isColor && row.themeName && /* @__PURE__ */ jsx("span", {
-						style: {
-							...styles$3.swatch,
-							background: cssVar
-						},
+						className: "sb-token-detail__swatch",
+						style: { background: cssVar },
 						[dataAttr(cssVarPrefix, "theme")]: row.themeName,
 						"aria-hidden": true
 					}), row.value]
@@ -2711,17 +2175,17 @@ function AxisVariance({ path }) {
 	if (!rowAxis || !colAxis) return /* @__PURE__ */ jsx(Fragment, {});
 	return /* @__PURE__ */ jsxs(Fragment, { children: [
 		/* @__PURE__ */ jsxs("div", {
-			style: styles$3.sectionHeader,
+			className: "sb-token-detail__section-header",
 			children: ["Varies with ", variance.varyingAxes.join(" × ")]
 		}),
 		/* @__PURE__ */ jsxs("table", {
-			style: styles$3.themeTable,
+			className: "sb-token-detail__theme-table",
 			"data-testid": "token-detail-values",
 			children: [/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", {
-				style: styles$3.themeRow,
+				className: "sb-token-detail__theme-row",
 				children: [/* @__PURE__ */ jsxs("th", {
+					className: "sb-token-detail__theme-cell",
 					style: {
-						...styles$3.themeCell,
 						textAlign: "left",
 						opacity: .7
 					},
@@ -2731,17 +2195,17 @@ function AxisVariance({ path }) {
 						colAxis.name
 					]
 				}), colAxis.contexts.map((col) => /* @__PURE__ */ jsx("th", {
+					className: "sb-token-detail__theme-cell",
 					style: {
-						...styles$3.themeCell,
 						textAlign: "left",
 						opacity: .7
 					},
 					children: col
 				}, col))]
 			}) }), /* @__PURE__ */ jsx("tbody", { children: rowAxis.contexts.map((row) => /* @__PURE__ */ jsxs("tr", {
-				style: styles$3.themeRow,
+				className: "sb-token-detail__theme-row",
 				children: [/* @__PURE__ */ jsx("td", {
-					style: styles$3.themeCell,
+					className: "sb-token-detail__theme-cell",
 					children: row
 				}), colAxis.contexts.map((col) => {
 					const name = tupleName(themes, {
@@ -2751,14 +2215,12 @@ function AxisVariance({ path }) {
 					});
 					const value = name ? formatFn(themesResolved[name]?.[path]) : "—";
 					return /* @__PURE__ */ jsxs("td", {
-						style: styles$3.themeCell,
+						className: "sb-token-detail__theme-cell",
 						"data-row": row,
 						"data-col": col,
 						children: [isColor && name && /* @__PURE__ */ jsx("span", {
-							style: {
-								...styles$3.swatch,
-								background: cssVar
-							},
+							className: "sb-token-detail__swatch",
+							style: { background: cssVar },
 							[dataAttr(cssVarPrefix, "theme")]: name,
 							"aria-hidden": true
 						}), value]
@@ -2767,10 +2229,8 @@ function AxisVariance({ path }) {
 			}, row)) })]
 		}),
 		extra.length > 0 && /* @__PURE__ */ jsxs("div", {
-			style: {
-				...styles$3.aliasedByTruncated,
-				marginTop: 6
-			},
+			className: "sb-token-detail__aliased-by-truncated",
+			style: { marginTop: 6 },
 			children: [
 				"Values also vary with ",
 				extra.map((a) => a.name).join(", "),
@@ -2779,14 +2239,20 @@ function AxisVariance({ path }) {
 		})
 	] });
 }
-function valueFor(token, isColor, format) {
+function valueFor(token, $type, format) {
 	if (!token) return "—";
-	if (isColor) return formatColor(token.$value, format).value;
-	return formatValue(token.$value);
+	return formatTokenValue(token.$value, $type, format);
 }
-function themeValue(themesResolved, themeName, path) {
+/**
+* Stable key for variance detection — compares structural equality across
+* themes, not a display string. We pin `raw` so color representation
+* changes (the toolbar's format dropdown) don't artificially make axes
+* look like they vary.
+*/
+function varianceKey(themesResolved, themeName, path) {
 	const t = themesResolved[themeName]?.[path];
-	return t ? formatValue(t.$value) : "—";
+	if (!t) return "";
+	return JSON.stringify(t.$value);
 }
 function tupleName(themes, tuple) {
 	return themes.find((t) => {
@@ -2802,7 +2268,7 @@ function analyzeVariance(path, axes, themes, themesResolved) {
 			const others = axes.filter((a) => a.name !== axis.name).map((a) => `${a.name}=${theme.input[a.name] ?? ""}`).join("|");
 			const ctx = theme.input[axis.name] ?? "";
 			const bucket = byOthers.get(others) ?? /* @__PURE__ */ new Map();
-			bucket.set(ctx, themeValue(themesResolved, theme.name, path));
+			bucket.set(ctx, varianceKey(themesResolved, theme.name, path));
 			byOthers.set(others, bucket);
 		}
 		let varies = false;
@@ -2829,13 +2295,15 @@ function analyzeVariance(path, axes, themes, themesResolved) {
 //#region src/token-detail/CompositeBreakdown.tsx
 function CompositeBreakdown({ path }) {
 	const { token } = useTokenDetailData(path);
+	const colorFormat = useColorFormat();
 	if (!token) return null;
 	return /* @__PURE__ */ jsx(CompositeBreakdownContent, {
 		type: token.$type,
-		rawValue: token.$value
+		rawValue: token.$value,
+		colorFormat
 	});
 }
-function CompositeBreakdownContent({ type, rawValue }) {
+function CompositeBreakdownContent({ type, rawValue, colorFormat }) {
 	if (!rawValue || typeof rawValue !== "object") return null;
 	if (type === "typography") {
 		const v = rawValue;
@@ -2850,7 +2318,7 @@ function CompositeBreakdownContent({ type, rawValue }) {
 	if (type === "border") {
 		const v = rawValue;
 		return renderKeyValueList([
-			["color", formatColorValue(v["color"])],
+			["color", formatColorSubValue(v["color"], colorFormat)],
 			["width", formatDimensionValue(v["width"])],
 			["style", formatPrimitive(v["style"])]
 		]);
@@ -2867,19 +2335,19 @@ function CompositeBreakdownContent({ type, rawValue }) {
 		const layers = Array.isArray(rawValue) ? rawValue : [rawValue];
 		const multi = layers.length > 1;
 		return /* @__PURE__ */ jsx("div", {
-			style: styles$3.breakdownSection,
+			className: "sb-token-detail__breakdown-section",
 			children: layers.map((layer, i) => {
 				const v = layer;
 				return /* @__PURE__ */ jsxs("div", {
 					style: { display: "contents" },
 					children: [
 						multi && /* @__PURE__ */ jsxs("div", {
-							style: styles$3.breakdownLayerHeader,
+							className: "sb-token-detail__breakdown-layer-header",
 							children: ["Layer ", i + 1]
 						}),
 						/* @__PURE__ */ jsx(KeyValueRow, {
 							label: "color",
-							value: formatColorValue(v["color"])
+							value: formatColorSubValue(v["color"], colorFormat)
 						}),
 						/* @__PURE__ */ jsx(KeyValueRow, {
 							label: "offsetX",
@@ -2910,12 +2378,12 @@ function CompositeBreakdownContent({ type, rawValue }) {
 		const stops = Array.isArray(rawValue) ? rawValue : [];
 		if (stops.length === 0) return null;
 		return /* @__PURE__ */ jsx("div", {
-			style: styles$3.breakdownSection,
+			className: "sb-token-detail__breakdown-section",
 			children: stops.map((stop, i) => {
 				const v = stop;
 				return /* @__PURE__ */ jsx(KeyValueRow, {
 					label: `${((typeof v["position"] === "number" ? v["position"] : 0) * 100).toFixed(0)}%`,
-					value: formatColorValue(v["color"])
+					value: formatColorSubValue(v["color"], colorFormat)
 				}, gradientStopKey(v, i));
 			})
 		});
@@ -2924,7 +2392,7 @@ function CompositeBreakdownContent({ type, rawValue }) {
 }
 function renderKeyValueList(rows) {
 	return /* @__PURE__ */ jsx("div", {
-		style: styles$3.breakdownSection,
+		className: "sb-token-detail__breakdown-section",
 		children: rows.filter(([, v]) => v !== null).map(([k, v]) => /* @__PURE__ */ jsx(KeyValueRow, {
 			label: k,
 			value: v ?? ""
@@ -2933,7 +2401,7 @@ function renderKeyValueList(rows) {
 }
 function KeyValueRow({ label, value }) {
 	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
-		style: styles$3.breakdownKey,
+		className: "sb-token-detail__breakdown-key",
 		children: label
 	}), /* @__PURE__ */ jsx("span", { children: value ?? "—" })] });
 }
@@ -2957,18 +2425,15 @@ function formatDimensionValue(v) {
 	}
 	return JSON.stringify(v);
 }
-function formatColorValue(v) {
+/**
+* Route sub-value colors through `formatColor` so they honor the active
+* color-format dropdown, just like the standalone `<ColorPalette />` and
+* `<TokenDetail />` top-line do. Returns `null` for a missing field so
+* the key/value row drops out entirely.
+*/
+function formatColorSubValue(v, format) {
 	if (v == null) return null;
-	if (typeof v === "string") return v;
-	if (typeof v === "object") {
-		const c = v;
-		if (Array.isArray(c.components) && typeof c.colorSpace === "string") {
-			const parts = c.components.map((n) => typeof n === "number" ? n.toFixed(3) : String(n));
-			const alpha = typeof c.alpha === "number" && c.alpha !== 1 ? ` / ${c.alpha}` : "";
-			return `${c.colorSpace}(${parts.join(" ")}${alpha})`;
-		}
-	}
-	return JSON.stringify(v);
+	return formatColor(v, format).value;
 }
 function shadowLayerKey(layer, fallback) {
 	return `shadow|${[
@@ -3009,8 +2474,8 @@ function CompositePreviewContent({ type, cssVar, rawValue }) {
 	if (type === "typography") {
 		const base = cssVar.replace(/^var\(/, "").replace(/\)$/, "");
 		return /* @__PURE__ */ jsx("div", {
+			className: "sb-token-detail__typography-sample",
 			style: {
-				...styles$3.typographySample,
 				fontFamily: `var(${base}-font-family)`,
 				fontSize: `var(${base}-font-size)`,
 				fontWeight: `var(${base}-font-weight)`,
@@ -3021,85 +2486,71 @@ function CompositePreviewContent({ type, cssVar, rawValue }) {
 		});
 	}
 	if (type === "shadow") return /* @__PURE__ */ jsx("div", {
-		style: {
-			...styles$3.shadowSample,
-			boxShadow: cssVar
-		},
+		className: "sb-token-detail__shadow-sample",
+		style: { boxShadow: cssVar },
 		"aria-hidden": true
 	});
 	if (type === "border") return /* @__PURE__ */ jsx("div", {
-		style: {
-			...styles$3.borderSample,
-			border: cssVar
-		},
+		className: "sb-token-detail__border-sample",
+		style: { border: cssVar },
 		"aria-hidden": true
 	});
 	if (type === "transition") return /* @__PURE__ */ jsx(TransitionSample, { transition: cssVar });
 	if (type === "dimension") return /* @__PURE__ */ jsx("div", {
-		style: styles$3.dimensionTrack,
+		className: "sb-token-detail__dimension-track",
 		children: /* @__PURE__ */ jsx("div", {
-			style: {
-				...styles$3.dimensionBar,
-				width: cssVar
-			},
+			className: "sb-token-detail__dimension-bar",
+			style: { width: cssVar },
 			"aria-hidden": true
 		})
 	});
 	if (type === "duration") return /* @__PURE__ */ jsx(TransitionSample, { transition: `left ${cssVar} ease` });
 	if (type === "fontFamily") return /* @__PURE__ */ jsx("div", {
-		style: {
-			...styles$3.fontFamilySample,
-			fontFamily: cssVar
-		},
+		className: "sb-token-detail__font-family-sample",
+		style: { fontFamily: cssVar },
 		children: PANGRAM
 	});
 	if (type === "fontWeight") return /* @__PURE__ */ jsx("div", {
-		style: {
-			...styles$3.fontWeightSample,
-			fontWeight: cssVar
-		},
+		className: "sb-token-detail__font-weight-sample",
+		style: { fontWeight: cssVar },
 		children: "Aa"
 	});
 	if (type === "cubicBezier") return /* @__PURE__ */ jsx(TransitionSample, { transition: `left 800ms ${cssVar}` });
 	if (type === "gradient") return /* @__PURE__ */ jsx("div", {
-		style: {
-			...styles$3.gradientSample,
-			background: `linear-gradient(to right, ${cssVar})`
-		},
+		className: "sb-token-detail__gradient-sample",
+		style: { background: `linear-gradient(to right, ${cssVar})` },
 		"aria-hidden": true
 	});
 	if (type === "strokeStyle") return /* @__PURE__ */ jsx(StrokeStylePreview, { value: rawValue });
 	if (type === "color") return /* @__PURE__ */ jsxs("div", {
-		style: styles$3.colorSwatchRow,
+		className: "sb-token-detail__color-swatch-row",
 		"aria-hidden": true,
-		children: [/* @__PURE__ */ jsx("div", { style: {
-			...styles$3.colorSwatchLight,
-			background: cssVar
-		} }), /* @__PURE__ */ jsx("div", { style: {
-			...styles$3.colorSwatchDark,
-			background: cssVar
-		} })]
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "sb-token-detail__color-swatch-light",
+			style: { background: cssVar }
+		}), /* @__PURE__ */ jsx("div", {
+			className: "sb-token-detail__color-swatch-dark",
+			style: { background: cssVar }
+		})]
 	});
 	return null;
 }
 function StrokeStylePreview({ value }) {
 	if (typeof value === "string" && STROKE_STYLE_STRINGS.has(value)) return /* @__PURE__ */ jsx("div", {
-		style: {
-			...styles$3.strokeStyleLine,
-			borderTopStyle: value
-		},
+		className: "sb-token-detail__stroke-style-line",
+		style: { borderTopStyle: value },
 		"aria-hidden": true
 	});
 	if (value && typeof value === "object" && "dashArray" in value) {
 		const v = value;
 		const lengths = asDashLengths(v.dashArray);
 		if (lengths.length === 0) return /* @__PURE__ */ jsx("div", {
-			style: styles$3.strokeStyleFallback,
+			className: "sb-token-detail__stroke-style-fallback",
 			children: "Object-form strokeStyle with no resolvable dashArray."
 		});
 		const cap = typeof v.lineCap === "string" ? v.lineCap : "butt";
 		return /* @__PURE__ */ jsx("svg", {
-			style: styles$3.strokeStyleSvg,
+			className: "sb-token-detail__stroke-style-svg",
 			viewBox: "0 0 220 24",
 			preserveAspectRatio: "none",
 			"aria-hidden": true,
@@ -3116,7 +2567,7 @@ function StrokeStylePreview({ value }) {
 		});
 	}
 	return /* @__PURE__ */ jsx("div", {
-		style: styles$3.strokeStyleFallback,
+		className: "sb-token-detail__stroke-style-fallback",
 		children: "strokeStyle value could not be previewed."
 	});
 }
@@ -3150,14 +2601,14 @@ function TransitionSample({ transition }) {
 		};
 	}, [reduced]);
 	if (reduced) return /* @__PURE__ */ jsx("div", {
-		style: styles$3.reducedMotion,
+		className: "sb-token-detail__reduced-motion",
 		children: "Animation suppressed by `prefers-reduced-motion: reduce`."
 	});
 	return /* @__PURE__ */ jsx("div", {
-		style: styles$3.motionTrack,
+		className: "sb-token-detail__motion-track",
 		children: /* @__PURE__ */ jsx("div", {
+			className: "sb-token-detail__motion-ball",
 			style: {
-				...styles$3.motionBall,
 				left: phase === 1 ? "calc(100% - 28px)" : "4px",
 				transition
 			},
@@ -3173,11 +2624,11 @@ function ConsumerOutput({ path }) {
 	const tupleLabel = Object.entries(activeAxes).map(([k, v]) => `${k}=${v}`).join(", ");
 	return /* @__PURE__ */ jsxs(Fragment, { children: [
 		/* @__PURE__ */ jsx("div", {
-			style: styles$3.sectionHeader,
+			className: "sb-token-detail__section-header",
 			children: "Consumer output"
 		}),
 		tupleLabel && /* @__PURE__ */ jsxs("div", {
-			style: styles$3.tupleIndicator,
+			className: "sb-token-detail__tuple-indicator",
 			children: ["Active tuple: ", /* @__PURE__ */ jsx("strong", { children: tupleLabel })]
 		}),
 		/* @__PURE__ */ jsx(OutputRow, {
@@ -3194,14 +2645,14 @@ function ConsumerOutput({ path }) {
 }
 function OutputRow({ label, value, testId }) {
 	return /* @__PURE__ */ jsxs("div", {
-		style: styles$3.consumerRow,
+		className: "sb-token-detail__consumer-row",
 		children: [
 			/* @__PURE__ */ jsx("span", {
-				style: styles$3.consumerRowLabel,
+				className: "sb-token-detail__consumer-row-label",
 				children: label
 			}),
 			/* @__PURE__ */ jsx("code", {
-				style: styles$3.consumerRowValue,
+				className: "sb-token-detail__consumer-row-value",
 				"data-testid": testId,
 				children: value
 			}),
@@ -3216,7 +2667,7 @@ function CopyButton({ text, testId }) {
 	const [copied, setCopied] = useState(false);
 	return /* @__PURE__ */ jsx("button", {
 		type: "button",
-		style: styles$3.consumerRowCopy,
+		className: "sb-token-detail__consumer-row-copy",
 		"data-testid": testId,
 		onClick: () => {
 			copyToClipboard(text).then((ok) => {
@@ -3242,7 +2693,7 @@ async function copyToClipboard(text) {
 function TokenHeader({ path, heading }) {
 	const { token, cssVar, activeTheme } = useTokenDetailData(path);
 	if (!token) return /* @__PURE__ */ jsxs("div", {
-		style: styles$3.missing,
+		className: "sb-token-detail__missing",
 		children: [
 			"Token ",
 			/* @__PURE__ */ jsx("code", { children: path }),
@@ -3253,18 +2704,18 @@ function TokenHeader({ path, heading }) {
 	});
 	return /* @__PURE__ */ jsxs(Fragment, { children: [
 		/* @__PURE__ */ jsx("h3", {
-			style: styles$3.heading,
+			className: "sb-token-detail__heading",
 			children: heading ?? path
 		}),
 		/* @__PURE__ */ jsxs("div", {
-			style: styles$3.subline,
+			className: "sb-token-detail__subline",
 			children: [token.$type && /* @__PURE__ */ jsx("span", {
-				style: styles$3.typePill,
+				className: "sb-token-detail__type-pill",
 				children: token.$type
 			}), /* @__PURE__ */ jsx("span", { children: cssVar })]
 		}),
 		token.$description && /* @__PURE__ */ jsx("p", {
-			style: styles$3.description,
+			className: "sb-token-detail__description",
 			children: token.$description
 		})
 	] });
@@ -3275,10 +2726,10 @@ function TokenUsageSnippet({ path }) {
 	const { token, cssVar } = useTokenDetailData(path);
 	if (!token) return null;
 	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
-		style: styles$3.sectionHeader,
+		className: "sb-token-detail__section-header",
 		children: "Usage"
 	}), /* @__PURE__ */ jsx("code", {
-		style: styles$3.snippet,
+		className: "sb-token-detail__snippet",
 		children: `color: ${cssVar};`
 	})] });
 }
@@ -3287,14 +2738,12 @@ function TokenUsageSnippet({ path }) {
 function TokenDetail({ path, heading }) {
 	const { token, cssVar, activeTheme, cssVarPrefix } = useTokenDetailData(path);
 	const colorFormat = useColorFormat();
+	const theme = themeAttrs(cssVarPrefix, activeTheme);
 	if (!token) return /* @__PURE__ */ jsx("div", {
-		...themeAttrs(cssVarPrefix, activeTheme),
-		style: {
-			...chromeAliases(cssVarPrefix),
-			...styles$3.wrapper
-		},
+		...theme,
+		className: cx(theme["className"], "sb-token-detail"),
 		children: /* @__PURE__ */ jsxs("div", {
-			style: styles$3.missing,
+			className: "sb-token-detail__missing",
 			children: [
 				"Token ",
 				/* @__PURE__ */ jsx("code", { children: path }),
@@ -3305,34 +2754,29 @@ function TokenDetail({ path, heading }) {
 		})
 	});
 	const isColor = token.$type === "color";
-	const formatted = isColor ? formatColor(token.$value, colorFormat) : null;
-	const value = formatted ? formatted.value : formatValue(token.$value);
-	const outOfGamut = formatted?.outOfGamut ?? false;
+	const gamut = isColor ? formatColor(token.$value, colorFormat) : null;
+	const value = formatTokenValue(token.$value, token.$type, colorFormat);
+	const outOfGamut = gamut?.outOfGamut ?? false;
 	return /* @__PURE__ */ jsxs("div", {
-		...themeAttrs(cssVarPrefix, activeTheme),
-		style: {
-			...chromeAliases(cssVarPrefix),
-			...styles$3.wrapper
-		},
+		...theme,
+		className: cx(theme["className"], "sb-token-detail"),
 		children: [
 			/* @__PURE__ */ jsx(TokenHeader, {
 				path,
 				...heading !== void 0 && { heading }
 			}),
 			/* @__PURE__ */ jsxs("div", {
-				style: styles$3.sectionHeader,
+				className: "sb-token-detail__section-header",
 				children: ["Resolved value · ", activeTheme]
 			}),
 			/* @__PURE__ */ jsx(CompositePreview, { path }),
 			/* @__PURE__ */ jsx(CompositeBreakdown, { path }),
 			/* @__PURE__ */ jsxs("div", {
-				style: styles$3.chain,
+				className: "sb-token-detail__chain",
 				children: [
 					isColor && /* @__PURE__ */ jsx("span", {
-						style: {
-							...styles$3.swatch,
-							background: cssVar
-						},
+						className: "sb-token-detail__swatch",
+						style: { background: cssVar },
 						"aria-hidden": true
 					}),
 					/* @__PURE__ */ jsx("span", { children: value }),
@@ -3353,131 +2797,39 @@ function TokenDetail({ path, heading }) {
 	});
 }
 //#endregion
+//#region src/internal/DetailOverlay.tsx
+function DetailOverlay({ path, onClose, testId = "swatchbook-overlay" }) {
+	useEffect(() => {
+		const onKey = (e) => {
+			if (e.key === "Escape") onClose();
+		};
+		window.addEventListener("keydown", onKey);
+		return () => window.removeEventListener("keydown", onKey);
+	}, [onClose]);
+	return /* @__PURE__ */ jsx("div", {
+		className: "sb-detail-overlay__backdrop",
+		onClick: onClose,
+		role: "presentation",
+		"data-testid": testId,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "sb-detail-overlay__panel",
+			onClick: (e) => e.stopPropagation(),
+			role: "dialog",
+			"aria-modal": "true",
+			"aria-label": `Token detail for ${path}`,
+			children: [/* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: "sb-detail-overlay__close",
+				onClick: onClose,
+				"aria-label": "Close",
+				"data-testid": `${testId}-close`,
+				children: "×"
+			}), /* @__PURE__ */ jsx(TokenDetail, { path })]
+		})
+	});
+}
+//#endregion
 //#region src/TokenNavigator.tsx
-const styles$2 = {
-	wrapper: surfaceStyle,
-	caption: {
-		padding: "4px 0 12px",
-		color: "var(--sb-color-sys-text-muted, CanvasText)",
-		fontSize: 12
-	},
-	tree: {
-		listStyle: "none",
-		margin: 0,
-		padding: 0
-	},
-	nested: {
-		listStyle: "none",
-		margin: 0,
-		paddingLeft: 18,
-		borderLeft: BORDER_DEFAULT
-	},
-	groupRow: {
-		display: "flex",
-		alignItems: "center",
-		gap: 6,
-		padding: "4px 6px",
-		borderRadius: 4,
-		cursor: "pointer",
-		userSelect: "none",
-		fontFamily: MONO_STACK,
-		fontSize: 12
-	},
-	leafRow: {
-		display: "flex",
-		alignItems: "center",
-		gap: 8,
-		padding: "4px 6px",
-		borderRadius: 4,
-		cursor: "pointer",
-		fontFamily: MONO_STACK,
-		fontSize: 12
-	},
-	caret: {
-		display: "inline-block",
-		width: 12,
-		textAlign: "center",
-		color: "var(--sb-color-sys-text-muted, CanvasText)"
-	},
-	tail: {
-		fontFamily: MONO_STACK,
-		fontSize: 12
-	},
-	typePill: {
-		display: "inline-block",
-		padding: "1px 6px",
-		borderRadius: 4,
-		fontSize: 10,
-		letterSpacing: .5,
-		textTransform: "uppercase",
-		background: "var(--sb-color-sys-surface-muted, rgba(128,128,128,0.15))"
-	},
-	value: {
-		fontSize: 11,
-		color: "var(--sb-color-sys-text-muted, CanvasText)",
-		marginLeft: "auto",
-		wordBreak: "break-all",
-		maxWidth: "40%",
-		textAlign: "right"
-	},
-	count: {
-		marginLeft: "auto",
-		fontSize: 11,
-		color: "var(--sb-color-sys-text-default, CanvasText)"
-	},
-	colorSwatch: {
-		display: "inline-block",
-		width: 14,
-		height: 14,
-		borderRadius: 3,
-		border: "1px solid var(--sb-color-sys-border-default, rgba(0,0,0,0.1))"
-	},
-	previewBox: {
-		display: "inline-flex",
-		alignItems: "center",
-		justifyContent: "flex-end",
-		marginLeft: "auto"
-	},
-	empty: {
-		padding: "24px 12px",
-		textAlign: "center",
-		color: "var(--sb-color-sys-text-muted, CanvasText)"
-	},
-	backdrop: {
-		position: "fixed",
-		inset: 0,
-		background: "rgba(0,0,0,0.4)",
-		zIndex: 1e4,
-		display: "flex",
-		alignItems: "stretch",
-		justifyContent: "flex-end"
-	},
-	panel: {
-		width: "min(560px, 100%)",
-		height: "100%",
-		overflowY: "auto",
-		background: "var(--sb-color-sys-surface-default, Canvas)",
-		color: "var(--sb-color-sys-text-default, CanvasText)",
-		boxShadow: "-8px 0 24px rgba(0,0,0,0.2)",
-		padding: 16,
-		position: "relative"
-	},
-	closeButton: {
-		position: "absolute",
-		top: 8,
-		right: 8,
-		width: 32,
-		height: 32,
-		borderRadius: 4,
-		border: "1px solid var(--sb-color-sys-border-default, rgba(128,128,128,0.3))",
-		background: "transparent",
-		color: "inherit",
-		cursor: "pointer",
-		fontSize: 16,
-		lineHeight: 1
-	}
-};
-/** @internal Exported for tests; not part of the public API. */
 function buildTree(resolved, root) {
 	const rootPrefix = root && root.length > 0 ? `${root}.` : "";
 	const rootSegments = root ? root.split(".") : [];
@@ -3575,24 +2927,13 @@ function TokenNavigator({ root, initiallyExpanded = 1, onSelect }) {
 	}, [onSelect]);
 	if (tree.length === 0) return /* @__PURE__ */ jsx("div", {
 		...themeAttrs(cssVarPrefix, activeTheme),
-		style: {
-			...chromeAliases(cssVarPrefix),
-			...styles$2.wrapper
-		},
-		children: /* @__PURE__ */ jsx("div", {
-			style: styles$2.empty,
-			children: root ? `No tokens under "${root}".` : "No tokens in the active theme."
-		})
+		children: /* @__PURE__ */ jsx(EmptyState, { children: root ? `No tokens under "${root}".` : "No tokens in the active theme." })
 	});
 	return /* @__PURE__ */ jsxs("div", {
 		...themeAttrs(cssVarPrefix, activeTheme),
-		style: {
-			...chromeAliases(cssVarPrefix),
-			...styles$2.wrapper
-		},
 		children: [
 			/* @__PURE__ */ jsxs("div", {
-				style: styles$2.caption,
+				className: "sb-token-navigator__caption",
 				children: [
 					root ? `Tokens under ${root}` : "Token graph",
 					" · ",
@@ -3600,7 +2941,7 @@ function TokenNavigator({ root, initiallyExpanded = 1, onSelect }) {
 				]
 			}),
 			/* @__PURE__ */ jsx("ul", {
-				style: styles$2.tree,
+				className: "sb-token-navigator__tree",
 				role: "tree",
 				children: tree.map((node) => /* @__PURE__ */ jsx(TreeNodeRow, {
 					node,
@@ -3611,7 +2952,8 @@ function TokenNavigator({ root, initiallyExpanded = 1, onSelect }) {
 			}),
 			selectedPath !== null && /* @__PURE__ */ jsx(DetailOverlay, {
 				path: selectedPath,
-				onClose: () => setSelectedPath(null)
+				onClose: () => setSelectedPath(null),
+				testId: "token-navigator-overlay"
 			})
 		]
 	});
@@ -3634,25 +2976,25 @@ function TreeNodeRow({ node, expanded, onToggle, onLeafClick }) {
 		children: [/* @__PURE__ */ jsxs("div", {
 			role: "button",
 			tabIndex: 0,
-			style: styles$2.groupRow,
+			className: "sb-token-navigator__group-row",
 			onClick: () => onToggle(node.path),
 			onKeyDown: onKey,
 			"data-path": node.path,
 			"data-testid": "token-navigator-group",
 			children: [
 				/* @__PURE__ */ jsx("span", {
-					style: styles$2.caret,
+					className: "sb-token-navigator__caret",
 					"aria-hidden": true,
 					children: isOpen ? "▾" : "▸"
 				}),
 				/* @__PURE__ */ jsx("span", { children: node.segment }),
 				/* @__PURE__ */ jsx("span", {
-					style: styles$2.count,
+					className: "sb-token-navigator__count",
 					children: countLeaves(node)
 				})
 			]
 		}), isOpen && /* @__PURE__ */ jsx("ul", {
-			style: styles$2.nested,
+			className: "sb-token-navigator__nested",
 			role: "group",
 			children: node.children.map((c) => /* @__PURE__ */ jsx(TreeNodeRow, {
 				node: c,
@@ -3676,23 +3018,23 @@ function LeafRow({ node, onLeafClick }) {
 		children: /* @__PURE__ */ jsxs("div", {
 			role: "button",
 			tabIndex: 0,
-			style: styles$2.leafRow,
+			className: "sb-token-navigator__leaf-row",
 			onClick: () => onLeafClick(node.path),
 			onKeyDown: onKey,
 			"data-path": node.path,
 			"data-testid": "token-navigator-leaf",
 			children: [
 				/* @__PURE__ */ jsx("span", {
-					style: styles$2.caret,
+					className: "sb-token-navigator__caret",
 					"aria-hidden": true,
 					children: "•"
 				}),
 				/* @__PURE__ */ jsx("span", {
-					style: styles$2.tail,
+					className: "sb-token-navigator__tail",
 					children: node.segment
 				}),
 				type && /* @__PURE__ */ jsx("span", {
-					style: styles$2.typePill,
+					className: "sb-token-navigator__type-pill",
 					children: type
 				}),
 				/* @__PURE__ */ jsx(LeafPreview, {
@@ -3709,34 +3051,25 @@ function LeafPreview({ path, token }) {
 	const type = token.$type;
 	if (type === "color") {
 		const cssVar = makeCssVar(path, cssVarPrefix);
-		const formatted = formatColor(token.$value, colorFormat);
 		return /* @__PURE__ */ jsxs("span", {
-			style: styles$2.previewBox,
+			className: "sb-token-navigator__preview-box",
 			children: [/* @__PURE__ */ jsx("span", {
-				style: styles$2.value,
-				children: formatted?.value ?? formatValue(token.$value)
+				className: "sb-token-navigator__value",
+				children: formatTokenValue(token.$value, type, colorFormat)
 			}), /* @__PURE__ */ jsx("span", {
-				style: {
-					...styles$2.colorSwatch,
-					background: cssVar,
-					marginLeft: 8
-				},
+				className: "sb-token-navigator__color-swatch",
+				style: { background: cssVar },
 				"aria-hidden": true
 			})]
 		});
 	}
 	if (type === "dimension") return /* @__PURE__ */ jsxs("span", {
-		style: styles$2.previewBox,
+		className: "sb-token-navigator__preview-box",
 		children: [/* @__PURE__ */ jsx("span", {
-			style: styles$2.value,
-			children: formatValue(token.$value)
+			className: "sb-token-navigator__value",
+			children: formatTokenValue(token.$value, type, colorFormat)
 		}), /* @__PURE__ */ jsx("span", {
-			style: {
-				marginLeft: 8,
-				display: "inline-block",
-				minWidth: 40,
-				maxWidth: 120
-			},
+			className: "sb-token-navigator__preview-dimension",
 			children: /* @__PURE__ */ jsx(DimensionBar, {
 				path,
 				kind: "length"
@@ -3744,155 +3077,56 @@ function LeafPreview({ path, token }) {
 		})]
 	});
 	if (type === "shadow") return /* @__PURE__ */ jsx("span", {
-		style: styles$2.previewBox,
+		className: "sb-token-navigator__preview-box",
 		children: /* @__PURE__ */ jsx("span", {
-			style: {
-				marginLeft: 8,
-				display: "inline-block",
-				transform: "scale(0.5)",
-				transformOrigin: "right center"
-			},
+			className: "sb-token-navigator__preview-scaled",
 			children: /* @__PURE__ */ jsx(ShadowSample, { path })
 		})
 	});
 	if (type === "border") return /* @__PURE__ */ jsx("span", {
-		style: styles$2.previewBox,
+		className: "sb-token-navigator__preview-box",
 		children: /* @__PURE__ */ jsx("span", {
-			style: {
-				marginLeft: 8,
-				display: "inline-block",
-				transform: "scale(0.5)",
-				transformOrigin: "right center"
-			},
+			className: "sb-token-navigator__preview-scaled",
 			children: /* @__PURE__ */ jsx(BorderSample, { path })
 		})
 	});
 	if (type === "transition" || type === "duration" || type === "cubicBezier") return /* @__PURE__ */ jsx("span", {
-		style: styles$2.previewBox,
+		className: "sb-token-navigator__preview-box",
 		children: /* @__PURE__ */ jsx("span", {
-			style: {
-				marginLeft: 8,
-				display: "inline-block",
-				width: 80
-			},
+			className: "sb-token-navigator__preview-motion",
 			children: /* @__PURE__ */ jsx(MotionSample, { path })
 		})
 	});
 	return /* @__PURE__ */ jsx("span", {
-		style: styles$2.previewBox,
+		className: "sb-token-navigator__preview-box",
 		children: /* @__PURE__ */ jsx("span", {
-			style: styles$2.value,
-			children: formatValue(token.$value)
-		})
-	});
-}
-function DetailOverlay({ path, onClose }) {
-	useEffect(() => {
-		const onKey = (e) => {
-			if (e.key === "Escape") onClose();
-		};
-		window.addEventListener("keydown", onKey);
-		return () => window.removeEventListener("keydown", onKey);
-	}, [onClose]);
-	return /* @__PURE__ */ jsx("div", {
-		style: styles$2.backdrop,
-		onClick: onClose,
-		role: "presentation",
-		"data-testid": "token-navigator-overlay",
-		children: /* @__PURE__ */ jsxs("div", {
-			style: styles$2.panel,
-			onClick: (e) => e.stopPropagation(),
-			role: "dialog",
-			"aria-modal": "true",
-			"aria-label": `Token detail for ${path}`,
-			children: [/* @__PURE__ */ jsx("button", {
-				type: "button",
-				style: styles$2.closeButton,
-				onClick: onClose,
-				"aria-label": "Close",
-				"data-testid": "token-navigator-close",
-				children: "×"
-			}), /* @__PURE__ */ jsx(TokenDetail, { path })]
+			className: "sb-token-navigator__value",
+			children: formatTokenValue(token.$value, type, colorFormat)
 		})
 	});
 }
 //#endregion
 //#region src/TokenTable.tsx
-const styles$1 = {
-	wrapper: surfaceStyle,
-	empty: emptyStyle,
-	caption: {
-		captionSide: "top",
-		textAlign: "left",
-		padding: "8px 0",
-		opacity: .7,
-		fontSize: 12
-	},
-	table: {
-		width: "100%",
-		borderCollapse: "collapse",
-		tableLayout: "fixed"
-	},
-	th: {
-		textAlign: "left",
-		padding: "8px 12px",
-		fontSize: 11,
-		textTransform: "uppercase",
-		letterSpacing: .5,
-		opacity: .6,
-		borderBottom: "1px solid var(--sb-color-sys-border-default, rgba(128,128,128,0.3))"
-	},
-	td: {
-		padding: "8px 12px",
-		borderBottom: BORDER_FAINT,
-		verticalAlign: "top"
-	},
-	path: {
-		fontFamily: MONO_STACK,
-		fontSize: 12
-	},
-	typePill: {
-		display: "inline-block",
-		padding: "2px 6px",
-		borderRadius: 4,
-		fontSize: 10,
-		letterSpacing: .5,
-		textTransform: "uppercase",
-		background: "var(--sb-color-sys-surface-muted, rgba(128,128,128,0.15))"
-	},
-	value: {
-		fontFamily: MONO_STACK,
-		fontSize: 12,
-		opacity: .85,
-		wordBreak: "break-all"
-	},
-	swatch: {
-		display: "inline-block",
-		width: 14,
-		height: 14,
-		verticalAlign: "middle",
-		marginRight: 6,
-		borderRadius: 3,
-		border: "1px solid var(--sb-color-sys-border-default, rgba(0,0,0,0.1))"
-	}
-};
-function TokenTable({ filter, type, showVar = true, caption }) {
+function TokenTable({ filter, type, caption, sortBy = "path", sortDir = "asc", onSelect }) {
 	const { resolved, activeTheme, cssVarPrefix } = useProject();
 	const colorFormat = useColorFormat();
+	const [selectedPath, setSelectedPath] = useState(null);
 	const rows = useMemo(() => {
-		return Object.entries(resolved).filter(([path, token]) => {
+		return sortTokens(Object.entries(resolved).filter(([path, token]) => {
 			if (!globMatch(path, filter)) return false;
 			if (type && token.$type !== type) return false;
 			return true;
-		}).toSorted(([a], [b]) => a.localeCompare(b, void 0, { numeric: true })).map(([path, token]) => {
+		}), {
+			by: sortBy,
+			dir: sortDir
+		}).map(([path, token]) => {
 			const isColor = token.$type === "color";
 			const color = isColor ? formatColor(token.$value, colorFormat) : null;
 			return {
 				path,
 				type: token.$type ?? "",
-				value: color ? color.value : formatValue(token.$value),
+				value: formatTokenValue(token.$value, token.$type, colorFormat),
 				outOfGamut: color?.outOfGamut ?? false,
-				description: token.$description ?? "",
 				cssVar: makeCssVar(path, cssVarPrefix),
 				isColor
 			};
@@ -3902,144 +3136,94 @@ function TokenTable({ filter, type, showVar = true, caption }) {
 		filter,
 		type,
 		cssVarPrefix,
-		colorFormat
+		colorFormat,
+		sortBy,
+		sortDir
 	]);
+	const handleRowClick = useCallback((path) => {
+		if (onSelect) onSelect(path);
+		else setSelectedPath(path);
+	}, [onSelect]);
 	const captionText = caption ?? `${rows.length} token${rows.length === 1 ? "" : "s"}${filter ? ` matching \`${filter}\`` : ""}${type ? ` · $type=${type}` : ""} · ${activeTheme}`;
 	if (rows.length === 0) return /* @__PURE__ */ jsx("div", {
 		...themeAttrs(cssVarPrefix, activeTheme),
-		style: {
-			...chromeAliases(cssVarPrefix),
-			...styles$1.wrapper
-		},
 		children: /* @__PURE__ */ jsx("div", {
-			style: styles$1.empty,
+			className: "sb-block__empty",
 			children: "No tokens match this filter."
 		})
 	});
-	return /* @__PURE__ */ jsx("div", {
+	return /* @__PURE__ */ jsxs("div", {
 		...themeAttrs(cssVarPrefix, activeTheme),
-		style: {
-			...chromeAliases(cssVarPrefix),
-			...styles$1.wrapper
-		},
-		children: /* @__PURE__ */ jsxs("table", {
-			style: styles$1.table,
+		children: [/* @__PURE__ */ jsxs("table", {
+			className: "sb-token-table__table",
 			children: [
 				/* @__PURE__ */ jsx("caption", {
-					style: styles$1.caption,
+					className: "sb-token-table__caption",
 					children: captionText
 				}),
-				/* @__PURE__ */ jsxs("colgroup", { children: [
-					/* @__PURE__ */ jsx("col", { style: { width: "30%" } }),
-					/* @__PURE__ */ jsx("col", { style: { width: "8%" } }),
-					/* @__PURE__ */ jsx("col", { style: { width: showVar ? "28%" : "40%" } }),
-					showVar && /* @__PURE__ */ jsx("col", { style: { width: "24%" } }),
-					/* @__PURE__ */ jsx("col", {})
-				] }),
-				/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
-					/* @__PURE__ */ jsx("th", {
-						style: styles$1.th,
-						children: "Path"
-					}),
-					/* @__PURE__ */ jsx("th", {
-						style: styles$1.th,
-						children: "Type"
-					}),
-					/* @__PURE__ */ jsx("th", {
-						style: styles$1.th,
-						children: "Value"
-					}),
-					showVar && /* @__PURE__ */ jsx("th", {
-						style: styles$1.th,
-						children: "CSS var"
-					}),
-					/* @__PURE__ */ jsx("th", {
-						style: styles$1.th,
-						children: "Description"
-					})
-				] }) }),
-				/* @__PURE__ */ jsx("tbody", { children: rows.map((row) => /* @__PURE__ */ jsxs("tr", { children: [
-					/* @__PURE__ */ jsx("td", {
-						style: {
-							...styles$1.td,
-							...styles$1.path
-						},
+				/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [/* @__PURE__ */ jsx("th", {
+					className: cx("sb-token-table__th", "sb-token-table__th--path"),
+					children: "Path"
+				}), /* @__PURE__ */ jsx("th", {
+					className: cx("sb-token-table__th", "sb-token-table__th--value"),
+					children: "Value"
+				})] }) }),
+				/* @__PURE__ */ jsx("tbody", { children: rows.map((row) => /* @__PURE__ */ jsxs("tr", {
+					className: "sb-token-table__row",
+					onClick: () => handleRowClick(row.path),
+					onKeyDown: (e) => {
+						if (e.key === "Enter" || e.key === " ") {
+							e.preventDefault();
+							handleRowClick(row.path);
+						}
+					},
+					tabIndex: 0,
+					"aria-label": `Inspect ${row.path}`,
+					"data-testid": "token-table-row",
+					"data-path": row.path,
+					children: [/* @__PURE__ */ jsx("td", {
+						className: cx("sb-token-table__td", "sb-token-table__path"),
 						children: row.path
-					}),
-					/* @__PURE__ */ jsx("td", {
-						style: styles$1.td,
-						children: row.type && /* @__PURE__ */ jsx("span", {
-							style: styles$1.typePill,
-							children: row.type
+					}), /* @__PURE__ */ jsx("td", {
+						className: "sb-token-table__td",
+						children: /* @__PURE__ */ jsxs("span", {
+							className: "sb-token-table__value-cell",
+							children: [
+								row.type && /* @__PURE__ */ jsx("span", {
+									className: "sb-token-table__type-pill",
+									children: row.type
+								}),
+								row.isColor && /* @__PURE__ */ jsx("span", {
+									className: "sb-token-table__swatch",
+									style: { background: row.cssVar },
+									"aria-hidden": true
+								}),
+								/* @__PURE__ */ jsx("span", {
+									className: "sb-token-table__value-text",
+									title: row.value,
+									"data-testid": "token-table-value",
+									children: row.value
+								}),
+								row.outOfGamut && /* @__PURE__ */ jsx("span", {
+									title: "Out of sRGB gamut for this format",
+									"aria-label": "out of gamut",
+									className: "sb-token-table__gamut-warn",
+									children: "⚠"
+								})
+							]
 						})
-					}),
-					/* @__PURE__ */ jsxs("td", {
-						style: {
-							...styles$1.td,
-							...styles$1.value
-						},
-						children: [
-							row.isColor && /* @__PURE__ */ jsx("span", {
-								style: {
-									...styles$1.swatch,
-									background: row.cssVar
-								},
-								"aria-hidden": true
-							}),
-							/* @__PURE__ */ jsx("span", { children: row.value }),
-							row.outOfGamut && /* @__PURE__ */ jsx("span", {
-								title: "Out of sRGB gamut for this format",
-								"aria-label": "out of gamut",
-								style: { marginLeft: 6 },
-								children: "⚠"
-							})
-						]
-					}),
-					showVar && /* @__PURE__ */ jsx("td", {
-						style: {
-							...styles$1.td,
-							...styles$1.value
-						},
-						children: row.cssVar
-					}),
-					/* @__PURE__ */ jsx("td", {
-						style: styles$1.td,
-						children: row.description
-					})
-				] }, row.path)) })
+					})]
+				}, row.path)) })
 			]
-		})
+		}), selectedPath !== null && /* @__PURE__ */ jsx(DetailOverlay, {
+			path: selectedPath,
+			onClose: () => setSelectedPath(null),
+			testId: "token-table-overlay"
+		})]
 	});
 }
 //#endregion
 //#region src/TypographyScale.tsx
-const styles = {
-	wrapper: surfaceStyle,
-	caption: captionStyle,
-	empty: emptyStyle,
-	row: {
-		display: "grid",
-		gridTemplateColumns: "minmax(160px, 220px) 1fr",
-		gap: 16,
-		alignItems: "baseline",
-		padding: "14px 0",
-		borderBottom: BORDER_DEFAULT
-	},
-	meta: {
-		display: "flex",
-		flexDirection: "column",
-		gap: 2
-	},
-	path: {
-		fontFamily: MONO_STACK,
-		fontSize: 12
-	},
-	specs: {
-		fontFamily: MONO_STACK,
-		fontSize: 11,
-		opacity: .7
-	}
-};
 function asDimension(raw) {
 	if (raw == null) return void 0;
 	if (typeof raw === "string" || typeof raw === "number") return String(raw);
@@ -4074,13 +3258,16 @@ function buildRow(path, composite) {
 		].filter(Boolean).join(" · ")
 	};
 }
-function TypographyScale({ filter = "typography", sample = "The quick brown fox jumps over the lazy dog.", caption }) {
+function TypographyScale({ filter, sample = "The quick brown fox jumps over the lazy dog.", caption, sortBy = "path", sortDir = "asc" }) {
 	const { resolved, activeTheme, cssVarPrefix } = useProject();
 	const rows = useMemo(() => {
-		return Object.entries(resolved).filter(([path, token]) => {
+		return sortTokens(Object.entries(resolved).filter(([path, token]) => {
 			if (token.$type !== "typography") return false;
 			return globMatch(path, filter);
-		}).toSorted(([a], [b]) => a.localeCompare(b, void 0, { numeric: true })).map(([path, token]) => {
+		}), {
+			by: sortBy,
+			dir: sortDir
+		}).map(([path, token]) => {
 			const value = token.$value;
 			if (!value || typeof value !== "object") return {
 				path,
@@ -4089,37 +3276,34 @@ function TypographyScale({ filter = "typography", sample = "The quick brown fox
 			};
 			return buildRow(path, value);
 		});
-	}, [resolved, filter]);
+	}, [
+		resolved,
+		filter,
+		sortBy,
+		sortDir
+	]);
 	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", {
 		...themeAttrs(cssVarPrefix, activeTheme),
-		style: {
-			...chromeAliases(cssVarPrefix),
-			...styles.wrapper
-		},
 		children: /* @__PURE__ */ jsx("div", {
-			style: styles.empty,
+			className: "sb-block__empty",
 			children: "No typography tokens match this filter."
 		})
 	});
 	return /* @__PURE__ */ jsxs("div", {
 		...themeAttrs(cssVarPrefix, activeTheme),
-		style: {
-			...chromeAliases(cssVarPrefix),
-			...styles.wrapper
-		},
 		children: [/* @__PURE__ */ jsx("div", {
-			style: styles.caption,
+			className: "sb-block__caption",
 			children: captionText
 		}), rows.map((row) => /* @__PURE__ */ jsxs("div", {
-			style: styles.row,
+			className: "sb-typography-scale__row",
 			children: [/* @__PURE__ */ jsxs("div", {
-				style: styles.meta,
+				className: "sb-typography-scale__meta",
 				children: [/* @__PURE__ */ jsx("span", {
-					style: styles.path,
+					className: "sb-typography-scale__path",
 					children: row.path
 				}), row.specs && /* @__PURE__ */ jsx("span", {
-					style: styles.specs,
+					className: "sb-typography-scale__specs",
 					children: row.specs
 				})]
 			}), /* @__PURE__ */ jsx("div", {
@@ -4130,6 +3314,6 @@ function TypographyScale({ filter = "typography", sample = "The quick brown fox
 	});
 }
 //#endregion
-export { AliasChain, AliasedBy, AxesContext, AxisVariance, BorderPreview, BorderSample, COLOR_FORMATS, ColorFormatContext, ColorPalette, CompositeBreakdown, CompositePreview, ConsumerOutput, DimensionBar, DimensionScale, FontFamilySample, FontWeightScale, GradientPalette, MotionPreview, MotionSample, ShadowPreview, ShadowSample, StrokeStyleSample, SwatchbookContext, SwatchbookProvider, ThemeContext, TokenDetail, TokenHeader, TokenNavigator, TokenTable, TokenUsageSnippet, TypographyScale, formatColor, useActiveAxes, useActiveTheme, useColorFormat, useOptionalSwatchbookData, useSwatchbookData };
+export { AliasChain, AliasedBy, AxesContext, AxisVariance, BorderPreview, BorderSample, COLOR_FORMATS, ColorFormatContext, ColorPalette, CompositeBreakdown, CompositePreview, ConsumerOutput, Diagnostics, DimensionBar, DimensionScale, FontFamilySample, FontWeightScale, GradientPalette, MotionPreview, MotionSample, ShadowPreview, ShadowSample, StrokeStyleSample, SwatchbookContext, SwatchbookProvider, ThemeContext, TokenDetail, TokenHeader, TokenNavigator, TokenTable, TokenUsageSnippet, TypographyScale, formatColor, useActiveAxes, useActiveTheme, useColorFormat, useOptionalSwatchbookData, useSwatchbookData };
 
 //# sourceMappingURL=index.mjs.map