@yahoo/uds-v5-wip 1.60.0 → 1.61.0

package/dist/config/dist/resolveStyleProp.js

@@ -1,8 +1,8 @@
+import { isTokenAcceptedByProperty } from "./propertyAcceptedTypes.js";
 import { safeTokenName } from "../../utils/dist/string-utils/cssVar.js";
 import "../../utils/dist/index.js";
-import { isTokenAcceptedByProperty } from "./propertyAcceptedTypes.js";
-import { resolveTokenRef } from "./refs.js";
-import { sniffTokenTypeFromValue } from "./resolveTokenTypes.js";
+import { resolveTokenValue } from "./refs.js";
+import { sniffTokenTypeFromValue } from "./sniffTokenType.js";
 //#region ../config/dist/resolveStyleProp.js
 /**
 * Resolve a {@link StyleProp} authored via `defineStyleProp` against the
@@ -54,8 +54,7 @@ function looksLikeShadow(value) {
 /**
 * Detect a token's CSS value type. Resolution order:
 *  1. Per-token `type` override.
-*  2. Value sniff via {@link sniffTokenTypeFromValue}.
-*  3. Group-level `type`.
+*  2. Group-level `type`.
 *
 * When the resolved type is `'length-percentage'` and the raw value ends in
 * `%`, narrow to `'percentage'`; otherwise narrow to `'length'`. When the
@@ -63,9 +62,7 @@ function looksLikeShadow(value) {
 * ratio-shaped values to `'ratio'`.
 *
 * Exported so Studio (and any other runtime consumer) can resolve a cell's
-* effective `CssValueTypeName` with the same sniff-before-group policy used
-* for `RegisteredTokenGroupMeta`. UDS-1600 tracks removing the remaining
-* mirrored codegen resolver once the token type API settles.
+* effective `CssValueTypeName`.
 *
 * The input shapes ({@link DetectTokenValueTypeInput} /
 * {@link DetectTokenValueTypeGroup}) are intentionally minimal: the resolver
@@ -80,7 +77,8 @@ function detectTokenValueType(token, group) {
 	if (token.type) resolved = tokenTypeToValueType(token.type);
 	else {
 		const sniffed = sniffTokenTypeFromValue(token.value);
-		resolved = sniffed ? tokenTypeToValueType(sniffed) : group.type ? tokenTypeToValueType(group.type) : void 0;
+		resolved = sniffed ? tokenTypeToValueType(sniffed) : void 0;
+		if (resolved === void 0 && group.type) resolved = tokenTypeToValueType(group.type);
 	}
 	if (resolved === "length-percentage") {
 		const trimmed = token.value.trim();
@@ -95,27 +93,27 @@ function detectTokenValueType(token, group) {
 	}
 	return resolved;
 }
-const REF_RE = /^\{([^.{}]+)(?:\.([^.{}]+))?\}$/;
 /**
-* Parse a string ref like `'{palette}'` or `'{spacing.4}'`. Returns
-* `undefined` for any string that isn't a brace ref (so the caller can
-* treat it as a literal keyword).
+* Split a `tokenGroup` marker's `group` field into `{ group, key? }`.
+* Plain `'spacing'` resolves the whole group; `'spacing/4'` picks one
+* token from it.
 */
-function parseGroupRef(raw) {
-	const m = REF_RE.exec(raw);
-	if (!m) return void 0;
-	const [, group, key] = m;
-	if (!group) return void 0;
-	return key !== void 0 ? {
-		group,
-		key
-	} : { group };
+function parseGroupPath(raw) {
+	const slash = raw.indexOf("/");
+	if (slash <= 0 || slash >= raw.length - 1) return { group: raw };
+	return {
+		group: raw.slice(0, slash),
+		key: raw.slice(slash + 1)
+	};
 }
 function findGroup(atomic, name) {
 	return atomic.find((g) => g.namespace === name || g.cssPrefix === name);
 }
-function isNamespacedRef(entry) {
-	return typeof entry === "object" && entry !== null && "ref" in entry && "namespace" in entry;
+function isTokenGroupMarker(entry) {
+	return typeof entry === "object" && entry !== null && entry.__kind === "tokenGroup" && typeof entry.group === "string";
+}
+function isTokenMarker(entry) {
+	return typeof entry === "object" && entry !== null && entry.__kind === "token" && typeof entry.ref === "string";
 }
 /**
 * Build `--{configPrefix}-{varPrefix}-{safeName}` (or omit the configPrefix
@@ -129,12 +127,16 @@ function resolveGroupTokens(group, cssProperty, configPrefix, namespace, skipPro
 	const varPrefix = group.cssPrefix ?? group.namespace ?? "";
 	const out = [];
 	for (const token of group.tokens) {
-		const valueType = detectTokenValueType(token, group);
-		if (!skipPropertyFilter && !isTokenAcceptedByProperty(cssProperty, valueType, token.value)) continue;
+		const tokenValue = resolveTokenValue(token.value, configPrefix);
+		const valueType = detectTokenValueType({
+			...token,
+			value: tokenValue
+		}, group);
+		if (!skipPropertyFilter && !isTokenAcceptedByProperty(cssProperty, valueType, tokenValue)) continue;
 		const safeName = safeTokenName(token.name);
 		out.push({
 			name: token.name,
-			value: token.value,
+			value: tokenValue,
 			valueType,
 			group: groupName,
 			namespace,
@@ -156,6 +158,7 @@ function resolveGroupTokens(group, cssProperty, configPrefix, namespace, skipPro
 */
 function resolveStyleProp(propName, styleProp, config) {
 	const { cssProperty, classPrefix, values, arbitrary, metadata } = styleProp;
+	const transform = styleProp.transform;
 	const pairedWith = styleProp._pairedWith;
 	const separator = styleProp._separator;
 	const primaryCssProperty = Array.isArray(cssProperty) ? cssProperty[0] : cssProperty;
@@ -166,27 +169,32 @@ function resolveStyleProp(propName, styleProp, config) {
 	for (const entry of values ?? []) {
 		if (typeof entry === "number") {
 			if (!literals.includes(entry)) literals.push(entry);
-			literalAliases[String(entry)] = String(entry);
+			literalAliases[String(entry)] = transform ? transform(entry) : String(entry);
 			continue;
 		}
 		if (typeof entry === "string") {
-			const parsed = parseGroupRef(entry);
-			if (!parsed) {
-				literals.push(entry);
-				continue;
-			}
+			literals.push(entry);
+			if (transform) literalAliases[entry] = transform(entry);
+			continue;
+		}
+		if (isTokenGroupMarker(entry)) {
+			const parsed = parseGroupPath(entry.group);
 			const group = findGroup(config.atomic, parsed.group);
 			if (!group) continue;
 			if (parsed.key !== void 0) {
 				const token = group.tokens.find((t) => t.name === parsed.key);
 				if (!token) continue;
-				const valueType = detectTokenValueType(token, group);
-				if (!pairedWith && !isTokenAcceptedByProperty(primaryCssProperty, valueType, token.value)) continue;
+				const tokenValue = resolveTokenValue(token.value, configPrefix);
+				const valueType = detectTokenValueType({
+					...token,
+					value: tokenValue
+				}, group);
+				if (!pairedWith && !isTokenAcceptedByProperty(primaryCssProperty, valueType, tokenValue)) continue;
 				const safeName = safeTokenName(token.name);
 				const varPrefix = group.cssPrefix ?? group.namespace ?? parsed.group;
 				tokens.push({
 					name: token.name,
-					value: token.value,
+					value: tokenValue,
 					valueType,
 					group: group.namespace ?? group.cssPrefix ?? parsed.group,
 					qualifiedName: token.name,
@@ -197,12 +205,12 @@ function resolveStyleProp(propName, styleProp, config) {
 			} else tokens.push(...resolveGroupTokens(group, primaryCssProperty, configPrefix, void 0, pairedWith !== void 0));
 			continue;
 		}
-		if (isNamespacedRef(entry)) {
-			const parsed = parseGroupRef(entry.ref);
-			if (!parsed || parsed.key !== void 0) continue;
-			const group = findGroup(config.atomic, parsed.group);
+		if (typeof entry === "object" && entry !== null && "ref" in entry && "namespace" in entry && isTokenGroupMarker(entry.ref)) {
+			const ns = entry.namespace;
+			const ref = entry.ref;
+			const group = findGroup(config.atomic, ref.group);
 			if (!group) continue;
-			tokens.push(...resolveGroupTokens(group, primaryCssProperty, configPrefix, entry.namespace, pairedWith !== void 0));
+			tokens.push(...resolveGroupTokens(group, primaryCssProperty, configPrefix, ns, pairedWith !== void 0));
 			continue;
 		}
 		if (typeof entry === "object" && entry !== null && "alias" in entry && "value" in entry) {
@@ -210,7 +218,8 @@ function resolveStyleProp(propName, styleProp, config) {
 			const aliasKey = aliasEntry.alias;
 			const aliasMapKey = typeof aliasKey === "string" ? aliasKey : String(aliasKey);
 			let resolvedValue;
-			if (typeof aliasEntry.value === "string") resolvedValue = resolveTokenRef(aliasEntry.value, configPrefix);
+			if (isTokenMarker(aliasEntry.value)) resolvedValue = resolveTokenValue(aliasEntry.value, configPrefix);
+			else if (typeof aliasEntry.value === "string") resolvedValue = aliasEntry.value;
 			else resolvedValue = aliasEntry.value;
 			if (!literals.includes(aliasKey)) literals.push(aliasKey);
 			literalAliases[aliasMapKey] = resolvedValue;
@@ -231,5 +240,21 @@ function resolveStyleProp(propName, styleProp, config) {
 		metadata: metadata ?? {}
 	};
 }
+/**
+* Walk a resolved config's `resolvedStyleProps` and return the
+* color-prop → opacity-sibling-prop map. Built from each opacity
+* sibling's `pairedWith` field (set by the resolver when expanding a
+* `.withOpacity({ as })` parent). Returns an empty object when no
+* pairings exist.
+*
+* Replaces the legacy `colorPropToOpacityProp` table that lived in
+* `@uds/core` — consumers (codegen safelist generation, runtime
+* `getStyles`, loader style-transform) should call this instead.
+*/
+function getColorOpacityMap(config) {
+	const map = {};
+	for (const resolved of config.resolvedStyleProps ?? []) if (resolved.pairedWith) map[resolved.pairedWith] = resolved.propName;
+	return map;
+}
 //#endregion
-export { detectTokenValueType, resolveStyleProp };
+export { detectTokenValueType, getColorOpacityMap, resolveStyleProp };

package/dist/config/dist/runtime-registry.js

@@ -1,9 +1,37 @@
+//#region ../config/dist/runtime-registry.js
+let registeredStyleProps = /* @__PURE__ */ new Map();
+let registeredComposites = /* @__PURE__ */ new Map();
 /**
 * Replace the active style-prop registry. Called by `resolveConfig`
 * with the full `config.styleProps` map (keyed by JSX prop name).
 */
 function setRegisteredStyleProps(entries) {
-	new Map(Object.entries(entries));
+	registeredStyleProps = new Map(Object.entries(entries));
+}
+/**
+* Look up a registered style prop by JSX prop name (the key used in
+* `.registerStyleProps({ bg: ... })`). Returns `undefined` if no prop
+* was registered under that name.
+*/
+function getRegisteredStyleProp(name) {
+	return registeredStyleProps.get(name);
+}
+/**
+* Replace the active composite-style registry. Called by
+* `resolveConfig` with the full `config.compositeStyles` map.
+* Composites authored via `.defineCompositeStyles({...})` or
+* `.registerComposites({...})` both populate the same map.
+*/
+function setRegisteredComposites(entries) {
+	registeredComposites = new Map(Object.entries(entries));
+}
+/**
+* Look up a registered composite by name (the brace-stripped form —
+* `'textVariant'`, not `'{textVariant}'`). Returns `undefined` if no
+* composite was registered under that name.
+*/
+function getRegisteredComposite(name) {
+	return registeredComposites.get(name);
 }
 //#endregion
-export { setRegisteredStyleProps };
+export { getRegisteredComposite, getRegisteredStyleProp, setRegisteredComposites, setRegisteredStyleProps };

package/dist/config/dist/serialize.d.ts

@@ -1,6 +1,6 @@
+import { CompositeStylesConfig } from "./defineCompositeStyle.js";
 import { VarsConfig } from "./types.js";
-import { AtomicToken, ExampleDef, ModeGroup, ModifierDef, MotionPresetsDef, UdsConfig } from "./createConfig.js";
-import { CompositeStylesConfig } from "@uds/types";
+import { AtomicToken, ModeGroup, ModifierDef, MotionPresetsDef, UdsConfig } from "./createConfig.js";
 
 //#region ../config/dist/serialize.d.ts
 //#region src/serialize.d.ts
@@ -11,55 +11,29 @@ type TokenRef = {
 interface SerializedConfig {
   modes: ModeGroup[];
   modifiers?: ModifierDef[];
-  /**
-   * Verbatim `defineVars` input. Authoritative source for CSS variable
-   * declarations downstream. `atomic` carries derived (property × token)
-   * data for utility-class generation; `vars` carries the original
-   * namespace-keyed input. New code should rely on `vars`; `atomic` is
-   * still emitted for legacy consumers.
-   */
+  /** Verbatim `defineVars` input — the authoritative source of CSS variable
+   *  declarations. */
   vars?: VarsConfig;
+  /** Derived (property × token) data for utility-class generation. */
   atomic: AtomicToken<ModifierNameShape>[];
   compositeStyles?: CompositeStylesConfig;
-  /**
-   * Legacy field name. Kept on the wire format so older serialized configs
-   * (and `draft_base_configs.baseConfig` blobs) continue to deserialize
-   * until they're rewritten. New code should populate `compositeStyles`.
-   */
-  macros?: Record<string, Record<string, Record<string, unknown>>>;
   motion?: MotionPresetsDef;
-  components: SerializedComponentsDef;
   globalStyles?: Record<string, Record<string, SerializedValue>>;
-  examples?: Record<string, ExampleDef>;
   preflight: boolean;
   prefix: string;
-  presetTokenNames?: Record<string, string[]>;
 }
 type SerializedValue = string | TokenRef | {
   [key: string]: SerializedValue;
 };
-type SerializedSlotStyles = Record<string, SerializedValue>;
-type SerializedComponentConfig = {
-  base: Record<string, SerializedSlotStyles>;
-  variants?: Record<string, Record<string, Record<string, SerializedSlotStyles>>>;
-  compoundVariants?: Array<{
-    conditions: Record<string, string>;
-    styles: Record<string, SerializedSlotStyles>;
-  }>;
-  defaultVariants?: Record<string, string>;
-};
-type SerializedComponentsDef = Record<string, SerializedComponentConfig>;
 /**
  * Build a reverse map from `var(--prefix-xxx-yyy)` strings back to
  * `propName.tokenName` reference paths.
  */
 declare function buildReverseMap(atomic: AtomicToken<ModifierNameShape>[], configPrefix: string): Map<string, string>;
 /**
- * Serialize a UdsConfig for database storage.
- *
- * Walks component slot styles and replaces known `var()` strings with
- * `{ $ref: "propName.tokenName" }` markers so the authoring intent survives
- * a round-trip through JSON.
+ * Serialize a UdsConfig for database storage. Walks global styles and
+ * replaces known `var()` strings with `{ $ref: "propName.tokenName" }`
+ * markers so the authoring intent survives a JSON round-trip.
  */
 declare function serializeConfig(config: UdsConfig): SerializedConfig;
 /**

package/dist/config/dist/serialize.js

@@ -1,7 +1,5 @@
 import { safeTokenName } from "../../utils/dist/string-utils/cssVar.js";
 import "../../utils/dist/index.js";
-import { getConfigurablePropMapping } from "../../core/dist/configurable-prop-helpers.js";
-import "../../core/dist/index.js";
 import { buildTokenReference, createConfigBuilder, resolveConfig } from "./createConfig.js";
 //#region ../config/dist/serialize.js
 /**
@@ -10,21 +8,6 @@ import { buildTokenReference, createConfigBuilder, resolveConfig } from "./creat
 * serializeConfig:   UdsConfig → SerializedConfig  (var() → $ref markers)
 * deserializeConfig: SerializedConfig → UdsConfig   ($ref markers → var())
 */
-/**
-* Migrate the legacy serialized `macros` field into the new
-* `compositeStyles` shape. Each old key (`elevation`) becomes a
-* `{ label, styles }` def. Returns an empty object when there's
-* nothing to migrate so the field is always populated.
-*/
-function upgradeLegacyMacros(legacy) {
-	if (!legacy) return {};
-	const out = {};
-	for (const [name, variants] of Object.entries(legacy)) out[name] = {
-		label: name,
-		styles: variants
-	};
-	return out;
-}
 function isTokenRef(val) {
 	return typeof val === "object" && val !== null && "$ref" in val && typeof val.$ref === "string";
 }
@@ -35,7 +18,7 @@ function isTokenRef(val) {
 function buildReverseMap(atomic, configPrefix) {
 	const map = /* @__PURE__ */ new Map();
 	for (const token of atomic) for (const prop of token.properties) {
-		const varPrefix = token.cssPrefix ?? getConfigurablePropMapping(prop)?.defaultVarPrefix;
+		const varPrefix = token.cssPrefix ?? token.properties[0];
 		if (!varPrefix) continue;
 		for (const t of token.tokens) {
 			const safeName = safeTokenName(t.name);
@@ -46,8 +29,8 @@ function buildReverseMap(atomic, configPrefix) {
 	return map;
 }
 /**
-* Walk an object, transforming every string leaf with `fn`.
-* Nested objects (pseudo-state blocks like `_hover: { ... }`) are recursed.
+* Walk an object, transforming every string leaf with `fn`. Nested
+* objects (pseudo-state blocks like `_hover: { ... }`) are recursed.
 */
 function walkStrings(obj, fn) {
 	const result = {};
@@ -72,11 +55,9 @@ function resolveRefs(obj, tokenRef) {
 	return result;
 }
 /**
-* Serialize a UdsConfig for database storage.
-*
-* Walks component slot styles and replaces known `var()` strings with
-* `{ $ref: "propName.tokenName" }` markers so the authoring intent survives
-* a round-trip through JSON.
+* Serialize a UdsConfig for database storage. Walks global styles and
+* replaces known `var()` strings with `{ $ref: "propName.tokenName" }`
+* markers so the authoring intent survives a JSON round-trip.
 */
 function serializeConfig(config) {
 	const data = resolveConfig(config);
@@ -85,23 +66,6 @@ function serializeConfig(config) {
 		const ref = reverseMap.get(val);
 		return ref ? { $ref: ref } : val;
 	};
-	const components = {};
-	for (const [compName, compConfig] of Object.entries(data.components)) {
-		const serialized = { base: {} };
-		for (const [slot, styles] of Object.entries(compConfig.base ?? {})) serialized.base[slot] = walkStrings(styles, replaceVars);
-		if (compConfig.variants) {
-			serialized.variants = {};
-			for (const [axis, values] of Object.entries(compConfig.variants)) {
-				serialized.variants[axis] = {};
-				for (const [value, slotOverrides] of Object.entries(values)) {
-					serialized.variants[axis][value] = {};
-					for (const [slot, styles] of Object.entries(slotOverrides)) serialized.variants[axis][value][slot] = walkStrings(styles, replaceVars);
-				}
-			}
-		}
-		if (compConfig.defaultVariants) serialized.defaultVariants = compConfig.defaultVariants;
-		components[compName] = serialized;
-	}
 	const globalStyles = {};
 	if (data.globalStyles) for (const [selector, styles] of Object.entries(data.globalStyles)) globalStyles[selector] = walkStrings(styles, replaceVars);
 	return {
@@ -111,12 +75,9 @@ function serializeConfig(config) {
 		atomic: data.atomic,
 		compositeStyles: Object.keys(data.compositeStyles).length > 0 ? data.compositeStyles : void 0,
 		motion: Object.keys(data.motion).length > 0 ? data.motion : void 0,
-		components,
 		globalStyles: Object.keys(globalStyles).length > 0 ? globalStyles : void 0,
-		examples: data.examples && Object.keys(data.examples).length > 0 ? data.examples : void 0,
 		preflight: data.preflight,
-		prefix: data.prefix,
-		presetTokenNames: data.presetTokenNames && Object.keys(data.presetTokenNames).length > 0 ? data.presetTokenNames : void 0
+		prefix: data.prefix
 	};
 }
 /**
@@ -127,45 +88,23 @@ function serializeConfig(config) {
 */
 function deserializeConfig(data) {
 	const tokenRef = buildTokenReference(data.atomic, data.prefix);
-	const components = {};
-	for (const [compName, compConfig] of Object.entries(data.components)) {
-		const resolved = { base: {} };
-		const base = {};
-		for (const [slot, styles] of Object.entries(compConfig.base ?? {})) base[slot] = resolveRefs(styles, tokenRef);
-		resolved.base = base;
-		if (compConfig.variants) {
-			const variants = {};
-			for (const [axis, values] of Object.entries(compConfig.variants)) {
-				variants[axis] = {};
-				for (const [value, slotOverrides] of Object.entries(values)) {
-					variants[axis][value] = {};
-					for (const [slot, styles] of Object.entries(slotOverrides)) variants[axis][value][slot] = resolveRefs(styles, tokenRef);
-				}
-			}
-			resolved.variants = variants;
-		}
-		if (compConfig.defaultVariants) resolved.defaultVariants = compConfig.defaultVariants;
-		components[compName] = resolved;
-	}
 	let config = createConfigBuilder({
 		modes: data.modes,
 		modifiers: data.modifiers ?? [],
 		vars: data.vars,
 		atomic: data.atomic,
-		compositeStyles: data.compositeStyles ?? upgradeLegacyMacros(data.macros),
+		compositeStyles: data.compositeStyles ?? {},
 		motion: data.motion ?? {},
-		components,
+		components: {},
 		preflight: data.preflight,
 		prefix: data.prefix ?? "uds",
-		globalStyles: {},
-		presetTokenNames: data.presetTokenNames
+		globalStyles: {}
 	});
 	if (data.globalStyles && Object.keys(data.globalStyles).length > 0) {
 		const globalStyles = {};
 		for (const [selector, styles] of Object.entries(data.globalStyles)) globalStyles[selector] = resolveRefs(styles, tokenRef);
 		config = config.defineGlobalStyles(globalStyles);
 	}
-	if (data.examples) for (const [name, examples] of Object.entries(data.examples)) config = config.defineExample(name, examples);
 	return config;
 }
 //#endregion

package/dist/config/dist/sniffTokenType.d.ts

@@ -0,0 +1,7 @@
+import { TokenType } from "./types.js";
+
+//#region ../config/dist/sniffTokenType.d.ts
+//#region src/sniffTokenType.d.ts
+declare function sniffTokenTypeFromValue(value: string): TokenType | undefined; //#endregion
+//#endregion
+export { sniffTokenTypeFromValue };

package/dist/config/dist/sniffTokenType.js

@@ -0,0 +1,67 @@
+//#region ../config/dist/sniffTokenType.js
+const CSS_WIDE_KEYWORDS = new Set([
+	"inherit",
+	"initial",
+	"unset",
+	"revert",
+	"revert-layer",
+	"auto",
+	"none",
+	"currentColor",
+	"currentcolor",
+	"transparent"
+]);
+const HEX_COLOR_RE = /^#(?:[0-9a-fA-F]{3,4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/;
+const COLOR_FUNCTION_RE = /^(?:rgb|rgba|hsl|hsla|hwb|lab|lch|oklab|oklch|color|color-mix|light-dark)\s*\(/i;
+const NAMED_COLOR_KEYWORDS = new Set([
+	"aliceblue",
+	"antiquewhite",
+	"aqua",
+	"aquamarine",
+	"azure",
+	"beige",
+	"bisque",
+	"black",
+	"blue",
+	"brown",
+	"crimson",
+	"cyan",
+	"fuchsia",
+	"gold",
+	"gray",
+	"grey",
+	"green",
+	"indigo",
+	"lime",
+	"magenta",
+	"maroon",
+	"navy",
+	"olive",
+	"orange",
+	"pink",
+	"purple",
+	"red",
+	"silver",
+	"teal",
+	"violet",
+	"white",
+	"yellow"
+]);
+const NUMBER_RE_SRC = "(?:\\d+(?:\\.\\d+)?|\\.\\d+)";
+const DIMENSION_RE = new RegExp(`^-?${NUMBER_RE_SRC}(?:px|rem|em|%|vh|vw|vmin|vmax|vi|vb|svh|svw|lvh|lvw|dvh|dvw|ch|ex|cap|ic|lh|rlh|pt|pc|in|cm|mm|q|fr|deg|turn|rad|grad)$`, "i");
+const DURATION_RE = new RegExp(`^-?${NUMBER_RE_SRC}(?:ms|s)$`, "i");
+const PURE_NUMBER_RE = new RegExp(`^-?${NUMBER_RE_SRC}$`);
+function sniffTokenTypeFromValue(value) {
+	const v = value.trim();
+	if (v.length === 0) return void 0;
+	if (CSS_WIDE_KEYWORDS.has(v)) return "string";
+	if (v.startsWith("var(")) return void 0;
+	if (COLOR_FUNCTION_RE.test(v)) return "color";
+	if (HEX_COLOR_RE.test(v)) return "color";
+	if (NAMED_COLOR_KEYWORDS.has(v.toLowerCase())) return "color";
+	if (DURATION_RE.test(v)) return "duration";
+	if (DIMENSION_RE.test(v)) return "dimension";
+	if (PURE_NUMBER_RE.test(v)) return "number";
+}
+//#endregion
+export { sniffTokenTypeFromValue };

package/dist/config/dist/style-prop-runtime.d.ts

@@ -1 +1,75 @@
-export { };
+import { UdsConfigData } from "./createConfig.js";
+
+//#region ../config/dist/style-prop-runtime.d.ts
+//#region src/style-prop-runtime.d.ts
+/**
+ * Serialized lookup data the runtime consumes. Built once per config (per
+ * app or per preview-bundle) by `buildStylePropRuntime`. Plain objects so
+ * the whole thing serializes to JSON for codegen embedding.
+ */
+interface StylePropRuntimeData {
+  /** propName → class-generation info. */
+  readonly styleProps: Readonly<Record<string, StylePropEntry>>;
+  /** modifier-prop name (with leading underscore) → resolved selector. */
+  readonly modifiers: Readonly<Record<string, ResolvedModifier>>;
+  /**
+   * Composite group name → variant key → expanded style-prop map.
+   * `<Box elevation="1" />` → look up `composites.elevation['1']`, merge
+   * into the prop bundle, add the marker class `elevation-1`.
+   */
+  readonly composites: Readonly<Record<string, Readonly<Record<string, Readonly<Record<string, unknown>>>>>>;
+}
+interface StylePropEntry {
+  /** Class prefix the prop emits (`bg`, `p`, `rounded`). */
+  readonly classPrefix: string;
+  /** Primary CSS property — fan-out arrays collapse to first entry. */
+  readonly cssProperty: string;
+  /** The CSS variable prefix this prop's tokens live under. Used to build
+   *  `var(--<prefix>-<token>)` for opacity-fallback rule injection. */
+  readonly varPrefix?: string;
+  /** Set on opacity sibling props. */
+  readonly pairedWith?: string;
+  /** Class-name separator for opacity (default `_`). */
+  readonly separator?: string;
+  /** Alias → CSS-value map for literal-alias entries (e.g. `col` → `column`). */
+  readonly literalAliases?: Readonly<Record<string, string>>;
+}
+/**
+ * Selector contribution of a modifier. Two flavors:
+ *   - `pseudo` — appends to the selector, like `:hover`.
+ *   - `ancestor` — wraps the selector, like `.dark &` or `@media (...)`.
+ */
+interface ResolvedModifier {
+  readonly tailwindPrefix: string;
+  readonly kind: 'pseudo' | 'ancestor' | 'at-rule';
+  /** For pseudo: the suffix (`:hover`). For ancestor: the prefix selector (`.dark`). For at-rule: the rule (`(min-width: 640px)`). */
+  readonly selector: string;
+}
+/** Output of `processStyleProps`. */
+interface ProcessStylePropsResult {
+  readonly className: string;
+  /** CSS rules the runtime needs to inject for arbitrary or fallback classes.
+   *  Empty when all input resolves to build-time-known utilities. */
+  readonly dynamicRules: readonly DynamicRule[];
+}
+/** A single CSS rule the consumer should ensure exists in the document. */
+interface DynamicRule {
+  /** Class name the rule targets. Already escaped per CSS spec. */
+  readonly className: string;
+  /** Full selector (`.cls`, `.dark .cls`, `.cls:hover`). */
+  readonly selector: string;
+  /** CSS property in kebab-case. */
+  readonly cssProperty: string;
+  readonly cssValue: string;
+  /** Wrapping at-rule, if any (e.g. `@media (min-width: 640px)`). */
+  readonly atRule?: string;
+}
+interface ProcessStylePropsOpts {
+  /** Compound modifier prefix accumulated through recursion. */
+  readonly modifier?: string;
+}
+declare const BUILT_IN_PSEUDO: Record<string, string>;
+declare function buildStylePropRuntime(config: UdsConfigData): StylePropRuntimeData;
+declare function processStyleProps(props: Record<string, unknown>, runtime: StylePropRuntimeData, opts?: ProcessStylePropsOpts): ProcessStylePropsResult; //#endregion
+//#endregion
+export { BUILT_IN_PSEUDO, DynamicRule, ProcessStylePropsOpts, ProcessStylePropsResult, ResolvedModifier, StylePropEntry, StylePropRuntimeData, buildStylePropRuntime, processStyleProps };