otherplane 0.1.0

package/engine/src/components/controls/PlayerController.tsx

@@ -0,0 +1,170 @@
+'use client';
+
+import { useEffect, useMemo, useRef } from 'react';
+import { useFrame, useThree } from '@react-three/fiber';
+import { usePointerLock } from '@/providers/pointerLock';
+import * as THREE from 'three';
+import { useRapierWorld, RapierRigidBody } from '@/physics';
+import { useEdit } from '@/providers/edit';
+
+// Rapier collision groups are a 32-bit value: high 16 bits = membership,
+// low 16 bits = filter (which groups this collider collides with).
+// NORMAL is Rapier's default (member of all, collides with all). SPECTER keeps
+// membership but clears the filter, so the player collides with nothing —
+// passing through walls. Beams are separate raycasts, so they are unaffected.
+const NORMAL_GROUPS = 0xffffffff;
+const SPECTER_GROUPS = 0x00010000;
+
+type Props = {
+  onLockChange?: (locked: boolean) => void;
+  radius?: number;
+  halfHeight?: number;
+  eyeHeight?: number;
+  moveSpeed?: number;
+  start?: [number, number, number];
+  mobileInputRef?: React.MutableRefObject<{x:number;y:number}>;
+  /** Yaw (degrees) to face on arrival; bump `spawnKey` to re-apply it. */
+  spawnYaw?: number;
+  spawnKey?: string;
+};
+
+export default function PlayerController({
+  onLockChange,
+  radius = 0.33,
+  halfHeight = 0.55,
+  eyeHeight = 1.0,
+  moveSpeed = 14.0,
+  start = [0, 1.4, 0],
+  mobileInputRef,
+  spawnYaw,
+  spawnKey,
+}: Props) {
+  const { camera } = useThree();
+  const { playerBody } = useRapierWorld();
+  const { isLocked } = usePointerLock();
+  const { specter, specterRef } = useEdit();
+  const bodyRef = useRef<RapierRigidBody | null>(playerBody);
+  const key = useRef<Record<string, boolean>>({});
+  const forward = useMemo(() => new THREE.Vector3(), []);
+  const right = useMemo(() => new THREE.Vector3(), []);
+  const localMobileVec = useRef<{x:number;y:number}>({x:0,y:0});
+  const mobileVec = mobileInputRef || localMobileVec;
+
+  // Sync to provider-owned body
+  useEffect(() => {
+    bodyRef.current = playerBody;
+  }, [playerBody]);
+
+  // Face the entryway's yaw on arrival (and on each room/entryway change). lookAt
+  // sets orientation from the direction only (position-independent), and
+  // PointerLockControls reads the camera's orientation on the next mouse move, so
+  // this persists. yaw convention matches the C-key readout: atan2(fwd.x, fwd.z).
+  useEffect(() => {
+    if (spawnYaw == null) return;
+    const yawRad = (spawnYaw * Math.PI) / 180;
+    const p = camera.position;
+    camera.lookAt(p.x + Math.sin(yawRad), p.y, p.z + Math.cos(yawRad));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [spawnKey]);
+
+  // Apply specter mode to the player body: clear the collider's collision filter
+  // (pass through everything) and zero gravity (so you hover / fly). Reverting
+  // restores normal collision + gravity. Re-runs when the body is recreated.
+  useEffect(() => {
+    if (!playerBody) return;
+    const collider = playerBody.collider(0);
+    if (specter) {
+      collider?.setCollisionGroups(SPECTER_GROUPS);
+      playerBody.setGravityScale(0, true);
+    } else {
+      collider?.setCollisionGroups(NORMAL_GROUPS);
+      playerBody.setGravityScale(1, true);
+      playerBody.setLinvel({ x: 0, y: 0, z: 0 }, true);
+    }
+  }, [specter, playerBody]);
+
+  // Input
+  useEffect(() => {
+    const down = (e: KeyboardEvent) => {
+      key.current[e.code] = true;
+      if (e.code === 'KeyP') {
+        const rb = bodyRef.current;
+        if (rb) {
+          const p = rb.translation();
+          const fwd = new THREE.Vector3();
+          camera.getWorldDirection(fwd).normalize();
+          const yaw = Math.atan2(fwd.x, fwd.z) * 180 / Math.PI;
+          const pitch = Math.asin(THREE.MathUtils.clamp(fwd.y, -1, 1)) * 180 / Math.PI;
+          console.log(`[Player] pos=(${p.x.toFixed(2)}, ${p.y.toFixed(2)}, ${p.z.toFixed(2)}) yaw=${yaw.toFixed(1)} pitch=${pitch.toFixed(1)}`);
+        } else {
+          console.warn('[Player] body not initialized yet');
+        }
+      }
+      // Arrows fly up/down in specter mode; stop them scrolling the page either way.
+      if (e.code === 'ArrowUp' || e.code === 'ArrowDown') {
+        e.preventDefault();
+      }
+    };
+    const up = (e: KeyboardEvent) => { key.current[e.code] = false; };
+    window.addEventListener('keydown', down);
+    window.addEventListener('keyup', up);
+    return () => {
+      window.removeEventListener('keydown', down);
+      window.removeEventListener('keyup', up);
+    };
+  }, []);
+
+  useFrame(() => {
+    const rb = bodyRef.current;
+    if (!rb) return;
+
+    // Movement is driven only while pointer lock is engaged. Camera positioning
+    // (below) happens every frame regardless, so the room is framed correctly
+    // the instant you spawn — even before you click to engage.
+    if (isLocked) {
+      camera.getWorldDirection(forward);
+      forward.y = 0; forward.normalize();
+      right.crossVectors(forward, camera.up).normalize();
+
+      // Keyboard input
+      const z = (key.current['KeyW'] ? 1 : 0) - (key.current['KeyS'] ? 1 : 0);
+      const xk = (key.current['KeyD'] ? 1 : 0) - (key.current['KeyA'] ? 1 : 0);
+
+      // Mobile joystick input (override keyboard if non-zero)
+      const xm = mobileVec.current.x;
+      const zm = -mobileVec.current.y; // invert: up is negative y
+      const x = Math.abs(xm) > 0.01 ? xm : xk;
+      const zFinal = Math.abs(zm) > 0.01 ? zm : z;
+
+      const dir = new THREE.Vector3();
+      if (zFinal) dir.addScaledVector(forward, zFinal);
+      if (x) dir.addScaledVector(right, x);
+      if (dir.lengthSq() > 0) dir.normalize();
+
+      const speed = moveSpeed * 0.1;
+      const cur = rb.linvel();
+      const target = { x: dir.x * speed, y: cur.y, z: dir.z * speed };
+      if (dir.lengthSq() > 0 && !Number.isFinite(target.x + target.y + target.z)) {
+        console.warn('[Player] non-finite velocity target', target);
+      }
+
+      if (specterRef.current) {
+        // Specter mode: no gravity, so drive vertical directly with the arrows
+        // (up/down). No key held → 0 → hover in place.
+        const upDir = (key.current['ArrowUp'] ? 1 : 0) - (key.current['ArrowDown'] ? 1 : 0);
+        target.y = upDir * speed;
+      }
+
+      rb.setLinvel(target, true);
+    }
+
+    // Camera at eye height above feet — always, so the spawn view is correct on
+    // load (otherwise the camera sits at the default canvas position staring at
+    // the floor until the first click engages pointer lock).
+    const p = rb.translation();
+    const feetY = p.y - (halfHeight + radius);
+    camera.position.set(p.x, feetY + eyeHeight, p.z);
+  });
+
+  return null;
+}

package/engine/src/components/controls/TouchLookController.tsx

@@ -0,0 +1,93 @@
+// components/controls/TouchLookController.tsx
+'use client';
+import { useEffect, useMemo, useRef } from 'react';
+import { useThree } from '@react-three/fiber';
+import * as THREE from 'three';
+import { usePointerLock } from '@/providers/pointerLock';
+
+export default function TouchLookController({
+  enabled = true,
+  sensitivity = 0.18, // degrees per pixel
+  maxPitch = 89,
+}: { enabled?: boolean; sensitivity?: number; maxPitch?: number }) {
+  const { camera, gl } = useThree();
+  const { isLocked } = usePointerLock();
+
+  // Only enable on touch devices
+  const isTouch = useMemo(
+    () => typeof window !== 'undefined' && matchMedia('(pointer: coarse)').matches,
+    []
+  );
+
+  const active = useRef(false);
+  const last = useRef<{ x: number; y: number } | null>(null);
+  const yawPitch = useRef({ yaw: 0, pitch: 0 });
+
+  // Keep canvas from scrolling when in play mode on touch
+  useEffect(() => {
+    if (!isTouch) return;
+    const el = gl.domElement as HTMLCanvasElement;
+    el.style.touchAction = isLocked ? 'none' : 'auto';
+    (el.style as CSSStyleDeclaration & { webkitUserSelect?: string }).webkitUserSelect = 'none';
+    return () => { el.style.touchAction = 'auto'; };
+  }, [gl, isLocked, isTouch]);
+
+  // Initialize yaw/pitch from current camera direction whenever we (re)enter play
+  useEffect(() => {
+    if (!isTouch) return;
+    const fwd = new THREE.Vector3(); camera.getWorldDirection(fwd);
+    yawPitch.current.yaw = Math.atan2(fwd.x, fwd.z);
+    yawPitch.current.pitch = Math.asin(THREE.MathUtils.clamp(fwd.y, -1, 1));
+  }, [camera, isTouch, isLocked]);
+
+  useEffect(() => {
+    if (!enabled || !isTouch) return;
+    const el = gl.domElement as HTMLCanvasElement;
+
+    const onStart = (e: TouchEvent) => {
+      if (!isLocked) return;
+      const t = e.touches[0]; if (!t) return;
+      active.current = true;
+      last.current = { x: t.clientX, y: t.clientY };
+      e.preventDefault();
+    };
+    const onMove = (e: TouchEvent) => {
+      if (!isLocked || !active.current) return;
+      const t = e.touches[0]; if (!t || !last.current) return;
+      const dx = t.clientX - last.current.x;
+      const dy = t.clientY - last.current.y;
+      last.current = { x: t.clientX, y: t.clientY };
+
+      const S = (sensitivity * Math.PI) / 180; // to radians
+      const yp = yawPitch.current;
+      yp.yaw   -= dx * S; // typical FPS invert X
+      yp.pitch -= dy * S;
+
+      const max = (maxPitch * Math.PI) / 180;
+      yp.pitch = THREE.MathUtils.clamp(yp.pitch, -max, max);
+
+      // apply to camera
+      const c = Math.cos(yp.pitch), s = Math.sin(yp.pitch);
+      const dir = new THREE.Vector3(Math.sin(yp.yaw) * c, s, Math.cos(yp.yaw) * c);
+      const pos = camera.position.clone();
+      camera.lookAt(pos.clone().add(dir));
+
+      e.preventDefault();
+    };
+    const onEnd = () => { active.current = false; last.current = null; };
+
+    // Non-passive so preventDefault works on iOS
+    el.addEventListener('touchstart', onStart, { passive: false });
+    el.addEventListener('touchmove',  onMove,  { passive: false });
+    el.addEventListener('touchend',   onEnd,   { passive: true  });
+    el.addEventListener('touchcancel',onEnd,   { passive: true  });
+    return () => {
+      el.removeEventListener('touchstart', onStart);
+      el.removeEventListener('touchmove',  onMove);
+      el.removeEventListener('touchend',   onEnd);
+      el.removeEventListener('touchcancel',onEnd);
+    };
+  }, [gl, camera, isLocked, enabled, isTouch, sensitivity, maxPitch]);
+
+  return null;
+}

package/engine/src/components/controls/VirtualStick.tsx

@@ -0,0 +1,153 @@
+// VirtualStick.tsx
+'use client';
+import { useEffect, useRef, useState } from 'react';
+
+export type StickVec = { x: number; y: number };
+
+export default function VirtualStick({
+  onChange,
+  radius = 60,       // visual radius in px
+  dead = 0.08,       // deadzone in [0..1] of full travel
+  curve = 1.0,       // 1 = linear; >1 = softer near center
+}: {
+  onChange: (v: StickVec) => void;
+  radius?: number;
+  dead?: number;
+  curve?: number;
+}) {
+  const ref = useRef<HTMLDivElement | null>(null);
+  const [drag, setDrag] = useState(false);
+  const [knob, setKnob] = useState<{ x: number; y: number }>({ x: 0, y: 0 });
+  const touchIdRef = useRef<number | null>(null);
+  const centerRef = useRef<{ cx: number; cy: number }>({ cx: 0, cy: 0 });
+
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+
+    const rect = () => el.getBoundingClientRect();
+
+    const findTouch = (e: TouchEvent) => {
+      if (touchIdRef.current == null) return e.touches[0] || null;
+      for (let i = 0; i < e.touches.length; i++) {
+        if (e.touches[i].identifier === touchIdRef.current) return e.touches[i];
+      }
+      return null;
+    };
+
+    const start = (e: TouchEvent) => {
+      // lock the first touch to this stick
+      const t = e.touches[0];
+      if (!t) return;
+      touchIdRef.current = t.identifier;
+      setDrag(true);
+
+      const r = rect();
+      centerRef.current.cx = r.left + r.width / 2;
+      centerRef.current.cy = r.top + r.height / 2;
+
+      move(e); // emit initial value
+      e.preventDefault();
+    };
+
+    const move = (e: TouchEvent) => {
+      if (!drag) return;
+      const t = findTouch(e);
+      if (!t) return;
+
+      const { cx, cy } = centerRef.current;
+      const dx = t.clientX - cx;
+      const dy = t.clientY - cy;
+
+      // magnitude in pixels
+      const len = Math.hypot(dx, dy);
+      // direction (normalized)
+      const nx = len > 0 ? dx / len : 0;
+      const ny = len > 0 ? dy / len : 0;
+
+      // clamp magnitude to radius
+      const m = Math.min(1, len / radius);
+
+      // apply deadzone + optional response curve
+      const mAdj = m < dead ? 0 : Math.pow((m - dead) / (1 - dead), curve);
+
+      const x = nx * mAdj;     // [-1..1]
+      const y = ny * mAdj;     // [-1..1], NOTE: up = negative y
+
+      setKnob({ x: nx * Math.min(1, len / radius), y: ny * Math.min(1, len / radius) });
+      onChange({ x, y });
+
+      e.preventDefault();
+    };
+
+    const end = (e: TouchEvent) => {
+      if (touchIdRef.current == null) return;
+      // If our finger lifted, reset
+      let stillDown = false;
+      for (let i = 0; i < e.touches.length; i++) {
+        if (e.touches[i].identifier === touchIdRef.current) {
+          stillDown = true;
+          break;
+        }
+      }
+      if (!stillDown) {
+        touchIdRef.current = null;
+        setDrag(false);
+        setKnob({ x: 0, y: 0 });
+        onChange({ x: 0, y: 0 });
+      }
+    };
+
+    // non-passive so preventDefault works on iOS
+    el.addEventListener('touchstart', start, { passive: false });
+    window.addEventListener('touchmove', move, { passive: false });
+    window.addEventListener('touchend', end, { passive: false });
+    window.addEventListener('touchcancel', end, { passive: false });
+
+    return () => {
+      el.removeEventListener('touchstart', start);
+      window.removeEventListener('touchmove', move);
+      window.removeEventListener('touchend', end);
+      window.removeEventListener('touchcancel', end);
+    };
+  }, [onChange, radius, dead, curve, drag]);
+
+  const size = radius * 2;
+  const knobPxX = knob.x * radius;
+  const knobPxY = knob.y * radius;
+
+  return (
+    <div
+      ref={ref}
+      className="absolute bottom-6 left-6 z-10"
+      style={{
+        width: size,
+        height: size,
+        borderRadius: '9999px',
+        background: 'rgba(255,255,255,0.06)',
+        border: '1px solid rgba(255,255,255,0.12)',
+        touchAction: 'none',              // disable scroll while interacting
+        WebkitUserSelect: 'none',
+        userSelect: 'none',
+      }}
+    >
+      {/* knob */}
+      <div
+        style={{
+          position: 'absolute',
+          left: '50%',
+          top: '50%',
+          width: radius * 0.9,
+          height: radius * 0.9,
+          borderRadius: '9999px',
+          transform: `translate(${knobPxX - (radius * 0.45)}px, ${knobPxY - (radius * 0.45)}px)`,
+          background: 'rgba(255,255,255,0.18)',
+          border: '1px solid rgba(255,255,255,0.22)',
+          boxShadow: '0 2px 8px rgba(0,0,0,0.35)',
+          transition: drag ? 'none' : 'transform 120ms ease-out',
+          pointerEvents: 'none',
+        }}
+      />
+    </div>
+  );
+}

package/engine/src/components/edit/EditCapture.tsx

@@ -0,0 +1,182 @@
+'use client';
+
+// Lives INSIDE the r3f Canvas (next to PlayerController) so it can read the camera
+// and the Rapier collider. In edit mode it (1) feeds live pos+yaw+floor-snap to
+// the provider every frame, and (2) turns keypresses into edits that persist to
+// room.json through the provider's writer:
+//
+//   C  floor-snapped spawn — add an entryway, or reposition the selected
+//      entryway/exit (feet-on-floor, valid however high you're flying).
+//   B  "beam": raycast from the camera — add an artifact at the hit point, or
+//      reposition the selected artifact (walls/ceilings included). Cast against
+//      the Rapier collider since a splat cloud isn't raycastable.
+//   F  select the marker you're looking at (nearest within the gaze cone).
+//   Delete / Backspace  remove the selected marker.
+//   Esc-like X  clear the selection.
+//   Z  toggle specter (noclip + fly).
+//
+// The orbs you see are rendered by <Markers>; this component only captures input.
+
+import { useEffect } from 'react';
+import { useFrame, useThree } from '@react-three/fiber';
+import * as THREE from 'three';
+import { useRapierWorld } from '@/physics';
+import { useEdit, type MarkerKind, type Selection } from '@/providers/edit';
+import { CONFIG as UNIVERSE_CONFIG } from '@/data/universeconfig';
+import type { Vec3 } from '@/data/room';
+
+const f2 = (n: number) => Number(n.toFixed(2));
+// Body-center height above the feet (so a copied spawn lands feet-on-floor).
+const STAND = UNIVERSE_CONFIG.PLAYER.HALF_HEIGHT + UNIVERSE_CONFIG.PLAYER.RADIUS;
+const GAZE_DOT = Math.cos((25 * Math.PI) / 180); // select markers within ~25°
+
+export default function EditCapture() {
+  const { camera } = useThree();
+  const { world, rapier, playerBody } = useRapierWorld();
+  const {
+    editMode, liveRef, setLastCopied, toggleSpecter, specterRef,
+    draft, selected, setSelected,
+    addEntryway, addArtifact, updateEntryway, updateExit, updateArtifact, removeMarker,
+  } = useEdit();
+
+  // Feed live values (incl. floor-snap) to the provider/HUD every frame.
+  useFrame(() => {
+    if (!editMode) return;
+    const fwd = new THREE.Vector3();
+    camera.getWorldDirection(fwd).normalize();
+    const yaw = (Math.atan2(fwd.x, fwd.z) * 180) / Math.PI;
+    const pitch = (Math.asin(THREE.MathUtils.clamp(fwd.y, -1, 1)) * 180) / Math.PI;
+    if (playerBody) {
+      const p = playerBody.translation();
+      let floorPos: Vec3 | null = null;
+      if (world && rapier) {
+        const down = new rapier.Ray({ x: p.x, y: p.y, z: p.z }, { x: 0, y: -1, z: 0 });
+        const hit = world.castRay(down, 1000, true, undefined, undefined, undefined, playerBody ?? undefined);
+        if (hit) floorPos = [f2(p.x), f2(p.y - hit.toi + STAND), f2(p.z)];
+      }
+      liveRef.current = { ...liveRef.current, pos: [p.x, p.y, p.z], yaw, pitch, hasBody: true, floorPos };
+    } else {
+      liveRef.current = { ...liveRef.current, yaw, pitch, hasBody: false };
+    }
+  });
+
+  // Marking + selection keys.
+  useEffect(() => {
+    if (!editMode) return;
+
+    // Floor-snapped standing spot directly below the player (valid at any fly
+    // height), with the facing yaw. Null if there's no floor beneath.
+    const floorSpot = (): { pos: Vec3; yaw: number } | null => {
+      if (!playerBody) return null;
+      const p = playerBody.translation();
+      const fwd = new THREE.Vector3();
+      camera.getWorldDirection(fwd).normalize();
+      const yaw = f2((Math.atan2(fwd.x, fwd.z) * 180) / Math.PI);
+      let y = p.y;
+      if (world && rapier) {
+        const down = new rapier.Ray({ x: p.x, y: p.y, z: p.z }, { x: 0, y: -1, z: 0 });
+        const hit = world.castRay(down, 1000, true, undefined, undefined, undefined, playerBody ?? undefined);
+        if (hit) y = p.y - hit.toi + STAND;
+        else return null;
+      }
+      return { pos: [f2(p.x), f2(y), f2(p.z)], yaw };
+    };
+
+    // Point the camera is looking at, against the collider (for artifacts).
+    const beamSpot = (): Vec3 | null => {
+      if (!world || !rapier) return null;
+      const origin = camera.getWorldPosition(new THREE.Vector3());
+      const dir = camera.getWorldDirection(new THREE.Vector3()).normalize();
+      const ray = new rapier.Ray(
+        { x: origin.x, y: origin.y, z: origin.z },
+        { x: dir.x, y: dir.y, z: dir.z },
+      );
+      const hit = world.castRay(ray, 100, true, undefined, undefined, undefined, playerBody ?? undefined);
+      if (!hit) return null;
+      return [f2(origin.x + dir.x * hit.toi), f2(origin.y + dir.y * hit.toi), f2(origin.z + dir.z * hit.toi)];
+    };
+
+    // Pick the marker nearest the crosshair within the gaze cone. The pick lives
+    // in its own function with an explicit return type so `best` isn't narrowed to
+    // null (it's only ever reassigned inside the nested scan closure).
+    const gazePick = () => {
+      if (!draft) return;
+      const eye = camera.getWorldPosition(new THREE.Vector3());
+      const fwd = camera.getWorldDirection(new THREE.Vector3()).normalize();
+      const findBest = (): Selection => {
+        let best: Selection = null;
+        let bestDot = GAZE_DOT;
+        const scan = (kind: MarkerKind, list: { pos: Vec3 }[]) => {
+          list.forEach((m, i) => {
+            const dx = m.pos[0] - eye.x, dy = m.pos[1] - eye.y, dz = m.pos[2] - eye.z;
+            const len = Math.hypot(dx, dy, dz) || 1;
+            const dot = (dx / len) * fwd.x + (dy / len) * fwd.y + (dz / len) * fwd.z;
+            if (dot > bestDot) { bestDot = dot; best = { kind, index: i }; }
+          });
+        };
+        scan('entryway', draft.entryways);
+        scan('exit', draft.exits);
+        scan('artifact', draft.artifacts);
+        return best;
+      };
+      const best = findBest();
+      setSelected(best);
+      setLastCopied(best ? `selected ${best.kind} #${best.index + 1}` : 'nothing under crosshair');
+    };
+
+    const onKey = (e: KeyboardEvent) => {
+      // Ignore marking keys while typing into the editor panel's fields.
+      const el = document.activeElement as HTMLElement | null;
+      if (el && (el.tagName === 'INPUT' || el.tagName === 'TEXTAREA' || el.tagName === 'SELECT' || el.isContentEditable)) {
+        return;
+      }
+      if (e.code === 'KeyC') {
+        const s = floorSpot();
+        if (!s) { setLastCopied('no floor below — can’t place'); return; }
+        if (selected?.kind === 'entryway') {
+          updateEntryway(selected.index, { pos: s.pos, yaw: s.yaw });
+          setLastCopied(`moved entryway #${selected.index + 1}`);
+        } else if (selected?.kind === 'exit') {
+          updateExit(selected.index, { pos: s.pos });
+          setLastCopied(`moved exit #${selected.index + 1}`);
+        } else {
+          addEntryway(s.pos, s.yaw);
+          setLastCopied('added entryway');
+        }
+      } else if (e.code === 'KeyB') {
+        const p = beamSpot();
+        if (!p) { setLastCopied('beam: nothing in view'); return; }
+        if (selected?.kind === 'artifact') {
+          updateArtifact(selected.index, { pos: p });
+          setLastCopied(`moved artifact #${selected.index + 1}`);
+        } else {
+          addArtifact(p);
+          setLastCopied('added artifact — set its URL in the panel');
+        }
+        liveRef.current = { ...liveRef.current, lastBeam: p };
+      } else if (e.code === 'KeyF') {
+        gazePick();
+      } else if (e.code === 'Delete' || e.code === 'Backspace') {
+        if (selected) {
+          removeMarker(selected.kind, selected.index);
+          setLastCopied(`deleted ${selected.kind}`);
+        }
+      } else if (e.code === 'KeyX') {
+        setSelected(null);
+        setLastCopied('cleared selection');
+      } else if (e.code === 'KeyZ') {
+        toggleSpecter();
+        setLastCopied(`specter fly: ${specterRef.current ? 'ON (↑/↓)' : 'OFF'}`);
+      }
+    };
+
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, [
+    editMode, camera, world, rapier, playerBody, liveRef, setLastCopied, toggleSpecter, specterRef,
+    draft, selected, setSelected,
+    addEntryway, addArtifact, updateEntryway, updateExit, updateArtifact, removeMarker,
+  ]);
+
+  return null;
+}