@pascal-app/editor 1.0.0-beta.4 → 1.0.0

package/src/components/viewer-zone-system.tsx

@@ -13,6 +13,9 @@ export const ViewerZoneSystem = () => {
     const { levelId, zoneId } = useViewer.getState().selection
     const structureLayer = useEditor.getState().structureLayer
     const nodes = useScene.getState().nodes
+    // Snapshot capture is a clean, camera-only surface — zone geometry and
+    // tags stay out of the framed shot (mirrors the editor ZoneSystem's gate).
+    const isCaptureMode = useEditor.getState().isCaptureMode
     // During any active interaction zone labels step back entirely (Sims-light).
     const zoneLabelsHidden =
       resolveOverlayPolicy(useInteractionScope.getState().scope).zoneLabels === 'hidden'
@@ -31,7 +34,8 @@ export const ViewerZoneSystem = () => {
       // The editor ZoneSystem handles the selected zone's opacity animation.
       const isSelected = id === zoneId
       const shouldShowGeometry =
-        (structureLayer === 'zones' && !!levelId && isOnSelectedLevel) || isSelected
+        !isCaptureMode &&
+        ((structureLayer === 'zones' && !!levelId && isOnSelectedLevel) || isSelected)
       if (!obj.visible) obj.visible = true
       obj.traverse((child) => {
         if ((child as Mesh).isMesh) {
@@ -40,7 +44,7 @@ export const ViewerZoneSystem = () => {
       })
 
       // Labels: always visible on the current level (regardless of mode or zone selection)
-      const showLabel = !zoneLabelsHidden && !!levelId && isOnSelectedLevel
+      const showLabel = !isCaptureMode && !zoneLabelsHidden && !!levelId && isOnSelectedLevel
       const targetOpacity = showLabel ? '1' : '0'
       const labelEl = document.getElementById(`${id}-label`)
       if (labelEl && labelEl.style.opacity !== targetOpacity) {

package/src/components/walkthrough-hud.tsx

@@ -17,6 +17,24 @@ export type WalkthroughHudProps = {
   children?: ReactNode
 }
 
+/** The centered walkthrough pointer: a dot that grows into a green ring over
+ *  an interactable (door / window / elevator). Also mounted by the snapshot
+ *  capture overlay so walk / drone framing keeps the same E-to-open pointer. */
+export function WalkthroughCrosshair({ interact }: { interact: WalkthroughInteract }) {
+  return (
+    <div className="pointer-events-none absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
+      <div
+        className={cn(
+          'rounded-full transition-all duration-150',
+          interact
+            ? 'h-4 w-4 border-2 border-emerald-400 bg-emerald-400/10'
+            : 'h-1.5 w-1.5 bg-white/80 shadow-[0_0_2px_rgba(0,0,0,0.6)]',
+        )}
+      />
+    </div>
+  )
+}
+
 export function WalkthroughHud({
   floorLabel,
   zoneLabel,
@@ -51,16 +69,7 @@ export function WalkthroughHud({
         {children}
       </div>
 
-      <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
-        <div
-          className={cn(
-            'rounded-full transition-all duration-150',
-            interact
-              ? 'h-4 w-4 border-2 border-emerald-400 bg-emerald-400/10'
-              : 'h-1.5 w-1.5 bg-white/80 shadow-[0_0_2px_rgba(0,0,0,0.6)]',
-          )}
-        />
-      </div>
+      <WalkthroughCrosshair interact={interact} />
 
       <div className="absolute bottom-6 left-1/2 flex -translate-x-1/2 items-center gap-2">
         {suspended ? (

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

@@ -1,5 +1,9 @@
 import { describe, expect, test } from 'bun:test'
-import { 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', () => {
@@ -12,3 +16,120 @@ describe('isSuspiciousNodeDrop', () => {
     expect(isSuspiciousNodeDrop(4, 0)).toBe(false)
   })
 })
+
+describe('createStoredNodeCountTracker', () => {
+  test('adopts a loaded graph as the baseline the guard measures against', () => {
+    // The hook mounts before the scene loads, so the tracker starts at the bare
+    // scaffold and only learns the real size when the load lands. Without this,
+    // every session's first save compares a populated graph against ~0 and the
+    // guard is dead for exactly the write that can destroy the most work.
+    const tracker = createStoredNodeCountTracker(0)
+    tracker.trackLoadedGraph(42)
+
+    expect(tracker.allowWrite(0)).toBe(false)
+    expect(tracker.count).toBe(42)
+  })
+
+  test('keeps blocking after a blocked write instead of adopting the empty graph', () => {
+    const tracker = createStoredNodeCountTracker(0)
+    tracker.trackLoadedGraph(42)
+
+    expect(tracker.allowWrite(0)).toBe(false)
+    // A debounced retry must not be the thing that finally lets the wipe land.
+    expect(tracker.allowWrite(0)).toBe(false)
+  })
+
+  test('lets ordinary edits through and advances the baseline', () => {
+    const tracker = createStoredNodeCountTracker(0)
+    tracker.trackLoadedGraph(12)
+
+    expect(tracker.allowWrite(13)).toBe(true)
+    expect(tracker.count).toBe(13)
+    expect(tracker.allowWrite(5)).toBe(true)
+    expect(tracker.count).toBe(5)
+  })
+
+  test('does not treat a deliberately empty new scene as suspicious', () => {
+    const tracker = createStoredNodeCountTracker(0)
+    tracker.trackLoadedGraph(4)
+
+    expect(tracker.allowWrite(0)).toBe(true)
+  })
+
+  test('adopts a smaller loaded graph, so restoring an older version still saves', () => {
+    // Loading a 3-node version over a 40-node one is not a deletion.
+    const tracker = createStoredNodeCountTracker(0)
+    tracker.trackLoadedGraph(40)
+    tracker.trackLoadedGraph(3)
+
+    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

@@ -11,6 +11,69 @@ export function isSuspiciousNodeDrop(previousNodeCount: number, currentNodeCount
   return previousNodeCount > STRUCTURAL_NODE_COUNT && currentNodeCount <= STRUCTURAL_NODE_COUNT
 }
 
+/**
+ * Tracks the node count of the graph we believe is stored, which is what the
+ * accidental-wipe guard measures every write against.
+ *
+ * The distinction that matters: a graph that came from storage is authoritative
+ * and has to become the new baseline, while an edited or previewed graph must
+ * not. Seeding the baseline once at mount is not enough — the hook mounts
+ * before the scene has loaded, so it would sit at ~0 for the whole session and
+ * `isSuspiciousNodeDrop` could never fire.
+ */
+export function createStoredNodeCountTracker(initialNodeCount: number) {
+  let count = initialNodeCount
+
+  return {
+    get count() {
+      return count
+    },
+    /** A graph read from storage — it defines what "populated" means from here. */
+    trackLoadedGraph(nodeCount: number) {
+      count = nodeCount
+    },
+    /**
+     * `false` when the write would drop a populated scene to a bare scaffold,
+     * which is an accidental full deletion far more often than an intent. The
+     * caller reports the block; on `true` the write becomes the new baseline.
+     */
+    allowWrite(nodeCount: number) {
+      if (isSuspiciousNodeDrop(count, nodeCount)) return false
+      count = nodeCount
+      return true
+    },
+  }
+}
+
+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 {
@@ -31,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)
@@ -65,7 +137,9 @@ export function useAutoSave({
   // Stable subscription to scene changes
   useEffect(() => {
     let lastNodesSnapshot = JSON.stringify(useScene.getState().nodes)
-    let lastNodeCount = Object.keys(useScene.getState().nodes).length
+    const storedNodeCount = createStoredNodeCountTracker(
+      Object.keys(useScene.getState().nodes).length,
+    )
     // Collections + scene materials are document-level state that persists with
     // the graph but lives outside `nodes`. Track them by reference (zustand
     // hands out a new object on every mutation) so a material edit or a
@@ -90,17 +164,15 @@ export function useAutoSave({
         installedPlugins,
       } as SceneGraph
 
-      // Guard: refuse to autosave if the scene went from populated to nearly empty.
-      // This catches accidental full deletions before they're persisted.
       const currentNodeCount = Object.keys(nodes).length
-      if (isSuspiciousNodeDrop(lastNodeCount, currentNodeCount)) {
+      const previousNodeCount = storedNodeCount.count
+      if (!storedNodeCount.allowWrite(currentNodeCount)) {
         console.warn(
-          `[autosave] Blocked: scene dropped from ${lastNodeCount} to ${currentNodeCount} nodes. Likely accidental deletion.`,
+          `[autosave] Blocked: scene dropped from ${previousNodeCount} to ${currentNodeCount} nodes. Likely accidental deletion.`,
         )
         setSaveStatus('error')
         return
       }
-      lastNodeCount = currentNodeCount
 
       isSavingRef.current = true
       pendingSaveRef.current = false
@@ -135,6 +207,7 @@ export function useAutoSave({
     const unsubscribe = useScene.subscribe((state) => {
       if (isLoadingSceneRef.current) {
         lastNodesSnapshot = JSON.stringify(state.nodes)
+        storedNodeCount.trackLoadedGraph(Object.keys(state.nodes).length)
         lastCollectionsRef = state.collections
         lastMaterialsRef = state.materials
         lastInstalledPluginsRef = state.installedPlugins
@@ -185,19 +258,33 @@ 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
-      if (isSuspiciousNodeDrop(lastNodeCount, currentNodeCount)) {
+      const previousNodeCount = storedNodeCount.count
+      const decision = decideExitFlush({
+        isLoadingScene: isLoadingSceneRef.current,
+        hasDirtyChanges: hasDirtyChangesRef.current,
+        storedNodeCount: previousNodeCount,
+        currentNodeCount,
+      })
+      if (decision === 'skip-clean') return
+      if (decision === 'skip-loading') {
         console.warn(
-          `[autosave] Blocked unload flush: scene dropped from ${lastNodeCount} to ${currentNodeCount} nodes. Likely accidental deletion.`,
+          '[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
-      lastNodeCount = currentNodeCount
       const sceneGraph = {
         nodes,
         rootNodeIds,
@@ -255,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,122 @@
+import { expect, test } from 'bun:test'
+import {
+  type CeilingEvent,
+  CeilingNode,
+  emitter,
+  LevelNode,
+  sceneRegistry,
+  useScene,
+} 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 {
+  Mesh,
+  MeshBasicMaterial,
+  PerspectiveCamera,
+  PlaneGeometry,
+  type WebGLRenderer,
+} from 'three'
+import useEditor from '../store/use-editor'
+import { useCeilingEvents } from './use-ceiling-events'
+
+test('ceiling-item placement keeps move and commit hits while an unhovered ceiling is batched', async () => {
+  const previousViewer = useViewer.getState()
+  const previousEditor = useEditor.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: [] },
+    })
+    useEditor.setState({ selectedItem: { attachTo: 'ceiling' } 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)
+    useViewer.setState(previousViewer)
+    actGlobal.IS_REACT_ACT_ENVIRONMENT = previousAct
+  }
+})

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])