@scenoco-three/editor 0.2.0

package/app/document.ts

@@ -0,0 +1,500 @@
+import { Color, Euler, Vector2, Vector3, type Object3D } from 'three';
+import {
+  Registry,
+  elementType,
+  getAttachmentDef,
+  isArrayType,
+  type Component,
+  type CompiledScene,
+  type EnumDef,
+  type PropType,
+  type PropertyType,
+  type SceneGraph,
+} from '@scenoco-three/core';
+import type { NodeOrigin, SceneProvenance } from '@scenoco-three/compiler';
+import type { EditOp, EditTarget } from '../src/protocol.js';
+import { UndoStack } from './commands.js';
+
+export type TransformChannel = 'position' | 'rotation' | 'scale';
+type Scalar = number | boolean | string | number[];
+type AttrMap = Record<string, Scalar>;
+
+/** A node's attachment slot as the inspector needs it. */
+export interface AttachmentView {
+  slot: number;
+  tag: string;
+  attrs: AttrMap;
+  /** Inline attr props are editable (authored scene node, not src-loaded). */
+  editable: boolean;
+  /** `src=` file the attachment was loaded from (props read-only, src editable), else null. */
+  src: string | null;
+}
+
+/**
+ * The editable model of the loaded scene and the single funnel for every change.
+ *
+ * Each mutator builds an undoable command that writes to **both** the live
+ * Three.js object (so the viewport updates) **and** the compiled scene (the
+ * serialization source of truth). Net edits to save are derived by diffing the
+ * live compiled scene against a snapshot taken at load — so undo/redo, which
+ * rewinds the compiled scene, is reflected automatically with no extra bookkeeping.
+ */
+export class SceneDocument {
+  private readonly compiled: CompiledScene;
+  /** Pristine copy at load — diffed against `compiled` to produce save edits. */
+  private original: CompiledScene;
+  private readonly undo: UndoStack;
+  private readonly listeners = new Set<() => void>();
+  /** Attachment pool indices this document created via copy-on-write (mutate in place). */
+  private readonly cowAttachments = new Set<number>();
+  /** `src` edits (prefab instance / material) — no compiled home, tracked explicitly. */
+  private readonly srcEdits = new Map<string, EditOp>();
+
+  constructor(
+    private readonly graph: SceneGraph,
+    private readonly provenance?: SceneProvenance,
+  ) {
+    this.compiled = graph.compiled;
+    this.original = structuredClone(graph.compiled);
+    this.undo = new UndoStack(() => this.emit());
+  }
+
+  // ── editability (driven by provenance) ─────────────────────────────────────────
+
+  /** Where a node came from — authored scene, a prefab instance root, or prefab-internal. */
+  nodeOrigin(node: Object3D): NodeOrigin {
+    const i = this.graph.nodeIndexOf.get(node);
+    return (i !== undefined && this.provenance?.nodes[i]) || { kind: 'scene' };
+  }
+  /** Transform is editable on authored nodes and prefab-instance roots (their own override). */
+  canEditTransform(node: Object3D): boolean {
+    const k = this.nodeOrigin(node).kind;
+    return k === 'scene' || k === 'prefab-root';
+  }
+  /** Components are editable only on authored scene nodes. */
+  canEditComponents(node: Object3D): boolean {
+    return this.nodeOrigin(node).kind === 'scene';
+  }
+  /** The prefab `src` of a prefab-instance root, else undefined. */
+  prefabSrc(node: Object3D): string | undefined {
+    const o = this.nodeOrigin(node);
+    return o.kind === 'prefab-root' ? o.src : undefined;
+  }
+  private attachmentSrcOf(poolIndex: number): string | null {
+    return this.provenance?.attachments[poolIndex] ?? null;
+  }
+
+  // ── subscription ───────────────────────────────────────────────────────────
+
+  onChange(cb: () => void): () => void {
+    this.listeners.add(cb);
+    return () => this.listeners.delete(cb);
+  }
+  private emit(): void {
+    for (const cb of this.listeners) cb();
+  }
+
+  get canUndo(): boolean {
+    return this.undo.canUndo;
+  }
+  get canRedo(): boolean {
+    return this.undo.canRedo;
+  }
+  /** Any unsaved change (cheap: scenes are small). */
+  get isDirty(): boolean {
+    return this.netEdits().length > 0;
+  }
+
+  undoLast(): void {
+    this.undo.undo();
+  }
+  redoLast(): void {
+    this.undo.redo();
+  }
+
+  // ── transform edits ──────────────────────────────────────────────────────────
+
+  /** Set a node's position/scale (world units) or rotation (radians, XYZ). */
+  setTransform(node: Object3D, channel: TransformChannel, value: number[], opts?: { coalesce?: boolean }): void {
+    if (!this.canEditTransform(node)) return;
+    const i = this.graph.nodeIndexOf.get(node);
+    if (i === undefined) return;
+    const t = this.compiled.nodes[i]!.transform;
+    const prev = t[channel].slice();
+    const next = value.slice();
+    if (numbersEqual(prev, next)) return; // no-op (e.g. an unchanged channel after a drag)
+    this.undo.run({
+      label: `${channel} ${node.name || node.type}`,
+      coalesceKey: opts?.coalesce ? `node:${i}:${channel}` : undefined,
+      apply: () => {
+        t[channel] = next.slice();
+        applyTransform(node, channel, next);
+      },
+      invert: () => {
+        t[channel] = prev.slice();
+        applyTransform(node, channel, prev);
+      },
+    });
+  }
+
+  setVisible(node: Object3D, value: boolean): void {
+    if (!this.canEditTransform(node)) return;
+    const i = this.graph.nodeIndexOf.get(node);
+    if (i === undefined) return;
+    const t = this.compiled.nodes[i]!.transform;
+    const prev = t.visible;
+    if (prev === value) return;
+    this.undo.run({
+      label: `visible ${node.name || node.type}`,
+      apply: () => {
+        t.visible = value;
+        node.visible = value;
+      },
+      invert: () => {
+        t.visible = prev;
+        node.visible = prev;
+      },
+    });
+  }
+
+  // ── component property edits ──────────────────────────────────────────────────
+
+  /** Set a scalar/vector/color/bool/string `@property` in compiled form. */
+  setComponentProp(
+    component: Component,
+    name: string,
+    value: number | boolean | string | number[],
+    opts?: { coalesce?: boolean },
+  ): void {
+    const ci = this.graph.componentIndexOf.get(component);
+    if (ci === undefined) return;
+    const cc = this.compiled.components[ci]!;
+    if ((this.provenance?.nodes[cc.node]?.kind ?? 'scene') !== 'scene') return; // prefab content read-only
+    const meta = Registry.getComponent(cc.type)?.meta.properties.get(name);
+    if (!meta) return;
+    const elem = elementType(meta.type);
+
+    const field = component as unknown as Record<string, unknown>;
+    const had = name in cc.props;
+    if (had && valuesEqual(cc.props[name], value)) return; // no-op
+    const prevCompiled = had ? structuredClone(cc.props[name]!) : undefined;
+    const prevRuntime = cloneRuntime(field[name]);
+    const nextRuntime = toRuntime(meta.type, value);
+    this.undo.run({
+      label: `${cc.type}.${name}`,
+      coalesceKey: opts?.coalesce ? `comp:${ci}:${name}` : undefined,
+      apply: () => {
+        cc.props[name] = structuredClone(value);
+        field[name] = cloneRuntime(nextRuntime);
+      },
+      invert: () => {
+        if (had) cc.props[name] = structuredClone(prevCompiled!);
+        else delete cc.props[name];
+        field[name] = cloneRuntime(prevRuntime);
+      },
+    });
+    void elem; // reserved: array-element handling lands with array editing
+  }
+
+  // ── attachment edits (geometry / material / scene settings) ─────────────────────
+
+  /** The attachment slots on a node, with editability + src provenance for the inspector. */
+  attachmentsOf(node: Object3D): AttachmentView[] {
+    const i = this.graph.nodeIndexOf.get(node);
+    if (i === undefined) return [];
+    const sceneNode = this.nodeOrigin(node).kind === 'scene';
+    return this.compiled.nodes[i]!.attachments.map((idx, slot) => {
+      const asset = this.compiled.attachments[idx]!;
+      const src = this.attachmentSrcOf(idx);
+      return { slot, tag: asset.tag, attrs: asset.attrs as AttrMap, editable: sceneNode && src === null, src };
+    });
+  }
+
+  /** Current compiled value of an attachment attr (fresh — editors read it per change). */
+  attachmentAttr(node: Object3D, slot: number, attr: string): Scalar | undefined {
+    const i = this.graph.nodeIndexOf.get(node);
+    if (i === undefined) return undefined;
+    const idx = this.compiled.nodes[i]!.attachments[slot];
+    return idx === undefined ? undefined : (this.compiled.attachments[idx]!.attrs[attr] as Scalar | undefined);
+  }
+
+  /**
+   * Set an inline attachment attribute, **copy-on-write**: the first edit clones the
+   * pooled `CompiledAsset` into a private entry (so sibling nodes sharing it are
+   * untouched); later edits mutate the private copy in place. The live resource is
+   * rebuilt from the attachment's own builder, so it's unshared automatically.
+   */
+  setAttachmentProp(node: Object3D, slot: number, attr: string, value: Scalar, opts?: { coalesce?: boolean }): void {
+    const i = this.graph.nodeIndexOf.get(node);
+    if (i === undefined) return;
+    const cnode = this.compiled.nodes[i]!;
+    const curIdx = cnode.attachments[slot];
+    if (curIdx === undefined) return;
+    const src = this.compiled.attachments[curIdx]!;
+    if (this.nodeOrigin(node).kind !== 'scene' || this.attachmentSrcOf(curIdx) !== null) return; // read-only
+    const tag = src.tag;
+    const reattach = (attrs: AttrMap) => getAttachmentDef(tag)?.make(attrs).attach({ node });
+
+    if (this.cowAttachments.has(curIdx)) {
+      // Already our private copy — mutate in place.
+      const asset = src;
+      const had = attr in asset.attrs;
+      if (had && valuesEqual(asset.attrs[attr], value)) return;
+      const prev = had ? structuredClone(asset.attrs[attr]!) : undefined;
+      this.undo.run({
+        label: `${tag}.${attr}`,
+        coalesceKey: opts?.coalesce ? `att:${curIdx}:${attr}` : undefined,
+        apply: () => {
+          asset.attrs[attr] = structuredClone(value);
+          reattach(asset.attrs as AttrMap);
+        },
+        invert: () => {
+          if (had) asset.attrs[attr] = structuredClone(prev!);
+          else delete asset.attrs[attr];
+          reattach(asset.attrs as AttrMap);
+        },
+      });
+      return;
+    }
+
+    if (valuesEqual(src.attrs[attr], value)) return; // no-op against the shared value
+    const newIdx = this.compiled.attachments.length;
+    const newAttrs = { ...structuredClone(src.attrs), [attr]: structuredClone(value) };
+    this.undo.run({
+      label: `${tag}.${attr}`,
+      coalesceKey: opts?.coalesce ? `att:slot:${i}:${slot}:${attr}` : undefined,
+      apply: () => {
+        this.compiled.attachments[newIdx] = { tag, attrs: newAttrs };
+        cnode.attachments[slot] = newIdx;
+        this.cowAttachments.add(newIdx);
+        reattach(newAttrs as AttrMap);
+      },
+      invert: () => {
+        cnode.attachments[slot] = curIdx;
+        this.cowAttachments.delete(newIdx);
+        reattach(src.attrs as AttrMap);
+      },
+    });
+  }
+
+  /** Edit a prefab-instance node's `src` (save-only — reopen to see the swapped content). */
+  setNodeSrc(node: Object3D, src: string): void {
+    const i = this.graph.nodeIndexOf.get(node);
+    if (i === undefined || this.nodeOrigin(node).kind !== 'prefab-root') return;
+    const cnode = this.compiled.nodes[i]!;
+    this.recordSrcEdit(`node:${i}:src`, { kind: 'node', nodeIndex: i, ...(cnode.id ? { id: cnode.id } : {}) }, src);
+  }
+
+  /** Edit a src-loaded attachment's `src` (save-only — reopen to see the swapped content). */
+  setAttachmentSrc(node: Object3D, slot: number, src: string): void {
+    const i = this.graph.nodeIndexOf.get(node);
+    if (i === undefined) return;
+    const idx = this.compiled.nodes[i]!.attachments[slot];
+    if (idx === undefined || this.attachmentSrcOf(idx) === null) return;
+    this.recordSrcEdit(`att:${i}:${slot}:src`, this.attachmentTarget(i, slot, this.compiled.attachments[idx]!.tag), src);
+  }
+
+  private recordSrcEdit(key: string, target: EditTarget, src: string): void {
+    const prev = this.srcEdits.get(key);
+    this.undo.run({
+      label: `src ${key}`,
+      coalesceKey: `src:${key}`,
+      apply: () => void this.srcEdits.set(key, { target, attr: 'src', value: src }),
+      invert: () => {
+        if (prev) this.srcEdits.set(key, prev);
+        else this.srcEdits.delete(key);
+      },
+    });
+  }
+
+  // ── persistence ───────────────────────────────────────────────────────────────
+
+  /** The minimal set of changed attributes vs. the loaded source, for surgical save. */
+  netEdits(): EditOp[] {
+    const out: EditOp[] = [];
+    this.compiled.nodes.forEach((node, i) => {
+      const orig = this.original.nodes[i]!;
+      const target = (): EditTarget => ({ kind: 'node', nodeIndex: i, ...(node.id ? { id: node.id } : {}) });
+      if (!numbersEqual(node.transform.position, orig.transform.position))
+        out.push({ target: target(), attr: 'position', value: node.transform.position.slice() });
+      if (!numbersEqual(node.transform.rotation, orig.transform.rotation))
+        out.push({ target: target(), attr: 'rotation', value: node.transform.rotation.slice() });
+      if (!numbersEqual(node.transform.scale, orig.transform.scale))
+        out.push({ target: target(), attr: 'scale', value: node.transform.scale.slice() });
+      if (node.transform.visible !== orig.transform.visible)
+        out.push({ target: target(), attr: 'visible', value: node.transform.visible });
+    });
+    this.compiled.components.forEach((comp, ci) => {
+      const orig = this.original.components[ci]!;
+      for (const [name, value] of Object.entries(comp.props)) {
+        if (!isSavableScalar(value) || valuesEqual(value, orig.props[name])) continue;
+        out.push({ target: this.componentTarget(ci), attr: name, value: value as number | boolean | string | number[] });
+      }
+    });
+    // Attachment attrs: a slot whose pool index changed (copy-on-write) vs. its original asset.
+    this.compiled.nodes.forEach((node, i) => {
+      const orig = this.original.nodes[i]!;
+      node.attachments.forEach((attIdx, slot) => {
+        const origIdx = orig.attachments[slot];
+        if (origIdx === undefined || attIdx === origIdx) return;
+        const cur = this.compiled.attachments[attIdx]!;
+        const base = this.original.attachments[origIdx]!;
+        for (const [attr, val] of Object.entries(cur.attrs)) {
+          if (!isSavableScalar(val) || valuesEqual(val, base.attrs[attr])) continue;
+          out.push({ target: this.attachmentTarget(i, slot, cur.tag), attr, value: val as number | boolean | string | number[] });
+        }
+      });
+    });
+    // `src` edits (prefab instance / material) have no compiled home — tracked explicitly.
+    out.push(...this.srcEdits.values());
+    return out;
+  }
+
+  /** Mark the current state as the saved baseline (keeps the undo stack). */
+  markSaved(): void {
+    this.original = structuredClone(this.compiled);
+    this.srcEdits.clear();
+    this.emit();
+  }
+
+  /**
+   * Re-apply a set of edits onto this (freshly loaded) document — used to preserve
+   * the user's unsaved changes after a `src=` dependency reload. Resolution is by
+   * id/tag/ordinal (best-effort): edits whose target no longer exists are dropped.
+   */
+  applyEdits(ops: EditOp[]): void {
+    for (const op of ops) this.applyEdit(op);
+  }
+
+  private applyEdit(op: EditOp): void {
+    const t = op.target;
+    if (t.kind === 'node') {
+      const node = this.nodeById(t.id);
+      if (!node) return;
+      if (op.attr === 'src') this.setNodeSrc(node, op.value as string);
+      else if (op.attr === 'visible') this.setVisible(node, op.value as boolean);
+      else if (op.attr === 'position' || op.attr === 'rotation' || op.attr === 'scale')
+        this.setTransform(node, op.attr, op.value as number[]);
+    } else if (t.kind === 'component') {
+      const comp = this.componentByTarget(t.nodeId, t.type, t.ordinal);
+      if (comp) this.setComponentProp(comp, op.attr, op.value);
+    } else {
+      const node = t.root ? this.graph.nodeByIndex[this.compiled.root] : this.nodeById(t.nodeId);
+      if (!node) return;
+      const slot = this.attachmentSlot(node, t.tag, t.ordinal);
+      if (slot === undefined) return;
+      if (op.attr === 'src') this.setAttachmentSrc(node, slot, op.value as string);
+      else this.setAttachmentProp(node, slot, op.attr, op.value);
+    }
+  }
+
+  private nodeById(id?: string): Object3D | undefined {
+    if (!id) return undefined;
+    const i = this.compiled.nodes.findIndex((n) => n.id === id);
+    return i >= 0 ? this.graph.nodeByIndex[i] : undefined;
+  }
+  private componentByTarget(nodeId: string | undefined, type: string, ordinal: number): Component | undefined {
+    if (!nodeId) return undefined;
+    const ni = this.compiled.nodes.findIndex((n) => n.id === nodeId);
+    if (ni < 0) return undefined;
+    const ci = this.compiled.nodes[ni]!.components.filter((x) => this.compiled.components[x]!.type === type)[ordinal];
+    if (ci === undefined) return undefined;
+    for (const [inst, idx] of this.graph.componentIndexOf) if (idx === ci) return inst;
+    return undefined;
+  }
+  private attachmentSlot(node: Object3D, tag: string, ordinal: number): number | undefined {
+    const ni = this.graph.nodeIndexOf.get(node);
+    if (ni === undefined) return undefined;
+    const atts = this.compiled.nodes[ni]!.attachments;
+    let count = 0;
+    for (let slot = 0; slot < atts.length; slot++) {
+      if (this.compiled.attachments[atts[slot]!]!.tag !== tag) continue;
+      if (count === ordinal) return slot;
+      count++;
+    }
+    return undefined;
+  }
+
+  private attachmentTarget(i: number, slot: number, tag: string): EditTarget {
+    const node = this.compiled.nodes[i]!;
+    const ordinal = node.attachments.slice(0, slot + 1).filter((idx) => this.compiled.attachments[idx]!.tag === tag).length - 1;
+    return {
+      kind: 'attachment',
+      nodeIndex: i,
+      ...(node.id ? { nodeId: node.id } : {}),
+      ...(i === this.compiled.root ? { root: true } : {}),
+      tag,
+      ordinal,
+    };
+  }
+
+  private componentTarget(ci: number): EditTarget {
+    const cc = this.compiled.components[ci]!;
+    const node = this.compiled.nodes[cc.node]!;
+    const sameType = node.components.filter((x) => this.compiled.components[x]!.type === cc.type);
+    return {
+      kind: 'component',
+      componentIndex: ci,
+      nodeIndex: cc.node,
+      ...(node.id ? { nodeId: node.id } : {}),
+      type: cc.type,
+      ordinal: sameType.indexOf(ci),
+    };
+  }
+}
+
+// ── value helpers ────────────────────────────────────────────────────────────────
+
+function applyTransform(node: Object3D, channel: TransformChannel, v: number[]): void {
+  if (channel === 'rotation') node.rotation.set(v[0]!, v[1]!, v[2]!);
+  else node[channel].fromArray(v);
+}
+
+/** Compiled scalar → the Three.js-typed value a component field holds (mirrors instantiate). */
+function toRuntime(type: PropertyType, value: number | boolean | string | number[]): unknown {
+  const elem = elementType(type);
+  if (isArrayType(type)) return (value as number[]).map((v) => toRuntimeScalar(elem, v));
+  return toRuntimeScalar(elem, value as number | boolean | string | number[]);
+}
+function toRuntimeScalar(elem: PropType | { new (): unknown } | EnumDef, value: unknown): unknown {
+  switch (elem) {
+    case 'vec2':
+      return new Vector2().fromArray(value as number[]);
+    case 'vec3':
+      return new Vector3().fromArray(value as number[]);
+    case 'euler': {
+      const e = value as number[];
+      return new Euler(e[0]!, e[1]!, e[2]!);
+    }
+    case 'color':
+      return new Color(value as number);
+    default:
+      return value;
+  }
+}
+
+/** Clone a runtime value so undo snapshots don't alias live Three.js objects. */
+function cloneRuntime(v: unknown): unknown {
+  if (v == null) return v;
+  const o = v as { isVector3?: boolean; isVector2?: boolean; isColor?: boolean; isEuler?: boolean; clone?: () => unknown };
+  if (o.isVector2 || o.isVector3 || o.isColor) return o.clone!();
+  if (o.isEuler) {
+    const e = v as Euler;
+    return new Euler(e.x, e.y, e.z, e.order);
+  }
+  return Array.isArray(v) ? v.map(cloneRuntime) : v;
+}
+
+const isSavableScalar = (v: unknown): boolean =>
+  typeof v === 'number' ||
+  typeof v === 'boolean' ||
+  typeof v === 'string' ||
+  (Array.isArray(v) && v.every((x) => typeof x === 'number'));
+
+function numbersEqual(a: number[], b: number[]): boolean {
+  return a.length === b.length && a.every((x, i) => x === b[i]);
+}
+function valuesEqual(a: unknown, b: unknown): boolean {
+  if (Array.isArray(a) && Array.isArray(b)) return numbersEqual(a as number[], b as number[]);
+  return a === b;
+}

package/app/gizmo.ts

@@ -0,0 +1,75 @@
+import type { Camera, Object3D, Scene } from 'three';
+import { TransformControls } from 'three/examples/jsm/controls/TransformControls.js';
+
+export type GizmoMode = 'translate' | 'rotate' | 'scale';
+
+export interface GizmoOptions {
+  /** Live refresh while dragging (e.g. update the inspector numbers). */
+  onObjectChange?: () => void;
+  /** Drag finished — commit the object's new transform as one undoable edit. */
+  onCommit?: (object: Object3D) => void;
+}
+
+/**
+ * Thin wrapper over three's `TransformControls` (translate/rotate/scale handles).
+ * The control mutates the attached `Object3D` directly during a drag; on drag end
+ * we hand the object to `onCommit`, which records a single undoable edit (the
+ * compiled scene was untouched during the drag, so it still holds the pre-drag
+ * value — exactly the right "before" for undo).
+ *
+ * Camera controls read `dragging` to stand down while a handle is being dragged,
+ * so the fly camera and the gizmo never fight over the same pointer/touch.
+ */
+export class Gizmo {
+  private readonly controls: TransformControls;
+  private readonly helper: Object3D;
+
+  constructor(
+    camera: Camera,
+    domElement: HTMLElement,
+    private readonly scene: Scene,
+    touch: boolean,
+    opts: GizmoOptions = {},
+  ) {
+    this.controls = new TransformControls(camera, domElement);
+    this.controls.setSize(touch ? 1.4 : 1); // fat-finger handles on touch
+    this.helper = this.controls.getHelper();
+    this.helper.userData.scenocoEditorOnly = true; // keep it out of the Hierarchy + picking
+    scene.add(this.helper);
+
+    this.controls.addEventListener('objectChange', () => opts.onObjectChange?.());
+    this.controls.addEventListener('dragging-changed', (e) => {
+      // Fired true at drag start, false at drag end.
+      if (!e.value && this.controls.object) opts.onCommit?.(this.controls.object);
+    });
+  }
+
+  /** True while a handle is being dragged — camera controls check this to yield. */
+  get dragging(): boolean {
+    return this.controls.dragging;
+  }
+
+  setMode(mode: GizmoMode): void {
+    this.controls.setMode(mode);
+  }
+  get mode(): GizmoMode {
+    return this.controls.mode as GizmoMode;
+  }
+
+  attach(object: Object3D | null): void {
+    if (object) this.controls.attach(object);
+    else this.controls.detach();
+  }
+
+  /** True if `object` is part of the gizmo's own helper (so picks can ignore it). */
+  contains(object: Object3D): boolean {
+    for (let o: Object3D | null = object; o; o = o.parent) if (o === this.helper) return true;
+    return false;
+  }
+
+  dispose(): void {
+    this.controls.detach();
+    this.scene.remove(this.helper);
+    this.controls.dispose();
+  }
+}

package/app/index.html

@@ -0,0 +1,103 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>SceNoCo Editor</title>
+    <style>
+      html, body { margin: 0; height: 100%; background: #15181f; overflow: hidden; color: #d6e2f0; }
+      canvas { display: block; width: 100%; height: 100%; }
+      :root { --panel: rgba(20, 24, 32, 0.92); --line: #2a3344; --accent: #4af0e0; }
+      /* Each side is a slide-out drawer: a panel + a thin arrow tab that stays on
+         screen when collapsed. */
+      .sc-drawer { position: fixed; top: 0; bottom: 0; z-index: 5; display: flex;
+        transition: transform 0.22s ease; }
+      .sc-left { left: 0; }
+      .sc-right { right: 0; }
+      .sc-left.collapsed { transform: translateX(calc(-100% + 22px)); }
+      .sc-right.collapsed { transform: translateX(calc(100% - 22px)); }
+      .sc-panel {
+        width: 280px; height: 100%; background: var(--panel); overflow: auto;
+        font: 12px/1.5 ui-monospace, monospace; backdrop-filter: blur(6px);
+      }
+      .sc-left .sc-panel { border-right: 1px solid var(--line); }
+      .sc-right .sc-panel { border-left: 1px solid var(--line); }
+      .sc-tab {
+        flex: 0 0 22px; background: var(--panel); color: #9fe7ff; cursor: pointer;
+        border: 0; border-left: 1px solid var(--line); border-right: 1px solid var(--line);
+        font-size: 15px; display: flex; align-items: center; justify-content: center;
+      }
+      .sc-tab:hover { color: var(--accent); background: rgba(74, 240, 224, 0.1); }
+      .sc-title { padding: 8px 12px; font-weight: 700; color: #9fe7ff; letter-spacing: 0.06em;
+        text-transform: uppercase; font-size: 11px; border-bottom: 1px solid var(--line); position: sticky; top: 0;
+        background: var(--panel); }
+      .sc-node { display: flex; align-items: center; gap: 4px; min-height: 28px; padding: 2px 8px; cursor: pointer;
+        white-space: nowrap; overflow: hidden; }
+      .sc-node:hover { background: rgba(74, 240, 224, 0.08); }
+      .sc-node.sel { background: rgba(74, 240, 224, 0.18); color: #eafdff; }
+      .sc-node .ty { color: #6f93b8; }
+      .sc-caret { flex: 0 0 14px; width: 14px; text-align: center; color: #6f93b8; cursor: pointer; user-select: none; }
+      .sc-inspector { padding: 8px 10px; }
+      .sc-sec { display: flex; align-items: center; gap: 4px; margin: 10px 0 4px; color: #9fe7ff; font-weight: 700;
+        border-bottom: 1px solid var(--line); padding-bottom: 3px; cursor: pointer; user-select: none;
+        text-transform: uppercase; letter-spacing: 0.04em; font-size: 11px; }
+      .sc-sec.sc-sec-plain { cursor: default; }
+      .sc-sec .sc-caret { flex: 0 0 12px; width: 12px; }
+      .sc-sec-body { padding: 1px 0 2px; }
+      .sc-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 30px; padding: 2px 0; }
+      .sc-row .k { color: #8fa6c4; flex: 0 0 auto; }
+      .sc-row .v { color: #e7f0fb; text-align: right; word-break: break-word; display: flex; align-items: center;
+        justify-content: flex-end; gap: 4px; }
+      .sc-empty { color: #6f8099; padding: 12px 0; }
+      /* editable controls — 16px font avoids iOS tap-zoom; generous hit areas for touch */
+      .sc-input { background: #0e1219; color: #e7f0fb; border: 1px solid var(--line); border-radius: 5px;
+        padding: 4px 6px; font: 16px ui-monospace, monospace; min-height: 28px; box-sizing: border-box; }
+      .sc-input:focus { outline: none; border-color: var(--accent); }
+      .sc-num { width: 64px; text-align: right; }
+      .sc-axes { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
+      .sc-axis { display: flex; align-items: center; gap: 2px; }
+      .sc-axis-k { color: #6f93b8; font-size: 11px; width: 12px; text-align: center; }
+      .sc-scrub { cursor: ew-resize; touch-action: none; }
+      .sc-toggle { width: 22px; height: 22px; accent-color: var(--accent); }
+      .sc-color { display: flex; align-items: center; gap: 5px; }
+      .sc-swatch { width: 30px; height: 28px; padding: 0; border: 1px solid var(--line); border-radius: 5px;
+        background: none; cursor: pointer; }
+      .sc-hex { width: 78px; }
+      .sc-select { min-width: 96px; cursor: pointer; }
+      #hint { position: fixed; bottom: 10px; left: 50%; transform: translateX(-50%); padding: 6px 14px;
+        border-radius: 8px; background: rgba(0,0,0,.55); color: #9fb5cf; font: 11px ui-monospace, monospace;
+        pointer-events: none; }
+      /* floating toolbars (touch-reachable, top center): play panel + movement panel */
+      .sc-toolbars { position: fixed; top: 10px; left: 50%; transform: translateX(-50%); z-index: 6;
+        display: flex; align-items: flex-start; gap: 8px; }
+      .sc-toolbar { display: flex; align-items: center; gap: 2px; padding: 5px; border-radius: 12px;
+        background: var(--panel); border: 1px solid var(--line); backdrop-filter: blur(6px); }
+      .sc-tbtn { position: relative; width: 40px; height: 40px; display: flex; align-items: center;
+        justify-content: center; padding: 0; border: 1px solid transparent; border-radius: 9px;
+        background: transparent; color: #cfe0f2; cursor: pointer; }
+      .sc-tbtn svg { width: 22px; height: 22px; display: block; }
+      .sc-tbtn:hover:not(:disabled) { background: rgba(74, 240, 224, 0.12); color: #eafdff; }
+      .sc-tbtn.active { background: rgba(74, 240, 224, 0.2); border-color: var(--accent); color: #eafdff; }
+      .sc-tbtn:disabled { opacity: 0.3; cursor: default; }
+      .sc-tbtn.sc-save.dirty { color: var(--accent); }
+      .sc-tbtn.sc-save.dirty::after { content: ''; position: absolute; top: 7px; right: 7px;
+        width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
+      .sc-tbtn.sc-save.saving { opacity: 0.5; }
+      .sc-tsep { width: 1px; height: 24px; background: var(--line); margin: 0 3px; }
+      /* conflict banner: unsaved edits vs. an external file change */
+      #sc-conflict { position: fixed; top: 62px; left: 50%; transform: translateX(-50%); z-index: 7;
+        display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px;
+        background: rgba(40, 26, 26, 0.96); border: 1px solid #6b3a3a; color: #ffd9d9;
+        font: 13px ui-monospace, monospace; backdrop-filter: blur(6px); }
+      #sc-conflict button { border: 1px solid #6b3a3a; border-radius: 7px; background: transparent;
+        color: #ffd9d9; padding: 5px 10px; cursor: pointer; font: 12px ui-monospace, monospace; }
+      #sc-conflict button:first-of-type { background: var(--accent); color: #0e1219; border-color: var(--accent); }
+      #sc-conflict button:hover { filter: brightness(1.1); }
+    </style>
+  </head>
+  <body>
+    <canvas id="app"></canvas>
+    <div id="hint">tap to select · right-drag look · WASD move · Q/E down/up · G/R/Y gizmo move/rotate/scale</div>
+    <script type="module" src="/main.ts"></script>
+  </body>
+</html>