@variance-authority/tribunal 0.1.0

package/dist/ui/look.js

@@ -0,0 +1,248 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Looking at a change from the card that decides it.
+ *
+ * The docket answers *what moved and why*, and then offers two buttons. That is
+ * one question short: a reviewer approving a restyle of `Button` across eleven
+ * renders has been told the name of the component, the size of the difference and
+ * the shape it repeats in, and has not been shown the difference. Sending them to
+ * the full stage for that is sending them away from the decision — a route
+ * capture is nine thousand pixels tall, the difference is a hundred and thirty
+ * across, and finding it is a scroll they perform once per subject.
+ *
+ * So the change is brought to the card, cropped to where the run measured it.
+ *
+ * ## One crop per shape, not one per place
+ *
+ * The card's own argument is *one edit, N places*. A strip of eleven thumbnails
+ * would contradict it in the same breath as making it, and would ask the browser
+ * to decode eleven full-page captures to say a thing the fingerprints already
+ * said. What is drawn instead is one crop per distinct shape, which is exactly
+ * the set the card claims is redundant — if two of them look different, the claim
+ * was wrong and the reviewer can see that it was.
+ *
+ * An appearance whose run recorded no shape is its own crop. Absent is not equal:
+ * two differences nothing characterised have not been shown to match, and folding
+ * them together would hide one behind a picture of the other.
+ *
+ * ## The difference is the first layer
+ *
+ * The strip opens on the mask the comparison drew. A crop of the candidate is a
+ * picture of the component, and a reviewer reading one against a baseline they
+ * remember is redoing by eye the comparison the run already did to the pixel. The
+ * two readings are one press behind it and stay mounted once asked for, so moving
+ * between the three is a repaint rather than a fetch.
+ *
+ * ## Deferred by the window, not by a button
+ *
+ * A route candidate here is 1280 × 9000 and costs about 46MB of bitmap to decode,
+ * and a change with six shapes asks for six of them. That cost is why the strip
+ * used to sit behind a *look at the change* button — which priced every difference
+ * on the page at a click, and there is no reviewer who does not want to see the
+ * difference. It also capped the strip at three, so a change with six shapes drew
+ * half of itself and counted the rest.
+ *
+ * So the deferral moved to where the cost is. Each crop asks for its raster when
+ * its own window comes near the viewport, and only for the layer being shown.
+ * `loading="lazy"` cannot do that job here: the plate is the whole capture
+ * translated so the region lands in a 264px window, which on a mobile route is a
+ * 17,000px offset — the browser sees a box far outside the viewport and defers it
+ * forever, leaving a red ring over an empty frame. What is watched instead is the
+ * window, which is 264 × 176 and sitting exactly where the reviewer is looking.
+ */
+import { useCallback, useState } from 'react';
+import { leadOf } from './lead.js';
+import { count, number } from './text.js';
+import { share, union } from './viewer.js';
+/**
+ * The crop window, in CSS pixels.
+ *
+ * Fixed, and the same for every crop in a strip. Sizing each window to its own
+ * region would make the strip a bar chart of region areas, which is the ranking
+ * by area this whole surface exists to refuse — and it would do it in the one
+ * place a reviewer reads as *how big is this change*.
+ */
+const WINDOW = { width: 264, height: 176 };
+/** Source pixels kept around the region, so the difference has a page to be on. */
+const PAD = 20;
+/**
+ * How far the crop may be pushed, in either direction.
+ *
+ * Below 1:1 a two-pixel shift is handed to the resampler, which is the whole
+ * reason the sheet refuses smoothing — but a region larger than the window has to
+ * come down or it is not a picture of anything, so the floor is a quarter rather
+ * than one, and {@link Frame.whole} says which of the two happened.
+ */
+const FURTHEST = 0.25;
+const CLOSEST = 8;
+const LAYERS = ['diff', 'after', 'before'];
+const SAY = {
+    diff: 'difference',
+    after: 'this build',
+    before: 'baseline',
+};
+/**
+ * The magnification and offset that put one region in the middle of the window.
+ *
+ * The clamp on the second axis is what keeps the crop a picture rather than a
+ * coordinate: a region near the top of a capture, centred honestly, would put
+ * half the window above the first row of the image, and a reviewer would be
+ * looking at a difference with a band of nothing over it. So the plate is allowed
+ * to be off-centre when the region is near an edge, and is centred outright when
+ * the whole capture is smaller than the window — which is most stories.
+ */
+export function frameOf(region, box, window) {
+    const wanted = Math.min(window.width / (region.width + PAD * 2), window.height / (region.height + PAD * 2));
+    const scale = Math.min(CLOSEST, Math.max(FURTHEST, wanted));
+    return {
+        scale,
+        left: place(region.x + region.width / 2, box.width, window.width, scale),
+        top: place(region.y + region.height / 2, box.height, window.height, scale),
+        whole: region.width * scale <= window.width && region.height * scale <= window.height,
+    };
+}
+/** One axis of {@link frameOf}: centre on the region, then refuse to leave the plate. */
+function place(centre, extent, window, scale) {
+    const drawn = extent * scale;
+    if (drawn <= window)
+        return (window - drawn) / 2;
+    return Math.min(0, Math.max(window - drawn, window / 2 - centre * scale));
+}
+/**
+ * Which of the appearances get a picture.
+ *
+ * Report order within a shape, so the crop shown is the one the docket lists
+ * first rather than the biggest — the same rule the leading cause is chosen by,
+ * and for the same reason: largest-first names the container that reflowed.
+ */
+export function sightings(appearances) {
+    const seen = new Set();
+    const found = [];
+    for (const appearance of appearances) {
+        const at = leadOf(appearance.subject);
+        if (at === undefined)
+            continue;
+        if (appearance.shape !== undefined) {
+            if (seen.has(appearance.shape))
+                continue;
+            seen.add(appearance.shape);
+        }
+        found.push({
+            appearance,
+            at,
+            shared: appearance.shape === undefined
+                ? 1
+                : appearances.filter((each) => each.shape === appearance.shape).length,
+        });
+    }
+    return found;
+}
+/**
+ * The strip, and the one control on it.
+ *
+ * The switch is card-level rather than per crop, because the question a reviewer
+ * asks is *did all of these move the same way* and answering it means moving them
+ * together. A layer that has been asked for once stays mounted and switches
+ * opacity, so returning to it does not go through a frame of nothing — a flash
+ * reads as a third state, and on a difference of twenty pixels it is the loudest
+ * thing on screen.
+ */
+export function Look({ client, build, component, appearances, onOpen, }) {
+    // Every layer ever asked for, most recent first. A list rather than one
+    // selection: what is showing and what is loaded are different questions, and
+    // unmounting the layer somebody just left is how a flip becomes a fetch.
+    const [asked, setAsked] = useState([]);
+    const found = sightings(appearances).filter(({ appearance }) => LAYERS.some((layer) => appearance.subject.has[layer]));
+    const offered = LAYERS.filter((layer) => found.some(({ appearance }) => appearance.subject.has[layer]));
+    const first = offered[0];
+    if (first === undefined)
+        return null;
+    const showing = asked[0] ?? first;
+    const mounted = new Set([first, ...asked]);
+    const look = (layer) => setAsked((was) => [layer, ...was.filter((each) => each !== layer)]);
+    return (_jsxs(_Fragment, { children: [offered.length === 1 ? null : (_jsx("p", { className: "va-origin-look", children: _jsx("span", { className: "va-modes", children: offered.map((layer) => (_jsx("button", { type: "button", className: layer === showing ? 'va-mode va-current' : 'va-mode', "aria-pressed": layer === showing, onClick: () => look(layer), children: SAY[layer] }, layer))) }) })), _jsx("div", { className: "va-look", children: found.map((sighting) => (_jsx(Sighted, { client: client, build: build, component: component, sighting: sighting, showing: showing, mounted: mounted, onOpen: onOpen }, sighting.appearance.subject.subject))) })] }));
+}
+/** One crop, its caption, and the click that opens the whole render. */
+function Sighted({ client, build, component, sighting, showing, mounted, onOpen, }) {
+    const { appearance, at, shared } = sighting;
+    const subject = appearance.subject;
+    const body = (_jsx(Crop, { client: client, build: build, subject: subject, at: at, showing: showing, mounted: mounted }));
+    const caption = (_jsxs("span", { className: "va-sight-note", children: [subject.subject, " \u00B7 ", number(appearance.pixels), " px", shared === 1 ? '' : ` · ${count(shared, 'place')}`] }));
+    if (onOpen === undefined) {
+        return (_jsxs("span", { className: "va-sight", children: [body, caption] }));
+    }
+    return (_jsxs("button", { type: "button", className: "va-sight", onClick: () => onOpen(subject.subject), title: `Open ${subject.subject} — ${component} at ${number(at.x)}, ${number(at.y)}`, children: [body, caption] }));
+}
+/**
+ * Whether this crop's window has come near the viewport.
+ *
+ * A renderer without the observer is told yes at once. A deferral nothing can
+ * lift is a permanently empty frame, which is the exact failure `loading="lazy"`
+ * had here — and a static render has no scroll to wait for.
+ */
+function useSeen() {
+    const [seen, setSeen] = useState(() => typeof IntersectionObserver === 'undefined');
+    const watch = useCallback((node) => {
+        if (node === null || typeof IntersectionObserver === 'undefined')
+            return undefined;
+        const observer = new IntersectionObserver((entries) => {
+            if (entries.some((entry) => entry.isIntersecting))
+                setSeen(true);
+        }, 
+        // A screen ahead of the scroll, so the crop is decoded by the time it is
+        // reached rather than arriving after it.
+        { rootMargin: '600px' });
+        observer.observe(node);
+        return () => observer.disconnect();
+    }, []);
+    return [watch, seen];
+}
+/**
+ * The readings that have been asked for, at one magnification, region ringed.
+ *
+ * The layers are placed exactly as the stage places them — each at its own share
+ * of the union box — because that is the one part of this that is easy to get
+ * wrong invisibly. A baseline stretched to the candidate's width turns a width
+ * change into a hairline, and at 3× on a 130-pixel region the hairline is off
+ * screen entirely. The mask is the exception and needs no share: the comparison
+ * drew it on the box it padded both captures to.
+ */
+function Crop({ client, build, subject, at, showing, mounted, }) {
+    const [watch, seen] = useSeen();
+    const box = union(subject.size, subject.baseline);
+    if (box === undefined) {
+        return (_jsx("span", { className: "va-crop va-crop-unplaced", style: boxOf(WINDOW), children: _jsx("span", { className: "va-note", children: "This run did not record the capture\u2019s size." }) }));
+    }
+    // Said rather than drawn empty. The switch is card-level, so a render the run
+    // kept no baseline for is asked for one, and a blank window under a red ring
+    // reads as a difference nobody can see rather than an image nobody kept.
+    if (!subject.has[showing]) {
+        return (_jsx("span", { className: "va-crop va-crop-unplaced", style: boxOf(WINDOW), children: _jsxs("span", { className: "va-note", children: ["No ", SAY[showing], " was kept for this render."] }) }));
+    }
+    const frame = frameOf(at, box, WINDOW);
+    const plate = {
+        height: `${String(box.height * frame.scale)}px`,
+        left: `${String(frame.left)}px`,
+        top: `${String(frame.top)}px`,
+        width: `${String(box.width * frame.scale)}px`,
+    };
+    return (_jsxs("span", { className: "va-crop", style: boxOf(WINDOW), ref: watch, children: [_jsxs("span", { className: "va-crop-plate", style: plate, children: [seen
+                        ? LAYERS.filter((layer) => mounted.has(layer) && subject.has[layer]).map((layer) => (_jsx("img", { src: client.imageUrl(build, subject.subject, layer), alt: "", decoding: "async", style: { ...spread(layer, subject, box), opacity: layer === showing ? 1 : 0 } }, layer)))
+                        : null, _jsx("span", { className: "va-crop-box", style: {
+                            height: `${String((at.height / box.height) * 100)}%`,
+                            left: `${String((at.x / box.width) * 100)}%`,
+                            top: `${String((at.y / box.height) * 100)}%`,
+                            width: `${String((at.width / box.width) * 100)}%`,
+                        } })] }), frame.whole ? null : _jsx("span", { className: "va-crop-part", children: "part of it" })] }));
+}
+/** One layer's share of the plate. The mask already spans it; the readings may not. */
+function spread(layer, subject, box) {
+    if (layer === 'diff')
+        return undefined;
+    return share(layer === 'after' ? subject.size : subject.baseline, box);
+}
+/** The window's own dimensions, written where a stylesheet cannot know them. */
+function boxOf(window) {
+    return { height: `${String(window.height)}px`, width: `${String(window.width)}px` };
+}
+//# sourceMappingURL=look.js.map

package/dist/ui/look.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"look.js","sourceRoot":"","sources":["../../src/ui/look.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n * Looking at a change from the card that decides it.\n *\n * The docket answers *what moved and why*, and then offers two buttons. That is\n * one question short: a reviewer approving a restyle of `Button` across eleven\n * renders has been told the name of the component, the size of the difference and\n * the shape it repeats in, and has not been shown the difference. Sending them to\n * the full stage for that is sending them away from the decision — a route\n * capture is nine thousand pixels tall, the difference is a hundred and thirty\n * across, and finding it is a scroll they perform once per subject.\n *\n * So the change is brought to the card, cropped to where the run measured it.\n *\n * ## One crop per shape, not one per place\n *\n * The card's own argument is *one edit, N places*. A strip of eleven thumbnails\n * would contradict it in the same breath as making it, and would ask the browser\n * to decode eleven full-page captures to say a thing the fingerprints already\n * said. What is drawn instead is one crop per distinct shape, which is exactly\n * the set the card claims is redundant — if two of them look different, the claim\n * was wrong and the reviewer can see that it was.\n *\n * An appearance whose run recorded no shape is its own crop. Absent is not equal:\n * two differences nothing characterised have not been shown to match, and folding\n * them together would hide one behind a picture of the other.\n *\n * ## The difference is the first layer\n *\n * The strip opens on the mask the comparison drew. A crop of the candidate is a\n * picture of the component, and a reviewer reading one against a baseline they\n * remember is redoing by eye the comparison the run already did to the pixel. The\n * two readings are one press behind it and stay mounted once asked for, so moving\n * between the three is a repaint rather than a fetch.\n *\n * ## Deferred by the window, not by a button\n *\n * A route candidate here is 1280 × 9000 and costs about 46MB of bitmap to decode,\n * and a change with six shapes asks for six of them. That cost is why the strip\n * used to sit behind a *look at the change* button — which priced every difference\n * on the page at a click, and there is no reviewer who does not want to see the\n * difference. It also capped the strip at three, so a change with six shapes drew\n * half of itself and counted the rest.\n *\n * So the deferral moved to where the cost is. Each crop asks for its raster when\n * its own window comes near the viewport, and only for the layer being shown.\n * `loading=\"lazy\"` cannot do that job here: the plate is the whole capture\n * translated so the region lands in a 264px window, which on a mobile route is a\n * 17,000px offset — the browser sees a box far outside the viewport and defers it\n * forever, leaving a red ring over an empty frame. What is watched instead is the\n * window, which is 264 × 176 and sitting exactly where the reviewer is looking.\n */\n\nimport { useCallback, useState, type CSSProperties, type ReactElement } from 'react';\nimport type { RegionRecord } from '@variance-authority/report';\nimport type { ReviewClient } from './client.js';\nimport type { Appearance } from './grouping.js';\nimport { leadOf } from './lead.js';\nimport { count, number } from './text.js';\nimport { share, union, type Size } from './viewer.js';\n\n/**\n * The crop window, in CSS pixels.\n *\n * Fixed, and the same for every crop in a strip. Sizing each window to its own\n * region would make the strip a bar chart of region areas, which is the ranking\n * by area this whole surface exists to refuse — and it would do it in the one\n * place a reviewer reads as *how big is this change*.\n */\nconst WINDOW: Size = { width: 264, height: 176 };\n\n/** Source pixels kept around the region, so the difference has a page to be on. */\nconst PAD = 20;\n\n/**\n * How far the crop may be pushed, in either direction.\n *\n * Below 1:1 a two-pixel shift is handed to the resampler, which is the whole\n * reason the sheet refuses smoothing — but a region larger than the window has to\n * come down or it is not a picture of anything, so the floor is a quarter rather\n * than one, and {@link Frame.whole} says which of the two happened.\n */\nconst FURTHEST = 0.25;\nconst CLOSEST = 8;\n\n/**\n * The three readings, in the order they are offered and preferred.\n *\n * `diff` first because it is the answer rather than the evidence for it. The\n * names are the stage's, so a reviewer who opens the full render finds the same\n * three words on the same three things.\n */\ntype Layer = 'diff' | 'after' | 'before';\n\nconst LAYERS: readonly Layer[] = ['diff', 'after', 'before'];\n\nconst SAY: Readonly<Record<Layer, string>> = {\n  diff: 'difference',\n  after: 'this build',\n  before: 'baseline',\n};\n\n/** Where the plate sits inside the window, and at what magnification. */\nexport interface Frame {\n  readonly scale: number;\n  /** The plate's offset inside the window, in CSS pixels. Usually negative. */\n  readonly left: number;\n  readonly top: number;\n  /** `false` when the region is bigger than the window even pushed all the way out. */\n  readonly whole: boolean;\n}\n\n/**\n * The magnification and offset that put one region in the middle of the window.\n *\n * The clamp on the second axis is what keeps the crop a picture rather than a\n * coordinate: a region near the top of a capture, centred honestly, would put\n * half the window above the first row of the image, and a reviewer would be\n * looking at a difference with a band of nothing over it. So the plate is allowed\n * to be off-centre when the region is near an edge, and is centred outright when\n * the whole capture is smaller than the window — which is most stories.\n */\nexport function frameOf(region: RegionRecord, box: Size, window: Size): Frame {\n  const wanted = Math.min(\n    window.width / (region.width + PAD * 2),\n    window.height / (region.height + PAD * 2),\n  );\n  const scale = Math.min(CLOSEST, Math.max(FURTHEST, wanted));\n\n  return {\n    scale,\n    left: place(region.x + region.width / 2, box.width, window.width, scale),\n    top: place(region.y + region.height / 2, box.height, window.height, scale),\n    whole: region.width * scale <= window.width && region.height * scale <= window.height,\n  };\n}\n\n/** One axis of {@link frameOf}: centre on the region, then refuse to leave the plate. */\nfunction place(centre: number, extent: number, window: number, scale: number): number {\n  const drawn = extent * scale;\n  if (drawn <= window) return (window - drawn) / 2;\n  return Math.min(0, Math.max(window - drawn, window / 2 - centre * scale));\n}\n\n/** One difference worth drawing, and how many places carry the same one. */\nexport interface Sighting {\n  readonly appearance: Appearance;\n  readonly at: RegionRecord;\n  /** Places carrying this exact shape. `1` when the run recorded none. */\n  readonly shared: number;\n}\n\n/**\n * Which of the appearances get a picture.\n *\n * Report order within a shape, so the crop shown is the one the docket lists\n * first rather than the biggest — the same rule the leading cause is chosen by,\n * and for the same reason: largest-first names the container that reflowed.\n */\nexport function sightings(appearances: readonly Appearance[]): readonly Sighting[] {\n  const seen = new Set<string>();\n  const found: Sighting[] = [];\n\n  for (const appearance of appearances) {\n    const at = leadOf(appearance.subject);\n    if (at === undefined) continue;\n    if (appearance.shape !== undefined) {\n      if (seen.has(appearance.shape)) continue;\n      seen.add(appearance.shape);\n    }\n    found.push({\n      appearance,\n      at,\n      shared:\n        appearance.shape === undefined\n          ? 1\n          : appearances.filter((each) => each.shape === appearance.shape).length,\n    });\n  }\n\n  return found;\n}\n\n/**\n * The strip, and the one control on it.\n *\n * The switch is card-level rather than per crop, because the question a reviewer\n * asks is *did all of these move the same way* and answering it means moving them\n * together. A layer that has been asked for once stays mounted and switches\n * opacity, so returning to it does not go through a frame of nothing — a flash\n * reads as a third state, and on a difference of twenty pixels it is the loudest\n * thing on screen.\n */\nexport function Look({\n  client,\n  build,\n  component,\n  appearances,\n  onOpen,\n}: {\n  readonly client: ReviewClient;\n  readonly build: string;\n  readonly component: string;\n  readonly appearances: readonly Appearance[];\n  readonly onOpen?: ((subject: string) => void) | undefined;\n}): ReactElement | null {\n  // Every layer ever asked for, most recent first. A list rather than one\n  // selection: what is showing and what is loaded are different questions, and\n  // unmounting the layer somebody just left is how a flip becomes a fetch.\n  const [asked, setAsked] = useState<readonly Layer[]>([]);\n\n  const found = sightings(appearances).filter(({ appearance }) =>\n    LAYERS.some((layer) => appearance.subject.has[layer]),\n  );\n\n  const offered = LAYERS.filter((layer) =>\n    found.some(({ appearance }) => appearance.subject.has[layer]),\n  );\n  const first = offered[0];\n  if (first === undefined) return null;\n\n  const showing = asked[0] ?? first;\n  const mounted = new Set<Layer>([first, ...asked]);\n  const look = (layer: Layer): void =>\n    setAsked((was) => [layer, ...was.filter((each) => each !== layer)]);\n\n  return (\n    <>\n      {offered.length === 1 ? null : (\n        <p className=\"va-origin-look\">\n          <span className=\"va-modes\">\n            {offered.map((layer) => (\n              <button\n                key={layer}\n                type=\"button\"\n                className={layer === showing ? 'va-mode va-current' : 'va-mode'}\n                aria-pressed={layer === showing}\n                onClick={() => look(layer)}\n              >\n                {SAY[layer]}\n              </button>\n            ))}\n          </span>\n        </p>\n      )}\n\n      <div className=\"va-look\">\n        {found.map((sighting) => (\n          <Sighted\n            key={sighting.appearance.subject.subject}\n            client={client}\n            build={build}\n            component={component}\n            sighting={sighting}\n            showing={showing}\n            mounted={mounted}\n            onOpen={onOpen}\n          />\n        ))}\n      </div>\n    </>\n  );\n}\n\n/** One crop, its caption, and the click that opens the whole render. */\nfunction Sighted({\n  client,\n  build,\n  component,\n  sighting,\n  showing,\n  mounted,\n  onOpen,\n}: {\n  readonly client: ReviewClient;\n  readonly build: string;\n  readonly component: string;\n  readonly sighting: Sighting;\n  readonly showing: Layer;\n  readonly mounted: ReadonlySet<Layer>;\n  readonly onOpen?: ((subject: string) => void) | undefined;\n}): ReactElement {\n  const { appearance, at, shared } = sighting;\n  const subject = appearance.subject;\n\n  const body = (\n    <Crop\n      client={client}\n      build={build}\n      subject={subject}\n      at={at}\n      showing={showing}\n      mounted={mounted}\n    />\n  );\n\n  const caption = (\n    <span className=\"va-sight-note\">\n      {subject.subject} · {number(appearance.pixels)} px\n      {shared === 1 ? '' : ` · ${count(shared, 'place')}`}\n    </span>\n  );\n\n  if (onOpen === undefined) {\n    return (\n      <span className=\"va-sight\">\n        {body}\n        {caption}\n      </span>\n    );\n  }\n\n  return (\n    <button\n      type=\"button\"\n      className=\"va-sight\"\n      onClick={() => onOpen(subject.subject)}\n      title={`Open ${subject.subject} — ${component} at ${number(at.x)}, ${number(at.y)}`}\n    >\n      {body}\n      {caption}\n    </button>\n  );\n}\n\n/**\n * Whether this crop's window has come near the viewport.\n *\n * A renderer without the observer is told yes at once. A deferral nothing can\n * lift is a permanently empty frame, which is the exact failure `loading=\"lazy\"`\n * had here — and a static render has no scroll to wait for.\n */\nfunction useSeen(): readonly [(node: HTMLSpanElement | null) => (() => void) | undefined, boolean] {\n  const [seen, setSeen] = useState(() => typeof IntersectionObserver === 'undefined');\n\n  const watch = useCallback((node: HTMLSpanElement | null) => {\n    if (node === null || typeof IntersectionObserver === 'undefined') return undefined;\n    const observer = new IntersectionObserver(\n      (entries) => {\n        if (entries.some((entry) => entry.isIntersecting)) setSeen(true);\n      },\n      // A screen ahead of the scroll, so the crop is decoded by the time it is\n      // reached rather than arriving after it.\n      { rootMargin: '600px' },\n    );\n    observer.observe(node);\n    return () => observer.disconnect();\n  }, []);\n\n  return [watch, seen];\n}\n\n/**\n * The readings that have been asked for, at one magnification, region ringed.\n *\n * The layers are placed exactly as the stage places them — each at its own share\n * of the union box — because that is the one part of this that is easy to get\n * wrong invisibly. A baseline stretched to the candidate's width turns a width\n * change into a hairline, and at 3× on a 130-pixel region the hairline is off\n * screen entirely. The mask is the exception and needs no share: the comparison\n * drew it on the box it padded both captures to.\n */\nfunction Crop({\n  client,\n  build,\n  subject,\n  at,\n  showing,\n  mounted,\n}: {\n  readonly client: ReviewClient;\n  readonly build: string;\n  readonly subject: Appearance['subject'];\n  readonly at: RegionRecord;\n  readonly showing: Layer;\n  readonly mounted: ReadonlySet<Layer>;\n}): ReactElement {\n  const [watch, seen] = useSeen();\n  const box = union(subject.size, subject.baseline);\n\n  if (box === undefined) {\n    return (\n      <span className=\"va-crop va-crop-unplaced\" style={boxOf(WINDOW)}>\n        <span className=\"va-note\">This run did not record the capture&rsquo;s size.</span>\n      </span>\n    );\n  }\n\n  // Said rather than drawn empty. The switch is card-level, so a render the run\n  // kept no baseline for is asked for one, and a blank window under a red ring\n  // reads as a difference nobody can see rather than an image nobody kept.\n  if (!subject.has[showing]) {\n    return (\n      <span className=\"va-crop va-crop-unplaced\" style={boxOf(WINDOW)}>\n        <span className=\"va-note\">No {SAY[showing]} was kept for this render.</span>\n      </span>\n    );\n  }\n\n  const frame = frameOf(at, box, WINDOW);\n  const plate: CSSProperties = {\n    height: `${String(box.height * frame.scale)}px`,\n    left: `${String(frame.left)}px`,\n    top: `${String(frame.top)}px`,\n    width: `${String(box.width * frame.scale)}px`,\n  };\n\n  return (\n    <span className=\"va-crop\" style={boxOf(WINDOW)} ref={watch}>\n      <span className=\"va-crop-plate\" style={plate}>\n        {seen\n          ? LAYERS.filter((layer) => mounted.has(layer) && subject.has[layer]).map((layer) => (\n              <img\n                key={layer}\n                src={client.imageUrl(build, subject.subject, layer)}\n                alt=\"\"\n                decoding=\"async\"\n                style={{ ...spread(layer, subject, box), opacity: layer === showing ? 1 : 0 }}\n              />\n            ))\n          : null}\n        <span\n          className=\"va-crop-box\"\n          style={{\n            height: `${String((at.height / box.height) * 100)}%`,\n            left: `${String((at.x / box.width) * 100)}%`,\n            top: `${String((at.y / box.height) * 100)}%`,\n            width: `${String((at.width / box.width) * 100)}%`,\n          }}\n        />\n      </span>\n      {frame.whole ? null : <span className=\"va-crop-part\">part of it</span>}\n    </span>\n  );\n}\n\n/** One layer's share of the plate. The mask already spans it; the readings may not. */\nfunction spread(\n  layer: Layer,\n  subject: Appearance['subject'],\n  box: Size,\n): CSSProperties | undefined {\n  if (layer === 'diff') return undefined;\n  return share(layer === 'after' ? subject.size : subject.baseline, box);\n}\n\n/** The window's own dimensions, written where a stylesheet cannot know them. */\nfunction boxOf(window: Size): CSSProperties {\n  return { height: `${String(window.height)}px`, width: `${String(window.width)}px` };\n}\n"]}

package/dist/ui/mark.d.ts

@@ -0,0 +1,11 @@
+import type { ReactElement } from 'react';
+/**
+ * The wordmark's glyph: two strokes and the variance path that crosses them.
+ *
+ * The same four paths the site draws, with the two strokes taken from
+ * `currentColor` rather than from ivory — this surface has a second scheme, and a
+ * mark that names its own foreground disappears into whichever ground it did not
+ * expect. The orange pair is the mark and stays literal.
+ */
+export declare function Mark(): ReactElement;
+//# sourceMappingURL=mark.d.ts.map

package/dist/ui/mark.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * The wordmark's glyph: two strokes and the variance path that crosses them.
+ *
+ * The same four paths the site draws, with the two strokes taken from
+ * `currentColor` rather than from ivory — this surface has a second scheme, and a
+ * mark that names its own foreground disappears into whichever ground it did not
+ * expect. The orange pair is the mark and stays literal.
+ */
+export function Mark() {
+    return (_jsxs("svg", { className: "va-brand", viewBox: "0 0 512 320", width: "34", height: "21", "aria-hidden": "true", children: [_jsx("path", { fill: "currentColor", d: "M64 54H159L256 266H160Z" }), _jsx("path", { fill: "currentColor", d: "M331 28H419L494 266H397Z" }), _jsx("path", { fill: "#ff4a19", d: "M256 266L202 152L283 28H376L301 165Z" }), _jsx("path", { fill: "#d83a13", d: "M202 152L256 266L301 165L264 103Z" })] }));
+}
+//# sourceMappingURL=mark.js.map

package/dist/ui/mark.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mark.js","sourceRoot":"","sources":["../../src/ui/mark.tsx"],"names":[],"mappings":";AAEA;;;;;;;GAOG;AACH,MAAM,UAAU,IAAI;IAClB,OAAO,CACL,eAAK,SAAS,EAAC,UAAU,EAAC,OAAO,EAAC,aAAa,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,iBAAa,MAAM,aACvF,eAAM,IAAI,EAAC,cAAc,EAAC,CAAC,EAAC,yBAAyB,GAAG,EACxD,eAAM,IAAI,EAAC,cAAc,EAAC,CAAC,EAAC,0BAA0B,GAAG,EACzD,eAAM,IAAI,EAAC,SAAS,EAAC,CAAC,EAAC,sCAAsC,GAAG,EAChE,eAAM,IAAI,EAAC,SAAS,EAAC,CAAC,EAAC,mCAAmC,GAAG,IACzD,CACP,CAAC;AACJ,CAAC","sourcesContent":["import type { ReactElement } from 'react';\n\n/**\n * The wordmark's glyph: two strokes and the variance path that crosses them.\n *\n * The same four paths the site draws, with the two strokes taken from\n * `currentColor` rather than from ivory — this surface has a second scheme, and a\n * mark that names its own foreground disappears into whichever ground it did not\n * expect. The orange pair is the mark and stays literal.\n */\nexport function Mark(): ReactElement {\n  return (\n    <svg className=\"va-brand\" viewBox=\"0 0 512 320\" width=\"34\" height=\"21\" aria-hidden=\"true\">\n      <path fill=\"currentColor\" d=\"M64 54H159L256 266H160Z\" />\n      <path fill=\"currentColor\" d=\"M331 28H419L494 266H397Z\" />\n      <path fill=\"#ff4a19\" d=\"M256 266L202 152L283 28H376L301 165Z\" />\n      <path fill=\"#d83a13\" d=\"M202 152L256 266L301 165L264 103Z\" />\n    </svg>\n  );\n}\n"]}

package/dist/ui/moved.d.ts

@@ -0,0 +1,121 @@
+/**
+ * The sentence the page was missing: what changed, rather than how much of it.
+ *
+ * Every other line on a change page is a fact *about* the difference — how many
+ * renders carry it, whether the commit reaches it, whether the last build showed
+ * it already. None of them is the difference. A reviewer asked to approve
+ * something has to be told what it is, and *2 distinct differences, in 7 renders,
+ * 30,373 px in total* tells them what was measured instead.
+ *
+ * [`sense.ts`](./sense.ts) does the reading. This draws the two halves of it, and
+ * the second half is the one worth defending: a component the hashes say moved
+ * and no region names is not a rendering detail, it is the picture failing on
+ * exactly the change that matters most. An edit that reflows its neighbours
+ * merges into one blob, the blob fits no component, and the name that comes back
+ * is the document root — so the change with the widest consequence is the one
+ * most likely to arrive anonymous. It is printed here as a finding rather than
+ * left as a silence, because until it is, the page is confidently describing a
+ * subject it never mentioned.
+ */
+import type { ReactElement } from 'react';
+import type { SubjectView } from '../review-types.js';
+import { type Ruler } from './distance.js';
+import type { Handed } from './handed.js';
+import type { Route } from './route.js';
+import { type Across, type Elsewhere } from './sense.js';
+/**
+ * The lead sentence: what this change is, before anything about its size.
+ *
+ * It goes first because it is the only line on the page a reviewer cannot decide
+ * without. Nothing at all when no render here compared hashes — a page whose
+ * loudest line said the baseline format is old would be spending it on a fact
+ * about the store rather than about the change.
+ */
+export declare function MovedLead({ component, across, handed, }: {
+    readonly component: string;
+    readonly across: Across;
+    /** Bands a parent owns, subtracted here and named by {@link HandedTo}. */
+    readonly handed: readonly Handed[];
+}): ReactElement | null;
+/**
+ * The bands this component was handed, each under the name that owns it.
+ *
+ * Directly under the lead, because it is the other half of the same sentence:
+ * the lead now says less than the hashes did, and this is where the rest went.
+ * The count is the evidence and not decoration — *moved in the 6 renders
+ * ProductCard draws, still in the other 10* is the partition [`handed.ts`](./handed.ts)
+ * found, and it is the whole reason the band is filed here rather than on the
+ * component's own line.
+ *
+ * The holder is the link when the docket has a page for it. A reviewer reading
+ * *what it announces is `ProductCard`’s* has exactly one next move.
+ */
+export declare function HandedTo({ handed, build, changes, go, }: {
+    readonly handed: readonly Handed[];
+    readonly build: string;
+    /** Components with a change page of their own, so a link goes somewhere. */
+    readonly changes: ReadonlySet<string>;
+    readonly go: (route: Route) => void;
+}): ReactElement | null;
+/**
+ * The rest of the reading: what the picture lost, and what moved beside it.
+ *
+ * Separate from {@link MovedLead} because it is detail and the lead is not, and
+ * it renders nothing at all when there is no detail to give. A heading over a
+ * sentence saying everything was ordinary is how a reader learns to skip the
+ * place the exceptions will appear.
+ */
+export declare function WhatMoved({ component, across, far, except, }: {
+    readonly component: string;
+    readonly across: Across;
+    /** How far each passenger is from this change, when a diff was read. */
+    readonly far?: Ruler | undefined;
+    /**
+     * Names a section above already accounted for, left out of the list here.
+     *
+     * A consumer that reflowed is in both piles by construction — it draws this
+     * component, and it moved in the same renders. Above it is placed against the
+     * ones that held still, which is what makes it readable; here it would be a
+     * name in an alphabetised list with a band beside it, saying the same thing
+     * with the comparison removed.
+     */
+    readonly except?: ReadonlySet<string> | undefined;
+}): ReactElement | null;
+/**
+ * The same reading for one render, where the join is worth showing in full.
+ *
+ * A change page folds the renders together and answers *what did this component
+ * do*. Here both tiers are in front of the reviewer at once, so the useful shape
+ * is the disagreement: which names the hashes and the regions agree on, which the
+ * hashes hold alone, and which the regions hold alone. The third pile is the one
+ * a reader is most likely to get backwards — a component a region named while its
+ * own hashes held still was pushed, and calling that a change is the ranking this
+ * project exists to correct.
+ */
+export declare function MovedHere({ subject, anchor, far, }: {
+    readonly subject: SubjectView;
+    /** The change this render is filed under, which `far` measures from. */
+    readonly anchor?: string | undefined;
+    readonly far?: Ruler | undefined;
+}): ReactElement;
+/**
+ * The renders this change moved in that the docket files under another name.
+ *
+ * The gap between the two tiers, printed. A subject belongs to whichever
+ * component its leading *region* resolved to, and a commit that edits a button
+ * and a price string in the same card files every card under whichever of the two
+ * drew the larger box — so the button's page can list seven renders of the twelve
+ * its hashes moved in, and be silent about five.
+ *
+ * Silent is the problem. Approving here decides the renders here; the five stay
+ * open under a name nobody looking for this change would open. So they are named,
+ * with the change they were filed under, and with the one sentence that keeps a
+ * reviewer from assuming the button is finished.
+ */
+export declare function MovedElsewhere({ component, found, build, go, }: {
+    readonly component: string;
+    readonly found: readonly Elsewhere[];
+    readonly build: string;
+    readonly go: (route: Route) => void;
+}): ReactElement | null;
+//# sourceMappingURL=moved.d.ts.map

package/dist/ui/moved.js

@@ -0,0 +1,143 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { howFar, placed } from './distance.js';
+import { senseOf, senseOfSubject, senses, } from './sense.js';
+import { Go } from './shell.js';
+import { count } from './text.js';
+/** How many render names are listed before the rest become a count. */
+const NAMED = 4;
+/**
+ * The lead sentence: what this change is, before anything about its size.
+ *
+ * It goes first because it is the only line on the page a reviewer cannot decide
+ * without. Nothing at all when no render here compared hashes — a page whose
+ * loudest line said the baseline format is old would be spending it on a fact
+ * about the store rather than about the change.
+ */
+export function MovedLead({ component, across, handed, }) {
+    const given = new Set(handed.map((each) => each.band));
+    const own = across.bands.filter((band) => !given.has(band));
+    if (own.length > 0) {
+        return (_jsxs("p", { className: "va-decide-lead", children: [_jsx("strong", { children: component }), " moved in ", _jsx("em", { children: senses(own) }), "."] }));
+    }
+    if (across.measured === 0)
+        return null;
+    // Two different nothings. Everything this component moved in belongs to
+    // somebody above it, which the lines under this name — against a component
+    // whose own hashes held still in every render, which is collateral wearing a
+    // name because the largest differing area happened to resolve here.
+    return given.size > 0 ? (_jsxs("p", { className: "va-decide-lead", children: ["Nothing of ", _jsx("strong", { children: component }), "\u2019s own moved."] })) : (_jsxs("p", { className: "va-decide-lead", children: ["Nothing in ", _jsx("strong", { children: component }), "\u2019s own hashes moved: every render here was pushed by something else on the page."] }));
+}
+/**
+ * The bands this component was handed, each under the name that owns it.
+ *
+ * Directly under the lead, because it is the other half of the same sentence:
+ * the lead now says less than the hashes did, and this is where the rest went.
+ * The count is the evidence and not decoration — *moved in the 6 renders
+ * ProductCard draws, still in the other 10* is the partition [`handed.ts`](./handed.ts)
+ * found, and it is the whole reason the band is filed here rather than on the
+ * component's own line.
+ *
+ * The holder is the link when the docket has a page for it. A reviewer reading
+ * *what it announces is `ProductCard`’s* has exactly one next move.
+ */
+export function HandedTo({ handed, build, changes, go, }) {
+    if (handed.length === 0)
+        return null;
+    return (_jsx(_Fragment, { children: handed.map(({ band, holders, moved, held }) => (_jsxs("p", { className: "va-handed", children: [_jsx("em", { children: senseOf(band) }), " is", ' ', holders.map((holder, index) => (_jsxs("span", { children: [index === 0 ? null : ' and ', changes.has(holder) ? (_jsx(Go, { to: { page: 'change', build, change: holder }, go: go, className: "va-handed-go", title: `The decision belongs to ${holder}, which is a change on this build`, children: holder })) : (_jsx("strong", { children: holder }))] }, holder))), "\u2019s.", ' ', _jsxs("span", { className: "va-note", children: ["Moved in ", count(moved, 'render'), " ", holders.length === 1 ? 'it draws' : 'they draw', ", still in the other ", held, "."] })] }, band))) }));
+}
+/**
+ * The rest of the reading: what the picture lost, and what moved beside it.
+ *
+ * Separate from {@link MovedLead} because it is detail and the lead is not, and
+ * it renders nothing at all when there is no detail to give. A heading over a
+ * sentence saying everything was ordinary is how a reader learns to skip the
+ * place the exceptions will appear.
+ */
+export function WhatMoved({ component, across, far, except, }) {
+    const alongside = across.alongside.filter((other) => except?.has(other.component) !== true);
+    const quiet = across.missedIn.length === 0 && alongside.length === 0 && across.unmeasured.length === 0;
+    if (quiet)
+        return null;
+    return (_jsxs("section", { className: "va-moved", children: [_jsx("h2", { children: "What moved with it" }), across.missedIn.length === 0 ? null : (_jsxs("p", { className: "va-moved-lost", children: ["In ", count(across.missedIn.length, 'render'), " no region carries", ' ', _jsx("strong", { children: component }), " \u2014 the difference merged into a larger area and resolved elsewhere, so the picture there is not a picture of this.", ' ', _jsx(Renders, { subjects: across.missedIn })] })), alongside.length === 0 ? null : (_jsxs(_Fragment, { children: [across.missedIn.length === 0 ? null : _jsx("h3", { children: "Moving beside it" }), _jsx("ul", { className: "va-moved-with", children: alongside.map((other) => (_jsxs("li", { children: [_jsx("span", { className: "va-moved-name", children: other.component }), ' ', _jsx("span", { className: "va-note", children: senses(other.bands) }), _jsx(Far, { component: other.component, far: far })] }, other.component))) }), _jsx(Unplaced, { anchor: component, components: alongside.map((other) => other.component), far: far })] })), across.unmeasured.length === 0 ? null : (_jsxs("p", { className: "va-note", children: [count(across.unmeasured.length, 'render'), " compared against a baseline carrying no component hashes, so nothing above was measured there.", ' ', _jsx(Renders, { subjects: across.unmeasured })] }))] }));
+}
+/**
+ * The same reading for one render, where the join is worth showing in full.
+ *
+ * A change page folds the renders together and answers *what did this component
+ * do*. Here both tiers are in front of the reviewer at once, so the useful shape
+ * is the disagreement: which names the hashes and the regions agree on, which the
+ * hashes hold alone, and which the regions hold alone. The third pile is the one
+ * a reader is most likely to get backwards — a component a region named while its
+ * own hashes held still was pushed, and calling that a change is the ranking this
+ * project exists to correct.
+ */
+export function MovedHere({ subject, anchor, far, }) {
+    const sense = senseOfSubject(subject);
+    if (!sense.measured) {
+        return (_jsx("p", { className: "va-note", children: "This render was compared against a baseline carrying no component hashes, so nothing says which components moved \u2014 only where the pixels differ." }));
+    }
+    if (sense.moved.length === 0) {
+        return (_jsx("p", { className: "va-note", children: "Both revisions were read and every component hash matched. Whatever differs here is beneath the semantic tier, or belongs to a part of the page the walk assigned no component to." }));
+    }
+    return (_jsxs(_Fragment, { children: [_jsx("ul", { className: "va-moved-list", children: sense.moved.map((entry) => (_jsx(Moved, { entry: entry, anchor: anchor, far: far }, entry.component))) }), anchor === undefined ? null : (_jsx(Unplaced, { anchor: anchor, components: sense.moved.map((entry) => entry.component), far: far })), sense.pushed.length === 0 ? null : (_jsxs("p", { className: "va-note", children: ["A region names ", sense.pushed.join(', '), ", whose own hashes held still: pushed by something else, not edited."] }))] }));
+}
+/** One component, its bands, and whether the picture found it. */
+function Moved({ entry, anchor, far, }) {
+    return (_jsxs("li", { className: entry.cause ? 'va-moved-row' : 'va-moved-row va-moved-passenger', children: [_jsx("span", { className: "va-moved-name", children: entry.component }), _jsx("span", { className: "va-note", children: entry.presence === undefined ? senses(entry.bands) : entry.presence }), entry.component === anchor ? null : _jsx(Far, { component: entry.component, far: far }), entry.drawn ? null : (_jsx("span", { className: "va-mark va-alarm", title: "The hashes say this component moved, and no region in this render carries its name \u2014 the difference merged into a larger area and resolved elsewhere.", children: "no region" }))] }));
+}
+/** A few render names, then a count — a list of twenty is not read as evidence. */
+function Renders({ subjects }) {
+    const named = subjects.slice(0, NAMED);
+    const rest = subjects.length - named.length;
+    return (_jsxs("span", { className: "va-note", title: subjects.join(', '), children: [named.join(', '), rest === 0 ? '' : ` and ${count(rest, 'other')}`] }));
+}
+/**
+ * The renders this change moved in that the docket files under another name.
+ *
+ * The gap between the two tiers, printed. A subject belongs to whichever
+ * component its leading *region* resolved to, and a commit that edits a button
+ * and a price string in the same card files every card under whichever of the two
+ * drew the larger box — so the button's page can list seven renders of the twelve
+ * its hashes moved in, and be silent about five.
+ *
+ * Silent is the problem. Approving here decides the renders here; the five stay
+ * open under a name nobody looking for this change would open. So they are named,
+ * with the change they were filed under, and with the one sentence that keeps a
+ * reviewer from assuming the button is finished.
+ */
+export function MovedElsewhere({ component, found, build, go, }) {
+    if (found.length === 0)
+        return null;
+    return (_jsxs("section", { className: "va-moved", children: [_jsx("h2", { children: "Also moved, filed elsewhere" }), _jsxs("p", { className: "va-moved-lost", children: [_jsx("strong", { children: component }), "\u2019s hashes moved in ", count(found.length, 'further render'), ", where a larger difference took the name. Deciding this change does not decide them."] }), _jsx("ul", { className: "va-moved-list", children: found.map((each) => (_jsxs("li", { className: "va-moved-row", children: [_jsx(Go, { to: { page: 'subject', build, subject: each.subject }, go: go, className: "va-moved-name", children: each.subject }), _jsx("span", { className: "va-note", children: each.filedUnder === undefined ? 'no component named the cause' : `under ${each.filedUnder}` }), each.drawn ? null : (_jsx("span", { className: "va-mark va-alarm", title: "No region in that render carries this component either, so its picture is not a picture of this change.", children: "no region" }))] }, each.subject))) })] }));
+}
+/** How far a component is from the change, when the records place it. */
+function Far({ component, far, }) {
+    const said = distanceOf(far, component);
+    if (said === undefined)
+        return null;
+    return _jsx("span", { className: "va-moved-far", children: said });
+}
+function distanceOf(far, component) {
+    const distance = far?.(component);
+    return distance === undefined ? undefined : howFar(distance);
+}
+/**
+ * What the list could not place, said once instead of on every row.
+ *
+ * A reader who sees a distance on two rows and nothing on the other seven will
+ * read the silence as *near*, which is the one thing it does not mean. So the
+ * absence is stated — as a fact about the graph, not about the components, and
+ * without claiming they are unrelated. Nothing at all when the run carried no
+ * diff: `unknown` is the whole page's condition and the page says it elsewhere.
+ */
+function Unplaced({ anchor, components, far, }) {
+    if (far === undefined)
+        return null;
+    const distances = components.map((component) => far(component));
+    const lost = distances.filter((distance) => distance.kind === 'unreached').length;
+    if (lost === 0)
+        return null;
+    const some = distances.some((distance) => placed(distance));
+    return (_jsxs("p", { className: "va-note", children: ["Nothing the commit walked arrives at ", some ? count(lost, 'other') : 'any of these', ", and no file is recorded for them either, so how far they are from ", _jsx("strong", { children: anchor }), " is not something this build measured."] }));
+}
+//# sourceMappingURL=moved.js.map