@yahoo/uds-create-config 5.68.1 → 5.68.2

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 ?? {})) {