gap-inspector 0.2.0 → 0.2.1

package/dist/measurement.js

@@ -1,1214 +0,0 @@
-const 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"
-    }
-};
-export function inferAxis(start, end) {
-    return Math.abs(end.x - start.x) >= Math.abs(end.y - start.y)
-        ? "horizontal"
-        : "vertical";
-}
-export 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.`);
-        }
-    }
-    appendGeometryWarnings(warnings, [fromElement, toElement, fromBranch, toBranch, commonAncestor]);
-    // Contributions are assembled in geometric order along the axis: the space
-    // inside the from-side wrappers, then the space between the sibling branches,
-    // then the space inside the to-side wrappers.
-    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) : undefined,
-        contributions: visibleContributions,
-        warnings
-    };
-    const equation = buildEquation(measurement);
-    return {
-        ...measurement,
-        equation,
-        markdown: buildMarkdown({ ...measurement, equation, markdown: "" })
-    };
-}
-export 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;
-        }
-    }
-    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, markdown: "" })
-    };
-}
-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;
-        }
-        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;
-        }
-        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;
-}
-// Hit-testing that descends into open shadow roots: drill into the topmost
-// non-ignored hit while it hosts a shadow tree, then report deepest-tree-first.
-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;
-}
-const STRUCTURAL_ROOT_IDS = 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
-                };
-            }
-        }
-    }
-    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;
-            // One wrapper level, in geometric order along the axis. Walking "after"
-            // (from-side) the span reads margin -> residual -> padding -> scrollbar
-            // -> border; walking "before" (to-side) it is the mirror image.
-            const level = [];
-            pushContribution(level, "margin", marginProperty, margin, childStyle[marginProperty], current);
-            pushContribution(level, "layout", direction === "after" ? "inner inline-end space" : "inner inline-start space", residual, undefined, 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;
-    }
-    // "after" walks outward in axis direction; "before" walks outward against it,
-    // so its levels flatten in reverse to keep the whole list axis-ordered.
-    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.`
-            : undefined);
-    }
-    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, undefined, 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,
-        undefined,
-        container,
-        "Rendered internal space between the container edge and the selected child."
-    ];
-    // Geometric order along the axis: before-side reads container border ->
-    // padding -> residual -> child margin; after-side is the mirror image.
-    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 = 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 = 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 = 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 hasScrollableContent = element.scrollHeight > element.clientHeight;
-        if (!canScrollY || (!hasScrollableContent && overflowY !== "scroll")) {
-            return 0;
-        }
-        const borderLeft = positivePx(style.borderLeftWidth);
-        const borderRight = positivePx(style.borderRightWidth);
-        const gutter = Math.max(0, element.offsetWidth - element.clientWidth - borderLeft - borderRight);
-        const gutterIsOnMeasuredSide = (direction === "after" && directionStyle !== "rtl")
-            || (direction === "before" && directionStyle === "rtl");
-        return gutterIsOnMeasuredSide ? gutter : 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;
-    }
-}
-// Guaranteed unique by construction: a full nth-child path from the tree root.
-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(" > ");
-}
-// Resolves selectors produced by this tool, including the " >>> " shadow-root
-// separator, which document.querySelector cannot parse.
-export 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 element;
-}
-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 }) => perp >= rect[props.perpStart] - 1 && perp <= rect[props.perpEnd] + 1)
-        .filter(({ rect }) => !pointInRect(point, rect));
-    const before = candidates
-        .filter(({ rect }) => rect[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 }) => rect[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 !== undefined) {
-        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 > 8000 || !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);
-    // Snap subpixel rendering noise (7.992px at fractional DPRs/zoom) to the integer.
-    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}`);
-}