@pascal-app/editor 1.0.5 → 1.0.7

package/package.json

@@ -1,12 +1,14 @@
 {
   "name": "@pascal-app/editor",
-  "version": "1.0.5",
+  "version": "1.0.7",
   "description": "Pascal building editor component",
   "license": "MIT",
   "type": "module",
   "exports": {
     ".": "./src/index.tsx",
     "./catalog": "./src/components/ui/item-catalog/catalog-items.tsx",
+    "./locales": "./src/i18n/locales.ts",
+    "./locales/pseudo": "./src/i18n/pseudo-locale.ts",
     "./procedural-items": "./src/components/procedural-items/inspector.tsx",
     "./distribution": "./src/components/tools/distribution/distribution-public.ts"
   },
@@ -16,23 +18,24 @@
     "test": "bun test src"
   },
   "peerDependencies": {
-    "@pascal-app/core": "^1.0.5",
-    "@pascal-app/viewer": "^1.0.5",
+    "@pascal-app/core": "^1.0.7",
+    "@pascal-app/viewer": "^1.0.7",
     "@react-three/drei": "^10",
     "@react-three/fiber": "^9",
     "next": ">=15",
     "react": "^18 || ^19",
     "react-dom": "^18 || ^19",
-    "three": "^0.186"
+    "three": "^0.187"
   },
   "dependencies": {
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
-    "@iconify/react": "^6.0.3",
+    "@iconify/react": "^6.0.4",
+    "@lingui/core": "6.12.0",
     "@number-flow/react": "^0.6.2",
-    "@pascal-app/geometry-script": "^1.0.5",
-    "@pascal-app/ifc-converter": "^1.0.5",
+    "@pascal-app/geometry-script": "^1.0.7",
+    "@pascal-app/ifc-converter": "^1.0.7",
     "@pascal-app/lingo": "^0.5.0",
     "@radix-ui/react-alert-dialog": "^1.2.1",
     "@radix-ui/react-context-menu": "^2.4.1",
@@ -53,31 +56,31 @@
     "cmdk": "^1.1.1",
     "fflate": "^0.8.3",
     "howler": "^2.2.4",
-    "lucide-react": "^1.61.0",
+    "lucide-react": "^1.69.0",
     "manifold-3d": "3.5.4",
     "mitt": "^3.0.1",
-    "motion": "^14.5.0",
+    "motion": "^14.9.1",
     "nanoid": "^6.0.2",
     "pdfkit": "^0.20.2",
     "tailwind-merge": "^3.7.0",
     "three-bvh-csg": "^0.0.18",
-    "three-mesh-bvh": "~0.9.16",
+    "three-mesh-bvh": "~0.9.18",
     "zod": ">=4.6.7 <4.7",
-    "zustand": "^5.0.15"
+    "zustand": "^5.0.16"
   },
   "devDependencies": {
-    "@pascal-app/core": "^1.0.5",
-    "@pascal-app/viewer": "^1.0.5",
+    "@pascal-app/core": "^1.0.7",
+    "@pascal-app/viewer": "^1.0.7",
     "@pascal/typescript-config": "*",
     "@react-three/test-renderer": "^9.1.1",
     "@types/blob-stream": "^0.1.33",
-    "@types/bun": "^1.4.3",
+    "@types/bun": "^1.4.4",
     "@types/howler": "^2.2.13",
-    "@types/pdfkit": "^0.17.6",
+    "@types/pdfkit": "^0.17.7",
     "@types/react": "19.3.0",
     "@types/react-dom": "19.3.0",
-    "@types/three": "^0.186.0",
-    "fast-xml-parser": "^5.11.2",
+    "@types/three": "^0.187",
+    "fast-xml-parser": "^5.12.0",
     "typescript": "7.0.2"
   },
   "repository": {

package/src/components/editor/action-menu-button.tsx

@@ -1,6 +1,8 @@
 'use client'
 
+import { usePascalI18n } from '@pascal-app/core'
 import type { MouseEventHandler, ReactNode } from 'react'
+import { toolHintKey } from '../../i18n/node-messages'
 import { cn } from '../../lib/utils'
 import { shortcutDisplayValue } from '../ui/primitives/shortcut-token'
 import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/primitives/tooltip'
@@ -37,6 +39,7 @@ export function ActionMenuButton({
   pressed?: boolean
   children: ReactNode
 }) {
+  const i18n = usePascalI18n()
   return (
     <Tooltip>
       <TooltipTrigger asChild>
@@ -72,7 +75,7 @@ export function ActionMenuButton({
                 className="rounded border border-background/30 px-1 font-mono text-[10px] leading-4 opacity-80"
                 key={key}
               >
-                {shortcutDisplayValue(key)}
+                {toolHintKey(shortcutDisplayValue(key), i18n)}
               </kbd>
             ))}
           </span>

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

@@ -2,13 +2,16 @@
 
 import { type AlignmentGuide, sceneRegistry } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
-import { Html } from '@react-three/drei'
 import { useFrame } from '@react-three/fiber'
 import { memo, useMemo, useRef } from 'react'
-import { BoxGeometry, CircleGeometry, type Group, Vector3 } from 'three'
+import { BoxGeometry, CircleGeometry, type Group, RingGeometry, Vector3 } from 'three'
 import { MeshBasicNodeMaterial } from 'three/webgpu'
 import { EDITOR_LAYER } from '../../lib/constants'
-import useAlignmentGuides from '../../store/use-alignment-guides'
+import useAlignmentGuides, {
+  type DraftGuideLine,
+  type DraftGuides,
+} from '../../store/use-alignment-guides'
+import { Html } from './localized-html'
 import { formatMeasurement } from './measurement-pill'
 
 /**
@@ -22,13 +25,18 @@ import { formatMeasurement } from './measurement-pill'
  * the design reference — so they're real 3D geometry, not screen billboards.
  * Only the distance pill is screen-space (`<Html>`).
  *
- * Guide coordinates are XZ meters in the WORLD frame — alignment now resolves
- * on the world axes (via `resolveAlignmentForActiveBuilding`) so the guides
- * stay parallel to the visible world grid even when the active building is
- * rotated. This layer is mounted OUTSIDE the building-local ToolManager group
- * for the same reason. The whole ribbon is lifted to the active level's WORLD
- * Y each frame so it lies on the floor being edited — not the building base —
- * when floors are stacked.
+ * Guide coordinates are XZ meters in the active building's LOCAL frame —
+ * alignment resolves on the building's own axes, the axes its 3D grid is laid
+ * on — and the layer is mounted inside the building-local ToolManager group.
+ * The whole ribbon is lifted to the active level's WORLD Y each frame so it
+ * lies on the floor being edited — not the building base — when floors are
+ * stacked.
+ *
+ * A wall pulled from a wall end (and the run it continues) publishes its
+ * projection guides beside them (`useAlignmentGuides.draft`): the extension of
+ * the wall it comes from in amber, lines through other walls' ends in indigo,
+ * lines through the run's start in emerald, all dashed, with a ringed marker
+ * where two of them cross.
  */
 
 const LINE_COLOR = 0x81_8c_f8 // indigo-400 — matches the editor's selection accent (box-select / wall highlights)
@@ -59,11 +67,33 @@ const dotMaterial = new MeshBasicNodeMaterial({
 })
 const DASH_GEOMETRY = new BoxGeometry(1, 1, 1)
 const DOT_GEOMETRY = new CircleGeometry(1, 24)
+const RING_GEOMETRY = new RingGeometry(0.7, 1, 28)
+
+// Draft projection guides: one material per kind, shared like the above.
+const draftGuideMaterial = (color: number) =>
+  new MeshBasicNodeMaterial({
+    color,
+    depthTest: false,
+    depthWrite: false,
+    toneMapped: false,
+    transparent: true,
+    opacity: 0.9,
+  })
+const DRAFT_GUIDE_MATERIALS: Record<DraftGuideLine['kind'], MeshBasicNodeMaterial> = {
+  extension: draftGuideMaterial(0xf5_9e_0b), // amber-500
+  alignment: guideMaterial,
+  'run-start': draftGuideMaterial(0x10_b9_81), // emerald-500 — the pull grip's colour
+}
+const DRAFT_DASH_LEN = 0.14
+const DRAFT_DASH_GAP = 0.12
+const DRAFT_LINE_WIDTH = 0.035
+const INTERSECTION_RADIUS = 0.13
 
 type Vec3 = [number, number, number]
 
 export const Alignment3DGuideLayer = memo(function Alignment3DGuideLayer() {
   const guides = useAlignmentGuides((s) => s.guides)
+  const draft = useAlignmentGuides((s) => s.draft)
   const levelId = useViewer((s) => s.selection.levelId)
   const unit = useViewer((s) => s.unit)
   const metricNotation = useViewer((s) => s.metricNotation)
@@ -82,16 +112,77 @@ export const Alignment3DGuideLayer = memo(function Alignment3DGuideLayer() {
     group.position.y = levelMesh ? levelMesh.getWorldPosition(worldYWork).y : 0
   })
 
-  if (guides.length === 0) return null
+  if (guides.length === 0 && !draft) return null
   return (
     <group ref={groupRef}>
       {guides.map((guide, i) => (
         <GuideLine guide={guide} key={i} metricNotation={metricNotation} unit={unit} />
       ))}
+      {draft ? <DraftGuidesLayer draft={draft} /> : null}
     </group>
   )
 })
 
+/** A wall draft's dashed projection guides and the markers where they cross. */
+function DraftGuidesLayer({ draft }: { draft: DraftGuides }) {
+  return (
+    <>
+      {draft.lines.map((line, i) => (
+        <DraftLine key={`l${i}`} line={line} />
+      ))}
+      {draft.intersections.map((point, i) => (
+        <mesh
+          geometry={RING_GEOMETRY}
+          key={`x${i}`}
+          layers={EDITOR_LAYER}
+          material={guideMaterial}
+          position={[point[0], GUIDE_Y + 0.002, point[1]]}
+          renderOrder={1001}
+          rotation={[-Math.PI / 2, 0, 0]}
+          scale={[INTERSECTION_RADIUS, INTERSECTION_RADIUS, INTERSECTION_RADIUS]}
+        />
+      ))}
+    </>
+  )
+}
+
+function DraftLine({ line }: { line: DraftGuideLine }) {
+  const [fx, fz] = line.from
+  const [tx, tz] = line.to
+  const { dashes, angleY } = useMemo(() => {
+    const dx = tx - fx
+    const dz = tz - fz
+    const length = Math.hypot(dx, dz)
+    const angle = -Math.atan2(dz, dx)
+    if (length < 1e-4) return { dashes: [] as Vec3[], angleY: angle }
+    const ux = dx / length
+    const uz = dz / length
+    const period = Math.max(DRAFT_DASH_LEN + DRAFT_DASH_GAP, length / MAX_DASHES)
+    const centres: Vec3[] = []
+    for (let d = period / 2; d - DRAFT_DASH_LEN / 2 <= length; d += period) {
+      centres.push([fx + ux * d, GUIDE_Y, fz + uz * d])
+    }
+    return { dashes: centres, angleY: angle }
+  }, [fx, fz, tx, tz])
+  const material = DRAFT_GUIDE_MATERIALS[line.kind]
+  return (
+    <>
+      {dashes.map((centre, i) => (
+        <mesh
+          geometry={DASH_GEOMETRY}
+          key={i}
+          layers={EDITOR_LAYER}
+          material={material}
+          position={centre}
+          renderOrder={1000}
+          rotation={[0, angleY, 0]}
+          scale={[DRAFT_DASH_LEN, 0.002, DRAFT_LINE_WIDTH]}
+        />
+      ))}
+    </>
+  )
+}
+
 function GuideLine({
   guide,
   metricNotation,

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

@@ -47,8 +47,9 @@ const THUMBNAIL_BACKDROP = { inner: '#FAFAFA', outer: '#E4E4E4' }
 const THUMBNAIL_SHADOW_CATCHER_OPACITY = 0.7
 /** Soft shade hugging the ground-floor walls so the building never floats. */
 const THUMBNAIL_WALL_CONTACT = { opacity: 0.5, spreadM: 0.9 }
-/** Unpainted walls render as smooth plaster rather than the screw-dotted
- *  prepared-drywall default, which reads as unfinished at card size. */
+/** A roof's unpainted trim and gable bands render as smooth plaster rather
+ *  than the screw-dotted prepared-drywall default, which reads as unfinished
+ *  at card size. Unpainted walls already wear the interior paint. */
 const THUMBNAIL_SLOT_DEFAULT_OVERRIDES = {
   'library:concrete-drywall': 'library:concrete-plaster',
 } as const

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

@@ -62,6 +62,7 @@ import {
   orbitFloorMinY,
   overviewEyeY,
 } from '../../lib/orbit-floor-clearance'
+import { orbitNearPlane } from '../../lib/orbit-near-plane'
 import { editorOwnsOneFingerDrag } from '../../lib/touch-gesture-priority'
 import { frameViewerCamera } from '../../lib/viewer-selection'
 import { publishCameraPose } from '../../store/camera-pose-store'
@@ -766,8 +767,16 @@ export const CustomCameraControls = ({ paused = false }: { paused?: boolean }) =
   }, [camera, isFirstPersonMode, viewportSize])
 
   const handleCameraUpdate = useCallback(() => {
+    const control = controls.current
+    if (control && isPerspectiveCamera(camera)) {
+      const near = orbitNearPlane(control.distance)
+      if (Math.abs(camera.near - near) > 1e-4) {
+        camera.near = near
+        camera.updateProjectionMatrix()
+      }
+    }
     publishCurrentPose()
-  }, [publishCurrentPose])
+  }, [camera, publishCurrentPose])
 
   useEffect(() => {
     publishInitialCameraPose(publishCurrentPose)
@@ -1054,7 +1063,10 @@ export const CustomCameraControls = ({ paused = false }: { paused?: boolean }) =
       updateNavigationCursor()
     }
 
-    const onWheel = () => {
+    const onWheel = (event: WheelEvent) => {
+      // Zooming in carries on past the closest orbit, the target with it; zooming out stops at
+      // the farthest, or the eye would drift off the site. Seen before the controls' own listener.
+      if (controls.current) controls.current.infinityDolly = event.deltaY < 0
       beginLocalCameraInteraction()
       cameraDraggingLifecycle.scheduleEnd()
     }
@@ -1452,13 +1464,12 @@ export const CustomCameraControls = ({ paused = false }: { paused?: boolean }) =
     }
   }, [cameraDraggingLifecycle])
 
-  // Preset capture mode frames a single subtree (often a 0.3–2m preset),
-  // 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.
+  // The wheel dollies toward the cursor and, at the closest orbit, carries the
+  // target on (infinity dolly), so the eye goes right up to a window's trim
+  // or through a doorway rather than stopping short of the orbit's pivot.
+  // Preset capture frames a single small subtree and orbits it closer still.
   const isPresetCapture = captureMode.mode === 'preset'
-  const minDistance = isPresetCapture ? 0.5 : 2
+  const minDistance = isPresetCapture ? 0.25 : 0.5
   // Over modeled or mapped surroundings (a neighbourhood instead of the
   // horizon disc) the camera may pull back far enough to take it all in.
   const groundReplaced = useSceneGroundReplacement()
@@ -1471,6 +1482,7 @@ export const CustomCameraControls = ({ paused = false }: { paused?: boolean }) =
   return (
     <CameraControls
       azimuthRotateSpeed={ORBIT_ROTATE_SPEED}
+      dollyToCursor
       makeDefault
       maxDistance={maxDistance}
       impl={FloorAwareCameraControls}

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

@@ -2,13 +2,13 @@
 
 import { sceneRegistry } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
-import { Html } from '@react-three/drei'
 import { useFrame } from '@react-three/fiber'
 import { memo, useMemo, useRef } from 'react'
 import { BoxGeometry, CircleGeometry, type Group } from 'three'
 import { MeshBasicNodeMaterial } from 'three/webgpu'
 import { EDITOR_LAYER } from '../../lib/constants'
 import useElevationGuides from '../../store/use-elevation-guides'
+import { Html } from './localized-html'
 import { formatMeasurement } from './measurement-pill'
 
 const LINE_COLOR = 0x81_8c_f8

package/src/components/editor/first-person-controls.tsx

@@ -18,6 +18,7 @@ import {
   getLevelDisplayName,
   getLevelElevations,
   getResolvedElevatorDoorStyle,
+  type InteractionSound,
   itemPrompt,
   nodeMechanism,
   openElevatorDoor,
@@ -45,12 +46,20 @@ import {
   CROUCH_FLOAT_HEIGHT,
   CROUCH_RUN_SPEED,
   CROUCH_WALK_SPEED,
+  createDroneInput,
+  DRONE_SLOW_MULTIPLIER,
+  type DroneLook,
   EYE_LERP_SPEED,
   type MovementInput,
+  openingSettled,
+  proceduralSettled,
   STAND_CAPSULE,
   STAND_CLEARANCE,
   STAND_FLOAT_HEIGHT,
+  seedDroneLook,
   setSurfaceRaycastLayers,
+  stepDroneFlight,
+  turnFirstPersonLook,
   useViewer,
   WALKTHROUGH_FOV,
 } from '@pascal-app/viewer'
@@ -90,7 +99,7 @@ import {
 } from '../../lib/window-interaction'
 import useEditor from '../../store/use-editor'
 import { useFirstPersonHud, type WalkthroughInteract } from '../../store/use-first-person-hud'
-import { WalkthroughHud } from '../walkthrough-hud'
+import { DroneHud, WalkthroughHud } from '../walkthrough-hud'
 import {
   buildFirstPersonColliderWorldFromRegistry,
   deriveFirstPersonSpawn,
@@ -107,13 +116,6 @@ import {
 } from './first-person/mechanism-targets'
 
 const CAMERA_EYE_OFFSET = 0.45
-const LOOK_SENSITIVITY = 0.002
-// Drone mode: metres per second, and how hard Shift boosts it. The smoothing
-// constant is an exponential approach rate, not a linear acceleration.
-const DRONE_SPEED = 7
-const DRONE_RUN_MULTIPLIER = 3
-const DRONE_SLOW_MULTIPLIER = 0.2
-const DRONE_SMOOTHING = 12
 const CONTROLLER_CENTER_FROM_EYE = 0.85
 const DOOR_INTERACTION_DISTANCE = 2.5
 const DOOR_LEAF_INTERACTION_DEPTH = 0.08
@@ -168,10 +170,7 @@ function focusFirstPersonCanvas(canvas: HTMLCanvasElement) {
 
 const cameraOffset = new Vector3()
 const cameraEuler = new Euler(0, 0, 0, 'YXZ')
-const droneEuler = new Euler(0, 0, 0, 'YXZ')
-const droneForward = new Vector3()
-const droneRight = new Vector3()
-const droneDesiredVelocity = new Vector3()
+const droneInput = createDroneInput()
 const standClearanceRaycaster = new Raycaster()
 const standClearanceUp = new Vector3(0, 1, 0)
 const centerScreenPoint = new Vector2(0, 0)
@@ -425,6 +424,40 @@ function resolveHudInteract(target: FirstPersonInteractableTarget | null): Walkt
   return { label: node.name || 'door', verb: isOpen ? 'close' : 'open' }
 }
 
+/** E plays what the viewer's callout plays for the same door, window or switch. */
+function playTargetSound(target: FirstPersonInteractableTarget) {
+  const verb = resolveHudInteract(target)?.verb
+  if (!verb || verb === 'press') return
+  const node = useScene.getState().nodes[target.id]
+  // A recipe's door or lid swings and claps shut, its drawer slides; both land on the motion's end.
+  if (target.type === 'procedural' && (verb === 'open' || verb === 'close')) {
+    if (verb === 'open') {
+      emitter.emit('interaction:sound', 'panel-open')
+      return
+    }
+    if (target.kind !== 'slide') emitter.emit('interaction:sound', 'panel-swing')
+    void proceduralSettled(target.id).then(() => emitter.emit('interaction:sound', 'panel-close'))
+    return
+  }
+  let sound: InteractionSound
+  if (verb !== 'open' && verb !== 'close')
+    sound = verb === 'turn on' || verb === 'play' ? 'switch-on' : 'switch-off'
+  else if (node?.type === 'door' && node.doorType?.startsWith('garage-')) sound = 'garage'
+  else if (node?.type === 'window') sound = verb === 'open' ? 'window-open' : 'window-close'
+  else sound = verb === 'open' ? 'door-open' : 'door-close'
+  // A built-in leaf or sash swings shut, then latches on the frame it lands.
+  if (
+    (sound === 'door-close' || sound === 'window-close') &&
+    (target.type === 'door' || target.type === 'window') &&
+    node
+  ) {
+    emitter.emit('interaction:sound', sound === 'door-close' ? 'door-swing' : 'window-swing')
+    void openingSettled(node).then(() => emitter.emit('interaction:sound', sound))
+    return
+  }
+  emitter.emit('interaction:sound', sound)
+}
+
 function resolveElevatorButtonTarget(object: Object3D): ElevatorButtonTarget | null {
   let current: Object3D | null = object
 
@@ -734,8 +767,7 @@ export const FirstPersonControls = () => {
   const controllerRef = useRef<BVHEcctrlApi | null>(null)
   const movementInputRef = useRef<MovementInput>({ ...inactiveMovementInput })
   const hadPointerLockRef = useRef(false)
-  const yawRef = useRef(0)
-  const pitchRef = useRef(0)
+  const lookRef = useRef<DroneLook>({ yaw: 0, pitch: 0 })
   const interactableTargetRef = useRef<FirstPersonInteractableTarget | null>(null)
   const hudLabelFrameRef = useRef(HUD_LABEL_SAMPLE_FRAMES - 1)
   const crouchKeyRef = useRef(false)
@@ -1131,6 +1163,7 @@ export const FirstPersonControls = () => {
 
     const target = interactableTargetRef.current ?? resolveInteractableTarget()
     if (!target) return
+    playTargetSound(target)
     if (target.type === 'mechanism') {
       const node = useScene.getState().nodes[target.id]
       if (node) toggleNodeMechanism(node)
@@ -1325,9 +1358,7 @@ export const FirstPersonControls = () => {
   // Drone picks up wherever the camera currently is — orbit pose or walk eye.
   useEffect(() => {
     if (!isDroneMode) return
-    droneEuler.setFromQuaternion(camera.quaternion)
-    yawRef.current = droneEuler.y
-    pitchRef.current = droneEuler.x
+    seedDroneLook(lookRef.current, camera.quaternion)
     droneVelocityRef.current.set(0, 0, 0)
 
     // Interaction prompts belong to walk; drop whatever its frame left behind.
@@ -1344,8 +1375,8 @@ export const FirstPersonControls = () => {
 
     const spawn = placedSpawn ?? deriveFirstPersonSpawn(camera, world)
     const [x, y, z] = spawn.position
-    yawRef.current = spawn.yaw
-    pitchRef.current = 0
+    lookRef.current.yaw = spawn.yaw
+    lookRef.current.pitch = 0
     setControllerStart({
       position: [x, y - CONTROLLER_CENTER_FROM_EYE, z],
       yaw: spawn.yaw,
@@ -1381,15 +1412,13 @@ export const FirstPersonControls = () => {
       // Shutter hold: the shot is rendering — a mouse twitch must not pan it.
       if (useEditor.getState().captureShutterHold) return
 
-      const lookSensitivity =
-        LOOK_SENSITIVITY *
-        (useEditor.getState().firstPersonMovementMode === 'drone' && droneSlowKeyRef.current
+      turnFirstPersonLook(
+        lookRef.current,
+        e.movementX,
+        e.movementY,
+        useEditor.getState().firstPersonMovementMode === 'drone' && droneSlowKeyRef.current
           ? DRONE_SLOW_MULTIPLIER
-          : 1)
-      yawRef.current -= e.movementX * lookSensitivity
-      pitchRef.current = Math.max(
-        -(Math.PI / 2 - 0.05),
-        Math.min(Math.PI / 2 - 0.05, pitchRef.current - e.movementY * lookSensitivity),
+          : 1,
       )
     }
 
@@ -1817,45 +1846,24 @@ export const FirstPersonControls = () => {
     return standClearanceRaycaster.intersectObjects(meshes, false).length === 0
   }, [])
 
-  // Drone: a free camera driven straight from the look angles — no controller,
-  // no gravity or collision clamping. WASD move along the view axes, Space or E
-  // rises, Q (or Ctrl) sinks, and Shift boosts.
+  // Drone: the viewer's free flight (`stepDroneFlight`, also behind the viewer's
+  // `DroneController`) fed from this controller's keys — WASD along the view
+  // axes, Space or E rises, Q (or Ctrl) sinks, Shift boosts, Alt slows.
   useFrame((_, delta) => {
     if (!isDroneMode) return
     // Shutter hold: freeze the drone mid-air while the shot renders.
     if (useEditor.getState().captureShutterHold) return
 
-    const step = Math.min(delta, 0.1)
     const movement = movementInputRef.current
-
-    droneEuler.set(pitchRef.current, yawRef.current, 0, 'YXZ')
-    camera.quaternion.setFromEuler(droneEuler)
-    droneForward.set(0, 0, -1).applyEuler(droneEuler)
-    droneRight.set(1, 0, 0).applyEuler(droneEuler)
-
-    droneDesiredVelocity.set(0, 0, 0)
-    if (movement.forward) droneDesiredVelocity.add(droneForward)
-    if (movement.backward) droneDesiredVelocity.sub(droneForward)
-    if (movement.rightward) droneDesiredVelocity.add(droneRight)
-    if (movement.leftward) droneDesiredVelocity.sub(droneRight)
-    if (movement.jump || droneAscendKeyRef.current) droneDesiredVelocity.y += 1
-    if (droneDescendKeyRef.current || crouchKeyRef.current) droneDesiredVelocity.y -= 1
-    if (droneDesiredVelocity.lengthSq() > 0) {
-      droneDesiredVelocity
-        .normalize()
-        .multiplyScalar(
-          DRONE_SPEED *
-            (droneSlowKeyRef.current
-              ? DRONE_SLOW_MULTIPLIER
-              : movement.run
-                ? DRONE_RUN_MULTIPLIER
-                : 1),
-        )
-    }
-
-    droneVelocityRef.current.lerp(droneDesiredVelocity, 1 - Math.exp(-step * DRONE_SMOOTHING))
-    camera.position.addScaledVector(droneVelocityRef.current, step)
-    camera.updateMatrixWorld(true)
+    droneInput.forward = movement.forward === true
+    droneInput.backward = movement.backward === true
+    droneInput.leftward = movement.leftward === true
+    droneInput.rightward = movement.rightward === true
+    droneInput.up = movement.jump === true || droneAscendKeyRef.current
+    droneInput.down = droneDescendKeyRef.current || crouchKeyRef.current
+    droneInput.boost = movement.run === true
+    droneInput.slow = droneSlowKeyRef.current
+    stepDroneFlight(camera, lookRef.current, droneInput, droneVelocityRef.current, delta)
   }, 2.5)
 
   useFrame((_, delta) => {
@@ -1899,7 +1907,7 @@ export const FirstPersonControls = () => {
 
     group.rotation.y = 0
     camera.position.copy(group.position).add(cameraOffset)
-    cameraEuler.set(pitchRef.current, yawRef.current, 0, 'YXZ')
+    cameraEuler.set(lookRef.current.pitch, lookRef.current.yaw, 0, 'YXZ')
     camera.quaternion.setFromEuler(cameraEuler)
     camera.updateMatrixWorld(true)
     syncElevatorRide(group)
@@ -1991,6 +1999,7 @@ export const FirstPersonOverlay = ({ onExit }: { onExit: () => void }) => {
   const zoneLabel = useFirstPersonHud((state) => state.zoneLabel)
   const interact = useFirstPersonHud((state) => state.interact)
   const suspended = useViewer((state) => state.walkthroughSuspended)
+  const isDroneMode = useEditor((state) => state.firstPersonMovementMode === 'drone')
 
   const handleExit = useCallback(() => {
     if (document.pointerLockElement) {
@@ -1999,6 +2008,8 @@ export const FirstPersonOverlay = ({ onExit }: { onExit: () => void }) => {
     onExit()
   }, [onExit])
 
+  if (isDroneMode) return <DroneHud onExit={handleExit} suspended={suspended} />
+
   return (
     <WalkthroughHud
       floorLabel={floorLabel}