@yahoo/uds-create-config 2.44.0 → 3.0.0

package/dist/spec/preview-elements.d.ts

@@ -0,0 +1,63 @@
+//#region src/spec/preview-elements.d.ts
+/**
+ * A preview element is the JSON-safe form of JSX stored in a component's preview props.
+ *
+ * It is authoring data, not a React element and not yet a json-render node. The helpers in this file
+ * own the conversion into the UDS spec dialect so every render host receives the same shape.
+ */
+interface PreviewElement {
+  readonly element: string | {
+    readonly __ref: string;
+  };
+  readonly props?: Record<string, string | number | boolean>;
+  readonly children?: PreviewElement[];
+  readonly text?: string;
+}
+type PreviewValue = string | number | boolean | PreviewElement | PreviewValue[] | {
+  readonly [key: string]: PreviewValue;
+};
+/** Whether a stored value names an element to render. */
+declare function isPreviewElement(value: unknown): value is PreviewElement;
+/**
+ * Whether anything under a value is a stored preview element. Stops at live React elements: walking
+ * through their owner Fiber reaches a circular structure.
+ */
+declare function hasPreviewElementDeep(value: unknown): boolean;
+/** The json-render `type` a stored element names. */
+declare function previewElementType(element: PreviewElement['element']): string;
+/** One flattened node in a json-render spec. */
+interface PreviewSpecNode {
+  readonly type: string;
+  readonly props?: Record<string, unknown>;
+  /** Child element keys, never literal content. */
+  readonly children?: string[];
+}
+/** Flatten one stored preview element into json-render's keyed element map. */
+declare function previewElementNodes(root: PreviewElement, rootKey: string, taken?: ReadonlySet<string>): {
+  root: string;
+  elements: Record<string, PreviewSpecNode>;
+};
+/** The portion of a spec needed to graft stored preview elements into it. */
+type GraftableSpec = {
+  root: string;
+  elements: Record<string, GraftableElement>;
+};
+type GraftableElement = {
+  props?: Record<string, unknown>;
+  children?: string[];
+  slots?: Record<string, string[]>;
+};
+/**
+ * Lower direct element-valued props into json-render's native slot form.
+ *
+ * The element subtrees join the spec's keyed element map, and the root's `slots` record names their
+ * keys under the prop that carried them — json-render traverses `slots` itself, so the keys join
+ * neither `props` nor `children`. Plain values—including text in `props.children`—remain props.
+ *
+ * Elements nested inside arbitrary structured data are deliberately left for runtime marker
+ * revival. A `slots` entry identifies a component prop, not a path inside an opaque application
+ * value.
+ */
+declare function graftPreviewElements<S extends GraftableSpec>(spec: S, values: Record<string, unknown>): S;
+//#endregion
+export { GraftableElement, GraftableSpec, PreviewElement, PreviewSpecNode, PreviewValue, graftPreviewElements, hasPreviewElementDeep, isPreviewElement, previewElementNodes, previewElementType };

package/dist/spec/preview-elements.js

@@ -0,0 +1,89 @@
+//#region src/spec/preview-elements.ts
+/** Whether a stored value names an element to render. */
+function isPreviewElement(value) {
+	if (typeof value !== "object" || value === null) return false;
+	const { element } = value;
+	return typeof element === "string" || typeof element === "object" && element !== null && typeof element.__ref === "string";
+}
+/**
+* Whether anything under a value is a stored preview element. Stops at live React elements: walking
+* through their owner Fiber reaches a circular structure.
+*/
+function hasPreviewElementDeep(value) {
+	if (typeof value !== "object" || value === null) return false;
+	if ("$$typeof" in value) return false;
+	if (isPreviewElement(value)) return true;
+	return (Array.isArray(value) ? value : Object.values(value)).some(hasPreviewElementDeep);
+}
+/** The json-render `type` a stored element names. */
+function previewElementType(element) {
+	return typeof element === "string" ? element : element.__ref;
+}
+/** Flatten one stored preview element into json-render's keyed element map. */
+function previewElementNodes(root, rootKey, taken = /* @__PURE__ */ new Set()) {
+	const elements = {};
+	const used = new Set(taken);
+	const add = (node, base) => {
+		let key = base;
+		while (used.has(key)) key = `${key}_`;
+		used.add(key);
+		const children = (node.children ?? []).map((child, index) => add(child, `${key}_${index}`));
+		elements[key] = {
+			type: previewElementType(node.element),
+			props: {
+				...node.props ?? {},
+				...node.text !== void 0 ? { children: node.text } : {}
+			},
+			...children.length > 0 ? { children } : {}
+		};
+		return key;
+	};
+	return {
+		root: add(root, rootKey),
+		elements
+	};
+}
+/** A direct element-valued prop or a list of element values. */
+function isElementValue(value) {
+	return isPreviewElement(value) || Array.isArray(value) && value.some(isPreviewElement);
+}
+/**
+* Lower direct element-valued props into json-render's native slot form.
+*
+* The element subtrees join the spec's keyed element map, and the root's `slots` record names their
+* keys under the prop that carried them — json-render traverses `slots` itself, so the keys join
+* neither `props` nor `children`. Plain values—including text in `props.children`—remain props.
+*
+* Elements nested inside arbitrary structured data are deliberately left for runtime marker
+* revival. A `slots` entry identifies a component prop, not a path inside an opaque application
+* value.
+*/
+function graftPreviewElements(spec, values) {
+	const entries = Object.entries(values).filter(([, value]) => isElementValue(value));
+	if (entries.length === 0) return spec;
+	const next = structuredClone(spec);
+	const elements = next.elements;
+	const rootKey = next.root;
+	const rootElement = elements[rootKey];
+	if (!rootElement) return spec;
+	const used = new Set(Object.keys(elements));
+	const rootProps = { ...rootElement.props ?? {} };
+	const rootSlots = { ...rootElement.slots ?? {} };
+	for (const [prop, value] of entries) {
+		const keys = (Array.isArray(value) ? value.filter(isPreviewElement) : [value]).map((node, index) => {
+			const graft = previewElementNodes(node, `${rootKey}__${prop}__${index}`, used);
+			for (const [key, element] of Object.entries(graft.elements)) {
+				elements[key] = element;
+				used.add(key);
+			}
+			return graft.root;
+		});
+		delete rootProps[prop];
+		rootSlots[prop] = keys;
+	}
+	rootElement.props = rootProps;
+	rootElement.slots = rootSlots;
+	return next;
+}
+//#endregion
+export { graftPreviewElements, hasPreviewElementDeep, isPreviewElement, previewElementNodes, previewElementType };

package/dist/spec/rewrite-refs.d.ts

@@ -0,0 +1,58 @@
+import { Config } from "../framework/Config.js";
+
+//#region src/spec/rewrite-refs.d.ts
+/** One rename to carry into a document, named by WHAT was renamed. */
+type DocumentRename = /** A component's path — `element.type` and a node's own component name. */{
+  readonly kind: 'component';
+  readonly from: string;
+  readonly to: string;
+} /** One component's own prop — a `props` KEY, on that component's elements only. */ | {
+  readonly kind: 'component-prop';
+  readonly component: string;
+  readonly from: string;
+  readonly to: string;
+} /** One value of one variant prop — a `props` VALUE, on that component's elements only. */ | {
+  readonly kind: 'variant-value';
+  readonly component: string;
+  readonly prop: string;
+  readonly from: string;
+  readonly to: string;
+} /** A style property — a `props` KEY on every element that doesn't declare its own prop of that name. */ | {
+  readonly kind: 'style-property';
+  readonly from: string;
+  readonly to: string;
+} /** A token — a `props` VALUE, on props drawing from that token's group. Paths, not leaves. */ | {
+  readonly kind: 'token';
+  readonly from: string;
+  readonly to: string;
+} /** A modifier — the `_`-prefixed `props` KEY its block hangs off, on every element. Paths, not `_` keys. */ | {
+  readonly kind: 'modifier';
+  readonly from: string;
+  readonly to: string;
+} /** One layer of one component — a key inside `layerProps`, on that component's elements only. */ | {
+  readonly kind: 'layer';
+  readonly component: string;
+  readonly from: string;
+  readonly to: string;
+};
+/** A spec as this reads it: the structural subset, loose because the rows are whatever was written months ago. */
+interface RewritableSpec {
+  elements?: Record<string, {
+    type?: unknown;
+    props?: Record<string, unknown>;
+  } | undefined>;
+}
+interface SpecRewrite {
+  readonly spec: RewritableSpec;
+  /** How many positions changed. Zero means the same spec object comes back, by identity. */
+  readonly changed: number;
+}
+/**
+ * The spec with every reference the renames name pointing at its new name.
+ *
+ * Returns the same spec object when nothing matched, so a caller can skip the write entirely rather than store a
+ * copy of what it read — a cascade that touches every row on every rename is its own problem.
+ */
+declare function rewriteSpecRefs(config: Config, spec: RewritableSpec, renames: readonly DocumentRename[]): SpecRewrite;
+//#endregion
+export { DocumentRename, RewritableSpec, SpecRewrite, rewriteSpecRefs };

package/dist/spec/rewrite-refs.js

@@ -0,0 +1,250 @@
+import { isRef, kindOf, pathOf } from "../framework/utils/refs.js";
+import { StyleProperty } from "../entities/system/StyleProperty.js";
+import { propOwner, resolveComponentProps } from "../framework/projections.js";
+import { Component } from "../entities/system/Component.js";
+//#region src/spec/rewrite-refs.ts
+/**
+* Carrying a config rename into the documents that reference it.
+*
+* A canvas spec references the config in more places than its element types. Counted on one real branch: 2,207
+* elements set a component's own prop (`variant`), several thousand set a style property (`bg`, `color`, `gap`,
+* `borderRadius`, …), and the values they set are token leaves and variant values. Renaming any of those inside
+* the config cascades through `cascadeRename` — which walks the ref index — and reaches none of the documents,
+* because a document holds no ref that index can see.
+*
+* So the rename has to be applied here, and the difficulty is that a spec's positions are CONTEXT-DEPENDENT:
+*
+*  - `props.variant` is `Button`'s own prop only on elements whose type is `Button`. Rewriting the key wherever
+*    it appears would rename an unrelated component's `variant` too.
+*  - `props.bg` is the `bg` STYLE PROPERTY — unless the element's component declares its own `bg`, in which case
+*    the component's declaration wins and a style-property rename must leave it alone.
+*  - `props.bg = 'primary'` is a token LEAF inside whatever group the `bg` style property draws from, so a token
+*    rename only touches values on props that draw from that token's group.
+*
+* Every one of those questions is answered by the config (`resolveComponentProps`, the prop's declaration, the
+* style property's own `values`), which is why this takes one and resolves rather than matching strings.
+*
+* A MODIFIER is the one position that answers for itself. `_hover` is a prop bag keyed by a modifier's path, and
+* nothing else in a spec is `_`-prefixed — a component can't declare such a prop, and both the style resolver and
+* the prop validator skip the prefix on sight. So a modifier rename moves the key unconditionally, with no
+* component to scope it by. What the block CONTAINS is a second props bag against the same element, which is why
+* every other rename here descends into it: `_hover: { bg: 'accent' }` sets the same style property and the same
+* token as the bag around it, and stopping at the top level would leave the conditional half of a component
+* stale while the base half moved.
+*
+* `layerProps` is the same shape with one twist: its keys are the component's LAYER names, and each bag under one
+* belongs to what that layer RENDERS rather than to the component around it. So a layer rename moves the key —
+* scoped to its component, since `text` on one component is a different layer from `text` on another — and every
+* other rename descends with the layer's own declarations, because `layerProps.text.variant` is `Text`'s variant.
+* A layer that renders a component can itself be overridden through `layerProps`, and that nests the same way.
+*
+* Renames arrive TYPED and EXACT, from the patch that recorded them — never inferred. The config supports a
+* rename op per kind and a sub-rename for a component's `props` and `props/value`, so the patch log names both
+* halves of every case below.
+*/
+/** Whether a stored `type` names this component path, in either form it may be written in. */
+function namesComponent(type, path) {
+	if (typeof type !== "string") return false;
+	if (type === path) return true;
+	return type.includes(":") && kindOf(type) === "component" ? type === `component:${path}` : false;
+}
+/** The component an element names, as a path — `undefined` for an intrinsic tag or another kind. */
+function componentOf(type) {
+	if (typeof type !== "string") return void 0;
+	if (!type.includes(":")) return type;
+	return kindOf(type) === "component" ? pathOf(type) : void 0;
+}
+/** The style property a prop declaration BINDS, when it binds one. */
+function boundStylePropPath(declaration) {
+	const decl = declaration;
+	return decl?.type === "styleProperty" && isRef(decl.value) ? pathOf(decl.value.__ref) : void 0;
+}
+/** The token GROUP a prop declaration draws its values from, if it draws from one. */
+function tokenGroupOf(config, declaration) {
+	const decl = declaration;
+	if (decl?.type !== "styleProperty" || !isRef(decl.value)) return;
+	const styleProp = StyleProperty.get(config, pathOf(decl.value.__ref));
+	for (const value of styleProp?.values ?? []) if (isRef(value) && kindOf(value.__ref) === "token") return pathOf(value.__ref);
+}
+/** The prop a call site overrides a component's inner layers through — see `deriveSpec`, which spreads each of
+*  its bags onto the node whose layer the key names. */
+const LAYER_PROPS = "layerProps";
+/** A nested props bag as stored — `undefined` for anything in a bag that is a VALUE rather than a bag. */
+function nestedBag(value) {
+	return typeof value === "object" && value !== null && !Array.isArray(value) ? value : void 0;
+}
+/**
+* The nested props bag a modifier block holds — `undefined` for anything else in the bag.
+*
+* The `_` prefix is the whole test, which is the same test `styleDeclarations` and the prop validator make. A
+* key naming a modifier the config no longer holds still reads as a block: an unresolvable one is a document
+* that needs repairing, not a reason to leave the props inside it un-renamed.
+*/
+function modifierBlock(key, value) {
+	return key.startsWith("_") ? nestedBag(value) : void 0;
+}
+const INTRINSIC = {
+	component: void 0,
+	declared: {}
+};
+function scopeFor(config, component) {
+	return component ? {
+		component,
+		declared: resolveComponentProps(config, component)
+	} : INTRINSIC;
+}
+/** The scope one `layerProps` entry's bag belongs to — the element the named layer renders. */
+function layerScope(config, scope, layer) {
+	if (!scope.component) return INTRINSIC;
+	const element = Component.get(config, scope.component)?.layers?.[layer];
+	return scopeFor(config, isRef(element) ? pathOf(element.__ref) : void 0);
+}
+/** Rename a KEY inside a props bag, preserving insertion order — order is meaning in a stored document. */
+function withRenamedKey(props, from, to) {
+	const out = {};
+	for (const [key, value] of Object.entries(props)) out[key === from ? to : key] = value;
+	return out;
+}
+/**
+* One rename applied to the keys and values of ONE bag — `undefined` when it matched nothing there.
+*
+* Everything scoped to a component is scoped to THIS bag's component, which is the element's for its own props
+* and the layer's element for a `layerProps` bag.
+*/
+function rewriteOwnEntries(config, scope, props, rename) {
+	if (rename.kind === "layer") return void 0;
+	if (rename.kind === "component-prop" || rename.kind === "variant-value") {
+		if (!scope.component) return void 0;
+		if (scope.component !== rename.component) {
+			const target = rename.kind === "component-prop" ? rename.to : rename.prop;
+			if (!(propOwner(config, scope.component, target) === rename.component || rename.kind === "component-prop" && propOwner(config, scope.component, rename.from) === rename.component)) return void 0;
+			if (rename.kind === "component-prop" && propOwner(config, scope.component, rename.from) === scope.component) return;
+		}
+	}
+	const declared = scope.declared;
+	if (rename.kind === "modifier") {
+		const from = `_${rename.from}`;
+		return from in props ? withRenamedKey(props, from, `_${rename.to}`) : void 0;
+	}
+	if (rename.kind === "component-prop") return rename.from in props ? withRenamedKey(props, rename.from, rename.to) : void 0;
+	if (rename.kind === "variant-value") return props[rename.prop] === rename.from ? {
+		...props,
+		[rename.prop]: rename.to
+	} : void 0;
+	if (rename.kind === "style-property") {
+		if (!(rename.from in props)) return void 0;
+		const declaration = declared[rename.from];
+		if (declaration !== void 0 && boundStylePropPath(declaration) !== rename.from) return;
+		return withRenamedKey(props, rename.from, rename.to);
+	}
+	const group = rename.from.slice(0, rename.from.lastIndexOf("/"));
+	const leaf = rename.from.slice(rename.from.lastIndexOf("/") + 1);
+	const toLeaf = rename.to.slice(rename.to.lastIndexOf("/") + 1);
+	if (!group) return void 0;
+	let next;
+	for (const [prop, value] of Object.entries(props)) {
+		if (value !== leaf) continue;
+		if (tokenGroupOf(config, declared[prop]) !== group) continue;
+		next ??= { ...props };
+		next[prop] = toLeaf;
+	}
+	return next;
+}
+/**
+* One rename applied to a props bag, to every modifier block nested inside it, and to every layer override under
+* its `layerProps` — at any depth.
+*
+* `undefined` when nothing matched, so a caller can leave the element it came from untouched.
+*/
+function rewriteProps(config, scope, props, rename) {
+	let next = rewriteOwnEntries(config, scope, props, rename);
+	for (const [key, value] of Object.entries(next ?? props)) {
+		let rewritten;
+		if (key === LAYER_PROPS) rewritten = rewriteLayerProps(config, scope, value, rename);
+		else {
+			const block = modifierBlock(key, value);
+			rewritten = block ? rewriteProps(config, scope, block, rename) : void 0;
+		}
+		if (!rewritten) continue;
+		next ??= { ...props };
+		next[key] = rewritten;
+	}
+	return next;
+}
+/**
+* One rename applied to a `layerProps` override map: KEYS are the enclosing component's layer names, and each
+* value is a props bag belonging to what that layer renders.
+*
+* The key rename is the only thing here scoped to the enclosing component rather than to the bag's own — a layer
+* name means nothing on its own, and two components' `text` layers are unrelated.
+*/
+function rewriteLayerProps(config, scope, layerProps, rename) {
+	const bags = nestedBag(layerProps);
+	if (!bags) return void 0;
+	let next;
+	if (rename.kind === "layer" && scope.component === rename.component && rename.from in bags) next = withRenamedKey(bags, rename.from, rename.to);
+	for (const [layer, value] of Object.entries(next ?? bags)) {
+		const bag = nestedBag(value);
+		if (!bag) continue;
+		const rewritten = rewriteProps(config, layerScope(config, scope, layer), bag, rename);
+		if (!rewritten) continue;
+		next ??= { ...bags };
+		next[layer] = rewritten;
+	}
+	return next;
+}
+/**
+* The spec with every reference the renames name pointing at its new name.
+*
+* Returns the same spec object when nothing matched, so a caller can skip the write entirely rather than store a
+* copy of what it read — a cascade that touches every row on every rename is its own problem.
+*/
+function rewriteSpecRefs(config, spec, renames) {
+	if (renames.length === 0) return {
+		spec,
+		changed: 0
+	};
+	let elements;
+	let changed = 0;
+	for (const [key, element] of Object.entries(spec.elements ?? {})) {
+		if (!element) continue;
+		let type = element.type;
+		let props = element.props;
+		let touched = 0;
+		const scope = scopeFor(config, componentOf(element.type));
+		for (const rename of renames) {
+			if (rename.from === rename.to) continue;
+			if (rename.kind === "component") {
+				if (!namesComponent(type, rename.from)) continue;
+				type = typeof type === "string" && type.includes(":") ? `component:${rename.to}` : rename.to;
+				touched++;
+				continue;
+			}
+			if (!props) continue;
+			const next = rewriteProps(config, scope, props, rename);
+			if (!next) continue;
+			props = next;
+			touched++;
+		}
+		if (touched === 0) continue;
+		elements ??= { ...spec.elements };
+		elements[key] = {
+			...element,
+			...type !== void 0 ? { type } : {},
+			...props ? { props } : {}
+		};
+		changed += touched;
+	}
+	return elements ? {
+		spec: {
+			...spec,
+			elements
+		},
+		changed
+	} : {
+		spec,
+		changed: 0
+	};
+}
+//#endregion
+export { rewriteSpecRefs };

package/dist/spec/specToJsx.js

@@ -1,5 +1,4 @@
-import { isSlotRef } from "./slot-refs.js";
-import { assetJsxForm } from "./asset-jsx.js";
+import { assetJsxForm, jsxIdentifier } from "./asset-jsx.js";
 import { serializeProps } from "@json-render/codegen";
 //#region src/spec/specToJsx.ts
 function statePathToExpression(path) {
@@ -8,14 +7,10 @@ function statePathToExpression(path) {
 function isDynamicValue(value) {
 	return typeof value === "object" && value !== null && "$state" in value && typeof value.$state === "string";
 }
-function slotRefs(value) {
-	if (!isSlotRef(value)) return [];
-	return Array.isArray(value.$slot) ? value.$slot : [value.$slot];
-}
-/** Collect all element keys referenced via $slot in a spec element's props */
-function collectSlotKeys(props) {
+/** All element keys an element's `slots` record pulls in. */
+function collectSlotKeys(slots) {
 	const keys = /* @__PURE__ */ new Set();
-	for (const value of Object.values(props)) for (const ref of slotRefs(value)) keys.add(ref);
+	for (const fills of Object.values(slots ?? {})) for (const ref of fills) keys.add(ref);
 	return keys;
 }
 function resolveDynamicValue(value) {
@@ -30,8 +25,7 @@ function eventNameToJsx(name) {
 	return `on${name.charAt(0).toUpperCase()}${name.slice(1)}`;
 }
 /**
-* Collect every element `type` reachable from `spec.root` via `children` or
-* `$slot` refs.
+* Collect every element `type` reachable from `spec.root` via `children`.
 * A local, cycle-safe stand-in for `@json-render/codegen`'s
 * `collectUsedComponents` — that helper's `children` walk has no visited
 * guard and stack-overflows on a cyclic element graph, the same failure
@@ -50,7 +44,7 @@ function collectUsedComponentTypes(spec) {
 		if (!element) continue;
 		types.add(element.type);
 		for (const childKey of element.children ?? []) stack.push(childKey);
-		for (const slotKey of collectSlotKeys(element.props ?? {})) stack.push(slotKey);
+		for (const slotKey of collectSlotKeys(element.slots)) stack.push(slotKey);
 	}
 	return types;
 }
@@ -60,22 +54,18 @@ function renderElement(key, spec, depth, assetComponents, ancestors) {
 	const indent = "  ".repeat(depth);
 	if (ancestors.has(key)) return `${indent}{/* cyclic reference to "${key}" omitted */}`;
 	const withSelf = new Set(ancestors).add(key);
-	const { children: _children, ...restProps } = element.props ?? {};
-	const slotKeys = collectSlotKeys(restProps);
+	const { children: _children, ...propsWithoutSlots } = element.props ?? {};
+	const slotKeys = collectSlotKeys(element.slots);
 	const slotAttrs = [];
-	const propsWithoutSlots = {};
-	for (const [propName, propValue] of Object.entries(restProps)) if (isSlotRef(propValue)) {
-		const refs = slotRefs(propValue);
-		if (refs.length === 1) {
-			const rendered = renderElement(refs[0], spec, 0, assetComponents, withSelf).trim();
-			slotAttrs.push(`${propName}={${rendered}}`);
-		} else {
-			const rendered = refs.map((r) => renderElement(r, spec, 0, assetComponents, withSelf).trim()).filter(Boolean);
-			slotAttrs.push(`${propName}={<>${rendered.join("")}</>}`);
-		}
-	} else propsWithoutSlots[propName] = propValue;
+	for (const [propName, fills] of Object.entries(element.slots ?? {})) if (fills.length === 1) {
+		const rendered = renderElement(fills[0], spec, 0, assetComponents, withSelf).trim();
+		slotAttrs.push(`${propName}={${rendered}}`);
+	} else {
+		const rendered = fills.map((r) => renderElement(r, spec, 0, assetComponents, withSelf).trim()).filter(Boolean);
+		slotAttrs.push(`${propName}={<>${rendered.join("")}</>}`);
+	}
 	const assetForm = assetJsxForm(element.type, assetComponents);
-	const tag = assetForm?.tag ?? element.type;
+	const tag = assetForm?.tag ?? jsxIdentifier(element.type);
 	const nameAttr = assetForm?.nameAttr ? `name="${assetForm.nameAttr}"` : "";
 	if (assetForm?.nameAttr) delete propsWithoutSlots.name;
 	const staticAttrs = Object.keys(propsWithoutSlots).length > 0 ? serializeProps(propsWithoutSlots) : "";
@@ -110,8 +100,7 @@ function renderElement(key, spec, depth, assetComponents, ancestors) {
 	const textContent = typeof rawChildren === "string" || typeof rawChildren === "number" ? String(rawChildren) : null;
 	const dynamicChildren = isDynamicValue(rawChildren) ? `{${resolveDynamicValue(rawChildren)}}` : null;
 	const inlineContent = textContent ?? dynamicChildren;
-	const bodySlotKeys = slotRefs(rawChildren);
-	const childKeys = [...new Set([...element.children ?? [], ...bodySlotKeys])].filter((k) => !slotKeys.has(k));
+	const childKeys = (element.children ?? []).filter((k) => !slotKeys.has(k));
 	const hasChildren = childKeys.length > 0 || inlineContent !== null;
 	let jsxLine;
 	if (!hasChildren) jsxLine = `${indent}<${tag}${propsStr} />`;
@@ -141,7 +130,7 @@ function specToJsx(spec, options) {
 		imports: []
 	};
 	const assetComponents = options?.assetComponents;
-	const sortedImports = [...new Set([...collectUsedComponentTypes(spec)].map((type) => assetJsxForm(type, assetComponents)?.importName ?? type))].sort();
+	const sortedImports = [...new Set([...collectUsedComponentTypes(spec)].map((type) => assetJsxForm(type, assetComponents)?.importName ?? jsxIdentifier(type)))].sort();
 	const jsxTree = renderElement(spec.root, spec, 0, assetComponents, /* @__PURE__ */ new Set());
 	if (options?.omitImports) return {
 		jsx: jsxTree,