Phase 5 Stage D ceiling: port placement + move + boundary/hole editors

Replicates the slab Stage D recipe for ceiling: four affordances
routed through the registry — def.tool for the placement flow,
def.affordanceTools for boundary edit / hole edit / whole-ceiling move.

Ceiling-specific bits preserved:
- Placement tool keeps the dual-cursor + vertical TSL-gradient
  connector + ground-shadow lines (1:1 with legacy).
- Move tool wrapper renders the translucent preview fill + outline
  overlay so the user sees the destination before clicking.

ToolManager mount sites for CeilingBoundaryEditor / CeilingHoleEditor
now route through `getRegistryAffordanceTool` with legacy fallback.

Per-kind progress: ceiling A ✅ B (n/a, def.renderer escape hatch
preserved) C ✅ D ✅; E + F pending.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

packages/editor/src/components/tools/tool-manager.tsx

@@ -204,12 +204,31 @@ export const ToolManager: React.FC = () => {
               <SlabHoleEditor holeIndex={editingHole.holeIndex} slabId={selectedSlabId} />
             )
           })()}
-        {showCeilingBoundaryEditor && selectedCeilingId && (
+        {showCeilingBoundaryEditor &&
-          <CeilingBoundaryEditor ceilingId={selectedCeilingId} />
+          selectedCeilingId &&
-        )}
+          (() => {
-        {showCeilingHoleEditor && selectedCeilingId && editingHole && (
+            const Registry = getRegistryAffordanceTool('ceiling', 'boundary-edit')
-          <CeilingHoleEditor ceilingId={selectedCeilingId} holeIndex={editingHole.holeIndex} />
+            return Registry ? (
-        )}
+              <Suspense fallback={null}>
+                <Registry ceilingId={selectedCeilingId} />
+              </Suspense>
+            ) : (
+              <CeilingBoundaryEditor ceilingId={selectedCeilingId} />
+            )
+          })()}
+        {showCeilingHoleEditor &&
+          selectedCeilingId &&
+          editingHole &&
+          (() => {
+            const Registry = getRegistryAffordanceTool('ceiling', 'hole-edit')
+            return Registry ? (
+              <Suspense fallback={null}>
+                <Registry ceilingId={selectedCeilingId} holeIndex={editingHole.holeIndex} />
+              </Suspense>
+            ) : (
+              <CeilingHoleEditor ceilingId={selectedCeilingId} holeIndex={editingHole.holeIndex} />
+            )
+          })()}
         {movingWallEndpoint && <MoveWallEndpointTool target={movingWallEndpoint} />}
         {movingFenceEndpoint &&
           (() => {

packages/nodes/src/ceiling/actions/move.ts

@@ -0,0 +1,92 @@
+import type { AnyNode, AnyNodeId, CeilingNode, DragAction } from '@pascal-app/core'
+
+/**
+ * Phase 5 Stage D — whole-ceiling move drag affordance.
+ *
+ * Mirrors `slab/actions/move.ts` shape but ceiling snaps purely to a
+ * 0.5m grid (no wall/fence corner snap — ceilings are typically
+ * placed independent of the floor layout). Drag anchor is latched on
+ * the first preview tick so the ceiling doesn't jump.
+ *
+ * Single-undo dance on commit, same recipe as slab/fence.
+ */
+
+const GRID_STEP = 0.5
+
+function snap(value: number): number {
+  return Math.round(value / GRID_STEP) * GRID_STEP
+}
+
+function translatePolygon(
+  polygon: Array<[number, number]>,
+  deltaX: number,
+  deltaZ: number,
+): Array<[number, number]> {
+  return polygon.map(([x, z]) => [x + deltaX, z + deltaZ] as [number, number])
+}
+
+export type MoveCeilingCtx = {
+  ceilingId: AnyNodeId
+  originalPolygon: Array<[number, number]>
+  originalHoles: Array<Array<[number, number]>>
+  dragAnchor: [number, number] | null
+}
+
+export type MoveCeilingDraft = {
+  polygon: Array<[number, number]>
+  holes: Array<Array<[number, number]>>
+  deltaX: number
+  deltaZ: number
+}
+
+export const moveCeilingDragAction: DragAction<MoveCeilingCtx, MoveCeilingDraft> = {
+  begin: (input) => {
+    const ceiling = input.node as CeilingNode | undefined
+    if (!ceiling) throw new Error('[moveCeilingDragAction] begin requires a ceiling node')
+    return {
+      ceilingId: ceiling.id as AnyNodeId,
+      originalPolygon: ceiling.polygon.map(([x, z]) => [x, z] as [number, number]),
+      originalHoles: (ceiling.holes ?? []).map((h) =>
+        h.map(([x, z]) => [x, z] as [number, number]),
+      ),
+      dragAnchor: null,
+    }
+  },
+
+  preview: (ctx, point, _modifiers) => {
+    const sx = snap(point[0])
+    const sz = snap(point[1])
+    if (!ctx.dragAnchor) ctx.dragAnchor = [sx, sz]
+    const deltaX = sx - ctx.dragAnchor[0]
+    const deltaZ = sz - ctx.dragAnchor[1]
+    return {
+      polygon: translatePolygon(ctx.originalPolygon, deltaX, deltaZ),
+      holes: ctx.originalHoles.map((h) => translatePolygon(h, deltaX, deltaZ)),
+      deltaX,
+      deltaZ,
+    }
+  },
+
+  apply: (draft, ctx, scene) => {
+    scene.update(ctx.ceilingId, {
+      polygon: draft.polygon,
+      holes: draft.holes,
+    } as Partial<AnyNode>)
+    return [ctx.ceilingId]
+  },
+
+  commit: (draft, ctx, scene) => {
+    if (draft.deltaX === 0 && draft.deltaZ === 0) return false
+    scene.restoreAll()
+    scene.resumeHistory()
+    scene.update(ctx.ceilingId, {
+      polygon: draft.polygon,
+      holes: draft.holes,
+    } as Partial<AnyNode>)
+    return true
+  },
+
+  cancel: (_ctx, _scene) => {
+    // No-op — orchestrator's scene.restoreAll() restores via snapshot.
+  },
+}

packages/nodes/src/ceiling/boundary-editor.tsx

@@ -0,0 +1,47 @@
+'use client'
+
+import { type CeilingNode, resolveLevelId, useScene } from '@pascal-app/core'
+import { PolygonEditor } from '@pascal-app/editor'
+import { useViewer } from '@pascal-app/viewer'
+import { useCallback } from 'react'
+
+/**
+ * Phase 5 Stage D — ceiling boundary editor (registry-driven).
+ *
+ * Thin wrapper around the shared `<PolygonEditor>` (same shape as
+ * slab's boundary-editor). Activates when a ceiling is selected in
+ * structure/select mode and no hole edit is in progress.
+ */
+export const CeilingBoundaryEditor: React.FC<{ ceilingId: CeilingNode['id'] }> = ({
+  ceilingId,
+}) => {
+  const ceilingNode = useScene((s) => s.nodes[ceilingId])
+  const updateNode = useScene((s) => s.updateNode)
+  const setSelection = useViewer((s) => s.setSelection)
+
+  const ceiling = ceilingNode?.type === 'ceiling' ? (ceilingNode as CeilingNode) : null
+
+  const handlePolygonChange = useCallback(
+    (newPolygon: Array<[number, number]>) => {
+      updateNode(ceilingId, { polygon: newPolygon })
+      setSelection({ selectedIds: [ceilingId] })
+    },
+    [ceilingId, updateNode, setSelection],
+  )
+
+  if (!ceiling?.polygon || ceiling.polygon.length < 3) return null
+
+  return (
+    <PolygonEditor
+      allowEdgeMove
+      color="#d4d4d4"
+      levelId={resolveLevelId(ceiling, useScene.getState().nodes)}
+      minVertices={3}
+      onPolygonChange={handlePolygonChange}
+      polygon={ceiling.polygon}
+      surfaceHeight={ceiling.height ?? 2.5}
+    />
+  )
+}
+
+export default CeilingBoundaryEditor

packages/nodes/src/ceiling/definition.ts

@@ -54,6 +54,19 @@ export const ceilingDefinition: NodeDefinition<typeof CeilingNode> = {
 
   parametrics: ceilingParametrics,
 
+  // Stage D: kind-owned placement tool. Multi-click polygon drawing
+  // with a vertical TSL-gradient connector + ground-shadow lines.
+  tool: () => import('./tool'),
+
+  // Stage D: drag/edit affordances. Boundary editor + hole editor
+  // delegate to the shared `<PolygonEditor>`; move uses the single-
+  // undo dance.
+  affordanceTools: {
+    'boundary-edit': () => import('./boundary-editor'),
+    'hole-edit': () => import('./hole-editor'),
+    move: () => import('./move-tool'),
+  },
+
   renderer: {
     kind: 'parametric',
     module: () => import('./renderer'),

packages/nodes/src/ceiling/hole-editor.tsx

@@ -0,0 +1,49 @@
+'use client'
+
+import { type CeilingNode, resolveLevelId, useScene } from '@pascal-app/core'
+import { PolygonEditor } from '@pascal-app/editor'
+import { useViewer } from '@pascal-app/viewer'
+import { useCallback } from 'react'
+
+/**
+ * Phase 5 Stage D — ceiling hole editor (registry-driven).
+ */
+export const CeilingHoleEditor: React.FC<{
+  ceilingId: CeilingNode['id']
+  holeIndex: number
+}> = ({ ceilingId, holeIndex }) => {
+  const ceilingNode = useScene((s) => s.nodes[ceilingId])
+  const updateNode = useScene((s) => s.updateNode)
+  const setSelection = useViewer((s) => s.setSelection)
+
+  const ceiling = ceilingNode?.type === 'ceiling' ? (ceilingNode as CeilingNode) : null
+  const holes = ceiling?.holes || []
+  const hole = holes[holeIndex]
+
+  const handlePolygonChange = useCallback(
+    (newPolygon: Array<[number, number]>) => {
+      const updatedHoles = [...holes]
+      updatedHoles[holeIndex] = newPolygon
+      updateNode(ceilingId, { holes: updatedHoles })
+      setSelection({ selectedIds: [ceilingId] })
+    },
+    [ceilingId, holeIndex, holes, updateNode, setSelection],
+  )
+
+  if (!(ceiling && hole) || hole.length < 3) return null
+
+  return (
+    <PolygonEditor
+      allowEdgeMove
+      allowPolygonMove
+      color="#ef4444"
+      levelId={resolveLevelId(ceiling, useScene.getState().nodes)}
+      minVertices={3}
+      onPolygonChange={handlePolygonChange}
+      polygon={hole}
+      surfaceHeight={ceiling.height ?? 2.5}
+    />
+  )
+}
+
+export default CeilingHoleEditor

packages/nodes/src/ceiling/move-tool.tsx

@@ -0,0 +1,119 @@
+'use client'
+
+import { type CeilingNode, useScene } from '@pascal-app/core'
+import { CursorSphere, triggerSFX, useDragAction, useEditor } from '@pascal-app/editor'
+import { useViewer } from '@pascal-app/viewer'
+import { useMemo } from 'react'
+import { BufferGeometry, DoubleSide, Path, Shape, ShapeGeometry, Vector3 } from 'three'
+import { moveCeilingDragAction } from './actions/move'
+
+/**
+ * Phase 5 Stage D — thin React wrapper around `moveCeilingDragAction`.
+ *
+ * Renders the cursor sphere at the ceiling polygon's live center plus
+ * a translucent preview fill + outline so the user sees where the
+ * ceiling lands before clicking. Polygon + holes are pulled from
+ * `useScene` so the wrapper mirrors the action's per-tick writes.
+ */
+export const CeilingMoveTool: React.FC<{ node: CeilingNode }> = ({ node }) => {
+  const ceilingId = node.id
+  const height = node.height ?? 2.5
+
+  const live = useScene((s) => s.nodes[ceilingId])
+  const liveCeiling = live?.type === 'ceiling' ? (live as CeilingNode) : node
+  const polygon = liveCeiling.polygon
+  const holes = liveCeiling.holes ?? []
+
+  const center: [number, number] = useMemo(() => {
+    if (polygon.length === 0) return [0, 0]
+    let sx = 0
+    let sz = 0
+    for (const [x, z] of polygon) {
+      sx += x
+      sz += z
+    }
+    return [sx / polygon.length, sz / polygon.length]
+  }, [polygon])
+
+  const previewFillGeometry = useMemo(() => createPreviewFill(polygon, holes), [polygon, holes])
+  const previewOutlineGeometry = useMemo(() => createOutline(polygon), [polygon])
+
+  const exitMoveMode = (committed: boolean) => {
+    if (committed) triggerSFX('sfx:item-place')
+    useViewer.getState().setSelection({ selectedIds: [ceilingId] })
+    useEditor.getState().setMovingNode(null)
+  }
+
+  useDragAction({
+    active: true,
+    action: moveCeilingDragAction,
+    initial: {
+      node,
+      point: center,
+    },
+    onCommit: () => exitMoveMode(true),
+    onCancel: () => exitMoveMode(false),
+  })
+
+  return (
+    <group>
+      <mesh geometry={previewFillGeometry} position={[0, height + 0.012, 0]}>
+        <meshBasicMaterial
+          color="#f5f5f4"
+          depthWrite={false}
+          opacity={0.3}
+          side={DoubleSide}
+          transparent
+        />
+      </mesh>
+      {/* @ts-ignore */}
+      <line geometry={previewOutlineGeometry} position={[0, height + 0.02, 0]}>
+        <lineBasicMaterial color="#ffffff" depthWrite={false} opacity={0.95} transparent />
+      </line>
+      <CursorSphere position={[center[0], height, center[1]]} showTooltip={false} />
+    </group>
+  )
+}
+
+function createPreviewFill(
+  polygon: Array<[number, number]>,
+  holes: Array<Array<[number, number]>>,
+): BufferGeometry {
+  if (polygon.length < 3) return new BufferGeometry()
+  const shape = new Shape()
+  const [firstX, firstZ] = polygon[0]!
+  shape.moveTo(firstX, -firstZ)
+  for (let i = 1; i < polygon.length; i++) {
+    const [x, z] = polygon[i]!
+    shape.lineTo(x, -z)
+  }
+  shape.closePath()
+  for (const holePolygon of holes) {
+    if (holePolygon.length < 3) continue
+    const hole = new Path()
+    const [hx, hz] = holePolygon[0]!
+    hole.moveTo(hx, -hz)
+    for (let i = 1; i < holePolygon.length; i++) {
+      const [x, z] = holePolygon[i]!
+      hole.lineTo(x, -z)
+    }
+    hole.closePath()
+    shape.holes.push(hole)
+  }
+  const geometry = new ShapeGeometry(shape)
+  geometry.rotateX(-Math.PI / 2)
+  geometry.computeVertexNormals()
+  return geometry
+}
+
+function createOutline(polygon: Array<[number, number]>): BufferGeometry {
+  const geometry = new BufferGeometry()
+  if (polygon.length < 2) return geometry
+  const points = polygon.map(([x, z]) => new Vector3(x, 0, z))
+  const [firstX, firstZ] = polygon[0]!
+  points.push(new Vector3(firstX, 0, firstZ))
+  geometry.setFromPoints(points)
+  return geometry
+}
+
+export default CeilingMoveTool

packages/nodes/src/ceiling/tool.tsx

@@ -0,0 +1,388 @@
+'use client'
+
+import { emitter, type GridEvent, type LevelNode, useScene } from '@pascal-app/core'
+import { CursorSphere, EDITOR_LAYER, markToolCancelConsumed, triggerSFX } from '@pascal-app/editor'
+import { useViewer } from '@pascal-app/viewer'
+import { useEffect, useMemo, useRef, useState } from 'react'
+import { BufferGeometry, DoubleSide, type Group, type Line, Shape, Vector3 } from 'three'
+import { mix, positionLocal } from 'three/tsl'
+import { CeilingNode } from './schema'
+
+/**
+ * Phase 5 Stage D — ceiling placement tool (kind-owned via `def.tool`).
+ *
+ * Multi-click polygon drawing at the ceiling height (2.52m default)
+ * with a vertical TSL-gradient connector + ground-shadow lines so the
+ * draft is visible against both the ceiling plane and the floor.
+ * Shift defeats the axis/45° snap during drag.
+ */
+
+const CEILING_HEIGHT = 2.52
+const GRID_OFFSET = 0.02
+
+function calculateSnapPoint(
+  lastPoint: [number, number],
+  currentPoint: [number, number],
+): [number, number] {
+  const [x1, y1] = lastPoint
+  const [x, y] = currentPoint
+  const dx = x - x1
+  const dy = y - y1
+  const absDx = Math.abs(dx)
+  const absDy = Math.abs(dy)
+  const horizontalDist = absDy
+  const verticalDist = absDx
+  const diagonalDist = Math.abs(absDx - absDy)
+  const minDist = Math.min(horizontalDist, verticalDist, diagonalDist)
+  if (minDist === diagonalDist) {
+    const diagonalLength = Math.min(absDx, absDy)
+    return [x1 + Math.sign(dx) * diagonalLength, y1 + Math.sign(dy) * diagonalLength]
+  }
+  if (minDist === horizontalDist) return [x, y1]
+  return [x1, y]
+}
+
+function commitCeilingDrawing(levelId: LevelNode['id'], points: Array<[number, number]>): string {
+  const { createNode, nodes } = useScene.getState()
+  const ceilingCount = Object.values(nodes).filter((n) => n.type === 'ceiling').length
+  const name = `Ceiling ${ceilingCount + 1}`
+  const ceiling = CeilingNode.parse({ name, polygon: points })
+  createNode(ceiling, levelId)
+  triggerSFX('sfx:structure-build')
+  return ceiling.id
+}
+
+export const CeilingTool: React.FC = () => {
+  const cursorRef = useRef<Group>(null)
+  const gridCursorRef = useRef<Group>(null)
+  const mainLineRef = useRef<Line>(null!)
+  const closingLineRef = useRef<Line>(null!)
+  const groundMainLineRef = useRef<Line>(null!)
+  const groundClosingLineRef = useRef<Line>(null!)
+  const verticalLineRef = useRef<Line>(null!)
+  const currentLevelId = useViewer((s) => s.selection.levelId)
+  const setSelection = useViewer((s) => s.setSelection)
+
+  const [points, setPoints] = useState<Array<[number, number]>>([])
+  const [cursorPosition, setCursorPosition] = useState<[number, number]>([0, 0])
+  const [snappedCursorPosition, setSnappedCursorPosition] = useState<[number, number]>([0, 0])
+  const [levelY, setLevelY] = useState(0)
+  const previousSnappedPointRef = useRef<[number, number] | null>(null)
+  const shiftPressed = useRef(false)
+
+  const verticalGeo = useMemo(
+    () =>
+      new BufferGeometry().setFromPoints([
+        new Vector3(0, 0, 0),
+        new Vector3(0, CEILING_HEIGHT - GRID_OFFSET, 0),
+      ]),
+    [],
+  )
+
+  const gradientOpacityNode = useMemo(
+    () => mix(0.6, 0.0, positionLocal.y.div(CEILING_HEIGHT - GRID_OFFSET).clamp()),
+    [],
+  )
+
+  useEffect(() => {
+    if (!currentLevelId) return
+
+    const onGridMove = (event: GridEvent) => {
+      if (!(cursorRef.current && gridCursorRef.current)) return
+      const gridX = Math.round(event.localPosition[0] * 2) / 2
+      const gridZ = Math.round(event.localPosition[2] * 2) / 2
+      const gridPosition: [number, number] = [gridX, gridZ]
+      setCursorPosition(gridPosition)
+      setLevelY(event.localPosition[1])
+      const ceilingY = event.localPosition[1] + CEILING_HEIGHT
+      const gridY = event.localPosition[1] + GRID_OFFSET
+      const lastPoint = points[points.length - 1]
+      const displayPoint =
+        shiftPressed.current || !lastPoint
+          ? gridPosition
+          : calculateSnapPoint(lastPoint, gridPosition)
+      setSnappedCursorPosition(displayPoint)
+      if (
+        points.length > 0 &&
+        previousSnappedPointRef.current &&
+        (displayPoint[0] !== previousSnappedPointRef.current[0] ||
+          displayPoint[1] !== previousSnappedPointRef.current[1])
+      ) {
+        triggerSFX('sfx:grid-snap')
+      }
+      previousSnappedPointRef.current = displayPoint
+      cursorRef.current.position.set(displayPoint[0], ceilingY, displayPoint[1])
+      gridCursorRef.current.position.set(displayPoint[0], gridY, displayPoint[1])
+      if (verticalLineRef.current) {
+        verticalLineRef.current.position.set(displayPoint[0], gridY, displayPoint[1])
+      }
+    }
+
+    const onGridClick = (_event: GridEvent) => {
+      if (!currentLevelId) return
+      const clickPoint = previousSnappedPointRef.current ?? cursorPosition
+      const firstPoint = points[0]
+      if (
+        points.length >= 3 &&
+        firstPoint &&
+        Math.abs(clickPoint[0] - firstPoint[0]) < 0.25 &&
+        Math.abs(clickPoint[1] - firstPoint[1]) < 0.25
+      ) {
+        const ceilingId = commitCeilingDrawing(currentLevelId, points)
+        setSelection({ selectedIds: [ceilingId] })
+        setPoints([])
+      } else {
+        setPoints([...points, clickPoint])
+      }
+    }
+
+    const onGridDoubleClick = (_event: GridEvent) => {
+      if (!currentLevelId) return
+      if (points.length >= 3) {
+        const ceilingId = commitCeilingDrawing(currentLevelId, points)
+        setSelection({ selectedIds: [ceilingId] })
+        setPoints([])
+      }
+    }
+
+    const onCancel = () => {
+      if (points.length > 0) markToolCancelConsumed()
+      setPoints([])
+    }
+
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Shift') shiftPressed.current = true
+    }
+    const onKeyUp = (e: KeyboardEvent) => {
+      if (e.key === 'Shift') shiftPressed.current = false
+    }
+    document.addEventListener('keydown', onKeyDown)
+    document.addEventListener('keyup', onKeyUp)
+
+    emitter.on('grid:move', onGridMove)
+    emitter.on('grid:click', onGridClick)
+    emitter.on('grid:double-click', onGridDoubleClick)
+    emitter.on('tool:cancel', onCancel)
+
+    return () => {
+      document.removeEventListener('keydown', onKeyDown)
+      document.removeEventListener('keyup', onKeyUp)
+      emitter.off('grid:move', onGridMove)
+      emitter.off('grid:click', onGridClick)
+      emitter.off('grid:double-click', onGridDoubleClick)
+      emitter.off('tool:cancel', onCancel)
+    }
+  }, [currentLevelId, points, cursorPosition, setSelection])
+
+  useEffect(() => {
+    if (!(mainLineRef.current && closingLineRef.current)) return
+    if (points.length === 0) {
+      mainLineRef.current.visible = false
+      closingLineRef.current.visible = false
+      groundMainLineRef.current && (groundMainLineRef.current.visible = false)
+      groundClosingLineRef.current && (groundClosingLineRef.current.visible = false)
+      return
+    }
+    const ceilingY = levelY + CEILING_HEIGHT
+    const snappedCursor = snappedCursorPosition
+    const linePoints: Vector3[] = points.map(([x, z]) => new Vector3(x, ceilingY, z))
+    linePoints.push(new Vector3(snappedCursor[0], ceilingY, snappedCursor[1]))
+    const gridY = levelY + GRID_OFFSET
+    const groundLinePoints: Vector3[] = points.map(([x, z]) => new Vector3(x, gridY, z))
+    groundLinePoints.push(new Vector3(snappedCursor[0], gridY, snappedCursor[1]))
+    if (linePoints.length >= 2) {
+      mainLineRef.current.geometry.dispose()
+      mainLineRef.current.geometry = new BufferGeometry().setFromPoints(linePoints)
+      mainLineRef.current.visible = true
+      groundMainLineRef.current.geometry.dispose()
+      groundMainLineRef.current.geometry = new BufferGeometry().setFromPoints(groundLinePoints)
+      groundMainLineRef.current.visible = true
+    } else {
+      mainLineRef.current.visible = false
+      groundMainLineRef.current.visible = false
+    }
+    const firstPoint = points[0]
+    if (points.length >= 2 && firstPoint) {
+      const closingPoints = [
+        new Vector3(snappedCursor[0], ceilingY, snappedCursor[1]),
+        new Vector3(firstPoint[0], ceilingY, firstPoint[1]),
+      ]
+      closingLineRef.current.geometry.dispose()
+      closingLineRef.current.geometry = new BufferGeometry().setFromPoints(closingPoints)
+      closingLineRef.current.visible = true
+      const groundClosingPoints = [
+        new Vector3(snappedCursor[0], gridY, snappedCursor[1]),
+        new Vector3(firstPoint[0], gridY, firstPoint[1]),
+      ]
+      groundClosingLineRef.current.geometry.dispose()
+      groundClosingLineRef.current.geometry = new BufferGeometry().setFromPoints(
+        groundClosingPoints,
+      )
+      groundClosingLineRef.current.visible = true
+    } else {
+      closingLineRef.current.visible = false
+      groundClosingLineRef.current.visible = false
+    }
+  }, [points, snappedCursorPosition, levelY])
+
+  const previewShape = useMemo(() => {
+    if (points.length < 3) return null
+    const snappedCursor = snappedCursorPosition
+    const allPoints = [...points, snappedCursor]
+    const firstPt = allPoints[0]
+    if (!firstPt) return null
+    const shape = new Shape()
+    shape.moveTo(firstPt[0], -firstPt[1])
+    for (let i = 1; i < allPoints.length; i++) {
+      const pt = allPoints[i]
+      if (pt) shape.lineTo(pt[0], -pt[1])
+    }
+    shape.closePath()
+    return shape
+  }, [points, snappedCursorPosition])
+
+  return (
+    <group>
+      <CursorSphere ref={cursorRef} />
+      <mesh
+        layers={EDITOR_LAYER}
+        ref={gridCursorRef}
+        renderOrder={2}
+        rotation={[-Math.PI / 2, 0, 0]}
+      >
+        <ringGeometry args={[0.15, 0.2, 32]} />
+        <meshBasicMaterial
+          color="#818cf8"
+          depthTest={false}
+          depthWrite={true}
+          opacity={0.5}
+          side={DoubleSide}
+          transparent
+        />
+      </mesh>
+      {/* @ts-ignore */}
+      <line geometry={verticalGeo} layers={EDITOR_LAYER} ref={verticalLineRef} renderOrder={1}>
+        <lineBasicNodeMaterial
+          color="#818cf8"
+          depthTest={false}
+          depthWrite={false}
+          opacityNode={gradientOpacityNode}
+          transparent
+        />
+      </line>
+      {previewShape && (
+        <mesh
+          frustumCulled={false}
+          layers={EDITOR_LAYER}
+          position={[0, levelY + CEILING_HEIGHT, 0]}
+          rotation={[-Math.PI / 2, 0, 0]}
+        >
+          <shapeGeometry args={[previewShape]} />
+          <meshBasicMaterial
+            color="#818cf8"
+            depthTest={false}
+            opacity={0.15}
+            side={DoubleSide}
+            transparent
+          />
+        </mesh>
+      )}
+      {previewShape && (
+        <mesh
+          frustumCulled={false}
+          layers={EDITOR_LAYER}
+          position={[0, levelY + GRID_OFFSET, 0]}
+          rotation={[-Math.PI / 2, 0, 0]}
+        >
+          <shapeGeometry args={[previewShape]} />
+          <meshBasicMaterial
+            color="#818cf8"
+            depthTest={false}
+            opacity={0.1}
+            side={DoubleSide}
+            transparent
+          />
+        </mesh>
+      )}
+      {/* @ts-ignore */}
+      <line
+        frustumCulled={false}
+        layers={EDITOR_LAYER}
+        // @ts-expect-error
+        ref={mainLineRef}
+        renderOrder={1}
+        visible={false}
+      >
+        <bufferGeometry />
+        <lineBasicNodeMaterial color="#818cf8" depthTest={false} depthWrite={false} linewidth={3} />
+      </line>
+      {/* @ts-ignore */}
+      <line
+        frustumCulled={false}
+        layers={EDITOR_LAYER}
+        // @ts-expect-error
+        ref={closingLineRef}
+        renderOrder={1}
+        visible={false}
+      >
+        <bufferGeometry />
+        <lineBasicNodeMaterial
+          color="#818cf8"
+          depthTest={false}
+          depthWrite={false}
+          linewidth={2}
+          opacity={0.5}
+          transparent
+        />
+      </line>
+      {/* @ts-ignore */}
+      <line
+        frustumCulled={false}
+        layers={EDITOR_LAYER}
+        // @ts-expect-error
+        ref={groundMainLineRef}
+        renderOrder={1}
+        visible={false}
+      >
+        <bufferGeometry />
+        <lineBasicNodeMaterial
+          color="#818cf8"
+          depthTest={false}
+          depthWrite={false}
+          linewidth={3}
+          opacity={0.3}
+          transparent
+        />
+      </line>
+      {/* @ts-ignore */}
+      <line
+        frustumCulled={false}
+        layers={EDITOR_LAYER}
+        // @ts-expect-error
+        ref={groundClosingLineRef}
+        renderOrder={1}
+        visible={false}
+      >
+        <bufferGeometry />
+        <lineBasicNodeMaterial
+          color="#818cf8"
+          depthTest={false}
+          depthWrite={false}
+          linewidth={2}
+          opacity={0.15}
+          transparent
+        />
+      </line>
+      {points.map(([x, z], index) => (
+        <CursorSphere
+          color="#818cf8"
+          key={index}
+          position={[x, levelY + CEILING_HEIGHT + 0.01, z]}
+          showTooltip={false}
+        />
+      ))}
+    </group>
+  )
+}
+
+export default CeilingTool