@unpunnyfuns/swatchbook-blocks 0.20.4 → 0.50.0

package/dist/index.mjs

@@ -4,7 +4,7 @@ import { Fragment, createContext, useCallback, useContext, useEffect, useMemo, u
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { makeCSSVar } from "@terrazzo/token-tools/css";
 import { addons } from "storybook/preview-api";
-import { axes, css, cssVarPrefix, defaultTheme, diagnostics, listing, presets, themes, themesResolved } from "virtual:swatchbook/tokens";
+import { axes, css, cssVarPrefix, defaultPermutation, diagnostics, listing, permutations, permutationsResolved, presets } from "virtual:swatchbook/tokens";
 import { fuzzyFilter } from "@unpunnyfuns/swatchbook-core/fuzzy";
 import cx from "clsx";
 import { analyzeAxisVariance } from "@unpunnyfuns/swatchbook-core/variance";
@@ -203,11 +203,9 @@ function EmptyState({ children }) {
 //#endregion
 //#region src/internal/channel-globals.ts
 const AXES_GLOBAL_KEY = "swatchbookAxes";
-const THEME_GLOBAL_KEY = "swatchbookTheme";
 const COLOR_FORMAT_GLOBAL_KEY = "swatchbookColorFormat";
 let snapshot$1 = {
 	axes: null,
-	theme: null,
 	format: null
 };
 const listeners$1 = /* @__PURE__ */ new Set();
@@ -228,11 +226,6 @@ function ensureSubscribed$1() {
 			...next,
 			axes: nextAxes
 		};
-		const nextTheme = globals[THEME_GLOBAL_KEY];
-		if (typeof nextTheme === "string") next = {
-			...next,
-			theme: nextTheme
-		};
 		const nextFormat = globals[COLOR_FORMAT_GLOBAL_KEY];
 		if (isColorFormat(nextFormat)) next = {
 			...next,
@@ -297,13 +290,13 @@ function useOptionalSwatchbookData() {
 * `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);
+const PermutationContext = createContext("");
+function useActivePermutation() {
+	return useContext(PermutationContext);
 }
 /**
 * Active axis tuple for the current story/docs render — `Record<axisName,
-* contextName>`. Derived from the same input as {@link ThemeContext}; split
+* contextName>`. Derived from the same input as {@link PermutationContext}; split
 * out so consumers needing per-axis info (toolbar, panel, tuple-aware
 * blocks) don't have to reparse the composed permutation ID.
 */
@@ -350,9 +343,9 @@ const TOKENS_UPDATED_EVENT = "swatchbook/tokens-updated";
 let snapshot = {
 	axes,
 	presets,
-	themes,
-	defaultTheme,
-	themesResolved,
+	permutations,
+	defaultPermutation,
+	permutationsResolved,
 	diagnostics,
 	css,
 	cssVarPrefix,
@@ -368,9 +361,9 @@ function ensureSubscribed() {
 		snapshot = {
 			axes: payload.axes ?? snapshot.axes,
 			presets: payload.presets ?? snapshot.presets,
-			themes: payload.themes ?? snapshot.themes,
-			defaultTheme: payload.defaultTheme ?? snapshot.defaultTheme,
-			themesResolved: payload.themesResolved ?? snapshot.themesResolved,
+			permutations: payload.permutations ?? snapshot.permutations,
+			defaultPermutation: payload.defaultPermutation ?? snapshot.defaultPermutation,
+			permutationsResolved: payload.permutationsResolved ?? snapshot.permutationsResolved,
 			diagnostics: payload.diagnostics ?? snapshot.diagnostics,
 			css: payload.css ?? snapshot.css,
 			cssVarPrefix: payload.cssVarPrefix ?? snapshot.cssVarPrefix,
@@ -412,9 +405,6 @@ function defaultTuple(axes) {
 	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;
@@ -425,12 +415,12 @@ function nameForTuple(themesList, tuple) {
 }
 function snapshotToData(snapshot) {
 	return {
-		activeTheme: snapshot.activeTheme,
+		activePermutation: snapshot.activePermutation,
 		activeAxes: { ...snapshot.activeAxes },
 		axes: snapshot.axes,
-		themes: snapshot.themes,
-		themesResolved: snapshot.themesResolved,
-		resolved: snapshot.themesResolved[snapshot.activeTheme] ?? {},
+		permutations: snapshot.permutations,
+		permutationsResolved: snapshot.permutationsResolved,
+		resolved: snapshot.permutationsResolved[snapshot.activePermutation] ?? {},
 		diagnostics: snapshot.diagnostics,
 		cssVarPrefix: snapshot.cssVarPrefix,
 		listing: snapshot.listing ?? {}
@@ -454,7 +444,7 @@ function useProject() {
 	return snapshot !== null ? snapshotToData(snapshot) : fallback;
 }
 function useVirtualModuleFallback(enabled) {
-	const contextTheme = useActiveTheme();
+	const contextPermutation = useActivePermutation();
 	const contextAxes = useActiveAxes();
 	const channelGlobals = useChannelGlobals();
 	/**
@@ -470,17 +460,15 @@ function useVirtualModuleFallback(enabled) {
 		ensureStylesheet(tokens.css);
 	}, [enabled, tokens.css]);
 	const activeAxes = Object.keys(contextAxes).length > 0 ? { ...contextAxes } : channelGlobals.axes ?? defaultTuple(tokens.axes);
-	const derivedName = nameForTuple(tokens.themes, activeAxes);
-	const channelTheme = channelGlobals.theme;
-	const fallbackTupleName = channelTheme && tupleForName(tokens.themes, channelTheme) ? channelTheme : null;
-	const activeTheme = contextTheme || derivedName || fallbackTupleName || channelTheme || tokens.defaultTheme || tokens.themes[0]?.name || "";
+	const derivedName = nameForTuple(tokens.permutations, activeAxes);
+	const activePermutation = contextPermutation || derivedName || tokens.defaultPermutation || tokens.permutations[0]?.name || "";
 	return {
-		activeTheme,
+		activePermutation,
 		activeAxes,
 		axes: tokens.axes,
-		themes: tokens.themes,
-		themesResolved: tokens.themesResolved,
-		resolved: tokens.themesResolved[activeTheme] ?? {},
+		permutations: tokens.permutations,
+		permutationsResolved: tokens.permutationsResolved,
+		resolved: tokens.permutationsResolved[activePermutation] ?? {},
 		diagnostics: tokens.diagnostics,
 		cssVarPrefix: tokens.cssVarPrefix,
 		listing: tokens.listing
@@ -742,7 +730,7 @@ function formatSubColor$1(raw, format) {
 }
 function BorderPreview({ filter, caption, sortBy = "path", sortDir = "asc" }) {
 	const project = useProject();
-	const { resolved, activeTheme, cssVarPrefix } = project;
+	const { resolved, activePermutation, cssVarPrefix } = project;
 	const colorFormat = useColorFormat();
 	const rows = useMemo(() => {
 		return sortTokens(Object.entries(resolved).filter(([path, token]) => {
@@ -763,16 +751,16 @@ function BorderPreview({ filter, caption, sortBy = "path", sortDir = "asc" }) {
 		sortBy,
 		sortDir
 	]);
-	const captionText = caption ?? `${rows.length} border${rows.length === 1 ? "" : "s"}${filter ? ` matching \`${filter}\`` : ""} · ${activeTheme}`;
+	const captionText = caption ?? `${rows.length} border${rows.length === 1 ? "" : "s"}${filter ? ` matching \`${filter}\`` : ""} · ${activePermutation}`;
 	if (rows.length === 0) return /* @__PURE__ */ jsx("div", {
-		...themeAttrs(cssVarPrefix, activeTheme),
+		...themeAttrs(cssVarPrefix, activePermutation),
 		children: /* @__PURE__ */ jsx("div", {
 			className: "sb-block__empty",
 			children: "No border tokens match this filter."
 		})
 	});
 	return /* @__PURE__ */ jsxs("div", {
-		...themeAttrs(cssVarPrefix, activeTheme),
+		...themeAttrs(cssVarPrefix, activePermutation),
 		children: [/* @__PURE__ */ jsx("div", {
 			className: "sb-block__caption",
 			children: captionText
@@ -835,7 +823,7 @@ function fixedPrefixLength(filter) {
 }
 function ColorPalette({ filter, groupBy, caption, sortBy = "path", sortDir = "asc" }) {
 	const project = useProject();
-	const { resolved, activeTheme, cssVarPrefix } = project;
+	const { resolved, activePermutation, cssVarPrefix } = project;
 	const colorFormat = useColorFormat();
 	const groups = useMemo(() => {
 		const entries = sortTokens(Object.entries(resolved).filter(([path, token]) => {
@@ -874,16 +862,16 @@ function ColorPalette({ filter, groupBy, caption, sortBy = "path", sortDir = "as
 		sortDir
 	]);
 	const totalCount = groups.reduce((acc, [, swatches]) => acc + swatches.length, 0);
-	const captionText = caption ?? `${totalCount} color${totalCount === 1 ? "" : "s"}${filter ? ` matching \`${filter}\`` : ""} · ${activeTheme}`;
+	const captionText = caption ?? `${totalCount} color${totalCount === 1 ? "" : "s"}${filter ? ` matching \`${filter}\`` : ""} · ${activePermutation}`;
 	if (totalCount === 0) return /* @__PURE__ */ jsx("div", {
-		...themeAttrs(cssVarPrefix, activeTheme),
+		...themeAttrs(cssVarPrefix, activePermutation),
 		children: /* @__PURE__ */ jsx("div", {
 			className: "sb-block__empty",
 			children: "No color tokens match this filter."
 		})
 	});
 	return /* @__PURE__ */ jsxs("div", {
-		...themeAttrs(cssVarPrefix, activeTheme),
+		...themeAttrs(cssVarPrefix, activePermutation),
 		children: [/* @__PURE__ */ jsx("div", {
 			className: "sb-block__caption",
 			children: captionText
@@ -974,7 +962,7 @@ const BASE_LABEL = "base";
 const COLUMN_COUNT = 6;
 function ColorTable({ filter, caption, sortBy = "path", sortDir = "asc", searchable = true, onSelect, variants }) {
 	const project = useProject();
-	const { resolved, activeTheme, cssVarPrefix } = project;
+	const { resolved, activePermutation, cssVarPrefix } = project;
 	const colorFormat = useColorFormat();
 	const [query, setQuery] = useState("");
 	const [selectedByBase, setSelectedByBase] = useState({});
@@ -1061,16 +1049,16 @@ function ColorTable({ filter, caption, sortBy = "path", sortDir = "asc", searcha
 		}));
 	}, []);
 	const matchSuffix = searchable && query.trim() !== "" ? ` · ${visibleGroups.length} matching "${query.trim()}"` : "";
-	const captionText = caption ?? `${totalTokens} color${totalTokens === 1 ? "" : "s"} across ${groups.length} group${groups.length === 1 ? "" : "s"}${filter ? ` matching \`${filter}\`` : ""}${matchSuffix} · ${activeTheme}`;
+	const captionText = caption ?? `${totalTokens} color${totalTokens === 1 ? "" : "s"} across ${groups.length} group${groups.length === 1 ? "" : "s"}${filter ? ` matching \`${filter}\`` : ""}${matchSuffix} · ${activePermutation}`;
 	if (groups.length === 0) return /* @__PURE__ */ jsx("div", {
-		...themeAttrs(cssVarPrefix, activeTheme),
+		...themeAttrs(cssVarPrefix, activePermutation),
 		children: /* @__PURE__ */ jsx("div", {
 			className: "sb-block__empty",
 			children: "No color tokens match this filter."
 		})
 	});
 	return /* @__PURE__ */ jsxs("div", {
-		...themeAttrs(cssVarPrefix, activeTheme),
+		...themeAttrs(cssVarPrefix, activePermutation),
 		children: [searchable && /* @__PURE__ */ jsx("div", {
 			className: "sb-color-table__search",
 			children: /* @__PURE__ */ jsx("input", {
@@ -1492,12 +1480,12 @@ function summaryVariant(diagnostics) {
 * on their own MDX pages.
 */
 function Diagnostics({ caption } = {}) {
-	const { activeTheme, cssVarPrefix, diagnostics } = useProject();
+	const { activePermutation, cssVarPrefix, diagnostics } = useProject();
 	const hasErrorsOrWarnings = diagnostics.some((d) => d.severity === "error" || d.severity === "warn");
 	const headingText = caption ?? `Diagnostics · ${summaryText(diagnostics)}`;
 	const variant = summaryVariant(diagnostics);
 	return /* @__PURE__ */ jsx("div", {
-		...themeAttrs(cssVarPrefix, activeTheme),
+		...themeAttrs(cssVarPrefix, activePermutation),
 		"data-testid": "diagnostics",
 		children: /* @__PURE__ */ jsxs("details", {
 			open: hasErrorsOrWarnings,
@@ -1599,31 +1587,17 @@ function DimensionBar({ path, kind = "length" }) {
 //#endregion
 //#region src/internal/format-token-value.ts
 /**
-* Produce a single-line display string for any DTCG token `$value`,
-* respecting the active color format for color-typed tokens and the
-* color sub-values of composite types (border, shadow, gradient).
-*
-* Shape by type:
-* - `color`              → `formatColor(value, colorFormat)` — e.g. `#3b82f6`, `oklch(...)`, `raw` JSON.
-* - `dimension|duration` → `value + unit` — e.g. `16px`, `200ms`.
-* - `fontFamily`         → string or array joined with `, `.
-* - `fontWeight`         → primitive.
-* - `cubicBezier`        → `cubic-bezier(a, b, c, d)`.
-* - `strokeStyle`        → primitive string, or `dashed · dashArray · lineCap` when it's the object shape.
-* - `shadow`             → one or more `offsetX offsetY blur spread color` layers joined with `, `.
-* - `border`             → `width style color`.
-* - `transition`         → `duration easing [delay]`.
-* - `typography`         → `family / size / line-height / weight`.
-* - `gradient`           → `stops joined with →` — compact representation, not a CSS gradient string (those live in GradientPalette's preview).
-*
-* Unknown object shapes fall through to truncated JSON.
+* Single-line display string for any DTCG token `$value`. Prefers
+* plugin-css's `previewValue` from the Token Listing; for color
+* tokens only when the toolbar format is hex (other formats route
+* through local colorjs.io).
 */
 function formatTokenValue(value, $type, colorFormat, listingEntry) {
 	if (value == null) return "";
 	if (typeof value === "string" || typeof value === "number" || typeof value === "boolean") return String(value);
 	const preview = listingEntry?.previewValue;
 	if (preview !== void 0) {
-		const previewStr = typeof preview === "string" ? preview : String(preview);
+		const previewStr = typeof preview === "string" ? cleanFloatNoise(preview) : String(preview);
 		if ($type !== "color") return previewStr;
 		if (colorFormat === "hex") return previewStr;
 	}
@@ -1641,9 +1615,6 @@ function formatTokenValue(value, $type, colorFormat, listingEntry) {
 		case "strokeStyle": return formatStrokeStyle(value);
 		case "shadow": return formatShadow(value, colorFormat);
 		case "border": return formatBorder(value, colorFormat);
-		case "transition": return formatTransition(value);
-		case "typography": return formatTypography(value);
-		case "gradient": return formatGradient(value, colorFormat);
 		default: return formatUnknown(value);
 	}
 }
@@ -1655,6 +1626,9 @@ function formatDimension$1(v) {
 	}
 	return formatUnknown(v);
 }
+function cleanFloatNoise(s) {
+	return s.replace(/-?\d+\.\d{8,}/g, (m) => `${+Number(m).toFixed(3)}`);
+}
 function formatFontFamily$1(v) {
 	if (typeof v === "string") return v;
 	if (Array.isArray(v)) return v.map(String).join(", ");
@@ -1703,35 +1677,6 @@ function formatBorder(v, colorFormat) {
 		formatColor(b["color"], colorFormat).value
 	].filter((p) => p !== "").join(" ");
 }
-function formatTransition(v) {
-	if (!v || typeof v !== "object") return formatUnknown(v);
-	const t = v;
-	const duration = formatDimension$1(t["duration"]);
-	const easing = formatPrimitive$1(t["timingFunction"]);
-	const delay = formatDimension$1(t["delay"]);
-	const parts = [duration, easing];
-	if (!/^0\D/.test(delay) && delay !== "") parts.push(delay);
-	return parts.filter((p) => p !== "").join(" ");
-}
-function formatTypography(v) {
-	if (!v || typeof v !== "object") return formatUnknown(v);
-	const t = v;
-	return [
-		formatFontFamily$1(t["fontFamily"]),
-		formatDimension$1(t["fontSize"]),
-		formatPrimitive$1(t["lineHeight"]),
-		formatPrimitive$1(t["fontWeight"])
-	].filter((p) => p !== "").join(" / ");
-}
-function formatGradient(v, colorFormat) {
-	if (!Array.isArray(v) || v.length === 0) return formatUnknown(v);
-	return v.map((stop) => {
-		if (!stop || typeof stop !== "object") return formatUnknown(stop);
-		const s = stop;
-		const position = typeof s["position"] === "number" ? `${Math.round(s["position"] * 100)}%` : "?";
-		return `${formatColor(s["color"], colorFormat).value} ${position}`;
-	}).join(" → ");
-}
 function formatUnknown(v) {
 	if (v == null) return "";
 	if (typeof v === "string" || typeof v === "number" || typeof v === "boolean") return String(v);
@@ -1757,7 +1702,7 @@ function toPixels(raw) {
 }
 function DimensionScale({ filter, kind = "length", caption, sortBy = "value", sortDir = "asc" }) {
 	const project = useProject();
-	const { resolved, activeTheme, cssVarPrefix } = project;
+	const { resolved, activePermutation, cssVarPrefix } = project;
 	const rows = useMemo(() => {
 		return sortTokens(Object.entries(resolved).filter(([path, token]) => {
 			if (token.$type !== "dimension") return false;
@@ -1782,16 +1727,16 @@ function DimensionScale({ filter, kind = "length", caption, sortBy = "value", so
 		sortBy,
 		sortDir
 	]);
-	const captionText = caption ?? `${rows.length} dimension${rows.length === 1 ? "" : "s"}${filter ? ` matching \`${filter}\`` : ""} · ${activeTheme}`;
+	const captionText = caption ?? `${rows.length} dimension${rows.length === 1 ? "" : "s"}${filter ? ` matching \`${filter}\`` : ""} · ${activePermutation}`;
 	if (rows.length === 0) return /* @__PURE__ */ jsx("div", {
-		...themeAttrs(cssVarPrefix, activeTheme),
+		...themeAttrs(cssVarPrefix, activePermutation),
 		children: /* @__PURE__ */ jsx("div", {
 			className: "sb-block__empty",
 			children: "No dimension tokens match this filter."
 		})
 	});
 	return /* @__PURE__ */ jsxs("div", {
-		...themeAttrs(cssVarPrefix, activeTheme),
+		...themeAttrs(cssVarPrefix, activePermutation),
 		children: [/* @__PURE__ */ jsx("div", {
 			className: "sb-block__caption",
 			children: captionText
@@ -1839,7 +1784,7 @@ function stackString(raw) {
 }
 function FontFamilySample({ filter, sample = "The quick brown fox jumps over the lazy dog.", caption, sortBy = "path", sortDir = "asc" }) {
 	const project = useProject();
-	const { resolved, activeTheme, cssVarPrefix } = project;
+	const { resolved, activePermutation, cssVarPrefix } = project;
 	const rows = useMemo(() => {
 		return sortTokens(Object.entries(resolved).filter(([path, token]) => {
 			if (token.$type !== "fontFamily") return false;
@@ -1859,16 +1804,16 @@ function FontFamilySample({ filter, sample = "The quick brown fox jumps over the
 		sortBy,
 		sortDir
 	]);
-	const captionText = caption ?? `${rows.length} fontFamily token${rows.length === 1 ? "" : "s"}${filter && filter !== "fontFamily" ? ` matching \`${filter}\`` : ""} · ${activeTheme}`;
+	const captionText = caption ?? `${rows.length} fontFamily token${rows.length === 1 ? "" : "s"}${filter && filter !== "fontFamily" ? ` matching \`${filter}\`` : ""} · ${activePermutation}`;
 	if (rows.length === 0) return /* @__PURE__ */ jsx("div", {
-		...themeAttrs(cssVarPrefix, activeTheme),
+		...themeAttrs(cssVarPrefix, activePermutation),
 		children: /* @__PURE__ */ jsx("div", {
 			className: "sb-block__empty",
 			children: "No fontFamily tokens match this filter."
 		})
 	});
 	return /* @__PURE__ */ jsxs("div", {
-		...themeAttrs(cssVarPrefix, activeTheme),
+		...themeAttrs(cssVarPrefix, activePermutation),
 		children: [/* @__PURE__ */ jsx("div", {
 			className: "sb-block__caption",
 			children: captionText
@@ -1910,7 +1855,7 @@ function toWeight(raw) {
 }
 function FontWeightScale({ filter, sample = "Aa", caption, sortBy = "value", sortDir = "asc" }) {
 	const project = useProject();
-	const { resolved, activeTheme, cssVarPrefix } = project;
+	const { resolved, activePermutation, cssVarPrefix } = project;
 	const rows = useMemo(() => {
 		return sortTokens(Object.entries(resolved).filter(([path, token]) => {
 			if (token.$type !== "fontWeight") return false;
@@ -1931,16 +1876,16 @@ function FontWeightScale({ filter, sample = "Aa", caption, sortBy = "value", sor
 		sortBy,
 		sortDir
 	]);
-	const captionText = caption ?? `${rows.length} fontWeight token${rows.length === 1 ? "" : "s"}${filter && filter !== "fontWeight" ? ` matching \`${filter}\`` : ""} · ${activeTheme}`;
+	const captionText = caption ?? `${rows.length} fontWeight token${rows.length === 1 ? "" : "s"}${filter && filter !== "fontWeight" ? ` matching \`${filter}\`` : ""} · ${activePermutation}`;
 	if (rows.length === 0) return /* @__PURE__ */ jsx("div", {
-		...themeAttrs(cssVarPrefix, activeTheme),
+		...themeAttrs(cssVarPrefix, activePermutation),
 		children: /* @__PURE__ */ jsx("div", {
 			className: "sb-block__empty",
 			children: "No fontWeight tokens match this filter."
 		})
 	});
 	return /* @__PURE__ */ jsxs("div", {
-		...themeAttrs(cssVarPrefix, activeTheme),
+		...themeAttrs(cssVarPrefix, activePermutation),
 		children: [/* @__PURE__ */ jsx("div", {
 			className: "sb-block__caption",
 			children: captionText
@@ -1990,7 +1935,7 @@ function stopKey(path, stop, fallback) {
 }
 function GradientPalette({ filter, caption, sortBy = "path", sortDir = "asc" }) {
 	const project = useProject();
-	const { resolved, activeTheme, cssVarPrefix } = project;
+	const { resolved, activePermutation, cssVarPrefix } = project;
 	const colorFormat = useColorFormat();
 	const rows = useMemo(() => {
 		return sortTokens(Object.entries(resolved).filter(([path, token]) => {
@@ -2011,16 +1956,16 @@ function GradientPalette({ filter, caption, sortBy = "path", sortDir = "asc" })
 		sortBy,
 		sortDir
 	]);
-	const captionText = caption ?? `${rows.length} gradient${rows.length === 1 ? "" : "s"}${filter ? ` matching \`${filter}\`` : ""} · ${activeTheme}`;
+	const captionText = caption ?? `${rows.length} gradient${rows.length === 1 ? "" : "s"}${filter ? ` matching \`${filter}\`` : ""} · ${activePermutation}`;
 	if (rows.length === 0) return /* @__PURE__ */ jsx("div", {
-		...themeAttrs(cssVarPrefix, activeTheme),
+		...themeAttrs(cssVarPrefix, activePermutation),
 		children: /* @__PURE__ */ jsx("div", {
 			className: "sb-block__empty",
 			children: "No gradient tokens match this filter."
 		})
 	});
 	return /* @__PURE__ */ jsxs("div", {
-		...themeAttrs(cssVarPrefix, activeTheme),
+		...themeAttrs(cssVarPrefix, activePermutation),
 		children: [/* @__PURE__ */ jsx("div", {
 			className: "sb-block__caption",
 			children: captionText
@@ -2257,7 +2202,7 @@ function formatSpec(row) {
 }
 function MotionPreview({ filter, caption }) {
 	const project = useProject();
-	const { resolved, activeTheme, cssVarPrefix } = project;
+	const { resolved, activePermutation, cssVarPrefix } = project;
 	const [speed, setSpeed] = useState(1);
 	const [run, setRun] = useState(0);
 	const reducedMotion = usePrefersReducedMotion();
@@ -2292,16 +2237,16 @@ function MotionPreview({ filter, caption }) {
 		filter,
 		project
 	]);
-	const captionText = caption ?? `${rows.length} motion token${rows.length === 1 ? "" : "s"}${filter ? ` matching \`${filter}\`` : ""} · ${activeTheme}`;
+	const captionText = caption ?? `${rows.length} motion token${rows.length === 1 ? "" : "s"}${filter ? ` matching \`${filter}\`` : ""} · ${activePermutation}`;
 	if (rows.length === 0) return /* @__PURE__ */ jsx("div", {
-		...themeAttrs(cssVarPrefix, activeTheme),
+		...themeAttrs(cssVarPrefix, activePermutation),
 		children: /* @__PURE__ */ jsx("div", {
 			className: "sb-block__empty",
 			children: "No motion tokens match this filter."
 		})
 	});
 	return /* @__PURE__ */ jsxs("div", {
-		...themeAttrs(cssVarPrefix, activeTheme),
+		...themeAttrs(cssVarPrefix, activePermutation),
 		children: [
 			/* @__PURE__ */ jsx("div", {
 				className: "sb-block__caption",
@@ -2375,7 +2320,7 @@ function toOpacity(raw) {
 */
 function OpacityScale({ filter, type = "number", sampleColor = "color.accent.bg", caption, sortBy = "value", sortDir = "asc" }) {
 	const project = useProject();
-	const { resolved, activeTheme, cssVarPrefix } = project;
+	const { resolved, activePermutation, cssVarPrefix } = project;
 	const rows = useMemo(() => {
 		return sortTokens(Object.entries(resolved).filter(([path, token]) => {
 			if (token.$type !== type) return false;
@@ -2402,9 +2347,9 @@ function OpacityScale({ filter, type = "number", sampleColor = "color.accent.bg"
 		sortBy,
 		sortDir
 	]);
-	const captionText = caption ?? `${rows.length} opacity token${rows.length === 1 ? "" : "s"}${filter ? ` matching \`${filter}\`` : ""} · ${activeTheme}`;
+	const captionText = caption ?? `${rows.length} opacity token${rows.length === 1 ? "" : "s"}${filter ? ` matching \`${filter}\`` : ""} · ${activePermutation}`;
 	if (rows.length === 0) return /* @__PURE__ */ jsx("div", {
-		...themeAttrs(cssVarPrefix, activeTheme),
+		...themeAttrs(cssVarPrefix, activePermutation),
 		children: /* @__PURE__ */ jsx("div", {
 			className: "sb-block__empty",
 			children: "No opacity tokens match this filter."
@@ -2412,7 +2357,7 @@ function OpacityScale({ filter, type = "number", sampleColor = "color.accent.bg"
 	});
 	const sampleColorVar = resolveCssVar(sampleColor, project);
 	return /* @__PURE__ */ jsxs("div", {
-		...themeAttrs(cssVarPrefix, activeTheme),
+		...themeAttrs(cssVarPrefix, activePermutation),
 		children: [/* @__PURE__ */ jsx("div", {
 			className: "sb-block__caption",
 			children: captionText
@@ -2520,7 +2465,7 @@ function layerKey(path, layer, fallback) {
 }
 function ShadowPreview({ filter, caption, sortBy = "path", sortDir = "asc" }) {
 	const project = useProject();
-	const { resolved, activeTheme, cssVarPrefix } = project;
+	const { resolved, activePermutation, cssVarPrefix } = project;
 	const colorFormat = useColorFormat();
 	const rows = useMemo(() => {
 		return sortTokens(Object.entries(resolved).filter(([path, token]) => {
@@ -2541,16 +2486,16 @@ function ShadowPreview({ filter, caption, sortBy = "path", sortDir = "asc" }) {
 		sortBy,
 		sortDir
 	]);
-	const captionText = caption ?? `${rows.length} shadow${rows.length === 1 ? "" : "s"}${filter ? ` matching \`${filter}\`` : ""} · ${activeTheme}`;
+	const captionText = caption ?? `${rows.length} shadow${rows.length === 1 ? "" : "s"}${filter ? ` matching \`${filter}\`` : ""} · ${activePermutation}`;
 	if (rows.length === 0) return /* @__PURE__ */ jsx("div", {
-		...themeAttrs(cssVarPrefix, activeTheme),
+		...themeAttrs(cssVarPrefix, activePermutation),
 		children: /* @__PURE__ */ jsx("div", {
 			className: "sb-block__empty",
 			children: "No shadow tokens match this filter."
 		})
 	});
 	return /* @__PURE__ */ jsxs("div", {
-		...themeAttrs(cssVarPrefix, activeTheme),
+		...themeAttrs(cssVarPrefix, activePermutation),
 		children: [/* @__PURE__ */ jsx("div", {
 			className: "sb-block__caption",
 			children: captionText
@@ -2633,7 +2578,7 @@ function extractCssStyle(value) {
 }
 function StrokeStyleSample({ filter, caption, sortBy = "path", sortDir = "asc" }) {
 	const project = useProject();
-	const { resolved, activeTheme, cssVarPrefix } = project;
+	const { resolved, activePermutation, cssVarPrefix } = project;
 	const rows = useMemo(() => {
 		return sortTokens(Object.entries(resolved).filter(([path, token]) => {
 			if (token.$type !== "strokeStyle") return false;
@@ -2654,16 +2599,16 @@ function StrokeStyleSample({ filter, caption, sortBy = "path", sortDir = "asc" }
 		sortBy,
 		sortDir
 	]);
-	const captionText = caption ?? `${rows.length} strokeStyle token${rows.length === 1 ? "" : "s"}${filter && filter !== "strokeStyle" ? ` matching \`${filter}\`` : ""} · ${activeTheme}`;
+	const captionText = caption ?? `${rows.length} strokeStyle token${rows.length === 1 ? "" : "s"}${filter && filter !== "strokeStyle" ? ` matching \`${filter}\`` : ""} · ${activePermutation}`;
 	if (rows.length === 0) return /* @__PURE__ */ jsx("div", {
-		...themeAttrs(cssVarPrefix, activeTheme),
+		...themeAttrs(cssVarPrefix, activePermutation),
 		children: /* @__PURE__ */ jsx("div", {
 			className: "sb-block__empty",
 			children: "No strokeStyle tokens match this filter."
 		})
 	});
 	return /* @__PURE__ */ jsxs("div", {
-		...themeAttrs(cssVarPrefix, activeTheme),
+		...themeAttrs(cssVarPrefix, activePermutation),
 		children: [/* @__PURE__ */ jsx("div", {
 			className: "sb-block__caption",
 			children: captionText
@@ -2700,16 +2645,16 @@ function StrokeStyleSample({ filter, caption, sortBy = "path", sortDir = "asc" }
 //#region src/token-detail/internal.ts
 function useTokenDetailData(path) {
 	const project = useProject();
-	const { activeTheme, activeAxes, axes, themes, themesResolved, resolved, cssVarPrefix } = project;
+	const { activePermutation, activeAxes, axes, permutations, permutationsResolved, resolved, cssVarPrefix } = project;
 	const typedResolved = resolved;
 	return {
 		token: typedResolved[path],
 		cssVar: resolveCssVar(path, project),
-		activeTheme,
+		activePermutation,
 		activeAxes,
 		axes,
-		themes,
-		themesResolved,
+		permutations,
+		permutationsResolved,
 		resolved: typedResolved,
 		cssVarPrefix
 	};
@@ -2836,13 +2781,13 @@ function treeHasTruncation(nodes) {
 //#endregion
 //#region src/token-detail/AxisVariance.tsx
 function AxisVariance({ path }) {
-	const { token, cssVar, axes, themes, themesResolved, activeAxes, cssVarPrefix } = useTokenDetailData(path);
+	const { token, cssVar, axes, permutations, permutationsResolved, activeAxes, cssVarPrefix } = useTokenDetailData(path);
 	const colorFormat = useColorFormat();
 	const tokenType = token?.$type;
 	const isColor = tokenType === "color";
 	const formatFn = (t) => valueFor(t, tokenType, colorFormat);
 	const variance = useMemo(() => {
-		const result = analyzeAxisVariance(path, axes, themes, themesResolved);
+		const result = analyzeAxisVariance(path, axes, permutations, permutationsResolved);
 		return {
 			kind: result.kind === "constant" ? "constant" : result.kind === "single" ? "one-axis" : "multi-axis",
 			varyingAxes: result.varyingAxes
@@ -2850,13 +2795,13 @@ function AxisVariance({ path }) {
 	}, [
 		path,
 		axes,
-		themes,
-		themesResolved
+		permutations,
+		permutationsResolved
 	]);
-	if (themes.length === 0) return /* @__PURE__ */ jsx(Fragment$1, {});
+	if (permutations.length === 0) return /* @__PURE__ */ jsx(Fragment$1, {});
 	if (variance.kind === "constant") {
-		const anyTheme = themes[0];
-		const value = anyTheme ? formatFn(themesResolved[anyTheme.name]?.[path]) : "—";
+		const anyPermutation = permutations[0];
+		const value = anyPermutation ? formatFn(permutationsResolved[anyPermutation.name]?.[path]) : "—";
 		return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
 			className: "sb-token-detail__section-header",
 			children: "Values across axes"
@@ -2882,7 +2827,7 @@ function AxisVariance({ path }) {
 							},
 							children: [
 								"same across all ",
-								themes.length,
+								permutations.length,
 								" tuples"
 							]
 						})
@@ -2901,14 +2846,14 @@ function AxisVariance({ path }) {
 				...activeAxes,
 				[axisName]: ctx
 			};
-			const name = themes.find((t) => {
+			const name = permutations.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]) : "—"
+				value: name ? formatFn(permutationsResolved[name]?.[path]) : "—"
 			};
 		});
 		return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("div", {
@@ -2974,12 +2919,12 @@ function AxisVariance({ path }) {
 					className: "sb-token-detail__theme-cell",
 					children: row
 				}), colAxis.contexts.map((col) => {
-					const name = tupleName(themes, {
+					const name = tupleName(permutations, {
 						...activeAxes,
 						[rowAxis.name]: row,
 						[colAxis.name]: col
 					});
-					const value = name ? formatFn(themesResolved[name]?.[path]) : "—";
+					const value = name ? formatFn(permutationsResolved[name]?.[path]) : "—";
 					return /* @__PURE__ */ jsxs("td", {
 						className: "sb-token-detail__theme-cell",
 						"data-row": row,
@@ -3009,8 +2954,8 @@ function valueFor(token, $type, format) {
 	if (!token) return "—";
 	return formatTokenValue(token.$value, $type, format);
 }
-function tupleName(themes, tuple) {
-	return themes.find((t) => {
+function tupleName(permutations, tuple) {
+	return permutations.find((t) => {
 		const input = t.input;
 		return Object.keys(input).every((k) => input[k] === tuple[k]);
 	})?.name;
@@ -3521,14 +3466,14 @@ async function copyToClipboard(text) {
 //#endregion
 //#region src/token-detail/TokenHeader.tsx
 function TokenHeader({ path, heading }) {
-	const { token, cssVar, activeTheme } = useTokenDetailData(path);
+	const { token, cssVar, activePermutation } = useTokenDetailData(path);
 	if (!token) return /* @__PURE__ */ jsxs("div", {
 		className: "sb-token-detail__missing",
 		children: [
 			"Token ",
 			/* @__PURE__ */ jsx("code", { children: path }),
 			" not found in theme ",
-			/* @__PURE__ */ jsx("strong", { children: activeTheme }),
+			/* @__PURE__ */ jsx("strong", { children: activePermutation }),
 			"."
 		]
 	});
@@ -3573,9 +3518,9 @@ function TokenUsageSnippet({ path }) {
 //#endregion
 //#region src/TokenDetail.tsx
 function TokenDetail({ path, heading }) {
-	const { token, cssVar, activeTheme, cssVarPrefix } = useTokenDetailData(path);
+	const { token, cssVar, activePermutation, cssVarPrefix } = useTokenDetailData(path);
 	const colorFormat = useColorFormat();
-	const theme = themeAttrs(cssVarPrefix, activeTheme);
+	const theme = themeAttrs(cssVarPrefix, activePermutation);
 	if (!token) return /* @__PURE__ */ jsx("div", {
 		...theme,
 		className: cx(theme["className"], "sb-token-detail"),
@@ -3585,7 +3530,7 @@ function TokenDetail({ path, heading }) {
 				"Token ",
 				/* @__PURE__ */ jsx("code", { children: path }),
 				" not found in theme ",
-				/* @__PURE__ */ jsx("strong", { children: activeTheme }),
+				/* @__PURE__ */ jsx("strong", { children: activePermutation }),
 				"."
 			]
 		})
@@ -3605,7 +3550,7 @@ function TokenDetail({ path, heading }) {
 			}),
 			/* @__PURE__ */ jsxs("div", {
 				className: "sb-token-detail__section-header",
-				children: ["Resolved value · ", activeTheme]
+				children: ["Resolved value · ", activePermutation]
 			}),
 			/* @__PURE__ */ jsx(CompositePreview, { path }),
 			/* @__PURE__ */ jsx(CompositeBreakdown, { path }),
@@ -3769,7 +3714,7 @@ function pruneTreeForMatches(nodes, matches, expandOut) {
 	return out;
 }
 function TokenNavigator({ root, type, initiallyExpanded = 1, searchable = true, onSelect }) {
-	const { resolved, activeTheme, cssVarPrefix } = useProject();
+	const { resolved, activePermutation, cssVarPrefix } = useProject();
 	const typeFilter = useMemo(() => {
 		if (type === void 0) return void 0;
 		return new Set(Array.isArray(type) ? type : [type]);
@@ -3835,11 +3780,11 @@ function TokenNavigator({ root, type, initiallyExpanded = 1, searchable = true,
 		return n;
 	}, [visibleTree, searchExpanded]);
 	if (tree.length === 0) return /* @__PURE__ */ jsx("div", {
-		...themeAttrs(cssVarPrefix, activeTheme),
+		...themeAttrs(cssVarPrefix, activePermutation),
 		children: /* @__PURE__ */ jsx(EmptyState, { children: root ? `No tokens under "${root}"${typeFilter ? ` matching ${typeLabel.slice(3)}` : ""}.` : typeFilter ? `No tokens matching ${typeLabel.slice(3)} in the active theme.` : "No tokens in the active theme." })
 	});
 	return /* @__PURE__ */ jsxs("div", {
-		...themeAttrs(cssVarPrefix, activeTheme),
+		...themeAttrs(cssVarPrefix, activePermutation),
 		children: [
 			searchable && /* @__PURE__ */ jsx("div", {
 				className: "sb-token-navigator__search",
@@ -3859,8 +3804,9 @@ function TokenNavigator({ root, type, initiallyExpanded = 1, searchable = true,
 					root ? `Tokens under ${root}` : "Token graph",
 					typeLabel,
 					trimmedQuery !== "" ? ` · ${matchCount} matching "${trimmedQuery}"` : "",
-					" · ",
-					activeTheme
+					" ·",
+					" ",
+					activePermutation
 				]
 			}),
 			visibleTree.length === 0 ? /* @__PURE__ */ jsxs("div", {
@@ -4039,7 +3985,7 @@ function LeafPreview({ path, token }) {
 //#region src/TokenTable.tsx
 function TokenTable({ filter, type, caption, sortBy = "path", sortDir = "asc", searchable = true, onSelect }) {
 	const project = useProject();
-	const { resolved, activeTheme, cssVarPrefix } = project;
+	const { resolved, activePermutation, cssVarPrefix } = project;
 	const colorFormat = useColorFormat();
 	const [selectedPath, setSelectedPath] = useState(null);
 	const [query, setQuery] = useState("");
@@ -4085,16 +4031,16 @@ function TokenTable({ filter, type, caption, sortBy = "path", sortDir = "asc", s
 		else setSelectedPath(path);
 	}, [onSelect]);
 	const matchSuffix = searchable && query.trim() !== "" ? ` · ${visibleRows.length} matching "${query.trim()}"` : "";
-	const captionText = caption ?? `${rows.length} token${rows.length === 1 ? "" : "s"}${filter ? ` matching \`${filter}\`` : ""}${type ? ` · $type=${type}` : ""}${matchSuffix} · ${activeTheme}`;
+	const captionText = caption ?? `${rows.length} token${rows.length === 1 ? "" : "s"}${filter ? ` matching \`${filter}\`` : ""}${type ? ` · $type=${type}` : ""}${matchSuffix} · ${activePermutation}`;
 	if (rows.length === 0) return /* @__PURE__ */ jsx("div", {
-		...themeAttrs(cssVarPrefix, activeTheme),
+		...themeAttrs(cssVarPrefix, activePermutation),
 		children: /* @__PURE__ */ jsx("div", {
 			className: "sb-block__empty",
 			children: "No tokens match this filter."
 		})
 	});
 	return /* @__PURE__ */ jsxs("div", {
-		...themeAttrs(cssVarPrefix, activeTheme),
+		...themeAttrs(cssVarPrefix, activePermutation),
 		children: [
 			searchable && /* @__PURE__ */ jsx("div", {
 				className: "sb-token-table__search",
@@ -4234,7 +4180,7 @@ function buildRow(path, composite) {
 	};
 }
 function TypographyScale({ filter, sample = "The quick brown fox jumps over the lazy dog.", caption, sortBy = "path", sortDir = "asc" }) {
-	const { resolved, activeTheme, cssVarPrefix } = useProject();
+	const { resolved, activePermutation, cssVarPrefix } = useProject();
 	const rows = useMemo(() => {
 		return sortTokens(Object.entries(resolved).filter(([path, token]) => {
 			if (token.$type !== "typography") return false;
@@ -4257,16 +4203,16 @@ function TypographyScale({ filter, sample = "The quick brown fox jumps over the
 		sortBy,
 		sortDir
 	]);
-	const captionText = caption ?? `${rows.length} typography token${rows.length === 1 ? "" : "s"}${filter && filter !== "typography" ? ` matching \`${filter}\`` : ""} · ${activeTheme}`;
+	const captionText = caption ?? `${rows.length} typography token${rows.length === 1 ? "" : "s"}${filter && filter !== "typography" ? ` matching \`${filter}\`` : ""} · ${activePermutation}`;
 	if (rows.length === 0) return /* @__PURE__ */ jsx("div", {
-		...themeAttrs(cssVarPrefix, activeTheme),
+		...themeAttrs(cssVarPrefix, activePermutation),
 		children: /* @__PURE__ */ jsx("div", {
 			className: "sb-block__empty",
 			children: "No typography tokens match this filter."
 		})
 	});
 	return /* @__PURE__ */ jsxs("div", {
-		...themeAttrs(cssVarPrefix, activeTheme),
+		...themeAttrs(cssVarPrefix, activePermutation),
 		children: [/* @__PURE__ */ jsx("div", {
 			className: "sb-block__caption",
 			children: captionText
@@ -4289,6 +4235,6 @@ function TypographyScale({ filter, sample = "The quick brown fox jumps over the
 	});
 }
 //#endregion
-export { AliasChain, AliasedBy, AxesContext, AxisVariance, BorderPreview, BorderSample, COLOR_FORMATS, ColorFormatContext, ColorPalette, ColorTable, CompositeBreakdown, CompositePreview, ConsumerOutput, Diagnostics, DimensionBar, DimensionScale, FontFamilySample, FontWeightScale, GradientPalette, MotionPreview, MotionSample, OpacityScale, ShadowPreview, ShadowSample, StrokeStyleSample, SwatchbookContext, SwatchbookProvider, ThemeContext, TokenDetail, TokenHeader, TokenNavigator, TokenTable, TokenUsageSnippet, TypographyScale, formatColor, useActiveAxes, useActiveTheme, useColorFormat, useOptionalSwatchbookData, useSwatchbookData };
+export { AliasChain, AliasedBy, AxesContext, AxisVariance, BorderPreview, BorderSample, COLOR_FORMATS, ColorFormatContext, ColorPalette, ColorTable, CompositeBreakdown, CompositePreview, ConsumerOutput, Diagnostics, DimensionBar, DimensionScale, FontFamilySample, FontWeightScale, GradientPalette, MotionPreview, MotionSample, OpacityScale, PermutationContext, ShadowPreview, ShadowSample, StrokeStyleSample, SwatchbookContext, SwatchbookProvider, TokenDetail, TokenHeader, TokenNavigator, TokenTable, TokenUsageSnippet, TypographyScale, formatColor, useActiveAxes, useActivePermutation, useColorFormat, useOptionalSwatchbookData, useSwatchbookData };
 
 //# sourceMappingURL=index.mjs.map