@unpunnyfuns/swatchbook-blocks 0.60.8 → 0.61.0

package/dist/index.mjs

@@ -78,10 +78,6 @@ function hexToComponents(hex) {
 		parseInt(expanded.slice(4, 6), 16) / 255
 	];
 }
-/**
-* Map Terrazzo's canonical CSS Color 4 space identifiers to the shorter
-* identifiers colorjs.io registers. Only the ones that differ need an entry.
-*/
 const COLORJS_SPACE_ALIASES = {
 	"display-p3": "p3",
 	"a98-rgb": "a98rgb",
@@ -114,16 +110,16 @@ function formatHex(color, alpha) {
 		value: formatRgb(color, alpha).value,
 		outOfGamut: true
 	};
-	const r = clamp255(coord(srgb, 0));
-	const g = clamp255(coord(srgb, 1));
-	const b = clamp255(coord(srgb, 2));
+	const r = unitToByte(coord(srgb, 0));
+	const g = unitToByte(coord(srgb, 1));
+	const b = unitToByte(coord(srgb, 2));
 	const base = `#${toHexByte(r)}${toHexByte(g)}${toHexByte(b)}`;
 	if (alpha >= 1) return {
 		value: base,
 		outOfGamut: false
 	};
 	return {
-		value: `${base}${toHexByte(clamp255(alpha))}`,
+		value: `${base}${toHexByte(unitToByte(alpha))}`,
 		outOfGamut: false
 	};
 }
@@ -153,7 +149,7 @@ function formatOklch(color, alpha) {
 		outOfGamut: false
 	};
 }
-function clamp255(n) {
+function unitToByte(n) {
 	return Math.max(0, Math.min(255, Math.round(n * 255)));
 }
 function clampUnit(n) {
@@ -189,6 +185,13 @@ function stringifyFallback(value, fallback) {
 }
 //#endregion
 //#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))";
@@ -196,7 +199,7 @@ const BORDER_FAINT = `1px solid var(--swatchbook-border-default, rgba(128,128,12
 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 `themeAttrs`), so
+* it in their own block wrapper (which already carries `blockWrapperAttrs`), so
 * the message itself just needs the muted type.
 */
 function EmptyState({ children }) {
@@ -243,11 +246,6 @@ function ensureSubscribed$1() {
 	channel.on("updateGlobals", onGlobals);
 	channel.on("setGlobals", onGlobals);
 }
-/**
-* Subscribe at module load so the `SET_GLOBALS` emission from preview init
-* lands in our snapshot before any block renders. Running `useSyncExternalStore`'s
-* `subscribe` lazily on first hook call would miss the event in most cases.
-*/
 ensureSubscribed$1();
 function subscribe$1(cb) {
 	ensureSubscribed$1();
@@ -293,7 +291,7 @@ function useActiveTheme() {
 * Active axis tuple for the current story/docs render — `Record<axisName,
 * contextName>`. Derived from the same input as {@link ThemeContext}; split
 * out so consumers needing per-axis info (toolbar, panel, tuple-aware
-* blocks) don't have to reparse the composed permutation ID.
+* blocks) don't have to reparse the composed theme name.
 */
 const AxesContext = createContext({});
 function useActiveAxes() {
@@ -393,25 +391,10 @@ function defaultTuple$1(axes) {
 	for (const axis of axes) out[axis.name] = axis.default;
 	return out;
 }
-/**
-* Build a `resolveAt` accessor backed by the token graph. Returns an
-* empty resolver when no graph is present (test stubs, partial
-* snapshots). Stable identity when memoized on `tokenGraph` — the
-* graph is a module-level virtual-module export so its reference stays
-* constant for the lifetime of the iframe.
-*/
 function makeResolveAt(graph) {
 	if (!graph) return () => ({});
 	return (tuple) => resolveAllAt(graph, tuple);
 }
-/**
-* Build the `resolveAt` accessor for a snapshot. Prefers the
-* snapshot's own `resolveAt` (the addon's preview decorator
-* pre-builds one at module load — see `previewResolveAt` in
-* `packages/addon/src/preview.tsx`), otherwise builds one from
-* `tokenGraph`. Hand-built snapshots can omit `resolveAt`;
-* the graph-backed fallback covers them.
-*/
 function snapshotResolveAt(snapshot) {
 	if (snapshot.resolveAt) return snapshot.resolveAt;
 	return makeResolveAt(snapshot.tokenGraph);
@@ -458,12 +441,6 @@ function useProject() {
 			cssVarPrefix: cssVarPrefix ?? "",
 			listing: listing ?? {},
 			varianceByPath: derivedVarianceByPath,
-			tokenGraph: tokenGraph ?? {
-				nodes: {},
-				axes: [],
-				axisDefaults: {},
-				axisContexts: {}
-			},
 			resolveAt
 		};
 	}, [
@@ -482,16 +459,9 @@ function useProject() {
 	return providerData ?? fallback;
 }
 function useVirtualModuleFallback(enabled) {
-	const contextPermutation = useActiveTheme();
+	const contextThemeName = useActiveTheme();
 	const contextAxes = useActiveAxes();
 	const channelGlobals = useChannelGlobals();
-	/**
-	* Subscribe to the live token snapshot rather than reading the virtual
-	* module's module-level exports directly. Initial values come from
-	* `virtual:swatchbook/tokens` at load time; subsequent dev-time edits
-	* flow through the addon's HMR channel and update this snapshot in
-	* place so blocks re-render without a full preview reload.
-	*/
 	const tokens = useTokenSnapshot();
 	useEffect(() => {
 		if (!enabled) return;
@@ -504,7 +474,7 @@ function useVirtualModuleFallback(enabled) {
 		channelGlobals.axes,
 		tokens.axes
 	]);
-	const activeTheme = contextPermutation || tupleToName(tokens.axes, activeAxes);
+	const activeTheme = contextThemeName || tupleToName(tokens.axes, activeAxes);
 	const resolveAt = useMemo(() => makeResolveAt(tokens.tokenGraph), [tokens.tokenGraph]);
 	const fallbackVarianceByPath = useMemo(() => {
 		const graph = tokens.tokenGraph;
@@ -522,7 +492,6 @@ function useVirtualModuleFallback(enabled) {
 		cssVarPrefix: tokens.cssVarPrefix,
 		listing: tokens.listing,
 		varianceByPath: fallbackVarianceByPath,
-		tokenGraph: tokens.tokenGraph,
 		resolveAt
 	}), [
 		activeTheme,
@@ -532,7 +501,6 @@ function useVirtualModuleFallback(enabled) {
 		tokens.cssVarPrefix,
 		tokens.listing,
 		fallbackVarianceByPath,
-		tokens.tokenGraph,
 		resolveAt
 	]);
 }
@@ -597,14 +565,6 @@ function BorderSample({ path }) {
 * override block chrome without relying on hashed class names).
 */
 const BLOCK_ATTR = "data-swatchbook-block";
-/**
-* Opt-out class that Storybook's `.sbdocs` stylesheet uses to self-exclude
-* on MDX docs pages — every `.sbdocs` house rule is wrapped in
-* `:not(.sb-unstyled, .sb-unstyled *)`, so any descendant of a `.sb-unstyled`
-* container is left alone. Stamped onto every block wrapper so blocks
-* render identically in MDX docs and regular stories without fighting
-* cascade specificity.
-*/
 const WRAPPER_CLASSES = "sb-unstyled sb-block";
 /**
 * Spread helper for the common block wrapper. Returns:
@@ -622,7 +582,7 @@ const WRAPPER_CLASSES = "sb-unstyled sb-block";
 *   MDX docs house styles self-exclude the subtree, plus `sb-block`
 *   which carries the shared chrome from `internal/styles.css`.
 */
-function themeAttrs(prefix, tuple) {
+function blockWrapperAttrs(prefix, tuple) {
 	return {
 		...perAxisAttrs(prefix, tuple),
 		[BLOCK_ATTR]: "",
@@ -728,11 +688,6 @@ function toMagnitude(v) {
 	}
 	return NaN;
 }
-/**
-* Coerce a possibly-null/undefined number to 0 — `coords` returns
-* `(number | null)[]` and `noUncheckedIndexedAccess` adds `undefined`
-* on top. `typeof` narrows the union for the comparator below.
-*/
 function safeNumber(v) {
 	return typeof v === "number" && Number.isFinite(v) ? v : 0;
 }
@@ -807,14 +762,14 @@ function BorderPreview({ filter, caption, sortBy = "path", sortDir = "asc" }) {
 	]);
 	const captionText = caption ?? `${rows.length} border${rows.length === 1 ? "" : "s"}${filter ? ` matching \`${filter}\`` : ""} · ${activeTheme}`;
 	if (rows.length === 0) return /* @__PURE__ */ jsx("div", {
-		...themeAttrs(cssVarPrefix, activeAxes),
+		...blockWrapperAttrs(cssVarPrefix, activeAxes),
 		children: /* @__PURE__ */ jsx("div", {
 			className: "sb-block__empty",
 			children: "No border tokens match this filter."
 		})
 	});
 	return /* @__PURE__ */ jsxs("div", {
-		...themeAttrs(cssVarPrefix, activeAxes),
+		...blockWrapperAttrs(cssVarPrefix, activeAxes),
 		children: [/* @__PURE__ */ jsx("div", {
 			className: "sb-block__caption",
 			children: captionText
@@ -861,10 +816,6 @@ function BorderPreview({ filter, caption, sortBy = "path", sortDir = "asc" }) {
 }
 //#endregion
 //#region src/ColorPalette.tsx
-/**
-* Count segments in the filter before the first glob (`*` / `**`).
-* `color.*` → 2; `color.surface.*` → 3; `color` → 1; undefined → 0.
-*/
 function fixedPrefixLength(filter) {
 	if (!filter) return 0;
 	const segments = filter.split(".");
@@ -922,14 +873,14 @@ function ColorPalette({ filter, groupBy, caption, sortBy = "path", sortDir = "as
 	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", {
-		...themeAttrs(cssVarPrefix, activeAxes),
+		...blockWrapperAttrs(cssVarPrefix, activeAxes),
 		children: /* @__PURE__ */ jsx("div", {
 			className: "sb-block__empty",
 			children: "No color tokens match this filter."
 		})
 	});
 	return /* @__PURE__ */ jsxs("div", {
-		...themeAttrs(cssVarPrefix, activeAxes),
+		...blockWrapperAttrs(cssVarPrefix, activeAxes),
 		children: [/* @__PURE__ */ jsx("div", {
 			className: "sb-block__caption",
 			children: captionText
@@ -1115,14 +1066,14 @@ function ColorTable({ filter, caption, sortBy = "path", sortDir = "asc", searcha
 	const matchSuffix = searchable && query.trim() !== "" ? ` · ${visibleGroups.length} matching "${query.trim()}"` : "";
 	const captionText = caption ?? `${totalTokens} color${totalTokens === 1 ? "" : "s"} across ${groups.length} group${groups.length === 1 ? "" : "s"}${filter ? ` matching \`${filter}\`` : ""}${matchSuffix} · ${activeTheme}`;
 	if (groups.length === 0) return /* @__PURE__ */ jsx("div", {
-		...themeAttrs(cssVarPrefix, activeAxes),
+		...blockWrapperAttrs(cssVarPrefix, activeAxes),
 		children: /* @__PURE__ */ jsx("div", {
 			className: "sb-block__empty",
 			children: "No color tokens match this filter."
 		})
 	});
 	return /* @__PURE__ */ jsxs("div", {
-		...themeAttrs(cssVarPrefix, activeAxes),
+		...blockWrapperAttrs(cssVarPrefix, activeAxes),
 		children: [searchable && /* @__PURE__ */ jsx("div", {
 			className: "sb-color-table__search",
 			children: /* @__PURE__ */ jsx("input", {
@@ -1404,13 +1355,6 @@ function ValueCell({ value, label, children }) {
 		]
 	});
 }
-/**
-* Pick the value + gamut flag to display in the single Value column based
-* on the active color-format context. We pre-compute hex/hsl/oklch for the
-* expanded sub-table regardless; the extras (`rgb`, `raw`) take a fresh
-* `formatColor` pass. Keeps the hot path fast while staying honest about
-* out-of-gamut warnings per-format.
-*/
 function pickActiveFormat(raw, colorFormat, hex, hsl, oklch) {
 	switch (colorFormat) {
 		case "hex": return {
@@ -1454,30 +1398,11 @@ function buildVariantDefs(variants) {
 		displayOrder
 	};
 }
-/**
-* Position of a label within a group — the `base` entry always sorts first,
-* then declared labels in the order the caller wrote them in the `variants`
-* prop. Unknown labels (shouldn't happen in practice) fall to the end.
-*/
 function orderIndex(label, defs) {
 	if (label === BASE_LABEL) return -1;
 	const idx = defs.displayOrder.indexOf(label);
 	return idx >= 0 ? idx : Number.POSITIVE_INFINITY;
 }
-/**
-* Resolve the variant label + base path for a token, if any. The leaf
-* (last dot-segment) must either equal the suffix outright (dot-segment
-* form: `hi.disabled` matches suffix `disabled`) or end in `-<suffix>`
-* (hyphen-tail form: `hi-d` matches `d`). The leading hyphen is required
-* for the tail form so suffix `0` can't hit `neutral-900` by character.
-*
-* Returned `basePath` is what gets used as the grouping key:
-* - Dot-segment match → parent path (drop the last dot-segment)
-* - Hyphen-tail match → same dot-depth, leaf with `-<suffix>` stripped
-*
-* Entries in `matchOrder` are pre-sorted longest-first, so `h-dark` wins
-* over `dark` for a path ending in `-h-dark`.
-*/
 function matchVariant(path, matchOrder) {
 	if (matchOrder.length === 0) return void 0;
 	const segments = path.split(".");
@@ -1552,7 +1477,7 @@ function Diagnostics({ caption } = {}) {
 	const summary = useMemo(() => summarize(diagnostics), [diagnostics]);
 	const headingText = caption ?? `Diagnostics · ${summary.text}`;
 	return /* @__PURE__ */ jsx("div", {
-		...themeAttrs(cssVarPrefix, activeAxes),
+		...blockWrapperAttrs(cssVarPrefix, activeAxes),
 		"data-testid": "diagnostics",
 		children: /* @__PURE__ */ jsxs("details", {
 			open: summary.hasErrorsOrWarnings,
@@ -1605,12 +1530,6 @@ const styles$1 = {
 		minHeight: 1
 	}
 };
-/**
-* Convert a DTCG dimension `$value` (`{ value, unit }`) to pixels for the
-* purpose of deciding whether to cap the rendered bar. Returns `NaN` for
-* units we can't reasonably approximate (ex / ch / %), which the caller
-* treats as "render at cssVar but don't cap".
-*/
 function toPixels$1(raw) {
 	if (raw == null || typeof raw !== "object") return NaN;
 	const v = raw;
@@ -1622,14 +1541,14 @@ function toPixels$1(raw) {
 		default: return NaN;
 	}
 }
-function DimensionBar({ path, kind = "length" }) {
+function DimensionBar({ path, visual = "length" }) {
 	const project = useProject();
 	const { resolved } = project;
 	const cssVar = resolveCssVar(path, project);
 	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;
-	switch (kind) {
+	switch (visual) {
 		case "radius": return /* @__PURE__ */ jsx("div", {
 			style: {
 				...styles$1.radiusSample,
@@ -1770,7 +1689,7 @@ function toPixels(raw) {
 		default: return NaN;
 	}
 }
-function DimensionScale({ filter, kind = "length", caption, sortBy = "value", sortDir = "asc" }) {
+function DimensionScale({ filter, visual = "length", caption, sortBy = "value", sortDir = "asc" }) {
 	const project = useProject();
 	const { resolved, activeTheme, activeAxes, cssVarPrefix } = project;
 	const rows = useMemo(() => {
@@ -1799,14 +1718,14 @@ function DimensionScale({ filter, kind = "length", caption, sortBy = "value", so
 	]);
 	const captionText = caption ?? `${rows.length} dimension${rows.length === 1 ? "" : "s"}${filter ? ` matching \`${filter}\`` : ""} · ${activeTheme}`;
 	if (rows.length === 0) return /* @__PURE__ */ jsx("div", {
-		...themeAttrs(cssVarPrefix, activeAxes),
+		...blockWrapperAttrs(cssVarPrefix, activeAxes),
 		children: /* @__PURE__ */ jsx("div", {
 			className: "sb-block__empty",
 			children: "No dimension tokens match this filter."
 		})
 	});
 	return /* @__PURE__ */ jsxs("div", {
-		...themeAttrs(cssVarPrefix, activeAxes),
+		...blockWrapperAttrs(cssVarPrefix, activeAxes),
 		children: [/* @__PURE__ */ jsx("div", {
 			className: "sb-block__caption",
 			children: captionText
@@ -1827,7 +1746,7 @@ function DimensionScale({ filter, kind = "length", caption, sortBy = "value", so
 					className: "sb-dimension-scale__visual-cell",
 					children: [/* @__PURE__ */ jsx(DimensionBar, {
 						path: row.path,
-						kind
+						visual
 					}), row.capped && /* @__PURE__ */ jsxs("span", {
 						className: "sb-dimension-scale__cap",
 						children: [
@@ -1846,13 +1765,13 @@ function DimensionScale({ filter, kind = "length", caption, sortBy = "value", so
 	});
 }
 //#endregion
-//#region src/FontFamilySample.tsx
+//#region src/FontFamilyPreview.tsx
 function stackString(raw) {
 	if (typeof raw === "string") return raw;
 	if (Array.isArray(raw)) return raw.map(String).join(", ");
 	return "";
 }
-function FontFamilySample({ filter, sample = "The quick brown fox jumps over the lazy dog.", caption, sortBy = "path", sortDir = "asc" }) {
+function FontFamilyPreview({ filter, sample = "The quick brown fox jumps over the lazy dog.", caption, sortBy = "path", sortDir = "asc" }) {
 	const project = useProject();
 	const { resolved, activeTheme, activeAxes, cssVarPrefix } = project;
 	const rows = useMemo(() => {
@@ -1876,14 +1795,14 @@ function FontFamilySample({ filter, sample = "The quick brown fox jumps over the
 	]);
 	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, activeAxes),
+		...blockWrapperAttrs(cssVarPrefix, activeAxes),
 		children: /* @__PURE__ */ jsx("div", {
 			className: "sb-block__empty",
 			children: "No fontFamily tokens match this filter."
 		})
 	});
 	return /* @__PURE__ */ jsxs("div", {
-		...themeAttrs(cssVarPrefix, activeAxes),
+		...blockWrapperAttrs(cssVarPrefix, activeAxes),
 		children: [/* @__PURE__ */ jsx("div", {
 			className: "sb-block__caption",
 			children: captionText
@@ -1963,14 +1882,14 @@ function FontWeightScale({ filter, sample = "Aa", caption, sortBy = "value", sor
 	]);
 	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, activeAxes),
+		...blockWrapperAttrs(cssVarPrefix, activeAxes),
 		children: /* @__PURE__ */ jsx("div", {
 			className: "sb-block__empty",
 			children: "No fontWeight tokens match this filter."
 		})
 	});
 	return /* @__PURE__ */ jsxs("div", {
-		...themeAttrs(cssVarPrefix, activeAxes),
+		...blockWrapperAttrs(cssVarPrefix, activeAxes),
 		children: [/* @__PURE__ */ jsx("div", {
 			className: "sb-block__caption",
 			children: captionText
@@ -2047,14 +1966,14 @@ function GradientPalette({ filter, caption, sortBy = "path", sortDir = "asc" })
 	]);
 	const captionText = caption ?? `${rows.length} gradient${rows.length === 1 ? "" : "s"}${filter ? ` matching \`${filter}\`` : ""} · ${activeTheme}`;
 	if (rows.length === 0) return /* @__PURE__ */ jsx("div", {
-		...themeAttrs(cssVarPrefix, activeAxes),
+		...blockWrapperAttrs(cssVarPrefix, activeAxes),
 		children: /* @__PURE__ */ jsx("div", {
 			className: "sb-block__empty",
 			children: "No gradient tokens match this filter."
 		})
 	});
 	return /* @__PURE__ */ jsxs("div", {
-		...themeAttrs(cssVarPrefix, activeAxes),
+		...blockWrapperAttrs(cssVarPrefix, activeAxes),
 		children: [/* @__PURE__ */ jsx("div", {
 			className: "sb-block__caption",
 			children: captionText
@@ -2104,14 +2023,6 @@ function GradientPalette({ filter, caption, sortBy = "path", sortDir = "asc" })
 }
 //#endregion
 //#region src/internal/prefers-reduced-motion.ts
-/**
-* True when rendering inside Chromatic's snapshot runner. Chromatic's
-* browser ships a recognisable user-agent string; checked here so
-* motion-looping components can fall back to their static state for
-* deterministic snapshots. Per-component detection rather than the
-* global `chromatic.prefersReducedMotion: true` parameter — that
-* parameter is incompatible with Chromatic's verification parser.
-*/
 function isChromatic() {
 	if (typeof navigator === "undefined") return false;
 	return navigator.userAgent.includes("Chromatic");
@@ -2332,14 +2243,14 @@ 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, activeAxes),
+		...blockWrapperAttrs(cssVarPrefix, activeAxes),
 		children: /* @__PURE__ */ jsx("div", {
 			className: "sb-block__empty",
 			children: "No motion tokens match this filter."
 		})
 	});
 	return /* @__PURE__ */ jsxs("div", {
-		...themeAttrs(cssVarPrefix, activeAxes),
+		...blockWrapperAttrs(cssVarPrefix, activeAxes),
 		children: [
 			/* @__PURE__ */ jsx("div", {
 				className: "sb-block__caption",
@@ -2442,7 +2353,7 @@ function OpacityScale({ filter, type = "number", sampleColor = "color.accent.bg"
 	]);
 	const captionText = caption ?? `${rows.length} opacity token${rows.length === 1 ? "" : "s"}${filter ? ` matching \`${filter}\`` : ""} · ${activeTheme}`;
 	if (rows.length === 0) return /* @__PURE__ */ jsx("div", {
-		...themeAttrs(cssVarPrefix, activeAxes),
+		...blockWrapperAttrs(cssVarPrefix, activeAxes),
 		children: /* @__PURE__ */ jsx("div", {
 			className: "sb-block__empty",
 			children: "No opacity tokens match this filter."
@@ -2450,7 +2361,7 @@ function OpacityScale({ filter, type = "number", sampleColor = "color.accent.bg"
 	});
 	const sampleColorVar = resolveCssVar(sampleColor, project);
 	return /* @__PURE__ */ jsxs("div", {
-		...themeAttrs(cssVarPrefix, activeAxes),
+		...blockWrapperAttrs(cssVarPrefix, activeAxes),
 		children: [/* @__PURE__ */ jsx("div", {
 			className: "sb-block__caption",
 			children: captionText
@@ -2581,14 +2492,14 @@ function ShadowPreview({ filter, caption, sortBy = "path", sortDir = "asc" }) {
 	]);
 	const captionText = caption ?? `${rows.length} shadow${rows.length === 1 ? "" : "s"}${filter ? ` matching \`${filter}\`` : ""} · ${activeTheme}`;
 	if (rows.length === 0) return /* @__PURE__ */ jsx("div", {
-		...themeAttrs(cssVarPrefix, activeAxes),
+		...blockWrapperAttrs(cssVarPrefix, activeAxes),
 		children: /* @__PURE__ */ jsx("div", {
 			className: "sb-block__empty",
 			children: "No shadow tokens match this filter."
 		})
 	});
 	return /* @__PURE__ */ jsxs("div", {
-		...themeAttrs(cssVarPrefix, activeAxes),
+		...blockWrapperAttrs(cssVarPrefix, activeAxes),
 		children: [/* @__PURE__ */ jsx("div", {
 			className: "sb-block__caption",
 			children: captionText
@@ -2654,7 +2565,7 @@ function Layer({ layer, index, total, colorFormat }) {
 	});
 }
 //#endregion
-//#region src/StrokeStyleSample.tsx
+//#region src/StrokeStylePreview.tsx
 const STRING_STYLES = new Set([
 	"solid",
 	"dashed",
@@ -2669,7 +2580,7 @@ function extractCssStyle(value) {
 	if (typeof value === "string" && STRING_STYLES.has(value)) return value;
 	return null;
 }
-function StrokeStyleSample({ filter, caption, sortBy = "path", sortDir = "asc" }) {
+function StrokeStylePreview({ filter, caption, sortBy = "path", sortDir = "asc" }) {
 	const project = useProject();
 	const { resolved, activeTheme, activeAxes, cssVarPrefix } = project;
 	const rows = useMemo(() => {
@@ -2694,14 +2605,14 @@ function StrokeStyleSample({ filter, caption, sortBy = "path", sortDir = "asc" }
 	]);
 	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, activeAxes),
+		...blockWrapperAttrs(cssVarPrefix, activeAxes),
 		children: /* @__PURE__ */ jsx("div", {
 			className: "sb-block__empty",
 			children: "No strokeStyle tokens match this filter."
 		})
 	});
 	return /* @__PURE__ */ jsxs("div", {
-		...themeAttrs(cssVarPrefix, activeAxes),
+		...blockWrapperAttrs(cssVarPrefix, activeAxes),
 		children: [/* @__PURE__ */ jsx("div", {
 			className: "sb-block__caption",
 			children: captionText
@@ -3252,12 +3163,6 @@ function formatDimensionValue(v) {
 	}
 	return JSON.stringify(v);
 }
-/**
-* Route sub-value colors through `formatColor` so they honor the active
-* color-format dropdown, just like the standalone `<ColorPalette />` and
-* `<TokenDetail />` top-line do. Returns `null` for a missing field so
-* the key/value row drops out entirely.
-*/
 function formatColorSubValue(v, format) {
 	if (v == null) return null;
 	return formatColor(v, format).value;
@@ -3270,11 +3175,6 @@ function pickArrayAliases(v) {
 	if (!Array.isArray(v)) return void 0;
 	return v;
 }
-/**
-* Walk the alias chain starting from an immediate sub-value alias target.
-* `aliasTarget` is the path the sub-value directly references; the target
-* token's own `aliasChain` continues the walk to the primitive.
-*/
 function subValueChain(aliasTarget, resolved) {
 	if (!aliasTarget) return void 0;
 	const tail = (resolved?.[aliasTarget])?.aliasChain;
@@ -3366,7 +3266,7 @@ function CompositePreviewContent({ type, cssVar, rawValue }) {
 		style: { background: `linear-gradient(to right, ${cssVar})` },
 		"aria-hidden": true
 	});
-	if (type === "strokeStyle") return /* @__PURE__ */ jsx(StrokeStylePreview, { value: rawValue });
+	if (type === "strokeStyle") return /* @__PURE__ */ jsx(StrokeStylePreview$1, { value: rawValue });
 	if (type === "color") return /* @__PURE__ */ jsxs("div", {
 		className: "sb-token-detail__color-swatch-row",
 		"aria-hidden": true,
@@ -3380,7 +3280,7 @@ function CompositePreviewContent({ type, cssVar, rawValue }) {
 	});
 	return null;
 }
-function StrokeStylePreview({ value }) {
+function StrokeStylePreview$1({ value }) {
 	if (typeof value === "string" && STROKE_STYLE_STRINGS.has(value)) return /* @__PURE__ */ jsx("div", {
 		className: "sb-token-detail__stroke-style-line",
 		style: { borderTopStyle: value },
@@ -3579,11 +3479,6 @@ function TokenHeader({ path, heading }) {
 }
 //#endregion
 //#region src/token-detail/TokenUsageSnippet.tsx
-/**
-* DTCG `$type`s with a single canonical CSS property. Types whose value is
-* applied across many properties (`dimension`, `number`, `strokeStyle`,
-* `typography`) are intentionally absent — they fall back to a commented hint.
-*/
 const CSS_PROPERTY_BY_TYPE = {
 	color: "color",
 	shadow: "box-shadow",
@@ -3624,10 +3519,10 @@ function TokenUsageSnippet({ path }) {
 function TokenDetail({ path, heading }) {
 	const { token, cssVar, activeTheme, activeAxes, cssVarPrefix } = useTokenDetailData(path);
 	const colorFormat = useColorFormat();
-	const theme = themeAttrs(cssVarPrefix, activeAxes);
+	const wrapperAttrs = blockWrapperAttrs(cssVarPrefix, activeAxes);
 	if (!token) return /* @__PURE__ */ jsx("div", {
-		...theme,
-		className: cx(theme["className"], "sb-token-detail"),
+		...wrapperAttrs,
+		className: cx(wrapperAttrs["className"], "sb-token-detail"),
 		children: /* @__PURE__ */ jsxs("div", {
 			className: "sb-token-detail__missing",
 			children: [
@@ -3645,8 +3540,8 @@ function TokenDetail({ path, heading }) {
 	const value = formatTokenValue(token.$value, token.$type, colorFormat, listing[path]);
 	const outOfGamut = gamut?.outOfGamut ?? false;
 	return /* @__PURE__ */ jsxs("div", {
-		...theme,
-		className: cx(theme["className"], "sb-token-detail"),
+		...wrapperAttrs,
+		className: cx(wrapperAttrs["className"], "sb-token-detail"),
 		children: [
 			/* @__PURE__ */ jsx(TokenHeader, {
 				path,
@@ -3689,12 +3584,6 @@ function TokenDetail({ path, heading }) {
 }
 //#endregion
 //#region src/internal/DetailOverlay.tsx
-/**
-* Selector for elements the trap considers focus stops. Mirrors the
-* "tabbable" set most focus-trap libraries use; the `:not(...)` clauses
-* skip the panel wrapper itself (we focus it manually on mount via its
-* own ref) and any explicitly-detabbed descendants.
-*/
 const FOCUSABLE_SELECTOR = [
 	"a[href]",
 	"button:not([disabled])",
@@ -3734,11 +3623,6 @@ function DetailOverlay({ path, onClose, testId = "swatchbook-overlay" }) {
 		window.addEventListener("keydown", onKey);
 		return () => window.removeEventListener("keydown", onKey);
 	}, [onClose]);
-	/**
-	* Wrap Tab inside the panel: from the last focusable, jump to the first;
-	* from the first (or from the panel itself), Shift+Tab jumps to the last.
-	* Defers to the browser otherwise.
-	*/
 	const onPanelKeyDown = (e) => {
 		if (e.key !== "Tab") return;
 		const panel = panelRef.current;
@@ -3787,12 +3671,6 @@ function DetailOverlay({ path, onClose, testId = "swatchbook-overlay" }) {
 		})
 	});
 }
-/**
-* Walk up from `node` to the direct child of `<body>` that contains it.
-* Returns `null` when the node isn't attached to the document (mid-mount,
-* post-unmount). Used to identify which top-level branch to *not* mark
-* inert when the overlay opens.
-*/
 function findBodyChildContaining(node) {
 	let cursor = node;
 	while (cursor && cursor.parentElement !== document.body) cursor = cursor.parentElement;
@@ -3886,11 +3764,6 @@ function flattenVisible(nodes, expanded, parentPath, out) {
 		if (node.kind === "group" && expanded.has(node.path)) flattenVisible(node.children, expanded, node.path, out);
 	}
 }
-/**
-* Return a pruned copy of the tree keeping only leaves whose path is in
-* `matches`, plus the groups on the way to them. Every surviving group's
-* path is added to `expandOut` so callers can force those groups open.
-*/
 function pruneTreeForMatches(nodes, matches, expandOut) {
 	const out = [];
 	for (const node of nodes) if (node.kind === "leaf") {
@@ -4092,11 +3965,11 @@ function TokenNavigator({ root, type, initiallyExpanded = 1, searchable = true,
 		return n;
 	}, [visibleTree, searchExpanded]);
 	if (tree.length === 0) return /* @__PURE__ */ jsx("div", {
-		...themeAttrs(cssVarPrefix, activeAxes),
+		...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." })
 	});
 	return /* @__PURE__ */ jsxs("div", {
-		...themeAttrs(cssVarPrefix, activeAxes),
+		...blockWrapperAttrs(cssVarPrefix, activeAxes),
 		children: [
 			searchable && /* @__PURE__ */ jsx("div", {
 				className: "sb-token-navigator__search",
@@ -4288,7 +4161,7 @@ const LeafPreview = memo(function LeafPreview({ path, token }) {
 			className: "sb-token-navigator__preview-dimension",
 			children: /* @__PURE__ */ jsx(DimensionBar, {
 				path,
-				kind: "length"
+				visual: "length"
 			})
 		})]
 	});
@@ -4378,14 +4251,14 @@ function TokenTable({ filter, type, caption, sortBy = "path", sortDir = "asc", s
 	const matchSuffix = searchable && query.trim() !== "" ? ` · ${visibleRows.length} matching "${query.trim()}"` : "";
 	const captionText = caption ?? `${rows.length} token${rows.length === 1 ? "" : "s"}${filter ? ` matching \`${filter}\`` : ""}${type ? ` · $type=${type}` : ""}${matchSuffix} · ${activeTheme}`;
 	if (rows.length === 0) return /* @__PURE__ */ jsx("div", {
-		...themeAttrs(cssVarPrefix, activeAxes),
+		...blockWrapperAttrs(cssVarPrefix, activeAxes),
 		children: /* @__PURE__ */ jsx("div", {
 			className: "sb-block__empty",
 			children: "No tokens match this filter."
 		})
 	});
 	return /* @__PURE__ */ jsxs("div", {
-		...themeAttrs(cssVarPrefix, activeAxes),
+		...blockWrapperAttrs(cssVarPrefix, activeAxes),
 		children: [
 			searchable && /* @__PURE__ */ jsx("div", {
 				className: "sb-token-table__search",
@@ -4557,14 +4430,14 @@ function TypographyScale({ filter, sample = "The quick brown fox jumps over the
 	]);
 	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, activeAxes),
+		...blockWrapperAttrs(cssVarPrefix, activeAxes),
 		children: /* @__PURE__ */ jsx("div", {
 			className: "sb-block__empty",
 			children: "No typography tokens match this filter."
 		})
 	});
 	return /* @__PURE__ */ jsxs("div", {
-		...themeAttrs(cssVarPrefix, activeAxes),
+		...blockWrapperAttrs(cssVarPrefix, activeAxes),
 		children: [/* @__PURE__ */ jsx("div", {
 			className: "sb-block__caption",
 			children: captionText
@@ -4587,6 +4460,6 @@ function TypographyScale({ filter, sample = "The quick brown fox jumps over the
 	});
 }
 //#endregion
-export { AliasChain, AliasedBy, AxesContext, AxisVariance, BorderPreview, BorderSample, COLOR_FORMATS, ColorFormatContext, ColorPalette, ColorTable, CompositeBreakdown, CompositePreview, ConsumerOutput, Diagnostics, DimensionBar, DimensionScale, FontFamilySample, FontWeightScale, GradientPalette, MotionPreview, MotionSample, OpacityScale, ShadowPreview, ShadowSample, StrokeStyleSample, SwatchbookContext, SwatchbookProvider, ThemeContext, TokenDetail, TokenHeader, TokenNavigator, TokenTable, TokenUsageSnippet, TypographyScale, formatColor, useActiveAxes, useActiveTheme, useColorFormat, useOptionalSwatchbookData, useSwatchbookData };
+export { AliasChain, AliasedBy, AxesContext, AxisVariance, BorderPreview, BorderSample, COLOR_FORMATS, ColorFormatContext, ColorPalette, ColorTable, CompositeBreakdown, CompositePreview, ConsumerOutput, Diagnostics, DimensionBar, DimensionScale, FontFamilyPreview, FontWeightScale, GradientPalette, MotionPreview, MotionSample, OpacityScale, ShadowPreview, ShadowSample, StrokeStylePreview, SwatchbookContext, SwatchbookProvider, ThemeContext, TokenDetail, TokenHeader, TokenNavigator, TokenTable, TokenUsageSnippet, TypographyScale, formatColor, useActiveAxes, useActiveTheme, useColorFormat, useOptionalSwatchbookData, useSwatchbookData };
 
 //# sourceMappingURL=index.mjs.map