@yahoo/uds-v5-wip 1.36.0 → 1.37.0

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/createConfig.d.ts

@@ -1,8 +1,7 @@
 import { AnyStyleProp } from "./defineStyleProp.js";
-import { PropertyGroupId } from "./propertyGroups.js";
 import { TokenType, VarsConfig } from "./types.js";
 import { ResolvedStyleProp } from "./resolveStyleProp.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
@@ -90,10 +89,6 @@ interface ModifierDef {
   /** 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;
@@ -153,26 +148,18 @@ 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 */
@@ -205,23 +192,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.
    *
@@ -292,7 +266,6 @@ 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
@@ -343,44 +316,7 @@ 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 */
@@ -398,4 +334,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,13 +1,12 @@
 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 { applyPresetToData, deepMerge, mergeAtomic } from "./preset-merge.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 */
 /**
@@ -139,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,
@@ -184,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 */
@@ -259,19 +214,16 @@ 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,
 		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,
@@ -333,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
 	};
 }
@@ -347,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)) {
@@ -489,14 +418,14 @@ function createConfigBuilder(data, extensions) {
 				}
 			}, extensions);
 		},
-		defineArbitraryTokens(params) {
-			return next({ arbitraryTokens: [...data.arbitraryTokens ?? [], ...params] });
-		},
 		registerStyleProps(props) {
-			return next({ styleProps: {
+			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);
@@ -550,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);
 		},
@@ -590,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,
@@ -673,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/defineComponent.d.ts

@@ -0,0 +1 @@
+export { };

package/dist/config/dist/defineStyleProp.js

@@ -0,0 +1,25 @@
+//#region ../config/dist/defineStyleProp.js
+const CUSTOM_PROPERTY_PREFIX = "--";
+/**
+* Author a style prop. Returns a builder whose `.metadata({...})` finalizes
+* the {@link StyleProp} record. Pure — no global registration.
+*/
+function defineStyleProp(spec) {
+	const { cssProperty, classPrefix, values, arbitrary, cssType } = spec;
+	const isCustomProperty = cssProperty.startsWith(CUSTOM_PROPERTY_PREFIX);
+	if (isCustomProperty && cssType === void 0) throw new Error(`defineStyleProp: cssType is required for custom CSS properties (got cssProperty=${JSON.stringify(cssProperty)}).`);
+	if (!isCustomProperty && cssType !== void 0) throw new Error(`defineStyleProp: cssType is only allowed for custom CSS properties (--*). Got cssProperty=${JSON.stringify(cssProperty)} with cssType=${JSON.stringify(cssType)}.`);
+	return { metadata(meta = {}) {
+		return {
+			kind: "styleProp",
+			cssProperty,
+			classPrefix,
+			values: values ?? [],
+			arbitrary,
+			cssType,
+			metadata: meta
+		};
+	} };
+}
+//#endregion
+export { defineStyleProp };

package/dist/config/dist/index.d.ts

@@ -1,9 +1,8 @@
 import { defaultColors } from "./consts/defaultColors.js";
 import { ColorFn, ColorKeyword, CssAngle, CssColor, CssLength, CssPercentage, CssRatio, CssTime, CssValue, CssValueTypeName, HexColor, HslColor, RgbColor } from "./types/css-values.js";
 import { AnyStyleProp, ArbitraryEntry, ArbitrarySpec, StylePropMetadata } from "./defineStyleProp.js";
-import { PropertyGroupId } from "./propertyGroups.js";
 import { TokenType, VarGroupDef, VarTokenDef, VarsConfig } from "./types.js";
-import { 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 } from "./createConfig.js";
+import { 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 } from "./createConfig.js";
 import { ResolvedStyleProp, ResolvedToken } from "./resolveStyleProp.js";
 import { SerializedConfig, TokenRef, buildReverseMap, deserializeConfig, serializeConfig } from "./serialize.js";
 import { ComponentsConfig as ComponentsConfig$1 } from "@uds/types";

package/dist/config/dist/index.js

@@ -1,8 +1,10 @@
 import "./consts/defaultColors.js";
 import "./component-resolution.js";
-import "./propertyGroups.js";
 import "./propertyAcceptedTypes.js";
 import "./resolveTokenTypes.js";
 import "./resolveStyleProp.js";
 import "./createConfig.js";
+import "./defineStyleProp.js";
+import "./propertyGroups.js";
+import "./refs.js";
 import "./serialize.js";

package/dist/config/dist/preset-merge.js

@@ -148,16 +148,7 @@ function applyPresetToData(base, preset, strategy) {
 	};
 	const mergedExamples = base.examples || preset.examples ? mergeRecordByKey(base.examples ?? {}, preset.examples ?? {}, s.examples) : void 0;
 	const mergedPrinciples = base.designPrinciples || preset.designPrinciples ? [...base.designPrinciples ?? [], ...preset.designPrinciples ?? []] : void 0;
-	const mergedArbitraryTokens = base.arbitraryTokens || preset.arbitraryTokens ? [...base.arbitraryTokens ?? [], ...preset.arbitraryTokens ?? []] : void 0;
 	const mergedVars = base.vars || preset.vars ? mergeRecordByKey(base.vars ?? {}, preset.vars ?? {}, "merge") : void 0;
-	const mergedClassNames = base.classNames || preset.classNames ? {
-		...base.classNames,
-		...preset.classNames
-	} : void 0;
-	const mergedScopes = base.scopes || preset.scopes ? {
-		...base.scopes,
-		...preset.scopes
-	} : void 0;
 	const merged = {
 		...base,
 		modes: mergeModes(base.modes, preset.modes, s.modes),
@@ -171,12 +162,9 @@ function applyPresetToData(base, preset, strategy) {
 		components: mergeRecordByKey(base.components, preset.components, s.components),
 		globalStyles: mergeRecordByKey(base.globalStyles, preset.globalStyles, s.globalStyles),
 		remotion: mergeRemotionConfig(base.remotion, preset.remotion),
-		arbitraryTokens: mergedArbitraryTokens,
 		examples: mergedExamples,
 		designPrinciples: mergedPrinciples,
 		vars: mergedVars,
-		classNames: mergedClassNames,
-		scopes: mergedScopes,
 		presetTokenNames: mergePresetTokenNames(base, preset)
 	};
 	validateComponentVariants(merged.components);

package/dist/config/dist/propertyAcceptedTypes.js

@@ -57,7 +57,10 @@ const CSS_WIDE_KEYWORDS = new Set([
 	"initial",
 	"unset",
 	"revert",
-	"revert-layer"
+	"revert-layer",
+	"transparent",
+	"currentColor",
+	"currentcolor"
 ]);
 const LENGTH_PCT_PROPS = [
 	"gap",
@@ -184,11 +187,21 @@ const PROPERTY_ACCEPTED_TYPES = new Map([
 	] }],
 	["font-family", { types: ["font-family"] }],
 	["transition-timing-function", { types: ["easing-function"] }],
-	["box-shadow", { types: ["shadow"] }],
-	["text-shadow", { types: ["shadow"] }],
+	["box-shadow", {
+		types: ["shadow"],
+		literals: ["none"]
+	}],
+	["text-shadow", {
+		types: ["shadow"],
+		literals: ["none"]
+	}],
 	["list-style-image", { types: ["url", "image"] }],
 	["aspect-ratio", { types: ["ratio", "number"] }],
-	["opacity", { types: ["number", "percentage"] }]
+	["opacity", { types: ["number", "percentage"] }],
+	["z-index", {
+		types: ["integer", "number"],
+		literals: ["auto"]
+	}]
 ]);
 /**
 * Whether a token with the given detected value type AND raw string value

package/dist/config/dist/propertyGroups.d.ts

@@ -1,11 +1 @@
-import { ConfigurableProp } from "@uds/types";
-
-//#region ../config/dist/propertyGroups.d.ts
-//#region src/propertyGroups.d.ts
-type PropertyGroupId = 'textColor' | 'background' | 'borderColor' | 'outlineColor' | 'ringColor' | 'divideColor' | 'shadowColor' | 'svgFill' | 'svgStroke' | 'caretColor' | 'textDecorationColor' | 'opacity' | 'colorOpacity' | 'bgOpacity' | 'borderColorOpacity' | 'divideColorOpacity' | 'outlineColorOpacity' | 'ringColorOpacity' | 'textDecorationColorOpacity' | 'svgFillOpacity' | 'svgStrokeOpacity' | 'shadowColorOpacity' | 'caretColorOpacity' | 'fontFamily' | 'fontSize' | 'fontWeight' | 'lineHeight' | 'letterSpacing' | 'blur' | 'backdropBlur' | 'animation' | 'shadow' | 'textShadow' | 'zIndex' | 'borderWidth' | 'borderRadius' | 'outlineWidth' | 'divideWidth' | 'ringWidth' | 'padding' | 'margin' | 'offset' | 'gap' | 'indent' | 'scrollSnapGap' | 'scrollSnapSpacing' | 'tableBorderSpacing' | 'width' | 'height' | 'aspectRatio' | 'positionPlacement' | 'flex' | 'transform' | 'strokeWidth';
-/**
- * A logical grouping of ConfigurableProps with a human-readable label.
- * Used by the Studio UI to let users scope token groups to specific properties.
- */
-//#endregion
-export { PropertyGroupId };
+import { ConfigurableProp } from "@uds/types";

package/dist/config/dist/propertyGroups.js

@@ -394,7 +394,7 @@ const ALL_PROPERTY_GROUPS = [
 		properties: ["strokeWidth"]
 	}
 ];
-const groupById = new Map(ALL_PROPERTY_GROUPS.map((g) => [g.id, g]));
+new Map(ALL_PROPERTY_GROUPS.map((g) => [g.id, g]));
 const propToGroupId = /* @__PURE__ */ new Map();
 for (const group of ALL_PROPERTY_GROUPS) for (const prop of group.properties) propToGroupId.set(prop, group.id);
 const COLOR_GROUPS = [
@@ -411,22 +411,4 @@ const COLOR_GROUPS = [
 	"textDecorationColor"
 ];
 [...COLOR_GROUPS], [...COLOR_GROUPS], [...COLOR_GROUPS];
-/**
-* Given an array of group IDs, returns the flat union of all their
-* member ConfigurableProps (deduplicated).
-*/
-function expandPropertyGroups(groupIds) {
-	const seen = /* @__PURE__ */ new Set();
-	const result = [];
-	for (const id of groupIds) {
-		const group = groupById.get(id);
-		if (!group) continue;
-		for (const prop of group.properties) if (!seen.has(prop)) {
-			seen.add(prop);
-			result.push(prop);
-		}
-	}
-	return result;
-}
 //#endregion
-export { expandPropertyGroups };

package/dist/config/dist/refs.js

@@ -0,0 +1 @@
+import "../../utils/dist/index.js";