@variance-authority/tribunal 0.1.0

package/dist/ui/variations.d.ts

@@ -0,0 +1,37 @@
+/**
+ * The variation lattice, drawn — the half of a run that has no baseline in it.
+ *
+ * Apart from the build page because it answers a different question. A docket
+ * says *what changed since last time*; this says *does the flag do anything*, and
+ * nothing else in the product can: a subject added behind a flag is `new`, its
+ * diff is empty, and the flag's effect is visible only by putting two pictures
+ * side by side — the comparison nobody performs. The run already made it.
+ */
+import type { VariationRecord } from '@variance-authority/report';
+import type { ReactElement } from 'react';
+/**
+ * Every subject that was read against another subject in the same run.
+ *
+ * Nothing here is a verdict, and the section is deliberately not part of the
+ * counts: a variation is a difference somebody declared on purpose, and reporting
+ * one as a regression would be reporting a subject for existing.
+ *
+ * **The order is the point, and it is not the report's.** Two states come first,
+ * because they are the two a reviewer can act on and both are silent everywhere
+ * else:
+ *
+ * - **reaches nothing** — the pair renders to one hash. An A/B arm whose flag
+ *   changes no pixel is an experiment measuring nothing, and it looks exactly like
+ *   a healthy arm in every screenshot tool there is: two subjects, both
+ *   `unchanged`, both green.
+ * - **no parent in this run** — the declaration named a subject nothing observed.
+ *   A broken link and an axis with nothing to say are not the same finding, so
+ *   they are not drawn the same way.
+ *
+ * The rest follow by subject, which is the lattice's own order: a name that
+ * extends another name sorts after it.
+ */
+export declare function Variations({ variations, }: {
+    readonly variations: readonly VariationRecord[];
+}): ReactElement | null;
+//# sourceMappingURL=variations.d.ts.map

package/dist/ui/variations.js

@@ -0,0 +1,60 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Prose } from './shell.js';
+/**
+ * Every subject that was read against another subject in the same run.
+ *
+ * Nothing here is a verdict, and the section is deliberately not part of the
+ * counts: a variation is a difference somebody declared on purpose, and reporting
+ * one as a regression would be reporting a subject for existing.
+ *
+ * **The order is the point, and it is not the report's.** Two states come first,
+ * because they are the two a reviewer can act on and both are silent everywhere
+ * else:
+ *
+ * - **reaches nothing** — the pair renders to one hash. An A/B arm whose flag
+ *   changes no pixel is an experiment measuring nothing, and it looks exactly like
+ *   a healthy arm in every screenshot tool there is: two subjects, both
+ *   `unchanged`, both green.
+ * - **no parent in this run** — the declaration named a subject nothing observed.
+ *   A broken link and an axis with nothing to say are not the same finding, so
+ *   they are not drawn the same way.
+ *
+ * The rest follow by subject, which is the lattice's own order: a name that
+ * extends another name sorts after it.
+ */
+export function Variations({ variations, }) {
+    if (variations.length === 0)
+        return null;
+    const ordered = [...variations].sort((left, right) => {
+        const byRank = rankOf(left) - rankOf(right);
+        if (byRank !== 0)
+            return byRank;
+        return left.subject < right.subject ? -1 : left.subject > right.subject ? 1 : 0;
+    });
+    return (_jsxs(_Fragment, { children: [_jsx("h2", { children: "Variations" }), _jsx("p", { className: "va-note", style: { marginBottom: '0.6rem' }, children: "Subjects read against the subject they vary from, in this run. Not verdicts \u2014 a variation is a difference somebody meant. What is worth reading is a variation that turns out to be no difference at all." }), _jsx("ul", { className: "va-variation-list", children: ordered.map((variation) => (_jsxs("li", { className: `va-variation ${STATES[rankOf(variation)] ?? ''}`, children: [_jsxs("p", { className: "va-variation-head", children: [_jsx("span", { className: "va-axis", children: axisOf(variation) }), _jsx("strong", { children: variation.subject }), variation.parent === undefined ? null : (_jsxs(_Fragment, { children: ["from ", _jsx("strong", { children: variation.parent })] })), variation.how === undefined ? (_jsx("span", { className: "va-how", children: "how this pair was found is unstated" })) : (_jsx("span", { className: "va-how", children: variation.how })), variation.unobserved === undefined || variation.unobserved.length === 0 ? null : (_jsxs("span", { className: "va-how", children: ["undecided in ", variation.unobserved.join(', ')] }))] }), _jsx("p", { className: "va-because", children: _jsx(Prose, { text: variation.because }) })] }, variation.subject))) })] }));
+}
+/** One class per rank, so the ordering and the drawing cannot disagree. */
+const STATES = ['va-inert', 'va-unlinked', ''];
+function rankOf(variation) {
+    if (variation.identical === true)
+        return 0;
+    if (variation.identical === undefined)
+        return 1;
+    return 2;
+}
+/**
+ * The axis, in the words the record earned.
+ *
+ * `identical === undefined` is not `differs`: nothing compared the pair, and the
+ * only honest short label for that is that nothing did. The distinction is the
+ * same one the column keeps nullable for.
+ */
+function axisOf(variation) {
+    if (variation.identical === undefined)
+        return 'not compared';
+    if (variation.identical)
+        return 'reaches nothing';
+    const bands = variation.bands ?? [];
+    return bands.length === 0 ? 'differs' : bands.join(' · ');
+}
+//# sourceMappingURL=variations.js.map

package/dist/ui/variations.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"variations.js","sourceRoot":"","sources":["../../src/ui/variations.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n * The variation lattice, drawn — the half of a run that has no baseline in it.\n *\n * Apart from the build page because it answers a different question. A docket\n * says *what changed since last time*; this says *does the flag do anything*, and\n * nothing else in the product can: a subject added behind a flag is `new`, its\n * diff is empty, and the flag's effect is visible only by putting two pictures\n * side by side — the comparison nobody performs. The run already made it.\n */\n\nimport type { VariationRecord } from '@variance-authority/report';\nimport type { ReactElement } from 'react';\nimport { Prose } from './shell.js';\n\n/**\n * Every subject that was read against another subject in the same run.\n *\n * Nothing here is a verdict, and the section is deliberately not part of the\n * counts: a variation is a difference somebody declared on purpose, and reporting\n * one as a regression would be reporting a subject for existing.\n *\n * **The order is the point, and it is not the report's.** Two states come first,\n * because they are the two a reviewer can act on and both are silent everywhere\n * else:\n *\n * - **reaches nothing** — the pair renders to one hash. An A/B arm whose flag\n *   changes no pixel is an experiment measuring nothing, and it looks exactly like\n *   a healthy arm in every screenshot tool there is: two subjects, both\n *   `unchanged`, both green.\n * - **no parent in this run** — the declaration named a subject nothing observed.\n *   A broken link and an axis with nothing to say are not the same finding, so\n *   they are not drawn the same way.\n *\n * The rest follow by subject, which is the lattice's own order: a name that\n * extends another name sorts after it.\n */\nexport function Variations({\n  variations,\n}: {\n  readonly variations: readonly VariationRecord[];\n}): ReactElement | null {\n  if (variations.length === 0) return null;\n\n  const ordered = [...variations].sort((left, right) => {\n    const byRank = rankOf(left) - rankOf(right);\n    if (byRank !== 0) return byRank;\n    return left.subject < right.subject ? -1 : left.subject > right.subject ? 1 : 0;\n  });\n\n  return (\n    <>\n      <h2>Variations</h2>\n      <p className=\"va-note\" style={{ marginBottom: '0.6rem' }}>\n        Subjects read against the subject they vary from, in this run. Not verdicts — a variation is\n        a difference somebody meant. What is worth reading is a variation that turns out to be no\n        difference at all.\n      </p>\n      <ul className=\"va-variation-list\">\n        {ordered.map((variation) => (\n          <li key={variation.subject} className={`va-variation ${STATES[rankOf(variation)] ?? ''}`}>\n            <p className=\"va-variation-head\">\n              <span className=\"va-axis\">{axisOf(variation)}</span>\n              <strong>{variation.subject}</strong>\n              {variation.parent === undefined ? null : (\n                <>\n                  from <strong>{variation.parent}</strong>\n                </>\n              )}\n              {variation.how === undefined ? (\n                <span className=\"va-how\">how this pair was found is unstated</span>\n              ) : (\n                <span className=\"va-how\">{variation.how}</span>\n              )}\n              {variation.unobserved === undefined || variation.unobserved.length === 0 ? null : (\n                // Absent is not \"none\", so this appears only when the run said so.\n                // A band no profile could decide is a band nobody should read this\n                // variation as clean in.\n                <span className=\"va-how\">undecided in {variation.unobserved.join(', ')}</span>\n              )}\n            </p>\n            <p className=\"va-because\"><Prose text={variation.because} /></p>\n          </li>\n        ))}\n      </ul>\n    </>\n  );\n}\n\n/** One class per rank, so the ordering and the drawing cannot disagree. */\nconst STATES: readonly string[] = ['va-inert', 'va-unlinked', ''];\n\nfunction rankOf(variation: VariationRecord): number {\n  if (variation.identical === true) return 0;\n  if (variation.identical === undefined) return 1;\n  return 2;\n}\n\n/**\n * The axis, in the words the record earned.\n *\n * `identical === undefined` is not `differs`: nothing compared the pair, and the\n * only honest short label for that is that nothing did. The distinction is the\n * same one the column keeps nullable for.\n */\nfunction axisOf(variation: VariationRecord): string {\n  if (variation.identical === undefined) return 'not compared';\n  if (variation.identical) return 'reaches nothing';\n  const bands = variation.bands ?? [];\n  return bands.length === 0 ? 'differs' : bands.join(' · ');\n}\n"]}

package/dist/ui/viewer.d.ts

@@ -0,0 +1,67 @@
+import { type CSSProperties, type ReactElement } from 'react';
+import type { SubjectView } from '../review.js';
+import type { ReviewClient } from './client.js';
+/**
+ * Looking at the change: the stage, the modes, and the zoom that makes any of it
+ * mean anything.
+ *
+ * Apart from [`review.tsx`](./review.tsx) because the two answer different
+ * questions and are read in that order. The docket decides *what is worth looking
+ * at* and is the part of this surface that refuses the category's habit;
+ * everything here is the looking itself, and is reached only once that question
+ * has been answered.
+ *
+ * Three positions this file exists to hold:
+ *
+ * **Every layer is drawn at one scale.** The plate has a width and each raster
+ * fills it, so the baseline and the candidate are always the same magnification.
+ * A wipe between two images at different scales is not a comparison; it is two
+ * pictures with a line between them, and it reads as a change everywhere the line
+ * happens to be.
+ *
+ * **Fit-to-width is a starting position, not the only one.** A route capture is
+ * 1280 pixels wide and arrives in a pane about half that, so a two-pixel shift is
+ * drawn at one pixel — under the resampler, which is to say not drawn. The whole
+ * reason the sheet refuses smoothing is so that a reviewer can go to 1:1 and see
+ * two pixels; without a zoom that refusal protects nothing.
+ *
+ * **A reviewer is taken to the finding.** The run measured where the differences
+ * are. On nine thousand pixels of route, asking somebody to scroll until they
+ * notice one is asking them to redo the measurement by eye — so the regions are
+ * a list you step through, and the stage scrolls to each.
+ */
+export type ViewerMode = 'regions' | 'wipe' | 'blend' | 'blink' | 'side-by-side' | 'difference';
+/** A raster's own pixels — never a rendered size, which the zoom decides. */
+export type Size = {
+    readonly width: number;
+    readonly height: number;
+};
+export declare function Viewer({ client, build, subject, sourced, }: {
+    readonly client: ReviewClient;
+    readonly build: string;
+    readonly subject: SubjectView;
+    /** Whether the run resolved any source file — see {@link RegionTable}. */
+    readonly sourced?: boolean | undefined;
+}): ReactElement;
+/** The box that contains both captures, when either of them is known. */
+export declare function union(candidate: Size | undefined, baseline: Size | undefined): Size | undefined;
+/**
+ * One layer's share of the plate, as a percentage.
+ *
+ * A percentage rather than a pixel width so that nothing here has to know the
+ * magnification: the plate is sized once and every layer scales with it. Absent
+ * when this layer's own size was never recorded, which leaves the stylesheet's
+ * `width: 100%` — the old behaviour, and the honest one, since a layer nobody
+ * measured cannot be placed against one that was.
+ */
+export declare function share(own: Size | undefined, box: Size | undefined): CSSProperties | undefined;
+/**
+ * Which comparisons this build can actually offer.
+ *
+ * Derived from what the run kept rather than offered unconditionally: a mode
+ * whose image does not exist renders a broken frame, and a broken frame in a
+ * review surface reads as a subject that renders to nothing.
+ */
+export declare function modesFor(subject: SubjectView): readonly ViewerMode[];
+export { RegionOverlay, RegionTable } from './regions.js';
+//# sourceMappingURL=viewer.d.ts.map

package/dist/ui/viewer.js

@@ -0,0 +1,246 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { RegionOverlay, RegionTable } from './regions.js';
+import { count, magnitude, number } from './text.js';
+const ZOOMS = ['fit', 1, 2, 4];
+/**
+ * What each mode is called on the button.
+ *
+ * The union members are identifiers and two of them read as identifiers. A
+ * reviewer is not debugging this surface; nothing on it should ask them to
+ * translate.
+ */
+const LABELS = {
+    regions: 'regions',
+    wipe: 'wipe',
+    blend: 'blend',
+    blink: 'blink',
+    'side-by-side': 'side by side',
+    difference: 'difference',
+};
+/** Long enough to read either state, short enough that the eye holds both. */
+const BLINK_MS = 700;
+export function Viewer({ client, build, subject, sourced, }) {
+    const available = useMemo(() => modesFor(subject), [subject]);
+    const [mode, setMode] = useState(available[0] ?? 'regions');
+    const [seam, setSeam] = useState(50);
+    const [blend, setBlend] = useState(50);
+    const [zoom, setZoom] = useState('fit');
+    const [focus, setFocus] = useState(null);
+    const [flip, setFlip] = useState(true);
+    const [pull, setPull] = useState(0);
+    const [still] = useState(calm);
+    const stage = useRef(null);
+    /**
+     * The frame both readings are drawn in.
+     *
+     * The union of the two captures, which is what the comparison itself measured
+     * in — it pads to the union box, so the regions are already in these
+     * coordinates. Drawing each image at its own share of this box is the whole
+     * point: a baseline stretched to the candidate's width is a width change
+     * resampled into a hairline, and a width change is one of the largest things
+     * that can happen to a page.
+     */
+    const box = union(subject.size, subject.baseline);
+    // The alternation, driven here rather than by a keyframe: the stylesheet is
+    // pasted into somebody else's page and is held to hiding nothing, and a reader
+    // who never chose this mode should not have an animation running in it.
+    useEffect(() => {
+        if (mode !== 'blink' || still)
+            return;
+        const timer = setInterval(() => setFlip((was) => !was), BLINK_MS);
+        return () => clearInterval(timer);
+    }, [mode, still]);
+    // What survives the move to another subject and what does not. Mode and
+    // magnification are the reviewer's; a region number belongs to the picture it
+    // was counted in, and a mode this subject cannot make would render a frame with
+    // no image behind it.
+    useEffect(() => {
+        setFocus(null);
+        setPull(0);
+        setMode((was) => (available.includes(was) ? was : (available[0] ?? 'regions')));
+        stage.current?.scrollTo({ left: 0, top: 0 });
+    }, [available]);
+    useEffect(() => {
+        if (pull === 0 || focus === null)
+            return;
+        const region = subject.regions[focus];
+        const pane = stage.current;
+        if (region === undefined || pane === null)
+            return;
+        const at = zoom === 'fit' ? 1 : zoom;
+        pane.scrollTo({
+            left: Math.max(0, (region.x + region.width / 2) * at - pane.clientWidth / 2),
+            top: Math.max(0, (region.y + region.height / 2) * at - pane.clientHeight / 2),
+            behavior: still ? 'auto' : 'smooth',
+        });
+        // Deliberately keyed on the count alone: two jumps to the same region are two
+        // requests, and the zoom this reads is already the one the plate was drawn at.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [pull]);
+    // Every hook is above this line, and has to be: without a `key` forcing a
+    // remount, moving from a subject with images to one without would otherwise
+    // change how many hooks this component calls.
+    if (available.length === 0) {
+        return _jsx("p", { className: "va-note", children: "This run kept no images for this subject." });
+    }
+    const size = subject.size;
+    const url = (kind) => client.imageUrl(build, subject.subject, kind);
+    /**
+     * Centre a region in the pane.
+     *
+     * At fit the plate is smaller than the capture and there is nothing to scroll
+     * to, so this raises the zoom first — the request is *show me this*, and
+     * showing it at a third of size is answering a different question.
+     *
+     * The scroll itself is deferred to the effect below rather than done here.
+     * Raising the zoom changes the plate's height, and a scroll issued against the
+     * old height is clamped to it: from fit to 1:1 the plate shrinks by whatever the
+     * pane was scaling it, and the pane lands short of the region by that factor.
+     */
+    const jump = (index) => {
+        if (subject.regions[index] === undefined || box === undefined)
+            return;
+        setFocus(index);
+        if (zoom === 'fit')
+            setZoom(1);
+        setPull((count) => count + 1);
+    };
+    const zoomable = box !== undefined;
+    /**
+     * Fit is a ceiling rather than a stretch. A 390-wide capture in a 700-wide pane
+     * has nothing to gain from being drawn at 700: the run refuses smoothing, so the
+     * only thing an upscale adds is blocks the render never had. Below its own width
+     * the plate shrinks to the pane; at or above it, it stops.
+     *
+     * The ratio is declared rather than left to the images, because the images are
+     * taken out of flow the moment there are two of them at different sizes — and a
+     * plate with no height is a plate the region boxes have nothing to sit on.
+     */
+    const plate = box === undefined
+        ? {}
+        : {
+            aspectRatio: `${String(box.width)} / ${String(box.height)}`,
+            ...(zoom === 'fit'
+                ? { maxWidth: `${String(box.width)}px` }
+                : { width: `${String(box.width * zoom)}px` }),
+        };
+    const boxes = mode === 'side-by-side' ? null : (_jsx(RegionOverlay, { subject: subject, box: box, focus: focus, onFocus: setFocus }));
+    return (_jsxs("div", { className: "va-viewer", children: [_jsxs("div", { className: "va-viewer-bar", children: [_jsxs("div", { className: "va-viewer-controls", children: [_jsx("p", { className: "va-modes", children: available.map((option) => (_jsx("button", { type: "button", className: option === mode ? 'va-mode va-current' : 'va-mode', "aria-pressed": option === mode, onClick: () => setMode(option), children: LABELS[option] }, option))) }), zoomable ? (_jsx("p", { className: "va-zooms", children: ZOOMS.map((option) => (_jsx("button", { type: "button", className: option === zoom ? 'va-mode va-current' : 'va-mode', "aria-pressed": option === zoom, onClick: () => setZoom(option), children: option === 'fit' ? 'fit' : `${String(option)}×` }, String(option)))) })) : null] }), _jsxs("div", { className: "va-viewer-readout", children: [_jsx("p", { className: "va-showing", children: showing(mode, { seam, blend, flip }) }), size === undefined ? null : (_jsxs("p", { className: "va-measure", title: "the candidate\u2019s own pixels, which 1\u00D7 draws one for one", children: [number(size.width), " \u00D7 ", number(size.height), subject.baseline === undefined ||
+                                        (subject.baseline.width === size.width &&
+                                            subject.baseline.height === size.height) ? ('') : (_jsxs("span", { className: "va-resized", children: [' ', "\u00B7 was ", number(subject.baseline.width), " \u00D7 ", number(subject.baseline.height)] }))] })), subject.regions.length > 0 ? (_jsxs("p", { className: "va-steps", children: [_jsx("button", { type: "button", onClick: () => jump(step(focus, subject.regions.length, -1)), children: "\u2039" }), _jsxs("span", { className: "va-num", children: [focus === null ? '—' : String(focus + 1), " / ", String(subject.regions.length)] }), _jsx("button", { type: "button", onClick: () => jump(step(focus, subject.regions.length, 1)), children: "\u203A" })] })) : null] })] }), mode === 'side-by-side' ? (_jsxs("div", { className: "va-side-by-side", children: [_jsxs("figure", { children: [_jsx("figcaption", { children: "baseline" }), _jsx(Raster, { src: url('before'), alt: `${subject.subject} baseline` })] }), _jsxs("figure", { children: [_jsx("figcaption", { children: "this build" }), _jsx(Raster, { src: url('after'), alt: `${subject.subject} candidate`, size: size })] })] })) : (_jsx("div", { className: "va-loupe", ref: stage, children: _jsxs("div", { className: box === undefined ? 'va-plate' : 'va-plate va-boxed', style: plate, children: [mode === 'wipe' ? (_jsx("input", { type: "range", className: "va-seam", min: 0, max: 100, value: seam, "aria-label": "wipe between baseline and candidate", onChange: (event) => setSeam(Number(event.target.value)) })) : null, mode === 'difference' ? (_jsx(Raster, { src: url('diff'), alt: `${subject.subject} difference mask` })) : (_jsxs(_Fragment, { children: [subject.has.before ? (_jsx(Raster, { className: "va-under", src: url('before'), alt: `${subject.subject} baseline`, style: share(subject.baseline, box) })) : null, _jsx(Raster, { src: url('after'), alt: `${subject.subject} candidate`, size: size, style: { ...share(size, box), ...over(mode, { seam, blend, flip }) } })] })), boxes, mode === 'wipe' ? (_jsx("span", { className: "va-seam-line", "aria-hidden": "true", style: { left: `${String(seam)}%` } })) : null] }) })), mode === 'blink' && still ? (_jsxs("p", { className: "va-note", children: ["This display asked for reduced motion, so the two readings do not alternate on their own.", ' ', _jsxs("button", { type: "button", className: "va-mode", onClick: () => setFlip((was) => !was), children: ["show ", flip ? 'the baseline' : 'this build'] })] })) : null, mode === 'blend' ? (_jsx("input", { type: "range", className: "va-blend", min: 0, max: 100, value: blend, "aria-label": "fade between baseline and candidate", onChange: (event) => setBlend(Number(event.target.value)) })) : null, _jsxs("p", { className: "va-pixels", children: [magnitude(subject), subject.truncated === undefined ? null : (_jsxs(_Fragment, { children: [' ', "\u00B7 ", count(subject.truncated.regions, 'further region'), " (", number(subject.truncated.pixels), "px) were not recorded"] })), subject.missingFonts === undefined || subject.missingFonts.length === 0 ? null : (_jsxs(_Fragment, { children: [" \u00B7 fonts missing at render: ", subject.missingFonts.join(', ')] }))] }), _jsx(RegionTable, { subject: subject, sourced: sourced, focus: focus, onFocus: setFocus, onJump: jump })] }));
+}
+/**
+ * How the candidate is revealed, given the mode.
+ *
+ * One layer and one declaration, rather than a wrapper that clips: a clip path
+ * moves the seam without changing the box, so the candidate keeps its own height
+ * whatever the baseline underneath rendered to — which is frequently the change.
+ */
+function over(mode, at) {
+    if (mode === 'wipe')
+        return { clipPath: `inset(0 0 0 ${String(at.seam)}%)` };
+    if (mode === 'blend')
+        return { opacity: at.blend / 100 };
+    if (mode === 'blink')
+        return { opacity: at.flip ? 1 : 0 };
+    return {};
+}
+/** The box that contains both captures, when either of them is known. */
+export function union(candidate, baseline) {
+    if (candidate === undefined)
+        return baseline;
+    if (baseline === undefined)
+        return candidate;
+    return {
+        width: Math.max(candidate.width, baseline.width),
+        height: Math.max(candidate.height, baseline.height),
+    };
+}
+/**
+ * One layer's share of the plate, as a percentage.
+ *
+ * A percentage rather than a pixel width so that nothing here has to know the
+ * magnification: the plate is sized once and every layer scales with it. Absent
+ * when this layer's own size was never recorded, which leaves the stylesheet's
+ * `width: 100%` — the old behaviour, and the honest one, since a layer nobody
+ * measured cannot be placed against one that was.
+ */
+export function share(own, box) {
+    if (own === undefined || box === undefined || own.width === box.width)
+        return undefined;
+    return { width: `${String((own.width / box.width) * 100)}%` };
+}
+/**
+ * Whether this display has asked for less movement.
+ *
+ * Read once, at mount, so a render is consistent with itself; `matchMedia` is
+ * absent in a static render, where there is no interval and no scroll to suppress
+ * and the answer is therefore no. What it governs is not decoration — blink *is*
+ * the alternation — so the mode is not withdrawn, it is handed over to the
+ * reviewer to step.
+ */
+function calm() {
+    return globalThis.matchMedia?.('(prefers-reduced-motion: reduce)').matches === true;
+}
+/** Which reading is on screen, said in the bar where a reviewer is looking. */
+function showing(mode, at) {
+    if (mode === 'wipe')
+        return `baseline ◀ ${String(Math.round(at.seam))}% ▶ this build`;
+    if (mode === 'blend')
+        return `${String(Math.round(at.blend))}% this build`;
+    if (mode === 'blink')
+        return at.flip ? 'this build' : 'baseline';
+    if (mode === 'difference')
+        return 'difference mask';
+    return 'this build';
+}
+/** The next region to visit, wrapping, from nothing at either end. */
+function step(focus, total, by) {
+    if (focus === null)
+        return by === 1 ? 0 : total - 1;
+    return (focus + by + total) % total;
+}
+/**
+ * One stored raster, fetched when it is about to be looked at.
+ *
+ * `loading="lazy"`, because a build page is a docket of every subject and a
+ * reviewer reads one at a time. A route suite's candidates are full-page: this
+ * project's four routes come to nine thousand pixels of height each, and twenty
+ * of them decoded at once is tens of thousands of rows of bitmap in one document
+ * — enough to stall the renderer before the first row of the table can be read.
+ * Nothing above the fold needs any of them.
+ *
+ * `size` reserves the box before the bytes arrive, and is passed only where the
+ * dimensions belong to *this* raster — the candidate. A baseline may have been a
+ * different height (that is frequently the change), and a diff mask is not
+ * measured at all, so those are deferred without a reservation rather than
+ * reserved wrongly. A wrong reservation is worse than none: the page settles at
+ * one height and then jumps.
+ */
+function Raster({ src, alt, size, className, style, }) {
+    return (_jsx("img", { src: src, alt: alt, loading: "lazy", decoding: "async", ...(size === undefined ? {} : { width: size.width, height: size.height }), ...(className === undefined ? {} : { className }), ...(style === undefined ? {} : { style }) }));
+}
+/**
+ * Which comparisons this build can actually offer.
+ *
+ * Derived from what the run kept rather than offered unconditionally: a mode
+ * whose image does not exist renders a broken frame, and a broken frame in a
+ * review surface reads as a subject that renders to nothing.
+ */
+export function modesFor(subject) {
+    const modes = [];
+    if (subject.has.after && subject.size !== undefined && subject.regions.length > 0) {
+        modes.push('regions');
+    }
+    if (subject.has.before && subject.has.after) {
+        modes.push('wipe', 'blend', 'blink', 'side-by-side');
+    }
+    if (subject.has.diff)
+        modes.push('difference');
+    if (modes.length === 0 && subject.has.after)
+        modes.push('regions');
+    return modes;
+}
+export { RegionOverlay, RegionTable } from './regions.js';
+//# sourceMappingURL=viewer.js.map

package/dist/ui/viewer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"viewer.js","sourceRoot":"","sources":["../../src/ui/viewer.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useMemo, useRef, useState, type CSSProperties, type ReactElement } from 'react';\nimport type { SubjectView } from '../review.js';\nimport type { ReviewClient } from './client.js';\nimport { RegionOverlay, RegionTable } from './regions.js';\nimport { count, magnitude, number } from './text.js';\n\n/**\n * Looking at the change: the stage, the modes, and the zoom that makes any of it\n * mean anything.\n *\n * Apart from [`review.tsx`](./review.tsx) because the two answer different\n * questions and are read in that order. The docket decides *what is worth looking\n * at* and is the part of this surface that refuses the category's habit;\n * everything here is the looking itself, and is reached only once that question\n * has been answered.\n *\n * Three positions this file exists to hold:\n *\n * **Every layer is drawn at one scale.** The plate has a width and each raster\n * fills it, so the baseline and the candidate are always the same magnification.\n * A wipe between two images at different scales is not a comparison; it is two\n * pictures with a line between them, and it reads as a change everywhere the line\n * happens to be.\n *\n * **Fit-to-width is a starting position, not the only one.** A route capture is\n * 1280 pixels wide and arrives in a pane about half that, so a two-pixel shift is\n * drawn at one pixel — under the resampler, which is to say not drawn. The whole\n * reason the sheet refuses smoothing is so that a reviewer can go to 1:1 and see\n * two pixels; without a zoom that refusal protects nothing.\n *\n * **A reviewer is taken to the finding.** The run measured where the differences\n * are. On nine thousand pixels of route, asking somebody to scroll until they\n * notice one is asking them to redo the measurement by eye — so the regions are\n * a list you step through, and the stage scrolls to each.\n */\n\nexport type ViewerMode = 'regions' | 'wipe' | 'blend' | 'blink' | 'side-by-side' | 'difference';\n\n/** `'fit'` scales the plate to the pane; a number is that multiple of 1:1. */\ntype Zoom = 'fit' | 1 | 2 | 4;\n\nconst ZOOMS: readonly Zoom[] = ['fit', 1, 2, 4];\n\n/**\n * What each mode is called on the button.\n *\n * The union members are identifiers and two of them read as identifiers. A\n * reviewer is not debugging this surface; nothing on it should ask them to\n * translate.\n */\nconst LABELS: Readonly<Record<ViewerMode, string>> = {\n  regions: 'regions',\n  wipe: 'wipe',\n  blend: 'blend',\n  blink: 'blink',\n  'side-by-side': 'side by side',\n  difference: 'difference',\n};\n\n/** A raster's own pixels — never a rendered size, which the zoom decides. */\nexport type Size = { readonly width: number; readonly height: number };\n\n/** Long enough to read either state, short enough that the eye holds both. */\nconst BLINK_MS = 700;\n\nexport function Viewer({\n  client,\n  build,\n  subject,\n  sourced,\n}: {\n  readonly client: ReviewClient;\n  readonly build: string;\n  readonly subject: SubjectView;\n  /** Whether the run resolved any source file — see {@link RegionTable}. */\n  readonly sourced?: boolean | undefined;\n}): ReactElement {\n  const available = useMemo(() => modesFor(subject), [subject]);\n  const [mode, setMode] = useState<ViewerMode>(available[0] ?? 'regions');\n  const [seam, setSeam] = useState(50);\n  const [blend, setBlend] = useState(50);\n  const [zoom, setZoom] = useState<Zoom>('fit');\n  const [focus, setFocus] = useState<number | null>(null);\n  const [flip, setFlip] = useState(true);\n  const [pull, setPull] = useState(0);\n  const [still] = useState(calm);\n  const stage = useRef<HTMLDivElement>(null);\n\n  /**\n   * The frame both readings are drawn in.\n   *\n   * The union of the two captures, which is what the comparison itself measured\n   * in — it pads to the union box, so the regions are already in these\n   * coordinates. Drawing each image at its own share of this box is the whole\n   * point: a baseline stretched to the candidate's width is a width change\n   * resampled into a hairline, and a width change is one of the largest things\n   * that can happen to a page.\n   */\n  const box = union(subject.size, subject.baseline);\n\n  // The alternation, driven here rather than by a keyframe: the stylesheet is\n  // pasted into somebody else's page and is held to hiding nothing, and a reader\n  // who never chose this mode should not have an animation running in it.\n  useEffect(() => {\n    if (mode !== 'blink' || still) return;\n    const timer = setInterval(() => setFlip((was) => !was), BLINK_MS);\n    return () => clearInterval(timer);\n  }, [mode, still]);\n\n  // What survives the move to another subject and what does not. Mode and\n  // magnification are the reviewer's; a region number belongs to the picture it\n  // was counted in, and a mode this subject cannot make would render a frame with\n  // no image behind it.\n  useEffect(() => {\n    setFocus(null);\n    setPull(0);\n    setMode((was) => (available.includes(was) ? was : (available[0] ?? 'regions')));\n    stage.current?.scrollTo({ left: 0, top: 0 });\n  }, [available]);\n\n  useEffect(() => {\n    if (pull === 0 || focus === null) return;\n    const region = subject.regions[focus];\n    const pane = stage.current;\n    if (region === undefined || pane === null) return;\n    const at = zoom === 'fit' ? 1 : zoom;\n    pane.scrollTo({\n      left: Math.max(0, (region.x + region.width / 2) * at - pane.clientWidth / 2),\n      top: Math.max(0, (region.y + region.height / 2) * at - pane.clientHeight / 2),\n      behavior: still ? 'auto' : 'smooth',\n    });\n    // Deliberately keyed on the count alone: two jumps to the same region are two\n    // requests, and the zoom this reads is already the one the plate was drawn at.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [pull]);\n\n  // Every hook is above this line, and has to be: without a `key` forcing a\n  // remount, moving from a subject with images to one without would otherwise\n  // change how many hooks this component calls.\n  if (available.length === 0) {\n    return <p className=\"va-note\">This run kept no images for this subject.</p>;\n  }\n\n  const size = subject.size;\n  const url = (kind: 'before' | 'after' | 'diff'): string =>\n    client.imageUrl(build, subject.subject, kind);\n\n  /**\n   * Centre a region in the pane.\n   *\n   * At fit the plate is smaller than the capture and there is nothing to scroll\n   * to, so this raises the zoom first — the request is *show me this*, and\n   * showing it at a third of size is answering a different question.\n   *\n   * The scroll itself is deferred to the effect below rather than done here.\n   * Raising the zoom changes the plate's height, and a scroll issued against the\n   * old height is clamped to it: from fit to 1:1 the plate shrinks by whatever the\n   * pane was scaling it, and the pane lands short of the region by that factor.\n   */\n  const jump = (index: number): void => {\n    if (subject.regions[index] === undefined || box === undefined) return;\n    setFocus(index);\n    if (zoom === 'fit') setZoom(1);\n    setPull((count) => count + 1);\n  };\n\n  const zoomable = box !== undefined;\n  /**\n   * Fit is a ceiling rather than a stretch. A 390-wide capture in a 700-wide pane\n   * has nothing to gain from being drawn at 700: the run refuses smoothing, so the\n   * only thing an upscale adds is blocks the render never had. Below its own width\n   * the plate shrinks to the pane; at or above it, it stops.\n   *\n   * The ratio is declared rather than left to the images, because the images are\n   * taken out of flow the moment there are two of them at different sizes — and a\n   * plate with no height is a plate the region boxes have nothing to sit on.\n   */\n  const plate: CSSProperties =\n    box === undefined\n      ? {}\n      : {\n          aspectRatio: `${String(box.width)} / ${String(box.height)}`,\n          ...(zoom === 'fit'\n            ? { maxWidth: `${String(box.width)}px` }\n            : { width: `${String(box.width * zoom)}px` }),\n        };\n  const boxes =\n    mode === 'side-by-side' ? null : (\n      <RegionOverlay subject={subject} box={box} focus={focus} onFocus={setFocus} />\n    );\n\n  return (\n    <div className=\"va-viewer\">\n      <div className=\"va-viewer-bar\">\n        <div className=\"va-viewer-controls\">\n          <p className=\"va-modes\">\n            {available.map((option) => (\n              <button\n                key={option}\n                type=\"button\"\n                className={option === mode ? 'va-mode va-current' : 'va-mode'}\n                aria-pressed={option === mode}\n                onClick={() => setMode(option)}\n              >\n                {LABELS[option]}\n              </button>\n            ))}\n          </p>\n          {zoomable ? (\n            <p className=\"va-zooms\">\n              {ZOOMS.map((option) => (\n                <button\n                  key={String(option)}\n                  type=\"button\"\n                  className={option === zoom ? 'va-mode va-current' : 'va-mode'}\n                  aria-pressed={option === zoom}\n                  onClick={() => setZoom(option)}\n                >\n                  {option === 'fit' ? 'fit' : `${String(option)}×`}\n                </button>\n              ))}\n            </p>\n          ) : null}\n        </div>\n        <div className=\"va-viewer-readout\">\n          <p className=\"va-showing\">{showing(mode, { seam, blend, flip })}</p>\n          {size === undefined ? null : (\n            <p className=\"va-measure\" title=\"the candidate’s own pixels, which 1× draws one for one\">\n              {number(size.width)} × {number(size.height)}\n              {subject.baseline === undefined ||\n              (subject.baseline.width === size.width &&\n                subject.baseline.height === size.height) ? (\n                ''\n              ) : (\n                <span className=\"va-resized\">\n                  {' '}\n                  · was {number(subject.baseline.width)} × {number(subject.baseline.height)}\n                </span>\n              )}\n            </p>\n          )}\n          {subject.regions.length > 0 ? (\n            <p className=\"va-steps\">\n              <button type=\"button\" onClick={() => jump(step(focus, subject.regions.length, -1))}>\n                ‹\n              </button>\n              <span className=\"va-num\">\n                {focus === null ? '—' : String(focus + 1)} / {String(subject.regions.length)}\n              </span>\n              <button type=\"button\" onClick={() => jump(step(focus, subject.regions.length, 1))}>\n                ›\n              </button>\n            </p>\n          ) : null}\n        </div>\n      </div>\n\n      {mode === 'side-by-side' ? (\n        <div className=\"va-side-by-side\">\n          <figure>\n            <figcaption>baseline</figcaption>\n            <Raster src={url('before')} alt={`${subject.subject} baseline`} />\n          </figure>\n          <figure>\n            <figcaption>this build</figcaption>\n            <Raster src={url('after')} alt={`${subject.subject} candidate`} size={size} />\n          </figure>\n        </div>\n      ) : (\n        <div className=\"va-loupe\" ref={stage}>\n          <div className={box === undefined ? 'va-plate' : 'va-plate va-boxed'} style={plate}>\n            {mode === 'wipe' ? (\n              <input\n                type=\"range\"\n                className=\"va-seam\"\n                min={0}\n                max={100}\n                value={seam}\n                aria-label=\"wipe between baseline and candidate\"\n                onChange={(event) => setSeam(Number(event.target.value))}\n              />\n            ) : null}\n            {mode === 'difference' ? (\n              // Already in the union's coordinates: the mask is what the\n              // comparison drew, on the box it padded both captures to.\n              <Raster src={url('diff')} alt={`${subject.subject} difference mask`} />\n            ) : (\n              <>\n                {subject.has.before ? (\n                  <Raster\n                    className=\"va-under\"\n                    src={url('before')}\n                    alt={`${subject.subject} baseline`}\n                    style={share(subject.baseline, box)}\n                  />\n                ) : null}\n                <Raster\n                  src={url('after')}\n                  alt={`${subject.subject} candidate`}\n                  size={size}\n                  style={{ ...share(size, box), ...over(mode, { seam, blend, flip }) }}\n                />\n              </>\n            )}\n            {boxes}\n            {mode === 'wipe' ? (\n              <span className=\"va-seam-line\" aria-hidden=\"true\" style={{ left: `${String(seam)}%` }} />\n            ) : null}\n          </div>\n        </div>\n      )}\n\n      {mode === 'blink' && still ? (\n        <p className=\"va-note\">\n          This display asked for reduced motion, so the two readings do not alternate on their\n          own.{' '}\n          <button type=\"button\" className=\"va-mode\" onClick={() => setFlip((was) => !was)}>\n            show {flip ? 'the baseline' : 'this build'}\n          </button>\n        </p>\n      ) : null}\n\n      {mode === 'blend' ? (\n        <input\n          type=\"range\"\n          className=\"va-blend\"\n          min={0}\n          max={100}\n          value={blend}\n          aria-label=\"fade between baseline and candidate\"\n          onChange={(event) => setBlend(Number(event.target.value))}\n        />\n      ) : null}\n\n      <p className=\"va-pixels\">\n        {magnitude(subject)}\n        {subject.truncated === undefined ? null : (\n          <>\n            {' '}\n            · {count(subject.truncated.regions, 'further region')} ({number(\n              subject.truncated.pixels,\n            )}px) were not recorded\n          </>\n        )}\n        {subject.missingFonts === undefined || subject.missingFonts.length === 0 ? null : (\n          <> · fonts missing at render: {subject.missingFonts.join(', ')}</>\n        )}\n      </p>\n\n      <RegionTable\n        subject={subject}\n        sourced={sourced}\n        focus={focus}\n        onFocus={setFocus}\n        onJump={jump}\n      />\n    </div>\n  );\n}\n\n/**\n * How the candidate is revealed, given the mode.\n *\n * One layer and one declaration, rather than a wrapper that clips: a clip path\n * moves the seam without changing the box, so the candidate keeps its own height\n * whatever the baseline underneath rendered to — which is frequently the change.\n */\nfunction over(\n  mode: ViewerMode,\n  at: { readonly seam: number; readonly blend: number; readonly flip: boolean },\n): CSSProperties {\n  if (mode === 'wipe') return { clipPath: `inset(0 0 0 ${String(at.seam)}%)` };\n  if (mode === 'blend') return { opacity: at.blend / 100 };\n  if (mode === 'blink') return { opacity: at.flip ? 1 : 0 };\n  return {};\n}\n\n/** The box that contains both captures, when either of them is known. */\nexport function union(\n  candidate: Size | undefined,\n  baseline: Size | undefined,\n): Size | undefined {\n  if (candidate === undefined) return baseline;\n  if (baseline === undefined) return candidate;\n  return {\n    width: Math.max(candidate.width, baseline.width),\n    height: Math.max(candidate.height, baseline.height),\n  };\n}\n\n/**\n * One layer's share of the plate, as a percentage.\n *\n * A percentage rather than a pixel width so that nothing here has to know the\n * magnification: the plate is sized once and every layer scales with it. Absent\n * when this layer's own size was never recorded, which leaves the stylesheet's\n * `width: 100%` — the old behaviour, and the honest one, since a layer nobody\n * measured cannot be placed against one that was.\n */\nexport function share(own: Size | undefined, box: Size | undefined): CSSProperties | undefined {\n  if (own === undefined || box === undefined || own.width === box.width) return undefined;\n  return { width: `${String((own.width / box.width) * 100)}%` };\n}\n\n/**\n * Whether this display has asked for less movement.\n *\n * Read once, at mount, so a render is consistent with itself; `matchMedia` is\n * absent in a static render, where there is no interval and no scroll to suppress\n * and the answer is therefore no. What it governs is not decoration — blink *is*\n * the alternation — so the mode is not withdrawn, it is handed over to the\n * reviewer to step.\n */\nfunction calm(): boolean {\n  return globalThis.matchMedia?.('(prefers-reduced-motion: reduce)').matches === true;\n}\n\n/** Which reading is on screen, said in the bar where a reviewer is looking. */\nfunction showing(\n  mode: ViewerMode,\n  at: { readonly seam: number; readonly blend: number; readonly flip: boolean },\n): string {\n  if (mode === 'wipe') return `baseline ◀ ${String(Math.round(at.seam))}% ▶ this build`;\n  if (mode === 'blend') return `${String(Math.round(at.blend))}% this build`;\n  if (mode === 'blink') return at.flip ? 'this build' : 'baseline';\n  if (mode === 'difference') return 'difference mask';\n  return 'this build';\n}\n\n/** The next region to visit, wrapping, from nothing at either end. */\nfunction step(focus: number | null, total: number, by: 1 | -1): number {\n  if (focus === null) return by === 1 ? 0 : total - 1;\n  return (focus + by + total) % total;\n}\n\n/**\n * One stored raster, fetched when it is about to be looked at.\n *\n * `loading=\"lazy\"`, because a build page is a docket of every subject and a\n * reviewer reads one at a time. A route suite's candidates are full-page: this\n * project's four routes come to nine thousand pixels of height each, and twenty\n * of them decoded at once is tens of thousands of rows of bitmap in one document\n * — enough to stall the renderer before the first row of the table can be read.\n * Nothing above the fold needs any of them.\n *\n * `size` reserves the box before the bytes arrive, and is passed only where the\n * dimensions belong to *this* raster — the candidate. A baseline may have been a\n * different height (that is frequently the change), and a diff mask is not\n * measured at all, so those are deferred without a reservation rather than\n * reserved wrongly. A wrong reservation is worse than none: the page settles at\n * one height and then jumps.\n */\nfunction Raster({\n  src,\n  alt,\n  size,\n  className,\n  style,\n}: {\n  readonly src: string;\n  readonly alt: string;\n  readonly size?: { readonly width: number; readonly height: number } | undefined;\n  readonly className?: string | undefined;\n  readonly style?: CSSProperties | undefined;\n}): ReactElement {\n  return (\n    <img\n      src={src}\n      alt={alt}\n      loading=\"lazy\"\n      decoding=\"async\"\n      {...(size === undefined ? {} : { width: size.width, height: size.height })}\n      {...(className === undefined ? {} : { className })}\n      {...(style === undefined ? {} : { style })}\n    />\n  );\n}\n\n/**\n * Which comparisons this build can actually offer.\n *\n * Derived from what the run kept rather than offered unconditionally: a mode\n * whose image does not exist renders a broken frame, and a broken frame in a\n * review surface reads as a subject that renders to nothing.\n */\nexport function modesFor(subject: SubjectView): readonly ViewerMode[] {\n  const modes: ViewerMode[] = [];\n  if (subject.has.after && subject.size !== undefined && subject.regions.length > 0) {\n    modes.push('regions');\n  }\n  if (subject.has.before && subject.has.after) {\n    modes.push('wipe', 'blend', 'blink', 'side-by-side');\n  }\n  if (subject.has.diff) modes.push('difference');\n  if (modes.length === 0 && subject.has.after) modes.push('regions');\n  return modes;\n}\n\nexport { RegionOverlay, RegionTable } from './regions.js';\n"]}

package/dist/worker-auth.d.ts

@@ -0,0 +1,48 @@
+/**
+ * Which of the two secrets a request presented, whether the deployment has two of
+ * them at all, and whether the one presented may do what was asked.
+ *
+ * Apart from the router because none of it is about routes. Read together it is
+ * the whole authentication story — the check that runs before anything is parsed,
+ * the comparison that must not leak, the length below which a shared secret is a
+ * public one, and the capability rule that runs *after* a route is chosen. The
+ * argument for why there are two tokens rather than one lives in
+ * [`worker.ts`](./worker.ts), where an operator configuring a deployment meets it
+ * first.
+ */
+/** Which of the two secrets a request presented, or nothing at all. */
+export type Granted = 'ingest' | 'review';
+/**
+ * The one sentence a caller holding neither token ever gets.
+ *
+ * Identical for a missing token, a wrong token, and a path that does not exist.
+ * Any variation between those three is an oracle.
+ */
+export declare const UNAUTHENTICATED = "a valid bearer token is required";
+/**
+ * The two secrets, and nothing else this file has any business reading.
+ *
+ * Structural rather than `TribunalOptions` on purpose: authentication cannot be
+ * made to depend on a project name or a retention window by a later edit, because
+ * it cannot see them.
+ */
+interface Secrets {
+    readonly ingestToken: string;
+    readonly reviewToken: string;
+}
+/**
+ * Which token was presented, compared in constant time.
+ *
+ * Both are hashed to a fixed 32 bytes before comparison and the comparison never
+ * exits early. `===` on strings leaks the length of the common prefix through
+ * timing; comparing raw strings of different lengths leaks the token's length. A
+ * digest makes every comparison the same shape whatever arrives.
+ *
+ * Both candidates are always checked, even after the first one matches, so that
+ * "which token is this" costs the same either way.
+ */
+export declare function grant(request: Request, secrets: Secrets): Promise<Granted | null>;
+export declare function refuseWeakTokens(secrets: Secrets): void;
+export declare function requires(granted: Granted, needed: Granted, path: string): void;
+export {};
+//# sourceMappingURL=worker-auth.d.ts.map

package/dist/worker-auth.js

@@ -0,0 +1,74 @@
+import { Forbidden } from './worker-http.js';
+/** The shortest token this will start with. A short shared secret is a public one. */
+const MIN_TOKEN = 16;
+/**
+ * The one sentence a caller holding neither token ever gets.
+ *
+ * Identical for a missing token, a wrong token, and a path that does not exist.
+ * Any variation between those three is an oracle.
+ */
+export const UNAUTHENTICATED = 'a valid bearer token is required';
+/**
+ * Which token was presented, compared in constant time.
+ *
+ * Both are hashed to a fixed 32 bytes before comparison and the comparison never
+ * exits early. `===` on strings leaks the length of the common prefix through
+ * timing; comparing raw strings of different lengths leaks the token's length. A
+ * digest makes every comparison the same shape whatever arrives.
+ *
+ * Both candidates are always checked, even after the first one matches, so that
+ * "which token is this" costs the same either way.
+ */
+export async function grant(request, secrets) {
+    const header = request.headers.get('authorization');
+    if (header === null)
+        return null;
+    const match = /^Bearer (.+)$/i.exec(header.trim());
+    const presented = match?.[1];
+    if (presented === undefined)
+        return null;
+    const digest = await fingerprint(presented);
+    const isIngest = equal(digest, await fingerprint(secrets.ingestToken));
+    const isReview = equal(digest, await fingerprint(secrets.reviewToken));
+    return isIngest ? 'ingest' : isReview ? 'review' : null;
+}
+async function fingerprint(token) {
+    return new Uint8Array(await crypto.subtle.digest('SHA-256', new TextEncoder().encode(token)));
+}
+function equal(left, right) {
+    if (left.length !== right.length)
+        return false;
+    let difference = 0;
+    for (let index = 0; index < left.length; index += 1) {
+        difference |= (left[index] ?? 0) ^ (right[index] ?? 0);
+    }
+    return difference === 0;
+}
+export function refuseWeakTokens(secrets) {
+    for (const [name, token] of [
+        ['ingestToken', secrets.ingestToken],
+        ['reviewToken', secrets.reviewToken],
+    ]) {
+        if (token.trim().length < MIN_TOKEN) {
+            throw new Error(`\`${name}\` is shorter than ${MIN_TOKEN} characters. This deployment holds every ` +
+                'baseline and every observation a project has produced, and it can promote one; a ' +
+                'guessable shared secret in front of that is not a configuration mistake anybody ' +
+                'notices until it matters');
+        }
+    }
+    if (secrets.ingestToken === secrets.reviewToken) {
+        throw new Error('the ingest token and the review token are the same value, so this deployment has one ' +
+            'secret and not two. The separation is the whole point: the ingest token lives in CI ' +
+            'configuration, and approving promotes a baseline — anything that can read a build log ' +
+            'would be able to approve a regression');
+    }
+}
+export function requires(granted, needed, path) {
+    if (granted === needed)
+        return;
+    throw new Forbidden(`${path} is served to the ${needed} token and this request presented the ${granted} one. ` +
+        (needed === 'review'
+            ? 'Deciding promotes a baseline, so it is not something a build log can do'
+            : 'Writing to this deployment is something CI does, not something a reviewer does'));
+}
+//# sourceMappingURL=worker-auth.js.map