npm - @pascal-app/editor - Versions diffs - 0.7.0 → 0.9.1 - Mend

@pascal-app/editor 0.7.0 → 0.9.1

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 (244) hide show

package/package.json +12 -13
package/src/components/editor/alignment-3d-guide-layer.tsx +160 -0
package/src/components/editor/custom-camera-controls.tsx +755 -25
package/src/components/editor/editor-layout-mobile.tsx +3 -3
package/src/components/editor/editor-layout-v2.tsx +62 -54
package/src/components/editor/export-manager.tsx +32 -3
package/src/components/editor/first-person/build-collider-world.test.ts +149 -0
package/src/components/editor/first-person/build-collider-world.ts +203 -87
package/src/components/editor/first-person/bvh-ecctrl.tsx +127 -62
package/src/components/editor/first-person-controls.tsx +836 -31
package/src/components/editor/floating-action-menu.tsx +287 -196
package/src/components/editor/floating-building-action-menu.tsx +1 -1
package/src/components/editor/floorplan-panel.tsx +5837 -12006
package/src/components/editor/grid.tsx +51 -17
package/src/components/editor/group-move-handle.tsx +316 -0
package/src/components/editor/group-rotate-handle.tsx +382 -0
package/src/components/editor/group-transform-shared.test.ts +205 -0
package/src/components/editor/group-transform-shared.ts +256 -0
package/src/components/editor/handles/handle-arrow.tsx +523 -0
package/src/components/editor/handles/use-handle-drag.ts +213 -0
package/src/components/editor/index.tsx +234 -190
package/src/components/editor/measurement-pill.tsx +75 -0
package/src/components/editor/node-arrow-handles.tsx +1453 -0
package/src/components/editor/selection-manager.tsx +435 -158
package/src/components/editor/site-edge-labels.tsx +44 -20
package/src/components/editor/slab-hole-highlights.tsx +466 -0
package/src/components/editor/snapshot-capture-overlay.tsx +539 -0
package/src/components/editor/thumbnail-generator.tsx +27 -64
package/src/components/editor/use-floorplan-background-placement.ts +122 -35
package/src/components/editor/use-floorplan-hit-testing.ts +24 -0
package/src/components/editor/use-floorplan-scene-data.ts +14 -2
package/src/components/editor/wall-measurement-label.tsx +11 -6
package/src/components/editor/wall-move-side-handles.tsx +855 -0
package/src/components/editor/wall-opening-highlights.tsx +181 -0
package/src/components/editor/wall-snap-beacon-layer.tsx +150 -0
package/src/components/editor-2d/floorplan-action-menu-layer.tsx +6 -1
package/src/components/editor-2d/floorplan-alignment-guide-layer.tsx +142 -0
package/src/components/editor-2d/floorplan-cursor-indicator-overlay.tsx +5 -3
package/src/components/editor-2d/floorplan-registry-action-menu.tsx +227 -0
package/src/components/editor-2d/floorplan-registry-move-overlay.tsx +616 -0
package/src/components/editor-2d/floorplan-render-context.tsx +62 -0
package/src/components/editor-2d/floorplan-snap-beacon-layer.tsx +75 -0
package/src/components/editor-2d/floorplan-wall-move-ghost-layer.tsx +47 -0
package/src/components/editor-2d/renderers/floorplan-draft-layer.tsx +6 -1
package/src/components/editor-2d/renderers/floorplan-geometry-renderer.tsx +266 -0
package/src/components/editor-2d/renderers/floorplan-measurements-layer.tsx +108 -61
package/src/components/editor-2d/renderers/floorplan-placement-preview-layer.tsx +59 -0
package/src/components/editor-2d/renderers/floorplan-registry-layer.tsx +1963 -0
package/src/components/editor-2d/renderers/floorplan-stair-layer.tsx +29 -14
package/src/components/editor-2d/svg-paths.ts +10 -2
package/src/components/systems/ceiling/ceiling-selection-affordance-system.tsx +30 -9
package/src/components/systems/ceiling/ceiling-system.tsx +12 -8
package/src/components/systems/roof/roof-edit-system.tsx +86 -12
package/src/components/systems/stair/stair-edit-system.tsx +2 -2
package/src/components/systems/zone/zone-label-editor-system.tsx +0 -0
package/src/components/systems/zone/zone-system.tsx +0 -0
package/src/components/tools/elevator/elevator-defaults.ts +8 -0
package/src/components/tools/elevator/elevator-tool.tsx +349 -0
package/src/components/tools/elevator/move-elevator-tool.tsx +252 -0
package/src/components/tools/fence/fence-drafting.ts +64 -22
package/src/components/tools/item/move-tool.tsx +40 -107
package/src/components/tools/item/placement-math.test.ts +10 -0
package/src/components/tools/item/placement-math.ts +33 -9
package/src/components/tools/item/placement-strategies.ts +201 -25
package/src/components/tools/item/placement-types.ts +10 -1
package/src/components/tools/item/use-draft-node.ts +20 -2
package/src/components/tools/item/use-placement-coordinator.tsx +700 -299
package/src/components/tools/registry/move-registry-node-tool.tsx +602 -0
package/src/components/tools/roof/roof-tool.tsx +108 -12
package/src/components/tools/select/box-select-state.ts +77 -0
package/src/components/tools/select/box-select-tool.tsx +324 -543
package/src/components/tools/select/plane-box-select-tool.tsx +577 -0
package/src/components/tools/select/screen-rectangle-selection.ts +84 -0
package/src/components/tools/select/select-candidates.test.ts +109 -0
package/src/components/tools/select/select-candidates.ts +85 -0
package/src/components/tools/shared/affordance-dispatch.ts +30 -0
package/src/components/tools/shared/drag-bounding-box.tsx +171 -0
package/src/components/tools/shared/floor-stack-preview.ts +25 -0
package/src/components/tools/shared/fresh-placement-visibility.ts +61 -0
package/src/components/tools/shared/placement-box-geometry.ts +123 -0
package/src/components/tools/shared/placement-box.tsx +123 -0
package/src/components/tools/shared/polygon-editor.tsx +617 -167
package/src/components/tools/shared/segment-angle.ts +57 -1
package/src/components/tools/site/site-boundary-editor.tsx +464 -12
package/src/components/tools/site/site-flag-model.ts +18 -0
package/src/components/tools/stair/stair-defaults.ts +1 -1
package/src/components/tools/stair/stair-tool.tsx +269 -35
package/src/components/tools/tool-manager.tsx +172 -56
package/src/components/tools/wall/wall-drafting.ts +98 -98
package/src/components/tools/wall/wall-snap-geometry.test.ts +79 -0
package/src/components/tools/wall/wall-snap-geometry.ts +270 -0
package/src/components/tools/zone/zone-tool.tsx +36 -11
package/src/components/ui/action-menu/action-button.tsx +21 -1
package/src/components/ui/action-menu/camera-actions.tsx +0 -0
package/src/components/ui/action-menu/control-modes.tsx +5 -76
package/src/components/ui/action-menu/furnish-tools.tsx +6 -92
package/src/components/ui/action-menu/index.tsx +33 -196
package/src/components/ui/action-menu/structure-tools.tsx +13 -88
package/src/components/ui/action-menu/view-toggles.tsx +262 -37
package/src/components/ui/command-palette/editor-commands.tsx +24 -17
package/src/components/ui/command-palette/index.tsx +6 -256
package/src/components/ui/controls/material-paint-panel.tsx +83 -0
package/src/components/ui/controls/material-picker.tsx +17 -35
package/src/components/ui/controls/metric-control.tsx +33 -11
package/src/components/ui/floating-level-selector.tsx +48 -11
package/src/components/ui/helpers/helper-manager.tsx +21 -17
package/src/components/ui/helpers/registered-tool-helper.tsx +25 -0
package/src/components/ui/item-catalog/catalog-items.tsx +1743 -315
package/src/components/ui/item-catalog/item-catalog.tsx +91 -46
package/src/components/ui/level-duplicate-dialog.tsx +5 -6
package/src/components/ui/panels/node-display.ts +1 -0
package/src/components/ui/panels/paint-panel.tsx +66 -41
package/src/components/ui/panels/panel-manager.tsx +33 -74
package/src/components/ui/panels/panel-wrapper.tsx +217 -12
package/src/components/ui/panels/parametric-inspector.tsx +469 -0
package/src/components/ui/panels/reference-panel.tsx +28 -13
package/src/components/ui/primitives/dropdown-menu.tsx +12 -8
package/src/components/ui/primitives/number-input.tsx +1 -1
package/src/components/ui/primitives/sidebar.tsx +0 -0
package/src/components/ui/scene-loader.tsx +1 -3
package/src/components/ui/sidebar/app-sidebar.tsx +0 -0
package/src/components/ui/sidebar/icon-rail.tsx +0 -0
package/src/components/ui/sidebar/panels/items-panel/function-tree-panel.tsx +263 -0
package/src/components/ui/sidebar/panels/items-panel/index.tsx +404 -0
package/src/components/ui/sidebar/panels/settings-panel/index.tsx +59 -9
package/src/components/ui/sidebar/panels/settings-panel/keyboard-shortcuts-dialog.tsx +6 -1
package/src/components/ui/sidebar/panels/settings-panel/load-build-dialog.tsx +259 -0
package/src/components/ui/sidebar/panels/site-panel/building-tree-node.tsx +3 -1
package/src/components/ui/sidebar/panels/site-panel/ceiling-tree-node.tsx +5 -2
package/src/components/ui/sidebar/panels/site-panel/chimney-tree-node.tsx +83 -0
package/src/components/ui/sidebar/panels/site-panel/dormer-tree-node.tsx +89 -0
package/src/components/ui/sidebar/panels/site-panel/elevator-tree-node.tsx +75 -0
package/src/components/ui/sidebar/panels/site-panel/fence-tree-node.tsx +2 -2
package/src/components/ui/sidebar/panels/site-panel/gutter-tree-node.tsx +83 -0
package/src/components/ui/sidebar/panels/site-panel/index.tsx +8 -12
package/src/components/ui/sidebar/panels/site-panel/level-tree-node.tsx +2 -1
package/src/components/ui/sidebar/panels/site-panel/registry-tree-node.tsx +93 -0
package/src/components/ui/sidebar/panels/site-panel/roof-tree-node.tsx +41 -5
package/src/components/ui/sidebar/panels/site-panel/shelf-tree-node.tsx +128 -0
package/src/components/ui/sidebar/panels/site-panel/slab-tree-node.tsx +5 -2
package/src/components/ui/sidebar/panels/site-panel/solar-panel-tree-node.tsx +83 -0
package/src/components/ui/sidebar/panels/site-panel/spawn-tree-node.tsx +1 -1
package/src/components/ui/sidebar/panels/site-panel/tree-node.tsx +68 -34
package/src/components/ui/sidebar/panels/site-panel/zone-tree-node.tsx +3 -1
package/src/components/ui/sidebar/panels/zone-panel/index.tsx +52 -3
package/src/components/ui/sidebar/tab-bar.tsx +61 -1
package/src/components/ui/slider.tsx +1 -1
package/src/components/viewer-overlay.tsx +169 -52
package/src/components/viewer-zone-system.tsx +1 -1
package/src/hooks/use-auto-save.ts +24 -3
package/src/hooks/use-ceiling-events.ts +175 -0
package/src/hooks/use-drag-action.ts +124 -0
package/src/hooks/use-keyboard.ts +125 -62
package/src/hooks/use-selection.ts +64 -0
package/src/index.tsx +243 -4
package/src/lib/constants.ts +6 -2
package/src/lib/editor-api.ts +62 -0
package/src/lib/elevator-support.ts +96 -0
package/src/lib/floorplan/apply-alignment.ts +111 -0
package/src/lib/floorplan/index.ts +7 -0
package/src/lib/floorplan/selection-tool.ts +40 -0
package/src/lib/floorplan/stairs.ts +12 -1
package/src/lib/fresh-planar-placement.test.ts +102 -0
package/src/lib/fresh-planar-placement.ts +63 -0
package/src/lib/history.ts +2 -1
package/src/lib/level-duplication.test.ts +0 -2
package/src/lib/level-duplication.ts +55 -43
package/src/lib/level-name.ts +11 -0
package/src/lib/material-paint.ts +212 -20
package/src/lib/placement-metadata.ts +29 -0
package/src/lib/planar-cursor-placement.test.ts +43 -0
package/src/lib/planar-cursor-placement.ts +42 -0
package/src/lib/roof-duplication.ts +2 -2
package/src/lib/scene-bounds.ts +1 -1
package/src/lib/scene-clipboard.ts +267 -0
package/src/lib/scene.ts +13 -4
package/src/lib/sfx-bus.ts +25 -1
package/src/lib/sfx-player.ts +75 -27
package/src/lib/site-boundary.ts +1 -0
package/src/lib/stair-duplication.ts +2 -2
package/src/lib/stair-levels.test.ts +146 -0
package/src/lib/stair-levels.ts +177 -0
package/src/lib/world-grid-snap.ts +199 -0
package/src/lib/zone-content.ts +130 -0
package/src/store/use-alignment-guides.ts +21 -0
package/src/store/use-editor.tsx +342 -91
package/src/store/use-placement-preview.ts +31 -0
package/src/store/use-wall-move-ghosts.ts +36 -0
package/src/store/use-wall-snap-indicator.ts +32 -0
package/tsconfig.json +2 -1
package/src/components/editor/preset-thumbnail-generator.tsx +0 -125
package/src/components/editor-2d/renderers/floorplan-roof-layer.tsx +0 -113
package/src/components/feedback-dialog.tsx +0 -265
package/src/components/pascal-radio.tsx +0 -280
package/src/components/preview-button.tsx +0 -16
package/src/components/tools/building/move-building-tool.tsx +0 -157
package/src/components/tools/ceiling/ceiling-boundary-editor.tsx +0 -43
package/src/components/tools/ceiling/ceiling-hole-editor.tsx +0 -49
package/src/components/tools/ceiling/ceiling-tool.tsx +0 -465
package/src/components/tools/ceiling/move-ceiling-tool.tsx +0 -257
package/src/components/tools/column/column-tool.tsx +0 -97
package/src/components/tools/column/move-column-tool.tsx +0 -105
package/src/components/tools/door/door-math.ts +0 -110
package/src/components/tools/door/door-tool.tsx +0 -324
package/src/components/tools/door/move-door-tool.tsx +0 -412
package/src/components/tools/fence/curve-fence-tool.tsx +0 -179
package/src/components/tools/fence/fence-tool.tsx +0 -346
package/src/components/tools/fence/move-fence-endpoint-tool.tsx +0 -438
package/src/components/tools/fence/move-fence-tool.tsx +0 -298
package/src/components/tools/item/item-tool.tsx +0 -26
package/src/components/tools/roof/move-roof-tool.tsx +0 -359
package/src/components/tools/slab/move-slab-tool.tsx +0 -182
package/src/components/tools/slab/slab-boundary-editor.tsx +0 -43
package/src/components/tools/slab/slab-hole-editor.tsx +0 -49
package/src/components/tools/slab/slab-tool.tsx +0 -322
package/src/components/tools/spawn/move-spawn-tool.tsx +0 -101
package/src/components/tools/spawn/spawn-tool.tsx +0 -130
package/src/components/tools/wall/curve-wall-tool.tsx +0 -176
package/src/components/tools/wall/move-wall-endpoint-tool.tsx +0 -423
package/src/components/tools/wall/move-wall-tool.tsx +0 -356
package/src/components/tools/wall/wall-tool.tsx +0 -332
package/src/components/tools/window/move-window-tool.tsx +0 -447
package/src/components/tools/window/window-math.ts +0 -117
package/src/components/tools/window/window-tool.tsx +0 -332
package/src/components/ui/helpers/ceiling-helper.tsx +0 -20
package/src/components/ui/helpers/slab-helper.tsx +0 -20
package/src/components/ui/helpers/wall-helper.tsx +0 -20
package/src/components/ui/panels/ceiling-panel.tsx +0 -250
package/src/components/ui/panels/column-panel.tsx +0 -715
package/src/components/ui/panels/door-panel.tsx +0 -1292
package/src/components/ui/panels/fence-panel.tsx +0 -227
package/src/components/ui/panels/item-panel.tsx +0 -306
package/src/components/ui/panels/presets/presets-popover.tsx +0 -511
package/src/components/ui/panels/roof-panel.tsx +0 -230
package/src/components/ui/panels/roof-segment-panel.tsx +0 -311
package/src/components/ui/panels/slab-panel.tsx +0 -250
package/src/components/ui/panels/spawn-panel.tsx +0 -155
package/src/components/ui/panels/stair-panel.tsx +0 -525
package/src/components/ui/panels/stair-segment-panel.tsx +0 -325
package/src/components/ui/panels/wall-panel.tsx +0 -177
package/src/components/ui/panels/window-panel.tsx +0 -960
package/src/components/ui/viewer-toolbar.tsx +0 -436
package/src/contexts/presets-context.tsx +0 -121
package/src/hooks/use-contextual-tools.ts +0 -61

package/src/components/editor/site-edge-labels.tsx CHANGED Viewed

@@ -1,22 +1,30 @@
 'use client'
 import type { SiteNode } from '@pascal-app/core'
-import { sceneRegistry, useScene } from '@pascal-app/core'
-import { useViewer } from '@pascal-app/viewer'
+import { sceneRegistry, useLiveNodeOverrides, useScene } from '@pascal-app/core'
+import { getSceneTheme, useViewer } from '@pascal-app/viewer'
 import { Html } from '@react-three/drei'
-import { createPortal, useFrame } from '@react-three/fiber'
-import { useMemo, useRef, useState } from 'react'
-import type { Object3D } from 'three'
+import { createPortal, useFrame, useThree } from '@react-three/fiber'
+import { useCallback, useMemo, useRef, useState } from 'react'
+import { type Camera, type Object3D, Vector3 } from 'three'
+import { SITE_BOUNDARY_DRAG_LABEL } from '../../lib/site-boundary'
+import useEditor from '../../store/use-editor'
+import { formatMeasurement } from './measurement-pill'
-function formatMeasurement(value: number, unit: 'metric' | 'imperial') {
-  if (unit === 'imperial') {
-    const feet = value * 3.280_84
-    const wholeFeet = Math.floor(feet)
-    const inches = Math.round((feet - wholeFeet) * 12)
-    if (inches === 12) return `${wholeFeet + 1}'0"`
-    return `${wholeFeet}'${inches}"`
-  }
-  return `${Number.parseFloat(value.toFixed(2))}m`
+type ViewportSize = {
+  width: number
+  height: number
+}
+const htmlPosition = new Vector3()
+function calculateHtmlPosition(el: Object3D, camera: Camera, size: ViewportSize) {
+  htmlPosition.setFromMatrixPosition(el.matrixWorld)
+  htmlPosition.project(camera)
+  const widthHalf = size.width / 2
+  const heightHalf = size.height / 2
+  return [htmlPosition.x * widthHalf + widthHalf, -htmlPosition.y * heightHalf + heightHalf]
 }
 export function SiteEdgeLabels() {
@@ -29,12 +37,28 @@ export function SiteEdgeLabels() {
     const node = state.nodes[firstRoot]
     return node?.type === 'site' ? (node as SiteNode) : null
   })
+  const activeHandleDrag = useEditor((state) => state.activeHandleDrag)
   const unit = useViewer((state) => state.unit)
-  const theme = useViewer((state) => state.theme)
+  const cameraMode = useViewer((state) => state.cameraMode)
+  const isNight = useViewer((state) => getSceneTheme(state.sceneTheme).appearance === 'dark')
+  const camera = useThree((state) => state.camera)
+  // Drei Html can hold the previous default camera across a camera-object swap.
+  const calculateLabelPosition = useCallback(
+    (el: Object3D, _camera: Camera, size: ViewportSize) => calculateHtmlPosition(el, camera, size),
+    [camera],
+  )
   const siteNodeId = siteNode?.id
+  const livePolygon = useLiveNodeOverrides((state) => {
+    if (!siteNodeId) return null
+    return (state.overrides.get(siteNodeId)?.polygon as SiteNode['polygon'] | undefined) ?? null
+  })
+  const polygon = livePolygon?.points ?? siteNode?.polygon?.points ?? []
+  const shouldShowLabels =
+    Boolean(siteNodeId) &&
+    activeHandleDrag?.nodeId === siteNodeId &&
+    activeHandleDrag?.label === SITE_BOUNDARY_DRAG_LABEL
-  const isNight = theme === 'dark'
   const color = isNight ? '#ffffff' : '#111111'
   const shadowColor = isNight ? '#111111' : '#ffffff'
@@ -55,7 +79,6 @@ export function SiteEdgeLabels() {
   })
   const edges = useMemo(() => {
-    const polygon = siteNode?.polygon?.points ?? []
     if (polygon.length < 2) return []
     return polygon.map(([x1, z1], i) => {
       const [x2, z2] = polygon[(i + 1) % polygon.length]!
@@ -64,16 +87,17 @@ export function SiteEdgeLabels() {
       const dist = Math.sqrt((x2 - x1!) ** 2 + (z2 - z1!) ** 2)
       return { midX, midZ, dist }
     })
-  }, [siteNode?.polygon?.points])
+  }, [polygon])
-  if (!siteObj || edges.length === 0) return null
+  if (!shouldShowLabels || !siteObj || edges.length === 0) return null
   return createPortal(
     <>
       {edges.map((edge, i) => (
         <Html
           center
-          key={`edge-${i}`}
+          calculatePosition={calculateLabelPosition}
+          key={`${cameraMode}-${camera.uuid}-edge-${i}`}
           occlude
           position={[edge.midX, 0.5, edge.midZ]}
           style={{ pointerEvents: 'none', userSelect: 'none' }}

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

@@ -0,0 +1,466 @@
+'use client'
+import {
+  type AnyNodeId,
+  type BuildingNode,
+  type LevelNode,
+  resolveBuildingForLevel,
+  resolveLevelId,
+  type SlabNode,
+  type SurfaceHoleMetadata,
+  sceneRegistry,
+  useLiveNodeOverrides,
+  useScene,
+} from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import { createPortal, type ThreeEvent } from '@react-three/fiber'
+import { useCallback, useEffect, useMemo, useState } from 'react'
+import {
+  BufferGeometry,
+  DoubleSide,
+  Float32BufferAttribute,
+  type Object3D,
+  ShapeUtils,
+  Vector2,
+} from 'three'
+import { LineBasicNodeMaterial, MeshBasicNodeMaterial } from 'three/webgpu'
+import { EDITOR_LAYER } from '../../lib/constants'
+import useEditor from '../../store/use-editor'
+import { suppressBoxSelectForPointer } from '../tools/select/box-select-state'
+import { swallowNextClick } from './handles/use-handle-drag'
+const ACCENT = 0x83_81_ed
+const SURFACE_OFFSET = 0.01
+const MIN_HIT_HEIGHT = 0.16
+const NO_RAYCAST = () => null
+let restoreNodeClickSuppression: (() => void) | null = null
+const outlineMaterial = new LineBasicNodeMaterial({
+  color: ACCENT,
+  depthTest: false,
+  depthWrite: false,
+})
+const fillMaterial = new MeshBasicNodeMaterial({
+  color: ACCENT,
+  transparent: true,
+  opacity: 0.5,
+  depthTest: false,
+  depthWrite: false,
+  side: DoubleSide,
+})
+// Invisible hit targets must stay out of the scene MRT pass; keep them on
+// EDITOR_LAYER even though they never write color.
+const hitMaterial = new MeshBasicNodeMaterial({
+  color: ACCENT,
+  colorWrite: false,
+  depthTest: false,
+  depthWrite: false,
+  opacity: 0,
+  side: DoubleSide,
+  transparent: true,
+})
+type HolePolygon = Array<[number, number]>
+function makeFillGeometry(hole: HolePolygon, y: number): BufferGeometry {
+  const contour2d = hole.map(([x, z]) => new Vector2(x, z))
+  const positions: number[] = []
+  const indices: number[] = []
+  for (const point of contour2d) {
+    positions.push(point.x, y, point.y)
+  }
+  const triangles = ShapeUtils.triangulateShape(contour2d, [])
+  for (const tri of triangles) {
+    indices.push(tri[0]!, tri[2]!, tri[1]!)
+  }
+  const geometry = new BufferGeometry()
+  geometry.setAttribute('position', new Float32BufferAttribute(positions, 3))
+  geometry.setIndex(indices)
+  geometry.computeVertexNormals()
+  geometry.computeBoundingSphere()
+  return geometry
+}
+function makeOutlineGeometry(hole: HolePolygon, y: number): BufferGeometry {
+  const positions: number[] = []
+  for (let index = 0; index < hole.length; index += 1) {
+    const [ax, az] = hole[index]!
+    const [bx, bz] = hole[(index + 1) % hole.length]!
+    positions.push(ax, y, az, bx, y, bz)
+  }
+  const geometry = new BufferGeometry()
+  geometry.setAttribute('position', new Float32BufferAttribute(positions, 3))
+  geometry.computeBoundingSphere()
+  return geometry
+}
+function makeHitGeometry(hole: HolePolygon, centerY: number, height: number): BufferGeometry {
+  const topY = centerY + height / 2
+  const bottomY = centerY - height / 2
+  const positions: number[] = []
+  const indices: number[] = []
+  for (const [x, z] of hole) positions.push(x, topY, z)
+  for (const [x, z] of hole) positions.push(x, bottomY, z)
+  const triangles = ShapeUtils.triangulateShape(
+    hole.map(([x, z]) => new Vector2(x, z)),
+    [],
+  )
+  const bottomOffset = hole.length
+  for (const tri of triangles) {
+    indices.push(tri[0]!, tri[2]!, tri[1]!)
+    indices.push(bottomOffset + tri[0]!, bottomOffset + tri[1]!, bottomOffset + tri[2]!)
+  }
+  for (let index = 0; index < hole.length; index += 1) {
+    const nextIndex = (index + 1) % hole.length
+    indices.push(index, nextIndex, bottomOffset + nextIndex)
+    indices.push(index, bottomOffset + nextIndex, bottomOffset + index)
+  }
+  const geometry = new BufferGeometry()
+  geometry.setAttribute('position', new Float32BufferAttribute(positions, 3))
+  geometry.setIndex(indices)
+  geometry.computeVertexNormals()
+  geometry.computeBoundingSphere()
+  return geometry
+}
+function getSurfaceY(slab: SlabNode): number {
+  const elevation = slab.elevation ?? 0.05
+  return (elevation > 0 ? elevation : 0) + SURFACE_OFFSET
+}
+function getHitCenterY(slab: SlabNode): number {
+  const elevation = slab.elevation ?? 0.05
+  const surfaceTop = elevation > 0 ? elevation : 0
+  // Keep the hit box's TOP at the slab surface (never poke above it) so the
+  // slab's centre thickness/height handle, which sits on top, always wins the
+  // raycast over the hole's selectable area.
+  return surfaceTop - getHitHeight(slab) / 2
+}
+function getHitHeight(slab: SlabNode): number {
+  return Math.max(Math.abs(slab.elevation ?? 0.05), MIN_HIT_HEIGHT)
+}
+function clearHoveredHoleIfMatches(nodeId: string, holeIndex: number) {
+  const { hoveredHole, setHoveredHole } = useEditor.getState()
+  if (hoveredHole?.nodeId === nodeId && hoveredHole.holeIndex === holeIndex) {
+    setHoveredHole(null)
+  }
+}
+function selectOwnedNode(ownerId: string, expectedType: 'stair' | 'elevator') {
+  const nodes = useScene.getState().nodes
+  const owner = nodes[ownerId as AnyNodeId]
+  if (owner?.type !== expectedType) return
+  const selectedId = owner.id as AnyNodeId
+  if (owner.type === 'elevator') {
+    const buildingId =
+      owner.parentId && nodes[owner.parentId as AnyNodeId]?.type === 'building'
+        ? (owner.parentId as BuildingNode['id'])
+        : null
+    useViewer
+      .getState()
+      .setSelection(
+        buildingId ? { buildingId, selectedIds: [selectedId] } : { selectedIds: [selectedId] },
+      )
+    return
+  }
+  const levelId = resolveLevelId(owner, nodes)
+  const buildingId =
+    levelId && levelId !== 'default' ? resolveBuildingForLevel(levelId as AnyNodeId, nodes) : null
+  useViewer.getState().setSelection({
+    ...(buildingId ? { buildingId: buildingId as BuildingNode['id'] } : {}),
+    ...(levelId && levelId !== 'default' ? { levelId: levelId as LevelNode['id'] } : {}),
+    selectedIds: [selectedId],
+  })
+}
+function resetPointerCursor() {
+  if (document.body.style.cursor === 'pointer') {
+    document.body.style.cursor = ''
+  }
+}
+function stopPointerPropagation(event: ThreeEvent<PointerEvent>) {
+  event.stopPropagation()
+  suppressBoxSelectForPointer(event)
+  event.nativeEvent.stopPropagation()
+  event.nativeEvent.stopImmediatePropagation()
+}
+function suppressNodeClickUntilPointerUp() {
+  restoreNodeClickSuppression?.()
+  const previousInputDragging = useViewer.getState().inputDragging
+  useViewer.getState().setInputDragging(true)
+  swallowNextClick()
+  const restore = () => {
+    if (restoreNodeClickSuppression !== restore) return
+    useViewer.getState().setInputDragging(previousInputDragging)
+    window.removeEventListener('pointerup', restore)
+    window.removeEventListener('pointercancel', restore)
+    restoreNodeClickSuppression = null
+  }
+  restoreNodeClickSuppression = restore
+  window.addEventListener('pointerup', restore, { once: true })
+  window.addEventListener('pointercancel', restore, { once: true })
+}
+function releaseNodeClickSuppression() {
+  restoreNodeClickSuppression?.()
+}
+export function SlabHoleHighlights() {
+  const selectedIds = useViewer((state) => state.selection.selectedIds)
+  const hoveredHole = useEditor((state) => state.hoveredHole)
+  const setHoveredHole = useEditor((state) => state.setHoveredHole)
+  useEffect(() => {
+    if (hoveredHole && !selectedIds.includes(hoveredHole.nodeId as AnyNodeId)) {
+      setHoveredHole(null)
+    }
+  }, [hoveredHole, selectedIds, setHoveredHole])
+  if (selectedIds.length === 0) return null
+  return (
+    <>
+      {selectedIds.map((id) => (
+        <SelectedSlabHoleHighlights key={id} slabId={id} />
+      ))}
+    </>
+  )
+}
+function SelectedSlabHoleHighlights({ slabId }: { slabId: string }) {
+  const node = useScene((state) => state.nodes[slabId as AnyNodeId])
+  const override = useLiveNodeOverrides((state) => state.overrides.get(slabId))
+  const hoveredHole = useEditor((state) => state.hoveredHole)
+  const editingHole = useEditor((state) => state.editingHole)
+  const setHoveredHole = useEditor((state) => state.setHoveredHole)
+  const slab = node?.type === 'slab' ? (node as SlabNode) : null
+  const effectiveSlab = slab ? ({ ...slab, ...(override ?? {}) } as SlabNode) : null
+  const holes = effectiveSlab?.holes ?? []
+  const holeMetadata = effectiveSlab?.holeMetadata ?? []
+  // Portal the highlights into the slab's OWN object — exactly how
+  // NodeArrowHandles portals into a node object. This is what makes R3F deliver
+  // pointer events to the hit meshes (portaling into the raw scene renders but
+  // never receives hover/click), and the children inherit the slab's world
+  // transform so the holes sit in slab-local space with no manual math.
+  const [slabObject, setSlabObject] = useState<Object3D | null>(
+    () => sceneRegistry.nodes.get(slabId as AnyNodeId) ?? null,
+  )
+  useEffect(() => {
+    let frameId = 0
+    const resolve = () => {
+      const next = sceneRegistry.nodes.get(slabId as AnyNodeId) ?? null
+      setSlabObject((cur) => (cur === next ? cur : next))
+      if (!next) {
+        frameId = window.requestAnimationFrame(resolve)
+      }
+    }
+    resolve()
+    return () => {
+      if (frameId) window.cancelAnimationFrame(frameId)
+    }
+  }, [slabId])
+  useEffect(() => {
+    if (hoveredHole?.nodeId !== slabId) return
+    if (!effectiveSlab || hoveredHole.holeIndex >= holes.length) {
+      setHoveredHole(null)
+    }
+  }, [effectiveSlab, holes.length, hoveredHole, slabId, setHoveredHole])
+  if (!effectiveSlab || holes.length === 0 || !slabObject) return null
+  const surfaceY = getSurfaceY(effectiveSlab)
+  const hitCenterY = getHitCenterY(effectiveSlab)
+  const hitHeight = getHitHeight(effectiveSlab)
+  return createPortal(
+    <group>
+      {holes.map((hole, holeIndex) => {
+        const metadata = holeMetadata[holeIndex]
+        if (hole.length < 3) return null
+        const isActive =
+          (hoveredHole?.nodeId === slabId && hoveredHole.holeIndex === holeIndex) ||
+          (editingHole?.nodeId === slabId && editingHole.holeIndex === holeIndex)
+        return (
+          <SlabHoleHighlight
+            active={isActive}
+            hitCenterY={hitCenterY}
+            hitHeight={hitHeight}
+            hole={hole}
+            holeIndex={holeIndex}
+            key={`${slabId}:${holeIndex}`}
+            metadata={metadata}
+            slabId={slabId}
+            surfaceY={surfaceY}
+          />
+        )
+      })}
+    </group>,
+    slabObject,
+  )
+}
+function SlabHoleHighlight({
+  active,
+  hitCenterY,
+  hitHeight,
+  hole,
+  holeIndex,
+  metadata,
+  slabId,
+  surfaceY,
+}: {
+  active: boolean
+  hitCenterY: number
+  hitHeight: number
+  hole: HolePolygon
+  holeIndex: number
+  metadata: SurfaceHoleMetadata | undefined
+  slabId: string
+  surfaceY: number
+}) {
+  const fillGeometry = useMemo(() => makeFillGeometry(hole, surfaceY), [hole, surfaceY])
+  const outlineGeometry = useMemo(() => makeOutlineGeometry(hole, surfaceY), [hole, surfaceY])
+  const hitGeometry = useMemo(
+    () => makeHitGeometry(hole, hitCenterY, hitHeight),
+    [hitCenterY, hitHeight, hole],
+  )
+  useEffect(() => () => fillGeometry.dispose(), [fillGeometry])
+  useEffect(() => () => outlineGeometry.dispose(), [outlineGeometry])
+  useEffect(() => () => hitGeometry.dispose(), [hitGeometry])
+  useEffect(() => () => clearHoveredHoleIfMatches(slabId, holeIndex), [holeIndex, slabId])
+  const handlePointerEnter = useCallback(
+    (event: ThreeEvent<PointerEvent>) => {
+      event.stopPropagation()
+      useEditor.getState().setHoveredHole({ nodeId: slabId, holeIndex })
+      if (document.body.style.cursor !== 'pointer') {
+        document.body.style.cursor = 'pointer'
+      }
+    },
+    [holeIndex, slabId],
+  )
+  const handlePointerLeave = useCallback(
+    (event: ThreeEvent<PointerEvent>) => {
+      event.stopPropagation()
+      clearHoveredHoleIfMatches(slabId, holeIndex)
+      resetPointerCursor()
+    },
+    [holeIndex, slabId],
+  )
+  const handlePointerDown = useCallback(
+    (event: ThreeEvent<PointerEvent>) => {
+      if (event.button !== 0) return
+      stopPointerPropagation(event)
+      suppressNodeClickUntilPointerUp()
+      useEditor.getState().setHoveredHole({ nodeId: slabId, holeIndex })
+      // Auto-managed cutouts (stair / elevator) jump to their owner so the
+      // user edits the source rather than the synced hole. Everything else —
+      // manual holes and holes that predate holeMetadata — opens the editor.
+      if (metadata?.source === 'stair' && metadata.stairId) {
+        useEditor.getState().setEditingHole(null)
+        useEditor.getState().setHoveredHole(null)
+        resetPointerCursor()
+        selectOwnedNode(metadata.stairId, 'stair')
+        return
+      }
+      if (metadata?.source === 'elevator' && metadata.elevatorId) {
+        useEditor.getState().setEditingHole(null)
+        useEditor.getState().setHoveredHole(null)
+        resetPointerCursor()
+        selectOwnedNode(metadata.elevatorId, 'elevator')
+        return
+      }
+      useEditor.getState().setEditingHole({ nodeId: slabId, holeIndex })
+      useViewer.getState().setSelection({ selectedIds: [slabId as AnyNodeId] })
+    },
+    [holeIndex, metadata, slabId],
+  )
+  const handlePointerUp = useCallback((event: ThreeEvent<PointerEvent>) => {
+    releaseNodeClickSuppression()
+    stopPointerPropagation(event)
+  }, [])
+  return (
+    <>
+      <mesh
+        frustumCulled={false}
+        geometry={fillGeometry}
+        material={fillMaterial}
+        raycast={NO_RAYCAST}
+        renderOrder={1004}
+      />
+      <lineSegments
+        frustumCulled={false}
+        geometry={outlineGeometry}
+        material={outlineMaterial}
+        raycast={NO_RAYCAST}
+        renderOrder={1005}
+      />
+      {active && (
+        <>
+          <mesh
+            frustumCulled={false}
+            geometry={fillGeometry}
+            material={fillMaterial}
+            raycast={NO_RAYCAST}
+            renderOrder={1006}
+          />
+          <lineSegments
+            frustumCulled={false}
+            geometry={outlineGeometry}
+            material={outlineMaterial}
+            raycast={NO_RAYCAST}
+            renderOrder={1007}
+          />
+        </>
+      )}
+      <mesh
+        frustumCulled={false}
+        geometry={hitGeometry}
+        layers={EDITOR_LAYER}
+        material={hitMaterial}
+        onPointerDown={handlePointerDown}
+        onPointerEnter={handlePointerEnter}
+        onPointerLeave={handlePointerLeave}
+        onPointerUp={handlePointerUp}
+        renderOrder={1006}
+      />
+    </>
+  )
+}
+export default SlabHoleHighlights