@pascal-app/editor 0.9.2 → 1.0.0-beta.2

package/src/components/editor/index.tsx

@@ -2,6 +2,7 @@
 
 import { Icon } from '@iconify/react'
 import {
+  acquireSceneReadOnlyLease,
   getCatalogMaterialById,
   getLibraryMaterialIdFromRef,
   getSceneMaterialIdFromRef,
@@ -31,6 +32,7 @@ import {
 } from '../../lib/scene'
 import { disposeSFXBus, initSFXBus } from '../../lib/sfx-bus'
 import useEditor from '../../store/use-editor'
+import useFloorplanMode from '../../store/use-floorplan-mode'
 import { CeilingSelectionAffordanceSystem } from '../systems/ceiling/ceiling-selection-affordance-system'
 import { CeilingSystem } from '../systems/ceiling/ceiling-system'
 import { RoofEditSystem } from '../systems/roof/roof-edit-system'
@@ -57,12 +59,14 @@ import { SitePanel, type SitePanelProps } from '../ui/sidebar/panels/site-panel'
 import type { SidebarTab } from '../ui/sidebar/tab-bar'
 import { useHostPanels } from '../ui/sidebar/use-plugin-panels'
 import { CustomCameraControls } from './custom-camera-controls'
+import { DeleteConfirmationDialog } from './delete-confirmation-dialog'
 import { EditorLayoutV2 } from './editor-layout-v2'
 import { ExportManager } from './export-manager'
 import { FenceTangentLines3D } from './fence-tangent-lines-3d'
 import { FirstPersonControls, FirstPersonOverlay } from './first-person-controls'
 import { FloatingActionMenu } from './floating-action-menu'
 import { FloatingBuildingActionMenu } from './floating-building-action-menu'
+import { FloorplanModeCoordinator } from './floorplan-mode-coordinator'
 import { FloorplanPanel } from './floorplan-panel'
 import { Grid } from './grid'
 import { GroupFloatingActionMenu } from './group-floating-action-menu'
@@ -152,6 +156,17 @@ export interface EditorProps {
    * only while a node is selected.
    */
   inspectorFooter?: ReactNode
+  /**
+   * Docked below the multi-selection panel (v2). Hosts mount whole-selection
+   * affordances here (e.g. "Save to my catalog"); shows only while more than
+   * one node is selected.
+   */
+  multiSelectionFooter?: ReactNode
+
+  /** Host-owned content mounted inside the editor's React Three Fiber scene. */
+  viewerSceneSlot?: ReactNode
+  /** Host-owned SVG content mounted in the transformed floor-plan scene. */
+  floorplanSceneSlot?: ReactNode
 
   projectId?: string | null
 
@@ -715,12 +730,14 @@ const ViewerSceneContent = memo(function ViewerSceneContent({
   isFirstPersonMode,
   isStudioMode,
   onThumbnailCapture,
+  viewerSceneSlot,
 }: {
   isVersionPreviewMode: boolean
   isLoading: boolean
   isFirstPersonMode: boolean
   isStudioMode: boolean
   onThumbnailCapture?: (blob: Blob, cameraData: SnapshotCameraData) => void
+  viewerSceneSlot?: ReactNode
 }) {
   // Studio mode is a clean render/snapshot surface — no selection or editing
   // affordances. It mirrors version-preview's chrome gating on the canvas.
@@ -759,6 +776,7 @@ const ViewerSceneContent = memo(function ViewerSceneContent({
       <ThumbnailGenerator onThumbnailCapture={onThumbnailCapture} />
       {!isFirstPersonMode && <SiteEdgeLabels />}
       <InteractiveSystem />
+      {!noEditing && viewerSceneSlot}
     </>
   )
 })
@@ -941,6 +959,8 @@ const ViewerCanvas = memo(function ViewerCanvas({
   sceneReadyKey,
   onSceneReadyChange,
   onThumbnailCapture,
+  viewerSceneSlot,
+  floorplanSceneSlot,
 }: {
   isVersionPreviewMode: boolean
   isLoading: boolean
@@ -951,6 +971,8 @@ const ViewerCanvas = memo(function ViewerCanvas({
   sceneReadyKey: number
   onSceneReadyChange: (ready: boolean) => void
   onThumbnailCapture?: (blob: Blob, cameraData: SnapshotCameraData) => void
+  viewerSceneSlot?: ReactNode
+  floorplanSceneSlot?: ReactNode
 }) {
   const viewMode = useEditor((s) => s.viewMode)
   const floorplanPaneRatio = useEditor((s) => s.floorplanPaneRatio)
@@ -1018,6 +1040,7 @@ const ViewerCanvas = memo(function ViewerCanvas({
           2d / 3d / split alike) can anchor to this container's bottom-left. */}
       <div className="relative flex h-full" ref={setViewerAreaNode}>
         <QuickMeasurementHud />
+        <DeleteConfirmationDialog />
         {/* 2D floorplan — always mounted once shown, hidden via CSS to preserve state */}
         <div
           className="relative h-full flex-shrink-0"
@@ -1027,7 +1050,7 @@ const ViewerCanvas = memo(function ViewerCanvas({
           }}
         >
           <div className="h-full w-full overflow-hidden">
-            <FloorplanPanel compassHost={viewerAreaEl} />
+            <FloorplanPanel compassHost={viewerAreaEl} floorplanSceneSlot={floorplanSceneSlot} />
           </div>
           {viewMode === 'split' && (
             <div
@@ -1075,6 +1098,7 @@ const ViewerCanvas = memo(function ViewerCanvas({
               isStudioMode={isStudioMode}
               isVersionPreviewMode={isVersionPreviewMode}
               onThumbnailCapture={onThumbnailCapture}
+              viewerSceneSlot={viewerSceneSlot}
             />
           </Viewer>
         </div>
@@ -1094,6 +1118,9 @@ export default function Editor({
   viewerToolbarRight,
   stageOverlay,
   inspectorFooter,
+  multiSelectionFooter,
+  viewerSceneSlot,
+  floorplanSceneSlot,
   projectId,
   onLoad,
   onSave,
@@ -1151,9 +1178,11 @@ export default function Editor({
 
   useEffect(() => {
     useViewer.getState().setProjectId(projectId ?? null)
+    useFloorplanMode.getState().setProjectId(projectId ?? null)
 
     return () => {
       useViewer.getState().setProjectId(null)
+      useFloorplanMode.getState().setProjectId(null)
     }
   }, [projectId])
 
@@ -1209,13 +1238,10 @@ export default function Editor({
 
   // Lock scene graph and reset to select mode when entering version preview
   useEffect(() => {
-    useScene.getState().setReadOnly(isVersionPreviewMode)
-    if (isVersionPreviewMode) {
-      useEditor.getState().setMode('select')
-    }
-    return () => {
-      useScene.getState().setReadOnly(false)
-    }
+    if (!isVersionPreviewMode) return
+    const releaseReadOnly = acquireSceneReadOnlyLease()
+    useEditor.getState().setMode('select')
+    return releaseReadOnly
   }, [isVersionPreviewMode])
 
   useEffect(() => {
@@ -1314,6 +1340,8 @@ export default function Editor({
       onThumbnailCapture={onThumbnailCapture}
       sceneReadyKey={sceneReadyKey}
       showLoader={showLoader}
+      viewerSceneSlot={viewerSceneSlot}
+      floorplanSceneSlot={floorplanSceneSlot}
     />
   )
 
@@ -1366,6 +1394,7 @@ export default function Editor({
 
     return (
       <>
+        <FloorplanModeCoordinator />
         {showLoader && (
           <div className="fixed inset-0 z-60">
             <SceneLoader className="bg-background" />
@@ -1397,7 +1426,10 @@ export default function Editor({
                   )}
                   {!(isVersionPreviewMode || isCaptureMode || isStudioMode) && (
                     <div className="pointer-events-auto">
-                      <PanelManager inspectorFooter={inspectorFooter} />
+                      <PanelManager
+                        inspectorFooter={inspectorFooter}
+                        multiSelectionFooter={multiSelectionFooter}
+                      />
                     </div>
                   )}
                   {!isCaptureMode && (
@@ -1438,6 +1470,7 @@ export default function Editor({
 
   return (
     <div className="dark flex h-full w-full gap-3 bg-neutral-100 p-3 text-foreground">
+      <FloorplanModeCoordinator />
       {showLoader && (
         <div className="fixed inset-0 z-60">
           <SceneLoader className="bg-background" />

package/src/components/editor/measurement-pill.tsx

@@ -4,7 +4,11 @@ import { type ForwardedRef, Fragment, forwardRef } from 'react'
 
 // Canonical in-world dimension formatter — metric metres or imperial
 // feet/inches. Shared by every measurement readout so they read the same.
-export function formatMeasurement(value: number, unit: 'metric' | 'imperial'): string {
+export function formatMeasurement(
+  value: number,
+  unit: 'metric' | 'imperial',
+  metricNotation: 'meters' | 'millimeters' = 'meters',
+): string {
   if (unit === 'imperial') {
     const feet = value * 3.280_84
     const wholeFeet = Math.floor(feet)
@@ -12,6 +16,7 @@ export function formatMeasurement(value: number, unit: 'metric' | 'imperial'): s
     if (inches === 12) return `${wholeFeet + 1}'0"`
     return `${wholeFeet}'${inches}"`
   }
+  if (metricNotation === 'millimeters') return `${Math.round(value * 1000)}mm`
   return `${Number.parseFloat(value.toFixed(2))}m`
 }
 

package/src/components/editor/node-arrow-handles.tsx

@@ -14,7 +14,6 @@ import {
   nodeRegistry,
   type RadialResizeHandle,
   sceneRegistry,
-  snapScalar,
   type TapActionHandle,
   useLiveNodeOverrides,
   useScene,
@@ -44,11 +43,10 @@ import { mergeGeometries } from 'three/examples/jsm/utils/BufferGeometryUtils.js
 import { MeshBasicNodeMaterial } from 'three/webgpu'
 import { EDITOR_LAYER } from '../../lib/constants'
 import { RESIZE_HANDLE_DRAG_LABEL, ROTATE_HANDLE_DRAG_LABEL } from '../../lib/contextual-help'
-import { resolveDirectManipulationNode } from '../../lib/direct-manipulation'
 import { createEditorApi } from '../../lib/editor-api'
 import { sfxEmitter } from '../../lib/sfx-bus'
 import useDirectManipulationFeedback from '../../store/use-direct-manipulation-feedback'
-import useEditor from '../../store/use-editor'
+import useEditor, { isGridSnapActive, isMagneticSnapActive } from '../../store/use-editor'
 import useInteractionScope, {
   useEndpointReshape,
   useIsCurveReshape,
@@ -64,6 +62,8 @@ import {
   HandleArrow,
   NO_RAYCAST,
 } from './handles/handle-arrow'
+import { replacePreviewOverrideIds } from './handles/preview-overrides'
+import { resolveResizeSnapValue } from './handles/resize-snap'
 import { type HandleDragControls, useHandleDrag } from './handles/use-handle-drag'
 
 // Pooled scratch for the handle rig's world-relative pose mapping.
@@ -213,8 +213,7 @@ export function NodeArrowHandles() {
   const selectedId = selectedIds.length === 1 ? selectedIds[0] : activeRotateNodeId
   const rawNode = useScene((state) => {
     if (!selectedId) return null
-    const selectedNode = state.nodes[selectedId as AnyNodeId]
-    return selectedNode ? resolveDirectManipulationNode(selectedNode, state.nodes) : null
+    return state.nodes[selectedId as AnyNodeId] ?? null
   })
 
   // Merge any live drag override so the arrows themselves (positions,
@@ -234,7 +233,7 @@ export function NodeArrowHandles() {
     if (!(node && def?.handles)) return null
     const all =
       typeof def.handles === 'function'
-        ? def.handles(node as never)
+        ? def.handles(node as never, descriptorSceneApi)
         : (def.handles as HandleDescriptor[])
     // The whole-node move-cross gizmo is gone: moving is now click-to-move on
     // the selected node body (see selection-manager). Drop both flavours — the
@@ -718,10 +717,6 @@ function LinearArrow({
       const initialValue = descriptor.currentValue(initialNode)
       const minBound = resolveBound(descriptor.min, Number.NEGATIVE_INFINITY, initialNode, sceneApi)
       const maxBound = resolveBound(descriptor.max, Number.POSITIVE_INFINITY, initialNode, sceneApi)
-      const gridSnapStep =
-        descriptor.kind === 'linear-resize' && descriptor.gridSnap
-          ? useEditor.getState().gridSnapStep
-          : null
       const factor =
         descriptor.kind === 'radial-resize'
           ? 1
@@ -735,6 +730,7 @@ function LinearArrow({
       // when the (snapped + clamped) value actually changes, so the cue
       // tracks real size steps instead of every sub-pixel pointer jitter.
       let lastTickValue = initialValue
+      let previewOverrideIds = new Set<AnyNodeId>()
 
       return {
         overrideId,
@@ -755,7 +751,14 @@ function LinearArrow({
         },
         onEnd: () => {
           useInteractionScope.getState().endIf((sc) => sc.kind === 'handle-drag')
+          if (descriptor.kind === 'linear-resize') {
+            descriptor.onDragEnd?.(initialNode as never, sceneApi)
+          }
           if (onDrag) useOpeningGuides.getState().clear()
+          for (const previewId of previewOverrideIds) {
+            useLiveNodeOverrides.getState().clear(previewId)
+            useScene.getState().markDirty(previewId)
+          }
         },
         move: ({ event: moveEvent, getPointerRay: getMovePointerRay }) => {
           const currentPointer =
@@ -766,16 +769,46 @@ function LinearArrow({
             ) / localToWorldScale
           const delta = currentPointer - initialPointer
           const rawNext = initialValue + delta * factor
-          const snappedNext =
-            !moveEvent.shiftKey && gridSnapStep && gridSnapStep > 0
-              ? snapScalar(rawNext, gridSnapStep)
-              : rawNext
+          const linearDescriptor = descriptor.kind === 'linear-resize' ? descriptor : null
+          const snappedNext = resolveResizeSnapValue({
+            rawValue: rawNext,
+            gridSnapEnabled: linearDescriptor?.gridSnap === true,
+            gridSnapActive: isGridSnapActive(),
+            gridSnapStep: useEditor.getState().gridSnapStep,
+            magneticSnapActive: isMagneticSnapActive(),
+            magneticSnap: linearDescriptor?.magneticSnap
+              ? (value) => linearDescriptor.magneticSnap?.(initialNode, value, sceneApi) ?? value
+              : undefined,
+          })
           const next = Math.min(maxBound, Math.max(minBound, snappedNext))
           if (next !== lastTickValue) {
             lastTickValue = next
             sfxEmitter.emit('sfx:resize')
           }
           const patch = descriptor.apply(initialNode as never, next, sceneApi) as Partial<AnyNode>
+          if (descriptor.kind === 'linear-resize' && descriptor.previewOverrides) {
+            const previewEntries = descriptor.previewOverrides(initialNode as never, next, sceneApi)
+            const nextPreviewOverrideIds = replacePreviewOverrideIds(
+              previewOverrideIds,
+              previewEntries,
+              (previewId) => {
+                useLiveNodeOverrides.getState().clear(previewId)
+                useScene.getState().markDirty(previewId)
+              },
+            )
+            useLiveNodeOverrides
+              .getState()
+              .setMany(
+                previewEntries.map(([id, previewPatch]) => [
+                  id,
+                  previewPatch as Record<string, unknown>,
+                ]),
+              )
+            for (const [previewId] of previewEntries) {
+              useScene.getState().markDirty(previewId)
+            }
+            previewOverrideIds = nextPreviewOverrideIds
+          }
           // Let the kind publish live guides for the edge being resized.
           onDrag?.({ ...(initialNode as object), ...patch } as AnyNode, sceneApi)
           return patch
@@ -1550,7 +1583,10 @@ function CornerPickerShape({
         position={position}
         renderOrder={1001}
       />
-      <group position={[position[0], CORNER_FLOOR_OFFSET, position[2]]} ref={billboardRef}>
+      <group
+        position={[position[0], position[1] + CORNER_FLOOR_OFFSET, position[2]]}
+        ref={billboardRef}
+      >
         <HandleArrow
           cursor={cursor}
           hover={hover}

package/src/components/editor/quick-measurement-card.tsx

@@ -5,19 +5,25 @@ import { Crosshair, MapPin } from 'lucide-react'
 import { memo } from 'react'
 import { formatAreaLabel, formatLinearMeasurement, formatVolumeLabel } from '../../lib/measurements'
 
-function formatMetric(metric: QuickMeasurementMetric, unit: 'metric' | 'imperial'): string {
+function formatMetric(
+  metric: QuickMeasurementMetric,
+  unit: 'metric' | 'imperial',
+  metricNotation: 'meters' | 'millimeters',
+): string {
   if (metric.quantity === 'area') return formatAreaLabel(metric.value, unit, 2)
   if (metric.quantity === 'volume') return formatVolumeLabel(metric.value, unit, 2)
-  return formatLinearMeasurement(metric.value, unit)
+  return formatLinearMeasurement(metric.value, unit, metricNotation)
 }
 
 export const QuickMeasurementCard = memo(function QuickMeasurementCard({
   report,
   unit,
+  metricNotation,
   lensState,
 }: {
   report: QuickMeasurementReport
   unit: 'metric' | 'imperial'
+  metricNotation: 'meters' | 'millimeters'
   lensState: 'live' | 'pinned'
 }) {
   const pinned = lensState === 'pinned'
@@ -53,7 +59,7 @@ export const QuickMeasurementCard = memo(function QuickMeasurementCard({
               <span className="truncate">{metric.label}</span>
             </div>
             <div className="mt-0.5 truncate font-mono font-medium text-xs tabular-nums">
-              {formatMetric(metric, unit)}
+              {formatMetric(metric, unit, metricNotation)}
             </div>
           </div>
         ))}

package/src/components/editor/quick-measurement-hud.tsx

@@ -12,6 +12,7 @@ export function QuickMeasurementHud() {
   const viewMode = useEditor((state) => state.viewMode)
   const entry = useQuickMeasurementHud((state) => selectQuickMeasurementHudEntry(state, viewMode))
   const unit = useViewer((state) => state.unit)
+  const metricNotation = useViewer((state) => state.metricNotation)
 
   if (!entry) return null
 
@@ -21,7 +22,12 @@ export function QuickMeasurementHud() {
       data-quick-measure-hud
     >
       <div className="w-full max-w-[34rem]">
-        <QuickMeasurementCard lensState={entry.lensState} report={entry.report} unit={unit} />
+        <QuickMeasurementCard
+          lensState={entry.lensState}
+          metricNotation={metricNotation}
+          report={entry.report}
+          unit={unit}
+        />
       </div>
     </div>
   )

package/src/components/editor/selection-manager.tsx

@@ -60,6 +60,7 @@ import {
 } from '../../lib/paint-scope'
 import { getHoveredRoofSegmentOutlineProxy } from '../../lib/roof-hover-outline-proxy'
 import {
+  emitCanvasNodeSelection,
   resolveCanvasSelectionNode,
   resolveNodeSelectionTarget,
   resolveSelectedIdsForNodeClick,
@@ -1365,7 +1366,7 @@ export const SelectionManager = () => {
   useEffect(() => {
     if (mode !== 'select') return
     let owns = false
-    let prevKey = ''
+    let prevKey = '\0'
     const applyCursor = () => {
       const { selection, hoveredId } = useViewer.getState()
       const selectedIds = selection.selectedIds
@@ -1648,6 +1649,7 @@ export const SelectionManager = () => {
           modifierKeysRef.current,
           selectedIdsBeforeRouting,
         )
+        emitCanvasNodeSelection(nodeToSelect)
 
         let nextMaterialTargetHandled = false
 

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

@@ -7,6 +7,7 @@ import { Html } from '@react-three/drei'
 import { createPortal, useFrame, useThree } from '@react-three/fiber'
 import { useCallback, useMemo, useRef, useState } from 'react'
 import { type Camera, type Object3D, Vector3 } from 'three'
+import { groundHeightAt } from '../../lib/ground-surface'
 import { formatLinearMeasurement } from '../../lib/measurements'
 import { SITE_BOUNDARY_DRAG_LABEL } from '../../lib/site-boundary'
 import { useActiveHandleDrag } from '../../store/use-interaction-scope'
@@ -16,6 +17,16 @@ type ViewportSize = {
   height: number
 }
 
+/**
+ * How far the label floats above the ground under it.
+ *
+ * Was a bare `0.5` in the position literal, which on flat ground is the same thing.
+ * Named now because it is no longer the label's *height* but its clearance: on a
+ * sculpted lot the number underneath moves, and half a metre is what keeps the text
+ * clear of a rim the boundary line is draped over.
+ */
+const LABEL_LIFT = 0.5
+
 const htmlPosition = new Vector3()
 
 function calculateHtmlPosition(el: Object3D, camera: Camera, size: ViewportSize) {
@@ -78,14 +89,25 @@ export function SiteEdgeLabels() {
     if (obj) setSiteObj(obj)
   })
 
+  // No live-terrain subscription here, deliberately: activating a site-boundary
+  // handle exits sculpt mode before the handle-drag scope begins, so the ground
+  // cannot move while these labels are on screen. The drag itself rewrites
+  // `polygon` every frame, which re-runs this memo against the current field.
   const edges = useMemo(() => {
     if (polygon.length < 2) return []
     return polygon.map(([x1, z1], i) => {
       const [x2, z2] = polygon[(i + 1) % polygon.length]!
       const midX = (x1! + x2) / 2
       const midZ = (z1! + z2) / 2
+      // Length stays the *plan* length. A property line is a horizontal measurement
+      // — a deed says 30 m whether the lot is flat or a hillside — and reporting the
+      // slope distance would make the same lot appear to grow as it is sculpted.
+      // Only the label's Y follows the ground.
       const dist = Math.sqrt((x2 - x1!) ** 2 + (z2 - z1!) ** 2)
-      return { midX, midZ, dist }
+      // `?? 0` covers both no-terrain cases, and 0 *is* the datum, so this reduces
+      // to the flat constant it replaced whenever the lot is unsculpted.
+      const groundY = groundHeightAt(midX, midZ, 0) ?? 0
+      return { midX, midY: groundY + LABEL_LIFT, midZ, dist }
     })
   }, [polygon])
 
@@ -99,7 +121,7 @@ export function SiteEdgeLabels() {
           calculatePosition={calculateLabelPosition}
           key={`${cameraMode}-${camera.uuid}-edge-${i}`}
           occlude
-          position={[edge.midX, 0.5, edge.midZ]}
+          position={[edge.midX, edge.midY, edge.midZ]}
           style={{ pointerEvents: 'none', userSelect: 'none' }}
           zIndexRange={[10, 0]}
         >

package/src/components/editor/snapshot-capture-overlay.tsx

@@ -109,6 +109,9 @@ export function SnapshotCaptureOverlay({ projectId }: { projectId: string }) {
   const isPreset = captureMode.mode === 'preset'
   const requestedCrop = captureMode.mode === 'standard' ? captureMode.crop : undefined
   const requestedAspect = captureMode.mode === 'standard' ? captureMode.standardAspect : undefined
+  // A host-preselected crop means the host needs that exact output shape
+  // (e.g. the publish-cover capture) — hide the crop/aspect switcher.
+  const isCropLocked = isPreset || requestedCrop !== undefined
 
   const [mode, setMode] = useState<CropMode>('standard')
   const [standardAspect, setStandardAspect] = useState<StandardAspect>('16:9')
@@ -538,7 +541,7 @@ export function SnapshotCaptureOverlay({ projectId }: { projectId: string }) {
 
       {/* Bottom-center: crop switcher, caption + shutter */}
       <div className="pointer-events-none absolute right-0 bottom-5 left-0 flex flex-col items-center gap-2.5">
-        {!isPreset && (
+        {!isCropLocked && (
           <div className="pointer-events-auto relative flex items-center gap-1 rounded-full border border-white/10 bg-neutral-950/85 px-1.5 py-1.5 shadow-xl backdrop-blur-md">
             {/* Clicking Standard while it's active opens the aspect picker */}
             <ModeButton