jev-devtools 0.1.2 → 0.1.3

package/README.md

@@ -1,6 +1,6 @@
 # Jev DevTools
 
-[![npm version](https://img.shields.io/npm/v/jev-devtools/latest?color=E551BA&labelColor=0D0A0F&logo=npm)](https://www.npmjs.com/package/jev-devtools)
+[![npm version 0.1.3](https://img.shields.io/badge/npm-v0.1.3-E551BA?labelColor=0D0A0F&logo=npm)](https://www.npmjs.com/package/jev-devtools/v/0.1.3)
 
 A React drawer and Node adapter for inspecting TypeSafe Jev requests with animated diagrams. Includes request history, context, questions, typed answers, transport attempts, and raw snapshots.
 
@@ -42,7 +42,7 @@ To try unpublished local changes instead:
 npm ci
 npm run pack:devtools
 # From the consuming app:
-npm install /absolute/path/to/jev-devtools-0.1.2.tgz
+npm install /absolute/path/to/jev-devtools-0.1.3.tgz
 ```
 
 Mount once:
@@ -69,7 +69,7 @@ app.use(inspector.middleware); // Mount at root, before fallback handlers.
 // Call inspector.dispose() on shutdown.
 ```
 
-Only calls through that client are captured. The React component subscribes via same-origin SSE. Both sides default to disabled. API keys remain server-side. Browser code is SSR-safe and styles are scoped; no Tailwind or shadcn installation is required.
+Only calls through that client are captured. The React component subscribes via same-origin SSE. Both sides default to disabled. API keys remain server-side. Browser code is SSR-safe. The drawer uses a Shadow DOM boundary and its own stylesheet so host page selectors cannot alter its internal layout. Existing stylesheet imports remain supported; no Tailwind or shadcn installation is required. Drag the Flow canvas to pan, scroll/pinch to zoom, or use Fit.
 
 History is bounded to 50 calls in memory by default. API routes and inspector endpoints must share an adapter instance; distributed processes and edge runtimes are not supported. Non-loopback use requires explicit authorization. Captures include bounded/redacted context and answers, not hidden model reasoning.
 

package/lib/src/JevDevtools.js

@@ -46,12 +46,12 @@ export function JevPanel({ traces, connection, onClear, }) {
     const trace = filtered.find((t) => t.id === selected) || filtered[0];
     return (_jsxs("div", { className: "jev-inspector", children: [_jsxs("aside", { className: "request-list", children: [_jsxs("header", { children: [_jsxs("h2", { children: ["Jev requests ", _jsx("span", { children: traces.length })] }), _jsx("button", { onClick: () => void onClear().catch((e) => setError(e.message)), disabled: !traces.length, children: "Clear" })] }), _jsxs("div", { className: "list-filters", children: [_jsx("input", { "aria-label": "Search requests", placeholder: "Search requests\u2026", value: search, onChange: (e) => setSearch(e.target.value) }), _jsx("select", { "aria-label": "Filter request status", value: status, onChange: (e) => setStatus(e.target.value), children: ["all", "pending", "success", "error", "cancelled"].map((s) => (_jsx("option", { children: s }, s))) })] }), _jsxs("div", { className: "request-items", children: [filtered.map((t) => (_jsxs("button", { className: `request-row ${trace?.id === t.id ? "selected" : ""}`, onClick: () => setSelected(t.id), children: [_jsx("span", { className: `status-dot ${t.status}` }), _jsxs("span", { children: [_jsx("strong", { children: t.label }), _jsxs("small", { children: [new Date(t.startedAt).toLocaleTimeString(), " \u00B7 ", t.source, " \u00B7", " ", ms(t.durationMs)] })] }), _jsx("span", { className: "row-status", children: t.status })] }, t.id))), !filtered.length && (_jsx("p", { className: "empty", children: traces.length
                                     ? "No matching requests."
-                                    : "Run a scenario to capture your first request." }))] }), (connection !== "connected" || error) && (_jsxs("footer", { children: [connection !== "connected" && _jsx("span", { role: "status", children: connection }), error && _jsx("p", { role: "alert", children: error })] }))] }), _jsx("section", { className: "request-detail", children: trace ? (_jsxs(_Fragment, { children: [_jsxs("header", { className: "detail-header", children: [_jsxs("div", { children: [_jsxs("span", { className: "eyebrow", children: [trace.source, " response \u00B7 ", trace.status] }), _jsx("h2", { children: trace.label })] }), _jsxs("div", { className: "metrics", children: [_jsxs("span", { children: [ms(trace.durationMs), _jsx("small", { children: "Total duration" })] }), _jsxs("span", { children: [trace.attempts.length, _jsx("small", { children: "Attempts" })] }), _jsxs("span", { children: [trace.result?.usage
+                                    : "Run a scenario to capture your first request." }))] }), (connection !== "connected" || error) && (_jsxs("footer", { children: [connection !== "connected" && (_jsx("span", { role: "status", children: connection })), error && _jsx("p", { role: "alert", children: error })] }))] }), _jsx("section", { className: "request-detail", children: trace ? (_jsxs(_Fragment, { children: [_jsxs("header", { className: "detail-header", children: [_jsxs("div", { children: [_jsxs("span", { className: "eyebrow", children: [trace.source, " response \u00B7 ", trace.status] }), _jsx("h2", { children: trace.label })] }), _jsxs("div", { className: "metrics", children: [_jsxs("span", { children: [ms(trace.durationMs), _jsx("small", { children: "Total duration" })] }), _jsxs("span", { children: [trace.attempts.length, _jsx("small", { children: "Attempts" })] }), _jsxs("span", { children: [trace.result?.usage
                                                     ? `${trace.result.usage.input_tokens} / ${trace.result.usage.output_tokens}`
                                                     : "—", _jsx("small", { children: "Tokens in / out" })] })] })] }), _jsxs("div", { className: "detail-meta", children: [_jsx("code", { children: trace.result?.model || trace.request.model }), _jsx("code", { children: trace.requestId ||
                                         (trace.status === "pending"
                                             ? "Request ID pending"
-                                            : "No request ID") })] }), _jsx("nav", { className: "detail-tabs", "aria-label": "Request views", children: ["Flow", "Questions", "Context", "Transport", "Raw"].map((name) => (_jsx("button", { "aria-pressed": tab === name, onClick: () => setTab(name), children: name }, name))) }), _jsxs("div", { className: "detail-body", children: [trace.error && (_jsxs("div", { role: "alert", className: "error-banner", children: [_jsx("strong", { children: trace.error.name }), " ", trace.error.message] })), trace.captureWarnings.map((w) => (_jsx("p", { className: "warning", children: w }, w))), tab === "Flow" && _jsx(TraceDiagram, { trace: trace }, trace.id), tab === "Questions" &&
+                                            : "No request ID") })] }), _jsx("nav", { className: "detail-tabs", "aria-label": "Request views", children: ["Flow", "Questions", "Context", "Transport", "Raw"].map((name) => (_jsx("button", { "aria-pressed": tab === name, onClick: () => setTab(name), children: name }, name))) }), _jsxs("div", { className: `detail-body ${tab === "Flow" ? "detail-body-flow" : ""}`, children: [trace.error && (_jsxs("div", { role: "alert", className: "error-banner", children: [_jsx("strong", { children: trace.error.name }), " ", trace.error.message] })), trace.captureWarnings.map((w) => (_jsx("p", { className: "warning", children: w }, w))), tab === "Flow" && _jsx(TraceDiagram, { trace: trace }, trace.id), tab === "Questions" &&
                                     Object.entries(trace.request.questions ?? {})
                                         .filter(([, q]) => q && typeof q === "object" && typeof q.type === "string")
                                         .map(([key, q]) => (_jsxs("article", { className: "question-node standalone", children: [_jsxs("header", { children: [_jsx("h3", { children: key }), _jsx("span", { className: "type", children: q.type })] }), _jsx(JsonBlock, { value: q }), _jsx(Answer, { answer: trace.result?.answers[key], image: findImage(trace.request.state) })] }, key))), tab === "Context" && (_jsxs(_Fragment, { children: [_jsx("p", { className: "muted", children: "Captured before dispatch. Known credential fields and email are redacted; captures are size limited." }), findImage(trace.request.state) && (_jsx("img", { className: "context-image", src: findImage(trace.request.state), alt: "Captured context" })), _jsx(JsonBlock, { value: trace.request.state }), trace.request.assets && (_jsx(JsonBlock, { value: trace.request.assets }))] })), tab === "Transport" && (_jsxs(_Fragment, { children: [_jsx("h3", { children: "HTTP attempts" }), _jsx("p", { className: "muted", children: "Attempt duration ends at response headers. Total duration includes SDK processing and retry waits." }), _jsxs("table", { children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { children: "Attempt" }), _jsx("th", { children: "Status" }), _jsx("th", { children: "Duration" })] }) }), _jsx("tbody", { children: trace.attempts.map((a) => (_jsxs("tr", { children: [_jsx("td", { children: a.number }), _jsx("td", { children: a.error || a.status || "Pending" }), _jsx("td", { children: ms(a.durationMs) })] }, a.number))) })] }), !trace.attempts.length && _jsx("p", { children: "No HTTP attempt recorded." })] })), tab === "Raw" && _jsx(JsonBlock, { value: trace })] })] })) : (_jsxs("div", { className: "empty-detail", children: [_jsx("span", { className: "empty-symbol", children: "\u21B3" }), _jsx("h2", { children: "Follow a Jev request" }), _jsxs("p", { children: ["Context, parallel questions, typed answers.", _jsx("br", {}), "Run a sample above to see the complete flow."] })] })) })] }));

package/lib/src/JevDrawer.d.ts

@@ -3,4 +3,4 @@ import { type ReactNode } from "react";
 export declare function JevDrawer({ children, defaultOpen, }: {
     children: ReactNode;
     defaultOpen?: boolean;
-}): import("react").ReactPortal;
+}): import("react").ReactPortal | null;

package/lib/src/JevDrawer.js

@@ -2,6 +2,7 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 import { useEffect, useId, useRef, useState } from "react";
 import { TypeSafeMark } from "./TypeSafeMark.js";
 import { createPortal } from "react-dom";
+import { inspectorStyles } from "./inspector-styles.js";
 const heightKey = "jev-inspector-drawer-height";
 const viewportHeight = () => window.visualViewport?.height ?? window.innerHeight;
 const limits = (viewport) => ({
@@ -26,6 +27,7 @@ function initialHeight() {
 /** Non-modal drawer: the app remains usable and children stay mounted when closed. */
 export function JevDrawer({ children, defaultOpen = true, }) {
     const id = useId();
+    const [root, setRoot] = useState(null);
     const [open, setOpen] = useState(defaultOpen);
     const [expanded, setExpanded] = useState(false);
     const [viewport, setViewport] = useState(viewportHeight);
@@ -37,6 +39,20 @@ export function JevDrawer({ children, defaultOpen = true, }) {
     const drag = useRef(null);
     const { min, max } = limits(viewport);
     const visibleHeight = expanded ? max : clamp(height, viewport);
+    useEffect(() => {
+        const host = document.createElement("jev-devtools-root");
+        // The host is the only element exposed to page selectors. The overlay itself
+        // lives in the shadow tree, with its own typography and component styles.
+        host.style.cssText =
+            "all: initial !important; position: fixed !important; inset: 0 !important; pointer-events: none !important; z-index: 2147483000 !important;";
+        const shadow = host.attachShadow({ mode: "open" });
+        const style = document.createElement("style");
+        style.textContent = inspectorStyles;
+        shadow.append(style);
+        document.body.append(host);
+        setRoot(shadow);
+        return () => host.remove();
+    }, []);
     useEffect(() => {
         const resize = () => setViewport(viewportHeight());
         window.addEventListener("resize", resize);
@@ -57,7 +73,7 @@ export function JevDrawer({ children, defaultOpen = true, }) {
     useEffect(() => {
         if (interacted.current)
             (open ? closeButton.current : trigger.current)?.focus();
-    }, [open]);
+    }, [open, root]);
     const toggle = (value) => {
         interacted.current = true;
         setOpen(value);
@@ -66,7 +82,9 @@ export function JevDrawer({ children, defaultOpen = true, }) {
         setExpanded(false);
         setHeight(clamp(value, viewport));
     };
-    return createPortal(_jsxs(_Fragment, { children: [_jsxs("button", { ref: trigger, className: "jev-devtools jev-drawer-trigger", hidden: open, "aria-label": "Open Jev DevTools", "aria-expanded": open, "aria-controls": id, onClick: () => toggle(true), children: [_jsx(TypeSafeMark, {}), " Jev DevTools"] }), _jsxs("section", { ref: panel, id: id, className: "jev-devtools jev-drawer", hidden: !open, "aria-label": "Jev DevTools", style: { height: visibleHeight }, onKeyDown: (event) => {
+    if (!root)
+        return null;
+    return createPortal(_jsxs(_Fragment, { children: [_jsxs("button", { ref: trigger, className: "jev-devtools jev-drawer-trigger", hidden: open, "aria-label": "Open Jev DevTools", "aria-expanded": open, "aria-controls": id, onClick: () => toggle(true), children: [_jsx(TypeSafeMark, {}), " Jev DevTools"] }), _jsxs("div", { ref: panel, id: id, className: "jev-devtools jev-drawer", hidden: !open, role: "region", "aria-label": "Jev DevTools", style: { height: visibleHeight }, onKeyDown: (event) => {
                     if (event.key === "Escape" && !event.defaultPrevented) {
                         event.stopPropagation();
                         toggle(false);
@@ -107,5 +125,5 @@ export function JevDrawer({ children, defaultOpen = true, }) {
                                 event.preventDefault();
                                 resizeTo(next);
                             }
-                        }, children: _jsx("span", {}) }), _jsxs("header", { className: "jev-drawer-header", children: [_jsxs("strong", { children: [_jsx(TypeSafeMark, {}), "Jev DevTools"] }), _jsxs("div", { children: [_jsx("button", { "aria-label": expanded ? "Restore Jev drawer" : "Expand Jev drawer", "aria-pressed": expanded, onClick: () => setExpanded(!expanded), children: expanded ? "Restore" : "Expand" }), _jsx("button", { ref: closeButton, className: "jev-drawer-close", "aria-label": "Close Jev DevTools", title: "Close (Esc)", onClick: () => toggle(false), children: "\u00D7" })] })] }), _jsx("div", { className: "jev-drawer-content", children: children })] })] }), document.body);
+                        }, children: _jsx("span", {}) }), _jsxs("header", { className: "jev-drawer-header", children: [_jsxs("strong", { children: [_jsx(TypeSafeMark, {}), "Jev DevTools"] }), _jsxs("div", { children: [_jsx("button", { "aria-label": expanded ? "Restore Jev drawer" : "Expand Jev drawer", "aria-pressed": expanded, onClick: () => setExpanded(!expanded), children: expanded ? "Restore" : "Expand" }), _jsx("button", { ref: closeButton, className: "jev-drawer-close", "aria-label": "Close Jev DevTools", title: "Close (Esc)", onClick: () => toggle(false), children: "\u00D7" })] })] }), _jsx("div", { className: "jev-drawer-content", children: children })] })] }), root);
 }

package/lib/src/TraceDiagram.js

@@ -1,5 +1,6 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from "react";
+import { useState } from "react";
+import { useDiagramViewport } from "./useDiagramViewport.js";
 import { findImage, flowAnswer, stateText } from "./flow-model.js";
 const pct = (v) => `${Math.round(v * 100)}%`;
 function Result({ answer, image }) {
@@ -23,8 +24,7 @@ function Result({ answer, image }) {
                                 } }))] }), _jsxs("p", { className: "lab-small lab-coordinates", children: ["left ", answer.box.left.toFixed(2), " \u00B7 top ", answer.box.top.toFixed(2), _jsx("br", {}), "right ", answer.box.right.toFixed(2), " \u00B7 bottom", " ", answer.box.bottom.toFixed(2)] })] })), answer.confidence !== undefined && (_jsxs("p", { className: "lab-small", children: ["Confidence ", pct(answer.confidence)] }))] }));
 }
 export function TraceDiagram({ trace }) {
-    const [selected, setSelected] = useState(""), [zoom, setZoom] = useState(0.8), [flow, setFlow] = useState(true);
-    const viewport = useRef(null);
+    const [selected, setSelected] = useState(""), [flow, setFlow] = useState(true);
     const entries = Object.entries(trace.request.questions ?? {}).filter(([, q]) => q && typeof q === "object" && typeof q.type === "string"), [key, question] = entries.find(([key]) => key === selected) ??
         entries[0] ?? ["", undefined];
     const answer = trace.result?.answers[key], image = findImage(trace.request.state) ||
@@ -33,14 +33,7 @@ export function TraceDiagram({ trace }) {
         Object.keys(answer?.probabilities ?? {}).length * 44 +
         (answer?.score !== undefined ? 50 : 0), answer?.box ? 390 : 0);
     const height = Math.max(520, resultHeight + 90, outputs.length * 136 + 60), ry = Math.max(40, (height - resultHeight) / 2), mid = ry + resultHeight / 2;
-    const fit = () => {
-        if (viewport.current)
-            setZoom(Math.min(1, (viewport.current.clientWidth - 24) / 1120));
-    };
-    useEffect(() => {
-        if (viewport.current)
-            setZoom(Math.min(1, Math.max(0.75, (viewport.current.clientWidth - 24) / 1120)));
-    }, []);
+    const { viewport, canvas, zoom, zoomBy, fit } = useDiagramViewport(1120, height, key);
     if (!question)
         return _jsx("p", { className: "muted", children: "No questions available in this capture." });
     const sourcePath = (y) => `M260 ${y} C325 ${y},325 ${mid},390 ${mid}`;
@@ -53,21 +46,21 @@ export function TraceDiagram({ trace }) {
             active: output.active,
         })),
     ];
-    return (_jsxs("div", { className: "lab-flow", children: [_jsxs("div", { className: "lab-flow-toolbar", children: [_jsxs("label", { children: ["Question", _jsx("select", { "aria-label": "Diagram question", value: key, onChange: (event) => setSelected(event.target.value), children: entries.map(([name, q]) => (_jsxs("option", { value: name, children: [name, " \u00B7 ", q.type] }, name))) })] }), _jsxs("div", { children: [_jsx("button", { "aria-label": "Zoom diagram out", onClick: () => setZoom((v) => Math.max(0.4, v - 0.1)), children: "\u2212" }), _jsxs("output", { "aria-label": "Diagram zoom", children: [Math.round(zoom * 100), "%"] }), _jsx("button", { "aria-label": "Zoom diagram in", onClick: () => setZoom((v) => Math.min(1.5, v + 0.1)), children: "+" }), _jsx("button", { onClick: fit, children: "Fit" }), _jsx("button", { "aria-pressed": flow, onClick: () => setFlow(!flow), children: flow ? "Pause flow" : "Play flow" })] })] }), _jsx("div", { className: "lab-flow-viewport", ref: viewport, tabIndex: 0, "aria-label": "Jev diagram, scroll to explore", children: _jsx("div", { style: { width: 1120 * zoom, height: height * zoom }, children: _jsxs("div", { className: "lab-flow-canvas", style: { width: 1120, height, transform: `scale(${zoom})` }, children: [_jsxs("svg", { className: "lab-connections", width: "1120", height: height, "aria-hidden": "true", children: [paths.map((path) => (_jsxs("g", { children: [_jsx("path", { d: path.d, className: path.active ? "active" : "" }), flow &&
-                                                path.active &&
-                                                !["error", "cancelled"].includes(trace.status) && (_jsx("circle", { r: "3", className: "lab-flow-dot", children: _jsx("animateMotion", { dur: "3.2s", repeatCount: "indefinite", path: path.d }) }))] }, path.id))), _jsx("text", { x: "305", y: mid - 65, children: "state" }), _jsx("text", { x: "300", y: mid + 65, children: "question" })] }), _jsxs("article", { className: "lab-card", style: { left: 20, top: 32, width: 240, height: 180 }, children: [_jsx("span", { className: "lab-eyebrow", children: image ? "IMAGE STATE" : "STATE" }), _jsx("h3", { children: "Shared context" }), image ? (_jsx("img", { className: "lab-source-image", src: image, alt: "Captured image state" })) : (_jsx("p", { className: "lab-copy", title: stateText(trace), children: stateText(trace) }))] }), _jsxs("article", { className: "lab-card", style: { left: 20, top: 288, width: 240, height: 180 }, children: [_jsx("span", { className: "lab-eyebrow", children: "INSTRUCTIONS" }), _jsxs("h3", { children: ["Question \u00B7 ", question.type] }), _jsx("p", { className: "lab-copy", title: typeof question.instructions === "string"
-                                            ? question.instructions
-                                            : JSON.stringify(question.instructions), children: typeof question.instructions === "string"
-                                            ? question.instructions
-                                            : JSON.stringify(question.instructions) })] }), _jsxs("article", { className: "lab-card lab-answer-card", style: {
-                                    left: 390,
-                                    top: ry,
-                                    width: 320,
-                                    minHeight: resultHeight,
-                                }, children: [_jsxs("span", { className: "lab-eyebrow", children: ["JEV \u00B7 ", question.type.toUpperCase()] }), _jsx("h3", { title: key, children: key }), _jsx(Result, { answer: answer, image: image })] }), outputs.map((output, i) => (_jsxs("article", { className: `lab-card lab-output ${output.active ? "" : "lab-idle"}`, style: {
-                                    left: 870,
-                                    top: 40 + i * 136,
-                                    width: 230,
-                                    minHeight: 104,
-                                }, children: [_jsx("span", { className: "lab-eyebrow", children: output.eyebrow }), _jsx("h3", { title: output.label, children: output.label }), _jsx("p", { children: output.detail })] }, i)))] }) }) }), _jsxs("p", { className: "muted", children: [entries.length, " parallel question", entries.length === 1 ? "" : "s", " in one request. Connections show data flow, not model timing. Application routes and thresholds are not captured. Full inputs and criteria are in Questions and Context."] })] }));
+    return (_jsxs("div", { className: "lab-flow", children: [_jsxs("div", { className: "lab-flow-toolbar", children: [_jsxs("label", { children: ["Question", _jsx("select", { "aria-label": "Diagram question", value: key, onChange: (event) => setSelected(event.target.value), children: entries.map(([name, q]) => (_jsxs("option", { value: name, children: [name, " \u00B7 ", q.type] }, name))) })] }), _jsxs("div", { children: [_jsx("button", { "aria-label": "Zoom diagram out", disabled: zoom <= 10, onClick: () => zoomBy(1 / 1.2), children: "\u2212" }), _jsxs("output", { "aria-label": "Diagram zoom", children: [zoom, "%"] }), _jsx("button", { "aria-label": "Zoom diagram in", disabled: zoom >= 400, onClick: () => zoomBy(1.2), children: "+" }), _jsx("button", { onClick: fit, children: "Fit" }), _jsx("button", { "aria-pressed": flow, onClick: () => setFlow(!flow), children: flow ? "Pause flow" : "Play flow" })] })] }), _jsx("div", { className: "lab-flow-viewport", ref: viewport, tabIndex: 0, role: "group", "aria-label": "Jev diagram. Drag to pan, scroll or pinch to zoom. Arrow keys pan, plus and minus zoom, zero fits.", children: _jsxs("div", { ref: canvas, className: "lab-flow-canvas", style: { width: 1120, height }, children: [_jsxs("svg", { className: "lab-connections", width: "1120", height: height, "aria-hidden": "true", children: [paths.map((path) => (_jsxs("g", { children: [_jsx("path", { d: path.d, className: path.active ? "active" : "" }), flow &&
+                                            path.active &&
+                                            !["error", "cancelled"].includes(trace.status) && (_jsx("circle", { r: "3", className: "lab-flow-dot", children: _jsx("animateMotion", { dur: "3.2s", repeatCount: "indefinite", path: path.d }) }))] }, path.id))), _jsx("text", { x: "305", y: mid - 65, children: "state" }), _jsx("text", { x: "300", y: mid + 65, children: "question" })] }), _jsxs("article", { className: "lab-card", style: { left: 20, top: 32, width: 240, height: 180 }, children: [_jsx("span", { className: "lab-eyebrow", children: image ? "IMAGE STATE" : "STATE" }), _jsx("h3", { children: "Shared context" }), image ? (_jsx("img", { className: "lab-source-image", src: image, alt: "Captured image state" })) : (_jsx("p", { className: "lab-copy", title: stateText(trace), children: stateText(trace) }))] }), _jsxs("article", { className: "lab-card", style: { left: 20, top: 288, width: 240, height: 180 }, children: [_jsx("span", { className: "lab-eyebrow", children: "INSTRUCTIONS" }), _jsxs("h3", { children: ["Question \u00B7 ", question.type] }), _jsx("p", { className: "lab-copy", title: typeof question.instructions === "string"
+                                        ? question.instructions
+                                        : JSON.stringify(question.instructions), children: typeof question.instructions === "string"
+                                        ? question.instructions
+                                        : JSON.stringify(question.instructions) })] }), _jsxs("article", { className: "lab-card lab-answer-card", style: {
+                                left: 390,
+                                top: ry,
+                                width: 320,
+                                minHeight: resultHeight,
+                            }, children: [_jsxs("span", { className: "lab-eyebrow", children: ["JEV \u00B7 ", question.type.toUpperCase()] }), _jsx("h3", { title: key, children: key }), _jsx(Result, { answer: answer, image: image })] }), outputs.map((output, i) => (_jsxs("article", { className: `lab-card lab-output ${output.active ? "" : "lab-idle"}`, style: {
+                                left: 870,
+                                top: 40 + i * 136,
+                                width: 230,
+                                minHeight: 104,
+                            }, children: [_jsx("span", { className: "lab-eyebrow", children: output.eyebrow }), _jsx("h3", { title: output.label, children: output.label }), _jsx("p", { children: output.detail })] }, i)))] }) }), _jsxs("p", { className: "muted lab-flow-caption", children: [_jsx("span", { className: "lab-gesture-hint", children: "Drag to pan \u00B7 Scroll or pinch to zoom \u00B7 0 to fit" }), entries.length, " parallel question", entries.length === 1 ? "" : "s", " in one request. Connections show data flow, not model timing. Application routes and thresholds are not captured. Full inputs and criteria are in Questions and Context."] })] }));
 }

package/lib/src/diagram-camera.d.ts

@@ -0,0 +1,16 @@
+export type Point = {
+    x: number;
+    y: number;
+};
+export type Camera = Point & {
+    scale: number;
+};
+export type Size = {
+    width: number;
+    height: number;
+};
+export declare const minScale = 0.1;
+export declare const maxScale = 4;
+export declare function fitCamera(view: Size, content: Size): Camera;
+/** Keep the content under `from` under `to`, including while a pinch moves. */
+export declare function zoomCamera(camera: Camera, factor: number, from: Point, to?: Point): Camera;

package/lib/src/diagram-camera.js

@@ -0,0 +1,20 @@
+export const minScale = 0.1;
+export const maxScale = 4;
+const limit = (scale) => Math.max(minScale, Math.min(maxScale, scale));
+export function fitCamera(view, content) {
+    const scale = limit(Math.min((view.width - 48) / content.width, (view.height - 48) / content.height, 1));
+    return {
+        x: (view.width - content.width * scale) / 2,
+        y: (view.height - content.height * scale) / 2,
+        scale,
+    };
+}
+/** Keep the content under `from` under `to`, including while a pinch moves. */
+export function zoomCamera(camera, factor, from, to = from) {
+    const scale = limit(camera.scale * factor);
+    return {
+        x: to.x - ((from.x - camera.x) * scale) / camera.scale,
+        y: to.y - ((from.y - camera.y) * scale) / camera.scale,
+        scale,
+    };
+}

package/lib/src/inspector-styles.d.ts

@@ -0,0 +1,2 @@
+/** Generated from inspector.css during the package build. */
+export declare const inspectorStyles: string;

package/lib/src/inspector-styles.js

@@ -0,0 +1 @@
+export const inspectorStyles = ".jev-devtools {\n  all: initial;\n  display: block;\n  direction: ltr;\n  unicode-bidi: isolate;\n  pointer-events: auto;\n  color-scheme: dark;\n  font:\n    12px system-ui,\n    sans-serif;\n  color: #eee8ed;\n  line-height: 1.5;\n}\n.jev-devtools,\n.jev-devtools * {\n  box-sizing: border-box;\n}\n.jev-devtools button,\n.jev-devtools input,\n.jev-devtools select,\n.jev-devtools textarea {\n  font: inherit;\n  color: inherit;\n  border: 1px solid #3b303d;\n  border-radius: 5px;\n  background: #17121b;\n}\n.jev-devtools button {\n  padding: 7px 11px;\n  cursor: pointer;\n}\n.jev-devtools button:disabled {\n  opacity: 0.45;\n  cursor: default;\n}\n.jev-devtools input,\n.jev-devtools select {\n  padding: 8px;\n  width: 100%;\n}\n.jev-devtools button:hover:not(:disabled) {\n  border-color: #e551ba;\n}\n.jev-devtools :is(button, input, select, textarea, summary):focus-visible {\n  outline: 2px solid #e551ba;\n  outline-offset: 3px;\n}\n.jev-devtools .eyebrow {\n  font-size: 10px;\n  letter-spacing: 0.12em;\n  color: #bc9db5;\n  text-transform: uppercase;\n}\n.jev-devtools .jev-inspector {\n  height: 100%;\n  display: flex;\n  color: #eee8ed;\n  background: #0d0a0f;\n  font:\n    12px \"DM Sans\",\n    sans-serif;\n  min-height: 0;\n  overflow: hidden;\n}\n.jev-devtools .jev-inspector h2 {\n  font-size: 15px;\n  margin: 0;\n  font-weight: 600;\n}\n.jev-devtools .jev-inspector h3 {\n  font-size: 13px;\n  margin: 0 0 8px;\n}\n.jev-devtools .jev-inspector code,\n.jev-devtools .jev-inspector pre {\n  font:\n    11px \"JetBrains Mono\",\n    monospace;\n}\n.jev-devtools .jev-inspector pre {\n  line-height: 1.7;\n  white-space: pre-wrap;\n  overflow-wrap: anywhere;\n  max-height: 460px;\n  overflow: auto;\n  background: #100d13;\n  padding: 16px;\n  border: 1px solid #2e2533;\n  border-radius: 5px;\n}\n.jev-devtools .jev-inspector .muted {\n  color: #a89bac;\n  font-size: 11px;\n  line-height: 1.6;\n}\n.jev-devtools .request-list {\n  flex: 0 0 300px;\n  border-right: 1px solid #302634;\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n}\n.jev-devtools .request-list > header {\n  padding: 17px 14px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n.jev-devtools .request-list h2 span {\n  font-size: 11px;\n  color: #b796ad;\n  margin-left: 5px;\n}\n.jev-devtools .request-list button {\n  font-size: 11px;\n}\n.jev-devtools .list-filters {\n  display: flex;\n  gap: 7px;\n  padding: 0 12px 12px;\n}\n.jev-devtools .list-filters input {\n  min-width: 0;\n}\n.jev-devtools .list-filters select {\n  width: 86px;\n  font-size: 11px;\n}\n.jev-devtools .request-items {\n  overflow: auto;\n  flex: 1;\n}\n.jev-devtools .request-row {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  width: 100%;\n  text-align: left;\n  border: 0;\n  border-top: 1px solid #251d2a;\n  border-radius: 0;\n  background: transparent;\n  padding: 16px 12px;\n}\n.jev-devtools .request-row.selected {\n  background: #251423;\n  box-shadow: inset 2px 0 #e551ba;\n}\n.jev-devtools .request-row strong {\n  display: block;\n  font-size: 12px;\n  font-weight: 500;\n}\n.jev-devtools .request-row small {\n  display: block;\n  font-size: 10px;\n  color: #a99aac;\n  margin-top: 6px;\n}\n.jev-devtools .row-status {\n  font-size: 9px;\n  color: #ad9bb0;\n  margin-left: auto;\n}\n.jev-devtools .status-dot {\n  width: 6px;\n  height: 6px;\n  display: inline-block;\n  border-radius: 50%;\n  background: #b09ab7;\n  flex-shrink: 0;\n}\n.jev-devtools .status-dot.success {\n  background: #b3c79c;\n}\n.jev-devtools .status-dot.pending {\n  background: #e551ba;\n}\n.jev-devtools .status-dot.error {\n  background: #ee8e85;\n}\n.jev-devtools .request-list footer {\n  padding: 12px;\n  color: #9e8ea5;\n  border-top: 1px solid #302634;\n  font-size: 10px;\n  display: flex;\n  gap: 7px;\n}\n.jev-devtools .request-detail {\n  flex: 1;\n  min-width: 0;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n}\n.jev-devtools .detail-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 20px;\n  padding: 18px 24px 10px;\n}\n.jev-devtools .detail-header h2 {\n  margin-top: 6px;\n}\n.jev-devtools .metrics {\n  display: flex;\n  gap: 24px;\n  font:\n    12px \"JetBrains Mono\",\n    monospace;\n  white-space: nowrap;\n}\n.jev-devtools .metrics small {\n  display: block;\n  font:\n    9px \"DM Sans\",\n    sans-serif;\n  color: #97879f;\n  margin-top: 6px;\n}\n.jev-devtools .detail-meta {\n  display: flex;\n  gap: 20px;\n  flex-wrap: wrap;\n  padding: 0 24px 14px;\n  color: #a08aa5;\n}\n.jev-devtools .detail-meta code {\n  font-size: 10px;\n}\n.jev-devtools .detail-tabs {\n  display: flex;\n  gap: 20px;\n  border-bottom: 1px solid #302634;\n  padding: 0 24px;\n}\n.jev-devtools .detail-tabs button {\n  border: 0;\n  border-radius: 0;\n  background: none;\n  padding: 10px 0;\n  color: #a89bac;\n  font-size: 11px;\n}\n.jev-devtools .detail-tabs button[aria-pressed=\"true\"] {\n  box-shadow: inset 0 -2px #e551ba;\n  color: #f5c1e6;\n}\n.jev-devtools .detail-body {\n  overflow: auto;\n  flex: 1;\n  min-height: 0;\n  padding: 16px 24px 28px;\n  background-image: radial-gradient(#342337 0.6px, transparent 0.6px);\n  background-size: 16px 16px;\n}\n.jev-devtools .request-flow {\n  display: flex;\n  align-items: center;\n  gap: 40px;\n  padding: 14px 0 20px;\n}\n.jev-devtools .state-node {\n  position: relative;\n  flex: 0 0 160px;\n  border: 1px solid #e551ba;\n  padding: 20px 15px;\n  background: #1f1320;\n  border-radius: 6px;\n}\n.jev-devtools .state-node h3 {\n  margin-top: 12px;\n}\n.jev-devtools .state-node p {\n  color: #b69db3;\n  line-height: 1.5;\n}\n.jev-devtools .state-node code {\n  font-size: 10px;\n}\n.jev-devtools .state-node:after {\n  content: \"\";\n  position: absolute;\n  left: 100%;\n  top: 50%;\n  width: 20px;\n  border-top: 1px solid #7f416d;\n}\n.jev-devtools .question-branches {\n  border-left: 1px solid #7f416d;\n  padding-left: 20px;\n  display: grid;\n  grid-template-columns: repeat(3, minmax(160px, 1fr));\n  gap: 12px;\n  flex: 1;\n  position: relative;\n}\n.jev-devtools .question-node {\n  position: relative;\n  border: 1px solid #75516c;\n  border-radius: 6px;\n  padding: 15px;\n  background: #110d14;\n  min-width: 0;\n}\n.jev-devtools .question-node:before {\n  content: \"\";\n  position: absolute;\n  right: 100%;\n  top: 50%;\n  width: 21px;\n  border-top: 1px solid #7f416d;\n}\n.jev-devtools .question-branches .question-node:not(:first-child):before {\n  display: none;\n}\n.jev-devtools .question-node header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n}\n.jev-devtools .question-node header h3 {\n  margin: 0;\n  overflow-wrap: anywhere;\n}\n.jev-devtools .type {\n  font:\n    9px \"JetBrains Mono\",\n    monospace;\n  color: #e59acc;\n  border: 1px solid #5e3654;\n  border-radius: 3px;\n  padding: 3px 5px;\n}\n.jev-devtools .instructions {\n  font-size: 11px;\n  color: #b8a6bc;\n  line-height: 1.5;\n}\n.jev-devtools .answer-value {\n  display: block;\n  font-size: 20px;\n  font-weight: 500;\n  margin: 15px 0;\n  color: #f0c7e5;\n}\n.jev-devtools .answer-value small {\n  font-size: 10px;\n  color: #b5a1ba;\n}\n.jev-devtools .probability {\n  margin: 10px 0;\n  font-size: 10px;\n}\n.jev-devtools .probability > div:first-child {\n  display: flex;\n  justify-content: space-between;\n  gap: 5px;\n  margin-bottom: 5px;\n}\n.jev-devtools .probability b {\n  font-weight: 400;\n  color: #d8abc9;\n}\n.jev-devtools .bar {\n  height: 4px;\n  background: #302033;\n  border-radius: 2px;\n  overflow: hidden;\n}\n.jev-devtools .bar i {\n  display: block;\n  height: 100%;\n  background: #e551ba;\n}\n.jev-devtools .confidence {\n  font-size: 10px;\n  color: #a68cac;\n  border-top: 1px solid #302634;\n  padding-top: 10px;\n  display: flex;\n  justify-content: space-between;\n}\n.jev-devtools .confidence b {\n  color: #d1bad2;\n  font-weight: 400;\n}\n.jev-devtools details {\n  margin-top: 12px;\n  font-size: 10px;\n  color: #b7a0bd;\n}\n.jev-devtools summary {\n  cursor: pointer;\n}\n.jev-devtools .standalone {\n  margin-bottom: 14px;\n  max-width: 750px;\n}\n.jev-devtools .standalone:before {\n  display: none;\n}\n.jev-devtools .standalone .answer {\n  max-width: 450px;\n}\n.jev-devtools .box-preview {\n  position: relative;\n  margin-top: 14px;\n  min-height: 80px;\n  background: #19121c;\n}\n.jev-devtools .box-preview img {\n  width: 100%;\n  display: block;\n}\n.jev-devtools .bounding-box {\n  position: absolute;\n  border: 1.5px solid #e551ba;\n  background: #e551ba15;\n}\n.jev-devtools .coordinates {\n  display: block;\n  font-size: 9px !important;\n  line-height: 1.5;\n  margin-top: 8px;\n  color: #ac93b0;\n}\n.jev-devtools .context-image {\n  max-width: 400px;\n  width: 100%;\n  border: 1px solid #75516c;\n  border-radius: 6px;\n}\n.jev-devtools .empty {\n  padding: 20px;\n  color: #a294a8;\n  line-height: 1.7;\n}\n.jev-devtools .empty-detail {\n  margin: auto;\n  padding: 40px;\n  text-align: center;\n  color: #b2a0ba;\n}\n.jev-devtools .empty-symbol {\n  font-size: 36px;\n  color: #e551ba;\n  display: block;\n  margin-bottom: 20px;\n}\n.jev-devtools .empty-detail p {\n  font-size: 12px;\n  line-height: 1.8;\n}\n.jev-devtools .error-banner {\n  border: 1px solid #874b50;\n  background: #31191e;\n  padding: 12px;\n  line-height: 1.5;\n  margin-bottom: 16px;\n}\n.jev-devtools .warning {\n  color: #e2b97d;\n}\n.jev-devtools .jev-inspector table {\n  border-collapse: collapse;\n  width: 100%;\n  text-align: left;\n}\n.jev-devtools .jev-inspector th,\n.jev-devtools .jev-inspector td {\n  border-bottom: 1px solid #302634;\n  padding: 14px;\n}\n.jev-devtools .flow-dot {\n  display: none;\n}\n.jev-devtools .pending .flow-dot {\n  display: block;\n  position: absolute;\n  right: -23px;\n  top: calc(50% - 3px);\n  width: 6px;\n  height: 6px;\n  background: #e551ba;\n  border-radius: 50%;\n  animation: jev-inspector-pulse 1s infinite;\n}\n@keyframes jev-inspector-pulse {\n  50% {\n    opacity: 0.2;\n    transform: scale(0.7);\n  }\n}\n@media (prefers-reduced-motion: reduce) {\n  .jev-devtools .pending .flow-dot {\n    animation: none;\n  }\n}\n@media (max-width: 1100px) {\n  .jev-devtools .question-branches {\n    grid-template-columns: 1fr;\n  }\n  .jev-devtools .question-branches .question-node:not(:first-child):before {\n    display: block;\n  }\n  .jev-devtools .request-flow {\n    align-items: flex-start;\n  }\n  .jev-devtools .state-node {\n    margin-top: 45px;\n  }\n  .jev-devtools .metrics {\n    gap: 12px;\n  }\n  .jev-devtools .request-list {\n    flex-basis: 250px;\n  }\n}\n@media (max-width: 700px) {\n  .jev-devtools .jev-inspector {\n    flex-direction: column;\n  }\n  .jev-devtools .request-list {\n    flex-basis: 140px;\n    flex-shrink: 0;\n    border-right: 0;\n    border-bottom: 1px solid #302634;\n  }\n  .jev-devtools .request-list > header {\n    padding: 6px 12px;\n  }\n  .jev-devtools .request-list footer {\n    display: none;\n  }\n  .jev-devtools .list-filters {\n    padding-bottom: 6px;\n  }\n  .jev-devtools .request-items {\n    display: flex;\n  }\n  .jev-devtools .request-row {\n    min-width: 240px;\n    padding: 8px 12px;\n  }\n  .jev-devtools .request-detail {\n    min-height: 0;\n  }\n  .jev-devtools .detail-header {\n    padding: 12px;\n  }\n  .jev-devtools .detail-meta,\n  .jev-devtools .detail-tabs {\n    padding-left: 12px;\n    padding-right: 12px;\n  }\n  .jev-devtools .detail-body {\n    padding: 12px;\n  }\n  .jev-devtools .metrics {\n    display: none;\n  }\n  .jev-devtools .state-node {\n    flex-basis: 115px;\n    padding: 12px;\n  }\n  .jev-devtools .request-flow {\n    gap: 25px;\n  }\n  .jev-devtools .state-node:after {\n    width: 12px;\n  }\n  .jev-devtools .question-branches {\n    padding-left: 12px;\n  }\n  .jev-devtools .question-node:before {\n    width: 13px;\n  }\n  .jev-devtools .question-node {\n    padding: 12px;\n  }\n}\n\n.jev-devtools .request-flow {\n  flex-direction: column;\n  align-items: stretch;\n  gap: 24px;\n}\n.jev-devtools .state-node {\n  flex: auto;\n  width: fit-content;\n  align-self: center;\n  padding: 12px 24px;\n  text-align: center;\n  margin: 0;\n}\n.jev-devtools .state-node h3 {\n  display: inline-block;\n  margin: 0 12px;\n}\n.jev-devtools .state-node p {\n  display: inline-block;\n  margin: 0 12px 0 0;\n  font-size: 11px;\n}\n.jev-devtools .state-node .eyebrow {\n  display: none;\n}\n.jev-devtools .state-node:after {\n  left: 50%;\n  top: 100%;\n  width: 0;\n  height: 24px;\n  border-top: 0;\n  border-left: 1px solid #7f416d;\n}\n.jev-devtools .question-branches {\n  border-left: 0;\n  border-top: 1px solid #7f416d;\n  padding: 20px 0 0;\n  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\n}\n.jev-devtools .question-node:before,\n.jev-devtools .question-branches .question-node:not(:first-child):before {\n  display: block;\n  right: auto;\n  left: 50%;\n  top: -21px;\n  width: 0;\n  height: 20px;\n  border-top: 0;\n  border-left: 1px solid #7f416d;\n}\n.jev-devtools .standalone:before {\n  display: none;\n}\n.jev-devtools .flow-caption {\n  margin-top: 0;\n}\n.jev-devtools .pending .flow-dot {\n  right: auto;\n  left: calc(50% - 3px);\n  top: calc(100% + 10px);\n}\n@media (max-width: 900px) {\n  .jev-devtools .question-branches {\n    grid-template-columns: 1fr;\n  }\n  .jev-devtools .question-node:before,\n  .jev-devtools .question-branches .question-node:not(:first-child):before {\n    height: 12px;\n    top: -13px;\n  }\n  .jev-devtools .question-branches .question-node:first-child:before {\n    height: 20px;\n    top: -21px;\n  }\n  .jev-devtools .state-node {\n    padding: 10px;\n  }\n  .jev-devtools .state-node p {\n    display: block;\n    margin: 6px 0;\n  }\n  .jev-devtools .state-node h3 {\n    font-size: 12px;\n  }\n}\n\n.jev-devtools.jev-drawer {\n  margin: 0;\n  padding: 0;\n  position: fixed;\n  z-index: 1000;\n  inset: auto 0 0;\n  display: flex;\n  flex-direction: column;\n  background: #0d0a0f;\n  color: #eee8ed;\n  border-top: 1px solid #604058;\n  box-shadow: 0 -12px 48px #0005;\n  font:\n    12px \"DM Sans\",\n    sans-serif;\n}\n.jev-devtools.jev-drawer[hidden],\n.jev-devtools.jev-drawer-trigger[hidden] {\n  display: none;\n}\n.jev-devtools .jev-drawer-resize {\n  position: absolute;\n  z-index: 1;\n  top: -6px;\n  width: 100%;\n  height: 12px;\n  cursor: ns-resize;\n  touch-action: none;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.jev-devtools .jev-drawer-resize span {\n  width: 42px;\n  height: 3px;\n  border-radius: 3px;\n  background: #79506f;\n}\n.jev-devtools .jev-drawer-resize:hover span,\n.jev-devtools .jev-drawer-resize:focus-visible span {\n  background: #e551ba;\n}\n.jev-devtools .jev-drawer-resize:focus-visible {\n  outline: 2px solid #e551ba;\n  outline-offset: -2px;\n}\n.jev-devtools .jev-drawer-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  flex: 0 0 46px;\n  padding: 0 16px;\n  border-bottom: 1px solid #302634;\n}\n.jev-devtools .jev-drawer-header strong {\n  display: flex;\n  align-items: center;\n  gap: 9px;\n  font-weight: 600;\n}\n.jev-devtools .jev-mark {\n  color: #e551ba;\n  font-size: 21px;\n}\n.jev-devtools .jev-drawer-header > div {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n.jev-devtools .jev-drawer-header button {\n  background: transparent;\n  border-color: transparent;\n  font-size: 11px;\n  color: #c4afc8;\n}\n.jev-devtools .jev-drawer-header .jev-drawer-close {\n  font-size: 22px;\n  line-height: 1;\n  padding: 4px 8px;\n}\n.jev-devtools .jev-drawer-content {\n  flex: 1;\n  min-height: 0;\n  overflow: hidden;\n}\n.jev-devtools.jev-drawer-trigger {\n  position: fixed;\n  bottom: 18px;\n  right: 18px;\n  z-index: 1000;\n  display: flex;\n  align-items: center;\n  gap: 9px;\n  padding: 10px 16px;\n  border: 1px solid #a24487;\n  border-radius: 8px;\n  cursor: pointer;\n  background: #211321;\n  color: #f1cbe6;\n  font:\n    600 13px \"DM Sans\",\n    sans-serif;\n  box-shadow: 0 4px 20px #0005;\n}\n.jev-devtools.jev-drawer-trigger span {\n  color: #e551ba;\n  font-size: 20px;\n}\n/* Baseline cards and authored left-to-right composition from the lab's Jev presets. */\n.jev-devtools .detail-body.detail-body-flow {\n  display: flex;\n  padding: 0;\n  overflow: hidden;\n}\n.jev-devtools .lab-flow {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  min-width: 0;\n  min-height: 0;\n}\n.jev-devtools .lab-flow-toolbar {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n  flex-shrink: 0;\n  padding: 12px 16px;\n  flex-wrap: wrap;\n}\n.jev-devtools .lab-flow-toolbar label {\n  display: flex;\n  gap: 10px;\n  align-items: center;\n  font-size: 11px;\n  min-width: 0;\n}\n.jev-devtools .lab-flow-toolbar select {\n  width: auto;\n  max-width: 240px;\n  font-size: 11px;\n}\n.jev-devtools .lab-flow-toolbar > div {\n  display: flex;\n  gap: 8px;\n  align-items: center;\n}\n.jev-devtools .lab-flow-toolbar button {\n  font-size: 11px;\n}\n.jev-devtools .lab-flow-toolbar output {\n  font-size: 11px;\n  min-width: 35px;\n  text-align: center;\n}\n.jev-devtools .lab-flow-viewport {\n  position: relative;\n  flex: 1;\n  min-height: 100px;\n  overflow: hidden;\n  background-color: #0d0a0f;\n  background-image: radial-gradient(#463449 0.8px, transparent 0.8px);\n  background-size: 20px 20px;\n  border-block: 1px solid #302634;\n  cursor: grab;\n  touch-action: none;\n  user-select: none;\n  overscroll-behavior: contain;\n}\n.jev-devtools .lab-flow-viewport[data-panning] {\n  cursor: grabbing;\n}\n.jev-devtools .lab-flow-viewport:focus-visible {\n  outline: 2px solid #e551ba;\n  outline-offset: -2px;\n}\n.jev-devtools .lab-flow-caption {\n  flex-shrink: 0;\n  padding: 8px 16px;\n  margin: 0;\n}\n.jev-devtools .lab-gesture-hint {\n  display: block;\n  color: #c6a7bd;\n}\n.jev-devtools .lab-flow-canvas {\n  position: absolute;\n  inset: 0 auto auto 0;\n  transform-origin: top left;\n  will-change: transform;\n  font-family: system-ui, sans-serif;\n  color: #f5f3f6;\n}\n.jev-devtools .lab-connections {\n  position: absolute;\n  inset: 0;\n  overflow: visible;\n}\n.jev-devtools .lab-connections path {\n  fill: none;\n  stroke: #645a68;\n  stroke-width: 1;\n}\n.jev-devtools .lab-connections path.active {\n  stroke: #968592;\n}\n.jev-devtools .lab-connections text {\n  fill: #b7b1bc;\n  font:\n    12px ui-monospace,\n    monospace;\n}\n.jev-devtools .lab-flow-dot {\n  fill: #e551ba;\n}\n.jev-devtools .lab-card {\n  position: absolute;\n  border: 1.3px solid #f5f3f6;\n  border-radius: 14px;\n  padding: 20px;\n  background: #0d0a0f;\n  overflow: hidden;\n}\n.jev-devtools .lab-eyebrow {\n  display: block;\n  color: #e551ba;\n  font:\n    500 10px ui-monospace,\n    monospace;\n  letter-spacing: 1px;\n  margin: 0 0 10px;\n}\n.jev-devtools .lab-card h3 {\n  font-size: 18px;\n  font-weight: 500;\n  line-height: 1.25;\n  margin: 0 0 16px;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n.jev-devtools .lab-card p {\n  font-size: 15px;\n  line-height: 1.4;\n  margin: 10px 0;\n}\n.jev-devtools .lab-copy {\n  display: -webkit-box;\n  -webkit-line-clamp: 5;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  overflow-wrap: anywhere;\n}\n.jev-devtools .lab-probability {\n  margin: 17px 0;\n}\n.jev-devtools .lab-probability > div:first-child {\n  display: flex;\n  justify-content: space-between;\n  gap: 10px;\n  margin-bottom: 9px;\n  font-size: 15px;\n}\n.jev-devtools .lab-probability span {\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n.jev-devtools .lab-probability code {\n  font:\n    13px ui-monospace,\n    monospace;\n}\n.jev-devtools .lab-track {\n  height: 7px;\n  border-radius: 4px;\n  background: #f5f3f61a;\n  overflow: hidden;\n}\n.jev-devtools .lab-track i {\n  display: block;\n  height: 100%;\n  border-radius: 4px;\n  background: #e551ba;\n}\n.jev-devtools .lab-track i.lab-alternative {\n  opacity: 0.35;\n}\n.jev-devtools .lab-card .lab-result {\n  font-size: 14px;\n  margin-top: 24px;\n}\n.jev-devtools .lab-card .lab-small {\n  font-size: 12px;\n  color: #b7b1bc;\n  margin-top: 20px;\n}\n.jev-devtools .lab-idle {\n  opacity: 0.65;\n}\n.jev-devtools .lab-scale {\n  position: relative;\n  margin-top: 18px;\n  border-top: 1px solid #b7b1bc;\n  display: flex;\n  justify-content: space-between;\n  padding-top: 9px;\n}\n.jev-devtools .lab-scale > span {\n  position: absolute;\n  top: -5px;\n  width: 9px;\n  height: 9px;\n  border-radius: 50%;\n  background: #e551ba;\n  transform: translateX(-50%);\n}\n.jev-devtools .lab-big {\n  display: block;\n  font-size: 36px;\n  font-weight: 500;\n  margin-top: 26px;\n}\n.jev-devtools .lab-endpoints {\n  display: flex;\n  justify-content: space-between;\n  font-size: 12px;\n  color: #b7b1bc;\n  margin-top: 10px;\n}\n.jev-devtools .lab-image {\n  position: relative;\n}\n.jev-devtools .lab-image img {\n  display: block;\n  width: 100%;\n}\n.jev-devtools .lab-box {\n  position: absolute;\n  border: 1.5px solid #e551ba;\n  background: #e551ba15;\n}\n.jev-devtools .lab-source-image {\n  width: 100%;\n  max-height: 105px;\n  object-fit: contain;\n}\n.jev-devtools .lab-coordinates {\n  font-family: ui-monospace, monospace;\n}\n@media (prefers-reduced-motion: reduce) {\n  .jev-devtools .lab-flow-dot {\n    display: none;\n  }\n}\n/* The public TypeSafe mark travels with the package, independent of host assets. */\n.jev-devtools .typesafe-mark {\n  display: inline-block;\n  flex: 0 0 23px;\n  width: 23px;\n  height: 32px;\n  overflow: hidden;\n  line-height: 0;\n}\n.jev-devtools .typesafe-mark img {\n  display: block;\n  height: 32px;\n  width: auto;\n  max-width: none;\n}\n";

package/lib/src/inspector.css

@@ -1,9 +1,15 @@
 .jev-devtools {
+  all: initial;
+  display: block;
+  direction: ltr;
+  unicode-bidi: isolate;
+  pointer-events: auto;
   color-scheme: dark;
   font:
     12px system-ui,
     sans-serif;
   color: #eee8ed;
+  line-height: 1.5;
 }
 .jev-devtools,
 .jev-devtools * {
@@ -184,6 +190,7 @@
 .jev-devtools .request-detail {
   flex: 1;
   min-width: 0;
+  min-height: 0;
   display: flex;
   flex-direction: column;
 }
@@ -664,6 +671,8 @@
 }
 
 .jev-devtools.jev-drawer {
+  margin: 0;
+  padding: 0;
   position: fixed;
   z-index: 1000;
   inset: auto 0 0;
@@ -756,6 +765,8 @@
   gap: 9px;
   padding: 10px 16px;
   border: 1px solid #a24487;
+  border-radius: 8px;
+  cursor: pointer;
   background: #211321;
   color: #f1cbe6;
   font:
@@ -768,12 +779,25 @@
   font-size: 20px;
 }
 /* Baseline cards and authored left-to-right composition from the lab's Jev presets. */
+.jev-devtools .detail-body.detail-body-flow {
+  display: flex;
+  padding: 0;
+  overflow: hidden;
+}
+.jev-devtools .lab-flow {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+}
 .jev-devtools .lab-flow-toolbar {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 12px;
-  margin-bottom: 14px;
+  flex-shrink: 0;
+  padding: 12px 16px;
   flex-wrap: wrap;
 }
 .jev-devtools .lab-flow-toolbar label {
@@ -802,15 +826,40 @@
   text-align: center;
 }
 .jev-devtools .lab-flow-viewport {
-  overflow: auto;
-  max-height: 65vh;
-  background: #0d0a0f;
-  border: 1px solid #302634;
-  border-radius: 8px;
+  position: relative;
+  flex: 1;
+  min-height: 100px;
+  overflow: hidden;
+  background-color: #0d0a0f;
+  background-image: radial-gradient(#463449 0.8px, transparent 0.8px);
+  background-size: 20px 20px;
+  border-block: 1px solid #302634;
+  cursor: grab;
+  touch-action: none;
+  user-select: none;
+  overscroll-behavior: contain;
+}
+.jev-devtools .lab-flow-viewport[data-panning] {
+  cursor: grabbing;
+}
+.jev-devtools .lab-flow-viewport:focus-visible {
+  outline: 2px solid #e551ba;
+  outline-offset: -2px;
+}
+.jev-devtools .lab-flow-caption {
+  flex-shrink: 0;
+  padding: 8px 16px;
+  margin: 0;
+}
+.jev-devtools .lab-gesture-hint {
+  display: block;
+  color: #c6a7bd;
 }
 .jev-devtools .lab-flow-canvas {
-  position: relative;
+  position: absolute;
+  inset: 0 auto auto 0;
   transform-origin: top left;
+  will-change: transform;
   font-family: system-ui, sans-serif;
   color: #f5f3f6;
 }

package/lib/src/useDiagramViewport.d.ts

@@ -0,0 +1,9 @@
+import { type Point } from "./diagram-camera.js";
+/** Lab-style camera. Pointer frames update the transform without rerendering cards. */
+export declare function useDiagramViewport(width: number, height: number, scene: string): {
+    viewport: import("react").RefObject<HTMLDivElement | null>;
+    canvas: import("react").RefObject<HTMLDivElement | null>;
+    zoom: number;
+    zoomBy: (factor: number, point?: Point) => void;
+    fit: () => void;
+};

package/lib/src/useDiagramViewport.js

@@ -0,0 +1,172 @@
+import { useCallback, useEffect, 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 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, { width, height });
+        paint();
+    }, [width, height, paint]);
+    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 };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jev-devtools",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "type": "module",
   "engines": {
     "node": ">=22.12"
@@ -46,7 +46,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",