gap-inspector 0.1.0 → 0.2.1

package/dist/index.js

@@ -1,878 +1,2942 @@
-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;
+import { useRef, useState, useEffect, useLayoutEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+// src/index.tsx
+
+// src/measurement.ts
+var AXIS_PROPS = {
+  horizontal: {
+    start: "left",
+    end: "right",
+    size: "width",
+    beforeMargin: "marginLeft",
+    afterMargin: "marginRight",
+    beforePadding: "paddingLeft",
+    afterPadding: "paddingRight",
+    beforeBorder: "borderLeftWidth",
+    afterBorder: "borderRightWidth",
+    gap: "columnGap",
+    alternateGap: "gap",
+    perpStart: "top",
+    perpEnd: "bottom"
+  },
+  vertical: {
+    start: "top",
+    end: "bottom",
+    size: "height",
+    beforeMargin: "marginTop",
+    afterMargin: "marginBottom",
+    beforePadding: "paddingTop",
+    afterPadding: "paddingBottom",
+    beforeBorder: "borderTopWidth",
+    afterBorder: "borderBottomWidth",
+    gap: "rowGap",
+    alternateGap: "gap",
+    perpStart: "left",
+    perpEnd: "right"
+  }
+};
+function inferAxis(start, end) {
+  return Math.abs(end.x - start.x) >= Math.abs(end.y - start.y) ? "horizontal" : "vertical";
+}
+function measureGap(options) {
+  const doc = options.document ?? document;
+  const axis = options.axis ?? inferAxis(options.start, options.end);
+  const props = AXIS_PROPS[axis];
+  const ignoreElements = new Set(
+    (options.ignoreElements ?? []).filter((element) => Boolean(element))
+  );
+  const line = normalizeLine(axis, options.start, options.end);
+  const endpoints = findEndpointElementsFromPointer(doc, axis, options.start, options.end, ignoreElements) ?? (options.boundaryScan === false ? null : findBoundaryElements(doc, axis, line, ignoreElements));
+  if (!endpoints) {
+    return null;
+  }
+  if (endpoints.kind === "internal") {
+    return measureInternalGap(axis, endpoints);
+  }
+  const fromElement = endpoints.from;
+  const toElement = endpoints.to;
+  const fromRect = toGapRect(endpoints.from.getBoundingClientRect());
+  const toRect = toGapRect(endpoints.to.getBoundingClientRect());
+  const totalPx = Math.max(
+    0,
+    toRect[props.start] - fromRect[props.end]
+  );
+  const commonAncestor = findCommonAncestor(fromElement, toElement);
+  const fromBranch = commonAncestor ? childBranchUnderAncestor(fromElement, commonAncestor) : null;
+  const toBranch = commonAncestor ? childBranchUnderAncestor(toElement, commonAncestor) : null;
+  const contributions = [];
+  const warnings = [];
+  for (const element of [fromElement, toElement]) {
+    if (element.tagName.toLowerCase() === "iframe") {
+      warnings.push(
+        `\`${selectorForElement(element)}\` is an iframe; its contents render in a separate document and cannot be inspected or attributed.`
+      );
     }
-    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);
+  }
+  appendGeometryWarnings(warnings, [fromElement, toElement, fromBranch, toBranch, commonAncestor]);
+  if (commonAncestor && fromBranch && fromBranch !== endpoints.from) {
+    contributions.push(
+      ...describeInternalSpace(axis, fromElement, fromBranch, "after", warnings)
+    );
+  }
+  if (commonAncestor && fromBranch && toBranch && fromBranch !== toBranch) {
+    contributions.push(
+      ...describeBetweenBranches(axis, commonAncestor, fromBranch, toBranch, warnings)
+    );
+  } else {
+    contributions.push(
+      makeUnknownContribution(axis, fromElement, totalPx, "Unable to isolate sibling branches for this gap.")
+    );
+  }
+  if (commonAncestor && toBranch && toBranch !== endpoints.to) {
+    contributions.push(
+      ...describeInternalSpace(axis, toElement, toBranch, "before", warnings)
+    );
+  }
+  const visibleContributions = limitContributionsToMeasuredGap(
+    collapseContributions(contributions).filter((contribution) => contribution.valuePx > 0.49),
+    totalPx,
+    warnings
+  );
+  const attributedPx = roundPx(
+    visibleContributions.reduce((sum, contribution) => sum + contribution.valuePx, 0)
+  );
+  const unattributedPx = roundPx(Math.max(0, totalPx - attributedPx));
+  if (unattributedPx > 0.49) {
+    warnings.push(
+      `${formatPx(unattributedPx)} is rendered space that could not be tied to a direct margin, padding, border, or gap declaration. Check flex/grid distribution, widths, min-width, transforms, or empty wrappers.`
+    );
+  }
+  const measurement = {
+    axis,
+    totalPx: roundPx(totalPx),
+    attributedPx,
+    unattributedPx,
+    from: elementInfo(fromElement),
+    to: elementInfo(toElement),
+    commonAncestor: commonAncestor ? elementInfo(commonAncestor) : void 0,
+    contributions: visibleContributions,
+    warnings
+  };
+  const equation = buildEquation(measurement);
+  return {
+    ...measurement,
+    equation,
+    markdown: buildMarkdown({ ...measurement, equation})
+  };
+}
+function inspectPoint(options) {
+  const doc = options.document ?? document;
+  const axis = options.axis ?? "horizontal";
+  const ignoreElements = new Set(
+    (options.ignoreElements ?? []).filter((element) => Boolean(element))
+  );
+  const marginInspection = inspectMarginAtPoint(doc, axis, options.point, ignoreElements);
+  if (marginInspection) {
+    return marginInspection;
+  }
+  const target = deepestElementAtPoint(doc, options.point.x, options.point.y, ignoreElements);
+  if (!target || isStructuralPageElement(target)) {
+    return inspectGapAtPoint(doc, axis, options.point, ignoreElements);
+  }
+  if (isContainerLikeHit(target, options.point)) {
+    const gapInspection = inspectGapAtPoint(doc, axis, options.point, ignoreElements);
+    if (gapInspection) {
+      return gapInspection;
     }
-    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));
+  }
+  return inspectElementAtPoint(axis, options.point, target);
+}
+function measureInternalGap(axis, endpoints) {
+  const props = AXIS_PROPS[axis];
+  const containerRect = toGapRect(endpoints.container.getBoundingClientRect());
+  const childRect = toGapRect(endpoints.child.getBoundingClientRect());
+  const totalPx = endpoints.side === "before" ? Math.max(0, childRect[props.start] - containerRect[props.start]) : Math.max(0, containerRect[props.end] - childRect[props.end]);
+  const warnings = [];
+  appendGeometryWarnings(warnings, [endpoints.container, endpoints.child]);
+  const visibleContributions = limitContributionsToMeasuredGap(
+    collapseContributions(
+      describeContainedGap(axis, endpoints.container, endpoints.child, endpoints.side, warnings)
+    ).filter((contribution) => contribution.valuePx > 0.49),
+    totalPx,
+    warnings
+  );
+  const attributedPx = roundPx(
+    visibleContributions.reduce((sum, contribution) => sum + contribution.valuePx, 0)
+  );
+  const unattributedPx = roundPx(Math.max(0, totalPx - attributedPx));
+  if (unattributedPx > 0.49) {
+    warnings.push(
+      `${formatPx(unattributedPx)} is internal rendered space that could not be tied to a direct margin, padding, border, or gap declaration. Check nested wrappers, explicit widths, or positioned children.`
+    );
+  }
+  const measurement = {
+    axis,
+    totalPx: roundPx(totalPx),
+    attributedPx,
+    unattributedPx,
+    from: elementInfo(endpoints.container),
+    to: elementInfo(endpoints.child),
+    commonAncestor: elementInfo(endpoints.container),
+    internalSide: endpoints.side,
+    contributions: visibleContributions,
+    warnings
+  };
+  const equation = buildEquation(measurement);
+  return {
+    ...measurement,
+    equation,
+    markdown: buildMarkdown({ ...measurement, equation})
+  };
+}
+function normalizeLine(axis, start, end) {
+  const props = AXIS_PROPS[axis];
+  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),
+    mid: (startAlong + endAlong) / 2,
+    perp,
+    props
+  };
+}
+function findBoundaryElements(doc, axis, line, ignoreElements) {
+  const elements = uniqueElementCandidates(
+    queryAllDeep(doc.body).filter((element) => shouldInspectElement(element, ignoreElements)).map((element) => normalizeScannedTarget(element)).filter((element) => !isStructuralPageElement(element))
+  ).map((element) => ({ element, rect: toGapRect(element.getBoundingClientRect()) })).filter(({ rect }) => rect.width > 0 && rect.height > 0).filter(({ rect }) => line.perp >= rect[line.props.perpStart] - 2 && line.perp <= rect[line.props.perpEnd] + 2);
+  const fromCandidates = elements.filter(({ rect }) => rect[line.props.end] <= line.max + 8).sort((a, b) => edgeCandidateScore(a.element, a.rect, line, "from") - edgeCandidateScore(b.element, b.rect, line, "from"));
+  const toCandidates = elements.filter(({ rect }) => rect[line.props.start] >= line.min - 8).sort((a, b) => edgeCandidateScore(a.element, a.rect, line, "to") - edgeCandidateScore(b.element, b.rect, line, "to"));
+  const bestPair = chooseBestEndpointPair(fromCandidates, toCandidates, line);
+  if (bestPair) {
+    return bestPair;
+  }
+  const startElement = elementFromPointIgnoring(doc, axis, line.min, line.perp, ignoreElements);
+  const endElement = elementFromPointIgnoring(doc, axis, line.max, line.perp, ignoreElements);
+  if (!startElement || !endElement || startElement === endElement) {
+    return null;
+  }
+  const startRect = toGapRect(startElement.getBoundingClientRect());
+  const endRect = toGapRect(endElement.getBoundingClientRect());
+  return startRect[line.props.end] <= endRect[line.props.start] ? { kind: "normal", from: startElement, to: endElement } : { kind: "normal", from: endElement, to: startElement };
+}
+function findEndpointElementsFromPointer(doc, axis, start, end, ignoreElements) {
+  const startElement = deepestElementAtPoint(doc, start.x, start.y, ignoreElements);
+  const endElement = deepestElementAtPoint(doc, end.x, end.y, ignoreElements);
+  if (!startElement || !endElement || startElement === endElement) {
+    return null;
+  }
+  if (startElement.contains(endElement) || endElement.contains(startElement)) {
+    return containedEndpointPair(axis, startElement, endElement, start, end);
+  }
+  const props = AXIS_PROPS[axis];
+  const startRect = toGapRect(startElement.getBoundingClientRect());
+  const endRect = toGapRect(endElement.getBoundingClientRect());
+  if (startRect[props.end] <= endRect[props.start]) {
+    if (endRect[props.start] - startRect[props.end] < 0.5) {
+      return null;
     }
-    function endInspectorDrag() {
-        suppressLauncherClickRef.current = Boolean(gripRef.current?.moved);
-        gripRef.current = null;
+    return { kind: "normal", from: startElement, to: endElement };
+  }
+  if (endRect[props.end] <= startRect[props.start]) {
+    if (startRect[props.start] - endRect[props.end] < 0.5) {
+      return 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);
+    return { kind: "normal", from: endElement, to: startElement };
+  }
+  return null;
+}
+function containedEndpointPair(axis, startElement, endElement, start, end) {
+  const startContainsEnd = startElement.contains(endElement);
+  const container = startContainsEnd ? startElement : endElement;
+  const child = startContainsEnd ? endElement : startElement;
+  const containerPoint = startContainsEnd ? start : end;
+  const childPoint = startContainsEnd ? end : start;
+  const childRect = toGapRect(child.getBoundingClientRect());
+  const props = AXIS_PROPS[axis];
+  const pointAlong = axis === "horizontal" ? containerPoint.x : containerPoint.y;
+  const childPointAlong = axis === "horizontal" ? childPoint.x : childPoint.y;
+  const side = pointAlong <= childRect[props.start] ? "before" : pointAlong >= childRect[props.end] ? "after" : pointAlong < childPointAlong ? "before" : "after";
+  const containerRect = toGapRect(container.getBoundingClientRect());
+  const totalPx = side === "before" ? childRect[props.start] - containerRect[props.start] : containerRect[props.end] - childRect[props.end];
+  if (totalPx < 0.5) {
+    return null;
+  }
+  return {
+    kind: "internal",
+    container,
+    child,
+    side
+  };
+}
+function deepestElementAtPoint(doc, x, y, ignoreElements) {
+  const elements = elementsFromPointDeep(doc, x, y, ignoreElements);
+  for (const element of elements) {
+    if (!(element instanceof HTMLElement)) {
+      continue;
+    }
+    if (!shouldInspectElement(element, ignoreElements)) {
+      continue;
+    }
+    if (isStructuralPageElement(element)) {
+      continue;
+    }
+    return element;
+  }
+  return null;
+}
+function elementsFromPointDeep(doc, x, y, ignoreElements) {
+  const layers = [];
+  let scope = doc;
+  for (let depth = 0; depth < 12; depth += 1) {
+    const elements = scope.elementsFromPoint(x, y).filter((element) => element.getRootNode() === scope);
+    if (!elements.length) {
+      break;
+    }
+    layers.push(elements);
+    const top = elements.find(
+      (element) => element instanceof HTMLElement && !ignoreElements.has(element) && !containsAnyIgnored(element, ignoreElements)
+    );
+    const shadowRoot = top instanceof HTMLElement ? top.shadowRoot : null;
+    if (!shadowRoot) {
+      break;
+    }
+    scope = shadowRoot;
+  }
+  return layers.reverse().flat();
+}
+function queryAllDeep(scope) {
+  const results = [];
+  const visit = (node) => {
+    for (const element of Array.from(node.querySelectorAll("*"))) {
+      results.push(element);
+      if (element.shadowRoot) {
+        visit(element.shadowRoot);
+      }
+    }
+  };
+  visit(scope);
+  return results;
+}
+function parentThroughShadow(element) {
+  if (element.parentElement) {
+    return element.parentElement;
+  }
+  const root = element.getRootNode();
+  return root instanceof ShadowRoot ? root.host : null;
+}
+function normalizeScannedTarget(element) {
+  let current = element;
+  while (current.parentElement && !isStructuralPageElement(current.parentElement) && shouldClimbPointTarget(current, current.parentElement)) {
+    current = current.parentElement;
+  }
+  return current;
+}
+function uniqueElementCandidates(elements) {
+  return Array.from(new Set(elements));
+}
+function shouldClimbPointTarget(element, parent) {
+  const tagName = element.tagName.toLowerCase();
+  const rect = element.getBoundingClientRect();
+  const parentRect = parent.getBoundingClientRect();
+  const style = getComputedStyle(element);
+  if (["span", "strong", "em", "small", "label", "b", "i"].includes(tagName)) {
+    return true;
+  }
+  if (style.display === "inline") {
+    return true;
+  }
+  if (rect.height < 22 && parentRect.height > rect.height * 1.5) {
+    return true;
+  }
+  if (rect.width < 32 && parentRect.width > rect.width * 1.5) {
+    return true;
+  }
+  return false;
+}
+var STRUCTURAL_ROOT_IDS = /* @__PURE__ */ new Set(["root", "app", "__next", "__nuxt"]);
+function isStructuralPageElement(element) {
+  const tagName = element.tagName.toLowerCase();
+  return tagName === "html" || tagName === "body" || STRUCTURAL_ROOT_IDS.has(element.id);
+}
+function edgeCandidateScore(element, rect, line, side) {
+  const edge = side === "from" ? rect[line.props.end] : rect[line.props.start];
+  const target = side === "from" ? line.min : line.max;
+  const endpointDistance = Math.abs(edge - target);
+  const elementSizePenalty = Math.sqrt(rectArea(rect)) * 0.015;
+  const depthReward = elementDepth(element) * 0.35;
+  return endpointDistance + elementSizePenalty - depthReward;
+}
+function chooseBestEndpointPair(fromCandidates, toCandidates, line) {
+  const drawnGap = line.max - line.min;
+  let best = null;
+  for (const fromCandidate of fromCandidates.slice(0, 40)) {
+    for (const toCandidate of toCandidates.slice(0, 40)) {
+      if (fromCandidate.element === toCandidate.element) {
+        continue;
+      }
+      if (fromCandidate.element.contains(toCandidate.element) || toCandidate.element.contains(fromCandidate.element)) {
+        continue;
+      }
+      const gap = toCandidate.rect[line.props.start] - fromCandidate.rect[line.props.end];
+      if (gap < 0.5) {
+        continue;
+      }
+      const score = edgeCandidateScore(fromCandidate.element, fromCandidate.rect, line, "from") + edgeCandidateScore(toCandidate.element, toCandidate.rect, line, "to") + Math.abs(gap - drawnGap) * 0.4 + sharedAncestorDistance(fromCandidate.element, toCandidate.element) * 0.2;
+      if (!best || score < best.score) {
+        best = {
+          from: fromCandidate.element,
+          to: toCandidate.element,
+          score
         };
-    }, [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 best ? { kind: "normal", from: best.from, to: best.to } : null;
+}
+function describeInternalSpace(axis, element, branch, direction, warnings) {
+  const levels = [];
+  const props = AXIS_PROPS[axis];
+  let current = element;
+  while (current && current !== branch) {
+    const parent = parentThroughShadow(current);
+    if (!parent) {
+      break;
+    }
+    const currentRect = toGapRect(current.getBoundingClientRect());
+    const parentRect = toGapRect(parent.getBoundingClientRect());
+    const style = getComputedStyle(parent);
+    const childStyle = getComputedStyle(current);
+    const measured = direction === "after" ? parentRect[props.end] - currentRect[props.end] : currentRect[props.start] - parentRect[props.start];
+    warnNegativeMargin(warnings, childStyle, direction === "after" ? props.afterMargin : props.beforeMargin, current);
+    if (measured > 0.49) {
+      const marginProperty = direction === "after" ? props.afterMargin : props.beforeMargin;
+      const paddingProperty = direction === "after" ? props.afterPadding : props.beforePadding;
+      const borderProperty = direction === "after" ? props.afterBorder : props.beforeBorder;
+      const margin = positivePx(childStyle[marginProperty]);
+      const padding = positivePx(style[paddingProperty]);
+      const border = positivePx(style[borderProperty]);
+      const scrollbar = scrollbarGutterPx(axis, direction, parent, style);
+      const residual = measured - margin - padding - border - scrollbar;
+      const level = [];
+      pushContribution(level, "margin", marginProperty, margin, childStyle[marginProperty], current);
+      pushContribution(
+        level,
+        "layout",
+        direction === "after" ? "inner inline-end space" : "inner inline-start space",
+        residual,
+        void 0,
+        parent,
+        "Rendered space inside this wrapper between the measured element and the wrapper edge."
+      );
+      pushContribution(level, "padding", paddingProperty, padding, style[paddingProperty], parent);
+      pushContribution(
+        level,
+        "scrollbar",
+        "scrollbar gutter",
+        Math.min(scrollbar, measured),
+        style.scrollbarGutter,
+        parent,
+        "Native scrollbar gutter inside this scroll container."
+      );
+      pushContribution(level, "border", borderProperty, border, style[borderProperty], parent);
+      if (direction === "before") {
+        level.reverse();
+      }
+      levels.push(level);
+    }
+    current = parent;
+  }
+  if (direction === "before") {
+    levels.reverse();
+  }
+  return levels.flat();
+}
+function describeBetweenBranches(axis, ancestor, fromBranch, toBranch, warnings) {
+  const props = AXIS_PROPS[axis];
+  const ancestorStyle = getComputedStyle(ancestor);
+  const fromStyle = getComputedStyle(fromBranch);
+  const toStyle = getComputedStyle(toBranch);
+  const fromRect = toGapRect(fromBranch.getBoundingClientRect());
+  const toRect = toGapRect(toBranch.getBoundingClientRect());
+  const measured = Math.max(0, toRect[props.start] - fromRect[props.end]);
+  const contributions = [];
+  const afterMargin = positivePx(fromStyle[props.afterMargin]);
+  const beforeMargin = positivePx(toStyle[props.beforeMargin]);
+  const gap = layoutGapPx(ancestorStyle, props.gap, props.alternateGap);
+  warnNegativeMargin(warnings, fromStyle, props.afterMargin, fromBranch);
+  warnNegativeMargin(warnings, toStyle, props.beforeMargin, toBranch);
+  const marginsCollapse = axis === "vertical" && !isGapLayout(ancestorStyle.display) && !ancestorStyle.display.includes("table") && isBlockLevel(fromStyle) && isBlockLevel(toStyle);
+  if (marginsCollapse && (afterMargin > 0.49 || beforeMargin > 0.49)) {
+    const fromWins = afterMargin >= beforeMargin;
+    const winner = fromWins ? { property: props.afterMargin, value: afterMargin, cssValue: fromStyle[props.afterMargin], element: fromBranch } : { property: props.beforeMargin, value: beforeMargin, cssValue: toStyle[props.beforeMargin], element: toBranch };
+    const loser = fromWins ? { property: props.beforeMargin, value: beforeMargin, cssValue: toStyle[props.beforeMargin] } : { property: props.afterMargin, value: afterMargin, cssValue: fromStyle[props.afterMargin] };
+    pushContribution(
+      contributions,
+      "margin",
+      winner.property,
+      winner.value,
+      winner.cssValue,
+      winner.element,
+      loser.value > 0.49 ? `Adjacent vertical margins collapse: ${cssPropertyName(loser.property)} (${loser.cssValue}) on the sibling collapsed into this larger margin.` : void 0
+    );
+  } else {
+    pushContribution(contributions, "margin", props.afterMargin, afterMargin, fromStyle[props.afterMargin], fromBranch);
+  }
+  if (isGapLayout(ancestorStyle.display)) {
+    pushContribution(
+      contributions,
+      "gap",
+      props.gap,
+      Math.min(gap, measured),
+      ancestorStyle[props.gap] || ancestorStyle[props.alternateGap],
+      ancestor,
+      `${ancestorStyle.display} parent`
+    );
+  }
+  const attributedMargins = marginsCollapse ? Math.max(afterMargin, beforeMargin) : afterMargin + beforeMargin;
+  const residual = measured - attributedMargins - (isGapLayout(ancestorStyle.display) ? gap : 0);
+  pushContribution(
+    contributions,
+    "layout",
+    layoutDistributionProperty(ancestorStyle),
+    residual,
+    void 0,
+    ancestor,
+    "Rendered space between the sibling layout branches."
+  );
+  if (!marginsCollapse) {
+    pushContribution(contributions, "margin", props.beforeMargin, beforeMargin, toStyle[props.beforeMargin], toBranch);
+  }
+  return contributions;
+}
+function describeContainedGap(axis, container, child, side, warnings) {
+  const props = AXIS_PROPS[axis];
+  const containerRect = toGapRect(container.getBoundingClientRect());
+  const childRect = toGapRect(child.getBoundingClientRect());
+  const containerStyle = getComputedStyle(container);
+  const childStyle = getComputedStyle(child);
+  const measured = side === "before" ? childRect[props.start] - containerRect[props.start] : containerRect[props.end] - childRect[props.end];
+  const contributions = [];
+  const paddingProperty = side === "before" ? props.beforePadding : props.afterPadding;
+  const borderProperty = side === "before" ? props.beforeBorder : props.afterBorder;
+  const marginProperty = side === "before" ? props.beforeMargin : props.afterMargin;
+  const padding = positivePx(containerStyle[paddingProperty]);
+  const border = positivePx(containerStyle[borderProperty]);
+  const margin = positivePx(childStyle[marginProperty]);
+  warnNegativeMargin(warnings, childStyle, marginProperty, child);
+  const residual = measured - padding - border - margin;
+  const residualContribution = [
+    "layout",
+    side === "before" ? "internal start space" : "internal end space",
+    residual,
+    void 0,
+    container,
+    "Rendered internal space between the container edge and the selected child."
+  ];
+  if (side === "before") {
+    pushContribution(contributions, "border", borderProperty, border, containerStyle[borderProperty], container);
+    pushContribution(contributions, "padding", paddingProperty, padding, containerStyle[paddingProperty], container);
+    pushContribution(contributions, ...residualContribution);
+    pushContribution(contributions, "margin", marginProperty, margin, childStyle[marginProperty], child);
+  } else {
+    pushContribution(contributions, "margin", marginProperty, margin, childStyle[marginProperty], child);
+    pushContribution(contributions, ...residualContribution);
+    pushContribution(contributions, "padding", paddingProperty, padding, containerStyle[paddingProperty], container);
+    pushContribution(contributions, "border", borderProperty, border, containerStyle[borderProperty], container);
+  }
+  return contributions;
+}
+function makeUnknownContribution(axis, element, valuePx, note) {
+  return {
+    kind: "unknown",
+    property: `${axis} gap`,
+    valuePx: roundPx(valuePx),
+    selector: selectorForElement(element),
+    element: elementInfo(element),
+    note
+  };
+}
+function pushContribution(contributions, kind, property, valuePx, cssValue, element, note) {
+  if (valuePx <= 0.49) {
+    return;
+  }
+  contributions.push({
+    kind,
+    property: cssPropertyName(property),
+    valuePx: roundPx(valuePx),
+    cssValue,
+    selector: selectorForElement(element),
+    element: elementInfo(element),
+    note
+  });
+}
+function collapseContributions(contributions) {
+  const byKey = /* @__PURE__ */ new Map();
+  for (const contribution of contributions) {
+    const key = [
+      contribution.kind,
+      contribution.property,
+      contribution.selector,
+      contribution.note ?? ""
+    ].join("::");
+    const existing = byKey.get(key);
+    if (existing) {
+      existing.valuePx = roundPx(existing.valuePx + contribution.valuePx);
+    } else {
+      byKey.set(key, { ...contribution });
+    }
+  }
+  return Array.from(byKey.values());
+}
+function limitContributionsToMeasuredGap(contributions, totalPx, warnings) {
+  let remaining = roundPx(totalPx);
+  const limited = [];
+  let capped = false;
+  for (const contribution of contributions) {
+    if (remaining <= 0.49) {
+      capped = true;
+      continue;
+    }
+    if (contribution.valuePx > remaining) {
+      capped = true;
+      limited.push({
+        ...contribution,
+        valuePx: remaining,
+        note: [
+          contribution.note,
+          `Raw computed value was ${formatPx(contribution.valuePx)}; capped to the remaining measured gap.`
+        ].filter(Boolean).join(" ")
+      });
+      remaining = 0;
+      continue;
+    }
+    limited.push(contribution);
+    remaining = roundPx(remaining - contribution.valuePx);
+  }
+  if (capped) {
+    warnings.push(
+      "Candidate contributors exceeded the rendered gap, usually because nested wrappers overlap in the measurement path. Values were capped so the equation stays tied to measured geometry."
+    );
+  }
+  return limited;
+}
+function buildEquation(measurement) {
+  const parts = measurement.contributions.map((contribution) => formatPx(contribution.valuePx));
+  if (measurement.unattributedPx > 0.49) {
+    parts.push(`${formatPx(measurement.unattributedPx)} unattributed`);
+  }
+  return `${parts.length ? parts.join(" + ") : "0px"} = ${formatPx(measurement.totalPx)}`;
+}
+function buildMarkdown(measurement) {
+  const lines = [
+    `Measured ${measurement.axis} gap: ${formatPx(measurement.totalPx)}`,
+    "",
+    `From: \`${measurement.from.selector}\``,
+    `To: \`${measurement.to.selector}\``
+  ];
+  if (measurement.commonAncestor) {
+    lines.push(`Common ancestor: \`${measurement.commonAncestor.selector}\``);
+  }
+  lines.push("", "Contributions:");
+  if (measurement.contributions.length === 0) {
+    lines.push("- No direct box-model contributors found.");
+  } else {
+    for (const contribution of measurement.contributions) {
+      const cssValue = contribution.cssValue ? ` (${contribution.cssValue})` : "";
+      const note = contribution.note ? ` - ${contribution.note}` : "";
+      lines.push(
+        `- ${formatPx(contribution.valuePx)} from \`${contribution.selector}\` ${contribution.property}${cssValue}${note}`
+      );
+    }
+  }
+  lines.push("", `Equation: ${measurement.equation}`);
+  if (measurement.warnings.length) {
+    lines.push("", "Warnings:");
+    for (const warning of measurement.warnings) {
+      lines.push(`- ${warning}`);
+    }
+  }
+  return lines.join("\n");
+}
+function shouldInspectElement(element, ignoreElements) {
+  if (ignoreElements.has(element) || containsAnyIgnored(element, ignoreElements)) {
+    return false;
+  }
+  const tagName = element.tagName.toLowerCase();
+  if (["script", "style", "template", "noscript", "meta", "link"].includes(tagName)) {
+    return false;
+  }
+  const style = getComputedStyle(element);
+  return style.display !== "none" && style.visibility !== "hidden" && style.opacity !== "0";
+}
+function containsAnyIgnored(element, ignoreElements) {
+  for (const ignored of ignoreElements) {
+    if (ignored.contains(element) || element.contains(ignored)) {
+      return true;
+    }
+  }
+  return false;
+}
+function elementFromPointIgnoring(doc, axis, along, perp, ignoreElements) {
+  const x = axis === "horizontal" ? along : perp;
+  const y = axis === "horizontal" ? perp : along;
+  return elementsFromPointDeep(doc, x, y, ignoreElements).find(
+    (element) => element instanceof HTMLElement && !ignoreElements.has(element) && !containsAnyIgnored(element, ignoreElements)
+  ) ?? null;
+}
+function findCommonAncestor(a, b) {
+  const ancestors = /* @__PURE__ */ new Set();
+  let current = a;
+  while (current) {
+    ancestors.add(current);
+    current = parentThroughShadow(current);
+  }
+  current = b;
+  while (current) {
+    if (ancestors.has(current)) {
+      return current;
+    }
+    current = parentThroughShadow(current);
+  }
+  return null;
+}
+function childBranchUnderAncestor(element, ancestor) {
+  let current = element;
+  let parent = parentThroughShadow(current);
+  while (parent && parent !== ancestor) {
+    current = parent;
+    parent = parentThroughShadow(current);
+  }
+  return parent === ancestor ? current : null;
+}
+function layoutGapPx(style, primary, fallback) {
+  return positivePx(style[primary]) || positivePx(style[fallback]);
+}
+function isGapLayout(display) {
+  return display.includes("flex") || display.includes("grid");
+}
+function isBlockLevel(style) {
+  return !style.display.startsWith("inline") && style.cssFloat === "none" && style.position !== "absolute" && style.position !== "fixed";
+}
+function warnNegativeMargin(warnings, style, property, element) {
+  const cssValue = style[property];
+  const parsed = Number.parseFloat(cssValue);
+  if (Number.isFinite(parsed) && parsed < -0.49) {
+    const warning = `${cssPropertyName(property)}: ${cssValue} on \`${selectorForElement(element)}\` pulls the boxes closer together; negative margins are not listed as contributors.`;
+    if (!warnings.includes(warning)) {
+      warnings.push(warning);
+    }
+  }
+}
+function appendGeometryWarnings(warnings, elements) {
+  const seen = /* @__PURE__ */ new Set();
+  for (const element of elements) {
+    if (!element || seen.has(element)) {
+      continue;
+    }
+    seen.add(element);
+    const style = getComputedStyle(element);
+    const zoom = style.getPropertyValue("zoom");
+    const transformed = style.transform !== "none" || isActiveTransformValue(style.getPropertyValue("translate")) || isActiveTransformValue(style.getPropertyValue("rotate")) || isActiveTransformValue(style.getPropertyValue("scale")) || zoom !== "" && zoom !== "1" && zoom !== "normal";
+    if (transformed) {
+      warnings.push(
+        `\`${selectorForElement(element)}\` is transformed (transform/translate/rotate/scale/zoom); rendered pixels may not match its computed CSS values.`
+      );
+    }
+  }
+}
+function isActiveTransformValue(value) {
+  return value !== "" && value !== "none";
+}
+function scrollbarGutterPx(axis, direction, element, style) {
+  if (!(element instanceof HTMLElement)) {
+    return 0;
+  }
+  const directionStyle = style.direction || "ltr";
+  if (axis === "horizontal") {
+    const overflowY = style.overflowY;
+    const canScrollY = overflowY === "auto" || overflowY === "scroll";
+    const hasScrollableContent2 = element.scrollHeight > element.clientHeight;
+    if (!canScrollY || !hasScrollableContent2 && overflowY !== "scroll") {
+      return 0;
+    }
+    const borderLeft = positivePx(style.borderLeftWidth);
+    const borderRight = positivePx(style.borderRightWidth);
+    const gutter2 = Math.max(0, element.offsetWidth - element.clientWidth - borderLeft - borderRight);
+    const gutterIsOnMeasuredSide = direction === "after" && directionStyle !== "rtl" || direction === "before" && directionStyle === "rtl";
+    return gutterIsOnMeasuredSide ? gutter2 : 0;
+  }
+  const overflowX = style.overflowX;
+  const canScrollX = overflowX === "auto" || overflowX === "scroll";
+  const hasScrollableContent = element.scrollWidth > element.clientWidth;
+  if (!canScrollX || !hasScrollableContent && overflowX !== "scroll") {
+    return 0;
+  }
+  const borderTop = positivePx(style.borderTopWidth);
+  const borderBottom = positivePx(style.borderBottomWidth);
+  const gutter = Math.max(0, element.offsetHeight - element.clientHeight - borderTop - borderBottom);
+  return direction === "after" ? gutter : 0;
+}
+function layoutDistributionProperty(style) {
+  if (style.display.includes("flex")) {
+    return `flex ${style.justifyContent || "layout space"}`;
+  }
+  if (style.display.includes("grid")) {
+    return "grid track/layout space";
+  }
+  if (style.position !== "static") {
+    return `${style.position} positioning`;
+  }
+  return "layout space";
+}
+function selectorForElement(element) {
+  const root = element.getRootNode();
+  if (root instanceof ShadowRoot) {
+    return `${selectorForElement(root.host)} >>> ${selectorWithinRoot(element, root)}`;
+  }
+  return selectorWithinRoot(element, element.ownerDocument ?? document);
+}
+function selectorWithinRoot(element, root) {
+  if (element.id) {
+    const idSelector = `#${cssEscape(element.id)}`;
+    if (isUniqueInRoot(idSelector, element, root)) {
+      return idSelector;
+    }
+  }
+  const testId = element.getAttribute("data-testid") ?? element.getAttribute("data-test");
+  if (testId) {
+    const attribute = element.hasAttribute("data-testid") ? "data-testid" : "data-test";
+    const testSelector = `[${attribute}="${testId.replace(/"/g, '\\"')}"]`;
+    if (isUniqueInRoot(testSelector, element, root)) {
+      return testSelector;
+    }
+  }
+  const readable = readablePathSelector(element);
+  if (readable && isUniqueInRoot(readable, element, root)) {
+    return readable;
+  }
+  return uniquePathSelector(element);
+}
+function readablePathSelector(element) {
+  const parts = [];
+  let current = element;
+  while (current && parts.length < 4 && current.tagName.toLowerCase() !== "html") {
+    const tag = current.tagName.toLowerCase();
+    const classes = Array.from(current.classList).filter((className) => !className.includes(":")).slice(0, 2).map((className) => `.${cssEscape(className)}`).join("");
+    const nth = nthOfType(current);
+    parts.unshift(`${tag}${classes}${nth ? `:nth-of-type(${nth})` : ""}`);
+    current = current.parentElement;
+  }
+  return parts.join(" > ");
+}
+function isUniqueInRoot(selector, element, root) {
+  try {
+    const matches = root.querySelectorAll(selector);
+    return matches.length === 1 && matches[0] === element;
+  } catch {
+    return false;
+  }
+}
+function uniquePathSelector(element) {
+  const parts = [];
+  let current = element;
+  while (current) {
+    const tag = current.tagName.toLowerCase();
+    const parent = current.parentNode;
+    if (parent && (parent instanceof Element || parent instanceof ShadowRoot)) {
+      const index = Array.prototype.indexOf.call(parent.children, current) + 1;
+      parts.unshift(`${tag}:nth-child(${index})`);
+      current = parent instanceof Element ? parent : null;
+    } else {
+      parts.unshift(tag);
+      current = null;
+    }
+  }
+  return parts.join(" > ");
+}
+function resolveSelector(selector, doc = document) {
+  const segments = selector.split(" >>> ");
+  let scope = doc;
+  let element = null;
+  for (let index = 0; index < segments.length; index += 1) {
+    try {
+      element = scope.querySelector(segments[index]);
+    } catch {
+      return null;
+    }
+    if (!element) {
+      return null;
+    }
+    if (index < segments.length - 1) {
+      if (!element.shadowRoot) {
         return null;
+      }
+      scope = element.shadowRoot;
     }
-    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] }));
+  }
+  return element;
 }
-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`;
+function nthOfType(element) {
+  const parent = element.parentElement;
+  if (!parent) {
+    return null;
+  }
+  const sameTagSiblings = Array.from(parent.children).filter((child) => child.tagName === element.tagName);
+  if (sameTagSiblings.length <= 1) {
+    return null;
+  }
+  return sameTagSiblings.indexOf(element) + 1;
+}
+function elementInfo(element) {
+  return {
+    selector: selectorForElement(element),
+    tagName: element.tagName.toLowerCase(),
+    className: element.getAttribute("class") ?? "",
+    rect: toGapRect(element.getBoundingClientRect()),
+    element
+  };
+}
+function inspectElementAtPoint(axis, point, element) {
+  const rect = toGapRect(element.getBoundingClientRect());
+  const style = getComputedStyle(element);
+  const borderRect = rect;
+  const paddingRect = shrinkRect(borderRect, {
+    top: positivePx(style.borderTopWidth),
+    right: positivePx(style.borderRightWidth),
+    bottom: positivePx(style.borderBottomWidth),
+    left: positivePx(style.borderLeftWidth)
+  });
+  const contentRect = shrinkRect(paddingRect, {
+    top: positivePx(style.paddingTop),
+    right: positivePx(style.paddingRight),
+    bottom: positivePx(style.paddingBottom),
+    left: positivePx(style.paddingLeft)
+  });
+  let region = "content";
+  let property = "content box";
+  let cssValue;
+  let totalPx;
+  if (!pointInRect(point, paddingRect)) {
+    region = "border";
+    const side = nearestSide(point, borderRect);
+    property = cssPropertyName(`border${capitalize(side)}Width`);
+    cssValue = style[`border${capitalize(side)}Width`];
+    totalPx = positivePx(cssValue);
+  } else if (!pointInRect(point, contentRect)) {
+    region = "padding";
+    const side = nearestSide(point, paddingRect);
+    property = cssPropertyName(`padding${capitalize(side)}`);
+    cssValue = style[`padding${capitalize(side)}`];
+    totalPx = positivePx(cssValue);
+  }
+  const inspection = {
+    kind: "point",
+    axis,
+    point,
+    region,
+    totalPx,
+    property,
+    cssValue,
+    element: elementInfo(element),
+    rect,
+    note: `Clicked inside ${region} region.`,
+    markdown: ""
+  };
+  return {
+    ...inspection,
+    markdown: buildPointMarkdown(inspection)
+  };
+}
+function inspectMarginAtPoint(doc, axis, point, ignoreElements) {
+  const candidates = queryAllDeep(doc.body).filter((element) => shouldInspectElement(element, ignoreElements)).map((element) => {
+    const style = getComputedStyle(element);
+    const rect = toGapRect(element.getBoundingClientRect());
+    const marginRect = expandRect(rect, {
+      top: positivePx(style.marginTop),
+      right: positivePx(style.marginRight),
+      bottom: positivePx(style.marginBottom),
+      left: positivePx(style.marginLeft)
+    });
+    return { element, style, rect, marginRect };
+  }).filter(({ rect, marginRect }) => pointInRect(point, marginRect) && !pointInRect(point, rect)).sort((a, b) => rectArea(a.marginRect) - rectArea(b.marginRect));
+  const candidate = candidates[0];
+  if (!candidate) {
+    return null;
+  }
+  const side = nearestMarginSide(point, candidate.rect);
+  const property = cssPropertyName(`margin${capitalize(side)}`);
+  const cssValue = candidate.style[`margin${capitalize(side)}`];
+  const inspection = {
+    kind: "point",
+    axis,
+    point,
+    region: "margin",
+    totalPx: positivePx(cssValue),
+    property,
+    cssValue,
+    element: elementInfo(candidate.element),
+    rect: candidate.marginRect,
+    note: "Clicked inside computed margin area.",
+    markdown: ""
+  };
+  return {
+    ...inspection,
+    markdown: buildPointMarkdown(inspection)
+  };
+}
+function inspectGapAtPoint(doc, axis, point, ignoreElements) {
+  const props = AXIS_PROPS[axis];
+  const along = axis === "horizontal" ? point.x : point.y;
+  const perp = axis === "horizontal" ? point.y : point.x;
+  const candidates = uniqueElementCandidates(
+    queryAllDeep(doc.body).filter((element) => shouldInspectElement(element, ignoreElements)).map((element) => normalizeScannedTarget(element)).filter((element) => !isStructuralPageElement(element))
+  ).map((element) => ({ element, rect: toGapRect(element.getBoundingClientRect()) })).filter(({ rect: rect2 }) => perp >= rect2[props.perpStart] - 1 && perp <= rect2[props.perpEnd] + 1).filter(({ rect: rect2 }) => !pointInRect(point, rect2));
+  const before = candidates.filter(({ rect: rect2 }) => rect2[props.end] <= along).sort((a, b) => b.rect[props.end] - a.rect[props.end] || rectArea(a.rect) - rectArea(b.rect))[0];
+  const after = candidates.filter(({ rect: rect2 }) => rect2[props.start] >= along).sort((a, b) => a.rect[props.start] - b.rect[props.start] || rectArea(a.rect) - rectArea(b.rect))[0];
+  if (!before || !after || before.element === after.element) {
+    return null;
+  }
+  const totalPx = roundPx(after.rect[props.start] - before.rect[props.end]);
+  if (totalPx < 0.5) {
+    return null;
+  }
+  const rect = axis === "horizontal" ? {
+    left: before.rect.right,
+    right: after.rect.left,
+    top: perp - 6,
+    bottom: perp + 6,
+    width: totalPx,
+    height: 12
+  } : {
+    left: perp - 6,
+    right: perp + 6,
+    top: before.rect.bottom,
+    bottom: after.rect.top,
+    width: 12,
+    height: totalPx
+  };
+  const inspection = {
+    kind: "point",
+    axis,
+    point,
+    region: "gap",
+    totalPx,
+    property: `${axis} rendered gap`,
+    from: elementInfo(before.element),
+    to: elementInfo(after.element),
+    rect,
+    note: "Clicked in empty rendered space between two visible edges.",
+    markdown: ""
+  };
+  return {
+    ...inspection,
+    markdown: buildPointMarkdown(inspection)
+  };
+}
+function buildPointMarkdown(inspection) {
+  const lines = [
+    `Point inspection: ${inspection.region}`,
+    `Point: ${Math.round(inspection.point.x)}, ${Math.round(inspection.point.y)}`
+  ];
+  if (inspection.totalPx !== void 0) {
+    lines.push(`Value: ${formatPx(inspection.totalPx)}`);
+  }
+  if (inspection.property) {
+    lines.push(`Property: ${inspection.property}${inspection.cssValue ? ` (${inspection.cssValue})` : ""}`);
+  }
+  if (inspection.element) {
+    lines.push(`Element: \`${inspection.element.selector}\``);
+  }
+  if (inspection.from && inspection.to) {
+    lines.push(`From: \`${inspection.from.selector}\``);
+    lines.push(`To: \`${inspection.to.selector}\``);
+  }
+  if (inspection.note) {
+    lines.push(`Note: ${inspection.note}`);
+  }
+  return lines.join("\n");
+}
+function isContainerLikeHit(element, point) {
+  const rect = toGapRect(element.getBoundingClientRect());
+  const tagName = element.tagName.toLowerCase();
+  const area = rect.width * rect.height;
+  if (["button", "a", "input", "textarea", "select", "h1", "h2", "h3", "p", "span"].includes(tagName)) {
+    return false;
+  }
+  return area > 8e3 || !pointInRect(point, rect);
+}
+function pointInRect(point, rect) {
+  return point.x >= rect.left && point.x <= rect.right && point.y >= rect.top && point.y <= rect.bottom;
+}
+function shrinkRect(rect, inset) {
+  const left = rect.left + inset.left;
+  const right = rect.right - inset.right;
+  const top = rect.top + inset.top;
+  const bottom = rect.bottom - inset.bottom;
+  return {
+    left,
+    right,
+    top,
+    bottom,
+    width: Math.max(0, right - left),
+    height: Math.max(0, bottom - top)
+  };
+}
+function expandRect(rect, outset) {
+  const left = rect.left - outset.left;
+  const right = rect.right + outset.right;
+  const top = rect.top - outset.top;
+  const bottom = rect.bottom + outset.bottom;
+  return {
+    left,
+    right,
+    top,
+    bottom,
+    width: Math.max(0, right - left),
+    height: Math.max(0, bottom - top)
+  };
+}
+function nearestSide(point, rect) {
+  const distances = [
+    { side: "Top", distance: Math.abs(point.y - rect.top) },
+    { side: "Right", distance: Math.abs(point.x - rect.right) },
+    { side: "Bottom", distance: Math.abs(point.y - rect.bottom) },
+    { side: "Left", distance: Math.abs(point.x - rect.left) }
+  ];
+  return distances.sort((a, b) => a.distance - b.distance)[0].side;
+}
+function nearestMarginSide(point, rect) {
+  if (point.x < rect.left) {
+    return "Left";
+  }
+  if (point.x > rect.right) {
+    return "Right";
+  }
+  if (point.y < rect.top) {
+    return "Top";
+  }
+  return "Bottom";
+}
+function capitalize(value) {
+  return `${value.slice(0, 1).toUpperCase()}${value.slice(1)}`;
+}
+function toGapRect(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 rectArea(rect) {
+  return rect.width * rect.height;
+}
+function elementDepth(element) {
+  let depth = 0;
+  let current = element;
+  while (current) {
+    depth += 1;
+    current = parentThroughShadow(current);
+  }
+  return depth;
+}
+function sharedAncestorDistance(a, b) {
+  const commonAncestor = findCommonAncestor(a, b);
+  if (!commonAncestor) {
+    return 100;
+  }
+  return distanceToAncestor(a, commonAncestor) + distanceToAncestor(b, commonAncestor);
+}
+function distanceToAncestor(element, ancestor) {
+  let distance = 0;
+  let current = element;
+  while (current && current !== ancestor) {
+    distance += 1;
+    current = parentThroughShadow(current);
+  }
+  return current === ancestor ? distance : 100;
+}
+function positivePx(value) {
+  if (typeof value === "number") {
+    return Number.isFinite(value) && value > 0 ? value : 0;
+  }
+  if (!value || value === "auto" || value === "normal") {
+    return 0;
+  }
+  const parsed = Number.parseFloat(value);
+  return Number.isFinite(parsed) && parsed > 0 ? parsed : 0;
+}
+function roundPx(value) {
+  const nearest = Math.round(value);
+  if (Math.abs(value - nearest) < 0.15) {
+    return nearest;
+  }
+  return Math.round(value * 10) / 10;
+}
+function formatPx(value) {
+  const rounded = roundPx(value);
+  return `${Number.isInteger(rounded) ? rounded : rounded.toFixed(1)}px`;
+}
+function cssPropertyName(property) {
+  return property.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
+}
+function cssEscape(value) {
+  if (typeof CSS !== "undefined" && CSS.escape) {
+    return CSS.escape(value);
+  }
+  return value.replace(/[^a-zA-Z0-9_-]/g, (character) => `\\${character}`);
+}
+
+// src/styles.ts
+var gapInspectorStyles = `
+.gi-root,
+.gi-svg {
+  --gi-chrome: #131313;
+  --gi-surface: #1a1a1a;
+  --gi-well: #0d0d0d;
+  --gi-text: #f7f7f7;
+  --gi-text-secondary: #c2c6cc;
+  --gi-text-muted: #8a9099;
+  --gi-hairline: rgba(255, 255, 255, 0.09);
+  --gi-hairline-soft: rgba(255, 255, 255, 0.05);
+  --gi-accent: #12a0f0;
+  --gi-danger: #f04438;
+  --gi-amber: #f5a623;
+  --gi-margin: #f5a623;
+  --gi-padding: #4ade80;
+  --gi-border-kind: #f87171;
+  --gi-scrollbar: #2dd4bf;
+  --gi-gap-kind: #a78bfa;
+  --gi-layout: #9ba1a8;
+  --gi-content: #12a0f0;
+  --gi-unknown: #ec4899;
+  --gi-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.06),
+    0 1px 2px rgba(0, 0, 0, 0.6),
+    0 32px 70px -16px rgba(0, 0, 0, 0.75);
+  --gi-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", sans-serif;
+  --gi-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
+}
+
+.gi-root {
+  color: var(--gi-text);
+  font-family: var(--gi-font);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-synthesis: none;
+  position: fixed;
+  inset: 0;
+  z-index: 2147483647;
+  pointer-events: none;
+}
+
+.gi-button {
+  align-items: center;
+  background: var(--gi-chrome);
+  border: 1px solid var(--gi-hairline);
+  border-radius: 10px;
+  bottom: 18px;
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.06),
+    0 1px 2px rgba(0, 0, 0, 0.6),
+    0 12px 32px -8px rgba(0, 0, 0, 0.6);
+  color: var(--gi-text);
+  cursor: pointer;
+  display: inline-flex;
+  font: inherit;
+  font-size: 12.5px;
+  font-weight: 500;
+  gap: 8px;
+  height: 34px;
+  overflow: clip;
+  padding: 0 14px;
+  pointer-events: auto;
+  position: fixed;
+  right: 18px;
+  touch-action: none;
+  transition: border-color 120ms ease, background-color 120ms ease;
+  white-space: nowrap;
+}
+
+.gi-button:hover {
+  background: #181818;
+  border-color: rgba(255, 255, 255, 0.16);
+}
+
+.gi-button-mark {
+  background: var(--gi-accent);
+  border-radius: 999px;
+  box-shadow: 0 0 8px rgba(18, 160, 240, 0.8);
+  display: inline-block;
+  height: 6px;
+  width: 6px;
+}
+
+.gi-panel {
+  background: var(--gi-chrome);
+  border-radius: 14px;
+  bottom: 18px;
+  box-shadow: var(--gi-shadow);
+  display: flex;
+  flex-direction: column;
+  max-height: min(560px, calc(100vh - 36px));
+  overflow: clip;
+  padding: 4px;
+  pointer-events: auto;
+  position: fixed;
+  right: 18px;
+  width: min(400px, calc(100vw - 36px));
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .gi-panel {
+    animation: gi-pop-in 170ms cubic-bezier(0.32, 0.72, 0, 1);
+  }
+}
+
+@keyframes gi-pop-in {
+  from {
+    opacity: 0;
+    transform: scale(0.96) translateY(6px);
+  }
+}
+
+.gi-body {
+  background: var(--gi-surface);
+  border: 1px solid var(--gi-hairline);
+  border-radius: 10px;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  overflow: clip;
+}
+
+.gi-header {
+  align-items: center;
+  border-bottom: 1px solid var(--gi-hairline-soft);
+  cursor: grab;
+  display: flex;
+  flex-shrink: 0;
+  justify-content: space-between;
+  padding: 11px 11px 11px 14px;
+  touch-action: none;
+  user-select: none;
+}
+
+.gi-header:active {
+  cursor: grabbing;
+}
+
+.gi-header .gi-close {
+  cursor: pointer;
+}
+
+.gi-title {
+  font-size: 13px;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+  line-height: 16px;
+}
+
+.gi-close {
+  align-items: center;
+  appearance: none;
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: 7px;
+  color: var(--gi-text-muted);
+  cursor: pointer;
+  display: inline-flex;
+  height: 24px;
+  justify-content: center;
+  padding: 0;
+  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
+  width: 24px;
+}
+
+.gi-close:hover {
+  background: rgba(255, 255, 255, 0.06);
+  border-color: var(--gi-hairline);
+  color: var(--gi-text-secondary);
+}
+
+.gi-content {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 14px;
+}
+
+.gi-content::-webkit-scrollbar {
+  width: 8px;
+}
+
+.gi-content::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.12);
+  background-clip: padding-box;
+  border: 2px solid transparent;
+  border-radius: 999px;
+}
+
+.gi-empty {
+  color: var(--gi-text-muted);
+  display: flex;
+  flex-direction: column;
+  font-size: 12.5px;
+  gap: 12px;
+  line-height: 1.55;
+}
+
+.gi-empty p {
+  margin: 0;
+}
+
+.gi-hint {
+  align-items: center;
+  color: var(--gi-text-muted);
+  display: flex;
+  font-size: 12px;
+  gap: 8px;
+}
+
+.gi-kbd {
+  align-items: center;
+  background: var(--gi-well);
+  border: 1px solid var(--gi-hairline);
+  border-radius: 5px;
+  color: var(--gi-text-secondary);
+  display: inline-flex;
+  flex-shrink: 0;
+  font-size: 11px;
+  height: 18px;
+  justify-content: center;
+  line-height: 1;
+  min-width: 18px;
+  padding: 0 4px;
+}
+
+.gi-footer {
+  align-items: center;
+  display: flex;
+  flex-shrink: 0;
+  gap: 8px;
+  justify-content: flex-end;
+  padding: 8px 6px 4px;
+}
+
+.gi-ghost,
+.gi-primary {
+  appearance: none;
+  border: 0;
+  border-radius: 8px;
+  cursor: pointer;
+  font: inherit;
+  font-size: 12.5px;
+  line-height: 16px;
+  padding: 7px 12px;
+  transition: background-color 120ms ease, filter 120ms ease;
+}
+
+.gi-ghost {
+  background: transparent;
+  color: var(--gi-text-secondary);
+  font-weight: 500;
+}
+
+.gi-ghost:hover {
+  background: rgba(255, 255, 255, 0.06);
+}
+
+.gi-primary {
+  background: var(--gi-accent);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.24),
+    0 1px 2px rgba(0, 0, 0, 0.45);
+  color: #ffffff;
+  font-weight: 600;
+}
+
+.gi-primary:hover {
+  filter: brightness(1.08);
+}
+
+.gi-primary[data-state="failed"] {
+  background: var(--gi-danger);
+}
+
+.gi-report-title {
+  align-items: baseline;
+  display: flex;
+  gap: 7px;
+}
+
+.gi-metric {
+  color: var(--gi-kind-color, var(--gi-text));
+  font-family: var(--gi-mono);
+  font-size: 18px;
+  font-variant-numeric: tabular-nums;
+  font-weight: 600;
+  letter-spacing: -0.02em;
+  line-height: 22px;
+}
+
+.gi-metric-axis {
+  color: var(--gi-text-muted);
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.gi-bar {
+  display: flex;
+  gap: 2px;
+  height: 14px;
+}
+
+.gi-bar-segment {
+  background: var(--gi-kind-color, var(--gi-layout));
+  background-clip: padding-box;
+  border-block: 4px solid transparent;
+  border-radius: 6px;
+  box-sizing: border-box;
+  flex-basis: 0;
+  min-width: 3px;
+}
+
+.gi-bar-segment:hover {
+  filter: brightness(1.25);
+}
+
+.gi-bar-unattributed {
+  background: repeating-linear-gradient(
+    135deg,
+    rgba(255, 255, 255, 0.28) 0 2px,
+    rgba(255, 255, 255, 0.08) 2px 5px
+  );
+}
+
+.gi-equation {
+  background: var(--gi-well);
+  border: 1px solid var(--gi-hairline);
+  border-radius: 9px;
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
+  color: var(--gi-text);
+  font-family: var(--gi-mono);
+  font-size: 11.5px;
+  font-variant-numeric: tabular-nums;
+  line-height: 1.6;
+  overflow-wrap: anywhere;
+  padding: 9px 11px;
+}
+
+.gi-caps {
+  color: var(--gi-text-muted);
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.gi-contribs {
+  display: flex;
+  flex-direction: column;
+}
+
+.gi-contribs .gi-caps {
+  margin-bottom: 2px;
+}
+
+.gi-contrib {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 9px 1px;
+}
+
+.gi-contrib + .gi-contrib {
+  border-top: 1px solid var(--gi-hairline-soft);
+}
+
+.gi-contrib:hover {
+  background: rgba(255, 255, 255, 0.03);
+}
+
+.gi-contrib-row {
+  align-items: center;
+  display: flex;
+  gap: 8px;
+}
+
+.gi-kind-label {
+  background: color-mix(in srgb, var(--gi-kind-color) 15%, transparent);
+  border-radius: 5px;
+  color: var(--gi-kind-color);
+  flex-shrink: 0;
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  line-height: 1;
+  padding: 4px 6px;
+  text-transform: uppercase;
+}
+
+.gi-contrib-prop {
+  color: var(--gi-text);
+  flex: 1;
+  font-size: 12px;
+  font-weight: 500;
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+.gi-contrib-css {
+  color: var(--gi-text-muted);
+  font-family: var(--gi-mono);
+  font-size: 11px;
+  font-weight: 400;
+}
+
+.gi-contrib-value {
+  color: var(--gi-text);
+  flex-shrink: 0;
+  font-family: var(--gi-mono);
+  font-size: 12px;
+  font-variant-numeric: tabular-nums;
+  font-weight: 600;
+  margin-left: auto;
+}
+
+.gi-contrib-note {
+  color: var(--gi-text-muted);
+  font-size: 11.5px;
+  line-height: 1.5;
+}
+
+.gi-warning {
+  background: color-mix(in srgb, var(--gi-amber) 9%, transparent);
+  border: 1px solid color-mix(in srgb, var(--gi-amber) 28%, transparent);
+  border-radius: 9px;
+  color: #f2c069;
+  font-size: 11.5px;
+  line-height: 1.55;
+  padding: 8px 11px;
+}
+
+.gi-hovercard {
+  background: var(--gi-surface);
+  border: 1px solid var(--gi-hairline);
+  border-radius: 10px;
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.06),
+    0 8px 24px rgba(0, 0, 0, 0.55);
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 10px 11px;
+  pointer-events: none;
+  position: fixed;
+  z-index: 10;
+}
+
+.gi-hovercard-row {
+  align-items: center;
+  display: flex;
+  gap: 8px;
+}
+
+.gi-hovercard-prop {
+  color: var(--gi-text);
+  flex: 1;
+  font-size: 12px;
+  font-weight: 500;
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+.gi-hovercard-value {
+  color: var(--gi-text);
+  flex-shrink: 0;
+  font-family: var(--gi-mono);
+  font-size: 12px;
+  font-variant-numeric: tabular-nums;
+  font-weight: 600;
+}
+
+.gi-hovercard-selector {
+  color: #dfe2e6;
+  font-family: var(--gi-mono);
+  font-size: 10.5px;
+  line-height: 1.5;
+  overflow-wrap: anywhere;
+}
+
+.gi-hovercard-meta {
+  color: var(--gi-text-muted);
+  font-family: var(--gi-mono);
+  font-size: 10.5px;
+}
+
+.gi-hovercard-note {
+  color: var(--gi-text-muted);
+  font-size: 11px;
+  line-height: 1.5;
+}
+
+.gi-canvas {
+  cursor: crosshair;
+  inset: 0;
+  pointer-events: auto;
+  position: fixed;
+  touch-action: none;
+}
+
+.gi-canvas[data-passthrough="true"] {
+  pointer-events: none;
+}
+
+.gi-svg {
+  left: 0;
+  overflow: visible;
+  pointer-events: none;
+  position: absolute;
+  top: 0;
+  z-index: 2147483646;
+}
+
+.gi-line {
+  stroke: var(--gi-accent);
+  stroke-dasharray: 5 5;
+  stroke-linecap: round;
+  stroke-width: 1.5;
+}
+
+.gi-gap-band {
+  fill: rgba(18, 160, 240, 0.16);
+  stroke: rgba(18, 160, 240, 0.8);
+  stroke-width: 1;
+}
+
+.gi-preview-gap {
+  fill: rgba(18, 160, 240, 0.1);
+  stroke-dasharray: 4 4;
+}
+
+.gi-element-box {
+  fill: rgba(18, 160, 240, 0.06);
+  stroke: rgba(18, 160, 240, 0.85);
+  stroke-width: 1;
+}
+
+.gi-preview-box {
+  fill: rgba(18, 160, 240, 0.03);
+  stroke-dasharray: 7 4;
+}
+
+.gi-contributor-box {
+  fill: color-mix(in srgb, var(--gi-kind-color) 38%, transparent);
+  stroke: color-mix(in srgb, var(--gi-kind-color) 85%, transparent);
+  stroke-width: 1;
+}
+
+.gi-preview-contributor {
+  opacity: 0.62;
+}
+
+.gi-series-box {
+  fill: color-mix(in srgb, var(--gi-kind-color) 5%, transparent);
+  opacity: 0.34;
+  stroke: var(--gi-kind-color);
+  stroke-dasharray: 2 6;
+  stroke-width: 1;
+}
+
+.gi-preview-series {
+  opacity: 0.2;
+}
+
+.gi-edge-marker {
+  fill: var(--gi-accent);
+  stroke: none;
+}
+
+.gi-preview-edge {
+  fill: rgba(18, 160, 240, 0.85);
+}
+
+.gi-from-edge {
+  opacity: 0.92;
+}
+
+.gi-to-edge {
+  opacity: 0.92;
+}
+
+.gi-kind-margin {
+  --gi-kind-color: var(--gi-margin);
+}
+
+.gi-kind-padding {
+  --gi-kind-color: var(--gi-padding);
+}
+
+.gi-kind-border {
+  --gi-kind-color: var(--gi-border-kind);
+}
+
+.gi-kind-scrollbar {
+  --gi-kind-color: var(--gi-scrollbar);
+}
+
+.gi-kind-gap {
+  --gi-kind-color: var(--gi-gap-kind);
+}
+
+.gi-kind-layout {
+  --gi-kind-color: var(--gi-layout);
+}
+
+.gi-kind-content {
+  --gi-kind-color: var(--gi-content);
+}
+
+.gi-kind-unknown {
+  --gi-kind-color: var(--gi-unknown);
+}
+
+.gi-hover-box {
+  fill: color-mix(in srgb, var(--gi-kind-color) 35%, transparent);
+  stroke: var(--gi-kind-color);
+  stroke-width: 1.5;
+}
+
+.gi-point-region {
+  fill: color-mix(in srgb, var(--gi-kind-color) 20%, transparent);
+  stroke: var(--gi-kind-color);
+  stroke-dasharray: 5 3;
+  stroke-width: 1.5;
+}
+
+.gi-point-dot {
+  fill: var(--gi-kind-color);
+  stroke: #131313;
+  stroke-width: 2;
+}
+`;
+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 panelHeightAnimRef = useRef(null);
+  const lastPanelHeightRef = useRef(null);
+  const closingSizeRef = useRef(null);
+  useLayoutEffect(() => {
+    const panel = panelRef.current;
+    if (!panel) {
+      panelHeightAnimRef.current = null;
+      lastPanelHeightRef.current = null;
+      return;
     }
-    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 }
+    const previousAnim = panelHeightAnimRef.current;
+    const inFlight = previousAnim && previousAnim.playState === "running" ? panel.getBoundingClientRect().height : null;
+    previousAnim?.cancel();
+    const natural = panel.offsetHeight;
+    const from = inFlight ?? lastPanelHeightRef.current;
+    lastPanelHeightRef.current = natural;
+    if (from === null || Math.abs(from - natural) < 1 || window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+      return;
+    }
+    panelHeightAnimRef.current = panel.animate(
+      [{ height: `${from}px` }, { height: `${natural}px` }],
+      { duration: 260, easing: "cubic-bezier(0.32, 0.72, 0, 1)" }
+    );
+  }, [open, measurement, pointInspection]);
+  useLayoutEffect(() => {
+    const launcher = launcherRef.current;
+    const fromSize = closingSizeRef.current;
+    closingSizeRef.current = null;
+    if (open || !launcher || !fromSize || window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+      return;
+    }
+    launcher.animate(
+      [
+        { width: `${fromSize.width}px`, height: `${fromSize.height}px`, borderRadius: "14px" },
+        { width: `${launcher.offsetWidth}px`, height: `${launcher.offsetHeight}px`, borderRadius: "10px" }
+      ],
+      { duration: 240, easing: "cubic-bezier(0.32, 0.72, 0, 1)" }
+    );
+  }, [open]);
+  const activeAxis = drag ? inferAxis(drag.start, drag.end) : "horizontal";
+  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);
+  }
+  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);
+  }
+  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 /* @__PURE__ */ jsxs("div", { className: "gi-root", ref: rootRef, children: [
+      /* @__PURE__ */ jsx("style", { children: gapInspectorStyles }),
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          className: "gi-button",
+          type: "button",
+          ref: launcherRef,
+          style: panelPosition ? { left: panelPosition.x, top: panelPosition.y, right: "auto", bottom: "auto" } : void 0,
+          onPointerDown: (event) => beginInspectorDrag(event, launcherRef.current),
+          onPointerMove: updateInspectorDrag,
+          onPointerUp: endInspectorDrag,
+          onPointerCancel: endInspectorDrag,
+          onClick: handleLauncherClick,
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "gi-button-mark", "aria-hidden": "true" }),
+            "Gap Inspector"
+          ]
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "gi-root", ref: rootRef, children: [
+    /* @__PURE__ */ jsx("style", { children: gapInspectorStyles }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "gi-canvas",
+        "data-passthrough": passThrough ? "true" : void 0,
+        onPointerDown: beginMeasure,
+        onPointerMove: updateMeasure,
+        onPointerUp: finishMeasure,
+        onPointerCancel: cancelMeasure
+      }
+    ),
+    typeof document === "undefined" ? null : createPortal(
+      /* @__PURE__ */ jsx(
+        MeasurementOverlay,
+        {
+          drag,
+          axis: activeAxis,
+          measurement,
+          pointInspection,
+          preview,
+          hover
+        }
+      ),
+      document.body
+    ),
+    /* @__PURE__ */ jsxs(
+      "section",
+      {
+        className: "gi-panel",
+        "aria-label": "Gap Inspector",
+        ref: panelRef,
+        style: panelPosition ? { left: panelPosition.x, top: panelPosition.y, right: "auto", bottom: "auto" } : void 0,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "gi-body", children: [
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: "gi-header",
+                onPointerDown: (event) => beginInspectorDrag(event, panelRef.current),
+                onPointerMove: updateInspectorDrag,
+                onPointerUp: endInspectorDrag,
+                onPointerCancel: endInspectorDrag,
+                children: [
+                  /* @__PURE__ */ jsx("div", { className: "gi-title", children: "Gap Inspector" }),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      className: "gi-close",
+                      type: "button",
+                      "aria-label": "Close Gap Inspector",
+                      onClick: () => {
+                        const panel = panelRef.current;
+                        if (panel) {
+                          closingSizeRef.current = { width: panel.offsetWidth, height: panel.offsetHeight };
+                        }
+                        setOpen(false);
+                      },
+                      children: /* @__PURE__ */ jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M3 3l6 6M9 3l-6 6", stroke: "currentColor", strokeWidth: "1.4", strokeLinecap: "round" }) })
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { className: "gi-content", children: measurement ? /* @__PURE__ */ jsx(Report, { measurement, hover, onHover: setHover }) : pointInspection ? /* @__PURE__ */ jsx(PointReport, { inspection: pointInspection }) : /* @__PURE__ */ jsxs("div", { className: "gi-empty", children: [
+              /* @__PURE__ */ 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." }),
+              /* @__PURE__ */ jsxs("div", { className: "gi-hint", children: [
+                /* @__PURE__ */ jsx("span", { className: "gi-kbd", children: "\u2325" }),
+                /* @__PURE__ */ jsx("span", { children: "Hold Alt to interact with the page underneath." })
+              ] })
+            ] }) })
+          ] }),
+          measurement || pointInspection ? /* @__PURE__ */ jsxs("div", { className: "gi-footer", children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                className: "gi-ghost",
+                type: "button",
+                onClick: () => {
+                  setMeasurement(null);
+                  setPointInspection(null);
+                },
+                children: "Clear"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                className: "gi-primary",
+                "data-state": copyState,
+                type: "button",
+                onClick: copyMeasurement,
+                children: copyState === "copied" ? "Copied" : copyState === "failed" ? "Failed" : "Copy report"
+              }
+            )
+          ] }) : null
+        ]
+      }
+    )
+  ] });
+}
+function SpacingBar({
+  measurement,
+  onHover
+}) {
+  if (measurement.totalPx < 0.5) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "gi-bar", role: "img", "aria-label": measurement.equation, children: [
+    measurement.contributions.map((contribution, index) => /* @__PURE__ */ 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 ? /* @__PURE__ */ 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()} \xB7 ${getComputedStyle(element).display} \xB7 ${roundPx2(rect.width)} \xD7 ${roundPx2(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 }
-    };
+  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] }));
+  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 /* @__PURE__ */ jsxs("div", { className: `gi-hovercard gi-kind-${info.kind}`, style, children: [
+    /* @__PURE__ */ jsxs("div", { className: "gi-hovercard-row", children: [
+      /* @__PURE__ */ jsx("span", { className: "gi-kind-label", children: info.kind }),
+      /* @__PURE__ */ jsxs("span", { className: "gi-hovercard-prop", children: [
+        info.property,
+        info.cssValue ? /* @__PURE__ */ jsxs("span", { className: "gi-contrib-css", children: [
+          " \xB7 ",
+          info.cssValue
+        ] }) : null
+      ] }),
+      /* @__PURE__ */ jsx("span", { className: "gi-hovercard-value", children: formatPx2(info.valuePx) })
+    ] }),
+    info.selector ? /* @__PURE__ */ jsx("div", { className: "gi-hovercard-selector", children: info.selector }) : null,
+    info.meta ? /* @__PURE__ */ jsx("div", { className: "gi-hovercard-meta", children: info.meta }) : null,
+    info.note ? /* @__PURE__ */ 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 Report({
+  measurement,
+  hover,
+  onHover
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: "gi-report-title", children: [
+      /* @__PURE__ */ jsx("span", { className: "gi-metric", children: formatPx2(measurement.totalPx) }),
+      " ",
+      /* @__PURE__ */ jsx("span", { className: "gi-metric-axis", children: measurement.axis })
+    ] }),
+    /* @__PURE__ */ jsx(SpacingBar, { measurement, onHover }),
+    measurement.contributions.length ? /* @__PURE__ */ jsxs("div", { className: "gi-contribs", children: [
+      /* @__PURE__ */ jsx("div", { className: "gi-caps", children: "Contributors" }),
+      measurement.contributions.map((contribution, index) => /* @__PURE__ */ 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: [
+            /* @__PURE__ */ jsxs("div", { className: "gi-contrib-row", children: [
+              /* @__PURE__ */ jsx("span", { className: "gi-kind-label", children: contribution.kind }),
+              /* @__PURE__ */ jsxs("span", { className: "gi-contrib-prop", children: [
+                contribution.property,
+                contribution.cssValue ? /* @__PURE__ */ jsxs("span", { className: "gi-contrib-css", children: [
+                  " \xB7 ",
+                  contribution.cssValue
+                ] }) : null
+              ] }),
+              /* @__PURE__ */ jsx("span", { className: "gi-contrib-value", children: formatPx2(contribution.valuePx) })
+            ] }),
+            contribution.note ? /* @__PURE__ */ jsx("div", { className: "gi-contrib-note", children: contribution.note }) : null
+          ]
+        },
+        `${contribution.selector}-${contribution.property}-${index}`
+      ))
+    ] }) : null,
+    measurement.warnings.map((warning) => /* @__PURE__ */ jsx("div", { className: "gi-warning", children: warning }, warning)),
+    hover ? /* @__PURE__ */ 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] }));
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { className: `gi-report-title gi-kind-${inspection.region}`, children: inspection.totalPx !== void 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("span", { className: "gi-metric", children: formatPx2(inspection.totalPx) }),
+      " ",
+      /* @__PURE__ */ jsx("span", { className: "gi-metric-axis", children: inspection.region })
+    ] }) : /* @__PURE__ */ jsx("span", { className: "gi-metric", children: inspection.region }) }),
+    /* @__PURE__ */ jsxs("div", { className: "gi-equation", children: [
+      inspection.property ?? inspection.region,
+      inspection.cssValue ? ` (${inspection.cssValue})` : ""
+    ] }),
+    inspection.note ? /* @__PURE__ */ 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 MeasurementOverlay({
+  drag,
+  axis,
+  measurement,
+  pointInspection,
+  preview,
+  hover
+}) {
+  const snapshot = useLiveOverlaySnapshot(measurement);
+  const pointSnapshot = useLivePointSnapshot(pointInspection);
+  return /* @__PURE__ */ jsxs("svg", { className: "gi-svg", width: "100%", height: "100%", "aria-hidden": "true", children: [
+    measurement && snapshot && !drag ? /* @__PURE__ */ jsx(MeasurementRects, { measurement, snapshot, variant: "committed", hover }) : null,
+    pointInspection && pointSnapshot && !drag ? /* @__PURE__ */ jsx(PointInspectionRects, { inspection: pointInspection, snapshot: pointSnapshot }) : null,
+    drag && preview ? /* @__PURE__ */ jsx(
+      MeasurementRects,
+      {
+        measurement: preview.measurement,
+        snapshot: preview.snapshot,
+        variant: "preview",
+        line: lineFromDrag(preview.measurement.axis, drag)
+      }
+    ) : null,
+    drag ? /* @__PURE__ */ jsx(DragLine, { drag, 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).
+  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 /* @__PURE__ */ jsx("line", { className: "gi-line", x1, y1, x2, 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 /* @__PURE__ */ jsxs(Fragment, { children: [
+    snapshot.series.map((series, index) => /* @__PURE__ */ jsx(
+      "rect",
+      {
+        className: `gi-series-box ${prefix}-series gi-kind-${series.kind}`,
+        ...svgRect(series.rect)
+      },
+      `${series.kind}-${index}`
+    )),
+    /* @__PURE__ */ jsx("rect", { className: `gi-element-box ${prefix}-box gi-from-box`, ...svgRect(from) }),
+    /* @__PURE__ */ jsx("rect", { className: `gi-element-box ${prefix}-box gi-to-box`, ...svgRect(to) }),
+    band ? /* @__PURE__ */ jsx("rect", { className: `gi-gap-band ${prefix}-gap`, ...svgRect(band) }) : null,
+    strips.map(
+      (strip, index) => strip ? /* @__PURE__ */ jsx(
+        "rect",
+        {
+          className: `gi-contributor-box ${prefix}-contributor gi-kind-${measurement.contributions[index].kind}`,
+          ...svgRect(strip)
+        },
+        `${measurement.contributions[index].kind}-${index}`
+      ) : null
+    ),
+    hover && hoverRect ? /* @__PURE__ */ jsx("rect", { className: `gi-hover-box gi-kind-${hover.kind}`, ...svgRect(hoverRect) }) : null,
+    /* @__PURE__ */ jsx("rect", { className: `gi-edge-marker ${prefix}-edge gi-from-edge`, ...svgRect(fromEdge) }),
+    /* @__PURE__ */ jsx("rect", { className: `gi-edge-marker ${prefix}-edge gi-to-edge`, ...svgRect(toEdge) })
+  ] });
+}
+var GAP_BAND_THICKNESS = 12;
 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;
+  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
-        };
-    }
+  if (axis === "horizontal") {
     return {
-        left: perp - thickness / 2,
-        right: perp + thickness / 2,
-        top: start,
-        bottom: end,
-        width: thickness,
-        height: end - start
+      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).
+  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 };
+}
 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
-        };
+  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 };
+  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 PointInspectionRects({
+  inspection,
+  snapshot
+}) {
+  const kindClass = pointKindClass(inspection.region);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    snapshot.from ? /* @__PURE__ */ jsx("rect", { className: "gi-element-box gi-committed-box", ...svgRect(snapshot.from) }) : null,
+    snapshot.to ? /* @__PURE__ */ jsx("rect", { className: "gi-element-box gi-committed-box", ...svgRect(snapshot.to) }) : null,
+    snapshot.element ? /* @__PURE__ */ jsx("rect", { className: "gi-element-box gi-committed-box", ...svgRect(snapshot.element) }) : null,
+    snapshot.rect ? /* @__PURE__ */ jsx("rect", { className: `gi-point-region ${kindClass}`, ...svgRect(snapshot.rect) }) : null,
+    /* @__PURE__ */ jsx("circle", { className: `gi-point-dot ${kindClass}`, cx: inspection.point.x, cy: inspection.point.y, r: 4 })
+  ] });
 }
 function useLivePointSnapshot(inspection) {
-    return useLiveSnapshot(inspection, buildPointSnapshot);
+  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 };
+  const rect = inspection.rect;
+  const element = inspection.element ? liveRect(inspection.element) ?? void 0 : void 0;
+  const from = inspection.from ? liveRect(inspection.from) ?? void 0 : void 0;
+  const to = inspection.to ? liveRect(inspection.to) ?? void 0 : void 0;
+  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);
+  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;
+  const [snapshot, setSnapshot] = useState(null);
+  useEffect(() => {
+    if (!input) {
+      setSnapshot(null);
+      return;
+    }
+    let frame = 0;
+    let lastKey = null;
+    const recompute = () => {
+      frame = 0;
+      const nextSnapshot = build(input);
+      if (!nextSnapshot) {
+        if (lastKey !== "") {
+          lastKey = "";
+          setSnapshot(null);
         }
-        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;
+        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 from = liveRect(measurement.from);
+  const to = liveRect(measurement.to);
+  if (!from || !to) {
+    return null;
+  }
+  const occupiedKeys = /* @__PURE__ */ 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;
+var SERIES_SCAN_LIMIT = 80;
+var 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;
-            }
-        }
+  const rects = [];
+  const seen = /* @__PURE__ */ new Set();
+  for (const contribution of measurement.contributions) {
+    const element = liveElement(contribution.element);
+    if (!element) {
+      continue;
     }
-    return rects;
+    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 [];
+  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 parent = element.parentElement;
-    const cssProperty = normalizeCssProperty(property);
-    if (!parent || !cssProperty) {
-        return [];
+    const candidateValue = normalizeCssValue(getComputedStyle(candidate).getPropertyValue(cssProperty));
+    if (candidateValue !== expectedValue) {
+      continue;
     }
-    const style = getComputedStyle(element);
-    const expectedValue = normalizeCssValue(cssValue ?? style.getPropertyValue(cssProperty));
-    if (!expectedValue) {
-        return [];
+    const rect = visibleRectForElement(candidate);
+    if (!rect || occupiedKeys.has(rectKey(rect))) {
+      continue;
     }
-    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;
-        }
+    rects.push({ kind, rect });
+    if (rects.length >= SERIES_RENDER_LIMIT) {
+      break;
     }
-    return rects;
+  }
+  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;
-        }
+  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 });
     }
-    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;
-        }
+    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;
     }
-    return rects;
+    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);
+  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;
+  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;
+  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(":");
+  return [
+    element.tagName.toLowerCase(),
+    Array.from(element.classList).sort().join(".")
+  ].join(":");
 }
 function axisStart(axis, rect) {
-    return axis === "horizontal" ? rect.left : rect.top;
+  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;
+  if (axis === "horizontal") {
+    const left2 = before.right;
+    const right2 = after.left;
+    const top2 = Math.max(before.top, after.top);
+    const bottom2 = Math.min(before.bottom, after.bottom);
+    return right2 > left2 && bottom2 > top2 ? { left: left2, right: right2, top: top2, bottom: bottom2, width: roundPx2(right2 - left2), height: roundPx2(bottom2 - top2) } : 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: roundPx2(right - left), height: roundPx2(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;
+  if (info.element?.isConnected) {
+    return info.element;
+  }
+  const resolved = resolveSelector(info.selector);
+  info.element = resolved ?? void 0;
+  return resolved;
 }
 function liveRect(info) {
-    const element = liveElement(info);
-    if (!element) {
-        return null;
-    }
-    return visibleRectForElement(element);
+  const element = liveElement(info);
+  if (!element) {
+    return null;
+  }
+  return visibleRectForElement(element);
 }
 function visibleRectForElement(element) {
-    let rect = rectFromDomRect(element.getBoundingClientRect());
+  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;
-    }
-    for (const ancestor of scrollAncestors(element)) {
-        rect = intersectRects(rect, rectFromDomRect(ancestor.getBoundingClientRect()));
-        if (rect.width <= 0 || rect.height <= 0) {
-            return null;
-        }
+      return null;
     }
-    return offsetRect(rect, window.scrollX, window.scrollY);
+  }
+  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
-    };
+  return {
+    top: roundPx2(rect.top + dy),
+    right: roundPx2(rect.right + dx),
+    bottom: roundPx2(rect.bottom + dy),
+    left: roundPx2(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)
-    };
+  return {
+    top: roundPx2(rect.top),
+    right: roundPx2(rect.right),
+    bottom: roundPx2(rect.bottom),
+    left: roundPx2(rect.left),
+    width: roundPx2(rect.width),
+    height: roundPx2(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;
+  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);
     }
-    return ancestors;
+    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))
-    };
+  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: roundPx2(top),
+    right: roundPx2(right),
+    bottom: roundPx2(bottom),
+    left: roundPx2(left),
+    width: roundPx2(Math.max(0, right - left)),
+    height: roundPx2(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";
-    }
+  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(":");
+  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;
+  const thickness = 3;
+  if (axis === "horizontal") {
+    const left = side === "from" ? rect.right - thickness : rect.left;
     return {
-        left: rect.left,
-        right: rect.right,
-        top,
-        bottom: top + thickness,
-        width: rect.width,
-        height: thickness
+      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;
+  const thickness = 3;
+  if (axis === "horizontal") {
+    const edge2 = side === "before" ? role === "container" ? rect.left : rect.left : role === "container" ? rect.right - thickness : rect.right - thickness;
     return {
-        left: rect.left,
-        right: rect.right,
-        top: edge,
-        bottom: edge + thickness,
-        width: rect.width,
-        height: thickness
+      left: edge2,
+      right: edge2 + 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
-    };
+  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"));
+  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))
-    };
+  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
-    };
+  return {
+    x: event.clientX,
+    y: event.clientY
+  };
 }
 function toDocumentPoint(point) {
-    return {
-        x: point.x + window.scrollX,
-        y: point.y + window.scrollY
-    };
+  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
-    };
+  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);
+  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
-    };
+  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 formatPx2(value) {
+  const rounded = roundPx2(value);
+  return `${Number.isInteger(rounded) ? rounded : rounded.toFixed(1)}px`;
 }
-function roundPx(value) {
-    return Math.round(value * 100) / 100;
+function roundPx2(value) {
+  const nearest = Math.round(value);
+  if (Math.abs(value - nearest) < 0.15) {
+    return nearest;
+  }
+  return Math.round(value * 10) / 10;
 }
-export { inferAxis, measureGap };
+
+export { GapInspector, inferAxis, measureGap };