@pascal-app/viewer 1.0.6 → 1.0.7

package/dist/components/viewer/daylight-atmosphere.d.ts

@@ -0,0 +1,9 @@
+/**
+ * The colored appearance's built-in sun and sky: real sun position for the site (or a fallback
+ * location), a time-of-day preset and a weather preset. One shadowed key (the sun, or a cool moon
+ * at night), the sky as a PMREM environment, metered exposure and eye-like white balance.
+ * Installed through the generic `SceneAtmosphere` seam, so a plugin atmosphere mounted later
+ * still takes precedence.
+ */
+export declare function DaylightAtmosphere(): import("react").JSX.Element;
+//# sourceMappingURL=daylight-atmosphere.d.ts.map

package/dist/components/viewer/daylight-atmosphere.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"daylight-atmosphere.d.ts","sourceRoot":"","sources":["../../../src/components/viewer/daylight-atmosphere.tsx"],"names":[],"mappings":"AAgFA;;;;;;GAMG;AACH,wBAAgB,kBAAkB,gCAySjC"}

package/dist/components/viewer/daylight-atmosphere.js

@@ -0,0 +1,315 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useInteractive, useScene } from '@pascal-app/core';
+import { useFrame, useThree } from '@react-three/fiber';
+import { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { BackSide, Color, MathUtils, Mesh, Scene, SphereGeometry, Vector3 } from 'three';
+import { pmremTexture, positionWorldDirection, vec3 } from 'three/tsl';
+import { MeshBasicNodeMaterial, PMREMGenerator, } from 'three/webgpu';
+import { resolveLocation } from '../../lib/daylight/location';
+import { installDaylightMaterialHooks } from '../../lib/daylight/material-hooks';
+import { restoreLampEmitters } from '../../lib/daylight/room-scene';
+import { daylightRooms } from '../../lib/daylight/rooms';
+import { daylightUniforms, setDaylightRenderer } from '../../lib/daylight/runtime';
+import { createDaylightSky, WEATHER_COVER } from '../../lib/daylight/sky';
+import { presetInstant, solarClockInstant, solarLight, } from '../../lib/daylight/solar';
+import useViewer, {} from '../../store/use-viewer';
+import { SceneAtmosphere } from './scene-atmosphere';
+import { useDaylightRooms } from './use-daylight-rooms';
+/** Irradiance that renders at exposure 1 (≈ a clear afternoon exterior). */
+const METER_REF = 3.2;
+/** Image-based lighting gain on the sky environment. */
+const ENV_INTENSITY = 1.15;
+const MOON_COLOR = new Color('#9fb4ff');
+/** Ground fog range (m), capped by the camera's far plane (the grounds add a horizon haze). */
+const FOG_START = 250;
+const FOG_END = 2600;
+/** Eye-like chromatic adaptation strength (0 = off, 1 = full neutralisation). */
+const WHITE_BALANCE = 0.75;
+/**
+ * How much of its extra exposure lamp light seen from outside gives back, relative to the rooms'
+ * indoor exposure (0 none … 1 all; a little is kept, so lit windows still read as glowing).
+ */
+const LAMP_VIEW_COMP = 0.8;
+/** Maximum metered exposure boost with the camera inside a room. */
+const INTERIOR_EV = 2.4;
+/**
+ * Indoors the eye opens up a little past the meter's partial adaptation (EV): rooms read airy
+ * rather than dim, by day and by lamplight alike.
+ */
+const INTERIOR_BIAS_EV = 0.35;
+/** Sun shadow map per quality tier. */
+const SHADOW_MAP = { high: 4096, medium: 2048, low: 1024 };
+/** EON rough diffuse per quality tier. */
+const EON = { high: 0.6, medium: 0.6, low: 0 };
+const luminance = (c) => 0.2126 * c.r + 0.7152 * c.g + 0.0722 * c.b;
+/** Cosine-weighted hemisphere probes for the sky irradiance colour. */
+const HEMISPHERE = [
+    new Vector3(0, 1, 0),
+    ...Array.from({ length: 6 }, (_, i) => new Vector3(Math.cos((i * Math.PI) / 3), 0.6, Math.sin((i * Math.PI) / 3)).normalize()),
+    ...Array.from({ length: 6 }, (_, i) => new Vector3(Math.cos((i * Math.PI) / 3 + 0.5), 0.15, Math.sin((i * Math.PI) / 3 + 0.5)).normalize()),
+];
+const UP = new Vector3(0, 1, 0);
+/**
+ * The colored appearance's built-in sun and sky: real sun position for the site (or a fallback
+ * location), a time-of-day preset and a weather preset. One shadowed key (the sun, or a cool moon
+ * at night), the sky as a PMREM environment, metered exposure and eye-like white balance.
+ * Installed through the generic `SceneAtmosphere` seam, so a plugin atmosphere mounted later
+ * still takes precedence.
+ */
+export function DaylightAtmosphere() {
+    const renderer = useThree((s) => s.gl);
+    const timeOfDay = useViewer((s) => s.timeOfDay);
+    const timeOfDayMinutes = useViewer((s) => s.timeOfDayMinutes);
+    const skyLive = useViewer((s) => s.skyLive);
+    const weather = useViewer((s) => s.weather);
+    const deviceLocation = useViewer((s) => s.deviceLocation);
+    const transparent = useViewer((s) => s.transparentBackground);
+    const quality = useViewer((s) => s.renderQuality);
+    const site = useScene((state) => {
+        for (const id of state.rootNodeIds) {
+            const node = state.nodes[id];
+            if (node?.type === 'site')
+                return node;
+        }
+        return undefined;
+    });
+    const sky = useMemo(() => createDaylightSky(), []);
+    // The environment: a PMREM of the visible sky (clouds and aureole, no sun disc — the key light
+    // is the sun), re-captured into the same target when the sun or the weather changes, so the
+    // environment node installed once stays valid.
+    const environment = useMemo(() => {
+        const scene = new Scene();
+        const material = new MeshBasicNodeMaterial({ side: BackSide, depthWrite: false });
+        material.colorNode = sky.skyRadiance(positionWorldDirection, { disc: false });
+        // Radiance, not an unlit surface: it keeps the exposure (see the material hooks).
+        material.userData.daylightSky = true;
+        const dome = new Mesh(new SphereGeometry(10, 48, 24), material);
+        scene.add(dome);
+        // The viewer mounts its scene once the GPU renderer is initialized; anything else (a test
+        // double) renders without the sky environment.
+        const ready = renderer.hasInitialized?.() === true;
+        if (!ready)
+            return { dome, pmrem: null, target: null, capture: () => { } };
+        const pmrem = new PMREMGenerator(renderer);
+        const capture = (into) => pmrem.fromScene(scene, 0, 0.1, 100, {
+            size: 256,
+            renderTarget: into,
+        });
+        const target = capture(null);
+        return { dome, pmrem, target, capture: () => capture(target) };
+    }, [renderer, sky]);
+    const source = useMemo(() => ({
+        skyRadiance: (dir) => sky.skyRadiance(dir),
+        reflectionRadiance: (dir) => sky.skyRadiance(dir, { disc: false }).mul(ENV_INTENSITY),
+        // Just above the horizon in the view's heading: what the ground fog and the backdrop meet at.
+        fogRadiance: (dir) => sky.horizonRadiance(vec3(dir.x, 0.004, dir.z)),
+        environmentNode: (environment.target
+            ? pmremTexture(environment.target.texture).mul(ENV_INTENSITY)
+            : vec3(0)),
+        sunDirection: new Vector3(0, 1, 0),
+        sunColor: new Color(1, 1, 1),
+        sunIntensity: 3,
+        moonDirection: new Vector3(0, 1, 0),
+        moonColor: MOON_COLOR.clone(),
+        moonIntensity: 0,
+        skyColor: new Color(1, 1, 1),
+        groundColor: new Color(0.5, 0.5, 0.5),
+        hemisphereIntensity: 0,
+        ambientIntensity: 0,
+        exposure: 1,
+        fogStart: FOG_START,
+        fogEnd: FOG_END,
+        whiteBalance: new Vector3(1, 1, 1),
+        shadow: { mapSize: SHADOW_MAP.high, bias: -0.0002, normalBias: 0.035, radius: 2 },
+        elevation: 45,
+    }), [environment, sky]);
+    const solar = useRef(null);
+    const meter = useRef({ ev: 0, keyE: 0, night: 0, skyLum: 0, outdoor: new Color(1, 1, 1) });
+    const wbTarget = useMemo(() => new Vector3(1, 1, 1), []);
+    useDaylightRooms();
+    // Materials attach their daylight hooks for this renderer only (thumbnail canvases elsewhere
+    // keep their plain look); the uniforms go back to neutral when the look leaves.
+    useLayoutEffect(() => {
+        installDaylightMaterialHooks();
+        setDaylightRenderer(renderer, true);
+        daylightUniforms.albedoClamp.value = 1;
+        return () => {
+            restoreLampEmitters();
+            setDaylightRenderer(renderer, false);
+            daylightUniforms.albedoClamp.value = 0;
+            daylightUniforms.eon.value = 0;
+            daylightUniforms.lampLevel.value = 0;
+            daylightUniforms.glowComp.value = 1;
+            daylightUniforms.emitterExpInv.value = 1;
+            daylightRooms.lampView.value = 1;
+        };
+    }, [renderer]);
+    useEffect(() => {
+        daylightUniforms.eon.value = EON[quality];
+        source.shadow.mapSize = SHADOW_MAP[quality];
+        // The Low tier drops the soft room map (openings) and the sky patch.
+        daylightRooms.softRooms.value = quality === 'low' ? 0 : 1;
+        daylightRooms.skyPatch.value = quality === 'low' ? 0 : 3;
+        daylightRooms.refresh();
+    }, [quality, source]);
+    // The live sky moves on with the clock, a minute at a time.
+    const [clockTick, setClockTick] = useState(0);
+    useEffect(() => {
+        if (!skyLive || transparent)
+            return;
+        const timer = setInterval(() => setClockTick((tick) => tick + 1), 60_000);
+        return () => clearInterval(timer);
+    }, [skyLive, transparent]);
+    // Lamp switches follow the sun only when it crosses into or out of the evening, so the
+    // person's own switches survive weather changes and the live clock's ticks.
+    const lampsLit = useRef(null);
+    // Sun, sky and lights follow the time of day: the live clock, an exact time, or a preset
+    // (pinned to a neutral fair midday for transparent captures).
+    // biome-ignore lint/correctness/useExhaustiveDependencies: clockTick re-runs the live sky.
+    useEffect(() => {
+        const cover = transparent ? WEATHER_COVER.fair : WEATHER_COVER[weather];
+        const { location } = resolveLocation(site, deviceLocation);
+        const today = new Date();
+        const when = transparent
+            ? presetInstant(today, location.lat, location.lng, 'midday')
+            : skyLive
+                ? today
+                : timeOfDayMinutes !== null
+                    ? solarClockInstant(today, location.lng, timeOfDayMinutes)
+                    : presetInstant(today, location.lat, location.lng, timeOfDay);
+        const sun = solarLight(when, location.lat, location.lng, site?.northRotation ?? 0, solar.current ?? undefined);
+        solar.current = sun;
+        sky.update(sun, cover);
+        source.elevation = sun.elevation;
+        // One key light: the sun, or below 1° a cool, dim moon high on the other side of the sky.
+        // Clouds dim the sun statistically (no cloud shadows) and soften its shadows.
+        if (sun.elevation < 1) {
+            source.sunDirection
+                .set(-sun.direction.x, Math.max(0.5, Math.abs(sun.direction.y)), -sun.direction.z)
+                .normalize();
+            source.sunColor.copy(MOON_COLOR);
+            source.sunIntensity = 0.18 * sun.night;
+        }
+        else {
+            source.sunDirection.copy(sun.direction);
+            source.sunColor.copy(sun.color);
+            source.sunIntensity = 3.4 * sun.strength * (1 - 0.5 * cover ** 1.6);
+        }
+        source.moonIntensity = 0;
+        source.shadow.radius = 1.6 + 2.2 * (1 - MathUtils.smoothstep(sun.elevation, 2, 30)) + cover * 3;
+        meter.current.keyE = source.sunIntensity * Math.max(0.15, sun.direction.y);
+        meter.current.night = sun.night;
+        // The outdoor illuminant (sky irradiance + the key light), for the white balance.
+        const skyIrr = new Color(0, 0, 0);
+        let weight = 0;
+        for (const d of HEMISPHERE) {
+            skyIrr.add(sky.radianceCpu(d).multiplyScalar(d.y));
+            weight += d.y;
+        }
+        skyIrr.multiplyScalar((Math.PI / weight) * ENV_INTENSITY);
+        source.skyColor.copy(skyIrr).multiplyScalar(1 / Math.PI);
+        meter.current.skyLum = luminance(skyIrr);
+        meter.current.outdoor
+            .copy(skyIrr)
+            .add(source.sunColor.clone().multiplyScalar(meter.current.keyE));
+        // Windows let this sky (and sun) into the rooms.
+        daylightRooms.updateSky((dir) => sky.radianceCpu(dir).multiplyScalar(ENV_INTENSITY), sun.direction, sun.color, source.sunIntensity);
+        // Lamps follow the light: a smooth level for the room lamps, on/off for the lamp switches.
+        daylightUniforms.lampLevel.value = 1 - MathUtils.smoothstep(sun.elevation, -5, 6);
+        // Blue hour and night (the presets aim at −4° and −14°; golden hour at +6° stays unlit).
+        const lit = sun.elevation < -2;
+        if (lit !== lampsLit.current) {
+            lampsLit.current = lit;
+            useInteractive.getState().setLampDefault(lit, true);
+        }
+        // Re-capture the sky environment.
+        environment.capture();
+    }, [
+        clockTick,
+        deviceLocation,
+        environment,
+        site,
+        skyLive,
+        sky,
+        source,
+        timeOfDay,
+        timeOfDayMinutes,
+        transparent,
+        weather,
+    ]);
+    // Lamps loaded after the preset applied (items mount late, and an authored "on" default would
+    // light them by day) join the time of day; the person's own switches are left alone after.
+    useEffect(() => {
+        const known = new Set(Object.keys(useInteractive.getState().lampItems));
+        return useInteractive.subscribe((state) => {
+            // A lamp that leaves (its item unmounts) is new again when it comes back.
+            for (const id of known)
+                if (!(id in state.lampItems))
+                    known.delete(id);
+            for (const [id, indices] of Object.entries(state.lampItems)) {
+                if (known.has(id))
+                    continue;
+                known.add(id);
+                for (const index of indices) {
+                    if (state.items[id]?.controlValues[index] !== state.lampDefault)
+                        state.setControlValue(id, index, state.lampDefault);
+                }
+            }
+        });
+    }, []);
+    useEffect(() => () => {
+        environment.target?.dispose();
+        environment.pmrem?.dispose();
+        environment.dome.geometry.dispose();
+        environment.dome.material.dispose();
+    }, [environment]);
+    useFrame(({ camera }, delta) => {
+        const dt = Math.min(delta, 0.1);
+        // The ground must be fully fogged before the far plane clips it (no hard horizon line).
+        source.fogEnd = Math.min(FOG_END, camera.far * 0.9);
+        source.fogStart = Math.min(FOG_START, source.fogEnd * 0.1);
+        sky.cloudTime.value += dt;
+        // Metered exposure: the irradiance where the camera stands — outside: sun + sky; inside a
+        // room: its windows + bounce + lamps — exposed towards mid-grey with partial adaptation (dark
+        // scenes stay a bit dark), up to +2 EV indoors.
+        const { room, inside } = daylightRooms.isEnclosedAt(camera.position);
+        daylightUniforms.cameraOutside.value = inside ? 0 : 1;
+        const skyE = Math.PI * 0.45 * luminance(sky.radianceCpu(UP)) * ENV_INTENSITY;
+        // Outside, the lit rooms in view count too: a cutaway of lamplit rooms exposes for them.
+        const viewed = inside
+            ? { sceneE: daylightRooms.meter(room, skyE), roomsE: 0, illuminant: null }
+            : daylightRooms.viewedMeter(camera, meter.current.keyE + skyE, skyE, meter.current.outdoor, meter.current.skyLum);
+        const meterEV = (E, max, bias = 0) => MathUtils.clamp(Math.log2(METER_REF / Math.max(E, 1e-4)) * 0.6 + bias, -0.5, max);
+        const indoorEV = (E) => meterEV(E, INTERIOR_EV, INTERIOR_BIAS_EV);
+        const target = inside ? indoorEV(viewed.sceneE) : meterEV(viewed.sceneE, 2.2);
+        meter.current.ev += (target - meter.current.ev) * Math.min(1, dt * 3);
+        source.exposure = 2 ** meter.current.ev;
+        // Glows (window panes, lamp shades) stay out of the night exposure lift.
+        daylightUniforms.glowComp.value = 1 / 2 ** Math.max(0, meter.current.ev - 0.5);
+        daylightUniforms.emitterExpInv.value = 1 / source.exposure;
+        // Lamp light seen from outside gives back most of the exposure it gets above what those rooms
+        // meter at from inside (back to 1 indoors), so lit rooms look from out there as they do in them.
+        const lampView = inside || viewed.roomsE <= 0
+            ? 1
+            : 2 ** (-LAMP_VIEW_COMP * Math.max(0, meter.current.ev - indoorEV(viewed.roomsE)));
+        const shown = daylightRooms.lampView.value;
+        daylightRooms.lampView.value = shown + (lampView - shown) * Math.min(1, dt * 3);
+        // Eye-like chromatic adaptation (von Kries): divide out the illuminant where the camera is,
+        // partially (golden hour and lamplight keep some warmth), luminance-preserving; a bit less
+        // at night (moonlight stays blue-ish).
+        // Outside, the eye adapts towards the lit rooms in view too (by their pull on the meter).
+        const illum = (inside
+            ? daylightRooms.roomIlluminant(room, meter.current.outdoor, meter.current.skyLum)
+            : viewed.illuminant) ?? meter.current.outdoor;
+        const L = luminance(illum);
+        if (L > 1e-5) {
+            const k = WHITE_BALANCE * (1 - 0.35 * meter.current.night);
+            wbTarget.set(MathUtils.lerp(1, L / Math.max(illum.r, 1e-4), k), MathUtils.lerp(1, L / Math.max(illum.g, 1e-4), k), MathUtils.lerp(1, L / Math.max(illum.b, 1e-4), k));
+            wbTarget.clampScalar(0.5, 2);
+            wbTarget.divideScalar(0.2126 * wbTarget.x + 0.7152 * wbTarget.y + 0.0722 * wbTarget.z);
+        }
+        source.whiteBalance.lerp(wbTarget, Math.min(1, dt * 2));
+    }, -2);
+    return _jsx(SceneAtmosphere, { source: source });
+}

package/dist/components/viewer/drone-controller.d.ts

@@ -0,0 +1,15 @@
+export type DroneControllerProps = {
+    /** Freezes flight and look, e.g. while the host renders a still. */
+    paused?: boolean;
+    /** Leaves the drone: Esc, or losing the pointer lock it held. Ends the walkthrough by default. */
+    onExit?: () => void;
+};
+/**
+ * The free-flying drone camera for any scene, parametric or baked: no gravity,
+ * floor or collision, so it needs no collider. Picks up from the current camera
+ * pose. Pointer lock drives look (click the canvas to lock); WASD / arrows move
+ * along the view, Space or E rises, Q or Ctrl sinks, Shift boosts, Alt slows,
+ * P frees the cursor (click or P resumes) and Esc leaves.
+ */
+export declare function DroneController({ paused, onExit }: DroneControllerProps): null;
+//# sourceMappingURL=drone-controller.d.ts.map

package/dist/components/viewer/drone-controller.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"drone-controller.d.ts","sourceRoot":"","sources":["../../../src/components/viewer/drone-controller.tsx"],"names":[],"mappings":"AAsCA,MAAM,MAAM,oBAAoB,GAAG;IACjC,oEAAoE;IACpE,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,kGAAkG;IAClG,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;CACpB,CAAA;AAED;;;;;;GAMG;AACH,wBAAgB,eAAe,CAAC,EAAE,MAAc,EAAE,MAAM,EAAE,EAAE,oBAAoB,QAyK/E"}

package/dist/components/viewer/drone-controller.js

@@ -0,0 +1,194 @@
+'use client';
+import { useFrame, useThree } from '@react-three/fiber';
+import { useEffect, useRef } from 'react';
+import { Vector3 } from 'three';
+import { createDroneInput, DRONE_SLOW_MULTIPLIER, droneInputForKey, readDroneInput, seedDroneLook, stepDroneFlight, turnFirstPersonLook, } from '../../lib/drone-flight';
+import useViewer from '../../store/use-viewer';
+import { WALKTHROUGH_FOV } from './glb-walkthrough-controller';
+import { applyWalkthroughCameraClipping } from './viewer-camera';
+const TYPING_TARGET = 'input, textarea, select, [contenteditable]:not([contenteditable="false"]), [role="combobox"], [role="textbox"], [role="dialog"], [role="alertdialog"]';
+function isTypingTarget(target) {
+    const element = target;
+    return !!element && (element.isContentEditable === true || !!element.closest?.(TYPING_TARGET));
+}
+function requestLock(canvas) {
+    // The request can reject asynchronously (the browser's re-lock cooldown);
+    // clicking the canvas asks again.
+    const result = canvas.requestPointerLock?.();
+    if (result && typeof result.catch === 'function')
+        result.catch(() => { });
+}
+function exitWalkthrough() {
+    useViewer.getState().setWalkthroughMode(false);
+}
+/**
+ * The free-flying drone camera for any scene, parametric or baked: no gravity,
+ * floor or collision, so it needs no collider. Picks up from the current camera
+ * pose. Pointer lock drives look (click the canvas to lock); WASD / arrows move
+ * along the view, Space or E rises, Q or Ctrl sinks, Shift boosts, Alt slows,
+ * P frees the cursor (click or P resumes) and Esc leaves.
+ */
+export function DroneController({ paused = false, onExit }) {
+    const camera = useThree((state) => state.camera);
+    const gl = useThree((state) => state.gl);
+    const lookRef = useRef({ yaw: 0, pitch: 0 });
+    const heldKeysRef = useRef(new Set());
+    const inputRef = useRef(createDroneInput());
+    const velocityRef = useRef(new Vector3());
+    const suspendRef = useRef(false);
+    const pausedRef = useRef(paused);
+    const onExitRef = useRef(onExit);
+    const entryPoseRef = useRef(null);
+    useEffect(() => {
+        pausedRef.current = paused;
+    }, [paused]);
+    useEffect(() => {
+        onExitRef.current = onExit;
+    }, [onExit]);
+    // First person needs foreshortening: fly a perspective camera, and give the
+    // projection back on exit.
+    useEffect(() => {
+        const previousMode = useViewer.getState().cameraMode;
+        if (previousMode === 'orthographic')
+            useViewer.getState().setCameraMode('perspective');
+        return () => {
+            if (previousMode === 'orthographic')
+                useViewer.getState().setCameraMode('orthographic');
+        };
+    }, []);
+    // Take off from the pose the camera had on entry. Leaving orthographic swaps
+    // in a fresh perspective camera, which inherits that pose.
+    useEffect(() => {
+        const entry = entryPoseRef.current;
+        if (!entry) {
+            entryPoseRef.current = {
+                camera,
+                position: camera.position.clone(),
+                quaternion: camera.quaternion.clone(),
+            };
+        }
+        else if (entry.camera !== camera) {
+            camera.position.copy(entry.position);
+            camera.quaternion.copy(entry.quaternion);
+            camera.updateMatrixWorld(true);
+        }
+        seedDroneLook(lookRef.current, camera.quaternion);
+        velocityRef.current.set(0, 0, 0);
+    }, [camera]);
+    useEffect(() => {
+        const perspective = camera;
+        if (!perspective.isPerspectiveCamera)
+            return;
+        const previousFov = perspective.fov;
+        perspective.fov = WALKTHROUGH_FOV;
+        perspective.updateProjectionMatrix();
+        const restoreClipping = applyWalkthroughCameraClipping(perspective);
+        return () => {
+            restoreClipping();
+            perspective.fov = previousFov;
+            perspective.updateProjectionMatrix();
+        };
+    }, [camera]);
+    useEffect(() => {
+        const canvas = gl.domElement;
+        const heldKeys = heldKeysRef.current;
+        let wasLocked = false;
+        const exit = () => (onExitRef.current ?? exitWalkthrough)();
+        // Keyboard focus may still sit on the button that started the flight, where
+        // Space would press it again.
+        const activeElement = document.activeElement;
+        if (activeElement instanceof HTMLElement && !canvas.contains(activeElement)) {
+            activeElement.blur();
+        }
+        const onMouseMove = (event) => {
+            if (document.pointerLockElement !== canvas || pausedRef.current)
+                return;
+            turnFirstPersonLook(lookRef.current, event.movementX, event.movementY, heldKeys.has('AltLeft') || heldKeys.has('AltRight') ? DRONE_SLOW_MULTIPLIER : 1);
+        };
+        const onClick = () => {
+            if (document.pointerLockElement !== canvas)
+                requestLock(canvas);
+        };
+        const onKeyDown = (event) => {
+            if (isTypingTarget(event.target))
+                return;
+            if (event.code === 'Escape') {
+                event.preventDefault();
+                event.stopPropagation();
+                exit();
+                return;
+            }
+            // P toggles a cursor pause: frees the pointer without leaving the drone —
+            // e.g. for an OS screenshot, which needs a movable cursor.
+            if (event.code === 'KeyP') {
+                event.preventDefault();
+                event.stopPropagation();
+                if (document.pointerLockElement === canvas) {
+                    suspendRef.current = true;
+                    heldKeys.clear();
+                    useViewer.getState().setWalkthroughSuspended(true);
+                    document.exitPointerLock();
+                }
+                else if (suspendRef.current) {
+                    requestLock(canvas);
+                }
+                return;
+            }
+            if (!droneInputForKey(event.code))
+                return;
+            event.preventDefault();
+            event.stopPropagation();
+            // Paused, or a system shortcut (⌘⇧4 screenshot): the drone holds still.
+            if (suspendRef.current || event.metaKey)
+                return;
+            heldKeys.add(event.code);
+        };
+        const onKeyUp = (event) => {
+            heldKeys.delete(event.code);
+        };
+        const onBlur = () => heldKeys.clear();
+        const onPointerLockChange = () => {
+            if (document.pointerLockElement === canvas) {
+                wasLocked = true;
+                suspendRef.current = false;
+                useViewer.getState().setWalkthroughSuspended(false);
+            }
+            else if (suspendRef.current) {
+                // Deliberately released (P) — keep flying once resumed.
+            }
+            else if (wasLocked) {
+                // Esc while locked: the browser releases the pointer and swallows the key.
+                exit();
+            }
+        };
+        document.addEventListener('mousemove', onMouseMove);
+        canvas.addEventListener('click', onClick);
+        document.addEventListener('keydown', onKeyDown, true);
+        document.addEventListener('keyup', onKeyUp, true);
+        window.addEventListener('blur', onBlur);
+        document.addEventListener('pointerlockchange', onPointerLockChange);
+        // The toggle that mounted the drone is a user gesture, so the lock is
+        // usually granted straight away; the canvas click covers a refusal.
+        if (document.pointerLockElement !== canvas)
+            requestLock(canvas);
+        return () => {
+            document.removeEventListener('mousemove', onMouseMove);
+            canvas.removeEventListener('click', onClick);
+            document.removeEventListener('keydown', onKeyDown, true);
+            document.removeEventListener('keyup', onKeyUp, true);
+            window.removeEventListener('blur', onBlur);
+            document.removeEventListener('pointerlockchange', onPointerLockChange);
+            heldKeys.clear();
+            useViewer.getState().setWalkthroughSuspended(false);
+            if (document.pointerLockElement === canvas)
+                document.exitPointerLock();
+        };
+    }, [gl]);
+    useFrame((_, delta) => {
+        if (pausedRef.current)
+            return;
+        readDroneInput(heldKeysRef.current, inputRef.current);
+        stepDroneFlight(camera, lookRef.current, inputRef.current, velocityRef.current, delta);
+    }, 2.5);
+    return null;
+}

package/dist/components/viewer/glb-interactive.d.ts

@@ -1,6 +1,7 @@
 import { type AnyNodeId, type Interactive, type SceneGraph } from '@pascal-app/core';
 import { type EvaluatedLight, type ProceduralItemNode } from '@pascal-app/core/procedural-items';
-import { type AnimationAction, type Object3D, Vector3 } from 'three';
+import { type AnimationAction, type Object3D } from 'three';
+import { type PooledLight } from '../../systems/item-light/pooled-lights';
 /** An interactive item recovered from the scene graph so the baked GLB can be
  *  re-lit / re-animated by joining on `pascalId`. The GLB carries the geometry
  *  + identity; the effects + controls live in the DB scene graph (no sidecar). */
@@ -21,13 +22,6 @@ export type GlbInteractiveItem = {
         recipe?: Pick<ProceduralItemNode['recipe'], 'parts' | 'joints'>;
     };
 };
-/** A baked zone's identity node + its local floor polygon (from `extras`). */
-export type GlbZoneRef = {
-    id: string;
-    node: Object3D;
-    polygon: [number, number][];
-    holes?: [number, number][][];
-};
 /** Pull the interactive items out of a scene graph. Only items that actually
  *  carry effects (light / animation) are returned — everything else baked
  *  faithfully and needs no runtime help. */
@@ -40,24 +34,16 @@ export declare function buildGlbLightRegs(items: GlbInteractiveItem[], identity:
  * baked Object3Ds (`identity`), joined on `pascalId`. Nothing is stamped into
  * the GLB itself, so the artifact stays integrator-clean.
  */
-export declare function GlbInteractive({ items, identity, zones, actions, levelOrder, }: {
+export declare function GlbInteractive({ items, identity, actions, }: {
     items: GlbInteractiveItem[];
     identity: Map<string, Object3D>;
-    zones: GlbZoneRef[];
     /** Baked animation actions keyed by clip name — ambient item loops play from
      *  `<pascalId>: loop`. */
     actions: Record<string, AnimationAction | null>;
-    /** Level pascalIds bottom-to-top, so the light pool can prefer ground-floor
-     *  lights when nothing is focused (mirrors the parametric level factor). */
-    levelOrder: string[];
 }): import("react").JSX.Element;
-export type GlbLightReg = {
-    key: string;
+export type GlbLightReg = PooledLight & {
     nodeId: AnyNodeId;
     object: Object3D;
-    color: string;
-    distance: number;
-    getWorldPosition: (out: Vector3) => void;
     getIntensity: () => number;
     isOn: () => boolean;
     levelId: string | null;

package/dist/components/viewer/glb-interactive.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"glb-interactive.d.ts","sourceRoot":"","sources":["../../../src/components/viewer/glb-interactive.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,KAAK,SAAS,EAEd,KAAK,WAAW,EAGhB,KAAK,UAAU,EAOhB,MAAM,kBAAkB,CAAA;AACzB,OAAO,EACL,KAAK,cAAc,EAEnB,KAAK,kBAAkB,EACxB,MAAM,mCAAmC,CAAA;AAI1C,OAAO,EACL,KAAK,eAAe,EAGpB,KAAK,QAAQ,EAEb,OAAO,EACR,MAAM,OAAO,CAAA;AAcd;;kFAEkF;AAClF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,QAAQ,EAAE,SAAS,CAAA;IACnB,KAAK,EAAE,MAAM,CAAA;IACb,2EAA2E;IAC3E,MAAM,EAAE,MAAM,CAAA;IACd,WAAW,EAAE,WAAW,CAAA;IACxB;mEAC+D;IAC/D,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAA;IACrC,UAAU,CAAC,EAAE;QACX,MAAM,EAAE,cAAc,EAAE,CAAA;QACxB,KAAK,EAAE,kBAAkB,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAA;QAC5C,+EAA+E;QAC/E,MAAM,CAAC,EAAE,IAAI,CAAC,kBAAkB,CAAC,QAAQ,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC,CAAA;KAChE,CAAA;CACF,CAAA;AAED,8EAA8E;AAC9E,MAAM,MAAM,UAAU,GAAG;IACvB,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,QAAQ,CAAA;IACd,OAAO,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE,CAAA;IAC3B,KAAK,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE,EAAE,CAAA;CAC7B,CAAA;AAED;;4CAE4C;AAC5C,wBAAgB,wBAAwB,CACtC,UAAU,EAAE,UAAU,GAAG,IAAI,GAAG,SAAS,GACxC,kBAAkB,EAAE,CAiEtB;AAED,wBAAgB,iBAAiB,CAC/B,KAAK,EAAE,kBAAkB,EAAE,EAC3B,QAAQ,EAAE,GAAG,CAAC,MAAM,EAAE,QAAQ,CAAC,GAC9B,WAAW,EAAE,CAiFf;AAID;;;;;;GAMG;AACH,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,QAAQ,EACR,KAAK,EACL,OAAO,EACP,UAAU,GACX,EAAE;IACD,KAAK,EAAE,kBAAkB,EAAE,CAAA;IAC3B,QAAQ,EAAE,GAAG,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAA;IAC/B,KAAK,EAAE,UAAU,EAAE,CAAA;IACnB;8BAC0B;IAC1B,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,eAAe,GAAG,IAAI,CAAC,CAAA;IAC/C;gFAC4E;IAC5E,UAAU,EAAE,MAAM,EAAE,CAAA;CACrB,+BA0FA;AA8CD,MAAM,MAAM,WAAW,GAAG;IACxB,GAAG,EAAE,MAAM,CAAA;IACX,MAAM,EAAE,SAAS,CAAA;IACjB,MAAM,EAAE,QAAQ,CAAA;IAChB,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,MAAM,CAAA;IAChB,gBAAgB,EAAE,CAAC,GAAG,EAAE,OAAO,KAAK,IAAI,CAAA;IACxC,YAAY,EAAE,MAAM,MAAM,CAAA;IAC1B,IAAI,EAAE,MAAM,OAAO,CAAA;IACnB,OAAO,EAAE,MAAM,GAAG,IAAI,CAAA;CACvB,CAAA"}
+{"version":3,"file":"glb-interactive.d.ts","sourceRoot":"","sources":["../../../src/components/viewer/glb-interactive.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,KAAK,SAAS,EACd,KAAK,WAAW,EAEhB,KAAK,UAAU,EAMhB,MAAM,kBAAkB,CAAA;AACzB,OAAO,EACL,KAAK,cAAc,EAEnB,KAAK,kBAAkB,EACxB,MAAM,mCAAmC,CAAA;AAG1C,OAAO,EACL,KAAK,eAAe,EAGpB,KAAK,QAAQ,EAGd,MAAM,OAAO,CAAA;AAWd,OAAO,EAAE,KAAK,WAAW,EAAgB,MAAM,wCAAwC,CAAA;AAEvF;;kFAEkF;AAClF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,QAAQ,EAAE,SAAS,CAAA;IACnB,KAAK,EAAE,MAAM,CAAA;IACb,2EAA2E;IAC3E,MAAM,EAAE,MAAM,CAAA;IACd,WAAW,EAAE,WAAW,CAAA;IACxB;mEAC+D;IAC/D,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAA;IACrC,UAAU,CAAC,EAAE;QACX,MAAM,EAAE,cAAc,EAAE,CAAA;QACxB,KAAK,EAAE,kBAAkB,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAA;QAC5C,+EAA+E;QAC/E,MAAM,CAAC,EAAE,IAAI,CAAC,kBAAkB,CAAC,QAAQ,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC,CAAA;KAChE,CAAA;CACF,CAAA;AAED;;4CAE4C;AAC5C,wBAAgB,wBAAwB,CACtC,UAAU,EAAE,UAAU,GAAG,IAAI,GAAG,SAAS,GACxC,kBAAkB,EAAE,CAiEtB;AAED,wBAAgB,iBAAiB,CAC/B,KAAK,EAAE,kBAAkB,EAAE,EAC3B,QAAQ,EAAE,GAAG,CAAC,MAAM,EAAE,QAAQ,CAAC,GAC9B,WAAW,EAAE,CA2Ff;AAED;;;;;;GAMG;AACH,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,QAAQ,EACR,OAAO,GACR,EAAE;IACD,KAAK,EAAE,kBAAkB,EAAE,CAAA;IAC3B,QAAQ,EAAE,GAAG,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAA;IAC/B;8BAC0B;IAC1B,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,eAAe,GAAG,IAAI,CAAC,CAAA;CAChD,+BAuDA;AAsCD,MAAM,MAAM,WAAW,GAAG,WAAW,GAAG;IACtC,MAAM,EAAE,SAAS,CAAA;IACjB,MAAM,EAAE,QAAQ,CAAA;IAChB,YAAY,EAAE,MAAM,MAAM,CAAA;IAC1B,IAAI,EAAE,MAAM,OAAO,CAAA;IACnB,OAAO,EAAE,MAAM,GAAG,IAAI,CAAA;CACvB,CAAA"}