@pascal-app/editor 0.9.1 → 0.9.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pascal-app/editor",
-  "version": "0.9.1",
+  "version": "0.9.2",
   "description": "Pascal building editor component",
   "type": "module",
   "exports": {
@@ -8,17 +8,17 @@
     "./catalog": "./src/components/ui/item-catalog/catalog-items.tsx"
   },
   "scripts": {
-    "check-types": "tsc --noEmit"
+    "check-types": "tsgo --noEmit"
   },
   "peerDependencies": {
-    "@pascal-app/core": "^0.9.1",
-    "@pascal-app/viewer": "^0.9.1",
+    "@pascal-app/core": "^0.9.2",
+    "@pascal-app/viewer": "^0.9.2",
     "@react-three/drei": "^10",
     "@react-three/fiber": "^9",
     "next": ">=15",
     "react": "^18 || ^19",
     "react-dom": "^18 || ^19",
-    "three": "^0.184"
+    "three": "^0.185"
   },
   "dependencies": {
     "@dnd-kit/core": "^6.3.1",
@@ -26,6 +26,7 @@
     "@dnd-kit/utilities": "^3.2.2",
     "@iconify/react": "^6.0.2",
     "@number-flow/react": "^0.6.0",
+    "@pascal-app/lingo": "^0.2.0",
     "@radix-ui/react-alert-dialog": "^1.1.15",
     "@radix-ui/react-context-menu": "^2.2.16",
     "@radix-ui/react-dialog": "^1.1.15",
@@ -43,18 +44,20 @@
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
     "howler": "^2.2.4",
+    "jspdf": "^4.2.1",
     "lucide-react": "^1.7.0",
     "mitt": "^3.0.1",
     "motion": "^12.34.3",
     "nanoid": "^5.1.6",
+    "svg2pdf.js": "^2.7.0",
     "tailwind-merge": "^3.5.0",
+    "three-mesh-bvh": "~0.9.8",
     "zod": "^4.3.6",
-    "zustand": "^5.0.11",
-    "three-mesh-bvh": "~0.9.8"
+    "zustand": "^5.0.11"
   },
   "devDependencies": {
-    "@pascal-app/core": "^0.9.1",
-    "@pascal-app/viewer": "^0.9.1",
+    "@pascal-app/core": "^0.9.2",
+    "@pascal-app/viewer": "^0.9.2",
     "@pascal/typescript-config": "*",
     "@types/bun": "^1.3.0",
     "@types/howler": "^2.2.12",

package/src/components/editor/alignment-3d-guide-layer.tsx

@@ -1,7 +1,6 @@
 'use client'
 
 import { type AlignmentGuide, sceneRegistry } from '@pascal-app/core'
-import { useAlignmentGuides } from '@pascal-app/editor'
 import { useViewer } from '@pascal-app/viewer'
 import { Html } from '@react-three/drei'
 import { useFrame } from '@react-three/fiber'
@@ -9,6 +8,7 @@ import { memo, useMemo, useRef } from 'react'
 import { BoxGeometry, CircleGeometry, type Group, Vector3 } from 'three'
 import { MeshBasicNodeMaterial } from 'three/webgpu'
 import { EDITOR_LAYER } from '../../lib/constants'
+import useAlignmentGuides from '../../store/use-alignment-guides'
 import { formatMeasurement } from './measurement-pill'
 
 /**
@@ -49,6 +49,14 @@ const guideMaterial = new MeshBasicNodeMaterial({
   toneMapped: false,
   transparent: true,
 })
+const DOT_COLOR = 0x22_c5_5e // green-500 — matches the wall-snap marker
+const dotMaterial = new MeshBasicNodeMaterial({
+  color: DOT_COLOR,
+  depthTest: false,
+  depthWrite: false,
+  toneMapped: false,
+  transparent: true,
+})
 const DASH_GEOMETRY = new BoxGeometry(1, 1, 1)
 const DOT_GEOMETRY = new CircleGeometry(1, 24)
 
@@ -150,7 +158,7 @@ function Dot({ position }: { position: Vec3 }) {
     <mesh
       geometry={DOT_GEOMETRY}
       layers={EDITOR_LAYER}
-      material={guideMaterial}
+      material={dotMaterial}
       position={position}
       renderOrder={1001}
       rotation={[-Math.PI / 2, 0, 0]}

package/src/components/editor/bake-exporter.tsx

@@ -0,0 +1,47 @@
+'use client'
+
+import { useScene } from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import { useThree } from '@react-three/fiber'
+import { useEffect, useRef } from 'react'
+import { exportSceneToGlb, nextFrames } from '../../lib/glb-export'
+
+export function BakeExporter({
+  active,
+  onComplete,
+  onError,
+}: {
+  active: boolean
+  onComplete: (buffer: ArrayBuffer) => void
+  onError: (message: string) => void
+}) {
+  const scene = useThree((s) => s.scene)
+  const doneRef = useRef(false)
+  useEffect(() => {
+    if (!(active && !doneRef.current)) return
+    doneRef.current = true
+    const run = async () => {
+      try {
+        // Signal export so instanced kinds (trees/flowers/grass) swap their
+        // invisible proxy for real, exportable geometry, then wait for the
+        // commit before cloning the scene graph.
+        useViewer.getState().setExporting(true)
+        await nextFrames()
+        const sceneGroup = scene.getObjectByName('scene-renderer')
+        if (!sceneGroup) throw new Error('scene-renderer group not found')
+        const buffer = await exportSceneToGlb(sceneGroup, useScene.getState().nodes)
+        onComplete(buffer)
+      } catch (err) {
+        // The bake worker relays page console output into the job's error
+        // trail; the message alone rarely localises an exporter crash, so
+        // surface the full stack here.
+        console.error('[bake-exporter]', err instanceof Error ? (err.stack ?? err.message) : err)
+        onError(err instanceof Error ? err.message : String(err))
+      } finally {
+        useViewer.getState().setExporting(false)
+      }
+    }
+    void run()
+  }, [active, scene, onComplete, onError])
+  return null
+}

package/src/components/editor/custom-camera-controls.tsx

@@ -22,6 +22,11 @@ import {
 } from 'three'
 import { EDITOR_LAYER } from '../../lib/constants'
 import useEditor from '../../store/use-editor'
+import {
+  useActiveHandleDrag,
+  useEndpointReshape,
+  useMovingNode,
+} from '../../store/use-interaction-scope'
 
 const currentTarget = new Vector3()
 const tempBox = new Box3()
@@ -364,10 +369,15 @@ export const CustomCameraControls = () => {
   const lastPublishedNavigationSync = useRef<NavigationCameraPoseSnapshot | null>(null)
   const pendingFloorplanNavigationPose = useRef<PendingNavigationCameraPoseSnapshot | null>(null)
   const lastApplied2dNavigationRevision = useRef(0)
+  const savedSmoothTimeRef = useRef<number | null>(null)
   const maxPolarAngle =
     !isPreviewMode && allowUndergroundCamera ? DEBUG_MAX_POLAR_ANGLE : DEFAULT_MAX_POLAR_ANGLE
   const clearPendingFloorplanNavigationPose = useCallback(() => {
     pendingFloorplanNavigationPose.current = null
+    if (savedSmoothTimeRef.current !== null && controls.current) {
+      controls.current.smoothTime = savedSmoothTimeRef.current
+      savedSmoothTimeRef.current = null
+    }
   }, [])
 
   const camera = useThree((state) => state.camera)
@@ -381,6 +391,20 @@ export const CustomCameraControls = () => {
     raycaster.layers.enable(ZONE_LAYER)
   }, [camera, raycaster])
 
+  useEffect(() => {
+    // Dev-only: deterministic camera poses for screenshot/automation tooling.
+    // A getter, not a snapshot — drei recreates the impl when the default
+    // camera changes, so a captured instance goes stale.
+    if (process.env.NODE_ENV !== 'development') return
+    const w = window as typeof window & {
+      __pascalCameraControls?: (() => CameraControlsImpl | null) | null
+    }
+    w.__pascalCameraControls = () => controls.current
+    return () => {
+      w.__pascalCameraControls = null
+    }
+  }, [])
+
   useEffect(() => {
     if (isPreviewMode || isFirstPersonMode || isRestoringFirstPersonPose()) return
     let targetY = 0
@@ -452,12 +476,7 @@ export const CustomCameraControls = () => {
 
     return useEditor.subscribe((state) => {
       const pose = state.navigationSyncPose
-      if (
-        !pose ||
-        pose.source !== '2d' ||
-        pose.revision === lastApplied2dNavigationRevision.current
-      )
-        return
+      if (pose?.source !== '2d' || pose.revision === lastApplied2dNavigationRevision.current) return
 
       const control = controls.current
       if (!control) return
@@ -478,6 +497,13 @@ export const CustomCameraControls = () => {
           Math.abs(viewWidthUpdate.viewWidth - pose.viewWidth) >=
           NAVIGATION_SYNC_VIEW_WIDTH_EPSILON,
       }
+      // Match 3D settle time to 2D exponential decay (τ=90ms). SmoothDamp's
+      // effective time constant is smoothTime/2, so smoothTime=0.18 gives
+      // τ≈90ms and visual convergence in ~350-400ms, matching the 2D panel.
+      if (savedSmoothTimeRef.current === null) {
+        savedSmoothTimeRef.current = control.smoothTime
+      }
+      control.smoothTime = 0.18
       control.moveTo(pose.target[0], pose.target[1], pose.target[2], true)
       control.rotateTo(targetAzimuth, control.polarAngle, true)
       applyCameraViewWidth(control, viewWidthUpdate)
@@ -499,7 +525,7 @@ export const CustomCameraControls = () => {
         isCameraAtNavigationPose(pendingFloorplanPose, syncTarget, syncSpherical.theta, viewWidth)
       ) {
         lastPublishedNavigationSync.current = pendingFloorplanPose
-        pendingFloorplanNavigationPose.current = null
+        clearPendingFloorplanNavigationPose()
         if (pendingFloorplanPose.publishOnComplete) {
           useEditor.getState().publishNavigationSyncPose({
             source: '3d',
@@ -540,7 +566,7 @@ export const CustomCameraControls = () => {
       azimuth: syncSpherical.theta,
       viewWidth,
     })
-  }, [camera, isFirstPersonMode, viewportSize])
+  }, [camera, clearPendingFloorplanNavigationPose, isFirstPersonMode, viewportSize])
 
   useEffect(() => {
     if (isFirstPersonMode || (!isFloorplanOpen && currentLevelId === null)) return
@@ -573,7 +599,7 @@ export const CustomCameraControls = () => {
     )
     const step = (speed * Math.min(delta, 0.05)) / Math.hypot(horizontal, vertical)
 
-    pendingFloorplanNavigationPose.current = null
+    clearPendingFloorplanNavigationPose()
     if (horizontal !== 0) control.truck(horizontal * step, 0, true)
     if (vertical !== 0) control.forward(vertical * step, true)
   })
@@ -611,18 +637,12 @@ export const CustomCameraControls = () => {
   const tool = useEditor((s) => s.tool)
   const mode = useEditor((s) => s.mode)
   const selectionTool = useEditor((s) => s.floorplanSelectionTool)
-  const movingNode = useEditor((s) => s.movingNode)
-  const movingWallEndpoint = useEditor((s) => s.movingWallEndpoint)
-  const movingFenceEndpoint = useEditor((s) => s.movingFenceEndpoint)
-  const activeHandleDrag = useEditor((s) => s.activeHandleDrag)
+  const movingNode = useMovingNode()
+  const endpointReshape = useEndpointReshape()
+  const activeHandleDrag = useActiveHandleDrag()
   const isBoxSelectActive = mode === 'select' && selectionTool === 'marquee'
   const isInteracting = Boolean(
-    tool ||
-      movingNode ||
-      movingWallEndpoint ||
-      movingFenceEndpoint ||
-      activeHandleDrag ||
-      isBoxSelectActive,
+    tool || movingNode || endpointReshape || activeHandleDrag || isBoxSelectActive,
   )
   const touches = useMemo(() => {
     const twoFingerAction =
@@ -731,7 +751,7 @@ export const CustomCameraControls = () => {
           !isEditableKeyboardTarget(event.target)
         ) {
           setKeyboardPanKey(keyboardPanKeys.current, event.code, true)
-          pendingFloorplanNavigationPose.current = null
+          clearPendingFloorplanNavigationPose()
           event.preventDefault()
           event.stopPropagation()
         }
@@ -794,7 +814,7 @@ export const CustomCameraControls = () => {
 
     const onPointerDown = (event: PointerEvent) => {
       if (!(event.target instanceof Node) || !gl.domElement.contains(event.target)) return
-      pendingFloorplanNavigationPose.current = null
+      clearPendingFloorplanNavigationPose()
       if (event.button !== 1 && !(event.button === 0 && keyState.space)) return
 
       panPointerId = event.pointerId
@@ -803,7 +823,7 @@ export const CustomCameraControls = () => {
     }
 
     const onWheel = () => {
-      pendingFloorplanNavigationPose.current = null
+      clearPendingFloorplanNavigationPose()
     }
 
     const onPointerUp = (event: PointerEvent) => {
@@ -845,7 +865,25 @@ export const CustomCameraControls = () => {
       clearKeyboardPanKeys()
       clearNavigationCursor()
     }
-  }, [cameraMode, gl, isPreviewMode, isFirstPersonMode])
+  }, [cameraMode, gl, isPreviewMode, isFirstPersonMode, clearPendingFloorplanNavigationPose])
+
+  // Cancel any in-progress 2D-origin navigation pose when the user starts
+  // dragging (right-click orbit, middle-click pan, touch). `controlstart`
+  // fires only for user pointer interactions — not for programmatic
+  // moveTo/rotateTo which emit `transitionstart` instead.
+  useEffect(() => {
+    if (isFirstPersonMode) return
+    const control = controls.current
+    if (!control) return
+
+    const onControlStart = () => {
+      clearPendingFloorplanNavigationPose()
+    }
+    control.addEventListener('controlstart', onControlStart)
+    return () => {
+      control.removeEventListener('controlstart', onControlStart)
+    }
+  }, [isFirstPersonMode, clearPendingFloorplanNavigationPose])
 
   // Preview mode: auto-navigate camera to selected node (viewer behavior)
   const previewTargetNodeId = isPreviewMode
@@ -1154,12 +1192,12 @@ export const CustomCameraControls = () => {
   }, [])
 
   // Preset capture mode frames a single subtree (often a 0.3–2m preset),
-  // so the default 6m minDistance prevents the user from getting close
+  // so the default 2m minDistance prevents the user from getting close
   // enough to compose a good thumbnail. Relax the clamp to 0.5m while
   // capturing presets; reset on exit so general editing keeps the looser
   // navigation guardrails.
   const isPresetCapture = captureMode.mode === 'preset'
-  const minDistance = isPresetCapture ? 0.5 : 6
+  const minDistance = isPresetCapture ? 0.5 : 2
 
   if (isFirstPersonMode) {
     return null

package/src/components/editor/editor-layout-mobile.tsx

@@ -159,6 +159,11 @@ export function EditorLayoutMobile({
       const expandedThreshold = Math.max(SHEET_HANDLE_PX, defaultPx * 0.5)
       if (current > expandedThreshold) {
         sheetRef.current?.snapTo(SHEET_HANDLE_PX)
+        // Closing the sheet disarms any build tool back to select
+        const { mode, setMode } = useEditor.getState()
+        if (mode === 'build') {
+          setMode('select')
+        }
       } else {
         sheetRef.current?.snapTo(defaultPx)
       }

package/src/components/editor/editor-layout-v2.tsx

@@ -52,6 +52,15 @@ function LeftColumn({
     }
   }, [activePanel])
 
+  // Closing (collapsing) the sidebar disarms any build tool back to select
+  useEffect(() => {
+    if (!isCollapsed) return
+    const { mode, setMode } = useEditor.getState()
+    if (mode === 'build') {
+      setMode('select')
+    }
+  }, [isCollapsed])
+
   const handleResizerDown = useCallback(
     (e: React.PointerEvent) => {
       e.preventDefault()
@@ -150,11 +159,13 @@ function RightColumn({
   toolbarRight,
   children,
   overlays,
+  stageOverlay,
 }: {
   toolbarLeft?: ReactNode
   toolbarRight?: ReactNode
   children: ReactNode
   overlays?: ReactNode
+  stageOverlay?: ReactNode
 }) {
   return (
     <div
@@ -174,6 +185,10 @@ function RightColumn({
       )}
       {/* Canvas area */}
       <div className="relative flex-1 overflow-hidden">{children}</div>
+      {/* Stage overlay — replaces the canvas visually (e.g. studio gallery)
+          while keeping it mounted. Sits below the viewer toolbar (z-20) so
+          the stage switch stays reachable. */}
+      {stageOverlay && <div className="absolute inset-0 z-10">{stageOverlay}</div>}
       {/* Overlays scoped to the viewer column. `data-viewer-bounds` marks the
           draggable region the floating inspector clamps itself to. */}
       {overlays && (
@@ -200,6 +215,7 @@ export interface EditorLayoutV2Props {
   viewerToolbarRight?: ReactNode
   viewerContent: ReactNode
   overlays?: ReactNode
+  stageOverlay?: ReactNode
 }
 
 export function EditorLayoutV2({
@@ -211,6 +227,7 @@ export function EditorLayoutV2({
   viewerToolbarRight,
   viewerContent,
   overlays,
+  stageOverlay,
 }: EditorLayoutV2Props) {
   const isCaptureMode = useEditor((s) => s.isCaptureMode)
   const isMobile = useIsMobile()
@@ -246,6 +263,7 @@ export function EditorLayoutV2({
         )}
         <RightColumn
           overlays={overlays}
+          stageOverlay={stageOverlay}
           toolbarLeft={isCaptureMode ? undefined : viewerToolbarLeft}
           toolbarRight={isCaptureMode ? undefined : viewerToolbarRight}
         >

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

@@ -1,12 +1,35 @@
 'use client'
 
+import { emitter, useScene } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import { useThree } from '@react-three/fiber'
 import { useEffect } from 'react'
-import type { Mesh, Object3D } from 'three'
-import { GLTFExporter } from 'three/examples/jsm/exporters/GLTFExporter.js'
+import * as THREE from 'three'
 import { OBJExporter } from 'three/examples/jsm/exporters/OBJExporter.js'
 import { STLExporter } from 'three/examples/jsm/exporters/STLExporter.js'
+import { exportSceneToGlb, nextFrames, prepareSceneForExport } from '../../lib/glb-export'
+
+// prepareSceneForExport neutralises container meshes (door/window hitbox roots,
+// material-less renderables) with an attribute-less geometry — GLTFExporter
+// emits those as plain transform nodes, but STL/OBJExporter read
+// `position.count` unconditionally and crash. Swap in a geometry with an empty
+// (count-0) position so they iterate zero vertices instead. Shared: the export
+// scene is a throwaway clone, only its geometry *ref* is swapped.
+const EMPTY_POSITION_GEOMETRY = new THREE.BufferGeometry()
+EMPTY_POSITION_GEOMETRY.setAttribute(
+  'position',
+  new THREE.Float32BufferAttribute(new Float32Array(0), 3),
+)
+
+function ensurePositionAttributes(root: THREE.Object3D) {
+  root.traverse((object) => {
+    const renderable = object as THREE.Mesh & { isLine?: boolean; isPoints?: boolean }
+    if (!(renderable.isMesh || renderable.isLine || renderable.isPoints)) return
+    if (!renderable.geometry?.getAttribute('position')) {
+      renderable.geometry = EMPTY_POSITION_GEOMETRY
+    }
+  })
+}
 
 export function ExportManager() {
   const scene = useThree((state) => state.scene)
@@ -22,42 +45,54 @@ export function ExportManager() {
       }
 
       const date = new Date().toISOString().split('T')[0]
-      const exportScene = prepareSceneForExport(sceneGroup)
-
-      if (format === 'stl') {
-        const exporter = new STLExporter()
-        const result = exporter.parse(exportScene, { binary: true })
-        const blob = new Blob([result], { type: 'model/stl' })
-        downloadBlob(blob, `model_${date}.stl`)
-        return
-      }
 
-      if (format === 'obj') {
-        const exporter = new OBJExporter()
-        const result = exporter.parse(exportScene)
-        const blob = new Blob([result], { type: 'model/obj' })
-        downloadBlob(blob, `model_${date}.obj`)
-        return
+      // Signal export so instanced kinds (trees/flowers/grass) swap their
+      // invisible proxy for real, exportable geometry, then wait for the
+      // commit before cloning the scene graph (same dance as BakeExporter —
+      // without it every plant exports as its raycast collider, a white box).
+      useViewer.getState().setExporting(true)
+      try {
+        await nextFrames()
+
+        if (format === 'glb') {
+          const buffer = await exportSceneToGlb(sceneGroup, useScene.getState().nodes)
+          const blob = new Blob([buffer], { type: 'model/gltf-binary' })
+          downloadBlob(blob, `model_${date}.glb`)
+          return
+        }
+
+        // Hide editor affordances that live on the scene layer (selection handles,
+        // ceiling/site brackets) and let wall-cutout reveal all walls — the same
+        // synchronous capture path thumbnails use. We clone the scene inside the
+        // window, so the export snapshots the clean building, then restore.
+        emitter.emit('thumbnail:before-capture', undefined)
+        let prepared: ReturnType<typeof prepareSceneForExport>
+        try {
+          prepared = prepareSceneForExport(sceneGroup, useScene.getState().nodes)
+        } finally {
+          emitter.emit('thumbnail:after-capture', undefined)
+        }
+        const { scene: exportScene } = prepared
+        ensurePositionAttributes(exportScene)
+
+        if (format === 'stl') {
+          const exporter = new STLExporter()
+          const result = exporter.parse(exportScene, { binary: true })
+          const blob = new Blob([result], { type: 'model/stl' })
+          downloadBlob(blob, `model_${date}.stl`)
+          return
+        }
+
+        if (format === 'obj') {
+          const exporter = new OBJExporter()
+          const result = exporter.parse(exportScene)
+          const blob = new Blob([result], { type: 'model/obj' })
+          downloadBlob(blob, `model_${date}.obj`)
+          return
+        }
+      } finally {
+        useViewer.getState().setExporting(false)
       }
-
-      // Default: GLB export (existing behavior)
-      const exporter = new GLTFExporter()
-
-      return new Promise<void>((resolve, reject) => {
-        exporter.parse(
-          exportScene,
-          (gltf) => {
-            const blob = new Blob([gltf as ArrayBuffer], { type: 'model/gltf-binary' })
-            downloadBlob(blob, `model_${date}.glb`)
-            resolve()
-          },
-          (error) => {
-            console.error('Export error:', error)
-            reject(error)
-          },
-          { binary: true },
-        )
-      })
     }
 
     setExportScene(exportFn)
@@ -70,33 +105,6 @@ export function ExportManager() {
   return null
 }
 
-function prepareSceneForExport(source: Object3D) {
-  const clone = source.clone(true)
-  const meshesToRemove: Mesh[] = []
-
-  clone.traverse((object) => {
-    if (isMeshWithInvalidGeometry(object)) meshesToRemove.push(object)
-  })
-
-  for (const mesh of meshesToRemove) {
-    mesh.removeFromParent()
-  }
-
-  return clone
-}
-
-function isMeshWithInvalidGeometry(object: Object3D): object is Mesh {
-  if (!isMesh(object)) return false
-
-  // Three exporters can crash when a Mesh has no readable position attribute.
-  const position = object.geometry?.getAttribute('position')
-  return !position || position.count === 0
-}
-
-function isMesh(object: Object3D): object is Mesh {
-  return (object as Mesh).isMesh === true
-}
-
 function downloadBlob(blob: Blob, filename: string) {
   const url = URL.createObjectURL(blob)
   const link = document.createElement('a')

package/src/components/editor/fence-tangent-lines-3d.tsx

@@ -0,0 +1,87 @@
+'use client'
+
+import {
+  type AnyNodeId,
+  type FenceNode,
+  getFenceControlHandle,
+  isSplineFence,
+  sceneRegistry,
+  useLiveNodeOverrides,
+  useScene,
+} from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import { createPortal, useFrame } from '@react-three/fiber'
+import { useMemo, useState } from 'react'
+import { BufferGeometry, type Object3D, Vector3 } from 'three'
+import { EDITOR_LAYER } from '../../lib/constants'
+
+/**
+ * Straight connecting line through each spline-fence control point joining its
+ * two tangent handle ends (the classic pen-tool look). The handle *dots* are
+ * registry tap-handles (see `fence/definition.ts`); this overlay only draws
+ * the line between them, in both views' 3D scene.
+ *
+ * Must match the handle placement's arm scale so the line ends land exactly on
+ * the dots. Portals into the fence's own Object3D so it inherits the same world
+ * transform as the geometry (path coords are node-local plan meters), and reads
+ * the live override so the line tracks an in-flight tangent / point drag.
+ */
+
+// Keep in sync with TANGENT_HANDLE_ARM_SCALE in fence/definition.ts.
+const TANGENT_HANDLE_ARM_SCALE = 3
+const LINE_LIFT_Y = 0.02
+
+export function FenceTangentLines3D() {
+  const selectedIds = useViewer((s) => s.selection.selectedIds)
+  const selectedId = selectedIds.length === 1 ? selectedIds[0] : null
+
+  const rawNode = useScene((s) => (selectedId ? s.nodes[selectedId as AnyNodeId] : null))
+  const liveOverride = useLiveNodeOverrides((s) =>
+    selectedId ? s.overrides.get(selectedId as AnyNodeId) : undefined,
+  )
+  const fence = useMemo<FenceNode | null>(() => {
+    if (rawNode?.type !== 'fence') return null
+    const merged = liveOverride ? ({ ...rawNode, ...liveOverride } as FenceNode) : rawNode
+    return isSplineFence(merged) ? merged : null
+  }, [rawNode, liveOverride])
+
+  const [object, setObject] = useState<{ id: AnyNodeId; object: Object3D } | null>(null)
+  const selectedObject = selectedId && object?.id === selectedId ? object.object : null
+
+  useFrame(() => {
+    if (!selectedId || selectedObject) return
+    const next = sceneRegistry.nodes.get(selectedId)
+    if (next) setObject({ id: selectedId as AnyNodeId, object: next })
+  })
+
+  const geometry = useMemo(() => {
+    if (!fence?.path) return null
+    const positions: Vector3[] = []
+    for (let i = 0; i < fence.path.length; i += 1) {
+      const point = fence.path[i]!
+      const handle = getFenceControlHandle(fence.path, fence.tangents, i)
+      const ax = handle.x * TANGENT_HANDLE_ARM_SCALE
+      const az = handle.y * TANGENT_HANDLE_ARM_SCALE
+      // One disjoint segment per point — `lineSegments` pairs vertices, so the
+      // in/out ends connect through the point without joining across points.
+      positions.push(new Vector3(point[0] - ax, LINE_LIFT_Y, point[1] - az))
+      positions.push(new Vector3(point[0] + ax, LINE_LIFT_Y, point[1] + az))
+    }
+    return new BufferGeometry().setFromPoints(positions)
+  }, [fence])
+
+  if (!(fence && selectedObject && geometry)) return null
+
+  return createPortal(
+    <lineSegments frustumCulled={false} geometry={geometry} layers={EDITOR_LAYER} renderOrder={3}>
+      <lineBasicNodeMaterial
+        color="#8381ed"
+        depthTest={false}
+        depthWrite={false}
+        opacity={0.85}
+        transparent
+      />
+    </lineSegments>,
+    selectedObject,
+  )
+}