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

Replicates the fence Stage D recipe for slab — three drag affordances
+ one placement tool, all routed through the registry:

  affordanceTools:
    'boundary-edit' → thin <PolygonEditor> wrapper (vertex/edge drag)
    'hole-edit'     → same for a single hole polygon
    move            → DragAction with single-undo dance
  tool: () => placement (multi-click polygon with axis/45° snap)

`PolygonEditor` + `PolygonEditorProps` exported from
`@pascal-app/editor` as Stage D transitional surface (Stage F cleanup
moves them into `@pascal-app/nodes`).

ToolManager mount sites for SlabBoundaryEditor / SlabHoleEditor now
route through `getRegistryAffordanceTool` with legacy fallback.

Slab move action does not use the live-drag exception (polygon CSG
rebuild every tick) — matches legacy behavior; optimization is a
separate task once we measure.

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

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

@@ -179,10 +179,31 @@ export const ToolManager: React.FC = () => {
         rotation={buildingRotation as [number, number, number]}
       >
         {showZoneBoundaryEditor && selectedZoneId && <ZoneBoundaryEditor zoneId={selectedZoneId} />}
-        {showSlabBoundaryEditor && selectedSlabId && <SlabBoundaryEditor slabId={selectedSlabId} />}
+        {showSlabBoundaryEditor &&
-        {showSlabHoleEditor && selectedSlabId && editingHole && (
+          selectedSlabId &&
-          <SlabHoleEditor holeIndex={editingHole.holeIndex} slabId={selectedSlabId} />
+          (() => {
-        )}
+            const Registry = getRegistryAffordanceTool('slab', 'boundary-edit')
+            return Registry ? (
+              <Suspense fallback={null}>
+                <Registry slabId={selectedSlabId} />
+              </Suspense>
+            ) : (
+              <SlabBoundaryEditor slabId={selectedSlabId} />
+            )
+          })()}
+        {showSlabHoleEditor &&
+          selectedSlabId &&
+          editingHole &&
+          (() => {
+            const Registry = getRegistryAffordanceTool('slab', 'hole-edit')
+            return Registry ? (
+              <Suspense fallback={null}>
+                <Registry holeIndex={editingHole.holeIndex} slabId={selectedSlabId} />
+              </Suspense>
+            ) : (
+              <SlabHoleEditor holeIndex={editingHole.holeIndex} slabId={selectedSlabId} />
+            )
+          })()}
         {showCeilingBoundaryEditor && selectedCeilingId && (
           <CeilingBoundaryEditor ceilingId={selectedCeilingId} />
         )}

packages/editor/src/index.tsx

@@ -14,6 +14,11 @@ export {
   snapFenceDraftPoint,
 } from './components/tools/fence/fence-drafting'
 export { CursorSphere } from './components/tools/shared/cursor-sphere'
+// Phase 5 Stage D — PolygonEditor for slab/ceiling boundary + hole editors.
+export {
+  PolygonEditor,
+  type PolygonEditorProps,
+} from './components/tools/shared/polygon-editor'
 export {
   formatAngleRadians,
   getAngleToSegmentReference,

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

@@ -0,0 +1,151 @@
+import {
+  type AnyNode,
+  type AnyNodeId,
+  type DragAction,
+  type FenceNode,
+  type LevelNode,
+  type SlabNode,
+  useScene,
+  type WallNode,
+} from '@pascal-app/core'
+import { type FencePlanPoint, snapFenceDraftPoint } from '@pascal-app/editor'
+
+/**
+ * Phase 5 Stage D — whole-slab move drag affordance.
+ *
+ * Translates the slab's boundary polygon (and any holes) rigidly under
+ * the pointer. Snaps to walls / fences / grid at the level. Latches
+ * the drag anchor on the first preview tick so the slab doesn't jump
+ * to wherever the activation click landed.
+ *
+ * Unlike fence move, the slab port does **not** use the live-drag
+ * exception — polygon CSG geometry is expensive to rebuild per frame,
+ * but the legacy tool already writes the polygon to the scene every
+ * pointer tick and the user perceives that as smooth. Matching that
+ * for now; optimization is a separate task once we measure.
+ */
+
+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])
+}
+
+function polygonCenter(polygon: Array<[number, number]>): [number, number] {
+  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]
+}
+
+export type MoveSlabCtx = {
+  slabId: AnyNodeId
+  originalPolygon: Array<[number, number]>
+  originalHoles: Array<Array<[number, number]>>
+  parentId: string | null
+  levelWalls: WallNode[]
+  levelFences: FenceNode[]
+  dragAnchor: FencePlanPoint | null
+}
+
+export type MoveSlabDraft = {
+  polygon: Array<[number, number]>
+  holes: Array<Array<[number, number]>>
+  deltaX: number
+  deltaZ: number
+  center: [number, number]
+}
+
+export const moveSlabDragAction: DragAction<MoveSlabCtx, MoveSlabDraft> = {
+  begin: (input) => {
+    const slab = input.node as SlabNode | undefined
+    if (!slab) throw new Error('[moveSlabDragAction] begin requires a slab node')
+    const parentId = slab.parentId ?? null
+    const originalPolygon: Array<[number, number]> = slab.polygon.map(
+      ([x, z]) => [x, z] as [number, number],
+    )
+    const originalHoles: Array<Array<[number, number]>> = (slab.holes ?? []).map((h) =>
+      h.map(([x, z]) => [x, z] as [number, number]),
+    )
+
+    const { nodes } = useScene.getState()
+    const levelNode =
+      parentId && nodes[parentId as AnyNodeId]?.type === 'level'
+        ? (nodes[parentId as AnyNodeId] as LevelNode)
+        : null
+    const levelWalls: WallNode[] = []
+    const levelFences: FenceNode[] = []
+    if (levelNode) {
+      for (const childId of levelNode.children ?? []) {
+        const child = nodes[childId as AnyNodeId]
+        if (!child) continue
+        if (child.type === 'wall') levelWalls.push(child)
+        else if (child.type === 'fence') levelFences.push(child)
+      }
+    }
+
+    return {
+      slabId: slab.id as AnyNodeId,
+      originalPolygon,
+      originalHoles,
+      parentId,
+      levelWalls,
+      levelFences,
+      dragAnchor: null,
+    }
+  },
+
+  preview: (ctx, point, _modifiers) => {
+    const snapped = snapFenceDraftPoint({
+      point: [point[0], point[1]],
+      walls: ctx.levelWalls,
+      fences: ctx.levelFences,
+    })
+    if (!ctx.dragAnchor) ctx.dragAnchor = snapped
+    const deltaX = snapped[0] - ctx.dragAnchor[0]
+    const deltaZ = snapped[1] - ctx.dragAnchor[1]
+    const polygon = translatePolygon(ctx.originalPolygon, deltaX, deltaZ)
+    const holes = ctx.originalHoles.map((h) => translatePolygon(h, deltaX, deltaZ))
+    return {
+      polygon,
+      holes,
+      deltaX,
+      deltaZ,
+      center: polygonCenter(polygon),
+    }
+  },
+
+  apply: (draft, ctx, scene) => {
+    scene.update(ctx.slabId, {
+      polygon: draft.polygon,
+      holes: draft.holes,
+    } as Partial<AnyNode>)
+    return [ctx.slabId]
+  },
+
+  commit: (draft, ctx, scene) => {
+    if (draft.deltaX === 0 && draft.deltaZ === 0) return false
+
+    // Single-undo dance — revert via snapshot, resume history, re-apply
+    // the final polygon/holes. Zundo captures the whole drag as one
+    // Ctrl-Z step.
+    scene.restoreAll()
+    scene.resumeHistory()
+    scene.update(ctx.slabId, {
+      polygon: draft.polygon,
+      holes: draft.holes,
+    } as Partial<AnyNode>)
+    return true
+  },
+
+  cancel: (_ctx, _scene) => {
+    // No-op — orchestrator's scene.restoreAll() puts the original
+    // polygon/holes back via the snapshot.
+  },
+}

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

@@ -0,0 +1,48 @@
+'use client'
+
+import { resolveLevelId, type SlabNode, 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 — slab boundary editor (registry-driven).
+ *
+ * Thin wrapper around the shared `PolygonEditor`. Activates when a
+ * slab is selected in structure/select mode (not currently editing a
+ * hole). The heavy lifting — vertex drag, edge slide, snap, history
+ * bracketing — lives in `PolygonEditor` itself.
+ *
+ * Mounted by ToolManager via `def.affordanceTools['boundary-edit']`.
+ */
+export const SlabBoundaryEditor: React.FC<{ slabId: SlabNode['id'] }> = ({ slabId }) => {
+  const slabNode = useScene((s) => s.nodes[slabId])
+  const updateNode = useScene((s) => s.updateNode)
+  const setSelection = useViewer((s) => s.setSelection)
+
+  const slab = slabNode?.type === 'slab' ? (slabNode as SlabNode) : null
+
+  const handlePolygonChange = useCallback(
+    (newPolygon: Array<[number, number]>) => {
+      updateNode(slabId, { polygon: newPolygon })
+      setSelection({ selectedIds: [slabId] })
+    },
+    [slabId, updateNode, setSelection],
+  )
+
+  if (!slab?.polygon || slab.polygon.length < 3) return null
+
+  return (
+    <PolygonEditor
+      allowEdgeMove
+      color="#a3a3a3"
+      levelId={resolveLevelId(slab, useScene.getState().nodes)}
+      minVertices={3}
+      onPolygonChange={handlePolygonChange}
+      polygon={slab.polygon}
+      surfaceHeight={slab.elevation ?? 0.05}
+    />
+  )
+}
+
+export default SlabBoundaryEditor

packages/nodes/src/slab/definition.ts

@@ -54,6 +54,19 @@ export const slabDefinition: NodeDefinition<typeof SlabNode> = {
 
   parametrics: slabParametrics,
 
+  // Stage D: kind-owned placement tool. Multi-click polygon drawing
+  // with axis/45° snap (Shift to defeat).
+  tool: () => import('./tool'),
+
+  // Stage D: drag/edit affordances. Boundary editor + hole editor
+  // delegate to the shared `<PolygonEditor>`; move uses the single-
+  // undo dance for the polygon-translate commit.
+  affordanceTools: {
+    'boundary-edit': () => import('./boundary-editor'),
+    'hole-edit': () => import('./hole-editor'),
+    move: () => import('./move-tool'),
+  },
+
   // Stage B: pure geometry function.
   geometry: buildSlabGeometry,
   // Stage C: floor-plan rendering. Legacy `slabPolygons` short-circuits

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

@@ -0,0 +1,53 @@
+'use client'
+
+import { resolveLevelId, type SlabNode, 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 — slab hole editor (registry-driven).
+ *
+ * Edits a specific hole polygon inside a slab. Mounted by ToolManager
+ * via `def.affordanceTools['hole-edit']` when `useEditor.editingHole`
+ * is set on the selected slab.
+ */
+export const SlabHoleEditor: React.FC<{ slabId: SlabNode['id']; holeIndex: number }> = ({
+  slabId,
+  holeIndex,
+}) => {
+  const slabNode = useScene((s) => s.nodes[slabId])
+  const updateNode = useScene((s) => s.updateNode)
+  const setSelection = useViewer((s) => s.setSelection)
+
+  const slab = slabNode?.type === 'slab' ? (slabNode as SlabNode) : null
+  const holes = slab?.holes || []
+  const hole = holes[holeIndex]
+
+  const handlePolygonChange = useCallback(
+    (newPolygon: Array<[number, number]>) => {
+      const updatedHoles = [...holes]
+      updatedHoles[holeIndex] = newPolygon
+      updateNode(slabId, { holes: updatedHoles })
+      setSelection({ selectedIds: [slabId] })
+    },
+    [slabId, holeIndex, holes, updateNode, setSelection],
+  )
+
+  if (!(slab && hole) || hole.length < 3) return null
+
+  return (
+    <PolygonEditor
+      allowEdgeMove
+      allowPolygonMove
+      color="#ef4444"
+      levelId={resolveLevelId(slab, useScene.getState().nodes)}
+      minVertices={3}
+      onPolygonChange={handlePolygonChange}
+      polygon={hole}
+      surfaceHeight={slab.elevation ?? 0.05}
+    />
+  )
+}
+
+export default SlabHoleEditor

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

@@ -0,0 +1,66 @@
+'use client'
+
+import { type SlabNode, useScene } from '@pascal-app/core'
+import { CursorSphere, triggerSFX, useDragAction, useEditor } from '@pascal-app/editor'
+import { useViewer } from '@pascal-app/viewer'
+import { moveSlabDragAction } from './actions/move'
+
+/**
+ * Phase 5 Stage D — thin React wrapper around `moveSlabDragAction`.
+ *
+ * Replaces the legacy `MoveSlabTool` (182 LoC). All math + history
+ * dance lives in the action; this wrapper just renders the cursor
+ * sphere following the live polygon center.
+ */
+export const SlabMoveTool: React.FC<{ node: SlabNode }> = ({ node }) => {
+  const slabId = node.id
+
+  const initialCenter: [number, number] =
+    node.polygon.length > 0
+      ? [
+          node.polygon.reduce((s, [x]) => s + x, 0) / node.polygon.length,
+          node.polygon.reduce((s, [, z]) => s + z, 0) / node.polygon.length,
+        ]
+      : [0, 0]
+
+  // Live polygon center — re-derived from the scene store every tick
+  // since the action writes the translated polygon onto the slab.
+  const liveCenter = useScene((s) => {
+    const live = s.nodes[slabId]
+    if (live?.type !== 'slab') return initialCenter
+    const poly = (live as SlabNode).polygon
+    if (poly.length === 0) return initialCenter
+    let sx = 0
+    let sz = 0
+    for (const [x, z] of poly) {
+      sx += x
+      sz += z
+    }
+    return [sx / poly.length, sz / poly.length] as [number, number]
+  })
+
+  const exitMoveMode = (committed: boolean) => {
+    if (committed) triggerSFX('sfx:item-place')
+    useViewer.getState().setSelection({ selectedIds: [slabId] })
+    useEditor.getState().setMovingNode(null)
+  }
+
+  useDragAction({
+    active: true,
+    action: moveSlabDragAction,
+    initial: {
+      node,
+      point: initialCenter,
+    },
+    onCommit: () => exitMoveMode(true),
+    onCancel: () => exitMoveMode(false),
+  })
+
+  return (
+    <group>
+      <CursorSphere position={[liveCenter[0], 0, liveCenter[1]]} showTooltip={false} />
+    </group>
+  )
+}
+
+export default SlabMoveTool

packages/nodes/src/slab/tool.tsx

@@ -0,0 +1,266 @@
+'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 { SlabNode } from './schema'
+
+/**
+ * Phase 5 Stage D — slab placement tool (kind-owned via `def.tool`).
+ *
+ * Multi-click polygon drawing: each click adds a vertex; clicking near
+ * the first vertex (or double-clicking) closes the polygon and creates
+ * the slab. Shift-modifier defeats the axis/45° snap during drag.
+ *
+ * Not a `DragAction` — same reasoning as `tool.tsx` for fence: this is
+ * a stateful sequence of grid:click events with preview state, not a
+ * single pointer-down → drag-up.
+ */
+
+const Y_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 commitSlabDrawing(levelId: LevelNode['id'], points: Array<[number, number]>): string {
+  const { createNode, nodes } = useScene.getState()
+  const slabCount = Object.values(nodes).filter((n) => n.type === 'slab').length
+  const name = `Slab ${slabCount + 1}`
+  const slab = SlabNode.parse({ name, polygon: points })
+  createNode(slab, levelId)
+  triggerSFX('sfx:structure-build')
+  return slab.id
+}
+
+export const SlabTool: React.FC = () => {
+  const cursorRef = useRef<Group>(null)
+  const mainLineRef = useRef<Line>(null!)
+  const closingLineRef = 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)
+
+  useEffect(() => {
+    if (!currentLevelId) return
+
+    const onGridMove = (event: GridEvent) => {
+      if (!cursorRef.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 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], event.localPosition[1], 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 slabId = commitSlabDrawing(currentLevelId, points)
+        setSelection({ selectedIds: [slabId] })
+        setPoints([])
+      } else {
+        setPoints([...points, clickPoint])
+      }
+    }
+
+    const onGridDoubleClick = (_event: GridEvent) => {
+      if (!currentLevelId) return
+      if (points.length >= 3) {
+        const slabId = commitSlabDrawing(currentLevelId, points)
+        setSelection({ selectedIds: [slabId] })
+        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
+      return
+    }
+    const y = levelY + Y_OFFSET
+    const snappedCursor = snappedCursorPosition
+    const linePoints: Vector3[] = points.map(([x, z]) => new Vector3(x, y, z))
+    linePoints.push(new Vector3(snappedCursor[0], y, snappedCursor[1]))
+    if (linePoints.length >= 2) {
+      mainLineRef.current.geometry.dispose()
+      mainLineRef.current.geometry = new BufferGeometry().setFromPoints(linePoints)
+      mainLineRef.current.visible = true
+    } else {
+      mainLineRef.current.visible = false
+    }
+    const firstPoint = points[0]
+    if (points.length >= 2 && firstPoint) {
+      const closingPoints = [
+        new Vector3(snappedCursor[0], y, snappedCursor[1]),
+        new Vector3(firstPoint[0], y, firstPoint[1]),
+      ]
+      closingLineRef.current.geometry.dispose()
+      closingLineRef.current.geometry = new BufferGeometry().setFromPoints(closingPoints)
+      closingLineRef.current.visible = true
+    } else {
+      closingLineRef.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} />
+      {previewShape && (
+        <mesh
+          frustumCulled={false}
+          layers={EDITOR_LAYER}
+          position={[0, levelY + Y_OFFSET, 0]}
+          rotation={[-Math.PI / 2, 0, 0]}
+        >
+          <shapeGeometry args={[previewShape]} />
+          <meshBasicMaterial
+            color="#818cf8"
+            depthTest={false}
+            opacity={0.15}
+            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>
+      {points.map(([x, z], index) => (
+        <CursorSphere
+          color="#818cf8"
+          height={0}
+          key={index}
+          position={[x, levelY + Y_OFFSET + 0.01, z]}
+          showTooltip={false}
+        />
+      ))}
+    </group>
+  )
+}
+
+export default SlabTool