BASE_CSS

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 — 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-line { … }. */\n.xr-leaf-text-line { border-radius: var(–xr-bone-text-line-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/* A hidden bone holds its measured box in the flow but paints nothing: the\n space-preserving complement to data-xr-ignore. visibility (not display) so\n the captured size rules still lay the box out. */\n.xr-leaf-hidden { visibility: hidden }\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 — 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 — 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 — 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}”

Defined in: packages/xray/src/plate.ts:245

Renderer-owned base styles, emitted once by the outermost view (ADR 0007), before a plate’s node rules so a node’s captured class wins by source order. Everything visual is driven by inheritable custom properties, so consumers theme by setting --xr-* in :root or on any ancestor — and per-plate via [data-xr-root="name"] (the root carries its plate name). See ADR 0011 and docs/architecture.md. Class-based and unlayered — @layer was rejected (unlayered app CSS would beat layered skeleton rules, and it inverts !important).

Progressive enhancement (ADR 0011): the plain bone fill + opacity pulse use only universally-supported CSS and are the floor. light-dark() is guarded by @supports because an unsupported VALUE drops the whole declaration (an invisible bone), and it is not Baseline-widely-available until 2026-11-13 — drop the guard then. Features that merely no-op when absent (@property, prefers-contrast, relative-color-as-fallback) carry no hard guard.

Tokens (ADR 0017 taxonomy). The --xr-bone-* family styles an individual Bone: --xr-bone-color (fill), --xr-bone-highlight-color (sheen), --xr-bone-border-radius (+ --xr-bone-text-line-border-radius / --xr-bone-text-block-border-radius / --xr-bone-media-border-radius), --xr-bone-animation-duration, the pulse range --xr-bone-pulse-opacity-min/--xr-bone-pulse-opacity-max, --xr-bone-animation (mode: xr-pulse | none | a custom keyframe), and --xr-bone-fill (override the leaf paint, e.g. a sheen gradient built from the two bone color tokens). The --xr-skeleton-* family governs whole-skeleton display timing (ADR 0016): --xr-skeleton-delay (grace before the skeleton becomes visible), --xr-skeleton-min-duration (minimum visible time once shown; read by the useSkeletonTiming hook, not used in CSS), and --xr-skeleton-transition-duration (the reveal/swap fade). The private channels --xr-o (pulse) and --xr-reveal (reveal) stay undocumented @property plumbing, not a theming surface.

Declared as a PLAIN template literal — no .trim() (or any other call) on the initializer. A method call is not provably pure to a conservative tree-shaker (rolldown/Rollup) and would pin this ~5 KB string into every consumer chunk that imports the React adapter, referenced or not (ADR 0026). The template starts immediately after the backtick, so there is no leading newline to strip.