@ui-annotate/react-vite 0.1.0

package/dist/runtime/inspector/target-inspection.js

@@ -0,0 +1,337 @@
+import { INSPECTOR_ATTRIBUTE } from "../shared/annotate-constants.js";
+import { getTargetSourceLocation, isSameTargetTrace, normalizeTraceRoles, parseInspectorPath } from "../../protocol/task-model.js";
+export function findSelectableTarget(start, previewRoot, annotateFile, showNativeTraceNodes) {
+    const inspectedElement = start.closest(`[${INSPECTOR_ATTRIBUTE}]`);
+    const fiberFrames = getFiberSourceFrames(start, previewRoot, annotateFile, true);
+    if (!inspectedElement || !previewRoot.contains(inspectedElement)) {
+        return findSelectableFiberTarget(start, previewRoot, annotateFile, showNativeTraceNodes, fiberFrames);
+    }
+    const raw = inspectedElement.getAttribute(INSPECTOR_ATTRIBUTE);
+    const path = raw ? parseInspectorLocation(raw) : null;
+    if (!path) {
+        return findSelectableFiberTarget(start, previewRoot, annotateFile, showNativeTraceNodes, fiberFrames);
+    }
+    const targetFrame = {
+        name: inspectedElement.tagName.toLowerCase(),
+        path,
+        native: true
+    };
+    const traces = createTargetTraces(targetFrame, fiberFrames, annotateFile, showNativeTraceNodes);
+    return {
+        element: inspectedElement,
+        path,
+        name: targetFrame.name,
+        elementName: inspectedElement.tagName.toLowerCase(),
+        trace: traces.trace,
+        annotateTrace: traces.annotateTrace
+    };
+}
+export function createTraceFromSelectableTarget(target) {
+    return target.annotateTrace ?? target.trace ?? null;
+}
+export function createTargetName(target) {
+    return target.name;
+}
+export function findElementForTarget(previewRoot, target, annotateFile, showNativeTraceNodes) {
+    return (findElementForTargetByTrace(previewRoot, target, annotateFile, showNativeTraceNodes) ??
+        findElementForTargetByTrace(previewRoot, target, annotateFile, !showNativeTraceNodes));
+}
+export function findElementForTraceNode(previewRoot, target, node, annotateFile, showNativeTraceNodes) {
+    const location = getTraceNodeLocation(target, node);
+    if (!location) {
+        return null;
+    }
+    // First locate the selected target as context, so matching names elsewhere
+    // in the Annotate UI do not steal the trace hover highlight.
+    const targetElement = findElementForTarget(previewRoot, target, annotateFile, showNativeTraceNodes) ??
+        findElementForTarget(previewRoot, target, annotateFile, !showNativeTraceNodes);
+    if (targetElement) {
+        const scoped = findElementForTraceLocationInContext(previewRoot, location, targetElement, annotateFile, showNativeTraceNodes);
+        if (scoped)
+            return scoped;
+        const scopedFlip = findElementForTraceLocationInContext(previewRoot, location, targetElement, annotateFile, !showNativeTraceNodes);
+        if (scopedFlip)
+            return scopedFlip;
+    }
+    return (findElementForTraceLocation(previewRoot, location, annotateFile, showNativeTraceNodes) ??
+        findElementForTraceLocation(previewRoot, location, annotateFile, !showNativeTraceNodes));
+}
+export function findElementForTraceNodeInTrace(previewRoot, trace, node, annotateFile, showNativeTraceNodes, contextElement) {
+    const location = getTraceLocation(trace, node);
+    if (!location) {
+        return null;
+    }
+    if (contextElement) {
+        const scoped = findElementForAnyTraceLocationInContext(previewRoot, location, contextElement, annotateFile, showNativeTraceNodes);
+        if (scoped)
+            return scoped;
+        const scopedFlip = findElementForAnyTraceLocationInContext(previewRoot, location, contextElement, annotateFile, !showNativeTraceNodes);
+        if (scopedFlip)
+            return scopedFlip;
+    }
+    return (findElementForAnyTraceLocation(previewRoot, location, annotateFile, showNativeTraceNodes) ??
+        findElementForAnyTraceLocation(previewRoot, location, annotateFile, !showNativeTraceNodes));
+}
+export function getHighlightRole(annotateFile, target) {
+    return getTargetSourceLocation(target).relativePath === annotateFile
+        ? "target-primary"
+        : "target-primary";
+}
+export function isEditableEventTarget(target) {
+    if (!(target instanceof Element)) {
+        return false;
+    }
+    return Boolean(target.closest("input, textarea, select, [contenteditable='true'], [role='textbox']"));
+}
+function findSelectableFiberTarget(start, previewRoot, annotateFile, showNativeTraceNodes, fiberFrames) {
+    const fiber = getReactFiberFromElement(start);
+    const skipInternalPathFilter = annotateFile === null;
+    let current = fiber;
+    while (current) {
+        const props = getFiberProps(current);
+        const rawInspector = readStringProp(props, INSPECTOR_ATTRIBUTE);
+        const path = rawInspector ? parseInspectorLocation(rawInspector) : null;
+        if (path &&
+            (skipInternalPathFilter || !isUiAnnotateInternalPath(parseInspectorPath(path).relativePath))) {
+            const name = getFiberName(current);
+            const targetFrame = {
+                name,
+                path,
+                native: isNativeHostFiber(current)
+            };
+            const traces = createTargetTraces(targetFrame, fiberFrames, annotateFile, showNativeTraceNodes);
+            return {
+                element: previewRoot.contains(start) ? start : previewRoot,
+                path,
+                name,
+                elementName: start.tagName.toLowerCase(),
+                trace: traces.trace,
+                annotateTrace: traces.annotateTrace
+            };
+        }
+        current = current.return ?? null;
+    }
+    return null;
+}
+function parseInspectorLocation(raw) {
+    const match = /^(.*):(\d+):(\d+)$/.exec(raw);
+    if (!match) {
+        return null;
+    }
+    return raw;
+}
+function findElementForTraceLocationInContext(previewRoot, location, contextElement, annotateFile, showNativeTraceNodes) {
+    for (const element of getTargetCandidateElements(previewRoot)) {
+        if (element !== contextElement &&
+            !contextElement.contains(element) &&
+            !element.contains(contextElement)) {
+            continue;
+        }
+        const selectableTarget = findSelectableTarget(element, previewRoot, annotateFile, showNativeTraceNodes);
+        const trace = selectableTarget ? createTraceFromSelectableTarget(selectableTarget) : null;
+        if (selectableTarget &&
+            trace &&
+            traceIncludesLocation(trace, location)) {
+            return selectableTarget.element;
+        }
+    }
+    return null;
+}
+function findElementForAnyTraceLocationInContext(previewRoot, location, contextElement, annotateFile, showNativeTraceNodes) {
+    for (const element of getTargetCandidateElements(previewRoot)) {
+        if (element !== contextElement &&
+            !contextElement.contains(element) &&
+            !element.contains(contextElement)) {
+            continue;
+        }
+        const selectableTarget = findSelectableTarget(element, previewRoot, annotateFile, showNativeTraceNodes);
+        if (selectableTargetIncludesLocation(selectableTarget, location)) {
+            return selectableTarget.element;
+        }
+    }
+    return null;
+}
+function findElementForTargetByTrace(previewRoot, target, annotateFile, showNativeTraceNodes) {
+    for (const element of getTargetCandidateElements(previewRoot)) {
+        const selectableTarget = findSelectableTarget(element, previewRoot, annotateFile, showNativeTraceNodes);
+        const trace = selectableTarget ? createTraceFromSelectableTarget(selectableTarget) : null;
+        if (selectableTarget &&
+            trace &&
+            isSameTargetTrace(target.trace, trace)) {
+            return selectableTarget.element;
+        }
+    }
+    return null;
+}
+function findElementForTraceLocation(previewRoot, location, annotateFile, showNativeTraceNodes) {
+    for (const element of getTargetCandidateElements(previewRoot)) {
+        const selectableTarget = findSelectableTarget(element, previewRoot, annotateFile, showNativeTraceNodes);
+        const trace = selectableTarget ? createTraceFromSelectableTarget(selectableTarget) : null;
+        if (selectableTarget &&
+            trace &&
+            traceIncludesLocation(trace, location)) {
+            return selectableTarget.element;
+        }
+    }
+    return null;
+}
+function findElementForAnyTraceLocation(previewRoot, location, annotateFile, showNativeTraceNodes) {
+    for (const element of getTargetCandidateElements(previewRoot)) {
+        const selectableTarget = findSelectableTarget(element, previewRoot, annotateFile, showNativeTraceNodes);
+        if (selectableTargetIncludesLocation(selectableTarget, location)) {
+            return selectableTarget.element;
+        }
+    }
+    return null;
+}
+function getTraceNodeLocation(target, node) {
+    return getTraceLocation(target.trace, node);
+}
+function getTraceLocation(trace, node) {
+    const frame = trace[node.frameIndex];
+    const call = node.kind === "file"
+        ? frame?.calls[0]
+        : frame?.calls[node.callIndex];
+    if (!frame || !call) {
+        return null;
+    }
+    return {
+        file: frame.file,
+        line: call.line,
+        component: call.component
+    };
+}
+function selectableTargetIncludesLocation(target, location) {
+    return Boolean(target &&
+        ((target.trace && traceIncludesLocation(target.trace, location)) ||
+            (target.annotateTrace && traceIncludesLocation(target.annotateTrace, location))));
+}
+function traceIncludesLocation(trace, location) {
+    return trace.some((frame) => frame.file === location.file &&
+        frame.calls.some((call) => call.line === location.line && call.component === location.component));
+}
+function getTargetCandidateElements(root) {
+    return [
+        ...(root.hasAttribute(INSPECTOR_ATTRIBUTE) ? [root] : []),
+        ...root.querySelectorAll(`[${INSPECTOR_ATTRIBUTE}]`)
+    ];
+}
+function getReactFiberFromElement(element) {
+    const fiberKey = Object.keys(element).find((key) => {
+        return key.startsWith("__reactFiber$") || key.startsWith("__reactInternalInstance$");
+    });
+    if (!fiberKey) {
+        return null;
+    }
+    return element[fiberKey] ?? null;
+}
+function getFiberSourceFrames(element, stopElement, annotateFile, includeNativeNodes) {
+    const frames = [];
+    const skipInternalPathFilter = annotateFile === null;
+    let current = getReactFiberFromElement(element);
+    while (current) {
+        if (current.stateNode === stopElement) {
+            break;
+        }
+        const props = getFiberProps(current);
+        const rawInspector = readStringProp(props, INSPECTOR_ATTRIBUTE);
+        const path = rawInspector ? parseInspectorLocation(rawInspector) : null;
+        if (path &&
+            (includeNativeNodes || !isNativeHostFiber(current)) &&
+            (skipInternalPathFilter || !isUiAnnotateInternalPath(parseInspectorPath(path).relativePath))) {
+            frames.push({
+                name: getFiberName(current),
+                path,
+                native: isNativeHostFiber(current)
+            });
+        }
+        current = current.return ?? null;
+    }
+    return frames;
+}
+function createTargetTraces(targetFrame, sourceFrames, annotateFile, showNativeTraceNodes) {
+    const frames = ensureNearestFrame(sourceFrames, targetFrame).reverse();
+    const annotateTrace = createTraceFromSourceFrames(filterSourceFrames(frames, showNativeTraceNodes));
+    if (!annotateFile) {
+        return { annotateTrace };
+    }
+    const entryIndex = frames.findIndex((frame) => parseInspectorPath(frame.path).relativePath === annotateFile);
+    if (entryIndex < 0) {
+        return { annotateTrace };
+    }
+    return {
+        trace: createTraceFromSourceFrames(filterSourceFrames(frames.slice(entryIndex), showNativeTraceNodes)),
+        annotateTrace
+    };
+}
+function ensureNearestFrame(sourceFrames, targetFrame) {
+    const nearestFrame = sourceFrames[0];
+    if (nearestFrame && nearestFrame.path === targetFrame.path && nearestFrame.name === targetFrame.name) {
+        return [...sourceFrames];
+    }
+    return [targetFrame, ...sourceFrames];
+}
+function filterSourceFrames(frames, showNativeTraceNodes) {
+    if (showNativeTraceNodes || frames.length <= 2) {
+        return frames;
+    }
+    return frames.filter((frame, index) => index === 0 || index === frames.length - 1 || !frame.native);
+}
+function createTraceFromSourceFrames(frames) {
+    const trace = [];
+    for (const frame of frames) {
+        const location = parseInspectorPath(frame.path);
+        const previous = trace[trace.length - 1];
+        if (!previous || previous.file !== location.relativePath) {
+            trace.push({
+                file: location.relativePath,
+                calls: []
+            });
+        }
+        trace[trace.length - 1].calls.push({
+            line: location.line,
+            component: frame.name
+        });
+    }
+    return trace.length > 0 ? normalizeTraceRoles(trace) : undefined;
+}
+function isNativeHostFiber(fiber) {
+    return typeof (fiber.elementType ?? fiber.type) === "string";
+}
+function isUiAnnotateInternalPath(relativePath) {
+    return relativePath.includes("/runtime/");
+}
+function getFiberProps(fiber) {
+    const props = fiber.pendingProps ?? fiber.memoizedProps;
+    if (typeof props === "object" && props !== null && !Array.isArray(props)) {
+        return props;
+    }
+    return {};
+}
+function readStringProp(props, name) {
+    return typeof props[name] === "string" ? props[name] : undefined;
+}
+function getFiberName(fiber) {
+    const type = fiber.elementType ?? fiber.type;
+    if (typeof type === "string") {
+        return type;
+    }
+    if (typeof type === "function") {
+        const namedType = type;
+        return typeof namedType.displayName === "string"
+            ? namedType.displayName
+            : typeof namedType.name === "string"
+                ? namedType.name
+                : "Component";
+    }
+    if (typeof type === "object" && type !== null) {
+        const namedType = type;
+        if (typeof namedType.displayName === "string") {
+            return namedType.displayName;
+        }
+        if (typeof namedType.name === "string") {
+            return namedType.name;
+        }
+    }
+    return "Component";
+}

package/dist/runtime/layout/annotate-storage.d.ts

@@ -0,0 +1,9 @@
+import type { AnnotateSettings, AnnotateWindowMap, AnnotateWindowState, ToolbarPosition } from "../shared/annotate-types.js";
+import type { AnnotateWindowResizeDirection } from "../windows/AnnotateWindowFrame.js";
+export declare function readWindowState(): AnnotateWindowMap;
+export declare function resizeWindowState(currentWindow: AnnotateWindowState, startWindow: AnnotateWindowState, direction: AnnotateWindowResizeDirection, deltaX: number, deltaY: number): AnnotateWindowState;
+export declare function clampWindowState(windowState: AnnotateWindowState): AnnotateWindowState;
+export declare function getTopWindowZ(windows: AnnotateWindowMap): number;
+export declare function readToolbarPosition(): ToolbarPosition;
+export declare function clampToolbarPosition(position: ToolbarPosition): ToolbarPosition;
+export declare function readAnnotateSettings(): AnnotateSettings;

package/dist/runtime/layout/annotate-storage.js

@@ -0,0 +1,134 @@
+import { ANNOTATE_SETTINGS_STORAGE_KEY, ANNOTATE_TOOLBAR_STORAGE_KEY, ANNOTATE_WINDOW_STORAGE_KEY, TOOLBAR_HEIGHT, TOOLBAR_WIDTH, WINDOW_MAX_SIZE_INSET, WINDOW_MIN_HEIGHT, WINDOW_MIN_WIDTH, WINDOW_VIEWPORT_MARGIN } from "../shared/annotate-constants.js";
+export function readWindowState() {
+    const fallback = getDefaultWindowState();
+    try {
+        const raw = window.localStorage.getItem(ANNOTATE_WINDOW_STORAGE_KEY);
+        if (!raw) {
+            return fallback;
+        }
+        const parsed = JSON.parse(raw);
+        return {
+            annotate: clampWindowState({ ...fallback.annotate, ...parsed.annotate }),
+            settings: clampWindowState({ ...fallback.settings, ...parsed.settings })
+        };
+    }
+    catch {
+        return fallback;
+    }
+}
+export function resizeWindowState(currentWindow, startWindow, direction, deltaX, deltaY) {
+    const nextWindow = { ...currentWindow };
+    const maxWidth = getMaxWindowWidth();
+    const maxHeight = getMaxWindowHeight();
+    if (direction.horizontal === 1) {
+        const widthLimit = Math.min(maxWidth, window.innerWidth - WINDOW_VIEWPORT_MARGIN - startWindow.x);
+        nextWindow.x = startWindow.x;
+        nextWindow.width = clampNumber(startWindow.width + deltaX, WINDOW_MIN_WIDTH, Math.max(WINDOW_MIN_WIDTH, widthLimit));
+    }
+    else if (direction.horizontal === -1) {
+        const right = startWindow.x + startWindow.width;
+        const widthLimit = Math.min(maxWidth, right - WINDOW_VIEWPORT_MARGIN);
+        nextWindow.width = clampNumber(startWindow.width - deltaX, WINDOW_MIN_WIDTH, Math.max(WINDOW_MIN_WIDTH, widthLimit));
+        nextWindow.x = right - nextWindow.width;
+    }
+    if (direction.vertical === 1) {
+        const heightLimit = Math.min(maxHeight, window.innerHeight - WINDOW_VIEWPORT_MARGIN - startWindow.y);
+        nextWindow.y = startWindow.y;
+        nextWindow.height = clampNumber(startWindow.height + deltaY, WINDOW_MIN_HEIGHT, Math.max(WINDOW_MIN_HEIGHT, heightLimit));
+    }
+    else if (direction.vertical === -1) {
+        const bottom = startWindow.y + startWindow.height;
+        const heightLimit = Math.min(maxHeight, bottom - WINDOW_VIEWPORT_MARGIN);
+        nextWindow.height = clampNumber(startWindow.height - deltaY, WINDOW_MIN_HEIGHT, Math.max(WINDOW_MIN_HEIGHT, heightLimit));
+        nextWindow.y = bottom - nextWindow.height;
+    }
+    return clampWindowState(nextWindow);
+}
+export function clampWindowState(windowState) {
+    const width = clampNumber(windowState.width, WINDOW_MIN_WIDTH, getMaxWindowWidth());
+    const height = clampNumber(windowState.height, WINDOW_MIN_HEIGHT, getMaxWindowHeight());
+    return {
+        ...windowState,
+        width,
+        height,
+        x: clampNumber(windowState.x, WINDOW_VIEWPORT_MARGIN, Math.max(WINDOW_VIEWPORT_MARGIN, window.innerWidth - width - WINDOW_VIEWPORT_MARGIN)),
+        y: clampNumber(windowState.y, WINDOW_VIEWPORT_MARGIN, Math.max(WINDOW_VIEWPORT_MARGIN, window.innerHeight - height - WINDOW_VIEWPORT_MARGIN))
+    };
+}
+export function getTopWindowZ(windows) {
+    return Math.max(...Object.values(windows).map((windowState) => windowState.zIndex));
+}
+export function readToolbarPosition() {
+    const fallback = getDefaultToolbarPosition();
+    try {
+        const raw = window.localStorage.getItem(ANNOTATE_TOOLBAR_STORAGE_KEY);
+        if (!raw) {
+            return fallback;
+        }
+        return clampToolbarPosition({
+            ...fallback,
+            ...JSON.parse(raw)
+        });
+    }
+    catch {
+        return fallback;
+    }
+}
+export function clampToolbarPosition(position) {
+    return {
+        x: Math.min(Math.max(position.x, 8), Math.max(8, window.innerWidth - TOOLBAR_WIDTH - 8)),
+        y: Math.min(Math.max(position.y, 8), Math.max(8, window.innerHeight - TOOLBAR_HEIGHT - 8))
+    };
+}
+export function readAnnotateSettings() {
+    const fallback = {
+        showNativeTraceNodes: false
+    };
+    try {
+        const raw = window.localStorage.getItem(ANNOTATE_SETTINGS_STORAGE_KEY);
+        if (!raw) {
+            return fallback;
+        }
+        const parsed = JSON.parse(raw);
+        return {
+            showNativeTraceNodes: parsed.showNativeTraceNodes === true ||
+                parsed.showFullComponentStack === true
+        };
+    }
+    catch {
+        return fallback;
+    }
+}
+function getDefaultWindowState() {
+    return {
+        annotate: createDefaultWindow("annotate", 24),
+        settings: createDefaultWindow("settings", 84)
+    };
+}
+function createDefaultWindow(id, offset) {
+    const width = id === "settings" ? 360 : 380;
+    const height = id === "settings" ? 180 : 560;
+    return clampWindowState({
+        open: false,
+        x: Math.max(16, window.innerWidth - width - offset),
+        y: 64 + offset / 2,
+        width,
+        height,
+        zIndex: 10001
+    });
+}
+function getMaxWindowWidth() {
+    return Math.max(WINDOW_MIN_WIDTH, window.innerWidth - WINDOW_MAX_SIZE_INSET);
+}
+function getMaxWindowHeight() {
+    return Math.max(WINDOW_MIN_HEIGHT, window.innerHeight - WINDOW_MAX_SIZE_INSET);
+}
+function getDefaultToolbarPosition() {
+    return {
+        x: Math.round((window.innerWidth - TOOLBAR_WIDTH) / 2),
+        y: Math.max(16, window.innerHeight - TOOLBAR_HEIGHT - 20)
+    };
+}
+function clampNumber(value, min, max) {
+    return Math.min(Math.max(value, min), max);
+}

package/dist/runtime/layout/use-annotate-layout.d.ts

@@ -0,0 +1,17 @@
+import { type PointerEvent as ReactPointerEvent } from "react";
+import type { Dispatch, SetStateAction } from "react";
+import type { AnnotateWindowId, AnnotateWindowMap, ToolbarPosition, AnnotateSettings } from "../shared/annotate-types.js";
+import type { AnnotateWindowResizeDirection } from "../windows/AnnotateWindowFrame.js";
+type UseAnnotateLayoutResult = {
+    beginToolbarDrag: (event: ReactPointerEvent<HTMLDivElement>) => void;
+    beginWindowMove: (id: AnnotateWindowId, event: ReactPointerEvent<HTMLElement>) => void;
+    beginWindowResize: (id: AnnotateWindowId, direction: AnnotateWindowResizeDirection, event: ReactPointerEvent<HTMLDivElement>) => void;
+    closeWindow: (id: AnnotateWindowId) => void;
+    openWindow: (id: AnnotateWindowId) => void;
+    setSettings: Dispatch<SetStateAction<AnnotateSettings>>;
+    settings: AnnotateSettings;
+    toolbarPosition: ToolbarPosition;
+    windows: AnnotateWindowMap;
+};
+export declare function useAnnotateLayout(): UseAnnotateLayoutResult;
+export {};

package/dist/runtime/layout/use-annotate-layout.js

@@ -0,0 +1,147 @@
+import { useEffect, useRef, useState } from "react";
+import { ANNOTATE_SETTINGS_STORAGE_KEY, ANNOTATE_TOOLBAR_STORAGE_KEY, ANNOTATE_WINDOW_STORAGE_KEY } from "../shared/annotate-constants.js";
+import { clampToolbarPosition, clampWindowState, getTopWindowZ, readToolbarPosition, readWindowState, readAnnotateSettings, resizeWindowState } from "./annotate-storage.js";
+export function useAnnotateLayout() {
+    const [windows, setWindows] = useState(() => readWindowState());
+    const [toolbarPosition, setToolbarPosition] = useState(() => readToolbarPosition());
+    const [settings, setSettings] = useState(() => readAnnotateSettings());
+    const gestureRef = useRef(null);
+    const nextWindowZRef = useRef(getTopWindowZ(windows) + 1);
+    useEffect(() => {
+        window.localStorage.setItem(ANNOTATE_WINDOW_STORAGE_KEY, JSON.stringify(windows));
+    }, [windows]);
+    useEffect(() => {
+        window.localStorage.setItem(ANNOTATE_TOOLBAR_STORAGE_KEY, JSON.stringify(toolbarPosition));
+    }, [toolbarPosition]);
+    useEffect(() => {
+        window.localStorage.setItem(ANNOTATE_SETTINGS_STORAGE_KEY, JSON.stringify(settings));
+    }, [settings]);
+    useEffect(() => {
+        function handlePointerMove(event) {
+            const gesture = gestureRef.current;
+            if (!gesture) {
+                return;
+            }
+            event.preventDefault();
+            if (gesture.kind === "toolbar") {
+                setToolbarPosition(clampToolbarPosition({
+                    x: gesture.toolbar.x + event.clientX - gesture.startX,
+                    y: gesture.toolbar.y + event.clientY - gesture.startY
+                }));
+                return;
+            }
+            setWindows((current) => {
+                const currentWindow = current[gesture.id];
+                const nextWindow = gesture.kind === "window-move"
+                    ? {
+                        ...currentWindow,
+                        x: gesture.window.x + event.clientX - gesture.startX,
+                        y: gesture.window.y + event.clientY - gesture.startY
+                    }
+                    : resizeWindowState(currentWindow, gesture.window, gesture.direction, event.clientX - gesture.startX, event.clientY - gesture.startY);
+                return {
+                    ...current,
+                    [gesture.id]: clampWindowState(nextWindow)
+                };
+            });
+        }
+        function handlePointerUp() {
+            gestureRef.current = null;
+        }
+        function handleResize() {
+            setToolbarPosition((current) => clampToolbarPosition(current));
+            setWindows((current) => {
+                const nextWindows = { ...current };
+                for (const id of Object.keys(nextWindows)) {
+                    nextWindows[id] = clampWindowState(nextWindows[id]);
+                }
+                return nextWindows;
+            });
+        }
+        window.addEventListener("pointermove", handlePointerMove);
+        window.addEventListener("pointerup", handlePointerUp);
+        window.addEventListener("resize", handleResize);
+        return () => {
+            window.removeEventListener("pointermove", handlePointerMove);
+            window.removeEventListener("pointerup", handlePointerUp);
+            window.removeEventListener("resize", handleResize);
+        };
+    }, []);
+    function openWindow(id) {
+        setWindows((current) => {
+            const zIndex = nextWindowZRef.current + 1;
+            nextWindowZRef.current = zIndex;
+            return {
+                ...current,
+                [id]: {
+                    ...current[id],
+                    open: true,
+                    zIndex
+                }
+            };
+        });
+    }
+    function closeWindow(id) {
+        setWindows((current) => ({
+            ...current,
+            [id]: {
+                ...current[id],
+                open: false
+            }
+        }));
+    }
+    function beginWindowMove(id, event) {
+        if (event.button !== 0) {
+            return;
+        }
+        event.currentTarget.setPointerCapture(event.pointerId);
+        openWindow(id);
+        gestureRef.current = {
+            kind: "window-move",
+            id,
+            startX: event.clientX,
+            startY: event.clientY,
+            window: windows[id]
+        };
+    }
+    function beginWindowResize(id, direction, event) {
+        if (event.button !== 0) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        event.currentTarget.setPointerCapture(event.pointerId);
+        openWindow(id);
+        gestureRef.current = {
+            kind: "window-resize",
+            id,
+            direction,
+            startX: event.clientX,
+            startY: event.clientY,
+            window: windows[id]
+        };
+    }
+    function beginToolbarDrag(event) {
+        if (event.button !== 0 || event.target instanceof Element && event.target.closest("button")) {
+            return;
+        }
+        event.currentTarget.setPointerCapture(event.pointerId);
+        gestureRef.current = {
+            kind: "toolbar",
+            startX: event.clientX,
+            startY: event.clientY,
+            toolbar: toolbarPosition
+        };
+    }
+    return {
+        beginToolbarDrag,
+        beginWindowMove,
+        beginWindowResize,
+        closeWindow,
+        openWindow,
+        setSettings,
+        settings,
+        toolbarPosition,
+        windows
+    };
+}

package/dist/runtime/overlay/SelectionOverlay.d.ts

@@ -0,0 +1,7 @@
+import { type ReactNode } from "react";
+import type { OverlayHighlight } from "../shared/annotate-types.js";
+export declare function SelectionOverlay({ highlights, onEditTarget, onDeleteAnnotateTarget }: {
+    highlights: OverlayHighlight[];
+    onEditTarget(targetId: string): void;
+    onDeleteAnnotateTarget(targetId: string): void;
+}): ReactNode;