@fivepixels-js/react 0.1.6 → 0.2.0

package/dist/components/overlay/PickTargetContextMenu.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect } from "react";
+import { DeleteIcon, EditIcon, RevertIcon } from "../../components/icons/Icons.js";
+import { useReport } from "../../providers/reportContext.js";
+const MENU_SURFACE_CLASS = "pointer-events-auto fixed z-[1000004] min-w-[140px] overflow-hidden rounded-[10px] border border-[var(--adaptive-border-subtle)] bg-[var(--adaptive-surface-overlay)] py-[4px] shadow-[var(--adaptive-popup-shadow)] backdrop-blur-[20px]";
+const MENU_ITEM_CLASS = "flex w-full items-center gap-[8px] px-[12px] py-[8px] text-left text-[14px] font-medium hover:bg-[var(--adaptive-black100)]";
+const MENU_DIVIDER_CLASS = "my-[4px] h-px bg-[var(--adaptive-border-subtle)]";
+export function PickTargetContextMenu({ clientX, clientY, showRevert }) {
+    const { messages, closePickTargetContextMenu, handlePickTargetEdit, handlePickTargetDelete, handlePickTargetRevert, } = useReport();
+    useEffect(() => {
+        const handleKeyDown = (event) => {
+            if (event.key === "Escape") {
+                closePickTargetContextMenu();
+            }
+        };
+        window.addEventListener("keydown", handleKeyDown);
+        return () => {
+            window.removeEventListener("keydown", handleKeyDown);
+        };
+    }, [closePickTargetContextMenu]);
+    const viewportWidth = typeof window !== "undefined" ? window.innerWidth : 0;
+    const viewportHeight = typeof window !== "undefined" ? window.innerHeight : 0;
+    const left = Math.min(clientX, Math.max(8, viewportWidth - 160));
+    const top = Math.min(clientY, Math.max(8, viewportHeight - (showRevert ? 140 : 108)));
+    return (_jsxs("div", { "data-fivepixels-interactive": "", className: MENU_SURFACE_CLASS, style: { left, top }, onClick: (event) => event.stopPropagation(), onContextMenu: (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+        }, children: [_jsxs("button", { type: "button", "data-fivepixels-interactive": "", onClick: () => handlePickTargetEdit(), className: `${MENU_ITEM_CLASS} text-[#1f1f1f]`, children: [_jsx(EditIcon, { className: "h-[18px] w-[18px] shrink-0", fill: "#1f1f1f" }), messages.pickTarget.contextEdit] }), showRevert ? (_jsxs("button", { type: "button", "data-fivepixels-interactive": "", onClick: () => handlePickTargetRevert(), className: `${MENU_ITEM_CLASS} text-[#1f1f1f]`, children: [_jsx(RevertIcon, { className: "h-[18px] w-[18px] shrink-0", fill: "#1f1f1f" }), messages.pickTarget.contextRevert] })) : null, _jsx("div", { role: "separator", "aria-hidden": "true", className: MENU_DIVIDER_CLASS }), _jsxs("button", { type: "button", "data-fivepixels-interactive": "", onClick: () => handlePickTargetDelete(), className: `${MENU_ITEM_CLASS} text-[#ff1861] hover:bg-[#ff18611a]`, children: [_jsx(DeleteIcon, { className: "h-[18px] w-[18px] shrink-0", fill: "#ff1861" }), messages.pickTarget.contextDelete] })] }));
+}
+//# sourceMappingURL=PickTargetContextMenu.js.map

package/dist/components/overlay/PickTargetContextMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PickTargetContextMenu.js","sourceRoot":"","sources":["../../../src/components/overlay/PickTargetContextMenu.tsx"],"names":[],"mappings":"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"}

package/dist/components/overlay/PickTargetHoverTooltip.d.ts

@@ -0,0 +1,7 @@
+import type { TargetSnapshot } from "../../types/report-ui.js";
+type PickTargetHoverTooltipProps = {
+    target: TargetSnapshot;
+};
+export declare function PickTargetHoverTooltip({ target }: PickTargetHoverTooltipProps): import("react/jsx-runtime").JSX.Element | null;
+export {};
+//# sourceMappingURL=PickTargetHoverTooltip.d.ts.map

package/dist/components/overlay/PickTargetHoverTooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PickTargetHoverTooltip.d.ts","sourceRoot":"","sources":["../../../src/components/overlay/PickTargetHoverTooltip.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAQ3D,KAAK,2BAA2B,GAAG;IAC/B,MAAM,EAAE,cAAc,CAAC;CAC1B,CAAC;AAuDF,wBAAgB,sBAAsB,CAAC,EAAE,MAAM,EAAE,EAAE,2BAA2B,kDAsF7E"}

package/dist/components/overlay/PickTargetHoverTooltip.js

@@ -0,0 +1,69 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useLayoutEffect, useRef, useState } from "react";
+import { useReport } from "../../providers/reportContext.js";
+import { HOVER_TOOLTIP_MARGIN } from "../../utils/hoverTooltipLayout.js";
+const TOOLTIP_SURFACE_CLASS = "pointer-events-none fixed z-[1000002] min-w-[220px] max-w-[min(320px,calc(100vw-16px))] overflow-hidden rounded-[12px] border border-[var(--adaptive-border-subtle)] bg-[var(--adaptive-surface-overlay)] px-[12px] py-[10px] shadow-[var(--adaptive-popup-shadow)] backdrop-blur-[20px]";
+const POINTER_OFFSET = 12;
+function InspectRow({ label, value, valueClassName = "" }) {
+    return (_jsxs("div", { className: "flex items-start justify-between gap-[12px] text-[11px] leading-[1.45]", children: [_jsx("span", { className: "shrink-0 text-[var(--adaptive-black500)]", children: label }), _jsx("span", { className: `min-w-0 break-all text-right font-[var(--coding-font)] text-[var(--adaptive-black900)] ${valueClassName}`.trim(), children: value })] }));
+}
+function ReportIdStatusIcon({ tagged }) {
+    if (tagged) {
+        return (_jsx("span", { "aria-hidden": "true", className: "inline-flex h-[16px] w-[16px] shrink-0 items-center justify-center rounded-full bg-[#22c55e1f] text-[11px] font-bold text-[#16a34a]", children: "\u2713" }));
+    }
+    return (_jsx("span", { "aria-hidden": "true", className: "inline-flex h-[16px] w-[16px] shrink-0 items-center justify-center rounded-full bg-[#ef44441f] text-[11px] font-bold text-[#dc2626]", children: "\u2715" }));
+}
+function getPointerTooltipLayout(clientX, clientY, tooltipRect) {
+    const viewportWidth = window.innerWidth;
+    const viewportHeight = window.innerHeight;
+    let left = clientX + POINTER_OFFSET;
+    let top = clientY + POINTER_OFFSET;
+    if (left + tooltipRect.width > viewportWidth - HOVER_TOOLTIP_MARGIN) {
+        left = clientX - POINTER_OFFSET - tooltipRect.width;
+    }
+    if (top + tooltipRect.height > viewportHeight - HOVER_TOOLTIP_MARGIN) {
+        top = clientY - POINTER_OFFSET - tooltipRect.height;
+    }
+    left = Math.min(Math.max(left, HOVER_TOOLTIP_MARGIN), Math.max(HOVER_TOOLTIP_MARGIN, viewportWidth - HOVER_TOOLTIP_MARGIN - tooltipRect.width));
+    top = Math.min(Math.max(top, HOVER_TOOLTIP_MARGIN), Math.max(HOVER_TOOLTIP_MARGIN, viewportHeight - HOVER_TOOLTIP_MARGIN - tooltipRect.height));
+    return { top, left };
+}
+export function PickTargetHoverTooltip({ target }) {
+    const { messages, hoverPointer } = useReport();
+    const tooltipRef = useRef(null);
+    const [layout, setLayout] = useState(null);
+    const updateLayout = useCallback(() => {
+        const tooltip = tooltipRef.current;
+        if (!tooltip || !hoverPointer) {
+            return;
+        }
+        setLayout(getPointerTooltipLayout(hoverPointer.clientX, hoverPointer.clientY, tooltip.getBoundingClientRect()));
+    }, [hoverPointer]);
+    useLayoutEffect(() => {
+        if (!hoverPointer) {
+            setLayout(null);
+            return;
+        }
+        updateLayout();
+        const frameId = window.requestAnimationFrame(updateLayout);
+        window.addEventListener("resize", updateLayout);
+        window.addEventListener("scroll", updateLayout, true);
+        return () => {
+            window.cancelAnimationFrame(frameId);
+            window.removeEventListener("resize", updateLayout);
+            window.removeEventListener("scroll", updateLayout, true);
+        };
+    }, [hoverPointer, target, updateLayout]);
+    if (!hoverPointer) {
+        return null;
+    }
+    const tagName = target.tagName ?? "—";
+    const sizeLabel = `${Math.round(target.rect.width)} × ${Math.round(target.rect.height)}`;
+    const reportIdValue = target.reportIdAttribute ?? messages.pickTarget.tooltipNoReportId;
+    return (_jsx("div", { ref: tooltipRef, className: TOOLTIP_SURFACE_CLASS, style: {
+            top: layout?.top ?? hoverPointer.clientY + POINTER_OFFSET,
+            left: layout?.left ?? hoverPointer.clientX + POINTER_OFFSET,
+            opacity: layout ? 1 : 0,
+        }, children: _jsxs("div", { className: "flex flex-col gap-[6px]", children: [_jsx(InspectRow, { label: messages.pickTarget.tooltipTag, value: `<${tagName}>` }), _jsx(InspectRow, { label: messages.pickTarget.tooltipSize, value: sizeLabel }), target.boxStyle ? (_jsxs(_Fragment, { children: [_jsx(InspectRow, { label: messages.pickTarget.tooltipDisplay, value: target.boxStyle.display }), _jsx(InspectRow, { label: messages.pickTarget.tooltipPadding, value: target.boxStyle.padding }), _jsx(InspectRow, { label: messages.pickTarget.tooltipMargin, value: target.boxStyle.margin })] })) : null, target.fontStyle ? (_jsxs(_Fragment, { children: [_jsx(InspectRow, { label: messages.pickTarget.tooltipFontFamily, value: target.fontStyle.fontFamily }), _jsx(InspectRow, { label: messages.pickTarget.tooltipFontSize, value: target.fontStyle.fontSize }), _jsx(InspectRow, { label: messages.pickTarget.tooltipFontWeight, value: target.fontStyle.fontWeight }), _jsx(InspectRow, { label: messages.pickTarget.tooltipLineHeight, value: target.fontStyle.lineHeight })] })) : null, _jsx("div", { className: "mt-[2px] border-t border-[var(--adaptive-border-subtle)] pt-[6px]", children: _jsxs("div", { className: "flex items-start justify-between gap-[8px] text-[11px] leading-[1.45]", children: [_jsx("span", { className: "shrink-0 text-[var(--adaptive-black500)]", children: messages.pickTarget.tooltipReportId }), _jsxs("div", { className: "flex min-w-0 items-start justify-end gap-[6px]", children: [_jsx(ReportIdStatusIcon, { tagged: target.isTagged }), _jsx("span", { className: "min-w-0 break-all text-right font-[var(--coding-font)] text-[var(--adaptive-black900)]", children: reportIdValue })] })] }) })] }) }));
+}
+//# sourceMappingURL=PickTargetHoverTooltip.js.map

package/dist/components/overlay/PickTargetHoverTooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PickTargetHoverTooltip.js","sourceRoot":"","sources":["../../../src/components/overlay/PickTargetHoverTooltip.tsx"],"names":[],"mappings":"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"}

package/dist/components/overlay/PickTargetProbePanel.d.ts

@@ -0,0 +1,2 @@
+export declare function PickTargetProbePanel(): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=PickTargetProbePanel.d.ts.map

package/dist/components/overlay/PickTargetProbePanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PickTargetProbePanel.d.ts","sourceRoot":"","sources":["../../../src/components/overlay/PickTargetProbePanel.tsx"],"names":[],"mappings":"AAwLA,wBAAgB,oBAAoB,mDAoKnC"}

package/dist/components/overlay/PickTargetProbePanel.js

@@ -0,0 +1,106 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { CheckIcon, CopyIcon } from "../../components/icons/Icons.js";
+import { useReport } from "../../providers/reportContext.js";
+import { isSteppableCssValue, stepCssBoxSides, stepCssPixel } from "../../utils/cssStepper.js";
+import { copyTextToClipboard } from "../../utils/feedbackDataTransfer.js";
+import { getPickProbePanelLayout } from "../../utils/pickProbeLayout.js";
+import { getProbeColorPreview, isValidProbeHexColor, probeHexToColorInputValue, sanitizeProbeHexInput } from "../../utils/probeColor.js";
+import { PickTargetCompareSegment } from "./PickTargetCompareSegment.js";
+import { ProbeLayoutControls } from "./ProbeLayoutControls.js";
+const PANEL_SURFACE_CLASS = "pointer-events-auto fixed z-[1000002] w-[min(320px,calc(100vw-16px))] overflow-hidden rounded-[12px] border border-[var(--adaptive-border-subtle)] bg-[var(--adaptive-surface-overlay)] shadow-[var(--adaptive-popup-shadow)] backdrop-blur-[20px]";
+const PROBE_HEADER_ACTION_CLASS = "shrink-0 rounded-[6px] border border-[var(--adaptive-border-subtle)] px-[8px] py-[3px] text-[11px] font-medium text-[var(--adaptive-black700)] hover:bg-[var(--adaptive-black100)]";
+const STEPPER_STEP_PX = 1;
+function ProbeTextField({ label, value, onChange }) {
+    return (_jsxs("label", { className: "flex flex-col gap-[4px] text-[11px]", children: [_jsx("span", { className: "font-medium text-[var(--adaptive-black500)]", children: label }), _jsx("input", { type: "text", "data-fivepixels-interactive": "", value: value, onChange: (event) => onChange(event.target.value), className: "w-full rounded-[8px] border border-[var(--adaptive-border-subtle)] bg-[var(--adaptive-black50)] px-[8px] py-[6px] font-[var(--coding-font)] text-[12px] text-[var(--adaptive-black900)] outline-none focus:border-[var(--adaptive-blue500)]" })] }));
+}
+function ProbeColorField({ label, value, onChange }) {
+    const { messages } = useReport();
+    const colorInputRef = useRef(null);
+    const copyTimeoutRef = useRef(null);
+    const [copied, setCopied] = useState(false);
+    const preview = getProbeColorPreview(value);
+    const canCopy = isValidProbeHexColor(value);
+    useEffect(() => {
+        return () => {
+            if (copyTimeoutRef.current !== null) {
+                window.clearTimeout(copyTimeoutRef.current);
+            }
+        };
+    }, []);
+    const handleCopy = () => {
+        if (!preview) {
+            return;
+        }
+        void copyTextToClipboard(preview)
+            .then(() => {
+            setCopied(true);
+            if (copyTimeoutRef.current !== null) {
+                window.clearTimeout(copyTimeoutRef.current);
+            }
+            copyTimeoutRef.current = window.setTimeout(() => {
+                setCopied(false);
+                copyTimeoutRef.current = null;
+            }, 1000);
+        })
+            .catch(() => {
+            setCopied(false);
+        });
+    };
+    return (_jsxs("label", { className: "flex flex-col gap-[4px] text-[11px]", children: [_jsx("span", { className: "font-medium text-[var(--adaptive-black500)]", children: label }), _jsxs("div", { className: "flex items-center gap-[6px]", children: [_jsxs("button", { type: "button", "data-fivepixels-interactive": "", onClick: () => colorInputRef.current?.click(), className: "relative h-[30px] w-[30px] shrink-0 overflow-hidden rounded-[8px] border border-[var(--adaptive-border-subtle)]", "aria-label": label, children: [_jsx("span", { className: "absolute inset-0", style: { backgroundColor: preview ?? "transparent" }, "aria-hidden": true }), _jsx("input", { ref: colorInputRef, type: "color", "data-fivepixels-interactive": "", value: probeHexToColorInputValue(value), onChange: (event) => onChange(event.target.value), className: "absolute inset-0 h-full w-full cursor-pointer opacity-0", tabIndex: -1 })] }), _jsx("input", { type: "text", "data-fivepixels-interactive": "", value: value, onChange: (event) => onChange(sanitizeProbeHexInput(event.target.value)), placeholder: "#ededed", className: "min-w-0 flex-1 rounded-[8px] border border-[var(--adaptive-border-subtle)] bg-[var(--adaptive-black50)] px-[8px] py-[6px] font-[var(--coding-font)] text-[12px] text-[var(--adaptive-black900)] outline-none focus:border-[var(--adaptive-blue500)]" }), _jsx("button", { type: "button", "data-fivepixels-interactive": "", onClick: handleCopy, disabled: !canCopy, "aria-label": copied ? messages.common.copied : messages.common.copy, className: "inline-flex h-[30px] w-[30px] shrink-0 items-center justify-center rounded-[8px] border border-[var(--adaptive-border-subtle)] bg-[var(--adaptive-black50)] text-[var(--adaptive-black700)] disabled:opacity-40", children: copied ? _jsx(CheckIcon, { className: "h-[14px] w-[14px] text-[var(--adaptive-green500)]" }) : _jsx(CopyIcon, { className: "h-[14px] w-[14px]" }) })] })] }));
+}
+function ProbeStepperField({ label, value, onChange }) {
+    const steppable = isSteppableCssValue(value);
+    const isSinglePixel = /^\d/.test(value.trim()) && !value.trim().includes(" ");
+    const handleStep = (delta) => {
+        if (!steppable) {
+            return;
+        }
+        onChange(isSinglePixel ? stepCssPixel(value, delta * STEPPER_STEP_PX) : stepCssBoxSides(value, delta * STEPPER_STEP_PX));
+    };
+    return (_jsxs("div", { className: "flex flex-col gap-[4px] text-[11px]", children: [_jsx("span", { className: "font-medium text-[var(--adaptive-black500)]", children: label }), _jsxs("div", { className: "flex items-center gap-[6px]", children: [_jsx("button", { type: "button", "data-fivepixels-interactive": "", disabled: !steppable, onClick: () => handleStep(-1), className: "inline-flex h-[30px] w-[30px] shrink-0 items-center justify-center rounded-[8px] border border-[var(--adaptive-border-subtle)] bg-[var(--adaptive-black50)] text-[14px] font-semibold text-[var(--adaptive-black900)] disabled:opacity-40", "aria-label": `Decrease ${label}`, children: "\u2212" }), _jsx("div", { className: "min-w-0 flex-1 rounded-[8px] border border-[var(--adaptive-border-subtle)] bg-[var(--adaptive-black50)] px-[8px] py-[6px] text-center font-[var(--coding-font)] text-[12px] text-[var(--adaptive-black900)]", children: value }), _jsx("button", { type: "button", "data-fivepixels-interactive": "", disabled: !steppable, onClick: () => handleStep(1), className: "inline-flex h-[30px] w-[30px] shrink-0 items-center justify-center rounded-[8px] border border-[var(--adaptive-border-subtle)] bg-[var(--adaptive-black50)] text-[14px] font-semibold text-[var(--adaptive-black900)] disabled:opacity-40", "aria-label": `Increase ${label}`, children: "+" })] })] }));
+}
+export function PickTargetProbePanel() {
+    const { messages, selectedTarget, pickProbeOpen, pickProbeValues, pickProbeSupportsTextFields, pickProbeLayoutMode, pickProbeCompareMode, pickProbeHasEdits, setPickProbeCompareMode, updatePickProbeValue, resetPickProbeValues, closePickProbe, } = useReport();
+    const panelRef = useRef(null);
+    const [layout, setLayout] = useState(null);
+    const updateLayout = useCallback(() => {
+        const panel = panelRef.current;
+        if (!panel || !selectedTarget) {
+            return;
+        }
+        const rect = panel.getBoundingClientRect();
+        setLayout(getPickProbePanelLayout(selectedTarget.rect, rect.width, rect.height));
+    }, [selectedTarget]);
+    useLayoutEffect(() => {
+        if (!pickProbeOpen || !selectedTarget) {
+            setLayout(null);
+            return;
+        }
+        updateLayout();
+        const frameId = window.requestAnimationFrame(updateLayout);
+        window.addEventListener("resize", updateLayout);
+        window.addEventListener("scroll", updateLayout, true);
+        return () => {
+            window.cancelAnimationFrame(frameId);
+            window.removeEventListener("resize", updateLayout);
+            window.removeEventListener("scroll", updateLayout, true);
+        };
+    }, [pickProbeOpen, selectedTarget, pickProbeValues, updateLayout]);
+    if (!pickProbeOpen || !selectedTarget || !pickProbeValues) {
+        return null;
+    }
+    const handleChange = (key) => (value) => {
+        updatePickProbeValue(key, value);
+    };
+    const values = pickProbeValues;
+    return (_jsx("div", { ref: panelRef, "data-fivepixels-interactive": "", onClick: (event) => event.stopPropagation(), onContextMenu: (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+        }, className: PANEL_SURFACE_CLASS, style: {
+            top: layout?.top ?? selectedTarget.rect.bottom + 8,
+            left: layout?.left ?? selectedTarget.rect.left,
+            opacity: layout ? 1 : 0,
+        }, children: _jsxs("div", { className: "flex max-h-[min(70vh,560px)] flex-col gap-[10px] overflow-y-auto px-[12px] py-[10px]", children: [_jsxs("div", { className: "flex items-center justify-between gap-[8px]", children: [_jsx("p", { className: "min-w-0 shrink text-[12px] font-semibold text-[var(--adaptive-black900)]", children: messages.pickTarget.probeTitle }), _jsxs("div", { className: "flex shrink-0 items-center gap-[6px]", children: [pickProbeHasEdits ? (_jsx(PickTargetCompareSegment, { mode: pickProbeCompareMode, onChange: setPickProbeCompareMode, beforeLabel: messages.pickTarget.probeBefore, afterLabel: messages.pickTarget.probeAfter })) : null, _jsx("button", { type: "button", "data-fivepixels-interactive": "", onClick: resetPickProbeValues, className: PROBE_HEADER_ACTION_CLASS, children: messages.pickTarget.probeReset }), _jsx("button", { type: "button", "data-fivepixels-interactive": "", onClick: closePickProbe, className: PROBE_HEADER_ACTION_CLASS, children: messages.pickTarget.probeClose })] })] }), pickProbeSupportsTextFields ? (_jsxs(_Fragment, { children: [_jsx(ProbeTextField, { label: messages.pickTarget.probeText, value: values.textContent, onChange: handleChange("textContent") }), _jsx(ProbeStepperField, { label: messages.pickTarget.probeFontSize, value: values.fontSize, onChange: handleChange("fontSize") }), _jsx(ProbeTextField, { label: messages.pickTarget.probeLineHeight, value: values.lineHeight, onChange: handleChange("lineHeight") })] })) : null, _jsxs("section", { className: "flex", children: [_jsx(ProbeStepperField, { label: messages.pickTarget.probePadding, value: values.padding, onChange: handleChange("padding") }), _jsx(ProbeStepperField, { label: messages.pickTarget.probeMargin, value: values.margin, onChange: handleChange("margin") })] }), _jsx(ProbeColorField, { label: messages.pickTarget.probeTextColor, value: values.textColor, onChange: handleChange("textColor") }), _jsx(ProbeColorField, { label: messages.pickTarget.probeBackgroundColor, value: values.backgroundColor, onChange: handleChange("backgroundColor") }), _jsx(ProbeColorField, { label: messages.pickTarget.probeBorderColor, value: values.borderColor, onChange: handleChange("borderColor") }), _jsx(ProbeLayoutControls, { layoutMode: pickProbeLayoutMode, values: values, messages: messages, onChange: (key, value) => handleChange(key)(value) })] }) }));
+}
+//# sourceMappingURL=PickTargetProbePanel.js.map

package/dist/components/overlay/PickTargetProbePanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PickTargetProbePanel.js","sourceRoot":"","sources":["../../../src/components/overlay/PickTargetProbePanel.tsx"],"names":[],"mappings":"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"}

package/dist/components/overlay/PickTargetSavedBadges.d.ts

@@ -0,0 +1,2 @@
+export declare function PickTargetSavedBadges(): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=PickTargetSavedBadges.d.ts.map

package/dist/components/overlay/PickTargetSavedBadges.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PickTargetSavedBadges.d.ts","sourceRoot":"","sources":["../../../src/components/overlay/PickTargetSavedBadges.tsx"],"names":[],"mappings":"AAgEA,wBAAgB,qBAAqB,mDAsCpC"}

package/dist/components/overlay/PickTargetSavedBadges.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { useReport } from "../../providers/reportContext.js";
+import { findElementByProbeKey } from "../../utils/pickProbeSession.js";
+import { getPickProbeSavedBadgeLayout } from "../../utils/pickProbeLayout.js";
+function SavedProbeBadge({ elementKey, label, badgeOpacity }) {
+    const badgeRef = useRef(null);
+    const [layout, setLayout] = useState(null);
+    useLayoutEffect(() => {
+        const element = findElementByProbeKey(elementKey);
+        const badge = badgeRef.current;
+        if (!element || !badge) {
+            setLayout(null);
+            return;
+        }
+        const update = () => {
+            const rect = element.getBoundingClientRect();
+            const badgeRect = badge.getBoundingClientRect();
+            setLayout(getPickProbeSavedBadgeLayout(rect, badgeRect.width, badgeRect.height));
+        };
+        update();
+        const frameId = window.requestAnimationFrame(update);
+        window.addEventListener("resize", update);
+        window.addEventListener("scroll", update, true);
+        return () => {
+            window.cancelAnimationFrame(frameId);
+            window.removeEventListener("resize", update);
+            window.removeEventListener("scroll", update, true);
+        };
+    }, [elementKey, label]);
+    const element = findElementByProbeKey(elementKey);
+    if (!element) {
+        return null;
+    }
+    return (_jsx("span", { ref: badgeRef, className: "pointer-events-none fixed z-[1000003] rounded-[4px] bg-[#8b5cf6] px-[5px] py-[1px] text-[12px] font-semibold leading-[1.3] text-white shadow-[0_1px_4px_rgba(0,0,0,0.18)]", style: {
+            top: layout?.top ?? element.getBoundingClientRect().top,
+            left: layout?.left ?? element.getBoundingClientRect().right,
+            opacity: layout ? badgeOpacity : 0,
+        }, children: label }));
+}
+export function PickTargetSavedBadges() {
+    const { savedProbeEdits, messages, mode } = useReport();
+    const [, setTick] = useState(0);
+    const savedElementKeys = Object.keys(savedProbeEdits);
+    const badgeOpacity = mode === "report" ? 1 : 0.5;
+    useEffect(() => {
+        if (savedElementKeys.length === 0) {
+            return;
+        }
+        const update = () => setTick((value) => value + 1);
+        window.addEventListener("resize", update);
+        window.addEventListener("scroll", update, true);
+        return () => {
+            window.removeEventListener("resize", update);
+            window.removeEventListener("scroll", update, true);
+        };
+    }, [savedElementKeys.length]);
+    if (savedElementKeys.length === 0) {
+        return null;
+    }
+    return (_jsx(_Fragment, { children: savedElementKeys.map((elementKey) => (_jsx(SavedProbeBadge, { elementKey: elementKey, label: messages.pickTarget.probeModifiedBadge, badgeOpacity: badgeOpacity }, elementKey))) }));
+}
+//# sourceMappingURL=PickTargetSavedBadges.js.map

package/dist/components/overlay/PickTargetSavedBadges.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PickTargetSavedBadges.js","sourceRoot":"","sources":["../../../src/components/overlay/PickTargetSavedBadges.tsx"],"names":[],"mappings":"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"}

package/dist/components/overlay/ProbeLayoutControls.d.ts

@@ -0,0 +1,11 @@
+import type { ReportMessages } from "../../i18n/types.js";
+import type { PickProbeFieldKey, PickProbeLayoutMode, PickProbeValues } from "../../types/report-ui.js";
+type ProbeLayoutControlsProps = {
+    layoutMode: PickProbeLayoutMode;
+    values: PickProbeValues;
+    messages: ReportMessages;
+    onChange: (key: PickProbeFieldKey, value: string) => void;
+};
+export declare function ProbeLayoutControls({ layoutMode, values, messages, onChange }: ProbeLayoutControlsProps): import("react/jsx-runtime").JSX.Element | null;
+export {};
+//# sourceMappingURL=ProbeLayoutControls.d.ts.map

package/dist/components/overlay/ProbeLayoutControls.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProbeLayoutControls.d.ts","sourceRoot":"","sources":["../../../src/components/overlay/ProbeLayoutControls.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,KAAK,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AA8BpG,KAAK,wBAAwB,GAAG;IAC5B,UAAU,EAAE,mBAAmB,CAAC;IAChC,MAAM,EAAE,eAAe,CAAC;IACxB,QAAQ,EAAE,cAAc,CAAC;IACzB,QAAQ,EAAE,CAAC,GAAG,EAAE,iBAAiB,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC7D,CAAC;AAwSF,wBAAgB,mBAAmB,CAAC,EAAE,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,wBAAwB,kDAUvG"}

package/dist/components/overlay/ProbeLayoutControls.js

@@ -0,0 +1,82 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AlignHorizontalCenterIcon, AlignHorizontalLeftIcon, AlignHorizontalRightIcon, AlignJustifyCenterIcon, AlignJustifyFlexEndIcon, AlignJustifyFlexStartIcon, AlignJustifySpaceBetweenIcon, AlignVerticalBottomIcon, AlignVerticalCenterIcon, AlignVerticalTopIcon, SwapHorizIcon, SwapVertIcon, ViewColumnIcon, ViewStreamIcon, } from "../../components/icons/ProbeLayoutIcons.js";
+import { buildFlexDirection, FLEX_ALIGN_VALUES, FLEX_JUSTIFY_VALUES, getFlexAxis, isColumnFlexDirection, isFlexReversed, stepGridTrackCount, stepProbeGap, toggleFlexReverse, } from "../../utils/probeLayout.js";
+function ProbeLayoutSectionLabel({ children }) {
+    return _jsx("span", { className: "text-[11px] font-medium text-[var(--adaptive-black500)]", children: children });
+}
+function ProbeIconToggleButton({ active, label, onClick, children, }) {
+    return (_jsx("button", { type: "button", "data-fivepixels-interactive": "", "aria-label": label, title: label, onClick: onClick, className: `inline-flex h-[30px] w-[30px] items-center justify-center rounded-[8px] border transition-colors ${active
+            ? "border-[var(--adaptive-blue500)] bg-[var(--adaptive-blue500)]/10 text-[var(--adaptive-blue500)]"
+            : "border-[var(--adaptive-border-subtle)] bg-[var(--adaptive-black50)] text-[var(--adaptive-black700)] hover:bg-[var(--adaptive-black100)]"}`, children: children }));
+}
+function ProbeIconToggleGroup({ label, options, value, onChange, }) {
+    return (_jsxs("div", { className: "flex flex-col gap-[4px]", children: [_jsx(ProbeLayoutSectionLabel, { children: label }), _jsx("div", { className: "flex flex-wrap gap-[4px]", children: options.map((option) => (_jsx(ProbeIconToggleButton, { active: value === option.value, label: option.label, onClick: () => onChange(option.value), children: option.icon }, option.value))) })] }));
+}
+function ProbeCountStepperField({ label, value, onChange, }) {
+    return (_jsxs("div", { className: "flex flex-col gap-[4px] text-[11px]", children: [_jsx(ProbeLayoutSectionLabel, { children: label }), _jsxs("div", { className: "flex items-center gap-[6px]", children: [_jsx("button", { type: "button", "data-fivepixels-interactive": "", onClick: () => onChange(stepGridTrackCount(value, -1)), className: "inline-flex h-[30px] w-[30px] shrink-0 items-center justify-center rounded-[8px] border border-[var(--adaptive-border-subtle)] bg-[var(--adaptive-black50)] text-[14px] font-semibold text-[var(--adaptive-black900)]", "aria-label": `Decrease ${label}`, children: "\u2212" }), _jsx("div", { className: "min-w-0 flex-1 rounded-[8px] border border-[var(--adaptive-border-subtle)] bg-[var(--adaptive-black50)] px-[8px] py-[6px] text-center font-[var(--coding-font)] text-[12px] text-[var(--adaptive-black900)]", children: value }), _jsx("button", { type: "button", "data-fivepixels-interactive": "", onClick: () => onChange(stepGridTrackCount(value, 1)), className: "inline-flex h-[30px] w-[30px] shrink-0 items-center justify-center rounded-[8px] border border-[var(--adaptive-border-subtle)] bg-[var(--adaptive-black50)] text-[14px] font-semibold text-[var(--adaptive-black900)]", "aria-label": `Increase ${label}`, children: "+" })] })] }));
+}
+function ProbeGapStepperField({ label, value, onChange, }) {
+    return (_jsxs("div", { className: "flex flex-col gap-[4px] text-[11px]", children: [_jsx(ProbeLayoutSectionLabel, { children: label }), _jsxs("div", { className: "flex items-center gap-[6px]", children: [_jsx("button", { type: "button", "data-fivepixels-interactive": "", onClick: () => onChange(stepProbeGap(value, -1)), className: "inline-flex h-[30px] w-[30px] shrink-0 items-center justify-center rounded-[8px] border border-[var(--adaptive-border-subtle)] bg-[var(--adaptive-black50)] text-[14px] font-semibold text-[var(--adaptive-black900)]", "aria-label": `Decrease ${label}`, children: "\u2212" }), _jsx("div", { className: "min-w-0 flex-1 rounded-[8px] border border-[var(--adaptive-border-subtle)] bg-[var(--adaptive-black50)] px-[8px] py-[6px] text-center font-[var(--coding-font)] text-[12px] text-[var(--adaptive-black900)]", children: value }), _jsx("button", { type: "button", "data-fivepixels-interactive": "", onClick: () => onChange(stepProbeGap(value, 1)), className: "inline-flex h-[30px] w-[30px] shrink-0 items-center justify-center rounded-[8px] border border-[var(--adaptive-border-subtle)] bg-[var(--adaptive-black50)] text-[14px] font-semibold text-[var(--adaptive-black900)]", "aria-label": `Increase ${label}`, children: "+" })] })] }));
+}
+function getJustifyOptions(messages, columnDirection) {
+    const iconClass = "h-[18px] w-[18px]";
+    if (columnDirection) {
+        return FLEX_JUSTIFY_VALUES.map((value) => {
+            const icon = value === "flex-start" ? (_jsx(AlignVerticalTopIcon, { className: iconClass })) : value === "center" ? (_jsx(AlignVerticalCenterIcon, { className: iconClass })) : value === "flex-end" ? (_jsx(AlignVerticalBottomIcon, { className: iconClass })) : (_jsx(AlignJustifySpaceBetweenIcon, { className: iconClass }));
+            return {
+                value,
+                label: messages.pickTarget.probeJustifyOptions[value],
+                icon,
+            };
+        });
+    }
+    return FLEX_JUSTIFY_VALUES.map((value) => {
+        const icon = value === "flex-start" ? (_jsx(AlignJustifyFlexStartIcon, { className: iconClass })) : value === "center" ? (_jsx(AlignJustifyCenterIcon, { className: iconClass })) : value === "flex-end" ? (_jsx(AlignJustifyFlexEndIcon, { className: iconClass })) : (_jsx(AlignJustifySpaceBetweenIcon, { className: iconClass }));
+        return {
+            value,
+            label: messages.pickTarget.probeJustifyOptions[value],
+            icon,
+        };
+    });
+}
+function getAlignOptions(messages, columnDirection) {
+    const iconClass = "h-[18px] w-[18px]";
+    if (columnDirection) {
+        return FLEX_ALIGN_VALUES.map((value) => {
+            const icon = value === "flex-start" ? (_jsx(AlignHorizontalLeftIcon, { className: iconClass })) : value === "center" ? (_jsx(AlignHorizontalCenterIcon, { className: iconClass })) : (_jsx(AlignHorizontalRightIcon, { className: iconClass }));
+            return {
+                value,
+                label: messages.pickTarget.probeAlignOptions[value],
+                icon,
+            };
+        });
+    }
+    return FLEX_ALIGN_VALUES.map((value) => {
+        const icon = value === "flex-start" ? (_jsx(AlignVerticalTopIcon, { className: iconClass })) : value === "center" ? (_jsx(AlignVerticalCenterIcon, { className: iconClass })) : (_jsx(AlignVerticalBottomIcon, { className: iconClass }));
+        return {
+            value,
+            label: messages.pickTarget.probeAlignOptions[value],
+            icon,
+        };
+    });
+}
+function FlexLayoutControls({ values, messages, onChange }) {
+    const columnDirection = isColumnFlexDirection(values.flexDirection);
+    const axis = getFlexAxis(values.flexDirection);
+    const reversed = isFlexReversed(values.flexDirection);
+    const iconClass = "h-[18px] w-[18px]";
+    return (_jsxs("div", { className: "flex flex-col gap-[10px] border-t border-[var(--adaptive-border-subtle)] pt-[10px]", children: [_jsx(ProbeIconToggleGroup, { label: messages.pickTarget.probeMainAlign, value: values.justifyContent, onChange: (value) => onChange("justifyContent", value), options: getJustifyOptions(messages, columnDirection) }), _jsx(ProbeIconToggleGroup, { label: messages.pickTarget.probeCrossAlign, value: values.alignItems, onChange: (value) => onChange("alignItems", value), options: getAlignOptions(messages, columnDirection) }), _jsxs("div", { className: "flex flex-col gap-[4px]", children: [_jsx(ProbeLayoutSectionLabel, { children: messages.pickTarget.probeDirection }), _jsxs("div", { className: "flex flex-wrap gap-[4px]", children: [_jsx(ProbeIconToggleButton, { active: axis === "row", label: messages.pickTarget.probeDirectionRow, onClick: () => onChange("flexDirection", buildFlexDirection("row", reversed)), children: _jsx(ViewStreamIcon, { className: iconClass }) }), _jsx(ProbeIconToggleButton, { active: axis === "column", label: messages.pickTarget.probeDirectionColumn, onClick: () => onChange("flexDirection", buildFlexDirection("column", reversed)), children: _jsx(ViewColumnIcon, { className: iconClass }) }), _jsx(ProbeIconToggleButton, { active: reversed, label: messages.pickTarget.probeDirectionReverse, onClick: () => onChange("flexDirection", toggleFlexReverse(values.flexDirection)), children: columnDirection ? _jsx(SwapVertIcon, { className: iconClass }) : _jsx(SwapHorizIcon, { className: iconClass }) })] })] }), _jsx(ProbeGapStepperField, { label: messages.pickTarget.probeGap, value: values.gap, onChange: (value) => onChange("gap", value) })] }));
+}
+function GridLayoutControls({ values, messages, onChange }) {
+    return (_jsxs("div", { className: "flex flex-col gap-[10px] border-t border-[var(--adaptive-border-subtle)] pt-[10px]", children: [_jsx(ProbeCountStepperField, { label: messages.pickTarget.probeGridColumns, value: values.gridColumnCount, onChange: (value) => onChange("gridColumnCount", value) }), _jsx(ProbeCountStepperField, { label: messages.pickTarget.probeGridRows, value: values.gridRowCount, onChange: (value) => onChange("gridRowCount", value) }), _jsx(ProbeGapStepperField, { label: messages.pickTarget.probeGap, value: values.gap, onChange: (value) => onChange("gap", value) })] }));
+}
+export function ProbeLayoutControls({ layoutMode, values, messages, onChange }) {
+    if (layoutMode === "flex") {
+        return _jsx(FlexLayoutControls, { values: values, messages: messages, onChange: onChange });
+    }
+    if (layoutMode === "grid") {
+        return _jsx(GridLayoutControls, { values: values, messages: messages, onChange: onChange });
+    }
+    return null;
+}
+//# sourceMappingURL=ProbeLayoutControls.js.map

package/dist/components/overlay/ProbeLayoutControls.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProbeLayoutControls.js","sourceRoot":"","sources":["../../../src/components/overlay/ProbeLayoutControls.tsx"],"names":[],"mappings":"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"}

package/dist/components/overlay/ReportOverlayLayer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ReportOverlayLayer.d.ts","sourceRoot":"","sources":["../../../src/components/overlay/ReportOverlayLayer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,KAAK,uBAAuB,GAAG;IAC3B,QAAQ,CAAC,EAAE,SAAS,CAAC;CACxB,CAAC;AAEF,wBAAgB,kBAAkB,CAAC,EAAE,QAAQ,EAAE,EAAE,uBAAuB,2CA+BvE"}
+{"version":3,"file":"ReportOverlayLayer.d.ts","sourceRoot":"","sources":["../../../src/components/overlay/ReportOverlayLayer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAOvC,KAAK,uBAAuB,GAAG;IAC3B,QAAQ,CAAC,EAAE,SAAS,CAAC;CACxB,CAAC;AAEF,wBAAgB,kBAAkB,CAAC,EAAE,QAAQ,EAAE,EAAE,uBAAuB,2CA0EvE"}

package/dist/components/overlay/ReportOverlayLayer.js

@@ -1,14 +1,28 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useReport } from "../../providers/reportContext.js";
+import { PickTargetContextMenu } from "./PickTargetContextMenu.js";
+import { PickTargetProbePanel } from "./PickTargetProbePanel.js";
+import { PickTargetSavedBadges } from "./PickTargetSavedBadges.js";
 import { TargetHighlights } from "./TargetHighlights.js";
 export function ReportOverlayLayer({ children }) {
-    const { overlayRef, mode, hoveredTarget, selectableTargets, selectedTarget, showTargetPreview, handleOverlayMove, handleOverlayClick, } = useReport();
+    const { overlayRef, mode, draft, hoveredTarget, selectedTarget, pickProbeOpen, pickProbeHasEdits, pickTargetContextMenu, contextMenuElementKey, savedProbeEdits, selectableTargets, showTargetPreview, markerPreviewTargets, activeMarkerTarget, handleOverlayMove, handleOverlayContextMenu, handleOverlayClick, closePickTargetContextMenu, } = useReport();
     const isReportMode = mode === "report";
     const isViewMode = mode === "view";
     const isPreviewMode = showTargetPreview && mode === "idle";
+    const showHoverInspect = isReportMode && !draft && !pickProbeOpen && Boolean(hoveredTarget) && !activeMarkerTarget;
+    const showSelectionHighlight = isReportMode && Boolean(selectedTarget) && (Boolean(draft) || pickProbeOpen);
+    const showPickProbeCompare = pickProbeOpen && pickProbeHasEdits;
     const overlayClassName = isReportMode
         ? "pointer-events-auto fixed inset-0 z-[999999] cursor-crosshair"
         : "pointer-events-none fixed inset-0 z-[999999]";
-    return (_jsxs("div", { ref: overlayRef, onMouseMove: isReportMode ? handleOverlayMove : undefined, onClick: isReportMode ? handleOverlayClick : undefined, className: overlayClassName, "data-overlay-mode": isReportMode ? "report" : isViewMode ? "view" : isPreviewMode ? "preview" : "idle", children: [_jsx(TargetHighlights, { hoveredTarget: hoveredTarget, previewTargets: isPreviewMode ? selectableTargets : undefined, selectedTarget: selectedTarget }), children] }));
+    return (_jsxs("div", { ref: overlayRef, onMouseMove: isReportMode ? handleOverlayMove : undefined, onContextMenu: isReportMode ? handleOverlayContextMenu : undefined, onClick: isReportMode
+            ? (event) => {
+                if (pickTargetContextMenu) {
+                    closePickTargetContextMenu();
+                    return;
+                }
+                handleOverlayClick(event);
+            }
+            : undefined, className: overlayClassName, "data-overlay-mode": isReportMode ? "report" : isViewMode ? "view" : isPreviewMode ? "preview" : "idle", children: [_jsx(TargetHighlights, { hoveredTarget: hoveredTarget, selectedTarget: selectedTarget, showHoverInspect: showHoverInspect, showSelectionHighlight: showSelectionHighlight, showPickProbeCompare: showPickProbeCompare, previewTargets: isPreviewMode ? selectableTargets : undefined, markerPreviewTargets: markerPreviewTargets, activeMarkerTarget: activeMarkerTarget }), _jsx(PickTargetProbePanel, {}), _jsx(PickTargetSavedBadges, {}), pickTargetContextMenu ? (_jsx(PickTargetContextMenu, { clientX: pickTargetContextMenu.clientX, clientY: pickTargetContextMenu.clientY, showRevert: Boolean(contextMenuElementKey && savedProbeEdits[contextMenuElementKey]) })) : null, children] }));
 }
 //# sourceMappingURL=ReportOverlayLayer.js.map

package/dist/components/overlay/ReportOverlayLayer.js.map

@@ -1 +1 @@
-{"version":3,"file":"ReportOverlayLayer.js","sourceRoot":"","sources":["../../../src/components/overlay/ReportOverlayLayer.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAMzD,MAAM,UAAU,kBAAkB,CAAC,EAAE,QAAQ,EAA2B;IACpE,MAAM,EACF,UAAU,EACV,IAAI,EACJ,aAAa,EACb,iBAAiB,EACjB,cAAc,EACd,iBAAiB,EACjB,iBAAiB,EACjB,kBAAkB,GACrB,GAAG,SAAS,EAAE,CAAC;IAEhB,MAAM,YAAY,GAAG,IAAI,KAAK,QAAQ,CAAC;IACvC,MAAM,UAAU,GAAG,IAAI,KAAK,MAAM,CAAC;IACnC,MAAM,aAAa,GAAG,iBAAiB,IAAI,IAAI,KAAK,MAAM,CAAC;IAC3D,MAAM,gBAAgB,GAAG,YAAY;QACjC,CAAC,CAAC,+DAA+D;QACjE,CAAC,CAAC,8CAA8C,CAAC;IAErD,OAAO,CACH,eACI,GAAG,EAAE,UAAU,EACf,WAAW,EAAE,YAAY,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,SAAS,EACzD,OAAO,EAAE,YAAY,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,SAAS,EACtD,SAAS,EAAE,gBAAgB,uBACR,YAAY,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,aAErG,KAAC,gBAAgB,IAAC,aAAa,EAAE,aAAa,EAAE,cAAc,EAAE,aAAa,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,SAAS,EAAE,cAAc,EAAE,cAAc,GAAI,EAChJ,QAAQ,IACP,CACT,CAAC;AACN,CAAC"}
+{"version":3,"file":"ReportOverlayLayer.js","sourceRoot":"","sources":["../../../src/components/overlay/ReportOverlayLayer.tsx"],"names":[],"mappings":"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"}

package/dist/components/overlay/TargetHighlights.d.ts

@@ -1,9 +1,14 @@
 import type { TargetSnapshot } from "../../types/report-ui.js";
 type TargetHighlightsProps = {
     hoveredTarget: TargetSnapshot | null;
+    selectedTarget?: TargetSnapshot | null;
+    showHoverInspect?: boolean;
+    showSelectionHighlight?: boolean;
+    showPickProbeCompare?: boolean;
     previewTargets?: TargetSnapshot[];
-    selectedTarget: TargetSnapshot | null;
+    markerPreviewTargets?: TargetSnapshot[];
+    activeMarkerTarget: TargetSnapshot | null;
 };
-export declare function TargetHighlights({ hoveredTarget, previewTargets, selectedTarget }: TargetHighlightsProps): import("react/jsx-runtime").JSX.Element;
+export declare function TargetHighlights({ hoveredTarget, selectedTarget, showHoverInspect, showSelectionHighlight, showPickProbeCompare, previewTargets, markerPreviewTargets, activeMarkerTarget, }: TargetHighlightsProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=TargetHighlights.d.ts.map

package/dist/components/overlay/TargetHighlights.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TargetHighlights.d.ts","sourceRoot":"","sources":["../../../src/components/overlay/TargetHighlights.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAE3D,KAAK,qBAAqB,GAAG;IACzB,aAAa,EAAE,cAAc,GAAG,IAAI,CAAC;IACrC,cAAc,CAAC,EAAE,cAAc,EAAE,CAAC;IAClC,cAAc,EAAE,cAAc,GAAG,IAAI,CAAC;CACzC,CAAC;AA+BF,wBAAgB,gBAAgB,CAAC,EAAE,aAAa,EAAE,cAAmB,EAAE,cAAc,EAAE,EAAE,qBAAqB,2CAgC7G"}
+{"version":3,"file":"TargetHighlights.d.ts","sourceRoot":"","sources":["../../../src/components/overlay/TargetHighlights.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAI3D,KAAK,qBAAqB,GAAG;IACzB,aAAa,EAAE,cAAc,GAAG,IAAI,CAAC;IACrC,cAAc,CAAC,EAAE,cAAc,GAAG,IAAI,CAAC;IACvC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,cAAc,CAAC,EAAE,cAAc,EAAE,CAAC;IAClC,oBAAoB,CAAC,EAAE,cAAc,EAAE,CAAC;IACxC,kBAAkB,EAAE,cAAc,GAAG,IAAI,CAAC;CAC7C,CAAC;AAwCF,wBAAgB,gBAAgB,CAAC,EAC7B,aAAa,EACb,cAAqB,EACrB,gBAAwB,EACxB,sBAA8B,EAC9B,oBAA4B,EAC5B,cAAmB,EACnB,oBAAyB,EACzB,kBAAkB,GACrB,EAAE,qBAAqB,2CAgDvB"}