gap-inspector 0.1.0

package/dist/index.js

@@ -0,0 +1,878 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { inferAxis, inspectPoint, measureGap, resolveSelector } from "./measurement";
+import { gapInspectorStyles } from "./styles";
+export function GapInspector({ initiallyOpen = false, onMeasure }) {
+    const rootRef = useRef(null);
+    const [open, setOpen] = useState(initiallyOpen);
+    const [drag, setDrag] = useState(null);
+    const dragRef = useRef(null);
+    const [measurement, setMeasurement] = useState(null);
+    const [pointInspection, setPointInspection] = useState(null);
+    const [copyState, setCopyState] = useState("idle");
+    const [preview, setPreview] = useState(null);
+    const [passThrough, setPassThrough] = useState(false);
+    const panelRef = useRef(null);
+    const launcherRef = useRef(null);
+    const gripRef = useRef(null);
+    const suppressLauncherClickRef = useRef(false);
+    const [panelPosition, setPanelPosition] = useState(null);
+    const [hover, setHover] = useState(null);
+    useEffect(() => {
+        setHover(null);
+    }, [measurement]);
+    const activeAxis = drag ? inferAxis(drag.start, drag.end) : "horizontal";
+    // Computed in pointer handlers (not during render): measureGap reads layout,
+    // and the boundary-scan fallback is skipped so dragging stays cheap on big pages.
+    function buildPreview(nextDrag) {
+        if (dragDistance(nextDrag) < 8) {
+            return null;
+        }
+        const previewReport = measureGap({
+            axis: inferAxis(nextDrag.start, nextDrag.end),
+            start: nextDrag.start,
+            end: nextDrag.end,
+            ignoreElements: [rootRef.current],
+            boundaryScan: false
+        });
+        if (!previewReport) {
+            return null;
+        }
+        const snapshot = buildOverlaySnapshot(previewReport);
+        return snapshot ? { measurement: previewReport, snapshot } : null;
+    }
+    useEffect(() => {
+        if (!open) {
+            return;
+        }
+        function handleKeyDown(event) {
+            if (event.key === "Alt") {
+                setPassThrough(true);
+            }
+        }
+        function handleKeyUp(event) {
+            if (event.key === "Alt") {
+                setPassThrough(false);
+            }
+        }
+        function handleBlur() {
+            setPassThrough(false);
+        }
+        window.addEventListener("keydown", handleKeyDown);
+        window.addEventListener("keyup", handleKeyUp);
+        window.addEventListener("blur", handleBlur);
+        return () => {
+            window.removeEventListener("keydown", handleKeyDown);
+            window.removeEventListener("keyup", handleKeyUp);
+            window.removeEventListener("blur", handleBlur);
+            setPassThrough(false);
+        };
+    }, [open]);
+    function beginMeasure(event) {
+        if (event.button !== 0) {
+            return;
+        }
+        event.currentTarget.setPointerCapture(event.pointerId);
+        const point = pointFromEvent(event);
+        const nextDrag = { start: point, end: point };
+        dragRef.current = nextDrag;
+        setDrag(nextDrag);
+        setPreview(null);
+        setCopyState("idle");
+    }
+    function updateMeasure(event) {
+        if (!dragRef.current) {
+            return;
+        }
+        const nextDrag = { ...dragRef.current, end: pointFromEvent(event) };
+        dragRef.current = nextDrag;
+        setDrag(nextDrag);
+        setPreview(buildPreview(nextDrag));
+    }
+    function finishMeasure(event) {
+        if (!dragRef.current) {
+            return;
+        }
+        const end = pointFromEvent(event);
+        const nextDrag = { ...dragRef.current, end };
+        dragRef.current = null;
+        const distance = dragDistance(nextDrag);
+        if (distance < 6) {
+            if (measurement || pointInspection) {
+                setMeasurement(null);
+                setPointInspection(null);
+            }
+            else {
+                const inspection = inspectPoint({
+                    point: end,
+                    ignoreElements: [rootRef.current]
+                });
+                setPointInspection(inspection ? toDocumentInspection(inspection) : inspection);
+            }
+            setDrag(null);
+            setPreview(null);
+            return;
+        }
+        const axis = inferAxis(nextDrag.start, nextDrag.end);
+        const report = measureGap({
+            axis,
+            start: nextDrag.start,
+            end,
+            ignoreElements: [rootRef.current]
+        });
+        if (report) {
+            setMeasurement(report);
+            setPointInspection(null);
+            onMeasure?.(report);
+        }
+        setDrag(null);
+        setPreview(null);
+    }
+    function cancelMeasure() {
+        dragRef.current = null;
+        setDrag(null);
+        setPreview(null);
+    }
+    // The pill and the panel share one position (their top-left corner), so the
+    // inspector stays where the user put it when collapsing or expanding.
+    function beginInspectorDrag(event, target) {
+        if (event.button !== 0 || !target) {
+            return;
+        }
+        if (event.target instanceof Element && event.target.closest(".gi-close")) {
+            return;
+        }
+        const rect = target.getBoundingClientRect();
+        gripRef.current = {
+            dx: event.clientX - rect.left,
+            dy: event.clientY - rect.top,
+            startX: event.clientX,
+            startY: event.clientY,
+            target,
+            moved: false
+        };
+        event.currentTarget.setPointerCapture(event.pointerId);
+    }
+    function updateInspectorDrag(event) {
+        const grip = gripRef.current;
+        if (!grip) {
+            return;
+        }
+        if (!grip.moved && Math.hypot(event.clientX - grip.startX, event.clientY - grip.startY) < 4) {
+            return;
+        }
+        grip.moved = true;
+        setPanelPosition(clampToViewport(event.clientX - grip.dx, event.clientY - grip.dy, grip.target));
+    }
+    function endInspectorDrag() {
+        suppressLauncherClickRef.current = Boolean(gripRef.current?.moved);
+        gripRef.current = null;
+    }
+    function handleLauncherClick() {
+        if (suppressLauncherClickRef.current) {
+            suppressLauncherClickRef.current = false;
+            return;
+        }
+        setOpen(true);
+    }
+    // Re-clamp whenever the visible element changes (pill <-> panel swap, window
+    // resize): the panel is much larger than the pill, so a position that suits
+    // one can put the other off screen.
+    useEffect(() => {
+        if (!panelPosition) {
+            return;
+        }
+        const target = open ? panelRef.current : launcherRef.current;
+        if (!target) {
+            return;
+        }
+        const clampNow = () => {
+            setPanelPosition((current) => current ? clampToViewport(current.x, current.y, target) : current);
+        };
+        clampNow();
+        window.addEventListener("resize", clampNow);
+        return () => {
+            window.removeEventListener("resize", clampNow);
+        };
+    }, [panelPosition !== null, open]);
+    async function copyMeasurement() {
+        const markdown = measurement?.markdown ?? pointInspection?.markdown;
+        if (!markdown) {
+            return;
+        }
+        try {
+            await navigator.clipboard.writeText(markdown);
+            setCopyState("copied");
+        }
+        catch {
+            setCopyState("failed");
+        }
+    }
+    if (!open) {
+        return (_jsxs("div", { className: "gi-root", ref: rootRef, children: [_jsx("style", { children: gapInspectorStyles }), _jsxs("button", { className: "gi-button", type: "button", ref: launcherRef, style: panelPosition
+                        ? { left: panelPosition.x, top: panelPosition.y, right: "auto", bottom: "auto" }
+                        : undefined, onPointerDown: (event) => beginInspectorDrag(event, launcherRef.current), onPointerMove: updateInspectorDrag, onPointerUp: endInspectorDrag, onPointerCancel: endInspectorDrag, onClick: handleLauncherClick, children: [_jsx("span", { className: "gi-button-mark", "aria-hidden": "true" }), "Gap Inspector"] })] }));
+    }
+    return (_jsxs("div", { className: "gi-root", ref: rootRef, children: [_jsx("style", { children: gapInspectorStyles }), _jsx("div", { className: "gi-canvas", "data-passthrough": passThrough ? "true" : undefined, onPointerDown: beginMeasure, onPointerMove: updateMeasure, onPointerUp: finishMeasure, onPointerCancel: cancelMeasure }), typeof document === "undefined"
+                ? null
+                : createPortal(_jsx(MeasurementOverlay, { drag: drag, axis: activeAxis, measurement: measurement, pointInspection: pointInspection, preview: preview, hover: hover }), document.body), _jsxs("section", { className: "gi-panel", "aria-label": "Gap Inspector", ref: panelRef, style: panelPosition
+                    ? { left: panelPosition.x, top: panelPosition.y, right: "auto", bottom: "auto" }
+                    : undefined, children: [_jsxs("div", { className: "gi-body", children: [_jsxs("div", { className: "gi-header", onPointerDown: (event) => beginInspectorDrag(event, panelRef.current), onPointerMove: updateInspectorDrag, onPointerUp: endInspectorDrag, onPointerCancel: endInspectorDrag, children: [_jsx("div", { className: "gi-title", children: "Gap Inspector" }), _jsx("button", { className: "gi-close", type: "button", "aria-label": "Close Gap Inspector", onClick: () => setOpen(false), children: _jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", "aria-hidden": "true", children: _jsx("path", { d: "M3 3l6 6M9 3l-6 6", stroke: "currentColor", strokeWidth: "1.4", strokeLinecap: "round" }) }) })] }), _jsx("div", { className: "gi-content", children: measurement ? (_jsx(Report, { measurement: measurement, hover: hover, onHover: setHover })) : pointInspection ? (_jsx(PointReport, { inspection: pointInspection })) : (_jsxs("div", { className: "gi-empty", children: [_jsx("p", { children: "Draw a line between two rendered edges to measure the gap and see which CSS declarations produce it. Click once to inspect a point." }), _jsxs("div", { className: "gi-hint", children: [_jsx("span", { className: "gi-kbd", children: "\u2325" }), _jsx("span", { children: "Hold Alt to interact with the page underneath." })] })] })) })] }), measurement || pointInspection ? (_jsxs("div", { className: "gi-footer", children: [_jsx("button", { className: "gi-ghost", type: "button", onClick: () => {
+                                    setMeasurement(null);
+                                    setPointInspection(null);
+                                }, children: "Clear" }), _jsx("button", { className: "gi-primary", "data-state": copyState, type: "button", onClick: copyMeasurement, children: copyState === "copied" ? "Copied" : copyState === "failed" ? "Failed" : "Copy report" })] })) : null] })] }));
+}
+// A miniature of the measured gap: contributions are in geometric order along
+// the axis, so each segment sits where that spacing actually renders.
+function SpacingBar({ measurement, onHover }) {
+    if (measurement.totalPx < 0.5) {
+        return null;
+    }
+    return (_jsxs("div", { className: "gi-bar", role: "img", "aria-label": measurement.equation, children: [measurement.contributions.map((contribution, index) => (_jsx("span", { className: `gi-bar-segment gi-kind-${contribution.kind}`, style: { flexGrow: contribution.valuePx }, onPointerEnter: (event) => onHover(contributionHover(contribution, index, event.currentTarget)), onPointerLeave: () => onHover(null) }, `${contribution.selector}-${contribution.property}-${index}`))), measurement.unattributedPx > 0.49 ? (_jsx("span", { className: "gi-bar-segment gi-bar-unattributed", style: { flexGrow: measurement.unattributedPx }, onPointerEnter: (event) => onHover(unattributedHover(measurement, event.currentTarget)), onPointerLeave: () => onHover(null) })) : null] }));
+}
+function contributionHover(contribution, index, target) {
+    const element = liveElement(contribution.element);
+    let meta;
+    if (element) {
+        const rect = element.getBoundingClientRect();
+        meta = `${element.tagName.toLowerCase()} \u00b7 ${getComputedStyle(element).display} \u00b7 ${roundPx(rect.width)} \u00d7 ${roundPx(rect.height)}px`;
+    }
+    const anchor = target.getBoundingClientRect();
+    return {
+        kind: contribution.kind,
+        index,
+        property: contribution.property,
+        valuePx: contribution.valuePx,
+        cssValue: contribution.cssValue,
+        selector: contribution.selector,
+        meta,
+        note: contribution.note,
+        element: contribution.element,
+        anchor: { left: anchor.left, top: anchor.top, bottom: anchor.bottom }
+    };
+}
+function unattributedHover(measurement, target) {
+    const anchor = target.getBoundingClientRect();
+    return {
+        kind: "unknown",
+        index: measurement.contributions.length,
+        property: "unattributed space",
+        valuePx: measurement.unattributedPx,
+        note: "Rendered space not tied to a direct margin, padding, border, or gap declaration.",
+        anchor: { left: anchor.left, top: anchor.top, bottom: anchor.bottom }
+    };
+}
+function HoverCard({ info }) {
+    const width = 280;
+    const left = Math.min(Math.max(info.anchor.left, 8), Math.max(8, window.innerWidth - width - 8));
+    const placeBelow = info.anchor.top < 240;
+    const style = placeBelow
+        ? { left, top: info.anchor.bottom + 8, width }
+        : { left, bottom: window.innerHeight - info.anchor.top + 8, width };
+    return (_jsxs("div", { className: `gi-hovercard gi-kind-${info.kind}`, style: style, children: [_jsxs("div", { className: "gi-hovercard-row", children: [_jsx("span", { className: "gi-kind-label", children: info.kind }), _jsxs("span", { className: "gi-hovercard-prop", children: [info.property, info.cssValue ? _jsxs("span", { className: "gi-contrib-css", children: [" \u00B7 ", info.cssValue] }) : null] }), _jsx("span", { className: "gi-hovercard-value", children: formatPx(info.valuePx) })] }), info.selector ? _jsx("div", { className: "gi-hovercard-selector", children: info.selector }) : null, info.meta ? _jsx("div", { className: "gi-hovercard-meta", children: info.meta }) : null, info.note ? _jsx("div", { className: "gi-hovercard-note", children: info.note }) : null] }));
+}
+function Report({ measurement, hover, onHover }) {
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "gi-report-title", children: [_jsx("span", { className: "gi-metric", children: formatPx(measurement.totalPx) }), " ", _jsx("span", { className: "gi-metric-axis", children: measurement.axis })] }), _jsx(SpacingBar, { measurement: measurement, onHover: onHover }), measurement.contributions.length ? (_jsxs("div", { className: "gi-contribs", children: [_jsx("div", { className: "gi-caps", children: "Contributors" }), measurement.contributions.map((contribution, index) => (_jsxs("div", { className: `gi-contrib gi-kind-${contribution.kind}`, "data-kind": contribution.kind, onPointerEnter: (event) => onHover(contributionHover(contribution, index, event.currentTarget)), onPointerLeave: () => onHover(null), children: [_jsxs("div", { className: "gi-contrib-row", children: [_jsx("span", { className: "gi-kind-label", children: contribution.kind }), _jsxs("span", { className: "gi-contrib-prop", children: [contribution.property, contribution.cssValue ? (_jsxs("span", { className: "gi-contrib-css", children: [" \u00B7 ", contribution.cssValue] })) : null] }), _jsx("span", { className: "gi-contrib-value", children: formatPx(contribution.valuePx) })] }), contribution.note ? _jsx("div", { className: "gi-contrib-note", children: contribution.note }) : null] }, `${contribution.selector}-${contribution.property}-${index}`)))] })) : null, measurement.warnings.map((warning) => (_jsx("div", { className: "gi-warning", children: warning }, warning))), hover ? _jsx(HoverCard, { info: hover }) : null] }));
+}
+function PointReport({ inspection }) {
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: `gi-report-title gi-kind-${inspection.region}`, children: inspection.totalPx !== undefined ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "gi-metric", children: formatPx(inspection.totalPx) }), " ", _jsx("span", { className: "gi-metric-axis", children: inspection.region })] })) : (_jsx("span", { className: "gi-metric", children: inspection.region })) }), _jsxs("div", { className: "gi-equation", children: [inspection.property ?? inspection.region, inspection.cssValue ? ` (${inspection.cssValue})` : ""] }), inspection.note ? _jsx("div", { className: "gi-contrib-note", children: inspection.note }) : null] }));
+}
+function MeasurementOverlay({ drag, axis, measurement, pointInspection, preview, hover }) {
+    const snapshot = useLiveOverlaySnapshot(measurement);
+    const pointSnapshot = useLivePointSnapshot(pointInspection);
+    return (_jsxs("svg", { className: "gi-svg", width: "100%", height: "100%", "aria-hidden": "true", children: [measurement && snapshot && !drag ? (_jsx(MeasurementRects, { measurement: measurement, snapshot: snapshot, variant: "committed", hover: hover })) : null, pointInspection && pointSnapshot && !drag ? (_jsx(PointInspectionRects, { inspection: pointInspection, snapshot: pointSnapshot })) : null, drag && preview ? (_jsx(MeasurementRects, { measurement: preview.measurement, snapshot: preview.snapshot, variant: "preview", line: lineFromDrag(preview.measurement.axis, drag) })) : null, drag ? _jsx(DragLine, { drag: drag, axis: axis }) : null] }));
+}
+function DragLine({ drag, axis }) {
+    const start = toDocumentPoint(drag.start);
+    const end = toDocumentPoint(drag.end);
+    const x1 = axis === "horizontal" ? start.x : (start.x + end.x) / 2;
+    const x2 = axis === "horizontal" ? end.x : (start.x + end.x) / 2;
+    const y1 = axis === "horizontal" ? (start.y + end.y) / 2 : start.y;
+    const y2 = axis === "horizontal" ? (start.y + end.y) / 2 : end.y;
+    return _jsx("line", { className: "gi-line", x1: x1, y1: y1, x2: x2, y2: y2 });
+}
+function MeasurementRects({ measurement, snapshot, variant, line, hover }) {
+    const from = snapshot.from;
+    const to = snapshot.to;
+    const geometry = bandGeometry(measurement, from, to, line);
+    const band = geometry
+        ? rectFromBand(measurement.axis, geometry.start, geometry.end, geometry.perp, GAP_BAND_THICKNESS)
+        : null;
+    const { strips, remainder } = geometry
+        ? contributionStrips(measurement, geometry)
+        : { strips: [], remainder: null };
+    const hoverStrip = hover
+        ? hover.index === measurement.contributions.length
+            ? remainder
+            : strips[hover.index] ?? null
+        : null;
+    const hoverRect = hover && hoverStrip
+        ? hoverHighlightRect(measurement.axis, hoverStrip, hover)
+        : null;
+    const fromEdge = measurement.internalSide
+        ? internalEdgeMarkerRect(measurement.axis, from, measurement.internalSide, "container")
+        : edgeMarkerRect(measurement.axis, from, "from");
+    const toEdge = measurement.internalSide
+        ? internalEdgeMarkerRect(measurement.axis, to, measurement.internalSide, "child")
+        : edgeMarkerRect(measurement.axis, to, "to");
+    const prefix = variant === "preview" ? "gi-preview" : "gi-committed";
+    return (_jsxs(_Fragment, { children: [snapshot.series.map((series, index) => (_jsx("rect", { className: `gi-series-box ${prefix}-series gi-kind-${series.kind}`, ...svgRect(series.rect) }, `${series.kind}-${index}`))), _jsx("rect", { className: `gi-element-box ${prefix}-box gi-from-box`, ...svgRect(from) }), _jsx("rect", { className: `gi-element-box ${prefix}-box gi-to-box`, ...svgRect(to) }), band ? _jsx("rect", { className: `gi-gap-band ${prefix}-gap`, ...svgRect(band) }) : null, strips.map((strip, index) => strip ? (_jsx("rect", { className: `gi-contributor-box ${prefix}-contributor gi-kind-${measurement.contributions[index].kind}`, ...svgRect(strip) }, `${measurement.contributions[index].kind}-${index}`)) : null), hover && hoverRect ? (_jsx("rect", { className: `gi-hover-box gi-kind-${hover.kind}`, ...svgRect(hoverRect) })) : null, _jsx("rect", { className: `gi-edge-marker ${prefix}-edge gi-from-edge`, ...svgRect(fromEdge) }), _jsx("rect", { className: `gi-edge-marker ${prefix}-edge gi-to-edge`, ...svgRect(toEdge) })] }));
+}
+const GAP_BAND_THICKNESS = 12;
+// The span of the measured gap along the axis plus the perpendicular center of
+// the drawn line (or the from/to overlap when re-rendered without a line).
+function bandGeometry(measurement, from, to, line) {
+    const horizontal = measurement.axis === "horizontal";
+    const props = horizontal
+        ? { start: "left", end: "right", perpStart: "top", perpEnd: "bottom" }
+        : { start: "top", end: "bottom", perpStart: "left", perpEnd: "right" };
+    let start;
+    let end;
+    let fallbackPerp;
+    if (measurement.internalSide) {
+        start = measurement.internalSide === "before" ? from[props.start] : to[props.end];
+        end = measurement.internalSide === "before" ? to[props.start] : from[props.end];
+        fallbackPerp = (to[props.perpStart] + to[props.perpEnd]) / 2;
+    }
+    else {
+        start = from[props.end];
+        end = to[props.start];
+        fallbackPerp =
+            (Math.max(Math.min(from[props.perpStart], to[props.perpStart]), 0)
+                + Math.max(from[props.perpEnd], to[props.perpEnd])) / 2;
+    }
+    const overlapStart = Math.max(from[props.perpStart], to[props.perpStart]);
+    const overlapEnd = Math.min(from[props.perpEnd], to[props.perpEnd]);
+    const perp = line?.perp ?? (overlapEnd > overlapStart ? (overlapStart + overlapEnd) / 2 : fallbackPerp);
+    return end > start ? { start, end, perp } : null;
+}
+function rectFromBand(axis, start, end, perp, thickness) {
+    if (axis === "horizontal") {
+        return {
+            left: start,
+            right: end,
+            top: perp - thickness / 2,
+            bottom: perp + thickness / 2,
+            width: end - start,
+            height: thickness
+        };
+    }
+    return {
+        left: perp - thickness / 2,
+        right: perp + thickness / 2,
+        top: start,
+        bottom: end,
+        width: thickness,
+        height: end - start
+    };
+}
+// Contributions are in geometric order, so stacking their values from the gap's
+// start edge places each strip where that spacing actually renders. The array
+// is index-aligned with measurement.contributions (null for sub-pixel strips).
+function contributionStrips(measurement, geometry) {
+    const strips = [];
+    let cursor = geometry.start;
+    for (const contribution of measurement.contributions) {
+        const next = Math.min(cursor + contribution.valuePx, geometry.end);
+        strips.push(next - cursor > 0.1
+            ? rectFromBand(measurement.axis, cursor, next, geometry.perp, GAP_BAND_THICKNESS)
+            : null);
+        cursor = next;
+    }
+    const remainder = geometry.end - cursor > 0.1
+        ? rectFromBand(measurement.axis, cursor, geometry.end, geometry.perp, GAP_BAND_THICKNESS)
+        : null;
+    return { strips, remainder };
+}
+// The hovered contribution's slice along the axis, extended across its
+// element's full perpendicular extent — the actual spacing region (a padding
+// slice spans the container's full height, a margin slice its element's, etc.).
+// Falls back to a thickened band slice when there is no live element (e.g. the
+// unattributed remainder).
+function hoverHighlightRect(axis, strip, hover) {
+    const blockRect = hover.element ? liveRect(hover.element) : null;
+    if (!blockRect) {
+        return expandAcross(strip, axis, 4);
+    }
+    return axis === "horizontal"
+        ? {
+            left: strip.left,
+            right: strip.right,
+            top: blockRect.top,
+            bottom: blockRect.bottom,
+            width: strip.width,
+            height: blockRect.bottom - blockRect.top
+        }
+        : {
+            left: blockRect.left,
+            right: blockRect.right,
+            top: strip.top,
+            bottom: strip.bottom,
+            width: blockRect.right - blockRect.left,
+            height: strip.height
+        };
+}
+function expandAcross(rect, axis, amount) {
+    return axis === "horizontal"
+        ? { ...rect, top: rect.top - amount, bottom: rect.bottom + amount, height: rect.height + amount * 2 }
+        : { ...rect, left: rect.left - amount, right: rect.right + amount, width: rect.width + amount * 2 };
+}
+function PointInspectionRects({ inspection, snapshot }) {
+    const kindClass = pointKindClass(inspection.region);
+    return (_jsxs(_Fragment, { children: [snapshot.from ? _jsx("rect", { className: "gi-element-box gi-committed-box", ...svgRect(snapshot.from) }) : null, snapshot.to ? _jsx("rect", { className: "gi-element-box gi-committed-box", ...svgRect(snapshot.to) }) : null, snapshot.element ? _jsx("rect", { className: "gi-element-box gi-committed-box", ...svgRect(snapshot.element) }) : null, snapshot.rect ? _jsx("rect", { className: `gi-point-region ${kindClass}`, ...svgRect(snapshot.rect) }) : null, _jsx("circle", { className: `gi-point-dot ${kindClass}`, cx: inspection.point.x, cy: inspection.point.y, r: 4 })] }));
+}
+function useLivePointSnapshot(inspection) {
+    return useLiveSnapshot(inspection, buildPointSnapshot);
+}
+function buildPointSnapshot(inspection) {
+    const rect = inspection.rect;
+    const element = inspection.element ? liveRect(inspection.element) ?? undefined : undefined;
+    const from = inspection.from ? liveRect(inspection.from) ?? undefined : undefined;
+    const to = inspection.to ? liveRect(inspection.to) ?? undefined : undefined;
+    const key = [
+        rect ? rectKey(rect) : "",
+        element ? rectKey(element) : "",
+        from ? rectKey(from) : "",
+        to ? rectKey(to) : ""
+    ].join("::");
+    if (!rect && !element && !from && !to) {
+        return null;
+    }
+    return { key, rect, element, from, to };
+}
+function useLiveOverlaySnapshot(measurement) {
+    return useLiveSnapshot(measurement, buildOverlaySnapshot);
+}
+// Snapshots are in document coordinates, so page scroll moves the overlay natively
+// (no recompute needed for correctness there). Scroll events still trigger a recompute
+// because nested scrollers change clipping and sticky/fixed elements move in document
+// space; the key diff drops the update when nothing actually moved.
+function useLiveSnapshot(input, build) {
+    const [snapshot, setSnapshot] = useState(null);
+    useEffect(() => {
+        if (!input) {
+            setSnapshot(null);
+            return;
+        }
+        let frame = 0;
+        // null = nothing emitted yet; "" = an empty result has been emitted.
+        let lastKey = null;
+        const recompute = () => {
+            frame = 0;
+            const nextSnapshot = build(input);
+            if (!nextSnapshot) {
+                if (lastKey !== "") {
+                    lastKey = "";
+                    setSnapshot(null);
+                }
+                return;
+            }
+            if (nextSnapshot.key !== lastKey) {
+                lastKey = nextSnapshot.key;
+                setSnapshot(nextSnapshot);
+            }
+        };
+        const schedule = () => {
+            if (!frame) {
+                frame = requestAnimationFrame(recompute);
+            }
+        };
+        recompute();
+        const resizeObserver = new ResizeObserver(schedule);
+        resizeObserver.observe(document.documentElement);
+        resizeObserver.observe(document.body);
+        const mutationObserver = new MutationObserver((records) => {
+            if (records.every(isInspectorMutation)) {
+                return;
+            }
+            schedule();
+        });
+        mutationObserver.observe(document.body, { attributes: true, childList: true, subtree: true });
+        window.addEventListener("scroll", schedule, { capture: true, passive: true });
+        window.addEventListener("resize", schedule);
+        window.addEventListener("transitionend", schedule, true);
+        window.addEventListener("animationend", schedule, true);
+        return () => {
+            if (frame) {
+                cancelAnimationFrame(frame);
+            }
+            resizeObserver.disconnect();
+            mutationObserver.disconnect();
+            window.removeEventListener("scroll", schedule, true);
+            window.removeEventListener("resize", schedule);
+            window.removeEventListener("transitionend", schedule, true);
+            window.removeEventListener("animationend", schedule, true);
+        };
+    }, [input, build]);
+    return snapshot;
+}
+function buildOverlaySnapshot(measurement) {
+    const from = liveRect(measurement.from);
+    const to = liveRect(measurement.to);
+    if (!from || !to) {
+        return null;
+    }
+    const occupiedKeys = new Set([rectKey(from), rectKey(to)]);
+    const series = repeatedSeriesRects(measurement, occupiedKeys);
+    const key = [
+        rectKey(from),
+        rectKey(to),
+        series.map((item) => `${item.kind}:${rectKey(item.rect)}`).join("|")
+    ].join("::");
+    return { key, from, to, series };
+}
+const SERIES_SCAN_LIMIT = 80;
+const SERIES_RENDER_LIMIT = 28;
+function repeatedSeriesRects(measurement, occupiedKeys) {
+    const rects = [];
+    const seen = new Set();
+    for (const contribution of measurement.contributions) {
+        const element = liveElement(contribution.element);
+        if (!element) {
+            continue;
+        }
+        const candidates = contribution.kind === "gap"
+            ? gapSeriesRects(measurement.axis, element, contribution.kind, occupiedKeys)
+            : siblingSeriesRects(element, contribution.kind, contribution.property, contribution.cssValue, occupiedKeys);
+        for (const candidate of candidates) {
+            const key = `${candidate.kind}:${rectKey(candidate.rect)}`;
+            if (seen.has(key)) {
+                continue;
+            }
+            seen.add(key);
+            rects.push(candidate);
+            if (rects.length >= SERIES_RENDER_LIMIT) {
+                return rects;
+            }
+        }
+    }
+    return rects;
+}
+function siblingSeriesRects(element, kind, property, cssValue, occupiedKeys) {
+    if (kind === "unknown") {
+        return [];
+    }
+    const parent = element.parentElement;
+    const cssProperty = normalizeCssProperty(property);
+    if (!parent || !cssProperty) {
+        return [];
+    }
+    const style = getComputedStyle(element);
+    const expectedValue = normalizeCssValue(cssValue ?? style.getPropertyValue(cssProperty));
+    if (!expectedValue) {
+        return [];
+    }
+    const signature = elementSeriesSignature(element);
+    const candidates = siblingWindow(parent, element);
+    const rects = [];
+    for (const candidate of candidates) {
+        if (candidate === element || elementSeriesSignature(candidate) !== signature) {
+            continue;
+        }
+        const candidateValue = normalizeCssValue(getComputedStyle(candidate).getPropertyValue(cssProperty));
+        if (candidateValue !== expectedValue) {
+            continue;
+        }
+        const rect = visibleRectForElement(candidate);
+        if (!rect || occupiedKeys.has(rectKey(rect))) {
+            continue;
+        }
+        rects.push({ kind, rect });
+        if (rects.length >= SERIES_RENDER_LIMIT) {
+            break;
+        }
+    }
+    return rects;
+}
+function gapSeriesRects(axis, container, kind, occupiedKeys) {
+    const children = Array.from(container.children)
+        .slice(0, SERIES_SCAN_LIMIT)
+        .map((element) => ({ element, rect: visibleRectForElement(element) }))
+        .filter((item) => Boolean(item.rect));
+    if (children.length < 2) {
+        return [];
+    }
+    const rects = [];
+    const sorted = children.sort((a, b) => axisStart(axis, a.rect) - axisStart(axis, b.rect));
+    for (const child of sorted) {
+        if (!occupiedKeys.has(rectKey(child.rect))) {
+            rects.push({ kind, rect: child.rect });
+        }
+        if (rects.length >= SERIES_RENDER_LIMIT) {
+            return rects;
+        }
+    }
+    for (let index = 0; index < sorted.length - 1; index += 1) {
+        const before = sorted[index].rect;
+        const after = sorted[index + 1].rect;
+        const band = repeatedGapBandRect(axis, before, after);
+        if (!band || occupiedKeys.has(rectKey(band))) {
+            continue;
+        }
+        rects.push({ kind, rect: band });
+        if (rects.length >= SERIES_RENDER_LIMIT) {
+            break;
+        }
+    }
+    return rects;
+}
+function siblingWindow(parent, element) {
+    const siblings = Array.from(parent.children);
+    const index = siblings.indexOf(element);
+    if (index === -1 || siblings.length <= SERIES_SCAN_LIMIT) {
+        return siblings.slice(0, SERIES_SCAN_LIMIT);
+    }
+    const halfWindow = Math.floor(SERIES_SCAN_LIMIT / 2);
+    const start = Math.max(0, Math.min(index - halfWindow, siblings.length - SERIES_SCAN_LIMIT));
+    return siblings.slice(start, start + SERIES_SCAN_LIMIT);
+}
+function normalizeCssProperty(property) {
+    const normalized = property.trim().replace(/\s+/g, "-");
+    if (!normalized || normalized.includes("layout") || normalized.includes("space-between")) {
+        return null;
+    }
+    return normalized;
+}
+function normalizeCssValue(value) {
+    const normalized = value?.trim();
+    return normalized && normalized !== "normal" && normalized !== "auto" ? normalized : null;
+}
+function elementSeriesSignature(element) {
+    return [
+        element.tagName.toLowerCase(),
+        Array.from(element.classList).sort().join(".")
+    ].join(":");
+}
+function axisStart(axis, rect) {
+    return axis === "horizontal" ? rect.left : rect.top;
+}
+function repeatedGapBandRect(axis, before, after) {
+    if (axis === "horizontal") {
+        const left = before.right;
+        const right = after.left;
+        const top = Math.max(before.top, after.top);
+        const bottom = Math.min(before.bottom, after.bottom);
+        return right > left && bottom > top
+            ? { left, right, top, bottom, width: roundPx(right - left), height: roundPx(bottom - top) }
+            : null;
+    }
+    const top = before.bottom;
+    const bottom = after.top;
+    const left = Math.max(before.left, after.left);
+    const right = Math.min(before.right, after.right);
+    return bottom > top && right > left
+        ? { left, right, top, bottom, width: roundPx(right - left), height: roundPx(bottom - top) }
+        : null;
+}
+function liveElement(info) {
+    if (info.element?.isConnected) {
+        return info.element;
+    }
+    // The stored node was removed (e.g. a framework re-render replaced it).
+    // Re-resolve through the unique selector and drop the detached reference so
+    // the old subtree can be garbage collected.
+    const resolved = resolveSelector(info.selector);
+    info.element = resolved ?? undefined;
+    return resolved;
+}
+function liveRect(info) {
+    const element = liveElement(info);
+    if (!element) {
+        return null;
+    }
+    return visibleRectForElement(element);
+}
+function visibleRectForElement(element) {
+    let rect = rectFromDomRect(element.getBoundingClientRect());
+    if (rect.width <= 0 || rect.height <= 0) {
+        return null;
+    }
+    for (const ancestor of scrollAncestors(element)) {
+        rect = intersectRects(rect, rectFromDomRect(ancestor.getBoundingClientRect()));
+        if (rect.width <= 0 || rect.height <= 0) {
+            return null;
+        }
+    }
+    return offsetRect(rect, window.scrollX, window.scrollY);
+}
+function offsetRect(rect, dx, dy) {
+    return {
+        top: roundPx(rect.top + dy),
+        right: roundPx(rect.right + dx),
+        bottom: roundPx(rect.bottom + dy),
+        left: roundPx(rect.left + dx),
+        width: rect.width,
+        height: rect.height
+    };
+}
+function rectFromDomRect(rect) {
+    return {
+        top: roundPx(rect.top),
+        right: roundPx(rect.right),
+        bottom: roundPx(rect.bottom),
+        left: roundPx(rect.left),
+        width: roundPx(rect.width),
+        height: roundPx(rect.height)
+    };
+}
+function scrollAncestors(element) {
+    const ancestors = [];
+    let current = element.parentElement;
+    while (current && current !== document.body && current !== document.documentElement) {
+        const style = getComputedStyle(current);
+        const overflow = `${style.overflow}${style.overflowX}${style.overflowY}`;
+        if (/(auto|scroll|clip|hidden)/.test(overflow)) {
+            ancestors.push(current);
+        }
+        current = current.parentElement;
+    }
+    return ancestors;
+}
+function intersectRects(a, b) {
+    const left = Math.max(a.left, b.left);
+    const right = Math.min(a.right, b.right);
+    const top = Math.max(a.top, b.top);
+    const bottom = Math.min(a.bottom, b.bottom);
+    return {
+        top: roundPx(top),
+        right: roundPx(right),
+        bottom: roundPx(bottom),
+        left: roundPx(left),
+        width: roundPx(Math.max(0, right - left)),
+        height: roundPx(Math.max(0, bottom - top))
+    };
+}
+function pointKindClass(region) {
+    switch (region) {
+        case "margin":
+            return "gi-kind-margin";
+        case "padding":
+            return "gi-kind-padding";
+        case "border":
+            return "gi-kind-border";
+        case "gap":
+            return "gi-kind-gap";
+        case "content":
+            return "gi-kind-content";
+        default:
+            return "gi-kind-unknown";
+    }
+}
+function rectKey(rect) {
+    return [rect.left, rect.top, rect.width, rect.height].join(":");
+}
+function edgeMarkerRect(axis, rect, side) {
+    const thickness = 3;
+    if (axis === "horizontal") {
+        const left = side === "from" ? rect.right - thickness : rect.left;
+        return {
+            left,
+            right: left + thickness,
+            top: rect.top,
+            bottom: rect.bottom,
+            width: thickness,
+            height: rect.height
+        };
+    }
+    const top = side === "from" ? rect.bottom - thickness : rect.top;
+    return {
+        left: rect.left,
+        right: rect.right,
+        top,
+        bottom: top + thickness,
+        width: rect.width,
+        height: thickness
+    };
+}
+function internalEdgeMarkerRect(axis, rect, side, role) {
+    const thickness = 3;
+    if (axis === "horizontal") {
+        const edge = side === "before"
+            ? role === "container" ? rect.left : rect.left
+            : role === "container" ? rect.right - thickness : rect.right - thickness;
+        return {
+            left: edge,
+            right: edge + thickness,
+            top: rect.top,
+            bottom: rect.bottom,
+            width: thickness,
+            height: rect.height
+        };
+    }
+    const edge = side === "before"
+        ? role === "container" ? rect.top : rect.top
+        : role === "container" ? rect.bottom - thickness : rect.bottom - thickness;
+    return {
+        left: rect.left,
+        right: rect.right,
+        top: edge,
+        bottom: edge + thickness,
+        width: rect.width,
+        height: thickness
+    };
+}
+function svgRect(rect) {
+    return {
+        x: rect.left,
+        y: rect.top,
+        width: rect.width,
+        height: rect.height
+    };
+}
+function isInspectorMutation(record) {
+    const target = record.target instanceof Element ? record.target : record.target.parentElement;
+    return Boolean(target?.closest(".gi-root, .gi-svg"));
+}
+function clampToViewport(x, y, target) {
+    const rect = target.getBoundingClientRect();
+    const margin = 8;
+    return {
+        x: Math.min(Math.max(x, margin), Math.max(margin, window.innerWidth - rect.width - margin)),
+        y: Math.min(Math.max(y, margin), Math.max(margin, window.innerHeight - rect.height - margin))
+    };
+}
+function pointFromEvent(event) {
+    return {
+        x: event.clientX,
+        y: event.clientY
+    };
+}
+function toDocumentPoint(point) {
+    return {
+        x: point.x + window.scrollX,
+        y: point.y + window.scrollY
+    };
+}
+function toDocumentInspection(inspection) {
+    return {
+        ...inspection,
+        point: toDocumentPoint(inspection.point),
+        rect: inspection.rect ? offsetRect(inspection.rect, window.scrollX, window.scrollY) : inspection.rect
+    };
+}
+function dragDistance(drag) {
+    return Math.hypot(drag.end.x - drag.start.x, drag.end.y - drag.start.y);
+}
+function lineFromDrag(axis, drag) {
+    const start = toDocumentPoint(drag.start);
+    const end = toDocumentPoint(drag.end);
+    const startAlong = axis === "horizontal" ? start.x : start.y;
+    const endAlong = axis === "horizontal" ? end.x : end.y;
+    const perp = axis === "horizontal"
+        ? (start.y + end.y) / 2
+        : (start.x + end.x) / 2;
+    return {
+        min: Math.min(startAlong, endAlong),
+        max: Math.max(startAlong, endAlong),
+        perp
+    };
+}
+function formatPx(value) {
+    const rounded = Math.round(value * 100) / 100;
+    return `${Number.isInteger(rounded) ? rounded : rounded.toFixed(2)}px`;
+}
+function roundPx(value) {
+    return Math.round(value * 100) / 100;
+}
+export { inferAxis, measureGap };