@variance-authority/tribunal 0.1.0

package/dist/ui/glance.d.ts

@@ -0,0 +1,101 @@
+/**
+ * What a reviewer should see first, derived rather than read out of a sentence.
+ *
+ * The line this replaces was the run's own prose: *2,015 pixels differ across 1
+ * region in Card, and the subject resized from 1280×394 to 1280×402; the
+ * collection of this subject reported ignore-unmatched (warn), so what was
+ * compared may be less than the whole subject.* Two hundred and twenty
+ * characters, three clauses, and the one thing a person would have noticed —
+ * **the card got eight pixels taller** — is in the middle of the second.
+ *
+ * It also names the wrong component. `describeChange` maps every region to its
+ * name and never reads `cause`, so a change that reflowed its container is
+ * reported under the container. On that subject `Card` is a passenger and
+ * `Button` is the only entry the hashes mark as a cause, in `geometry` **and**
+ * `token` — its own box and its own declared values both moved.
+ *
+ * ## The strip is three facts, and each is a measurement
+ *
+ * The cause, the growth, and the area. Nothing here is a sentence, because a
+ * sentence has to be read in order and these are answers to three questions
+ * asked at once — and because a reviewer who has read the same clause on twenty
+ * subjects stops reading it on the twenty-first.
+ *
+ * ## What it cannot say, and why that is not this module's fault
+ *
+ * The edit was `h-9 rounded-md px-3` to `h-11 rounded-lg px-5`: eight pixels of
+ * height, eight of horizontal padding, a larger radius. This can report the
+ * height, because a document's dimensions are recorded on both sides. It cannot
+ * report the padding, because a baseline keeps five digests per component and no
+ * values, so *what it was* is not on disk anywhere. That is a capture decision
+ * and it is the reason a band is called `token` rather than `--radius-md`.
+ *
+ * So the growth is printed as the growth, never as a property. A page that
+ * guessed *padding* from a height delta would be right on this subject and wrong
+ * on the first one that wrapped a line.
+ *
+ * What it can now say, since `ComponentHash.boxes`, is which control grew and by
+ * how much: `Button +36 × +8 px` beside the canvas's own `+8 px taller`. Those
+ * are two facts and the pair is the finding — the control got wider and the page
+ * did not, so the width was absorbed by a row that had the room and the height
+ * was not.
+ */
+import type { SubjectView } from '../review-types.js';
+/** The component the record blames, and how the two tiers found it. */
+export interface Blamed {
+    readonly component: string;
+    readonly bands: readonly string[];
+    /** A region in this render carries the name, so the picture found it too. */
+    readonly drawn: boolean;
+    /** Present on one side only — which `bands` alone cannot say. */
+    readonly presence?: 'added' | 'removed';
+    /**
+     * How much its own box grew, when the record measured it.
+     *
+     * The answer this page existed without. A band says *not what it was*; this
+     * says *thirty-six wider and eight taller*, which is the edit — and it is a
+     * measurement of the control rather than of the canvas, so it survives on a
+     * subject whose page height never moved.
+     */
+    readonly grew?: {
+        readonly width: number;
+        readonly height: number;
+    };
+}
+/** How the canvas itself moved, when it did. */
+export interface Grew {
+    readonly axis: 'taller' | 'shorter' | 'wider' | 'narrower' | 'resized';
+    readonly by: number;
+    readonly from: {
+        readonly width: number;
+        readonly height: number;
+    };
+    readonly to: {
+        readonly width: number;
+        readonly height: number;
+    };
+}
+export interface Glance {
+    /**
+     * Every component whose own content moved, widest sense first.
+     *
+     * Empty is a real answer and not a missing one: the hashes were read and
+     * nothing owned the difference, which is what the picture is left to explain.
+     */
+    readonly blamed: readonly Blamed[];
+    /** `false` when the baseline carried no hashes, so none of the above was asked. */
+    readonly measured: boolean;
+    readonly grew?: Grew;
+    readonly pixels: number;
+    readonly regions: number;
+    /**
+     * The component the largest region resolved to, when no blame names it.
+     *
+     * The container that reflowed. Printed as what it is — where the pixels
+     * landed — rather than as the subject of the change, which is the mistake the
+     * prose line makes.
+     */
+    readonly landedIn?: string;
+}
+export declare function glanceOf(subject: SubjectView): Glance;
+//# sourceMappingURL=glance.d.ts.map

package/dist/ui/glance.js

@@ -0,0 +1,101 @@
+/**
+ * What a reviewer should see first, derived rather than read out of a sentence.
+ *
+ * The line this replaces was the run's own prose: *2,015 pixels differ across 1
+ * region in Card, and the subject resized from 1280×394 to 1280×402; the
+ * collection of this subject reported ignore-unmatched (warn), so what was
+ * compared may be less than the whole subject.* Two hundred and twenty
+ * characters, three clauses, and the one thing a person would have noticed —
+ * **the card got eight pixels taller** — is in the middle of the second.
+ *
+ * It also names the wrong component. `describeChange` maps every region to its
+ * name and never reads `cause`, so a change that reflowed its container is
+ * reported under the container. On that subject `Card` is a passenger and
+ * `Button` is the only entry the hashes mark as a cause, in `geometry` **and**
+ * `token` — its own box and its own declared values both moved.
+ *
+ * ## The strip is three facts, and each is a measurement
+ *
+ * The cause, the growth, and the area. Nothing here is a sentence, because a
+ * sentence has to be read in order and these are answers to three questions
+ * asked at once — and because a reviewer who has read the same clause on twenty
+ * subjects stops reading it on the twenty-first.
+ *
+ * ## What it cannot say, and why that is not this module's fault
+ *
+ * The edit was `h-9 rounded-md px-3` to `h-11 rounded-lg px-5`: eight pixels of
+ * height, eight of horizontal padding, a larger radius. This can report the
+ * height, because a document's dimensions are recorded on both sides. It cannot
+ * report the padding, because a baseline keeps five digests per component and no
+ * values, so *what it was* is not on disk anywhere. That is a capture decision
+ * and it is the reason a band is called `token` rather than `--radius-md`.
+ *
+ * So the growth is printed as the growth, never as a property. A page that
+ * guessed *padding* from a height delta would be right on this subject and wrong
+ * on the first one that wrapped a line.
+ *
+ * What it can now say, since `ComponentHash.boxes`, is which control grew and by
+ * how much: `Button +36 × +8 px` beside the canvas's own `+8 px taller`. Those
+ * are two facts and the pair is the finding — the control got wider and the page
+ * did not, so the width was absorbed by a row that had the room and the height
+ * was not.
+ */
+import { leadOf } from './lead.js';
+export function glanceOf(subject) {
+    const moved = subject.moved;
+    const blamed = (moved ?? [])
+        .filter((entry) => entry.cause)
+        .map((entry) => ({
+        component: entry.component,
+        bands: entry.bands,
+        drawn: subject.regions.some((region) => region.component === entry.component),
+        ...(entry.presence === undefined ? {} : { presence: entry.presence }),
+        ...(entry.grew === undefined ? {} : { grew: entry.grew }),
+    }))
+        .sort((left, right) => right.bands.length - left.bands.length ||
+        left.component.localeCompare(right.component));
+    const lead = leadOf(subject) ?? subject.regions[0];
+    const landedIn = lead?.component !== undefined &&
+        !blamed.some((entry) => entry.component === lead.component)
+        ? lead.component
+        : undefined;
+    const grew = grewBy(subject);
+    return {
+        blamed,
+        measured: moved !== undefined,
+        ...(grew === undefined ? {} : { grew }),
+        pixels: subject.changedPixels,
+        regions: subject.regions.length,
+        ...(landedIn === undefined ? {} : { landedIn }),
+    };
+}
+/**
+ * The canvas delta, named on the axis that moved.
+ *
+ * One axis is the ordinary case and the one worth a word: a component that got
+ * taller pushed everything under it down, and *8 px taller* is the sentence a
+ * reviewer would have written themselves. Both axes at once gets `resized` and
+ * the larger magnitude, because there is no single number to lead with and
+ * picking one would hide the other.
+ */
+function grewBy(subject) {
+    const to = subject.size;
+    const from = subject.baseline;
+    if (to === undefined || from === undefined)
+        return undefined;
+    const height = to.height - from.height;
+    const width = to.width - from.width;
+    if (height === 0 && width === 0)
+        return undefined;
+    const axis = height !== 0 && width !== 0
+        ? 'resized'
+        : height > 0
+            ? 'taller'
+            : height < 0
+                ? 'shorter'
+                : width > 0
+                    ? 'wider'
+                    : 'narrower';
+    return { axis, by: Math.max(Math.abs(height), Math.abs(width)), from, to };
+}
+//# sourceMappingURL=glance.js.map

package/dist/ui/glance.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"glance.js","sourceRoot":"","sources":["../../src/ui/glance.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * What a reviewer should see first, derived rather than read out of a sentence.\n *\n * The line this replaces was the run's own prose: *2,015 pixels differ across 1\n * region in Card, and the subject resized from 1280×394 to 1280×402; the\n * collection of this subject reported ignore-unmatched (warn), so what was\n * compared may be less than the whole subject.* Two hundred and twenty\n * characters, three clauses, and the one thing a person would have noticed —\n * **the card got eight pixels taller** — is in the middle of the second.\n *\n * It also names the wrong component. `describeChange` maps every region to its\n * name and never reads `cause`, so a change that reflowed its container is\n * reported under the container. On that subject `Card` is a passenger and\n * `Button` is the only entry the hashes mark as a cause, in `geometry` **and**\n * `token` — its own box and its own declared values both moved.\n *\n * ## The strip is three facts, and each is a measurement\n *\n * The cause, the growth, and the area. Nothing here is a sentence, because a\n * sentence has to be read in order and these are answers to three questions\n * asked at once — and because a reviewer who has read the same clause on twenty\n * subjects stops reading it on the twenty-first.\n *\n * ## What it cannot say, and why that is not this module's fault\n *\n * The edit was `h-9 rounded-md px-3` to `h-11 rounded-lg px-5`: eight pixels of\n * height, eight of horizontal padding, a larger radius. This can report the\n * height, because a document's dimensions are recorded on both sides. It cannot\n * report the padding, because a baseline keeps five digests per component and no\n * values, so *what it was* is not on disk anywhere. That is a capture decision\n * and it is the reason a band is called `token` rather than `--radius-md`.\n *\n * So the growth is printed as the growth, never as a property. A page that\n * guessed *padding* from a height delta would be right on this subject and wrong\n * on the first one that wrapped a line.\n *\n * What it can now say, since `ComponentHash.boxes`, is which control grew and by\n * how much: `Button +36 × +8 px` beside the canvas's own `+8 px taller`. Those\n * are two facts and the pair is the finding — the control got wider and the page\n * did not, so the width was absorbed by a row that had the room and the height\n * was not.\n */\n\nimport type { SubjectView } from '../review-types.js';\nimport { leadOf } from './lead.js';\n\n/** The component the record blames, and how the two tiers found it. */\nexport interface Blamed {\n  readonly component: string;\n  readonly bands: readonly string[];\n  /** A region in this render carries the name, so the picture found it too. */\n  readonly drawn: boolean;\n  /** Present on one side only — which `bands` alone cannot say. */\n  readonly presence?: 'added' | 'removed';\n  /**\n   * How much its own box grew, when the record measured it.\n   *\n   * The answer this page existed without. A band says *not what it was*; this\n   * says *thirty-six wider and eight taller*, which is the edit — and it is a\n   * measurement of the control rather than of the canvas, so it survives on a\n   * subject whose page height never moved.\n   */\n  readonly grew?: { readonly width: number; readonly height: number };\n}\n\n/** How the canvas itself moved, when it did. */\nexport interface Grew {\n  readonly axis: 'taller' | 'shorter' | 'wider' | 'narrower' | 'resized';\n  readonly by: number;\n  readonly from: { readonly width: number; readonly height: number };\n  readonly to: { readonly width: number; readonly height: number };\n}\n\nexport interface Glance {\n  /**\n   * Every component whose own content moved, widest sense first.\n   *\n   * Empty is a real answer and not a missing one: the hashes were read and\n   * nothing owned the difference, which is what the picture is left to explain.\n   */\n  readonly blamed: readonly Blamed[];\n  /** `false` when the baseline carried no hashes, so none of the above was asked. */\n  readonly measured: boolean;\n  readonly grew?: Grew;\n  readonly pixels: number;\n  readonly regions: number;\n  /**\n   * The component the largest region resolved to, when no blame names it.\n   *\n   * The container that reflowed. Printed as what it is — where the pixels\n   * landed — rather than as the subject of the change, which is the mistake the\n   * prose line makes.\n   */\n  readonly landedIn?: string;\n}\n\nexport function glanceOf(subject: SubjectView): Glance {\n  const moved = subject.moved;\n  const blamed = (moved ?? [])\n    .filter((entry) => entry.cause)\n    .map((entry) => ({\n      component: entry.component,\n      bands: entry.bands,\n      drawn: subject.regions.some((region) => region.component === entry.component),\n      ...(entry.presence === undefined ? {} : { presence: entry.presence }),\n      ...(entry.grew === undefined ? {} : { grew: entry.grew }),\n    }))\n    .sort((left, right) => right.bands.length - left.bands.length ||\n      left.component.localeCompare(right.component));\n\n  const lead = leadOf(subject) ?? subject.regions[0];\n  const landedIn =\n    lead?.component !== undefined &&\n    !blamed.some((entry) => entry.component === lead.component)\n      ? lead.component\n      : undefined;\n\n  const grew = grewBy(subject);\n\n  return {\n    blamed,\n    measured: moved !== undefined,\n    ...(grew === undefined ? {} : { grew }),\n    pixels: subject.changedPixels,\n    regions: subject.regions.length,\n    ...(landedIn === undefined ? {} : { landedIn }),\n  };\n}\n\n/**\n * The canvas delta, named on the axis that moved.\n *\n * One axis is the ordinary case and the one worth a word: a component that got\n * taller pushed everything under it down, and *8 px taller* is the sentence a\n * reviewer would have written themselves. Both axes at once gets `resized` and\n * the larger magnitude, because there is no single number to lead with and\n * picking one would hide the other.\n */\nfunction grewBy(subject: SubjectView): Grew | undefined {\n  const to = subject.size;\n  const from = subject.baseline;\n  if (to === undefined || from === undefined) return undefined;\n\n  const height = to.height - from.height;\n  const width = to.width - from.width;\n  if (height === 0 && width === 0) return undefined;\n\n  const axis =\n    height !== 0 && width !== 0\n      ? 'resized'\n      : height > 0\n        ? 'taller'\n        : height < 0\n          ? 'shorter'\n          : width > 0\n            ? 'wider'\n            : 'narrower';\n\n  return { axis, by: Math.max(Math.abs(height), Math.abs(width)), from, to };\n}\n"]}

package/dist/ui/grouping.d.ts

@@ -0,0 +1,158 @@
+/**
+ * The changes, grouped by what caused them — which is the unit a reviewer acts on.
+ *
+ * Nobody approves a screenshot. A person looking at twenty changed renders is
+ * looking at *one* edit to `Button` twenty times, and the category ships that as
+ * twenty decisions: twenty thumbnails, twenty approve buttons, and no way to say
+ * the thing that is actually true — *yes, I meant to restyle the button, and yes,
+ * every card that grew by two millimetres grew because of it.*
+ *
+ * So the review item here is the origin, and a subject is a place it showed up.
+ *
+ * ## Three records meet on one group, and none of them can carry it alone
+ *
+ * - **The diff** says the commit reaches this component, and by what chain. An
+ *   origin the commit does not reach is the strongest signal on the page: nothing
+ *   you wrote arrives here and it moved anyway.
+ * - **The fingerprint** says whether they moved *the same way* — the shape with
+ *   position and values removed. It does not decide the group and must not: a
+ *   shape is a pixel digest, so one restyle lands as one shape on the buttons
+ *   that are the same size and another on the one that is not. It answers the
+ *   question after the group, which is which of these differences recur — and a
+ *   shared shape is the set `variance accept --shape` takes.
+ * - **The record** says whether this component moves all the time or has been
+ *   still since March. A 2px shift in a component that has caused an approved
+ *   change in nineteen of twenty runs is a different decision from the same 2px in
+ *   one that has caused none.
+ *
+ * ## What is not claimed
+ *
+ * Collateral is **not** attributed to an origin. Deciding which edit pushed which
+ * box around is exactly the attribution the semantic tier declined to make, and a
+ * group that swallowed it would be inventing the one number nobody measured. What
+ * a member carries instead is the list of components that moved *with* it in that
+ * subject, which is an observation rather than a claim.
+ *
+ * Apart from [`origins.tsx`](./origins.tsx), which draws all of this: the
+ * question *what is a change* is decided here and answered in one place, and the
+ * panel that renders it is long enough on its own.
+ */
+import type { BuildDetail, MovementView, SubjectView } from '../review-types.js';
+import { type Rung } from './attribution.js';
+/** One subject an origin showed up in. */
+export interface Appearance {
+    readonly subject: SubjectView;
+    /** Pixels the origin's own cause region moved here. */
+    readonly pixels: number;
+    /** The shape of that region, when the run recorded one. */
+    readonly shape?: string;
+    /** Other components with regions in this subject — observed, not attributed. */
+    readonly alongside: readonly string[];
+    /**
+     * Why the run says it moved *here*, when the run said.
+     *
+     * Per appearance rather than per origin, because that is the grain the answer
+     * has: one `Button` is `edited` on the page whose file the diff names and
+     * `upstream` on the page where an edited parent hands it a different label.
+     */
+    readonly movement?: MovementView;
+}
+export interface Origin {
+    readonly component: string;
+    /** Where the component is declared, from the build's own docket. */
+    readonly file?: string;
+    readonly pixels: number;
+    readonly appearances: readonly Appearance[];
+    /** How the commit arrives at this component, when a diff was read. */
+    readonly trail?: readonly string[];
+    /** `undefined` when the run carried no diff, which is not the same as `false`. */
+    readonly reached?: boolean;
+    /**
+     * The rung the run put this component on, folded over its appearances.
+     *
+     * `undefined` is *nothing is on record* and never a sixth rung. It is what a
+     * build ingested before attributions were carried answers for everything, and
+     * a band that read it as `unexplained` would print a missing input as the
+     * loudest finding on the page.
+     */
+    readonly cause?: Rung;
+    /**
+     * What the commit *does* reach in the renders this origin showed up in.
+     *
+     * The same relation as `SubjectReach.through`, unioned over this origin's
+     * appearances, and it is here for the case `reached === false` cannot describe
+     * on its own. A component the diff does not reach, moving in a render the diff
+     * reaches through three other components, is an ordinary Tuesday — most of a
+     * page belongs to libraries the import graph was never asked about. Without
+     * this the panel had one sentence for that and for a genuine orphan, and it
+     * spent it on the orphan.
+     */
+    readonly through?: readonly string[];
+    /**
+     * Renders this origin showed up in that the commit reaches nothing in at all.
+     *
+     * Empty is the common case and the whole point of separating it: a difference
+     * with no path from the diff to any component in the render is the finding
+     * worth waking somebody for, and it is worth nothing if it is printed over
+     * every third-party component on the page as well.
+     */
+    readonly stranded?: readonly string[];
+    /**
+     * Renders this origin showed up in that the reach record says nothing about.
+     *
+     * Split out of {@link Origin.stranded}, and the split is not pedantry. A report
+     * that carried component-level reach and no per-subject block put every one of
+     * its renders in the unreached pile, and the panel spent its loudest sentence —
+     * *the commit reaches nothing at all in this render* — on the ordinary fact
+     * that nobody wrote the row down. Absent is not empty.
+     */
+    readonly unlisted?: readonly string[];
+}
+export interface Origins {
+    readonly origins: readonly Origin[];
+    /**
+     * Changed subjects no component claimed.
+     *
+     * Their own bucket, never folded into an origin. A subject that moved with
+     * nothing named as its cause is the one case where a reviewer has to open the
+     * picture, and hiding it inside a group would hand them somebody else's edit to
+     * approve it under.
+     */
+    readonly unattributed: readonly SubjectView[];
+}
+export declare function originsOf(build: BuildDetail): Origins;
+/**
+ * The names the run put on this change's cause, for the row to print.
+ *
+ * The rail used to carry a paragraph per band saying what the band meant — *a
+ * component the commit did edit draws each one and hands it what it renders* —
+ * while the name of the component that did the drawing sat in the record,
+ * unprinted, and the file a component is declared in sat in a `title` attribute
+ * nobody hovers. That is backwards twice: the definition is identical on every
+ * build, and the name is the only part that is about this one.
+ *
+ * So the paragraph is gone and this stands where it stood. Per rung, because
+ * each rung recorded a different kind of evidence and there is no general one:
+ * `edited` has the file the diff named, `token` has the custom properties that
+ * took new values, `upstream` has the edited component that reaches this one and
+ * the chain it reaches through.
+ *
+ * Folded over the appearances rather than read off the first, and the difference
+ * is the case worth having. One `CardFooter` can be handed its change by
+ * `ProductCard` on the product page and by `CartCard` on the cart, and a row
+ * printing whichever render came back first would name a page the reviewer is
+ * not looking at.
+ */
+export declare function sourceOf(origin: Origin): readonly string[];
+/**
+ * What the differences look like, which is the half a component name cannot say.
+ *
+ * A component groups *what was edited*. A shape groups *what the edit did*, and
+ * the two answer different questions: eleven appearances under `Button` with one
+ * shape between them is a token that moved every button identically, and eleven
+ * with nine shapes is a component whose renders each absorbed the change
+ * differently. Both are one review. Only the first has a name a reviewer can
+ * carry to another build.
+ */
+export declare function shapesOf(appearances: readonly Appearance[]): Map<string, number>;
+//# sourceMappingURL=grouping.d.ts.map

package/dist/ui/grouping.js

@@ -0,0 +1,187 @@
+/**
+ * The changes, grouped by what caused them — which is the unit a reviewer acts on.
+ *
+ * Nobody approves a screenshot. A person looking at twenty changed renders is
+ * looking at *one* edit to `Button` twenty times, and the category ships that as
+ * twenty decisions: twenty thumbnails, twenty approve buttons, and no way to say
+ * the thing that is actually true — *yes, I meant to restyle the button, and yes,
+ * every card that grew by two millimetres grew because of it.*
+ *
+ * So the review item here is the origin, and a subject is a place it showed up.
+ *
+ * ## Three records meet on one group, and none of them can carry it alone
+ *
+ * - **The diff** says the commit reaches this component, and by what chain. An
+ *   origin the commit does not reach is the strongest signal on the page: nothing
+ *   you wrote arrives here and it moved anyway.
+ * - **The fingerprint** says whether they moved *the same way* — the shape with
+ *   position and values removed. It does not decide the group and must not: a
+ *   shape is a pixel digest, so one restyle lands as one shape on the buttons
+ *   that are the same size and another on the one that is not. It answers the
+ *   question after the group, which is which of these differences recur — and a
+ *   shared shape is the set `variance accept --shape` takes.
+ * - **The record** says whether this component moves all the time or has been
+ *   still since March. A 2px shift in a component that has caused an approved
+ *   change in nineteen of twenty runs is a different decision from the same 2px in
+ *   one that has caused none.
+ *
+ * ## What is not claimed
+ *
+ * Collateral is **not** attributed to an origin. Deciding which edit pushed which
+ * box around is exactly the attribution the semantic tier declined to make, and a
+ * group that swallowed it would be inventing the one number nobody measured. What
+ * a member carries instead is the list of components that moved *with* it in that
+ * subject, which is an observation rather than a claim.
+ *
+ * Apart from [`origins.tsx`](./origins.tsx), which draws all of this: the
+ * question *what is a change* is decided here and answered in one place, and the
+ * panel that renders it is long enough on its own.
+ */
+import { attributionsOf, rungAcross } from './attribution.js';
+import { leadOf } from './lead.js';
+export function originsOf(build) {
+    const files = new Map(build.causes.map((cause) => [cause.component, cause.file]));
+    const attributed = attributionsOf(build);
+    const groups = new Map();
+    const unattributed = [];
+    for (const subject of build.subjects) {
+        if (subject.verdict !== 'changed')
+            continue;
+        const lead = leadOf(subject);
+        if (lead?.component === undefined) {
+            unattributed.push(subject);
+            continue;
+        }
+        const group = groups.get(lead.component) ?? { pixels: 0, where: [] };
+        group.pixels += lead.pixels;
+        const movement = attributed.at(lead.component, subject.subject);
+        group.where.push({
+            subject,
+            pixels: lead.pixels,
+            ...(lead.fingerprint === undefined ? {} : { shape: lead.fingerprint }),
+            ...(movement === undefined ? {} : { movement }),
+            alongside: [
+                ...new Set(subject.regions
+                    .map((region) => region.component)
+                    .filter((name) => name !== undefined && name !== lead.component)),
+            ].sort(),
+        });
+        groups.set(lead.component, group);
+    }
+    const reach = build.reach !== null && build.reach.whole === undefined ? build.reach : null;
+    const origins = [...groups.entries()]
+        .map(([component, group]) => {
+        const file = files.get(component);
+        const entry = reach?.components.find((each) => each.component === component);
+        // Folded over the renders this origin showed up in, not over every render
+        // in the build. A component that also moved somewhere this docket does not
+        // group it under moved there for its own reason, and letting that vote
+        // would band this change by a page the reviewer is not looking at.
+        const cause = rungAcross(group.where.flatMap((each) => each.movement ?? []));
+        return {
+            component,
+            pixels: group.pixels,
+            appearances: group.where,
+            ...(cause === undefined ? {} : { cause }),
+            ...(file === undefined ? {} : { file }),
+            ...(reach === null ? {} : { reached: entry !== undefined, ...around(reach, group.where) }),
+            ...(entry === undefined ? {} : { trail: entry.trail }),
+        };
+    })
+        .sort((left, right) => right.pixels === left.pixels
+        ? left.component.localeCompare(right.component)
+        : right.pixels - left.pixels);
+    return { origins, unattributed };
+}
+/**
+ * What the diff reaches around this origin, and where it reaches nothing.
+ *
+ * Read per appearance and then unioned, rather than asked of the component: the
+ * question is not *does the commit know this name* but *does the commit arrive in
+ * the pictures where this name moved*, and those have different answers exactly
+ * when the answer matters.
+ *
+ * Three piles, not two. A render the reach record has no row for is not a render
+ * the commit fails to reach — it is a render nobody asked about — and folding
+ * those together is how a report with no per-subject block ends up printing the
+ * page's loudest sentence over every change in the build.
+ */
+function around(reach, appearances) {
+    const through = new Set();
+    const stranded = [];
+    const unlisted = [];
+    for (const { subject } of appearances) {
+        const entry = reach.subjects?.[subject.subject];
+        if (entry === undefined)
+            unlisted.push(subject.subject);
+        else if (entry.reached)
+            for (const name of entry.through)
+                through.add(name);
+        else
+            stranded.push(subject.subject);
+    }
+    return { through: [...through].sort(), stranded, unlisted };
+}
+/**
+ * The names the run put on this change's cause, for the row to print.
+ *
+ * The rail used to carry a paragraph per band saying what the band meant — *a
+ * component the commit did edit draws each one and hands it what it renders* —
+ * while the name of the component that did the drawing sat in the record,
+ * unprinted, and the file a component is declared in sat in a `title` attribute
+ * nobody hovers. That is backwards twice: the definition is identical on every
+ * build, and the name is the only part that is about this one.
+ *
+ * So the paragraph is gone and this stands where it stood. Per rung, because
+ * each rung recorded a different kind of evidence and there is no general one:
+ * `edited` has the file the diff named, `token` has the custom properties that
+ * took new values, `upstream` has the edited component that reaches this one and
+ * the chain it reaches through.
+ *
+ * Folded over the appearances rather than read off the first, and the difference
+ * is the case worth having. One `CardFooter` can be handed its change by
+ * `ProductCard` on the product page and by `CartCard` on the cart, and a row
+ * printing whichever render came back first would name a page the reviewer is
+ * not looking at.
+ */
+export function sourceOf(origin) {
+    const found = new Set();
+    for (const { movement } of origin.appearances) {
+        if (movement === undefined)
+            continue;
+        if (movement.cause === 'edited' && movement.file !== undefined)
+            found.add(movement.file);
+        if (movement.cause === 'token')
+            for (const token of movement.tokens ?? [])
+                found.add(token);
+        if (movement.cause === 'upstream' && movement.upstream !== undefined) {
+            found.add([movement.upstream, ...(movement.through ?? [])].join(' → '));
+        }
+    }
+    // Where the component is declared, when no movement named anything — which is
+    // most of what the `title` attribute was hiding, and is the answer a reviewer
+    // opening an unattributed row is about to go looking for anyway.
+    if (found.size === 0 && origin.file !== undefined)
+        found.add(origin.file);
+    return [...found].sort();
+}
+/**
+ * What the differences look like, which is the half a component name cannot say.
+ *
+ * A component groups *what was edited*. A shape groups *what the edit did*, and
+ * the two answer different questions: eleven appearances under `Button` with one
+ * shape between them is a token that moved every button identically, and eleven
+ * with nine shapes is a component whose renders each absorbed the change
+ * differently. Both are one review. Only the first has a name a reviewer can
+ * carry to another build.
+ */
+export function shapesOf(appearances) {
+    const clusters = new Map();
+    for (const each of appearances) {
+        if (each.shape === undefined)
+            continue;
+        clusters.set(each.shape, (clusters.get(each.shape) ?? 0) + 1);
+    }
+    return clusters;
+}
+//# sourceMappingURL=grouping.js.map

package/dist/ui/grouping.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grouping.js","sourceRoot":"","sources":["../../src/ui/grouping.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AAGH,OAAO,EAAE,cAAc,EAAE,UAAU,EAAa,MAAM,kBAAkB,CAAC;AACzE,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AAsFnC,MAAM,UAAU,SAAS,CAAC,KAAkB;IAC1C,MAAM,KAAK,GAAG,IAAI,GAAG,CAAC,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,SAAS,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;IAClF,MAAM,UAAU,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;IACzC,MAAM,MAAM,GAAG,IAAI,GAAG,EAAmD,CAAC;IAC1E,MAAM,YAAY,GAAkB,EAAE,CAAC;IAEvC,KAAK,MAAM,OAAO,IAAI,KAAK,CAAC,QAAQ,EAAE,CAAC;QACrC,IAAI,OAAO,CAAC,OAAO,KAAK,SAAS;YAAE,SAAS;QAE5C,MAAM,IAAI,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC;QAC7B,IAAI,IAAI,EAAE,SAAS,KAAK,SAAS,EAAE,CAAC;YAClC,YAAY,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;YAC3B,SAAS;QACX,CAAC;QAED,MAAM,KAAK,GAAG,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC;QACrE,KAAK,CAAC,MAAM,IAAI,IAAI,CAAC,MAAM,CAAC;QAC5B,MAAM,QAAQ,GAAG,UAAU,CAAC,EAAE,CAAC,IAAI,CAAC,SAAS,EAAE,OAAO,CAAC,OAAO,CAAC,CAAC;QAChE,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC;YACf,OAAO;YACP,MAAM,EAAE,IAAI,CAAC,MAAM;YACnB,GAAG,CAAC,IAAI,CAAC,WAAW,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,WAAW,EAAE,CAAC;YACtE,GAAG,CAAC,QAAQ,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,CAAC;YAC/C,SAAS,EAAE;gBACT,GAAG,IAAI,GAAG,CACR,OAAO,CAAC,OAAO;qBACZ,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,CAAC;qBACjC,MAAM,CAAC,CAAC,IAAI,EAAkB,EAAE,CAAC,IAAI,KAAK,SAAS,IAAI,IAAI,KAAK,IAAI,CAAC,SAAS,CAAC,CACnF;aACF,CAAC,IAAI,EAAE;SACT,CAAC,CAAC;QACH,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;IACpC,CAAC;IAED,MAAM,KAAK,GAAG,KAAK,CAAC,KAAK,KAAK,IAAI,IAAI,KAAK,CAAC,KAAK,CAAC,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC;IAE3F,MAAM,OAAO,GAAG,CAAC,GAAG,MAAM,CAAC,OAAO,EAAE,CAAC;SAClC,GAAG,CAAC,CAAC,CAAC,SAAS,EAAE,KAAK,CAAC,EAAU,EAAE;QAClC,MAAM,IAAI,GAAG,KAAK,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;QAClC,MAAM,KAAK,GAAG,KAAK,EAAE,UAAU,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,SAAS,KAAK,SAAS,CAAC,CAAC;QAC7E,0EAA0E;QAC1E,2EAA2E;QAC3E,uEAAuE;QACvE,mEAAmE;QACnE,MAAM,KAAK,GAAG,UAAU,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,IAAI,EAAE,CAAC,CAAC,CAAC;QAC7E,OAAO;YACL,SAAS;YACT,MAAM,EAAE,KAAK,CAAC,MAAM;YACpB,WAAW,EAAE,KAAK,CAAC,KAAK;YACxB,GAAG,CAAC,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC;YACzC,GAAG,CAAC,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC;YACvC,GAAG,CAAC,KAAK,KAAK,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,KAAK,KAAK,SAAS,EAAE,GAAG,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC;YAC1F,GAAG,CAAC,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,CAAC;SACvD,CAAC;IACJ,CAAC,CAAC;SACD,IAAI,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CACpB,KAAK,CAAC,MAAM,KAAK,IAAI,CAAC,MAAM;QAC1B,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,aAAa,CAAC,KAAK,CAAC,SAAS,CAAC;QAC/C,CAAC,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,CAC/B,CAAC;IAEJ,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,CAAC;AACnC,CAAC;AAED;;;;;;;;;;;;GAYG;AACH,SAAS,MAAM,CACb,KAAwC,EACxC,WAAkC;IAElC,MAAM,OAAO,GAAG,IAAI,GAAG,EAAU,CAAC;IAClC,MAAM,QAAQ,GAAa,EAAE,CAAC;IAC9B,MAAM,QAAQ,GAAa,EAAE,CAAC;IAE9B,KAAK,MAAM,EAAE,OAAO,EAAE,IAAI,WAAW,EAAE,CAAC;QACtC,MAAM,KAAK,GAAG,KAAK,CAAC,QAAQ,EAAE,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;QAChD,IAAI,KAAK,KAAK,SAAS;YAAE,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;aACnD,IAAI,KAAK,CAAC,OAAO;YAAE,KAAK,MAAM,IAAI,IAAI,KAAK,CAAC,OAAO;gBAAE,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;;YACvE,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;IACtC,CAAC;IAED,OAAO,EAAE,OAAO,EAAE,CAAC,GAAG,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC;AAC9D,CAAC;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,UAAU,QAAQ,CAAC,MAAc;IACrC,MAAM,KAAK,GAAG,IAAI,GAAG,EAAU,CAAC;IAEhC,KAAK,MAAM,EAAE,QAAQ,EAAE,IAAI,MAAM,CAAC,WAAW,EAAE,CAAC;QAC9C,IAAI,QAAQ,KAAK,SAAS;YAAE,SAAS;QACrC,IAAI,QAAQ,CAAC,KAAK,KAAK,QAAQ,IAAI,QAAQ,CAAC,IAAI,KAAK,SAAS;YAAE,KAAK,CAAC,GAAG,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;QACzF,IAAI,QAAQ,CAAC,KAAK,KAAK,OAAO;YAAE,KAAK,MAAM,KAAK,IAAI,QAAQ,CAAC,MAAM,IAAI,EAAE;gBAAE,KAAK,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;QAC5F,IAAI,QAAQ,CAAC,KAAK,KAAK,UAAU,IAAI,QAAQ,CAAC,QAAQ,KAAK,SAAS,EAAE,CAAC;YACrE,KAAK,CAAC,GAAG,CAAC,CAAC,QAAQ,CAAC,QAAQ,EAAE,GAAG,CAAC,QAAQ,CAAC,OAAO,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;QAC1E,CAAC;IACH,CAAC;IAED,8EAA8E;IAC9E,8EAA8E;IAC9E,iEAAiE;IACjE,IAAI,KAAK,CAAC,IAAI,KAAK,CAAC,IAAI,MAAM,CAAC,IAAI,KAAK,SAAS;QAAE,KAAK,CAAC,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;IAE1E,OAAO,CAAC,GAAG,KAAK,CAAC,CAAC,IAAI,EAAE,CAAC;AAC3B,CAAC;AAED;;;;;;;;;GASG;AACH,MAAM,UAAU,QAAQ,CAAC,WAAkC;IACzD,MAAM,QAAQ,GAAG,IAAI,GAAG,EAAkB,CAAC;IAC3C,KAAK,MAAM,IAAI,IAAI,WAAW,EAAE,CAAC;QAC/B,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS;YAAE,SAAS;QACvC,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;IAChE,CAAC;IACD,OAAO,QAAQ,CAAC;AAClB,CAAC","sourcesContent":["/**\n * The changes, grouped by what caused them — which is the unit a reviewer acts on.\n *\n * Nobody approves a screenshot. A person looking at twenty changed renders is\n * looking at *one* edit to `Button` twenty times, and the category ships that as\n * twenty decisions: twenty thumbnails, twenty approve buttons, and no way to say\n * the thing that is actually true — *yes, I meant to restyle the button, and yes,\n * every card that grew by two millimetres grew because of it.*\n *\n * So the review item here is the origin, and a subject is a place it showed up.\n *\n * ## Three records meet on one group, and none of them can carry it alone\n *\n * - **The diff** says the commit reaches this component, and by what chain. An\n *   origin the commit does not reach is the strongest signal on the page: nothing\n *   you wrote arrives here and it moved anyway.\n * - **The fingerprint** says whether they moved *the same way* — the shape with\n *   position and values removed. It does not decide the group and must not: a\n *   shape is a pixel digest, so one restyle lands as one shape on the buttons\n *   that are the same size and another on the one that is not. It answers the\n *   question after the group, which is which of these differences recur — and a\n *   shared shape is the set `variance accept --shape` takes.\n * - **The record** says whether this component moves all the time or has been\n *   still since March. A 2px shift in a component that has caused an approved\n *   change in nineteen of twenty runs is a different decision from the same 2px in\n *   one that has caused none.\n *\n * ## What is not claimed\n *\n * Collateral is **not** attributed to an origin. Deciding which edit pushed which\n * box around is exactly the attribution the semantic tier declined to make, and a\n * group that swallowed it would be inventing the one number nobody measured. What\n * a member carries instead is the list of components that moved *with* it in that\n * subject, which is an observation rather than a claim.\n *\n * Apart from [`origins.tsx`](./origins.tsx), which draws all of this: the\n * question *what is a change* is decided here and answered in one place, and the\n * panel that renders it is long enough on its own.\n */\n\nimport type { BuildDetail, MovementView, SubjectView } from '../review-types.js';\nimport { attributionsOf, rungAcross, type Rung } from './attribution.js';\nimport { leadOf } from './lead.js';\n\n/** One subject an origin showed up in. */\nexport interface Appearance {\n  readonly subject: SubjectView;\n  /** Pixels the origin's own cause region moved here. */\n  readonly pixels: number;\n  /** The shape of that region, when the run recorded one. */\n  readonly shape?: string;\n  /** Other components with regions in this subject — observed, not attributed. */\n  readonly alongside: readonly string[];\n  /**\n   * Why the run says it moved *here*, when the run said.\n   *\n   * Per appearance rather than per origin, because that is the grain the answer\n   * has: one `Button` is `edited` on the page whose file the diff names and\n   * `upstream` on the page where an edited parent hands it a different label.\n   */\n  readonly movement?: MovementView;\n}\n\nexport interface Origin {\n  readonly component: string;\n  /** Where the component is declared, from the build's own docket. */\n  readonly file?: string;\n  readonly pixels: number;\n  readonly appearances: readonly Appearance[];\n  /** How the commit arrives at this component, when a diff was read. */\n  readonly trail?: readonly string[];\n  /** `undefined` when the run carried no diff, which is not the same as `false`. */\n  readonly reached?: boolean;\n  /**\n   * The rung the run put this component on, folded over its appearances.\n   *\n   * `undefined` is *nothing is on record* and never a sixth rung. It is what a\n   * build ingested before attributions were carried answers for everything, and\n   * a band that read it as `unexplained` would print a missing input as the\n   * loudest finding on the page.\n   */\n  readonly cause?: Rung;\n  /**\n   * What the commit *does* reach in the renders this origin showed up in.\n   *\n   * The same relation as `SubjectReach.through`, unioned over this origin's\n   * appearances, and it is here for the case `reached === false` cannot describe\n   * on its own. A component the diff does not reach, moving in a render the diff\n   * reaches through three other components, is an ordinary Tuesday — most of a\n   * page belongs to libraries the import graph was never asked about. Without\n   * this the panel had one sentence for that and for a genuine orphan, and it\n   * spent it on the orphan.\n   */\n  readonly through?: readonly string[];\n  /**\n   * Renders this origin showed up in that the commit reaches nothing in at all.\n   *\n   * Empty is the common case and the whole point of separating it: a difference\n   * with no path from the diff to any component in the render is the finding\n   * worth waking somebody for, and it is worth nothing if it is printed over\n   * every third-party component on the page as well.\n   */\n  readonly stranded?: readonly string[];\n  /**\n   * Renders this origin showed up in that the reach record says nothing about.\n   *\n   * Split out of {@link Origin.stranded}, and the split is not pedantry. A report\n   * that carried component-level reach and no per-subject block put every one of\n   * its renders in the unreached pile, and the panel spent its loudest sentence —\n   * *the commit reaches nothing at all in this render* — on the ordinary fact\n   * that nobody wrote the row down. Absent is not empty.\n   */\n  readonly unlisted?: readonly string[];\n}\n\nexport interface Origins {\n  readonly origins: readonly Origin[];\n  /**\n   * Changed subjects no component claimed.\n   *\n   * Their own bucket, never folded into an origin. A subject that moved with\n   * nothing named as its cause is the one case where a reviewer has to open the\n   * picture, and hiding it inside a group would hand them somebody else's edit to\n   * approve it under.\n   */\n  readonly unattributed: readonly SubjectView[];\n}\n\nexport function originsOf(build: BuildDetail): Origins {\n  const files = new Map(build.causes.map((cause) => [cause.component, cause.file]));\n  const attributed = attributionsOf(build);\n  const groups = new Map<string, { pixels: number; where: Appearance[] }>();\n  const unattributed: SubjectView[] = [];\n\n  for (const subject of build.subjects) {\n    if (subject.verdict !== 'changed') continue;\n\n    const lead = leadOf(subject);\n    if (lead?.component === undefined) {\n      unattributed.push(subject);\n      continue;\n    }\n\n    const group = groups.get(lead.component) ?? { pixels: 0, where: [] };\n    group.pixels += lead.pixels;\n    const movement = attributed.at(lead.component, subject.subject);\n    group.where.push({\n      subject,\n      pixels: lead.pixels,\n      ...(lead.fingerprint === undefined ? {} : { shape: lead.fingerprint }),\n      ...(movement === undefined ? {} : { movement }),\n      alongside: [\n        ...new Set(\n          subject.regions\n            .map((region) => region.component)\n            .filter((name): name is string => name !== undefined && name !== lead.component),\n        ),\n      ].sort(),\n    });\n    groups.set(lead.component, group);\n  }\n\n  const reach = build.reach !== null && build.reach.whole === undefined ? build.reach : null;\n\n  const origins = [...groups.entries()]\n    .map(([component, group]): Origin => {\n      const file = files.get(component);\n      const entry = reach?.components.find((each) => each.component === component);\n      // Folded over the renders this origin showed up in, not over every render\n      // in the build. A component that also moved somewhere this docket does not\n      // group it under moved there for its own reason, and letting that vote\n      // would band this change by a page the reviewer is not looking at.\n      const cause = rungAcross(group.where.flatMap((each) => each.movement ?? []));\n      return {\n        component,\n        pixels: group.pixels,\n        appearances: group.where,\n        ...(cause === undefined ? {} : { cause }),\n        ...(file === undefined ? {} : { file }),\n        ...(reach === null ? {} : { reached: entry !== undefined, ...around(reach, group.where) }),\n        ...(entry === undefined ? {} : { trail: entry.trail }),\n      };\n    })\n    .sort((left, right) =>\n      right.pixels === left.pixels\n        ? left.component.localeCompare(right.component)\n        : right.pixels - left.pixels,\n    );\n\n  return { origins, unattributed };\n}\n\n/**\n * What the diff reaches around this origin, and where it reaches nothing.\n *\n * Read per appearance and then unioned, rather than asked of the component: the\n * question is not *does the commit know this name* but *does the commit arrive in\n * the pictures where this name moved*, and those have different answers exactly\n * when the answer matters.\n *\n * Three piles, not two. A render the reach record has no row for is not a render\n * the commit fails to reach — it is a render nobody asked about — and folding\n * those together is how a report with no per-subject block ends up printing the\n * page's loudest sentence over every change in the build.\n */\nfunction around(\n  reach: NonNullable<BuildDetail['reach']>,\n  appearances: readonly Appearance[],\n): { through: readonly string[]; stranded: readonly string[]; unlisted: readonly string[] } {\n  const through = new Set<string>();\n  const stranded: string[] = [];\n  const unlisted: string[] = [];\n\n  for (const { subject } of appearances) {\n    const entry = reach.subjects?.[subject.subject];\n    if (entry === undefined) unlisted.push(subject.subject);\n    else if (entry.reached) for (const name of entry.through) through.add(name);\n    else stranded.push(subject.subject);\n  }\n\n  return { through: [...through].sort(), stranded, unlisted };\n}\n\n/**\n * The names the run put on this change's cause, for the row to print.\n *\n * The rail used to carry a paragraph per band saying what the band meant — *a\n * component the commit did edit draws each one and hands it what it renders* —\n * while the name of the component that did the drawing sat in the record,\n * unprinted, and the file a component is declared in sat in a `title` attribute\n * nobody hovers. That is backwards twice: the definition is identical on every\n * build, and the name is the only part that is about this one.\n *\n * So the paragraph is gone and this stands where it stood. Per rung, because\n * each rung recorded a different kind of evidence and there is no general one:\n * `edited` has the file the diff named, `token` has the custom properties that\n * took new values, `upstream` has the edited component that reaches this one and\n * the chain it reaches through.\n *\n * Folded over the appearances rather than read off the first, and the difference\n * is the case worth having. One `CardFooter` can be handed its change by\n * `ProductCard` on the product page and by `CartCard` on the cart, and a row\n * printing whichever render came back first would name a page the reviewer is\n * not looking at.\n */\nexport function sourceOf(origin: Origin): readonly string[] {\n  const found = new Set<string>();\n\n  for (const { movement } of origin.appearances) {\n    if (movement === undefined) continue;\n    if (movement.cause === 'edited' && movement.file !== undefined) found.add(movement.file);\n    if (movement.cause === 'token') for (const token of movement.tokens ?? []) found.add(token);\n    if (movement.cause === 'upstream' && movement.upstream !== undefined) {\n      found.add([movement.upstream, ...(movement.through ?? [])].join(' → '));\n    }\n  }\n\n  // Where the component is declared, when no movement named anything — which is\n  // most of what the `title` attribute was hiding, and is the answer a reviewer\n  // opening an unattributed row is about to go looking for anyway.\n  if (found.size === 0 && origin.file !== undefined) found.add(origin.file);\n\n  return [...found].sort();\n}\n\n/**\n * What the differences look like, which is the half a component name cannot say.\n *\n * A component groups *what was edited*. A shape groups *what the edit did*, and\n * the two answer different questions: eleven appearances under `Button` with one\n * shape between them is a token that moved every button identically, and eleven\n * with nine shapes is a component whose renders each absorbed the change\n * differently. Both are one review. Only the first has a name a reviewer can\n * carry to another build.\n */\nexport function shapesOf(appearances: readonly Appearance[]): Map<string, number> {\n  const clusters = new Map<string, number>();\n  for (const each of appearances) {\n    if (each.shape === undefined) continue;\n    clusters.set(each.shape, (clusters.get(each.shape) ?? 0) + 1);\n  }\n  return clusters;\n}\n"]}