@yahoo/uds-create-config 2.44.0 → 3.0.0

package/dist/renderer/UdsRenderer.d.ts

@@ -1,7 +1,7 @@
 import { RegistryDescriptor } from "./wrapRegistry.js";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 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
@@ -10,11 +10,11 @@ interface UdsRendererProps {
   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.
+   * bundle registry (assembled through `defineRegistry` over the emitted
+   * entries) — 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 + event/style normalisation
+   * still apply.
    */
   registry: ComponentRegistry;
   /** Action handlers (`emit`-target name → async function). */
@@ -41,10 +41,11 @@ interface UdsRendererProps {
   /** 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.
+   * Config-derived facts for the wrapper stack (CSS→style-prop map,
+   * style-prop class 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;
   /**

package/dist/renderer/UdsRenderer.js

@@ -1,8 +1,8 @@
 "use client";
 import { wrapRegistry } from "./wrapRegistry.js";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { JSONUIProvider, Renderer } from "@json-render/react";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { MotionConfig } from "motion/react";
 //#region src/renderer/UdsRenderer.tsx
 /**

package/dist/renderer/assetEntries.d.ts

@@ -0,0 +1,37 @@
+import { IconLibrary } from "./icon-library.js";
+import { AssetRenderProps } from "./assetRenderable.js";
+import { ComponentEntry } from "./componentEntry.js";
+import React from "react";
+
+//#region src/renderer/assetEntries.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 AssetEntriesResult {
+  /** One ctx-shaped entry per placed glyph, keyed by its spec `type` (`icon:icons/Trophy`). */
+  entries: Record<string, ComponentEntry>;
+  /** @see AssetMembers — empty when the config registers no placeable assets. */
+  assetMembers: AssetMembers;
+}
+/**
+ * Registry entries for a config's placeable asset libraries.
+ *
+ * Each glyph keys under the member's own ref (`icon:icons/Trophy`) — a `kind:path` key can't
+ * collide with a `component:` or `package:` key, so the entries merge into the registry's
+ * component map safely. In the same pass (`libraries` may be a one-shot iterator), each member is
+ * indexed by slug + name so a picker can render one glyph directly.
+ */
+declare function assetRegistryEntries({
+  libraries,
+  components
+}: {
+  libraries: Iterable<IconLibrary>;
+  /** The registry's own component bindings — where a group's declared system component (its
+   *  `Icon`, which owns the set-specific size/variant → glyph mapping) is resolved from. */
+  components: Record<string, React.ComponentType<any>>;
+}): AssetEntriesResult;
+//#endregion
+export { AssetEntriesResult, AssetMembers, assetRegistryEntries };

package/dist/renderer/assetEntries.js

@@ -0,0 +1,39 @@
+import { makeAssetRenderable } from "./assetRenderable.js";
+import { makeComponentEntry } from "./componentEntry.js";
+//#region src/renderer/assetEntries.ts
+/**
+* Registry entries for a config's placeable asset libraries.
+*
+* Each glyph keys under the member's own ref (`icon:icons/Trophy`) — a `kind:path` key can't
+* collide with a `component:` or `package:` key, so the entries merge into the registry's
+* component map safely. In the same pass (`libraries` may be a one-shot iterator), each member is
+* indexed by slug + name so a picker can render one glyph directly.
+*/
+function assetRegistryEntries({ libraries, components }) {
+	const entries = {};
+	const assetMembers = /* @__PURE__ */ new Map();
+	for (const group of libraries) {
+		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 Renderable = makeAssetRenderable(SystemComponent, member, name);
+			const key = group.assetType(name);
+			entries[key] = makeComponentEntry({
+				component: Renderable,
+				name: key
+			});
+			bySlug.set(name, Renderable);
+		}
+		assetMembers.set(group.name, bySlug);
+	}
+	return {
+		entries,
+		assetMembers
+	};
+}
+//#endregion
+export { assetRegistryEntries };

package/dist/renderer/assetRenderable.d.ts

@@ -3,15 +3,23 @@ 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. The open index lets a caller pass
- *  a system-component prop it resolved from the config (e.g. the prop that
- *  binds CSS `color`, so a chrome surface can make the glyph inherit its own
- *  text color) without this contract naming any system's props. */
+ *  maps these to a glyph; the registry-derived `name` always wins.
+ *
+ *  The type is deliberately CLOSED (no index signature), so a misspelled
+ *  `variant` or `size` at a render site is a compile error rather than a glyph
+ *  quietly drawn with its defaults. A caller that has resolved a
+ *  system-component prop from the config (e.g. the prop that binds CSS `color`,
+ *  so a chrome surface can make the glyph inherit its own text color) hands it
+ *  through `systemProps` — one named channel, so this contract never has to
+ *  name any system's props and never has to open up to admit them. */
 type AssetRenderProps = {
   variant?: string;
   size?: string | number;
-  [systemProp: string]: unknown;
+  /** Props of the system component the member renders through, resolved from
+   *  the config by the caller and spread onto it verbatim. Ignored when no
+   *  system component is bound: they were resolved for that component, and a
+   *  raw glyph has no use for them. */
+  systemProps?: Readonly<Record<string, string>>;
 };
 //#endregion
 export { AssetRenderProps };

package/dist/renderer/assetRenderable.js

@@ -1,9 +1,15 @@
 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) {
+	if (SystemComponent === void 0) {
+		const Member = member;
+		return function RawAssetRenderable({ systemProps: _, ...props }) {
+			return /* @__PURE__ */ jsx(Member, { ...props });
+		};
+	}
+	return function AssetRenderable({ systemProps, ...props }) {
 		return /* @__PURE__ */ jsx(SystemComponent, {
+			...systemProps,
 			...props,
 			name
 		});

package/dist/renderer/componentEntry.d.ts

@@ -0,0 +1,58 @@
+import React from "react";
+import { BaseComponentProps, ComponentRenderer } from "@json-render/react";
+
+//#region src/renderer/componentEntry.d.ts
+/**
+ * A ctx-shaped registry entry — the function `defineRegistry(catalog, { components })` takes.
+ * Codegen emits one per component (`export const ButtonEntry = makeComponentEntry({ … })`), so a
+ * loaded component module carries its own registry entry and the registry assembles from imports.
+ */
+type ComponentEntry = (ctx: BaseComponentProps) => React.ReactNode;
+/**
+ * A resolved native slot fill, as the component's prop consumes it. json-render resolves the
+ * element's `slots` field (`Record<string, string[]>`) to rendered children and hands each slot an
+ * array; a UDS component reads a fill as an ordinary prop (`props.startIcon`), where a single node
+ * is the expected shape — some renders clone or inspect it. An empty array is a cleared slot, and
+ * clears the prop with it (`[]` is truthy, so passing it through would make `{props.startIcon &&
+ * …}` paint an empty box).
+ */
+declare function slotFillValue(fill: React.ReactNode): React.ReactNode;
+interface MakeComponentEntryOptions {
+  component: React.ComponentType<any>;
+  /**
+   * The component takes no children — a void root (`img`, `input`) or no `children` slot
+   * (`childrenPolicy === 'none'`). Children reach a component through two channels — the rendered
+   * children stream and a stray authored `children` prop — and both are dropped: React throws when
+   * a void element receives children, and a childless render would forward them onto a nested void
+   * element (a `div`-rooted form control's `<input>`) and throw. Named slot fills still route —
+   * that is how a childless component takes an `actions`-style fill.
+   */
+  childless?: boolean;
+  /**
+   * Label for the entry's error tile — the registry key (`component:<path>`), baked in by codegen
+   * like `childless`. Falls back to the component's own name when absent.
+   */
+  name?: string;
+}
+/**
+ * One component's registry entry.
+ *
+ * Codegen emits the call beside the component itself, with the component's own facts baked in —
+ * which is what retires the name-matching wrapper stack: void-ness is an argument, not a lookup.
+ * The entry consumes json-render's ctx shape natively (`props`, never `element.props`), so
+ * `defineRegistry` adapts it without a second conversion — routing element-shaped renderers through
+ * that adapter produced a non-renderable object on React Native.
+ */
+declare function makeComponentEntry({
+  component: Comp,
+  childless,
+  name
+}: MakeComponentEntryOptions): ComponentEntry;
+/**
+ * A ctx-shaped entry as json-render's element-shaped `ComponentRenderer` — the same adaptation
+ * `defineRegistry` performs, for a registry assembled one entry at a time (Studio's dynamic
+ * per-module registry loads an entry from its compiled module and installs it directly).
+ */
+declare function entryRenderer(entry: ComponentEntry): ComponentRenderer;
+//#endregion
+export { ComponentEntry, MakeComponentEntryOptions, entryRenderer, makeComponentEntry, slotFillValue };

package/dist/renderer/componentEntry.js

@@ -0,0 +1,71 @@
+import { RendererErrorBoundary } from "./RendererErrorBoundary.js";
+import { specContent } from "./spec-content.js";
+import React from "react";
+//#region src/renderer/componentEntry.tsx
+/**
+* A resolved native slot fill, as the component's prop consumes it. json-render resolves the
+* element's `slots` field (`Record<string, string[]>`) to rendered children and hands each slot an
+* array; a UDS component reads a fill as an ordinary prop (`props.startIcon`), where a single node
+* is the expected shape — some renders clone or inspect it. An empty array is a cleared slot, and
+* clears the prop with it (`[]` is truthy, so passing it through would make `{props.startIcon &&
+* …}` paint an empty box).
+*/
+function slotFillValue(fill) {
+	if (!Array.isArray(fill)) return fill;
+	if (fill.length === 0) return void 0;
+	return fill.length === 1 ? fill[0] : fill;
+}
+/**
+* One component's registry entry.
+*
+* Codegen emits the call beside the component itself, with the component's own facts baked in —
+* which is what retires the name-matching wrapper stack: void-ness is an argument, not a lookup.
+* The entry consumes json-render's ctx shape natively (`props`, never `element.props`), so
+* `defineRegistry` adapts it without a second conversion — routing element-shaped renderers through
+* that adapter produced a non-renderable object on React Native.
+*/
+function makeComponentEntry({ component: Comp, childless, name }) {
+	const label = name ?? Comp.displayName ?? Comp.name ?? "component";
+	return function ComponentEntry({ props: elementProps, children, slots }) {
+		let props = elementProps ?? {};
+		if (slots) {
+			const filled = { ...props };
+			for (const [name, fill] of Object.entries(slots)) filled[name] = slotFillValue(fill);
+			props = filled;
+		}
+		const { children: propChildren, ...rest } = props;
+		let rendered;
+		if (childless) rendered = React.createElement(Comp, rest);
+		else {
+			const finalChildren = specContent({
+				children,
+				propChildren
+			});
+			rendered = finalChildren !== void 0 && finalChildren !== null ? React.createElement(Comp, rest, finalChildren) : React.createElement(Comp, rest);
+		}
+		return React.createElement(RendererErrorBoundary, {
+			name: label,
+			resetKey: elementProps
+		}, rendered);
+	};
+}
+/**
+* A ctx-shaped entry as json-render's element-shaped `ComponentRenderer` — the same adaptation
+* `defineRegistry` performs, for a registry assembled one entry at a time (Studio's dynamic
+* per-module registry loads an entry from its compiled module and installs it directly).
+*/
+function entryRenderer(entry) {
+	return function EntryRenderer({ element, children, slots, emit, on, bindings, loading }) {
+		return entry({
+			props: element.props ?? {},
+			children,
+			slots,
+			emit,
+			on,
+			bindings,
+			loading
+		});
+	};
+}
+//#endregion
+export { entryRenderer, makeComponentEntry, slotFillValue };

package/dist/renderer/icon-library.d.ts

@@ -0,0 +1,20 @@
+import React from "react";
+
+//#region src/renderer/icon-library.d.ts
+interface IconLibrary {
+  /** The slug members are indexed under — `phosphor`. */
+  readonly name: string;
+  /** The component members render THROUGH, keyed by its registry ref stored verbatim
+   *  (`component:primitives/Icon`, not the stripped path) — a library's own `Icon`, which owns the
+   *  set-specific size/variant → glyph mapping. Absent, a member draws itself. */
+  readonly component?: string;
+  /** The members to register, in the order they should appear. */
+  readonly assetNames: readonly string[];
+  /** Name → the component that draws it. Absent for a library rebuilt from JSON, which has names but
+   *  nothing live to render — a browser surface draws those through the bundled registry instead. */
+  readonly members?: Record<string, React.ComponentType<any> | undefined>;
+  /** The spec `type` one member is addressed by — `icon:phosphor/StarIcon`. */
+  readonly assetType: (name: string) => string;
+}
+//#endregion
+export { IconLibrary };

package/dist/renderer/index.d.ts

@@ -1,14 +1,14 @@
-import { RegistryDescriptor, wrapRegistry } from "./wrapRegistry.js";
-import { AssetMembers, MakeRegistryResult, makeRegistry } from "./makeRegistry.js";
-import { makeUdsRenderer } from "./makeUdsRenderer.js";
+import { ComponentEntry, MakeComponentEntryOptions, entryRenderer, makeComponentEntry, slotFillValue } from "./componentEntry.js";
+import { AssetEntriesResult, AssetMembers, assetRegistryEntries } from "./assetEntries.js";
 import { FragmentRenderer } from "./primitives/FragmentRenderer.js";
 import { SlotRenderer } from "./primitives/SlotRenderer.js";
 import { RendererErrorBoundary } from "./RendererErrorBoundary.js";
+import { RuntimeComponentFailureContext, RuntimeComponentFailureReporter, RuntimeComponentRebuildContext, RuntimeComponentRebuildReporter, RuntimeComponentStatus, RuntimeComponentStore, RuntimeComponentStoreContext, installRuntimeComponentStore, runtimeComponent } from "./runtimeComponent.js";
+import { REVEALED_LAYER_ATTR, specContent } from "./spec-content.js";
+import { aliasHtmlTypes } from "./wrappers/html-aliases.js";
+import { RegistryDescriptor, wrapRegistry } from "./wrapRegistry.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 };
+export { type AssetEntriesResult, type AssetMembers, type ComponentEntry, FragmentRenderer, type MakeComponentEntryOptions, REVEALED_LAYER_ATTR, type RegistryDescriptor, RendererErrorBoundary, RuntimeComponentFailureContext, type RuntimeComponentFailureReporter, RuntimeComponentRebuildContext, type RuntimeComponentRebuildReporter, type RuntimeComponentStatus, type RuntimeComponentStore, RuntimeComponentStoreContext, SlotRenderer, UdsRenderer, type UdsRendererProps, aliasHtmlTypes, assetRegistryEntries, entryRenderer, installRuntimeComponentStore, makeComponentEntry, runtimeComponent, slotFillValue, specContent, wrapEventBridge, wrapInlineStyleProps, wrapNormalizeHex, wrapRegistry };

package/dist/renderer/index.js

@@ -1,14 +1,14 @@
 import { RendererErrorBoundary } from "./RendererErrorBoundary.js";
-import { makeUdsRenderer } from "./makeUdsRenderer.js";
+import { REVEALED_LAYER_ATTR, specContent } from "./spec-content.js";
+import { entryRenderer, makeComponentEntry, slotFillValue } from "./componentEntry.js";
+import { assetRegistryEntries } from "./assetEntries.js";
 import { FragmentRenderer } from "./primitives/FragmentRenderer.js";
 import { SlotRenderer } from "./primitives/SlotRenderer.js";
+import { RuntimeComponentFailureContext, RuntimeComponentRebuildContext, RuntimeComponentStoreContext, installRuntimeComponentStore, runtimeComponent } from "./runtimeComponent.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 };
+export { FragmentRenderer, REVEALED_LAYER_ATTR, RendererErrorBoundary, RuntimeComponentFailureContext, RuntimeComponentRebuildContext, RuntimeComponentStoreContext, SlotRenderer, UdsRenderer, aliasHtmlTypes, assetRegistryEntries, entryRenderer, installRuntimeComponentStore, makeComponentEntry, runtimeComponent, slotFillValue, specContent, wrapEventBridge, wrapInlineStyleProps, wrapNormalizeHex, wrapRegistry };

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

@@ -13,7 +13,7 @@ import { ComponentRenderer } from "@json-render/react";
  *
  * Plain `Slot` (not `$Slot`) matches json-render's convention:
  * `$prefix` names are reserved for prop-value expressions
- * (`$state`, `$bindState`, `$slot`, `$template`, etc.). Element
+ * (`$state`, `$bindState`, `$template`, etc.). Element
  * types are plain names, like `Fragment`.
  */
 declare const SlotRenderer: ComponentRenderer;

package/dist/renderer/primitives/SlotRenderer.js

@@ -12,7 +12,7 @@ import { Fragment, jsx } from "react/jsx-runtime";
 *
 * Plain `Slot` (not `$Slot`) matches json-render's convention:
 * `$prefix` names are reserved for prop-value expressions
-* (`$state`, `$bindState`, `$slot`, `$template`, etc.). Element
+* (`$state`, `$bindState`, `$template`, etc.). Element
 * types are plain names, like `Fragment`.
 */
 const SlotRenderer = ({ children }) => /* @__PURE__ */ jsx(Fragment, { children });

package/dist/renderer/runtimeComponent.d.ts

@@ -0,0 +1,33 @@
+import React from "react";
+
+//#region src/renderer/runtimeComponent.d.ts
+type RuntimeComponentStatus = 'current' | 'loading' | 'failed';
+/**
+ * Branch-scoped live component state consumed by component imports inside standalone modules.
+ * Stable refs are the API; pushed and freshly compiled React implementations remain cache data.
+ */
+interface RuntimeComponentStore {
+  readonly activate: (componentRef: string) => void;
+  readonly component: (componentRef: string) => React.ElementType | undefined;
+  readonly status: (componentRef: string) => RuntimeComponentStatus;
+  readonly error?: (componentRef: string) => unknown;
+  readonly subscribe: (componentRef: string, listener: () => void) => () => void;
+  readonly version: (componentRef: string) => number;
+}
+type RuntimeComponentRebuildReporter = (componentRef: string, delta: 1 | -1) => void;
+type RuntimeComponentFailureReporter = (componentRef: string, error: unknown, delta: 1 | -1) => void;
+declare const RuntimeComponentRebuildContext: React.Context<RuntimeComponentRebuildReporter | null>;
+declare const RuntimeComponentFailureContext: React.Context<RuntimeComponentFailureReporter | null>;
+declare const RuntimeComponentStoreContext: React.Context<RuntimeComponentStore | null>;
+/** Install one branch's resolver. The returned cleanup cannot remove a newer replacement. */
+declare function installRuntimeComponentStore(branchId: string, store: RuntimeComponentStore): () => void;
+/**
+ * A normal React component import whose implementation resolves through the branch's live registry.
+ *
+ * Standalone modules call this at module scope after codegen replaces a component-only source
+ * import. `import.meta.url` is then that module's authenticated runtime URL, which already carries
+ * its branch id. The optional id exists for hosts and focused tests that are not runtime modules.
+ */
+declare function runtimeComponent<Props extends object = Record<string, unknown>>(componentRef: string, explicitBranchId?: string): React.ForwardRefExoticComponent<React.PropsWithoutRef<Props> & React.RefAttributes<unknown>>;
+//#endregion
+export { RuntimeComponentFailureContext, RuntimeComponentFailureReporter, RuntimeComponentRebuildContext, RuntimeComponentRebuildReporter, RuntimeComponentStatus, RuntimeComponentStore, RuntimeComponentStoreContext, installRuntimeComponentStore, runtimeComponent };

package/dist/renderer/runtimeComponent.js

@@ -0,0 +1,113 @@
+import { createContext, createElement, forwardRef, useCallback, useContext, useEffect, useSyncExternalStore } from "react";
+//#region src/renderer/runtimeComponent.tsx
+const STORES = Symbol.for("@yahoo/uds-create/runtime-component-stores");
+const REBUILD_CONTEXT = Symbol.for("@yahoo/uds-create/runtime-component-rebuild-context");
+const FAILURE_CONTEXT = Symbol.for("@yahoo/uds-create/runtime-component-failure-context");
+const STORE_CONTEXT = Symbol.for("@yahoo/uds-create/runtime-component-store-context");
+const globals = globalThis;
+function stores() {
+	const current = globals[STORES];
+	if (current) return current;
+	const created = /* @__PURE__ */ new Map();
+	globals[STORES] = created;
+	return created;
+}
+/** Shared even when this helper is bundled into several independently loaded component modules. */
+function rebuildContext() {
+	const current = globals[REBUILD_CONTEXT];
+	if (current) return current;
+	const created = createContext(null);
+	globals[REBUILD_CONTEXT] = created;
+	return created;
+}
+const RuntimeComponentRebuildContext = rebuildContext();
+/** Shared separately from rebuilding so already-pushed bundles keep their existing reporter ABI. */
+function failureContext() {
+	const current = globals[FAILURE_CONTEXT];
+	if (current) return current;
+	const created = createContext(null);
+	globals[FAILURE_CONTEXT] = created;
+	return created;
+}
+const RuntimeComponentFailureContext = failureContext();
+/**
+* The resolver owned by the current rendered registry.
+*
+* Studio still has two preview-bundle owners: per-branch system-editor stores and a legacy
+* singleton for design canvases. Both can exist in one page, so branch id alone cannot select the
+* right in-memory overlay. A registry entry provides this context around its renderer; the global
+* branch map below remains the fallback for standalone hosts.
+*/
+function storeContext() {
+	const current = globals[STORE_CONTEXT];
+	if (current) return current;
+	const created = createContext(null);
+	globals[STORE_CONTEXT] = created;
+	return created;
+}
+const RuntimeComponentStoreContext = storeContext();
+/** Install one branch's resolver. The returned cleanup cannot remove a newer replacement. */
+function installRuntimeComponentStore(branchId, store) {
+	stores().set(branchId, store);
+	return () => {
+		if (stores().get(branchId) === store) stores().delete(branchId);
+	};
+}
+function storeFor(branchId) {
+	return branchId ? stores().get(branchId) ?? null : null;
+}
+function branchIdFromModuleUrl() {
+	try {
+		return new URL(import.meta.url).searchParams.get("branchId") ?? void 0;
+	} catch {
+		return;
+	}
+}
+const noopUnsubscribe = () => {};
+/**
+* A normal React component import whose implementation resolves through the branch's live registry.
+*
+* Standalone modules call this at module scope after codegen replaces a component-only source
+* import. `import.meta.url` is then that module's authenticated runtime URL, which already carries
+* its branch id. The optional id exists for hosts and focused tests that are not runtime modules.
+*/
+function runtimeComponent(componentRef, explicitBranchId) {
+	const branchId = explicitBranchId ?? branchIdFromModuleUrl();
+	const DynamicComponent = forwardRef((props, forwardedRef) => {
+		const store = useContext(RuntimeComponentStoreContext) ?? storeFor(branchId);
+		const subscribe = useCallback((listener) => store?.subscribe(componentRef, listener) ?? noopUnsubscribe, [componentRef, store]);
+		const snapshot = useCallback(() => store?.version(componentRef) ?? 0, [componentRef, store]);
+		useSyncExternalStore(subscribe, snapshot, snapshot);
+		const reportRebuild = useContext(RuntimeComponentRebuildContext);
+		const reportFailure = useContext(RuntimeComponentFailureContext);
+		const status = store?.status(componentRef);
+		const rebuilding = status === "loading";
+		const failed = status === "failed";
+		const error = failed ? store?.error?.(componentRef) : void 0;
+		useEffect(() => store?.activate(componentRef), [store]);
+		useEffect(() => {
+			if (!reportRebuild || !rebuilding) return;
+			reportRebuild(componentRef, 1);
+			return () => reportRebuild(componentRef, -1);
+		}, [reportRebuild, rebuilding]);
+		useEffect(() => {
+			if (!reportFailure || !failed) return;
+			reportFailure(componentRef, error, 1);
+			return () => reportFailure(componentRef, error, -1);
+		}, [
+			reportFailure,
+			failed,
+			error
+		]);
+		const Paint = store?.component(componentRef);
+		if (!Paint) return null;
+		return createElement(Paint, forwardedRef == null ? props : {
+			...props,
+			ref: forwardedRef
+		});
+	});
+	DynamicComponent.displayName = `RuntimeComponent(${componentRef})`;
+	return DynamicComponent;
+}
+//#endregion
+export { RuntimeComponentFailureContext, RuntimeComponentRebuildContext, RuntimeComponentStoreContext, installRuntimeComponentStore, runtimeComponent };

package/dist/renderer/spec-content.d.ts

@@ -0,0 +1,43 @@
+import React from "react";
+
+//#region src/renderer/spec-content.d.ts
+/**
+ * The marker an editor stamps on a layer it paints although the layer's own condition hides it in
+ * that cell. Its value names why the layer was hidden.
+ */
+declare const REVEALED_LAYER_ATTR = "data-uds-ghost";
+/**
+ * The one merge of a spec element's two content channels.
+ *
+ * An element carries content twice — `element.children` holds keys json-render renders into the
+ * children stream, `props.children` holds an authored label — and every render path has to decide
+ * between them the same way, or a component paints differently through its compiled entry than
+ * through an expanded anatomy's intrinsic tags.
+ *
+ * Spec children win over a `props.children` label — but ONLY ones that paint. A container whose
+ * spec children all render nothing (see {@link rendersNothing}) is empty as far as the label is
+ * concerned, so the label renders first and they follow it, preserving the canvas's
+ * bottom-insertion affordance.
+ *
+ * A `children` label coexists with the element's own spec children rather than losing to them:
+ * Button's anatomy is icon-box layers as children edges PLUS the label as a string `children`
+ * prop, and the built module paints both at once — dropping the label made every slot fill look
+ * like it wiped the cell. WHERE it lands is the anatomy's to say: the content-position node marks
+ * it ({@link slotAnatomyIndex}), and the label splices there, before the placeholder, so an edit
+ * surface keeps the slot's own affordance. A spec with no marker — a stale artifact, a
+ * studio-created component — keeps the pre-marker behavior: spec children win. A slot fill can't
+ * double either way — json-render hands it through `slots`, never the child array.
+ *
+ * A revealed layer ({@link REVEALED_LAYER_ATTR}) paints, so with the marker present it takes its
+ * real place around the label. Without the marker it counts as painting nothing, or selecting a
+ * hidden layer would make the label vanish from that cell.
+ */
+declare function specContent({
+  children,
+  propChildren
+}: {
+  /** The rendered children stream — json-render's render of `element.children`. */children: React.ReactNode; /** The element's own `props.children` — an authored label, or a routed `children` slot fill. */
+  propChildren: React.ReactNode;
+}): React.ReactNode;
+//#endregion
+export { REVEALED_LAYER_ATTR, specContent };