@yahoo/uds-create-config 2.44.0 → 3.0.0

package/dist/renderer/spec-content.js

@@ -0,0 +1,95 @@
+import React from "react";
+//#region src/renderer/spec-content.tsx
+/**
+* An injected drop-target `Slot` placeholder (`withContainerChildSlots` /
+* `withEmptyNodeSlots` in `../spec/empty-node-slots.ts`) arrives here as a
+* rendered json-render element wrapper whose spec element is `Slot`-typed —
+* the same `props.element.type` detection child-enumerating render fns use.
+* It is editing scaffolding (a canvas insertion affordance), not content.
+*/
+/**
+* A child that is PRESENT in the spec but paints nothing.
+*
+* Two shapes, one category. A `Slot` is the trailing drop target every node container gets injected.
+* A `visible: false` element is one expansion deliberately keeps rather than drops — "json-render
+* tests `visible` before it looks the type up, so a false node draws nothing and every key a parent
+* names still exists" — which is right for the spec and wrong for this question.
+*
+* Both must be invisible HERE too, or a container holding only these looks occupied and swallows its
+* own label. That is not hypothetical: every `Button` cell in the matrix rendered blank, because the
+* root lists `startIcon`/`endIcon` as children and an unset icon is exactly a `visible: false` node.
+* The compiled module never hits this — `{startIcon && <Box/>}` emits nothing at all when unset — so
+* it only ever shows on the anatomy path.
+*/
+function rendersNothing(child) {
+	const element = specElementOf(child);
+	return element?.type === "Slot" || element?.visible === false;
+}
+/** The spec element a rendered child wraps: json-render's `ElementRenderer` carries it on
+*  `props.element`. Undefined for anything else in the children stream. */
+function specElementOf(child) {
+	if (!React.isValidElement(child)) return void 0;
+	return child.props.element;
+}
+/**
+* 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.
+*/
+const REVEALED_LAYER_ATTR = "data-uds-ghost";
+/** A child an editor revealed for selection. It paints, but it is not the cell's content. */
+function isRevealed(child) {
+	return specElementOf(child)?.props?.[REVEALED_LAYER_ATTR] !== void 0;
+}
+/**
+* The child that IS the component's content slot — the anatomy's content-position
+* node, which `deriveSpec` projects stamped
+* `data-uds-slot-anatomy`. Its index is where the render interleaves the
+* instance's content, which is the one fact a string `children` label needs:
+* the label splices there, exactly where the compiled module's own JSX puts it.
+*/
+function slotAnatomyIndex(children) {
+	return children.findIndex((child) => typeof specElementOf(child)?.props?.["data-uds-slot-anatomy"] === "string");
+}
+/**
+* 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.
+*/
+function specContent({ children, propChildren }) {
+	const childArray = React.Children.toArray(children);
+	const slotAt = slotAnatomyIndex(childArray);
+	if (childArray.some((c) => !rendersNothing(c) && (slotAt >= 0 || !isRevealed(c)))) {
+		if (slotAt >= 0 && propChildren != null) return [
+			...childArray.slice(0, slotAt),
+			propChildren,
+			...childArray.slice(slotAt)
+		];
+		return children;
+	}
+	if (propChildren != null && childArray.length > 0) return [propChildren, ...childArray];
+	if (childArray.length > 0) return children;
+	return propChildren;
+}
+//#endregion
+export { REVEALED_LAYER_ATTR, specContent };

package/dist/renderer/wrapRegistry.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
+import { StylePropClassMap } from "./wrappers/html-aliases.js";
 import { ComponentRegistry } from "@json-render/react";
 
 //#region src/renderer/wrapRegistry.d.ts
@@ -10,31 +10,27 @@ import { ComponentRegistry } from "@json-render/react";
  * component or style-prop names. Every field is optional; an omitted/empty
  * descriptor makes the dependent wrapper a no-op (e.g. a host registry that
  * supplies its own components without a descriptor).
+ *
+ * Per-component facts — whether children are stripped, which slots exist —
+ * live in each module's emitted entry (`makeComponentEntry`), not here. What
+ * remains is ingest normalization and the intrinsic fallback, which describe
+ * the CONFIG rather than any one component.
  */
 interface RegistryDescriptor {
-  /**
-   * Component names whose root renders a void HTML element (`img`, `input`,
-   * …). `wrapVoidElements` strips `children` from these — React throws if a
-   * void element gets children. Bare names; namespace prefixes are stripped
-   * at match time.
-   */
-  voidComponents?: readonly string[];
-  /**
-   * Component names that declare no `children` slot (`acceptsChildren ===
-   * false`). `wrapVoidElements` strips `children` from these too — the
-   * component's render has nowhere to put them and would otherwise forward
-   * them onto a nested void element (a `div`-rooted form control's `<input>`)
-   * and throw. Complements `voidComponents` (which keys on a void ROOT tag);
-   * the two sets overlap only harmlessly. Bare names; prefixes stripped at
-   * match time.
-   */
-  noChildrenComponents?: readonly string[];
   /**
    * camelCase CSS property → style-prop name, inverted from each
    * `StyleProp.cssProperty`. Lets `wrapInlineStyleProps` hoist a raw
    * `style: {...}` (Figma / AI import) onto typed style props.
    */
   cssPropertyToStyleProp?: Readonly<Record<string, string>>;
+  /**
+   * Style-prop name → declared value → its utility class. Lets `aliasHtmlTypes` turn a style prop
+   * into a class for an INTRINSIC tag, which has none of the resolution a component's own render
+   * does — so `<section bg="highlight">` becomes `<section class="…-bg-highlight">` instead of an
+   * inert attribute. Keyed by DECLARED value (the leaf a group-bound prop offers), because that is
+   * the only value a class was emitted for.
+   */
+  stylePropClasses?: StylePropClassMap;
   /**
    * Container primitives (root renders `div`): a fixed `height` from an
    * imported `style` becomes `minHeight` so content can still grow.
@@ -45,30 +41,19 @@ interface RegistryDescriptor {
    * an imported `style` is dropped — text shouldn't carry a bounding box.
    */
   textComponents?: readonly string[];
-  /**
-   * Component-typed slots (the aliased `Icon` pattern): componentName →
-   * propName → accepted asset-group slug. A `slot({ type: 'component' })
-   * .accepts(<icon group>)` saves the picked asset as an inline name string
-   * and its render fn expects the icon component itself, so
-   * `wrapComponentTypedSlots` resolves the name to the member component (paired
-   * with the runtime `assetMembersBySlug` lookup). Absent for components
-   * without such slots.
-   */
-  componentSlots?: Readonly<Record<string, Readonly<Record<string, string>>>>;
 }
 /**
  * Apply the standard wrapper stack + built-in spec primitives to an
- * existing `ComponentRegistry`. Used by `makeRegistry` after it's
- * built per-component renderers from the project's components, AND
- * by `UdsRenderer` when a host provides a custom registry that needs
- * the same wrappers applied on top.
+ * existing `ComponentRegistry`. The emitted `react-registry` composes this
+ * over `defineRegistry(catalog, entries).registry`, AND `UdsRenderer`
+ * re-applies it when a host provides a custom registry that needs the same
+ * wrappers on top.
  *
  * `descriptor` carries the config-derived facts the config-dependent
- * wrappers (`void-elements`, `inline-styles`) need; omit it and those
- * wrappers pass through. Composition order mirrors the legacy inline
- * `wrapRegistry` — each wrapper assumes its outer wrappers haven't yet
- * seen the element.
+ * wrappers (`inline-styles`, `html-aliases`) need; omit it and those
+ * wrappers pass through. Composition order matters — each wrapper assumes
+ * its outer wrappers haven't yet seen the element.
  */
-declare function wrapRegistry(reg: ComponentRegistry, descriptor?: RegistryDescriptor, assetMembersBySlug?: ReadonlyMap<string, ReadonlyMap<string, React.ComponentType>>): ComponentRegistry;
+declare function wrapRegistry(reg: ComponentRegistry, descriptor?: RegistryDescriptor): ComponentRegistry;
 //#endregion
 export { RegistryDescriptor, wrapRegistry };

package/dist/renderer/wrapRegistry.js

@@ -1,42 +1,32 @@
 import { FragmentRenderer } from "./primitives/FragmentRenderer.js";
 import { SlotRenderer } from "./primitives/SlotRenderer.js";
-import { wrapComponentTypedSlots } from "./wrappers/component-slots.js";
 import { wrapEventBridge } from "./wrappers/event-bridge.js";
 import { wrapNormalizeHex } from "./wrappers/hex-normalize.js";
 import { aliasHtmlTypes } from "./wrappers/html-aliases.js";
 import { wrapInlineStyleProps } from "./wrappers/inline-styles.js";
-import { wrapSlotResolution } from "./wrappers/slot-resolution.js";
-import { wrapVoidElements } from "./wrappers/void-elements.js";
 //#region src/renderer/wrapRegistry.ts
 /**
 * Apply the standard wrapper stack + built-in spec primitives to an
-* existing `ComponentRegistry`. Used by `makeRegistry` after it's
-* built per-component renderers from the project's components, AND
-* by `UdsRenderer` when a host provides a custom registry that needs
-* the same wrappers applied on top.
+* existing `ComponentRegistry`. The emitted `react-registry` composes this
+* over `defineRegistry(catalog, entries).registry`, AND `UdsRenderer`
+* re-applies it when a host provides a custom registry that needs the same
+* wrappers on top.
 *
 * `descriptor` carries the config-derived facts the config-dependent
-* wrappers (`void-elements`, `inline-styles`) need; omit it and those
-* wrappers pass through. Composition order mirrors the legacy inline
-* `wrapRegistry` — each wrapper assumes its outer wrappers haven't yet
-* seen the element.
+* wrappers (`inline-styles`, `html-aliases`) need; omit it and those
+* wrappers pass through. Composition order matters — each wrapper assumes
+* its outer wrappers haven't yet seen the element.
 */
-function wrapRegistry(reg, descriptor, assetMembersBySlug) {
-	return aliasHtmlTypes(wrapInlineStyleProps(wrapNormalizeHex(wrapEventBridge(wrapComponentTypedSlots(wrapSlotResolution(wrapVoidElements({
+function wrapRegistry(reg, descriptor) {
+	return aliasHtmlTypes(wrapInlineStyleProps(wrapNormalizeHex(wrapEventBridge({
 		...reg,
 		Fragment: reg.Fragment ?? FragmentRenderer,
 		Slot: reg.Slot ?? SlotRenderer
-	}, {
-		voidComponents: descriptor?.voidComponents,
-		noChildrenComponents: descriptor?.noChildrenComponents
 	})), {
-		componentSlots: descriptor?.componentSlots,
-		assetMembersBySlug
-	}))), {
 		cssPropertyToStyleProp: descriptor?.cssPropertyToStyleProp,
 		layoutComponents: descriptor?.layoutComponents,
 		textComponents: descriptor?.textComponents
-	}));
+	}), descriptor?.stylePropClasses);
 }
 //#endregion
 export { wrapRegistry };

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

@@ -1,5 +1,5 @@
+import React from "react";
 import { useStateStore } from "@json-render/react";
-import { jsx } from "react/jsx-runtime";
 //#region src/renderer/wrappers/event-bridge.tsx
 /**
 * Map json-render `on.*` event bindings to React callback prop names.
@@ -37,11 +37,11 @@ const EVENT_TO_CALLBACKS = {
 */
 function wrapEventBridge(reg) {
 	const wrapped = { ...reg };
-	for (const [name, Comp] of Object.entries(reg)) wrapped[name] = function EventBridgeWrapper(renderProps) {
+	const makeEventBridgeWrapper = (Comp) => function EventBridgeWrapper(renderProps) {
 		const stateStore = useStateStore();
 		const { element, emit } = renderProps;
 		const on = element.on;
-		if (!on) return /* @__PURE__ */ jsx(Comp, { ...renderProps });
+		if (!on) return React.createElement(Comp, renderProps);
 		const callbackProps = {};
 		for (const [eventName, binding] of Object.entries(on)) {
 			const callbackNames = EVENT_TO_CALLBACKS[eventName];
@@ -59,7 +59,7 @@ function wrapEventBridge(reg) {
 			};
 			for (const cbName of callbackNames) callbackProps[cbName] = handler;
 		}
-		if (Object.keys(callbackProps).length === 0) return /* @__PURE__ */ jsx(Comp, { ...renderProps });
+		if (Object.keys(callbackProps).length === 0) return React.createElement(Comp, renderProps);
 		const patchedElement = {
 			...element,
 			props: {
@@ -67,11 +67,12 @@ function wrapEventBridge(reg) {
 				...callbackProps
 			}
 		};
-		return /* @__PURE__ */ jsx(Comp, {
+		return React.createElement(Comp, {
 			...renderProps,
 			element: patchedElement
 		});
 	};
+	for (const [name, Comp] of Object.entries(reg)) wrapped[name] = makeEventBridgeWrapper(Comp);
 	return wrapped;
 }
 //#endregion

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

@@ -1,4 +1,4 @@
-import { jsx } from "react/jsx-runtime";
+import React from "react";
 //#region src/renderer/wrappers/hex-normalize.tsx
 const RAW_HEX_RE = /^#[0-9a-fA-F]{3,8}$/;
 /**
@@ -11,17 +11,17 @@ const RAW_HEX_RE = /^#[0-9a-fA-F]{3,8}$/;
 */
 function wrapNormalizeHex(reg) {
 	const wrapped = { ...reg };
-	for (const [name, Comp] of Object.entries(reg)) wrapped[name] = function HexNormalizeWrapper(renderProps) {
+	const makeHexNormalizeWrapper = (Comp) => function HexNormalizeWrapper(renderProps) {
 		const props = renderProps.element.props;
-		if (!props) return /* @__PURE__ */ jsx(Comp, { ...renderProps });
+		if (!props) return React.createElement(Comp, renderProps);
 		let patched = false;
 		const newProps = { ...props };
 		for (const [propName, value] of Object.entries(newProps)) if (typeof value === "string" && RAW_HEX_RE.test(value)) {
 			newProps[propName] = `[${value}]`;
 			patched = true;
 		}
-		if (!patched) return /* @__PURE__ */ jsx(Comp, { ...renderProps });
-		return /* @__PURE__ */ jsx(Comp, {
+		if (!patched) return React.createElement(Comp, renderProps);
+		return React.createElement(Comp, {
 			...renderProps,
 			element: {
 				...renderProps.element,
@@ -29,6 +29,7 @@ function wrapNormalizeHex(reg) {
 			}
 		});
 	};
+	for (const [name, Comp] of Object.entries(reg)) wrapped[name] = makeHexNormalizeWrapper(Comp);
 	return wrapped;
 }
 //#endregion

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

@@ -19,6 +19,11 @@ import { ComponentRegistry } from "@json-render/react";
  * shape, which lazily caches intrinsic renderers on `target` as they're
  * accessed so repeated lookups return the same function reference.
  */
-declare function aliasHtmlTypes(reg: ComponentRegistry): ComponentRegistry;
+/**
+ * Style-prop name → declared value → the utility class that value wears. Emitted into
+ * `RegistryDescriptor` by codegen, so this wrapper names no style prop of its own.
+ */
+type StylePropClassMap = Readonly<Record<string, Readonly<Record<string, string>>>>;
+declare function aliasHtmlTypes(reg: ComponentRegistry, stylePropClasses?: StylePropClassMap): ComponentRegistry;
 //#endregion
-export { aliasHtmlTypes };
+export { StylePropClassMap, aliasHtmlTypes };

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

@@ -1,3 +1,4 @@
+import { specContent } from "../spec-content.js";
 import React from "react";
 //#region src/renderer/wrappers/html-aliases.tsx
 const INTRINSIC_TAG_RE = /^[a-z][a-zA-Z0-9-]*$/;
@@ -14,37 +15,52 @@ const FORBIDDEN_INTRINSIC_PROPS = new Set(["dangerouslySetInnerHTML"]);
 const NullEl = () => null;
 NullEl.displayName = "ForbiddenIntrinsic";
 /**
-* Install a Proxy fallback so a bare intrinsic tag used as a spec type
-* (stray SVG internals like `path`, `rect`, `circle`, `g`, or a raw HTML
-* tag a non-conforming spec slips in) renders as a native React intrinsic
-* element instead of triggering json-render's "no renderer for component
-* type" warning.
+* Marks a registry this function already aliased.
 *
-* There is deliberately NO HTML-tag → UDS-component aliasing here: which
-* component backs which tag is config-specific, and the generated prompt
-* already steers specs to real components (`img` → the image component) and
-* the polymorphic `as` prop (`<Box as="section">`) for semantic HTML. So a
-* conforming spec never reaches this Proxy for layout tags; it's a pure
-* native-rendering safety net.
-*
-* Returns a Proxy — successive `wrapRegistry` callers see the proxy
-* shape, which lazily caches intrinsic renderers on `target` as they're
-* accessed so repeated lookups return the same function reference.
+* `wrapRegistry` runs more than once on the same registry — the codegen-emitted bundle wraps at build
+* time WITH its descriptor, and `UdsRenderer` wraps again at render time WITHOUT one (a host that
+* passes its own registry has no descriptor to hand over). Its comment says re-applying the stack is
+* idempotent; for this wrapper it was not. Intrinsic renderers are created lazily on first access, so
+* a second proxy over a shallow copy did not yet have `section` on its target and minted its OWN —
+* with no class map. The style prop then reached the DOM as an attribute again, and only for tags
+* nothing had touched before the re-wrap, which is as order-dependent as it sounds.
 */
-function aliasHtmlTypes(reg) {
+const ALIASED = Symbol.for("uds.aliasHtmlTypes");
+function aliasHtmlTypes(reg, stylePropClasses) {
+	if (reg[ALIASED]) return reg;
 	const wrapped = { ...reg };
 	return new Proxy(wrapped, {
 		get(target, prop, receiver) {
+			if (prop === ALIASED) return true;
 			if (typeof prop === "string" && prop in target) return Reflect.get(target, prop, receiver);
 			if (typeof prop === "string" && FORBIDDEN_INTRINSIC_TAGS.has(prop)) return NullEl;
 			if (typeof prop === "string" && INTRINSIC_TAG_RE.test(prop)) {
-				const IntrinsicEl = ({ element, children }) => {
+				const IntrinsicEl = ({ element, children, slots }) => {
+					const props = element.props;
 					const intrinsicProps = {};
-					for (const [key, value] of Object.entries(element.props ?? {})) {
+					const styleClasses = [];
+					for (const [key, value] of Object.entries(props ?? {})) {
 						if (FORBIDDEN_INTRINSIC_PROPS.has(key)) continue;
+						if (key === "children") continue;
+						const byValue = stylePropClasses?.[key];
+						if (byValue) {
+							const resolved = typeof value === "string" ? byValue[value] : void 0;
+							if (resolved) styleClasses.push(resolved);
+							continue;
+						}
 						intrinsicProps[key] = value;
 					}
-					return React.createElement(prop, intrinsicProps, children);
+					if (styleClasses.length > 0) {
+						const existing = intrinsicProps.className;
+						intrinsicProps.className = [typeof existing === "string" ? existing : void 0, ...styleClasses].filter(Boolean).join(" ");
+					}
+					const content = specContent({
+						children,
+						propChildren: props?.children
+					});
+					const slotContent = slots ? Object.values(slots) : [];
+					const parts = [...content === void 0 || content === null ? [] : [content], ...slotContent];
+					return parts.length === 0 ? React.createElement(prop, intrinsicProps) : React.createElement(prop, intrinsicProps, ...parts);
 				};
 				IntrinsicEl.displayName = prop;
 				target[prop] = IntrinsicEl;
@@ -53,6 +69,7 @@ function aliasHtmlTypes(reg) {
 			return Reflect.get(target, prop, receiver);
 		},
 		has(target, prop) {
+			if (prop === ALIASED) return true;
 			if (typeof prop === "string" && INTRINSIC_TAG_RE.test(prop)) return true;
 			return Reflect.has(target, prop);
 		}

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

@@ -1,4 +1,4 @@
-import { jsx } from "react/jsx-runtime";
+import React from "react";
 //#region src/renderer/wrappers/inline-styles.tsx
 const HEX_RE = /^#[0-9a-fA-F]{3,8}$/;
 const UNIT_RE = /^-?\d+(\.\d+)?(px|rem|em|%|vh|vw)$/;
@@ -63,15 +63,15 @@ function wrapInlineStyleProps(reg, config = {}) {
 	const layoutSet = new Set(config.layoutComponents ?? []);
 	const textSet = new Set(config.textComponents ?? []);
 	const wrapped = { ...reg };
-	for (const [name, Comp] of Object.entries(reg)) wrapped[name] = function InlineStylePropsWrapper(renderProps) {
+	const makeInlineStylePropsWrapper = (Comp) => function InlineStylePropsWrapper(renderProps) {
 		const props = renderProps.element.props;
 		const elementType = renderProps.element.type;
 		const rawStyle = props?.style;
-		if (!props || rawStyle == null) return /* @__PURE__ */ jsx(Comp, { ...renderProps });
+		if (!props || rawStyle == null) return React.createElement(Comp, renderProps);
 		let style;
 		if (typeof rawStyle === "string") style = parseCssDeclarationString(rawStyle);
 		else if (typeof rawStyle === "object" && !Array.isArray(rawStyle)) style = rawStyle;
-		else return /* @__PURE__ */ jsx(Comp, { ...renderProps });
+		else return React.createElement(Comp, renderProps);
 		let patched = typeof rawStyle === "string";
 		const newProps = { ...props };
 		const remainingStyle = {};
@@ -87,10 +87,10 @@ function wrapInlineStyleProps(reg, config = {}) {
 			} else if (shouldDropCssStyle(cssKey, elementType, textSet)) patched = true;
 			else remainingStyle[cssKey] = cssValue;
 		}
-		if (!patched) return /* @__PURE__ */ jsx(Comp, { ...renderProps });
+		if (!patched) return React.createElement(Comp, renderProps);
 		if (Object.keys(remainingStyle).length > 0) newProps.style = remainingStyle;
 		else delete newProps.style;
-		return /* @__PURE__ */ jsx(Comp, {
+		return React.createElement(Comp, {
 			...renderProps,
 			element: {
 				...renderProps.element,
@@ -98,6 +98,7 @@ function wrapInlineStyleProps(reg, config = {}) {
 			}
 		});
 	};
+	for (const [name, Comp] of Object.entries(reg)) wrapped[name] = makeInlineStylePropsWrapper(Comp);
 	return wrapped;
 }
 //#endregion

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

@@ -1,13 +1,26 @@
 //#region src/spec/asset-jsx.d.ts
-/** Pull the slug + member out of an asset id, or `null` for a normal type. */
+/**
+ * The identifier a type is KNOWN AS in JSX — `component:buttons/Primary` → `Primary`.
+ *
+ * A type is a ref (`component:buttons/Primary`), and neither half of it is JSX: the kind isn't part
+ * of the name, and a grouped path isn't a legal tag or import name. The leaf is what codegen names
+ * the export, so `<Primary />` and `import { Primary }` agree with the module that actually exists.
+ * An intrinsic tag has no kind and no group, so it passes through untouched.
+ */
+declare function jsxIdentifier(type: string): string;
+/** Pull the library slug + member out of an asset node's type, or `null` for anything else — a
+ *  component, a package export, an intrinsic tag. */
 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.
+ * `slug → the component a placed member renders through` (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.
+ * A value may be the component's bare name OR its full path (`primitives/Icon`) —
+ * serialization reduces it to the JSX leaf either way ({@link jsxIdentifier}),
+ * since a grouped path is not a legal tag.
  */
 type AssetComponentMap = Readonly<Record<string, string>>;
 /** How a placed asset node should appear in exported JSX. */
@@ -45,4 +58,4 @@ declare function assetJsxForm(type: string, assetComponents?: AssetComponentMap)
  */
 type AssetNodeResolver = (tag: string, props: Readonly<Record<string, unknown>>) => string | null;
 //#endregion
-export { AssetComponentMap, AssetJsxForm, AssetNodeResolver, assetJsxForm, parseAssetType };
+export { AssetComponentMap, AssetJsxForm, AssetNodeResolver, assetJsxForm, jsxIdentifier, parseAssetType };

package/dist/spec/asset-jsx.js

@@ -1,15 +1,23 @@
+import { pathOf } from "../framework/utils/refs.js";
 //#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. */
+const ASSET_KIND = "icon:";
+/**
+* The identifier a type is KNOWN AS in JSX — `component:buttons/Primary` → `Primary`.
+*
+* A type is a ref (`component:buttons/Primary`), and neither half of it is JSX: the kind isn't part
+* of the name, and a grouped path isn't a legal tag or import name. The leaf is what codegen names
+* the export, so `<Primary />` and `import { Primary }` agree with the module that actually exists.
+* An intrinsic tag has no kind and no group, so it passes through untouched.
+*/
+function jsxIdentifier(type) {
+	const path = pathOf(type);
+	return path.slice(path.lastIndexOf("/") + 1);
+}
+/** Pull the library slug + member out of an asset node's type, or `null` for anything else — a
+*  component, a package export, an intrinsic tag. */
 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;
-	}
+	if (!type.startsWith(ASSET_KIND)) return null;
+	const bodyStart = 5;
 	const slashIndex = type.indexOf("/", bodyStart);
 	if (slashIndex === -1) return null;
 	const slug = type.slice(bodyStart, slashIndex);
@@ -34,15 +42,18 @@ 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
-	};
+	if (component) {
+		const tag = jsxIdentifier(component);
+		return {
+			tag,
+			nameAttr: parsed.member,
+			importName: tag
+		};
+	}
 	return {
 		tag: parsed.member,
 		importName: parsed.member
 	};
 }
 //#endregion
-export { assetJsxForm, parseAssetType };
+export { assetJsxForm, jsxIdentifier, parseAssetType };

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

@@ -1,32 +1,22 @@
+import { Config } from "../framework/Config.js";
+
 //#region src/spec/collapse-text-labels.d.ts
 type Props = Record<string, unknown>;
 interface ElementShape {
   type: string;
   props?: Props;
   children?: unknown;
+  slots?: Record<string, string[]>;
 }
 interface SpecShape {
   root: string;
   elements: Record<string, ElementShape>;
 }
-interface ComponentClassification {
-  derived: {
-    acceptsChildren: boolean;
-    acceptsChildNodes: boolean;
-    prop?(name: string): {
-      kind: string;
-      layer?: string;
-    } | undefined;
-  };
-}
-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`). */
+  /** The string-label component's spec `type` (e.g. `component:Badge`). */
   parentType: string;
   /** The wrapped Text element that was removed (when it wasn't shared). */
   childKey: string;
@@ -43,6 +33,6 @@ interface CollapseTextLabelsResult<S extends SpecShape> {
  * 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>;
+declare function collapseWrappedTextLabels<S extends SpecShape>(spec: S, config: Config): CollapseTextLabelsResult<S>;
 //#endregion
 export { CollapseTextLabelsResult, CollapsedTextLabel, collapseWrappedTextLabels };