@yahoo/uds-create-config 1.2.0-v3-import.2 → 1.2.1

package/dist/Component.d.ts

@@ -1,4 +1,4 @@
-import { BaseStyles, ComponentDefinition, ComponentMetadata, ComponentMotionValue, CompoundPropsEntry, LayerInput, PreviewDefinition, PropBinding, RefTag, SerializedComponent } from "./types.js";
+import { BaseStyles, ComponentDefinition, ComponentMetadata, ComponentMotionValue, CompoundPropsEntry, LayerInput, PreviewDefinition, PropBinding, SerializedComponent } from "./types.js";
 import { SlotValueType } from "./markers.js";
 import { ComponentClassNames } from "@yahoo/uds-create-utils";
 
@@ -164,9 +164,6 @@ 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;
   /**
@@ -197,13 +194,6 @@ 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,9 +135,6 @@ 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;
 	/**
@@ -168,13 +165,6 @@ 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-
@@ -249,7 +239,6 @@ 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;
@@ -261,8 +250,6 @@ 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;
@@ -330,7 +317,6 @@ 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, RefElement, RootTag } from "./types.js";
-import { ComponentPropsWithRef, ElementType, HTMLAttributes, JSX, ReactNode, Ref } from "react";
+import { ComponentDefinition, LayerInput, PropBinding, RootTag } from "./types.js";
+import { ComponentPropsWithRef, HTMLAttributes, JSX, ReactNode } 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?: ElementType;
+  as?: keyof JSX.IntrinsicElements;
   layerProps?: LayerPropsMap<TLayers>;
 } : never;
 /**
@@ -298,29 +298,16 @@ 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<Omit<PropsBase<TDef> & RegisteredModifiers<PropsBase<TDef>>, keyof RefProp<TDef>> & RefProp<TDef>> : PermissiveProps;
+} ? Record<string, LayerInput> extends TDef['layers'] ? PermissiveProps : Prettify<PropsBase<TDef> & RegisteredModifiers<PropsBase<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?: ElementType;
+  as?: keyof JSX.IntrinsicElements;
 };
 /**
  * `Props<typeof boxConfig>` for the common 'use the definition's inferred

package/dist/StyleProp.js

@@ -116,7 +116,6 @@ 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/factories.d.ts

@@ -1,10 +1,10 @@
-import { RegisteredModifiers, TagRef, TokenGroupRef, TokenRawNameRegistry, composite, styleProp, token } from "./refs.js";
+import { RegisteredModifiers, TagRef, TokenGroupRef, composite, styleProp, token } from "./refs.js";
 import { darken, lighten } from "./colorExpressions.js";
-import { ComponentDefinition, ComponentGroupDefinition, ComponentMetadata, CompositeStyleDefinition, LayerInput, ModeDefinition, ModifierDefinition, MotionDefinitionInput, PreviewDefinition, RefElement, StylePropDefinition, StylePropMetadata, StylePropProperty, TokenDefinition } from "./types.js";
+import { ComponentDefinition, ComponentGroupDefinition, ComponentMetadata, CompositeStyleDefinition, LayerInput, ModeDefinition, ModifierDefinition, MotionDefinitionInput, PreviewDefinition, 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, ComponentRef, ComponentType, ElementType, FC, HTMLAttributes, JSX, ReactElement, ReactNode, Ref } from "react";
+import { ComponentPropsWithRef, ComponentType, FC, HTMLAttributes, JSX, ReactNode } from "react";
 
 //#region src/factories.d.ts
 /**
@@ -140,19 +140,6 @@ 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
@@ -212,7 +199,6 @@ 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;
@@ -362,7 +348,6 @@ 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;
@@ -459,28 +444,13 @@ 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); `ref` overrides as a scalar; other fields
- * fall back to the historic `T & C` intersection.
+ * overrides T at the leaf level); other fields fall back to the
+ * historic `T & C` intersection.
  */
-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'>;
+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'>;
 /**
  * Per-config slot-prop map: walk a `props` block, pick out every
  * `slot()`-marked entry, and surface it as `ReactNode | undefined` on
@@ -542,41 +512,6 @@ 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,
@@ -587,22 +522,10 @@ type TokenRawValue<N extends TokenRawName> = N extends keyof TokenRawNameRegistr
  * (function-typed handlers, complex object pass-throughs) that the
  * marker system doesn't express yet.
  */
-/**
- * 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: {
+type ComponentRenderFn<TExtra = unknown, TConfigProps = unknown, TLayers = Record<string, unknown>> = (args: {
   props: LayerPropsBundle<TLayers>;
   children?: ReactNode;
-  tokenRaw: <N extends TokenRawName>(name: N) => TokenRawValue<N>;
-} & TConfigProps & TExtra & TRefArg) => ReactNode;
+} & TConfigProps & TExtra) => ReactNode;
 /**
  * Chain methods attached to every `defineComponent` result. The
  * builder type intersects with the underlying `ComponentDefinition`
@@ -637,7 +560,7 @@ interface ComponentBuilderMethods<T extends ComponentDefinition> {
     defaultProps: infer D;
   } ? keyof D : never> : unknown, T extends {
     layers: infer L;
-  } ? L : Record<string, unknown>, RefArgFor<T>>): BoundComponent<T, TExtra>;
+  } ? L : Record<string, unknown>>): BoundComponent<T, TExtra>;
   /**
    * Attach a declarative preview spec — stored under non-enumerable
    * `__preview` so the authored builder stays JSON-clean. Callback
@@ -684,15 +607,7 @@ interface ComponentBuilderMethods<T extends ComponentDefinition> {
  *     concession that keeps source files typechecking against this
  *     value as if it were the rewritten artifact.
  */
-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>>;
+type ComponentBuilder<T extends ComponentDefinition> = T & ComponentBuilderMethods<T> & FC<Props<T>>;
 /**
  * Bound component returned by `.render<TExtra>(fn)`. Mirrors main's
  * `BoundComponent`: an `FC` whose JSX props are
@@ -717,13 +632,6 @@ 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;
@@ -796,4 +704,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, RawToken, TokenGroupMetadata, TokenRawValue, TypedSlotRef, asChild, 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, TokenGroupMetadata, TypedSlotRef, boolean, defineComponent, defineComponentGroup, defineCompositeStyle, defineMode, defineModifier, defineMotion, defineStyleProp, defineTokenGroup, number, slot, string, variant };

package/dist/factories.js

@@ -192,24 +192,6 @@ 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
@@ -277,7 +259,6 @@ const configHelpers = {
 	slot,
 	variant,
 	boolean,
-	asChild,
 	string,
 	number,
 	layer,
@@ -367,11 +348,6 @@ 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;
@@ -416,4 +392,4 @@ defineComponentImpl.layers = function layersEntry(layers) {
 };
 const defineComponent = defineComponentImpl;
 //#endregion
-export { asChild, boolean, defineComponent, defineComponentGroup, defineCompositeStyle, defineMode, defineModifier, defineMotion, defineStyleProp, defineTokenGroup, number, slot, string, variant };
+export { 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, TokenRawNameRegistry, TokenRef, assetGroup, component, composite, isAssetGroupRef, isComponentRef, isCompositeRef, isModeRef, isStylePropRef, isTagRef, isTokenGroupRef, isTokenRef, mode, styleProp, tag, token, tokenGroup } from "./refs.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";
@@ -15,7 +15,7 @@ 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, RawToken, TokenGroupMetadata, TokenRawValue, TypedSlotRef, asChild, 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, 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";
@@ -30,4 +30,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 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, 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 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 };

package/dist/index.js

@@ -21,9 +21,9 @@ import { TokenGroup } from "./TokenGroup.js";
 import { Config, parseRegistryKey } from "./Config.js";
 import { findComponentReferrers } from "./component-referrers.js";
 import { defineProvider } from "./defineProvider.js";
-import { asChild, boolean, defineComponent, defineComponentGroup, defineCompositeStyle, defineMode, defineModifier, defineMotion, defineStyleProp, defineTokenGroup, number, slot, string, variant } from "./factories.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, asChild, 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, 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 };

package/dist/refs.d.ts

@@ -34,7 +34,6 @@ interface RegisteredStyleProps {}
 interface RegisteredComponents {}
 interface RegisteredMotionDefs {}
 interface RegisteredAssetGroups {}
-interface TokenRawNameRegistry {}
 /** `<groupName>/<tokenName>` for every registered token. */
 type TokenName = [keyof RegisteredTokenGroups] extends [never] ? string : { [G in keyof RegisteredTokenGroups & string]: `${G}/${keyof RegisteredTokenGroups[G] & string}` }[keyof RegisteredTokenGroups & string];
 /** Bare group names — `'color'`, `'spacing'`. */
@@ -156,4 +155,4 @@ declare function isTagRef(value: unknown): value is TagRef;
 declare function isComponentRef(value: unknown): value is ComponentRef;
 declare function isAssetGroupRef(value: unknown): value is AssetGroupRef;
 //#endregion
-export { 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, TokenRawNameRegistry, TokenRef, assetGroup, component, composite, isAssetGroupRef, isComponentRef, isCompositeRef, isModeRef, isStylePropRef, isTagRef, isTokenGroupRef, isTokenRef, mode, styleProp, tag, token, tokenGroup };
+export { 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 };

package/dist/spec/specToJsx.js

@@ -1,6 +1,6 @@
 import { isSlotRef } from "./slot-refs.js";
 import { assetJsxForm } from "./asset-jsx.js";
-import { collectUsedComponents, serializeProps } from "@json-render/codegen";
+import { serializeProps } from "@json-render/codegen";
 //#region src/spec/specToJsx.ts
 function statePathToExpression(path) {
 	return `state${path.split("/").filter(Boolean).map((s) => `.${s}`).join("")}`;
@@ -28,10 +28,35 @@ function renderActionBinding(binding) {
 function eventNameToJsx(name) {
 	return `on${name.charAt(0).toUpperCase()}${name.slice(1)}`;
 }
-function renderElement(key, spec, depth, assetComponents) {
+/**
+* Collect every element `type` reachable from `spec.root` via `children`.
+* A local, cycle-safe stand-in for `@json-render/codegen`'s
+* `collectUsedComponents` — that helper's `children` walk has no visited
+* guard and stack-overflows on a cyclic element graph, the same failure
+* mode `renderElement`'s `ancestors` guard protects against below (see
+* UDS-2351).
+*/
+function collectUsedComponentTypes(spec) {
+	const types = /* @__PURE__ */ new Set();
+	const visited = /* @__PURE__ */ new Set();
+	const stack = [spec.root];
+	while (stack.length > 0) {
+		const key = stack.pop();
+		if (key === void 0 || visited.has(key)) continue;
+		visited.add(key);
+		const element = spec.elements[key];
+		if (!element) continue;
+		types.add(element.type);
+		for (const childKey of element.children ?? []) stack.push(childKey);
+	}
+	return types;
+}
+function renderElement(key, spec, depth, assetComponents, ancestors) {
 	const element = spec.elements[key];
 	if (!element) return "";
 	const indent = "  ".repeat(depth);
+	if (ancestors.has(key)) return `${indent}{/* cyclic reference to "${key}" omitted */}`;
+	const withSelf = new Set(ancestors).add(key);
 	const { children: _children, ...restProps } = element.props ?? {};
 	const slotKeys = collectSlotKeys(restProps);
 	const slotAttrs = [];
@@ -39,10 +64,10 @@ function renderElement(key, spec, depth, assetComponents) {
 	for (const [propName, propValue] of Object.entries(restProps)) if (isSlotRef(propValue)) {
 		const refs = Array.isArray(propValue.$slot) ? propValue.$slot : [propValue.$slot];
 		if (refs.length === 1) {
-			const rendered = renderElement(refs[0], spec, 0, assetComponents).trim();
+			const rendered = renderElement(refs[0], spec, 0, assetComponents, withSelf).trim();
 			slotAttrs.push(`${propName}={${rendered}}`);
 		} else {
-			const rendered = refs.map((r) => renderElement(r, spec, 0, assetComponents).trim()).filter(Boolean);
+			const rendered = refs.map((r) => renderElement(r, spec, 0, assetComponents, withSelf).trim()).filter(Boolean);
 			slotAttrs.push(`${propName}={<>${rendered.join("")}</>}`);
 		}
 	} else propsWithoutSlots[propName] = propValue;
@@ -92,7 +117,7 @@ function renderElement(key, spec, depth, assetComponents) {
 		if (inlineContent !== null) childLines.push(`${"  ".repeat(depth + 1)}${inlineContent}`);
 		for (const childKey of childKeys) {
 			if (!spec.elements[childKey]) continue;
-			childLines.push(renderElement(childKey, spec, depth + 1, assetComponents));
+			childLines.push(renderElement(childKey, spec, depth + 1, assetComponents, withSelf));
 		}
 		jsxLine = `${indent}<${tag}${propsStr}>\n${childLines.join("\n")}\n${indent}</${tag}>`;
 	}
@@ -112,8 +137,8 @@ function specToJsx(spec, options) {
 		imports: []
 	};
 	const assetComponents = options?.assetComponents;
-	const sortedImports = [...new Set([...collectUsedComponents(spec)].map((type) => assetJsxForm(type, assetComponents)?.importName ?? type))].sort();
-	const jsxTree = renderElement(spec.root, spec, 0, assetComponents);
+	const sortedImports = [...new Set([...collectUsedComponentTypes(spec)].map((type) => assetJsxForm(type, assetComponents)?.importName ?? type))].sort();
+	const jsxTree = renderElement(spec.root, spec, 0, assetComponents, /* @__PURE__ */ new Set());
 	if (options?.omitImports) return {
 		jsx: jsxTree,
 		imports: sortedImports