@unpunnyfuns/swatchbook-blocks 0.56.0 → 0.57.0

package/dist/index.mjs

@@ -1,12 +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 "@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
@@ -282,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.
 */
@@ -383,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 = {};
@@ -400,15 +395,6 @@ function defaultTuple$1(axes) {
 	return out;
 }
 /**
-* 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(" · ");
-}
-/**
 * 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
@@ -454,7 +440,7 @@ function useProject() {
 	const jointOverrides = snapshot?.jointOverrides;
 	const dataDefaultTuple = snapshot?.defaultTuple;
 	const activeAxes = snapshot?.activeAxes;
-	const activePermutation = snapshot?.activePermutation;
+	const activeTheme = snapshot?.activeTheme;
 	const diagnostics = snapshot?.diagnostics;
 	const cssVarPrefix = snapshot?.cssVarPrefix;
 	const listing = snapshot?.listing;
@@ -467,12 +453,12 @@ function useProject() {
 		cells,
 		jointOverrides,
 		dataDefaultTuple,
-		activePermutation
+		activeTheme
 	]);
 	const providerData = useMemo(() => {
 		if (!snapshot || !resolveAt || !axes || !activeAxes) return null;
 		return {
-			activePermutation: activePermutation ?? "",
+			activeTheme: activeTheme ?? "",
 			activeAxes,
 			axes,
 			resolved: resolveAt(activeAxes),
@@ -481,7 +467,7 @@ function useProject() {
 			listing: listing ?? {},
 			varianceByPath: varianceByPath ?? {},
 			resolveAt,
-			permutationNameForTuple: (tuple) => tupleToName(axes, tuple)
+			themeNameForTuple: (tuple) => tupleToName(axes, tuple)
 		};
 	}, [
 		snapshot,
@@ -490,7 +476,7 @@ function useProject() {
 		cells,
 		jointOverrides,
 		dataDefaultTuple,
-		activePermutation,
+		activeTheme,
 		activeAxes,
 		diagnostics,
 		cssVarPrefix,
@@ -501,7 +487,7 @@ function useProject() {
 	return providerData ?? fallback;
 }
 function useVirtualModuleFallback(enabled) {
-	const contextPermutation = useActivePermutation();
+	const contextPermutation = useActiveTheme();
 	const contextAxes = useActiveAxes();
 	const channelGlobals = useChannelGlobals();
 	/**
@@ -523,7 +509,7 @@ function useVirtualModuleFallback(enabled) {
 		channelGlobals.axes,
 		tokens.axes
 	]);
-	const activePermutation = contextPermutation || tupleToName(tokens.axes, activeAxes);
+	const activeTheme = contextPermutation || tupleToName(tokens.axes, activeAxes);
 	const resolveAt = useMemo(() => makeResolveAt({
 		axes: tokens.axes,
 		cells: tokens.cells,
@@ -536,7 +522,7 @@ function useVirtualModuleFallback(enabled) {
 		tokens.defaultTuple
 	]);
 	return useMemo(() => ({
-		activePermutation,
+		activeTheme,
 		activeAxes,
 		axes: tokens.axes,
 		resolved: resolveAt(activeAxes),
@@ -545,9 +531,9 @@ function useVirtualModuleFallback(enabled) {
 		listing: tokens.listing,
 		varianceByPath: tokens.varianceByPath,
 		resolveAt,
-		permutationNameForTuple: (tuple) => tupleToName(tokens.axes, tuple)
+		themeNameForTuple: (tuple) => tupleToName(tokens.axes, tuple)
 	}), [
-		activePermutation,
+		activeTheme,
 		activeAxes,
 		tokens.axes,
 		tokens.diagnostics,
@@ -592,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 = {
@@ -814,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
@@ -835,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
@@ -907,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
@@ -946,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
@@ -1042,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({});
@@ -1051,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
@@ -1129,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", {
@@ -1560,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,
@@ -1782,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
@@ -1807,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
@@ -1864,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
@@ -1884,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
@@ -1950,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
@@ -1971,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
@@ -2030,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
@@ -2051,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
@@ -2297,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",
@@ -2332,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",
@@ -2415,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
@@ -2442,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."
@@ -2452,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
@@ -2560,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
@@ -2581,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
@@ -2673,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
@@ -2694,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
@@ -2740,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
@@ -2766,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", {
@@ -2795,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"
@@ -2877,7 +2838,7 @@ 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";
@@ -2898,10 +2859,10 @@ function AxisVariance({ path }) {
 			};
 		}
 	}, [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", {
@@ -2934,7 +2895,7 @@ function AxisVariance({ path }) {
 	if (variance.kind === "one-axis") {
 		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,
@@ -2942,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", {
@@ -2973,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(" × ")]
@@ -3014,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",
@@ -3214,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", {
@@ -3473,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"
@@ -3551,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
@@ -3586,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", {
@@ -3603,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"),
@@ -3615,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 }),
 				"."
 			]
 		})
@@ -3635,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 }),
@@ -3864,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]);
@@ -4049,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",
@@ -4073,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", {
@@ -4263,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;
 		}), {
@@ -4309,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",
@@ -4458,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
@@ -4481,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
@@ -4513,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