@hueest/xray 0.1.0

package/dist/plate-BuzRMPx4.js

@@ -0,0 +1,94 @@
+/** 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 };

package/dist/plate-DboxMKg-.d.ts

@@ -0,0 +1,196 @@
+//#region src/plate.d.ts
+type LeafKind = 'text' | '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).
+ */
+interface Plate {
+  v: number;
+  /** Capture name; comes from the virtual-module specifier, never typed at a call site. */
+  name: string;
+  /**
+   * The root's children, pre-serialized (ADR 0008): a stitch-free run is one
+   * HTML `string`; a stitch is `{ r: name }`; a stitch-bearing element is
+   * `{ c: className, k: chunk[] }`. Null until first capture.
+   */
+  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
+   * serialized into the plates JSON; absent in production when there are no
+   * stitches. In dev the live store takes precedence, so this need not be present.
+   */
+  refs?: Record<string, Plate>;
+}
+/**
+ * One serialized child of a plate root (or of a stitch-bearing node): a
+ * stitch-free HTML run (`string`), a stitch to a child plate (`{ r: name }`),
+ * or a stitch-bearing element kept real so its inner stitches can mount
+ * (`{ c: className, k: chunk[] }`). The framework-neutral render contract: an
+ * adapter injects the strings and mounts a child plate at each stitch (ADR 0008).
+ */
+type Chunk = string | {
+  r: string;
+} | {
+  c: string;
+  k: Chunk[];
+};
+/**
+ * A plate after view-merge + classify but before chunk serialization: the
+ * build-time RenderNode tree plus its scoped CSS. Produced by `mergeViews` and
+ * `capture`, then serialized into the shipped `Plate` (chunks) at load
+ * (`serializePlate`). Never shipped to the client.
+ */
+interface MergedPlate {
+  v: number;
+  name: string;
+  tree: RenderNode | null;
+  css: string;
+}
+interface PlateNode {
+  /** Plate-local id; rules reference it pre-classify. Stripped from the shipped tree. */
+  id: number;
+  /** Present on paint leaves; absent on layout containers. */
+  leaf?: LeafKind;
+  /**
+   * A stitch: render the named child plate's skeleton here instead of own
+   * structure (ADR 0006). Mutually exclusive with `leaf`/`kids`. Resolved
+   * against `Plate.refs` (prod) or the live store (dev).
+   */
+  ref?: string;
+  kids?: PlateNode[];
+}
+/**
+ * A node in the shipped tree, after classify (ADR 0007). Carries the
+ * content-addressed style classes it needs instead of an id — the CSS targets
+ * those classes, not a per-node `data-xr` value, so node scoping (the old
+ * `nodeKey`) is gone. `cls` is a space-joined class-token list.
+ */
+interface RenderNode {
+  leaf?: LeafKind;
+  ref?: string;
+  cls?: string;
+  kids?: RenderNode[];
+}
+/**
+ * A captured style rule in id form — selectors are generated at render time,
+ * so view merging can remap node ids without string surgery. `ids: []`
+ * targets the plate root.
+ */
+interface PlateRule {
+  ids: number[];
+  decls: string[];
+  /** Media-condition stack, outermost first; conditions AND together. */
+  media?: string[];
+  /** `@container`-condition stack, outermost first; conditions AND together. Absent when none. */
+  container?: string[];
+  layered?: boolean;
+  spec: number;
+  order: number;
+}
+/**
+ * One capture of a component within one viewport view — `[min, max)` in px,
+ * either side open-ended when undefined. What the dev client ships to the
+ * plugin, and what the plate file accumulates (ADR 0004).
+ */
+interface ViewCapture {
+  /** Viewport width at capture time. */
+  width: number;
+  min?: number;
+  max?: number;
+  tree: PlateNode;
+  rules: PlateRule[];
+}
+/** The committed `plates/<name>.json`: per-view captures, merged at load. */
+interface PlateFile {
+  v: number;
+  name: string;
+  /** Width thresholds (view boundaries) derived so far. */
+  breakpoints: number[];
+  views: ViewCapture[];
+}
+/** The (unserialized) plate an import resolves to before anything has been captured. */
+declare function emptyPlate(name: string): MergedPlate;
+/**
+ * A dev-only sticky boolean toggle (get/set/subscribe), persisted per tab.
+ * Used for both "light box" (render every `<Skeleton>` regardless of readiness)
+ * and "capture" (whether browsing re-captures plates).
+ */
+interface ToggleStore {
+  get: () => boolean;
+  set: (value: boolean) => void;
+  subscribe: (onChange: () => void) => () => void;
+}
+/**
+ * Dev-only store of the freshest plate per name, updated in place when a
+ * capture lands. `<Skeleton>` reads through it so a new plate re-renders the
+ * site rather than reloading the module — which would remount the capture
+ * boundary and re-fire the capture, a feedback loop.
+ */
+interface PlateStore {
+  get: (name: string) => Plate | undefined;
+  subscribe: (name: string, onChange: () => void) => () => void;
+  /**
+   * Register a plate imported via the ref graph if the store has none yet — so a
+   * stitch resolves even before its child is re-captured, and survives a parent
+   * hot-swap (whose pushed plate carries no resolved `refs`). Never overwrites a
+   * live capture.
+   */
+  seed: (name: string, plate: Plate) => void;
+}
+/** A view interval `[min, max)`; an open end is undefined (ADR 0004). */
+interface Span {
+  min?: number;
+  max?: number;
+}
+/** A plate's detected width thresholds and the spans actually captured, from disk. */
+interface PlateCoverage {
+  breakpoints: number[];
+  spans: Span[];
+}
+/**
+ * Dev-only per-plate coverage, sourced from the committed plate files (not the
+ * session): the breakpoints detected so far and which view spans are captured.
+ * The HUD renders every band — covered ones lit, the rest dim — and the
+ * capture-all sweep derives its target widths from the breakpoints.
+ */
+interface CoverageStore {
+  get: () => ReadonlyMap<string, PlateCoverage>;
+  set: (name: string, coverage: PlateCoverage) => void;
+  subscribe: (onChange: () => void) => () => void;
+}
+/**
+ * Dev-only capture hook, installed by the dev client before the app boots.
+ * Absent in production builds, so `<Skeleton>` carries zero capture weight.
+ * `captured` returns a dispose callback (stop observing this site).
+ */
+interface CaptureHook {
+  captured: (name: string, el: Element, opts?: {
+    delay?: number;
+  }) => (() => void) | undefined;
+  /** Light Box toggle: force every `<Skeleton>` to its skeleton, read by `<Skeleton>`. */
+  lightbox?: ToggleStore;
+  /** Capture toggle: whether browsing re-captures plates, flipped from the HUD. */
+  capture?: ToggleStore;
+  /** Read side for `<Skeleton>`. */
+  plates?: PlateStore;
+  /** Write side for the dev client's HMR-event handler. */
+  updatePlate?: (name: string, plate: Plate) => void;
+  /** Dev-only: run the HUD-triggered capture-all-views sweep via the extension (ADR 0010). */
+  captureAllViews?: () => Promise<void>;
+  /** Dev-only per-plate breakpoints + captured spans, from disk; fed by the bootstrap. */
+  coverage?: CoverageStore;
+}
+declare global {
+  var __XRAY__: CaptureHook | undefined;
+}
+//#endregion
+export { PlateNode as a, emptyPlate as c, PlateFile as i, MergedPlate as n, RenderNode as o, Plate as r, ViewCapture as s, LeafKind as t };

package/dist/react.core-CqnDjfAJ.js

@@ -0,0 +1,59 @@
+import { a as ROOT_ATTR, o as ROOT_CLASS, t as BASE_CSS } from "./plate-BuzRMPx4.js";
+import { Fragment } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/react.core.tsx
+/** 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, which skips
+* BASE_CSS — the outermost view already emitted it (ADR 0007). Returns null
+* when the plate has no capture yet; the caller renders the fallback.
+*/
+function renderPlate(plate, resolveStitch, nested) {
+	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
+	};
+	const css = nested ? plate.css : `${BASE_CSS}\n${plate.css}`;
+	const chunks = plate.chunks;
+	if (chunks.length === 1 && typeof chunks[0] === "string") {
+		const html = `<style>${css}</style>${chunks[0]}`;
+		return /* @__PURE__ */ jsx("div", {
+			...rootAttrs,
+			dangerouslySetInnerHTML: { __html: html }
+		});
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		...rootAttrs,
+		children: [/* @__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 ("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);
+	});
+}
+//#endregion
+export { renderPlate as t };

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

@@ -0,0 +1,21 @@
+import { r as Plate } from "./plate-DboxMKg-.js";
+import { ReactNode } from "react";
+
+//#region src/react.core.d.ts
+/** Props accepted by the React `<Skeleton>` component. */
+interface SkeletonProps {
+  /** The plate to render while loading, imported from `virtual:xray/plates/<name>`. */
+  plate: Plate;
+  /** 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;
+  /** Real content. In dev, these children are also the capture source once ready. */
+  children?: ReactNode;
+}
+//#endregion
+export { SkeletonProps as t };

package/dist/react.d.ts

@@ -0,0 +1,29 @@
+import { t as SkeletonProps } from "./react.core-fgWG_svU.js";
+
+//#region src/react.d.ts
+/**
+ * Render a committed Plate while content is loading.
+ *
+ * Use `loading` when your data source exposes an explicit pending state. Use
+ * `suspense` when the child suspends; in that mode `<Skeleton>` is the Suspense
+ * boundary and the Plate is the fallback. You can also render a bare Skeleton
+ * with no children when another framework or router owns the loading boundary.
+ *
+ * In dev, the plugin aliases this component to the dev adapter. When children
+ * are ready, that adapter marks the capture boundary, waits for the subtree to
+ * settle, and sends the rendered DOM to the xray client. Nested `<Skeleton>`
+ * boundaries become Stitches so a parent Plate records a child Plate reference
+ * instead of serializing the child subtree again.
+ *
+ * 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;
+//#endregion
+export { Skeleton, type SkeletonProps };

package/dist/react.dev.d.ts

@@ -0,0 +1,19 @@
+import { t as SkeletonProps } from "./react.core-fgWG_svU.js";
+
+//#region src/react.dev.d.ts
+/**
+ * Dev `<Skeleton>`: production behavior plus the Light Box override, the
+ * live-store hot-swap, and browse-time capture. The xray plugin aliases
+ * `@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;
+//#endregion
+export { Skeleton, type SkeletonProps };

package/dist/react.dev.js

@@ -0,0 +1,101 @@
+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 { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
+//#region src/react.dev.tsx
+const noSubscribe = () => () => {};
+const alwaysFalse = () => false;
+/** True while the HUD/console "Light Box" toggle is on. */
+function useLightBox() {
+	const lightbox = globalThis.__XRAY__?.lightbox;
+	return useSyncExternalStore(lightbox?.subscribe ?? noSubscribe, lightbox?.get ?? alwaysFalse, alwaysFalse);
+}
+/**
+* The plate to render: the freshest capture from the client store (hot-swapped
+* in place, no remount) when present, else the imported prop.
+*/
+function useLivePlate(plate) {
+	const store = globalThis.__XRAY__?.plates;
+	const subscribe = useCallback((onChange) => store?.subscribe(plate.name, onChange) ?? noSubscribe(), [store, plate.name]);
+	const getSnapshot = () => store?.get(plate.name) ?? plate;
+	return useSyncExternalStore(subscribe, getSnapshot, () => plate);
+}
+/**
+* Dev `<Skeleton>`: production behavior plus the Light Box override, the
+* live-store hot-swap, and browse-time capture. The xray plugin aliases
+* `@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 }) {
+	const lightBoxOn = useLightBox();
+	const skeleton = /* @__PURE__ */ jsx(PlateView, {
+		plate: useLivePlate(plate),
+		fallback
+	});
+	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, {
+		plate,
+		delay,
+		children
+	});
+}
+function Content(props) {
+	if (globalThis.__XRAY__ === void 0) return /* @__PURE__ */ jsx(Fragment$1, { children: props.children });
+	return /* @__PURE__ */ jsx(CaptureBoundary, { ...props });
+}
+function CaptureBoundary({ plate, delay, children }) {
+	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 /* @__PURE__ */ jsx("div", {
+		[BOUNDARY_ATTR]: plate.name,
+		style: { display: "contents" },
+		ref,
+		children
+	});
+}
+/** 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 }) {
+	useEffect(() => {
+		const store = globalThis.__XRAY__?.plates;
+		if (!store || !plate.refs) return;
+		for (const [name, child] of Object.entries(plate.refs)) store.seed(name, child);
+	}, [plate.refs]);
+	if (!plate.chunks) return /* @__PURE__ */ jsx(Fragment$1, { children: fallback ?? null });
+	return renderPlate(plate, (name) => /* @__PURE__ */ jsx(RefNode, {
+		name,
+		staticRefs: plate.refs
+	}), nested);
+}
+/**
+* A stitch in dev: resolve the child plate from the live store (so re-capturing
+* it hot-swaps it inside every parent), falling back to the parent's statically
+* imported `refs` until the first capture lands.
+*/
+function RefNode({ name, staticRefs }) {
+	const store = globalThis.__XRAY__?.plates;
+	const subscribe = useCallback((onChange) => store?.subscribe(name, onChange) ?? noSubscribe(), [store, name]);
+	const fallback = staticRefs?.[name];
+	const child = useSyncExternalStore(subscribe, () => store?.get(name) ?? fallback, () => fallback);
+	if (!child) return null;
+	return /* @__PURE__ */ jsx(PlateView, {
+		plate: child,
+		nested: true
+	});
+}
+//#endregion
+export { Skeleton };

package/dist/react.js

@@ -0,0 +1,58 @@
+import { t as renderPlate } from "./react.core-CqnDjfAJ.js";
+import { Suspense } from "react";
+import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
+//#region src/react.tsx
+/**
+* React adapter for rendering committed Plates through `<Skeleton>`.
+*
+* In production this adapter is hook-free and renders only committed Plate data.
+* During `vite serve`, `xrayVitePlugin()` aliases this export to the dev adapter
+* so ready children can be captured without shipping the capture client, HUD, or
+* Light Box code in production builds.
+*
+* @module @hueest/xray/react
+*/
+/**
+* Render a committed Plate while content is loading.
+*
+* Use `loading` when your data source exposes an explicit pending state. Use
+* `suspense` when the child suspends; in that mode `<Skeleton>` is the Suspense
+* boundary and the Plate is the fallback. You can also render a bare Skeleton
+* with no children when another framework or router owns the loading boundary.
+*
+* In dev, the plugin aliases this component to the dev adapter. When children
+* are ready, that adapter marks the capture boundary, waits for the subtree to
+* settle, and sends the rendered DOM to the xray client. Nested `<Skeleton>`
+* boundaries become Stitches so a parent Plate records a child Plate reference
+* instead of serializing the child subtree again.
+*
+* 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 }) {
+	const skeleton = /* @__PURE__ */ jsx(PlateView, {
+		plate,
+		fallback
+	});
+	if (suspense) return /* @__PURE__ */ jsx(Suspense, {
+		fallback: skeleton,
+		children
+	});
+	if (loading) return skeleton;
+	return /* @__PURE__ */ jsx(Fragment$1, { children });
+}
+/** Render a plate's skeleton, mounting each stitch's child plate from `refs`. */
+function PlateView({ plate, fallback }) {
+	if (!plate.chunks) return /* @__PURE__ */ jsx(Fragment$1, { children: fallback ?? null });
+	return renderStatic(plate, false);
+}
+/** Resolve stitches statically through the import graph (ADR 0006) — pure
+* recursion, no store, no subscription. An unknown child renders nothing. */
+function renderStatic(plate, nested) {
+	return renderPlate(plate, (name) => {
+		const child = plate.refs?.[name];
+		return child ? renderStatic(child, true) : null;
+	}, nested);
+}
+//#endregion
+export { Skeleton };