versioncam 0.5.3 → 0.7.1

package/dist/driver/clip.js

@@ -2,7 +2,8 @@ import { execFileSync } from "node:child_process";
 import { createRequire } from "node:module";
 import { join } from "node:path";
 import { isTransitions } from "../config.js";
-import { MUTATION_COUNTER_SCRIPT, TRANSITION_CLOCK_SCRIPT, freezeCssScript, } from "./page-hooks.js";
+import { INSTANT_SCROLL_SCRIPT, MUTATION_COUNTER_SCRIPT, TRANSITION_CLOCK_SCRIPT, freezeCssScript, } from "./page-hooks.js";
+import { ClipReplay } from "./replay.js";
 import { writeFailure, writeSettles, writeTargets } from "./reports.js";
 import { RecordingSession } from "./session.js";
 /**
@@ -43,6 +44,11 @@ export async function runClip(browser, config, definition, runOptions = {}) {
     // clip asking for 60 would quietly cost four times what the flag promises.
     const fps = draft ? 15 : (options.fps ?? config.fps);
     const capture = { ...config.capture, ...options.capture };
+    // Made first, because it refuses a clip told to replay a file that does
+    // not exist, and nothing is open yet to close.
+    const replay = config.replay
+        ? new ClipReplay(config.replay, id, RECORDER_VERSION, runOptions.replay)
+        : null;
     const context = await browser.newContext({
         viewport,
         deviceScaleFactor: dpr,
@@ -54,6 +60,11 @@ export async function runClip(browser, config, definition, runOptions = {}) {
         locale: config.clock.locale,
         storageState: config.auth?.storageState,
     });
+    // Installed on the context before the page exists, so the page's first
+    // request is caught. A clip's own `page.route` mocks are tried before it,
+    // as Playwright tries a page's routes before its context's: what a clip
+    // answers itself never reaches the replay.
+    await replay?.install(context);
     const page = await context.newPage();
     // A clip's own `capture` is merged over the config's unchecked, so its
     // switch is checked here, where a typo would otherwise play by default.
@@ -63,8 +74,12 @@ export async function runClip(browser, config, definition, runOptions = {}) {
     }
     await page.addInitScript(MUTATION_COUNTER_SCRIPT);
     await page.addInitScript(freezeCssScript(transitions));
+    await page.addInitScript(INSTANT_SCROLL_SCRIPT);
     if (transitions === "play")
         await page.addInitScript(TRANSITION_CLOCK_SCRIPT);
+    const pacing = replay?.pacingScript();
+    if (pacing)
+        await page.addInitScript(pacing);
     // Paused, not just installed. `clock.install()` leaves Playwright's fake
     // clock running on real time between the driver's own `runFor` calls, so
     // every screenshot, every probe and every stall of the machine reached the
@@ -101,9 +116,24 @@ export async function runClip(browser, config, definition, runOptions = {}) {
         capture,
         draft,
         config,
+        replay,
     });
     try {
-        await body(session.forClipBody());
+        try {
+            await body(session.forClipBody());
+        }
+        catch (error) {
+            // A request the replay could not answer failed in the page, and the
+            // page then failed the clip somewhere else: a locator that never
+            // appeared, a settle that ran out. The missing response is the cause.
+            const missing = replay?.failure();
+            if (missing)
+                error.message += `\n\n${missing}`;
+            throw error;
+        }
+        const missing = replay?.failure();
+        if (missing)
+            throw new Error(missing);
         if (documentLoads > 1) {
             throw new Error(`The document reloaded ${documentLoads - 1} time(s) during "${id}". ` +
                 "The usual cause is editing a file while recording: a dev server " +
@@ -113,6 +143,7 @@ export async function runClip(browser, config, definition, runOptions = {}) {
         const timeline = session.finish();
         writeSettles(dir, session.settles);
         writeTargets(dir, session.evidence().targets);
+        replay?.write();
         return { timeline, dir, cost: session.cost, settles: session.settles };
     }
     catch (error) {

package/dist/driver/clip.js.map

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

package/dist/driver/file-window.d.ts

@@ -0,0 +1,66 @@
+/**
+ * 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.
+ */
+export type StagedFile = {
+    /** What the window lists, and the dropped `File`'s name. */
+    name: string;
+    /** The dropped file's contents. Default empty. */
+    content?: string;
+    /** Its MIME type. Default from the extension. */
+    type?: string;
+    /** The Size column. Default from the contents. */
+    size?: string;
+};
+export type FileWindowOptions = {
+    /** The title bar. Default "Files". */
+    title?: string;
+    /**
+     * Where the window's top left corner sits, as fractions of the viewport.
+     * Default `{ x: 0.52, y: 0.42 }`, to the right of centre, where a sidebar's
+     * dropzone on the left stays in view.
+     */
+    at?: {
+        x: number;
+        y: number;
+    };
+};
+/** A row as the page draws it: every column worked out here, not there. */
+export type FileRow = {
+    name: string;
+    content: string;
+    type: string;
+    size: string;
+    kind: string;
+};
+export declare function fileRows(files: readonly StagedFile[]): FileRow[];
+/**
+ * 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 declare function drawFileWindow(args: {
+    rows: FileRow[];
+    title: string;
+    left: number;
+    top: number;
+}): void;

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"}