@pascal-app/editor 0.8.0 → 0.9.1

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

@@ -7,7 +7,11 @@ import { useIsMobile } from '../../hooks/use-mobile'
 import { triggerSFX } from '../../lib/sfx-bus'
 import useEditor from '../../store/use-editor'
 
-type CaptureMode = 'standard' | 'viewport' | 'area'
+// Local crop-mode enum — distinct from `useEditor.captureMode` (which
+// describes *why* a capture is happening, e.g. `preset`). This one says
+// HOW the captured pixels are cropped: full-frame 16:9 (`standard`),
+// raw canvas viewport, or user-dragged area.
+type CropMode = 'standard' | 'viewport' | 'area'
 type CaptureState = 'idle' | 'capturing' | 'saved'
 
 interface DragPoint {
@@ -21,7 +25,7 @@ interface Drag {
 }
 
 function getResolution(
-  mode: CaptureMode,
+  mode: CropMode,
   overlayEl: HTMLDivElement | null,
   drag: Drag | null,
 ): { w: number; h: number } | null {
@@ -47,10 +51,15 @@ function getResolution(
 
 export function SnapshotCaptureOverlay({ projectId }: { projectId: string }) {
   const isCaptureMode = useEditor((s) => s.isCaptureMode)
+  const captureMode = useEditor((s) => s.captureMode)
   const setCaptureMode = useEditor((s) => s.setCaptureMode)
   const isMobile = useIsMobile()
+  // `preset` capture mode locks the overlay to a square area crop with
+  // a transparent background — the user picks framing but not the
+  // crop shape. Matches the unified preset-thumbnail capture flow.
+  const isPreset = captureMode.mode === 'preset'
 
-  const [mode, setMode] = useState<CaptureMode>('standard')
+  const [mode, setMode] = useState<CropMode>('standard')
   const [drag, setDrag] = useState<Drag | null>(null)
   const [isDragging, setIsDragging] = useState(false)
   const [captureState, setCaptureState] = useState<CaptureState>('idle')
@@ -66,15 +75,29 @@ export function SnapshotCaptureOverlay({ projectId }: { projectId: string }) {
     return () => window.removeEventListener('keydown', onKey)
   }, [isCaptureMode, setCaptureMode])
 
-  // Reset local state when entering capture mode
+  // Reset local state when entering capture mode. Preset mode also
+  // auto-stages a centered square crop sized to ~75% of the shorter
+  // viewport dimension so the user can capture immediately — the
+  // overlay's pan/move/resize handles still apply if they want to
+  // tweak the framing, but they don't have to draw the rect first.
   useEffect(() => {
-    if (isCaptureMode) {
-      setMode('standard')
+    if (!isCaptureMode) return
+    setMode(isPreset ? 'area' : 'standard')
+    setIsDragging(false)
+    setCaptureState('idle')
+    if (isPreset && overlayRef.current) {
+      const rect = overlayRef.current.getBoundingClientRect()
+      const side = Math.min(rect.width, rect.height) * 0.75
+      const cx = rect.width / 2
+      const cy = rect.height / 2
+      setDrag({
+        start: { x: cx - side / 2, y: cy - side / 2 },
+        end: { x: cx + side / 2, y: cy + side / 2 },
+      })
+    } else {
       setDrag(null)
-      setIsDragging(false)
-      setCaptureState('idle')
     }
-  }, [isCaptureMode])
+  }, [isCaptureMode, isPreset])
 
   // Listen for snapshot saved to show feedback then exit
   useEffect(() => {
@@ -142,11 +165,28 @@ export function SnapshotCaptureOverlay({ projectId }: { projectId: string }) {
           start: { x: snapshot.start.x + dx, y: snapshot.start.y + dy },
           end: { x: snapshot.end.x + dx, y: snapshot.end.y + dy },
         })
+      } else if (isPreset) {
+        // Preset mode locks the rect to a square — use the smaller
+        // axis to keep the drag predictable, sign-correct so the user
+        // can still drag in any quadrant.
+        setDrag((d) => {
+          if (!d) return null
+          const dx = pt.x - d.start.x
+          const dy = pt.y - d.start.y
+          const side = Math.min(Math.abs(dx), Math.abs(dy))
+          return {
+            start: d.start,
+            end: {
+              x: d.start.x + Math.sign(dx || 1) * side,
+              y: d.start.y + Math.sign(dy || 1) * side,
+            },
+          }
+        })
       } else {
         setDrag((d) => (d ? { start: d.start, end: pt } : null))
       }
     },
-    [isDragging],
+    [isDragging, isPreset],
   )
 
   const onPointerUp = useCallback(() => {
@@ -225,8 +265,12 @@ export function SnapshotCaptureOverlay({ projectId }: { projectId: string }) {
       projectId,
       captureMode: mode,
       cropRegion,
+      // In preset mode, the ThumbnailGenerator should keep the alpha
+      // channel transparent so the saved preset thumbnail composes
+      // cleanly onto any palette background.
+      transparent: isPreset,
     })
-  }, [captureState, mode, drag, projectId])
+  }, [captureState, mode, drag, projectId, isPreset])
 
   if (!isCaptureMode) return null
 
@@ -250,31 +294,47 @@ export function SnapshotCaptureOverlay({ projectId }: { projectId: string }) {
 
   return (
     <div className="pointer-events-none absolute inset-0 z-40" ref={overlayRef}>
-      {/* Area mode: dim layer + crosshair cursor + drag-to-select */}
+      {/* Area mode: dim layer + crosshair cursor + drag-to-select.
+       *
+       * Preset mode reuses the same DOM but stays click-through: the
+       * crop frame is auto-staged and locked, so the user adjusts the
+       * camera (orbit / pan / zoom) instead of dragging the rect. The
+       * dim letterbox + dashed border still render via the inline
+       * `box-shadow` on the selection rect — they're cosmetic. */}
       {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' }}
+          className={
+            isPreset
+              ? 'pointer-events-none absolute inset-0'
+              : 'pointer-events-auto absolute inset-0 bg-black/30'
+          }
+          onPointerDown={isPreset ? undefined : onPointerDown}
+          onPointerMove={
+            isPreset
+              ? undefined
+              : (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={isPreset ? undefined : onPointerUp}
+          style={isPreset ? undefined : { cursor: 'crosshair' }}
         >
-          {/* "No selection" hint */}
-          {!selectionStyle && (
+          {/* "No selection" hint — only when the user has to draw the
+              area themselves (`standard` capture). Preset mode always
+              has a pre-staged square, so we never show it there. */}
+          {!selectionStyle && !isPreset && (
             <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
@@ -297,31 +357,34 @@ export function SnapshotCaptureOverlay({ projectId }: { projectId: string }) {
                 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,
-                  }}
-                />
-              ))}
+              {/* Corner handles — preset mode locks the frame to the
+                  auto-staged centered square; the user adjusts the
+                  camera instead. */}
+              {!isPreset &&
+                (
+                  [
+                    { 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>
@@ -343,7 +406,10 @@ export function SnapshotCaptureOverlay({ projectId }: { projectId: string }) {
       {/* Bottom-center mode toolbar */}
       <div className="pointer-events-auto absolute bottom-6 left-1/2 -translate-x-1/2">
         {(() => {
-          const modeButtons = (
+          // Preset capture mode locks both the crop shape (square) and
+          // the transparent-background output — hide the per-shape
+          // mode buttons so the user has nothing to second-guess.
+          const modeButtons = isPreset ? null : (
             <>
               <ModeButton
                 active={mode === 'standard'}
@@ -408,8 +474,16 @@ export function SnapshotCaptureOverlay({ projectId }: { projectId: string }) {
           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">
+                {modeButtons && (
+                  <div className="flex items-center justify-center gap-1">{modeButtons}</div>
+                )}
+                <div
+                  className={
+                    modeButtons
+                      ? 'flex items-center justify-center gap-2 border-white/10 border-t pt-2'
+                      : 'flex items-center justify-center gap-2'
+                  }
+                >
                   {resolutionDisplay}
                   {captureButton}
                 </div>
@@ -420,7 +494,7 @@ export function SnapshotCaptureOverlay({ projectId }: { projectId: string }) {
           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" />
+              {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}

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

@@ -1,7 +1,7 @@
 'use client'
 
 import { emitter, sceneRegistry } from '@pascal-app/core'
-import { SSGI_PARAMS, snapLevelsToTruePositions, useViewer } from '@pascal-app/viewer'
+import { GRID_LAYER, SSGI_PARAMS, snapLevelsToTruePositions, useViewer } from '@pascal-app/viewer'
 import type { CameraControls } from '@react-three/drei'
 import { useThree } from '@react-three/fiber'
 import { useCallback, useEffect, useRef } from 'react'
@@ -62,6 +62,7 @@ export const ThumbnailGenerator = ({ onThumbnailCapture }: ThumbnailGeneratorPro
   useEffect(() => {
     const cam = new THREE.PerspectiveCamera(60, THUMBNAIL_WIDTH / THUMBNAIL_HEIGHT, 0.1, 1000)
     cam.layers.disable(EDITOR_LAYER)
+    cam.layers.disable(GRID_LAYER)
     thumbnailCameraRef.current = cam
 
     let mounted = true
@@ -73,7 +74,7 @@ export const ThumbnailGenerator = ({ onThumbnailCapture }: ThumbnailGeneratorPro
 
         // pass() handles MRT internally for all material types, including custom
         // shaders — unlike renderer.setMRT() which crashes on non-NodeMaterials.
-        // pass() also respects camera.layers, so EDITOR_LAYER objects are filtered.
+        // pass() also respects camera.layers, so EDITOR_LAYER + GRID_LAYER objects are filtered.
         const scenePass = pass(scene, cam)
         scenePass.setMRT(
           mrt({
@@ -207,7 +208,7 @@ export const ThumbnailGenerator = ({ onThumbnailCapture }: ThumbnailGeneratorPro
         const restoreNodeVisibility = (() => {
           const saved = new Map<THREE.Object3D, boolean>()
           for (const type of ['scan', 'guide'] as const) {
-            const ids = sceneRegistry.byType[type]
+            const ids = sceneRegistry.byType[type]!
             ids.forEach((id) => {
               const node = sceneRegistry.nodes.get(id)
               if (node) {
@@ -460,6 +461,11 @@ export const ThumbnailGenerator = ({ onThumbnailCapture }: ThumbnailGeneratorPro
       captureMode?: 'standard' | 'viewport' | 'area'
       cropRegion?: { x: number; y: number; width: number; height: 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.
+      transparent?: boolean
     }) => {
       await generate(event.snapLevels === true, event.captureMode, event.cropRegion)
     }

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

@@ -2,9 +2,13 @@
 
 import { emitter, type FenceNode, isCurvedWall, type WallNode } from '@pascal-app/core'
 import { type MouseEvent as ReactMouseEvent, useCallback } from 'react'
-import { getPlanPointDistance } from '../../lib/floorplan'
+import { alignFloorplanDraftPoint, getPlanPointDistance } from '../../lib/floorplan'
 import { snapFenceDraftPoint } from '../tools/fence/fence-drafting'
-import type { WallPlanPoint } from '../tools/wall/wall-drafting'
+import {
+  WALL_FINE_GRID_STEP,
+  WALL_GRID_STEP,
+  type WallPlanPoint,
+} from '../tools/wall/wall-drafting'
 
 type UseFloorplanBackgroundPlacementArgs = {
   activePolygonDraftPoints: WallPlanPoint[]
@@ -30,11 +34,16 @@ type UseFloorplanBackgroundPlacementArgs = {
   } | null
   floorplanOpeningLocalY: number
   getSnappedFloorplanPoint: (point: WallPlanPoint) => WallPlanPoint
+  handleCeilingItemPlacementClick: (
+    planPoint: WallPlanPoint,
+    nativeEvent: ReactMouseEvent<SVGSVGElement>,
+  ) => boolean
   handleCeilingPlacementPoint: (point: WallPlanPoint) => void
   handleSlabPlacementPoint: (point: WallPlanPoint) => void
-  handleWallPlacementPoint: (point: WallPlanPoint) => void
+  handleWallPlacementPoint: (point: WallPlanPoint, options?: { singleWall?: boolean }) => void
   handleZonePlacementPoint: (point: WallPlanPoint) => void
   isCeilingBuildActive: boolean
+  isCeilingItemPlacementActive: boolean
   isFenceBuildActive: boolean
   isFloorplanGridInteractionActive: boolean
   isOpeningPlacementActive: boolean
@@ -53,7 +62,9 @@ type UseFloorplanBackgroundPlacementArgs = {
     point: WallPlanPoint
     walls: WallNode[]
     start?: WallPlanPoint
-    angleSnap: boolean
+    angleSnap?: boolean
+    step?: number
+    gridSnap?: (point: WallPlanPoint) => WallPlanPoint
   }) => WallPlanPoint
   snapPolygonDraftPoint: (args: {
     point: WallPlanPoint
@@ -62,6 +73,13 @@ type UseFloorplanBackgroundPlacementArgs = {
   }) => WallPlanPoint
   toPoint2D: (point: WallPlanPoint) => { x: number; y: number }
   walls: WallNode[]
+  /**
+   * 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).
+   */
+  worldGridSnap: (point: WallPlanPoint, step: number) => WallPlanPoint
 }
 
 export function useFloorplanBackgroundPlacement({
@@ -75,11 +93,13 @@ export function useFloorplanBackgroundPlacement({
   findClosestWallPoint,
   floorplanOpeningLocalY,
   getSnappedFloorplanPoint,
+  handleCeilingItemPlacementClick,
   handleCeilingPlacementPoint,
   handleSlabPlacementPoint,
   handleWallPlacementPoint,
   handleZonePlacementPoint,
   isCeilingBuildActive,
+  isCeilingItemPlacementActive,
   isFenceBuildActive,
   isFloorplanGridInteractionActive,
   isOpeningPlacementActive,
@@ -98,6 +118,7 @@ export function useFloorplanBackgroundPlacement({
   snapPolygonDraftPoint,
   toPoint2D,
   walls,
+  worldGridSnap,
 }: UseFloorplanBackgroundPlacementArgs) {
   const handleBackgroundPlacementClick = useCallback(
     (
@@ -127,20 +148,28 @@ export function useFloorplanBackgroundPlacement({
       }
 
       if (isCeilingBuildActive) {
-        emitFloorplanGridEvent('click', planPoint, event)
-
-        const snappedPoint = snapPolygonDraftPoint({
+        // 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({
           point: planPoint,
           start: ceilingDraftPoints[ceilingDraftPoints.length - 1],
-          angleSnap: ceilingDraftPoints.length > 0 && !shiftPressed,
+          angleSnap,
         })
+        if (!angleSnap) {
+          snappedPoint = alignFloorplanDraftPoint(snappedPoint, { bypass: event.altKey })
+        }
 
+        emitFloorplanGridEvent('click', snappedPoint, event)
         handleCeilingPlacementPoint(snappedPoint)
         return true
       }
 
       if (isRoofBuildActive) {
-        const snappedPoint = getSnappedFloorplanPoint(planPoint)
+        const snappedPoint = alignFloorplanDraftPoint(getSnappedFloorplanPoint(planPoint), {
+          bypass: event.altKey,
+        })
         emitFloorplanGridEvent('click', snappedPoint, event)
         setCursorPoint(snappedPoint)
 
@@ -154,16 +183,26 @@ export function useFloorplanBackgroundPlacement({
       }
 
       if (isFenceBuildActive) {
-        emitFloorplanGridEvent('click', planPoint, event)
-
-        const snappedPoint = snapFenceDraftPoint({
+        // 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
+        const fenceSnapped = snapFenceDraftPoint({
           point: planPoint,
           walls,
           fences,
-          start: fenceDraftStart ?? undefined,
-          angleSnap: Boolean(fenceDraftStart) && !shiftPressed,
+          step: shiftPressed ? WALL_FINE_GRID_STEP : undefined,
+          gridSnap: (p) => worldGridSnap(p, fenceStep),
         })
+        const fenceGridBase = worldGridSnap(planPoint, fenceStep)
+        const fenceLocked =
+          fenceSnapped[0] !== fenceGridBase[0] || fenceSnapped[1] !== fenceGridBase[1]
+        const snappedPoint = fenceLocked
+          ? fenceSnapped
+          : alignFloorplanDraftPoint(fenceSnapped, { bypass: event.altKey })
 
+        emitFloorplanGridEvent('click', snappedPoint, event)
         setCursorPoint(snappedPoint)
 
         if (!fenceDraftStart) {
@@ -179,18 +218,28 @@ export function useFloorplanBackgroundPlacement({
         return true
       }
 
-      if (isFloorplanGridInteractionActive) {
-        const snappedPoint = emitFloorplanGridEvent('click', planPoint, event)
-        setCursorPoint(snappedPoint)
-        return true
-      }
-
+      // Slab / zone polygon build — local draft state + grid emit.
+      // Must run BEFORE the `isFloorplanGridInteractionActive` catch-all
+      // (since slab is registry-driven, the catch-all would otherwise
+      // swallow the click and skip local draft state updates — leaving
+      // the 2D draft polygon invisible while the 3D tool builds fine).
       if (isPolygonBuildActive) {
-        const snappedPoint = snapPolygonDraftPoint({
+        const angleSnap = activePolygonDraftPoints.length > 0 && !shiftPressed
+        let snappedPoint = snapPolygonDraftPoint({
           point: planPoint,
           start: activePolygonDraftPoints[activePolygonDraftPoints.length - 1],
-          angleSnap: activePolygonDraftPoints.length > 0 && !shiftPressed,
+          angleSnap,
         })
+        if (!angleSnap) {
+          snappedPoint = alignFloorplanDraftPoint(snappedPoint, { bypass: event.altKey })
+        }
+
+        // Emit the grid event so the registry-driven slab tool also
+        // sees the click (parity with ceiling / fence / roof branches
+        // above). Zone has no registry tool — emit-or-not is irrelevant.
+        if (!isZoneBuildActive) {
+          emitFloorplanGridEvent('click', snappedPoint, event)
+        }
 
         if (isZoneBuildActive) {
           handleZonePlacementPoint(snappedPoint)
@@ -200,19 +249,54 @@ export function useFloorplanBackgroundPlacement({
         return true
       }
 
-      if (!isWallBuildActive) {
-        return false
+      // Wall placement — local draft state + grid emit. Same reasoning
+      // as slab above: wall is registry-driven, so without this branch
+      // the catch-all would swallow the click and the local draftStart
+      // / 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
+        const wallSnapped = snapWallDraftPoint({
+          point: planPoint,
+          walls,
+          step: shiftPressed ? WALL_FINE_GRID_STEP : undefined,
+          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 })
+
+        emitFloorplanGridEvent('click', snappedPoint, event)
+        handleWallPlacementPoint(snappedPoint, { singleWall: event.altKey })
+        return true
       }
 
-      const snappedPoint = snapWallDraftPoint({
-        point: planPoint,
-        walls,
-        start: draftStart ?? undefined,
-        angleSnap: Boolean(draftStart) && !shiftPressed,
-      })
+      // Ceiling-attached item placement (lights, fans). Routes the click
+      // through `ceiling:click` instead of `grid:click` so the placement
+      // strategy parents the new item to the ceiling at the correct
+      // height — mirrors the pointer-move handler in `floorplan-panel`.
+      if (isCeilingItemPlacementActive) {
+        handleCeilingItemPlacementClick(planPoint, event)
+        return true
+      }
+
+      // Generic catch-all — registry-driven tool whose kind has no
+      // 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)
+        setCursorPoint(snappedPoint)
+        return true
+      }
 
-      handleWallPlacementPoint(snappedPoint)
-      return true
+      return false
     },
     [
       activePolygonDraftPoints,
@@ -225,10 +309,12 @@ export function useFloorplanBackgroundPlacement({
       findClosestWallPoint,
       floorplanOpeningLocalY,
       getSnappedFloorplanPoint,
+      handleCeilingItemPlacementClick,
       handleCeilingPlacementPoint,
       handleSlabPlacementPoint,
       handleZonePlacementPoint,
       isCeilingBuildActive,
+      isCeilingItemPlacementActive,
       isFenceBuildActive,
       isFloorplanGridInteractionActive,
       isOpeningPlacementActive,
@@ -248,6 +334,7 @@ export function useFloorplanBackgroundPlacement({
       toPoint2D,
       walls,
       handleWallPlacementPoint,
+      worldGridSnap,
     ],
   )