@pascal-app/editor 1.0.4 → 1.0.6

package/src/hooks/use-auto-save.integration.test.tsx

@@ -1,8 +1,11 @@
 import { afterEach, expect, test } from 'bun:test'
 import {
   BuildingNode,
+  beginScenePreview,
   ColumnNode,
   clearSceneHistory,
+  endScenePreview,
+  isScenePreviewing,
   LevelNode,
   SiteNode,
   useScene,
@@ -16,6 +19,7 @@ const previousScene = useScene.getState()
 let renderer: Awaited<ReturnType<typeof create>> | undefined
 
 afterEach(async () => {
+  endScenePreview()
   await renderer?.unmount()
   renderer = undefined
   globalThis.window = originalWindow
@@ -192,30 +196,29 @@ test('a save that came due mid-load is written once the load completes', async (
   expect(statuses.at(-1)).toBe('saved')
 })
 
-test.each([
-  'undo',
-  'redo',
-  'delete',
-] as const)('autosave permits a 5 to 4 single-node %s', async (action) => {
-  const { writes, statuses } = await mount(5)
-  if (action === 'undo') {
-    useScene.setState(graph(4))
-    clearSceneHistory()
-    useScene.setState(graph(5))
-    useScene.temporal.getState().undo()
-  } else if (action === 'redo') {
-    useScene.getState().deleteNode('column_autosave_1')
-    useScene.temporal.getState().undo()
-    useScene.temporal.getState().redo()
-  } else {
-    useScene.getState().deleteNode('column_autosave_1')
-  }
-  expect(Object.keys(useScene.getState().nodes)).toHaveLength(4)
-  await Bun.sleep(1100)
-  expect(statuses).not.toContain('error')
-  expect(writes).toEqual([4])
-  expect(statuses.at(-1)).toBe('saved')
-})
+test.each(['undo', 'redo', 'delete'] as const)(
+  'autosave permits a 5 to 4 single-node %s',
+  async (action) => {
+    const { writes, statuses } = await mount(5)
+    if (action === 'undo') {
+      useScene.setState(graph(4))
+      clearSceneHistory()
+      useScene.setState(graph(5))
+      useScene.temporal.getState().undo()
+    } else if (action === 'redo') {
+      useScene.getState().deleteNode('column_autosave_1')
+      useScene.temporal.getState().undo()
+      useScene.temporal.getState().redo()
+    } else {
+      useScene.getState().deleteNode('column_autosave_1')
+    }
+    expect(Object.keys(useScene.getState().nodes)).toHaveLength(4)
+    await Bun.sleep(1100)
+    expect(statuses).not.toContain('error')
+    expect(writes).toEqual([4])
+    expect(statuses.at(-1)).toBe('saved')
+  },
+)
 
 test('autosave permits a single-node deletion on exit', async () => {
   const { writes, statuses } = await mount(5)
@@ -252,20 +255,20 @@ test('collaboration scaffold deletion waits for persistence and reports saved',
   expect(statuses).toEqual(['pending', 'saving', 'saved'])
 })
 
-test.each([
-  'pagehide',
-  'unmount',
-])('collaboration scaffold deletion still flushes on %s', async (event) => {
-  const { writes, statuses } = await mount(78, false)
-  useScene.setState(graph(4))
-  if (event === 'pagehide') window.dispatchEvent(new Event(event))
-  else {
-    await renderer!.unmount()
-    renderer = undefined
-  }
-  expect(statuses).not.toContain('error')
-  expect(writes).toEqual([4])
-})
+test.each(['pagehide', 'unmount'])(
+  'collaboration scaffold deletion still flushes on %s',
+  async (event) => {
+    const { writes, statuses } = await mount(78, false)
+    useScene.setState(graph(4))
+    if (event === 'pagehide') window.dispatchEvent(new Event(event))
+    else {
+      await renderer!.unmount()
+      renderer = undefined
+    }
+    expect(statuses).not.toContain('error')
+    expect(writes).toEqual([4])
+  },
+)
 
 test('collaboration guard exemption preserves preview pause and resume', async () => {
   const { writes, statuses, update } = await mount(78, false)
@@ -309,3 +312,58 @@ test('collaboration callback failures still report error', async () => {
   expect(writes).toEqual([4])
   expect(statuses).toEqual(['pending', 'saving', 'error'])
 })
+
+// A scene preview (the scene as it was before an agent's turn, shown while a control is held) is not
+// an edit: it must reach neither the server nor the exit flush, and must not leave a save armed.
+const beforeLastEdit = () => useScene.temporal.getState().pastStates.at(-1) as never
+
+test('a held preview saves nothing and leaves nothing to save', async () => {
+  const { writes } = await mount(12)
+  agentAddsColumn()
+  await Bun.sleep(1100)
+  expect(writes).toEqual([13])
+
+  const preview = beginScenePreview(beforeLastEdit())
+  expect(Object.keys(useScene.getState().nodes)).toHaveLength(12)
+  await Bun.sleep(1100)
+  preview?.end()
+  await Bun.sleep(1100)
+
+  expect(writes).toEqual([13])
+})
+
+test('an edit that came due under a held preview is written after it, from the live scene', async () => {
+  const { writes } = await mount(12)
+  agentAddsColumn()
+  const preview = beginScenePreview(beforeLastEdit())
+  await Bun.sleep(1100)
+  expect(writes).toEqual([])
+
+  preview?.end()
+  await Bun.sleep(10)
+
+  expect(writes).toEqual([13])
+})
+
+test('leaving the page under a held preview writes the live scene, not the preview', async () => {
+  const { writes } = await mount(12)
+  agentAddsColumn()
+  beginScenePreview(beforeLastEdit())
+
+  window.dispatchEvent(new Event('pagehide'))
+
+  expect(isScenePreviewing()).toBe(false)
+  expect(writes).toEqual([13])
+})
+
+test('the save shortcut under a held preview writes the live scene', async () => {
+  const { writes, controls } = await mount(12)
+  agentAddsColumn()
+  beginScenePreview(beforeLastEdit())
+
+  controls.saveNow()
+  await Bun.sleep(0)
+
+  expect(isScenePreviewing()).toBe(false)
+  expect(writes).toEqual([13])
+})

package/src/hooks/use-auto-save.ts

@@ -1,6 +1,11 @@
 'use client'
 
-import { useScene } from '@pascal-app/core'
+import {
+  endScenePreview,
+  isScenePreviewing,
+  subscribeScenePreview,
+  useScene,
+} from '@pascal-app/core'
 import { useCallback, useEffect, useRef } from 'react'
 import { getSavedSceneDocument, type SceneGraph, saveSceneToLocalStorage } from '../lib/scene'
 
@@ -164,6 +169,11 @@ export function useAutoSave({
     let lastInstalledPluginsRef = useScene.getState().installedPlugins
 
     async function executeSave() {
+      // A held scene preview is on screen, not in the document: wait for it to end.
+      if (isScenePreviewing()) {
+        pendingSaveRef.current = true
+        return
+      }
       if (isLoadingSceneRef.current || isVersionPreviewModeRef.current) {
         pendingSaveRef.current = true
         setSaveStatus('paused')
@@ -230,6 +240,10 @@ export function useAutoSave({
         return
       }
 
+      // The store shows another state for a moment: it is not a change, and the live scene it
+      // gives back is what the last snapshot already holds.
+      if (isScenePreviewing()) return
+
       if (isVersionPreviewModeRef.current) {
         setSaveStatus('paused')
         lastNodesSnapshot = JSON.stringify(state.nodes)
@@ -279,6 +293,8 @@ export function useAutoSave({
     // would otherwise drop the change entirely. `pagehide` fires in cases
     // (mobile Safari, bfcache) where `beforeunload` does not.
     function flushOnExit() {
+      // What is on screen may be a preview: write the live scene, never that.
+      endScenePreview()
       const { nodes, rootNodeIds, collections, materials, installedPlugins } =
         getSavedSceneDocument()
       const currentNodeCount = Object.keys(nodes).length
@@ -325,7 +341,15 @@ export function useAutoSave({
     window.addEventListener('beforeunload', flushOnExit)
     window.addEventListener('pagehide', flushOnExit)
 
+    // A save that came due under a held preview was deferred; the live scene is back.
+    const stopWatchingPreview = subscribeScenePreview((previewing) => {
+      if (previewing || !pendingSaveRef.current || isSavingRef.current) return
+      if (isLoadingSceneRef.current || saveTimeoutRef.current) return
+      executeSaveRef.current?.()
+    })
+
     return () => {
+      stopWatchingPreview()
       executeSaveRef.current = null
       window.removeEventListener('beforeunload', flushOnExit)
       window.removeEventListener('pagehide', flushOnExit)
@@ -370,6 +394,7 @@ export function useAutoSave({
   // in the loop. A write already in flight only arms the follow-up.
   const saveNow = useCallback(() => {
     if (isLoadingSceneRef.current) return
+    endScenePreview()
 
     if (saveTimeoutRef.current) {
       clearTimeout(saveTimeoutRef.current)

package/src/hooks/use-ceiling-events.test.ts

@@ -22,124 +22,129 @@ import useEditor from '../store/use-editor'
 import useInteractionScope from '../store/use-interaction-scope'
 import { useCeilingEvents } from './use-ceiling-events'
 
-test.each([
-  'item',
-  'procedural-item',
-])('%s ceiling placement keeps move and commit hits while an unhovered ceiling is batched', async (kind) => {
-  const previousViewer = useViewer.getState()
-  const previousEditor = useEditor.getState()
-  const previousInteraction = useInteractionScope.getState()
-  const previousScene = useScene.getState()
-  const actGlobal = globalThis as typeof globalThis & { IS_REACT_ACT_ENVIRONMENT?: boolean }
-  const previousAct = actGlobal.IS_REACT_ACT_ENVIRONMENT
-  actGlobal.IS_REACT_ACT_ENVIRONMENT = true
-  const canvas = Object.assign(new EventTarget(), {
-    getBoundingClientRect: () => ({ left: 0, top: 0, width: 100, height: 100 }),
-  }) as unknown as HTMLCanvasElement
-  const root = createRoot(canvas)
-  const camera = new PerspectiveCamera(60, 1, 0.1, 100)
-  camera.position.set(0, 1, 5)
-  camera.lookAt(0, 3, 0)
-  camera.updateMatrixWorld()
-  const level = LevelNode.parse({ id: 'level_ceiling_batch' })
-  const ceiling = CeilingNode.parse({
-    id: 'ceiling_placement_batch',
-    parentId: level.id,
-    polygon: [
-      [-5, -5],
-      [5, -5],
-      [5, 5],
-      [-5, 5],
-    ],
-  })
-  const surface = new Mesh(new PlaneGeometry(10, 10).rotateX(-Math.PI / 2), new MeshBasicMaterial())
-  surface.position.y = 3
-  surface.updateMatrixWorld(true)
-  const moves: CeilingEvent[] = []
-  const clicks: CeilingEvent[] = []
-  const onMove = (event: CeilingEvent) => moves.push(event)
-  const onClick = (event: CeilingEvent) => clicks.push(event)
-  emitter.on('ceiling:move', onMove)
-  emitter.on('ceiling:click', onClick)
-  function Placement() {
-    useCeilingEvents()
-    return null
-  }
-  const send = () => {
-    for (const type of ['pointermove', 'click']) {
-      canvas.dispatchEvent(Object.assign(new Event(type), { clientX: 55, clientY: 50, button: 0 }))
-    }
-  }
-  try {
-    sceneRegistry.nodes.set(ceiling.id, surface)
-    sceneRegistry.byType.ceiling!.add(ceiling.id)
-    useScene.setState({ nodes: { [level.id]: level, [ceiling.id]: ceiling } })
-    useViewer.setState({
-      hoveredId: null,
-      cameraDragging: false,
-      selection: { buildingId: null, levelId: level.id, zoneId: null, selectedIds: [] },
+test.each(['item', 'procedural-item'])(
+  '%s ceiling placement keeps move and commit hits while an unhovered ceiling is batched',
+  async (kind) => {
+    const previousViewer = useViewer.getState()
+    const previousEditor = useEditor.getState()
+    const previousInteraction = useInteractionScope.getState()
+    const previousScene = useScene.getState()
+    const actGlobal = globalThis as typeof globalThis & { IS_REACT_ACT_ENVIRONMENT?: boolean }
+    const previousAct = actGlobal.IS_REACT_ACT_ENVIRONMENT
+    actGlobal.IS_REACT_ACT_ENVIRONMENT = true
+    const canvas = Object.assign(new EventTarget(), {
+      getBoundingClientRect: () => ({ left: 0, top: 0, width: 100, height: 100 }),
+    }) as unknown as HTMLCanvasElement
+    const root = createRoot(canvas)
+    const camera = new PerspectiveCamera(60, 1, 0.1, 100)
+    camera.position.set(0, 1, 5)
+    camera.lookAt(0, 3, 0)
+    camera.updateMatrixWorld()
+    const level = LevelNode.parse({ id: 'level_ceiling_batch' })
+    const ceiling = CeilingNode.parse({
+      id: 'ceiling_placement_batch',
+      parentId: level.id,
+      polygon: [
+        [-5, -5],
+        [5, -5],
+        [5, 5],
+        [-5, 5],
+      ],
     })
-    if (kind === 'item') useEditor.setState({ selectedItem: { attachTo: 'ceiling' } as never })
-    else {
-      useEditor.setState({ selectedItem: null })
-      useEditor.getState().setMovingNode(
-        ProceduralItemNode.parse({
-          recipe: {
-            ...shelfRecipe,
-            mounting: { attachTo: 'ceiling', reference: 'top' },
-            surfaces: [
-              { id: 'top', label: 'Top', position: [0, 'height', 0], size: ['width', 'depth'] },
-            ],
-          },
-          parentId: ceiling.id,
-        }) as never,
-      )
+    const surface = new Mesh(
+      new PlaneGeometry(10, 10).rotateX(-Math.PI / 2),
+      new MeshBasicMaterial(),
+    )
+    surface.position.y = 3
+    surface.updateMatrixWorld(true)
+    const moves: CeilingEvent[] = []
+    const clicks: CeilingEvent[] = []
+    const onMove = (event: CeilingEvent) => moves.push(event)
+    const onClick = (event: CeilingEvent) => clicks.push(event)
+    emitter.on('ceiling:move', onMove)
+    emitter.on('ceiling:click', onClick)
+    function Placement() {
+      useCeilingEvents()
+      return null
     }
-    await root.configure({
-      gl: {
-        domElement: canvas,
-        render() {},
-        setSize() {},
-        setPixelRatio() {},
-        xr: { isPresenting: false },
-      } as unknown as WebGLRenderer,
-      camera,
-      frameloop: 'never',
-      dpr: 1,
-      size: { width: 100, height: 100, top: 0, left: 0 },
-    })
-    await act(async () => {
-      root.render(createElement(Placement))
-    })
-    send()
-    hideFromScene(surface, 'batched')
-    send()
-    showInScene(surface, 'batched')
-    send()
-    expect(moves).toHaveLength(3)
-    expect(clicks).toHaveLength(3)
-    expect(moves[0]!.position[1]).toBeCloseTo(3)
-    for (const hit of [...moves, ...clicks]) {
-      expect(hit.node.id).toBe(ceiling.id)
-      expect(hit.position).toEqual(moves[0]!.position)
-      expect(hit.localPosition).toEqual(moves[0]!.localPosition)
+    const send = () => {
+      for (const type of ['pointermove', 'click']) {
+        canvas.dispatchEvent(
+          Object.assign(new Event(type), { clientX: 55, clientY: 50, button: 0 }),
+        )
+      }
     }
-    expect(useViewer.getState().hoveredId).toBeNull()
-  } finally {
-    await act(async () => {
-      root.render(null)
-    })
-    _roots.delete(canvas)
-    emitter.off('ceiling:move', onMove)
-    emitter.off('ceiling:click', onClick)
-    sceneRegistry.nodes.delete(ceiling.id)
-    sceneRegistry.byType.ceiling!.delete(ceiling.id)
-    surface.geometry.dispose()
-    surface.material.dispose()
-    useScene.setState(previousScene)
-    useEditor.setState(previousEditor)
-    useInteractionScope.setState(previousInteraction)
-    useViewer.setState(previousViewer)
-    actGlobal.IS_REACT_ACT_ENVIRONMENT = previousAct
-  }
-})
+    try {
+      sceneRegistry.nodes.set(ceiling.id, surface)
+      sceneRegistry.byType.ceiling!.add(ceiling.id)
+      useScene.setState({ nodes: { [level.id]: level, [ceiling.id]: ceiling } })
+      useViewer.setState({
+        hoveredId: null,
+        cameraDragging: false,
+        selection: { buildingId: null, levelId: level.id, zoneId: null, selectedIds: [] },
+      })
+      if (kind === 'item') useEditor.setState({ selectedItem: { attachTo: 'ceiling' } as never })
+      else {
+        useEditor.setState({ selectedItem: null })
+        useEditor.getState().setMovingNode(
+          ProceduralItemNode.parse({
+            recipe: {
+              ...shelfRecipe,
+              mounting: { attachTo: 'ceiling', reference: 'top' },
+              surfaces: [
+                { id: 'top', label: 'Top', position: [0, 'height', 0], size: ['width', 'depth'] },
+              ],
+            },
+            parentId: ceiling.id,
+          }) as never,
+        )
+      }
+      await root.configure({
+        gl: {
+          domElement: canvas,
+          render() {},
+          setSize() {},
+          setPixelRatio() {},
+          xr: { isPresenting: false },
+        } as unknown as WebGLRenderer,
+        camera,
+        frameloop: 'never',
+        dpr: 1,
+        size: { width: 100, height: 100, top: 0, left: 0 },
+      })
+      await act(async () => {
+        root.render(createElement(Placement))
+      })
+      send()
+      hideFromScene(surface, 'batched')
+      send()
+      showInScene(surface, 'batched')
+      send()
+      expect(moves).toHaveLength(3)
+      expect(clicks).toHaveLength(3)
+      expect(moves[0]!.position[1]).toBeCloseTo(3)
+      for (const hit of [...moves, ...clicks]) {
+        expect(hit.node.id).toBe(ceiling.id)
+        expect(hit.position).toEqual(moves[0]!.position)
+        expect(hit.localPosition).toEqual(moves[0]!.localPosition)
+      }
+      expect(useViewer.getState().hoveredId).toBeNull()
+    } finally {
+      await act(async () => {
+        root.render(null)
+      })
+      _roots.delete(canvas)
+      emitter.off('ceiling:move', onMove)
+      emitter.off('ceiling:click', onClick)
+      sceneRegistry.nodes.delete(ceiling.id)
+      sceneRegistry.byType.ceiling!.delete(ceiling.id)
+      surface.geometry.dispose()
+      surface.material.dispose()
+      useScene.setState(previousScene)
+      useEditor.setState(previousEditor)
+      useInteractionScope.setState(previousInteraction)
+      useViewer.setState(previousViewer)
+      actGlobal.IS_REACT_ACT_ENVIRONMENT = previousAct
+    }
+  },
+)