@variance-authority/tribunal 0.1.0

package/dist/ui/parted.js

@@ -0,0 +1,101 @@
+/**
+ * Where one change's renders stopped agreeing with each other.
+ *
+ * A change is approved once and lands many times. `Button` moved in seven
+ * renders and the page says so, which reads as one thing having happened seven
+ * times — and on this build it is two things. Two of those renders moved by
+ * 6,418 pixels into one shape and five moved by about 3,500 into another, so a
+ * reviewer pressing approve is signing off on two outcomes under one name and
+ * has been shown neither.
+ *
+ * The shape is already recorded: a region carries a fingerprint of the
+ * difference, so renders that moved *identically* share one and renders that
+ * absorbed the same edit differently do not. Grouping by it costs nothing and
+ * turns `7 renders · 2 shapes` — a count nobody can act on — into the two groups
+ * and what separates them.
+ *
+ * ## Not `partingOf`
+ *
+ * `@variance-authority/core`'s parting reads two documents and climbs to the
+ * hook cell that decided a difference. This never opens a document. It divides
+ * one component's renders by the digest of what happened to each, which is the
+ * same question — *where did these part* — asked at the only grain a review
+ * surface has, and answerable on data the build already carried.
+ *
+ * ## The shared name is a name, not a cause
+ *
+ * When every subject in a group extends one prefix and no other group's does,
+ * that prefix is printed. It is the inference `VariationRecord`'s `named`
+ * already makes — a subject whose name extends another's is that subject plus an
+ * axis — and it is correct exactly as often as the naming convention is kept. So
+ * it is printed as a label beside the group and never as a because: *these two
+ * are the `route/detail` renders*, not *`route/detail` caused this*.
+ *
+ * One shape is reported too. *Seven renders, one shape* is the answer that makes
+ * the divided case legible, and a section that appeared only on divergence would
+ * leave a reviewer unable to tell agreement from a panel that had not loaded.
+ */
+export function partedBy(origin) {
+    const groups = new Map();
+    const unshaped = [];
+    for (const each of origin.appearances) {
+        if (each.shape === undefined) {
+            unshaped.push(each.subject.subject);
+            continue;
+        }
+        groups.set(each.shape, [...(groups.get(each.shape) ?? []), each]);
+    }
+    const found = [...groups].map(([shape, members]) => {
+        const pixels = members.map((each) => each.pixels);
+        return {
+            shape,
+            renders: members.map((each) => each.subject.subject).sort(),
+            least: Math.min(...pixels),
+            most: Math.max(...pixels),
+        };
+    });
+    const shapes = found
+        .map((group) => {
+        const only = nameOf(group.renders, found.filter((other) => other.shape !== group.shape).flatMap((other) => other.renders));
+        return only === undefined ? group : { ...group, only };
+    })
+        .sort((left, right) => right.most - left.most || left.shape.localeCompare(right.shape));
+    return { shapes, unshaped: unshaped.sort() };
+}
+/** Boundaries a subject name is built from, so a prefix is cut at a joint. */
+const JOINTS = new Set(['/', '@', ':', '-', '.', '_']);
+/**
+ * The name these renders share, when no other group's renders share it.
+ *
+ * `undefined` for a single render, where the prefix would be the subject itself
+ * and printing it beside the subject says nothing twice.
+ *
+ * The common prefix is only a name when it ends where the renders do — at a
+ * joint, or at the end of one of them. `route/detail@1280` and
+ * `route/detail@1024` have `route/detail@1` in common and no such viewport
+ * exists; the name is `route/detail`, which is then shared with the other group
+ * and so is not printed at all.
+ */
+function nameOf(renders, others) {
+    if (renders.length < 2)
+        return undefined;
+    const [first = '', ...rest] = renders;
+    let cut = first.length;
+    for (const each of rest) {
+        let index = 0;
+        while (index < cut && index < each.length && each[index] === first[index])
+            index += 1;
+        cut = index;
+    }
+    if (!renders.every((each) => each.length === cut || JOINTS.has(each[cut] ?? ''))) {
+        while (cut > 0 && !JOINTS.has(first[cut - 1] ?? ''))
+            cut -= 1;
+    }
+    while (cut > 0 && JOINTS.has(first[cut - 1] ?? ''))
+        cut -= 1;
+    const shared = first.slice(0, cut);
+    if (shared === '')
+        return undefined;
+    return others.some((each) => each.startsWith(shared)) ? undefined : shared;
+}
+//# sourceMappingURL=parted.js.map

package/dist/ui/parted.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"parted.js","sourceRoot":"","sources":["../../src/ui/parted.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Where one change's renders stopped agreeing with each other.\n *\n * A change is approved once and lands many times. `Button` moved in seven\n * renders and the page says so, which reads as one thing having happened seven\n * times — and on this build it is two things. Two of those renders moved by\n * 6,418 pixels into one shape and five moved by about 3,500 into another, so a\n * reviewer pressing approve is signing off on two outcomes under one name and\n * has been shown neither.\n *\n * The shape is already recorded: a region carries a fingerprint of the\n * difference, so renders that moved *identically* share one and renders that\n * absorbed the same edit differently do not. Grouping by it costs nothing and\n * turns `7 renders · 2 shapes` — a count nobody can act on — into the two groups\n * and what separates them.\n *\n * ## Not `partingOf`\n *\n * `@variance-authority/core`'s parting reads two documents and climbs to the\n * hook cell that decided a difference. This never opens a document. It divides\n * one component's renders by the digest of what happened to each, which is the\n * same question — *where did these part* — asked at the only grain a review\n * surface has, and answerable on data the build already carried.\n *\n * ## The shared name is a name, not a cause\n *\n * When every subject in a group extends one prefix and no other group's does,\n * that prefix is printed. It is the inference `VariationRecord`'s `named`\n * already makes — a subject whose name extends another's is that subject plus an\n * axis — and it is correct exactly as often as the naming convention is kept. So\n * it is printed as a label beside the group and never as a because: *these two\n * are the `route/detail` renders*, not *`route/detail` caused this*.\n *\n * One shape is reported too. *Seven renders, one shape* is the answer that makes\n * the divided case legible, and a section that appeared only on divergence would\n * leave a reviewer unable to tell agreement from a panel that had not loaded.\n */\n\nimport type { Appearance, Origin } from './grouping.js';\n\n/** One group of renders that moved identically. */\nexport interface Shape {\n  /** The fingerprint they share. Not printed; it is an identity, not a finding. */\n  readonly shape: string;\n  /** Subjects in it, sorted. */\n  readonly renders: readonly string[];\n  readonly least: number;\n  readonly most: number;\n  /**\n   * The name every render here extends and no other group's does.\n   *\n   * Absent when the group has one render — the subject is already the coordinate\n   * — or when the names have nothing in common that is theirs alone.\n   */\n  readonly only?: string;\n}\n\n/** One change's renders, divided by what happened to each. */\nexport interface Parted {\n  readonly shapes: readonly Shape[];\n  /**\n   * Renders whose leading region recorded no fingerprint.\n   *\n   * Their own list, never a shape. Two renders that both recorded nothing have\n   * not been found to agree, and folding them together would report the\n   * identical difference twice about a pair nothing measured.\n   */\n  readonly unshaped: readonly string[];\n}\n\nexport function partedBy(origin: Origin): Parted {\n  const groups = new Map<string, Appearance[]>();\n  const unshaped: string[] = [];\n\n  for (const each of origin.appearances) {\n    if (each.shape === undefined) {\n      unshaped.push(each.subject.subject);\n      continue;\n    }\n    groups.set(each.shape, [...(groups.get(each.shape) ?? []), each]);\n  }\n\n  const found = [...groups].map(([shape, members]) => {\n    const pixels = members.map((each) => each.pixels);\n    return {\n      shape,\n      renders: members.map((each) => each.subject.subject).sort(),\n      least: Math.min(...pixels),\n      most: Math.max(...pixels),\n    };\n  });\n\n  const shapes = found\n    .map((group) => {\n      const only = nameOf(\n        group.renders,\n        found.filter((other) => other.shape !== group.shape).flatMap((other) => other.renders),\n      );\n      return only === undefined ? group : { ...group, only };\n    })\n    .sort((left, right) => right.most - left.most || left.shape.localeCompare(right.shape));\n\n  return { shapes, unshaped: unshaped.sort() };\n}\n\n/** Boundaries a subject name is built from, so a prefix is cut at a joint. */\nconst JOINTS = new Set(['/', '@', ':', '-', '.', '_']);\n\n/**\n * The name these renders share, when no other group's renders share it.\n *\n * `undefined` for a single render, where the prefix would be the subject itself\n * and printing it beside the subject says nothing twice.\n *\n * The common prefix is only a name when it ends where the renders do — at a\n * joint, or at the end of one of them. `route/detail@1280` and\n * `route/detail@1024` have `route/detail@1` in common and no such viewport\n * exists; the name is `route/detail`, which is then shared with the other group\n * and so is not printed at all.\n */\nfunction nameOf(renders: readonly string[], others: readonly string[]): string | undefined {\n  if (renders.length < 2) return undefined;\n\n  const [first = '', ...rest] = renders;\n  let cut = first.length;\n  for (const each of rest) {\n    let index = 0;\n    while (index < cut && index < each.length && each[index] === first[index]) index += 1;\n    cut = index;\n  }\n\n  if (!renders.every((each) => each.length === cut || JOINTS.has(each[cut] ?? ''))) {\n    while (cut > 0 && !JOINTS.has(first[cut - 1] ?? '')) cut -= 1;\n  }\n  while (cut > 0 && JOINTS.has(first[cut - 1] ?? '')) cut -= 1;\n  const shared = first.slice(0, cut);\n  if (shared === '') return undefined;\n\n  return others.some((each) => each.startsWith(shared)) ? undefined : shared;\n}\n"]}

package/dist/ui/rail.d.ts

@@ -0,0 +1,31 @@
+/**
+ * The rail: every subject worth a decision, grouped by verdict.
+ *
+ * Apart from [`review.tsx`](./review.tsx) because it is the one control the page
+ * is navigated by and it answers a question of its own — *which of these is worth
+ * opening* — before any render is fetched. The note under each name is the
+ * component the semantic tier blamed and the size of the difference, which is
+ * enough to decide without a round trip.
+ *
+ * What it does not carry is anything green. That is [`settled.tsx`](./settled.js)'s,
+ * and the split is the point: a rail that listed a subject an ignore had already
+ * decided would put it in a queue, under a header counting what awaits review.
+ */
+import type { ReactElement } from 'react';
+import type { SubjectView } from '../review-types.js';
+/**
+ * Every subject worth a decision, grouped by verdict and readable at a glance.
+ *
+ * The rail exists so that choosing what to look at costs a glance rather than a
+ * scroll: the note under each name is the component the tier blamed and the size
+ * of the difference, which is enough to decide whether this one needs opening at
+ * all. Sorted largest-first inside each group, for the same reason the docket is.
+ */
+export declare function SubjectRail({ subjects, causes, variations, selected, onSelect, }: {
+    readonly subjects: readonly SubjectView[];
+    readonly causes: number;
+    readonly variations: number;
+    readonly selected: string | null;
+    readonly onSelect: (subject: string | null) => void;
+}): ReactElement;
+//# sourceMappingURL=rail.d.ts.map

package/dist/ui/rail.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { causeOf } from './lead.js';
+import { briefly, count } from './text.js';
+/**
+ * Every subject worth a decision, grouped by verdict and readable at a glance.
+ *
+ * The rail exists so that choosing what to look at costs a glance rather than a
+ * scroll: the note under each name is the component the tier blamed and the size
+ * of the difference, which is enough to decide whether this one needs opening at
+ * all. Sorted largest-first inside each group, for the same reason the docket is.
+ */
+export function SubjectRail({ subjects, causes, variations, selected, onSelect, }) {
+    const groups = [...new Set(subjects.map((subject) => subject.verdict))];
+    return (_jsxs("div", { className: "va-rail-list va-scroll", children: [_jsx("button", { type: "button", className: selected === null ? 'va-rail-item va-current' : 'va-rail-item', onClick: () => onSelect(null), children: _jsxs("span", { className: "va-rail-body", children: [_jsx("span", { className: "va-rail-name", children: "The docket" }), _jsxs("span", { className: "va-rail-note", children: [count(causes, 'cause'), " \u00B7 ", count(variations, 'variation')] })] }) }), groups.map((verdict) => {
+                const rows = subjects
+                    .filter((each) => each.verdict === verdict)
+                    .sort((left, right) => right.changedPixels - left.changedPixels);
+                return (_jsxs("section", { children: [_jsxs("h2", { className: "va-rail-group", children: [verdict, _jsx("span", { className: "va-rail-count va-num", children: rows.length })] }), _jsx("ul", { children: rows.map((subject) => (_jsx("li", { children: _jsxs("button", { type: "button", className: subject.subject === selected ? 'va-rail-item va-current' : 'va-rail-item', onClick: () => onSelect(subject.subject), children: [_jsx("span", { className: `va-dot va-${subject.verdict}` }), _jsxs("span", { className: "va-rail-body", children: [_jsx("span", { className: "va-rail-name", children: subject.subject }), _jsxs("span", { className: "va-rail-note", children: [causeOf(subject) ?? 'no component named', subject.changedPixels > 0 ? ` · ${briefly(subject)}` : ''] })] }), subject.decision === null ? null : (_jsx("span", { className: `va-mark va-${subject.decision.decision}`, children: subject.decision.decision === 'approved' ? '✓' : '✗' }))] }) }, subject.subject))) })] }, verdict));
+            })] }));
+}
+//# sourceMappingURL=rail.js.map

package/dist/ui/rail.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rail.js","sourceRoot":"","sources":["../../src/ui/rail.tsx"],"names":[],"mappings":";AAgBA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,WAAW,CAAC;AAE3C;;;;;;;GAOG;AACH,MAAM,UAAU,WAAW,CAAC,EAC1B,QAAQ,EACR,MAAM,EACN,UAAU,EACV,QAAQ,EACR,QAAQ,GAOT;IACC,MAAM,MAAM,GAAG,CAAC,GAAG,IAAI,GAAG,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;IAExE,OAAO,CACL,eAAK,SAAS,EAAC,wBAAwB,aACrC,iBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,QAAQ,KAAK,IAAI,CAAC,CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC,cAAc,EACzE,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,YAE7B,gBAAM,SAAS,EAAC,cAAc,aAC5B,eAAM,SAAS,EAAC,cAAc,2BAAkB,EAChD,gBAAM,SAAS,EAAC,cAAc,aAC3B,KAAK,CAAC,MAAM,EAAE,OAAO,CAAC,cAAK,KAAK,CAAC,UAAU,EAAE,WAAW,CAAC,IACrD,IACF,GACA,EAER,MAAM,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,EAAE;gBACtB,MAAM,IAAI,GAAG,QAAQ;qBAClB,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,OAAO,KAAK,OAAO,CAAC;qBAC1C,IAAI,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC,CAAC;gBAEnE,OAAO,CACL,8BACE,cAAI,SAAS,EAAC,eAAe,aAC1B,OAAO,EACR,eAAM,SAAS,EAAC,sBAAsB,YAAE,IAAI,CAAC,MAAM,GAAQ,IACxD,EACL,uBACG,IAAI,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,CACrB,uBACE,kBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EACP,OAAO,CAAC,OAAO,KAAK,QAAQ,CAAC,CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC,cAAc,EAE3E,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,aAExC,eAAM,SAAS,EAAE,aAAa,OAAO,CAAC,OAAO,EAAE,GAAI,EACnD,gBAAM,SAAS,EAAC,cAAc,aAC5B,eAAM,SAAS,EAAC,cAAc,YAAE,OAAO,CAAC,OAAO,GAAQ,EACvD,gBAAM,SAAS,EAAC,cAAc,aAC3B,OAAO,CAAC,OAAO,CAAC,IAAI,oBAAoB,EACxC,OAAO,CAAC,aAAa,GAAG,CAAC,CAAC,CAAC,CAAC,MAAM,OAAO,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,IACrD,IACF,EACN,OAAO,CAAC,QAAQ,KAAK,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAClC,eAAM,SAAS,EAAE,cAAc,OAAO,CAAC,QAAQ,CAAC,QAAQ,EAAE,YACvD,OAAO,CAAC,QAAQ,CAAC,QAAQ,KAAK,UAAU,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,GAChD,CACR,IACM,IArBF,OAAO,CAAC,OAAO,CAsBnB,CACN,CAAC,GACC,KA/BO,OAAO,CAgCX,CACX,CAAC;YACJ,CAAC,CAAC,IACE,CACP,CAAC;AACJ,CAAC","sourcesContent":["/**\n * The rail: every subject worth a decision, grouped by verdict.\n *\n * Apart from [`review.tsx`](./review.tsx) because it is the one control the page\n * is navigated by and it answers a question of its own — *which of these is worth\n * opening* — before any render is fetched. The note under each name is the\n * component the semantic tier blamed and the size of the difference, which is\n * enough to decide without a round trip.\n *\n * What it does not carry is anything green. That is [`settled.tsx`](./settled.js)'s,\n * and the split is the point: a rail that listed a subject an ignore had already\n * decided would put it in a queue, under a header counting what awaits review.\n */\n\nimport type { ReactElement } from 'react';\nimport type { SubjectView } from '../review-types.js';\nimport { causeOf } from './lead.js';\nimport { briefly, count } from './text.js';\n\n/**\n * Every subject worth a decision, grouped by verdict and readable at a glance.\n *\n * The rail exists so that choosing what to look at costs a glance rather than a\n * scroll: the note under each name is the component the tier blamed and the size\n * of the difference, which is enough to decide whether this one needs opening at\n * all. Sorted largest-first inside each group, for the same reason the docket is.\n */\nexport function SubjectRail({\n  subjects,\n  causes,\n  variations,\n  selected,\n  onSelect,\n}: {\n  readonly subjects: readonly SubjectView[];\n  readonly causes: number;\n  readonly variations: number;\n  readonly selected: string | null;\n  readonly onSelect: (subject: string | null) => void;\n}): ReactElement {\n  const groups = [...new Set(subjects.map((subject) => subject.verdict))];\n\n  return (\n    <div className=\"va-rail-list va-scroll\">\n      <button\n        type=\"button\"\n        className={selected === null ? 'va-rail-item va-current' : 'va-rail-item'}\n        onClick={() => onSelect(null)}\n      >\n        <span className=\"va-rail-body\">\n          <span className=\"va-rail-name\">The docket</span>\n          <span className=\"va-rail-note\">\n            {count(causes, 'cause')} · {count(variations, 'variation')}\n          </span>\n        </span>\n      </button>\n\n      {groups.map((verdict) => {\n        const rows = subjects\n          .filter((each) => each.verdict === verdict)\n          .sort((left, right) => right.changedPixels - left.changedPixels);\n\n        return (\n          <section key={verdict}>\n            <h2 className=\"va-rail-group\">\n              {verdict}\n              <span className=\"va-rail-count va-num\">{rows.length}</span>\n            </h2>\n            <ul>\n              {rows.map((subject) => (\n                <li key={subject.subject}>\n                  <button\n                    type=\"button\"\n                    className={\n                      subject.subject === selected ? 'va-rail-item va-current' : 'va-rail-item'\n                    }\n                    onClick={() => onSelect(subject.subject)}\n                  >\n                    <span className={`va-dot va-${subject.verdict}`} />\n                    <span className=\"va-rail-body\">\n                      <span className=\"va-rail-name\">{subject.subject}</span>\n                      <span className=\"va-rail-note\">\n                        {causeOf(subject) ?? 'no component named'}\n                        {subject.changedPixels > 0 ? ` · ${briefly(subject)}` : ''}\n                      </span>\n                    </span>\n                    {subject.decision === null ? null : (\n                      <span className={`va-mark va-${subject.decision.decision}`}>\n                        {subject.decision.decision === 'approved' ? '✓' : '✗'}\n                      </span>\n                    )}\n                  </button>\n                </li>\n              ))}\n            </ul>\n          </section>\n        );\n      })}\n    </div>\n  );\n}\n"]}

package/dist/ui/reach.d.ts

@@ -0,0 +1,66 @@
+/**
+ * What the commit reaches, crossed against what the run saw.
+ *
+ * Every other panel on this page answers *what changed*. This one answers *what
+ * could have*, and the whole value is in the crossing: a verdict alone cannot say
+ * whether a green subject was supposed to be green, and a diff alone cannot say
+ * whether the file somebody edited paints anything at all.
+ *
+ * Four states come out of it, and two are findings no image comparison can reach:
+ *
+ * - **reached, and moved** — the expected case, and the trail names the file.
+ * - **reached, and still** — the commit reaches this subject and changed no pixel
+ *   in it. Every tool in this category is silent about a green subject, so an
+ *   author who believed they were changing this surface learns it here or not at
+ *   all.
+ * - **moved, unreached** — nothing in the commit arrives here and it moved anyway.
+ *   That is a flake, an input from outside the repository, or a hole in the scan,
+ *   and only the record separates them — so the record is read without waiting to
+ *   be asked.
+ * - **untouched, and still** — counted, never listed. On a narrowed run it reads
+ *   *untouched, not rendered* instead, because those subjects were ruled out
+ *   before any browser opened them and were never compared to anything.
+ *
+ * ## A refusal is drawn instead of the grid, not beside it
+ *
+ * A run can carry a diff it could not attribute: a changed file the graph does not
+ * hold, a diff with nothing in the graph at all, a diff arriving at no component.
+ * The store keeps that apart from an attribution that genuinely reached nothing,
+ * and so does this. An empty grid over a refusal reads as *this commit reaches
+ * none of your subjects*, which is a sentence somebody merges on.
+ */
+import { type ReactElement } from 'react';
+import type { BuildDetail, ReachView, SubjectView } from '../review-types.js';
+import type { ReviewClient } from './client.js';
+/**
+ * The four states, and the two counts that keep them honest.
+ *
+ * `unplaced` and `incomparable` exist so the four quadrants add up to the suite
+ * without any of them absorbing a subject nobody can classify. A baseline that
+ * recorded no component list cannot be put on either axis, and a subject that is
+ * new or that nothing could compare has no *moved* to speak of. Folding either
+ * into the quiet quadrant would make the one nobody reads the place uncertainty
+ * goes to die.
+ */
+export interface Crossing {
+    readonly reachedMoved: readonly SubjectView[];
+    readonly reachedStill: readonly SubjectView[];
+    readonly unreachedMoved: readonly SubjectView[];
+    readonly unreachedStill: number;
+    /**
+     * Out of reach and never rendered, because the run worked that out first.
+     *
+     * Apart from `unreachedStill` and never added to it. Those were opened and
+     * found identical; these were never opened at all, and a page that summed them
+     * would report a comparison for eighteen subjects no browser ever loaded.
+     */
+    readonly unreachedSkipped: number;
+    readonly unplaced: number;
+    readonly incomparable: number;
+}
+export declare function crossReach(subjects: readonly SubjectView[], reach: ReachView, notObserved?: BuildDetail['notObserved']): Crossing;
+export declare function ReachPanel({ client, build, }: {
+    readonly client: ReviewClient;
+    readonly build: BuildDetail;
+}): ReactElement | null;
+//# sourceMappingURL=reach.d.ts.map

package/dist/ui/reach.js

@@ -0,0 +1,185 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * What the commit reaches, crossed against what the run saw.
+ *
+ * Every other panel on this page answers *what changed*. This one answers *what
+ * could have*, and the whole value is in the crossing: a verdict alone cannot say
+ * whether a green subject was supposed to be green, and a diff alone cannot say
+ * whether the file somebody edited paints anything at all.
+ *
+ * Four states come out of it, and two are findings no image comparison can reach:
+ *
+ * - **reached, and moved** — the expected case, and the trail names the file.
+ * - **reached, and still** — the commit reaches this subject and changed no pixel
+ *   in it. Every tool in this category is silent about a green subject, so an
+ *   author who believed they were changing this surface learns it here or not at
+ *   all.
+ * - **moved, unreached** — nothing in the commit arrives here and it moved anyway.
+ *   That is a flake, an input from outside the repository, or a hole in the scan,
+ *   and only the record separates them — so the record is read without waiting to
+ *   be asked.
+ * - **untouched, and still** — counted, never listed. On a narrowed run it reads
+ *   *untouched, not rendered* instead, because those subjects were ruled out
+ *   before any browser opened them and were never compared to anything.
+ *
+ * ## A refusal is drawn instead of the grid, not beside it
+ *
+ * A run can carry a diff it could not attribute: a changed file the graph does not
+ * hold, a diff with nothing in the graph at all, a diff arriving at no component.
+ * The store keeps that apart from an attribution that genuinely reached nothing,
+ * and so does this. An empty grid over a refusal reads as *this commit reaches
+ * none of your subjects*, which is a sentence somebody merges on.
+ */
+import { useCallback, useEffect, useState } from 'react';
+import { StabilityLine } from './history.js';
+import { OutcomeMapView } from './outcome.js';
+import { briefly, count, number } from './text.js';
+export function crossReach(subjects, reach, notObserved = []) {
+    const placed = reach.subjects;
+    const reachedMoved = [];
+    const reachedStill = [];
+    const unreachedMoved = [];
+    let unreachedStill = 0;
+    let unplaced = 0;
+    let incomparable = 0;
+    for (const subject of subjects) {
+        const entry = placed?.[subject.subject];
+        if (entry === undefined) {
+            unplaced += 1;
+        }
+        else if (subject.verdict === 'changed') {
+            (entry.reached ? reachedMoved : unreachedMoved).push(subject);
+        }
+        else if (subject.verdict === 'unchanged') {
+            // `changed` and `unchanged` are the only verdicts describing a pair this
+            // run actually compared. A new subject has no baseline to have moved from,
+            // and an incomparable one is a comparison that did not happen — neither
+            // belongs on an axis called moved.
+            if (entry.reached)
+                reachedStill.push(subject);
+            else
+                unreachedStill += 1;
+        }
+        else {
+            incomparable += 1;
+        }
+    }
+    return {
+        reachedMoved,
+        reachedStill,
+        unreachedMoved,
+        unreachedStill,
+        unreachedSkipped: notObserved.filter((entry) => entry.kind === 'unreached').length,
+        unplaced,
+        incomparable,
+    };
+}
+/** How many unexplained subjects read their own record without being asked. */
+const ASKED = 5;
+/** How many trails are drawn before the rest are counted. */
+const TRAILS = 8;
+export function ReachPanel({ client, build, }) {
+    const reach = build.reach;
+    if (reach === null)
+        return null;
+    return (_jsxs("section", { className: "va-card va-reach", children: [_jsx("h2", { children: "What this commit reaches" }), _jsxs("p", { className: "va-subtitle", children: [count(reach.changed.length, 'file'), " changed against ", _jsx("code", { children: reach.against }), ". The import graph carries them to ", count(reach.components.length, 'component'), "; the baselines say which subjects render those."] }), _jsx(OutcomeMapView, { build: build }), reach.whole === undefined ? (_jsx(Crossed, { client: client, build: build, reach: reach })) : (_jsxs("p", { className: "va-refusal", children: ["This diff was not attributed, so nothing here may be called unreached: ", reach.whole, "."] })), _jsx(Holes, { reach: reach })] }));
+}
+function Crossed({ client, build, reach, }) {
+    const crossing = crossReach(build.subjects, reach, build.notObserved);
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "va-quad", children: [_jsx(Cell, { tone: "va-expected", n: crossing.reachedMoved.length, title: "reached, and moved", note: "The commit arrives and the render changed. What the edit was for." }), _jsx(Cell, { tone: "va-alarm", n: crossing.unreachedMoved.length, title: "moved, unreached", note: "Nothing in this commit arrives here. It moved anyway." }), _jsx(Cell, { tone: "va-inert", n: crossing.reachedStill.length, title: "reached, and still", note: "The commit arrives and changed no pixel of it." }), crossing.unreachedSkipped === 0 ? (_jsx(Cell, { tone: "va-quiet", n: crossing.unreachedStill, title: "untouched, and still", note: "Out of the commit's reach, and unchanged." })) : (_jsx(Cell, { tone: "va-quiet", n: crossing.unreachedSkipped, title: "untouched, not rendered", note: "Out of the commit's reach, so this run never opened them." }))] }), crossing.unreachedMoved.length === 0 ? null : (_jsxs("section", { className: "va-band va-alarm", children: [_jsx("h3", { children: "Moved with nothing reaching it" }), _jsx("p", { className: "va-note", children: "The graph placed every changed file and none of them arrives here. Either this run read the subject differently from the last, something outside the repository moved, or the scan has a hole in it \u2014 and the record is what tells those apart." }), _jsx("ul", { className: "va-reach-list", children: crossing.unreachedMoved.map((subject, index) => (_jsxs("li", { children: [_jsx("strong", { children: subject.subject }), ' ', _jsxs("span", { className: "va-note", children: [briefly(subject), " moved"] }), index < ASKED ? _jsx(Journey, { client: client, subject: subject.subject }) : null] }, subject.subject))) }), crossing.unreachedMoved.length <= ASKED ? null : (_jsxs("p", { className: "va-note", children: ["The record was read for the first ", number(ASKED), ". Open the rest from the rail."] }))] })), crossing.reachedStill.length === 0 ? null : (_jsxs("section", { className: "va-band va-inert", children: [_jsx("h3", { children: "Reached, and did not move" }), _jsx("p", { className: "va-note", children: "The commit arrives at these and the render is identical to the baseline. Nothing else on this page says anything at all about a green subject." }), _jsx("ul", { className: "va-reach-list va-columns", children: crossing.reachedStill.map((subject) => (_jsxs("li", { children: [_jsx("strong", { children: subject.subject }), ' ', _jsx(Via, { through: reach.subjects?.[subject.subject]?.through ?? [] })] }, subject.subject))) })] })), _jsx(Trails, { reach: reach }), _jsx(Unplaced, { crossing: crossing })] }));
+}
+function Cell({ tone, n, title, note, }) {
+    // A zero is drawn quietly rather than hidden. An omitted quadrant reads as a
+    // question that was not asked; a zero is the answer to it.
+    return (_jsxs("div", { className: n === 0 ? `va-cell ${tone} va-zero` : `va-cell ${tone}`, children: [_jsx("span", { className: "va-cell-n va-num", children: number(n) }), _jsx("span", { className: "va-cell-title", children: title }), _jsx("span", { className: "va-cell-note", children: note })] }));
+}
+/**
+ * The chains, which are the part a reviewer can check.
+ *
+ * A component named without its chain is an assertion. `tokens.css →
+ * button.tsx → Button` is a claim somebody can open three files and disprove,
+ * which is the only kind worth putting on a review surface.
+ */
+function Trails({ reach }) {
+    if (reach.components.length === 0)
+        return null;
+    const shown = reach.components.slice(0, TRAILS);
+    return (_jsxs("section", { className: "va-band", children: [_jsx("h3", { children: "How the diff arrives" }), _jsx("ul", { className: "va-trails", children: shown.map((entry) => (_jsxs("li", { children: [entry.trail.map((step, index) => (_jsxs("span", { children: [index === 0 ? null : _jsx("span", { className: "va-arrow", children: "\u2192" }), index === entry.trail.length - 1 ? _jsx("strong", { children: step }) : _jsx("code", { children: step })] }, step))), entry.throughUnread === undefined ? null : (_jsx("span", { className: "va-axis va-unread", children: "begins at a file the scan could not read" }))] }, entry.component))) }), reach.components.length <= shown.length ? null : (_jsxs("p", { className: "va-note", children: [count(reach.components.length - shown.length, 'further component'), " reached, not listed."] }))] }));
+}
+/**
+ * The subjects the crossing could not seat, said rather than absorbed.
+ *
+ * Two different silences, kept as two. A subject whose baseline carries no
+ * component list is one this surface cannot answer for; a new or incomparable
+ * subject is one where the question does not apply. Printing a single number for
+ * both would invite the reader to fix the wrong thing.
+ */
+function Unplaced({ crossing }) {
+    if (crossing.unplaced + crossing.incomparable === 0)
+        return null;
+    return (_jsxs("p", { className: "va-note va-reach-note", children: [crossing.unplaced === 0 ? null : (_jsxs(_Fragment, { children: [count(crossing.unplaced, 'subject'), " could not be placed on either axis, because", ' ', crossing.unplaced === 1 ? 'its baseline records' : 'their baselines record', " no component list.", ' '] })), crossing.incomparable === 0 ? null : (_jsxs(_Fragment, { children: [count(crossing.incomparable, 'subject'), ' ', crossing.incomparable === 1 ? 'was' : 'were', " new or could not be compared, so there is no moved-or-still to cross."] }))] }));
+}
+/**
+ * Where the attribution is knowingly wider than the diff.
+ *
+ * Both lists name their files rather than counting them, because both are things
+ * an operator can go and fix, and a bare count tells them there is nothing to do.
+ */
+function Holes({ reach }) {
+    if (reach.unscanned === undefined && reach.opaque === undefined)
+        return null;
+    return (_jsxs("p", { className: "va-note va-reach-note", children: [reach.unscanned === undefined ? null : (_jsxs(_Fragment, { children: [count(reach.unscanned.length, 'changed file'), " under the scanned roots", ' ', reach.unscanned.length === 1 ? 'is' : 'are', " not in the graph:", ' ', _jsx(Files, { names: reach.unscanned }), ".", ' '] })), reach.opaque === undefined ? null : (_jsxs(_Fragment, { children: [count(reach.opaque.length, 'file'), " was walked as changed because its own imports could not be read: ", _jsx(Files, { names: reach.opaque.map((hole) => hole.file) }), "."] }))] }));
+}
+/**
+ * Which of a subject's own components the commit arrives at.
+ *
+ * `SubjectReach.through` holds component names, not paths, and they are set as
+ * prose for that reason: a reader shown `MainNav` in the same monospace face as
+ * `app/src/components/MainNav.tsx` reads the two as the same kind of thing and
+ * starts looking for a file by that name.
+ *
+ * Nothing at all when the list is empty, rather than a dangling `via`. Empty here
+ * is `reached: false`, which this list is not.
+ */
+function Via({ through }) {
+    if (through.length === 0)
+        return null;
+    return _jsxs("span", { className: "va-note", children: ["via ", through.join(', ')] });
+}
+function Files({ names }) {
+    return (_jsx(_Fragment, { children: names.map((name, index) => (_jsxs("span", { children: [index === 0 ? null : ', ', _jsx("code", { children: name })] }, name))) }));
+}
+/**
+ * What the record says about a subject nothing in this commit reaches.
+ *
+ * Read on mount rather than behind a button, which is the opposite of the
+ * per-subject history elsewhere on this page and is deliberate. A reviewer who
+ * has opened a subject has already decided it is worth their time; this list is
+ * short by construction and every row on it is *already* the anomaly. "Has this
+ * moved on its own before" is the entire reason the row is here, so waiting to be
+ * asked it would be waiting to be asked the point.
+ */
+function Journey({ client, subject, }) {
+    const [answer, setAnswer] = useState({ state: 'reading' });
+    const load = useCallback(async () => {
+        try {
+            setAnswer({ state: 'read', flakiness: await client.flakiness(subject) });
+        }
+        catch (error) {
+            setAnswer({ state: 'failed', why: error instanceof Error ? error.message : String(error) });
+        }
+    }, [client, subject]);
+    useEffect(() => {
+        void load();
+    }, [load]);
+    if (answer.state === 'reading')
+        return _jsx("p", { className: "va-note", children: "Reading the record\u2026" });
+    // A record that could not be read says so. Blank here reads as "nothing on
+    // file", which is the one answer that would send a reviewer to approve an
+    // otherwise unexplained change.
+    if (answer.state === 'failed') {
+        return _jsxs("p", { className: "va-note va-lost", children: ["The record could not be read: ", answer.why] });
+    }
+    return _jsx(StabilityLine, { flakiness: answer.flakiness });
+}
+//# sourceMappingURL=reach.js.map

package/dist/ui/reach.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"reach.js","sourceRoot":"","sources":["../../src/ui/reach.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n * What the commit reaches, crossed against what the run saw.\n *\n * Every other panel on this page answers *what changed*. This one answers *what\n * could have*, and the whole value is in the crossing: a verdict alone cannot say\n * whether a green subject was supposed to be green, and a diff alone cannot say\n * whether the file somebody edited paints anything at all.\n *\n * Four states come out of it, and two are findings no image comparison can reach:\n *\n * - **reached, and moved** — the expected case, and the trail names the file.\n * - **reached, and still** — the commit reaches this subject and changed no pixel\n *   in it. Every tool in this category is silent about a green subject, so an\n *   author who believed they were changing this surface learns it here or not at\n *   all.\n * - **moved, unreached** — nothing in the commit arrives here and it moved anyway.\n *   That is a flake, an input from outside the repository, or a hole in the scan,\n *   and only the record separates them — so the record is read without waiting to\n *   be asked.\n * - **untouched, and still** — counted, never listed. On a narrowed run it reads\n *   *untouched, not rendered* instead, because those subjects were ruled out\n *   before any browser opened them and were never compared to anything.\n *\n * ## A refusal is drawn instead of the grid, not beside it\n *\n * A run can carry a diff it could not attribute: a changed file the graph does not\n * hold, a diff with nothing in the graph at all, a diff arriving at no component.\n * The store keeps that apart from an attribution that genuinely reached nothing,\n * and so does this. An empty grid over a refusal reads as *this commit reaches\n * none of your subjects*, which is a sentence somebody merges on.\n */\n\nimport { useCallback, useEffect, useState, type ReactElement } from 'react';\nimport type { Flakiness } from '@variance-authority/history';\nimport type { BuildDetail, ReachView, SubjectView } from '../review-types.js';\nimport type { ReviewClient } from './client.js';\nimport { StabilityLine } from './history.js';\nimport { OutcomeMapView } from './outcome.js';\nimport { briefly, count, number } from './text.js';\n\n/**\n * The four states, and the two counts that keep them honest.\n *\n * `unplaced` and `incomparable` exist so the four quadrants add up to the suite\n * without any of them absorbing a subject nobody can classify. A baseline that\n * recorded no component list cannot be put on either axis, and a subject that is\n * new or that nothing could compare has no *moved* to speak of. Folding either\n * into the quiet quadrant would make the one nobody reads the place uncertainty\n * goes to die.\n */\nexport interface Crossing {\n  readonly reachedMoved: readonly SubjectView[];\n  readonly reachedStill: readonly SubjectView[];\n  readonly unreachedMoved: readonly SubjectView[];\n  readonly unreachedStill: number;\n  /**\n   * Out of reach and never rendered, because the run worked that out first.\n   *\n   * Apart from `unreachedStill` and never added to it. Those were opened and\n   * found identical; these were never opened at all, and a page that summed them\n   * would report a comparison for eighteen subjects no browser ever loaded.\n   */\n  readonly unreachedSkipped: number;\n  readonly unplaced: number;\n  readonly incomparable: number;\n}\n\nexport function crossReach(\n  subjects: readonly SubjectView[],\n  reach: ReachView,\n  notObserved: BuildDetail['notObserved'] = [],\n): Crossing {\n  const placed = reach.subjects;\n  const reachedMoved: SubjectView[] = [];\n  const reachedStill: SubjectView[] = [];\n  const unreachedMoved: SubjectView[] = [];\n  let unreachedStill = 0;\n  let unplaced = 0;\n  let incomparable = 0;\n\n  for (const subject of subjects) {\n    const entry = placed?.[subject.subject];\n    if (entry === undefined) {\n      unplaced += 1;\n    } else if (subject.verdict === 'changed') {\n      (entry.reached ? reachedMoved : unreachedMoved).push(subject);\n    } else if (subject.verdict === 'unchanged') {\n      // `changed` and `unchanged` are the only verdicts describing a pair this\n      // run actually compared. A new subject has no baseline to have moved from,\n      // and an incomparable one is a comparison that did not happen — neither\n      // belongs on an axis called moved.\n      if (entry.reached) reachedStill.push(subject);\n      else unreachedStill += 1;\n    } else {\n      incomparable += 1;\n    }\n  }\n\n  return {\n    reachedMoved,\n    reachedStill,\n    unreachedMoved,\n    unreachedStill,\n    unreachedSkipped: notObserved.filter((entry) => entry.kind === 'unreached').length,\n    unplaced,\n    incomparable,\n  };\n}\n\n/** How many unexplained subjects read their own record without being asked. */\nconst ASKED = 5;\n\n/** How many trails are drawn before the rest are counted. */\nconst TRAILS = 8;\n\nexport function ReachPanel({\n  client,\n  build,\n}: {\n  readonly client: ReviewClient;\n  readonly build: BuildDetail;\n}): ReactElement | null {\n  const reach = build.reach;\n  if (reach === null) return null;\n\n  return (\n    <section className=\"va-card va-reach\">\n      <h2>What this commit reaches</h2>\n      <p className=\"va-subtitle\">\n        {count(reach.changed.length, 'file')} changed against <code>{reach.against}</code>. The\n        import graph carries them to {count(reach.components.length, 'component')}; the baselines say\n        which subjects render those.\n      </p>\n\n      <OutcomeMapView build={build} />\n\n      {reach.whole === undefined ? (\n        <Crossed client={client} build={build} reach={reach} />\n      ) : (\n        <p className=\"va-refusal\">\n          This diff was not attributed, so nothing here may be called unreached: {reach.whole}.\n        </p>\n      )}\n\n      <Holes reach={reach} />\n    </section>\n  );\n}\n\nfunction Crossed({\n  client,\n  build,\n  reach,\n}: {\n  readonly client: ReviewClient;\n  readonly build: BuildDetail;\n  readonly reach: ReachView;\n}): ReactElement {\n  const crossing = crossReach(build.subjects, reach, build.notObserved);\n\n  return (\n    <>\n      <div className=\"va-quad\">\n        <Cell\n          tone=\"va-expected\"\n          n={crossing.reachedMoved.length}\n          title=\"reached, and moved\"\n          note=\"The commit arrives and the render changed. What the edit was for.\"\n        />\n        <Cell\n          tone=\"va-alarm\"\n          n={crossing.unreachedMoved.length}\n          title=\"moved, unreached\"\n          note=\"Nothing in this commit arrives here. It moved anyway.\"\n        />\n        <Cell\n          tone=\"va-inert\"\n          n={crossing.reachedStill.length}\n          title=\"reached, and still\"\n          note=\"The commit arrives and changed no pixel of it.\"\n        />\n        {crossing.unreachedSkipped === 0 ? (\n          <Cell\n            tone=\"va-quiet\"\n            n={crossing.unreachedStill}\n            title=\"untouched, and still\"\n            note=\"Out of the commit's reach, and unchanged.\"\n          />\n        ) : (\n          // The run narrowed to what the diff can arrive at, so these were never\n          // opened. Drawn as *not rendered* rather than *unchanged*: nothing\n          // compared them, and the quadrant that says otherwise would be the one\n          // place on the page claiming a result for work nobody did.\n          <Cell\n            tone=\"va-quiet\"\n            n={crossing.unreachedSkipped}\n            title=\"untouched, not rendered\"\n            note=\"Out of the commit's reach, so this run never opened them.\"\n          />\n        )}\n      </div>\n\n      {crossing.unreachedMoved.length === 0 ? null : (\n        <section className=\"va-band va-alarm\">\n          <h3>Moved with nothing reaching it</h3>\n          <p className=\"va-note\">\n            The graph placed every changed file and none of them arrives here. Either this run read\n            the subject differently from the last, something outside the repository moved, or the\n            scan has a hole in it — and the record is what tells those apart.\n          </p>\n          <ul className=\"va-reach-list\">\n            {crossing.unreachedMoved.map((subject, index) => (\n              <li key={subject.subject}>\n                <strong>{subject.subject}</strong>{' '}\n                <span className=\"va-note\">\n                  {briefly(subject)} moved\n                </span>\n                {index < ASKED ? <Journey client={client} subject={subject.subject} /> : null}\n              </li>\n            ))}\n          </ul>\n          {crossing.unreachedMoved.length <= ASKED ? null : (\n            <p className=\"va-note\">\n              The record was read for the first {number(ASKED)}. Open the rest from the rail.\n            </p>\n          )}\n        </section>\n      )}\n\n      {crossing.reachedStill.length === 0 ? null : (\n        <section className=\"va-band va-inert\">\n          <h3>Reached, and did not move</h3>\n          <p className=\"va-note\">\n            The commit arrives at these and the render is identical to the baseline. Nothing else on\n            this page says anything at all about a green subject.\n          </p>\n          <ul className=\"va-reach-list va-columns\">\n            {crossing.reachedStill.map((subject) => (\n              <li key={subject.subject}>\n                <strong>{subject.subject}</strong>{' '}\n                <Via through={reach.subjects?.[subject.subject]?.through ?? []} />\n              </li>\n            ))}\n          </ul>\n        </section>\n      )}\n\n      <Trails reach={reach} />\n      <Unplaced crossing={crossing} />\n    </>\n  );\n}\n\nfunction Cell({\n  tone,\n  n,\n  title,\n  note,\n}: {\n  readonly tone: string;\n  readonly n: number;\n  readonly title: string;\n  readonly note: string;\n}): ReactElement {\n  // A zero is drawn quietly rather than hidden. An omitted quadrant reads as a\n  // question that was not asked; a zero is the answer to it.\n  return (\n    <div className={n === 0 ? `va-cell ${tone} va-zero` : `va-cell ${tone}`}>\n      <span className=\"va-cell-n va-num\">{number(n)}</span>\n      <span className=\"va-cell-title\">{title}</span>\n      <span className=\"va-cell-note\">{note}</span>\n    </div>\n  );\n}\n\n/**\n * The chains, which are the part a reviewer can check.\n *\n * A component named without its chain is an assertion. `tokens.css →\n * button.tsx → Button` is a claim somebody can open three files and disprove,\n * which is the only kind worth putting on a review surface.\n */\nfunction Trails({ reach }: { readonly reach: ReachView }): ReactElement | null {\n  if (reach.components.length === 0) return null;\n  const shown = reach.components.slice(0, TRAILS);\n\n  return (\n    <section className=\"va-band\">\n      <h3>How the diff arrives</h3>\n      <ul className=\"va-trails\">\n        {shown.map((entry) => (\n          <li key={entry.component}>\n            {entry.trail.map((step, index) => (\n              <span key={step}>\n                {index === 0 ? null : <span className=\"va-arrow\">→</span>}\n                {index === entry.trail.length - 1 ? <strong>{step}</strong> : <code>{step}</code>}\n              </span>\n            ))}\n            {entry.throughUnread === undefined ? null : (\n              <span className=\"va-axis va-unread\">begins at a file the scan could not read</span>\n            )}\n          </li>\n        ))}\n      </ul>\n      {reach.components.length <= shown.length ? null : (\n        <p className=\"va-note\">\n          {count(reach.components.length - shown.length, 'further component')} reached, not listed.\n        </p>\n      )}\n    </section>\n  );\n}\n\n/**\n * The subjects the crossing could not seat, said rather than absorbed.\n *\n * Two different silences, kept as two. A subject whose baseline carries no\n * component list is one this surface cannot answer for; a new or incomparable\n * subject is one where the question does not apply. Printing a single number for\n * both would invite the reader to fix the wrong thing.\n */\nfunction Unplaced({ crossing }: { readonly crossing: Crossing }): ReactElement | null {\n  if (crossing.unplaced + crossing.incomparable === 0) return null;\n\n  return (\n    <p className=\"va-note va-reach-note\">\n      {crossing.unplaced === 0 ? null : (\n        <>\n          {count(crossing.unplaced, 'subject')} could not be placed on either axis, because{' '}\n          {crossing.unplaced === 1 ? 'its baseline records' : 'their baselines record'} no component\n          list.{' '}\n        </>\n      )}\n      {crossing.incomparable === 0 ? null : (\n        <>\n          {count(crossing.incomparable, 'subject')}{' '}\n          {crossing.incomparable === 1 ? 'was' : 'were'} new or could not be compared, so there is\n          no moved-or-still to cross.\n        </>\n      )}\n    </p>\n  );\n}\n\n/**\n * Where the attribution is knowingly wider than the diff.\n *\n * Both lists name their files rather than counting them, because both are things\n * an operator can go and fix, and a bare count tells them there is nothing to do.\n */\nfunction Holes({ reach }: { readonly reach: ReachView }): ReactElement | null {\n  if (reach.unscanned === undefined && reach.opaque === undefined) return null;\n\n  return (\n    <p className=\"va-note va-reach-note\">\n      {reach.unscanned === undefined ? null : (\n        <>\n          {count(reach.unscanned.length, 'changed file')} under the scanned roots{' '}\n          {reach.unscanned.length === 1 ? 'is' : 'are'} not in the graph:{' '}\n          <Files names={reach.unscanned} />.{' '}\n        </>\n      )}\n      {reach.opaque === undefined ? null : (\n        <>\n          {count(reach.opaque.length, 'file')} was walked as changed because its own imports could\n          not be read: <Files names={reach.opaque.map((hole) => hole.file)} />.\n        </>\n      )}\n    </p>\n  );\n}\n\n/**\n * Which of a subject's own components the commit arrives at.\n *\n * `SubjectReach.through` holds component names, not paths, and they are set as\n * prose for that reason: a reader shown `MainNav` in the same monospace face as\n * `app/src/components/MainNav.tsx` reads the two as the same kind of thing and\n * starts looking for a file by that name.\n *\n * Nothing at all when the list is empty, rather than a dangling `via`. Empty here\n * is `reached: false`, which this list is not.\n */\nfunction Via({ through }: { readonly through: readonly string[] }): ReactElement | null {\n  if (through.length === 0) return null;\n\n  return <span className=\"va-note\">via {through.join(', ')}</span>;\n}\n\nfunction Files({ names }: { readonly names: readonly string[] }): ReactElement {\n  return (\n    <>\n      {names.map((name, index) => (\n        <span key={name}>\n          {index === 0 ? null : ', '}\n          <code>{name}</code>\n        </span>\n      ))}\n    </>\n  );\n}\n\n/**\n * What the record says about a subject nothing in this commit reaches.\n *\n * Read on mount rather than behind a button, which is the opposite of the\n * per-subject history elsewhere on this page and is deliberate. A reviewer who\n * has opened a subject has already decided it is worth their time; this list is\n * short by construction and every row on it is *already* the anomaly. \"Has this\n * moved on its own before\" is the entire reason the row is here, so waiting to be\n * asked it would be waiting to be asked the point.\n */\nfunction Journey({\n  client,\n  subject,\n}: {\n  readonly client: ReviewClient;\n  readonly subject: string;\n}): ReactElement {\n  const [answer, setAnswer] = useState<\n    | { readonly state: 'reading' }\n    | { readonly state: 'failed'; readonly why: string }\n    | { readonly state: 'read'; readonly flakiness: Flakiness }\n  >({ state: 'reading' });\n\n  const load = useCallback(async (): Promise<void> => {\n    try {\n      setAnswer({ state: 'read', flakiness: await client.flakiness(subject) });\n    } catch (error) {\n      setAnswer({ state: 'failed', why: error instanceof Error ? error.message : String(error) });\n    }\n  }, [client, subject]);\n\n  useEffect(() => {\n    void load();\n  }, [load]);\n\n  if (answer.state === 'reading') return <p className=\"va-note\">Reading the record…</p>;\n\n  // A record that could not be read says so. Blank here reads as \"nothing on\n  // file\", which is the one answer that would send a reviewer to approve an\n  // otherwise unexplained change.\n  if (answer.state === 'failed') {\n    return <p className=\"va-note va-lost\">The record could not be read: {answer.why}</p>;\n  }\n\n  return <StabilityLine flakiness={answer.flakiness} />;\n}\n"]}

package/dist/ui/regions.d.ts

@@ -0,0 +1,82 @@
+import type { ReactElement } from 'react';
+import type { SubjectView } from '../review.js';
+/**
+ * The boxes, and the table that names them.
+ *
+ * Apart from [`viewer.tsx`](./viewer.tsx) because the stage is one question — how
+ * do I look at two images — and this is the other: *which of these boxes is the
+ * one somebody edited, and who owns it*. The two are drawn together and read
+ * together, and a reviewer moves between them constantly, which is why the focus
+ * is one index shared by both rather than a hover state in each.
+ *
+ * The row and the rectangle are the same finding twice. Pointing at either lights
+ * the other, because a rectangle 700 pixels down a route capture and a row in a
+ * table are otherwise two lists a reader has to join by counting.
+ */
+export interface RegionFocus {
+    /** Which region is lit, by report order. `null` is none. */
+    readonly focus: number | null;
+    readonly onFocus: (index: number | null) => void;
+    /** Bring this region into view on the stage. */
+    readonly onJump: (index: number) => void;
+}
+/**
+ * Region rectangles over the candidate, cause and collateral drawn apart.
+ *
+ * Positioned in percentages of the raster's own dimensions, which the build
+ * carries, rather than of the rendered element. Measuring the image in the
+ * browser would place every box correctly only after it had loaded, and wrongly
+ * for the frame before that — and a box in the wrong place is worse than no box,
+ * because it attributes a change to whatever it happens to land on.
+ *
+ * Percentages are also what survives the zoom: the stage scales the plate and
+ * every box scales with it, so nothing here has to know the magnification.
+ *
+ * Only the causes and whatever is under attention are named on the picture. Thirty
+ * collateral captions over a page fitted to a pane overlap into a grey field, and
+ * a reviewer who cannot read any of them is worse off than one reading two — so
+ * the rest carry their ordinal, which is the number they are listed under, and the
+ * sentence arrives on hover and in the table. Nothing is dropped: every region
+ * that was found is a box and a row, both of them always.
+ */
+export declare function RegionOverlay({ subject, box, focus, onFocus, }: {
+    readonly subject: SubjectView;
+    /**
+     * The frame the percentages are of, when it is not the candidate's own.
+     *
+     * Region coordinates are in the comparison's space, and a comparison pads to
+     * the union of the two captures — so on a subject whose baseline was a
+     * different size, the candidate's dimensions are the wrong denominator and
+     * every box lands short by the difference.
+     */
+    readonly box?: {
+        readonly width: number;
+        readonly height: number;
+    } | undefined;
+    readonly focus?: number | null;
+    readonly onFocus?: ((index: number | null) => void) | undefined;
+}): ReactElement | null;
+/**
+ * The same regions as rows, which is the half a picture cannot deliver.
+ *
+ * A rectangle says *here*. It cannot say `src/ui/Button.tsx:18`, and the file is
+ * the column that lets a reviewer hand the change to whoever owns it rather than
+ * deciding it themselves. Ordered as the report ordered them — causes first,
+ * never by area, which reports the container that reflowed instead of the
+ * component that was edited.
+ */
+export declare function RegionTable({ subject, sourced, focus, onFocus, onJump, }: {
+    readonly subject: SubjectView;
+    /**
+     * Whether the *run* resolved any source file at all.
+     *
+     * A property of the run's source index, not of one capture, and the caller who
+     * holds the build is the only one who can say it. Left out, this falls back to
+     * what one render can see on its own, which is strictly weaker: a capture whose
+     * every region belongs to a dependency resolves nothing and would report a run
+     * with no index — the same name then reads two ways on two surfaces, and a
+     * reviewer takes one of them for a bug.
+     */
+    readonly sourced?: boolean | undefined;
+} & RegionFocus): ReactElement | null;
+//# sourceMappingURL=regions.d.ts.map