@yahoo/uds-create-config 1.1.1

package/dist/renderer/wrappers/slot-resolution.js

@@ -0,0 +1,68 @@
+import { isSlotRef } from "../../spec/slot-refs.js";
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/renderer/wrappers/slot-resolution.tsx
+/**
+* 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`.
+*/
+function wrapSlotResolution(reg) {
+	const wrapped = {};
+	for (const [name, Comp] of Object.entries(reg)) wrapped[name] = function SlotWrapper(renderProps) {
+		const { element, children } = renderProps;
+		const props = element.props;
+		if (!props) return /* @__PURE__ */ jsx(Comp, { ...renderProps });
+		const slotEntries = [];
+		for (const [propName, value] of Object.entries(props)) if (isSlotRef(value)) slotEntries.push([propName, value.$slot]);
+		if (slotEntries.length === 0) return /* @__PURE__ */ jsx(Comp, { ...renderProps });
+		const slotKeySet = /* @__PURE__ */ new Set();
+		for (const [, ref] of slotEntries) {
+			const refs = Array.isArray(ref) ? ref : [ref];
+			for (const r of refs) slotKeySet.add(r);
+		}
+		const childArray = React.Children.toArray(children);
+		const slotChildMap = /* @__PURE__ */ new Map();
+		const regularChildren = [];
+		for (const child of childArray) {
+			if (React.isValidElement(child) && typeof child.key === "string") {
+				const elementKey = child.key.startsWith(".$") ? child.key.slice(2) : child.key;
+				if (slotKeySet.has(elementKey)) {
+					slotChildMap.set(elementKey, child);
+					continue;
+				}
+			}
+			regularChildren.push(child);
+		}
+		const resolvedProps = { ...props };
+		for (const [propName, ref] of slotEntries) if (Array.isArray(ref)) {
+			const resolved = ref.map((key) => slotChildMap.get(key)).filter(Boolean);
+			resolvedProps[propName] = resolved.length > 0 ? resolved : void 0;
+		} else resolvedProps[propName] = slotChildMap.get(ref) ?? void 0;
+		return /* @__PURE__ */ jsx(Comp, {
+			...renderProps,
+			element: {
+				...element,
+				props: resolvedProps
+			},
+			children: regularChildren.length > 0 ? regularChildren : void 0
+		});
+	};
+	return wrapped;
+}
+//#endregion
+export { wrapSlotResolution };

package/dist/renderer/wrappers/void-elements.d.ts

@@ -0,0 +1,23 @@
+import { ComponentRegistry } from "@json-render/react";
+
+//#region src/renderer/wrappers/void-elements.d.ts
+/**
+ * Strip `children` from void HTML elements (e.g. `<img>`-backed UDS
+ * components) that React refuses to render with children. Source
+ * Specs sometimes include a `children` prop on these — silently drop
+ * it rather than letting React throw.
+ *
+ * `voidComponents` is config-derived (component names whose root renders a
+ * void HTML tag), so this stays config-agnostic. Matches on the
+ * namespace-stripped local name, so a namespaced registry (`yahoo-os:Image`)
+ * is recognized, not just the bare `Image` key. No void set ⇒ no-op.
+ */
+interface VoidElementsConfig {
+  /** Component names whose root renders a void HTML tag (`img`, `input`, …). */
+  voidComponents?: readonly string[];
+}
+declare function wrapVoidElements(reg: ComponentRegistry, {
+  voidComponents
+}?: VoidElementsConfig): ComponentRegistry;
+//#endregion
+export { wrapVoidElements };

package/dist/renderer/wrappers/void-elements.js

@@ -0,0 +1,28 @@
+import { jsx } from "react/jsx-runtime";
+//#region src/renderer/wrappers/void-elements.tsx
+/** Local component name of a registry key: `yahoo-os:Image` → `Image`,
+*  `Image` → `Image`. Registry keys are `<namespace>:<Name>`; component names
+*  never contain `:`, so split on the first one. */
+function localName(key) {
+	const colon = key.indexOf(":");
+	return colon === -1 ? key : key.slice(colon + 1);
+}
+function wrapVoidElements(reg, { voidComponents } = {}) {
+	if (!voidComponents || voidComponents.length === 0) return reg;
+	const voidSet = new Set(voidComponents);
+	const wrapped = { ...reg };
+	for (const key of Object.keys(reg)) {
+		if (!voidSet.has(localName(key))) continue;
+		const Orig = wrapped[key];
+		if (!Orig) continue;
+		wrapped[key] = function VoidElementWrapper(p) {
+			return /* @__PURE__ */ jsx(Orig, {
+				...p,
+				children: void 0
+			});
+		};
+	}
+	return wrapped;
+}
+//#endregion
+export { wrapVoidElements };

package/dist/spec/apply-forced-modifiers.d.ts

@@ -0,0 +1,19 @@
+//#region src/spec/apply-forced-modifiers.d.ts
+type Props = Record<string, unknown>;
+interface SpecShape {
+  root: string;
+  elements: Record<string, {
+    props?: Props;
+  }>;
+}
+/**
+ * Return a copy of `spec` with each active state modifier folded into concrete
+ * style props on every element that declares it. `activeModifiers` are the
+ * forced states for this cell (e.g. `['_hover']`); `state` is the seeded
+ * discriminator model (`{ variant, size, __previewSeedRow, … }`) the modifier
+ * blocks' `$cond`s key off. Non-mutating: only changed elements are rebuilt,
+ * and an empty `activeModifiers` returns the input spec unchanged.
+ */
+declare function applyForcedModifiers<S extends SpecShape>(spec: S, activeModifiers: readonly string[], state: Props): S;
+//#endregion
+export { applyForcedModifiers };

package/dist/spec/apply-forced-modifiers.js

@@ -0,0 +1,49 @@
+import { evaluateVisibility } from "@json-render/core";
+//#region src/spec/apply-forced-modifiers.ts
+function isCondValue(value) {
+	return typeof value === "object" && value !== null && "$cond" in value;
+}
+function resolveBlock(value, state) {
+	if (value === null || typeof value !== "object") return void 0;
+	if (isCondValue(value)) return resolveBlock(evaluateVisibility(value.$cond, { stateModel: state }) ? value.$then : value.$else, state);
+	return value;
+}
+/**
+* Return a copy of `spec` with each active state modifier folded into concrete
+* style props on every element that declares it. `activeModifiers` are the
+* forced states for this cell (e.g. `['_hover']`); `state` is the seeded
+* discriminator model (`{ variant, size, __previewSeedRow, … }`) the modifier
+* blocks' `$cond`s key off. Non-mutating: only changed elements are rebuilt,
+* and an empty `activeModifiers` returns the input spec unchanged.
+*/
+function applyForcedModifiers(spec, activeModifiers, state) {
+	if (activeModifiers.length === 0) return spec;
+	let changed = false;
+	const nextElements = {};
+	for (const [key, element] of Object.entries(spec.elements)) {
+		const props = element.props;
+		const present = props ? activeModifiers.filter((mod) => mod in props) : [];
+		if (!props || present.length === 0) {
+			nextElements[key] = element;
+			continue;
+		}
+		const nextProps = { ...props };
+		for (const mod of present) {
+			const block = resolveBlock(nextProps[mod], state);
+			if (block) Object.assign(nextProps, block);
+			delete nextProps[mod];
+		}
+		nextElements[key] = {
+			...element,
+			props: nextProps
+		};
+		changed = true;
+	}
+	if (!changed) return spec;
+	return {
+		...spec,
+		elements: nextElements
+	};
+}
+//#endregion
+export { applyForcedModifiers };

package/dist/spec/asset-jsx.d.ts

@@ -0,0 +1,48 @@
+//#region src/spec/asset-jsx.d.ts
+/** Pull the slug + member out of an asset id, or `null` for a normal type. */
+declare function parseAssetType(type: string): {
+  slug: string;
+  member: string;
+} | null;
+/**
+ * `slug → authoring-component name` (e.g. `{ icons: 'Icon' }`). Derived from
+ * the asset groups that declare a `component`; a slug missing from the map has
+ * no authoring component and falls back to the bare member tag.
+ */
+type AssetComponentMap = Readonly<Record<string, string>>;
+/** How a placed asset node should appear in exported JSX. */
+interface AssetJsxForm {
+  /** The JSX tag — the authoring component (`Icon`) or the bare member. */
+  tag: string;
+  /**
+   * The `name` attribute value when the authoring component carries the
+   * member identity (`name="Trophy"`). Absent on the bare-member fallback,
+   * which IS the member.
+   */
+  nameAttr?: string;
+  /** Identifier to import — the component when mapped, else the member. */
+  importName: string;
+}
+/**
+ * Resolve a spec element `type` to its exported-JSX form, or `null` when the
+ * type is not an asset node (a normal component — caller serializes as usual).
+ *
+ *  - mapped slug → `<Icon name="Member" … />` (component-typed export);
+ *  - unmapped slug → `<Member … />` (component-less fallback — a self-contained
+ *    member renders itself; a bare-path glyph would need raw `<svg>`, which the
+ *    string-only serializers can't synthesize, so the member tag is the best
+ *    they can emit).
+ */
+declare function assetJsxForm(type: string, assetComponents?: AssetComponentMap): AssetJsxForm | null;
+/**
+ * Inverse of `assetJsxForm` for the editor round-trip: given a parsed JSX tag
+ * and its props, reconstruct the asset-node `type` string — or `null` if the
+ * tag is a genuine component, not an authoring component placing a known member.
+ * The caller closes over its live config to find the group whose `component`
+ * matches `tag` and whose members include the `name` value, then returns
+ * `group.assetType(name)`. When it resolves, the parser drops the `name` prop
+ * (the member identity lives in the type) and keeps the rest (variant, size).
+ */
+type AssetNodeResolver = (tag: string, props: Readonly<Record<string, unknown>>) => string | null;
+//#endregion
+export { AssetComponentMap, AssetJsxForm, AssetNodeResolver, assetJsxForm, parseAssetType };

package/dist/spec/asset-jsx.js

@@ -0,0 +1,48 @@
+//#region src/spec/asset-jsx.ts
+const ASSET_MARKER = "asset:";
+const NAMESPACED_ASSET_MARKER = ":asset:";
+/** Pull the slug + member out of an asset id, or `null` for a normal type. */
+function parseAssetType(type) {
+	let bodyStart;
+	if (type.startsWith(ASSET_MARKER)) bodyStart = 6;
+	else {
+		const markerIndex = type.indexOf(NAMESPACED_ASSET_MARKER);
+		if (markerIndex === -1) return null;
+		bodyStart = markerIndex + 7;
+	}
+	const slashIndex = type.indexOf("/", bodyStart);
+	if (slashIndex === -1) return null;
+	const slug = type.slice(bodyStart, slashIndex);
+	const member = type.slice(slashIndex + 1);
+	if (!slug || !member) return null;
+	return {
+		slug,
+		member
+	};
+}
+/**
+* Resolve a spec element `type` to its exported-JSX form, or `null` when the
+* type is not an asset node (a normal component — caller serializes as usual).
+*
+*  - mapped slug → `<Icon name="Member" … />` (component-typed export);
+*  - unmapped slug → `<Member … />` (component-less fallback — a self-contained
+*    member renders itself; a bare-path glyph would need raw `<svg>`, which the
+*    string-only serializers can't synthesize, so the member tag is the best
+*    they can emit).
+*/
+function assetJsxForm(type, assetComponents) {
+	const parsed = parseAssetType(type);
+	if (!parsed) return null;
+	const component = assetComponents?.[parsed.slug];
+	if (component) return {
+		tag: component,
+		nameAttr: parsed.member,
+		importName: component
+	};
+	return {
+		tag: parsed.member,
+		importName: parsed.member
+	};
+}
+//#endregion
+export { assetJsxForm, parseAssetType };

package/dist/spec/collapse-text-labels.d.ts

@@ -0,0 +1,44 @@
+//#region src/spec/collapse-text-labels.d.ts
+type Props = Record<string, unknown>;
+interface ElementShape {
+  type: string;
+  props?: Props;
+  children?: unknown;
+}
+interface SpecShape {
+  root: string;
+  elements: Record<string, ElementShape>;
+}
+interface ComponentClassification {
+  derived: {
+    acceptsChildren: boolean;
+    acceptsChildNodes: boolean;
+  };
+}
+interface ConfigLike {
+  getComponent(type: string): ComponentClassification | undefined;
+}
+/** One collapse the transform performed — surfaced for lint/reporting. */
+interface CollapsedTextLabel {
+  /** The string-label component whose label was inlined. */
+  parentKey: string;
+  /** The string-label component's spec `type` (e.g. `yahoo-os:Badge`). */
+  parentType: string;
+  /** The wrapped Text element that was removed (when it wasn't shared). */
+  childKey: string;
+  /** The label text hoisted onto the parent's `props.children`. */
+  text: string;
+}
+interface CollapseTextLabelsResult<S extends SpecShape> {
+  spec: S;
+  collapsed: CollapsedTextLabel[];
+}
+/**
+ * Return a copy of `spec` with every redundant Text-wrapped label folded into a
+ * string `children` on the string-label component that wraps it (see file
+ * header). Non-mutating: unchanged elements are reused, and a spec with no such
+ * wrappers is returned as-is with an empty `collapsed` report.
+ */
+declare function collapseWrappedTextLabels<S extends SpecShape>(spec: S, config: ConfigLike): CollapseTextLabelsResult<S>;
+//#endregion
+export { CollapseTextLabelsResult, CollapsedTextLabel, collapseWrappedTextLabels };

package/dist/spec/collapse-text-labels.js

@@ -0,0 +1,107 @@
+//#region src/spec/collapse-text-labels.ts
+/** Child element keys an element references through its `children` array. */
+function childKeysOf(element) {
+	if (!Array.isArray(element.children)) return [];
+	return element.children.filter((c) => typeof c === "string");
+}
+/**
+* Count every parent→child edge in the spec so a wrapped Text node is only
+* deleted when nothing *else* still points at it. Covers `children` arrays and
+* top-level `$slot` prop refs (the two ways the renderer reaches an element).
+*/
+function countReferences(elements) {
+	const counts = /* @__PURE__ */ new Map();
+	const bump = (key) => counts.set(key, (counts.get(key) ?? 0) + 1);
+	for (const element of Object.values(elements)) {
+		for (const child of childKeysOf(element)) bump(child);
+		if (!element.props) continue;
+		for (const value of Object.values(element.props)) {
+			if (typeof value !== "object" || value === null || !("$slot" in value)) continue;
+			const slot = value.$slot;
+			const refs = Array.isArray(slot) ? slot : [slot];
+			for (const ref of refs) if (typeof ref === "string") bump(ref);
+		}
+	}
+	return counts;
+}
+/**
+* A *bare string leaf* is an element whose only rendered content is a string
+* `children` prop: no element children, and no prop other than `children`. Such
+* a node contributes exactly its text, so flattening it onto a string-label
+* parent is lossless. Returns the string, or `undefined` if the element carries
+* anything more (own styling, icons, nested children) and must be preserved.
+*/
+function bareLabelText(element) {
+	if (childKeysOf(element).length > 0) return void 0;
+	const props = element.props;
+	if (!props) return void 0;
+	const text = props.children;
+	if (typeof text !== "string") return void 0;
+	if (Object.keys(props).filter((k) => k !== "children").length > 0) return void 0;
+	return text;
+}
+/**
+* Return a copy of `spec` with every redundant Text-wrapped label folded into a
+* string `children` on the string-label component that wraps it (see file
+* header). Non-mutating: unchanged elements are reused, and a spec with no such
+* wrappers is returned as-is with an empty `collapsed` report.
+*/
+function collapseWrappedTextLabels(spec, config) {
+	const collapsed = [];
+	const refCounts = countReferences(spec.elements);
+	const rewrites = /* @__PURE__ */ new Map();
+	const toDelete = /* @__PURE__ */ new Set();
+	for (const [key, element] of Object.entries(spec.elements)) {
+		const component = config.getComponent(element.type);
+		if (!component) continue;
+		const { acceptsChildren, acceptsChildNodes } = component.derived;
+		if (!acceptsChildren || acceptsChildNodes) continue;
+		const childKeys = childKeysOf(element);
+		if (childKeys.length !== 1) continue;
+		const existingLabel = element.props?.children;
+		if (typeof existingLabel === "string" && existingLabel !== "") continue;
+		const childKey = childKeys[0];
+		const child = spec.elements[childKey];
+		if (!child) continue;
+		const text = bareLabelText(child);
+		if (text === void 0) continue;
+		rewrites.set(key, text);
+		if ((refCounts.get(childKey) ?? 0) <= 1) toDelete.add(childKey);
+		collapsed.push({
+			parentKey: key,
+			parentType: element.type,
+			childKey,
+			text
+		});
+	}
+	if (collapsed.length === 0) return {
+		spec,
+		collapsed
+	};
+	const nextElements = {};
+	for (const [key, element] of Object.entries(spec.elements)) {
+		if (toDelete.has(key)) continue;
+		const label = rewrites.get(key);
+		if (label === void 0) {
+			nextElements[key] = element;
+			continue;
+		}
+		const { children: _dropped, ...rest } = element;
+		nextElements[key] = {
+			...rest,
+			props: {
+				...element.props,
+				children: label
+			}
+		};
+	}
+	return {
+		spec: {
+			...spec,
+			elements: nextElements
+		},
+		collapsed
+	};
+}
+//#endregion
+export { collapseWrappedTextLabels };

package/dist/spec/empty-node-slots.d.ts

@@ -0,0 +1,51 @@
+import { Component } from "../Component.js";
+import { Spec } from "@json-render/core";
+
+//#region src/spec/empty-node-slots.d.ts
+/**
+ * Materialize every EMPTY layer-bound node slot of `spec`'s root as a `Slot`
+ * element wired through a `$slot` ref, so an unfilled slot is a stable element
+ * in the spec rather than an absent prop — the studio canvas needs a drop
+ * target, the layers panel a row, and the inspector an "Empty" state. Slots the
+ * spec already fills are left as-is. Returns `spec` unchanged when there's
+ * nothing to inject (no node slots, or all of them filled).
+ */
+declare function withEmptyNodeSlots(spec: Spec, component: Pick<Component, 'derived'>): Spec;
+/**
+ * Pin a persistent trailing `Slot` as the last child of every container element
+ * in `spec` (tree-wide), so a container always exposes an insertion drop target
+ * at the bottom of its children — the same `Slot` model used for node slots,
+ * but appended to `children` rather than replacing the element when filled.
+ * Idempotent: a container whose children already end in a `Slot` is left as-is,
+ * so re-running (and filling, which inserts *before* the trailing slot) never
+ * stacks duplicates. Returns `spec` unchanged when there's nothing to add.
+ */
+declare function withContainerChildSlots(spec: Spec): Spec;
+/**
+ * Compose both slot injections into the canvas's render view: layer-bound node
+ * slots on a component instance's root (`withEmptyNodeSlots`, needs the
+ * component definition) plus a trailing insertion `Slot` in every container,
+ * tree-wide (`withContainerChildSlots`). This is the spec the studio canvas
+ * renders so empty slots show as drop targets — it is NEVER persisted. Stored
+ * specs stay slot-free; `stripInjectedSlots` is the inverse, applied at every
+ * serialization boundary (DB, clipboard, AI prompt). Both helpers return the
+ * same reference when there's nothing to add, so this is cheap and idempotent —
+ * re-running on an already-slotted spec adds nothing.
+ */
+declare function withRenderSlots(spec: Spec, component: Pick<Component, 'derived'> | null | undefined): Spec;
+/**
+ * Inverse of `withEmptyNodeSlots` + `withContainerChildSlots`: drop every
+ * injected `Slot` element and scrub its references, so a spec carries no
+ * editing scaffolding. A `Slot`-typed element is ALWAYS an injected content
+ * hole (json-render's placeholder), never authored content — both injectors
+ * emit `type: 'Slot'` — so removing all of them and their references is the
+ * exact reversal: a trailing `children` Slot drops out of its parent's
+ * `children`, and an empty node slot drops both its `Slot` element and the
+ * `{ $slot }` prop that pointed at it (a FILLED slot points at a real element,
+ * which is not `Slot`-typed, so it survives). Use at export/serialization
+ * boundaries (e.g. clipboard); the canvas re-injects fresh drop targets on
+ * load. Idempotent: returns `spec` unchanged when there are no `Slot` elements.
+ */
+declare function stripInjectedSlots(spec: Spec): Spec;
+//#endregion
+export { stripInjectedSlots, withContainerChildSlots, withEmptyNodeSlots, withRenderSlots };

package/dist/spec/empty-node-slots.js

@@ -0,0 +1,141 @@
+//#region src/spec/empty-node-slots.ts
+const SLOT_TYPE = "Slot";
+/**
+* Layer-bound single-node slots — Button `startIcon`/`endIcon`, Item `media`:
+* a `slot()` bound to a named layer whose value is a renderable node. Open
+* `children` slots (no layer) are authored as child layers, and text/scalar
+* slots as inputs, so neither is materialized here.
+*/
+function nodeSlotNames(component) {
+	return component.derived.props.filter((p) => p.kind === "slot" && p.layer !== void 0 && p.valueType === "ReactNode" && p.authoredType !== "string").map((p) => p.name);
+}
+/**
+* Materialize every EMPTY layer-bound node slot of `spec`'s root as a `Slot`
+* element wired through a `$slot` ref, so an unfilled slot is a stable element
+* in the spec rather than an absent prop — the studio canvas needs a drop
+* target, the layers panel a row, and the inspector an "Empty" state. Slots the
+* spec already fills are left as-is. Returns `spec` unchanged when there's
+* nothing to inject (no node slots, or all of them filled).
+*/
+function withEmptyNodeSlots(spec, component) {
+	const names = nodeSlotNames(component);
+	if (names.length === 0) return spec;
+	const rootKey = spec.root;
+	const next = structuredClone(spec);
+	const elements = next.elements;
+	const root = elements[rootKey];
+	if (!root) return spec;
+	root.props = root.props ?? {};
+	let injected = false;
+	for (const name of names) {
+		if (root.props[name] !== void 0) continue;
+		const key = `${rootKey}__${name}__slot`;
+		elements[key] = {
+			type: SLOT_TYPE,
+			props: { name }
+		};
+		root.props[name] = { $slot: key };
+		injected = true;
+	}
+	return injected ? next : spec;
+}
+const CONTAINER_TYPES = new Set([
+	"VStack",
+	"HStack",
+	"Box",
+	"ZStack",
+	"Flex",
+	"Grid",
+	"ScrollView"
+]);
+/**
+* Pin a persistent trailing `Slot` as the last child of every container element
+* in `spec` (tree-wide), so a container always exposes an insertion drop target
+* at the bottom of its children — the same `Slot` model used for node slots,
+* but appended to `children` rather than replacing the element when filled.
+* Idempotent: a container whose children already end in a `Slot` is left as-is,
+* so re-running (and filling, which inserts *before* the trailing slot) never
+* stacks duplicates. Returns `spec` unchanged when there's nothing to add.
+*/
+function withContainerChildSlots(spec) {
+	const elements = spec.elements;
+	const targets = Object.keys(elements).filter((key) => {
+		const el = elements[key];
+		if (!el || !CONTAINER_TYPES.has(el.type ?? "")) return false;
+		const children = el.children ?? [];
+		return elements[children[children.length - 1] ?? ""]?.type !== SLOT_TYPE;
+	});
+	if (targets.length === 0) return spec;
+	const next = structuredClone(spec);
+	const nextEls = next.elements;
+	const used = new Set(Object.keys(nextEls));
+	for (const key of targets) {
+		let slotKey = `${key}__children__slot`;
+		let n = 0;
+		while (used.has(slotKey)) slotKey = `${key}__children__slot__${++n}`;
+		used.add(slotKey);
+		nextEls[slotKey] = {
+			type: SLOT_TYPE,
+			props: { name: "children" }
+		};
+		const el = nextEls[key];
+		el.children = [...el.children ?? [], slotKey];
+	}
+	return next;
+}
+/**
+* Compose both slot injections into the canvas's render view: layer-bound node
+* slots on a component instance's root (`withEmptyNodeSlots`, needs the
+* component definition) plus a trailing insertion `Slot` in every container,
+* tree-wide (`withContainerChildSlots`). This is the spec the studio canvas
+* renders so empty slots show as drop targets — it is NEVER persisted. Stored
+* specs stay slot-free; `stripInjectedSlots` is the inverse, applied at every
+* serialization boundary (DB, clipboard, AI prompt). Both helpers return the
+* same reference when there's nothing to add, so this is cheap and idempotent —
+* re-running on an already-slotted spec adds nothing.
+*/
+function withRenderSlots(spec, component) {
+	return withContainerChildSlots(component ? withEmptyNodeSlots(spec, component) : spec);
+}
+function slotRefKeys(value) {
+	if (typeof value !== "object" || value === null || !("$slot" in value)) return;
+	const ref = value.$slot;
+	if (typeof ref === "string") return [ref];
+	return Array.isArray(ref) ? ref : void 0;
+}
+/**
+* Inverse of `withEmptyNodeSlots` + `withContainerChildSlots`: drop every
+* injected `Slot` element and scrub its references, so a spec carries no
+* editing scaffolding. A `Slot`-typed element is ALWAYS an injected content
+* hole (json-render's placeholder), never authored content — both injectors
+* emit `type: 'Slot'` — so removing all of them and their references is the
+* exact reversal: a trailing `children` Slot drops out of its parent's
+* `children`, and an empty node slot drops both its `Slot` element and the
+* `{ $slot }` prop that pointed at it (a FILLED slot points at a real element,
+* which is not `Slot`-typed, so it survives). Use at export/serialization
+* boundaries (e.g. clipboard); the canvas re-injects fresh drop targets on
+* load. Idempotent: returns `spec` unchanged when there are no `Slot` elements.
+*/
+function stripInjectedSlots(spec) {
+	const elements = spec.elements;
+	const slotKeys = new Set(Object.keys(elements).filter((k) => elements[k]?.type === SLOT_TYPE));
+	if (slotKeys.size === 0) return spec;
+	const next = structuredClone(spec);
+	const nextEls = next.elements;
+	for (const key of slotKeys) delete nextEls[key];
+	for (const el of Object.values(nextEls)) {
+		if (!el) continue;
+		if (Array.isArray(el.children)) el.children = el.children.filter((c) => !slotKeys.has(c));
+		if (!el.props) continue;
+		for (const [propName, value] of Object.entries(el.props)) {
+			const refs = slotRefKeys(value);
+			if (!refs) continue;
+			const remaining = refs.filter((r) => !slotKeys.has(r));
+			if (remaining.length === 0) delete el.props[propName];
+			else if (remaining.length !== refs.length) el.props[propName] = { $slot: remaining };
+		}
+	}
+	return next;
+}
+//#endregion
+export { stripInjectedSlots, withContainerChildSlots, withEmptyNodeSlots, withRenderSlots };

package/dist/spec/index.d.ts

@@ -0,0 +1,10 @@
+import { applyForcedModifiers } from "./apply-forced-modifiers.js";
+import { AssetComponentMap, AssetJsxForm, AssetNodeResolver, assetJsxForm, parseAssetType } from "./asset-jsx.js";
+import { CollapseTextLabelsResult, CollapsedTextLabel, collapseWrappedTextLabels } from "./collapse-text-labels.js";
+import { stripInjectedSlots, withContainerChildSlots, withEmptyNodeSlots, withRenderSlots } from "./empty-node-slots.js";
+import { JsxToSpecOptions, UNRESOLVED, hasUnresolvedProps, jsxToSpec, stripUnresolvedProps } from "./jsxToSpec.js";
+import { ResolvableComponent, resolveAuthoredLayerProps, resolveRenderedLayerProps } from "./layer-props.js";
+import { PreviewControl, PreviewControlKind, derivePreviewControls, propOptions } from "./preview-controls.js";
+import { collectSlotRefs, isSlotRef } from "./slot-refs.js";
+import { SpecToJsxOptions, SpecToJsxResult, specToJsx } from "./specToJsx.js";
+export { type AssetComponentMap, type AssetJsxForm, type AssetNodeResolver, type CollapseTextLabelsResult, type CollapsedTextLabel, type JsxToSpecOptions, type PreviewControl, type PreviewControlKind, type ResolvableComponent, type SpecToJsxOptions, type SpecToJsxResult, UNRESOLVED, applyForcedModifiers, assetJsxForm, collapseWrappedTextLabels, collectSlotRefs, derivePreviewControls, hasUnresolvedProps, isSlotRef, jsxToSpec, parseAssetType, propOptions, resolveAuthoredLayerProps, resolveRenderedLayerProps, specToJsx, stripInjectedSlots, stripUnresolvedProps, withContainerChildSlots, withEmptyNodeSlots, withRenderSlots };

package/dist/spec/index.js

@@ -0,0 +1,10 @@
+import { collectSlotRefs, isSlotRef } from "./slot-refs.js";
+import { applyForcedModifiers } from "./apply-forced-modifiers.js";
+import { assetJsxForm, parseAssetType } from "./asset-jsx.js";
+import { collapseWrappedTextLabels } from "./collapse-text-labels.js";
+import { stripInjectedSlots, withContainerChildSlots, withEmptyNodeSlots, withRenderSlots } from "./empty-node-slots.js";
+import { UNRESOLVED, hasUnresolvedProps, jsxToSpec, stripUnresolvedProps } from "./jsxToSpec.js";
+import { resolveAuthoredLayerProps, resolveRenderedLayerProps } from "./layer-props.js";
+import { derivePreviewControls, propOptions } from "./preview-controls.js";
+import { specToJsx } from "./specToJsx.js";
+export { UNRESOLVED, applyForcedModifiers, assetJsxForm, collapseWrappedTextLabels, collectSlotRefs, derivePreviewControls, hasUnresolvedProps, isSlotRef, jsxToSpec, parseAssetType, propOptions, resolveAuthoredLayerProps, resolveRenderedLayerProps, specToJsx, stripInjectedSlots, stripUnresolvedProps, withContainerChildSlots, withEmptyNodeSlots, withRenderSlots };