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

package/src/components/viewer/use-viewer-camera-navigation-sync.ts

@@ -0,0 +1,140 @@
+'use client'
+
+import { type CameraPose, emitter } from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import type { CameraControlsImpl } from '@react-three/drei'
+import { useThree } from '@react-three/fiber'
+import { type RefObject, useCallback, useEffect, useRef } from 'react'
+import type { Camera, OrthographicCamera, PerspectiveCamera } from 'three'
+import { Vector3 } from 'three'
+import { normalizeCameraPose } from '../../lib/camera-pose'
+import { publishCameraPose } from '../../store/camera-pose-store'
+
+const position = new Vector3()
+const target = new Vector3()
+
+function isPerspectiveCamera(camera: Camera): camera is PerspectiveCamera {
+  return (camera as PerspectiveCamera).isPerspectiveCamera === true
+}
+
+function isOrthographicCamera(camera: Camera): camera is OrthographicCamera {
+  return (camera as OrthographicCamera).isOrthographicCamera === true
+}
+
+function cameraViewWidth(camera: Camera, distance: number, width: number, height: number) {
+  if (isPerspectiveCamera(camera)) {
+    const fov = (camera.getEffectiveFOV() * Math.PI) / 180
+    return Math.max(0.001, 2 * distance * Math.tan(fov / 2) * (width / Math.max(height, 1)))
+  }
+  if (isOrthographicCamera(camera)) {
+    return Math.max(0.001, (camera.right - camera.left) / camera.zoom)
+  }
+  return Math.max(0.001, distance)
+}
+
+function applyViewWidth(
+  controls: CameraControlsImpl,
+  camera: Camera,
+  viewWidth: number,
+  width: number,
+  height: number,
+) {
+  if (isPerspectiveCamera(camera)) {
+    const fov = (camera.getEffectiveFOV() * Math.PI) / 180
+    const denominator = 2 * Math.tan(fov / 2) * (width / Math.max(height, 1))
+    if (denominator > 0) controls.dollyTo(Math.max(0.001, viewWidth / denominator), false)
+    return
+  }
+  if (isOrthographicCamera(camera) && viewWidth > 0) {
+    controls.zoomTo(Math.max(0.001, (camera.right - camera.left) / viewWidth), false)
+  }
+}
+
+export function useViewerCameraNavigationSync(controls: RefObject<CameraControlsImpl | null>) {
+  const camera = useThree((state) => state.camera)
+  const size = useThree((state) => state.size)
+  const suppressPublish = useRef(false)
+  const pendingPose = useRef<CameraPose | null>(null)
+
+  const publishCurrentPose = useCallback(() => {
+    const control = controls.current
+    if (!control || suppressPublish.current) return
+    control.getPosition(position, false)
+    control.getTarget(target, false)
+    const projection = isPerspectiveCamera(camera)
+      ? 'perspective'
+      : isOrthographicCamera(camera)
+        ? 'orthographic'
+        : null
+    if (!projection) return
+    const pose = normalizeCameraPose({
+      position: [position.x, position.y, position.z],
+      target: [target.x, target.y, target.z],
+      projection,
+      viewWidth: cameraViewWidth(camera, position.distanceTo(target), size.width, size.height),
+      ...(isPerspectiveCamera(camera) ? { fov: camera.fov } : {}),
+    })
+    if (pose) publishCameraPose(pose)
+  }, [camera, controls, size.height, size.width])
+
+  const applyPendingPose = useCallback(() => {
+    const control = controls.current
+    const pose = pendingPose.current
+    if (!(control && pose)) return
+    const projectionMatches =
+      (pose.projection === 'perspective' && isPerspectiveCamera(camera)) ||
+      (pose.projection === 'orthographic' && isOrthographicCamera(camera))
+    if (!projectionMatches) return
+
+    pendingPose.current = null
+    suppressPublish.current = true
+    try {
+      if (pose.fov !== undefined && isPerspectiveCamera(camera)) {
+        camera.fov = pose.fov
+        camera.updateProjectionMatrix()
+      }
+      control.setLookAt(
+        pose.position[0],
+        pose.position[1],
+        pose.position[2],
+        pose.target[0],
+        pose.target[1],
+        pose.target[2],
+        false,
+      )
+      if (pose.viewWidth !== undefined) {
+        applyViewWidth(control, camera, pose.viewWidth, size.width, size.height)
+      }
+      control.update(0)
+    } finally {
+      suppressPublish.current = false
+      publishCurrentPose()
+    }
+  }, [camera, controls, publishCurrentPose, size.height, size.width])
+
+  useEffect(() => {
+    applyPendingPose()
+  }, [applyPendingPose])
+
+  useEffect(() => {
+    const applyPose = (value: CameraPose) => {
+      const pose = normalizeCameraPose(value)
+      if (!pose) return
+      pendingPose.current = pose
+      if (useViewer.getState().cameraMode !== pose.projection) {
+        useViewer.getState().setCameraMode(pose.projection)
+        return
+      }
+      applyPendingPose()
+    }
+    emitter.on('camera-controls:apply-pose', applyPose)
+    return () => emitter.off('camera-controls:apply-pose', applyPose)
+  }, [applyPendingPose])
+
+  useEffect(() => {
+    const frame = requestAnimationFrame(publishCurrentPose)
+    return () => cancelAnimationFrame(frame)
+  }, [publishCurrentPose])
+
+  return publishCurrentPose
+}

package/src/components/viewer/viewer-stage-modes.test.ts

@@ -0,0 +1,38 @@
+import { describe, expect, test } from 'bun:test'
+import {
+  normalizeViewerStageModes,
+  resolveMobileViewerStageMode,
+  resolveViewerStageMode,
+  viewerStageIncludes3D,
+} from './viewer-stage-modes'
+
+describe('viewer stage modes', () => {
+  test('supports every ordered combination without duplicates', () => {
+    expect(normalizeViewerStageModes(['split', '3d', 'split'])).toEqual(['3d', 'split'])
+    expect(normalizeViewerStageModes(['2d'])).toEqual(['2d'])
+    expect(normalizeViewerStageModes([])).toEqual(['3d'])
+  })
+
+  test('reuses normalized combinations across inline prop arrays', () => {
+    expect(normalizeViewerStageModes(['split', '3d'])).toBe(
+      normalizeViewerStageModes(['3d', 'split']),
+    )
+  })
+
+  test('falls back to the first enabled mode', () => {
+    expect(resolveViewerStageMode('split', ['3d', '2d'])).toBe('3d')
+    expect(resolveViewerStageMode(undefined, ['2d', 'split'])).toBe('2d')
+  })
+
+  test('uses an enabled single-pane mode on mobile but preserves split-only embeds', () => {
+    expect(resolveMobileViewerStageMode('split', ['3d', 'split'])).toBe('3d')
+    expect(resolveMobileViewerStageMode('split', ['2d', 'split'])).toBe('2d')
+    expect(resolveMobileViewerStageMode('split', ['split'])).toBe('split')
+  })
+
+  test('does not require a GPU canvas for a 2D-only embed', () => {
+    expect(viewerStageIncludes3D(['2d'])).toBe(false)
+    expect(viewerStageIncludes3D(['split'])).toBe(true)
+    expect(viewerStageIncludes3D(['3d', '2d'])).toBe(true)
+  })
+})

package/src/components/viewer/viewer-stage-modes.ts

@@ -0,0 +1,49 @@
+export const VIEWER_STAGE_MODES = ['3d', '2d', 'split'] as const
+
+export type ViewerStageMode = (typeof VIEWER_STAGE_MODES)[number]
+
+const THREE_D_MODES = ['3d'] as const
+const TWO_D_MODES = ['2d'] as const
+const SPLIT_MODES = ['split'] as const
+const THREE_D_TWO_D_MODES = ['3d', '2d'] as const
+const THREE_D_SPLIT_MODES = ['3d', 'split'] as const
+const TWO_D_SPLIT_MODES = ['2d', 'split'] as const
+
+export function normalizeViewerStageModes(
+  modes: readonly ViewerStageMode[] | undefined,
+): readonly ViewerStageMode[] {
+  if (!modes) return VIEWER_STAGE_MODES
+
+  const has3D = modes.includes('3d')
+  const has2D = modes.includes('2d')
+  const hasSplit = modes.includes('split')
+
+  if (has3D && has2D && hasSplit) return VIEWER_STAGE_MODES
+  if (has3D && has2D) return THREE_D_TWO_D_MODES
+  if (has3D && hasSplit) return THREE_D_SPLIT_MODES
+  if (has2D && hasSplit) return TWO_D_SPLIT_MODES
+  if (has2D) return TWO_D_MODES
+  if (hasSplit) return SPLIT_MODES
+  return THREE_D_MODES
+}
+
+export function resolveViewerStageMode(
+  mode: ViewerStageMode | undefined,
+  modes: readonly ViewerStageMode[],
+): ViewerStageMode {
+  return mode && modes.includes(mode) ? mode : (modes[0] ?? '3d')
+}
+
+export function resolveMobileViewerStageMode(
+  mode: ViewerStageMode,
+  modes: readonly ViewerStageMode[],
+): ViewerStageMode {
+  if (mode !== 'split') return mode
+  if (modes.includes('2d')) return '2d'
+  if (modes.includes('3d')) return '3d'
+  return 'split'
+}
+
+export function viewerStageIncludes3D(modes: readonly ViewerStageMode[]) {
+  return modes.includes('3d') || modes.includes('split')
+}

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

@@ -0,0 +1,95 @@
+'use client'
+
+import { Box, Columns2, Map as MapIcon } from 'lucide-react'
+import type { ReactNode } from 'react'
+import { cn } from '../../lib/utils'
+import { normalizeViewerStageModes, type ViewerStageMode } from './viewer-stage-modes'
+
+export type { ViewerStageMode } from './viewer-stage-modes'
+
+export type ViewerStageSwitcherProps = {
+  className?: string
+  hideSplitOnMobile?: boolean
+  mode: ViewerStageMode
+  modes?: readonly ViewerStageMode[]
+  onChange: (mode: ViewerStageMode) => void
+}
+
+export function ViewerStageSwitcher({
+  className,
+  hideSplitOnMobile = true,
+  mode,
+  modes,
+  onChange,
+}: ViewerStageSwitcherProps) {
+  const enabledModes = normalizeViewerStageModes(modes)
+
+  return (
+    <div
+      aria-label="Viewer layout"
+      className={cn(
+        'dark absolute top-4 left-1/2 z-30 flex -translate-x-1/2 items-center gap-1 rounded-full border border-white/10 bg-neutral-950/82 p-1 text-white shadow-elevation-4 backdrop-blur-xl',
+        className,
+      )}
+      role="group"
+    >
+      {enabledModes.includes('3d') ? (
+        <StageButton
+          active={mode === '3d'}
+          icon={<Box />}
+          label="3D"
+          onClick={() => onChange('3d')}
+        />
+      ) : null}
+      {enabledModes.includes('2d') ? (
+        <StageButton
+          active={mode === '2d'}
+          icon={<MapIcon />}
+          label="2D"
+          onClick={() => onChange('2d')}
+        />
+      ) : null}
+      {enabledModes.includes('split') ? (
+        <StageButton
+          active={mode === 'split'}
+          className={hideSplitOnMobile && enabledModes.length > 1 ? 'hidden md:flex' : undefined}
+          icon={<Columns2 />}
+          label="Split"
+          onClick={() => onChange('split')}
+        />
+      ) : null}
+    </div>
+  )
+}
+
+function StageButton({
+  active,
+  className,
+  icon,
+  label,
+  onClick,
+}: {
+  active: boolean
+  className?: string
+  icon: ReactNode
+  label: string
+  onClick: () => void
+}) {
+  return (
+    <button
+      aria-pressed={active}
+      className={cn(
+        'flex h-8 items-center gap-1.5 rounded-full px-3 font-medium text-xs',
+        active
+          ? 'bg-white text-neutral-950 shadow-sm'
+          : 'text-neutral-300 transition-colors hover:bg-white/10 hover:text-white',
+        className,
+      )}
+      onClick={onClick}
+      type="button"
+    >
+      <span className="[&>svg]:size-3.5">{icon}</span>
+      {label}
+    </button>
+  )
+}

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

@@ -0,0 +1,47 @@
+import { describe, expect, test } from 'bun:test'
+import { LevelNode } from '@pascal-app/core/schema'
+import { renderToStaticMarkup } from 'react-dom/server'
+import type { FloorplanPreviewScene } from './floorplan-preview'
+import { ViewerStage } from './viewer-stage'
+
+const level = LevelNode.parse({ id: 'level_ground', type: 'level' })
+const scene: FloorplanPreviewScene = { nodes: { [level.id]: level } }
+
+describe('ViewerStage', () => {
+  test('owns synchronized 2D and 3D composition by default', () => {
+    const markup = renderToStaticMarkup(
+      <ViewerStage mode="split" scene={scene} showLevelSelector={false}>
+        <div data-test-viewer-content="" />
+      </ViewerStage>,
+    )
+
+    expect(markup).toContain('data-pascal-viewer-stage="split"')
+    expect(markup).toContain('data-pascal-navigation-sync="on"')
+    expect(markup).toContain('data-pascal-viewer-3d="true"')
+    expect(markup).toContain('data-floorplan-preview=""')
+    expect(markup).toContain('viewBox="0 0 48 48"')
+  })
+
+  test('keeps a 2D-only embed free of a 3D canvas mount', () => {
+    const markup = renderToStaticMarkup(
+      <ViewerStage mode="2d" modes={['2d']} scene={scene} showLevelSelector={false} />,
+    )
+
+    expect(markup).toContain('data-pascal-viewer-stage="2d"')
+    expect(markup).not.toContain('data-pascal-viewer-3d')
+    expect(markup).toContain('data-floorplan-preview=""')
+  })
+
+  test('supports an explicit navigation synchronization opt-out', () => {
+    const markup = renderToStaticMarkup(
+      <ViewerStage
+        mode="split"
+        scene={scene}
+        showLevelSelector={false}
+        synchronizeNavigation={false}
+      />,
+    )
+
+    expect(markup).toContain('data-pascal-navigation-sync="off"')
+  })
+})

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

@@ -0,0 +1,218 @@
+'use client'
+
+import { type AnyNode, type AnyNodeId, useScene } from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import type { ReactNode } from 'react'
+import { useCallback, useEffect, useMemo, useState } from 'react'
+import { useShallow } from 'zustand/react/shallow'
+import { cn } from '../../lib/utils'
+import { FloorplanPreview, type FloorplanPreviewScene } from './floorplan-preview'
+import {
+  normalizeViewerStageModes,
+  resolveMobileViewerStageMode,
+  resolveViewerStageMode,
+  type ViewerStageMode,
+  viewerStageIncludes3D,
+} from './viewer-stage-modes'
+import { ViewerStageSwitcher } from './viewer-stage-switcher'
+
+export type ViewerStageProps = {
+  children?: ReactNode
+  className?: string
+  collapseSplitOnMobile?: boolean
+  compassHost?: Element | null
+  defaultMode?: ViewerStageMode
+  floorplanClassName?: string
+  levelId?: string | null
+  mode?: ViewerStageMode
+  modes?: readonly ViewerStageMode[]
+  onLevelChange?: (levelId: string) => void
+  onModeChange?: (mode: ViewerStageMode) => void
+  scene?: FloorplanPreviewScene | null
+  showCompass?: boolean
+  showLevelSelector?: boolean
+  showSwitcher?: boolean
+  switcherClassName?: string
+  synchronizeNavigation?: boolean
+  threeDClassName?: string
+}
+
+const EMPTY_LEVEL_IDS: string[] = []
+
+function levelNodeIds(nodes: Record<string, AnyNode>) {
+  return Object.values(nodes)
+    .filter((node) => node.type === 'level')
+    .sort(
+      (left, right) =>
+        ((left as { level?: number }).level ?? 0) - ((right as { level?: number }).level ?? 0),
+    )
+    .map((node) => node.id)
+}
+
+function selectViewerLevel(nodes: Record<string, AnyNode>, levelId: string) {
+  const level = nodes[levelId as AnyNodeId]
+  if (level?.type !== 'level') return
+  const building = level.parentId ? nodes[level.parentId as AnyNodeId] : null
+  const viewer = useViewer.getState()
+  viewer.setSelection({
+    buildingId: building?.type === 'building' ? building.id : null,
+    levelId: level.id,
+    selectedIds: [],
+    zoneId: null,
+  })
+  viewer.setLevelMode('solo')
+}
+
+export function ViewerStage({
+  children,
+  className,
+  collapseSplitOnMobile = true,
+  compassHost,
+  defaultMode,
+  floorplanClassName,
+  levelId,
+  mode: controlledMode,
+  modes,
+  onLevelChange,
+  onModeChange,
+  scene,
+  showCompass = true,
+  showLevelSelector = true,
+  showSwitcher = true,
+  switcherClassName,
+  synchronizeNavigation = true,
+  threeDClassName,
+}: ViewerStageProps) {
+  const enabledModes = normalizeViewerStageModes(modes)
+  const [internalMode, setInternalMode] = useState(() =>
+    resolveViewerStageMode(defaultMode, enabledModes),
+  )
+  const activeMode = resolveViewerStageMode(controlledMode ?? internalMode, enabledModes)
+  const storeLevelIds = useScene(
+    useShallow((state) => (scene ? EMPTY_LEVEL_IDS : levelNodeIds(state.nodes))),
+  )
+  const externalLevelIds = useMemo(() => (scene ? levelNodeIds(scene.nodes) : null), [scene])
+  const levelIds = externalLevelIds ?? storeLevelIds
+  const selectedLevelId = useViewer((state) => state.selection.levelId)
+  const [internalLevelId, setInternalLevelId] = useState<string | null>(null)
+  const [internalCompassHost, setInternalCompassHost] = useState<HTMLDivElement | null>(null)
+  const resolvedCompassHost = compassHost ?? internalCompassHost
+  const floorplanEnabled = enabledModes.includes('2d') || enabledModes.includes('split')
+  const threeDEnabled = viewerStageIncludes3D(enabledModes)
+  const mountFloorplan = floorplanEnabled || showCompass
+
+  const requestMode = useCallback(
+    (nextMode: ViewerStageMode) => {
+      if (!enabledModes.includes(nextMode)) return
+      if (controlledMode === undefined) setInternalMode(nextMode)
+      onModeChange?.(nextMode)
+    },
+    [controlledMode, enabledModes, onModeChange],
+  )
+
+  useEffect(() => {
+    if (controlledMode !== undefined) {
+      if (controlledMode !== activeMode) onModeChange?.(activeMode)
+      return
+    }
+    if (internalMode !== activeMode) setInternalMode(activeMode)
+  }, [activeMode, controlledMode, internalMode, onModeChange])
+
+  useEffect(() => {
+    if (!collapseSplitOnMobile) return
+    const mediaQuery = window.matchMedia('(max-width: 767px)')
+    const resolveMode = () => {
+      if (!mediaQuery.matches) return
+      const nextMode = resolveMobileViewerStageMode(activeMode, enabledModes)
+      if (nextMode !== activeMode) requestMode(nextMode)
+    }
+    resolveMode()
+    mediaQuery.addEventListener('change', resolveMode)
+    return () => mediaQuery.removeEventListener('change', resolveMode)
+  }, [activeMode, collapseSplitOnMobile, enabledModes, requestMode])
+
+  const chooseLevel = useCallback(
+    (nextLevelId: string, notify = true) => {
+      setInternalLevelId(nextLevelId)
+      selectViewerLevel(scene?.nodes ?? useScene.getState().nodes, nextLevelId)
+      if (notify) onLevelChange?.(nextLevelId)
+    },
+    [onLevelChange, scene],
+  )
+
+  useEffect(() => {
+    if (activeMode === '3d' || levelIds.length === 0) return
+    const nextLevelId =
+      (levelId && levelIds.includes(levelId) ? levelId : null) ??
+      (selectedLevelId && levelIds.includes(selectedLevelId) ? selectedLevelId : null) ??
+      (internalLevelId && levelIds.includes(internalLevelId) ? internalLevelId : null) ??
+      levelIds[0] ??
+      null
+    if (nextLevelId) chooseLevel(nextLevelId, false)
+  }, [activeMode, chooseLevel, internalLevelId, levelId, levelIds, selectedLevelId])
+
+  return (
+    <div
+      className={cn('relative h-full w-full overflow-hidden bg-neutral-100', className)}
+      data-pascal-navigation-sync={synchronizeNavigation ? 'on' : 'off'}
+      data-pascal-viewer-stage={activeMode}
+    >
+      {showCompass && compassHost === undefined ? (
+        <div className="pointer-events-none absolute inset-0 z-30" ref={setInternalCompassHost} />
+      ) : null}
+
+      {showSwitcher && enabledModes.length > 1 ? (
+        <ViewerStageSwitcher
+          className={switcherClassName}
+          hideSplitOnMobile={collapseSplitOnMobile}
+          mode={activeMode}
+          modes={enabledModes}
+          onChange={requestMode}
+        />
+      ) : null}
+
+      <div
+        className={
+          activeMode === 'split'
+            ? 'absolute inset-0 grid grid-rows-2 md:grid-cols-2 md:grid-rows-1'
+            : 'absolute inset-0'
+        }
+      >
+        {threeDEnabled ? (
+          <div
+            className={cn(
+              activeMode === '2d'
+                ? 'pointer-events-none invisible absolute inset-0 h-full w-full'
+                : 'relative h-full min-h-0 w-full min-w-0',
+              threeDClassName,
+            )}
+            data-pascal-viewer-3d
+          >
+            {children}
+          </div>
+        ) : null}
+
+        {mountFloorplan ? (
+          <FloorplanPreview
+            className={cn(
+              activeMode === '3d'
+                ? 'hidden'
+                : activeMode === 'split'
+                  ? 'min-h-0 min-w-0 border-border border-t md:border-t-0 md:border-l'
+                  : 'h-full w-full',
+              floorplanClassName,
+            )}
+            compassHost={resolvedCompassHost}
+            levelId={levelId ?? internalLevelId}
+            navigationVisible={activeMode !== '3d'}
+            onLevelChange={chooseLevel}
+            scene={scene}
+            showCompass={showCompass}
+            showLevelSelector={showLevelSelector}
+            synchronizeNavigation={synchronizeNavigation}
+          />
+        ) : null}
+      </div>
+    </div>
+  )
+}

package/src/components/viewer-overlay.tsx

@@ -39,6 +39,7 @@ interface ViewerOverlayProps {
   owner?: ProjectOwner | null
   canShowScans?: boolean
   canShowGuides?: boolean
+  hideBottomBar?: boolean
   onBack?: () => void
 }
 
@@ -47,17 +48,20 @@ export const ViewerOverlay = ({
   owner,
   canShowScans = true,
   canShowGuides = true,
+  hideBottomBar = false,
   onBack,
 }: ViewerOverlayProps) => (
   <>
     <ViewerSceneHeader onBack={onBack} owner={owner} projectName={projectName} />
-    <ViewerControlsBar
-      canShowGuides={canShowGuides}
-      canShowScans={canShowScans}
-      onWalkthroughToggle={() => {
-        flushSync(() => useEditor.getState().setFirstPersonMode(true))
-        requestWalkthroughPointerLock()
-      }}
-    />
+    {!hideBottomBar ? (
+      <ViewerControlsBar
+        canShowGuides={canShowGuides}
+        canShowScans={canShowScans}
+        onWalkthroughToggle={() => {
+          flushSync(() => useEditor.getState().setFirstPersonMode(true))
+          requestWalkthroughPointerLock()
+        }}
+      />
+    ) : null}
   </>
 )

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

@@ -1,5 +1,5 @@
 import { describe, expect, test } from 'bun:test'
-import { isSuspiciousNodeDrop } from './use-auto-save'
+import { createStoredNodeCountTracker, isSuspiciousNodeDrop } from './use-auto-save'
 
 describe('isSuspiciousNodeDrop', () => {
   test('blocks populated scenes from being flushed as empty skeletons', () => {
@@ -12,3 +12,52 @@ 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)
+  })
+})