@hueest/xray 0.2.0 → 0.4.0

package/dist/client.d.ts

@@ -1,19 +1,29 @@
-import { s as ViewCapture } from "./plate-Bv6W-GkA.js";
+import { h as StoredPlate, o as CollectLimits, v as CaptureDiagnostic } from "./serialize-BgdGt34A.js";
 
 //#region src/client.d.ts
 /**
  * The dev capture client (M2). Runs in the browser during dev only: installs
- * the `__XRAY__` hook `<Skeleton>` calls when content becomes ready,
- * settles, serializes the subtree into a view capture, and hands it to the
- * sink (the plugin's POST endpoint in M3). Re-captures when the viewport
+ * the `__XRAY__` hook `<Skeleton>` calls when content becomes ready, settles,
+ * measures the subtree into a per-Plate `PlateIR`, projects it to the structured
+ * `StoredPlate` in the browser (the ADR 0022 in-browser Serialize), and hands the
+ * envelope to the sink (the plugin's POST endpoint). Re-captures when the viewport
  * crosses into another view while a site is still mounted.
+ *
+ * Two paths produce a Plate. BROWSE-TIME is a RECORDING SESSION (the Capture toggle):
+ * while on, each capture accumulates a View into a name-keyed `PlateIR` buffer
+ * (deduped per breakpoint band) and live-previews it in-memory; toggling off writes
+ * each accumulated Plate to the sink ONCE. The capture-all SWEEP threads ONE `PlateIR`
+ * through every emulated width (one View each) and posts the projected StoredPlate once.
  */
-interface CapturePayload {
-  name: string;
-  /** This capture, view interval already derived. */
-  capture: ViewCapture;
-  /** Width thresholds derived for this plate (rules' @media + matchMedia queries). */
-  breakpoints: number[];
+/**
+ * The `/__xray` POST envelope (ADR 0022 cutover). `plate` is the finished,
+ * in-browser-projected `StoredPlate` written to disk as-is; `diagnostics` is a
+ * SIBLING dev-only field the server logs and drops — it NEVER reaches the stored
+ * artifact (ADR 0008).
+ */
+interface CaptureEnvelope {
+  plate: StoredPlate;
+  diagnostics?: CaptureDiagnostic[];
 }
 interface ClientOptions {
   /** Settle delay (ms) once the subtree goes quiet. Default 200. */
@@ -24,14 +34,20 @@ interface ClientOptions {
    */
   settleCap?: number;
   /**
-   * Refuse captures larger than this many nodes — a skeleton that big means
-   * the Skeleton sits too high in the component tree. Default 4000.
+   * Collect limits (ADR 0022): refuse a capture whose measured tree exceeds any
+   * axis — that big means the Skeleton sits too high in the component tree.
+   * `maxNodes` caps total surviving nodes (default 4096), `maxBreadth` the widest
+   * level (default 512), `maxDepth` the nesting depth (default 32). When `maxNodes`
+   * is omitted it derives as `round(maxBreadth × maxDepth / 4)`.
    */
-  maxNodes?: number;
+  collect?: CollectLimits;
   /**
-   * Initial state of the capture toggle: whether browsing re-captures plates.
-   * A per-tab override (sessionStorage / `?xray-capture`) wins over it.
-   * Defaults to `true` — the plugin passes its own (off-by-default) policy.
+   * Initial state of the capture toggle: whether the recording session is active
+   * at boot. A per-tab override (sessionStorage / `?xray-capture`) wins over it.
+   * Defaults to `false` — recording is explicit opt-in (turn it on, browse/resize to
+   * accumulate Views, turn it off to write), so normal browsing never accumulates and
+   * an HMR/close can't drop an unsaved recording. The plugin passes the same
+   * off-by-default policy; a direct caller can pass `true` to capture on boot.
    */
   capture?: boolean;
   /**
@@ -41,7 +57,7 @@ interface ClientOptions {
    * does not advance to the next emulated width until the current writes have
    * been accepted by the dev server (backpressure — capture-all-backpressure plan).
    */
-  sink: (payload: CapturePayload) => void | Promise<void>;
+  sink: (envelope: CaptureEnvelope) => void | Promise<void>;
   /**
    * Re-pull the on-disk per-plate coverage and feed it into the coverage store.
    * The capture-all sweep calls this after each pass so the next `sweepWidths()`
@@ -74,4 +90,4 @@ interface ClientOptions {
 }
 declare function installXrayClient(options: ClientOptions): () => void;
 //#endregion
-export { CapturePayload, ClientOptions, installXrayClient };
+export { CaptureEnvelope, ClientOptions, installXrayClient };

package/dist/client.js

@@ -1,4 +1,4 @@
-import { a as captureRegime, c as formatDiagnostic, l as makeDiagnostic, n as regimeFor, r as CaptureTooLargeError, s as diagnosticsHeader, t as deriveBreakpoints } from "./breakpoints-CMoFUUOv.js";
+import { a as serializePlate, d as formatDiagnostic, f as makeDiagnostic, l as runPlatePasses, n as deriveBreakpoints, o as CaptureTooLargeError, p as emit, r as regimeFor, s as captureView, t as serializePlateIR, u as diagnosticsHeader } from "./project-BZosujs9.js";
 //#region ../../node_modules/.pnpm/devalue@5.8.1/node_modules/devalue/src/base64.js
 /**	@type {(array_buffer: ArrayBuffer) => string} */
 function encode_native(array_buffer) {
@@ -528,14 +528,18 @@ function stringify_primitive(thing) {
 //#endregion
 //#region src/flash.ts
 /**
-* Dev-only radiographic capture effect — pure delight. When a capture lands we
-* briefly "expose" the captured element: a cyan bloom, a negative blink (an
-* x-ray IS a negative — `backdrop-filter: invert`), and a scan-line sweep down
-* the box. Honors `prefers-reduced-motion` (then just a soft bloom). It's a
-* transient `position: fixed`, `pointer-events: none` overlay sitting just under
-* the HUD; it never touches the capture pipeline or the captured DOM.
+* Dev-only radiographic capture effect — pure delight. When a capture lands (and
+* actually CHANGES the stored result) we briefly "expose" the captured element: a
+* negative blink (an x-ray IS a negative — `backdrop-filter: invert`) that enters
+* SHARPLY and fades a touch slower, framed by a soft shadow ring around the box so
+* you can see WHICH area was captured. Short and quiet — it's feedback that a
+* resize/navigation (or the capture-all sweep) recorded something, not a light show.
+* Honors `prefers-reduced-motion` (then just a shadow pulse, no invert). A transient
+* `position: fixed`, `pointer-events: none` overlay just under the HUD; it never
+* touches the capture pipeline or the captured DOM.
 */
 const STYLE_ID = "xr-flash-style";
+const DURATION_MS = 300;
 function ensureStyle() {
 	if (document.getElementById(STYLE_ID)) return;
 	const style = document.createElement("style");
@@ -543,31 +547,22 @@ function ensureStyle() {
 	style.textContent = `
     .xr-flash {
       position: fixed; pointer-events: none; z-index: 2147483646;
-      overflow: hidden; border-radius: 4px;
-      animation: xr-expose 480ms ease-out forwards;
-    }
-    .xr-flash::after {
-      content: ''; position: absolute; left: 0; right: 0; height: 18%;
-      background: linear-gradient(180deg, transparent, rgba(186, 230, 253, 0.9), transparent);
-      filter: blur(1px);
-      animation: xr-scan 480ms ease-in-out forwards;
+      border-radius: 4px;
+      animation: xr-expose ${DURATION_MS}ms ease-out forwards;
     }
     @keyframes xr-expose {
-      0% { background: rgba(186, 230, 253, 0); backdrop-filter: invert(0); opacity: 1 }
-      18% { background: rgba(186, 230, 253, 0.28); backdrop-filter: invert(1) }
-      100% { background: rgba(186, 230, 253, 0); backdrop-filter: invert(0); opacity: 0 }
-    }
-    @keyframes xr-scan {
-      from { transform: translateY(-100%) }
-      to { transform: translateY(560%) }
+      /* Sharp in: full invert + ring by ~12% (~36ms). */
+      0%   { backdrop-filter: invert(0); box-shadow: 0 0 0 1px rgba(56, 189, 248, 0), 0 0 0 0 rgba(56, 189, 248, 0) }
+      12%  { backdrop-filter: invert(1); box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.85), 0 0 14px 1px rgba(56, 189, 248, 0.5) }
+      /* Slower fade out (ease-out decelerates the remaining ~88%). */
+      100% { backdrop-filter: invert(0); box-shadow: 0 0 0 2px rgba(56, 189, 248, 0), 0 0 14px 1px rgba(56, 189, 248, 0) }
     }
     @keyframes xr-expose-soft {
-      0% { background: rgba(186, 230, 253, 0.25); opacity: 1 }
-      100% { background: rgba(186, 230, 253, 0); opacity: 0 }
+      0%   { box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.7) }
+      100% { box-shadow: 0 0 0 2px rgba(56, 189, 248, 0) }
     }
     @media (prefers-reduced-motion: reduce) {
-      .xr-flash { animation: xr-expose-soft 320ms ease-out forwards }
-      .xr-flash::after { display: none }
+      .xr-flash { animation: xr-expose-soft ${DURATION_MS}ms ease-out forwards }
     }
   `;
 	(document.head ?? document.documentElement).append(style);
@@ -604,7 +599,7 @@ function flashCapture(el) {
 	flash.style.height = `${box.height}px`;
 	flash.addEventListener("animationend", () => flash.remove(), { once: true });
 	(document.body ?? document.documentElement).append(flash);
-	setTimeout(() => flash.remove(), 1e3);
+	setTimeout(() => flash.remove(), 500);
 }
 //#endregion
 //#region src/client.ts
@@ -612,7 +607,9 @@ function isExtensionAck(value) {
 	return typeof value === "object" && value !== null && "source" in value && value.source === "xray-ext" && "kind" in value && value.kind === "ack" && "id" in value && typeof value.id === "number" && (!("ok" in value) || typeof value.ok === "boolean") && (!("error" in value) || typeof value.error === "string");
 }
 const DEFAULT_SETTLE_CAP = 5e3;
-const DEFAULT_MAX_NODES = 4e3;
+const DEFAULT_MAX_DEPTH = 32;
+const DEFAULT_MAX_BREADTH = 512;
+const deriveMaxNodes = (maxBreadth, maxDepth) => Math.round(maxBreadth * maxDepth / 4);
 const RESIZE_DEBOUNCE = 300;
 /**
 * The capture roots for a site, the ONE place the auto/manual root models
@@ -635,10 +632,20 @@ function installXrayClient(options) {
 	const win = window;
 	const defaultDelay = options.delay ?? 200;
 	const settleCap = options.settleCap ?? DEFAULT_SETTLE_CAP;
-	const maxNodes = options.maxNodes ?? DEFAULT_MAX_NODES;
+	const baseCollect = options.collect ?? {};
+	const resolveCollect = (site) => {
+		const maxDepth = site?.maxDepth ?? baseCollect.maxDepth ?? DEFAULT_MAX_DEPTH;
+		const maxBreadth = site?.maxBreadth ?? baseCollect.maxBreadth ?? DEFAULT_MAX_BREADTH;
+		return {
+			maxNodes: site?.maxNodes ?? baseCollect.maxNodes ?? deriveMaxNodes(maxBreadth, maxDepth),
+			maxBreadth,
+			maxDepth
+		};
+	};
 	const sites = /* @__PURE__ */ new Set();
 	const matchMediaQueries = /* @__PURE__ */ new Set();
 	let captureGeneration = 0;
+	let sweeping = false;
 	const livePlates = /* @__PURE__ */ new Map();
 	const plateSerialized = /* @__PURE__ */ new Map();
 	const plateListeners = /* @__PURE__ */ new Map();
@@ -661,10 +668,11 @@ function installXrayClient(options) {
 	};
 	const updatePlate = (name, plate) => {
 		const json = JSON.stringify(plate);
-		if (plateSerialized.get(name) === json) return;
+		if (plateSerialized.get(name) === json) return false;
 		plateSerialized.set(name, json);
 		livePlates.set(name, plate);
 		for (const cb of plateListeners.get(name) ?? []) cb();
+		return true;
 	};
 	const nativeMatchMedia = win.matchMedia.bind(win);
 	win.matchMedia = (query) => {
@@ -672,7 +680,7 @@ function installXrayClient(options) {
 		return nativeMatchMedia(query);
 	};
 	const lightbox = createToggleStore(win, LIGHTBOX_KEY, LIGHTBOX_PARAM, false);
-	const captureEnabled = createToggleStore(win, CAPTURE_KEY, CAPTURE_PARAM, options.capture ?? true);
+	const captureEnabled = createToggleStore(win, CAPTURE_KEY, CAPTURE_PARAM, options.capture ?? false);
 	const replayEnabled = createToggleStore(win, REPLAY_KEY, REPLAY_PARAM, options.replay === "prefer" || options.replay === "missing-only");
 	const replayMode = options.replay === "missing-only" ? "missing-only" : "prefer";
 	const recordMode = options.record ?? "manual";
@@ -683,95 +691,212 @@ function installXrayClient(options) {
 		}
 		return true;
 	};
-	const runCapture = async (site, force, awaitSink) => {
-		if (!force && !captureEnabled.get() || site.tooLarge || !isPrimaryForName(site)) return;
-		const generation = captureGeneration;
+	/**
+	* Measure one View into a LOCAL, fresh 1-View `PlateIR` (no shared bundle) and
+	* return it only if the generation guard still holds AFTER the settle — the
+	* heart of the ADR 0022 generation-guard preservation (plan §4). Because
+	* `captureView(roots, plate)` MUTATES the passed bundle in place
+	* (`plate.views.push`), a stale capture appended to a SHARED session PlateIR
+	* would corrupt the whole Plate's projection (one width's geometry under
+	* another's island/gate), and post-hoc rollback is impossible. So we capture
+	* into a local bundle FIRST, re-check the guard, and only the caller splices the
+	* survivor into the session bundle. Returns the local View on success, or
+	* `undefined` when the guard moved / the capture was refused / the site was torn
+	* down — the caller then DISCARDS it (never appends).
+	*
+	* `generation` is the token snapshotted by the caller BEFORE the settle; a
+	* width-change/disposal/uninstall mid-settle moves `captureGeneration` and this
+	* returns undefined. A `CaptureTooLargeError` marks the site and warns. Any
+	* other failure warns and returns undefined.
+	*/
+	const captureLocalView = async (site, generation) => {
 		await settle(site.el, site.delay, settleCap, site.mode);
 		if (generation !== captureGeneration || site.disposed || site.tooLarge || !site.el.isConnected || !isPrimaryForName(site)) return;
 		const roots = rootsFor(site);
-		if (roots.length === 0) return;
-		let payload;
-		let key;
+		if (roots.length === 0) return void 0;
+		let local;
 		try {
-			const capture = captureRegime(roots, {
-				maxNodes,
+			local = captureView(roots, {
+				collect: resolveCollect(site.collect),
 				walker: site.walker,
 				captureRootIsBoundary: site.mode === "manual"
 			});
-			reportDiagnostics(site.name, capture.diagnostics);
-			const breakpoints = deriveBreakpoints(capture.rules, [...matchMediaQueries]);
-			const span = regimeFor(capture.width, breakpoints);
-			payload = {
-				name: site.name,
-				capture: {
-					...capture,
-					...span
-				},
-				breakpoints
-			};
-			key = JSON.stringify(span);
-			const body = JSON.stringify(payload);
-			if (site.sent.get(key) === body) return;
-			site.sent.set(key, body);
 		} catch (error) {
 			if (error instanceof CaptureTooLargeError) {
 				site.tooLarge = true;
-				reportDiagnostics(site.name, [makeDiagnostic(error.code, { detail: `${error.nodeCount} nodes (max ${maxNodes})` })]);
+				reportDiagnostics(site.name, [makeDiagnostic(error.code, { detail: `${error.axis} ${error.size[error.axis]} over the ${error.axis} limit ${error.max} (nodes ${error.size.nodes}, breadth ${error.size.breadth}, depth ${error.size.depth})` })]);
 				return;
 			}
 			console.warn("[xray] capture failed for", site.name, error);
 			return;
 		}
-		if (generation !== captureGeneration || site.disposed) {
-			site.sent.delete(key);
+		const view = local.views[0];
+		if (!view) return void 0;
+		reportDiagnostics(site.name, view.diagnostics);
+		if (generation !== captureGeneration || site.disposed) return void 0;
+		return view;
+	};
+	const recording = /* @__PURE__ */ new Map();
+	const recordingBreakpoints = (buf) => [...new Set([...buf.views.flatMap((v) => v.bpSeed ?? []), ...deriveBreakpoints([], [...matchMediaQueries])])].toSorted((a, b) => a - b);
+	const projectRecording = (buf) => {
+		if (buf.views.length === 0) return void 0;
+		const breakpoints = recordingBreakpoints(buf);
+		const perBand = /* @__PURE__ */ new Map();
+		for (const view of buf.views) perBand.set(regimeFor(view.width, breakpoints).min ?? 0, view);
+		const views = [...perBand.values()].toSorted((a, b) => a.width - b.width);
+		return serializePlateIR({
+			name: buf.name,
+			views,
+			breakpoints
+		});
+	};
+	const previewRecording = (buf) => {
+		const stored = projectRecording(buf);
+		return stored ? updatePlate(buf.name, serializePlate(stored)) : false;
+	};
+	const finalizeRecording = async () => {
+		const entries = [...recording];
+		recording.clear();
+		await Promise.all(entries.map(async ([name, buf]) => {
+			const stored = projectRecording(buf);
+			if (!stored) return;
+			const diagnostics = buf.views.flatMap((v) => v.diagnostics ?? []);
+			const envelope = {
+				plate: stored,
+				...diagnostics.length > 0 ? { diagnostics } : {}
+			};
+			try {
+				await options.sink(envelope);
+			} catch (error) {
+				if (!recording.has(name)) recording.set(name, buf);
+				console.warn(`[xray] recording write failed for "${name}" — kept in memory; retried when you next start a recording`, error);
+			}
+		}));
+	};
+	const runCapture = async (site, force) => {
+		if (!force && (!captureEnabled.get() || sweeping) || site.tooLarge || !isPrimaryForName(site)) return;
+		const view = await captureLocalView(site, captureGeneration);
+		if (!view) return;
+		if (sweeping && force) {
+			(site.sessionPlate ??= {
+				name: site.name,
+				views: [],
+				breakpoints: []
+			}).views.push(view);
 			return;
 		}
-		await sendCapture(site, payload, key, awaitSink);
+		if (!captureEnabled.get()) return;
+		view.bpSeed = deriveBreakpoints(emit(view.bundle).rules, []);
+		runPlatePasses({
+			name: site.name,
+			views: [view],
+			breakpoints: []
+		});
+		let buf = recording.get(site.name);
+		if (!buf) {
+			buf = {
+				name: site.name,
+				views: [],
+				breakpoints: []
+			};
+			recording.set(site.name, buf);
+		}
+		buf.views = buf.views.filter((v) => v.width !== view.width);
+		buf.views.push(view);
+		if (previewRecording(buf)) flashCapture(site.el);
 	};
-	const sendCapture = async (site, payload, key, awaitSink) => {
+	/**
+	* Project a per-site `PlateIR` to the structured `StoredPlate` IN THE BROWSER
+	* (the ADR 0022 Serialize) and hand the envelope to the sink. Derives the
+	* breakpoint union ONCE over every View's rules + the recorded matchMedia
+	* queries (relocating the old per-View derivation), runs the reduction passes
+	* once over the whole bundle, then `serializePlateIR`. Dedupes per-PLATE by the
+	* serialized StoredPlate string. ALWAYS catches so neither mode leaks an
+	* unhandled rejection; on failure it clears the dedupe so a retry re-sends and,
+	* ONLY when `awaitSink`, rethrows so capture-all still fails loudly (pieces
+	* 3/8). The radiographic flash runs only AFTER a successful send.
+	*/
+	const sendPlate = async (site, plate, awaitSink) => {
+		if (plate.views.length === 0) return;
+		plate.name = site.name;
+		plate.breakpoints = deriveBreakpoints(plate.views.flatMap((v) => emit(v.bundle).rules), [...matchMediaQueries]);
+		runPlatePasses(plate);
+		const stored = serializePlateIR(plate);
+		const diagnostics = plate.views.flatMap((v) => v.diagnostics ?? []);
+		const envelope = {
+			plate: stored,
+			...diagnostics.length > 0 ? { diagnostics } : {}
+		};
+		const body = JSON.stringify(envelope);
+		if (site.lastSent === body) return;
+		site.lastSent = body;
 		try {
-			await options.sink(payload);
+			await options.sink(envelope);
 		} catch (error) {
-			site.sent.delete(key);
+			site.lastSent = void 0;
 			if (awaitSink) throw error;
 			console.warn("[xray] capture send failed for", site.name, error);
 			return;
 		}
 		flashCapture(site.el);
 	};
-	const scheduleCapture = (site, force = false, awaitSink = false) => {
+	/**
+	* Finalize a site's accumulated sweep `PlateIR` and POST it ONCE (awaited, the
+	* backpressure point). Clears `site.sessionPlate` first so any straggler capture
+	* for the site falls back to the browse path rather than mutating the bundle
+	* mid-flight. A session that captured no surviving View posts nothing.
+	*/
+	const finalizeSessionPlate = async (site) => {
+		const session = site.sessionPlate;
+		site.sessionPlate = void 0;
+		if (!session || session.views.length === 0) return;
+		await sendPlate(site, session, true);
+	};
+	const scheduleCapture = (site, force = false) => {
 		if (site.inflight) {
 			site.dirty = true;
 			site.dirtyForce = site.dirtyForce || force;
-			site.dirtyAwaitSink = site.dirtyAwaitSink || awaitSink;
 			return site.inflight;
 		}
-		const loop = async (f, a) => {
-			await runCapture(site, f, a);
-			if (!site.dirty) return;
-			site.dirty = false;
-			const nextForce = site.dirtyForce;
-			const nextAwaitSink = site.dirtyAwaitSink;
-			site.dirtyForce = false;
-			site.dirtyAwaitSink = false;
-			await loop(nextForce, nextAwaitSink);
+		const loop = async (initialForce) => {
+			let wantForce = initialForce;
+			for (;;) {
+				await runCapture(site, wantForce);
+				if (!site.dirty) {
+					site.inflight = void 0;
+					return;
+				}
+				site.dirty = false;
+				wantForce = site.dirtyForce;
+				site.dirtyForce = false;
+			}
 		};
-		const promise = loop(force, awaitSink).finally(() => {
-			site.inflight = void 0;
-		});
+		const promise = loop(force);
 		site.inflight = promise;
 		return promise;
 	};
 	let resizeTimer;
 	const onResize = () => {
+		if (sweeping) {
+			clearTimeout(resizeTimer);
+			return;
+		}
 		clearTimeout(resizeTimer);
 		resizeTimer = setTimeout(() => {
+			if (sweeping) return;
 			for (const site of sites) scheduleCapture(site);
 		}, RESIZE_DEBOUNCE);
 	};
 	win.addEventListener("resize", onResize);
+	let recordingOn = captureEnabled.get();
 	const unsubscribeCapture = captureEnabled.subscribe(() => {
-		if (captureEnabled.get()) for (const site of sites) scheduleCapture(site);
+		const on = captureEnabled.get();
+		if (on === recordingOn) return;
+		recordingOn = on;
+		if (on) {
+			finalizeRecording();
+			for (const site of sites) scheduleCapture(site);
+		} else finalizeRecording();
 	});
 	const extAcks = /* @__PURE__ */ new Map();
 	let nextExtReqId = 1;
@@ -869,7 +994,7 @@ function installXrayClient(options) {
 	};
 	const sweepWidths = () => {
 		const set = new Set(deriveBreakpoints([], [...matchMediaQueries]));
-		for (const site of sites) for (const bp of coverageMap.get(site.name)?.breakpoints ?? []) set.add(bp);
+		for (const site of sites) for (const view of site.sessionPlate?.views ?? []) for (const bp of deriveBreakpoints(emit(view.bundle).rules, [...matchMediaQueries])) set.add(bp);
 		const breakpoints = [...set].toSorted((a, b) => a - b);
 		const min = breakpoints[0];
 		const first = min === void 0 ? 390 : Math.max(1, Math.min(390, min - 1));
@@ -878,6 +1003,12 @@ function installXrayClient(options) {
 	const MAX_SWEEP_PASSES = 8;
 	const captureAllViews = async () => {
 		const visited = /* @__PURE__ */ new Set();
+		sweeping = true;
+		for (const site of sites) site.sessionPlate = {
+			name: site.name,
+			views: [],
+			breakpoints: []
+		};
 		try {
 			for (let pass = 0;; pass++) {
 				const pending = sweepWidths().filter((width) => !visited.has(width));
@@ -891,11 +1022,15 @@ function installXrayClient(options) {
 						height: 2400,
 						mobile: width < 600
 					});
-					await Promise.all([...sites].map((site) => scheduleCapture(site, true, true)));
+					await Promise.all([...sites].map((site) => scheduleCapture(site, true)));
 				}
 				await options.refreshCoverage?.();
 			}
+			sweeping = false;
+			await Promise.all([...sites].map((site) => finalizeSessionPlate(site)));
 		} finally {
+			sweeping = false;
+			for (const site of sites) site.sessionPlate = void 0;
 			await extCommand("reset").catch(() => void 0);
 		}
 	};
@@ -917,12 +1052,11 @@ function installXrayClient(options) {
 				delay: opts?.delay ?? defaultDelay,
 				mode: opts?.mode ?? "auto",
 				walker: opts?.walker,
-				sent: /* @__PURE__ */ new Map(),
+				collect: opts?.collect,
 				disposed: false,
 				tooLarge: false,
 				dirty: false,
-				dirtyForce: false,
-				dirtyAwaitSink: false
+				dirtyForce: false
 			};
 			sites.add(site);
 			scheduleCapture(site);
@@ -1010,9 +1144,29 @@ function createToggleStore(win, key, param, initial) {
 * made single-shot capture non-deterministic in the M1 harness; this is the
 * cure. Hard-capped so a perpetually-animating subtree still captures.
 */
+/**
+* Force lazy images in the subtree to load and await their decode, so the walk
+* measures their real boxes. A `loading="lazy"` image below the fold never enters
+* the viewport during capture, so its IntersectionObserver never fires — flip it
+* to eager to trigger the load. Capped: a slow or broken image resolves the race
+* via the timeout instead of blocking the capture.
+*/
+function awaitImages(root, cap) {
+	const imgs = Array.from(root.querySelectorAll("img"));
+	if (imgs.length === 0) return Promise.resolve();
+	const decoded = imgs.map((img) => {
+		if (img.loading === "lazy") img.loading = "eager";
+		if (typeof img.decode !== "function") return Promise.resolve();
+		return img.decode().then(() => void 0, () => void 0);
+	});
+	return Promise.race([Promise.all(decoded).then(() => void 0), new Promise((resolve) => {
+		setTimeout(resolve, cap);
+	})]);
+}
 function settle(el, delay, cap, mode = "auto") {
 	const doc = el.ownerDocument;
-	return (doc.fonts ? doc.fonts.ready : Promise.resolve()).then(() => new Promise((resolve) => {
+	const fonts = doc.fonts ? doc.fonts.ready : Promise.resolve();
+	return Promise.all([fonts, awaitImages(el, cap)]).then(() => new Promise((resolve) => {
 		let timer;
 		let capTimer;
 		const observer = new MutationObserver(bump);

package/dist/core.d.ts

@@ -1,5 +1,4 @@
-import { a as PlateNode, c as emptyPlate, i as PlateFile, n as MergedPlate, o as RenderNode, r as Plate, s as ViewCapture, t as LeafKind } from "./plate-Bv6W-GkA.js";
-import { a as WalkerResult, c as captureRegime, i as CaptureWalkerContext, l as defineXrayCaptureWalker, n as CaptureRegimeOptions, o as XrayCaptureWalker, r as CaptureTooLargeError, s as capture, t as CaptureOptions } from "./serialize-B--oY2bV.js";
+import { _ as emptyPlate, a as CollectAxis, c as XrayCaptureWalker, d as MergedPlate, f as Plate, g as ViewCapture, i as CaptureWalkerContext, l as defineXrayCaptureWalker, m as RenderNode, n as CaptureSize, o as CollectLimits, p as PlateNode, r as CaptureTooLargeError, s as WalkerDecision, t as CaptureOptions, u as LeafKind } from "./serialize-BgdGt34A.js";
 
 //#region src/chunk.d.ts
 /**
@@ -9,36 +8,25 @@ import { a as WalkerResult, c as captureRegime, i as CaptureWalkerContext, l as
  * chunks and renders the fallback.
  */
 declare function serializePlate(merged: MergedPlate): Plate;
-//#endregion
-//#region src/merge.d.ts
 /**
- * Turn the per-view captures in a plate file into the one plate a Skeleton
- * renders.
- *
- * Each view is kept whole — its own subtree, its own ids, its own rules —
- * and shown only across the viewport range it owns, via `@media display:none`
- * gates. We do NOT merge the views' trees into one. An earlier design (ADR
- * 0004) did, sharing common structure and forking the rest, but aligning two
- * genuinely-different DOM trees (mobile stacked vs desktop two-column) without
- * stable keys proved unreliable: every heuristic mis-paired some nodes and
- * remapped one view's rules onto another's elements, corrupting both. A lone
- * capture is pixel-faithful; keeping each view lone preserves that. The cost
- * is a larger plate (roughly the sum of the views) — bounded by the plate
- * size cap — in exchange for correctness.
- *
- * Pure data-in/data-out — runs in node (plugin load) and in tests.
+ * Distinct plate names referenced by the tree's stitches, in first-seen order.
+ * Walks a `RenderNode` tree (the stored, post-classify shape), so it drives the
+ * gen-side stitch import graph straight off a `StoredPlate.tree`
+ * (`renderPlateModule`, index.ts). Relocated here from the now-deleted `merge.ts`
+ * in the ADR 0022 cutover — it is the one node-side primitive that survived the
+ * `mergeViews`/`addCapture` removal (the multi-View merge/gate now lives in the
+ * in-browser `serializePlateIR`, project.ts).
  */
-declare function mergeViews(file: PlateFile): MergedPlate;
-/** Distinct plate names referenced by the tree's stitches, in first-seen order. */
 declare function collectRefs(tree: RenderNode | null): string[];
-/** Fold a fresh capture into the plate file: union breakpoints, one capture per view. */
-declare function addCapture(file: PlateFile | null, name: string, capture: ViewCapture, breakpoints: readonly number[]): PlateFile;
 //#endregion
 //#region src/core.d.ts
 /**
- * Capture a live DOM subtree straight to a renderable Plate — `capture` followed
- * by `serializePlate` in one call. `roots` are the top-level elements to capture
- * (a component's rendered roots). Pass the result to a `<Skeleton plate>`.
+ * Capture a live DOM subtree straight to a renderable Plate. Runs the same
+ * uniform pipeline the dev client does for a single View — measure (`captureView`),
+ * reduce (`runPlatePasses`), project (`serializePlateIR` → the structured
+ * `StoredPlate`), then lower to chunks (`serializePlate`) — in one call. `roots`
+ * are the top-level elements to capture (a component's rendered roots). Pass the
+ * result to a `<Skeleton plate>`.
  *
  * `options.walker` is the public programmable capture walker (ADR 0018, Q2 —
  * yes, public): the same `XrayCaptureWalker` the `<Skeleton captureWalker>` prop
@@ -57,4 +45,4 @@ declare function captureElement(roots: readonly Element[], options: CaptureOptio
  */
 declare function renderPlateHtml(plate: Plate): string;
 //#endregion
-export { type CaptureOptions, type CaptureRegimeOptions, CaptureTooLargeError, type CaptureWalkerContext, type LeafKind, type MergedPlate, type Plate, type PlateFile, type PlateNode, type ViewCapture, type WalkerResult, type XrayCaptureWalker, addCapture, capture, captureElement, captureRegime, collectRefs, defineXrayCaptureWalker, emptyPlate, mergeViews, renderPlateHtml, serializePlate };
+export { type CaptureOptions, type CaptureSize, CaptureTooLargeError, type CaptureWalkerContext, type CollectAxis, type CollectLimits, type LeafKind, type MergedPlate, type Plate, type PlateNode, type ViewCapture, type WalkerDecision, type XrayCaptureWalker, captureElement, collectRefs, defineXrayCaptureWalker, emptyPlate, renderPlateHtml, serializePlate };