@yahoo/uds-v5-wip 1.60.0 → 1.61.0

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

@@ -0,0 +1,163 @@
+//#region ../config/dist/component-config.js
+/**
+* Marker for a boolean JSX prop. Use inside the `props` block:
+*
+*     props: {
+*       loading: bool(),
+*       disabled: bool(),
+*     }
+*
+* Drives both the TS type (consumer sees `loading?: boolean`) and the
+* Studio design panel control (toggle).
+*/
+function bool() {
+	return { __kind: "bool" };
+}
+/**
+* Marker for a string-valued JSX prop. Parallel to `bool()` — emits
+* `data-<kebab-name>="<value>"` on each layer's bundle so CSS can
+* target the rendered value. Use inside the `props` block:
+*
+*     props: {
+*       kind: string(),
+*       tone: string(),
+*     }
+*
+* Drives both the TS type (consumer sees `kind?: string`) and the
+* Studio design panel control (text input).
+*/
+function string() {
+	return { __kind: "string" };
+}
+/**
+* Bind a registered style prop. Single string arg defaults to the
+* root layer; chain `.on(layerName)` to target a non-root layer:
+*
+*     props: {
+*       bg:        styleProp('bg'),                  // root layer
+*       textColor: styleProp('color').on('label'),   // label layer
+*     }
+*
+* The `__kind: 'styleProp'` discriminator lets the design panel render
+* a color/token picker (driven by the registered style prop's value
+* space) and lets codegen scan props uniformly off the marker shape.
+*/
+function styleProp(ref) {
+	return buildStylePropMarker("root", ref);
+}
+function buildStylePropMarker(layer, ref) {
+	return {
+		__kind: "styleProp",
+		layer,
+		ref,
+		on(name) {
+			return buildStylePropMarker(name, ref);
+		}
+	};
+}
+/**
+* Token-reference marker for style values. Use inside `base`, enum
+* entries, and `compoundProps` overrides:
+*
+*     base: { root: { bg: token('bg/brand') } }
+*     props: {
+*       variant: enums({
+*         brand: { root: { color: token('color/on-brand') } },
+*       }),
+*     }
+*
+* Codegen and runtime detect the `__kind: 'token'` discriminator and
+* resolve the `ref` to `var(--<prefix>-<ns>-<name>)`. The design
+* panel uses the same discriminator to offer a token picker.
+*/
+function token(ref) {
+	return {
+		__kind: "token",
+		ref
+	};
+}
+/**
+* Token-group reference for `defineStyleProp({ values: [...] })`. Pulls
+* every token in the named namespace into the style prop's accepted
+* value set. The resolver expands the group at registration time:
+*
+*     defineStyleProp({
+*       cssProperty: 'padding',
+*       classPrefix: 'p',
+*       values: [tokenGroup('spacing')],   // → p-1, p-2, p-3, …
+*     })
+*
+* The `__kind: 'tokenGroup'` discriminator lets codegen and the design
+* panel branch on group references without parsing strings.
+*/
+function tokenGroup(group) {
+	return {
+		__kind: "tokenGroup",
+		group
+	};
+}
+/**
+* Marker for an enum-valued JSX prop. Each value maps to a per-layer
+* style override. Use inside the `props` block:
+*
+*     props: {
+*       variant: enums({
+*         brand: { root: { bg: '{bg/brand}', color: '{color/on-brand}' } },
+*         ghost: { root: { color: '{color/on-primary}' } },
+*       }),
+*     }
+*
+* The shape of each value mirrors a partial layer-style map keyed by
+* the component's own layer names.
+*/
+function enums(values) {
+	return {
+		__kind: "enum",
+		values
+	};
+}
+function composite(ref) {
+	return {
+		__kind: "composite",
+		ref
+	};
+}
+function slot(path, options) {
+	if (path === void 0) return {
+		__kind: "slot",
+		layer: "",
+		prop: "children"
+	};
+	if (options) return {
+		__kind: "slot",
+		layer: path,
+		prop: options.prop
+	};
+	const slashIdx = path.indexOf("/");
+	if (slashIdx === -1) return {
+		__kind: "slot",
+		layer: path,
+		prop: "children"
+	};
+	return {
+		__kind: "slot",
+		layer: path.slice(0, slashIdx),
+		prop: path.slice(slashIdx + 1)
+	};
+}
+/**
+* Marker factory — use inside `compoundProps[].layers.<layer>` to hide
+* a layer entirely when the entry's `when` clause matches.
+*
+*     compoundProps: [
+*       {
+*         when: { variant: 'compact' },
+*         layers: { endIcon: hidden() },
+*       },
+*     ]
+*/
+function hidden() {
+	return { __kind: "hidden" };
+}
+//#endregion
+export { bool, composite, enums, hidden, slot, string, styleProp, token, tokenGroup };

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

@@ -1,24 +1,24 @@
 //#region ../config/dist/component-refs.d.ts
 //#region src/component-refs.d.ts
 /**
- * Augmentable registries + template-literal ref types for the
- * component-API surface.
+ * Augmentable registries + ref types for the component-API surface.
  *
  * Codegen runs `uds build` and populates the four interfaces below in
- * each consumer app's `.uds/uds-env.d.ts`. The template-literal types
- * derived from them narrow brace-ref strings against what's actually
- * registered — `'{Box}'` typechecks only if `Box` is a real
- * `RegisteredComponents` key, `'{bg}'` only if `bg` is a real
+ * each consumer app's `.uds/uds-env.d.ts`. The ref types derived from
+ * them narrow helper arguments against what's actually registered —
+ * `composite('elevation')` typechecks only if `elevation` is a real
+ * `RegisteredComposites` key, `styleProp('bg')` only if `bg` is a real
  * `RegisteredStyleProps` key, etc.
  *
  * Without the augmentation loaded (e.g. inside `@uds/config`'s own
  * test files), each registry is `{}` and the corresponding ref type
- * collapses to `never`. Helpers downstream are expected to fail open
- * in that case so package-internal authoring sites don't all error.
+ * falls open to `string`. Helpers downstream are expected to fail
+ * open in that case so package-internal authoring sites don't all
+ * error.
  */
 /**
- * Registered components. Each key is the component name (the brace-ref
- * identifier — `'{Box}'`); each value is the component's resolved prop
+ * Registered components. Each key is the registered component name
+ * (e.g. `Box`, `Text`); each value is the component's resolved prop
  * shape, e.g.
  *
  *     export interface RegisteredComponents {
@@ -38,9 +38,8 @@
  */
 interface RegisteredComponents {}
 /**
- * Registered style props. Key is the JSX prop name (the brace-ref
- * identifier — `'{bg}'`); value is the string-literal union of
- * allowed token names for that prop, e.g.
+ * Registered style props. Key is the JSX prop name; value is the
+ * string-literal union of allowed token names for that prop, e.g.
  *
  *     export interface RegisteredStyleProps {
  *       bg: 'brand' | 'accent' | 'primary';
@@ -49,7 +48,7 @@ interface RegisteredComponents {}
  *
  * Components reference these directly when wiring JSX-prop types:
  * `bg?: RegisteredStyleProps['bg']`. Downstream `Props<TConfig>`
- * resolves the shorthand `'{bg}'` against this map.
+ * resolves `styleProp('bg')` markers against this map.
  *
  * Populated by codegen from `uds.config.ts`'s `.registerStyleProps({...})`
  * call. A `never` value means the prop registered no tokens
@@ -57,8 +56,8 @@ interface RegisteredComponents {}
  */
 interface RegisteredStyleProps {}
 /**
- * Registered composite-style names. Each key is the composite identifier
- * (the brace-ref — `'{elevation}'`, `'{severity}'`); value is `void`.
+ * Registered composite-style names. Each key is the composite
+ * identifier (e.g. `elevation`, `severity`); value is `void`.
  *
  * Populated by codegen from `uds.config.ts`'s `.registerComposites({...})`
  * call.
@@ -66,12 +65,35 @@ interface RegisteredStyleProps {}
 interface RegisteredComposites {}
 /**
  * Registered motion-preset names. Each key is the preset identifier
- * (`'{fadeIn}'`); value is `void`.
+ * (e.g. `fadeIn`); value is `void`.
  *
  * Populated by codegen from `uds.config.ts`'s `.defineMotion({...})`
  * (motion has no separate `.registerMotion` step today; the entries
  * come directly from `defineMotion` keys).
  */
+interface RegisteredMotion {}
+/**
+ * Registered `_<modifier>` props (`_hover`, `_focus`, `_dark`,
+ * `_pressed`, `_ariaSelected`, …). Each key is the modifier name; the
+ * value is `Partial<T>` so authoring sites get autocomplete against
+ * the component's own prop surface inside the modifier block:
+ *
+ *     <Box _hover={{ bg: 'brand', color: 'on-brand' }} />
+ *
+ * Populated by codegen — `BUILT_IN_PSEUDO` from
+ * `style-prop-runtime.ts` (all standard pseudo classes) merged with
+ * config-defined mode modifiers (`_dark`, `_sm`, …) and any custom
+ * modifiers registered via `.defineModifiers({...})`. The base
+ * interface here stays empty so without the augmentation loaded
+ * (inside `@uds/config`'s own tests) the modifier surface
+ * gracefully collapses to nothing — same fail-open pattern as the
+ * other registries above.
+ *
+ * Referenced by `Props<TConfig>` to narrow modifier keys; the
+ * codegen-emitted `Registered${Name}Props` type aliases reference
+ * this interface directly for the same narrowing.
+ */
+interface RegisteredModifiers<T> {}
 /**
  * Brace-wrapped reference to a registered React component. Falls open
  * to `'{${string}}'` when the registry is unaugmented (e.g. inside
@@ -94,5 +116,6 @@ type CompositeRef = [keyof RegisteredComposites] extends [never] ? `{${string}}`
  * Brace-wrapped reference to a registered motion preset. Falls open
  * when unaugmented.
  */
+type MotionRef = [keyof RegisteredMotion] extends [never] ? `{${string}}` : `{${Extract<keyof RegisteredMotion, string>}}`; //#endregion
 //#endregion
-export { ComponentRef, CompositeRef, RegisteredComponents, RegisteredComposites, RegisteredStyleProps, StylePropRef };
+export { ComponentRef, CompositeRef, MotionRef, RegisteredComponents, RegisteredComposites, RegisteredModifiers, RegisteredMotion, RegisteredStyleProps, StylePropRef };

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

@@ -1,14 +1,17 @@
+import { InterpolateMarker, MotionPreset } from "./defineMotionConfig.js";
 import { ComponentConfigValue } from "./component-config.js";
+import { DefinedPreview } from "./definePreview.js";
+import { CompositeStylesConfig, DefinedCompositeStyle } from "./defineCompositeStyle.js";
 import { BoundComponent } from "./defineComponent.js";
 import { AnyStyleProp } from "./defineStyleProp.js";
 import { TokenType, VarsConfig } from "./types.js";
 import { ResolvedStyleProp } from "./resolveStyleProp.js";
-import { BaseModifierProp, ComponentsConfig, CompositeStylesConfig, ConfigurableProp, ModifierProp, MotionPreset } from "@uds/types";
+import * as _$react from "react";
+import { BaseModifierProp, ModifierProp } 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 = {};
 type EmptyCompositeStyles = {};
 /**
@@ -97,6 +100,7 @@ type CheckForReservedModifiersInput<I extends ModesInput> = true extends HasRese
  * Never sets `default: true` — the new API has no concept of a default option;
  * downstream consumers treat "no option active" as the implicit default.
  */
+declare function convertModesInputToGroups(input: ModesInput): ModeGroup[];
 interface ModifierDef {
   modifier: ModifierNameShape;
   selector: string;
@@ -105,7 +109,16 @@ interface ModifierDef {
 }
 type AtomicTokenValue<M extends ModifierNameShape> = {
   name: string;
-  value: string;
+  /**
+   * The token's authored value. Either a CSS literal (`'#1167f4'`,
+   * `'1rem'`) or a `TokenMarker` from `token('ns/name')` pointing at
+   * another registered token. Downstream emitters resolve markers to
+   * `var(--<prefix>-<ns>-<name>)` aliases at CSS-generation time.
+   */
+  value: string | {
+    readonly __kind: 'token';
+    readonly ref: string;
+  };
   /**
    * Resolved DTCG-aligned token type. Populated per-token only when the
    * token overrides the group-level `type` (e.g. a `'string'`-typed
@@ -115,7 +128,7 @@ type AtomicTokenValue<M extends ModifierNameShape> = {
   modifiers?: Partial<Record<M, string>>;
 };
 interface AtomicToken<M extends ModifierNameShape = ModifierNameShape> {
-  properties: ConfigurableProp[];
+  properties: string[];
   tokens: AtomicTokenValue<M>[];
   /**
    * Resolved DTCG-aligned token type for the whole group. Set from
@@ -177,6 +190,9 @@ type MergeTokens<A, B> = { [K in keyof A | keyof B]: K extends keyof B ? K exten
 /** 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 */
+declare function buildCompositeStylesReference(compositeStyles: CompositeStylesConfig): Record<string, Record<string, {
+  className: string;
+}>>;
 /** Global styles definition — CSS selector → style props */
 type GlobalStylesDef = Record<string, Record<string, any>>;
 /** CSS properties for the example wrapper element */
@@ -212,7 +228,16 @@ interface UdsConfigData {
   atomic: AtomicToken<ModifierNameShape>[];
   compositeStyles: CompositeStylesConfig;
   motion: MotionPresetsDef;
-  components: ComponentsConfig<string>;
+  /**
+   * Components registered via `.registerComponents({...})`. Authored
+   * elsewhere via `defineComponent('Name', config)` and imported into
+   * the config. The canonical input for codegen + runtime.
+   *
+   * Map keyed by component name (e.g. `Box`, `Alert`); each value is the
+   * `ComponentConfigValue` branded record carrying `layers`, `props`,
+   * `defaultProps`, `base`, `compoundProps`.
+   */
+  components: Record<string, ComponentConfigValue<any, any, any>>;
   globalStyles: GlobalStylesDef;
   preflight: boolean;
   prefix: string;
@@ -220,18 +245,6 @@ interface UdsConfigData {
   examples?: Record<string, ExampleDef>;
   designPrinciples?: string[];
   vars?: VarsConfig;
-  /**
-   * Token names contributed by any composed preset, keyed by namespace.
-   *
-   * Populated during `.compose()` — every token seen in the preset's `vars`
-   * or `atomic` is added to the set. A later local `.defineVars()` does NOT
-   * remove entries, so preset-overridden tokens remain marked as preset.
-   *
-   * Read by the rename path (MCP tool, canvas preview, CLI pull) to reject
-   * renames of preset tokens — they are read-only from the consumer's
-   * perspective.
-   */
-  presetTokenNames?: Record<string, string[]>;
   /**
    * Style props registered via `.registerStyleProps([...])`. Authored
    * elsewhere via `defineStyleProp(...)` and imported into the config.
@@ -250,38 +263,49 @@ interface UdsConfigData {
    */
   resolvedStyleProps?: ResolvedStyleProp[];
   /**
-   * Components registered via `.registerComponents({...})`. Authored
-   * elsewhere via `defineComponent('Name', config)` and imported into
-   * the config. The canonical input for codegen + runtime in the new
-   * layers-shape architecture.
+   * Bound React component references for any registered entry that
+   * came in as a bound component (primitive shorthand result or
+   * `.render(fn)` output). Populated alongside `components` by
+   * `.registerComponents({...})` and read by `resolveConfig` to seed
+   * the module-level runtime registry so `defineComponent('{Box}', {})`
+   * shorthand authoring can look the component up at render time
+   * without a `.render(fn)` boilerplate.
    *
-   * Map keyed by component name (e.g. `Box`, `Alert`); each value is the
-   * `ComponentConfigValue` branded record carrying `layers`, `props`,
-   * `defaultProps`.
+   * Raw-config entries (verbose-form `defineComponent({...})` values
+   * passed in without `.render()`) don't appear here — they have no FC
+   * to register.
    */
-  componentConfigs?: Record<string, ComponentConfigValue<any, any, any>>;
+  componentInstances?: Record<string, _$react.ComponentType<any>>;
+  /**
+   * Previews registered via `.registerPreviews({ Name: definePreview(jsx) })`.
+   * Map keyed by component name (matching `components`); each value
+   * is a `DefinedPreview` carrying the authored JSX element and any
+   * metadata attached via the `.metadata({...})` chain.
+   *
+   * Codegen reads this map's call-site source (via ts-morph) and walks
+   * each JSX expression through `jsxToSpec` to populate
+   * `manifest.preview[name]`. The runtime value itself is mostly inert
+   * — Studio's catalog and docs's `[slug]` page consume the manifest,
+   * not this slot.
+   */
+  previews?: Record<string, DefinedPreview>;
 }
-interface ComponentConfig<TComponents extends ComponentsConfig<string> = ComponentsConfig<string>, TMotion extends MotionPresetsDef | undefined = MotionPresetsDef | undefined> {
-  name?: string;
-  requiredTokens: string[];
-  components: TComponents;
-  motion?: TMotion;
+type PresetMergeMode = 'preserve' | 'merge' | 'override';
+interface ComponentConfigMergeStrategy {
+  tokens?: PresetMergeMode;
+  modes?: PresetMergeMode;
+  modifiers?: PresetMergeMode;
+  motion?: PresetMergeMode;
+  components?: PresetMergeMode;
+  globalStyles?: PresetMergeMode;
+  examples?: PresetMergeMode;
 }
-type SingleComponentDef<TMotionAlias extends string = string> = ComponentsConfig<TMotionAlias>[string];
-type EmptyMotionPresetsDef = Record<never, never>;
-type SingleComponentDefinitionRecord<TName extends string, TComponent extends SingleComponentDef<string>> = { [K in TName]: TComponent };
-type DefineComponentInput<TTokens, TMotion, TComponent extends SingleComponentDef<MotionAliasValue<TMotion> | string> = SingleComponentDef<MotionAliasValue<TMotion> | string>> = TComponent | ((ctx: {
-  tokens: TTokens;
-  motion: TMotion;
-  components: Record<string, any>;
-}) => TComponent);
-type DefineComponentMotionInput<TTokens, TMotion extends MotionPresetsDef = MotionPresetsDef> = TMotion | ((tokens: TTokens) => TMotion);
 /** Helper type: builder result includes both the UdsConfig interface and any extensions */
 type ConfigResult<TModifier extends ModifierNameShape, TTokens, TMotion, TExt extends Record<string, any> = {}, TCompositeStyles = EmptyCompositeStyles, TModeModifiers extends ModifierNameShape = never, TVars extends VarsConfig = EmptyVars> = UdsConfig<TModifier, TTokens, TMotion, TExt, TCompositeStyles, TModeModifiers, TVars> & TExt;
 interface UdsConfig<TModifier extends ModifierNameShape = ModifierProp, TTokens = EmptyTokens, TMotion = EmptyMotion, TExt extends Record<string, any> = {}, TCompositeStyles = EmptyCompositeStyles, TModeModifiers extends ModifierNameShape = never, TVars extends VarsConfig = EmptyVars> {
   modes: ModeGroup[];
   atomic: AtomicToken<ModifierNameShape>[];
-  components: ComponentsConfig;
+  components: Record<string, ComponentConfigValue<any, any, any>>;
   preflight(enabled?: boolean): ConfigResult<TModifier, TTokens, TMotion, TExt, TCompositeStyles, TModeModifiers, TVars>;
   prefix(value: string): ConfigResult<TModifier, TTokens, TMotion, TExt, TCompositeStyles, TModeModifiers, TVars>;
   buildOptions(options: BuildOptions): ConfigResult<TModifier, TTokens, TMotion, TExt, TCompositeStyles, TModeModifiers, TVars>;
@@ -293,6 +317,36 @@ 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>;
+  /**
+   * Register composite styles authored via `defineCompositeStyle({...})`.
+   * Mirrors `.registerStyleProps({...})` and `.registerComponents({...})`:
+   * one factory call per composite, then a single registration step on
+   * the builder. Calls accumulate — later registrations merge into the
+   * same `compositeStyles` map that `.defineCompositeStyles({...})`
+   * populates.
+   *
+   * Composites authored this way don't see the `tokens` context the
+   * inline `defineCompositeStyles((ctx) => ...)` callback receives —
+   * authors reference tokens by name (`'brand'`, `'sm'`) or brace-ref
+   * (`'{spacing/4}'`). The resolver expands these the same way it does
+   * for any other style-prop value.
+   *
+   * @example
+   * ```ts
+   * // packages/.../text-variant.ts
+   * export const textVariant = defineCompositeStyle({
+   *   label: 'Text Variant',
+   *   styles: { body: { fontSize: '[1rem]', fontWeight: 'normal' } },
+   * });
+   *
+   * // apps/<consumer>/uds.config.ts
+   * udsBuilder.registerComposites({ textVariant });
+   * ```
+   */
+  registerComposites<const M extends Record<string, DefinedCompositeStyle>>(composites: M): ConfigResult<TModifier, TTokens, TMotion, TExt, TCompositeStyles & { [K in keyof M]: {
+    label: string;
+    styles: M[K]['styles'];
+  } }, TModeModifiers, TVars>;
   /**
    * Register style props, keyed by the JSX prop name consumers will use.
    * Calls accumulate — later `.registerStyleProps({...})` calls merge into
@@ -340,36 +394,63 @@ interface UdsConfig<TModifier extends ModifierNameShape = ModifierProp, TTokens
    * uds.registerComponents({ Box, Alert: alertConfig });
    * ```
    */
-  registerComponents<const TConfigs extends Record<string, ComponentConfigValue<any, any, any> | BoundComponent<ComponentConfigValue<any, any, any>, any>>>(configs: TConfigs): ConfigResult<TModifier, TTokens, TMotion, TExt, TCompositeStyles, TModeModifiers, TVars>;
+  registerComponents<const TConfigs extends Record<string, ComponentConfigValue<any, any, any> | BoundComponent<ComponentConfigValue<any, any, any>, any> | (_$react.FC<any> & {
+    readonly __config: ComponentConfigValue<any, any, any>;
+  })>>(configs: TConfigs): ConfigResult<TModifier, TTokens, TMotion, TExt, TCompositeStyles, TModeModifiers, TVars>;
+  /**
+   * Register catalog / docs preview tiles. Each key must match a name
+   * registered via `.registerComponents({...})`; each value must be a
+   * `definePreview(jsx)` result.
+   *
+   * Calls accumulate. Later registrations merge into the existing map
+   * (later keys overwrite earlier ones with the same name). Codegen
+   * reads the call-site source via ts-morph and walks each JSX
+   * expression through `jsxToSpec` to populate `manifest.preview[name]`.
+   *
+   * @example
+   * ```ts
+   * import { Box, VStack } from './src/uds/components';
+   *
+   * const BoxPreview = definePreview(
+   *   <Box bg="tertiary" spacing="6">Box</Box>,
+   * );
+   *
+   * const VStackPreview = definePreview(
+   *   <VStack gap="3">
+   *     <Box>1</Box>
+   *     <Box>2</Box>
+   *   </VStack>,
+   * ).metadata({ description: 'Vertical stack' });
+   *
+   * uds.registerComponents({ Box, VStack }).registerPreviews({
+   *   Box: BoxPreview,
+   *   VStack: VStackPreview,
+   * });
+   * ```
+   */
+  registerPreviews<const TPreviews extends Record<string, DefinedPreview>>(previews: TPreviews): 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;
-    motion: TMotion;
-    components: Record<string, any>;
-  }) => ComponentsConfig<MotionAliasValue<TMotion> | string>)): ConfigResult<TModifier, TTokens, TMotion, TExt, TCompositeStyles, TModeModifiers, TVars>;
   defineGlobalStyles(params: GlobalStylesDef | ((tokens: TTokens) => GlobalStylesDef)): ConfigResult<TModifier, TTokens, TMotion, TExt, TCompositeStyles, TModeModifiers, TVars>;
   defineDesignPrinciples(principles: string[]): ConfigResult<TModifier, TTokens, TMotion, TExt, TCompositeStyles, TModeModifiers, TVars>;
-  defineExample(name: string, examples: ExampleDef): ConfigResult<TModifier, TTokens, TMotion, TExt, TCompositeStyles, TModeModifiers, TVars>;
-  compose(...presets: (ComponentConfig | UdsConfig | Partial<UdsConfigData>)[]): ConfigResult<TModifier, TTokens, TMotion, TExt, TCompositeStyles, TModeModifiers, TVars>;
-  defineComponent<const TName extends string, const TComponent extends SingleComponentDef<MotionAliasValue<TMotion> | string>, const TPresetMotion extends MotionPresetsDef = EmptyMotionPresetsDef>(name: TName, component: DefineComponentInput<TTokens, TMotion, TComponent>, motion?: DefineComponentMotionInput<TTokens, TPresetMotion>): ComponentConfig<SingleComponentDefinitionRecord<TName, TComponent>, TPresetMotion>;
-  from(data: Partial<UdsConfigData>): ConfigResult<TModifier, TTokens, TMotion, TExt, TCompositeStyles, TModeModifiers, TVars>;
   extend<const NewExt extends Record<string, any>>(ext: NewExt): ConfigResult<TModifier, TTokens, TMotion, TExt & NewExt, 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';
+declare function interpolate(config: {
   output: number[];
-  extrapolate: 'clamp' | 'extend' | 'identity';
-}
+  extrapolate?: 'clamp' | 'extend' | 'identity';
+}): InterpolateMarker;
+/**
+ * Convert a px value to rem (assuming 16px base).
+ *
+ * @example rem(14) // '0.875rem'
+ */
+declare function rem(px: number): string;
 declare function darker(color: string, amount: number): string;
 declare function lighter(color: string, amount: number): string;
+declare const uds: UdsConfig<ModifierProp, EmptyTokens, EmptyMotion, {}, EmptyCompositeStyles, never, EmptyVars>; //#endregion
 //#endregion
-export { AtomicToken, BuildOptions, CheckForReservedModifiersInput, ComponentConfig, DefineComponentInput, DefineComponentMotionInput, ExampleDef, ExampleEntryDef, ExampleLayoutStyles, GetModifierFromInput, GlobalStylesDef, InterpolateMarker, ModeGroup, ModeOption, ModeOptionInput, ModeSetInput, ModesInput, ModifierDef, MotionPresetsDef, SingleComponentDef, UdsConfig, UdsConfigData, buildTokenReference, createConfigBuilder, darker, lighter, resolveConfig };
+export { AtomicToken, BuildOptions, CheckForReservedModifiersInput, ComponentConfigMergeStrategy, ExampleDef, ExampleEntryDef, ExampleLayoutStyles, GetModifierFromInput, GlobalStylesDef, ModeGroup, ModeOption, ModeOptionInput, ModeSetInput, ModesInput, ModifierDef, MotionPresetsDef, PresetMergeMode, UdsConfig, UdsConfigData, buildCompositeStylesReference, buildTokenReference, convertModesInputToGroups, createConfigBuilder, darker, interpolate, lighter, rem, resolveConfig, uds };