@pascal-app/editor 0.9.1 → 0.9.2

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

@@ -1,7 +1,18 @@
 'use client'
 
 import { emitter, sceneRegistry } from '@pascal-app/core'
-import { GRID_LAYER, SSGI_PARAMS, snapLevelsToTruePositions, useViewer } from '@pascal-app/viewer'
+import {
+  backdropGradient,
+  deepSkyColor,
+  GRID_LAYER,
+  getSceneTheme,
+  horizonHazeColor,
+  packNormalToRGB,
+  SSGI_PARAMS,
+  snapLevelsToTruePositions,
+  unpackRGBToNormal,
+  useViewer,
+} from '@pascal-app/viewer'
 import type { CameraControls } from '@react-three/drei'
 import { useThree } from '@react-three/fiber'
 import { useCallback, useEffect, useRef } from 'react'
@@ -11,16 +22,18 @@ import { ssgi } from 'three/addons/tsl/display/SSGINode.js'
 import { denoise } from 'three/examples/jsm/tsl/display/DenoiseNode.js'
 import { fxaa } from 'three/examples/jsm/tsl/display/FXAANode.js'
 import {
-  colorToDirection,
   convertToTexture,
   diffuseColor,
-  directionToColor,
   float,
+  mix,
   mrt,
   normalView,
   output,
   pass,
   sample,
+  screenUV,
+  smoothstep,
+  uniform,
   vec4,
 } from 'three/tsl'
 import { RenderPipeline, RenderTarget, type WebGPURenderer } from 'three/webgpu'
@@ -54,6 +67,18 @@ export const ThumbnailGenerator = ({ onThumbnailCapture }: ThumbnailGeneratorPro
   const pipelineRef = useRef<RenderPipeline | null>(null)
   const renderTargetRef = useRef<RenderTarget | null>(null)
 
+  // Backdrop compositing for scene snapshots (studio renders, project
+  // thumbnails): theme background + sky gradient, same world-ray math as the
+  // viewport backdrop in viewer's post-processing. Uniform-driven so the one
+  // cached pipeline serves both opaque and transparent (preset/item) captures.
+  const bgColorUniform = useRef(uniform(new THREE.Color('#ffffff')))
+  const bgSkyUniform = useRef(uniform(new THREE.Color('#ffffff')))
+  const bgSkyDeepUniform = useRef(uniform(new THREE.Color('#ffffff')))
+  const bgHazeUniform = useRef(uniform(new THREE.Color('#ffffff')))
+  const bgProjInvUniform = useRef(uniform(new THREE.Matrix4()))
+  const bgCamWorldUniform = useRef(uniform(new THREE.Matrix4()))
+  const bgMixUniform = useRef(uniform(1))
+
   useEffect(() => {
     onThumbnailCaptureRef.current = onThumbnailCapture
   }, [onThumbnailCapture])
@@ -80,7 +105,7 @@ export const ThumbnailGenerator = ({ onThumbnailCapture }: ThumbnailGeneratorPro
           mrt({
             output,
             diffuseColor,
-            normal: directionToColor(normalView),
+            normal: packNormalToRGB(normalView),
           }),
         )
 
@@ -91,7 +116,7 @@ export const ThumbnailGenerator = ({ onThumbnailCapture }: ThumbnailGeneratorPro
         scenePass.getTexture('diffuseColor').type = UnsignedByteType
         scenePass.getTexture('normal').type = UnsignedByteType
 
-        const sceneNormal = sample((uv) => colorToDirection(scenePassNormal.sample(uv)))
+        const sceneNormal = sample((uv) => unpackRGBToNormal(scenePassNormal.sample(uv)))
 
         const giPass = ssgi(scenePassColor, scenePassDepth, sceneNormal, cam as any)
         giPass.sliceCount.value = SSGI_PARAMS.sliceCount
@@ -106,14 +131,49 @@ export const ThumbnailGenerator = ({ onThumbnailCapture }: ThumbnailGeneratorPro
         giPass.useScreenSpaceSampling.value = SSGI_PARAMS.useScreenSpaceSampling
         giPass.useTemporalFiltering = SSGI_PARAMS.useTemporalFiltering
 
-        const giTexture = (giPass as any).getTextureNode()
-        const aoAsRgb = vec4(giTexture.a, giTexture.a, giTexture.a, float(1))
+        // r185: SSGI's AO lives in its own single-channel texture (getAONode)
+        // rather than the alpha of one packed rgba texture.
+        const aoTexture = (giPass as any).getAONode()
+        const aoAsRgb = vec4(aoTexture.r, aoTexture.r, aoTexture.r, float(1))
         const denoisePass = denoise(aoAsRgb, scenePassDepth, sceneNormal, cam)
         denoisePass.index.value = 0
         denoisePass.radius.value = 4
 
-        const ao = (denoisePass as any).r
-        const finalOutput = vec4(scenePassColor.rgb.mul(ao), scenePassColor.a)
+        // Same far-field AO fade as the viewport pipeline — without it the
+        // horizon picks up a visible AO line in captures.
+        const aoFarFade = smoothstep(
+          float(0.9994),
+          float(0.9998),
+          scenePassDepth.sample(screenUV).r,
+        )
+        const ao = mix((denoisePass as any).r, float(1), aoFarFade)
+        const sceneRgb = scenePassColor.rgb.mul(ao)
+
+        // Per-pixel world ray from the capture camera → sky gradient above the
+        // horizon (dir.y = 0), flat background below — mirrors the viewport
+        // backdrop. bgMix 0 bypasses it and keeps the capture transparent.
+        const ndc = vec4(
+          screenUV.x.mul(2).sub(1),
+          float(1).sub(screenUV.y).mul(2).sub(1),
+          1,
+          1,
+        ) as any
+        const viewRay = (bgProjInvUniform.current as any).mul(ndc)
+        const worldDir = (bgCamWorldUniform.current as any)
+          .mul(vec4(viewRay.xyz, 0))
+          .xyz.normalize()
+        const bgGradient = backdropGradient({
+          dirY: worldDir.y,
+          background: bgColorUniform.current,
+          haze: bgHazeUniform.current,
+          sky: bgSkyUniform.current,
+          skyDeep: bgSkyDeepUniform.current,
+        })
+        const alpha = scenePassColor.a
+        const finalOutput = vec4(
+          mix(sceneRgb, mix(bgGradient, sceneRgb, alpha), bgMixUniform.current),
+          mix(alpha, float(1), bgMixUniform.current),
+        )
 
         // FXAA requires a texture node as input; convertToTexture renders finalOutput
         // into an intermediate RT so FXAA can sample it with neighbour UV offsets.
@@ -151,7 +211,11 @@ export const ThumbnailGenerator = ({ onThumbnailCapture }: ThumbnailGeneratorPro
       snapLevels: boolean,
       captureMode?: 'standard' | 'viewport' | 'area',
       cropRegion?: { x: number; y: number; width: number; height: number },
+      standardSize?: { w: number; h: number },
+      transparent = false,
     ) => {
+      const standardW = standardSize?.w ?? THUMBNAIL_WIDTH
+      const standardH = standardSize?.h ?? THUMBNAIL_HEIGHT
       if (isGenerating.current) return
       if (!onThumbnailCaptureRef.current) return
 
@@ -173,6 +237,21 @@ export const ThumbnailGenerator = ({ onThumbnailCapture }: ThumbnailGeneratorPro
         const { width, height } = gl.domElement
         thumbnailCamera.aspect = width / height
         thumbnailCamera.updateProjectionMatrix()
+        // The capture camera never joins the scene graph, so its matrixWorld
+        // is only refreshed by the render itself — too late for the backdrop
+        // uniforms below.
+        thumbnailCamera.updateMatrixWorld()
+
+        const theme = getSceneTheme(useViewer.getState().sceneTheme)
+        bgColorUniform.current.value.set(theme.background)
+        bgSkyUniform.current.value.set(theme.backgroundSky ?? theme.background)
+        bgSkyDeepUniform.current.value.set(deepSkyColor(theme.backgroundSky ?? theme.background))
+        bgHazeUniform.current.value.set(
+          horizonHazeColor(theme.backgroundSky ?? theme.background, theme.appearance),
+        )
+        bgProjInvUniform.current.value.copy(thumbnailCamera.projectionMatrixInverse)
+        bgCamWorldUniform.current.value.copy(thumbnailCamera.matrixWorld)
+        bgMixUniform.current.value = transparent ? 0 : 1
 
         // Capture camera data for snapshot storage
         const pos = mainCamera.position
@@ -202,12 +281,14 @@ export const ThumbnailGenerator = ({ onThumbnailCapture }: ThumbnailGeneratorPro
           restoreLevels = snapLevelsToTruePositions()
         }
 
-        // Hide scan and guide nodes directly so they are excluded from the
-        // thumbnail regardless of whether ScanSystem/GuideSystem listeners are
-        // registered. Returns a function that restores the original visibility.
+        // Hide scan, guide, and spawn nodes directly so they are excluded from
+        // the thumbnail regardless of whether ScanSystem/GuideSystem listeners
+        // are registered. Spawn renders on SCENE_LAYER for occlusion, so the
+        // thumbnail camera's layer mask can't filter it either. Returns a
+        // function that restores the original visibility.
         const restoreNodeVisibility = (() => {
           const saved = new Map<THREE.Object3D, boolean>()
-          for (const type of ['scan', 'guide'] as const) {
+          for (const type of ['scan', 'guide', 'spawn'] as const) {
             const ids = sceneRegistry.byType[type]!
             ids.forEach((id) => {
               const node = sceneRegistry.nodes.get(id)
@@ -238,18 +319,21 @@ export const ThumbnailGenerator = ({ onThumbnailCapture }: ThumbnailGeneratorPro
 
           // Notify other systems (wall cutouts, selection manager) to restore
           // their overrides before capture and re-apply them after.
-          emitter.emit('thumbnail:before-capture', undefined)
-          ;(renderer as any).setClearAlpha(0)
-          renderer.setRenderTarget(rt)
-          pipelineRef.current.render()
-          renderer.setRenderTarget(null)
-          emitter.emit('thumbnail:after-capture', undefined)
-
-          // Restore level positions, levelMode, and node visibility immediately after the
-          // render — before the async GPU readback.
-          restoreLevels()
-          restoreLevelMode?.()
-          restoreNodeVisibility()
+          try {
+            emitter.emit('thumbnail:before-capture', undefined)
+            ;(renderer as any).setClearAlpha(0)
+            renderer.setRenderTarget(rt)
+            pipelineRef.current.render()
+          } finally {
+            // Restore level positions, levelMode, and node visibility immediately
+            // after the render — before the async GPU readback. Runs in `finally`
+            // so a render failure can't leave helpers permanently hidden.
+            renderer.setRenderTarget(null)
+            emitter.emit('thumbnail:after-capture', undefined)
+            restoreLevels()
+            restoreLevelMode?.()
+            restoreNodeVisibility()
+          }
 
           // Read pixels from the RT asynchronously.
           // WebGPU copyTextureToBuffer aligns each row to 256 bytes, so we must
@@ -337,9 +421,9 @@ 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
+            // Standard: center-crop to the requested aspect (default 1920×1080)
             const srcAspect = width / height
-            const dstAspect = THUMBNAIL_WIDTH / THUMBNAIL_HEIGHT
+            const dstAspect = standardW / standardH
             let sx = 0,
               sy = 0,
               sWidth = width,
@@ -351,8 +435,8 @@ export const ThumbnailGenerator = ({ onThumbnailCapture }: ThumbnailGeneratorPro
               sHeight = Math.round(width / dstAspect)
               sy = Math.round((height - sHeight) / 2)
             }
-            outW = THUMBNAIL_WIDTH
-            outH = THUMBNAIL_HEIGHT
+            outW = standardW
+            outH = standardH
             const offscreen = new OffscreenCanvas(outW, outH)
             offscreen
               .getContext('2d')!
@@ -364,12 +448,15 @@ export const ThumbnailGenerator = ({ onThumbnailCapture }: ThumbnailGeneratorPro
           cameraData.resolution = { w: outW, h: outH }
         } else {
           // Fallback: plain render directly to the canvas
-          emitter.emit('thumbnail:before-capture', undefined)
-          gl.render(scene, thumbnailCamera)
-          emitter.emit('thumbnail:after-capture', undefined)
-          restoreLevels()
-          restoreLevelMode?.()
-          restoreNodeVisibility()
+          try {
+            emitter.emit('thumbnail:before-capture', undefined)
+            gl.render(scene, thumbnailCamera)
+          } finally {
+            emitter.emit('thumbnail:after-capture', undefined)
+            restoreLevels()
+            restoreLevelMode?.()
+            restoreNodeVisibility()
+          }
 
           let outW: number
           let outH: number
@@ -406,7 +493,7 @@ export const ThumbnailGenerator = ({ onThumbnailCapture }: ThumbnailGeneratorPro
             )
           } else {
             const srcAspect = width / height
-            const dstAspect = THUMBNAIL_WIDTH / THUMBNAIL_HEIGHT
+            const dstAspect = standardW / standardH
             let sx = 0,
               sy = 0,
               sWidth = width,
@@ -418,8 +505,8 @@ export const ThumbnailGenerator = ({ onThumbnailCapture }: ThumbnailGeneratorPro
               sHeight = Math.round(width / dstAspect)
               sy = Math.round((height - sHeight) / 2)
             }
-            outW = THUMBNAIL_WIDTH
-            outH = THUMBNAIL_HEIGHT
+            outW = standardW
+            outH = standardH
             const offscreen = document.createElement('canvas')
             offscreen.width = outW
             offscreen.height = outH
@@ -460,14 +547,20 @@ export const ThumbnailGenerator = ({ onThumbnailCapture }: ThumbnailGeneratorPro
     const handleGenerateThumbnail = async (event: {
       captureMode?: 'standard' | 'viewport' | 'area'
       cropRegion?: { x: number; y: number; width: number; height: number }
+      standardSize?: { w: number; h: number }
       snapLevels?: boolean
-      // `transparent` is informational here — the render pipeline already
-      // captures with alpha (see `setClearAlpha(0)` above) — the flag is
-      // forwarded so future tweaks (suppressing the ground occluder, theme
-      // background bits) can branch on it without touching the emitter.
+      // Preset/item captures keep the alpha channel (their thumbnails compose
+      // onto arbitrary palette backgrounds); scene snapshots — studio renders
+      // and project thumbnails — composite the theme backdrop + sky.
       transparent?: boolean
     }) => {
-      await generate(event.snapLevels === true, event.captureMode, event.cropRegion)
+      await generate(
+        event.snapLevels === true,
+        event.captureMode,
+        event.cropRegion,
+        event.standardSize,
+        event.transparent === true,
+      )
     }
 
     emitter.on('camera-controls:generate-thumbnail', handleGenerateThumbnail)

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

@@ -2,24 +2,27 @@
 
 import { emitter, type FenceNode, isCurvedWall, type WallNode } from '@pascal-app/core'
 import { type MouseEvent as ReactMouseEvent, useCallback } from 'react'
+import { resolveCeilingPlanPointSnap } from '../../lib/ceiling-plan-snap'
 import { alignFloorplanDraftPoint, getPlanPointDistance } from '../../lib/floorplan'
+import { resolveSlabPlanPointSnap } from '../../lib/slab-plan-snap'
+import useAlignmentGuides from '../../store/use-alignment-guides'
+import useEditor, { isAngleSnapActive, isMagneticSnapActive } from '../../store/use-editor'
+import usePlacementPreview from '../../store/use-placement-preview'
+import useSegmentDraftChain from '../../store/use-segment-draft-chain'
 import { snapFenceDraftPoint } from '../tools/fence/fence-drafting'
-import {
-  WALL_FINE_GRID_STEP,
-  WALL_GRID_STEP,
-  type WallPlanPoint,
-} from '../tools/wall/wall-drafting'
+import { getSegmentGridStep, type WallPlanPoint } from '../tools/wall/wall-drafting'
 
 type UseFloorplanBackgroundPlacementArgs = {
   activePolygonDraftPoints: WallPlanPoint[]
   ceilingDraftPoints: WallPlanPoint[]
   clearFencePlacementDraft: () => void
   clearRoofPlacementDraft: () => void
+  clearWallPlacementDraft: () => void
   emitFloorplanGridEvent: (
     type: 'click' | 'double-click' | 'move',
     planPoint: WallPlanPoint,
     event: ReactMouseEvent<SVGSVGElement>,
-  ) => WallPlanPoint
+  ) => void
   fenceDraftStart: WallPlanPoint | null
   fences: FenceNode[]
   findClosestWallPoint: (
@@ -40,7 +43,7 @@ type UseFloorplanBackgroundPlacementArgs = {
   ) => boolean
   handleCeilingPlacementPoint: (point: WallPlanPoint) => void
   handleSlabPlacementPoint: (point: WallPlanPoint) => void
-  handleWallPlacementPoint: (point: WallPlanPoint, options?: { singleWall?: boolean }) => void
+  handleWallPlacementPoint: (point: WallPlanPoint) => void
   handleZonePlacementPoint: (point: WallPlanPoint) => void
   isCeilingBuildActive: boolean
   isCeilingItemPlacementActive: boolean
@@ -51,18 +54,19 @@ type UseFloorplanBackgroundPlacementArgs = {
   isRoofBuildActive: boolean
   isWallBuildActive: boolean
   isZoneBuildActive: boolean
+  levelId: string | null
   roofDraftStart: WallPlanPoint | null
   setCursorPoint: React.Dispatch<React.SetStateAction<WallPlanPoint | null>>
   setFenceDraftEnd: React.Dispatch<React.SetStateAction<WallPlanPoint | null>>
   setFenceDraftStart: React.Dispatch<React.SetStateAction<WallPlanPoint | null>>
   setRoofDraftEnd: React.Dispatch<React.SetStateAction<WallPlanPoint | null>>
   setRoofDraftStart: React.Dispatch<React.SetStateAction<WallPlanPoint | null>>
-  shiftPressed: boolean
   snapWallDraftPoint: (args: {
     point: WallPlanPoint
     walls: WallNode[]
     start?: WallPlanPoint
     angleSnap?: boolean
+    bypassSnap?: boolean
     step?: number
     gridSnap?: (point: WallPlanPoint) => WallPlanPoint
   }) => WallPlanPoint
@@ -77,7 +81,7 @@ type UseFloorplanBackgroundPlacementArgs = {
    * Snap a building-local plan point to the world XZ grid at `step`.
    * Injected so the hook doesn't have to know the building's rotation
    * or position — used by wall / fence branches that snap at variable
-   * step (Shift = fine).
+   * step.
    */
   worldGridSnap: (point: WallPlanPoint, step: number) => WallPlanPoint
 }
@@ -87,6 +91,7 @@ export function useFloorplanBackgroundPlacement({
   ceilingDraftPoints,
   clearFencePlacementDraft,
   clearRoofPlacementDraft,
+  clearWallPlacementDraft,
   emitFloorplanGridEvent,
   fenceDraftStart,
   fences,
@@ -107,13 +112,13 @@ export function useFloorplanBackgroundPlacement({
   isRoofBuildActive,
   isWallBuildActive,
   isZoneBuildActive,
+  levelId,
   roofDraftStart,
   setCursorPoint,
   setFenceDraftEnd,
   setFenceDraftStart,
   setRoofDraftEnd,
   setRoofDraftStart,
-  shiftPressed,
   snapWallDraftPoint,
   snapPolygonDraftPoint,
   toPoint2D,
@@ -144,22 +149,29 @@ export function useFloorplanBackgroundPlacement({
             stopPropagation: () => {},
           } as any)
         }
+        // Drop the off-wall ghost on commit so it doesn't linger at the
+        // just-placed spot before the next pointer move re-evaluates.
+        usePlacementPreview.getState().clear()
         return true
       }
 
       if (isCeilingBuildActive) {
-        // Align the committed vertex the same way the move-preview did, so
-        // the placed point matches what the user saw. Skip when angle snap
-        // owns the vertex (matches the move branch).
-        const angleSnap = ceilingDraftPoints.length > 0 && !shiftPressed
-        let snappedPoint = snapPolygonDraftPoint({
+        // Align the committed vertex the same way the move-preview did, so the
+        // placed point matches what the user saw — mode-driven (the chip):
+        // `grid` quantizes, `angles` locks 15° rays, `lines` snaps onto walls /
+        // alignment, `off` is free. Alt remains force/free at commit time.
+        const angleSnap = ceilingDraftPoints.length > 0 && isAngleSnapActive()
+        const fallbackPoint = snapPolygonDraftPoint({
           point: planPoint,
           start: ceilingDraftPoints[ceilingDraftPoints.length - 1],
           angleSnap,
         })
-        if (!angleSnap) {
-          snappedPoint = alignFloorplanDraftPoint(snappedPoint, { bypass: event.altKey })
-        }
+        const snappedPoint = resolveCeilingPlanPointSnap({
+          rawPoint: planPoint,
+          fallbackPoint,
+          levelId,
+          align: !angleSnap,
+        }).point
 
         emitFloorplanGridEvent('click', snappedPoint, event)
         handleCeilingPlacementPoint(snappedPoint)
@@ -167,8 +179,11 @@ export function useFloorplanBackgroundPlacement({
       }
 
       if (isRoofBuildActive) {
+        // Footprint placement (polygon context: grid / lines / off, no angle),
+        // mode-driven to match the chip. Alt is force/free at commit time;
+        // alignment display/pull follows the active magnetic mode.
         const snappedPoint = alignFloorplanDraftPoint(getSnappedFloorplanPoint(planPoint), {
-          bypass: event.altKey,
+          applySnap: isMagneticSnapActive(),
         })
         emitFloorplanGridEvent('click', snappedPoint, event)
         setCursorPoint(snappedPoint)
@@ -183,16 +198,19 @@ export function useFloorplanBackgroundPlacement({
       }
 
       if (isFenceBuildActive) {
-        // Fence draft: grid snap (+ existing-wall/fence endpoint snap), then
-        // Figma alignment — endpoint snap wins (same precedence as move).
-        // `gridSnap` keeps the snap on the world XZ grid even when the
-        // building is rotated.
-        const fenceStep = shiftPressed ? WALL_FINE_GRID_STEP : WALL_GRID_STEP
+        // Fence draft: mode-driven (matches the chip), same as the move
+        // preview. `grid` snaps to the world XZ grid (rotation-safe via the
+        // `gridSnap` callback), `angles` locks 15° rays from the start, `lines`
+        // pulls onto walls / fences / alignment, `off` is free.
+        const fenceStep = getSegmentGridStep()
+        const fenceAngleSnap = fenceDraftStart !== null && isAngleSnapActive()
         const fenceSnapped = snapFenceDraftPoint({
           point: planPoint,
           walls,
           fences,
-          step: shiftPressed ? WALL_FINE_GRID_STEP : undefined,
+          start: fenceDraftStart ?? undefined,
+          angleSnap: fenceAngleSnap,
+          magnetic: isMagneticSnapActive(),
           gridSnap: (p) => worldGridSnap(p, fenceStep),
         })
         const fenceGridBase = worldGridSnap(planPoint, fenceStep)
@@ -200,18 +218,42 @@ export function useFloorplanBackgroundPlacement({
           fenceSnapped[0] !== fenceGridBase[0] || fenceSnapped[1] !== fenceGridBase[1]
         const snappedPoint = fenceLocked
           ? fenceSnapped
-          : alignFloorplanDraftPoint(fenceSnapped, { bypass: event.altKey })
+          : alignFloorplanDraftPoint(fenceSnapped, {
+              applySnap: isMagneticSnapActive() && !fenceAngleSnap,
+            })
 
         emitFloorplanGridEvent('click', snappedPoint, event)
         setCursorPoint(snappedPoint)
 
+        // Double-click finishes the chain. The emit above already made the
+        // 3D fence tool stopDrafting (its detail >= 2 guard), so close the
+        // 2D draft too — leaving it open desyncs the two views.
+        if (fenceDraftStart && event.detail >= 2) {
+          clearFencePlacementDraft()
+          return true
+        }
+
         if (!fenceDraftStart) {
           setFenceDraftStart(snappedPoint)
           setFenceDraftEnd(snappedPoint)
         } else if (
           getPlanPointDistance(toPoint2D(fenceDraftStart), toPoint2D(snappedPoint)) >= 0.01
         ) {
-          clearFencePlacementDraft()
+          // Single mode commits one segment per click: the same emit above
+          // already made the 3D fence tool stopDrafting, so close the 2D
+          // draft too instead of chaining.
+          if (useEditor.getState().getContinuation('fence') === 'single') {
+            clearFencePlacementDraft()
+            setCursorPoint(snappedPoint)
+            return true
+          }
+          // The 3D fence tool owns creation and keeps chaining from the
+          // committed fence's resolved end — chain the 2D draft from the
+          // same published point so both views draft the next segment
+          // from the same start.
+          const nextStart = useSegmentDraftChain.getState().fence ?? snappedPoint
+          setFenceDraftStart(nextStart)
+          setFenceDraftEnd(nextStart)
         } else {
           setFenceDraftEnd(snappedPoint)
         }
@@ -224,15 +266,20 @@ export function useFloorplanBackgroundPlacement({
       // swallow the click and skip local draft state updates — leaving
       // the 2D draft polygon invisible while the 3D tool builds fine).
       if (isPolygonBuildActive) {
-        const angleSnap = activePolygonDraftPoints.length > 0 && !shiftPressed
-        let snappedPoint = snapPolygonDraftPoint({
+        const angleSnap = activePolygonDraftPoints.length > 0 && isAngleSnapActive()
+        const fallbackPoint = snapPolygonDraftPoint({
           point: planPoint,
           start: activePolygonDraftPoints[activePolygonDraftPoints.length - 1],
           angleSnap,
         })
-        if (!angleSnap) {
-          snappedPoint = alignFloorplanDraftPoint(snappedPoint, { bypass: event.altKey })
-        }
+        // Zone shares the slab surface snap (wall corners / midpoints /
+        // crossings + alignment) — it's the same polygon-on-a-level draw.
+        const snappedPoint = resolveSlabPlanPointSnap({
+          rawPoint: planPoint,
+          fallbackPoint,
+          levelId,
+          align: !angleSnap,
+        }).point
 
         // Emit the grid event so the registry-driven slab tool also
         // sees the click (parity with ceiling / fence / roof branches
@@ -255,26 +302,45 @@ export function useFloorplanBackgroundPlacement({
       // / draftEnd state in the floor plan would never update, leaving
       // the dashed-line draft preview invisible.
       if (isWallBuildActive) {
-        // Wall draft: grid snap (+ existing-wall endpoint/join snap), then
-        // Figma alignment — endpoint/join snap wins (same precedence as the
-        // move-preview branch), so committing onto a corner still works.
-        // `gridSnap` keeps the snap on the world XZ grid even when the
-        // building is rotated.
-        const wallStep = shiftPressed ? WALL_FINE_GRID_STEP : WALL_GRID_STEP
+        // Wall draft: mode-driven (matches the chip + the move-preview branch).
+        // `grid` snaps to the world XZ grid (rotation-safe via `gridSnap`),
+        // `angles` locks 15° rays from the start, `lines` pulls the endpoint
+        // onto existing wall corners / edges + alignment, `off` is free.
+        const wallStep = getSegmentGridStep()
+        const wallAngleSnap = draftStart !== null && isAngleSnapActive()
         const wallSnapped = snapWallDraftPoint({
           point: planPoint,
           walls,
-          step: shiftPressed ? WALL_FINE_GRID_STEP : undefined,
+          start: draftStart ?? undefined,
+          angleSnap: wallAngleSnap,
           gridSnap: (p) => worldGridSnap(p, wallStep),
         })
         const wallGridBase = worldGridSnap(planPoint, wallStep)
         const wallLocked = wallSnapped[0] !== wallGridBase[0] || wallSnapped[1] !== wallGridBase[1]
-        const snappedPoint = wallLocked
-          ? wallSnapped
-          : alignFloorplanDraftPoint(wallSnapped, { bypass: false })
+        let snappedPoint = wallSnapped
+        if (wallLocked) {
+          useAlignmentGuides.getState().clear()
+        } else {
+          // Alignment lines are shown in every mode; the pull applies only when
+          // magnetic ('lines') and the segment isn't angle-locked.
+          snappedPoint = alignFloorplanDraftPoint(wallSnapped, {
+            applySnap: isMagneticSnapActive() && !wallAngleSnap,
+          })
+        }
 
         emitFloorplanGridEvent('click', snappedPoint, event)
-        handleWallPlacementPoint(snappedPoint, { singleWall: event.altKey })
+
+        // Double-click finishes the chain. The emit above already made the
+        // 3D wall tool stopDrafting (its detail >= 2 guard), so close the
+        // 2D draft too — otherwise it stays open against a closed 3D tool
+        // and the next previewed segment is silently never created.
+        if (draftStart && event.detail >= 2) {
+          clearWallPlacementDraft()
+          setCursorPoint(snappedPoint)
+          return true
+        }
+
+        handleWallPlacementPoint(snappedPoint)
         return true
       }
 
@@ -291,7 +357,8 @@ export function useFloorplanBackgroundPlacement({
       // local floor-plan draft handler (column / spawn / shelf / etc.).
       // The tool's `grid:click` subscriber owns the placement.
       if (isFloorplanGridInteractionActive) {
-        const snappedPoint = emitFloorplanGridEvent('click', planPoint, event)
+        const snappedPoint = getSnappedFloorplanPoint(planPoint)
+        emitFloorplanGridEvent('click', snappedPoint, event)
         setCursorPoint(snappedPoint)
         return true
       }
@@ -303,6 +370,7 @@ export function useFloorplanBackgroundPlacement({
       ceilingDraftPoints,
       clearFencePlacementDraft,
       clearRoofPlacementDraft,
+      clearWallPlacementDraft,
       emitFloorplanGridEvent,
       fenceDraftStart,
       fences,
@@ -322,13 +390,13 @@ export function useFloorplanBackgroundPlacement({
       isRoofBuildActive,
       isWallBuildActive,
       isZoneBuildActive,
+      levelId,
       roofDraftStart,
       setCursorPoint,
       setFenceDraftEnd,
       setFenceDraftStart,
       setRoofDraftEnd,
       setRoofDraftStart,
-      shiftPressed,
       snapWallDraftPoint,
       snapPolygonDraftPoint,
       toPoint2D,