@unpunnyfuns/swatchbook-blocks 1.2.0 → 2.0.0

package/dist/host-e2nSv-sA.mjs

@@ -0,0 +1,791 @@
+import './style.css';
+import { COLOR_FORMATS } from "@unpunnyfuns/swatchbook-core/color-formats";
+import { formatColor } from "@unpunnyfuns/swatchbook-core/format-color";
+import { createContext, useContext, useEffect, useState, useSyncExternalStore } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { formatTokenValue } from "@unpunnyfuns/swatchbook-core/token-value-css";
+import cx from "clsx";
+//#region src/internal/value-to-css.ts
+/**
+* Formats a DTCG dimension-shaped raw value (`number`, pre-formatted
+* string, or `{ value, unit }`) as a CSS length. Shared by the border and
+* shadow presenters, whose `$value` shapes both carry raw dimension fields.
+*/
+function formatLength(raw) {
+	if (typeof raw === "number") return `${raw}px`;
+	if (typeof raw === "string") return raw;
+	if (raw && typeof raw === "object") {
+		const v = raw;
+		if (typeof v.value === "number" && typeof v.unit === "string") return `${v.value}${v.unit}`;
+	}
+	return "0px";
+}
+/**
+* Maps a display `ColorFormat` to one CSS can actually render as a color
+* value. `raw` renders a JSON debug string (core's `formatColor`), which
+* isn't valid CSS: the border and shadow presenters substitute `hex` for
+* that one format so the swatch still paints; every other format
+* (rgb/hsl/oklch/hex) is already valid CSS.
+*/
+function cssColorFormat(format) {
+	return format === "raw" ? "hex" : format;
+}
+//#endregion
+//#region src/border-preview/BorderSample.tsx
+/** 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
+	});
+}
+/**
+* Builds a valid `border` shorthand value straight from a realised
+* `border.$value`. Distinct from core's `formatTokenValue`, whose `raw`
+* color branch emits a display-only JSON string that the browser would
+* reject as a border color.
+*/
+function borderValueToCss(value, colorFormat) {
+	if (!value || typeof value !== "object") return "";
+	return [
+		formatLength(value.width),
+		typeof value.style === "string" ? value.style : "solid",
+		formatColor(value.color, cssColorFormat(colorFormat)).value
+	].join(" ");
+}
+function BorderSample({ token, cssVar, colorFormat }) {
+	return /* @__PURE__ */ jsx(BorderSampleView, { cssVar: cssVar ?? borderValueToCss(token.$value, colorFormat) });
+}
+//#endregion
+//#region src/presenters/ColorSwatch.tsx
+function leafOf(path) {
+	return path.split(".").at(-1) ?? path;
+}
+/**
+* Presenter for `$type: color` tokens: a color chip, leaf label, and
+* formatted value with an out-of-gamut marker. The chip's background is
+* `cssVar` when supplied (R3); otherwise it is computed straight from
+* `token.$value`, with `raw` guarded to `hex` (`cssColorFormat`) so the chip
+* always paints a real color even when the display format is a JSON debug
+* string. The value text below the chip uses the actual `colorFormat`,
+* `raw` included. `options.label` lets a grouped consumer (e.g.
+* `ColorPalette`) supply a group-relative label instead of the bare leaf
+* segment, so context lost to grouping (`blue` in `color.palette.blue.50`)
+* still reads on the swatch; standalone usage falls back to `leafOf(path)`.
+*/
+function ColorSwatch({ path, token, cssVar, colorFormat, options }) {
+	const chipBackground = cssVar ?? formatColor(token.$value, cssColorFormat(colorFormat)).value;
+	const { value, outOfGamut } = formatColor(token.$value, colorFormat);
+	const label = typeof options?.["label"] === "string" ? options["label"] : leafOf(path);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "sb-color-swatch",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "sb-color-swatch__chip",
+			style: { background: chipBackground },
+			"aria-hidden": true
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "sb-color-swatch__meta",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "sb-color-swatch__leaf",
+				children: label
+			}), /* @__PURE__ */ jsxs("span", {
+				className: "sb-color-swatch__value",
+				children: [value, outOfGamut && /* @__PURE__ */ jsxs("span", {
+					title: "Out of sRGB gamut for this format",
+					"aria-label": "out of gamut",
+					className: "sb-color-swatch__gamut-warn",
+					children: [" ", "⚠"]
+				})]
+			})]
+		})]
+	});
+}
+//#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$1(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$1, readRootFontSize, () => 16);
+}
+//#endregion
+//#region src/dimension-scale/DimensionSample.tsx
+function asDimensionVisual(raw) {
+	return raw === "length" || raw === "radius" || raw === "size" ? raw : "length";
+}
+/**
+* Pure derivation of a single dimension token's sample geometry from its
+* realised `$value`. The cap decision always reads the numeric `$value` (so
+* it holds regardless of whether `cssVar` is present); `cssVar`, when given,
+* wins as the rendered value up to that cap.
+*/
+function deriveDimensionSample(props, rootFontSizePx) {
+	const realised = formatTokenValue(props.token.$value, "dimension", props.colorFormat);
+	const cssVar = props.cssVar ?? realised;
+	const pxValue = toPixels(props.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: renders a realised dimension token's sample, capped for oversized values. */
+function DimensionSample({ token, cssVar, colorFormat, options }) {
+	const visual = asDimensionVisual(options?.["visual"]);
+	const rootFontSize = useRootFontSize();
+	const derived = deriveDimensionSample({
+		token,
+		cssVar,
+		colorFormat
+	}, rootFontSize);
+	return /* @__PURE__ */ jsx(DimensionSampleView, {
+		cssVar: derived.cssVar,
+		capped: derived.capped,
+		cappedValue: derived.cappedValue,
+		visual
+	});
+}
+//#endregion
+//#region src/presenters/FontFamilySpecimen.tsx
+const DEFAULT_SAMPLE$2 = "The quick brown fox jumps over the lazy dog.";
+function stackString(raw) {
+	if (typeof raw === "string") return raw;
+	if (Array.isArray(raw)) return raw.map(String).join(", ");
+	return "";
+}
+/**
+* Presenter for `$type: fontFamily` tokens: path, resolved stack, a sample
+* line styled per R3, and the css var in use.
+*/
+function FontFamilySpecimen({ path, token, cssVar, options }) {
+	const rawSample = options?.["sample"];
+	const sample = typeof rawSample === "string" ? rawSample : DEFAULT_SAMPLE$2;
+	const stack = stackString(token.$value);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "sb-font-family-specimen__row",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "sb-font-family-specimen__meta",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "sb-font-family-specimen__path",
+					children: path
+				}), /* @__PURE__ */ jsx("span", {
+					className: "sb-font-family-specimen__stack",
+					children: stack
+				})]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "sb-font-family-specimen__sample",
+				style: { fontFamily: cssVar ?? stack },
+				children: sample
+			}),
+			cssVar && /* @__PURE__ */ jsx("span", {
+				className: "sb-font-family-specimen__css-var",
+				children: cssVar
+			})
+		]
+	});
+}
+//#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/presenters/FontWeightSpecimen.tsx
+const DEFAULT_SAMPLE$1 = "Aa";
+/**
+* Presenter for `$type: fontWeight` tokens: path, the raw weight value, a
+* sample glyph styled per R3, and the css var in use.
+*/
+function FontWeightSpecimen({ path, token, cssVar, options }) {
+	const rawSample = options?.["sample"];
+	const sample = typeof rawSample === "string" ? rawSample : DEFAULT_SAMPLE$1;
+	const display = token.$value == null ? "" : String(token.$value);
+	const sampleStyle = { fontWeight: cssVar ? cssVarAsNumber(cssVar) : display };
+	return /* @__PURE__ */ jsxs("div", {
+		className: "sb-font-weight-specimen__row",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "sb-font-weight-specimen__meta",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "sb-font-weight-specimen__path",
+					children: path
+				}), /* @__PURE__ */ jsx("span", {
+					className: "sb-font-weight-specimen__value",
+					children: display
+				})]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "sb-font-weight-specimen__sample",
+				style: sampleStyle,
+				children: sample
+			}),
+			cssVar && /* @__PURE__ */ jsx("span", {
+				className: "sb-font-weight-specimen__css-var",
+				children: cssVar
+			})
+		]
+	});
+}
+//#endregion
+//#region src/presenters/GradientSwatch.tsx
+/**
+* Builds a valid `linear-gradient()` value straight from a realised
+* `gradient.$value` stop list. Distinct from core's `formatTokenValue`,
+* whose `raw` color branch emits a display-only JSON string per stop that
+* the browser would reject as a gradient color.
+*/
+function gradientValueToCss(stops, colorFormat) {
+	const format = cssColorFormat(colorFormat);
+	return `linear-gradient(90deg, ${stops.map((stop) => {
+		return `${formatColor(stop.color, format).value} ${((typeof stop.position === "number" ? stop.position : 0) * 100).toFixed(0)}%`;
+	}).join(", ")})`;
+}
+/**
+* Presenter for `$type: gradient` tokens: a gradient chip. Unlike the
+* other composite presenters, a gradient's css var (per Terrazzo's
+* `transformGradient`) resolves to a bare `<color> <pct>, ...` stop list,
+* not a complete property value: DTCG gradients carry no direction, so
+* both branches need one supplied at render time. `90deg` (`to right`)
+* matches the direction the standalone block previously hard-coded.
+*/
+function GradientSwatch({ token, cssVar, colorFormat }) {
+	const stops = Array.isArray(token.$value) ? token.$value : [];
+	return /* @__PURE__ */ jsx("div", {
+		className: "sb-gradient-swatch__chip",
+		style: { background: cssVar ? `linear-gradient(90deg, ${cssVar})` : gradientValueToCss(stops, colorFormat) },
+		"aria-hidden": true
+	});
+}
+//#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;
+}
+/**
+* Extracts a duration/easing `Spec` from a token's `$value`, dispatching on
+* `$type` (`transition` / `duration` / `cubicBezier`). `themeTokens` backs
+* `{path}`-form sub-value alias resolution for callers still walking a raw
+* (not-yet-realised) project map; pass `{}` when `token` is already a
+* realised leaf (no alias strings survive resolution).
+*/
+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 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
+		})
+	});
+}
+/**
+* Connected block: renders a realised motion token's animated sample. Both
+* `durationMs` and `easing` come from the realised `$value`; the ball's
+* setInterval loop needs a JS-readable duration, and (see the comment below)
+* `cssVar` cannot stand in for `easing` here. `cssVar` is still accepted, per
+* the uniform `PresenterProps` contract every presenter shares, but this
+* View has nowhere safe to apply it.
+*/
+function MotionSample({ token, cssVar: _cssVar, options }) {
+	const rawSpeed = options?.["speed"];
+	const speed = typeof rawSpeed === "number" ? rawSpeed : 1;
+	const rawRunKey = options?.["runKey"];
+	const runKey = typeof rawRunKey === "number" ? rawRunKey : 0;
+	return /* @__PURE__ */ jsx(MotionSampleView, {
+		spec: resolveMotionSpec(token, {}),
+		speed,
+		runKey
+	});
+}
+//#endregion
+//#region src/presenters/OpacitySwatch.tsx
+const DEFAULT_SAMPLE_COLOR_VAR = "var(--swatchbook-accent-bg)";
+function opacityValueToCss(value) {
+	return typeof value === "number" ? String(value) : "1";
+}
+/** Pure presentation for a single opacity token's chip. Renders from plain props. */
+function OpacitySwatchView({ opacity, sampleColorVar }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "sb-opacity-swatch",
+		children: /* @__PURE__ */ jsx("div", {
+			className: "sb-opacity-swatch__chip",
+			style: {
+				opacity,
+				background: sampleColorVar
+			},
+			"aria-hidden": true
+		})
+	});
+}
+/**
+* Presenter for `$type: number` opacity tokens: a colored chip over a
+* checkerboard backdrop, with the chip's `opacity` set from the token per
+* R3. The number alone (`0.4`) doesn't convey what the token looks like
+* applied to a surface; the chip does.
+*/
+function OpacitySwatch({ token, cssVar, options }) {
+	const opacity = cssVar ?? opacityValueToCss(token.$value);
+	const rawSampleColorVar = options?.["sampleColorVar"];
+	return /* @__PURE__ */ jsx(OpacitySwatchView, {
+		opacity,
+		sampleColorVar: typeof rawSampleColorVar === "string" ? rawSampleColorVar : DEFAULT_SAMPLE_COLOR_VAR
+	});
+}
+//#endregion
+//#region src/presenters/StrokeSample.tsx
+const STRING_STYLES = new Set([
+	"solid",
+	"dashed",
+	"dotted",
+	"double",
+	"groove",
+	"ridge",
+	"outset",
+	"inset"
+]);
+function isCssStyleKeyword(value) {
+	return typeof value === "string" && STRING_STYLES.has(value);
+}
+/** Pure presentation for a single stroke-style token's line. Renders from plain props. */
+function StrokeSampleView({ cssStyle }) {
+	if (!cssStyle) return /* @__PURE__ */ jsx("span", {
+		className: "sb-stroke-sample__object-fallback",
+		children: "Object-form (dashArray + lineCap) — no pure CSS `border-style` equivalent."
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: "sb-stroke-sample__line",
+		style: { borderTopStyle: cssStyle },
+		"aria-hidden": true
+	});
+}
+/**
+* Presenter for `$type: strokeStyle` tokens: a line styled with the
+* token's `border-top-style` per R3, or the object-form fallback message
+* when `$value` is a dash pattern with no pure CSS equivalent.
+*/
+function StrokeSample({ token, cssVar }) {
+	return /* @__PURE__ */ jsx(StrokeSampleView, { cssStyle: isCssStyleKeyword(token.$value) ? cssVar ?? token.$value : null });
+}
+//#endregion
+//#region src/presenters/TypeSpecimen.tsx
+const DEFAULT_SAMPLE = "The quick brown fox jumps over the lazy dog.";
+function asFontFamily(raw) {
+	if (typeof raw === "string") return raw;
+	if (Array.isArray(raw)) return raw.map(String).join(", ");
+}
+/**
+* Builds the sample's inline style straight from a realised
+* `typography.$value`. `fontSize`/`letterSpacing` share `formatLength` with
+* the border/shadow presenters (same DTCG `{ value, unit }` dimension
+* envelope); `fontWeight`/`lineHeight` are unitless and cast to strings
+* directly.
+*/
+function styleFromValue(value) {
+	const style = {};
+	const fontFamily = asFontFamily(value.fontFamily);
+	if (fontFamily) style.fontFamily = fontFamily;
+	if (value.fontSize != null) style.fontSize = formatLength(value.fontSize);
+	if (value.fontWeight != null) style.fontWeight = String(value.fontWeight);
+	if (value.lineHeight != null) style.lineHeight = String(value.lineHeight);
+	if (value.letterSpacing != null) style.letterSpacing = formatLength(value.letterSpacing);
+	return style;
+}
+function describeValue(value) {
+	return [
+		value.fontSize != null ? formatLength(value.fontSize) : void 0,
+		value.fontWeight != null ? `w${String(value.fontWeight)}` : void 0,
+		value.lineHeight != null ? `lh ${String(value.lineHeight)}` : void 0
+	].filter(Boolean).join(" · ");
+}
+/**
+* Presenter for `$type: typography` tokens: a spec summary and a sample line
+* styled per R3. Token identity (the path) is the consuming block's
+* responsibility, not this presenter's; see `TypographyScale`.
+*/
+function TypeSpecimen({ token, cssVar: _cssVar, options }) {
+	const rawSample = options?.["sample"];
+	const sample = typeof rawSample === "string" ? rawSample : DEFAULT_SAMPLE;
+	const value = token.$value ?? {};
+	const sampleStyle = styleFromValue(value);
+	const specs = describeValue(value);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "sb-type-specimen",
+		children: [specs && /* @__PURE__ */ jsx("span", {
+			className: "sb-type-specimen__description",
+			children: specs
+		}), /* @__PURE__ */ jsx("div", {
+			className: "sb-type-specimen__sample",
+			style: sampleStyle,
+			children: sample
+		})]
+	});
+}
+//#endregion
+//#region src/shadow-preview/ShadowSample.tsx
+/** 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
+	});
+}
+/**
+* Builds a valid `box-shadow` value straight from a realised `shadow.$value`
+* (single layer or array). Distinct from core's `formatTokenValue`, whose
+* `raw` color branch emits a display-only JSON string that the browser
+* would reject as a box-shadow color.
+*/
+function shadowValueToCss(value, colorFormat) {
+	const layers = Array.isArray(value) ? value : [value];
+	const format = cssColorFormat(colorFormat);
+	return layers.map((layer) => {
+		if (!layer || typeof layer !== "object") return "";
+		const s = layer;
+		const pieces = [
+			formatLength(s.offsetX),
+			formatLength(s.offsetY),
+			formatLength(s.blur),
+			formatLength(s.spread),
+			formatColor(s.color, format).value
+		];
+		if (s.inset) pieces.push("inset");
+		return pieces.join(" ");
+	}).filter((layer) => layer !== "").join(", ");
+}
+function ShadowSample({ token, cssVar, colorFormat }) {
+	return /* @__PURE__ */ jsx(ShadowSampleView, { cssVar: cssVar ?? shadowValueToCss(token.$value, colorFormat) });
+}
+//#endregion
+//#region src/presenters/registry.ts
+/**
+* Built-in presenters, keyed by DTCG `$type`. Phase C registers each entry as
+* its presenter lands. A consumer's `presenters` override merges over this.
+*/
+const DEFAULT_PRESENTERS = {
+	color: ColorSwatch,
+	shadow: ShadowSample,
+	border: BorderSample,
+	dimension: DimensionSample,
+	gradient: GradientSwatch,
+	transition: MotionSample,
+	typography: TypeSpecimen,
+	fontFamily: FontFamilySpecimen,
+	fontWeight: FontWeightSpecimen,
+	number: OpacitySwatch,
+	strokeStyle: StrokeSample
+};
+/** Overrides win per `$type`; unlisted types keep the built-in. */
+function mergePresenters(overrides) {
+	return overrides ? {
+		...DEFAULT_PRESENTERS,
+		...overrides
+	} : DEFAULT_PRESENTERS;
+}
+/** The active merged registry for the subtree. */
+const PresenterContext = createContext(DEFAULT_PRESENTERS);
+let ambientPresenters = DEFAULT_PRESENTERS;
+/**
+* Set the ambient presenter registry consulted by blocks that render with
+* no `SwatchbookProvider` or `PresenterContext.Provider` above them (MDX
+* doc blocks, autodocs). A host registers this once at preview-init; it is
+* NOT reactive, so register before first render. Passing no argument (or
+* `undefined`) resets to the built-ins. An explicit provider/context
+* override still wins for its subtree; this only fills the provider-less
+* gap.
+*/
+function registerPresenters(overrides) {
+	ambientPresenters = mergePresenters(overrides);
+}
+/** The presenter for `type`, or `undefined` if none is registered. */
+function usePresenter(type) {
+	const ctx = useContext(PresenterContext);
+	return (ctx === DEFAULT_PRESENTERS ? ambientPresenters : ctx)[type];
+}
+//#endregion
+//#region src/host.ts
+let source = {
+	axes: [],
+	presets: [],
+	diagnostics: [],
+	css: "",
+	cssVarPrefix: "",
+	indicators: {},
+	listing: {},
+	tokenGraph: {
+		nodes: {},
+		axes: [],
+		axisDefaults: {},
+		axisContexts: {}
+	},
+	defaultTuple: {},
+	defaultColorFormat: "hex",
+	activeAxes: null,
+	version: 0
+};
+const listeners = /* @__PURE__ */ new Set();
+/**
+* Host adapter API. Push a (partial) project snapshot into the ambient
+* store. Omitted fields fall back to the current source, so a host can
+* call this repeatedly with incremental patches (e.g. one per HMR event
+* or axis flip) without re-sending the whole snapshot each time.
+*/
+function registerProjectSource(patch) {
+	source = {
+		axes: patch.axes ?? source.axes,
+		presets: patch.presets ?? source.presets,
+		diagnostics: patch.diagnostics ?? source.diagnostics,
+		css: patch.css ?? source.css,
+		cssVarPrefix: patch.cssVarPrefix ?? source.cssVarPrefix,
+		indicators: patch.indicators ?? source.indicators,
+		listing: patch.listing ?? source.listing,
+		tokenGraph: patch.tokenGraph ?? source.tokenGraph,
+		defaultTuple: patch.defaultTuple ?? source.defaultTuple,
+		defaultColorFormat: patch.defaultColorFormat ?? source.defaultColorFormat,
+		activeAxes: "activeAxes" in patch ? patch.activeAxes ?? null : source.activeAxes,
+		version: source.version + 1
+	};
+	for (const cb of listeners) cb();
+}
+function subscribe(cb) {
+	listeners.add(cb);
+	return () => {
+		listeners.delete(cb);
+	};
+}
+function getSnapshot() {
+	return source;
+}
+function getServerSnapshot() {
+	return source;
+}
+/**
+* Host adapter API. Read the live, ambient project source. Re-renders in
+* place on each {@link registerProjectSource} call.
+*/
+function useProjectSource() {
+	return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+}
+//#endregion
+export { COLOR_FORMATS as C, BorderSample as S, cssVarAsNumber as _, mergePresenters as a, useRootFontSize as b, ShadowSample as c, OpacitySwatch as d, MotionSample as f, FontWeightSpecimen as g, GradientSwatch as h, PresenterContext as i, TypeSpecimen as l, usePrefersReducedMotion as m, useProjectSource as n, registerPresenters as o, resolveMotionSpec as p, DEFAULT_PRESENTERS as r, usePresenter as s, registerProjectSource as t, StrokeSample as u, FontFamilySpecimen as v, formatColor as w, ColorSwatch as x, DimensionSample as y };
+
+//# sourceMappingURL=host-e2nSv-sA.mjs.map