@unpunnyfuns/swatchbook-blocks 0.66.3 → 0.68.0

package/README.md

@@ -4,7 +4,7 @@ React MDX doc blocks for [swatchbook](https://github.com/unpunnyfuns/swatchbook)
 
 Render your DTCG tokens in `.mdx` stories: swatch grids, type-specific previews, per-token inspectors. The blocks react to the toolbar's axis flips without any wiring in your story code.
 
-Most consumers pick this up transitively via [`@unpunnyfuns/swatchbook-addon`](../addon); `import { TokenTable } from '@unpunnyfuns/swatchbook-addon'` works out of the box. Install this package directly when you want blocks *without* the Storybook addon, such as unit tests or a standalone React app wrapping tokens in a custom surface.
+Most consumers pick this up transitively via [`@unpunnyfuns/swatchbook-addon`](../addon); `import { TokenTable } from '@unpunnyfuns/swatchbook-addon'` works out of the box. Install this package directly when you want blocks _without_ the Storybook addon, such as unit tests or a standalone React app wrapping tokens in a custom surface.
 
 ## Install
 
@@ -32,7 +32,7 @@ import snapshot from './tokens-snapshot.json';
 
 <SwatchbookProvider value={snapshot}>
   <TokenTable filter="color.**" />
-</SwatchbookProvider>
+</SwatchbookProvider>;
 ```
 
 Block catalogue, props, and composition patterns live in the [blocks reference](https://unpunnyfuns.github.io/swatchbook/reference/blocks) and the [authoring guide](https://unpunnyfuns.github.io/swatchbook/guides/authoring-doc-stories).

package/dist/index.mjs

@@ -2,41 +2,16 @@ import './style.css';
 import { COLOR_FORMATS } from "@unpunnyfuns/swatchbook-core/color-formats";
 import { formatColor, parseColor } from "@unpunnyfuns/swatchbook-core/format-color";
 import { createContext, memo, useCallback, useContext, useDeferredValue, useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { getVariance, listPaths, resolveAllWithProvenanceAt } from "@unpunnyfuns/swatchbook-core/graph";
 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 { Fragment, jsx, jsxs } from "react/jsx-runtime";
 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/internal/styles.tsx
-/**
-* Chrome-style primitives shared across every block. Kept as JS exports
-* for the inline-style sites that still compose them into per-block style
-* objects (e.g. TokenNavigator's `typePill` that builds on the shared
-* pill base). The pure direct-reference chrome — surface wrapper, caption,
-* empty-state — lives in `styles.css` and is applied via class names.
-*/
-const TEXT_MUTED = "var(--swatchbook-text-muted, CanvasText)";
-const SURFACE_RAISED = "var(--swatchbook-surface-raised, Canvas)";
-const SURFACE_MUTED = "var(--swatchbook-surface-muted, rgba(128,128,128,0.15))";
-const BORDER_FAINT = `1px solid var(--swatchbook-border-default, rgba(128,128,128,0.15))`;
-const BORDER_STRONG = `1px solid var(--swatchbook-border-default, rgba(128,128,128,0.3))`;
-/**
-* Inner content for a block's "nothing to render" state. Call sites wrap
-* it in their own block wrapper (which already carries `blockWrapperAttrs`), so
-* the message itself just needs the muted type.
-*/
-function EmptyState({ children }) {
-	return /* @__PURE__ */ jsx("div", {
-		className: "sb-block__empty",
-		children
-	});
-}
-//#endregion
 //#region src/internal/channel-globals.ts
 const AXES_GLOBAL_KEY = "swatchbookAxes";
 const COLOR_FORMAT_GLOBAL_KEY = "swatchbookColorFormat";
@@ -75,7 +50,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 +64,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 +187,7 @@ function ensureSubscribed() {
 	});
 }
 ensureSubscribed();
-function subscribe(cb) {
+function subscribe$1(cb) {
 	ensureSubscribed();
 	listeners.add(cb);
 	return () => {
@@ -226,7 +201,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
@@ -388,19 +363,10 @@ function resolveColorValue(path, raw, colorFormat, project) {
 }
 //#endregion
 //#region src/border-preview/BorderSample.tsx
-const sampleStyle$1 = {
-	width: 120,
-	height: 56,
-	background: SURFACE_RAISED,
-	borderRadius: 6
-};
 function BorderSample({ path }) {
-	const cssVar = resolveCssVar(path, useProject());
 	return /* @__PURE__ */ jsx("div", {
-		style: {
-			...sampleStyle$1,
-			border: cssVar
-		},
+		className: "sb-border-sample",
+		style: { border: resolveCssVar(path, useProject()) },
 		"aria-hidden": true
 	});
 }
@@ -484,11 +450,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 +477,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 +511,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 +521,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;
 		}
 	}
@@ -1057,12 +1023,9 @@ function CopyButton$1({ value, label, variant = "icon", className }) {
 		timerRef.current = setTimeout(() => setCopied(false), 1500);
 	}, [value]);
 	const ariaLabel = label ?? `Copy ${value}`;
-	const classes = ["sb-copy-button", `sb-copy-button--${variant}`];
-	if (copied) classes.push("sb-copy-button--copied");
-	if (className) classes.push(className);
 	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("button", {
 		type: "button",
-		className: classes.join(" "),
+		className: cx("sb-copy-button", `sb-copy-button--${variant}`, copied && "sb-copy-button--copied", className),
 		onClick: handleClick,
 		"aria-label": ariaLabel,
 		title: ariaLabel,
@@ -1702,73 +1665,95 @@ 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 = {
-	bar: {
-		height: 14,
-		background: "var(--swatchbook-accent-bg, #3b82f6)",
-		borderRadius: 2,
-		minWidth: 1
-	},
-	radiusSample: {
-		width: 56,
-		height: 56,
-		background: "var(--swatchbook-accent-bg, #3b82f6)",
-		border: BORDER_STRONG
-	},
-	sizeSample: {
-		background: "var(--swatchbook-accent-bg, #3b82f6)",
-		border: BORDER_STRONG,
-		minWidth: 1,
-		minHeight: 1
-	}
-};
+function withCap(visual) {
+	return /* @__PURE__ */ jsxs("span", {
+		className: "sb-dimension-bar sb-dimension-bar--capped",
+		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: {
-				...styles$1.radiusSample,
-				borderRadius: cssVar
-			},
-			"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
-			},
+			className: "sb-dimension-bar__radius-sample",
+			style: { borderRadius: cssVar },
 			"aria-hidden": true
 		});
+		case "size": {
+			const sample = /* @__PURE__ */ jsx("div", {
+				className: "sb-dimension-bar__size-sample",
+				style: {
+					width: cappedValue,
+					height: cappedValue
+				},
+				"aria-hidden": true
+			});
+			return capped ? withCap(sample) : sample;
+		}
+		default: {
+			const bar = /* @__PURE__ */ jsx("div", {
+				className: "sb-dimension-bar__bar",
+				style: { width: cappedValue },
+				"aria-hidden": true
+			});
+			return capped ? withCap(bar) : bar;
+		}
 	}
 }
 //#endregion
@@ -1878,29 +1863,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 +1911,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",
@@ -2235,29 +2211,6 @@ function usePrefersReducedMotion() {
 //#region src/motion-preview/MotionSample.tsx
 const DEFAULT_DURATION_MS = 300;
 const DEFAULT_EASING = "cubic-bezier(0.2, 0, 0, 1)";
-const styles = {
-	track: {
-		position: "relative",
-		height: 36,
-		background: SURFACE_MUTED,
-		borderRadius: 18,
-		overflow: "hidden"
-	},
-	ball: {
-		position: "absolute",
-		top: "50%",
-		width: 28,
-		height: 28,
-		marginTop: -14,
-		borderRadius: "50%",
-		background: "var(--swatchbook-accent-bg, #3b82f6)"
-	},
-	reducedMotion: {
-		fontSize: 11,
-		color: TEXT_MUTED,
-		fontStyle: "italic"
-	}
-};
 function extractDurationMs(raw) {
 	if (raw == null) return NaN;
 	if (typeof raw === "object") {
@@ -2352,7 +2305,7 @@ function MotionSample({ path, speed = 1, runKey = 0 }) {
 		reducedMotion
 	]);
 	if (reducedMotion) return /* @__PURE__ */ jsxs("div", {
-		style: styles.reducedMotion,
+		className: "sb-motion-sample__reduced-motion",
 		children: [
 			"Animation suppressed by ",
 			/* @__PURE__ */ jsx("code", { children: "prefers-reduced-motion: reduce" }),
@@ -2360,13 +2313,10 @@ function MotionSample({ path, speed = 1, runKey = 0 }) {
 		]
 	});
 	return /* @__PURE__ */ jsx("div", {
-		style: styles.track,
+		className: "sb-motion-sample__track",
 		children: /* @__PURE__ */ jsx("div", {
-			style: {
-				...styles.ball,
-				left: phase === 1 ? "calc(100% - 32px)" : "4px",
-				transition: `left ${scaledDuration}ms ${easing}`
-			},
+			className: cx("sb-motion-sample__ball", phase === 1 ? "sb-motion-sample__ball--end" : "sb-motion-sample__ball--start"),
+			style: { transition: `left ${scaledDuration}ms ${easing}` },
 			"aria-hidden": true
 		})
 	});
@@ -2554,8 +2504,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", {
@@ -2608,20 +2558,10 @@ function useSwatchbookData() {
 }
 //#endregion
 //#region src/shadow-preview/ShadowSample.tsx
-const sampleStyle = {
-	width: 120,
-	height: 56,
-	background: SURFACE_RAISED,
-	border: BORDER_FAINT,
-	borderRadius: 6
-};
 function ShadowSample({ path }) {
-	const cssVar = resolveCssVar(path, useProject());
 	return /* @__PURE__ */ jsx("div", {
-		style: {
-			...sampleStyle,
-			boxShadow: cssVar
-		},
+		className: "sb-shadow-sample",
+		style: { boxShadow: resolveCssVar(path, useProject()) },
 		"aria-hidden": true
 	});
 }
@@ -2996,10 +2936,7 @@ function AxisVariance({ path }) {
 						}),
 						value,
 						/* @__PURE__ */ jsx("span", {
-							style: {
-								opacity: .6,
-								marginLeft: 8
-							},
+							className: "sb-token-detail__constant-label-note",
 							children: "same across every axis"
 						})
 					]
@@ -3033,8 +2970,7 @@ function AxisVariance({ path }) {
 				"data-axis": axisName,
 				"data-context": row.ctx,
 				children: [/* @__PURE__ */ jsx("td", {
-					className: "sb-token-detail__theme-cell",
-					style: { width: "30%" },
+					className: "sb-token-detail__theme-cell sb-token-detail__theme-cell--label",
 					children: row.ctx
 				}), /* @__PURE__ */ jsxs("td", {
 					className: "sb-token-detail__theme-cell",
@@ -3061,22 +2997,14 @@ function AxisVariance({ path }) {
 			children: [/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", {
 				className: "sb-token-detail__theme-row",
 				children: [/* @__PURE__ */ jsxs("th", {
-					className: "sb-token-detail__theme-cell",
-					style: {
-						textAlign: "left",
-						opacity: .7
-					},
+					className: "sb-token-detail__theme-cell sb-token-detail__theme-cell--header",
 					children: [
 						rowAxis.name,
 						" \\ ",
 						colAxis.name
 					]
 				}), colAxis.contexts.map((col) => /* @__PURE__ */ jsx("th", {
-					className: "sb-token-detail__theme-cell",
-					style: {
-						textAlign: "left",
-						opacity: .7
-					},
+					className: "sb-token-detail__theme-cell sb-token-detail__theme-cell--header",
 					children: col
 				}, col))]
 			}) }), /* @__PURE__ */ jsx("tbody", { children: rowAxis.contexts.map((row) => /* @__PURE__ */ jsxs("tr", {
@@ -3106,8 +3034,7 @@ function AxisVariance({ path }) {
 			}, row)) })]
 		}),
 		extra.length > 0 && /* @__PURE__ */ jsxs("div", {
-			className: "sb-token-detail__aliased-by-truncated",
-			style: { marginTop: 6 },
+			className: "sb-token-detail__aliased-by-truncated sb-token-detail__aliased-by-truncated--axis-note",
 			children: [
 				"Values also vary with ",
 				extra.map((a) => a.name).join(", "),
@@ -3218,7 +3145,7 @@ function CompositeBreakdownContent({ type, rawValue, partialAliasOf, resolved, c
 			children: layers.map((layer, i) => {
 				const v = layer;
 				return /* @__PURE__ */ jsxs("div", {
-					style: { display: "contents" },
+					className: "sb-token-detail__shadow-layer",
 					children: [
 						multi && /* @__PURE__ */ jsxs("div", {
 							className: "sb-token-detail__breakdown-layer-header",
@@ -3560,11 +3487,8 @@ function TransitionSample({ transition, durationMs }) {
 	return /* @__PURE__ */ jsx("div", {
 		className: "sb-token-detail__motion-track",
 		children: /* @__PURE__ */ jsx("div", {
-			className: "sb-token-detail__motion-ball",
-			style: {
-				left: phase === 1 ? "calc(100% - 28px)" : "4px",
-				transition
-			},
+			className: cx("sb-token-detail__motion-ball", phase === 1 ? "sb-token-detail__motion-ball--end" : "sb-token-detail__motion-ball--start"),
+			style: { transition },
 			"aria-hidden": true
 		})
 	});
@@ -3788,7 +3712,7 @@ function TokenDetail({ path, heading }) {
 					outOfGamut && /* @__PURE__ */ jsx("span", {
 						title: "Out of sRGB gamut for this format",
 						"aria-label": "out of gamut",
-						style: { marginLeft: 6 },
+						className: "sb-token-detail__out-of-gamut-icon",
 						children: "⚠"
 					}),
 					/* @__PURE__ */ jsx(CopyButton$1, {
@@ -4262,7 +4186,10 @@ function TokenNavigator({ root, type, initiallyExpanded = 1, searchable = true,
 	}, [visibleTree, searchExpanded]);
 	if (tree.length === 0) return /* @__PURE__ */ jsx("div", {
 		...blockWrapperAttrs(cssVarPrefix, activeAxes),
-		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." })
+		children: /* @__PURE__ */ jsx("div", {
+			className: "sb-block__empty",
+			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", {
 		...blockWrapperAttrs(cssVarPrefix, activeAxes),
@@ -4523,6 +4450,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 +4472,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 +4494,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;