@yahoo/uds-create-config 4.6.0 → 4.8.0

package/dist/spec/detach.js

@@ -0,0 +1,511 @@
+import { isRef, kindOf, pathOf, refLeaf } from "../framework/utils/refs.js";
+import { rootLayerOf } from "../entities/system/element.js";
+import { declaredPropDefaults } from "../framework/projections.js";
+import { isPreviewElement } from "./preview-elements.js";
+import { entryKeyOf, resolveVisibility, slotTargetsOf } from "../framework/render-spec.js";
+import { Component } from "../entities/system/Component.js";
+//#region src/spec/detach.ts
+/**
+* Detaching a placed instance: the layer that renders a component becomes that component's anatomy,
+* inlined as the edited component's own layers and baked at the instance's props.
+*
+* An instance shows its component under the props the node sets. Detaching keeps what it showed and
+* gives the person the layers to restyle: each source node that renders under those props becomes a
+* node here, its layer's element kept, the style rules that held folded into the node's props, a
+* gate the props decide resolved away, a forwarded value written where it landed, and the content
+* the instance held moved under the layer its slot routed to. What the instance's props no longer
+* decide is gone with the instance; a gate on a runtime state stays.
+*/
+function bodyOf(config, path) {
+	return config.resolve("component", path)?.body;
+}
+/** The layer a node renders, or `undefined` for a node that renders something else (a `Slot`). */
+function layerOf(element) {
+	return isRef(element) && kindOf(element.__ref) === "layer" ? pathOf(element.__ref) : void 0;
+}
+/** The anatomy a component stores, or the one node a component without one is. */
+function anatomyOf(body) {
+	if (body.anatomy && Object.keys(body.anatomy).length > 0) return body.anatomy;
+	const [root] = rootLayerOf(body.layers ?? {});
+	return { root: { element: { __ref: `layer:${root}` } } };
+}
+/** Whether a rule's condition holds under a prop bag, a ref compared by its leaf. */
+function ruleHolds(when, state) {
+	if (!when) return true;
+	return Object.entries(when).every(([prop, value]) => String(refLeaf(state[prop])) === String(refLeaf(value)));
+}
+/** The rules in the order their bags apply: the unconditional ones, then by how many props a
+*  condition pins, so a narrower rule writes over a wider one the way the stylesheet cascades them. */
+function orderedRules(styles) {
+	return Object.values(styles ?? {}).sort((a, b) => Object.keys(a.when ?? {}).length - Object.keys(b.when ?? {}).length);
+}
+/** The prop a forward lands its value under on the target layer. */
+function intoName(into) {
+	if (typeof into === "string") return into.split("/").pop() ?? into;
+	if (isRef(into)) return into.__ref.split("#props/").pop() ?? "children";
+	return "children";
+}
+/** A layer key no layer of the component holds yet: `base` itself, else `base` numbered from 2. */
+function freeLayerKey(layers, base) {
+	if (!(base in layers)) return base;
+	let n = 2;
+	while (`${base}${n}` in layers) n += 1;
+	return `${base}${n}`;
+}
+/** A layer key spelled after a component: its leaf, lower-cased at the front (`Badge` → `badge`). */
+function layerKeyFor(componentPath) {
+	const leaf = componentPath.split("/").pop() ?? componentPath;
+	return `${leaf.charAt(0).toLowerCase()}${leaf.slice(1)}`;
+}
+/** The scalar props of a preview element, which is what an anatomy node's props hold. */
+function scalarProps(props) {
+	const out = {};
+	for (const [name, value] of Object.entries(props ?? {})) if (typeof value === "string" || typeof value === "number" || typeof value === "boolean") out[name] = value;
+	return out;
+}
+/**
+* Preview elements as subtree nodes, keyed under `prefix` so they join the baked subtree without
+* colliding with the source's node names. A child that is itself a component stays an instance
+* node; only the element being detached is baked.
+*/
+function previewNodes(elements, prefix, into) {
+	return elements.map((element, index) => {
+		const key = `${prefix}${index}`;
+		const node = {
+			element: element.element,
+			...element.text !== void 0 ? { text: element.text } : {}
+		};
+		const props = scalarProps(element.props);
+		if (Object.keys(props).length > 0) node.props = props;
+		into.set(key, node);
+		const children = previewNodes(element.children ?? [], `${key}_`, into);
+		if (children.length > 0) node.children = children;
+		for (const [prop, value] of Object.entries(element.props ?? {})) {
+			if (!isPreviewElement(value)) continue;
+			const [held] = previewNodes([value], `${key}_${prop}_`, into);
+			if (held) node.children = [...node.children ?? [], held];
+		}
+		return key;
+	});
+}
+/**
+* The instance's component's anatomy under the instance's props: each source node that renders
+* under those props, its layer's element kept, the style rules that held folded into its props, a
+* gate the props decide resolved away, a forwarded value or text written where it landed, and a
+* drilled override kept on its layer. `null` when the component stores nothing or its entry node
+* does not render.
+*/
+function bakeInstance({ config, source, instanceProps, layerProps, filled }) {
+	const sourcePath = pathOf(source);
+	const owner = config.configFor(source) ?? config;
+	const sourceBody = bodyOf(owner, sourcePath);
+	if (!sourceBody) return null;
+	const sourceLayers = sourceBody.layers ?? {};
+	const sourceAnatomy = anatomyOf(sourceBody);
+	const state = {
+		...declaredPropDefaults(sourceBody.props),
+		...sourceBody.defaultProps ?? {},
+		...instanceProps
+	};
+	for (const from of filled) if (state[from] === void 0) state[from] = true;
+	const kept = /* @__PURE__ */ new Map();
+	for (const [key, sourceNode] of Object.entries(sourceAnatomy)) {
+		const shown = resolveVisibility(sourceNode.visible, state);
+		if (shown === false) continue;
+		const sourceLayer = layerOf(sourceNode.element);
+		if (sourceLayer === void 0) continue;
+		kept.set(key, {
+			element: sourceLayers[sourceLayer] ?? "div",
+			...sourceNode.props ? { props: { ...sourceNode.props } } : {},
+			...shown === void 0 && sourceNode.visible !== void 0 ? { visible: sourceNode.visible } : {},
+			...sourceNode.text !== void 0 ? { text: sourceNode.text } : {}
+		});
+	}
+	for (const [key, sourceNode] of Object.entries(sourceAnatomy)) {
+		const inserted = kept.get(key);
+		if (!inserted) continue;
+		const children = (sourceNode.children ?? []).filter((child) => kept.has(child));
+		if (children.length > 0) inserted.children = children;
+	}
+	const keyOfLayer = (sourceLayer) => {
+		for (const [key, sourceNode] of Object.entries(sourceAnatomy)) if (layerOf(sourceNode.element) === sourceLayer && kept.has(key)) return key;
+	};
+	const nodeOfLayer = (sourceLayer) => {
+		const key = keyOfLayer(sourceLayer);
+		return key === void 0 ? void 0 : kept.get(key);
+	};
+	const setProp = (target, name, value) => {
+		target.props = {
+			...target.props,
+			[name]: value
+		};
+	};
+	for (const rule of orderedRules(sourceBody.styles)) {
+		if (!ruleHolds(rule.when, state)) continue;
+		for (const [sourceLayer, bag] of Object.entries(rule.layers ?? {})) {
+			const target = nodeOfLayer(sourceLayer);
+			if (!target) continue;
+			for (const [name, value] of Object.entries(bag)) setProp(target, name, value);
+		}
+	}
+	const [sourceRoot] = rootLayerOf(sourceLayers);
+	const routes = slotTargetsOf(owner, sourcePath);
+	const declared = sourceBody.props ?? {};
+	for (const [name, value] of Object.entries(instanceProps)) {
+		if (value === void 0) continue;
+		const decl = declared[name];
+		const scalar = typeof value === "string" || typeof value === "number" || typeof value === "boolean";
+		if (decl?.type === "forward" && isRef(decl.target) && scalar) {
+			const target = nodeOfLayer(pathOf(decl.target.__ref));
+			const into = intoName(decl.into);
+			if (!target) continue;
+			if (into === "children") target.text = String(value);
+			else setProp(target, into, value);
+			continue;
+		}
+		if (decl?.type === "slot" && typeof value === "string") {
+			const target = nodeOfLayer(routes.find((r) => r.from === name)?.layer ?? sourceRoot);
+			if (target) target.text = value;
+			continue;
+		}
+		if (decl === void 0 || decl.type === "styleProperty") {
+			const target = nodeOfLayer(sourceRoot);
+			if (target && scalar) setProp(target, name, value);
+		}
+	}
+	for (const [sourceLayer, bag] of Object.entries(layerProps)) {
+		const target = nodeOfLayer(sourceLayer);
+		if (!target) continue;
+		for (const [name, value] of Object.entries(bag)) if (value !== void 0 && value !== null) setProp(target, name, value);
+	}
+	const entry = entryKeyOf(sourceAnatomy);
+	if (!kept.has(entry)) return null;
+	return {
+		entry,
+		nodes: kept,
+		keyOfLayer,
+		routes,
+		sourceRoot
+	};
+}
+/**
+* The edits that detach the instance the layer `layer` of `path` renders: one `element-insert` of
+* the instance's component's anatomy under the instance's parent at its index, a move for each
+* element the instance held in a slot, and the instance's deletion last. `null` when the layer
+* renders no component, or nothing places it.
+*/
+function detachInstanceEdit({ config, path, layer }) {
+	const body = bodyOf(config, path);
+	if (!body) return null;
+	const layers = body.layers ?? {};
+	const element = layers[layer];
+	if (!isRef(element) || kindOf(element.__ref) !== "component") return null;
+	const anatomy = anatomyOf(body);
+	const node = anatomy[layer];
+	if (!node) return null;
+	let placed;
+	for (const [parentKey, parent] of Object.entries(anatomy)) {
+		const index = parent.children?.indexOf(layer) ?? -1;
+		if (index >= 0) {
+			placed = {
+				parent: parentKey,
+				index
+			};
+			break;
+		}
+		for (const [slotProp, fills] of Object.entries(parent.slots ?? {})) {
+			const at = fills.indexOf(layer);
+			if (at >= 0) {
+				placed = {
+					parent: parentKey,
+					index: at,
+					slotProp
+				};
+				break;
+			}
+		}
+		if (placed) break;
+	}
+	if (!placed) return null;
+	const instanceProps = { ...node.props ?? {} };
+	const layerProps = instanceProps.layerProps ?? {};
+	delete instanceProps.layerProps;
+	const filled = /* @__PURE__ */ new Set();
+	for (const [from, fills] of Object.entries(node.slots ?? {})) if (fills.length > 0) filled.add(from);
+	if (node.children?.length) filled.add("children");
+	const baked = bakeInstance({
+		config,
+		source: element.__ref,
+		instanceProps,
+		layerProps,
+		filled
+	});
+	if (!baked) return null;
+	const { entry, nodes: kept, keyOfLayer, routes, sourceRoot } = baked;
+	const newKey = freeLayerKey(layers, layer);
+	const grafted = (local) => local === entry ? newKey : `${newKey}__${local}`;
+	const edits = [{
+		kind: "component",
+		operation: "element-insert",
+		path,
+		key: newKey,
+		data: {
+			parent: placed.parent,
+			index: placed.index,
+			...placed.slotProp ? { slotProp: placed.slotProp } : {},
+			subtree: {
+				root: entry,
+				elements: Object.fromEntries(kept)
+			}
+		}
+	}];
+	const moveTo = (fills, from) => {
+		const local = keyOfLayer(routes.find((r) => r.from === from)?.layer ?? sourceRoot) ?? entry;
+		for (const fill of fills) edits.push({
+			kind: "component",
+			operation: "element-move",
+			path,
+			key: fill,
+			data: { parent: grafted(local) }
+		});
+	};
+	moveTo(node.children ?? [], "children");
+	for (const [from, fills] of Object.entries(node.slots ?? {})) moveTo(fills, from);
+	edits.push({
+		kind: "component",
+		operation: "element-delete",
+		path,
+		key: layer
+	});
+	return edits;
+}
+/**
+* The edits that detach one element of a slot's content: the element the address names in the
+* content the cell shows becomes anatomy under the layer its slot routes to, baked at the props
+* the element sets, and the content loses it. Its own children and the elements it hands to its
+* slots come along as instance nodes under the layers the element's component routes them to.
+* `null` for an address inside another element, or one naming no component.
+*/
+function detachContentEdit({ config, path, cell, address }) {
+	const body = bodyOf(config, path);
+	if (!body) return null;
+	const slot = Component.cell({
+		config,
+		path,
+		cell
+	}).slot(address.prop);
+	const held = slot?.content[address.index];
+	const element = held ? elementAt(held, address.path) : void 0;
+	if (!slot || !element) return null;
+	if (!isRef(element.element) || kindOf(element.element.__ref) !== "component") return null;
+	if (address.path.length > 0) {
+		if (detachContentRefusal({
+			config,
+			path,
+			cell,
+			address
+		})) return null;
+		const baked = detachedPreviewElement({
+			config,
+			source: element.element.__ref,
+			element
+		});
+		return baked ? slot.replaceAt({
+			address,
+			element: baked
+		}) : null;
+	}
+	const anatomy = anatomyOf(body);
+	const hostKey = Object.keys(anatomy).find((key) => layerOf(anatomy[key]?.element) === slot.layer);
+	if (!hostKey) return null;
+	const instanceProps = scalarProps(element.props);
+	if (element.text !== void 0) instanceProps.children = element.text;
+	const filled = /* @__PURE__ */ new Set();
+	if (element.children?.length) filled.add("children");
+	for (const [prop, value] of Object.entries(element.props ?? {})) if (isPreviewElement(value)) filled.add(prop);
+	const baked = bakeInstance({
+		config,
+		source: element.element.__ref,
+		instanceProps,
+		layerProps: {},
+		filled
+	});
+	if (!baked) return null;
+	const { entry, nodes, keyOfLayer, routes, sourceRoot } = baked;
+	const attach = (held, from) => {
+		if (held.length === 0) return;
+		const local = keyOfLayer(routes.find((r) => r.from === from)?.layer ?? sourceRoot) ?? entry;
+		const target = nodes.get(local);
+		if (!target) return;
+		const keys = previewNodes(held, `${from}_`, nodes);
+		target.children = [...target.children ?? [], ...keys];
+	};
+	attach(element.children ?? [], "children");
+	for (const [prop, value] of Object.entries(element.props ?? {})) if (isPreviewElement(value)) attach([value], prop);
+	return [{
+		kind: "component",
+		operation: "element-insert",
+		path,
+		key: freeLayerKey(body.layers ?? {}, layerKeyFor(pathOf(element.element.__ref))),
+		data: {
+			parent: hostKey,
+			index: anatomy[hostKey]?.children?.length ?? 0,
+			subtree: {
+				root: entry,
+				elements: Object.fromEntries(nodes)
+			}
+		}
+	}, ...slot.removeAt(address)];
+}
+/**
+* The anatomy an instance of `source` renders under `props`, as the elements a page document
+* stores: the layer's element as the spec `type` (a component as its `component:` marker), the baked
+* bag and any text as props, the kept edges as children. What a design-canvas Detach splices in
+* place of the instance; the content the instance held goes under `slotHosts[<prop>]`.
+*/
+function detachedElementSpec({ config, source, props, filled = /* @__PURE__ */ new Set() }) {
+	const instanceProps = { ...props };
+	const layerProps = instanceProps.layerProps ?? {};
+	delete instanceProps.layerProps;
+	const baked = bakeInstance({
+		config,
+		source,
+		instanceProps,
+		layerProps,
+		filled
+	});
+	if (!baked) return null;
+	const elements = {};
+	for (const [key, node] of baked.nodes) {
+		const bag = { ...node.props };
+		if (node.text !== void 0) bag.children = node.text;
+		elements[key] = {
+			type: isRef(node.element) ? node.element.__ref : String(node.element),
+			...Object.keys(bag).length > 0 ? { props: bag } : {},
+			...node.children?.length ? { children: [...node.children] } : {}
+		};
+	}
+	const slotHosts = {};
+	for (const route of baked.routes) slotHosts[route.from] = baked.keyOfLayer(route.layer) ?? baked.entry;
+	if (slotHosts.children === void 0) slotHosts.children = baked.keyOfLayer(baked.sourceRoot) ?? baked.entry;
+	return {
+		root: baked.entry,
+		elements,
+		slotHosts
+	};
+}
+/** The element an address's path reaches inside `root`: a number steps into a child, a string into an
+*  element-valued prop. */
+function elementAt(root, steps) {
+	let current = root;
+	for (const step of steps) {
+		if (!current) return void 0;
+		const next = typeof step === "number" ? current.children?.[step] : current.props?.[step];
+		current = isPreviewElement(next) ? next : void 0;
+	}
+	return current;
+}
+/**
+* A preview element that renders a component, as the tree its component is made of, baked at the
+* props the element sets: each kept source node becomes an element (a component as its ref, a tag
+* as itself), the baked bag as its props, its text as text, its edges as children. The children
+* and element-valued props the original held ride along under the elements the component routes
+* them to. `null` when the component stores nothing.
+*/
+function detachedPreviewElement({ config, source, element }) {
+	const instanceProps = scalarProps(element.props);
+	if (element.text !== void 0) instanceProps.children = element.text;
+	const filled = /* @__PURE__ */ new Set();
+	if (element.children?.length) filled.add("children");
+	for (const [prop, value] of Object.entries(element.props ?? {})) if (isPreviewElement(value)) filled.add(prop);
+	const baked = bakeInstance({
+		config,
+		source,
+		instanceProps,
+		layerProps: {},
+		filled
+	});
+	if (!baked) return null;
+	const built = /* @__PURE__ */ new Map();
+	const build = (key) => {
+		const hit = built.get(key);
+		if (hit) return hit;
+		const node = baked.nodes.get(key);
+		if (!node) return void 0;
+		const out = { element: isRef(node.element) ? { __ref: node.element.__ref } : String(node.element) };
+		const props = {};
+		for (const [name, value] of Object.entries(node.props ?? {})) if (typeof value === "string" || typeof value === "number" || typeof value === "boolean" || isPreviewElement(value) || isRef(value)) props[name] = value;
+		if (Object.keys(props).length > 0) out.props = props;
+		if (node.text !== void 0) out.text = node.text;
+		const children = (node.children ?? []).map(build).filter((child) => child !== void 0);
+		if (children.length > 0) out.children = children;
+		built.set(key, out);
+		return out;
+	};
+	const root = build(baked.entry);
+	if (!root) return null;
+	const attach = (held, from) => {
+		if (held.length === 0) return;
+		const route = baked.routes.find((r) => r.from === from);
+		const local = baked.keyOfLayer(route?.layer ?? baked.sourceRoot) ?? baked.entry;
+		const target = built.get(local);
+		if (!target) return;
+		target.children = [...target.children ?? [], ...held];
+	};
+	attach(element.children ?? [], "children");
+	for (const [prop, value] of Object.entries(element.props ?? {})) if (isPreviewElement(value)) attach([value], prop);
+	return root;
+}
+/** The root element a detached instance of `source` would render, under `props`. */
+function detachedRootElement({ config, source, props }) {
+	const baked = bakeInstance({
+		config,
+		source,
+		instanceProps: props,
+		layerProps: {},
+		filled: /* @__PURE__ */ new Set()
+	});
+	const root = baked?.nodes.get(baked.entry)?.element;
+	if (typeof root === "string") return root;
+	return isRef(root) ? root : void 0;
+}
+/**
+* Why the element an address names inside another element cannot detach in place: the slot of the
+* parent's component that holds it refuses what the element becomes. `null` when it can, or when
+* the address is not inside another element.
+*/
+function detachContentRefusal({ config, path, cell, address }) {
+	if (address.path.length === 0) return null;
+	const held = Component.cell({
+		config,
+		path,
+		cell
+	}).slot(address.prop)?.content[address.index];
+	if (!held) return null;
+	const parentSteps = address.path.slice(0, -1);
+	const last = address.path[address.path.length - 1];
+	const parent = elementAt(held, parentSteps);
+	const element = parent ? elementAt(parent, [last]) : void 0;
+	if (!parent || !element) return null;
+	if (!isRef(parent.element) || kindOf(parent.element.__ref) !== "component") return null;
+	if (!isRef(element.element) || kindOf(element.element.__ref) !== "component") return null;
+	const slot = Component.slot({
+		config,
+		path: pathOf(parent.element.__ref),
+		slot: typeof last === "number" ? "children" : last
+	});
+	if (!slot) return null;
+	const props = scalarProps(element.props);
+	const becomes = detachedRootElement({
+		config,
+		source: element.element.__ref,
+		props
+	});
+	if (becomes === void 0 || slot.takes(becomes)) return null;
+	return {
+		slot,
+		becomes
+	};
+}
+//#endregion
+export { detachContentEdit, detachContentRefusal, detachInstanceEdit, detachedElementSpec, detachedPreviewElement, detachedRootElement };

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

@@ -1,34 +1,22 @@
 import { Config } from "../framework/Config.js";
-import { SlotTarget } from "../framework/render-spec.js";
 import { Spec } from "@json-render/core";
 
 //#region src/spec/empty-node-slots.d.ts
-/**
- * The component's named node slots — `slotTargetsOf` minus text slots and
- * minus `children`. `children` is the open content hole every container has
- * (a structural insert, not a named fill), and a text slot is an inline-edit
- * surface, not a place a node goes.
- *
- * Text-ness is checked on BOTH ends of the route: the component's own decl
- * (`title: { type: 'slot', text: true }`) and the prop the route lands on — a
- * `forward` into `Text#children` is typed in place, not filled with a dropped
- * node, and only the far end says so. A route whose host component doesn't
- * declare the landing prop is dropped too: the fill op would refuse it, so it
- * must never be offered as a target.
- */
-declare function namedSlotTargets(config: Config, componentPath: string): SlotTarget[];
 /**
  * Materialize every EMPTY layer-bound node slot of `spec`'s root as a `Slot`
  * element named in the root's `slots` record, so an unfilled slot is a stable
  * element in the spec rather than an absent entry — 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).
+ * Slots the spec already fills are left as-is, whether the fill is a `slots`
+ * entry or a value authored on the prop itself (a string title). Rendering
+ * routes a `slots` entry onto the prop it names, so a placeholder injected over
+ * an authored value would replace it for as long as the placeholder is there.
+ * Returns `spec` unchanged when there's nothing to inject (no node slots, or
+ * all of them filled).
  *
- * `slotNames` is the component's named node slots — {@link namedSlotTargets}'
- * `from` names. Callers pass names rather than a props record because which
- * props are node slots is route-dependent (a `forward` into a text prop is
- * not one), and only the config can answer that.
+ * `slotNames` is the component's named node slots — `Slot.named`'s `from` names. Callers pass
+ * names rather than a props record because which props are node slots is route-dependent (a
+ * `forward` into a text prop is not one), and only the config can answer that.
  */
 declare function withEmptyNodeSlots(spec: Spec, slotNames: readonly string[]): Spec;
 /**
@@ -84,7 +72,7 @@ declare function withContainerChildSlots(spec: Spec, acceptsChildNodes: AcceptsC
 /**
  * Compose both slot injections into the canvas's render view: layer-bound node
  * slots on a component instance's root (`withEmptyNodeSlots`, keyed by the
- * component's `namedSlotTargets`) plus a trailing insertion `Slot` in every container,
+ * component's `Slot.named`) 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
@@ -111,4 +99,4 @@ declare function withRenderSlots(spec: Spec, slotNames: readonly string[] | null
  */
 declare function stripInjectedSlots(spec: Spec): Spec;
 //#endregion
-export { AcceptsChildNodes, ChildNodesClassification, ClassifyChildNodes, buildAcceptsChildNodes, buildClassifyChildNodes, namedSlotTargets, stripInjectedSlots, withContainerChildSlots, withEmptyNodeSlots, withRenderSlots };
+export { AcceptsChildNodes, ChildNodesClassification, ClassifyChildNodes, buildAcceptsChildNodes, buildClassifyChildNodes, stripInjectedSlots, withContainerChildSlots, withEmptyNodeSlots, withRenderSlots };

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

@@ -1,50 +1,22 @@
-import { pathOf } from "../framework/utils/refs.js";
 import { childrenPolicy } from "../entities/system/element.js";
-import { resolveComponentProps } from "../framework/projections.js";
-import { slotTargetsOf } from "../framework/render-spec.js";
 import { Component } from "../entities/system/Component.js";
 //#region src/spec/empty-node-slots.ts
 const SLOT_TYPE = "Slot";
 /**
-* The component's named node slots — `slotTargetsOf` minus text slots and
-* minus `children`. `children` is the open content hole every container has
-* (a structural insert, not a named fill), and a text slot is an inline-edit
-* surface, not a place a node goes.
-*
-* Text-ness is checked on BOTH ends of the route: the component's own decl
-* (`title: { type: 'slot', text: true }`) and the prop the route lands on — a
-* `forward` into `Text#children` is typed in place, not filled with a dropped
-* node, and only the far end says so. A route whose host component doesn't
-* declare the landing prop is dropped too: the fill op would refuse it, so it
-* must never be offered as a target.
-*/
-function namedSlotTargets(config, componentPath) {
-	const component = Component.get(config, componentPath);
-	const props = component?.props;
-	const layers = component?.layers;
-	return slotTargetsOf(config, componentPath).filter((target) => {
-		if (target.from === "children") return false;
-		const declared = props?.[target.from];
-		if (declared?.type === "slot" && declared.text === true) return false;
-		const hostRef = layers?.[target.layer];
-		if (!hostRef || !Component.get(config, hostRef)) return true;
-		const into = resolveComponentProps(config.configFor(hostRef) ?? config, pathOf(hostRef))[target.into];
-		if (!into) return false;
-		return !(into.type === "slot" && into.text === true);
-	});
-}
-/**
 * Materialize every EMPTY layer-bound node slot of `spec`'s root as a `Slot`
 * element named in the root's `slots` record, so an unfilled slot is a stable
 * element in the spec rather than an absent entry — 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).
+* Slots the spec already fills are left as-is, whether the fill is a `slots`
+* entry or a value authored on the prop itself (a string title). Rendering
+* routes a `slots` entry onto the prop it names, so a placeholder injected over
+* an authored value would replace it for as long as the placeholder is there.
+* Returns `spec` unchanged when there's nothing to inject (no node slots, or
+* all of them filled).
 *
-* `slotNames` is the component's named node slots — {@link namedSlotTargets}'
-* `from` names. Callers pass names rather than a props record because which
-* props are node slots is route-dependent (a `forward` into a text prop is
-* not one), and only the config can answer that.
+* `slotNames` is the component's named node slots — `Slot.named`'s `from` names. Callers pass
+* names rather than a props record because which props are node slots is route-dependent (a
+* `forward` into a text prop is not one), and only the config can answer that.
 */
 function withEmptyNodeSlots(spec, slotNames) {
 	const names = slotNames;
@@ -57,6 +29,7 @@ function withEmptyNodeSlots(spec, slotNames) {
 	let injected = false;
 	for (const name of names) {
 		if (root.slots?.[name] !== void 0) continue;
+		if (root.props?.[name] !== void 0) continue;
 		const key = `${rootKey}__${name}__slot`;
 		elements[key] = {
 			type: SLOT_TYPE,
@@ -143,7 +116,7 @@ function withContainerChildSlots(spec, acceptsChildNodes) {
 /**
 * Compose both slot injections into the canvas's render view: layer-bound node
 * slots on a component instance's root (`withEmptyNodeSlots`, keyed by the
-* component's `namedSlotTargets`) plus a trailing insertion `Slot` in every container,
+* component's `Slot.named`) 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
@@ -192,4 +165,4 @@ function stripInjectedSlots(spec) {
 	return next;
 }
 //#endregion
-export { buildAcceptsChildNodes, buildClassifyChildNodes, namedSlotTargets, stripInjectedSlots, withContainerChildSlots, withEmptyNodeSlots, withRenderSlots };
+export { buildAcceptsChildNodes, buildClassifyChildNodes, stripInjectedSlots, withContainerChildSlots, withEmptyNodeSlots, withRenderSlots };

package/dist/spec/index.d.ts

@@ -1,7 +1,9 @@
-import { AcceptsChildNodes, ChildNodesClassification, ClassifyChildNodes, buildAcceptsChildNodes, buildClassifyChildNodes, namedSlotTargets, stripInjectedSlots, withContainerChildSlots, withEmptyNodeSlots, withRenderSlots } from "./empty-node-slots.js";
-import { GraftableElement, GraftableSpec, PreviewElement, PreviewSpecNode, PreviewValue, graftPreviewElements, hasPreviewElementDeep, isPreviewElement, previewElementNodes, previewElementType } from "./preview-elements.js";
+import { GraftableElement, GraftableSpec, PreviewElement, PreviewRef, PreviewSpecNode, PreviewValue, graftPreviewElements, graftSlotContent, hasPreviewElementDeep, isComponentRef, isPreviewElement, isPreviewRef, previewElementNodes, previewElementType } from "./preview-elements.js";
+import { Slot, SlotCell } from "./slot.js";
+import { Cell, CellSlot } from "./cell.js";
 import { DocumentRename, RewritableSpec, SpecRewrite, documentRenamesFromPatches, rewriteSpecRefs } from "./rewrite-refs.js";
 import { applyForcedModifiers, collectForcedModifierProps } from "./apply-forced-modifiers.js";
+import { AcceptsChildNodes, ChildNodesClassification, ClassifyChildNodes, buildAcceptsChildNodes, buildClassifyChildNodes, stripInjectedSlots, withContainerChildSlots, withEmptyNodeSlots, withRenderSlots } from "./empty-node-slots.js";
 import { AssetComponentMap, AssetJsxForm, AssetNodeResolver, assetJsxForm, jsxIdentifier, parseAssetType } from "./asset-jsx.js";
 import { CollapseTextLabelsResult, CollapsedTextLabel, collapseWrappedTextLabels } from "./collapse-text-labels.js";
 import { JsxToSpecOptions, UNRESOLVED, hasUnresolvedProps, jsxToSpec, stripUnresolvedProps } from "./jsxToSpec.js";
@@ -26,4 +28,4 @@ import { SpecToJsxOptions, SpecToJsxResult, specToJsx } from "./specToJsx.js";
  *  element, without changing the rendered layer hierarchy. */
 declare const SYNTHETIC_TEXT_SLOT_PROP = "data-uds-synthetic-text-slot";
 //#endregion
-export { type AcceptsChildNodes, type AssetComponentMap, type AssetJsxForm, type AssetNodeResolver, type ChildNodesClassification, type ClassifyChildNodes, type CollapseTextLabelsResult, type CollapsedTextLabel, type DocumentRename, type GraftableElement, type GraftableSpec, type JsxToSpecOptions, type PreviewElement, type PreviewSpecNode, type PreviewValue, type RewritableSpec, SYNTHETIC_TEXT_SLOT_PROP, type SpecRewrite, type SpecToJsxOptions, type SpecToJsxResult, UNRESOLVED, applyForcedModifiers, assetJsxForm, buildAcceptsChildNodes, buildClassifyChildNodes, collapseWrappedTextLabels, collectForcedModifierProps, documentRenamesFromPatches, graftPreviewElements, hasPreviewElementDeep, hasUnresolvedProps, isPreviewElement, jsxIdentifier, jsxToSpec, namedSlotTargets, parseAssetType, previewElementNodes, previewElementType, rewriteSpecRefs, specToJsx, stripInjectedSlots, stripUnresolvedProps, withContainerChildSlots, withEmptyNodeSlots, withRenderSlots };
+export { type AcceptsChildNodes, type AssetComponentMap, type AssetJsxForm, type AssetNodeResolver, type Cell, type CellSlot, type ChildNodesClassification, type ClassifyChildNodes, type CollapseTextLabelsResult, type CollapsedTextLabel, type DocumentRename, type GraftableElement, type GraftableSpec, type JsxToSpecOptions, type PreviewElement, type PreviewRef, type PreviewSpecNode, type PreviewValue, type RewritableSpec, SYNTHETIC_TEXT_SLOT_PROP, type Slot, type SlotCell, type SpecRewrite, type SpecToJsxOptions, type SpecToJsxResult, UNRESOLVED, applyForcedModifiers, assetJsxForm, buildAcceptsChildNodes, buildClassifyChildNodes, collapseWrappedTextLabels, collectForcedModifierProps, documentRenamesFromPatches, graftPreviewElements, graftSlotContent, hasPreviewElementDeep, hasUnresolvedProps, isComponentRef, isPreviewElement, isPreviewRef, jsxIdentifier, jsxToSpec, parseAssetType, previewElementNodes, previewElementType, rewriteSpecRefs, specToJsx, stripInjectedSlots, stripUnresolvedProps, withContainerChildSlots, withEmptyNodeSlots, withRenderSlots };