@hueest/xray 0.2.0 → 0.4.0

package/dist/index.js

@@ -3,8 +3,6 @@ import { dirname, relative, resolve } from "node:path";
 import * as v from "valibot";
 /** App code imports plates from here, e.g. `import plate from 'virtual:xray/plates/my-banner'`. */
 const VIRTUAL_PREFIX = "virtual:xray/plates/";
-/** Marks the rendered skeleton root; carries the plate name. Also a dev capture marker. */
-const ROOT_ATTR = "data-xr-root";
 /**
 * Marks an OUTERMOST skeleton root that is a stitch continuation (ADR 0020): a
 * standalone `<Skeleton>` replacing a stitch a still-showing parent skeleton was
@@ -14,7 +12,6 @@ const ROOT_ATTR = "data-xr-root";
 * own) nor on an ordinary top-level skeleton (which keeps the normal delay).
 */
 const ROOT_INSTANT_ATTR = "data-xr-instant";
-const SPEC_GATE = 2e7;
 /** Fixed renderer-owned classes every rendered node carries. */
 const ROOT_CLASS = "xr-root";
 const NODE_CLASS = "xr-node";
@@ -48,9 +45,12 @@ const LEAF_CLASS = "xr-leaf";
      Never transition opacity directly (the pulse animation owns it). */
   opacity: calc(var(--xr-o) * var(--xr-reveal));
 }
-/* Per-kind defaults: text reads as rounded bars, media as blocks. Re-theme any
-   kind via [data-xr-root] .${LEAF_CLASS}-text { ... }. */
+/* Per-kind defaults: a single text LINE reads as a rounded bar; a multi-line
+   text BLOCK as a soft rect (a tall pill misreads as a button); media carries
+   the author radius, defaulting to the same soft rect. Re-theme any kind via
+   [data-xr-root] .${LEAF_CLASS}-text { ... }. */
 .${LEAF_CLASS}-text { border-radius: var(--xr-bone-text-border-radius, 999px) }
+.${LEAF_CLASS}-text-block { border-radius: var(--xr-bone-text-block-border-radius, var(--xr-bone-border-radius, 4px)) }
 .${LEAF_CLASS}-media { border-radius: var(--xr-bone-media-border-radius, var(--xr-bone-border-radius, 4px)) }
 @keyframes xr-pulse {
   from { --xr-o: var(--xr-bone-pulse-opacity-max, 1) }
@@ -107,7 +107,7 @@ const LEAF_CLASS = "xr-leaf";
 /** The (unserialized) plate an import resolves to before anything has been captured. */
 function emptyPlate(name) {
 	return {
-		v: 1,
+		v: 2,
 		name,
 		tree: null,
 		css: ""
@@ -128,12 +128,13 @@ function nodeClass(node) {
 	return NODE_CLASS + (node.leaf ? ` ${LEAF_CLASS} ${LEAF_CLASS}-${node.leaf}` : "") + (node.cls ? ` ${node.cls}` : "");
 }
 /**
-* Whether this subtree holds a stitch (`ref`) anywhere — a stitched subtree
-* can't collapse to a flat string, since a `ref` resolves to a child plate at
-* render time and must stay a mount point.
+* Whether this subtree holds a render-time DYNAMIC node anywhere — a stitch
+* (`ref`, a mount point resolved to a child plate) or a template (`count`, a cell
+* the adapter repeats). Either keeps the subtree from collapsing to one flat
+* string, since both are expanded at render rather than baked into the markup.
 */
-function hasStitch(node) {
-	return node.ref !== void 0 || (node.kids?.some(hasStitch) ?? false);
+function hasDynamic(node) {
+	return node.ref !== void 0 || node.count !== void 0 || (node.kids?.some(hasDynamic) ?? false);
 }
 /** Serialize a stitch-free subtree to one HTML string (caller guarantees no `ref` below). */
 function toHtml(node) {
@@ -141,10 +142,13 @@ function toHtml(node) {
 	return `<div class="${nodeClass(node)}">${kids}</div>`;
 }
 /**
-* Serialize a node list into chunks: each maximal stitch-free run becomes one
-* HTML `string`; a `ref` node becomes `{ r }`; a node that isn't itself a stitch
-* but holds one deeper stays a real element (`{ c, k }`) and recurses. Mirrors
-* the element shape the runtime renderer would otherwise build per node.
+* Serialize a node list into chunks: each maximal run with no render-time dynamic
+* node becomes one HTML `string`; a `ref` node becomes `{ r }`; a `count` node
+* becomes `{ t: html, n }` (its cell's HTML once + the repeat count); a node that
+* isn't itself dynamic but holds one deeper stays a real element (`{ c, k }`) and
+* recurses. Mirrors the element shape the runtime renderer would otherwise build
+* per node. A `count` cell is guaranteed stitch-free by the capture pass, so its
+* `toHtml` is a plain string the adapter repeats.
 */
 function toChunks(nodes) {
 	const out = [];
@@ -156,12 +160,16 @@ function toChunks(nodes) {
 		}
 	};
 	for (const node of nodes) {
-		if (!hasStitch(node)) {
+		if (!hasDynamic(node)) {
 			buf += toHtml(node);
 			continue;
 		}
 		flush();
 		if (node.ref !== void 0) out.push({ r: node.ref });
+		else if (node.count !== void 0) out.push({
+			t: toHtml(node),
+			n: node.count
+		});
 		else out.push({
 			c: nodeClass(node),
 			k: toChunks(node.kids ?? [])
@@ -198,231 +206,15 @@ function serializePlate(merged) {
 		css
 	};
 }
-//#endregion
-//#region src/breakpoints.ts
-/** 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
-//#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}${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();
-	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-";
-/**
-* 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:
-*  - `'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.
+* 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).
 */
-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/merge.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.
-*/
-function mergeViews(file) {
-	const views = file.views;
-	if (views.length === 0) return emptyPlate(file.name);
-	if (views.length === 1) {
-		const [only] = views;
-		if (!only) return emptyPlate(file.name);
-		const { tree, css } = classify(only.rules, only.tree, file.name);
-		return {
-			v: 1,
-			name: file.name,
-			tree,
-			css
-		};
-	}
-	const starts = views.map((r) => regimeFor(r.width, file.breakpoints).min ?? 0);
-	let nextId = 1;
-	const rootKids = [];
-	const rules = [];
-	views.forEach((view, i) => {
-		const idMap = /* @__PURE__ */ new Map();
-		const kids = (view.tree.kids ?? []).map((kid) => cloneWithIds(kid, idMap, () => nextId++));
-		rootKids.push(...kids);
-		rules.push(...remapRules(view.rules, idMap));
-		const lo = i === 0 ? 0 : starts[i] ?? 0;
-		const hi = i === views.length - 1 ? Number.POSITIVE_INFINITY : starts[i + 1] ?? 0;
-		for (const kid of kids) {
-			if (lo > 0) rules.push(gate(kid.id, `(max-width: ${lo - .02}px)`));
-			if (hi !== Number.POSITIVE_INFINITY) rules.push(gate(kid.id, `(min-width: ${hi}px)`));
-		}
-	});
-	const { tree, css } = classify(rules, {
-		id: 0,
-		kids: rootKids
-	}, file.name);
-	return {
-		v: 1,
-		name: file.name,
-		tree,
-		css
-	};
-}
-function gate(id, condition) {
-	return {
-		ids: [id],
-		decls: ["display: none !important"],
-		media: [condition],
-		spec: SPEC_GATE,
-		order: id
-	};
-}
-/** Deep-clone a captured subtree into fresh ids, recording the mapping. */
-function cloneWithIds(node, idMap, allocate) {
-	const id = allocate();
-	idMap.set(node.id, id);
-	const kids = node.kids?.map((kid) => cloneWithIds(kid, idMap, allocate));
-	return {
-		id,
-		...node.leaf ? { leaf: node.leaf } : {},
-		...node.ref !== void 0 ? { ref: node.ref } : {},
-		...kids ? { kids } : {}
-	};
-}
-/** Distinct plate names referenced by the tree's stitches, in first-seen order. */
 function collectRefs(tree) {
 	const names = [];
 	const seen = /* @__PURE__ */ new Set();
@@ -436,27 +228,6 @@ function collectRefs(tree) {
 	if (tree) visit(tree);
 	return names;
 }
-function remapRules(rules, idMap) {
-	return rules.map((rule) => ({
-		...rule,
-		ids: rule.ids.map((id) => idMap.get(id) ?? id)
-	}));
-}
-/** Fold a fresh capture into the plate file: union breakpoints, one capture per view. */
-function addCapture(file, name, capture, breakpoints) {
-	const allBreakpoints = [...new Set([...file?.breakpoints ?? [], ...breakpoints])].toSorted((a, b) => a - b);
-	const spanKey = (width) => JSON.stringify(regimeFor(width, allBreakpoints));
-	const { diagnostics: _diagnostics, ...persisted } = capture;
-	const views = [...file?.views ?? [], persisted];
-	const byView = /* @__PURE__ */ new Map();
-	for (const view of views) byView.set(spanKey(view.width), view);
-	return {
-		v: 1,
-		name,
-		breakpoints: allBreakpoints,
-		views: [...byView.values()].toSorted((a, b) => a.width - b.width)
-	};
-}
 //#endregion
 //#region src/diagnostics.ts
 /**
@@ -486,9 +257,10 @@ const DIAGNOSTIC_MESSAGES = {
 	"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",
+	"dropped-tag": "dropped hidden or non-visual elements (display:none, visibility:hidden, opacity:0, script/style/etc.)",
+	"dropped-subset": "dropped bones wholly inside a larger solid bone — the superset renders the same area (overlapping bones collapse to their union)",
+	"dropped-cropped": "dropped bones below the fold (off-screen at capture, in the viewport or a scroll container); real content fills in below without shifting the visible skeleton",
+	"too-large": "capture exceeded a Collect 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"
 };
 /**
@@ -539,93 +311,11 @@ function isValidPlateName(name) {
 	return /^\w+(?:-\w+)*(?:\/\w+(?:-\w+)*)*$/.test(name);
 }
 //#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));
-}
-//#endregion
 //#region src/validate.ts
 /**
-* Structural validation of a posted capture, plus a single-CSS-declaration
-* validator, for the dev `/__xray` endpoint.
+* Structural validation of a posted/committed `StoredPlate`, plus the
+* single-CSS-declaration / media-condition validators, for the dev `/__xray`
+* endpoint and disk reads.
 *
 * NODE-ONLY (see the capture-input-validation plan and ADR 0008). This module
 * imports `valibot`, which must NEVER reach the browser bundles: the dev capture
@@ -638,14 +328,17 @@ function isLayoutProp(prop) {
 * helpers from any public subpath — they stay private until a `doctor`-style
 * tool creates a concrete external need (the plan's decisions).
 *
-* The endpoint accepts ONLY the payload shape xray itself produces. The dev
-* client always posts a `captureRegime` result, so this schema is calibrated to
-* what that emits — finite ids, the layout declarations `filterLayoutDecls`
-* produces, the gate/fallback/leaf rule tiers, media/container condition stacks
-* — and rejects everything else with a generic error. POST-time validation is
-* necessary but not sufficient: a committed `plates/<name>.json` is also
-* untrusted (hand-edited or from git), so the render path independently escapes
-* raw-text `<style>` terminators (css-escape.ts).
+* The endpoint accepts ONLY the artifact shape xray itself produces. After the
+* ADR 0022 cutover the dev client posts a finished `StoredPlate` — the whole
+* Plate already projected in the browser (`serializePlateIR`) — so `parseStoredPlate`
+* is the single validator: a post-classify `RenderNode` tree plus an
+* already-classified css blob, guarded for `<style>`-breakout only (the per-decl
+* allowlist no longer applies to a finished css string; see `isValidPlateCss`).
+* The per-declaration / per-condition validators (`isValidDeclaration` /
+* `isValidCondition`) remain exported helpers — the css blob already passed them
+* AT CAPTURE TIME in the browser. Validation is necessary but not sufficient: a
+* committed `StoredPlate` is also untrusted (hand-edited or from git), so the
+* render path independently escapes raw-text `<style>` terminators (css-escape.ts).
 *
 * @module
 */
@@ -656,26 +349,15 @@ function isLayoutProp(prop) {
 * these are the structural ceilings the schema enforces before either runs.
 */
 const MAX_TREE_NODES = 5e4;
-const MAX_RULES = 5e4;
-const MAX_RULE_IDS = 5e4;
-const MAX_DECLS_PER_RULE = 1e3;
-const MAX_CONDITIONS = 64;
 const MAX_BREAKPOINTS = 256;
 const MAX_TREE_DEPTH = 1e3;
-/** A single declaration is `prop: value [!important]`; real ones are short. */
-const MAX_DECL_LENGTH = 2e3;
-/** A media/container condition string, generously bounded. */
-const MAX_CONDITION_LENGTH = 1e3;
-/** Diagnostic strings are dev console text, not plate content; keep them small. */
-const MAX_DIAGNOSTIC_MESSAGE = 1e3;
-const MAX_DIAGNOSTIC_DETAIL = 1e3;
 /**
-* ASCII control characters (C0 range + DEL). Written with escaped code points so
-* this module stays a TEXT file: a literal control byte makes git treat it as
-* binary and hides its lines from `grep`. The class is identical in meaning to
-* the previous literal-byte one (NUL through 0x1F, plus 0x7F).
+* A template node's repeat count (Phase 2). Far above any real feed, yet bounded
+* so a hostile `count` cannot drive an unbounded render-time string `.repeat`.
 */
-const CONTROL_CHARS = /[\u0000-\u001f\u007f]/u;
+const MAX_TEMPLATE_COUNT = 1e4;
+/** A single declaration is `prop: value [!important]`; real ones are short. */
+const MAX_DECL_LENGTH = 2e3;
 /**
 * Raw-text / markup terminators that must never appear in generated CSS, even
 * when no bare `<`/`>` is present: HTML comment delimiters, a CDATA opener, and
@@ -683,87 +365,20 @@ const CONTROL_CHARS = /[\u0000-\u001f\u007f]/u;
 * validators (case-insensitive).
 */
 const RAW_TEXT_TERMINATORS = /<!--|-->|<!\[cdata\[|<\/style/iu;
-/**
-* Accept only a SINGLE CSS declaration of the form `property: value` with an
-* optional trailing `!important`, and only for a layout property the capture
-* path would emit. This is the same allowlist `filterLayoutDecls` applies
-* (`isLayoutProp`), so a posted payload cannot persist paint- or
-* script-adjacent junk the real capture would never produce.
-*
-* Rejects anything that could escape the single-declaration context or the
-* `<style>` raw-text context downstream: rule braces (`{`/`}`), markup angle
-* brackets (`<`/`>`), HTML comment / CDATA delimiters, a `</style` terminator,
-* ASCII control characters, and any extra semicolon-separated declaration. A
-* lone trailing `;` is tolerated (some serializers add one); a second
-* declaration after it is not.
-*/
-function isValidDeclaration(decl) {
-	if (typeof decl !== "string") return false;
-	if (decl.length === 0 || decl.length > MAX_DECL_LENGTH) return false;
-	if (CONTROL_CHARS.test(decl)) return false;
-	if (/[{}<>]/.test(decl)) return false;
-	if (RAW_TEXT_TERMINATORS.test(decl)) return false;
-	const trimmed = decl.trim().replace(/;\s*$/, "");
-	if (trimmed.includes(";")) return false;
-	const colon = trimmed.indexOf(":");
-	if (colon <= 0) return false;
-	const prop = trimmed.slice(0, colon).trim().toLowerCase();
-	const value = trimmed.slice(colon + 1).trim();
-	if (value.length === 0) return false;
-	if (value.replace(/\s*!\s*important\s*$/i, "").trim().length === 0) return false;
-	return isLayoutProp(prop);
-}
-/**
-* Accept only a media/container condition (prelude) of the shape xray actually
-* emits, and reject anything that could break OUT of the `@media`/`@container`
-* prelude into a top-level rule when `classify` interpolates it RAW into the
-* generated CSS (`@media <condition> { ... }`). The capture path produces:
-* synthesized span conditions `(min-width: 768px)` / `(max-width: 767.98px)`,
-* author media text such as `screen and (min-width: 768px)`,
-* `(orientation: landscape)`, comma media lists `screen, print`, and container
-* queries like `(min-width: 400px)`, a named `sidebar (min-width: 400px)`, or a
-* style query `style(--x: 1)`. Authors may also use Media Queries Level 4 range
-* syntax, which browsers serialize into `mediaText`/`containerQuery` verbatim
-* (`(width >= 600px)`, `(400px < width <= 700px)`), so a condition can legitimately
-* carry a bare `<`/`>` — those are allowed.
-*
-* Rejects: rule braces (`{`/`}`) and a `;` — the CSS-rule breakout vectors —
-* CSS comment delimiters (`/*` / `*\/`), the raw-text/markup terminators
-* (`</style`, `<!--`, `-->`, `<![CDATA[`), ASCII control characters, and any
-* over-length string.
-*/
-function isValidCondition(condition) {
-	if (typeof condition !== "string") return false;
-	if (condition.length === 0 || condition.length > MAX_CONDITION_LENGTH) return false;
-	if (CONTROL_CHARS.test(condition)) return false;
-	if (/[{};]/.test(condition)) return false;
-	if (condition.includes("/*") || condition.includes("*/")) return false;
-	if (RAW_TEXT_TERMINATORS.test(condition)) return false;
-	return true;
-}
-/** A finite integer id (plate-local node id), bounded to a sane range. */
-const idSchema = v.pipe(v.number(), v.integer(), v.minValue(0), v.maxValue(Number.MAX_SAFE_INTEGER));
 /** A finite number, no NaN/Infinity (valibot's `number()` already rejects NaN). */
 const finiteNumber = v.pipe(v.number(), v.finite());
-const conditionList = v.pipe(v.array(v.pipe(v.string(), v.check(isValidCondition, "invalid condition"))), v.maxLength(MAX_CONDITIONS));
 const leafSchema = v.picklist([
 	"text",
+	"text-block",
 	"media",
 	"box"
 ]);
 /**
-* Recursive `PlateNode`. `id` is required (every captured node has one);
-* `leaf`, `ref`, and `kids` are optional and mutually constrained by the tree
-* shape the capture emits. `ref` (a stitch) must name a valid plate. Depth and
-* child-count are bounded so a deeply nested or fanned-out payload cannot blow
-* the stack or memory before the node guard runs.
+* Depth + total-node guard shared by the recursive node schema. The recursive
+* `array(lazy(...))` bounds breadth per level; this guards total depth so a long
+* thin chain cannot recurse without limit, and the running `count` bounds the
+* total node budget so a fanned-out payload cannot exhaust memory.
 */
-const plateNodeSchema = v.pipe(v.object({
-	id: idSchema,
-	leaf: v.optional(leafSchema),
-	ref: v.optional(v.pipe(v.string(), v.check(isValidPlateName, "invalid stitch ref"))),
-	kids: v.optional(v.pipe(v.array(v.lazy(() => plateNodeSchema)), v.maxLength(MAX_TREE_NODES)))
-}), v.check((node) => treeWithinLimits(node), "tree exceeds size or depth limits"));
 function treeWithinLimits(root) {
 	let count = 0;
 	const walk = (node, depth) => {
@@ -777,103 +392,79 @@ function treeWithinLimits(root) {
 	};
 	return walk(root, 0);
 }
-const plateRuleSchema = v.object({
-	ids: v.pipe(v.array(idSchema), v.maxLength(MAX_RULE_IDS)),
-	decls: v.pipe(v.array(v.pipe(v.string(), v.check(isValidDeclaration, "invalid declaration"))), v.maxLength(MAX_DECLS_PER_RULE)),
-	media: v.optional(conditionList),
-	container: v.optional(conditionList),
-	layered: v.optional(v.boolean()),
-	spec: finiteNumber,
-	order: finiteNumber
-});
-/**
-* The TRANSIENT, dev-only diagnostics that ride on a posted capture
-* (plate.ts / diagnostics.ts). Validated LOOSELY and kept as a KNOWN key so a
-* valid post is not rejected AND the field survives parsing for the server to
-* log before `addCapture` strips it. `code` is checked against the closed
-* DiagnosticCode set; message/detail are bounded strings, never plate content.
-*/
-const diagnosticCode = v.picklist([
-	"unreadable-stylesheet",
-	"unreadable-import",
-	"skipped-dynamic-pseudo",
-	"skipped-pseudo-element",
-	"unsupported-rule",
-	"dropped-tag",
-	"pruned-run",
-	"too-large",
-	"invalid-plate-file"
-]);
-const diagnosticSchema = v.object({
-	code: diagnosticCode,
-	message: v.pipe(v.string(), v.maxLength(MAX_DIAGNOSTIC_MESSAGE)),
-	count: v.optional(finiteNumber),
-	detail: v.optional(v.pipe(v.string(), v.maxLength(MAX_DIAGNOSTIC_DETAIL)))
-});
+/** A finished plate's css blob, generously bounded (post-classify, whole-plate). */
+const MAX_PLATE_CSS_LENGTH = 4e6;
 /**
-* A `ViewCapture`: a measured width plus an optional `[min, max)` span, the
-* recursive tree, and the rule list. `min < max` when both are present (a
-* zero-width or inverted span is never captured). `diagnostics` is an optional,
-* loosely-validated, transient array preserved through parsing (see above).
+* A NUL byte — the one control character that must never reach the rendered
+* `<style>`. Unlike the per-declaration validator, the whole-plate css blob
+* legitimately carries newlines/tabs (`classify` joins rules with `\n`), so the
+* broad `CONTROL_CHARS` class does NOT apply here.
 */
-const viewCaptureSchema = v.pipe(v.object({
-	width: finiteNumber,
-	min: v.optional(finiteNumber),
-	max: v.optional(finiteNumber),
-	tree: plateNodeSchema,
-	rules: v.pipe(v.array(plateRuleSchema), v.maxLength(MAX_RULES)),
-	diagnostics: v.optional(v.pipe(v.array(diagnosticSchema), v.maxLength(MAX_CONDITIONS)))
-}), v.check((c) => c.min === void 0 || c.max === void 0 || c.min < c.max, "capture span min must be below max"));
+const NUL = /\u0000/u;
 /**
-* The full `/__xray` POST body: a valid plate name, the view capture, and the
-* optional union of detected breakpoints (finite positive numbers, deduped and
-* sorted — the same normalization `addCapture` performs, so an unsorted or
-* duplicated post is accepted and normalized rather than rejected).
+* Validate a STORED, already-classified css blob (ADR 0022 cutover). The trust
+* model differs from a pre-classify `decls[]` array: a `StoredPlate.css` is the
+* WHOLE plate's content-addressed CSS — a string of selectors, `{ ... }` rule
+* blocks, and `@media`/`@container` at-rules — so the per-declaration
+* `isValidDeclaration` allowlist (which forbids `{}` and re-checks `isLayoutProp`)
+* cannot apply: it would reject every real plate. Braces, newlines, and bare
+* `<`/`>` (Media Queries Level 4 range syntax, `@media (width >= 600px)`) are all
+* legitimate here. The css was produced by `filterLayoutDecls`-filtered decls at
+* capture time in the browser; on disk we guard only the security boundary the
+* render path also enforces: no `<style>` raw-text breakout. Reject the raw-text /
+* markup terminators (`</style`, `<!--`, `-->`, `<![CDATA[`) and a NUL byte, and
+* bound the length. The render path independently escapes these (`escapeStyleText`,
+* css-escape.ts) — that stays as the belt; this is the braces. A `StoredPlate` is
+* untrusted exactly as a `PlateFile` was (hand-edited / arriving via git).
 */
-const incomingCaptureSchema = v.object({
-	name: v.pipe(v.string(), v.check(isValidPlateName, "invalid plate name")),
-	capture: viewCaptureSchema,
-	breakpoints: v.optional(v.pipe(v.array(v.pipe(finiteNumber, v.minValue(0))), v.maxLength(MAX_BREAKPOINTS), v.transform((bps) => [...new Set(bps)].toSorted((a, b) => a - b))))
-});
+function isValidPlateCss(css) {
+	if (typeof css !== "string") return false;
+	if (css.length > MAX_PLATE_CSS_LENGTH) return false;
+	if (NUL.test(css)) return false;
+	if (RAW_TEXT_TERMINATORS.test(css)) return false;
+	return true;
+}
 /**
-* Parse a posted body against the schema. Returns the normalized payload on
-* success or `null` on any structural failure — the caller maps that to a
-* generic `400` and NEVER echoes the payload or its CSS (the plan's error-
-* response decision). Validation throws nothing the caller must format.
+* Recursive `RenderNode` — the POST-classify tree shape (plate.ts): no `id` (ids
+* are stripped at classify), an optional content-class string `cls`, and the same
+* `leaf`/`ref`/`count`/`kids` the renderer reads. Mirrors `plateNodeSchema` minus
+* `id`, plus a bounded `cls`. Depth/breadth bounded by the shared `treeWithinLimits`.
 */
-function parseIncomingCapture(value) {
-	const result = v.safeParse(incomingCaptureSchema, value);
-	return result.success ? result.output : null;
-}
+const renderNodeSchema = v.pipe(v.object({
+	leaf: v.optional(leafSchema),
+	ref: v.optional(v.pipe(v.string(), v.check(isValidPlateName, "invalid stitch ref"))),
+	cls: v.optional(v.pipe(v.string(), v.maxLength(MAX_DECL_LENGTH))),
+	count: v.optional(v.pipe(v.number(), v.integer(), v.minValue(1), v.maxValue(MAX_TEMPLATE_COUNT))),
+	kids: v.optional(v.pipe(v.array(v.lazy(() => renderNodeSchema)), v.maxLength(MAX_TREE_NODES)))
+}), v.check((node) => treeWithinLimits(node), "tree exceeds size or depth limits"));
 /**
-* The committed `plates/<name>.json` shape (plate.ts). REUSES `viewCaptureSchema`
-* — and therefore the same strict declaration and condition validators — so a
-* file on disk is held to exactly the trust boundary a POST is: committed plates
-* are untrusted (hand-edited or arriving via git), and `classify` interpolates
-* their `decls`/`media`/`container` into generated CSS just the same. `v` must be
-* the current `PLATE_VERSION` and `name` a valid plate name. `breakpoints` are
-* finite non-negative numbers, bounded but NOT renormalized (the file is the
-* source of truth; the merge layer owns ordering). The persisted `ViewCapture`
-* never carries `diagnostics` (stripped before write), and the schema already
-* makes that field optional, so a file without it is accepted.
+* The committed/posted `StoredPlate` shape AFTER the ADR 0022 cutover (plate.ts):
+* the whole plate already projected in the browser. Validated to the SAME trust
+* boundary a `PlateFile` was — a `StoredPlate` on disk is untrusted (hand-edited
+* or arriving via git). `tree` is a `RenderNode` (post-classify, nullable for a
+* capture-less plate); `css` is the already-classified blob, guarded for
+* `<style>`-breakout only (`isValidPlateCss`, above). `breakpoints` are finite
+* non-negative numbers, bounded but NOT renormalized (the file is the source of
+* truth). `v` must be the current `PLATE_VERSION`.
 */
-const plateFileSchema = v.object({
-	v: v.literal(1),
+const storedPlateSchema = v.object({
+	v: v.literal(2),
 	name: v.pipe(v.string(), v.check(isValidPlateName, "invalid plate name")),
 	breakpoints: v.pipe(v.array(v.pipe(finiteNumber, v.minValue(0))), v.maxLength(MAX_BREAKPOINTS)),
-	views: v.pipe(v.array(viewCaptureSchema), v.maxLength(MAX_RULES))
+	tree: v.nullable(renderNodeSchema),
+	css: v.pipe(v.string(), v.check(isValidPlateCss, "invalid plate css"))
 });
 /**
-* Parse a committed plate file against the SAME schema a POST goes through.
-* Returns the typed `PlateFile` on success or `null` on any structural failure
-* (corrupt JSON object, wrong shape, version mismatch, an injected declaration
-* or media/container condition). The disk readers map `null` to an empty plate
-* and the `invalid-plate-file` diagnostic — they never throw, so a malformed or
-* hostile committed plate degrades to empty rather than breaking the build or
-* smuggling raw CSS through `classify`.
+* Parse a committed/posted `StoredPlate` against its schema (the ADR 0022 cutover
+* shape). Returns the typed `StoredPlate` on success or `null` on any structural
+* failure (corrupt object, wrong shape, version mismatch, an injected `<style>`
+* terminator in the css, an oversized/over-deep tree). The disk readers and the
+* POST handler map `null` to an empty plate / a generic 400 and never echo the
+* payload — a malformed or hostile stored plate degrades to empty rather than
+* breaking the build or smuggling a `<style>`-escaping css blob through render.
 */
-function parsePlateFile(value) {
-	const result = v.safeParse(plateFileSchema, value);
+function parseStoredPlate(value) {
+	const result = v.safeParse(storedPlateSchema, value);
 	return result.success ? result.output : null;
 }
 //#endregion
@@ -914,7 +505,7 @@ function xrayVitePlugin(options = {}) {
 	const capture = options.capture ?? false;
 	const delay = options.delay ?? 200;
 	const settleCap = options.settleCap ?? 5e3;
-	const maxNodes = options.maxNodes ?? 4e3;
+	const collect = options.collect;
 	const hud = options.hud ?? false;
 	const recordMode = options.fixtures?.record ?? "manual";
 	const replayMode = options.fixtures?.replay ?? false;
@@ -933,7 +524,7 @@ function xrayVitePlugin(options = {}) {
 			if (!id.startsWith(RESOLVED_PREFIX)) return void 0;
 			const name = id.slice(RESOLVED_PREFIX.length);
 			if (!isValidPlateName(name)) return renderPlateModule(emptyPlate(name));
-			return renderPlateModule(readPlate(platePath(name), name));
+			return renderPlateModule(readStoredPlate(platePath(name)) ?? emptyPlate(name), name);
 		}
 	}, {
 		name: "xray:dev",
@@ -963,7 +554,7 @@ function xrayVitePlugin(options = {}) {
 		},
 		load(id) {
 			if (id !== RESOLVED_BOOT_ID) return void 0;
-			return bootstrapCode(delay, settleCap, maxNodes, hud, capture, recordMode, replayMode);
+			return bootstrapCode(delay, settleCap, collect, hud, capture, recordMode, replayMode);
 		},
 		configureServer(server) {
 			const dir = () => resolve(root, platesDir);
@@ -972,7 +563,7 @@ function xrayVitePlugin(options = {}) {
 				if (!file.startsWith(dir()) || !file.endsWith(".json")) return;
 				const name = relative(dir(), file).slice(0, -5);
 				if (!isValidPlateName(name)) return;
-				announcePlate(server.ws, name, readPlateFile(file));
+				announcePlate(server.ws, name, readStoredPlate(file));
 			};
 			server.watcher.on("add", onPlateFile);
 			server.watcher.on("change", onPlateFile);
@@ -1000,14 +591,14 @@ function xrayVitePlugin(options = {}) {
 * The injected dev module: boot the client, POST captures back, optionally
 * mount the HUD. The client installs first so the HUD finds the light box store.
 */
-function bootstrapCode(delay, settleCap, maxNodes, hud, capture, recordMode, replayMode) {
+function bootstrapCode(delay, settleCap, collect, hud, capture, recordMode, replayMode) {
 	return [
 		`import { installXrayClient } from '@hueest/xray/internal/client'`,
 		...hud ? [`import { installXrayHud } from '@hueest/xray/internal/hud'`] : [],
 		"installXrayClient({",
 		`  delay: ${delay},`,
 		`  settleCap: ${settleCap},`,
-		`  maxNodes: ${maxNodes},`,
+		`  collect: ${JSON.stringify(collect ?? {})},`,
 		`  capture: ${capture},`,
 		`  record: ${JSON.stringify(recordMode)},`,
 		`  replay: ${JSON.stringify(replayMode)},`,
@@ -1073,10 +664,11 @@ function reportServerDiagnostics(server, name, diagnostics) {
 /** A committed plate file past this is almost always a `<Skeleton>` set too high. */
 const MAX_PLATE_BYTES = 2e6;
 /**
-* Hard ceiling on the POST body we will buffer. A single posted capture is one
-* view (smaller than the accumulated plate file the `MAX_PLATE_BYTES` cap
-* guards), so this sits above the plate cap with headroom and exists only to
-* stop an oversized or runaway body from being read into memory. Enforced both
+* Hard ceiling on the POST body we will buffer. The posted StoredPlate is the
+* whole projected Plate the `MAX_PLATE_BYTES` cap guards, so this sits above the
+* plate cap with headroom (the JSON envelope + diagnostics add a little) and
+* exists only to stop an oversized or runaway body from being read into memory.
+* Enforced both
 * up front from `content-length` and while streaming, so a lying or absent
 * `content-length` cannot get past it. The dev endpoint is local and
 * unauthenticated, so this is the real backstop, not the header.
@@ -1091,29 +683,55 @@ function isJsonContentType(value) {
 function isRecord(value) {
 	return typeof value === "object" && value !== null;
 }
-/** Send the merged plate (and its disk coverage) over the HMR event so the
-* client hot-swaps it in place and the HUD updates its band display. */
-function announcePlate(ws, name, plateFile) {
-	const merged = plateFile ? mergeViews({
-		...plateFile,
-		name
-	}) : emptyPlate(name);
+/**
+* Derive the HUD coverage bands from a StoredPlate's `breakpoints` (ADR 0022
+* cutover). Per-View spans no longer exist on disk — a post-cutover StoredPlate
+* sweeps ALL widths in one session, so coverage is complete per-Plate and the
+* bands are just the breakpoint partition: each adjacent breakpoint pair is a
+* covered band, the first band open-min, the last open-max. `breakpoints=[b1,b2]`
+* → `[{max:b1},{min:b1,max:b2},{min:b2}]`; `breakpoints=[]` → one open band `[{}]`.
+* Keeps the `xray:plate`/coverage `spans` shape (`{min?, max?}[]`) identical — only
+* the SOURCE changes (derived from breakpoints, not read off per-View captures).
+*/
+function spansFromBreakpoints(breakpoints) {
+	const sorted = [...breakpoints].toSorted((a, b) => a - b);
+	if (sorted.length === 0) return [{}];
+	const spans = [{ max: sorted[0] }];
+	for (let i = 0; i < sorted.length - 1; i++) spans.push({
+		min: sorted[i],
+		max: sorted[i + 1]
+	});
+	spans.push({ min: sorted.at(-1) });
+	return spans;
+}
+/** Send the stored plate (lowered to chunks) and its derived coverage bands over
+* the HMR event so the client hot-swaps it in place and the HUD updates its band
+* display. The gen-side runs `serializePlate(stored)` (the Bundle seam) here; the
+* `spans` derive from the stored breakpoints (the per-View list is gone). */
+function announcePlate(ws, name, stored) {
+	const breakpoints = stored?.breakpoints ?? [];
+	const plate = stored ? serializePlate({
+		v: stored.v,
+		name,
+		tree: stored.tree,
+		css: stored.css
+	}) : serializePlate(emptyPlate(name));
 	ws.send({
 		type: "custom",
 		event: "xray:plate",
 		data: {
 			name,
-			plate: serializePlate(merged),
-			breakpoints: plateFile?.breakpoints ?? [],
-			spans: (plateFile?.views ?? []).map((view) => ({
-				min: view.min,
-				max: view.max
-			}))
+			plate,
+			breakpoints,
+			spans: spansFromBreakpoints(breakpoints)
 		}
 	});
 }
 /**
-* Per-plate breakpoints + captured spans, read from the committed plate files.
+* Per-plate breakpoints + derived coverage bands, read from the committed
+* StoredPlate files. The `spans` derive from each plate's `breakpoints` (ADR 0022
+* cutover — per-View spans no longer exist on disk; a StoredPlate sweeps all
+* widths in one session, so its coverage is complete).
 *
 * @internal
 */
@@ -1133,14 +751,12 @@ function readCoverage(dir) {
 		if (!rel.endsWith(".json")) continue;
 		const name = rel.slice(0, -5);
 		if (!isValidPlateName(name)) continue;
-		const plateFile = readPlateFile(resolve(dir, rel));
-		if (!plateFile) continue;
+		const stored = readStoredPlate(resolve(dir, rel));
+		if (!stored) continue;
+		const breakpoints = stored.breakpoints ?? [];
 		out[name] = {
-			breakpoints: plateFile.breakpoints ?? [],
-			spans: plateFile.views.map((view) => ({
-				min: view.min,
-				max: view.max
-			}))
+			breakpoints,
+			spans: spansFromBreakpoints(breakpoints)
 		};
 	}
 	return out;
@@ -1263,7 +879,12 @@ function handleFixturePost(req, res, fixturePath) {
 	});
 }
 /**
-* Fold a posted capture into its plate file and hot-swap the plate in place.
+* Validate a posted `StoredPlate` envelope, write it AS-IS, and hot-swap the
+* plate in place. After the ADR 0022 cutover the dev client posts a finished
+* StoredPlate (the whole Plate already projected in the browser) inside a
+* `{ plate, diagnostics? }` envelope — there is NO server-side accumulation/merge
+* anymore. `diagnostics` is a SIBLING field the server logs and then drops; it
+* never reaches the stored artifact (ADR 0008).
 *
 * @internal
 */
@@ -1303,32 +924,33 @@ function handleCapturePost(req, res, server, platePath) {
 	req.on("end", () => {
 		if (aborted) return;
 		try {
-			const payload = parseIncomingCapture(JSON.parse(body));
-			if (!payload) {
+			const raw = JSON.parse(body);
+			const envelope = isRecord(raw) ? raw : void 0;
+			const stored = parseStoredPlate(envelope?.plate);
+			if (!stored) {
 				res.statusCode = 400;
 				res.end("invalid capture payload");
 				return;
 			}
-			reportServerDiagnostics(server, payload.name, payload.capture.diagnostics);
-			const file = platePath(payload.name);
-			const { plateFile: existing, invalid } = loadPlateFile(file);
-			if (invalid) reportServerDiagnostics(server, payload.name, [makeDiagnostic("invalid-plate-file", { detail: `${payload.name}.json` })]);
-			const next = addCapture(existing, payload.name, payload.capture, payload.breakpoints ?? []);
-			const serialized = `${JSON.stringify(next, null, 1)}\n`;
+			reportServerDiagnostics(server, stored.name, validEnvelopeDiagnostics(envelope?.diagnostics));
+			const file = platePath(stored.name);
+			const { stored: existing, invalid } = loadStoredPlate(file);
+			if (invalid) reportServerDiagnostics(server, stored.name, [makeDiagnostic("invalid-plate-file", { detail: `${stored.name}.json` })]);
+			const serialized = `${JSON.stringify(stored, null, 1)}\n`;
 			if (existing !== null && `${JSON.stringify(existing, null, 1)}\n` === serialized) {
 				res.statusCode = 204;
 				res.end();
 				return;
 			}
 			if (serialized.length > MAX_PLATE_BYTES) {
-				console.warn(`[xray] not writing "${payload.name}": ${Math.round(serialized.length / 1e3)}KB exceeds the cap.`, "The <Skeleton> likely sits too high in the tree.");
+				console.warn(`[xray] not writing "${stored.name}": ${Math.round(serialized.length / 1e3)}KB exceeds the cap.`, "The <Skeleton> likely sits too high in the tree.");
 				res.statusCode = 413;
 				res.end("plate too large");
 				return;
 			}
 			mkdirSync(dirname(file), { recursive: true });
 			writeFileSync(file, serialized);
-			announcePlate(server.ws, payload.name, next);
+			announcePlate(server.ws, stored.name, stored);
 			res.statusCode = 204;
 			res.end();
 		} catch {
@@ -1337,55 +959,64 @@ function handleCapturePost(req, res, server, platePath) {
 		}
 	});
 }
-function readPlateFile(file) {
-	return loadPlateFile(file).plateFile;
+/**
+* Loosely validate the envelope's SIBLING `diagnostics` (never stored, just
+* logged). The StoredPlate validator does not carry diagnostics — they are a
+* transient dev-only field on the POST envelope — so this filters the array to
+* the known-code shape `reportServerDiagnostics` formats, dropping anything that
+* is not a `{ code, message, ... }` record. A malformed diagnostics field never
+* fails the post (the plate already validated); it just logs nothing.
+*/
+function validEnvelopeDiagnostics(value) {
+	if (!Array.isArray(value)) return void 0;
+	const out = [];
+	for (const item of value) {
+		if (!isRecord(item) || typeof item.code !== "string" || typeof item.message !== "string") continue;
+		out.push({
+			code: item.code,
+			message: item.message,
+			...typeof item.count === "number" ? { count: item.count } : {},
+			...typeof item.detail === "string" ? { detail: item.detail } : {}
+		});
+	}
+	return out.length > 0 ? out : void 0;
 }
 /**
-* Read and validate a committed plate file, distinguishing "no file" from
-* "file present but unreadable". `invalid` is true ONLY when the file exists
-* but is corrupt JSON, the wrong shape, or a version mismatch — a missing file
-* is the normal pre-capture state and is not flagged. Callers use `invalid` to
-* warn (same diagnostics vocabulary) that an existing plate was ignored.
+* Read and validate a committed StoredPlate, distinguishing "no file" from "file
+* present but unreadable". `invalid` is true ONLY when the file exists but is
+* corrupt JSON, the wrong shape, or a version mismatch — a missing file is the
+* normal pre-capture state and is not flagged. Callers use `invalid` to warn
+* (same diagnostics vocabulary) that an existing plate was ignored.
 */
-function loadPlateFile(file) {
+function loadStoredPlate(file) {
 	let raw;
 	try {
 		raw = readFileSync(file, "utf8");
 	} catch {
 		return {
-			plateFile: null,
+			stored: null,
 			invalid: false
 		};
 	}
 	try {
-		const plateFile = parsePlateFile(JSON.parse(raw));
-		if (!plateFile) return {
-			plateFile: null,
+		const stored = parseStoredPlate(JSON.parse(raw));
+		if (!stored) return {
+			stored: null,
 			invalid: true
 		};
 		return {
-			plateFile,
+			stored,
 			invalid: false
 		};
 	} catch {
 		return {
-			plateFile: null,
+			stored: null,
 			invalid: true
 		};
 	}
 }
-/**
-* Read a plate file and merge its views down to the plate the import
-* resolves to. Missing, unreadable, or version-mismatched files resolve to an
-* empty plate, so imports never break.
-*/
-function readPlate(file, name) {
-	const plateFile = readPlateFile(file);
-	if (!plateFile) return emptyPlate(name);
-	return mergeViews({
-		...plateFile,
-		name
-	});
+function readStoredPlate(file) {
+	return loadStoredPlate(file).stored;
 }
 /**
 * Render a plate as the virtual module's source. Each stitch (`ref` node) becomes
@@ -1396,13 +1027,21 @@ function readPlate(file, name) {
 * import itself); an unknown child resolves to its own empty plate, never a
 * build break.
 *
+* `name` defaults to the plate's own `name`, but the loader passes the
+* PATH-derived name so a hand-edited StoredPlate whose `name` field drifted from
+* its filename still serializes and self-references under the canonical name
+* (`collectRefs` reads `stored.tree`, a RenderNode, unchanged by the cutover).
+*
 * @internal
 */
-function renderPlateModule(merged) {
-	const refs = collectRefs(merged.tree).filter((name) => name !== merged.name && isValidPlateName(name));
-	const json = JSON.stringify(serializePlate(merged));
+function renderPlateModule(merged, name = merged.name) {
+	const refs = collectRefs(merged.tree).filter((ref) => ref !== name && isValidPlateName(ref));
+	const json = JSON.stringify(serializePlate({
+		...merged,
+		name
+	}));
 	if (refs.length === 0) return `export default ${json}`;
-	return `${refs.map((name, i) => `import __xr${i} from ${JSON.stringify(VIRTUAL_PREFIX + name)}`).join("\n")}\nexport default Object.assign(${json}, { refs: { ${refs.map((name, i) => `${JSON.stringify(name)}: __xr${i}`).join(", ")} } })`;
+	return `${refs.map((ref, i) => `import __xr${i} from ${JSON.stringify(VIRTUAL_PREFIX + ref)}`).join("\n")}\nexport default Object.assign(${json}, { refs: { ${refs.map((ref, i) => `${JSON.stringify(ref)}: __xr${i}`).join(", ")} } })`;
 }
 //#endregion
-export { addCapture, collectRefs, handleCapturePost, handleFixturePost, isValidPlateName, mergeViews, readCoverage, readFixtures, renderPlateModule, xrayVitePlugin };
+export { collectRefs, handleCapturePost, handleFixturePost, isValidPlateName, readCoverage, readFixtures, renderPlateModule, xrayVitePlugin };