@yahoo/uds-create-config 1.1.1

package/dist/renderer/primitives/FragmentRenderer.js

@@ -0,0 +1,11 @@
+import { Fragment, jsx } from "react/jsx-runtime";
+//#region src/renderer/primitives/FragmentRenderer.tsx
+/**
+* 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.
+*/
+const FragmentRenderer = ({ children }) => /* @__PURE__ */ jsx(Fragment, { children });
+//#endregion
+export { FragmentRenderer };

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

@@ -0,0 +1,21 @@
+import { ComponentRenderer } from "@json-render/react";
+
+//#region src/renderer/primitives/SlotRenderer.d.ts
+/**
+ * Renders `Slot`-typed Spec elements as a passthrough for the
+ * parent-provided children. The spec extractor emits `Slot`
+ * placeholders inside captured `render` Specs to mark where the
+ * production render fn passes its `children` argument through. At
+ * actual render time, the canvas renderer hands parent-supplied
+ * children straight through — same semantics as `FragmentRenderer`,
+ * just under a distinct type name so consumers can recognise and
+ * highlight the slot boundary in anatomy views.
+ *
+ * Plain `Slot` (not `$Slot`) matches json-render's convention:
+ * `$prefix` names are reserved for prop-value expressions
+ * (`$state`, `$bindState`, `$slot`, `$template`, etc.). Element
+ * types are plain names, like `Fragment`.
+ */
+declare const SlotRenderer: ComponentRenderer;
+//#endregion
+export { SlotRenderer };

package/dist/renderer/primitives/SlotRenderer.js

@@ -0,0 +1,20 @@
+import { Fragment, jsx } from "react/jsx-runtime";
+//#region src/renderer/primitives/SlotRenderer.tsx
+/**
+* Renders `Slot`-typed Spec elements as a passthrough for the
+* parent-provided children. The spec extractor emits `Slot`
+* placeholders inside captured `render` Specs to mark where the
+* production render fn passes its `children` argument through. At
+* actual render time, the canvas renderer hands parent-supplied
+* children straight through — same semantics as `FragmentRenderer`,
+* just under a distinct type name so consumers can recognise and
+* highlight the slot boundary in anatomy views.
+*
+* Plain `Slot` (not `$Slot`) matches json-render's convention:
+* `$prefix` names are reserved for prop-value expressions
+* (`$state`, `$bindState`, `$slot`, `$template`, etc.). Element
+* types are plain names, like `Fragment`.
+*/
+const SlotRenderer = ({ children }) => /* @__PURE__ */ jsx(Fragment, { children });
+//#endregion
+export { SlotRenderer };

package/dist/renderer/wrapRegistry.d.ts

@@ -0,0 +1,64 @@
+import React from "react";
+import { ComponentRegistry } from "@json-render/react";
+
+//#region src/renderer/wrapRegistry.d.ts
+/**
+ * Config-derived facts the wrapper stack needs but can't read from a bare
+ * `ComponentRegistry` (which carries only render fns). Codegen derives this
+ * from the `Config` and emits it alongside the registry, so the shared
+ * wrappers stay config-agnostic — no hardcoded `'Box'`/`'Image'`/`'bg'`
+ * component or style-prop names. Every field is optional; an omitted/empty
+ * descriptor makes the dependent wrapper a no-op (e.g. a host registry that
+ * supplies its own components without a descriptor).
+ */
+interface RegistryDescriptor {
+  /**
+   * Component names whose root renders a void HTML element (`img`, `input`,
+   * …). `wrapVoidElements` strips `children` from these — React throws if a
+   * void element gets children. Bare names; namespace prefixes are stripped
+   * at match time.
+   */
+  voidComponents?: readonly string[];
+  /**
+   * camelCase CSS property → style-prop name, inverted from each
+   * `StyleProp.cssProperty`. Lets `wrapInlineStyleProps` hoist a raw
+   * `style: {...}` (Figma / AI import) onto typed style props.
+   */
+  cssPropertyToStyleProp?: Readonly<Record<string, string>>;
+  /**
+   * Container primitives (root renders `div`): a fixed `height` from an
+   * imported `style` becomes `minHeight` so content can still grow.
+   */
+  layoutComponents?: readonly string[];
+  /**
+   * Text primitives (root renders a text tag): a fixed `width`/`height` from
+   * an imported `style` is dropped — text shouldn't carry a bounding box.
+   */
+  textComponents?: readonly string[];
+  /**
+   * Component-typed slots (the aliased `Icon` pattern): componentName →
+   * propName → accepted asset-group slug. A `slot({ type: 'component' })
+   * .accepts(<icon group>)` saves the picked asset as an inline name string
+   * and its render fn expects the icon component itself, so
+   * `wrapComponentTypedSlots` resolves the name to the member component (paired
+   * with the runtime `assetMembersBySlug` lookup). Absent for components
+   * without such slots.
+   */
+  componentSlots?: Readonly<Record<string, Readonly<Record<string, string>>>>;
+}
+/**
+ * Apply the standard wrapper stack + built-in spec primitives to an
+ * existing `ComponentRegistry`. Used by `makeRegistry` after it's
+ * built per-component renderers from the project's components, AND
+ * by `UdsRenderer` when a host provides a custom registry that needs
+ * the same wrappers applied on top.
+ *
+ * `descriptor` carries the config-derived facts the config-dependent
+ * wrappers (`void-elements`, `inline-styles`) need; omit it and those
+ * wrappers pass through. Composition order mirrors the legacy inline
+ * `wrapRegistry` — each wrapper assumes its outer wrappers haven't yet
+ * seen the element.
+ */
+declare function wrapRegistry(reg: ComponentRegistry, descriptor?: RegistryDescriptor, assetMembersBySlug?: ReadonlyMap<string, ReadonlyMap<string, React.ComponentType>>): ComponentRegistry;
+//#endregion
+export { RegistryDescriptor, wrapRegistry };

package/dist/renderer/wrapRegistry.js

@@ -0,0 +1,39 @@
+import { FragmentRenderer } from "./primitives/FragmentRenderer.js";
+import { SlotRenderer } from "./primitives/SlotRenderer.js";
+import { wrapComponentTypedSlots } from "./wrappers/component-slots.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";
+//#region src/renderer/wrapRegistry.ts
+/**
+* Apply the standard wrapper stack + built-in spec primitives to an
+* existing `ComponentRegistry`. Used by `makeRegistry` after it's
+* built per-component renderers from the project's components, AND
+* by `UdsRenderer` when a host provides a custom registry that needs
+* the same wrappers applied on top.
+*
+* `descriptor` carries the config-derived facts the config-dependent
+* wrappers (`void-elements`, `inline-styles`) need; omit it and those
+* wrappers pass through. Composition order mirrors the legacy inline
+* `wrapRegistry` — each wrapper assumes its outer wrappers haven't yet
+* seen the element.
+*/
+function wrapRegistry(reg, descriptor, assetMembersBySlug) {
+	return aliasHtmlTypes(wrapInlineStyleProps(wrapNormalizeHex(wrapEventBridge(wrapVoidElements(wrapComponentTypedSlots(wrapSlotResolution({
+		...reg,
+		Fragment: reg.Fragment ?? FragmentRenderer,
+		Slot: reg.Slot ?? SlotRenderer
+	}), {
+		componentSlots: descriptor?.componentSlots,
+		assetMembersBySlug
+	}), { voidComponents: descriptor?.voidComponents }))), {
+		cssPropertyToStyleProp: descriptor?.cssPropertyToStyleProp,
+		layoutComponents: descriptor?.layoutComponents,
+		textComponents: descriptor?.textComponents
+	}));
+}
+//#endregion
+export { wrapRegistry };

package/dist/renderer/wrappers/component-slots.d.ts

@@ -0,0 +1,41 @@
+import type { ComponentRegistry } from '@json-render/react';
+import type React from 'react';
+/**
+ * Config-derived facts for the aliased `Icon` pattern. A component-typed slot
+ * (`slot({ type: 'component' }).accepts(<icon group>)`) saves the picked asset
+ * as an inline name string (`"Trophy"`) — not a `$slot` ref — and its render fn
+ * expects the icon *component* itself (`({ name: SvgIcon }) => <SvgIcon … />`).
+ *
+ *  - `componentSlots`: componentName → propName → accepted asset-group slug,
+ *    emitted by codegen's `deriveRegistryDescriptor` from each slot's
+ *    `authoredType: 'component'` + `acceptsAssetGroup`.
+ *  - `assetMembersBySlug`: slug → assetName → member component, built at runtime
+ *    by `makeRegistry` from the same live asset groups it keys under their
+ *    namespaced asset type. The stored component is the renderable form
+ *    (the member rendered through the group's declared system component, e.g.
+ *    `<Icon name=… />`, or the bare member when none is declared), so the
+ *    author's `<SvgIcon variant size />` draws.
+ */
+export interface ComponentTypedSlotsConfig {
+    componentSlots?: Readonly<Record<string, Readonly<Record<string, string>>>>;
+    assetMembersBySlug?: ReadonlyMap<string, ReadonlyMap<string, React.ComponentType>>;
+}
+/**
+ * Resolve component-typed slot props from their saved inline asset name to the
+ * member component, so the consuming component's render fn receives a callable
+ * component (not a rendered `$slot` child routed through `ElementRenderer`).
+ *
+ * A component-typed prop's only valid value is the inline asset-name string, so
+ * this wrapper guarantees the render fn receives a member component or
+ * `undefined` — never a rendered element:
+ *  - a string resolves to its member component (an unresolvable name — not in
+ *    the group — is left as the string so the render fn can guard);
+ *  - any non-string, non-undefined value (e.g. a leftover `{ $slot }` ref from a
+ *    spec authored before component-typed slots were distinguished) is stripped
+ *    to `undefined`, so it can't reach `wrapSlotResolution` and render as an
+ *    `ElementRenderer` child the render fn would choke on.
+ *
+ * It runs OUTSIDE `wrapSlotResolution`, so it sees the raw prop value before any
+ * `$slot` resolution. Both lookups absent ⇒ no-op.
+ */
+export declare function wrapComponentTypedSlots(reg: ComponentRegistry, { componentSlots, assetMembersBySlug }?: ComponentTypedSlotsConfig): ComponentRegistry;

package/dist/renderer/wrappers/component-slots.js

@@ -0,0 +1,66 @@
+import { jsx } from "react/jsx-runtime";
+//#region src/renderer/wrappers/component-slots.tsx
+/** Local component name of a registry key: `yahoo-os:IconSlotFixture` →
+*  `IconSlotFixture`. Registry keys are `<namespace>:<Name>`; component names
+*  never contain `:`, so split on the first one. Mirrors `wrapVoidElements`. */
+function localName(key) {
+	const colon = key.indexOf(":");
+	return colon === -1 ? key : key.slice(colon + 1);
+}
+/**
+* Resolve component-typed slot props from their saved inline asset name to the
+* member component, so the consuming component's render fn receives a callable
+* component (not a rendered `$slot` child routed through `ElementRenderer`).
+*
+* A component-typed prop's only valid value is the inline asset-name string, so
+* this wrapper guarantees the render fn receives a member component or
+* `undefined` — never a rendered element:
+*  - a string resolves to its member component (an unresolvable name — not in
+*    the group — is left as the string so the render fn can guard);
+*  - any non-string, non-undefined value (e.g. a leftover `{ $slot }` ref from a
+*    spec authored before component-typed slots were distinguished) is stripped
+*    to `undefined`, so it can't reach `wrapSlotResolution` and render as an
+*    `ElementRenderer` child the render fn would choke on.
+*
+* It runs OUTSIDE `wrapSlotResolution`, so it sees the raw prop value before any
+* `$slot` resolution. Both lookups absent ⇒ no-op.
+*/
+function wrapComponentTypedSlots(reg, { componentSlots, assetMembersBySlug } = {}) {
+	if (!componentSlots || !assetMembersBySlug) return reg;
+	const wrapped = { ...reg };
+	for (const key of Object.keys(reg)) {
+		const slotProps = componentSlots[localName(key)];
+		if (!slotProps) continue;
+		const Orig = wrapped[key];
+		if (!Orig) continue;
+		wrapped[key] = function ComponentTypedSlotWrapper(renderProps) {
+			const props = renderProps.element.props;
+			if (!props) return /* @__PURE__ */ jsx(Orig, { ...renderProps });
+			let resolved;
+			for (const [propName, slug] of Object.entries(slotProps)) {
+				const value = props[propName];
+				if (value === void 0) continue;
+				if (typeof value === "string") {
+					const member = assetMembersBySlug.get(slug)?.get(value);
+					if (!member) continue;
+					resolved ??= { ...props };
+					resolved[propName] = member;
+				} else {
+					resolved ??= { ...props };
+					resolved[propName] = void 0;
+				}
+			}
+			if (!resolved) return /* @__PURE__ */ jsx(Orig, { ...renderProps });
+			return /* @__PURE__ */ jsx(Orig, {
+				...renderProps,
+				element: {
+					...renderProps.element,
+					props: resolved
+				}
+			});
+		};
+	}
+	return wrapped;
+}
+//#endregion
+export { wrapComponentTypedSlots };

package/dist/renderer/wrappers/event-bridge.d.ts

@@ -0,0 +1,20 @@
+import { ComponentRegistry } from "@json-render/react";
+
+//#region src/renderer/wrappers/event-bridge.d.ts
+/**
+ * Bridge json-render's `on.*` event bindings to React callback props.
+ *
+ * Wraps every component renderer so it can inspect the spec
+ * element's `on` field (e.g. `on.press: { action: 'setState', params:
+ * { statePath: '/x', value: 1 } }`) and inject the corresponding
+ * React callback (`onClick`) that performs the setState OR emits a
+ * named event for the host app's handler map to pick up.
+ *
+ * Runs at the `ComponentRenderer` layer — earlier than
+ * `defineRegistry`'s prop extraction — so it can read `element.on`
+ * and patch `element.props` with synthesized callback props before
+ * the per-component wrapper sees them.
+ */
+declare function wrapEventBridge(reg: ComponentRegistry): ComponentRegistry;
+//#endregion
+export { wrapEventBridge };

package/dist/renderer/wrappers/event-bridge.js

@@ -0,0 +1,78 @@
+import { useStateStore } from "@json-render/react";
+import { jsx } from "react/jsx-runtime";
+//#region src/renderer/wrappers/event-bridge.tsx
+/**
+* Map json-render `on.*` event bindings to React callback prop names.
+* Spec authors and AI both lean on `on.press`, `on.change`, etc.; the
+* UDS components surface those as `onClick`, `onChange`, etc. on the
+* React side, so the renderer translates between the two surfaces.
+*/
+const EVENT_TO_CALLBACKS = {
+	press: ["onClick"],
+	change: ["onChange"],
+	click: ["onClick"],
+	toggle: ["onToggle"],
+	submit: ["onSubmit"],
+	input: ["onInput"],
+	focus: ["onFocus"],
+	blur: ["onBlur"],
+	openChange: ["onOpenChange"],
+	valueChange: ["onValueChange"],
+	valueCommit: ["onValueCommit"],
+	dismiss: ["onDismiss"]
+};
+/**
+* Bridge json-render's `on.*` event bindings to React callback props.
+*
+* Wraps every component renderer so it can inspect the spec
+* element's `on` field (e.g. `on.press: { action: 'setState', params:
+* { statePath: '/x', value: 1 } }`) and inject the corresponding
+* React callback (`onClick`) that performs the setState OR emits a
+* named event for the host app's handler map to pick up.
+*
+* Runs at the `ComponentRenderer` layer — earlier than
+* `defineRegistry`'s prop extraction — so it can read `element.on`
+* and patch `element.props` with synthesized callback props before
+* the per-component wrapper sees them.
+*/
+function wrapEventBridge(reg) {
+	const wrapped = { ...reg };
+	for (const [name, Comp] of Object.entries(reg)) wrapped[name] = function EventBridgeWrapper(renderProps) {
+		const stateStore = useStateStore();
+		const { element, emit } = renderProps;
+		const on = element.on;
+		if (!on) return /* @__PURE__ */ jsx(Comp, { ...renderProps });
+		const callbackProps = {};
+		for (const [eventName, binding] of Object.entries(on)) {
+			const callbackNames = EVENT_TO_CALLBACKS[eventName];
+			if (!callbackNames) continue;
+			const bindings = Array.isArray(binding) ? binding : [binding];
+			const handler = (...args) => {
+				const callbackValue = args[0];
+				for (const b of bindings) {
+					const action = b;
+					if (action.action === "setState" && action.params?.statePath) {
+						const val = "value" in (action.params ?? {}) ? action.params.value : callbackValue;
+						stateStore.set(action.params.statePath, val);
+					} else emit(eventName);
+				}
+			};
+			for (const cbName of callbackNames) callbackProps[cbName] = handler;
+		}
+		if (Object.keys(callbackProps).length === 0) return /* @__PURE__ */ jsx(Comp, { ...renderProps });
+		const patchedElement = {
+			...element,
+			props: {
+				...element.props,
+				...callbackProps
+			}
+		};
+		return /* @__PURE__ */ jsx(Comp, {
+			...renderProps,
+			element: patchedElement
+		});
+	};
+	return wrapped;
+}
+//#endregion
+export { wrapEventBridge };

package/dist/renderer/wrappers/hex-normalize.d.ts

@@ -0,0 +1,14 @@
+import { ComponentRegistry } from "@json-render/react";
+
+//#region src/renderer/wrappers/hex-normalize.d.ts
+/**
+ * Normalize raw hex prop values (e.g. from `$state` resolution at
+ * runtime) to UDS arbitrary-value syntax (`[#ef4444]`). `$state`
+ * resolves a hex string verbatim, but UDS's style-prop processor
+ * expects brackets around arbitrary literals — without normalisation
+ * the value falls through to the default token-lookup path and the
+ * styling silently fails.
+ */
+declare function wrapNormalizeHex(reg: ComponentRegistry): ComponentRegistry;
+//#endregion
+export { wrapNormalizeHex };

package/dist/renderer/wrappers/hex-normalize.js

@@ -0,0 +1,35 @@
+import { jsx } from "react/jsx-runtime";
+//#region src/renderer/wrappers/hex-normalize.tsx
+const RAW_HEX_RE = /^#[0-9a-fA-F]{3,8}$/;
+/**
+* Normalize raw hex prop values (e.g. from `$state` resolution at
+* runtime) to UDS arbitrary-value syntax (`[#ef4444]`). `$state`
+* resolves a hex string verbatim, but UDS's style-prop processor
+* expects brackets around arbitrary literals — without normalisation
+* the value falls through to the default token-lookup path and the
+* styling silently fails.
+*/
+function wrapNormalizeHex(reg) {
+	const wrapped = { ...reg };
+	for (const [name, Comp] of Object.entries(reg)) wrapped[name] = function HexNormalizeWrapper(renderProps) {
+		const props = renderProps.element.props;
+		if (!props) return /* @__PURE__ */ jsx(Comp, { ...renderProps });
+		let patched = false;
+		const newProps = { ...props };
+		for (const [propName, value] of Object.entries(newProps)) if (typeof value === "string" && RAW_HEX_RE.test(value)) {
+			newProps[propName] = `[${value}]`;
+			patched = true;
+		}
+		if (!patched) return /* @__PURE__ */ jsx(Comp, { ...renderProps });
+		return /* @__PURE__ */ jsx(Comp, {
+			...renderProps,
+			element: {
+				...renderProps.element,
+				props: newProps
+			}
+		});
+	};
+	return wrapped;
+}
+//#endregion
+export { wrapNormalizeHex };

package/dist/renderer/wrappers/html-aliases.d.ts

@@ -0,0 +1,24 @@
+import { ComponentRegistry } from "@json-render/react";
+
+//#region src/renderer/wrappers/html-aliases.d.ts
+/**
+ * Install a Proxy fallback so a bare intrinsic tag used as a spec type
+ * (stray SVG internals like `path`, `rect`, `circle`, `g`, or a raw HTML
+ * tag a non-conforming spec slips in) renders as a native React intrinsic
+ * element instead of triggering json-render's "no renderer for component
+ * type" warning.
+ *
+ * There is deliberately NO HTML-tag → UDS-component aliasing here: which
+ * component backs which tag is config-specific, and the generated prompt
+ * already steers specs to real components (`img` → the image component) and
+ * the polymorphic `as` prop (`<Box as="section">`) for semantic HTML. So a
+ * conforming spec never reaches this Proxy for layout tags; it's a pure
+ * native-rendering safety net.
+ *
+ * Returns a Proxy — successive `wrapRegistry` callers see the proxy
+ * shape, which lazily caches intrinsic renderers on `target` as they're
+ * accessed so repeated lookups return the same function reference.
+ */
+declare function aliasHtmlTypes(reg: ComponentRegistry): ComponentRegistry;
+//#endregion
+export { aliasHtmlTypes };

package/dist/renderer/wrappers/html-aliases.js

@@ -0,0 +1,62 @@
+import React from "react";
+//#region src/renderer/wrappers/html-aliases.tsx
+const INTRINSIC_TAG_RE = /^[a-z][a-zA-Z0-9-]*$/;
+const FORBIDDEN_INTRINSIC_TAGS = new Set([
+	"script",
+	"iframe",
+	"object",
+	"embed",
+	"base",
+	"link",
+	"meta"
+]);
+const FORBIDDEN_INTRINSIC_PROPS = new Set(["dangerouslySetInnerHTML"]);
+const NullEl = () => null;
+NullEl.displayName = "ForbiddenIntrinsic";
+/**
+* Install a Proxy fallback so a bare intrinsic tag used as a spec type
+* (stray SVG internals like `path`, `rect`, `circle`, `g`, or a raw HTML
+* tag a non-conforming spec slips in) renders as a native React intrinsic
+* element instead of triggering json-render's "no renderer for component
+* type" warning.
+*
+* There is deliberately NO HTML-tag → UDS-component aliasing here: which
+* component backs which tag is config-specific, and the generated prompt
+* already steers specs to real components (`img` → the image component) and
+* the polymorphic `as` prop (`<Box as="section">`) for semantic HTML. So a
+* conforming spec never reaches this Proxy for layout tags; it's a pure
+* native-rendering safety net.
+*
+* Returns a Proxy — successive `wrapRegistry` callers see the proxy
+* shape, which lazily caches intrinsic renderers on `target` as they're
+* accessed so repeated lookups return the same function reference.
+*/
+function aliasHtmlTypes(reg) {
+	const wrapped = { ...reg };
+	return new Proxy(wrapped, {
+		get(target, prop, receiver) {
+			if (typeof prop === "string" && prop in target) return Reflect.get(target, prop, receiver);
+			if (typeof prop === "string" && FORBIDDEN_INTRINSIC_TAGS.has(prop)) return NullEl;
+			if (typeof prop === "string" && INTRINSIC_TAG_RE.test(prop)) {
+				const IntrinsicEl = ({ element, children }) => {
+					const intrinsicProps = {};
+					for (const [key, value] of Object.entries(element.props ?? {})) {
+						if (FORBIDDEN_INTRINSIC_PROPS.has(key)) continue;
+						intrinsicProps[key] = value;
+					}
+					return React.createElement(prop, intrinsicProps, children);
+				};
+				IntrinsicEl.displayName = prop;
+				target[prop] = IntrinsicEl;
+				return IntrinsicEl;
+			}
+			return Reflect.get(target, prop, receiver);
+		},
+		has(target, prop) {
+			if (typeof prop === "string" && INTRINSIC_TAG_RE.test(prop)) return true;
+			return Reflect.has(target, prop);
+		}
+	});
+}
+//#endregion
+export { aliasHtmlTypes };

package/dist/renderer/wrappers/inline-styles.d.ts

@@ -0,0 +1,16 @@
+import { ComponentRegistry } from "@json-render/react";
+
+//#region src/renderer/wrappers/inline-styles.d.ts
+/** Config-derived facts this wrapper needs. Omitted ⇒ the relevant branch
+ *  no-ops (a raw `style` then passes through to the DOM untouched). */
+interface InlineStyleConfig {
+  /** camelCase CSS property → style-prop name (inverted from cssProperty). */
+  cssPropertyToStyleProp?: Readonly<Record<string, string>>;
+  /** Container primitives: a fixed `height` becomes `minHeight`. */
+  layoutComponents?: readonly string[];
+  /** Text primitives: a fixed `width`/`height` is dropped. */
+  textComponents?: readonly string[];
+}
+declare function wrapInlineStyleProps(reg: ComponentRegistry, config?: InlineStyleConfig): ComponentRegistry;
+//#endregion
+export { wrapInlineStyleProps };

package/dist/renderer/wrappers/inline-styles.js

@@ -0,0 +1,104 @@
+import { jsx } from "react/jsx-runtime";
+//#region src/renderer/wrappers/inline-styles.tsx
+const HEX_RE = /^#[0-9a-fA-F]{3,8}$/;
+const UNIT_RE = /^-?\d+(\.\d+)?(px|rem|em|%|vh|vw)$/;
+const FUNCTION_CALL_RE = /\w\(.*\)/;
+/** Local component name of a spec type: `yahoo-os:Text` → `Text`. */
+function localName(type) {
+	const colon = type.indexOf(":");
+	return colon === -1 ? type : type.slice(colon + 1);
+}
+function cssKeyToUdsProp(cssKey, elementType, cssMap, layoutSet, textSet) {
+	const type = elementType ? localName(elementType) : void 0;
+	if ((cssKey === "width" || cssKey === "height") && type && textSet.has(type)) return;
+	if (cssKey === "height" && type && layoutSet.has(type)) return cssMap.minHeight;
+	return cssMap[cssKey];
+}
+function shouldDropCssStyle(cssKey, elementType, textSet) {
+	const type = elementType ? localName(elementType) : void 0;
+	return !!type && textSet.has(type) && (cssKey === "width" || cssKey === "height");
+}
+function cssValueToUdsValue(value) {
+	if (typeof value === "number") return `[${value}px]`;
+	if (typeof value !== "string") return value;
+	if (value.startsWith("[") && value.endsWith("]")) return value;
+	if (HEX_RE.test(value) || UNIT_RE.test(value)) return `[${value}]`;
+	return value;
+}
+/**
+* Function-call CSS values (`linear-gradient(...)`, `rgb(...)`,
+* `url(...)`, `calc(...)`, `color-mix(...)`, ...) can't become a
+* Tailwind utility class without a corresponding pre-extracted CSS
+* rule, and the canvas loads specs at runtime — Tailwind never sees
+* the value at build time. Leave these in inline `style` so the
+* browser applies them natively.
+*/
+function isFunctionCallCssValue(value) {
+	return typeof value === "string" && FUNCTION_CALL_RE.test(value);
+}
+/**
+* Parse a raw CSS declaration string (`"background: red; padding: 4px;"`)
+* into a `React.CSSProperties`-shaped object with camelCase keys.
+* Survives `url(...)` and gradient values that contain colons inside
+* their argument lists by splitting only on the FIRST colon per
+* declaration.
+*/
+function parseCssDeclarationString(css) {
+	const out = {};
+	for (const decl of css.split(";")) {
+		const trimmed = decl.trim();
+		if (!trimmed) continue;
+		const colon = trimmed.indexOf(":");
+		if (colon === -1) continue;
+		const rawKey = trimmed.slice(0, colon).trim();
+		const value = trimmed.slice(colon + 1).trim();
+		if (!rawKey || !value) continue;
+		const camelKey = rawKey.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
+		out[camelKey] = value;
+	}
+	return out;
+}
+function wrapInlineStyleProps(reg, config = {}) {
+	const cssMap = config.cssPropertyToStyleProp ?? {};
+	const layoutSet = new Set(config.layoutComponents ?? []);
+	const textSet = new Set(config.textComponents ?? []);
+	const wrapped = { ...reg };
+	for (const [name, Comp] of Object.entries(reg)) wrapped[name] = function InlineStylePropsWrapper(renderProps) {
+		const props = renderProps.element.props;
+		const elementType = renderProps.element.type;
+		const rawStyle = props?.style;
+		if (!props || rawStyle == null) return /* @__PURE__ */ jsx(Comp, { ...renderProps });
+		let style;
+		if (typeof rawStyle === "string") style = parseCssDeclarationString(rawStyle);
+		else if (typeof rawStyle === "object" && !Array.isArray(rawStyle)) style = rawStyle;
+		else return /* @__PURE__ */ jsx(Comp, { ...renderProps });
+		let patched = typeof rawStyle === "string";
+		const newProps = { ...props };
+		const remainingStyle = {};
+		for (const [cssKey, cssValue] of Object.entries(style)) {
+			if (isFunctionCallCssValue(cssValue)) {
+				remainingStyle[cssKey] = cssValue;
+				continue;
+			}
+			const propName = cssKeyToUdsProp(cssKey, elementType, cssMap, layoutSet, textSet);
+			if (propName && newProps[propName] == null) {
+				newProps[propName] = cssValueToUdsValue(cssValue);
+				patched = true;
+			} else if (shouldDropCssStyle(cssKey, elementType, textSet)) patched = true;
+			else remainingStyle[cssKey] = cssValue;
+		}
+		if (!patched) return /* @__PURE__ */ jsx(Comp, { ...renderProps });
+		if (Object.keys(remainingStyle).length > 0) newProps.style = remainingStyle;
+		else delete newProps.style;
+		return /* @__PURE__ */ jsx(Comp, {
+			...renderProps,
+			element: {
+				...renderProps.element,
+				props: newProps
+			}
+		});
+	};
+	return wrapped;
+}
+//#endregion
+export { wrapInlineStyleProps };

package/dist/renderer/wrappers/slot-resolution.d.ts

@@ -0,0 +1,25 @@
+import { ComponentRegistry } from "@json-render/react";
+
+//#region src/renderer/wrappers/slot-resolution.d.ts
+/**
+ * Resolve `$slot` prop references to rendered React children.
+ *
+ * Components like `Card` declare named slots in their authoring spec:
+ *
+ *     props: {
+ *       title: slot('header/text'),
+ *       footer: slot('footer'),
+ *     }
+ *
+ * Codegen lowers each `slot(...)` to a `{ $slot: 'key' }` marker that
+ * surfaces in `element.props`. At render time this wrapper pairs each
+ * slot key against the keyed React children passed in by `Renderer`
+ * (json-render assigns each rendered child a key derived from its
+ * spec element id), pulls the matching child out of the regular
+ * children stream, and feeds it through as the resolved prop value.
+ * Children whose keys don't match any slot pass through to the
+ * component as regular `children`.
+ */
+declare function wrapSlotResolution(reg: ComponentRegistry): ComponentRegistry;
+//#endregion
+export { wrapSlotResolution };