npm - @pascal-app/editor - Versions diffs - 0.8.0 → 0.9.2 - Mend

@pascal-app/editor 0.8.0 → 0.9.2

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

package/package.json +15 -13
package/src/components/editor/alignment-3d-guide-layer.tsx +168 -0
package/src/components/editor/bake-exporter.tsx +47 -0
package/src/components/editor/custom-camera-controls.tsx +795 -28
package/src/components/editor/editor-layout-mobile.tsx +8 -3
package/src/components/editor/editor-layout-v2.tsx +76 -51
package/src/components/editor/export-manager.tsx +69 -32
package/src/components/editor/fence-tangent-lines-3d.tsx +87 -0
package/src/components/editor/first-person/build-collider-world.test.ts +182 -0
package/src/components/editor/first-person/build-collider-world.ts +228 -83
package/src/components/editor/first-person-controls.tsx +943 -27
package/src/components/editor/floating-action-menu.tsx +676 -208
package/src/components/editor/floating-building-action-menu.tsx +2 -2
package/src/components/editor/floorplan-background-selection.test.ts +58 -0
package/src/components/editor/floorplan-background-selection.ts +3 -2
package/src/components/editor/floorplan-panel.tsx +6916 -12137
package/src/components/editor/grid.tsx +197 -36
package/src/components/editor/group-actions.ts +457 -0
package/src/components/editor/group-floating-action-menu.tsx +130 -0
package/src/components/editor/group-move-3d.ts +397 -0
package/src/components/editor/group-rotate-handle.tsx +420 -0
package/src/components/editor/group-selection-box-3d.tsx +173 -0
package/src/components/editor/group-transform-shared.test.ts +396 -0
package/src/components/editor/group-transform-shared.ts +489 -0
package/src/components/editor/handles/handle-arrow.tsx +581 -0
package/src/components/editor/handles/use-handle-drag.ts +246 -0
package/src/components/editor/index.tsx +412 -162
package/src/components/editor/measurement-pill.tsx +115 -0
package/src/components/editor/node-action-menu.tsx +14 -1
package/src/components/editor/node-arrow-handles.tsx +1646 -0
package/src/components/editor/opening-guides-3d-layer.tsx +144 -0
package/src/components/editor/quick-measurement-card.tsx +70 -0
package/src/components/editor/quick-measurement-hud.tsx +28 -0
package/src/components/editor/riser-diagram-panel.tsx +137 -0
package/src/components/editor/selection-manager.tsx +1106 -483
package/src/components/editor/site-edge-labels.tsx +45 -21
package/src/components/editor/slab-hole-highlights.tsx +474 -0
package/src/components/editor/snapshot-capture-overlay.tsx +369 -155
package/src/components/editor/three-context-bridge.ts +22 -0
package/src/components/editor/thumbnail-generator.tsx +140 -41
package/src/components/editor/use-floorplan-background-placement.ts +190 -35
package/src/components/editor/use-floorplan-hit-testing.ts +24 -0
package/src/components/editor/use-floorplan-scene-data.ts +19 -7
package/src/components/editor/use-mesh-settle-epoch.ts +26 -0
package/src/components/editor/wall-measurement-label.tsx +14 -19
package/src/components/editor/wall-move-side-handles.tsx +870 -0
package/src/components/editor/wall-opening-highlights.tsx +181 -0
package/src/components/editor/wall-snap-beacon-layer.tsx +304 -0
package/src/components/editor-2d/floorplan-action-menu-layer.tsx +15 -6
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-group-action-menu.tsx +87 -0
package/src/components/editor-2d/floorplan-group-move.tsx +701 -0
package/src/components/editor-2d/floorplan-measurement-tool-layer.test.ts +113 -0
package/src/components/editor-2d/floorplan-measurement-tool-layer.tsx +1656 -0
package/src/components/editor-2d/floorplan-quick-measure-layer.tsx +212 -0
package/src/components/editor-2d/floorplan-registry-action-menu.tsx +392 -0
package/src/components/editor-2d/floorplan-registry-move-overlay.tsx +857 -0
package/src/components/editor-2d/floorplan-render-context.tsx +62 -0
package/src/components/editor-2d/floorplan-snap-beacon-layer.tsx +77 -0
package/src/components/editor-2d/floorplan-wall-move-ghost-layer.tsx +47 -0
package/src/components/editor-2d/renderers/floorplan-geometry-renderer.tsx +266 -0
package/src/components/editor-2d/renderers/floorplan-label-angle.test.ts +15 -0
package/src/components/editor-2d/renderers/floorplan-label-angle.ts +14 -0
package/src/components/editor-2d/renderers/floorplan-measurements-layer.tsx +108 -66
package/src/components/editor-2d/renderers/floorplan-placement-preview-layer.tsx +62 -0
package/src/components/editor-2d/renderers/floorplan-registry-layer.test.ts +308 -0
package/src/components/editor-2d/renderers/floorplan-registry-layer.tsx +3325 -0
package/src/components/editor-2d/renderers/floorplan-stair-layer.tsx +24 -9
package/src/components/editor-2d/renderers/floorplan-voronoi-layer.tsx +128 -0
package/src/components/editor-2d/svg-paths.ts +10 -2
package/src/components/systems/ceiling/ceiling-selection-affordance-system.tsx +439 -57
package/src/components/systems/ceiling/ceiling-system.tsx +109 -12
package/src/components/systems/roof/roof-edit-system.tsx +1851 -22
package/src/components/systems/selection-affordance-manager.tsx +38 -0
package/src/components/systems/stair/stair-edit-system.tsx +1 -1
package/src/components/systems/zone/zone-label-editor-system.tsx +14 -1
package/src/components/systems/zone/zone-system.tsx +42 -13
package/src/components/tools/elevator/elevator-defaults.ts +8 -0
package/src/components/tools/elevator/elevator-tool.tsx +375 -0
package/src/components/tools/elevator/move-elevator-tool.tsx +263 -0
package/src/components/tools/fence/fence-drafting.ts +141 -27
package/src/components/tools/item/move-tool.tsx +45 -105
package/src/components/tools/item/placement-math.test.ts +22 -0
package/src/components/tools/item/placement-math.ts +59 -7
package/src/components/tools/item/placement-strategies.ts +432 -16
package/src/components/tools/item/placement-types.ts +22 -1
package/src/components/tools/item/use-draft-node.ts +51 -2
package/src/components/tools/item/use-placement-coordinator.tsx +1399 -256
package/src/components/tools/registry/move-registry-node-tool.tsx +1064 -0
package/src/components/tools/roof/roof-tool.tsx +350 -28
package/src/components/tools/select/box-select-state.ts +88 -0
package/src/components/tools/select/box-select-tool.tsx +442 -520
package/src/components/tools/select/marquee-geometry.test.ts +161 -0
package/src/components/tools/select/marquee-geometry.ts +155 -0
package/src/components/tools/select/plane-box-select-tool.tsx +570 -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/cursor-sphere.tsx +62 -26
package/src/components/tools/shared/drag-bounding-box.tsx +195 -0
package/src/components/tools/shared/facing-indicator.tsx +87 -0
package/src/components/tools/shared/facing-pose-indicator.tsx +54 -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 +305 -0
package/src/components/tools/shared/polygon-editor.tsx +866 -175
package/src/components/tools/shared/segment-angle.ts +56 -0
package/src/components/tools/site/site-boundary-editor.tsx +520 -16
package/src/components/tools/site/site-flag-model.ts +18 -0
package/src/components/tools/stair/stair-defaults.ts +2 -1
package/src/components/tools/stair/stair-tool.tsx +342 -37
package/src/components/tools/tool-manager.tsx +239 -62
package/src/components/tools/wall/wall-drafting.test.ts +330 -0
package/src/components/tools/wall/wall-drafting.ts +248 -171
package/src/components/tools/wall/wall-snap-geometry.test.ts +123 -0
package/src/components/tools/wall/wall-snap-geometry.ts +331 -0
package/src/components/tools/zone/zone-boundary-editor.tsx +5 -1
package/src/components/tools/zone/zone-tool.tsx +86 -82
package/src/components/ui/action-menu/action-button.tsx +21 -1
package/src/components/ui/action-menu/camera-actions.tsx +24 -17
package/src/components/ui/action-menu/control-modes.tsx +40 -170
package/src/components/ui/action-menu/furnish-tools.tsx +5 -5
package/src/components/ui/action-menu/index.tsx +3 -117
package/src/components/ui/action-menu/measurement-control.tsx +188 -0
package/src/components/ui/action-menu/structure-tools.tsx +27 -93
package/src/components/ui/action-menu/view-toggles.tsx +279 -90
package/src/components/ui/command-palette/editor-commands.tsx +20 -15
package/src/components/ui/command-palette/index.tsx +5 -3
package/src/components/ui/controls/material-paint-panel.tsx +152 -0
package/src/components/ui/controls/material-picker.tsx +87 -177
package/src/components/ui/controls/material-properties-editor.tsx +108 -0
package/src/components/ui/controls/metric-control.tsx +142 -46
package/src/components/ui/controls/scene-material-list.tsx +247 -0
package/src/components/ui/controls/slider-control.tsx +88 -38
package/src/components/ui/floating-level-selector.tsx +47 -10
package/src/components/ui/helpers/building-helper.tsx +10 -23
package/src/components/ui/helpers/contextual-helper-panel.tsx +428 -0
package/src/components/ui/helpers/helper-manager.tsx +235 -23
package/src/components/ui/helpers/item-helper.tsx +28 -32
package/src/components/ui/helpers/registered-tool-helper.tsx +59 -0
package/src/components/ui/helpers/roof-helper.tsx +10 -12
package/src/components/ui/icon-ref.tsx +47 -0
package/src/components/ui/item-catalog/catalog-items.tsx +40 -1
package/src/components/ui/item-catalog/item-catalog.tsx +16 -36
package/src/components/ui/level-duplicate-dialog.tsx +2 -1
package/src/components/ui/panels/node-display.ts +17 -16
package/src/components/ui/panels/panel-manager.tsx +55 -58
package/src/components/ui/panels/panel-wrapper.tsx +238 -12
package/src/components/ui/panels/parametric-inspector.tsx +482 -0
package/src/components/ui/panels/reference-panel.tsx +54 -19
package/src/components/ui/primitives/dropdown-menu.tsx +12 -8
package/src/components/ui/primitives/shortcut-token.tsx +39 -3
package/src/components/ui/primitives/sidebar.tsx +1 -0
package/src/components/ui/scene-loader.tsx +1 -3
package/src/components/ui/sidebar/app-sidebar.tsx +5 -1
package/src/components/ui/sidebar/icon-rail.tsx +50 -31
package/src/components/ui/sidebar/panels/items-panel/function-tree-panel.tsx +263 -0
package/src/components/ui/sidebar/panels/items-panel/index.tsx +82 -8
package/src/components/ui/sidebar/panels/plugins-panel.tsx +218 -0
package/src/components/ui/sidebar/panels/settings-panel/index.tsx +122 -41
package/src/components/ui/sidebar/panels/settings-panel/keyboard-shortcuts-dialog.tsx +66 -7
package/src/components/ui/sidebar/panels/settings-panel/load-build-dialog.tsx +267 -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 +9 -5
package/src/components/ui/sidebar/panels/site-panel/chimney-tree-node.tsx +86 -0
package/src/components/ui/sidebar/panels/site-panel/column-tree-node.tsx +1 -1
package/src/components/ui/sidebar/panels/site-panel/door-tree-node.tsx +7 -2
package/src/components/ui/sidebar/panels/site-panel/dormer-tree-node.tsx +92 -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 +3 -3
package/src/components/ui/sidebar/panels/site-panel/gutter-tree-node.tsx +86 -0
package/src/components/ui/sidebar/panels/site-panel/index.tsx +42 -21
package/src/components/ui/sidebar/panels/site-panel/item-tree-node.tsx +31 -17
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 +140 -0
package/src/components/ui/sidebar/panels/site-panel/roof-tree-node.tsx +48 -8
package/src/components/ui/sidebar/panels/site-panel/shelf-tree-node.tsx +132 -0
package/src/components/ui/sidebar/panels/site-panel/slab-tree-node.tsx +9 -5
package/src/components/ui/sidebar/panels/site-panel/solar-panel-tree-node.tsx +86 -0
package/src/components/ui/sidebar/panels/site-panel/spawn-tree-node.tsx +7 -1
package/src/components/ui/sidebar/panels/site-panel/stair-tree-node.tsx +2 -2
package/src/components/ui/sidebar/panels/site-panel/tree-node.tsx +112 -39
package/src/components/ui/sidebar/panels/site-panel/tree-structure.ts +36 -0
package/src/components/ui/sidebar/panels/site-panel/wall-tree-node.tsx +1 -1
package/src/components/ui/sidebar/panels/site-panel/window-tree-node.tsx +7 -2
package/src/components/ui/sidebar/panels/site-panel/zone-tree-node.tsx +3 -3
package/src/components/ui/sidebar/panels/zone-panel/index.tsx +51 -2
package/src/components/ui/sidebar/tab-bar.tsx +75 -1
package/src/components/ui/sidebar/use-plugin-panels.tsx +132 -0
package/src/components/ui/snap-target-badge.test.tsx +40 -0
package/src/components/ui/snap-target-badge.tsx +88 -0
package/src/components/viewer-overlay.tsx +253 -61
package/src/components/viewer-zone-system.tsx +7 -2
package/src/hooks/use-auto-save.test.ts +14 -0
package/src/hooks/use-auto-save.ts +64 -10
package/src/hooks/use-ceiling-events.ts +176 -0
package/src/hooks/use-drag-action.ts +127 -0
package/src/hooks/use-keyboard.ts +493 -95
package/src/hooks/use-selection.ts +64 -0
package/src/index.tsx +451 -6
package/src/lib/active-placement-surface.ts +35 -0
package/src/lib/ceiling-plan-snap.ts +24 -0
package/src/lib/constants.ts +6 -2
package/src/lib/contextual-help.test.ts +112 -0
package/src/lib/contextual-help.ts +144 -0
package/src/lib/continuation.ts +64 -0
package/src/lib/direct-manipulation.test.ts +192 -0
package/src/lib/direct-manipulation.ts +109 -0
package/src/lib/editor-api.ts +50 -0
package/src/lib/elevator-support.ts +96 -0
package/src/lib/floorplan/apply-alignment.test.ts +25 -0
package/src/lib/floorplan/apply-alignment.ts +117 -0
package/src/lib/floorplan/floorplan-export.tsx +364 -0
package/src/lib/floorplan/geometry.ts +53 -0
package/src/lib/floorplan/index.ts +10 -0
package/src/lib/floorplan/items.ts +5 -2
package/src/lib/floorplan/plan-coords.ts +21 -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 +339 -0
package/src/lib/fresh-planar-placement.ts +130 -0
package/src/lib/glb-export.test.ts +441 -0
package/src/lib/glb-export.ts +874 -0
package/src/lib/history.ts +11 -1
package/src/lib/interaction/hot-set.test.ts +133 -0
package/src/lib/interaction/hot-set.ts +67 -0
package/src/lib/interaction/overlay-policy.test.ts +51 -0
package/src/lib/interaction/overlay-policy.ts +59 -0
package/src/lib/interaction/scope.ts +211 -0
package/src/lib/level-duplication.ts +54 -42
package/src/lib/level-selection.ts +2 -2
package/src/lib/material-paint.ts +227 -48
package/src/lib/measurement-kind.test.ts +30 -0
package/src/lib/measurement-kind.ts +19 -0
package/src/lib/measurement-label.test.ts +47 -0
package/src/lib/measurement-label.ts +68 -0
package/src/lib/measurement-parser.ts +116 -0
package/src/lib/measurements.test.ts +183 -0
package/src/lib/measurements.ts +199 -0
package/src/lib/paint-scope.test.ts +454 -0
package/src/lib/paint-scope.ts +461 -0
package/src/lib/placement-drag-release.ts +23 -0
package/src/lib/placement-metadata.ts +29 -0
package/src/lib/planar-cursor-placement.test.ts +100 -0
package/src/lib/planar-cursor-placement.ts +42 -0
package/src/lib/plugin-panels.test.ts +19 -0
package/src/lib/plugin-panels.ts +91 -0
package/src/lib/quick-measurement.test.ts +77 -0
package/src/lib/quick-measurement.ts +109 -0
package/src/lib/roof-duplication.ts +7 -7
package/src/lib/roof-hover-outline-proxy.ts +22 -0
package/src/lib/roof-wall-hit.ts +164 -0
package/src/lib/scene-clipboard.test.ts +196 -0
package/src/lib/scene-clipboard.ts +332 -0
package/src/lib/scene.ts +40 -8
package/src/lib/selection-routing.test.ts +298 -0
package/src/lib/selection-routing.ts +175 -0
package/src/lib/sfx/index.ts +1 -0
package/src/lib/sfx/movement-tick.test.ts +65 -0
package/src/lib/sfx/movement-tick.ts +18 -0
package/src/lib/sfx-bus.ts +69 -10
package/src/lib/sfx-player.test.ts +124 -0
package/src/lib/sfx-player.ts +148 -55
package/src/lib/site-boundary.ts +1 -0
package/src/lib/slab-plan-snap.test.ts +93 -0
package/src/lib/slab-plan-snap.ts +108 -0
package/src/lib/snapping-mode.test.ts +138 -0
package/src/lib/snapping-mode.ts +179 -0
package/src/lib/stair-duplication.ts +4 -4
package/src/lib/stair-levels.test.ts +146 -0
package/src/lib/stair-levels.ts +177 -0
package/src/lib/surface-plan-snap.test.ts +71 -0
package/src/lib/surface-plan-snap.ts +256 -0
package/src/lib/use-linear-display.ts +40 -0
package/src/lib/world-grid-snap.ts +231 -0
package/src/lib/zone-content.ts +130 -0
package/src/store/use-alignment-guides.ts +21 -0
package/src/store/use-direct-manipulation-feedback.ts +20 -0
package/src/store/use-editor.tsx +767 -114
package/src/store/use-facing-pose.ts +44 -0
package/src/store/use-fence-curve-draft.ts +21 -0
package/src/store/use-floorplan-draft-preview.ts +101 -0
package/src/store/use-floorplan-marquee.ts +50 -0
package/src/store/use-interaction-scope.test.ts +186 -0
package/src/store/use-interaction-scope.ts +132 -0
package/src/store/use-measurement-draft.test.ts +530 -0
package/src/store/use-measurement-draft.ts +543 -0
package/src/store/use-opening-guides.ts +41 -0
package/src/store/use-placement-preview.ts +39 -0
package/src/store/use-quick-measurement-hud.test.ts +53 -0
package/src/store/use-quick-measurement-hud.ts +77 -0
package/src/store/use-segment-draft-chain.ts +28 -0
package/src/store/use-stair-build-preview.ts +43 -0
package/src/store/use-wall-move-ghosts.ts +36 -0
package/src/store/use-wall-snap-indicator.ts +34 -0
package/src/components/editor/first-person/bvh-ecctrl.tsx +0 -860
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/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 -264
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 -178
package/src/components/tools/fence/fence-tool.tsx +0 -346
package/src/components/tools/fence/move-fence-endpoint-tool.tsx +0 -441
package/src/components/tools/fence/move-fence-tool.tsx +0 -302
package/src/components/tools/item/item-tool.tsx +0 -26
package/src/components/tools/roof/move-roof-tool.tsx +0 -364
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 -178
package/src/components/tools/wall/move-wall-endpoint-tool.tsx +0 -426
package/src/components/tools/wall/move-wall-tool.tsx +0 -358
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 -249
package/src/components/ui/panels/column-panel.tsx +0 -759
package/src/components/ui/panels/door-panel.tsx +0 -1299
package/src/components/ui/panels/fence-panel.tsx +0 -222
package/src/components/ui/panels/item-panel.tsx +0 -306
package/src/components/ui/panels/paint-panel.tsx +0 -163
package/src/components/ui/panels/presets/presets-popover.tsx +0 -511
package/src/components/ui/panels/roof-panel.tsx +0 -280
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 -161
package/src/components/ui/panels/stair-panel.tsx +0 -577
package/src/components/ui/panels/stair-segment-panel.tsx +0 -325
package/src/components/ui/panels/wall-panel.tsx +0 -273
package/src/components/ui/panels/window-panel.tsx +0 -968
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 { formatLinearMeasurement } from '../../lib/measurements'
+import { SITE_BOUNDARY_DRAG_LABEL } from '../../lib/site-boundary'
+import { useActiveHandleDrag } from '../../store/use-interaction-scope'
-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 = useActiveHandleDrag()
   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' }}
@@ -86,7 +110,7 @@ export function SiteEdgeLabels() {
               textShadow: `-1.5px -1.5px 0 ${shadowColor}, 1.5px -1.5px 0 ${shadowColor}, -1.5px 1.5px 0 ${shadowColor}, 1.5px 1.5px 0 ${shadowColor}, 0 0 4px ${shadowColor}, 0 0 4px ${shadowColor}`,
             }}
           >
-            {formatMeasurement(edge.dist, unit)}
+            {formatLinearMeasurement(edge.dist, unit)}
           </div>
         </Html>
       ))}

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

@@ -0,0 +1,474 @@
+'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 { holeEditScope } from '../../lib/interaction/scope'
+import useEditor from '../../store/use-editor'
+import useInteractionScope, { useEditingHole } from '../../store/use-interaction-scope'
+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])
+  // Sole selection only — hole outlines are click-to-edit chrome, and a
+  // multi-selection shows highlight only (the group transforms as one piece).
+  if (selectedIds.length !== 1) 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 = useEditingHole()
+  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) {
+        useInteractionScope
+          .getState()
+          .endIf((sc) => sc.kind === 'reshaping' && sc.reshape === 'hole')
+        useEditor.getState().setHoveredHole(null)
+        resetPointerCursor()
+        selectOwnedNode(metadata.stairId, 'stair')
+        return
+      }
+      if (metadata?.source === 'elevator' && metadata.elevatorId) {
+        useInteractionScope
+          .getState()
+          .endIf((sc) => sc.kind === 'reshaping' && sc.reshape === 'hole')
+        useEditor.getState().setHoveredHole(null)
+        resetPointerCursor()
+        selectOwnedNode(metadata.elevatorId, 'elevator')
+        return
+      }
+      useInteractionScope.getState().begin(holeEditScope({ 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