@hueest/xray 0.5.0 → 0.7.0

package/dist/index.js

@@ -4,20 +4,52 @@ 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 an OUTERMOST skeleton root that is a stitch continuation (ADR 0020): a
-* standalone `<Skeleton>` replacing a stitch a still-showing parent skeleton was
-* just rendering. BASE_CSS reveals such a root instantly (no `--xr-skeleton-delay`,
-* no fade) so the bones do not flash away and back. Never present on a nested
-* stitch (which inherits the parent's reveal and has no `@starting-style` of its
-* own) nor on an ordinary top-level skeleton (which keeps the normal delay).
+* Marks an OUTERMOST skeleton root that is a stitch continuation (ADR 0020): a standalone
+* `<Skeleton>` replacing a stitch a still-showing parent skeleton was just rendering. BASE_CSS
+* reveals such a root instantly (no `--xr-skeleton-delay`, no fade) so the bones do not flash away
+* and back. Never present on a nested stitch (which inherits the parent's reveal and has no
+* `@starting-style` of its own) nor on an ordinary top-level skeleton (which keeps the normal
+* delay).
 */
 const ROOT_INSTANT_ATTR = "data-xr-instant";
 /** Fixed renderer-owned classes every rendered node carries. */
 const ROOT_CLASS = "xr-root";
 const NODE_CLASS = "xr-node";
 const LEAF_CLASS = "xr-leaf";
-`
-/* One timeline per skeleton, not per leaf: the root animates one inherited
+/**
+* Renderer-owned base styles, emitted once by the outermost view (ADR 0007), before a plate's node
+* rules so a node's captured class wins by source order. Everything visual is driven by inheritable
+* custom properties, so consumers theme by setting `--xr-*` in `:root` or on any ancestor — and
+* per-plate via `[data-xr-root="name"]` (the root carries its plate name). See ADR 0011 and
+* docs/architecture.md. Class-based and unlayered — `@layer` was rejected (unlayered app CSS would
+* beat layered skeleton rules, and it inverts `!important`).
+*
+* Progressive enhancement (ADR 0011): the plain bone fill + opacity pulse use only
+* universally-supported CSS and are the floor. `light-dark()` is guarded by `@supports` because an
+* unsupported VALUE drops the whole declaration (an invisible bone), and it is not
+* Baseline-widely-available until 2026-11-13 — drop the guard then. Features that merely no-op when
+* absent (`@property`, `prefers-contrast`, relative-color-as-fallback) carry no hard guard.
+*
+* Tokens (ADR 0017 taxonomy). The `--xr-bone-*` family styles an individual Bone: `--xr-bone-color`
+* (fill), `--xr-bone-highlight-color` (sheen), `--xr-bone-border-radius` (+
+* `--xr-bone-text-line-border-radius` / `--xr-bone-text-block-border-radius` /
+* `--xr-bone-media-border-radius`), `--xr-bone-animation-duration`, the pulse range
+* `--xr-bone-pulse-opacity-min`/`--xr-bone-pulse-opacity-max`, `--xr-bone-animation` (mode:
+* `xr-pulse` | `none` | a custom keyframe), and `--xr-bone-fill` (override the leaf paint, e.g. a
+* sheen gradient built from the two bone color tokens). The `--xr-skeleton-*` family governs
+* whole-skeleton display timing (ADR 0016): `--xr-skeleton-delay` (grace before the skeleton
+* becomes visible), `--xr-skeleton-min-duration` (minimum visible time once shown; read by the
+* `useSkeletonTiming` hook, not used in CSS), and `--xr-skeleton-transition-duration` (the
+* reveal/swap fade). The private channels `--xr-o` (pulse) and `--xr-reveal` (reveal) stay
+* undocumented `@property` plumbing, not a theming surface.
+*
+* Declared as a PLAIN template literal — no `.trim()` (or any other call) on the initializer. A
+* method call is not provably pure to a conservative tree-shaker (rolldown/Rollup) and would pin
+* this ~5 KB string into every consumer chunk that imports the React adapter, referenced or not
+* (ADR 0026). The template starts immediately after the backtick, so there is no leading newline to
+* strip.
+*/
+const BASE_CSS = `/* One timeline per skeleton, not per leaf: the root animates one inherited
    opacity property and every leaf reads it. Hundreds of independent infinite
    opacity animations would pin the compositor and cook the CPU. */
 @property --xr-o { syntax: "<number>"; inherits: true; initial-value: 1 }
@@ -48,10 +80,14 @@ const LEAF_CLASS = "xr-leaf";
 /* 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) }
+   [data-xr-root] .${LEAF_CLASS}-text-line { ... }. */
+.${LEAF_CLASS}-text-line { border-radius: var(--xr-bone-text-line-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)) }
+/* A hidden bone holds its measured box in the flow but paints nothing: the
+   space-preserving complement to data-xr-ignore. visibility (not display) so
+   the captured size rules still lay the box out. */
+.${LEAF_CLASS}-hidden { visibility: hidden }
 @keyframes xr-pulse {
   from { --xr-o: var(--xr-bone-pulse-opacity-max, 1) }
   to { --xr-o: var(--xr-bone-pulse-opacity-min, 0.5) }
@@ -103,11 +139,11 @@ const LEAF_CLASS = "xr-leaf";
    the fallback (sheen just looks flatter), so no hard guard is needed. */
 @supports (color: oklch(from red l c h)) {
   .${ROOT_CLASS} { --xr-bone-highlight-color: oklch(from var(--xr-bone-color, #e4e4e7) calc(l + 0.08) c h) }
-}`.trim();
+}`;
 /** The (unserialized) plate an import resolves to before anything has been captured. */
 function emptyPlate(name) {
 	return {
-		v: 2,
+		v: 1,
 		name,
 		tree: null,
 		css: ""
@@ -116,22 +152,21 @@ function emptyPlate(name) {
 //#endregion
 //#region src/chunk.ts
 /**
-* Serialize a merged plate's RenderNode tree into the shipped `Plate` (ADR
-* 0008). This is the framework-neutral half of rendering: a skeleton is static,
-* text-free DOM, so the structure is flattened to HTML strings here, at build,
-* once — instead of every adapter walking a tree on the latency-critical first
-* paint. The adapter only injects the strings and mounts a child plate at each
-* stitch (see the React adapters). No escaping risk: bones carry only the
-* content-addressed class tokens (ADR 0007), never user content.
+* Serialize a merged plate's RenderNode tree into the shipped `Plate` (ADR 0008). This is the
+* framework-neutral half of rendering: a skeleton is static, text-free DOM, so the structure is
+* flattened to HTML strings here, at build, once — instead of every adapter walking a tree on the
+* latency-critical first paint. The adapter only injects the strings and mounts a child plate at
+* each stitch (see the React adapters). No escaping risk: bones carry only the content-addressed
+* class tokens (ADR 0007), never user content.
 */
 function nodeClass(node) {
 	return NODE_CLASS + (node.leaf ? ` ${LEAF_CLASS} ${LEAF_CLASS}-${node.leaf}` : "") + (node.cls ? ` ${node.cls}` : "");
 }
 /**
-* 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.
+* 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 hasDynamic(node) {
 	return node.ref !== void 0 || node.count !== void 0 || (node.kids?.some(hasDynamic) ?? false);
@@ -142,13 +177,12 @@ function toHtml(node) {
 	return `<div class="${nodeClass(node)}">${kids}</div>`;
 }
 /**
-* 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.
+* 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 = [];
@@ -179,41 +213,41 @@ function toChunks(nodes) {
 	return out;
 }
 /**
-* Turn a merged plate (RenderNode tree) into the shipped plate (chunks). The
-* root's own content classes travel as `rootCls` (the adapter puts them on the
-* root element); its children become `chunks`. A capture-less plate has null
-* chunks and renders the fallback.
+* Turn a merged plate (RenderNode tree) into the shipped plate (chunks). The root's own content
+* classes travel as `rootCls` (the adapter puts them on the root element); its children become
+* `chunks`. A capture-less plate has null chunks and renders the fallback.
+*
+* Two-artifact contract (ADR 0026): the returned `Plate` is the TREE artifact only; the input's
+* `css` is deliberately NOT copied onto it. The css string stays the producer's
+* (`GatedPlate`/`StoredPlate`) field, and each lowering site decides independently how its css
+* travels: the plugin's virtual `.css` modules + `export const css`, `captureElement`'s `{ plate,
+* css }` pair, or the `xray:plate` dev event, which ships no css.
 */
 function serializePlate(merged) {
-	const { v, name, tree, css } = merged;
+	const { v, name, tree } = merged;
 	if (!tree) return {
 		v,
 		name,
-		chunks: null,
-		css
+		chunks: null
 	};
 	const chunks = toChunks(tree.kids ?? []);
 	return tree.cls ? {
 		v,
 		name,
 		chunks,
-		rootCls: tree.cls,
-		css
+		rootCls: tree.cls
 	} : {
 		v,
 		name,
-		chunks,
-		css
+		chunks
 	};
 }
 /**
-* 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).
+* 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). The one node-side primitive needed at
+* build time; multi-View gating happens in the in-browser `serializePlateIR` (serialize.ts, ADR
+* 0022).
 */
 function collectRefs(tree) {
 	const names = [];
@@ -231,11 +265,10 @@ function collectRefs(tree) {
 //#endregion
 //#region src/diagnostics.ts
 /**
-* 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.
+* 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 {
@@ -246,10 +279,9 @@ function makeDiagnostic(code, options) {
 	};
 }
 /**
-* 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.
+* 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",
@@ -264,11 +296,10 @@ const DIAGNOSTIC_MESSAGES = {
 	"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.
+* 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})` : "";
@@ -282,28 +313,26 @@ function diagnosticsHeader(name) {
 //#endregion
 //#region src/name.ts
 /**
-* Plate-name validation, shared by the Vite plugin (`index.ts`) and the
-* Node-only POST validator (`validate.ts`).
+* Plate-name validation, shared by the Vite plugin (`index.ts`) and the Node-only POST validator
+* (`validate.ts`).
 *
-* Lives in its own dependency-free module so `validate.ts` can reuse it without
-* importing the plugin entry (which would be a cycle), and so the regex stays
-* the single source of truth for what a plate name may be — the same rule the
-* loader, the file watcher, the coverage reader, the POST endpoint, and the
-* ref-graph emitter all gate on.
+* Lives in its own dependency-free module so `validate.ts` can reuse it without importing the
+* plugin entry (which would be a cycle), and so the regex stays the single source of truth for what
+* a plate name may be — the same rule the loader, the file watcher, the coverage reader, the POST
+* endpoint, and the ref-graph emitter all gate on.
 *
 * @module
 */
 /**
 * Names come from import specifiers and POST bodies — keep them inside the plates dir.
 *
-* Each path segment is `\w+(-\w+)*` — word chars with single interior hyphens,
-* never doubled and never at a segment edge — and segments are joined by `/`.
-* The class-prefix encoder (`classify.ts`) renders `/` as `--` to keep nested
-* names readable, and that prefix is the isolation boundary across stitched
-* plates (ADR 0007), so the encoding must be injective. Banning a literal `--`
-* and any edge hyphen guarantees no `-` ever abuts a `/`, so every `--` in the
-* prefix came from exactly one `/` — making distinct names always map to
-* distinct prefixes (else e.g. `a/-b` and `a-/b` would both encode to `a---b`).
+* Each path segment is `\w+(-\w+)*` — word chars with single interior hyphens, never doubled and
+* never at a segment edge — and segments are joined by `/`. The class-prefix encoder
+* (`classify.ts`) renders `/` as `--` to keep nested names readable, and that prefix is the
+* isolation boundary across stitched plates (ADR 0007), so the encoding must be injective. Banning
+* a literal `--` and any edge hyphen guarantees no `-` ever abuts a `/`, so every `--` in the
+* prefix came from exactly one `/` — making distinct names always map to distinct prefixes (else
+* e.g. `a/-b` and `a-/b` would both encode to `a---b`).
 *
 * @internal
 */
@@ -313,71 +342,66 @@ function isValidPlateName(name) {
 //#endregion
 //#region src/validate.ts
 /**
-* Structural validation of a posted/committed `StoredPlate`, plus the
-* single-CSS-declaration / media-condition validators, for the dev `/__xray`
-* endpoint and disk reads.
+* 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
-* client, the HUD, the React adapters, and the framework-neutral `core` surface
-* all ship to a browser, and none of them needs to validate an inbound payload.
-* Only the Vite plugin (`index.ts`, the package `.` entry, built with
-* `platform: 'node'`) imports this file, which keeps valibot out of every
-* browser-facing dist chunk. Do NOT import this from `plate.ts`, `css.ts`, or
-* anything a render/browser path also imports, and do NOT re-export these
-* helpers from any public subpath — they stay private until a `doctor`-style
-* tool creates a concrete external need (the plan's decisions).
+* NODE-ONLY (ADR 0023, ADR 0008). This module imports `valibot`, which must NEVER reach the browser
+* bundles: the dev capture client, the HUD, the React adapters, and the framework-neutral `core`
+* surface all ship to a browser, and none of them needs to validate an inbound payload. Only the
+* Vite plugin (`index.ts`, the package `.` entry, built with `platform: 'node'`) imports this file,
+* which keeps valibot out of every browser-facing dist chunk. Do NOT import this from `plate.ts`,
+* `css.ts`, or anything a render/browser path also imports, and do NOT re-export these helpers from
+* any public subpath — they stay private until a `doctor`-style tool creates a concrete external
+* need (ADR 0023).
 *
-* 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).
+* The endpoint accepts ONLY the artifact shape xray itself produces. The dev client posts a
+* finished `StoredPlate` — the whole Plate already projected in the browser (`serializePlateIR`,
+* ADR 0022) — so `parseStoredPlate` is the single validator: a post-classify `RenderNode` tree plus
+* an already-classified css blob, guarded for `<style>`-breakout only (a per-decl allowlist cannot
+* apply 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
 */
 /**
-* Bounds chosen to be far above any real capture yet small enough that a hostile
-* payload cannot exhaust memory or wedge the merge. A `<Skeleton>` set too high
-* is already caught by the per-capture node guard and the serialized-size cap;
-* these are the structural ceilings the schema enforces before either runs.
+* Bounds chosen to be far above any real capture yet small enough that a hostile payload cannot
+* exhaust memory or wedge the merge. A `<Skeleton>` set too high is already caught by the
+* per-capture node guard and the serialized-size cap; these are the structural ceilings the schema
+* enforces before either runs.
 */
 const MAX_TREE_NODES = 5e4;
 const MAX_BREAKPOINTS = 256;
 const MAX_TREE_DEPTH = 1e3;
 /**
-* 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`.
+* A template node's repeat count (Template, ADR 0022). Far above any real feed, yet bounded so a
+* hostile `count` cannot drive an unbounded render-time string `.repeat`.
 */
 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
-* a `</style` raw-text terminator. Shared by the declaration and condition
-* validators (case-insensitive).
+* Raw-text / markup terminators that must never appear in generated CSS, even when no bare `<`/`>`
+* is present: HTML comment delimiters, a CDATA opener, and a `</style` raw-text terminator. Shared
+* by the declaration and condition validators (case-insensitive).
 */
 const RAW_TEXT_TERMINATORS = /<!--|-->|<!\[cdata\[|<\/style/iu;
 /** A finite number, no NaN/Infinity (valibot's `number()` already rejects NaN). */
 const finiteNumber = v.pipe(v.number(), v.finite());
 const leafSchema = v.picklist([
-	"text",
+	"text-line",
 	"text-block",
 	"media",
-	"box"
+	"box",
+	"hidden"
 ]);
 /**
-* 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.
+* 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.
 */
 function treeWithinLimits(root) {
 	let count = 0;
@@ -395,27 +419,24 @@ function treeWithinLimits(root) {
 /** A finished plate's css blob, generously bounded (post-classify, whole-plate). */
 const MAX_PLATE_CSS_LENGTH = 4e6;
 /**
-* 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.
+* 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 NUL = /\u0000/u;
 /**
-* 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).
+* Validate a STORED, already-classified css blob (ADR 0022). 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; the disk guard covers 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 (hand-edited / arriving via
+* git).
 */
 function isValidPlateCss(css) {
 	if (typeof css !== "string") return false;
@@ -425,10 +446,10 @@ function isValidPlateCss(css) {
 	return true;
 }
 /**
-* 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`.
+* 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`.
 */
 const renderNodeSchema = v.pipe(v.object({
 	leaf: v.optional(leafSchema),
@@ -438,30 +459,27 @@ const renderNodeSchema = v.pipe(v.object({
 	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/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`.
+* The committed/posted `StoredPlate` shape (plate.ts): the whole plate already projected in the
+* browser. Validated as untrusted input — 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 storedPlateSchema = v.object({
-	v: v.literal(2),
+	v: v.literal(1),
 	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)),
 	tree: v.nullable(renderNodeSchema),
 	css: v.pipe(v.string(), v.check(isValidPlateCss, "invalid plate css"))
 });
 /**
-* 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.
+* Parse a committed/posted `StoredPlate` against its schema (ADR 0022). 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 parseStoredPlate(value) {
 	const result = v.safeParse(storedPlateSchema, value);
@@ -472,9 +490,9 @@ function parseStoredPlate(value) {
 /**
 * Vite plugin entry point for xray.
 *
-* Add `xrayVitePlugin()` to a Vite config to resolve committed Plate imports in
-* dev and build. The dev capture client is injected only during `vite serve`,
-* and only when `capture` or the HUD needs it.
+* Add `xrayVitePlugin()` to a Vite config to resolve committed Plate imports in dev and build. The
+* dev capture client is injected only during `vite serve`, and only when `capture` or the HUD needs
+* it.
 *
 * @module @hueest/xray
 */
@@ -483,8 +501,20 @@ const BOOT_ID = "virtual:xray/client";
 const RESOLVED_BOOT_ID = `\0${BOOT_ID}`;
 const ENDPOINT = "/__xray";
 /**
-* Create the Vite plugins that resolve committed Plates and, during dev,
-* capture new Plates from rendered `<Skeleton>` boundaries.
+* The shared base-css virtual module every plate's `.css` module imports, so Vite dedupes BASE_CSS
+* across plates instead of repeating it per plate. Deliberately NOT `\0`-prefixed: an unprefixed
+* virtual id is tried first (the vanilla-extract pattern) because Vite's CSS plugins match on the
+* module id, and this id must be routed through that pipeline (it ends in `.css`).
+*/
+const BASE_CSS_ID = "virtual:xray/base.css";
+/**
+* A plate's per-name css virtual module id. Also un-`\0`-prefixed for the same reason as
+* `BASE_CSS_ID` — see above.
+*/
+const plateCssId = (name) => `${VIRTUAL_PREFIX}${name}.css`;
+/**
+* Create the Vite plugins that resolve committed Plates and, during dev, capture new Plates from
+* rendered `<Skeleton>` boundaries.
 *
 * Typical setup:
 *
@@ -497,8 +527,10 @@ const ENDPOINT = "/__xray";
 * ```
 *
 * Returns two plugins:
+*
 * - `xray:data` resolves `virtual:xray/plates/<name>` from committed Plate files in dev and build.
-* - `xray:dev` runs only during `vite serve`; it injects the capture client, receives Captures, writes Plate files, and hot-updates the page.
+* - `xray:dev` runs only during `vite serve`; it injects the capture client, receives Captures,
+*   writes Plate files, and hot-updates the page.
 */
 function xrayVitePlugin(options = {}) {
 	const platesDir = options.platesDir ?? "plates";
@@ -518,9 +550,17 @@ function xrayVitePlugin(options = {}) {
 			root = config.root;
 		},
 		resolveId(id) {
+			if (id === BASE_CSS_ID) return id;
+			if (id.startsWith("virtual:xray/plates/") && id.endsWith(".css")) return id;
 			if (id.startsWith("virtual:xray/plates/")) return `\0${id}`;
 		},
 		load(id) {
+			if (id === BASE_CSS_ID) return BASE_CSS;
+			if (id.startsWith("virtual:xray/plates/") && id.endsWith(".css")) {
+				const name = id.slice(20, -4);
+				if (!isValidPlateName(name)) return "";
+				return readStoredPlate(platePath(name))?.css ?? "";
+			}
 			if (!id.startsWith(RESOLVED_PREFIX)) return void 0;
 			const name = id.slice(RESOLVED_PREFIX.length);
 			if (!isValidPlateName(name)) return renderPlateModule(emptyPlate(name));
@@ -564,6 +604,7 @@ function xrayVitePlugin(options = {}) {
 				const name = relative(dir(), file).slice(0, -5);
 				if (!isValidPlateName(name)) return;
 				announcePlate(server.ws, name, readStoredPlate(file));
+				invalidatePlateModules(server, name);
 			};
 			server.watcher.on("add", onPlateFile);
 			server.watcher.on("change", onPlateFile);
@@ -578,6 +619,12 @@ function xrayVitePlugin(options = {}) {
 					res.end(JSON.stringify(readFixtures(dir())));
 					return;
 				}
+				if (req.method === "POST" && !isSameOriginWrite(req)) {
+					res.statusCode = 403;
+					res.end("forbidden");
+					console.warn("[xray] rejected a cross-origin POST to /__xray (origin/host mismatch).");
+					return;
+				}
 				if (req.url === "/fixture") {
 					handleFixturePost(req, res, fixturePath);
 					return;
@@ -588,8 +635,8 @@ 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.
+* 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, collect, hud, capture, recordMode, replayMode) {
 	return [
@@ -649,10 +696,45 @@ function bootstrapCode(delay, settleCap, collect, hud, capture, recordMode, repl
 	].join("\n");
 }
 /**
-* Print a plate's diagnostics to the Vite server output using the SAME grouped
-* header + shared formatter the browser console uses (diagnostics.ts), so the
-* two can never drift. Prefers Vite's logger (it preserves the formatting);
-* falls back to `console.warn`. No-op when there are no diagnostics.
+* Drop both of a plate's virtual modules from Vite's dev transform cache after its file changes,
+* each through the channel appropriate to it:
+*
+* - The `.css` module (UN-prefixed id — see `plateCssId`) is invalidated AND reloaded: standard Vite
+*   CSS HMR (`reloadModule` re-transforms and pushes the update over the ws), so fresh styles land
+*   in the open page with no reload. The css module has no capture boundary, so a live reload of it
+*   carries no remount-loop risk.
+* - The JS (tree) module (`\0`-prefixed id) is invalidated ONLY — deliberately NO `reloadModule`/HMR
+*   push. A live re-import would remount the capture boundary and re-fire the capture (the exact
+*   infinite loop the "no addWatchFile" comment in `load` guards against; live tree updates keep
+*   flowing over the `xray:plate` announce into the dev store instead). Bare `invalidateModule` is
+*   server-side cache marking only — nothing reaches the client until the NEXT full page load,
+*   which then re-transforms from disk and serves a tree consistent with the css.
+*
+* WITHOUT the JS half, a page reload after a capture pairs Vite's CACHED stale tree transform
+* (stale content-addressed class names) with the freshly reloaded css — class names no longer match
+* rules and skeletons render garbled until a dev-server restart clears the transform cache. The two
+* modules need distinct invalidation policies; this helper is the single place that keeps them in
+* lockstep.
+*
+* Scope note (stitched plates): a parent's module embeds ONLY its own stored tree; a child's data
+* arrives at runtime through the child module import (`refs: { "<child>": __xr0 }`), never inlined
+* into the parent's transform. So invalidating the re-captured plate's OWN two modules is
+* sufficient — parent modules hold nothing child-derived that could go stale.
+*
+* No-op per module when it was never resolved/imported yet (a fresh plate no page has loaded, or a
+* server stub without the module-graph subset).
+*/
+async function invalidatePlateModules(server, name) {
+	const jsMod = server.moduleGraph?.getModuleById(RESOLVED_PREFIX + name);
+	if (jsMod) server.moduleGraph?.invalidateModule(jsMod);
+	const cssMod = server.moduleGraph?.getModuleById(plateCssId(name));
+	if (cssMod) await server.reloadModule?.(cssMod);
+}
+/**
+* Print a plate's diagnostics to the Vite server output using the SAME grouped header + shared
+* formatter the browser console uses (diagnostics.ts), so the two can never drift. Prefers Vite's
+* logger (it preserves the formatting); falls back to `console.warn`. No-op when there are no
+* diagnostics.
 */
 function reportServerDiagnostics(server, name, diagnostics) {
 	if (!diagnostics || diagnostics.length === 0) return;
@@ -664,14 +746,12 @@ 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. 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.
+* Hard ceiling on the POST body the endpoint 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.
 */
 const MAX_BODY_BYTES = 4e6;
 /** The only content type the capture client posts; anything else is rejected up front. */
@@ -680,18 +760,33 @@ function isJsonContentType(value) {
 	if (typeof header !== "string") return false;
 	return /^application\/json\b/i.test(header.trim());
 }
+/**
+* Reject cross-origin browser writes. Browsers always attach `Origin` to POSTs; a request from the
+* app's own page carries the dev server's origin, so its host must equal the `Host` the request
+* arrived on. A request with NO Origin header is not from a browser page (curl, a node script) and
+* is allowed — the gate targets drive-by browser writes to Plate and Fixture files, not local
+* tooling.
+*/
+function isSameOriginWrite(req) {
+	const origin = Array.isArray(req.headers?.origin) ? req.headers.origin[0] : req.headers?.origin;
+	if (origin === void 0 || origin === "null") return origin === void 0;
+	const host = Array.isArray(req.headers?.host) ? req.headers.host[0] : req.headers?.host;
+	try {
+		return new URL(origin).host === host;
+	} catch {
+		return false;
+	}
+}
 function isRecord(value) {
 	return typeof value === "object" && value !== null;
 }
 /**
-* 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).
+* Derive the HUD coverage bands from a StoredPlate's `breakpoints` (ADR 0022). Per-View spans do
+* not exist on disk: a StoredPlate sweeps ALL widths in one session, so coverage is complete
+* per-Plate and the bands are 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 `[{}]`. The
+* `xray:plate`/coverage `spans` shape (`{min?, max?}[]`) is unchanged; only the SOURCE is derived.
 */
 function spansFromBreakpoints(breakpoints) {
 	const sorted = [...breakpoints].toSorted((a, b) => a - b);
@@ -704,34 +799,41 @@ function spansFromBreakpoints(breakpoints) {
 	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). */
+/**
+* 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.
+*
+* Two-artifact contract (ADR 0026): the event carries the TREE only — `serializePlate` returns a
+* css-less `Plate`, so there is no ws css side-channel by construction. The css half of a capture
+* travels exclusively over Vite's CSS-HMR (`invalidatePlateModules` re-pushes the `.css` virtual
+* module after the write). The live-store plate that outranks the statically-imported module in
+* `useLivePlate` cannot carry inline css, so no push can revert a mounted `<Skeleton>` to
+* inline-`<style>` rendering.
+*/
 function announcePlate(ws, name, stored) {
 	const breakpoints = stored?.breakpoints ?? [];
-	const plate = stored ? serializePlate({
+	const merged = stored ? {
 		v: stored.v,
 		name,
 		tree: stored.tree,
 		css: stored.css
-	}) : serializePlate(emptyPlate(name));
+	} : emptyPlate(name);
 	ws.send({
 		type: "custom",
 		event: "xray:plate",
 		data: {
 			name,
-			plate,
+			plate: serializePlate(merged),
 			breakpoints,
 			spans: spansFromBreakpoints(breakpoints)
 		}
 	});
 }
 /**
-* 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).
+* Per-plate breakpoints + derived coverage bands, read from the committed StoredPlate files. The
+* `spans` derive from each plate's `breakpoints` (ADR 0022: a StoredPlate sweeps all widths in one
+* session, so its coverage is complete).
 *
 * @internal
 */
@@ -761,22 +863,25 @@ function readCoverage(dir) {
 	}
 	return out;
 }
-/** The on-disk Fixture sidecar shape (ADR 0015): version, plate name, and the
-* OPAQUE devalue string. The node side never parses `data` — it is the browser
-* dev client's job (it has the live runtime). */
+/**
+* The on-disk Fixture sidecar shape (ADR 0015): version, plate name, and the OPAQUE devalue string.
+* The node side never parses `data` — it is the browser dev client's job (it has the live
+* runtime).
+*/
 const FIXTURE_VERSION = 1;
 const FIXTURE_SUFFIX = ".fixture.json";
-/** A recorded Fixture sidecar — `data` is the verbatim devalue string, treated
-* as opaque text server-side. */
+/**
+* A recorded Fixture sidecar — `data` is the verbatim devalue string, treated as opaque text
+* server-side.
+*/
 function isFixtureFile(value) {
 	return isRecord(value) && typeof value.v === "number" && typeof value.name === "string" && typeof value.data === "string";
 }
 /**
-* All recorded Fixtures as `{ <name>: <devalueString> }`, read from the
-* `<name>.fixture.json` sidecars (ADR 0015). The map values are the OPAQUE
-* devalue strings exactly as written — the node side never parses them; the
-* browser dev client owns the devalue decode. The `.fixture.json` suffix keeps
-* these distinct from Plate files (`isValidPlateName` rejects the dotted name, so
+* All recorded Fixtures as `{ <name>: <devalueString> }`, read from the `<name>.fixture.json`
+* sidecars (ADR 0015). The map values are the OPAQUE devalue strings exactly as written — the node
+* side never parses them; the browser dev client owns the devalue decode. The `.fixture.json`
+* suffix keeps these distinct from Plate files (`isValidPlateName` rejects the dotted name, so
 * `readCoverage` never picks them up — Fixtures never leak into Plate coverage).
 *
 * @internal
@@ -811,12 +916,11 @@ function readFixtures(dir) {
 	return out;
 }
 /**
-* Write a recorded Fixture sidecar (ADR 0015). Reuses the capture endpoint's
-* front-door checks (method, content type, declared/streamed size cap) and the
-* `isValidPlateName` gate, but treats the devalue `data` payload as OPAQUE TEXT:
-* it is validated only as a string and written verbatim, never eval'd or parsed
-* server-side. The sidecar lives NEXT TO the Plate but is never merged into it,
-* so the persisted Plate stays purely structural.
+* Write a recorded Fixture sidecar (ADR 0015). Reuses the capture endpoint's front-door checks
+* (method, content type, declared/streamed size cap) and the `isValidPlateName` gate, but treats
+* the devalue `data` payload as OPAQUE TEXT: it is validated only as a string and written verbatim,
+* never eval'd or parsed server-side. The sidecar lives NEXT TO the Plate but is never merged into
+* it, so the persisted Plate stays purely structural.
 *
 * @internal
 */
@@ -879,12 +983,11 @@ function handleFixturePost(req, res, fixturePath) {
 	});
 }
 /**
-* 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).
+* Validate a posted `StoredPlate` envelope, write it AS-IS, and hot-swap the plate in place. The
+* dev client posts a finished StoredPlate (the whole Plate already projected in the browser, ADR
+* 0022) inside a `{ plate, diagnostics? }` envelope; there is NO server-side accumulation/merge.
+* `diagnostics` is a SIBLING field the server logs and then drops; it never reaches the stored
+* artifact (ADR 0008).
 *
 * @internal
 */
@@ -951,6 +1054,7 @@ function handleCapturePost(req, res, server, platePath) {
 			mkdirSync(dirname(file), { recursive: true });
 			writeFileSync(file, serialized);
 			announcePlate(server.ws, stored.name, stored);
+			invalidatePlateModules(server, stored.name);
 			res.statusCode = 204;
 			res.end();
 		} catch {
@@ -960,12 +1064,11 @@ function handleCapturePost(req, res, server, platePath) {
 	});
 }
 /**
-* 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.
+* 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;
@@ -982,11 +1085,10 @@ function validEnvelopeDiagnostics(value) {
 	return out.length > 0 ? out : void 0;
 }
 /**
-* 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.
+* 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 loadStoredPlate(file) {
 	let raw;
@@ -1019,18 +1121,41 @@ function readStoredPlate(file) {
 	return loadStoredPlate(file).stored;
 }
 /**
-* Render a plate as the virtual module's source. Each stitch (`ref` node) becomes
-* a real import of that child's virtual module, wired into a `refs` map on the
-* default export — so the bundler builds the actual reference graph and chunks
-* the transitive closure a page uses, with no runtime registry (ADR 0006). A
-* stitchless plate is just its JSON. Self-references are dropped (a module can't
-* import itself); an unknown child resolves to its own empty plate, never a
-* build break.
+* Render a plate as the virtual module's source. Each stitch (`ref` node) becomes a real import of
+* that child's virtual module, wired into a `refs` map on the default export — so the bundler
+* builds the actual reference graph and chunks the transitive closure a page uses, with no runtime
+* registry (ADR 0006). A stitchless plate is just its JSON. Self-references are dropped (a module
+* can't 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).
+*
+* Two-artifact module shape (ADR 0026):
+*
+* ```js
+* import "virtual:xray/base.css"
+* import "virtual:xray/plates/<name>.css"
+* export default { tree-only plate JSON }
+* export const css = "<the plate's scoped css string>"
+* ```
+*
+* The default export is the TREE artifact (`Plate` carries no css field); the page's styling flows
+* through Vite's own CSS pipeline via the two side-effect imports (dev inject + HMR, build
+* extraction into the chunk's `.css` asset). `export const css` is the plate's css as data, for dev
+* tooling / programmatic consumers that want the string itself — production adapters import only
+* the default, so Rollup TREE-SHAKES the unused named export out of built chunks (verified
+* empirically; the side-effect css imports do not pin it).
 *
-* `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).
+* BASE_CSS rides as a JS-level import of the SHARED `virtual:xray/base.css` module (not an
+* `@import` inside each plate's css): Vite dedupes JS module imports by id, so the base rules reach
+* the page exactly once no matter how many plates (nested/stitched included — every plate module
+* emits this import, module identity collapses them) a page mounts, and at build a multi-chunk app
+* gets it hoisted/shared rather than copied per chunk. An `@import` inside each plate's `.css`
+* would instead be INLINED per importer by Vite's postcss-import at build, duplicating BASE_CSS
+* into every plate's asset — the opposite of the dedupe this design locks in. Base rides before the
+* plate's css module so a plate rule still beats a base rule at equal specificity by source order
+* (the `${BASE_CSS}\n${css}` composition order).
 *
 * @internal
 */
@@ -1040,8 +1165,12 @@ function renderPlateModule(merged, name = merged.name) {
 		...merged,
 		name
 	}));
-	if (refs.length === 0) return `export default ${json}`;
-	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(", ")} } })`;
+	const cssImports = `import ${JSON.stringify(BASE_CSS_ID)}\nimport ${JSON.stringify(plateCssId(name))}`;
+	const cssExport = `export const css = ${JSON.stringify(merged.css)}`;
+	if (refs.length === 0) return `${cssImports}\nexport default ${json}\n${cssExport}`;
+	const imports = refs.map((ref, i) => `import __xr${i} from ${JSON.stringify(VIRTUAL_PREFIX + ref)}`).join("\n");
+	const map = refs.map((ref, i) => `${JSON.stringify(ref)}: __xr${i}`).join(", ");
+	return `${[cssImports, imports].join("\n")}\nexport default Object.assign(${json}, { refs: { ${map} } })\n${cssExport}`;
 }
 //#endregion
 export { collectRefs, handleCapturePost, handleFixturePost, isValidPlateName, readCoverage, readFixtures, renderPlateModule, xrayVitePlugin };