@unpunnyfuns/swatchbook-blocks 0.1.5 → 0.2.1

package/README.md

@@ -2,7 +2,7 @@
 
 Published as `@unpunnyfuns/swatchbook-blocks`. Storybook MDX doc blocks for DTCG design tokens. React components for rendering token documentation inside `.mdx` pages or regular stories. Self-mount the addon's CSS and react to axis changes from the toolbar; work inside the docs container even though story decorators don't.
 
-> **Documentation:** [unpunnyfuns.github.io/swatchbook](https://unpunnyfuns.github.io/swatchbook/). Token parsing powered by [Terrazzo](https://terrazzo.app/) by [Drew Powers](https://github.com/drwpow) via `@unpunnyfuns/swatchbook-core`.
+> **Documentation:** [unpunnyfuns.github.io/swatchbook](https://unpunnyfuns.github.io/swatchbook/). Token parsing powered by [Terrazzo](https://terrazzo.app/) by the [Terrazzo team](https://github.com/terrazzoapp) via `@unpunnyfuns/swatchbook-core`.
 
 ## Install
 

package/dist/index.d.mts

@@ -241,7 +241,7 @@ interface VirtualAxisShape {
   contexts: readonly string[];
   default: string;
   description?: string;
-  source: 'resolver' | 'synthetic';
+  source: 'resolver' | 'layered' | 'synthetic';
 }
 interface VirtualThemeShape {
   name: string;

package/dist/index.mjs

@@ -178,6 +178,61 @@ function stringifyFallback(value, fallback) {
 	return fallback;
 }
 //#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}`;
+}
+/**
+* Spread helper for the common `<div data-<prefix>-theme="…">` block
+* wrapper. Returns an object keyed on the prefixed attribute name so the
+* call site stays readable: `<div {...themeAttrs(prefix, theme)} />`.
+*/
+function themeAttrs(prefix, themeName) {
+	return { [dataAttr(prefix, "theme")]: themeName };
+}
+/**
+* Vars block chrome reads by literal `var(--sb-*)` regardless of what the
+* project's actual `cssVarPrefix` is. Keeping the literal spelling means we
+* only need to alias these few names on each block wrapper; the bulk of
+* block styling stays untouched.
+*/
+const CHROME_VARS = [
+	"color-sys-border-default",
+	"color-sys-surface-default",
+	"color-sys-surface-muted",
+	"color-sys-surface-raised",
+	"color-sys-text-default",
+	"color-sys-text-muted",
+	"color-sys-accent-bg",
+	"color-sys-accent-fg",
+	"typography-sys-body-font-family",
+	"typography-sys-body-font-size"
+];
+/**
+* CSS custom-property aliases that redirect the block chrome's `var(--sb-*)`
+* reads to the project's actual `cssVarPrefix`. Block components spread the
+* return into their wrapper's inline `style`, so the aliases cascade down
+* into every nested block / sample / token-detail piece without each one
+* re-reading the prefix.
+*
+* When `prefix === 'sb'` the aliases are self-references — we skip emission
+* to keep the inline style shorter. When `prefix === ''` (opt-out) the
+* aliases point at the bare `var(--color-sys-…)` names core emitted.
+*/
+function chromeAliases(prefix) {
+	if (prefix === "sb") return {};
+	const out = {};
+	const head = prefix ? `${prefix}-` : "";
+	for (const name of CHROME_VARS) out[`--sb-${name}`] = `var(--${head}${name})`;
+	return out;
+}
+//#endregion
 //#region src/internal/channel-globals.ts
 const AXES_GLOBAL_KEY = "swatchbookAxes";
 const THEME_GLOBAL_KEY = "swatchbookTheme";
@@ -420,6 +475,7 @@ function BorderSample({ path }) {
 	const cssVar = makeCssVar(path, cssVarPrefix);
 	return /* @__PURE__ */ jsx("div", {
 		style: {
+			...chromeAliases(cssVarPrefix),
 			...sampleStyle$1,
 			border: cssVar
 		},
@@ -541,16 +597,22 @@ function BorderPreview({ filter = "border", caption }) {
 	]);
 	const captionText = caption ?? `${rows.length} border${rows.length === 1 ? "" : "s"}${filter ? ` matching \`${filter}\`` : ""} · ${activeTheme}`;
 	if (rows.length === 0) return /* @__PURE__ */ jsx("div", {
-		"data-theme": activeTheme,
-		style: styles$14.wrapper,
+		...themeAttrs(cssVarPrefix, activeTheme),
+		style: {
+			...chromeAliases(cssVarPrefix),
+			...styles$14.wrapper
+		},
 		children: /* @__PURE__ */ jsx("div", {
 			style: styles$14.empty,
 			children: "No border tokens match this filter."
 		})
 	});
 	return /* @__PURE__ */ jsxs("div", {
-		"data-theme": activeTheme,
-		style: styles$14.wrapper,
+		...themeAttrs(cssVarPrefix, activeTheme),
+		style: {
+			...chromeAliases(cssVarPrefix),
+			...styles$14.wrapper
+		},
 		children: [/* @__PURE__ */ jsx("div", {
 			style: styles$14.caption,
 			children: captionText
@@ -701,15 +763,18 @@ function ColorPalette({ filter = "color", groupBy, caption }) {
 	const totalCount = groups.reduce((acc, [, swatches]) => acc + swatches.length, 0);
 	const captionText = caption ?? `${totalCount} color${totalCount === 1 ? "" : "s"}${filter ? ` matching \`${filter}\`` : ""} · ${activeTheme}`;
 	if (totalCount === 0) return /* @__PURE__ */ jsx("div", {
-		"data-theme": activeTheme,
-		style: styles$13.wrapper,
+		...themeAttrs(cssVarPrefix, activeTheme),
+		style: {
+			...chromeAliases(cssVarPrefix),
+			...styles$13.wrapper
+		},
 		children: /* @__PURE__ */ jsx("div", {
 			style: styles$13.empty,
 			children: "No color tokens match this filter."
 		})
 	});
 	return /* @__PURE__ */ jsxs("div", {
-		"data-theme": activeTheme,
+		...themeAttrs(cssVarPrefix, activeTheme),
 		style: styles$13.wrapper,
 		children: [/* @__PURE__ */ jsx("div", {
 			style: styles$13.caption,
@@ -795,9 +860,11 @@ function DimensionBar({ path, kind = "length" }) {
 	const token = resolved[path];
 	const pxValue = toPixels$1(token?.$value);
 	const cappedValue = Number.isFinite(pxValue) && pxValue > MAX_RENDER_PX$1 ? `${MAX_RENDER_PX$1}px` : cssVar;
+	const aliases = chromeAliases(cssVarPrefix);
 	switch (kind) {
 		case "radius": return /* @__PURE__ */ jsx("div", {
 			style: {
+				...aliases,
 				...styles$12.radiusSample,
 				borderRadius: cssVar
 			},
@@ -805,6 +872,7 @@ function DimensionBar({ path, kind = "length" }) {
 		});
 		case "size": return /* @__PURE__ */ jsx("div", {
 			style: {
+				...aliases,
 				...styles$12.sizeSample,
 				width: cappedValue,
 				height: cappedValue
@@ -813,6 +881,7 @@ function DimensionBar({ path, kind = "length" }) {
 		});
 		default: return /* @__PURE__ */ jsx("div", {
 			style: {
+				...aliases,
 				...styles$12.bar,
 				width: cappedValue
 			},
@@ -914,16 +983,22 @@ function DimensionScale({ filter = "dimension", kind = "length", caption }) {
 	]);
 	const captionText = caption ?? `${rows.length} dimension${rows.length === 1 ? "" : "s"}${filter ? ` matching \`${filter}\`` : ""} · ${activeTheme}`;
 	if (rows.length === 0) return /* @__PURE__ */ jsx("div", {
-		"data-theme": activeTheme,
-		style: styles$11.wrapper,
+		...themeAttrs(cssVarPrefix, activeTheme),
+		style: {
+			...chromeAliases(cssVarPrefix),
+			...styles$11.wrapper
+		},
 		children: /* @__PURE__ */ jsx("div", {
 			style: styles$11.empty,
 			children: "No dimension tokens match this filter."
 		})
 	});
 	return /* @__PURE__ */ jsxs("div", {
-		"data-theme": activeTheme,
-		style: styles$11.wrapper,
+		...themeAttrs(cssVarPrefix, activeTheme),
+		style: {
+			...chromeAliases(cssVarPrefix),
+			...styles$11.wrapper
+		},
 		children: [/* @__PURE__ */ jsx("div", {
 			style: styles$11.caption,
 			children: captionText
@@ -1027,16 +1102,22 @@ function FontFamilySample({ filter = "fontFamily", sample = "The quick brown fox
 	]);
 	const captionText = caption ?? `${rows.length} fontFamily token${rows.length === 1 ? "" : "s"}${filter && filter !== "fontFamily" ? ` matching \`${filter}\`` : ""} · ${activeTheme}`;
 	if (rows.length === 0) return /* @__PURE__ */ jsx("div", {
-		"data-theme": activeTheme,
-		style: styles$10.wrapper,
+		...themeAttrs(cssVarPrefix, activeTheme),
+		style: {
+			...chromeAliases(cssVarPrefix),
+			...styles$10.wrapper
+		},
 		children: /* @__PURE__ */ jsx("div", {
 			style: styles$10.empty,
 			children: "No fontFamily tokens match this filter."
 		})
 	});
 	return /* @__PURE__ */ jsxs("div", {
-		"data-theme": activeTheme,
-		style: styles$10.wrapper,
+		...themeAttrs(cssVarPrefix, activeTheme),
+		style: {
+			...chromeAliases(cssVarPrefix),
+			...styles$10.wrapper
+		},
 		children: [/* @__PURE__ */ jsx("div", {
 			style: styles$10.caption,
 			children: captionText
@@ -1144,16 +1225,22 @@ function FontWeightScale({ filter = "fontWeight", sample = "Aa", caption }) {
 	]);
 	const captionText = caption ?? `${rows.length} fontWeight token${rows.length === 1 ? "" : "s"}${filter && filter !== "fontWeight" ? ` matching \`${filter}\`` : ""} · ${activeTheme}`;
 	if (rows.length === 0) return /* @__PURE__ */ jsx("div", {
-		"data-theme": activeTheme,
-		style: styles$9.wrapper,
+		...themeAttrs(cssVarPrefix, activeTheme),
+		style: {
+			...chromeAliases(cssVarPrefix),
+			...styles$9.wrapper
+		},
 		children: /* @__PURE__ */ jsx("div", {
 			style: styles$9.empty,
 			children: "No fontWeight tokens match this filter."
 		})
 	});
 	return /* @__PURE__ */ jsxs("div", {
-		"data-theme": activeTheme,
-		style: styles$9.wrapper,
+		...themeAttrs(cssVarPrefix, activeTheme),
+		style: {
+			...chromeAliases(cssVarPrefix),
+			...styles$9.wrapper
+		},
 		children: [/* @__PURE__ */ jsx("div", {
 			style: styles$9.caption,
 			children: captionText
@@ -1281,16 +1368,22 @@ function GradientPalette({ filter = "gradient", caption }) {
 	]);
 	const captionText = caption ?? `${rows.length} gradient${rows.length === 1 ? "" : "s"}${filter ? ` matching \`${filter}\`` : ""} · ${activeTheme}`;
 	if (rows.length === 0) return /* @__PURE__ */ jsx("div", {
-		"data-theme": activeTheme,
-		style: styles$8.wrapper,
+		...themeAttrs(cssVarPrefix, activeTheme),
+		style: {
+			...chromeAliases(cssVarPrefix),
+			...styles$8.wrapper
+		},
 		children: /* @__PURE__ */ jsx("div", {
 			style: styles$8.empty,
 			children: "No gradient tokens match this filter."
 		})
 	});
 	return /* @__PURE__ */ jsxs("div", {
-		"data-theme": activeTheme,
-		style: styles$8.wrapper,
+		...themeAttrs(cssVarPrefix, activeTheme),
+		style: {
+			...chromeAliases(cssVarPrefix),
+			...styles$8.wrapper
+		},
 		children: [/* @__PURE__ */ jsx("div", {
 			style: styles$8.caption,
 			children: captionText
@@ -1457,7 +1550,7 @@ function resolveMotionSpec(token, themeTokens) {
 	return null;
 }
 function MotionSample({ path, speed = 1, runKey = 0 }) {
-	const { resolved } = useProject();
+	const { resolved, cssVarPrefix } = useProject();
 	const reducedMotion = usePrefersReducedMotion();
 	const spec = useMemo(() => resolveMotionSpec(resolved[path], resolved), [resolved, path]);
 	const durationMs = spec?.durationMs ?? DEFAULT_DURATION_MS;
@@ -1481,11 +1574,17 @@ function MotionSample({ path, speed = 1, runKey = 0 }) {
 		reducedMotion
 	]);
 	if (reducedMotion) return /* @__PURE__ */ jsx("div", {
-		style: styles$7.reducedMotion,
+		style: {
+			...chromeAliases(cssVarPrefix),
+			...styles$7.reducedMotion
+		},
 		children: "Animation suppressed by `prefers-reduced-motion: reduce`."
 	});
 	return /* @__PURE__ */ jsx("div", {
-		style: styles$7.track,
+		style: {
+			...chromeAliases(cssVarPrefix),
+			...styles$7.track
+		},
 		children: /* @__PURE__ */ jsx("div", {
 			style: {
 				...styles$7.ball,
@@ -1631,16 +1730,22 @@ function MotionPreview({ filter, caption }) {
 	]);
 	const captionText = caption ?? `${rows.length} motion token${rows.length === 1 ? "" : "s"}${filter ? ` matching \`${filter}\`` : ""} · ${activeTheme}`;
 	if (rows.length === 0) return /* @__PURE__ */ jsx("div", {
-		"data-theme": activeTheme,
-		style: styles$6.wrapper,
+		...themeAttrs(cssVarPrefix, activeTheme),
+		style: {
+			...chromeAliases(cssVarPrefix),
+			...styles$6.wrapper
+		},
 		children: /* @__PURE__ */ jsx("div", {
 			style: styles$6.empty,
 			children: "No motion tokens match this filter."
 		})
 	});
 	return /* @__PURE__ */ jsxs("div", {
-		"data-theme": activeTheme,
-		style: styles$6.wrapper,
+		...themeAttrs(cssVarPrefix, activeTheme),
+		style: {
+			...chromeAliases(cssVarPrefix),
+			...styles$6.wrapper
+		},
 		children: [
 			/* @__PURE__ */ jsx("div", {
 				style: styles$6.caption,
@@ -1740,6 +1845,7 @@ function ShadowSample({ path }) {
 	const cssVar = makeCssVar(path, cssVarPrefix);
 	return /* @__PURE__ */ jsx("div", {
 		style: {
+			...chromeAliases(cssVarPrefix),
 			...sampleStyle,
 			boxShadow: cssVar
 		},
@@ -1854,16 +1960,22 @@ function ShadowPreview({ filter = "shadow", caption }) {
 	]);
 	const captionText = caption ?? `${rows.length} shadow${rows.length === 1 ? "" : "s"}${filter ? ` matching \`${filter}\`` : ""} · ${activeTheme}`;
 	if (rows.length === 0) return /* @__PURE__ */ jsx("div", {
-		"data-theme": activeTheme,
-		style: styles$5.wrapper,
+		...themeAttrs(cssVarPrefix, activeTheme),
+		style: {
+			...chromeAliases(cssVarPrefix),
+			...styles$5.wrapper
+		},
 		children: /* @__PURE__ */ jsx("div", {
 			style: styles$5.empty,
 			children: "No shadow tokens match this filter."
 		})
 	});
 	return /* @__PURE__ */ jsxs("div", {
-		"data-theme": activeTheme,
-		style: styles$5.wrapper,
+		...themeAttrs(cssVarPrefix, activeTheme),
+		style: {
+			...chromeAliases(cssVarPrefix),
+			...styles$5.wrapper
+		},
 		children: [/* @__PURE__ */ jsx("div", {
 			style: styles$5.caption,
 			children: captionText
@@ -2012,16 +2124,22 @@ function StrokeStyleSample({ filter = "strokeStyle", caption }) {
 	]);
 	const captionText = caption ?? `${rows.length} strokeStyle token${rows.length === 1 ? "" : "s"}${filter && filter !== "strokeStyle" ? ` matching \`${filter}\`` : ""} · ${activeTheme}`;
 	if (rows.length === 0) return /* @__PURE__ */ jsx("div", {
-		"data-theme": activeTheme,
-		style: styles$4.wrapper,
+		...themeAttrs(cssVarPrefix, activeTheme),
+		style: {
+			...chromeAliases(cssVarPrefix),
+			...styles$4.wrapper
+		},
 		children: /* @__PURE__ */ jsx("div", {
 			style: styles$4.empty,
 			children: "No strokeStyle tokens match this filter."
 		})
 	});
 	return /* @__PURE__ */ jsxs("div", {
-		"data-theme": activeTheme,
-		style: styles$4.wrapper,
+		...themeAttrs(cssVarPrefix, activeTheme),
+		style: {
+			...chromeAliases(cssVarPrefix),
+			...styles$4.wrapper
+		},
 		children: [/* @__PURE__ */ jsx("div", {
 			style: styles$4.caption,
 			children: captionText
@@ -2466,7 +2584,7 @@ function treeHasTruncation(nodes) {
 //#endregion
 //#region src/token-detail/AxisVariance.tsx
 function AxisVariance({ path }) {
-	const { token, cssVar, axes, themes, themesResolved, activeAxes } = useTokenDetailData(path);
+	const { token, cssVar, axes, themes, themesResolved, activeAxes, cssVarPrefix } = useTokenDetailData(path);
 	const colorFormat = useColorFormat();
 	const isColor = token?.$type === "color";
 	const formatFn = (t) => valueFor(t, isColor, colorFormat);
@@ -2559,7 +2677,7 @@ function AxisVariance({ path }) {
 							...styles$3.swatch,
 							background: cssVar
 						},
-						"data-theme": row.themeName,
+						[dataAttr(cssVarPrefix, "theme")]: row.themeName,
 						"aria-hidden": true
 					}), row.value]
 				})]
@@ -2618,7 +2736,7 @@ function AxisVariance({ path }) {
 								...styles$3.swatch,
 								background: cssVar
 							},
-							"data-theme": name,
+							[dataAttr(cssVarPrefix, "theme")]: name,
 							"aria-hidden": true
 						}), value]
 					}, col);
@@ -3144,11 +3262,14 @@ function TokenUsageSnippet({ path }) {
 //#endregion
 //#region src/TokenDetail.tsx
 function TokenDetail({ path, heading }) {
-	const { token, cssVar, activeTheme } = useTokenDetailData(path);
+	const { token, cssVar, activeTheme, cssVarPrefix } = useTokenDetailData(path);
 	const colorFormat = useColorFormat();
 	if (!token) return /* @__PURE__ */ jsx("div", {
-		"data-theme": activeTheme,
-		style: styles$3.wrapper,
+		...themeAttrs(cssVarPrefix, activeTheme),
+		style: {
+			...chromeAliases(cssVarPrefix),
+			...styles$3.wrapper
+		},
 		children: /* @__PURE__ */ jsxs("div", {
 			style: styles$3.missing,
 			children: [
@@ -3165,8 +3286,11 @@ function TokenDetail({ path, heading }) {
 	const value = formatted ? formatted.value : formatValue(token.$value);
 	const outOfGamut = formatted?.outOfGamut ?? false;
 	return /* @__PURE__ */ jsxs("div", {
-		"data-theme": activeTheme,
-		style: styles$3.wrapper,
+		...themeAttrs(cssVarPrefix, activeTheme),
+		style: {
+			...chromeAliases(cssVarPrefix),
+			...styles$3.wrapper
+		},
 		children: [
 			/* @__PURE__ */ jsx(TokenHeader, {
 				path,
@@ -3401,7 +3525,7 @@ function countLeaves(node) {
 	return n;
 }
 function TokenNavigator({ root, initiallyExpanded = 1, onSelect }) {
-	const { resolved, activeTheme } = useProject();
+	const { resolved, activeTheme, cssVarPrefix } = useProject();
 	const tree = useMemo(() => buildTree(resolved, root), [resolved, root]);
 	const initialExpanded = useMemo(() => {
 		const out = /* @__PURE__ */ new Set();
@@ -3426,16 +3550,22 @@ function TokenNavigator({ root, initiallyExpanded = 1, onSelect }) {
 		else setSelectedPath(path);
 	}, [onSelect]);
 	if (tree.length === 0) return /* @__PURE__ */ jsx("div", {
-		"data-theme": activeTheme,
-		style: styles$2.wrapper,
+		...themeAttrs(cssVarPrefix, activeTheme),
+		style: {
+			...chromeAliases(cssVarPrefix),
+			...styles$2.wrapper
+		},
 		children: /* @__PURE__ */ jsx("div", {
 			style: styles$2.empty,
 			children: root ? `No tokens under "${root}".` : "No tokens in the active theme."
 		})
 	});
 	return /* @__PURE__ */ jsxs("div", {
-		"data-theme": activeTheme,
-		style: styles$2.wrapper,
+		...themeAttrs(cssVarPrefix, activeTheme),
+		style: {
+			...chromeAliases(cssVarPrefix),
+			...styles$2.wrapper
+		},
 		children: [
 			/* @__PURE__ */ jsxs("div", {
 				style: styles$2.caption,
@@ -3752,16 +3882,22 @@ function TokenTable({ filter, type, showVar = true, caption }) {
 	]);
 	const captionText = caption ?? `${rows.length} token${rows.length === 1 ? "" : "s"}${filter ? ` matching \`${filter}\`` : ""}${type ? ` · $type=${type}` : ""} · ${activeTheme}`;
 	if (rows.length === 0) return /* @__PURE__ */ jsx("div", {
-		"data-theme": activeTheme,
-		style: styles$1.wrapper,
+		...themeAttrs(cssVarPrefix, activeTheme),
+		style: {
+			...chromeAliases(cssVarPrefix),
+			...styles$1.wrapper
+		},
 		children: /* @__PURE__ */ jsx("div", {
 			style: styles$1.empty,
 			children: "No tokens match this filter."
 		})
 	});
 	return /* @__PURE__ */ jsx("div", {
-		"data-theme": activeTheme,
-		style: styles$1.wrapper,
+		...themeAttrs(cssVarPrefix, activeTheme),
+		style: {
+			...chromeAliases(cssVarPrefix),
+			...styles$1.wrapper
+		},
 		children: /* @__PURE__ */ jsxs("table", {
 			style: styles$1.table,
 			children: [
@@ -3915,7 +4051,7 @@ function buildRow(path, composite) {
 	};
 }
 function TypographyScale({ filter = "typography", sample = "The quick brown fox jumps over the lazy dog.", caption }) {
-	const { resolved, activeTheme } = useProject();
+	const { resolved, activeTheme, cssVarPrefix } = useProject();
 	const rows = useMemo(() => {
 		return Object.entries(resolved).filter(([path, token]) => {
 			if (token.$type !== "typography") return false;
@@ -3932,16 +4068,22 @@ function TypographyScale({ filter = "typography", sample = "The quick brown fox
 	}, [resolved, filter]);
 	const captionText = caption ?? `${rows.length} typography token${rows.length === 1 ? "" : "s"}${filter && filter !== "typography" ? ` matching \`${filter}\`` : ""} · ${activeTheme}`;
 	if (rows.length === 0) return /* @__PURE__ */ jsx("div", {
-		"data-theme": activeTheme,
-		style: styles.wrapper,
+		...themeAttrs(cssVarPrefix, activeTheme),
+		style: {
+			...chromeAliases(cssVarPrefix),
+			...styles.wrapper
+		},
 		children: /* @__PURE__ */ jsx("div", {
 			style: styles.empty,
 			children: "No typography tokens match this filter."
 		})
 	});
 	return /* @__PURE__ */ jsxs("div", {
-		"data-theme": activeTheme,
-		style: styles.wrapper,
+		...themeAttrs(cssVarPrefix, activeTheme),
+		style: {
+			...chromeAliases(cssVarPrefix),
+			...styles.wrapper
+		},
 		children: [/* @__PURE__ */ jsx("div", {
 			style: styles.caption,
 			children: captionText