@scenoco-three/editor 0.5.0 → 0.5.4

package/app/globals.d.ts

@@ -0,0 +1,9 @@
+/**
+ * The websocket path, substituted into the page at serve time by the editor's Vite config.
+ *
+ * A constant rather than an import because the page and the server share `src/protocol.ts`, and
+ * `src/` is not published — the package ships `dist` and `app`. Everything else the page borrows
+ * from that module is a type, which erases; this was the only value, so it comes in through
+ * `define` and the import can be type-only.
+ */
+declare const __SCENOCO_WS_PATH__: string;

package/app/main.ts

@@ -9,12 +9,15 @@ import { pickAt } from './picking.js';
 import { EditorSession, type FocusTarget } from './session.js';
 import { mountEditorUI } from './ui-react/mount.js';
 import type { EditorUIHandle } from './ui-react/types.js';
-import {
-  WS_PATH,
-  type EditorCommand,
-  type EditorPush,
-  type EditorResponse,
-  type EditorResult,
+// Type-only, and deliberately so: `import type` is erased before the browser ever sees this, so
+// the page never asks for a module out of `src/` — which the published package does not ship.
+// The one *value* the page needed from there, the websocket path, arrives as a build-time
+// constant instead. See `__SCENOCO_WS_PATH__` in app/globals.d.ts.
+import type {
+  EditorCommand,
+  EditorPush,
+  EditorResponse,
+  EditorResult,
 } from '../src/protocol.js';
 
 /**
@@ -315,7 +318,7 @@ async function save(): Promise<void> {
  * write path into someone's source is a write their editor, diff and undo never saw.
  */
 function connect(): void {
-  const socket = new WebSocket(`ws://${location.host}${WS_PATH}`);
+  const socket = new WebSocket(`ws://${location.host}${__SCENOCO_WS_PATH__}`);
   socket.addEventListener('message', async (event) => {
     const message = JSON.parse(String(event.data)) as EditorCommand | EditorPush;
     if ('push' in message) {

package/app/session.ts

@@ -98,6 +98,14 @@ export class EditorSession {
     this.sceneClass = SceneClass ?? stageFor(PrefabClass!);
     this.scene = await SceneManager.load(this.sceneClass);
     this.resize(); // the scene's camera only exists now, and it is the one play mode renders through
+
+    // One draw to make the scene's render settings current — which is what asks for the post
+    // chain — then wait for it. Without this the first `screenshot` after opening shows no post
+    // passes, because the composer is a dynamic import that has not landed yet, and "no bloom"
+    // is indistinguishable from "the <Bloom> I just wrote does not work".
+    this.render();
+    await this.engine.effectsReady();
+
     this.onChange?.();
   }
 
@@ -200,10 +208,16 @@ export class EditorSession {
     this.mode = 'play';
     this.playing = true;
     SceneManager.resetFrameClock();
+    // The toolbar reads `mode` and `playing`, and the React chrome only re-reads on this call.
+    // `stop` always raised it and these two never did, so a scene driven into play mode from the
+    // MCP kept a toolbar insisting it was stopped: Play still offered, Pause and Step still
+    // hidden, while the scene ran behind them. Whoever is watching has to be able to trust it.
+    this.onChange?.();
   }
 
   pause(): void {
     this.playing = false;
+    this.onChange?.();
   }
 
   /**
@@ -255,7 +269,10 @@ export class EditorSession {
 
   render(camera: Camera = this.renderCamera()): void {
     if (!this.scene) return;
-    this.renderer.render(this.scene, camera);
+    // Through the engine, not `renderer.render`: the scene's render document — tone mapping,
+    // bloom, vignette, fog — is applied there, and a viewport that skips it is not showing the
+    // scene the game draws.
+    this.engine.renderScene(this.scene, camera);
     // Only in edit mode: play renders through the scene's own camera, where the UI is already
     // in front of it, and a run has to show exactly what the game shows — once.
     if (this.showUi && this.mode === 'edit') this.renderUiOverlay();
@@ -358,11 +375,13 @@ export class EditorSession {
     camera.aspect = frame.width / frame.height;
     camera.updateProjectionMatrix();
 
+    // Buffer *and* effect chain move together, or the post passes run at the wrong scale. The
+    // canvas is read while it is still that size, then everything goes back.
     const { width, height } = this.renderer.domElement;
-    this.renderer.setSize(frame.width, frame.height, false);
-    this.renderer.render(this.scene, camera);
+    this.engine.setFrameSize(frame.width, frame.height);
+    this.engine.renderScene(this.scene, camera);
     const dataUrl = this.canvas.toDataURL('image/png');
-    this.renderer.setSize(width, height, false);
+    this.engine.setFrameSize(width, height);
 
     // Put the camera back: a capture is an observation, and an observation that moves the thing
     // it observed is not one.
@@ -429,11 +448,11 @@ export class EditorSession {
           await this.stop();
           break;
         case 'step':
-          for (let i = 0; i < (step.frames ?? 1); i++) this.step(step.dt ?? 1 / 60);
+          await this.stepVisibly(step.frames ?? 1, step.dt ?? 1 / 60);
           break;
         case 'press':
           this.key('keydown', step.key);
-          this.step();
+          await this.stepVisibly(1);
           this.key('keyup', step.key);
           break;
         case 'keyDown':
@@ -460,6 +479,27 @@ export class EditorSession {
     return out;
   }
 
+  /**
+   * Advance the scene where someone can watch it happen.
+   *
+   * `step` only ticks; the editor's own loop is what draws, and it does not get a turn while a
+   * batch is running — the whole batch is one synchronous task. Left that way, a person watching
+   * the page sees a frozen canvas and then a jump to the final state, which is indistinguishable
+   * from the editor having hung. So this draws each frame and hands the browser a chance to paint.
+   *
+   * Yielding every fourth frame rather than every frame: painting more often than that buys no
+   * legibility and a long batch would otherwise run at wall-clock speed. Determinism is untouched
+   * either way — the step is a fixed `dt`, so when the frames are drawn changes nothing about what
+   * they contain.
+   */
+  private async stepVisibly(frames: number, dt = 1 / 60): Promise<void> {
+    for (let i = 0; i < frames; i++) {
+      this.step(dt);
+      this.render();
+      if (i % 4 === 3) await new Promise((resolve) => requestAnimationFrame(() => resolve(null)));
+    }
+  }
+
   /**
    * Synthetic input is a real DOM event.
    *

package/dist/server.js

@@ -66,6 +66,9 @@ export async function startEditorServer(options = {}) {
         // One `three` across the editor and the project, or `instanceof` quietly fails across two
         // copies and every raycast hit looks like nothing at all.
         resolve: { dedupe: ['three'] },
+        // The page cannot import this from `src/`: that directory is not published. See
+        // app/globals.d.ts.
+        define: { __SCENOCO_WS_PATH__: JSON.stringify(WS_PATH) },
         optimizeDeps: { include: ['react', 'react-dom/client'] },
     });
     let vite = await serve(chosen.port);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scenoco-three/editor",
-  "version": "0.5.0",
+  "version": "0.5.4",
   "description": "Local visual editor for SceNoCo scenes, with an observation-only MCP server so an agent can see and drive the same live scene.",
   "type": "module",
   "license": "MIT",
@@ -45,8 +45,8 @@
   },
   "dependencies": {
     "@modelcontextprotocol/sdk": "^1.12.0",
-    "@scenoco-three/compiler": "^0.5.0",
-    "@scenoco-three/core": "^0.5.0",
+    "@scenoco-three/compiler": "^0.5.4",
+    "@scenoco-three/core": "^0.5.4",
     "@vitejs/plugin-react": "^6.0.3",
     "lucide-react": "^0.468.0",
     "react": "^18.3.1",
@@ -65,4 +65,4 @@
     "@types/react-dom": "^18.3.7",
     "@types/ws": "^8.5.13"
   }
-}
+}