@unpunnyfuns/swatchbook-blocks 0.16.0 → 0.18.0

package/dist/index.mjs

@@ -1,9 +1,10 @@
 import './style.css';
 import Color from "colorjs.io";
-import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { makeCSSVar } from "@terrazzo/token-tools/css";
 import { addons } from "storybook/preview-api";
-import { axes, css, cssVarPrefix, defaultTheme, diagnostics, presets, themes, themesResolved } from "virtual:swatchbook/tokens";
+import { axes, css, cssVarPrefix, defaultTheme, diagnostics, listing, 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";
@@ -355,6 +356,7 @@ let snapshot = {
 	diagnostics,
 	css,
 	cssVarPrefix,
+	listing: listing ?? {},
 	version: 0
 };
 const listeners = /* @__PURE__ */ new Set();
@@ -372,6 +374,7 @@ function ensureSubscribed() {
 			diagnostics: payload.diagnostics ?? snapshot.diagnostics,
 			css: payload.css ?? snapshot.css,
 			cssVarPrefix: payload.cssVarPrefix ?? snapshot.cssVarPrefix,
+			listing: payload.listing ?? snapshot.listing,
 			version: snapshot.version + 1
 		};
 		for (const cb of listeners) cb();
@@ -429,7 +432,8 @@ function snapshotToData(snapshot) {
 		themesResolved: snapshot.themesResolved,
 		resolved: snapshot.themesResolved[snapshot.activeTheme] ?? {},
 		diagnostics: snapshot.diagnostics,
-		cssVarPrefix: snapshot.cssVarPrefix
+		cssVarPrefix: snapshot.cssVarPrefix,
+		listing: snapshot.listing ?? {}
 	};
 }
 /**
@@ -478,12 +482,56 @@ function useVirtualModuleFallback(enabled) {
 		themesResolved: tokens.themesResolved,
 		resolved: tokens.themesResolved[activeTheme] ?? {},
 		diagnostics: tokens.diagnostics,
-		cssVarPrefix: tokens.cssVarPrefix
+		cssVarPrefix: tokens.cssVarPrefix,
+		listing: tokens.listing
 	};
 }
+/**
+* Thin wrapper around Terrazzo's `makeCSSVar` so the block-display surface
+* and `packages/core/src/css.ts`'s emitter share one implementation. Any
+* future naming-policy shift in Terrazzo (casing, unicode, prefix handling)
+* reaches both surfaces at once instead of needing a parallel update here.
+*/
 function makeCssVar(path, prefix) {
-	const tail = path.split(".").map((segment) => segment.replaceAll(/([a-z\d])([A-Z])/g, "$1-$2").toLowerCase()).join("-");
-	return prefix ? `var(--${prefix}-${tail})` : `var(--${tail})`;
+	return prefix ? makeCSSVar(path, {
+		prefix,
+		wrapVar: true
+	}) : makeCSSVar(path, { wrapVar: true });
+}
+/**
+* Resolve a token's CSS var reference, preferring the authoritative name
+* emitted by `@terrazzo/plugin-css` (as recorded by
+* `@terrazzo/plugin-token-listing` in the snapshot's `listing` field).
+* Falls back to `makeCssVar` when the listing lacks an entry for this
+* path — covers non-resolver projects, hand-built snapshots, and any
+* listing-plugin miss.
+*/
+function resolveCssVar(path, project) {
+	const listed = project.listing[path]?.names?.["css"];
+	if (listed) return `var(${listed})`;
+	return makeCssVar(path, project.cssVarPrefix);
+}
+/**
+* Resolve a color value's display string + gamut flag, preferring the
+* listing's `previewValue` when the user's active color-format matches
+* plugin-css's output (hex). For any other format we fall back to
+* `formatColor` so the toolbar's inspection modes (rgb / hsl / oklch /
+* raw) keep working — the listing has only one canonical format.
+*
+* Pass `path === undefined` when resolving a sub-color inside a composite
+* (shadow / border / gradient stop): composites' `previewValue` covers
+* the whole token's rendering, not the individual channel, so there's no
+* listing entry to key against.
+*/
+function resolveColorValue(path, raw, colorFormat, project) {
+	if (path !== void 0 && colorFormat === "hex") {
+		const listed = project.listing[path]?.previewValue;
+		if (typeof listed === "string") return {
+			value: listed,
+			outOfGamut: false
+		};
+	}
+	return formatColor(raw, colorFormat);
 }
 /**
 * Match a dot-separated DTCG token path against a block `filter` prop.
@@ -519,8 +567,7 @@ const sampleStyle$1 = {
 	borderRadius: 6
 };
 function BorderSample({ path }) {
-	const { cssVarPrefix } = useProject();
-	const cssVar = makeCssVar(path, cssVarPrefix);
+	const cssVar = resolveCssVar(path, useProject());
 	return /* @__PURE__ */ jsx("div", {
 		style: {
 			...sampleStyle$1,
@@ -694,7 +741,8 @@ function formatSubColor$1(raw, format) {
 	return formatColor(raw, format).value;
 }
 function BorderPreview({ filter, caption, sortBy = "path", sortDir = "asc" }) {
-	const { resolved, activeTheme, cssVarPrefix } = useProject();
+	const project = useProject();
+	const { resolved, activeTheme, cssVarPrefix } = project;
 	const colorFormat = useColorFormat();
 	const rows = useMemo(() => {
 		return sortTokens(Object.entries(resolved).filter(([path, token]) => {
@@ -705,13 +753,13 @@ function BorderPreview({ filter, caption, sortBy = "path", sortDir = "asc" }) {
 			dir: sortDir
 		}).map(([path, token]) => ({
 			path,
-			cssVar: makeCssVar(path, cssVarPrefix),
+			cssVar: resolveCssVar(path, project),
 			value: token.$value ?? {}
 		}));
 	}, [
 		resolved,
 		filter,
-		cssVarPrefix,
+		project,
 		sortBy,
 		sortDir
 	]);
@@ -786,7 +834,8 @@ function fixedPrefixLength(filter) {
 	return fixed;
 }
 function ColorPalette({ filter, groupBy, caption, sortBy = "path", sortDir = "asc" }) {
-	const { resolved, activeTheme, cssVarPrefix } = useProject();
+	const project = useProject();
+	const { resolved, activeTheme, cssVarPrefix } = project;
 	const colorFormat = useColorFormat();
 	const groups = useMemo(() => {
 		const entries = sortTokens(Object.entries(resolved).filter(([path, token]) => {
@@ -804,11 +853,11 @@ function ColorPalette({ filter, groupBy, caption, sortBy = "path", sortDir = "as
 			const groupKey = segments.slice(0, effectiveGroupBy).join(".");
 			const leaf = segments.slice(effectiveGroupBy).join(".") || segments.at(-1) || path;
 			const list = bucket.get(groupKey) ?? [];
-			const formatted = formatColor(token.$value, colorFormat);
+			const formatted = resolveColorValue(path, token.$value, colorFormat, project);
 			list.push({
 				path,
 				leaf,
-				cssVar: makeCssVar(path, cssVarPrefix),
+				cssVar: resolveCssVar(path, project),
 				value: formatted.value,
 				outOfGamut: formatted.outOfGamut
 			});
@@ -819,7 +868,7 @@ function ColorPalette({ filter, groupBy, caption, sortBy = "path", sortDir = "as
 		resolved,
 		filter,
 		groupBy,
-		cssVarPrefix,
+		project,
 		colorFormat,
 		sortBy,
 		sortDir
@@ -920,70 +969,701 @@ function CopyButton$1({ value, label, variant = "icon", className }) {
 	});
 }
 //#endregion
-//#region src/internal/format-token-value.ts
+//#region src/ColorTable.tsx
+const BASE_LABEL = "base";
+const COLUMN_COUNT = 6;
+function ColorTable({ filter, caption, sortBy = "path", sortDir = "asc", searchable = true, onSelect, variants }) {
+	const project = useProject();
+	const { resolved, activeTheme, cssVarPrefix } = project;
+	const colorFormat = useColorFormat();
+	const [query, setQuery] = useState("");
+	const [selectedByBase, setSelectedByBase] = useState({});
+	const [expandedByBase, setExpandedByBase] = useState(() => /* @__PURE__ */ new Set());
+	const defs = useMemo(() => buildVariantDefs(variants), [variants]);
+	const groups = useMemo(() => {
+		const sorted = sortTokens(Object.entries(resolved).filter(([path, token]) => {
+			if (token.$type !== "color") return false;
+			return globMatch(path, filter);
+		}), {
+			by: sortBy,
+			dir: sortDir
+		});
+		const groupMap = /* @__PURE__ */ new Map();
+		for (const [path, token] of sorted) {
+			const raw = token.$value;
+			const hex = resolveColorValue(path, raw, "hex", project);
+			const hsl = formatColor(raw, "hsl");
+			const oklch = formatColor(raw, "oklch");
+			const active = pickActiveFormat(raw, colorFormat, hex, hsl, oklch);
+			const match = matchVariant(path, defs.matchOrder);
+			const variant = {
+				label: match?.label ?? BASE_LABEL,
+				path,
+				cssVar: resolveCssVar(path, project),
+				value: active.value,
+				outOfGamut: active.outOfGamut,
+				hex: hex.value,
+				hsl: hsl.value,
+				oklch: oklch.value,
+				...token.$description !== void 0 && { description: token.$description },
+				...token.aliasOf !== void 0 && { aliasOf: token.aliasOf },
+				...token.aliasChain !== void 0 && { aliasChain: token.aliasChain }
+			};
+			const basePath = match?.basePath ?? path;
+			const existing = groupMap.get(basePath);
+			if (existing) existing.variants.push(variant);
+			else groupMap.set(basePath, {
+				base: basePath,
+				variants: [variant]
+			});
+		}
+		const out = [];
+		for (const { base, variants: vs } of groupMap.values()) {
+			vs.sort((a, b) => orderIndex(a.label, defs) - orderIndex(b.label, defs));
+			const searchText = vs.map((v) => `${v.path} ${v.value}`).join(" ");
+			out.push({
+				base,
+				variants: vs,
+				searchText
+			});
+		}
+		return out;
+	}, [
+		resolved,
+		filter,
+		project,
+		sortBy,
+		sortDir,
+		defs,
+		colorFormat
+	]);
+	const visibleGroups = useMemo(() => {
+		if (!searchable || query.trim() === "") return groups;
+		return fuzzyFilter(groups, query, (g) => g.searchText);
+	}, [
+		groups,
+		query,
+		searchable
+	]);
+	const totalTokens = useMemo(() => groups.reduce((n, g) => n + g.variants.length, 0), [groups]);
+	const toggleExpand = useCallback((base) => {
+		setExpandedByBase((prev) => {
+			const next = new Set(prev);
+			if (next.has(base)) next.delete(base);
+			else next.add(base);
+			return next;
+		});
+	}, []);
+	const selectVariant = useCallback((base, label) => {
+		setSelectedByBase((prev) => ({
+			...prev,
+			[base]: label
+		}));
+	}, []);
+	const matchSuffix = searchable && query.trim() !== "" ? ` · ${visibleGroups.length} matching "${query.trim()}"` : "";
+	const captionText = caption ?? `${totalTokens} color${totalTokens === 1 ? "" : "s"} across ${groups.length} group${groups.length === 1 ? "" : "s"}${filter ? ` matching \`${filter}\`` : ""}${matchSuffix} · ${activeTheme}`;
+	if (groups.length === 0) return /* @__PURE__ */ jsx("div", {
+		...themeAttrs(cssVarPrefix, activeTheme),
+		children: /* @__PURE__ */ jsx("div", {
+			className: "sb-block__empty",
+			children: "No color tokens match this filter."
+		})
+	});
+	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("th", {
+						className: "sb-color-table__th sb-color-table__th--path",
+						children: "Name"
+					}),
+					/* @__PURE__ */ jsx("th", {
+						className: "sb-color-table__th",
+						children: "Value"
+					}),
+					/* @__PURE__ */ jsx("th", {
+						className: "sb-color-table__th",
+						children: "CSS var"
+					}),
+					/* @__PURE__ */ jsx("th", {
+						className: "sb-color-table__th",
+						children: "Alias"
+					}),
+					/* @__PURE__ */ jsx("th", {
+						className: "sb-color-table__th sb-color-table__th--expand",
+						children: /* @__PURE__ */ jsx("span", {
+							className: "sb-color-table__sr-only",
+							children: "Expand"
+						})
+					})
+				] }) }),
+				/* @__PURE__ */ jsxs("tbody", { children: [visibleGroups.length === 0 && /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsxs("td", {
+					colSpan: COLUMN_COUNT,
+					className: "sb-color-table__td sb-color-table__empty-row",
+					children: [
+						"No colors match \"",
+						query.trim(),
+						"\"."
+					]
+				}) }), visibleGroups.map((group) => /* @__PURE__ */ jsx(GroupRow, {
+					group,
+					selectedLabel: selectedByBase[group.base],
+					expanded: expandedByBase.has(group.base),
+					onToggleExpand: toggleExpand,
+					onSelectVariant: selectVariant,
+					...onSelect !== void 0 && { onSelect }
+				}, group.base))] })
+			]
+		})]
+	});
+}
+function GroupRow({ group, selectedLabel, expanded, onToggleExpand, onSelectVariant, onSelect }) {
+	const multi = group.variants.length > 1;
+	const active = group.variants.find((v) => v.label === selectedLabel) ?? group.variants[0];
+	const nameText = multi ? group.base : active.path;
+	const handleRowActivate = () => {
+		if (onSelect) onSelect(active.path);
+		else onToggleExpand(group.base);
+	};
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("tr", {
+		className: cx("sb-color-table__row", { "sb-color-table__row--expanded": expanded }),
+		onClick: handleRowActivate,
+		onKeyDown: (e) => {
+			if (e.key === "Enter" || e.key === " ") {
+				e.preventDefault();
+				handleRowActivate();
+			}
+		},
+		tabIndex: 0,
+		"aria-label": onSelect ? `Inspect ${active.path}` : expanded ? `Collapse ${group.base}` : `Expand ${group.base}`,
+		"data-testid": "color-table-row",
+		"data-path": active.path,
+		"data-base": group.base,
+		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: active.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: nameText
+				}), multi && /* @__PURE__ */ jsx("span", {
+					className: "sb-color-table__variant-pills",
+					onClick: (e) => e.stopPropagation(),
+					onKeyDown: (e) => e.stopPropagation(),
+					role: "presentation",
+					children: group.variants.map((v) => /* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: cx("sb-color-table__variant-pill", { "sb-color-table__variant-pill--active": v.label === active.label }),
+						onClick: () => onSelectVariant(group.base, v.label),
+						"aria-pressed": v.label === active.label,
+						"data-testid": "color-table-variant",
+						"data-variant": v.label,
+						children: v.label
+					}, v.label))
+				})]
+			}),
+			/* @__PURE__ */ jsx(ValueCell, {
+				value: active.value,
+				label: `Copy value ${active.value}`,
+				children: active.outOfGamut && /* @__PURE__ */ jsx("span", {
+					title: "Out of sRGB gamut for this format",
+					"aria-label": "out of gamut",
+					className: "sb-color-table__gamut-warn",
+					children: "⚠"
+				})
+			}),
+			/* @__PURE__ */ jsx(ValueCell, {
+				value: active.cssVar,
+				label: `Copy CSS var ${active.cssVar}`
+			}),
+			/* @__PURE__ */ jsx("td", {
+				className: "sb-color-table__td sb-color-table__alias",
+				children: active.aliasOf ? /* @__PURE__ */ jsx("span", {
+					className: "sb-color-table__alias-text",
+					children: active.aliasOf
+				}) : /* @__PURE__ */ jsx("span", {
+					className: "sb-color-table__alias-empty",
+					"aria-hidden": true,
+					children: "—"
+				})
+			}),
+			/* @__PURE__ */ jsx("td", {
+				className: "sb-color-table__td sb-color-table__expand-cell",
+				children: !onSelect && /* @__PURE__ */ jsx("span", {
+					className: cx("sb-color-table__chevron", { "sb-color-table__chevron--expanded": expanded }),
+					"aria-hidden": true,
+					children: "▸"
+				})
+			})
+		]
+	}), expanded && !onSelect && /* @__PURE__ */ jsx("tr", {
+		className: "sb-color-table__detail-row",
+		"data-testid": "color-table-detail",
+		children: /* @__PURE__ */ jsx("td", {
+			colSpan: COLUMN_COUNT,
+			className: "sb-color-table__td sb-color-table__detail-cell",
+			children: /* @__PURE__ */ jsx(ExpandedDetail, {
+				group,
+				active
+			})
+		})
+	})] });
+}
+function ExpandedDetail({ group, active }) {
+	const hasDescription = active.description !== void 0 && active.description.length > 0;
+	const chain = active.aliasChain && active.aliasChain.length > 0 ? active.aliasChain : void 0;
+	const multi = group.variants.length > 1;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "sb-color-table__detail",
+		children: [
+			hasDescription && /* @__PURE__ */ jsx("p", {
+				className: "sb-color-table__description",
+				children: active.description
+			}),
+			chain && /* @__PURE__ */ jsxs("p", {
+				className: "sb-color-table__chain",
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "sb-color-table__detail-label",
+						children: "Alias chain:"
+					}),
+					" ",
+					chain.join(" → ")
+				]
+			}),
+			multi && /* @__PURE__ */ jsxs("div", {
+				className: "sb-color-table__variant-grid",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "sb-color-table__variant-grid-header",
+					children: "All variants"
+				}), /* @__PURE__ */ jsxs("table", {
+					className: "sb-color-table__subtable",
+					children: [/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+						/* @__PURE__ */ jsx("th", {
+							className: "sb-color-table__subth",
+							children: "Variant"
+						}),
+						/* @__PURE__ */ jsx("th", {
+							className: "sb-color-table__subth",
+							children: "Path"
+						}),
+						/* @__PURE__ */ jsx("th", {
+							className: "sb-color-table__subth",
+							children: "HEX"
+						}),
+						/* @__PURE__ */ jsx("th", {
+							className: "sb-color-table__subth",
+							children: "HSL"
+						}),
+						/* @__PURE__ */ jsx("th", {
+							className: "sb-color-table__subth",
+							children: "OKLCH"
+						})
+					] }) }), /* @__PURE__ */ jsx("tbody", { children: group.variants.map((v) => /* @__PURE__ */ jsxs("tr", {
+						className: cx({ "sb-color-table__subrow--active": v.label === active.label }),
+						children: [
+							/* @__PURE__ */ jsx("td", {
+								className: "sb-color-table__subtd",
+								children: v.label
+							}),
+							/* @__PURE__ */ jsx("td", {
+								className: "sb-color-table__subtd sb-color-table__subtd--path",
+								children: v.path
+							}),
+							/* @__PURE__ */ jsx("td", {
+								className: "sb-color-table__subtd",
+								children: v.hex
+							}),
+							/* @__PURE__ */ jsx("td", {
+								className: "sb-color-table__subtd",
+								children: v.hsl
+							}),
+							/* @__PURE__ */ jsx("td", {
+								className: "sb-color-table__subtd",
+								children: v.oklch
+							})
+						]
+					}, v.label)) })]
+				})]
+			}),
+			!hasDescription && !chain && !multi && /* @__PURE__ */ jsx("p", {
+				className: "sb-color-table__detail-empty",
+				children: "No description or alias chain authored for this token."
+			})
+		]
+	});
+}
+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"
+				})
+			})
+		]
+	});
+}
 /**
-* Produce a single-line display string for any DTCG token `$value`,
-* respecting the active color format for color-typed tokens and the
-* color sub-values of composite types (border, shadow, gradient).
-*
-* Shape by type:
-* - `color`              → `formatColor(value, colorFormat)` — e.g. `#3b82f6`, `oklch(...)`, `raw` JSON.
-* - `dimension|duration` → `value + unit` — e.g. `16px`, `200ms`.
-* - `fontFamily`         → string or array joined with `, `.
-* - `fontWeight`         → primitive.
-* - `cubicBezier`        → `cubic-bezier(a, b, c, d)`.
-* - `strokeStyle`        → primitive string, or `dashed · dashArray · lineCap` when it's the object shape.
-* - `shadow`             → one or more `offsetX offsetY blur spread color` layers joined with `, `.
-* - `border`             → `width style color`.
-* - `transition`         → `duration easing [delay]`.
-* - `typography`         → `family / size / line-height / weight`.
-* - `gradient`           → `stops joined with →` — compact representation, not a CSS gradient string (those live in GradientPalette's preview).
-*
-* Unknown object shapes fall through to truncated JSON.
+* Pick the value + gamut flag to display in the single Value column based
+* on the active color-format context. We pre-compute hex/hsl/oklch for the
+* expanded sub-table regardless; the extras (`rgb`, `raw`) take a fresh
+* `formatColor` pass. Keeps the hot path fast while staying honest about
+* out-of-gamut warnings per-format.
 */
-function formatTokenValue(value, $type, colorFormat) {
-	if (value == null) return "";
-	if (typeof value === "string" || typeof value === "number" || typeof value === "boolean") return String(value);
-	switch ($type) {
-		case "color": return formatColor(value, colorFormat).value;
-		case "dimension":
-		case "duration": return formatDimension$1(value);
-		case "fontFamily": return formatFontFamily$1(value);
-		case "fontWeight":
-		case "lineHeight":
-		case "letterSpacing":
-		case "opacity":
-		case "number": return formatPrimitive$1(value);
-		case "cubicBezier": return formatCubicBezier(value);
-		case "strokeStyle": return formatStrokeStyle(value);
-		case "shadow": return formatShadow(value, colorFormat);
-		case "border": return formatBorder(value, colorFormat);
-		case "transition": return formatTransition(value);
-		case "typography": return formatTypography(value);
-		case "gradient": return formatGradient(value, colorFormat);
-		default: return formatUnknown(value);
+function pickActiveFormat(raw, colorFormat, hex, hsl, oklch) {
+	switch (colorFormat) {
+		case "hex": return {
+			value: hex.value,
+			outOfGamut: hex.outOfGamut
+		};
+		case "hsl": return {
+			value: hsl.value,
+			outOfGamut: hsl.outOfGamut
+		};
+		case "oklch": return {
+			value: oklch.value,
+			outOfGamut: oklch.outOfGamut
+		};
+		default: {
+			const extra = formatColor(raw, colorFormat);
+			return {
+				value: extra.value,
+				outOfGamut: extra.outOfGamut
+			};
+		}
 	}
 }
-function formatDimension$1(v) {
-	if (typeof v === "string" || typeof v === "number") return String(v);
-	if (v && typeof v === "object") {
-		const d = v;
-		if (typeof d.value === "number" && typeof d.unit === "string") return `${d.value}${d.unit}`;
+function buildVariantDefs(variants) {
+	if (!variants) return {
+		matchOrder: [],
+		displayOrder: []
+	};
+	const entries = [];
+	const displayOrder = [];
+	for (const [label, suffix] of Object.entries(variants)) {
+		if (suffix.length === 0) continue;
+		entries.push({
+			label,
+			suffix
+		});
+		displayOrder.push(label);
 	}
-	return formatUnknown(v);
-}
-function formatFontFamily$1(v) {
-	if (typeof v === "string") return v;
-	if (Array.isArray(v)) return v.map(String).join(", ");
-	return formatUnknown(v);
+	return {
+		matchOrder: entries.toSorted((a, b) => b.suffix.length - a.suffix.length),
+		displayOrder
+	};
 }
-function formatPrimitive$1(v) {
-	if (typeof v === "string" || typeof v === "number" || typeof v === "boolean") return String(v);
-	return formatUnknown(v);
+/**
+* Position of a label within a group — the `base` entry always sorts first,
+* then declared labels in the order the caller wrote them in the `variants`
+* prop. Unknown labels (shouldn't happen in practice) fall to the end.
+*/
+function orderIndex(label, defs) {
+	if (label === BASE_LABEL) return -1;
+	const idx = defs.displayOrder.indexOf(label);
+	return idx >= 0 ? idx : Number.POSITIVE_INFINITY;
 }
-function formatCubicBezier(v) {
-	if (Array.isArray(v) && v.length === 4) return `cubic-bezier(${v.map((n) => typeof n === "number" ? n : 0).join(", ")})`;
-	return formatUnknown(v);
+/**
+* Resolve the variant label + base path for a token, if any. The leaf
+* (last dot-segment) must either equal the suffix outright (dot-segment
+* form: `hi.disabled` matches suffix `disabled`) or end in `-<suffix>`
+* (hyphen-tail form: `hi-d` matches `d`). The leading hyphen is required
+* for the tail form so suffix `0` can't hit `neutral-900` by character.
+*
+* Returned `basePath` is what gets used as the grouping key:
+* - Dot-segment match → parent path (drop the last dot-segment)
+* - Hyphen-tail match → same dot-depth, leaf with `-<suffix>` stripped
+*
+* Entries in `matchOrder` are pre-sorted longest-first, so `h-dark` wins
+* over `dark` for a path ending in `-h-dark`.
+*/
+function matchVariant(path, matchOrder) {
+	if (matchOrder.length === 0) return void 0;
+	const segments = path.split(".");
+	const leaf = segments.at(-1) ?? path;
+	for (const entry of matchOrder) {
+		if (leaf === entry.suffix) {
+			const parent = segments.slice(0, -1).join(".");
+			if (parent.length === 0) continue;
+			return {
+				label: entry.label,
+				basePath: parent
+			};
+		}
+		const tailMarker = `-${entry.suffix}`;
+		if (leaf.endsWith(tailMarker)) {
+			const trimmed = leaf.slice(0, -tailMarker.length);
+			if (trimmed.length === 0) continue;
+			const copy = segments.slice(0, -1);
+			copy.push(trimmed);
+			return {
+				label: entry.label,
+				basePath: copy.join(".")
+			};
+		}
+	}
+}
+//#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 project = useProject();
+	const { resolved } = project;
+	const cssVar = resolveCssVar(path, project);
+	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`,
+* respecting the active color format for color-typed tokens and the
+* color sub-values of composite types (border, shadow, gradient).
+*
+* Shape by type:
+* - `color`              → `formatColor(value, colorFormat)` — e.g. `#3b82f6`, `oklch(...)`, `raw` JSON.
+* - `dimension|duration` → `value + unit` — e.g. `16px`, `200ms`.
+* - `fontFamily`         → string or array joined with `, `.
+* - `fontWeight`         → primitive.
+* - `cubicBezier`        → `cubic-bezier(a, b, c, d)`.
+* - `strokeStyle`        → primitive string, or `dashed · dashArray · lineCap` when it's the object shape.
+* - `shadow`             → one or more `offsetX offsetY blur spread color` layers joined with `, `.
+* - `border`             → `width style color`.
+* - `transition`         → `duration easing [delay]`.
+* - `typography`         → `family / size / line-height / weight`.
+* - `gradient`           → `stops joined with →` — compact representation, not a CSS gradient string (those live in GradientPalette's preview).
+*
+* Unknown object shapes fall through to truncated JSON.
+*/
+function formatTokenValue(value, $type, colorFormat, listingEntry) {
+	if (value == null) return "";
+	if (typeof value === "string" || typeof value === "number" || typeof value === "boolean") return String(value);
+	const preview = listingEntry?.previewValue;
+	if (preview !== void 0) {
+		const previewStr = typeof preview === "string" ? preview : String(preview);
+		if ($type !== "color") return previewStr;
+		if (colorFormat === "hex") return previewStr;
+	}
+	switch ($type) {
+		case "color": return formatColor(value, colorFormat).value;
+		case "dimension":
+		case "duration": return formatDimension$1(value);
+		case "fontFamily": return formatFontFamily$1(value);
+		case "fontWeight":
+		case "lineHeight":
+		case "letterSpacing":
+		case "opacity":
+		case "number": return formatPrimitive$1(value);
+		case "cubicBezier": return formatCubicBezier(value);
+		case "strokeStyle": return formatStrokeStyle(value);
+		case "shadow": return formatShadow(value, colorFormat);
+		case "border": return formatBorder(value, colorFormat);
+		case "transition": return formatTransition(value);
+		case "typography": return formatTypography(value);
+		case "gradient": return formatGradient(value, colorFormat);
+		default: return formatUnknown(value);
+	}
+}
+function formatDimension$1(v) {
+	if (typeof v === "string" || typeof v === "number") return String(v);
+	if (v && typeof v === "object") {
+		const d = v;
+		if (typeof d.value === "number" && typeof d.unit === "string") return `${d.value}${d.unit}`;
+	}
+	return formatUnknown(v);
+}
+function formatFontFamily$1(v) {
+	if (typeof v === "string") return v;
+	if (Array.isArray(v)) return v.map(String).join(", ");
+	return formatUnknown(v);
+}
+function formatPrimitive$1(v) {
+	if (typeof v === "string" || typeof v === "number" || typeof v === "boolean") return String(v);
+	return formatUnknown(v);
+}
+function formatCubicBezier(v) {
+	if (Array.isArray(v) && v.length === 4) return `cubic-bezier(${v.map((n) => typeof n === "number" ? n : 0).join(", ")})`;
+	return formatUnknown(v);
 }
 function formatStrokeStyle(v) {
 	if (typeof v === "string") return v;
@@ -1059,574 +1739,332 @@ function formatUnknown(v) {
 	}
 }
 //#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
-	};
+//#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;
+	}
 }
-//#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))
-	})] });
-}
-//#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;
-	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",
+function DimensionScale({ filter, kind = "length", caption, sortBy = "value", sortDir = "asc" }) {
+	const project = useProject();
+	const { resolved, activeTheme, cssVarPrefix } = project;
+	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: resolveCssVar(path, project),
+				displayValue: formatTokenValue(token.$value, token.$type, "raw", project.listing[path]),
+				pxValue,
+				capped: Number.isFinite(pxValue) && pxValue > MAX_RENDER_PX
+			};
+		});
+	}, [
+		resolved,
+		filter,
+		project,
+		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: [
-				"Further descendants truncated at depth ",
-				ALIASED_BY_DEPTH_CAP,
-				"."
+				/* @__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
+				})
 			]
-		})
-	] });
-}
-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));
+		}, row.path))]
+	});
 }
-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))
-	};
+//#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 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 FontFamilySample({ filter, sample = "The quick brown fox jumps over the lazy dog.", caption, sortBy = "path", sortDir = "asc" }) {
+	const project = useProject();
+	const { resolved, activeTheme, cssVarPrefix } = project;
+	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: resolveCssVar(path, project),
+			stack: stackString(token.$value)
+		}));
+	}, [
+		resolved,
+		filter,
+		project,
+		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 treeHasTruncation(nodes) {
-	for (const n of nodes) {
-		if (n.truncated) return true;
-		if (treeHasTruncation(n.children)) return true;
+//#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 false;
+	return NaN;
 }
-//#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
-		};
+function FontWeightScale({ filter, sample = "Aa", caption, sortBy = "value", sortDir = "asc" }) {
+	const project = useProject();
+	const { resolved, activeTheme, cssVarPrefix } = project;
+	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: resolveCssVar(path, project),
+			display: token.$value == null ? "" : String(token.$value),
+			weight: toWeight(token.$value)
+		}));
 	}, [
-		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)) })
-		})] });
-	}
-	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 },
+		resolved,
+		filter,
+		project,
+		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: [
-				"Values also vary with ",
-				extra.map((a) => a.name).join(", "),
-				"; matrix shows the slice for the active selection."
+				/* @__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 valueFor(token, $type, format) {
-	if (!token) return "—";
-	return formatTokenValue(token.$value, $type, format);
+//#endregion
+//#region src/GradientPalette.tsx
+function asStops(raw) {
+	if (!Array.isArray(raw)) return [];
+	return raw;
 }
-function tupleName(themes, tuple) {
-	return themes.find((t) => {
-		const input = t.input;
-		return Object.keys(input).every((k) => input[k] === tuple[k]);
-	})?.name;
+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})`;
 }
-//#endregion
-//#region src/token-detail/CompositeBreakdown.tsx
-function CompositeBreakdown({ path }) {
-	const { token, resolved } = useTokenDetailData(path);
+function stopKey(path, stop, fallback) {
+	return `${path}|${stop.position ?? fallback}|${stopCssColor(stop)}`;
+}
+function GradientPalette({ filter, caption, sortBy = "path", sortDir = "asc" }) {
+	const project = useProject();
+	const { resolved, activeTheme, cssVarPrefix } = project;
 	const colorFormat = useColorFormat();
-	if (!token) return null;
-	return /* @__PURE__ */ jsx(CompositeBreakdownContent, {
-		type: token.$type,
-		rawValue: token.$value,
-		partialAliasOf: token.partialAliasOf,
+	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: resolveCssVar(path, project),
+			stops: asStops(token.$value)
+		}));
+	}, [
 		resolved,
-		colorFormat
+		filter,
+		project,
+		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."
+		})
 	});
-}
-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")
+	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 (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;
-}
-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))
+		}, 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))
-		})]
-	})] });
-}
-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);
-}
-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 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);
-}
-/**
-* 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 pickObjectAliases(v) {
-	if (!v || typeof v !== "object" || Array.isArray(v)) return void 0;
-	return v;
-}
-function pickArrayAliases(v) {
-	if (!Array.isArray(v)) return void 0;
-	return v;
-}
-/**
-* 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 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/internal/prefers-reduced-motion.ts
 /**
@@ -1646,1619 +2084,1466 @@ function usePrefersReducedMotion() {
 	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",
-	"double",
-	"groove",
-	"ridge",
-	"outset",
-	"inset"
-]);
-function CompositePreview({ path }) {
-	const { token, cssVar } = useTokenDetailData(path);
-	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
-		});
-	}
-	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-token-detail__dimension-bar",
-			style: { width: cssVar },
-			"aria-hidden": true
-		})
-	});
-	if (type === "duration") return /* @__PURE__ */ jsx(TransitionSample, { transition: `left ${cssVar} ease` });
-	if (type === "fontFamily") return /* @__PURE__ */ jsx("div", {
-		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 }
-		})]
-	});
+//#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 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
-			})
-		});
+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 /* @__PURE__ */ jsx("div", {
-		className: "sb-token-detail__stroke-style-fallback",
-		children: "strokeStyle value could not be previewed."
-	});
+	return fallback;
 }
-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 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 out;
+	return fallback;
 }
-function TransitionSample({ transition }) {
-	const reduced = usePrefersReducedMotion();
+function resolveMotionSpec(token, themeTokens) {
+	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 (reduced) return;
+		if (reducedMotion) return;
+		setPhase(0);
 		const id = requestAnimationFrame(() => setPhase(1));
 		const loop = window.setInterval(() => {
 			setPhase((p) => p === 0 ? 1 : 0);
-		}, 1200);
+		}, scaledDuration * 2);
 		return () => {
 			cancelAnimationFrame(id);
 			window.clearInterval(loop);
 		};
-	}, [reduced]);
-	if (reduced) return /* @__PURE__ */ jsx("div", {
-		className: "sb-token-detail__reduced-motion",
+	}, [
+		scaledDuration,
+		runKey,
+		reducedMotion
+	]);
+	if (reducedMotion) return /* @__PURE__ */ jsx("div", {
+		style: styles.reducedMotion,
 		children: "Animation suppressed by `prefers-reduced-motion: reduce`."
 	});
 	return /* @__PURE__ */ jsx("div", {
-		className: "sb-token-detail__motion-track",
+		style: styles.track,
 		children: /* @__PURE__ */ jsx("div", {
-			className: "sb-token-detail__motion-ball",
 			style: {
-				left: phase === 1 ? "calc(100% - 28px)" : "4px",
-				transition
+				...styles.ball,
+				left: phase === 1 ? "calc(100% - 32px)" : "4px",
+				transition: `left ${scaledDuration}ms ${easing}`
 			},
 			"aria-hidden": true
 		})
 	});
 }
 //#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"
-		})
-	] });
+//#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 OutputRow({ label, value, testId }) {
+function MotionPreview({ filter, caption }) {
+	const project = useProject();
+	const { resolved, activeTheme, cssVarPrefix } = project;
+	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: resolveCssVar(path, project),
+				durationMs: spec.durationMs,
+				easing: spec.easing,
+				kind
+			});
+		}
+		collected.sort((a, b) => {
+			if (a.kind !== b.kind) return a.kind.localeCompare(b.kind);
+			return a.path.localeCompare(b.path, void 0, { numeric: true });
+		});
+		return collected;
+	}, [
+		resolved,
+		filter,
+		project
+	]);
+	const captionText = caption ?? `${rows.length} motion token${rows.length === 1 ? "" : "s"}${filter ? ` matching \`${filter}\`` : ""} · ${activeTheme}`;
+	if (rows.length === 0) return /* @__PURE__ */ jsx("div", {
+		...themeAttrs(cssVarPrefix, activeTheme),
+		children: /* @__PURE__ */ jsx("div", {
+			className: "sb-block__empty",
+			children: "No motion tokens match this filter."
+		})
+	});
 	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 cssVar = resolveCssVar(path, useProject());
+	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;
-	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}`
-		})]
-	})] });
+//#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);
 }
-//#endregion
-//#region src/TokenDetail.tsx
-function TokenDetail({ path, heading }) {
-	const { token, cssVar, activeTheme, cssVarPrefix } = useTokenDetailData(path);
+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 [];
+}
+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 project = useProject();
+	const { resolved, activeTheme, cssVarPrefix } = project;
 	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: resolveCssVar(path, project),
+			layers: asLayers(token.$value)
+		}));
+	}, [
+		resolved,
+		filter,
+		project,
+		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 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", {
+		className: "sb-shadow-preview__layer",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "sb-shadow-preview__layer-header",
 			children: [
-				"Token ",
-				/* @__PURE__ */ jsx("code", { children: path }),
-				" not found in theme ",
-				/* @__PURE__ */ jsx("strong", { children: activeTheme }),
-				"."
+				"layer ",
+				index + 1,
+				" of ",
+				total
 			]
-		})
-	});
-	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 })
-		]
+		}), /* @__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;
 }
-//#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]);
+function StrokeStyleSample({ filter, caption, sortBy = "path", sortDir = "asc" }) {
+	const project = useProject();
+	const { resolved, activeTheme, cssVarPrefix } = project;
 	const rows = useMemo(() => {
 		return sortTokens(Object.entries(resolved).filter(([path, token]) => {
-			if (token.$type !== "color") return false;
+			if (token.$type !== "strokeStyle") 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 }
-			};
-		});
+		}).map(([path, token]) => ({
+			path,
+			cssVar: resolveCssVar(path, project),
+			displayValue: formatTokenValue(token.$value, token.$type, "raw", project.listing[path]),
+			cssStyle: extractCssStyle(token.$value)
+		}));
 	}, [
 		resolved,
 		filter,
-		cssVarPrefix,
+		project,
 		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
+		sortDir
 	]);
-	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}`;
+	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 color tokens match this filter."
+			children: "No strokeStyle tokens match this filter."
 		})
 	});
 	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("th", {
-							className: "sb-color-table__th sb-color-table__th--path",
-							children: "Name"
-						}),
-						/* @__PURE__ */ jsx("th", {
-							className: "sb-color-table__th",
-							children: "HEX"
-						}),
-						/* @__PURE__ */ jsx("th", {
-							className: "sb-color-table__th",
-							children: "HSL"
-						}),
-						/* @__PURE__ */ jsx("th", {
-							className: "sb-color-table__th",
-							children: "OKLCH"
-						}),
-						/* @__PURE__ */ jsx("th", {
-							className: "sb-color-table__th",
-							children: "CSS var"
-						}),
-						/* @__PURE__ */ jsx("th", {
-							className: "sb-color-table__th",
-							children: "Alias"
-						})
-					] }) }),
-					/* @__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"
+		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))]
 	});
 }
-/**
-* 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
-		});
-	}
-	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
+//#region src/token-detail/internal.ts
+function useTokenDetailData(path) {
+	const project = useProject();
+	const { activeTheme, activeAxes, axes, themes, themesResolved, resolved, cssVarPrefix } = project;
+	const typedResolved = resolved;
+	return {
+		token: typedResolved[path],
+		cssVar: resolveCssVar(path, project),
+		activeTheme,
+		activeAxes,
+		axes,
+		themes,
+		themesResolved,
+		resolved: typedResolved,
+		cssVarPrefix
 	};
-	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/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$1, { 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/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
-	}
+//#region src/token-detail/AliasedBy.tsx
+const ALIASED_BY_DEPTH_CAP = 6;
+const GROUP_RANK = {
+	ref: 0,
+	sys: 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 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$1, { 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: [
+				"Further descendants truncated at depth ",
+				ALIASED_BY_DEPTH_CAP,
+				"."
+			]
+		})
+	] });
 }
-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
-		});
+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 treeHasTruncation(nodes) {
+	for (const n of nodes) {
+		if (n.truncated) return true;
+		if (treeHasTruncation(n.children)) return true;
 	}
+	return false;
 }
 //#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;
+//#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$1, {});
+	if (variance.kind === "constant") {
+		const anyTheme = themes[0];
+		const value = anyTheme ? formatFn(themesResolved[anyTheme.name]?.[path]) : "—";
+		return /* @__PURE__ */ jsxs(Fragment$1, { 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"
+							]
+						})
+					]
+				})
+			}) })
+		})] });
 	}
-}
-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);
+	if (variance.kind === "one-axis") {
+		const axisName = variance.varyingAxes[0];
+		if (!axisName) return /* @__PURE__ */ jsx(Fragment$1, {});
+		const axis = axes.find((a) => a.name === axisName);
+		if (!axis) return /* @__PURE__ */ jsx(Fragment$1, {});
+		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 {
-				path,
-				cssVar: makeCssVar(path, cssVarPrefix),
-				displayValue: formatTokenValue(token.$value, token.$type, "raw"),
-				pxValue,
-				capped: Number.isFinite(pxValue) && pxValue > MAX_RENDER_PX
+				ctx,
+				themeName: name,
+				value: name ? formatFn(themesResolved[name]?.[path]) : "—"
 			};
 		});
-	}, [
-		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
-				})
+		return /* @__PURE__ */ jsxs(Fragment$1, { 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$1, {});
+	return /* @__PURE__ */ jsxs(Fragment$1, { 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/FontFamilySample.tsx
-function stackString(raw) {
-	if (typeof raw === "string") return raw;
-	if (Array.isArray(raw)) return raw.map(String).join(", ");
-	return "";
+function valueFor(token, $type, format) {
+	if (!token) return "—";
+	return formatTokenValue(token.$value, $type, format);
 }
-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 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/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)
-		}));
-	}, [
+//#region src/token-detail/CompositeBreakdown.tsx
+function CompositeBreakdown({ path }) {
+	const { token, resolved } = useTokenDetailData(path);
+	const colorFormat = useColorFormat();
+	if (!token) return null;
+	return /* @__PURE__ */ jsx(CompositeBreakdownContent, {
+		type: token.$type,
+		rawValue: token.$value,
+		partialAliasOf: token.partialAliasOf,
 		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."
-		})
+		colorFormat
 	});
-	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
-				})
+}
+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")
 			]
-		}, row.path))]
-	});
+		]);
+	}
+	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]
+						}),
+						/* @__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/GradientPalette.tsx
-function asStops(raw) {
-	if (!Array.isArray(raw)) return [];
-	return raw;
+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))
+	});
 }
-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 KeyValueRow({ label, value, alias }) {
+	const hasAlias = alias && alias.length > 0;
+	return /* @__PURE__ */ jsxs(Fragment$1, { 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))
+		})]
+	})] });
 }
-function stopKey(path, stop, fallback) {
-	return `${path}|${stop.position ?? fallback}|${stopCssColor(stop)}`;
+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);
 }
-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))]
-	});
+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);
 }
-//#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;
-		}
+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 NaN;
+	return JSON.stringify(v);
 }
-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;
+/**
+* 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 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 pickObjectAliases(v) {
+	if (!v || typeof v !== "object" || Array.isArray(v)) return void 0;
+	return v;
+}
+function pickArrayAliases(v) {
+	if (!Array.isArray(v)) return void 0;
+	return v;
+}
+/**
+* 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 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 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 gradientStopKey(stop, fallback) {
+	return `stop|${stop["position"] ?? fallback}|${JSON.stringify(stop["color"])}`;
 }
-function resolveMotionSpec(token, themeTokens) {
+//#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);
 	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(CompositePreviewContent, {
+		type: token.$type,
+		cssVar,
+		rawValue: token.$value
 	});
-	return /* @__PURE__ */ jsx("div", {
-		style: styles.track,
-		children: /* @__PURE__ */ jsx("div", {
+}
+function CompositePreviewContent({ type, cssVar, rawValue }) {
+	if (type === "typography") {
+		const base = cssVar.replace(/^var\(/, "").replace(/\)$/, "");
+		return /* @__PURE__ */ jsx("div", {
+			className: "sb-token-detail__typography-sample",
 			style: {
-				...styles.ball,
-				left: phase === 1 ? "calc(100% - 32px)" : "4px",
-				transition: `left ${scaledDuration}ms ${easing}`
+				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)`
 			},
-			"aria-hidden": true
-		})
-	});
-}
-//#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 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
-			});
-		}
-		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 });
+			children: PANGRAM
 		});
-		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),
+	}
+	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 motion tokens match this filter."
+			className: "sb-token-detail__dimension-bar",
+			style: { width: cssVar },
+			"aria-hidden": true
 		})
 	});
-	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))
-		]
+	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
 	});
-}
-//#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
+	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;
 }
-/**
-* 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/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
-		},
+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
 	});
-}
-//#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}`;
+	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 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 [];
+	return /* @__PURE__ */ jsx("div", {
+		className: "sb-token-detail__stroke-style-fallback",
+		children: "strokeStyle value could not be previewed."
+	});
 }
-function layerKey(path, layer, fallback) {
-	return `${path}|${`${formatDimension(layer.offsetX)},${formatDimension(layer.offsetY)}`}|${formatDimension(layer.blur)}|${formatDimension(layer.spread)}|${fallback}`;
+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 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),
+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-block__empty",
-			children: "No shadow tokens match this filter."
+			className: "sb-token-detail__motion-ball",
+			style: {
+				left: phase === 1 ? "calc(100% - 28px)" : "4px",
+				transition
+			},
+			"aria-hidden": true
 		})
 	});
+}
+//#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$1, { 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", {
-		...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))]
+		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 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"
 	});
 }
-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}`)]);
+async function copyToClipboard(text) {
+	if (typeof navigator === "undefined" || !navigator.clipboard) return false;
+	try {
+		await navigator.clipboard.writeText(text);
+		return true;
+	} catch {
+		return false;
+	}
 }
-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)
-		})]
+//#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$1, { 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/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;
+//#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$1, { 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}`
+		})]
+	})] });
 }
-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."
+//#endregion
+//#region src/TokenDetail.tsx
+function TokenDetail({ path, heading }) {
+	const { token, cssVar, activeTheme, cssVarPrefix } = useTokenDetailData(path);
+	const colorFormat = useColorFormat();
+	const theme = themeAttrs(cssVarPrefix, activeTheme);
+	if (!token) return /* @__PURE__ */ jsx("div", {
+		...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 { listing } = useProject();
+	const isColor = token.$type === "color";
+	const gamut = isColor ? formatColor(token.$value, colorFormat) : null;
+	const value = formatTokenValue(token.$value, token.$type, colorFormat, listing[path]);
+	const outOfGamut = gamut?.outOfGamut ?? false;
 	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))]
+		...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
@@ -3567,16 +3852,16 @@ function LeafRow({ node, onLeafClick }) {
 	});
 }
 function LeafPreview({ path, token }) {
-	const { cssVarPrefix } = useProject();
+	const project = useProject();
 	const colorFormat = useColorFormat();
 	const type = token.$type;
 	if (type === "color") {
-		const cssVar = makeCssVar(path, cssVarPrefix);
+		const cssVar = resolveCssVar(path, project);
 		return /* @__PURE__ */ jsxs("span", {
 			className: "sb-token-navigator__preview-box",
 			children: [/* @__PURE__ */ jsx("span", {
 				className: "sb-token-navigator__value",
-				children: formatTokenValue(token.$value, type, colorFormat)
+				children: formatTokenValue(token.$value, type, colorFormat, project.listing[path])
 			}), /* @__PURE__ */ jsx("span", {
 				className: "sb-token-navigator__color-swatch",
 				style: { background: cssVar },
@@ -3588,7 +3873,7 @@ function LeafPreview({ path, token }) {
 		className: "sb-token-navigator__preview-box",
 		children: [/* @__PURE__ */ jsx("span", {
 			className: "sb-token-navigator__value",
-			children: formatTokenValue(token.$value, type, colorFormat)
+			children: formatTokenValue(token.$value, type, colorFormat, project.listing[path])
 		}), /* @__PURE__ */ jsx("span", {
 			className: "sb-token-navigator__preview-dimension",
 			children: /* @__PURE__ */ jsx(DimensionBar, {
@@ -3622,14 +3907,15 @@ function LeafPreview({ path, token }) {
 		className: "sb-token-navigator__preview-box",
 		children: /* @__PURE__ */ jsx("span", {
 			className: "sb-token-navigator__value",
-			children: formatTokenValue(token.$value, type, colorFormat)
+			children: formatTokenValue(token.$value, type, colorFormat, project.listing[path])
 		})
 	});
 }
 //#endregion
 //#region src/TokenTable.tsx
 function TokenTable({ filter, type, caption, sortBy = "path", sortDir = "asc", searchable = true, onSelect }) {
-	const { resolved, activeTheme, cssVarPrefix } = useProject();
+	const project = useProject();
+	const { resolved, activeTheme, cssVarPrefix } = project;
 	const colorFormat = useColorFormat();
 	const [selectedPath, setSelectedPath] = useState(null);
 	const [query, setQuery] = useState("");
@@ -3643,13 +3929,13 @@ function TokenTable({ filter, type, caption, sortBy = "path", sortDir = "asc", s
 			dir: sortDir
 		}).map(([path, token]) => {
 			const isColor = token.$type === "color";
-			const color = isColor ? formatColor(token.$value, colorFormat) : null;
+			const color = isColor ? resolveColorValue(path, token.$value, colorFormat, project) : null;
 			return {
 				path,
 				type: token.$type ?? "",
-				value: formatTokenValue(token.$value, token.$type, colorFormat),
+				value: formatTokenValue(token.$value, token.$type, colorFormat, project.listing[path]),
 				outOfGamut: color?.outOfGamut ?? false,
-				cssVar: makeCssVar(path, cssVarPrefix),
+				cssVar: resolveCssVar(path, project),
 				isColor
 			};
 		});
@@ -3657,7 +3943,7 @@ function TokenTable({ filter, type, caption, sortBy = "path", sortDir = "asc", s
 		resolved,
 		filter,
 		type,
-		cssVarPrefix,
+		project,
 		colorFormat,
 		sortBy,
 		sortDir