versioncam 0.5.3 → 0.7.0

package/dist/driver/file-window.js

@@ -0,0 +1,245 @@
+/**
+ * A file window drawn over the page, to drag files from.
+ *
+ * Uploading is half of what a data app does, and the browser's own file
+ * dialog is outside the page: nothing can film it, and a file that simply
+ * appears in an upload list reads as a cut. The first app this recorded
+ * solved it with a small window drawn in the page, listing the files, from
+ * which the cursor drags them onto the app's own dropzone; nothing in it was
+ * that app's, so it is here. It looks like a Finder window, because the
+ * clips it sits in show a Mac's cursor.
+ *
+ * It is staged, and a clip that uses it should say so where its clips are
+ * shown. What is real is the drop: letting go over the page sends the
+ * element under the pointer the `dragenter`, `dragover` and `drop` events a
+ * real drag sends, carrying `File` objects with the names, types and
+ * contents given, so the app takes them through its own dropzone, its own
+ * accept rules and its own list, as it takes a person's.
+ *
+ * Selection works as in Finder: a click selects one row, a click with Shift
+ * extends to it, a click with Meta or Control adds or removes it, and a
+ * press on a selected row drags the whole selection. Its motion runs on
+ * `requestAnimationFrame`, which the recorder's clock drives, so it opens
+ * and closes at the same pace on every run.
+ */
+/** The extension's kind, as Finder words it, and its MIME type. */
+const KINDS = {
+    csv: { kind: "CSV document", type: "text/csv" },
+    tsv: { kind: "TSV document", type: "text/tab-separated-values" },
+    json: { kind: "JSON document", type: "application/json" },
+    txt: { kind: "Plain Text", type: "text/plain" },
+    fasta: { kind: "FASTA document", type: "text/plain" },
+    fa: { kind: "FASTA document", type: "text/plain" },
+    png: { kind: "PNG image", type: "image/png" },
+    jpg: { kind: "JPEG image", type: "image/jpeg" },
+    pdf: { kind: "PDF document", type: "application/pdf" },
+    xlsx: {
+        kind: "Microsoft Excel workbook",
+        type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+    },
+};
+export function fileRows(files) {
+    if (!Array.isArray(files) || files.length === 0) {
+        throw new TypeError("fileWindow: list at least one file, as { name }.");
+    }
+    return files.map((file, i) => {
+        if (typeof file?.name !== "string" || file.name.length === 0) {
+            throw new TypeError(`fileWindow: file ${i} has no name.`);
+        }
+        const ext = file.name.split(".").pop()?.toLowerCase() ?? "";
+        const known = KINDS[ext];
+        const content = file.content ?? "";
+        const bytes = new TextEncoder().encode(content).length;
+        return {
+            name: file.name,
+            content,
+            type: file.type ?? known?.type ?? "application/octet-stream",
+            size: file.size ??
+                (bytes === 1
+                    ? "1 byte"
+                    : bytes < 1024
+                        ? `${bytes} bytes`
+                        : `${Math.round(bytes / 1024)} KB`),
+            kind: known?.kind ?? "Document",
+        };
+    });
+}
+/**
+ * Runs in the page: draws the window and wires its selection and its drag.
+ * Self-contained, as everything handed to `page.evaluate` must be.
+ */
+export function drawFileWindow(args) {
+    const doc = document;
+    doc.getElementById("vc-file-window")?.remove();
+    const style = doc.createElement("style");
+    style.id = "vc-file-window-style";
+    style.textContent = `
+    #vc-file-window { position: fixed; z-index: 2147483000; width: 480px; border-radius: 10px;
+      overflow: hidden; background: #ffffff; color: #1d1d1f; opacity: 0;
+      box-shadow: 0 18px 50px rgba(15, 15, 40, 0.28), 0 0 0 1px rgba(0, 0, 0, 0.12);
+      font: 13px/1.35 -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; }
+    #vc-file-window .bar { height: 34px; display: flex; align-items: center; gap: 8px; padding: 0 12px;
+      background: #ececec; border-bottom: 1px solid #d9d9d9; }
+    #vc-file-window .dot { width: 12px; height: 12px; border-radius: 50%; }
+    #vc-file-window .title { flex: 1; text-align: center; margin-right: 52px; font-weight: 600; color: #4a4a4a; }
+    #vc-file-window .head, #vc-file-window .row { display: grid; grid-template-columns: 1fr 80px 150px;
+      gap: 8px; align-items: center; padding: 0 14px; }
+    #vc-file-window .head { height: 26px; color: #8a8a8e; font-size: 11px; border-bottom: 1px solid #eeeeee; }
+    #vc-file-window .row { height: 30px; cursor: default; user-select: none; }
+    #vc-file-window .row:nth-child(odd) { background: #f6f6f8; }
+    #vc-file-window .row.selected { background: #2f6fde; color: #ffffff; }
+    #vc-file-window .name { display: flex; align-items: center; gap: 8px; white-space: nowrap;
+      overflow: hidden; text-overflow: ellipsis; }
+    #vc-file-window .muted { color: #8a8a8e; white-space: nowrap; }
+    #vc-file-window .row.selected .muted { color: #dbe6ff; }
+    #vc-file-window .foot { height: 24px; display: flex; align-items: center; justify-content: center;
+      color: #8a8a8e; font-size: 11px; border-top: 1px solid #eeeeee; background: #fafafa; }
+    #vc-file-ghost { position: fixed; z-index: 2147483001; pointer-events: none; display: flex;
+      align-items: center; gap: 6px; padding: 5px 9px; border-radius: 6px; background: rgba(47, 111, 222, 0.92);
+      color: #ffffff; font: 12px/1.2 -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
+      box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2); }
+    #vc-file-ghost .count { background: #ff3b30; border-radius: 9px; padding: 0 6px; font-weight: 600; }
+  `;
+    doc.getElementById("vc-file-window-style")?.remove();
+    doc.head.append(style);
+    const icon = (kind) => {
+        const colour = /image/i.test(kind)
+            ? "#f4b400"
+            : /PDF/.test(kind)
+                ? "#ea4335"
+                : "#34a853";
+        return `<svg width="14" height="17" viewBox="0 0 14 17" aria-hidden="true"><path d="M1 1h8l4 4v11H1z" fill="#fff" stroke="#9a9aa2"/><path d="M9 1v4h4" fill="none" stroke="#9a9aa2"/><rect x="3" y="9" width="8" height="5" rx="1" fill="${colour}"/></svg>`;
+    };
+    const text = (value) => {
+        const span = doc.createElement("span");
+        span.textContent = value;
+        return span.innerHTML;
+    };
+    const win = doc.createElement("div");
+    win.id = "vc-file-window";
+    win.style.left = `${args.left}px`;
+    win.style.top = `${args.top}px`;
+    win.innerHTML = `
+    <div class="bar"><span class="dot" style="background:#ff5f57"></span><span class="dot" style="background:#febc2e"></span>
+      <span class="dot" style="background:#28c840"></span><span class="title">${text(args.title)}</span></div>
+    <div class="head"><span>Name</span><span>Size</span><span>Kind</span></div>
+    <div class="rows">${args.rows
+        .map((row, i) => `<div class="row" data-vc-file="${i}"><span class="name">${icon(row.kind)}${text(row.name)}</span>` +
+        `<span class="muted">${text(row.size)}</span><span class="muted">${text(row.kind)}</span></div>`)
+        .join("")}</div>
+    <div class="foot">${args.rows.length} ${args.rows.length === 1 ? "item" : "items"}</div>`;
+    doc.body.append(win);
+    const fade = (from, to, ms, done) => {
+        const start = performance.now();
+        const step = (now) => {
+            const t = Math.min(1, (now - start) / ms);
+            const eased = 1 - Math.pow(1 - t, 3);
+            const value = from + (to - from) * eased;
+            win.style.opacity = String(value);
+            win.style.transform = `translateY(${(1 - value) * 10}px)`;
+            if (t < 1)
+                requestAnimationFrame(step);
+            else
+                done?.();
+        };
+        requestAnimationFrame(step);
+    };
+    fade(0, 1, 280);
+    const rowEls = [...win.querySelectorAll(".row")];
+    const selected = new Set();
+    let anchor = 0;
+    const paint = () => rowEls.forEach((el, i) => el.classList.toggle("selected", selected.has(i)));
+    const transfer = () => {
+        const dt = new DataTransfer();
+        for (const i of [...selected].sort((a, b) => a - b)) {
+            const row = args.rows[i];
+            dt.items.add(new File([row.content], row.name, { type: row.type }));
+        }
+        return dt;
+    };
+    const fire = (target, type, x, y) => target.dispatchEvent(new DragEvent(type, {
+        bubbles: true,
+        cancelable: true,
+        composed: true,
+        clientX: x,
+        clientY: y,
+        dataTransfer: transfer(),
+    }));
+    const underPointer = (x, y) => {
+        const el = doc.elementFromPoint(x, y);
+        return el && !win.contains(el) ? el : null;
+    };
+    let pressed = null;
+    let ghost = null;
+    let over = null;
+    for (const [i, el] of rowEls.entries()) {
+        el.addEventListener("mousedown", (event) => {
+            event.preventDefault();
+            if (event.shiftKey) {
+                selected.clear();
+                for (let k = Math.min(anchor, i); k <= Math.max(anchor, i); k += 1)
+                    selected.add(k);
+            }
+            else if (event.metaKey || event.ctrlKey) {
+                if (selected.has(i))
+                    selected.delete(i);
+                else
+                    selected.add(i);
+                anchor = i;
+            }
+            else if (!selected.has(i)) {
+                selected.clear();
+                selected.add(i);
+                anchor = i;
+            }
+            paint();
+            pressed = selected.has(i) ? { x: event.clientX, y: event.clientY } : null;
+        });
+    }
+    doc.addEventListener("mousemove", (event) => {
+        if (!pressed)
+            return;
+        if (!ghost) {
+            // A few pixels first, as a real drag waits for, so a click with a
+            // slightly unsteady hand selects and does not drag.
+            if (Math.hypot(event.clientX - pressed.x, event.clientY - pressed.y) < 4)
+                return;
+            ghost = doc.createElement("div");
+            ghost.id = "vc-file-ghost";
+            const first = args.rows[Math.min(...selected)];
+            ghost.innerHTML =
+                `${icon(first.kind)}${text(first.name)}` +
+                    (selected.size > 1
+                        ? `<span class="count">${selected.size}</span>`
+                        : "");
+            doc.body.append(ghost);
+        }
+        ghost.style.left = `${event.clientX + 12}px`;
+        ghost.style.top = `${event.clientY + 10}px`;
+        const target = underPointer(event.clientX, event.clientY);
+        if (over && target !== over)
+            fire(over, "dragleave", event.clientX, event.clientY);
+        if (target && target !== over)
+            fire(target, "dragenter", event.clientX, event.clientY);
+        if (target)
+            fire(target, "dragover", event.clientX, event.clientY);
+        over = target;
+    });
+    doc.addEventListener("mouseup", (event) => {
+        const dragging = ghost !== null;
+        pressed = null;
+        if (!dragging)
+            return;
+        ghost?.remove();
+        ghost = null;
+        const target = underPointer(event.clientX, event.clientY);
+        over = null;
+        if (!target)
+            return;
+        fire(target, "drop", event.clientX, event.clientY);
+        // The files have gone where they were dropped, and the window with them.
+        fade(1, 0, 220, () => win.remove());
+    });
+    window.__vcCloseFileWindow = () => fade(1, 0, 220, () => win.remove());
+}
+//# sourceMappingURL=file-window.js.map

package/dist/driver/file-window.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-window.js","sourceRoot":"","sources":["../../src/driver/file-window.ts"],"names":[],"mappings":"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"}

package/dist/driver/page-hooks.d.ts

@@ -80,10 +80,28 @@ export declare const SYNC_TRANSITIONS: string;
  * deterministically, at exactly the rate the timeline says.
  *
  * `scroll-behavior: auto` is here for the same reason: a smooth-scrolling
- * container animates outside our control.
+ * container animates outside our control. It covers what the stylesheet
+ * asks for; what a script asks for, `{ behavior: "smooth" }`, is
+ * `INSTANT_SCROLL_SCRIPT`'s.
  */
 export declare function freezeCss(zeroTransitions: boolean): string;
 export declare function freezeCssScript(transitions: Transitions): string;
+/**
+ * Makes a script's smooth scroll instant, as the freeze stylesheet makes a
+ * stylesheet's.
+ *
+ * `scroll-behavior` in CSS only decides a scroll that does not say how to
+ * scroll. An app that calls `scrollIntoView({ behavior: "smooth" })`, or
+ * `scrollTo` with it, says, and the browser animates that scroll on the
+ * compositor's real clock whatever the stylesheet holds: a chat that keeps
+ * its newest message in view does it on every message, and the frames while
+ * it moved showed the pane wherever the machine had got it to. So the five
+ * methods a script scrolls with take `"smooth"` as `"instant"`, and every
+ * other argument through untouched. The scroll still happens, at once,
+ * which is what a clip on authored time can show the same way twice;
+ * `s.scroll` is how a clip shows one move.
+ */
+export declare const INSTANT_SCROLL_SCRIPT = "(() => {\n  const instant = (options) =>\n    options && typeof options === \"object\" && options.behavior === \"smooth\"\n      ? { ...options, behavior: \"instant\" }\n      : options;\n  const take = (owner, name) => {\n    const original = owner[name];\n    if (typeof original !== \"function\") return;\n    owner[name] = function (...args) {\n      if (args.length === 1) args[0] = instant(args[0]);\n      return original.apply(this, args);\n    };\n  };\n  for (const name of [\"scroll\", \"scrollTo\", \"scrollBy\", \"scrollIntoView\"]) {\n    take(Element.prototype, name);\n  }\n  for (const name of [\"scroll\", \"scrollTo\", \"scrollBy\"]) take(window, name);\n})();";
 /**
  * What the driver learns from the page once per frame.
  *
@@ -123,5 +141,9 @@ declare global {
         __recorderTransitions?: {
             sync(): number;
         };
+        /** Set by the replay's pacing script (replay.ts). */
+        __recorderReplay?: {
+            pending: number;
+        };
     }
 }

package/dist/driver/page-hooks.js

@@ -196,7 +196,9 @@ export const SYNC_TRANSITIONS = "(window.__recorder ? window.__recorder.finishEn
  * deterministically, at exactly the rate the timeline says.
  *
  * `scroll-behavior: auto` is here for the same reason: a smooth-scrolling
- * container animates outside our control.
+ * container animates outside our control. It covers what the stylesheet
+ * asks for; what a script asks for, `{ behavior: "smooth" }`, is
+ * `INSTANT_SCROLL_SCRIPT`'s.
  */
 export function freezeCss(zeroTransitions) {
     const transitions = zeroTransitions
@@ -223,6 +225,39 @@ export function freezeCssScript(transitions) {
   else document.addEventListener("DOMContentLoaded", inject, { once: true });
 })();`;
 }
+/**
+ * Makes a script's smooth scroll instant, as the freeze stylesheet makes a
+ * stylesheet's.
+ *
+ * `scroll-behavior` in CSS only decides a scroll that does not say how to
+ * scroll. An app that calls `scrollIntoView({ behavior: "smooth" })`, or
+ * `scrollTo` with it, says, and the browser animates that scroll on the
+ * compositor's real clock whatever the stylesheet holds: a chat that keeps
+ * its newest message in view does it on every message, and the frames while
+ * it moved showed the pane wherever the machine had got it to. So the five
+ * methods a script scrolls with take `"smooth"` as `"instant"`, and every
+ * other argument through untouched. The scroll still happens, at once,
+ * which is what a clip on authored time can show the same way twice;
+ * `s.scroll` is how a clip shows one move.
+ */
+export const INSTANT_SCROLL_SCRIPT = `(() => {
+  const instant = (options) =>
+    options && typeof options === "object" && options.behavior === "smooth"
+      ? { ...options, behavior: "instant" }
+      : options;
+  const take = (owner, name) => {
+    const original = owner[name];
+    if (typeof original !== "function") return;
+    owner[name] = function (...args) {
+      if (args.length === 1) args[0] = instant(args[0]);
+      return original.apply(this, args);
+    };
+  };
+  for (const name of ["scroll", "scrollTo", "scrollBy", "scrollIntoView"]) {
+    take(Element.prototype, name);
+  }
+  for (const name of ["scroll", "scrollTo", "scrollBy"]) take(window, name);
+})();`;
 /**
  * What the driver learns from the page once per frame.
  *

package/dist/driver/page-hooks.js.map

@@ -1 +1 @@
-{"version":3,"file":"page-hooks.js","sourceRoot":"","sources":["../../src/driver/page-hooks.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH;;;;GAIG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAwFjC,CAAC;AAEP;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;MA4BjC,CAAC;AAEP;;;;;GAKG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAC3B,8DAA8D;IAC9D,0EAA0E,CAAC;AAE7E;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,MAAM,UAAU,SAAS,CAAC,eAAwB;IAChD,MAAM,WAAW,GAAG,eAAe;QACjC,CAAC,CAAC,6EAA6E;QAC/E,CAAC,CAAC,EAAE,CAAC;IACP,OAAO;EACP,WAAW;;;;EAIX,CAAC;AACH,CAAC;AAED,MAAM,UAAU,eAAe,CAAC,WAAwB;IACtD,OAAO;iBACQ,WAAW,KAAK,MAAM;uBAChB,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,MAAM,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;;;;;;;;;MAStF,CAAC;AACP,CAAC;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,OAAe,EAAE,CAAS,EAAE,CAAS,EAAU,EAAE,CAC3E,4BAA4B,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC"}
+{"version":3,"file":"page-hooks.js","sourceRoot":"","sources":["../../src/driver/page-hooks.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH;;;;GAIG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAwFjC,CAAC;AAEP;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;MA4BjC,CAAC;AAEP;;;;;GAKG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAC3B,8DAA8D;IAC9D,0EAA0E,CAAC;AAE7E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,MAAM,UAAU,SAAS,CAAC,eAAwB;IAChD,MAAM,WAAW,GAAG,eAAe;QACjC,CAAC,CAAC,6EAA6E;QAC/E,CAAC,CAAC,EAAE,CAAC;IACP,OAAO;EACP,WAAW;;;;EAIX,CAAC;AACH,CAAC;AAED,MAAM,UAAU,eAAe,CAAC,WAAwB;IACtD,OAAO;iBACQ,WAAW,KAAK,MAAM;uBAChB,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,MAAM,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;;;;;;;;;MAStF,CAAC;AACP,CAAC;AAED;;;;;;;;;;;;;;GAcG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG;;;;;;;;;;;;;;;;;MAiB/B,CAAC;AAEP;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,OAAe,EAAE,CAAS,EAAE,CAAS,EAAU,EAAE,CAC3E,4BAA4B,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC"}

package/dist/driver/replay.d.ts

@@ -0,0 +1,263 @@
+import type { BrowserContext } from "playwright";
+/**
+ * Record a clip's responses once, and serve them on every run after.
+ *
+ * Some of what a clip films is not the app's to decide: a map's tiles, a
+ * model's answer, a job's status, a count that grows. Each comes from a
+ * server, at the server's speed and in its words of the day, so two
+ * recordings of one clip differ wherever one of them reaches the page, and
+ * the clip can never be re-rendered the same. The fix every app reached for
+ * was a mock written by hand, which is right once and wrong the day the
+ * endpoint changes. A replay is the server's own answer, written down the
+ * first time the clip runs and kept beside the clip as an input: the
+ * requests the config names are answered from it, and a request it does not
+ * hold fails the clip, with its URL, instead of quietly going live.
+ *
+ * The file is a HAR (one per clip, `<dir>/<clip>.har`), so a browser's
+ * developer tools can open it. Text bodies are written into it, where a
+ * diff can read them; binary bodies (a tile, an image) go beside it, under
+ * `bodies/`, named by their hash, so clips that load the same tiles store
+ * them once.
+ */
+export type ReplayMode = "auto" | "record" | "replay" | "live";
+/** A glob, in Playwright's syntax, or a regular expression, over the whole URL. */
+export type ReplayPattern = string | RegExp;
+export type ReplayConfig = {
+    /** The requests to record and replay, by URL. */
+    record: ReplayPattern[];
+    /**
+     * `"auto"`, the default, replays a clip whose file exists and records one
+     * whose file does not. `"record"` always records, `"replay"` fails a clip
+     * without a file, and `"live"` leaves every request to the network.
+     */
+    mode?: ReplayMode;
+    /** Where the files go. Default `replay/` beside the config. Commit it. */
+    dir?: string;
+    /**
+     * Responses the page reads over time, an event stream or lines of JSON,
+     * delivered one event or one line every `chunkMs` of the page's clock, so
+     * the same piece lands on the same frame every run.
+     */
+    pace?: {
+        url: ReplayPattern;
+        chunkMs: number;
+    }[];
+    /** Query parameters left out of the file and of the match, by name. */
+    redact?: string[];
+    /**
+     * What a request the replay does not hold does: `"fail"`, the default,
+     * fails the clip and names it; `"live"` sends it to the network and warns.
+     */
+    onMissing?: "fail" | "live";
+};
+export type ResolvedReplay = {
+    record: RegExp[];
+    mode: ReplayMode;
+    dir: string;
+    pace: {
+        url: RegExp;
+        chunkMs: number;
+    }[];
+    redact: string[];
+    onMissing: "fail" | "live";
+};
+/** How old a replay may be before `check` says so. */
+export declare const STALE_DAYS = 90;
+/**
+ * A glob in Playwright's syntax as a regular expression, so the recorder and
+ * the script it puts in the page match a URL the same way: `**` crosses `/`,
+ * `*` does not, `{a,b}` is either, and every other character is itself, `?`
+ * included. Anchored at both ends, as Playwright anchors a glob.
+ */
+export declare function globToRegExp(glob: string): RegExp;
+export declare function patternOf(pattern: ReplayPattern): RegExp;
+/**
+ * The URL a request is known by in the file: without its fragment and
+ * without the query parameters `redact` names, which are gone from the file
+ * and so cannot be part of the match.
+ */
+export declare function urlKey(url: string, redact: readonly string[]): string;
+type Header = {
+    name: string;
+    value: string;
+};
+type HarContent = {
+    size: number;
+    mimeType: string;
+    text?: string;
+    encoding?: "base64";
+    /** A binary body, under the replay's `bodies/`, by its SHA-256. */
+    _file?: string;
+};
+export type HarEntry = {
+    startedDateTime: string;
+    time: number;
+    request: {
+        method: string;
+        url: string;
+        httpVersion: string;
+        headers: Header[];
+        queryString: Header[];
+        cookies: [];
+        headersSize: -1;
+        bodySize: number;
+        postData?: {
+            mimeType: string;
+            text: string;
+        };
+    };
+    response: {
+        status: number;
+        statusText: string;
+        httpVersion: string;
+        headers: Header[];
+        cookies: [];
+        content: HarContent;
+        redirectURL: string;
+        headersSize: -1;
+        bodySize: number;
+    };
+    cache: Record<string, never>;
+    timings: {
+        send: number;
+        wait: number;
+        receive: number;
+    };
+};
+export type Har = {
+    log: {
+        version: "1.2";
+        creator: {
+            name: string;
+            version: string;
+        };
+        comment: string;
+        _versioncam: {
+            clip: string;
+            recorded: string;
+            recorder: string;
+        };
+        entries: HarEntry[];
+    };
+};
+export declare function sha256(bytes: Uint8Array): string;
+/**
+ * One recorded exchange, as the file keeps it: the secrets and the redacted
+ * parameters gone, a text body in the entry, a binary one handed to `store`
+ * and named here by its hash.
+ */
+export declare function entryOf(exchange: {
+    method: string;
+    url: string;
+    requestHeaders: Record<string, string>;
+    postData: string | null;
+    status: number;
+    statusText: string;
+    responseHeaders: Record<string, string>;
+    body: Uint8Array;
+}, options: {
+    redact: readonly string[];
+    recorded: string;
+    store: (hash: string, bytes: Uint8Array) => void;
+}): HarEntry;
+/**
+ * The entries of a replay, by what a request is known by, each list in the
+ * order the requests were made, and served in that order: the third poll of
+ * a job's status gets the third answer the job gave, and every poll after
+ * the last gets the last. Among answers to one URL, one recorded for the
+ * same request body is taken first, for an app that posts several queries
+ * to one endpoint in an order that can vary.
+ */
+export declare class ReplayBook {
+    private readonly byKey;
+    private readonly used;
+    private readonly redact;
+    constructor(entries: readonly HarEntry[], redact: readonly string[]);
+    answer(method: string, url: string, postData: string | null): HarEntry | null;
+}
+/** The file a clip's replay is in. */
+export declare function replayFile(dir: string, clipId: string): string;
+export declare function readReplay(file: string): Har;
+/** What `doctor` and `check` say about a clip's replay. */
+export declare function describeReplay(dir: string, clipId: string, now?: Date): {
+    file: string;
+    exists: false;
+} | {
+    file: string;
+    exists: true;
+    requests: number;
+    recorded: string;
+    ageDays: number;
+    recorder: string;
+};
+/** Which mode a clip runs in, once the file's presence is known. */
+export declare function effectiveMode(mode: ReplayMode, fileExists: boolean): "record" | "replay" | "live";
+/**
+ * A clip's replay while it runs: the routes it installs, what it recorded,
+ * what it could not answer, and how many answers are still on their way.
+ */
+export declare class ClipReplay {
+    readonly mode: "record" | "replay" | "live";
+    readonly file: string;
+    /** Requests the replay matched and did not hold, as "METHOD url". */
+    readonly misses: string[];
+    /** Requests sent live because the replay did not hold them (`onMissing: "live"`). */
+    readonly wentLive: string[];
+    private readonly recorded;
+    private readonly bodies;
+    private readonly book;
+    private readonly when;
+    private inFlight;
+    private waiters;
+    private readonly config;
+    private readonly clipId;
+    private readonly recorder;
+    constructor(config: ResolvedReplay, clipId: string, recorder: string, override?: ReplayMode);
+    /** The page-side script that paces streamed bodies, or null when nothing is paced. */
+    pacingScript(): string | null;
+    /** Install the routes. Before the page is opened, so its first request is caught. */
+    install(context: BrowserContext): Promise<void>;
+    /**
+     * Resolves once every request the replay has taken is answered and its body
+     * is in the page. The driver waits on it after each tick, so a request made
+     * in a frame is answered within that frame on every run, however long the
+     * network or the disk took: a tile arrives on the frame it was asked for.
+     */
+    idle(timeoutMs?: number): Promise<void>;
+    private settled;
+    private handle;
+    private record;
+    private serve;
+    /**
+     * What stops the clip: a request the replay was asked for and did not
+     * hold. Null when there is none.
+     */
+    failure(): string | null;
+    /**
+     * Write what was recorded. Only for a clip that passed: a replay of half a
+     * clip would serve a later run a different app than the one it shows.
+     */
+    write(): void;
+}
+/**
+ * Deliver a paced response a piece at a time on the page's own clock.
+ *
+ * The recorder cannot stream a response into the page: Playwright fulfils a
+ * request whole. So the page does it. For a URL the config paces, `fetch`
+ * hands back a response whose body is a stream that gives out one event of
+ * an event stream, or one line of anything else, every `chunkMs`, on the
+ * page's `setTimeout`, which the recorder's clock advances a frame at a
+ * time; and `EventSource` dispatches one event every `chunkMs` the same
+ * way. The same piece therefore lands on the same frame every run, at any
+ * frame rate. `window.__recorderReplay.pending` counts the bodies still
+ * arriving, and a settle waits for it to reach none.
+ *
+ * An `EventSource` whose stream has ended reports an error and stays
+ * closed, instead of reconnecting as a live one would: a replay would only
+ * answer it with the same stream again.
+ */
+export declare function pacedReplayScript(pace: readonly {
+    url: RegExp;
+    chunkMs: number;
+}[]): string;
+export {};