@unpunnyfuns/swatchbook-blocks 0.14.1 → 0.16.0

package/dist/index.mjs

@@ -1,9 +1,10 @@
 import './style.css';
 import Color from "colorjs.io";
-import { createContext, useCallback, useContext, useEffect, useMemo, useState, useSyncExternalStore } from "react";
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { addons } from "storybook/preview-api";
 import { axes, css, cssVarPrefix, defaultTheme, diagnostics, presets, themes, themesResolved } from "virtual:swatchbook/tokens";
+import { fuzzyFilter } from "@unpunnyfuns/swatchbook-core/fuzzy";
 import cx from "clsx";
 import { analyzeAxisVariance } from "@unpunnyfuns/swatchbook-core/variance";
 //#region src/format-color.ts
@@ -871,150 +872,54 @@ function ColorPalette({ filter, groupBy, caption, sortBy = "path", sortDir = "as
 	});
 }
 //#endregion
-//#region src/Diagnostics.tsx
-const severityLabel = {
-	error: "ERROR",
-	warn: "WARN",
-	info: "INFO"
-};
-function summaryText(diagnostics) {
-	if (diagnostics.length === 0) return "✔ OK · no diagnostics";
-	const counts = {
-		error: 0,
-		warn: 0,
-		info: 0
-	};
-	for (const d of diagnostics) counts[d.severity] += 1;
-	const parts = [];
-	if (counts.error > 0) parts.push(`✖ ${counts.error} error${counts.error === 1 ? "" : "s"}`);
-	if (counts.warn > 0) parts.push(`⚠ ${counts.warn} warning${counts.warn === 1 ? "" : "s"}`);
-	if (counts.info > 0) parts.push(`${counts.info} info`);
-	return parts.join(" · ");
-}
-function diagnosticKey(d, i) {
-	return `${d.severity}:${d.group}:${d.filename ?? ""}:${d.line ?? ""}:${d.message}:${i}`;
-}
-function summaryVariant(diagnostics) {
-	if (diagnostics.length === 0) return "ok";
-	if (diagnostics.some((d) => d.severity === "error")) return "error";
-	if (diagnostics.some((d) => d.severity === "warn")) return "warn";
-	return null;
-}
+//#region src/internal/CopyButton.tsx
 /**
-* 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.
+* Copy the given string to the clipboard and briefly surface a "Copied!"
+* state. Falls back silently on unsupported clipboard APIs (older Safari,
+* insecure origins) — the click still happens, the user just won't see the
+* tick. No custom permission prompt: relies on the browser's native user-
+* activation gate.
 */
-function Diagnostics({ caption } = {}) {
-	const { activeTheme, cssVarPrefix, diagnostics } = useProject();
-	const hasErrorsOrWarnings = diagnostics.some((d) => d.severity === "error" || d.severity === "warn");
-	const headingText = caption ?? `Diagnostics · ${summaryText(diagnostics)}`;
-	const variant = summaryVariant(diagnostics);
-	return /* @__PURE__ */ jsx("div", {
-		...themeAttrs(cssVarPrefix, activeTheme),
-		"data-testid": "diagnostics",
-		children: /* @__PURE__ */ jsxs("details", {
-			open: hasErrorsOrWarnings,
-			children: [/* @__PURE__ */ jsx("summary", {
-				className: cx("sb-diagnostics__summary", variant && `sb-diagnostics__summary--${variant}`),
-				children: headingText
-			}), diagnostics.length > 0 && /* @__PURE__ */ jsx("ul", {
-				className: "sb-diagnostics__list",
-				children: diagnostics.map((d, i) => /* @__PURE__ */ jsxs("li", {
-					className: "sb-diagnostics__row",
-					children: [/* @__PURE__ */ jsx("span", {
-						className: cx("sb-diagnostics__label", { [`sb-diagnostics__label--${d.severity}`]: d.severity !== "info" }),
-						children: severityLabel[d.severity]
-					}), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("div", { children: d.message }), (d.group || d.filename) && /* @__PURE__ */ jsx("div", {
-						className: "sb-diagnostics__meta",
-						children: [
-							d.group,
-							d.filename,
-							d.line ? `:${d.line}` : ""
-						].filter(Boolean).join(" · ")
-					})] })]
-				}, diagnosticKey(d, i)))
-			})]
+function CopyButton$1({ value, label, variant = "icon", className }) {
+	const [copied, setCopied] = useState(false);
+	const timerRef = useRef(null);
+	useEffect(() => {
+		return () => {
+			if (timerRef.current !== null) clearTimeout(timerRef.current);
+		};
+	}, []);
+	const handleClick = useCallback(() => {
+		try {
+			navigator.clipboard?.writeText(value);
+		} catch {
+			return;
+		}
+		setCopied(true);
+		if (timerRef.current !== null) clearTimeout(timerRef.current);
+		timerRef.current = setTimeout(() => setCopied(false), 1500);
+	}, [value]);
+	const ariaLabel = label ?? `Copy ${value}`;
+	const classes = ["sb-copy-button", `sb-copy-button--${variant}`];
+	if (copied) classes.push("sb-copy-button--copied");
+	if (className) classes.push(className);
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		className: classes.join(" "),
+		onClick: handleClick,
+		"aria-label": ariaLabel,
+		title: ariaLabel,
+		"data-copied": copied ? "true" : void 0,
+		children: variant === "text" ? /* @__PURE__ */ jsx("span", {
+			className: "sb-copy-button__text",
+			children: copied ? "Copied" : "Copy"
+		}) : /* @__PURE__ */ jsx("span", {
+			className: "sb-copy-button__glyph",
+			"aria-hidden": true,
+			children: copied ? "✓" : "⧉"
 		})
 	});
 }
 //#endregion
-//#region src/dimension-scale/DimensionBar.tsx
-const MAX_RENDER_PX$1 = 480;
-const styles$1 = {
-	bar: {
-		height: 14,
-		background: "var(--swatchbook-accent-bg, #3b82f6)",
-		borderRadius: 2,
-		minWidth: 1
-	},
-	radiusSample: {
-		width: 56,
-		height: 56,
-		background: "var(--swatchbook-accent-bg, #3b82f6)",
-		border: BORDER_STRONG
-	},
-	sizeSample: {
-		background: "var(--swatchbook-accent-bg, #3b82f6)",
-		border: BORDER_STRONG,
-		minWidth: 1,
-		minHeight: 1
-	}
-};
-/**
-* Convert a DTCG dimension `$value` (`{ value, unit }`) to pixels for the
-* purpose of deciding whether to cap the rendered bar. Returns `NaN` for
-* units we can't reasonably approximate (ex / ch / %), which the caller
-* treats as "render at cssVar but don't cap".
-*/
-function toPixels$1(raw) {
-	if (raw == null || typeof raw !== "object") return NaN;
-	const v = raw;
-	if (typeof v.value !== "number" || typeof v.unit !== "string") return NaN;
-	switch (v.unit) {
-		case "px": return v.value;
-		case "rem":
-		case "em": return v.value * 16;
-		default: return NaN;
-	}
-}
-function DimensionBar({ path, kind = "length" }) {
-	const { resolved, cssVarPrefix } = useProject();
-	const cssVar = makeCssVar(path, cssVarPrefix);
-	const token = resolved[path];
-	const pxValue = toPixels$1(token?.$value);
-	const cappedValue = Number.isFinite(pxValue) && pxValue > MAX_RENDER_PX$1 ? `${MAX_RENDER_PX$1}px` : cssVar;
-	switch (kind) {
-		case "radius": return /* @__PURE__ */ jsx("div", {
-			style: {
-				...styles$1.radiusSample,
-				borderRadius: cssVar
-			},
-			"aria-hidden": true
-		});
-		case "size": return /* @__PURE__ */ jsx("div", {
-			style: {
-				...styles$1.sizeSample,
-				width: cappedValue,
-				height: cappedValue
-			},
-			"aria-hidden": true
-		});
-		default: return /* @__PURE__ */ jsx("div", {
-			style: {
-				...styles$1.bar,
-				width: cappedValue
-			},
-			"aria-hidden": true
-		});
-	}
-}
-//#endregion
 //#region src/internal/format-token-value.ts
 /**
 * Produce a single-line display string for any DTCG token `$value`,
@@ -1154,768 +1059,596 @@ function formatUnknown(v) {
 	}
 }
 //#endregion
-//#region src/DimensionScale.tsx
-const MAX_RENDER_PX = 480;
-function toPixels(raw) {
-	if (raw == null || typeof raw !== "object") return NaN;
-	const v = raw;
-	if (typeof v.value !== "number" || typeof v.unit !== "string") return NaN;
-	switch (v.unit) {
-		case "px": return v.value;
-		case "rem":
-		case "em": return v.value * 16;
-		default: return NaN;
-	}
-}
-function DimensionScale({ filter, kind = "length", caption, sortBy = "value", sortDir = "asc" }) {
-	const { resolved, activeTheme, cssVarPrefix } = useProject();
-	const rows = useMemo(() => {
-		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);
-			return {
-				path,
-				cssVar: makeCssVar(path, cssVarPrefix),
-				displayValue: formatTokenValue(token.$value, token.$type, "raw"),
-				pxValue,
-				capped: Number.isFinite(pxValue) && pxValue > MAX_RENDER_PX
-			};
-		});
-	}, [
-		resolved,
-		filter,
-		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),
-		children: /* @__PURE__ */ jsx("div", {
-			className: "sb-block__empty",
-			children: "No dimension tokens match this filter."
-		})
-	});
-	return /* @__PURE__ */ jsxs("div", {
-		...themeAttrs(cssVarPrefix, activeTheme),
-		children: [/* @__PURE__ */ jsx("div", {
-			className: "sb-block__caption",
-			children: captionText
-		}), rows.map((row) => /* @__PURE__ */ jsxs("div", {
-			className: "sb-dimension-scale__row",
-			children: [
-				/* @__PURE__ */ jsxs("div", {
-					className: "sb-dimension-scale__meta",
-					children: [/* @__PURE__ */ jsx("span", {
-						className: "sb-dimension-scale__path",
-						children: row.path
-					}), /* @__PURE__ */ jsx("span", {
-						className: "sb-dimension-scale__specs",
-						children: row.displayValue
-					})]
-				}),
-				/* @__PURE__ */ jsxs("div", {
-					className: "sb-dimension-scale__visual-cell",
-					children: [/* @__PURE__ */ jsx(DimensionBar, {
-						path: row.path,
-						kind
-					}), row.capped && /* @__PURE__ */ jsxs("span", {
-						className: "sb-dimension-scale__cap",
-						children: [
-							"capped at ",
-							MAX_RENDER_PX,
-							"px"
-						]
-					})]
-				}),
-				/* @__PURE__ */ jsx("span", {
-					className: "sb-dimension-scale__css-var",
-					children: row.cssVar
-				})
-			]
-		}, row.path))]
-	});
+//#region src/token-detail/internal.ts
+function useTokenDetailData(path) {
+	const { activeTheme, activeAxes, axes, themes, themesResolved, resolved, cssVarPrefix } = useProject();
+	const typedResolved = resolved;
+	return {
+		token: typedResolved[path],
+		cssVar: makeCssVar(path, cssVarPrefix),
+		activeTheme,
+		activeAxes,
+		axes,
+		themes,
+		themesResolved,
+		resolved: typedResolved,
+		cssVarPrefix
+	};
 }
 //#endregion
-//#region src/FontFamilySample.tsx
-function stackString(raw) {
-	if (typeof raw === "string") return raw;
-	if (Array.isArray(raw)) return raw.map(String).join(", ");
-	return "";
-}
-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 sortTokens(Object.entries(resolved).filter(([path, token]) => {
-			if (token.$type !== "fontFamily") return false;
-			return globMatch(path, filter);
-		}), {
-			by: sortBy,
-			dir: sortDir
-		}).map(([path, token]) => ({
-			path,
-			cssVar: makeCssVar(path, cssVarPrefix),
-			stack: stackString(token.$value)
-		}));
-	}, [
-		resolved,
-		filter,
-		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),
-		children: /* @__PURE__ */ jsx("div", {
-			className: "sb-block__empty",
-			children: "No fontFamily tokens match this filter."
-		})
-	});
-	return /* @__PURE__ */ jsxs("div", {
-		...themeAttrs(cssVarPrefix, activeTheme),
-		children: [/* @__PURE__ */ jsx("div", {
-			className: "sb-block__caption",
-			children: captionText
-		}), rows.map((row) => /* @__PURE__ */ jsxs("div", {
-			className: "sb-font-family-sample__row",
-			children: [
-				/* @__PURE__ */ jsxs("div", {
-					className: "sb-font-family-sample__meta",
-					children: [/* @__PURE__ */ jsx("span", {
-						className: "sb-font-family-sample__path",
-						children: row.path
-					}), /* @__PURE__ */ jsx("span", {
-						className: "sb-font-family-sample__stack",
-						children: row.stack
-					})]
-				}),
-				/* @__PURE__ */ jsx("div", {
-					className: "sb-font-family-sample__sample",
-					style: { fontFamily: row.cssVar },
-					children: sample
-				}),
-				/* @__PURE__ */ jsx("span", {
-					className: "sb-font-family-sample__css-var",
-					children: row.cssVar
-				})
-			]
-		}, row.path))]
-	});
+//#region src/token-detail/AliasChain.tsx
+function AliasChain({ path }) {
+	const { token } = useTokenDetailData(path);
+	const chain = useMemo(() => {
+		if (!token) return [];
+		if (Array.isArray(token.aliasChain) && token.aliasChain.length > 0) return [path, ...token.aliasChain];
+		if (typeof token.aliasOf === "string") return [path, token.aliasOf];
+		return [path];
+	}, [token, path]);
+	if (chain.length <= 1) return null;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+		className: "sb-token-detail__section-header",
+		children: "Alias chain"
+	}), /* @__PURE__ */ jsx("div", {
+		className: "sb-token-detail__chain",
+		children: chain.map((step, i) => /* @__PURE__ */ jsxs("span", {
+			className: "sb-token-detail__chain",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "sb-token-detail__chain-node",
+				children: step
+			}), i < chain.length - 1 && /* @__PURE__ */ jsx("span", {
+				className: "sb-token-detail__arrow",
+				children: "→"
+			})]
+		}, step))
+	})] });
 }
 //#endregion
-//#region src/FontWeightScale.tsx
-function toWeight(raw) {
-	if (typeof raw === "number") return raw;
-	if (typeof raw === "string") {
-		const n = Number.parseInt(raw, 10);
-		return Number.isFinite(n) ? n : NaN;
-	}
-	return NaN;
-}
-function FontWeightScale({ filter, sample = "Aa", caption, sortBy = "value", sortDir = "asc" }) {
-	const { resolved, activeTheme, cssVarPrefix } = useProject();
-	const rows = useMemo(() => {
-		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,
-		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),
-		children: /* @__PURE__ */ jsx("div", {
-			className: "sb-block__empty",
-			children: "No fontWeight tokens match this filter."
-		})
-	});
-	return /* @__PURE__ */ jsxs("div", {
-		...themeAttrs(cssVarPrefix, activeTheme),
-		children: [/* @__PURE__ */ jsx("div", {
-			className: "sb-block__caption",
-			children: captionText
-		}), rows.map((row) => /* @__PURE__ */ jsxs("div", {
-			className: "sb-font-weight-scale__row",
+//#region src/token-detail/AliasedBy.tsx
+const ALIASED_BY_DEPTH_CAP = 6;
+const GROUP_RANK = {
+	ref: 0,
+	sys: 1
+};
+function AliasedBy({ path }) {
+	const { resolved } = useTokenDetailData(path);
+	const tree = useMemo(() => buildAliasedByTree(path, resolved), [path, resolved]);
+	const truncated = useMemo(() => treeHasTruncation(tree), [tree]);
+	if (tree.length === 0) return null;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx("div", {
+			className: "sb-token-detail__section-header",
+			children: "Aliased by"
+		}),
+		/* @__PURE__ */ jsx("ul", {
+			className: "sb-token-detail__aliased-by-list",
+			children: tree.map((node) => /* @__PURE__ */ jsx(AliasedByRow, {
+				node,
+				depth: 0
+			}, node.path))
+		}),
+		truncated && /* @__PURE__ */ jsxs("div", {
+			className: "sb-token-detail__aliased-by-truncated",
 			children: [
-				/* @__PURE__ */ jsxs("div", {
-					className: "sb-font-weight-scale__meta",
-					children: [/* @__PURE__ */ jsx("span", {
-						className: "sb-font-weight-scale__path",
-						children: row.path
-					}), /* @__PURE__ */ jsx("span", {
-						className: "sb-font-weight-scale__value",
-						children: row.display
-					})]
-				}),
-				/* @__PURE__ */ jsx("div", {
-					className: "sb-font-weight-scale__sample",
-					style: { fontWeight: row.cssVar },
-					children: sample
-				}),
-				/* @__PURE__ */ jsx("span", {
-					className: "sb-font-weight-scale__css-var",
-					children: row.cssVar
-				})
+				"Further descendants truncated at depth ",
+				ALIASED_BY_DEPTH_CAP,
+				"."
 			]
-		}, row.path))]
-	});
+		})
+	] });
 }
-//#endregion
-//#region src/GradientPalette.tsx
-function asStops(raw) {
-	if (!Array.isArray(raw)) return [];
-	return raw;
+function AliasedByRow({ node, depth }) {
+	return /* @__PURE__ */ jsxs("li", { children: [/* @__PURE__ */ jsx("div", {
+		className: "sb-token-detail__aliased-by-row",
+		style: { paddingLeft: depth * 16 },
+		children: /* @__PURE__ */ jsx("span", {
+			className: "sb-token-detail__chain-node",
+			children: node.path
+		})
+	}), node.children.length > 0 && /* @__PURE__ */ jsx("ul", {
+		className: "sb-token-detail__aliased-by-list",
+		children: node.children.map((child) => /* @__PURE__ */ jsx(AliasedByRow, {
+			node: child,
+			depth: depth + 1
+		}, child.path))
+	})] });
 }
-const pct = (n) => `${(n * 100).toFixed(3)}%`;
-function stopCssColor(stop) {
-	const color = stop.color;
-	if (!color || !Array.isArray(color.components) || color.components.length < 3) return "transparent";
-	const [r, g, b] = color.components;
-	if (r === void 0 || g === void 0 || b === void 0) return "transparent";
-	const alpha = color.alpha ?? 1;
-	return alpha === 1 ? `rgb(${pct(r)} ${pct(g)} ${pct(b)})` : `rgb(${pct(r)} ${pct(g)} ${pct(b)} / ${alpha})`;
+function buildAliasedByTree(rootPath, resolved) {
+	const direct = resolved[rootPath]?.aliasedBy;
+	if (!direct || direct.length === 0) return [];
+	const visited = new Set([rootPath]);
+	return sortPaths(direct).map((p) => walk(p, resolved, visited, 1));
 }
-function stopKey(path, stop, fallback) {
-	return `${path}|${stop.position ?? fallback}|${stopCssColor(stop)}`;
+function walk(path, resolved, visited, depth) {
+	if (visited.has(path)) return {
+		path,
+		children: []
+	};
+	visited.add(path);
+	const parents = resolved[path]?.aliasedBy;
+	if (!parents || parents.length === 0) return {
+		path,
+		children: []
+	};
+	if (depth >= ALIASED_BY_DEPTH_CAP) return {
+		path,
+		children: [],
+		truncated: true
+	};
+	return {
+		path,
+		children: sortPaths(parents).map((p) => walk(p, resolved, visited, depth + 1))
+	};
 }
-function GradientPalette({ filter, caption, sortBy = "path", sortDir = "asc" }) {
-	const { resolved, activeTheme, cssVarPrefix } = useProject();
+function sortPaths(paths) {
+	return paths.toSorted((a, b) => {
+		const ra = GROUP_RANK[a.split(".")[0] ?? ""] ?? 2;
+		const rb = GROUP_RANK[b.split(".")[0] ?? ""] ?? 2;
+		return ra !== rb ? ra - rb : a.localeCompare(b, void 0, { numeric: true });
+	});
+}
+function treeHasTruncation(nodes) {
+	for (const n of nodes) {
+		if (n.truncated) return true;
+		if (treeHasTruncation(n.children)) return true;
+	}
+	return false;
+}
+//#endregion
+//#region src/token-detail/AxisVariance.tsx
+function AxisVariance({ path }) {
+	const { token, cssVar, axes, themes, themesResolved, activeAxes, cssVarPrefix } = useTokenDetailData(path);
 	const colorFormat = useColorFormat();
-	const rows = useMemo(() => {
-		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)
-		}));
+	const tokenType = token?.$type;
+	const isColor = tokenType === "color";
+	const formatFn = (t) => valueFor(t, tokenType, colorFormat);
+	const variance = useMemo(() => {
+		const result = analyzeAxisVariance(path, axes, themes, themesResolved);
+		return {
+			kind: result.kind === "constant" ? "constant" : result.kind === "single" ? "one-axis" : "multi-axis",
+			varyingAxes: result.varyingAxes
+		};
 	}, [
-		resolved,
-		filter,
-		cssVarPrefix,
-		sortBy,
-		sortDir
+		path,
+		axes,
+		themes,
+		themesResolved
 	]);
-	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),
-		children: /* @__PURE__ */ jsx("div", {
-			className: "sb-block__empty",
-			children: "No gradient tokens match this filter."
-		})
-	});
-	return /* @__PURE__ */ jsxs("div", {
-		...themeAttrs(cssVarPrefix, activeTheme),
-		children: [/* @__PURE__ */ jsx("div", {
-			className: "sb-block__caption",
-			children: captionText
-		}), rows.map((row) => /* @__PURE__ */ jsxs("div", {
-			className: "sb-gradient-palette__row",
-			children: [
-				/* @__PURE__ */ jsxs("div", {
-					className: "sb-gradient-palette__meta",
-					children: [/* @__PURE__ */ jsx("span", {
-						className: "sb-gradient-palette__path",
-						children: row.path
-					}), /* @__PURE__ */ jsx("span", {
-						className: "sb-gradient-palette__css-var",
-						children: row.cssVar
-					})]
-				}),
-				/* @__PURE__ */ jsx("div", {
-					className: "sb-gradient-palette__sample",
-					style: { background: `linear-gradient(to right, ${row.cssVar})` },
-					"aria-hidden": true
-				}),
-				/* @__PURE__ */ jsx("div", {
-					className: "sb-gradient-palette__stops",
-					children: row.stops.map((stop, i) => /* @__PURE__ */ jsxs("div", {
-						className: "sb-gradient-palette__stop-row",
-						children: [
-							/* @__PURE__ */ jsx("span", {
-								className: "sb-gradient-palette__stop-swatch",
-								style: { background: stopCssColor(stop) },
-								"aria-hidden": true
-							}),
-							/* @__PURE__ */ jsx("span", { children: formatColor(stop.color, colorFormat).value }),
-							/* @__PURE__ */ jsxs("span", {
-								className: "sb-gradient-palette__stop-position",
-								children: [
-									"@ ",
-									((stop.position ?? 0) * 100).toFixed(0),
-									"%"
-								]
-							})
-						]
-					}, stopKey(row.path, stop, i)))
+	if (themes.length === 0) return /* @__PURE__ */ jsx(Fragment, {});
+	if (variance.kind === "constant") {
+		const anyTheme = themes[0];
+		const value = anyTheme ? formatFn(themesResolved[anyTheme.name]?.[path]) : "—";
+		return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+			className: "sb-token-detail__section-header",
+			children: "Values across axes"
+		}), /* @__PURE__ */ jsx("table", {
+			className: "sb-token-detail__theme-table",
+			"data-testid": "token-detail-values",
+			children: /* @__PURE__ */ jsx("tbody", { children: /* @__PURE__ */ jsx("tr", {
+				className: "sb-token-detail__theme-row",
+				children: /* @__PURE__ */ jsxs("td", {
+					className: "sb-token-detail__theme-cell",
+					"data-testid": "token-detail-constant",
+					children: [
+						isColor && /* @__PURE__ */ jsx("span", {
+							className: "sb-token-detail__swatch",
+							style: { background: cssVar },
+							"aria-hidden": true
+						}),
+						value,
+						/* @__PURE__ */ jsxs("span", {
+							style: {
+								opacity: .6,
+								marginLeft: 8
+							},
+							children: [
+								"same across all ",
+								themes.length,
+								" tuples"
+							]
+						})
+					]
 				})
+			}) })
+		})] });
+	}
+	if (variance.kind === "one-axis") {
+		const axisName = variance.varyingAxes[0];
+		if (!axisName) return /* @__PURE__ */ jsx(Fragment, {});
+		const axis = axes.find((a) => a.name === axisName);
+		if (!axis) return /* @__PURE__ */ jsx(Fragment, {});
+		const contextValues = axis.contexts.map((ctx) => {
+			const target = {
+				...activeAxes,
+				[axisName]: ctx
+			};
+			const name = themes.find((t) => {
+				const input = t.input;
+				return Object.keys(input).every((k) => input[k] === target[k]);
+			})?.name ?? "";
+			return {
+				ctx,
+				themeName: name,
+				value: name ? formatFn(themesResolved[name]?.[path]) : "—"
+			};
+		});
+		return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+			className: "sb-token-detail__section-header",
+			children: ["Varies with ", axisName]
+		}), /* @__PURE__ */ jsx("table", {
+			className: "sb-token-detail__theme-table",
+			"data-testid": "token-detail-values",
+			children: /* @__PURE__ */ jsx("tbody", { children: contextValues.map((row) => /* @__PURE__ */ jsxs("tr", {
+				className: "sb-token-detail__theme-row",
+				"data-axis": axisName,
+				"data-context": row.ctx,
+				children: [/* @__PURE__ */ jsx("td", {
+					className: "sb-token-detail__theme-cell",
+					style: { width: "30%" },
+					children: row.ctx
+				}), /* @__PURE__ */ jsxs("td", {
+					className: "sb-token-detail__theme-cell",
+					children: [isColor && row.themeName && /* @__PURE__ */ jsx("span", {
+						className: "sb-token-detail__swatch",
+						style: { background: cssVar },
+						[dataAttr(cssVarPrefix, "theme")]: row.themeName,
+						"aria-hidden": true
+					}), row.value]
+				})]
+			}, row.ctx)) })
+		})] });
+	}
+	const [rowAxis, colAxis, ...extra] = variance.varyingAxes.map((name) => axes.find((a) => a.name === name)).filter((a) => Boolean(a)).toSorted((a, b) => b.contexts.length - a.contexts.length);
+	if (!rowAxis || !colAxis) return /* @__PURE__ */ jsx(Fragment, {});
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsxs("div", {
+			className: "sb-token-detail__section-header",
+			children: ["Varies with ", variance.varyingAxes.join(" × ")]
+		}),
+		/* @__PURE__ */ jsxs("table", {
+			className: "sb-token-detail__theme-table",
+			"data-testid": "token-detail-values",
+			children: [/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", {
+				className: "sb-token-detail__theme-row",
+				children: [/* @__PURE__ */ jsxs("th", {
+					className: "sb-token-detail__theme-cell",
+					style: {
+						textAlign: "left",
+						opacity: .7
+					},
+					children: [
+						rowAxis.name,
+						" \\ ",
+						colAxis.name
+					]
+				}), colAxis.contexts.map((col) => /* @__PURE__ */ jsx("th", {
+					className: "sb-token-detail__theme-cell",
+					style: {
+						textAlign: "left",
+						opacity: .7
+					},
+					children: col
+				}, col))]
+			}) }), /* @__PURE__ */ jsx("tbody", { children: rowAxis.contexts.map((row) => /* @__PURE__ */ jsxs("tr", {
+				className: "sb-token-detail__theme-row",
+				children: [/* @__PURE__ */ jsx("td", {
+					className: "sb-token-detail__theme-cell",
+					children: row
+				}), colAxis.contexts.map((col) => {
+					const name = tupleName(themes, {
+						...activeAxes,
+						[rowAxis.name]: row,
+						[colAxis.name]: col
+					});
+					const value = name ? formatFn(themesResolved[name]?.[path]) : "—";
+					return /* @__PURE__ */ jsxs("td", {
+						className: "sb-token-detail__theme-cell",
+						"data-row": row,
+						"data-col": col,
+						children: [isColor && name && /* @__PURE__ */ jsx("span", {
+							className: "sb-token-detail__swatch",
+							style: { background: cssVar },
+							[dataAttr(cssVarPrefix, "theme")]: name,
+							"aria-hidden": true
+						}), value]
+					}, col);
+				})]
+			}, row)) })]
+		}),
+		extra.length > 0 && /* @__PURE__ */ jsxs("div", {
+			className: "sb-token-detail__aliased-by-truncated",
+			style: { marginTop: 6 },
+			children: [
+				"Values also vary with ",
+				extra.map((a) => a.name).join(", "),
+				"; matrix shows the slice for the active selection."
 			]
-		}, row.path))]
-	});
+		})
+	] });
 }
-//#endregion
-//#region src/internal/prefers-reduced-motion.ts
-/**
-* Reactive `prefers-reduced-motion: reduce` detector. Returns the current
-* match and updates if the user toggles the OS-level preference.
-*/
-function usePrefersReducedMotion() {
-	const [reduced, setReduced] = useState(false);
-	useEffect(() => {
-		if (typeof window === "undefined") return;
-		const query = window.matchMedia("(prefers-reduced-motion: reduce)");
-		setReduced(query.matches);
-		const onChange = (e) => setReduced(e.matches);
-		query.addEventListener("change", onChange);
-		return () => query.removeEventListener("change", onChange);
-	}, []);
-	return reduced;
+function valueFor(token, $type, format) {
+	if (!token) return "—";
+	return formatTokenValue(token.$value, $type, format);
 }
-//#endregion
-//#region src/motion-preview/MotionSample.tsx
-const DEFAULT_DURATION_MS = 300;
-const DEFAULT_EASING = "cubic-bezier(0.2, 0, 0, 1)";
-const styles = {
-	track: {
-		position: "relative",
-		height: 36,
-		background: SURFACE_MUTED,
-		borderRadius: 18,
-		overflow: "hidden"
-	},
-	ball: {
-		position: "absolute",
-		top: "50%",
-		width: 28,
-		height: 28,
-		marginTop: -14,
-		borderRadius: "50%",
-		background: "var(--swatchbook-accent-bg, #3b82f6)"
-	},
-	reducedMotion: {
-		fontSize: 11,
-		color: TEXT_MUTED,
-		fontStyle: "italic"
-	}
-};
-function extractDurationMs(raw) {
-	if (raw == null) return NaN;
-	if (typeof raw === "object") {
-		const v = raw;
-		if (typeof v.value === "number" && typeof v.unit === "string") {
-			if (v.unit === "ms") return v.value;
-			if (v.unit === "s") return v.value * 1e3;
-		}
-	}
-	return NaN;
-}
-function extractCubicBezier(raw) {
-	if (Array.isArray(raw) && raw.length === 4 && raw.every((n) => typeof n === "number")) return `cubic-bezier(${raw.map((n) => Number(n).toFixed(3)).join(", ")})`;
-	return null;
-}
-function asDuration(raw, themeTokens, fallback) {
-	const direct = extractDurationMs(raw);
-	if (Number.isFinite(direct)) return direct;
-	if (typeof raw === "string") {
-		const match = raw.match(/^\{([^}]+)\}$/);
-		if (match && match[1]) {
-			const referenced = themeTokens[match[1]];
-			const resolved = extractDurationMs(referenced?.$value);
-			if (Number.isFinite(resolved)) return resolved;
-		}
-	}
-	return fallback;
-}
-function asEasing(raw, themeTokens, fallback) {
-	const direct = extractCubicBezier(raw);
-	if (direct) return direct;
-	if (typeof raw === "string") {
-		const match = raw.match(/^\{([^}]+)\}$/);
-		if (match && match[1]) {
-			const referenced = themeTokens[match[1]];
-			const resolved = extractCubicBezier(referenced?.$value);
-			if (resolved) return resolved;
-		}
-	}
-	return fallback;
+function tupleName(themes, tuple) {
+	return themes.find((t) => {
+		const input = t.input;
+		return Object.keys(input).every((k) => input[k] === tuple[k]);
+	})?.name;
 }
-function resolveMotionSpec(token, themeTokens) {
+//#endregion
+//#region src/token-detail/CompositeBreakdown.tsx
+function CompositeBreakdown({ path }) {
+	const { token, resolved } = useTokenDetailData(path);
+	const colorFormat = useColorFormat();
 	if (!token) return null;
-	const type = token.$type;
-	if (type === "transition") {
-		const v = token.$value ?? {};
-		return {
-			durationMs: asDuration(v.duration, themeTokens, DEFAULT_DURATION_MS),
-			easing: asEasing(v.timingFunction, themeTokens, DEFAULT_EASING)
-		};
-	}
-	if (type === "duration") {
-		const durationMs = extractDurationMs(token.$value);
-		if (!Number.isFinite(durationMs)) return null;
-		return {
-			durationMs,
-			easing: DEFAULT_EASING
-		};
-	}
-	if (type === "cubicBezier") {
-		const easing = extractCubicBezier(token.$value);
-		if (!easing) return null;
-		return {
-			durationMs: DEFAULT_DURATION_MS,
-			easing
-		};
-	}
-	return null;
-}
-function MotionSample({ path, speed = 1, runKey = 0 }) {
-	const { resolved } = useProject();
-	const reducedMotion = usePrefersReducedMotion();
-	const spec = useMemo(() => resolveMotionSpec(resolved[path], resolved), [resolved, path]);
-	const durationMs = spec?.durationMs ?? DEFAULT_DURATION_MS;
-	const easing = spec?.easing ?? DEFAULT_EASING;
-	const scaledDuration = Math.max(1, durationMs / speed);
-	const [phase, setPhase] = useState(0);
-	useEffect(() => {
-		if (reducedMotion) return;
-		setPhase(0);
-		const id = requestAnimationFrame(() => setPhase(1));
-		const loop = window.setInterval(() => {
-			setPhase((p) => p === 0 ? 1 : 0);
-		}, scaledDuration * 2);
-		return () => {
-			cancelAnimationFrame(id);
-			window.clearInterval(loop);
-		};
-	}, [
-		scaledDuration,
-		runKey,
-		reducedMotion
-	]);
-	if (reducedMotion) return /* @__PURE__ */ jsx("div", {
-		style: styles.reducedMotion,
-		children: "Animation suppressed by `prefers-reduced-motion: reduce`."
-	});
-	return /* @__PURE__ */ jsx("div", {
-		style: styles.track,
-		children: /* @__PURE__ */ jsx("div", {
-			style: {
-				...styles.ball,
-				left: phase === 1 ? "calc(100% - 32px)" : "4px",
-				transition: `left ${scaledDuration}ms ${easing}`
-			},
-			"aria-hidden": true
-		})
+	return /* @__PURE__ */ jsx(CompositeBreakdownContent, {
+		type: token.$type,
+		rawValue: token.$value,
+		partialAliasOf: token.partialAliasOf,
+		resolved,
+		colorFormat
 	});
 }
-//#endregion
-//#region src/MotionPreview.tsx
-const SPEEDS = [
-	.25,
-	.5,
-	1,
-	2
-];
-function formatSpec(row) {
-	switch (row.kind) {
-		case "transition": return `transition · ${Math.round(row.durationMs)}ms · ${row.easing}`;
-		case "duration": return `duration · ${Math.round(row.durationMs)}ms`;
-		case "cubicBezier": return `cubicBezier · ${row.easing}`;
+function CompositeBreakdownContent({ type, rawValue, partialAliasOf, resolved, colorFormat }) {
+	if (!rawValue || typeof rawValue !== "object") return null;
+	const objectAliases = pickObjectAliases(partialAliasOf);
+	const arrayAliases = pickArrayAliases(partialAliasOf);
+	const aliasFor = (key) => subValueChain(objectAliases?.[key], resolved);
+	if (type === "typography") {
+		const v = rawValue;
+		return renderKeyValueList([
+			[
+				"fontFamily",
+				formatFontFamily(v["fontFamily"]),
+				aliasFor("fontFamily")
+			],
+			[
+				"fontSize",
+				formatDimensionValue(v["fontSize"]),
+				aliasFor("fontSize")
+			],
+			[
+				"fontWeight",
+				formatPrimitive(v["fontWeight"]),
+				aliasFor("fontWeight")
+			],
+			[
+				"lineHeight",
+				formatPrimitive(v["lineHeight"]),
+				aliasFor("lineHeight")
+			],
+			[
+				"letterSpacing",
+				formatDimensionValue(v["letterSpacing"]),
+				aliasFor("letterSpacing")
+			]
+		]);
 	}
-}
-function MotionPreview({ filter, caption }) {
-	const { resolved, activeTheme, cssVarPrefix } = useProject();
-	const [speed, setSpeed] = useState(1);
-	const [run, setRun] = useState(0);
-	const reducedMotion = usePrefersReducedMotion();
-	const rows = useMemo(() => {
-		const collected = [];
-		for (const [path, token] of Object.entries(resolved)) {
-			if (filter && !globMatch(path, filter)) continue;
-			if (!filter && ![
-				"transition",
+	if (type === "border") {
+		const v = rawValue;
+		return renderKeyValueList([
+			[
+				"color",
+				formatColorSubValue(v["color"], colorFormat),
+				aliasFor("color")
+			],
+			[
+				"width",
+				formatDimensionValue(v["width"]),
+				aliasFor("width")
+			],
+			[
+				"style",
+				formatPrimitive(v["style"]),
+				aliasFor("style")
+			]
+		]);
+	}
+	if (type === "transition") {
+		const v = rawValue;
+		return renderKeyValueList([
+			[
 				"duration",
-				"cubicBezier"
-			].includes(token.$type ?? "")) continue;
-			const kind = token.$type;
-			if (!kind) continue;
-			const spec = resolveMotionSpec(token, resolved);
-			if (!spec) continue;
-			collected.push({
-				path,
-				cssVar: makeCssVar(path, cssVarPrefix),
-				durationMs: spec.durationMs,
-				easing: spec.easing,
-				kind
-			});
-		}
-		collected.sort((a, b) => {
-			if (a.kind !== b.kind) return a.kind.localeCompare(b.kind);
-			return a.path.localeCompare(b.path, void 0, { numeric: true });
-		});
-		return collected;
-	}, [
-		resolved,
-		filter,
-		cssVarPrefix
-	]);
-	const captionText = caption ?? `${rows.length} motion token${rows.length === 1 ? "" : "s"}${filter ? ` matching \`${filter}\`` : ""} · ${activeTheme}`;
-	if (rows.length === 0) return /* @__PURE__ */ jsx("div", {
-		...themeAttrs(cssVarPrefix, activeTheme),
-		children: /* @__PURE__ */ jsx("div", {
-			className: "sb-block__empty",
-			children: "No motion tokens match this filter."
-		})
-	});
-	return /* @__PURE__ */ jsxs("div", {
-		...themeAttrs(cssVarPrefix, activeTheme),
-		children: [
-			/* @__PURE__ */ jsx("div", {
-				className: "sb-block__caption",
-				children: captionText
-			}),
-			/* @__PURE__ */ jsxs("div", {
-				className: "sb-motion-preview__controls",
-				children: [
-					/* @__PURE__ */ jsx("span", {
-						className: "sb-motion-preview__control-label",
-						children: "Speed"
-					}),
-					SPEEDS.map((s) => /* @__PURE__ */ jsxs("button", {
-						type: "button",
-						className: cx("sb-motion-preview__speed-btn", { "sb-motion-preview__speed-btn--active": s === speed }),
-						onClick: () => setSpeed(s),
-						children: [s, "×"]
-					}, s)),
-					/* @__PURE__ */ jsx("button", {
-						type: "button",
-						className: "sb-motion-preview__replay-btn",
-						onClick: () => setRun((n) => n + 1),
-						disabled: reducedMotion,
-						title: reducedMotion ? "Disabled by prefers-reduced-motion" : "Replay all",
-						children: "↻ Replay"
-					})
-				]
-			}),
-			rows.map((row) => /* @__PURE__ */ jsxs("div", {
-				className: "sb-motion-preview__row",
-				children: [
-					/* @__PURE__ */ jsxs("div", {
-						className: "sb-motion-preview__meta",
-						children: [/* @__PURE__ */ jsx("span", {
-							className: "sb-motion-preview__path",
-							children: row.path
-						}), /* @__PURE__ */ jsx("span", {
-							className: "sb-motion-preview__specs",
-							children: formatSpec(row)
-						})]
-					}),
-					/* @__PURE__ */ jsx(MotionSample, {
-						path: row.path,
-						speed,
-						runKey: run
-					}),
-					/* @__PURE__ */ jsx("span", {
-						className: "sb-motion-preview__css-var",
-						children: row.cssVar
-					})
-				]
-			}, row.path))
-		]
-	});
+				formatDimensionValue(v["duration"]),
+				aliasFor("duration")
+			],
+			[
+				"timingFunction",
+				formatPrimitive(v["timingFunction"]),
+				aliasFor("timingFunction")
+			],
+			[
+				"delay",
+				formatDimensionValue(v["delay"]),
+				aliasFor("delay")
+			]
+		]);
+	}
+	if (type === "shadow") {
+		const layers = Array.isArray(rawValue) ? rawValue : [rawValue];
+		const multi = layers.length > 1;
+		const layerAliasFor = (i, key) => subValueChain(arrayAliases?.[i]?.[key], resolved);
+		return /* @__PURE__ */ jsx("div", {
+			className: "sb-token-detail__breakdown-section",
+			children: layers.map((layer, i) => {
+				const v = layer;
+				return /* @__PURE__ */ jsxs("div", {
+					style: { display: "contents" },
+					children: [
+						multi && /* @__PURE__ */ jsxs("div", {
+							className: "sb-token-detail__breakdown-layer-header",
+							children: ["Layer ", i + 1]
+						}),
+						/* @__PURE__ */ jsx(KeyValueRow, {
+							label: "color",
+							value: formatColorSubValue(v["color"], colorFormat),
+							alias: layerAliasFor(i, "color")
+						}),
+						/* @__PURE__ */ jsx(KeyValueRow, {
+							label: "offsetX",
+							value: formatDimensionValue(v["offsetX"]),
+							alias: layerAliasFor(i, "offsetX")
+						}),
+						/* @__PURE__ */ jsx(KeyValueRow, {
+							label: "offsetY",
+							value: formatDimensionValue(v["offsetY"]),
+							alias: layerAliasFor(i, "offsetY")
+						}),
+						/* @__PURE__ */ jsx(KeyValueRow, {
+							label: "blur",
+							value: formatDimensionValue(v["blur"]),
+							alias: layerAliasFor(i, "blur")
+						}),
+						/* @__PURE__ */ jsx(KeyValueRow, {
+							label: "spread",
+							value: formatDimensionValue(v["spread"]),
+							alias: layerAliasFor(i, "spread")
+						}),
+						"inset" in v && /* @__PURE__ */ jsx(KeyValueRow, {
+							label: "inset",
+							value: formatPrimitive(v["inset"]),
+							alias: void 0
+						})
+					]
+				}, shadowLayerKey(v, i));
+			})
+		});
+	}
+	if (type === "gradient") {
+		const stops = Array.isArray(rawValue) ? rawValue : [];
+		if (stops.length === 0) return null;
+		const stopAliasFor = (i) => subValueChain(arrayAliases?.[i]?.["color"], resolved);
+		return /* @__PURE__ */ jsx("div", {
+			className: "sb-token-detail__breakdown-section",
+			children: stops.map((stop, i) => {
+				const v = stop;
+				return /* @__PURE__ */ jsx(KeyValueRow, {
+					label: `${((typeof v["position"] === "number" ? v["position"] : 0) * 100).toFixed(0)}%`,
+					value: formatColorSubValue(v["color"], colorFormat),
+					alias: stopAliasFor(i)
+				}, gradientStopKey(v, i));
+			})
+		});
+	}
+	return null;
 }
-//#endregion
-//#region src/provider.tsx
-/**
-* Wraps a tree of blocks with the token data they need to render.
-*
-* The Storybook addon's preview decorator mounts this automatically, so
-* story/MDX authors typically never see it. Outside Storybook — unit
-* tests, custom React apps, non-Storybook doc sites — consumers construct
-* a {@link ProjectSnapshot} (often imported from a JSON file) and wrap
-* their blocks in this provider.
-*/
-function SwatchbookProvider({ value, children }) {
-	return /* @__PURE__ */ jsx(SwatchbookContext.Provider, {
-		value,
-		children
+function renderKeyValueList(rows) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "sb-token-detail__breakdown-section",
+		children: rows.filter(([, v, alias]) => v !== null || alias && alias.length > 0).map(([k, v, alias]) => /* @__PURE__ */ jsx(KeyValueRow, {
+			label: k,
+			value: v ?? "",
+			alias
+		}, k))
 	});
 }
-/**
-* Read the current {@link ProjectSnapshot}. Throws if called outside a
-* {@link SwatchbookProvider}; blocks that need to fall back to the
-* virtual module go through the internal `useProject()` hook instead.
-*/
-function useSwatchbookData() {
-	const value = useOptionalSwatchbookData();
-	if (!value) throw new Error("[swatchbook-blocks] useSwatchbookData() called outside <SwatchbookProvider>. Wrap your tree in <SwatchbookProvider value={snapshot}> or render inside a Storybook story.");
-	return value;
+function KeyValueRow({ label, value, alias }) {
+	const hasAlias = alias && alias.length > 0;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+		className: "sb-token-detail__breakdown-key",
+		children: label
+	}), /* @__PURE__ */ jsxs("span", {
+		className: "sb-token-detail__breakdown-value",
+		children: [/* @__PURE__ */ jsx("span", { children: value ?? "—" }), hasAlias && /* @__PURE__ */ jsx("span", {
+			className: "sb-token-detail__breakdown-alias",
+			"data-testid": "breakdown-alias",
+			children: alias.map((p, i) => /* @__PURE__ */ jsxs("span", {
+				className: "sb-token-detail__breakdown-alias-step",
+				children: [i > 0 && /* @__PURE__ */ jsx("span", {
+					className: "sb-token-detail__arrow",
+					children: "→"
+				}), /* @__PURE__ */ jsx("span", {
+					className: "sb-token-detail__chain-node",
+					children: p
+				})]
+			}, p))
+		})]
+	})] });
 }
-//#endregion
-//#region src/shadow-preview/ShadowSample.tsx
-const sampleStyle = {
-	width: 120,
-	height: 56,
-	background: SURFACE_RAISED,
-	border: BORDER_FAINT,
-	borderRadius: 6
-};
-function ShadowSample({ path }) {
-	const { cssVarPrefix } = useProject();
-	const cssVar = makeCssVar(path, cssVarPrefix);
-	return /* @__PURE__ */ jsx("div", {
-		style: {
-			...sampleStyle,
-			boxShadow: cssVar
-		},
-		"aria-hidden": true
-	});
+function formatPrimitive(v) {
+	if (v == null) return null;
+	if (typeof v === "string" || typeof v === "number" || typeof v === "boolean") return String(v);
+	return JSON.stringify(v);
 }
-//#endregion
-//#region src/ShadowPreview.tsx
-function formatDimension(raw) {
-	if (raw == null) return "—";
-	if (typeof raw === "number") return String(raw);
-	if (typeof raw === "string") return raw;
-	if (typeof raw === "object") {
-		const v = raw;
-		if (typeof v.value === "number" && typeof v.unit === "string") return `${v.value}${v.unit}`;
-	}
-	return JSON.stringify(raw);
+function formatFontFamily(v) {
+	if (v == null) return null;
+	if (typeof v === "string") return v;
+	if (Array.isArray(v)) return v.map(String).join(", ");
+	return JSON.stringify(v);
 }
-function formatSubColor(raw, format) {
-	if (raw == null) return "—";
-	return formatColor(raw, format).value;
+function formatDimensionValue(v) {
+	if (v == null) return null;
+	if (typeof v === "string" || typeof v === "number") return String(v);
+	if (typeof v === "object") {
+		const d = v;
+		if (typeof d.value === "number" && typeof d.unit === "string") return `${d.value}${d.unit}`;
+	}
+	return JSON.stringify(v);
 }
-function asLayers(raw) {
-	if (Array.isArray(raw)) return raw;
-	if (raw && typeof raw === "object") return [raw];
-	return [];
+/**
+* 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;
+	return formatColor(v, format).value;
 }
-function layerKey(path, layer, fallback) {
-	return `${path}|${`${formatDimension(layer.offsetX)},${formatDimension(layer.offsetY)}`}|${formatDimension(layer.blur)}|${formatDimension(layer.spread)}|${fallback}`;
+function pickObjectAliases(v) {
+	if (!v || typeof v !== "object" || Array.isArray(v)) return void 0;
+	return v;
 }
-function ShadowPreview({ filter, caption, sortBy = "path", sortDir = "asc" }) {
-	const { resolved, activeTheme, cssVarPrefix } = useProject();
-	const colorFormat = useColorFormat();
-	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,
-		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),
-		children: /* @__PURE__ */ jsx("div", {
-			className: "sb-block__empty",
-			children: "No shadow tokens match this filter."
-		})
-	});
-	return /* @__PURE__ */ jsxs("div", {
-		...themeAttrs(cssVarPrefix, activeTheme),
-		children: [/* @__PURE__ */ jsx("div", {
-			className: "sb-block__caption",
-			children: captionText
-		}), rows.map((row) => /* @__PURE__ */ jsxs("div", {
-			className: "sb-shadow-preview__row",
-			children: [
-				/* @__PURE__ */ jsxs("div", {
-					className: "sb-shadow-preview__meta",
-					children: [/* @__PURE__ */ jsx("span", {
-						className: "sb-shadow-preview__path",
-						children: row.path
-					}), /* @__PURE__ */ jsx("span", {
-						className: "sb-shadow-preview__css-var",
-						children: row.cssVar
-					})]
-				}),
-				/* @__PURE__ */ jsx("div", {
-					className: "sb-shadow-preview__sample-cell",
-					children: /* @__PURE__ */ jsx(ShadowSample, { path: row.path })
-				}),
-				/* @__PURE__ */ jsx("div", {
-					className: "sb-shadow-preview__breakdown",
-					children: row.layers.length === 1 ? renderLayer(row.layers[0], colorFormat) : row.layers.map((layer, i) => /* @__PURE__ */ jsx(Layer, {
-						layer,
-						index: i,
-						total: row.layers.length,
-						colorFormat
-					}, layerKey(row.path, layer, i)))
-				})
-			]
-		}, row.path))]
-	});
+function pickArrayAliases(v) {
+	if (!Array.isArray(v)) return void 0;
+	return v;
 }
-function renderLayer(layer, format) {
-	if (!layer) return [];
-	const entries = [
-		["offset", `${formatDimension(layer.offsetX)} ${formatDimension(layer.offsetY)}`],
-		["blur", formatDimension(layer.blur)],
-		["spread", formatDimension(layer.spread)],
-		["color", formatSubColor(layer.color, format)]
-	];
-	if (layer.inset) entries.push(["inset", String(layer.inset)]);
-	return entries.flatMap(([k, v]) => [/* @__PURE__ */ jsx("span", {
-		className: "sb-shadow-preview__breakdown-key",
-		children: k
-	}, `k-${k}`), /* @__PURE__ */ jsx("span", { children: v }, `v-${k}`)]);
+/**
+* Walk the alias chain starting from an immediate sub-value alias target.
+* `aliasTarget` is the path the sub-value directly references; the target
+* token's own `aliasChain` continues the walk to the primitive.
+*/
+function subValueChain(aliasTarget, resolved) {
+	if (!aliasTarget) return void 0;
+	const tail = (resolved?.[aliasTarget])?.aliasChain;
+	return tail && tail.length > 0 ? [aliasTarget, ...tail] : [aliasTarget];
 }
-function Layer({ layer, index, total, colorFormat }) {
-	return /* @__PURE__ */ jsxs("div", {
-		className: "sb-shadow-preview__layer",
-		children: [/* @__PURE__ */ jsxs("div", {
-			className: "sb-shadow-preview__layer-header",
-			children: [
-				"layer ",
-				index + 1,
-				" of ",
-				total
-			]
-		}), /* @__PURE__ */ jsx("div", {
-			className: cx("sb-shadow-preview__breakdown", "sb-shadow-preview__layer-breakdown"),
-			children: renderLayer(layer, colorFormat)
-		})]
-	});
+function shadowLayerKey(layer, fallback) {
+	return `shadow|${[
+		layer["color"],
+		layer["offsetX"],
+		layer["offsetY"],
+		layer["blur"],
+		layer["spread"],
+		layer["inset"]
+	].map((p) => p === void 0 ? "" : JSON.stringify(p)).join("|")}|${fallback}`;
+}
+function gradientStopKey(stop, fallback) {
+	return `stop|${stop["position"] ?? fallback}|${JSON.stringify(stop["color"])}`;
 }
 //#endregion
-//#region src/StrokeStyleSample.tsx
-const STRING_STYLES = new Set([
+//#region src/internal/prefers-reduced-motion.ts
+/**
+* Reactive `prefers-reduced-motion: reduce` detector. Returns the current
+* match and updates if the user toggles the OS-level preference.
+*/
+function usePrefersReducedMotion() {
+	const [reduced, setReduced] = useState(false);
+	useEffect(() => {
+		if (typeof window === "undefined") return;
+		const query = window.matchMedia("(prefers-reduced-motion: reduce)");
+		setReduced(query.matches);
+		const onChange = (e) => setReduced(e.matches);
+		query.addEventListener("change", onChange);
+		return () => query.removeEventListener("change", onChange);
+	}, []);
+	return reduced;
+}
+//#endregion
+//#region src/token-detail/CompositePreview.tsx
+const PANGRAM = "Sphinx of black quartz, judge my vow.";
+const STROKE_STYLE_STRINGS = new Set([
 	"solid",
 	"dashed",
 	"dotted",
@@ -1925,1022 +1658,1608 @@ const STRING_STYLES = new Set([
 	"outset",
 	"inset"
 ]);
-function extractCssStyle(value) {
-	if (typeof value === "string" && STRING_STYLES.has(value)) return value;
-	return null;
+function CompositePreview({ path }) {
+	const { token, cssVar } = useTokenDetailData(path);
+	if (!token) return null;
+	return /* @__PURE__ */ jsx(CompositePreviewContent, {
+		type: token.$type,
+		cssVar,
+		rawValue: token.$value
+	});
 }
-function StrokeStyleSample({ 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 !== "strokeStyle") return false;
-			return globMatch(path, filter);
-		}), {
-			by: sortBy,
-			dir: sortDir
-		}).map(([path, token]) => ({
-			path,
-			cssVar: makeCssVar(path, cssVarPrefix),
-			displayValue: formatTokenValue(token.$value, token.$type, "raw"),
-			cssStyle: extractCssStyle(token.$value)
-		}));
-	}, [
-		resolved,
-		filter,
-		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),
+function CompositePreviewContent({ type, cssVar, rawValue }) {
+	if (type === "typography") {
+		const base = cssVar.replace(/^var\(/, "").replace(/\)$/, "");
+		return /* @__PURE__ */ jsx("div", {
+			className: "sb-token-detail__typography-sample",
+			style: {
+				fontFamily: `var(${base}-font-family)`,
+				fontSize: `var(${base}-font-size)`,
+				fontWeight: `var(${base}-font-weight)`,
+				lineHeight: `var(${base}-line-height)`,
+				letterSpacing: `var(${base}-letter-spacing)`
+			},
+			children: PANGRAM
+		});
+	}
+	if (type === "shadow") return /* @__PURE__ */ jsx("div", {
+		className: "sb-token-detail__shadow-sample",
+		style: { boxShadow: cssVar },
+		"aria-hidden": true
+	});
+	if (type === "border") return /* @__PURE__ */ jsx("div", {
+		className: "sb-token-detail__border-sample",
+		style: { border: cssVar },
+		"aria-hidden": true
+	});
+	if (type === "transition") return /* @__PURE__ */ jsx(TransitionSample, { transition: cssVar });
+	if (type === "dimension") return /* @__PURE__ */ jsx("div", {
+		className: "sb-token-detail__dimension-track",
 		children: /* @__PURE__ */ jsx("div", {
-			className: "sb-block__empty",
-			children: "No strokeStyle tokens match this filter."
+			className: "sb-token-detail__dimension-bar",
+			style: { width: cssVar },
+			"aria-hidden": true
 		})
 	});
-	return /* @__PURE__ */ jsxs("div", {
-		...themeAttrs(cssVarPrefix, activeTheme),
+	if (type === "duration") return /* @__PURE__ */ jsx(TransitionSample, { transition: `left ${cssVar} ease` });
+	if (type === "fontFamily") return /* @__PURE__ */ jsx("div", {
+		className: "sb-token-detail__font-family-sample",
+		style: { fontFamily: cssVar },
+		children: PANGRAM
+	});
+	if (type === "fontWeight") return /* @__PURE__ */ jsx("div", {
+		className: "sb-token-detail__font-weight-sample",
+		style: { fontWeight: cssVar },
+		children: "Aa"
+	});
+	if (type === "cubicBezier") return /* @__PURE__ */ jsx(TransitionSample, { transition: `left 800ms ${cssVar}` });
+	if (type === "gradient") return /* @__PURE__ */ jsx("div", {
+		className: "sb-token-detail__gradient-sample",
+		style: { background: `linear-gradient(to right, ${cssVar})` },
+		"aria-hidden": true
+	});
+	if (type === "strokeStyle") return /* @__PURE__ */ jsx(StrokeStylePreview, { value: rawValue });
+	if (type === "color") return /* @__PURE__ */ jsxs("div", {
+		className: "sb-token-detail__color-swatch-row",
+		"aria-hidden": true,
 		children: [/* @__PURE__ */ jsx("div", {
-			className: "sb-block__caption",
-			children: captionText
-		}), rows.map((row) => /* @__PURE__ */ jsxs("div", {
-			className: "sb-stroke-style-sample__row",
-			children: [
-				/* @__PURE__ */ jsxs("div", {
-					className: "sb-stroke-style-sample__meta",
-					children: [/* @__PURE__ */ jsx("span", {
-						className: "sb-stroke-style-sample__path",
-						children: row.path
-					}), /* @__PURE__ */ jsx("span", {
-						className: "sb-stroke-style-sample__value",
-						children: row.displayValue
-					})]
-				}),
-				row.cssStyle ? /* @__PURE__ */ jsx("div", {
-					className: "sb-stroke-style-sample__line",
-					style: { borderTopStyle: row.cssStyle },
-					"aria-hidden": true
-				}) : /* @__PURE__ */ jsx("span", {
-					className: "sb-stroke-style-sample__object-fallback",
-					children: "Object-form (dashArray + lineCap) — no pure CSS `border-style` equivalent."
-				}),
-				/* @__PURE__ */ jsx("span", {
-					className: "sb-stroke-style-sample__css-var",
-					children: row.cssVar
-				})
-			]
-		}, row.path))]
+			className: "sb-token-detail__color-swatch-light",
+			style: { background: cssVar }
+		}), /* @__PURE__ */ jsx("div", {
+			className: "sb-token-detail__color-swatch-dark",
+			style: { background: cssVar }
+		})]
 	});
+	return null;
 }
-//#endregion
-//#region src/token-detail/internal.ts
-function useTokenDetailData(path) {
-	const { activeTheme, activeAxes, axes, themes, themesResolved, resolved, cssVarPrefix } = useProject();
-	const typedResolved = resolved;
-	return {
-		token: typedResolved[path],
-		cssVar: makeCssVar(path, cssVarPrefix),
-		activeTheme,
-		activeAxes,
-		axes,
-		themes,
-		themesResolved,
-		resolved: typedResolved,
-		cssVarPrefix
-	};
+function StrokeStylePreview({ value }) {
+	if (typeof value === "string" && STROKE_STYLE_STRINGS.has(value)) return /* @__PURE__ */ jsx("div", {
+		className: "sb-token-detail__stroke-style-line",
+		style: { borderTopStyle: value },
+		"aria-hidden": true
+	});
+	if (value && typeof value === "object" && "dashArray" in value) {
+		const v = value;
+		const lengths = asDashLengths(v.dashArray);
+		if (lengths.length === 0) return /* @__PURE__ */ jsx("div", {
+			className: "sb-token-detail__stroke-style-fallback",
+			children: "Object-form strokeStyle with no resolvable dashArray."
+		});
+		const cap = typeof v.lineCap === "string" ? v.lineCap : "butt";
+		return /* @__PURE__ */ jsx("svg", {
+			className: "sb-token-detail__stroke-style-svg",
+			viewBox: "0 0 220 24",
+			preserveAspectRatio: "none",
+			"aria-hidden": true,
+			children: /* @__PURE__ */ jsx("line", {
+				x1: "4",
+				y1: "12",
+				x2: "216",
+				y2: "12",
+				stroke: "currentColor",
+				strokeWidth: "4",
+				strokeDasharray: lengths.join(" "),
+				strokeLinecap: cap
+			})
+		});
+	}
+	return /* @__PURE__ */ jsx("div", {
+		className: "sb-token-detail__stroke-style-fallback",
+		children: "strokeStyle value could not be previewed."
+	});
 }
-//#endregion
-//#region src/token-detail/AliasChain.tsx
-function AliasChain({ path }) {
-	const { token } = useTokenDetailData(path);
-	const chain = useMemo(() => {
-		if (!token) return [];
-		if (Array.isArray(token.aliasChain) && token.aliasChain.length > 0) return [path, ...token.aliasChain];
-		if (typeof token.aliasOf === "string") return [path, token.aliasOf];
-		return [path];
-	}, [token, path]);
-	if (chain.length <= 1) return null;
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
-		className: "sb-token-detail__section-header",
-		children: "Alias chain"
-	}), /* @__PURE__ */ jsx("div", {
-		className: "sb-token-detail__chain",
-		children: chain.map((step, i) => /* @__PURE__ */ jsxs("span", {
-			className: "sb-token-detail__chain",
-			children: [/* @__PURE__ */ jsx("span", {
-				className: "sb-token-detail__chain-node",
-				children: step
-			}), i < chain.length - 1 && /* @__PURE__ */ jsx("span", {
-				className: "sb-token-detail__arrow",
-				children: "→"
-			})]
-		}, step))
-	})] });
+function asDashLengths(raw) {
+	if (!Array.isArray(raw)) return [];
+	const out = [];
+	for (const entry of raw) {
+		if (typeof entry === "number") {
+			out.push(entry);
+			continue;
+		}
+		if (entry && typeof entry === "object") {
+			const e = entry;
+			if (typeof e.value === "number") out.push(e.value);
+		}
+	}
+	return out;
+}
+function TransitionSample({ transition }) {
+	const reduced = usePrefersReducedMotion();
+	const [phase, setPhase] = useState(0);
+	useEffect(() => {
+		if (reduced) return;
+		const id = requestAnimationFrame(() => setPhase(1));
+		const loop = window.setInterval(() => {
+			setPhase((p) => p === 0 ? 1 : 0);
+		}, 1200);
+		return () => {
+			cancelAnimationFrame(id);
+			window.clearInterval(loop);
+		};
+	}, [reduced]);
+	if (reduced) return /* @__PURE__ */ jsx("div", {
+		className: "sb-token-detail__reduced-motion",
+		children: "Animation suppressed by `prefers-reduced-motion: reduce`."
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: "sb-token-detail__motion-track",
+		children: /* @__PURE__ */ jsx("div", {
+			className: "sb-token-detail__motion-ball",
+			style: {
+				left: phase === 1 ? "calc(100% - 28px)" : "4px",
+				transition
+			},
+			"aria-hidden": true
+		})
+	});
 }
 //#endregion
-//#region src/token-detail/AliasedBy.tsx
-const ALIASED_BY_DEPTH_CAP = 6;
-const GROUP_RANK = {
-	ref: 0,
-	sys: 1
-};
-function AliasedBy({ path }) {
-	const { resolved } = useTokenDetailData(path);
-	const tree = useMemo(() => buildAliasedByTree(path, resolved), [path, resolved]);
-	const truncated = useMemo(() => treeHasTruncation(tree), [tree]);
-	if (tree.length === 0) return null;
+//#region src/token-detail/ConsumerOutput.tsx
+function ConsumerOutput({ path }) {
+	const { token, cssVar, activeAxes } = useTokenDetailData(path);
+	if (!token) return null;
+	const tupleLabel = Object.entries(activeAxes).map(([k, v]) => `${k}=${v}`).join(", ");
 	return /* @__PURE__ */ jsxs(Fragment, { children: [
 		/* @__PURE__ */ jsx("div", {
 			className: "sb-token-detail__section-header",
-			children: "Aliased by"
+			children: "Consumer output"
 		}),
-		/* @__PURE__ */ jsx("ul", {
-			className: "sb-token-detail__aliased-by-list",
-			children: tree.map((node) => /* @__PURE__ */ jsx(AliasedByRow, {
-				node,
-				depth: 0
-			}, node.path))
+		tupleLabel && /* @__PURE__ */ jsxs("div", {
+			className: "sb-token-detail__tuple-indicator",
+			children: ["Active tuple: ", /* @__PURE__ */ jsx("strong", { children: tupleLabel })]
 		}),
-		truncated && /* @__PURE__ */ jsxs("div", {
-			className: "sb-token-detail__aliased-by-truncated",
-			children: [
-				"Further descendants truncated at depth ",
-				ALIASED_BY_DEPTH_CAP,
-				"."
-			]
+		/* @__PURE__ */ jsx(OutputRow, {
+			label: "Path",
+			value: path,
+			testId: "consumer-output-path"
+		}),
+		/* @__PURE__ */ jsx(OutputRow, {
+			label: "CSS",
+			value: cssVar,
+			testId: "consumer-output-css"
 		})
 	] });
 }
-function AliasedByRow({ node, depth }) {
-	return /* @__PURE__ */ jsxs("li", { children: [/* @__PURE__ */ jsx("div", {
-		className: "sb-token-detail__aliased-by-row",
-		style: { paddingLeft: depth * 16 },
-		children: /* @__PURE__ */ jsx("span", {
-			className: "sb-token-detail__chain-node",
-			children: node.path
-		})
-	}), node.children.length > 0 && /* @__PURE__ */ jsx("ul", {
-		className: "sb-token-detail__aliased-by-list",
-		children: node.children.map((child) => /* @__PURE__ */ jsx(AliasedByRow, {
-			node: child,
-			depth: depth + 1
-		}, child.path))
-	})] });
-}
-function buildAliasedByTree(rootPath, resolved) {
-	const direct = resolved[rootPath]?.aliasedBy;
-	if (!direct || direct.length === 0) return [];
-	const visited = new Set([rootPath]);
-	return sortPaths(direct).map((p) => walk(p, resolved, visited, 1));
-}
-function walk(path, resolved, visited, depth) {
-	if (visited.has(path)) return {
-		path,
-		children: []
-	};
-	visited.add(path);
-	const parents = resolved[path]?.aliasedBy;
-	if (!parents || parents.length === 0) return {
-		path,
-		children: []
-	};
-	if (depth >= ALIASED_BY_DEPTH_CAP) return {
-		path,
-		children: [],
-		truncated: true
-	};
-	return {
-		path,
-		children: sortPaths(parents).map((p) => walk(p, resolved, visited, depth + 1))
-	};
-}
-function sortPaths(paths) {
-	return paths.toSorted((a, b) => {
-		const ra = GROUP_RANK[a.split(".")[0] ?? ""] ?? 2;
-		const rb = GROUP_RANK[b.split(".")[0] ?? ""] ?? 2;
-		return ra !== rb ? ra - rb : a.localeCompare(b, void 0, { numeric: true });
+function OutputRow({ label, value, testId }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "sb-token-detail__consumer-row",
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "sb-token-detail__consumer-row-label",
+				children: label
+			}),
+			/* @__PURE__ */ jsx("code", {
+				className: "sb-token-detail__consumer-row-value",
+				"data-testid": testId,
+				children: value
+			}),
+			/* @__PURE__ */ jsx(CopyButton, {
+				text: value,
+				testId: `${testId}-copy`
+			})
+		]
 	});
 }
-function treeHasTruncation(nodes) {
-	for (const n of nodes) {
-		if (n.truncated) return true;
-		if (treeHasTruncation(n.children)) return true;
-	}
-	return false;
-}
-//#endregion
-//#region src/token-detail/AxisVariance.tsx
-function AxisVariance({ path }) {
-	const { token, cssVar, axes, themes, themesResolved, activeAxes, cssVarPrefix } = useTokenDetailData(path);
-	const colorFormat = useColorFormat();
-	const tokenType = token?.$type;
-	const isColor = tokenType === "color";
-	const formatFn = (t) => valueFor(t, tokenType, colorFormat);
-	const variance = useMemo(() => {
-		const result = analyzeAxisVariance(path, axes, themes, themesResolved);
-		return {
-			kind: result.kind === "constant" ? "constant" : result.kind === "single" ? "one-axis" : "multi-axis",
-			varyingAxes: result.varyingAxes
-		};
-	}, [
-		path,
-		axes,
-		themes,
-		themesResolved
-	]);
-	if (themes.length === 0) return /* @__PURE__ */ jsx(Fragment, {});
-	if (variance.kind === "constant") {
-		const anyTheme = themes[0];
-		const value = anyTheme ? formatFn(themesResolved[anyTheme.name]?.[path]) : "—";
-		return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
-			className: "sb-token-detail__section-header",
-			children: "Values across axes"
-		}), /* @__PURE__ */ jsx("table", {
-			className: "sb-token-detail__theme-table",
-			"data-testid": "token-detail-values",
-			children: /* @__PURE__ */ jsx("tbody", { children: /* @__PURE__ */ jsx("tr", {
-				className: "sb-token-detail__theme-row",
-				children: /* @__PURE__ */ jsxs("td", {
-					className: "sb-token-detail__theme-cell",
-					"data-testid": "token-detail-constant",
-					children: [
-						isColor && /* @__PURE__ */ jsx("span", {
-							className: "sb-token-detail__swatch",
-							style: { background: cssVar },
-							"aria-hidden": true
-						}),
-						value,
-						/* @__PURE__ */ jsxs("span", {
-							style: {
-								opacity: .6,
-								marginLeft: 8
-							},
-							children: [
-								"same across all ",
-								themes.length,
-								" tuples"
-							]
-						})
-					]
-				})
-			}) })
-		})] });
-	}
-	if (variance.kind === "one-axis") {
-		const axisName = variance.varyingAxes[0];
-		if (!axisName) return /* @__PURE__ */ jsx(Fragment, {});
-		const axis = axes.find((a) => a.name === axisName);
-		if (!axis) return /* @__PURE__ */ jsx(Fragment, {});
-		const contextValues = axis.contexts.map((ctx) => {
-			const target = {
-				...activeAxes,
-				[axisName]: ctx
-			};
-			const name = themes.find((t) => {
-				const input = t.input;
-				return Object.keys(input).every((k) => input[k] === target[k]);
-			})?.name ?? "";
-			return {
-				ctx,
-				themeName: name,
-				value: name ? formatFn(themesResolved[name]?.[path]) : "—"
-			};
-		});
-		return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
-			className: "sb-token-detail__section-header",
-			children: ["Varies with ", axisName]
-		}), /* @__PURE__ */ jsx("table", {
-			className: "sb-token-detail__theme-table",
-			"data-testid": "token-detail-values",
-			children: /* @__PURE__ */ jsx("tbody", { children: contextValues.map((row) => /* @__PURE__ */ jsxs("tr", {
-				className: "sb-token-detail__theme-row",
-				"data-axis": axisName,
-				"data-context": row.ctx,
-				children: [/* @__PURE__ */ jsx("td", {
-					className: "sb-token-detail__theme-cell",
-					style: { width: "30%" },
-					children: row.ctx
-				}), /* @__PURE__ */ jsxs("td", {
-					className: "sb-token-detail__theme-cell",
-					children: [isColor && row.themeName && /* @__PURE__ */ jsx("span", {
-						className: "sb-token-detail__swatch",
-						style: { background: cssVar },
-						[dataAttr(cssVarPrefix, "theme")]: row.themeName,
-						"aria-hidden": true
-					}), row.value]
-				})]
-			}, row.ctx)) })
-		})] });
+function CopyButton({ text, testId }) {
+	const [copied, setCopied] = useState(false);
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		className: "sb-token-detail__consumer-row-copy",
+		"data-testid": testId,
+		onClick: () => {
+			copyToClipboard(text).then((ok) => {
+				if (!ok) return;
+				setCopied(true);
+				window.setTimeout(() => setCopied(false), 1200);
+			});
+		},
+		children: copied ? "Copied" : "Copy"
+	});
+}
+async function copyToClipboard(text) {
+	if (typeof navigator === "undefined" || !navigator.clipboard) return false;
+	try {
+		await navigator.clipboard.writeText(text);
+		return true;
+	} catch {
+		return false;
 	}
-	const [rowAxis, colAxis, ...extra] = variance.varyingAxes.map((name) => axes.find((a) => a.name === name)).filter((a) => Boolean(a)).toSorted((a, b) => b.contexts.length - a.contexts.length);
-	if (!rowAxis || !colAxis) return /* @__PURE__ */ jsx(Fragment, {});
+}
+//#endregion
+//#region src/token-detail/TokenHeader.tsx
+function TokenHeader({ path, heading }) {
+	const { token, cssVar, activeTheme } = useTokenDetailData(path);
+	if (!token) return /* @__PURE__ */ jsxs("div", {
+		className: "sb-token-detail__missing",
+		children: [
+			"Token ",
+			/* @__PURE__ */ jsx("code", { children: path }),
+			" not found in theme ",
+			/* @__PURE__ */ jsx("strong", { children: activeTheme }),
+			"."
+		]
+	});
 	return /* @__PURE__ */ jsxs(Fragment, { children: [
-		/* @__PURE__ */ jsxs("div", {
-			className: "sb-token-detail__section-header",
-			children: ["Varies with ", variance.varyingAxes.join(" × ")]
+		/* @__PURE__ */ jsx("h3", {
+			className: "sb-token-detail__heading",
+			children: heading ?? path
 		}),
-		/* @__PURE__ */ jsxs("table", {
-			className: "sb-token-detail__theme-table",
-			"data-testid": "token-detail-values",
-			children: [/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", {
-				className: "sb-token-detail__theme-row",
-				children: [/* @__PURE__ */ jsxs("th", {
-					className: "sb-token-detail__theme-cell",
-					style: {
-						textAlign: "left",
-						opacity: .7
-					},
-					children: [
-						rowAxis.name,
-						" \\ ",
-						colAxis.name
-					]
-				}), colAxis.contexts.map((col) => /* @__PURE__ */ jsx("th", {
-					className: "sb-token-detail__theme-cell",
-					style: {
-						textAlign: "left",
-						opacity: .7
-					},
-					children: col
-				}, col))]
-			}) }), /* @__PURE__ */ jsx("tbody", { children: rowAxis.contexts.map((row) => /* @__PURE__ */ jsxs("tr", {
-				className: "sb-token-detail__theme-row",
-				children: [/* @__PURE__ */ jsx("td", {
-					className: "sb-token-detail__theme-cell",
-					children: row
-				}), colAxis.contexts.map((col) => {
-					const name = tupleName(themes, {
-						...activeAxes,
-						[rowAxis.name]: row,
-						[colAxis.name]: col
-					});
-					const value = name ? formatFn(themesResolved[name]?.[path]) : "—";
-					return /* @__PURE__ */ jsxs("td", {
-						className: "sb-token-detail__theme-cell",
-						"data-row": row,
-						"data-col": col,
-						children: [isColor && name && /* @__PURE__ */ jsx("span", {
-							className: "sb-token-detail__swatch",
-							style: { background: cssVar },
-							[dataAttr(cssVarPrefix, "theme")]: name,
-							"aria-hidden": true
-						}), value]
-					}, col);
-				})]
-			}, row)) })]
+		/* @__PURE__ */ jsxs("div", {
+			className: "sb-token-detail__subline",
+			children: [token.$type && /* @__PURE__ */ jsx("span", {
+				className: "sb-token-detail__type-pill",
+				children: token.$type
+			}), /* @__PURE__ */ jsx("span", { children: cssVar })]
 		}),
-		extra.length > 0 && /* @__PURE__ */ jsxs("div", {
-			className: "sb-token-detail__aliased-by-truncated",
-			style: { marginTop: 6 },
-			children: [
-				"Values also vary with ",
-				extra.map((a) => a.name).join(", "),
-				"; matrix shows the slice for the active selection."
-			]
+		token.$description && /* @__PURE__ */ jsx("p", {
+			className: "sb-token-detail__description",
+			children: token.$description
 		})
 	] });
 }
-function valueFor(token, $type, format) {
-	if (!token) return "—";
-	return formatTokenValue(token.$value, $type, format);
-}
-function tupleName(themes, tuple) {
-	return themes.find((t) => {
-		const input = t.input;
-		return Object.keys(input).every((k) => input[k] === tuple[k]);
-	})?.name;
+//#endregion
+//#region src/token-detail/TokenUsageSnippet.tsx
+function TokenUsageSnippet({ path }) {
+	const { token, cssVar } = useTokenDetailData(path);
+	if (!token) return null;
+	const snippet = `color: ${cssVar};`;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+		className: "sb-token-detail__section-header",
+		children: "Usage"
+	}), /* @__PURE__ */ jsxs("div", {
+		className: "sb-token-detail__snippet-row",
+		children: [/* @__PURE__ */ jsx("code", {
+			className: "sb-token-detail__snippet",
+			children: snippet
+		}), /* @__PURE__ */ jsx(CopyButton$1, {
+			value: snippet,
+			label: `Copy usage snippet ${snippet}`
+		})]
+	})] });
 }
 //#endregion
-//#region src/token-detail/CompositeBreakdown.tsx
-function CompositeBreakdown({ path }) {
-	const { token, resolved } = useTokenDetailData(path);
+//#region src/TokenDetail.tsx
+function TokenDetail({ path, heading }) {
+	const { token, cssVar, activeTheme, cssVarPrefix } = useTokenDetailData(path);
 	const colorFormat = useColorFormat();
-	if (!token) return null;
-	return /* @__PURE__ */ jsx(CompositeBreakdownContent, {
-		type: token.$type,
-		rawValue: token.$value,
-		partialAliasOf: token.partialAliasOf,
+	const theme = themeAttrs(cssVarPrefix, activeTheme);
+	if (!token) return /* @__PURE__ */ jsx("div", {
+		...theme,
+		className: cx(theme["className"], "sb-token-detail"),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "sb-token-detail__missing",
+			children: [
+				"Token ",
+				/* @__PURE__ */ jsx("code", { children: path }),
+				" not found in theme ",
+				/* @__PURE__ */ jsx("strong", { children: activeTheme }),
+				"."
+			]
+		})
+	});
+	const isColor = token.$type === "color";
+	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", {
+		...theme,
+		className: cx(theme["className"], "sb-token-detail"),
+		children: [
+			/* @__PURE__ */ jsx(TokenHeader, {
+				path,
+				...heading !== void 0 && { heading }
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "sb-token-detail__section-header",
+				children: ["Resolved value · ", activeTheme]
+			}),
+			/* @__PURE__ */ jsx(CompositePreview, { path }),
+			/* @__PURE__ */ jsx(CompositeBreakdown, { path }),
+			/* @__PURE__ */ jsxs("div", {
+				className: "sb-token-detail__chain",
+				children: [
+					isColor && /* @__PURE__ */ jsx("span", {
+						className: "sb-token-detail__swatch",
+						style: { background: cssVar },
+						"aria-hidden": true
+					}),
+					/* @__PURE__ */ jsx("span", { children: value }),
+					outOfGamut && /* @__PURE__ */ jsx("span", {
+						title: "Out of sRGB gamut for this format",
+						"aria-label": "out of gamut",
+						style: { marginLeft: 6 },
+						children: "⚠"
+					}),
+					/* @__PURE__ */ jsx(CopyButton$1, {
+						value,
+						label: `Copy value ${value}`
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx(AliasChain, { path }),
+			/* @__PURE__ */ jsx(AliasedBy, { path }),
+			/* @__PURE__ */ jsx(TokenUsageSnippet, { path }),
+			/* @__PURE__ */ jsx(ConsumerOutput, { path }),
+			/* @__PURE__ */ jsx(AxisVariance, { path })
+		]
+	});
+}
+//#endregion
+//#region src/internal/DetailOverlay.tsx
+function DetailOverlay({ path, onClose, testId = "swatchbook-overlay" }) {
+	useEffect(() => {
+		const onKey = (e) => {
+			if (e.key === "Escape") onClose();
+		};
+		window.addEventListener("keydown", onKey);
+		return () => window.removeEventListener("keydown", onKey);
+	}, [onClose]);
+	return /* @__PURE__ */ jsx("div", {
+		className: "sb-detail-overlay__backdrop",
+		onClick: onClose,
+		role: "presentation",
+		"data-testid": testId,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "sb-detail-overlay__panel",
+			onClick: (e) => e.stopPropagation(),
+			role: "dialog",
+			"aria-modal": "true",
+			"aria-label": `Token detail for ${path}`,
+			children: [/* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: "sb-detail-overlay__close",
+				onClick: onClose,
+				"aria-label": "Close",
+				"data-testid": `${testId}-close`,
+				children: "×"
+			}), /* @__PURE__ */ jsx(TokenDetail, { path })]
+		})
+	});
+}
+//#endregion
+//#region src/ColorTable.tsx
+function ColorTable({ filter, caption, sortBy = "path", sortDir = "asc", searchable = true, onSelect, variants }) {
+	const { resolved, activeTheme, cssVarPrefix } = useProject();
+	const [selectedPath, setSelectedPath] = useState(null);
+	const [query, setQuery] = useState("");
+	const variantIndex = useMemo(() => buildVariantIndex(variants), [variants]);
+	const rows = useMemo(() => {
+		return sortTokens(Object.entries(resolved).filter(([path, token]) => {
+			if (token.$type !== "color") return false;
+			return globMatch(path, filter);
+		}), {
+			by: sortBy,
+			dir: sortDir
+		}).map(([path, token]) => {
+			const raw = token.$value;
+			const hex = formatColor(raw, "hex");
+			const hsl = formatColor(raw, "hsl");
+			const oklch = formatColor(raw, "oklch");
+			const variant = matchVariant(path, variantIndex);
+			return {
+				path,
+				cssVar: makeCssVar(path, cssVarPrefix),
+				hex: hex.value,
+				hsl: hsl.value,
+				oklch: oklch.value,
+				hexOutOfGamut: hex.outOfGamut,
+				...token.aliasOf !== void 0 && { aliasOf: token.aliasOf },
+				...variant !== void 0 && { variant }
+			};
+		});
+	}, [
 		resolved,
-		colorFormat
+		filter,
+		cssVarPrefix,
+		sortBy,
+		sortDir,
+		variantIndex
+	]);
+	const visibleRows = useMemo(() => {
+		if (!searchable || query.trim() === "") return rows;
+		return fuzzyFilter(rows, query, (r) => `${r.path} ${r.hex} ${r.hsl} ${r.oklch}`);
+	}, [
+		rows,
+		query,
+		searchable
+	]);
+	const handleRowClick = useCallback((path) => {
+		if (onSelect) onSelect(path);
+		else setSelectedPath(path);
+	}, [onSelect]);
+	const matchSuffix = searchable && query.trim() !== "" ? ` · ${visibleRows.length} matching "${query.trim()}"` : "";
+	const captionText = caption ?? `${rows.length} color${rows.length === 1 ? "" : "s"}${filter ? ` matching \`${filter}\`` : ""}${matchSuffix} · ${activeTheme}`;
+	if (rows.length === 0) return /* @__PURE__ */ jsx("div", {
+		...themeAttrs(cssVarPrefix, activeTheme),
+		children: /* @__PURE__ */ jsx("div", {
+			className: "sb-block__empty",
+			children: "No color tokens match this filter."
+		})
 	});
-}
-function CompositeBreakdownContent({ type, rawValue, partialAliasOf, resolved, colorFormat }) {
-	if (!rawValue || typeof rawValue !== "object") return null;
-	const objectAliases = pickObjectAliases(partialAliasOf);
-	const arrayAliases = pickArrayAliases(partialAliasOf);
-	const aliasFor = (key) => subValueChain(objectAliases?.[key], resolved);
-	if (type === "typography") {
-		const v = rawValue;
-		return renderKeyValueList([
-			[
-				"fontFamily",
-				formatFontFamily(v["fontFamily"]),
-				aliasFor("fontFamily")
-			],
-			[
-				"fontSize",
-				formatDimensionValue(v["fontSize"]),
-				aliasFor("fontSize")
-			],
-			[
-				"fontWeight",
-				formatPrimitive(v["fontWeight"]),
-				aliasFor("fontWeight")
-			],
-			[
-				"lineHeight",
-				formatPrimitive(v["lineHeight"]),
-				aliasFor("lineHeight")
-			],
-			[
-				"letterSpacing",
-				formatDimensionValue(v["letterSpacing"]),
-				aliasFor("letterSpacing")
-			]
-		]);
-	}
-	if (type === "border") {
-		const v = rawValue;
-		return renderKeyValueList([
-			[
-				"color",
-				formatColorSubValue(v["color"], colorFormat),
-				aliasFor("color")
-			],
-			[
-				"width",
-				formatDimensionValue(v["width"]),
-				aliasFor("width")
-			],
-			[
-				"style",
-				formatPrimitive(v["style"]),
-				aliasFor("style")
-			]
-		]);
-	}
-	if (type === "transition") {
-		const v = rawValue;
-		return renderKeyValueList([
-			[
-				"duration",
-				formatDimensionValue(v["duration"]),
-				aliasFor("duration")
-			],
-			[
-				"timingFunction",
-				formatPrimitive(v["timingFunction"]),
-				aliasFor("timingFunction")
-			],
-			[
-				"delay",
-				formatDimensionValue(v["delay"]),
-				aliasFor("delay")
-			]
-		]);
-	}
-	if (type === "shadow") {
-		const layers = Array.isArray(rawValue) ? rawValue : [rawValue];
-		const multi = layers.length > 1;
-		const layerAliasFor = (i, key) => subValueChain(arrayAliases?.[i]?.[key], resolved);
-		return /* @__PURE__ */ jsx("div", {
-			className: "sb-token-detail__breakdown-section",
-			children: layers.map((layer, i) => {
-				const v = layer;
-				return /* @__PURE__ */ jsxs("div", {
-					style: { display: "contents" },
-					children: [
-						multi && /* @__PURE__ */ jsxs("div", {
-							className: "sb-token-detail__breakdown-layer-header",
-							children: ["Layer ", i + 1]
+	return /* @__PURE__ */ jsxs("div", {
+		...themeAttrs(cssVarPrefix, activeTheme),
+		children: [
+			searchable && /* @__PURE__ */ jsx("div", {
+				className: "sb-color-table__search",
+				children: /* @__PURE__ */ jsx("input", {
+					type: "search",
+					className: "sb-color-table__search-input",
+					placeholder: "Search colors…",
+					value: query,
+					onChange: (e) => setQuery(e.target.value),
+					"aria-label": "Fuzzy-search colors by path or value",
+					"data-testid": "color-table-search"
+				})
+			}),
+			/* @__PURE__ */ jsxs("table", {
+				className: "sb-color-table__table",
+				children: [
+					/* @__PURE__ */ jsx("caption", {
+						className: "sb-color-table__caption",
+						children: captionText
+					}),
+					/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+						/* @__PURE__ */ jsx("th", {
+							className: "sb-color-table__th sb-color-table__th--swatch",
+							children: /* @__PURE__ */ jsx("span", {
+								className: "sb-color-table__sr-only",
+								children: "Swatch"
+							})
 						}),
-						/* @__PURE__ */ jsx(KeyValueRow, {
-							label: "color",
-							value: formatColorSubValue(v["color"], colorFormat),
-							alias: layerAliasFor(i, "color")
+						/* @__PURE__ */ jsx("th", {
+							className: "sb-color-table__th sb-color-table__th--path",
+							children: "Name"
 						}),
-						/* @__PURE__ */ jsx(KeyValueRow, {
-							label: "offsetX",
-							value: formatDimensionValue(v["offsetX"]),
-							alias: layerAliasFor(i, "offsetX")
+						/* @__PURE__ */ jsx("th", {
+							className: "sb-color-table__th",
+							children: "HEX"
 						}),
-						/* @__PURE__ */ jsx(KeyValueRow, {
-							label: "offsetY",
-							value: formatDimensionValue(v["offsetY"]),
-							alias: layerAliasFor(i, "offsetY")
+						/* @__PURE__ */ jsx("th", {
+							className: "sb-color-table__th",
+							children: "HSL"
 						}),
-						/* @__PURE__ */ jsx(KeyValueRow, {
-							label: "blur",
-							value: formatDimensionValue(v["blur"]),
-							alias: layerAliasFor(i, "blur")
+						/* @__PURE__ */ jsx("th", {
+							className: "sb-color-table__th",
+							children: "OKLCH"
 						}),
-						/* @__PURE__ */ jsx(KeyValueRow, {
-							label: "spread",
-							value: formatDimensionValue(v["spread"]),
-							alias: layerAliasFor(i, "spread")
+						/* @__PURE__ */ jsx("th", {
+							className: "sb-color-table__th",
+							children: "CSS var"
 						}),
-						"inset" in v && /* @__PURE__ */ jsx(KeyValueRow, {
-							label: "inset",
-							value: formatPrimitive(v["inset"]),
-							alias: void 0
+						/* @__PURE__ */ jsx("th", {
+							className: "sb-color-table__th",
+							children: "Alias"
 						})
-					]
-				}, shadowLayerKey(v, i));
+					] }) }),
+					/* @__PURE__ */ jsxs("tbody", { children: [visibleRows.length === 0 && /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsxs("td", {
+						colSpan: 7,
+						className: "sb-color-table__td sb-color-table__empty-row",
+						children: [
+							"No colors match \"",
+							query.trim(),
+							"\"."
+						]
+					}) }), visibleRows.map((row) => /* @__PURE__ */ jsxs("tr", {
+						className: "sb-color-table__row",
+						onClick: () => handleRowClick(row.path),
+						onKeyDown: (e) => {
+							if (e.key === "Enter" || e.key === " ") {
+								e.preventDefault();
+								handleRowClick(row.path);
+							}
+						},
+						tabIndex: 0,
+						"aria-label": `Inspect ${row.path}`,
+						"data-testid": "color-table-row",
+						"data-path": row.path,
+						children: [
+							/* @__PURE__ */ jsx("td", {
+								className: "sb-color-table__td sb-color-table__swatch-cell",
+								children: /* @__PURE__ */ jsx("span", {
+									className: "sb-color-table__swatch",
+									style: { background: row.cssVar },
+									"aria-hidden": true
+								})
+							}),
+							/* @__PURE__ */ jsxs("td", {
+								className: cx("sb-color-table__td", "sb-color-table__path"),
+								children: [/* @__PURE__ */ jsx("span", {
+									className: "sb-color-table__path-text",
+									children: row.path
+								}), row.variant !== void 0 && /* @__PURE__ */ jsx("span", {
+									className: "sb-color-table__variant-pill",
+									"data-variant": row.variant,
+									"data-testid": "color-table-variant",
+									children: row.variant
+								})]
+							}),
+							/* @__PURE__ */ jsx(ValueCell, {
+								value: row.hex,
+								label: `Copy HEX ${row.hex}`,
+								children: row.hexOutOfGamut && /* @__PURE__ */ jsx("span", {
+									title: "Out of sRGB gamut",
+									"aria-label": "out of gamut",
+									className: "sb-color-table__gamut-warn",
+									children: "⚠"
+								})
+							}),
+							/* @__PURE__ */ jsx(ValueCell, {
+								value: row.hsl,
+								label: `Copy HSL ${row.hsl}`
+							}),
+							/* @__PURE__ */ jsx(ValueCell, {
+								value: row.oklch,
+								label: `Copy OKLCH ${row.oklch}`
+							}),
+							/* @__PURE__ */ jsx(ValueCell, {
+								value: row.cssVar,
+								label: `Copy CSS var ${row.cssVar}`
+							}),
+							/* @__PURE__ */ jsx("td", {
+								className: "sb-color-table__td sb-color-table__alias",
+								children: row.aliasOf ? /* @__PURE__ */ jsx("span", {
+									className: "sb-color-table__alias-text",
+									children: row.aliasOf
+								}) : /* @__PURE__ */ jsx("span", {
+									className: "sb-color-table__alias-empty",
+									"aria-hidden": true,
+									children: "—"
+								})
+							})
+						]
+					}, row.path))] })
+				]
+			}),
+			selectedPath !== null && /* @__PURE__ */ jsx(DetailOverlay, {
+				path: selectedPath,
+				onClose: () => setSelectedPath(null),
+				testId: "color-table-overlay"
+			})
+		]
+	});
+}
+function ValueCell({ value, label, children }) {
+	return /* @__PURE__ */ jsxs("td", {
+		className: "sb-color-table__td sb-color-table__value-cell",
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "sb-color-table__value-text",
+				title: value,
+				children: value
+			}),
+			children,
+			/* @__PURE__ */ jsx("span", {
+				className: "sb-color-table__copy-wrap",
+				onClick: (e) => e.stopPropagation(),
+				onKeyDown: (e) => e.stopPropagation(),
+				role: "presentation",
+				children: /* @__PURE__ */ jsx(CopyButton$1, {
+					value,
+					label,
+					className: "sb-color-table__copy"
+				})
 			})
+		]
+	});
+}
+/**
+* Pre-sort the variants map by descending suffix length so the first
+* `endsWith` hit during matching is always the longest. Empty suffixes are
+* dropped — they'd match every path and make the feature meaningless.
+*/
+function buildVariantIndex(variants) {
+	if (!variants) return [];
+	const entries = [];
+	for (const [label, suffix] of Object.entries(variants)) {
+		if (suffix.length === 0) continue;
+		entries.push({
+			label,
+			suffix
 		});
 	}
-	if (type === "gradient") {
-		const stops = Array.isArray(rawValue) ? rawValue : [];
-		if (stops.length === 0) return null;
-		const stopAliasFor = (i) => subValueChain(arrayAliases?.[i]?.["color"], resolved);
-		return /* @__PURE__ */ jsx("div", {
-			className: "sb-token-detail__breakdown-section",
-			children: stops.map((stop, i) => {
-				const v = stop;
-				return /* @__PURE__ */ jsx(KeyValueRow, {
-					label: `${((typeof v["position"] === "number" ? v["position"] : 0) * 100).toFixed(0)}%`,
-					value: formatColorSubValue(v["color"], colorFormat),
-					alias: stopAliasFor(i)
-				}, gradientStopKey(v, i));
-			})
+	entries.sort((a, b) => b.suffix.length - a.suffix.length);
+	return entries;
+}
+/**
+* Resolve the variant label for a token path, if any. The leaf (last
+* dot-segment) must either equal the suffix outright (`hi.disabled`
+* matches suffix `disabled`) or end in `-<suffix>` (`hi-d` matches `d`).
+* The leading hyphen is required for the tail form, so suffix `h` matches
+* `hi-h` but not `highlight` or `neutral-900` — the whole trailing token
+* has to be the suffix, not a character within it. Entries are tried
+* longest-first, so `h-dark` wins over `dark` when both are configured
+* and the path ends in `-h-dark`.
+*/
+function matchVariant(path, variantIndex) {
+	if (variantIndex.length === 0) return void 0;
+	const leaf = path.split(".").at(-1) ?? path;
+	for (const entry of variantIndex) if (leaf === entry.suffix || leaf.endsWith(`-${entry.suffix}`)) return entry.label;
+}
+//#endregion
+//#region src/Diagnostics.tsx
+const severityLabel = {
+	error: "ERROR",
+	warn: "WARN",
+	info: "INFO"
+};
+function summaryText(diagnostics) {
+	if (diagnostics.length === 0) return "✔ OK · no diagnostics";
+	const counts = {
+		error: 0,
+		warn: 0,
+		info: 0
+	};
+	for (const d of diagnostics) counts[d.severity] += 1;
+	const parts = [];
+	if (counts.error > 0) parts.push(`✖ ${counts.error} error${counts.error === 1 ? "" : "s"}`);
+	if (counts.warn > 0) parts.push(`⚠ ${counts.warn} warning${counts.warn === 1 ? "" : "s"}`);
+	if (counts.info > 0) parts.push(`${counts.info} info`);
+	return parts.join(" · ");
+}
+function diagnosticKey(d, i) {
+	return `${d.severity}:${d.group}:${d.filename ?? ""}:${d.line ?? ""}:${d.message}:${i}`;
+}
+function summaryVariant(diagnostics) {
+	if (diagnostics.length === 0) return "ok";
+	if (diagnostics.some((d) => d.severity === "error")) return "error";
+	if (diagnostics.some((d) => d.severity === "warn")) return "warn";
+	return null;
+}
+/**
+* Render the project's load diagnostics — parser errors, resolver warnings,
+* disabled-axes validation issues, etc. — as a collapsible list. Auto-opens
+* when the project carries errors or warnings; stays collapsed for clean
+* loads and info-only loads.
+*
+* Replaces the diagnostics section from the addon's (now-retired) Design
+* Tokens panel. Consumers compose it alongside TokenNavigator / TokenTable
+* on their own MDX pages.
+*/
+function Diagnostics({ caption } = {}) {
+	const { activeTheme, cssVarPrefix, diagnostics } = useProject();
+	const hasErrorsOrWarnings = diagnostics.some((d) => d.severity === "error" || d.severity === "warn");
+	const headingText = caption ?? `Diagnostics · ${summaryText(diagnostics)}`;
+	const variant = summaryVariant(diagnostics);
+	return /* @__PURE__ */ jsx("div", {
+		...themeAttrs(cssVarPrefix, activeTheme),
+		"data-testid": "diagnostics",
+		children: /* @__PURE__ */ jsxs("details", {
+			open: hasErrorsOrWarnings,
+			children: [/* @__PURE__ */ jsx("summary", {
+				className: cx("sb-diagnostics__summary", variant && `sb-diagnostics__summary--${variant}`),
+				children: headingText
+			}), diagnostics.length > 0 && /* @__PURE__ */ jsx("ul", {
+				className: "sb-diagnostics__list",
+				children: diagnostics.map((d, i) => /* @__PURE__ */ jsxs("li", {
+					className: "sb-diagnostics__row",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: cx("sb-diagnostics__label", { [`sb-diagnostics__label--${d.severity}`]: d.severity !== "info" }),
+						children: severityLabel[d.severity]
+					}), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("div", { children: d.message }), (d.group || d.filename) && /* @__PURE__ */ jsx("div", {
+						className: "sb-diagnostics__meta",
+						children: [
+							d.group,
+							d.filename,
+							d.line ? `:${d.line}` : ""
+						].filter(Boolean).join(" · ")
+					})] })]
+				}, diagnosticKey(d, i)))
+			})]
+		})
+	});
+}
+//#endregion
+//#region src/dimension-scale/DimensionBar.tsx
+const MAX_RENDER_PX$1 = 480;
+const styles$1 = {
+	bar: {
+		height: 14,
+		background: "var(--swatchbook-accent-bg, #3b82f6)",
+		borderRadius: 2,
+		minWidth: 1
+	},
+	radiusSample: {
+		width: 56,
+		height: 56,
+		background: "var(--swatchbook-accent-bg, #3b82f6)",
+		border: BORDER_STRONG
+	},
+	sizeSample: {
+		background: "var(--swatchbook-accent-bg, #3b82f6)",
+		border: BORDER_STRONG,
+		minWidth: 1,
+		minHeight: 1
+	}
+};
+/**
+* Convert a DTCG dimension `$value` (`{ value, unit }`) to pixels for the
+* purpose of deciding whether to cap the rendered bar. Returns `NaN` for
+* units we can't reasonably approximate (ex / ch / %), which the caller
+* treats as "render at cssVar but don't cap".
+*/
+function toPixels$1(raw) {
+	if (raw == null || typeof raw !== "object") return NaN;
+	const v = raw;
+	if (typeof v.value !== "number" || typeof v.unit !== "string") return NaN;
+	switch (v.unit) {
+		case "px": return v.value;
+		case "rem":
+		case "em": return v.value * 16;
+		default: return NaN;
+	}
+}
+function DimensionBar({ path, kind = "length" }) {
+	const { resolved, cssVarPrefix } = useProject();
+	const cssVar = makeCssVar(path, cssVarPrefix);
+	const token = resolved[path];
+	const pxValue = toPixels$1(token?.$value);
+	const cappedValue = Number.isFinite(pxValue) && pxValue > MAX_RENDER_PX$1 ? `${MAX_RENDER_PX$1}px` : cssVar;
+	switch (kind) {
+		case "radius": return /* @__PURE__ */ jsx("div", {
+			style: {
+				...styles$1.radiusSample,
+				borderRadius: cssVar
+			},
+			"aria-hidden": true
+		});
+		case "size": return /* @__PURE__ */ jsx("div", {
+			style: {
+				...styles$1.sizeSample,
+				width: cappedValue,
+				height: cappedValue
+			},
+			"aria-hidden": true
+		});
+		default: return /* @__PURE__ */ jsx("div", {
+			style: {
+				...styles$1.bar,
+				width: cappedValue
+			},
+			"aria-hidden": true
 		});
 	}
-	return null;
 }
-function renderKeyValueList(rows) {
-	return /* @__PURE__ */ jsx("div", {
-		className: "sb-token-detail__breakdown-section",
-		children: rows.filter(([, v, alias]) => v !== null || alias && alias.length > 0).map(([k, v, alias]) => /* @__PURE__ */ jsx(KeyValueRow, {
-			label: k,
-			value: v ?? "",
-			alias
-		}, k))
+//#endregion
+//#region src/DimensionScale.tsx
+const MAX_RENDER_PX = 480;
+function toPixels(raw) {
+	if (raw == null || typeof raw !== "object") return NaN;
+	const v = raw;
+	if (typeof v.value !== "number" || typeof v.unit !== "string") return NaN;
+	switch (v.unit) {
+		case "px": return v.value;
+		case "rem":
+		case "em": return v.value * 16;
+		default: return NaN;
+	}
+}
+function DimensionScale({ filter, kind = "length", caption, sortBy = "value", sortDir = "asc" }) {
+	const { resolved, activeTheme, cssVarPrefix } = useProject();
+	const rows = useMemo(() => {
+		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);
+			return {
+				path,
+				cssVar: makeCssVar(path, cssVarPrefix),
+				displayValue: formatTokenValue(token.$value, token.$type, "raw"),
+				pxValue,
+				capped: Number.isFinite(pxValue) && pxValue > MAX_RENDER_PX
+			};
+		});
+	}, [
+		resolved,
+		filter,
+		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),
+		children: /* @__PURE__ */ jsx("div", {
+			className: "sb-block__empty",
+			children: "No dimension tokens match this filter."
+		})
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		...themeAttrs(cssVarPrefix, activeTheme),
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "sb-block__caption",
+			children: captionText
+		}), rows.map((row) => /* @__PURE__ */ jsxs("div", {
+			className: "sb-dimension-scale__row",
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "sb-dimension-scale__meta",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "sb-dimension-scale__path",
+						children: row.path
+					}), /* @__PURE__ */ jsx("span", {
+						className: "sb-dimension-scale__specs",
+						children: row.displayValue
+					})]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "sb-dimension-scale__visual-cell",
+					children: [/* @__PURE__ */ jsx(DimensionBar, {
+						path: row.path,
+						kind
+					}), row.capped && /* @__PURE__ */ jsxs("span", {
+						className: "sb-dimension-scale__cap",
+						children: [
+							"capped at ",
+							MAX_RENDER_PX,
+							"px"
+						]
+					})]
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "sb-dimension-scale__css-var",
+					children: row.cssVar
+				})
+			]
+		}, row.path))]
 	});
 }
-function KeyValueRow({ label, value, alias }) {
-	const hasAlias = alias && alias.length > 0;
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
-		className: "sb-token-detail__breakdown-key",
-		children: label
-	}), /* @__PURE__ */ jsxs("span", {
-		className: "sb-token-detail__breakdown-value",
-		children: [/* @__PURE__ */ jsx("span", { children: value ?? "—" }), hasAlias && /* @__PURE__ */ jsx("span", {
-			className: "sb-token-detail__breakdown-alias",
-			"data-testid": "breakdown-alias",
-			children: alias.map((p, i) => /* @__PURE__ */ jsxs("span", {
-				className: "sb-token-detail__breakdown-alias-step",
-				children: [i > 0 && /* @__PURE__ */ jsx("span", {
-					className: "sb-token-detail__arrow",
-					children: "→"
-				}), /* @__PURE__ */ jsx("span", {
-					className: "sb-token-detail__chain-node",
-					children: p
-				})]
-			}, p))
-		})]
-	})] });
+//#endregion
+//#region src/FontFamilySample.tsx
+function stackString(raw) {
+	if (typeof raw === "string") return raw;
+	if (Array.isArray(raw)) return raw.map(String).join(", ");
+	return "";
+}
+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 sortTokens(Object.entries(resolved).filter(([path, token]) => {
+			if (token.$type !== "fontFamily") return false;
+			return globMatch(path, filter);
+		}), {
+			by: sortBy,
+			dir: sortDir
+		}).map(([path, token]) => ({
+			path,
+			cssVar: makeCssVar(path, cssVarPrefix),
+			stack: stackString(token.$value)
+		}));
+	}, [
+		resolved,
+		filter,
+		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),
+		children: /* @__PURE__ */ jsx("div", {
+			className: "sb-block__empty",
+			children: "No fontFamily tokens match this filter."
+		})
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		...themeAttrs(cssVarPrefix, activeTheme),
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "sb-block__caption",
+			children: captionText
+		}), rows.map((row) => /* @__PURE__ */ jsxs("div", {
+			className: "sb-font-family-sample__row",
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "sb-font-family-sample__meta",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "sb-font-family-sample__path",
+						children: row.path
+					}), /* @__PURE__ */ jsx("span", {
+						className: "sb-font-family-sample__stack",
+						children: row.stack
+					})]
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "sb-font-family-sample__sample",
+					style: { fontFamily: row.cssVar },
+					children: sample
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "sb-font-family-sample__css-var",
+					children: row.cssVar
+				})
+			]
+		}, row.path))]
+	});
 }
-function formatPrimitive(v) {
-	if (v == null) return null;
-	if (typeof v === "string" || typeof v === "number" || typeof v === "boolean") return String(v);
-	return JSON.stringify(v);
+//#endregion
+//#region src/FontWeightScale.tsx
+function toWeight(raw) {
+	if (typeof raw === "number") return raw;
+	if (typeof raw === "string") {
+		const n = Number.parseInt(raw, 10);
+		return Number.isFinite(n) ? n : NaN;
+	}
+	return NaN;
 }
-function formatFontFamily(v) {
-	if (v == null) return null;
-	if (typeof v === "string") return v;
-	if (Array.isArray(v)) return v.map(String).join(", ");
-	return JSON.stringify(v);
+function FontWeightScale({ filter, sample = "Aa", caption, sortBy = "value", sortDir = "asc" }) {
+	const { resolved, activeTheme, cssVarPrefix } = useProject();
+	const rows = useMemo(() => {
+		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,
+		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),
+		children: /* @__PURE__ */ jsx("div", {
+			className: "sb-block__empty",
+			children: "No fontWeight tokens match this filter."
+		})
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		...themeAttrs(cssVarPrefix, activeTheme),
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "sb-block__caption",
+			children: captionText
+		}), rows.map((row) => /* @__PURE__ */ jsxs("div", {
+			className: "sb-font-weight-scale__row",
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "sb-font-weight-scale__meta",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "sb-font-weight-scale__path",
+						children: row.path
+					}), /* @__PURE__ */ jsx("span", {
+						className: "sb-font-weight-scale__value",
+						children: row.display
+					})]
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "sb-font-weight-scale__sample",
+					style: { fontWeight: row.cssVar },
+					children: sample
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "sb-font-weight-scale__css-var",
+					children: row.cssVar
+				})
+			]
+		}, row.path))]
+	});
 }
-function formatDimensionValue(v) {
-	if (v == null) return null;
-	if (typeof v === "string" || typeof v === "number") return String(v);
-	if (typeof v === "object") {
-		const d = v;
-		if (typeof d.value === "number" && typeof d.unit === "string") return `${d.value}${d.unit}`;
-	}
-	return JSON.stringify(v);
+//#endregion
+//#region src/GradientPalette.tsx
+function asStops(raw) {
+	if (!Array.isArray(raw)) return [];
+	return raw;
 }
-/**
-* 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;
-	return formatColor(v, format).value;
+const pct = (n) => `${(n * 100).toFixed(3)}%`;
+function stopCssColor(stop) {
+	const color = stop.color;
+	if (!color || !Array.isArray(color.components) || color.components.length < 3) return "transparent";
+	const [r, g, b] = color.components;
+	if (r === void 0 || g === void 0 || b === void 0) return "transparent";
+	const alpha = color.alpha ?? 1;
+	return alpha === 1 ? `rgb(${pct(r)} ${pct(g)} ${pct(b)})` : `rgb(${pct(r)} ${pct(g)} ${pct(b)} / ${alpha})`;
 }
-function pickObjectAliases(v) {
-	if (!v || typeof v !== "object" || Array.isArray(v)) return void 0;
-	return v;
+function stopKey(path, stop, fallback) {
+	return `${path}|${stop.position ?? fallback}|${stopCssColor(stop)}`;
 }
-function pickArrayAliases(v) {
-	if (!Array.isArray(v)) return void 0;
-	return v;
+function GradientPalette({ filter, caption, sortBy = "path", sortDir = "asc" }) {
+	const { resolved, activeTheme, cssVarPrefix } = useProject();
+	const colorFormat = useColorFormat();
+	const rows = useMemo(() => {
+		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,
+		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),
+		children: /* @__PURE__ */ jsx("div", {
+			className: "sb-block__empty",
+			children: "No gradient tokens match this filter."
+		})
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		...themeAttrs(cssVarPrefix, activeTheme),
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "sb-block__caption",
+			children: captionText
+		}), rows.map((row) => /* @__PURE__ */ jsxs("div", {
+			className: "sb-gradient-palette__row",
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "sb-gradient-palette__meta",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "sb-gradient-palette__path",
+						children: row.path
+					}), /* @__PURE__ */ jsx("span", {
+						className: "sb-gradient-palette__css-var",
+						children: row.cssVar
+					})]
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "sb-gradient-palette__sample",
+					style: { background: `linear-gradient(to right, ${row.cssVar})` },
+					"aria-hidden": true
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "sb-gradient-palette__stops",
+					children: row.stops.map((stop, i) => /* @__PURE__ */ jsxs("div", {
+						className: "sb-gradient-palette__stop-row",
+						children: [
+							/* @__PURE__ */ jsx("span", {
+								className: "sb-gradient-palette__stop-swatch",
+								style: { background: stopCssColor(stop) },
+								"aria-hidden": true
+							}),
+							/* @__PURE__ */ jsx("span", { children: formatColor(stop.color, colorFormat).value }),
+							/* @__PURE__ */ jsxs("span", {
+								className: "sb-gradient-palette__stop-position",
+								children: [
+									"@ ",
+									((stop.position ?? 0) * 100).toFixed(0),
+									"%"
+								]
+							})
+						]
+					}, stopKey(row.path, stop, i)))
+				})
+			]
+		}, row.path))]
+	});
 }
-/**
-* Walk the alias chain starting from an immediate sub-value alias target.
-* `aliasTarget` is the path the sub-value directly references; the target
-* token's own `aliasChain` continues the walk to the primitive.
-*/
-function subValueChain(aliasTarget, resolved) {
-	if (!aliasTarget) return void 0;
-	const tail = (resolved?.[aliasTarget])?.aliasChain;
-	return tail && tail.length > 0 ? [aliasTarget, ...tail] : [aliasTarget];
+//#endregion
+//#region src/motion-preview/MotionSample.tsx
+const DEFAULT_DURATION_MS = 300;
+const DEFAULT_EASING = "cubic-bezier(0.2, 0, 0, 1)";
+const styles = {
+	track: {
+		position: "relative",
+		height: 36,
+		background: SURFACE_MUTED,
+		borderRadius: 18,
+		overflow: "hidden"
+	},
+	ball: {
+		position: "absolute",
+		top: "50%",
+		width: 28,
+		height: 28,
+		marginTop: -14,
+		borderRadius: "50%",
+		background: "var(--swatchbook-accent-bg, #3b82f6)"
+	},
+	reducedMotion: {
+		fontSize: 11,
+		color: TEXT_MUTED,
+		fontStyle: "italic"
+	}
+};
+function extractDurationMs(raw) {
+	if (raw == null) return NaN;
+	if (typeof raw === "object") {
+		const v = raw;
+		if (typeof v.value === "number" && typeof v.unit === "string") {
+			if (v.unit === "ms") return v.value;
+			if (v.unit === "s") return v.value * 1e3;
+		}
+	}
+	return NaN;
+}
+function extractCubicBezier(raw) {
+	if (Array.isArray(raw) && raw.length === 4 && raw.every((n) => typeof n === "number")) return `cubic-bezier(${raw.map((n) => Number(n).toFixed(3)).join(", ")})`;
+	return null;
 }
-function shadowLayerKey(layer, fallback) {
-	return `shadow|${[
-		layer["color"],
-		layer["offsetX"],
-		layer["offsetY"],
-		layer["blur"],
-		layer["spread"],
-		layer["inset"]
-	].map((p) => p === void 0 ? "" : JSON.stringify(p)).join("|")}|${fallback}`;
+function asDuration(raw, themeTokens, fallback) {
+	const direct = extractDurationMs(raw);
+	if (Number.isFinite(direct)) return direct;
+	if (typeof raw === "string") {
+		const match = raw.match(/^\{([^}]+)\}$/);
+		if (match && match[1]) {
+			const referenced = themeTokens[match[1]];
+			const resolved = extractDurationMs(referenced?.$value);
+			if (Number.isFinite(resolved)) return resolved;
+		}
+	}
+	return fallback;
 }
-function gradientStopKey(stop, fallback) {
-	return `stop|${stop["position"] ?? fallback}|${JSON.stringify(stop["color"])}`;
+function asEasing(raw, themeTokens, fallback) {
+	const direct = extractCubicBezier(raw);
+	if (direct) return direct;
+	if (typeof raw === "string") {
+		const match = raw.match(/^\{([^}]+)\}$/);
+		if (match && match[1]) {
+			const referenced = themeTokens[match[1]];
+			const resolved = extractCubicBezier(referenced?.$value);
+			if (resolved) return resolved;
+		}
+	}
+	return fallback;
 }
-//#endregion
-//#region src/token-detail/CompositePreview.tsx
-const PANGRAM = "Sphinx of black quartz, judge my vow.";
-const STROKE_STYLE_STRINGS = new Set([
-	"solid",
-	"dashed",
-	"dotted",
-	"double",
-	"groove",
-	"ridge",
-	"outset",
-	"inset"
-]);
-function CompositePreview({ path }) {
-	const { token, cssVar } = useTokenDetailData(path);
+function resolveMotionSpec(token, themeTokens) {
 	if (!token) return null;
-	return /* @__PURE__ */ jsx(CompositePreviewContent, {
-		type: token.$type,
-		cssVar,
-		rawValue: token.$value
-	});
-}
-function CompositePreviewContent({ type, cssVar, rawValue }) {
-	if (type === "typography") {
-		const base = cssVar.replace(/^var\(/, "").replace(/\)$/, "");
-		return /* @__PURE__ */ jsx("div", {
-			className: "sb-token-detail__typography-sample",
-			style: {
-				fontFamily: `var(${base}-font-family)`,
-				fontSize: `var(${base}-font-size)`,
-				fontWeight: `var(${base}-font-weight)`,
-				lineHeight: `var(${base}-line-height)`,
-				letterSpacing: `var(${base}-letter-spacing)`
-			},
-			children: PANGRAM
-		});
+	const type = token.$type;
+	if (type === "transition") {
+		const v = token.$value ?? {};
+		return {
+			durationMs: asDuration(v.duration, themeTokens, DEFAULT_DURATION_MS),
+			easing: asEasing(v.timingFunction, themeTokens, DEFAULT_EASING)
+		};
 	}
-	if (type === "shadow") return /* @__PURE__ */ jsx("div", {
-		className: "sb-token-detail__shadow-sample",
-		style: { boxShadow: cssVar },
-		"aria-hidden": true
-	});
-	if (type === "border") return /* @__PURE__ */ jsx("div", {
-		className: "sb-token-detail__border-sample",
-		style: { border: cssVar },
-		"aria-hidden": true
+	if (type === "duration") {
+		const durationMs = extractDurationMs(token.$value);
+		if (!Number.isFinite(durationMs)) return null;
+		return {
+			durationMs,
+			easing: DEFAULT_EASING
+		};
+	}
+	if (type === "cubicBezier") {
+		const easing = extractCubicBezier(token.$value);
+		if (!easing) return null;
+		return {
+			durationMs: DEFAULT_DURATION_MS,
+			easing
+		};
+	}
+	return null;
+}
+function MotionSample({ path, speed = 1, runKey = 0 }) {
+	const { resolved } = useProject();
+	const reducedMotion = usePrefersReducedMotion();
+	const spec = useMemo(() => resolveMotionSpec(resolved[path], resolved), [resolved, path]);
+	const durationMs = spec?.durationMs ?? DEFAULT_DURATION_MS;
+	const easing = spec?.easing ?? DEFAULT_EASING;
+	const scaledDuration = Math.max(1, durationMs / speed);
+	const [phase, setPhase] = useState(0);
+	useEffect(() => {
+		if (reducedMotion) return;
+		setPhase(0);
+		const id = requestAnimationFrame(() => setPhase(1));
+		const loop = window.setInterval(() => {
+			setPhase((p) => p === 0 ? 1 : 0);
+		}, scaledDuration * 2);
+		return () => {
+			cancelAnimationFrame(id);
+			window.clearInterval(loop);
+		};
+	}, [
+		scaledDuration,
+		runKey,
+		reducedMotion
+	]);
+	if (reducedMotion) return /* @__PURE__ */ jsx("div", {
+		style: styles.reducedMotion,
+		children: "Animation suppressed by `prefers-reduced-motion: reduce`."
 	});
-	if (type === "transition") return /* @__PURE__ */ jsx(TransitionSample, { transition: cssVar });
-	if (type === "dimension") return /* @__PURE__ */ jsx("div", {
-		className: "sb-token-detail__dimension-track",
+	return /* @__PURE__ */ jsx("div", {
+		style: styles.track,
 		children: /* @__PURE__ */ jsx("div", {
-			className: "sb-token-detail__dimension-bar",
-			style: { width: cssVar },
+			style: {
+				...styles.ball,
+				left: phase === 1 ? "calc(100% - 32px)" : "4px",
+				transition: `left ${scaledDuration}ms ${easing}`
+			},
 			"aria-hidden": true
 		})
 	});
-	if (type === "duration") return /* @__PURE__ */ jsx(TransitionSample, { transition: `left ${cssVar} ease` });
-	if (type === "fontFamily") return /* @__PURE__ */ jsx("div", {
-		className: "sb-token-detail__font-family-sample",
-		style: { fontFamily: cssVar },
-		children: PANGRAM
-	});
-	if (type === "fontWeight") return /* @__PURE__ */ jsx("div", {
-		className: "sb-token-detail__font-weight-sample",
-		style: { fontWeight: cssVar },
-		children: "Aa"
-	});
-	if (type === "cubicBezier") return /* @__PURE__ */ jsx(TransitionSample, { transition: `left 800ms ${cssVar}` });
-	if (type === "gradient") return /* @__PURE__ */ jsx("div", {
-		className: "sb-token-detail__gradient-sample",
-		style: { background: `linear-gradient(to right, ${cssVar})` },
-		"aria-hidden": true
-	});
-	if (type === "strokeStyle") return /* @__PURE__ */ jsx(StrokeStylePreview, { value: rawValue });
-	if (type === "color") return /* @__PURE__ */ jsxs("div", {
-		className: "sb-token-detail__color-swatch-row",
-		"aria-hidden": true,
-		children: [/* @__PURE__ */ jsx("div", {
-			className: "sb-token-detail__color-swatch-light",
-			style: { background: cssVar }
-		}), /* @__PURE__ */ jsx("div", {
-			className: "sb-token-detail__color-swatch-dark",
-			style: { background: cssVar }
-		})]
-	});
-	return null;
 }
-function StrokeStylePreview({ value }) {
-	if (typeof value === "string" && STROKE_STYLE_STRINGS.has(value)) return /* @__PURE__ */ jsx("div", {
-		className: "sb-token-detail__stroke-style-line",
-		style: { borderTopStyle: value },
-		"aria-hidden": true
-	});
-	if (value && typeof value === "object" && "dashArray" in value) {
-		const v = value;
-		const lengths = asDashLengths(v.dashArray);
-		if (lengths.length === 0) return /* @__PURE__ */ jsx("div", {
-			className: "sb-token-detail__stroke-style-fallback",
-			children: "Object-form strokeStyle with no resolvable dashArray."
-		});
-		const cap = typeof v.lineCap === "string" ? v.lineCap : "butt";
-		return /* @__PURE__ */ jsx("svg", {
-			className: "sb-token-detail__stroke-style-svg",
-			viewBox: "0 0 220 24",
-			preserveAspectRatio: "none",
-			"aria-hidden": true,
-			children: /* @__PURE__ */ jsx("line", {
-				x1: "4",
-				y1: "12",
-				x2: "216",
-				y2: "12",
-				stroke: "currentColor",
-				strokeWidth: "4",
-				strokeDasharray: lengths.join(" "),
-				strokeLinecap: cap
-			})
-		});
+//#endregion
+//#region src/MotionPreview.tsx
+const SPEEDS = [
+	.25,
+	.5,
+	1,
+	2
+];
+function formatSpec(row) {
+	switch (row.kind) {
+		case "transition": return `transition · ${Math.round(row.durationMs)}ms · ${row.easing}`;
+		case "duration": return `duration · ${Math.round(row.durationMs)}ms`;
+		case "cubicBezier": return `cubicBezier · ${row.easing}`;
 	}
-	return /* @__PURE__ */ jsx("div", {
-		className: "sb-token-detail__stroke-style-fallback",
-		children: "strokeStyle value could not be previewed."
-	});
 }
-function asDashLengths(raw) {
-	if (!Array.isArray(raw)) return [];
-	const out = [];
-	for (const entry of raw) {
-		if (typeof entry === "number") {
-			out.push(entry);
-			continue;
-		}
-		if (entry && typeof entry === "object") {
-			const e = entry;
-			if (typeof e.value === "number") out.push(e.value);
+function MotionPreview({ filter, caption }) {
+	const { resolved, activeTheme, cssVarPrefix } = useProject();
+	const [speed, setSpeed] = useState(1);
+	const [run, setRun] = useState(0);
+	const reducedMotion = usePrefersReducedMotion();
+	const rows = useMemo(() => {
+		const collected = [];
+		for (const [path, token] of Object.entries(resolved)) {
+			if (filter && !globMatch(path, filter)) continue;
+			if (!filter && ![
+				"transition",
+				"duration",
+				"cubicBezier"
+			].includes(token.$type ?? "")) continue;
+			const kind = token.$type;
+			if (!kind) continue;
+			const spec = resolveMotionSpec(token, resolved);
+			if (!spec) continue;
+			collected.push({
+				path,
+				cssVar: makeCssVar(path, cssVarPrefix),
+				durationMs: spec.durationMs,
+				easing: spec.easing,
+				kind
+			});
 		}
-	}
-	return out;
-}
-function TransitionSample({ transition }) {
-	const reduced = usePrefersReducedMotion();
-	const [phase, setPhase] = useState(0);
-	useEffect(() => {
-		if (reduced) return;
-		const id = requestAnimationFrame(() => setPhase(1));
-		const loop = window.setInterval(() => {
-			setPhase((p) => p === 0 ? 1 : 0);
-		}, 1200);
-		return () => {
-			cancelAnimationFrame(id);
-			window.clearInterval(loop);
-		};
-	}, [reduced]);
-	if (reduced) return /* @__PURE__ */ jsx("div", {
-		className: "sb-token-detail__reduced-motion",
-		children: "Animation suppressed by `prefers-reduced-motion: reduce`."
-	});
-	return /* @__PURE__ */ jsx("div", {
-		className: "sb-token-detail__motion-track",
+		collected.sort((a, b) => {
+			if (a.kind !== b.kind) return a.kind.localeCompare(b.kind);
+			return a.path.localeCompare(b.path, void 0, { numeric: true });
+		});
+		return collected;
+	}, [
+		resolved,
+		filter,
+		cssVarPrefix
+	]);
+	const captionText = caption ?? `${rows.length} motion token${rows.length === 1 ? "" : "s"}${filter ? ` matching \`${filter}\`` : ""} · ${activeTheme}`;
+	if (rows.length === 0) return /* @__PURE__ */ jsx("div", {
+		...themeAttrs(cssVarPrefix, activeTheme),
 		children: /* @__PURE__ */ jsx("div", {
-			className: "sb-token-detail__motion-ball",
-			style: {
-				left: phase === 1 ? "calc(100% - 28px)" : "4px",
-				transition
-			},
-			"aria-hidden": true
+			className: "sb-block__empty",
+			children: "No motion tokens match this filter."
 		})
 	});
-}
-//#endregion
-//#region src/token-detail/ConsumerOutput.tsx
-function ConsumerOutput({ path }) {
-	const { token, cssVar, activeAxes } = useTokenDetailData(path);
-	if (!token) return null;
-	const tupleLabel = Object.entries(activeAxes).map(([k, v]) => `${k}=${v}`).join(", ");
-	return /* @__PURE__ */ jsxs(Fragment, { children: [
-		/* @__PURE__ */ jsx("div", {
-			className: "sb-token-detail__section-header",
-			children: "Consumer output"
-		}),
-		tupleLabel && /* @__PURE__ */ jsxs("div", {
-			className: "sb-token-detail__tuple-indicator",
-			children: ["Active tuple: ", /* @__PURE__ */ jsx("strong", { children: tupleLabel })]
-		}),
-		/* @__PURE__ */ jsx(OutputRow, {
-			label: "Path",
-			value: path,
-			testId: "consumer-output-path"
-		}),
-		/* @__PURE__ */ jsx(OutputRow, {
-			label: "CSS",
-			value: cssVar,
-			testId: "consumer-output-css"
-		})
-	] });
-}
-function OutputRow({ label, value, testId }) {
 	return /* @__PURE__ */ jsxs("div", {
-		className: "sb-token-detail__consumer-row",
+		...themeAttrs(cssVarPrefix, activeTheme),
 		children: [
-			/* @__PURE__ */ jsx("span", {
-				className: "sb-token-detail__consumer-row-label",
-				children: label
+			/* @__PURE__ */ jsx("div", {
+				className: "sb-block__caption",
+				children: captionText
 			}),
-			/* @__PURE__ */ jsx("code", {
-				className: "sb-token-detail__consumer-row-value",
-				"data-testid": testId,
-				children: value
+			/* @__PURE__ */ jsxs("div", {
+				className: "sb-motion-preview__controls",
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "sb-motion-preview__control-label",
+						children: "Speed"
+					}),
+					SPEEDS.map((s) => /* @__PURE__ */ jsxs("button", {
+						type: "button",
+						className: cx("sb-motion-preview__speed-btn", { "sb-motion-preview__speed-btn--active": s === speed }),
+						onClick: () => setSpeed(s),
+						children: [s, "×"]
+					}, s)),
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: "sb-motion-preview__replay-btn",
+						onClick: () => setRun((n) => n + 1),
+						disabled: reducedMotion,
+						title: reducedMotion ? "Disabled by prefers-reduced-motion" : "Replay all",
+						children: "↻ Replay"
+					})
+				]
 			}),
-			/* @__PURE__ */ jsx(CopyButton, {
-				text: value,
-				testId: `${testId}-copy`
-			})
+			rows.map((row) => /* @__PURE__ */ jsxs("div", {
+				className: "sb-motion-preview__row",
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						className: "sb-motion-preview__meta",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "sb-motion-preview__path",
+							children: row.path
+						}), /* @__PURE__ */ jsx("span", {
+							className: "sb-motion-preview__specs",
+							children: formatSpec(row)
+						})]
+					}),
+					/* @__PURE__ */ jsx(MotionSample, {
+						path: row.path,
+						speed,
+						runKey: run
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "sb-motion-preview__css-var",
+						children: row.cssVar
+					})
+				]
+			}, row.path))
 		]
 	});
 }
-function CopyButton({ text, testId }) {
-	const [copied, setCopied] = useState(false);
-	return /* @__PURE__ */ jsx("button", {
-		type: "button",
-		className: "sb-token-detail__consumer-row-copy",
-		"data-testid": testId,
-		onClick: () => {
-			copyToClipboard(text).then((ok) => {
-				if (!ok) return;
-				setCopied(true);
-				window.setTimeout(() => setCopied(false), 1200);
-			});
-		},
-		children: copied ? "Copied" : "Copy"
+//#endregion
+//#region src/provider.tsx
+/**
+* Wraps a tree of blocks with the token data they need to render.
+*
+* The Storybook addon's preview decorator mounts this automatically, so
+* story/MDX authors typically never see it. Outside Storybook — unit
+* tests, custom React apps, non-Storybook doc sites — consumers construct
+* a {@link ProjectSnapshot} (often imported from a JSON file) and wrap
+* their blocks in this provider.
+*/
+function SwatchbookProvider({ value, children }) {
+	return /* @__PURE__ */ jsx(SwatchbookContext.Provider, {
+		value,
+		children
 	});
 }
-async function copyToClipboard(text) {
-	if (typeof navigator === "undefined" || !navigator.clipboard) return false;
-	try {
-		await navigator.clipboard.writeText(text);
-		return true;
-	} catch {
-		return false;
-	}
+/**
+* Read the current {@link ProjectSnapshot}. Throws if called outside a
+* {@link SwatchbookProvider}; blocks that need to fall back to the
+* virtual module go through the internal `useProject()` hook instead.
+*/
+function useSwatchbookData() {
+	const value = useOptionalSwatchbookData();
+	if (!value) throw new Error("[swatchbook-blocks] useSwatchbookData() called outside <SwatchbookProvider>. Wrap your tree in <SwatchbookProvider value={snapshot}> or render inside a Storybook story.");
+	return value;
 }
 //#endregion
-//#region src/token-detail/TokenHeader.tsx
-function TokenHeader({ path, heading }) {
-	const { token, cssVar, activeTheme } = useTokenDetailData(path);
-	if (!token) return /* @__PURE__ */ jsxs("div", {
-		className: "sb-token-detail__missing",
-		children: [
-			"Token ",
-			/* @__PURE__ */ jsx("code", { children: path }),
-			" not found in theme ",
-			/* @__PURE__ */ jsx("strong", { children: activeTheme }),
-			"."
-		]
+//#region src/shadow-preview/ShadowSample.tsx
+const sampleStyle = {
+	width: 120,
+	height: 56,
+	background: SURFACE_RAISED,
+	border: BORDER_FAINT,
+	borderRadius: 6
+};
+function ShadowSample({ path }) {
+	const { cssVarPrefix } = useProject();
+	const cssVar = makeCssVar(path, cssVarPrefix);
+	return /* @__PURE__ */ jsx("div", {
+		style: {
+			...sampleStyle,
+			boxShadow: cssVar
+		},
+		"aria-hidden": true
 	});
-	return /* @__PURE__ */ jsxs(Fragment, { children: [
-		/* @__PURE__ */ jsx("h3", {
-			className: "sb-token-detail__heading",
-			children: heading ?? path
-		}),
-		/* @__PURE__ */ jsxs("div", {
-			className: "sb-token-detail__subline",
-			children: [token.$type && /* @__PURE__ */ jsx("span", {
-				className: "sb-token-detail__type-pill",
-				children: token.$type
-			}), /* @__PURE__ */ jsx("span", { children: cssVar })]
-		}),
-		token.$description && /* @__PURE__ */ jsx("p", {
-			className: "sb-token-detail__description",
-			children: token.$description
-		})
-	] });
 }
 //#endregion
-//#region src/token-detail/TokenUsageSnippet.tsx
-function TokenUsageSnippet({ path }) {
-	const { token, cssVar } = useTokenDetailData(path);
-	if (!token) return null;
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
-		className: "sb-token-detail__section-header",
-		children: "Usage"
-	}), /* @__PURE__ */ jsx("code", {
-		className: "sb-token-detail__snippet",
-		children: `color: ${cssVar};`
-	})] });
+//#region src/ShadowPreview.tsx
+function formatDimension(raw) {
+	if (raw == null) return "—";
+	if (typeof raw === "number") return String(raw);
+	if (typeof raw === "string") return raw;
+	if (typeof raw === "object") {
+		const v = raw;
+		if (typeof v.value === "number" && typeof v.unit === "string") return `${v.value}${v.unit}`;
+	}
+	return JSON.stringify(raw);
+}
+function formatSubColor(raw, format) {
+	if (raw == null) return "—";
+	return formatColor(raw, format).value;
+}
+function asLayers(raw) {
+	if (Array.isArray(raw)) return raw;
+	if (raw && typeof raw === "object") return [raw];
+	return [];
 }
-//#endregion
-//#region src/TokenDetail.tsx
-function TokenDetail({ path, heading }) {
-	const { token, cssVar, activeTheme, cssVarPrefix } = useTokenDetailData(path);
+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 colorFormat = useColorFormat();
-	const theme = themeAttrs(cssVarPrefix, activeTheme);
-	if (!token) return /* @__PURE__ */ jsx("div", {
-		...theme,
-		className: cx(theme["className"], "sb-token-detail"),
-		children: /* @__PURE__ */ jsxs("div", {
-			className: "sb-token-detail__missing",
+	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,
+		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),
+		children: /* @__PURE__ */ jsx("div", {
+			className: "sb-block__empty",
+			children: "No shadow tokens match this filter."
+		})
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		...themeAttrs(cssVarPrefix, activeTheme),
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "sb-block__caption",
+			children: captionText
+		}), rows.map((row) => /* @__PURE__ */ jsxs("div", {
+			className: "sb-shadow-preview__row",
 			children: [
-				"Token ",
-				/* @__PURE__ */ jsx("code", { children: path }),
-				" not found in theme ",
-				/* @__PURE__ */ jsx("strong", { children: activeTheme }),
-				"."
+				/* @__PURE__ */ jsxs("div", {
+					className: "sb-shadow-preview__meta",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "sb-shadow-preview__path",
+						children: row.path
+					}), /* @__PURE__ */ jsx("span", {
+						className: "sb-shadow-preview__css-var",
+						children: row.cssVar
+					})]
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "sb-shadow-preview__sample-cell",
+					children: /* @__PURE__ */ jsx(ShadowSample, { path: row.path })
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "sb-shadow-preview__breakdown",
+					children: row.layers.length === 1 ? renderLayer(row.layers[0], colorFormat) : row.layers.map((layer, i) => /* @__PURE__ */ jsx(Layer, {
+						layer,
+						index: i,
+						total: row.layers.length,
+						colorFormat
+					}, layerKey(row.path, layer, i)))
+				})
 			]
-		})
+		}, row.path))]
 	});
-	const isColor = token.$type === "color";
-	const gamut = isColor ? formatColor(token.$value, colorFormat) : null;
-	const value = formatTokenValue(token.$value, token.$type, colorFormat);
-	const outOfGamut = gamut?.outOfGamut ?? false;
+}
+function renderLayer(layer, format) {
+	if (!layer) return [];
+	const entries = [
+		["offset", `${formatDimension(layer.offsetX)} ${formatDimension(layer.offsetY)}`],
+		["blur", formatDimension(layer.blur)],
+		["spread", formatDimension(layer.spread)],
+		["color", formatSubColor(layer.color, format)]
+	];
+	if (layer.inset) entries.push(["inset", String(layer.inset)]);
+	return entries.flatMap(([k, v]) => [/* @__PURE__ */ jsx("span", {
+		className: "sb-shadow-preview__breakdown-key",
+		children: k
+	}, `k-${k}`), /* @__PURE__ */ jsx("span", { children: v }, `v-${k}`)]);
+}
+function Layer({ layer, index, total, colorFormat }) {
 	return /* @__PURE__ */ jsxs("div", {
-		...theme,
-		className: cx(theme["className"], "sb-token-detail"),
-		children: [
-			/* @__PURE__ */ jsx(TokenHeader, {
-				path,
-				...heading !== void 0 && { heading }
-			}),
-			/* @__PURE__ */ jsxs("div", {
-				className: "sb-token-detail__section-header",
-				children: ["Resolved value · ", activeTheme]
-			}),
-			/* @__PURE__ */ jsx(CompositePreview, { path }),
-			/* @__PURE__ */ jsx(CompositeBreakdown, { path }),
-			/* @__PURE__ */ jsxs("div", {
-				className: "sb-token-detail__chain",
-				children: [
-					isColor && /* @__PURE__ */ jsx("span", {
-						className: "sb-token-detail__swatch",
-						style: { background: cssVar },
-						"aria-hidden": true
-					}),
-					/* @__PURE__ */ jsx("span", { children: value }),
-					outOfGamut && /* @__PURE__ */ jsx("span", {
-						title: "Out of sRGB gamut for this format",
-						"aria-label": "out of gamut",
-						style: { marginLeft: 6 },
-						children: "⚠"
-					})
-				]
-			}),
-			/* @__PURE__ */ jsx(AliasChain, { path }),
-			/* @__PURE__ */ jsx(AliasedBy, { path }),
-			/* @__PURE__ */ jsx(TokenUsageSnippet, { path }),
-			/* @__PURE__ */ jsx(ConsumerOutput, { path }),
-			/* @__PURE__ */ jsx(AxisVariance, { path })
-		]
+		className: "sb-shadow-preview__layer",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "sb-shadow-preview__layer-header",
+			children: [
+				"layer ",
+				index + 1,
+				" of ",
+				total
+			]
+		}), /* @__PURE__ */ jsx("div", {
+			className: cx("sb-shadow-preview__breakdown", "sb-shadow-preview__layer-breakdown"),
+			children: renderLayer(layer, colorFormat)
+		})]
 	});
 }
 //#endregion
-//#region src/internal/DetailOverlay.tsx
-function DetailOverlay({ path, onClose, testId = "swatchbook-overlay" }) {
-	useEffect(() => {
-		const onKey = (e) => {
-			if (e.key === "Escape") onClose();
-		};
-		window.addEventListener("keydown", onKey);
-		return () => window.removeEventListener("keydown", onKey);
-	}, [onClose]);
-	return /* @__PURE__ */ jsx("div", {
-		className: "sb-detail-overlay__backdrop",
-		onClick: onClose,
-		role: "presentation",
-		"data-testid": testId,
-		children: /* @__PURE__ */ jsxs("div", {
-			className: "sb-detail-overlay__panel",
-			onClick: (e) => e.stopPropagation(),
-			role: "dialog",
-			"aria-modal": "true",
-			"aria-label": `Token detail for ${path}`,
-			children: [/* @__PURE__ */ jsx("button", {
-				type: "button",
-				className: "sb-detail-overlay__close",
-				onClick: onClose,
-				"aria-label": "Close",
-				"data-testid": `${testId}-close`,
-				children: "×"
-			}), /* @__PURE__ */ jsx(TokenDetail, { path })]
+//#region src/StrokeStyleSample.tsx
+const STRING_STYLES = new Set([
+	"solid",
+	"dashed",
+	"dotted",
+	"double",
+	"groove",
+	"ridge",
+	"outset",
+	"inset"
+]);
+function extractCssStyle(value) {
+	if (typeof value === "string" && STRING_STYLES.has(value)) return value;
+	return null;
+}
+function StrokeStyleSample({ 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 !== "strokeStyle") return false;
+			return globMatch(path, filter);
+		}), {
+			by: sortBy,
+			dir: sortDir
+		}).map(([path, token]) => ({
+			path,
+			cssVar: makeCssVar(path, cssVarPrefix),
+			displayValue: formatTokenValue(token.$value, token.$type, "raw"),
+			cssStyle: extractCssStyle(token.$value)
+		}));
+	}, [
+		resolved,
+		filter,
+		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),
+		children: /* @__PURE__ */ jsx("div", {
+			className: "sb-block__empty",
+			children: "No strokeStyle tokens match this filter."
 		})
 	});
+	return /* @__PURE__ */ jsxs("div", {
+		...themeAttrs(cssVarPrefix, activeTheme),
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "sb-block__caption",
+			children: captionText
+		}), rows.map((row) => /* @__PURE__ */ jsxs("div", {
+			className: "sb-stroke-style-sample__row",
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "sb-stroke-style-sample__meta",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "sb-stroke-style-sample__path",
+						children: row.path
+					}), /* @__PURE__ */ jsx("span", {
+						className: "sb-stroke-style-sample__value",
+						children: row.displayValue
+					})]
+				}),
+				row.cssStyle ? /* @__PURE__ */ jsx("div", {
+					className: "sb-stroke-style-sample__line",
+					style: { borderTopStyle: row.cssStyle },
+					"aria-hidden": true
+				}) : /* @__PURE__ */ jsx("span", {
+					className: "sb-stroke-style-sample__object-fallback",
+					children: "Object-form (dashArray + lineCap) — no pure CSS `border-style` equivalent."
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "sb-stroke-style-sample__css-var",
+					children: row.cssVar
+				})
+			]
+		}, row.path))]
+	});
 }
 //#endregion
 //#region src/TokenNavigator.tsx
@@ -3015,18 +3334,21 @@ function countLeaves(node) {
 	for (const c of node.children) n += countLeaves(c);
 	return n;
 }
+function collectLeafPaths(nodes, out) {
+	for (const node of nodes) if (node.kind === "leaf") out.push(node.path);
+	else collectLeafPaths(node.children, out);
+}
 /**
-* Return a pruned copy of the tree containing only leaves whose path
-* matches `needle` (case-insensitive substring) plus the groups on the
-* way to them. Every surviving group's path is added to `expandOut` so
-* callers can force those groups open.
+* Return a pruned copy of the tree keeping only leaves whose path is in
+* `matches`, plus the groups on the way to them. Every surviving group's
+* path is added to `expandOut` so callers can force those groups open.
 */
-function pruneTreeForSearch(nodes, needle, expandOut) {
+function pruneTreeForMatches(nodes, matches, expandOut) {
 	const out = [];
 	for (const node of nodes) if (node.kind === "leaf") {
-		if (node.path.toLowerCase().includes(needle)) out.push(node);
+		if (matches.has(node.path)) out.push(node);
 	} else {
-		const children = pruneTreeForSearch(node.children, needle, expandOut);
+		const children = pruneTreeForMatches(node.children, matches, expandOut);
 		if (children.length > 0) {
 			expandOut.add(node.path);
 			out.push({
@@ -3064,10 +3386,12 @@ function TokenNavigator({ root, type, initiallyExpanded = 1, searchable = true,
 			visibleTree: tree,
 			searchExpanded: null
 		};
-		const needle = query.trim().toLowerCase();
+		const leafPaths = [];
+		collectLeafPaths(tree, leafPaths);
+		const matches = new Set(fuzzyFilter(leafPaths, query, (p) => p));
 		const expandOut = /* @__PURE__ */ new Set();
 		return {
-			visibleTree: pruneTreeForSearch(tree, needle, expandOut),
+			visibleTree: matches.size === 0 ? [] : pruneTreeForMatches(tree, matches, expandOut),
 			searchExpanded: expandOut
 		};
 	}, [
@@ -3340,8 +3664,7 @@ function TokenTable({ filter, type, caption, sortBy = "path", sortDir = "asc", s
 	]);
 	const visibleRows = useMemo(() => {
 		if (!searchable || query.trim() === "") return rows;
-		const needle = query.trim().toLowerCase();
-		return rows.filter((row) => row.path.toLowerCase().includes(needle) || row.type.toLowerCase().includes(needle) || row.value.toLowerCase().includes(needle));
+		return fuzzyFilter(rows, query, (row) => `${row.path} ${row.type} ${row.value}`);
 	}, [
 		rows,
 		query,
@@ -3371,7 +3694,7 @@ function TokenTable({ filter, type, caption, sortBy = "path", sortDir = "asc", s
 					placeholder: "Search tokens…",
 					value: query,
 					onChange: (e) => setQuery(e.target.value),
-					"aria-label": "Search tokens by path, type, or value",
+					"aria-label": "Fuzzy-search tokens by path, type, or value",
 					"data-testid": "token-table-search"
 				})
 			}),
@@ -3438,6 +3761,17 @@ function TokenTable({ filter, type, caption, sortBy = "path", sortDir = "asc", s
 										"aria-label": "out of gamut",
 										className: "sb-token-table__gamut-warn",
 										children: "⚠"
+									}),
+									/* @__PURE__ */ jsx("span", {
+										className: "sb-token-table__copy-wrap",
+										onClick: (e) => e.stopPropagation(),
+										onKeyDown: (e) => e.stopPropagation(),
+										role: "presentation",
+										children: /* @__PURE__ */ jsx(CopyButton$1, {
+											value: row.value,
+											label: `Copy value ${row.value}`,
+											className: "sb-token-table__copy"
+										})
 									})
 								]
 							})
@@ -3545,6 +3879,6 @@ function TypographyScale({ filter, sample = "The quick brown fox jumps over the
 	});
 }
 //#endregion
-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 };
+export { AliasChain, AliasedBy, AxesContext, AxisVariance, BorderPreview, BorderSample, COLOR_FORMATS, ColorFormatContext, ColorPalette, ColorTable, 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