npm - @pascal-app/editor - Versions diffs - 0.4.0 - Mend

@pascal-app/editor 0.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (165) hide show

package/package.json +62 -0
package/src/components/editor/custom-camera-controls.tsx +387 -0
package/src/components/editor/editor-layout-v2.tsx +220 -0
package/src/components/editor/export-manager.tsx +78 -0
package/src/components/editor/first-person-controls.tsx +249 -0
package/src/components/editor/floating-action-menu.tsx +231 -0
package/src/components/editor/floorplan-panel.tsx +9609 -0
package/src/components/editor/grid.tsx +161 -0
package/src/components/editor/index.tsx +928 -0
package/src/components/editor/node-action-menu.tsx +66 -0
package/src/components/editor/preset-thumbnail-generator.tsx +125 -0
package/src/components/editor/selection-manager.tsx +897 -0
package/src/components/editor/site-edge-labels.tsx +90 -0
package/src/components/editor/thumbnail-generator.tsx +166 -0
package/src/components/editor/wall-measurement-label.tsx +258 -0
package/src/components/feedback-dialog.tsx +265 -0
package/src/components/pascal-radio.tsx +280 -0
package/src/components/preview-button.tsx +16 -0
package/src/components/systems/ceiling/ceiling-system.tsx +77 -0
package/src/components/systems/roof/roof-edit-system.tsx +69 -0
package/src/components/systems/stair/stair-edit-system.tsx +69 -0
package/src/components/systems/zone/zone-label-editor-system.tsx +320 -0
package/src/components/systems/zone/zone-system.tsx +87 -0
package/src/components/tools/ceiling/ceiling-boundary-editor.tsx +42 -0
package/src/components/tools/ceiling/ceiling-hole-editor.tsx +47 -0
package/src/components/tools/ceiling/ceiling-tool.tsx +465 -0
package/src/components/tools/door/door-math.ts +110 -0
package/src/components/tools/door/door-tool.tsx +293 -0
package/src/components/tools/door/move-door-tool.tsx +373 -0
package/src/components/tools/item/item-tool.tsx +26 -0
package/src/components/tools/item/move-tool.tsx +90 -0
package/src/components/tools/item/placement-math.ts +85 -0
package/src/components/tools/item/placement-strategies.ts +556 -0
package/src/components/tools/item/placement-types.ts +117 -0
package/src/components/tools/item/use-draft-node.ts +227 -0
package/src/components/tools/item/use-placement-coordinator.tsx +877 -0
package/src/components/tools/roof/move-roof-tool.tsx +288 -0
package/src/components/tools/roof/roof-tool.tsx +318 -0
package/src/components/tools/select/box-select-tool.tsx +626 -0
package/src/components/tools/shared/cursor-sphere.tsx +119 -0
package/src/components/tools/shared/polygon-editor.tsx +361 -0
package/src/components/tools/site/site-boundary-editor.tsx +42 -0
package/src/components/tools/slab/slab-boundary-editor.tsx +42 -0
package/src/components/tools/slab/slab-hole-editor.tsx +47 -0
package/src/components/tools/slab/slab-tool.tsx +322 -0
package/src/components/tools/stair/stair-defaults.ts +7 -0
package/src/components/tools/stair/stair-tool.tsx +194 -0
package/src/components/tools/tool-manager.tsx +120 -0
package/src/components/tools/wall/wall-drafting.ts +140 -0
package/src/components/tools/wall/wall-tool.tsx +210 -0
package/src/components/tools/window/move-window-tool.tsx +410 -0
package/src/components/tools/window/window-math.ts +117 -0
package/src/components/tools/window/window-tool.tsx +303 -0
package/src/components/tools/zone/zone-boundary-editor.tsx +39 -0
package/src/components/tools/zone/zone-tool.tsx +364 -0
package/src/components/ui/action-menu/action-button.tsx +59 -0
package/src/components/ui/action-menu/camera-actions.tsx +74 -0
package/src/components/ui/action-menu/control-modes.tsx +240 -0
package/src/components/ui/action-menu/furnish-tools.tsx +102 -0
package/src/components/ui/action-menu/index.tsx +152 -0
package/src/components/ui/action-menu/structure-tools.tsx +100 -0
package/src/components/ui/action-menu/view-toggles.tsx +397 -0
package/src/components/ui/command-palette/editor-commands.tsx +396 -0
package/src/components/ui/command-palette/index.tsx +730 -0
package/src/components/ui/controls/action-button.tsx +33 -0
package/src/components/ui/controls/material-picker.tsx +194 -0
package/src/components/ui/controls/metric-control.tsx +262 -0
package/src/components/ui/controls/panel-section.tsx +65 -0
package/src/components/ui/controls/segmented-control.tsx +45 -0
package/src/components/ui/controls/slider-control.tsx +245 -0
package/src/components/ui/controls/toggle-control.tsx +38 -0
package/src/components/ui/floating-level-selector.tsx +355 -0
package/src/components/ui/helpers/ceiling-helper.tsx +20 -0
package/src/components/ui/helpers/helper-manager.tsx +33 -0
package/src/components/ui/helpers/item-helper.tsx +40 -0
package/src/components/ui/helpers/roof-helper.tsx +16 -0
package/src/components/ui/helpers/slab-helper.tsx +20 -0
package/src/components/ui/helpers/wall-helper.tsx +20 -0
package/src/components/ui/item-catalog/catalog-items.tsx +1580 -0
package/src/components/ui/item-catalog/item-catalog.tsx +219 -0
package/src/components/ui/panels/ceiling-panel.tsx +230 -0
package/src/components/ui/panels/collections/collections-popover.tsx +356 -0
package/src/components/ui/panels/door-panel.tsx +600 -0
package/src/components/ui/panels/item-panel.tsx +306 -0
package/src/components/ui/panels/panel-manager.tsx +59 -0
package/src/components/ui/panels/panel-wrapper.tsx +80 -0
package/src/components/ui/panels/presets/presets-popover.tsx +511 -0
package/src/components/ui/panels/reference-panel.tsx +177 -0
package/src/components/ui/panels/roof-panel.tsx +262 -0
package/src/components/ui/panels/roof-segment-panel.tsx +326 -0
package/src/components/ui/panels/slab-panel.tsx +228 -0
package/src/components/ui/panels/stair-panel.tsx +304 -0
package/src/components/ui/panels/stair-segment-panel.tsx +339 -0
package/src/components/ui/panels/wall-panel.tsx +123 -0
package/src/components/ui/panels/window-panel.tsx +441 -0
package/src/components/ui/primitives/button.tsx +69 -0
package/src/components/ui/primitives/card.tsx +75 -0
package/src/components/ui/primitives/color-dot.tsx +61 -0
package/src/components/ui/primitives/context-menu.tsx +227 -0
package/src/components/ui/primitives/dialog.tsx +129 -0
package/src/components/ui/primitives/dropdown-menu.tsx +228 -0
package/src/components/ui/primitives/error-boundary.tsx +52 -0
package/src/components/ui/primitives/input.tsx +21 -0
package/src/components/ui/primitives/number-input.tsx +187 -0
package/src/components/ui/primitives/opacity-control.tsx +79 -0
package/src/components/ui/primitives/popover.tsx +42 -0
package/src/components/ui/primitives/separator.tsx +28 -0
package/src/components/ui/primitives/sheet.tsx +130 -0
package/src/components/ui/primitives/shortcut-token.tsx +64 -0
package/src/components/ui/primitives/sidebar.tsx +855 -0
package/src/components/ui/primitives/skeleton.tsx +13 -0
package/src/components/ui/primitives/slider.tsx +58 -0
package/src/components/ui/primitives/switch.tsx +29 -0
package/src/components/ui/primitives/tooltip.tsx +57 -0
package/src/components/ui/scene-loader.tsx +40 -0
package/src/components/ui/sidebar/app-sidebar.tsx +103 -0
package/src/components/ui/sidebar/icon-rail.tsx +147 -0
package/src/components/ui/sidebar/panels/settings-panel/audio-settings-dialog.tsx +100 -0
package/src/components/ui/sidebar/panels/settings-panel/index.tsx +438 -0
package/src/components/ui/sidebar/panels/settings-panel/keyboard-shortcuts-dialog.tsx +188 -0
package/src/components/ui/sidebar/panels/site-panel/building-tree-node.tsx +80 -0
package/src/components/ui/sidebar/panels/site-panel/ceiling-tree-node.tsx +126 -0
package/src/components/ui/sidebar/panels/site-panel/door-tree-node.tsx +64 -0
package/src/components/ui/sidebar/panels/site-panel/index.tsx +1543 -0
package/src/components/ui/sidebar/panels/site-panel/inline-rename-input.tsx +98 -0
package/src/components/ui/sidebar/panels/site-panel/item-tree-node.tsx +117 -0
package/src/components/ui/sidebar/panels/site-panel/level-tree-node.tsx +65 -0
package/src/components/ui/sidebar/panels/site-panel/roof-tree-node.tsx +214 -0
package/src/components/ui/sidebar/panels/site-panel/slab-tree-node.tsx +96 -0
package/src/components/ui/sidebar/panels/site-panel/stair-tree-node.tsx +216 -0
package/src/components/ui/sidebar/panels/site-panel/tree-node-actions.tsx +115 -0
package/src/components/ui/sidebar/panels/site-panel/tree-node-drag.tsx +342 -0
package/src/components/ui/sidebar/panels/site-panel/tree-node.tsx +271 -0
package/src/components/ui/sidebar/panels/site-panel/wall-tree-node.tsx +106 -0
package/src/components/ui/sidebar/panels/site-panel/window-tree-node.tsx +64 -0
package/src/components/ui/sidebar/panels/site-panel/zone-tree-node.tsx +87 -0
package/src/components/ui/sidebar/panels/zone-panel/index.tsx +167 -0
package/src/components/ui/sidebar/tab-bar.tsx +39 -0
package/src/components/ui/slider-demo.tsx +36 -0
package/src/components/ui/slider.tsx +81 -0
package/src/components/ui/viewer-toolbar.tsx +342 -0
package/src/components/viewer-overlay.tsx +499 -0
package/src/components/viewer-zone-system.tsx +48 -0
package/src/contexts/presets-context.tsx +121 -0
package/src/hooks/use-auto-save.ts +194 -0
package/src/hooks/use-contextual-tools.ts +52 -0
package/src/hooks/use-grid-events.ts +106 -0
package/src/hooks/use-keyboard.ts +214 -0
package/src/hooks/use-mobile.ts +19 -0
package/src/hooks/use-reduced-motion.ts +20 -0
package/src/index.tsx +33 -0
package/src/lib/constants.ts +3 -0
package/src/lib/level-selection.ts +31 -0
package/src/lib/scene.ts +394 -0
package/src/lib/sfx/index.ts +2 -0
package/src/lib/sfx-bus.ts +49 -0
package/src/lib/sfx-player.ts +60 -0
package/src/lib/utils.ts +43 -0
package/src/store/use-audio.tsx +45 -0
package/src/store/use-command-registry.ts +36 -0
package/src/store/use-editor.tsx +522 -0
package/src/store/use-palette-view-registry.ts +45 -0
package/src/store/use-upload.ts +90 -0
package/src/three-types.ts +3 -0
package/tsconfig.json +9 -0

package/src/components/tools/shared/cursor-sphere.tsx ADDED Viewed

@@ -0,0 +1,119 @@
+import { Html } from '@react-three/drei'
+import type { ThreeElements } from '@react-three/fiber'
+import { forwardRef } from 'react'
+import type { Group } from 'three'
+import { furnishTools } from '../../../components/ui/action-menu/furnish-tools'
+import { tools } from '../../../components/ui/action-menu/structure-tools'
+import { EDITOR_LAYER } from '../../../lib/constants'
+import useEditor from '../../../store/use-editor'
+interface CursorSphereProps extends Omit<ThreeElements['group'], 'ref'> {
+  color?: string
+  depthWrite?: boolean
+  showTooltip?: boolean
+  height?: number
+  /** Custom tooltip content — overrides the auto-detected build tool icon */
+  tooltipContent?: React.ReactNode
+}
+export const CursorSphere = forwardRef<Group, CursorSphereProps>(function CursorSphere(
+  { color = '#818cf8', showTooltip = true, height = 2.5, visible = true, tooltipContent, ...props },
+  ref,
+) {
+  const tool = useEditor((s) => s.tool)
+  const mode = useEditor((s) => s.mode)
+  const catalogCategory = useEditor((s) => s.catalogCategory)
+  const isFloorplanHovered = useEditor((s) => s.isFloorplanHovered)
+  // Find the icon for the current tool
+  let activeToolConfig = null
+  if (mode === 'build' && tool) {
+    if (tool === 'item' && catalogCategory) {
+      activeToolConfig = furnishTools.find((t) => t.catalogCategory === catalogCategory)
+    } else {
+      activeToolConfig = tools.find((t) => t.id === tool)
+    }
+  }
+  const isVisible = visible && !isFloorplanHovered
+  return (
+    <group ref={ref} {...props} visible={isVisible}>
+      {/* Flat marker on the ground */}
+      <group rotation={[-Math.PI / 2, 0, 0]}>
+        {/* Center dot */}
+        <mesh layers={EDITOR_LAYER} renderOrder={2}>
+          <circleGeometry args={[0.06, 32]} />
+          <meshBasicMaterial
+            color={color}
+            depthTest={false}
+            depthWrite={false}
+            opacity={0.9}
+            transparent
+          />
+        </mesh>
+        {/* Outer ring / glow */}
+        <mesh layers={EDITOR_LAYER} renderOrder={2}>
+          <circleGeometry args={[0.2, 32]} />
+          <meshBasicMaterial
+            color={color}
+            depthTest={false}
+            depthWrite={false}
+            opacity={0.25}
+            transparent
+          />
+        </mesh>
+      </group>
+      {/* Vertical line */}
+      {height > 0 && (
+        <mesh layers={EDITOR_LAYER} position={[0, height / 2, 0]} renderOrder={2}>
+          <cylinderGeometry args={[0.01, 0.01, height, 8]} />
+          <meshBasicMaterial
+            color={color}
+            depthTest={false}
+            depthWrite={false}
+            opacity={0.7}
+            transparent
+          />
+        </mesh>
+      )}
+      {/* Tool Icon Tooltip at the top of the line */}
+      {isVisible && showTooltip && (activeToolConfig || tooltipContent) && (
+        <Html
+          center
+          position={[0, height > 0 ? height + 0.2 : 0.6, 0]}
+          style={{
+            pointerEvents: 'none',
+            background: '#18181b', // zinc-900
+            padding: '6px',
+            borderRadius: '12px',
+            border: '1px solid rgba(255,255,255,0.05)',
+            boxShadow: '0 8px 16px -4px rgba(0, 0, 0, 0.3), 0 4px 8px -4px rgba(0, 0, 0, 0.2)',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            width: '36px',
+            height: '36px',
+          }}
+        >
+          {tooltipContent || (
+            // eslint-disable-next-line @next/next/no-img-element
+            <img
+              alt={activeToolConfig!.label}
+              src={activeToolConfig!.iconSrc}
+              style={{
+                width: '100%',
+                height: '100%',
+                objectFit: 'contain',
+                filter: 'drop-shadow(0px 2px 4px rgba(0,0,0,0.5))',
+              }}
+            />
+          )}
+        </Html>
+      )}
+    </group>
+  )
+})

package/src/components/tools/shared/polygon-editor.tsx ADDED Viewed

@@ -0,0 +1,361 @@
+import { emitter, type GridEvent, sceneRegistry } from '@pascal-app/core'
+import { createPortal } from '@react-three/fiber'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { BufferGeometry, Float32BufferAttribute, type Line } from 'three'
+import { EDITOR_LAYER } from '../../../lib/constants'
+import { sfxEmitter } from '../../../lib/sfx-bus'
+const Y_OFFSET = 0.02
+type DragState = {
+  isDragging: boolean
+  vertexIndex: number
+  initialPosition: [number, number]
+  pointerId: number
+}
+export interface PolygonEditorProps {
+  polygon: Array<[number, number]>
+  color?: string
+  onPolygonChange: (polygon: Array<[number, number]>) => void
+  minVertices?: number
+  /** Level ID to mount the editor to. If provided, uses createPortal for automatic level animation following. */
+  levelId?: string
+  /** Height of the surface being edited (e.g. slab elevation). Handles adapt to this. */
+  surfaceHeight?: number
+}
+/**
+ * Generic polygon editor component for editing polygon vertices
+ * Used by zone and site boundary editors
+ */
+const MIN_HANDLE_HEIGHT = 0.15
+export const PolygonEditor: React.FC<PolygonEditorProps> = ({
+  polygon,
+  color = '#3b82f6',
+  onPolygonChange,
+  minVertices = 3,
+  levelId,
+  surfaceHeight = 0,
+}) => {
+  // Get level node from registry if levelId is provided
+  const levelNode = levelId ? sceneRegistry.nodes.get(levelId) : null
+  // When using portal, edit at Y_OFFSET (local to level)
+  // When not using portal, edit at world origin
+  const editY = levelNode ? Y_OFFSET : 0
+  // Local state for dragging
+  const [dragState, setDragState] = useState<DragState | null>(null)
+  const [previewPolygon, setPreviewPolygon] = useState<Array<[number, number]> | null>(null)
+  const previewPolygonRef = useRef<Array<[number, number]> | null>(null)
+  // Keep ref in sync
+  useEffect(() => {
+    previewPolygonRef.current = previewPolygon
+  }, [previewPolygon])
+  const [hoveredVertex, setHoveredVertex] = useState<number | null>(null)
+  const [hoveredMidpoint, setHoveredMidpoint] = useState<number | null>(null)
+  const [cursorPosition, setCursorPosition] = useState<[number, number]>([0, 0])
+  const lineRef = useRef<Line>(null!)
+  const previousPositionRef = useRef<[number, number] | null>(null)
+  // Track the last polygon prop to detect external changes (undo/redo)
+  const lastPolygonRef = useRef(polygon)
+  if (polygon !== lastPolygonRef.current) {
+    lastPolygonRef.current = polygon
+    // External change (e.g. undo/redo) — clear any stale preview/drag state
+    if (previewPolygon) setPreviewPolygon(null)
+    if (dragState) setDragState(null)
+  }
+  // The polygon to display (preview during drag, or actual polygon)
+  const displayPolygon = previewPolygon ?? polygon
+  // Calculate midpoints for adding new vertices
+  const midpoints = useMemo(() => {
+    if (displayPolygon.length < 2) return []
+    return displayPolygon.map(([x1, z1], index) => {
+      const nextIndex = (index + 1) % displayPolygon.length
+      const [x2, z2] = displayPolygon[nextIndex]!
+      return [(x1! + x2) / 2, (z1! + z2) / 2] as [number, number]
+    })
+  }, [displayPolygon])
+  // Update vertex position using grid cursor position
+  const handleVertexDrag = useCallback(
+    (vertexIndex: number, position: [number, number]) => {
+      setPreviewPolygon((prev) => {
+        const basePolygon = prev ?? polygon
+        const newPolygon = [...basePolygon]
+        newPolygon[vertexIndex] = position
+        return newPolygon
+      })
+    },
+    [polygon],
+  )
+  // Commit polygon changes
+  const commitPolygonChange = useCallback(() => {
+    if (previewPolygonRef.current) {
+      onPolygonChange(previewPolygonRef.current)
+    }
+    setPreviewPolygon(null)
+    setDragState(null)
+  }, [onPolygonChange])
+  // Handle adding a new vertex at midpoint
+  const handleAddVertex = useCallback(
+    (afterIndex: number, position: [number, number]) => {
+      const basePolygon = previewPolygon ?? polygon
+      const newPolygon = [
+        ...basePolygon.slice(0, afterIndex + 1),
+        position,
+        ...basePolygon.slice(afterIndex + 1),
+      ]
+      setPreviewPolygon(newPolygon)
+      return afterIndex + 1 // Return new vertex index
+    },
+    [polygon, previewPolygon],
+  )
+  // Handle deleting a vertex
+  const handleDeleteVertex = useCallback(
+    (index: number) => {
+      const basePolygon = previewPolygon ?? polygon
+      if (basePolygon.length <= minVertices) return // Need at least minVertices points
+      const newPolygon = basePolygon.filter((_, i) => i !== index)
+      onPolygonChange(newPolygon)
+      setPreviewPolygon(null)
+    },
+    [polygon, previewPolygon, onPolygonChange, minVertices],
+  )
+  // Listen to grid:move events to track cursor position
+  useEffect(() => {
+    const onGridMove = (event: GridEvent) => {
+      const gridX = Math.round(event.position[0] * 2) / 2
+      const gridZ = Math.round(event.position[2] * 2) / 2
+      const newPosition: [number, number] = [gridX, gridZ]
+      // Play snap sound when cursor moves to a new grid cell during drag
+      if (
+        dragState?.isDragging &&
+        previousPositionRef.current &&
+        (newPosition[0] !== previousPositionRef.current[0] ||
+          newPosition[1] !== previousPositionRef.current[1])
+      ) {
+        sfxEmitter.emit('sfx:grid-snap')
+      }
+      previousPositionRef.current = newPosition
+      setCursorPosition(newPosition)
+      // Update vertex position during drag
+      if (dragState?.isDragging) {
+        handleVertexDrag(dragState.vertexIndex, newPosition)
+      }
+    }
+    emitter.on('grid:move', onGridMove)
+    return () => {
+      emitter.off('grid:move', onGridMove)
+    }
+  }, [dragState, handleVertexDrag])
+  // Set up pointer up listener for ending drag
+  useEffect(() => {
+    if (!dragState?.isDragging) return
+    const handlePointerUp = (e: PointerEvent | MouseEvent) => {
+      // Only handle the specific pointer that started the drag, if it's a PointerEvent
+      if (
+        'pointerId' in e &&
+        dragState.pointerId !== undefined &&
+        e.pointerId !== dragState.pointerId
+      )
+        return
+      // Stop the event from propagating to prevent grid click
+      e.stopImmediatePropagation()
+      e.preventDefault()
+      // Suppress the follow-up click event that browsers fire after pointerup
+      const suppressClick = (ce: MouseEvent) => {
+        ce.stopImmediatePropagation()
+        ce.preventDefault()
+        window.removeEventListener('click', suppressClick, true)
+      }
+      window.addEventListener('click', suppressClick, true)
+      // Safety cleanup in case no click fires
+      requestAnimationFrame(() => {
+        window.removeEventListener('click', suppressClick, true)
+      })
+      commitPolygonChange()
+    }
+    window.addEventListener('pointerup', handlePointerUp as EventListener, true)
+    window.addEventListener('pointercancel', handlePointerUp as EventListener, true)
+    return () => {
+      window.removeEventListener('pointerup', handlePointerUp as EventListener, true)
+      window.removeEventListener('pointercancel', handlePointerUp as EventListener, true)
+    }
+  }, [dragState, commitPolygonChange])
+  // Update line geometry when polygon changes
+  useEffect(() => {
+    if (!lineRef.current || displayPolygon.length < 2) return
+    const positions: number[] = []
+    for (const [x, z] of displayPolygon) {
+      positions.push(x!, editY + 0.01, z!)
+    }
+    // Close the loop
+    const first = displayPolygon[0]!
+    positions.push(first[0]!, editY + 0.01, first[1]!)
+    const geometry = new BufferGeometry()
+    geometry.setAttribute('position', new Float32BufferAttribute(positions, 3))
+    lineRef.current.geometry.dispose()
+    lineRef.current.geometry = geometry
+  }, [displayPolygon, editY])
+  if (displayPolygon.length < minVertices) return null
+  const canDelete = displayPolygon.length > minVertices
+  const editorContent = (
+    <group>
+      {/* Border line */}
+      <line
+        frustumCulled={false}
+        layers={EDITOR_LAYER}
+        raycast={() => {}}
+        // @ts-expect-error R3F <line> element conflicts with SVG <line> type
+        ref={lineRef}
+        renderOrder={10}
+      >
+        <bufferGeometry />
+        <lineBasicNodeMaterial
+          color={color}
+          depthTest={false}
+          depthWrite={false}
+          linewidth={2}
+          opacity={0.8}
+          transparent
+        />
+      </line>
+      {/* Vertex handles - blue cylinders that match surface height */}
+      {displayPolygon.map(([x, z], index) => {
+        const isHovered = hoveredVertex === index
+        const isDragging = dragState?.vertexIndex === index
+        const radius = 0.1
+        const height = Math.max(MIN_HANDLE_HEIGHT, surfaceHeight + 0.02)
+        return (
+          <mesh
+            castShadow
+            key={`vertex-${index}`}
+            layers={EDITOR_LAYER}
+            onClick={(e) => {
+              if (e.button !== 0) return
+              e.stopPropagation()
+            }}
+            onDoubleClick={(e) => {
+              if (e.button !== 0) return
+              e.stopPropagation()
+              if (canDelete) {
+                handleDeleteVertex(index)
+              }
+            }}
+            onPointerDown={(e) => {
+              if (e.button !== 0) return
+              e.stopPropagation()
+              setDragState({
+                isDragging: true,
+                vertexIndex: index,
+                initialPosition: [x!, z!],
+                pointerId: e.pointerId,
+              })
+            }}
+            onPointerEnter={(e) => {
+              e.stopPropagation()
+              setHoveredVertex(index)
+            }}
+            onPointerLeave={(e) => {
+              e.stopPropagation()
+              setHoveredVertex(null)
+            }}
+            position={[x!, editY + height / 2, z!]}
+          >
+            <cylinderGeometry args={[radius, radius, height, 16]} />
+            <meshStandardMaterial
+              color={isDragging ? '#22c55e' : isHovered ? '#60a5fa' : '#3b82f6'}
+            />
+          </mesh>
+        )
+      })}
+      {/* Midpoint handles - smaller green cylinders for adding vertices (hidden while dragging) */}
+      {!dragState &&
+        midpoints.map(([x, z], index) => {
+          const isHovered = hoveredMidpoint === index
+          const radius = 0.06
+          const height = Math.max(MIN_HANDLE_HEIGHT, surfaceHeight + 0.02)
+          return (
+            <mesh
+              key={`midpoint-${index}`}
+              layers={EDITOR_LAYER}
+              onClick={(e) => {
+                if (e.button !== 0) return
+                e.stopPropagation()
+              }}
+              onPointerDown={(e) => {
+                if (e.button !== 0) return
+                e.stopPropagation()
+                const newVertexIndex = handleAddVertex(index, [x!, z!])
+                if (newVertexIndex >= 0) {
+                  setDragState({
+                    isDragging: true,
+                    vertexIndex: newVertexIndex,
+                    initialPosition: [x!, z!],
+                    pointerId: e.pointerId,
+                  })
+                  setHoveredMidpoint(null)
+                }
+              }}
+              onPointerEnter={(e) => {
+                e.stopPropagation()
+                setHoveredMidpoint(index)
+              }}
+              onPointerLeave={(e) => {
+                e.stopPropagation()
+                setHoveredMidpoint(null)
+              }}
+              position={[x!, editY + height / 2, z!]}
+            >
+              <cylinderGeometry args={[radius, radius, height, 16]} />
+              <meshStandardMaterial
+                color={isHovered ? '#4ade80' : '#22c55e'}
+                opacity={isHovered ? 1 : 0.7}
+                transparent
+              />
+            </mesh>
+          )
+        })}
+    </group>
+  )
+  // Mount to level node if available, otherwise render at world origin
+  return levelNode ? createPortal(editorContent, levelNode) : editorContent
+}

package/src/components/tools/site/site-boundary-editor.tsx ADDED Viewed

@@ -0,0 +1,42 @@
+import { type SiteNode, useScene } from '@pascal-app/core'
+import { useCallback } from 'react'
+import { PolygonEditor } from '../shared/polygon-editor'
+/**
+ * Site boundary editor - allows editing site polygon when in site phase
+ * Uses the generic PolygonEditor component
+ */
+export const SiteBoundaryEditor: React.FC = () => {
+  const nodes = useScene((state) => state.nodes)
+  const rootNodeIds = useScene((state) => state.rootNodeIds)
+  const updateNode = useScene((state) => state.updateNode)
+  // Get the site node (first root node)
+  const siteNode = rootNodeIds[0] ? nodes[rootNodeIds[0]] : null
+  const site = siteNode?.type === 'site' ? (siteNode as SiteNode) : null
+  const handlePolygonChange = useCallback(
+    (newPolygon: Array<[number, number]>) => {
+      if (site) {
+        updateNode(site.id, {
+          polygon: {
+            type: 'polygon',
+            points: newPolygon,
+          },
+        })
+      }
+    },
+    [site, updateNode],
+  )
+  if (!site?.polygon?.points || site.polygon.points.length < 3) return null
+  return (
+    <PolygonEditor
+      color="#10b981"
+      minVertices={3}
+      onPolygonChange={handlePolygonChange}
+      polygon={site.polygon.points}
+    />
+  )
+}

package/src/components/tools/slab/slab-boundary-editor.tsx ADDED Viewed

@@ -0,0 +1,42 @@
+import { resolveLevelId, type SlabNode, useScene } from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import { useCallback } from 'react'
+import { PolygonEditor } from '../shared/polygon-editor'
+interface SlabBoundaryEditorProps {
+  slabId: SlabNode['id']
+}
+/**
+ * Slab boundary editor - allows editing slab polygon vertices for a specific slab
+ * Uses the generic PolygonEditor component
+ */
+export const SlabBoundaryEditor: React.FC<SlabBoundaryEditorProps> = ({ slabId }) => {
+  const slabNode = useScene((state) => state.nodes[slabId])
+  const updateNode = useScene((state) => state.updateNode)
+  const setSelection = useViewer((state) => state.setSelection)
+  const slab = slabNode?.type === 'slab' ? (slabNode as SlabNode) : null
+  const handlePolygonChange = useCallback(
+    (newPolygon: Array<[number, number]>) => {
+      updateNode(slabId, { polygon: newPolygon })
+      // Re-assert selection so the slab stays selected after the edit
+      setSelection({ selectedIds: [slabId] })
+    },
+    [slabId, updateNode, setSelection],
+  )
+  if (!slab?.polygon || slab.polygon.length < 3) return null
+  return (
+    <PolygonEditor
+      color="#a3a3a3"
+      levelId={resolveLevelId(slab, useScene.getState().nodes)}
+      minVertices={3}
+      onPolygonChange={handlePolygonChange}
+      polygon={slab.polygon}
+      surfaceHeight={slab.elevation ?? 0.05}
+    />
+  )
+}

package/src/components/tools/slab/slab-hole-editor.tsx ADDED Viewed

@@ -0,0 +1,47 @@
+import { resolveLevelId, type SlabNode, useScene } from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import { useCallback } from 'react'
+import { PolygonEditor } from '../shared/polygon-editor'
+interface SlabHoleEditorProps {
+  slabId: SlabNode['id']
+  holeIndex: number
+}
+/**
+ * Slab hole editor - allows editing a specific hole polygon within a slab
+ * Uses the generic PolygonEditor component
+ */
+export const SlabHoleEditor: React.FC<SlabHoleEditorProps> = ({ slabId, holeIndex }) => {
+  const slabNode = useScene((state) => state.nodes[slabId])
+  const updateNode = useScene((state) => state.updateNode)
+  const setSelection = useViewer((state) => state.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 })
+      // Re-assert selection so the slab stays selected after the edit
+      setSelection({ selectedIds: [slabId] })
+    },
+    [slabId, holeIndex, holes, updateNode, setSelection],
+  )
+  if (!(slab && hole) || hole.length < 3) return null
+  return (
+    <PolygonEditor
+      color="#ef4444"
+      levelId={resolveLevelId(slab, useScene.getState().nodes)} // red for holes
+      minVertices={3}
+      onPolygonChange={handlePolygonChange}
+      polygon={hole}
+      surfaceHeight={slab.elevation ?? 0.05}
+    />
+  )
+}