@hueest/xray 0.1.0 → 0.2.0

package/dist/react.d.ts

@@ -1,4 +1,4 @@
-import { t as SkeletonProps } from "./react.core-fgWG_svU.js";
+import { t as SkeletonProps } from "./react.core-BzMG_cDy.js";
 
 //#region src/react.d.ts
 /**
@@ -18,12 +18,6 @@ import { t as SkeletonProps } from "./react.core-fgWG_svU.js";
  * In production this component ships no capture client, HUD, Light Box, store,
  * or subscriptions. Stitches resolve from the statically imported `refs` graph.
  */
-declare function Skeleton({
-  plate,
-  loading,
-  suspense,
-  fallback,
-  children
-}: SkeletonProps): import("react").JSX.Element;
+declare function Skeleton<T = undefined>(props: SkeletonProps<T>): import("react").JSX.Element;
 //#endregion
 export { Skeleton, type SkeletonProps };

package/dist/react.dev.d.ts

@@ -1,4 +1,4 @@
-import { t as SkeletonProps } from "./react.core-fgWG_svU.js";
+import { t as SkeletonProps } from "./react.core-BzMG_cDy.js";
 
 //#region src/react.dev.d.ts
 /**
@@ -7,13 +7,6 @@ import { t as SkeletonProps } from "./react.core-fgWG_svU.js";
  * `@hueest/xray/react` to this module in `serve`; production gets the hook-free
  * `react.tsx`.
  */
-declare function Skeleton({
-  plate,
-  loading,
-  suspense,
-  fallback,
-  delay,
-  children
-}: SkeletonProps): import("react").JSX.Element;
+declare function Skeleton<T = undefined>(props: SkeletonProps<T>): import("react").JSX.Element;
 //#endregion
 export { Skeleton, type SkeletonProps };

package/dist/react.dev.js

@@ -1,6 +1,6 @@
-import { n as BOUNDARY_ATTR } from "./plate-BuzRMPx4.js";
-import { t as renderPlate } from "./react.core-CqnDjfAJ.js";
-import { Suspense, useCallback, useEffect, useRef, useSyncExternalStore } from "react";
+import { n as BOUNDARY_ATTR } from "./plate-DoE1HEXp.js";
+import { a as renderPlate, i as markStitchesLive, n as isRenderProp, o as resolveContent, r as isStitchLive, s as useSkeletonTiming, t as collectStitchNames } from "./react.core-IyFy2b_8.js";
+import { Suspense, useCallback, useEffect, useRef, useState, useSyncExternalStore } from "react";
 import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
 //#region src/react.dev.tsx
 const noSubscribe = () => () => {};
@@ -10,6 +10,67 @@ function useLightBox() {
 	const lightbox = globalThis.__XRAY__?.lightbox;
 	return useSyncExternalStore(lightbox?.subscribe ?? noSubscribe, lightbox?.get ?? alwaysFalse, alwaysFalse);
 }
+/** True while the HUD/console "Replay" toggle is on (ADR 0015). */
+function useReplayOn() {
+	const replay = globalThis.__XRAY__?.replay;
+	return useSyncExternalStore(replay?.subscribe ?? noSubscribe, replay?.get ?? alwaysFalse, alwaysFalse);
+}
+/**
+* The Fixtures (ADR 0015) seam, applied at the ready (`loading=false`) path right
+* before `resolveContent`. It is the ONE place Record reads `data` and Replay
+* substitutes it — the render-prop `data` argument is in scope here (open Q1,
+* confirmed).
+*
+* Replay: when the toggle is on and a Fixture exists, the recorded `data` is
+* substituted for the live `data` according to `replayMode` — `'prefer'` always
+* uses the Fixture; `'missing-only'` uses it only when live `data` is NULLISH
+* (`missing ≡ nullish`, so an empty array/object is present and stays
+* capturable). The substituted value is returned synchronously so it feeds
+* `resolveContent` for THIS render; the capture-all sweep only re-renders at each
+* width and reads the SAME Fixture from the store (which the sweep never changes
+* per width), so every View is captured from one width-independent Fixture with
+* no new capture trigger (open Q2, confirmed — capture follows whatever renders,
+* ADR 0002).
+*
+* Record: the live `data` is registered (in an effect, so render stays pure) so
+* the HUD button and the auto modes always have the current input in scope. The
+* auto modes (`'first-ready'`, `'always'`) fire from the same effect; `'manual'`
+* (the default) records nothing automatically. We register and auto-record the
+* LIVE `data`, never the replayed value, so Replay and Record never feed each
+* other.
+*
+* Only the render-prop children form is the `data` seam (ADR 0014/0015), so
+* Fixtures apply to it alone: `renderProp` gates participation. A plain-children
+* Skeleton has no `data` input, so it must NOT register, auto-record, or replay —
+* the hook is a pass-through for it, which keeps a never-registered plain name out
+* of `recordAll` and lets `record(name)` throw loudly (no render-prop data) as the
+* store contract documents. A render-prop Skeleton passed `data={undefined}` is
+* still a render prop and participates exactly as any other.
+*/
+function useFixtureData(name, data, renderProp) {
+	const replayOn = useReplayOn();
+	const fixturesStore = globalThis.__XRAY__?.fixtures;
+	const recordedFixture = useSyncExternalStore(useCallback((onChange) => fixturesStore?.subscribe(onChange) ?? noSubscribe(), [fixturesStore]), () => fixturesStore?.read(name), () => void 0);
+	useEffect(() => {
+		if (!renderProp) return void 0;
+		const fx = globalThis.__XRAY__?.fixtures;
+		if (!fx) return void 0;
+		const dispose = fx.register(name, data);
+		const mode = globalThis.__XRAY__?.recordMode ?? "manual";
+		if (mode === "always" || mode === "first-ready" && !fx.has(name)) fx.record(name).catch((error) => {
+			console.error(`[xray] fixture record failed for "${name}":`, error);
+		});
+		return dispose;
+	}, [
+		name,
+		data,
+		renderProp
+	]);
+	if (!renderProp) return data;
+	if (!replayOn || !recordedFixture) return data;
+	if ((globalThis.__XRAY__?.replayMode ?? "prefer") === "missing-only" && data != null) return data;
+	return recordedFixture.data;
+}
 /**
 * The plate to render: the freshest capture from the client store (hot-swapped
 * in place, no remount) when present, else the imported prop.
@@ -26,50 +87,119 @@ function useLivePlate(plate) {
 * `@hueest/xray/react` to this module in `serve`; production gets the hook-free
 * `react.tsx`.
 */
-function Skeleton({ plate, loading = false, suspense = false, fallback, delay, children }) {
+function Skeleton(props) {
+	const { plate, loading = false, suspense = false, fallback, delay, children, data, captureWalker } = props;
+	const manual = props.root === "manual";
 	const lightBoxOn = useLightBox();
+	const livePlate = useLivePlate(plate);
+	const rootRef = useRef(null);
+	const showSkeleton = useSkeletonTiming(loading, rootRef);
+	const [instant] = useState(() => isStitchLive(plate.name));
+	useEffect(() => {
+		if (!showSkeleton) return void 0;
+		return markStitchesLive(collectStitchNames(livePlate.chunks));
+	}, [showSkeleton, livePlate.chunks]);
 	const skeleton = /* @__PURE__ */ jsx(PlateView, {
-		plate: useLivePlate(plate),
-		fallback
+		plate: livePlate,
+		fallback,
+		rootRef,
+		instant
 	});
 	if (lightBoxOn) return skeleton;
-	if (suspense) return /* @__PURE__ */ jsx(Suspense, {
-		fallback: skeleton,
-		children: /* @__PURE__ */ jsx(Content, {
-			plate,
-			delay,
-			children
-		})
-	});
-	if (loading) return skeleton;
-	return /* @__PURE__ */ jsx(Content, {
+	const content = /* @__PURE__ */ jsx(Content, {
 		plate,
 		delay,
+		manual,
+		data,
+		captureWalker,
 		children
 	});
+	if (suspense) return /* @__PURE__ */ jsx(Suspense, {
+		fallback: skeleton,
+		children: content
+	});
+	if (showSkeleton) return skeleton;
+	return content;
 }
 function Content(props) {
-	if (globalThis.__XRAY__ === void 0) return /* @__PURE__ */ jsx(Fragment$1, { children: props.children });
+	const { children, data } = props;
+	if (globalThis.__XRAY__ === void 0) return /* @__PURE__ */ jsx(Fragment$1, { children: resolveContent(children, data) });
+	if (props.manual) return /* @__PURE__ */ jsx(ManualBoundary, { ...props });
 	return /* @__PURE__ */ jsx(CaptureBoundary, { ...props });
 }
-function CaptureBoundary({ plate, delay, children }) {
+/**
+* `root="auto"` (default): the existing `display:contents` boundary wrapper marks
+* the capture seam so a parent capture stops here and references this plate by
+* name rather than re-serializing the content (ADR 0006). A render prop is called
+* with the verbatim `data` and a no-op `ref` (the wrapper, not the consumer's
+* element, carries the marker); its result renders inside the wrapper exactly as
+* plain children do.
+*/
+function CaptureBoundary({ plate, delay, children, data, captureWalker }) {
 	const ref = useRef(null);
 	useEffect(() => {
 		const el = ref.current;
 		if (!el) return void 0;
-		return globalThis.__XRAY__?.captured(plate.name, el, { delay });
-	}, [plate.name, delay]);
+		return globalThis.__XRAY__?.captured(plate.name, el, {
+			delay,
+			walker: captureWalker,
+			mode: "auto"
+		});
+	}, [
+		plate.name,
+		delay,
+		captureWalker
+	]);
+	const effective = useFixtureData(plate.name, data, isRenderProp(children));
 	return /* @__PURE__ */ jsx("div", {
 		[BOUNDARY_ATTR]: plate.name,
 		style: { display: "contents" },
 		ref,
-		children
+		children: resolveContent(children, effective)
 	});
 }
+/**
+* `root="manual"` (ADR 0014): no wrapper. The render prop is handed a CALLBACK
+* ref that, when spread onto the consumer's root element, writes the existing
+* `data-xr-boundary` marker onto it and registers it as the capture root, so a
+* parent capture reads the identical marker (`serialize.ts` does
+* `BOUNDARY_ATTR ?? ROOT_ATTR`) and cannot tell a manual root from an auto one.
+*
+* If the consumer forgets to spread the ref, the marker never lands and the
+* parent capture descends into and silently swallows this subtree's DOM: the
+* exact stitch-isolation breakage ADR 0006 prevents, and the worst failure xray
+* can produce. A dev-time effect asserts the ref fired and loudly `console.error`s
+* when it did not.
+*/
+function ManualBoundary({ plate, delay, children, data, captureWalker }) {
+	const disposeRef = useRef(void 0);
+	const attachedRef = useRef(false);
+	const ref = useCallback((el) => {
+		disposeRef.current?.();
+		disposeRef.current = void 0;
+		if (!el) return;
+		el.setAttribute(BOUNDARY_ATTR, plate.name);
+		attachedRef.current = true;
+		disposeRef.current = globalThis.__XRAY__?.captured(plate.name, el, {
+			delay,
+			walker: captureWalker,
+			mode: "manual"
+		});
+	}, [
+		plate.name,
+		delay,
+		captureWalker
+	]);
+	useEffect(() => () => disposeRef.current?.(), []);
+	useEffect(() => {
+		if (!attachedRef.current) console.error(`[xray] <Skeleton root="manual" plate="${plate.name}"> never received its \`ref\`: spread it onto your root element, or capture leaks into the parent plate (ADR 0006).`);
+	}, [plate.name]);
+	return /* @__PURE__ */ jsx(Fragment$1, { children: resolveContent(children, useFixtureData(plate.name, data, isRenderProp(children)), ref) });
+}
 /** 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 }) {
+function PlateView({ plate, fallback, nested = false, rootRef, instant }) {
 	useEffect(() => {
 		const store = globalThis.__XRAY__?.plates;
 		if (!store || !plate.refs) return;
@@ -79,7 +209,7 @@ function PlateView({ plate, fallback, nested = false }) {
 	return renderPlate(plate, (name) => /* @__PURE__ */ jsx(RefNode, {
 		name,
 		staticRefs: plate.refs
-	}), nested);
+	}), nested, rootRef, instant);
 }
 /**
 * A stitch in dev: resolve the child plate from the live store (so re-capturing

package/dist/react.js

@@ -1,5 +1,5 @@
-import { t as renderPlate } from "./react.core-CqnDjfAJ.js";
-import { Suspense } from "react";
+import { a as renderPlate, i as markStitchesLive, o as resolveContent, r as isStitchLive, s as useSkeletonTiming, t as collectStitchNames } from "./react.core-IyFy2b_8.js";
+import { Suspense, useEffect, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
 //#region src/react.tsx
 /**
@@ -29,30 +29,42 @@ import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
 * In production this component ships no capture client, HUD, Light Box, store,
 * or subscriptions. Stitches resolve from the statically imported `refs` graph.
 */
-function Skeleton({ plate, loading = false, suspense = false, fallback, children }) {
+function Skeleton(props) {
+	const { plate, loading = false, suspense = false, fallback, children, data } = props;
+	const rootRef = useRef(null);
+	const showSkeleton = useSkeletonTiming(loading, rootRef);
+	const [instant] = useState(() => isStitchLive(plate.name));
+	useEffect(() => {
+		if (!showSkeleton) return void 0;
+		return markStitchesLive(collectStitchNames(plate.chunks));
+	}, [showSkeleton, plate.chunks]);
 	const skeleton = /* @__PURE__ */ jsx(PlateView, {
 		plate,
-		fallback
+		fallback,
+		rootRef,
+		instant
 	});
 	if (suspense) return /* @__PURE__ */ jsx(Suspense, {
 		fallback: skeleton,
-		children
+		children: resolveContent(children, data)
 	});
-	if (loading) return skeleton;
-	return /* @__PURE__ */ jsx(Fragment$1, { children });
+	if (showSkeleton) return skeleton;
+	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 }) {
+function PlateView({ plate, fallback, rootRef, instant }) {
 	if (!plate.chunks) return /* @__PURE__ */ jsx(Fragment$1, { children: fallback ?? null });
-	return renderStatic(plate, false);
+	return renderStatic(plate, false, rootRef, instant);
 }
 /** Resolve stitches statically through the import graph (ADR 0006) — pure
-* recursion, no store, no subscription. An unknown child renders nothing. */
-function renderStatic(plate, nested) {
+* 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) {
 	return renderPlate(plate, (name) => {
 		const child = plate.refs?.[name];
 		return child ? renderStatic(child, true) : null;
-	}, nested);
+	}, nested, rootRef, instant);
 }
 //#endregion
 export { Skeleton };

package/dist/serialize-B--oY2bV.d.ts

@@ -0,0 +1,143 @@
+import { n as MergedPlate, s as ViewCapture, t as LeafKind } from "./plate-Bv6W-GkA.js";
+
+//#region src/serialize.d.ts
+/**
+ * Browser-side capture: walk a live rendered subtree into a Plate — one node
+ * tree plus one self-contained, scoped CSS string (ADR 0003). The CSS is
+ * lifted from the author rules that matched each node, rewritten to
+ * plate-local selectors — it carries `@media` for free and keeps layout live
+ * (the M1 bake-off winner; ADR 0005).
+ */
+interface CaptureOptions {
+  /** Plate name; comes from the virtual-module specifier. */
+  name: string;
+  /**
+   * Optional programmable capture walker (ADR 0018). The declarative `data-xr-*`
+   * annotations cover the 90%; this is the escape hatch for the 10% a markup
+   * attribute cannot express. Capture-only: it shapes the resulting `PlateNode`
+   * tree but is never persisted into the Plate, and the production adapter never
+   * captures so it ignores this entirely.
+   */
+  walker?: XrayCaptureWalker;
+  /**
+   * Whether the top-level capture roots ARE this plate's own boundary, so the
+   * stitch guard must be SKIPPED for them (ADR 0006/0014, finding #6). True ONLY
+   * for a MANUAL root: there `site.el` is the consumer's own element and its
+   * `data-xr-boundary` marks the boundary of THIS plate, so the root must be
+   * serialized as a real Entry (its box/classes/padding/border) rather than a
+   * stitch-to-itself. Defaults to `false` — the auto path, where the top-level
+   * roots are the wrapper's CHILDREN and any boundary marker on a direct-child
+   * root is a NESTED `<Skeleton>` that MUST stitch (the capture-leak guard).
+   */
+  captureRootIsBoundary?: boolean;
+}
+declare const WALKER_RESULT: unique symbol;
+/**
+ * A capture-walk decision. Obtainable ONLY from `ctx.ignore()/bone()/walk()` or
+ * `next()` — a consumer cannot hand-build one, so arbitrary `PlateNode`s can
+ * never cross the capture boundary (ADR 0018: helpers expose decisions, never
+ * raw `PlateNode`s, so xray keeps ownership of the Plate format). Opaque by
+ * design: it wraps the internal `PlateNode | null` with zero runtime cost and is
+ * unwrapped only inside the engine.
+ */
+interface WalkerResult {
+  readonly [WALKER_RESULT]: true;
+}
+/**
+ * The context handed to a capture walker's `element` hook (ADR 0018). Every
+ * member is a HELPER that returns an opaque `WalkerResult` decision — a walker
+ * NEVER hand-builds a `PlateNode`. `el` is the element under consideration; the
+ * helpers either drop it, collapse it to one measured Bone, or defer to the
+ * built-in walk.
+ */
+interface CaptureWalkerContext {
+  /** The element currently being classified. */
+  el: Element;
+  /** Drop this element and its entire subtree (no bone). */
+  ignore: () => WalkerResult;
+  /**
+   * Collapse this element's subtree into ONE measured Bone leaf. `kind` omitted
+   * shares the default classifier's kind-inference heuristic (ADR 0018, Q4).
+   */
+  bone: (opts?: {
+    kind?: LeafKind;
+  }) => WalkerResult;
+  /**
+   * Run the built-in walk for this element: the annotation walker, then the
+   * default classifier (and recurse into the subtree). The decision `next()`
+   * would produce if the walker deferred without inspecting it.
+   */
+  walk: () => WalkerResult;
+}
+/**
+ * The programmable capture walker (ADR 0018), v1. `element` is the ONLY hook
+ * implemented in v1; `text`/`declarations`/`media`/`list` are RESERVED in the
+ * type for future versions and intentionally unimplemented — declaring them now
+ * keeps a later addition non-breaking. `next()` runs the downstream decision
+ * (annotation walker, then default classifier) and RETURNS it as an opaque
+ * `WalkerResult`, which a walker returns verbatim to defer (ADR 0018, Q3).
+ */
+interface XrayCaptureWalker {
+  /**
+   * Called for every non-boundary element (the stitch guard runs first and is
+   * unreachable here, ADR 0006). Return one of `ctx.ignore()`, `ctx.bone()`,
+   * `ctx.walk()`, or the `next()` result — the `WalkerResult` type makes a
+   * hand-built `PlateNode` a compile error.
+   */
+  element?: (ctx: CaptureWalkerContext, next: () => WalkerResult) => WalkerResult;
+  /** RESERVED for a future version; not honored in v1. */
+  text?: never;
+  /** RESERVED for a future version; not honored in v1. */
+  declarations?: never;
+  /** RESERVED for a future version; not honored in v1. */
+  media?: never;
+  /** RESERVED for a future version; not honored in v1. */
+  list?: never;
+}
+/**
+ * Typed identity wrapper for authoring a capture walker (ADR 0018) — the
+ * `defineConfig` pattern. It returns its argument unchanged at runtime; its only
+ * job is to infer and check the `XrayCaptureWalker` shape at the call site so an
+ * author gets completion and a typo in a hook name is caught.
+ */
+declare function defineXrayCaptureWalker(walker: XrayCaptureWalker): XrayCaptureWalker;
+/**
+ * Capture the rendered subtree(s) under a Skeleton into a Plate. `roots` are
+ * the component's top-level elements (the children of the layout-neutral
+ * wrapper); the synthetic root node (id 0) stands in for the wrapper itself.
+ */
+declare function capture(roots: readonly Element[], options: CaptureOptions): MergedPlate;
+/**
+ * Thrown when a subtree has more nodes than the capture limit — almost always
+ * a `<Skeleton>` sitting too high in the tree. Raised after the cheap walk and
+ * before the O(rules × nodes) CSS extraction, so an oversized capture is
+ * refused without freezing the main thread on it.
+ */
+declare class CaptureTooLargeError extends Error {
+  readonly nodeCount: number;
+  /** Folds the oversized-capture warning into the shared diagnostics vocabulary (diagnostics.ts). */
+  readonly code: "too-large";
+  constructor(nodeCount: number);
+}
+interface CaptureRegimeOptions {
+  /** Refuse (throw `CaptureTooLargeError`) before CSS extraction if the walk exceeds this. */
+  maxNodes?: number;
+  /** Optional programmable capture walker (ADR 0018); capture-only, never persisted. */
+  walker?: XrayCaptureWalker;
+  /**
+   * Whether the top-level roots ARE this plate's own boundary, so the stitch
+   * guard is skipped for them (ADR 0006/0014, finding #6). True ONLY for a
+   * MANUAL root; defaults to `false`, the auto path where a boundary marker on a
+   * direct-child root is a NESTED `<Skeleton>` that MUST stitch. See `walkAll`.
+   */
+  captureRootIsBoundary?: boolean;
+}
+/**
+ * Capture one view's worth of a component: the tree plus id-form rules,
+ * with the viewport width it was taken at. The caller (the dev client)
+ * derives the view interval and ships it off; `capture` is the
+ * single-view convenience on top.
+ */
+declare function captureRegime(roots: readonly Element[], options?: CaptureRegimeOptions): ViewCapture;
+//#endregion
+export { WalkerResult as a, captureRegime as c, CaptureWalkerContext as i, defineXrayCaptureWalker as l, CaptureRegimeOptions as n, XrayCaptureWalker as o, CaptureTooLargeError as r, capture as s, CaptureOptions as t };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hueest/xray",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Auto-captured skeleton loading screens for Vite — capture the structure, ship the plate.",
   "keywords": [
     "loading",
@@ -42,15 +42,11 @@
       "types": "./dist/react.dev.d.ts",
       "import": "./dist/react.dev.js"
     },
-    "./serialize": {
-      "types": "./dist/serialize.d.ts",
-      "import": "./dist/serialize.js"
-    },
-    "./client": {
+    "./internal/client": {
       "types": "./dist/client.d.ts",
       "import": "./dist/client.js"
     },
-    "./hud": {
+    "./internal/hud": {
       "types": "./dist/hud.d.ts",
       "import": "./dist/hud.js"
     },
@@ -61,6 +57,10 @@
   "publishConfig": {
     "access": "public"
   },
+  "dependencies": {
+    "devalue": "5.8.1",
+    "valibot": "1.4.1"
+  },
   "devDependencies": {
     "@types/node": "25.9.3",
     "@types/react": "19.2.17",

package/virtual.d.ts

@@ -16,6 +16,12 @@
  * imported Plate. Pass the imported Plate to `<Skeleton>`; do not repeat the
  * name in props.
  *
+ * A name is one or more `/`-separated path segments, each `\w+(-\w+)*` — word
+ * chars with single interior hyphens. A segment may not contain `--` or a
+ * leading/trailing hyphen: the generated class prefix renders `/` as `--` to
+ * keep nested names readable, and banning those forms keeps the encoding
+ * collision-free (it is the isolation boundary across stitched Plates).
+ *
  * If the file does not exist yet, the Vite plugin resolves an empty Plate with
  * the same name so `<Skeleton fallback={...}>` can render until the first
  * Capture writes the file. Nested `<Skeleton>` boundaries become Stitches; the

package/dist/breakpoints-CBNlh7lQ.js

@@ -1,47 +0,0 @@
-//#region src/breakpoints.ts
-/**
-* Per-plate breakpoint derivation (ADR 0004): the width thresholds that could
-* change this plate come from the `@media` conditions on its own copied rules
-* plus the queries the app evaluated through `matchMedia` during capture.
-* Thresholds partition the width axis into views; identical captures in
-* adjacent views collapse at merge time.
-*/
-const FONT_SIZE_PX = 16;
-/** A breakpoint is the first integer px width of the view ABOVE the boundary. */
-function thresholdsOf(condition) {
-	const out = [];
-	const toPx = (value, unit) => Number.parseFloat(value) * (unit === "px" ? 1 : FONT_SIZE_PX);
-	const push = (raw, exclusiveBelow) => {
-		const bp = exclusiveBelow ? Number.isInteger(raw) ? raw + 1 : Math.ceil(raw) : Math.ceil(raw);
-		if (Number.isFinite(bp) && bp > 0) out.push(bp);
-	};
-	for (const m of condition.matchAll(/min-width:\s*([\d.]+)(px|em|rem)/g)) push(toPx(m[1] ?? "", m[2] ?? "px"), false);
-	for (const m of condition.matchAll(/max-width:\s*([\d.]+)(px|em|rem)/g)) push(toPx(m[1] ?? "", m[2] ?? "px"), true);
-	for (const m of condition.matchAll(/width\s*>=?\s*([\d.]+)(px|em|rem)/g)) push(toPx(m[1] ?? "", m[2] ?? "px"), false);
-	for (const m of condition.matchAll(/width\s*<=?\s*([\d.]+)(px|em|rem)/g)) push(toPx(m[1] ?? "", m[2] ?? "px"), true);
-	for (const m of condition.matchAll(/([\d.]+)(px|em|rem)\s*<=?\s*width/g)) push(toPx(m[1] ?? "", m[2] ?? "px"), false);
-	return out;
-}
-/** Width thresholds for this plate: its rules' media conditions + the app's matchMedia queries. */
-function deriveBreakpoints(rules, matchMediaQueries = []) {
-	const set = /* @__PURE__ */ new Set();
-	for (const rule of rules) for (const condition of rule.media ?? []) for (const bp of thresholdsOf(condition)) set.add(bp);
-	for (const query of matchMediaQueries) for (const bp of thresholdsOf(query)) set.add(bp);
-	return [...set].toSorted((a, b) => a - b);
-}
-/** The view interval `[min, max)` a given viewport width falls into. */
-function regimeFor(width, breakpoints) {
-	let min;
-	let max;
-	for (const bp of breakpoints) if (bp <= width) min = bp;
-	else {
-		max = bp;
-		break;
-	}
-	return {
-		...min === void 0 ? {} : { min },
-		...max === void 0 ? {} : { max }
-	};
-}
-//#endregion
-export { regimeFor as n, deriveBreakpoints as t };

package/dist/plate-BuzRMPx4.js

@@ -1,94 +0,0 @@
-/** Marks the rendered skeleton root; carries the plate name. Also a dev capture marker. */
-const ROOT_ATTR = "data-xr-root";
-/**
-* Marks a `<Content>` capture boundary in dev; carries the plate name. A parent
-* capture treats it as a stitch — it references the child plate by name instead of
-* re-serializing the child's subtree (ADR 0006).
-*/
-const BOUNDARY_ATTR = "data-xr-boundary";
-const SPEC_LEAF = 9e6;
-const SPEC_INLINE = 1e7;
-const SPEC_GATE = 2e7;
-/** Fixed renderer-owned classes every rendered node carries. */
-const ROOT_CLASS = "xr-root";
-const NODE_CLASS = "xr-node";
-const LEAF_CLASS = "xr-leaf";
-/**
-* 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: `--xr-bone` (fill), `--xr-bone-highlight` (sheen), `--xr-radius`
-* (+ `--xr-radius-text` / `--xr-radius-media`), `--xr-duration`, the pulse range
-* `--xr-pulse-min`/`--xr-pulse-max`, `--xr-anim` (mode: `xr-pulse` | `none` | a
-* custom keyframe), and `--xr-fill` (override the leaf paint, e.g. a sheen
-* gradient built from the two bone tokens).
-*/
-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 }
-.${ROOT_CLASS} {
-  --xr-bone-highlight: #f4f4f5;
-  display: contents;
-  animation: var(--xr-anim, xr-pulse) var(--xr-duration, 1.2s) ease-in-out infinite alternate;
-}
-/* No pointer-events:none — it blocks inspecting bones in devtools and buys
-   nothing (no real content to click). border-color: a node may capture
-   border-width for layout; its paint stays out. list-style: suppress a ::marker
-   a captured display:list-item would otherwise paint. */
-.${NODE_CLASS} { border-color: transparent; list-style: none }
-.${LEAF_CLASS} {
-  background: var(--xr-fill, var(--xr-bone, #e4e4e7));
-  border-radius: var(--xr-radius, 4px);
-  opacity: var(--xr-o);
-}
-/* Per-kind defaults: text reads as rounded bars, media as blocks. Re-theme any
-   kind via [data-xr-root] .${LEAF_CLASS}-text { ... }. */
-.${LEAF_CLASS}-text { border-radius: var(--xr-radius-text, 999px) }
-.${LEAF_CLASS}-media { border-radius: var(--xr-radius-media, var(--xr-radius, 4px)) }
-@keyframes xr-pulse {
-  from { --xr-o: var(--xr-pulse-max, 1) }
-  to { --xr-o: var(--xr-pulse-min, 0.5) }
-}
-@media (prefers-reduced-motion: reduce) { .${ROOT_CLASS} { animation: none } }
-/* Dark + high-contrast bone defaults. Guarded: light-dark() is an invalid value
-   without support and would drop the declaration — see the note above; remove
-   this @supports once widely available (2026-11-13). */
-@supports (color: light-dark(#000, #fff)) {
-  .${ROOT_CLASS} { --xr-bone-highlight: light-dark(#f4f4f5, #52525b) }
-  .${LEAF_CLASS} { background: var(--xr-fill, var(--xr-bone, light-dark(#e4e4e7, #3f3f46))) }
-  @media (prefers-contrast: more) {
-    .${LEAF_CLASS} { background: var(--xr-fill, var(--xr-bone, light-dark(#d4d4d8, #52525b))) }
-  }
-}
-/* Derive the sheen highlight from --xr-bone so re-theming one token updates both.
-   Relative color isn't widely available yet; the static highlight above is 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: oklch(from var(--xr-bone, #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: 1,
-		name,
-		tree: null,
-		css: ""
-	};
-}
-//#endregion
-export { ROOT_ATTR as a, SPEC_INLINE as c, NODE_CLASS as i, SPEC_LEAF as l, BOUNDARY_ATTR as n, ROOT_CLASS as o, LEAF_CLASS as r, SPEC_GATE as s, BASE_CSS as t, emptyPlate as u };