@unpunnyfuns/swatchbook-blocks 0.66.2 → 0.67.0

package/dist/index.mjs

@@ -75,7 +75,7 @@ function ensureSubscribed$1() {
 	channel.on("setGlobals", onGlobals);
 }
 ensureSubscribed$1();
-function subscribe$1(cb) {
+function subscribe$2(cb) {
 	ensureSubscribed$1();
 	listeners$1.add(cb);
 	return () => {
@@ -89,7 +89,7 @@ function getServerSnapshot$1() {
 	return snapshot$1;
 }
 function useChannelGlobals() {
-	return useSyncExternalStore(subscribe$1, getSnapshot$1, getServerSnapshot$1);
+	return useSyncExternalStore(subscribe$2, getSnapshot$1, getServerSnapshot$1);
 }
 //#endregion
 //#region src/contexts.ts
@@ -212,7 +212,7 @@ function ensureSubscribed() {
 	});
 }
 ensureSubscribed();
-function subscribe(cb) {
+function subscribe$1(cb) {
 	ensureSubscribed();
 	listeners.add(cb);
 	return () => {
@@ -226,7 +226,7 @@ function getServerSnapshot() {
 	return snapshot;
 }
 function useTokenSnapshot() {
-	return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+	return useSyncExternalStore(subscribe$1, getSnapshot, getServerSnapshot);
 }
 //#endregion
 //#region src/internal/use-project.ts
@@ -484,11 +484,11 @@ const NUMERIC_TYPES = new Set([
 	"lineHeight"
 ]);
 const STRING_TYPES = new Set(["fontFamily", "strokeStyle"]);
-function computeSortKey(token) {
+function computeSortKey(token, rootFontSizePx) {
 	const type = token.$type;
 	if (!type) return { kind: "none" };
 	if (NUMERIC_TYPES.has(type)) {
-		const value = toMagnitude(token.$value);
+		const value = toMagnitude(token.$value, rootFontSizePx);
 		return {
 			kind: "numeric",
 			value,
@@ -511,8 +511,9 @@ function sortTokens(entries, options = {}) {
 	const sign = dir === "desc" ? -1 : 1;
 	if (by === "none") return dir === "desc" ? [...entries].toReversed() : [...entries];
 	if (by === "path") return [...entries].toSorted(([a], [b]) => sign * a.localeCompare(b, void 0, { numeric: true }));
+	const rootFontSizePx = options.rootFontSizePx ?? 16;
 	const keys = /* @__PURE__ */ new Map();
-	for (const [, token] of entries) keys.set(token, computeSortKey(token));
+	for (const [, token] of entries) keys.set(token, computeSortKey(token, rootFontSizePx));
 	return [...entries].toSorted(([aPath, aTok], [bPath, bTok]) => {
 		const cmp = compareValue(aTok, bTok, keys);
 		if (cmp !== 0) return sign * cmp;
@@ -544,7 +545,7 @@ function compareValue(a, b, keys) {
 	if (ak.kind === "string" && bk.kind === "string") return ak.value.localeCompare(bk.value, void 0, { numeric: true });
 	return 0;
 }
-function toMagnitude(v) {
+function toMagnitude(v, rootFontSizePx) {
 	if (typeof v === "number") return v;
 	if (v && typeof v === "object") {
 		const d = v;
@@ -554,8 +555,7 @@ function toMagnitude(v) {
 			case "px":
 			case "ms": return d.value;
 			case "s": return d.value * 1e3;
-			case "rem":
-			case "em": return d.value * 16;
+			case "rem": return d.value * rootFontSizePx;
 			default: return d.value;
 		}
 	}
@@ -1702,29 +1702,70 @@ function Diagnostics({ caption } = {}) {
 //#region src/dimension-scale/dimension-px.ts
 /**
 * Convert a DTCG dimension `$value` (`{ value, unit }`) to pixels for the
-* purpose of deciding whether to cap the rendered size. Returns `NaN` for
-* units we can't reasonably approximate (ex / ch / %), which the caller
-* treats as "render at cssVar but don't cap".
+* purpose of deciding whether to cap the rendered size. `rootFontSizePx`
+* scales `rem` against the rendering context's actual root font-size
+* (default 16 for the no-DOM / SSR path); the bar paints at the same
+* context's `var()`, so passing the measured root keeps the cap decision
+* aligned with what's drawn. Returns `NaN` for anything other than `px` /
+* `rem` — `ex` / `ch` / `%`, and the non-DTCG `em` (the `dimension` type
+* permits only `px | rem`) — which the caller treats as "render at cssVar
+* but don't cap".
 */
-function toPixels(raw) {
+function toPixels(raw, rootFontSizePx = 16) {
 	if (raw == null || typeof raw !== "object") return NaN;
 	const v = raw;
 	if (typeof v.value !== "number" || typeof v.unit !== "string") return NaN;
 	switch (v.unit) {
 		case "px": return v.value;
-		case "rem":
-		case "em": return v.value * 16;
+		case "rem": return v.value * rootFontSizePx;
 		default: return NaN;
 	}
 }
 //#endregion
+//#region src/internal/use-root-font-size.ts
+function readRootFontSize() {
+	if (typeof document === "undefined") return 16;
+	const fontSize = Number.parseFloat(getComputedStyle(document.documentElement).fontSize);
+	return Number.isFinite(fontSize) && fontSize > 0 ? fontSize : 16;
+}
+function subscribe(onChange) {
+	if (typeof window === "undefined") return () => {};
+	window.addEventListener("resize", onChange);
+	return () => window.removeEventListener("resize", onChange);
+}
+/**
+* Root font-size (px) of the context a block renders in, tracked across
+* viewport changes. `rem` dimension values resolve their `var()` against this
+* root, so the cap math (`toPixels`) and value sort (`sortTokens`) must scale
+* `rem` by it rather than a literal 16: a Storybook Docs page, or a responsive
+* desktop/tablet/mobile breakpoint, can apply a different root to the same
+* token. Falls back to 16 with no DOM.
+*/
+function useRootFontSize() {
+	return useSyncExternalStore(subscribe, readRootFontSize, () => 16);
+}
+//#endregion
 //#region src/dimension-scale/DimensionBar.tsx
 const styles$1 = {
+	cappedWrap: {
+		display: "inline-flex",
+		alignItems: "center",
+		gap: "var(--swatchbook-space-3xs)",
+		maxWidth: "100%",
+		minWidth: 0
+	},
+	cap: {
+		color: "var(--swatchbook-text-muted)",
+		fontSize: 11,
+		lineHeight: 1,
+		userSelect: "none"
+	},
 	bar: {
 		height: 14,
 		background: "var(--swatchbook-accent-bg, #3b82f6)",
 		borderRadius: 2,
-		minWidth: 1
+		minWidth: 1,
+		maxWidth: "100%"
 	},
 	radiusSample: {
 		width: 56,
@@ -1739,13 +1780,27 @@ const styles$1 = {
 		minHeight: 1
 	}
 };
+function withCap(visual) {
+	return /* @__PURE__ */ jsxs("span", {
+		className: "sb-dimension-bar sb-dimension-bar--capped",
+		style: styles$1.cappedWrap,
+		title: `capped at 480px`,
+		children: [visual, /* @__PURE__ */ jsx("span", {
+			className: "sb-dimension-bar__cap",
+			"aria-hidden": true,
+			children: "…"
+		})]
+	});
+}
 function DimensionBar({ path, visual = "length" }) {
 	const project = useProject();
 	const { resolved } = project;
+	const rootFontSize = useRootFontSize();
 	const cssVar = resolveCssVar(path, project);
 	const token = resolved[path];
-	const pxValue = toPixels(token?.$value);
-	const cappedValue = Number.isFinite(pxValue) && pxValue > 480 ? `480px` : cssVar;
+	const pxValue = toPixels(token?.$value, rootFontSize);
+	const capped = Number.isFinite(pxValue) && pxValue > 480;
+	const cappedValue = capped ? `480px` : cssVar;
 	switch (visual) {
 		case "radius": return /* @__PURE__ */ jsx("div", {
 			style: {
@@ -1754,21 +1809,27 @@ function DimensionBar({ path, visual = "length" }) {
 			},
 			"aria-hidden": true
 		});
-		case "size": return /* @__PURE__ */ jsx("div", {
-			style: {
-				...styles$1.sizeSample,
-				width: cappedValue,
-				height: cappedValue
-			},
-			"aria-hidden": true
-		});
-		default: return /* @__PURE__ */ jsx("div", {
-			style: {
-				...styles$1.bar,
-				width: cappedValue
-			},
-			"aria-hidden": true
-		});
+		case "size": {
+			const sample = /* @__PURE__ */ jsx("div", {
+				style: {
+					...styles$1.sizeSample,
+					width: cappedValue,
+					height: cappedValue
+				},
+				"aria-hidden": true
+			});
+			return capped ? withCap(sample) : sample;
+		}
+		default: {
+			const bar = /* @__PURE__ */ jsx("div", {
+				style: {
+					...styles$1.bar,
+					width: cappedValue
+				},
+				"aria-hidden": true
+			});
+			return capped ? withCap(bar) : bar;
+		}
 	}
 }
 //#endregion
@@ -1878,29 +1939,27 @@ function formatUnknown(v) {
 function DimensionScale({ filter, visual = "length", caption, sortBy = "value", sortDir = "asc" }) {
 	const project = useProject();
 	const { resolved, activeTheme, activeAxes, cssVarPrefix } = project;
+	const rootFontSize = useRootFontSize();
 	const rows = useMemo(() => {
 		return sortTokens(Object.entries(resolved).filter(([path, token]) => {
 			if (token.$type !== "dimension") return false;
 			return matchPath(path, filter);
 		}), {
 			by: sortBy,
-			dir: sortDir
-		}).map(([path, token]) => {
-			const pxValue = toPixels(token.$value);
-			return {
-				path,
-				cssVar: resolveCssVar(path, project),
-				displayValue: formatTokenValue(token.$value, token.$type, "raw", project.listing[path]),
-				pxValue,
-				capped: Number.isFinite(pxValue) && pxValue > 480
-			};
-		});
+			dir: sortDir,
+			rootFontSizePx: rootFontSize
+		}).map(([path, token]) => ({
+			path,
+			cssVar: resolveCssVar(path, project),
+			displayValue: formatTokenValue(token.$value, token.$type, "raw", project.listing[path])
+		}));
 	}, [
 		resolved,
 		filter,
 		project,
 		sortBy,
-		sortDir
+		sortDir,
+		rootFontSize
 	]);
 	const captionText = caption ?? `${rows.length} dimension${rows.length === 1 ? "" : "s"}${filter ? ` matching \`${filter}\`` : ""} · ${activeTheme}`;
 	if (rows.length === 0) return /* @__PURE__ */ jsx("div", {
@@ -1928,19 +1987,12 @@ function DimensionScale({ filter, visual = "length", caption, sortBy = "value",
 						children: row.displayValue
 					})]
 				}),
-				/* @__PURE__ */ jsxs("div", {
+				/* @__PURE__ */ jsx("div", {
 					className: "sb-dimension-scale__visual-cell",
-					children: [/* @__PURE__ */ jsx(DimensionBar, {
+					children: /* @__PURE__ */ jsx(DimensionBar, {
 						path: row.path,
 						visual
-					}), row.capped && /* @__PURE__ */ jsxs("span", {
-						className: "sb-dimension-scale__cap",
-						children: [
-							"capped at ",
-							480,
-							"px"
-						]
-					})]
+					})
 				}),
 				/* @__PURE__ */ jsx("span", {
 					className: "sb-dimension-scale__css-var",
@@ -2554,8 +2606,8 @@ function OpacityScale({ filter, type = "number", sampleColor = "color.accent.bg"
 				children: [/* @__PURE__ */ jsx("div", {
 					className: "sb-opacity-scale__swatch",
 					style: {
-						"--sb-opacity-scale-color": sampleColorVar,
-						"--sb-opacity-scale-alpha": String(row.opacity)
+						"--swatchbook-opacity-scale-color": sampleColorVar,
+						"--swatchbook-opacity-scale-alpha": String(row.opacity)
 					},
 					"aria-hidden": true
 				}), /* @__PURE__ */ jsxs("div", {
@@ -4523,6 +4575,7 @@ const LeafPreview = memo(function LeafPreview({ path, token }) {
 function TokenTable({ filter, type, caption, sortBy = "path", sortDir = "asc", searchable = true, onSelect, id, indicators }) {
 	const { resolved, activeTheme, activeAxes, cssVarPrefix, listing, varianceByPath, indicators: indicatorBaseline } = useProject();
 	const colorFormat = useColorFormat();
+	const rootFontSize = useRootFontSize();
 	const blockKey = useBlockKey("TokenTable", [
 		filter,
 		type,
@@ -4544,7 +4597,8 @@ function TokenTable({ filter, type, caption, sortBy = "path", sortDir = "asc", s
 			return true;
 		}), {
 			by: sortBy,
-			dir: sortDir
+			dir: sortDir,
+			rootFontSizePx: rootFontSize
 		}).map(([path, token]) => {
 			const isColor = token.$type === "color";
 			const color = isColor ? resolveColorValue(path, token.$value, colorFormat, projectFields) : null;
@@ -4565,7 +4619,8 @@ function TokenTable({ filter, type, caption, sortBy = "path", sortDir = "asc", s
 		type,
 		colorFormat,
 		sortBy,
-		sortDir
+		sortDir,
+		rootFontSize
 	]);
 	const visibleRows = useMemo(() => {
 		if (!searchable || deferredQuery.trim() === "") return rows;