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

package/dist/components/viewer/perf-monitor.js

@@ -1,38 +1,227 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useScene } from '@pascal-app/core';
-import { Html } from '@react-three/drei';
+import { sceneRegistry, useScene } from '@pascal-app/core';
 import { useFrame, useThree } from '@react-three/fiber';
-import { useEffect, useRef, useState } from 'react';
-import { drainGpuSamples } from '../../lib/gpu-perf';
+import { useEffect, useRef } from 'react';
+import { Vector3 } from 'three';
+import { initPerfObservers } from '../../lib/perf-observers';
+import { publishPerfStats, readPerfBatchStats } from '../../lib/perf-panel-store';
+import { clearPerfMeasures, drainPerfCounters } from '../../lib/perf-tracks';
 const SAMPLE_INTERVAL = 0.5; // seconds between display updates
+// Walking the scene graph is the overlay's own biggest cost on large projects,
+// and the counts barely move between ticks — sample it at 2s instead of 0.5s.
+const CENSUS_EVERY_TICKS = 4;
+const MAX_TRACK_LINES = 8;
+// Tracks printed on their own lines above (render path + the frame-limiter's
+// whole-frame span); everything else drained from perf-tracks lands in TRACKS.
+const RENDER_TRACKS = new Set(['gpu-render', 'gpu-queue', 'render-encode', 'frame-cpu']);
+/**
+ * `scene.traverse` descends into hidden subtrees, so a collapsed level or an
+ * isolated-away wing still inflated the counts. Recurse manually and cut at the
+ * first invisible node — that matches what the renderer actually walks.
+ */
+function countVisible(object, out) {
+    if (object.visible === false)
+        return;
+    if (object.isMesh)
+        out.meshes++;
+    else if (object.isLine || object.isLineSegments || object.isLineLoop)
+        out.lines++;
+    else if (object.isSprite)
+        out.sprites++;
+    else if (object.isLight)
+        out.lights++;
+    const children = object.children;
+    if (!children)
+        return;
+    for (let i = 0; i < children.length; i++)
+        countVisible(children[i], out);
+}
+function averageOf(bucket) {
+    if (!bucket || bucket.count === 0)
+        return null;
+    return bucket.totalMs / bucket.count;
+}
+/**
+ * Headless collector. Runs inside <Canvas> (it needs useFrame + gl.info) and
+ * publishes each window's stats to perf-panel-store; the visible panel is
+ * <PerfPanel>, mounted outside the canvas — see perf-panel.tsx for why.
+ */
 export const PerfMonitor = () => {
-    const [stats, setStats] = useState({
-        fps: 0,
-        frameMs: 0,
-        gpuMs: 0,
-        gpuMaxMs: 0,
-        drawCalls: 0,
-        triangles: 0,
-        dirty: 0,
-        dirtyDetail: '',
-        meshes: 0,
-        lines: 0,
-        sprites: 0,
-        lights: 0,
-    });
     const frameCount = useRef(0);
     const elapsed = useRef(0);
-    const lastMs = useRef(0);
+    const tickCount = useRef(0);
     // Carry the previous tick's reading forward when no fresh samples arrive,
     // so the display doesn't flicker to "—" on slow resolve windows.
-    const lastGpuMs = useRef(0);
-    const lastGpuMaxMs = useRef(0);
+    const lastFrame = useRef({ ms: 0, max: 0 });
+    const lastGpu = useRef({ ms: 0, max: 0, seen: false });
+    const lastQueue = useRef({ ms: 0, max: 0 });
+    const lastEncode = useRef({ ms: 0, max: 0 });
+    const lastCensus = useRef({ meshes: 0, lines: 0, sprites: 0, lights: 0 });
     // Take ownership of info reset. The custom RenderPipeline.render() path
     // we use in post-processing doesn't trigger three.js's automatic per-frame
-    // info reset, so calls/triangles accumulate across frames and the display
+    // info reset, so drawCalls/triangles accumulate across frames and the display
     // shows lifetime totals. Disabling autoReset and explicitly resetting at
     // each window gives true per-frame averages.
     const gl = useThree((s) => s.gl);
+    const getThree = useThree((s) => s.get);
+    useEffect(() => {
+        initPerfObservers();
+    }, []);
+    // Scripted-probe hooks for the scaling-matrix runner (scripts/perf/…): only
+    // mounted with `?perf`, so nothing reaches `window` in normal sessions.
+    // `projectNode` returns CSS pixels relative to the canvas, ready for a
+    // synthetic click on the node.
+    useEffect(() => {
+        const probe = {
+            batchStats: readPerfBatchStats,
+            listNodes(type) {
+                return Object.values(useScene.getState().nodes)
+                    .filter((n) => n.type === type)
+                    .map((n) => n.id);
+            },
+            // Raw dirty-set census: total marks, marks whose node is gone (phantoms),
+            // and live marks bucketed by node kind. The panel's DIRTY readout filters
+            // to live nodes, so scripted runs need this to see leaks at all.
+            dirtyResidue() {
+                const { dirtyNodes, nodes } = useScene.getState();
+                const phantomIds = [];
+                const liveByType = {};
+                for (const id of dirtyNodes) {
+                    const node = nodes[id];
+                    if (!node)
+                        phantomIds.push(id);
+                    else
+                        liveByType[node.type] = (liveByType[node.type] ?? 0) + 1;
+                }
+                return { total: dirtyNodes.size, phantom: phantomIds.length, phantomIds, liveByType };
+            },
+            // Draw-call composition census for the item/draw-reduction work
+            // (charter backlog #3): how item draws decompose per item and per
+            // asset, plus projected draw counts for the two candidate techniques —
+            // per-item merge-by-material and per-asset instancing.
+            drawComposition() {
+                const { nodes } = useScene.getState();
+                const assets = new Map();
+                const meshesPerItem = [];
+                let itemMeshes = 0;
+                let perItemMerge = 0;
+                for (const node of Object.values(nodes)) {
+                    if (node.type !== 'item')
+                        continue;
+                    const group = sceneRegistry.nodes.get(node.id);
+                    if (!group)
+                        continue;
+                    let meshes = 0;
+                    const materials = new Set();
+                    const meshKeys = new Set();
+                    group.traverse((child) => {
+                        if (!child.isMesh || child.visible === false)
+                            return;
+                        meshes++;
+                        const mats = Array.isArray(child.material) ? child.material : [child.material];
+                        for (const m of mats)
+                            if (m)
+                                materials.add(m.uuid);
+                        meshKeys.add(`${child.geometry?.uuid ?? '?'}|${mats.map((m) => m?.uuid ?? '?').join(',')}`);
+                    });
+                    if (meshes === 0)
+                        continue;
+                    itemMeshes += meshes;
+                    meshesPerItem.push(meshes);
+                    perItemMerge += materials.size;
+                    const asset = node.asset;
+                    const assetId = asset?.id ?? 'unknown';
+                    const agg = assets.get(assetId) ?? {
+                        name: asset?.name ?? assetId,
+                        copies: 0,
+                        meshesPerCopy: meshes,
+                        materialsPerCopy: materials.size,
+                        uniqueMeshKeys: new Set(),
+                        uniqueMaterials: new Set(),
+                    };
+                    agg.copies++;
+                    for (const k of meshKeys)
+                        agg.uniqueMeshKeys.add(k);
+                    for (const m of materials)
+                        agg.uniqueMaterials.add(m);
+                    assets.set(assetId, agg);
+                }
+                // Bucket every registered node's meshes by kind so the non-item side
+                // of the draw budget is attributable too.
+                const meshesByKind = {};
+                let registeredMeshes = 0;
+                for (const node of Object.values(nodes)) {
+                    const group = sceneRegistry.nodes.get(node.id);
+                    if (!group)
+                        continue;
+                    let count = 0;
+                    group.traverse((child) => {
+                        if (child.isMesh && child.visible !== false)
+                            count++;
+                    });
+                    if (count === 0)
+                        continue;
+                    meshesByKind[node.type] = (meshesByKind[node.type] ?? 0) + count;
+                    registeredMeshes += count;
+                }
+                let otherVisibleMeshes = 0;
+                const { scene } = getThree();
+                scene.traverse((child) => {
+                    if (child.isMesh && child.visible !== false)
+                        otherVisibleMeshes++;
+                });
+                meshesByKind['(unregistered)'] = Math.max(0, otherVisibleMeshes - registeredMeshes);
+                otherVisibleMeshes -= itemMeshes;
+                let instancedByAsset = 0;
+                let both = 0;
+                for (const agg of assets.values()) {
+                    instancedByAsset += agg.uniqueMeshKeys.size;
+                    both += agg.uniqueMaterials.size;
+                }
+                const sorted = [...meshesPerItem].sort((a, b) => a - b);
+                return {
+                    items: meshesPerItem.length,
+                    itemMeshes,
+                    otherVisibleMeshes,
+                    meshesByKind,
+                    perItemMeshes: {
+                        avg: Number((itemMeshes / Math.max(1, meshesPerItem.length)).toFixed(1)),
+                        p50: sorted[Math.floor(sorted.length / 2)] ?? 0,
+                        max: sorted[sorted.length - 1] ?? 0,
+                    },
+                    assets: [...assets.entries()]
+                        .map(([id, a]) => ({
+                        id,
+                        name: a.name,
+                        copies: a.copies,
+                        meshesPerCopy: a.meshesPerCopy,
+                        materialsPerCopy: a.materialsPerCopy,
+                    }))
+                        .sort((a, b) => b.copies * b.meshesPerCopy - a.copies * a.meshesPerCopy)
+                        .slice(0, 15),
+                    projected: { current: itemMeshes, perItemMerge, instancedByAsset, both },
+                };
+            },
+            projectNode(nodeId) {
+                const object = sceneRegistry.nodes.get(nodeId);
+                if (!object)
+                    return null;
+                const { camera, size } = getThree();
+                const v = new Vector3();
+                object.getWorldPosition(v);
+                v.project(camera);
+                return {
+                    x: ((v.x + 1) / 2) * size.width,
+                    y: ((1 - v.y) / 2) * size.height,
+                    behindCamera: v.z > 1,
+                };
+            },
+        };
+        window.__pascalPerf = probe;
+        return () => {
+            if (window.__pascalPerf === probe)
+                delete window.__pascalPerf;
+        };
+    }, [getThree]);
     useEffect(() => {
         if (!gl?.info)
             return;
@@ -43,103 +232,105 @@ export const PerfMonitor = () => {
             gl.info.autoReset = previousAutoReset;
         };
     }, [gl]);
-    useFrame(({ gl, scene, clock }, delta) => {
+    useFrame(({ gl, scene, clock }) => {
         frameCount.current++;
         const now = clock.elapsedTime;
         const dt = now - elapsed.current;
-        if (dt >= SAMPLE_INTERVAL) {
-            const fps = Math.round(frameCount.current / dt);
-            const frameMs = lastMs.current;
-            const info = gl.info;
-            // calls/triangles have been accumulating since the last reset (start of
-            // window). Divide by frameCount to get a per-frame average.
-            const totalCalls = info.render?.calls ?? 0;
-            const totalTriangles = info.render?.triangles ?? 0;
-            const drawCalls = Math.round(totalCalls / Math.max(1, frameCount.current));
-            const triangles = totalTriangles / Math.max(1, frameCount.current);
-            info.reset();
-            const sceneState = useScene.getState();
-            const dirty = sceneState.dirtyNodes.size;
-            let dirtyDetail = '';
-            if (dirty > 0) {
-                const counts = new Map();
-                for (const id of sceneState.dirtyNodes) {
-                    const type = sceneState.nodes[id]?.type ?? 'missing';
-                    counts.set(type, (counts.get(type) ?? 0) + 1);
-                }
-                dirtyDetail = [...counts.entries()]
-                    .sort((a, b) => b[1] - a[1])
-                    .map(([type, count]) => `${count} ${type}`)
-                    .join(', ');
-            }
-            // Count visible drawables by type so we can match scene contents
-            // against the renderer's draw count and find hidden contributors.
-            let meshes = 0;
-            let lines = 0;
-            let sprites = 0;
-            let lights = 0;
-            scene.traverse((obj) => {
-                if (!obj.visible)
-                    return;
-                if (obj.isMesh)
-                    meshes++;
-                else if (obj.isLine || obj.isLineSegments || obj.isLineLoop)
-                    lines++;
-                else if (obj.isSprite)
-                    sprites++;
-                else if (obj.isLight)
-                    lights++;
-            });
-            // GPU samples are pushed by post-processing.tsx after each pipeline
-            // render via device.queue.onSubmittedWorkDone(). We drain whatever
-            // has accumulated since the last tick.
-            const samples = drainGpuSamples();
-            if (samples.length > 0) {
-                let sum = 0;
-                let max = 0;
-                for (const s of samples) {
-                    sum += s;
-                    if (s > max)
-                        max = s;
-                }
-                lastGpuMs.current = sum / samples.length;
-                lastGpuMaxMs.current = max;
+        if (dt < SAMPLE_INTERVAL)
+            return;
+        tickCount.current++;
+        const fps = Math.round(frameCount.current / dt);
+        const info = gl.info;
+        // drawCalls (NOT `calls`, which counts renderer.render() invocations for the
+        // lifetime of the renderer and is never cleared by reset()) has been
+        // accumulating since the last reset at the start of this window.
+        const totalDrawCalls = info.render?.drawCalls ?? 0;
+        const totalTriangles = info.render?.triangles ?? 0;
+        const drawCalls = Math.round(totalDrawCalls / Math.max(1, frameCount.current));
+        const triangles = totalTriangles / Math.max(1, frameCount.current);
+        const memory = info.memory ?? {};
+        info.reset();
+        const sceneState = useScene.getState();
+        const dirty = sceneState.dirtyNodes.size;
+        let dirtyDetail = '';
+        if (dirty > 0) {
+            const counts = new Map();
+            for (const id of sceneState.dirtyNodes) {
+                const type = sceneState.nodes[id]?.type ?? 'missing';
+                counts.set(type, (counts.get(type) ?? 0) + 1);
             }
-            setStats({
-                fps,
-                frameMs,
-                gpuMs: lastGpuMs.current,
-                gpuMaxMs: lastGpuMaxMs.current,
-                drawCalls,
-                triangles,
-                dirty,
-                dirtyDetail,
-                meshes,
-                lines,
-                sprites,
-                lights,
-            });
-            frameCount.current = 0;
-            elapsed.current = now;
+            dirtyDetail = [...counts.entries()]
+                .sort((a, b) => b[1] - a[1])
+                .map(([type, count]) => `${count} ${type}`)
+                .join(', ');
+        }
+        if (tickCount.current % CENSUS_EVERY_TICKS === 1) {
+            const census = { meshes: 0, lines: 0, sprites: 0, lights: 0 };
+            countVisible(scene, census);
+            lastCensus.current = census;
+        }
+        const batch = readPerfBatchStats();
+        const counters = drainPerfCounters();
+        // Whole-frame main-thread work measured around FrameLimiter's advance()
+        // call — this is CPU time per frame, unlike FPS which is just cadence.
+        const frameAvg = averageOf(counters.get('frame-cpu'));
+        if (frameAvg !== null) {
+            lastFrame.current = { ms: frameAvg, max: counters.get('frame-cpu')?.maxMs ?? 0 };
+        }
+        const gpuAvg = averageOf(counters.get('gpu-render'));
+        if (gpuAvg !== null) {
+            lastGpu.current = { ms: gpuAvg, max: counters.get('gpu-render')?.maxMs ?? 0, seen: true };
+        }
+        const queueAvg = averageOf(counters.get('gpu-queue'));
+        if (queueAvg !== null) {
+            lastQueue.current = { ms: queueAvg, max: counters.get('gpu-queue')?.maxMs ?? 0 };
+        }
+        const encodeAvg = averageOf(counters.get('render-encode'));
+        if (encodeAvg !== null) {
+            lastEncode.current = { ms: encodeAvg, max: counters.get('render-encode')?.maxMs ?? 0 };
         }
-        lastMs.current = Math.round(delta * 1000 * 10) / 10;
+        const tracks = [...counters.entries()]
+            .filter(([name, bucket]) => !RENDER_TRACKS.has(name) && bucket.count > 0)
+            .map(([name, bucket]) => ({
+            name,
+            totalMs: bucket.totalMs,
+            count: bucket.count,
+            maxMs: bucket.maxMs,
+        }))
+            .sort((a, b) => b.totalMs - a.totalMs)
+            .slice(0, MAX_TRACK_LINES);
+        publishPerfStats({
+            fps,
+            frameMs: lastFrame.current.ms,
+            frameMaxMs: lastFrame.current.max,
+            encodeMs: lastEncode.current.ms,
+            encodeMaxMs: lastEncode.current.max,
+            gpuMs: lastGpu.current.ms,
+            gpuMaxMs: lastGpu.current.max,
+            gpuTracked: lastGpu.current.seen,
+            queueMs: lastQueue.current.ms,
+            queueMaxMs: lastQueue.current.max,
+            drawCalls,
+            triangles,
+            batch,
+            dirty,
+            dirtyDetail,
+            geometries: memory.geometries ?? 0,
+            textures: memory.textures ?? 0,
+            gpuBytes: memory.total ?? 0,
+            heapBytes: performance.memory?.usedJSHeapSize ?? 0,
+            meshes: lastCensus.current.meshes,
+            lines: lastCensus.current.lines,
+            sprites: lastCensus.current.sprites,
+            lights: lastCensus.current.lights,
+            tracks,
+        });
+        // perf-tracks emits a `performance.measure` per span for the DevTools
+        // custom tracks. The recording already captured them; without this the
+        // timeline buffer grows for the whole session.
+        clearPerfMeasures();
+        frameCount.current = 0;
+        elapsed.current = now;
     });
-    return (_jsx(Html, { position: [0, 0, 0], style: { position: 'fixed', top: 8, left: 8, pointerEvents: 'none' }, zIndexRange: [100, 100], children: _jsx("div", { style: {
-                fontFamily: 'monospace',
-                fontSize: 11,
-                lineHeight: 1.5,
-                color: stats.fps < 30 ? '#f87171' : stats.fps < 55 ? '#fbbf24' : '#4ade80',
-                background: 'rgba(0,0,0,0.7)',
-                borderRadius: 6,
-                padding: '6px 10px',
-                whiteSpace: 'pre',
-            }, children: `FPS    ${stats.fps}
-GPU    ${stats.gpuMs > 0 ? `${stats.gpuMs.toFixed(1)}ms (max ${stats.gpuMaxMs.toFixed(1)})` : '—'}
-DRAW   ${stats.drawCalls}
-TRI    ${(stats.triangles / 1000).toFixed(1)}k
-DIRTY  ${stats.dirty}${stats.dirtyDetail ? ` (${stats.dirtyDetail})` : ''}
-MESH   ${stats.meshes}
-LINE   ${stats.lines}
-SPRITE ${stats.sprites}
-LIGHT  ${stats.lights}` }) }));
+    return null;
 };

package/dist/components/viewer/perf-panel.d.ts

@@ -0,0 +1,3 @@
+export declare const PerfPanel: () => import("react").ReactPortal | null;
+export default PerfPanel;
+//# sourceMappingURL=perf-panel.d.ts.map

package/dist/components/viewer/perf-panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"perf-panel.d.ts","sourceRoot":"","sources":["../../../src/components/viewer/perf-panel.tsx"],"names":[],"mappings":"AA2GA,eAAO,MAAM,SAAS,0CA2MrB,CAAA;AAED,eAAe,SAAS,CAAA"}

package/dist/components/viewer/perf-panel.js

@@ -0,0 +1,178 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { usePerfActionReceipts } from '../../lib/perf-actions';
+import { usePerfStats } from '../../lib/perf-panel-store';
+// Rendered OUTSIDE <Canvas> (drei <Html> wrappers carry a camera-driven
+// transform, which turns position:fixed into "fixed relative to the wrapper"
+// and made the old overlay drift with the camera). Portal to <body> so no
+// ancestor transform/overflow can capture it.
+const STORAGE_KEY = 'pascal-perf-panel';
+const PANEL_WIDTH = 248;
+function loadPlacement() {
+    try {
+        const raw = localStorage.getItem(STORAGE_KEY);
+        if (raw)
+            return JSON.parse(raw);
+    }
+    catch { }
+    return { x: 8, y: 8, docked: null };
+}
+function savePlacement(placement) {
+    try {
+        localStorage.setItem(STORAGE_KEY, JSON.stringify(placement));
+    }
+    catch { }
+}
+function fpsColor(fps) {
+    return fps < 30 ? '#f87171' : fps < 48 ? '#fbbf24' : '#4ade80';
+}
+function mb(bytes) {
+    return `${Math.round(bytes / (1024 * 1024))}MB`;
+}
+const label = { color: '#8b90a0' };
+const value = { textAlign: 'right', color: '#e7e9f0' };
+const grid = {
+    display: 'grid',
+    gridTemplateColumns: 'auto 1fr',
+    columnGap: 12,
+};
+const section = {
+    marginTop: 6,
+    paddingTop: 6,
+    borderTop: '1px solid rgba(255,255,255,0.07)',
+};
+const clip = {
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+};
+const Row = ({ name, children }) => (_jsxs(_Fragment, { children: [_jsx("span", { style: label, children: name }), _jsx("span", { style: value, children: children })] }));
+const ACTION_TRACK_LINES = 4;
+const OLDER_ACTION_LINES = 2;
+/**
+ * Cost of the last edit gesture, from the action ledger — see lib/perf-actions.ts
+ * for what counts as settled. Amber total = the action never settled (the user
+ * started another one, or it blew the settle budget).
+ */
+const LastAction = () => {
+    const [latest, ...older] = usePerfActionReceipts();
+    if (!latest)
+        return null;
+    return (_jsxs("div", { style: section, children: [_jsx("div", { style: { ...label, opacity: 0.7 }, children: "last action" }), _jsxs("div", { style: grid, children: [_jsx("span", { style: { ...value, textAlign: 'left', ...clip }, children: latest.detail ? `${latest.name} ${latest.detail}` : latest.name }), _jsx("span", { style: { ...value, color: latest.outcome === 'settled' ? '#e7e9f0' : '#fbbf24' }, children: latest.outcome === 'settled'
+                            ? `${latest.totalMs.toFixed(0)}ms`
+                            : `${latest.totalMs.toFixed(0)}ms ${latest.outcome}` })] }), _jsx("div", { style: { ...label, ...clip }, children: `drag ${latest.dragMs.toFixed(0)} / settle ${latest.settleMs.toFixed(0)} (${latest.settleFrames} frames)` }), latest.tracks.slice(0, ACTION_TRACK_LINES).map((track) => (_jsxs("div", { style: grid, children: [_jsx("span", { style: label, children: track.name }), _jsx("span", { style: value, children: `${track.totalMs.toFixed(1)}ms (${track.count}×)` })] }, track.name))), older.slice(0, OLDER_ACTION_LINES).map((receipt) => (_jsxs("div", { style: { ...grid, opacity: 0.55 }, children: [_jsx("span", { style: { ...label, ...clip }, children: receipt.name }), _jsx("span", { style: value, children: `${receipt.totalMs.toFixed(0)}ms` })] }, receipt.endedAt)))] }));
+};
+export const PerfPanel = () => {
+    const stats = usePerfStats();
+    const [placement, setPlacement] = useState(loadPlacement);
+    const dragRef = useRef(null);
+    const panelRef = useRef(null);
+    useEffect(() => savePlacement(placement), [placement]);
+    const onPointerDown = useCallback((e) => {
+        const el = panelRef.current;
+        if (!el)
+            return;
+        const rect = el.getBoundingClientRect();
+        dragRef.current = {
+            pointerId: e.pointerId,
+            dx: e.clientX - rect.left,
+            dy: e.clientY - rect.top,
+        };
+        e.target.setPointerCapture(e.pointerId);
+        e.preventDefault();
+    }, []);
+    const onPointerMove = useCallback((e) => {
+        const drag = dragRef.current;
+        if (!drag || drag.pointerId !== e.pointerId)
+            return;
+        const el = panelRef.current;
+        const w = el?.offsetWidth ?? PANEL_WIDTH;
+        const h = el?.offsetHeight ?? 200;
+        setPlacement((p) => ({
+            ...p,
+            x: Math.min(Math.max(0, e.clientX - drag.dx), window.innerWidth - w),
+            y: Math.min(Math.max(0, e.clientY - drag.dy), window.innerHeight - h),
+        }));
+    }, []);
+    const onPointerUp = useCallback((e) => {
+        if (dragRef.current?.pointerId === e.pointerId)
+            dragRef.current = null;
+    }, []);
+    const dock = useCallback(() => {
+        setPlacement((p) => ({
+            ...p,
+            docked: p.x + PANEL_WIDTH / 2 < window.innerWidth / 2 ? 'left' : 'right',
+        }));
+    }, []);
+    if (typeof document === 'undefined')
+        return null;
+    if (placement.docked) {
+        const side = placement.docked;
+        return createPortal(_jsx("button", { "data-pascal-perf-panel": "docked", onClick: () => setPlacement((p) => ({ ...p, docked: null })), style: {
+                position: 'fixed',
+                top: Math.min(placement.y, window.innerHeight - 40),
+                [side]: 0,
+                zIndex: 1000,
+                display: 'flex',
+                alignItems: 'center',
+                gap: 6,
+                padding: '5px 10px',
+                border: '1px solid rgba(255,255,255,0.1)',
+                [side === 'left' ? 'borderLeft' : 'borderRight']: 'none',
+                borderRadius: side === 'left' ? '0 999px 999px 0' : '999px 0 0 999px',
+                background: 'rgba(16,18,27,0.85)',
+                backdropFilter: 'blur(12px)',
+                color: stats ? fpsColor(stats.fps) : '#e7e9f0',
+                font: '600 11px ui-monospace, SFMono-Regular, Menlo, monospace',
+                cursor: 'pointer',
+            }, type: "button", children: stats ? `${stats.fps} fps` : 'perf' }), document.body);
+    }
+    return createPortal(_jsxs("div", { "data-pascal-perf-panel": "open", ref: panelRef, style: {
+            position: 'fixed',
+            left: placement.x,
+            top: placement.y,
+            width: PANEL_WIDTH,
+            zIndex: 1000,
+            borderRadius: 12,
+            border: '1px solid rgba(255,255,255,0.09)',
+            background: 'rgba(16,18,27,0.85)',
+            backdropFilter: 'blur(12px)',
+            boxShadow: '0 8px 28px rgba(0,0,0,0.35)',
+            color: '#e7e9f0',
+            font: '11px ui-monospace, SFMono-Regular, Menlo, monospace',
+            lineHeight: 1.6,
+            userSelect: 'none',
+            overflow: 'hidden',
+        }, children: [_jsxs("div", { onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: onPointerUp, style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 8,
+                    padding: '7px 10px',
+                    cursor: 'grab',
+                    background: 'rgba(255,255,255,0.04)',
+                    borderBottom: '1px solid rgba(255,255,255,0.07)',
+                    touchAction: 'none',
+                }, children: [_jsx("span", { style: { fontWeight: 600, letterSpacing: 0.2 }, children: "Performance" }), _jsx("span", { style: { marginLeft: 'auto', color: stats ? fpsColor(stats.fps) : '#8b90a0' }, children: stats ? `${stats.fps} fps` : '—' }), _jsx("button", { "aria-label": "Dock panel to the side", onClick: dock, onPointerDown: (e) => e.stopPropagation(), style: {
+                            border: 'none',
+                            borderRadius: 999,
+                            width: 18,
+                            height: 18,
+                            background: 'rgba(255,255,255,0.08)',
+                            color: '#c3c7d4',
+                            cursor: 'pointer',
+                            font: '10px ui-monospace, monospace',
+                            lineHeight: '18px',
+                            padding: 0,
+                        }, type: "button", children: "\u00D7" })] }), stats ? (_jsxs("div", { style: { padding: '8px 10px' }, children: [_jsxs("div", { style: grid, children: [_jsx(Row, { name: "frame", children: stats.frameMs > 0
+                                    ? `${stats.frameMs.toFixed(1)}ms cpu (max ${stats.frameMaxMs.toFixed(1)})`
+                                    : '—' }), _jsx(Row, { name: "encode", children: stats.encodeMs > 0
+                                    ? `${stats.encodeMs.toFixed(1)}ms (max ${stats.encodeMaxMs.toFixed(1)})`
+                                    : '—' }), _jsx(Row, { name: "gpu", children: stats.gpuTracked
+                                    ? `${stats.gpuMs.toFixed(1)}ms (max ${stats.gpuMaxMs.toFixed(1)})`
+                                    : 'no timestamp-query' }), _jsx(Row, { name: "queue", children: stats.queueMs > 0
+                                    ? `${stats.queueMs.toFixed(1)}ms (max ${stats.queueMaxMs.toFixed(1)})`
+                                    : '—' }), _jsx(Row, { name: "draw", children: stats.drawCalls }), stats.batch.containers > 0 && (_jsx(Row, { name: "batch", children: `${stats.batch.items} items · ${stats.batch.instances} inst · ${stats.batch.containers} mesh` })), _jsx(Row, { name: "tri", children: `${(stats.triangles / 1000).toFixed(1)}k` }), _jsx(Row, { name: "mem", children: `${stats.geometries} geo  ${stats.textures} tex  ${mb(stats.gpuBytes)}` }), _jsx(Row, { name: "heap", children: stats.heapBytes > 0 ? mb(stats.heapBytes) : '—' }), _jsxs(Row, { name: "dirty", children: [stats.dirty, stats.dirtyDetail ? ` (${stats.dirtyDetail})` : ''] }), _jsx(Row, { name: "visible", children: `${stats.meshes} mesh  ${stats.lines} line  ${stats.lights} light` })] }), _jsx(LastAction, {}), stats.tracks.length > 0 && (_jsx("div", { style: section, children: stats.tracks.map((t) => (_jsxs("div", { style: grid, children: [_jsx("span", { style: label, children: t.name }), _jsx("span", { style: value, children: `${t.totalMs.toFixed(1)}ms (${t.count}×, max ${t.maxMs.toFixed(1)})` })] }, t.name))) }))] })) : (_jsx("div", { style: { padding: '8px 10px', color: '#8b90a0' }, children: "waiting for samples\u2026" }))] }), document.body);
+};
+export default PerfPanel;

package/dist/components/viewer/pointer-raycast-layers.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Lets R3F's pointer raycaster see geometry a collective batch draws.
+ *
+ * R3F picks with one shared raycaster whose default mask is `SCENE_LAYER`
+ * alone. A wall sewn into its level's merged mesh is moved off that layer
+ * (`hideBatchedWall`) while staying in the graph with its pointer handlers
+ * intact — so without this the wall answers no hover, paint or click the
+ * moment it joins a batch, and a floor's walls go dead a fraction of a second
+ * after the last edit settles.
+ *
+ * Additive rather than `setSurfaceRaycastLayers`: that helper resets the mask
+ * for the private raycasters callers build per query, and this one is shared.
+ */
+export declare const PointerRaycastLayers: () => null;
+//# sourceMappingURL=pointer-raycast-layers.d.ts.map

package/dist/components/viewer/pointer-raycast-layers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pointer-raycast-layers.d.ts","sourceRoot":"","sources":["../../../src/components/viewer/pointer-raycast-layers.tsx"],"names":[],"mappings":"AAMA;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,oBAAoB,YAYhC,CAAA"}