@yahoo/uds-create-config 3.2.0 → 3.3.0

package/dist/framework/anatomy-check.js

@@ -0,0 +1,337 @@
+//#region src/framework/anatomy-check.ts
+/**
+* The computed properties compared on aligned elements. Paint, box, type — what a designer would
+* notice. `width`/`height`/`line-height` compare with a pixel tolerance; everything else exactly,
+* after {@link normalizeStyleValue}.
+*/
+const STYLE_PROPERTIES = [
+	"display",
+	"background-color",
+	"color",
+	"opacity",
+	"border-top-width",
+	"border-top-style",
+	"border-top-color",
+	"border-top-left-radius",
+	"padding-top",
+	"padding-right",
+	"padding-bottom",
+	"padding-left",
+	"font-size",
+	"font-weight",
+	"line-height",
+	"width",
+	"height"
+];
+/** Pixel slack for the size comparisons — sub-pixel layout and font rounding. */
+const SIZE_TOLERANCE_PX = 1.5;
+/** The alignment key: a layer is `Component/layer`; anything else is its tag. */
+function renderedSignatureOf(tag, component, layer) {
+	return component !== void 0 && layer !== void 0 ? `${component}/${layer}` : `<${tag}>`;
+}
+const VOID_TAGS = new Set([
+	"area",
+	"base",
+	"br",
+	"col",
+	"embed",
+	"hr",
+	"img",
+	"input",
+	"link",
+	"meta",
+	"param",
+	"source",
+	"track",
+	"wbr"
+]);
+const ENTITIES = {
+	amp: "&",
+	lt: "<",
+	gt: ">",
+	quot: "\"",
+	apos: "'",
+	nbsp: "\xA0"
+};
+function decodeEntities(text) {
+	return text.replace(/&(#x[0-9a-f]+|#\d+|[a-z]+);/gi, (whole, body) => {
+		if (body[0] === "#") {
+			const code = body[1]?.toLowerCase() === "x" ? Number.parseInt(body.slice(2), 16) : Number.parseInt(body.slice(1), 10);
+			return Number.isFinite(code) ? String.fromCodePoint(code) : whole;
+		}
+		return ENTITIES[body.toLowerCase()] ?? whole;
+	});
+}
+const ATTRIBUTE = /([^\s"'<>/=]+)(?:\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s"'=<>`]+)))?/g;
+/**
+* Parse the markup `react-dom/server` writes. Not a general HTML parser: React's output is regular
+* (quoted attributes, void elements self-closed or bare, `<!-- -->` text separators, entities), and
+* that regularity is what this reads. A `<script>`/`<style>` body is skipped.
+*/
+function parseHtml(html) {
+	const root = {
+		tag: "#root",
+		attributes: {},
+		children: []
+	};
+	const stack = [root];
+	let i = 0;
+	while (i < html.length) {
+		const lt = html.indexOf("<", i);
+		if (lt < 0) {
+			pushText(stack, html.slice(i));
+			break;
+		}
+		if (lt > i) pushText(stack, html.slice(i, lt));
+		if (html.startsWith("<!--", lt)) {
+			const end = html.indexOf("-->", lt + 4);
+			i = end < 0 ? html.length : end + 3;
+			continue;
+		}
+		if (html.startsWith("</", lt)) {
+			const end = html.indexOf(">", lt);
+			const name = html.slice(lt + 2, end < 0 ? html.length : end).trim().toLowerCase();
+			for (let depth = stack.length - 1; depth > 0; depth--) if (stack[depth]?.tag === name) {
+				stack.length = depth;
+				break;
+			}
+			i = end < 0 ? html.length : end + 1;
+			continue;
+		}
+		const end = tagEnd(html, lt);
+		const raw = html.slice(lt + 1, end);
+		const selfClosing = raw.endsWith("/");
+		const body = selfClosing ? raw.slice(0, -1) : raw;
+		const nameEnd = body.search(/[\s/]/);
+		const tag = (nameEnd < 0 ? body : body.slice(0, nameEnd)).toLowerCase();
+		const attributes = {};
+		const attrText = nameEnd < 0 ? "" : body.slice(nameEnd);
+		for (const match of attrText.matchAll(ATTRIBUTE)) {
+			const name = match[1];
+			if (!name) continue;
+			attributes[name.toLowerCase()] = decodeEntities(match[2] ?? match[3] ?? match[4] ?? "");
+		}
+		const element = {
+			tag,
+			attributes,
+			children: []
+		};
+		stack[stack.length - 1]?.children.push(element);
+		i = end + 1;
+		if (tag === "script" || tag === "style") {
+			const close = html.indexOf(`</${tag}`, i);
+			i = close < 0 ? html.length : html.indexOf(">", close) + 1;
+			continue;
+		}
+		if (!selfClosing && !VOID_TAGS.has(tag)) stack.push(element);
+	}
+	return root;
+}
+/** The index of the `>` that closes the tag opened at `start`, quote-aware. */
+function tagEnd(html, start) {
+	let quote = null;
+	for (let i = start + 1; i < html.length; i++) {
+		const ch = html[i];
+		if (quote) {
+			if (ch === quote) quote = null;
+		} else if (ch === "\"" || ch === "'") quote = ch;
+		else if (ch === ">") return i;
+	}
+	return html.length;
+}
+function pushText(stack, text) {
+	if (!text) return;
+	stack[stack.length - 1]?.children.push({ text: decodeEntities(text) });
+}
+/** Inline `style="a:b;c:d"` as declarations, property names lower-cased. */
+function inlineStyleOf(attribute) {
+	const out = {};
+	if (!attribute) return out;
+	for (const declaration of attribute.split(";")) {
+		const colon = declaration.indexOf(":");
+		if (colon < 0) continue;
+		const property = declaration.slice(0, colon).trim().toLowerCase();
+		const value = declaration.slice(colon + 1).trim();
+		if (property) out[property] = value;
+	}
+	return out;
+}
+function ownTextOf(element) {
+	let text = "";
+	for (const child of element.children) if ("text" in child) text += child.text;
+	return text.replace(/\s+/g, " ").trim();
+}
+function firstComponentRoot(node) {
+	for (const child of node.children) {
+		if ("text" in child) continue;
+		if (child.attributes["data-uds-component"] !== void 0) return child;
+		const nested = firstComponentRoot(child);
+		if (nested) return nested;
+	}
+}
+/**
+* Every element under the component root of `html`, in document order, as {@link RenderedNode}s
+* without computed style. The root is the first element carrying `data-uds-component`; hosts and
+* shells above it are scaffolding. `data-anatomy-check-ignore` subtrees are skipped.
+*/
+function snapshotHtml(html) {
+	const root = firstComponentRoot(parseHtml(html));
+	if (!root) return [];
+	const out = [];
+	const visit = (element) => {
+		if (element.attributes["data-anatomy-check-ignore"] !== void 0) return;
+		const component = element.attributes["data-uds-component"];
+		const layer = element.attributes["data-uds-layer"];
+		out.push({
+			component,
+			layer,
+			tag: element.tag,
+			text: ownTextOf(element),
+			classes: (element.attributes.class ?? "").split(/\s+/).filter(Boolean).sort(),
+			style: inlineStyleOf(element.attributes.style),
+			inlineStyle: true,
+			signature: renderedSignatureOf(element.tag, component, layer)
+		});
+		for (const child of element.children) if (!("text" in child)) visit(child);
+	};
+	visit(root);
+	return out;
+}
+/** Longest common subsequence over signatures — the pairs of indices that align. */
+function align(a, b) {
+	const table = Array.from({ length: a.length + 1 }, () => new Array(b.length + 1).fill(0));
+	for (let i = a.length - 1; i >= 0; i--) for (let j = b.length - 1; j >= 0; j--) {
+		const rowI = table[i];
+		const rowNext = table[i + 1];
+		rowI[j] = a[i]?.signature === b[j]?.signature ? (rowNext[j + 1] ?? 0) + 1 : Math.max(rowNext[j] ?? 0, rowI[j + 1] ?? 0);
+	}
+	const pairs = [];
+	let i = 0;
+	let j = 0;
+	while (i < a.length && j < b.length) {
+		const rowI = table[i];
+		const rowNext = table[i + 1];
+		if (a[i]?.signature === b[j]?.signature) {
+			pairs.push([i, j]);
+			i++;
+			j++;
+		} else if ((rowNext[j] ?? 0) >= (rowI[j + 1] ?? 0)) i++;
+		else j++;
+	}
+	return pairs;
+}
+/** `rgb(…)` spacing and a trailing `px` zero are the browser's spelling, not a difference. */
+function normalizeStyleValue(value) {
+	return value.trim().replace(/\s+/g, " ").replace(/,\s*/g, ", ").replace(/^0(px|em|rem)$/, "0").replace(/\.0+(px|em|rem|%)$/, "$1");
+}
+function pxOf(value) {
+	const match = /^(-?\d*\.?\d+)px$/.exec(value.trim());
+	return match ? Number(match[1]) : void 0;
+}
+function stylesDiffer(property, a, b) {
+	const na = normalizeStyleValue(a);
+	const nb = normalizeStyleValue(b);
+	if (na === nb) return false;
+	if (property === "width" || property === "height" || property === "line-height") {
+		const pa = pxOf(na);
+		const pb = pxOf(nb);
+		if (pa !== void 0 && pb !== void 0) return Math.abs(pa - pb) > SIZE_TOLERANCE_PX;
+	}
+	return true;
+}
+function ordinals(nodes) {
+	const seen = /* @__PURE__ */ new Map();
+	return nodes.map((node) => {
+		const n = seen.get(node.signature) ?? 0;
+		seen.set(node.signature, n + 1);
+		return n;
+	});
+}
+function nodeLabel(node, ordinal) {
+	return ordinal > 0 ? `${node.signature}#${ordinal + 1}` : node.signature;
+}
+/**
+* Compare the anatomy's rendering with the module's.
+*
+* 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.
+*/
+function diffRendered(anatomy, instance, options = {}) {
+	const issues = [];
+	const pairs = align(anatomy, instance);
+	const matchedA = new Set(pairs.map(([i]) => i));
+	const matchedB = new Set(pairs.map(([, j]) => j));
+	const ordA = ordinals(anatomy);
+	const ordB = ordinals(instance);
+	anatomy.forEach((node, i) => {
+		if (!matchedA.has(i)) issues.push({
+			kind: "extra",
+			node: nodeLabel(node, ordA[i] ?? 0),
+			anatomy: node.text || void 0
+		});
+	});
+	instance.forEach((node, j) => {
+		if (!matchedB.has(j)) issues.push({
+			kind: "missing",
+			node: nodeLabel(node, ordB[j] ?? 0),
+			instance: node.text || void 0
+		});
+	});
+	for (const [i, j] of pairs) {
+		const a = anatomy[i];
+		const b = instance[j];
+		const label = nodeLabel(b, ordB[j] ?? 0);
+		if (a.tag !== b.tag) issues.push({
+			kind: "tag",
+			node: label,
+			anatomy: a.tag,
+			instance: b.tag
+		});
+		if (a.text !== b.text) issues.push({
+			kind: "text",
+			node: label,
+			anatomy: a.text,
+			instance: b.text
+		});
+		const inline = a.inlineStyle === true && b.inlineStyle === true;
+		const properties = inline ? [...new Set([...Object.keys(a.style), ...Object.keys(b.style)])].sort() : STYLE_PROPERTIES;
+		for (const property of properties) {
+			const va = a.style[property];
+			const vb = b.style[property];
+			if (!inline && (va === void 0 || vb === void 0)) continue;
+			if (va === vb) continue;
+			if (va !== void 0 && vb !== void 0 && !stylesDiffer(property, va, vb)) continue;
+			issues.push({
+				kind: "style",
+				node: label,
+				property,
+				anatomy: va === void 0 ? void 0 : normalizeStyleValue(va),
+				instance: vb === void 0 ? void 0 : normalizeStyleValue(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({
+			kind: "classes",
+			node: label,
+			anatomy: onlyA.join(" ") || void 0,
+			instance: onlyB.join(" ") || void 0
+		});
+	}
+	const fails = (issue) => issue.kind !== "classes" || options.classesFail === true;
+	return {
+		ok: !issues.some(fails),
+		issues,
+		counts: {
+			anatomy: anatomy.length,
+			instance: instance.length
+		}
+	};
+}
+/** The allowlist spelling of an issue: kind, node, and the property for a style difference. */
+function anatomyIssueKey(issue) {
+	return issue.property ? `${issue.kind} ${issue.node} ${issue.property}` : `${issue.kind} ${issue.node}`;
+}
+//#endregion
+export { SIZE_TOLERANCE_PX, STYLE_PROPERTIES, anatomyIssueKey, diffRendered, normalizeStyleValue, renderedSignatureOf, snapshotHtml };

package/dist/framework/class-names.js

@@ -372,8 +372,12 @@ function layerCompositeProps(config, path, state = {}) {
 		if (!isRef(element)) continue;
 		const declared = resolveComponentProps(config, pathOf(element.__ref));
 		for (const [prop, value] of Object.entries(bag ?? {})) {
-			const bound = declared[prop]?.value;
-			if (!isRef(bound) || kindOf(bound.__ref) !== "composite") continue;
+			const decl = declared[prop];
+			if (!decl) continue;
+			const bound = decl.value;
+			const composite = isRef(bound) && kindOf(bound.__ref) === "composite";
+			const own = decl.type === "variant" || decl.type === "string" || decl.type === "number" || decl.type === "boolean";
+			if (!composite && !own) continue;
 			out[layer] ??= {};
 			out[layer][prop] = authoredValue(config, prop, value);
 		}

package/dist/framework/defineEntity.d.ts

@@ -299,6 +299,7 @@ declare function defineEntity<F extends FieldsSchema, G extends FieldsSchema = z
    *  find every one of them without knowing the kind. */
   styleBags?: (data: unknown) => {
     bag: Record<string, unknown>;
+    element?: unknown;
   }[];
   rewriteName?: (data: unknown, from: string, to: string) => unknown;
 }): EntityClass<F, G, K, S, C, Single>;

package/dist/framework/ref-integrity.js

@@ -1,4 +1,4 @@
-import { collectRefs, kindOf, memberOf, pathOf, sourceOf } from "./utils/refs.js";
+import { collectRefs, isRef, kindOf, memberOf, pathOf, sourceOf } from "./utils/refs.js";
 import { cssValueIssue } from "../css/values.js";
 import { stylePropEntries } from "./projections.js";
 //#region src/framework/ref-integrity.ts
@@ -98,6 +98,20 @@ function danglingLocalRefs(config) {
 */
 const NAME_SHAPED = /^[a-zA-Z][\w-]*$/;
 /**
+* The props of the component an anatomy node renders — through its layer when the element is one,
+* through the fallback when a prop chooses it. `undefined` for an intrinsic tag or a package export.
+*/
+function renderedProps(config, element, layers) {
+	let target = element;
+	if (target && typeof target === "object" && !isRef(target) && "$state" in target) {
+		const bound = target;
+		target = bound.layer !== void 0 ? { __ref: `layer:${bound.layer}` } : bound.else;
+	}
+	if (isRef(target) && kindOf(target.__ref) === "layer") target = layers?.[pathOf(target.__ref)];
+	if (!isRef(target) || kindOf(target.__ref) !== "component") return void 0;
+	return (config.resolve("component", pathOf(target.__ref))?.toJSON())?.props;
+}
+/**
 * Every bare leaf in a style bag that names nothing its property accepts.
 *
 * The companion to {@link danglingLocalRefs}, for the references that were never refs. A leaf that
@@ -143,8 +157,8 @@ function unknownStyleLeaves(config) {
 		if (!sites) continue;
 		for (const item of config.list(kind)) {
 			const body = item.toJSON();
-			for (const { bag } of sites(body)) {
-				const own = bag === body.defaultProps ? body.props : void 0;
+			for (const { bag, element } of sites(body)) {
+				const own = bag === body.defaultProps ? body.props : element !== void 0 ? renderedProps(config, element, body.layers) : void 0;
 				for (const [prop, value] of Object.entries(bag)) {
 					if (typeof value !== "string" || !NAME_SHAPED.test(value)) continue;
 					if (!config.resolve("style-property", prop)) continue;

package/dist/framework/registry.d.ts

@@ -290,6 +290,7 @@ interface EntityKind {
    */
   readonly styleBags?: (data: unknown) => {
     bag: Record<string, unknown>;
+    element?: unknown;
   }[];
 }
 /** Every operation a kind exposes — its merged `schemas` map, flattened to `{ kind, verb, ... }`.

package/dist/framework/render-spec.d.ts

@@ -27,6 +27,17 @@ interface ComponentSpecs {
   readonly render?: RenderSpec;
   readonly preview?: RenderSpec;
 }
+/**
+ * The registry key of an element rendered THROUGH a package factory — `motion.create(Box)`, spelled
+ * `package:motion/react#motion(component:Box)`.
+ *
+ * The render wrapped the layer, so the module paints motion's element and the anatomy has to say
+ * so, or a cell shows the layer without the transition, the hidden-when-empty collapse, the press
+ * scale. The registry emits one entry per pair the anatomies name (see codegen's registry emitter);
+ * this is the one spelling both sides use. Not a ref path — the parentheses keep it from parsing as
+ * one — since it names a derived thing, not an entity.
+ */
+declare function wrappedElementKey(wrapper: string, type: string): string;
 /**
  * The node a tree ENTERS at — the one nothing else claims as a child.
  *
@@ -293,4 +304,4 @@ declare function expandSpec(config: Config, spec: RenderSpec, options?: ExpandOp
  */
 declare function expandComponent(config: Config, path: string, props?: Record<string, unknown>, options?: ExpandOptions): ExpansionResult;
 //#endregion
-export { ComponentSpec, ComponentSpecs, ExpandOptions, ExpansionResult, RenderElement, RenderSpec, SlotTarget, VisibilityOperator, VisibilityTerm, boundElementType, componentSpec, deriveSpec, entryKeyOf, expandComponent, expandSpec, instanceSpec, previewSpec, resolveVisibility, slotTargetsOf, specWithResolvedVisibility, visibilityStateProps, visibilityTerms, withoutTruthyTerm };
+export { ComponentSpec, ComponentSpecs, ExpandOptions, ExpansionResult, RenderElement, RenderSpec, SlotTarget, VisibilityOperator, VisibilityTerm, boundElementType, componentSpec, deriveSpec, entryKeyOf, expandComponent, expandSpec, instanceSpec, previewSpec, resolveVisibility, slotTargetsOf, specWithResolvedVisibility, visibilityStateProps, visibilityTerms, withoutTruthyTerm, wrappedElementKey };