@hueest/xray 0.6.0 → 0.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hueest/xray",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "Auto-captured skeleton loading screens for Vite — capture the structure, ship the plate.",
   "keywords": [
     "loading",
@@ -60,20 +60,22 @@
   "dependencies": {
     "@chenglou/pretext": "0.0.8",
     "devalue": "5.8.1",
-    "valibot": "1.4.1"
+    "valibot": "1.4.2"
   },
   "devDependencies": {
+    "@arethetypeswrong/core": "0.18.5",
     "@types/node": "25.9.3",
     "@types/react": "19.2.17",
     "@types/react-dom": "19.2.3",
-    "@typescript/native-preview": "7.0.0-dev.20260619.1",
+    "@typescript/native-preview": "7.0.0-dev.20260707.2",
     "happy-dom": "20.10.6",
+    "publint": "0.3.21",
     "react": "19.2.7",
     "react-dom": "19.2.7",
-    "tsdown": "0.22.3",
+    "tsdown": "0.22.5",
     "typescript": "6.0.3",
-    "vite": "8.0.16",
-    "vitest": "4.1.9"
+    "vite": "8.1.4",
+    "vitest": "4.1.10"
   },
   "peerDependencies": {
     "react": "^18.2.0 || ^19.0.0",

package/virtual.d.ts

@@ -1,9 +1,8 @@
 /**
  * Type declarations for xray virtual modules.
  *
- * Reference from the consuming app, e.g. in tsconfig:
- * `"types": ["@hueest/xray/virtual"]`, or per file:
- * `/// <reference types="@hueest/xray/virtual" />`.
+ * Reference from the consuming app, e.g. in tsconfig: `"types": ["@hueest/xray/virtual"]`, or per
+ * file: `/// <reference types="@hueest/xray/virtual" />`.
  *
  * @module @hueest/xray/virtual
  */
@@ -11,25 +10,22 @@
 /**
  * Import a committed or not-yet-captured Plate by name.
  *
- * The import specifier is the Plate identity: `virtual:xray/plates/my-banner`
- * reads and writes `plates/my-banner.json`, and that name travels with the
- * imported Plate. Pass the imported Plate to `<Skeleton>`; do not repeat the
- * name in props.
+ * The import specifier is the Plate identity: `virtual:xray/plates/my-banner` reads and writes
+ * `plates/my-banner.json`, and that name travels with the 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).
+ * 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
- * generated virtual module wires child Plates into `Plate.refs`, so production
- * rendering follows the static import graph with no global registry.
+ * 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 generated virtual module wires child Plates into
+ * `Plate.refs`, so production rendering follows the static import graph with no global registry.
  *
- * Captured Plate files are source artifacts. Commit files under `plates/` with
- * the component change they describe.
+ * Captured Plate files are source artifacts. Commit files under `plates/` with the component change
+ * they describe.
  */
 declare module 'virtual:xray/plates/*' {
   import type { Plate } from '@hueest/xray'
@@ -37,22 +33,19 @@ declare module 'virtual:xray/plates/*' {
   /**
    * The captured Plate named by the `virtual:xray/plates/<name>` import specifier.
    *
-   * Enable this import in a consuming app with
-   * `"types": ["@hueest/xray/virtual"]` in tsconfig, or with a per-file
-   * `/// <reference types="@hueest/xray/virtual" />` directive.
+   * Enable this import in a consuming app with `"types": ["@hueest/xray/virtual"]` in tsconfig, or
+   * with a per-file `/// <reference types="@hueest/xray/virtual" />` directive.
    *
-   * The specifier maps to a file under `plates/`; for example,
-   * `virtual:xray/plates/my-banner` maps to `plates/my-banner.json`. If that
-   * file does not exist yet, the plugin returns an empty Plate with the same
-   * name so a `<Skeleton fallback={...}>` can render until the first Capture.
-   * Pass the imported Plate to `<Skeleton>`; do not repeat the name in props.
+   * The specifier maps to a file under `plates/`; for example, `virtual:xray/plates/my-banner` maps
+   * to `plates/my-banner.json`. If that file does not exist yet, the plugin returns an empty Plate
+   * with the same name so a `<Skeleton fallback={...}>` can render until the first Capture. Pass
+   * the imported Plate to `<Skeleton>`; do not repeat the name in props.
    *
-   * Child Plates referenced by Stitches are wired into `Plate.refs` by the
-   * generated virtual module. Production rendering follows that static import
-   * graph with no global Plate registry or runtime name lookup.
+   * Child Plates referenced by Stitches are wired into `Plate.refs` by the generated virtual
+   * module. Production rendering follows that static import graph with no global Plate registry or
+   * runtime name lookup.
    *
-   * Captured Plate files are source artifacts. Commit them with the component
-   * change they describe.
+   * Captured Plate files are source artifacts. Commit them with the component change they describe.
    */
   const plate: Plate
   export default plate

package/dist/css-escape-N7bOusGW.js

@@ -1,52 +0,0 @@
-//#region src/css-escape.ts
-/**
-* Dependency-free raw-text safety for the one place a Plate's CSS string is
-* interpolated into `<style>…</style>` markup.
-*
-* A plate's `css` is normally produced by the capture path (`filterLayoutDecls`
-* + `classify`), which only ever emits well-formed `selector { prop: value }`
-* rules — never a raw-text terminator. But a committed `plates/<name>.json` is
-* UNTRUSTED at render time (it can be hand-edited or arrive over git, see the
-* capture-input-validation plan's decisions), and a corrupt/malicious `css`
-* could carry a `</style>` or an HTML comment delimiter. `<style>` is a
-* raw-text element: the parser ends the element at the first `</style` it sees
-* and resumes parsing the rest as ordinary HTML, so an unescaped terminator in
-* the CSS body turns the tail of the plate into live markup.
-*
-* The React text-child path (`<style>{css}</style>`) is already safe — React
-* escapes the child — but the two STRING paths interpolate `css` directly into
-* a markup string (`renderPlateHtml` builds an HTML string; `react.core.tsx`
-* feeds one to `dangerouslySetInnerHTML`). Those must run the body through this
-* helper first.
-*
-* This lives in its own dependency-free module ON PURPOSE: it is imported by
-* render/browser paths, so it must NOT pull in the Node-only validation code
-* (valibot). It neutralizes only the sequences that can escape a raw-text
-* `<style>` context — a `<` that begins `</style`, and the HTML comment / CDATA
-* delimiters the tokenizer treats specially inside raw text — by inserting a
-* CSS-comment break (`/​**​/`) that the CSS parser ignores. It does not, and is
-* not meant to, sanitize CSS semantically; POST-time validation
-* (`validate.ts`) is what rejects junk declarations.
-*
-* @module
-*/
-/**
-* Make a CSS body safe to interpolate into a `<style>…</style>` STRING. Breaks
-* up the only sequences the HTML tokenizer acts on inside a raw-text `<style>`
-* element, so none can terminate the element early or open a comment/CDATA run:
-*
-*  - `</style` (the end-tag open, case-insensitive) — inserts the break between
-*    `<` and `/style` so the parser never matches the end tag.
-*  - `<!--`, `-->`, `<![CDATA[` — the comment/CDATA delimiters; split so neither
-*    a comment nor a CDATA section can open.
-*
-* The inserted `/​**​/` is an empty CSS comment: inert to the CSS parser (it
-* cannot appear mid-token in a value we emit, and a stray one only ends a
-* token early), so a well-formed plate is rendered byte-for-byte equivalently
-* while a corrupt one can no longer break out of the style element.
-*/
-function escapeStyleText(css) {
-	return css.replace(/<(\/style)/gi, "</**/$1").replace(/<!--/g, "<!/**/--").replace(/-->/g, "--/**/>").replace(/<!\[CDATA\[/g, "<![/**/CDATA[");
-}
-//#endregion
-export { escapeStyleText as t };

package/dist/react.core-DeEli0Lp.js

@@ -1,307 +0,0 @@
-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";
-//#region src/react.core.tsx
-/**
-* The live-stitch registry (ADR 0020): a module-level ref-counted set of stitch
-* names that are CURRENTLY rendered as a stitch inside a still-SHOWING parent
-* skeleton. It exists to kill the "stitch flash": when a parent skeleton resolves
-* and its real content mounts a descendant's OWN standalone `<Skeleton>` for the
-* same plate, that standalone is a NEW outermost skeleton — it would re-pay the
-* full `--xr-skeleton-delay` (ADR 0016) from zero and visually disappear for
-* ~250ms even though the child was continuously visible as a stitch. A standalone
-* skeleton replacing such a live stitch must reveal INSTANTLY (no delay, no fade),
-* matching how the stitch inherited its parent's already-revealed channel.
-*
-* Why a loading-keyed registry and not wall-clock time: the parent marks its
-* direct stitch names live in an effect WHILE it shows its skeleton (an earlier
-* commit). When the parent resolves, React renders the content tree — the child's
-* standalone Skeleton first-renders and reads `isStitchLive(child)` BEFORE the
-* parent's unmark cleanup runs (render happens before that commit's effects), so
-* the read deterministically sees `child` still live. The unmark then clears it.
-* "Recently" is defined by React's render-before-effect ordering, not a timer, so
-* it is race-free AND does not over-apply to independent nested skeletons (a
-* tab-hidden skeleton was never marked live by a currently-showing parent → not
-* live → normal delay). It is portal-correct for free: only genuine stitches
-* (names in a parent plate's stitch set) are ever registered, so a portaled child
-* is never a stitch, never live, and reveals on the normal delay (ADR 0020).
-*
-* This ships to PROD: the flash is a production issue too, and the cost is a Map
-* plus a register effect and a read-once `useState` per `<Skeleton>` — a few
-* bytes, consistent with the prod-hooks relaxation ADR 0016 opened.
-*/
-const liveStitches = /* @__PURE__ */ new Map();
-/**
-* Mark a parent skeleton's direct stitch names live (ref-counted, so concurrent
-* showing parents that stitch the same child stack), returning a disposer that
-* decrements each. The adapter calls this in an effect while `showSkeleton` is
-* true and runs the disposer when it stops showing (resolve/unmount). Several
-* marks of the same name increment the count; the count drops to 0 (entry
-* removed) only when every showing parent has unmarked it (ADR 0020).
-*/
-function markStitchesLive(names) {
-	for (const name of names) liveStitches.set(name, (liveStitches.get(name) ?? 0) + 1);
-	return () => {
-		queueMicrotask(() => {
-			for (const name of names) {
-				const next = (liveStitches.get(name) ?? 0) - 1;
-				if (next <= 0) liveStitches.delete(name);
-				else liveStitches.set(name, next);
-			}
-		});
-	};
-}
-/** True while `name` is rendered as a stitch inside a still-showing parent
-* skeleton — i.e. a standalone `<Skeleton>` for it is a continuation, not a fresh
-* skeleton, and must reveal instantly (ADR 0020). */
-function isStitchLive(name) {
-	return (liveStitches.get(name) ?? 0) > 0;
-}
-/**
-* The direct stitch names a plate's chunks reference (ADR 0020): a `{ r: name }`
-* chunk IS a stitch; a `{ c, k }` chunk is a stitch-bearing element kept real, so
-* recurse its `k`. Walks the SHIPPED `chunks` (the render contract), not
-* `plate.refs` (empty in dev, where the live store resolves stitches) nor
-* `collectRefs` (which walks the build-time RenderNode tree, not the shipped
-* chunks). One level of direct stitch names per Skeleton is enough: each level
-* self-registers as it becomes a real `<Skeleton>` (the cascade), so arbitrary
-* nesting is covered without recursing into child plates here.
-*/
-function collectStitchNames(chunks) {
-	if (!chunks) return [];
-	const names = [];
-	const walk = (cs) => {
-		for (const chunk of cs) {
-			if (typeof chunk === "string") continue;
-			if ("t" in chunk) continue;
-			if ("r" in chunk) names.push(chunk.r);
-			else walk(chunk.k);
-		}
-	};
-	walk(chunks);
-	return names;
-}
-/** Narrow unknown children to the render-prop form. */
-function isRenderProp(children) {
-	return typeof children === "function";
-}
-/**
-* Resolve `<Skeleton>` content at the ready (`loading=false`) path: invoke the
-* render prop with the verbatim `data` and the adapter's `ref` (a no-op in prod
-* and in `root="auto"`, the boundary-writing callback in dev `root="manual"`), or
-* pass plain children through untouched. Centralizes the single `data as T` step:
-* `data` is declared `data?: T`, so it reads back as `T | undefined`, but it is
-* the exact value the consumer passed for the render prop's `T` (ADR 0014 keeps it
-* a pass-through, not `NonNullable<T>`).
-*/
-function resolveContent(children, data, ref) {
-	if (!isRenderProp(children)) return children;
-	return children({
-		data,
-		ref
-	});
-}
-/**
-* The token defaults that mirror the BASE_CSS `var(--xr-skeleton-*, …)` fallbacks
-* (ADR 0016). The hook reads the COMPUTED token off the boundary element, but a
-* consumer who never sets it leaves the computed value empty (the tokens are not
-* declared on `.xr-root`, only referenced with these inline fallbacks). So when a
-* read comes back empty/unparseable the hook falls back to these same numbers,
-* keeping the JS hold and the CSS reveal in lockstep on identical defaults.
-*/
-const DEFAULT_SKELETON_DELAY_MS = 250;
-const DEFAULT_SKELETON_MIN_DURATION_MS = 600;
-/**
-* Parse a CSS time token (`getPropertyValue` returns a trimmed string like
-* `"250ms"`, `"0.6s"`, or `""`) to milliseconds, falling back to `fallback` when
-* empty or unparseable. Supports `ms` and `s`; a bare number is treated as ms.
-*/
-function parseMs(value, fallback) {
-	const text = value.trim();
-	if (text === "") return fallback;
-	const match = /^(-?[\d.]+)(ms|s)?$/.exec(text);
-	if (!match?.[1]) return fallback;
-	const n = Number.parseFloat(match[1]);
-	if (!Number.isFinite(n)) return fallback;
-	return match[2] === "s" ? n * 1e3 : n;
-}
-/**
-* The min-duration hold (ADR 0016), shared by the production (`react.tsx`) and dev
-* (`react.dev.tsx`) adapters so both keep identical timing. Returns whether the
-* skeleton should render RIGHT NOW.
-*
-* The reveal DELAY is pure CSS (BASE_CSS `--xr-reveal`, zero JS); this hook is
-* ONLY the part CSS cannot express: keeping the skeleton mounted past
-* `loading=false` for a minimum visible window. The hook returns `loading ||
-* holding`: the `loading` term is SYNCHRONOUS, so the skeleton shows on the very
-* render `loading` flips true (no content frame at a false→true restart, and no
-* stale-state lag), and `holding` is state used SOLELY for the post-ready hold.
-*
-* While loading, an effect anchors `t0` (loading start) and pre-arms `holding`
-* true, so that pre-armed value carries into the first `loading=false` render with
-* no content flash at the true→false transition. When `loading` flips false the
-* effect reads the COMPUTED `--xr-skeleton-delay` + `--xr-skeleton-min-duration`
-* off `ref` and holds until `t0 + delay + min-duration`. Two cases skip the hold
-* entirely (swap synchronously, no timer): min-duration resolves to 0, or `ref` is
-* null / no `t0` was recorded — meaning no skeleton root was ever shown (e.g. a
-* plate with no capture, just a fallback), so there is nothing to hold and a hold
-* would only keep blank/fallback UI on screen after data is ready.
-*
-* Reading computed custom props off the skeleton root (open Q4): the root carries
-* `display:contents`, but custom-property inheritance and resolution are
-* unaffected by `display` — `getComputedStyle(el).getPropertyValue('--xr-…')`
-* returns the inherited token value on a `display:contents` element just as on any
-* other. The tokens are not declared on `.xr-root` (only referenced with inline
-* fallbacks), so a consumer who never themes them yields an empty read; `parseMs`
-* then applies the same defaults the CSS uses, so the hold matches the reveal.
-*/
-function useSkeletonTiming(loading, ref) {
-	const [holding, setHolding] = useState(loading);
-	const startRef = useRef(null);
-	const timerRef = useRef(void 0);
-	useEffect(() => {
-		const clear = () => {
-			if (timerRef.current !== void 0) {
-				clearTimeout(timerRef.current);
-				timerRef.current = void 0;
-			}
-		};
-		if (loading) {
-			clear();
-			if (startRef.current === null) startRef.current = Date.now();
-			setHolding(true);
-			return clear;
-		}
-		const start = startRef.current;
-		startRef.current = null;
-		const el = ref.current;
-		if (el === null || start === null) {
-			clear();
-			setHolding(false);
-			return clear;
-		}
-		const style = getComputedStyle(el);
-		const delay = parseMs(style.getPropertyValue("--xr-skeleton-delay"), DEFAULT_SKELETON_DELAY_MS);
-		const minDuration = parseMs(style.getPropertyValue("--xr-skeleton-min-duration"), DEFAULT_SKELETON_MIN_DURATION_MS);
-		if (minDuration <= 0) {
-			clear();
-			setHolding(false);
-			return clear;
-		}
-		const remaining = start + delay + minDuration - Date.now();
-		if (remaining <= 0) {
-			clear();
-			setHolding(false);
-			return clear;
-		}
-		clear();
-		timerRef.current = setTimeout(() => {
-			timerRef.current = void 0;
-			setHolding(false);
-		}, remaining);
-		return clear;
-	}, [loading, ref]);
-	return loading || holding;
-}
-/** Layout-neutral wrapper for an HTML island sitting beside React stitch nodes —
-* its children participate in the grandparent's flow, so grid/flex item counts
-* are unchanged. */
-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. 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, css) {
-	if (!plate.chunks) return null;
-	const className = plate.rootCls ? `${ROOT_CLASS} ${plate.rootCls}` : ROOT_CLASS;
-	const rootAttrs = {
-		[ROOT_ATTR]: plate.name,
-		className,
-		"aria-hidden": true,
-		"aria-busy": true,
-		...rootRef ? { ref: rootRef } : {},
-		...instant && !nested ? { [ROOT_INSTANT_ATTR]: "" } : {}
-	};
-	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,
-			dangerouslySetInnerHTML: { __html: html }
-		});
-	}
-	return /* @__PURE__ */ jsxs("div", {
-		...rootAttrs,
-		children: [css === void 0 ? null : /* @__PURE__ */ jsx("style", { children: css }), renderChunks(chunks, resolveStitch)]
-	});
-}
-/**
-* Each `string` chunk is injected as a display:contents innerHTML island; each
-* `{ r }` stitch resolves through `resolveStitch`; a `{ c, k }` node stays a
-* real element and recurses (it holds a stitch deeper). No per-node tree walk —
-* the strings are already serialized.
-*/
-function renderChunks(chunks, resolveStitch) {
-	return chunks.map((chunk, i) => {
-		if (typeof chunk === "string") return /* @__PURE__ */ jsx("div", {
-			style: DISPLAY_CONTENTS,
-			dangerouslySetInnerHTML: { __html: chunk }
-		}, i);
-		if ("t" in chunk) return /* @__PURE__ */ jsx("div", {
-			style: DISPLAY_CONTENTS,
-			dangerouslySetInnerHTML: { __html: chunk.t.repeat(chunk.n) }
-		}, i);
-		if ("r" in chunk) return /* @__PURE__ */ jsx(Fragment, { children: resolveStitch(chunk.r) }, i);
-		return /* @__PURE__ */ jsx("div", {
-			className: chunk.c,
-			children: renderChunks(chunk.k, resolveStitch)
-		}, i);
-	});
-}
-/**
-* A never-settling promise for the loading suspender below. It never needs to
-* resolve: React retries a suspended boundary when its parent re-renders with new
-* props (here, `loading` flipping to false), so the prop change — not the promise —
-* drives recovery.
-*/
-const SUSPEND_UNTIL_READY = new Promise(() => {});
-/**
-* Suspends while `loading` is true. It exists so a `suspense`-mode `<Skeleton>` can
-* show its plate through the ONE Suspense fallback across BOTH readiness phases — the
-* data-loading phase (this suspender) AND the lazy code-chunk phase (the content
-* itself suspending). Because the plate is the SAME fallback DOM node the whole time,
-* there is no unmount/remount between the two phases and thus no flicker (a top-level
-* `return skeleton` for the data phase followed by a Suspense-fallback skeleton for
-* the chunk phase are different tree positions, so they DID remount). While this
-* throws, the content sibling is never committed, preserving "children never render
-* without data" (ADR 0002).
-*/
-function SuspendWhileLoading({ loading }) {
-	if (loading) throw SUSPEND_UNTIL_READY;
-	return null;
-}
-//#endregion
-export { markStitchesLive as a, useSkeletonTiming as c, isStitchLive as i, collectStitchNames as n, renderPlate as o, isRenderProp as r, resolveContent as s, SuspendWhileLoading as t };

package/dist/react.core-sJfIcaXX.d.ts

@@ -1,102 +0,0 @@
-import { c as XrayCaptureWalker, p as Plate } from "./serialize-BqbQVxYl.js";
-import { ReactNode } from "react";
-
-//#region src/react.core.d.ts
-/**
- * The additive render-prop children form (ADR 0014). Called only at
- * `loading=false` (null included — `loading` stays the sole readiness axis, ADR
- * 0002), it hands back the typed `data` verbatim plus a `ref` for the manual
- * capture root.
- *
- * `ref` is a CALLBACK ref by contract: in `root="manual"` (dev) it imperatively
- * writes the `data-xr-boundary` marker onto the consumer's own element and
- * registers it as the capture root, so it must run on the real DOM node. In
- * `root="auto"` and in production it is a no-op (omitted), and the existing
- * `display:contents` boundary wrapper does the marking instead.
- *
- * It is typed as a callback ref over the base `Element` rather than a `Ref<T>`.
- * A callback that accepts `Element | null` is, by parameter contravariance,
- * assignable to a more specific `ref` slot (`<section ref={ref}>` wants
- * `(el: HTMLElement | null) => void`), so the consumer spreads it onto any host
- * element without a cast. A `RefObject` would NOT compose this way and is not
- * offered: writing the boundary attribute needs the imperative callback anyway.
- */
-type SkeletonRef = (el: Element | null) => void;
-type SkeletonRenderProp<T> = (ctx: {
-  data: T;
-  ref?: SkeletonRef;
-}) => ReactNode;
-/** Fields shared by both `root` variants of `<Skeleton>`. */
-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. */
-  suspense?: boolean;
-  /** Shown while loading when the plate has no capture yet. */
-  fallback?: ReactNode;
-  /** Override the plugin's settle delay before this site is captured (dev only). */
-  delay?: number;
-  /**
-   * Programmable capture walker for this Skeleton's subtree (ADR 0018, dev only).
-   * The escape hatch beyond the declarative `data-xr-*` annotations: a closure
-   * that decides, per element, whether to ignore it, collapse it to one Bone, or
-   * defer to the built-in walk. Threaded through the dev adapter into
-   * `captureView`; PRODUCTION ignores it entirely (it never captures). On both
-   * `root` variants of the union, so a manual root may carry one too.
-   */
-  captureWalker?: XrayCaptureWalker;
-  /**
-   * Per-Skeleton Collect limits (ADR 0022, dev only): override the plugin's
-   * `collect` defaults for THIS boundary's capture. Flat primitives — not a nested
-   * object — so they stay referentially stable across renders and never churn the
-   * dev capture effect's deps. `maxNodes` caps total surviving nodes, `maxBreadth`
-   * the widest level, `maxDepth` the nesting depth; an omitted `maxNodes` derives
-   * from the resolved breadth × depth. PRODUCTION ignores them (it never captures).
-   */
-  maxNodes?: number;
-  maxBreadth?: number;
-  maxDepth?: number;
-}
-/**
- * Props accepted by the React `<Skeleton>` component, generic over the optional
- * render-prop `data` payload `T` (ADR 0014). The generic defaults to `undefined`
- * so existing call sites — `<Skeleton plate loading />`, plain children — keep
- * working with zero type arguments; passing `data` infers `T` into the render
- * prop. `data` is a pure pass-through (the consumer owns nullability), never
- * `NonNullable<T>`.
- *
- * The two members discriminate on `root`:
- * - `root="auto"` (default): the existing `display:contents` boundary wrapper
- *   marks the capture seam (ADR 0006); children may be plain `ReactNode` OR a
- *   render prop, and the surfaced `ref` is a no-op.
- * - `root="manual"`: no wrapper; the consumer owns the capture root element. This
- *   REQUIRES render-prop children (the only way to hand back the `ref` that
- *   writes the boundary marker), so plain children + `root="manual"` is a type
- *   error.
- */
-type SkeletonProps<T = undefined> = SkeletonBase & ({
-  /** Auto capture root (default): xray inserts a `display:contents` boundary wrapper. */root?: 'auto'; /** Render-prop payload, passed back to the children function verbatim as `T`. */
-  data?: T; /** Real content. In dev, these children are also the capture source once ready. Either plain `ReactNode` or a render prop. */
-  children?: ReactNode | SkeletonRenderProp<T>;
-} | {
-  /** Manual capture root: the consumer's element owns the boundary marker; no wrapper (ADR 0014). */root: 'manual'; /** Render-prop payload, passed back to the children function verbatim as `T`. */
-  data?: T; /** Render prop required: spread the supplied `ref` onto your root element so capture does not leak into the parent plate. */
-  children: SkeletonRenderProp<T>;
-});
-//#endregion
-export { SkeletonProps as t };