@unpunnyfuns/swatchbook-blocks 0.2.0 → 0.2.1

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
 		},
@@ -450,25 +506,6 @@ 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,
@@ -561,7 +598,10 @@ 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", {
 		...themeAttrs(cssVarPrefix, activeTheme),
-		style: styles$14.wrapper,
+		style: {
+			...chromeAliases(cssVarPrefix),
+			...styles$14.wrapper
+		},
 		children: /* @__PURE__ */ jsx("div", {
 			style: styles$14.empty,
 			children: "No border tokens match this filter."
@@ -569,7 +609,10 @@ function BorderPreview({ filter = "border", caption }) {
 	});
 	return /* @__PURE__ */ jsxs("div", {
 		...themeAttrs(cssVarPrefix, activeTheme),
-		style: styles$14.wrapper,
+		style: {
+			...chromeAliases(cssVarPrefix),
+			...styles$14.wrapper
+		},
 		children: [/* @__PURE__ */ jsx("div", {
 			style: styles$14.caption,
 			children: captionText
@@ -721,7 +764,10 @@ function ColorPalette({ filter = "color", groupBy, caption }) {
 	const captionText = caption ?? `${totalCount} color${totalCount === 1 ? "" : "s"}${filter ? ` matching \`${filter}\`` : ""} · ${activeTheme}`;
 	if (totalCount === 0) return /* @__PURE__ */ jsx("div", {
 		...themeAttrs(cssVarPrefix, activeTheme),
-		style: styles$13.wrapper,
+		style: {
+			...chromeAliases(cssVarPrefix),
+			...styles$13.wrapper
+		},
 		children: /* @__PURE__ */ jsx("div", {
 			style: styles$13.empty,
 			children: "No color tokens match this filter."
@@ -814,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
 			},
@@ -824,6 +872,7 @@ function DimensionBar({ path, kind = "length" }) {
 		});
 		case "size": return /* @__PURE__ */ jsx("div", {
 			style: {
+				...aliases,
 				...styles$12.sizeSample,
 				width: cappedValue,
 				height: cappedValue
@@ -832,6 +881,7 @@ function DimensionBar({ path, kind = "length" }) {
 		});
 		default: return /* @__PURE__ */ jsx("div", {
 			style: {
+				...aliases,
 				...styles$12.bar,
 				width: cappedValue
 			},
@@ -934,7 +984,10 @@ 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", {
 		...themeAttrs(cssVarPrefix, activeTheme),
-		style: styles$11.wrapper,
+		style: {
+			...chromeAliases(cssVarPrefix),
+			...styles$11.wrapper
+		},
 		children: /* @__PURE__ */ jsx("div", {
 			style: styles$11.empty,
 			children: "No dimension tokens match this filter."
@@ -942,7 +995,10 @@ function DimensionScale({ filter = "dimension", kind = "length", caption }) {
 	});
 	return /* @__PURE__ */ jsxs("div", {
 		...themeAttrs(cssVarPrefix, activeTheme),
-		style: styles$11.wrapper,
+		style: {
+			...chromeAliases(cssVarPrefix),
+			...styles$11.wrapper
+		},
 		children: [/* @__PURE__ */ jsx("div", {
 			style: styles$11.caption,
 			children: captionText
@@ -1047,7 +1103,10 @@ 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", {
 		...themeAttrs(cssVarPrefix, activeTheme),
-		style: styles$10.wrapper,
+		style: {
+			...chromeAliases(cssVarPrefix),
+			...styles$10.wrapper
+		},
 		children: /* @__PURE__ */ jsx("div", {
 			style: styles$10.empty,
 			children: "No fontFamily tokens match this filter."
@@ -1055,7 +1114,10 @@ function FontFamilySample({ filter = "fontFamily", sample = "The quick brown fox
 	});
 	return /* @__PURE__ */ jsxs("div", {
 		...themeAttrs(cssVarPrefix, activeTheme),
-		style: styles$10.wrapper,
+		style: {
+			...chromeAliases(cssVarPrefix),
+			...styles$10.wrapper
+		},
 		children: [/* @__PURE__ */ jsx("div", {
 			style: styles$10.caption,
 			children: captionText
@@ -1164,7 +1226,10 @@ 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", {
 		...themeAttrs(cssVarPrefix, activeTheme),
-		style: styles$9.wrapper,
+		style: {
+			...chromeAliases(cssVarPrefix),
+			...styles$9.wrapper
+		},
 		children: /* @__PURE__ */ jsx("div", {
 			style: styles$9.empty,
 			children: "No fontWeight tokens match this filter."
@@ -1172,7 +1237,10 @@ function FontWeightScale({ filter = "fontWeight", sample = "Aa", caption }) {
 	});
 	return /* @__PURE__ */ jsxs("div", {
 		...themeAttrs(cssVarPrefix, activeTheme),
-		style: styles$9.wrapper,
+		style: {
+			...chromeAliases(cssVarPrefix),
+			...styles$9.wrapper
+		},
 		children: [/* @__PURE__ */ jsx("div", {
 			style: styles$9.caption,
 			children: captionText
@@ -1301,7 +1369,10 @@ 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", {
 		...themeAttrs(cssVarPrefix, activeTheme),
-		style: styles$8.wrapper,
+		style: {
+			...chromeAliases(cssVarPrefix),
+			...styles$8.wrapper
+		},
 		children: /* @__PURE__ */ jsx("div", {
 			style: styles$8.empty,
 			children: "No gradient tokens match this filter."
@@ -1309,7 +1380,10 @@ function GradientPalette({ filter = "gradient", caption }) {
 	});
 	return /* @__PURE__ */ jsxs("div", {
 		...themeAttrs(cssVarPrefix, activeTheme),
-		style: styles$8.wrapper,
+		style: {
+			...chromeAliases(cssVarPrefix),
+			...styles$8.wrapper
+		},
 		children: [/* @__PURE__ */ jsx("div", {
 			style: styles$8.caption,
 			children: captionText
@@ -1476,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;
@@ -1500,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,
@@ -1651,7 +1731,10 @@ 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", {
 		...themeAttrs(cssVarPrefix, activeTheme),
-		style: styles$6.wrapper,
+		style: {
+			...chromeAliases(cssVarPrefix),
+			...styles$6.wrapper
+		},
 		children: /* @__PURE__ */ jsx("div", {
 			style: styles$6.empty,
 			children: "No motion tokens match this filter."
@@ -1659,7 +1742,10 @@ function MotionPreview({ filter, caption }) {
 	});
 	return /* @__PURE__ */ jsxs("div", {
 		...themeAttrs(cssVarPrefix, activeTheme),
-		style: styles$6.wrapper,
+		style: {
+			...chromeAliases(cssVarPrefix),
+			...styles$6.wrapper
+		},
 		children: [
 			/* @__PURE__ */ jsx("div", {
 				style: styles$6.caption,
@@ -1759,6 +1845,7 @@ function ShadowSample({ path }) {
 	const cssVar = makeCssVar(path, cssVarPrefix);
 	return /* @__PURE__ */ jsx("div", {
 		style: {
+			...chromeAliases(cssVarPrefix),
 			...sampleStyle,
 			boxShadow: cssVar
 		},
@@ -1874,7 +1961,10 @@ 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", {
 		...themeAttrs(cssVarPrefix, activeTheme),
-		style: styles$5.wrapper,
+		style: {
+			...chromeAliases(cssVarPrefix),
+			...styles$5.wrapper
+		},
 		children: /* @__PURE__ */ jsx("div", {
 			style: styles$5.empty,
 			children: "No shadow tokens match this filter."
@@ -1882,7 +1972,10 @@ function ShadowPreview({ filter = "shadow", caption }) {
 	});
 	return /* @__PURE__ */ jsxs("div", {
 		...themeAttrs(cssVarPrefix, activeTheme),
-		style: styles$5.wrapper,
+		style: {
+			...chromeAliases(cssVarPrefix),
+			...styles$5.wrapper
+		},
 		children: [/* @__PURE__ */ jsx("div", {
 			style: styles$5.caption,
 			children: captionText
@@ -2032,7 +2125,10 @@ 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", {
 		...themeAttrs(cssVarPrefix, activeTheme),
-		style: styles$4.wrapper,
+		style: {
+			...chromeAliases(cssVarPrefix),
+			...styles$4.wrapper
+		},
 		children: /* @__PURE__ */ jsx("div", {
 			style: styles$4.empty,
 			children: "No strokeStyle tokens match this filter."
@@ -2040,7 +2136,10 @@ function StrokeStyleSample({ filter = "strokeStyle", caption }) {
 	});
 	return /* @__PURE__ */ jsxs("div", {
 		...themeAttrs(cssVarPrefix, activeTheme),
-		style: styles$4.wrapper,
+		style: {
+			...chromeAliases(cssVarPrefix),
+			...styles$4.wrapper
+		},
 		children: [/* @__PURE__ */ jsx("div", {
 			style: styles$4.caption,
 			children: captionText
@@ -3167,7 +3266,10 @@ function TokenDetail({ path, heading }) {
 	const colorFormat = useColorFormat();
 	if (!token) return /* @__PURE__ */ jsx("div", {
 		...themeAttrs(cssVarPrefix, activeTheme),
-		style: styles$3.wrapper,
+		style: {
+			...chromeAliases(cssVarPrefix),
+			...styles$3.wrapper
+		},
 		children: /* @__PURE__ */ jsxs("div", {
 			style: styles$3.missing,
 			children: [
@@ -3185,7 +3287,10 @@ function TokenDetail({ path, heading }) {
 	const outOfGamut = formatted?.outOfGamut ?? false;
 	return /* @__PURE__ */ jsxs("div", {
 		...themeAttrs(cssVarPrefix, activeTheme),
-		style: styles$3.wrapper,
+		style: {
+			...chromeAliases(cssVarPrefix),
+			...styles$3.wrapper
+		},
 		children: [
 			/* @__PURE__ */ jsx(TokenHeader, {
 				path,
@@ -3446,7 +3551,10 @@ function TokenNavigator({ root, initiallyExpanded = 1, onSelect }) {
 	}, [onSelect]);
 	if (tree.length === 0) return /* @__PURE__ */ jsx("div", {
 		...themeAttrs(cssVarPrefix, activeTheme),
-		style: styles$2.wrapper,
+		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."
@@ -3454,7 +3562,10 @@ function TokenNavigator({ root, initiallyExpanded = 1, onSelect }) {
 	});
 	return /* @__PURE__ */ jsxs("div", {
 		...themeAttrs(cssVarPrefix, activeTheme),
-		style: styles$2.wrapper,
+		style: {
+			...chromeAliases(cssVarPrefix),
+			...styles$2.wrapper
+		},
 		children: [
 			/* @__PURE__ */ jsxs("div", {
 				style: styles$2.caption,
@@ -3772,7 +3883,10 @@ 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", {
 		...themeAttrs(cssVarPrefix, activeTheme),
-		style: styles$1.wrapper,
+		style: {
+			...chromeAliases(cssVarPrefix),
+			...styles$1.wrapper
+		},
 		children: /* @__PURE__ */ jsx("div", {
 			style: styles$1.empty,
 			children: "No tokens match this filter."
@@ -3780,7 +3894,10 @@ function TokenTable({ filter, type, showVar = true, caption }) {
 	});
 	return /* @__PURE__ */ jsx("div", {
 		...themeAttrs(cssVarPrefix, activeTheme),
-		style: styles$1.wrapper,
+		style: {
+			...chromeAliases(cssVarPrefix),
+			...styles$1.wrapper
+		},
 		children: /* @__PURE__ */ jsxs("table", {
 			style: styles$1.table,
 			children: [
@@ -3952,7 +4069,10 @@ function TypographyScale({ filter = "typography", sample = "The quick brown fox
 	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, activeTheme),
-		style: styles.wrapper,
+		style: {
+			...chromeAliases(cssVarPrefix),
+			...styles.wrapper
+		},
 		children: /* @__PURE__ */ jsx("div", {
 			style: styles.empty,
 			children: "No typography tokens match this filter."
@@ -3960,7 +4080,10 @@ function TypographyScale({ filter = "typography", sample = "The quick brown fox
 	});
 	return /* @__PURE__ */ jsxs("div", {
 		...themeAttrs(cssVarPrefix, activeTheme),
-		style: styles.wrapper,
+		style: {
+			...chromeAliases(cssVarPrefix),
+			...styles.wrapper
+		},
 		children: [/* @__PURE__ */ jsx("div", {
 			style: styles.caption,
 			children: captionText