@yahoo/uds-create-config 5.68.1 → 5.68.3

package/dist/entities/documentation/Documentation.d.ts

@@ -15,8 +15,8 @@ declare const DocumentationDefinition: EntityClass<z.ZodObject<{
     uds: "uds";
   }>>;
   platform: z.ZodOptional<z.ZodEnum<{
-    mobile: "mobile";
     web: "web";
+    mobile: "mobile";
   }>>;
 }, z.core.$strict>, z.ZodObject<Record<never, never>, z.core.$strip>, "documentation", {
   readonly search: {

package/dist/entities/system/defineComponent.d.ts

@@ -14,9 +14,8 @@ import { AllHTMLAttributes, ComponentPropsWithRef, ComponentType, ElementType, J
  * Enough of another component to BE a layer's element — the handle `defineComponent` returns, with
  * its declarations forgotten so a builder of any shape fits.
  *
- * Named separately from `AuthoredComponent` because that one fixes the declarations at their widest,
- * and a layer must keep the ones the referenced component actually made: they're where its props come
- * from. `ComponentBuilder<{root:'button'}, …>` satisfies this; it does not satisfy `AuthoredComponent`.
+ * Named separately from `AuthoredComponent`, which is what a registry holds; a layer only needs to know
+ * the value is a component, and keeps the referenced component's own type for its props.
  */
 interface ComponentElement extends Authored {
   readonly kind: 'component';
@@ -582,11 +581,13 @@ type OpenTail<L extends LayerMap> = Registered extends true ? StyleProps & Modif
  */
 type ComponentPropsOf<L extends LayerMap, P extends PropMap, D = Record<never, never>, E = Record<never, never>, F extends string = never, As = never> = ConsumerDeclaredProps<P, D, E, L, ComponentBuilder<L, P, E, D, F>> & Partial<E> & Redeclared<RootSurface<L, D, As>, P, E> & Redeclared<ForwardedPropsOf<L, F>, P, E> & AsPropsOf<As, P, E> & Redeclared<OpenTail<L>, P, E>;
 /**
- * `T` less the keys the component declares and the keys its render extra names — each taken out on
- * its own, because {@link Without} leaves `T` whole when the key set is open, and an open render
- * extra (`extends Record<string, unknown>`) must not stop the declared props from shadowing.
+ * `T` less the keys the component declares and the keys its render extra names. {@link Without} leaves
+ * `T` whole when its key set is open, so an open set of either kind is left out of the union rather
+ * than opening it: an open render extra (`extends Record<string, unknown>`) must not stop the declared
+ * props from shadowing. Both sets come out in one mapped type, since this runs once per component over
+ * every style prop and modifier the system registers.
  */
-type Redeclared<T, P, E> = Without<Without<T, keyof P>, Redefined<E>>;
+type Redeclared<T, P, E> = string extends Redefined<E> ? Without<T, keyof P> : string extends keyof P ? Without<T, Redefined<E>> : Without<T, keyof P | Redefined<E>>;
 /**
  * The phantom call signature's parameter. `As` is inferred from `as` alone; the rest of the surface
  * is `NoInfer`, so inference never walks it. Open to inference, a spread of
@@ -642,7 +643,13 @@ type IntrinsicAttributeNames<As> = As extends keyof JSX.IntrinsicElements ? keyo
  * there is no telling a stray attribute from a style prop, and an unbuilt consumer compiles the way
  * the registry promises.
  */
-type ForeignAttributesOf<As, P, E> = Registered extends false ? Record<never, never> : [As] extends [keyof JSX.IntrinsicElements] ? { [K in Exclude<keyof AllHTMLAttributes<HTMLElement>, 'as' | IntrinsicAttributeNames<As> | keyof P | keyof E | keyof RegisteredStyleProps>]?: never } : Record<never, never>;
+type ForeignAttributesOf<As, P, E> = Registered extends false ? Record<never, never> : [As] extends [keyof JSX.IntrinsicElements] ? { [K in Exclude<AttributeNames, IntrinsicAttributeNames<As> | keyof P | keyof E>]?: never } : Record<never, never>;
+/**
+ * The HTML attribute names less `as` and the registered style props, which are the same for every
+ * component. A single `Exclude` over this concrete union takes out the rest: one over a deferred
+ * `Exclude<…, IntrinsicAttributeNames<As>>` would build an intersection per name while `As` is generic.
+ */
+type AttributeNames = Exclude<keyof AllHTMLAttributes<HTMLElement>, 'as' | keyof RegisteredStyleProps>;
 /**
  * The props a component picks up from the layers it FORWARDS.
  *
@@ -753,19 +760,24 @@ type WhenAny<K, T> = [K] extends [never] ? unknown : T;
  * with `P` in full as its type argument.
  */
 type CompactProps<P extends PropMap> = [StyleRefKeys<P> | StyleRefPropKeys<P>] extends [never] ? P : { [K in keyof P as K extends StyleRefKeys<P> | StyleRefPropKeys<P> ? never : K]: P[K] } & WhenAny<StyleRefKeys<P>, StyleRefs<StyleRefKeys<P> & string>> & WhenAny<StyleRefPropKeys<P>, StyleRefProps<StyleRefPropKeys<P> & string>>;
-interface ComponentBuilder<L extends LayerMap, P extends PropMap,
+/**
+ * Every type parameter is declared `in out`. Measured instead, TypeScript relates two instantiations
+ * with `P` generic, which crosses every registered style prop and modifier name with every other, and
+ * past 316 of them that is over its 100,000-member union limit (TS2590).
+ */
+interface ComponentBuilder<in out L extends LayerMap, in out P extends PropMap,
 /** Props the RENDER takes that the config doesn't describe — React handlers, mostly (`onPress`).
  *  They're part of the component's surface but not of its data, which is why they're declared at
  *  `.render()` rather than in `.props()`. */
-E = Record<never, never>,
+in out E = Record<never, never>,
 /** The defaults as AUTHORED, kept because one of them decides the type of every other prop: an
  *  `as` fixes which element this renders. See {@link ElementOf}. */
-D = Record<never, never>,
+in out D = Record<never, never>,
 /** The layers this component FORWARDS from, as a union of their names. Accumulates through
  *  `.forwards()` so `ComponentPropsOf` can union each forwarded layer's element props — `root` is
  *  already covered structurally by {@link ElementOf}, so for a root-only forward this changes no
  *  inferred type, which is what makes replacing `inherits` a no-op at every call site. */
-F extends string = never, /** The states `.states()` declared — what the render knows and reports, never a caller's prop. */S extends StateMap = Record<never, never>> extends Authored {
+in out F extends string = never, /** The states `.states()` declared — what the render knows and reports, never a caller's prop. */in out S extends StateMap = Record<never, never>> extends Authored {
   /**
    * The phantom call signature — the authored value is never rendered (the build substitutes the
    * emitted module), but a call site is checked against it. Generic over the element a call site
@@ -884,8 +896,19 @@ F extends string = never, /** The states `.states()` declared — what the rende
   toStored(): Record<string, unknown>;
   assignPath(path: string): void;
 }
-/** A component under authorship, with its declarations forgotten — what a registry holds. */
-type AuthoredComponent = ComponentBuilder<LayerMap, PropMap, unknown, unknown>;
+/**
+ * A component under authorship, with its declarations forgotten — what a registry holds. It names only
+ * the members every builder has with the same type, so a builder of any shape is assignable to it.
+ */
+interface AuthoredComponent extends Authored {
+  readonly kind: 'component';
+  readonly body: Record<string, unknown>;
+  readonly path?: string;
+  toStored(): Record<string, unknown>;
+  assignPath(path: string): void;
+}
+/** What the whole-body form returns: a builder whose declarations are all at their widest. */
+type WidestComponentBuilder = ComponentBuilder<LayerMap, PropMap, unknown, unknown>;
 /**
  * A linked component's handle as the system that links it holds it. The build emits one for each
  * linked component the link changes, and the system's linked alias resolves to it first (UDS-4611).
@@ -931,7 +954,7 @@ interface DefineComponent {
     root: El;
   }, Record<never, never>>;
   /** The whole body at once, for a component with nothing to narrow step by step. */
-  (body?: ComponentSourceInput<Record<string, unknown>>): AuthoredComponent;
+  (body?: ComponentSourceInput<Record<string, unknown>>): WidestComponentBuilder;
   layers<const L extends LayerMap>(layers: L): ComponentBuilder<L, Record<never, never>>;
   props: typeof definePropsFirst;
 }

package/dist/entities/system/defineComponent.js

@@ -402,24 +402,6 @@ function toStored(body) {
 		styles: storedStyleRules(rules)
 	};
 }
-/**
-* Author a component.
-*
-* Callable for the case with nothing to narrow — `defineComponent({ layers: { root: 'div' } })` — and
-* chainable for every other, since a chain is what lets each step's types come from the last.
-*/
-/**
-* Author a component.
-*
-* Called with an ELEMENT — `defineComponent('input')`, `defineComponent(Component.ref('Box'))` — that
-* element becomes the root layer, because a component with one layer IS that element and saying so
-* twice adds nothing. It's also what makes the element's props type correctly: v1 expressed this as a
-* `defaultProps: { as: 'input' }` on a `div`-rooted component, which left the config claiming the
-* element was a `div` while every call site treated it as an input.
-*
-* The render follows from it too — one layer needs no anatomy, so the build generates the element
-* rather than reading a `.render()` that would only restate the layer.
-*/
 function defineComponentImpl(bodyOrElement) {
 	if (isComponentElement(bodyOrElement)) return build({ layers: { root: bodyOrElement } });
 	if (typeof bodyOrElement === "function" || isRef(bodyOrElement) && kindOf(bodyOrElement) === "package") throw new Error("[uds] defineComponent(<package export>): a package export cannot be a component's only layer yet — the generated one-layer render emits web elements. Declare `layers` and a `.render()` instead.");

package/dist/framework/anatomy-check.d.ts

@@ -11,7 +11,8 @@
  * them.
  *
  * Two ways in. {@link snapshotHtml} reads the markup `react-dom/server` produces, which is what
- * `uds anatomy` compares in a Bun process — structure, text and classes, since no layout runs there.
+ * `uds anatomy` compares in a Bun process — structure, text, classes, inline style and a plain tag's
+ * attributes, since no layout runs there.
  * A browser surface snapshots live DOM instead (the studio's `?anatomyCheck=true`), and adds computed
  * style to each node; {@link diffRendered} compares whatever a node carries.
  */
@@ -34,10 +35,17 @@ interface RenderedNode {
   readonly style: Readonly<Record<string, string>>;
   /** `true` when `style` holds inline declarations rather than a computed subset. */
   readonly inlineStyle?: boolean;
+  /**
+   * A plain tag's attributes — an element that is no component's layer, such as an svg `<path>`,
+   * whose attributes are often its paint (`fill-opacity`, `stroke-width`, `d`). Left out for a layer,
+   * whose attributes come from its component, and where the snapshot can't read them. See
+   * {@link paintAttributesOf} for what is skipped.
+   */
+  readonly attributes?: Readonly<Record<string, string>>;
   /** What the alignment matches on — see {@link renderedSignatureOf}. */
   readonly signature: string;
 }
-type AnatomyIssueKind = /** The module renders this element and the anatomy does not. */'missing' /** The anatomy renders this element and the module does not. */ | 'extra' /** Both render it — aligned as the same layer — as different elements (`div` against `span`). */ | 'tag' /** Both render it, with different own text. */ | 'text' /** Both render it, with a computed style that differs beyond tolerance. */ | 'style'
+type AnatomyIssueKind = /** The module renders this element and the anatomy does not. */'missing' /** The anatomy renders this element and the module does not. */ | 'extra' /** Both render it — aligned as the same layer — as different elements (`div` against `span`). */ | 'tag' /** Both render it, with different own text. */ | 'text' /** Both render it as a plain tag, with an attribute that differs or that one side lacks. */ | 'attribute' /** Both render it, with a computed style that differs beyond tolerance. */ | 'style'
 /** Both render it, with different class sets. Classes are how a style arrives, so where a
  *  computed style is available this is informational; where none is (markup only) it is the
  *  paint difference itself — see `diffRendered`'s `classesFail`. */
@@ -90,7 +98,7 @@ interface DiffOptions {
  *
  * Elements align by signature in document order; what the module renders and the anatomy does not
  * is `missing`, the reverse is `extra`. Aligned elements then compare own text, computed style (when
- * both sides carry it) and class set.
+ * both sides carry it), a plain tag's attributes (when both sides carry them) and class set.
  */
 declare function diffRendered(anatomy: readonly RenderedNode[], instance: readonly RenderedNode[], options?: DiffOptions): AnatomyReport;
 /** The allowlist spelling of an issue: kind, node, and the property for a style difference. */

package/dist/framework/anatomy-check.js

@@ -161,6 +161,31 @@ function ownTextOf(element) {
 	for (const child of element.children) if ("text" in child) text += child.text;
 	return text.replace(/\s+/g, " ").trim();
 }
+/** Attributes that name an id rather than paint: React mints ids per render, so the two sides differ. */
+const ID_ATTRIBUTES = new Set([
+	"id",
+	"for",
+	"aria-activedescendant",
+	"aria-controls",
+	"aria-describedby",
+	"aria-labelledby",
+	"aria-owns"
+]);
+/**
+* The attributes of a plain tag that the two renderings should agree on: every one but `class` and
+* `style` (compared on their own), `data-*` (markers), and what names an id — an id attribute, or a
+* value pointing at one (`url(#…)`, `#…`).
+*/
+function paintAttributesOf(attributes) {
+	const out = {};
+	for (const [name, value] of Object.entries(attributes)) {
+		if (name === "class" || name === "style" || name.startsWith("data-")) continue;
+		if (ID_ATTRIBUTES.has(name)) continue;
+		if (value.includes("url(#") || value.startsWith("#")) continue;
+		out[name] = value;
+	}
+	return out;
+}
 function firstComponentRoot(node) {
 	for (const child of node.children) {
 		if ("text" in child) continue;
@@ -190,6 +215,7 @@ function snapshotHtml(html) {
 			classes: (element.attributes.class ?? "").split(/\s+/).filter(Boolean).sort(),
 			style: inlineStyleOf(element.attributes.style),
 			inlineStyle: true,
+			...component === void 0 ? { attributes: paintAttributesOf(element.attributes) } : {},
 			signature: renderedSignatureOf(element.tag, component, layer)
 		});
 		for (const child of element.children) if (!("text" in child)) visit(child);
@@ -255,7 +281,7 @@ function nodeLabel(node, ordinal) {
 *
 * Elements align by signature in document order; what the module renders and the anatomy does not
 * is `missing`, the reverse is `extra`. Aligned elements then compare own text, computed style (when
-* both sides carry it) and class set.
+* both sides carry it), a plain tag's attributes (when both sides carry them) and class set.
 */
 function diffRendered(anatomy, instance, options = {}) {
 	const issues = [];
@@ -310,6 +336,21 @@ function diffRendered(anatomy, instance, options = {}) {
 				instance: vb === void 0 ? void 0 : normalizeStyleValue(vb)
 			});
 		}
+		if (a.attributes && b.attributes) {
+			const names = [...new Set([...Object.keys(a.attributes), ...Object.keys(b.attributes)])].sort();
+			for (const name of names) {
+				const va = a.attributes[name];
+				const vb = b.attributes[name];
+				if (va === vb) continue;
+				issues.push({
+					kind: "attribute",
+					node: label,
+					property: name,
+					anatomy: va,
+					instance: vb
+				});
+			}
+		}
 		const onlyA = a.classes.filter((c) => !b.classes.includes(c));
 		const onlyB = b.classes.filter((c) => !a.classes.includes(c));
 		if (onlyA.length || onlyB.length) issues.push({

package/dist/framework/render-spec.js

@@ -975,6 +975,7 @@ function slotTargets(config, path, body) {
 }
 function computeSlotTargets(config, body) {
 	const byLayer = /* @__PURE__ */ new Map();
+	const targeted = /* @__PURE__ */ new Map();
 	const untargeted = [];
 	for (const [from, decl] of Object.entries(body.props ?? {})) {
 		if (decl?.type === "slot") {
@@ -988,11 +989,15 @@ function computeSlotTargets(config, body) {
 		if (decl?.type !== "forward") continue;
 		if (!routesContent(config, body.layers, decl)) continue;
 		const target = refOf(decl.target);
-		if (target) byLayer.set(pathOf(target), {
-			...decl,
-			from
-		});
-		else untargeted.push({
+		if (target) {
+			const layer = pathOf(target);
+			const route = {
+				...decl,
+				from
+			};
+			byLayer.set(layer, route);
+			targeted.set(layer, [...(targeted.get(layer) ?? []).filter((other) => intoName(other.into) !== intoName(route.into)), route]);
+		} else untargeted.push({
 			...decl,
 			from,
 			untargeted: true
@@ -1003,6 +1008,7 @@ function computeSlotTargets(config, body) {
 	if (root && content && !byLayer.has(root)) byLayer.set(root, content);
 	return {
 		byLayer,
+		targeted,
 		untargeted
 	};
 }
@@ -1024,9 +1030,9 @@ function computeSlotTargets(config, body) {
 function slotTargetsOf(config, path) {
 	const body = bodyOf(config, path);
 	if (!body) return [];
-	const { byLayer, untargeted } = slotTargets(config, path, body);
+	const { targeted: targetedByLayer, untargeted } = slotTargets(config, path, body);
 	const root = rootKeyOf(body.layers ?? {});
-	return [...[...byLayer].filter(([, decl]) => !decl.untargeted).map(([layer, decl]) => ({
+	return [...[...targetedByLayer].flatMap(([layer, routes]) => routes.map((decl) => [layer, decl])).map(([layer, decl]) => ({
 		layer,
 		from: decl.from,
 		into: intoName(decl.into)
@@ -1288,7 +1294,7 @@ function expandInstance(sink, path, instanceProps, content, hint, instanceSlots)
 		...Object.fromEntries(Object.entries(pins).map(([key, value]) => key.startsWith("_") ? [key, value === true || value === "true"] : [key, value]))
 	};
 	const consumed = consumedProps(config, path, body);
-	const { byLayer: targets } = slotTargets(config, path, body);
+	const { byLayer: targets, targeted: targetedRoutes } = slotTargets(config, path, body);
 	const valueRoutes = /* @__PURE__ */ new Map();
 	for (const route of valueForwards(config, body)) {
 		const routes = valueRoutes.get(route.layer) ?? [];
@@ -1331,6 +1337,7 @@ function expandInstance(sink, path, instanceProps, content, hint, instanceSlots)
 	let contentPlaced = false;
 	const routedFroms = /* @__PURE__ */ new Set();
 	for (const target of targets.values()) routedFroms.add(target.from);
+	for (const routes of targetedRoutes.values()) for (const route of routes) routedFroms.add(route.from);
 	const positioned = /* @__PURE__ */ new Set();
 	for (const node of Object.values(anatomy)) {
 		const prop = slotAnatomyPropOf(node);
@@ -1428,6 +1435,8 @@ function expandInstance(sink, path, instanceProps, content, hint, instanceSlots)
 		}
 		const slot = layer ? targets.get(layer) : void 0;
 		const slotValue = slot && !subtreeBinds(anatomy, key, slot.from) && !(positioned.has(slot.from) && isText(instanceProps[slot.from])) ? instanceProps[slot.from] : void 0;
+		const siblingRoutes = layer ? (targetedRoutes.get(layer) ?? []).filter((route) => route !== slot) : [];
+		const siblingValues = Object.fromEntries(siblingRoutes.filter((route) => instanceProps[route.from] !== void 0 && !subtreeBinds(anatomy, key, route.from)).map((route) => [intoName(route.into), instanceProps[route.from]]));
 		const props = layer ? {
 			...withoutKeys(authoredProps(config, node.props), ruleKeysFor(config, path, layer, state, pins)),
 			"data-uds-component": path,
@@ -1438,6 +1447,7 @@ function expandInstance(sink, path, instanceProps, content, hint, instanceSlots)
 			...isRoot ? componentStateAttributes(componentStates(config, path), state) : {},
 			...isRoot || type === void 0 || kindOf(type) !== "component" ? forcedModifierAttributes(pins, path) : {},
 			...isRoot ? rest : {},
+			...siblingValues,
 			...slot && slotValue !== void 0 ? { [intoName(slot.into)]: slotValue } : {},
 			...layerProps[layer],
 			className: classesFor(config, path, layer, state, [
@@ -1513,6 +1523,10 @@ function expandInstance(sink, path, instanceProps, content, hint, instanceSlots)
 			if (placedFills.length) slots[name] = placedFills;
 		}
 		if (overridden && routed) slots[overridden] = [...routed];
+		for (const route of siblingRoutes) {
+			const fills = instanceSlots?.[route.from];
+			if (fills?.length) slots[intoName(route.into)] = [...fills];
+		}
 		if (routed?.length && !overridden && !(slot && positioned.has(slot.from))) children.push(...routed);
 		const placed = place(nested, type, props, children, keyHint, Object.keys(slots).length ? slots : void 0);
 		if (visible === void 0) withCondition(nested, placed, { visible: node.visible });

package/dist/renderer/wrapRegistry.js

@@ -1,5 +1,6 @@
 import { FragmentRenderer } from "./primitives/FragmentRenderer.js";
 import { SlotRenderer } from "./primitives/SlotRenderer.js";
+import { glyphMemberFor } from "../spec/glyph-members.js";
 import { wrapComponentRefs } from "./wrappers/component-refs.js";
 import { wrapEventBridge } from "./wrappers/event-bridge.js";
 import { wrapGlyphProps } from "./wrappers/glyph-props.js";
@@ -28,7 +29,10 @@ function wrapRegistry(reg, descriptor, iconMembers) {
 	};
 	const stylePropNames = descriptor?.stylePropClasses ? new Set([...Object.keys(descriptor.stylePropClasses), ...Object.values(descriptor.cssPropertyToStyleProp ?? {})]) : void 0;
 	const holder = {};
-	const final = aliasHtmlTypes(wrapInlineStyleProps(wrapNormalizeHex(wrapEventBridge(wrapGlyphProps(wrapComponentRefs(base, (type) => holder.registry?.[type]), descriptor?.glyphProps, iconMembers)), stylePropNames), {
+	const final = aliasHtmlTypes(wrapInlineStyleProps(wrapNormalizeHex(wrapEventBridge(wrapGlyphProps(wrapComponentRefs(base, (type) => holder.registry?.[type], iconMembers ? (ref) => glyphMemberFor({
+		ref,
+		members: iconMembers
+	}) : void 0), descriptor?.glyphProps, iconMembers)), stylePropNames), {
 		cssPropertyToStyleProp: descriptor?.cssPropertyToStyleProp,
 		layoutComponents: descriptor?.layoutComponents,
 		textComponents: descriptor?.textComponents

package/dist/renderer/wrappers/component-refs.d.ts

@@ -1,4 +1,5 @@
 import type { ComponentRegistry, ComponentRenderer } from '@json-render/react';
+import { type PreviewRef } from '../../spec/preview-elements';
 /**
  * A component handed as a prop VALUE (`icon={DotsThreeIcon}`) crosses the config as a bare ref,
  * `{ __ref: 'icon:phosphor/DotsThreeIcon' }`, keyed the way the registry keys the component. This
@@ -11,4 +12,6 @@ import type { ComponentRegistry, ComponentRenderer } from '@json-render/react';
  * like any spec element. One component per ref, so the receiving component's element type is stable
  * across renders and React keeps the glyph mounted.
  */
-export declare function wrapComponentRefs(reg: ComponentRegistry, resolve: (type: string) => ComponentRenderer | undefined): ComponentRegistry;
+export declare function wrapComponentRefs(reg: ComponentRegistry, resolve: (type: string) => ComponentRenderer | undefined, 
+/** The member an `icon:` ref names, for a glyph nested inside a prop's data. */
+glyphOf?: (ref: PreviewRef) => unknown): ComponentRegistry;

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

@@ -20,14 +20,24 @@ function hasRefDeep(value) {
 	if (isComponentRef(value)) return true;
 	return (Array.isArray(value) ? value : Object.values(value)).some(hasRefDeep);
 }
-function reviveDeep(value, revive) {
+function reviveDeep({ value, revive, glyphOf, nested = false }) {
 	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));
+	if (isComponentRef(value)) return (nested ? glyphOf?.(value) : void 0) ?? revive(value);
+	if (Array.isArray(value)) return value.map((item) => reviveDeep({
+		value: item,
+		revive,
+		glyphOf,
+		nested: true
+	}));
 	const out = {};
-	for (const [key, member] of Object.entries(value)) out[key] = reviveDeep(member, revive);
+	for (const [key, member] of Object.entries(value)) out[key] = reviveDeep({
+		value: member,
+		revive,
+		glyphOf,
+		nested: true
+	});
 	return out;
 }
 /**
@@ -42,7 +52,7 @@ function reviveDeep(value, revive) {
 * like any spec element. One component per ref, so the receiving component's element type is stable
 * across renders and React keeps the glyph mounted.
 */
-function wrapComponentRefs(reg, resolve) {
+function wrapComponentRefs(reg, resolve, glyphOf) {
 	const revived = /* @__PURE__ */ new Map();
 	const revive = (ref) => {
 		const type = ref.__ref;
@@ -72,7 +82,11 @@ function wrapComponentRefs(reg, resolve) {
 			...renderProps,
 			element: {
 				...renderProps.element,
-				props: reviveDeep(props, revive)
+				props: Object.fromEntries(Object.entries(props).map(([name, value]) => [name, reviveDeep({
+					value,
+					revive,
+					glyphOf
+				})]))
 			}
 		});
 	};

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

@@ -5,6 +5,10 @@ import { ComponentRegistry } from "@json-render/react";
  * Set to `true` on an intrinsic element whose props are the tag's own attributes. A style-prop key
  * whose value names no class is then kept as the attribute rather than dropped, so a captured
  * `<svg width={16}>` keeps its `width`. The key never reaches the DOM.
+ *
+ * An element a component's render placed inline (the anatomy marker, `data-uds-anatomy`) is one
+ * without the flag: its props are the JSX attributes the module renders as attributes, so a
+ * `<path fillOpacity={0}>` keeps its `fill-opacity` as the module does.
  */
 declare const VERBATIM_ATTRIBUTES = "__verbatimAttributes";
 /**

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

@@ -1,3 +1,4 @@
+import "../../framework/render-spec.js";
 import { specContent } from "../spec-content.js";
 import React from "react";
 //#region src/renderer/wrappers/html-aliases.tsx
@@ -16,6 +17,10 @@ const FORBIDDEN_INTRINSIC_PROPS = new Set(["dangerouslySetInnerHTML"]);
 * Set to `true` on an intrinsic element whose props are the tag's own attributes. A style-prop key
 * whose value names no class is then kept as the attribute rather than dropped, so a captured
 * `<svg width={16}>` keeps its `width`. The key never reaches the DOM.
+*
+* An element a component's render placed inline (the anatomy marker, `data-uds-anatomy`) is one
+* without the flag: its props are the JSX attributes the module renders as attributes, so a
+* `<path fillOpacity={0}>` keeps its `fill-opacity` as the module does.
 */
 const VERBATIM_ATTRIBUTES = "__verbatimAttributes";
 const NullEl = () => null;
@@ -43,7 +48,7 @@ function aliasHtmlTypes(reg, stylePropClasses) {
 			if (typeof prop === "string" && INTRINSIC_TAG_RE.test(prop)) {
 				const IntrinsicEl = ({ element, children, slots }) => {
 					const props = element.props;
-					const verbatim = props?.[VERBATIM_ATTRIBUTES] === true;
+					const verbatim = props?.["__verbatimAttributes"] === true || typeof props?.["data-uds-anatomy"] === "string";
 					const intrinsicProps = {};
 					const styleClasses = [];
 					for (const [key, value] of Object.entries(props ?? {})) {