jev-devtools 0.1.2 → 0.2.0

package/lib/src/useDiagramViewport.js

@@ -0,0 +1,183 @@
+import { useCallback, useEffect, useLayoutEffect, useRef, useState, } from "react";
+import { fitCamera, zoomCamera, } from "./diagram-camera.js";
+/** Lab-style camera. Pointer frames update the transform without rerendering cards. */
+export function useDiagramViewport(width, height, scene) {
+    const viewport = useRef(null);
+    const canvas = useRef(null);
+    const camera = useRef({ x: 0, y: 0, scale: 1 });
+    const size = useRef({ width: 0, height: 0 });
+    const fitted = useRef(true);
+    const bounds = useRef({ width, height });
+    useLayoutEffect(() => {
+        bounds.current = { width, height };
+    }, [width, height]);
+    const frame = useRef(null);
+    const [zoom, setZoom] = useState(100);
+    const paint = useCallback(() => {
+        if (frame.current !== null)
+            return;
+        frame.current = requestAnimationFrame(() => {
+            frame.current = null;
+            const { x, y, scale } = camera.current;
+            if (canvas.current)
+                canvas.current.style.transform = `translate(${x}px, ${y}px) scale(${scale})`;
+            if (viewport.current) {
+                viewport.current.style.backgroundPosition = `${x}px ${y}px`;
+                viewport.current.style.backgroundSize = `${20 * scale}px ${20 * scale}px`;
+            }
+            setZoom(Math.round(scale * 100));
+        });
+    }, []);
+    const fit = useCallback(() => {
+        fitted.current = true;
+        if (size.current.width <= 0 || size.current.height <= 0)
+            return;
+        camera.current = fitCamera(size.current, bounds.current);
+        paint();
+    }, [paint]);
+    const preserveCamera = useCallback(() => {
+        fitted.current = false;
+    }, []);
+    useEffect(() => {
+        if (fitted.current)
+            fit();
+    }, [width, height, fit]);
+    const zoomBy = useCallback((factor, point) => {
+        fitted.current = false;
+        camera.current = zoomCamera(camera.current, factor, point ?? { x: size.current.width / 2, y: size.current.height / 2 });
+        paint();
+    }, [paint]);
+    useEffect(() => {
+        const el = viewport.current;
+        if (!el)
+            return;
+        const pointers = new Map();
+        const local = (event) => {
+            const rect = el.getBoundingClientRect();
+            return {
+                x: event.clientX - rect.left - el.clientLeft,
+                y: event.clientY - rect.top - el.clientTop,
+            };
+        };
+        const measure = () => {
+            const next = { width: el.clientWidth, height: el.clientHeight };
+            if (next.width <= 0 || next.height <= 0)
+                return; // Closed drawer.
+            const previous = size.current;
+            size.current = next;
+            if (fitted.current)
+                fit();
+            else {
+                camera.current.x += (next.width - previous.width) / 2;
+                camera.current.y += (next.height - previous.height) / 2;
+                paint();
+            }
+        };
+        const down = (event) => {
+            if (event.button !== 0 ||
+                pointers.size >= 2 ||
+                event.target.closest("button, input, select, textarea, a, summary"))
+                return;
+            event.preventDefault();
+            el.focus({ preventScroll: true });
+            el.setPointerCapture(event.pointerId);
+            pointers.set(event.pointerId, local(event));
+            el.dataset.panning = "true";
+        };
+        const move = (event) => {
+            if (!pointers.has(event.pointerId))
+                return;
+            const before = [...pointers.values()];
+            pointers.set(event.pointerId, local(event));
+            const after = [...pointers.values()];
+            fitted.current = false;
+            if (before.length === 1) {
+                camera.current.x += after[0].x - before[0].x;
+                camera.current.y += after[0].y - before[0].y;
+            }
+            else {
+                const center = (p) => ({
+                    x: (p[0].x + p[1].x) / 2,
+                    y: (p[0].y + p[1].y) / 2,
+                });
+                const distance = (p) => Math.hypot(p[0].x - p[1].x, p[0].y - p[1].y);
+                camera.current = zoomCamera(camera.current, distance(after) / Math.max(1, distance(before)), center(before), center(after));
+            }
+            paint();
+        };
+        const release = (event) => {
+            pointers.delete(event.pointerId);
+            if (el.hasPointerCapture(event.pointerId))
+                el.releasePointerCapture(event.pointerId);
+            if (!pointers.size)
+                delete el.dataset.panning;
+        };
+        const wheel = (event) => {
+            event.preventDefault();
+            const units = event.deltaMode === 1
+                ? 16
+                : event.deltaMode === 2
+                    ? el.clientHeight
+                    : 1;
+            // Match the lab viewer's anchored wheel/pinch zoom, including trackpads.
+            zoomBy(Math.exp(-Math.max(-100, Math.min(100, event.deltaY * units)) *
+                (event.ctrlKey ? 0.01 : 0.003)), local(event));
+        };
+        const keydown = (event) => {
+            if (event.target !== el)
+                return;
+            const step = event.shiftKey ? 100 : 40;
+            if (event.key === "+" || event.key === "=")
+                zoomBy(1.2);
+            else if (event.key === "-")
+                zoomBy(1 / 1.2);
+            else if (event.key === "0" || event.key === "Home")
+                fit();
+            else if (["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown"].includes(event.key)) {
+                fitted.current = false;
+                if (event.key === "ArrowLeft")
+                    camera.current.x += step;
+                if (event.key === "ArrowRight")
+                    camera.current.x -= step;
+                if (event.key === "ArrowUp")
+                    camera.current.y += step;
+                if (event.key === "ArrowDown")
+                    camera.current.y -= step;
+                paint();
+            }
+            else
+                return;
+            event.preventDefault();
+        };
+        fitted.current = true;
+        measure();
+        const observer = new ResizeObserver(measure);
+        observer.observe(el);
+        el.addEventListener("pointerdown", down);
+        el.addEventListener("pointermove", move);
+        el.addEventListener("pointerup", release);
+        el.addEventListener("pointercancel", release);
+        el.addEventListener("lostpointercapture", release);
+        el.addEventListener("wheel", wheel, { passive: false });
+        el.addEventListener("keydown", keydown);
+        return () => {
+            observer.disconnect();
+            el.removeEventListener("pointerdown", down);
+            el.removeEventListener("pointermove", move);
+            el.removeEventListener("pointerup", release);
+            el.removeEventListener("pointercancel", release);
+            el.removeEventListener("lostpointercapture", release);
+            el.removeEventListener("wheel", wheel);
+            el.removeEventListener("keydown", keydown);
+            for (const pointer of pointers.keys())
+                if (el.hasPointerCapture(pointer))
+                    el.releasePointerCapture(pointer);
+            pointers.clear();
+            delete el.dataset.panning;
+            if (frame.current !== null)
+                cancelAnimationFrame(frame.current);
+            frame.current = null;
+        };
+    }, [fit, zoomBy, paint, scene]);
+    return { viewport, canvas, zoom, zoomBy, fit, preserveCamera };
+}

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "jev-devtools",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "type": "module",
   "engines": {
     "node": ">=22.12"
   },
   "dependencies": {
+    "@tanstack/react-virtual": "3.14.22",
     "@typesafe-ai/sdk": "0.7.0"
   },
   "description": "A React drawer and Node server adapter for inspecting TypeSafe Jev requests.",
@@ -46,7 +47,7 @@
     "check": "tsc --noEmit",
     "test": "node --import tsx --test tests/*.test.ts",
     "build": "tsc -p tsconfig.lib.json && node scripts/copy-styles.mjs",
-    "prepack": "npm run build"
+    "prepack": "node ../../scripts/sync-readme-version.mjs --check && npm run build"
   },
   "publishConfig": {
     "access": "public",

package/skills/setup-jev-devtools/references/verify.md

@@ -79,3 +79,5 @@ Report HTTP/capture checks separately from visual browser checks, and sample ver
 | Production 404 | Expected when disabled; app inference remains independent. |
 
 Capture is bounded to 50 calls in memory by default. Built-in redaction has limits; arbitrary secrets in prose are not detected. Diagrams show captured inputs/outputs, not hidden model reasoning or application routing decisions.
+
+The current browser requests `/events?protocol=2`: the first event is a full version 2 `snapshot`, followed by `delta` events containing changed traces and the retained ID order. The unqualified `/events` check above intentionally remains compatible with legacy clients. Reconnecting always supplies a fresh snapshot.