@unpunnyfuns/swatchbook-blocks 0.1.0

package/dist/index.mjs

@@ -0,0 +1,3908 @@
+import Color from "colorjs.io";
+import { createContext, useCallback, useContext, useEffect, useMemo, useState } from "react";
+import { addons } from "storybook/preview-api";
+import { axes, css, cssVarPrefix, defaultTheme, themes, themesResolved } from "virtual:swatchbook/tokens";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/internal/format-color.ts
+const COLOR_FORMATS = [
+	"hex",
+	"rgb",
+	"hsl",
+	"oklch",
+	"raw"
+];
+const DEFAULT_FALLBACK = "—";
+/**
+* Convert Terrazzo's normalized color payload into a display string in the
+* requested format. Pure function — never throws; returns `{ value: '—' }`
+* for unrecognized input so calling blocks don't need try/catch.
+*/
+function formatColor(value, format, fallback = DEFAULT_FALLBACK) {
+	const normalized = coerce(value);
+	if (!normalized) return {
+		value: stringifyFallback(value, fallback),
+		outOfGamut: false
+	};
+	if (format === "raw") return {
+		value: compactJson(normalized),
+		outOfGamut: false
+	};
+	const color = toColor(normalized);
+	if (!color) return {
+		value: stringifyFallback(value, fallback),
+		outOfGamut: false
+	};
+	const alpha = typeof normalized.alpha === "number" ? normalized.alpha : 1;
+	if (format === "hex") return formatHex(color, alpha);
+	if (format === "rgb") return formatRgb(color, alpha);
+	if (format === "hsl") return formatHsl(color, alpha);
+	return formatOklch(color, alpha);
+}
+function coerce(value) {
+	if (!value || typeof value !== "object") return null;
+	const v = value;
+	const colorSpace = typeof v["colorSpace"] === "string" ? v["colorSpace"] : void 0;
+	const components = Array.isArray(v["components"]) ? v["components"] : Array.isArray(v["channels"]) ? v["channels"] : void 0;
+	if (!colorSpace || !components) {
+		if (typeof v["hex"] === "string") return {
+			colorSpace: "srgb",
+			components: hexToComponents(v["hex"])
+		};
+		return null;
+	}
+	const alpha = typeof v["alpha"] === "number" ? v["alpha"] : void 0;
+	const hex = typeof v["hex"] === "string" ? v["hex"] : void 0;
+	return {
+		colorSpace,
+		components,
+		...alpha !== void 0 && { alpha },
+		...hex !== void 0 && { hex }
+	};
+}
+function hexToComponents(hex) {
+	const h = hex.replace("#", "");
+	const expanded = h.length === 3 || h.length === 4 ? h.split("").map((c) => c + c).join("") : h;
+	return [
+		parseInt(expanded.slice(0, 2), 16) / 255,
+		parseInt(expanded.slice(2, 4), 16) / 255,
+		parseInt(expanded.slice(4, 6), 16) / 255
+	];
+}
+/**
+* Map Terrazzo's canonical CSS Color 4 space identifiers to the shorter
+* identifiers colorjs.io registers. Only the ones that differ need an entry.
+*/
+const COLORJS_SPACE_ALIASES = {
+	"display-p3": "p3",
+	"a98-rgb": "a98rgb",
+	"prophoto-rgb": "prophoto"
+};
+function toColor(normalized) {
+	const source = normalized.components ?? normalized.channels ?? [];
+	const coords = [
+		numberOrZero(source[0]),
+		numberOrZero(source[1]),
+		numberOrZero(source[2])
+	];
+	const space = COLORJS_SPACE_ALIASES[normalized.colorSpace] ?? normalized.colorSpace;
+	try {
+		return new Color(space, coords, normalized.alpha ?? 1);
+	} catch {
+		return null;
+	}
+}
+function numberOrZero(n) {
+	return typeof n === "number" && !Number.isNaN(n) ? n : 0;
+}
+function coord(color, i) {
+	const c = color.coords[i];
+	return typeof c === "number" && !Number.isNaN(c) ? c : 0;
+}
+function formatHex(color, alpha) {
+	const srgb = color.to("srgb");
+	if (!srgb.inGamut("srgb")) return {
+		value: formatRgb(color, alpha).value,
+		outOfGamut: true
+	};
+	const r = clamp255(coord(srgb, 0));
+	const g = clamp255(coord(srgb, 1));
+	const b = clamp255(coord(srgb, 2));
+	const base = `#${toHexByte(r)}${toHexByte(g)}${toHexByte(b)}`;
+	if (alpha >= 1) return {
+		value: base,
+		outOfGamut: false
+	};
+	return {
+		value: `${base}${toHexByte(clamp255(alpha))}`,
+		outOfGamut: false
+	};
+}
+function formatRgb(color, alpha) {
+	const srgb = color.to("srgb");
+	const inGamut = srgb.inGamut("srgb");
+	const body = `${Math.round(clampUnit(coord(srgb, 0)) * 255)} ${Math.round(clampUnit(coord(srgb, 1)) * 255)} ${Math.round(clampUnit(coord(srgb, 2)) * 255)}`;
+	return {
+		value: alpha >= 1 ? `rgb(${body})` : `rgb(${body} / ${roundAlpha(alpha)})`,
+		outOfGamut: !inGamut
+	};
+}
+function formatHsl(color, alpha) {
+	const hsl = color.to("hsl");
+	const inGamut = color.to("srgb").inGamut("srgb");
+	const body = `${roundHue(coord(hsl, 0))} ${roundPercent(coord(hsl, 1))}% ${roundPercent(coord(hsl, 2))}%`;
+	return {
+		value: alpha >= 1 ? `hsl(${body})` : `hsl(${body} / ${roundAlpha(alpha)})`,
+		outOfGamut: !inGamut
+	};
+}
+function formatOklch(color, alpha) {
+	const oklch = color.to("oklch");
+	const body = `${roundTo(coord(oklch, 0), 3)} ${roundTo(coord(oklch, 1), 3)} ${roundTo(coord(oklch, 2), 2)}`;
+	return {
+		value: alpha >= 1 ? `oklch(${body})` : `oklch(${body} / ${roundAlpha(alpha)})`,
+		outOfGamut: false
+	};
+}
+function clamp255(n) {
+	return Math.max(0, Math.min(255, Math.round(n * 255)));
+}
+function clampUnit(n) {
+	return Math.max(0, Math.min(1, n));
+}
+function toHexByte(n) {
+	return n.toString(16).padStart(2, "0");
+}
+function roundTo(n, digits) {
+	const f = 10 ** digits;
+	return Math.round(n * f) / f;
+}
+function roundHue(h) {
+	return roundTo((h % 360 + 360) % 360, 1);
+}
+function roundPercent(n) {
+	return Math.round(n * 10) / 10;
+}
+function roundAlpha(a) {
+	return roundTo(a, 3);
+}
+function compactJson(value) {
+	const parts = [`"colorSpace":${JSON.stringify(value.colorSpace)}`];
+	const components = value.components ?? value.channels;
+	if (components) parts.push(`"components":[${components.map((c) => c === null ? "null" : c).join(", ")}]`);
+	if (typeof value.alpha === "number" && value.alpha !== 1) parts.push(`"alpha":${value.alpha}`);
+	return `{ ${parts.join(", ")} }`;
+}
+function stringifyFallback(value, fallback) {
+	if (value == null) return fallback;
+	if (typeof value === "string" || typeof value === "number") return String(value);
+	return fallback;
+}
+//#endregion
+//#region src/contexts.ts
+/**
+* Context carrying the full {@link ProjectSnapshot}. `null` sentinel lets
+* `useSwatchbookData()` tell "provider present" from "fall back to the
+* virtual module".
+*/
+const SwatchbookContext = createContext(null);
+function useOptionalSwatchbookData() {
+	return useContext(SwatchbookContext);
+}
+/**
+* Active swatchbook theme for the current story/docs render. Populated by
+* the addon's preview decorator and consumed by `useToken` + any future
+* consumer hooks.
+*
+* This runs through plain React context rather than Storybook's
+* `useGlobals` so the same hook works in autodocs / MDX renders where the
+* preview-hooks context isn't available.
+*/
+const ThemeContext = createContext("");
+function useActiveTheme() {
+	return useContext(ThemeContext);
+}
+/**
+* Active axis tuple for the current story/docs render — `Record<axisName,
+* contextName>`. Derived from the same input as {@link ThemeContext}; split
+* out so consumers needing per-axis info (toolbar, panel, tuple-aware
+* blocks) don't have to reparse the composed permutation ID.
+*/
+const AxesContext = createContext({});
+function useActiveAxes() {
+	return useContext(AxesContext);
+}
+/**
+* Active color-display format for the current story/docs render. Populated
+* by the addon's preview decorator from the `swatchbookColorFormat` global
+* (per-story `globals` or toolbar dropdown) and consumed by blocks that
+* render color-token values. Emitted CSS is unaffected.
+*
+* Runs through plain React context rather than Storybook's `useGlobals` so
+* per-story seeded globals flow through on first render and the same hook
+* is safe to call from MDX doc blocks (where the preview-hooks context
+* isn't available).
+*/
+const ColorFormatContext = createContext("hex");
+function useColorFormat() {
+	return useContext(ColorFormatContext);
+}
+//#endregion
+//#region src/internal/use-project.ts
+const STYLE_ELEMENT_ID = "swatchbook-tokens";
+const GLOBAL_KEY = "swatchbookTheme";
+const AXES_GLOBAL_KEY = "swatchbookAxes";
+function ensureStylesheet(css) {
+	if (typeof document === "undefined") return;
+	let style = document.getElementById(STYLE_ELEMENT_ID);
+	if (!style) {
+		style = document.createElement("style");
+		style.id = STYLE_ELEMENT_ID;
+		document.head.appendChild(style);
+	}
+	if (style.textContent !== css) style.textContent = css;
+}
+function defaultTuple(axes) {
+	const out = {};
+	for (const axis of axes) out[axis.name] = axis.default;
+	return out;
+}
+function tupleForName(themesList, name) {
+	return themesList.find((t) => t.name === name)?.input;
+}
+function tuplesEqual(a, b) {
+	const keys = new Set([...Object.keys(a), ...Object.keys(b)]);
+	for (const k of keys) if (a[k] !== b[k]) return false;
+	return true;
+}
+function nameForTuple(themesList, tuple) {
+	return themesList.find((t) => tuplesEqual(t.input, tuple))?.name;
+}
+function snapshotToData(snapshot) {
+	return {
+		activeTheme: snapshot.activeTheme,
+		activeAxes: { ...snapshot.activeAxes },
+		axes: snapshot.axes,
+		themes: snapshot.themes,
+		themesResolved: snapshot.themesResolved,
+		resolved: snapshot.themesResolved[snapshot.activeTheme] ?? {},
+		cssVarPrefix: snapshot.cssVarPrefix
+	};
+}
+/**
+* Reads project data either from a mounted {@link SwatchbookProvider}
+* (preferred — the addon's preview decorator installs one around every
+* story) or — as a back-compat fallback — directly from the virtual
+* module plus Storybook globals.
+*
+* The fallback path is what makes the hook safe to call from MDX doc
+* blocks and autodocs renders where no story is active. It self-mounts
+* the virtual module's per-theme CSS and tracks the active tuple via the
+* `globalsUpdated` channel event; {@link useGlobals} from
+* `storybook/preview-api` would throw outside a story render.
+*/
+function useProject() {
+	const snapshot = useOptionalSwatchbookData();
+	const fallback = useVirtualModuleFallback(snapshot === null);
+	return snapshot !== null ? snapshotToData(snapshot) : fallback;
+}
+function useVirtualModuleFallback(enabled) {
+	const contextTheme = useActiveTheme();
+	const contextAxes = useActiveAxes();
+	const [channelTheme, setChannelTheme] = useState(null);
+	const [channelAxes, setChannelAxes] = useState(null);
+	useEffect(() => {
+		if (!enabled) return;
+		ensureStylesheet(css);
+	}, [enabled]);
+	useEffect(() => {
+		if (!enabled) return;
+		const channel = addons.getChannel();
+		const onGlobals = (payload) => {
+			const nextTheme = payload.globals?.[GLOBAL_KEY];
+			if (typeof nextTheme === "string") setChannelTheme(nextTheme);
+			const nextAxes = payload.globals?.[AXES_GLOBAL_KEY];
+			if (nextAxes && typeof nextAxes === "object") setChannelAxes(nextAxes);
+		};
+		channel.on("globalsUpdated", onGlobals);
+		channel.on("updateGlobals", onGlobals);
+		return () => {
+			channel.off("globalsUpdated", onGlobals);
+			channel.off("updateGlobals", onGlobals);
+		};
+	}, [enabled]);
+	const activeAxes = Object.keys(contextAxes).length > 0 ? { ...contextAxes } : channelAxes ?? defaultTuple(axes);
+	const derivedName = nameForTuple(themes, activeAxes);
+	const fallbackTupleName = channelTheme && tupleForName(themes, channelTheme) ? channelTheme : null;
+	const activeTheme = contextTheme || derivedName || fallbackTupleName || channelTheme || defaultTheme || themes[0]?.name || "";
+	return {
+		activeTheme,
+		activeAxes,
+		axes,
+		themes,
+		themesResolved,
+		resolved: themesResolved[activeTheme] ?? {},
+		cssVarPrefix
+	};
+}
+function makeCssVar(path, prefix) {
+	const tail = path.replaceAll(".", "-");
+	return prefix ? `var(--${prefix}-${tail})` : `var(--${tail})`;
+}
+function globMatch(path, glob) {
+	if (!glob) return true;
+	if (glob === "*" || glob === "**") return true;
+	if (glob.endsWith(".*")) return path.startsWith(`${glob.slice(0, -2)}.`);
+	if (glob.endsWith("**")) return path.startsWith(glob.slice(0, -2));
+	return path === glob || path.startsWith(`${glob}.`);
+}
+function formatValue(value) {
+	if (value == null) return "";
+	if (typeof value === "string" || typeof value === "number") return String(value);
+	if (typeof value === "object") {
+		const v = value;
+		if (typeof v["hex"] === "string") return v["hex"];
+		if ("value" in v && "unit" in v) return `${String(v["value"])}${String(v["unit"])}`;
+		return JSON.stringify(value).slice(0, 120);
+	}
+	return String(value);
+}
+//#endregion
+//#region src/border-preview/BorderSample.tsx
+const sampleStyle$1 = {
+	width: 120,
+	height: 56,
+	background: "var(--sb-color-sys-surface-raised, transparent)",
+	borderRadius: 6
+};
+function BorderSample({ path }) {
+	const { cssVarPrefix } = useProject();
+	const cssVar = makeCssVar(path, cssVarPrefix);
+	return /* @__PURE__ */ jsx("div", {
+		style: {
+			...sampleStyle$1,
+			border: cssVar
+		},
+		"aria-hidden": true
+	});
+}
+//#endregion
+//#region src/internal/styles.ts
+const MONO_STACK = "ui-monospace, SFMono-Regular, Menlo, monospace";
+const BORDER_DEFAULT = "1px solid var(--sb-color-sys-border-default, rgba(128,128,128,0.2))";
+const BORDER_FAINT = "1px solid var(--sb-color-sys-border-default, rgba(128,128,128,0.15))";
+const surfaceStyle = {
+	fontFamily: "var(--sb-typography-sys-body-font-family, system-ui)",
+	fontSize: "var(--sb-typography-sys-body-font-size, 14px)",
+	color: "var(--sb-color-sys-text-default, CanvasText)",
+	background: "var(--sb-color-sys-surface-default, Canvas)",
+	padding: 12,
+	borderRadius: 6
+};
+const captionStyle = {
+	padding: "4px 0 12px",
+	opacity: .7,
+	fontSize: 12
+};
+const emptyStyle = {
+	padding: "24px 12px",
+	textAlign: "center",
+	opacity: .6
+};
+//#endregion
+//#region src/BorderPreview.tsx
+const styles$14 = {
+	wrapper: surfaceStyle,
+	caption: captionStyle,
+	empty: emptyStyle,
+	row: {
+		display: "grid",
+		gridTemplateColumns: "minmax(160px, 220px) 140px 1fr",
+		gap: 16,
+		alignItems: "center",
+		padding: "14px 0",
+		borderBottom: BORDER_DEFAULT
+	},
+	meta: {
+		display: "flex",
+		flexDirection: "column",
+		gap: 2,
+		minWidth: 0
+	},
+	path: {
+		fontFamily: MONO_STACK,
+		fontSize: 12,
+		overflow: "hidden",
+		textOverflow: "ellipsis",
+		whiteSpace: "nowrap"
+	},
+	cssVar: {
+		fontFamily: MONO_STACK,
+		fontSize: 11,
+		opacity: .7
+	},
+	sampleCell: {
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "center"
+	},
+	breakdown: {
+		fontFamily: MONO_STACK,
+		fontSize: 11,
+		display: "grid",
+		gridTemplateColumns: "auto 1fr",
+		columnGap: 12,
+		rowGap: 2
+	},
+	breakdownKey: { color: "var(--sb-color-sys-text-muted, CanvasText)" }
+};
+function formatDimension$1(raw) {
+	if (raw == null) return "—";
+	if (typeof raw === "number") return String(raw);
+	if (typeof raw === "string") return raw;
+	if (typeof raw === "object") {
+		const v = raw;
+		if (typeof v.value === "number" && typeof v.unit === "string") return `${v.value}${v.unit}`;
+	}
+	return JSON.stringify(raw);
+}
+function formatColor$2(raw) {
+	if (raw == null) return "—";
+	if (typeof raw === "string") return raw;
+	if (typeof raw === "object") {
+		const v = raw;
+		if (Array.isArray(v.components) && typeof v.colorSpace === "string") {
+			const parts = v.components.map((c) => typeof c === "number" ? c.toFixed(3) : String(c));
+			const alpha = typeof v.alpha === "number" && v.alpha !== 1 ? `, ${v.alpha}` : "";
+			return `${v.colorSpace}(${parts.join(" ")}${alpha})`;
+		}
+	}
+	return JSON.stringify(raw);
+}
+function BorderPreview({ filter = "border", caption }) {
+	const { resolved, activeTheme, cssVarPrefix } = useProject();
+	const rows = useMemo(() => {
+		const collected = [];
+		for (const [path, token] of Object.entries(resolved)) {
+			if (token.$type !== "border") continue;
+			if (!globMatch(path, filter)) continue;
+			collected.push({
+				path,
+				cssVar: makeCssVar(path, cssVarPrefix),
+				value: token.$value ?? {}
+			});
+		}
+		collected.sort((a, b) => a.path.localeCompare(b.path, void 0, { numeric: true }));
+		return collected;
+	}, [
+		resolved,
+		filter,
+		cssVarPrefix
+	]);
+	const captionText = caption ?? `${rows.length} border${rows.length === 1 ? "" : "s"}${filter ? ` matching \`${filter}\`` : ""} · ${activeTheme}`;
+	if (rows.length === 0) return /* @__PURE__ */ jsx("div", {
+		"data-theme": activeTheme,
+		style: styles$14.wrapper,
+		children: /* @__PURE__ */ jsx("div", {
+			style: styles$14.empty,
+			children: "No border tokens match this filter."
+		})
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		"data-theme": activeTheme,
+		style: styles$14.wrapper,
+		children: [/* @__PURE__ */ jsx("div", {
+			style: styles$14.caption,
+			children: captionText
+		}), rows.map((row) => /* @__PURE__ */ jsxs("div", {
+			style: styles$14.row,
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					style: styles$14.meta,
+					children: [/* @__PURE__ */ jsx("span", {
+						style: styles$14.path,
+						children: row.path
+					}), /* @__PURE__ */ jsx("span", {
+						style: styles$14.cssVar,
+						children: row.cssVar
+					})]
+				}),
+				/* @__PURE__ */ jsx("div", {
+					style: styles$14.sampleCell,
+					children: /* @__PURE__ */ jsx(BorderSample, { path: row.path })
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					style: styles$14.breakdown,
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							style: styles$14.breakdownKey,
+							children: "width"
+						}),
+						/* @__PURE__ */ jsx("span", { children: formatDimension$1(row.value.width) }),
+						/* @__PURE__ */ jsx("span", {
+							style: styles$14.breakdownKey,
+							children: "style"
+						}),
+						/* @__PURE__ */ jsx("span", { children: row.value.style != null ? String(row.value.style) : "—" }),
+						/* @__PURE__ */ jsx("span", {
+							style: styles$14.breakdownKey,
+							children: "color"
+						}),
+						/* @__PURE__ */ jsx("span", { children: formatColor$2(row.value.color) })
+					]
+				})
+			]
+		}, row.path))]
+	});
+}
+//#endregion
+//#region src/ColorPalette.tsx
+const styles$13 = {
+	wrapper: surfaceStyle,
+	caption: captionStyle,
+	empty: emptyStyle,
+	group: { marginBottom: 20 },
+	groupHeader: {
+		fontFamily: MONO_STACK,
+		fontSize: 11,
+		textTransform: "uppercase",
+		letterSpacing: .5,
+		opacity: .6,
+		marginBottom: 8
+	},
+	grid: {
+		display: "grid",
+		gridTemplateColumns: "repeat(auto-fill, minmax(120px, 1fr))",
+		gap: 8
+	},
+	card: {
+		border: BORDER_DEFAULT,
+		borderRadius: 6,
+		overflow: "hidden",
+		display: "flex",
+		flexDirection: "column"
+	},
+	swatch: {
+		height: 56,
+		width: "100%",
+		borderBottom: "1px solid var(--sb-color-sys-border-default, rgba(0,0,0,0.08))"
+	},
+	meta: {
+		padding: "8px 10px",
+		display: "flex",
+		flexDirection: "column",
+		gap: 2
+	},
+	leaf: {
+		fontFamily: MONO_STACK,
+		fontSize: 12
+	},
+	value: {
+		fontFamily: MONO_STACK,
+		fontSize: 11,
+		opacity: .7
+	}
+};
+/**
+* Count segments in the filter before the first glob (`*` / `**`).
+* `color.ref.*` → 2; `color.sys.surface.*` → 3; `color` → 1; undefined → 0.
+*/
+function fixedPrefixLength(filter) {
+	if (!filter) return 0;
+	const segments = filter.split(".");
+	let fixed = 0;
+	for (const seg of segments) {
+		if (seg === "*" || seg === "**") break;
+		fixed += 1;
+	}
+	return fixed;
+}
+function ColorPalette({ filter = "color", groupBy, caption }) {
+	const { resolved, activeTheme, cssVarPrefix } = useProject();
+	const colorFormat = useColorFormat();
+	const groups = useMemo(() => {
+		const entries = Object.entries(resolved).filter(([path, token]) => {
+			if (token.$type !== "color") return false;
+			return globMatch(path, filter);
+		}).toSorted(([a], [b]) => a.localeCompare(b, void 0, { numeric: true }));
+		const maxDepth = entries.reduce((m, [p]) => Math.max(m, p.split(".").length), 0);
+		/**
+		* Auto-derive: group one level below the filter's fixed prefix, but
+		* clamp so each swatch retains at least one leaf segment. A filter
+		* like `color.ref.blue.*` (fixed length 3) with only 4-segment tokens
+		* would try groupBy=4 → one-per-group; clamp to `maxDepth - 1` so the
+		* whole ramp lands in one group with each shade as a leaf.
+		*/
+		const effectiveGroupBy = groupBy ?? Math.min(fixedPrefixLength(filter) + 1, Math.max(maxDepth - 1, 1));
+		const bucket = /* @__PURE__ */ new Map();
+		for (const [path, token] of entries) {
+			const segments = path.split(".");
+			const groupKey = segments.slice(0, effectiveGroupBy).join(".");
+			const leaf = segments.slice(effectiveGroupBy).join(".") || segments.at(-1) || path;
+			const list = bucket.get(groupKey) ?? [];
+			const formatted = formatColor(token.$value, colorFormat);
+			list.push({
+				path,
+				leaf,
+				cssVar: makeCssVar(path, cssVarPrefix),
+				value: formatted.value,
+				outOfGamut: formatted.outOfGamut
+			});
+			bucket.set(groupKey, list);
+		}
+		return [...bucket.entries()].toSorted(([a], [b]) => a.localeCompare(b, void 0, { numeric: true }));
+	}, [
+		resolved,
+		filter,
+		groupBy,
+		cssVarPrefix,
+		colorFormat
+	]);
+	const totalCount = groups.reduce((acc, [, swatches]) => acc + swatches.length, 0);
+	const captionText = caption ?? `${totalCount} color${totalCount === 1 ? "" : "s"}${filter ? ` matching \`${filter}\`` : ""} · ${activeTheme}`;
+	if (totalCount === 0) return /* @__PURE__ */ jsx("div", {
+		"data-theme": activeTheme,
+		style: styles$13.wrapper,
+		children: /* @__PURE__ */ jsx("div", {
+			style: styles$13.empty,
+			children: "No color tokens match this filter."
+		})
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		"data-theme": activeTheme,
+		style: styles$13.wrapper,
+		children: [/* @__PURE__ */ jsx("div", {
+			style: styles$13.caption,
+			children: captionText
+		}), groups.map(([group, swatches]) => /* @__PURE__ */ jsxs("section", {
+			style: styles$13.group,
+			children: [/* @__PURE__ */ jsx("div", {
+				style: styles$13.groupHeader,
+				children: group
+			}), /* @__PURE__ */ jsx("div", {
+				style: styles$13.grid,
+				children: swatches.map((swatch) => /* @__PURE__ */ jsxs("div", {
+					style: styles$13.card,
+					children: [/* @__PURE__ */ jsx("div", {
+						style: {
+							...styles$13.swatch,
+							background: swatch.cssVar
+						},
+						"aria-hidden": true
+					}), /* @__PURE__ */ jsxs("div", {
+						style: styles$13.meta,
+						children: [/* @__PURE__ */ jsx("span", {
+							style: styles$13.leaf,
+							children: swatch.leaf
+						}), /* @__PURE__ */ jsxs("span", {
+							style: styles$13.value,
+							children: [swatch.value, swatch.outOfGamut && /* @__PURE__ */ jsxs("span", {
+								title: "Out of sRGB gamut for this format",
+								"aria-label": "out of gamut",
+								style: { marginLeft: 4 },
+								children: [" ", "⚠"]
+							})]
+						})]
+					})]
+				}, swatch.path))
+			})]
+		}, group))]
+	});
+}
+//#endregion
+//#region src/dimension-scale/DimensionBar.tsx
+const MAX_RENDER_PX$1 = 480;
+const styles$12 = {
+	bar: {
+		height: 14,
+		background: "var(--sb-color-sys-accent-bg, #3b82f6)",
+		borderRadius: 2,
+		minWidth: 1
+	},
+	radiusSample: {
+		width: 56,
+		height: 56,
+		background: "var(--sb-color-sys-accent-bg, #3b82f6)",
+		border: "1px solid var(--sb-color-sys-border-default, rgba(128,128,128,0.3))"
+	},
+	sizeSample: {
+		background: "var(--sb-color-sys-accent-bg, #3b82f6)",
+		border: "1px solid var(--sb-color-sys-border-default, rgba(128,128,128,0.3))",
+		minWidth: 1,
+		minHeight: 1
+	}
+};
+/**
+* Convert a DTCG dimension `$value` (`{ value, unit }`) to pixels for the
+* purpose of deciding whether to cap the rendered bar. Returns `NaN` for
+* units we can't reasonably approximate (ex / ch / %), which the caller
+* treats as "render at cssVar but don't cap".
+*/
+function toPixels$1(raw) {
+	if (raw == null || typeof raw !== "object") return NaN;
+	const v = raw;
+	if (typeof v.value !== "number" || typeof v.unit !== "string") return NaN;
+	switch (v.unit) {
+		case "px": return v.value;
+		case "rem":
+		case "em": return v.value * 16;
+		default: return NaN;
+	}
+}
+function DimensionBar({ path, kind = "length" }) {
+	const { resolved, cssVarPrefix } = useProject();
+	const cssVar = makeCssVar(path, cssVarPrefix);
+	const token = resolved[path];
+	const pxValue = toPixels$1(token?.$value);
+	const cappedValue = Number.isFinite(pxValue) && pxValue > MAX_RENDER_PX$1 ? `${MAX_RENDER_PX$1}px` : cssVar;
+	switch (kind) {
+		case "radius": return /* @__PURE__ */ jsx("div", {
+			style: {
+				...styles$12.radiusSample,
+				borderRadius: cssVar
+			},
+			"aria-hidden": true
+		});
+		case "size": return /* @__PURE__ */ jsx("div", {
+			style: {
+				...styles$12.sizeSample,
+				width: cappedValue,
+				height: cappedValue
+			},
+			"aria-hidden": true
+		});
+		default: return /* @__PURE__ */ jsx("div", {
+			style: {
+				...styles$12.bar,
+				width: cappedValue
+			},
+			"aria-hidden": true
+		});
+	}
+}
+//#endregion
+//#region src/DimensionScale.tsx
+const MAX_RENDER_PX = 480;
+const styles$11 = {
+	wrapper: surfaceStyle,
+	caption: captionStyle,
+	empty: emptyStyle,
+	row: {
+		display: "grid",
+		gridTemplateColumns: "minmax(160px, 220px) 1fr auto",
+		gap: 16,
+		alignItems: "center",
+		padding: "10px 0",
+		borderBottom: BORDER_DEFAULT
+	},
+	meta: {
+		display: "flex",
+		flexDirection: "column",
+		gap: 2,
+		minWidth: 0
+	},
+	path: {
+		fontFamily: MONO_STACK,
+		fontSize: 12,
+		overflow: "hidden",
+		textOverflow: "ellipsis",
+		whiteSpace: "nowrap"
+	},
+	specs: {
+		fontFamily: MONO_STACK,
+		fontSize: 11,
+		opacity: .7
+	},
+	visualCell: {
+		display: "flex",
+		alignItems: "center",
+		minWidth: 0
+	},
+	cssVar: {
+		fontFamily: MONO_STACK,
+		fontSize: 11,
+		opacity: .7,
+		whiteSpace: "nowrap"
+	},
+	cap: {
+		fontFamily: MONO_STACK,
+		fontSize: 10,
+		opacity: .6,
+		marginLeft: 6
+	}
+};
+/**
+* Convert a DTCG dimension `$value` (`{ value, unit }`) to pixels for the
+* purpose of ordering and deciding whether to show a cap indicator.
+*/
+function toPixels(raw) {
+	if (raw == null || typeof raw !== "object") return NaN;
+	const v = raw;
+	if (typeof v.value !== "number" || typeof v.unit !== "string") return NaN;
+	switch (v.unit) {
+		case "px": return v.value;
+		case "rem":
+		case "em": return v.value * 16;
+		default: return NaN;
+	}
+}
+function DimensionScale({ filter = "dimension", kind = "length", caption }) {
+	const { resolved, activeTheme, cssVarPrefix } = useProject();
+	const rows = useMemo(() => {
+		const collected = [];
+		for (const [path, token] of Object.entries(resolved)) {
+			if (token.$type !== "dimension") continue;
+			if (!globMatch(path, filter)) continue;
+			const pxValue = toPixels(token.$value);
+			collected.push({
+				path,
+				cssVar: makeCssVar(path, cssVarPrefix),
+				displayValue: formatValue(token.$value),
+				pxValue,
+				capped: Number.isFinite(pxValue) && pxValue > MAX_RENDER_PX
+			});
+		}
+		collected.sort((a, b) => {
+			if (Number.isFinite(a.pxValue) && Number.isFinite(b.pxValue)) return a.pxValue - b.pxValue;
+			return a.path.localeCompare(b.path, void 0, { numeric: true });
+		});
+		return collected;
+	}, [
+		resolved,
+		filter,
+		cssVarPrefix
+	]);
+	const captionText = caption ?? `${rows.length} dimension${rows.length === 1 ? "" : "s"}${filter ? ` matching \`${filter}\`` : ""} · ${activeTheme}`;
+	if (rows.length === 0) return /* @__PURE__ */ jsx("div", {
+		"data-theme": activeTheme,
+		style: styles$11.wrapper,
+		children: /* @__PURE__ */ jsx("div", {
+			style: styles$11.empty,
+			children: "No dimension tokens match this filter."
+		})
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		"data-theme": activeTheme,
+		style: styles$11.wrapper,
+		children: [/* @__PURE__ */ jsx("div", {
+			style: styles$11.caption,
+			children: captionText
+		}), rows.map((row) => /* @__PURE__ */ jsxs("div", {
+			style: styles$11.row,
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					style: styles$11.meta,
+					children: [/* @__PURE__ */ jsx("span", {
+						style: styles$11.path,
+						children: row.path
+					}), /* @__PURE__ */ jsx("span", {
+						style: styles$11.specs,
+						children: row.displayValue
+					})]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					style: styles$11.visualCell,
+					children: [/* @__PURE__ */ jsx(DimensionBar, {
+						path: row.path,
+						kind
+					}), row.capped && /* @__PURE__ */ jsxs("span", {
+						style: styles$11.cap,
+						children: [
+							"capped at ",
+							MAX_RENDER_PX,
+							"px"
+						]
+					})]
+				}),
+				/* @__PURE__ */ jsx("span", {
+					style: styles$11.cssVar,
+					children: row.cssVar
+				})
+			]
+		}, row.path))]
+	});
+}
+//#endregion
+//#region src/FontFamilySample.tsx
+const styles$10 = {
+	wrapper: surfaceStyle,
+	caption: captionStyle,
+	row: {
+		display: "grid",
+		gridTemplateColumns: "minmax(160px, 220px) 1fr auto",
+		gap: 16,
+		alignItems: "baseline",
+		padding: "14px 0",
+		borderBottom: BORDER_DEFAULT
+	},
+	meta: {
+		display: "flex",
+		flexDirection: "column",
+		gap: 2,
+		minWidth: 0
+	},
+	path: {
+		fontFamily: MONO_STACK,
+		fontSize: 12,
+		overflow: "hidden",
+		textOverflow: "ellipsis",
+		whiteSpace: "nowrap"
+	},
+	stack: {
+		fontFamily: MONO_STACK,
+		fontSize: 11,
+		color: "var(--sb-color-sys-text-muted, CanvasText)"
+	},
+	sample: {
+		fontSize: 22,
+		lineHeight: 1.2
+	},
+	cssVar: {
+		fontFamily: MONO_STACK,
+		fontSize: 11,
+		color: "var(--sb-color-sys-text-muted, CanvasText)"
+	},
+	empty: emptyStyle
+};
+function stackString(raw) {
+	if (typeof raw === "string") return raw;
+	if (Array.isArray(raw)) return raw.map(String).join(", ");
+	return "";
+}
+function FontFamilySample({ filter = "fontFamily", sample = "The quick brown fox jumps over the lazy dog.", caption }) {
+	const { resolved, activeTheme, cssVarPrefix } = useProject();
+	const rows = useMemo(() => {
+		return Object.entries(resolved).filter(([path, token]) => {
+			if (token.$type !== "fontFamily") return false;
+			return globMatch(path, filter);
+		}).toSorted(([a], [b]) => a.localeCompare(b, void 0, { numeric: true })).map(([path, token]) => ({
+			path,
+			cssVar: makeCssVar(path, cssVarPrefix),
+			stack: stackString(token.$value)
+		}));
+	}, [
+		resolved,
+		filter,
+		cssVarPrefix
+	]);
+	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", {
+		"data-theme": activeTheme,
+		style: styles$10.wrapper,
+		children: /* @__PURE__ */ jsx("div", {
+			style: styles$10.empty,
+			children: "No fontFamily tokens match this filter."
+		})
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		"data-theme": activeTheme,
+		style: styles$10.wrapper,
+		children: [/* @__PURE__ */ jsx("div", {
+			style: styles$10.caption,
+			children: captionText
+		}), rows.map((row) => /* @__PURE__ */ jsxs("div", {
+			style: styles$10.row,
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					style: styles$10.meta,
+					children: [/* @__PURE__ */ jsx("span", {
+						style: styles$10.path,
+						children: row.path
+					}), /* @__PURE__ */ jsx("span", {
+						style: styles$10.stack,
+						children: row.stack
+					})]
+				}),
+				/* @__PURE__ */ jsx("div", {
+					style: {
+						...styles$10.sample,
+						fontFamily: row.cssVar
+					},
+					children: sample
+				}),
+				/* @__PURE__ */ jsx("span", {
+					style: styles$10.cssVar,
+					children: row.cssVar
+				})
+			]
+		}, row.path))]
+	});
+}
+//#endregion
+//#region src/FontWeightScale.tsx
+const styles$9 = {
+	wrapper: surfaceStyle,
+	caption: captionStyle,
+	empty: emptyStyle,
+	row: {
+		display: "grid",
+		gridTemplateColumns: "minmax(160px, 220px) 1fr auto",
+		gap: 16,
+		alignItems: "baseline",
+		padding: "12px 0",
+		borderBottom: BORDER_DEFAULT
+	},
+	meta: {
+		display: "flex",
+		flexDirection: "column",
+		gap: 2,
+		minWidth: 0
+	},
+	path: {
+		fontFamily: MONO_STACK,
+		fontSize: 12,
+		overflow: "hidden",
+		textOverflow: "ellipsis",
+		whiteSpace: "nowrap"
+	},
+	value: {
+		fontFamily: MONO_STACK,
+		fontSize: 11,
+		color: "var(--sb-color-sys-text-muted, CanvasText)"
+	},
+	sample: {
+		fontSize: 28,
+		lineHeight: 1
+	},
+	cssVar: {
+		fontFamily: MONO_STACK,
+		fontSize: 11,
+		color: "var(--sb-color-sys-text-muted, CanvasText)"
+	}
+};
+function toWeight(raw) {
+	if (typeof raw === "number") return raw;
+	if (typeof raw === "string") {
+		const n = Number.parseInt(raw, 10);
+		return Number.isFinite(n) ? n : NaN;
+	}
+	return NaN;
+}
+function FontWeightScale({ filter = "fontWeight", sample = "Aa", caption }) {
+	const { resolved, activeTheme, cssVarPrefix } = useProject();
+	const rows = useMemo(() => {
+		const collected = [];
+		for (const [path, token] of Object.entries(resolved)) {
+			if (token.$type !== "fontWeight") continue;
+			if (!globMatch(path, filter)) continue;
+			collected.push({
+				path,
+				cssVar: makeCssVar(path, cssVarPrefix),
+				display: token.$value == null ? "" : String(token.$value),
+				weight: toWeight(token.$value)
+			});
+		}
+		collected.sort((a, b) => {
+			if (Number.isFinite(a.weight) && Number.isFinite(b.weight)) return a.weight - b.weight;
+			return a.path.localeCompare(b.path, void 0, { numeric: true });
+		});
+		return collected;
+	}, [
+		resolved,
+		filter,
+		cssVarPrefix
+	]);
+	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", {
+		"data-theme": activeTheme,
+		style: styles$9.wrapper,
+		children: /* @__PURE__ */ jsx("div", {
+			style: styles$9.empty,
+			children: "No fontWeight tokens match this filter."
+		})
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		"data-theme": activeTheme,
+		style: styles$9.wrapper,
+		children: [/* @__PURE__ */ jsx("div", {
+			style: styles$9.caption,
+			children: captionText
+		}), rows.map((row) => /* @__PURE__ */ jsxs("div", {
+			style: styles$9.row,
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					style: styles$9.meta,
+					children: [/* @__PURE__ */ jsx("span", {
+						style: styles$9.path,
+						children: row.path
+					}), /* @__PURE__ */ jsx("span", {
+						style: styles$9.value,
+						children: row.display
+					})]
+				}),
+				/* @__PURE__ */ jsx("div", {
+					style: {
+						...styles$9.sample,
+						fontWeight: row.cssVar
+					},
+					children: sample
+				}),
+				/* @__PURE__ */ jsx("span", {
+					style: styles$9.cssVar,
+					children: row.cssVar
+				})
+			]
+		}, row.path))]
+	});
+}
+//#endregion
+//#region src/GradientPalette.tsx
+const styles$8 = {
+	wrapper: surfaceStyle,
+	caption: captionStyle,
+	empty: emptyStyle,
+	row: {
+		display: "grid",
+		gridTemplateColumns: "minmax(180px, 240px) 1fr minmax(140px, 220px)",
+		gap: 16,
+		alignItems: "center",
+		padding: "16px 0",
+		borderBottom: BORDER_DEFAULT
+	},
+	meta: {
+		display: "flex",
+		flexDirection: "column",
+		gap: 2,
+		minWidth: 0
+	},
+	path: {
+		fontFamily: MONO_STACK,
+		fontSize: 12,
+		overflow: "hidden",
+		textOverflow: "ellipsis",
+		whiteSpace: "nowrap"
+	},
+	cssVar: {
+		fontFamily: MONO_STACK,
+		fontSize: 11,
+		opacity: .7
+	},
+	sample: {
+		height: 56,
+		borderRadius: 6,
+		border: BORDER_FAINT
+	},
+	stops: {
+		fontFamily: MONO_STACK,
+		fontSize: 11,
+		display: "flex",
+		flexDirection: "column",
+		gap: 2
+	},
+	stopRow: {
+		display: "flex",
+		alignItems: "center",
+		gap: 8
+	},
+	stopSwatch: {
+		width: 10,
+		height: 10,
+		borderRadius: 2,
+		border: "1px solid var(--sb-color-sys-border-default, rgba(0,0,0,0.1))",
+		flex: "0 0 auto"
+	},
+	stopPosition: { opacity: .6 }
+};
+function asStops(raw) {
+	if (!Array.isArray(raw)) return [];
+	return raw;
+}
+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 stopKey(path, stop, fallback) {
+	return `${path}|${stop.position ?? fallback}|${stopCssColor(stop)}`;
+}
+function GradientPalette({ filter = "gradient", caption }) {
+	const { resolved, activeTheme, cssVarPrefix } = useProject();
+	const rows = useMemo(() => {
+		const collected = [];
+		for (const [path, token] of Object.entries(resolved)) {
+			if (token.$type !== "gradient") continue;
+			if (!globMatch(path, filter)) continue;
+			collected.push({
+				path,
+				cssVar: makeCssVar(path, cssVarPrefix),
+				stops: asStops(token.$value)
+			});
+		}
+		collected.sort((a, b) => a.path.localeCompare(b.path, void 0, { numeric: true }));
+		return collected;
+	}, [
+		resolved,
+		filter,
+		cssVarPrefix
+	]);
+	const captionText = caption ?? `${rows.length} gradient${rows.length === 1 ? "" : "s"}${filter ? ` matching \`${filter}\`` : ""} · ${activeTheme}`;
+	if (rows.length === 0) return /* @__PURE__ */ jsx("div", {
+		"data-theme": activeTheme,
+		style: styles$8.wrapper,
+		children: /* @__PURE__ */ jsx("div", {
+			style: styles$8.empty,
+			children: "No gradient tokens match this filter."
+		})
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		"data-theme": activeTheme,
+		style: styles$8.wrapper,
+		children: [/* @__PURE__ */ jsx("div", {
+			style: styles$8.caption,
+			children: captionText
+		}), rows.map((row) => /* @__PURE__ */ jsxs("div", {
+			style: styles$8.row,
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					style: styles$8.meta,
+					children: [/* @__PURE__ */ jsx("span", {
+						style: styles$8.path,
+						children: row.path
+					}), /* @__PURE__ */ jsx("span", {
+						style: styles$8.cssVar,
+						children: row.cssVar
+					})]
+				}),
+				/* @__PURE__ */ jsx("div", {
+					style: {
+						...styles$8.sample,
+						background: `linear-gradient(to right, ${row.cssVar})`
+					},
+					"aria-hidden": true
+				}),
+				/* @__PURE__ */ jsx("div", {
+					style: styles$8.stops,
+					children: row.stops.map((stop, i) => /* @__PURE__ */ jsxs("div", {
+						style: styles$8.stopRow,
+						children: [
+							/* @__PURE__ */ jsx("span", {
+								style: {
+									...styles$8.stopSwatch,
+									background: stopCssColor(stop)
+								},
+								"aria-hidden": true
+							}),
+							/* @__PURE__ */ jsx("span", { children: stopCssColor(stop) }),
+							/* @__PURE__ */ jsxs("span", {
+								style: styles$8.stopPosition,
+								children: [
+									"@ ",
+									((stop.position ?? 0) * 100).toFixed(0),
+									"%"
+								]
+							})
+						]
+					}, stopKey(row.path, stop, i)))
+				})
+			]
+		}, row.path))]
+	});
+}
+//#endregion
+//#region src/internal/prefers-reduced-motion.ts
+/**
+* Reactive `prefers-reduced-motion: reduce` detector. Returns the current
+* match and updates if the user toggles the OS-level preference.
+*/
+function usePrefersReducedMotion() {
+	const [reduced, setReduced] = useState(false);
+	useEffect(() => {
+		if (typeof window === "undefined") return;
+		const query = window.matchMedia("(prefers-reduced-motion: reduce)");
+		setReduced(query.matches);
+		const onChange = (e) => setReduced(e.matches);
+		query.addEventListener("change", onChange);
+		return () => query.removeEventListener("change", onChange);
+	}, []);
+	return reduced;
+}
+//#endregion
+//#region src/motion-preview/MotionSample.tsx
+const DEFAULT_DURATION_MS = 300;
+const DEFAULT_EASING = "cubic-bezier(0.2, 0, 0, 1)";
+const styles$7 = {
+	track: {
+		position: "relative",
+		height: 36,
+		background: "var(--sb-color-sys-surface-muted, rgba(128,128,128,0.08))",
+		borderRadius: 18,
+		overflow: "hidden"
+	},
+	ball: {
+		position: "absolute",
+		top: "50%",
+		width: 28,
+		height: 28,
+		marginTop: -14,
+		borderRadius: "50%",
+		background: "var(--sb-color-sys-accent-bg, #3b82f6)"
+	},
+	reducedMotion: {
+		fontSize: 11,
+		color: "var(--sb-color-sys-text-muted, CanvasText)",
+		fontStyle: "italic"
+	}
+};
+function extractDurationMs(raw) {
+	if (raw == null) return NaN;
+	if (typeof raw === "object") {
+		const v = raw;
+		if (typeof v.value === "number" && typeof v.unit === "string") {
+			if (v.unit === "ms") return v.value;
+			if (v.unit === "s") return v.value * 1e3;
+		}
+	}
+	return NaN;
+}
+function extractCubicBezier(raw) {
+	if (Array.isArray(raw) && raw.length === 4 && raw.every((n) => typeof n === "number")) return `cubic-bezier(${raw.map((n) => Number(n).toFixed(3)).join(", ")})`;
+	return null;
+}
+function asDuration(raw, themeTokens, fallback) {
+	const direct = extractDurationMs(raw);
+	if (Number.isFinite(direct)) return direct;
+	if (typeof raw === "string") {
+		const match = raw.match(/^\{([^}]+)\}$/);
+		if (match && match[1]) {
+			const referenced = themeTokens[match[1]];
+			const resolved = extractDurationMs(referenced?.$value);
+			if (Number.isFinite(resolved)) return resolved;
+		}
+	}
+	return fallback;
+}
+function asEasing(raw, themeTokens, fallback) {
+	const direct = extractCubicBezier(raw);
+	if (direct) return direct;
+	if (typeof raw === "string") {
+		const match = raw.match(/^\{([^}]+)\}$/);
+		if (match && match[1]) {
+			const referenced = themeTokens[match[1]];
+			const resolved = extractCubicBezier(referenced?.$value);
+			if (resolved) return resolved;
+		}
+	}
+	return fallback;
+}
+function 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 (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$7.reducedMotion,
+		children: "Animation suppressed by `prefers-reduced-motion: reduce`."
+	});
+	return /* @__PURE__ */ jsx("div", {
+		style: styles$7.track,
+		children: /* @__PURE__ */ jsx("div", {
+			style: {
+				...styles$7.ball,
+				left: phase === 1 ? "calc(100% - 32px)" : "4px",
+				transition: `left ${scaledDuration}ms ${easing}`
+			},
+			"aria-hidden": true
+		})
+	});
+}
+//#endregion
+//#region src/MotionPreview.tsx
+const SPEEDS = [
+	.25,
+	.5,
+	1,
+	2
+];
+const styles$6 = {
+	wrapper: surfaceStyle,
+	caption: {
+		padding: "4px 0 4px",
+		color: "var(--sb-color-sys-text-muted, CanvasText)",
+		fontSize: 12
+	},
+	controls: {
+		display: "flex",
+		alignItems: "center",
+		gap: 8,
+		padding: "8px 0 12px"
+	},
+	controlLabel: {
+		fontSize: 11,
+		color: "var(--sb-color-sys-text-muted, CanvasText)",
+		textTransform: "uppercase",
+		letterSpacing: .5
+	},
+	speedBtn: {
+		fontFamily: MONO_STACK,
+		fontSize: 11,
+		padding: "4px 8px",
+		background: "transparent",
+		color: "inherit",
+		border: "1px solid var(--sb-color-sys-border-default, rgba(128,128,128,0.3))",
+		borderRadius: 4,
+		cursor: "pointer"
+	},
+	speedBtnActive: {
+		background: "var(--sb-color-sys-accent-bg, #3b82f6)",
+		color: "var(--sb-color-sys-accent-fg, #fff)",
+		borderColor: "transparent"
+	},
+	replayBtn: {
+		fontSize: 11,
+		padding: "4px 10px",
+		marginLeft: "auto",
+		background: "transparent",
+		color: "inherit",
+		border: "1px solid var(--sb-color-sys-border-default, rgba(128,128,128,0.3))",
+		borderRadius: 4,
+		cursor: "pointer"
+	},
+	row: {
+		display: "grid",
+		gridTemplateColumns: "minmax(180px, 240px) 1fr auto",
+		gap: 16,
+		alignItems: "center",
+		padding: "14px 0",
+		borderBottom: BORDER_DEFAULT
+	},
+	meta: {
+		display: "flex",
+		flexDirection: "column",
+		gap: 2,
+		minWidth: 0
+	},
+	path: {
+		fontFamily: MONO_STACK,
+		fontSize: 12,
+		overflow: "hidden",
+		textOverflow: "ellipsis",
+		whiteSpace: "nowrap"
+	},
+	specs: {
+		fontFamily: MONO_STACK,
+		fontSize: 11,
+		color: "var(--sb-color-sys-text-muted, CanvasText)"
+	},
+	cssVar: {
+		fontFamily: MONO_STACK,
+		fontSize: 11,
+		color: "var(--sb-color-sys-text-muted, CanvasText)",
+		whiteSpace: "nowrap"
+	},
+	empty: {
+		padding: "24px 12px",
+		textAlign: "center",
+		color: "var(--sb-color-sys-text-muted, CanvasText)"
+	}
+};
+function formatSpec(row) {
+	switch (row.kind) {
+		case "transition": return `transition · ${Math.round(row.durationMs)}ms · ${row.easing}`;
+		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 });
+		});
+		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", {
+		"data-theme": activeTheme,
+		style: styles$6.wrapper,
+		children: /* @__PURE__ */ jsx("div", {
+			style: styles$6.empty,
+			children: "No motion tokens match this filter."
+		})
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		"data-theme": activeTheme,
+		style: styles$6.wrapper,
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				style: styles$6.caption,
+				children: captionText
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				style: styles$6.controls,
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						style: styles$6.controlLabel,
+						children: "Speed"
+					}),
+					SPEEDS.map((s) => /* @__PURE__ */ jsxs("button", {
+						type: "button",
+						style: {
+							...styles$6.speedBtn,
+							...s === speed ? styles$6.speedBtnActive : {}
+						},
+						onClick: () => setSpeed(s),
+						children: [s, "×"]
+					}, s)),
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						style: styles$6.replayBtn,
+						onClick: () => setRun((n) => n + 1),
+						disabled: reducedMotion,
+						title: reducedMotion ? "Disabled by prefers-reduced-motion" : "Replay all",
+						children: "↻ Replay"
+					})
+				]
+			}),
+			rows.map((row) => /* @__PURE__ */ jsxs("div", {
+				style: styles$6.row,
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						style: styles$6.meta,
+						children: [/* @__PURE__ */ jsx("span", {
+							style: styles$6.path,
+							children: row.path
+						}), /* @__PURE__ */ jsx("span", {
+							style: styles$6.specs,
+							children: formatSpec(row)
+						})]
+					}),
+					/* @__PURE__ */ jsx(MotionSample, {
+						path: row.path,
+						speed,
+						runKey: run
+					}),
+					/* @__PURE__ */ jsx("span", {
+						style: styles$6.cssVar,
+						children: row.cssVar
+					})
+				]
+			}, row.path))
+		]
+	});
+}
+//#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
+	});
+}
+/**
+* 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: "var(--sb-color-sys-surface-raised, #fff)",
+	border: "1px solid var(--sb-color-sys-border-default, rgba(128,128,128,0.15))",
+	borderRadius: 6
+};
+function ShadowSample({ path }) {
+	const { cssVarPrefix } = useProject();
+	const cssVar = makeCssVar(path, cssVarPrefix);
+	return /* @__PURE__ */ jsx("div", {
+		style: {
+			...sampleStyle,
+			boxShadow: cssVar
+		},
+		"aria-hidden": true
+	});
+}
+//#endregion
+//#region src/ShadowPreview.tsx
+const styles$5 = {
+	wrapper: surfaceStyle,
+	caption: captionStyle,
+	empty: emptyStyle,
+	row: {
+		display: "grid",
+		gridTemplateColumns: "minmax(160px, 220px) 140px 1fr",
+		gap: 16,
+		alignItems: "center",
+		padding: "16px 0",
+		borderBottom: BORDER_DEFAULT
+	},
+	meta: {
+		display: "flex",
+		flexDirection: "column",
+		gap: 2,
+		minWidth: 0
+	},
+	path: {
+		fontFamily: MONO_STACK,
+		fontSize: 12,
+		overflow: "hidden",
+		textOverflow: "ellipsis",
+		whiteSpace: "nowrap"
+	},
+	cssVar: {
+		fontFamily: MONO_STACK,
+		fontSize: 11,
+		opacity: .7
+	},
+	sampleCell: {
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "center",
+		height: 96
+	},
+	breakdown: {
+		fontFamily: MONO_STACK,
+		fontSize: 11,
+		display: "grid",
+		gridTemplateColumns: "auto 1fr",
+		columnGap: 12,
+		rowGap: 2
+	},
+	breakdownKey: { color: "var(--sb-color-sys-text-muted, CanvasText)" },
+	layerHeader: {
+		fontSize: 10,
+		textTransform: "uppercase",
+		letterSpacing: .5,
+		color: "var(--sb-color-sys-text-muted, CanvasText)",
+		marginTop: 6
+	}
+};
+function formatDimension(raw) {
+	if (raw == null) return "—";
+	if (typeof raw === "number") return String(raw);
+	if (typeof raw === "string") return raw;
+	if (typeof raw === "object") {
+		const v = raw;
+		if (typeof v.value === "number" && typeof v.unit === "string") return `${v.value}${v.unit}`;
+	}
+	return JSON.stringify(raw);
+}
+function formatColor$1(raw) {
+	if (raw == null) return "—";
+	if (typeof raw === "string") return raw;
+	if (typeof raw === "object") {
+		const v = raw;
+		if (Array.isArray(v.components) && typeof v.colorSpace === "string") {
+			const parts = v.components.map((c) => typeof c === "number" ? c.toFixed(3) : String(c));
+			const alpha = typeof v.alpha === "number" && v.alpha !== 1 ? `, ${v.alpha}` : "";
+			return `${v.colorSpace}(${parts.join(" ")}${alpha})`;
+		}
+	}
+	return JSON.stringify(raw);
+}
+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 = "shadow", caption }) {
+	const { resolved, activeTheme, cssVarPrefix } = useProject();
+	const rows = useMemo(() => {
+		const collected = [];
+		for (const [path, token] of Object.entries(resolved)) {
+			if (token.$type !== "shadow") continue;
+			if (!globMatch(path, filter)) continue;
+			collected.push({
+				path,
+				cssVar: makeCssVar(path, cssVarPrefix),
+				layers: asLayers(token.$value)
+			});
+		}
+		collected.sort((a, b) => a.path.localeCompare(b.path, void 0, { numeric: true }));
+		return collected;
+	}, [
+		resolved,
+		filter,
+		cssVarPrefix
+	]);
+	const captionText = caption ?? `${rows.length} shadow${rows.length === 1 ? "" : "s"}${filter ? ` matching \`${filter}\`` : ""} · ${activeTheme}`;
+	if (rows.length === 0) return /* @__PURE__ */ jsx("div", {
+		"data-theme": activeTheme,
+		style: styles$5.wrapper,
+		children: /* @__PURE__ */ jsx("div", {
+			style: styles$5.empty,
+			children: "No shadow tokens match this filter."
+		})
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		"data-theme": activeTheme,
+		style: styles$5.wrapper,
+		children: [/* @__PURE__ */ jsx("div", {
+			style: styles$5.caption,
+			children: captionText
+		}), rows.map((row) => /* @__PURE__ */ jsxs("div", {
+			style: styles$5.row,
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					style: styles$5.meta,
+					children: [/* @__PURE__ */ jsx("span", {
+						style: styles$5.path,
+						children: row.path
+					}), /* @__PURE__ */ jsx("span", {
+						style: styles$5.cssVar,
+						children: row.cssVar
+					})]
+				}),
+				/* @__PURE__ */ jsx("div", {
+					style: styles$5.sampleCell,
+					children: /* @__PURE__ */ jsx(ShadowSample, { path: row.path })
+				}),
+				/* @__PURE__ */ jsx("div", {
+					style: styles$5.breakdown,
+					children: row.layers.length === 1 ? renderLayer(row.layers[0]) : row.layers.map((layer, i) => /* @__PURE__ */ jsx(Layer, {
+						layer,
+						index: i,
+						total: row.layers.length
+					}, layerKey(row.path, layer, i)))
+				})
+			]
+		}, row.path))]
+	});
+}
+function renderLayer(layer) {
+	if (!layer) return [];
+	const entries = [
+		["offset", `${formatDimension(layer.offsetX)} ${formatDimension(layer.offsetY)}`],
+		["blur", formatDimension(layer.blur)],
+		["spread", formatDimension(layer.spread)],
+		["color", formatColor$1(layer.color)]
+	];
+	if (layer.inset) entries.push(["inset", String(layer.inset)]);
+	return entries.flatMap(([k, v]) => [/* @__PURE__ */ jsx("span", {
+		style: styles$5.breakdownKey,
+		children: k
+	}, `k-${k}`), /* @__PURE__ */ jsx("span", { children: v }, `v-${k}`)]);
+}
+function Layer({ layer, index, total }) {
+	return /* @__PURE__ */ jsxs("div", {
+		style: { gridColumn: "1 / -1" },
+		children: [/* @__PURE__ */ jsxs("div", {
+			style: styles$5.layerHeader,
+			children: [
+				"layer ",
+				index + 1,
+				" of ",
+				total
+			]
+		}), /* @__PURE__ */ jsx("div", {
+			style: {
+				...styles$5.breakdown,
+				marginTop: 2
+			},
+			children: renderLayer(layer)
+		})]
+	});
+}
+//#endregion
+//#region src/StrokeStyleSample.tsx
+const STRING_STYLES = new Set([
+	"solid",
+	"dashed",
+	"dotted",
+	"double",
+	"groove",
+	"ridge",
+	"outset",
+	"inset"
+]);
+const styles$4 = {
+	wrapper: surfaceStyle,
+	caption: captionStyle,
+	empty: emptyStyle,
+	row: {
+		display: "grid",
+		gridTemplateColumns: "minmax(160px, 220px) 1fr auto",
+		gap: 16,
+		alignItems: "center",
+		padding: "14px 0",
+		borderBottom: BORDER_DEFAULT
+	},
+	meta: {
+		display: "flex",
+		flexDirection: "column",
+		gap: 2,
+		minWidth: 0
+	},
+	path: {
+		fontFamily: MONO_STACK,
+		fontSize: 12,
+		overflow: "hidden",
+		textOverflow: "ellipsis",
+		whiteSpace: "nowrap"
+	},
+	value: {
+		fontFamily: MONO_STACK,
+		fontSize: 11,
+		color: "var(--sb-color-sys-text-muted, CanvasText)"
+	},
+	line: {
+		height: 0,
+		borderTopWidth: 4,
+		borderTopColor: "var(--sb-color-sys-text-default, CanvasText)",
+		width: "100%"
+	},
+	objectFallback: {
+		fontFamily: MONO_STACK,
+		fontSize: 11,
+		color: "var(--sb-color-sys-text-muted, CanvasText)"
+	},
+	cssVar: {
+		fontFamily: MONO_STACK,
+		fontSize: 11,
+		color: "var(--sb-color-sys-text-muted, CanvasText)"
+	}
+};
+function extractCssStyle(value) {
+	if (typeof value === "string" && STRING_STYLES.has(value)) return value;
+	return null;
+}
+function StrokeStyleSample({ filter = "strokeStyle", caption }) {
+	const { resolved, activeTheme, cssVarPrefix } = useProject();
+	const rows = useMemo(() => {
+		return Object.entries(resolved).filter(([path, token]) => {
+			if (token.$type !== "strokeStyle") return false;
+			return globMatch(path, filter);
+		}).toSorted(([a], [b]) => a.localeCompare(b, void 0, { numeric: true })).map(([path, token]) => ({
+			path,
+			cssVar: makeCssVar(path, cssVarPrefix),
+			displayValue: formatValue(token.$value),
+			cssStyle: extractCssStyle(token.$value)
+		}));
+	}, [
+		resolved,
+		filter,
+		cssVarPrefix
+	]);
+	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", {
+		"data-theme": activeTheme,
+		style: styles$4.wrapper,
+		children: /* @__PURE__ */ jsx("div", {
+			style: styles$4.empty,
+			children: "No strokeStyle tokens match this filter."
+		})
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		"data-theme": activeTheme,
+		style: styles$4.wrapper,
+		children: [/* @__PURE__ */ jsx("div", {
+			style: styles$4.caption,
+			children: captionText
+		}), rows.map((row) => /* @__PURE__ */ jsxs("div", {
+			style: styles$4.row,
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					style: styles$4.meta,
+					children: [/* @__PURE__ */ jsx("span", {
+						style: styles$4.path,
+						children: row.path
+					}), /* @__PURE__ */ jsx("span", {
+						style: styles$4.value,
+						children: row.displayValue
+					})]
+				}),
+				row.cssStyle ? /* @__PURE__ */ jsx("div", {
+					style: {
+						...styles$4.line,
+						borderTopStyle: row.cssStyle
+					},
+					"aria-hidden": true
+				}) : /* @__PURE__ */ jsx("span", {
+					style: styles$4.objectFallback,
+					children: "Object-form (dashArray + lineCap) — no pure CSS `border-style` equivalent."
+				}),
+				/* @__PURE__ */ jsx("span", {
+					style: styles$4.cssVar,
+					children: row.cssVar
+				})
+			]
+		}, row.path))]
+	});
+}
+//#endregion
+//#region src/token-detail/styles.ts
+const styles$3 = {
+	wrapper: {
+		...surfaceStyle,
+		padding: 16,
+		border: BORDER_DEFAULT
+	},
+	heading: {
+		margin: 0,
+		fontFamily: MONO_STACK,
+		fontSize: 16
+	},
+	subline: {
+		display: "flex",
+		alignItems: "center",
+		gap: 8,
+		margin: "4px 0 12px",
+		fontSize: 12,
+		opacity: .8
+	},
+	typePill: {
+		display: "inline-block",
+		padding: "2px 6px",
+		borderRadius: 4,
+		fontSize: 10,
+		letterSpacing: .5,
+		textTransform: "uppercase",
+		background: "var(--sb-color-sys-surface-muted, rgba(128,128,128,0.15))"
+	},
+	description: {
+		margin: "0 0 12px",
+		opacity: .85
+	},
+	sectionHeader: {
+		fontFamily: MONO_STACK,
+		fontSize: 11,
+		textTransform: "uppercase",
+		letterSpacing: .5,
+		opacity: .6,
+		margin: "12px 0 6px"
+	},
+	chain: {
+		display: "flex",
+		flexWrap: "wrap",
+		gap: 6,
+		alignItems: "center",
+		fontFamily: MONO_STACK,
+		fontSize: 12
+	},
+	chainNode: {
+		padding: "2px 6px",
+		borderRadius: 4,
+		border: BORDER_DEFAULT
+	},
+	arrow: { opacity: .5 },
+	themeTable: {
+		width: "100%",
+		borderCollapse: "collapse",
+		tableLayout: "fixed",
+		fontSize: 12
+	},
+	themeRow: { borderBottom: BORDER_FAINT },
+	themeCell: {
+		padding: "6px 8px",
+		verticalAlign: "middle"
+	},
+	swatch: {
+		display: "inline-block",
+		width: 14,
+		height: 14,
+		verticalAlign: "middle",
+		marginRight: 6,
+		borderRadius: 3,
+		border: "1px solid var(--sb-color-sys-border-default, rgba(0,0,0,0.1))"
+	},
+	snippet: {
+		display: "block",
+		padding: "8px 10px",
+		borderRadius: 4,
+		background: "var(--sb-color-sys-surface-muted, rgba(128,128,128,0.1))",
+		fontFamily: MONO_STACK,
+		fontSize: 12,
+		whiteSpace: "pre",
+		overflow: "auto"
+	},
+	missing: {
+		padding: 12,
+		opacity: .7
+	},
+	typographySample: { padding: "8px 0" },
+	shadowSample: {
+		width: 140,
+		height: 56,
+		background: "var(--sb-color-sys-surface-raised, #fff)",
+		border: BORDER_FAINT,
+		borderRadius: 6
+	},
+	borderSample: {
+		width: 140,
+		height: 56,
+		background: "var(--sb-color-sys-surface-raised, transparent)",
+		borderRadius: 6
+	},
+	gradientSample: {
+		width: 220,
+		height: 56,
+		borderRadius: 6,
+		border: BORDER_FAINT
+	},
+	strokeStyleLine: {
+		height: 0,
+		borderTopWidth: 4,
+		borderTopColor: "var(--sb-color-sys-text-default, CanvasText)",
+		width: 220
+	},
+	strokeStyleSvg: {
+		width: 220,
+		height: 24,
+		color: "var(--sb-color-sys-text-default, CanvasText)"
+	},
+	strokeStyleFallback: {
+		fontFamily: MONO_STACK,
+		fontSize: 12,
+		color: "var(--sb-color-sys-text-muted, CanvasText)"
+	},
+	colorSwatchRow: {
+		display: "flex",
+		gap: 1,
+		borderRadius: 6,
+		overflow: "hidden",
+		border: BORDER_DEFAULT,
+		width: 220,
+		height: 56
+	},
+	colorSwatchLight: {
+		flex: 1,
+		boxShadow: "inset 0 0 0 8px rgba(255, 255, 255, 0.9)"
+	},
+	colorSwatchDark: {
+		flex: 1,
+		boxShadow: "inset 0 0 0 8px rgba(17, 17, 17, 0.9)"
+	},
+	breakdownSection: {
+		fontFamily: MONO_STACK,
+		fontSize: 12,
+		display: "grid",
+		gridTemplateColumns: "auto 1fr",
+		columnGap: 12,
+		rowGap: 3,
+		marginTop: 6
+	},
+	breakdownKey: { color: "var(--sb-color-sys-text-muted, CanvasText)" },
+	breakdownLayerHeader: {
+		gridColumn: "1 / -1",
+		fontSize: 10,
+		textTransform: "uppercase",
+		letterSpacing: .5,
+		color: "var(--sb-color-sys-text-muted, CanvasText)",
+		marginTop: 4
+	},
+	fontFamilySample: {
+		padding: "4px 0",
+		fontSize: 22,
+		lineHeight: 1.2
+	},
+	fontWeightSample: {
+		padding: "4px 0",
+		fontSize: 32,
+		lineHeight: 1
+	},
+	dimensionTrack: {
+		display: "flex",
+		alignItems: "center",
+		height: 32,
+		maxWidth: "100%",
+		overflow: "hidden"
+	},
+	dimensionBar: {
+		height: 16,
+		background: "var(--sb-color-sys-accent-bg, #3b82f6)",
+		borderRadius: 3,
+		maxWidth: "100%"
+	},
+	motionTrack: {
+		position: "relative",
+		height: 32,
+		width: "100%",
+		maxWidth: 320,
+		background: "var(--sb-color-sys-surface-muted, rgba(128,128,128,0.08))",
+		borderRadius: 16,
+		overflow: "hidden"
+	},
+	motionBall: {
+		position: "absolute",
+		top: "50%",
+		width: 24,
+		height: 24,
+		marginTop: -12,
+		borderRadius: "50%",
+		background: "var(--sb-color-sys-accent-bg, #3b82f6)"
+	},
+	aliasedByList: {
+		listStyle: "none",
+		margin: 0,
+		padding: 0,
+		fontFamily: MONO_STACK,
+		fontSize: 12
+	},
+	aliasedByRow: {
+		padding: "2px 0",
+		display: "flex",
+		alignItems: "center",
+		gap: 6
+	},
+	aliasedByTruncated: {
+		fontSize: 11,
+		opacity: .6,
+		fontStyle: "italic",
+		marginTop: 4
+	},
+	reducedMotion: {
+		fontSize: 11,
+		color: "var(--sb-color-sys-text-muted, CanvasText)",
+		fontStyle: "italic"
+	},
+	tupleIndicator: {
+		fontSize: 11,
+		opacity: .7,
+		margin: "0 0 6px",
+		fontFamily: MONO_STACK
+	},
+	consumerRow: {
+		display: "flex",
+		alignItems: "center",
+		gap: 8,
+		padding: "6px 10px",
+		marginBottom: 4,
+		borderRadius: 4,
+		background: "var(--sb-color-sys-surface-muted, rgba(128,128,128,0.1))"
+	},
+	consumerRowLabel: {
+		fontFamily: MONO_STACK,
+		fontSize: 10,
+		textTransform: "uppercase",
+		letterSpacing: .5,
+		opacity: .6,
+		minWidth: 32,
+		flexShrink: 0
+	},
+	consumerRowValue: {
+		flex: 1,
+		fontFamily: MONO_STACK,
+		fontSize: 12,
+		whiteSpace: "nowrap",
+		overflow: "auto"
+	},
+	consumerRowCopy: {
+		padding: "3px 8px",
+		fontSize: 11,
+		fontFamily: MONO_STACK,
+		background: "var(--sb-color-sys-surface-raised, Canvas)",
+		color: "var(--sb-color-sys-text-default, CanvasText)",
+		border: "1px solid var(--sb-color-sys-border-default, rgba(128,128,128,0.3))",
+		borderRadius: 4,
+		cursor: "pointer",
+		flexShrink: 0
+	}
+};
+//#endregion
+//#region src/token-detail/internal.ts
+function useTokenDetailData(path) {
+	const { activeTheme, activeAxes, axes, themes, themesResolved, resolved, cssVarPrefix } = useProject();
+	const typedResolved = resolved;
+	return {
+		token: typedResolved[path],
+		cssVar: makeCssVar(path, cssVarPrefix),
+		activeTheme,
+		activeAxes,
+		axes,
+		themes,
+		themesResolved,
+		resolved: typedResolved,
+		cssVarPrefix
+	};
+}
+//#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", {
+		style: styles$3.sectionHeader,
+		children: "Alias chain"
+	}), /* @__PURE__ */ jsx("div", {
+		style: styles$3.chain,
+		children: chain.map((step, i) => /* @__PURE__ */ jsxs("span", {
+			style: styles$3.chain,
+			children: [/* @__PURE__ */ jsx("span", {
+				style: styles$3.chainNode,
+				children: step
+			}), i < chain.length - 1 && /* @__PURE__ */ jsx("span", {
+				style: styles$3.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", {
+			style: styles$3.sectionHeader,
+			children: "Aliased by"
+		}),
+		/* @__PURE__ */ jsx("ul", {
+			style: styles$3.aliasedByList,
+			children: tree.map((node) => /* @__PURE__ */ jsx(AliasedByRow, {
+				node,
+				depth: 0
+			}, node.path))
+		}),
+		truncated && /* @__PURE__ */ jsxs("div", {
+			style: styles$3.aliasedByTruncated,
+			children: [
+				"Further descendants truncated at depth ",
+				ALIASED_BY_DEPTH_CAP,
+				"."
+			]
+		})
+	] });
+}
+function AliasedByRow({ node, depth }) {
+	return /* @__PURE__ */ jsxs("li", { children: [/* @__PURE__ */ jsx("div", {
+		style: {
+			...styles$3.aliasedByRow,
+			paddingLeft: depth * 16
+		},
+		children: /* @__PURE__ */ jsx("span", {
+			style: styles$3.chainNode,
+			children: node.path
+		})
+	}), node.children.length > 0 && /* @__PURE__ */ jsx("ul", {
+		style: styles$3.aliasedByList,
+		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/token-detail/AxisVariance.tsx
+function AxisVariance({ path }) {
+	const { token, cssVar, axes, themes, themesResolved, activeAxes } = useTokenDetailData(path);
+	const colorFormat = useColorFormat();
+	const isColor = token?.$type === "color";
+	const formatFn = (t) => valueFor(t, isColor, colorFormat);
+	const variance = useMemo(() => analyzeVariance(path, axes, themes, themesResolved), [
+		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", {
+			style: styles$3.sectionHeader,
+			children: "Values across axes"
+		}), /* @__PURE__ */ jsx("table", {
+			style: styles$3.themeTable,
+			"data-testid": "token-detail-values",
+			children: /* @__PURE__ */ jsx("tbody", { children: /* @__PURE__ */ jsx("tr", {
+				style: styles$3.themeRow,
+				children: /* @__PURE__ */ jsxs("td", {
+					style: styles$3.themeCell,
+					"data-testid": "token-detail-constant",
+					children: [
+						isColor && /* @__PURE__ */ jsx("span", {
+							style: {
+								...styles$3.swatch,
+								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", {
+			style: styles$3.sectionHeader,
+			children: ["Varies with ", axisName]
+		}), /* @__PURE__ */ jsx("table", {
+			style: styles$3.themeTable,
+			"data-testid": "token-detail-values",
+			children: /* @__PURE__ */ jsx("tbody", { children: contextValues.map((row) => /* @__PURE__ */ jsxs("tr", {
+				style: styles$3.themeRow,
+				"data-axis": axisName,
+				"data-context": row.ctx,
+				children: [/* @__PURE__ */ jsx("td", {
+					style: {
+						...styles$3.themeCell,
+						width: "30%"
+					},
+					children: row.ctx
+				}), /* @__PURE__ */ jsxs("td", {
+					style: styles$3.themeCell,
+					children: [isColor && row.themeName && /* @__PURE__ */ jsx("span", {
+						style: {
+							...styles$3.swatch,
+							background: cssVar
+						},
+						"data-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", {
+			style: styles$3.sectionHeader,
+			children: ["Varies with ", variance.varyingAxes.join(" × ")]
+		}),
+		/* @__PURE__ */ jsxs("table", {
+			style: styles$3.themeTable,
+			"data-testid": "token-detail-values",
+			children: [/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", {
+				style: styles$3.themeRow,
+				children: [/* @__PURE__ */ jsxs("th", {
+					style: {
+						...styles$3.themeCell,
+						textAlign: "left",
+						opacity: .7
+					},
+					children: [
+						rowAxis.name,
+						" \\ ",
+						colAxis.name
+					]
+				}), colAxis.contexts.map((col) => /* @__PURE__ */ jsx("th", {
+					style: {
+						...styles$3.themeCell,
+						textAlign: "left",
+						opacity: .7
+					},
+					children: col
+				}, col))]
+			}) }), /* @__PURE__ */ jsx("tbody", { children: rowAxis.contexts.map((row) => /* @__PURE__ */ jsxs("tr", {
+				style: styles$3.themeRow,
+				children: [/* @__PURE__ */ jsx("td", {
+					style: styles$3.themeCell,
+					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", {
+						style: styles$3.themeCell,
+						"data-row": row,
+						"data-col": col,
+						children: [isColor && name && /* @__PURE__ */ jsx("span", {
+							style: {
+								...styles$3.swatch,
+								background: cssVar
+							},
+							"data-theme": name,
+							"aria-hidden": true
+						}), value]
+					}, col);
+				})]
+			}, row)) })]
+		}),
+		extra.length > 0 && /* @__PURE__ */ jsxs("div", {
+			style: {
+				...styles$3.aliasedByTruncated,
+				marginTop: 6
+			},
+			children: [
+				"Values also vary with ",
+				extra.map((a) => a.name).join(", "),
+				"; matrix shows the slice for the active selection."
+			]
+		})
+	] });
+}
+function valueFor(token, isColor, format) {
+	if (!token) return "—";
+	if (isColor) return formatColor(token.$value, format).value;
+	return formatValue(token.$value);
+}
+function themeValue(themesResolved, themeName, path) {
+	const t = themesResolved[themeName]?.[path];
+	return t ? formatValue(t.$value) : "—";
+}
+function tupleName(themes, tuple) {
+	return themes.find((t) => {
+		const input = t.input;
+		return Object.keys(input).every((k) => input[k] === tuple[k]);
+	})?.name;
+}
+function analyzeVariance(path, axes, themes, themesResolved) {
+	const varyingAxes = [];
+	for (const axis of axes) {
+		const byOthers = /* @__PURE__ */ new Map();
+		for (const theme of themes) {
+			const others = axes.filter((a) => a.name !== axis.name).map((a) => `${a.name}=${theme.input[a.name] ?? ""}`).join("|");
+			const ctx = theme.input[axis.name] ?? "";
+			const bucket = byOthers.get(others) ?? /* @__PURE__ */ new Map();
+			bucket.set(ctx, themeValue(themesResolved, theme.name, path));
+			byOthers.set(others, bucket);
+		}
+		let varies = false;
+		for (const bucket of byOthers.values()) if (new Set(bucket.values()).size > 1) {
+			varies = true;
+			break;
+		}
+		if (varies) varyingAxes.push(axis.name);
+	}
+	if (varyingAxes.length === 0) return {
+		kind: "constant",
+		varyingAxes
+	};
+	if (varyingAxes.length === 1) return {
+		kind: "one-axis",
+		varyingAxes
+	};
+	return {
+		kind: "multi-axis",
+		varyingAxes
+	};
+}
+//#endregion
+//#region src/token-detail/CompositeBreakdown.tsx
+function CompositeBreakdown({ path }) {
+	const { token } = useTokenDetailData(path);
+	if (!token) return null;
+	return /* @__PURE__ */ jsx(CompositeBreakdownContent, {
+		type: token.$type,
+		rawValue: token.$value
+	});
+}
+function CompositeBreakdownContent({ type, rawValue }) {
+	if (!rawValue || typeof rawValue !== "object") return null;
+	if (type === "typography") {
+		const v = rawValue;
+		return renderKeyValueList([
+			["fontFamily", formatFontFamily(v["fontFamily"])],
+			["fontSize", formatDimensionValue(v["fontSize"])],
+			["fontWeight", formatPrimitive(v["fontWeight"])],
+			["lineHeight", formatPrimitive(v["lineHeight"])],
+			["letterSpacing", formatDimensionValue(v["letterSpacing"])]
+		]);
+	}
+	if (type === "border") {
+		const v = rawValue;
+		return renderKeyValueList([
+			["color", formatColorValue(v["color"])],
+			["width", formatDimensionValue(v["width"])],
+			["style", formatPrimitive(v["style"])]
+		]);
+	}
+	if (type === "transition") {
+		const v = rawValue;
+		return renderKeyValueList([
+			["duration", formatDimensionValue(v["duration"])],
+			["timingFunction", formatPrimitive(v["timingFunction"])],
+			["delay", formatDimensionValue(v["delay"])]
+		]);
+	}
+	if (type === "shadow") {
+		const layers = Array.isArray(rawValue) ? rawValue : [rawValue];
+		const multi = layers.length > 1;
+		return /* @__PURE__ */ jsx("div", {
+			style: styles$3.breakdownSection,
+			children: layers.map((layer, i) => {
+				const v = layer;
+				return /* @__PURE__ */ jsxs("div", {
+					style: { display: "contents" },
+					children: [
+						multi && /* @__PURE__ */ jsxs("div", {
+							style: styles$3.breakdownLayerHeader,
+							children: ["Layer ", i + 1]
+						}),
+						/* @__PURE__ */ jsx(KeyValueRow, {
+							label: "color",
+							value: formatColorValue(v["color"])
+						}),
+						/* @__PURE__ */ jsx(KeyValueRow, {
+							label: "offsetX",
+							value: formatDimensionValue(v["offsetX"])
+						}),
+						/* @__PURE__ */ jsx(KeyValueRow, {
+							label: "offsetY",
+							value: formatDimensionValue(v["offsetY"])
+						}),
+						/* @__PURE__ */ jsx(KeyValueRow, {
+							label: "blur",
+							value: formatDimensionValue(v["blur"])
+						}),
+						/* @__PURE__ */ jsx(KeyValueRow, {
+							label: "spread",
+							value: formatDimensionValue(v["spread"])
+						}),
+						"inset" in v && /* @__PURE__ */ jsx(KeyValueRow, {
+							label: "inset",
+							value: formatPrimitive(v["inset"])
+						})
+					]
+				}, shadowLayerKey(v, i));
+			})
+		});
+	}
+	if (type === "gradient") {
+		const stops = Array.isArray(rawValue) ? rawValue : [];
+		if (stops.length === 0) return null;
+		return /* @__PURE__ */ jsx("div", {
+			style: styles$3.breakdownSection,
+			children: stops.map((stop, i) => {
+				const v = stop;
+				return /* @__PURE__ */ jsx(KeyValueRow, {
+					label: `${((typeof v["position"] === "number" ? v["position"] : 0) * 100).toFixed(0)}%`,
+					value: formatColorValue(v["color"])
+				}, gradientStopKey(v, i));
+			})
+		});
+	}
+	return null;
+}
+function renderKeyValueList(rows) {
+	return /* @__PURE__ */ jsx("div", {
+		style: styles$3.breakdownSection,
+		children: rows.filter(([, v]) => v !== null).map(([k, v]) => /* @__PURE__ */ jsx(KeyValueRow, {
+			label: k,
+			value: v ?? ""
+		}, k))
+	});
+}
+function KeyValueRow({ label, value }) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+		style: styles$3.breakdownKey,
+		children: label
+	}), /* @__PURE__ */ jsx("span", { children: value ?? "—" })] });
+}
+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);
+}
+function formatColorValue(v) {
+	if (v == null) return null;
+	if (typeof v === "string") return v;
+	if (typeof v === "object") {
+		const c = v;
+		if (Array.isArray(c.components) && typeof c.colorSpace === "string") {
+			const parts = c.components.map((n) => typeof n === "number" ? n.toFixed(3) : String(n));
+			const alpha = typeof c.alpha === "number" && c.alpha !== 1 ? ` / ${c.alpha}` : "";
+			return `${c.colorSpace}(${parts.join(" ")}${alpha})`;
+		}
+	}
+	return JSON.stringify(v);
+}
+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/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", {
+			style: {
+				...styles$3.typographySample,
+				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", {
+		style: {
+			...styles$3.shadowSample,
+			boxShadow: cssVar
+		},
+		"aria-hidden": true
+	});
+	if (type === "border") return /* @__PURE__ */ jsx("div", {
+		style: {
+			...styles$3.borderSample,
+			border: cssVar
+		},
+		"aria-hidden": true
+	});
+	if (type === "transition") return /* @__PURE__ */ jsx(TransitionSample, { transition: cssVar });
+	if (type === "dimension") return /* @__PURE__ */ jsx("div", {
+		style: styles$3.dimensionTrack,
+		children: /* @__PURE__ */ jsx("div", {
+			style: {
+				...styles$3.dimensionBar,
+				width: cssVar
+			},
+			"aria-hidden": true
+		})
+	});
+	if (type === "duration") return /* @__PURE__ */ jsx(TransitionSample, { transition: `left ${cssVar} ease` });
+	if (type === "fontFamily") return /* @__PURE__ */ jsx("div", {
+		style: {
+			...styles$3.fontFamilySample,
+			fontFamily: cssVar
+		},
+		children: PANGRAM
+	});
+	if (type === "fontWeight") return /* @__PURE__ */ jsx("div", {
+		style: {
+			...styles$3.fontWeightSample,
+			fontWeight: cssVar
+		},
+		children: "Aa"
+	});
+	if (type === "cubicBezier") return /* @__PURE__ */ jsx(TransitionSample, { transition: `left 800ms ${cssVar}` });
+	if (type === "gradient") return /* @__PURE__ */ jsx("div", {
+		style: {
+			...styles$3.gradientSample,
+			background: `linear-gradient(to right, ${cssVar})`
+		},
+		"aria-hidden": true
+	});
+	if (type === "strokeStyle") return /* @__PURE__ */ jsx(StrokeStylePreview, { value: rawValue });
+	if (type === "color") return /* @__PURE__ */ jsxs("div", {
+		style: styles$3.colorSwatchRow,
+		"aria-hidden": true,
+		children: [/* @__PURE__ */ jsx("div", { style: {
+			...styles$3.colorSwatchLight,
+			background: cssVar
+		} }), /* @__PURE__ */ jsx("div", { style: {
+			...styles$3.colorSwatchDark,
+			background: cssVar
+		} })]
+	});
+	return null;
+}
+function StrokeStylePreview({ value }) {
+	if (typeof value === "string" && STROKE_STYLE_STRINGS.has(value)) return /* @__PURE__ */ jsx("div", {
+		style: {
+			...styles$3.strokeStyleLine,
+			borderTopStyle: value
+		},
+		"aria-hidden": true
+	});
+	if (value && typeof value === "object" && "dashArray" in value) {
+		const v = value;
+		const lengths = asDashLengths(v.dashArray);
+		if (lengths.length === 0) return /* @__PURE__ */ jsx("div", {
+			style: styles$3.strokeStyleFallback,
+			children: "Object-form strokeStyle with no resolvable dashArray."
+		});
+		const cap = typeof v.lineCap === "string" ? v.lineCap : "butt";
+		return /* @__PURE__ */ jsx("svg", {
+			style: styles$3.strokeStyleSvg,
+			viewBox: "0 0 220 24",
+			preserveAspectRatio: "none",
+			"aria-hidden": true,
+			children: /* @__PURE__ */ jsx("line", {
+				x1: "4",
+				y1: "12",
+				x2: "216",
+				y2: "12",
+				stroke: "currentColor",
+				strokeWidth: "4",
+				strokeDasharray: lengths.join(" "),
+				strokeLinecap: cap
+			})
+		});
+	}
+	return /* @__PURE__ */ jsx("div", {
+		style: styles$3.strokeStyleFallback,
+		children: "strokeStyle value could not be previewed."
+	});
+}
+function asDashLengths(raw) {
+	if (!Array.isArray(raw)) return [];
+	const out = [];
+	for (const entry of raw) {
+		if (typeof entry === "number") {
+			out.push(entry);
+			continue;
+		}
+		if (entry && typeof entry === "object") {
+			const e = entry;
+			if (typeof e.value === "number") out.push(e.value);
+		}
+	}
+	return out;
+}
+function TransitionSample({ transition }) {
+	const reduced = usePrefersReducedMotion();
+	const [phase, setPhase] = useState(0);
+	useEffect(() => {
+		if (reduced) return;
+		const id = requestAnimationFrame(() => setPhase(1));
+		const loop = window.setInterval(() => {
+			setPhase((p) => p === 0 ? 1 : 0);
+		}, 1200);
+		return () => {
+			cancelAnimationFrame(id);
+			window.clearInterval(loop);
+		};
+	}, [reduced]);
+	if (reduced) return /* @__PURE__ */ jsx("div", {
+		style: styles$3.reducedMotion,
+		children: "Animation suppressed by `prefers-reduced-motion: reduce`."
+	});
+	return /* @__PURE__ */ jsx("div", {
+		style: styles$3.motionTrack,
+		children: /* @__PURE__ */ jsx("div", {
+			style: {
+				...styles$3.motionBall,
+				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, { children: [
+		/* @__PURE__ */ jsx("div", {
+			style: styles$3.sectionHeader,
+			children: "Consumer output"
+		}),
+		tupleLabel && /* @__PURE__ */ jsxs("div", {
+			style: styles$3.tupleIndicator,
+			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", {
+		style: styles$3.consumerRow,
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				style: styles$3.consumerRowLabel,
+				children: label
+			}),
+			/* @__PURE__ */ jsx("code", {
+				style: styles$3.consumerRowValue,
+				"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",
+		style: styles$3.consumerRowCopy,
+		"data-testid": testId,
+		onClick: () => {
+			copyToClipboard(text).then((ok) => {
+				if (!ok) return;
+				setCopied(true);
+				window.setTimeout(() => setCopied(false), 1200);
+			});
+		},
+		children: copied ? "Copied" : "Copy"
+	});
+}
+async function copyToClipboard(text) {
+	if (typeof navigator === "undefined" || !navigator.clipboard) return false;
+	try {
+		await navigator.clipboard.writeText(text);
+		return true;
+	} catch {
+		return false;
+	}
+}
+//#endregion
+//#region src/token-detail/TokenHeader.tsx
+function TokenHeader({ path, heading }) {
+	const { token, cssVar, activeTheme } = useTokenDetailData(path);
+	if (!token) return /* @__PURE__ */ jsxs("div", {
+		style: styles$3.missing,
+		children: [
+			"Token ",
+			/* @__PURE__ */ jsx("code", { children: path }),
+			" not found in theme ",
+			/* @__PURE__ */ jsx("strong", { children: activeTheme }),
+			"."
+		]
+	});
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx("h3", {
+			style: styles$3.heading,
+			children: heading ?? path
+		}),
+		/* @__PURE__ */ jsxs("div", {
+			style: styles$3.subline,
+			children: [token.$type && /* @__PURE__ */ jsx("span", {
+				style: styles$3.typePill,
+				children: token.$type
+			}), /* @__PURE__ */ jsx("span", { children: cssVar })]
+		}),
+		token.$description && /* @__PURE__ */ jsx("p", {
+			style: styles$3.description,
+			children: token.$description
+		})
+	] });
+}
+//#endregion
+//#region src/token-detail/TokenUsageSnippet.tsx
+function TokenUsageSnippet({ path }) {
+	const { token, cssVar } = useTokenDetailData(path);
+	if (!token) return null;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+		style: styles$3.sectionHeader,
+		children: "Usage"
+	}), /* @__PURE__ */ jsx("code", {
+		style: styles$3.snippet,
+		children: `color: ${cssVar};`
+	})] });
+}
+//#endregion
+//#region src/TokenDetail.tsx
+function TokenDetail({ path, heading }) {
+	const { token, cssVar, activeTheme } = useTokenDetailData(path);
+	const colorFormat = useColorFormat();
+	if (!token) return /* @__PURE__ */ jsx("div", {
+		"data-theme": activeTheme,
+		style: styles$3.wrapper,
+		children: /* @__PURE__ */ jsxs("div", {
+			style: styles$3.missing,
+			children: [
+				"Token ",
+				/* @__PURE__ */ jsx("code", { children: path }),
+				" not found in theme ",
+				/* @__PURE__ */ jsx("strong", { children: activeTheme }),
+				"."
+			]
+		})
+	});
+	const isColor = token.$type === "color";
+	const formatted = isColor ? formatColor(token.$value, colorFormat) : null;
+	const value = formatted ? formatted.value : formatValue(token.$value);
+	const outOfGamut = formatted?.outOfGamut ?? false;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-theme": activeTheme,
+		style: styles$3.wrapper,
+		children: [
+			/* @__PURE__ */ jsx(TokenHeader, {
+				path,
+				...heading !== void 0 && { heading }
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				style: styles$3.sectionHeader,
+				children: ["Resolved value · ", activeTheme]
+			}),
+			/* @__PURE__ */ jsx(CompositePreview, { path }),
+			/* @__PURE__ */ jsx(CompositeBreakdown, { path }),
+			/* @__PURE__ */ jsxs("div", {
+				style: styles$3.chain,
+				children: [
+					isColor && /* @__PURE__ */ jsx("span", {
+						style: {
+							...styles$3.swatch,
+							background: cssVar
+						},
+						"aria-hidden": true
+					}),
+					/* @__PURE__ */ jsx("span", { children: value }),
+					outOfGamut && /* @__PURE__ */ jsx("span", {
+						title: "Out of sRGB gamut for this format",
+						"aria-label": "out of gamut",
+						style: { marginLeft: 6 },
+						children: "⚠"
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx(AliasChain, { path }),
+			/* @__PURE__ */ jsx(AliasedBy, { path }),
+			/* @__PURE__ */ jsx(TokenUsageSnippet, { path }),
+			/* @__PURE__ */ jsx(ConsumerOutput, { path }),
+			/* @__PURE__ */ jsx(AxisVariance, { path })
+		]
+	});
+}
+//#endregion
+//#region src/TokenNavigator.tsx
+const styles$2 = {
+	wrapper: surfaceStyle,
+	caption: {
+		padding: "4px 0 12px",
+		color: "var(--sb-color-sys-text-muted, CanvasText)",
+		fontSize: 12
+	},
+	tree: {
+		listStyle: "none",
+		margin: 0,
+		padding: 0
+	},
+	nested: {
+		listStyle: "none",
+		margin: 0,
+		paddingLeft: 18,
+		borderLeft: BORDER_DEFAULT
+	},
+	groupRow: {
+		display: "flex",
+		alignItems: "center",
+		gap: 6,
+		padding: "4px 6px",
+		borderRadius: 4,
+		cursor: "pointer",
+		userSelect: "none",
+		fontFamily: MONO_STACK,
+		fontSize: 12
+	},
+	leafRow: {
+		display: "flex",
+		alignItems: "center",
+		gap: 8,
+		padding: "4px 6px",
+		borderRadius: 4,
+		cursor: "pointer",
+		fontFamily: MONO_STACK,
+		fontSize: 12
+	},
+	caret: {
+		display: "inline-block",
+		width: 12,
+		textAlign: "center",
+		color: "var(--sb-color-sys-text-muted, CanvasText)"
+	},
+	tail: {
+		fontFamily: MONO_STACK,
+		fontSize: 12
+	},
+	typePill: {
+		display: "inline-block",
+		padding: "1px 6px",
+		borderRadius: 4,
+		fontSize: 10,
+		letterSpacing: .5,
+		textTransform: "uppercase",
+		background: "var(--sb-color-sys-surface-muted, rgba(128,128,128,0.15))"
+	},
+	value: {
+		fontSize: 11,
+		color: "var(--sb-color-sys-text-muted, CanvasText)",
+		marginLeft: "auto",
+		wordBreak: "break-all",
+		maxWidth: "40%",
+		textAlign: "right"
+	},
+	count: {
+		marginLeft: "auto",
+		fontSize: 11,
+		color: "var(--sb-color-sys-text-default, CanvasText)"
+	},
+	colorSwatch: {
+		display: "inline-block",
+		width: 14,
+		height: 14,
+		borderRadius: 3,
+		border: "1px solid var(--sb-color-sys-border-default, rgba(0,0,0,0.1))"
+	},
+	previewBox: {
+		display: "inline-flex",
+		alignItems: "center",
+		justifyContent: "flex-end",
+		marginLeft: "auto"
+	},
+	empty: {
+		padding: "24px 12px",
+		textAlign: "center",
+		color: "var(--sb-color-sys-text-muted, CanvasText)"
+	},
+	backdrop: {
+		position: "fixed",
+		inset: 0,
+		background: "rgba(0,0,0,0.4)",
+		zIndex: 1e4,
+		display: "flex",
+		alignItems: "stretch",
+		justifyContent: "flex-end"
+	},
+	panel: {
+		width: "min(560px, 100%)",
+		height: "100%",
+		overflowY: "auto",
+		background: "var(--sb-color-sys-surface-default, Canvas)",
+		color: "var(--sb-color-sys-text-default, CanvasText)",
+		boxShadow: "-8px 0 24px rgba(0,0,0,0.2)",
+		padding: 16,
+		position: "relative"
+	},
+	closeButton: {
+		position: "absolute",
+		top: 8,
+		right: 8,
+		width: 32,
+		height: 32,
+		borderRadius: 4,
+		border: "1px solid var(--sb-color-sys-border-default, rgba(128,128,128,0.3))",
+		background: "transparent",
+		color: "inherit",
+		cursor: "pointer",
+		fontSize: 16,
+		lineHeight: 1
+	}
+};
+function buildTree(resolved, root) {
+	const rootPrefix = root && root.length > 0 ? `${root}.` : "";
+	const rootSegments = root ? root.split(".") : [];
+	const entries = Object.entries(resolved).filter(([path]) => {
+		if (!root) return true;
+		return path === root || path.startsWith(rootPrefix);
+	});
+	const rootNode = {
+		kind: "group",
+		segment: "",
+		path: "",
+		children: []
+	};
+	for (const [path, token] of entries) {
+		const remainder = root ? path === root ? "" : path.slice(rootPrefix.length) : path;
+		const segments = remainder.length > 0 ? remainder.split(".") : [];
+		let node = rootNode;
+		for (let i = 0; i < segments.length - 1; i += 1) {
+			const seg = segments[i];
+			const prefix = [...rootSegments, ...segments.slice(0, i + 1)].join(".");
+			let child = node.children.find((c) => c.kind === "group" && c.segment === seg);
+			if (!child) {
+				child = {
+					kind: "group",
+					segment: seg,
+					path: prefix,
+					children: []
+				};
+				node.children.push(child);
+			}
+			node = child;
+		}
+		const leafSegment = segments[segments.length - 1];
+		if (leafSegment === void 0) node.children.push({
+			kind: "leaf",
+			segment: root ? rootSegments[rootSegments.length - 1] ?? path : path,
+			path,
+			token
+		});
+		else node.children.push({
+			kind: "leaf",
+			segment: leafSegment,
+			path,
+			token
+		});
+	}
+	sortTree(rootNode);
+	return rootNode.children;
+}
+function sortTree(node) {
+	node.children.sort((a, b) => {
+		if (a.kind !== b.kind) return a.kind === "group" ? -1 : 1;
+		return a.segment.localeCompare(b.segment, void 0, { numeric: true });
+	});
+	for (const c of node.children) if (c.kind === "group") sortTree(c);
+}
+function collectInitialExpanded(nodes, remainingDepth, out) {
+	if (remainingDepth <= 0) return;
+	for (const node of nodes) {
+		if (node.kind !== "group") continue;
+		out.add(node.path);
+		collectInitialExpanded(node.children, remainingDepth - 1, out);
+	}
+}
+function countLeaves(node) {
+	if (node.kind === "leaf") return 1;
+	let n = 0;
+	for (const c of node.children) n += countLeaves(c);
+	return n;
+}
+function TokenNavigator({ root, initiallyExpanded = 1, onSelect }) {
+	const { resolved, activeTheme } = useProject();
+	const tree = useMemo(() => buildTree(resolved, root), [resolved, root]);
+	const initialExpanded = useMemo(() => {
+		const out = /* @__PURE__ */ new Set();
+		collectInitialExpanded(tree, initiallyExpanded, out);
+		return out;
+	}, [tree, initiallyExpanded]);
+	const [expanded, setExpanded] = useState(initialExpanded);
+	useEffect(() => {
+		setExpanded(initialExpanded);
+	}, [initialExpanded]);
+	const [selectedPath, setSelectedPath] = useState(null);
+	const toggle = useCallback((path) => {
+		setExpanded((prev) => {
+			const next = new Set(prev);
+			if (next.has(path)) next.delete(path);
+			else next.add(path);
+			return next;
+		});
+	}, []);
+	const handleLeafClick = useCallback((path) => {
+		if (onSelect) onSelect(path);
+		else setSelectedPath(path);
+	}, [onSelect]);
+	if (tree.length === 0) return /* @__PURE__ */ jsx("div", {
+		"data-theme": activeTheme,
+		style: styles$2.wrapper,
+		children: /* @__PURE__ */ jsx("div", {
+			style: styles$2.empty,
+			children: root ? `No tokens under "${root}".` : "No tokens in the active theme."
+		})
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		"data-theme": activeTheme,
+		style: styles$2.wrapper,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				style: styles$2.caption,
+				children: [
+					root ? `Tokens under ${root}` : "Token graph",
+					" · ",
+					activeTheme
+				]
+			}),
+			/* @__PURE__ */ jsx("ul", {
+				style: styles$2.tree,
+				role: "tree",
+				children: tree.map((node) => /* @__PURE__ */ jsx(TreeNodeRow, {
+					node,
+					expanded,
+					onToggle: toggle,
+					onLeafClick: handleLeafClick
+				}, node.path || node.segment))
+			}),
+			selectedPath !== null && /* @__PURE__ */ jsx(DetailOverlay, {
+				path: selectedPath,
+				onClose: () => setSelectedPath(null)
+			})
+		]
+	});
+}
+function TreeNodeRow({ node, expanded, onToggle, onLeafClick }) {
+	if (node.kind === "leaf") return /* @__PURE__ */ jsx(LeafRow, {
+		node,
+		onLeafClick
+	});
+	const isOpen = expanded.has(node.path);
+	const onKey = (e) => {
+		if (e.key === "Enter" || e.key === " ") {
+			e.preventDefault();
+			onToggle(node.path);
+		}
+	};
+	return /* @__PURE__ */ jsxs("li", {
+		role: "treeitem",
+		"aria-expanded": isOpen,
+		children: [/* @__PURE__ */ jsxs("div", {
+			role: "button",
+			tabIndex: 0,
+			style: styles$2.groupRow,
+			onClick: () => onToggle(node.path),
+			onKeyDown: onKey,
+			"data-path": node.path,
+			"data-testid": "token-navigator-group",
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					style: styles$2.caret,
+					"aria-hidden": true,
+					children: isOpen ? "▾" : "▸"
+				}),
+				/* @__PURE__ */ jsx("span", { children: node.segment }),
+				/* @__PURE__ */ jsx("span", {
+					style: styles$2.count,
+					children: countLeaves(node)
+				})
+			]
+		}), isOpen && /* @__PURE__ */ jsx("ul", {
+			style: styles$2.nested,
+			role: "group",
+			children: node.children.map((c) => /* @__PURE__ */ jsx(TreeNodeRow, {
+				node: c,
+				expanded,
+				onToggle,
+				onLeafClick
+			}, c.path || c.segment))
+		})]
+	});
+}
+function LeafRow({ node, onLeafClick }) {
+	const onKey = (e) => {
+		if (e.key === "Enter" || e.key === " ") {
+			e.preventDefault();
+			onLeafClick(node.path);
+		}
+	};
+	const type = node.token.$type ?? "";
+	return /* @__PURE__ */ jsx("li", {
+		role: "treeitem",
+		children: /* @__PURE__ */ jsxs("div", {
+			role: "button",
+			tabIndex: 0,
+			style: styles$2.leafRow,
+			onClick: () => onLeafClick(node.path),
+			onKeyDown: onKey,
+			"data-path": node.path,
+			"data-testid": "token-navigator-leaf",
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					style: styles$2.caret,
+					"aria-hidden": true,
+					children: "•"
+				}),
+				/* @__PURE__ */ jsx("span", {
+					style: styles$2.tail,
+					children: node.segment
+				}),
+				type && /* @__PURE__ */ jsx("span", {
+					style: styles$2.typePill,
+					children: type
+				}),
+				/* @__PURE__ */ jsx(LeafPreview, {
+					path: node.path,
+					token: node.token
+				})
+			]
+		})
+	});
+}
+function LeafPreview({ path, token }) {
+	const { cssVarPrefix } = useProject();
+	const colorFormat = useColorFormat();
+	const type = token.$type;
+	if (type === "color") {
+		const cssVar = makeCssVar(path, cssVarPrefix);
+		const formatted = formatColor(token.$value, colorFormat);
+		return /* @__PURE__ */ jsxs("span", {
+			style: styles$2.previewBox,
+			children: [/* @__PURE__ */ jsx("span", {
+				style: styles$2.value,
+				children: formatted?.value ?? formatValue(token.$value)
+			}), /* @__PURE__ */ jsx("span", {
+				style: {
+					...styles$2.colorSwatch,
+					background: cssVar,
+					marginLeft: 8
+				},
+				"aria-hidden": true
+			})]
+		});
+	}
+	if (type === "dimension") return /* @__PURE__ */ jsxs("span", {
+		style: styles$2.previewBox,
+		children: [/* @__PURE__ */ jsx("span", {
+			style: styles$2.value,
+			children: formatValue(token.$value)
+		}), /* @__PURE__ */ jsx("span", {
+			style: {
+				marginLeft: 8,
+				display: "inline-block",
+				minWidth: 40,
+				maxWidth: 120
+			},
+			children: /* @__PURE__ */ jsx(DimensionBar, {
+				path,
+				kind: "length"
+			})
+		})]
+	});
+	if (type === "shadow") return /* @__PURE__ */ jsx("span", {
+		style: styles$2.previewBox,
+		children: /* @__PURE__ */ jsx("span", {
+			style: {
+				marginLeft: 8,
+				display: "inline-block",
+				transform: "scale(0.5)",
+				transformOrigin: "right center"
+			},
+			children: /* @__PURE__ */ jsx(ShadowSample, { path })
+		})
+	});
+	if (type === "border") return /* @__PURE__ */ jsx("span", {
+		style: styles$2.previewBox,
+		children: /* @__PURE__ */ jsx("span", {
+			style: {
+				marginLeft: 8,
+				display: "inline-block",
+				transform: "scale(0.5)",
+				transformOrigin: "right center"
+			},
+			children: /* @__PURE__ */ jsx(BorderSample, { path })
+		})
+	});
+	if (type === "transition" || type === "duration" || type === "cubicBezier") return /* @__PURE__ */ jsx("span", {
+		style: styles$2.previewBox,
+		children: /* @__PURE__ */ jsx("span", {
+			style: {
+				marginLeft: 8,
+				display: "inline-block",
+				width: 80
+			},
+			children: /* @__PURE__ */ jsx(MotionSample, { path })
+		})
+	});
+	return /* @__PURE__ */ jsx("span", {
+		style: styles$2.previewBox,
+		children: /* @__PURE__ */ jsx("span", {
+			style: styles$2.value,
+			children: formatValue(token.$value)
+		})
+	});
+}
+function DetailOverlay({ path, onClose }) {
+	useEffect(() => {
+		const onKey = (e) => {
+			if (e.key === "Escape") onClose();
+		};
+		window.addEventListener("keydown", onKey);
+		return () => window.removeEventListener("keydown", onKey);
+	}, [onClose]);
+	return /* @__PURE__ */ jsx("div", {
+		style: styles$2.backdrop,
+		onClick: onClose,
+		role: "presentation",
+		"data-testid": "token-navigator-overlay",
+		children: /* @__PURE__ */ jsxs("div", {
+			style: styles$2.panel,
+			onClick: (e) => e.stopPropagation(),
+			role: "dialog",
+			"aria-modal": "true",
+			"aria-label": `Token detail for ${path}`,
+			children: [/* @__PURE__ */ jsx("button", {
+				type: "button",
+				style: styles$2.closeButton,
+				onClick: onClose,
+				"aria-label": "Close",
+				"data-testid": "token-navigator-close",
+				children: "×"
+			}), /* @__PURE__ */ jsx(TokenDetail, { path })]
+		})
+	});
+}
+//#endregion
+//#region src/TokenTable.tsx
+const styles$1 = {
+	wrapper: surfaceStyle,
+	empty: emptyStyle,
+	caption: {
+		captionSide: "top",
+		textAlign: "left",
+		padding: "8px 0",
+		opacity: .7,
+		fontSize: 12
+	},
+	table: {
+		width: "100%",
+		borderCollapse: "collapse",
+		tableLayout: "fixed"
+	},
+	th: {
+		textAlign: "left",
+		padding: "8px 12px",
+		fontSize: 11,
+		textTransform: "uppercase",
+		letterSpacing: .5,
+		opacity: .6,
+		borderBottom: "1px solid var(--sb-color-sys-border-default, rgba(128,128,128,0.3))"
+	},
+	td: {
+		padding: "8px 12px",
+		borderBottom: BORDER_FAINT,
+		verticalAlign: "top"
+	},
+	path: {
+		fontFamily: MONO_STACK,
+		fontSize: 12
+	},
+	typePill: {
+		display: "inline-block",
+		padding: "2px 6px",
+		borderRadius: 4,
+		fontSize: 10,
+		letterSpacing: .5,
+		textTransform: "uppercase",
+		background: "var(--sb-color-sys-surface-muted, rgba(128,128,128,0.15))"
+	},
+	value: {
+		fontFamily: MONO_STACK,
+		fontSize: 12,
+		opacity: .85,
+		wordBreak: "break-all"
+	},
+	swatch: {
+		display: "inline-block",
+		width: 14,
+		height: 14,
+		verticalAlign: "middle",
+		marginRight: 6,
+		borderRadius: 3,
+		border: "1px solid var(--sb-color-sys-border-default, rgba(0,0,0,0.1))"
+	}
+};
+function TokenTable({ filter, type, showVar = true, caption }) {
+	const { resolved, activeTheme, cssVarPrefix } = useProject();
+	const colorFormat = useColorFormat();
+	const rows = useMemo(() => {
+		return Object.entries(resolved).filter(([path, token]) => {
+			if (!globMatch(path, filter)) return false;
+			if (type && token.$type !== type) return false;
+			return true;
+		}).toSorted(([a], [b]) => a.localeCompare(b, void 0, { numeric: true })).map(([path, token]) => {
+			const isColor = token.$type === "color";
+			const color = isColor ? formatColor(token.$value, colorFormat) : null;
+			return {
+				path,
+				type: token.$type ?? "",
+				value: color ? color.value : formatValue(token.$value),
+				outOfGamut: color?.outOfGamut ?? false,
+				description: token.$description ?? "",
+				cssVar: makeCssVar(path, cssVarPrefix),
+				isColor
+			};
+		});
+	}, [
+		resolved,
+		filter,
+		type,
+		cssVarPrefix,
+		colorFormat
+	]);
+	const captionText = caption ?? `${rows.length} token${rows.length === 1 ? "" : "s"}${filter ? ` matching \`${filter}\`` : ""}${type ? ` · $type=${type}` : ""} · ${activeTheme}`;
+	if (rows.length === 0) return /* @__PURE__ */ jsx("div", {
+		"data-theme": activeTheme,
+		style: styles$1.wrapper,
+		children: /* @__PURE__ */ jsx("div", {
+			style: styles$1.empty,
+			children: "No tokens match this filter."
+		})
+	});
+	return /* @__PURE__ */ jsx("div", {
+		"data-theme": activeTheme,
+		style: styles$1.wrapper,
+		children: /* @__PURE__ */ jsxs("table", {
+			style: styles$1.table,
+			children: [
+				/* @__PURE__ */ jsx("caption", {
+					style: styles$1.caption,
+					children: captionText
+				}),
+				/* @__PURE__ */ jsxs("colgroup", { children: [
+					/* @__PURE__ */ jsx("col", { style: { width: "30%" } }),
+					/* @__PURE__ */ jsx("col", { style: { width: "8%" } }),
+					/* @__PURE__ */ jsx("col", { style: { width: showVar ? "28%" : "40%" } }),
+					showVar && /* @__PURE__ */ jsx("col", { style: { width: "24%" } }),
+					/* @__PURE__ */ jsx("col", {})
+				] }),
+				/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+					/* @__PURE__ */ jsx("th", {
+						style: styles$1.th,
+						children: "Path"
+					}),
+					/* @__PURE__ */ jsx("th", {
+						style: styles$1.th,
+						children: "Type"
+					}),
+					/* @__PURE__ */ jsx("th", {
+						style: styles$1.th,
+						children: "Value"
+					}),
+					showVar && /* @__PURE__ */ jsx("th", {
+						style: styles$1.th,
+						children: "CSS var"
+					}),
+					/* @__PURE__ */ jsx("th", {
+						style: styles$1.th,
+						children: "Description"
+					})
+				] }) }),
+				/* @__PURE__ */ jsx("tbody", { children: rows.map((row) => /* @__PURE__ */ jsxs("tr", { children: [
+					/* @__PURE__ */ jsx("td", {
+						style: {
+							...styles$1.td,
+							...styles$1.path
+						},
+						children: row.path
+					}),
+					/* @__PURE__ */ jsx("td", {
+						style: styles$1.td,
+						children: row.type && /* @__PURE__ */ jsx("span", {
+							style: styles$1.typePill,
+							children: row.type
+						})
+					}),
+					/* @__PURE__ */ jsxs("td", {
+						style: {
+							...styles$1.td,
+							...styles$1.value
+						},
+						children: [
+							row.isColor && /* @__PURE__ */ jsx("span", {
+								style: {
+									...styles$1.swatch,
+									background: row.cssVar
+								},
+								"aria-hidden": true
+							}),
+							/* @__PURE__ */ jsx("span", { children: row.value }),
+							row.outOfGamut && /* @__PURE__ */ jsx("span", {
+								title: "Out of sRGB gamut for this format",
+								"aria-label": "out of gamut",
+								style: { marginLeft: 6 },
+								children: "⚠"
+							})
+						]
+					}),
+					showVar && /* @__PURE__ */ jsx("td", {
+						style: {
+							...styles$1.td,
+							...styles$1.value
+						},
+						children: row.cssVar
+					}),
+					/* @__PURE__ */ jsx("td", {
+						style: styles$1.td,
+						children: row.description
+					})
+				] }, row.path)) })
+			]
+		})
+	});
+}
+//#endregion
+//#region src/TypographyScale.tsx
+const styles = {
+	wrapper: surfaceStyle,
+	caption: captionStyle,
+	empty: emptyStyle,
+	row: {
+		display: "grid",
+		gridTemplateColumns: "minmax(160px, 220px) 1fr",
+		gap: 16,
+		alignItems: "baseline",
+		padding: "14px 0",
+		borderBottom: BORDER_DEFAULT
+	},
+	meta: {
+		display: "flex",
+		flexDirection: "column",
+		gap: 2
+	},
+	path: {
+		fontFamily: MONO_STACK,
+		fontSize: 12
+	},
+	specs: {
+		fontFamily: MONO_STACK,
+		fontSize: 11,
+		opacity: .7
+	}
+};
+function asDimension(raw) {
+	if (raw == null) return void 0;
+	if (typeof raw === "string" || typeof raw === "number") return String(raw);
+	if (typeof raw === "object") {
+		const v = raw;
+		if ("value" in v && "unit" in v) return `${String(v["value"])}${String(v["unit"])}`;
+	}
+}
+function asFontFamily(raw) {
+	if (typeof raw === "string") return raw;
+	if (Array.isArray(raw)) return raw.map(String).join(", ");
+}
+function buildRow(path, composite) {
+	const fontFamily = asFontFamily(composite["fontFamily"]);
+	const fontSize = asDimension(composite["fontSize"]);
+	const fontWeight = composite["fontWeight"] == null ? void 0 : String(composite["fontWeight"]);
+	const lineHeight = composite["lineHeight"] == null ? void 0 : String(composite["lineHeight"]);
+	const letterSpacing = asDimension(composite["letterSpacing"]);
+	const sampleStyle = {};
+	if (fontFamily) sampleStyle.fontFamily = fontFamily;
+	if (fontSize) sampleStyle.fontSize = fontSize;
+	if (fontWeight) sampleStyle.fontWeight = fontWeight;
+	if (lineHeight) sampleStyle.lineHeight = lineHeight;
+	if (letterSpacing) sampleStyle.letterSpacing = letterSpacing;
+	return {
+		path,
+		sampleStyle,
+		specs: [
+			fontSize,
+			fontWeight ? `w${fontWeight}` : void 0,
+			lineHeight ? `lh ${lineHeight}` : void 0
+		].filter(Boolean).join(" · ")
+	};
+}
+function TypographyScale({ filter = "typography", sample = "The quick brown fox jumps over the lazy dog.", caption }) {
+	const { resolved, activeTheme } = useProject();
+	const rows = useMemo(() => {
+		return Object.entries(resolved).filter(([path, token]) => {
+			if (token.$type !== "typography") return false;
+			return globMatch(path, filter);
+		}).toSorted(([a], [b]) => a.localeCompare(b, void 0, { numeric: true })).map(([path, token]) => {
+			const value = token.$value;
+			if (!value || typeof value !== "object") return {
+				path,
+				sampleStyle: {},
+				specs: ""
+			};
+			return buildRow(path, value);
+		});
+	}, [resolved, filter]);
+	const captionText = caption ?? `${rows.length} typography token${rows.length === 1 ? "" : "s"}${filter && filter !== "typography" ? ` matching \`${filter}\`` : ""} · ${activeTheme}`;
+	if (rows.length === 0) return /* @__PURE__ */ jsx("div", {
+		"data-theme": activeTheme,
+		style: styles.wrapper,
+		children: /* @__PURE__ */ jsx("div", {
+			style: styles.empty,
+			children: "No typography tokens match this filter."
+		})
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		"data-theme": activeTheme,
+		style: styles.wrapper,
+		children: [/* @__PURE__ */ jsx("div", {
+			style: styles.caption,
+			children: captionText
+		}), rows.map((row) => /* @__PURE__ */ jsxs("div", {
+			style: styles.row,
+			children: [/* @__PURE__ */ jsxs("div", {
+				style: styles.meta,
+				children: [/* @__PURE__ */ jsx("span", {
+					style: styles.path,
+					children: row.path
+				}), row.specs && /* @__PURE__ */ jsx("span", {
+					style: styles.specs,
+					children: row.specs
+				})]
+			}), /* @__PURE__ */ jsx("div", {
+				style: row.sampleStyle,
+				children: sample
+			})]
+		}, row.path))]
+	});
+}
+//#endregion
+export { AliasChain, AliasedBy, AxesContext, AxisVariance, BorderPreview, BorderSample, COLOR_FORMATS, ColorFormatContext, ColorPalette, CompositeBreakdown, CompositePreview, ConsumerOutput, DimensionBar, DimensionScale, FontFamilySample, FontWeightScale, GradientPalette, MotionPreview, MotionSample, ShadowPreview, ShadowSample, StrokeStyleSample, SwatchbookContext, SwatchbookProvider, ThemeContext, TokenDetail, TokenHeader, TokenNavigator, TokenTable, TokenUsageSnippet, TypographyScale, formatColor, useActiveAxes, useActiveTheme, useColorFormat, useOptionalSwatchbookData, useSwatchbookData };
+
+//# sourceMappingURL=index.mjs.map