@yahoo/uds-create-config 1.1.1

package/dist/factories.js

@@ -0,0 +1,393 @@
+import { attachSourcePath, captureCallerPath } from "./captureCallerPath.js";
+import { composite, styleProp, tag, token } from "./refs.js";
+import { darken, lighten } from "./colorExpressions.js";
+import "./defineProvider.js";
+//#region src/factories.ts
+function defineTokenGroup(t) {
+	const out = {
+		tokens: t,
+		metadata(meta) {
+			if (meta.label !== void 0) out.label = meta.label;
+			if (meta.description !== void 0) out.description = meta.description;
+			return out;
+		}
+	};
+	attachSourcePath(out, captureCallerPath());
+	Object.defineProperty(out, "metadata", {
+		enumerable: false,
+		configurable: true,
+		writable: true,
+		value: out.metadata
+	});
+	return out;
+}
+function defineModifier(t) {
+	return attachSourcePath(t, captureCallerPath());
+}
+function defineMode(t) {
+	return attachSourcePath(t, captureCallerPath());
+}
+function defineCompositeStyle(t) {
+	return attachSourcePath(t, captureCallerPath());
+}
+function defineMotion(t) {
+	return attachSourcePath(t, captureCallerPath());
+}
+function defineComponentGroup(t) {
+	return attachSourcePath(t, captureCallerPath());
+}
+/**
+* Author a style-prop spec. `P` is inferred from `cssProperty` so the
+* `values` array narrows against the chosen CSS property's accepted
+* keyword union (`'transparent'` is OK for `border-color`, errors for
+* `padding`). For custom properties (`--foo`), `values` accepts open
+* strings — `cssType` constrains the runtime value space instead.
+*
+* Returns the spec with a non-enumerable `.metadata({...})` chain;
+* the chain merges the supplied bag into `spec.metadata` so multiple
+* `.metadata({...})` calls accumulate.
+*/
+function defineStyleProp(spec) {
+	const attached = attachSourcePath(spec, captureCallerPath());
+	Object.defineProperty(attached, "metadata", {
+		enumerable: false,
+		configurable: true,
+		writable: true,
+		value(meta) {
+			attached.metadata = {
+				...attached.metadata ?? {},
+				...meta
+			};
+			return attached;
+		}
+	});
+	Object.defineProperty(attached, "withOpacity", {
+		enumerable: false,
+		configurable: true,
+		writable: true,
+		value(opacitySpec) {
+			attached.opacityPair = {
+				as: opacitySpec.as,
+				values: opacitySpec.values,
+				separator: opacitySpec.separator ?? "_",
+				ref: opacitySpec.as
+			};
+			return attached;
+		}
+	});
+	return attached;
+}
+function slot(pathOrOptions, options) {
+	let marker;
+	const openOptions = typeof pathOrOptions === "object" ? pathOrOptions : void 0;
+	const pathOrLayer = typeof pathOrOptions === "string" ? pathOrOptions : void 0;
+	const valueType = openOptions?.type ?? options?.type;
+	if (pathOrLayer === void 0) marker = { __kind: "slot" };
+	else if (options?.prop !== void 0) marker = {
+		__kind: "slot",
+		layer: pathOrLayer,
+		layerProp: options.prop
+	};
+	else {
+		const slash = pathOrLayer.indexOf("/");
+		marker = slash === -1 ? {
+			__kind: "slot",
+			layer: pathOrLayer,
+			layerProp: "children"
+		} : {
+			__kind: "slot",
+			layer: pathOrLayer.slice(0, slash),
+			layerProp: pathOrLayer.slice(slash + 1)
+		};
+	}
+	if (valueType !== void 0) Object.defineProperty(marker, "__valueType", {
+		enumerable: true,
+		configurable: true,
+		writable: true,
+		value: valueType
+	});
+	Object.defineProperty(marker, "required", {
+		enumerable: false,
+		configurable: true,
+		writable: true,
+		value() {
+			Object.defineProperty(marker, "__required", {
+				enumerable: true,
+				configurable: true,
+				writable: true,
+				value: true
+			});
+			return marker;
+		}
+	});
+	Object.defineProperty(marker, "accepts", {
+		enumerable: false,
+		configurable: true,
+		writable: true,
+		value(component) {
+			Object.defineProperty(marker, "__accepts", {
+				enumerable: true,
+				configurable: true,
+				writable: true,
+				value: Array.isArray(component) ? component : [component]
+			});
+			return marker;
+		}
+	});
+	Object.defineProperty(marker, "transform", {
+		enumerable: false,
+		configurable: true,
+		writable: true,
+		value(fn) {
+			Object.defineProperty(marker, "__transform", {
+				enumerable: true,
+				configurable: true,
+				writable: true,
+				value: fn
+			});
+			return marker;
+		}
+	});
+	return marker;
+}
+/**
+* Attach a chainable `.required()` method to a marker that flips
+* `__required: true` and returns the same marker reference (so further
+* chaining still works).
+*/
+function attachRequired(marker) {
+	Object.defineProperty(marker, "required", {
+		enumerable: false,
+		configurable: true,
+		writable: true,
+		value() {
+			Object.defineProperty(marker, "__required", {
+				enumerable: true,
+				configurable: true,
+				writable: true,
+				value: true
+			});
+			return marker;
+		}
+	});
+	return marker;
+}
+/**
+* Boolean-prop binding. Codegen emits the prop as `<name>?: boolean`
+* and routes presence/absence into a per-layer `data-${name}` attribute
+* the runtime selects on. Mirrors the old `@yahoo/uds-create-config` `helpers.boolean()`.
+*
+* The optional `values` argument carries per-state per-layer styles
+* (`{ true: { root: {...} }, false: { root: {...} } }`) — codegen emits
+* one variant CSS class per layer per state, same as `variant({...})`.
+*
+* `.required()` flips the prop to mandatory at JSX call sites.
+*/
+function boolean(values) {
+	return attachRequired(values === void 0 ? { __kind: "boolean" } : {
+		__kind: "boolean",
+		values
+	});
+}
+/**
+* Cross-layer style override — `_hover: layer('close', { opacity: 1 })`
+* declares "when this layer is hovered, apply these styles to the
+* named layer". Codegen emits a descendant-combinator rule pointing
+* from the source layer's selector to the target layer's selector.
+* Mirrors the old `@yahoo/uds-create-config` `helpers.layer()`.
+*/
+function layer(layerName, styles) {
+	return {
+		__kind: "layer",
+		layer: layerName,
+		styles
+	};
+}
+function variant(values, defaultValue) {
+	return attachRequired(defaultValue === void 0 ? {
+		__kind: "variant",
+		values
+	} : {
+		__kind: "variant",
+		values,
+		default: defaultValue
+	});
+}
+/**
+* Wide-string prop binding. Codegen emits the prop as `<name>?: string`
+* (or required when chained with `.required()`). No CSS effect — use
+* this for free-form text props (URLs, labels). When you want a
+* constrained list of accepted strings, reach for the array form of
+* `variant(...)` instead.
+*/
+function string() {
+	return attachRequired({ __kind: "string" });
+}
+/**
+* Wide-number prop binding. Codegen emits the prop as `<name>?: number`
+* (or required when chained with `.required()`). No CSS effect — use
+* this for free-form numeric props (tabIndex, count). When you want a
+* constrained list of accepted numbers, reach for the array form of
+* `variant(...)` instead.
+*/
+function number() {
+	return attachRequired({ __kind: "number" });
+}
+/**
+* Axis marker for `.preview({ matrix: { columns, rows } })`. The
+* `kind` field discriminates between prop axes (varies a JSX prop
+* across the grid) and modifier axes (toggles a `_${name}` modifier
+* across the grid). Studio reads these to build the canvas preview;
+* codegen round-trips them verbatim through `Component.preview`.
+*
+* `.nest(child)` builds a 2-D nesting — the outer axis steps once
+* per child-axis sweep. Mirrors the old `@yahoo/uds-create-config` matrix shape.
+*/
+function makePreviewAxis(source, nested) {
+	return {
+		__kind: "previewAxis",
+		...source,
+		...nested !== void 0 ? { nested } : {},
+		nest(child) {
+			return makePreviewAxis(source, child);
+		}
+	};
+}
+const configHelpers = {
+	slot,
+	variant,
+	boolean,
+	string,
+	number,
+	layer,
+	composite,
+	styleProp,
+	token,
+	darken,
+	lighten
+};
+/**
+* Normalize the `props()` argument to a rule list: a flat bag becomes a
+* single unconditional rule; a rule array passes through.
+*/
+function normalizePropsRules(arg) {
+	return Array.isArray(arg) ? arg : [{ props: arg }];
+}
+const previewHelpers = {
+	prop: (name) => makePreviewAxis({
+		kind: "prop",
+		prop: name
+	}),
+	modifier: (name) => makePreviewAxis({
+		kind: "modifier",
+		modifier: name
+	}),
+	props: (arg) => makePreviewAxis({
+		kind: "props",
+		rules: normalizePropsRules(arg)
+	})
+};
+/**
+* Fields merged shallowly when `.config(cb)` runs — each subkey from a
+* later call overlays the same subkey on the seed (so `defaultProps:
+* { as: 'path' }` doesn't drop Box's inherited defaults). Other fields
+* (`compoundProps`, `motion` scalar) overwrite.
+*/
+const MERGEABLE_NESTED_FIELDS = new Set([
+	"props",
+	"base",
+	"defaultProps",
+	"motion"
+]);
+function mergeConfigIntoSeed(seed, addition) {
+	for (const [key, value] of Object.entries(addition)) {
+		if (MERGEABLE_NESTED_FIELDS.has(key) && typeof value === "object" && value !== null) {
+			const existing = seed[key];
+			const base = typeof existing === "object" && existing !== null ? existing : {};
+			if (key === "base") {
+				const merged = { ...base };
+				for (const [layerName, layerStyles] of Object.entries(value)) {
+					const prevLayer = merged[layerName];
+					merged[layerName] = typeof prevLayer === "object" && prevLayer !== null && typeof layerStyles === "object" && layerStyles !== null ? {
+						...prevLayer,
+						...layerStyles
+					} : layerStyles;
+				}
+				seed[key] = merged;
+				continue;
+			}
+			seed[key] = {
+				...base,
+				...value
+			};
+			continue;
+		}
+		seed[key] = value;
+	}
+}
+function isComponentBuilderValue(value) {
+	return typeof value === "object" && value !== null && typeof value.config === "function";
+}
+function attachChainMethods(seed) {
+	const def = (key, value) => {
+		Object.defineProperty(seed, key, {
+			enumerable: false,
+			configurable: true,
+			writable: true,
+			value
+		});
+	};
+	def("config", function configMethod(cb) {
+		mergeConfigIntoSeed(seed, cb(configHelpers));
+		return seed;
+	});
+	def("render", function renderMethod(fn) {
+		def("__renderFn", fn);
+		def("__hasRenderFn", true);
+		return seed;
+	});
+	def("preview", function previewMethod(spec) {
+		def("__preview", typeof spec === "function" ? spec(previewHelpers) : spec);
+		return seed;
+	});
+	def("subcomponents", function subcomponentsMethod(children) {
+		for (const [childName, child] of Object.entries(children)) if (typeof child !== "object" || child === null || typeof child.layers !== "object") throw new Error(`subcomponents: entry "${childName}" is not a component definition`);
+		def("__subcomponents", children);
+		return seed;
+	});
+	def("metadata", function metadataMethod(meta) {
+		seed.metadata = {
+			...seed.metadata ?? {},
+			...meta
+		};
+		return seed;
+	});
+	return seed;
+}
+function defineComponentImpl(arg) {
+	let seed;
+	let extendsFromRef;
+	if (typeof arg === "string") seed = { layers: { root: tag(arg) } };
+	else if (isComponentBuilderValue(arg)) {
+		const source = arg;
+		seed = { ...source };
+		extendsFromRef = source;
+	} else seed = arg;
+	attachSourcePath(seed, captureCallerPath());
+	attachChainMethods(seed);
+	if (extendsFromRef !== void 0) Object.defineProperty(seed, "__extendsFrom", {
+		enumerable: false,
+		configurable: true,
+		writable: true,
+		value: extendsFromRef
+	});
+	return seed;
+}
+defineComponentImpl.layers = function layersEntry(layers) {
+	const seed = { layers };
+	attachSourcePath(seed, captureCallerPath());
+	return attachChainMethods(seed);
+};
+const defineComponent = defineComponentImpl;
+//#endregion
+export { boolean, defineComponent, defineComponentGroup, defineCompositeStyle, defineMode, defineModifier, defineMotion, defineStyleProp, defineTokenGroup, number, slot, string, variant };

package/dist/foreign-component-name.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Reserved registry namespace for third-party leaf components — the prefix in a
+ * `foreign:<displayName>` key. Not a peer design-system namespace (those are
+ * meaningful disambiguation); it marks "not a UDS component," so display
+ * surfaces strip it to the bare name.
+ */
+export declare const FOREIGN_NAMESPACE = "foreign";
+/**
+ * Display name for a `forwardRef`/`memo` component object — preferring its own
+ * `displayName`, then the wrapped function's name. Returns `null` for anything
+ * that isn't one of those wrappers, and for an anonymous wrapper with no
+ * resolvable name (so the JSX runtime can keep it as a pending ref instead).
+ */
+export declare function foreignComponentName(type: unknown): string | null;
+/**
+ * Registry key for a foreign component: `foreign:<displayName>`. The
+ * `foreign:` namespace keeps a third-party component (e.g. an icon named
+ * `Button`) from clobbering a registered UDS component of the same name.
+ * Returns `null` when the component has no resolvable foreign name.
+ */
+export declare function foreignRegistryKey(type: unknown): string | null;

package/dist/foreign-component-name.js

@@ -0,0 +1,42 @@
+//#region src/foreign-component-name.ts
+/**
+* Reserved registry namespace for third-party leaf components — the prefix in a
+* `foreign:<displayName>` key. Not a peer design-system namespace (those are
+* meaningful disambiguation); it marks "not a UDS component," so display
+* surfaces strip it to the bare name.
+*/
+const FOREIGN_NAMESPACE = "foreign";
+const FORWARD_REF_TYPE = Symbol.for("react.forward_ref");
+const MEMO_TYPE = Symbol.for("react.memo");
+function nameOf(value) {
+	if (typeof value !== "object" && typeof value !== "function") return null;
+	const named = value;
+	if (typeof named.displayName === "string" && named.displayName.length > 0) return named.displayName;
+	if (typeof named.name === "string" && named.name.length > 0) return named.name;
+	return null;
+}
+/**
+* Display name for a `forwardRef`/`memo` component object — preferring its own
+* `displayName`, then the wrapped function's name. Returns `null` for anything
+* that isn't one of those wrappers, and for an anonymous wrapper with no
+* resolvable name (so the JSX runtime can keep it as a pending ref instead).
+*/
+function foreignComponentName(type) {
+	if (type === null || typeof type !== "object") return null;
+	const wrapper = type;
+	if (wrapper.$$typeof === FORWARD_REF_TYPE) return nameOf(type) ?? nameOf(wrapper.render);
+	if (wrapper.$$typeof === MEMO_TYPE) return nameOf(type) ?? nameOf(wrapper.type);
+	return null;
+}
+/**
+* Registry key for a foreign component: `foreign:<displayName>`. The
+* `foreign:` namespace keeps a third-party component (e.g. an icon named
+* `Button`) from clobbering a registered UDS component of the same name.
+* Returns `null` when the component has no resolvable foreign name.
+*/
+function foreignRegistryKey(type) {
+	const name = foreignComponentName(type);
+	return name === null ? null : `${FOREIGN_NAMESPACE}:${name}`;
+}
+//#endregion
+export { FOREIGN_NAMESPACE, foreignComponentName, foreignRegistryKey };

package/dist/index.d.ts

@@ -0,0 +1,32 @@
+import { ASSET_CLASS_CAPABILITIES, AssetKind, isPlaceable } from "./asset-kind.js";
+import { AnyRef, AssetGroupName, AssetGroupRef, ComponentName, ComponentRef, CompositeName, CompositeRef, CompositeRefBuilder, ModeName, ModeRef, RegisteredAssetGroups, RegisteredComponents, RegisteredCompositeStyles, RegisteredModes, RegisteredModifiers, RegisteredMotionDefs, RegisteredStyleProps, RegisteredTokenGroups, StylePropName, StylePropRef, TagName, TagRef, TokenGroupName, TokenGroupRef, TokenName, TokenQualifiedName, TokenRef, assetGroup, component, composite, isAssetGroupRef, isComponentRef, isCompositeRef, isModeRef, isStylePropRef, isTagRef, isTokenGroupRef, isTokenRef, mode, styleProp, tag, token, tokenGroup } from "./refs.js";
+import { ColorFn, ColorKeyword, CssAngle, CssColor, CssLength, CssPercentage, CssRatio, CssTime, CssValue, CssValueTypeName, CssVarRef, HexColor, HslColor, RgbColor } from "./types/css-values.js";
+import { ColorExpression, ColorSpace, ColorValue, GradientStop, GradientValue, LengthOrPercent, LineDirection, LinearGradientExpr, MixExpr, RadialGradientExpr, RadialSize, TokenRefToCss, alpha, isColorExpression, isLinearGradientExpr, isMixExpr, isRadialGradientExpr, linearGradient, mix, radialGradient, resolveColorExpression } from "./colorExpressions.js";
+import { CSS_GLOBAL_KEYWORDS, CSS_PROPERTY_KEYWORDS, CssPropertyWithKeywords } from "./types/css-property-keywords.js";
+import { ColorCssProperty, CssGlobalKeyword, CssPropertyName, CssPropertyValues } from "./types/css-properties.js";
+import { AnyStylePropDefinition, ArbitrarySpec, BaseStyles, BuildOptions, ComponentDefinition, ComponentGroupDefinition, ComponentMetadata, CompositeStyleDefinition, CompositeStyleObject, CompoundPropsEntry, CssMotionDefinition, FontAssetMember, GlobalStylesDef, JsMotionDefinition, LayerInput, LiteralFor, ModeDefinition, ModeOptionDefinition, ModifierDefinition, MotionDefinitionInput, MotionKeyframes, MotionStateKeyframe, MotionTransition, OpacityPairSpec, PreviewDefinition, PropBinding, SerializedAssetGroup, SerializedComponentGroup, SerializedConfig, SerializedFontAssetGroup, SerializedIconAssetGroup, SerializedTokenGroup, SlotMotion, StylePropDefinition, StylePropMetadata, StylePropProperty, TokenDefinition, TokenGroupDefinition, TokenModifierKey, TokenModifierValue, TokenType, TokenValue, ValuesEntry } from "./types.js";
+import { AssetGroupBuilder, AssetGroupConfig, AssetGroupDefinition, FontAssetGroupConfig, FontAssetGroupDefinition, IconAssetGroupConfig, IconAssetGroupDefinition, IconAssetMember, IconAssetMetadata, defineAssetGroup, defineAssetIcon } from "./defineAssetGroup.js";
+import { AssetGroup } from "./AssetGroup.js";
+import { Css, CssClassName, CssDeclaration, CssSelector, CssVar, cssClassName, cssDeclaration, cssSelector, cssVar } from "./brands.js";
+import { BooleanMarker, LayerMarker, NumberMarker, PREVIEW_SEED_KEY, PreviewAxisMarker, PreviewPropsRule, RequiredBrand, SlotMarker, SlotRef, SlotValueType, StringMarker, VariantMarker, VariantMarkerArray, VariantMarkerObject, isBoolMarker, isLayerMarker, isNumberMarker, isPreviewAxisMarker, isSlotMarker, isStringMarker, isVariantArrayMarker, isVariantMarker, matchesPreviewWhen, resolvePreviewRules } from "./markers.js";
+import { Component, ComponentKind, CompositeInfo, FunctionInfo, Layer, PrimitivePropKind, PropBase, PropInfo, PropKind, ResolvedCompoundOverrides, SlotInfo, SlotValueKind, StylePropInfo, StylePropKeyword, StylePropTokenUsage, VariantInfo } from "./Component.js";
+import { ComponentGroup } from "./ComponentGroup.js";
+import { CompositeStyle } from "./CompositeStyle.js";
+import { makeTokenRefToCss } from "./entity-utils.js";
+import { DataAttrs } from "./Props.js";
+import { defineProvider } from "./defineProvider.js";
+import { BoundComponent, ComponentBuilder, ComponentBuilderMethods, ComponentRenderFn, ConfigCallbackHelpers, DefineComponentFn, DefinedComponent, DefinedProvider, DefinedStyleProp, DefinedTokenGroup, PreviewCallbackHelpers, TokenGroupMetadata, TypedSlotRef, boolean, defineComponent, defineComponentGroup, defineCompositeStyle, defineMode, defineModifier, defineMotion, defineStyleProp, defineTokenGroup, number, slot, string, variant } from "./factories.js";
+import { Mode, ModeOption } from "./Mode.js";
+import { Modifier } from "./Modifier.js";
+import { CssMotionDef, JsMotionDef, MotionDef } from "./MotionDef.js";
+import { Provider } from "./Provider.js";
+import { ResolvedTokenLiteral, Token } from "./Token.js";
+import { StyleProp } from "./StyleProp.js";
+import { TokenGroup } from "./TokenGroup.js";
+import { Config, DependenciesQuery, DependencyKind, DependencyRef, DependentsQuery, parseRegistryKey } from "./Config.js";
+import { SOURCE_PATH_KEY, attachSourcePath, captureCallerPath, readSourcePath } from "./captureCallerPath.js";
+import { ELEMENT_MARKER_KIND, ElementMarker, OpaqueLeafPredicate, hasElementMarkerDeep, isElementLikeValue, isElementMarker, reviveElementMarkersDeep } from "./element-marker.js";
+import { interpolate } from "./interpolate.js";
+import { ModeBackedModifierDefinition, ModeBackedModifierInput, ModeBackedModifierLookup, OverrideModeRef, OverrideRow, buildModeBackedModifierLookup, buildNestedModifierUpdate, createModeBackedModifierLookup, mergeModifierUpdates, modifierIdToPath, modifierPathToId, modifierTreeToOverrideRows, overrideRowsToModifierTree, resolveOverrideRowValue } from "./token-override-rows.js";
+import { rem } from "./units.js";
+export { ASSET_CLASS_CAPABILITIES, type AnyRef, type AnyStylePropDefinition, type ArbitrarySpec, AssetGroup, type AssetGroupBuilder, type AssetGroupConfig, type AssetGroupDefinition, type AssetGroupName, type AssetGroupRef, type AssetKind, type BaseStyles, type BooleanMarker, type BoundComponent, type BuildOptions, CSS_GLOBAL_KEYWORDS, CSS_PROPERTY_KEYWORDS, type ColorCssProperty, type ColorExpression, type ColorFn, type ColorKeyword, type ColorSpace, type ColorValue, Component, type ComponentBuilder, type ComponentBuilderMethods, type ComponentDefinition, ComponentGroup, type ComponentGroupDefinition, type ComponentKind, type ComponentMetadata, type ComponentName, type ComponentRef, type ComponentRenderFn, type CompositeInfo, type CompositeName, type CompositeRef, type CompositeRefBuilder, CompositeStyle, type CompositeStyleDefinition, type CompositeStyleObject, type CompoundPropsEntry, Config, type ConfigCallbackHelpers, type Css, type CssAngle, type CssClassName, type CssColor, type CssDeclaration, type CssGlobalKeyword, type CssLength, CssMotionDef, type CssMotionDefinition, type CssPercentage, type CssPropertyName, type CssPropertyValues, type CssPropertyWithKeywords, type CssRatio, type CssSelector, type CssTime, type CssValue, type CssValueTypeName, type CssVar, type CssVarRef, type DataAttrs, type DefineComponentFn, type DefinedComponent, type DefinedProvider, type DefinedStyleProp, type DefinedTokenGroup, type DependenciesQuery, type DependencyKind, type DependencyRef, type DependentsQuery, ELEMENT_MARKER_KIND, type ElementMarker, type FontAssetGroupConfig, type FontAssetGroupDefinition, type FontAssetMember, type FunctionInfo, type GlobalStylesDef, type GradientStop, type GradientValue, type HexColor, type HslColor, type IconAssetGroupConfig, type IconAssetGroupDefinition, type IconAssetMember, type IconAssetMetadata, JsMotionDef, type JsMotionDefinition, Layer, type LayerInput, type LayerMarker, type LengthOrPercent, type LineDirection, type LinearGradientExpr, type LiteralFor, type MixExpr, Mode, type ModeBackedModifierDefinition, type ModeBackedModifierInput, type ModeBackedModifierLookup, type ModeDefinition, type ModeName, ModeOption, type ModeOptionDefinition, type ModeRef, Modifier, type ModifierDefinition, type MotionDef, type MotionDefinitionInput, type MotionKeyframes, type MotionStateKeyframe, type MotionTransition, type NumberMarker, type OpacityPairSpec, type OpaqueLeafPredicate, type OverrideModeRef, type OverrideRow, PREVIEW_SEED_KEY, type PreviewAxisMarker, type PreviewCallbackHelpers, type PreviewDefinition, type PreviewPropsRule, type PrimitivePropKind, type PropBase, type PropBinding, type PropInfo, type PropKind, Provider, type RadialGradientExpr, type RadialSize, type RegisteredAssetGroups, type RegisteredComponents, type RegisteredCompositeStyles, type RegisteredModes, type RegisteredModifiers, type RegisteredMotionDefs, type RegisteredStyleProps, type RegisteredTokenGroups, type RequiredBrand, type ResolvedCompoundOverrides, type ResolvedTokenLiteral, type RgbColor, SOURCE_PATH_KEY, type SerializedAssetGroup, type SerializedComponentGroup, type SerializedConfig, type SerializedFontAssetGroup, type SerializedIconAssetGroup, type SerializedTokenGroup, type SlotInfo, type SlotMarker, type SlotMotion, type SlotRef, type SlotValueKind, type SlotValueType, type StringMarker, StyleProp, type StylePropDefinition, type StylePropInfo, type StylePropKeyword, type StylePropMetadata, type StylePropName, type StylePropProperty, type StylePropRef, type StylePropTokenUsage, type TagName, type TagRef, Token, type TokenDefinition, TokenGroup, type TokenGroupDefinition, type TokenGroupMetadata, type TokenGroupName, type TokenGroupRef, type TokenModifierKey, type TokenModifierValue, type TokenName, type TokenQualifiedName, type TokenRef, type TokenRefToCss, type TokenType, type TokenValue, type TypedSlotRef, type ValuesEntry, type VariantInfo, type VariantMarker, type VariantMarkerArray, type VariantMarkerObject, alpha, assetGroup, attachSourcePath, boolean, buildModeBackedModifierLookup, buildNestedModifierUpdate, captureCallerPath, component, composite, createModeBackedModifierLookup, cssClassName, cssDeclaration, cssSelector, cssVar, defineAssetGroup, defineAssetIcon, defineComponent, defineComponentGroup, defineCompositeStyle, defineMode, defineModifier, defineMotion, defineProvider, defineStyleProp, defineTokenGroup, hasElementMarkerDeep, interpolate, isAssetGroupRef, isBoolMarker, isColorExpression, isComponentRef, isCompositeRef, isElementLikeValue, isElementMarker, isLayerMarker, isLinearGradientExpr, isMixExpr, isModeRef, isNumberMarker, isPlaceable, isPreviewAxisMarker, isRadialGradientExpr, isSlotMarker, isStringMarker, isStylePropRef, isTagRef, isTokenGroupRef, isTokenRef, isVariantArrayMarker, isVariantMarker, linearGradient, makeTokenRefToCss, matchesPreviewWhen, mergeModifierUpdates, mix, mode, modifierIdToPath, modifierPathToId, modifierTreeToOverrideRows, number, overrideRowsToModifierTree, parseRegistryKey, radialGradient, readSourcePath, rem, resolveColorExpression, resolveOverrideRowValue, resolvePreviewRules, reviveElementMarkersDeep, slot, string, styleProp, tag, token, tokenGroup, variant };

package/dist/index.js

@@ -0,0 +1,28 @@
+import { cssClassName, cssDeclaration, cssSelector, cssVar } from "./brands.js";
+import { makeTokenRefToCss } from "./entity-utils.js";
+import { AssetGroup } from "./AssetGroup.js";
+import { ASSET_CLASS_CAPABILITIES, isPlaceable } from "./asset-kind.js";
+import { SOURCE_PATH_KEY, attachSourcePath, captureCallerPath, readSourcePath } from "./captureCallerPath.js";
+import { assetGroup, component, composite, isAssetGroupRef, isComponentRef, isCompositeRef, isModeRef, isStylePropRef, isTagRef, isTokenGroupRef, isTokenRef, mode, styleProp, tag, token, tokenGroup } from "./refs.js";
+import { alpha, isColorExpression, isLinearGradientExpr, isMixExpr, isRadialGradientExpr, linearGradient, mix, radialGradient, resolveColorExpression } from "./colorExpressions.js";
+import { defineAssetGroup, defineAssetIcon } from "./defineAssetGroup.js";
+import { ELEMENT_MARKER_KIND, hasElementMarkerDeep, isElementLikeValue, isElementMarker, reviveElementMarkersDeep } from "./element-marker.js";
+import { PREVIEW_SEED_KEY, isBoolMarker, isLayerMarker, isNumberMarker, isPreviewAxisMarker, isSlotMarker, isStringMarker, isVariantArrayMarker, isVariantMarker, matchesPreviewWhen, resolvePreviewRules } from "./markers.js";
+import { Component, Layer } from "./Component.js";
+import { ComponentGroup } from "./ComponentGroup.js";
+import { CompositeStyle } from "./CompositeStyle.js";
+import { Mode, ModeOption } from "./Mode.js";
+import { Modifier } from "./Modifier.js";
+import { CssMotionDef, JsMotionDef } from "./MotionDef.js";
+import { Provider } from "./Provider.js";
+import { StyleProp } from "./StyleProp.js";
+import { Token } from "./Token.js";
+import { TokenGroup } from "./TokenGroup.js";
+import { Config, parseRegistryKey } from "./Config.js";
+import { defineProvider } from "./defineProvider.js";
+import { boolean, defineComponent, defineComponentGroup, defineCompositeStyle, defineMode, defineModifier, defineMotion, defineStyleProp, defineTokenGroup, number, slot, string, variant } from "./factories.js";
+import { interpolate } from "./interpolate.js";
+import { buildModeBackedModifierLookup, buildNestedModifierUpdate, createModeBackedModifierLookup, mergeModifierUpdates, modifierIdToPath, modifierPathToId, modifierTreeToOverrideRows, overrideRowsToModifierTree, resolveOverrideRowValue } from "./token-override-rows.js";
+import { CSS_GLOBAL_KEYWORDS, CSS_PROPERTY_KEYWORDS } from "./types/css-property-keywords.js";
+import { rem } from "./units.js";
+export { ASSET_CLASS_CAPABILITIES, AssetGroup, CSS_GLOBAL_KEYWORDS, CSS_PROPERTY_KEYWORDS, Component, ComponentGroup, CompositeStyle, Config, CssMotionDef, ELEMENT_MARKER_KIND, JsMotionDef, Layer, Mode, ModeOption, Modifier, PREVIEW_SEED_KEY, Provider, SOURCE_PATH_KEY, StyleProp, Token, TokenGroup, alpha, assetGroup, attachSourcePath, boolean, buildModeBackedModifierLookup, buildNestedModifierUpdate, captureCallerPath, component, composite, createModeBackedModifierLookup, cssClassName, cssDeclaration, cssSelector, cssVar, defineAssetGroup, defineAssetIcon, defineComponent, defineComponentGroup, defineCompositeStyle, defineMode, defineModifier, defineMotion, defineProvider, defineStyleProp, defineTokenGroup, hasElementMarkerDeep, interpolate, isAssetGroupRef, isBoolMarker, isColorExpression, isComponentRef, isCompositeRef, isElementLikeValue, isElementMarker, isLayerMarker, isLinearGradientExpr, isMixExpr, isModeRef, isNumberMarker, isPlaceable, isPreviewAxisMarker, isRadialGradientExpr, isSlotMarker, isStringMarker, isStylePropRef, isTagRef, isTokenGroupRef, isTokenRef, isVariantArrayMarker, isVariantMarker, linearGradient, makeTokenRefToCss, matchesPreviewWhen, mergeModifierUpdates, mix, mode, modifierIdToPath, modifierPathToId, modifierTreeToOverrideRows, number, overrideRowsToModifierTree, parseRegistryKey, radialGradient, readSourcePath, rem, resolveColorExpression, resolveOverrideRowValue, resolvePreviewRules, reviveElementMarkersDeep, slot, string, styleProp, tag, token, tokenGroup, variant };

package/dist/interpolate.d.ts

@@ -0,0 +1,20 @@
+//#region src/interpolate.d.ts
+/**
+ * Motion interpolation marker — used inside `JsMotionDefinition`
+ * keyframes to declare an index-based interpolation (e.g. stagger).
+ *
+ * Codegen's `motion-transform.ts` detects `{ __type: 'interpolate' }`
+ * shapes on keyframe values and lifts them into the renderer's
+ * `useTransform`-style interpolation.
+ */
+interface InterpolateMarker {
+  readonly __type: 'interpolate';
+  readonly output: readonly number[];
+  readonly extrapolate: 'clamp' | 'extend' | 'identity';
+}
+declare function interpolate(config: {
+  output: readonly number[];
+  extrapolate?: 'clamp' | 'extend' | 'identity';
+}): InterpolateMarker;
+//#endregion
+export { interpolate };

package/dist/interpolate.js

@@ -0,0 +1,10 @@
+//#region src/interpolate.ts
+function interpolate(config) {
+	return {
+		__type: "interpolate",
+		output: config.output,
+		extrapolate: config.extrapolate ?? "extend"
+	};
+}
+//#endregion
+export { interpolate };

package/dist/jsx/__fixtures__/cross-component-preview.d.ts

@@ -0,0 +1,3 @@
+import { Config } from '../../index';
+declare const config: Config;
+export default config;

package/dist/jsx/__fixtures__/cross-component-preview.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// Fixture for the `jsx-runtime` Bun.build integration test.
+//
+// Bundled with `jsx: { runtime: 'automatic', importSource: '@yahoo/uds-create-config/jsx' }`
+// so the JSX expression below compiles into calls against our custom JSX
+// runtime instead of React. Exercises the cross-component preview reference
+// timing — `<Icon />` evaluates inside Button's `.preview(...)` callback,
+// BEFORE `registerComponents` stamps `__componentName` on Icon.
+import { Config, defineComponent } from '../../index';
+const Icon = defineComponent('span');
+const Button = defineComponent('button').preview({
+    defaultProps: { children: _jsx(Icon, {}) },
+});
+const config = new Config().registerComponents({ Button, Icon });
+export default config;

package/dist/jsx/jsx-dev-runtime.d.ts

@@ -0,0 +1,15 @@
+import { Fragment, jsx } from "./jsx-runtime.js";
+import { Spec } from "@json-render/core";
+
+//#region src/jsx/jsx-dev-runtime.d.ts
+interface JsxDevProps {
+  readonly children?: unknown;
+  readonly [key: string]: unknown;
+}
+/**
+ * Dev-variant of `jsx`. Accepts the React-style dev arguments but ignores
+ * them — spec output is identical to the production runtime.
+ */
+declare function jsxDEV(type: Parameters<typeof jsx>[0], props: JsxDevProps, _key?: unknown, _isStaticChildren?: boolean, _source?: unknown, _self?: unknown): Spec;
+//#endregion
+export { Fragment, jsxDEV };

package/dist/jsx/jsx-dev-runtime.js

@@ -0,0 +1,11 @@
+import { Fragment, jsx } from "./jsx-runtime.js";
+//#region src/jsx/jsx-dev-runtime.ts
+/**
+* Dev-variant of `jsx`. Accepts the React-style dev arguments but ignores
+* them — spec output is identical to the production runtime.
+*/
+function jsxDEV(type, props, _key, _isStaticChildren, _source, _self) {
+	return jsx(type, props);
+}
+//#endregion
+export { Fragment, jsxDEV };

package/dist/jsx/jsx-runtime.d.ts

@@ -0,0 +1,48 @@
+import { Spec } from "@json-render/core";
+
+//#region src/jsx/jsx-runtime.d.ts
+declare const Fragment: unique symbol;
+declare function setConfigContext(config: unknown): void;
+declare function getConfigContext(): unknown;
+type JsxType = string | symbol | {
+  readonly __componentName?: string;
+  readonly displayName?: string;
+  readonly name?: string;
+};
+interface JsxProps {
+  readonly children?: unknown;
+  readonly [key: string]: unknown;
+}
+/**
+ * Scope subsequent wrapper-type resolution to `componentName` (or clear it
+ * with `null`). Resets the per-component wrapper index so stamped names are
+ * stable across runs regardless of global element-key state.
+ */
+declare function setRenderExtractionContext(componentName: string | null): void;
+/**
+ * Reset all module-level state — element key counter, pending-ref
+ * registry, ref counter, and render-extraction scope. Called by tests
+ * asserting specific keys and by the extractor before each top-level
+ * evaluation.
+ */
+declare function __resetKeyCounterForTesting(): void;
+/**
+ * Drain and return the pending-ref registry. Called by the extractor
+ * after `import()`-ing a bundle to rewrite `__udsRef_N` placeholders to
+ * the component names that `registerComponents` has now stamped onto
+ * each builder.
+ */
+declare function __drainPendingRefs(): Map<string, unknown>;
+/**
+ * JSX automatic-runtime entry for a single static child. Compilers pick
+ * this signature when the JSX expression has zero or one child.
+ */
+declare function jsx(type: JsxType, props: JsxProps): Spec;
+/**
+ * JSX automatic-runtime entry for static children — same semantics as
+ * `jsx`, the distinction is purely a compiler hint that `props.children`
+ * is an array literal.
+ */
+declare function jsxs(type: JsxType, props: JsxProps): Spec;
+//#endregion
+export { Fragment, __drainPendingRefs, __resetKeyCounterForTesting, getConfigContext, jsx, jsxs, setConfigContext, setRenderExtractionContext };