@yahoo/uds-create-config 4.28.0 → 4.28.2

package/dist/capture/capture-to-spec.js

@@ -1,5 +1,5 @@
 import { isRef, pathOf } from "../framework/utils/refs.js";
-import { authoredValue } from "../framework/projections.js";
+import { LAYER_PROPS, authoredValue } from "../framework/projections.js";
 import { intoName } from "../framework/prop-surface.js";
 import { Component } from "../entities/system/Component.js";
 import { elementFromCaptured, isCapturedElement } from "./captured-tree.js";
@@ -205,7 +205,7 @@ var Converter = class {
 			const node = layer.childNodes[i];
 			if (!isElement(node)) continue;
 			if (node.getAttribute("data-uds-component") === path && node.getAttribute("data-uds-layer") !== "root") continue;
-			if (node.tagName.toLowerCase() === "svg" || node.hasAttribute("data-uds-component") && node.getAttribute("data-uds-layer") === "root") out.push(...this.convert(node));
+			if (node.tagName.toLowerCase() === "svg" || isImage(node) || node.hasAttribute("data-uds-component") && node.getAttribute("data-uds-layer") === "root") out.push(...this.convert(node));
 			else if (visible(node) && framesItself(node)) out.push(...this.frame(node));
 			else if (visible(node)) out.push(...this.pinFolded(node, this.convertOutsideLayers(node, path)));
 		}
@@ -219,6 +219,7 @@ var Converter = class {
 			return key ? [key] : [];
 		}
 		if (el.tagName.toLowerCase() === "svg") return this.icon(el);
+		if (isImage(el)) return this.image(el);
 		if (isField(el)) return this.field(el);
 		if (framesItself(el)) return this.frame(el);
 		return this.pinFolded(el, this.convertChildren(el));
@@ -294,20 +295,37 @@ var Converter = class {
 	* What `el`'s render placed outside its stamped slot layers and claimed layers, walking down to
 	* the first thing on each branch that is a piece of its own: a nested component, a glyph (unless
 	* `el` draws its own), a field it does not read, or an unmarked element with an inline style.
+	*
+	* With `takesText`, a run of text between them is placed through the text role, so a text
+	* component that mixes its own words with nested components keeps both, in order. Text with no
+	* component beside it is the component's own `children` value instead, and places nothing here.
 	*/
-	looseContent({ el, claimed, takesGlyphs, takesFields }) {
+	looseContent({ el, claimed, takesGlyphs, takesFields, takesText }) {
 		const out = [];
+		const runs = /* @__PURE__ */ new Set();
 		const walk = (node) => {
 			for (let i = 0; i < node.childNodes.length; i += 1) {
 				if (this.childCap > 0 && out.length >= this.childCap) return;
 				const child = node.childNodes[i];
-				if (!isElement(child) || !visible(child) || claimed.has(child)) continue;
+				if (!isElement(child)) {
+					const text = (child.textContent ?? "").replace(/\s+/g, " ");
+					if (takesText && text.trim()) for (const key of this.textRun(text)) {
+						runs.add(key);
+						out.push(key);
+					}
+					continue;
+				}
+				if (!visible(child) || claimed.has(child)) continue;
 				if (child.hasAttribute("data-uds-slot")) continue;
 				const tag = child.tagName.toLowerCase();
-				if (child.hasAttribute("data-uds-component") && child.getAttribute("data-uds-layer") === "root") out.push(...this.convert(child));
-				else if (tag === "svg") {
+				if (child.hasAttribute("data-uds-component") && child.getAttribute("data-uds-layer") === "root") {
+					const keys = this.convert(child);
+					if (takesText) for (const key of keys) this.flowInline(key, child);
+					out.push(...keys);
+				} else if (tag === "svg") {
 					if (takesGlyphs) out.push(...this.convert(child));
-				} else if (isField(child)) {
+				} else if (isImage(child)) out.push(...this.image(child));
+				else if (isField(child)) {
 					if (takesFields) out.push(...this.field(child));
 				} else if (framesItself(child)) out.push(...this.frame(child));
 				else {
@@ -319,8 +337,78 @@ var Converter = class {
 			}
 		};
 		walk(el);
+		if (out.every((key) => runs.has(key))) {
+			for (const key of runs) delete this.elements[key];
+			return [];
+		}
 		return out;
 	}
+	/**
+	* A nested component in a text run keeps the page's inline flow. The page laid it out as an inline
+	* element (a breadcrumb's last crumb is a `Text as="span"`), and `as` is not a prop a spec carries,
+	* so the canvas would draw the component's block element and break the line. A component whose own
+	* root style declares a display keeps it.
+	*/
+	flowInline(key, el) {
+		if (!INLINE_TAGS.has(el.tagName.toLowerCase())) return;
+		const element = this.elements[key];
+		if (!element || element.props.display !== void 0) return;
+		const path = pathOf(element.type);
+		const grammar = this.grammar.component(path);
+		if (!grammar || rootDeclaresDisplay(this.options.config, path)) return;
+		this.propsFromDeclarations([["display", "inline"]], grammar, element.props);
+	}
+	/**
+	* A run of a text component's own text, as the text role's component laid out inline so it flows
+	* with the components beside it and takes its type from the text around it.
+	*/
+	textRun(text) {
+		const role = canvasRole(this.options.config, "text");
+		if (!role) return [];
+		const props = {};
+		const grammar = this.grammar.component(role.component);
+		if (grammar) this.propsFromDeclarations([["display", "inline"]], grammar, props);
+		const key = this.key(role.component);
+		this.elements[key] = {
+			type: `component:${role.component}`,
+			props: {
+				...props,
+				children: text
+			}
+		};
+		return [key];
+	}
+	/**
+	* An unmarked `<img>` placed through the canvas's image role, with the source and the box it
+	* painted. One with no source shows nothing and places nothing.
+	*/
+	image(img) {
+		const src = img.getAttribute("src");
+		const role = canvasRole(this.options.config, "image");
+		if (!src || !role) return [];
+		const props = { ...role.defaultProps };
+		const grammar = this.grammar.component(role.component);
+		if (grammar) {
+			const width = numberAttr(img, "width");
+			const height = numberAttr(img, "height");
+			const sized = [];
+			if (width !== void 0) sized.push(["width", `${width}px`]);
+			if (height !== void 0) sized.push(["height", `${height}px`]);
+			this.propsFromDeclarations(sized, grammar, props);
+			this.propsFromInlineStyle(img, grammar, props);
+		}
+		const alt = img.getAttribute("alt");
+		const key = this.key(role.component);
+		this.elements[key] = {
+			type: `component:${role.component}`,
+			props: {
+				...props,
+				src,
+				...alt ? { alt } : {}
+			}
+		};
+		return [key];
+	}
 	/** A form field no component reads, placed as the text it shows through the canvas's text role. */
 	field(field) {
 		const text = fieldText(field);
@@ -342,6 +430,11 @@ var Converter = class {
 		};
 		return [key];
 	}
+	/** The layers a component declares, which a stamped layer override may name. */
+	layerNames(path) {
+		const body = this.options.config.resolve("component", path);
+		return new Set(Object.keys(body?.layers ?? {}));
+	}
 	/** A bare `<svg>` placed as the component its library renders it with. */
 	icon(svg) {
 		const answer = this.options.icons?.resolve(svgOf(svg));
@@ -367,6 +460,11 @@ var Converter = class {
 		if (grammar) this.propsFromClasses(el, grammar, props);
 		Object.assign(props, stamped);
 		if (grammar) this.propsFromInlineStyle(el, grammar, props);
+		const layerProps = stampedLayerProps({
+			el,
+			layers: this.layerNames(path)
+		});
+		if (layerProps) props[LAYER_PROPS] = layerProps;
 		if (props.position === "fixed") props.position = "absolute";
 		const renders = this.options.icons?.renderers.has(path) ?? false;
 		if (renders) {
@@ -438,11 +536,14 @@ var Converter = class {
 			const field = fieldValue(el, declared.value);
 			if (field !== void 0) props.value = field;
 		}
+		const textSlot = declared.children;
+		const holdsText = textSlot?.type === "slot" && textSlot.text === true;
 		const loose = this.looseContent({
 			el,
 			claimed,
 			takesGlyphs: !renders,
-			takesFields: !("value" in declared)
+			takesFields: !("value" in declared),
+			takesText: holdsText && props.children === void 0
 		});
 		const filled = new Set(Object.keys(slots));
 		for (const nested of loose) {
@@ -459,8 +560,7 @@ var Converter = class {
 			if ("tooltip" in declared && props.tooltip === void 0) props.tooltip = aria;
 			props["aria-label"] = aria;
 		}
-		const textSlot = declared.children;
-		if (textSlot?.type === "slot" && textSlot.text && props.children === void 0 && !slots.children) {
+		if (holdsText && props.children === void 0 && !slots.children) {
 			const text = collapse(ownText(el, claimed));
 			if (text) props.children = text;
 		}
@@ -471,8 +571,9 @@ var Converter = class {
 			if ("checked" in declared) props.checked = true;
 			else if ("selected" in declared) props.selected = true;
 		}
-		if (grammar) {
-			for (const prop of Object.keys(props)) if (!(prop in declared) && prop !== "aria-label") delete props[prop];
+		if (grammar) for (const prop of Object.keys(props)) {
+			if (prop in declared || prop === "aria-label" || prop === "layerProps") continue;
+			delete props[prop];
 		}
 		this.elements[key] = element;
 		return key;
@@ -517,32 +618,82 @@ var Converter = class {
 	}
 	/** {@link propsFromInlineStyle} over declarations the caller supplies. */
 	propsFromDeclarations(declarations, grammar, props) {
-		for (const [property, raw] of declarations) {
+		for (const [property, raw] of declarations.flatMap(gridAreaLines)) {
 			let value = normalizeCssValue(raw);
 			if (!value || SKIP_INLINE_PROPERTY.has(property) || SKIP_INLINE_VALUE.has(value)) continue;
 			if (property === "position" && value === "fixed") value = "absolute";
 			if (VIEWPORT_VALUE.test(value) && !WHOLE_VIEWPORT.test(value)) value = frameUnits(value, this.options.width, this.options.height);
-			for (const option of this.grammar.stylePropsFor(property)) {
-				const prop = grammar.propForStyleProperty.get(option.path);
-				if (!prop) continue;
-				const css = option.negates ? negated(value) : value;
-				if (css === void 0) continue;
-				let next;
-				const leaf = equivalents({
-					property,
-					value: css
-				}).map((spelling) => option.leafFor(spelling)).find((found) => found !== void 0);
-				if (WHOLE_VIEWPORT.test(css)) next = option.fullLeaf;
-				else if (leaf !== void 0) next = leaf === "" ? true : leaf;
-				else if (option.arbitrary) next = `[${css.replaceAll(" ", "_")}]`;
-				if (next === void 0) continue;
-				props[prop] = next;
-				break;
-			}
+			if (this.propFromDeclaration({
+				property,
+				value,
+				grammar,
+				props
+			})) continue;
+			for (const [longhand, part] of gridLonghands({
+				property,
+				value
+			})) this.propFromDeclaration({
+				property: longhand,
+				value: part,
+				grammar,
+				props
+			});
+		}
+	}
+	/** Writes the prop one declaration becomes, answering whether any prop took it. */
+	propFromDeclaration({ property, value, grammar, props }) {
+		for (const option of this.grammar.stylePropsFor(property)) {
+			const prop = grammar.propForStyleProperty.get(option.path);
+			if (!prop) continue;
+			const css = option.negates ? negated(value) : value;
+			if (css === void 0) continue;
+			let next;
+			const leaf = equivalents({
+				property,
+				value: css
+			}).map((spelling) => option.leafFor(spelling)).find((found) => found !== void 0);
+			if (WHOLE_VIEWPORT.test(css)) next = option.fullLeaf;
+			else if (leaf !== void 0) next = leaf === "" ? true : leaf;
+			else if (option.arbitrary) next = `[${css.replaceAll(" ", "_")}]`;
+			if (next === void 0) continue;
+			props[prop] = next;
+			return true;
 		}
+		return false;
 	}
 };
 /**
+* A `grid-area` as the `grid-row` and `grid-column` it sets: `row-start / column-start / row-end /
+* column-end`, where an omitted or `auto` end leaves that end to the start. A table that places each
+* cell by area otherwise auto-places them, and a row's full-width backdrop then takes the first
+* column and pushes every cell one to the right. Any other declaration passes through.
+*/
+function gridAreaLines([property, value]) {
+	if (property !== "grid-area") return [[property, value]];
+	const [rowStart, columnStart, rowEnd, columnEnd] = value.split("/").map((line) => line.trim());
+	const lines = (start, end) => end && end !== "auto" ? `${start} / ${end}` : start;
+	const row = lines(rowStart, rowEnd);
+	const column = lines(columnStart, columnEnd);
+	const out = [];
+	if (row && row !== "auto") out.push(["grid-row", row]);
+	if (column && column !== "auto") out.push(["grid-column", column]);
+	return out;
+}
+/**
+* A `grid-row` or `grid-column` shorthand as its start and end lines (`2 / 4` is start `2`, end `4`,
+* and a lone `2` is the start), for a system that declares the lines rather than the shorthand. A
+* page's rows often number past what a system declares, and a cell that keeps only its column still
+* lands in its own row: auto-placement starts a new row when a cell's column comes before the last.
+*/
+function gridLonghands({ property, value }) {
+	if (property !== "grid-row" && property !== "grid-column") return [];
+	const [start, end] = value.split("/").map((line) => line.trim());
+	const out = [];
+	if (start) out.push([`${property}-start`, start]);
+	if (end) out.push([`${property}-end`, end]);
+	return out;
+}
+/**
 * The prop a nested component the render placed outside every stamped layer belongs to: `children`
 * first, then the other slots in declaration order, taking the first that is not already filled and
 * accepts the component's type. `children` also holds it when it forwards into a layer's children,
@@ -577,6 +728,9 @@ const ARTBOARD = [
 ];
 /** How a single-line input lays out its text: centred across its height. */
 const INPUT_LINE = [["display", "flex"], ["align-items", "center"]];
+function isImage(el) {
+	return el.tagName.toLowerCase() === "img" && !el.hasAttribute("data-uds-component");
+}
 function isField(el) {
 	const tag = el.tagName.toLowerCase();
 	return tag === "input" || tag === "textarea";
@@ -589,6 +743,29 @@ function fieldText(field) {
 	if (NON_TEXT_INPUT.has(type)) return "";
 	return collapse(field.getAttribute("value") ?? "") || placeholder;
 }
+/** Elements the page lays out inline. */
+const INLINE_TAGS = new Set([
+	"a",
+	"abbr",
+	"b",
+	"code",
+	"em",
+	"i",
+	"kbd",
+	"mark",
+	"s",
+	"small",
+	"span",
+	"strong",
+	"sub",
+	"sup",
+	"u"
+]);
+/** Whether the component's own unconditional style gives its root a display. */
+function rootDeclaresDisplay(config, path) {
+	const styles = Component.get(config, path)?.styles ?? {};
+	return Object.values(styles).some((rule) => Object.keys(rule?.when ?? {}).length === 0 && rule.layers?.root?.display !== void 0);
+}
 /** The component a canvas role places with (`text`, `frame`), and the props it places it with. */
 function canvasRole(config, name) {
 	const entries = (config.resolve("canvas-role", name)?.toJSON())?.entries ?? [];
@@ -650,6 +827,27 @@ function equivalents({ property, value }) {
 	if ((property === "grid-column" || property === "grid-row") && /^span \d+$/.test(value)) return [value, `${value} / ${value}`];
 	return [value];
 }
+/**
+* The `layerProps` a call site passed, as the component stamped them in `data-uds-layer-props`: each
+* layer the component declares, with its bag of props. Nothing when there is no stamp.
+*/
+function stampedLayerProps({ el, layers }) {
+	const raw = el.getAttribute("data-uds-layer-props");
+	if (!raw) return void 0;
+	let parsed;
+	try {
+		parsed = JSON.parse(raw);
+	} catch {
+		return;
+	}
+	if (!parsed || typeof parsed !== "object") return void 0;
+	const out = {};
+	for (const [layer, bag] of Object.entries(parsed)) {
+		if (!layers.has(layer) || !bag || typeof bag !== "object") continue;
+		out[layer] = bag;
+	}
+	return Object.keys(out).length > 0 ? out : void 0;
+}
 function stampedProps(el) {
 	const raw = el.getAttribute("data-uds-props");
 	if (!raw) return {};

package/dist/entities/system/icon-domain-invariants.js

@@ -25,12 +25,38 @@ function iconDomainInvariants(config) {
 * always one of these. Without the check the ref reaches the build as a package export the package
 * row never lists, and fails there with the wrong cause.
 */
-const unboundGlyphs = createSliceMemo({
-	kinds: ["component", "icon"],
+const unboundGlyphs = (config) => {
+	const held = heldGlyphsOf(config);
+	if (held.length === 0) return [];
+	const problems = [];
+	const librariesByModule = librariesByModuleOf(config);
+	const leafSetOf = leafSetsOf(config);
+	for (const { path, key, glyph } of held) {
+		const holders = librariesByModule.get(glyph.specifier) ?? [];
+		const at = `Component "${path}" key "${key}"`;
+		if (holders.length === 0) {
+			problems.push(`${at} holds the glyph \`${glyph.name}\` of \`${glyph.specifier}\`, and no icon library draws from that package; declare the library, or hand its exports to the one that does (\`Icon.group({ glyphs })\`).`);
+			continue;
+		}
+		const listing = holders.filter((library) => leafSetOf(`icon:${library}`).has(glyph.name));
+		if (listing.length === 0) {
+			const empty = holders.every((library) => leafSetOf(`icon:${library}`).size === 0);
+			problems.push(`${at} holds \`${glyph.name}\`, which is not a member of ${spellLibraries(holders)}${empty ? "; the library has no members, so the package may not be installed" : ""}.`);
+			continue;
+		}
+		problems.push(`${at} holds \`${glyph.name}\`, a glyph of ${spellLibraries(listing)}, which that key does not draw from; a glyph belongs on a prop whose domain names its library, or a forward onto one.`);
+	}
+	return problems;
+};
+/**
+* Every `package:` export left in a component's bags, in component, bag and key order. Keyed on the
+* component slice alone, so an icon write (the build bakes metadata into each of a library's members
+* one patch at a time) re-reads none of the components.
+*/
+const heldGlyphsOf = createSliceMemo({
+	kinds: ["component"],
 	compute: (config) => {
-		const problems = [];
-		const librariesByModule = librariesByModuleOf(config);
-		const leafSetOf = leafSetsOf(config);
+		const held = [];
 		for (const item of config.list("component")) {
 			const body = config.resolve("component", item.path)?.toJSON();
 			for (const site of glyphBagSites({
@@ -39,23 +65,14 @@ const unboundGlyphs = createSliceMemo({
 				body
 			})) for (const [key, value] of Object.entries(site.bag)) {
 				const glyph = packageExportOf(value);
-				if (!glyph) continue;
-				const holders = librariesByModule.get(glyph.specifier) ?? [];
-				const at = `Component "${item.path}" key "${key}"`;
-				if (holders.length === 0) {
-					problems.push(`${at} holds the glyph \`${glyph.name}\` of \`${glyph.specifier}\`, and no icon library draws from that package; declare the library, or hand its exports to the one that does (\`Icon.group({ glyphs })\`).`);
-					continue;
-				}
-				const listing = holders.filter((library) => leafSetOf(`icon:${library}`).has(glyph.name));
-				if (listing.length === 0) {
-					const empty = holders.every((library) => leafSetOf(`icon:${library}`).size === 0);
-					problems.push(`${at} holds \`${glyph.name}\`, which is not a member of ${spellLibraries(holders)}${empty ? "; the library has no members, so the package may not be installed" : ""}.`);
-					continue;
-				}
-				problems.push(`${at} holds \`${glyph.name}\`, a glyph of ${spellLibraries(listing)}, which that key does not draw from; a glyph belongs on a prop whose domain names its library, or a forward onto one.`);
+				if (glyph) held.push({
+					path: item.path,
+					key,
+					glyph
+				});
 			}
 		}
-		return problems;
+		return held;
 	}
 });
 /**
@@ -105,39 +122,52 @@ function spellLibraries(libraries) {
 	return libraries.length === 1 ? `the library ${named[0]}` : `the libraries ${named.join(", ")}`;
 }
 /**
-* Keyed on the two slices the check reads, so the second kind's run within one registration is a
-* hit, and a write to any other kind never pays for it. A library's leaf set is keyed on the icon
-* slice alone: a component edit re-walks the list-valued props against sets that are already built.
+* The component half is keyed on the component slice and the leaf sets on the icon slice, so an icon
+* write re-walks no component. Only a prop listing two or more libraries can collide, and when none
+* does no leaf set is built at all.
 */
-const collisions = createSliceMemo({
-	kinds: ["component", "icon"],
+const collisions = (config) => {
+	const listing = multiLibraryPropsOf(config);
+	if (listing.length === 0) return [];
+	const problems = [];
+	const leafSetOf = leafSetsOf(config);
+	for (const { path, prop, refs } of listing) {
+		const heldBy = /* @__PURE__ */ new Map();
+		const shared = /* @__PURE__ */ new Map();
+		for (const target of refs) for (const leaf of leafSetOf(target)) {
+			const other = heldBy.get(leaf);
+			if (other === void 0) {
+				heldBy.set(leaf, target);
+				continue;
+			}
+			if (other === target) continue;
+			const pair = `${other} + ${target}`;
+			shared.set(pair, [...shared.get(pair) ?? [], leaf]);
+		}
+		for (const [pair, leaves] of shared) {
+			const [first, second] = pair.split(" + ");
+			problems.push(`Component "${path}" prop "${prop}" binds icon libraries "${first}" and "${second}", which both ship ${spellLeaves(leaves)}; a leaf has to name one glyph.`);
+		}
+	}
+	return problems;
+};
+/** Each prop whose domain lists two or more distinct icon libraries, in component and prop order. */
+const multiLibraryPropsOf = createSliceMemo({
+	kinds: ["component"],
 	compute: (config) => {
-		const problems = [];
-		const leafSetOf = leafSetsOf(config);
+		const listing = [];
 		for (const item of config.list("component")) {
 			const body = config.resolve("component", item.path)?.toJSON();
 			for (const [prop, decl] of Object.entries(body?.props ?? {})) {
 				const refs = listedLibraryRefsOf(decl);
-				if (!refs) continue;
-				const heldBy = /* @__PURE__ */ new Map();
-				const shared = /* @__PURE__ */ new Map();
-				for (const target of refs) for (const leaf of leafSetOf(target)) {
-					const other = heldBy.get(leaf);
-					if (other === void 0) {
-						heldBy.set(leaf, target);
-						continue;
-					}
-					if (other === target) continue;
-					const pair = `${other} + ${target}`;
-					shared.set(pair, [...shared.get(pair) ?? [], leaf]);
-				}
-				for (const [pair, leaves] of shared) {
-					const [first, second] = pair.split(" + ");
-					problems.push(`Component "${item.path}" prop "${prop}" binds icon libraries "${first}" and "${second}", which both ship ${spellLeaves(leaves)}; a leaf has to name one glyph.`);
-				}
+				if (refs && new Set(refs).size > 1) listing.push({
+					path: item.path,
+					prop,
+					refs
+				});
 			}
 		}
-		return problems;
+		return listing;
 	}
 });
 /** One leaf set per referenced library, filled on demand and kept while the icon slice stands. */

package/dist/framework/projections.js

@@ -1042,14 +1042,38 @@ function forwardIntoName(into, own) {
 	const member = memberOf(into) ?? into.__ref;
 	return member.slice(member.indexOf("/") + 1);
 }
+/** The instance prop that carries per-layer overrides, spread onto each named layer at render. */
+const LAYER_PROPS = "layerProps";
+/**
+* What is wrong with an instance's `layerProps`: it is an object keyed by the component's layers,
+* each holding an object of props for that layer. Empty when it is absent or sound.
+*/
+function layerPropsErrors({ config, target, value, where }) {
+	if (value === void 0) return [];
+	if (!isBag(value)) return [`${where} layerProps must be an object of layers`];
+	const layers = config.resolve("component", target)?.layers ?? {};
+	const errors = [];
+	for (const [layer, bag] of Object.entries(value)) if (!(layer in layers)) errors.push(`${where} has no layer "${layer}"`);
+	else if (!isBag(bag)) errors.push(`${where} layerProps.${layer} must be an object of props`);
+	return errors;
+}
+function isBag(value) {
+	return typeof value === "object" && value !== null && !Array.isArray(value);
+}
 /** Validate a prop bag against a component's declared props — unknown props + per-value domain
 *  checks. Generic: it resolves each prop's domain via {@link propValueDomain} and checks membership;
 *  no per-prop-type logic here. Returns the error strings (empty = valid). Lives in config so the
 *  `component/validate` op's truth is config-defined and the pipeline only renders it. */
 function validateComponentProps(config, componentPath, props) {
 	const declared = resolveComponentProps(config, componentPath);
-	const errors = [];
+	const errors = layerPropsErrors({
+		config,
+		target: componentPath,
+		value: props[LAYER_PROPS],
+		where: componentPath
+	});
 	for (const [name, value] of Object.entries(props)) {
+		if (name === "layerProps") continue;
 		const decl = declared[name];
 		if (!decl) {
 			errors.push(`unknown prop \`${name}\``);
@@ -1248,4 +1272,4 @@ function declaredPropDefaults(props) {
 	return out;
 }
 //#endregion
-export { authoredBag, authoredValue, className, cssPropValue, cssVar, cssVarRef, declaredPropDefaults, declaredPropRouting, glyphComponentOf, glyphLibrariesOf, glyphPropsOf, glyphPropsOfBody, holdingPreviewConditions, iconToolAxisOptions, iconToolOf, keyedPreviewConditions, memberFromLeaf, memberLeaves, negatedCssValue, opacityPercentage, previewConditionalProps, previewConditions, previewDefaults, previewMatrix, propOwner, propValueDomain, propValueFromAxis, refListOf, renderStyleValue, resolveComponentProps, resolveFieldValue, resolveTokenValue, resolveTokenValueUnder, routedBag, sourceVarPrefix, styleAliasesOf, styleDeclarations, stylePropEntries, stylePropLeafForToken, stylePropNegates, stylePropTokenGroup, stylePropTokenPath, stylePropTokenValues, stylePropValueFromLeaf, stylePropValueLeaves, stylePropValues, stylePropertiesWriting, stylePropertyAccepts, stylePropertyFor, stylePropertyPathFor, takenByForward, validateComponentProps };
+export { LAYER_PROPS, authoredBag, authoredValue, className, cssPropValue, cssVar, cssVarRef, declaredPropDefaults, declaredPropRouting, glyphComponentOf, glyphLibrariesOf, glyphPropsOf, glyphPropsOfBody, holdingPreviewConditions, iconToolAxisOptions, iconToolOf, keyedPreviewConditions, layerPropsErrors, memberFromLeaf, memberLeaves, negatedCssValue, opacityPercentage, previewConditionalProps, previewConditions, previewDefaults, previewMatrix, propOwner, propValueDomain, propValueFromAxis, refListOf, renderStyleValue, resolveComponentProps, resolveFieldValue, resolveTokenValue, resolveTokenValueUnder, routedBag, sourceVarPrefix, styleAliasesOf, styleDeclarations, stylePropEntries, stylePropLeafForToken, stylePropNegates, stylePropTokenGroup, stylePropTokenPath, stylePropTokenValues, stylePropValueFromLeaf, stylePropValueLeaves, stylePropValues, stylePropertiesWriting, stylePropertyAccepts, stylePropertyFor, stylePropertyPathFor, takenByForward, validateComponentProps };

package/dist/framework/validate-spec.js

@@ -1,6 +1,6 @@
 import { kindOf, memberOf, pathOf, splitRef } from "./utils/refs.js";
 import { childrenPolicy } from "../entities/system/element.js";
-import { resolveComponentProps } from "./projections.js";
+import { LAYER_PROPS, layerPropsErrors, resolveComponentProps } from "./projections.js";
 import { slotOf } from "../spec/slot.js";
 import { refResolves } from "./ref-integrity.js";
 //#region src/framework/validate-spec.ts
@@ -28,7 +28,16 @@ function walk(config, node, path, errors) {
 		errors.push(`${path}: unknown ${kind} "${named}"`);
 	} else if (kind === "component") {
 		const props = resolveComponentProps(config, target);
-		for (const name of Object.keys(node.props ?? {})) if (!(name in props)) errors.push(`${path}: unknown prop "${name}" on "${node.type}"`);
+		for (const name of Object.keys(node.props ?? {})) {
+			if (name === "layerProps") continue;
+			if (!(name in props)) errors.push(`${path}: unknown prop "${name}" on "${node.type}"`);
+		}
+		errors.push(...layerPropsErrors({
+			config,
+			target,
+			value: node.props?.[LAYER_PROPS],
+			where: `${path}: "${node.type}"`
+		}));
 		if (node.children?.length && childrenPolicy(config, target) === "none") errors.push(`${path}: "${node.type}" takes no children`);
 		for (const [name, fills] of Object.entries(node.slots ?? {})) {
 			const slot = slotOf({