@hueest/xray 0.5.0 → 0.6.0

package/README.md

@@ -0,0 +1,57 @@
+# @hueest/xray
+
+Auto-captured skeleton loading screens for [Vite](https://vite.dev). Capture the structure, ship the plate.
+
+xray captures the **real rendered DOM** of your components as you browse your own dev server, then renders pixel-faithful skeleton loading states from those captures — no hand-drawn placeholders, no separate headless browser, no fixed-height/absolute hacks.
+
+> Beta — APIs may still move before 1.0. Docs, guides, and the API reference live at
+> **[xray-js.dev](https://xray-js.dev)**; source and issues at
+> [github.com/hueest/xray](https://github.com/hueest/xray).
+
+## Install
+
+```sh
+pnpm add @hueest/xray
+```
+
+## Use
+
+```ts
+// vite.config.ts
+import { xrayVitePlugin } from '@hueest/xray'
+
+export default defineConfig({
+  plugins: [xrayVitePlugin({ hud: true })],
+})
+```
+
+```tsx
+import { Skeleton } from '@hueest/xray/react'
+import plate from 'virtual:xray/plates/my-banner'
+
+// skeleton while loading; content + (dev) capture when ready
+;<Skeleton plate={plate} loading={loading} fallback={<Spinner />}>
+  <RealBanner data={data} />
+</Skeleton>
+```
+
+To eyeball skeletons without waiting on loading states, tick **Light Box**
+in the HUD (or open the page with `?xray-lightbox`) — every
+mounted `<Skeleton>` flips to its skeleton until you untick it.
+
+Capture starts off: tick **Capture** in the HUD (or pass `capture: true` to
+`xrayVitePlugin`) to start writing Plates as you browse. With Capture on, browse
+your dev server and captures land in `plates/` (commit them). Resize to
+capture other views — JS-driven layout differences merge into the one plate
+as `display:none` projections. Add `"@hueest/xray/virtual"` to your tsconfig `types`
+for the `virtual:xray/plates/*` imports.
+
+## Learn more
+
+- **[xray-js.dev](https://xray-js.dev)** — the docs site: how it works, the
+  radiographic mental model (Plate / Capture / Stitch / View / Projection / Light
+  Box), and guides for responsive Views, the HUD & Light Box, and capture-all-views.
+- **[xray-js.dev/reference/api/xray](https://xray-js.dev/reference/api/xray)** —
+  full API reference, generated from source.
+- **[GitHub](https://github.com/hueest/xray)** — source, issues, and the
+  architecture/decision-record trail.

package/dist/client.d.ts

@@ -1,4 +1,4 @@
-import { h as StoredPlate, o as CollectLimits, v as CaptureDiagnostic } from "./serialize-BgdGt34A.js";
+import { b as CaptureDiagnostic, g as StoredPlate, o as CollectLimits } from "./serialize-BqbQVxYl.js";
 
 //#region src/client.d.ts
 /**

package/dist/client.js

@@ -1,4 +1,4 @@
-import { a as serializePlate, d as formatDiagnostic, f as makeDiagnostic, l as runPlatePasses, n as deriveBreakpoints, o as CaptureTooLargeError, p as emit, r as regimeFor, s as captureView, t as serializePlateIR, u as diagnosticsHeader } from "./project-BZosujs9.js";
+import { a as serializePlate, d as formatDiagnostic, f as makeDiagnostic, l as runPlatePasses, n as deriveBreakpoints, o as CaptureTooLargeError, p as emit, r as regimeFor, s as captureView, t as serializePlateIR, u as diagnosticsHeader } from "./project-BAXKpnfF.js";
 //#region ../../node_modules/.pnpm/devalue@5.8.1/node_modules/devalue/src/base64.js
 /**	@type {(array_buffer: ArrayBuffer) => string} */
 function encode_native(array_buffer) {
@@ -752,7 +752,8 @@ function installXrayClient(options) {
 	};
 	const previewRecording = (buf) => {
 		const stored = projectRecording(buf);
-		return stored ? updatePlate(buf.name, serializePlate(stored)) : false;
+		if (!stored) return false;
+		return updatePlate(buf.name, serializePlate(stored));
 	};
 	const finalizeRecording = async () => {
 		const entries = [...recording];

package/dist/core.d.ts

@@ -1,4 +1,4 @@
-import { _ as emptyPlate, a as CollectAxis, c as XrayCaptureWalker, d as MergedPlate, f as Plate, g as ViewCapture, i as CaptureWalkerContext, l as defineXrayCaptureWalker, m as RenderNode, n as CaptureSize, o as CollectLimits, p as PlateNode, r as CaptureTooLargeError, s as WalkerDecision, t as CaptureOptions, u as LeafKind } from "./serialize-BgdGt34A.js";
+import { _ as ViewCapture, a as CollectAxis, c as XrayCaptureWalker, d as LeafKind, f as MergedPlate, h as RenderNode, i as CaptureWalkerContext, l as defineXrayCaptureWalker, m as PlateNode, n as CaptureSize, o as CollectLimits, p as Plate, r as CaptureTooLargeError, s as WalkerDecision, t as CaptureOptions, u as BASE_CSS, v as composeCss, y as emptyPlate } from "./serialize-BqbQVxYl.js";
 
 //#region src/chunk.d.ts
 /**
@@ -6,6 +6,13 @@ import { _ as emptyPlate, a as CollectAxis, c as XrayCaptureWalker, d as MergedP
  * 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 (plan 005 round 2): 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 (`MergedPlate`/`StoredPlate`) field; 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).
  */
 declare function serializePlate(merged: MergedPlate): Plate;
 /**
@@ -21,28 +28,39 @@ declare function collectRefs(tree: RenderNode | null): string[];
 //#endregion
 //#region src/core.d.ts
 /**
- * Capture a live DOM subtree straight to a renderable Plate. Runs the same
- * uniform pipeline the dev client does for a single View — measure (`captureView`),
+ * Capture a live DOM subtree straight to the two renderable artifacts: the
+ * structural `plate` (tree, lowered to chunks) and its scoped `css` string —
+ * independent parts, per the two-artifact contract. Runs the same uniform
+ * pipeline the dev client does for a single View — measure (`captureView`),
  * reduce (`runPlatePasses`), project (`serializePlateIR` → the structured
- * `StoredPlate`), then lower to chunks (`serializePlate`) — in one call. `roots`
- * are the top-level elements to capture (a component's rendered roots). Pass the
- * result to a `<Skeleton plate>`.
+ * `StoredPlate`), then lower to chunks (`serializePlate`) — in one call.
+ * `roots` are the top-level elements to capture (a component's rendered
+ * roots). Render however suits: `renderPlateHtml(plate, composeCss(css))`,
+ * or `<Skeleton plate={plate} css={composeCss(css)}>` with the React adapter.
  *
  * `options.walker` is the public programmable capture walker (ADR 0018, Q2 —
  * yes, public): the same `XrayCaptureWalker` the `<Skeleton captureWalker>` prop
  * threads through in dev, available here for driving capture directly. It is
- * capture-only and never persisted into the returned Plate.
+ * capture-only and never persisted into the returned artifacts.
  */
-declare function captureElement(roots: readonly Element[], options: CaptureOptions): Plate;
+declare function captureElement(roots: readonly Element[], options: CaptureOptions): {
+  plate: Plate;
+  css: string;
+};
 /**
- * Render a stitch-free Plate to a self-contained HTML string — the
- * framework-neutral equivalent of `<Skeleton plate loading />`, for when you
- * don't want to pull a framework adapter (demos, plain DOM, server strings).
- * Drop it in with `el.innerHTML = renderPlateHtml(plate)` or React's
- * `dangerouslySetInnerHTML`. The string is self-contained: it carries BASE_CSS
- * + the plate's scoped rules in its own `<style>`. Stitched plates (a nested
- * `<Skeleton>`) need an adapter to mount their child plates, so they throw here.
+ * Render a stitch-free Plate to an HTML string — the framework-neutral
+ * equivalent of `<Skeleton plate loading />`, for when you don't want to pull
+ * a framework adapter (demos, plain DOM, server strings). Drop it in with
+ * `el.innerHTML = renderPlateHtml(plate, composeCss(css))` or React's
+ * `dangerouslySetInnerHTML`.
+ *
+ * `css` is the caller's explicit input (two-artifact contract): pass
+ * `composeCss(css)` for the standard BASE_CSS + plate-rules composition
+ * (BASE_CSS is what makes bones paint and pulse), the raw capture css if the
+ * base rules are already on the page, or your own composition. Stitched
+ * plates (a nested `<Skeleton>`) need an adapter to mount their child plates,
+ * so they throw here.
  */
-declare function renderPlateHtml(plate: Plate): string;
+declare function renderPlateHtml(plate: Plate, css: string): string;
 //#endregion
-export { type CaptureOptions, type CaptureSize, CaptureTooLargeError, type CaptureWalkerContext, type CollectAxis, type CollectLimits, type LeafKind, type MergedPlate, type Plate, type PlateNode, type ViewCapture, type WalkerDecision, type XrayCaptureWalker, captureElement, collectRefs, defineXrayCaptureWalker, emptyPlate, renderPlateHtml, serializePlate };
+export { BASE_CSS, type CaptureOptions, type CaptureSize, CaptureTooLargeError, type CaptureWalkerContext, type CollectAxis, type CollectLimits, type LeafKind, type MergedPlate, type Plate, type PlateNode, type ViewCapture, type WalkerDecision, type XrayCaptureWalker, captureElement, collectRefs, composeCss, defineXrayCaptureWalker, emptyPlate, renderPlateHtml, serializePlate };

package/dist/core.js

@@ -1,44 +1,56 @@
-import { a as ROOT_ATTR, d as emptyPlate, o as ROOT_CLASS, t as BASE_CSS } from "./plate-BRR6d8Se.js";
-import { a as serializePlate, c as defineXrayCaptureWalker, i as collectRefs, l as runPlatePasses, o as CaptureTooLargeError, s as captureView, t as serializePlateIR } from "./project-BZosujs9.js";
+import { a as ROOT_ATTR, d as composeCss, f as emptyPlate, o as ROOT_CLASS, t as BASE_CSS } from "./plate-BwJUgHDc.js";
+import { a as serializePlate, c as defineXrayCaptureWalker, i as collectRefs, l as runPlatePasses, o as CaptureTooLargeError, s as captureView, t as serializePlateIR } from "./project-BAXKpnfF.js";
 import { t as escapeStyleText } from "./css-escape-N7bOusGW.js";
 //#region src/core.ts
 /**
-* Capture a live DOM subtree straight to a renderable Plate. Runs the same
-* uniform pipeline the dev client does for a single View — measure (`captureView`),
+* Capture a live DOM subtree straight to the two renderable artifacts: the
+* structural `plate` (tree, lowered to chunks) and its scoped `css` string —
+* independent parts, per the two-artifact contract. Runs the same uniform
+* pipeline the dev client does for a single View — measure (`captureView`),
 * reduce (`runPlatePasses`), project (`serializePlateIR` → the structured
-* `StoredPlate`), then lower to chunks (`serializePlate`) — in one call. `roots`
-* are the top-level elements to capture (a component's rendered roots). Pass the
-* result to a `<Skeleton plate>`.
+* `StoredPlate`), then lower to chunks (`serializePlate`) — in one call.
+* `roots` are the top-level elements to capture (a component's rendered
+* roots). Render however suits: `renderPlateHtml(plate, composeCss(css))`,
+* or `<Skeleton plate={plate} css={composeCss(css)}>` with the React adapter.
 *
 * `options.walker` is the public programmable capture walker (ADR 0018, Q2 —
 * yes, public): the same `XrayCaptureWalker` the `<Skeleton captureWalker>` prop
 * threads through in dev, available here for driving capture directly. It is
-* capture-only and never persisted into the returned Plate.
+* capture-only and never persisted into the returned artifacts.
 */
 function captureElement(roots, options) {
-	const plate = captureView(roots, {
+	const plateIR = captureView(roots, {
 		collect: options.collect,
 		walker: options.walker,
 		captureRootIsBoundary: options.captureRootIsBoundary
 	});
-	plate.name = options.name;
-	runPlatePasses(plate);
-	return serializePlate(serializePlateIR(plate));
+	plateIR.name = options.name;
+	runPlatePasses(plateIR);
+	const stored = serializePlateIR(plateIR);
+	return {
+		plate: serializePlate(stored),
+		css: stored.css
+	};
 }
 /**
-* Render a stitch-free Plate to a self-contained HTML string — the
-* framework-neutral equivalent of `<Skeleton plate loading />`, for when you
-* don't want to pull a framework adapter (demos, plain DOM, server strings).
-* Drop it in with `el.innerHTML = renderPlateHtml(plate)` or React's
-* `dangerouslySetInnerHTML`. The string is self-contained: it carries BASE_CSS
-* + the plate's scoped rules in its own `<style>`. Stitched plates (a nested
-* `<Skeleton>`) need an adapter to mount their child plates, so they throw here.
+* Render a stitch-free Plate to an HTML string — the framework-neutral
+* equivalent of `<Skeleton plate loading />`, for when you don't want to pull
+* a framework adapter (demos, plain DOM, server strings). Drop it in with
+* `el.innerHTML = renderPlateHtml(plate, composeCss(css))` or React's
+* `dangerouslySetInnerHTML`.
+*
+* `css` is the caller's explicit input (two-artifact contract): pass
+* `composeCss(css)` for the standard BASE_CSS + plate-rules composition
+* (BASE_CSS is what makes bones paint and pulse), the raw capture css if the
+* base rules are already on the page, or your own composition. Stitched
+* plates (a nested `<Skeleton>`) need an adapter to mount their child plates,
+* so they throw here.
 */
-function renderPlateHtml(plate) {
+function renderPlateHtml(plate, css) {
 	const chunks = plate.chunks;
 	if (!chunks) return "";
 	const className = plate.rootCls ? `${ROOT_CLASS} ${plate.rootCls}` : ROOT_CLASS;
-	return `<div ${ROOT_ATTR}="${plate.name}" class="${className}" aria-hidden="true" aria-busy="true"><style>${BASE_CSS}\n${escapeStyleText(plate.css)}</style>${chunksToHtml(chunks)}</div>`;
+	return `<div ${ROOT_ATTR}="${plate.name}" class="${className}" aria-hidden="true" aria-busy="true"><style>${escapeStyleText(css)}</style>${chunksToHtml(chunks)}</div>`;
 }
 /**
 * Flatten chunks to one HTML string. A `string` concatenates; a template chunk
@@ -57,4 +69,4 @@ function chunksToHtml(chunks) {
 	return html;
 }
 //#endregion
-export { CaptureTooLargeError, captureElement, collectRefs, defineXrayCaptureWalker, emptyPlate, renderPlateHtml, serializePlate };
+export { BASE_CSS, CaptureTooLargeError, captureElement, collectRefs, composeCss, defineXrayCaptureWalker, emptyPlate, renderPlateHtml, serializePlate };

package/dist/index.d.ts

@@ -51,12 +51,21 @@ type DiagnosticCode = 'unreadable-stylesheet' | 'unreadable-import' | 'skipped-d
 //#region src/plate.d.ts
 type LeafKind = 'text' | 'text-block' | 'media' | 'box';
 /**
- * The shipped structural capture of a component's rendered DOM — the data a
- * Skeleton renders from (see CONTEXT.md). Self-contained: pre-serialized chunks
- * plus one scoped CSS string; depends on nothing in the consumer's build (ADR
- * 0003). Built from the RenderNode tree at plugin load (see chunk.ts), so the
- * adapter injects strings instead of walking a tree on the latency-critical
- * first paint — and no per-framework serializer ships to the client (ADR 0008).
+ * The shipped structural capture of a component's rendered DOM — the TREE
+ * artifact a Skeleton renders from (see CONTEXT.md). Since the two-artifact
+ * cutover (plan 005 round 2), a Plate carries structure ONLY: its scoped CSS
+ * is an INDEPENDENT sibling artifact — the plugin serves it through Vite's
+ * own CSS pipeline (`virtual:xray/plates/<name>.css`, plus the shared
+ * `virtual:xray/base.css`, and an `export const css` on the virtual JS module
+ * for dev/programmatic reads), and the framework-neutral `core.ts` path hands
+ * it back separately (`captureElement` → `{ plate, css }`;
+ * `renderPlateHtml(plate, css)` receives it explicitly). Consumers decide how
+ * to render either part. Still self-contained in ADR 0003's sense: both
+ * artifacts originate from the capture and depend on nothing in the
+ * consumer's build. Built from the RenderNode tree at plugin load (see
+ * chunk.ts), so the adapter injects strings instead of walking a tree on the
+ * latency-critical first paint — and no per-framework serializer ships to the
+ * client (ADR 0008).
  */
 interface Plate {
   v: number;
@@ -70,8 +79,6 @@ interface Plate {
   chunks: Chunk[] | null;
   /** The root node's own content classes (its inherited font context), if any. */
   rootCls?: string;
-  /** Layout-relevant CSS (incl. `@media`) scoped under the plate root, paint stripped. */
-  css: string;
   /**
    * Child plates named by the chunks' `{ r }` stitches, resolved through the
    * import graph (ADR 0006). Populated by the loader's generated imports, never
@@ -515,6 +522,20 @@ interface CaptureServer {
   config?: {
     logger?: ServerLogger;
   };
+  /**
+   * The subset of Vite's dev server needed to keep BOTH of a plate's virtual
+   * modules fresh after a plate file changes (capture POST, hand edit, git
+   * checkout). Optional — absent in the unit tests that stub a minimal
+   * `server`. `getModuleById`/`invalidateModule`/`reloadModule` mirror
+   * `ViteDevServer`'s real shape (a subset, so this module stays free of a
+   * hard `vite` import at the type level beyond the `Plugin` type already
+   * used elsewhere).
+   */
+  moduleGraph?: {
+    getModuleById(id: string): unknown;
+    invalidateModule(mod: unknown): void;
+  };
+  reloadModule?(mod: unknown): Promise<void>;
 }
 /**
  * Per-plate breakpoints + derived coverage bands, read from the committed
@@ -575,6 +596,36 @@ declare function handleCapturePost(req: CaptureRequest, res: CaptureResponse, se
  * its filename still serializes and self-references under the canonical name
  * (`collectRefs` reads `stored.tree`, a RenderNode, unchanged by the cutover).
  *
+ * Two-artifact module shape (plan 005 round 2):
+ *
+ * ```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
+ * anymore); 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 in the plan's
+ * scratch app; the side-effect css imports do not pin it).
+ *
+ * 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 old inline `${BASE_CSS}\n${css}` order).
+ *
  * @internal
  */
 declare function renderPlateModule(merged: MergedPlate, name?: string): string;

package/dist/index.js

@@ -16,8 +16,49 @@ const ROOT_INSTANT_ATTR = "data-xr-instant";
 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-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 it single-handedly pinned this ~5 KB
+* string into every consumer chunk importing the React adapter even after the
+* adapter stopped referencing it (plan 005 round 2 finding). The template
+* therefore starts immediately after the backtick (the old leading newline
+* `.trim()` used to strip simply isn't there), keeping the string value
+* byte-identical to the trimmed original.
+*/
+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 }
@@ -103,7 +144,7 @@ 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 {
@@ -183,27 +224,31 @@ function toChunks(nodes) {
 * 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 (plan 005 round 2): 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 (`MergedPlate`/`StoredPlate`) field; 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
 	};
 }
 /**
@@ -483,6 +528,17 @@ const BOOT_ID = "virtual:xray/client";
 const RESOLVED_BOOT_ID = `\0${BOOT_ID}`;
 const ENDPOINT = "/__xray";
 /**
+* 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.
 *
@@ -518,9 +574,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 +628,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 +643,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;
@@ -649,6 +720,47 @@ function bootstrapCode(delay, settleCap, collect, hud, capture, recordMode, repl
 	].join("\n");
 }
 /**
+* 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 (the round-3 QA bug, found dogfooding the masterworks
+* frontend): after a capture, a page reload paired Vite's CACHED old tree
+* transform (stale content-addressed class names) with the freshly reloaded
+* css — class names no longer matched rules and skeletons rendered garbled
+* until a dev-server restart cleared the transform cache. The tree/css split
+* de-synchronized the two modules' 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);
@@ -680,6 +792,24 @@ 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;
 }
@@ -707,21 +837,31 @@ function spansFromBreakpoints(breakpoints) {
 /** 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). */
+* `spans` derive from the stored breakpoints (the per-View list is gone).
+*
+* Two-artifact contract (plan 005 round 2): the event carries the TREE only —
+* `serializePlate` now returns a css-less `Plate`, so the old ws css
+* side-channel is gone 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). This is also what killed the
+* round-1 duplication bug class for good: the live-store plate that outranks
+* the statically-imported module in `useLivePlate` CANNOT carry inline css
+* anymore, 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)
 		}
@@ -951,6 +1091,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 {
@@ -1032,6 +1173,36 @@ function readStoredPlate(file) {
 * its filename still serializes and self-references under the canonical name
 * (`collectRefs` reads `stored.tree`, a RenderNode, unchanged by the cutover).
 *
+* Two-artifact module shape (plan 005 round 2):
+*
+* ```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
+* anymore); 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 in the plan's
+* scratch app; the side-effect css imports do not pin it).
+*
+* 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 old inline `${BASE_CSS}\n${css}` order).
+*
 * @internal
 */
 function renderPlateModule(merged, name = merged.name) {
@@ -1040,8 +1211,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 };

package/dist/{plate-BRR6d8Se.js → plate-BwJUgHDc.js}

@@ -54,9 +54,17 @@ const LEAF_CLASS = "xr-leaf";
 * `--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 it single-handedly pinned this ~5 KB
+* string into every consumer chunk importing the React adapter even after the
+* adapter stopped referencing it (plan 005 round 2 finding). The template
+* therefore starts immediately after the backtick (the old leading newline
+* `.trim()` used to strip simply isn't there), keeping the string value
+* byte-identical to the trimmed original.
 */
-const BASE_CSS = `
-/* One timeline per skeleton, not per leaf: the root animates one inherited
+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 }
@@ -142,7 +150,22 @@ const BASE_CSS = `
    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();
+}`;
+/**
+* Compose a plate's scoped css with the renderer-owned BASE_CSS, base first so
+* a plate rule beats a base rule at equal specificity by source order — the
+* standard composition for rendering a skeleton outside the Vite plugin
+* (where `virtual:xray/base.css` + `virtual:xray/plates/<name>.css` do this
+* through the CSS pipeline instead). Since the two-artifact cutover (plan 005
+* round 2) css is the CALLER's input: `renderPlateHtml(plate,
+* composeCss(css))`, or `<Skeleton plate={plate} css={composeCss(css)}>` for
+* a runtime-captured plate. Rendering a NESTED stitch under an
+* already-composed parent needs the raw css only (base is already on the
+* page) — pass the string uncomposed there.
+*/
+function composeCss(css) {
+	return `${BASE_CSS}\n${css}`;
+}
 /** The (unserialized) plate an import resolves to before anything has been captured. */
 function emptyPlate(name) {
 	return {
@@ -153,4 +176,4 @@ function emptyPlate(name) {
 	};
 }
 //#endregion
-export { ROOT_ATTR as a, SPEC_GATE as c, emptyPlate as d, NODE_CLASS as i, SPEC_INLINE as l, BOUNDARY_ATTR as n, ROOT_CLASS as o, LEAF_CLASS as r, ROOT_INSTANT_ATTR as s, BASE_CSS as t, SPEC_LEAF as u };
+export { ROOT_ATTR as a, SPEC_GATE as c, composeCss as d, emptyPlate as f, NODE_CLASS as i, SPEC_INLINE as l, BOUNDARY_ATTR as n, ROOT_CLASS as o, LEAF_CLASS as r, ROOT_INSTANT_ATTR as s, BASE_CSS as t, SPEC_LEAF as u };

package/dist/{project-BZosujs9.js → project-BAXKpnfF.js}

@@ -1,4 +1,4 @@
-import { a as ROOT_ATTR, c as SPEC_GATE, i as NODE_CLASS, l as SPEC_INLINE, n as BOUNDARY_ATTR, r as LEAF_CLASS, u as SPEC_LEAF } from "./plate-BRR6d8Se.js";
+import { a as ROOT_ATTR, c as SPEC_GATE, i as NODE_CLASS, l as SPEC_INLINE, n as BOUNDARY_ATTR, r as LEAF_CLASS, u as SPEC_LEAF } from "./plate-BwJUgHDc.js";
 //#region src/ir.ts
 /** A frozen `LiteStyleDeclaration` of empty strings, for entry-less nodes (root/stitch/synthetic). */
 const EMPTY_STYLE = Object.freeze({
@@ -9793,27 +9793,31 @@ function toChunks(nodes) {
 * 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 (plan 005 round 2): 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 (`MergedPlate`/`StoredPlate`) field; 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
 	};
 }
 /**

package/dist/{react.core-BC02ukac.js → react.core-DeEli0Lp.js}

@@ -1,4 +1,4 @@
-import { a as ROOT_ATTR, o as ROOT_CLASS, s as ROOT_INSTANT_ATTR, t as BASE_CSS } from "./plate-BRR6d8Se.js";
+import { a as ROOT_ATTR, o as ROOT_CLASS, s as ROOT_INSTANT_ATTR } from "./plate-BwJUgHDc.js";
 import { t as escapeStyleText } from "./css-escape-N7bOusGW.js";
 import { Fragment, useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -211,16 +211,26 @@ const DISPLAY_CONTENTS = { display: "contents" };
 /**
 * Render a shipped plate's skeleton. `resolveStitch` turns a child plate name
 * into the node that mounts it (static `refs` in prod, a store-subscribed
-* component in dev). `nested` is true for a stitch-mounted child, which skips
-* BASE_CSS — the outermost view already emitted it (ADR 0007). Returns null
+* component in dev). `nested` is true for a stitch-mounted child. Returns null
 * when the plate has no capture yet; the caller renders the fallback.
 *
+* Two-artifact contract (plan 005 round 2): a `Plate` is tree-only, and this
+* renderer neither reads css off it nor references `BASE_CSS` (keeping the
+* constant out of consumer bundles — Vite-path styling is entirely the CSS
+* pipeline's job: `virtual:xray/base.css` + `virtual:xray/plates/<name>.css`).
+* `css` is the one optional styling input: the consumer-composed inline css
+* for a runtime-captured (`@hueest/xray/core`) plate, threaded from the
+* `<Skeleton css>` prop and injected as a `<style>` on this root. It rides the
+* OUTERMOST root only — the adapters never pass it for a nested stitch (the
+* page-level/base styles are already in scope there, ADR 0007's once-per-page
+* rule by construction).
+*
 * `instant` (ADR 0020) marks this root a stitch continuation: a standalone
 * `<Skeleton>` replacing a stitch a still-showing parent was just rendering. It
 * lands as `data-xr-instant` on the OUTERMOST root only (`instant && !nested`) so
 * BASE_CSS reveals it without the `--xr-skeleton-delay` fade.
 */
-function renderPlate(plate, resolveStitch, nested, rootRef, instant) {
+function renderPlate(plate, resolveStitch, nested, rootRef, instant, css) {
 	if (!plate.chunks) return null;
 	const className = plate.rootCls ? `${ROOT_CLASS} ${plate.rootCls}` : ROOT_CLASS;
 	const rootAttrs = {
@@ -231,9 +241,12 @@ function renderPlate(plate, resolveStitch, nested, rootRef, instant) {
 		...rootRef ? { ref: rootRef } : {},
 		...instant && !nested ? { [ROOT_INSTANT_ATTR]: "" } : {}
 	};
-	const css = nested ? plate.css : `${BASE_CSS}\n${plate.css}`;
 	const chunks = plate.chunks;
 	if (chunks.length === 1 && typeof chunks[0] === "string") {
+		if (css === void 0) return /* @__PURE__ */ jsx("div", {
+			...rootAttrs,
+			dangerouslySetInnerHTML: { __html: chunks[0] }
+		});
 		const html = `<style>${escapeStyleText(css)}</style>${chunks[0]}`;
 		return /* @__PURE__ */ jsx("div", {
 			...rootAttrs,
@@ -242,7 +255,7 @@ function renderPlate(plate, resolveStitch, nested, rootRef, instant) {
 	}
 	return /* @__PURE__ */ jsxs("div", {
 		...rootAttrs,
-		children: [/* @__PURE__ */ jsx("style", { children: css }), renderChunks(chunks, resolveStitch)]
+		children: [css === void 0 ? null : /* @__PURE__ */ jsx("style", { children: css }), renderChunks(chunks, resolveStitch)]
 	});
 }
 /**

package/dist/{react.core-NhWc9qan.d.ts → react.core-sJfIcaXX.d.ts}

@@ -1,4 +1,4 @@
-import { c as XrayCaptureWalker, f as Plate } from "./serialize-BgdGt34A.js";
+import { c as XrayCaptureWalker, p as Plate } from "./serialize-BqbQVxYl.js";
 import { ReactNode } from "react";
 
 //#region src/react.core.d.ts
@@ -30,6 +30,19 @@ type SkeletonRenderProp<T> = (ctx: {
 interface SkeletonBase {
   /** The plate to render while loading, imported from `virtual:xray/plates/<name>`. */
   plate: Plate;
+  /**
+   * Inline skeleton css for a plate whose styling does NOT flow through the
+   * Vite plugin's CSS pipeline — i.e. a runtime-captured plate from
+   * `@hueest/xray/core`'s `captureElement` (ADR 0003: the no-Vite path). Pass
+   * the composed string (`composeCss(css)` for the standard BASE_CSS + plate
+   * rules); it is injected as a `<style>` on the skeleton root, exactly like
+   * the pre-two-artifact inline path. OMIT for plugin-imported plates — their
+   * css (base included) is already on the page via `virtual:xray/base.css` +
+   * `virtual:xray/plates/<name>.css`, and an inline copy would double-apply
+   * and re-fight the cascade. Applies to THIS plate's root only; stitched
+   * child plates resolve through refs/the dev store and carry no inline css.
+   */
+  css?: string;
   /** Explicit readiness mode: render the Skeleton while true, then render children and capture them in dev when false. */
   loading?: boolean;
   /** Suspense mode: make `<Skeleton>` the Suspense boundary and use the Plate as the fallback until children resolve. */

package/dist/react.d.ts

@@ -1,4 +1,4 @@
-import { t as SkeletonProps } from "./react.core-NhWc9qan.js";
+import { t as SkeletonProps } from "./react.core-sJfIcaXX.js";
 
 //#region src/react.d.ts
 /**

package/dist/react.dev.d.ts

@@ -1,4 +1,4 @@
-import { t as SkeletonProps } from "./react.core-NhWc9qan.js";
+import { t as SkeletonProps } from "./react.core-sJfIcaXX.js";
 
 //#region src/react.dev.d.ts
 /**

package/dist/react.dev.js

@@ -1,5 +1,5 @@
-import { n as BOUNDARY_ATTR } from "./plate-BRR6d8Se.js";
-import { a as markStitchesLive, c as useSkeletonTiming, i as isStitchLive, n as collectStitchNames, o as renderPlate, r as isRenderProp, s as resolveContent, t as SuspendWhileLoading } from "./react.core-BC02ukac.js";
+import { n as BOUNDARY_ATTR } from "./plate-BwJUgHDc.js";
+import { a as markStitchesLive, c as useSkeletonTiming, i as isStitchLive, n as collectStitchNames, o as renderPlate, r as isRenderProp, s as resolveContent, t as SuspendWhileLoading } from "./react.core-DeEli0Lp.js";
 import { Suspense, useCallback, useEffect, useRef, useState, useSyncExternalStore } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/react.dev.tsx
@@ -88,7 +88,7 @@ function useLivePlate(plate) {
 * `react.tsx`.
 */
 function Skeleton(props) {
-	const { plate, loading = false, suspense = false, fallback, delay, children, data, captureWalker, maxNodes, maxBreadth, maxDepth } = props;
+	const { plate, css, loading = false, suspense = false, fallback, delay, children, data, captureWalker, maxNodes, maxBreadth, maxDepth } = props;
 	const manual = props.root === "manual";
 	const lightBoxOn = useLightBox();
 	const livePlate = useLivePlate(plate);
@@ -101,6 +101,7 @@ function Skeleton(props) {
 	}, [showSkeleton, livePlate.chunks]);
 	const skeleton = /* @__PURE__ */ jsx(PlateView, {
 		plate: livePlate,
+		css,
 		fallback,
 		rootRef,
 		instant
@@ -224,7 +225,7 @@ function ManualBoundary({ plate, delay, children, data, captureWalker, maxNodes,
 /** Render a plate's skeleton, seeding the live store from its resolved refs so a
 * stitch resolves before its child is re-captured and survives a parent
 * hot-swap (which pushes a refs-less plate). Never overwrites a live capture. */
-function PlateView({ plate, fallback, nested = false, rootRef, instant }) {
+function PlateView({ plate, css, fallback, nested = false, rootRef, instant }) {
 	useEffect(() => {
 		const store = globalThis.__XRAY__?.plates;
 		if (!store || !plate.refs) return;
@@ -234,7 +235,7 @@ function PlateView({ plate, fallback, nested = false, rootRef, instant }) {
 	return renderPlate(plate, (name) => /* @__PURE__ */ jsx(RefNode, {
 		name,
 		staticRefs: plate.refs
-	}), nested, rootRef, instant);
+	}), nested, rootRef, instant, css);
 }
 /**
 * A stitch in dev: resolve the child plate from the live store (so re-capturing

package/dist/react.js

@@ -1,4 +1,4 @@
-import { a as markStitchesLive, c as useSkeletonTiming, i as isStitchLive, n as collectStitchNames, o as renderPlate, s as resolveContent, t as SuspendWhileLoading } from "./react.core-BC02ukac.js";
+import { a as markStitchesLive, c as useSkeletonTiming, i as isStitchLive, n as collectStitchNames, o as renderPlate, s as resolveContent, t as SuspendWhileLoading } from "./react.core-DeEli0Lp.js";
 import { Suspense, useEffect, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/react.tsx
@@ -30,7 +30,7 @@ import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 * or subscriptions. Stitches resolve from the statically imported `refs` graph.
 */
 function Skeleton(props) {
-	const { plate, loading = false, suspense = false, fallback, children, data } = props;
+	const { plate, css, loading = false, suspense = false, fallback, children, data } = props;
 	const rootRef = useRef(null);
 	const showSkeleton = useSkeletonTiming(loading, rootRef);
 	const [instant] = useState(() => isStitchLive(plate.name));
@@ -40,6 +40,7 @@ function Skeleton(props) {
 	}, [showSkeleton, plate.chunks]);
 	const skeleton = /* @__PURE__ */ jsx(PlateView, {
 		plate,
+		css,
 		fallback,
 		rootRef,
 		instant
@@ -52,19 +53,20 @@ function Skeleton(props) {
 	return /* @__PURE__ */ jsx(Fragment$1, { children: resolveContent(children, data) });
 }
 /** Render a plate's skeleton, mounting each stitch's child plate from `refs`. */
-function PlateView({ plate, fallback, rootRef, instant }) {
+function PlateView({ plate, css, fallback, rootRef, instant }) {
 	if (!plate.chunks) return /* @__PURE__ */ jsx(Fragment$1, { children: fallback ?? null });
-	return renderStatic(plate, false, rootRef, instant);
+	return renderStatic(plate, false, rootRef, instant, css);
 }
 /** Resolve stitches statically through the import graph (ADR 0006) — pure
 * recursion, no store, no subscription. An unknown child renders nothing. The
-* `instant` flag (ADR 0020) rides the outermost root only; nested stitches pass
-* none, so `renderPlate` never marks a nested root. */
-function renderStatic(plate, nested, rootRef, instant) {
+* `instant` flag (ADR 0020) and the inline `css` (two-artifact contract) ride
+* the outermost root only; nested stitches pass neither, so `renderPlate`
+* never marks or styles a nested root. */
+function renderStatic(plate, nested, rootRef, instant, css) {
 	return renderPlate(plate, (name) => {
 		const child = plate.refs?.[name];
 		return child ? renderStatic(child, true) : null;
-	}, nested, rootRef, instant);
+	}, nested, rootRef, instant, css);
 }
 //#endregion
 export { Skeleton };

package/dist/{serialize-BgdGt34A.d.ts → serialize-BqbQVxYl.d.ts}

@@ -49,12 +49,21 @@ type DiagnosticCode = 'unreadable-stylesheet' | 'unreadable-import' | 'skipped-d
 //#region src/plate.d.ts
 type LeafKind = 'text' | 'text-block' | 'media' | 'box';
 /**
- * The shipped structural capture of a component's rendered DOM — the data a
- * Skeleton renders from (see CONTEXT.md). Self-contained: pre-serialized chunks
- * plus one scoped CSS string; depends on nothing in the consumer's build (ADR
- * 0003). Built from the RenderNode tree at plugin load (see chunk.ts), so the
- * adapter injects strings instead of walking a tree on the latency-critical
- * first paint — and no per-framework serializer ships to the client (ADR 0008).
+ * The shipped structural capture of a component's rendered DOM — the TREE
+ * artifact a Skeleton renders from (see CONTEXT.md). Since the two-artifact
+ * cutover (plan 005 round 2), a Plate carries structure ONLY: its scoped CSS
+ * is an INDEPENDENT sibling artifact — the plugin serves it through Vite's
+ * own CSS pipeline (`virtual:xray/plates/<name>.css`, plus the shared
+ * `virtual:xray/base.css`, and an `export const css` on the virtual JS module
+ * for dev/programmatic reads), and the framework-neutral `core.ts` path hands
+ * it back separately (`captureElement` → `{ plate, css }`;
+ * `renderPlateHtml(plate, css)` receives it explicitly). Consumers decide how
+ * to render either part. Still self-contained in ADR 0003's sense: both
+ * artifacts originate from the capture and depend on nothing in the
+ * consumer's build. Built from the RenderNode tree at plugin load (see
+ * chunk.ts), so the adapter injects strings instead of walking a tree on the
+ * latency-critical first paint — and no per-framework serializer ships to the
+ * client (ADR 0008).
  */
 interface Plate {
   v: number;
@@ -68,8 +77,6 @@ interface Plate {
   chunks: Chunk[] | null;
   /** The root node's own content classes (its inherited font context), if any. */
   rootCls?: string;
-  /** Layout-relevant CSS (incl. `@media`) scoped under the plate root, paint stripped. */
-  css: string;
   /**
    * Child plates named by the chunks' `{ r }` stitches, resolved through the
    * import graph (ADR 0006). Populated by the loader's generated imports, never
@@ -201,6 +208,62 @@ interface StoredPlate extends MergedPlate {
   /** Width thresholds (view boundaries); the HUD coverage derives its bands from these. */
   breakpoints: number[];
 }
+/**
+ * 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-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 it single-handedly pinned this ~5 KB
+ * string into every consumer chunk importing the React adapter even after the
+ * adapter stopped referencing it (plan 005 round 2 finding). The template
+ * therefore starts immediately after the backtick (the old leading newline
+ * `.trim()` used to strip simply isn't there), keeping the string value
+ * byte-identical to the trimmed original.
+ */
+declare const BASE_CSS = "/* One timeline per skeleton, not per leaf: the root animates one inherited\n   opacity property and every leaf reads it. Hundreds of independent infinite\n   opacity animations would pin the compositor and cook the CPU. */\n@property --xr-o { syntax: \"<number>\"; inherits: true; initial-value: 1 }\n/* The reveal channel (ADR 0016): a second inherited opacity factor the leaf\n   multiplies into --xr-o. Transitioning THIS (not opacity directly) sidesteps\n   the animation-vs-transition collision ADR 0012 flagged. initial-value 1 (NOT\n   0) is the degradation floor: without @starting-style the reveal can never be\n   driven 0->1, so it must REST at 1 (fully visible). The delay-hide below is\n   pure progressive enhancement layered on top. */\n@property --xr-reveal { syntax: \"<number>\"; inherits: true; initial-value: 1 }\n.xr-root {\n  --xr-bone-highlight-color: #f4f4f5;\n  display: contents;\n  animation: var(--xr-bone-animation, xr-pulse) var(--xr-bone-animation-duration, 1.2s) ease-in-out infinite alternate;\n}\n/* No pointer-events:none \u2014 it blocks inspecting bones in devtools and buys\n   nothing (no real content to click). border-color: a node may capture\n   border-width for layout; its paint stays out. list-style: suppress a ::marker\n   a captured display:list-item would otherwise paint. */\n.xr-node { border-color: transparent; list-style: none }\n.xr-leaf {\n  background: var(--xr-bone-fill, var(--xr-bone-color, #e4e4e7));\n  border-radius: var(--xr-bone-border-radius, 4px);\n  /* Composed opacity (ADR 0016): the pulse channel times the reveal channel.\n     Never transition opacity directly (the pulse animation owns it). */\n  opacity: calc(var(--xr-o) * var(--xr-reveal));\n}\n/* Per-kind defaults: a single text LINE reads as a rounded bar; a multi-line\n   text BLOCK as a soft rect (a tall pill misreads as a button); media carries\n   the author radius, defaulting to the same soft rect. Re-theme any kind via\n   [data-xr-root] .xr-leaf-text { ... }. */\n.xr-leaf-text { border-radius: var(--xr-bone-text-border-radius, 999px) }\n.xr-leaf-text-block { border-radius: var(--xr-bone-text-block-border-radius, var(--xr-bone-border-radius, 4px)) }\n.xr-leaf-media { border-radius: var(--xr-bone-media-border-radius, var(--xr-bone-border-radius, 4px)) }\n@keyframes xr-pulse {\n  from { --xr-o: var(--xr-bone-pulse-opacity-max, 1) }\n  to { --xr-o: var(--xr-bone-pulse-opacity-min, 0.5) }\n}\n/* Reveal delay-hide (ADR 0016), a progressive enhancement guarded so it can NEVER\n   strand a skeleton invisible (open Q3). @starting-style is the trigger: only a\n   browser that supports it enters this block at all, and such a browser also\n   honors @property + transitions, so the 0->1 reveal completes. The @supports\n   selector(...) probe is the broadest cross-engine @starting-style feature test\n   available. Without support the block is skipped entirely and --xr-reveal stays\n   at its initial-value 1 = fully visible instant skeleton. INSIDE the block we\n   start at 0 and transition to 1 after the delay: invisible for\n   --xr-skeleton-delay, then a --xr-skeleton-transition-duration fade-in; a fast\n   load unmounts before the delay elapses and the skeleton is never seen. */\n@supports (selector(:has(*))) {\n  /* The delay-hide applies to every root EXCEPT a stitch continuation (ADR 0020).\n     Scoping with :not([data-xr-instant]) keeps an ordinary top-level skeleton\n     byte-identical to before: it still mounts at --xr-reveal 0 and fades in after\n     the delay. The transition/initial-1 rest state matches the original. */\n  .xr-root:not([data-xr-instant]) {\n    --xr-reveal: 1;\n    transition: --xr-reveal var(--xr-skeleton-transition-duration, 150ms) linear var(--xr-skeleton-delay, 250ms);\n  }\n  @starting-style { .xr-root:not([data-xr-instant]) { --xr-reveal: 0 } }\n  /* A stitch continuation (ADR 0020) reveals INSTANTLY: it was already visible as a\n     stitch under a still-showing parent, so re-paying the delay would flash it away\n     and back. No @starting-style and no transition \u2014 it rests at fully visible from\n     its first frame, matching how the stitch inherited the parent's reveal. */\n  .xr-root[data-xr-instant] { --xr-reveal: 1 }\n}\n/* Reduced motion (open Q2): keep the anti-flash delay + min-duration (they are\n   not motion), drop only the FADE \u2014 collapse the reveal transition to instant and\n   kill the pulse animation (as before). */\n@media (prefers-reduced-motion: reduce) {\n  .xr-root { animation: none; --xr-skeleton-transition-duration: 0s }\n}\n/* Dark + high-contrast bone defaults. Guarded: light-dark() is an invalid value\n   without support and would drop the declaration \u2014 see the note above; remove\n   this @supports once widely available (2026-11-13). */\n@supports (color: light-dark(#000, #fff)) {\n  .xr-root { --xr-bone-highlight-color: light-dark(#f4f4f5, #52525b) }\n  .xr-leaf { background: var(--xr-bone-fill, var(--xr-bone-color, light-dark(#e4e4e7, #3f3f46))) }\n  @media (prefers-contrast: more) {\n    .xr-leaf { background: var(--xr-bone-fill, var(--xr-bone-color, light-dark(#d4d4d8, #52525b))) }\n  }\n}\n/* Derive the sheen highlight from --xr-bone-color so re-theming one token updates\n   both. Relative color isn't widely available yet; the static highlight above is\n   the fallback (sheen just looks flatter), so no hard guard is needed. */\n@supports (color: oklch(from red l c h)) {\n  .xr-root { --xr-bone-highlight-color: oklch(from var(--xr-bone-color, #e4e4e7) calc(l + 0.08) c h) }\n}";
+/**
+ * Compose a plate's scoped css with the renderer-owned BASE_CSS, base first so
+ * a plate rule beats a base rule at equal specificity by source order — the
+ * standard composition for rendering a skeleton outside the Vite plugin
+ * (where `virtual:xray/base.css` + `virtual:xray/plates/<name>.css` do this
+ * through the CSS pipeline instead). Since the two-artifact cutover (plan 005
+ * round 2) css is the CALLER's input: `renderPlateHtml(plate,
+ * composeCss(css))`, or `<Skeleton plate={plate} css={composeCss(css)}>` for
+ * a runtime-captured plate. Rendering a NESTED stitch under an
+ * already-composed parent needs the raw css only (base is already on the
+ * page) — pass the string uncomposed there.
+ */
+declare function composeCss(css: string): string;
 /** The (unserialized) plate an import resolves to before anything has been captured. */
 declare function emptyPlate(name: string): MergedPlate;
 /**
@@ -498,4 +561,4 @@ type CollectLimits = {
   maxDepth?: number;
 };
 //#endregion
-export { emptyPlate as _, CollectAxis as a, XrayCaptureWalker as c, MergedPlate as d, Plate as f, ViewCapture as g, StoredPlate as h, CaptureWalkerContext as i, defineXrayCaptureWalker as l, RenderNode as m, CaptureSize as n, CollectLimits as o, PlateNode as p, CaptureTooLargeError as r, WalkerDecision as s, CaptureOptions as t, LeafKind as u, CaptureDiagnostic as v };
+export { ViewCapture as _, CollectAxis as a, CaptureDiagnostic as b, XrayCaptureWalker as c, LeafKind as d, MergedPlate as f, StoredPlate as g, RenderNode as h, CaptureWalkerContext as i, defineXrayCaptureWalker as l, PlateNode as m, CaptureSize as n, CollectLimits as o, Plate as p, CaptureTooLargeError as r, WalkerDecision as s, CaptureOptions as t, BASE_CSS as u, composeCss as v, emptyPlate as y };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hueest/xray",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "Auto-captured skeleton loading screens for Vite — capture the structure, ship the plate.",
   "keywords": [
     "loading",