@yahoo/uds-create-config 4.27.1 → 4.28.1

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/configs/system.js

@@ -41,6 +41,7 @@ import { transitionTokenValueMigration } from "../migrations/20260923144958_tran
 import { renderTokenRefsMigration } from "../migrations/20260923160425_render_token_refs.js";
 import { globalStyleDerivedColorsMigration } from "../migrations/20260923163604_global_style_derived_colors.js";
 import { slotCodeFormsMigration } from "../migrations/20260924044539_slot_code_forms.js";
+import { canvasRoleSlotMigration } from "../migrations/20260925143319_canvas_role_slot.js";
 //#region src/configs/system.ts
 /**
 * `System` — the design-system config TYPE. Declares the exact kinds a design system owns (tokens,
@@ -102,5 +103,6 @@ if (!registeredSchemaMigrations().has(20260923144958)) registerSchemaMigrations(
 if (!registeredSchemaMigrations().has(20260923160425)) registerSchemaMigrations(renderTokenRefsMigration);
 if (!registeredSchemaMigrations().has(20260923163604)) registerSchemaMigrations(globalStyleDerivedColorsMigration);
 if (!registeredSchemaMigrations().has(20260924044539)) registerSchemaMigrations(slotCodeFormsMigration);
+if (!registeredSchemaMigrations().has(20260925143319)) registerSchemaMigrations(canvasRoleSlotMigration);
 //#endregion
 export { System };

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

@@ -3,19 +3,14 @@ import { z } from "zod";
 
 //#region src/entities/system/CanvasRole.d.ts
 /**
- * The roles a canvas has a tool for — the vocabulary a design system fills in.
+ * The roles a canvas has a tool for, the vocabulary a design system fills in. A role a config leaves
+ * unregistered has no entries, and its tool is disabled rather than falling back to a guess; what
+ * fills a role is whichever component the config points at, never a name the editor chose.
  *
- * This is the set of tools an editor offers, and each one is a SLOT: a role a config leaves
- * unregistered has no entries, and its tool is disabled rather than falling back to a guess. So
- * naming a role here offers the slot without asserting anything fills it, and what fills it is
- * never a name the editor chose — it is whichever component the config pointed at.
- *
- * The names live here, with the entity, because the entity is what they are names OF. They were
- * previously kept in `@yahoo/uds-create-platform-types` as a hand-maintained copy, annotated as
- * one ("mirrors `@yahoo/uds-create-config`'s `CanvasRole` union without importing it") — a second
- * source of truth wearing a comment admitting it.
+ * `slot` is the one role no toolbar draws with. Its entries are the host layers a component's new
+ * slot property can start as, and an entry's `defaultProps` are the props that layer starts with.
  */
-declare const CANVAS_ROLES: readonly ["frame", "text", "image", "icon"];
+declare const CANVAS_ROLES: readonly ["frame", "text", "image", "icon", "slot"];
 type CanvasRoleName = (typeof CANVAS_ROLES)[number];
 declare const CanvasRole: EntityClass<z.ZodObject<{
   entries: z.ZodArray<z.ZodObject<{

package/dist/entities/system/CanvasRole.js

@@ -15,23 +15,19 @@ import { z } from "zod";
 *   });
 */
 /**
-* The roles a canvas has a tool for — the vocabulary a design system fills in.
+* The roles a canvas has a tool for, the vocabulary a design system fills in. A role a config leaves
+* unregistered has no entries, and its tool is disabled rather than falling back to a guess; what
+* fills a role is whichever component the config points at, never a name the editor chose.
 *
-* This is the set of tools an editor offers, and each one is a SLOT: a role a config leaves
-* unregistered has no entries, and its tool is disabled rather than falling back to a guess. So
-* naming a role here offers the slot without asserting anything fills it, and what fills it is
-* never a name the editor chose — it is whichever component the config pointed at.
-*
-* The names live here, with the entity, because the entity is what they are names OF. They were
-* previously kept in `@yahoo/uds-create-platform-types` as a hand-maintained copy, annotated as
-* one ("mirrors `@yahoo/uds-create-config`'s `CanvasRole` union without importing it") — a second
-* source of truth wearing a comment admitting it.
+* `slot` is the one role no toolbar draws with. Its entries are the host layers a component's new
+* slot property can start as, and an entry's `defaultProps` are the props that layer starts with.
 */
 const CANVAS_ROLES = [
 	"frame",
 	"text",
 	"image",
-	"icon"
+	"icon",
+	"slot"
 ];
 const CanvasRole = defineEntity({
 	kind: "canvas-role",

package/dist/framework/Config.d.ts

@@ -72,7 +72,7 @@ interface RecordedSource {
  * The dense-counter `2` a short-lived scheme stamped before the chain existed reads as the mint
  * that replaced it (see `detectedWireVersion`).
  */
-declare const SERIALIZED_CONFIG_VERSION = 20260924044539;
+declare const SERIALIZED_CONFIG_VERSION = 20260925143319;
 interface SerializedConfig {
   /** See {@link SERIALIZED_CONFIG_VERSION}. Always written; a stored artifact may lack it. */
   readonly version: number;

package/dist/framework/Config.js

@@ -4883,7 +4883,7 @@ var Config = class Config {
 	*  links from the provided sources. A declared `linkedKind` with no provided source throws. */
 	hydrateFrom(stored, options) {
 		const claimed = schemaVersionOf(stored);
-		if (claimed > 20260924044539) throw new SchemaVersionTooNew(claimed);
+		if (claimed > 20260925143319) throw new SchemaVersionTooNew(claimed);
 		const wire = upgradeSerializedConfig(stored);
 		if (!Array.isArray(wire.ownedKinds) || typeof wire.items !== "object" || wire.items === null) throw new ConfigFormatError(`Config "${stored.name ?? "system-config"}" cannot be hydrated: this is not a serialized config-v2 config (no "ownedKinds"/"items"). A pre-cutover build artifact converts through the registered cutover migration — import the config type's module (e.g. \`configs/system\`) before hydrating, or port the repo once with \`uds migrate\`.`);
 		const leftover = wire.options;

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/schema-version.d.ts

@@ -15,7 +15,7 @@ import { Patch, SerializedConfig } from "./Config.js";
  * sets this constant to its own older timestamp; the merge ref then carries a registered migration
  * newer than the constant, and the assertion fails until the author re-mints.
  */
-declare const CURRENT_SCHEMA_VERSION = 20260924044539;
+declare const CURRENT_SCHEMA_VERSION = 20260925143319;
 /** What the walkers need to see of an envelope — loose on purpose, so a typed `SerializedConfig`
  *  and a raw old-shape record both flow in without casts. */
 interface VersionStamped {

package/dist/framework/schema-version.js

@@ -13,7 +13,7 @@ import { ConfigFormatError } from "./rejection.js";
 * sets this constant to its own older timestamp; the merge ref then carries a registered migration
 * newer than the constant, and the assertion fails until the author re-mints.
 */
-const CURRENT_SCHEMA_VERSION = 20260924044539;
+const CURRENT_SCHEMA_VERSION = 20260925143319;
 /** The mint that moved `options` into the `settings` kind — restated here, rather than imported
 *  from the migration that owns it, because that migration imports this module. */
 const SETTINGS_AS_KIND_VERSION = 20260908171448;
@@ -45,7 +45,7 @@ function registerSchemaMigrations(...migrations) {
 	for (const migration of migrations) {
 		if (migration.version !== 1 && !isMintTimestamp(migration.version)) throw new Error(`Schema migration version ${migration.version} is not a mint timestamp — mint one with \`date +%Y%m%d%H%M%S\`, like a supabase migration.`);
 		if (REGISTERED.has(migration.version)) throw new Error(`A schema migration at version ${migration.version} is already registered.`);
-		if (migration.version > 20260924044539) throw new Error(`Schema migration ${migration.version} is newer than CURRENT_SCHEMA_VERSION (${CURRENT_SCHEMA_VERSION}) — a stale branch merged, or the mint forgot to bump the constant. Re-mint: set CURRENT_SCHEMA_VERSION to the newest migration version.`);
+		if (migration.version > 20260925143319) throw new Error(`Schema migration ${migration.version} is newer than CURRENT_SCHEMA_VERSION (${CURRENT_SCHEMA_VERSION}) — a stale branch merged, or the mint forgot to bump the constant. Re-mint: set CURRENT_SCHEMA_VERSION to the newest migration version.`);
 		REGISTERED.set(migration.version, migration);
 	}
 }
@@ -102,7 +102,7 @@ function pendingFor(version, target, options) {
 * Already-current input passes through untouched — same reference, so hot paths pay nothing.
 */
 function upgradeSerializedConfig(json, options) {
-	const target = options?.target ?? 20260924044539;
+	const target = options?.target ?? 20260925143319;
 	const version = detectedWireVersion(json);
 	if (version > target) throw new SchemaVersionTooNew(version, target);
 	const raw = json;
@@ -160,7 +160,7 @@ function upgradedSources(json, options) {
 * meaning under the current schema and replay skips it — reported by the caller, not swallowed here.
 */
 function upgradePatch(patch, writtenAt, options) {
-	const target = options?.target ?? 20260924044539;
+	const target = options?.target ?? 20260925143319;
 	if (writtenAt > target) throw new SchemaVersionTooNew(writtenAt, target);
 	let current = patch;
 	for (const migration of pendingFor(writtenAt, target, options)) {
@@ -179,7 +179,7 @@ function upgradePatch(patch, writtenAt, options) {
 * stamp would cause.
 */
 function upgradeDraftEntries(draft, options) {
-	const target = options?.target ?? 20260924044539;
+	const target = options?.target ?? 20260925143319;
 	const entries = [];
 	const held = [];
 	const retired = [];

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({

package/dist/migrations/20260925143319_canvas_role_slot.d.ts

@@ -0,0 +1,12 @@
+/**
+ * An additive fence: `slot` joins the canvas roles, naming the host layer a new slot property starts
+ * as. No stored byte moves.
+ *
+ * Identity, so a stamp below this version means "may lack these fields" and one at it means they
+ * are understood, which is what lets the pull gate keep an older client from stripping them.
+ *
+ * Deletable once no stored config artifact is below this version.
+ */
+import type { SchemaMigration } from '../framework/schema-version';
+export declare const CANVAS_ROLE_SLOT_VERSION = 20260925143319;
+export declare const canvasRoleSlotMigration: SchemaMigration;

package/dist/migrations/20260925143319_canvas_role_slot.js

@@ -0,0 +1,8 @@
+//#region src/migrations/20260925143319_canvas_role_slot.ts
+const CANVAS_ROLE_SLOT_VERSION = 20260925143319;
+const canvasRoleSlotMigration = {
+	version: CANVAS_ROLE_SLOT_VERSION,
+	up: (json) => json
+};
+//#endregion
+export { CANVAS_ROLE_SLOT_VERSION, canvasRoleSlotMigration };