@unpunnyfuns/swatchbook-blocks 0.61.0 → 0.62.2

package/dist/index.mjs

@@ -1,5 +1,6 @@
 import './style.css';
-import Color from "colorjs.io";
+import { COLOR_FORMATS } from "@unpunnyfuns/swatchbook-core/color-formats";
+import { formatColor, parseColor } from "@unpunnyfuns/swatchbook-core/format-color";
 import { createContext, memo, useCallback, useContext, useDeferredValue, useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { getVariance, listPaths, resolveAllAt } from "@unpunnyfuns/swatchbook-core/graph";
@@ -7,183 +8,10 @@ import { makeCssVar } from "@unpunnyfuns/swatchbook-core/css-var";
 import { SWATCHBOOK_STYLE_ELEMENT_ID, ensureStyleElement } from "@unpunnyfuns/swatchbook-core/style-element";
 import { tupleToName } from "@unpunnyfuns/swatchbook-core/themes";
 import { addons } from "storybook/preview-api";
-import { axes, css, cssVarPrefix, defaultTuple, diagnostics, listing, presets, tokenGraph } from "virtual:swatchbook/tokens";
 import { dataAttr } from "@unpunnyfuns/swatchbook-core/data-attr";
 import { matchPath } from "@unpunnyfuns/swatchbook-core/match-path";
 import { fuzzyFilter } from "@unpunnyfuns/swatchbook-core/fuzzy";
 import cx from "clsx";
-//#region src/format-color.ts
-const COLOR_FORMATS = [
-	"hex",
-	"rgb",
-	"hsl",
-	"oklch",
-	"raw"
-];
-const DEFAULT_FALLBACK = "—";
-/**
-* Convert Terrazzo's normalized color payload into a display string in the
-* requested format. Pure function — never throws; returns `{ value: '—' }`
-* for unrecognized input so calling blocks don't need try/catch.
-*/
-function formatColor(value, format, fallback = DEFAULT_FALLBACK) {
-	const normalized = coerce(value);
-	if (!normalized) return {
-		value: stringifyFallback(value, fallback),
-		outOfGamut: false
-	};
-	if (format === "raw") return {
-		value: compactJson(normalized),
-		outOfGamut: false
-	};
-	const color = toColor(normalized);
-	if (!color) return {
-		value: stringifyFallback(value, fallback),
-		outOfGamut: false
-	};
-	const alpha = typeof normalized.alpha === "number" ? normalized.alpha : 1;
-	if (format === "hex") return formatHex(color, alpha);
-	if (format === "rgb") return formatRgb(color, alpha);
-	if (format === "hsl") return formatHsl(color, alpha);
-	return formatOklch(color, alpha);
-}
-function coerce(value) {
-	if (!value || typeof value !== "object") return null;
-	const v = value;
-	const colorSpace = typeof v.colorSpace === "string" ? v.colorSpace : void 0;
-	const components = Array.isArray(v.components) ? v.components : Array.isArray(v.channels) ? v.channels : void 0;
-	if (!colorSpace || !components) {
-		if (typeof v.hex === "string") return {
-			colorSpace: "srgb",
-			components: hexToComponents(v.hex)
-		};
-		return null;
-	}
-	const alpha = typeof v.alpha === "number" ? v.alpha : void 0;
-	const hexVal = v["hex"];
-	const hex = typeof hexVal === "string" ? hexVal : void 0;
-	return {
-		colorSpace,
-		components,
-		...alpha !== void 0 && { alpha },
-		...hex !== void 0 && { hex }
-	};
-}
-function hexToComponents(hex) {
-	const h = hex.replace("#", "");
-	const expanded = h.length === 3 || h.length === 4 ? h.split("").map((c) => c + c).join("") : h;
-	return [
-		parseInt(expanded.slice(0, 2), 16) / 255,
-		parseInt(expanded.slice(2, 4), 16) / 255,
-		parseInt(expanded.slice(4, 6), 16) / 255
-	];
-}
-const COLORJS_SPACE_ALIASES = {
-	"display-p3": "p3",
-	"a98-rgb": "a98rgb",
-	"prophoto-rgb": "prophoto"
-};
-function toColor(normalized) {
-	const source = normalized.components ?? normalized.channels ?? [];
-	const coords = [
-		numberOrZero(source[0]),
-		numberOrZero(source[1]),
-		numberOrZero(source[2])
-	];
-	const space = COLORJS_SPACE_ALIASES[normalized.colorSpace] ?? normalized.colorSpace;
-	try {
-		return new Color(space, coords, normalized.alpha ?? 1);
-	} catch {
-		return null;
-	}
-}
-function numberOrZero(n) {
-	return typeof n === "number" && !Number.isNaN(n) ? n : 0;
-}
-function coord(color, i) {
-	const c = color.coords[i];
-	return typeof c === "number" && !Number.isNaN(c) ? c : 0;
-}
-function formatHex(color, alpha) {
-	const srgb = color.to("srgb");
-	if (!srgb.inGamut("srgb")) return {
-		value: formatRgb(color, alpha).value,
-		outOfGamut: true
-	};
-	const r = unitToByte(coord(srgb, 0));
-	const g = unitToByte(coord(srgb, 1));
-	const b = unitToByte(coord(srgb, 2));
-	const base = `#${toHexByte(r)}${toHexByte(g)}${toHexByte(b)}`;
-	if (alpha >= 1) return {
-		value: base,
-		outOfGamut: false
-	};
-	return {
-		value: `${base}${toHexByte(unitToByte(alpha))}`,
-		outOfGamut: false
-	};
-}
-function formatRgb(color, alpha) {
-	const srgb = color.to("srgb");
-	const inGamut = srgb.inGamut("srgb");
-	const body = `${Math.round(clampUnit(coord(srgb, 0)) * 255)} ${Math.round(clampUnit(coord(srgb, 1)) * 255)} ${Math.round(clampUnit(coord(srgb, 2)) * 255)}`;
-	return {
-		value: alpha >= 1 ? `rgb(${body})` : `rgb(${body} / ${roundAlpha(alpha)})`,
-		outOfGamut: !inGamut
-	};
-}
-function formatHsl(color, alpha) {
-	const hsl = color.to("hsl");
-	const inGamut = color.to("srgb").inGamut("srgb");
-	const body = `${roundHue(coord(hsl, 0))} ${roundPercent(coord(hsl, 1))}% ${roundPercent(coord(hsl, 2))}%`;
-	return {
-		value: alpha >= 1 ? `hsl(${body})` : `hsl(${body} / ${roundAlpha(alpha)})`,
-		outOfGamut: !inGamut
-	};
-}
-function formatOklch(color, alpha) {
-	const oklch = color.to("oklch");
-	const body = `${roundTo(coord(oklch, 0), 3)} ${roundTo(coord(oklch, 1), 3)} ${roundTo(coord(oklch, 2), 2)}`;
-	return {
-		value: alpha >= 1 ? `oklch(${body})` : `oklch(${body} / ${roundAlpha(alpha)})`,
-		outOfGamut: false
-	};
-}
-function unitToByte(n) {
-	return Math.max(0, Math.min(255, Math.round(n * 255)));
-}
-function clampUnit(n) {
-	return Math.max(0, Math.min(1, n));
-}
-function toHexByte(n) {
-	return n.toString(16).padStart(2, "0");
-}
-function roundTo(n, digits) {
-	const f = 10 ** digits;
-	return Math.round(n * f) / f;
-}
-function roundHue(h) {
-	return roundTo((h % 360 + 360) % 360, 1);
-}
-function roundPercent(n) {
-	return Math.round(n * 10) / 10;
-}
-function roundAlpha(a) {
-	return roundTo(a, 3);
-}
-function compactJson(value) {
-	const parts = [`"colorSpace":${JSON.stringify(value.colorSpace)}`];
-	const components = value.components ?? value.channels;
-	if (components) parts.push(`"components":[${components.map((c) => c === null ? "null" : c).join(", ")}]`);
-	if (typeof value.alpha === "number" && value.alpha !== 1) parts.push(`"alpha":${value.alpha}`);
-	return `{ ${parts.join(", ")} }`;
-}
-function stringifyFallback(value, fallback) {
-	if (value == null) return fallback;
-	if (typeof value === "string" || typeof value === "number") return String(value);
-	return fallback;
-}
-//#endregion
 //#region src/internal/styles.tsx
 /**
 * Chrome-style primitives shared across every block. Kept as JS exports
@@ -319,49 +147,66 @@ function useColorFormat() {
 /**
 * Live token snapshot backed by the addon's preview dev-time HMR event.
 *
-* Blocks read the virtual module at module load; without a way to notice
-* changes, edits to the source token files would flow into the addon's
-* in-memory project but nowhere else — the React tree would keep
-* rendering the old values until a full preview reload. 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 that read
-* through this module re-render in place on each token save.
+* 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.
 *
-* Outside the preview iframe (the docs-site path, unit tests) the
-* channel never receives anything, and consumers keep seeing the
-* initial values baked into the virtual module at build time.
+* 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,
-	listing: listing ?? {},
-	tokenGraph,
-	defaultTuple: defaultTuple ?? {},
+	axes: [],
+	presets: [],
+	diagnostics: [],
+	css: "",
+	cssVarPrefix: "",
+	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,
+		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();
+}
+/**
+* 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 ensureSubscribed() {
 	if (subscribed || typeof window === "undefined") return;
 	subscribed = true;
 	addons.getChannel().on(TOKENS_UPDATED_EVENT, (payload) => {
-		snapshot = {
-			axes: payload.axes ?? snapshot.axes,
-			presets: payload.presets ?? snapshot.presets,
-			diagnostics: payload.diagnostics ?? snapshot.diagnostics,
-			css: payload.css ?? snapshot.css,
-			cssVarPrefix: payload.cssVarPrefix ?? snapshot.cssVarPrefix,
-			listing: payload.listing ?? snapshot.listing,
-			tokenGraph: payload.tokenGraph ?? snapshot.tokenGraph,
-			defaultTuple: payload.defaultTuple ?? snapshot.defaultTuple,
-			version: snapshot.version + 1
-		};
-		for (const cb of listeners) cb();
+		applyPatch(payload);
 	});
 }
 ensureSubscribed();
@@ -383,10 +228,16 @@ function useTokenSnapshot() {
 }
 //#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$1(axes) {
+function defaultTuple(axes) {
 	const out = {};
 	for (const axis of axes) out[axis.name] = axis.default;
 	return out;
@@ -424,12 +275,7 @@ function useProject() {
 		if (!snapshot) return null;
 		return snapshotResolveAt(snapshot);
 	}, [tokenGraph, activeTheme]);
-	const derivedVarianceByPath = useMemo(() => {
-		if (!tokenGraph) return {};
-		const out = {};
-		for (const path of listPaths(tokenGraph)) out[path] = getVariance(tokenGraph, path);
-		return out;
-	}, [tokenGraph]);
+	const derivedVarianceByPath = useMemo(() => computeVarianceByPath(tokenGraph), [tokenGraph]);
 	const providerData = useMemo(() => {
 		if (!snapshot || !resolveAt || !axes || !activeAxes) return null;
 		return {
@@ -468,7 +314,7 @@ function useVirtualModuleFallback(enabled) {
 		ensureStylesheet(tokens.css);
 	}, [enabled, tokens.css]);
 	const activeAxes = useMemo(() => {
-		return Object.keys(contextAxes).length > 0 ? { ...contextAxes } : channelGlobals.axes ?? defaultTuple$1(tokens.axes);
+		return Object.keys(contextAxes).length > 0 ? { ...contextAxes } : channelGlobals.axes ?? defaultTuple(tokens.axes);
 	}, [
 		contextAxes,
 		channelGlobals.axes,
@@ -476,13 +322,7 @@ function useVirtualModuleFallback(enabled) {
 	]);
 	const activeTheme = contextThemeName || tupleToName(tokens.axes, activeAxes);
 	const resolveAt = useMemo(() => makeResolveAt(tokens.tokenGraph), [tokens.tokenGraph]);
-	const fallbackVarianceByPath = useMemo(() => {
-		const graph = tokens.tokenGraph;
-		if (!graph) return {};
-		const out = {};
-		for (const path of listPaths(graph)) out[path] = getVariance(graph, path);
-		return out;
-	}, [tokens.tokenGraph]);
+	const fallbackVarianceByPath = useMemo(() => computeVarianceByPath(tokens.tokenGraph), [tokens.tokenGraph]);
 	return useMemo(() => ({
 		activeTheme,
 		activeAxes,
@@ -558,6 +398,32 @@ function BorderSample({ path }) {
 	});
 }
 //#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;
+}
+//#endregion
 //#region src/internal/data-attr.ts
 /**
 * Marker attribute set on every block wrapper. Retained as a stable hook
@@ -692,20 +558,10 @@ function safeNumber(v) {
 	return typeof v === "number" && Number.isFinite(v) ? v : 0;
 }
 function colorKey(v) {
-	if (!v || typeof v !== "object") return null;
+	const color = parseColor(v);
+	if (!color) return null;
 	try {
-		const c = v;
-		let source;
-		if (typeof c.hex === "string") source = c.hex;
-		else if (typeof c.colorSpace === "string") {
-			const channels = Array.isArray(c.components) ? c.components : Array.isArray(c.channels) ? c.channels : void 0;
-			if (!channels) return null;
-			source = {
-				space: c.colorSpace,
-				coords: channels
-			};
-		} else return null;
-		const [l, chroma, h] = new Color(source).to("oklch").coords;
+		const [l, chroma, h] = color.to("oklch").coords;
 		return {
 			l: safeNumber(l),
 			c: safeNumber(chroma),
@@ -723,20 +579,6 @@ function toDisplayable(v) {
 }
 //#endregion
 //#region src/BorderPreview.tsx
-function formatDimension$2(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);
-}
-function formatSubColor$1(raw, format) {
-	if (raw == null) return "—";
-	return formatColor(raw, format).value;
-}
 function BorderPreview({ filter, caption, sortBy = "path", sortDir = "asc" }) {
 	const project = useProject();
 	const { resolved, activeTheme, activeAxes, cssVarPrefix } = project;
@@ -797,7 +639,7 @@ function BorderPreview({ filter, caption, sortBy = "path", sortDir = "asc" }) {
 							className: "sb-border-preview__breakdown-key",
 							children: "width"
 						}),
-						/* @__PURE__ */ jsx("span", { children: formatDimension$2(row.value.width) }),
+						/* @__PURE__ */ jsx("span", { children: formatDimension$1(row.value.width) }),
 						/* @__PURE__ */ jsx("span", {
 							className: "sb-border-preview__breakdown-key",
 							children: "style"
@@ -807,7 +649,7 @@ function BorderPreview({ filter, caption, sortBy = "path", sortDir = "asc" }) {
 							className: "sb-border-preview__breakdown-key",
 							children: "color"
 						}),
-						/* @__PURE__ */ jsx("span", { children: formatSubColor$1(row.value.color, colorFormat) })
+						/* @__PURE__ */ jsx("span", { children: formatSubColor(row.value.color, colorFormat) })
 					]
 				})
 			]
@@ -1508,8 +1350,26 @@ function Diagnostics({ caption } = {}) {
 	});
 }
 //#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. Returns `NaN` for
+* units we can't reasonably approximate (ex / ch / %), which the caller
+* treats as "render at cssVar but don't cap".
+*/
+function toPixels(raw) {
+	if (raw == null || typeof raw !== "object") return NaN;
+	const v = raw;
+	if (typeof v.value !== "number" || typeof v.unit !== "string") return NaN;
+	switch (v.unit) {
+		case "px": return v.value;
+		case "rem":
+		case "em": return v.value * 16;
+		default: return NaN;
+	}
+}
+//#endregion
 //#region src/dimension-scale/DimensionBar.tsx
-const MAX_RENDER_PX$1 = 480;
 const styles$1 = {
 	bar: {
 		height: 14,
@@ -1530,24 +1390,13 @@ const styles$1 = {
 		minHeight: 1
 	}
 };
-function toPixels$1(raw) {
-	if (raw == null || typeof raw !== "object") return NaN;
-	const v = raw;
-	if (typeof v.value !== "number" || typeof v.unit !== "string") return NaN;
-	switch (v.unit) {
-		case "px": return v.value;
-		case "rem":
-		case "em": return v.value * 16;
-		default: return NaN;
-	}
-}
 function DimensionBar({ path, visual = "length" }) {
 	const project = useProject();
 	const { resolved } = project;
 	const cssVar = resolveCssVar(path, project);
 	const token = resolved[path];
-	const pxValue = toPixels$1(token?.$value);
-	const cappedValue = Number.isFinite(pxValue) && pxValue > MAX_RENDER_PX$1 ? `${MAX_RENDER_PX$1}px` : cssVar;
+	const pxValue = toPixels(token?.$value);
+	const cappedValue = Number.isFinite(pxValue) && pxValue > 480 ? `480px` : cssVar;
 	switch (visual) {
 		case "radius": return /* @__PURE__ */ jsx("div", {
 			style: {
@@ -1593,7 +1442,7 @@ function formatTokenValue(value, $type, colorFormat, listingEntry) {
 	switch ($type) {
 		case "color": return formatColor(value, colorFormat).value;
 		case "dimension":
-		case "duration": return formatDimension$1(value);
+		case "duration": return formatDimension(value);
 		case "fontFamily": return formatFontFamily$1(value);
 		case "fontWeight":
 		case "lineHeight":
@@ -1607,7 +1456,7 @@ function formatTokenValue(value, $type, colorFormat, listingEntry) {
 		default: return formatUnknown(value);
 	}
 }
-function formatDimension$1(v) {
+function formatDimension(v) {
 	if (typeof v === "string" || typeof v === "number") return String(v);
 	if (v && typeof v === "object") {
 		const d = v;
@@ -1636,7 +1485,7 @@ function formatStrokeStyle(v) {
 	if (v && typeof v === "object") {
 		const s = v;
 		const parts = ["dashed"];
-		if (Array.isArray(s.dashArray)) parts.push(s.dashArray.map((n) => formatDimension$1(n)).join(" "));
+		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(" · ");
 	}
@@ -1647,10 +1496,10 @@ function formatShadow(v, colorFormat) {
 		if (!layer || typeof layer !== "object") return formatUnknown(layer);
 		const s = layer;
 		const pieces = [
-			formatDimension$1(s.offsetX),
-			formatDimension$1(s.offsetY),
-			formatDimension$1(s.blur),
-			formatDimension$1(s.spread),
+			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");
@@ -1661,7 +1510,7 @@ function formatBorder(v, colorFormat) {
 	if (!v || typeof v !== "object") return formatUnknown(v);
 	const b = v;
 	return [
-		formatDimension$1(b.width),
+		formatDimension(b.width),
 		formatPrimitive$1(b.style),
 		formatColor(b.color, colorFormat).value
 	].filter((p) => p !== "").join(" ");
@@ -1677,18 +1526,6 @@ function formatUnknown(v) {
 }
 //#endregion
 //#region src/DimensionScale.tsx
-const MAX_RENDER_PX = 480;
-function toPixels(raw) {
-	if (raw == null || typeof raw !== "object") return NaN;
-	const v = raw;
-	if (typeof v.value !== "number" || typeof v.unit !== "string") return NaN;
-	switch (v.unit) {
-		case "px": return v.value;
-		case "rem":
-		case "em": return v.value * 16;
-		default: return NaN;
-	}
-}
 function DimensionScale({ filter, visual = "length", caption, sortBy = "value", sortDir = "asc" }) {
 	const project = useProject();
 	const { resolved, activeTheme, activeAxes, cssVarPrefix } = project;
@@ -1706,7 +1543,7 @@ function DimensionScale({ filter, visual = "length", caption, sortBy = "value",
 				cssVar: resolveCssVar(path, project),
 				displayValue: formatTokenValue(token.$value, token.$type, "raw", project.listing[path]),
 				pxValue,
-				capped: Number.isFinite(pxValue) && pxValue > MAX_RENDER_PX
+				capped: Number.isFinite(pxValue) && pxValue > 480
 			};
 		});
 	}, [
@@ -1751,7 +1588,7 @@ function DimensionScale({ filter, visual = "length", caption, sortBy = "value",
 						className: "sb-dimension-scale__cap",
 						children: [
 							"capped at ",
-							MAX_RENDER_PX,
+							480,
 							"px"
 						]
 					})]
@@ -1925,14 +1762,10 @@ function asStops(raw) {
 	if (!Array.isArray(raw)) return [];
 	return raw;
 }
-const pct = (n) => `${(n * 100).toFixed(3)}%`;
 function stopCssColor(stop) {
-	const color = stop.color;
-	if (!color || !Array.isArray(color.components) || color.components.length < 3) return "transparent";
-	const [r, g, b] = color.components;
-	if (r === void 0 || g === void 0 || b === void 0) return "transparent";
-	const alpha = color.alpha ?? 1;
-	return alpha === 1 ? `rgb(${pct(r)} ${pct(g)} ${pct(b)})` : `rgb(${pct(r)} ${pct(g)} ${pct(b)} / ${alpha})`;
+	const color = parseColor(stop.color);
+	if (!color) return "transparent";
+	return color.toString();
 }
 function stopKey(path, stop, fallback) {
 	return `${path}|${stop.position ?? fallback}|${stopCssColor(stop)}`;
@@ -2445,27 +2278,13 @@ function ShadowSample({ path }) {
 }
 //#endregion
 //#region src/ShadowPreview.tsx
-function formatDimension(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);
-}
-function formatSubColor(raw, format) {
-	if (raw == null) return "—";
-	return formatColor(raw, format).value;
-}
 function asLayers(raw) {
 	if (Array.isArray(raw)) return raw;
 	if (raw && typeof raw === "object") return [raw];
 	return [];
 }
 function layerKey(path, layer, fallback) {
-	return `${path}|${`${formatDimension(layer.offsetX)},${formatDimension(layer.offsetY)}`}|${formatDimension(layer.blur)}|${formatDimension(layer.spread)}|${fallback}`;
+	return `${path}|${`${formatDimension$1(layer.offsetX)},${formatDimension$1(layer.offsetY)}`}|${formatDimension$1(layer.blur)}|${formatDimension$1(layer.spread)}|${fallback}`;
 }
 function ShadowPreview({ filter, caption, sortBy = "path", sortDir = "asc" }) {
 	const project = useProject();
@@ -2536,9 +2355,9 @@ function ShadowPreview({ filter, caption, sortBy = "path", sortDir = "asc" }) {
 function renderLayer(layer, format) {
 	if (!layer) return [];
 	const entries = [
-		["offset", `${formatDimension(layer.offsetX)} ${formatDimension(layer.offsetY)}`],
-		["blur", formatDimension(layer.blur)],
-		["spread", formatDimension(layer.spread)],
+		["offset", `${formatDimension$1(layer.offsetX)} ${formatDimension$1(layer.offsetY)}`],
+		["blur", formatDimension$1(layer.blur)],
+		["spread", formatDimension$1(layer.spread)],
 		["color", formatSubColor(layer.color, format)]
 	];
 	if (layer.inset) entries.push(["inset", String(layer.inset)]);
@@ -2744,15 +2563,13 @@ function AliasedByRow({ node, depth }) {
 function buildAliasedByTree(rootPath, resolved) {
 	const direct = resolved[rootPath]?.aliasedBy;
 	if (!direct || direct.length === 0) return [];
-	const visited = new Set([rootPath]);
-	return sortPaths(direct).map((p) => walk(p, resolved, visited, 1));
+	return sortPaths(direct).map((p) => walk(p, resolved, new Set([rootPath]), 1));
 }
-function walk(path, resolved, visited, depth) {
-	if (visited.has(path)) return {
+function walk(path, resolved, ancestors, depth) {
+	if (ancestors.has(path)) return {
 		path,
 		children: []
 	};
-	visited.add(path);
 	const parents = resolved[path]?.aliasedBy;
 	if (!parents || parents.length === 0) return {
 		path,
@@ -2763,9 +2580,10 @@ function walk(path, resolved, visited, depth) {
 		children: [],
 		truncated: true
 	};
+	const childAncestors = new Set(ancestors).add(path);
 	return {
 		path,
-		children: sortPaths(parents).map((p) => walk(p, resolved, visited, depth + 1))
+		children: sortPaths(parents).map((p) => walk(p, resolved, childAncestors, depth + 1))
 	};
 }
 function sortPaths(paths) {
@@ -3194,6 +3012,35 @@ function gradientStopKey(stop, fallback) {
 	return `stop|${stop.position ?? fallback}|${JSON.stringify(stop.color)}`;
 }
 //#endregion
+//#region src/token-detail/transition-duration.ts
+/**
+* Numeric duration (ms) the motion preview should animate over for a given
+* token type, read from its resolved `$value`. Lets the sample's toggle loop
+* match the token's real duration instead of a fixed cadence — a long token
+* (say 2s) otherwise reverses mid-move under the old hardcoded interval.
+* Returns `undefined` for types that carry no duration, so the caller can
+* fall back to its default.
+*/
+function transitionDurationMs(type, rawValue) {
+	if (type === "cubicBezier") return 800;
+	if (type === "duration") return parseDurationMs(rawValue);
+	if (type === "transition" && rawValue !== null && typeof rawValue === "object") return parseDurationMs(rawValue.duration);
+}
+function parseDurationMs(v) {
+	if (typeof v === "number") return v;
+	if (typeof v === "string") {
+		const m = /^([\d.]+)(ms|s)?$/.exec(v.trim());
+		if (!m?.[1]) return void 0;
+		const n = Number(m[1]);
+		if (Number.isNaN(n)) return void 0;
+		return m[2] === "s" ? n * 1e3 : n;
+	}
+	if (v !== null && typeof v === "object") {
+		const d = v;
+		if (typeof d.value === "number") return d.unit === "s" ? d.value * 1e3 : d.value;
+	}
+}
+//#endregion
 //#region src/token-detail/CompositePreview.tsx
 const PANGRAM = "Sphinx of black quartz, judge my vow.";
 const STROKE_STYLE_STRINGS = new Set([
@@ -3240,7 +3087,10 @@ function CompositePreviewContent({ type, cssVar, rawValue }) {
 		style: { border: cssVar },
 		"aria-hidden": true
 	});
-	if (type === "transition") return /* @__PURE__ */ jsx(TransitionSample, { transition: cssVar });
+	if (type === "transition") return /* @__PURE__ */ jsx(TransitionSample, {
+		transition: cssVar,
+		durationMs: transitionDurationMs(type, rawValue)
+	});
 	if (type === "dimension") return /* @__PURE__ */ jsx("div", {
 		className: "sb-token-detail__dimension-track",
 		children: /* @__PURE__ */ jsx("div", {
@@ -3249,7 +3099,10 @@ function CompositePreviewContent({ type, cssVar, rawValue }) {
 			"aria-hidden": true
 		})
 	});
-	if (type === "duration") return /* @__PURE__ */ jsx(TransitionSample, { transition: `left ${cssVar} ease` });
+	if (type === "duration") return /* @__PURE__ */ jsx(TransitionSample, {
+		transition: `left ${cssVar} ease`,
+		durationMs: transitionDurationMs(type, rawValue)
+	});
 	if (type === "fontFamily") return /* @__PURE__ */ jsx("div", {
 		className: "sb-token-detail__font-family-sample",
 		style: { fontFamily: cssVar },
@@ -3260,7 +3113,10 @@ function CompositePreviewContent({ type, cssVar, rawValue }) {
 		style: { fontWeight: cssVarAsNumber(cssVar) },
 		children: "Aa"
 	});
-	if (type === "cubicBezier") return /* @__PURE__ */ jsx(TransitionSample, { transition: `left 800ms ${cssVar}` });
+	if (type === "cubicBezier") return /* @__PURE__ */ jsx(TransitionSample, {
+		transition: `left 800ms ${cssVar}`,
+		durationMs: transitionDurationMs(type, rawValue)
+	});
 	if (type === "gradient") return /* @__PURE__ */ jsx("div", {
 		className: "sb-token-detail__gradient-sample",
 		style: { background: `linear-gradient(to right, ${cssVar})` },
@@ -3331,20 +3187,23 @@ function asDashLengths(raw) {
 	}
 	return out;
 }
-function TransitionSample({ transition }) {
+const DEFAULT_LOOP_MS = 1200;
+const MOTION_HOLD_MS = 400;
+function TransitionSample({ transition, durationMs }) {
 	const reduced = usePrefersReducedMotion();
 	const [phase, setPhase] = useState(0);
 	useEffect(() => {
 		if (reduced) return;
+		const loopMs = durationMs === void 0 ? DEFAULT_LOOP_MS : durationMs + MOTION_HOLD_MS;
 		const id = requestAnimationFrame(() => setPhase(1));
 		const loop = window.setInterval(() => {
 			setPhase((p) => p === 0 ? 1 : 0);
-		}, 1200);
+		}, loopMs);
 		return () => {
 			cancelAnimationFrame(id);
 			window.clearInterval(loop);
 		};
-	}, [reduced]);
+	}, [reduced, durationMs]);
 	if (reduced) return /* @__PURE__ */ jsx("div", {
 		className: "sb-token-detail__reduced-motion",
 		children: "Animation suppressed by `prefers-reduced-motion: reduce`."
@@ -3519,6 +3378,7 @@ function TokenUsageSnippet({ path }) {
 function TokenDetail({ path, heading }) {
 	const { token, cssVar, activeTheme, activeAxes, cssVarPrefix } = useTokenDetailData(path);
 	const colorFormat = useColorFormat();
+	const { listing } = useProject();
 	const wrapperAttrs = blockWrapperAttrs(cssVarPrefix, activeAxes);
 	if (!token) return /* @__PURE__ */ jsx("div", {
 		...wrapperAttrs,
@@ -3534,7 +3394,6 @@ function TokenDetail({ path, heading }) {
 			]
 		})
 	});
-	const { listing } = useProject();
 	const isColor = token.$type === "color";
 	const gamut = isColor ? formatColor(token.$value, colorFormat) : null;
 	const value = formatTokenValue(token.$value, token.$type, colorFormat, listing[path]);
@@ -4460,6 +4319,6 @@ function TypographyScale({ filter, sample = "The quick brown fox jumps over the
 	});
 }
 //#endregion
-export { AliasChain, AliasedBy, AxesContext, AxisVariance, BorderPreview, BorderSample, COLOR_FORMATS, ColorFormatContext, ColorPalette, ColorTable, CompositeBreakdown, CompositePreview, ConsumerOutput, Diagnostics, DimensionBar, DimensionScale, FontFamilyPreview, FontWeightScale, GradientPalette, MotionPreview, MotionSample, OpacityScale, ShadowPreview, ShadowSample, StrokeStylePreview, SwatchbookContext, SwatchbookProvider, ThemeContext, TokenDetail, TokenHeader, TokenNavigator, TokenTable, TokenUsageSnippet, TypographyScale, formatColor, useActiveAxes, useActiveTheme, useColorFormat, useOptionalSwatchbookData, useSwatchbookData };
+export { AliasChain, AliasedBy, AxesContext, AxisVariance, BorderPreview, BorderSample, COLOR_FORMATS, ColorFormatContext, ColorPalette, ColorTable, CompositeBreakdown, CompositePreview, ConsumerOutput, Diagnostics, DimensionBar, DimensionScale, FontFamilyPreview, FontWeightScale, GradientPalette, MotionPreview, MotionSample, OpacityScale, ShadowPreview, ShadowSample, StrokeStylePreview, SwatchbookContext, SwatchbookProvider, TOKENS_UPDATED_EVENT, ThemeContext, TokenDetail, TokenHeader, TokenNavigator, TokenTable, TokenUsageSnippet, TypographyScale, formatColor, registerTokenSource, useActiveAxes, useActiveTheme, useChannelGlobals, useColorFormat, useOptionalSwatchbookData, useSwatchbookData, useTokenSnapshot };
 
 //# sourceMappingURL=index.mjs.map