@unpunnyfuns/swatchbook-blocks 0.54.0 → 0.56.0

package/dist/index.mjs

@@ -2,12 +2,13 @@ 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 { makeCSSVar } from "@terrazzo/token-tools/css";
+import { buildResolveAt } from "@unpunnyfuns/swatchbook-core/resolve-at";
+import { makeCssVar } from "@unpunnyfuns/swatchbook-core/css-var";
 import { addons } from "storybook/preview-api";
-import { axes, css, cssVarPrefix, defaultPermutation, diagnostics, listing, permutations, permutationsResolved, presets } from "virtual:swatchbook/tokens";
+import { axes, cells, css, cssVarPrefix, defaultTuple, diagnostics, jointOverrides, listing, presets, varianceByPath } from "virtual:swatchbook/tokens";
+import { dataAttr } from "@unpunnyfuns/swatchbook-core/data-attr";
 import { fuzzyFilter } from "@unpunnyfuns/swatchbook-core/fuzzy";
 import cx from "clsx";
-import { analyzeAxisVariance } from "@unpunnyfuns/swatchbook-core/variance";
 //#region src/format-color.ts
 const COLOR_FORMATS = [
 	"hex",
@@ -56,7 +57,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 +219,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);
@@ -343,13 +335,14 @@ const TOKENS_UPDATED_EVENT = "swatchbook/tokens-updated";
 let snapshot = {
 	axes,
 	presets,
-	permutations,
-	defaultPermutation,
-	permutationsResolved,
 	diagnostics,
 	css,
 	cssVarPrefix,
 	listing: listing ?? {},
+	cells: cells ?? {},
+	jointOverrides: jointOverrides ?? [],
+	varianceByPath: varianceByPath ?? {},
+	defaultTuple: defaultTuple ?? {},
 	version: 0
 };
 const listeners = /* @__PURE__ */ new Set();
@@ -361,13 +354,14 @@ function ensureSubscribed() {
 		snapshot = {
 			axes: payload.axes ?? snapshot.axes,
 			presets: payload.presets ?? snapshot.presets,
-			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,
 			listing: payload.listing ?? snapshot.listing,
+			cells: payload.cells ?? snapshot.cells,
+			jointOverrides: payload.jointOverrides ?? snapshot.jointOverrides,
+			varianceByPath: payload.varianceByPath ?? snapshot.varianceByPath,
+			defaultTuple: payload.defaultTuple ?? snapshot.defaultTuple,
 			version: snapshot.version + 1
 		};
 		for (const cb of listeners) cb();
@@ -400,31 +394,46 @@ function ensureStylesheet(css) {
 	}
 	if (style.textContent !== css) style.textContent = css;
 }
-function defaultTuple(axes) {
+function defaultTuple$1(axes) {
 	const out = {};
 	for (const axis of axes) out[axis.name] = axis.default;
 	return out;
 }
-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;
+/**
+* Synthesize a permutation name from a tuple — same form
+* `permutationID` produces server-side (axis values joined by ` · `).
+* Used by the AxisVariance grid for `data-<prefix>-theme` attribution
+* and similar display-only callers.
+*/
+function tupleToName(axes, tuple) {
+	return axes.map((a) => tuple[a.name] ?? a.default).join(" · ");
 }
-function nameForTuple(themesList, tuple) {
-	return themesList.find((t) => tuplesEqual(t.input, tuple))?.name;
+/**
+* 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 = snapshot.jointOverrides ?? [];
+	const defaults = snapshot.defaultTuple ?? defaultTuple$1(snapshot.axes);
+	const resolver = buildResolveAt(snapshot.axes, cells, jointOverrides, defaults);
+	return (tuple) => resolver(tuple);
 }
-function snapshotToData(snapshot) {
-	return {
-		activePermutation: snapshot.activePermutation,
-		activeAxes: { ...snapshot.activeAxes },
-		axes: snapshot.axes,
-		permutations: snapshot.permutations,
-		permutationsResolved: snapshot.permutationsResolved,
-		resolved: snapshot.permutationsResolved[snapshot.activePermutation] ?? {},
-		diagnostics: snapshot.diagnostics,
-		cssVarPrefix: snapshot.cssVarPrefix,
-		listing: snapshot.listing ?? {}
-	};
+/**
+* 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`), 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;
+	return makeResolveAt(snapshot);
 }
 /**
 * Reads project data either from a mounted {@link SwatchbookProvider}
@@ -440,8 +449,56 @@ function snapshotToData(snapshot) {
 */
 function useProject() {
 	const snapshot = useOptionalSwatchbookData();
+	const axes = snapshot?.axes;
+	const cells = snapshot?.cells;
+	const jointOverrides = snapshot?.jointOverrides;
+	const dataDefaultTuple = snapshot?.defaultTuple;
+	const activeAxes = snapshot?.activeAxes;
+	const activePermutation = snapshot?.activePermutation;
+	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);
+	}, [
+		axes,
+		cells,
+		jointOverrides,
+		dataDefaultTuple,
+		activePermutation
+	]);
+	const providerData = useMemo(() => {
+		if (!snapshot || !resolveAt || !axes || !activeAxes) return null;
+		return {
+			activePermutation: activePermutation ?? "",
+			activeAxes,
+			axes,
+			resolved: resolveAt(activeAxes),
+			diagnostics: diagnostics ?? [],
+			cssVarPrefix: cssVarPrefix ?? "",
+			listing: listing ?? {},
+			varianceByPath: varianceByPath ?? {},
+			resolveAt,
+			permutationNameForTuple: (tuple) => tupleToName(axes, tuple)
+		};
+	}, [
+		snapshot,
+		resolveAt,
+		axes,
+		cells,
+		jointOverrides,
+		dataDefaultTuple,
+		activePermutation,
+		activeAxes,
+		diagnostics,
+		cssVarPrefix,
+		listing,
+		varianceByPath
+	]);
 	const fallback = useVirtualModuleFallback(snapshot === null);
-	return snapshot !== null ? snapshotToData(snapshot) : fallback;
+	return providerData ?? fallback;
 }
 function useVirtualModuleFallback(enabled) {
 	const contextPermutation = useActivePermutation();
@@ -459,32 +516,46 @@ function useVirtualModuleFallback(enabled) {
 		if (!enabled) return;
 		ensureStylesheet(tokens.css);
 	}, [enabled, tokens.css]);
-	const activeAxes = Object.keys(contextAxes).length > 0 ? { ...contextAxes } : channelGlobals.axes ?? defaultTuple(tokens.axes);
-	const derivedName = nameForTuple(tokens.permutations, activeAxes);
-	const activePermutation = contextPermutation || derivedName || tokens.defaultPermutation || tokens.permutations[0]?.name || "";
-	return {
+	const activeAxes = useMemo(() => {
+		return Object.keys(contextAxes).length > 0 ? { ...contextAxes } : channelGlobals.axes ?? defaultTuple$1(tokens.axes);
+	}, [
+		contextAxes,
+		channelGlobals.axes,
+		tokens.axes
+	]);
+	const activePermutation = contextPermutation || tupleToName(tokens.axes, activeAxes);
+	const resolveAt = useMemo(() => makeResolveAt({
+		axes: tokens.axes,
+		cells: tokens.cells,
+		jointOverrides: tokens.jointOverrides,
+		defaultTuple: tokens.defaultTuple
+	}), [
+		tokens.axes,
+		tokens.cells,
+		tokens.jointOverrides,
+		tokens.defaultTuple
+	]);
+	return useMemo(() => ({
 		activePermutation,
 		activeAxes,
 		axes: tokens.axes,
-		permutations: tokens.permutations,
-		permutationsResolved: tokens.permutationsResolved,
-		resolved: tokens.permutationsResolved[activePermutation] ?? {},
+		resolved: resolveAt(activeAxes),
 		diagnostics: tokens.diagnostics,
 		cssVarPrefix: tokens.cssVarPrefix,
-		listing: tokens.listing
-	};
-}
-/**
-* Thin wrapper around Terrazzo's `makeCSSVar` so the block-display surface
-* and `packages/core/src/css.ts`'s emitter share one implementation. Any
-* future naming-policy shift in Terrazzo (casing, unicode, prefix handling)
-* reaches both surfaces at once instead of needing a parallel update here.
-*/
-function makeCssVar(path, prefix) {
-	return prefix ? makeCSSVar(path, {
-		prefix,
-		wrapVar: true
-	}) : makeCSSVar(path, { wrapVar: true });
+		listing: tokens.listing,
+		varianceByPath: tokens.varianceByPath,
+		resolveAt,
+		permutationNameForTuple: (tuple) => tupleToName(tokens.axes, tuple)
+	}), [
+		activePermutation,
+		activeAxes,
+		tokens.axes,
+		tokens.diagnostics,
+		tokens.cssVarPrefix,
+		tokens.listing,
+		tokens.varianceByPath,
+		resolveAt
+	]);
 }
 /**
 * Resolve a token's CSS var reference, preferring the authoritative name
@@ -567,15 +638,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).
@@ -610,59 +672,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) {
@@ -682,6 +758,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 {
@@ -698,9 +782,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;
@@ -2030,9 +2114,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;
@@ -2656,7 +2740,7 @@ function StrokeStyleSample({ filter, caption, sortBy = "path", sortDir = "asc" }
 //#region src/token-detail/internal.ts
 function useTokenDetailData(path) {
 	const project = useProject();
-	const { activePermutation, activeAxes, axes, permutations, permutationsResolved, resolved, cssVarPrefix } = project;
+	const { activePermutation, activeAxes, axes, resolved, cssVarPrefix, varianceByPath, resolveAt, permutationNameForTuple } = project;
 	const typedResolved = resolved;
 	return {
 		token: typedResolved[path],
@@ -2664,10 +2748,11 @@ function useTokenDetailData(path) {
 		activePermutation,
 		activeAxes,
 		axes,
-		permutations,
-		permutationsResolved,
 		resolved: typedResolved,
-		cssVarPrefix
+		cssVarPrefix,
+		varianceByPath,
+		resolveAt,
+		permutationNameForTuple
 	};
 }
 //#endregion
@@ -2792,27 +2877,30 @@ function treeHasTruncation(nodes) {
 //#endregion
 //#region src/token-detail/AxisVariance.tsx
 function AxisVariance({ path }) {
-	const { token, cssVar, axes, permutations, permutationsResolved, activeAxes, cssVarPrefix } = useTokenDetailData(path);
+	const { token, cssVar, axes, activeAxes, cssVarPrefix, varianceByPath, resolveAt, permutationNameForTuple } = 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, permutations, permutationsResolved);
-		return {
-			kind: result.kind === "constant" ? "constant" : result.kind === "single" ? "one-axis" : "multi-axis",
-			varyingAxes: result.varyingAxes
-		};
-	}, [
-		path,
-		axes,
-		permutations,
-		permutationsResolved
-	]);
-	if (permutations.length === 0) return /* @__PURE__ */ jsx(Fragment$1, {});
+		const result = varianceByPath[path];
+		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 (variance.kind === "constant") {
-		const anyPermutation = permutations[0];
-		const value = anyPermutation ? formatFn(permutationsResolved[anyPermutation.name]?.[path]) : "—";
+		const value = formatFn(resolveAt(activeAxes)[path]);
 		return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
 			className: "sb-token-detail__section-header",
 			children: "Values across axes"
@@ -2831,16 +2919,12 @@ function AxisVariance({ path }) {
 							"aria-hidden": true
 						}),
 						value,
-						/* @__PURE__ */ jsxs("span", {
+						/* @__PURE__ */ jsx("span", {
 							style: {
 								opacity: .6,
 								marginLeft: 8
 							},
-							children: [
-								"same across all ",
-								permutations.length,
-								" tuples"
-							]
+							children: "same across every axis"
 						})
 					]
 				})
@@ -2848,8 +2932,7 @@ 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, {});
 		const contextValues = axis.contexts.map((ctx) => {
@@ -2857,14 +2940,10 @@ function AxisVariance({ path }) {
 				...activeAxes,
 				[axisName]: ctx
 			};
-			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(permutationsResolved[name]?.[path]) : "—"
+				themeName: permutationNameForTuple(target) ?? "",
+				value: formatFn(resolveAt(target)[path])
 			};
 		});
 		return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("div", {
@@ -2930,12 +3009,13 @@ function AxisVariance({ path }) {
 					className: "sb-token-detail__theme-cell",
 					children: row
 				}), colAxis.contexts.map((col) => {
-					const name = tupleName(permutations, {
+					const target = {
 						...activeAxes,
 						[rowAxis.name]: row,
 						[colAxis.name]: col
-					});
-					const value = name ? formatFn(permutationsResolved[name]?.[path]) : "—";
+					};
+					const name = permutationNameForTuple(target);
+					const value = formatFn(resolveAt(target)[path]);
 					return /* @__PURE__ */ jsxs("td", {
 						className: "sb-token-detail__theme-cell",
 						"data-row": row,
@@ -2965,12 +3045,6 @@ function valueFor(token, $type, format) {
 	if (!token) return "—";
 	return formatTokenValue(token.$value, $type, format);
 }
-function tupleName(permutations, tuple) {
-	return permutations.find((t) => {
-		const input = t.input;
-		return Object.keys(input).every((k) => input[k] === tuple[k]);
-	})?.name;
-}
 //#endregion
 //#region src/token-detail/CompositeBreakdown.tsx
 function CompositeBreakdown({ path }) {
@@ -3702,6 +3776,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) {