@unpunnyfuns/swatchbook-blocks 0.17.0 → 0.19.0

package/dist/index.d.mts

@@ -84,6 +84,34 @@ interface VirtualTokenShape {
   aliasChain?: readonly string[];
   aliasedBy?: readonly string[];
 }
+/**
+ * Subset of `@terrazzo/plugin-token-listing`'s `ListedToken` that the
+ * snapshot carries. Blocks read `names.css` for the authoritative CSS
+ * variable name and `previewValue` for the display-ready CSS string.
+ * `source.loc` enables "jump to authoring source" affordances.
+ *
+ * Only the fields blocks consume are typed here; the plugin's full shape
+ * lives in `@unpunnyfuns/swatchbook-core`.
+ */
+interface VirtualTokenListingShape {
+  names: Record<string, string>;
+  previewValue?: string | number;
+  source?: {
+    resource: string;
+    loc?: {
+      start: {
+        line: number;
+        column: number;
+        offset: number;
+      };
+      end: {
+        line: number;
+        column: number;
+        offset: number;
+      };
+    };
+  };
+}
 interface VirtualPresetShape {
   name: string;
   axes: Partial<Record<string, string>>;
@@ -106,6 +134,14 @@ interface ProjectSnapshot {
   cssVarPrefix: string;
   diagnostics: readonly VirtualDiagnosticShape[];
   css: string;
+  /**
+   * Path-indexed Token Listing data produced by
+   * `@terrazzo/plugin-token-listing`. Blocks prefer reading authoritative
+   * CSS var names and preview values from here; empty for non-resolver
+   * projects. Treat as enrichment — fall back gracefully when a path is
+   * absent.
+   */
+  listing?: Readonly<Record<string, VirtualTokenListingShape>>;
 }
 /**
  * Context carrying the full {@link ProjectSnapshot}. `null` sentinel lets
@@ -767,5 +803,5 @@ declare function TypographyScale({
   sortDir
 }: TypographyScaleProps): ReactElement;
 //#endregion
-export { AliasChain, type AliasChainProps, AliasedBy, type AliasedByProps, AxesContext, AxisVariance, type AxisVarianceProps, BorderPreview, type BorderPreviewProps, BorderSample, type BorderSampleProps, COLOR_FORMATS, type ColorFormat, ColorFormatContext, ColorPalette, type ColorPaletteProps, ColorTable, type ColorTableProps, CompositeBreakdown, type CompositeBreakdownProps, CompositePreview, type CompositePreviewProps, ConsumerOutput, type ConsumerOutputProps, Diagnostics, type DiagnosticsProps, DimensionBar, type DimensionBarProps, type DimensionKind, DimensionScale, type DimensionScaleProps, FontFamilySample, type FontFamilySampleProps, FontWeightScale, type FontWeightScaleProps, type FormatColorResult, GradientPalette, type GradientPaletteProps, MotionPreview, type MotionPreviewProps, MotionSample, type MotionSampleProps, type MotionSpeed, type NormalizedColor, type ProjectSnapshot, ShadowPreview, type ShadowPreviewProps, ShadowSample, type ShadowSampleProps, StrokeStyleSample, type StrokeStyleSampleProps, SwatchbookContext, SwatchbookProvider, type SwatchbookProviderProps, ThemeContext, TokenDetail, type TokenDetailProps, TokenHeader, type TokenHeaderProps, TokenNavigator, type TokenNavigatorProps, TokenTable, type TokenTableProps, TokenUsageSnippet, type TokenUsageSnippetProps, TypographyScale, type TypographyScaleProps, type VirtualAxisShape as VirtualAxis, type VirtualAxisShape, type VirtualDiagnosticShape as VirtualDiagnostic, type VirtualDiagnosticShape, type VirtualPresetShape as VirtualPreset, type VirtualPresetShape, type VirtualThemeShape as VirtualTheme, type VirtualThemeShape, type VirtualTokenShape as VirtualToken, type VirtualTokenShape, formatColor, useActiveAxes, useActiveTheme, useColorFormat, useOptionalSwatchbookData, useSwatchbookData };
+export { AliasChain, type AliasChainProps, AliasedBy, type AliasedByProps, AxesContext, AxisVariance, type AxisVarianceProps, BorderPreview, type BorderPreviewProps, BorderSample, type BorderSampleProps, COLOR_FORMATS, type ColorFormat, ColorFormatContext, ColorPalette, type ColorPaletteProps, ColorTable, type ColorTableProps, CompositeBreakdown, type CompositeBreakdownProps, CompositePreview, type CompositePreviewProps, ConsumerOutput, type ConsumerOutputProps, Diagnostics, type DiagnosticsProps, DimensionBar, type DimensionBarProps, type DimensionKind, DimensionScale, type DimensionScaleProps, FontFamilySample, type FontFamilySampleProps, FontWeightScale, type FontWeightScaleProps, type FormatColorResult, GradientPalette, type GradientPaletteProps, MotionPreview, type MotionPreviewProps, MotionSample, type MotionSampleProps, type MotionSpeed, type NormalizedColor, type ProjectSnapshot, ShadowPreview, type ShadowPreviewProps, ShadowSample, type ShadowSampleProps, StrokeStyleSample, type StrokeStyleSampleProps, SwatchbookContext, SwatchbookProvider, type SwatchbookProviderProps, ThemeContext, TokenDetail, type TokenDetailProps, TokenHeader, type TokenHeaderProps, TokenNavigator, type TokenNavigatorProps, TokenTable, type TokenTableProps, TokenUsageSnippet, type TokenUsageSnippetProps, TypographyScale, type TypographyScaleProps, type VirtualAxisShape as VirtualAxis, type VirtualAxisShape, type VirtualDiagnosticShape as VirtualDiagnostic, type VirtualDiagnosticShape, type VirtualPresetShape as VirtualPreset, type VirtualPresetShape, type VirtualThemeShape as VirtualTheme, type VirtualThemeShape, type VirtualTokenShape as VirtualToken, type VirtualTokenShape, type VirtualTokenListingShape, formatColor, useActiveAxes, useActiveTheme, useColorFormat, useOptionalSwatchbookData, useSwatchbookData };
 //# sourceMappingURL=index.d.mts.map

package/dist/index.mjs

@@ -2,8 +2,9 @@ import './style.css';
 import Color from "colorjs.io";
 import { Fragment, createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { makeCSSVar } from "@terrazzo/token-tools/css";
 import { addons } from "storybook/preview-api";
-import { axes, css, cssVarPrefix, defaultTheme, diagnostics, presets, themes, themesResolved } from "virtual:swatchbook/tokens";
+import { axes, css, cssVarPrefix, defaultTheme, diagnostics, listing, presets, themes, themesResolved } from "virtual:swatchbook/tokens";
 import { fuzzyFilter } from "@unpunnyfuns/swatchbook-core/fuzzy";
 import cx from "clsx";
 import { analyzeAxisVariance } from "@unpunnyfuns/swatchbook-core/variance";
@@ -355,6 +356,7 @@ let snapshot = {
 	diagnostics,
 	css,
 	cssVarPrefix,
+	listing: listing ?? {},
 	version: 0
 };
 const listeners = /* @__PURE__ */ new Set();
@@ -372,6 +374,7 @@ function ensureSubscribed() {
 			diagnostics: payload.diagnostics ?? snapshot.diagnostics,
 			css: payload.css ?? snapshot.css,
 			cssVarPrefix: payload.cssVarPrefix ?? snapshot.cssVarPrefix,
+			listing: payload.listing ?? snapshot.listing,
 			version: snapshot.version + 1
 		};
 		for (const cb of listeners) cb();
@@ -429,7 +432,8 @@ function snapshotToData(snapshot) {
 		themesResolved: snapshot.themesResolved,
 		resolved: snapshot.themesResolved[snapshot.activeTheme] ?? {},
 		diagnostics: snapshot.diagnostics,
-		cssVarPrefix: snapshot.cssVarPrefix
+		cssVarPrefix: snapshot.cssVarPrefix,
+		listing: snapshot.listing ?? {}
 	};
 }
 /**
@@ -478,12 +482,56 @@ function useVirtualModuleFallback(enabled) {
 		themesResolved: tokens.themesResolved,
 		resolved: tokens.themesResolved[activeTheme] ?? {},
 		diagnostics: tokens.diagnostics,
-		cssVarPrefix: tokens.cssVarPrefix
+		cssVarPrefix: tokens.cssVarPrefix,
+		listing: tokens.listing
 	};
 }
+/**
+* Thin wrapper around Terrazzo's `makeCSSVar` so the block-display surface
+* and `packages/core/src/css.ts`'s emitter share one implementation. Any
+* future naming-policy shift in Terrazzo (casing, unicode, prefix handling)
+* reaches both surfaces at once instead of needing a parallel update here.
+*/
 function makeCssVar(path, prefix) {
-	const tail = path.split(".").map((segment) => segment.replaceAll(/([a-z\d])([A-Z])/g, "$1-$2").toLowerCase()).join("-");
-	return prefix ? `var(--${prefix}-${tail})` : `var(--${tail})`;
+	return prefix ? makeCSSVar(path, {
+		prefix,
+		wrapVar: true
+	}) : makeCSSVar(path, { wrapVar: true });
+}
+/**
+* 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 `makeCssVar` 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 makeCssVar(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);
 }
 /**
 * Match a dot-separated DTCG token path against a block `filter` prop.
@@ -519,8 +567,7 @@ const sampleStyle$1 = {
 	borderRadius: 6
 };
 function BorderSample({ path }) {
-	const { cssVarPrefix } = useProject();
-	const cssVar = makeCssVar(path, cssVarPrefix);
+	const cssVar = resolveCssVar(path, useProject());
 	return /* @__PURE__ */ jsx("div", {
 		style: {
 			...sampleStyle$1,
@@ -694,7 +741,8 @@ function formatSubColor$1(raw, format) {
 	return formatColor(raw, format).value;
 }
 function BorderPreview({ filter, caption, sortBy = "path", sortDir = "asc" }) {
-	const { resolved, activeTheme, cssVarPrefix } = useProject();
+	const project = useProject();
+	const { resolved, activeTheme, cssVarPrefix } = project;
 	const colorFormat = useColorFormat();
 	const rows = useMemo(() => {
 		return sortTokens(Object.entries(resolved).filter(([path, token]) => {
@@ -705,13 +753,13 @@ function BorderPreview({ filter, caption, sortBy = "path", sortDir = "asc" }) {
 			dir: sortDir
 		}).map(([path, token]) => ({
 			path,
-			cssVar: makeCssVar(path, cssVarPrefix),
+			cssVar: resolveCssVar(path, project),
 			value: token.$value ?? {}
 		}));
 	}, [
 		resolved,
 		filter,
-		cssVarPrefix,
+		project,
 		sortBy,
 		sortDir
 	]);
@@ -786,7 +834,8 @@ function fixedPrefixLength(filter) {
 	return fixed;
 }
 function ColorPalette({ filter, groupBy, caption, sortBy = "path", sortDir = "asc" }) {
-	const { resolved, activeTheme, cssVarPrefix } = useProject();
+	const project = useProject();
+	const { resolved, activeTheme, cssVarPrefix } = project;
 	const colorFormat = useColorFormat();
 	const groups = useMemo(() => {
 		const entries = sortTokens(Object.entries(resolved).filter(([path, token]) => {
@@ -804,11 +853,11 @@ function ColorPalette({ filter, groupBy, caption, sortBy = "path", sortDir = "as
 			const groupKey = segments.slice(0, effectiveGroupBy).join(".");
 			const leaf = segments.slice(effectiveGroupBy).join(".") || segments.at(-1) || path;
 			const list = bucket.get(groupKey) ?? [];
-			const formatted = formatColor(token.$value, colorFormat);
+			const formatted = resolveColorValue(path, token.$value, colorFormat, project);
 			list.push({
 				path,
 				leaf,
-				cssVar: makeCssVar(path, cssVarPrefix),
+				cssVar: resolveCssVar(path, project),
 				value: formatted.value,
 				outOfGamut: formatted.outOfGamut
 			});
@@ -819,7 +868,7 @@ function ColorPalette({ filter, groupBy, caption, sortBy = "path", sortDir = "as
 		resolved,
 		filter,
 		groupBy,
-		cssVarPrefix,
+		project,
 		colorFormat,
 		sortBy,
 		sortDir
@@ -924,7 +973,8 @@ function CopyButton$1({ value, label, variant = "icon", className }) {
 const BASE_LABEL = "base";
 const COLUMN_COUNT = 6;
 function ColorTable({ filter, caption, sortBy = "path", sortDir = "asc", searchable = true, onSelect, variants }) {
-	const { resolved, activeTheme, cssVarPrefix } = useProject();
+	const project = useProject();
+	const { resolved, activeTheme, cssVarPrefix } = project;
 	const colorFormat = useColorFormat();
 	const [query, setQuery] = useState("");
 	const [selectedByBase, setSelectedByBase] = useState({});
@@ -941,7 +991,7 @@ function ColorTable({ filter, caption, sortBy = "path", sortDir = "asc", searcha
 		const groupMap = /* @__PURE__ */ new Map();
 		for (const [path, token] of sorted) {
 			const raw = token.$value;
-			const hex = formatColor(raw, "hex");
+			const hex = resolveColorValue(path, raw, "hex", project);
 			const hsl = formatColor(raw, "hsl");
 			const oklch = formatColor(raw, "oklch");
 			const active = pickActiveFormat(raw, colorFormat, hex, hsl, oklch);
@@ -949,7 +999,7 @@ function ColorTable({ filter, caption, sortBy = "path", sortDir = "asc", searcha
 			const variant = {
 				label: match?.label ?? BASE_LABEL,
 				path,
-				cssVar: makeCssVar(path, cssVarPrefix),
+				cssVar: resolveCssVar(path, project),
 				value: active.value,
 				outOfGamut: active.outOfGamut,
 				hex: hex.value,
@@ -981,7 +1031,7 @@ function ColorTable({ filter, caption, sortBy = "path", sortDir = "asc", searcha
 	}, [
 		resolved,
 		filter,
-		cssVarPrefix,
+		project,
 		sortBy,
 		sortDir,
 		defs,
@@ -1512,8 +1562,9 @@ function toPixels$1(raw) {
 	}
 }
 function DimensionBar({ path, kind = "length" }) {
-	const { resolved, cssVarPrefix } = useProject();
-	const cssVar = makeCssVar(path, cssVarPrefix);
+	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;
@@ -1564,9 +1615,15 @@ function DimensionBar({ path, kind = "length" }) {
 *
 * Unknown object shapes fall through to truncated JSON.
 */
-function formatTokenValue(value, $type, colorFormat) {
+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" ? preview : String(preview);
+		if ($type !== "color") return previewStr;
+		if (colorFormat === "hex") return previewStr;
+	}
 	switch ($type) {
 		case "color": return formatColor(value, colorFormat).value;
 		case "dimension":
@@ -1696,7 +1753,8 @@ function toPixels(raw) {
 	}
 }
 function DimensionScale({ filter, kind = "length", caption, sortBy = "value", sortDir = "asc" }) {
-	const { resolved, activeTheme, cssVarPrefix } = useProject();
+	const project = useProject();
+	const { resolved, activeTheme, cssVarPrefix } = project;
 	const rows = useMemo(() => {
 		return sortTokens(Object.entries(resolved).filter(([path, token]) => {
 			if (token.$type !== "dimension") return false;
@@ -1708,8 +1766,8 @@ function DimensionScale({ filter, kind = "length", caption, sortBy = "value", so
 			const pxValue = toPixels(token.$value);
 			return {
 				path,
-				cssVar: makeCssVar(path, cssVarPrefix),
-				displayValue: formatTokenValue(token.$value, token.$type, "raw"),
+				cssVar: resolveCssVar(path, project),
+				displayValue: formatTokenValue(token.$value, token.$type, "raw", project.listing[path]),
 				pxValue,
 				capped: Number.isFinite(pxValue) && pxValue > MAX_RENDER_PX
 			};
@@ -1717,7 +1775,7 @@ function DimensionScale({ filter, kind = "length", caption, sortBy = "value", so
 	}, [
 		resolved,
 		filter,
-		cssVarPrefix,
+		project,
 		sortBy,
 		sortDir
 	]);
@@ -1777,7 +1835,8 @@ function stackString(raw) {
 	return "";
 }
 function FontFamilySample({ filter, sample = "The quick brown fox jumps over the lazy dog.", caption, sortBy = "path", sortDir = "asc" }) {
-	const { resolved, activeTheme, cssVarPrefix } = useProject();
+	const project = useProject();
+	const { resolved, activeTheme, cssVarPrefix } = project;
 	const rows = useMemo(() => {
 		return sortTokens(Object.entries(resolved).filter(([path, token]) => {
 			if (token.$type !== "fontFamily") return false;
@@ -1787,13 +1846,13 @@ function FontFamilySample({ filter, sample = "The quick brown fox jumps over the
 			dir: sortDir
 		}).map(([path, token]) => ({
 			path,
-			cssVar: makeCssVar(path, cssVarPrefix),
+			cssVar: resolveCssVar(path, project),
 			stack: stackString(token.$value)
 		}));
 	}, [
 		resolved,
 		filter,
-		cssVarPrefix,
+		project,
 		sortBy,
 		sortDir
 	]);
@@ -1847,7 +1906,8 @@ function toWeight(raw) {
 	return NaN;
 }
 function FontWeightScale({ filter, sample = "Aa", caption, sortBy = "value", sortDir = "asc" }) {
-	const { resolved, activeTheme, cssVarPrefix } = useProject();
+	const project = useProject();
+	const { resolved, activeTheme, cssVarPrefix } = project;
 	const rows = useMemo(() => {
 		return sortTokens(Object.entries(resolved).filter(([path, token]) => {
 			if (token.$type !== "fontWeight") return false;
@@ -1857,14 +1917,14 @@ function FontWeightScale({ filter, sample = "Aa", caption, sortBy = "value", sor
 			dir: sortDir
 		}).map(([path, token]) => ({
 			path,
-			cssVar: makeCssVar(path, cssVarPrefix),
+			cssVar: resolveCssVar(path, project),
 			display: token.$value == null ? "" : String(token.$value),
 			weight: toWeight(token.$value)
 		}));
 	}, [
 		resolved,
 		filter,
-		cssVarPrefix,
+		project,
 		sortBy,
 		sortDir
 	]);
@@ -1926,7 +1986,8 @@ function stopKey(path, stop, fallback) {
 	return `${path}|${stop.position ?? fallback}|${stopCssColor(stop)}`;
 }
 function GradientPalette({ filter, caption, sortBy = "path", sortDir = "asc" }) {
-	const { resolved, activeTheme, cssVarPrefix } = useProject();
+	const project = useProject();
+	const { resolved, activeTheme, cssVarPrefix } = project;
 	const colorFormat = useColorFormat();
 	const rows = useMemo(() => {
 		return sortTokens(Object.entries(resolved).filter(([path, token]) => {
@@ -1937,13 +1998,13 @@ function GradientPalette({ filter, caption, sortBy = "path", sortDir = "asc" })
 			dir: sortDir
 		}).map(([path, token]) => ({
 			path,
-			cssVar: makeCssVar(path, cssVarPrefix),
+			cssVar: resolveCssVar(path, project),
 			stops: asStops(token.$value)
 		}));
 	}, [
 		resolved,
 		filter,
-		cssVarPrefix,
+		project,
 		sortBy,
 		sortDir
 	]);
@@ -2174,7 +2235,8 @@ function formatSpec(row) {
 	}
 }
 function MotionPreview({ filter, caption }) {
-	const { resolved, activeTheme, cssVarPrefix } = useProject();
+	const project = useProject();
+	const { resolved, activeTheme, cssVarPrefix } = project;
 	const [speed, setSpeed] = useState(1);
 	const [run, setRun] = useState(0);
 	const reducedMotion = usePrefersReducedMotion();
@@ -2193,7 +2255,7 @@ function MotionPreview({ filter, caption }) {
 			if (!spec) continue;
 			collected.push({
 				path,
-				cssVar: makeCssVar(path, cssVarPrefix),
+				cssVar: resolveCssVar(path, project),
 				durationMs: spec.durationMs,
 				easing: spec.easing,
 				kind
@@ -2207,7 +2269,7 @@ function MotionPreview({ filter, caption }) {
 	}, [
 		resolved,
 		filter,
-		cssVarPrefix
+		project
 	]);
 	const captionText = caption ?? `${rows.length} motion token${rows.length === 1 ? "" : "s"}${filter ? ` matching \`${filter}\`` : ""} · ${activeTheme}`;
 	if (rows.length === 0) return /* @__PURE__ */ jsx("div", {
@@ -2311,8 +2373,7 @@ const sampleStyle = {
 	borderRadius: 6
 };
 function ShadowSample({ path }) {
-	const { cssVarPrefix } = useProject();
-	const cssVar = makeCssVar(path, cssVarPrefix);
+	const cssVar = resolveCssVar(path, useProject());
 	return /* @__PURE__ */ jsx("div", {
 		style: {
 			...sampleStyle,
@@ -2346,7 +2407,8 @@ function layerKey(path, layer, fallback) {
 	return `${path}|${`${formatDimension(layer.offsetX)},${formatDimension(layer.offsetY)}`}|${formatDimension(layer.blur)}|${formatDimension(layer.spread)}|${fallback}`;
 }
 function ShadowPreview({ filter, caption, sortBy = "path", sortDir = "asc" }) {
-	const { resolved, activeTheme, cssVarPrefix } = useProject();
+	const project = useProject();
+	const { resolved, activeTheme, cssVarPrefix } = project;
 	const colorFormat = useColorFormat();
 	const rows = useMemo(() => {
 		return sortTokens(Object.entries(resolved).filter(([path, token]) => {
@@ -2357,13 +2419,13 @@ function ShadowPreview({ filter, caption, sortBy = "path", sortDir = "asc" }) {
 			dir: sortDir
 		}).map(([path, token]) => ({
 			path,
-			cssVar: makeCssVar(path, cssVarPrefix),
+			cssVar: resolveCssVar(path, project),
 			layers: asLayers(token.$value)
 		}));
 	}, [
 		resolved,
 		filter,
-		cssVarPrefix,
+		project,
 		sortBy,
 		sortDir
 	]);
@@ -2458,7 +2520,8 @@ function extractCssStyle(value) {
 	return null;
 }
 function StrokeStyleSample({ filter, caption, sortBy = "path", sortDir = "asc" }) {
-	const { resolved, activeTheme, cssVarPrefix } = useProject();
+	const project = useProject();
+	const { resolved, activeTheme, cssVarPrefix } = project;
 	const rows = useMemo(() => {
 		return sortTokens(Object.entries(resolved).filter(([path, token]) => {
 			if (token.$type !== "strokeStyle") return false;
@@ -2468,14 +2531,14 @@ function StrokeStyleSample({ filter, caption, sortBy = "path", sortDir = "asc" }
 			dir: sortDir
 		}).map(([path, token]) => ({
 			path,
-			cssVar: makeCssVar(path, cssVarPrefix),
-			displayValue: formatTokenValue(token.$value, token.$type, "raw"),
+			cssVar: resolveCssVar(path, project),
+			displayValue: formatTokenValue(token.$value, token.$type, "raw", project.listing[path]),
 			cssStyle: extractCssStyle(token.$value)
 		}));
 	}, [
 		resolved,
 		filter,
-		cssVarPrefix,
+		project,
 		sortBy,
 		sortDir
 	]);
@@ -2524,11 +2587,12 @@ function StrokeStyleSample({ filter, caption, sortBy = "path", sortDir = "asc" }
 //#endregion
 //#region src/token-detail/internal.ts
 function useTokenDetailData(path) {
-	const { activeTheme, activeAxes, axes, themes, themesResolved, resolved, cssVarPrefix } = useProject();
+	const project = useProject();
+	const { activeTheme, activeAxes, axes, themes, themesResolved, resolved, cssVarPrefix } = project;
 	const typedResolved = resolved;
 	return {
 		token: typedResolved[path],
-		cssVar: makeCssVar(path, cssVarPrefix),
+		cssVar: resolveCssVar(path, project),
 		activeTheme,
 		activeAxes,
 		axes,
@@ -3262,8 +3326,11 @@ function TransitionSample({ transition }) {
 //#region src/token-detail/ConsumerOutput.tsx
 function ConsumerOutput({ path }) {
 	const { token, cssVar, activeAxes } = useTokenDetailData(path);
+	const { listing } = useProject();
 	if (!token) return null;
 	const tupleLabel = Object.entries(activeAxes).map(([k, v]) => `${k}=${v}`).join(", ");
+	const names = listing[path]?.names ?? {};
+	const extraPlatforms = Object.keys(names).filter((platform) => platform !== "css" && names[platform]).toSorted();
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
 		/* @__PURE__ */ jsx("div", {
 			className: "sb-token-detail__section-header",
@@ -3282,9 +3349,18 @@ function ConsumerOutput({ path }) {
 			label: "CSS",
 			value: cssVar,
 			testId: "consumer-output-css"
-		})
+		}),
+		extraPlatforms.map((platform) => /* @__PURE__ */ jsx(OutputRow, {
+			label: formatPlatformLabel(platform),
+			value: names[platform],
+			testId: `consumer-output-${platform}`
+		}, platform))
 	] });
 }
+function formatPlatformLabel(platform) {
+	if (platform.length === 0) return platform;
+	return platform[0].toUpperCase() + platform.slice(1);
+}
 function OutputRow({ label, value, testId }) {
 	return /* @__PURE__ */ jsxs("div", {
 		className: "sb-token-detail__consumer-row",
@@ -3402,9 +3478,10 @@ 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);
+	const value = formatTokenValue(token.$value, token.$type, colorFormat, listing[path]);
 	const outOfGamut = gamut?.outOfGamut ?? false;
 	return /* @__PURE__ */ jsxs("div", {
 		...theme,
@@ -3787,16 +3864,16 @@ function LeafRow({ node, onLeafClick }) {
 	});
 }
 function LeafPreview({ path, token }) {
-	const { cssVarPrefix } = useProject();
+	const project = useProject();
 	const colorFormat = useColorFormat();
 	const type = token.$type;
 	if (type === "color") {
-		const cssVar = makeCssVar(path, cssVarPrefix);
+		const cssVar = resolveCssVar(path, project);
 		return /* @__PURE__ */ jsxs("span", {
 			className: "sb-token-navigator__preview-box",
 			children: [/* @__PURE__ */ jsx("span", {
 				className: "sb-token-navigator__value",
-				children: formatTokenValue(token.$value, type, colorFormat)
+				children: formatTokenValue(token.$value, type, colorFormat, project.listing[path])
 			}), /* @__PURE__ */ jsx("span", {
 				className: "sb-token-navigator__color-swatch",
 				style: { background: cssVar },
@@ -3808,7 +3885,7 @@ 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)
+			children: formatTokenValue(token.$value, type, colorFormat, project.listing[path])
 		}), /* @__PURE__ */ jsx("span", {
 			className: "sb-token-navigator__preview-dimension",
 			children: /* @__PURE__ */ jsx(DimensionBar, {
@@ -3842,14 +3919,15 @@ 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)
+			children: formatTokenValue(token.$value, type, colorFormat, project.listing[path])
 		})
 	});
 }
 //#endregion
 //#region src/TokenTable.tsx
 function TokenTable({ filter, type, caption, sortBy = "path", sortDir = "asc", searchable = true, onSelect }) {
-	const { resolved, activeTheme, cssVarPrefix } = useProject();
+	const project = useProject();
+	const { resolved, activeTheme, cssVarPrefix } = project;
 	const colorFormat = useColorFormat();
 	const [selectedPath, setSelectedPath] = useState(null);
 	const [query, setQuery] = useState("");
@@ -3863,13 +3941,13 @@ function TokenTable({ filter, type, caption, sortBy = "path", sortDir = "asc", s
 			dir: sortDir
 		}).map(([path, token]) => {
 			const isColor = token.$type === "color";
-			const color = isColor ? formatColor(token.$value, colorFormat) : null;
+			const color = isColor ? resolveColorValue(path, token.$value, colorFormat, project) : null;
 			return {
 				path,
 				type: token.$type ?? "",
-				value: formatTokenValue(token.$value, token.$type, colorFormat),
+				value: formatTokenValue(token.$value, token.$type, colorFormat, project.listing[path]),
 				outOfGamut: color?.outOfGamut ?? false,
-				cssVar: makeCssVar(path, cssVarPrefix),
+				cssVar: resolveCssVar(path, project),
 				isColor
 			};
 		});
@@ -3877,7 +3955,7 @@ function TokenTable({ filter, type, caption, sortBy = "path", sortDir = "asc", s
 		resolved,
 		filter,
 		type,
-		cssVarPrefix,
+		project,
 		colorFormat,
 		sortBy,
 		sortDir