@unpunnyfuns/swatchbook-blocks 0.55.0 → 0.57.0

package/dist/index.mjs

@@ -1,11 +1,15 @@
 import './style.css';
 import Color from "colorjs.io";
-import { Fragment, createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { buildResolveAt } from "@unpunnyfuns/swatchbook-core/resolve-at";
-import { makeCSSVar } from "@terrazzo/token-tools/css";
+import { makeCssVar } from "@unpunnyfuns/swatchbook-core/css-var";
+import { SWATCHBOOK_STYLE_ELEMENT_ID, ensureStyleElement } from "@unpunnyfuns/swatchbook-core/style-element";
+import { tupleToName } from "@unpunnyfuns/swatchbook-core/themes";
 import { addons } from "storybook/preview-api";
 import { axes, cells, css, cssVarPrefix, defaultTuple, diagnostics, jointOverrides, listing, presets, varianceByPath } from "virtual:swatchbook/tokens";
+import { dataAttr } from "@unpunnyfuns/swatchbook-core/data-attr";
+import { matchPath } from "@unpunnyfuns/swatchbook-core/match-path";
 import { fuzzyFilter } from "@unpunnyfuns/swatchbook-core/fuzzy";
 import cx from "clsx";
 //#region src/format-color.ts
@@ -56,7 +60,8 @@ function coerce(value) {
 		return null;
 	}
 	const alpha = typeof v.alpha === "number" ? v.alpha : void 0;
-	const hex = typeof v["hex"] === "string" ? v["hex"] : void 0;
+	const hexVal = v["hex"];
+	const hex = typeof hexVal === "string" ? hexVal : void 0;
 	return {
 		colorSpace,
 		components,
@@ -217,33 +222,23 @@ function ensureSubscribed$1() {
 	if (subscribed$1 || typeof window === "undefined") return;
 	subscribed$1 = true;
 	const channel = addons.getChannel();
+	let lastFingerprint = "";
 	const onGlobals = (payload) => {
 		const globals = payload.globals;
 		if (!globals) return;
-		let next = snapshot$1;
-		const nextAxes = globals[AXES_GLOBAL_KEY];
-		if (nextAxes && typeof nextAxes === "object") next = {
-			...next,
-			axes: nextAxes
-		};
-		const nextFormat = globals[COLOR_FORMAT_GLOBAL_KEY];
-		if (isColorFormat(nextFormat)) next = {
-			...next,
+		const incomingAxes = globals[AXES_GLOBAL_KEY];
+		const incomingFormat = globals[COLOR_FORMAT_GLOBAL_KEY];
+		const nextAxes = incomingAxes && typeof incomingAxes === "object" ? incomingAxes : snapshot$1.axes;
+		const nextFormat = isColorFormat(incomingFormat) ? incomingFormat : snapshot$1.format;
+		const fingerprint = `${nextFormat ?? ""}|${nextAxes ? JSON.stringify(nextAxes) : ""}`;
+		if (fingerprint === lastFingerprint) return;
+		lastFingerprint = fingerprint;
+		snapshot$1 = {
+			axes: nextAxes,
 			format: nextFormat
 		};
-		if (next !== snapshot$1) {
-			snapshot$1 = next;
-			for (const cb of listeners$1) cb();
-		}
+		for (const cb of listeners$1) cb();
 	};
-	/**
-	* `setGlobals` fires once on preview init carrying the URL-persisted user
-	* globals (Storybook stores toolbar selections in `?globals=…`). Without
-	* this listener, deeplinking to an MDX page with a non-default axis tuple
-	* or color format renders defaults for one frame before the first
-	* `updateGlobals` arrives. `emitGlobals()` reads from `userGlobals.get()`
-	* (current state), so the payload is never stale — safe to handle.
-	*/
 	channel.on("globalsUpdated", onGlobals);
 	channel.on("updateGlobals", onGlobals);
 	channel.on("setGlobals", onGlobals);
@@ -290,13 +285,13 @@ function useOptionalSwatchbookData() {
 * `useGlobals` so the same hook works in autodocs / MDX renders where the
 * preview-hooks context isn't available.
 */
-const PermutationContext = createContext("");
-function useActivePermutation() {
-	return useContext(PermutationContext);
+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 PermutationContext}; split
+* 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.
 */
@@ -391,16 +386,8 @@ function useTokenSnapshot() {
 }
 //#endregion
 //#region src/internal/use-project.ts
-const STYLE_ELEMENT_ID = "swatchbook-tokens";
 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;
+	ensureStyleElement(SWATCHBOOK_STYLE_ELEMENT_ID, css);
 }
 function defaultTuple$1(axes) {
 	const out = {};
@@ -408,44 +395,15 @@ function defaultTuple$1(axes) {
 	return out;
 }
 /**
-* Stable string key for a tuple — axes sorted by name + `:` separator.
-* Matches the key form `buildResolveAt` uses in core so both surfaces
-* agree on what counts as "the same tuple."
-*/
-function canonicalTupleKey(tuple) {
-	return Object.keys(tuple).toSorted().map((k) => `${k}:${tuple[k]}`).join("|");
-}
-/**
-* Build a `Map<canonicalKey, permutationName>` once per permutations
-* list so per-tuple lookups go through O(1) `Map.get` instead of an
-* `Array.prototype.find` scan per call. Bounded by the permutations
-* count regardless of how many lookups consumers do.
-*/
-function buildPermutationNameByTuple(permutations) {
-	const out = /* @__PURE__ */ new Map();
-	for (const perm of permutations) out.set(canonicalTupleKey(perm.input), perm.name);
-	return out;
-}
-const noPermutationName = () => void 0;
-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;
-}
-/**
-* Reconstruct a `resolveAt` accessor from snapshot data. The wire
-* format ships `cells` as plain JSON and `jointOverrides` as an
-* array of `[key, entry]` pairs (Map doesn't survive JSON.stringify);
-* this hydrates them and wraps `buildResolveAt` from core. Stable
-* identity across calls with the same snapshot — `useMemo` keyed on
-* the snapshot fields produces a referentially stable function.
+* Reconstruct a `resolveAt` accessor from snapshot data. Both `cells`
+* and `jointOverrides` ship as plain JSON in the same shape core uses
+* internally — no Map reconstruction at the boundary. Stable identity
+* across calls with the same snapshot — `useMemo` keyed on the
+* snapshot fields produces a referentially stable function.
 */
 function makeResolveAt(snapshot) {
 	const cells = snapshot.cells ?? {};
-	const jointOverrides = new Map(snapshot.jointOverrides ?? []);
+	const jointOverrides = snapshot.jointOverrides ?? [];
 	const defaults = snapshot.defaultTuple ?? defaultTuple$1(snapshot.axes);
 	const resolver = buildResolveAt(snapshot.axes, cells, jointOverrides, defaults);
 	return (tuple) => resolver(tuple);
@@ -454,20 +412,14 @@ function makeResolveAt(snapshot) {
 * Build the `resolveAt` accessor for a snapshot. Prefers the
 * snapshot's own `resolveAt` (the addon's preview decorator
 * pre-builds one at module load — see `previewResolveAt` in
-* `packages/addon/src/preview.tsx`), falling back to constructing
-* one from `cells` + `jointOverrides` when present (covers
-* hand-built test snapshots and the no-provider path) and finally to
-* the legacy per-permutation lookup for snapshots that only carry
-* `permutationsResolved` + `permutations` (MDX consumers that
-* pre-date the wire format change).
+* `packages/addon/src/preview.tsx`), otherwise composes one from
+* `cells` + `jointOverrides` via `makeResolveAt`. Hand-built
+* snapshots should provide both via the test `withCellsShape`
+* helper or by populating the fields directly.
 */
 function snapshotResolveAt(snapshot) {
 	if (snapshot.resolveAt) return snapshot.resolveAt;
-	if (Object.keys(snapshot.cells ?? {}).length > 0) return makeResolveAt(snapshot);
-	return (tuple) => {
-		const perms = snapshot.permutations ?? [];
-		return (snapshot.permutationsResolved ?? {})[nameForTuple(perms, tuple) ?? snapshot.activePermutation] ?? {};
-	};
+	return makeResolveAt(snapshot);
 }
 /**
 * Reads project data either from a mounted {@link SwatchbookProvider}
@@ -487,7 +439,12 @@ function useProject() {
 	const cells = snapshot?.cells;
 	const jointOverrides = snapshot?.jointOverrides;
 	const dataDefaultTuple = snapshot?.defaultTuple;
-	const activePermutation = snapshot?.activePermutation;
+	const activeAxes = snapshot?.activeAxes;
+	const activeTheme = snapshot?.activeTheme;
+	const diagnostics = snapshot?.diagnostics;
+	const cssVarPrefix = snapshot?.cssVarPrefix;
+	const listing = snapshot?.listing;
+	const varianceByPath = snapshot?.varianceByPath;
 	const resolveAt = useMemo(() => {
 		if (!snapshot) return null;
 		return snapshotResolveAt(snapshot);
@@ -496,29 +453,41 @@ function useProject() {
 		cells,
 		jointOverrides,
 		dataDefaultTuple,
-		activePermutation
+		activeTheme
 	]);
-	const permutationNameByTuple = useMemo(() => buildPermutationNameByTuple(snapshot?.permutations ?? []), [snapshot?.permutations]);
-	const fallback = useVirtualModuleFallback(snapshot === null);
-	if (snapshot !== null && resolveAt !== null) return snapshotToData(snapshot, resolveAt, permutationNameByTuple);
-	return fallback;
-}
-function snapshotToData(snapshot, resolveAt, permutationNameByTuple) {
-	return {
-		activePermutation: snapshot.activePermutation,
-		activeAxes: snapshot.activeAxes,
-		axes: snapshot.axes,
-		resolved: resolveAt(snapshot.activeAxes),
-		diagnostics: snapshot.diagnostics,
-		cssVarPrefix: snapshot.cssVarPrefix,
-		listing: snapshot.listing ?? {},
-		varianceByPath: snapshot.varianceByPath ?? {},
+	const providerData = useMemo(() => {
+		if (!snapshot || !resolveAt || !axes || !activeAxes) return null;
+		return {
+			activeTheme: activeTheme ?? "",
+			activeAxes,
+			axes,
+			resolved: resolveAt(activeAxes),
+			diagnostics: diagnostics ?? [],
+			cssVarPrefix: cssVarPrefix ?? "",
+			listing: listing ?? {},
+			varianceByPath: varianceByPath ?? {},
+			resolveAt,
+			themeNameForTuple: (tuple) => tupleToName(axes, tuple)
+		};
+	}, [
+		snapshot,
 		resolveAt,
-		permutationNameForTuple: (tuple) => permutationNameByTuple.get(canonicalTupleKey(tuple))
-	};
+		axes,
+		cells,
+		jointOverrides,
+		dataDefaultTuple,
+		activeTheme,
+		activeAxes,
+		diagnostics,
+		cssVarPrefix,
+		listing,
+		varianceByPath
+	]);
+	const fallback = useVirtualModuleFallback(snapshot === null);
+	return providerData ?? fallback;
 }
 function useVirtualModuleFallback(enabled) {
-	const contextPermutation = useActivePermutation();
+	const contextPermutation = useActiveTheme();
 	const contextAxes = useActiveAxes();
 	const channelGlobals = useChannelGlobals();
 	/**
@@ -533,8 +502,14 @@ function useVirtualModuleFallback(enabled) {
 		if (!enabled) return;
 		ensureStylesheet(tokens.css);
 	}, [enabled, tokens.css]);
-	const activeAxes = Object.keys(contextAxes).length > 0 ? { ...contextAxes } : channelGlobals.axes ?? defaultTuple$1(tokens.axes);
-	const activePermutation = contextPermutation || tokens.axes.map((a) => activeAxes[a.name] ?? a.default).join(" · ") || "";
+	const activeAxes = useMemo(() => {
+		return Object.keys(contextAxes).length > 0 ? { ...contextAxes } : channelGlobals.axes ?? defaultTuple$1(tokens.axes);
+	}, [
+		contextAxes,
+		channelGlobals.axes,
+		tokens.axes
+	]);
+	const activeTheme = contextPermutation || tupleToName(tokens.axes, activeAxes);
 	const resolveAt = useMemo(() => makeResolveAt({
 		axes: tokens.axes,
 		cells: tokens.cells,
@@ -546,32 +521,27 @@ function useVirtualModuleFallback(enabled) {
 		tokens.jointOverrides,
 		tokens.defaultTuple
 	]);
-	const resolved = resolveAt(activeAxes);
-	const permutationNameForTuple = noPermutationName;
-	return {
-		activePermutation,
+	return useMemo(() => ({
+		activeTheme,
 		activeAxes,
 		axes: tokens.axes,
-		resolved,
+		resolved: resolveAt(activeAxes),
 		diagnostics: tokens.diagnostics,
 		cssVarPrefix: tokens.cssVarPrefix,
 		listing: tokens.listing,
 		varianceByPath: tokens.varianceByPath,
 		resolveAt,
-		permutationNameForTuple
-	};
-}
-/**
-* Thin wrapper around Terrazzo's `makeCSSVar` so the block-display surface
-* and `packages/core/src/css.ts`'s emitter share one implementation. Any
-* future naming-policy shift in Terrazzo (casing, unicode, prefix handling)
-* reaches both surfaces at once instead of needing a parallel update here.
-*/
-function makeCssVar(path, prefix) {
-	return prefix ? makeCSSVar(path, {
-		prefix,
-		wrapVar: true
-	}) : makeCSSVar(path, { wrapVar: true });
+		themeNameForTuple: (tuple) => tupleToName(tokens.axes, tuple)
+	}), [
+		activeTheme,
+		activeAxes,
+		tokens.axes,
+		tokens.diagnostics,
+		tokens.cssVarPrefix,
+		tokens.listing,
+		tokens.varianceByPath,
+		resolveAt
+	]);
 }
 /**
 * Resolve a token's CSS var reference, preferring the authoritative name
@@ -608,31 +578,6 @@ function resolveColorValue(path, raw, colorFormat, project) {
 	}
 	return formatColor(raw, colorFormat);
 }
-/**
-* Match a dot-separated DTCG token path against a block `filter` prop.
-*
-* **Supported shapes** (the narrow subset we need — DTCG paths don't have
-* directories, brace expansion, or regex, so we skip a full glob engine):
-*
-* | Pattern            | Matches                                             |
-* | ------------------ | --------------------------------------------------- |
-* | `undefined` / `''` | everything                                          |
-* | `*` or `**`        | everything                                          |
-* | `color`            | exact path `color`, or any descendant `color.*`     |
-* | `color.*`      | any path whose fixed prefix is `color.`         |
-* | `color**`          | any path starting with `color`                      |
-*
-* Not supported (all pass through as literal segment matchers): brace
-* expansion (`{a,b}`), mid-path globs (`color.*.bg`), negation (`!foo`),
-* character classes (`[sys]`). If you hit those, pre-filter by hand.
-*/
-function globMatch(path, glob) {
-	if (!glob) return true;
-	if (glob === "*" || glob === "**") return true;
-	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}.`);
-}
 //#endregion
 //#region src/border-preview/BorderSample.tsx
 const sampleStyle$1 = {
@@ -654,15 +599,6 @@ function BorderSample({ path }) {
 //#endregion
 //#region src/internal/data-attr.ts
 /**
-* Produce a prefixed `data-*` attribute name when `prefix` is set, bare
-* `data-<key>` otherwise. Mirrors `dataAttr` in `@unpunnyfuns/swatchbook-core`
-* so block wrappers and emitted-CSS selectors stay in lockstep without
-* blocks taking a runtime dep on core.
-*/
-function dataAttr(prefix, key) {
-	return prefix ? `data-${prefix}-${key}` : `data-${key}`;
-}
-/**
 * Marker attribute set on every block wrapper. Retained as a stable hook
 * for consumer-side selectors (e.g. when a host app wants to target or
 * override block chrome without relying on hashed class names).
@@ -697,59 +633,73 @@ function themeAttrs(prefix, themeName) {
 }
 //#endregion
 //#region src/internal/sort-tokens.ts
-/**
-* Stable sort for a filtered `[path, token][]` list.
-*
-* `sortBy: 'path'` — lexicographic on the dot-path (locale-aware, numeric).
-* `sortBy: 'value'` — per-`$type` ordering:
-*   - `dimension` / `duration` → numeric pixels / ms (via `toMagnitude`).
-*   - `fontWeight` / `opacity` / `number` / `lineHeight` → numeric.
-*   - `color` → perceptual by oklch L → C → H.
-*   - `fontFamily` / `strokeStyle` (string form) → lexicographic.
-*   - Composites (`typography`, `shadow`, `border`, `gradient`, `transition`) →
-*     fall back to path-alpha. No useful single-axis order.
-* `sortBy: 'none'` — preserve input order (still respects `sortDir: 'desc'`
-*   as a reverse).
-*/
+const NUMERIC_TYPES = new Set([
+	"dimension",
+	"duration",
+	"fontWeight",
+	"opacity",
+	"number",
+	"lineHeight"
+]);
+const STRING_TYPES = new Set(["fontFamily", "strokeStyle"]);
+function computeSortKey(token) {
+	const type = token.$type;
+	if (!type) return { kind: "none" };
+	if (NUMERIC_TYPES.has(type)) {
+		const value = toMagnitude(token.$value);
+		return {
+			kind: "numeric",
+			value,
+			valid: Number.isFinite(value)
+		};
+	}
+	if (type === "color") return {
+		kind: "color",
+		key: colorKey(token.$value)
+	};
+	if (STRING_TYPES.has(type)) return {
+		kind: "string",
+		value: toDisplayable(token.$value)
+	};
+	return { kind: "none" };
+}
 function sortTokens(entries, options = {}) {
 	const by = options.by ?? "path";
 	const dir = options.dir ?? "asc";
 	const sign = dir === "desc" ? -1 : 1;
 	if (by === "none") return dir === "desc" ? [...entries].toReversed() : [...entries];
 	if (by === "path") return [...entries].toSorted(([a], [b]) => sign * a.localeCompare(b, void 0, { numeric: true }));
+	const keys = /* @__PURE__ */ new Map();
+	for (const [, token] of entries) keys.set(token, computeSortKey(token));
 	return [...entries].toSorted(([aPath, aTok], [bPath, bTok]) => {
-		const cmp = compareValue(aTok, bTok);
+		const cmp = compareValue(aTok, bTok, keys);
 		if (cmp !== 0) return sign * cmp;
 		return sign * aPath.localeCompare(bPath, void 0, { numeric: true });
 	});
 }
-function compareValue(a, b) {
-	const type = a.$type;
-	if (type !== b.$type) return String(type ?? "").localeCompare(String(b.$type ?? ""));
-	if (!type) return 0;
-	if (type === "dimension" || type === "duration" || type === "fontWeight" || type === "opacity" || type === "number" || type === "lineHeight") {
-		const av = toMagnitude(a.$value);
-		const bv = toMagnitude(b.$value);
-		if (Number.isFinite(av) && Number.isFinite(bv)) return av - bv;
-		if (Number.isFinite(av)) return -1;
-		if (Number.isFinite(bv)) return 1;
+function compareValue(a, b, keys) {
+	if (a.$type !== b.$type) return String(a.$type ?? "").localeCompare(String(b.$type ?? ""));
+	const ak = keys.get(a);
+	const bk = keys.get(b);
+	if (!ak || !bk) return 0;
+	if (ak.kind !== bk.kind) return 0;
+	if (ak.kind === "numeric" && bk.kind === "numeric") {
+		if (ak.valid && bk.valid) return ak.value - bk.value;
+		if (ak.valid) return -1;
+		if (bk.valid) return 1;
 		return 0;
 	}
-	if (type === "color") {
-		const ak = colorKey(a.$value);
-		const bk = colorKey(b.$value);
-		if (!ak && !bk) return 0;
-		if (!ak) return 1;
-		if (!bk) return -1;
-		if (ak.l !== bk.l) return ak.l - bk.l;
-		if (ak.c !== bk.c) return ak.c - bk.c;
-		return ak.h - bk.h;
-	}
-	if (type === "fontFamily" || type === "strokeStyle") {
-		const as = toDisplayable(a.$value);
-		const bs = toDisplayable(b.$value);
-		return as.localeCompare(bs, void 0, { numeric: true });
+	if (ak.kind === "color" && bk.kind === "color") {
+		const a3 = ak.key;
+		const b3 = bk.key;
+		if (!a3 && !b3) return 0;
+		if (!a3) return 1;
+		if (!b3) return -1;
+		if (a3.l !== b3.l) return a3.l - b3.l;
+		if (a3.c !== b3.c) return a3.c - b3.c;
+		return a3.h - b3.h;
 	}
+	if (ak.kind === "string" && bk.kind === "string") return ak.value.localeCompare(bk.value, void 0, { numeric: true });
 	return 0;
 }
 function toMagnitude(v) {
@@ -769,6 +719,14 @@ function toMagnitude(v) {
 	}
 	return NaN;
 }
+/**
+* Coerce a possibly-null/undefined number to 0 — `coords` returns
+* `(number | null)[]` and `noUncheckedIndexedAccess` adds `undefined`
+* on top. `typeof` narrows the union for the comparator below.
+*/
+function safeNumber(v) {
+	return typeof v === "number" && Number.isFinite(v) ? v : 0;
+}
 function colorKey(v) {
 	if (!v || typeof v !== "object") return null;
 	try {
@@ -785,9 +743,9 @@ function colorKey(v) {
 		} else return null;
 		const [l, chroma, h] = new Color(source).to("oklch").coords;
 		return {
-			l: Number.isFinite(l) ? l : 0,
-			c: Number.isFinite(chroma) ? chroma : 0,
-			h: Number.isFinite(h) ? h : 0
+			l: safeNumber(l),
+			c: safeNumber(chroma),
+			h: safeNumber(h)
 		};
 	} catch {
 		return null;
@@ -817,12 +775,12 @@ function formatSubColor$1(raw, format) {
 }
 function BorderPreview({ filter, caption, sortBy = "path", sortDir = "asc" }) {
 	const project = useProject();
-	const { resolved, activePermutation, cssVarPrefix } = project;
+	const { resolved, activeTheme, cssVarPrefix } = project;
 	const colorFormat = useColorFormat();
 	const rows = useMemo(() => {
 		return sortTokens(Object.entries(resolved).filter(([path, token]) => {
 			if (token.$type !== "border") return false;
-			return globMatch(path, filter);
+			return matchPath(path, filter);
 		}), {
 			by: sortBy,
 			dir: sortDir
@@ -838,16 +796,16 @@ function BorderPreview({ filter, caption, sortBy = "path", sortDir = "asc" }) {
 		sortBy,
 		sortDir
 	]);
-	const captionText = caption ?? `${rows.length} border${rows.length === 1 ? "" : "s"}${filter ? ` matching \`${filter}\`` : ""} · ${activePermutation}`;
+	const captionText = caption ?? `${rows.length} border${rows.length === 1 ? "" : "s"}${filter ? ` matching \`${filter}\`` : ""} · ${activeTheme}`;
 	if (rows.length === 0) return /* @__PURE__ */ jsx("div", {
-		...themeAttrs(cssVarPrefix, activePermutation),
+		...themeAttrs(cssVarPrefix, activeTheme),
 		children: /* @__PURE__ */ jsx("div", {
 			className: "sb-block__empty",
 			children: "No border tokens match this filter."
 		})
 	});
 	return /* @__PURE__ */ jsxs("div", {
-		...themeAttrs(cssVarPrefix, activePermutation),
+		...themeAttrs(cssVarPrefix, activeTheme),
 		children: [/* @__PURE__ */ jsx("div", {
 			className: "sb-block__caption",
 			children: captionText
@@ -910,12 +868,12 @@ function fixedPrefixLength(filter) {
 }
 function ColorPalette({ filter, groupBy, caption, sortBy = "path", sortDir = "asc" }) {
 	const project = useProject();
-	const { resolved, activePermutation, cssVarPrefix } = project;
+	const { resolved, activeTheme, cssVarPrefix } = project;
 	const colorFormat = useColorFormat();
 	const groups = useMemo(() => {
 		const entries = sortTokens(Object.entries(resolved).filter(([path, token]) => {
 			if (token.$type !== "color") return false;
-			return globMatch(path, filter);
+			return matchPath(path, filter);
 		}), {
 			by: sortBy,
 			dir: sortDir
@@ -949,16 +907,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}\`` : ""} · ${activePermutation}`;
+	const captionText = caption ?? `${totalCount} color${totalCount === 1 ? "" : "s"}${filter ? ` matching \`${filter}\`` : ""} · ${activeTheme}`;
 	if (totalCount === 0) return /* @__PURE__ */ jsx("div", {
-		...themeAttrs(cssVarPrefix, activePermutation),
+		...themeAttrs(cssVarPrefix, activeTheme),
 		children: /* @__PURE__ */ jsx("div", {
 			className: "sb-block__empty",
 			children: "No color tokens match this filter."
 		})
 	});
 	return /* @__PURE__ */ jsxs("div", {
-		...themeAttrs(cssVarPrefix, activePermutation),
+		...themeAttrs(cssVarPrefix, activeTheme),
 		children: [/* @__PURE__ */ jsx("div", {
 			className: "sb-block__caption",
 			children: captionText
@@ -1045,7 +1003,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, activePermutation, cssVarPrefix } = project;
+	const { resolved, activeTheme, cssVarPrefix } = project;
 	const colorFormat = useColorFormat();
 	const [query, setQuery] = useState("");
 	const [selectedByBase, setSelectedByBase] = useState({});
@@ -1054,7 +1012,7 @@ function ColorTable({ filter, caption, sortBy = "path", sortDir = "asc", searcha
 	const groups = useMemo(() => {
 		const sorted = sortTokens(Object.entries(resolved).filter(([path, token]) => {
 			if (token.$type !== "color") return false;
-			return globMatch(path, filter);
+			return matchPath(path, filter);
 		}), {
 			by: sortBy,
 			dir: sortDir
@@ -1132,16 +1090,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} · ${activePermutation}`;
+	const captionText = caption ?? `${totalTokens} color${totalTokens === 1 ? "" : "s"} across ${groups.length} group${groups.length === 1 ? "" : "s"}${filter ? ` matching \`${filter}\`` : ""}${matchSuffix} · ${activeTheme}`;
 	if (groups.length === 0) return /* @__PURE__ */ jsx("div", {
-		...themeAttrs(cssVarPrefix, activePermutation),
+		...themeAttrs(cssVarPrefix, activeTheme),
 		children: /* @__PURE__ */ jsx("div", {
 			className: "sb-block__empty",
 			children: "No color tokens match this filter."
 		})
 	});
 	return /* @__PURE__ */ jsxs("div", {
-		...themeAttrs(cssVarPrefix, activePermutation),
+		...themeAttrs(cssVarPrefix, activeTheme),
 		children: [searchable && /* @__PURE__ */ jsx("div", {
 			className: "sb-color-table__search",
 			children: /* @__PURE__ */ jsx("input", {
@@ -1563,12 +1521,12 @@ function summaryVariant(diagnostics) {
 * on their own MDX pages.
 */
 function Diagnostics({ caption } = {}) {
-	const { activePermutation, cssVarPrefix, diagnostics } = useProject();
+	const { activeTheme, cssVarPrefix, diagnostics } = useProject();
 	const hasErrorsOrWarnings = diagnostics.some((d) => d.severity === "error" || d.severity === "warn");
 	const headingText = caption ?? `Diagnostics · ${summaryText(diagnostics)}`;
 	const variant = summaryVariant(diagnostics);
 	return /* @__PURE__ */ jsx("div", {
-		...themeAttrs(cssVarPrefix, activePermutation),
+		...themeAttrs(cssVarPrefix, activeTheme),
 		"data-testid": "diagnostics",
 		children: /* @__PURE__ */ jsxs("details", {
 			open: hasErrorsOrWarnings,
@@ -1785,11 +1743,11 @@ function toPixels(raw) {
 }
 function DimensionScale({ filter, kind = "length", caption, sortBy = "value", sortDir = "asc" }) {
 	const project = useProject();
-	const { resolved, activePermutation, cssVarPrefix } = project;
+	const { resolved, activeTheme, cssVarPrefix } = project;
 	const rows = useMemo(() => {
 		return sortTokens(Object.entries(resolved).filter(([path, token]) => {
 			if (token.$type !== "dimension") return false;
-			return globMatch(path, filter);
+			return matchPath(path, filter);
 		}), {
 			by: sortBy,
 			dir: sortDir
@@ -1810,16 +1768,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}\`` : ""} · ${activePermutation}`;
+	const captionText = caption ?? `${rows.length} dimension${rows.length === 1 ? "" : "s"}${filter ? ` matching \`${filter}\`` : ""} · ${activeTheme}`;
 	if (rows.length === 0) return /* @__PURE__ */ jsx("div", {
-		...themeAttrs(cssVarPrefix, activePermutation),
+		...themeAttrs(cssVarPrefix, activeTheme),
 		children: /* @__PURE__ */ jsx("div", {
 			className: "sb-block__empty",
 			children: "No dimension tokens match this filter."
 		})
 	});
 	return /* @__PURE__ */ jsxs("div", {
-		...themeAttrs(cssVarPrefix, activePermutation),
+		...themeAttrs(cssVarPrefix, activeTheme),
 		children: [/* @__PURE__ */ jsx("div", {
 			className: "sb-block__caption",
 			children: captionText
@@ -1867,11 +1825,11 @@ 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, activePermutation, cssVarPrefix } = project;
+	const { resolved, activeTheme, cssVarPrefix } = project;
 	const rows = useMemo(() => {
 		return sortTokens(Object.entries(resolved).filter(([path, token]) => {
 			if (token.$type !== "fontFamily") return false;
-			return globMatch(path, filter);
+			return matchPath(path, filter);
 		}), {
 			by: sortBy,
 			dir: sortDir
@@ -1887,16 +1845,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}\`` : ""} · ${activePermutation}`;
+	const captionText = caption ?? `${rows.length} fontFamily token${rows.length === 1 ? "" : "s"}${filter && filter !== "fontFamily" ? ` matching \`${filter}\`` : ""} · ${activeTheme}`;
 	if (rows.length === 0) return /* @__PURE__ */ jsx("div", {
-		...themeAttrs(cssVarPrefix, activePermutation),
+		...themeAttrs(cssVarPrefix, activeTheme),
 		children: /* @__PURE__ */ jsx("div", {
 			className: "sb-block__empty",
 			children: "No fontFamily tokens match this filter."
 		})
 	});
 	return /* @__PURE__ */ jsxs("div", {
-		...themeAttrs(cssVarPrefix, activePermutation),
+		...themeAttrs(cssVarPrefix, activeTheme),
 		children: [/* @__PURE__ */ jsx("div", {
 			className: "sb-block__caption",
 			children: captionText
@@ -1953,11 +1911,11 @@ function toWeight(raw) {
 }
 function FontWeightScale({ filter, sample = "Aa", caption, sortBy = "value", sortDir = "asc" }) {
 	const project = useProject();
-	const { resolved, activePermutation, cssVarPrefix } = project;
+	const { resolved, activeTheme, cssVarPrefix } = project;
 	const rows = useMemo(() => {
 		return sortTokens(Object.entries(resolved).filter(([path, token]) => {
 			if (token.$type !== "fontWeight") return false;
-			return globMatch(path, filter);
+			return matchPath(path, filter);
 		}), {
 			by: sortBy,
 			dir: sortDir
@@ -1974,16 +1932,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}\`` : ""} · ${activePermutation}`;
+	const captionText = caption ?? `${rows.length} fontWeight token${rows.length === 1 ? "" : "s"}${filter && filter !== "fontWeight" ? ` matching \`${filter}\`` : ""} · ${activeTheme}`;
 	if (rows.length === 0) return /* @__PURE__ */ jsx("div", {
-		...themeAttrs(cssVarPrefix, activePermutation),
+		...themeAttrs(cssVarPrefix, activeTheme),
 		children: /* @__PURE__ */ jsx("div", {
 			className: "sb-block__empty",
 			children: "No fontWeight tokens match this filter."
 		})
 	});
 	return /* @__PURE__ */ jsxs("div", {
-		...themeAttrs(cssVarPrefix, activePermutation),
+		...themeAttrs(cssVarPrefix, activeTheme),
 		children: [/* @__PURE__ */ jsx("div", {
 			className: "sb-block__caption",
 			children: captionText
@@ -2033,12 +1991,12 @@ function stopKey(path, stop, fallback) {
 }
 function GradientPalette({ filter, caption, sortBy = "path", sortDir = "asc" }) {
 	const project = useProject();
-	const { resolved, activePermutation, cssVarPrefix } = project;
+	const { resolved, activeTheme, cssVarPrefix } = project;
 	const colorFormat = useColorFormat();
 	const rows = useMemo(() => {
 		return sortTokens(Object.entries(resolved).filter(([path, token]) => {
 			if (token.$type !== "gradient") return false;
-			return globMatch(path, filter);
+			return matchPath(path, filter);
 		}), {
 			by: sortBy,
 			dir: sortDir
@@ -2054,16 +2012,16 @@ function GradientPalette({ filter, caption, sortBy = "path", sortDir = "asc" })
 		sortBy,
 		sortDir
 	]);
-	const captionText = caption ?? `${rows.length} gradient${rows.length === 1 ? "" : "s"}${filter ? ` matching \`${filter}\`` : ""} · ${activePermutation}`;
+	const captionText = caption ?? `${rows.length} gradient${rows.length === 1 ? "" : "s"}${filter ? ` matching \`${filter}\`` : ""} · ${activeTheme}`;
 	if (rows.length === 0) return /* @__PURE__ */ jsx("div", {
-		...themeAttrs(cssVarPrefix, activePermutation),
+		...themeAttrs(cssVarPrefix, activeTheme),
 		children: /* @__PURE__ */ jsx("div", {
 			className: "sb-block__empty",
 			children: "No gradient tokens match this filter."
 		})
 	});
 	return /* @__PURE__ */ jsxs("div", {
-		...themeAttrs(cssVarPrefix, activePermutation),
+		...themeAttrs(cssVarPrefix, activeTheme),
 		children: [/* @__PURE__ */ jsx("div", {
 			className: "sb-block__caption",
 			children: captionText
@@ -2117,9 +2075,9 @@ function GradientPalette({ filter, caption, sortBy = "path", sortDir = "asc" })
 * True when rendering inside Chromatic's snapshot runner. Chromatic's
 * browser ships a recognisable user-agent string; checked here so
 * motion-looping components can fall back to their static state for
-* deterministic snapshots without needing a global Chromatic parameter
-* (globally forcing `prefersReducedMotion: true` broke Chromatic's
-* verification parser in our setup — see commit 893331f).
+* deterministic snapshots. Per-component detection rather than the
+* global `chromatic.prefersReducedMotion: true` parameter — that
+* parameter is incompatible with Chromatic's verification parser.
 */
 function isChromatic() {
 	if (typeof navigator === "undefined") return false;
@@ -2300,14 +2258,14 @@ function formatSpec(row) {
 }
 function MotionPreview({ filter, caption }) {
 	const project = useProject();
-	const { resolved, activePermutation, cssVarPrefix } = project;
+	const { resolved, activeTheme, cssVarPrefix } = project;
 	const [speed, setSpeed] = useState(1);
 	const [run, setRun] = useState(0);
 	const reducedMotion = usePrefersReducedMotion();
 	const rows = useMemo(() => {
 		const collected = [];
 		for (const [path, token] of Object.entries(resolved)) {
-			if (filter && !globMatch(path, filter)) continue;
+			if (filter && !matchPath(path, filter)) continue;
 			if (!filter && ![
 				"transition",
 				"duration",
@@ -2335,16 +2293,16 @@ function MotionPreview({ filter, caption }) {
 		filter,
 		project
 	]);
-	const captionText = caption ?? `${rows.length} motion token${rows.length === 1 ? "" : "s"}${filter ? ` matching \`${filter}\`` : ""} · ${activePermutation}`;
+	const captionText = caption ?? `${rows.length} motion token${rows.length === 1 ? "" : "s"}${filter ? ` matching \`${filter}\`` : ""} · ${activeTheme}`;
 	if (rows.length === 0) return /* @__PURE__ */ jsx("div", {
-		...themeAttrs(cssVarPrefix, activePermutation),
+		...themeAttrs(cssVarPrefix, activeTheme),
 		children: /* @__PURE__ */ jsx("div", {
 			className: "sb-block__empty",
 			children: "No motion tokens match this filter."
 		})
 	});
 	return /* @__PURE__ */ jsxs("div", {
-		...themeAttrs(cssVarPrefix, activePermutation),
+		...themeAttrs(cssVarPrefix, activeTheme),
 		children: [
 			/* @__PURE__ */ jsx("div", {
 				className: "sb-block__caption",
@@ -2418,13 +2376,13 @@ function toOpacity(raw) {
 */
 function OpacityScale({ filter, type = "number", sampleColor = "color.accent.bg", caption, sortBy = "value", sortDir = "asc" }) {
 	const project = useProject();
-	const { resolved, activePermutation, cssVarPrefix } = project;
+	const { resolved, activeTheme, cssVarPrefix } = project;
 	const rows = useMemo(() => {
 		return sortTokens(Object.entries(resolved).filter(([path, token]) => {
 			if (token.$type !== type) return false;
 			const v = toOpacity(token.$value);
 			if (!Number.isFinite(v) || v < 0 || v > 1) return false;
-			return globMatch(path, filter);
+			return matchPath(path, filter);
 		}), {
 			by: sortBy,
 			dir: sortDir
@@ -2445,9 +2403,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}\`` : ""} · ${activePermutation}`;
+	const captionText = caption ?? `${rows.length} opacity token${rows.length === 1 ? "" : "s"}${filter ? ` matching \`${filter}\`` : ""} · ${activeTheme}`;
 	if (rows.length === 0) return /* @__PURE__ */ jsx("div", {
-		...themeAttrs(cssVarPrefix, activePermutation),
+		...themeAttrs(cssVarPrefix, activeTheme),
 		children: /* @__PURE__ */ jsx("div", {
 			className: "sb-block__empty",
 			children: "No opacity tokens match this filter."
@@ -2455,7 +2413,7 @@ function OpacityScale({ filter, type = "number", sampleColor = "color.accent.bg"
 	});
 	const sampleColorVar = resolveCssVar(sampleColor, project);
 	return /* @__PURE__ */ jsxs("div", {
-		...themeAttrs(cssVarPrefix, activePermutation),
+		...themeAttrs(cssVarPrefix, activeTheme),
 		children: [/* @__PURE__ */ jsx("div", {
 			className: "sb-block__caption",
 			children: captionText
@@ -2563,12 +2521,12 @@ function layerKey(path, layer, fallback) {
 }
 function ShadowPreview({ filter, caption, sortBy = "path", sortDir = "asc" }) {
 	const project = useProject();
-	const { resolved, activePermutation, cssVarPrefix } = project;
+	const { resolved, activeTheme, cssVarPrefix } = project;
 	const colorFormat = useColorFormat();
 	const rows = useMemo(() => {
 		return sortTokens(Object.entries(resolved).filter(([path, token]) => {
 			if (token.$type !== "shadow") return false;
-			return globMatch(path, filter);
+			return matchPath(path, filter);
 		}), {
 			by: sortBy,
 			dir: sortDir
@@ -2584,16 +2542,16 @@ function ShadowPreview({ filter, caption, sortBy = "path", sortDir = "asc" }) {
 		sortBy,
 		sortDir
 	]);
-	const captionText = caption ?? `${rows.length} shadow${rows.length === 1 ? "" : "s"}${filter ? ` matching \`${filter}\`` : ""} · ${activePermutation}`;
+	const captionText = caption ?? `${rows.length} shadow${rows.length === 1 ? "" : "s"}${filter ? ` matching \`${filter}\`` : ""} · ${activeTheme}`;
 	if (rows.length === 0) return /* @__PURE__ */ jsx("div", {
-		...themeAttrs(cssVarPrefix, activePermutation),
+		...themeAttrs(cssVarPrefix, activeTheme),
 		children: /* @__PURE__ */ jsx("div", {
 			className: "sb-block__empty",
 			children: "No shadow tokens match this filter."
 		})
 	});
 	return /* @__PURE__ */ jsxs("div", {
-		...themeAttrs(cssVarPrefix, activePermutation),
+		...themeAttrs(cssVarPrefix, activeTheme),
 		children: [/* @__PURE__ */ jsx("div", {
 			className: "sb-block__caption",
 			children: captionText
@@ -2676,11 +2634,11 @@ function extractCssStyle(value) {
 }
 function StrokeStyleSample({ filter, caption, sortBy = "path", sortDir = "asc" }) {
 	const project = useProject();
-	const { resolved, activePermutation, cssVarPrefix } = project;
+	const { resolved, activeTheme, cssVarPrefix } = project;
 	const rows = useMemo(() => {
 		return sortTokens(Object.entries(resolved).filter(([path, token]) => {
 			if (token.$type !== "strokeStyle") return false;
-			return globMatch(path, filter);
+			return matchPath(path, filter);
 		}), {
 			by: sortBy,
 			dir: sortDir
@@ -2697,16 +2655,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}\`` : ""} · ${activePermutation}`;
+	const captionText = caption ?? `${rows.length} strokeStyle token${rows.length === 1 ? "" : "s"}${filter && filter !== "strokeStyle" ? ` matching \`${filter}\`` : ""} · ${activeTheme}`;
 	if (rows.length === 0) return /* @__PURE__ */ jsx("div", {
-		...themeAttrs(cssVarPrefix, activePermutation),
+		...themeAttrs(cssVarPrefix, activeTheme),
 		children: /* @__PURE__ */ jsx("div", {
 			className: "sb-block__empty",
 			children: "No strokeStyle tokens match this filter."
 		})
 	});
 	return /* @__PURE__ */ jsxs("div", {
-		...themeAttrs(cssVarPrefix, activePermutation),
+		...themeAttrs(cssVarPrefix, activeTheme),
 		children: [/* @__PURE__ */ jsx("div", {
 			className: "sb-block__caption",
 			children: captionText
@@ -2743,19 +2701,19 @@ function StrokeStyleSample({ filter, caption, sortBy = "path", sortDir = "asc" }
 //#region src/token-detail/internal.ts
 function useTokenDetailData(path) {
 	const project = useProject();
-	const { activePermutation, activeAxes, axes, resolved, cssVarPrefix, varianceByPath, resolveAt, permutationNameForTuple } = project;
+	const { activeTheme, activeAxes, axes, resolved, cssVarPrefix, varianceByPath, resolveAt, themeNameForTuple } = project;
 	const typedResolved = resolved;
 	return {
 		token: typedResolved[path],
 		cssVar: resolveCssVar(path, project),
-		activePermutation,
+		activeTheme,
 		activeAxes,
 		axes,
 		resolved: typedResolved,
 		cssVarPrefix,
 		varianceByPath,
 		resolveAt,
-		permutationNameForTuple
+		themeNameForTuple
 	};
 }
 //#endregion
@@ -2769,7 +2727,7 @@ function AliasChain({ path }) {
 		return [path];
 	}, [token, path]);
 	if (chain.length <= 1) return null;
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
 		className: "sb-token-detail__section-header",
 		children: "Alias chain"
 	}), /* @__PURE__ */ jsx("div", {
@@ -2798,7 +2756,7 @@ function AliasedBy({ path }) {
 	const tree = useMemo(() => buildAliasedByTree(path, resolved), [path, resolved]);
 	const truncated = useMemo(() => treeHasTruncation(tree), [tree]);
 	if (tree.length === 0) return null;
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
 		/* @__PURE__ */ jsx("div", {
 			className: "sb-token-detail__section-header",
 			children: "Aliased by"
@@ -2880,26 +2838,31 @@ function treeHasTruncation(nodes) {
 //#endregion
 //#region src/token-detail/AxisVariance.tsx
 function AxisVariance({ path }) {
-	const { token, cssVar, axes, activeAxes, cssVarPrefix, varianceByPath, resolveAt, permutationNameForTuple } = useTokenDetailData(path);
+	const { token, cssVar, axes, activeAxes, cssVarPrefix, varianceByPath, resolveAt, themeNameForTuple } = 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 = varianceByPath[path];
-		if (!result) return {
-			kind: "constant",
-			varyingAxes: []
-		};
-		return {
-			kind: result.kind === "constant" ? "constant" : result.kind === "single" ? "one-axis" : "multi-axis",
-			varyingAxes: result.varyingAxes
-		};
+		if (!result) return { kind: "constant" };
+		switch (result.kind) {
+			case "constant": return { kind: "constant" };
+			case "single": return {
+				kind: "one-axis",
+				axis: result.axis,
+				varyingAxes: result.varyingAxes
+			};
+			case "multi": return {
+				kind: "multi-axis",
+				varyingAxes: result.varyingAxes
+			};
+		}
 	}, [path, varianceByPath]);
-	if (axes.length === 0) return /* @__PURE__ */ jsx(Fragment$1, {});
+	if (axes.length === 0) return /* @__PURE__ */ jsx(Fragment, {});
 	if (variance.kind === "constant") {
 		const value = formatFn(resolveAt(activeAxes)[path]);
-		return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
+		return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
 			className: "sb-token-detail__section-header",
 			children: "Values across axes"
 		}), /* @__PURE__ */ jsx("table", {
@@ -2930,10 +2893,9 @@ function AxisVariance({ path }) {
 		})] });
 	}
 	if (variance.kind === "one-axis") {
-		const axisName = variance.varyingAxes[0];
-		if (!axisName) return /* @__PURE__ */ jsx(Fragment$1, {});
+		const axisName = variance.axis;
 		const axis = axes.find((a) => a.name === axisName);
-		if (!axis) return /* @__PURE__ */ jsx(Fragment$1, {});
+		if (!axis) return /* @__PURE__ */ jsx(Fragment, {});
 		const contextValues = axis.contexts.map((ctx) => {
 			const target = {
 				...activeAxes,
@@ -2941,11 +2903,11 @@ function AxisVariance({ path }) {
 			};
 			return {
 				ctx,
-				themeName: permutationNameForTuple(target) ?? "",
+				themeName: themeNameForTuple(target) ?? "",
 				value: formatFn(resolveAt(target)[path])
 			};
 		});
-		return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("div", {
+		return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
 			className: "sb-token-detail__section-header",
 			children: ["Varies with ", axisName]
 		}), /* @__PURE__ */ jsx("table", {
@@ -2972,8 +2934,8 @@ function AxisVariance({ path }) {
 		})] });
 	}
 	const [rowAxis, colAxis, ...extra] = variance.varyingAxes.map((name) => axes.find((a) => a.name === name)).filter((a) => Boolean(a)).toSorted((a, b) => b.contexts.length - a.contexts.length);
-	if (!rowAxis || !colAxis) return /* @__PURE__ */ jsx(Fragment$1, {});
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+	if (!rowAxis || !colAxis) return /* @__PURE__ */ jsx(Fragment, {});
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
 		/* @__PURE__ */ jsxs("div", {
 			className: "sb-token-detail__section-header",
 			children: ["Varies with ", variance.varyingAxes.join(" × ")]
@@ -3013,7 +2975,7 @@ function AxisVariance({ path }) {
 						[rowAxis.name]: row,
 						[colAxis.name]: col
 					};
-					const name = permutationNameForTuple(target);
+					const name = themeNameForTuple(target);
 					const value = formatFn(resolveAt(target)[path]);
 					return /* @__PURE__ */ jsxs("td", {
 						className: "sb-token-detail__theme-cell",
@@ -3213,7 +3175,7 @@ function renderKeyValueList(rows) {
 }
 function KeyValueRow({ label, value, alias }) {
 	const hasAlias = alias && alias.length > 0;
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
 		className: "sb-token-detail__breakdown-key",
 		children: label
 	}), /* @__PURE__ */ jsxs("span", {
@@ -3472,7 +3434,7 @@ function ConsumerOutput({ path }) {
 	const tupleLabel = Object.entries(activeAxes).map(([k, v]) => `${k}=${v}`).join(", ");
 	const names = listing[path]?.names ?? {};
 	const extraPlatforms = Object.keys(names).filter((platform) => platform !== "css" && names[platform]).toSorted();
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
 		/* @__PURE__ */ jsx("div", {
 			className: "sb-token-detail__section-header",
 			children: "Consumer output"
@@ -3550,18 +3512,18 @@ async function copyToClipboard(text) {
 //#endregion
 //#region src/token-detail/TokenHeader.tsx
 function TokenHeader({ path, heading }) {
-	const { token, cssVar, activePermutation } = useTokenDetailData(path);
+	const { token, cssVar, activeTheme } = useTokenDetailData(path);
 	if (!token) return /* @__PURE__ */ jsxs("div", {
 		className: "sb-token-detail__missing",
 		children: [
 			"Token ",
 			/* @__PURE__ */ jsx("code", { children: path }),
 			" not found in theme ",
-			/* @__PURE__ */ jsx("strong", { children: activePermutation }),
+			/* @__PURE__ */ jsx("strong", { children: activeTheme }),
 			"."
 		]
 	});
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
 		/* @__PURE__ */ jsx("h3", {
 			className: "sb-token-detail__heading",
 			children: heading ?? path
@@ -3585,7 +3547,7 @@ function TokenUsageSnippet({ path }) {
 	const { token, cssVar } = useTokenDetailData(path);
 	if (!token) return null;
 	const snippet = `color: ${cssVar};`;
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
 		className: "sb-token-detail__section-header",
 		children: "Usage"
 	}), /* @__PURE__ */ jsxs("div", {
@@ -3602,9 +3564,9 @@ function TokenUsageSnippet({ path }) {
 //#endregion
 //#region src/TokenDetail.tsx
 function TokenDetail({ path, heading }) {
-	const { token, cssVar, activePermutation, cssVarPrefix } = useTokenDetailData(path);
+	const { token, cssVar, activeTheme, cssVarPrefix } = useTokenDetailData(path);
 	const colorFormat = useColorFormat();
-	const theme = themeAttrs(cssVarPrefix, activePermutation);
+	const theme = themeAttrs(cssVarPrefix, activeTheme);
 	if (!token) return /* @__PURE__ */ jsx("div", {
 		...theme,
 		className: cx(theme["className"], "sb-token-detail"),
@@ -3614,7 +3576,7 @@ function TokenDetail({ path, heading }) {
 				"Token ",
 				/* @__PURE__ */ jsx("code", { children: path }),
 				" not found in theme ",
-				/* @__PURE__ */ jsx("strong", { children: activePermutation }),
+				/* @__PURE__ */ jsx("strong", { children: activeTheme }),
 				"."
 			]
 		})
@@ -3634,7 +3596,7 @@ function TokenDetail({ path, heading }) {
 			}),
 			/* @__PURE__ */ jsxs("div", {
 				className: "sb-token-detail__section-header",
-				children: ["Resolved value · ", activePermutation]
+				children: ["Resolved value · ", activeTheme]
 			}),
 			/* @__PURE__ */ jsx(CompositePreview, { path }),
 			/* @__PURE__ */ jsx(CompositeBreakdown, { path }),
@@ -3775,6 +3737,7 @@ function buildTree(resolved, root, typeFilter) {
 		let node = rootNode;
 		for (let i = 0; i < segments.length - 1; i += 1) {
 			const seg = segments[i];
+			if (seg === void 0) continue;
 			const prefix = [...rootSegments, ...segments.slice(0, i + 1)].join(".");
 			let child = node.children.find((c) => c.kind === "group" && c.segment === seg);
 			if (!child) {
@@ -3862,7 +3825,7 @@ function pruneTreeForMatches(nodes, matches, expandOut) {
 	return out;
 }
 function TokenNavigator({ root, type, initiallyExpanded = 1, searchable = true, onSelect }) {
-	const { resolved, activePermutation, cssVarPrefix } = useProject();
+	const { resolved, activeTheme, cssVarPrefix } = useProject();
 	const typeFilter = useMemo(() => {
 		if (type === void 0) return void 0;
 		return new Set(Array.isArray(type) ? type : [type]);
@@ -4047,11 +4010,11 @@ function TokenNavigator({ root, type, initiallyExpanded = 1, searchable = true,
 		return n;
 	}, [visibleTree, searchExpanded]);
 	if (tree.length === 0) return /* @__PURE__ */ jsx("div", {
-		...themeAttrs(cssVarPrefix, activePermutation),
+		...themeAttrs(cssVarPrefix, activeTheme),
 		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, activePermutation),
+		...themeAttrs(cssVarPrefix, activeTheme),
 		children: [
 			searchable && /* @__PURE__ */ jsx("div", {
 				className: "sb-token-navigator__search",
@@ -4071,9 +4034,8 @@ function TokenNavigator({ root, type, initiallyExpanded = 1, searchable = true,
 					root ? `Tokens under ${root}` : "Token graph",
 					typeLabel,
 					trimmedQuery !== "" ? ` · ${matchCount} matching "${trimmedQuery}"` : "",
-					" ·",
-					" ",
-					activePermutation
+					" · ",
+					activeTheme
 				]
 			}),
 			visibleTree.length === 0 ? /* @__PURE__ */ jsxs("div", {
@@ -4261,13 +4223,13 @@ 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, activePermutation, cssVarPrefix } = project;
+	const { resolved, activeTheme, cssVarPrefix } = project;
 	const colorFormat = useColorFormat();
 	const [selectedPath, setSelectedPath] = useState(null);
 	const [query, setQuery] = useState("");
 	const rows = useMemo(() => {
 		return sortTokens(Object.entries(resolved).filter(([path, token]) => {
-			if (!globMatch(path, filter)) return false;
+			if (!matchPath(path, filter)) return false;
 			if (type && token.$type !== type) return false;
 			return true;
 		}), {
@@ -4307,16 +4269,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} · ${activePermutation}`;
+	const captionText = caption ?? `${rows.length} token${rows.length === 1 ? "" : "s"}${filter ? ` matching \`${filter}\`` : ""}${type ? ` · $type=${type}` : ""}${matchSuffix} · ${activeTheme}`;
 	if (rows.length === 0) return /* @__PURE__ */ jsx("div", {
-		...themeAttrs(cssVarPrefix, activePermutation),
+		...themeAttrs(cssVarPrefix, activeTheme),
 		children: /* @__PURE__ */ jsx("div", {
 			className: "sb-block__empty",
 			children: "No tokens match this filter."
 		})
 	});
 	return /* @__PURE__ */ jsxs("div", {
-		...themeAttrs(cssVarPrefix, activePermutation),
+		...themeAttrs(cssVarPrefix, activeTheme),
 		children: [
 			searchable && /* @__PURE__ */ jsx("div", {
 				className: "sb-token-table__search",
@@ -4456,11 +4418,11 @@ function buildRow(path, composite) {
 	};
 }
 function TypographyScale({ filter, sample = "The quick brown fox jumps over the lazy dog.", caption, sortBy = "path", sortDir = "asc" }) {
-	const { resolved, activePermutation, cssVarPrefix } = useProject();
+	const { resolved, activeTheme, cssVarPrefix } = useProject();
 	const rows = useMemo(() => {
 		return sortTokens(Object.entries(resolved).filter(([path, token]) => {
 			if (token.$type !== "typography") return false;
-			return globMatch(path, filter);
+			return matchPath(path, filter);
 		}), {
 			by: sortBy,
 			dir: sortDir
@@ -4479,16 +4441,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}\`` : ""} · ${activePermutation}`;
+	const captionText = caption ?? `${rows.length} typography token${rows.length === 1 ? "" : "s"}${filter && filter !== "typography" ? ` matching \`${filter}\`` : ""} · ${activeTheme}`;
 	if (rows.length === 0) return /* @__PURE__ */ jsx("div", {
-		...themeAttrs(cssVarPrefix, activePermutation),
+		...themeAttrs(cssVarPrefix, activeTheme),
 		children: /* @__PURE__ */ jsx("div", {
 			className: "sb-block__empty",
 			children: "No typography tokens match this filter."
 		})
 	});
 	return /* @__PURE__ */ jsxs("div", {
-		...themeAttrs(cssVarPrefix, activePermutation),
+		...themeAttrs(cssVarPrefix, activeTheme),
 		children: [/* @__PURE__ */ jsx("div", {
 			className: "sb-block__caption",
 			children: captionText
@@ -4511,6 +4473,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, PermutationContext, ShadowPreview, ShadowSample, StrokeStyleSample, SwatchbookContext, SwatchbookProvider, TokenDetail, TokenHeader, TokenNavigator, TokenTable, TokenUsageSnippet, TypographyScale, formatColor, useActiveAxes, useActivePermutation, 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, ShadowPreview, ShadowSample, StrokeStyleSample, SwatchbookContext, SwatchbookProvider, ThemeContext, TokenDetail, TokenHeader, TokenNavigator, TokenTable, TokenUsageSnippet, TypographyScale, formatColor, useActiveAxes, useActiveTheme, useColorFormat, useOptionalSwatchbookData, useSwatchbookData };
 
 //# sourceMappingURL=index.mjs.map