@yahoo/uds-v5-wip 1.35.0 → 1.36.1

package/dist/_virtual/_rolldown/runtime.js

@@ -0,0 +1,13 @@
+//#region \0rolldown/runtime.js
+var __defProp = Object.defineProperty;
+var __exportAll = (all, no_symbols) => {
+	let target = {};
+	for (var name in all) __defProp(target, name, {
+		get: all[name],
+		enumerable: true
+	});
+	if (!no_symbols) __defProp(target, Symbol.toStringTag, { value: "Module" });
+	return target;
+};
+//#endregion
+export { __exportAll };

package/dist/config/dist/component-resolution.d.ts

@@ -1 +1 @@
-export { };
+import { ComponentsConfig } from "@uds/types";

package/dist/config/dist/component-resolution.js

@@ -1,4 +1,4 @@
-import { propMappings } from "../../core/dist/propMappings.js";
+import { propMappings } from "../../core/dist/style-prop-data.js";
 import "../../core/dist/index.js";
 //#region ../config/dist/component-resolution.js
 /**

package/dist/config/dist/consts/defaultColors.d.ts

@@ -1,5 +1,4 @@
 //#region ../config/dist/consts/defaultColors.d.ts
-//#region src/consts/defaultColors.d.ts
 declare const defaultColors: {
   inherit: string;
   current: string;
@@ -248,6 +247,6 @@ declare const defaultColors: {
   'rose-800': string;
   'rose-900': string;
   'rose-950': string;
-}; //#endregion
+};
 //#endregion
 export { defaultColors };

package/dist/config/dist/createConfig.d.ts

@@ -1,9 +1,9 @@
-import { PropertyGroupId } from "./propertyGroups.js";
+import { AnyStyleProp } from "./defineStyleProp.js";
+import { ResolvedStyleProp } from "./resolveStyleProp.js";
 import { TokenType, VarsConfig } from "./types.js";
-import { BaseModifierProp, ComponentsConfig, CompositeStylesConfig, ConfigurableProp, ModifierProp, MotionPreset, RemotionComponentDef, RemotionConfig, RemotionTransitionDef, StyleProp } from "@uds/types";
+import { BaseModifierProp, ComponentsConfig, CompositeStylesConfig, ConfigurableProp, ModifierProp, MotionPreset, RemotionComponentDef, RemotionConfig, RemotionTransitionDef } from "@uds/types";
 
 //#region ../config/dist/createConfig.d.ts
-//#region src/createConfig.d.ts
 type MotionPresetsDef = Record<string, MotionPreset>;
 type MotionAliasValue<TMotion> = TMotion extends Record<string, infer V> ? Extract<V, string> : never;
 type EmptyMotion = {};
@@ -76,22 +76,12 @@ type GetModifierFromInput<I extends ModesInput> = { [SetKey in keyof I]: { [OptK
 } ? M extends ModifierNameShape ? M : never : OptKey extends string ? `_${OptKey}` : never }[keyof I[SetKey]['options']] }[keyof I];
 /** Reject any input whose derived/explicit modifiers collide with reserved names. */
 type CheckForReservedModifiersInput<I extends ModesInput> = true extends HasReservedModifier<GetModifierFromInput<I>> ? 'ERROR: Cannot use reserved modifier names from ModifierProp. Please use a different modifier name.' : I;
-/**
- * Convert the authored object-keyed input into the internal `ModeGroup[]` shape.
- * Derives `_${optionKey}` modifiers when no explicit `modifier` is provided.
- * Never sets `default: true` — the new API has no concept of a default option;
- * downstream consumers treat "no option active" as the implicit default.
- */
 interface ModifierDef {
   modifier: ModifierNameShape;
   selector: string;
   /** Description for AI prompt generation (e.g. "Apply styles on elevation-1 surfaces") */
   description?: string;
 }
-interface ArbitraryTokenGroup {
-  properties: string[];
-  pattern: string | string[];
-}
 type AtomicTokenValue<M extends ModifierNameShape> = {
   name: string;
   value: string;
@@ -151,29 +141,20 @@ interface AtomicToken<M extends ModifierNameShape = ModifierNameShape> {
    */
   cssPrefix?: string;
 }
-/** Merge two token structures */
-type MergeTokens<A, B> = { [K in keyof A | keyof B]: K extends keyof B ? K extends keyof A ? A[K] & B[K] : B[K] : K extends keyof A ? A[K] : never };
-/**
- * Derive token types directly from defineVars namespaces. Each var namespace
- * key becomes a property on `tokens.*` with the namespace's token names.
- *
- * NOTE: We intentionally do NOT add a `Record<string, Record<string, string>>`
- * index-signature fallback here. The fallback used to support property-name
- * access (e.g. `tokens.borderRadius.*` for the `radius` namespace scoped to
- * `borderRadius`), but it caused TypeScript to silently widen every
- * `tokens.<ns>.<name>` access to `string` — typos like
- * `tokens.borderColor.aksjdf` would not be flagged. With the fallback removed,
- * accesses must use the defineVars namespace key (e.g. `tokens.radius.full`,
- * not `tokens.borderRadius.full`); both forms remain valid at runtime.
- */
-type VarsToTokens<TVars extends VarsConfig> = { [K in keyof TVars]: { [T in Exclude<keyof TVars[K], '$type' | '$description'>]: string } };
 /** Empty tokens type for initial state */
 type EmptyTokens = {};
 /** Empty vars type for initial state */
 type EmptyVars = {};
+/**
+ * Derive the runtime `tokens` accessor type from a `defineVars` map. Each
+ * namespace becomes `tokens[ns][tokenName] = string`. `$type` /
+ * `$description` keys are excluded — they're authoring metadata, not tokens.
+ */
+type VarsToTokens<TVars extends VarsConfig> = { [K in keyof TVars]: { [T in Exclude<keyof TVars[K], '$type' | '$description'>]: string } };
+/** Shallow merge of two token-shape records (later wins on collisions). */
+type MergeTokens<A, B> = { [K in keyof A | keyof B]: K extends keyof B ? K extends keyof A ? A[K] & B[K] : B[K] : K extends keyof A ? A[K] : never };
 /** Build a structured token reference object from atomic tokens */
 declare function buildTokenReference(atomic: AtomicToken<ModifierNameShape>[], configPrefix: string): Record<string, Record<string, string>>;
-/** Build a structured composite-styles reference object for use in defineModifiers context */
 /** Global styles definition — CSS selector → style props */
 type GlobalStylesDef = Record<string, Record<string, any>>;
 /** CSS properties for the example wrapper element */
@@ -203,23 +184,10 @@ interface UdsConfigData {
   preflight: boolean;
   prefix: string;
   remotion?: RemotionConfig;
-  arbitraryTokens?: ArbitraryTokenGroup[];
   buildOptions?: BuildOptions;
   examples?: Record<string, ExampleDef>;
   designPrinciples?: string[];
   vars?: VarsConfig;
-  /**
-   * Map each ConfigurableProp to its generated CSS class prefix.
-   * Set via `defineClassNames()`. Falls back to kebab-case of the property name.
-   */
-  classNames?: Record<string, string>;
-  /**
-   * Map each var namespace to the property group IDs it feeds.
-   * Set via `defineScopes()`. This is the canonical source for
-   * "which tokens can this property use" — the Studio UI reads and
-   * edits this via draft patches.
-   */
-  scopes?: Record<string, string[]>;
   /**
    * Token names contributed by any composed preset, keyed by namespace.
    *
@@ -232,6 +200,23 @@ interface UdsConfigData {
    * perspective.
    */
   presetTokenNames?: Record<string, string[]>;
+  /**
+   * Style props registered via `.registerStyleProps([...])`. Authored
+   * elsewhere via `defineStyleProp(...)` and imported into the config.
+   * The canonical input for codegen + runtime in the new architecture.
+   *
+   * Map keyed by JSX prop name (e.g. `bg`, `padding`); each value is the
+   * style-prop record carrying `cssProperty`, `classPrefix`, `values`, etc.
+   */
+  styleProps?: Record<string, AnyStyleProp>;
+  /**
+   * Resolved style props — every registered style prop run through
+   * `resolveStyleProp(propName, prop, config)` at `resolveConfig` time.
+   * Each entry carries the prop's filtered token list, literal keywords,
+   * arbitrary spec, and metadata. Codegen + runtime consume this instead
+   * of walking the raw style-prop records.
+   */
+  resolvedStyleProps?: ResolvedStyleProp[];
 }
 interface ComponentConfig<TComponents extends ComponentsConfig<string> = ComponentsConfig<string>, TMotion extends MotionPresetsDef | undefined = MotionPresetsDef | undefined> {
   name?: string;
@@ -273,7 +258,31 @@ interface UdsConfig<TModifier extends ModifierNameShape = ModifierProp, TTokens
   defineCompositeStyles<const M extends CompositeStylesConfig>(params: M | ((ctx: {
     tokens: TTokens;
   }) => M)): ConfigResult<TModifier, TTokens, TMotion, TExt, TCompositeStyles & M, TModeModifiers, TVars>;
-  defineArbitraryTokens(params: ArbitraryTokenGroup[]): ConfigResult<TModifier, TTokens, TMotion, TExt, TCompositeStyles, TModeModifiers, TVars>;
+  /**
+   * Register style props, keyed by the JSX prop name consumers will use.
+   * Calls accumulate — later `.registerStyleProps({...})` calls merge into
+   * the existing map (later keys overwrite earlier ones with the same name).
+   *
+   * @example
+   * ```ts
+   * uds.registerStyleProps({
+   *   bg: {
+   *     cssProperty: 'background-color',
+   *     classPrefix: 'bg',
+   *     values: ['{global}', '{spectrum}', '{bg}'],
+   *     label: 'Background',
+   *   },
+   *   padding: {
+   *     cssProperty: 'padding',
+   *     classPrefix: 'p',
+   *     arbitrary: 'length-percentage',
+   *     values: ['{spacing}'],
+   *     label: 'Padding',
+   *   },
+   * });
+   * ```
+   */
+  registerStyleProps<const Props extends Record<string, AnyStyleProp>>(props: Props): ConfigResult<TModifier, TTokens, TMotion, TExt, TCompositeStyles, TModeModifiers, TVars>;
   defineMotion<const M extends MotionPresetsDef>(presets: M | ((tokens: TTokens) => M)): ConfigResult<TModifier, TTokens, { [K in keyof M]: string }, TExt, TCompositeStyles, TModeModifiers, TVars>;
   defineComponents(params: ComponentsConfig<MotionAliasValue<TMotion> | string> | ((ctx: {
     tokens: TTokens;
@@ -299,52 +308,11 @@ interface UdsConfig<TModifier extends ModifierNameShape = ModifierProp, TTokens
   defineRemotionTransitions(params: Record<string, RemotionTransitionDef> | ((ctx: {
     tokens: TTokens;
   }) => Record<string, RemotionTransitionDef>)): ConfigResult<TModifier, TTokens, TMotion, TExt, TCompositeStyles, TModeModifiers, TVars>;
-  defineVars<const TVarsNew extends VarsConfig<[TModeModifiers] extends [never] ? `_${string}` : TModeModifiers>>(vars: TVarsNew): ConfigResult<TModifier, TTokens, TMotion, TExt, TCompositeStyles, TModeModifiers, TVars & TVarsNew>;
-  /**
-   * Map each ConfigurableProp to a CSS class prefix.
-   * Falls back to kebab-case of the property name when not specified.
-   * Typically called once by the foundational preset — consumers rarely touch this.
-   *
-   * @example
-   * ```ts
-   * uds.defineClassNames({
-   *   color: 'text',
-   *   bg: 'bg',
-   *   borderColor: 'border-color',
-   *   spacing: 'p',
-   *   gap: 'gap',
-   *   borderRadius: 'rounded',
-   * })
-   * ```
-   */
-  defineClassNames(classNames: { [K in StyleProp]?: string }): ConfigResult<TModifier, TTokens, TMotion, TExt, TCompositeStyles, TModeModifiers, TVars>;
-  /**
-   * Map var namespaces to property groups, defining which tokens each property
-   * group can reference. This is the canonical scope definition — the Studio UI
-   * renders it as checkboxes per token group.
-   *
-   * @example
-   * ```ts
-   * uds
-   *   .defineVars({
-   *     color: { brand: { value: '#1167f4' } },
-   *     spacing: { sm: { value: '4px' } },
-   *   })
-   *   .defineScopes({
-   *     color: ['textColor', 'background', 'borderColor', 'ringColor'],
-   *     spacing: ['padding', 'gap', 'margin'],
-   *   })
-   * ```
-   */
-  defineScopes(scopes: [keyof TVars] extends [never] ? Record<string, PropertyGroupId[]> : { [K in keyof TVars]?: PropertyGroupId[] }): ConfigResult<TModifier, MergeTokens<TTokens, VarsToTokens<TVars>>, TMotion, TExt, TCompositeStyles, TModeModifiers, TVars>;
+  defineVars<const TVarsNew extends VarsConfig<[TModeModifiers] extends [never] ? `_${string}` : TModeModifiers>>(vars: TVarsNew): ConfigResult<TModifier, MergeTokens<TTokens, VarsToTokens<TVars & TVarsNew>>, TMotion, TExt, TCompositeStyles, TModeModifiers, TVars & TVarsNew>;
 }
 type AnyUdsConfig = UdsConfig<ModifierNameShape, any, any, any, any, any, any>;
 /** Extract the raw config data from a builder instance */
 declare function resolveConfig(config: AnyUdsConfig): UdsConfigData;
-/**
- * Resolve configuration with all token references replaced by their raw values.
- * Useful for tools that need the actual values (e.g. anatomy generation).
- */
 declare function createConfigBuilder<TModifier extends ModifierNameShape = ModifierProp, TTokens = EmptyTokens, TMotion = EmptyMotion, TExt extends Record<string, any> = {}, TCompositeStyles = EmptyCompositeStyles, TModeModifiers extends ModifierNameShape = never, TVars extends VarsConfig = EmptyVars>(data: UdsConfigData, extensions?: TExt): UdsConfig<TModifier, TTokens, TMotion, TExt, TCompositeStyles, TModeModifiers, TVars> & TExt;
 interface InterpolateMarker {
   __type: 'interpolate';
@@ -354,4 +322,4 @@ interface InterpolateMarker {
 declare function darker(color: string, amount: number): string;
 declare function lighter(color: string, amount: number): string;
 //#endregion
-export { ArbitraryTokenGroup, AtomicToken, BuildOptions, CheckForReservedModifiersInput, ComponentConfig, DefineComponentInput, DefineComponentMotionInput, ExampleDef, ExampleEntryDef, ExampleLayoutStyles, GetModifierFromInput, GlobalStylesDef, InterpolateMarker, ModeGroup, ModeOption, ModeOptionInput, ModeSetInput, ModesInput, ModifierDef, MotionPresetsDef, UdsConfig, UdsConfigData, buildTokenReference, createConfigBuilder, darker, lighter, resolveConfig };
+export { AtomicToken, BuildOptions, CheckForReservedModifiersInput, ComponentConfig, DefineComponentInput, DefineComponentMotionInput, ExampleDef, ExampleEntryDef, ExampleLayoutStyles, GetModifierFromInput, GlobalStylesDef, InterpolateMarker, ModeGroup, ModeOption, ModeOptionInput, ModeSetInput, ModesInput, ModifierDef, MotionPresetsDef, UdsConfig, UdsConfigData, buildTokenReference, createConfigBuilder, darker, lighter, resolveConfig };

package/dist/config/dist/createConfig.js

@@ -1,11 +1,11 @@
 import { kebabCase } from "../../utils/dist/string-utils/kebabCase.js";
 import { safeTokenName } from "../../utils/dist/string-utils/cssVar.js";
 import "../../utils/dist/index.js";
-import { getConfigurablePropMapping } from "../../core/dist/propMappings.js";
+import { getConfigurablePropMapping } from "../../core/dist/configurable-prop-helpers.js";
 import "../../core/dist/index.js";
 import { buildMotionReference, resolveComponentMotionAliases, validateComponentVariants } from "./component-resolution.js";
-import { expandPropertyGroups } from "./propertyGroups.js";
 import { resolveTokenType, sniffTokenTypeFromValue } from "./resolveTokenTypes.js";
+import { resolveStyleProp } from "./resolveStyleProp.js";
 import { applyPresetToData, deepMerge, mergeAtomic } from "./preset-merge.js";
 //#region ../config/dist/createConfig.js
 /** biome-ignore-all lint/suspicious/noExplicitAny: necessary for dynamic builder to work correctly */
@@ -138,44 +138,59 @@ function varGroupToTokens(varGroup, knownModifiers) {
 	};
 }
 /**
-* Sort properties so the one matching the cssPrefix comes last.
-* `buildVarToTokenMap` uses "last wins", so this ensures e.g. `color.brand`
-* beats `shadowColor.brand` when both reference `var(--uds-color-brand)`.
+* For each var namespace, derive the list of style-prop names that consume
+* it by inverting `registerStyleProps(...).values`. A styleProp with
+* `values: ['{bg}', '{global}']` is recorded as consuming `bg` and `global`;
+* a `{ ref: '{bg}', namespace: 'background' }` namespaced ref counts the
+* same. Token-key refs like `'{spacing.4}'` also count toward `spacing`.
 */
-function sortPropertiesByPrefixMatch(properties, namespace, cssPfx) {
-	return properties.slice().sort((a, b) => {
-		return (a === namespace || kebabCase(a) === cssPfx ? 1 : 0) - (b === namespace || kebabCase(b) === cssPfx ? 1 : 0);
-	});
+function buildNamespaceConsumers(styleProps) {
+	const result = /* @__PURE__ */ new Map();
+	if (!styleProps) return result;
+	const refRe = /^\{([^.{}]+)/;
+	const addConsumer = (namespace, propName) => {
+		const list = result.get(namespace);
+		if (!list) {
+			result.set(namespace, [propName]);
+			return;
+		}
+		if (!list.includes(propName)) list.push(propName);
+	};
+	for (const [propName, prop] of Object.entries(styleProps)) for (const entry of prop.values ?? []) {
+		let raw;
+		if (typeof entry === "string") raw = entry;
+		else if (entry !== null && typeof entry === "object" && "ref" in entry && typeof entry.ref === "string") raw = entry.ref;
+		if (!raw) continue;
+		const match = refRe.exec(raw);
+		if (!match || !match[1]) continue;
+		addConsumer(match[1], propName);
+	}
+	return result;
 }
 /**
-* Synthesize AtomicToken[] from defineScopes + defineVars data.
-*
-* For each namespace in `scopes`, expands property group IDs into
-* ConfigurableProps, extracts tokens from the matching var namespace,
-* and produces an AtomicToken group.
+* Synthesize AtomicToken[] from defineVars + registerStyleProps data. For
+* each var namespace, emits an AtomicToken group whose `properties` list is
+* the set of style props that reference that namespace (or any key inside
+* it) via their `values` field. Replaces the older
+* `synthesizeAtomicFromScopesAndVars` once a config has retired
+* `defineScopes` in favor of per-prop `defineStyleProp({ values })`.
 */
-function synthesizeAtomicFromScopesAndVars(vars, scopes, modes) {
+function synthesizeAtomicFromVarsAndStyleProps(vars, styleProps, modes) {
 	const knownModifiers = /* @__PURE__ */ new Set();
 	for (const mode of modes) for (const option of mode.options) knownModifiers.add(option.modifier);
+	const consumers = buildNamespaceConsumers(styleProps);
 	const result = [];
-	for (const [namespace, groupIds] of Object.entries(scopes)) {
-		const varGroup = vars[namespace];
-		if (!varGroup) continue;
-		const properties = expandPropertyGroups(groupIds);
-		if (properties.length === 0) continue;
+	for (const [namespace, varGroup] of Object.entries(vars)) {
 		const { tokens, groupType, groupDescription } = varGroupToTokens(varGroup, knownModifiers);
-		const cssPfx = (properties.includes(namespace) ? getConfigurablePropMapping(namespace) : void 0)?.defaultVarPrefix ?? kebabCase(namespace);
-		const sorted = sortPropertiesByPrefixMatch(properties, namespace, cssPfx);
-		const resolvedGroupType = resolveTokenType({
-			explicit: groupType,
-			scopes: groupIds
-		});
+		const properties = consumers.get(namespace) ?? [];
+		const cssPfx = kebabCase(namespace);
+		const resolvedGroupType = resolveTokenType({ explicit: groupType });
 		if (resolvedGroupType && resolvedGroupType !== "string") for (const token of tokens) {
 			if (token.type) continue;
 			if (sniffTokenTypeFromValue(token.value) === "string") token.type = "string";
 		}
 		result.push({
-			properties: sorted,
+			properties,
 			tokens,
 			namespace,
 			cssPrefix: cssPfx,
@@ -183,65 +198,6 @@ function synthesizeAtomicFromScopesAndVars(vars, scopes, modes) {
 			...groupDescription ? { description: groupDescription } : {}
 		});
 	}
-	return disambiguateOverlappingProperties(result, scopes);
-}
-/**
-* When multiple scope namespaces reference the **same** property group
-* (e.g. `rotate`, `scale`, `skew`, `translate` all mapping to `['transform']`),
-* each namespace's AtomicToken gets ALL properties from that group, causing
-* last-write-wins collisions in CSS generation.
-*
-* This function partitions those shared-group properties among namespaces
-* using longest camelCase prefix matching. Cross-group overlaps (e.g.
-* `color` and `bg` both including the `bg` property via different groups)
-* are intentional cascading and left untouched.
-*/
-function disambiguateOverlappingProperties(tokens, scopes) {
-	const groupToNamespaces = /* @__PURE__ */ new Map();
-	for (const [ns, groupIds] of Object.entries(scopes)) for (const gid of groupIds) {
-		const list = groupToNamespaces.get(gid) ?? [];
-		list.push(ns);
-		groupToNamespaces.set(gid, list);
-	}
-	const contestedGroups = /* @__PURE__ */ new Map();
-	for (const [gid, nsList] of groupToNamespaces) if (nsList.length > 1) contestedGroups.set(gid, nsList);
-	if (contestedGroups.size === 0) return tokens;
-	const propOwner = /* @__PURE__ */ new Map();
-	for (const [gid, nsList] of contestedGroups) {
-		const groupProps = expandPropertyGroups([gid]);
-		const assignments = /* @__PURE__ */ new Map();
-		const nsWithMatch = /* @__PURE__ */ new Set();
-		for (const prop of groupProps) {
-			let bestNs = "";
-			let bestLen = 0;
-			for (const ns of nsList) if (prop === ns || prop.startsWith(ns) && prop.length > ns.length) {
-				if (ns.length > bestLen) {
-					bestNs = ns;
-					bestLen = ns.length;
-				}
-			}
-			if (bestNs) {
-				assignments.set(prop, bestNs);
-				nsWithMatch.add(bestNs);
-			}
-		}
-		if (nsWithMatch.size < 2) continue;
-		for (const [prop, ns] of assignments) propOwner.set(prop, ns);
-	}
-	if (propOwner.size === 0) return tokens;
-	const namespaces = Object.keys(scopes);
-	const result = [];
-	for (const token of tokens) {
-		const ns = namespaces.find((n) => token.cssPrefix === kebabCase(n)) ?? "";
-		const filtered = token.properties.filter((prop) => {
-			const owner = propOwner.get(prop);
-			return !owner || owner === ns;
-		});
-		if (filtered.length > 0) result.push({
-			...token,
-			properties: filtered
-		});
-	}
 	return result;
 }
 /** Extract the raw config data from a builder instance */
@@ -258,24 +214,32 @@ function resolveConfig(config) {
 		globalStyles: config.globalStyles ?? {},
 		preflight: config.preflight ?? true,
 		prefix: config.prefix ?? "uds",
-		arbitraryTokens: config.arbitraryTokens,
 		remotion: config.remotion,
 		buildOptions: config.buildOptions,
 		examples: config.examples,
 		designPrinciples: config.designPrinciples,
 		vars: config.vars,
-		classNames: config.classNames,
-		scopes: config.scopes,
-		presetTokenNames: config.presetTokenNames
+		presetTokenNames: config.presetTokenNames,
+		styleProps: config.styleProps
 	};
-	if (configData.vars && configData.scopes) {
-		const synthesized = synthesizeAtomicFromScopesAndVars(configData.vars, configData.scopes, configData.modes);
+	if (configData.vars) {
+		const synthesized = synthesizeAtomicFromVarsAndStyleProps(configData.vars, configData.styleProps, configData.modes);
 		const atomic = mergeAtomic(configData.atomic, synthesized, "merge");
 		configData = {
 			...configData,
 			atomic
 		};
 	}
+	if (configData.styleProps) {
+		const entries = Object.entries(configData.styleProps);
+		if (entries.length > 0) {
+			const resolved = entries.map(([propName, prop]) => resolveStyleProp(propName, prop, configData));
+			configData = {
+				...configData,
+				resolvedStyleProps: resolved
+			};
+		}
+	}
 	return configData;
 }
 function mergeRemotionConfig(existing, incoming) {
@@ -321,13 +285,10 @@ function resolvePresetData(input) {
 		globalStyles: input.globalStyles ?? {},
 		preflight: input.preflight ?? true,
 		prefix: input.prefix ?? "uds",
-		arbitraryTokens: input.arbitraryTokens,
 		remotion: input.remotion,
 		examples: input.examples,
 		designPrinciples: input.designPrinciples,
 		vars: input.vars,
-		classNames: input.classNames,
-		scopes: input.scopes,
 		presetTokenNames: input.presetTokenNames
 	};
 }
@@ -335,52 +296,32 @@ function extractVarReferences(value) {
 	if (typeof value !== "string") return [];
 	return value.match(/var\([^()]+\)/g) ?? [];
 }
-function collectRequiredTokensFromObject(value, varToToken, out) {
+function collectRequiredTokensFromObject(value, out) {
 	if (value == null) return;
 	if (typeof value === "string") {
 		const refs = extractVarReferences(value);
-		for (const ref of refs) {
-			const token = varToToken.get(ref);
-			if (token) out.add(token);
-		}
+		for (const ref of refs) out.add(ref);
 		return;
 	}
 	if (Array.isArray(value)) {
-		for (const item of value) collectRequiredTokensFromObject(item, varToToken, out);
+		for (const item of value) collectRequiredTokensFromObject(item, out);
 		return;
 	}
-	if (typeof value === "object") for (const child of Object.values(value)) collectRequiredTokensFromObject(child, varToToken, out);
-}
-function buildVarToTokenMap(data) {
-	const tokenReference = buildTokenReference(data.atomic, data.prefix);
-	const map = /* @__PURE__ */ new Map();
-	for (const [prop, tokens] of Object.entries(tokenReference)) for (const [tokenName, tokenRef] of Object.entries(tokens)) map.set(tokenRef, `${prop}.${tokenName}`);
-	return map;
+	if (typeof value === "object") for (const child of Object.values(value)) collectRequiredTokensFromObject(child, out);
 }
-function collectRequiredTokens(sourceData, components, motion) {
+/**
+* Collect the set of `var(--uds-X-Y)` references a component preset uses, so
+* downstream `compose()` calls can verify the target config emits those
+* variables. Storing raw var refs (instead of `propName.tokenKey` pairs)
+* decouples the check from prop/namespace association lookups — only the
+* actual CSS variable surface needs to be compatible.
+*/
+function collectRequiredTokens(_sourceData, components, motion) {
 	const out = /* @__PURE__ */ new Set();
-	const varToToken = buildVarToTokenMap(sourceData);
-	collectRequiredTokensFromObject(components, varToToken, out);
-	if (motion) collectRequiredTokensFromObject(motion, varToToken, out);
+	collectRequiredTokensFromObject(components, out);
+	if (motion) collectRequiredTokensFromObject(motion, out);
 	return Array.from(out).sort();
 }
-function availableTokenNames(data) {
-	const names = /* @__PURE__ */ new Set();
-	for (const group of data.atomic) for (const token of group.tokens) {
-		for (const prop of group.properties) names.add(`${prop}.${token.name}`);
-		if (group.cssPrefix) names.add(`${group.cssPrefix}.${token.name}`);
-		if (group.namespace && group.namespace !== group.cssPrefix) names.add(`${group.namespace}.${token.name}`);
-	}
-	return names;
-}
-function validatePresetRequiredTokens(base, preset) {
-	if (preset.requiredTokens.length === 0) return;
-	const available = availableTokenNames(base);
-	const missing = preset.requiredTokens.filter((name) => !available.has(name));
-	if (missing.length === 0) return;
-	const presetLabel = preset.name ? `"${preset.name}"` : "component preset";
-	throw new Error(`Cannot compose ${presetLabel}: missing required tokens in current preset: ${missing.join(", ")}`);
-}
 function buildComponentsAccessor(components) {
 	const accessor = {};
 	for (const [name, config] of Object.entries(components)) {
@@ -477,8 +418,14 @@ function createConfigBuilder(data, extensions) {
 				}
 			}, extensions);
 		},
-		defineArbitraryTokens(params) {
-			return next({ arbitraryTokens: [...data.arbitraryTokens ?? [], ...params] });
+		registerStyleProps(props) {
+			const mergedStyleProps = {
+				...data.styleProps ?? {},
+				...props
+			};
+			const updates = { styleProps: mergedStyleProps };
+			if (data.vars) updates.atomic = mergeAtomic([], synthesizeAtomicFromVarsAndStyleProps(data.vars, mergedStyleProps, data.modes ?? []), "override");
+			return next(updates);
 		},
 		defineMotion(presets) {
 			const tokenReference = buildTokenReference(data.atomic, data.prefix);
@@ -532,7 +479,6 @@ function createConfigBuilder(data, extensions) {
 		},
 		compose(...presets) {
 			return createConfigBuilder(presets.reduce((acc, preset) => {
-				if (isComponentDefinition(preset)) validatePresetRequiredTokens(acc, preset);
 				return applyPresetToData(acc, resolvePresetData(preset));
 			}, data), extensions);
 		},
@@ -572,7 +518,6 @@ function createConfigBuilder(data, extensions) {
 				globalStyles: input.globalStyles ?? data.globalStyles,
 				preflight: input.preflight ?? data.preflight,
 				prefix: input.prefix ?? data.prefix,
-				arbitraryTokens: input.arbitraryTokens ?? data.arbitraryTokens,
 				examples: input.examples ?? data.examples,
 				designPrinciples: input.designPrinciples ?? data.designPrinciples,
 				vars: input.vars ?? data.vars,
@@ -655,32 +600,11 @@ function createConfigBuilder(data, extensions) {
 				...merged[namespace] ?? {},
 				...group
 			};
-			const updates = { vars: merged };
-			if (data.scopes && Object.keys(data.scopes).length > 0) {
-				const synthesized = synthesizeAtomicFromScopesAndVars(merged, data.scopes, data.modes ?? []);
-				updates.atomic = mergeAtomic(data.atomic, synthesized, "merge");
-			}
-			return createConfigBuilder({
-				...data,
-				...updates
-			}, extensions);
-		},
-		defineClassNames(classNames) {
-			return next({ classNames: {
-				...data.classNames,
-				...classNames
-			} });
-		},
-		defineScopes(scopes) {
-			const mergedScopes = {
-				...data.scopes,
-				...scopes
+			const synthesized = synthesizeAtomicFromVarsAndStyleProps(merged, data.styleProps, data.modes ?? []);
+			const updates = {
+				vars: merged,
+				atomic: mergeAtomic(data.atomic, synthesized, "merge")
 			};
-			const updates = { scopes: mergedScopes };
-			if (data.vars && Object.keys(data.vars).length > 0) {
-				const synthesized = synthesizeAtomicFromScopesAndVars(data.vars, mergedScopes, data.modes ?? []);
-				updates.atomic = mergeAtomic(data.atomic ?? [], synthesized, "merge");
-			}
 			return createConfigBuilder({
 				...data,
 				...updates

package/dist/config/dist/defineStyleProp.d.ts

@@ -0,0 +1,45 @@
+import { CssValue, CssValueTypeName } from "./types/css-values.js";
+
+//#region ../config/dist/defineStyleProp.d.ts
+/** Runtime input type for `toCss` based on the entry's `type`. */
+type ArbitraryRuntimeValue<T extends CssValueTypeName> = T extends 'integer' | 'number' ? number : string;
+/**
+ * One entry in a multi-shape `arbitrary` array. The first entry whose `type`
+ * (or `pattern`, for `'regex'`) matches the runtime value wins.
+ */
+type ArbitraryEntry = { [T in CssValueTypeName]: {
+  type: T;
+  toCss?: (value: ArbitraryRuntimeValue<T>) => string;
+} }[CssValueTypeName] | {
+  type: 'regex';
+  pattern: RegExp;
+  toCss?: (value: string) => string;
+};
+/**
+ * Shape of the `arbitrary` field on a style prop:
+ *  - A bare value-type name (`'length-percentage'`, `'color'`, etc.) for the
+ *    single-shape case.
+ *  - An array of {@link ArbitraryEntry} for multi-shape acceptance.
+ */
+type ArbitrarySpec = CssValueTypeName | readonly ArbitraryEntry[];
+type StylePropMetadata = {
+  label?: string;
+  description?: string;
+};
+/**
+ * Structurally-loose form of {@link StyleProp}. Any concrete `StyleProp<P>`
+ * is assignable to this. Used at registration / resolution boundaries where
+ * the generic `P` would otherwise cause TS2590 by re-expanding
+ * `ValuesEntry<P>` across the full property union.
+ */
+interface AnyStyleProp {
+  readonly kind: 'styleProp';
+  readonly cssProperty: string;
+  readonly classPrefix: string;
+  readonly values: readonly unknown[];
+  readonly arbitrary?: ArbitrarySpec;
+  readonly cssType?: CssValueTypeName;
+  readonly metadata: StylePropMetadata;
+}
+//#endregion
+export { AnyStyleProp, ArbitraryEntry, ArbitrarySpec, StylePropMetadata };