@pascal-app/editor 1.0.1 → 1.0.4

package/src/components/viewer/viewer-selection-manager.tsx

@@ -0,0 +1,124 @@
+'use client'
+
+import { type AnyNodeId, emitter, type NodeEvent, sceneRegistry, useScene } from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import { useThree } from '@react-three/fiber'
+import { useEffect } from 'react'
+import { selectionModifiersFromEvent } from '../../lib/selection-routing'
+import {
+  applyViewerClick,
+  applyViewerHover,
+  viewerPickFromNodeEvent,
+} from '../../lib/viewer-selection'
+
+/**
+ * Selection for a parametric viewer surface (the published viewer's fallback,
+ * its embed, the editor's Preview): free-form and room-first, through the same
+ * rules as the baked viewer. Mount it with `<Viewer selectionManager="custom">`.
+ */
+export function ViewerSelectionManager() {
+  const gl = useThree((state) => state.gl)
+
+  useEffect(() => {
+    let clickHandled = false
+    let hoveredFrom: string | null = null
+    const pendingClicks = new Set<number>()
+
+    const onMove = (event: NodeEvent) => {
+      if (useViewer.getState().walkthroughMode) return
+      const pick = viewerPickFromNodeEvent(event, useScene.getState().nodes)
+      if (!pick) return
+      event.stopPropagation()
+      hoveredFrom = event.node.id
+      applyViewerHover(pick, useScene.getState().nodes)
+    }
+    const onLeave = (event: NodeEvent) => {
+      if (event.node.id !== hoveredFrom) return
+      hoveredFrom = null
+      useViewer.getState().setHoveredId(null)
+    }
+    const onClick = (event: NodeEvent) => {
+      if (useViewer.getState().walkthroughMode) return
+      const pick = viewerPickFromNodeEvent(event, useScene.getState().nodes)
+      if (!pick) return
+      event.stopPropagation()
+      clickHandled = true
+      applyViewerClick(
+        pick,
+        useScene.getState().nodes,
+        selectionModifiersFromEvent(event.nativeEvent),
+      )
+    }
+    // A click on nothing selectable clears the room and the element.
+    const onCanvasClick = (event: MouseEvent) => {
+      const viewer = useViewer.getState()
+      if (event.button !== 0 || viewer.walkthroughMode) return
+      if (viewer.cameraDragging || viewer.inputDragging) return
+      const frame = requestAnimationFrame(() => {
+        pendingClicks.delete(frame)
+        if (useViewer.getState().walkthroughMode) return
+        if (clickHandled) {
+          clickHandled = false
+          return
+        }
+        applyViewerClick(null, useScene.getState().nodes)
+      })
+      pendingClicks.add(frame)
+    }
+
+    emitter.on('node:move', onMove)
+    emitter.on('node:enter', onMove)
+    emitter.on('node:leave', onLeave)
+    emitter.on('node:click', onClick)
+    const canvas = gl.domElement
+    canvas.addEventListener('click', onCanvasClick)
+    return () => {
+      emitter.off('node:move', onMove)
+      emitter.off('node:enter', onMove)
+      emitter.off('node:leave', onLeave)
+      emitter.off('node:click', onClick)
+      canvas.removeEventListener('click', onCanvasClick)
+      for (const frame of pendingClicks) cancelAnimationFrame(frame)
+      useViewer.getState().setHoveredId(null)
+    }
+  }, [gl])
+
+  return <ViewerOutlineSync />
+}
+
+/** The selected elements and the hovered one, outlined (rooms highlight instead). */
+function ViewerOutlineSync() {
+  const selectedIds = useViewer((s) => s.selection.selectedIds)
+  const externalSelectedIds = useViewer((s) => s.externalSelectedIds)
+  const hoveredId = useViewer((s) => s.hoveredId)
+  const outliner = useViewer((s) => s.outliner)
+  const geometryRevision = useViewer((s) => s.geometryRevision)
+  const walkthrough = useViewer((s) => s.walkthroughMode)
+  const nodes = useScene((s) => s.nodes)
+
+  useEffect(() => {
+    void geometryRevision
+    outliner.selectedObjects.length = 0
+    outliner.hoveredObjects.length = 0
+    if (walkthrough) return
+    for (const id of new Set([...selectedIds, ...externalSelectedIds])) {
+      const object = sceneRegistry.nodes.get(id)
+      if (object) outliner.selectedObjects.push(object)
+    }
+    const hovered = hoveredId ? nodes[hoveredId as AnyNodeId] : undefined
+    if (hovered && hovered.type !== 'zone') {
+      const object = sceneRegistry.nodes.get(hovered.id)
+      if (object) outliner.hoveredObjects.push(object)
+    }
+  }, [selectedIds, externalSelectedIds, hoveredId, outliner, nodes, geometryRevision, walkthrough])
+
+  useEffect(
+    () => () => {
+      outliner.selectedObjects.length = 0
+      outliner.hoveredObjects.length = 0
+    },
+    [outliner],
+  )
+
+  return null
+}

package/src/components/viewer/viewer-stage.tsx

@@ -60,7 +60,6 @@ function selectViewerLevel(nodes: Record<string, AnyNode>, levelId: string) {
     selectedIds: [],
     zoneId: null,
   })
-  viewer.setLevelMode('solo')
 }
 
 export function ViewerStage({
@@ -137,7 +136,8 @@ export function ViewerStage({
       if (notify && nextLevelId !== useViewer.getState().selection.levelId) {
         markPerfAction('level-switch', nextLevelId)
       }
-      selectViewerLevel(scene?.nodes ?? useScene.getState().nodes, nextLevelId)
+      if (nextLevelId !== useViewer.getState().selection.levelId)
+        selectViewerLevel(scene?.nodes ?? useScene.getState().nodes, nextLevelId)
       if (notify) onLevelChange?.(nextLevelId)
     },
     [onLevelChange, scene],

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

@@ -11,7 +11,6 @@ import useInteractionScope from '../store/use-interaction-scope'
 export const ViewerZoneSystem = () => {
   useFrame(() => {
     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).
@@ -29,14 +28,14 @@ export const ViewerZoneSystem = () => {
 
       const isOnSelectedLevel = zone.parentId === levelId
 
-      // Keep group visible (so <Html> labels stay active), hide/show meshes only.
-      // Zone geometry: visible in zone mode on the right level, OR when this zone is selected.
-      // The editor ZoneSystem handles the selected zone's opacity animation.
+      // Keep group visible (so <Html> labels stay active), hide/show meshes only:
+      // only the selected zone shows its volume.
       const isSelected = id === zoneId
-      const shouldShowGeometry =
-        !isCaptureMode &&
-        ((structureLayer === 'zones' && !!levelId && isOnSelectedLevel) || isSelected)
-      if (!obj.visible) obj.visible = true
+      // A zone the author hid (sidebar eye) takes the group with it — this
+      // per-frame write would otherwise undo the renderer's `visible` prop.
+      const nodeVisible = zone.visible !== false
+      const shouldShowGeometry = nodeVisible && !isCaptureMode && isSelected
+      if (obj.visible !== nodeVisible) obj.visible = nodeVisible
       obj.traverse((child) => {
         if ((child as Mesh).isMesh) {
           child.visible = shouldShowGeometry
@@ -44,7 +43,8 @@ export const ViewerZoneSystem = () => {
       })
 
       // Labels: always visible on the current level (regardless of mode or zone selection)
-      const showLabel = !isCaptureMode && !zoneLabelsHidden && !!levelId && isOnSelectedLevel
+      const showLabel =
+        nodeVisible && !isCaptureMode && !zoneLabelsHidden && !!levelId && isOnSelectedLevel
       const targetOpacity = showLabel ? '1' : '0'
       const labelEl = document.getElementById(`${id}-label`)
       if (labelEl && labelEl.style.opacity !== targetOpacity) {

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

@@ -0,0 +1,311 @@
+import { afterEach, expect, test } from 'bun:test'
+import {
+  BuildingNode,
+  ColumnNode,
+  clearSceneHistory,
+  LevelNode,
+  SiteNode,
+  useScene,
+} from '@pascal-app/core'
+import { create } from '@react-three/test-renderer'
+import { type SaveStatus, useAutoSave } from './use-auto-save'
+
+const originalWindow = globalThis.window
+const originalRequestAnimationFrame = globalThis.requestAnimationFrame
+const previousScene = useScene.getState()
+let renderer: Awaited<ReturnType<typeof create>> | undefined
+
+afterEach(async () => {
+  await renderer?.unmount()
+  renderer = undefined
+  globalThis.window = originalWindow
+  globalThis.requestAnimationFrame = originalRequestAnimationFrame
+  useScene.setState(previousScene, true)
+  clearSceneHistory()
+})
+
+function graph(count: number) {
+  if (count === 0) return { nodes: {}, rootNodeIds: [] }
+  const columns = Array.from({ length: count - 3 }, (_, index) =>
+    ColumnNode.parse({ id: `column_autosave_${index}`, parentId: 'level_autosave' }),
+  )
+  const level = LevelNode.parse({
+    id: 'level_autosave',
+    parentId: 'building_autosave',
+    children: columns.map((node) => node.id),
+  })
+  const building = BuildingNode.parse({
+    id: 'building_autosave',
+    parentId: 'site_autosave',
+    children: [level.id],
+  })
+  const site = SiteNode.parse({ id: 'site_autosave', children: [building.id] })
+  const nodes = [site, building, level, ...columns]
+  return { nodes: Object.fromEntries(nodes.map((node) => [node.id, node])), rootNodeIds: [site.id] }
+}
+
+/** Mounts the hook in its initial state: a scene load not yet completed. */
+async function mountBeforeLoad(guardAgainstSceneWipe?: boolean, save?: () => Promise<void>) {
+  globalThis.window = new EventTarget() as unknown as Window & typeof globalThis
+  useScene.setState({ ...graph(0), readOnly: false })
+  clearSceneHistory()
+  const writes: number[] = []
+  const statuses: SaveStatus[] = []
+  let controls: ReturnType<typeof useAutoSave> | undefined
+  function Host(props: { guardAgainstSceneWipe?: boolean; isVersionPreviewMode?: boolean }) {
+    controls = useAutoSave({
+      ...props,
+      onSave: async (scene) => {
+        writes.push(Object.keys(scene.nodes).length)
+        await save?.()
+      },
+      onSaveStatusChange: (status) => statuses.push(status),
+    })
+    return null
+  }
+  renderer = await create(<Host guardAgainstSceneWipe={guardAgainstSceneWipe} />)
+  return {
+    writes,
+    statuses,
+    controls: controls!,
+    update: (props: { guardAgainstSceneWipe?: boolean; isVersionPreviewMode?: boolean }) =>
+      renderer!.update(<Host {...props} />),
+  }
+}
+
+async function mount(
+  loadedCount: number,
+  guardAgainstSceneWipe?: boolean,
+  save?: () => Promise<void>,
+) {
+  const mounted = await mountBeforeLoad(guardAgainstSceneWipe, save)
+  useScene.setState(graph(loadedCount))
+  clearSceneHistory()
+  mounted.controls.completeSceneLoad()
+  mounted.statuses.length = 0
+  return mounted
+}
+
+/** The Editor's load sequence: begin, unload, hydrate the store, complete. */
+function loadScene(controls: ReturnType<typeof useAutoSave>, count: number) {
+  controls.beginSceneLoad()
+  useScene.getState().unloadScene()
+  hydrate(count)
+  controls.completeSceneLoad()
+}
+
+function hydrate(count: number) {
+  const { nodes, rootNodeIds } = graph(count)
+  useScene.getState().setScene(nodes as never, rootNodeIds as never)
+  clearSceneHistory()
+}
+
+function agentAddsColumn() {
+  useScene
+    .getState()
+    .createNode(
+      ColumnNode.parse({ id: 'column_agent', parentId: 'level_autosave' }),
+      'level_autosave' as never,
+    )
+}
+
+/** A hidden tab: requestAnimationFrame callbacks never run. */
+function hideDocument() {
+  const frames: FrameRequestCallback[] = []
+  globalThis.requestAnimationFrame = ((callback: FrameRequestCallback) => {
+    frames.push(callback)
+    return frames.length
+  }) as typeof requestAnimationFrame
+  return frames
+}
+
+test('a scene loaded in a hidden tab autosaves agent edits without waiting for a frame', async () => {
+  hideDocument()
+  const { writes, statuses, controls } = await mountBeforeLoad()
+  statuses.length = 0
+  // Pre-hydration document writes (the host-panel installedPlugins sync on
+  // mount) still must not arm a save of the empty store.
+  useScene.getState().setInstalledPlugins(['pre-hydration-default'], { explicit: false })
+  loadScene(controls, 12)
+  expect(statuses).toEqual([])
+
+  agentAddsColumn()
+  await Bun.sleep(1100)
+  expect(writes).toEqual([13])
+  expect(statuses.at(-1)).toBe('saved')
+})
+
+test('opening a scene and leaving it unchanged saves nothing', async () => {
+  const { writes, statuses, controls } = await mountBeforeLoad()
+  loadScene(controls, 12)
+  statuses.length = 0
+  // Mount-time writes after the load: systems re-marking nodes, and a plugin
+  // that registers late syncing the default plugin set.
+  useScene.getState().markDirty('level_autosave' as never)
+  useScene.getState().setInstalledPlugins(['late-default'], { explicit: false })
+  await Bun.sleep(1100)
+  window.dispatchEvent(new Event('pagehide'))
+  expect(writes).toEqual([])
+  expect(statuses).toEqual([])
+})
+
+test('installing a plugin by hand after the load is saved', async () => {
+  const { writes, controls } = await mountBeforeLoad()
+  loadScene(controls, 12)
+  useScene.getState().setInstalledPlugins(['chosen'], { explicit: true })
+  await Bun.sleep(1100)
+  expect(writes).toEqual([12])
+})
+
+test('the exit flush writes an agent edit made right after a hidden load', async () => {
+  hideDocument()
+  const { writes, statuses, controls } = await mountBeforeLoad()
+  loadScene(controls, 12)
+  agentAddsColumn()
+  window.dispatchEvent(new Event('pagehide'))
+  expect(writes).toEqual([13])
+  expect(statuses).not.toContain('error')
+})
+
+test('the exit flush still skips while a load is in flight', async () => {
+  const { writes, controls } = await mount(12)
+  agentAddsColumn()
+  controls.beginSceneLoad()
+  useScene.getState().unloadScene()
+  window.dispatchEvent(new Event('pagehide'))
+  expect(writes).toEqual([])
+})
+
+test('a save that came due mid-load is written once the load completes', async () => {
+  const { writes, statuses, controls } = await mount(12)
+  agentAddsColumn()
+  controls.beginSceneLoad()
+  useScene.getState().unloadScene()
+  await Bun.sleep(1100)
+  expect(writes).toEqual([])
+  expect(statuses.at(-1)).toBe('paused')
+
+  hydrate(12)
+  controls.completeSceneLoad()
+  await Bun.sleep(0)
+  expect(writes).toEqual([12])
+  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)
+  useScene.getState().deleteNode('column_autosave_1')
+  window.dispatchEvent(new Event('pagehide'))
+  expect(statuses).not.toContain('error')
+  expect(writes).toEqual([4])
+})
+
+test('autosave blocks a full wipe and resumes after an allowed edit', async () => {
+  const { writes, statuses, controls } = await mount(78)
+  useScene.setState(graph(4))
+  controls.saveNow()
+  window.dispatchEvent(new Event('pagehide'))
+  expect(statuses).toContain('error')
+  expect(writes).toEqual([])
+  useScene.setState(graph(5))
+  controls.saveNow()
+  await Bun.sleep(0)
+  expect(writes).toEqual([5])
+  expect(statuses.at(-1)).toBe('saved')
+})
+
+test('collaboration scaffold deletion waits for persistence and reports saved', async () => {
+  const idle = Promise.withResolvers<void>()
+  const { writes, statuses } = await mount(78, false, () => idle.promise)
+  useScene.setState(graph(4))
+  await Bun.sleep(1100)
+  expect(statuses).not.toContain('error')
+  expect(writes).toEqual([4])
+  expect(statuses).toEqual(['pending', 'saving'])
+  idle.resolve()
+  await Bun.sleep(0)
+  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('collaboration guard exemption preserves preview pause and resume', async () => {
+  const { writes, statuses, update } = await mount(78, false)
+  useScene.setState(graph(4))
+  await update({ guardAgainstSceneWipe: false, isVersionPreviewMode: true })
+  expect(statuses.at(-1)).toBe('paused')
+  await Bun.sleep(1100)
+  expect(writes).toEqual([])
+  await update({ guardAgainstSceneWipe: false, isVersionPreviewMode: false })
+  await Bun.sleep(1100)
+  expect(writes).toEqual([4])
+  expect(statuses.at(-1)).toBe('saved')
+  expect(statuses).not.toContain('error')
+})
+
+test('changing guard ownership recovers an error and keeps the new stored baseline', async () => {
+  const { writes, statuses, controls, update } = await mount(78)
+  useScene.setState(graph(4))
+  controls.saveNow()
+  expect(statuses.at(-1)).toBe('error')
+  await update({ guardAgainstSceneWipe: false })
+  controls.saveNow()
+  await Bun.sleep(0)
+  expect(writes).toEqual([4])
+  expect(statuses.at(-1)).toBe('saved')
+  await update({ guardAgainstSceneWipe: true })
+  useScene.setState(graph(3))
+  controls.saveNow()
+  await Bun.sleep(0)
+  expect(writes).toEqual([4, 3])
+  expect(statuses.at(-1)).toBe('saved')
+})
+
+test('collaboration callback failures still report error', async () => {
+  const { writes, statuses, controls } = await mount(78, false, async () => {
+    throw new Error('Collaboration failed')
+  })
+  useScene.setState(graph(4))
+  controls.saveNow()
+  await Bun.sleep(0)
+  expect(writes).toEqual([4])
+  expect(statuses).toEqual(['pending', 'saving', 'error'])
+})

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

@@ -1,14 +1,18 @@
 'use client'
 
 import { useScene } from '@pascal-app/core'
-import { type MutableRefObject, useCallback, useEffect, useRef } from 'react'
-import { type SceneGraph, saveSceneToLocalStorage } from '../lib/scene'
+import { useCallback, useEffect, useRef } from 'react'
+import { getSavedSceneDocument, type SceneGraph, saveSceneToLocalStorage } from '../lib/scene'
 
 const AUTOSAVE_DEBOUNCE_MS = 1000
 const STRUCTURAL_NODE_COUNT = 4
 
 export function isSuspiciousNodeDrop(previousNodeCount: number, currentNodeCount: number) {
-  return previousNodeCount > STRUCTURAL_NODE_COUNT && currentNodeCount <= STRUCTURAL_NODE_COUNT
+  return (
+    previousNodeCount > STRUCTURAL_NODE_COUNT &&
+    currentNodeCount <= STRUCTURAL_NODE_COUNT &&
+    previousNodeCount - currentNodeCount > 1
+  )
 }
 
 /**
@@ -37,8 +41,8 @@ export function createStoredNodeCountTracker(initialNodeCount: number) {
      * 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
+    allowWrite(nodeCount: number, guardAgainstSceneWipe = true) {
+      if (guardAgainstSceneWipe && isSuspiciousNodeDrop(count, nodeCount)) return false
       count = nodeCount
       return true
     },
@@ -65,10 +69,14 @@ export function decideExitFlush(opts: {
   hasDirtyChanges: boolean
   storedNodeCount: number
   currentNodeCount: number
+  guardAgainstSceneWipe?: boolean
 }): ExitFlushDecision {
   if (!opts.hasDirtyChanges) return 'skip-clean'
   if (opts.isLoadingScene) return 'skip-loading'
-  if (isSuspiciousNodeDrop(opts.storedNodeCount, opts.currentNodeCount)) {
+  if (
+    opts.guardAgainstSceneWipe !== false &&
+    isSuspiciousNodeDrop(opts.storedNodeCount, opts.currentNodeCount)
+  ) {
     return 'blocked-suspicious'
   }
   return 'flush'
@@ -77,6 +85,7 @@ export function decideExitFlush(opts: {
 export type SaveStatus = 'idle' | 'pending' | 'saving' | 'saved' | 'paused' | 'error'
 
 interface UseAutoSaveOptions {
+  guardAgainstSceneWipe?: boolean
   onSave?: (scene: SceneGraph, options?: { keepalive?: boolean }) => Promise<void>
   onDirty?: () => void
   onSaveStatusChange?: (status: SaveStatus) => void
@@ -90,12 +99,14 @@ interface UseAutoSaveOptions {
  * ⚠️  Mount in exactly ONE component (the Editor).
  */
 export function useAutoSave({
+  guardAgainstSceneWipe = true,
   onSave,
   onDirty,
   onSaveStatusChange,
   isVersionPreviewMode = false,
 }: UseAutoSaveOptions): {
-  isLoadingSceneRef: MutableRefObject<boolean>
+  beginSceneLoad: () => void
+  completeSceneLoad: () => void
   saveNow: () => void
 } {
   const saveTimeoutRef = useRef<NodeJS.Timeout | undefined>(undefined)
@@ -116,6 +127,7 @@ export function useAutoSave({
   const onDirtyRef = useRef(onDirty)
   const onSaveStatusChangeRef = useRef(onSaveStatusChange)
   const isVersionPreviewModeRef = useRef(isVersionPreviewMode)
+  const guardAgainstSceneWipeRef = useRef(guardAgainstSceneWipe)
 
   useEffect(() => {
     onSaveRef.current = onSave
@@ -129,6 +141,9 @@ export function useAutoSave({
   useEffect(() => {
     isVersionPreviewModeRef.current = isVersionPreviewMode
   }, [isVersionPreviewMode])
+  useEffect(() => {
+    guardAgainstSceneWipeRef.current = guardAgainstSceneWipe
+  }, [guardAgainstSceneWipe])
 
   const setSaveStatus = useCallback((status: SaveStatus) => {
     onSaveStatusChangeRef.current?.(status)
@@ -155,7 +170,8 @@ export function useAutoSave({
         return
       }
 
-      const { nodes, rootNodeIds, collections, materials, installedPlugins } = useScene.getState()
+      const { nodes, rootNodeIds, collections, materials, installedPlugins } =
+        getSavedSceneDocument()
       const sceneGraph = {
         nodes,
         rootNodeIds,
@@ -166,7 +182,7 @@ export function useAutoSave({
 
       const currentNodeCount = Object.keys(nodes).length
       const previousNodeCount = storedNodeCount.count
-      if (!storedNodeCount.allowWrite(currentNodeCount)) {
+      if (!storedNodeCount.allowWrite(currentNodeCount, guardAgainstSceneWipeRef.current)) {
         console.warn(
           `[autosave] Blocked: scene dropped from ${previousNodeCount} to ${currentNodeCount} nodes. Likely accidental deletion.`,
         )
@@ -223,18 +239,23 @@ export function useAutoSave({
         return
       }
 
+      // A plugin set the user never chose is the host's defaults, re-derived on
+      // every load: a plugin registering after the load (hosted plugins arrive
+      // late) syncs it without anyone editing the scene.
+      const pluginsEdited =
+        state.installedPlugins !== lastInstalledPluginsRef && state.hasExplicitPluginInstallState
+      lastInstalledPluginsRef = state.installedPlugins
       const currentNodesSnapshot = JSON.stringify(state.nodes)
       const changed =
         currentNodesSnapshot !== lastNodesSnapshot ||
         state.collections !== lastCollectionsRef ||
         state.materials !== lastMaterialsRef ||
-        state.installedPlugins !== lastInstalledPluginsRef
+        pluginsEdited
       if (!changed) return
 
       lastNodesSnapshot = currentNodesSnapshot
       lastCollectionsRef = state.collections
       lastMaterialsRef = state.materials
-      lastInstalledPluginsRef = state.installedPlugins
       hasDirtyChangesRef.current = true
       onDirtyRef.current?.()
       setSaveStatus('pending')
@@ -258,7 +279,8 @@ export function useAutoSave({
     // would otherwise drop the change entirely. `pagehide` fires in cases
     // (mobile Safari, bfcache) where `beforeunload` does not.
     function flushOnExit() {
-      const { nodes, rootNodeIds, collections, materials, installedPlugins } = useScene.getState()
+      const { nodes, rootNodeIds, collections, materials, installedPlugins } =
+        getSavedSceneDocument()
       const currentNodeCount = Object.keys(nodes).length
       const previousNodeCount = storedNodeCount.count
       const decision = decideExitFlush({
@@ -266,6 +288,7 @@ export function useAutoSave({
         hasDirtyChanges: hasDirtyChangesRef.current,
         storedNodeCount: previousNodeCount,
         currentNodeCount,
+        guardAgainstSceneWipe: guardAgainstSceneWipeRef.current,
       })
       if (decision === 'skip-clean') return
       if (decision === 'skip-loading') {
@@ -282,7 +305,7 @@ export function useAutoSave({
         return
       }
       // 'flush' — adopt the write as the new stored baseline.
-      storedNodeCount.allowWrite(currentNodeCount)
+      storedNodeCount.allowWrite(currentNodeCount, guardAgainstSceneWipeRef.current)
 
       hasDirtyChangesRef.current = false
       const sceneGraph = {
@@ -361,5 +384,23 @@ export function useAutoSave({
     executeSaveRef.current?.()
   }, [])
 
-  return { isLoadingSceneRef, saveNow }
+  const beginSceneLoad = useCallback(() => {
+    isLoadingSceneRef.current = true
+  }, [])
+
+  // Call as soon as the store holds the loaded graph — hydration is data, not
+  // a frame. Gating this on requestAnimationFrame kept a tab loaded while
+  // hidden (no frames ever run) "loading" indefinitely: every later edit was
+  // adopted as the loaded baseline, so nothing autosaved and the exit flush
+  // had nothing dirty to write.
+  const completeSceneLoad = useCallback(() => {
+    isLoadingSceneRef.current = false
+    // A save that came due mid-load was deferred; the store now holds real
+    // data, so write it rather than leave the status parked on 'paused'.
+    if (pendingSaveRef.current && !isSavingRef.current && !saveTimeoutRef.current) {
+      executeSaveRef.current?.()
+    }
+  }, [])
+
+  return { beginSceneLoad, completeSceneLoad, saveNow }
 }

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

@@ -101,6 +101,7 @@ test.each([
         render() {},
         setSize() {},
         setPixelRatio() {},
+        xr: { isPresenting: false },
       } as unknown as WebGLRenderer,
       camera,
       frameloop: 'never',