@yahoo/uds-create-config 5.75.0 → 5.77.0

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

@@ -1,8 +1,10 @@
-import { isRef, pathOf } from "../framework/utils/refs.js";
+import { isRef, kindOf, pathOf } from "../framework/utils/refs.js";
 import { StyleProperty } from "../entities/system/StyleProperty.js";
-import { LAYER_PROPS, authoredValue } from "../framework/projections.js";
+import { LAYER_PROPS, authoredValue, glyphComponentOf } from "../framework/projections.js";
 import { intoName } from "../framework/prop-surface.js";
+import { arbitraryClassName, stylePropClassName } from "../framework/class-names.js";
 import { Component } from "../entities/system/Component.js";
+import { iconLibraries } from "../entities/system/icon-library.js";
 import { elementFromCaptured, isCapturedElement } from "./captured-tree.js";
 import { classGrammar, normalizeCssValue } from "./class-grammar.js";
 //#region src/capture/capture-to-spec.ts
@@ -114,6 +116,15 @@ function specFromCapture(options) {
 * value, `<width>x<height>`, is the layout size its content keeps.
 */
 const FOLD = "data-uds-fold";
+/** The page capture's mark on the empty box it left where an embed was. */
+const EMBED_SPACE_ATTR = "data-uds-embed";
+/**
+* The styles the page's stylesheets gave an unmarked element, as the browser computed them, which the
+* capture writes beside its own `style`. They are what a wrapper styled by anything the system does not
+* name (an app's Tailwind, a CSS module) drew with, and rank below both the element's own inline style
+* and the system's classes on it, which name the value rather than the pixels it came to.
+*/
+const COMPUTED_STYLE_ATTR = "data-uds-computed";
 /** Marks a layer whose component's root is not in the DOM with `<component>#<layer>`. */
 const ORPHAN_LAYER = "data-uds-orphan-layer";
 /**
@@ -183,10 +194,38 @@ var Converter = class {
 	counter = 0;
 	childCap;
 	ruled = /* @__PURE__ */ new Map();
+	/** Each component that draws a glyph by name → the prop that names it. */
+	glyphDrawers;
+	/** Each breakpoint's class prefix (`lg`) → whether it applied at the capture's width, and its rank. */
+	breakpoints;
+	/** Each modifier's class prefix (`md`) → the prop key its bag is written under (`_md`). */
+	modifierKeys;
 	constructor(options, grammar) {
 		this.options = options;
 		this.grammar = grammar;
 		this.childCap = options.childCap ?? DEFAULT_CHILD_CAP;
+		const drawers = /* @__PURE__ */ new Map();
+		for (const library of iconLibraries(options.config)) {
+			const drawer = glyphComponentOf(options.config, library.path);
+			if (drawer) drawers.set(drawer.path, drawer.prop);
+		}
+		this.glyphDrawers = drawers;
+		const width = options.width ?? DEFAULT_CAPTURE_WIDTH;
+		const breakpoints = /* @__PURE__ */ new Map();
+		for (const modifier of options.config.list("modifier")) {
+			const { type, value } = modifier.toJSON();
+			if (type !== "media-query" || typeof value !== "string") continue;
+			const min = /min-width:\s*(\d+(?:\.\d+)?)px/.exec(value);
+			const max = /max-width:\s*(\d+(?:\.\d+)?)px/.exec(value);
+			if (!min && !max) continue;
+			const active = (!min || width >= Number(min[1])) && (!max || width <= Number(max[1]));
+			breakpoints.set(modifier.leaf, {
+				active,
+				rank: min ? Number(min[1]) : 0
+			});
+		}
+		this.breakpoints = breakpoints;
+		this.modifierKeys = new Map(options.config.list("modifier").map((modifier) => [modifier.leaf, `_${modifier.leaf}`]));
 	}
 	convertTop(el) {
 		return this.convert(el);
@@ -200,15 +239,25 @@ var Converter = class {
 		}
 		return out;
 	}
-	/** The components under `layer`, skipping every other layer `path` marks inside it. */
-	convertOutsideLayers(layer, path) {
+	/**
+	* The components under `layer`, skipping every other layer `path` marks inside it. With
+	* `callerMarkup`, the layer is one a slot of elements lands on, so the unmarked markup in it is
+	* the caller's, kept as the plain tags it is, rather than the render's own.
+	*/
+	convertOutsideLayers(layer, path, callerMarkup = false) {
 		const out = [];
+		const mixed = callerMarkup && Array.from(layer.childNodes).some((node) => isElement(node) && visible(node));
 		for (let i = 0; i < layer.childNodes.length; i += 1) {
 			if (this.childCap > 0 && out.length >= this.childCap) break;
 			const node = layer.childNodes[i];
-			if (!isElement(node)) continue;
+			if (!isElement(node)) {
+				const text = (node.textContent ?? "").replace(/\s+/g, " ");
+				if (mixed && text.trim()) out.push(...this.plainTextRun(text, layer));
+				continue;
+			}
 			if (node.getAttribute("data-uds-component") === path && node.getAttribute("data-uds-layer") !== "root") continue;
 			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) && callerMarkup) out.push(...this.plain(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)));
 		}
@@ -222,10 +271,270 @@ 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));
+		if (el.hasAttribute(ORPHAN_LAYER)) return this.frame(el);
+		return this.plain(el);
+	}
+	/**
+	* What an element inside a component holds, by the rule for a component's render: a nested
+	* component is itself, and an unmarked element folds into what it holds, or is a frame when it
+	* places itself, since it may be the render's own markup rather than the page's.
+	*/
+	convertInside(el) {
+		const out = [];
+		for (let i = 0; i < el.childNodes.length; i += 1) {
+			if (this.childCap > 0 && out.length >= this.childCap) break;
+			const node = el.childNodes[i];
+			if (!isElement(node) || !visible(node)) continue;
+			if (node.tagName.toLowerCase() === "svg" || node.hasAttribute("data-uds-component") && node.getAttribute("data-uds-layer") === "root") out.push(...this.convert(node));
+			else if (isImage(node)) out.push(...this.image(node));
+			else if (isField(node)) out.push(...this.field(node));
+			else if (framesItself(node)) out.push(...this.frame(node));
+			else out.push(...this.pinFolded(node, this.convertInside(node)));
+		}
+		return out;
+	}
+	/**
+	* An unmarked element as the plain tag it is: an `img` keeps its source, a link its `href`, a field
+	* its type and placeholder, and its text stays inside it. Its styling is stored as classes, the way
+	* the canvas paints and the design panel edits a plain element: the classes it wears that the system
+	* names, then its own inline style and the styles its stylesheets gave it written as the system's
+	* classes (`16px` of gap is `gap-4`, an off-scale `13px` is `gap-[13px]`). What no style prop can
+	* hold stays as an inline style. A `div` or `span` that carries nothing only groups its children and
+	* folds away, as a wrapper the capture marked foldable does.
+	*/
+	plain(el, convertKids = () => this.plainChildren(el)) {
+		const tag = el.tagName.toLowerCase();
+		if (FORBIDDEN_TAGS.has(tag)) return [];
+		if (el.hasAttribute(FOLD)) return this.pinFolded(el, convertKids());
+		if ([...inlineDeclarations(el), ...declarationsOf(el.getAttribute("data-uds-computed") ?? "")].find(([property]) => property === "display")?.[1].trim() === "contents") return convertKids();
+		const { className, style, paints } = this.plainStyle(el);
+		const attrs = plainAttributes(el);
+		if (tag === "img" && !attrs.src) return [];
+		const children = VOID_TAGS.has(tag) ? [] : convertKids();
+		const text = children.length === 0 ? plainText(el) : "";
+		if (children.length === 0 && !text && !VOID_TAGS.has(tag) && !paints && !el.hasAttribute(EMBED_SPACE_ATTR)) return [];
+		if (!(className !== "" || Object.keys(style).length > 0 || Object.keys(attrs).length > 0) && GROUPING_TAGS.has(tag)) {
+			if (text) return this.plainTextRun(text);
+			return children;
+		}
+		const props = { ...attrs };
+		if (className) props.className = className;
+		if (Object.keys(style).length > 0) props.style = style;
+		if (text) props.children = text;
+		const key = this.key(tag);
+		this.elements[key] = {
+			type: tag,
+			props,
+			...children.length > 0 ? { children } : {}
+		};
+		return [key];
+	}
+	/**
+	* An inline SVG as itself: the `svg` and every shape in it, each with its attributes under the
+	* names React takes them by. Definitions it references (a clip path, a gradient) are left out with
+	* the references to them, since an id the capture copied may name nothing on the canvas.
+	*/
+	plainSvg(svg) {
+		if (holdsMoreThan(svg, SVG_SHAPE_LIMIT)) {
+			const covered = /* @__PURE__ */ new Set();
+			const size = (attr) => {
+				const value = svg.getAttribute(attr);
+				return value && /^\d+(?:\.\d+)?$/.test(value) ? this.classForDeclaration(attr, `${value}px`, covered) : void 0;
+			};
+			const className = [size("width"), size("height")].filter((cls) => !!cls && cls !== "covered").join(" ");
+			const key = this.key("div");
+			this.elements[key] = {
+				type: "div",
+				props: className ? { className } : {}
+			};
+			return key;
+		}
+		const build = (el) => {
+			const tag = el.tagName.toLowerCase();
+			const props = { [VERBATIM_ATTRIBUTES]: true };
+			const styled = [];
+			for (const { name, value } of el.attributes) {
+				if (SVG_SKIPPED_ATTRIBUTES.test(name)) continue;
+				if (name === "class" || name === "style") continue;
+				if (name === "width" || name === "height") continue;
+				const prop = svgAttributeName(name);
+				if (this.options.config.resolve("style-property", prop)) {
+					styled.push([name, value]);
+					continue;
+				}
+				props[prop] = value;
+			}
+			const { className, style } = this.plainStyle(el, styled);
+			if (className) props.className = className;
+			if (Object.keys(style).length > 0) props.style = style;
+			const children = [];
+			let text = "";
+			for (const node of el.childNodes) {
+				if (!isElement(node)) {
+					text += node.textContent ?? "";
+					continue;
+				}
+				if (SVG_SKIPPED_TAGS.has(node.tagName.toLowerCase())) continue;
+				children.push(build(node));
+			}
+			if (children.length === 0 && text.trim()) props.children = text.trim();
+			const key = this.key(SVG_TAGS.get(tag) ?? tag);
+			this.elements[key] = {
+				type: SVG_TAGS.get(tag) ?? tag,
+				props,
+				...children.length > 0 ? { children } : {}
+			};
+			return key;
+		};
+		return build(svg);
+	}
+	/** A plain element's content: its elements, and each run of text between them as a `span`. */
+	plainChildren(el) {
+		if (!Array.from(el.childNodes).some((node) => isElement(node) && visible(node))) return [];
+		const out = [];
+		for (let i = 0; i < el.childNodes.length; i += 1) {
+			if (this.childCap > 0 && out.length >= this.childCap) break;
+			const node = el.childNodes[i];
+			if (isElement(node)) {
+				out.push(...this.convert(node));
+				continue;
+			}
+			const text = (node.textContent ?? "").replace(/\s+/g, " ");
+			if (text.trim()) out.push(...this.plainTextRun(text));
+		}
+		return out;
+	}
+	/**
+	* A run of text as a `span`. It keeps how its holder wraps (`white-space: nowrap` on a nav item),
+	* which the holder, a component that takes no such prop, may have no way to say itself.
+	*/
+	plainTextRun(text, holder) {
+		const props = { children: text };
+		const wraps = declarationsOf(holder?.getAttribute("data-uds-computed") ?? "").find(([property]) => property === "white-space");
+		if (wraps) {
+			const cls = this.classForDeclaration("white-space", normalizeCssValue(wraps[1]), /* @__PURE__ */ new Set());
+			if (cls && cls !== "covered") props.className = cls;
+			else props.style = { whiteSpace: wraps[1] };
+		}
+		const key = this.key("span");
+		this.elements[key] = {
+			type: "span",
+			props
+		};
+		return [key];
+	}
+	/**
+	* A plain element's styling as the system's classes, and what none can hold as inline style. The
+	* page's own inline style painted over its classes, so it is read first and a class for a property it
+	* sets is dropped; the computed styles fill only what neither says.
+	*/
+	plainStyle(el, attributes = []) {
+		const classes = [];
+		const style = {};
+		const covered = /* @__PURE__ */ new Set();
+		let paints = false;
+		const notePaint = (property) => {
+			if (PAINT_PROPERTY.test(property)) paints = true;
+		};
+		const written = /* @__PURE__ */ new Set();
+		const fromDeclarations = (declarations) => {
+			for (const [property, raw] of declarations.flatMap(gridAreaLines)) {
+				if (written.has(property) || written.has(LOGICAL_SIDES[property] ?? property)) continue;
+				let value = normalizeCssValue(raw);
+				const paintNone = value === "none" && (property === "fill" || property === "stroke");
+				if (!value || SKIP_INLINE_PROPERTY.has(property) || SKIP_INLINE_VALUE.has(value) && !paintNone) 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);
+				const cls = this.classForDeclaration(property, value, covered);
+				if (cls === "covered") continue;
+				notePaint(property);
+				if (cls) {
+					classes.push(cls);
+					continue;
+				}
+				let placed = false;
+				for (const [longhand, part] of gridLonghands({
+					property,
+					value
+				})) {
+					const longClass = this.classForDeclaration(longhand, part, covered);
+					if (longClass && longClass !== "covered") classes.push(longClass);
+					placed = placed || longClass !== void 0;
+				}
+				if (!placed && !(camelCase(property) in style)) style[camelCase(property)] = raw.trim();
+			}
+		};
+		fromDeclarations(inlineDeclarations(el));
+		fromDeclarations(attributes);
+		fromDeclarations(["width", "height"].flatMap((attr) => {
+			const value = el.getAttribute(attr);
+			return value && /^\d+(?:\.\d+)?$/.test(value) ? [[attr, `${value}px`]] : [];
+		}));
+		const read = classesOf(el).flatMap((cls) => {
+			const each = this.readModifiedClass(cls);
+			if (!each) return [];
+			if (each.modifiers.length === 0 && covered.has(each.style.path)) return [];
+			const { properties = [] } = this.options.config.resolve("style-property", each.style.path)?.toJSON() ?? {};
+			const atoms = atomsOf(properties);
+			if (atoms.size === 0) atoms.add(`prop:${each.style.path}`);
+			return [{
+				...each,
+				properties,
+				atoms
+			}];
+		});
+		const winners = /* @__PURE__ */ new Map();
+		for (const each of read) for (const atom of each.atoms) {
+			const slot = `${each.modifiers.join(".")}|${atom}`;
+			const prior = winners.get(slot);
+			if (!prior || each.rank > prior.rank || each.rank === prior.rank && each.atoms.size < prior.atoms.size) winners.set(slot, each);
+		}
+		const painted = new Set(winners.values());
+		for (const each of read) {
+			if (!painted.has(each)) continue;
+			if (each.modifiers.length === 0) covered.add(each.style.path);
+			for (const property of each.properties) {
+				notePaint(property);
+				if (each.modifiers.length === 0) for (const longhand of longhandsOf(property)) written.add(longhand);
+			}
+			const owned = [...each.atoms].filter((atom) => winners.get(`${each.modifiers.join(".")}|${atom}`) === each);
+			classes.push(...owned.length < each.atoms.size ? this.narrowed(each, new Set(owned)) : [each.bare]);
+		}
+		fromDeclarations(declarationsOf(el.getAttribute("data-uds-computed") ?? ""));
+		return {
+			className: [...new Set(classes)].join(" "),
+			style,
+			paints
+		};
+	}
+	/**
+	* The system's class for one declaration: the class of the leaf whose value it is, or the bracket
+	* class of an off-scale value on a prop that takes one. `covered` when a prop for the property is
+	* already set, so the first source to set it wins; nothing when no prop writes the property.
+	*/
+	classForDeclaration(property, value, covered) {
+		const logical = LOGICAL_SIDES[property];
+		const options = [...this.grammar.stylePropsFor(property), ...logical ? this.grammar.stylePropsFor(logical) : []];
+		for (const option of options) {
+			if (covered.has(option.path)) return "covered";
+			const css = option.negates ? negated(value) : value;
+			if (css === void 0) continue;
+			const leaf = equivalents({
+				property,
+				value: css
+			}).map((spelling) => option.leafFor(spelling)).find((found) => found !== void 0);
+			let cls;
+			if (WHOLE_VIEWPORT.test(css) && option.fullLeaf !== void 0) cls = stylePropClassName(this.options.config, option.path, option.fullLeaf);
+			else if (leaf !== void 0) cls = stylePropClassName(this.options.config, option.path, leaf);
+			else if (option.arbitrary) cls = arbitraryClassName({
+				config: this.options.config,
+				path: option.path,
+				value: `[${css.replaceAll(" ", "_")}]`
+			});
+			if (cls === void 0) continue;
+			covered.add(option.path);
+			return cls;
+		}
 	}
 	/**
 	* The content of an unmarked wrapper the capture folded, with the wrapper's measured box written
@@ -236,6 +545,18 @@ var Converter = class {
 		const size = el.getAttribute(FOLD)?.match(/^(\d+(?:\.\d+)?)x(\d+(?:\.\d+)?)$/);
 		if (!size || keys.length !== 1 || el.hasAttribute("data-uds-component")) return keys;
 		const element = this.elements[keys[0]];
+		if (kindOf(element.type) !== "component") {
+			const covered = /* @__PURE__ */ new Set();
+			const sized = [this.classForDeclaration("width", `${size[1]}px`, covered), this.classForDeclaration("height", `${size[2]}px`, covered)].filter((cls) => !!cls && cls !== "covered");
+			const own = String(element.props.className ?? "").split(/\s+/).filter((cls) => {
+				const read = cls ? this.readModifiedClass(cls) : void 0;
+				if (!read || read.modifiers.length > 0) return Boolean(cls);
+				const atoms = this.styleAtoms().get(read.style.path);
+				return !(atoms?.has("width") || atoms?.has("height"));
+			});
+			element.props.className = [...own, ...sized].join(" ");
+			return keys;
+		}
 		const grammar = this.grammar.component(element.type.replace(/^component:/, ""));
 		if (grammar) this.propsFromDeclarations([["width", `${size[1]}px`], ["height", `${size[2]}px`]], grammar, element.props);
 		return keys;
@@ -247,7 +568,7 @@ var Converter = class {
 	* nothing.
 	*/
 	frame(el) {
-		const children = this.convertChildren(el);
+		const children = this.convertInside(el);
 		if (children.length === 0 && !paintsItself(el)) return [];
 		const role = canvasRole(this.options.config, "frame");
 		const grammar = role ? this.grammar.component(role.component) : void 0;
@@ -264,6 +585,102 @@ var Converter = class {
 		return [key];
 	}
 	/**
+	* The style props `classes` spell for a component with `grammar`, each class under a modifier
+	* prefix written into that modifier's bag (`md:hover:flex` → `_md._hover.display`). A class whose
+	* prefix names no modifier the config has, or whose prop the component does not take, is not read.
+	* A value already set is kept: the first class for a prop wins, as a stamped value does.
+	*/
+	stylePropsFromClasses(classes, grammar, props) {
+		const ranks = /* @__PURE__ */ new Map();
+		for (const cls of classes) {
+			const read = this.readModifiedClass(cls);
+			if (!read) continue;
+			const prop = grammar.propForStyleProperty.get(read.style.path);
+			if (!prop) continue;
+			const slot = `${read.modifiers.join(".")}|${prop}`;
+			const before = ranks.get(slot);
+			if (before !== void 0 && before >= read.rank) continue;
+			ranks.set(slot, read.rank);
+			let bag = props;
+			for (const key of read.modifiers) {
+				const inner = bag[key];
+				if (inner && typeof inner === "object" && !Array.isArray(inner)) bag = inner;
+				else if (inner === void 0) {
+					const next = {};
+					bag[key] = next;
+					bag = next;
+				} else bag = {};
+			}
+			bag[prop] = this.frameValue(read.style.path, read.style.leaf);
+		}
+	}
+	atomsByStyle;
+	/** Each style property → the physical longhands it writes. */
+	styleAtoms() {
+		if (!this.atomsByStyle) this.atomsByStyle = new Map(this.options.config.list("style-property").map((prop) => {
+			const { properties = [] } = prop.toJSON();
+			return [prop.path, atomsOf(properties)];
+		}));
+		return this.atomsByStyle;
+	}
+	/**
+	* A shorthand class that a narrower one overrode on some sides (`p-5` under `px-16`), as the
+	* classes for the sides it still painted (`py-5`), so the canvas's stylesheet order cannot let it
+	* win the others back. The class as written when the system has no narrower class at its value.
+	*/
+	narrowed(shorthand, owned) {
+		const config = this.options.config;
+		const options = /* @__PURE__ */ new Map();
+		for (const [path, atoms] of this.styleAtoms()) {
+			if (path === shorthand.style.path || atoms.size === 0) continue;
+			if ([...atoms].every((each) => owned.has(each))) options.set(path, atoms);
+		}
+		const left = new Set(owned);
+		const out = [];
+		for (const [path, atoms] of [...options].sort((a, b) => b[1].size - a[1].size)) {
+			if (![...atoms].every((each) => left.has(each))) continue;
+			const cls = stylePropClassName(config, path, shorthand.style.leaf);
+			if (this.grammar.styleProp(cls)?.path !== path) continue;
+			out.push(`${shorthand.prefix}${cls}`);
+			for (const each of atoms) left.delete(each);
+		}
+		return left.size === 0 ? out : [shorthand.bare];
+	}
+	/** A class as the modifier keys over it and the style prop it names, or nothing for one it doesn't. */
+	readModifiedClass(cls) {
+		const bracket = cls.indexOf("[");
+		const head = bracket === -1 ? cls : cls.slice(0, bracket);
+		const at = head.lastIndexOf(":");
+		const prefixes = at === -1 ? [] : head.slice(0, at).split(":");
+		const modifiers = [];
+		const kept = [];
+		let rank = 0;
+		for (const prefix of prefixes) {
+			const breakpoint = this.breakpoints.get(prefix);
+			if (breakpoint) {
+				if (!breakpoint.active) return void 0;
+				rank = Math.max(rank, breakpoint.rank);
+				continue;
+			}
+			const key = this.modifierKeys.get(prefix);
+			if (!key) return void 0;
+			modifiers.push(key);
+			kept.push(prefix);
+		}
+		let leaf = at === -1 ? cls : cls.slice(at + 1);
+		const important = /^!|!$/.test(leaf);
+		if (important) leaf = leaf.replace(/^!|!$/, "");
+		if (important) rank += IMPORTANT_RANK;
+		const style = this.grammar.styleProp(leaf);
+		return style ? {
+			modifiers,
+			style,
+			rank,
+			bare: [...kept, leaf].join(":"),
+			prefix: kept.map((each) => `${each}:`).join("")
+		} : void 0;
+	}
+	/**
 	* The styles the config gives an orphaned layer, as the frame's props: the rules that always apply
 	* and the ones its classes say are on, in authored order. Only values the frame component declares,
 	* spelled as an author writes them, are kept.
@@ -388,7 +805,8 @@ var Converter = class {
 	image(img) {
 		const src = img.getAttribute("src");
 		const role = canvasRole(this.options.config, "image");
-		if (!src || !role) return [];
+		if (!src) return [];
+		if (!role) return this.plain(img);
 		const props = { ...role.defaultProps };
 		const grammar = this.grammar.component(role.component);
 		if (grammar) {
@@ -443,7 +861,7 @@ var Converter = class {
 		const answer = this.options.icons?.resolve(svgOf(svg));
 		if (!answer) {
 			this.unresolvedIcons += 1;
-			return [];
+			return [this.plainSvg(svg)];
 		}
 		const key = this.key(answer.component);
 		this.elements[key] = {
@@ -461,8 +879,16 @@ var Converter = class {
 		const props = {};
 		const stamped = stampedProps(el);
 		if (grammar) this.propsFromClasses(el, grammar, props);
+		if (grammar) for (const [prop, raw] of Object.entries(grammar.declared)) {
+			if (stamped[prop] !== void 0) continue;
+			const declared = raw;
+			const attr = declared?.type === "forward" && declared.target?.__ref === "layer:root" && typeof declared.into === "string" ? declared.into : declared?.type === "string" && ROOT_ATTRIBUTE_PROPS.includes(prop) ? prop : void 0;
+			const value = attr ? el.getAttribute(attr) : null;
+			if (value) props[prop] = value;
+		}
 		Object.assign(props, stamped);
 		if (grammar) this.propsFromInlineStyle(el, grammar, props, path);
+		if (grammar) this.propsFromComputed(el, grammar, props, path);
 		const layerProps = stampedLayerProps({
 			el,
 			layers: this.layerNames(path)
@@ -476,9 +902,14 @@ var Converter = class {
 			if (answer) for (const [prop, value] of Object.entries(answer.props)) props[prop] ??= value;
 			else if (Object.keys(stamped).length === 0) {
 				this.unresolvedIcons += 1;
-				return;
+				return svg ? this.plainSvg(svg) : void 0;
 			}
 		}
+		const glyphProp = this.glyphDrawers.get(path);
+		if (glyphProp && props[glyphProp] === void 0) {
+			const svg = el.tagName.toLowerCase() === "svg" ? el : el.querySelector("svg");
+			if (svg) return this.plainSvg(svg);
+		}
 		const key = this.key(path);
 		const element = {
 			type: `component:${path}`,
@@ -486,8 +917,10 @@ var Converter = class {
 		};
 		const declared = grammar?.declared ?? {};
 		const slots = {};
-		for (const layer of asArray(el.querySelectorAll("[data-uds-slot]"))) {
-			if (nearestRoot(layer) !== el || hiddenBetween(layer, el)) continue;
+		let rootSlotted = false;
+		const marked = [...el.hasAttribute("data-uds-slot") ? [el] : [], ...asArray(el.querySelectorAll("[data-uds-slot]"))];
+		for (const layer of marked) {
+			if (layer !== el && layer.getAttribute("data-uds-layer") === "root" || layer !== el && nearestRoot(layer) !== el || hiddenBetween(layer, el)) continue;
 			const names = slotNames(layer).filter((slot) => !grammar || slot in declared);
 			const intoOf = (slot) => grammar?.layerProps.get(slot)?.into ?? "children";
 			const ownChildren = names.filter((slot) => intoOf(slot) === "children");
@@ -496,10 +929,13 @@ var Converter = class {
 				if (into === "children" && slot !== ownChildren.at(-1)) continue;
 				const holder = into === "children" ? layer : slotLayerNamed(layer, into);
 				if (!holder) continue;
-				const fills = holder === layer ? this.convertOutsideLayers(layer, path) : this.convertChildren(holder);
+				const declaration = declared[slot];
+				const callerMarkup = declaration?.type === "slot" && declaration.text !== true;
+				const fills = holder === layer ? this.convertOutsideLayers(layer, path, callerMarkup) : this.convertChildren(holder);
+				if (layer === el && holder === layer) rootSlotted = true;
 				if (fills.length > 0) slots[slot] = fills;
-				else if (holder !== layer) {
-					const text = collapse(ownText(holder));
+				else {
+					const text = collapse(holder === layer ? ownText(layer, /* @__PURE__ */ new Set()) : ownText(holder));
 					if (text) props[slot] = text;
 				}
 			}
@@ -541,7 +977,7 @@ var Converter = class {
 		}
 		const textSlot = declared.children;
 		const holdsText = textSlot?.type === "slot" && textSlot.text === true;
-		const loose = this.looseContent({
+		const loose = rootSlotted ? [] : this.looseContent({
 			el,
 			claimed,
 			takesGlyphs: !renders,
@@ -574,9 +1010,24 @@ 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" || prop === "layerProps") continue;
-			delete props[prop];
+		if (grammar) {
+			if (props.style !== void 0 && !("style" in declared)) {
+				const bags = props["layerProps"] ?? {};
+				const root = bags.root ?? {};
+				bags.root = {
+					...root,
+					style: {
+						...Object.fromEntries(Object.entries(props.style).map(([property, value]) => [property, inlineCss(value)])),
+						...root.style ?? {}
+					}
+				};
+				props[LAYER_PROPS] = bags;
+				delete props.style;
+			}
+			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;
@@ -593,11 +1044,7 @@ var Converter = class {
 				props[composite.prop] = composite.value;
 				continue;
 			}
-			const style = this.grammar.styleProp(cls);
-			if (style) {
-				const prop = grammar.propForStyleProperty.get(style.path);
-				if (prop && props[prop] === void 0) props[prop] = this.frameValue(style.path, style.leaf);
-			}
+			this.stylePropsFromClasses([cls], grammar, props);
 		}
 	}
 	/**
@@ -619,6 +1066,46 @@ var Converter = class {
 	propsFromInlineStyle(el, grammar, props, path) {
 		this.propsFromDeclarations(inlineDeclarations(el), grammar, props, path === void 0 ? void 0 : this.ruledProperties(path));
 	}
+	/**
+	* The styles the page's own classes gave a component's root, from what the browser computed, for
+	* the CSS properties the component does not set itself: a stack's `display` and direction are its
+	* own, while the width and flex share an app's Tailwind gave it are the page's, and no prop said
+	* them. A property a rule, a default or a prop already read sets is left to that.
+	*/
+	propsFromComputed(el, grammar, props, path) {
+		const computed = el.getAttribute(COMPUTED_STYLE_ATTR);
+		if (!computed) return;
+		const own = new Set(this.ruledProperties(path));
+		const { defaultProps = {} } = Component.get(this.options.config, path) ?? {};
+		const named = new Set(Object.keys(props));
+		for (const [stylePath, prop] of grammar.propForStyleProperty) {
+			if (!named.has(prop)) continue;
+			for (const property of StyleProperty.get(this.options.config, stylePath)?.properties ?? []) for (const each of longhandsOf(property)) own.add(each);
+		}
+		const fill = {};
+		const unheld = {};
+		for (const declaration of declarationsOf(computed)) {
+			const [property, value] = declaration;
+			if (own.has(property) || own.has(LOGICAL_SIDES[property] ?? property)) continue;
+			const before = Object.keys(fill).length;
+			this.propsFromDeclarations([declaration], grammar, fill);
+			if (Object.keys(fill).length === before && COMPONENT_INLINE_LAYOUT.has(property)) {
+				const arbitrary = this.grammar.stylePropsFor(property).some((option) => option.arbitrary);
+				unheld[camelCase(property)] = arbitrary ? `[${normalizeCssValue(value).replaceAll(" ", "_")}]` : value;
+			}
+		}
+		for (const [prop, value] of Object.entries(fill)) {
+			if (props[prop] !== void 0 || defaultProps[prop] === value) continue;
+			props[prop] = value;
+		}
+		if (Object.keys(unheld).length > 0) {
+			const own = props.style ?? {};
+			props.style = {
+				...unheld,
+				...own
+			};
+		}
+	}
 	/** The CSS properties a component's own style rules write on its root layer. */
 	ruledProperties(path) {
 		const known = this.ruled.get(path);
@@ -744,6 +1231,226 @@ const ARTBOARD = [
 ];
 /** How a single-line input lays out its text: centred across its height. */
 const INPUT_LINE = [["display", "flex"], ["align-items", "center"]];
+/** Tags the canvas refuses to render, which a capture leaves out. */
+/** A value in class form (`[304px_auto]`) as the CSS it stands for (`304px auto`); others as they are. */
+function inlineCss(value) {
+	if (typeof value !== "string" || !/^\[.*\]$/.test(value)) return value;
+	return value.slice(1, -1).replace(/url\([^)]*\)|_/g, (span) => span === "_" ? " " : span);
+}
+/** Whether `el` holds more than `limit` elements, counted until the limit is passed. */
+function holdsMoreThan(el, limit) {
+	let count = 0;
+	const visit = (node) => {
+		for (const child of node.children) {
+			count += 1;
+			if (count > limit || visit(child)) return true;
+		}
+		return false;
+	};
+	return visit(el);
+}
+/** The most shapes a drawing the capture keeps as itself may hold. */
+const SVG_SHAPE_LIMIT = 300;
+const FORBIDDEN_TAGS = new Set([
+	"script",
+	"style",
+	"noscript",
+	"template",
+	"iframe",
+	"object",
+	"embed",
+	"base",
+	"link",
+	"meta"
+]);
+const SIDES = [
+	"top",
+	"right",
+	"bottom",
+	"left"
+];
+const CORNERS = [
+	"top-left",
+	"top-right",
+	"bottom-right",
+	"bottom-left"
+];
+/** A property with the longhands a shorthand of it sets, physical and logical. */
+/** Outranks any breakpoint's rank, which is its min-width in pixels. */
+const IMPORTANT_RANK = 1e6;
+/** The physical longhands a set of CSS properties writes: `margin-inline` → margin-left, margin-right. */
+function atomsOf(properties) {
+	const physical = new Map(Object.entries(LOGICAL_SIDES).map(([side, logical]) => [logical, side]));
+	const atoms = /* @__PURE__ */ new Set();
+	for (const property of properties) for (const each of longhandsOf(property)) {
+		const side = physical.get(each) ?? each;
+		if (longhandsOf(side).length <= 1) atoms.add(side);
+	}
+	return atoms;
+}
+function longhandsOf(property) {
+	const boxed = /^(padding|margin)(-inline|-block)?$/.exec(property);
+	if (boxed) {
+		const [, box, axis] = boxed;
+		return [property, ...(axis === "-inline" ? ["left", "right"] : axis === "-block" ? ["top", "bottom"] : SIDES).flatMap((side) => [`${box}-${side}`, LOGICAL_SIDES[`${box}-${side}`] ?? ""])].filter(Boolean);
+	}
+	switch (property) {
+		case "inset": return [property, ...SIDES];
+		case "gap": return [
+			property,
+			"row-gap",
+			"column-gap"
+		];
+		case "overflow": return [
+			property,
+			"overflow-x",
+			"overflow-y"
+		];
+		case "border-radius": return [property, ...CORNERS.map((corner) => `border-${corner}-radius`)];
+		case "border-width":
+		case "border-color":
+		case "border-style": {
+			const part = property.slice(7);
+			return [property, ...SIDES.map((side) => `border-${side}-${part}`)];
+		}
+		default: return [property];
+	}
+}
+/** Each physical side's logical name in a left-to-right page. */
+const LOGICAL_SIDES = {
+	"padding-left": "padding-inline-start",
+	"padding-right": "padding-inline-end",
+	"margin-left": "margin-inline-start",
+	"margin-right": "margin-inline-end",
+	"border-left-width": "border-inline-start-width",
+	"border-right-width": "border-inline-end-width",
+	"border-left-color": "border-inline-start-color",
+	"border-right-color": "border-inline-end-color",
+	left: "inset-inline-start",
+	right: "inset-inline-end",
+	"border-top-left-radius": "border-start-start-radius",
+	"border-top-right-radius": "border-start-end-radius",
+	"border-bottom-left-radius": "border-end-start-radius",
+	"border-bottom-right-radius": "border-end-end-radius"
+};
+/** The renderer's `VERBATIM_ATTRIBUTES` key (`renderer/wrappers/html-aliases`), spelled here so the
+*  capture does not load the React renderer. */
+const VERBATIM_ATTRIBUTES = "__verbatimAttributes";
+/** SVG attributes a copied drawing leaves out: script handlers, ids and references to definitions. */
+const SVG_SKIPPED_ATTRIBUTES = /^(on|data-|id$|clip-path$|mask$|filter$|xlink:href$|href$)/;
+/** SVG elements a copied drawing leaves out: its definitions, and what holds only them. */
+const SVG_SKIPPED_TAGS = new Set([
+	"defs",
+	"clippath",
+	"mask",
+	"lineargradient",
+	"radialgradient",
+	"filter",
+	"pattern",
+	"symbol",
+	"script",
+	"style",
+	"title",
+	"desc",
+	"use"
+]);
+/** SVG tags whose case the captured tree lost. */
+const SVG_TAGS = new Map([["foreignobject", "foreignObject"]]);
+/** An SVG attribute under the name React takes it by: `fill-rule` is `fillRule`, `viewBox` stays. */
+function svgAttributeName(name) {
+	if (name === "viewbox") return "viewBox";
+	if (name.startsWith("aria-") || name === "role") return name;
+	if (name === "xmlns" || name === "xmlns:xlink") return name === "xmlns" ? "xmlns" : "xmlnsXlink";
+	return name.replace(/[-:]([a-z])/g, (_, letter) => letter.toUpperCase());
+}
+/** The layout a component's root may need inline when none of its props can say it. */
+const COMPONENT_INLINE_LAYOUT = new Set([
+	"grid-template-columns",
+	"grid-template-rows",
+	"grid-column",
+	"grid-row",
+	"white-space",
+	"aspect-ratio",
+	"flex-basis",
+	"flex-grow",
+	"flex-shrink",
+	"max-width",
+	"min-width"
+]);
+/** The width a capture is read at when it states none, which settles its breakpoints. */
+const DEFAULT_CAPTURE_WIDTH = 1600;
+/** The attributes a component's root renders a string prop of the same name as. */
+const ROOT_ATTRIBUTE_PROPS = [
+	"src",
+	"alt",
+	"href",
+	"title",
+	"placeholder"
+];
+/** The CSS properties that draw something of an element's own. */
+const PAINT_PROPERTY = /^(background|border-(top-|right-|bottom-|left-)?(width|color)|box-shadow|outline)/;
+/** Tags that only group what they hold, and fold away when they carry nothing of their own. */
+const GROUPING_TAGS = new Set(["div", "span"]);
+/** Tags with no content. */
+const VOID_TAGS = new Set([
+	"img",
+	"input",
+	"br",
+	"hr",
+	"wbr",
+	"area",
+	"col",
+	"source",
+	"track"
+]);
+/** The attributes a plain element keeps, as the props React takes them under. */
+const PLAIN_ATTRIBUTES = {
+	href: "href",
+	src: "src",
+	alt: "alt",
+	title: "title",
+	role: "role",
+	type: "type",
+	placeholder: "placeholder",
+	name: "name",
+	target: "target",
+	rel: "rel",
+	colspan: "colSpan",
+	rowspan: "rowSpan",
+	for: "htmlFor"
+};
+function plainAttributes(el) {
+	const out = {};
+	const tag = el.tagName.toLowerCase();
+	for (const [attr, prop] of Object.entries(PLAIN_ATTRIBUTES)) {
+		const value = el.getAttribute(attr);
+		if (value === null || value === void 0) continue;
+		if ((attr === "href" || attr === "src") && /^\s*javascript:/i.test(value)) continue;
+		out[prop] = value;
+	}
+	for (const { name, value } of el.attributes) if (name.startsWith("aria-")) out[name] = value;
+	if (tag === "input" || tag === "textarea") {
+		const value = tag === "textarea" ? el.textContent ?? "" : el.getAttribute("value");
+		if (value) out.defaultValue = value;
+	}
+	return out;
+}
+/** The text an element holds directly, its whitespace collapsed; empty for a field. */
+/** An element's text as it showed: what a hidden descendant (a tooltip, `hidden`) holds is left out. */
+function plainText(el) {
+	if (isField(el)) return "";
+	let text = "";
+	const read = (node) => {
+		for (const child of node.childNodes) if (child.nodeType === 3) text += child.textContent ?? "";
+		else if (child.nodeType === 1 && visible(child)) read(child);
+	};
+	read(el);
+	return text.replace(/\s+/g, " ").trim();
+}
+function camelCase(property) {
+	if (property.startsWith("--")) return property;
+	return property.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
+}
 function isImage(el) {
 	return el.tagName.toLowerCase() === "img" && !el.hasAttribute("data-uds-component");
 }
@@ -816,8 +1523,12 @@ function paintsItself(el) {
 }
 /** An element's inline declarations as `[property, value]` pairs. */
 function inlineDeclarations(el) {
+	return declarationsOf(el.getAttribute("style") ?? "");
+}
+/** A declaration list (`display: flex; gap: 8px`) as property and value pairs. */
+function declarationsOf(text) {
 	const out = [];
-	for (const declaration of (el.getAttribute("style") ?? "").split(";")) {
+	for (const declaration of text.split(";")) {
 		const at = declaration.indexOf(":");
 		if (at < 0) continue;
 		const property = declaration.slice(0, at).trim().toLowerCase();
@@ -841,6 +1552,8 @@ function negated(value) {
 */
 function equivalents({ property, value }) {
 	if ((property === "grid-column" || property === "grid-row") && /^span \d+$/.test(value)) return [value, `${value} / ${value}`];
+	const px = /^(-?(?:\d+(?:\.\d+)?|\.\d+))px$/.exec(value);
+	if (px) return [value, `${Number(px[1]) / 16}rem`];
 	return [value];
 }
 /**