@yahoo/uds-create-config 1.9.0 → 1.11.0-v3-import.1

package/dist/Component.d.ts

@@ -1,4 +1,4 @@
-import { BaseStyles, ComponentDefinition, ComponentMetadata, ComponentMotionValue, CompoundPropsEntry, LayerInput, PreviewDefinition, PropBinding, SerializedComponent } from "./types.js";
+import { BaseStyles, ComponentDefinition, ComponentMetadata, ComponentMotionValue, CompoundPropsEntry, LayerInput, PreviewDefinition, PropBinding, RefTag, SerializedComponent } from "./types.js";
 import { SlotValueType } from "./markers.js";
 import { ComponentClassNames } from "@yahoo/uds-create-utils";
 
@@ -164,6 +164,9 @@ declare class Component {
   readonly defaultProps?: Record<string, unknown>;
   readonly compoundProps?: readonly CompoundPropsEntry[];
   readonly motion?: ComponentMotionValue;
+  /** Opt-in forwarded-ref target tag (`.config({ ref: 'button' })`). Drives the
+   *  typed `ref` prop in `@yahoo/uds-create-config` and the codegen forwardRef wrapper. */
+  readonly ref?: RefTag;
   readonly preview?: PreviewDefinition;
   readonly metadata?: ComponentMetadata;
   /**
@@ -194,6 +197,13 @@ declare class Component {
    * that path.
    */
   readonly renderFn?: unknown;
+  /** `true` when the authored definition chained `.renderCanvas(fn)` — the
+   *  non-enumerable `__hasRenderCanvasFn` flag. Codegen emits a canvas-only
+   *  overlay artifact for these; spec extraction prefers the canvas fn. */
+  readonly hasCanvasRenderFn: boolean;
+  /** The `.renderCanvas(fn)` callback when `hasCanvasRenderFn` is `true`.
+   *  In-memory only (functions never serialize). */
+  readonly canvasRenderFn?: unknown;
   /**
    * Name of the component this one value-extends from
    * (`defineComponent(Box)` → `'Box'`). Resolved from the non-

package/dist/Component.js

@@ -135,6 +135,9 @@ var Component = class {
 	defaultProps;
 	compoundProps;
 	motion;
+	/** Opt-in forwarded-ref target tag (`.config({ ref: 'button' })`). Drives the
+	*  typed `ref` prop in `@yahoo/uds-create-config` and the codegen forwardRef wrapper. */
+	ref;
 	preview;
 	metadata;
 	/**
@@ -165,6 +168,13 @@ var Component = class {
 	* that path.
 	*/
 	renderFn;
+	/** `true` when the authored definition chained `.renderCanvas(fn)` — the
+	*  non-enumerable `__hasRenderCanvasFn` flag. Codegen emits a canvas-only
+	*  overlay artifact for these; spec extraction prefers the canvas fn. */
+	hasCanvasRenderFn;
+	/** The `.renderCanvas(fn)` callback when `hasCanvasRenderFn` is `true`.
+	*  In-memory only (functions never serialize). */
+	canvasRenderFn;
 	/**
 	* Name of the component this one value-extends from
 	* (`defineComponent(Box)` → `'Box'`). Resolved from the non-
@@ -239,6 +249,7 @@ var Component = class {
 		this.defaultProps = args.definition.defaultProps;
 		this.compoundProps = args.definition.compoundProps;
 		this.motion = args.definition.motion;
+		this.ref = args.definition.ref;
 		const def = args.definition;
 		const previewField = typeof def.preview === "function" ? void 0 : def.preview;
 		this.preview = def.__preview ?? previewField;
@@ -250,6 +261,8 @@ var Component = class {
 		this.sourceFilePath = readSourcePath(args.definition);
 		this.hasRenderFn = args.definition.__hasRenderFn === true;
 		this.renderFn = args.definition.__renderFn;
+		this.hasCanvasRenderFn = args.definition.__hasRenderCanvasFn === true;
+		this.canvasRenderFn = args.definition.__renderCanvasFn;
 		const extendsFromSeed = args.definition.__extendsFrom;
 		const extendsFromName = extendsFromSeed && typeof extendsFromSeed === "object" && typeof extendsFromSeed.__componentName === "string" ? extendsFromSeed.__componentName : void 0;
 		this.extendsFrom = extendsFromName ?? args.definition.extendsFrom;
@@ -317,6 +330,7 @@ var Component = class {
 				defaultProps: this.defaultProps,
 				compoundProps: this.compoundProps,
 				motion: this.motion,
+				ref: this.ref,
 				preview: this.preview ? serializeElementsDeep(this.preview) : void 0,
 				metadata: this.metadata,
 				sourceFilePath,

package/dist/Props.d.ts

@@ -1,7 +1,7 @@
 import { RegisteredCompositeStyles, RegisteredModifiers, RegisteredStyleProps, TagRef } from "./refs.js";
 import { ColorExpression } from "./colorExpressions.js";
-import { ComponentDefinition, LayerInput, PropBinding, RootTag } from "./types.js";
-import { ComponentPropsWithRef, HTMLAttributes, JSX, ReactNode } from "react";
+import { ComponentDefinition, LayerInput, PropBinding, RefElement, RootTag } from "./types.js";
+import { ComponentPropsWithRef, ElementType, HTMLAttributes, JSX, ReactNode, Ref } from "react";
 
 //#region src/Props.d.ts
 /**
@@ -270,7 +270,7 @@ type EffectiveTag<TDef, TTag, TLayers> = TDef extends {
   };
 } ? A : string extends TTag ? RootTag<TLayers> : [TTag] extends [undefined] ? RootTag<TLayers> : TTag extends string ? TTag : RootTag<TLayers>;
 type PropsBase<TDef extends ComponentDefinition<Record<string, LayerInput>, Record<string, PropBinding>, string | undefined>> = TDef extends ComponentDefinition<infer TLayers extends Record<string, LayerInput>, infer TProps extends Record<string, PropBinding>, infer TTag extends string | undefined> ? PropsFromBindings<TProps, TLayers> & Omit<ComposedRootProps<TLayers>, keyof TProps | 'children'> & Omit<ElementProps<EffectiveTag<TDef, TTag, TLayers>>, keyof TProps | keyof ComposedRootProps<TLayers>> & DataAttrs & {
-  as?: keyof JSX.IntrinsicElements;
+  as?: ElementType;
   layerProps?: LayerPropsMap<TLayers>;
 } : never;
 /**
@@ -298,16 +298,29 @@ type PropsBase<TDef extends ComponentDefinition<Record<string, LayerInput>, Reco
  * during package-wide typechecks (`@yahoo/uds-create-codegen` builds saw this
  * at `factories.ts:853`).
  */
+/**
+ * Opt-in forwarded-ref prop. A component declares its ref target via
+ * `.config({ ref: 'button' })`; that tag is captured on the definition's `ref`
+ * field and mapped here to `ref?: Ref<HTMLButtonElement>`. When declared and
+ * resolvable, it *overrides* the element's natural ref (see `Props`, which omits
+ * exactly `keyof RefProp` before re-adding this). When it can't resolve to a
+ * tag, it contributes nothing and the natural ref is left intact.
+ */
+type RefProp<TDef> = TDef extends {
+  ref: infer Tag extends string;
+} ? {
+  ref?: Ref<RefElement<Tag>>;
+} : Record<never, never>;
 type Props<TDef extends ComponentDefinition<Record<string, LayerInput>, Record<string, PropBinding>, string | undefined>> = TDef extends {
   layers: Record<string, LayerInput>;
-} ? Record<string, LayerInput> extends TDef['layers'] ? PermissiveProps : Prettify<PropsBase<TDef> & RegisteredModifiers<PropsBase<TDef>>> : PermissiveProps;
+} ? Record<string, LayerInput> extends TDef['layers'] ? PermissiveProps : Prettify<Omit<PropsBase<TDef> & RegisteredModifiers<PropsBase<TDef>>, keyof RefProp<TDef>> & RefProp<TDef>> : PermissiveProps;
 /**
  * Permissive prop bag used as the bail-out shape when `Props<TDef>`
  * can't narrow against a concrete `layers` map (mirrors the
  * `FC<any>` slot the pre-Props builder used to carry).
  */
 type PermissiveProps = HTMLAttributes<HTMLElement> & DataAttrs & Record<string, any> & {
-  as?: keyof JSX.IntrinsicElements;
+  as?: ElementType;
 };
 /**
  * `Props<typeof boxConfig>` for the common 'use the definition's inferred

package/dist/StyleProp.js

@@ -116,6 +116,7 @@ var StyleProp = class StyleProp {
 			const keywords = /* @__PURE__ */ new Map();
 			for (const entry of values) if (typeof entry === "string") keywords.set(entry, this.transform ? this.transform(entry) : entry);
 			else if (typeof entry === "number") keywords.set(entry, this.transform ? this.transform(entry) : String(entry));
+			else if (typeof entry === "boolean") keywords.set(entry, String(entry));
 			else if (typeof entry === "object" && entry !== null && "alias" in entry && "value" in entry) keywords.set(entry.alias, entry.value);
 			this.#derived = {
 				keywords,

package/dist/asset-value.d.ts

@@ -0,0 +1,23 @@
+import { FontAssetMember } from "./types.js";
+import { AssetGroup } from "./AssetGroup.js";
+
+//#region src/asset-value.d.ts
+/**
+ * Assemble a `font-family` CSS value from a font member — the primary
+ * family (always double-quoted, so multi-word names are valid) followed by
+ * its fallback stack. `fallback` rides `FontAssetMember`'s open index as
+ * `unknown`, so read it defensively: a `string` is appended verbatim (it
+ * may itself be a comma list), a `string[]` is joined, anything else is
+ * ignored. Fallback entries are emitted verbatim — they're generic keywords
+ * (`sans-serif`) or already-formatted names.
+ */
+declare function resolveFontStack(member: FontAssetMember): string;
+/**
+ * Resolve a `<slug>/<member>` asset ref to its `font-family` CSS stack.
+ * Every failure is a named throw (no silent string fallthrough): a
+ * malformed ref, an unregistered group, a non-font group, or a missing
+ * member each name the offending ref so config load fails loudly.
+ */
+declare function resolveAssetRefCss(ref: string, assetGroups: ReadonlyMap<string, AssetGroup>): string;
+//#endregion
+export { resolveAssetRefCss, resolveFontStack };

package/dist/asset-value.js

@@ -0,0 +1,40 @@
+//#region src/asset-value.ts
+/**
+* Assemble a `font-family` CSS value from a font member — the primary
+* family (always double-quoted, so multi-word names are valid) followed by
+* its fallback stack. `fallback` rides `FontAssetMember`'s open index as
+* `unknown`, so read it defensively: a `string` is appended verbatim (it
+* may itself be a comma list), a `string[]` is joined, anything else is
+* ignored. Fallback entries are emitted verbatim — they're generic keywords
+* (`sans-serif`) or already-formatted names.
+*/
+function resolveFontStack(member) {
+	const primary = `"${member.fontFamily}"`;
+	const { fallback } = member;
+	if (typeof fallback === "string" && fallback.length > 0) return `${primary}, ${fallback}`;
+	if (Array.isArray(fallback) && fallback.every((entry) => typeof entry === "string")) {
+		const stack = fallback.filter((entry) => entry.length > 0);
+		return stack.length > 0 ? `${primary}, ${stack.join(", ")}` : primary;
+	}
+	return primary;
+}
+/**
+* Resolve a `<slug>/<member>` asset ref to its `font-family` CSS stack.
+* Every failure is a named throw (no silent string fallthrough): a
+* malformed ref, an unregistered group, a non-font group, or a missing
+* member each name the offending ref so config load fails loudly.
+*/
+function resolveAssetRefCss(ref, assetGroups) {
+	const slash = ref.indexOf("/");
+	if (slash <= 0 || slash === ref.length - 1) throw new Error(`asset('${ref}') is malformed — expected a '<group>/<member>' ref.`);
+	const slug = ref.slice(0, slash);
+	const memberName = ref.slice(slash + 1);
+	const group = assetGroups.get(slug);
+	if (!group) throw new Error(`asset('${ref}') — no asset group is registered under slug '${slug}'.`);
+	if (group.assetKind !== "font") throw new Error(`asset('${ref}') — group '${slug}' is a '${group.assetKind}' group; only font groups can be referenced as a token value.`);
+	const member = group.members?.[memberName];
+	if (!member) throw new Error(`asset('${ref}') — member '${memberName}' is not registered in font group '${slug}'.`);
+	return resolveFontStack(member);
+}
+//#endregion
+export { resolveAssetRefCss, resolveFontStack };

package/dist/defineAssetGroup.d.ts

@@ -99,6 +99,13 @@ interface FontAssetGroupConfig {
   /** Source-library version shown in the Assets UI (e.g. `2.1.1`). */
   version?: string;
   description?: string;
+  /**
+   * FontIDs to fold in as deprecated at registration — each listed
+   * member is stamped `deprecated: true`. Deprecated fonts stay fully
+   * selectable (no hard block); the flag only lets the picker badge them.
+   * An id not present in the member map is ignored.
+   */
+  deprecated?: readonly string[];
   /** Icon-class prop — excluded on the font branch at the type level. */
   sizes?: never;
   /** Icon-class prop — excluded on the font branch at the type level. */

package/dist/defineAssetGroup.js

@@ -130,6 +130,24 @@ function guardFontMembers(raw) {
 	return members;
 }
 /**
+* Stamp `deprecated: true` on each member named in the `deprecated` list.
+* Shallow-copies only the affected records so the caller's source map is
+* never mutated; ids not in the member map are ignored (governance lists
+* routinely outlive the fonts they name).
+*/
+function foldInDeprecated(members, deprecated) {
+	if (!deprecated?.length) return members;
+	const flagged = new Set(deprecated);
+	for (const id of flagged) {
+		const member = members[id];
+		if (member) members[id] = {
+			...member,
+			deprecated: true
+		};
+	}
+	return members;
+}
+/**
 * Variant superset when `config.variants` is omitted: the harvested
 * union of members' `.metadata.variants`, first-seen order.
 */
@@ -218,7 +236,7 @@ function defineAssetGroup(members) {
 			if (config.version !== void 0) out.version = config.version;
 			if (config.description !== void 0) out.description = config.description;
 			if (config.type === "font") {
-				const fontMembers = guardFontMembers(members);
+				const fontMembers = foldInDeprecated(guardFontMembers(members), config.deprecated);
 				out.assetKind = "font";
 				defineHidden(out, "members", fontMembers);
 				stampRefTag(out);

package/dist/factories.d.ts

@@ -1,10 +1,10 @@
-import { RegisteredModifiers, TagRef, TokenGroupRef, composite, styleProp, token } from "./refs.js";
+import { RegisteredModifiers, TagRef, TokenGroupRef, TokenRawNameRegistry, composite, styleProp, token } from "./refs.js";
 import { darken, lighten } from "./colorExpressions.js";
-import { ComponentDefinition, ComponentGroupDefinition, ComponentMetadata, CompositeStyleDefinition, LayerInput, ModeDefinition, ModifierDefinition, MotionDefinitionInput, PreviewDefinition, StylePropDefinition, StylePropMetadata, StylePropProperty, TokenDefinition } from "./types.js";
+import { ComponentDefinition, ComponentGroupDefinition, ComponentMetadata, CompositeStyleDefinition, LayerInput, ModeDefinition, ModifierDefinition, MotionDefinitionInput, PreviewDefinition, RefElement, StylePropDefinition, StylePropMetadata, StylePropProperty, TokenDefinition } from "./types.js";
 import { BooleanMarker, ComponentSlotMarker, LayerMarker, NumberMarker, PreviewAxisMarker, PreviewPropsRule, RequiredBrand, SlotMarker, SlotRef, SlotValueType, StringMarker, VariantMarker, VariantMarkerArray, VariantMarkerObject } from "./markers.js";
 import { BaseLayerStyles, LayerPropsMap, LayerTag, Props, PropsFromBindings, SlotPropValue } from "./Props.js";
 import { defineProvider } from "./defineProvider.js";
-import { ComponentPropsWithRef, ComponentType, FC, HTMLAttributes, JSX, ReactNode } from "react";
+import { ComponentPropsWithRef, ComponentRef, ComponentType, ElementType, FC, HTMLAttributes, JSX, ReactElement, ReactNode, Ref } from "react";
 
 //#region src/factories.d.ts
 /**
@@ -140,6 +140,19 @@ declare function boolean(values?: {
   true?: Record<string, Record<string, unknown>>;
   false?: Record<string, Record<string, unknown>>;
 }): Chainable<BooleanMarker>;
+/**
+ * `asChild()` — opt a **single-layer** component into the polymorphic-child
+ * Slot pattern. Declare it as a prop (`props: { asChild: asChild() }`); when a
+ * consumer passes `asChild`, the component merges its computed props (className,
+ * style props, handlers) onto its single child element instead of rendering its
+ * own tag — codegen wires the `_renderAsChild` Slot. Typed as a boolean prop
+ * (`asChild?: boolean`), so no extra type plumbing.
+ *
+ * Opt-in only and single-layer only: multi-layer composites render multiple
+ * children and can't slot a single child, so the codegen Slot branch is emitted
+ * solely for inline single-layer FCs.
+ */
+declare function asChild(): BooleanMarker;
 /**
  * Cross-layer style override — `_hover: layer('close', { opacity: 1 })`
  * declares "when this layer is hovered, apply these styles to the
@@ -199,6 +212,7 @@ interface ConfigCallbackHelpers {
   readonly slot: typeof slot;
   readonly variant: typeof variant;
   readonly boolean: typeof boolean;
+  readonly asChild: typeof asChild;
   readonly string: typeof string;
   readonly number: typeof number;
   readonly layer: typeof layer;
@@ -348,6 +362,7 @@ type TypedConfigHelpers<T extends ComponentDefinition> = T extends ComponentDefi
   readonly slot: TypedSlotHelper<TLayers>;
   readonly variant: TypedVariantHelper<TLayers>;
   readonly boolean: TypedBooleanHelper<TLayers>;
+  readonly asChild: typeof asChild;
   readonly layer: TypedLayerHelper<TLayers>;
   readonly string: typeof string;
   readonly number: typeof number;
@@ -457,13 +472,28 @@ type ConfigCallbackResultFor<T extends ComponentDefinition> = Omit<ConfigCallbac
  * key is omitted.
  */
 type MergeNested<T, C, K extends string> = C extends Record<K, infer CV> ? T extends Record<K, infer TV> ? Record<K, Omit<TV, keyof CV> & CV> : Record<K, CV> : T extends Record<K, infer TV> ? Record<K, TV> : {};
+/**
+ * `ref` is a scalar tag, so a value-extend that re-declares it must *override*
+ * the inherited tag (Pressable's `'button'` over Box's `'div'`). A plain
+ * intersection would collapse `'div' & 'button'` to `never` — poisoning the
+ * whole merged definition. C wins; falls back to T's tag when C omits `ref`.
+ */
+type MergeRef<T, C> = C extends {
+  ref: infer CR;
+} ? {
+  ref: CR;
+} : T extends {
+  ref: infer TR;
+} ? {
+  ref: TR;
+} : Record<never, never>;
 /**
  * Merge a `.config(cb)` callback result `C` over the chain seed `T`.
  * Nested fields (`props`, `defaultProps`, `base`) merge per-key (C
- * overrides T at the leaf level); other fields fall back to the
- * historic `T & C` intersection.
+ * overrides T at the leaf level); `ref` overrides as a scalar; other fields
+ * fall back to the historic `T & C` intersection.
  */
-type MergeChainConfig<T, C> = Omit<T, 'props' | 'defaultProps' | 'base'> & Omit<C, 'props' | 'defaultProps' | 'base'> & MergeNested<T, C, 'props'> & MergeNested<T, C, 'defaultProps'> & MergeNested<T, C, 'base'>;
+type MergeChainConfig<T, C> = Omit<T, 'props' | 'defaultProps' | 'base' | 'ref'> & Omit<C, 'props' | 'defaultProps' | 'base' | 'ref'> & MergeRef<T, C> & MergeNested<T, C, 'props'> & MergeNested<T, C, 'defaultProps'> & MergeNested<T, C, 'base'>;
 /**
  * Per-config slot-prop map: walk a `props` block, pick out every
  * `slot()`-marked entry, and surface it as `ReactNode | undefined` on
@@ -525,6 +555,41 @@ type RenderPropsFromConfig<TProps, TDefaultKeys extends PropertyKey = never> = {
  * render fn just spreads them with `{...props.<layer>}`.
  */
 type LayerPropsBundle<TLayers> = { [K in keyof TLayers]: Record<string, unknown> };
+/**
+ * Resolved value object for a single token. `value` is the
+ * light-mode (or single-mode) CSS value string. Any `_${string}` key
+ * (e.g. `_dark`) holds the override for that mode. `type` is an
+ * optional token-category hint (e.g. `'color'`, `'dimension'`).
+ *
+ * The precise qualified-name union for `tokenRaw`'s `name` parameter
+ * is layered on at the call site via codegen's `uds-env.d.ts`
+ * augmentation — keep this type config-agnostic.
+ */
+type RawToken = {
+  value: string;
+  type?: string;
+} & { [K in `_${string}`]?: string };
+/** The accepted `name` argument for `tokenRaw`. Narrows to the
+ *  config's registered `'<group>/<token>'` union when codegen has
+ *  augmented `TokenRawNameRegistry`; falls back to `string` in
+ *  un-augmented contexts (this package's own tests, fresh consumers
+ *  before the first build). */
+type TokenRawName = [keyof TokenRawNameRegistry] extends [never] ? string : keyof TokenRawNameRegistry;
+/**
+ * Resolved return shape of `tokenRaw(name)` for a specific `name`. Once codegen
+ * has augmented `TokenRawNameRegistry`, each registered name maps to its own
+ * per-token shape — `{ value: string; _dark: string }` for a themed token,
+ * `{ value: string }` for one with no mode overrides. A finite template/union
+ * name (e.g. `` `spectrum/blue/${step}` `` with `step` a finite union) resolves
+ * to the union of the matching tokens' shapes, which collapses to a single type
+ * when they share one. Falls back to the open `RawToken` in un-augmented
+ * contexts (this package's own tests, fresh consumers before the first build).
+ *
+ * Values are `string`, not literals: token values are indirection by design and
+ * change with theming, so a baked-in literal would go stale — the stable,
+ * useful information a name carries is which keys it has.
+ */
+type TokenRawValue<N extends TokenRawName> = N extends keyof TokenRawNameRegistry ? TokenRawNameRegistry[N] : RawToken;
 /**
  * Shape of the render fn passed to `.render<TExtra>(fn)`. `props` is
  * the per-layer bundle injected by the codegen-emitted wrapper FC,
@@ -535,10 +600,22 @@ type LayerPropsBundle<TLayers> = { [K in keyof TLayers]: Record<string, unknown>
  * (function-typed handlers, complex object pass-throughs) that the
  * marker system doesn't express yet.
  */
-type ComponentRenderFn<TExtra = unknown, TConfigProps = unknown, TLayers = Record<string, unknown>> = (args: {
+/**
+ * The render fn's `ref` arg, present only when the component declares
+ * `.config({ ref: 'tag' })`. The author attaches it to the real root element
+ * (`<svg ref={ref} {...props.root} />`), so TS checks the attachment against
+ * the declared element. No declaration → no `ref` arg (empty intersection).
+ */
+type RefArgFor<TDef> = TDef extends {
+  ref: infer Tag extends string;
+} ? {
+  ref?: Ref<RefElement<Tag>>;
+} : Record<never, never>;
+type ComponentRenderFn<TExtra = unknown, TConfigProps = unknown, TLayers = Record<string, unknown>, TRefArg = Record<never, never>> = (args: {
   props: LayerPropsBundle<TLayers>;
   children?: ReactNode;
-} & TConfigProps & TExtra) => ReactNode;
+  tokenRaw: <N extends TokenRawName>(name: N) => TokenRawValue<N>;
+} & TConfigProps & TExtra & TRefArg) => ReactNode;
 /**
  * Chain methods attached to every `defineComponent` result. The
  * builder type intersects with the underlying `ComponentDefinition`
@@ -573,7 +650,7 @@ interface ComponentBuilderMethods<T extends ComponentDefinition> {
     defaultProps: infer D;
   } ? keyof D : never> : unknown, T extends {
     layers: infer L;
-  } ? L : Record<string, unknown>>): BoundComponent<T, TExtra>;
+  } ? L : Record<string, unknown>, RefArgFor<T>>): BoundComponent<T, TExtra>;
   /**
    * Attach a declarative preview spec — stored under non-enumerable
    * `__preview` so the authored builder stays JSON-clean. Callback
@@ -620,7 +697,15 @@ interface ComponentBuilderMethods<T extends ComponentDefinition> {
  *     concession that keeps source files typechecking against this
  *     value as if it were the rewritten artifact.
  */
-type ComponentBuilder<T extends ComponentDefinition> = T & ComponentBuilderMethods<T> & FC<Props<T>>;
+interface UdsComponent<P> {
+  <C extends ElementType, TExtra = {}>(props: Omit<P, 'ref'> & {
+    as: C;
+    ref?: Ref<ComponentRef<C>>;
+  } & NoInfer<TExtra>): ReactElement | null;
+  <TExtra = {}>(props: P & NoInfer<TExtra>): ReactElement | null;
+  readonly displayName?: string;
+}
+type ComponentBuilder<T extends ComponentDefinition> = T & ComponentBuilderMethods<T> & UdsComponent<Props<T>>;
 /**
  * Bound component returned by `.render<TExtra>(fn)`. Mirrors main's
  * `BoundComponent`: an `FC` whose JSX props are
@@ -645,6 +730,13 @@ interface BoundComponentMethods<T extends ComponentDefinition, TExtra extends Re
   preview(spec: PreviewDefinition<Omit<DefaultPropsFor<T>, keyof TExtra> & TExtra> | ((helpers: TypedPreviewHelpers<T>) => PreviewDefinition<Omit<DefaultPropsFor<T>, keyof TExtra> & TExtra>)): BoundComponent<T, TExtra>;
   subcomponents(children: Record<string, ComponentDefinition>): BoundComponent<T, TExtra>;
   metadata(meta: ComponentMetadata): BoundComponent<T, TExtra>;
+  renderCanvas<TCanvasExtra extends Record<string, unknown> = TExtra>(fn: ComponentRenderFn<TCanvasExtra, T extends {
+    props: infer P;
+  } ? RenderPropsFromConfig<P, T extends {
+    defaultProps: infer D;
+  } ? keyof D : never> : unknown, T extends {
+    layers: infer L;
+  } ? L : Record<string, unknown>, RefArgFor<T>>): BoundComponent<T, TExtra>;
 }
 type BoundComponent<T extends ComponentDefinition, TExtra extends Record<string, unknown> = {}> = T & FC<Omit<Props<T>, keyof TExtra> & TExtra> & BoundComponentMethods<T, TExtra> & {
   readonly __config: T;
@@ -717,4 +809,4 @@ type ProviderComponent<TProps = Record<never, never>> = FC<{
  */
 type DefinedProvider<TContext = unknown, TProps = Record<never, never>> = readonly [ProviderComponent<TProps>, () => TContext];
 //#endregion
-export { BoundComponent, ComponentBuilder, ComponentBuilderMethods, ComponentRenderFn, ConfigCallbackHelpers, DefineComponentFn, DefinedComponent, DefinedProvider, DefinedStyleProp, DefinedTokenGroup, PreviewCallbackHelpers, ProviderComponent, ProviderRenderFn, TokenGroupMetadata, TypedSlotRef, boolean, defineComponent, defineComponentGroup, defineCompositeStyle, defineMode, defineModifier, defineMotion, defineStyleProp, defineTokenGroup, number, slot, string, variant };
+export { BoundComponent, ComponentBuilder, ComponentBuilderMethods, ComponentRenderFn, ConfigCallbackHelpers, DefineComponentFn, DefinedComponent, DefinedProvider, DefinedStyleProp, DefinedTokenGroup, PreviewCallbackHelpers, ProviderComponent, ProviderRenderFn, RawToken, TokenGroupMetadata, TokenRawValue, TypedSlotRef, asChild, boolean, defineComponent, defineComponentGroup, defineCompositeStyle, defineMode, defineModifier, defineMotion, defineStyleProp, defineTokenGroup, number, slot, string, variant };

package/dist/factories.js

@@ -192,6 +192,24 @@ function boolean(values) {
 	});
 }
 /**
+* `asChild()` — opt a **single-layer** component into the polymorphic-child
+* Slot pattern. Declare it as a prop (`props: { asChild: asChild() }`); when a
+* consumer passes `asChild`, the component merges its computed props (className,
+* style props, handlers) onto its single child element instead of rendering its
+* own tag — codegen wires the `_renderAsChild` Slot. Typed as a boolean prop
+* (`asChild?: boolean`), so no extra type plumbing.
+*
+* Opt-in only and single-layer only: multi-layer composites render multiple
+* children and can't slot a single child, so the codegen Slot branch is emitted
+* solely for inline single-layer FCs.
+*/
+function asChild() {
+	return {
+		__kind: "boolean",
+		__asChild: true
+	};
+}
+/**
 * 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
@@ -259,6 +277,7 @@ const configHelpers = {
 	slot,
 	variant,
 	boolean,
+	asChild,
 	string,
 	number,
 	layer,
@@ -352,6 +371,11 @@ function attachChainMethods(seed) {
 		def("__hasRenderFn", true);
 		return seed;
 	});
+	def("renderCanvas", function renderCanvasMethod(fn) {
+		def("__renderCanvasFn", fn);
+		def("__hasRenderCanvasFn", true);
+		return seed;
+	});
 	def("preview", function previewMethod(spec) {
 		def("__preview", typeof spec === "function" ? spec(previewHelpers) : spec);
 		return seed;
@@ -396,4 +420,4 @@ defineComponentImpl.layers = function layersEntry(layers) {
 };
 const defineComponent = defineComponentImpl;
 //#endregion
-export { boolean, defineComponent, defineComponentGroup, defineCompositeStyle, defineMode, defineModifier, defineMotion, defineStyleProp, defineTokenGroup, number, slot, string, variant };
+export { asChild, boolean, defineComponent, defineComponentGroup, defineCompositeStyle, defineMode, defineModifier, defineMotion, defineStyleProp, defineTokenGroup, number, slot, string, variant };

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 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 { AnyRef, AssetGroupName, AssetGroupRef, AssetName, AssetRef, ComponentName, ComponentRef, CompositeName, CompositeRef, CompositeRefBuilder, ModeName, ModeRef, RegisteredAssetGroups, RegisteredComponents, RegisteredCompositeStyles, RegisteredModes, RegisteredModifiers, RegisteredMotionDefs, RegisteredStyleProps, RegisteredTokenGroups, StylePropName, StylePropRef, TagName, TagRef, TokenGroupName, TokenGroupRef, TokenName, TokenQualifiedName, TokenRawNameRegistry, TokenRef, asset, assetGroup, component, composite, isAssetGroupRef, isAssetRef, 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";
@@ -7,15 +7,16 @@ import { ColorCssProperty, CssGlobalKeyword, CssPropertyName, CssPropertyValues
 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 { resolveAssetRefCss, resolveFontStack } from "./asset-value.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 { DataAttrs, LayerPropsMap } 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 { BoundComponent, ComponentBuilder, ComponentBuilderMethods, ComponentRenderFn, ConfigCallbackHelpers, DefineComponentFn, DefinedComponent, DefinedProvider, DefinedStyleProp, DefinedTokenGroup, PreviewCallbackHelpers, RawToken, TokenGroupMetadata, TokenRawValue, TypedSlotRef, asChild, 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";
@@ -30,4 +31,4 @@ import { ELEMENT_MARKER_KIND, ElementMarker, OpaqueLeafPredicate, hasElementMark
 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, findComponentReferrers, 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 };
+export { ASSET_CLASS_CAPABILITIES, type AnyRef, type AnyStylePropDefinition, type ArbitrarySpec, AssetGroup, type AssetGroupBuilder, type AssetGroupConfig, type AssetGroupDefinition, type AssetGroupName, type AssetGroupRef, type AssetKind, type AssetName, type AssetRef, 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 LayerPropsMap, 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 RawToken, 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 TokenRawNameRegistry, type TokenRawValue, type TokenRef, type TokenRefToCss, type TokenType, type TokenValue, type TypedSlotRef, type ValuesEntry, type VariantInfo, type VariantMarker, type VariantMarkerArray, type VariantMarkerObject, alpha, asChild, asset, assetGroup, attachSourcePath, boolean, buildModeBackedModifierLookup, buildNestedModifierUpdate, captureCallerPath, component, composite, createModeBackedModifierLookup, cssClassName, cssDeclaration, cssSelector, cssVar, defineAssetGroup, defineAssetIcon, defineComponent, defineComponentGroup, defineCompositeStyle, defineMode, defineModifier, defineMotion, defineProvider, defineStyleProp, defineTokenGroup, findComponentReferrers, hasElementMarkerDeep, interpolate, isAssetGroupRef, isAssetRef, 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, resolveAssetRefCss, resolveColorExpression, resolveFontStack, resolveOverrideRowValue, resolvePreviewRules, reviveElementMarkersDeep, slot, string, styleProp, tag, token, tokenGroup, variant };

package/dist/index.js

@@ -2,8 +2,9 @@ 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 { resolveAssetRefCss, resolveFontStack } from "./asset-value.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 { asset, assetGroup, component, composite, isAssetGroupRef, isAssetRef, 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";
@@ -21,9 +22,9 @@ import { TokenGroup } from "./TokenGroup.js";
 import { Config, parseRegistryKey } from "./Config.js";
 import { findComponentReferrers } from "./component-referrers.js";
 import { defineProvider } from "./defineProvider.js";
-import { boolean, defineComponent, defineComponentGroup, defineCompositeStyle, defineMode, defineModifier, defineMotion, defineStyleProp, defineTokenGroup, number, slot, string, variant } from "./factories.js";
+import { asChild, 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, findComponentReferrers, 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 };
+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, asChild, asset, assetGroup, attachSourcePath, boolean, buildModeBackedModifierLookup, buildNestedModifierUpdate, captureCallerPath, component, composite, createModeBackedModifierLookup, cssClassName, cssDeclaration, cssSelector, cssVar, defineAssetGroup, defineAssetIcon, defineComponent, defineComponentGroup, defineCompositeStyle, defineMode, defineModifier, defineMotion, defineProvider, defineStyleProp, defineTokenGroup, findComponentReferrers, hasElementMarkerDeep, interpolate, isAssetGroupRef, isAssetRef, 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, resolveAssetRefCss, resolveColorExpression, resolveFontStack, resolveOverrideRowValue, resolvePreviewRules, reviveElementMarkersDeep, slot, string, styleProp, tag, token, tokenGroup, variant };