@lumencast/runtime 0.1.0

package/dist/types.d.ts

@@ -0,0 +1,38 @@
+import type { ErrorCode } from "@lumencast/protocol";
+export type LumencastMode = "broadcast" | "control" | "test";
+export type LumencastStatus = "disconnected" | "connecting" | "live";
+export interface LumencastTokenProvider {
+    fetch: () => Promise<string>;
+}
+export type LumencastToken = string | LumencastTokenProvider;
+export interface LumencastError {
+    code: ErrorCode;
+    message: string;
+    recoverable: boolean;
+}
+export interface LumencastMetric {
+    name: "delta_received" | "delta_applied" | "frame_dropped" | "reconnect" | "snapshot_received" | "scene_changed";
+    [key: string]: unknown;
+}
+export interface MountOptions {
+    target: HTMLElement;
+    /** WebSocket URL of the LSDP/1 server (wss://... in production). */
+    serverUrl: string;
+    token: LumencastToken;
+    mode: LumencastMode;
+    /** Required when mode === "test". */
+    testSession?: string;
+    /** Required when mode === "test". */
+    scene?: string;
+    onStatus?: (status: LumencastStatus) => void;
+    onError?: (err: LumencastError) => void;
+    onMetric?: (metric: LumencastMetric) => void;
+}
+export interface LumencastHandle {
+    /** Tear down the WS, unmount the React tree, release timers. Idempotent. */
+    disconnect: () => void;
+    /** Swap the auth token without unmounting the React tree. */
+    setToken: (token: LumencastToken) => void;
+}
+export type { ErrorCode };
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAErD,MAAM,MAAM,aAAa,GAAG,WAAW,GAAG,SAAS,GAAG,MAAM,CAAC;AAE7D,MAAM,MAAM,eAAe,GAAG,cAAc,GAAG,YAAY,GAAG,MAAM,CAAC;AAErE,MAAM,WAAW,sBAAsB;IACrC,KAAK,EAAE,MAAM,OAAO,CAAC,MAAM,CAAC,CAAC;CAC9B;AAED,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,sBAAsB,CAAC;AAE7D,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,SAAS,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,WAAW,eAAe;IAC9B,IAAI,EACA,gBAAgB,GAChB,eAAe,GACf,eAAe,GACf,WAAW,GACX,mBAAmB,GACnB,eAAe,CAAC;IACpB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAED,MAAM,WAAW,YAAY;IAC3B,MAAM,EAAE,WAAW,CAAC;IACpB,oEAAoE;IACpE,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,cAAc,CAAC;IACtB,IAAI,EAAE,aAAa,CAAC;IACpB,qCAAqC;IACrC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qCAAqC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,eAAe,KAAK,IAAI,CAAC;IAC7C,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,cAAc,KAAK,IAAI,CAAC;IACxC,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,eAAe,KAAK,IAAI,CAAC;CAC9C;AAED,MAAM,WAAW,eAAe;IAC9B,4EAA4E;IAC5E,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,6DAA6D;IAC7D,QAAQ,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;CAC3C;AAED,YAAY,EAAE,SAAS,EAAE,CAAC"}

package/dist/types.js

@@ -0,0 +1,3 @@
+// Public types of @lumencast/runtime — must align with RUNTIME-API.md.
+export {};
+//# sourceMappingURL=types.js.map

package/dist/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,uEAAuE"}

package/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "@lumencast/runtime",
+  "version": "0.1.0",
+  "description": "Browser runtime for Lumencast — mount(), LSDP/1 transport, leaf-grain store, LSML render, animations, overlays.",
+  "license": "Apache-2.0",
+  "type": "module",
+  "main": "./dist/lumencast.js",
+  "module": "./dist/lumencast.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/lumencast.js"
+    },
+    "./style.css": "./dist/lumencast.css"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "homepage": "https://github.com/Lumencast/lumencast-js/tree/main/packages/runtime",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Lumencast/lumencast-js.git",
+    "directory": "packages/runtime"
+  },
+  "engines": {
+    "node": ">=22"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "dependencies": {
+    "@preact/signals-react": "^3.2.1",
+    "framer-motion": "^12.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "@lumencast/protocol": "0.1.0"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.49.1",
+    "@types/react": "^19.0.10",
+    "@types/react-dom": "^19.0.4",
+    "@types/ws": "^8.5.13",
+    "@vitejs/plugin-react": "^4.3.4",
+    "happy-dom": "^20.9.0",
+    "vite": "^6.1.0",
+    "vite-plugin-dts": "^4.5.0",
+    "vitest": "^4.1.5",
+    "ws": "^8.18.0",
+    "@lumencast/dev-server": "0.1.0",
+    "@lumencast/server": "0.1.0"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build && node scripts/build-host-html.mjs",
+    "typecheck": "tsc -b --pretty",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:e2e": "playwright test",
+    "check:bundle": "node scripts/check-bundle-size.mjs"
+  }
+}

package/src/animate/crossfade.tsx

@@ -0,0 +1,31 @@
+import { type ReactNode } from "react";
+import { AnimatePresence, motion } from "framer-motion";
+
+export interface CrossfadeProps {
+  /** Scene id or any stable key — children remount on key change. */
+  trackKey: string;
+  /** Duration in milliseconds. */
+  durationMs?: number;
+  children: ReactNode;
+}
+
+/** Crossfade two scene roots at key change. Both children are mounted
+ *  during the transition window, one fading out as the other fades in.
+ *  Animates opacity only (GPU-friendly). */
+export function Crossfade({ trackKey, durationMs = 400, children }: CrossfadeProps) {
+  const transition = { duration: durationMs / 1000, ease: "easeInOut" } as const;
+  return (
+    <AnimatePresence mode="sync">
+      <motion.div
+        key={trackKey}
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        exit={{ opacity: 0 }}
+        transition={transition}
+        style={{ position: "absolute", inset: 0 }}
+      >
+        {children}
+      </motion.div>
+    </AnimatePresence>
+  );
+}

package/src/animate/keyframes.ts

@@ -0,0 +1,142 @@
+// LSML 1.1 §6.6 — keyframe sequence playback.
+//
+// A primitive's `keyframes` block describes a path through animatable
+// property values over time, applied once on (re)mount or whenever the
+// `key` LeafPath value changes. The shapes here mirror the spec verbatim
+// ; `compileForFramer` flattens them into the per-property arrays
+// (`scale: [0.8, 1.05, 1]`) plus `times: [0, 0.6, 1]` that framer-motion
+// expects on its `animate` / `transition` props.
+
+export type KeyframeEasing = "linear" | "ease-in" | "ease-out" | "ease-in-out";
+
+export interface KeyframeStep {
+  /** Timeline position in [0, 1]. First step is 0 ; last step is 1. */
+  at: number;
+  /** Optional transform target at this waypoint. */
+  transform?: KeyframeTransform;
+  /** Optional opacity in [0, 1]. */
+  opacity?: number;
+  /** Optional CSS filter string. */
+  filter?: string;
+}
+
+export interface KeyframeTransform {
+  scale?: number;
+  translateX?: number;
+  translateY?: number;
+  rotate?: number;
+}
+
+export interface Keyframes {
+  /** LeafPath whose value-change replays the sequence. Omitted = mount-only. */
+  key?: string;
+  steps: KeyframeStep[];
+  duration_ms: number;
+  easing?: KeyframeEasing;
+}
+
+const FRAMER_EASE_MAP: Record<KeyframeEasing, "linear" | "easeIn" | "easeOut" | "easeInOut"> = {
+  linear: "linear",
+  "ease-in": "easeIn",
+  "ease-out": "easeOut",
+  "ease-in-out": "easeInOut",
+};
+
+export interface CompiledKeyframes {
+  /** Per-CSS-property animate target (array of values, one per step). */
+  animate: Record<string, (number | string)[]>;
+  /** Framer transition config — duration in seconds, ease curve, times[]. */
+  transition: {
+    duration: number;
+    ease: "linear" | "easeIn" | "easeOut" | "easeInOut";
+    times: number[];
+  };
+}
+
+/**
+ * Flatten a 1.1 keyframe sequence into the per-property arrays + times[]
+ * shape framer-motion expects. Returns `undefined` when `steps` is empty
+ * or invariants are violated (first.at !== 0 or last.at !== 1) — the
+ * caller then falls back to no animation.
+ */
+export function compileForFramer(kf: Keyframes): CompiledKeyframes | undefined {
+  const steps = kf.steps;
+  if (!Array.isArray(steps) || steps.length < 2) return undefined;
+  const first = steps[0];
+  const last = steps[steps.length - 1];
+  if (first.at !== 0 || last.at !== 1) return undefined;
+
+  const times = steps.map((s) => s.at);
+  const animate: Record<string, (number | string)[]> = {};
+
+  // For each animatable property, pull the value at every step. When a
+  // step omits the property, we fall back to the previous step's value
+  // (last-known-good) so framer-motion sees a coherent waypoint chain.
+  pullChannel(steps, "opacity", animate);
+  pullChannel(steps, "filter", animate);
+  pullTransform(steps, "scale", animate);
+  pullTransform(steps, "translateX", animate);
+  pullTransform(steps, "translateY", animate);
+  pullTransform(steps, "rotate", animate);
+
+  return {
+    animate,
+    transition: {
+      duration: kf.duration_ms / 1000,
+      ease: FRAMER_EASE_MAP[kf.easing ?? "linear"],
+      times,
+    },
+  };
+}
+
+function pullChannel(
+  steps: KeyframeStep[],
+  prop: "opacity" | "filter",
+  out: Record<string, (number | string)[]>,
+): void {
+  let any = false;
+  const values: (number | string)[] = [];
+  let last: number | string | undefined;
+  for (const s of steps) {
+    const v = s[prop];
+    if (v !== undefined) {
+      any = true;
+      last = v;
+      values.push(v);
+    } else {
+      values.push(last ?? (prop === "opacity" ? 1 : "none"));
+    }
+  }
+  if (any) out[prop] = values;
+}
+
+function pullTransform(
+  steps: KeyframeStep[],
+  prop: keyof KeyframeTransform,
+  out: Record<string, (number | string)[]>,
+): void {
+  let any = false;
+  const values: number[] = [];
+  let last: number | undefined;
+  for (const s of steps) {
+    const v = s.transform?.[prop];
+    if (typeof v === "number") {
+      any = true;
+      last = v;
+      values.push(v);
+    } else {
+      values.push(last ?? defaultFor(prop));
+    }
+  }
+  if (any) {
+    if (prop === "rotate") {
+      out.rotate = values.map((n) => `${n}deg`);
+    } else {
+      out[prop] = values;
+    }
+  }
+}
+
+function defaultFor(prop: keyof KeyframeTransform): number {
+  return prop === "scale" ? 1 : 0;
+}

package/src/animate/transitions.ts

@@ -0,0 +1,116 @@
+// Local Transition type + Framer Motion translation.
+//
+// LSML 1.0 §6 declares `animate` directives at the primitive level (transition,
+// transform, opacity, filter). LSDP/1.1 §3.2.2 added per-leaf transition
+// directives on delta patches — incoming deltas can carry a transition hint
+// that overrides the bundle-level default for the next animation cycle.
+// `parseWireTransition` ingests the wire shape ; `Store.lastTransition(path)`
+// surfaces the most-recent directive to the renderer.
+//
+// We deliberately animate only GPU-friendly properties (transform, opacity,
+// filter). Primitives enforce this at the DOM level by exposing those props as
+// motion-bindable values rather than raw CSS.
+
+export type TransitionKind = "none" | "tween" | "spring" | "crossfade";
+
+export interface TweenTransition {
+  kind: "tween";
+  duration_ms: number;
+  ease?: "linear" | "cubic-in" | "cubic-out" | "cubic-in-out";
+}
+
+export interface SpringTransition {
+  kind: "spring";
+  stiffness?: number;
+  damping?: number;
+}
+
+export interface CrossfadeTransition {
+  kind: "crossfade";
+  duration_ms?: number;
+}
+
+export interface NoTransition {
+  kind: "none";
+}
+
+export type Transition = NoTransition | TweenTransition | SpringTransition | CrossfadeTransition;
+
+export type FramerEasing = "linear" | "easeIn" | "easeOut" | "easeInOut";
+
+export interface FramerTransition {
+  duration?: number;
+  ease?: FramerEasing;
+  type?: "tween" | "spring";
+  stiffness?: number;
+  damping?: number;
+}
+
+const NO_ANIMATION: FramerTransition = { duration: 0 };
+
+const EASE_MAP: Record<string, FramerEasing> = {
+  linear: "linear",
+  "cubic-in": "easeIn",
+  "cubic-out": "easeOut",
+  "cubic-in-out": "easeInOut",
+};
+
+export function toFramer(t: Transition | undefined): FramerTransition {
+  if (!t || t.kind === "none") return NO_ANIMATION;
+  if (t.kind === "tween") {
+    return {
+      type: "tween",
+      duration: (t.duration_ms ?? 0) / 1000,
+      ease: t.ease ? (EASE_MAP[t.ease] ?? "easeOut") : "easeOut",
+    };
+  }
+  if (t.kind === "spring") {
+    return {
+      type: "spring",
+      ...(t.stiffness !== undefined ? { stiffness: t.stiffness } : {}),
+      ...(t.damping !== undefined ? { damping: t.damping } : {}),
+    };
+  }
+  // crossfade at the per-prop level degenerates into a tween on opacity.
+  return {
+    type: "tween",
+    duration: (t.duration_ms ?? 400) / 1000,
+    ease: "easeInOut",
+  };
+}
+
+/**
+ * Parse a wire-format `TransitionSpec` (LSDP/1.1 §3.2.2) into the
+ * runtime's local Transition type. Returns `undefined` for malformed
+ * input so the caller falls back to whatever bundle-level default
+ * applies. The wire shape uses kebab-case `easing` values
+ * (`linear`, `ease-in`, `ease-out`, `ease-in-out`) which we map to
+ * the runtime's `cubic-*` vocabulary.
+ */
+export function parseWireTransition(value: unknown): Transition | undefined {
+  if (typeof value !== "object" || value === null) return undefined;
+  const v = value as Record<string, unknown>;
+  const kind = v.kind;
+  if (kind === "snap") {
+    return { kind: "none" };
+  }
+  if (kind === "tween") {
+    const duration_ms = typeof v.duration_ms === "number" ? v.duration_ms : 0;
+    const easing = WIRE_EASING_MAP[v.easing as string] ?? "cubic-out";
+    return { kind: "tween", duration_ms, ease: easing };
+  }
+  if (kind === "spring") {
+    const out: SpringTransition = { kind: "spring" };
+    if (typeof v.stiffness === "number") out.stiffness = v.stiffness;
+    if (typeof v.damping === "number") out.damping = v.damping;
+    return out;
+  }
+  return undefined;
+}
+
+const WIRE_EASING_MAP: Record<string, "linear" | "cubic-in" | "cubic-out" | "cubic-in-out"> = {
+  linear: "linear",
+  "ease-in": "cubic-in",
+  "ease-out": "cubic-out",
+  "ease-in-out": "cubic-in-out",
+};

package/src/app.tsx

@@ -0,0 +1,84 @@
+// Top-level React component for a mounted Lumencast instance. Reads the runtime
+// signals (bundle / status) and dispatches to the right mode.
+//
+// Per-mode code splitting: BroadcastMode / ControlMode / TestMode live in
+// separate chunks loaded only when the corresponding mode is requested. A
+// broadcast mount never downloads the overlay or test code — the broadcast
+// chunk is the bare minimum a CEF host needs to render the scene.
+//
+// Crossfade: AnimatePresence freezes the props of an exiting child so its render
+// tree keeps using the values it held at the moment it started exiting.
+
+import { useSignals } from "@preact/signals-react/runtime";
+import type { Signal } from "@preact/signals-react";
+import { AnimatePresence, motion } from "framer-motion";
+import { lazy, Suspense } from "react";
+import type { Patch } from "@lumencast/protocol";
+import type { Store } from "./state/store.js";
+import type { RenderBundle } from "./render/bundle.js";
+import type { ConnectionStatus } from "./transport/ws.js";
+import { LumencastRuntimeProvider } from "./overlay/runtime-context.js";
+import type { LumencastMode } from "./types.js";
+
+const LazyBroadcastMode = lazy(() =>
+  import("./modes/broadcast.js").then((m) => ({ default: m.BroadcastMode })),
+);
+const LazyControlMode = lazy(() =>
+  import("./modes/control.js").then((m) => ({ default: m.ControlMode })),
+);
+const LazyTestMode = lazy(() => import("./modes/test.js").then((m) => ({ default: m.TestMode })));
+
+export interface LumencastAppProps {
+  mode: LumencastMode;
+  store: Store;
+  bundleSignal: Signal<RenderBundle | null>;
+  statusSignal: Signal<ConnectionStatus>;
+  crossfadeKeySignal: Signal<string>;
+  sendInput: (patches: Patch[]) => void;
+}
+
+export function LumencastApp({
+  mode,
+  store,
+  bundleSignal,
+  statusSignal,
+  crossfadeKeySignal,
+  sendInput,
+}: LumencastAppProps) {
+  useSignals();
+
+  const bundle = bundleSignal.value;
+  const status = statusSignal.value;
+  const trackKey = crossfadeKeySignal.value;
+  if (!bundle) return null;
+
+  const ModeComponent =
+    mode === "broadcast" ? LazyBroadcastMode : mode === "control" ? LazyControlMode : LazyTestMode;
+
+  return (
+    <AnimatePresence mode="sync">
+      <motion.div
+        key={trackKey}
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        exit={{ opacity: 0 }}
+        transition={{ duration: 0.4, ease: "easeInOut" }}
+        style={{ position: "absolute", inset: 0 }}
+      >
+        <LumencastRuntimeProvider
+          value={{
+            mode,
+            store,
+            bundle,
+            status,
+            sendInput,
+          }}
+        >
+          <Suspense fallback={null}>
+            <ModeComponent />
+          </Suspense>
+        </LumencastRuntimeProvider>
+      </motion.div>
+    </AnimatePresence>
+  );
+}

package/src/dev-entry.tsx

@@ -0,0 +1,38 @@
+// Dev entry point — only used during `vite dev` and Playwright E2E tests.
+// Reads URL query params, calls mount(). Mirrors the production
+// build-host-html.mjs behavior so tests exercise a real bootstrap.
+
+import { mount } from "./index.js";
+import type { LumencastMode } from "./types.js";
+
+const params = new URLSearchParams(window.location.search);
+const serverUrl = params.get("server") ?? `ws://${location.host}/lsdp/v1`;
+const token = params.get("token") ?? "any";
+const modeParam = params.get("mode") ?? "broadcast";
+const mode: LumencastMode = (["broadcast", "control", "test"] as const).includes(
+  modeParam as LumencastMode,
+)
+  ? (modeParam as LumencastMode)
+  : "broadcast";
+const scene = params.get("scene") ?? undefined;
+const testSession = params.get("session") ?? undefined;
+
+const target = document.getElementById("scene");
+if (!(target instanceof HTMLElement)) {
+  document.body.textContent = "lumencast dev: #scene target missing";
+  throw new Error("dev-entry: #scene missing");
+}
+
+const handle = mount({
+  target,
+  serverUrl,
+  token,
+  mode,
+  ...(mode === "test" && scene ? { scene } : {}),
+  ...(mode === "test" && testSession ? { testSession } : {}),
+  onError: (err) => console.error("[lumencast]", err),
+  onStatus: (status) => target.setAttribute("data-status", status),
+});
+
+// Expose the handle to Playwright tests for setToken/disconnect drills.
+(window as unknown as { __lumencast: typeof handle }).__lumencast = handle;

package/src/index.ts

@@ -0,0 +1,24 @@
+// Public surface of @lumencast/runtime.
+
+export { mount } from "./mount.js";
+export type {
+  MountOptions,
+  LumencastHandle,
+  LumencastMode,
+  LumencastStatus,
+  LumencastToken,
+  LumencastTokenProvider,
+  LumencastError,
+  LumencastMetric,
+  ErrorCode,
+} from "./types.js";
+
+// Bundle types are useful for hosts that want to typecheck pre-compiled scenes.
+export type {
+  RenderBundle,
+  RenderNode,
+  RenderKind,
+  OperatorInput,
+  ExternalAdapter,
+  Asset,
+} from "./render/bundle.js";

package/src/internal/validate-options.ts

@@ -0,0 +1,20 @@
+import type { MountOptions } from "../types";
+
+/** Throws on invalid mount options. Exposed separately so unit tests
+ *  can exercise it without mounting a real React root. */
+export function validateOptions(options: MountOptions): void {
+  if (!(options.target instanceof HTMLElement)) {
+    throw new TypeError("mount: `target` must be an HTMLElement");
+  }
+  if (typeof options.serverUrl !== "string" || options.serverUrl.length === 0) {
+    throw new TypeError("mount: `serverUrl` must be a non-empty string");
+  }
+  if (options.mode === "test") {
+    if (!options.testSession) {
+      throw new TypeError("mount: `testSession` is required when mode === 'test'");
+    }
+    if (!options.scene) {
+      throw new TypeError("mount: `scene` is required when mode === 'test'");
+    }
+  }
+}

package/src/modes/broadcast.tsx

@@ -0,0 +1,8 @@
+import { Tree } from "../render/tree";
+import { useLumencastRuntime } from "../overlay/runtime-context";
+
+/** Broadcast mode : pure scene render, no UI chrome. */
+export function BroadcastMode() {
+  const { store, bundle } = useLumencastRuntime();
+  return <Tree node={bundle.root} store={store} />;
+}

package/src/modes/control.tsx

@@ -0,0 +1,17 @@
+import { Tree } from "../render/tree";
+import { ControlPanel } from "../overlay/control";
+import { StatusPill } from "../overlay/status-pill";
+import { useLumencastRuntime } from "../overlay/runtime-context";
+
+/** Control mode : scene + operator overlay (status pill + fields
+ *  panel from operator_inputs). */
+export function ControlMode() {
+  const { store, bundle } = useLumencastRuntime();
+  return (
+    <>
+      <Tree node={bundle.root} store={store} />
+      <StatusPill />
+      <ControlPanel />
+    </>
+  );
+}

package/src/modes/test.tsx

@@ -0,0 +1,19 @@
+import { Tree } from "../render/tree";
+import { ControlPanel } from "../overlay/control";
+import { TestPanel } from "../overlay/test";
+import { StatusPill } from "../overlay/status-pill";
+import { useLumencastRuntime } from "../overlay/runtime-context";
+
+/** Test mode : scene + operator overlay + test extensions (adapter
+ *  mocker, state inspector, time controls). */
+export function TestMode() {
+  const { store, bundle } = useLumencastRuntime();
+  return (
+    <>
+      <Tree node={bundle.root} store={store} />
+      <StatusPill />
+      <ControlPanel />
+      <TestPanel />
+    </>
+  );
+}