@yahoo/uds-create-config 4.10.2 → 4.10.4

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

@@ -1,20 +1,27 @@
+import { IconVariantAs } from "../entities/system/Icon.js";
 import React from "react";
 
 //#region src/renderer/icon-library.d.ts
+/**
+ * One icon library as the emitted registry hands it to the renderer: the set's members as the
+ * components the package exports, the facts a bare glyph is drawn with, and the component that
+ * draws a placed glyph when the config has one — derived from the component whose own prop declares
+ * the set as its domain, never declared on the set.
+ */
 interface IconLibrary {
-  /** The slug members are indexed under — `phosphor`. */
   readonly name: string;
-  /** The component members render THROUGH, keyed by its registry ref stored verbatim
-   *  (`component:primitives/Icon`, not the stripped path) — a library's own `Icon`, which owns the
-   *  set-specific size/variant → glyph mapping. Absent, a member draws itself. */
-  readonly component?: string;
-  /** The members to register, in the order they should appear. */
-  readonly assetNames: readonly string[];
-  /** Name → the component that draws it. Absent for a library rebuilt from JSON, which has names but
-   *  nothing live to render — a browser surface draws those through the bundled registry instead. */
+  readonly glyphNames: readonly string[];
   readonly members?: Record<string, React.ComponentType<any> | undefined>;
-  /** The spec `type` one member is addressed by — `icon:phosphor/StarIcon`. */
-  readonly assetType: (name: string) => string;
+  readonly glyphType: (name: string) => string;
+  /** How a `variant` reaches a glyph, when the set declares it, so a raw glyph draws the requested
+   *  variant rather than its default. */
+  readonly variantAs?: IconVariantAs;
+  /** Named sizes (`sm: 16`), so a raw glyph's `size` names a bucket rather than a pixel count. */
+  readonly sizes?: Readonly<Record<string, number>>;
+  /** The registry key of the component that draws this set's glyphs (`component:primitives/Icon`),
+   *  and the prop it takes the glyph on. Absent, a placed glyph is the member drawn raw. */
+  readonly component?: string;
+  readonly glyphProp?: string;
 }
 //#endregion
 export { IconLibrary };

package/dist/renderer/index.d.ts

@@ -1,14 +1,16 @@
 import { ComponentEntry, MakeComponentEntryOptions, entryRenderer, makeComponentEntry, slotFillValue } from "./componentEntry.js";
-import { AssetEntriesResult, AssetMembers, assetRegistryEntries } from "./assetEntries.js";
+import { GlyphEntriesResult, GlyphMembers, glyphRegistryEntries } from "./glyphEntries.js";
 import { FragmentRenderer } from "./primitives/FragmentRenderer.js";
 import { SlotRenderer } from "./primitives/SlotRenderer.js";
 import { RendererErrorBoundary } from "./RendererErrorBoundary.js";
+import { Glyph, GlyphLibrary, ResolvedGlyph, resolveGlyph } from "./resolveGlyph.js";
 import { RuntimeComponentFailureContext, RuntimeComponentFailureReporter, RuntimeComponentRebuildContext, RuntimeComponentRebuildReporter, RuntimeComponentScope, RuntimeComponentStatus, RuntimeComponentStore, RuntimeComponentStoreContext, installRuntimeComponentStore, runtimeComponent } from "./runtimeComponent.js";
 import { REVEALED_LAYER_ATTR, specContent } from "./spec-content.js";
+import { GlyphPropMap, wrapGlyphProps } from "./wrappers/glyph-props.js";
 import { aliasHtmlTypes } from "./wrappers/html-aliases.js";
 import { RegistryDescriptor, wrapRegistry } from "./wrapRegistry.js";
 import { UdsRenderer, UdsRendererProps } from "./UdsRenderer.js";
 import { wrapEventBridge } from "./wrappers/event-bridge.js";
 import { wrapNormalizeHex } from "./wrappers/hex-normalize.js";
 import { wrapInlineStyleProps } from "./wrappers/inline-styles.js";
-export { type AssetEntriesResult, type AssetMembers, type ComponentEntry, FragmentRenderer, type MakeComponentEntryOptions, REVEALED_LAYER_ATTR, type RegistryDescriptor, RendererErrorBoundary, RuntimeComponentFailureContext, type RuntimeComponentFailureReporter, RuntimeComponentRebuildContext, type RuntimeComponentRebuildReporter, type RuntimeComponentScope, type RuntimeComponentStatus, type RuntimeComponentStore, RuntimeComponentStoreContext, SlotRenderer, UdsRenderer, type UdsRendererProps, aliasHtmlTypes, assetRegistryEntries, entryRenderer, installRuntimeComponentStore, makeComponentEntry, runtimeComponent, slotFillValue, specContent, wrapEventBridge, wrapInlineStyleProps, wrapNormalizeHex, wrapRegistry };
+export { type ComponentEntry, FragmentRenderer, type Glyph, type GlyphEntriesResult, type GlyphLibrary, type GlyphMembers, type GlyphPropMap, type MakeComponentEntryOptions, REVEALED_LAYER_ATTR, type RegistryDescriptor, RendererErrorBoundary, type ResolvedGlyph, RuntimeComponentFailureContext, type RuntimeComponentFailureReporter, RuntimeComponentRebuildContext, type RuntimeComponentRebuildReporter, type RuntimeComponentScope, type RuntimeComponentStatus, type RuntimeComponentStore, RuntimeComponentStoreContext, SlotRenderer, UdsRenderer, type UdsRendererProps, aliasHtmlTypes, entryRenderer, glyphRegistryEntries, installRuntimeComponentStore, makeComponentEntry, resolveGlyph, runtimeComponent, slotFillValue, specContent, wrapEventBridge, wrapGlyphProps, wrapInlineStyleProps, wrapNormalizeHex, wrapRegistry };

package/dist/renderer/index.js

@@ -1,14 +1,16 @@
 import { RendererErrorBoundary } from "./RendererErrorBoundary.js";
 import { REVEALED_LAYER_ATTR, specContent } from "./spec-content.js";
 import { entryRenderer, makeComponentEntry, slotFillValue } from "./componentEntry.js";
-import { assetRegistryEntries } from "./assetEntries.js";
+import { resolveGlyph } from "./resolveGlyph.js";
+import { glyphRegistryEntries } from "./glyphEntries.js";
 import { FragmentRenderer } from "./primitives/FragmentRenderer.js";
 import { SlotRenderer } from "./primitives/SlotRenderer.js";
 import { RuntimeComponentFailureContext, RuntimeComponentRebuildContext, RuntimeComponentStoreContext, installRuntimeComponentStore, runtimeComponent } from "./runtimeComponent.js";
 import { wrapEventBridge } from "./wrappers/event-bridge.js";
+import { wrapGlyphProps } from "./wrappers/glyph-props.js";
 import { wrapNormalizeHex } from "./wrappers/hex-normalize.js";
 import { aliasHtmlTypes } from "./wrappers/html-aliases.js";
 import { wrapInlineStyleProps } from "./wrappers/inline-styles.js";
 import { wrapRegistry } from "./wrapRegistry.js";
 import { UdsRenderer } from "./UdsRenderer.js";
-export { FragmentRenderer, REVEALED_LAYER_ATTR, RendererErrorBoundary, RuntimeComponentFailureContext, RuntimeComponentRebuildContext, RuntimeComponentStoreContext, SlotRenderer, UdsRenderer, aliasHtmlTypes, assetRegistryEntries, entryRenderer, installRuntimeComponentStore, makeComponentEntry, runtimeComponent, slotFillValue, specContent, wrapEventBridge, wrapInlineStyleProps, wrapNormalizeHex, wrapRegistry };
+export { FragmentRenderer, REVEALED_LAYER_ATTR, RendererErrorBoundary, RuntimeComponentFailureContext, RuntimeComponentRebuildContext, RuntimeComponentStoreContext, SlotRenderer, UdsRenderer, aliasHtmlTypes, entryRenderer, glyphRegistryEntries, installRuntimeComponentStore, makeComponentEntry, resolveGlyph, runtimeComponent, slotFillValue, specContent, wrapEventBridge, wrapGlyphProps, wrapInlineStyleProps, wrapNormalizeHex, wrapRegistry };

package/dist/renderer/resolveGlyph.d.ts

@@ -0,0 +1,47 @@
+import { IconVariantAs } from "../entities/system/Icon.js";
+import React from "react";
+
+//#region src/renderer/resolveGlyph.d.ts
+type Glyph = React.ComponentType<any>;
+/**
+ * What a library hands the resolver: its glyph namespace and the two set facts that turn a `variant`
+ * and a named `size` into props on a glyph. Structural, so the emitted registry literal, a runtime
+ * module's namespace import and a test stub all satisfy it.
+ */
+interface GlyphLibrary {
+  /** The library's exports by name. Typed open because a real module namespace also carries
+   *  non-component exports (`SSR`, `IconContext`); a name is narrowed to a component at lookup. */
+  readonly glyphs: Readonly<Record<string, unknown>>;
+  readonly variantAs?: IconVariantAs;
+  readonly sizes?: Readonly<Record<string, number>>;
+}
+interface ResolvedGlyph {
+  readonly Glyph: Glyph;
+  /** The props that carry the requested size and variant, in the library's own vocabulary. */
+  readonly props: Record<string, unknown>;
+}
+interface ResolveGlyphArgs {
+  library: GlyphLibrary;
+  /** The glyph itself, or the name the library exports it under. */
+  glyph: Glyph | string;
+  size?: string | number;
+  variant?: string;
+}
+/**
+ * The one place a `variant` and a named `size` become glyph props, so the drawer component, a
+ * picker cell and a raw glyph all draw the same thing for the same request.
+ *
+ * `variantAs` decides the variant: `prop` sets it as a prop, `export` swaps in the variant's own
+ * export when the template names one and it exists, and no declaration drops it. A named size reads
+ * the library's `sizes` and is dropped when it names no bucket; a number reaches the glyph as it is.
+ *
+ * A glyph the library does not export keeps its size and loses its variant, since neither arm of
+ * `variantAs` can be applied without the export name. A name the library does not export resolves
+ * to `undefined`.
+ */
+declare function resolveGlyph(args: ResolveGlyphArgs & {
+  glyph: Glyph;
+}): ResolvedGlyph;
+declare function resolveGlyph(args: ResolveGlyphArgs): ResolvedGlyph | undefined;
+//#endregion
+export { Glyph, GlyphLibrary, ResolvedGlyph, resolveGlyph };

package/dist/renderer/resolveGlyph.js

@@ -0,0 +1,78 @@
+//#region src/renderer/resolveGlyph.ts
+function resolveGlyph({ library, glyph, size, variant }) {
+	let bare;
+	let name;
+	if (typeof glyph === "string") {
+		bare = glyphAt({
+			glyphs: library.glyphs,
+			name: glyph
+		});
+		name = glyph;
+	} else {
+		bare = glyph;
+		name = exportNameOf({
+			glyphs: library.glyphs,
+			glyph
+		});
+	}
+	if (!bare) return void 0;
+	const props = {};
+	const px = sizePx({
+		sizes: library.sizes,
+		size
+	});
+	if (px !== void 0) props.size = px;
+	const { variantAs } = library;
+	if (!variant || !variantAs || name === void 0) return {
+		Glyph: bare,
+		props
+	};
+	if ("prop" in variantAs) {
+		props[variantAs.prop] = variant;
+		return {
+			Glyph: bare,
+			props
+		};
+	}
+	const template = variantAs.export[variant];
+	if (!template) return {
+		Glyph: bare,
+		props
+	};
+	return {
+		Glyph: glyphAt({
+			glyphs: library.glyphs,
+			name: template.replaceAll("{name}", name)
+		}) ?? bare,
+		props
+	};
+}
+/** The export at `name` when it can be rendered: a function component, or an object such as a
+*  `forwardRef`/`memo` wrapper. Own keys only: a plain-object namespace inherits `constructor`, and
+*  a glyph by that name would resolve `Object`. */
+function glyphAt({ glyphs, name }) {
+	if (!Object.hasOwn(glyphs, name)) return void 0;
+	const value = glyphs[name];
+	if (typeof value === "function") return value;
+	if (typeof value === "object" && value !== null) return value;
+}
+/** Reverse maps by namespace. A namespace is one stable object per library, so the walk over its
+*  exports happens once however many glyphs resolve against it. */
+const namesByNamespace = /* @__PURE__ */ new WeakMap();
+/** The name a glyph is exported under, found by reference. */
+function exportNameOf({ glyphs, glyph }) {
+	let names = namesByNamespace.get(glyphs);
+	if (!names) {
+		names = /* @__PURE__ */ new Map();
+		for (const key of Object.keys(glyphs)) names.set(glyphs[key], key);
+		namesByNamespace.set(glyphs, names);
+	}
+	return names.get(glyph);
+}
+/** A named bucket's pixels, or a number as it is. A name the library does not bucket is dropped. */
+function sizePx({ sizes, size }) {
+	if (typeof size === "string") return sizes?.[size];
+	return size;
+}
+//#endregion
+export { resolveGlyph };

package/dist/renderer/wrapRegistry.d.ts

@@ -1,3 +1,5 @@
+import { GlyphMembers } from "./glyphEntries.js";
+import { GlyphPropMap } from "./wrappers/glyph-props.js";
 import { StylePropClassMap } from "./wrappers/html-aliases.js";
 import { ComponentRegistry } from "@json-render/react";
 
@@ -41,6 +43,12 @@ interface RegistryDescriptor {
    * an imported `style` is dropped — text shouldn't carry a bounding box.
    */
   textComponents?: readonly string[];
+  /**
+   * Registry key → prop → the icon libraries that prop's domain names, in declaration order. A
+   * glyph is stored as its leaf or its `icon:` ref, and `wrapGlyphProps` hands the render the
+   * member component instead, read from the members the registry was built with.
+   */
+  glyphProps?: GlyphPropMap;
 }
 /**
  * Apply the standard wrapper stack + built-in spec primitives to an
@@ -50,10 +58,11 @@ interface RegistryDescriptor {
  * wrappers on top.
  *
  * `descriptor` carries the config-derived facts the config-dependent
- * 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.
+ * wrappers (`inline-styles`, `html-aliases`, `glyph-props`) need; omit it and those
+ * wrappers pass through. `iconMembers` is what a glyph prop resolves through, so it is
+ * needed only alongside a descriptor that names glyph props. Composition order matters — each
+ * wrapper assumes its outer wrappers haven't yet seen the element.
  */
-declare function wrapRegistry(reg: ComponentRegistry, descriptor?: RegistryDescriptor): ComponentRegistry;
+declare function wrapRegistry(reg: ComponentRegistry, descriptor?: RegistryDescriptor, iconMembers?: GlyphMembers): ComponentRegistry;
 //#endregion
 export { RegistryDescriptor, wrapRegistry };

package/dist/renderer/wrapRegistry.js

@@ -2,6 +2,7 @@ import { FragmentRenderer } from "./primitives/FragmentRenderer.js";
 import { SlotRenderer } from "./primitives/SlotRenderer.js";
 import { wrapComponentRefs } from "./wrappers/component-refs.js";
 import { wrapEventBridge } from "./wrappers/event-bridge.js";
+import { wrapGlyphProps } from "./wrappers/glyph-props.js";
 import { wrapNormalizeHex } from "./wrappers/hex-normalize.js";
 import { aliasHtmlTypes } from "./wrappers/html-aliases.js";
 import { wrapInlineStyleProps } from "./wrappers/inline-styles.js";
@@ -14,11 +15,12 @@ import { wrapInlineStyleProps } from "./wrappers/inline-styles.js";
 * wrappers on top.
 *
 * `descriptor` carries the config-derived facts the config-dependent
-* 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.
+* wrappers (`inline-styles`, `html-aliases`, `glyph-props`) need; omit it and those
+* wrappers pass through. `iconMembers` is what a glyph prop resolves through, so it is
+* needed only alongside a descriptor that names glyph props. Composition order matters — each
+* wrapper assumes its outer wrappers haven't yet seen the element.
 */
-function wrapRegistry(reg, descriptor) {
+function wrapRegistry(reg, descriptor, iconMembers) {
 	const base = {
 		...reg,
 		Fragment: reg.Fragment ?? FragmentRenderer,
@@ -26,7 +28,7 @@ function wrapRegistry(reg, descriptor) {
 	};
 	const stylePropNames = descriptor?.stylePropClasses ? new Set([...Object.keys(descriptor.stylePropClasses), ...Object.values(descriptor.cssPropertyToStyleProp ?? {})]) : void 0;
 	const holder = {};
-	const final = aliasHtmlTypes(wrapInlineStyleProps(wrapNormalizeHex(wrapEventBridge(wrapComponentRefs(base, (type) => holder.registry?.[type])), stylePropNames), {
+	const final = aliasHtmlTypes(wrapInlineStyleProps(wrapNormalizeHex(wrapEventBridge(wrapGlyphProps(wrapComponentRefs(base, (type) => holder.registry?.[type]), descriptor?.glyphProps, iconMembers)), stylePropNames), {
 		cssPropertyToStyleProp: descriptor?.cssPropertyToStyleProp,
 		layoutComponents: descriptor?.layoutComponents,
 		textComponents: descriptor?.textComponents

package/dist/renderer/wrappers/component-refs.js

@@ -1,4 +1,4 @@
-import { isComponentRef } from "../../spec/preview-elements.js";
+import { isComponentRef, isPreviewElement } from "../../spec/preview-elements.js";
 import React from "react";
 //#region src/renderer/wrappers/component-refs.tsx
 /** A revived ref is called by the component that received it, outside any spec event routing. */
@@ -9,17 +9,21 @@ const NO_EVENT = {
 };
 /**
 * Whether anything under a value is a stored component ref. Stops at a live React element: walking
-* its owner Fiber reaches a circular structure, and an element never holds an un-revived ref.
+* its owner Fiber reaches a circular structure, and an element never holds an un-revived ref. Stops
+* at a stored preview element too: its `element` ref is the tag the marker reviver renders it as, and
+* the refs inside its props are that render's to revive.
 */
 function hasRefDeep(value) {
 	if (typeof value !== "object" || value === null) return false;
 	if ("$$typeof" in value) return false;
+	if (isPreviewElement(value)) return false;
 	if (isComponentRef(value)) return true;
 	return (Array.isArray(value) ? value : Object.values(value)).some(hasRefDeep);
 }
 function reviveDeep(value, revive) {
 	if (typeof value !== "object" || value === null) return value;
 	if ("$$typeof" in value) return value;
+	if (isPreviewElement(value)) return value;
 	if (isComponentRef(value)) return revive(value);
 	if (Array.isArray(value)) return value.map((item) => reviveDeep(item, revive));
 	const out = {};

package/dist/renderer/wrappers/glyph-props.d.ts

@@ -0,0 +1,15 @@
+import { GlyphMembers } from "../glyphEntries.js";
+import { ComponentRegistry } from "@json-render/react";
+
+//#region src/renderer/wrappers/glyph-props.d.ts
+/** Registry key → glyph prop → the icon libraries that are the prop's domain, in declaration
+ *  order. A stored leaf resolves under the first library that holds it. */
+type GlyphPropMap = Readonly<Record<string, Readonly<Record<string, readonly string[]>>>>;
+/**
+ * A glyph reaches a render as the member component, whatever form the spec stored it in. Only the
+ * props the descriptor names are read, so a component's own string props are never mistaken for
+ * glyph names.
+ */
+declare function wrapGlyphProps(reg: ComponentRegistry, glyphProps?: GlyphPropMap, members?: GlyphMembers): ComponentRegistry;
+//#endregion
+export { GlyphPropMap, wrapGlyphProps };

package/dist/renderer/wrappers/glyph-props.js

@@ -0,0 +1,65 @@
+import { isRef, splitRef } from "../../framework/utils/ref-grammar.js";
+import React from "react";
+//#region src/renderer/wrappers/glyph-props.tsx
+/**
+* The member a stored glyph names: a leaf (`'StarIcon'`), resolved under the first of the prop's
+* libraries that holds it, or an `icon:` ref (`icon:phosphor/StarIcon`, with or without a source
+* qualifier) naming library and member itself. A ref is taken whatever the prop's libraries are,
+* since it says where to look. A value that is already a component, or that no library holds, is
+* left alone.
+*/
+function glyphFor({ value, libraries, members }) {
+	if (typeof value === "string") {
+		for (const slug of libraries) {
+			const glyph = members.get(slug)?.get(value);
+			if (glyph) return glyph;
+		}
+		return;
+	}
+	if (!isRef(value)) return void 0;
+	const parts = splitRef(value);
+	if (parts.kind !== "icon") return void 0;
+	const slash = parts.path.lastIndexOf("/");
+	if (slash <= 0) return void 0;
+	return members.get(parts.path.slice(0, slash))?.get(parts.path.slice(slash + 1));
+}
+/**
+* A glyph reaches a render as the member component, whatever form the spec stored it in. Only the
+* props the descriptor names are read, so a component's own string props are never mistaken for
+* glyph names.
+*/
+function wrapGlyphProps(reg, glyphProps, members) {
+	if (!glyphProps || !members) return reg;
+	const wrapped = { ...reg };
+	for (const [key, props] of Object.entries(glyphProps)) {
+		const Comp = reg[key];
+		if (!Comp) continue;
+		wrapped[key] = function GlyphPropsWrapper(renderProps) {
+			const bag = renderProps.element.props;
+			if (!bag) return React.createElement(Comp, renderProps);
+			let patched = false;
+			const next = { ...bag };
+			for (const [prop, libraries] of Object.entries(props)) {
+				const glyph = glyphFor({
+					value: next[prop],
+					libraries,
+					members
+				});
+				if (!glyph) continue;
+				next[prop] = glyph;
+				patched = true;
+			}
+			if (!patched) return React.createElement(Comp, renderProps);
+			return React.createElement(Comp, {
+				...renderProps,
+				element: {
+					...renderProps.element,
+					props: next
+				}
+			});
+		};
+	}
+	return wrapped;
+}
+//#endregion
+export { wrapGlyphProps };

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

@@ -0,0 +1,41 @@
+//#region src/spec/glyph-jsx.d.ts
+/**
+ * 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 a glyph node's type, or `null` for anything else — a
+ *  component, a package export, an intrinsic tag. */
+declare function parseGlyphType(type: string): {
+  slug: string;
+  member: string;
+} | null;
+/**
+ * `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.
+ */
+interface GlyphJsxForm {
+  /** The member's own name is its tag: `<Trophy />`. */
+  tag: string;
+  /** What the emitted file imports, from the library's module. */
+  importName: string;
+}
+/** How a placed glyph node prints: the member as its own tag. `null` for a normal component type. */
+declare function glyphJsxForm(type: string): GlyphJsxForm | null;
+/**
+ * Reads a bare member tag back to the glyph's ref, or `null` for a component node. `host` is the
+ * qualified type of the enclosing element (`component:Box`), or `null` at the root or under a tag
+ * the parser could not qualify, so a resolver can narrow a name two libraries both ship to the one
+ * the host draws from.
+ */
+type GlyphNodeResolver = (tag: string, props: Readonly<Record<string, unknown>>, host: string | null) => string | null;
+//#endregion
+export { GlyphJsxForm, GlyphNodeResolver, glyphJsxForm, jsxIdentifier, parseGlyphType };

package/dist/spec/{asset-jsx.js → glyph-jsx.js}

@@ -1,5 +1,5 @@
 import { pathOf } from "../framework/utils/refs.js";
-//#region src/spec/asset-jsx.ts
+//#region src/spec/glyph-jsx.ts
 const ASSET_KIND = "icon:";
 /**
 * The identifier a type is KNOWN AS in JSX — `component:buttons/Primary` → `Primary`.
@@ -13,9 +13,9 @@ 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
+/** Pull the library slug + member out of a glyph node's type, or `null` for anything else — a
 *  component, a package export, an intrinsic tag. */
-function parseAssetType(type) {
+function parseGlyphType(type) {
 	if (!type.startsWith(ASSET_KIND)) return null;
 	const bodyStart = 5;
 	const slashIndex = type.indexOf("/", bodyStart);
@@ -28,32 +28,14 @@ function parseAssetType(type) {
 		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);
+/** How a placed glyph node prints: the member as its own tag. `null` for a normal component type. */
+function glyphJsxForm(type) {
+	const parsed = parseGlyphType(type);
 	if (!parsed) return null;
-	const component = assetComponents?.[parsed.slug];
-	if (component) {
-		const tag = jsxIdentifier(component);
-		return {
-			tag,
-			nameAttr: parsed.member,
-			importName: tag
-		};
-	}
 	return {
 		tag: parsed.member,
 		importName: parsed.member
 	};
 }
 //#endregion
-export { assetJsxForm, jsxIdentifier, parseAssetType };
+export { glyphJsxForm, jsxIdentifier, parseGlyphType };

package/dist/spec/index.d.ts

@@ -4,8 +4,8 @@ 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 { GlyphJsxForm, GlyphNodeResolver, glyphJsxForm, jsxIdentifier, parseGlyphType } from "./glyph-jsx.js";
 import { JsxToSpecOptions, UNRESOLVED, hasUnresolvedProps, jsxToSpec, stripUnresolvedProps } from "./jsxToSpec.js";
 import { SpecToJsxOptions, SpecToJsxResult, specToJsx } from "./specToJsx.js";
 
@@ -28,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 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 };
+export { type AcceptsChildNodes, type Cell, type CellSlot, type ChildNodesClassification, type ClassifyChildNodes, type CollapseTextLabelsResult, type CollapsedTextLabel, type DocumentRename, type GlyphJsxForm, type GlyphNodeResolver, 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, buildAcceptsChildNodes, buildClassifyChildNodes, collapseWrappedTextLabels, collectForcedModifierProps, documentRenamesFromPatches, glyphJsxForm, graftPreviewElements, graftSlotContent, hasPreviewElementDeep, hasUnresolvedProps, isComponentRef, isPreviewElement, isPreviewRef, jsxIdentifier, jsxToSpec, parseGlyphType, previewElementNodes, previewElementType, rewriteSpecRefs, specToJsx, stripInjectedSlots, stripUnresolvedProps, withContainerChildSlots, withEmptyNodeSlots, withRenderSlots };

package/dist/spec/index.js

@@ -1,5 +1,5 @@
 import { graftPreviewElements, graftSlotContent, hasPreviewElementDeep, isComponentRef, isPreviewElement, isPreviewRef, previewElementNodes, previewElementType } from "./preview-elements.js";
-import { assetJsxForm, jsxIdentifier, parseAssetType } from "./asset-jsx.js";
+import { glyphJsxForm, jsxIdentifier, parseGlyphType } from "./glyph-jsx.js";
 import { applyForcedModifiers, collectForcedModifierProps } from "./apply-forced-modifiers.js";
 import { collapseWrappedTextLabels } from "./collapse-text-labels.js";
 import { buildAcceptsChildNodes, buildClassifyChildNodes, stripInjectedSlots, withContainerChildSlots, withEmptyNodeSlots, withRenderSlots } from "./empty-node-slots.js";
@@ -25,4 +25,4 @@ import { specToJsx } from "./specToJsx.js";
 *  element, without changing the rendered layer hierarchy. */
 const SYNTHETIC_TEXT_SLOT_PROP = "data-uds-synthetic-text-slot";
 //#endregion
-export { SYNTHETIC_TEXT_SLOT_PROP, 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 };
+export { SYNTHETIC_TEXT_SLOT_PROP, UNRESOLVED, applyForcedModifiers, buildAcceptsChildNodes, buildClassifyChildNodes, collapseWrappedTextLabels, collectForcedModifierProps, documentRenamesFromPatches, glyphJsxForm, graftPreviewElements, graftSlotContent, hasPreviewElementDeep, hasUnresolvedProps, isComponentRef, isPreviewElement, isPreviewRef, jsxIdentifier, jsxToSpec, parseGlyphType, previewElementNodes, previewElementType, rewriteSpecRefs, specToJsx, stripInjectedSlots, stripUnresolvedProps, withContainerChildSlots, withEmptyNodeSlots, withRenderSlots };

package/dist/spec/jsxToSpec.d.ts

@@ -1,4 +1,4 @@
-import { AssetNodeResolver } from "./asset-jsx.js";
+import { GlyphNodeResolver } from "./glyph-jsx.js";
 import { Spec } from "@json-render/core";
 
 //#region src/spec/jsxToSpec.d.ts
@@ -31,12 +31,18 @@ interface JsxToSpecOptions {
    */
   knownComponents?: ReadonlyMap<string, string>;
   /**
-   * Reconstructs placed asset nodes from a rendering-component tag —
+   * Reconstructs placed glyph nodes from a bare member tag —
    * `<Icon name="Trophy" …/>` → type `icon:icons/Trophy`. The exact inverse of
-   * `specToJsx`'s `assetComponents` mapping; without it an `<Icon name=…/>`
+   * `specToJsx`'s `glyphJsx` mapping; without it an `<Icon name=…/>`
    * round-trips as a literal `Icon` component node.
    */
-  resolveAssetNode?: AssetNodeResolver;
+  resolveGlyphNode?: GlyphNodeResolver;
+  /**
+   * Component type → prop → the icon libraries its values come from, the same map `specToJsx`
+   * prints from. An identifier under such a prop (`name={StarIcon}`) is the member's leaf in the
+   * spec, whichever of the libraries holds it.
+   */
+  glyphProps?: Readonly<Record<string, Readonly<Record<string, readonly string[]>>>>;
 }
 /**
  * Convert JSX source code into a json-render Spec.

package/dist/spec/jsxToSpec.js

@@ -303,6 +303,12 @@ function collectTextChildren(children) {
 function hasElementChildren(children) {
 	return children.some((c) => c.type === "JSXElement" || c.type === "JSXFragment");
 }
+/** The name a `{Identifier}` attribute value spells, or `undefined` for any other value. */
+function bareIdentifier(valueNode) {
+	if (valueNode?.type !== "JSXExpressionContainer") return void 0;
+	const expr = valueNode.expression;
+	return expr.type === "Identifier" ? expr.name : void 0;
+}
 function nextKey(ctx) {
 	return `el${ctx.counter++}`;
 }
@@ -371,6 +377,8 @@ function convertElement(node, ctx) {
 	const key = nextKey(ctx);
 	const props = {};
 	const slots = {};
+	const outerHost = ctx.host;
+	ctx.host = ctx.knownComponents?.get(tagName) ?? null;
 	const onBindings = {};
 	for (const attr of node.openingElement.attributes) if (attr.type === "JSXAttribute") {
 		const jsxAttr = attr;
@@ -385,6 +393,12 @@ function convertElement(node, ctx) {
 			slots[propName] = [propValue[SLOT_FILL]];
 			continue;
 		}
+		const glyph = bareIdentifier(jsxAttr.value);
+		const libraries = ctx.glyphProps?.[ctx.knownComponents?.get(tagName) ?? tagName]?.[propName];
+		if (propValue === UNRESOLVED && glyph !== void 0 && libraries !== void 0 && libraries.length > 0) {
+			props[propName] = glyph;
+			continue;
+		}
 		props[propName] = propValue;
 	} else if (attr.type === "JSXSpreadAttribute") props.__spread__ = UNRESOLVED;
 	const childKeys = [];
@@ -394,10 +408,11 @@ function convertElement(node, ctx) {
 		const childKey = convertJsxNode(child, ctx);
 		if (childKey) childKeys.push(childKey);
 	}
-	const assetType = ctx.resolveAssetNode?.(tagName, props) ?? null;
-	if (assetType) delete props.name;
+	ctx.host = outerHost;
+	const glyphType = ctx.resolveGlyphNode?.(tagName, props, outerHost) ?? null;
+	if (glyphType) delete props.name;
 	const element = {
-		type: assetType ?? ctx.knownComponents?.get(tagName) ?? tagName,
+		type: glyphType ?? ctx.knownComponents?.get(tagName) ?? tagName,
 		props
 	};
 	if (childKeys.length > 0) element.children = childKeys;
@@ -504,7 +519,9 @@ function jsxToSpec(source, options) {
 		scope,
 		inlining: /* @__PURE__ */ new Set(),
 		knownComponents: options?.knownComponents ?? null,
-		resolveAssetNode: options?.resolveAssetNode ?? null
+		resolveGlyphNode: options?.resolveGlyphNode ?? null,
+		host: null,
+		glyphProps: options?.glyphProps ?? null
 	};
 	const rootKey = convertJsxNode(jsxRoot, ctx);
 	if (!rootKey) return null;