From cb5cfc7e40acbb9cda024041a3cf766d92f2e7af Mon Sep 17 00:00:00 2001
From: Aymeric Rabot <aymeric@pascal.app>
Date: Thu, 9 Jul 2026 13:09:31 +0200
Subject: [PATCH 1/2] fix(editor): compass sync + fast align-to-north
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Remove CSS transition on compass needle SVG so rotation tracks
  exactly without rubber-band lag (was transition-transform 150ms)
- Drive compass needle imperatively via ref when floorplan panel is
  hidden (3D-only mode), avoiding per-frame React re-renders of the
  full SVG while keeping the needle live
- Align-to-north in 3D-only mode derives from latestNavigationSyncPose
  instead of stale viewport, publishes directly to the 3D camera
- Temporarily lower camera-controls smoothTime from 0.25s to 0.18s
  during 2D-origin transitions (SmoothDamp τ≈90ms matches the 2D
  exponential decay), restoring on completion or cancellation

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../editor/custom-camera-controls.tsx         | 16 ++++++++
 .../src/components/editor/floorplan-panel.tsx | 41 ++++++++++++++++++-
 2 files changed, 56 insertions(+), 1 deletion(-)

diff --git a/packages/editor/src/components/editor/custom-camera-controls.tsx b/packages/editor/src/components/editor/custom-camera-controls.tsx
index a930a75b4..d88cebcbc 100644
--- a/packages/editor/src/components/editor/custom-camera-controls.tsx
+++ b/packages/editor/src/components/editor/custom-camera-controls.tsx
@@ -369,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)
@@ -478,6 +483,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)
@@ -500,6 +512,10 @@ export const CustomCameraControls = () => {
       ) {
         lastPublishedNavigationSync.current = pendingFloorplanPose
         pendingFloorplanNavigationPose.current = null
+        if (savedSmoothTimeRef.current !== null && controls.current) {
+          controls.current.smoothTime = savedSmoothTimeRef.current
+          savedSmoothTimeRef.current = null
+        }
         if (pendingFloorplanPose.publishOnComplete) {
           useEditor.getState().publishNavigationSyncPose({
             source: '3d',
diff --git a/packages/editor/src/components/editor/floorplan-panel.tsx b/packages/editor/src/components/editor/floorplan-panel.tsx
index dd29ee8d4..8ddfaae2f 100644
--- a/packages/editor/src/components/editor/floorplan-panel.tsx
+++ b/packages/editor/src/components/editor/floorplan-panel.tsx
@@ -457,9 +457,11 @@ type GuideHandleHintAnchor = {
 function FloorplanCompassButton({
   northRotationDeg,
   onAlignNorth,
+  needleRef,
 }: {
   northRotationDeg: number
   onAlignNorth: () => void
+  needleRef?: React.RefObject<SVGSVGElement | null>
 }) {
   return (
     <Tooltip>
@@ -480,7 +482,8 @@ function FloorplanCompassButton({
           <span className="relative flex h-6 w-6 items-center justify-center rounded-full bg-[#b8b8b8] shadow-inner dark:bg-neutral-700">
             <svg
               aria-hidden="true"
-              className="h-6 w-6 transition-transform duration-150 ease-out"
+              className="h-6 w-6"
+              ref={needleRef}
               style={{ transform: `rotate(${northRotationDeg}deg)` }}
               viewBox="0 0 48 48"
             >
@@ -5078,6 +5081,7 @@ export function FloorplanPanel({
   const latestNavigationSyncPoseRef = useRef<NavigationSyncPose | null>(
     useEditor.getState().navigationSyncPose,
   )
+  const compassNeedleRef = useRef<SVGSVGElement | null>(null)
   const levelId = useViewer((state) => state.selection.levelId)
   const buildingId = useViewer((state) => state.selection.buildingId)
   const selectedZoneId = useViewer((state) => state.selection.zoneId)
@@ -6563,6 +6567,20 @@ export function FloorplanPanel({
       latestNavigationSyncPoseRef.current = pose
 
       if (pose.source === '3d') {
+        if (!isFloorplanOpenRef.current) {
+          // Panel hidden — drive the compass needle imperatively without
+          // triggering React state (setViewport) that would re-render the
+          // full floorplan SVG every camera frame.
+          const nextDeg = floorplanRotationFromCameraAzimuth(
+            pose.azimuth,
+            latestFloorplanUserRotationDegRef.current,
+          )
+          latestFloorplanUserRotationDegRef.current = nextDeg
+          if (compassNeedleRef.current) {
+            compassNeedleRef.current.style.transform = `rotate(${nextDeg}deg)`
+          }
+          return
+        }
         syncFloorplanViewportToNavigationPose(pose)
       }
     })
@@ -7345,6 +7363,25 @@ export function FloorplanPanel({
   )
 
   const alignFloorplanViewToNorth = useCallback(() => {
+    if (!isFloorplanOpenRef.current) {
+      // Panel hidden — derive from the live 3D camera pose and publish
+      // directly. The compass animates via the imperative subscription as
+      // the 3D camera transitions.
+      const pose = latestNavigationSyncPoseRef.current
+      if (!pose) return
+      const currentRotation = latestFloorplanUserRotationDegRef.current
+      const northAzimuth = cameraAzimuthFromFloorplanRotation(
+        nearestEquivalentDegrees(0, currentRotation),
+      )
+      useEditor.getState().publishNavigationSyncPose({
+        source: '2d',
+        target: [...pose.target],
+        azimuth: northAzimuth,
+        viewWidth: pose.viewWidth,
+      })
+      return
+    }
+
     const currentViewport = latestViewportRef.current ?? latestFittedViewportRef.current
     if (!currentViewport) {
       return
@@ -10761,6 +10798,7 @@ export function FloorplanPanel({
           (compassHost ? (
             createPortal(
               <FloorplanCompassButton
+                needleRef={compassNeedleRef}
                 northRotationDeg={floorplanUserRotationDeg}
                 onAlignNorth={alignFloorplanViewToNorth}
               />,
@@ -10768,6 +10806,7 @@ export function FloorplanPanel({
             )
           ) : (
             <FloorplanCompassButton
+              needleRef={compassNeedleRef}
               northRotationDeg={floorplanUserRotationDeg}
               onAlignNorth={alignFloorplanViewToNorth}
             />

From d4f1053528247468d10f46ba27a845edd2bbf61a Mon Sep 17 00:00:00 2001
From: Aymeric Rabot <aymeric@pascal.app>
Date: Thu, 9 Jul 2026 13:23:09 +0200
Subject: [PATCH 2/2] fix(editor): compass sync review fixes

Route all pending-pose cancellations through clearPendingFloorplanNavigationPose()
so savedSmoothTime is always restored. Add a controlstart listener to catch
right-click orbit and other pointer drags that weren't handled. Guard the
rotation-degree ref mirror to prevent React re-renders from clobbering the
imperative 3D-owned value when the panel is hidden, and add a useLayoutEffect
to keep the needle DOM in sync. Make the catch-up effect re-run directly on
panel reopen.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../editor/custom-camera-controls.tsx         | 36 +++++++++++++------
 .../src/components/editor/floorplan-panel.tsx | 23 +++++++++---
 2 files changed, 43 insertions(+), 16 deletions(-)

diff --git a/packages/editor/src/components/editor/custom-camera-controls.tsx b/packages/editor/src/components/editor/custom-camera-controls.tsx
index d88cebcbc..3fdec0ed2 100644
--- a/packages/editor/src/components/editor/custom-camera-controls.tsx
+++ b/packages/editor/src/components/editor/custom-camera-controls.tsx
@@ -511,11 +511,7 @@ export const CustomCameraControls = () => {
         isCameraAtNavigationPose(pendingFloorplanPose, syncTarget, syncSpherical.theta, viewWidth)
       ) {
         lastPublishedNavigationSync.current = pendingFloorplanPose
-        pendingFloorplanNavigationPose.current = null
-        if (savedSmoothTimeRef.current !== null && controls.current) {
-          controls.current.smoothTime = savedSmoothTimeRef.current
-          savedSmoothTimeRef.current = null
-        }
+        clearPendingFloorplanNavigationPose()
         if (pendingFloorplanPose.publishOnComplete) {
           useEditor.getState().publishNavigationSyncPose({
             source: '3d',
@@ -556,7 +552,7 @@ export const CustomCameraControls = () => {
       azimuth: syncSpherical.theta,
       viewWidth,
     })
-  }, [camera, isFirstPersonMode, viewportSize])
+  }, [camera, clearPendingFloorplanNavigationPose, isFirstPersonMode, viewportSize])
 
   useEffect(() => {
     if (isFirstPersonMode || (!isFloorplanOpen && currentLevelId === null)) return
@@ -589,7 +585,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)
   })
@@ -741,7 +737,7 @@ export const CustomCameraControls = () => {
           !isEditableKeyboardTarget(event.target)
         ) {
           setKeyboardPanKey(keyboardPanKeys.current, event.code, true)
-          pendingFloorplanNavigationPose.current = null
+          clearPendingFloorplanNavigationPose()
           event.preventDefault()
           event.stopPropagation()
         }
@@ -804,7 +800,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
@@ -813,7 +809,7 @@ export const CustomCameraControls = () => {
     }
 
     const onWheel = () => {
-      pendingFloorplanNavigationPose.current = null
+      clearPendingFloorplanNavigationPose()
     }
 
     const onPointerUp = (event: PointerEvent) => {
@@ -855,7 +851,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
diff --git a/packages/editor/src/components/editor/floorplan-panel.tsx b/packages/editor/src/components/editor/floorplan-panel.tsx
index 8ddfaae2f..7335dac90 100644
--- a/packages/editor/src/components/editor/floorplan-panel.tsx
+++ b/packages/editor/src/components/editor/floorplan-panel.tsx
@@ -5181,7 +5181,11 @@ export function FloorplanPanel({
   const buildingRotationDeg = (buildingRotationY * 180) / Math.PI
   const floorplanSceneRotationDeg =
     FLOORPLAN_VIEW_ROTATION_DEG + floorplanUserRotationDeg - buildingRotationDeg
-  latestFloorplanUserRotationDegRef.current = floorplanUserRotationDeg
+  // Only sync ref from state when floorplan is open (state is source of truth).
+  // When hidden, the imperative 3D path owns the ref and must not be clobbered.
+  if (isFloorplanOpenRef.current) {
+    latestFloorplanUserRotationDegRef.current = floorplanUserRotationDeg
+  }
 
   // Draft START points stay in panel state (set per click). The live END points
   // are the per-move hot values — they live in `useFloorplanDraftPreview` so a
@@ -6543,6 +6547,8 @@ export function FloorplanPanel({
   )
 
   useEffect(() => {
+    if (!isFloorplanOpen) return
+
     const pose = useEditor.getState().navigationSyncPose
     if (!pose) {
       return
@@ -6550,12 +6556,9 @@ export function FloorplanPanel({
 
     latestNavigationSyncPoseRef.current = pose
     if (pose.source === '3d') {
-      // Re-runs when the panel reopens (`isFloorplanOpen`) so the viewport
-      // catches up to the camera after the per-frame sync was skipped while
-      // hidden; a no-op while closed (the sync early-returns).
       syncFloorplanViewportToNavigationPose(pose)
     }
-  }, [syncFloorplanViewportToNavigationPose])
+  }, [syncFloorplanViewportToNavigationPose, isFloorplanOpen])
 
   useEffect(() => {
     return useEditor.subscribe((state) => {
@@ -6586,6 +6589,16 @@ export function FloorplanPanel({
     })
   }, [syncFloorplanViewportToNavigationPose])
 
+  // When the panel is hidden the imperative path owns the compass needle.
+  // React re-renders can overwrite the needle's inline transform with stale
+  // state; this layout effect restores the authoritative ref value before
+  // the browser paints so the needle never visibly snaps to a stale angle.
+  useLayoutEffect(() => {
+    if (!isFloorplanOpen && compassNeedleRef.current) {
+      compassNeedleRef.current.style.transform = `rotate(${latestFloorplanUserRotationDegRef.current}deg)`
+    }
+  })
+
   useEffect(() => {
     const host = viewportHostRef.current
     if (!host) {