@hueest/xray 0.1.0

package/dist/serialize-Bq6yJnNV.js

@@ -0,0 +1,1071 @@
+import { a as ROOT_ATTR, c as SPEC_INLINE, l as SPEC_LEAF } from "./plate-BuzRMPx4.js";
+//#region src/classify.ts
+/**
+* Turn id-form rules + an id-tree into the shipped plate: each distinct
+* `(tier, media, declarations)` becomes one class, named by a per-plate
+* sequential id (`[data-xr-root] .xr-<plate>-<n>`), and every node carries the
+* class tokens it needs instead of an id (ADR 0007). The id is a plain counter,
+* not a content hash: the plate prefix already keeps tokens disjoint across plates
+* (the stitch-isolation guarantee), so a per-plate counter is collision-free by
+* construction — and low-entropy ids compress far better than random hashes
+* (~31% smaller brotli on a real plate; see the ADR 0007 amendment). Rules stay
+* unlayered; the existing cascade is reproduced by emission order (losers
+* first), so the classes are emitted in `(layered, spec, order)` order exactly
+* as `renderRules` did.
+*
+* Pure data-in/data-out — runs at plugin load (node) and in tests.
+*/
+function classify(rules, tree, plateName) {
+	const classBase = `${CLASS_PREFIX}${cssSafe(plateName)}-`;
+	const sorted = rules.toSorted((a, b) => Number(b.layered ?? false) - Number(a.layered ?? false) || a.spec - b.spec || a.order - b.order);
+	const nameForKey = /* @__PURE__ */ new Map();
+	const body = /* @__PURE__ */ new Map();
+	const usage = /* @__PURE__ */ new Map();
+	const emitOrder = [];
+	const nodeClasses = /* @__PURE__ */ new Map();
+	for (const rule of sorted) {
+		if (rule.decls.length === 0) continue;
+		const decls = rule.decls.join("; ");
+		const media = rule.media ?? [];
+		const container = rule.container ?? [];
+		const tier = SPEC_FOLD === "full" ? String(rule.spec) : tierLabel(rule.spec);
+		const key = `${rule.layered ? "l" : ""} ${tier} ${media.join(" && ")} ${container.join(" && ")} ${decls}`;
+		let name = nameForKey.get(key);
+		if (name === void 0) {
+			name = classBase + nameForKey.size.toString(36);
+			nameForKey.set(key, name);
+			body.set(name, {
+				media,
+				container,
+				decls
+			});
+			usage.set(name, {
+				root: false,
+				desc: false
+			});
+			emitOrder.push(name);
+		}
+		const ids = rule.ids.length === 0 ? [0] : rule.ids;
+		for (const id of ids) {
+			const u = usage.get(name);
+			if (!u) throw new Error(`missing usage entry for ${name}`);
+			if (id === 0) u.root = true;
+			else u.desc = true;
+			let list = nodeClasses.get(id);
+			if (!list) {
+				list = [];
+				nodeClasses.set(id, list);
+			}
+			if (!list.includes(name)) list.push(name);
+		}
+	}
+	const lines = [];
+	for (const name of emitOrder) {
+		const item = body.get(name);
+		const u = usage.get(name);
+		if (!item || !u) throw new Error(`missing class body for ${name}`);
+		const { media, container, decls } = item;
+		const sels = [];
+		if (u.root) sels.push(`[${ROOT_ATTR}].${name}`);
+		if (u.desc) sels.push(`[${ROOT_ATTR}] .${name}`);
+		let text = `${sels.join(", ")} { ${decls} }`;
+		for (const condition of media.toReversed()) text = `@media ${condition} { ${text} }`;
+		for (const condition of container.toReversed()) text = `@container ${condition} { ${text} }`;
+		lines.push(text);
+	}
+	return {
+		tree: render(tree, nodeClasses),
+		css: lines.join("\n")
+	};
+}
+/** Strip ids, attach content-class tokens — the shipped tree shape (ADR 0007). */
+function render(node, classes) {
+	const out = {};
+	if (node.leaf) out.leaf = node.leaf;
+	if (node.ref !== void 0) out.ref = node.ref;
+	const cls = classes.get(node.id);
+	if (cls && cls.length > 0) out.cls = cls.join(" ");
+	if (node.kids) out.kids = node.kids.map((kid) => render(kid, classes));
+	return out;
+}
+/** Content-class prefix; distinct from the fixed `xr-root/node/leaf` base words. */
+const CLASS_PREFIX = "xr-";
+/** Make a plate name safe to embed in a class token (plate names are already constrained). */
+function cssSafe(name) {
+	return name.replace(/[^\w-]/g, "_");
+}
+/**
+* What the class identity keys on, alongside media + declarations:
+*  - `'tier'`: the discrete cascade tier — smaller (more bodies dedupe), but a
+*    rare same-tier inversion within the continuous `author` band can mis-order
+*    one property on one node (ADR 0007). The default.
+*  - `'full'`: the exact `spec` — provably no inversion, marginally larger.
+* One-line flip if QA ever surfaces a mis-order.
+*/
+const SPEC_FOLD = "full";
+function tierLabel(spec) {
+	if (spec <= -2) return "ctx";
+	if (spec === -1) return "fb";
+	if (spec >= 2e7) return "gate";
+	if (spec >= 1e7) return "inl";
+	if (spec >= 9e6) return "leaf";
+	return "au";
+}
+//#endregion
+//#region src/css.ts
+/**
+* Pure CSS plumbing shared by both extraction strategies: which properties are
+* layout (vs paint), approximate selector specificity for cascade-preserving
+* ordering, and rendering scoped rules back to a single plate CSS string.
+*/
+const EXACT_PROPS = new Set([
+	"display",
+	"position",
+	"float",
+	"clear",
+	"box-sizing",
+	"top",
+	"right",
+	"bottom",
+	"left",
+	"width",
+	"height",
+	"block-size",
+	"inline-size",
+	"aspect-ratio",
+	"order",
+	"flex",
+	"gap",
+	"row-gap",
+	"column-gap",
+	"line-height",
+	"font",
+	"font-size",
+	"font-family",
+	"font-weight",
+	"font-style",
+	"white-space",
+	"text-align",
+	"text-indent",
+	"vertical-align",
+	"letter-spacing",
+	"word-spacing",
+	"word-break",
+	"overflow-wrap",
+	"text-wrap",
+	"transform",
+	"transform-origin",
+	"translate",
+	"scale",
+	"rotate",
+	"table-layout",
+	"border-collapse",
+	"border-spacing",
+	"caption-side",
+	"column-count",
+	"column-width",
+	"columns",
+	"column-span",
+	"column-fill",
+	"writing-mode",
+	"direction",
+	"contain",
+	"content-visibility",
+	"container",
+	"container-type",
+	"container-name",
+	"visibility"
+]);
+const PATTERN_PROPS = [
+	/^(margin|padding)(-(top|right|bottom|left|block|inline))?(-(start|end))?$/,
+	/^inset(-(block|inline))?(-(start|end))?$/,
+	/^border(-(top|right|bottom|left|block|inline))?(-(start|end))?-(width|style)$/,
+	/^border(-(top|bottom)-(left|right))?-radius$/,
+	/^border-(start|end)-(start|end)-radius$/,
+	/^grid(-|$)/,
+	/^flex-/,
+	/^(min|max)-(width|height|block-size|inline-size)$/,
+	/^(align|justify|place)-(items|content|self)$/,
+	/^overflow(-[xy])?$/
+];
+/** Layout properties are the only declarations a plate carries; paint stays out (ADR 0003). */
+function isLayoutProp(prop) {
+	if (prop.startsWith("--")) return false;
+	if (EXACT_PROPS.has(prop)) return true;
+	return PATTERN_PROPS.some((re) => re.test(prop));
+}
+function resolveVars(value, computed) {
+	let out = value;
+	for (let i = 0; i < 10 && out.includes("var("); i++) {
+		const next = out.replace(/var\(\s*(--[\w-]+)\s*(?:,([^()]*))?\)/g, (_, name, fallback) => computed.getPropertyValue(name).trim() || fallback?.trim() || "");
+		if (next === out) break;
+		out = next;
+	}
+	return out;
+}
+/**
+* A grid track list that is only `px` lengths is a frozen computed value —
+* authors write `fr`/`%`/`minmax`/`auto`, not sub-pixel tracks, so this is
+* almost always a var()-driven `grid` shorthand the engine dropped, leaving us
+* the resolved computed track sizes. Frozen px locks the grid to the capture
+* width (off-centre at any other size); we can't recover the author value, so we
+* reconstruct a responsive one. Already-fluid lists (fr/%/minmax/repeat/auto/…)
+* pass through untouched.
+*
+*  - Rows follow their content in a skeleton (the bones set the height), so a
+*    frozen row list becomes `auto` tracks.
+*  - Columns are almost always a centred layout: a wide content track flanked by
+*    gutters. Make the gutters flexible and equal (`1fr`) so the grid recentres
+*    at any width — this also erases the scrollbar-width asymmetry the capture
+*    picked up — and cap the content track(s) at the captured size
+*    (`minmax(0, px)`) so they shrink on narrow viewports but never overgrow. A
+*    uniform list (no track ≥2× the others — e.g. an even `repeat(n, 1fr)`) has
+*    no gutters, so every track becomes `1fr`.
+*
+* A single capture can't tell fixed tracks from flexible ones; the precise fix is
+* to diff track sizes across the capture-all widths (a later refinement).
+*/
+const PX_ONLY_TRACKS = /^\s*(?:-?[\d.]+px\s*)+$/;
+function fluidTracks(value, axis) {
+	if (!PX_ONLY_TRACKS.test(value)) return value;
+	const tracks = value.trim().split(/\s+/).map((t) => Number.parseFloat(t));
+	if (axis === "rows") return tracks.map(() => "auto").join(" ");
+	const max = Math.max(...tracks);
+	const isContent = tracks.map((t) => t >= max * .5);
+	if (isContent.every(Boolean)) return tracks.map(() => "1fr").join(" ");
+	return tracks.map((t, i) => isContent[i] ? `minmax(0, ${t}px)` : "1fr").join(" ");
+}
+/**
+* Extract the layout-relevant declarations of a style block as `prop: value`
+* strings. Custom-property references are resolved against `computed` (the
+* matched element's computed style) — plates carry no `var()` definitions, so
+* references must be frozen to their capture-time value.
+*/
+function filterLayoutDecls(style, computed) {
+	const out = [];
+	for (let i = 0; i < style.length; i++) {
+		const prop = style.item(i);
+		if (!isLayoutProp(prop)) continue;
+		let value = style.getPropertyValue(prop).trim();
+		if (value.includes("var(") && computed) value = resolveVars(value, computed).trim();
+		if (!value && computed) value = computed.getPropertyValue(prop).trim();
+		if (!value) continue;
+		if (prop === "grid-template-columns") value = fluidTracks(value, "columns");
+		else if (prop === "grid-template-rows") value = fluidTracks(value, "rows");
+		const priority = style.getPropertyPriority(prop);
+		out.push(`${prop}: ${value}${priority ? " !important" : ""}`);
+	}
+	return out;
+}
+/**
+* Approximate selector specificity packed as a single comparable number
+* (`a * 1e6 + b * 1e3 + c`). Good enough to order rewritten rules so the
+* original cascade winner still wins; known approximation: `:is()`/`:not()`
+* sum their arguments instead of taking the max.
+*/
+function specificity(selector) {
+	let a = 0;
+	let b = 0;
+	let c = 0;
+	let s = selector.replace(/(['"]).*?\1/g, " ");
+	s = s.replace(/:where\([^()]*\)/g, " ");
+	s = s.replace(/:(nth-[a-z-]+|lang|dir)\([^()]*\)/g, () => {
+		b++;
+		return " ";
+	});
+	s = s.replace(/:(not|is|has)\(/g, " (");
+	s = s.replace(/\[[^\]]*\]/g, () => {
+		b++;
+		return " ";
+	});
+	s = s.replace(/#[a-zA-Z][\w-]*/g, () => {
+		a++;
+		return " ";
+	});
+	s = s.replace(/\.[a-zA-Z][\w-]*/g, () => {
+		b++;
+		return " ";
+	});
+	s = s.replace(/::[a-z-]+/g, () => {
+		c++;
+		return " ";
+	});
+	s = s.replace(/:[a-z-]+/g, () => {
+		b++;
+		return " ";
+	});
+	for (const _ of s.matchAll(/[a-zA-Z][\w-]*/g)) c++;
+	return a * 1e6 + b * 1e3 + c;
+}
+/** Split a selector list on top-level commas (commas inside `()`/`[]`/strings don't split). */
+function splitSelectorList(selectorText) {
+	const out = [];
+	let depth = 0;
+	let quote = "";
+	let cur = "";
+	for (const ch of selectorText) {
+		if (quote) {
+			cur += ch;
+			if (ch === quote) quote = "";
+			continue;
+		}
+		if (ch === "\"" || ch === "'") {
+			quote = ch;
+			cur += ch;
+			continue;
+		}
+		if (ch === "(" || ch === "[") depth++;
+		else if (ch === ")" || ch === "]") depth--;
+		if (ch === "," && depth === 0) {
+			if (cur.trim()) out.push(cur.trim());
+			cur = "";
+			continue;
+		}
+		cur += ch;
+	}
+	if (cur.trim()) out.push(cur.trim());
+	return out;
+}
+//#endregion
+//#region src/similarity.ts
+const kindCounts = /* @__PURE__ */ new WeakMap();
+/** Descendant tally by kind — the cheap shape summary similarity is scored on. */
+function countsOf(node) {
+	const cached = kindCounts.get(node);
+	if (cached) return cached;
+	const counts = {
+		text: 0,
+		media: 0,
+		box: 0,
+		container: 0
+	};
+	counts[node.leaf ?? "container"]++;
+	for (const kid of node.kids ?? []) {
+		const kidCounts = countsOf(kid);
+		counts.text += kidCounts.text;
+		counts.media += kidCounts.media;
+		counts.box += kidCounts.box;
+		counts.container += kidCounts.container;
+	}
+	kindCounts.set(node, counts);
+	return counts;
+}
+/**
+* How alike two subtrees are, 0..1 — overlap of their descendant kind
+* tallies. The same element rendered at another viewport (or the next item
+* of the same list) keeps roughly the same census; different sections don't.
+*/
+function similarity(a, b) {
+	if ((a.leaf ?? "container") !== (b.leaf ?? "container")) return 0;
+	if (a.leaf) return 1;
+	const ca = countsOf(a);
+	const cb = countsOf(b);
+	let diff = 0;
+	let total = 0;
+	for (const kind of [
+		"text",
+		"media",
+		"box",
+		"container"
+	]) {
+		diff += Math.abs(ca[kind] - cb[kind]);
+		total += ca[kind] + cb[kind];
+	}
+	return total === 0 ? 1 : 1 - diff / total;
+}
+//#endregion
+//#region src/serialize.ts
+function isElementNode(node) {
+	return node.nodeType === 1;
+}
+function isTextNode(node) {
+	return node.nodeType === 3;
+}
+const SKIP_TAGS = new Set([
+	"SCRIPT",
+	"STYLE",
+	"LINK",
+	"META",
+	"TEMPLATE",
+	"NOSCRIPT",
+	"TITLE"
+]);
+const MEDIA_TAGS = new Set([
+	"IMG",
+	"SVG",
+	"VIDEO",
+	"CANVAS",
+	"PICTURE",
+	"IFRAME",
+	"OBJECT",
+	"EMBED",
+	"INPUT",
+	"SELECT",
+	"TEXTAREA",
+	"PROGRESS",
+	"METER",
+	"AUDIO"
+]);
+/** Pseudo-classes that only apply under interaction — a static skeleton never needs them. */
+const DYNAMIC_PSEUDO = /:(hover|active|focus|focus-visible|focus-within|visited|link|target|enabled|disabled|checked)\b/;
+/** Pseudo-element rules are skipped for v1 (no box to map them onto). */
+const PSEUDO_ELEMENT = /::?(before|after|placeholder|selection|marker|backdrop|first-line|first-letter|file-selector-button)\b/;
+function px(n) {
+	return `${Math.round(n * 10) / 10}px`;
+}
+function isInlineish(display) {
+	return display === "inline" || display.startsWith("inline-");
+}
+function pad(value) {
+	return Number.parseFloat(value) || 0;
+}
+/** A computed value already resolved to a `px` length, or null (`normal`, a unitless ratio, ''). */
+function pxValue(value) {
+	return /(?:^|\s)-?[\d.]+px$/.test(value.trim()) ? Number.parseFloat(value) : null;
+}
+function parseRgb(value) {
+	const match = /rgba?\(([^)]+)\)/.exec(value);
+	if (!match?.[1]) return null;
+	const parts = match[1].split(/[,/]/).map((p) => Number.parseFloat(p.trim()));
+	const [r, g, b] = parts;
+	if (r === void 0 || g === void 0 || b === void 0) return null;
+	return {
+		r,
+		g,
+		b,
+		a: parts.length > 3 ? parts[3] ?? 1 : 1
+	};
+}
+const rgbCache = /* @__PURE__ */ new Map();
+/**
+* Resolve any computed CSS colour to sRGB bytes. `rgb()/rgba()` parse directly
+* (the cheap path, and the only one a layout-less test env needs); everything
+* else — `oklch()`, `color()`, `hsl()`, named — is painted onto a 1×1 canvas
+* and read back, since browsers serialise a computed colour in the space it was
+* authored in (Chrome returns `oklch(...)` verbatim), which a regex can't read.
+* Without this an oklch-filled control reads as no fill and never becomes a box.
+* Cached by string: the same token recurs across every node of a themed card.
+*/
+function toRgb(value, win) {
+	const direct = parseRgb(value);
+	if (direct) return direct;
+	const cached = rgbCache.get(value);
+	if (cached !== void 0) return cached;
+	let result = null;
+	try {
+		const ctx = win.document.createElement("canvas").getContext("2d");
+		if (ctx) {
+			ctx.fillStyle = value;
+			ctx.fillRect(0, 0, 1, 1);
+			const [r, g, b, a] = ctx.getImageData(0, 0, 1, 1).data;
+			if (r !== void 0 && g !== void 0 && b !== void 0) result = {
+				r,
+				g,
+				b,
+				a: (a ?? 255) / 255
+			};
+		}
+	} catch {
+		result = null;
+	}
+	rgbCache.set(value, result);
+	return result;
+}
+/** A background-image that actually paints (a url or gradient), not `none`/`initial`. */
+function hasPaintedImage(cs) {
+	return /url\(|gradient\(/.test(cs.backgroundImage);
+}
+function hasVisibleBackground(cs, win) {
+	if (hasPaintedImage(cs)) return true;
+	const bg = toRgb(cs.backgroundColor, win);
+	return bg !== null && bg.a > 0;
+}
+/** Fill that visibly contrasts with the nearest painted ancestor — meaning ~24 per channel. */
+const FILL_CONTRAST = 72;
+/**
+* Does this element paint a fill that stands out from what's behind it? A
+* background image always counts; a background color counts only when it's
+* mostly opaque and clearly differs from the nearest ancestor's background
+* (so a white button on a white card doesn't, but a blue one does).
+*/
+function hasContrastingFill(el, cs, win) {
+	if (hasPaintedImage(cs)) return true;
+	const bg = toRgb(cs.backgroundColor, win);
+	if (!bg || bg.a < .5) return false;
+	let ancestor = el.parentElement;
+	let behind = null;
+	while (ancestor) {
+		const candidate = toRgb(win.getComputedStyle(ancestor).backgroundColor, win);
+		if (candidate && candidate.a > 0) {
+			behind = candidate;
+			break;
+		}
+		ancestor = ancestor.parentElement;
+	}
+	const base = behind ?? {
+		r: 255,
+		g: 255,
+		b: 255,
+		a: 1
+	};
+	return Math.abs(bg.r - base.r) + Math.abs(bg.g - base.g) + Math.abs(bg.b - base.b) > FILL_CONTRAST;
+}
+/**
+* Capture the rendered subtree(s) under a Skeleton into a Plate. `roots` are
+* the component's top-level elements (the children of the layout-neutral
+* wrapper); the synthetic root node (id 0) stands in for the wrapper itself.
+*/
+function capture(roots, options) {
+	const view = captureRegime(roots);
+	const { tree, css } = classify(view.rules, view.tree, options.name);
+	return {
+		v: 1,
+		name: options.name,
+		tree,
+		css
+	};
+}
+/**
+* Thrown when a subtree has more nodes than the capture limit — almost always
+* a `<Skeleton>` sitting too high in the tree. Raised after the cheap walk and
+* before the O(rules × nodes) CSS extraction, so an oversized capture is
+* refused without freezing the main thread on it.
+*/
+var CaptureTooLargeError = class extends Error {
+	nodeCount;
+	constructor(nodeCount) {
+		super(`xray: capture has ${nodeCount} nodes, over the limit`);
+		this.name = "CaptureTooLargeError";
+		this.nodeCount = nodeCount;
+	}
+};
+/**
+* Capture one view's worth of a component: the tree plus id-form rules,
+* with the viewport width it was taken at. The caller (the dev client)
+* derives the view interval and ships it off; `capture` is the
+* single-view convenience on top.
+*/
+function captureRegime(roots, options = {}) {
+	const doc = roots[0]?.ownerDocument;
+	const win = doc?.defaultView;
+	if (!doc || !win) throw new Error("xray: capture roots must be attached to a document");
+	const { tree, entries } = walkAll(roots, win);
+	if (options.maxNodes !== void 0 && entries.length > options.maxNodes) throw new CaptureTooLargeError(entries.length);
+	return {
+		width: win.innerWidth,
+		tree,
+		rules: copyRules(entries, doc, win)
+	};
+}
+/**
+* Walk a live subtree exactly like `capture` does, but return per-node
+* geometry instead of a plate. Rendering the captured plate and auditing both
+* sides gives an id-aligned fidelity diff (used by the M1 bake-off).
+*/
+function audit(roots) {
+	const win = roots[0]?.ownerDocument?.defaultView;
+	if (!win) throw new Error("xray: audit roots must be attached to a document");
+	const { entries } = walkAll(roots, win);
+	return entries.map((entry) => {
+		const rect = entry.el?.getBoundingClientRect();
+		return {
+			id: entry.id,
+			tag: entry.el?.tagName.toLowerCase() ?? "#text",
+			...entry.leaf ? { leaf: entry.leaf } : {},
+			w: Math.round(rect?.width ?? 0),
+			h: Math.round(rect?.height ?? 0)
+		};
+	});
+}
+function walkAll(roots, win) {
+	const state = {
+		nextId: 1,
+		entries: [],
+		win
+	};
+	const kids = [];
+	for (const root of roots) {
+		const node = walk(root, state);
+		if (node) kids.push(node);
+	}
+	const raw = kids.length > 0 ? {
+		id: 0,
+		kids
+	} : { id: 0 };
+	const dropped = /* @__PURE__ */ new Set();
+	return {
+		tree: pruneRuns(raw, dropped),
+		entries: dropped.size > 0 ? state.entries.filter((entry) => !dropped.has(entry.id)) : state.entries
+	};
+}
+/** A run longer than this collapses down to the first few items. */
+const RUN_LIMIT = 8;
+const RUN_KEEP = 5;
+const RUN_SIMILARITY = .9;
+/**
+* Long runs of similar siblings are lists — a 200-offering grid, an endless
+* feed. A skeleton conventionally suggests a list with a few rows, and
+* capturing every row balloons the plate file, so runs collapse to their
+* first items. The dropped ids are pruned from the entries so no rules are
+* emitted for them.
+*/
+function pruneRuns(node, dropped) {
+	const kids = node.kids;
+	if (!kids || kids.length === 0) return node;
+	const pruned = [];
+	let i = 0;
+	while (i < kids.length) {
+		const head = kids[i];
+		if (!head) break;
+		let j = i + 1;
+		while (j < kids.length) {
+			const next = kids[j];
+			if (!next || similarity(head, next) < RUN_SIMILARITY) break;
+			j++;
+		}
+		const keep = j - i > RUN_LIMIT ? RUN_KEEP : j - i;
+		for (let k = i; k < i + keep; k++) {
+			const kid = kids[k];
+			if (kid) pruned.push(pruneRuns(kid, dropped));
+		}
+		for (let k = i + keep; k < j; k++) {
+			const kid = kids[k];
+			if (kid) collectIds(kid, dropped);
+		}
+		i = j;
+	}
+	return {
+		...node,
+		kids: pruned
+	};
+}
+function collectIds(node, out) {
+	out.add(node.id);
+	for (const kid of node.kids ?? []) collectIds(kid, out);
+}
+function walk(el, state) {
+	const tag = el.tagName.toUpperCase();
+	if (SKIP_TAGS.has(tag)) return null;
+	const cs = state.win.getComputedStyle(el);
+	if (cs.display === "none" || cs.visibility === "hidden" || cs.visibility === "collapse") return null;
+	const refName = el.getAttribute("data-xr-boundary") ?? el.getAttribute("data-xr-root");
+	if (refName) return {
+		id: state.nextId++,
+		ref: refName
+	};
+	const entry = {
+		id: state.nextId++,
+		el,
+		fallback: []
+	};
+	state.entries.push(entry);
+	const node = { id: entry.id };
+	const rect = el.getBoundingClientRect();
+	if (MEDIA_TAGS.has(tag)) {
+		entry.leaf = "media";
+		node.leaf = "media";
+		if (isInlineish(cs.display)) entry.fallback.push("display: inline-block", "vertical-align: middle");
+		let { width, height } = rect;
+		const parent = el.parentElement;
+		if ((width < 8 || height < 8) && parent && parent.childElementCount === 1) {
+			const pcs = state.win.getComputedStyle(parent);
+			const prect = parent.getBoundingClientRect();
+			const pw = prect.width - pad(pcs.paddingLeft) - pad(pcs.paddingRight);
+			const ph = prect.height - pad(pcs.paddingTop) - pad(pcs.paddingBottom);
+			if (pw * ph > width * height) {
+				width = pw;
+				height = ph;
+			}
+		}
+		entry.sizeFallback = [
+			"box-sizing: border-box",
+			`width: ${px(width)}`,
+			`height: ${px(height)}`
+		];
+		return node;
+	}
+	const kids = [];
+	const entriesBefore = state.entries.length;
+	let textRun = [];
+	let hasTextBar = false;
+	const flushTextRun = () => {
+		if (textRun.length === 0) return;
+		const kid = textBar(textRun, state);
+		if (kid) {
+			kids.push(kid);
+			hasTextBar = true;
+		}
+		textRun = [];
+	};
+	for (const child of Array.from(el.childNodes)) if (isElementNode(child)) {
+		flushTextRun();
+		const kid = walk(child, state);
+		if (kid) kids.push(kid);
+	} else if (isTextNode(child)) textRun.push(child);
+	flushTextRun();
+	if (kids.length > 0) {
+		if (kids.every((kid) => kid.leaf !== void 0 && kid.kids === void 0) && hasContrastingFill(el, cs, state.win)) {
+			state.entries.length = entriesBefore;
+			entry.leaf = "box";
+			node.leaf = "box";
+			if (isInlineish(cs.display)) entry.fallback.push("display: inline-block");
+			else if (cs.display && cs.display !== "block") entry.fallback.push(`display: ${cs.display}`);
+			entry.sizeFallback = [
+				"box-sizing: border-box",
+				`width: ${px(rect.width)}`,
+				`height: ${px(rect.height)}`
+			];
+			return node;
+		}
+		node.kids = kids;
+		if (cs.display && cs.display !== "block") entry.fallback.push(`display: ${cs.display}`);
+		if (hasTextBar) {
+			const lh = pxValue(cs.lineHeight);
+			if (lh !== null) entry.fallback.push(`line-height: ${px(lh)}`);
+		}
+		return node;
+	}
+	const painted = hasVisibleBackground(cs, state.win);
+	if (isInlineish(cs.display)) entry.fallback.push("display: inline-block");
+	else if (cs.display && cs.display !== "block") entry.fallback.push(`display: ${cs.display}`);
+	if (painted) {
+		entry.leaf = "box";
+		node.leaf = "box";
+		entry.sizeFallback = [
+			"box-sizing: border-box",
+			`width: ${px(rect.width)}`,
+			`height: ${px(rect.height)}`
+		];
+	} else entry.fallback.push("box-sizing: border-box", `min-width: ${px(rect.width)}`, `min-height: ${px(rect.height)}`);
+	return node;
+}
+/** A run of adjacent text nodes becomes one synthetic inline bar sized to its rendered box. */
+function textBar(run, state) {
+	const first = run[0];
+	const last = run[run.length - 1];
+	const doc = first?.ownerDocument;
+	if (!first || !last || !doc) return null;
+	if (run.every((node) => (node.textContent ?? "").trim() === "")) return null;
+	const range = doc.createRange();
+	range.setStartBefore(first);
+	range.setEndAfter(last);
+	const rect = range.getBoundingClientRect();
+	const { width, height } = clampToClipping(rect.width, rect.height, first.parentElement, state.win);
+	const entry = {
+		id: state.nextId++,
+		el: null,
+		leaf: "text",
+		fallback: ["display: inline-block", "vertical-align: middle"]
+	};
+	if (width > 0 && height > 0) entry.sizeFallback = [`width: ${px(width)}`, `height: ${px(snapToLines(height, first.parentElement, state.win))}`];
+	state.entries.push(entry);
+	return {
+		id: entry.id,
+		leaf: "text"
+	};
+}
+/**
+* A `Range` rect is the tight union of the glyph line boxes, so a wrapped run
+* measures lines × glyph-height — short of the lines × line-height the source
+* actually occupied (a 2-line paragraph rendered ~3px short per line). When the
+* parent's line-height resolves to px and the run is clearly multi-line, round
+* to a whole number of line boxes so the bone reserves the real block height.
+* A single line is left untouched — its line box comes from the parent's pinned
+* line-height, and the thin glyph bar reads as text rather than a fat block.
+*/
+function snapToLines(height, parent, win) {
+	if (!parent) return height;
+	const lh = pxValue(win.getComputedStyle(parent).lineHeight);
+	if (lh === null || lh <= 0 || height < lh * 1.5) return height;
+	return Math.round(height / lh) * lh;
+}
+function clampToClipping(width, height, fromParent, win) {
+	for (let host = fromParent; host; host = host.parentElement) {
+		const cs = win.getComputedStyle(host);
+		const clipsX = cs.overflowX !== "visible";
+		const clipsY = cs.overflowY !== "visible";
+		if (!clipsX && !clipsY) continue;
+		const hrect = host.getBoundingClientRect();
+		if (clipsY) {
+			const inner = hrect.height - pad(cs.paddingTop) - pad(cs.paddingBottom) - pad(cs.borderTopWidth) - pad(cs.borderBottomWidth);
+			if (inner > 0) height = Math.min(height, inner);
+		}
+		if (clipsX) {
+			const inner = hrect.width - pad(cs.paddingLeft) - pad(cs.paddingRight) - pad(cs.borderLeftWidth) - pad(cs.borderRightWidth);
+			if (inner > 0) width = Math.min(width, inner);
+		}
+	}
+	return {
+		width,
+		height
+	};
+}
+/** The capture-time measurements everything starts from, at the lowest precedence. */
+function baseRules(entries, win) {
+	const rules = [];
+	let order = 0;
+	const context = entries.find((e) => e.el)?.el?.parentElement;
+	if (context) {
+		const cs = win.getComputedStyle(context);
+		rules.push({
+			ids: [],
+			decls: [
+				`font-family: ${cs.fontFamily}`,
+				`font-size: ${cs.fontSize}`,
+				`font-weight: ${cs.fontWeight}`,
+				`line-height: ${cs.lineHeight}`
+			],
+			spec: -2,
+			order: order++
+		});
+	}
+	for (const entry of entries) {
+		if (entry.fallback.length > 0) rules.push({
+			ids: [entry.id],
+			decls: entry.fallback,
+			spec: -1,
+			order: order++
+		});
+		if (entry.sizeFallback && entry.sizeFallback.length > 0) rules.push({
+			ids: [entry.id],
+			decls: entry.sizeFallback,
+			spec: SPEC_LEAF,
+			order: order++
+		});
+	}
+	return rules;
+}
+/** `@container <name>? <query>` — the text to re-wrap a lifted rule with. */
+function containerCondition(rule) {
+	const query = rule.containerQuery;
+	if (query) {
+		const name = rule.containerName?.trim();
+		return name ? `${name} ${query}` : query;
+	}
+	const cond = "conditionText" in rule && typeof rule.conditionText === "string" ? rule.conditionText : "";
+	if (cond) return cond;
+	const condition = /@container\s+([^{]+)\{/.exec(rule.cssText ?? "")?.[1];
+	return condition ? condition.trim() : "";
+}
+function isCssStyleRule(rule) {
+	return rule.constructor.name === "CSSStyleRule";
+}
+function isCssMediaRule(rule) {
+	return rule.constructor.name === "CSSMediaRule";
+}
+function isCssContainerRule(rule) {
+	return rule.constructor.name === "CSSContainerRule";
+}
+function isCssSupportsRule(rule) {
+	return rule.constructor.name === "CSSSupportsRule";
+}
+function isCssLayerBlockRule(rule) {
+	return rule.constructor.name === "CSSLayerBlockRule" && "cssRules" in rule;
+}
+function isCssImportRule(rule) {
+	return rule.constructor.name === "CSSImportRule";
+}
+function importLayerName(rule) {
+	if (!("layerName" in rule)) return null;
+	return typeof rule.layerName === "string" ? rule.layerName : null;
+}
+function supportsCondition(win, condition) {
+	if (!("CSS" in win)) return true;
+	const css = win.CSS;
+	if (typeof css !== "object" || css === null || !("supports" in css)) return true;
+	if (typeof css.supports !== "function") return true;
+	try {
+		return css.supports(condition) === true;
+	} catch {
+		return true;
+	}
+}
+/** Flatten every reachable author rule, tracking media + container conditions and layer membership. */
+function collectStyleRules(doc, win) {
+	const out = [];
+	const visit = (list, media, container, layered) => {
+		if (!list) return;
+		for (let i = 0; i < list.length; i++) {
+			const rule = list[i];
+			if (!rule) continue;
+			if (isCssStyleRule(rule)) {
+				out.push({
+					rule,
+					media,
+					container,
+					layered
+				});
+				continue;
+			}
+			if (isCssMediaRule(rule)) {
+				visit(rule.cssRules, [...media, rule.media.mediaText], container, layered);
+				continue;
+			}
+			if (isCssContainerRule(rule)) {
+				visit(rule.cssRules, media, [...container, containerCondition(rule)], layered);
+				continue;
+			}
+			if (isCssSupportsRule(rule)) {
+				if (supportsCondition(win, rule.conditionText)) visit(rule.cssRules, media, container, layered);
+				continue;
+			}
+			if (isCssLayerBlockRule(rule)) {
+				visit(rule.cssRules, media, container, true);
+				continue;
+			}
+			if (isCssImportRule(rule)) try {
+				const importMedia = rule.media.mediaText;
+				visit(rule.styleSheet?.cssRules, importMedia && importMedia !== "all" ? [...media, importMedia] : media, container, layered || importLayerName(rule) != null);
+			} catch {}
+		}
+	};
+	const sheets = [...Array.from(doc.styleSheets), ...doc.adoptedStyleSheets ?? []];
+	for (const sheet of sheets) {
+		const sheetMedia = sheet.media.mediaText;
+		try {
+			visit(sheet.cssRules, sheetMedia && sheetMedia !== "all" ? [sheetMedia] : [], [], false);
+		} catch {}
+	}
+	return out;
+}
+function safeMatches(el, selector) {
+	try {
+		return el.matches(selector);
+	} catch {
+		return false;
+	}
+}
+function pushUnit(map, key, unit) {
+	const list = map.get(key);
+	if (list) list.push(unit);
+	else map.set(key, [unit]);
+}
+/** The rightmost compound of a selector — what an element must itself satisfy to match. */
+function rightmostCompound(selector) {
+	let depth = 0;
+	let quote = "";
+	for (let i = selector.length - 1; i >= 0; i--) {
+		const ch = selector.charAt(i);
+		if (quote) {
+			if (ch === quote) quote = "";
+			continue;
+		}
+		if (ch === "\"" || ch === "'") quote = ch;
+		else if (ch === ")" || ch === "]") depth++;
+		else if (ch === "(" || ch === "[") depth--;
+		else if (depth === 0 && (ch === " " || ch === ">" || ch === "+" || ch === "~")) return selector.slice(i + 1);
+	}
+	return selector;
+}
+/**
+* Index author rules the way a browser's rule hash does: bucket each selector
+* by a token its matching element must carry (id, a class, or tag), so an
+* element only tests the rules that could possibly apply to it. CSS-module
+* class names are unique, so this turns an O(rules × nodes) sweep into a
+* near-linear one. Selectors keyed on nothing concrete (`*`, attribute-only)
+* fall back to a universal bucket tested against every element.
+*/
+function indexRules(doc, win) {
+	const buckets = {
+		byId: /* @__PURE__ */ new Map(),
+		byClass: /* @__PURE__ */ new Map(),
+		byTag: /* @__PURE__ */ new Map(),
+		universal: []
+	};
+	let order = 1e3;
+	for (const found of collectStyleRules(doc, win)) {
+		order++;
+		for (const selector of splitSelectorList(found.rule.selectorText)) {
+			if (DYNAMIC_PSEUDO.test(selector) || PSEUDO_ELEMENT.test(selector)) continue;
+			const unit = {
+				rule: found.rule,
+				selector,
+				media: found.media,
+				container: found.container,
+				layered: found.layered,
+				spec: specificity(selector),
+				order,
+				ids: [],
+				decls: null
+			};
+			const compound = rightmostCompound(selector).replace(/:{1,2}[\w-]+\([^()]*\)/g, "");
+			const id = /#(-?[A-Za-z_][\w-]*)/.exec(compound);
+			const cls = /\.(-?[A-Za-z_][\w-]*)/.exec(compound);
+			const tag = /^(-?[A-Za-z][\w-]*)/.exec(compound);
+			const idName = id?.[1];
+			const className = cls?.[1];
+			const tagName = tag?.[1];
+			if (idName) pushUnit(buckets.byId, idName, unit);
+			else if (className) pushUnit(buckets.byClass, className, unit);
+			else if (tagName) pushUnit(buckets.byTag, tagName.toLowerCase(), unit);
+			else buckets.universal.push(unit);
+		}
+	}
+	return buckets;
+}
+function hasInlineStyle(el) {
+	return "style" in el && typeof el.style === "object" && el.style !== null && "length" in el.style && "getPropertyValue" in el.style && "getPropertyPriority" in el.style;
+}
+/** Lift matching author rules, rewritten to plate-local ids (ADR 0005). */
+function copyRules(entries, doc, win) {
+	const rules = baseRules(entries, win);
+	const elEntries = entries.filter((e) => e.el !== null);
+	const buckets = indexRules(doc, win);
+	const seen = /* @__PURE__ */ new Set();
+	for (const entry of elEntries) {
+		const el = entry.el;
+		seen.clear();
+		const candidates = [];
+		const collect = (list) => {
+			if (!list) return;
+			for (const unit of list) if (!seen.has(unit)) {
+				seen.add(unit);
+				candidates.push(unit);
+			}
+		};
+		if (el.id) collect(buckets.byId.get(el.id));
+		for (const cls of el.classList) collect(buckets.byClass.get(cls));
+		collect(buckets.byTag.get(el.tagName.toLowerCase()));
+		collect(buckets.universal);
+		for (const unit of candidates) {
+			if (!safeMatches(el, unit.selector)) continue;
+			if (unit.decls === null) unit.decls = filterLayoutDecls(unit.rule.style, win.getComputedStyle(el));
+			if (unit.decls.length > 0) unit.ids.push(entry.id);
+		}
+	}
+	for (const unit of allUnits(buckets)) {
+		if (unit.ids.length === 0 || !unit.decls || unit.decls.length === 0) continue;
+		rules.push({
+			ids: unit.ids,
+			decls: unit.decls,
+			media: unit.media,
+			...unit.container.length > 0 ? { container: unit.container } : {},
+			layered: unit.layered,
+			spec: unit.spec,
+			order: unit.order
+		});
+	}
+	let order = 1e7;
+	for (const entry of elEntries) {
+		if (!hasInlineStyle(entry.el)) continue;
+		const style = entry.el.style;
+		if (!style || style.length === 0) continue;
+		const decls = filterLayoutDecls(style, win.getComputedStyle(entry.el));
+		if (decls.length === 0) continue;
+		rules.push({
+			ids: [entry.id],
+			decls,
+			spec: SPEC_INLINE,
+			order: order++
+		});
+	}
+	return rules;
+}
+function* allUnits(buckets) {
+	for (const list of buckets.byId.values()) yield* list;
+	for (const list of buckets.byClass.values()) yield* list;
+	for (const list of buckets.byTag.values()) yield* list;
+	yield* buckets.universal;
+}
+//#endregion
+export { clampToClipping as a, captureRegime as i, audit as n, classify as o, capture as r, CaptureTooLargeError as t };