@pascal-app/viewer 1.0.0-beta.4 → 1.0.0

package/dist/capture/trajectory.d.ts

@@ -0,0 +1,20 @@
+import { type DeviceMotionTrajectoryPayload } from '@pascal-app/core/capture';
+export type DeviceTrajectoryPose = {
+    position: [number, number, number];
+    quaternion: [number, number, number, number];
+    segment: number;
+    timestamp: number;
+};
+export type DeviceTrajectory = {
+    duration: number;
+    poses: DeviceTrajectoryPose[];
+};
+export type DeviceTrajectoryFrame = {
+    alpha: number;
+    from: DeviceTrajectoryPose;
+    to: DeviceTrajectoryPose;
+};
+export declare function parseDeviceTrajectoryPayload(trajectory: DeviceMotionTrajectoryPayload | null | undefined): DeviceTrajectory | null;
+export declare function parseDeviceTrajectoryPackets(payloads: readonly unknown[]): DeviceTrajectory | null;
+export declare function sampleDeviceTrajectory(trajectory: DeviceTrajectory, elapsed: number): DeviceTrajectoryFrame;
+//# sourceMappingURL=trajectory.d.ts.map

package/dist/capture/trajectory.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"trajectory.d.ts","sourceRoot":"","sources":["../../src/capture/trajectory.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,6BAA6B,EAEnC,MAAM,0BAA0B,CAAA;AAGjC,MAAM,MAAM,oBAAoB,GAAG;IACjC,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAA;IAClC,UAAU,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAA;IAC5C,OAAO,EAAE,MAAM,CAAA;IACf,SAAS,EAAE,MAAM,CAAA;CAClB,CAAA;AAED,MAAM,MAAM,gBAAgB,GAAG;IAC7B,QAAQ,EAAE,MAAM,CAAA;IAChB,KAAK,EAAE,oBAAoB,EAAE,CAAA;CAC9B,CAAA;AAED,MAAM,MAAM,qBAAqB,GAAG;IAClC,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,oBAAoB,CAAA;IAC1B,EAAE,EAAE,oBAAoB,CAAA;CACzB,CAAA;AAED,wBAAgB,4BAA4B,CAC1C,UAAU,EAAE,6BAA6B,GAAG,IAAI,GAAG,SAAS,GAC3D,gBAAgB,GAAG,IAAI,CAezB;AAED,wBAAgB,4BAA4B,CAC1C,QAAQ,EAAE,SAAS,OAAO,EAAE,GAC3B,gBAAgB,GAAG,IAAI,CAezB;AAED,wBAAgB,sBAAsB,CACpC,UAAU,EAAE,gBAAgB,EAC5B,OAAO,EAAE,MAAM,GACd,qBAAqB,CAqBvB"}

package/dist/capture/trajectory.js

@@ -0,0 +1,77 @@
+import { DeviceMotionSampleSchema, DeviceMotionTrajectorySchema, } from '@pascal-app/core/capture';
+import { Matrix4, Quaternion, Vector3 } from 'three';
+export function parseDeviceTrajectoryPayload(trajectory) {
+    if (!trajectory)
+        return null;
+    const parsed = DeviceMotionTrajectorySchema.safeParse(trajectory);
+    if (!parsed.success)
+        return null;
+    const poses = parsed.data.samples
+        .map(parsePose)
+        .sort((left, right) => left.timestamp - right.timestamp);
+    if (poses.length < 2)
+        return null;
+    const firstTimestamp = poses[0]?.timestamp ?? 0;
+    for (const pose of poses)
+        pose.timestamp -= firstTimestamp;
+    const duration = poses.at(-1)?.timestamp ?? 0;
+    if (!(duration > 0))
+        return null;
+    return { duration, poses };
+}
+export function parseDeviceTrajectoryPackets(payloads) {
+    let coordinateSystem = 'source';
+    let samples = [];
+    for (const payload of payloads) {
+        const trajectory = DeviceMotionTrajectorySchema.safeParse(payload);
+        if (trajectory.success) {
+            coordinateSystem = trajectory.data.coordinateSystem;
+            samples = [...trajectory.data.samples];
+            continue;
+        }
+        const sample = DeviceMotionSampleSchema.safeParse(payload);
+        if (sample.success)
+            samples.push(sample.data);
+    }
+    if (samples.length < 2)
+        return null;
+    return parseDeviceTrajectoryPayload({ coordinateSystem, samples });
+}
+export function sampleDeviceTrajectory(trajectory, elapsed) {
+    const time = positiveModulo(elapsed, trajectory.duration);
+    const poses = trajectory.poses;
+    const first = poses[0];
+    const last = poses.at(-1);
+    if (!(first && last))
+        throw new Error('Device trajectory requires at least two poses.');
+    let upperIndex = poses.findIndex((pose) => pose.timestamp > time);
+    if (upperIndex < 0)
+        upperIndex = poses.length - 1;
+    if (upperIndex === 0)
+        return { alpha: 0, from: first, to: first };
+    const from = poses[upperIndex - 1] ?? first;
+    const to = poses[upperIndex] ?? last;
+    if (from.segment !== to.segment)
+        return { alpha: 0, from, to: from };
+    const interval = to.timestamp - from.timestamp;
+    return {
+        alpha: interval > 0 ? Math.min(1, Math.max(0, (time - from.timestamp) / interval)) : 0,
+        from,
+        to,
+    };
+}
+function parsePose(value) {
+    const matrix = new Matrix4().fromArray(value.transform);
+    const position = new Vector3();
+    const quaternion = new Quaternion();
+    matrix.decompose(position, quaternion, new Vector3());
+    return {
+        position: [position.x, position.y, position.z],
+        quaternion: [quaternion.x, quaternion.y, quaternion.z, quaternion.w],
+        segment: value.segment,
+        timestamp: value.timestamp,
+    };
+}
+function positiveModulo(value, divisor) {
+    return ((value % divisor) + divisor) % divisor;
+}

package/dist/components/viewer/batched-mesh-spike.d.ts

@@ -0,0 +1,14 @@
+/**
+ * De-risk spike for item instancing (charter backlog #3a): mounts one
+ * BatchedMesh — two geometries, a few hundred instances, one material —
+ * through the real render pipeline (post-FX, shadow pass, WebGPU backend).
+ * `?spike=batch` only; never mounted in normal sessions.
+ *
+ * What it proves, read via the ?perf panel + `window.__batchSpike`:
+ * - DRAW rises by ~1 per pass, not by the instance count.
+ * - TRI drops as instances leave the frustum (perObjectFrustumCulled works).
+ * - Shadows cast/receive; no pipeline crash.
+ */
+export declare const BATCH_SPIKE_ENABLED: boolean;
+export declare const BatchedMeshSpike: () => null;
+//# sourceMappingURL=batched-mesh-spike.d.ts.map

package/dist/components/viewer/batched-mesh-spike.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"batched-mesh-spike.d.ts","sourceRoot":"","sources":["../../../src/components/viewer/batched-mesh-spike.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;GAUG;AACH,eAAO,MAAM,mBAAmB,SAEsC,CAAA;AAStE,eAAO,MAAM,gBAAgB,YAoD5B,CAAA"}

package/dist/components/viewer/batched-mesh-spike.js

@@ -0,0 +1,64 @@
+import { useThree } from '@react-three/fiber';
+import { useEffect } from 'react';
+import * as THREE from 'three';
+/**
+ * De-risk spike for item instancing (charter backlog #3a): mounts one
+ * BatchedMesh — two geometries, a few hundred instances, one material —
+ * through the real render pipeline (post-FX, shadow pass, WebGPU backend).
+ * `?spike=batch` only; never mounted in normal sessions.
+ *
+ * What it proves, read via the ?perf panel + `window.__batchSpike`:
+ * - DRAW rises by ~1 per pass, not by the instance count.
+ * - TRI drops as instances leave the frustum (perObjectFrustumCulled works).
+ * - Shadows cast/receive; no pipeline crash.
+ */
+export const BATCH_SPIKE_ENABLED = typeof window !== 'undefined' &&
+    new URLSearchParams(window.location.search).get('spike') === 'batch';
+// `?spike=batch&spikeGrid=70` → 4,900 instances; default 20×20 = 400.
+const GRID = typeof window !== 'undefined'
+    ? Math.min(120, Number(new URLSearchParams(window.location.search).get('spikeGrid')) || 20)
+    : 20;
+const SPACING = 1.2;
+export const BatchedMeshSpike = () => {
+    const scene = useThree((s) => s.scene);
+    useEffect(() => {
+        const box = new THREE.BoxGeometry(0.4, 0.4, 0.4);
+        const sphere = new THREE.SphereGeometry(0.25, 16, 12);
+        const material = new THREE.MeshStandardMaterial({ color: '#c2410c', roughness: 0.6 });
+        const maxVertices = (box.attributes.position?.count ?? 0) + (sphere.attributes.position?.count ?? 0);
+        const maxIndices = (box.index?.count ?? 0) + (sphere.index?.count ?? 0);
+        const batch = new THREE.BatchedMesh(GRID * GRID, maxVertices, maxIndices, material);
+        batch.castShadow = true;
+        batch.receiveShadow = true;
+        // Default is true — asserted explicitly because per-instance frustum
+        // culling is the property the whole plan depends on.
+        batch.perObjectFrustumCulled = true;
+        const boxGeomId = batch.addGeometry(box);
+        const sphereGeomId = batch.addGeometry(sphere);
+        const m = new THREE.Matrix4();
+        let count = 0;
+        for (let x = 0; x < GRID; x++) {
+            for (let z = 0; z < GRID; z++) {
+                const geomId = (x + z) % 2 === 0 ? boxGeomId : sphereGeomId;
+                const id = batch.addInstance(geomId);
+                m.setPosition((x - GRID / 2) * SPACING, 6 + Math.sin(x * 0.7) * 0.5 + Math.cos(z * 0.5) * 0.5, (z - GRID / 2) * SPACING);
+                batch.setMatrixAt(id, m);
+                count++;
+            }
+        }
+        scene.add(batch);
+        window.__batchSpike = {
+            instances: count,
+            geometries: 2,
+        };
+        return () => {
+            scene.remove(batch);
+            batch.dispose();
+            box.dispose();
+            sphere.dispose();
+            material.dispose();
+            delete window.__batchSpike;
+        };
+    }, [scene]);
+    return null;
+};

package/dist/components/viewer/frame-limiter.d.ts

@@ -1,6 +1,17 @@
 type FrameLimiterProps = {
     fps?: number;
+    paused?: boolean;
 };
+export type FrameClock = {
+    sample: (wallTimeMs: number, intervalMs: number) => number | null;
+    step: (seconds: number) => number;
+};
+/**
+ * Keeps R3F's manual clock monotonic while each limiter effect owns a fresh
+ * wall-time baseline. The first rAF sample establishes that baseline instead
+ * of treating the browser's process uptime as elapsed frame time.
+ */
+export declare function createFrameClock(initialTime?: number): FrameClock;
 declare const FrameLimiter: React.FC<FrameLimiterProps>;
 export default FrameLimiter;
 //# sourceMappingURL=frame-limiter.d.ts.map

package/dist/components/viewer/frame-limiter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"frame-limiter.d.ts","sourceRoot":"","sources":["../../../src/components/viewer/frame-limiter.tsx"],"names":[],"mappings":"AAIA,KAAK,iBAAiB,GAAG;IACvB,GAAG,CAAC,EAAE,MAAM,CAAA;CACb,CAAA;AAgBD,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAyE7C,CAAA;AAED,eAAe,YAAY,CAAA"}
+{"version":3,"file":"frame-limiter.d.ts","sourceRoot":"","sources":["../../../src/components/viewer/frame-limiter.tsx"],"names":[],"mappings":"AAKA,KAAK,iBAAiB,GAAG;IACvB,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB,CAAA;AAED,MAAM,MAAM,UAAU,GAAG;IACvB,MAAM,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,KAAK,MAAM,GAAG,IAAI,CAAA;IACjE,IAAI,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,MAAM,CAAA;CAClC,CAAA;AAED;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,WAAW,SAAI,GAAG,UAAU,CAwB5D;AAgBD,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAoF7C,CAAA;AAED,eAAe,YAAY,CAAA"}

package/dist/components/viewer/frame-limiter.js

@@ -1,6 +1,35 @@
 import { useThree } from '@react-three/fiber';
-import { useLayoutEffect } from 'react';
+import { useLayoutEffect, useRef } from 'react';
+import { timeSpan } from '../../lib/perf-tracks';
 import useViewer from '../../store/use-viewer';
+/**
+ * Keeps R3F's manual clock monotonic while each limiter effect owns a fresh
+ * wall-time baseline. The first rAF sample establishes that baseline instead
+ * of treating the browser's process uptime as elapsed frame time.
+ */
+export function createFrameClock(initialTime = 0) {
+    let frameTime = initialTime;
+    let previousWallTime = null;
+    return {
+        sample(wallTimeMs, intervalMs) {
+            if (previousWallTime === null) {
+                previousWallTime = wallTimeMs;
+                return null;
+            }
+            const elapsedMs = wallTimeMs - previousWallTime;
+            if (elapsedMs < intervalMs)
+                return null;
+            const remainderMs = elapsedMs % intervalMs;
+            frameTime += (elapsedMs - remainderMs) / 1000;
+            previousWallTime = wallTimeMs - remainderMs;
+            return frameTime;
+        },
+        step(seconds) {
+            frameTime += seconds;
+            return frameTime;
+        },
+    };
+}
 // `?disable=draw` (see post-processing.tsx): the page renders no real frames,
 // and Chromium's no-damage scheduler then throttles requestAnimationFrame to
 // 1Hz on Linux (measured in the headless bake worker — every useFrame system
@@ -11,23 +40,23 @@ const DRAW_DISABLED = typeof window !== 'undefined' &&
     new Set((new URLSearchParams(window.location.search).get('disable') ?? '')
         .split(',')
         .map((s) => s.trim())).has('draw');
-const FrameLimiter = ({ fps = 50 }) => {
+const FrameLimiter = ({ fps = 50, paused = false }) => {
     const { advance, set, frameloop: initFrameloop } = useThree();
+    const nextFrameTimeRef = useRef(0);
     const renderer = useThree((state) => state.gl);
     const size = useThree((state) => state.size);
     const dpr = useThree((state) => state.viewport.dpr);
     // Fully covered canvas (e.g. studio gallery) → stop advancing frames
     const renderPaused = useViewer((s) => s.renderPaused);
     useLayoutEffect(() => {
-        if (renderPaused)
+        if (renderPaused || paused)
             return;
-        let elapsed = 0;
-        let then = 0;
-        let i = 0;
+        const clock = createFrameClock(nextFrameTimeRef.current);
         let raf = null;
         let timer = null;
         let sizeSynced = false;
-        const interval = 1000 / fps;
+        const effectiveFps = Number.isFinite(fps) && fps > 0 ? fps : 50;
+        const interval = 1000 / effectiveFps;
         function syncSize() {
             if (sizeSynced)
                 return;
@@ -38,17 +67,17 @@ const FrameLimiter = ({ fps = 50 }) => {
         function tick(t) {
             raf = requestAnimationFrame(tick);
             syncSize();
-            elapsed = t - then;
-            if (elapsed > interval) {
-                advance(i);
-                i += elapsed / 1000 - (elapsed % interval) / 1000;
-                then = t - (elapsed % interval);
-            }
+            const frameTime = clock.sample(t, interval);
+            if (frameTime === null)
+                return;
+            nextFrameTimeRef.current = frameTime;
+            timeSpan('frame-cpu', () => advance(frameTime));
         }
         function kick() {
             syncSize();
-            i += 1 / 1000;
-            advance(i);
+            const frameTime = clock.step(1 / 1000);
+            nextFrameTimeRef.current = frameTime;
+            timeSpan('frame-cpu', () => advance(frameTime));
         }
         function onVisibilityChange() {
             if (document.visibilityState === 'visible')
@@ -58,8 +87,9 @@ const FrameLimiter = ({ fps = 50 }) => {
         set({ frameloop: 'never' });
         if (DRAW_DISABLED) {
             timer = setInterval(() => {
-                i += interval / 1000;
-                advance(i);
+                const frameTime = clock.step(interval / 1000);
+                nextFrameTimeRef.current = frameTime;
+                timeSpan('frame-cpu', () => advance(frameTime));
             }, interval);
         }
         else {
@@ -84,7 +114,18 @@ const FrameLimiter = ({ fps = 50 }) => {
             window.removeEventListener('pageshow', kick);
             set({ frameloop: initFrameloop });
         };
-    }, [advance, dpr, fps, initFrameloop, renderPaused, renderer, set, size.height, size.width]);
+    }, [
+        advance,
+        dpr,
+        fps,
+        initFrameloop,
+        paused,
+        renderPaused,
+        renderer,
+        set,
+        size.height,
+        size.width,
+    ]);
     return null;
 };
 export default FrameLimiter;

package/dist/components/viewer/index.d.ts

@@ -46,6 +46,19 @@ interface ViewerProps {
      * 180-frame cap in ~3.6s — shorter than a cold item-model download).
      */
     sceneReadyMaxWaitMs?: number;
+    /**
+     * Frame cap for the render loop, in frames per second. Defaults to 50, the
+     * value the viewer has always used.
+     *
+     * The viewer runs `frameloop="never"` and advances frames itself through
+     * `<FrameLimiter>`, so this cap is the only thing setting the cadence and a
+     * host cannot raise it from the outside. Hosts that animate the scene on
+     * their own clock — a timeline scrubbing node transforms, a walkthrough
+     * camera — are pinned to it and cannot reach display refresh, which reads as
+     * judder against a 60Hz+ monitor. Raise it for those; lower it to spare the
+     * GPU on a passive or background canvas.
+     */
+    maxFps?: number;
     /**
      * Skip the TSL post-processing pipeline (SSGI/denoise/ink/outline) and render
      * the scene directly. For headless/capture surfaces (the bake page) where
@@ -54,6 +67,8 @@ interface ViewerProps {
      * `?disable=postFx` diagnostic URL flag, but host-controlled.
      */
     disablePostFx?: boolean;
+    /** Keep the mounted renderer/context warm without advancing scene frames. */
+    renderPaused?: boolean;
 }
 /** Imperative handle exposed via `ref` on `<Viewer>`. */
 export type ViewerHandle = {

package/dist/components/viewer/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/viewer/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,SAAS,EAKf,MAAM,kBAAkB,CAAA;AACzB,OAAO,EAAkB,KAAK,YAAY,EAAsB,MAAM,oBAAoB,CAAA;AAS1F,OAAO,KAAK,KAAK,MAAM,cAAc,CAAA;AAKrC,OAAO,KAAK,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAA;AAGrE,OAAkB,EAAE,KAAK,aAAa,EAAE,MAAM,wBAAwB,CAAA;AAQtE,OAAuB,EAAwB,KAAK,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAU1F,OAAO,QAAQ,oBAAoB,CAAC;IAOlC,UAAU,aAAa;QACrB,qBAAqB,EAAE,YAAY,CAAC,OAAO,KAAK,CAAC,qBAAqB,CAAC,CAAA;KACxE;CACF;AAuSD,UAAU,WAAW;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,WAAW,CAAC,EAAE,WAAW,CAAA;IACzB,gBAAgB,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAA;IACvC,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,aAAa,CAAC,EAAE,aAAa,CAAA;IAC7B,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,aAAa,CAAC,EAAE;QACd,OAAO,CAAC,EAAE,aAAa,CAAA;QACvB,QAAQ,CAAC,EAAE,OAAO,CAAA;QAClB,WAAW,CAAC,EAAE,WAAW,CAAA;KAC1B,CAAA;IACD;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,CAAA;IAC5B;;;;;OAKG;IACH,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAA;IACtC,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAA;IAC7C;;;;;OAKG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAC5B;;;;;;OAMG;IACH,aAAa,CAAC,EAAE,OAAO,CAAA;CACxB;AAED,yDAAyD;AACzD,MAAM,MAAM,YAAY,GAAG;IACzB;;;;;OAKG;IACH,WAAW,CAAC,GAAG,EAAE,SAAS,EAAE,GAAG,IAAI,GAAG,IAAI,CAAA;CAC3C,CAAA;AAED,QAAA,MAAM,MAAM,sGA4NV,CAAA;AAkBF,eAAe,MAAM,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/viewer/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,SAAS,EAMf,MAAM,kBAAkB,CAAA;AACzB,OAAO,EAAkB,KAAK,YAAY,EAAsB,MAAM,oBAAoB,CAAA;AAS1F,OAAO,KAAK,KAAK,MAAM,cAAc,CAAA;AAKrC,OAAO,KAAK,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAA;AAKrE,OAAkB,EAAE,KAAK,aAAa,EAAE,MAAM,wBAAwB,CAAA;AAatE,OAAuB,EAAwB,KAAK,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAY1F,OAAO,QAAQ,oBAAoB,CAAC;IAOlC,UAAU,aAAa;QACrB,qBAAqB,EAAE,YAAY,CAAC,OAAO,KAAK,CAAC,qBAAqB,CAAC,CAAA;KACxE;CACF;AA8QD,UAAU,WAAW;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,WAAW,CAAC,EAAE,WAAW,CAAA;IACzB,gBAAgB,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAA;IACvC,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,aAAa,CAAC,EAAE,aAAa,CAAA;IAC7B,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,aAAa,CAAC,EAAE;QACd,OAAO,CAAC,EAAE,aAAa,CAAA;QACvB,QAAQ,CAAC,EAAE,OAAO,CAAA;QAClB,WAAW,CAAC,EAAE,WAAW,CAAA;KAC1B,CAAA;IACD;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,CAAA;IAC5B;;;;;OAKG;IACH,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAA;IACtC,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAA;IAC7C;;;;;OAKG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAC5B;;;;;;;;;;;OAWG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;IACf;;;;;;OAMG;IACH,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,6EAA6E;IAC7E,YAAY,CAAC,EAAE,OAAO,CAAA;CACvB;AAED,yDAAyD;AACzD,MAAM,MAAM,YAAY,GAAG;IACzB;;;;;OAKG;IACH,WAAW,CAAC,GAAG,EAAE,SAAS,EAAE,GAAG,IAAI,GAAG,IAAI,CAAA;CAC3C,CAAA;AAED,QAAA,MAAM,MAAM,sGA0PV,CAAA;AAEF,eAAe,MAAM,CAAA"}

package/dist/components/viewer/index.js

@@ -1,27 +1,36 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { nodeRegistry, StairOpeningSystem, sceneRegistry, useScene, } from '@pascal-app/core';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { nodeRegistry, RoofElevationSystem, StairOpeningSystem, sceneRegistry, useScene, } from '@pascal-app/core';
 import { Canvas, extend, useFrame, useThree } from '@react-three/fiber';
 import { forwardRef, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState, } from 'react';
 import * as THREE from 'three/webgpu';
 import { hasDrawableGeometry } from '../../lib/drawable-geometry';
-import { PERF_OVERLAY_ENABLED, pushGpuSample } from '../../lib/gpu-perf';
+import { PERF_OVERLAY_ENABLED } from '../../lib/gpu-perf';
 import { applyIsolation, clearIsolation } from '../../lib/isolation';
 import { ensureKtx2Support } from '../../lib/ktx2-loader';
+import { choosePointerEvents } from '../../lib/pointer-events';
+import { initializeGpuRenderer } from '../../lib/renderer-capability';
 import { getSceneTheme } from '../../lib/scene-themes';
 import { installTextureNodeNullGuard } from '../../lib/texture-node-guard';
 import useViewer, {} from '../../store/use-viewer';
 import { FloorElevationSystem } from '../../systems/floor-elevation/floor-elevation-system';
 import { GeometrySystem } from '../../systems/geometry/geometry-system';
+import { PerfActionSettleSystem } from '../../systems/perf-action-settle/perf-action-settle-system';
+import { subscribeWallBuildInteractions } from '../../systems/wall/wall-build-lifecycle';
 import { ErrorBoundary } from '../error-boundary';
 import { SceneRenderer } from '../renderers/scene-renderer';
+import { BATCH_SPIKE_ENABLED, BatchedMeshSpike } from './batched-mesh-spike';
 import FrameLimiter from './frame-limiter';
 import { Lights } from './lights';
 import { PerfMonitor } from './perf-monitor';
+import { PerfPanel } from './perf-panel';
+import { PointerRaycastLayers } from './pointer-raycast-layers';
 import PostProcessing, { DEFAULT_HOVER_STYLES } from './post-processing';
 import { RegisteredSystems } from './registered-systems';
+import { useSceneAtmosphere } from './scene-atmosphere';
 import { SceneBvh } from './scene-bvh';
 import { SelectionManager } from './selection-manager';
+import { UnsupportedGpuViewerFallback } from './unsupported-gpu-fallback';
 import { ViewerCamera } from './viewer-camera';
 // Must be in place before any node material builds — a null texture pulled by
 // a shared override-material pass otherwise kills the render pass outright.
@@ -56,27 +65,6 @@ const DIRTY_BUILD_KINDS = new Set([
     'window',
 ]);
 const warnedEmptyDraw = process.env.NODE_ENV === 'production' ? null : new WeakSet();
-function canCreateWebGLContext() {
-    if (typeof document === 'undefined')
-        return false;
-    const canvas = document.createElement('canvas');
-    try {
-        return Boolean(canvas.getContext('webgl2') ?? canvas.getContext('webgl'));
-    }
-    catch {
-        return false;
-    }
-}
-function canMountGpuViewer() {
-    if (typeof window === 'undefined')
-        return false;
-    if (!('gpu' in navigator) && !canCreateWebGLContext())
-        return false;
-    return true;
-}
-function UnsupportedGpuViewerFallback() {
-    return (_jsx("div", { className: "flex h-full min-h-64 w-full items-center justify-center bg-[#fafafa] p-6 text-center text-neutral-900", children: _jsxs("div", { className: "max-w-md rounded-2xl border border-neutral-200 bg-white p-6 shadow-sm", children: [_jsx("h2", { className: "font-semibold text-lg", children: "3D viewer unavailable" }), _jsx("p", { className: "mt-2 text-neutral-600 text-sm", children: "This browser or environment does not expose WebGPU or WebGL, so Pascal cannot render the 3D scene here. Try opening the editor in a browser with hardware acceleration enabled." })] }) }));
-}
 /**
  * Renderer-level safety net against the empty-vertex-buffer crash.
  *
@@ -144,12 +132,20 @@ function GPUDeviceWatcher() {
 }
 function ToneMappingExposure() {
     const sceneTheme = useViewer((state) => state.sceneTheme);
+    const atmosphere = useSceneAtmosphere();
     const gl = useThree((state) => state.gl);
     const invalidate = useThree((state) => state.invalidate);
     useEffect(() => {
+        if (atmosphere)
+            return;
         gl.toneMappingExposure = getSceneTheme(sceneTheme).toneMappingExposure;
         invalidate();
-    }, [gl, invalidate, sceneTheme]);
+    }, [atmosphere, gl, invalidate, sceneTheme]);
+    useFrame(() => {
+        if (!atmosphere)
+            return;
+        gl.toneMappingExposure = atmosphere.exposure;
+    }, -1);
     return null;
 }
 function hasPendingSceneBuildWork() {
@@ -230,7 +226,7 @@ function SceneReadyTracker({ onSceneReadyChange, sceneReadyKey, sceneReadyMaxWai
     }, 10);
     return null;
 }
-const Viewer = forwardRef(function Viewer({ children, hoverStyles = DEFAULT_HOVER_STYLES, selectionManager = 'default', perf = false, useBvh = true, renderContext = 'editor', transparent, defaultRender, isolate, sceneReadyKey, onSceneReadyChange, sceneReadyMaxWaitMs, disablePostFx = false, }, ref) {
+const Viewer = forwardRef(function Viewer({ children, hoverStyles = DEFAULT_HOVER_STYLES, selectionManager = 'default', perf = false, useBvh = true, renderContext = 'editor', transparent, defaultRender, isolate, sceneReadyKey, onSceneReadyChange, sceneReadyMaxWaitMs, maxFps = 50, disablePostFx = false, renderPaused = false, }, ref) {
     useEffect(() => {
         if (nodeRegistry.size === 0) {
             console.warn('[viewer] Node registry is empty. Install @pascal-app/nodes and call await loadPlugin(builtinPlugin) before mounting <Viewer>.');
@@ -253,16 +249,8 @@ const Viewer = forwardRef(function Viewer({ children, hoverStyles = DEFAULT_HOVE
                 clearIsolation();
         };
     }, [isolate]);
+    const [pointerEvents] = useState(() => choosePointerEvents());
     const [rendererInitFailed, setRendererInitFailed] = useState(false);
-    // Capability detection runs after mount. We start optimistic (true) so the
-    // server-rendered markup and the first client render agree (no hydration
-    // mismatch); the effect flips it to false only on environments that expose
-    // neither WebGPU nor WebGL.
-    const [canMountViewer, setCanMountViewer] = useState(true);
-    useEffect(() => {
-        if (!canMountGpuViewer())
-            setCanMountViewer(false);
-    }, []);
     const isDark = useViewer((state) => getSceneTheme(state.sceneTheme).appearance === 'dark');
     const transparentBackground = useViewer((state) => state.transparentBackground);
     // The shadows toggle drives `renderer.shadowMap.enabled` (via the Canvas
@@ -317,7 +305,7 @@ const Viewer = forwardRef(function Viewer({ children, hoverStyles = DEFAULT_HOVE
     // fragment-shader cost down — saves another ~30% over 1.5x on high-DPI mobile.
     // Desktops (fine pointer) keep the original 1.5 cap.
     const maxDpr = typeof window !== 'undefined' && window.matchMedia('(pointer: coarse)').matches ? 1.25 : 1.5;
-    const showGpuFallback = !canMountViewer || rendererInitFailed;
+    const showGpuFallback = rendererInitFailed;
     // When we can't mount the GPU canvas, the SceneReadyTracker never mounts and
     // the host editor would otherwise wait on its scene-readiness timeout. Signal
     // readiness explicitly so the host can drop its loader immediately.
@@ -328,52 +316,56 @@ const Viewer = forwardRef(function Viewer({ children, hoverStyles = DEFAULT_HOVE
     if (showGpuFallback) {
         return _jsx(UnsupportedGpuViewerFallback, {});
     }
-    return (_jsxs(Canvas, { camera: { position: [50, 50, 50], fov: 50 }, className: `transition-colors duration-700 ${transparentBackground ? 'bg-transparent' : isDark ? 'bg-[#1f2433]' : 'bg-[#fafafa]'}`, dpr: [1, maxDpr], frameloop: "never", gl: ((props) => {
-            const canvas = props.canvas;
-            const cached = canvas ? WEBGPU_RENDERER_CACHE.get(canvas) : undefined;
-            if (cached)
-                return cached;
-            const promise = (async () => {
-                try {
-                    const renderer = new THREE.WebGPURenderer({ ...props, alpha: true });
-                    renderer.toneMapping = THREE.ACESFilmicToneMapping;
-                    renderer.toneMappingExposure = getSceneTheme(useViewer.getState().sceneTheme).toneMappingExposure;
-                    await renderer.init();
-                    installEmptyDrawGuard(renderer);
-                    return renderer;
-                }
-                catch (err) {
-                    // Drop the failed promise from the cache so a future Canvas
-                    // mount on the same DOM can retry instead of inheriting the
-                    // rejection forever.
+    return (_jsxs(_Fragment, { children: [(perf || PERF_OVERLAY_ENABLED) && _jsx(PerfPanel, {}), _jsxs(Canvas, { ref: subscribeWallBuildInteractions, camera: { position: [50, 50, 50], fov: 50 }, className: `transition-colors duration-700 ${transparentBackground ? 'bg-transparent' : isDark ? 'bg-[#1f2433]' : 'bg-[#fafafa]'}`, dpr: [1, maxDpr], events: pointerEvents, frameloop: "never", gl: ((props) => {
+                    const canvas = props.canvas;
+                    const cached = canvas ? WEBGPU_RENDERER_CACHE.get(canvas) : undefined;
+                    if (cached)
+                        return cached;
+                    const promise = (async () => {
+                        const result = await initializeGpuRenderer({
+                            // Supplying `device` makes three skip its own `requestAdapter`,
+                            // so R3F's `powerPreference` only reaches the GPU if we forward it.
+                            powerPreference: props.powerPreference,
+                            createRenderer: (backendParameters) => {
+                                const renderer = new THREE.WebGPURenderer({
+                                    ...props,
+                                    ...backendParameters,
+                                    alpha: true,
+                                    // Allocates the backend's timestamp query pool so
+                                    // `resolveTimestampsAsync()` can report real GPU render-pass
+                                    // time (post-processing.tsx). The backend self-disables it
+                                    // when the device lacks 'timestamp-query'.
+                                    trackTimestamp: PERF_OVERLAY_ENABLED,
+                                });
+                                renderer.toneMapping = THREE.ACESFilmicToneMapping;
+                                renderer.toneMappingExposure = getSceneTheme(useViewer.getState().sceneTheme).toneMappingExposure;
+                                return renderer;
+                            },
+                        });
+                        if (result.status === 'ready') {
+                            installEmptyDrawGuard(result.renderer);
+                            return result.renderer;
+                        }
+                        if (canvas)
+                            WEBGPU_RENDERER_CACHE.delete(canvas);
+                        console.error('[viewer] WebGPURenderer init failed', result.error);
+                        setRendererInitFailed(true);
+                        // Never settles on purpose. Rejecting is what produced
+                        // MONOREPO-EDITOR-59: R3F awaits this inside its own configure()
+                        // with no catch, so a rejection surfaces as an unhandled rejection.
+                        // Resolving is worse still — R3F would call render() on a renderer
+                        // that has no context. The state update above unmounts this Canvas,
+                        // which is what releases the pending configure().
+                        return new Promise(() => undefined);
+                    })();
                     if (canvas)
-                        WEBGPU_RENDERER_CACHE.delete(canvas);
-                    console.error('[viewer] WebGPURenderer init failed', err);
-                    setRendererInitFailed(true);
-                    throw err;
-                }
-            })();
-            if (canvas)
-                WEBGPU_RENDERER_CACHE.set(canvas, promise);
-            return promise;
-        }), resize: {
-            debounce: 100,
-        }, shadows: {
-            type: THREE.PCFShadowMap,
-            enabled: shadowsEnabled,
-        }, children: [_jsx(FrameLimiter, { fps: 50 }), _jsx(ViewerCamera, {}), _jsx(GPUDeviceWatcher, {}), _jsx(ToneMappingExposure, {}), _jsx(SceneReadyTracker, { onSceneReadyChange: onSceneReadyChange, sceneReadyKey: sceneReadyKey, sceneReadyMaxWaitMs: sceneReadyMaxWaitMs }), _jsxs(ErrorBoundary, { fallback: null, scope: "viewer-scene", children: [_jsx(Lights, {}), useBvh ? (_jsx(SceneBvh, { children: _jsx(SceneRenderer, {}) })) : (_jsx(SceneRenderer, {})), _jsx(FloorElevationSystem, {}), _jsx(GeometrySystem, {}), _jsx(StairOpeningSystem, {}), _jsx(RegisteredSystems, {}), _jsx(PostProcessing, { disablePostFx: disablePostFx, hoverStyles: hoverStyles }), selectionManager === 'default' && _jsx(SelectionManager, {}), (perf || PERF_OVERLAY_ENABLED) && _jsx(PerfMonitor, {}), children] })] }));
+                        WEBGPU_RENDERER_CACHE.set(canvas, promise);
+                    return promise;
+                }), resize: {
+                    debounce: 100,
+                }, shadows: {
+                    type: THREE.PCFShadowMap,
+                    enabled: shadowsEnabled,
+                }, children: [_jsx(FrameLimiter, { fps: maxFps, paused: renderPaused }), _jsx(ViewerCamera, {}), _jsx(PointerRaycastLayers, {}), _jsx(GPUDeviceWatcher, {}), _jsx(ToneMappingExposure, {}), _jsx(SceneReadyTracker, { onSceneReadyChange: onSceneReadyChange, sceneReadyKey: sceneReadyKey, sceneReadyMaxWaitMs: sceneReadyMaxWaitMs }), _jsxs(ErrorBoundary, { fallback: null, scope: "viewer-scene", children: [_jsx(Lights, {}), useBvh ? (_jsx(SceneBvh, { children: _jsx(SceneRenderer, {}) })) : (_jsx(SceneRenderer, {})), _jsx(FloorElevationSystem, {}), _jsx(GeometrySystem, {}), _jsx(StairOpeningSystem, {}), _jsx(RoofElevationSystem, {}), _jsx(RegisteredSystems, {}), _jsx(PostProcessing, { disablePostFx: disablePostFx, hoverStyles: hoverStyles }), selectionManager === 'default' && _jsx(SelectionManager, {}), (perf || PERF_OVERLAY_ENABLED) && _jsx(PerfMonitor, {}), (perf || PERF_OVERLAY_ENABLED) && _jsx(PerfActionSettleSystem, {}), BATCH_SPIKE_ENABLED && _jsx(BatchedMeshSpike, {}), children] })] })] }));
 });
-const DebugRenderer = () => {
-    useFrame(({ gl, scene, camera }) => {
-        const submittedAt = PERF_OVERLAY_ENABLED ? performance.now() : 0;
-        gl.render(scene, camera);
-        if (PERF_OVERLAY_ENABLED) {
-            const queue = gl.backend?.device?.queue;
-            queue?.onSubmittedWorkDone?.().then(() => {
-                pushGpuSample(performance.now() - submittedAt);
-            });
-        }
-    });
-    return null;
-};
 export default Viewer;

package/dist/components/viewer/lights.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"lights.d.ts","sourceRoot":"","sources":["../../../src/components/viewer/lights.tsx"],"names":[],"mappings":"AA4EA,wBAAgB,MAAM,gCAgPrB"}
+{"version":3,"file":"lights.d.ts","sourceRoot":"","sources":["../../../src/components/viewer/lights.tsx"],"names":[],"mappings":"AA6EA,wBAAgB,MAAM,gCAqQrB"}