@yahoo/uds-create-config 4.11.0 → 4.12.1

package/dist/capture/captured-tree.js

@@ -0,0 +1,201 @@
+import { z } from "zod";
+//#region src/capture/captured-tree.ts
+const CapturedNode = z.lazy(() => z.object({
+	tag: z.string().min(1),
+	attrs: z.record(z.string(), z.string()).optional(),
+	children: z.array(z.union([z.string(), CapturedNode])).optional()
+}));
+const ELEMENT_NODE = 1;
+const TEXT_NODE = 3;
+var CapturedText = class {
+	nodeType = TEXT_NODE;
+	constructor(textContent, parentElement) {
+		this.textContent = textContent;
+		this.parentElement = parentElement;
+	}
+};
+/** The slice of the DOM element API the converter walks, over captured data. */
+var CapturedElement = class {
+	nodeType = ELEMENT_NODE;
+	tagName;
+	childNodes = [];
+	parentElement = null;
+	constructor(tag, attrs) {
+		this.attrs = attrs;
+		this.tagName = tag.toLowerCase();
+	}
+	getAttribute(name) {
+		return this.attrs[name] ?? null;
+	}
+	hasAttribute(name) {
+		return name in this.attrs;
+	}
+	get attributes() {
+		return Object.entries(this.attrs).map(([name, value]) => ({
+			name,
+			value
+		}));
+	}
+	get textContent() {
+		return this.childNodes.map((node) => node.textContent).join("");
+	}
+	get children() {
+		return this.childNodes.filter(isCapturedElement);
+	}
+	querySelectorAll(selector) {
+		const matchers = parseSelector(selector);
+		const out = [];
+		const walk = (el) => {
+			for (const child of el.children) {
+				if (matchers.some((m) => m(child))) out.push(child);
+				walk(child);
+			}
+		};
+		walk(this);
+		return out;
+	}
+	querySelector(selector) {
+		const matchers = parseSelector(selector);
+		const walk = (el) => {
+			for (const child of el.children) {
+				if (matchers.some((m) => m(child))) return child;
+				const hit = walk(child);
+				if (hit) return hit;
+			}
+			return null;
+		};
+		return walk(this);
+	}
+	closest(selector) {
+		const matchers = parseSelector(selector);
+		let el = this;
+		while (el) {
+			if (matchers.some((m) => m(el))) return el;
+			el = el.parentElement;
+		}
+		return null;
+	}
+	/** Back to data, for a host that rewrites part of a tree. */
+	toJSON() {
+		return {
+			tag: this.tagName,
+			...Object.keys(this.attrs).length > 0 ? { attrs: { ...this.attrs } } : {},
+			...this.childNodes.length > 0 ? { children: this.childNodes.map((node) => isCapturedElement(node) ? node.toJSON() : node.textContent) } : {}
+		};
+	}
+};
+function isCapturedElement(node) {
+	return node.nodeType === ELEMENT_NODE;
+}
+/** A captured tree as elements the converter can walk. */
+function elementFromCaptured(node, parent = null) {
+	const el = new CapturedElement(node.tag, node.attrs ?? {});
+	el.parentElement = parent;
+	for (const child of node.children ?? []) el.childNodes.push(typeof child === "string" ? new CapturedText(child, el) : elementFromCaptured(child, el));
+	return el;
+}
+/**
+* A captured tree from a parsed DOM element, for a host: scripts, styles and templates carry no
+* rendered content and are left out, as is whitespace-only text.
+*/
+function capturedFromDom(el) {
+	const attrs = {};
+	for (const attribute of Array.from(el.attributes ?? [])) attrs[attribute.name] = attribute.value;
+	const children = [];
+	for (const child of Array.from(el.childNodes ?? [])) {
+		if (child.nodeType === TEXT_NODE) {
+			const text = child.textContent ?? "";
+			if (text.trim()) children.push(text);
+			continue;
+		}
+		if (child.nodeType !== ELEMENT_NODE) continue;
+		const tag = (child.tagName ?? "").toLowerCase();
+		if (SKIPPED_TAGS.has(tag)) continue;
+		children.push(capturedFromDom(child));
+	}
+	return {
+		tag: (el.tagName ?? "div").toLowerCase(),
+		...Object.keys(attrs).length > 0 ? { attrs } : {},
+		...children.length > 0 ? { children } : {}
+	};
+}
+const SKIPPED_TAGS = new Set([
+	"script",
+	"style",
+	"noscript",
+	"template",
+	"link"
+]);
+const selectorCache = /* @__PURE__ */ new Map();
+function parseSelector(selector) {
+	const cached = selectorCache.get(selector);
+	if (cached) return cached;
+	const matchers = selector.split(",").map((part) => compound(part.trim()));
+	selectorCache.set(selector, matchers);
+	return matchers;
+}
+const isTagStart = (ch) => /[a-zA-Z]/.test(ch);
+const isTagChar = (ch) => /[\w-]/.test(ch);
+/**
+* One compound selector, read left to right in one pass: an optional tag, then any number of
+* `[name]` or `[name=value]` tests, the value bare or quoted. A single scan rather than a pattern,
+* since a pattern with nested repetition over `[` backtracks polynomially on a malformed selector.
+*/
+function parseCompound(selector) {
+	const unsupported = () => /* @__PURE__ */ new Error(`Unsupported selector "${selector}".`);
+	let at = 0;
+	let tag;
+	if (at < selector.length && isTagStart(selector[at])) {
+		const start = at;
+		at += 1;
+		while (at < selector.length && isTagChar(selector[at])) at += 1;
+		tag = selector.slice(start, at).toLowerCase();
+	}
+	const attributes = [];
+	while (at < selector.length) {
+		if (selector[at] !== "[") throw unsupported();
+		at += 1;
+		const nameStart = at;
+		while (at < selector.length && selector[at] !== "]" && selector[at] !== "=") at += 1;
+		if (at === nameStart || at === selector.length) throw unsupported();
+		const name = selector.slice(nameStart, at);
+		let value;
+		if (selector[at] === "=") {
+			at += 1;
+			const quote = selector[at];
+			if (quote === "\"" || quote === "'") {
+				const close = selector.indexOf(quote, at + 1);
+				if (close === -1) throw unsupported();
+				value = selector.slice(at + 1, close);
+				at = close + 1;
+			} else {
+				const close = selector.indexOf("]", at);
+				if (close === -1) throw unsupported();
+				value = selector.slice(at, close);
+				at = close;
+			}
+		}
+		if (selector[at] !== "]") throw unsupported();
+		at += 1;
+		attributes.push(value === void 0 ? { name } : {
+			name,
+			value
+		});
+	}
+	return {
+		tag,
+		attributes
+	};
+}
+function compound(selector) {
+	const { tag, attributes } = parseCompound(selector);
+	return (el) => {
+		if (tag && el.tagName !== tag) return false;
+		for (const { name, value } of attributes) if (value === void 0) {
+			if (!el.hasAttribute(name)) return false;
+		} else if (el.getAttribute(name) !== value) return false;
+		return true;
+	};
+}
+//#endregion
+export { CapturedNode, capturedFromDom, elementFromCaptured, isCapturedElement };

package/dist/capture/class-grammar.d.ts

@@ -0,0 +1,64 @@
+import { Config } from "../framework/Config.js";
+
+//#region src/capture/class-grammar.d.ts
+/**
+ * The class grammar an emitted component wears, inverted: the same config-derived functions the
+ * emitter spells classes with, read the other way. A style value's class comes from
+ * `stylePropClasses`, a style rule's condition class from `componentRuleClasses`, and a
+ * composite-typed prop's class from the composite's own `className`, so a captured class maps back
+ * to the prop and value that produced it without a hand-written table.
+ */
+interface StylePropMatch {
+  /** The style property the class belongs to. */
+  readonly path: string;
+  /** The value as a call site spells it (`carbon/5`, `1.5`). */
+  readonly leaf: string;
+}
+interface ComponentGrammar {
+  /** A style rule's condition class → the prop values it stands for. */
+  readonly conditions: ReadonlyMap<string, Record<string, unknown>>;
+  /** A composite class on the root layer → the composite-typed prop and its value. */
+  readonly composites: ReadonlyMap<string, {
+    prop: string;
+    value: string;
+  }>;
+  /** The style property each declared style prop writes, inverted: style property path → prop name. */
+  readonly propForStyleProperty: ReadonlyMap<string, string>;
+  /** Every prop the component declares or forwards, by name. */
+  readonly declared: Readonly<Record<string, unknown>>;
+  /**
+   * Props read off one of the component's layers: a forward routed into a layer (`content`, landing
+   * on the prop `into` names, `children` unless the route says otherwise), and a string prop named
+   * like a layer, which reads that layer's text.
+   */
+  readonly layerProps: ReadonlyMap<string, {
+    layer: string;
+    content: boolean;
+    into?: string;
+  }>;
+  /** Layer classes → layer name. */
+  readonly layers: ReadonlyMap<string, string>;
+}
+/** A style property that writes one CSS property, read back from a CSS declaration. */
+interface CssPropertyMatch {
+  readonly path: string;
+  /** Whether the property takes an off-scale `[value]`. */
+  readonly arbitrary: boolean;
+  /** The leaf whose value is this CSS value, as `var(--…)` or as the literal it resolves to. */
+  leafFor(cssValue: string): string | undefined;
+  /** The leaf that fills the container (`100%`), which is what a viewport unit means inside a frame. */
+  readonly fullLeaf: string | undefined;
+}
+interface ClassGrammar {
+  styleProp(cls: string): StylePropMatch | undefined;
+  /** The style properties that write `cssProperty`, the ones writing only it first. */
+  stylePropsFor(cssProperty: string): readonly CssPropertyMatch[];
+  /** Whether a leaf's value is in viewport units, which measure the canvas rather than the frame. */
+  viewportLeaf(path: string, leaf: string): boolean;
+  /** The leaf of a style property whose value fills the container (`100%`). */
+  fullLeaf(path: string): string | undefined;
+  component(path: string): ComponentGrammar | undefined;
+}
+declare function classGrammar(config: Config): ClassGrammar;
+//#endregion
+export { ClassGrammar, classGrammar };

package/dist/capture/class-grammar.js

@@ -0,0 +1,131 @@
+import { isRef, pathOf } from "../framework/utils/refs.js";
+import { className, cssVarRef, resolveComponentProps, resolveTokenValue, stylePropEntries } from "../framework/projections.js";
+import { componentLayerClass, componentRuleClasses, stylePropClasses } from "../framework/class-names.js";
+import { intoName, routesContent } from "../framework/prop-surface.js";
+//#region src/capture/class-grammar.ts
+const VIEWPORT_UNIT = /\d(vh|vw|dvh|dvw|svh|svw|lvh|lvw|vmin|vmax)\b/;
+/** `0px` → `0`, collapsed spaces, lowercase keywords; what two spellings of one value share. */
+function normalizeCssValue(value) {
+	return value.trim().replace(/\s+/g, " ").replace(/(^|[\s,(])0(?:px|rem|em|%)(?=$|[\s,)])/g, "$10").toLowerCase();
+}
+function classGrammar(config) {
+	const styleProps = /* @__PURE__ */ new Map();
+	for (const entity of config.list("style-property")) for (const [leaf, cls] of stylePropClasses(config, entity.path)) if (!styleProps.has(cls)) styleProps.set(cls, {
+		path: entity.path,
+		leaf
+	});
+	const composites = config.list("composite").map((entity) => ({
+		path: entity.path,
+		cls: className(config, "composite", entity.path)
+	}));
+	const byCss = /* @__PURE__ */ new Map();
+	const leafValues = /* @__PURE__ */ new Map();
+	const valuesOf = (path) => {
+		let known = leafValues.get(path);
+		if (known) return known;
+		known = /* @__PURE__ */ new Map();
+		for (const entry of stylePropEntries(config, path)) {
+			const spellings = [];
+			if (config.resolve("token", entry.value)) {
+				spellings.push(normalizeCssValue(cssVarRef(config, "token", entry.value)));
+				const literal = resolveTokenValue(config, entry.value);
+				if (typeof literal === "string") spellings.push(normalizeCssValue(literal));
+			} else spellings.push(normalizeCssValue(String(entry.value)));
+			known.set(entry.leaf, spellings);
+		}
+		leafValues.set(path, known);
+		return known;
+	};
+	const matchFor = (path, arbitrary) => ({
+		path,
+		arbitrary,
+		leafFor(cssValue) {
+			const wanted = normalizeCssValue(cssValue);
+			for (const [leaf, spellings] of valuesOf(path)) if (spellings.includes(wanted)) return leaf;
+		},
+		get fullLeaf() {
+			for (const [leaf, spellings] of valuesOf(path)) if (spellings.includes("100%")) return leaf;
+		}
+	});
+	for (const entity of config.list("style-property")) {
+		const body = entity.toJSON();
+		const properties = body.properties ?? [];
+		for (const property of properties) {
+			const list = byCss.get(property) ?? [];
+			list.push(matchFor(entity.path, body.arbitrary === true));
+			byCss.set(property, list);
+		}
+	}
+	const propertyCount = /* @__PURE__ */ new Map();
+	for (const entity of config.list("style-property")) propertyCount.set(entity.path, (entity.toJSON().properties ?? []).length);
+	for (const list of byCss.values()) list.sort((a, b) => (propertyCount.get(a.path) ?? 0) - (propertyCount.get(b.path) ?? 0));
+	const components = /* @__PURE__ */ new Map();
+	const componentGrammar = (path) => {
+		const component = config.resolve("component", path);
+		if (!component) return void 0;
+		const declared = resolveComponentProps(config, path);
+		const conditions = /* @__PURE__ */ new Map();
+		for (const rule of componentRuleClasses(config, path)) conditions.set(rule.className, rule.when);
+		const compositeProps = /* @__PURE__ */ new Map();
+		const propForStyleProperty = /* @__PURE__ */ new Map();
+		for (const [prop, declaration] of Object.entries(declared)) {
+			if (!declaration || typeof declaration !== "object") continue;
+			if (declaration.type === "styleProperty" && isRef(declaration.value)) {
+				const stylePath = pathOf(declaration.value.__ref);
+				if (!propForStyleProperty.has(stylePath)) propForStyleProperty.set(stylePath, prop);
+			}
+			if (declaration.type === "composite" && isRef(declaration.value)) {
+				const group = pathOf(declaration.value.__ref);
+				for (const composite of composites) {
+					if (!composite.path.startsWith(`${group}/`)) continue;
+					compositeProps.set(composite.cls, {
+						prop,
+						value: composite.path.slice(group.length + 1)
+					});
+				}
+			}
+		}
+		const layers = /* @__PURE__ */ new Map();
+		const body = component.toJSON();
+		for (const layer of Object.keys(body.layers ?? {})) layers.set(componentLayerClass(config, path, layer), layer);
+		const layerProps = /* @__PURE__ */ new Map();
+		for (const [prop, declaration] of Object.entries(declared)) {
+			if (!declaration || typeof declaration !== "object") continue;
+			if (declaration.type === "forward" && routesContent(config, body.layers, declaration)) {
+				const target = declaration.target;
+				if (isRef(target)) layerProps.set(prop, {
+					layer: pathOf(target.__ref),
+					content: true,
+					into: intoName(declaration.into)
+				});
+			} else if (declaration.type === "string" && body.layers?.[prop] !== void 0 && prop !== "root") layerProps.set(prop, {
+				layer: prop,
+				content: false
+			});
+		}
+		return {
+			conditions,
+			composites: compositeProps,
+			propForStyleProperty,
+			declared,
+			layerProps,
+			layers
+		};
+	};
+	return {
+		styleProp: (cls) => styleProps.get(cls),
+		stylePropsFor: (cssProperty) => byCss.get(cssProperty.toLowerCase()) ?? [],
+		viewportLeaf(path, leaf) {
+			return (valuesOf(path).get(leaf) ?? []).some((v) => VIEWPORT_UNIT.test(v));
+		},
+		fullLeaf(path) {
+			for (const [leaf, spellings] of valuesOf(path)) if (spellings.includes("100%")) return leaf;
+		},
+		component(path) {
+			if (!components.has(path)) components.set(path, componentGrammar(path));
+			return components.get(path);
+		}
+	};
+}
+//#endregion
+export { classGrammar, normalizeCssValue };

package/dist/capture/fixtures/tree-from-html.d.ts

@@ -0,0 +1,3 @@
+import { type CapturedNodeJson } from '../captured-tree';
+/** A captured tree from an HTML string, for tests: what a host's parser hands the op. */
+export declare function treeFromHtml(html: string): CapturedNodeJson;

package/dist/capture/icon-resolver.d.ts

@@ -0,0 +1,59 @@
+import { Config } from "../framework/Config.js";
+import { CapturedNodeJson } from "./captured-tree.js";
+import { IconHook } from "./capture-to-spec.js";
+import { IconLibrary } from "../entities/system/icon-library.js";
+
+//#region src/capture/icon-resolver.d.ts
+/**
+ * Names an inline SVG by matching its path data against the glyphs of the config's icon libraries.
+ *
+ * Everything about a library is read off its group node: the package its glyphs come from
+ * (`metadata.from`), the named sizes (`sizes`) and the weights it ships (`variants`). The component
+ * that renders them is the one whose variant prop names the library; its props are found by what
+ * they reference: the prop bound to the library is the glyph name, the one bound to `#variants` is
+ * the weight, and the prop whose values are the library's size names is the size. The host reads
+ * the glyph files, since a package's layout on disk is the host's to know.
+ */
+/** Where a library's glyph files come from: the catalogue package its metadata names, and its format. */
+interface GlyphSource {
+  readonly library: IconLibrary;
+  /** The package the glyphs are read from (`metadata.from`). */
+  readonly module: string;
+  readonly format: string;
+}
+interface IconGlyph {
+  readonly name: string;
+  readonly variant: string;
+  readonly paths: readonly string[];
+}
+/** Every library whose group declares a metadata source and a component draws from, so a host knows
+ *  which package to read. */
+declare function glyphSourcesOf(config: Config): GlyphSource[];
+/**
+ * The `icons` hook for `htmlToSpec`, over every library `glyphs` can read. A library the host
+ * cannot read (`glyphs` answers `undefined`) is skipped.
+ */
+declare function iconResolver({
+  config,
+  glyphs
+}: {
+  readonly config: Config;
+  readonly glyphs: (source: GlyphSource) => readonly IconGlyph[] | undefined;
+}): IconHook;
+/**
+ * A captured tree with its glyphs named, for a host: an inline `<svg>` the hook can name becomes a
+ * stamped root of the component that renders it, and an svg inside such a renderer's root stamps
+ * the renderer instead. An svg no library owns is left as it is, and counted.
+ */
+declare function nameIconsInTree({
+  tree,
+  hook
+}: {
+  tree: CapturedNodeJson;
+  hook: IconHook;
+}): {
+  tree: CapturedNodeJson;
+  unresolved: number;
+};
+//#endregion
+export { GlyphSource, IconGlyph, glyphSourcesOf, iconResolver, nameIconsInTree };

package/dist/capture/icon-resolver.js

@@ -0,0 +1,205 @@
+import { pathOf } from "../framework/utils/refs.js";
+import { glyphComponentOf, resolveComponentProps } from "../framework/projections.js";
+import { iconLibraries } from "../entities/system/icon-library.js";
+//#region src/capture/icon-resolver.ts
+/** Every library whose group declares a metadata source and a component draws from, so a host knows
+*  which package to read. */
+function glyphSourcesOf(config) {
+	const out = [];
+	for (const library of iconLibraries(config)) {
+		const meta = config.groupMeta("icon", library.path);
+		const from = meta?.metadata?.from?.__ref;
+		const format = meta?.metadata?.format;
+		if (!from || !format || !glyphComponentOf(config, library.path)) continue;
+		out.push({
+			library,
+			module: pathOf(from),
+			format
+		});
+	}
+	return out;
+}
+function refOf(decl) {
+	return decl?.value?.__ref;
+}
+function listedValues(decl) {
+	const value = decl?.value;
+	if (Array.isArray(value)) return value.filter((v) => typeof v === "string");
+	if (value && typeof value === "object") return Object.keys(value);
+	return [];
+}
+function indexLibrary(config, library, glyphs) {
+	const drawer = glyphComponentOf(config, library.path);
+	if (!drawer) return void 0;
+	const component = drawer.path;
+	const declared = resolveComponentProps(config, component);
+	let nameProp;
+	let variantProp;
+	let sizeProp;
+	const sizeNames = Object.keys(library.sizes);
+	for (const [prop, decl] of Object.entries(declared)) {
+		if (decl?.type !== "variant") continue;
+		const ref = refOf(decl);
+		if (ref === `icon:${library.path}`) nameProp = prop;
+		else if (ref === `icon:${library.path}#variants`) variantProp = prop;
+		else if (sizeNames.length > 0 && sizeNames.every((size) => listedValues(decl).includes(size))) sizeProp = prop;
+	}
+	if (!nameProp) return void 0;
+	const defaultVariant = library.defaultVariant ?? library.variants[0];
+	const ordered = [...glyphs].sort((a, b) => {
+		const rank = (g) => g.variant === defaultVariant ? 0 : 1;
+		return rank(a) - rank(b);
+	});
+	const members = new Set(library.members);
+	const byPaths = /* @__PURE__ */ new Map();
+	for (const glyph of ordered) {
+		if (!members.has(glyph.name)) continue;
+		const key = glyph.paths.join("");
+		if (key && !byPaths.has(key)) byPaths.set(key, glyph);
+	}
+	return {
+		library,
+		component,
+		nameProp,
+		variantProp,
+		sizeProp,
+		defaultVariant,
+		byPaths
+	};
+}
+/** The size name whose px is nearest the rendered width. */
+function sizeFor(sizes, width) {
+	let best;
+	let distance = Number.POSITIVE_INFINITY;
+	for (const [name, px] of Object.entries(sizes)) {
+		const d = Math.abs(px - width);
+		if (d < distance) {
+			distance = d;
+			best = name;
+		}
+	}
+	return best;
+}
+/**
+* The `icons` hook for `htmlToSpec`, over every library `glyphs` can read. A library the host
+* cannot read (`glyphs` answers `undefined`) is skipped.
+*/
+function iconResolver({ config, glyphs }) {
+	const indexes = [];
+	for (const source of glyphSourcesOf(config)) {
+		const read = glyphs(source);
+		if (!read) continue;
+		const index = indexLibrary(config, source.library, read);
+		if (index) indexes.push(index);
+	}
+	const resolve = (svg) => {
+		const key = svg.paths.join("");
+		if (!key) return void 0;
+		for (const index of indexes) {
+			const glyph = index.byPaths.get(key);
+			if (!glyph) continue;
+			const props = { [index.nameProp]: glyph.name };
+			if (index.variantProp && glyph.variant !== index.defaultVariant) props[index.variantProp] = glyph.variant;
+			if (index.sizeProp && svg.width !== void 0) {
+				const size = sizeFor(index.library.sizes, svg.width);
+				if (size) props[index.sizeProp] = size;
+			}
+			return {
+				component: index.component,
+				props
+			};
+		}
+	};
+	return {
+		renderers: new Set(indexes.map((index) => index.component)),
+		resolve
+	};
+}
+/**
+* A captured tree with its glyphs named, for a host: an inline `<svg>` the hook can name becomes a
+* stamped root of the component that renders it, and an svg inside such a renderer's root stamps
+* the renderer instead. An svg no library owns is left as it is, and counted.
+*/
+function nameIconsInTree({ tree, hook }) {
+	let unresolved = 0;
+	const svgOf = (node) => {
+		const paths = [];
+		const walk = (n) => {
+			for (const child of n.children ?? []) {
+				if (typeof child === "string") continue;
+				if (child.tag === "path" && child.attrs?.d) paths.push(child.attrs.d);
+				walk(child);
+			}
+		};
+		walk(node);
+		const width = Number(node.attrs?.width);
+		return {
+			paths,
+			width: Number.isFinite(width) ? width : void 0
+		};
+	};
+	const stamped = (node, props) => {
+		const existing = node.attrs?.["data-uds-props"];
+		let merged = {};
+		if (existing) try {
+			merged = JSON.parse(existing);
+		} catch {
+			merged = {};
+		}
+		for (const [prop, value] of Object.entries(props)) merged[prop] ??= value;
+		return JSON.stringify(merged);
+	};
+	const visit = (node) => {
+		const component = node.attrs?.["data-uds-component"];
+		const isRoot = component !== void 0 && node.attrs?.["data-uds-layer"] === "root";
+		if (node.tag === "svg" && isRoot && component) {
+			const answer = hook.renderers.has(component) ? hook.resolve(svgOf(node)) : void 0;
+			if (!answer || answer.component !== component) return node;
+			return {
+				...node,
+				attrs: {
+					...node.attrs,
+					"data-uds-props": stamped(node, answer.props)
+				}
+			};
+		}
+		if (node.tag === "svg") {
+			const answer = hook.resolve(svgOf(node));
+			if (!answer) {
+				unresolved += 1;
+				return node;
+			}
+			return {
+				tag: "span",
+				attrs: {
+					"data-uds-component": answer.component,
+					"data-uds-layer": "root",
+					"data-uds-props": JSON.stringify(answer.props)
+				}
+			};
+		}
+		if (component && isRoot && hook.renderers.has(component)) {
+			const svg = (node.children ?? []).find((child) => typeof child !== "string" && child.tag === "svg");
+			const answer = svg ? hook.resolve(svgOf(svg)) : void 0;
+			if (svg && answer && answer.component === component) return {
+				...node,
+				attrs: {
+					...node.attrs,
+					"data-uds-props": stamped(node, answer.props)
+				},
+				children: (node.children ?? []).filter((child) => child !== svg)
+			};
+		}
+		if (!node.children?.length) return node;
+		return {
+			...node,
+			children: node.children.map((child) => typeof child === "string" ? child : visit(child))
+		};
+	};
+	return {
+		tree: visit(tree),
+		unresolved
+	};
+}
+//#endregion
+export { glyphSourcesOf, iconResolver, nameIconsInTree };

package/dist/capture/node-ops.d.ts

@@ -0,0 +1,2 @@
+import { type UserSchemas } from '../framework/schemas';
+export declare const captureNodeOps: UserSchemas;