@unpunnyfuns/swatchbook-blocks 1.1.1 → 2.0.0

package/dist/index.mjs

@@ -1,100 +1,18 @@
 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, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import { C as COLOR_FORMATS, S as BorderSample, _ as cssVarAsNumber, a as mergePresenters, b as useRootFontSize, c as ShadowSample, d as OpacitySwatch, f as MotionSample, g as FontWeightSpecimen, h as GradientSwatch, i as PresenterContext, l as TypeSpecimen, m as usePrefersReducedMotion, n as useProjectSource, p as resolveMotionSpec, r as DEFAULT_PRESENTERS, s as usePresenter, u as StrokeSample, v as FontFamilySpecimen, w as formatColor, x as ColorSwatch, y as DimensionSample } from "./host-e2nSv-sA.mjs";
+import { parseColor } from "@unpunnyfuns/swatchbook-core/format-color";
+import { createContext, memo, useCallback, useContext, useDeferredValue, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { formatDimension, formatSubColor, formatTokenValue, formatTokenValue as formatTokenValue$2 } from "@unpunnyfuns/swatchbook-core/token-value-css";
+import cx from "clsx";
+import { dataAttr } from "@unpunnyfuns/swatchbook-core/data-attr";
 import { getVariance, listPaths, resolveAllWithProvenanceAt } from "@unpunnyfuns/swatchbook-core/graph";
 import { cssVarRef } 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 { 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";
 import { useWindowVirtualizer } from "@tanstack/react-virtual";
-//#region src/internal/channel.ts
-let channel = null;
-const pending = /* @__PURE__ */ new Set();
-/**
-* Host adapter API. The single most load-bearing function in the host
-* contract — the addon calls it once at preview init.
-*
-* Inject the host channel. Runs any subscribers that queued before the
-* channel existed, then clears the queue. The host contract does NOT dedupe:
-* on HMR a subscriber's module re-runs {@link onChannel}, which re-attaches
-* immediately once the channel is set, so each subscriber MUST guard its own
-* attach to stay single-wired.
-*/
-function registerChannel(next) {
-	channel = next;
-	for (const attach of pending) attach(next);
-	pending.clear();
-}
-/**
-* Host adapter API — see {@link registerChannel}.
-*
-* Attach a subscriber to the host channel now if one is registered, else queue
-* it to run the moment {@link registerChannel} fires. Blocks call this at
-* module load; the queue absorbs the gap until the addon injects the channel.
-*/
-function onChannel(attach) {
-	if (channel) attach(channel);
-	else pending.add(attach);
-}
-//#endregion
-//#region src/internal/channel-globals.ts
-const AXES_GLOBAL_KEY = "swatchbookAxes";
-const COLOR_FORMAT_GLOBAL_KEY = "swatchbookColorFormat";
-let snapshot$1 = {
-	axes: null,
-	format: null
-};
-const listeners$1 = /* @__PURE__ */ new Set();
-let subscribed$1 = false;
-function isColorFormat(value) {
-	return typeof value === "string" && COLOR_FORMATS.includes(value);
-}
-function attach$1(channel) {
-	if (subscribed$1) return;
-	subscribed$1 = true;
-	let lastFingerprint = "";
-	const onGlobals = (payload) => {
-		const globals = payload.globals;
-		if (!globals) return;
-		const incomingAxes = globals[AXES_GLOBAL_KEY];
-		const incomingFormat = globals[COLOR_FORMAT_GLOBAL_KEY];
-		const nextAxes = incomingAxes && typeof incomingAxes === "object" ? incomingAxes : snapshot$1.axes;
-		const nextFormat = isColorFormat(incomingFormat) ? incomingFormat : snapshot$1.format;
-		const fingerprint = `${nextFormat ?? ""}|${nextAxes ? JSON.stringify(nextAxes) : ""}`;
-		if (fingerprint === lastFingerprint) return;
-		lastFingerprint = fingerprint;
-		snapshot$1 = {
-			axes: nextAxes,
-			format: nextFormat
-		};
-		for (const cb of listeners$1) cb();
-	};
-	channel.on("globalsUpdated", onGlobals);
-	channel.on("updateGlobals", onGlobals);
-	channel.on("setGlobals", onGlobals);
-}
-onChannel(attach$1);
-function subscribe$2(cb) {
-	listeners$1.add(cb);
-	return () => {
-		listeners$1.delete(cb);
-	};
-}
-function getSnapshot$1() {
-	return snapshot$1;
-}
-function getServerSnapshot$1() {
-	return snapshot$1;
-}
-function useChannelGlobals() {
-	return useSyncExternalStore(subscribe$2, getSnapshot$1, getServerSnapshot$1);
-}
-//#endregion
 //#region src/contexts.ts
 /**
 * Context carrying the full {@link ProjectSnapshot}. `null` sentinel lets
@@ -129,10 +47,18 @@ function useActiveAxes() {
 	return useContext(AxesContext);
 }
 /**
-* Active color-display format for the current story/docs render. Populated
-* by the addon's preview decorator from the `swatchbookColorFormat` global
-* (per-story `globals` or toolbar dropdown) and consumed by blocks that
-* render color-token values. Emitted CSS is unaffected.
+* Active color-display format for the current story/docs render, consumed
+* by blocks that render color-token values. Emitted CSS is unaffected.
+*
+* Sits in the middle of the precedence chain a block resolves via
+* `colorFormat ?? useColorFormat()`: a block's own `colorFormat` prop wins
+* over this context, which wins over the active source's
+* `defaultColorFormat` (from `Config.defaultColorFormat`). "Active
+* source" is whichever one is actually feeding the render:
+* `SwatchbookProvider`'s snapshot when a story decorator mounted one,
+* otherwise the ambient `ProjectSource` (`#/host.ts`) that MDX-embedded
+* blocks (no `<Story/>`, no provider) read through `useProject()`'s
+* fallback path.
 *
 * Runs through plain React context rather than Storybook's `useGlobals` so
 * per-story seeded globals flow through on first render and the same hook
@@ -140,314 +66,18 @@ function useActiveAxes() {
 * isn't available).
 */
 const ColorFormatContext = createContext(null);
-function useColorFormat() {
-	const contextValue = useContext(ColorFormatContext);
-	const channelGlobals = useChannelGlobals();
-	return contextValue ?? channelGlobals.format ?? "hex";
-}
-//#endregion
-//#region src/internal/channel-tokens.ts
-/**
-* Host adapter API — same integration tier as {@link BlockChannel} /
-* {@link registerChannel} / {@link onChannel}, distinct from the
-* components/hooks/`SwatchbookProvider` surface MDX/story authors use.
-* Most consumers never touch this; it exists for whoever builds the next
-* host integration.
-*
-* Live token snapshot backed by the addon's preview dev-time HMR event.
-*
-* The initial snapshot is *injected* by the addon preview via
-* {@link registerTokenSource} rather than imported from the addon's
-* `virtual:swatchbook/tokens` build artifact — so blocks carries no
-* dependency on that module and imports cleanly standalone (outside
-* Storybook, in unit tests, in the docs site). Until something registers
-* a source, blocks render from empty defaults.
-*
-* For dev-time updates this module subscribes to `TOKENS_UPDATED_EVENT`
-* on Storybook's channel (which the addon preview re-broadcasts from its
-* own HMR listener) and exposes the latest snapshot via
-* `useSyncExternalStore`, so hooks re-render in place on each token save.
-*/
-const TOKENS_UPDATED_EVENT = "swatchbook/tokens-updated";
-let snapshot = {
-	axes: [],
-	presets: [],
-	diagnostics: [],
-	css: "",
-	cssVarPrefix: "",
-	indicators: {},
-	listing: {},
-	tokenGraph: {
-		nodes: {},
-		axes: [],
-		axisDefaults: {},
-		axisContexts: {}
-	},
-	defaultTuple: {},
-	version: 0
-};
-const listeners = /* @__PURE__ */ new Set();
-let subscribed = false;
-function applyPatch(patch) {
-	snapshot = {
-		axes: patch.axes ?? snapshot.axes,
-		presets: patch.presets ?? snapshot.presets,
-		diagnostics: patch.diagnostics ?? snapshot.diagnostics,
-		css: patch.css ?? snapshot.css,
-		cssVarPrefix: patch.cssVarPrefix ?? snapshot.cssVarPrefix,
-		indicators: patch.indicators ?? snapshot.indicators,
-		listing: patch.listing ?? snapshot.listing,
-		tokenGraph: patch.tokenGraph ?? snapshot.tokenGraph,
-		defaultTuple: patch.defaultTuple ?? snapshot.defaultTuple,
-		version: snapshot.version + 1
-	};
-	for (const cb of listeners) cb();
-}
-/**
-* Host adapter API — same integration tier as {@link registerChannel}.
-*
-* Seed the initial token snapshot. The addon preview calls this once at
-* init with the build-time `virtual:swatchbook/tokens` data. Keeping the
-* virtual-module read on the addon side (the package that owns it) lets
-* blocks import cleanly without it. No-op fields fall back to the current
-* snapshot, so a partial source is safe.
-*/
-function registerTokenSource(source) {
-	applyPatch(source);
-}
-function attach(channel) {
-	if (subscribed) return;
-	subscribed = true;
-	channel.on(TOKENS_UPDATED_EVENT, (payload) => {
-		applyPatch(payload);
-	});
-}
-onChannel(attach);
-function subscribe$1(cb) {
-	listeners.add(cb);
-	return () => {
-		listeners.delete(cb);
-	};
-}
-function getSnapshot() {
-	return snapshot;
-}
-function getServerSnapshot() {
-	return snapshot;
-}
-/**
-* Host adapter API — same integration tier as {@link registerChannel}. Most
-* consumers read project data through `useSwatchbookData()` /
-* `SwatchbookProvider` instead; this is the internal subscription
-* `useProject()`'s fallback path uses to read the live channel-fed snapshot.
-*/
-function useTokenSnapshot() {
-	return useSyncExternalStore(subscribe$1, getSnapshot, getServerSnapshot);
-}
-//#endregion
-//#region src/internal/use-project.ts
-function computeVarianceByPath(graph) {
-	if (!graph) return {};
-	const out = {};
-	for (const path of listPaths(graph)) out[path] = getVariance(graph, path);
-	return out;
-}
-function ensureStylesheet(css) {
-	ensureStyleElement(SWATCHBOOK_STYLE_ELEMENT_ID, css);
-}
-function defaultTuple(axes) {
-	const out = {};
-	for (const axis of axes) out[axis.name] = axis.default;
-	return out;
-}
-function makeResolveAt(graph) {
-	if (!graph) return () => ({});
-	return (tuple) => resolveAllWithProvenanceAt(graph, tuple);
-}
-function snapshotResolveAt(snapshot) {
-	if (snapshot.resolveAt) return snapshot.resolveAt;
-	return makeResolveAt(snapshot.tokenGraph);
-}
-/**
-* Reads project data either from a mounted {@link SwatchbookProvider}
-* (preferred — the addon's preview decorator installs one around every
-* story) or, when no provider is present, from the virtual module plus
-* Storybook globals directly.
-*
-* The provider-less path is what makes the hook safe to call from MDX
-* doc blocks and autodocs renders where no story is active. It
-* self-mounts the injected snapshot's per-theme CSS and tracks the active
-* tuple via the injected channel's `globalsUpdated` event, since a
-* story-scoped globals hook only works while a story is rendering.
-*/
-function useProject() {
-	const snapshot = useOptionalSwatchbookData();
-	const axes = snapshot?.axes;
-	const activeAxes = snapshot?.activeAxes;
-	const activeTheme = snapshot?.activeTheme;
-	const diagnostics = snapshot?.diagnostics;
-	const cssVarPrefix = snapshot?.cssVarPrefix;
-	const indicators = snapshot?.indicators;
-	const listing = snapshot?.listing;
-	const tokenGraph = snapshot?.tokenGraph;
-	const resolveAt = useMemo(() => {
-		if (!snapshot) return null;
-		return snapshotResolveAt(snapshot);
-	}, [tokenGraph, activeTheme]);
-	const derivedVarianceByPath = useMemo(() => computeVarianceByPath(tokenGraph), [tokenGraph]);
-	const providerData = useMemo(() => {
-		if (!snapshot || !resolveAt || !axes || !activeAxes) return null;
-		return {
-			activeTheme: activeTheme ?? "",
-			activeAxes,
-			axes,
-			resolved: resolveAt(activeAxes),
-			diagnostics: diagnostics ?? [],
-			cssVarPrefix: cssVarPrefix ?? "",
-			indicators: indicators ?? {},
-			listing: listing ?? {},
-			varianceByPath: derivedVarianceByPath,
-			resolveAt
-		};
-	}, [
-		snapshot,
-		resolveAt,
-		axes,
-		activeTheme,
-		activeAxes,
-		diagnostics,
-		cssVarPrefix,
-		indicators,
-		listing,
-		derivedVarianceByPath,
-		tokenGraph
-	]);
-	const fallback = useVirtualModuleFallback(snapshot === null);
-	return providerData ?? fallback;
-}
-function useVirtualModuleFallback(enabled) {
-	const contextThemeName = useActiveTheme();
-	const contextAxes = useActiveAxes();
-	const channelGlobals = useChannelGlobals();
-	const tokens = useTokenSnapshot();
-	useEffect(() => {
-		if (!enabled) return;
-		ensureStylesheet(tokens.css);
-	}, [enabled, tokens.css]);
-	const activeAxes = useMemo(() => {
-		return Object.keys(contextAxes).length > 0 ? { ...contextAxes } : channelGlobals.axes ?? defaultTuple(tokens.axes);
-	}, [
-		contextAxes,
-		channelGlobals.axes,
-		tokens.axes
-	]);
-	const activeTheme = contextThemeName || tupleToName(tokens.axes, activeAxes);
-	const resolveAt = useMemo(() => makeResolveAt(tokens.tokenGraph), [tokens.tokenGraph]);
-	const fallbackVarianceByPath = useMemo(() => computeVarianceByPath(tokens.tokenGraph), [tokens.tokenGraph]);
-	return useMemo(() => ({
-		activeTheme,
-		activeAxes,
-		axes: tokens.axes,
-		resolved: resolveAt(activeAxes),
-		diagnostics: tokens.diagnostics,
-		cssVarPrefix: tokens.cssVarPrefix,
-		indicators: tokens.indicators,
-		listing: tokens.listing,
-		varianceByPath: fallbackVarianceByPath,
-		resolveAt
-	}), [
-		activeTheme,
-		activeAxes,
-		tokens.axes,
-		tokens.diagnostics,
-		tokens.cssVarPrefix,
-		tokens.indicators,
-		tokens.listing,
-		fallbackVarianceByPath,
-		resolveAt
-	]);
-}
 /**
-* Resolve a token's CSS var reference, preferring the authoritative name
-* emitted by `@terrazzo/plugin-css` (as recorded by
-* `@terrazzo/plugin-token-listing` in the snapshot's `listing` field).
-* Falls back to `cssVarRef` when the listing lacks an entry for this
-* path — covers non-resolver projects, hand-built snapshots, and any
-* listing-plugin miss.
+* Resolves the color-display format from the context/snapshot/source
+* chain: `ColorFormatContext` → provider snapshot's `defaultColorFormat`
+* → ambient source's `defaultColorFormat` → `'hex'`. Composing blocks
+* read `colorFormat ?? useColorFormat()` to give their own `colorFormat`
+* prop top precedence over this chain.
 */
-function resolveCssVar(path, project) {
-	const listed = project.listing[path]?.names?.["css"];
-	if (listed) return `var(${listed})`;
-	return cssVarRef(path, project.cssVarPrefix);
-}
-/**
-* Resolve a color value's display string + gamut flag, preferring the
-* listing's `previewValue` when the user's active color-format matches
-* plugin-css's output (hex). For any other format we fall back to
-* `formatColor` so the toolbar's inspection modes (rgb / hsl / oklch /
-* raw) keep working — the listing has only one canonical format.
-*
-* Pass `path === undefined` when resolving a sub-color inside a composite
-* (shadow / border / gradient stop): composites' `previewValue` covers
-* the whole token's rendering, not the individual channel, so there's no
-* listing entry to key against.
-*/
-function resolveColorValue(path, raw, colorFormat, project) {
-	if (path !== void 0 && colorFormat === "hex") {
-		const listed = project.listing[path]?.previewValue;
-		if (typeof listed === "string") return {
-			value: listed,
-			outOfGamut: false
-		};
-	}
-	return formatColor(raw, colorFormat);
-}
-//#endregion
-//#region src/border-preview/BorderSample.tsx
-/**
-* Pure derivation of a single border token's sample data from resolved
-* project data. Extracted so it is unit-testable without React or a store.
-*/
-function deriveBorderSample(path, project) {
-	return { cssVar: resolveCssVar(path, project) };
-}
-/** Pure presentation for a single border token's sample. Renders from plain props. */
-function BorderSampleView({ cssVar }) {
-	return /* @__PURE__ */ jsx("div", {
-		className: "sb-border-sample",
-		style: { border: cssVar },
-		"aria-hidden": true
-	});
-}
-function BorderSample({ path }) {
-	const { cssVar } = deriveBorderSample(path, useProject());
-	return /* @__PURE__ */ jsx(BorderSampleView, { cssVar });
-}
-//#endregion
-//#region src/internal/composite-sample-format.ts
-/**
-* Display a composite sub-field dimension (shadow offset / blur / spread,
-* border width, …) in the preview tables. Renders `—` for a missing
-* sub-field and falls back to JSON for shapes it doesn't recognize.
-*
-* Distinct from `format-token-value`'s internal `formatDimension`, which
-* formats a token's top-level value and has no `—` placeholder — these are
-* the per-layer sample formatters shared by `ShadowPreview` + `BorderPreview`.
-*/
-function formatDimension$1(raw) {
-	if (raw == null) return "—";
-	if (typeof raw === "number") return String(raw);
-	if (typeof raw === "string") return raw;
-	if (typeof raw === "object") {
-		const v = raw;
-		if (typeof v.value === "number" && typeof v.unit === "string") return `${v.value}${v.unit}`;
-	}
-	return JSON.stringify(raw);
-}
-/** Display a composite sub-field color via the active format; `—` when absent. */
-function formatSubColor(raw, format) {
-	if (raw == null) return "—";
-	return formatColor(raw, format).value;
+function useColorFormat() {
+	const contextValue = useContext(ColorFormatContext);
+	const snapshot = useContext(SwatchbookContext);
+	const source = useProjectSource();
+	return contextValue ?? snapshot?.defaultColorFormat ?? source.defaultColorFormat ?? "hex";
 }
 //#endregion
 //#region src/internal/data-attr.ts
@@ -604,6 +234,163 @@ function toDisplayable(v) {
 	return String(v ?? "");
 }
 //#endregion
+//#region src/internal/use-project.ts
+function computeVarianceByPath(graph) {
+	if (!graph) return {};
+	const out = {};
+	for (const path of listPaths(graph)) out[path] = getVariance(graph, path);
+	return out;
+}
+function ensureStylesheet(css) {
+	ensureStyleElement(SWATCHBOOK_STYLE_ELEMENT_ID, css);
+}
+function defaultTuple(axes) {
+	const out = {};
+	for (const axis of axes) out[axis.name] = axis.default;
+	return out;
+}
+function makeResolveAt(graph) {
+	if (!graph) return () => ({});
+	return (tuple) => resolveAllWithProvenanceAt(graph, tuple);
+}
+function snapshotResolveAt(snapshot) {
+	if (snapshot.resolveAt) return snapshot.resolveAt;
+	return makeResolveAt(snapshot.tokenGraph);
+}
+/**
+* Reads project data either from a mounted {@link SwatchbookProvider}
+* (preferred: the addon's preview decorator installs one around every
+* story) or, when no provider is present, from the ambient project source
+* a host pushes into via `registerProjectSource` (`#/host.ts`).
+*
+* The provider-less path is what makes the hook safe to call from MDX
+* doc blocks and autodocs renders where no story is active. It
+* self-mounts the source's per-theme CSS and tracks the active tuple via
+* the source's `activeAxes`, since a story-scoped globals hook only works
+* while a story is rendering.
+*/
+function useProject() {
+	const snapshot = useOptionalSwatchbookData();
+	const axes = snapshot?.axes;
+	const activeAxes = snapshot?.activeAxes;
+	const activeTheme = snapshot?.activeTheme;
+	const diagnostics = snapshot?.diagnostics;
+	const cssVarPrefix = snapshot?.cssVarPrefix;
+	const indicators = snapshot?.indicators;
+	const listing = snapshot?.listing;
+	const tokenGraph = snapshot?.tokenGraph;
+	const resolveAt = useMemo(() => {
+		if (!snapshot) return null;
+		return snapshotResolveAt(snapshot);
+	}, [tokenGraph, activeTheme]);
+	const derivedVarianceByPath = useMemo(() => computeVarianceByPath(tokenGraph), [tokenGraph]);
+	const providerData = useMemo(() => {
+		if (!snapshot || !resolveAt || !axes || !activeAxes) return null;
+		return {
+			activeTheme: activeTheme ?? "",
+			activeAxes,
+			axes,
+			resolved: resolveAt(activeAxes),
+			diagnostics: diagnostics ?? [],
+			cssVarPrefix: cssVarPrefix ?? "",
+			indicators: indicators ?? {},
+			listing: listing ?? {},
+			varianceByPath: derivedVarianceByPath,
+			resolveAt
+		};
+	}, [
+		snapshot,
+		resolveAt,
+		axes,
+		activeTheme,
+		activeAxes,
+		diagnostics,
+		cssVarPrefix,
+		indicators,
+		listing,
+		derivedVarianceByPath,
+		tokenGraph
+	]);
+	const fallback = useVirtualModuleFallback(snapshot === null);
+	return providerData ?? fallback;
+}
+function useVirtualModuleFallback(enabled) {
+	const contextThemeName = useActiveTheme();
+	const contextAxes = useActiveAxes();
+	const source = useProjectSource();
+	useEffect(() => {
+		if (!enabled) return;
+		ensureStylesheet(source.css);
+	}, [enabled, source.css]);
+	const activeAxes = useMemo(() => {
+		return Object.keys(contextAxes).length > 0 ? { ...contextAxes } : source.activeAxes ?? defaultTuple(source.axes);
+	}, [
+		contextAxes,
+		source.activeAxes,
+		source.axes
+	]);
+	const activeTheme = contextThemeName || tupleToName(source.axes, activeAxes);
+	const resolveAt = useMemo(() => makeResolveAt(source.tokenGraph), [source.tokenGraph]);
+	const fallbackVarianceByPath = useMemo(() => computeVarianceByPath(source.tokenGraph), [source.tokenGraph]);
+	return useMemo(() => ({
+		activeTheme,
+		activeAxes,
+		axes: source.axes,
+		resolved: resolveAt(activeAxes),
+		diagnostics: source.diagnostics,
+		cssVarPrefix: source.cssVarPrefix,
+		indicators: source.indicators,
+		listing: source.listing,
+		varianceByPath: fallbackVarianceByPath,
+		resolveAt
+	}), [
+		activeTheme,
+		activeAxes,
+		source.axes,
+		source.diagnostics,
+		source.cssVarPrefix,
+		source.indicators,
+		source.listing,
+		fallbackVarianceByPath,
+		resolveAt
+	]);
+}
+/**
+* Resolve a token's CSS var reference, preferring the authoritative name
+* emitted by `@terrazzo/plugin-css` (as recorded by
+* `@terrazzo/plugin-token-listing` in the snapshot's `listing` field).
+* Falls back to `cssVarRef` when the listing lacks an entry for this
+* path — covers non-resolver projects, hand-built snapshots, and any
+* listing-plugin miss.
+*/
+function resolveCssVar(path, project) {
+	const listed = project.listing[path]?.names?.["css"];
+	if (listed) return `var(${listed})`;
+	return cssVarRef(path, project.cssVarPrefix);
+}
+/**
+* Resolve a color value's display string + gamut flag, preferring the
+* listing's `previewValue` when the user's active color-format matches
+* plugin-css's output (hex). For any other format we fall back to
+* `formatColor` so the toolbar's inspection modes (rgb / hsl / oklch /
+* raw) keep working — the listing has only one canonical format.
+*
+* Pass `path === undefined` when resolving a sub-color inside a composite
+* (shadow / border / gradient stop): composites' `previewValue` covers
+* the whole token's rendering, not the individual channel, so there's no
+* listing entry to key against.
+*/
+function resolveColorValue(path, raw, colorFormat, project) {
+	if (path !== void 0 && colorFormat === "hex") {
+		const listed = project.listing[path]?.previewValue;
+		if (typeof listed === "string") return {
+			value: listed,
+			outOfGamut: false
+		};
+	}
+	return formatColor(raw, colorFormat);
+}
+//#endregion
 //#region src/BorderPreview.tsx
 /**
 * Pure derivation of the preview's display rows from resolved project data.
@@ -621,7 +408,8 @@ function deriveBorderRows(resolved, project, { filter, sortBy, sortDir, colorFor
 		return {
 			path,
 			cssVar: resolveCssVar(path, project),
-			width: formatDimension$1(value.width),
+			token,
+			width: formatDimension(value.width),
 			style: value.style != null ? String(value.style) : "—",
 			color: formatSubColor(value.color, colorFormat)
 		};
@@ -629,10 +417,11 @@ function deriveBorderRows(resolved, project, { filter, sortBy, sortDir, colorFor
 }
 /**
 * Pure presentation for the border preview. Renders from plain props;
-* composes the connected `BorderSample` as a child (that child reads the
-* project itself).
+* composes the connected `BorderSample` as a child, feeding it this row's
+* already-resolved `token`/`cssVar` per the presenter contract.
 */
-function BorderPreviewView({ rows, activeTheme, cssVarPrefix, activeAxes, filter, caption }) {
+function BorderPreviewView({ rows, activeTheme, cssVarPrefix, activeAxes, colorFormat, filter, caption }) {
+	const Sample = usePresenter("border");
 	const captionText = caption ?? `${rows.length} border${rows.length === 1 ? "" : "s"}${filter ? ` matching \`${filter}\`` : ""} · ${activeTheme}`;
 	if (rows.length === 0) return /* @__PURE__ */ jsx("div", {
 		...blockWrapperAttrs(cssVarPrefix, activeAxes),
@@ -661,7 +450,12 @@ function BorderPreviewView({ rows, activeTheme, cssVarPrefix, activeAxes, filter
 				}),
 				/* @__PURE__ */ jsx("div", {
 					className: "sb-border-preview__sample-cell",
-					children: /* @__PURE__ */ jsx(BorderSample, { path: row.path })
+					children: Sample && /* @__PURE__ */ jsx(Sample, {
+						path: row.path,
+						token: row.token,
+						cssVar: row.cssVar,
+						colorFormat
+					})
 				}),
 				/* @__PURE__ */ jsxs("div", {
 					className: "sb-border-preview__breakdown",
@@ -687,27 +481,29 @@ function BorderPreviewView({ rows, activeTheme, cssVarPrefix, activeAxes, filter
 		}, row.path))]
 	});
 }
-function BorderPreview({ filter, caption, sortBy = "path", sortDir = "asc" }) {
+function BorderPreview({ filter, caption, sortBy = "path", sortDir = "asc", colorFormat }) {
 	const project = useProject();
 	const { resolved, activeTheme, activeAxes, cssVarPrefix } = project;
-	const colorFormat = useColorFormat();
+	const contextColorFormat = useColorFormat();
+	const format = colorFormat ?? contextColorFormat;
 	return /* @__PURE__ */ jsx(BorderPreviewView, {
 		rows: useMemo(() => deriveBorderRows(resolved, project, {
 			filter,
 			sortBy,
 			sortDir,
-			colorFormat
+			colorFormat: format
 		}), [
 			resolved,
 			project,
 			filter,
 			sortBy,
 			sortDir,
-			colorFormat
+			format
 		]),
 		activeTheme,
 		cssVarPrefix,
 		activeAxes,
+		colorFormat: format,
 		filter,
 		caption
 	});
@@ -728,7 +524,7 @@ function fixedPrefixLength(filter) {
 * Pure derivation of the palette's grouped swatch rows from resolved project
 * data. Extracted so it is unit-testable without React or a store.
 */
-function deriveColorPaletteGroups(resolved, listing, cssVarPrefix, { filter, groupBy, sortBy, sortDir, colorFormat }) {
+function deriveColorPaletteGroups(resolved, listing, cssVarPrefix, { filter, groupBy, sortBy, sortDir }) {
 	const projectFields = {
 		listing,
 		cssVarPrefix
@@ -748,13 +544,11 @@ function deriveColorPaletteGroups(resolved, listing, cssVarPrefix, { filter, gro
 		const groupKey = segments.slice(0, effectiveGroupBy).join(".");
 		const leaf = segments.slice(effectiveGroupBy).join(".") || segments.at(-1) || path;
 		const list = bucket.get(groupKey) ?? [];
-		const formatted = resolveColorValue(path, token.$value, colorFormat, projectFields);
 		list.push({
 			path,
-			leaf,
 			cssVar: resolveCssVar(path, projectFields),
-			value: formatted.value,
-			outOfGamut: formatted.outOfGamut
+			leaf,
+			token
 		});
 		bucket.set(groupKey, list);
 	}
@@ -763,8 +557,13 @@ function deriveColorPaletteGroups(resolved, listing, cssVarPrefix, { filter, gro
 		swatches
 	}));
 }
-/** Pure presentation for the color palette. Renders from plain props. */
-function ColorPaletteView({ groups, activeTheme, cssVarPrefix, activeAxes, filter, caption }) {
+/**
+* Pure presentation for the color palette. Renders from plain props;
+* composes the registry's `color` presenter per swatch, feeding it this
+* row's already-resolved `token`/`cssVar` per the presenter contract.
+*/
+function ColorPaletteView({ groups, activeTheme, cssVarPrefix, activeAxes, colorFormat, filter, caption }) {
+	const Swatch = usePresenter("color");
 	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", {
@@ -786,42 +585,27 @@ function ColorPaletteView({ groups, activeTheme, cssVarPrefix, activeAxes, filte
 				children: group
 			}), /* @__PURE__ */ jsx("div", {
 				className: "sb-color-palette__grid",
-				children: swatches.map((swatch) => /* @__PURE__ */ jsxs("div", {
-					className: "sb-color-palette__card",
-					children: [/* @__PURE__ */ jsx("div", {
-						className: "sb-color-palette__swatch",
-						style: { background: swatch.cssVar },
-						"aria-hidden": true
-					}), /* @__PURE__ */ jsxs("div", {
-						className: "sb-color-palette__meta",
-						children: [/* @__PURE__ */ jsx("span", {
-							className: "sb-color-palette__leaf",
-							children: swatch.leaf
-						}), /* @__PURE__ */ jsxs("span", {
-							className: "sb-color-palette__value",
-							children: [swatch.value, swatch.outOfGamut && /* @__PURE__ */ jsxs("span", {
-								title: "Out of sRGB gamut for this format",
-								"aria-label": "out of gamut",
-								className: "sb-color-palette__gamut-warn",
-								children: [" ", "⚠"]
-							})]
-						})]
-					})]
+				children: swatches.map((swatch) => Swatch && /* @__PURE__ */ jsx(Swatch, {
+					path: swatch.path,
+					token: swatch.token,
+					cssVar: swatch.cssVar,
+					colorFormat,
+					options: { label: swatch.leaf }
 				}, swatch.path))
 			})]
 		}, group))]
 	});
 }
-function ColorPalette({ filter, groupBy, caption, sortBy = "path", sortDir = "asc" }) {
+function ColorPalette({ filter, groupBy, caption, sortBy = "path", sortDir = "asc", colorFormat }) {
 	const { resolved, activeTheme, activeAxes, cssVarPrefix, listing } = useProject();
-	const colorFormat = useColorFormat();
+	const contextColorFormat = useColorFormat();
+	const format = colorFormat ?? contextColorFormat;
 	return /* @__PURE__ */ jsx(ColorPaletteView, {
 		groups: useMemo(() => deriveColorPaletteGroups(resolved, listing, cssVarPrefix, {
 			filter,
 			groupBy,
 			sortBy,
-			sortDir,
-			colorFormat
+			sortDir
 		}), [
 			resolved,
 			listing,
@@ -829,12 +613,12 @@ function ColorPalette({ filter, groupBy, caption, sortBy = "path", sortDir = "as
 			filter,
 			groupBy,
 			sortBy,
-			sortDir,
-			colorFormat
+			sortDir
 		]),
 		activeTheme,
 		cssVarPrefix,
 		activeAxes,
+		colorFormat: format,
 		filter,
 		caption
 	});
@@ -1157,11 +941,11 @@ function CopyButton$1({ value, label, variant = "icon", className }) {
 /**
 * Block UI state that survives a docs-mode remount.
 *
-* In MDX docs mode Storybook re-renders the docs container on every
-* `updateGlobals` (axis flip), which unmounts and remounts the embedded
-* blocks — destroying any plain `useState` (expand/collapse, selection,
-* search). This is the same problem `channel-globals` solves for the
-* globals: lift the value out of React into module state so it persists
+* In MDX docs mode Storybook re-renders the docs container on every axis
+* flip, which unmounts and remounts the embedded blocks: destroying any
+* plain `useState` (expand/collapse, selection, search). This is the same
+* problem the ambient project source (`#/host.ts`) solves for token/axis
+* data: lift the value out of React into module state so it persists
 * across the remount, and re-seed component state from it on mount.
 *
 * `usePersistedState` is a drop-in `useState` whose value is mirrored to a
@@ -1402,9 +1186,10 @@ function ColorTableView({ groups, activeTheme, cssVarPrefix, activeAxes, colorFo
 * selector; clicking a row expands it in place to show the description,
 * alias chain, and (for grouped rows) every variant's hex/HSL/OKLCH values.
 */
-function ColorTable({ filter, caption, sortBy = "path", sortDir = "asc", searchable = true, onSelect, variants, id, indicators }) {
+function ColorTable({ filter, caption, sortBy = "path", sortDir = "asc", searchable = true, onSelect, variants, id, indicators, colorFormat }) {
 	const { resolved, activeTheme, activeAxes, cssVarPrefix, listing, varianceByPath } = useProject();
-	const colorFormat = useColorFormat();
+	const contextColorFormat = useColorFormat();
+	const format = colorFormat ?? contextColorFormat;
 	const enabledIndicators = useMemo(() => ({
 		...resolveIndicators(indicators),
 		gamut: false
@@ -1420,7 +1205,7 @@ function ColorTable({ filter, caption, sortBy = "path", sortDir = "asc", searcha
 			variants,
 			sortBy,
 			sortDir,
-			colorFormat
+			colorFormat: format
 		}), [
 			resolved,
 			listing,
@@ -1430,12 +1215,12 @@ function ColorTable({ filter, caption, sortBy = "path", sortDir = "asc", searcha
 			variants,
 			sortBy,
 			sortDir,
-			colorFormat
+			format
 		]),
 		activeTheme,
 		cssVarPrefix,
 		activeAxes,
-		colorFormat,
+		colorFormat: format,
 		enabledIndicators,
 		blockKey,
 		filter,
@@ -1796,244 +1581,27 @@ function DiagnosticsView({ caption, diagnostics, cssVarPrefix, activeAxes }) {
 					})] })]
 				}, diagnosticKey(d, i)))
 			})]
-		})
-	});
-}
-/**
-* Render the project's load diagnostics — parser errors, resolver warnings,
-* disabled-axes validation issues, etc. — as a collapsible list. Auto-opens
-* when the project carries errors or warnings; stays collapsed for clean
-* loads and info-only loads.
-*
-* Replaces the diagnostics section from the addon's (now-retired) Design
-* Tokens panel. Consumers compose it alongside TokenNavigator / TokenTable
-* on their own MDX pages.
-*/
-function Diagnostics({ caption } = {}) {
-	const { activeAxes, cssVarPrefix, diagnostics } = useProject();
-	return /* @__PURE__ */ jsx(DiagnosticsView, {
-		caption,
-		diagnostics,
-		cssVarPrefix,
-		activeAxes
-	});
-}
-//#endregion
-//#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. `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, 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": 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/DimensionSample.tsx
-/**
-* Pure derivation of a single dimension token's sample geometry from
-* resolved project data. Extracted so it is unit-testable without React or
-* a store.
-*/
-function deriveDimensionSample(path, project, rootFontSizePx) {
-	const cssVar = resolveCssVar(path, project);
-	const token = project.resolved[path];
-	const pxValue = toPixels(token?.$value, rootFontSizePx);
-	const capped = Number.isFinite(pxValue) && pxValue > 480;
-	return {
-		cssVar,
-		pxValue,
-		capped,
-		cappedValue: capped ? `480px` : cssVar
-	};
-}
-function withCap(visual) {
-	return /* @__PURE__ */ jsxs("span", {
-		className: "sb-dimension-sample sb-dimension-sample--capped",
-		title: `capped at 480px`,
-		children: [visual, /* @__PURE__ */ jsx("span", {
-			className: "sb-dimension-sample__cap",
-			"aria-hidden": true,
-			children: "…"
-		})]
-	});
-}
-/** Pure presentation for a single dimension token's bar/sample. Renders from plain props. */
-function DimensionSampleView({ cssVar, capped, cappedValue, visual }) {
-	switch (visual) {
-		case "radius": return /* @__PURE__ */ jsx("div", {
-			className: "sb-dimension-sample__radius-sample",
-			style: { borderRadius: cssVar },
-			"aria-hidden": true
-		});
-		case "size": {
-			const sample = /* @__PURE__ */ jsx("div", {
-				className: "sb-dimension-sample__size-sample",
-				style: {
-					width: cappedValue,
-					height: cappedValue
-				},
-				"aria-hidden": true
-			});
-			return capped ? withCap(sample) : sample;
-		}
-		default: {
-			const bar = /* @__PURE__ */ jsx("div", {
-				className: "sb-dimension-sample__bar",
-				style: { width: cappedValue },
-				"aria-hidden": true
-			});
-			return capped ? withCap(bar) : bar;
-		}
-	}
-}
-/** Connected block: resolves `path` against the active project and renders its dimension sample. */
-function DimensionSample({ path, visual = "length" }) {
-	const { cssVar, capped, cappedValue } = deriveDimensionSample(path, useProject(), useRootFontSize());
-	return /* @__PURE__ */ jsx(DimensionSampleView, {
-		cssVar,
-		capped,
-		cappedValue,
-		visual
+		})
 	});
 }
-//#endregion
-//#region src/internal/format-token-value.ts
 /**
-* Single-line display string for any DTCG token `$value`. Prefers
-* plugin-css's `previewValue` from the Token Listing; for color
-* tokens only when the toolbar format is hex (other formats route
-* through local colorjs.io).
+* Render the project's load diagnostics — parser errors, resolver warnings,
+* disabled-axes validation issues, etc. — as a collapsible list. Auto-opens
+* when the project carries errors or warnings; stays collapsed for clean
+* loads and info-only loads.
+*
+* Replaces the diagnostics section from the addon's (now-retired) Design
+* Tokens panel. Consumers compose it alongside TokenNavigator / TokenTable
+* on their own MDX pages.
 */
-function formatTokenValue(value, $type, colorFormat, listingEntry) {
-	if (value == null) return "";
-	if (typeof value === "string" || typeof value === "number" || typeof value === "boolean") return String(value);
-	const preview = listingEntry?.previewValue;
-	if (preview !== void 0) {
-		const previewStr = typeof preview === "string" ? cleanFloatNoise(preview) : String(preview);
-		if ($type !== "color") return previewStr;
-		if (colorFormat === "hex") return previewStr;
-	}
-	switch ($type) {
-		case "color": return formatColor(value, colorFormat).value;
-		case "dimension":
-		case "duration": return formatDimension(value);
-		case "fontFamily": return formatFontFamily$1(value);
-		case "fontWeight":
-		case "lineHeight":
-		case "letterSpacing":
-		case "opacity":
-		case "number": return formatPrimitive$1(value);
-		case "cubicBezier": return formatCubicBezier(value);
-		case "strokeStyle": return formatStrokeStyle(value);
-		case "shadow": return formatShadow(value, colorFormat);
-		case "border": return formatBorder(value, colorFormat);
-		default: return formatUnknown(value);
-	}
-}
-function formatDimension(v) {
-	if (typeof v === "string" || typeof v === "number") return String(v);
-	if (v && typeof v === "object") {
-		const d = v;
-		if (typeof d.value === "number" && typeof d.unit === "string") return `${d.value}${d.unit}`;
-	}
-	return formatUnknown(v);
-}
-function cleanFloatNoise(s) {
-	return s.replace(/-?\d+\.\d{8,}/g, (m) => `${+Number(m).toFixed(3)}`);
-}
-function formatFontFamily$1(v) {
-	if (typeof v === "string") return v;
-	if (Array.isArray(v)) return v.map(String).join(", ");
-	return formatUnknown(v);
-}
-function formatPrimitive$1(v) {
-	if (typeof v === "string" || typeof v === "number" || typeof v === "boolean") return String(v);
-	return formatUnknown(v);
-}
-function formatCubicBezier(v) {
-	if (Array.isArray(v) && v.length === 4) return `cubic-bezier(${v.map((n) => typeof n === "number" ? n : 0).join(", ")})`;
-	return formatUnknown(v);
-}
-function formatStrokeStyle(v) {
-	if (typeof v === "string") return v;
-	if (v && typeof v === "object") {
-		const s = v;
-		const parts = ["dashed"];
-		if (Array.isArray(s.dashArray)) parts.push(s.dashArray.map((n) => formatDimension(n)).join(" "));
-		if (typeof s.lineCap === "string") parts.push(s.lineCap);
-		return parts.join(" · ");
-	}
-	return formatUnknown(v);
-}
-function formatShadow(v, colorFormat) {
-	return (Array.isArray(v) ? v : [v]).map((layer) => {
-		if (!layer || typeof layer !== "object") return formatUnknown(layer);
-		const s = layer;
-		const pieces = [
-			formatDimension(s.offsetX),
-			formatDimension(s.offsetY),
-			formatDimension(s.blur),
-			formatDimension(s.spread),
-			formatColor(s.color, colorFormat).value
-		].filter((p) => p !== "");
-		if (s.inset) pieces.push("inset");
-		return pieces.join(" ");
-	}).join(", ");
-}
-function formatBorder(v, colorFormat) {
-	if (!v || typeof v !== "object") return formatUnknown(v);
-	const b = v;
-	return [
-		formatDimension(b.width),
-		formatPrimitive$1(b.style),
-		formatColor(b.color, colorFormat).value
-	].filter((p) => p !== "").join(" ");
-}
-function formatUnknown(v) {
-	if (v == null) return "";
-	if (typeof v === "string" || typeof v === "number" || typeof v === "boolean") return String(v);
-	try {
-		return JSON.stringify(v).slice(0, 120);
-	} catch {
-		return String(v);
-	}
+function Diagnostics({ caption } = {}) {
+	const { activeAxes, cssVarPrefix, diagnostics } = useProject();
+	return /* @__PURE__ */ jsx(DiagnosticsView, {
+		caption,
+		diagnostics,
+		cssVarPrefix,
+		activeAxes
+	});
 }
 //#endregion
 //#region src/DimensionScale.tsx
@@ -2052,15 +1620,17 @@ function deriveDimensionRows(resolved, project, { filter, sortBy, sortDir, rootF
 	}).map(([path, token]) => ({
 		path,
 		cssVar: resolveCssVar(path, project),
-		displayValue: formatTokenValue(token.$value, token.$type, "raw", project.listing[path])
+		token,
+		displayValue: formatTokenValue$2(token.$value, token.$type, "raw", project.listing[path])
 	}));
 }
 /**
 * Pure presentation for the dimension scale. Renders from plain props;
-* composes the connected `DimensionSample` as a child (that child reads the
-* project itself).
+* composes the connected `DimensionSample` as a child, feeding it this row's
+* already-resolved `token`/`cssVar` per the presenter contract.
 */
-function DimensionScaleView({ rows, activeTheme, cssVarPrefix, activeAxes, visual, filter, caption }) {
+function DimensionScaleView({ rows, activeTheme, cssVarPrefix, activeAxes, visual, colorFormat, filter, caption }) {
+	const Sample = usePresenter("dimension");
 	const captionText = caption ?? `${rows.length} dimension${rows.length === 1 ? "" : "s"}${filter ? ` matching \`${filter}\`` : ""} · ${activeTheme}`;
 	if (rows.length === 0) return /* @__PURE__ */ jsx("div", {
 		...blockWrapperAttrs(cssVarPrefix, activeAxes),
@@ -2089,9 +1659,12 @@ function DimensionScaleView({ rows, activeTheme, cssVarPrefix, activeAxes, visua
 				}),
 				/* @__PURE__ */ jsx("div", {
 					className: "sb-dimension-scale__visual-cell",
-					children: /* @__PURE__ */ jsx(DimensionSample, {
+					children: Sample && /* @__PURE__ */ jsx(Sample, {
 						path: row.path,
-						visual
+						token: row.token,
+						cssVar: row.cssVar,
+						colorFormat,
+						options: { visual }
 					})
 				}),
 				/* @__PURE__ */ jsx("span", {
@@ -2106,6 +1679,7 @@ function DimensionScale({ filter, visual = "length", caption, sortBy = "value",
 	const project = useProject();
 	const { resolved, activeTheme, activeAxes, cssVarPrefix } = project;
 	const rootFontSize = useRootFontSize();
+	const colorFormat = useColorFormat();
 	return /* @__PURE__ */ jsx(DimensionScaleView, {
 		rows: useMemo(() => deriveDimensionRows(resolved, project, {
 			filter,
@@ -2124,17 +1698,13 @@ function DimensionScale({ filter, visual = "length", caption, sortBy = "value",
 		cssVarPrefix,
 		activeAxes,
 		visual,
+		colorFormat,
 		filter,
 		caption
 	});
 }
 //#endregion
 //#region src/FontFamilyPreview.tsx
-function stackString(raw) {
-	if (typeof raw === "string") return raw;
-	if (Array.isArray(raw)) return raw.map(String).join(", ");
-	return "";
-}
 /**
 * Pure derivation of the preview's display rows from resolved project data.
 * Extracted so it is unit-testable without React or a store.
@@ -2149,11 +1719,16 @@ function deriveFontFamilyRows(resolved, project, { filter, sortBy, sortDir }) {
 	}).map(([path, token]) => ({
 		path,
 		cssVar: resolveCssVar(path, project),
-		stack: stackString(token.$value)
+		token
 	}));
 }
-/** Pure presentation for the font-family preview. Renders from plain props. */
-function FontFamilyPreviewView({ rows, activeTheme, cssVarPrefix, activeAxes, sample, filter, caption }) {
+/**
+* Pure presentation for the font-family preview. Renders from plain props;
+* composes the connected `FontFamilySpecimen` as a child, feeding it this
+* row's already-resolved `token`/`cssVar` per the presenter contract.
+*/
+function FontFamilyPreviewView({ rows, activeTheme, cssVarPrefix, activeAxes, sample, colorFormat, filter, caption }) {
+	const Specimen = usePresenter("fontFamily");
 	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", {
 		...blockWrapperAttrs(cssVarPrefix, activeAxes),
@@ -2167,35 +1742,19 @@ function FontFamilyPreviewView({ rows, activeTheme, cssVarPrefix, activeAxes, sa
 		children: [/* @__PURE__ */ jsx("div", {
 			className: "sb-block__caption",
 			children: captionText
-		}), rows.map((row) => /* @__PURE__ */ jsxs("div", {
-			className: "sb-font-family-sample__row",
-			children: [
-				/* @__PURE__ */ jsxs("div", {
-					className: "sb-font-family-sample__meta",
-					children: [/* @__PURE__ */ jsx("span", {
-						className: "sb-font-family-sample__path",
-						children: row.path
-					}), /* @__PURE__ */ jsx("span", {
-						className: "sb-font-family-sample__stack",
-						children: row.stack
-					})]
-				}),
-				/* @__PURE__ */ jsx("div", {
-					className: "sb-font-family-sample__sample",
-					style: { fontFamily: row.cssVar },
-					children: sample
-				}),
-				/* @__PURE__ */ jsx("span", {
-					className: "sb-font-family-sample__css-var",
-					children: row.cssVar
-				})
-			]
+		}), rows.map((row) => Specimen && /* @__PURE__ */ jsx(Specimen, {
+			path: row.path,
+			token: row.token,
+			cssVar: row.cssVar,
+			colorFormat,
+			options: { sample }
 		}, row.path))]
 	});
 }
 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 colorFormat = useColorFormat();
 	return /* @__PURE__ */ jsx(FontFamilyPreviewView, {
 		rows: useMemo(() => deriveFontFamilyRows(resolved, project, {
 			filter,
@@ -2212,35 +1771,13 @@ function FontFamilyPreview({ filter, sample = "The quick brown fox jumps over th
 		cssVarPrefix,
 		activeAxes,
 		sample,
+		colorFormat,
 		filter,
 		caption
 	});
 }
 //#endregion
-//#region src/internal/css-var-style.ts
-/**
-* Coerce a CSS `var(--…)` reference into the numeric slot of a React
-* inline-style property.
-*
-* React's `CSSProperties` types unitless properties (`fontWeight`,
-* `lineHeight`, `zIndex`, …) as `number`. The DOM accepts a string at
-* runtime — the rendered stylesheet just receives whatever React passes —
-* so a `var(--font-weight)` reference works functionally. TypeScript still
-* complains. Centralising the type assertion in one named helper keeps
-* the gap visible (and greppable) instead of scattering casts across
-* block components that want CSS-var-driven typography or layout values.
-*/
-const cssVarAsNumber = (varRef) => varRef;
-//#endregion
 //#region src/FontWeightScale.tsx
-function toWeight(raw) {
-	if (typeof raw === "number") return raw;
-	if (typeof raw === "string") {
-		const n = Number.parseInt(raw, 10);
-		return Number.isFinite(n) ? n : NaN;
-	}
-	return NaN;
-}
 /**
 * Pure derivation of the scale's display rows from resolved project data.
 * Extracted so it is unit-testable without React or a store.
@@ -2255,12 +1792,16 @@ function deriveFontWeightRows(resolved, project, { filter, sortBy, sortDir }) {
 	}).map(([path, token]) => ({
 		path,
 		cssVar: resolveCssVar(path, project),
-		display: token.$value == null ? "" : String(token.$value),
-		weight: toWeight(token.$value)
+		token
 	}));
 }
-/** Pure presentation for the font-weight scale. Renders from plain props. */
-function FontWeightScaleView({ rows, activeTheme, cssVarPrefix, activeAxes, sample, filter, caption }) {
+/**
+* Pure presentation for the font-weight scale. Renders from plain props;
+* composes the connected `FontWeightSpecimen` as a child, feeding it this
+* row's already-resolved `token`/`cssVar` per the presenter contract.
+*/
+function FontWeightScaleView({ rows, activeTheme, cssVarPrefix, activeAxes, sample, colorFormat, filter, caption }) {
+	const Specimen = usePresenter("fontWeight");
 	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", {
 		...blockWrapperAttrs(cssVarPrefix, activeAxes),
@@ -2274,35 +1815,19 @@ function FontWeightScaleView({ rows, activeTheme, cssVarPrefix, activeAxes, samp
 		children: [/* @__PURE__ */ jsx("div", {
 			className: "sb-block__caption",
 			children: captionText
-		}), rows.map((row) => /* @__PURE__ */ jsxs("div", {
-			className: "sb-font-weight-scale__row",
-			children: [
-				/* @__PURE__ */ jsxs("div", {
-					className: "sb-font-weight-scale__meta",
-					children: [/* @__PURE__ */ jsx("span", {
-						className: "sb-font-weight-scale__path",
-						children: row.path
-					}), /* @__PURE__ */ jsx("span", {
-						className: "sb-font-weight-scale__value",
-						children: row.display
-					})]
-				}),
-				/* @__PURE__ */ jsx("div", {
-					className: "sb-font-weight-scale__sample",
-					style: { fontWeight: cssVarAsNumber(row.cssVar) },
-					children: sample
-				}),
-				/* @__PURE__ */ jsx("span", {
-					className: "sb-font-weight-scale__css-var",
-					children: row.cssVar
-				})
-			]
+		}), rows.map((row) => Specimen && /* @__PURE__ */ jsx(Specimen, {
+			path: row.path,
+			token: row.token,
+			cssVar: row.cssVar,
+			colorFormat,
+			options: { sample }
 		}, row.path))]
 	});
 }
 function FontWeightScale({ filter, sample = "Aa", caption, sortBy = "value", sortDir = "asc" }) {
 	const project = useProject();
 	const { resolved, activeTheme, activeAxes, cssVarPrefix } = project;
+	const colorFormat = useColorFormat();
 	return /* @__PURE__ */ jsx(FontWeightScaleView, {
 		rows: useMemo(() => deriveFontWeightRows(resolved, project, {
 			filter,
@@ -2319,6 +1844,7 @@ function FontWeightScale({ filter, sample = "Aa", caption, sortBy = "value", sor
 		cssVarPrefix,
 		activeAxes,
 		sample,
+		colorFormat,
 		filter,
 		caption
 	});
@@ -2357,6 +1883,7 @@ function deriveGradientRows(resolved, listing, cssVarPrefix, { filter, sortBy, s
 		return {
 			path,
 			cssVar: resolveCssVar(path, projectFields),
+			token,
 			stops: stops.map((stop, i) => ({
 				key: stopKey(path, stop, i),
 				cssColor: stopCssColor(stop),
@@ -2366,8 +1893,13 @@ function deriveGradientRows(resolved, listing, cssVarPrefix, { filter, sortBy, s
 		};
 	});
 }
-/** Pure presentation for the gradient palette. Renders from plain props. */
-function GradientPaletteView({ rows, activeTheme, cssVarPrefix, activeAxes, filter, caption }) {
+/**
+* Pure presentation for the gradient palette. Renders from plain props;
+* composes the registry's `gradient` presenter per row, feeding it this
+* row's already-resolved `token`/`cssVar` per the presenter contract.
+*/
+function GradientPaletteView({ rows, activeTheme, cssVarPrefix, activeAxes, colorFormat, filter, caption }) {
+	const Swatch = usePresenter("gradient");
 	const captionText = caption ?? `${rows.length} gradient${rows.length === 1 ? "" : "s"}${filter ? ` matching \`${filter}\`` : ""} · ${activeTheme}`;
 	if (rows.length === 0) return /* @__PURE__ */ jsx("div", {
 		...blockWrapperAttrs(cssVarPrefix, activeAxes),
@@ -2394,10 +1926,11 @@ function GradientPaletteView({ rows, activeTheme, cssVarPrefix, activeAxes, filt
 						children: row.cssVar
 					})]
 				}),
-				/* @__PURE__ */ jsx("div", {
-					className: "sb-gradient-palette__sample",
-					style: { background: `linear-gradient(to right, ${row.cssVar})` },
-					"aria-hidden": true
+				Swatch && /* @__PURE__ */ jsx(Swatch, {
+					path: row.path,
+					token: row.token,
+					cssVar: row.cssVar,
+					colorFormat
 				}),
 				/* @__PURE__ */ jsx("div", {
 					className: "sb-gradient-palette__stops",
@@ -2425,15 +1958,16 @@ function GradientPaletteView({ rows, activeTheme, cssVarPrefix, activeAxes, filt
 		}, row.path))]
 	});
 }
-function GradientPalette({ filter, caption, sortBy = "path", sortDir = "asc" }) {
+function GradientPalette({ filter, caption, sortBy = "path", sortDir = "asc", colorFormat }) {
 	const { resolved, activeTheme, activeAxes, cssVarPrefix, listing } = useProject();
-	const colorFormat = useColorFormat();
+	const contextColorFormat = useColorFormat();
+	const format = colorFormat ?? contextColorFormat;
 	return /* @__PURE__ */ jsx(GradientPaletteView, {
 		rows: useMemo(() => deriveGradientRows(resolved, listing, cssVarPrefix, {
 			filter,
 			sortBy,
 			sortDir,
-			colorFormat
+			colorFormat: format
 		}), [
 			resolved,
 			listing,
@@ -2441,172 +1975,17 @@ function GradientPalette({ filter, caption, sortBy = "path", sortDir = "asc" })
 			filter,
 			sortBy,
 			sortDir,
-			colorFormat
+			format
 		]),
 		activeTheme,
 		cssVarPrefix,
 		activeAxes,
+		colorFormat: format,
 		filter,
 		caption
 	});
 }
 //#endregion
-//#region src/internal/prefers-reduced-motion.ts
-function isChromatic() {
-	if (typeof navigator === "undefined") return false;
-	return navigator.userAgent.includes("Chromatic");
-}
-/**
-* Reactive `prefers-reduced-motion: reduce` detector. Returns the current
-* match and updates if the user toggles the OS-level preference. Also
-* returns `true` under Chromatic to keep animated samples deterministic
-* during visual regression capture.
-*/
-function usePrefersReducedMotion() {
-	const [reduced, setReduced] = useState(false);
-	useEffect(() => {
-		if (typeof window === "undefined") return;
-		if (isChromatic()) {
-			setReduced(true);
-			return;
-		}
-		const query = window.matchMedia("(prefers-reduced-motion: reduce)");
-		setReduced(query.matches);
-		const onChange = (e) => setReduced(e.matches);
-		query.addEventListener("change", onChange);
-		return () => query.removeEventListener("change", onChange);
-	}, []);
-	return reduced;
-}
-//#endregion
-//#region src/motion-preview/MotionSample.tsx
-const DEFAULT_DURATION_MS = 300;
-const DEFAULT_EASING = "cubic-bezier(0.2, 0, 0, 1)";
-function extractDurationMs(raw) {
-	if (raw == null) return NaN;
-	if (typeof raw === "object") {
-		const v = raw;
-		if (typeof v.value === "number" && typeof v.unit === "string") {
-			if (v.unit === "ms") return v.value;
-			if (v.unit === "s") return v.value * 1e3;
-		}
-	}
-	return NaN;
-}
-function extractCubicBezier(raw) {
-	if (Array.isArray(raw) && raw.length === 4 && raw.every((n) => typeof n === "number")) return `cubic-bezier(${raw.map((n) => Number(n).toFixed(3)).join(", ")})`;
-	return null;
-}
-function asDuration(raw, themeTokens, fallback) {
-	const direct = extractDurationMs(raw);
-	if (Number.isFinite(direct)) return direct;
-	if (typeof raw === "string") {
-		const match = raw.match(/^\{([^}]+)\}$/);
-		if (match && match[1]) {
-			const referenced = themeTokens[match[1]];
-			const resolved = extractDurationMs(referenced?.$value);
-			if (Number.isFinite(resolved)) return resolved;
-		}
-	}
-	return fallback;
-}
-function asEasing(raw, themeTokens, fallback) {
-	const direct = extractCubicBezier(raw);
-	if (direct) return direct;
-	if (typeof raw === "string") {
-		const match = raw.match(/^\{([^}]+)\}$/);
-		if (match && match[1]) {
-			const referenced = themeTokens[match[1]];
-			const resolved = extractCubicBezier(referenced?.$value);
-			if (resolved) return resolved;
-		}
-	}
-	return fallback;
-}
-function resolveMotionSpec(token, themeTokens) {
-	if (!token) return null;
-	const type = token.$type;
-	if (type === "transition") {
-		const v = token.$value ?? {};
-		return {
-			durationMs: asDuration(v.duration, themeTokens, DEFAULT_DURATION_MS),
-			easing: asEasing(v.timingFunction, themeTokens, DEFAULT_EASING)
-		};
-	}
-	if (type === "duration") {
-		const durationMs = extractDurationMs(token.$value);
-		if (!Number.isFinite(durationMs)) return null;
-		return {
-			durationMs,
-			easing: DEFAULT_EASING
-		};
-	}
-	if (type === "cubicBezier") {
-		const easing = extractCubicBezier(token.$value);
-		if (!easing) return null;
-		return {
-			durationMs: DEFAULT_DURATION_MS,
-			easing
-		};
-	}
-	return null;
-}
-/**
-* Pure derivation of a single motion token's animation spec from resolved
-* project data. Extracted so it is unit-testable without React or a store.
-*/
-function deriveMotionSample(path, project) {
-	return { spec: resolveMotionSpec(project.resolved[path], project.resolved) };
-}
-/** Pure presentation + animation for a single motion token's sample. Renders from plain props. */
-function MotionSampleView({ spec, speed, runKey }) {
-	const reducedMotion = usePrefersReducedMotion();
-	const durationMs = spec?.durationMs ?? DEFAULT_DURATION_MS;
-	const easing = spec?.easing ?? DEFAULT_EASING;
-	const scaledDuration = Math.max(1, durationMs / speed);
-	const [phase, setPhase] = useState(0);
-	useEffect(() => {
-		if (reducedMotion) return;
-		setPhase(0);
-		const id = requestAnimationFrame(() => setPhase(1));
-		const loop = window.setInterval(() => {
-			setPhase((p) => p === 0 ? 1 : 0);
-		}, scaledDuration * 2);
-		return () => {
-			cancelAnimationFrame(id);
-			window.clearInterval(loop);
-		};
-	}, [
-		scaledDuration,
-		runKey,
-		reducedMotion
-	]);
-	if (reducedMotion) return /* @__PURE__ */ jsxs("div", {
-		className: "sb-motion-sample__reduced-motion",
-		children: [
-			"Animation suppressed by ",
-			/* @__PURE__ */ jsx("code", { children: "prefers-reduced-motion: reduce" }),
-			"."
-		]
-	});
-	return /* @__PURE__ */ jsx("div", {
-		className: "sb-motion-sample__track",
-		children: /* @__PURE__ */ jsx("div", {
-			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
-		})
-	});
-}
-function MotionSample({ path, speed = 1, runKey = 0 }) {
-	const { spec } = deriveMotionSample(path, useProject());
-	return /* @__PURE__ */ jsx(MotionSampleView, {
-		spec,
-		speed,
-		runKey
-	});
-}
-//#endregion
 //#region src/MotionPreview.tsx
 const SPEEDS = [
 	.25,
@@ -2641,6 +2020,7 @@ function deriveMotionRows(resolved, project, { filter }) {
 		collected.push({
 			path,
 			cssVar: resolveCssVar(path, project),
+			token,
 			durationMs: spec.durationMs,
 			easing: spec.easing,
 			kind
@@ -2656,10 +2036,11 @@ function deriveMotionRows(resolved, project, { filter }) {
 * Pure presentation for the motion preview. Owns the speed/replay controls'
 * local UI state and the `prefers-reduced-motion` read (a browser-environment
 * concern, not project data); renders from the derived `rows` view-model.
-* Composes the connected `MotionSample` as a child (that child reads the
-* project itself).
+* Composes the connected `MotionSample` as a child, feeding it this row's
+* already-resolved `token`/`cssVar` per the presenter contract.
 */
-function MotionPreviewView({ rows, activeTheme, cssVarPrefix, activeAxes, filter, caption }) {
+function MotionPreviewView({ rows, activeTheme, cssVarPrefix, activeAxes, colorFormat, filter, caption }) {
+	const Sample = usePresenter("transition");
 	const [speed, setSpeed] = useState(1);
 	const [run, setRun] = useState(0);
 	const reducedMotion = usePrefersReducedMotion();
@@ -2714,10 +2095,15 @@ function MotionPreviewView({ rows, activeTheme, cssVarPrefix, activeAxes, filter
 							children: formatSpec(row)
 						})]
 					}),
-					/* @__PURE__ */ jsx(MotionSample, {
+					Sample && /* @__PURE__ */ jsx(Sample, {
 						path: row.path,
-						speed,
-						runKey: run
+						token: row.token,
+						cssVar: row.cssVar,
+						colorFormat,
+						options: {
+							speed,
+							runKey: run
+						}
 					}),
 					/* @__PURE__ */ jsx("span", {
 						className: "sb-motion-preview__css-var",
@@ -2731,6 +2117,7 @@ function MotionPreviewView({ rows, activeTheme, cssVarPrefix, activeAxes, filter
 function MotionPreview({ filter, caption }) {
 	const project = useProject();
 	const { resolved, activeTheme, activeAxes, cssVarPrefix } = project;
+	const colorFormat = useColorFormat();
 	return /* @__PURE__ */ jsx(MotionPreviewView, {
 		rows: useMemo(() => deriveMotionRows(resolved, project, { filter }), [
 			resolved,
@@ -2740,6 +2127,7 @@ function MotionPreview({ filter, caption }) {
 		activeTheme,
 		cssVarPrefix,
 		activeAxes,
+		colorFormat,
 		filter,
 		caption
 	});
@@ -2772,12 +2160,18 @@ function deriveOpacityRows(resolved, project, { filter, type, sortBy, sortDir })
 			path,
 			cssVar: resolveCssVar(path, project),
 			opacity,
-			displayValue: String(opacity)
+			displayValue: String(opacity),
+			token
 		};
 	});
 }
-/** Pure presentation for the opacity scale. Renders from plain props. */
-function OpacityScaleView({ rows, activeTheme, cssVarPrefix, activeAxes, sampleColorVar, filter, caption }) {
+/**
+* Pure presentation for the opacity scale. Renders from plain props;
+* composes the connected `OpacitySwatch` as a child, feeding it this row's
+* already-resolved `token`/`cssVar` per the presenter contract.
+*/
+function OpacityScaleView({ rows, activeTheme, cssVarPrefix, activeAxes, sampleColorVar, colorFormat, filter, caption }) {
+	const Swatch = usePresenter("number");
 	const captionText = caption ?? `${rows.length} opacity token${rows.length === 1 ? "" : "s"}${filter ? ` matching \`${filter}\`` : ""} · ${activeTheme}`;
 	if (rows.length === 0) return /* @__PURE__ */ jsx("div", {
 		...blockWrapperAttrs(cssVarPrefix, activeAxes),
@@ -2795,13 +2189,12 @@ function OpacityScaleView({ rows, activeTheme, cssVarPrefix, activeAxes, sampleC
 			className: "sb-opacity-scale__grid",
 			children: rows.map((row) => /* @__PURE__ */ jsxs("div", {
 				className: "sb-opacity-scale__card",
-				children: [/* @__PURE__ */ jsx("div", {
-					className: "sb-opacity-scale__swatch",
-					style: {
-						"--swatchbook-opacity-scale-color": sampleColorVar,
-						"--swatchbook-opacity-scale-alpha": String(row.opacity)
-					},
-					"aria-hidden": true
+				children: [Swatch && /* @__PURE__ */ jsx(Swatch, {
+					path: row.path,
+					token: row.token,
+					cssVar: row.cssVar,
+					colorFormat,
+					options: { sampleColorVar }
 				}), /* @__PURE__ */ jsxs("div", {
 					className: "sb-opacity-scale__meta",
 					children: [
@@ -2832,6 +2225,7 @@ function OpacityScaleView({ rows, activeTheme, cssVarPrefix, activeAxes, sampleC
 function OpacityScale({ filter, type = "number", sampleColor = "color.accent.bg", caption, sortBy = "value", sortDir = "asc" }) {
 	const project = useProject();
 	const { resolved, activeTheme, activeAxes, cssVarPrefix } = project;
+	const colorFormat = useColorFormat();
 	return /* @__PURE__ */ jsx(OpacityScaleView, {
 		rows: useMemo(() => deriveOpacityRows(resolved, project, {
 			filter,
@@ -2850,59 +2244,87 @@ function OpacityScale({ filter, type = "number", sampleColor = "color.accent.bg"
 		cssVarPrefix,
 		activeAxes,
 		sampleColorVar: resolveCssVar(sampleColor, project),
+		colorFormat,
 		filter,
 		caption
 	});
 }
 //#endregion
 //#region src/provider.tsx
+const SetAxesContext = createContext(null);
+function assemble(snapshot, activeAxes) {
+	return {
+		axes: snapshot.axes,
+		activeAxes,
+		activeTheme: tupleToName(snapshot.axes, activeAxes),
+		cssVarPrefix: snapshot.cssVarPrefix,
+		indicators: snapshot.indicators,
+		diagnostics: snapshot.diagnostics,
+		css: snapshot.css,
+		listing: snapshot.listing,
+		tokenGraph: snapshot.tokenGraph,
+		defaultTuple: snapshot.defaultTuple,
+		defaultColorFormat: snapshot.defaultColorFormat
+	};
+}
 /**
-* Wraps a tree of blocks with the token data they need to render.
+* Wraps a tree of blocks with the token data they need to render, assembled
+* from core's wire snapshot plus an active axis tuple.
 *
-* The Storybook addon's preview decorator mounts this automatically, so
-* story/MDX authors typically never see it. Outside Storybook — unit
-* tests, custom React apps, non-Storybook doc sites — consumers construct
-* a {@link ProjectSnapshot} (often imported from a JSON file) and wrap
-* their blocks in this provider.
+* The Storybook addon's preview decorator mounts this automatically
+* (`axes` controlled by the toolbar), so story/MDX authors typically never
+* see it. Outside Storybook: unit tests, custom React apps, non-Storybook
+* doc sites. Consumers pass a {@link SnapshotForWire} (often imported from
+* a JSON file) and either drive `axes` themselves or let the provider own
+* the tuple via `defaultAxes` + {@link useSetAxes}.
 */
-function SwatchbookProvider({ value, children }) {
-	return /* @__PURE__ */ jsx(SwatchbookContext.Provider, {
-		value,
-		children
+function SwatchbookProvider({ snapshot, axes, defaultAxes, presenters, mountCss = true, children }) {
+	const [internalAxes, setInternalAxes] = useState(() => defaultAxes ?? snapshot.defaultTuple);
+	useEffect(() => {
+		if (!mountCss) return;
+		ensureStyleElement(SWATCHBOOK_STYLE_ELEMENT_ID, snapshot.css);
+	}, [mountCss, snapshot.css]);
+	const controlled = axes !== void 0;
+	const activeAxes = controlled ? axes : internalAxes;
+	const value = useMemo(() => assemble(snapshot, activeAxes), [snapshot, activeAxes]);
+	const merged = useMemo(() => mergePresenters(presenters), [presenters]);
+	const setAxes = controlled ? null : setInternalAxes;
+	return /* @__PURE__ */ jsx("div", {
+		...perAxisAttrs(snapshot.cssVarPrefix, activeAxes),
+		children: /* @__PURE__ */ jsx(SwatchbookContext.Provider, {
+			value,
+			children: /* @__PURE__ */ jsx(PresenterContext.Provider, {
+				value: merged,
+				children: /* @__PURE__ */ jsx(SetAxesContext.Provider, {
+					value: setAxes,
+					children
+				})
+			})
+		})
 	});
 }
 /**
+* Flip the active tuple on an uncontrolled {@link SwatchbookProvider}
+* (mounted with `defaultAxes`, not `axes`). Throws when the nearest
+* provider is controlled (the host owns `axes`) or absent, since there's
+* no internal state to flip in either case.
+*/
+function useSetAxes() {
+	const setAxes = useContext(SetAxesContext);
+	if (!setAxes) throw new Error("[swatchbook-blocks] useSetAxes() requires an uncontrolled <SwatchbookProvider defaultAxes={…}> (not one given an `axes` prop, and not no provider at all).");
+	return setAxes;
+}
+/**
 * Read the current {@link ProjectSnapshot}. Throws if called outside a
 * {@link SwatchbookProvider}; blocks that need to fall back to the
 * virtual module go through the internal `useProject()` hook instead.
 */
 function useSwatchbookData() {
 	const value = useOptionalSwatchbookData();
-	if (!value) throw new Error("[swatchbook-blocks] useSwatchbookData() called outside <SwatchbookProvider>. Wrap your tree in <SwatchbookProvider value={snapshot}> or render inside a Storybook story.");
+	if (!value) throw new Error("[swatchbook-blocks] useSwatchbookData() called outside <SwatchbookProvider>. Wrap your tree in <SwatchbookProvider snapshot={wire}> or render inside a Storybook story.");
 	return value;
 }
 //#endregion
-//#region src/shadow-preview/ShadowSample.tsx
-/**
-* Pure derivation of a single shadow token's sample data from resolved
-* project data. Extracted so it is unit-testable without React or a store.
-*/
-function deriveShadowSample(path, project) {
-	return { cssVar: resolveCssVar(path, project) };
-}
-/** Pure presentation for a single shadow token's sample. Renders from plain props. */
-function ShadowSampleView({ cssVar }) {
-	return /* @__PURE__ */ jsx("div", {
-		className: "sb-shadow-sample",
-		style: { boxShadow: cssVar },
-		"aria-hidden": true
-	});
-}
-function ShadowSample({ path }) {
-	const { cssVar } = deriveShadowSample(path, useProject());
-	return /* @__PURE__ */ jsx(ShadowSampleView, { cssVar });
-}
-//#endregion
 //#region src/ShadowPreview.tsx
 function layerKey(path, layer, fallback) {
 	return `${path}|${layer.offset}|${layer.blur}|${layer.spread}|${fallback}`;
@@ -2914,9 +2336,9 @@ function asLayers(raw) {
 }
 function formatLayer(layer, colorFormat) {
 	return {
-		offset: `${formatDimension$1(layer.offsetX)} ${formatDimension$1(layer.offsetY)}`,
-		blur: formatDimension$1(layer.blur),
-		spread: formatDimension$1(layer.spread),
+		offset: `${formatDimension(layer.offsetX)} ${formatDimension(layer.offsetY)}`,
+		blur: formatDimension(layer.blur),
+		spread: formatDimension(layer.spread),
 		color: formatSubColor(layer.color, colorFormat),
 		inset: layer.inset ? String(layer.inset) : void 0
 	};
@@ -2935,15 +2357,17 @@ function deriveShadowRows(resolved, project, { filter, sortBy, sortDir, colorFor
 	}).map(([path, token]) => ({
 		path,
 		cssVar: resolveCssVar(path, project),
+		token,
 		layers: asLayers(token.$value).map((layer) => formatLayer(layer, colorFormat))
 	}));
 }
 /**
 * Pure presentation for the shadow preview. Renders from plain props;
-* composes the connected `ShadowSample` as a child (that child reads the
-* project itself).
+* composes the connected `ShadowSample` as a child, feeding it this row's
+* already-resolved `token`/`cssVar` per the presenter contract.
 */
-function ShadowPreviewView({ rows, activeTheme, cssVarPrefix, activeAxes, filter, caption }) {
+function ShadowPreviewView({ rows, activeTheme, cssVarPrefix, activeAxes, colorFormat, filter, caption }) {
+	const Sample = usePresenter("shadow");
 	const captionText = caption ?? `${rows.length} shadow${rows.length === 1 ? "" : "s"}${filter ? ` matching \`${filter}\`` : ""} · ${activeTheme}`;
 	if (rows.length === 0) return /* @__PURE__ */ jsx("div", {
 		...blockWrapperAttrs(cssVarPrefix, activeAxes),
@@ -2972,7 +2396,12 @@ function ShadowPreviewView({ rows, activeTheme, cssVarPrefix, activeAxes, filter
 				}),
 				/* @__PURE__ */ jsx("div", {
 					className: "sb-shadow-preview__sample-cell",
-					children: /* @__PURE__ */ jsx(ShadowSample, { path: row.path })
+					children: Sample && /* @__PURE__ */ jsx(Sample, {
+						path: row.path,
+						token: row.token,
+						cssVar: row.cssVar,
+						colorFormat
+					})
 				}),
 				/* @__PURE__ */ jsx("div", {
 					className: "sb-shadow-preview__breakdown",
@@ -3017,47 +2446,35 @@ function Layer({ layer, index, total }) {
 		})]
 	});
 }
-function ShadowPreview({ filter, caption, sortBy = "path", sortDir = "asc" }) {
+function ShadowPreview({ filter, caption, sortBy = "path", sortDir = "asc", colorFormat }) {
 	const project = useProject();
 	const { resolved, activeTheme, activeAxes, cssVarPrefix } = project;
-	const colorFormat = useColorFormat();
+	const contextColorFormat = useColorFormat();
+	const format = colorFormat ?? contextColorFormat;
 	return /* @__PURE__ */ jsx(ShadowPreviewView, {
 		rows: useMemo(() => deriveShadowRows(resolved, project, {
 			filter,
 			sortBy,
 			sortDir,
-			colorFormat
+			colorFormat: format
 		}), [
 			resolved,
 			project,
 			filter,
 			sortBy,
 			sortDir,
-			colorFormat
+			format
 		]),
 		activeTheme,
 		cssVarPrefix,
 		activeAxes,
+		colorFormat: format,
 		filter,
 		caption
 	});
 }
 //#endregion
 //#region src/StrokeStylePreview.tsx
-const STRING_STYLES = new Set([
-	"solid",
-	"dashed",
-	"dotted",
-	"double",
-	"groove",
-	"ridge",
-	"outset",
-	"inset"
-]);
-function extractCssStyle(value) {
-	if (typeof value === "string" && STRING_STYLES.has(value)) return value;
-	return null;
-}
 /**
 * Pure derivation of the preview's display rows from resolved project data.
 * Extracted so it is unit-testable without React or a store.
@@ -3072,12 +2489,17 @@ function deriveStrokeStyleRows(resolved, project, { filter, sortBy, sortDir }) {
 	}).map(([path, token]) => ({
 		path,
 		cssVar: resolveCssVar(path, project),
-		displayValue: formatTokenValue(token.$value, token.$type, "raw", project.listing[path]),
-		cssStyle: extractCssStyle(token.$value)
+		displayValue: formatTokenValue$2(token.$value, token.$type, "raw", project.listing[path]),
+		token
 	}));
 }
-/** Pure presentation for the stroke-style preview. Renders from plain props. */
-function StrokeStylePreviewView({ rows, activeTheme, cssVarPrefix, activeAxes, filter, caption }) {
+/**
+* Pure presentation for the stroke-style preview. Renders from plain props;
+* composes the connected `StrokeSample` as a child, feeding it this row's
+* already-resolved `token`/`cssVar` per the presenter contract.
+*/
+function StrokeStylePreviewView({ rows, activeTheme, cssVarPrefix, activeAxes, colorFormat, filter, caption }) {
+	const Sample = usePresenter("strokeStyle");
 	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", {
 		...blockWrapperAttrs(cssVarPrefix, activeAxes),
@@ -3104,13 +2526,11 @@ function StrokeStylePreviewView({ rows, activeTheme, cssVarPrefix, activeAxes, f
 						children: row.displayValue
 					})]
 				}),
-				row.cssStyle ? /* @__PURE__ */ jsx("div", {
-					className: "sb-stroke-style-sample__line",
-					style: { borderTopStyle: row.cssStyle },
-					"aria-hidden": true
-				}) : /* @__PURE__ */ jsx("span", {
-					className: "sb-stroke-style-sample__object-fallback",
-					children: "Object-form (dashArray + lineCap) — no pure CSS `border-style` equivalent."
+				Sample && /* @__PURE__ */ jsx(Sample, {
+					path: row.path,
+					token: row.token,
+					cssVar: row.cssVar,
+					colorFormat
 				}),
 				/* @__PURE__ */ jsx("span", {
 					className: "sb-stroke-style-sample__css-var",
@@ -3123,6 +2543,7 @@ function StrokeStylePreviewView({ rows, activeTheme, cssVarPrefix, activeAxes, f
 function StrokeStylePreview({ filter, caption, sortBy = "path", sortDir = "asc" }) {
 	const project = useProject();
 	const { resolved, activeTheme, activeAxes, cssVarPrefix } = project;
+	const colorFormat = useColorFormat();
 	return /* @__PURE__ */ jsx(StrokeStylePreviewView, {
 		rows: useMemo(() => deriveStrokeStyleRows(resolved, project, {
 			filter,
@@ -3138,6 +2559,7 @@ function StrokeStylePreview({ filter, caption, sortBy = "path", sortDir = "asc"
 		activeTheme,
 		cssVarPrefix,
 		activeAxes,
+		colorFormat,
 		filter,
 		caption
 	});
@@ -3280,12 +2702,13 @@ function treeHasTruncation(nodes) {
 }
 //#endregion
 //#region src/token-detail/AxisVariance.tsx
-function AxisVariance({ path }) {
+function AxisVariance({ path, colorFormat }) {
 	const { token, cssVar, axes, activeAxes, cssVarPrefix, varianceByPath, resolveAt } = useTokenDetailData(path);
-	const colorFormat = useColorFormat();
+	const contextColorFormat = useColorFormat();
+	const format = colorFormat ?? contextColorFormat;
 	const tokenType = token?.$type;
 	const isColor = tokenType === "color";
-	const formatFn = (t) => valueFor(t, tokenType, colorFormat);
+	const formatFn = (t) => valueFor(t, tokenType, format);
 	const variance = useMemo(() => {
 		const result = varianceByPath[path];
 		if (!result) return { kind: "constant" };
@@ -3434,20 +2857,21 @@ function AxisVariance({ path }) {
 }
 function valueFor(token, $type, format) {
 	if (!token) return "—";
-	return formatTokenValue(token.$value, $type, format);
+	return formatTokenValue$2(token.$value, $type, format);
 }
 //#endregion
 //#region src/token-detail/CompositeBreakdown.tsx
-function CompositeBreakdown({ path }) {
+function CompositeBreakdown({ path, colorFormat }) {
 	const { token, resolved } = useTokenDetailData(path);
-	const colorFormat = useColorFormat();
+	const contextColorFormat = useColorFormat();
+	const format = colorFormat ?? contextColorFormat;
 	if (!token) return null;
 	return /* @__PURE__ */ jsx(CompositeBreakdownContent, {
 		type: token.$type,
 		rawValue: token.$value,
 		partialAliasOf: token.partialAliasOf,
 		resolved,
-		colorFormat
+		colorFormat: format
 	});
 }
 function CompositeBreakdownContent({ type, rawValue, partialAliasOf, resolved, colorFormat }) {
@@ -4076,7 +3500,7 @@ function deriveTokenDetail(path, token, listing, colorFormat) {
 	if (!token) return EMPTY_DERIVED;
 	const isColor = token.$type === "color";
 	const gamut = isColor ? formatColor(token.$value, colorFormat) : null;
-	const value = formatTokenValue(token.$value, token.$type, colorFormat, listing[path]);
+	const value = formatTokenValue$2(token.$value, token.$type, colorFormat, listing[path]);
 	const outOfGamut = gamut?.outOfGamut ?? false;
 	const dep = token.$deprecated;
 	return {
@@ -4166,12 +3590,13 @@ function TokenDetailView({ path, heading, token, cssVar, activeTheme, activeAxes
 		]
 	});
 }
-function TokenDetail({ path, heading }) {
+function TokenDetail({ path, heading, colorFormat }) {
 	const { token, cssVar, activeTheme, activeAxes, cssVarPrefix } = useTokenDetailData(path);
-	const colorFormat = useColorFormat();
+	const contextColorFormat = useColorFormat();
+	const format = colorFormat ?? contextColorFormat;
 	const { listing } = useProject();
-	const derived = deriveTokenDetail(path, token, listing, colorFormat);
-	return /* @__PURE__ */ jsx(TokenDetailView, {
+	const derived = deriveTokenDetail(path, token, listing, format);
+	const view = /* @__PURE__ */ jsx(TokenDetailView, {
 		path,
 		...heading !== void 0 && { heading },
 		token,
@@ -4181,6 +3606,10 @@ function TokenDetail({ path, heading }) {
 		cssVarPrefix,
 		...derived
 	});
+	return colorFormat !== void 0 ? /* @__PURE__ */ jsx(ColorFormatContext.Provider, {
+		value: colorFormat,
+		children: view
+	}) : view;
 }
 //#endregion
 //#region src/internal/DetailOverlay.tsx
@@ -4730,14 +4159,14 @@ function TokenNavigatorView({ resolved, root, enabledIndicators, cssVarPrefix, a
 * navigation. Click a leaf to inspect it in a slide-over (unless `onSelect`
 * is provided, which hands the follow-up to the consumer).
 */
-function TokenNavigator({ root, type, initiallyExpanded = 1, searchable = true, onSelect, id, indicators }) {
+function TokenNavigator({ root, type, initiallyExpanded = 1, searchable = true, onSelect, id, indicators, colorFormat }) {
 	const { resolved, activeTheme, activeAxes, cssVarPrefix, indicators: indicatorBaseline } = useProject();
 	const blockKey = useBlockKey("TokenNavigator", [
 		root,
 		type === void 0 ? "" : typeof type === "string" ? type : type.join(","),
 		id
 	]);
-	return /* @__PURE__ */ jsx(TokenNavigatorView, {
+	const view = /* @__PURE__ */ jsx(TokenNavigatorView, {
 		resolved,
 		root,
 		enabledIndicators: useMemo(() => resolveIndicators(indicators, indicatorBaseline), [indicators, indicatorBaseline]),
@@ -4750,6 +4179,10 @@ function TokenNavigator({ root, type, initiallyExpanded = 1, searchable = true,
 		searchable,
 		onSelect
 	});
+	return colorFormat !== void 0 ? /* @__PURE__ */ jsx(ColorFormatContext.Provider, {
+		value: colorFormat,
+		children: view
+	}) : view;
 }
 function TreeNodeRow({ node, expanded, focusedPath, registerTreeItem, onToggle, onFocusPath, onLeafClick, root, resolveInView, onNavigate, enabled, level, setsize, posinset }) {
 	if (node.kind === "leaf") return /* @__PURE__ */ jsx(LeafRow, {
@@ -4887,7 +4320,7 @@ const LeafPreview = memo(function LeafPreview({ path, token }) {
 			className: "sb-token-navigator__preview-box",
 			children: [/* @__PURE__ */ jsx("span", {
 				className: "sb-token-navigator__value",
-				children: formatTokenValue(token.$value, type, colorFormat, project.listing[path])
+				children: formatTokenValue$2(token.$value, type, colorFormat, project.listing[path])
 			}), /* @__PURE__ */ jsx("span", {
 				className: "sb-token-navigator__color-swatch",
 				style: { background: cssVar },
@@ -4899,12 +4332,15 @@ const LeafPreview = memo(function LeafPreview({ path, token }) {
 		className: "sb-token-navigator__preview-box",
 		children: [/* @__PURE__ */ jsx("span", {
 			className: "sb-token-navigator__value",
-			children: formatTokenValue(token.$value, type, colorFormat, project.listing[path])
+			children: formatTokenValue$2(token.$value, type, colorFormat, project.listing[path])
 		}), /* @__PURE__ */ jsx("span", {
 			className: "sb-token-navigator__preview-dimension",
 			children: /* @__PURE__ */ jsx(DimensionSample, {
 				path,
-				visual: "length"
+				token,
+				cssVar: resolveCssVar(path, project),
+				colorFormat,
+				options: { visual: "length" }
 			})
 		})]
 	});
@@ -4912,28 +4348,43 @@ const LeafPreview = memo(function LeafPreview({ path, token }) {
 		className: "sb-token-navigator__preview-box",
 		children: /* @__PURE__ */ jsx("span", {
 			className: "sb-token-navigator__preview-scaled",
-			children: /* @__PURE__ */ jsx(ShadowSample, { path })
+			children: /* @__PURE__ */ jsx(ShadowSample, {
+				path,
+				token,
+				cssVar: resolveCssVar(path, project),
+				colorFormat
+			})
 		})
 	});
 	if (type === "border") return /* @__PURE__ */ jsx("span", {
 		className: "sb-token-navigator__preview-box",
 		children: /* @__PURE__ */ jsx("span", {
 			className: "sb-token-navigator__preview-scaled",
-			children: /* @__PURE__ */ jsx(BorderSample, { path })
+			children: /* @__PURE__ */ jsx(BorderSample, {
+				path,
+				token,
+				cssVar: resolveCssVar(path, project),
+				colorFormat
+			})
 		})
 	});
 	if (type === "transition" || type === "duration" || type === "cubicBezier") return /* @__PURE__ */ jsx("span", {
 		className: "sb-token-navigator__preview-box",
 		children: /* @__PURE__ */ jsx("span", {
 			className: "sb-token-navigator__preview-motion",
-			children: /* @__PURE__ */ jsx(MotionSample, { path })
+			children: /* @__PURE__ */ jsx(MotionSample, {
+				path,
+				token,
+				cssVar: resolveCssVar(path, project),
+				colorFormat
+			})
 		})
 	});
 	return /* @__PURE__ */ jsx("span", {
 		className: "sb-token-navigator__preview-box",
 		children: /* @__PURE__ */ jsx("span", {
 			className: "sb-token-navigator__value",
-			children: formatTokenValue(token.$value, type, colorFormat, project.listing[path])
+			children: formatTokenValue$2(token.$value, type, colorFormat, project.listing[path])
 		})
 	});
 });
@@ -4965,7 +4416,7 @@ function deriveTokenRows(resolved, listing, cssVarPrefix, varianceByPath, { filt
 		return {
 			path,
 			type: token.$type ?? "",
-			value: formatTokenValue(token.$value, token.$type, colorFormat, listing[path]),
+			value: formatTokenValue$2(token.$value, token.$type, colorFormat, listing[path]),
 			outOfGamut: color?.outOfGamut ?? false,
 			cssVar: resolveCssVar(path, projectFields),
 			isColor,
@@ -5207,9 +4658,10 @@ function TokenTableView({ rows, activeTheme, cssVarPrefix, activeAxes, colorForm
 * slide-over (unless `onSelect` is provided, which hands the follow-up to the
 * consumer).
 */
-function TokenTable({ filter, type, caption, sortBy = "path", sortDir = "asc", searchable = true, onSelect, id, indicators }) {
+function TokenTable({ filter, type, caption, sortBy = "path", sortDir = "asc", searchable = true, onSelect, id, indicators, colorFormat }) {
 	const { resolved, activeTheme, activeAxes, cssVarPrefix, listing, varianceByPath, indicators: indicatorBaseline } = useProject();
-	const colorFormat = useColorFormat();
+	const contextColorFormat = useColorFormat();
+	const format = colorFormat ?? contextColorFormat;
 	const rootFontSize = useRootFontSize();
 	const blockKey = useBlockKey("TokenTable", [
 		filter,
@@ -5218,13 +4670,13 @@ function TokenTable({ filter, type, caption, sortBy = "path", sortDir = "asc", s
 		id
 	]);
 	const enabledIndicators = useMemo(() => resolveIndicators(indicators, indicatorBaseline), [indicators, indicatorBaseline]);
-	return /* @__PURE__ */ jsx(TokenTableView, {
+	const view = /* @__PURE__ */ jsx(TokenTableView, {
 		rows: useMemo(() => deriveTokenRows(resolved, listing, cssVarPrefix, varianceByPath, {
 			filter,
 			type,
 			sortBy,
 			sortDir,
-			colorFormat,
+			colorFormat: format,
 			rootFontSizePx: rootFontSize
 		}), [
 			resolved,
@@ -5235,13 +4687,13 @@ function TokenTable({ filter, type, caption, sortBy = "path", sortDir = "asc", s
 			type,
 			sortBy,
 			sortDir,
-			colorFormat,
+			format,
 			rootFontSize
 		]),
 		activeTheme,
 		cssVarPrefix,
 		activeAxes,
-		colorFormat,
+		colorFormat: format,
 		enabledIndicators,
 		validPaths: useMemo(() => new Set(Object.keys(resolved)), [resolved]),
 		blockKey,
@@ -5251,66 +4703,37 @@ function TokenTable({ filter, type, caption, sortBy = "path", sortDir = "asc", s
 		searchable,
 		onSelect
 	});
+	return colorFormat !== void 0 ? /* @__PURE__ */ jsx(ColorFormatContext.Provider, {
+		value: colorFormat,
+		children: view
+	}) : view;
 }
 //#endregion
 //#region src/TypographyScale.tsx
-function asDimension(raw) {
-	if (raw == null) return void 0;
-	if (typeof raw === "string" || typeof raw === "number") return String(raw);
-	if (typeof raw === "object") {
-		const v = raw;
-		if (v.value !== void 0 && v.unit !== void 0) return `${String(v.value)}${String(v.unit)}`;
-	}
-}
-function asFontFamily(raw) {
-	if (typeof raw === "string") return raw;
-	if (Array.isArray(raw)) return raw.map(String).join(", ");
-}
-function buildRow(path, composite) {
-	const fontFamily = asFontFamily(composite.fontFamily);
-	const fontSize = asDimension(composite.fontSize);
-	const fontWeight = composite.fontWeight == null ? void 0 : String(composite.fontWeight);
-	const lineHeight = composite.lineHeight == null ? void 0 : String(composite.lineHeight);
-	const letterSpacing = asDimension(composite.letterSpacing);
-	const sampleStyle = {};
-	if (fontFamily) sampleStyle.fontFamily = fontFamily;
-	if (fontSize) sampleStyle.fontSize = fontSize;
-	if (fontWeight) sampleStyle.fontWeight = fontWeight;
-	if (lineHeight) sampleStyle.lineHeight = lineHeight;
-	if (letterSpacing) sampleStyle.letterSpacing = letterSpacing;
-	return {
-		path,
-		sampleStyle,
-		specs: [
-			fontSize,
-			fontWeight ? `w${fontWeight}` : void 0,
-			lineHeight ? `lh ${lineHeight}` : void 0
-		].filter(Boolean).join(" · ")
-	};
-}
 /**
 * Pure derivation of the scale's display rows from resolved project data.
 * Extracted so it is unit-testable without React or a store.
 */
-function deriveTypographyRows(resolved, { filter, sortBy, sortDir }) {
+function deriveTypographyRows(resolved, project, { filter, sortBy, sortDir }) {
 	return sortTokens(Object.entries(resolved).filter(([path, token]) => {
 		if (token.$type !== "typography") return false;
 		return matchPath(path, filter);
 	}), {
 		by: sortBy,
 		dir: sortDir
-	}).map(([path, token]) => {
-		const value = token.$value;
-		if (!value || typeof value !== "object") return {
-			path,
-			sampleStyle: {},
-			specs: ""
-		};
-		return buildRow(path, value);
-	});
+	}).map(([path, token]) => ({
+		path,
+		cssVar: resolveCssVar(path, project),
+		token
+	}));
 }
-/** Pure presentation for the typography scale. Renders from plain props. */
-function TypographyScaleView({ rows, activeTheme, cssVarPrefix, activeAxes, sample, filter, caption }) {
+/**
+* Pure presentation for the typography scale. Renders from plain props;
+* composes the connected `TypeSpecimen` as a child, feeding it this row's
+* already-resolved `token`/`cssVar` per the presenter contract.
+*/
+function TypographyScaleView({ rows, activeTheme, cssVarPrefix, activeAxes, sample, colorFormat, filter, caption }) {
+	const Specimen = usePresenter("typography");
 	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", {
 		...blockWrapperAttrs(cssVarPrefix, activeAxes),
@@ -5326,31 +4749,31 @@ function TypographyScaleView({ rows, activeTheme, cssVarPrefix, activeAxes, samp
 			children: captionText
 		}), rows.map((row) => /* @__PURE__ */ jsxs("div", {
 			className: "sb-typography-scale__row",
-			children: [/* @__PURE__ */ jsxs("div", {
-				className: "sb-typography-scale__meta",
-				children: [/* @__PURE__ */ jsx("span", {
-					className: "sb-typography-scale__path",
-					children: row.path
-				}), row.specs && /* @__PURE__ */ jsx("span", {
-					className: "sb-typography-scale__specs",
-					children: row.specs
-				})]
-			}), /* @__PURE__ */ jsx("div", {
-				style: row.sampleStyle,
-				children: sample
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "sb-typography-scale__path",
+				children: row.path
+			}), Specimen && /* @__PURE__ */ jsx(Specimen, {
+				path: row.path,
+				token: row.token,
+				cssVar: row.cssVar,
+				colorFormat,
+				options: { sample }
 			})]
 		}, row.path))]
 	});
 }
 function TypographyScale({ filter, sample = "The quick brown fox jumps over the lazy dog.", caption, sortBy = "path", sortDir = "asc" }) {
-	const { resolved, activeTheme, activeAxes, cssVarPrefix } = useProject();
+	const project = useProject();
+	const { resolved, activeTheme, activeAxes, cssVarPrefix } = project;
+	const colorFormat = useColorFormat();
 	return /* @__PURE__ */ jsx(TypographyScaleView, {
-		rows: useMemo(() => deriveTypographyRows(resolved, {
+		rows: useMemo(() => deriveTypographyRows(resolved, project, {
 			filter,
 			sortBy,
 			sortDir
 		}), [
 			resolved,
+			project,
 			filter,
 			sortBy,
 			sortDir
@@ -5359,11 +4782,12 @@ function TypographyScale({ filter, sample = "The quick brown fox jumps over the
 		cssVarPrefix,
 		activeAxes,
 		sample,
+		colorFormat,
 		filter,
 		caption
 	});
 }
 //#endregion
-export { AliasChain, AliasedBy, AxesContext, AxisVariance, BorderPreview, BorderSample, COLOR_FORMATS, ColorFormatContext, ColorPalette, ColorTable, CompositeBreakdown, CompositePreview, ConsumerOutput, Diagnostics, DimensionSample, DimensionScale, FontFamilyPreview, FontWeightScale, GradientPalette, MotionPreview, MotionSample, OpacityScale, ShadowPreview, ShadowSample, StrokeStylePreview, SwatchbookProvider, TOKENS_UPDATED_EVENT, ThemeContext, TokenDetail, TokenHeader, TokenNavigator, TokenTable, TokenUsageSnippet, TypographyScale, formatColor, onChannel, registerChannel, registerTokenSource, useActiveAxes, useActiveTheme, useChannelGlobals, useColorFormat, useOptionalSwatchbookData, useSwatchbookData, useTokenSnapshot };
+export { AliasChain, AliasedBy, AxesContext, AxisVariance, BorderPreview, BorderSample, COLOR_FORMATS, ColorFormatContext, ColorPalette, ColorSwatch, ColorTable, CompositeBreakdown, CompositePreview, ConsumerOutput, DEFAULT_PRESENTERS, Diagnostics, DimensionSample, DimensionScale, FontFamilyPreview, FontFamilySpecimen, FontWeightScale, FontWeightSpecimen, GradientPalette, GradientSwatch, MotionPreview, MotionSample, OpacityScale, OpacitySwatch, PresenterContext, ShadowPreview, ShadowSample, StrokeSample, StrokeStylePreview, SwatchbookContext, SwatchbookProvider, ThemeContext, TokenDetail, TokenHeader, TokenNavigator, TokenTable, TokenUsageSnippet, TypeSpecimen, TypographyScale, formatColor, formatTokenValue, mergePresenters, useActiveAxes, useActiveTheme, useColorFormat, useOptionalSwatchbookData, usePresenter, useSetAxes, useSwatchbookData };
 
 //# sourceMappingURL=index.mjs.map