@unpunnyfuns/swatchbook-blocks 0.1.4 → 0.2.0

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

@@ -1,7 +1,7 @@
 import * as _$react from "react";
 import { ReactElement, ReactNode } from "react";
 
-//#region src/internal/format-color.d.ts
+//#region src/format-color.d.ts
 /**
  * Color display formats understood by {@link formatColor}.
  *

package/dist/index.mjs

@@ -3,7 +3,7 @@ import { createContext, useCallback, useContext, useEffect, useMemo, useState, u
 import { addons } from "storybook/preview-api";
 import { axes, css, cssVarPrefix, defaultTheme, themes, themesResolved } from "virtual:swatchbook/tokens";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-//#region src/internal/format-color.ts
+//#region src/format-color.ts
 const COLOR_FORMATS = [
 	"hex",
 	"rgb",
@@ -450,6 +450,25 @@ const emptyStyle = {
 	opacity: .6
 };
 //#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 };
+}
+//#endregion
 //#region src/BorderPreview.tsx
 const styles$14 = {
 	wrapper: surfaceStyle,
@@ -541,7 +560,7 @@ 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,
+		...themeAttrs(cssVarPrefix, activeTheme),
 		style: styles$14.wrapper,
 		children: /* @__PURE__ */ jsx("div", {
 			style: styles$14.empty,
@@ -549,7 +568,7 @@ function BorderPreview({ filter = "border", caption }) {
 		})
 	});
 	return /* @__PURE__ */ jsxs("div", {
-		"data-theme": activeTheme,
+		...themeAttrs(cssVarPrefix, activeTheme),
 		style: styles$14.wrapper,
 		children: [/* @__PURE__ */ jsx("div", {
 			style: styles$14.caption,
@@ -701,7 +720,7 @@ 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,
+		...themeAttrs(cssVarPrefix, activeTheme),
 		style: styles$13.wrapper,
 		children: /* @__PURE__ */ jsx("div", {
 			style: styles$13.empty,
@@ -709,7 +728,7 @@ function ColorPalette({ filter = "color", groupBy, caption }) {
 		})
 	});
 	return /* @__PURE__ */ jsxs("div", {
-		"data-theme": activeTheme,
+		...themeAttrs(cssVarPrefix, activeTheme),
 		style: styles$13.wrapper,
 		children: [/* @__PURE__ */ jsx("div", {
 			style: styles$13.caption,
@@ -914,7 +933,7 @@ 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,
+		...themeAttrs(cssVarPrefix, activeTheme),
 		style: styles$11.wrapper,
 		children: /* @__PURE__ */ jsx("div", {
 			style: styles$11.empty,
@@ -922,7 +941,7 @@ function DimensionScale({ filter = "dimension", kind = "length", caption }) {
 		})
 	});
 	return /* @__PURE__ */ jsxs("div", {
-		"data-theme": activeTheme,
+		...themeAttrs(cssVarPrefix, activeTheme),
 		style: styles$11.wrapper,
 		children: [/* @__PURE__ */ jsx("div", {
 			style: styles$11.caption,
@@ -1027,7 +1046,7 @@ 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,
+		...themeAttrs(cssVarPrefix, activeTheme),
 		style: styles$10.wrapper,
 		children: /* @__PURE__ */ jsx("div", {
 			style: styles$10.empty,
@@ -1035,7 +1054,7 @@ function FontFamilySample({ filter = "fontFamily", sample = "The quick brown fox
 		})
 	});
 	return /* @__PURE__ */ jsxs("div", {
-		"data-theme": activeTheme,
+		...themeAttrs(cssVarPrefix, activeTheme),
 		style: styles$10.wrapper,
 		children: [/* @__PURE__ */ jsx("div", {
 			style: styles$10.caption,
@@ -1144,7 +1163,7 @@ 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,
+		...themeAttrs(cssVarPrefix, activeTheme),
 		style: styles$9.wrapper,
 		children: /* @__PURE__ */ jsx("div", {
 			style: styles$9.empty,
@@ -1152,7 +1171,7 @@ function FontWeightScale({ filter = "fontWeight", sample = "Aa", caption }) {
 		})
 	});
 	return /* @__PURE__ */ jsxs("div", {
-		"data-theme": activeTheme,
+		...themeAttrs(cssVarPrefix, activeTheme),
 		style: styles$9.wrapper,
 		children: [/* @__PURE__ */ jsx("div", {
 			style: styles$9.caption,
@@ -1281,7 +1300,7 @@ 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,
+		...themeAttrs(cssVarPrefix, activeTheme),
 		style: styles$8.wrapper,
 		children: /* @__PURE__ */ jsx("div", {
 			style: styles$8.empty,
@@ -1289,7 +1308,7 @@ function GradientPalette({ filter = "gradient", caption }) {
 		})
 	});
 	return /* @__PURE__ */ jsxs("div", {
-		"data-theme": activeTheme,
+		...themeAttrs(cssVarPrefix, activeTheme),
 		style: styles$8.wrapper,
 		children: [/* @__PURE__ */ jsx("div", {
 			style: styles$8.caption,
@@ -1631,7 +1650,7 @@ 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,
+		...themeAttrs(cssVarPrefix, activeTheme),
 		style: styles$6.wrapper,
 		children: /* @__PURE__ */ jsx("div", {
 			style: styles$6.empty,
@@ -1639,7 +1658,7 @@ function MotionPreview({ filter, caption }) {
 		})
 	});
 	return /* @__PURE__ */ jsxs("div", {
-		"data-theme": activeTheme,
+		...themeAttrs(cssVarPrefix, activeTheme),
 		style: styles$6.wrapper,
 		children: [
 			/* @__PURE__ */ jsx("div", {
@@ -1854,7 +1873,7 @@ 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,
+		...themeAttrs(cssVarPrefix, activeTheme),
 		style: styles$5.wrapper,
 		children: /* @__PURE__ */ jsx("div", {
 			style: styles$5.empty,
@@ -1862,7 +1881,7 @@ function ShadowPreview({ filter = "shadow", caption }) {
 		})
 	});
 	return /* @__PURE__ */ jsxs("div", {
-		"data-theme": activeTheme,
+		...themeAttrs(cssVarPrefix, activeTheme),
 		style: styles$5.wrapper,
 		children: [/* @__PURE__ */ jsx("div", {
 			style: styles$5.caption,
@@ -2012,7 +2031,7 @@ 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,
+		...themeAttrs(cssVarPrefix, activeTheme),
 		style: styles$4.wrapper,
 		children: /* @__PURE__ */ jsx("div", {
 			style: styles$4.empty,
@@ -2020,7 +2039,7 @@ function StrokeStyleSample({ filter = "strokeStyle", caption }) {
 		})
 	});
 	return /* @__PURE__ */ jsxs("div", {
-		"data-theme": activeTheme,
+		...themeAttrs(cssVarPrefix, activeTheme),
 		style: styles$4.wrapper,
 		children: [/* @__PURE__ */ jsx("div", {
 			style: styles$4.caption,
@@ -2466,7 +2485,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 +2578,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 +2637,7 @@ function AxisVariance({ path }) {
 								...styles$3.swatch,
 								background: cssVar
 							},
-							"data-theme": name,
+							[dataAttr(cssVarPrefix, "theme")]: name,
 							"aria-hidden": true
 						}), value]
 					}, col);
@@ -3144,10 +3163,10 @@ 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,
+		...themeAttrs(cssVarPrefix, activeTheme),
 		style: styles$3.wrapper,
 		children: /* @__PURE__ */ jsxs("div", {
 			style: styles$3.missing,
@@ -3165,7 +3184,7 @@ function TokenDetail({ path, heading }) {
 	const value = formatted ? formatted.value : formatValue(token.$value);
 	const outOfGamut = formatted?.outOfGamut ?? false;
 	return /* @__PURE__ */ jsxs("div", {
-		"data-theme": activeTheme,
+		...themeAttrs(cssVarPrefix, activeTheme),
 		style: styles$3.wrapper,
 		children: [
 			/* @__PURE__ */ jsx(TokenHeader, {
@@ -3401,7 +3420,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,7 +3445,7 @@ function TokenNavigator({ root, initiallyExpanded = 1, onSelect }) {
 		else setSelectedPath(path);
 	}, [onSelect]);
 	if (tree.length === 0) return /* @__PURE__ */ jsx("div", {
-		"data-theme": activeTheme,
+		...themeAttrs(cssVarPrefix, activeTheme),
 		style: styles$2.wrapper,
 		children: /* @__PURE__ */ jsx("div", {
 			style: styles$2.empty,
@@ -3434,7 +3453,7 @@ function TokenNavigator({ root, initiallyExpanded = 1, onSelect }) {
 		})
 	});
 	return /* @__PURE__ */ jsxs("div", {
-		"data-theme": activeTheme,
+		...themeAttrs(cssVarPrefix, activeTheme),
 		style: styles$2.wrapper,
 		children: [
 			/* @__PURE__ */ jsxs("div", {
@@ -3752,7 +3771,7 @@ 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,
+		...themeAttrs(cssVarPrefix, activeTheme),
 		style: styles$1.wrapper,
 		children: /* @__PURE__ */ jsx("div", {
 			style: styles$1.empty,
@@ -3760,7 +3779,7 @@ function TokenTable({ filter, type, showVar = true, caption }) {
 		})
 	});
 	return /* @__PURE__ */ jsx("div", {
-		"data-theme": activeTheme,
+		...themeAttrs(cssVarPrefix, activeTheme),
 		style: styles$1.wrapper,
 		children: /* @__PURE__ */ jsxs("table", {
 			style: styles$1.table,
@@ -3915,7 +3934,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,7 +3951,7 @@ 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,
+		...themeAttrs(cssVarPrefix, activeTheme),
 		style: styles.wrapper,
 		children: /* @__PURE__ */ jsx("div", {
 			style: styles.empty,
@@ -3940,7 +3959,7 @@ function TypographyScale({ filter = "typography", sample = "The quick brown fox
 		})
 	});
 	return /* @__PURE__ */ jsxs("div", {
-		"data-theme": activeTheme,
+		...themeAttrs(cssVarPrefix, activeTheme),
 		style: styles.wrapper,
 		children: [/* @__PURE__ */ jsx("div", {
 			style: styles.caption,