jev-devtools 0.1.3 → 0.2.0

package/lib/src/Questions.js

@@ -0,0 +1,174 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useCallback, useEffect, useLayoutEffect, useId, useMemo, useRef, useState, } from "react";
+import { defaultRangeExtractor, measureElement, observeElementRect, useVirtualizer, } from "@tanstack/react-virtual";
+import { Answer, findImage, JsonBlock } from "./TraceContent.js";
+const QuestionContent = memo(function QuestionContent({ name, question, answer, image, legendOpen, onLegendChange, }) {
+    return (_jsxs(_Fragment, { children: [_jsxs("header", { children: [_jsx("h3", { children: name }), _jsx("span", { className: "type", children: question.type })] }), _jsx(JsonBlock, { value: question }), _jsx(Answer, { answer: answer, image: image, legendOpen: legendOpen, onLegendToggle: (open) => onLegendChange(name, open) })] }));
+});
+/** Variable-height rows retain full answers; only offscreen DOM is omitted. */
+export function Questions({ trace }) {
+    const helpId = useId();
+    const entries = useMemo(() => Object.entries(trace.request.questions ?? {}).filter(([, q]) => q && typeof q === "object" && typeof q.type === "string"), [trace.request.questions]);
+    const image = useMemo(() => findImage(trace.request.state), [trace.request.state]);
+    const viewport = useRef(null);
+    const sizes = useRef(new Map());
+    const [seeking, setSeekingState] = useState(false);
+    const seekingValue = useRef(false);
+    const setSeeking = useCallback((next) => {
+        // A range update may already be queued by the virtualizer. Avoid enqueuing
+        // the same preview state on every scroll event alongside that React work.
+        if (seekingValue.current === next)
+            return;
+        seekingValue.current = next;
+        setSeekingState(next);
+    }, []);
+    const scrollSample = useRef(null);
+    const scrollIdle = useRef(undefined);
+    const explicitJump = useRef(false);
+    useEffect(() => () => clearTimeout(scrollIdle.current), []);
+    const pendingFocus = useRef(null);
+    const [focused, setFocused] = useState(null);
+    const [destination, setDestination] = useState(0);
+    const [legends, setLegends] = useState(() => new Map());
+    const onLegendChange = useCallback((name, open) => {
+        setLegends((previous) => previous.get(name) === open
+            ? previous
+            : new Map(previous).set(name, open));
+    }, []);
+    const getItemKey = useCallback((index) => entries[index][0], [entries]);
+    const rangeExtractor = useCallback((range) => {
+        const indices = defaultRangeExtractor(range);
+        // Never remove a focused control when it scrolls outside the visible range.
+        if (focused !== null &&
+            focused < entries.length &&
+            !indices.includes(focused))
+            indices.push(focused);
+        return indices.sort((a, b) => a - b);
+    }, [focused, entries.length]);
+    const virtualizer = useVirtualizer({
+        count: entries.length,
+        getScrollElement: () => viewport.current,
+        getItemKey,
+        estimateSize: () => 600,
+        overscan: 1,
+        rangeExtractor,
+        directDomUpdates: true,
+        // A hidden drawer reports zero sizes. Retain its measurements and scroll
+        // range instead of collapsing rows or resetting the reader's position.
+        observeElementRect: (instance, callback) => observeElementRect(instance, (rect) => {
+            if (rect.width > 0 && rect.height > 0)
+                callback(rect);
+        }),
+        measureElement: (element, entry, instance) => {
+            const key = element.dataset.questionKey;
+            // A fast-scroll preview reserves the last measured height. Never replace
+            // the real measurement cache with its temporary placeholder geometry.
+            if (element.dataset.preview === "true")
+                return sizes.current.get(key) || 600;
+            const height = measureElement(element, entry, instance);
+            if (height > 0)
+                sizes.current.set(key, height);
+            return height || sizes.current.get(key) || 600;
+        },
+    });
+    const items = virtualizer.getVirtualItems();
+    const goTo = useCallback((index, focus = false) => {
+        const next = Math.max(0, Math.min(entries.length - 1, index));
+        explicitJump.current = true;
+        setSeeking(false);
+        scrollSample.current = null;
+        setDestination(next);
+        if (focus) {
+            pendingFocus.current = next;
+            setFocused(next);
+        }
+        virtualizer.scrollToIndex(next, { align: "start" });
+    }, [entries.length, virtualizer, setSeeking]);
+    useLayoutEffect(() => {
+        if (pendingFocus.current === null)
+            return;
+        const card = viewport.current?.querySelector(`[data-index="${pendingFocus.current}"] article`);
+        if (card) {
+            card.focus({ preventScroll: true });
+            pendingFocus.current = null;
+        }
+    });
+    // Scroll-range updates must not rebuild the full question picker.
+    const navigation = useMemo(() => (_jsxs(_Fragment, { children: [_jsxs("div", { className: "questions-navigation", children: [_jsxs("label", { children: ["Jump to question", _jsx("select", { "aria-label": "Jump to question", value: Math.min(destination, entries.length - 1), onChange: (event) => goTo(Number(event.target.value)), children: entries.map(([name, q], index) => (_jsxs("option", { value: index, children: [index + 1, ". ", name, " \u00B7 ", q.type] }, name))) })] }), _jsx("button", { "aria-label": "Previous question", disabled: destination === 0, onClick: () => goTo(destination - 1), children: "Previous" }), _jsx("button", { "aria-label": "Next question", disabled: destination >= entries.length - 1, onClick: () => goTo(destination + 1), children: "Next" }), _jsxs("span", { children: [entries.length, " question", entries.length === 1 ? "" : "s"] })] }), _jsx("p", { className: "questions-help muted", id: helpId, children: "\u2191 / \u2193 previous / next \u00B7 Home / End first / last when the list is focused." })] })), [entries, destination, goTo, helpId]);
+    if (!entries.length)
+        return _jsx("p", { className: "muted", children: "No questions available in this capture." });
+    return (_jsxs("div", { className: "questions-list", children: [navigation, _jsx("div", { className: "questions-viewport", ref: viewport, tabIndex: 0, role: "region", "aria-label": "Questions and answers", "aria-describedby": helpId, onScroll: (event) => {
+                    const offset = event.currentTarget.scrollTop;
+                    const time = performance.now();
+                    const previous = scrollSample.current;
+                    clearTimeout(scrollIdle.current);
+                    scrollIdle.current = setTimeout(() => {
+                        scrollSample.current = null;
+                        explicitJump.current = false;
+                        setSeeking(false);
+                    }, 120);
+                    if (explicitJump.current)
+                        return;
+                    if (!previous) {
+                        scrollSample.current = { offset, time, fastDirection: 0 };
+                        return;
+                    }
+                    const elapsed = time - previous.time;
+                    if (elapsed < 8)
+                        return;
+                    const velocity = (Math.abs(offset - previous.offset) / elapsed) * 1000;
+                    // A jump across most of the list is a destination change, not a
+                    // scan. Measurement corrections around its endpoints can otherwise
+                    // look like additional high-speed samples.
+                    // Read cached geometry; querying scrollHeight here can force layout
+                    // immediately after the virtualizer has mounted a new row.
+                    const viewportHeight = virtualizer.scrollRect?.height || 0;
+                    const jump = Math.abs(offset - previous.offset) >
+                        Math.max(viewportHeight, (virtualizer.getTotalSize() - viewportHeight) / 2);
+                    const fastDirection = !jump && velocity > 4000 ? Math.sign(offset - previous.offset) : 0;
+                    scrollSample.current = { offset, time, fastDirection };
+                    // Two fast samples in the same direction distinguish continuous
+                    // scanning from an isolated jump. A lower exit threshold prevents
+                    // flickering as the reader slows down.
+                    if (jump)
+                        setSeeking(false);
+                    else if (fastDirection && fastDirection === previous.fastDirection)
+                        setSeeking(true);
+                    else if (velocity < 1800)
+                        setSeeking(false);
+                }, onFocusCapture: (event) => {
+                    const row = event.target.closest("[data-index]");
+                    if (row) {
+                        const index = Number(row.dataset.index);
+                        setFocused(index);
+                        setDestination(index);
+                    }
+                }, onBlurCapture: (event) => {
+                    if (!event.currentTarget.contains(event.relatedTarget))
+                        setFocused(null);
+                }, onKeyDown: (event) => {
+                    // Inputs, disclosures and scrollable JSON keep their native keys.
+                    if (event.target !== event.currentTarget &&
+                        !event.target.matches("article"))
+                        return;
+                    const next = event.key === "Home"
+                        ? 0
+                        : event.key === "End"
+                            ? entries.length - 1
+                            : event.key === "ArrowDown"
+                                ? destination + 1
+                                : event.key === "ArrowUp"
+                                    ? destination - 1
+                                    : undefined;
+                    if (next !== undefined) {
+                        event.preventDefault();
+                        goTo(next, true);
+                    }
+                }, children: _jsx("div", { role: "list", "aria-label": "Captured questions", className: "questions-spacer", ref: virtualizer.containerRef, children: items.map((item) => {
+                        const [name, question] = entries[item.index];
+                        const preview = seeking && focused !== item.index;
+                        return (_jsx("div", { "data-index": item.index, "data-question-key": name, "data-preview": preview || undefined, style: preview
+                                ? { height: sizes.current.get(name) || 600 }
+                                : undefined, ref: virtualizer.measureElement, className: "questions-row", role: "listitem", "aria-posinset": item.index + 1, "aria-setsize": entries.length, children: _jsx("article", { className: "question-node standalone", tabIndex: -1, "aria-busy": preview || undefined, "aria-label": `Question ${item.index + 1}: ${name}`, children: preview ? (_jsxs("div", { className: "question-scroll-preview", children: [_jsxs("header", { children: [_jsx("h3", { children: name }), _jsx("span", { className: "type", children: question.type })] }), _jsx("p", { className: "muted", children: "Pause scrolling to inspect this answer." })] })) : (_jsx(QuestionContent, { name: name, question: question, answer: trace.result?.answers[name], image: image, legendOpen: !!legends.get(name), onLegendChange: onLegendChange })) }) }, item.key));
+                    }) }) })] }));
+}

package/lib/src/TraceContent.d.ts

@@ -0,0 +1,11 @@
+import type { AnswerView, Json } from "./protocol.js";
+export declare function findImage(value: Json): string | undefined;
+export declare function JsonBlock({ value }: {
+    value: unknown;
+}): import("react").JSX.Element;
+export declare function Answer({ answer, image, legendOpen, onLegendToggle, }: {
+    answer?: AnswerView;
+    image?: string;
+    legendOpen: boolean;
+    onLegendToggle: (open: boolean) => void;
+}): import("react").JSX.Element;

package/lib/src/TraceContent.js

@@ -0,0 +1,32 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const pretty = (value) => JSON.stringify(value, null, 2);
+const percent = (value) => `${Math.round(value * 100)}%`;
+export function findImage(value) {
+    if (!value || typeof value !== "object")
+        return;
+    if (!Array.isArray(value) &&
+        typeof value.preview === "string" &&
+        /^data:image\/(png|jpeg);base64,/.test(value.preview))
+        return value.preview;
+    for (const child of Object.values(value)) {
+        const found = findImage(child);
+        if (found)
+            return found;
+    }
+}
+export function JsonBlock({ value }) {
+    return _jsx("pre", { children: pretty(value) });
+}
+export function Answer({ answer, image, legendOpen, onLegendToggle, }) {
+    if (!answer)
+        return _jsx("p", { className: "muted", children: "No answer received." });
+    return (_jsxs("div", { className: "answer", children: [answer.choice !== undefined && (_jsx("strong", { className: "answer-value", children: answer.choice })), answer.score !== undefined && (_jsxs("strong", { className: "answer-value", children: [answer.score.toFixed(2), " ", _jsx("small", { children: "score" })] })), answer.noul !== undefined && (_jsxs(_Fragment, { children: [_jsxs("strong", { className: "answer-value", children: [percent(answer.noul), " ", _jsx("small", { children: "probability of true" })] }), _jsx("div", { className: "bar", children: _jsx("i", { style: { width: percent(answer.noul) } }) })] })), answer.probabilities &&
+                Object.entries(answer.probabilities).map(([label, value]) => (_jsxs("div", { className: "probability", children: [_jsxs("div", { children: [_jsx("span", { children: label }), _jsx("b", { children: percent(value) })] }), _jsx("div", { className: "bar", children: _jsx("i", { style: { width: percent(value) } }) })] }, label))), answer.legend && (_jsxs("details", { open: legendOpen, onToggle: (event) => onLegendToggle(event.currentTarget.open), children: [_jsx("summary", { children: "Score legend" }), _jsx(JsonBlock, { value: answer.legend })] })), answer.box && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "box-preview", children: [image ? (_jsx("img", { src: image, alt: "Captured request image" })) : (_jsx("span", { children: "Image preview unavailable" })), _jsx("div", { className: "bounding-box", style: {
+                                    left: percent(answer.box.left),
+                                    top: percent(answer.box.top),
+                                    width: percent(answer.box.right - answer.box.left),
+                                    height: percent(answer.box.bottom - answer.box.top),
+                                } })] }), _jsx("code", { className: "coordinates", children: Object.entries(answer.box)
+                            .map(([k, v]) => `${k} ${v.toFixed(2)}`)
+                            .join(" · ") })] })), answer.confidence !== undefined && (_jsxs("p", { className: "confidence", children: ["Confidence ", _jsx("b", { children: percent(answer.confidence) })] }))] }));
+}

package/lib/src/TraceDiagram.js

@@ -1,19 +1,20 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import { useDiagramViewport } from "./useDiagramViewport.js";
 import { findImage, flowAnswer, stateText } from "./flow-model.js";
+import { ChoiceProbabilities } from "./ChoiceProbabilities.js";
 const pct = (v) => `${Math.round(v * 100)}%`;
-function Result({ answer, image }) {
+function Result({ answer, image, probabilities, }) {
     if (!answer)
         return _jsx("p", { className: "lab-copy", children: "No answer received." });
     return (_jsxs(_Fragment, { children: [answer.probabilities &&
-                Object.entries(answer.probabilities).map(([key, value]) => (_jsxs("div", { className: "lab-probability", children: [_jsxs("div", { children: [_jsx("span", { title: typeof answer.legend?.[key] === "string"
+                (probabilities ?? Object.entries(answer.probabilities)).map(([key, value]) => (_jsxs("div", { className: "lab-probability", children: [_jsxs("div", { children: [_jsx("span", { title: typeof answer.legend?.[key] === "string"
                                         ? answer.legend[key]
                                         : key, children: answer.type === "score" && answer.legend?.[key]
                                         ? `${key} · ${answer.legend[key]}`
-                                        : key }), _jsx("code", { children: pct(value) })] }), _jsx("div", { className: "lab-track", children: _jsx("i", { className: answer.type === "choice" && answer.choice !== key
+                                        : key }), _jsxs("code", { title: `Exact probability: ${value}`, children: [Number((value * 100).toPrecision(6)), "%"] })] }), _jsx("div", { className: "lab-track", children: _jsx("i", { className: answer.type === "choice" && answer.choice !== key
                                     ? "lab-alternative"
-                                    : "", style: { width: pct(Math.max(0, Math.min(1, value))) } }) })] }, key))), answer.choice !== undefined && (_jsxs("p", { className: "lab-result", children: ["Selected: ", answer.choice] })), answer.score !== undefined && (_jsxs(_Fragment, { children: [_jsxs("p", { className: "lab-result", children: ["Score ", answer.score.toFixed(2)] }), _jsxs("div", { className: "lab-scale", children: [_jsx("span", { style: {
+                                    : "", style: { width: pct(Math.max(0, Math.min(1, value))) } }) })] }, key))), answer.choice !== undefined && (_jsxs("p", { className: "lab-result", title: `Selected: ${answer.choice}`, children: ["Selected: ", answer.choice] })), answer.score !== undefined && (_jsxs(_Fragment, { children: [_jsxs("p", { className: "lab-result", children: ["Score ", answer.score.toFixed(2)] }), _jsxs("div", { className: "lab-scale", children: [_jsx("span", { style: {
                                     left: pct(Math.max(0, Math.min(1, answer.score /
                                         Math.max(1, Object.keys(answer.probabilities ?? {}).length - 1)))),
                                 } }), Object.keys(answer.probabilities ?? {}).map((k) => (_jsx("small", { children: k }, k)))] })] })), answer.noul !== undefined && (_jsxs(_Fragment, { children: [_jsx("strong", { className: "lab-big", children: pct(answer.noul) }), _jsx("p", { className: "lab-small", children: "probability of true" }), _jsx("div", { className: "lab-track", children: _jsx("i", { style: { width: pct(answer.noul) } }) }), _jsxs("div", { className: "lab-endpoints", children: [_jsx("span", { children: "False" }), _jsx("span", { children: "True" })] })] })), answer.box && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "lab-image", children: [image ? (_jsx("img", { src: image, alt: "Captured image with returned Box overlay" })) : (_jsx("p", { children: "Image preview unavailable" })), image && (_jsx("div", { className: "lab-box", style: {
@@ -24,29 +25,76 @@ 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(""), [flow, setFlow] = useState(true);
+    const [selected, setSelected] = useState(""), [flow, setFlow] = useState(true), [extraCategories, setExtraCategories] = useState({}), [entering, setEntering] = useState(null), [probabilityView, setProbabilityView] = useState(null);
     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) ||
-        (trace.request.assets ? findImage(trace.request.assets) : undefined), outputs = flowAnswer(answer);
-    const resultHeight = Math.max(280, 166 +
-        Object.keys(answer?.probabilities ?? {}).length * 44 +
+        (trace.request.assets ? findImage(trace.request.assets) : undefined), allProbabilities = useMemo(() => Object.entries(answer?.probabilities ?? {}).sort((a, b) => b[1] - a[1]), [answer?.probabilities]);
+    const compact = answer?.type === "choice" && allProbabilities.length > 6;
+    const shownProbabilities = compact
+        ? allProbabilities.slice(0, 3)
+        : allProbabilities;
+    if (compact &&
+        answer.choice !== undefined &&
+        !shownProbabilities.some(([label]) => label === answer.choice)) {
+        const returned = allProbabilities.find(([label]) => label === answer.choice);
+        if (returned)
+            shownProbabilities.push(returned);
+    }
+    if (compact && (extraCategories[key] ?? 0) > 0) {
+        const initialLabels = new Set(shownProbabilities.map(([label]) => label));
+        shownProbabilities.push(...allProbabilities
+            .filter(([label]) => !initialLabels.has(label))
+            .slice(0, extraCategories[key] ?? 0));
+    }
+    const outputs = flowAnswer(compact
+        ? { ...answer, probabilities: Object.fromEntries(shownProbabilities) }
+        : answer);
+    const remaining = compact
+        ? allProbabilities.length - shownProbabilities.length
+        : 0;
+    const spacing = compact ? 112 : 136;
+    const showProbabilities = probabilityView === key && answer?.type === "choice";
+    const resultHeight = Math.max(280, (compact ? 230 : 166) +
+        (compact
+            ? shownProbabilities.length
+            : 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 { viewport, canvas, zoom, zoomBy, fit } = useDiagramViewport(1120, height, key);
+    const height = Math.max(520, resultHeight + 90, (outputs.length + (remaining ? 1 : 0)) * spacing + 60), ry = compact ? 40 : Math.max(40, (height - resultHeight) / 2), mid = ry + resultHeight / 2;
+    const { viewport, canvas, zoom, zoomBy, fit, preserveCamera } = 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}`;
+    const enteringDelay = (index) => entering?.question === key && index >= entering.from && index < entering.to
+        ? `${(index - entering.from) * 55}ms`
+        : undefined;
     const paths = [
         { id: "state", d: sourcePath(122), active: true },
         { id: "question", d: sourcePath(378), active: true },
         ...outputs.map((output, i) => ({
-            id: `output-${i}`,
-            d: `M710 ${mid} C790 ${mid},790 ${92 + i * 136},870 ${92 + i * 136}`,
+            id: `output-${key}-${output.label}`,
+            delay: enteringDelay(i),
+            d: `M710 ${mid} C790 ${mid},790 ${92 + i * spacing},870 ${92 + i * spacing}`,
             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", 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 &&
+    return (_jsxs("div", { className: `lab-flow ${compact ? "lab-flow-compact" : ""}`, children: [_jsxs("div", { className: "lab-flow-toolbar", children: [_jsxs("label", { children: ["Question", _jsx("select", { "aria-label": "Diagram question", value: key, onChange: (event) => {
+                                    setEntering(null);
+                                    setSelected(event.target.value);
+                                }, children: entries.map(([name, q]) => (_jsxs("option", { value: name, children: [name, " \u00B7 ", q.type] }, name))) })] }), _jsxs("div", { children: [answer?.type === "choice" && (_jsx("button", { "aria-pressed": showProbabilities, onClick: () => {
+                                    setEntering(null);
+                                    setProbabilityView(showProbabilities ? null : key);
+                                }, children: showProbabilities
+                                    ? "Back to overview"
+                                    : `All probabilities (${allProbabilities.length})` })), !showProbabilities && (_jsxs(_Fragment, { children: [compact && (_jsx("button", { disabled: (extraCategories[key] ?? 0) === 0, onClick: () => {
+                                            preserveCamera();
+                                            setEntering(null);
+                                            setExtraCategories((counts) => ({ ...counts, [key]: 0 }));
+                                        }, children: "Show fewer" })), _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" })] }))] })] }), showProbabilities && answer && (_jsx(ChoiceProbabilities, { answer: answer }, key)), _jsx("div", { hidden: showProbabilities, 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, pathLength: 1, className: `${path.active ? "active" : ""} ${"delay" in path && path.delay !== undefined ? "lab-branch-enter" : ""}`, style: {
+                                                animationDelay: "delay" in path ? path.delay : undefined,
+                                            } }), flow &&
+                                            !showProbabilities &&
                                             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
@@ -57,10 +105,30 @@ export function TraceDiagram({ trace }) {
                                 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: {
+                            }, children: [_jsxs("span", { className: "lab-eyebrow", children: ["JEV \u00B7 ", question.type.toUpperCase()] }), _jsx("h3", { title: key, children: key }), compact && (_jsxs("p", { className: "lab-small", children: ["Showing ", shownProbabilities.length, " of ", allProbabilities.length, " ", "probabilities"] })), _jsx(Result, { answer: answer, image: image, probabilities: compact ? shownProbabilities : undefined })] }), outputs.map((output, i) => (_jsxs("article", { className: `lab-card lab-output ${output.active ? "" : "lab-idle"} ${enteringDelay(i) !== undefined ? "lab-card-enter" : ""}`, onAnimationEnd: () => {
+                                if (entering?.question === key && i === entering.to - 1)
+                                    setEntering(null);
+                            }, style: {
                                 left: 870,
-                                top: 40 + i * 136,
+                                top: 40 + i * spacing,
                                 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."] })] }));
+                                minHeight: compact ? 96 : 104,
+                                animationDelay: enteringDelay(i),
+                            }, children: [_jsx("span", { className: "lab-eyebrow", children: output.eyebrow }), _jsx("h3", { title: output.label, children: output.label }), _jsx("p", { children: output.detail })] }, `${key}-${output.label}`))), remaining > 0 && (_jsxs("article", { className: "lab-card lab-choice-remainder", style: {
+                                left: 870,
+                                top: 40 + outputs.length * spacing,
+                                width: 230,
+                                minHeight: 96,
+                            }, children: [_jsx("span", { className: "lab-eyebrow", children: "MORE CATEGORIES" }), _jsx("button", { onClick: () => {
+                                        preserveCamera();
+                                        setEntering({
+                                            question: key,
+                                            from: outputs.length,
+                                            to: outputs.length + Math.min(3, remaining),
+                                        });
+                                        setExtraCategories((counts) => ({
+                                            ...counts,
+                                            [key]: (counts[key] ?? 0) + 3,
+                                        }));
+                                    }, children: "Show More" }), _jsxs("p", { className: "lab-small", children: [remaining, " remaining \u00B7 Add ", Math.min(3, remaining)] })] }))] }) }), !showProbabilities && (_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/flow-model.js

@@ -17,7 +17,7 @@ export function flowAnswer(answer) {
     if (answer.type === "choice")
         return Object.entries(answer.probabilities ?? {}).map(([label, probability]) => ({
             label,
-            detail: `${Math.round(probability * 100)}% probability`,
+            detail: `${Number((probability * 100).toPrecision(6))}% probability`,
             active: label === answer.choice,
             eyebrow: label === answer.choice ? "RETURNED CHOICE" : "ALTERNATIVE",
         }));

package/lib/src/index.d.ts

@@ -1,4 +1,4 @@
-export type { Trace, Snapshot, Json, AnswerView, QuestionView, } from "./protocol.js";
+export type { Trace, Snapshot, StreamSnapshot, TraceDelta, Json, AnswerView, QuestionView, } from "./protocol.js";
 export type JevDevtoolsProps = {
     endpoint?: string;
     /** Opt in explicitly, normally with import.meta.env.DEV. */

package/lib/src/inspector-styles.js

@@ -1 +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";
+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\n.jev-devtools .detail-body-questions {\n  display: flex;\n  flex-direction: column;\n  overflow: auto;\n}\n.jev-devtools .questions-list {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  min-height: 180px;\n}\n.jev-devtools .questions-navigation {\n  display: flex;\n  align-items: end;\n  gap: 8px;\n  flex-wrap: wrap;\n  flex-shrink: 0;\n}\n.jev-devtools .questions-navigation label {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  white-space: nowrap;\n  flex: 1;\n  min-width: 240px;\n  max-width: 480px;\n  font-size: 11px;\n  color: #bc9db5;\n}\n.jev-devtools .questions-navigation select {\n  display: block;\n  min-width: 0;\n}\n.jev-devtools .questions-navigation > span {\n  align-self: center;\n  color: #a89bac;\n}\n.jev-devtools .questions-help {\n  margin: 8px 0;\n  flex-shrink: 0;\n}\n.jev-devtools .questions-viewport {\n  flex: 1;\n  min-height: 0;\n  overflow: auto;\n  overflow-anchor: none;\n  scrollbar-gutter: stable;\n  padding: 3px;\n}\n.jev-devtools .questions-spacer {\n  position: relative;\n  width: 100%;\n}\n.jev-devtools .questions-row {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  padding-bottom: 14px;\n}\n.jev-devtools .questions-row .standalone {\n  margin-bottom: 0;\n}\n.jev-devtools .questions-viewport:focus-visible,\n.jev-devtools .questions-row article:focus-visible {\n  outline: 2px solid #e551ba;\n  outline-offset: -2px;\n}\n\n/* Reserve measured card geometry while rapid scrolling uses a light preview. */\n.jev-devtools .questions-row[data-preview=\"true\"] article {\n  height: 100%;\n}\n.jev-devtools .question-scroll-preview p {\n  margin-top: 16px;\n}\n\n/* The full distribution stays at reading size, outside the zoomable canvas. */\n.jev-devtools .lab-flow-viewport[hidden] {\n  display: none;\n}\n.jev-devtools .lab-choice-browser {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  min-height: 0;\n  padding: 8px 16px;\n  gap: 10px;\n}\n.jev-devtools .lab-choice-controls {\n  display: flex;\n  gap: 12px;\n  align-items: end;\n  flex-wrap: wrap;\n  font-size: 12px;\n}\n.jev-devtools .lab-choice-controls label {\n  display: grid;\n  gap: 5px;\n}\n.jev-devtools .lab-choice-table-scroll {\n  overflow: auto;\n  min-height: 0;\n  flex: 1;\n}\n.jev-devtools .lab-choice-browser table {\n  width: 100%;\n  border-collapse: collapse;\n  font-size: 13px;\n}\n.jev-devtools .lab-choice-browser caption {\n  text-align: left;\n  padding: 8px 0;\n  color: #aaa0af;\n}\n.jev-devtools .lab-choice-browser th,\n.jev-devtools .lab-choice-browser td {\n  padding: 9px 12px;\n  border-bottom: 1px solid #302634;\n  text-align: left;\n}\n.jev-devtools .lab-choice-browser th {\n  overflow-wrap: anywhere;\n  max-width: 320px;\n}\n.jev-devtools .lab-choice-browser td {\n  font-variant-numeric: tabular-nums;\n}\n.jev-devtools .lab-choice-browser code {\n  white-space: normal;\n  overflow-wrap: anywhere;\n}\n.jev-devtools .lab-choice-returned {\n  display: block;\n  font-size: 10px;\n  color: #e551ba;\n}\n.jev-devtools .lab-choice-pagination {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  justify-content: space-between;\n  font-size: 12px;\n}\n.jev-devtools .lab-choice-remainder button {\n  margin-top: 7px;\n}\n\n.jev-devtools .lab-flow-compact .lab-output {\n  padding: 12px;\n  height: 104px;\n}\n.jev-devtools .lab-flow-compact .lab-output .lab-eyebrow {\n  margin-bottom: 6px;\n}\n.jev-devtools .lab-flow-compact .lab-output h3 {\n  font-size: 16px;\n  margin-bottom: 8px;\n}\n.jev-devtools .lab-flow-compact .lab-output p {\n  font-size: 12px;\n  margin: 4px 0;\n}\n.jev-devtools .lab-flow-compact .lab-result {\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  overflow-wrap: anywhere;\n}\n.jev-devtools .lab-choice-remainder {\n  padding: 12px;\n}\n.jev-devtools .lab-choice-remainder .lab-small {\n  margin: 8px 0 0;\n  font-size: 11px;\n}\n\n.jev-devtools .detail-body.detail-body-flow {\n  flex-direction: column;\n}\n.jev-devtools .detail-body-flow > .warning,\n.jev-devtools .detail-body-flow > .error-banner {\n  flex-shrink: 0;\n  margin: 6px 16px;\n}\n.jev-devtools .lab-choice-browser {\n  overflow: auto;\n}\n.jev-devtools .lab-choice-table-scroll {\n  flex: 1 0 110px;\n}\n\n/* Only freshly revealed branches enter; pan/zoom remains on the canvas. */\n.jev-devtools .lab-card-enter {\n  animation: jev-card-enter 280ms cubic-bezier(0.2, 0.8, 0.2, 1) backwards;\n}\n.jev-devtools .lab-branch-enter {\n  stroke-dasharray: 1;\n  animation: jev-branch-enter 280ms ease-out backwards;\n}\n@keyframes jev-card-enter {\n  from {\n    opacity: 0;\n    transform: translateX(-16px) scale(0.96);\n  }\n}\n@keyframes jev-branch-enter {\n  from {\n    opacity: 0;\n    stroke-dashoffset: 1;\n  }\n  to {\n    opacity: 1;\n    stroke-dashoffset: 0;\n  }\n}\n@media (prefers-reduced-motion: reduce) {\n  .jev-devtools .lab-card-enter,\n  .jev-devtools .lab-branch-enter {\n    animation: none;\n  }\n}\n";