@yahoo/uds-create-config 1.1.1

package/dist/refs.d.ts

@@ -0,0 +1,158 @@
+//#region src/refs.d.ts
+/**
+ * Cross-reference markers — the `{ __kind, ref }` shapes that appear in
+ * authored values and in the wire format. Each one represents "this
+ * position holds a pointer to another resource, not a literal."
+ *
+ * Naming:
+ *
+ *  - `<X>Name` — the string-side identifier (`'color/brand'`, `'Box'`).
+ *    Narrowed when the matching `Registered*` interface is augmented;
+ *    falls open to `string` otherwise.
+ *  - `<X>Ref` — the boxed marker shape `{ __kind, ref }` carrying an
+ *    `<X>Name`. Distinguishes a pointer from a literal at every position
+ *    that can hold either.
+ *  - `<x>()` — the helper that constructs an `<X>Ref` from an `<X>Name`.
+ *  - `is<X>Ref(value)` — type guard for use by the resolver and patch
+ *    system.
+ *
+ * # Augmented refs
+ *
+ * The `Registered*` interfaces below are augmentation seams that
+ * consumer codegen populates via `declare module '@yahoo/uds-create-config' {
+ * interface Registered* { ... } }`. When augmented, each ref's `ref`
+ * field narrows to only valid references — `token('color/brand')` is OK
+ * but `token('color/nope')` is a compile error. When un-augmented (this
+ * package's own tests, fresh consumers before first build), the ref
+ * accepts any string — codegen narrows it later.
+ */
+interface RegisteredTokenGroups {}
+interface RegisteredModifiers<T> {}
+interface RegisteredModes {}
+interface RegisteredCompositeStyles {}
+interface RegisteredStyleProps {}
+interface RegisteredComponents {}
+interface RegisteredMotionDefs {}
+interface RegisteredAssetGroups {}
+/** `<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'`. */
+type TokenGroupName = [keyof RegisteredTokenGroups] extends [never] ? string : keyof RegisteredTokenGroups & string;
+/**
+ * Bare composite name (`'elevation'`) or `<name>/<variant>`
+ * (`'elevation/1'`).
+ *
+ * Indexes straight into `['styles']` rather than routing each member
+ * through an `extends { styles: infer V } ? … : never` conditional, for
+ * the same reason as `ModeName` — same resulting union, but no per-member
+ * conditional check + `infer`, and one consistent shape across every
+ * `*Name` union.
+ */
+type CompositeName = [keyof RegisteredCompositeStyles] extends [never] ? `${string}/${string}` : (keyof RegisteredCompositeStyles & string) | { [C in keyof RegisteredCompositeStyles & string]: `${C}/${keyof RegisteredCompositeStyles[C]['styles'] & string}` }[keyof RegisteredCompositeStyles & string];
+/**
+ * `<modeName>/<optionName>` for every registered mode option.
+ *
+ * Indexes straight into `['options']` rather than routing each member
+ * through an `extends { options: infer O } ? … : never` conditional.
+ * Both yield the same union, but the indexed access skips a per-member
+ * conditional assignability check + `infer`, so it's cheaper for the
+ * checker and keeps every `*Name` union on the one shape `TokenName`
+ * uses.
+ */
+type ModeName = [keyof RegisteredModes] extends [never] ? `${string}/${string}` : { [M in keyof RegisteredModes & string]: `${M}/${keyof RegisteredModes[M]['options'] & string}` }[keyof RegisteredModes & string];
+/** Style-prop names — `'bg'`, `'padding'`. */
+type StylePropName = [keyof RegisteredStyleProps] extends [never] ? string : keyof RegisteredStyleProps & string;
+/** Registered component names — `'Box'`, `'Alert'`. */
+type ComponentName = [keyof RegisteredComponents] extends [never] ? string : keyof RegisteredComponents & string;
+/** Bare asset-group slugs — `'icons'`, `'fonts'`. */
+type AssetGroupName = [keyof RegisteredAssetGroups] extends [never] ? string : keyof RegisteredAssetGroups & string;
+/** HTML tag names — open string for now; could narrow against `keyof JSX.IntrinsicElements`. */
+type TagName = string;
+interface TokenRef<TName extends string = string> {
+  readonly __kind: 'token';
+  readonly ref: TName;
+}
+interface TokenGroupRef<TName extends string = string> {
+  readonly __kind: 'tokenGroup';
+  readonly ref: TName;
+}
+interface CompositeRef<TName extends string = string, TLayer extends string | undefined = string | undefined> {
+  readonly __kind: 'composite';
+  readonly ref: TName;
+  /**
+   * Layer the marker should land on when used as a `.config()` prop
+   * binding (set by `composite(ref).on(layer)`). Absent when the ref
+   * is used as a token value, modifier selector, or as a bare prop
+   * binding that defaults to the `'root'` layer downstream.
+   */
+  readonly layer?: TLayer;
+}
+interface ModeRef<TName extends string = string> {
+  readonly __kind: 'mode';
+  readonly ref: TName;
+}
+interface StylePropRef<TName extends string = string> {
+  readonly __kind: 'styleProp';
+  readonly ref: TName;
+  readonly layer?: string;
+  /**
+   * Bind the style-prop to a specific layer — `styleProp('bg').on('root')`
+   * routes the JSX prop into the named layer instead of the component's
+   * own layer. Codegen reads the `layer` field and emits a class on
+   * that layer. Mirrors the old `@yahoo/uds-create-config` `styleProp().on()` chain.
+   */
+  on(layer: string): StylePropRef<TName>;
+}
+interface TagRef<TName extends string = string> {
+  readonly __kind: 'tag';
+  readonly ref: TName;
+}
+interface ComponentRef<TName extends string = string> {
+  readonly __kind: 'component';
+  readonly ref: TName;
+}
+/**
+ * Asset-group pointer. The same `{ __kind, ref }` tag is *embedded* on
+ * the full group definition `defineAssetGroup(...)` returns (the
+ * definition object doubles as its own ref), so `isAssetGroupRef()` accepts
+ * both the bare marker and the live group object. The definition's
+ * `ref` is late-bound at `registerAssetGroups` and throws when read
+ * before registration; the guard only inspects `__kind`, so it is safe
+ * on unregistered groups.
+ */
+interface AssetGroupRef<TName extends string = string> {
+  readonly __kind: 'assetGroup';
+  readonly ref: TName;
+}
+type AnyRef = TokenRef | TokenGroupRef | CompositeRef | ModeRef | StylePropRef | TagRef | ComponentRef | AssetGroupRef;
+/** Doc-alignment alias kept for ergonomic import. */
+type TokenQualifiedName = TokenName;
+declare function token<TName extends TokenName>(ref: TName): TokenRef<TName>;
+declare function tokenGroup<TName extends TokenGroupName>(ref: TName): TokenGroupRef<TName>;
+/**
+ * `composite(ref)` returns a bare `CompositeRef` plus an `.on(layer)`
+ * method that produces the same shape with `layer` filled in — both
+ * forms are `CompositeRef`. Codegen's marker probe in
+ * `transformAuthoringSource.ts` reads `{ __kind, ref, layer? }`
+ * uniformly, so the on-layer marker is just a `CompositeRef` with a
+ * concrete `layer` field.
+ */
+interface CompositeRefBuilder<TName extends string> extends CompositeRef<TName, undefined> {
+  on<TLayer extends string>(layer: TLayer): CompositeRef<TName, TLayer>;
+}
+declare function composite<TName extends CompositeName>(ref: TName): CompositeRefBuilder<TName>;
+declare function mode<TName extends ModeName>(ref: TName): ModeRef<TName>;
+declare function styleProp<TName extends StylePropName>(ref: TName): StylePropRef<TName>;
+declare function tag<TName extends TagName>(ref: TName): TagRef<TName>;
+declare function component<TName extends ComponentName>(ref: TName): ComponentRef<TName>;
+declare function assetGroup<TName extends AssetGroupName>(ref: TName): AssetGroupRef<TName>;
+declare function isTokenRef(value: unknown): value is TokenRef;
+declare function isTokenGroupRef(value: unknown): value is TokenGroupRef;
+declare function isCompositeRef(value: unknown): value is CompositeRef;
+declare function isModeRef(value: unknown): value is ModeRef;
+declare function isStylePropRef(value: unknown): value is StylePropRef;
+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, TokenRef, assetGroup, component, composite, isAssetGroupRef, isComponentRef, isCompositeRef, isModeRef, isStylePropRef, isTagRef, isTokenGroupRef, isTokenRef, mode, styleProp, tag, token, tokenGroup };

package/dist/refs.js

@@ -0,0 +1,104 @@
+//#region src/refs.ts
+function token(ref) {
+	return {
+		__kind: "token",
+		ref
+	};
+}
+function tokenGroup(ref) {
+	return {
+		__kind: "tokenGroup",
+		ref
+	};
+}
+function composite(ref) {
+	return Object.assign({
+		__kind: "composite",
+		ref
+	}, { on(layer) {
+		return {
+			__kind: "composite",
+			ref,
+			layer
+		};
+	} });
+}
+function mode(ref) {
+	return {
+		__kind: "mode",
+		ref
+	};
+}
+function styleProp(ref) {
+	const marker = {
+		__kind: "styleProp",
+		ref
+	};
+	Object.defineProperty(marker, "on", {
+		enumerable: false,
+		configurable: true,
+		writable: true,
+		value(layer) {
+			const next = {
+				__kind: "styleProp",
+				ref,
+				layer
+			};
+			Object.defineProperty(next, "on", {
+				enumerable: false,
+				configurable: true,
+				writable: true,
+				value: marker.on
+			});
+			return next;
+		}
+	});
+	return marker;
+}
+function tag(ref) {
+	return {
+		__kind: "tag",
+		ref
+	};
+}
+function component(ref) {
+	return {
+		__kind: "component",
+		ref
+	};
+}
+function assetGroup(ref) {
+	return {
+		__kind: "assetGroup",
+		ref
+	};
+}
+function isRefOf(value, kind) {
+	return typeof value === "object" && value !== null && value.__kind === kind;
+}
+function isTokenRef(value) {
+	return isRefOf(value, "token");
+}
+function isTokenGroupRef(value) {
+	return isRefOf(value, "tokenGroup");
+}
+function isCompositeRef(value) {
+	return isRefOf(value, "composite");
+}
+function isModeRef(value) {
+	return isRefOf(value, "mode");
+}
+function isStylePropRef(value) {
+	return isRefOf(value, "styleProp");
+}
+function isTagRef(value) {
+	return isRefOf(value, "tag");
+}
+function isComponentRef(value) {
+	return isRefOf(value, "component");
+}
+function isAssetGroupRef(value) {
+	return isRefOf(value, "assetGroup");
+}
+//#endregion
+export { assetGroup, component, composite, isAssetGroupRef, isComponentRef, isCompositeRef, isModeRef, isStylePropRef, isTagRef, isTokenGroupRef, isTokenRef, mode, styleProp, tag, token, tokenGroup };

package/dist/renderer/RendererErrorBoundary.d.ts

@@ -0,0 +1,26 @@
+import React from "react";
+
+//#region src/renderer/RendererErrorBoundary.d.ts
+/**
+ * Error boundary wrapped around each component's render entry. One
+ * broken component renders an inline error tile but doesn't take down
+ * the rest of the Spec.
+ */
+declare class RendererErrorBoundary extends React.Component<{
+  name: string;
+  children: React.ReactNode;
+}, {
+  error: string | null;
+}> {
+  constructor(props: {
+    name: string;
+    children: React.ReactNode;
+  });
+  static getDerivedStateFromError(err: unknown): {
+    error: string;
+  };
+  componentDidCatch(err: unknown): void;
+  render(): React.ReactNode;
+}
+//#endregion
+export { RendererErrorBoundary };

package/dist/renderer/RendererErrorBoundary.js

@@ -0,0 +1,30 @@
+import React from "react";
+//#region src/renderer/RendererErrorBoundary.tsx
+/**
+* Error boundary wrapped around each component's render entry. One
+* broken component renders an inline error tile but doesn't take down
+* the rest of the Spec.
+*/
+var RendererErrorBoundary = class extends React.Component {
+	constructor(props) {
+		super(props);
+		this.state = { error: null };
+	}
+	static getDerivedStateFromError(err) {
+		return { error: err instanceof Error ? err.message : String(err) };
+	}
+	componentDidCatch(err) {
+		console.error(`[json-render] Rendering error in <${this.props.name}>:`, err);
+	}
+	render() {
+		if (this.state.error) return React.createElement("div", { style: {
+			padding: 8,
+			fontSize: 11,
+			color: "#ef4444",
+			fontFamily: "monospace"
+		} }, `<${this.props.name}> render error`);
+		return this.props.children;
+	}
+};
+//#endregion
+export { RendererErrorBoundary };

package/dist/renderer/UdsRenderer.d.ts

@@ -0,0 +1,80 @@
+import { RegistryDescriptor } from "./wrapRegistry.js";
+import { ReactNode } from "react";
+import { ComponentRegistry, JSONUIProviderProps } from "@json-render/react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { Spec } from "@json-render/core";
+
+//#region src/renderer/UdsRenderer.d.ts
+interface UdsRendererProps {
+  spec: Spec | null;
+  loading?: boolean;
+  /**
+   * Component registry to render with. Typically the codegen-emitted
+   * `bundleRegistry` (already composed through `makeRegistry`) —
+   * passed in by the project's `.uds/react-renderer.tsx` shell. Hosts
+   * can supply their own to override or extend it; we re-run the
+   * wrapper stack so built-in primitives + slot/event/style
+   * normalisation still apply.
+   */
+  registry: ComponentRegistry;
+  /** Action handlers (`emit`-target name → async function). */
+  handlers?: Record<string, (params: Record<string, unknown>) => Promise<unknown> | unknown>;
+  /** Seed state for the internal `StateProvider`. */
+  initialState?: Record<string, unknown>;
+  onStateChange?: (changes: {
+    path: string;
+    value: unknown;
+  }[]) => void;
+  /**
+   * External `StateStore` (controlled mode). When provided, the store is the
+   * single source of truth and `initialState`/`onStateChange` are ignored.
+   */
+  store?: JSONUIProviderProps['store'];
+  /** Navigation handler for `navigate` actions (`(path) => void`). */
+  navigate?: JSONUIProviderProps['navigate'];
+  /** Custom validators for `checks` whose `type` isn't a built-in validator. */
+  validationFunctions?: JSONUIProviderProps['validationFunctions'];
+  /** Named functions backing `$computed` prop expressions. */
+  functions?: JSONUIProviderProps['functions'];
+  /** Custom directives for user-defined `$`-prefixed dynamic values. */
+  directives?: JSONUIProviderProps['directives'];
+  /** Fallback renderer when the spec references an unknown type. */
+  fallback?: ComponentRegistry[string];
+  /**
+   * Config-derived facts for the wrapper stack (void components, CSS→style-prop
+   * map, layout/text sets). The codegen-emitted bundle registry was already
+   * wrapped with this; only needed here when a host supplies its own `registry`
+   * that should get the same config-aware normalisation.
+   */
+  registryDescriptor?: RegistryDescriptor;
+  /**
+   * Rendered inside the `JSONUIProvider` (alongside the `Renderer`) so it
+   * shares the same actions/state context. The codegen shell passes
+   * `<UdsActionBridge/>` here — it calls `useActions()` to register handlers
+   * and must sit within the provider, not as an outer sibling.
+   */
+  children?: ReactNode;
+}
+/**
+ * Top-level UDS renderer. Wraps `@json-render/react`'s `Renderer` with
+ * a `JSONUIProvider` + the standard wrapper stack on top of the
+ * supplied registry.
+ */
+declare function UdsRenderer({
+  spec,
+  loading,
+  registry,
+  handlers,
+  initialState,
+  onStateChange,
+  store,
+  navigate,
+  validationFunctions,
+  functions,
+  directives,
+  fallback,
+  registryDescriptor,
+  children
+}: UdsRendererProps): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { UdsRenderer, UdsRendererProps };

package/dist/renderer/UdsRenderer.js

@@ -0,0 +1,33 @@
+"use client";
+import { wrapRegistry } from "./wrapRegistry.js";
+import { useMemo } from "react";
+import { JSONUIProvider, Renderer } from "@json-render/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/renderer/UdsRenderer.tsx
+/**
+* Top-level UDS renderer. Wraps `@json-render/react`'s `Renderer` with
+* a `JSONUIProvider` + the standard wrapper stack on top of the
+* supplied registry.
+*/
+function UdsRenderer({ spec, loading, registry, handlers, initialState, onStateChange, store, navigate, validationFunctions, functions, directives, fallback, registryDescriptor, children }) {
+	const wrapped = useMemo(() => wrapRegistry(registry, registryDescriptor), [registry, registryDescriptor]);
+	return /* @__PURE__ */ jsxs(JSONUIProvider, {
+		registry: wrapped,
+		handlers,
+		initialState,
+		onStateChange,
+		store,
+		navigate,
+		validationFunctions,
+		functions,
+		directives,
+		children: [children, /* @__PURE__ */ jsx(Renderer, {
+			spec,
+			registry: wrapped,
+			loading,
+			fallback
+		})]
+	});
+}
+//#endregion
+export { UdsRenderer };

package/dist/renderer/assetRenderable.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+
+//#region src/renderer/assetRenderable.d.ts
+/** Props callers pass when rendering an asset member directly (icon picker
+ *  grid, drag ghost). The member — or the system component it renders through —
+ *  maps these to a glyph; the registry-derived `name` always wins, and any
+ *  extra props are ignored by static glyphs. */
+type AssetRenderProps = {
+  variant?: string;
+  size?: string | number;
+};
+//#endregion
+export { AssetRenderProps };

package/dist/renderer/assetRenderable.js

@@ -0,0 +1,13 @@
+import { jsx } from "react/jsx-runtime";
+//#region src/renderer/assetRenderable.tsx
+function makeAssetRenderable(SystemComponent, member, name) {
+	if (SystemComponent === void 0) return member;
+	return function AssetRenderable(props) {
+		return /* @__PURE__ */ jsx(SystemComponent, {
+			...props,
+			name
+		});
+	};
+}
+//#endregion
+export { makeAssetRenderable };

package/dist/renderer/index.d.ts

@@ -0,0 +1,14 @@
+import { RegistryDescriptor, wrapRegistry } from "./wrapRegistry.js";
+import { AssetMembers, MakeRegistryResult, makeRegistry } from "./makeRegistry.js";
+import { makeUdsRenderer } from "./makeUdsRenderer.js";
+import { FragmentRenderer } from "./primitives/FragmentRenderer.js";
+import { SlotRenderer } from "./primitives/SlotRenderer.js";
+import { RendererErrorBoundary } from "./RendererErrorBoundary.js";
+import { UdsRenderer, UdsRendererProps } from "./UdsRenderer.js";
+import { wrapEventBridge } from "./wrappers/event-bridge.js";
+import { wrapNormalizeHex } from "./wrappers/hex-normalize.js";
+import { aliasHtmlTypes } from "./wrappers/html-aliases.js";
+import { wrapInlineStyleProps } from "./wrappers/inline-styles.js";
+import { wrapSlotResolution } from "./wrappers/slot-resolution.js";
+import { wrapVoidElements } from "./wrappers/void-elements.js";
+export { type AssetMembers, FragmentRenderer, type MakeRegistryResult, type RegistryDescriptor, RendererErrorBoundary, SlotRenderer, UdsRenderer, type UdsRendererProps, aliasHtmlTypes, makeRegistry, makeUdsRenderer, wrapEventBridge, wrapInlineStyleProps, wrapNormalizeHex, wrapRegistry, wrapSlotResolution, wrapVoidElements };

package/dist/renderer/index.js

@@ -0,0 +1,14 @@
+import { RendererErrorBoundary } from "./RendererErrorBoundary.js";
+import { makeUdsRenderer } from "./makeUdsRenderer.js";
+import { FragmentRenderer } from "./primitives/FragmentRenderer.js";
+import { SlotRenderer } from "./primitives/SlotRenderer.js";
+import { wrapEventBridge } from "./wrappers/event-bridge.js";
+import { wrapNormalizeHex } from "./wrappers/hex-normalize.js";
+import { aliasHtmlTypes } from "./wrappers/html-aliases.js";
+import { wrapInlineStyleProps } from "./wrappers/inline-styles.js";
+import { wrapSlotResolution } from "./wrappers/slot-resolution.js";
+import { wrapVoidElements } from "./wrappers/void-elements.js";
+import { wrapRegistry } from "./wrapRegistry.js";
+import { makeRegistry } from "./makeRegistry.js";
+import { UdsRenderer } from "./UdsRenderer.js";
+export { FragmentRenderer, RendererErrorBoundary, SlotRenderer, UdsRenderer, aliasHtmlTypes, makeRegistry, makeUdsRenderer, wrapEventBridge, wrapInlineStyleProps, wrapNormalizeHex, wrapRegistry, wrapSlotResolution, wrapVoidElements };

package/dist/renderer/makeRegistry.d.ts

@@ -0,0 +1,34 @@
+import { AssetGroup } from "../AssetGroup.js";
+import { AssetRenderProps } from "./assetRenderable.js";
+import { RegistryDescriptor } from "./wrapRegistry.js";
+import React from "react";
+import { ComponentRegistry } from "@json-render/react";
+
+//#region src/renderer/makeRegistry.d.ts
+/** Plain, provider-free asset renderables indexed `slug → name → component`.
+ *  Each is `makeAssetRenderable(SystemComponent, member, name)` — the SAME
+ *  component identity the registry keys under the namespaced asset type, but
+ *  surfaced directly so callers (e.g. the icon picker) can render a single
+ *  glyph without standing up a json-render engine per cell. */
+type AssetMembers = ReadonlyMap<string, ReadonlyMap<string, React.ComponentType<AssetRenderProps>>>;
+interface MakeRegistryResult {
+  registry: ComponentRegistry;
+  /** @see AssetMembers — empty when the config registers no placeable assets. */
+  assetMembers: AssetMembers;
+}
+/**
+ * Compose a complete json-render `ComponentRegistry` from a project's
+ * UDS components. Wraps each component with a uniform prop-forwarding
+ * + error-boundary `ComponentFn` (`makeUdsRenderer`), routes through
+ * `defineRegistry` to adapt to the `ComponentRenderer` shape, then
+ * applies the standard wrapper stack (`wrapRegistry`) so consumers
+ * can render any Spec from any source (author-emitted, AI-emitted,
+ * Figma import) without per-call normalisation.
+ *
+ * Replaces the per-project codegen that used to emit ~50 lines of
+ * `${name}Renderer` function definitions plus a flat registry literal.
+ * Codegen now emits a single `makeRegistry({...components})` call.
+ */
+declare function makeRegistry(components: Record<string, React.ComponentType<any>>, foreignComponents?: readonly React.ComponentType<any>[], descriptor?: RegistryDescriptor, assetGroups?: Iterable<AssetGroup>): MakeRegistryResult;
+//#endregion
+export { AssetMembers, MakeRegistryResult, makeRegistry };

package/dist/renderer/makeRegistry.js

@@ -0,0 +1,52 @@
+import { isPlaceable } from "../asset-kind.js";
+import { foreignRegistryKey } from "../foreign-component-name.js";
+import { makeAssetRenderable } from "./assetRenderable.js";
+import { makeUdsRenderer } from "./makeUdsRenderer.js";
+import { wrapRegistry } from "./wrapRegistry.js";
+import { defineRegistry } from "@json-render/react";
+//#region src/renderer/makeRegistry.ts
+/**
+* Compose a complete json-render `ComponentRegistry` from a project's
+* UDS components. Wraps each component with a uniform prop-forwarding
+* + error-boundary `ComponentFn` (`makeUdsRenderer`), routes through
+* `defineRegistry` to adapt to the `ComponentRenderer` shape, then
+* applies the standard wrapper stack (`wrapRegistry`) so consumers
+* can render any Spec from any source (author-emitted, AI-emitted,
+* Figma import) without per-call normalisation.
+*
+* Replaces the per-project codegen that used to emit ~50 lines of
+* `${name}Renderer` function definitions plus a flat registry literal.
+* Codegen now emits a single `makeRegistry({...components})` call.
+*/
+function makeRegistry(components, foreignComponents = [], descriptor, assetGroups = []) {
+	const componentFns = {};
+	for (const [name, Comp] of Object.entries(components)) componentFns[name] = makeUdsRenderer(Comp, name);
+	for (const Comp of foreignComponents) {
+		const key = foreignRegistryKey(Comp);
+		if (key !== null) componentFns[key] = makeUdsRenderer(Comp, key);
+	}
+	const assetMembersBySlug = /* @__PURE__ */ new Map();
+	for (const group of assetGroups) {
+		if (!isPlaceable(group)) continue;
+		const members = group.members;
+		if (!members) continue;
+		const SystemComponent = group.component !== void 0 ? components[group.component] : void 0;
+		const bySlug = /* @__PURE__ */ new Map();
+		for (const name of group.assetNames) {
+			const member = members[name];
+			if (member === void 0) continue;
+			const key = group.assetType(name);
+			const Renderable = makeAssetRenderable(SystemComponent, member, name);
+			componentFns[key] = makeUdsRenderer(Renderable, key);
+			bySlug.set(name, Renderable);
+		}
+		assetMembersBySlug.set(group.name, bySlug);
+	}
+	const { registry } = defineRegistry(null, { components: componentFns });
+	return {
+		registry: wrapRegistry(registry, descriptor, assetMembersBySlug),
+		assetMembers: assetMembersBySlug
+	};
+}
+//#endregion
+export { makeRegistry };

package/dist/renderer/makeUdsRenderer.d.ts

@@ -0,0 +1,29 @@
+import React from "react";
+import { BaseComponentProps } from "@json-render/react";
+
+//#region src/renderer/makeUdsRenderer.d.ts
+/**
+ * Component-fn signature used in `defineRegistry`'s `components` map.
+ * Matches `@json-render/react`'s `BaseComponentProps` so the registry
+ * lookup hands us `{ props, children, emit, bindings, ... }` directly.
+ */
+type UdsComponentFn = (ctx: BaseComponentProps<Record<string, unknown>>) => React.ReactElement;
+/**
+ * Minimal pass-through `ComponentFn` for any UDS component. The
+ * component's own `bindRender` (codegen-emitted FC) owns variant /
+ * style-prop / modifier resolution at runtime — this wrapper just
+ * forwards `props` + `children` inside an error boundary.
+ *
+ * Replaces the per-component wrapper functions codegen used to emit
+ * as a dedent string (one `${name}Renderer` function per registered
+ * component, all structurally identical). The new factory composes
+ * once at runtime; codegen just calls `makeRegistry({ ...components })`.
+ *
+ * Returns a `ComponentFn` (hoisted-props shape) so it can flow through
+ * `defineRegistry` the same way the original codegen-emitted wrappers
+ * did — `defineRegistry` adapts it to a `ComponentRenderer` (element-
+ * shape) before `wrapRegistry` runs.
+ */
+declare function makeUdsRenderer(Comp: React.ComponentType<any>, name: string): UdsComponentFn;
+//#endregion
+export { makeUdsRenderer };

package/dist/renderer/makeUdsRenderer.js

@@ -0,0 +1,35 @@
+import { RendererErrorBoundary } from "./RendererErrorBoundary.js";
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/renderer/makeUdsRenderer.tsx
+/**
+* Minimal pass-through `ComponentFn` for any UDS component. The
+* component's own `bindRender` (codegen-emitted FC) owns variant /
+* style-prop / modifier resolution at runtime — this wrapper just
+* forwards `props` + `children` inside an error boundary.
+*
+* Replaces the per-component wrapper functions codegen used to emit
+* as a dedent string (one `${name}Renderer` function per registered
+* component, all structurally identical). The new factory composes
+* once at runtime; codegen just calls `makeRegistry({ ...components })`.
+*
+* Returns a `ComponentFn` (hoisted-props shape) so it can flow through
+* `defineRegistry` the same way the original codegen-emitted wrappers
+* did — `defineRegistry` adapts it to a `ComponentRenderer` (element-
+* shape) before `wrapRegistry` runs.
+*/
+function makeUdsRenderer(Comp, name) {
+	return function UdsComponentRenderer({ props, children }) {
+		const { children: propChildren, ...rest } = props;
+		const finalChildren = React.Children.count(children) > 0 ? children : propChildren;
+		return /* @__PURE__ */ jsx(RendererErrorBoundary, {
+			name,
+			children: finalChildren !== void 0 && finalChildren !== null ? /* @__PURE__ */ jsx(Comp, {
+				...rest,
+				children: finalChildren
+			}) : /* @__PURE__ */ jsx(Comp, { ...rest })
+		});
+	};
+}
+//#endregion
+export { makeUdsRenderer };

package/dist/renderer/primitives/FragmentRenderer.d.ts

@@ -0,0 +1,12 @@
+import { ComponentRenderer } from "@json-render/react";
+
+//#region src/renderer/primitives/FragmentRenderer.d.ts
+/**
+ * Renders `Fragment`-typed Spec elements transparently — children
+ * pass through untouched. The runtime emits `type: 'Fragment'` for
+ * both the JSX `<>...</>` shorthand and the explicit `<Fragment>`
+ * sentinel; this renderer handles both cases.
+ */
+declare const FragmentRenderer: ComponentRenderer;
+//#endregion
+export { FragmentRenderer };