@jitsusama/agentic-harness.core 0.1.0

package/dist/web/element/box.d.ts

@@ -0,0 +1,53 @@
+/**
+ * Where an element is and how big it is.
+ *
+ * A capture reports each box as a quad: four corners running
+ * clockwise from the top left. That survives rotation, which a
+ * rectangle cannot, so the conversion here keeps the extent
+ * rather than pretending a transformed element is axis-aligned.
+ */
+/** An axis-aligned box. */
+export interface Rect {
+    readonly x: number;
+    readonly y: number;
+    readonly width: number;
+    readonly height: number;
+}
+/** Four corners, clockwise from the top left. */
+export type Quad = readonly number[];
+/** A box model as the capture reported it. */
+export interface RawBoxModel {
+    readonly content: Quad;
+    readonly padding: Quad;
+    readonly border: Quad;
+    readonly margin: Quad;
+    readonly width: number;
+    readonly height: number;
+}
+/** The four boxes of an element. */
+export interface BoxModel {
+    readonly content: Rect;
+    readonly padding: Rect;
+    readonly border: Rect;
+    readonly margin: Rect;
+    readonly width: number;
+    readonly height: number;
+}
+/** Read a capture's quads as boxes. */
+export declare function normalizeBoxModel(raw: RawBoxModel): BoxModel;
+/** The middle of a box. */
+export declare function centreOf(rect: Rect): {
+    readonly x: number;
+    readonly y: number;
+};
+/**
+ * The four corners of a box, pulled inside its edge.
+ *
+ * A hit test exactly on a boundary can land on the neighbour,
+ * so the points sit just inside. A box too small to inset
+ * collapses to its centre rather than turning inside out.
+ */
+export declare function cornersOf(rect: Rect, inset?: number): readonly {
+    readonly x: number;
+    readonly y: number;
+}[];

package/dist/web/element/box.js

@@ -0,0 +1,58 @@
+/**
+ * Where an element is and how big it is.
+ *
+ * A capture reports each box as a quad: four corners running
+ * clockwise from the top left. That survives rotation, which a
+ * rectangle cannot, so the conversion here keeps the extent
+ * rather than pretending a transformed element is axis-aligned.
+ */
+/** Read a capture's quads as boxes. */
+export function normalizeBoxModel(raw) {
+    return {
+        content: rectOf(raw.content),
+        padding: rectOf(raw.padding),
+        border: rectOf(raw.border),
+        margin: rectOf(raw.margin),
+        width: raw.width,
+        height: raw.height,
+    };
+}
+/**
+ * The extent of a quad.
+ *
+ * For an untransformed element this is the quad itself. For a
+ * rotated one it is the area the element covers, which is what
+ * a question about position and size is really asking.
+ */
+function rectOf(quad) {
+    const xs = quad.filter((_, index) => index % 2 === 0);
+    const ys = quad.filter((_, index) => index % 2 === 1);
+    const x = Math.min(...xs);
+    const y = Math.min(...ys);
+    return { x, y, width: Math.max(...xs) - x, height: Math.max(...ys) - y };
+}
+/** The middle of a box. */
+export function centreOf(rect) {
+    return { x: rect.x + rect.width / 2, y: rect.y + rect.height / 2 };
+}
+/**
+ * The four corners of a box, pulled inside its edge.
+ *
+ * A hit test exactly on a boundary can land on the neighbour,
+ * so the points sit just inside. A box too small to inset
+ * collapses to its centre rather than turning inside out.
+ */
+export function cornersOf(rect, inset = 1) {
+    const dx = Math.min(inset, rect.width / 2);
+    const dy = Math.min(inset, rect.height / 2);
+    const left = rect.x + dx;
+    const right = rect.x + rect.width - dx;
+    const top = rect.y + dy;
+    const bottom = rect.y + rect.height - dy;
+    return [
+        { x: left, y: top },
+        { x: right, y: top },
+        { x: right, y: bottom },
+        { x: left, y: bottom },
+    ];
+}

package/dist/web/element/hover.d.ts

@@ -0,0 +1,75 @@
+/**
+ * What the page does on hover, and whether the keyboard gets it too.
+ *
+ * A hover style is invisible to any static reading, and it is where
+ * a particular accessibility fault hides: a control whose only cue
+ * is a hover treatment tells a person using a keyboard nothing at
+ * all. Answering that needs both halves. The stylesheets say which
+ * elements might hover, which is cheap; only holding the state and
+ * reading the computed style says what actually happens, because a
+ * hover rule the cascade beat is a rule that does nothing.
+ *
+ * So the scan below is a candidate filter and never a finding. The
+ * declared rule proposes; the computed style decides.
+ *
+ * Reading the page's own stylesheets is the one thing here that
+ * runs inside the page, because `cssRules` is the only account of
+ * them and it belongs to the document.
+ */
+import type { StyleChange } from "./pseudo.js";
+/**
+ * How many candidates to measure before stopping.
+ *
+ * Measured at roughly 9ms per candidate for a forced reading of two
+ * states, so this is about half a second. A presentation default: a
+ * caller who wants the whole page can say so.
+ */
+export declare const MAX_HOVER_CANDIDATES = 60;
+/** What the page's stylesheets say might hover. */
+export interface HoverScan {
+    /** Base selectors, with the :hover part removed. */
+    readonly selectors: readonly string[];
+    /** Stylesheets whose rules the document refused to hand over. */
+    readonly unreadableSheets: number;
+}
+/** One element, measured in both states. */
+export interface HoverMeasurement {
+    readonly element: string;
+    readonly hover: readonly StyleChange[];
+    readonly focus: readonly StyleChange[];
+}
+/** Elements sharing one treatment. */
+export interface HoverGroup {
+    readonly hover: readonly StyleChange[];
+    readonly focus: readonly StyleChange[];
+    readonly elements: readonly string[];
+}
+/** What the page does on hover. */
+export interface HoverReport {
+    /** How many elements were measured. */
+    readonly candidates: number;
+    /** Treatments that do something, commonest first. */
+    readonly groups: readonly HoverGroup[];
+    /** Treatments hover realizes and focus does not. */
+    readonly pointerOnly: readonly HoverGroup[];
+    /** Candidates whose hover rule realizes nothing. */
+    readonly inert: readonly string[];
+    readonly unreadableSheets: number;
+}
+/**
+ * Find selectors carrying a :hover, in the page.
+ *
+ * Ships as a source string because it declares helpers. Two traps
+ * are handled here rather than discovered later. A cross-origin
+ * sheet throws on `cssRules` and is counted rather than skipped
+ * silently. And CSS nesting gave every style rule a `cssRules` of
+ * its own, empty and therefore truthy, so recursion has to test
+ * the length: a walk that trusted truthiness descended into every
+ * rule and read no selector at all, which reported a page full of
+ * hover styles as having none.
+ */
+export declare const HOVER_SCAN = "(() => {\n  const found = [];\n  let unreadableSheets = 0;\n  const walk = (list) => {\n    for (const rule of list) {\n      const selector = rule.selectorText;\n      if (typeof selector === \"string\") {\n        for (const part of selector.split(\",\")) {\n          if (/:hover\\b/.test(part)) {\n            const base = part.replace(/:hover\\b/g, \"\").trim();\n            if (base) found.push(base);\n          }\n        }\n      }\n      if (rule.cssRules && rule.cssRules.length > 0) walk(rule.cssRules);\n    }\n  };\n  for (const sheet of document.styleSheets) {\n    let rules;\n    try { rules = sheet.cssRules } catch { unreadableSheets += 1; continue }\n    walk(rules);\n  }\n  return JSON.stringify({ selectors: [...new Set(found)], unreadableSheets });\n})()";
+/** Fold measured candidates into what the page does on hover. */
+export declare function foldHover(measurements: readonly HoverMeasurement[], unreadableSheets: number): HoverReport;
+/** Report what the page does on hover. */
+export declare function renderHover(report: HoverReport): string;

package/dist/web/element/hover.js

@@ -0,0 +1,172 @@
+/**
+ * What the page does on hover, and whether the keyboard gets it too.
+ *
+ * A hover style is invisible to any static reading, and it is where
+ * a particular accessibility fault hides: a control whose only cue
+ * is a hover treatment tells a person using a keyboard nothing at
+ * all. Answering that needs both halves. The stylesheets say which
+ * elements might hover, which is cheap; only holding the state and
+ * reading the computed style says what actually happens, because a
+ * hover rule the cascade beat is a rule that does nothing.
+ *
+ * So the scan below is a candidate filter and never a finding. The
+ * declared rule proposes; the computed style decides.
+ *
+ * Reading the page's own stylesheets is the one thing here that
+ * runs inside the page, because `cssRules` is the only account of
+ * them and it belongs to the document.
+ */
+/**
+ * How many candidates to measure before stopping.
+ *
+ * Measured at roughly 9ms per candidate for a forced reading of two
+ * states, so this is about half a second. A presentation default: a
+ * caller who wants the whole page can say so.
+ */
+export const MAX_HOVER_CANDIDATES = 60;
+/** How many elements to name before a group is only counted. */
+const NAMED_PER_GROUP = 6;
+/**
+ * Find selectors carrying a :hover, in the page.
+ *
+ * Ships as a source string because it declares helpers. Two traps
+ * are handled here rather than discovered later. A cross-origin
+ * sheet throws on `cssRules` and is counted rather than skipped
+ * silently. And CSS nesting gave every style rule a `cssRules` of
+ * its own, empty and therefore truthy, so recursion has to test
+ * the length: a walk that trusted truthiness descended into every
+ * rule and read no selector at all, which reported a page full of
+ * hover styles as having none.
+ */
+export const HOVER_SCAN = `(() => {
+  const found = [];
+  let unreadableSheets = 0;
+  const walk = (list) => {
+    for (const rule of list) {
+      const selector = rule.selectorText;
+      if (typeof selector === "string") {
+        for (const part of selector.split(",")) {
+          if (/:hover\\b/.test(part)) {
+            const base = part.replace(/:hover\\b/g, "").trim();
+            if (base) found.push(base);
+          }
+        }
+      }
+      if (rule.cssRules && rule.cssRules.length > 0) walk(rule.cssRules);
+    }
+  };
+  for (const sheet of document.styleSheets) {
+    let rules;
+    try { rules = sheet.cssRules } catch { unreadableSheets += 1; continue }
+    walk(rules);
+  }
+  return JSON.stringify({ selectors: [...new Set(found)], unreadableSheets });
+})()`;
+/** A stable signature for one set of changes. */
+function signature(changes) {
+    return [...changes]
+        .map((change) => `${change.property}:${change.from}>${change.to}`)
+        .sort()
+        .join("|");
+}
+/** Fold measured candidates into what the page does on hover. */
+export function foldHover(measurements, unreadableSheets) {
+    const inert = [];
+    const grouped = new Map();
+    for (const measured of measurements) {
+        if (measured.hover.length === 0) {
+            // Declared and dead. Counting this as a treatment would credit
+            // the page with a cue nobody can see.
+            inert.push(measured.element);
+            continue;
+        }
+        const key = `${signature(measured.hover)}##${signature(measured.focus)}`;
+        const existing = grouped.get(key);
+        if (existing) {
+            grouped.set(key, {
+                ...existing,
+                elements: [...existing.elements, measured.element],
+            });
+            continue;
+        }
+        grouped.set(key, {
+            hover: measured.hover,
+            focus: measured.focus,
+            elements: [measured.element],
+        });
+    }
+    const groups = [...grouped.values()].sort((a, b) => b.elements.length - a.elements.length);
+    return {
+        candidates: measurements.length,
+        groups,
+        // Hover does something, focus does nothing. Not a verdict: a page
+        // may well put its focus ring on an ancestor or rely on the
+        // browser's own. It is the thing worth looking at.
+        pointerOnly: groups.filter((group) => group.focus.length === 0),
+        inert,
+        unreadableSheets,
+    };
+}
+/** One change, said the way a stylesheet would. */
+function describe(changes) {
+    return changes
+        .map((change) => `${change.property} ${change.from} to ${change.to}`)
+        .join(", ");
+}
+/** Name a group's elements without printing a wall of them. */
+function name(group) {
+    const shown = group.elements.slice(0, NAMED_PER_GROUP).join(", ");
+    const rest = group.elements.length - NAMED_PER_GROUP;
+    return rest > 0 ? `${shown} and ${rest} more` : shown;
+}
+/** Report what the page does on hover. */
+export function renderHover(report) {
+    const lines = [];
+    if (report.candidates === 0) {
+        lines.push("Nothing on this page has a hover style.");
+        if (report.unreadableSheets > 0)
+            lines.push(unreadable(report));
+        return lines.join("\n");
+    }
+    const many = report.candidates === 1 ? "element" : "elements";
+    lines.push(`${report.candidates} ${many} carry a hover rule, ` +
+        `${report.groups.length} distinct ${report.groups.length === 1 ? "treatment" : "treatments"}.`);
+    if (report.pointerOnly.length > 0) {
+        const affected = report.pointerOnly.reduce((total, group) => total + group.elements.length, 0);
+        lines.push("");
+        lines.push(`Hover is the only cue on ${affected} of them: the state ` +
+            "changes for a pointer and nothing changes on focus, so a " +
+            "person using a keyboard sees no equivalent. Worth checking " +
+            "whether the focus ring lives on an ancestor before calling " +
+            "it a fault.");
+        for (const group of report.pointerOnly) {
+            lines.push(`  ${name(group)}: ${describe(group.hover)}`);
+        }
+    }
+    const paired = report.groups.filter((group) => group.focus.length > 0);
+    if (paired.length > 0) {
+        lines.push("");
+        lines.push("Hover and focus both answer:");
+        for (const group of paired) {
+            lines.push(`  ${name(group)}: ${describe(group.hover)}`);
+        }
+    }
+    if (report.inert.length > 0) {
+        lines.push("");
+        const was = report.inert.length === 1 ? "element has" : "elements have";
+        lines.push(`${report.inert.length} ${was} a hover rule that changes ` +
+            "nothing, so the cascade beat it: " +
+            `${report.inert.slice(0, NAMED_PER_GROUP).join(", ")}.`);
+    }
+    if (report.unreadableSheets > 0) {
+        lines.push("");
+        lines.push(unreadable(report));
+    }
+    return lines.join("\n");
+}
+/** Say what was skipped, so the report is not read as complete. */
+function unreadable(report) {
+    const sheets = report.unreadableSheets === 1 ? "stylesheet" : "stylesheets";
+    return (`${report.unreadableSheets} ${sheets} could not be read, being ` +
+        "cross-origin, so any hover rule in them was never considered.");
+}

package/dist/web/element/index.d.ts

@@ -0,0 +1,17 @@
+/**
+ * The element domain: the truth about one element.
+ *
+ * Analysis here is capture-agnostic. Everything takes plain
+ * serializable data, so a box model read by CDP, by another
+ * driver or from a fixture is read the same way.
+ */
+export { type Actionability, type ActionabilityFacts, judgeActionability, sameBox, } from "./actionable.js";
+export { ANIMATIONS_PROBE, type Animation, normalizeAnimations, type RawAnimation, renderAnimations, } from "./animations.js";
+export { type BoxModel, centreOf, cornersOf, normalizeBoxModel, type Quad, type RawBoxModel, type Rect, } from "./box.js";
+export { foldHover, HOVER_SCAN, type HoverGroup, type HoverMeasurement, type HoverReport, type HoverScan, MAX_HOVER_CANDIDATES, renderHover, } from "./hover.js";
+export { ANCESTORS_PROBE, type DelegatedListeners, type Listener, normalizeListeners, type RawListener, renderListeners, } from "./listeners.js";
+export { type AxisRelation, type Measurement, measureBetween, renderMeasurement, } from "./measure.js";
+export { CONTENT_PROBE, HIDE_TEXT, OCCLUDER_PROBE, OWN_TEXT_PROBE, PAINTING_ELEMENT_PROBE, SELECT_TEXT_PROBE, } from "./probes.js";
+export { diffStyles, type PseudoState, type PseudoVariant, renderVariants, SETTLE_PROBE, type StyleChange, } from "./pseudo.js";
+export { renderBox, renderStyles, renderTrace, renderVisibility, } from "./view.js";
+export { judgeVisibility, type Viewport, type VisibilityFacts, type VisibilityVerdict, type Visible, } from "./visibility.js";

package/dist/web/element/index.js

@@ -0,0 +1,17 @@
+/**
+ * The element domain: the truth about one element.
+ *
+ * Analysis here is capture-agnostic. Everything takes plain
+ * serializable data, so a box model read by CDP, by another
+ * driver or from a fixture is read the same way.
+ */
+export { judgeActionability, sameBox, } from "./actionable.js";
+export { ANIMATIONS_PROBE, normalizeAnimations, renderAnimations, } from "./animations.js";
+export { centreOf, cornersOf, normalizeBoxModel, } from "./box.js";
+export { foldHover, HOVER_SCAN, MAX_HOVER_CANDIDATES, renderHover, } from "./hover.js";
+export { ANCESTORS_PROBE, normalizeListeners, renderListeners, } from "./listeners.js";
+export { measureBetween, renderMeasurement, } from "./measure.js";
+export { CONTENT_PROBE, HIDE_TEXT, OCCLUDER_PROBE, OWN_TEXT_PROBE, PAINTING_ELEMENT_PROBE, SELECT_TEXT_PROBE, } from "./probes.js";
+export { diffStyles, renderVariants, SETTLE_PROBE, } from "./pseudo.js";
+export { renderBox, renderStyles, renderTrace, renderVisibility, } from "./view.js";
+export { judgeVisibility, } from "./visibility.js";

package/dist/web/element/listeners.d.ts

@@ -0,0 +1,72 @@
+/**
+ * What is listening on an element.
+ *
+ * A control that looks dead and a control that is merely quiet
+ * are indistinguishable from the outside. The handlers attached
+ * to it say which, and the flags on them explain behaviour that
+ * otherwise looks like a bug: a passive listener cannot cancel
+ * the default, a capture listener runs before anything below,
+ * a once listener has already gone after the first click.
+ */
+/** A listener as the capture reported it. */
+export interface RawListener {
+    readonly type: string;
+    readonly useCapture?: boolean;
+    readonly passive?: boolean;
+    readonly once?: boolean;
+    readonly scriptId?: string;
+    readonly lineNumber?: number;
+    readonly columnNumber?: number;
+}
+/** A handler attached to an element. */
+export interface Listener {
+    readonly type: string;
+    readonly capture: boolean;
+    readonly passive: boolean;
+    readonly once: boolean;
+    readonly source?: {
+        readonly script: string;
+        readonly line: number;
+        readonly column?: number;
+    };
+}
+/** Read a capture's listeners. */
+export declare function normalizeListeners(raw: readonly RawListener[]): readonly Listener[];
+/**
+ * The ancestors an event from here would travel through.
+ *
+ * Runs with the element as its receiver, and walks to the top.
+ * Ordered from the nearest outwards, which is the order the
+ * event visits them in while it bubbles.
+ *
+ * Not capped at a depth. The document is the last hop and the
+ * commonest place of all to bind a delegated handler, so a cap
+ * would drop the very ancestor most worth reporting. A parent
+ * chain cannot cycle, and its length is the depth of the
+ * document.
+ *
+ * Page source rather than a function, for the reason given in
+ * the accessibility observer.
+ */
+export declare const ANCESTORS_PROBE = "function () {\n  var chain = [];\n  var node = this.parentNode || this.host;\n  while (node) {\n    chain.push(node);\n    node = node.parentNode || node.host;\n  }\n  return chain;\n}";
+/** Handlers on an ancestor, which events from here reach. */
+export interface DelegatedListeners {
+    /** The ancestor, as a reader would recognize it: `div#app`. */
+    readonly element: string;
+    readonly listeners: readonly Listener[];
+}
+/**
+ * List what is listening, with the flags that matter.
+ *
+ * Handlers on ancestors are named too, because an event that
+ * leaves this element still reaches them. A button whose click
+ * was handled by a delegate on the body reported that nothing
+ * was listening, which is true of the button and the opposite of
+ * the answer the reader came for: the click worked. Delegation
+ * is how most frameworks bind, so the element's own handlers are
+ * frequently the empty half of the story.
+ *
+ * Whose handler it is stays visible, since that decides which
+ * runs first and which file to go and edit.
+ */
+export declare function renderListeners(listeners: readonly Listener[], delegated?: readonly DelegatedListeners[]): string;

package/dist/web/element/listeners.js

@@ -0,0 +1,98 @@
+/**
+ * What is listening on an element.
+ *
+ * A control that looks dead and a control that is merely quiet
+ * are indistinguishable from the outside. The handlers attached
+ * to it say which, and the flags on them explain behaviour that
+ * otherwise looks like a bug: a passive listener cannot cancel
+ * the default, a capture listener runs before anything below,
+ * a once listener has already gone after the first click.
+ */
+/** Read a capture's listeners. */
+export function normalizeListeners(raw) {
+    return raw.map((listener) => {
+        const source = listener.scriptId !== undefined && listener.lineNumber !== undefined
+            ? {
+                script: listener.scriptId,
+                line: listener.lineNumber,
+                ...(listener.columnNumber === undefined
+                    ? {}
+                    : { column: listener.columnNumber }),
+            }
+            : undefined;
+        return {
+            type: listener.type,
+            capture: listener.useCapture === true,
+            passive: listener.passive === true,
+            once: listener.once === true,
+            ...(source === undefined ? {} : { source }),
+        };
+    });
+}
+/**
+ * The ancestors an event from here would travel through.
+ *
+ * Runs with the element as its receiver, and walks to the top.
+ * Ordered from the nearest outwards, which is the order the
+ * event visits them in while it bubbles.
+ *
+ * Not capped at a depth. The document is the last hop and the
+ * commonest place of all to bind a delegated handler, so a cap
+ * would drop the very ancestor most worth reporting. A parent
+ * chain cannot cycle, and its length is the depth of the
+ * document.
+ *
+ * Page source rather than a function, for the reason given in
+ * the accessibility observer.
+ */
+export const ANCESTORS_PROBE = `function () {
+  var chain = [];
+  var node = this.parentNode || this.host;
+  while (node) {
+    chain.push(node);
+    node = node.parentNode || node.host;
+  }
+  return chain;
+}`;
+/** One handler, with the flags that change what it does. */
+function describe(listener) {
+    const parts = [listener.type];
+    if (listener.passive)
+        parts.push("passive");
+    if (listener.capture)
+        parts.push("capture");
+    if (listener.once)
+        parts.push("once");
+    // Script line numbers are counted from zero on the wire
+    // and from one by every editor a person will open.
+    if (listener.source)
+        parts.push(`line ${listener.source.line + 1}`);
+    return parts.join("  ");
+}
+/**
+ * List what is listening, with the flags that matter.
+ *
+ * Handlers on ancestors are named too, because an event that
+ * leaves this element still reaches them. A button whose click
+ * was handled by a delegate on the body reported that nothing
+ * was listening, which is true of the button and the opposite of
+ * the answer the reader came for: the click worked. Delegation
+ * is how most frameworks bind, so the element's own handlers are
+ * frequently the empty half of the story.
+ *
+ * Whose handler it is stays visible, since that decides which
+ * runs first and which file to go and edit.
+ */
+export function renderListeners(listeners, delegated = []) {
+    const catching = delegated.filter((on) => on.listeners.length > 0);
+    if (listeners.length === 0 && catching.length === 0) {
+        return "Nothing is listening on this element.";
+    }
+    const lines = listeners.length === 0
+        ? ["Nothing is listening on this element itself."]
+        : listeners.map(describe);
+    for (const on of catching) {
+        lines.push(`  on ${on.element}, which events from here reach:`, ...on.listeners.map((listener) => `    ${describe(listener)}`));
+    }
+    return lines.join("\n");
+}

package/dist/web/element/measure.d.ts

@@ -0,0 +1,40 @@
+/**
+ * The space between two elements.
+ *
+ * Most of design review is one question asked over and over: is
+ * that gap 16 or 12. Every box needed to answer it was already
+ * being read; nothing subtracted them, so the answer came from
+ * squinting at a screenshot.
+ */
+import type { Rect } from "./box.js";
+/**
+ * How two boxes sit relative to each other on one axis.
+ *
+ * Three outcomes rather than a signed number. A negative gap
+ * reads as a small gap at a glance, and the repair for an overlap
+ * is nothing like the repair for a gap that is two pixels out.
+ * "spans" is the third because two boxes side by side share every
+ * row of pixels vertically: calling that a zero gap sends someone
+ * hunting for the margin that closed it.
+ */
+export interface AxisRelation {
+    readonly kind: "gap" | "overlap" | "spans";
+    /** How many pixels of gap or of overlap. Zero when spanning. */
+    readonly pixels: number;
+}
+/** How two elements sit relative to each other. */
+export interface Measurement {
+    readonly horizontal: AxisRelation;
+    readonly vertical: AxisRelation;
+    /** Edges or centres that line up, named as a designer names them. */
+    readonly aligned: readonly string[];
+    readonly sameSize: boolean;
+    readonly widthDelta: number;
+    readonly heightDelta: number;
+}
+/** Measure the space between two boxes. */
+export declare function measureBetween(a: Rect, b: Rect): Measurement;
+/**
+ * Say what was measured, gap first because that is what was asked.
+ */
+export declare function renderMeasurement(m: Measurement, nameA: string, nameB: string): string;