@pascal-app/editor 1.0.0-beta.5 → 1.0.1

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

@@ -1,5 +1,9 @@
 import { describe, expect, test } from 'bun:test'
-import { createStoredNodeCountTracker, isSuspiciousNodeDrop } from './use-auto-save'
+import {
+  createStoredNodeCountTracker,
+  decideExitFlush,
+  isSuspiciousNodeDrop,
+} from './use-auto-save'
 
 describe('isSuspiciousNodeDrop', () => {
   test('blocks populated scenes from being flushed as empty skeletons', () => {
@@ -61,3 +65,71 @@ describe('createStoredNodeCountTracker', () => {
     expect(tracker.allowWrite(3)).toBe(true)
   })
 })
+
+describe('decideExitFlush', () => {
+  test('reproduces the 2026-08-16 scene-wipe sequence and skips the flush', () => {
+    // The exact traced wipe (dev repro, scenes a4993ec9f1ab/1befee38f973 and
+    // the live sessions of 2026-08-18):
+    //  1. useAutoSave subscribes; store = initial empty state.
+    //  2. useHostPanels' mount effect writes default installedPlugins — a
+    //     scene-store change BEFORE the Editor's load effect runs, so the
+    //     session is marked dirty with zero user edits.
+    //  3. The load effect sets loading=true and calls unloadScene(); the
+    //     tracker re-baselines to the transient 0-node state.
+    //  4. StrictMode's simulated unmount (prod: tab close / navigation)
+    //     runs the effect cleanup -> flushOnExit with an EMPTY store.
+    // The flush must be skipped: the store content is transient, not data.
+    expect(
+      decideExitFlush({
+        isLoadingScene: true,
+        hasDirtyChanges: true,
+        storedNodeCount: 0,
+        currentNodeCount: 0,
+      }),
+    ).toBe('skip-loading')
+  })
+
+  test('never flushes while a load is in flight, whatever the counts say', () => {
+    expect(
+      decideExitFlush({
+        isLoadingScene: true,
+        hasDirtyChanges: true,
+        storedNodeCount: 74,
+        currentNodeCount: 74,
+      }),
+    ).toBe('skip-loading')
+  })
+
+  test('does nothing when there are no dirty changes', () => {
+    expect(
+      decideExitFlush({
+        isLoadingScene: false,
+        hasDirtyChanges: false,
+        storedNodeCount: 74,
+        currentNodeCount: 0,
+      }),
+    ).toBe('skip-clean')
+  })
+
+  test('blocks a populated-to-scaffold drop after hydration', () => {
+    expect(
+      decideExitFlush({
+        isLoadingScene: false,
+        hasDirtyChanges: true,
+        storedNodeCount: 74,
+        currentNodeCount: 0,
+      }),
+    ).toBe('blocked-suspicious')
+  })
+
+  test('flushes ordinary dirty sessions on exit', () => {
+    expect(
+      decideExitFlush({
+        isLoadingScene: false,
+        hasDirtyChanges: true,
+        storedNodeCount: 74,
+        currentNodeCount: 75,
+      }),
+    ).toBe('flush')
+  })
+})

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

@@ -45,6 +45,35 @@ export function createStoredNodeCountTracker(initialNodeCount: number) {
   }
 }
 
+export type ExitFlushDecision = 'skip-clean' | 'skip-loading' | 'blocked-suspicious' | 'flush'
+
+/**
+ * Decides what the unload/unmount flush may do with the store's current
+ * content. Pure so the wipe scenarios stay unit-testable.
+ *
+ * `skip-loading` is the load-bearing branch: while a scene load is in flight
+ * the store passes through an intermediate `unloadScene()` state — zero nodes,
+ * zero roots — that is NOT user data. A flush fired in that window (StrictMode
+ * simulated unmount in dev, a quick tab close or navigation in prod) used to
+ * serialize that empty store and PUT it over the server copy, wiping the scene
+ * at v2. The dirty flag alone cannot protect here: document-level writes that
+ * land before hydration (e.g. the host-panel default `installedPlugins` sync)
+ * mark the session dirty without any user edit.
+ */
+export function decideExitFlush(opts: {
+  isLoadingScene: boolean
+  hasDirtyChanges: boolean
+  storedNodeCount: number
+  currentNodeCount: number
+}): ExitFlushDecision {
+  if (!opts.hasDirtyChanges) return 'skip-clean'
+  if (opts.isLoadingScene) return 'skip-loading'
+  if (isSuspiciousNodeDrop(opts.storedNodeCount, opts.currentNodeCount)) {
+    return 'blocked-suspicious'
+  }
+  return 'flush'
+}
+
 export type SaveStatus = 'idle' | 'pending' | 'saving' | 'saved' | 'paused' | 'error'
 
 interface UseAutoSaveOptions {
@@ -65,10 +94,19 @@ export function useAutoSave({
   onDirty,
   onSaveStatusChange,
   isVersionPreviewMode = false,
-}: UseAutoSaveOptions): { isLoadingSceneRef: MutableRefObject<boolean> } {
+}: UseAutoSaveOptions): {
+  isLoadingSceneRef: MutableRefObject<boolean>
+  saveNow: () => void
+} {
   const saveTimeoutRef = useRef<NodeJS.Timeout | undefined>(undefined)
   const isSavingRef = useRef(false)
-  const isLoadingSceneRef = useRef(false)
+  // Starts TRUE: the scene is "loading" from mount until the Editor's load
+  // effect completes its first hydration. The Editor's load effect runs
+  // several hooks AFTER this one (hook order), so store writes in that gap —
+  // e.g. `useHostPanels` syncing default `installedPlugins` on mount — must
+  // not mark the session dirty or arm a save: the store still holds the empty
+  // pre-hydration state, and flushing it wipes the scene server-side.
+  const isLoadingSceneRef = useRef(true)
   const pendingSaveRef = useRef(false)
   const executeSaveRef = useRef<(() => Promise<void>) | null>(null)
   const hasDirtyChangesRef = useRef(false)
@@ -220,17 +258,31 @@ export function useAutoSave({
     // would otherwise drop the change entirely. `pagehide` fires in cases
     // (mobile Safari, bfcache) where `beforeunload` does not.
     function flushOnExit() {
-      if (!hasDirtyChangesRef.current) return
       const { nodes, rootNodeIds, collections, materials, installedPlugins } = useScene.getState()
       const currentNodeCount = Object.keys(nodes).length
       const previousNodeCount = storedNodeCount.count
-      if (!storedNodeCount.allowWrite(currentNodeCount)) {
+      const decision = decideExitFlush({
+        isLoadingScene: isLoadingSceneRef.current,
+        hasDirtyChanges: hasDirtyChangesRef.current,
+        storedNodeCount: previousNodeCount,
+        currentNodeCount,
+      })
+      if (decision === 'skip-clean') return
+      if (decision === 'skip-loading') {
+        console.warn(
+          '[autosave] Skipped unload flush: a scene load is in flight, the store content is transient. Nothing user-authored is lost.',
+        )
+        return
+      }
+      if (decision === 'blocked-suspicious') {
         console.warn(
           `[autosave] Blocked unload flush: scene dropped from ${previousNodeCount} to ${currentNodeCount} nodes. Likely accidental deletion.`,
         )
         setSaveStatus('error')
         return
       }
+      // 'flush' — adopt the write as the new stored baseline.
+      storedNodeCount.allowWrite(currentNodeCount)
 
       hasDirtyChangesRef.current = false
       const sceneGraph = {
@@ -290,5 +342,24 @@ export function useAutoSave({
     setSaveStatus('saved')
   }, [isVersionPreviewMode, setSaveStatus])
 
-  return { isLoadingSceneRef }
+  // Imperative flush for the save shortcut: drop the debounce and write now,
+  // through the same `executeSave` so the wipe guard and status callbacks stay
+  // in the loop. A write already in flight only arms the follow-up.
+  const saveNow = useCallback(() => {
+    if (isLoadingSceneRef.current) return
+
+    if (saveTimeoutRef.current) {
+      clearTimeout(saveTimeoutRef.current)
+      saveTimeoutRef.current = undefined
+    }
+
+    if (isSavingRef.current) {
+      pendingSaveRef.current = true
+      return
+    }
+
+    executeSaveRef.current?.()
+  }, [])
+
+  return { isLoadingSceneRef, saveNow }
 }

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

@@ -0,0 +1,144 @@
+import { expect, test } from 'bun:test'
+import {
+  type CeilingEvent,
+  CeilingNode,
+  emitter,
+  LevelNode,
+  sceneRegistry,
+  useScene,
+} from '@pascal-app/core'
+import { ProceduralItemNode, shelfRecipe } from '@pascal-app/core/procedural-items'
+import { hideFromScene, showInScene, useViewer } from '@pascal-app/viewer'
+import { _roots, act, createRoot } from '@react-three/fiber'
+import { createElement } from 'react'
+import {
+  Mesh,
+  MeshBasicMaterial,
+  PerspectiveCamera,
+  PlaneGeometry,
+  type WebGLRenderer,
+} from 'three'
+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: [] },
+    })
+    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() {},
+      } 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
+  }
+})

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

@@ -7,6 +7,7 @@ import {
   sceneRegistry,
   useScene,
 } from '@pascal-app/core'
+import { isProceduralItem } from '@pascal-app/core/procedural-items'
 import { useViewer } from '@pascal-app/viewer'
 import { useThree } from '@react-three/fiber'
 import { useEffect, useRef } from 'react'
@@ -61,7 +62,10 @@ export function useCeilingEvents() {
       const ed = useEditor.getState()
       if (ed.selectedItem?.attachTo === 'ceiling') return true
       const moving = getMovingNode()
-      return moving?.type === 'item' && moving.asset?.attachTo === 'ceiling'
+      return (
+        (moving?.type === 'item' && moving.asset?.attachTo === 'ceiling') ||
+        (isProceduralItem(moving) && moving.recipe.mounting?.attachTo === 'ceiling')
+      )
     }
 
     type Hit = { node: CeilingNode; mesh: Object3D; world: Vector3; local: Vector3 }

package/src/hooks/use-drag-action.ts

@@ -14,6 +14,7 @@ import {
   type SpatialQuery,
   useScene,
 } from '@pascal-app/core'
+import { beginPerfAction, cancelPerfAction, commitPerfAction } from '@pascal-app/viewer'
 import { useEffect, useRef } from 'react'
 
 const sceneApi = createSceneApi(useScene)
@@ -74,14 +75,26 @@ export function useDragAction<Ctx, Draft>(args: UseDragActionArgs<Ctx, Draft>) {
   useEffect(() => {
     if (!args.active) return
 
+    const initial = argsRef.current.initial
+    const nodeType = initial.node?.type
+    const isEndpoint = initial.handleId === 'start' || initial.handleId === 'end'
+    const actionName = isEndpoint && nodeType ? `drag:${nodeType}-endpoint` : 'drag:move'
+
     const session = createDragSession<Ctx, Draft>(argsRef.current.action, sceneApi, {
       spatialQuery: argsRef.current.spatialQuery,
       childQuery: argsRef.current.childQuery,
-      onCommit: () => argsRef.current.onCommit?.(),
-      onCancel: () => argsRef.current.onCancel?.(),
+      onCommit: () => {
+        commitPerfAction()
+        argsRef.current.onCommit?.()
+      },
+      onCancel: () => {
+        cancelPerfAction()
+        argsRef.current.onCancel?.()
+      },
     })
 
-    session.start(argsRef.current.initial)
+    beginPerfAction(actionName, initial.node?.id ?? nodeType ?? '')
+    session.start(initial)
 
     const activatedAt = Date.now()
     const graceMs = argsRef.current.activationGraceMs ?? 150
@@ -119,6 +132,7 @@ export function useDragAction<Ctx, Draft>(args: UseDragActionArgs<Ctx, Draft>) {
       }
       // If the parent flipped `active` to false (or unmounted) while we were
       // still mid-drag, treat it as a cancel — no dangling history pause.
+      if (session.isActive()) cancelPerfAction()
       session.dispose()
     }
   }, [args.active])

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

@@ -0,0 +1,240 @@
+import { expect, spyOn, test } from 'bun:test'
+import {
+  CeilingNode,
+  emitter,
+  type GridEvent,
+  nodeRegistry,
+  registerNode,
+  SlabNode,
+  useRegistry,
+  WallNode,
+} from '@pascal-app/core'
+import { hideFromScene, showInScene, useViewer } from '@pascal-app/viewer'
+import { _roots, act, createRoot } from '@react-three/fiber'
+import { createElement } from 'react'
+import {
+  DoubleSide,
+  Mesh,
+  MeshBasicMaterial,
+  PerspectiveCamera,
+  PlaneGeometry,
+  type WebGLRenderer,
+} from 'three'
+import { DRAFTING_SURFACE_EXTENSION_KEY } from '../lib/interaction/registered-drafting'
+import useInteractionScope from '../store/use-interaction-scope'
+import { useGridEvents } from './use-grid-events'
+
+test('grid moves throttle camera drags at 100 ms and resume immediately during tool drags', async () => {
+  const previousViewer = useViewer.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
+  let now = 0
+  const clock = spyOn(performance, 'now').mockImplementation(() => now)
+  let rectReads = 0
+  const canvas = Object.assign(new EventTarget(), {
+    getBoundingClientRect() {
+      rectReads++
+      return { 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, 10, 10)
+  camera.lookAt(0, 0, 0)
+  camera.updateMatrixWorld()
+  const delivered: GridEvent[] = []
+  const onMove = (event: GridEvent) => delivered.push(event)
+  emitter.on('grid:move', onMove)
+
+  function Grid() {
+    useGridEvents(5)
+    return null
+  }
+
+  const send = (clientX = 50) => {
+    canvas.dispatchEvent(
+      Object.assign(new Event('pointermove'), { clientX, clientY: 50, button: 0 }),
+    )
+  }
+
+  try {
+    useViewer.setState({
+      cameraDragging: false,
+      inputDragging: false,
+      selection: { buildingId: null, levelId: null, zoneId: null, selectedIds: [] },
+    })
+    await root.configure({
+      gl: {
+        domElement: canvas,
+        render() {},
+        setSize() {},
+        setPixelRatio() {},
+      } as unknown as WebGLRenderer,
+      camera,
+      frameloop: 'never',
+      dpr: 1,
+      size: { width: 100, height: 100, top: 0, left: 0 },
+    })
+    await act(async () => {
+      root.render(createElement(Grid))
+    })
+    send()
+    expect(rectReads).toBe(1)
+    expect(delivered).toHaveLength(1)
+    const initial = delivered[0]!
+    expect(initial.position[1]).toBeCloseTo(5)
+    expect(initial.localPosition).toEqual(initial.position)
+
+    for (const inputDragging of [false, true]) {
+      const before = delivered.length
+      useViewer.setState({ cameraDragging: true, inputDragging })
+      send(55)
+      expect(delivered).toHaveLength(before + 1)
+      for (now = 1; now < 100; now++) send(60)
+      expect(rectReads).toBe(before + 1)
+      expect(delivered).toHaveLength(before + 1)
+
+      now = 100
+      send(60)
+      expect(delivered).toHaveLength(before + 2)
+      expect(delivered.at(-1)!.position).not.toEqual(delivered.at(-2)!.position)
+      now = 101
+      useViewer.setState({ cameraDragging: false })
+      send()
+      expect(delivered).toHaveLength(before + 3)
+      expect(rectReads).toBe(delivered.length)
+      expect(delivered.at(-1)!.position).toEqual(initial.position)
+      expect(delivered.at(-1)!.localPosition).toEqual(initial.localPosition)
+      now = 0
+    }
+
+    await act(async () => {
+      root.render(null)
+    })
+    const before = delivered.length
+    send()
+    expect(delivered).toHaveLength(before)
+    expect(rectReads).toBe(before)
+  } finally {
+    await act(async () => {
+      root.render(null)
+    })
+    clock.mockRestore()
+    emitter.off('grid:move', onMove)
+    _roots.delete(canvas)
+    useViewer.setState(previousViewer)
+    actGlobal.IS_REACT_ACT_ENVIRONMENT = previousAct
+  }
+})
+
+test.each([
+  'slab',
+  'ceiling',
+] as const)('grid moves keep the same %s hit when its source joins or leaves a batch', async (kind) => {
+  const previousViewer = useViewer.getState()
+  const previousScope = useInteractionScope.getState().scope
+  const restoreRegistry = nodeRegistry._snapshot()
+  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, kind === 'ceiling' ? 1 : 10, 10)
+  camera.lookAt(0, 5, 0)
+  camera.updateMatrixWorld()
+  const surface = new Mesh(
+    new PlaneGeometry(20, 20).rotateX(-Math.PI / 2),
+    new MeshBasicMaterial({ side: DoubleSide }),
+  )
+  surface.position.y = 5
+  surface.updateMatrixWorld(true)
+  const surfaceId = `${kind}_grid_batch_test` as const
+  const wall = WallNode.parse({ start: [0, 0], end: [0, 2] })
+  const delivered: GridEvent[] = []
+  const onMove = (event: GridEvent) => delivered.push(event)
+  emitter.on('grid:move', onMove)
+
+  function Grid() {
+    useRegistry(surfaceId, kind, { current: surface })
+    useGridEvents(0)
+    return null
+  }
+  const send = () => {
+    const before = delivered.length
+    canvas.dispatchEvent(
+      Object.assign(new Event('pointermove'), { clientX: 55, clientY: 50, button: 0 }),
+    )
+    expect(delivered).toHaveLength(before + 1)
+    return delivered.at(-1)!
+  }
+
+  try {
+    nodeRegistry._reset()
+    registerNode({
+      kind,
+      schemaVersion: 1,
+      category: 'structure',
+      capabilities: {},
+      schema: kind === 'ceiling' ? CeilingNode : SlabNode,
+      defaults: () => ({}),
+      drafting: { surfaceQuery: true },
+      extensions: {
+        [DRAFTING_SURFACE_EXTENSION_KEY]: {
+          kind,
+          ...(kind === 'ceiling' ? { raycast: 'underside' } : {}),
+        },
+      },
+    })
+    useViewer.setState({
+      cameraDragging: false,
+      selection: { buildingId: null, levelId: null, zoneId: null, selectedIds: [] },
+    })
+    await root.configure({
+      gl: {
+        domElement: canvas,
+        render() {},
+        setSize() {},
+        setPixelRatio() {},
+      } as unknown as WebGLRenderer,
+      camera,
+      frameloop: 'never',
+      dpr: 1,
+      size: { width: 100, height: 100, top: 0, left: 0 },
+    })
+    for (const scope of [
+      { kind: 'moving', node: wall, nodeId: wall.id, nodeType: 'wall', view: '3d' },
+      { kind: 'drafting', tool: kind },
+    ] as const) {
+      await act(async () => {
+        useInteractionScope.setState({ scope })
+        root.render(createElement(Grid))
+      })
+      const before = send()
+      expect(before.surfaceHit?.hostId).toBe(surfaceId)
+      expect(before.position[1]).toBeCloseTo(5)
+      hideFromScene(surface, 'batched')
+      const batched = send()
+      expect(batched.surfaceHit).toEqual(before.surfaceHit)
+      expect(batched.position).toEqual(before.position)
+      expect(batched.localPosition).toEqual(before.localPosition)
+      showInScene(surface, 'batched')
+      expect(send().position).toEqual(before.position)
+    }
+  } finally {
+    await act(async () => {
+      root.render(null)
+    })
+    emitter.off('grid:move', onMove)
+    _roots.delete(canvas)
+    surface.geometry.dispose()
+    surface.material.dispose()
+    restoreRegistry()
+    useInteractionScope.setState({ scope: previousScope })
+    useViewer.setState(previousViewer)
+    actGlobal.IS_REACT_ACT_ENVIRONMENT = previousAct
+  }
+})