@yahoo/uds-create-config 4.53.2 → 4.55.0

package/dist/entities/system/color.js

@@ -16,9 +16,59 @@ import { z } from "zod";
 * That's also why this isn't a separate entity: a derived colour is a value, and making it its own
 * kind would split the token store and break every `token:` ref that points into it.
 */
+const oklchColor = z.strictObject({ oklch: z.strictObject({
+	l: z.number().min(0).max(100),
+	c: z.number().min(0),
+	h: z.number().optional(),
+	alpha: z.number().min(0).max(1).optional()
+}) });
+/** Whether a value is an OKLCH colour. */
+function isOklchColor(value) {
+	const channels = value?.oklch;
+	return typeof value === "object" && value !== null && typeof channels === "object" && channels !== null && typeof channels.l === "number" && typeof channels.c === "number";
+}
+/** `oklch(63.7, 0.237, 25.331)` — lightness as a percentage, chroma, and hue in degrees. A grey
+*  leaves the hue out. */
+function oklch(l, c, h, alpha) {
+	return { oklch: {
+		l,
+		c,
+		...h === void 0 ? {} : { h },
+		...alpha === void 0 ? {} : { alpha }
+	} };
+}
+/** An OKLCH colour as CSS: `oklch(63.7% 0.237 25.331)`, `oklch(98.5% 0 none)`, `oklch(… / 0.5)`. */
+function renderOklch(value) {
+	const { l, c, h, alpha: opacity } = value.oklch;
+	const channels = `${l}% ${c} ${h ?? "none"}`;
+	return opacity === void 0 ? `oklch(${channels})` : `oklch(${channels} / ${opacity})`;
+}
+/** The `oklch(…)` call that authors a stored OKLCH colour. One with an alpha and no hue prints as
+*  the object it is, since the helper takes the hue before the alpha. */
+function oklchAuthoring(value) {
+	const { l, c, h, alpha: opacity } = value.oklch;
+	if (h === void 0) return opacity === void 0 ? {
+		helper: "oklch",
+		args: [l, c]
+	} : void 0;
+	return {
+		helper: "oklch",
+		args: opacity === void 0 ? [
+			l,
+			c,
+			h
+		] : [
+			l,
+			c,
+			h,
+			opacity
+		]
+	};
+}
 const colorValue = z.lazy(() => z.union([
 	z.string(),
 	refSchema,
+	oklchColor,
 	derivedColor,
 	gradient
 ]));
@@ -71,6 +121,8 @@ const DERIVED_COLOR_SPACE = {
 	alpha: "srgb",
 	mix: "oklch"
 };
+/** The space a derived colour with no `space` of its own mixes in, on every platform. */
+const DERIVED_COLOR_DEFAULT_SPACE = "oklch";
 /** Blend toward black in light mode and white in dark — so a hover state darkens in both. */
 function darken(color, amount) {
 	return {
@@ -89,12 +141,13 @@ function lighten(color, amount) {
 		space: DERIVED_COLOR_SPACE.lighten
 	};
 }
-/** `alpha(color, 0.2)` — the colour at 20% opacity. Takes a 0–1 opacity, like CSS. */
+/** `alpha(color, 0.2)` — the colour at 20% opacity. Takes a 0–1 opacity, like CSS, kept to a tenth
+*  of a percent. */
 function alpha(color, opacity) {
 	return {
 		op: "alpha",
 		color,
-		amount: Math.round(Math.max(0, Math.min(1, opacity)) * 100),
+		amount: Math.round(Math.max(0, Math.min(1, opacity)) * 1e3) / 10,
 		space: DERIVED_COLOR_SPACE.alpha
 	};
 }
@@ -110,7 +163,7 @@ function mix(color, towards, amount, space = DERIVED_COLOR_SPACE.mix) {
 }
 /**
 * The helper call that authors a stored derived colour, or `undefined` for one no helper produces (a
-* `darken` in another space, an `alpha` at a fractional percent). `alpha` stores a 0–100 percent and
+* `darken` in another space, an `alpha` finer than a tenth of a percent). `alpha` stores a 0–100 percent and
 * takes a 0–1 opacity, so the argument is the percent scaled back. A `darken`, `lighten` or `mix`
 * with no `space` renders in `oklch`, so it is the helper's own value; an `alpha` with none renders
 * in `oklch` too, which is not what `alpha()` writes, so it stays an object.
@@ -124,12 +177,12 @@ function derivedColorAuthoring(value) {
 		};
 	}
 	if (value.op === "alpha") {
-		const whole = Number.isInteger(value.amount);
+		const whole = Number.isInteger(value.amount * 10);
 		const inRange = value.amount >= 0 && value.amount <= 100;
 		if (value.space !== DERIVED_COLOR_SPACE.alpha || value.with !== void 0 || !whole || !inRange) return;
 		return {
 			helper: "alpha",
-			args: [value.color, value.amount / 100]
+			args: [value.color, Math.round(value.amount * 10) / 1e3]
 		};
 	}
 	if (value.with === void 0) return void 0;
@@ -169,9 +222,9 @@ function renderDerivedColor(value, render) {
 }
 /** A gradient as CSS — `linear-gradient(to right, transparent 0%, var(--uds-bg-primary) 50%)`. */
 function renderGradient(value, render) {
-	const stops = value.stops.map((stop) => [render(stop.color), stop.at].filter(Boolean).join(" ")).join(", ");
-	const head = [value.angle, value.space ? `in ${value.space}` : void 0].filter(Boolean);
+	const stops = value.stops.map((stop) => [render(stop.color), stop.at === void 0 ? void 0 : render(stop.at)].filter(Boolean).join(" ")).join(", ");
+	const head = [value.angle === void 0 ? void 0 : render(value.angle), value.space ? `in ${value.space}` : void 0].filter(Boolean);
 	return `${value.repeating ? "repeating-" : ""}${value.gradient}-gradient(${[...head, stops].join(", ")})`;
 }
 //#endregion
-export { DERIVED_COLOR_SPACE, alpha, darken, derivedColor, derivedColorAuthoring, gradient, gradientAuthoring, isDerivedColor, isGradient, lighten, linearGradient, mix, renderDerivedColor, renderGradient };
+export { DERIVED_COLOR_DEFAULT_SPACE, DERIVED_COLOR_SPACE, alpha, darken, derivedColor, derivedColorAuthoring, gradient, gradientAuthoring, isDerivedColor, isGradient, isOklchColor, lighten, linearGradient, mix, oklch, oklchAuthoring, oklchColor, renderDerivedColor, renderGradient, renderOklch };

package/dist/entities/system/component-module.js

@@ -1,10 +1,10 @@
 import { ref, splitRef } from "../../framework/utils/refs.js";
 import { createSliceMemo } from "../../framework/memo.js";
-import { Settings, classPrefixOf, varPrefixOf } from "./Settings.js";
+import { Settings, classPrefixOf, prefixed, varPrefixOf } from "./Settings.js";
 import { File } from "./File.js";
+import { isNativeConfig } from "../../configs/platform.js";
 import { Component } from "./Component.js";
 import { contentKey } from "../../framework/utils/content-key.js";
-import { isNativeConfig } from "../../configs/platform.js";
 //#region src/entities/system/component-module.ts
 /**
 * What names a compiled component module: a content key over the module's config-visible build
@@ -278,7 +278,10 @@ function componentModuleSource(config, componentPathOrRef) {
 * three name the same classes and hash the same config.
 */
 function linkedModuleView({ consumer, owner, slug, shadowed }) {
-	const classNames = shadowed ? `${classPrefixOf(consumer)}-${slug}` : classPrefixOf(consumer);
+	const classNames = shadowed ? prefixed({
+		prefix: classPrefixOf(consumer),
+		name: slug
+	}) : classPrefixOf(consumer);
 	return owner.apply({
 		kind: "settings",
 		operation: "update",
@@ -353,7 +356,7 @@ function linkedComponentModule(config, componentPathOrRef) {
 			moduleKey,
 			exportName: componentModuleExportName(authored?.path ?? component.path),
 			linked: {
-				slug,
+				slug: slug.split("~").at(-1) ?? slug,
 				...pin
 			}
 		},
@@ -365,6 +368,14 @@ function linkedComponentModule(config, componentPathOrRef) {
 * bridge this config links, not by this config.
 */
 function publishedPin(config, slug) {
+	if (slug.includes("~")) {
+		const segments = slug.split("~");
+		const { systemId, version } = (config.sourceFor(segments.slice(0, -1).join("~"))?.resolve("linked-system", segments.at(-1) ?? ""))?.toJSON() ?? {};
+		return systemId && version ? {
+			systemId,
+			version
+		} : void 0;
+	}
 	const seen = /* @__PURE__ */ new Set();
 	const queue = [config];
 	for (let at = queue.shift(); at; at = queue.shift()) {

package/dist/entities/system/composed-values.d.ts

@@ -1,10 +1,11 @@
-import { DerivedColor, Gradient } from "./color.js";
+import { Divide, Multiply } from "./calc.js";
+import { DerivedColor, Gradient, OklchColor } from "./color.js";
 import { Shadow } from "./shadow.js";
 import { Transition } from "./transition.js";
 import { z } from "zod";
 
 //#region src/entities/system/composed-values.d.ts
-type ComposedValue = DerivedColor | Gradient | Transition | Shadow;
+type ComposedValue = Multiply | Divide | OklchColor | DerivedColor | Gradient | Transition | Shadow;
 /** How the write engine spells a stored value: the helper's name and its positional arguments. */
 interface ComposedValueAuthoring {
   readonly helper: string;

package/dist/entities/system/composed-values.js

@@ -1,4 +1,5 @@
-import { derivedColor, derivedColorAuthoring, gradient, gradientAuthoring, isDerivedColor, isGradient, renderDerivedColor, renderGradient } from "./color.js";
+import { divideAuthoring, divideValue, isDivide, isMultiply, multiplyAuthoring, multiplyValue, renderDivide, renderMultiply } from "./calc.js";
+import { derivedColor, derivedColorAuthoring, gradient, gradientAuthoring, isDerivedColor, isGradient, isOklchColor, oklchAuthoring, oklchColor, renderDerivedColor, renderGradient, renderOklch } from "./color.js";
 import { isShadow, renderShadow, shadowAuthoring, shadowValue } from "./shadow.js";
 import { isTransition, renderTransition, transitionAuthoring, transitionValue } from "./transition.js";
 //#region src/entities/system/composed-values.ts
@@ -8,6 +9,24 @@ function form(spec) {
 	return spec;
 }
 const composedValueForms = [
+	form({
+		schema: multiplyValue,
+		is: isMultiply,
+		render: renderMultiply,
+		authoring: multiplyAuthoring
+	}),
+	form({
+		schema: divideValue,
+		is: isDivide,
+		render: renderDivide,
+		authoring: divideAuthoring
+	}),
+	form({
+		schema: oklchColor,
+		is: isOklchColor,
+		render: renderOklch,
+		authoring: oklchAuthoring
+	}),
 	form({
 		schema: derivedColor,
 		is: isDerivedColor,

package/dist/entities/system/defineComponent.d.ts

@@ -499,10 +499,10 @@ type Registered = [keyof RegisteredStyleProps] extends [never] ? false : true;
 /** Every style prop the system registers, typed by the values it registers. */
 type StyleProps = { [K in keyof RegisteredStyleProps]?: RegisteredStyleProps[K] };
 /**
- * A modifier's block: the same style props, applied under its condition. One level deep, because
- * the runtime reads one — a block inside a block is a key it hands to the element.
+ * A modifier's block: the same style props, applied under its condition. A block inside a block
+ * stacks onto it in the order written, so `_md={{ _hover: { … } }}` is `md:hover:`.
  */
-type ModifierProps = { [K in keyof RegisteredModifiers]?: StyleProps };
+type ModifierProps = { [K in keyof RegisteredModifiers]?: StyleProps & ModifierProps };
 /** The per-layer override channel the emitted module reads, keyed by this component's layers. */
 type LayerProps<L extends LayerMap> = {
   layerProps?: Partial<Record<keyof L & string, Record<string, unknown>>>;

package/dist/entities/system/link-plan.js

@@ -168,7 +168,16 @@ function planLink({ config, input }) {
 				if (path === "*") continue;
 				rejectData(`Cannot link "${path}" through "${slug}" — the source has no ${kind} there.`, ["data", accessor]);
 			}
-			const taken = entries.filter((entry) => shadow(kind, entry.from));
+			const taken = entries.filter((entry) => {
+				const fit = config.canBorrow({
+					kind,
+					path: entry.from,
+					slug
+				});
+				if (fit.ok) return true;
+				if (source.resolve(kind, path)) rejectData(fit.error, ["data", accessor]);
+				return false;
+			}).filter((entry) => shadow(kind, entry.from));
 			if (taken.length === entries.length) {
 				if (path !== "*") gained.push(path);
 				continue;

package/dist/entities/system/linked-token-values.d.ts

@@ -0,0 +1,34 @@
+import { Config } from "../../framework/Config.js";
+import { NATIVE_CONFIG_NAME, WEB_CONFIG_NAME } from "../../configs/platform.js";
+
+//#region src/entities/system/linked-token-values.d.ts
+type Platform = typeof WEB_CONFIG_NAME | typeof NATIVE_CONFIG_NAME;
+declare function convertLinkedTokenValue({
+  path,
+  value,
+  sourcePlatform,
+  destinationPlatform,
+  remBase
+}: {
+  path: string;
+  value: string | number | boolean;
+  sourcePlatform: string;
+  destinationPlatform: Platform; /** The pinned web source's fixed root size, only needed for web rem → native points. */
+  remBase?: number;
+}): string | number | boolean;
+/** The one adapter for base and mode values before a linked body is parsed by its destination. */
+declare function prepareLinkedTokenBody({
+  path,
+  body,
+  source,
+  config,
+  destinationPlatform
+}: {
+  path: string;
+  body: Record<string, unknown>;
+  source: Config; /** The config whose refs the body spells; a source's own body spells them in the source. */
+  config: Config;
+  destinationPlatform: Platform;
+}): Record<string, unknown>;
+//#endregion
+export { convertLinkedTokenValue, prepareLinkedTokenBody };

package/dist/entities/system/linked-token-values.js

@@ -0,0 +1,135 @@
+import { hasRefMarker } from "../../framework/utils/refs.js";
+import { isDivide, isMultiply } from "./calc.js";
+import { isOklchColor } from "./color.js";
+import { literalValueOf } from "../../framework/projections.js";
+import "../../configs/platform.js";
+import { rootFontSize } from "./token-values.js";
+//#region src/entities/system/linked-token-values.ts
+/**
+* Adapt a linked token for the system reading it. The source keeps its authored value; only the
+* destination's resolved view changes. Length groups are explicit because a bare native number
+* does not say whether CSS should spell it as px or as a unitless value.
+*/
+const LENGTH_GROUPS = new Set([
+	"spacing",
+	"radius",
+	"borderRadius",
+	"iconSize",
+	"borderWidth"
+]);
+const NUMBER_GROUPS = new Set(["opacity", "zIndex"]);
+const LENGTH = /^(-?(?:\d+(?:\.\d+)?|\.\d+))(px|rem)$/;
+const NUMBER = /^-?(?:\d+(?:\.\d+)?|\.\d+)$/;
+/** `oklch(L C H / A)`, the colour notation a config writes and React Native's colour parser
+*  doesn't read. Lightness and alpha may be percentages, the hue `none`. */
+const OKLCH = /^oklch\(\s*(-?[\d.]+)(%?)\s+(-?[\d.]+)(%?)\s+(-?[\d.]+|none)(?:deg)?\s*(?:\/\s*(-?[\d.]+)(%?)\s*)?\)$/i;
+function convertLinkedTokenValue({ path, value, sourcePlatform, destinationPlatform, remBase }) {
+	if (sourcePlatform === destinationPlatform) return value;
+	const group = path.split("/")[0];
+	if (destinationPlatform === "react-native-system") {
+		if (LENGTH_GROUPS.has(group)) {
+			if (typeof value === "number") return value;
+			const match = typeof value === "string" ? LENGTH.exec(value) : null;
+			if (!match) throw unsupported("native", path, value, "a px or rem length");
+			if (match[2] === "rem" && remBase === void 0) throw new Error(`[uds] Linked native token "${path}" has value ${JSON.stringify(value)}, but its source has no fixed root font size for rem conversion.`);
+			return Number(match[1]) * (match[2] === "rem" ? remBase : 1);
+		}
+		if (NUMBER_GROUPS.has(group)) {
+			if (typeof value === "number") return value;
+			if (typeof value !== "string" || !NUMBER.test(value)) throw unsupported("native", path, value, "a unitless number");
+			const number = Number(value);
+			if (group === "opacity" && (number < 0 || number > 1)) throw unsupported("native", path, value, "an opacity between 0 and 1");
+			if (group === "zIndex" && !Number.isInteger(number)) throw unsupported("native", path, value, "an integer z-index");
+			return number;
+		}
+		if (typeof value === "string") return oklchAsHex(value.trim()) ?? value;
+		return value;
+	}
+	if (sourcePlatform === "react-native-system" && typeof value === "number") {
+		if (LENGTH_GROUPS.has(group)) return `${value}px`;
+		if (NUMBER_GROUPS.has(group)) return value;
+		throw unsupported("web", path, value, "a token with a known CSS unit");
+	}
+	return value;
+}
+/** The one adapter for base and mode values before a linked body is parsed by its destination. */
+function prepareLinkedTokenBody({ path, body, source, config, destinationPlatform }) {
+	if (source.name === destinationPlatform) return body;
+	const remBase = source.name === "system-config" ? rootFontSize(source).px : void 0;
+	const convert = (value) => {
+		const literal = destinationPlatform === "react-native-system" ? nativeLiteral({
+			config,
+			value,
+			remBase
+		}) : value;
+		return typeof literal === "string" || typeof literal === "number" || typeof literal === "boolean" ? convertLinkedTokenValue({
+			path,
+			value: literal,
+			sourcePlatform: source.name,
+			destinationPlatform,
+			remBase
+		}) : literal;
+	};
+	const overrides = body.overrides;
+	return {
+		...body,
+		value: convert(body.value),
+		...overrides && typeof overrides === "object" && !Array.isArray(overrides) ? { overrides: Object.fromEntries(Object.entries(overrides).map(([key, raw]) => [key, raw && typeof raw === "object" && !Array.isArray(raw) ? {
+			...raw,
+			value: convert(raw.value)
+		} : raw])) } : {}
+	};
+}
+/**
+* A composed web value as a literal: an OKLCH colour as its CSS (which the conversion turns into a
+* hex), arithmetic evaluated (a length in points where it comes to one), and a string's ref markers
+* filled in. Refs and derived colours stay as they are, since the native theme resolves both. A value
+* with no literal is returned unchanged for the native schema to refuse.
+*/
+function nativeLiteral({ config, value, remBase }) {
+	const marked = typeof value === "string" && hasRefMarker(value);
+	const calc = isMultiply(value) || isDivide(value);
+	if (!marked && !calc && !isOklchColor(value)) return value;
+	const literal = literalValueOf(config, value);
+	if (literal === void 0) return value;
+	if (typeof literal !== "string") return literal;
+	const length = calc ? LENGTH.exec(literal) : null;
+	if (length && (length[2] === "px" || remBase !== void 0)) return Number(length[1]) * (length[2] === "rem" ? remBase : 1);
+	return literal;
+}
+/** An `oklch()` colour as the hex a native token holds, each channel clipped to sRGB as a browser
+*  paints it. Anything else answers `undefined`. */
+function oklchAsHex(value) {
+	const match = OKLCH.exec(value);
+	if (!match) return void 0;
+	const [, l, lPercent, c, cPercent, h, a, aPercent] = match;
+	const lightness = Number(l) / (lPercent ? 100 : 1);
+	const chroma = Number(c) * (cPercent ? .004 : 1);
+	const hue = h === "none" ? 0 : Number(h) * Math.PI / 180;
+	const opacity = a === void 0 ? 1 : Number(a) / (aPercent ? 100 : 1);
+	const okA = chroma * Math.cos(hue);
+	const okB = chroma * Math.sin(hue);
+	const [lc, mc, sc] = [
+		lightness + .3963377774 * okA + .2158037573 * okB,
+		lightness - .1055613458 * okA - .0638541728 * okB,
+		lightness - .0894841775 * okA - 1.291485548 * okB
+	].map((channel) => channel ** 3);
+	const linear = [
+		4.0767416621 * lc - 3.3077115913 * mc + .2309699292 * sc,
+		-1.2684380046 * lc + 2.6097574011 * mc - .3413193965 * sc,
+		-.0041960863 * lc - .7034186147 * mc + 1.707614701 * sc
+	];
+	const byte = (unit) => Math.round(Math.min(1, Math.max(0, unit)) * 255).toString(16).padStart(2, "0");
+	const encode = (channel) => {
+		const magnitude = Math.abs(channel);
+		const encoded = magnitude <= .0031308 ? 12.92 * magnitude : 1.055 * magnitude ** (1 / 2.4) - .055;
+		return Math.sign(channel) * encoded;
+	};
+	const hex = `#${linear.map((channel) => byte(encode(channel))).join("")}`;
+	return opacity < 1 ? `${hex}${byte(opacity)}` : hex;
+}
+function unsupported(destination, path, value, expected) {
+	return /* @__PURE__ */ new Error(`[uds] Linked ${destination} token "${path}" has value ${JSON.stringify(value)}; expected ${expected}.`);
+}
+//#endregion
+export { convertLinkedTokenValue, prepareLinkedTokenBody };

package/dist/entities/system/shadow.d.ts

@@ -1,17 +1,19 @@
 import { Ref } from "../../framework/utils/refs.js";
-import { DerivedColor } from "./color.js";
+import { DerivedColor, OklchColor } from "./color.js";
 import { z } from "zod";
 
 //#region src/entities/system/shadow.d.ts
-/** A shadow layer's colour: a literal, a token ref, or a colour derived from one. */
-type ShadowColor = string | Ref | DerivedColor;
-/** One shadow spelled as its parts. The lengths are CSS lengths, as `box-shadow` takes them. */
+/** A shadow layer's colour: a literal, a token ref, an OKLCH colour, or a colour derived from one. */
+type ShadowColor = string | Ref | OklchColor | DerivedColor;
+/** One shadow spelled as its parts. The lengths are CSS lengths, as `box-shadow` takes them. A shadow
+ *  for `text-shadow` or `drop-shadow()`, which take no spread, leaves `spread` out, and one with no
+ *  blur (`0 1px #000`) leaves `blur` out. */
 interface ShadowParts {
   readonly inset?: boolean;
   readonly offsetX: string;
   readonly offsetY: string;
-  readonly blur: string;
-  readonly spread: string;
+  readonly blur?: string;
+  readonly spread?: string;
   readonly color: ShadowColor;
 }
 /** A layer of the stack: a ref to a shadow token (all of its layers), or one shadow as parts. */
@@ -34,6 +36,6 @@ declare function shadow(...layers: readonly ShadowLayer[]): Shadow;
  * expression. It is passed in rather than imported because resolving a ref is the projection layer's
  * job and this module is the value's shape.
  */
-declare function renderShadow(value: Shadow, render: (part: ShadowLayer | ShadowColor) => string): string;
+declare function renderShadow(value: Shadow, render: (part: unknown) => string): string;
 //#endregion
 export { Shadow, ShadowColor, ShadowLayer, ShadowParts, isShadow, renderShadow, shadow };

package/dist/entities/system/shadow.js

@@ -1,5 +1,5 @@
 import { isRef, refSchema } from "../../framework/utils/refs.js";
-import { derivedColor } from "./color.js";
+import { derivedColor, oklchColor } from "./color.js";
 import { z } from "zod";
 //#region src/entities/system/shadow.ts
 /**
@@ -20,11 +20,12 @@ const shadowParts = z.strictObject({
 	inset: z.boolean().optional(),
 	offsetX: z.string(),
 	offsetY: z.string(),
-	blur: z.string(),
-	spread: z.string(),
+	blur: z.string().optional(),
+	spread: z.string().optional(),
 	color: z.union([
 		z.string(),
 		refSchema,
+		oklchColor,
 		derivedColor
 	])
 });
@@ -64,10 +65,10 @@ function renderShadow(value, render) {
 		const { inset, offsetX, offsetY, blur, spread, color } = layer;
 		return [
 			inset ? "inset" : void 0,
-			offsetX,
-			offsetY,
-			blur,
-			spread,
+			render(offsetX),
+			render(offsetY),
+			blur === void 0 ? spread === void 0 ? void 0 : "0" : render(blur),
+			spread === void 0 ? void 0 : render(spread),
 			render(color)
 		].filter((part) => part !== void 0).join(" ");
 	}).join(", ");

package/dist/entities/system/style-bag.d.ts

@@ -1,7 +1,7 @@
 import { SubEntityClass } from "../../framework/defineSubEntity.js";
 import { RegisteredModifiers, RegisteredStyleProps } from "../../framework/registered.js";
-import { Named } from "../../framework/named.js";
 import { ComposedValue } from "./composed-values.js";
+import { Named } from "../../framework/named.js";
 import { z } from "zod";
 
 //#region src/entities/system/style-bag.d.ts

package/dist/entities/system/token-index.js

@@ -1,4 +1,4 @@
-import { isRef, splitRef } from "../../framework/utils/refs.js";
+import { isRef, kindOf, pathOf, splitRef } from "../../framework/utils/refs.js";
 import { resolveValueType } from "../../css/value-type.js";
 import { resolveTokenValueUnder } from "../../framework/projections.js";
 import { matchEntities, searchEntities } from "../../framework/entity-search.js";
@@ -41,13 +41,56 @@ function bindingFor(config, path, label = path, source, under = null) {
 		path: label,
 		source,
 		type,
-		valueType: resolveValueType({
+		valueType: valueTypeOf({
+			config,
+			path,
 			type,
 			value
 		}),
 		value
 	};
 }
+/** A binding's visual type: its own declared type, else the first one declared along its ref chain,
+*  else what its literal (or, with none, its stored form at the chain's end) looks like. */
+function valueTypeOf({ config, path, type, value }) {
+	const end = chainEnd(config, path);
+	const declared = type ?? end.type;
+	return resolveValueType({
+		type: declared,
+		value
+	}) ?? resolveValueType({
+		type: declared,
+		value: end.value
+	});
+}
+/** Along a token's ref chain: the first declared type, and the value stored at its end — the first
+*  token whose value is no ref to another. */
+function chainEnd(config, path) {
+	const seen = /* @__PURE__ */ new Set();
+	let holder = config;
+	let at = path;
+	let type;
+	while (!seen.has(at)) {
+		seen.add(at);
+		const body = holder.resolve("token", at)?.toJSON();
+		type ??= body?.type;
+		if (!isRef(body?.value) || kindOf(body.value) !== "token") return {
+			type,
+			value: body?.value
+		};
+		const next = holder.configFor(body.value);
+		if (!next) return {
+			type,
+			value: void 0
+		};
+		holder = next;
+		at = pathOf(body.value);
+	}
+	return {
+		type,
+		value: void 0
+	};
+}
 /**
 * What `value` binds to, or `undefined` when it is a literal.
 *

package/dist/entities/system/token-values.d.ts

@@ -44,8 +44,9 @@ interface TokenValueRow {
   /** The rest of the path — `2.5` for `spacing/2.5`, `blue/3` for `spectrum/blue/3`. A path with no
    *  slash is its own group and alias. */
   readonly alias: string;
-  /** The custom property the stylesheet declares it as, spelled by the config that owns it. */
-  readonly variable: string;
+  /** The custom property the stylesheet declares it as, spelled by the config that owns it. A token
+   *  that declares none has none. */
+  readonly variable?: string;
   readonly state: TokenValueState;
 }
 /** The root font size of the page this config's sheet is for, as stated or the browser's own. A

package/dist/entities/system/token-values.js

@@ -1,8 +1,8 @@
-import { isRef, kindOf, pathOf, ref, splitRef } from "../../framework/utils/refs.js";
+import { collectRefs, kindOf, pathOf, ref, splitRef } from "../../framework/utils/refs.js";
 import { parseRootFontSize } from "../../css/root-font-size.js";
 import { createSliceMemo } from "../../framework/memo.js";
 import { CSS_DEFAULTS, Settings } from "./Settings.js";
-import { cssVar, resolveTokenValue } from "../../framework/projections.js";
+import { cssVar, declaresCssVariable, resolveTokenValue } from "../../framework/projections.js";
 //#region src/entities/system/token-values.ts
 /**
 * A token as a VALUE a module can compute with.
@@ -78,7 +78,7 @@ const tokenValueRows = createSliceMemo({
 				path,
 				group: slash > 0 ? path.slice(0, slash) : path,
 				alias: slash > 0 ? path.slice(slash + 1) : path,
-				variable: cssVar(owner, "token", path),
+				...declaresCssVariable(owner, path) ? { variable: cssVar(owner, "token", path) } : {},
 				state: stateOf({
 					config,
 					path,
@@ -137,12 +137,12 @@ function modeDecides(config, path, seen = /* @__PURE__ */ new Set()) {
 	const body = config.resolve("token", path)?.toJSON();
 	if (!body) return false;
 	if (body.overrides && Object.keys(body.overrides).length > 0) return true;
-	const { value } = body;
-	if (!isRef(value) || kindOf(value) !== "token") return false;
-	if (seen.has(value.__ref)) return false;
-	seen.add(value.__ref);
-	const source = config.configFor(value);
-	return source ? modeDecides(source, pathOf(value), seen) : false;
+	return collectRefs(body.value).some((target) => {
+		if (kindOf(target) !== "token" || seen.has(target)) return false;
+		seen.add(target);
+		const source = config.configFor({ __ref: target });
+		return source ? modeDecides(source, pathOf(target), seen) : false;
+	});
 }
 /** The reader names, which is what the build recognizes on a `Token.ref(…)`. */
 const TOKEN_READERS = [