@hueest/xray 0.1.0 → 0.2.0

package/dist/{serialize-Bq6yJnNV.js → breakpoints-CMoFUUOv.js}

@@ -1,4 +1,4 @@
-import { a as ROOT_ATTR, c as SPEC_INLINE, l as SPEC_LEAF } from "./plate-BuzRMPx4.js";
+import { a as ROOT_ATTR, l as SPEC_INLINE, u as SPEC_LEAF } from "./plate-DoE1HEXp.js";
 //#region src/classify.ts
 /**
 * Turn id-form rules + an id-tree into the shipped plate: each distinct
@@ -16,7 +16,7 @@ import { a as ROOT_ATTR, c as SPEC_INLINE, l as SPEC_LEAF } from "./plate-BuzRMP
 * 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 classBase = `${CLASS_PREFIX}${encodePlateName(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();
@@ -90,9 +90,23 @@ function render(node, classes) {
 }
 /** 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, "_");
+/**
+* Encode a plate name into a class-token prefix, injectively. This prefix *is*
+* the isolation boundary across stitched plates (ADR 0007), so distinct plate
+* names must never produce the same prefix — a collision would let one plate's
+* `<style>` block reorder another's classes.
+*
+* Plate names are constrained by `isValidPlateName`: each path segment is
+* `\w+(-\w+)*` (word chars with single interior hyphens, no doubled or edge
+* hyphen) and segments are joined by `/`. The slash is the only char that is
+* not class-safe, so rendering it as `--` is enough — and because no segment
+* holds a literal `--` or an edge hyphen, no `-` ever abuts a `/`, so every
+* `--` in the prefix unambiguously came from a `/`, making the map injective.
+* Keeping `/` visually as `--` also leaves nested names readable in the
+* generated CSS (`product--card`).
+*/
+function encodePlateName(name) {
+	return name.replace(/\//g, "--");
 }
 /**
 * What the class identity keys on, alongside media + declarations:
@@ -374,7 +388,146 @@ function similarity(a, b) {
 	return total === 0 ? 1 : 1 - diff / total;
 }
 //#endregion
+//#region src/diagnostics.ts
+function createDiagnostics() {
+	const byCode = /* @__PURE__ */ new Map();
+	return {
+		add(code, options) {
+			const bump = options?.count ?? 1;
+			const existing = byCode.get(code);
+			if (existing) {
+				existing.count = (existing.count ?? 0) + bump;
+				return;
+			}
+			byCode.set(code, {
+				code,
+				message: DIAGNOSTIC_MESSAGES[code],
+				count: bump,
+				...options?.detail !== void 0 ? { detail: options.detail } : {}
+			});
+		},
+		list() {
+			return [...byCode.values()];
+		}
+	};
+}
+/**
+* Build a single diagnostic record with its canonical message, for callers
+* outside the walk that surface a diagnostic directly (e.g. the client mapping
+* `CaptureTooLargeError`, or the server reporting an invalid committed plate).
+* Uses the same message table as the collector so the text is identical
+* everywhere. `detail` must never carry user CSS or captured text.
+*/
+function makeDiagnostic(code, options) {
+	return {
+		code,
+		message: DIAGNOSTIC_MESSAGES[code],
+		...options?.count !== void 0 ? { count: options.count } : {},
+		...options?.detail !== void 0 ? { detail: options.detail } : {}
+	};
+}
+/**
+* The human-readable message per code, shared verbatim by browser and server so
+* their text cannot drift. Messages describe the omission and its fidelity
+* cost; none echoes user CSS or captured text. `formatDiagnostic` appends the
+* aggregate count and any short detail.
+*/
+const DIAGNOSTIC_MESSAGES = {
+	"unreadable-stylesheet": "could not read a stylesheet (likely cross-origin); rules from it were not captured",
+	"unreadable-import": "could not read an @import (likely cross-origin); its rules were not captured",
+	"skipped-dynamic-pseudo": "skipped interaction pseudo-class selectors (:hover, :focus, etc.) — a static skeleton never enters those states",
+	"skipped-pseudo-element": "skipped pseudo-element selectors (::before, ::after, etc.) — v1 has no box to map them onto",
+	"unsupported-rule": "skipped CSS rules of a kind the serializer does not lift",
+	"dropped-tag": "dropped hidden or non-visual elements (display:none, visibility:hidden, script/style/etc.)",
+	"pruned-run": "collapsed long runs of similar siblings (a list/grid) to their first few items to keep the plate small",
+	"too-large": "capture exceeded the node limit and was skipped; the <Skeleton> likely sits too high in the tree",
+	"invalid-plate-file": "a committed plate file could not be read (corrupt JSON, wrong shape, or a version mismatch) and was ignored"
+};
+/**
+* The single shared formatter. Renders one diagnostic to a stable one-line
+* string used IDENTICALLY by the browser console and the Vite server output, so
+* the two can never disagree. Shape: `<message> (<count>)[: <detail>]`. Count is
+* omitted when 1 or absent; detail is appended only when present and is never
+* user content.
+*/
+function formatDiagnostic(diagnostic) {
+	const count = diagnostic.count !== void 0 && diagnostic.count > 1 ? ` (${diagnostic.count})` : "";
+	const detail = diagnostic.detail !== void 0 ? `: ${diagnostic.detail}` : "";
+	return `${diagnostic.message}${count}${detail}`;
+}
+/** The grouped-warning header for a plate's diagnostics, shared by browser and server. */
+function diagnosticsHeader(name) {
+	return `[xray] "${name}" captured with reduced fidelity:`;
+}
+//#endregion
 //#region src/serialize.ts
+/**
+* Capture-only DOM annotations (ADR 0018), read DURING the walk to shape the
+* `PlateNode` tree and NEVER written into the tree, the Plate, or the persisted
+* JSON. They are the declarative 90% of capture customization; the programmable
+* `captureWalker` is the 10% escape hatch.
+*
+* - `data-xr-ignore` drops the element AND its subtree (it contributes no bone).
+* - `data-xr-bone-kind="text|media|box"` collapses the element's whole subtree
+*   into ONE Bone leaf of the given kind, sized from the element's own box.
+*
+* Both are subordinate to the stitch guard (ADR 0006): a nested `<Skeleton>`
+* boundary always becomes a stitch first, so neither annotation can make a
+* boundary leak into the parent plate. See `walk`.
+*/
+const XR_IGNORE_ATTR = "data-xr-ignore";
+const XR_BONE_KIND_ATTR = "data-xr-bone-kind";
+/** The `LeafKind` values an author may legally name in `data-xr-bone-kind`. */
+const LEAF_KINDS = [
+	"text",
+	"media",
+	"box"
+];
+/** Narrow an arbitrary `data-xr-bone-kind` string to a `LeafKind`, or null if unknown. */
+function asLeafKind(value) {
+	return LEAF_KINDS.find((kind) => kind === value) ?? null;
+}
+/** Reinterpret the internal decision as the opaque result at the ctx/next boundary. Zero runtime cost. */
+function wrap(node) {
+	return node;
+}
+/** Recover the internal decision from an opaque result inside the engine. Zero runtime cost. */
+function unwrap(result) {
+	return result;
+}
+/**
+* Typed identity wrapper for authoring a capture walker (ADR 0018) — the
+* `defineConfig` pattern. It returns its argument unchanged at runtime; its only
+* job is to infer and check the `XrayCaptureWalker` shape at the call site so an
+* author gets completion and a typo in a hook name is caught.
+*/
+function defineXrayCaptureWalker(walker) {
+	return walker;
+}
+/**
+* A per-capture memo of `getComputedStyle(el)` keyed by element, scoped to ONE
+* synchronous capture (capture performance plan, piece 5). The walk reads each
+* entry node's own style through here, and the ancestor-walking helpers
+* (contrast, line-height, clipping) memoize the parents they climb. A
+* `CSSStyleDeclaration` is a live view, so this WeakMap lives only as long as
+* the single capture that built it and is then dropped — it is NEVER cached
+* across captures or time (a stored style would silently go stale; the plan
+* forbids it). `get` lazily computes and stores on first lookup.
+*/
+var StyleCache = class {
+	#win;
+	#map = /* @__PURE__ */ new WeakMap();
+	constructor(win) {
+		this.#win = win;
+	}
+	get(el) {
+		const hit = this.#map.get(el);
+		if (hit) return hit;
+		const cs = this.#win.getComputedStyle(el);
+		this.#map.set(el, cs);
+		return cs;
+	}
+};
 function isElementNode(node) {
 	return node.nodeType === 1;
 }
@@ -488,14 +641,14 @@ const FILL_CONTRAST = 72;
 * 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) {
+function hasContrastingFill(el, cs, win, styles) {
 	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);
+		const candidate = toRgb(styles.get(ancestor).backgroundColor, win);
 		if (candidate && candidate.a > 0) {
 			behind = candidate;
 			break;
@@ -516,7 +669,10 @@ function hasContrastingFill(el, cs, win) {
 * wrapper); the synthetic root node (id 0) stands in for the wrapper itself.
 */
 function capture(roots, options) {
-	const view = captureRegime(roots);
+	const view = captureRegime(roots, {
+		walker: options.walker,
+		captureRootIsBoundary: options.captureRootIsBoundary
+	});
 	const { tree, css } = classify(view.rules, view.tree, options.name);
 	return {
 		v: 1,
@@ -533,6 +689,8 @@ function capture(roots, options) {
 */
 var CaptureTooLargeError = class extends Error {
 	nodeCount;
+	/** Folds the oversized-capture warning into the shared diagnostics vocabulary (diagnostics.ts). */
+	code = "too-large";
 	constructor(nodeCount) {
 		super(`xray: capture has ${nodeCount} nodes, over the limit`);
 		this.name = "CaptureTooLargeError";
@@ -549,43 +707,31 @@ 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);
+	const diagnostics = createDiagnostics();
+	const styles = new StyleCache(win);
+	const { tree, entries } = walkAll(roots, win, styles, diagnostics, options.walker, options.captureRootIsBoundary ?? false);
 	if (options.maxNodes !== void 0 && entries.length > options.maxNodes) throw new CaptureTooLargeError(entries.length);
+	const rules = copyRules(entries, doc, win, styles, diagnostics);
+	const list = diagnostics.list();
 	return {
 		width: win.innerWidth,
 		tree,
-		rules: copyRules(entries, doc, win)
+		rules,
+		...list.length > 0 ? { diagnostics: list } : {}
 	};
 }
-/**
-* 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) {
+function walkAll(roots, win, styles, diagnostics, walker, captureRootIsBoundary = false) {
 	const state = {
 		nextId: 1,
 		entries: [],
-		win
+		win,
+		styles,
+		diagnostics,
+		walker
 	};
 	const kids = [];
 	for (const root of roots) {
-		const node = walk(root, state);
+		const node = walk(root, state, captureRootIsBoundary);
 		if (node) kids.push(node);
 	}
 	const raw = kids.length > 0 ? {
@@ -594,7 +740,7 @@ function walkAll(roots, win) {
 	} : { id: 0 };
 	const dropped = /* @__PURE__ */ new Set();
 	return {
-		tree: pruneRuns(raw, dropped),
+		tree: pruneRuns(raw, dropped, diagnostics),
 		entries: dropped.size > 0 ? state.entries.filter((entry) => !dropped.has(entry.id)) : state.entries
 	};
 }
@@ -609,7 +755,7 @@ const RUN_SIMILARITY = .9;
 * first items. The dropped ids are pruned from the entries so no rules are
 * emitted for them.
 */
-function pruneRuns(node, dropped) {
+function pruneRuns(node, dropped, diagnostics) {
 	const kids = node.kids;
 	if (!kids || kids.length === 0) return node;
 	const pruned = [];
@@ -624,9 +770,10 @@ function pruneRuns(node, dropped) {
 			j++;
 		}
 		const keep = j - i > RUN_LIMIT ? RUN_KEEP : j - i;
+		if (j - i > keep) diagnostics.add("pruned-run", { count: j - i - keep });
 		for (let k = i; k < i + keep; k++) {
 			const kid = kids[k];
-			if (kid) pruned.push(pruneRuns(kid, dropped));
+			if (kid) pruned.push(pruneRuns(kid, dropped, diagnostics));
 		}
 		for (let k = i + keep; k < j; k++) {
 			const kid = kids[k];
@@ -643,20 +790,122 @@ function collectIds(node, out) {
 	out.add(node.id);
 	for (const kid of node.kids ?? []) collectIds(kid, out);
 }
-function walk(el, state) {
+function walk(el, state, isCaptureRoot = false) {
 	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 {
+	if (SKIP_TAGS.has(tag)) {
+		state.diagnostics.add("dropped-tag");
+		return null;
+	}
+	const cs = state.styles.get(el);
+	if (cs.display === "none" || cs.visibility === "hidden" || cs.visibility === "collapse") {
+		state.diagnostics.add("dropped-tag");
+		return null;
+	}
+	if (!isCaptureRoot) {
+		const refName = el.getAttribute("data-xr-boundary") ?? el.getAttribute("data-xr-root");
+		if (refName) return {
+			id: state.nextId++,
+			ref: refName
+		};
+	}
+	const walker = state.walker;
+	if (walker?.element) {
+		const next = () => wrap(annotationWalk(el, cs, state));
+		const ctx = {
+			el,
+			ignore: () => wrap(ignoreElement(state)),
+			bone: (opts) => wrap(boneElement(el, cs, opts?.kind, state)),
+			walk: next
+		};
+		return unwrap(walker.element(ctx, next));
+	}
+	return annotationWalk(el, cs, state);
+}
+/**
+* The built-in annotation walker (ADR 0018), the rung between the custom walker
+* and the default classifier. It honors the capture-only `data-xr-*`
+* annotations and otherwise falls through to the default classifier. The stitch
+* guard already ran in `walk`, so a boundary element never reaches here — an
+* annotation can never override a nested `<Skeleton>` (ADR 0006).
+*/
+function annotationWalk(el, cs, state) {
+	if (el.hasAttribute(XR_IGNORE_ATTR)) return ignoreElement(state);
+	const kindAttr = el.getAttribute(XR_BONE_KIND_ATTR);
+	if (kindAttr !== null) {
+		const kind = asLeafKind(kindAttr.trim());
+		if (kind !== null) return boneElement(el, cs, kind, state);
+		state.diagnostics.add("dropped-tag");
+	}
+	return defaultClassify(el, cs, state);
+}
+/**
+* `ctx.ignore()` / `data-xr-ignore`: drop the element and its subtree. No Entry,
+* no node, no descent — it contributes nothing to the Plate. Aggregated under
+* the existing `dropped-tag` diagnostic (a hidden/non-visual drop is the same
+* fidelity story; do not spam a new code per ignored element).
+*/
+function ignoreElement(state) {
+	state.diagnostics.add("dropped-tag");
+	return null;
+}
+/**
+* `ctx.bone()` / `data-xr-bone-kind`: collapse the element's whole subtree into
+* ONE Bone leaf, sized from the element's own measured box (ADR 0018). When
+* `kind` is omitted it shares the default classifier's kind-inference heuristic
+* (`inferLeafKind`, ONE code path — Q4). The subtree is NOT walked: this is the
+* point of the helper. Reuses the default classifier's leaf sizing so the bone
+* reserves the real space.
+*/
+function boneElement(el, cs, kind, state) {
+	const entry = {
 		id: state.nextId++,
-		ref: refName
+		el,
+		fallback: [],
+		cs
 	};
+	state.entries.push(entry);
+	const leaf = kind ?? inferLeafKind(el);
+	const rect = el.getBoundingClientRect();
+	entry.leaf = leaf;
+	if (isInlineish(cs.display)) {
+		entry.fallback.push("display: inline-block");
+		if (leaf === "media") entry.fallback.push("vertical-align: middle");
+	} 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 {
+		id: entry.id,
+		leaf
+	};
+}
+/**
+* The kind-inference heuristic shared by `ctx.bone()` without an explicit kind
+* and the default classifier (ADR 0018, Q4 — ONE code path). A media tag is
+* `media`; anything else collapsed to a single bone reads as a `box`. The
+* default classifier reaches the same outcomes through its own structural
+* branches (MEDIA_TAGS -> media, contrasting fill / painted empty -> box), so
+* keeping this one function is the single source of truth for "what kind is an
+* element that has no children to descend into".
+*/
+function inferLeafKind(el) {
+	return MEDIA_TAGS.has(el.tagName.toUpperCase()) ? "media" : "box";
+}
+/**
+* The DEFAULT classifier — the unchanged step-4 body, extracted so the
+* precedence ladder's `next()` can call it (ADR 0018). With no walker and no
+* annotations this is the only path taken, and its output is byte-identical to
+* before the ladder was introduced.
+*/
+function defaultClassify(el, cs, state) {
+	const tag = el.tagName.toUpperCase();
 	const entry = {
 		id: state.nextId++,
 		el,
-		fallback: []
+		fallback: [],
+		cs
 	};
 	state.entries.push(entry);
 	const node = { id: entry.id };
@@ -668,7 +917,7 @@ function walk(el, state) {
 		let { width, height } = rect;
 		const parent = el.parentElement;
 		if ((width < 8 || height < 8) && parent && parent.childElementCount === 1) {
-			const pcs = state.win.getComputedStyle(parent);
+			const pcs = state.styles.get(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);
@@ -704,7 +953,7 @@ function walk(el, state) {
 	} 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)) {
+		if (kids.every((kid) => kid.leaf !== void 0 && kid.kids === void 0) && hasContrastingFill(el, cs, state.win, state.styles)) {
 			state.entries.length = entriesBefore;
 			entry.leaf = "box";
 			node.leaf = "box";
@@ -750,14 +999,14 @@ function textBar(run, state) {
 	range.setStartBefore(first);
 	range.setEndAfter(last);
 	const rect = range.getBoundingClientRect();
-	const { width, height } = clampToClipping(rect.width, rect.height, first.parentElement, state.win);
+	const { width, height } = clampToClipping(rect.width, rect.height, first.parentElement, { getComputedStyle: (el) => state.styles.get(el) });
 	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))}`];
+	if (width > 0 && height > 0) entry.sizeFallback = [`width: ${px(width)}`, `height: ${px(snapToLines(height, first.parentElement, state.styles))}`];
 	state.entries.push(entry);
 	return {
 		id: entry.id,
@@ -773,9 +1022,9 @@ function textBar(run, state) {
 * 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) {
+function snapToLines(height, parent, styles) {
 	if (!parent) return height;
-	const lh = pxValue(win.getComputedStyle(parent).lineHeight);
+	const lh = pxValue(styles.get(parent).lineHeight);
 	if (lh === null || lh <= 0 || height < lh * 1.5) return height;
 	return Math.round(height / lh) * lh;
 }
@@ -801,12 +1050,12 @@ function clampToClipping(width, height, fromParent, win) {
 	};
 }
 /** The capture-time measurements everything starts from, at the lowest precedence. */
-function baseRules(entries, win) {
+function baseRules(entries, styles) {
 	const rules = [];
 	let order = 0;
 	const context = entries.find((e) => e.el)?.el?.parentElement;
 	if (context) {
-		const cs = win.getComputedStyle(context);
+		const cs = styles.get(context);
 		rules.push({
 			ids: [],
 			decls: [
@@ -881,7 +1130,7 @@ function supportsCondition(win, condition) {
 	}
 }
 /** Flatten every reachable author rule, tracking media + container conditions and layer membership. */
-function collectStyleRules(doc, win) {
+function collectStyleRules(doc, win, diagnostics) {
 	const out = [];
 	const visit = (list, media, container, layered) => {
 		if (!list) return;
@@ -913,10 +1162,16 @@ function collectStyleRules(doc, win) {
 				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 {}
+			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 {
+					diagnostics.add("unreadable-import");
+				}
+				continue;
+			}
+			diagnostics.add("unsupported-rule");
 		}
 	};
 	const sheets = [...Array.from(doc.styleSheets), ...doc.adoptedStyleSheets ?? []];
@@ -924,7 +1179,9 @@ function collectStyleRules(doc, win) {
 		const sheetMedia = sheet.media.mediaText;
 		try {
 			visit(sheet.cssRules, sheetMedia && sheetMedia !== "all" ? [sheetMedia] : [], [], false);
-		} catch {}
+		} catch {
+			diagnostics.add("unreadable-stylesheet");
+		}
 	}
 	return out;
 }
@@ -935,10 +1192,10 @@ function safeMatches(el, selector) {
 		return false;
 	}
 }
-function pushUnit(map, key, unit) {
+function pushSelector(map, key, sel) {
 	const list = map.get(key);
-	if (list) list.push(unit);
-	else map.set(key, [unit]);
+	if (list) list.push(sel);
+	else map.set(key, [sel]);
 }
 /** The rightmost compound of a selector — what an element must itself satisfy to match. */
 function rightmostCompound(selector) {
@@ -965,28 +1222,33 @@ function rightmostCompound(selector) {
 * 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 = {
+function indexRules(doc, win, diagnostics) {
+	const index = {
 		byId: /* @__PURE__ */ new Map(),
 		byClass: /* @__PURE__ */ new Map(),
 		byTag: /* @__PURE__ */ new Map(),
 		universal: []
 	};
 	let order = 1e3;
-	for (const found of collectStyleRules(doc, win)) {
+	for (const found of collectStyleRules(doc, win, diagnostics)) {
 		order++;
 		for (const selector of splitSelectorList(found.rule.selectorText)) {
-			if (DYNAMIC_PSEUDO.test(selector) || PSEUDO_ELEMENT.test(selector)) continue;
-			const unit = {
+			if (PSEUDO_ELEMENT.test(selector)) {
+				diagnostics.add("skipped-pseudo-element");
+				continue;
+			}
+			if (DYNAMIC_PSEUDO.test(selector)) {
+				diagnostics.add("skipped-dynamic-pseudo");
+				continue;
+			}
+			const sel = {
 				rule: found.rule,
 				selector,
 				media: found.media,
 				container: found.container,
 				layered: found.layered,
 				spec: specificity(selector),
-				order,
-				ids: [],
-				decls: null
+				order
 			};
 			const compound = rightmostCompound(selector).replace(/:{1,2}[\w-]+\([^()]*\)/g, "");
 			const id = /#(-?[A-Za-z_][\w-]*)/.exec(compound);
@@ -995,22 +1257,34 @@ function indexRules(doc, win) {
 			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);
+			if (idName) pushSelector(index.byId, idName, sel);
+			else if (className) pushSelector(index.byClass, className, sel);
+			else if (tagName) pushSelector(index.byTag, tagName.toLowerCase(), sel);
+			else index.universal.push(sel);
 		}
 	}
-	return buckets;
+	return index;
 }
 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);
+function copyRules(entries, doc, win, styles, diagnostics) {
+	const rules = baseRules(entries, styles);
 	const elEntries = entries.filter((e) => e.el !== null);
-	const buckets = indexRules(doc, win);
+	const index = indexRules(doc, win, diagnostics);
+	const matches = /* @__PURE__ */ new Map();
+	const matchOf = (sel) => {
+		let m = matches.get(sel);
+		if (!m) {
+			m = {
+				ids: [],
+				decls: null
+			};
+			matches.set(sel, m);
+		}
+		return m;
+	};
 	const seen = /* @__PURE__ */ new Set();
 	for (const entry of elEntries) {
 		const el = entry.el;
@@ -1018,31 +1292,33 @@ function copyRules(entries, doc, win) {
 		const candidates = [];
 		const collect = (list) => {
 			if (!list) return;
-			for (const unit of list) if (!seen.has(unit)) {
-				seen.add(unit);
-				candidates.push(unit);
+			for (const sel of list) if (!seen.has(sel)) {
+				seen.add(sel);
+				candidates.push(sel);
 			}
 		};
-		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);
+		if (el.id) collect(index.byId.get(el.id));
+		for (const cls of el.classList) collect(index.byClass.get(cls));
+		collect(index.byTag.get(el.tagName.toLowerCase()));
+		collect(index.universal);
+		for (const sel of candidates) {
+			if (!safeMatches(el, sel.selector)) continue;
+			const m = matchOf(sel);
+			if (m.decls === null) m.decls = filterLayoutDecls(sel.rule.style, entry.cs ?? styles.get(el));
+			if (m.decls.length > 0) m.ids.push(entry.id);
 		}
 	}
-	for (const unit of allUnits(buckets)) {
-		if (unit.ids.length === 0 || !unit.decls || unit.decls.length === 0) continue;
+	for (const sel of allSelectors(index)) {
+		const m = matches.get(sel);
+		if (!m || m.ids.length === 0 || !m.decls || m.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
+			ids: m.ids,
+			decls: m.decls,
+			media: sel.media,
+			...sel.container.length > 0 ? { container: sel.container } : {},
+			layered: sel.layered,
+			spec: sel.spec,
+			order: sel.order
 		});
 	}
 	let order = 1e7;
@@ -1050,7 +1326,7 @@ function copyRules(entries, doc, win) {
 		if (!hasInlineStyle(entry.el)) continue;
 		const style = entry.el.style;
 		if (!style || style.length === 0) continue;
-		const decls = filterLayoutDecls(style, win.getComputedStyle(entry.el));
+		const decls = filterLayoutDecls(style, entry.cs ?? styles.get(entry.el));
 		if (decls.length === 0) continue;
 		rules.push({
 			ids: [entry.id],
@@ -1061,11 +1337,57 @@ function copyRules(entries, doc, win) {
 	}
 	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;
+function* allSelectors(index) {
+	for (const list of index.byId.values()) yield* list;
+	for (const list of index.byClass.values()) yield* list;
+	for (const list of index.byTag.values()) yield* list;
+	yield* index.universal;
+}
+//#endregion
+//#region src/breakpoints.ts
+/**
+* Per-plate breakpoint derivation (ADR 0004): the width thresholds that could
+* change this plate come from the `@media` conditions on its own copied rules
+* plus the queries the app evaluated through `matchMedia` during capture.
+* Thresholds partition the width axis into views; identical captures in
+* adjacent views collapse at merge time.
+*/
+const FONT_SIZE_PX = 16;
+/** A breakpoint is the first integer px width of the view ABOVE the boundary. */
+function thresholdsOf(condition) {
+	const out = [];
+	const toPx = (value, unit) => Number.parseFloat(value) * (unit === "px" ? 1 : FONT_SIZE_PX);
+	const push = (raw, exclusiveBelow) => {
+		const bp = exclusiveBelow ? Number.isInteger(raw) ? raw + 1 : Math.ceil(raw) : Math.ceil(raw);
+		if (Number.isFinite(bp) && bp > 0) out.push(bp);
+	};
+	for (const m of condition.matchAll(/min-width:\s*([\d.]+)(px|em|rem)/g)) push(toPx(m[1] ?? "", m[2] ?? "px"), false);
+	for (const m of condition.matchAll(/max-width:\s*([\d.]+)(px|em|rem)/g)) push(toPx(m[1] ?? "", m[2] ?? "px"), true);
+	for (const m of condition.matchAll(/width\s*(>=?)\s*([\d.]+)(px|em|rem)/g)) push(toPx(m[2] ?? "", m[3] ?? "px"), m[1] === ">");
+	for (const m of condition.matchAll(/width\s*(<=?)\s*([\d.]+)(px|em|rem)/g)) push(toPx(m[2] ?? "", m[3] ?? "px"), m[1] === "<=");
+	for (const m of condition.matchAll(/([\d.]+)(px|em|rem)\s*(<=?)\s*width/g)) push(toPx(m[1] ?? "", m[2] ?? "px"), m[3] === "<");
+	return out;
+}
+/** Width thresholds for this plate: its rules' media conditions + the app's matchMedia queries. */
+function deriveBreakpoints(rules, matchMediaQueries = []) {
+	const set = /* @__PURE__ */ new Set();
+	for (const rule of rules) for (const condition of rule.media ?? []) for (const bp of thresholdsOf(condition)) set.add(bp);
+	for (const query of matchMediaQueries) for (const bp of thresholdsOf(query)) set.add(bp);
+	return [...set].toSorted((a, b) => a - b);
+}
+/** The view interval `[min, max)` a given viewport width falls into. */
+function regimeFor(width, breakpoints) {
+	let min;
+	let max;
+	for (const bp of breakpoints) if (bp <= width) min = bp;
+	else {
+		max = bp;
+		break;
+	}
+	return {
+		...min === void 0 ? {} : { min },
+		...max === void 0 ? {} : { max }
+	};
 }
 //#endregion
-export { clampToClipping as a, captureRegime as i, audit as n, classify as o, capture as r, CaptureTooLargeError as t };
+export { captureRegime as a, formatDiagnostic as c, capture as i, makeDiagnostic as l, regimeFor as n, defineXrayCaptureWalker as o, CaptureTooLargeError as r, diagnosticsHeader as s, deriveBreakpoints as t, classify as u };