@pascal-app/editor 0.7.0 → 0.8.0

package/src/components/editor/snapshot-capture-overlay.tsx

@@ -0,0 +1,465 @@
+'use client'
+
+import { emitter } from '@pascal-app/core'
+import { Camera, Check, Crop, Loader2, Maximize2, Monitor, X } from 'lucide-react'
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { useIsMobile } from '../../hooks/use-mobile'
+import { triggerSFX } from '../../lib/sfx-bus'
+import useEditor from '../../store/use-editor'
+
+type CaptureMode = 'standard' | 'viewport' | 'area'
+type CaptureState = 'idle' | 'capturing' | 'saved'
+
+interface DragPoint {
+  x: number
+  y: number
+}
+
+interface Drag {
+  start: DragPoint
+  end: DragPoint
+}
+
+function getResolution(
+  mode: CaptureMode,
+  overlayEl: HTMLDivElement | null,
+  drag: Drag | null,
+): { w: number; h: number } | null {
+  if (mode === 'standard') return { w: 1920, h: 1080 }
+
+  if (!overlayEl) return null
+  const rect = overlayEl.getBoundingClientRect()
+  const dpr = Math.min(window.devicePixelRatio, 1.5)
+
+  if (mode === 'viewport') {
+    return { w: Math.round(rect.width * dpr), h: Math.round(rect.height * dpr) }
+  }
+
+  if (mode === 'area' && drag) {
+    const w = Math.abs(drag.end.x - drag.start.x)
+    const h = Math.abs(drag.end.y - drag.start.y)
+    if (w < 4 || h < 4) return null
+    return { w: Math.round(w * dpr), h: Math.round(h * dpr) }
+  }
+
+  return null
+}
+
+export function SnapshotCaptureOverlay({ projectId }: { projectId: string }) {
+  const isCaptureMode = useEditor((s) => s.isCaptureMode)
+  const setCaptureMode = useEditor((s) => s.setCaptureMode)
+  const isMobile = useIsMobile()
+
+  const [mode, setMode] = useState<CaptureMode>('standard')
+  const [drag, setDrag] = useState<Drag | null>(null)
+  const [isDragging, setIsDragging] = useState(false)
+  const [captureState, setCaptureState] = useState<CaptureState>('idle')
+  const overlayRef = useRef<HTMLDivElement>(null)
+
+  // Dismiss on Esc
+  useEffect(() => {
+    if (!isCaptureMode) return
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') setCaptureMode(false)
+    }
+    window.addEventListener('keydown', onKey)
+    return () => window.removeEventListener('keydown', onKey)
+  }, [isCaptureMode, setCaptureMode])
+
+  // Reset local state when entering capture mode
+  useEffect(() => {
+    if (isCaptureMode) {
+      setMode('standard')
+      setDrag(null)
+      setIsDragging(false)
+      setCaptureState('idle')
+    }
+  }, [isCaptureMode])
+
+  // Listen for snapshot saved to show feedback then exit
+  useEffect(() => {
+    const handler = () => {
+      setCaptureState('saved')
+      setTimeout(() => {
+        setCaptureMode(false)
+        setCaptureState('idle')
+      }, 1500)
+    }
+    emitter.on('snapshot:saved', handler)
+    return () => emitter.off('snapshot:saved', handler)
+  }, [setCaptureMode])
+
+  const dismiss = useCallback(() => setCaptureMode(false), [setCaptureMode])
+
+  // Tracks whether the active drag is a "move entire rect" gesture
+  const moveStartRef = useRef<{ pt: DragPoint; drag: Drag } | null>(null)
+
+  // Area drag handlers — relative to the overlay container
+  const onPointerDown = useCallback(
+    (e: React.PointerEvent<HTMLDivElement>) => {
+      if (mode !== 'area' || captureState !== 'idle') return
+      e.preventDefault()
+      const rect = overlayRef.current!.getBoundingClientRect()
+      const pt = { x: e.clientX - rect.left, y: e.clientY - rect.top }
+
+      // If clicking inside an existing selection → move mode
+      if (drag) {
+        const x0 = Math.min(drag.start.x, drag.end.x)
+        const y0 = Math.min(drag.start.y, drag.end.y)
+        const x1 = Math.max(drag.start.x, drag.end.x)
+        const y1 = Math.max(drag.start.y, drag.end.y)
+        if (pt.x >= x0 && pt.x <= x1 && pt.y >= y0 && pt.y <= y1) {
+          moveStartRef.current = { pt, drag }
+          setIsDragging(true)
+          ;(e.target as HTMLElement).setPointerCapture(e.pointerId)
+          return
+        }
+      }
+
+      // Outside / no selection → start new drag
+      moveStartRef.current = null
+      setDrag({ start: pt, end: pt })
+      setIsDragging(true)
+      ;(e.target as HTMLElement).setPointerCapture(e.pointerId)
+    },
+    [mode, captureState, drag],
+  )
+
+  const onPointerMove = useCallback(
+    (e: React.PointerEvent<HTMLDivElement>) => {
+      if (!isDragging) return
+      const rect = overlayRef.current!.getBoundingClientRect()
+      const pt = {
+        x: Math.max(0, Math.min(e.clientX - rect.left, rect.width)),
+        y: Math.max(0, Math.min(e.clientY - rect.top, rect.height)),
+      }
+      if (moveStartRef.current) {
+        // Move mode: translate the whole rect by the delta
+        const { pt: origin, drag: snapshot } = moveStartRef.current
+        const dx = pt.x - origin.x
+        const dy = pt.y - origin.y
+        setDrag({
+          start: { x: snapshot.start.x + dx, y: snapshot.start.y + dy },
+          end: { x: snapshot.end.x + dx, y: snapshot.end.y + dy },
+        })
+      } else {
+        setDrag((d) => (d ? { start: d.start, end: pt } : null))
+      }
+    },
+    [isDragging],
+  )
+
+  const onPointerUp = useCallback(() => {
+    const wasMoving = moveStartRef.current !== null
+    setIsDragging(false)
+    moveStartRef.current = null
+    // Clear the rect if the user just clicked without drawing (not a move gesture)
+    if (!wasMoving) {
+      setDrag((d) => {
+        if (!d) return null
+        const w = Math.abs(d.end.x - d.start.x)
+        const h = Math.abs(d.end.y - d.start.y)
+        return w < 4 && h < 4 ? null : d
+      })
+    }
+  }, [])
+
+  // Corner-handle resize: re-anchor to the opposite corner then reuse the same drag machinery
+  const onCornerPointerDown = useCallback(
+    (e: React.PointerEvent<HTMLDivElement>, cornerIndex: number) => {
+      if (captureState !== 'idle' || !drag) return
+      e.stopPropagation()
+      e.preventDefault()
+      moveStartRef.current = null
+      const x0 = Math.min(drag.start.x, drag.end.x)
+      const y0 = Math.min(drag.start.y, drag.end.y)
+      const x1 = Math.max(drag.start.x, drag.end.x)
+      const y1 = Math.max(drag.start.y, drag.end.y)
+      // anchor = opposite corner; dragged = current corner
+      const corners: [DragPoint, DragPoint][] = [
+        [
+          { x: x1, y: y1 },
+          { x: x0, y: y0 },
+        ], // TL → anchor BR
+        [
+          { x: x0, y: y1 },
+          { x: x1, y: y0 },
+        ], // TR → anchor BL
+        [
+          { x: x1, y: y0 },
+          { x: x0, y: y1 },
+        ], // BL → anchor TR
+        [
+          { x: x0, y: y0 },
+          { x: x1, y: y1 },
+        ], // BR → anchor TL
+      ]
+      const [anchor, current] = corners[cornerIndex]!
+      setDrag({ start: anchor, end: current })
+      setIsDragging(true)
+    },
+    [captureState, drag],
+  )
+
+  const handleCapture = useCallback(() => {
+    if (captureState !== 'idle') return
+
+    let cropRegion: { x: number; y: number; width: number; height: number } | undefined
+    if (mode === 'area' && drag && overlayRef.current) {
+      const rect = overlayRef.current.getBoundingClientRect()
+      const x0 = Math.min(drag.start.x, drag.end.x)
+      const y0 = Math.min(drag.start.y, drag.end.y)
+      const w = Math.abs(drag.end.x - drag.start.x)
+      const h = Math.abs(drag.end.y - drag.start.y)
+      cropRegion = {
+        x: x0 / rect.width,
+        y: y0 / rect.height,
+        width: w / rect.width,
+        height: h / rect.height,
+      }
+    }
+
+    setCaptureState('capturing')
+    triggerSFX('sfx:snapshot-capture')
+    emitter.emit('camera-controls:generate-thumbnail', {
+      projectId,
+      captureMode: mode,
+      cropRegion,
+    })
+  }, [captureState, mode, drag, projectId])
+
+  if (!isCaptureMode) return null
+
+  const resolution = getResolution(mode, overlayRef.current, drag)
+
+  // Area selection rect (CSS px, relative to overlay)
+  const selectionStyle =
+    mode === 'area' && drag
+      ? {
+          left: Math.min(drag.start.x, drag.end.x),
+          top: Math.min(drag.start.y, drag.end.y),
+          width: Math.abs(drag.end.x - drag.start.x),
+          height: Math.abs(drag.end.y - drag.start.y),
+        }
+      : null
+
+  const hasSelection =
+    selectionStyle != null && selectionStyle.width > 3 && selectionStyle.height > 3
+
+  const captureDisabled = captureState !== 'idle' || (mode === 'area' && !hasSelection)
+
+  return (
+    <div className="pointer-events-none absolute inset-0 z-40" ref={overlayRef}>
+      {/* Area mode: dim layer + crosshair cursor + drag-to-select */}
+      {mode === 'area' && (
+        <div
+          className="pointer-events-auto absolute inset-0 bg-black/30"
+          onPointerDown={onPointerDown}
+          onPointerMove={(e) => {
+            onPointerMove(e)
+            // Update cursor: 'move' when hovering inside an existing selection
+            if (!isDragging && drag && overlayRef.current) {
+              const rect = overlayRef.current.getBoundingClientRect()
+              const px = e.clientX - rect.left
+              const py = e.clientY - rect.top
+              const x0 = Math.min(drag.start.x, drag.end.x)
+              const y0 = Math.min(drag.start.y, drag.end.y)
+              const x1 = Math.max(drag.start.x, drag.end.x)
+              const y1 = Math.max(drag.start.y, drag.end.y)
+              e.currentTarget.style.cursor =
+                px >= x0 && px <= x1 && py >= y0 && py <= y1 ? 'move' : 'crosshair'
+            }
+          }}
+          onPointerUp={onPointerUp}
+          style={{ cursor: 'crosshair' }}
+        >
+          {/* "No selection" hint */}
+          {!selectionStyle && (
+            <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+              <span className="rounded-full bg-black/40 px-4 py-2 text-sm text-white backdrop-blur-sm">
+                Drag the area you want to capture
+              </span>
+            </div>
+          )}
+
+          {/* Selection rect */}
+          {selectionStyle && (
+            <div
+              style={{
+                position: 'absolute',
+                left: selectionStyle.left,
+                top: selectionStyle.top,
+                width: selectionStyle.width,
+                height: selectionStyle.height,
+                pointerEvents: 'none',
+                boxShadow: '0 0 0 9999px rgba(0,0,0,0.35)',
+                border: '2px dashed rgba(255,255,255,0.85)',
+                background: 'rgba(255,255,255,0.04)',
+              }}
+            >
+              {/* Corner handles */}
+              {(
+                [
+                  { pos: { top: -5, left: -5 }, cursor: 'nwse-resize' },
+                  { pos: { top: -5, right: -5 }, cursor: 'nesw-resize' },
+                  { pos: { bottom: -5, left: -5 }, cursor: 'nesw-resize' },
+                  { pos: { bottom: -5, right: -5 }, cursor: 'nwse-resize' },
+                ] as const
+              ).map(({ pos, cursor }, i) => (
+                <div
+                  key={i}
+                  onPointerDown={(e) => onCornerPointerDown(e, i)}
+                  style={{
+                    position: 'absolute',
+                    width: 10,
+                    height: 10,
+                    borderRadius: '50%',
+                    background: 'white',
+                    boxShadow: '0 1px 4px rgba(0,0,0,0.4)',
+                    pointerEvents: 'auto',
+                    cursor,
+                    ...pos,
+                  }}
+                />
+              ))}
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Top-right dismiss button (icon-only on mobile) */}
+      <div className="pointer-events-auto absolute top-4 right-4">
+        <button
+          aria-label="Close capture mode"
+          className="flex items-center gap-1.5 rounded-full border border-white/20 bg-black/60 px-3 py-1.5 text-white/80 text-xs backdrop-blur-sm transition-colors hover:bg-black/80 hover:text-white"
+          onClick={dismiss}
+          type="button"
+        >
+          <X className="h-3 w-3" />
+          {!isMobile && 'Esc to cancel'}
+        </button>
+      </div>
+
+      {/* Bottom-center mode toolbar */}
+      <div className="pointer-events-auto absolute bottom-6 left-1/2 -translate-x-1/2">
+        {(() => {
+          const modeButtons = (
+            <>
+              <ModeButton
+                active={mode === 'standard'}
+                badge="16:9"
+                icon={<Monitor className="h-3.5 w-3.5" />}
+                label="Standard"
+                onClick={() => {
+                  setMode('standard')
+                  setDrag(null)
+                }}
+              />
+              <ModeButton
+                active={mode === 'viewport'}
+                icon={<Maximize2 className="h-3.5 w-3.5" />}
+                label="Viewport"
+                onClick={() => {
+                  setMode('viewport')
+                  setDrag(null)
+                }}
+              />
+              <ModeButton
+                active={mode === 'area'}
+                icon={<Crop className="h-3.5 w-3.5" />}
+                label="Area"
+                onClick={() => setMode('area')}
+              />
+            </>
+          )
+
+          const resolutionDisplay = (
+            <span className="min-w-[80px] text-center text-white/50 text-xs tabular-nums">
+              {resolution ? `${resolution.w} × ${resolution.h}` : '—'}
+            </span>
+          )
+
+          const captureButton = (
+            <button
+              className="flex items-center gap-1.5 rounded-full bg-primary px-4 py-1.5 font-medium text-primary-foreground text-xs transition-opacity disabled:opacity-50"
+              disabled={captureDisabled}
+              onClick={handleCapture}
+              type="button"
+            >
+              {captureState === 'capturing' ? (
+                <>
+                  <Loader2 className="h-3.5 w-3.5 animate-spin" />
+                  Capturing
+                </>
+              ) : captureState === 'saved' ? (
+                <>
+                  <Check className="h-3.5 w-3.5" />
+                  Saved
+                </>
+              ) : (
+                <>
+                  <Camera className="h-3.5 w-3.5" />
+                  Capture
+                </>
+              )}
+            </button>
+          )
+
+          if (isMobile) {
+            return (
+              <div className="flex flex-col items-stretch gap-2 rounded-2xl border border-white/10 bg-neutral-900/95 px-2 py-2 shadow-xl backdrop-blur-md">
+                <div className="flex items-center justify-center gap-1">{modeButtons}</div>
+                <div className="flex items-center justify-center gap-2 border-white/10 border-t pt-2">
+                  {resolutionDisplay}
+                  {captureButton}
+                </div>
+              </div>
+            )
+          }
+
+          return (
+            <div className="flex items-center gap-1 rounded-full border border-white/10 bg-neutral-900/95 px-2 py-2 shadow-xl backdrop-blur-md">
+              {modeButtons}
+              <div className="mx-1 h-4 w-px bg-white/10" />
+              {resolutionDisplay}
+              <div className="mx-1 h-4 w-px bg-white/10" />
+              {captureButton}
+            </div>
+          )
+        })()}
+      </div>
+    </div>
+  )
+}
+
+function ModeButton({
+  active,
+  icon,
+  label,
+  badge,
+  onClick,
+}: {
+  active: boolean
+  icon: React.ReactNode
+  label: string
+  badge?: string
+  onClick: () => void
+}) {
+  return (
+    <button
+      className={`flex items-center gap-1.5 rounded-full px-3 py-1.5 text-xs transition-colors ${
+        active ? 'bg-white/15 text-white ring-1 ring-white/20' : 'text-white/50 hover:text-white/90'
+      }`}
+      onClick={onClick}
+      type="button"
+    >
+      {icon}
+      {label}
+      {badge && (
+        <span className="rounded-sm bg-white/10 px-1 py-0.5 font-medium text-[10px] text-white/40 leading-none">
+          {badge}
+        </span>
+      )}
+    </button>
+  )
+}

package/src/components/editor/thumbnail-generator.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { emitter, sceneRegistry, useScene } from '@pascal-app/core'
+import { emitter, sceneRegistry } from '@pascal-app/core'
 import { SSGI_PARAMS, snapLevelsToTruePositions, useViewer } from '@pascal-app/viewer'
 import type { CameraControls } from '@react-three/drei'
 import { useThree } from '@react-three/fiber'
@@ -28,7 +28,6 @@ import { EDITOR_LAYER } from '../../lib/constants'
 
 const THUMBNAIL_WIDTH = 1920
 const THUMBNAIL_HEIGHT = 1080
-const AUTO_SAVE_DELAY = 10_000
 
 export interface SnapshotCameraData {
   position: [number, number, number]
@@ -49,8 +48,6 @@ export const ThumbnailGenerator = ({ onThumbnailCapture }: ThumbnailGeneratorPro
   const mainCamera = useThree((state) => state.camera)
   const controls = useThree((state) => state.controls) as CameraControls | null
   const isGenerating = useRef(false)
-  const debounceTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
-  const pendingAutoRef = useRef(false)
   const onThumbnailCaptureRef = useRef(onThumbnailCapture)
 
   const thumbnailCameraRef = useRef<THREE.PerspectiveCamera | null>(null)
@@ -61,7 +58,7 @@ export const ThumbnailGenerator = ({ onThumbnailCapture }: ThumbnailGeneratorPro
     onThumbnailCaptureRef.current = onThumbnailCapture
   }, [onThumbnailCapture])
 
-  // Build the thumbnail camera, SSGI pipeline, and render target once, reused on every capture.
+  // Build the thumbnail camera, SSGI pipeline, and render target once — reused on every capture.
   useEffect(() => {
     const cam = new THREE.PerspectiveCamera(60, THUMBNAIL_WIDTH / THUMBNAIL_HEIGHT, 0.1, 1000)
     cam.layers.disable(EDITOR_LAYER)
@@ -75,7 +72,7 @@ export const ThumbnailGenerator = ({ onThumbnailCapture }: ThumbnailGeneratorPro
         if (!mounted) return
 
         // pass() handles MRT internally for all material types, including custom
-        // shaders, unlike renderer.setMRT() which crashes on non-NodeMaterials.
+        // shaders — unlike renderer.setMRT() which crashes on non-NodeMaterials.
         // pass() also respects camera.layers, so EDITOR_LAYER objects are filtered.
         const scenePass = pass(scene, cam)
         scenePass.setMRT(
@@ -117,15 +114,15 @@ export const ThumbnailGenerator = ({ onThumbnailCapture }: ThumbnailGeneratorPro
         const ao = (denoisePass as any).r
         const finalOutput = vec4(scenePassColor.rgb.mul(ao), scenePassColor.a)
 
-        // FXAA requires a texture node as input, convertToTexture renders finalOutput
-        // into an intermediate RT so FXAA can sample it with neighbor UV offsets.
+        // FXAA requires a texture node as input; convertToTexture renders finalOutput
+        // into an intermediate RT so FXAA can sample it with neighbour UV offsets.
         const aaOutput = fxaa(convertToTexture(finalOutput))
 
         const pipeline = new RenderPipeline(gl as unknown as WebGPURenderer)
         pipeline.outputNode = aaOutput
         pipelineRef.current = pipeline
 
-        // Dedicated render target, pipeline outputs here instead of the canvas,
+        // Dedicated render target — pipeline outputs here instead of the canvas,
         // so R3F's main render loop can never overwrite our capture.
         const { width, height } = gl.domElement
         renderTargetRef.current = new RenderTarget(width, height, { depthBuffer: true })
@@ -176,7 +173,7 @@ export const ThumbnailGenerator = ({ onThumbnailCapture }: ThumbnailGeneratorPro
         thumbnailCamera.aspect = width / height
         thumbnailCamera.updateProjectionMatrix()
 
-        // Capture camera data for snapshot storage.
+        // Capture camera data for snapshot storage
         const pos = mainCamera.position
         let tgt: [number, number, number] | null = null
         if (controls && 'getTarget' in controls) {
@@ -192,7 +189,7 @@ export const ThumbnailGenerator = ({ onThumbnailCapture }: ThumbnailGeneratorPro
           ...(isOrtho && { zoom: (mainCamera as THREE.OrthographicCamera).zoom }),
         }
 
-        // For auto-save, snap levels to stacked positions and reset levelMode.
+        // For auto-save: snap levels to stacked positions and reset levelMode
         let restoreLevelMode: (() => void) | null = null
         let restoreLevels: () => void = () => {}
         if (snapLevels) {
@@ -205,7 +202,7 @@ export const ThumbnailGenerator = ({ onThumbnailCapture }: ThumbnailGeneratorPro
         }
 
         // Hide scan and guide nodes directly so they are excluded from the
-        // thumbnail regardless of whether ScanSystem or GuideSystem listeners are
+        // thumbnail regardless of whether ScanSystem/GuideSystem listeners are
         // registered. Returns a function that restores the original visibility.
         const restoreNodeVisibility = (() => {
           const saved = new Map<THREE.Object3D, boolean>()
@@ -231,7 +228,7 @@ export const ThumbnailGenerator = ({ onThumbnailCapture }: ThumbnailGeneratorPro
         if (pipelineRef.current && renderTargetRef.current) {
           const rt = renderTargetRef.current
 
-          // Resize RT if the canvas dimensions changed.
+          // Resize RT if the canvas dimensions changed
           if (rt.width !== width || rt.height !== height) {
             rt.setSize(width, height)
           }
@@ -248,7 +245,7 @@ export const ThumbnailGenerator = ({ onThumbnailCapture }: ThumbnailGeneratorPro
           emitter.emit('thumbnail:after-capture', undefined)
 
           // Restore level positions, levelMode, and node visibility immediately after the
-          // render, before the async GPU readback.
+          // render — before the async GPU readback.
           restoreLevels()
           restoreLevelMode?.()
           restoreNodeVisibility()
@@ -339,6 +336,7 @@ export const ThumbnailGenerator = ({ onThumbnailCapture }: ThumbnailGeneratorPro
             offscreen.getContext('2d')!.drawImage(srcCanvas, sx, sy, outW, outH, 0, 0, outW, outH)
             blob = await offscreen.convertToBlob({ type: 'image/png' })
           } else {
+            // Standard: center-crop to 1920×1080 aspect ratio
             const srcAspect = width / height
             const dstAspect = THUMBNAIL_WIDTH / THUMBNAIL_HEIGHT
             let sx = 0,
@@ -364,7 +362,7 @@ export const ThumbnailGenerator = ({ onThumbnailCapture }: ThumbnailGeneratorPro
           if (captureMode !== undefined) cameraData.captureMode = captureMode
           cameraData.resolution = { w: outW, h: outH }
         } else {
-          // Fallback: plain render directly to the canvas.
+          // Fallback: plain render directly to the canvas
           emitter.emit('thumbnail:before-capture', undefined)
           gl.render(scene, thumbnailCamera)
           emitter.emit('thumbnail:after-capture', undefined)
@@ -450,10 +448,11 @@ export const ThumbnailGenerator = ({ onThumbnailCapture }: ThumbnailGeneratorPro
   )
 
   // Thumbnail request via emitter. Two call shapes:
-  //  - user-driven capture: `{ projectId, captureMode, cropRegion }`, captures
+  //  - user-driven capture: `{ projectId, captureMode, cropRegion }` — captures
   //    the current pose with the supplied crop.
-  //  - auto-save capture: `{ projectId, snapLevels: true }`, snaps levels to
-  //    their true positions first for a consistent auto-thumbnail angle.
+  //  - host-driven auto-save: `{ projectId, snapLevels: true }` — snaps levels
+  //    to their true positions first for a consistent auto-thumbnail angle.
+  // The caller owns policy (when to fire, whether the tab is visible).
   useEffect(() => {
     if (!onThumbnailCapture) return
 
@@ -469,49 +468,7 @@ export const ThumbnailGenerator = ({ onThumbnailCapture }: ThumbnailGeneratorPro
     return () => emitter.off('camera-controls:generate-thumbnail', handleGenerateThumbnail)
   }, [generate, onThumbnailCapture])
 
-  // OSS adaptation: keep local debounced auto-capture behavior because the
-  // community host-side autosave hook is not part of this repo.
-  useEffect(() => {
-    if (!onThumbnailCapture) return
-
-    const triggerNow = () => {
-      void generate(true)
-    }
-
-    const scheduleOrDefer = () => {
-      if (document.visibilityState === 'visible') {
-        triggerNow()
-      } else {
-        pendingAutoRef.current = true
-      }
-    }
-
-    const onSceneChange = () => {
-      if (debounceTimerRef.current) clearTimeout(debounceTimerRef.current)
-      debounceTimerRef.current = setTimeout(scheduleOrDefer, AUTO_SAVE_DELAY)
-    }
-
-    const onVisibilityChange = () => {
-      if (document.visibilityState === 'visible' && pendingAutoRef.current) {
-        pendingAutoRef.current = false
-        triggerNow()
-      }
-    }
-
-    const unsubscribe = useScene.subscribe((state, prevState) => {
-      if (state.nodes !== prevState.nodes) onSceneChange()
-    })
-
-    document.addEventListener('visibilitychange', onVisibilityChange)
-
-    return () => {
-      if (debounceTimerRef.current) clearTimeout(debounceTimerRef.current)
-      unsubscribe()
-      document.removeEventListener('visibilitychange', onVisibilityChange)
-    }
-  }, [generate, onThumbnailCapture])
-
-  // Go-to-camera: animate camera to a saved snapshot position or target.
+  // Go-to-camera: animate camera to a saved snapshot position/target
   useEffect(() => {
     const handler = ({
       position,

package/src/components/editor/use-floorplan-background-placement.ts

@@ -144,11 +144,11 @@ export function useFloorplanBackgroundPlacement({
         emitFloorplanGridEvent('click', snappedPoint, event)
         setCursorPoint(snappedPoint)
 
-        if (!roofDraftStart) {
+        if (roofDraftStart) {
+          clearRoofPlacementDraft()
+        } else {
           setRoofDraftStart(snappedPoint)
           setRoofDraftEnd(snappedPoint)
-        } else {
-          clearRoofPlacementDraft()
         }
         return true
       }

package/src/components/editor-2d/renderers/floorplan-draft-layer.tsx

@@ -72,7 +72,12 @@ export const FloorplanDraftLayer = memo(function FloorplanDraftLayer({
       )}
 
       {polygonDraftPolygonPoints && (
-        <polygon fill={draftFill} fillOpacity={0.2} points={polygonDraftPolygonPoints} stroke="none" />
+        <polygon
+          fill={draftFill}
+          fillOpacity={0.2}
+          points={polygonDraftPolygonPoints}
+          stroke="none"
+        />
       )}
 
       {polygonDraftPolylinePoints && (