@unpunnyfuns/swatchbook-blocks 0.2.1 → 0.3.0

package/dist/index.mjs

@@ -1,8 +1,8 @@
 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";
 //#region src/format-color.ts
 const COLOR_FORMATS = [
 	"hex",
@@ -178,6 +178,65 @@ function stringifyFallback(value, fallback) {
 	return fallback;
 }
 //#endregion
+//#region src/internal/styles.tsx
+/**
+* Chrome-style primitives shared across every block. The `var(--sb-*)`
+* references resolve to the active `cssVarPrefix` via the wrapper's
+* `chromeAliases()` spread, so blocks stay theme-aware without each one
+* reimplementing the fallback chain.
+*
+* Add a new constant here when a second block needs it — not when the
+* first one does. Keep ad-hoc inline values out of blocks so restyling
+* the chrome is a one-file change.
+*/
+const MONO_STACK = "ui-monospace, SFMono-Regular, Menlo, monospace";
+const TEXT_DEFAULT = "var(--sb-color-sys-text-default, CanvasText)";
+const TEXT_MUTED = "var(--sb-color-sys-text-muted, CanvasText)";
+const SURFACE_DEFAULT = "var(--sb-color-sys-surface-default, Canvas)";
+const SURFACE_RAISED = "var(--sb-color-sys-surface-raised, Canvas)";
+const SURFACE_MUTED = "var(--sb-color-sys-surface-muted, rgba(128,128,128,0.15))";
+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 BORDER_STRONG = `1px solid var(--sb-color-sys-border-default, rgba(128,128,128,0.3))`;
+const surfaceStyle = {
+	fontFamily: "var(--sb-typography-sys-body-font-family, system-ui)",
+	fontSize: "var(--sb-typography-sys-body-font-size, 14px)",
+	color: TEXT_DEFAULT,
+	background: SURFACE_DEFAULT,
+	padding: 12,
+	borderRadius: 6
+};
+const captionStyle = {
+	padding: "4px 0 12px",
+	color: TEXT_MUTED,
+	fontSize: 12
+};
+const typePillStyle = {
+	display: "inline-block",
+	padding: "2px 6px",
+	borderRadius: 4,
+	fontSize: 10,
+	letterSpacing: .5,
+	textTransform: "uppercase",
+	background: SURFACE_MUTED
+};
+const emptyStyle = {
+	padding: "24px 12px",
+	textAlign: "center",
+	color: TEXT_MUTED
+};
+/**
+* Inner content for a block's "nothing to render" state. Call sites wrap
+* it in their own block wrapper (which already carries `themeAttrs` +
+* `chromeAliases`), so the message itself just needs the muted type.
+*/
+function EmptyState({ children }) {
+	return /* @__PURE__ */ jsx("div", {
+		style: emptyStyle,
+		children
+	});
+}
+//#endregion
 //#region src/internal/data-attr.ts
 /**
 * Produce a prefixed `data-*` attribute name when `prefix` is set, bare
@@ -189,12 +248,23 @@ function dataAttr(prefix, key) {
 	return prefix ? `data-${prefix}-${key}` : `data-${key}`;
 }
 /**
-* 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)} />`.
+* Marker attribute set on every block wrapper. Used as the scope selector
+* for the defensive element-reset stylesheet in `block-reset.ts` so
+* Storybook MDX docs CSS (`.sbdocs table`, `.sbdocs ul`, …) can't bleed
+* into our chrome.
+*/
+const BLOCK_ATTR = "data-swatchbook-block";
+/**
+* Spread helper for the common `<div data-<prefix>-theme="…" data-swatchbook-block>`
+* block wrapper. Returns an object keyed on the prefixed theme attribute
+* plus the scoping marker so the call site stays readable:
+* `<div {...themeAttrs(prefix, theme)} />`.
 */
 function themeAttrs(prefix, themeName) {
-	return { [dataAttr(prefix, "theme")]: themeName };
+	return {
+		[dataAttr(prefix, "theme")]: themeName,
+		[BLOCK_ATTR]: ""
+	};
 }
 /**
 * Vars block chrome reads by literal `var(--sb-*)` regardless of what the
@@ -361,6 +431,62 @@ function useColorFormat() {
 	return contextValue ?? channelGlobals.format ?? "hex";
 }
 //#endregion
+//#region src/internal/block-reset.ts
+/**
+* Defensive element reset scoped to every block wrapper.
+*
+* Storybook 10's MDX docs applies house-style CSS to semantic elements
+* (`.sbdocs table`, `.sbdocs th/td`, `.sbdocs ul/li`, `.sbdocs details/summary`)
+* that bleeds into any block rendered inside a docs page. Our blocks set
+* inline styles on those elements for the properties they care about, but
+* anything they don't touch (background, border, margin, etc.) inherits
+* the docs look. That's why the Dashboard tree/table looked different
+* inside MDX vs a regular story.
+*
+* The fix mounts one stylesheet once per browsing session that scopes
+* `all: revert` on the semantic elements used by blocks, under the
+* `[data-swatchbook-block]` attribute carried by every block's outer
+* wrapper (via `themeAttrs`). `all: revert` restores browser defaults —
+* the block's inline styles still win on top of that, and MDX house
+* styles stop leaking in.
+*
+* The reset excludes the wrapper itself (direct `[data-swatchbook-block]`
+* selector) because the wrapper's `surfaceStyle` is what we want to keep.
+*/
+const STYLE_ID = "swatchbook-block-reset";
+const RESET_CSS = `[data-swatchbook-block] table,
+[data-swatchbook-block] thead,
+[data-swatchbook-block] tbody,
+[data-swatchbook-block] tr,
+[data-swatchbook-block] th,
+[data-swatchbook-block] td,
+[data-swatchbook-block] caption,
+[data-swatchbook-block] ul,
+[data-swatchbook-block] ol,
+[data-swatchbook-block] li,
+[data-swatchbook-block] details,
+[data-swatchbook-block] summary,
+[data-swatchbook-block] code,
+[data-swatchbook-block] pre,
+[data-swatchbook-block] p,
+[data-swatchbook-block] h1,
+[data-swatchbook-block] h2,
+[data-swatchbook-block] h3,
+[data-swatchbook-block] h4,
+[data-swatchbook-block] h5,
+[data-swatchbook-block] h6 {
+  all: revert-layer;
+}
+`;
+function ensureBlockResetStylesheet() {
+	if (typeof document === "undefined") return;
+	if (document.getElementById(STYLE_ID)) return;
+	const style = document.createElement("style");
+	style.id = STYLE_ID;
+	style.textContent = RESET_CSS;
+	document.head.appendChild(style);
+}
+//#endregion
 //#region src/internal/use-project.ts
 const STYLE_ELEMENT_ID = "swatchbook-tokens";
 function ensureStylesheet(css) {
@@ -397,6 +523,7 @@ function snapshotToData(snapshot) {
 		themes: snapshot.themes,
 		themesResolved: snapshot.themesResolved,
 		resolved: snapshot.themesResolved[snapshot.activeTheme] ?? {},
+		diagnostics: snapshot.diagnostics,
 		cssVarPrefix: snapshot.cssVarPrefix
 	};
 }
@@ -415,6 +542,9 @@ function snapshotToData(snapshot) {
 function useProject() {
 	const snapshot = useOptionalSwatchbookData();
 	const fallback = useVirtualModuleFallback(snapshot === null);
+	useEffect(() => {
+		ensureBlockResetStylesheet();
+	}, []);
 	return snapshot !== null ? snapshotToData(snapshot) : fallback;
 }
 function useVirtualModuleFallback(enabled) {
@@ -437,6 +567,7 @@ function useVirtualModuleFallback(enabled) {
 		themes,
 		themesResolved,
 		resolved: themesResolved[activeTheme] ?? {},
+		diagnostics,
 		cssVarPrefix
 	};
 }
@@ -444,6 +575,24 @@ function makeCssVar(path, prefix) {
 	const tail = path.replaceAll(".", "-");
 	return prefix ? `var(--${prefix}-${tail})` : `var(--${tail})`;
 }
+/**
+* Match a dot-separated DTCG token path against a block `filter` prop.
+*
+* **Supported shapes** (the narrow subset we need — DTCG paths don't have
+* directories, brace expansion, or regex, so we skip a full glob engine):
+*
+* | Pattern            | Matches                                             |
+* | ------------------ | --------------------------------------------------- |
+* | `undefined` / `''` | everything                                          |
+* | `*` or `**`        | everything                                          |
+* | `color`            | exact path `color`, or any descendant `color.*`     |
+* | `color.sys.*`      | any path whose fixed prefix is `color.sys.`         |
+* | `color**`          | any path starting with `color`                      |
+*
+* Not supported (all pass through as literal segment matchers): brace
+* expansion (`{a,b}`), mid-path globs (`color.*.bg`), negation (`!foo`),
+* character classes (`[sys]`). If you hit those, pre-filter by hand.
+*/
 function globMatch(path, glob) {
 	if (!glob) return true;
 	if (glob === "*" || glob === "**") return true;
@@ -451,23 +600,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 }) {
@@ -483,31 +621,112 @@ 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/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 = {
+const styles$16 = {
 	wrapper: surfaceStyle,
 	caption: captionStyle,
 	empty: emptyStyle,
@@ -550,9 +769,9 @@ const styles$14 = {
 		columnGap: 12,
 		rowGap: 2
 	},
-	breakdownKey: { color: "var(--sb-color-sys-text-muted, CanvasText)" }
+	breakdownKey: { color: TEXT_MUTED }
 };
-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;
@@ -575,35 +794,36 @@ 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
+			...styles$16.wrapper
 		},
 		children: /* @__PURE__ */ jsx("div", {
-			style: styles$14.empty,
+			style: styles$16.empty,
 			children: "No border tokens match this filter."
 		})
 	});
@@ -611,43 +831,43 @@ function BorderPreview({ filter = "border", caption }) {
 		...themeAttrs(cssVarPrefix, activeTheme),
 		style: {
 			...chromeAliases(cssVarPrefix),
-			...styles$14.wrapper
+			...styles$16.wrapper
 		},
 		children: [/* @__PURE__ */ jsx("div", {
-			style: styles$14.caption,
+			style: styles$16.caption,
 			children: captionText
 		}), rows.map((row) => /* @__PURE__ */ jsxs("div", {
-			style: styles$14.row,
+			style: styles$16.row,
 			children: [
 				/* @__PURE__ */ jsxs("div", {
-					style: styles$14.meta,
+					style: styles$16.meta,
 					children: [/* @__PURE__ */ jsx("span", {
-						style: styles$14.path,
+						style: styles$16.path,
 						children: row.path
 					}), /* @__PURE__ */ jsx("span", {
-						style: styles$14.cssVar,
+						style: styles$16.cssVar,
 						children: row.cssVar
 					})]
 				}),
 				/* @__PURE__ */ jsx("div", {
-					style: styles$14.sampleCell,
+					style: styles$16.sampleCell,
 					children: /* @__PURE__ */ jsx(BorderSample, { path: row.path })
 				}),
 				/* @__PURE__ */ jsxs("div", {
-					style: styles$14.breakdown,
+					style: styles$16.breakdown,
 					children: [
 						/* @__PURE__ */ jsx("span", {
-							style: styles$14.breakdownKey,
+							style: styles$16.breakdownKey,
 							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,
+							style: styles$16.breakdownKey,
 							children: "style"
 						}),
 						/* @__PURE__ */ jsx("span", { children: row.value.style != null ? String(row.value.style) : "—" }),
 						/* @__PURE__ */ jsx("span", {
-							style: styles$14.breakdownKey,
+							style: styles$16.breakdownKey,
 							children: "color"
 						}),
 						/* @__PURE__ */ jsx("span", { children: formatColor$2(row.value.color) })
@@ -659,7 +879,7 @@ function BorderPreview({ filter = "border", caption }) {
 }
 //#endregion
 //#region src/ColorPalette.tsx
-const styles$13 = {
+const styles$15 = {
 	wrapper: surfaceStyle,
 	caption: captionStyle,
 	empty: emptyStyle,
@@ -687,7 +907,7 @@ const styles$13 = {
 	swatch: {
 		height: 56,
 		width: "100%",
-		borderBottom: "1px solid var(--sb-color-sys-border-default, rgba(0,0,0,0.08))"
+		borderBottom: BORDER_FAINT
 	},
 	meta: {
 		padding: "8px 10px",
@@ -719,14 +939,17 @@ 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
@@ -758,7 +981,9 @@ 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}`;
@@ -766,41 +991,44 @@ function ColorPalette({ filter = "color", groupBy, caption }) {
 		...themeAttrs(cssVarPrefix, activeTheme),
 		style: {
 			...chromeAliases(cssVarPrefix),
-			...styles$13.wrapper
+			...styles$15.wrapper
 		},
 		children: /* @__PURE__ */ jsx("div", {
-			style: styles$13.empty,
+			style: styles$15.empty,
 			children: "No color tokens match this filter."
 		})
 	});
 	return /* @__PURE__ */ jsxs("div", {
 		...themeAttrs(cssVarPrefix, activeTheme),
-		style: styles$13.wrapper,
+		style: {
+			...chromeAliases(cssVarPrefix),
+			...styles$15.wrapper
+		},
 		children: [/* @__PURE__ */ jsx("div", {
-			style: styles$13.caption,
+			style: styles$15.caption,
 			children: captionText
 		}), groups.map(([group, swatches]) => /* @__PURE__ */ jsxs("section", {
-			style: styles$13.group,
+			style: styles$15.group,
 			children: [/* @__PURE__ */ jsx("div", {
-				style: styles$13.groupHeader,
+				style: styles$15.groupHeader,
 				children: group
 			}), /* @__PURE__ */ jsx("div", {
-				style: styles$13.grid,
+				style: styles$15.grid,
 				children: swatches.map((swatch) => /* @__PURE__ */ jsxs("div", {
-					style: styles$13.card,
+					style: styles$15.card,
 					children: [/* @__PURE__ */ jsx("div", {
 						style: {
-							...styles$13.swatch,
+							...styles$15.swatch,
 							background: swatch.cssVar
 						},
 						"aria-hidden": true
 					}), /* @__PURE__ */ jsxs("div", {
-						style: styles$13.meta,
+						style: styles$15.meta,
 						children: [/* @__PURE__ */ jsx("span", {
-							style: styles$13.leaf,
+							style: styles$15.leaf,
 							children: swatch.leaf
 						}), /* @__PURE__ */ jsxs("span", {
-							style: styles$13.value,
+							style: styles$15.value,
 							children: [swatch.value, swatch.outOfGamut && /* @__PURE__ */ jsxs("span", {
 								title: "Out of sRGB gamut for this format",
 								"aria-label": "out of gamut",
@@ -815,9 +1043,135 @@ function ColorPalette({ filter = "color", groupBy, caption }) {
 	});
 }
 //#endregion
+//#region src/Diagnostics.tsx
+const severityColor = {
+	error: "#d64545",
+	warn: "#b08900",
+	info: "inherit"
+};
+const severityLabel = {
+	error: "ERROR",
+	warn: "WARN",
+	info: "INFO"
+};
+const styles$14 = {
+	wrapper: surfaceStyle,
+	summary: {
+		display: "flex",
+		alignItems: "center",
+		gap: 8,
+		padding: "4px 0",
+		fontSize: 13,
+		cursor: "pointer",
+		listStyle: "none",
+		fontWeight: 600
+	},
+	list: {
+		listStyle: "none",
+		margin: "8px 0 0",
+		padding: 0,
+		display: "flex",
+		flexDirection: "column"
+	},
+	row: {
+		display: "grid",
+		gridTemplateColumns: "60px 1fr",
+		gap: 12,
+		padding: "8px 4px",
+		borderTop: BORDER_FAINT,
+		fontSize: 12
+	},
+	label: {
+		fontWeight: 600,
+		fontSize: 10,
+		letterSpacing: .5
+	},
+	meta: {
+		color: TEXT_MUTED,
+		fontSize: 11,
+		marginTop: 4,
+		opacity: .7
+	}
+};
+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 summaryColor(diagnostics) {
+	if (diagnostics.length === 0) return "#30a46c";
+	if (diagnostics.some((d) => d.severity === "error")) return severityColor.error;
+	if (diagnostics.some((d) => d.severity === "warn")) return severityColor.warn;
+	return "inherit";
+}
+/**
+* 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)}`;
+	return /* @__PURE__ */ jsx("div", {
+		...themeAttrs(cssVarPrefix, activeTheme),
+		style: {
+			...chromeAliases(cssVarPrefix),
+			...styles$14.wrapper
+		},
+		"data-testid": "diagnostics",
+		children: /* @__PURE__ */ jsxs("details", {
+			open: hasErrorsOrWarnings,
+			children: [/* @__PURE__ */ jsx("summary", {
+				style: {
+					...styles$14.summary,
+					color: summaryColor(diagnostics)
+				},
+				children: headingText
+			}), diagnostics.length > 0 && /* @__PURE__ */ jsx("ul", {
+				style: styles$14.list,
+				children: diagnostics.map((d, i) => /* @__PURE__ */ jsxs("li", {
+					style: styles$14.row,
+					children: [/* @__PURE__ */ jsx("span", {
+						style: {
+							...styles$14.label,
+							color: severityColor[d.severity]
+						},
+						children: severityLabel[d.severity]
+					}), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("div", { children: d.message }), (d.group || d.filename) && /* @__PURE__ */ jsx("div", {
+						style: styles$14.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$13 = {
 	bar: {
 		height: 14,
 		background: "var(--sb-color-sys-accent-bg, #3b82f6)",
@@ -828,11 +1182,11 @@ const styles$12 = {
 		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))"
+		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))",
+		border: BORDER_STRONG,
 		minWidth: 1,
 		minHeight: 1
 	}
@@ -865,7 +1219,7 @@ function DimensionBar({ path, kind = "length" }) {
 		case "radius": return /* @__PURE__ */ jsx("div", {
 			style: {
 				...aliases,
-				...styles$12.radiusSample,
+				...styles$13.radiusSample,
 				borderRadius: cssVar
 			},
 			"aria-hidden": true
@@ -873,7 +1227,7 @@ function DimensionBar({ path, kind = "length" }) {
 		case "size": return /* @__PURE__ */ jsx("div", {
 			style: {
 				...aliases,
-				...styles$12.sizeSample,
+				...styles$13.sizeSample,
 				width: cappedValue,
 				height: cappedValue
 			},
@@ -882,7 +1236,7 @@ function DimensionBar({ path, kind = "length" }) {
 		default: return /* @__PURE__ */ jsx("div", {
 			style: {
 				...aliases,
-				...styles$12.bar,
+				...styles$13.bar,
 				width: cappedValue
 			},
 			"aria-hidden": true
@@ -890,9 +1244,151 @@ function DimensionBar({ path, kind = "length" }) {
 	}
 }
 //#endregion
+//#region src/internal/format-token-value.ts
+/**
+* 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;
-const styles$11 = {
+const styles$12 = {
 	wrapper: surfaceStyle,
 	caption: captionStyle,
 	empty: emptyStyle,
@@ -955,41 +1451,41 @@ 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
+			...styles$12.wrapper
 		},
 		children: /* @__PURE__ */ jsx("div", {
-			style: styles$11.empty,
+			style: styles$12.empty,
 			children: "No dimension tokens match this filter."
 		})
 	});
@@ -997,31 +1493,31 @@ function DimensionScale({ filter = "dimension", kind = "length", caption }) {
 		...themeAttrs(cssVarPrefix, activeTheme),
 		style: {
 			...chromeAliases(cssVarPrefix),
-			...styles$11.wrapper
+			...styles$12.wrapper
 		},
 		children: [/* @__PURE__ */ jsx("div", {
-			style: styles$11.caption,
+			style: styles$12.caption,
 			children: captionText
 		}), rows.map((row) => /* @__PURE__ */ jsxs("div", {
-			style: styles$11.row,
+			style: styles$12.row,
 			children: [
 				/* @__PURE__ */ jsxs("div", {
-					style: styles$11.meta,
+					style: styles$12.meta,
 					children: [/* @__PURE__ */ jsx("span", {
-						style: styles$11.path,
+						style: styles$12.path,
 						children: row.path
 					}), /* @__PURE__ */ jsx("span", {
-						style: styles$11.specs,
+						style: styles$12.specs,
 						children: row.displayValue
 					})]
 				}),
 				/* @__PURE__ */ jsxs("div", {
-					style: styles$11.visualCell,
+					style: styles$12.visualCell,
 					children: [/* @__PURE__ */ jsx(DimensionBar, {
 						path: row.path,
 						kind
 					}), row.capped && /* @__PURE__ */ jsxs("span", {
-						style: styles$11.cap,
+						style: styles$12.cap,
 						children: [
 							"capped at ",
 							MAX_RENDER_PX,
@@ -1030,7 +1526,7 @@ function DimensionScale({ filter = "dimension", kind = "length", caption }) {
 					})]
 				}),
 				/* @__PURE__ */ jsx("span", {
-					style: styles$11.cssVar,
+					style: styles$12.cssVar,
 					children: row.cssVar
 				})
 			]
@@ -1039,7 +1535,7 @@ function DimensionScale({ filter = "dimension", kind = "length", caption }) {
 }
 //#endregion
 //#region src/FontFamilySample.tsx
-const styles$10 = {
+const styles$11 = {
 	wrapper: surfaceStyle,
 	caption: captionStyle,
 	row: {
@@ -1066,7 +1562,7 @@ const styles$10 = {
 	stack: {
 		fontFamily: MONO_STACK,
 		fontSize: 11,
-		color: "var(--sb-color-sys-text-muted, CanvasText)"
+		color: TEXT_MUTED
 	},
 	sample: {
 		fontSize: 22,
@@ -1075,7 +1571,7 @@ const styles$10 = {
 	cssVar: {
 		fontFamily: MONO_STACK,
 		fontSize: 11,
-		color: "var(--sb-color-sys-text-muted, CanvasText)"
+		color: TEXT_MUTED
 	},
 	empty: emptyStyle
 };
@@ -1084,13 +1580,16 @@ function stackString(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)
@@ -1098,17 +1597,19 @@ 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
+			...styles$11.wrapper
 		},
 		children: /* @__PURE__ */ jsx("div", {
-			style: styles$10.empty,
+			style: styles$11.empty,
 			children: "No fontFamily tokens match this filter."
 		})
 	});
@@ -1116,33 +1617,33 @@ function FontFamilySample({ filter = "fontFamily", sample = "The quick brown fox
 		...themeAttrs(cssVarPrefix, activeTheme),
 		style: {
 			...chromeAliases(cssVarPrefix),
-			...styles$10.wrapper
+			...styles$11.wrapper
 		},
 		children: [/* @__PURE__ */ jsx("div", {
-			style: styles$10.caption,
+			style: styles$11.caption,
 			children: captionText
 		}), rows.map((row) => /* @__PURE__ */ jsxs("div", {
-			style: styles$10.row,
+			style: styles$11.row,
 			children: [
 				/* @__PURE__ */ jsxs("div", {
-					style: styles$10.meta,
+					style: styles$11.meta,
 					children: [/* @__PURE__ */ jsx("span", {
-						style: styles$10.path,
+						style: styles$11.path,
 						children: row.path
 					}), /* @__PURE__ */ jsx("span", {
-						style: styles$10.stack,
+						style: styles$11.stack,
 						children: row.stack
 					})]
 				}),
 				/* @__PURE__ */ jsx("div", {
 					style: {
-						...styles$10.sample,
+						...styles$11.sample,
 						fontFamily: row.cssVar
 					},
 					children: sample
 				}),
 				/* @__PURE__ */ jsx("span", {
-					style: styles$10.cssVar,
+					style: styles$11.cssVar,
 					children: row.cssVar
 				})
 			]
@@ -1151,7 +1652,7 @@ function FontFamilySample({ filter = "fontFamily", sample = "The quick brown fox
 }
 //#endregion
 //#region src/FontWeightScale.tsx
-const styles$9 = {
+const styles$10 = {
 	wrapper: surfaceStyle,
 	caption: captionStyle,
 	empty: emptyStyle,
@@ -1179,7 +1680,7 @@ const styles$9 = {
 	value: {
 		fontFamily: MONO_STACK,
 		fontSize: 11,
-		color: "var(--sb-color-sys-text-muted, CanvasText)"
+		color: TEXT_MUTED
 	},
 	sample: {
 		fontSize: 28,
@@ -1188,7 +1689,7 @@ const styles$9 = {
 	cssVar: {
 		fontFamily: MONO_STACK,
 		fontSize: 11,
-		color: "var(--sb-color-sys-text-muted, CanvasText)"
+		color: TEXT_MUTED
 	}
 };
 function toWeight(raw) {
@@ -1199,39 +1700,37 @@ 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
+			...styles$10.wrapper
 		},
 		children: /* @__PURE__ */ jsx("div", {
-			style: styles$9.empty,
+			style: styles$10.empty,
 			children: "No fontWeight tokens match this filter."
 		})
 	});
@@ -1239,33 +1738,33 @@ function FontWeightScale({ filter = "fontWeight", sample = "Aa", caption }) {
 		...themeAttrs(cssVarPrefix, activeTheme),
 		style: {
 			...chromeAliases(cssVarPrefix),
-			...styles$9.wrapper
+			...styles$10.wrapper
 		},
 		children: [/* @__PURE__ */ jsx("div", {
-			style: styles$9.caption,
+			style: styles$10.caption,
 			children: captionText
 		}), rows.map((row) => /* @__PURE__ */ jsxs("div", {
-			style: styles$9.row,
+			style: styles$10.row,
 			children: [
 				/* @__PURE__ */ jsxs("div", {
-					style: styles$9.meta,
+					style: styles$10.meta,
 					children: [/* @__PURE__ */ jsx("span", {
-						style: styles$9.path,
+						style: styles$10.path,
 						children: row.path
 					}), /* @__PURE__ */ jsx("span", {
-						style: styles$9.value,
+						style: styles$10.value,
 						children: row.display
 					})]
 				}),
 				/* @__PURE__ */ jsx("div", {
 					style: {
-						...styles$9.sample,
+						...styles$10.sample,
 						fontWeight: row.cssVar
 					},
 					children: sample
 				}),
 				/* @__PURE__ */ jsx("span", {
-					style: styles$9.cssVar,
+					style: styles$10.cssVar,
 					children: row.cssVar
 				})
 			]
@@ -1274,7 +1773,7 @@ function FontWeightScale({ filter = "fontWeight", sample = "Aa", caption }) {
 }
 //#endregion
 //#region src/GradientPalette.tsx
-const styles$8 = {
+const styles$9 = {
 	wrapper: surfaceStyle,
 	caption: captionStyle,
 	empty: emptyStyle,
@@ -1325,7 +1824,7 @@ const styles$8 = {
 		width: 10,
 		height: 10,
 		borderRadius: 2,
-		border: "1px solid var(--sb-color-sys-border-default, rgba(0,0,0,0.1))",
+		border: BORDER_DEFAULT,
 		flex: "0 0 auto"
 	},
 	stopPosition: { opacity: .6 }
@@ -1346,35 +1845,36 @@ 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
+			...styles$9.wrapper
 		},
 		children: /* @__PURE__ */ jsx("div", {
-			style: styles$8.empty,
+			style: styles$9.empty,
 			children: "No gradient tokens match this filter."
 		})
 	});
@@ -1382,46 +1882,46 @@ function GradientPalette({ filter = "gradient", caption }) {
 		...themeAttrs(cssVarPrefix, activeTheme),
 		style: {
 			...chromeAliases(cssVarPrefix),
-			...styles$8.wrapper
+			...styles$9.wrapper
 		},
 		children: [/* @__PURE__ */ jsx("div", {
-			style: styles$8.caption,
+			style: styles$9.caption,
 			children: captionText
 		}), rows.map((row) => /* @__PURE__ */ jsxs("div", {
-			style: styles$8.row,
+			style: styles$9.row,
 			children: [
 				/* @__PURE__ */ jsxs("div", {
-					style: styles$8.meta,
+					style: styles$9.meta,
 					children: [/* @__PURE__ */ jsx("span", {
-						style: styles$8.path,
+						style: styles$9.path,
 						children: row.path
 					}), /* @__PURE__ */ jsx("span", {
-						style: styles$8.cssVar,
+						style: styles$9.cssVar,
 						children: row.cssVar
 					})]
 				}),
 				/* @__PURE__ */ jsx("div", {
 					style: {
-						...styles$8.sample,
+						...styles$9.sample,
 						background: `linear-gradient(to right, ${row.cssVar})`
 					},
 					"aria-hidden": true
 				}),
 				/* @__PURE__ */ jsx("div", {
-					style: styles$8.stops,
+					style: styles$9.stops,
 					children: row.stops.map((stop, i) => /* @__PURE__ */ jsxs("div", {
-						style: styles$8.stopRow,
+						style: styles$9.stopRow,
 						children: [
 							/* @__PURE__ */ jsx("span", {
 								style: {
-									...styles$8.stopSwatch,
+									...styles$9.stopSwatch,
 									background: stopCssColor(stop)
 								},
 								"aria-hidden": true
 							}),
 							/* @__PURE__ */ jsx("span", { children: stopCssColor(stop) }),
 							/* @__PURE__ */ jsxs("span", {
-								style: styles$8.stopPosition,
+								style: styles$9.stopPosition,
 								children: [
 									"@ ",
 									((stop.position ?? 0) * 100).toFixed(0),
@@ -1457,11 +1957,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$8 = {
 	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"
 	},
@@ -1476,7 +1976,7 @@ const styles$7 = {
 	},
 	reducedMotion: {
 		fontSize: 11,
-		color: "var(--sb-color-sys-text-muted, CanvasText)",
+		color: TEXT_MUTED,
 		fontStyle: "italic"
 	}
 };
@@ -1576,18 +2076,18 @@ function MotionSample({ path, speed = 1, runKey = 0 }) {
 	if (reducedMotion) return /* @__PURE__ */ jsx("div", {
 		style: {
 			...chromeAliases(cssVarPrefix),
-			...styles$7.reducedMotion
+			...styles$8.reducedMotion
 		},
 		children: "Animation suppressed by `prefers-reduced-motion: reduce`."
 	});
 	return /* @__PURE__ */ jsx("div", {
 		style: {
 			...chromeAliases(cssVarPrefix),
-			...styles$7.track
+			...styles$8.track
 		},
 		children: /* @__PURE__ */ jsx("div", {
 			style: {
-				...styles$7.ball,
+				...styles$8.ball,
 				left: phase === 1 ? "calc(100% - 32px)" : "4px",
 				transition: `left ${scaledDuration}ms ${easing}`
 			},
@@ -1603,11 +2103,11 @@ const SPEEDS = [
 	1,
 	2
 ];
-const styles$6 = {
+const styles$7 = {
 	wrapper: surfaceStyle,
 	caption: {
 		padding: "4px 0 4px",
-		color: "var(--sb-color-sys-text-muted, CanvasText)",
+		color: TEXT_MUTED,
 		fontSize: 12
 	},
 	controls: {
@@ -1618,7 +2118,7 @@ const styles$6 = {
 	},
 	controlLabel: {
 		fontSize: 11,
-		color: "var(--sb-color-sys-text-muted, CanvasText)",
+		color: TEXT_MUTED,
 		textTransform: "uppercase",
 		letterSpacing: .5
 	},
@@ -1628,7 +2128,7 @@ const styles$6 = {
 		padding: "4px 8px",
 		background: "transparent",
 		color: "inherit",
-		border: "1px solid var(--sb-color-sys-border-default, rgba(128,128,128,0.3))",
+		border: BORDER_STRONG,
 		borderRadius: 4,
 		cursor: "pointer"
 	},
@@ -1643,7 +2143,7 @@ const styles$6 = {
 		marginLeft: "auto",
 		background: "transparent",
 		color: "inherit",
-		border: "1px solid var(--sb-color-sys-border-default, rgba(128,128,128,0.3))",
+		border: BORDER_STRONG,
 		borderRadius: 4,
 		cursor: "pointer"
 	},
@@ -1671,18 +2171,18 @@ const styles$6 = {
 	specs: {
 		fontFamily: MONO_STACK,
 		fontSize: 11,
-		color: "var(--sb-color-sys-text-muted, CanvasText)"
+		color: TEXT_MUTED
 	},
 	cssVar: {
 		fontFamily: MONO_STACK,
 		fontSize: 11,
-		color: "var(--sb-color-sys-text-muted, CanvasText)",
+		color: TEXT_MUTED,
 		whiteSpace: "nowrap"
 	},
 	empty: {
 		padding: "24px 12px",
 		textAlign: "center",
-		color: "var(--sb-color-sys-text-muted, CanvasText)"
+		color: TEXT_MUTED
 	}
 };
 function formatSpec(row) {
@@ -1733,10 +2233,10 @@ function MotionPreview({ filter, caption }) {
 		...themeAttrs(cssVarPrefix, activeTheme),
 		style: {
 			...chromeAliases(cssVarPrefix),
-			...styles$6.wrapper
+			...styles$7.wrapper
 		},
 		children: /* @__PURE__ */ jsx("div", {
-			style: styles$6.empty,
+			style: styles$7.empty,
 			children: "No motion tokens match this filter."
 		})
 	});
@@ -1744,32 +2244,32 @@ function MotionPreview({ filter, caption }) {
 		...themeAttrs(cssVarPrefix, activeTheme),
 		style: {
 			...chromeAliases(cssVarPrefix),
-			...styles$6.wrapper
+			...styles$7.wrapper
 		},
 		children: [
 			/* @__PURE__ */ jsx("div", {
-				style: styles$6.caption,
+				style: styles$7.caption,
 				children: captionText
 			}),
 			/* @__PURE__ */ jsxs("div", {
-				style: styles$6.controls,
+				style: styles$7.controls,
 				children: [
 					/* @__PURE__ */ jsx("span", {
-						style: styles$6.controlLabel,
+						style: styles$7.controlLabel,
 						children: "Speed"
 					}),
 					SPEEDS.map((s) => /* @__PURE__ */ jsxs("button", {
 						type: "button",
 						style: {
-							...styles$6.speedBtn,
-							...s === speed ? styles$6.speedBtnActive : {}
+							...styles$7.speedBtn,
+							...s === speed ? styles$7.speedBtnActive : {}
 						},
 						onClick: () => setSpeed(s),
 						children: [s, "×"]
 					}, s)),
 					/* @__PURE__ */ jsx("button", {
 						type: "button",
-						style: styles$6.replayBtn,
+						style: styles$7.replayBtn,
 						onClick: () => setRun((n) => n + 1),
 						disabled: reducedMotion,
 						title: reducedMotion ? "Disabled by prefers-reduced-motion" : "Replay all",
@@ -1778,15 +2278,15 @@ function MotionPreview({ filter, caption }) {
 				]
 			}),
 			rows.map((row) => /* @__PURE__ */ jsxs("div", {
-				style: styles$6.row,
+				style: styles$7.row,
 				children: [
 					/* @__PURE__ */ jsxs("div", {
-						style: styles$6.meta,
+						style: styles$7.meta,
 						children: [/* @__PURE__ */ jsx("span", {
-							style: styles$6.path,
+							style: styles$7.path,
 							children: row.path
 						}), /* @__PURE__ */ jsx("span", {
-							style: styles$6.specs,
+							style: styles$7.specs,
 							children: formatSpec(row)
 						})]
 					}),
@@ -1796,7 +2296,7 @@ function MotionPreview({ filter, caption }) {
 						runKey: run
 					}),
 					/* @__PURE__ */ jsx("span", {
-						style: styles$6.cssVar,
+						style: styles$7.cssVar,
 						children: row.cssVar
 					})
 				]
@@ -1836,8 +2336,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 }) {
@@ -1854,7 +2354,7 @@ function ShadowSample({ path }) {
 }
 //#endregion
 //#region src/ShadowPreview.tsx
-const styles$5 = {
+const styles$6 = {
 	wrapper: surfaceStyle,
 	caption: captionStyle,
 	empty: emptyStyle,
@@ -1898,12 +2398,12 @@ const styles$5 = {
 		columnGap: 12,
 		rowGap: 2
 	},
-	breakdownKey: { color: "var(--sb-color-sys-text-muted, CanvasText)" },
+	breakdownKey: { color: TEXT_MUTED },
 	layerHeader: {
 		fontSize: 10,
 		textTransform: "uppercase",
 		letterSpacing: .5,
-		color: "var(--sb-color-sys-text-muted, CanvasText)",
+		color: TEXT_MUTED,
 		marginTop: 6
 	}
 };
@@ -1935,38 +2435,39 @@ function asLayers(raw) {
 	if (raw && typeof raw === "object") return [raw];
 	return [];
 }
-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 }) {
-	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;
+function layerKey(path, layer, fallback) {
+	return `${path}|${`${formatDimension(layer.offsetX)},${formatDimension(layer.offsetY)}`}|${formatDimension(layer.blur)}|${formatDimension(layer.spread)}|${fallback}`;
+}
+function ShadowPreview({ filter, caption, sortBy = "path", sortDir = "asc" }) {
+	const { resolved, activeTheme, cssVarPrefix } = useProject();
+	const rows = useMemo(() => {
+		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
+			...styles$6.wrapper
 		},
 		children: /* @__PURE__ */ jsx("div", {
-			style: styles$5.empty,
+			style: styles$6.empty,
 			children: "No shadow tokens match this filter."
 		})
 	});
@@ -1974,30 +2475,30 @@ function ShadowPreview({ filter = "shadow", caption }) {
 		...themeAttrs(cssVarPrefix, activeTheme),
 		style: {
 			...chromeAliases(cssVarPrefix),
-			...styles$5.wrapper
+			...styles$6.wrapper
 		},
 		children: [/* @__PURE__ */ jsx("div", {
-			style: styles$5.caption,
+			style: styles$6.caption,
 			children: captionText
 		}), rows.map((row) => /* @__PURE__ */ jsxs("div", {
-			style: styles$5.row,
+			style: styles$6.row,
 			children: [
 				/* @__PURE__ */ jsxs("div", {
-					style: styles$5.meta,
+					style: styles$6.meta,
 					children: [/* @__PURE__ */ jsx("span", {
-						style: styles$5.path,
+						style: styles$6.path,
 						children: row.path
 					}), /* @__PURE__ */ jsx("span", {
-						style: styles$5.cssVar,
+						style: styles$6.cssVar,
 						children: row.cssVar
 					})]
 				}),
 				/* @__PURE__ */ jsx("div", {
-					style: styles$5.sampleCell,
+					style: styles$6.sampleCell,
 					children: /* @__PURE__ */ jsx(ShadowSample, { path: row.path })
 				}),
 				/* @__PURE__ */ jsx("div", {
-					style: styles$5.breakdown,
+					style: styles$6.breakdown,
 					children: row.layers.length === 1 ? renderLayer(row.layers[0]) : row.layers.map((layer, i) => /* @__PURE__ */ jsx(Layer, {
 						layer,
 						index: i,
@@ -2018,7 +2519,7 @@ function renderLayer(layer) {
 	];
 	if (layer.inset) entries.push(["inset", String(layer.inset)]);
 	return entries.flatMap(([k, v]) => [/* @__PURE__ */ jsx("span", {
-		style: styles$5.breakdownKey,
+		style: styles$6.breakdownKey,
 		children: k
 	}, `k-${k}`), /* @__PURE__ */ jsx("span", { children: v }, `v-${k}`)]);
 }
@@ -2026,7 +2527,7 @@ function Layer({ layer, index, total }) {
 	return /* @__PURE__ */ jsxs("div", {
 		style: { gridColumn: "1 / -1" },
 		children: [/* @__PURE__ */ jsxs("div", {
-			style: styles$5.layerHeader,
+			style: styles$6.layerHeader,
 			children: [
 				"layer ",
 				index + 1,
@@ -2035,7 +2536,7 @@ function Layer({ layer, index, total }) {
 			]
 		}), /* @__PURE__ */ jsx("div", {
 			style: {
-				...styles$5.breakdown,
+				...styles$6.breakdown,
 				marginTop: 2
 			},
 			children: renderLayer(layer)
@@ -2054,7 +2555,7 @@ const STRING_STYLES = new Set([
 	"outset",
 	"inset"
 ]);
-const styles$4 = {
+const styles$5 = {
 	wrapper: surfaceStyle,
 	caption: captionStyle,
 	empty: emptyStyle,
@@ -2082,55 +2583,60 @@ const styles$4 = {
 	value: {
 		fontFamily: MONO_STACK,
 		fontSize: 11,
-		color: "var(--sb-color-sys-text-muted, CanvasText)"
+		color: TEXT_MUTED
 	},
 	line: {
 		height: 0,
 		borderTopWidth: 4,
-		borderTopColor: "var(--sb-color-sys-text-default, CanvasText)",
+		borderTopColor: TEXT_DEFAULT,
 		width: "100%"
 	},
 	objectFallback: {
 		fontFamily: MONO_STACK,
 		fontSize: 11,
-		color: "var(--sb-color-sys-text-muted, CanvasText)"
+		color: TEXT_MUTED
 	},
 	cssVar: {
 		fontFamily: MONO_STACK,
 		fontSize: 11,
-		color: "var(--sb-color-sys-text-muted, CanvasText)"
+		color: TEXT_MUTED
 	}
 };
 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
+			...styles$5.wrapper
 		},
 		children: /* @__PURE__ */ jsx("div", {
-			style: styles$4.empty,
+			style: styles$5.empty,
 			children: "No strokeStyle tokens match this filter."
 		})
 	});
@@ -2138,36 +2644,36 @@ function StrokeStyleSample({ filter = "strokeStyle", caption }) {
 		...themeAttrs(cssVarPrefix, activeTheme),
 		style: {
 			...chromeAliases(cssVarPrefix),
-			...styles$4.wrapper
+			...styles$5.wrapper
 		},
 		children: [/* @__PURE__ */ jsx("div", {
-			style: styles$4.caption,
+			style: styles$5.caption,
 			children: captionText
 		}), rows.map((row) => /* @__PURE__ */ jsxs("div", {
-			style: styles$4.row,
+			style: styles$5.row,
 			children: [
 				/* @__PURE__ */ jsxs("div", {
-					style: styles$4.meta,
+					style: styles$5.meta,
 					children: [/* @__PURE__ */ jsx("span", {
-						style: styles$4.path,
+						style: styles$5.path,
 						children: row.path
 					}), /* @__PURE__ */ jsx("span", {
-						style: styles$4.value,
+						style: styles$5.value,
 						children: row.displayValue
 					})]
 				}),
 				row.cssStyle ? /* @__PURE__ */ jsx("div", {
 					style: {
-						...styles$4.line,
+						...styles$5.line,
 						borderTopStyle: row.cssStyle
 					},
 					"aria-hidden": true
 				}) : /* @__PURE__ */ jsx("span", {
-					style: styles$4.objectFallback,
+					style: styles$5.objectFallback,
 					children: "Object-form (dashArray + lineCap) — no pure CSS `border-style` equivalent."
 				}),
 				/* @__PURE__ */ jsx("span", {
-					style: styles$4.cssVar,
+					style: styles$5.cssVar,
 					children: row.cssVar
 				})
 			]
@@ -2176,7 +2682,7 @@ function StrokeStyleSample({ filter = "strokeStyle", caption }) {
 }
 //#endregion
 //#region src/token-detail/styles.ts
-const styles$3 = {
+const styles$4 = {
 	wrapper: {
 		...surfaceStyle,
 		padding: 16,
@@ -2202,7 +2708,7 @@ const styles$3 = {
 		fontSize: 10,
 		letterSpacing: .5,
 		textTransform: "uppercase",
-		background: "var(--sb-color-sys-surface-muted, rgba(128,128,128,0.15))"
+		background: SURFACE_MUTED
 	},
 	description: {
 		margin: "0 0 12px",
@@ -2248,13 +2754,13 @@ const styles$3 = {
 		verticalAlign: "middle",
 		marginRight: 6,
 		borderRadius: 3,
-		border: "1px solid var(--sb-color-sys-border-default, rgba(0,0,0,0.1))"
+		border: BORDER_DEFAULT
 	},
 	snippet: {
 		display: "block",
 		padding: "8px 10px",
 		borderRadius: 4,
-		background: "var(--sb-color-sys-surface-muted, rgba(128,128,128,0.1))",
+		background: SURFACE_MUTED,
 		fontFamily: MONO_STACK,
 		fontSize: 12,
 		whiteSpace: "pre",
@@ -2268,14 +2774,14 @@ const styles$3 = {
 	shadowSample: {
 		width: 140,
 		height: 56,
-		background: "var(--sb-color-sys-surface-raised, #fff)",
+		background: SURFACE_RAISED,
 		border: BORDER_FAINT,
 		borderRadius: 6
 	},
 	borderSample: {
 		width: 140,
 		height: 56,
-		background: "var(--sb-color-sys-surface-raised, transparent)",
+		background: SURFACE_RAISED,
 		borderRadius: 6
 	},
 	gradientSample: {
@@ -2287,18 +2793,18 @@ const styles$3 = {
 	strokeStyleLine: {
 		height: 0,
 		borderTopWidth: 4,
-		borderTopColor: "var(--sb-color-sys-text-default, CanvasText)",
+		borderTopColor: TEXT_DEFAULT,
 		width: 220
 	},
 	strokeStyleSvg: {
 		width: 220,
 		height: 24,
-		color: "var(--sb-color-sys-text-default, CanvasText)"
+		color: TEXT_DEFAULT
 	},
 	strokeStyleFallback: {
 		fontFamily: MONO_STACK,
 		fontSize: 12,
-		color: "var(--sb-color-sys-text-muted, CanvasText)"
+		color: TEXT_MUTED
 	},
 	colorSwatchRow: {
 		display: "flex",
@@ -2326,13 +2832,13 @@ const styles$3 = {
 		rowGap: 3,
 		marginTop: 6
 	},
-	breakdownKey: { color: "var(--sb-color-sys-text-muted, CanvasText)" },
+	breakdownKey: { color: TEXT_MUTED },
 	breakdownLayerHeader: {
 		gridColumn: "1 / -1",
 		fontSize: 10,
 		textTransform: "uppercase",
 		letterSpacing: .5,
-		color: "var(--sb-color-sys-text-muted, CanvasText)",
+		color: TEXT_MUTED,
 		marginTop: 4
 	},
 	fontFamilySample: {
@@ -2363,7 +2869,7 @@ const styles$3 = {
 		height: 32,
 		width: "100%",
 		maxWidth: 320,
-		background: "var(--sb-color-sys-surface-muted, rgba(128,128,128,0.08))",
+		background: SURFACE_MUTED,
 		borderRadius: 16,
 		overflow: "hidden"
 	},
@@ -2397,7 +2903,7 @@ const styles$3 = {
 	},
 	reducedMotion: {
 		fontSize: 11,
-		color: "var(--sb-color-sys-text-muted, CanvasText)",
+		color: TEXT_MUTED,
 		fontStyle: "italic"
 	},
 	tupleIndicator: {
@@ -2413,7 +2919,7 @@ const styles$3 = {
 		padding: "6px 10px",
 		marginBottom: 4,
 		borderRadius: 4,
-		background: "var(--sb-color-sys-surface-muted, rgba(128,128,128,0.1))"
+		background: SURFACE_MUTED
 	},
 	consumerRowLabel: {
 		fontFamily: MONO_STACK,
@@ -2435,9 +2941,9 @@ const styles$3 = {
 		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))",
+		background: SURFACE_RAISED,
+		color: TEXT_DEFAULT,
+		border: BORDER_STRONG,
 		borderRadius: 4,
 		cursor: "pointer",
 		flexShrink: 0
@@ -2472,17 +2978,17 @@ function AliasChain({ path }) {
 	}, [token, path]);
 	if (chain.length <= 1) return null;
 	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
-		style: styles$3.sectionHeader,
+		style: styles$4.sectionHeader,
 		children: "Alias chain"
 	}), /* @__PURE__ */ jsx("div", {
-		style: styles$3.chain,
+		style: styles$4.chain,
 		children: chain.map((step, i) => /* @__PURE__ */ jsxs("span", {
-			style: styles$3.chain,
+			style: styles$4.chain,
 			children: [/* @__PURE__ */ jsx("span", {
-				style: styles$3.chainNode,
+				style: styles$4.chainNode,
 				children: step
 			}), i < chain.length - 1 && /* @__PURE__ */ jsx("span", {
-				style: styles$3.arrow,
+				style: styles$4.arrow,
 				children: "→"
 			})]
 		}, step))
@@ -2502,18 +3008,18 @@ function AliasedBy({ path }) {
 	if (tree.length === 0) return null;
 	return /* @__PURE__ */ jsxs(Fragment, { children: [
 		/* @__PURE__ */ jsx("div", {
-			style: styles$3.sectionHeader,
+			style: styles$4.sectionHeader,
 			children: "Aliased by"
 		}),
 		/* @__PURE__ */ jsx("ul", {
-			style: styles$3.aliasedByList,
+			style: styles$4.aliasedByList,
 			children: tree.map((node) => /* @__PURE__ */ jsx(AliasedByRow, {
 				node,
 				depth: 0
 			}, node.path))
 		}),
 		truncated && /* @__PURE__ */ jsxs("div", {
-			style: styles$3.aliasedByTruncated,
+			style: styles$4.aliasedByTruncated,
 			children: [
 				"Further descendants truncated at depth ",
 				ALIASED_BY_DEPTH_CAP,
@@ -2525,15 +3031,15 @@ function AliasedBy({ path }) {
 function AliasedByRow({ node, depth }) {
 	return /* @__PURE__ */ jsxs("li", { children: [/* @__PURE__ */ jsx("div", {
 		style: {
-			...styles$3.aliasedByRow,
+			...styles$4.aliasedByRow,
 			paddingLeft: depth * 16
 		},
 		children: /* @__PURE__ */ jsx("span", {
-			style: styles$3.chainNode,
+			style: styles$4.chainNode,
 			children: node.path
 		})
 	}), node.children.length > 0 && /* @__PURE__ */ jsx("ul", {
-		style: styles$3.aliasedByList,
+		style: styles$4.aliasedByList,
 		children: node.children.map((child) => /* @__PURE__ */ jsx(AliasedByRow, {
 			node: child,
 			depth: depth + 1
@@ -2586,8 +3092,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,
@@ -2599,20 +3106,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,
+			style: styles$4.sectionHeader,
 			children: "Values across axes"
 		}), /* @__PURE__ */ jsx("table", {
-			style: styles$3.themeTable,
+			style: styles$4.themeTable,
 			"data-testid": "token-detail-values",
 			children: /* @__PURE__ */ jsx("tbody", { children: /* @__PURE__ */ jsx("tr", {
-				style: styles$3.themeRow,
+				style: styles$4.themeRow,
 				children: /* @__PURE__ */ jsxs("td", {
-					style: styles$3.themeCell,
+					style: styles$4.themeCell,
 					"data-testid": "token-detail-constant",
 					children: [
 						isColor && /* @__PURE__ */ jsx("span", {
 							style: {
-								...styles$3.swatch,
+								...styles$4.swatch,
 								background: cssVar
 							},
 							"aria-hidden": true
@@ -2655,26 +3162,26 @@ function AxisVariance({ path }) {
 			};
 		});
 		return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
-			style: styles$3.sectionHeader,
+			style: styles$4.sectionHeader,
 			children: ["Varies with ", axisName]
 		}), /* @__PURE__ */ jsx("table", {
-			style: styles$3.themeTable,
+			style: styles$4.themeTable,
 			"data-testid": "token-detail-values",
 			children: /* @__PURE__ */ jsx("tbody", { children: contextValues.map((row) => /* @__PURE__ */ jsxs("tr", {
-				style: styles$3.themeRow,
+				style: styles$4.themeRow,
 				"data-axis": axisName,
 				"data-context": row.ctx,
 				children: [/* @__PURE__ */ jsx("td", {
 					style: {
-						...styles$3.themeCell,
+						...styles$4.themeCell,
 						width: "30%"
 					},
 					children: row.ctx
 				}), /* @__PURE__ */ jsxs("td", {
-					style: styles$3.themeCell,
+					style: styles$4.themeCell,
 					children: [isColor && row.themeName && /* @__PURE__ */ jsx("span", {
 						style: {
-							...styles$3.swatch,
+							...styles$4.swatch,
 							background: cssVar
 						},
 						[dataAttr(cssVarPrefix, "theme")]: row.themeName,
@@ -2688,17 +3195,17 @@ function AxisVariance({ path }) {
 	if (!rowAxis || !colAxis) return /* @__PURE__ */ jsx(Fragment, {});
 	return /* @__PURE__ */ jsxs(Fragment, { children: [
 		/* @__PURE__ */ jsxs("div", {
-			style: styles$3.sectionHeader,
+			style: styles$4.sectionHeader,
 			children: ["Varies with ", variance.varyingAxes.join(" × ")]
 		}),
 		/* @__PURE__ */ jsxs("table", {
-			style: styles$3.themeTable,
+			style: styles$4.themeTable,
 			"data-testid": "token-detail-values",
 			children: [/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", {
-				style: styles$3.themeRow,
+				style: styles$4.themeRow,
 				children: [/* @__PURE__ */ jsxs("th", {
 					style: {
-						...styles$3.themeCell,
+						...styles$4.themeCell,
 						textAlign: "left",
 						opacity: .7
 					},
@@ -2709,16 +3216,16 @@ function AxisVariance({ path }) {
 					]
 				}), colAxis.contexts.map((col) => /* @__PURE__ */ jsx("th", {
 					style: {
-						...styles$3.themeCell,
+						...styles$4.themeCell,
 						textAlign: "left",
 						opacity: .7
 					},
 					children: col
 				}, col))]
 			}) }), /* @__PURE__ */ jsx("tbody", { children: rowAxis.contexts.map((row) => /* @__PURE__ */ jsxs("tr", {
-				style: styles$3.themeRow,
+				style: styles$4.themeRow,
 				children: [/* @__PURE__ */ jsx("td", {
-					style: styles$3.themeCell,
+					style: styles$4.themeCell,
 					children: row
 				}), colAxis.contexts.map((col) => {
 					const name = tupleName(themes, {
@@ -2728,12 +3235,12 @@ function AxisVariance({ path }) {
 					});
 					const value = name ? formatFn(themesResolved[name]?.[path]) : "—";
 					return /* @__PURE__ */ jsxs("td", {
-						style: styles$3.themeCell,
+						style: styles$4.themeCell,
 						"data-row": row,
 						"data-col": col,
 						children: [isColor && name && /* @__PURE__ */ jsx("span", {
 							style: {
-								...styles$3.swatch,
+								...styles$4.swatch,
 								background: cssVar
 							},
 							[dataAttr(cssVarPrefix, "theme")]: name,
@@ -2745,7 +3252,7 @@ function AxisVariance({ path }) {
 		}),
 		extra.length > 0 && /* @__PURE__ */ jsxs("div", {
 			style: {
-				...styles$3.aliasedByTruncated,
+				...styles$4.aliasedByTruncated,
 				marginTop: 6
 			},
 			children: [
@@ -2756,14 +3263,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) => {
@@ -2779,7 +3292,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;
@@ -2806,13 +3319,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;
@@ -2827,7 +3342,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"])]
 		]);
@@ -2844,19 +3359,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,
+			style: styles$4.breakdownSection,
 			children: layers.map((layer, i) => {
 				const v = layer;
 				return /* @__PURE__ */ jsxs("div", {
 					style: { display: "contents" },
 					children: [
 						multi && /* @__PURE__ */ jsxs("div", {
-							style: styles$3.breakdownLayerHeader,
+							style: styles$4.breakdownLayerHeader,
 							children: ["Layer ", i + 1]
 						}),
 						/* @__PURE__ */ jsx(KeyValueRow, {
 							label: "color",
-							value: formatColorValue(v["color"])
+							value: formatColorSubValue(v["color"], colorFormat)
 						}),
 						/* @__PURE__ */ jsx(KeyValueRow, {
 							label: "offsetX",
@@ -2887,12 +3402,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,
+			style: styles$4.breakdownSection,
 			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));
 			})
 		});
@@ -2901,7 +3416,7 @@ function CompositeBreakdownContent({ type, rawValue }) {
 }
 function renderKeyValueList(rows) {
 	return /* @__PURE__ */ jsx("div", {
-		style: styles$3.breakdownSection,
+		style: styles$4.breakdownSection,
 		children: rows.filter(([, v]) => v !== null).map(([k, v]) => /* @__PURE__ */ jsx(KeyValueRow, {
 			label: k,
 			value: v ?? ""
@@ -2910,7 +3425,7 @@ function renderKeyValueList(rows) {
 }
 function KeyValueRow({ label, value }) {
 	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
-		style: styles$3.breakdownKey,
+		style: styles$4.breakdownKey,
 		children: label
 	}), /* @__PURE__ */ jsx("span", { children: value ?? "—" })] });
 }
@@ -2934,18 +3449,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|${[
@@ -2987,7 +3499,7 @@ function CompositePreviewContent({ type, cssVar, rawValue }) {
 		const base = cssVar.replace(/^var\(/, "").replace(/\)$/, "");
 		return /* @__PURE__ */ jsx("div", {
 			style: {
-				...styles$3.typographySample,
+				...styles$4.typographySample,
 				fontFamily: `var(${base}-font-family)`,
 				fontSize: `var(${base}-font-size)`,
 				fontWeight: `var(${base}-font-weight)`,
@@ -2999,24 +3511,24 @@ function CompositePreviewContent({ type, cssVar, rawValue }) {
 	}
 	if (type === "shadow") return /* @__PURE__ */ jsx("div", {
 		style: {
-			...styles$3.shadowSample,
+			...styles$4.shadowSample,
 			boxShadow: cssVar
 		},
 		"aria-hidden": true
 	});
 	if (type === "border") return /* @__PURE__ */ jsx("div", {
 		style: {
-			...styles$3.borderSample,
+			...styles$4.borderSample,
 			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,
+		style: styles$4.dimensionTrack,
 		children: /* @__PURE__ */ jsx("div", {
 			style: {
-				...styles$3.dimensionBar,
+				...styles$4.dimensionBar,
 				width: cssVar
 			},
 			"aria-hidden": true
@@ -3025,14 +3537,14 @@ function CompositePreviewContent({ type, cssVar, rawValue }) {
 	if (type === "duration") return /* @__PURE__ */ jsx(TransitionSample, { transition: `left ${cssVar} ease` });
 	if (type === "fontFamily") return /* @__PURE__ */ jsx("div", {
 		style: {
-			...styles$3.fontFamilySample,
+			...styles$4.fontFamilySample,
 			fontFamily: cssVar
 		},
 		children: PANGRAM
 	});
 	if (type === "fontWeight") return /* @__PURE__ */ jsx("div", {
 		style: {
-			...styles$3.fontWeightSample,
+			...styles$4.fontWeightSample,
 			fontWeight: cssVar
 		},
 		children: "Aa"
@@ -3040,20 +3552,20 @@ function CompositePreviewContent({ type, cssVar, rawValue }) {
 	if (type === "cubicBezier") return /* @__PURE__ */ jsx(TransitionSample, { transition: `left 800ms ${cssVar}` });
 	if (type === "gradient") return /* @__PURE__ */ jsx("div", {
 		style: {
-			...styles$3.gradientSample,
+			...styles$4.gradientSample,
 			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,
+		style: styles$4.colorSwatchRow,
 		"aria-hidden": true,
 		children: [/* @__PURE__ */ jsx("div", { style: {
-			...styles$3.colorSwatchLight,
+			...styles$4.colorSwatchLight,
 			background: cssVar
 		} }), /* @__PURE__ */ jsx("div", { style: {
-			...styles$3.colorSwatchDark,
+			...styles$4.colorSwatchDark,
 			background: cssVar
 		} })]
 	});
@@ -3062,7 +3574,7 @@ function CompositePreviewContent({ type, cssVar, rawValue }) {
 function StrokeStylePreview({ value }) {
 	if (typeof value === "string" && STROKE_STYLE_STRINGS.has(value)) return /* @__PURE__ */ jsx("div", {
 		style: {
-			...styles$3.strokeStyleLine,
+			...styles$4.strokeStyleLine,
 			borderTopStyle: value
 		},
 		"aria-hidden": true
@@ -3071,12 +3583,12 @@ function StrokeStylePreview({ value }) {
 		const v = value;
 		const lengths = asDashLengths(v.dashArray);
 		if (lengths.length === 0) return /* @__PURE__ */ jsx("div", {
-			style: styles$3.strokeStyleFallback,
+			style: styles$4.strokeStyleFallback,
 			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,
+			style: styles$4.strokeStyleSvg,
 			viewBox: "0 0 220 24",
 			preserveAspectRatio: "none",
 			"aria-hidden": true,
@@ -3093,7 +3605,7 @@ function StrokeStylePreview({ value }) {
 		});
 	}
 	return /* @__PURE__ */ jsx("div", {
-		style: styles$3.strokeStyleFallback,
+		style: styles$4.strokeStyleFallback,
 		children: "strokeStyle value could not be previewed."
 	});
 }
@@ -3127,14 +3639,14 @@ function TransitionSample({ transition }) {
 		};
 	}, [reduced]);
 	if (reduced) return /* @__PURE__ */ jsx("div", {
-		style: styles$3.reducedMotion,
+		style: styles$4.reducedMotion,
 		children: "Animation suppressed by `prefers-reduced-motion: reduce`."
 	});
 	return /* @__PURE__ */ jsx("div", {
-		style: styles$3.motionTrack,
+		style: styles$4.motionTrack,
 		children: /* @__PURE__ */ jsx("div", {
 			style: {
-				...styles$3.motionBall,
+				...styles$4.motionBall,
 				left: phase === 1 ? "calc(100% - 28px)" : "4px",
 				transition
 			},
@@ -3150,11 +3662,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,
+			style: styles$4.sectionHeader,
 			children: "Consumer output"
 		}),
 		tupleLabel && /* @__PURE__ */ jsxs("div", {
-			style: styles$3.tupleIndicator,
+			style: styles$4.tupleIndicator,
 			children: ["Active tuple: ", /* @__PURE__ */ jsx("strong", { children: tupleLabel })]
 		}),
 		/* @__PURE__ */ jsx(OutputRow, {
@@ -3171,14 +3683,14 @@ function ConsumerOutput({ path }) {
 }
 function OutputRow({ label, value, testId }) {
 	return /* @__PURE__ */ jsxs("div", {
-		style: styles$3.consumerRow,
+		style: styles$4.consumerRow,
 		children: [
 			/* @__PURE__ */ jsx("span", {
-				style: styles$3.consumerRowLabel,
+				style: styles$4.consumerRowLabel,
 				children: label
 			}),
 			/* @__PURE__ */ jsx("code", {
-				style: styles$3.consumerRowValue,
+				style: styles$4.consumerRowValue,
 				"data-testid": testId,
 				children: value
 			}),
@@ -3193,7 +3705,7 @@ function CopyButton({ text, testId }) {
 	const [copied, setCopied] = useState(false);
 	return /* @__PURE__ */ jsx("button", {
 		type: "button",
-		style: styles$3.consumerRowCopy,
+		style: styles$4.consumerRowCopy,
 		"data-testid": testId,
 		onClick: () => {
 			copyToClipboard(text).then((ok) => {
@@ -3219,7 +3731,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,
+		style: styles$4.missing,
 		children: [
 			"Token ",
 			/* @__PURE__ */ jsx("code", { children: path }),
@@ -3230,18 +3742,18 @@ function TokenHeader({ path, heading }) {
 	});
 	return /* @__PURE__ */ jsxs(Fragment, { children: [
 		/* @__PURE__ */ jsx("h3", {
-			style: styles$3.heading,
+			style: styles$4.heading,
 			children: heading ?? path
 		}),
 		/* @__PURE__ */ jsxs("div", {
-			style: styles$3.subline,
+			style: styles$4.subline,
 			children: [token.$type && /* @__PURE__ */ jsx("span", {
-				style: styles$3.typePill,
+				style: styles$4.typePill,
 				children: token.$type
 			}), /* @__PURE__ */ jsx("span", { children: cssVar })]
 		}),
 		token.$description && /* @__PURE__ */ jsx("p", {
-			style: styles$3.description,
+			style: styles$4.description,
 			children: token.$description
 		})
 	] });
@@ -3252,10 +3764,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,
+		style: styles$4.sectionHeader,
 		children: "Usage"
 	}), /* @__PURE__ */ jsx("code", {
-		style: styles$3.snippet,
+		style: styles$4.snippet,
 		children: `color: ${cssVar};`
 	})] });
 }
@@ -3268,10 +3780,10 @@ function TokenDetail({ path, heading }) {
 		...themeAttrs(cssVarPrefix, activeTheme),
 		style: {
 			...chromeAliases(cssVarPrefix),
-			...styles$3.wrapper
+			...styles$4.wrapper
 		},
 		children: /* @__PURE__ */ jsxs("div", {
-			style: styles$3.missing,
+			style: styles$4.missing,
 			children: [
 				"Token ",
 				/* @__PURE__ */ jsx("code", { children: path }),
@@ -3282,14 +3794,14 @@ 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
+			...styles$4.wrapper
 		},
 		children: [
 			/* @__PURE__ */ jsx(TokenHeader, {
@@ -3297,17 +3809,17 @@ function TokenDetail({ path, heading }) {
 				...heading !== void 0 && { heading }
 			}),
 			/* @__PURE__ */ jsxs("div", {
-				style: styles$3.sectionHeader,
+				style: styles$4.sectionHeader,
 				children: ["Resolved value · ", activeTheme]
 			}),
 			/* @__PURE__ */ jsx(CompositePreview, { path }),
 			/* @__PURE__ */ jsx(CompositeBreakdown, { path }),
 			/* @__PURE__ */ jsxs("div", {
-				style: styles$3.chain,
+				style: styles$4.chain,
 				children: [
 					isColor && /* @__PURE__ */ jsx("span", {
 						style: {
-							...styles$3.swatch,
+							...styles$4.swatch,
 							background: cssVar
 						},
 						"aria-hidden": true
@@ -3330,12 +3842,87 @@ function TokenDetail({ path, heading }) {
 	});
 }
 //#endregion
+//#region src/internal/DetailOverlay.tsx
+/**
+* Slide-over that wraps `<TokenDetail>`. Shared between `<TokenNavigator />`
+* and `<TokenTable />` so both land on the same opener and the same styling.
+*
+* Dismisses on backdrop click, Escape, and the close button. `role="dialog"`
+* + `aria-modal="true"` hints to AT that focus is trapped here; actual focus
+* management is tracked in the open-issue #253.
+*/
+const styles$3 = {
+	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: SURFACE_DEFAULT,
+		color: TEXT_DEFAULT,
+		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: BORDER_STRONG,
+		background: "transparent",
+		color: "inherit",
+		cursor: "pointer",
+		fontSize: 16,
+		lineHeight: 1
+	}
+};
+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", {
+		style: styles$3.backdrop,
+		onClick: onClose,
+		role: "presentation",
+		"data-testid": testId,
+		children: /* @__PURE__ */ jsxs("div", {
+			style: styles$3.panel,
+			onClick: (e) => e.stopPropagation(),
+			role: "dialog",
+			"aria-modal": "true",
+			"aria-label": `Token detail for ${path}`,
+			children: [/* @__PURE__ */ jsx("button", {
+				type: "button",
+				style: styles$3.closeButton,
+				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)",
+		color: TEXT_MUTED,
 		fontSize: 12
 	},
 	tree: {
@@ -3374,84 +3961,44 @@ const styles$2 = {
 		display: "inline-block",
 		width: 12,
 		textAlign: "center",
-		color: "var(--sb-color-sys-text-muted, CanvasText)"
+		color: TEXT_MUTED
 	},
 	tail: {
 		fontFamily: MONO_STACK,
 		fontSize: 12
 	},
 	typePill: {
-		display: "inline-block",
+		...typePillStyle,
 		padding: "1px 6px",
-		borderRadius: 4,
-		fontSize: 10,
-		letterSpacing: .5,
-		textTransform: "uppercase",
-		background: "var(--sb-color-sys-surface-muted, rgba(128,128,128,0.15))"
+		fontSize: 10
 	},
 	value: {
 		fontSize: 11,
-		color: "var(--sb-color-sys-text-muted, CanvasText)",
+		color: TEXT_MUTED,
 		marginLeft: "auto",
-		wordBreak: "break-all",
-		maxWidth: "40%",
-		textAlign: "right"
+		minWidth: 0,
+		textAlign: "right",
+		overflow: "hidden",
+		textOverflow: "ellipsis",
+		whiteSpace: "nowrap"
 	},
 	count: {
 		marginLeft: "auto",
 		fontSize: 11,
-		color: "var(--sb-color-sys-text-default, CanvasText)"
+		color: TEXT_DEFAULT
 	},
 	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))"
+		border: BORDER_DEFAULT
 	},
 	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
 	}
 };
 function buildTree(resolved, root) {
@@ -3555,10 +4102,7 @@ function TokenNavigator({ root, initiallyExpanded = 1, onSelect }) {
 			...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),
@@ -3587,7 +4131,8 @@ function TokenNavigator({ root, initiallyExpanded = 1, onSelect }) {
 			}),
 			selectedPath !== null && /* @__PURE__ */ jsx(DetailOverlay, {
 				path: selectedPath,
-				onClose: () => setSelectedPath(null)
+				onClose: () => setSelectedPath(null),
+				testId: "token-navigator-overlay"
 			})
 		]
 	});
@@ -3685,12 +4230,11 @@ 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,
 			children: [/* @__PURE__ */ jsx("span", {
 				style: styles$2.value,
-				children: formatted?.value ?? formatValue(token.$value)
+				children: formatTokenValue(token.$value, type, colorFormat)
 			}), /* @__PURE__ */ jsx("span", {
 				style: {
 					...styles$2.colorSwatch,
@@ -3705,7 +4249,7 @@ function LeafPreview({ path, token }) {
 		style: styles$2.previewBox,
 		children: [/* @__PURE__ */ jsx("span", {
 			style: styles$2.value,
-			children: formatValue(token.$value)
+			children: formatTokenValue(token.$value, type, colorFormat)
 		}), /* @__PURE__ */ jsx("span", {
 			style: {
 				marginLeft: 8,
@@ -3758,37 +4302,7 @@ function LeafPreview({ path, token }) {
 		style: styles$2.previewBox,
 		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 })]
+			children: formatTokenValue(token.$value, type, colorFormat)
 		})
 	});
 }
@@ -3801,13 +4315,12 @@ const styles$1 = {
 		captionSide: "top",
 		textAlign: "left",
 		padding: "8px 0",
-		opacity: .7,
+		color: TEXT_MUTED,
 		fontSize: 12
 	},
 	table: {
 		width: "100%",
-		borderCollapse: "collapse",
-		tableLayout: "fixed"
+		borderCollapse: "collapse"
 	},
 	th: {
 		textAlign: "left",
@@ -3815,9 +4328,12 @@ const styles$1 = {
 		fontSize: 11,
 		textTransform: "uppercase",
 		letterSpacing: .5,
-		opacity: .6,
-		borderBottom: "1px solid var(--sb-color-sys-border-default, rgba(128,128,128,0.3))"
+		color: TEXT_MUTED,
+		borderBottom: BORDER_STRONG
 	},
+	thPath: { minWidth: 180 },
+	thValue: { minWidth: 160 },
+	row: { cursor: "pointer" },
 	td: {
 		padding: "8px 12px",
 		borderBottom: BORDER_FAINT,
@@ -3827,48 +4343,61 @@ const styles$1 = {
 		fontFamily: MONO_STACK,
 		fontSize: 12
 	},
+	valueCell: {
+		display: "flex",
+		alignItems: "center",
+		gap: 8,
+		minWidth: 0,
+		fontFamily: MONO_STACK,
+		fontSize: 12
+	},
 	typePill: {
 		display: "inline-block",
-		padding: "2px 6px",
+		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: {
+		background: SURFACE_MUTED,
+		color: TEXT_MUTED,
 		fontFamily: MONO_STACK,
-		fontSize: 12,
-		opacity: .85,
-		wordBreak: "break-all"
+		flexShrink: 0
 	},
 	swatch: {
 		display: "inline-block",
-		width: 14,
-		height: 14,
-		verticalAlign: "middle",
-		marginRight: 6,
+		width: 16,
+		height: 16,
 		borderRadius: 3,
-		border: "1px solid var(--sb-color-sys-border-default, rgba(0,0,0,0.1))"
+		border: BORDER_STRONG,
+		flexShrink: 0
+	},
+	valueText: {
+		minWidth: 0,
+		overflow: "hidden",
+		textOverflow: "ellipsis",
+		whiteSpace: "nowrap"
 	}
 };
-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
 			};
@@ -3878,8 +4407,14 @@ 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),
@@ -3892,99 +4427,89 @@ function TokenTable({ filter, type, showVar = true, caption }) {
 			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", {
+		children: [/* @__PURE__ */ jsxs("table", {
 			style: styles$1.table,
 			children: [
 				/* @__PURE__ */ jsx("caption", {
 					style: styles$1.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", {
+				/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [/* @__PURE__ */ jsx("th", {
+					style: {
+						...styles$1.th,
+						...styles$1.thPath
+					},
+					children: "Path"
+				}), /* @__PURE__ */ jsx("th", {
+					style: {
+						...styles$1.th,
+						...styles$1.thValue
+					},
+					children: "Value"
+				})] }) }),
+				/* @__PURE__ */ jsx("tbody", { children: rows.map((row) => /* @__PURE__ */ jsxs("tr", {
+					style: styles$1.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", {
 						style: {
 							...styles$1.td,
 							...styles$1.path
 						},
 						children: row.path
-					}),
-					/* @__PURE__ */ jsx("td", {
+					}), /* @__PURE__ */ jsx("td", {
 						style: styles$1.td,
-						children: row.type && /* @__PURE__ */ jsx("span", {
-							style: styles$1.typePill,
-							children: row.type
+						children: /* @__PURE__ */ jsxs("span", {
+							style: styles$1.valueCell,
+							children: [
+								row.type && /* @__PURE__ */ jsx("span", {
+									style: styles$1.typePill,
+									children: row.type
+								}),
+								row.isColor && /* @__PURE__ */ jsx("span", {
+									style: {
+										...styles$1.swatch,
+										background: row.cssVar
+									},
+									"aria-hidden": true
+								}),
+								/* @__PURE__ */ jsx("span", {
+									style: styles$1.valueText,
+									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",
+									style: { flexShrink: 0 },
+									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
@@ -4050,13 +4575,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,
@@ -4065,7 +4593,12 @@ 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),
@@ -4106,6 +4639,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