@outerlayer/cli 0.34.0-next.20261026214534 → 0.34.0-next.20261026230708

package/dist/recorder.cjs

@@ -0,0 +1,916 @@
+'use strict';
+
+var fs = require('fs');
+var path = require('path');
+var test$1 = require('@playwright/test');
+var async_hooks = require('async_hooks');
+var crypto = require('crypto');
+var child_process = require('child_process');
+var readline = require('readline');
+
+// ../playwright/src/fixture.ts
+function hasGit(directory) {
+  return fs.existsSync(path.join(directory, ".git"));
+}
+function repositoryPath(file, isRoot = hasGit) {
+  let directory = path.dirname(file);
+  for (; ; ) {
+    if (isRoot(directory)) return path.relative(directory, file).split(path.sep).join("/");
+    const parent = path.dirname(directory);
+    if (parent === directory) return void 0;
+    directory = parent;
+  }
+}
+function buildManifest(params) {
+  const test2 = repositoryPath(params.testFile, params.hasGit) ?? path.relative(params.rootDir, params.testFile).split(path.sep).join("/");
+  const beats = params.chapters.some((chapter) => chapter.beats !== void 0);
+  if (!beats) return { schemaVersion: 4, test: test2, video: params.video, chapters: params.chapters };
+  return { schemaVersion: 5, test: test2, video: params.video, ...params.viewport === void 0 ? {} : { viewport: params.viewport }, chapters: params.chapters };
+}
+function smallerPage(page, video) {
+  if (page === null || video === void 0) return void 0;
+  return page.width < video.width || page.height < video.height ? { width: page.width, height: page.height } : void 0;
+}
+var CHECK_TEXT_MAX = 500;
+function clipCheckText(text) {
+  return text.length <= CHECK_TEXT_MAX ? text : `${text.slice(0, CHECK_TEXT_MAX - 1)}\u2026`;
+}
+function seconds(milliseconds) {
+  return Math.round(milliseconds) / 1e3;
+}
+
+// ../playwright/src/expect.ts
+var running = new async_hooks.AsyncLocalStorage();
+async function recordChecksDuring(checks, body, onPass) {
+  const store = { checks, onPass, pending: [] };
+  try {
+    return await running.run(store, body);
+  } finally {
+    await Promise.allSettled(store.pending);
+  }
+}
+var RECORDED = /* @__PURE__ */ Symbol.for("outerlayer.playwright.recorded");
+function describeValue(value) {
+  if (value === null || value === void 0 || typeof value !== "object") return JSON.stringify(value) ?? String(value);
+  if (typeof value.toString === "function") {
+    const text = String(value);
+    if (!text.startsWith("[object ")) return text;
+  }
+  const kind = value.constructor?.name ?? "value";
+  return kind === "Object" ? JSON.stringify(value) : kind.toLowerCase();
+}
+function describeArgs(args) {
+  return args.map((arg) => {
+    const text = typeof arg === "function" ? "function" : describeValue(arg);
+    return text.length > 80 ? `${text.slice(0, 79)}\u2026` : text;
+  }).join(", ");
+}
+function isThenable(value) {
+  return typeof value?.then === "function";
+}
+function record(check) {
+  const store = running.getStore();
+  if (store === void 0) return void 0;
+  store.checks.push({ text: clipCheckText(check.text), passed: check.passed });
+  if (!check.passed || store.onPass === void 0) return void 0;
+  const after = store.onPass(store.checks.length - 1);
+  store.pending.push(after);
+  return after;
+}
+function failed(error) {
+  if (typeof error === "object" && error !== null) error[RECORDED] = true;
+  return error;
+}
+function wrapMatchers(matchers, context) {
+  if (typeof matchers !== "object" && typeof matchers !== "function") return matchers;
+  return new Proxy(matchers, {
+    get(target, property, receiver) {
+      const value = Reflect.get(target, property, receiver);
+      if (typeof property === "symbol") return value;
+      if (value !== null && typeof value === "object") {
+        return wrapMatchers(value, { ...context, modifiers: `${context.modifiers}${property}.` });
+      }
+      if (typeof value !== "function") return value;
+      return (...args) => {
+        const text = `${context.subject}.${context.modifiers}${property}(${describeArgs(args)})`;
+        const errorsBefore = context.soft ? test$1.test.info().errors.length : 0;
+        const settle = (error, hasError) => {
+          const softFailure = context.soft && test$1.test.info().errors.length > errorsBefore;
+          const after = record({ text, passed: !hasError && !softFailure });
+          if (hasError) throw failed(error);
+          return after;
+        };
+        let result;
+        try {
+          result = value.apply(target, args);
+        } catch (error) {
+          settle(error, true);
+        }
+        if (isThenable(result)) {
+          return result.then(
+            async (resolved) => {
+              await settle(void 0, false);
+              return resolved;
+            },
+            (error) => {
+              settle(error, true);
+            }
+          );
+        }
+        settle(void 0, false);
+        return result;
+      };
+    }
+  });
+}
+function wrapEntry(entry, thisArg, args, soft, label) {
+  const matchers = Reflect.apply(entry, thisArg, args);
+  const [received] = args;
+  return wrapMatchers(matchers, { subject: `expect${label}(${describeValue(received)})`, modifiers: "", soft });
+}
+var expect = new Proxy(test$1.expect, {
+  apply(target, thisArg, args) {
+    return wrapEntry(target, thisArg, args, false, "");
+  },
+  get(target, property, receiver) {
+    const value = Reflect.get(target, property, receiver);
+    if (property === "soft" && typeof value === "function") {
+      return (...args) => wrapEntry(value, target, args, true, ".soft");
+    }
+    if (property === "poll" && typeof value === "function") {
+      return (...args) => wrapEntry(value, target, args, false, ".poll");
+    }
+    return value;
+  }
+});
+function safeName(parts) {
+  return parts.join("-").replace(/[^A-Za-z0-9.-]+/g, "-").replace(/^[-.]+|[-.]+$/g, "").slice(0, 100);
+}
+function demoFolderFor(params) {
+  if (params.proofOut === void 0 || params.proofOut === "") return params.outputPath(params.folder);
+  return path.join(params.proofOut, safeName([params.projectName, params.testId]) || "test", params.folder);
+}
+
+// ../playwright/src/human.ts
+function pointerScript() {
+  return `(() => {
+  if (window.top !== window || window.__outerlayerPointer) return;
+  const KEY = "outerlayer-pointer";
+  let x = -40, y = -40, shown = false, element;
+  try {
+    const saved = JSON.parse(sessionStorage.getItem(KEY) || "null");
+    if (saved) { x = saved.x; y = saved.y; shown = true; }
+  } catch {}
+  const place = () => {
+    if (!element) return;
+    element.style.transform = "translate(" + (x - 3) + "px," + (y - 2) + "px)";
+    element.style.opacity = shown ? "1" : "0";
+  };
+  const mount = () => {
+    if (element && element.isConnected) return;
+    const root = document.documentElement;
+    if (!root) return;
+    element = document.createElement("div");
+    element.setAttribute("data-outerlayer-pointer", "");
+    element.style.cssText = "position:fixed;left:0;top:0;width:24px;height:28px;pointer-events:none;z-index:2147483647;filter:drop-shadow(0 1px 2px rgba(0,0,0,.4));";
+    element.innerHTML = '<svg width="24" height="28" viewBox="0 0 24 28" xmlns="http://www.w3.org/2000/svg"><path d="M3 2.5 L3 22 L8.2 17.2 L11.8 25.2 L15.4 23.6 L11.9 15.8 L19 15.8 Z" fill="#111827" stroke="#ffffff" stroke-width="1.8" stroke-linejoin="round"/></svg>';
+    root.appendChild(element);
+    place();
+  };
+  const ring = (cx, cy) => {
+    const root = document.documentElement;
+    if (!root) return;
+    const circle = document.createElement("div");
+    circle.setAttribute("data-outerlayer-pointer", "");
+    circle.style.cssText = "position:fixed;left:" + cx + "px;top:" + cy + "px;width:12px;height:12px;pointer-events:none;z-index:2147483646;border-radius:50%;border:2px solid rgba(59,130,246,.9);background:rgba(59,130,246,.2);transform:translate(-50%,-50%);";
+    root.appendChild(circle);
+    const began = performance.now();
+    const grow = (now) => {
+      const p = Math.min(1, (now - began) / 480);
+      const size = 12 + 30 * (1 - Math.pow(1 - p, 3));
+      circle.style.width = size + "px";
+      circle.style.height = size + "px";
+      circle.style.opacity = String(1 - p);
+      if (p < 1) requestAnimationFrame(grow); else circle.remove();
+    };
+    requestAnimationFrame(grow);
+  };
+  addEventListener("mousemove", (event) => {
+    x = event.clientX; y = event.clientY; shown = true;
+    mount(); place();
+    try { sessionStorage.setItem(KEY, JSON.stringify({ x, y })); } catch {}
+  }, true);
+  addEventListener("mousedown", (event) => ring(event.clientX, event.clientY), true);
+  window.__outerlayerPointer = { place: (px, py) => { x = px; y = py; shown = true; mount(); place(); } };
+  if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", mount); else mount();
+  // A framework that replaces the document's children takes the pointer with it, so put it back.
+  setInterval(() => { if (shown && element && !element.isConnected) { element = undefined; mount(); } }, 200);
+})();`;
+}
+var sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
+var STEP_TIMEOUT = 5e3;
+function ease(p) {
+  return p < 0.5 ? 4 * p * p * p : 1 - Math.pow(-2 * p + 2, 3) / 2;
+}
+var Hand = class {
+  constructor(page, start) {
+    this.page = page;
+    this.x = start.x;
+    this.y = start.y;
+  }
+  get position() {
+    return { x: this.x, y: this.y };
+  }
+  async moveTo(targetX, targetY) {
+    const dx = targetX - this.x;
+    const dy = targetY - this.y;
+    const distance = Math.hypot(dx, dy);
+    if (distance < 2) return;
+    const duration = Math.min(950, Math.max(320, 240 + distance * 0.6));
+    const steps = Math.max(10, Math.round(duration / 16));
+    const bow = Math.min(36, distance * 0.06);
+    const normalX = -dy / distance;
+    const normalY = dx / distance;
+    const fromX = this.x;
+    const fromY = this.y;
+    const began = Date.now();
+    for (let step = 1; step <= steps; step++) {
+      const p = step / steps;
+      const along = ease(p);
+      const side = Math.sin(Math.PI * p) * bow;
+      await this.page.mouse.move(fromX + dx * along + normalX * side, fromY + dy * along + normalY * side);
+      const wait = began + duration * p - Date.now();
+      if (wait > 0) await sleep(wait);
+    }
+    this.x = targetX;
+    this.y = targetY;
+  }
+  /** Moves to the point Playwright will click: `position` inside the element, or its centre. */
+  async pointAt(locator, position) {
+    const box = await locator.boundingBox({ timeout: STEP_TIMEOUT }).catch(() => null);
+    if (box === null) return;
+    const x = box.x + (position?.x ?? box.width / 2);
+    const y = box.y + (position?.y ?? box.height / 2);
+    await this.moveTo(x, y);
+  }
+};
+async function bringIntoView(locator) {
+  const inView = await locator.evaluate(
+    (element) => {
+      const rect = element.getBoundingClientRect();
+      return rect.top >= 56 && rect.bottom <= window.innerHeight - 24;
+    },
+    void 0,
+    { timeout: STEP_TIMEOUT }
+  ).catch(() => true);
+  if (inView) return;
+  await locator.evaluate((element) => element.scrollIntoView({ behavior: "smooth", block: "center" }), void 0, { timeout: STEP_TIMEOUT }).catch(() => void 0);
+  let previous = Number.NaN;
+  let still = 0;
+  for (let tries = 0; tries < 90 && still < 4; tries++) {
+    await sleep(16);
+    const top = await locator.evaluate((element) => element.getBoundingClientRect().top, void 0, { timeout: STEP_TIMEOUT }).catch(() => previous);
+    still = Math.abs(top - previous) < 0.5 ? still + 1 : 0;
+    previous = top;
+  }
+}
+var TEXT_INPUT_TYPES = /* @__PURE__ */ new Set(["", "text", "search", "email", "url", "tel", "password", "number"]);
+function actLikeAPerson(page, hand) {
+  const prototype = Object.getPrototypeOf(page.locator("html"));
+  const original = {
+    click: prototype.click,
+    dblclick: prototype.dblclick,
+    check: prototype.check,
+    uncheck: prototype.uncheck,
+    setChecked: prototype.setChecked,
+    hover: prototype.hover,
+    fill: prototype.fill,
+    selectOption: prototype.selectOption
+  };
+  const approach = async (locator, position) => {
+    await locator.waitFor({ state: "visible", timeout: STEP_TIMEOUT }).catch(() => void 0);
+    await bringIntoView(locator);
+    await hand.pointAt(locator, position);
+    await sleep(130);
+  };
+  const pointing = (name) => async function(options) {
+    await approach(this, options?.position);
+    return original[name].call(this, options);
+  };
+  prototype.click = pointing("click");
+  prototype.dblclick = pointing("dblclick");
+  prototype.check = pointing("check");
+  prototype.uncheck = pointing("uncheck");
+  prototype.hover = async function(options) {
+    await approach(this, options?.position);
+    await original.hover.call(this, { ...options, timeout: options?.timeout ?? STEP_TIMEOUT }).catch(() => void 0);
+  };
+  prototype.setChecked = async function(checked, options) {
+    await approach(this, options?.position);
+    return original.setChecked.call(this, checked, options);
+  };
+  prototype.selectOption = async function(values, options) {
+    await approach(this);
+    const chosen = await original.selectOption.call(this, values, options);
+    await sleep(250);
+    return chosen;
+  };
+  prototype.fill = async function(value, options) {
+    const field = await this.evaluate(
+      (element) => ({
+        tag: element.tagName,
+        type: element instanceof HTMLInputElement ? element.type : "",
+        editable: element.isContentEditable
+      }),
+      void 0,
+      { timeout: options?.timeout ?? 3e4 }
+    ).catch(() => void 0);
+    const typeable = field !== void 0 && (field.tag === "TEXTAREA" || field.editable || field.tag === "INPUT" && TEXT_INPUT_TYPES.has(field.type) && !value.includes("\n"));
+    if (!typeable || value === "") return original.fill.call(this, value, options);
+    await approach(this);
+    await original.click.call(this);
+    await original.fill.call(this, "", options);
+    const delay = Math.max(14, Math.min(55, Math.round(1600 / value.length)));
+    await this.pressSequentially(value, { delay });
+    const typed = await this.inputValue().catch(() => void 0);
+    if (typed !== void 0 && typed !== value) await original.fill.call(this, value, options);
+    await sleep(120);
+  };
+  return () => {
+    Object.assign(prototype, original);
+  };
+}
+
+// ../playwright/src/settings.ts
+var FIXED_SETTINGS = {
+  /** Each test starts at this time, and its clock then runs normally. */
+  startTime: "2026-01-15T10:00:00.000Z",
+  timezoneId: "UTC",
+  locale: "en-US",
+  viewport: { width: 1280, height: 800 },
+  deviceScaleFactor: 1
+};
+var MASK_COLOR = "#808080";
+var DEFAULT_DEMO_OPTIONS = { clock: true, random: true, animations: true, caret: true, fonts: true };
+function resolveDemoOptions(options) {
+  return { ...DEFAULT_DEMO_OPTIONS, ...options };
+}
+function randomScript() {
+  return `(() => {
+  const imul = Math.imul;
+  let state = 0x2f6e2b1;
+  Math.random = () => {
+    state = (state + 0x6d2b79f5) >>> 0;
+    let t = state;
+    t = imul(t ^ (t >>> 15), t | 1);
+    t ^= t + imul(t ^ (t >>> 7), t | 61);
+    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+  };
+})();`;
+}
+var ANIMATION_RULES = [
+  "animation-duration: 0s !important;",
+  "animation-delay: 0s !important;",
+  "transition-duration: 0s !important;",
+  "transition-delay: 0s !important;",
+  "scroll-behavior: auto !important;"
+];
+var CARET_RULES = ["caret-color: transparent !important;"];
+function stylesheetFor(options) {
+  const rules = [...options.animations ? ANIMATION_RULES : [], ...options.caret ? CARET_RULES : []];
+  return rules.length === 0 ? "" : `*, *::before, *::after {
+  ${rules.join("\n  ")}
+}`;
+}
+stylesheetFor(DEFAULT_DEMO_OPTIONS);
+var STYLE_ELEMENT_ID = "outerlayer-demo-style";
+function stylesheetScript(css) {
+  return `(() => {
+  const add = () => {
+    if (document.getElementById(${JSON.stringify(STYLE_ELEMENT_ID)})) return;
+    const parent = document.head || document.documentElement;
+    if (!parent) return;
+    const element = document.createElement("style");
+    element.id = ${JSON.stringify(STYLE_ELEMENT_ID)};
+    element.textContent = ${JSON.stringify(css)};
+    parent.appendChild(element);
+  };
+  add();
+  document.addEventListener("DOMContentLoaded", add);
+})();`;
+}
+var HIDE_OVERLAY = "[data-outerlayer-mask]{visibility:hidden!important}";
+var HIDE_POINTER = "[data-outerlayer-pointer],[data-outerlayer-highlight]{visibility:hidden!important}";
+async function takeFrame(page, params) {
+  const { path: path$1, options, masks, fullPage = false, hideOverlay = false } = params;
+  if (options.fonts) await page.evaluate(() => document.fonts.ready.then(() => void 0));
+  const css = stylesheetFor(options);
+  if (css !== "") await page.evaluate(stylesheetScript(css));
+  const bytes = await page.screenshot({
+    // Motion stops for the frame even when the video keeps it, so two runs give the same frame.
+    animations: "disabled",
+    caret: options.caret ? "hide" : "initial",
+    scale: "css",
+    fullPage,
+    mask: masks,
+    maskColor: MASK_COLOR,
+    style: hideOverlay ? `${HIDE_OVERLAY}
+${HIDE_POINTER}` : HIDE_POINTER
+  });
+  fs.mkdirSync(path.dirname(path$1), { recursive: true });
+  fs.writeFileSync(path$1, bytes);
+  return crypto.createHash("sha256").update(bytes).digest("hex");
+}
+function takeStill(page, params) {
+  return takeFrame(page, params);
+}
+
+// ../playwright/src/highlight.ts
+var HIGHLIGHT_ATTRIBUTE = "data-outerlayer-highlight";
+async function showHighlight(locator) {
+  await locator.evaluate(
+    (element, attribute) => {
+      const box = document.createElement("div");
+      box.setAttribute(attribute, "");
+      box.style.cssText = "position:fixed;pointer-events:none;z-index:2147483630;border-radius:10px;opacity:0;box-shadow:0 0 0 3px rgba(59,130,246,.95),0 0 0 9999px rgba(15,23,42,.42);";
+      document.documentElement.appendChild(box);
+      const place = () => {
+        if (!box.isConnected) return;
+        const rect = element.getBoundingClientRect();
+        box.style.left = `${rect.left - 8}px`;
+        box.style.top = `${rect.top - 6}px`;
+        box.style.width = `${rect.width + 16}px`;
+        box.style.height = `${rect.height + 12}px`;
+        requestAnimationFrame(place);
+      };
+      place();
+      const began = performance.now();
+      const show = (now) => {
+        const p = Math.min(1, (now - began) / 260);
+        box.style.opacity = String(p);
+        if (p < 1) requestAnimationFrame(show);
+      };
+      requestAnimationFrame(show);
+    },
+    HIGHLIGHT_ATTRIBUTE,
+    { timeout: 1e4 }
+  );
+  await locator.page().waitForTimeout(300);
+}
+async function clearHighlights(page) {
+  await page.evaluate(async (attribute) => {
+    const boxes = Array.from(document.querySelectorAll(`[${attribute}]`));
+    if (boxes.length === 0) return;
+    const began = performance.now();
+    await new Promise((resolve) => {
+      const hide = (now) => {
+        const p = Math.min(1, (now - began) / 220);
+        for (const box of boxes) box.style.opacity = String(1 - p);
+        if (p < 1) requestAnimationFrame(hide);
+        else resolve();
+      };
+      requestAnimationFrame(hide);
+    });
+    for (const box of boxes) box.remove();
+  }, HIGHLIGHT_ATTRIBUTE).catch(() => void 0);
+}
+
+// ../playwright/src/panel.ts
+var PANEL_ATTRIBUTES = { terminal: "data-outerlayer-terminal", http: "data-outerlayer-http" };
+var TITLES = { terminal: "Terminal", http: "HTTP" };
+async function openPanel(page, kind, prompt, typed) {
+  await page.evaluate(
+    async ({ prompt: prompt2, typed: typed2, title, attributes, attribute }) => {
+      for (const name of attributes) document.querySelector(`[${name}]`)?.remove();
+      const panel = document.createElement("div");
+      panel.setAttribute(attribute, "");
+      panel.style.cssText = "position:fixed;left:50%;bottom:28px;width:min(860px,calc(100vw - 64px));transform:translate(-50%,16px);opacity:0;z-index:2147483640;background:#0f172a;color:#e2e8f0;border-radius:12px;box-shadow:0 24px 60px rgba(15,23,42,.45),0 0 0 1px rgba(148,163,184,.25);font:14px/1.55 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;overflow:hidden;";
+      const bar = document.createElement("div");
+      bar.style.cssText = "display:flex;align-items:center;gap:8px;padding:10px 14px;background:#1e293b;border-bottom:1px solid rgba(148,163,184,.2)";
+      for (const colour of ["#f87171", "#fbbf24", "#34d399"]) {
+        const dot = document.createElement("span");
+        dot.style.cssText = `width:12px;height:12px;border-radius:50%;background:${colour}`;
+        bar.appendChild(dot);
+      }
+      const label = document.createElement("span");
+      label.style.cssText = "margin-left:8px;color:#94a3b8;font-size:12px";
+      label.textContent = title;
+      bar.appendChild(label);
+      const body = document.createElement("div");
+      body.setAttribute("data-body", "");
+      body.style.cssText = "padding:14px 18px 18px;white-space:pre-wrap;word-break:break-word;min-height:72px;max-height:360px;overflow:hidden";
+      panel.append(bar, body);
+      document.documentElement.appendChild(panel);
+      const line = document.createElement("div");
+      const promptSpan = document.createElement("span");
+      promptSpan.style.color = "#34d399";
+      promptSpan.textContent = prompt2;
+      const typedSpan = document.createElement("span");
+      const caret = document.createElement("span");
+      caret.setAttribute("data-caret", "");
+      caret.style.cssText = "display:inline-block;width:8px;height:16px;margin-left:1px;vertical-align:-3px;background:#e2e8f0";
+      line.append(promptSpan, typedSpan, caret);
+      body.appendChild(line);
+      const began = performance.now();
+      await new Promise((resolve) => {
+        const show = (now) => {
+          const p = Math.min(1, (now - began) / 260);
+          panel.style.opacity = String(p);
+          panel.style.transform = `translate(-50%,${16 * (1 - p)}px)`;
+          if (p < 1) requestAnimationFrame(show);
+          else resolve();
+        };
+        requestAnimationFrame(show);
+      });
+      for (const character of typed2) {
+        typedSpan.textContent += character;
+        await new Promise((resolve) => setTimeout(resolve, 34));
+      }
+    },
+    { prompt, typed, title: TITLES[kind], attributes: Object.values(PANEL_ATTRIBUTES), attribute: PANEL_ATTRIBUTES[kind] }
+  );
+}
+async function printToPanel(page, kind, lines) {
+  await page.evaluate(
+    async ({ lines: lines2, attribute }) => {
+      const colours = { plain: "#e2e8f0", good: "#86efac", warn: "#fcd34d", bad: "#fca5a5", muted: "#94a3b8" };
+      const body = document.querySelector(`[${attribute}] [data-body]`);
+      if (!body) return;
+      body.querySelector("[data-caret]")?.remove();
+      for (const { text, tone } of lines2) {
+        const line = document.createElement("div");
+        line.textContent = text;
+        line.style.color = colours[tone ?? "plain"] ?? colours.plain;
+        body.appendChild(line);
+        await new Promise((resolve) => setTimeout(resolve, 60));
+      }
+    },
+    { lines, attribute: PANEL_ATTRIBUTES[kind] }
+  );
+}
+async function closePanels(page) {
+  await page.evaluate(async (attributes) => {
+    const panels = attributes.flatMap((name) => Array.from(document.querySelectorAll(`[${name}]`)));
+    if (panels.length === 0) return;
+    const began = performance.now();
+    await new Promise((resolve) => {
+      const hide = (now) => {
+        const p = Math.min(1, (now - began) / 220);
+        for (const panel of panels) {
+          panel.style.opacity = String(1 - p);
+          panel.style.transform = `translate(-50%,${12 * p}px)`;
+        }
+        if (p < 1) requestAnimationFrame(hide);
+        else resolve();
+      };
+      requestAnimationFrame(hide);
+    });
+    for (const panel of panels) panel.remove();
+  }, Object.values(PANEL_ATTRIBUTES)).catch(() => void 0);
+}
+function terminalLines(output) {
+  return output.replace(/\u001b\[[0-9;]*m/g, "").replace(/\s+$/, "").split("\n").map((text) => ({ text, tone: text.startsWith("\u2713") ? "good" : text.startsWith("!") ? "warn" : "plain" }));
+}
+var HTTP_BODY_LINES = 14;
+function httpLines(response) {
+  const ok = response.status >= 200 && response.status < 400;
+  const lines = [{ text: `${response.status} ${STATUS_TEXT[response.status] ?? ""}`.trim(), tone: ok ? "good" : "bad" }];
+  if (response.body === void 0) return lines;
+  const text = typeof response.body === "string" ? response.body : JSON.stringify(response.body, null, 2) ?? "";
+  const bodyLines = text.split("\n");
+  for (const line of bodyLines.slice(0, HTTP_BODY_LINES)) lines.push({ text: line });
+  if (bodyLines.length > HTTP_BODY_LINES) lines.push({ text: `\u2026 ${bodyLines.length - HTTP_BODY_LINES} more lines`, tone: "muted" });
+  return lines;
+}
+var STATUS_TEXT = {
+  200: "OK",
+  201: "Created",
+  202: "Accepted",
+  204: "No Content",
+  400: "Bad Request",
+  401: "Unauthorized",
+  403: "Forbidden",
+  404: "Not Found",
+  409: "Conflict",
+  422: "Unprocessable Content",
+  429: "Too Many Requests",
+  500: "Internal Server Error",
+  503: "Service Unavailable"
+};
+var ESTIMATED_WORDS_PER_SECOND = 2.9;
+function estimateSeconds(text) {
+  const words = text.trim().split(/\s+/).filter((word) => word !== "").length;
+  return words === 0 ? 0 : words / ESTIMATED_WORDS_PER_SECOND + 0.3;
+}
+function voiceCommand(env) {
+  const cli = env.OUTERLAYER_CLI;
+  if (cli === void 0 || cli === "") return void 0;
+  return /\.[cm]?js$/.test(cli) ? [process.execPath, cli, "demo-voice"] : [cli, "demo-voice"];
+}
+var VoiceClient = class {
+  constructor(command) {
+    this.command = command;
+    this.waiting = /* @__PURE__ */ new Map();
+    this.nextId = 1;
+  }
+  /** Speaks `text` into the WAV file `out`, or estimates its length when no voice can run. */
+  async speak(text, out) {
+    if (text.trim() === "") return { seconds: 0, written: false };
+    if (this.command === void 0 || this.broken !== void 0) return { seconds: estimateSeconds(text), written: false };
+    try {
+      fs.mkdirSync(path.dirname(out), { recursive: true });
+      const seconds2 = await this.request(text, out);
+      return { seconds: seconds2, written: true };
+    } catch (error) {
+      this.broken = error instanceof Error ? error.message : String(error);
+      process.stderr.write(`@outerlayer/playwright: the voice failed (${this.broken}); beats use an estimated length
+`);
+      return { seconds: estimateSeconds(text), written: false };
+    }
+  }
+  close() {
+    this.child?.stdin.end();
+    this.child = void 0;
+  }
+  start() {
+    if (this.child !== void 0) return this.child;
+    const [program, ...args] = this.command;
+    const child = child_process.spawn(program, args, { stdio: ["pipe", "pipe", "pipe"] });
+    child.stderr.on("data", (chunk) => process.stderr.write(chunk));
+    const fail = (error) => {
+      for (const waiting of this.waiting.values()) waiting.reject(error);
+      this.waiting.clear();
+      this.child = void 0;
+    };
+    child.on("error", fail);
+    child.on("exit", (code) => fail(new Error(`the voice exited with code ${code}`)));
+    readline.createInterface({ input: child.stdout }).on("line", (line) => {
+      let answer;
+      try {
+        answer = JSON.parse(line);
+      } catch {
+        return;
+      }
+      const waiting = answer.id === void 0 ? void 0 : this.waiting.get(answer.id);
+      if (waiting === void 0) return;
+      this.waiting.delete(answer.id);
+      if (typeof answer.seconds === "number") waiting.resolve(answer.seconds);
+      else waiting.reject(new Error(answer.error ?? "the voice gave no length"));
+    });
+    this.child = child;
+    return child;
+  }
+  request(text, out) {
+    const child = this.start();
+    const id = this.nextId++;
+    return new Promise((resolve, reject) => {
+      this.waiting.set(id, { resolve, reject });
+      child.stdin.write(`${JSON.stringify({ id, text, out })}
+`);
+    });
+  }
+};
+
+// ../playwright/src/fixture.ts
+async function installScript(page, source) {
+  await page.addInitScript(source);
+  await page.evaluate(source);
+}
+function drawMask(locator) {
+  return locator.evaluate(
+    (element, color) => {
+      const box = document.createElement("div");
+      box.setAttribute("data-outerlayer-mask", "");
+      box.style.cssText = `position:fixed;pointer-events:none;z-index:2147483647;background:${color};`;
+      const place = () => {
+        if (!box.isConnected) return;
+        const rect = element.getBoundingClientRect();
+        box.style.left = `${rect.left}px`;
+        box.style.top = `${rect.top}px`;
+        box.style.width = `${rect.width}px`;
+        box.style.height = `${rect.height}px`;
+        requestAnimationFrame(place);
+      };
+      document.documentElement.appendChild(box);
+      place();
+    },
+    MASK_COLOR,
+    { timeout: 2e3 }
+  );
+}
+function paintFrame(page) {
+  return page.evaluate(
+    () => new Promise((resolve) => {
+      const dot = document.createElement("div");
+      dot.style.cssText = "position:fixed;left:0;top:0;width:1px;height:1px;pointer-events:none;z-index:2147483647;background:#000;";
+      document.documentElement.appendChild(dot);
+      requestAnimationFrame(
+        () => requestAnimationFrame(() => {
+          dot.style.background = "#fff";
+          requestAnimationFrame(
+            () => requestAnimationFrame(() => {
+              dot.remove();
+              resolve();
+            })
+          );
+        })
+      );
+    })
+  );
+}
+var pad = (n) => String(n).padStart(2, "0");
+var DEMO_FOLDER = "demo";
+var BEAT_LEAD_IN = 0.15;
+var BEAT_TAIL = 0.45;
+var test = test$1.test.extend({
+  // The settings that vary between runs. A config's `use` or a test's `test.use` replaces any of them.
+  viewport: [FIXED_SETTINGS.viewport, { option: true }],
+  locale: [FIXED_SETTINGS.locale, { option: true }],
+  timezoneId: [FIXED_SETTINGS.timezoneId, { option: true }],
+  deviceScaleFactor: [FIXED_SETTINGS.deviceScaleFactor, { option: true }],
+  demoOptions: [{}, { option: true }],
+  // Playwright's own default scales the video down to fit 800 × 800. The demo records at the fixed viewport's size, so
+  // the text in a clip reads as it does on the page. The size is set once per worker, so it cannot follow a viewport
+  // one test sets: such a test sets `video` with its own size at the top of its file.
+  video: { mode: "on", size: FIXED_SETTINGS.viewport },
+  demo: async ({ page, demoOptions, video: videoOption }, use, testInfo) => {
+    const options = resolveDemoOptions(demoOptions);
+    const smaller = smallerPage(page.viewportSize(), typeof videoOption === "object" && videoOption !== null ? videoOption.size : void 0);
+    const folder = demoFolderFor({ outputPath: (...segments) => testInfo.outputPath(...segments), proofOut: process.env.OUTERLAYER_PROOF_OUT, testId: testInfo.testId, projectName: testInfo.project.name, folder: DEMO_FOLDER });
+    fs.mkdirSync(folder, { recursive: true });
+    if (options.clock) await page.clock.install({ time: new Date(FIXED_SETTINGS.startTime) });
+    if (options.random) await installScript(page, randomScript());
+    if (options.animations) await page.emulateMedia({ reducedMotion: "reduce" });
+    const css = stylesheetFor(options);
+    if (css !== "") await installScript(page, stylesheetScript(css));
+    const startedAt = performance.now();
+    await page.evaluate(
+      () => new Promise((resolve) => {
+        document.documentElement.style.background = "#fafafa";
+        requestAnimationFrame(
+          () => requestAnimationFrame(() => {
+            document.documentElement.style.background = "#fff";
+            requestAnimationFrame(() => requestAnimationFrame(() => resolve()));
+          })
+        );
+      })
+    );
+    const chapters = [];
+    const masks = [];
+    const clearMasks = async () => {
+      masks.length = 0;
+      await page.evaluate(() => document.querySelectorAll("[data-outerlayer-mask]").forEach((node) => node.remove())).catch(() => void 0);
+    };
+    page.on("domcontentloaded", () => {
+      for (const masked of masks) void drawMask(masked).catch(() => void 0);
+    });
+    let chapterCount = 0;
+    let running2;
+    const voice = new VoiceClient(voiceCommand(process.env));
+    let hand;
+    const handFor = async () => {
+      if (hand !== void 0) return hand;
+      await installScript(page, pointerScript());
+      hand = new Hand(page, { x: FIXED_SETTINGS.viewport.width / 2, y: FIXED_SETTINGS.viewport.height / 2 });
+      return hand;
+    };
+    let panelOpen = false;
+    const demo = {
+      async say(narration, steps) {
+        const chapter = running2;
+        if (chapter === void 0) throw new Error("demo.say() must be called inside demo.chapter()");
+        const file = `voice/${pad(chapter.number)}-${pad(chapter.beats.length + 1)}.wav`;
+        const spoken = await voice.speak(narration, path.join(folder, file));
+        const person = await handFor();
+        const startedAtMs = performance.now();
+        const start = seconds(startedAtMs - startedAt);
+        if (panelOpen) {
+          panelOpen = false;
+          await closePanels(page);
+        }
+        const restore = actLikeAPerson(page, person);
+        try {
+          if (steps !== void 0) await steps();
+        } finally {
+          restore();
+        }
+        const due = startedAtMs + (spoken.seconds === 0 ? 0 : (BEAT_LEAD_IN + spoken.seconds + BEAT_TAIL) * 1e3);
+        const wait = due - performance.now();
+        if (wait > 0) await page.waitForTimeout(wait);
+        const end = Math.max(seconds(performance.now() - startedAt), start + 1e-3);
+        chapter.beats.push({ start, end, narration, ...spoken.written ? { voice: { file, seconds: spoken.seconds } } : {} });
+        await clearHighlights(page);
+      },
+      async terminal(command, run) {
+        await openPanel(page, "terminal", "$ ", command);
+        panelOpen = true;
+        const output = await run();
+        await printToPanel(page, "terminal", terminalLines(output));
+        return output;
+      },
+      async http(request, run) {
+        await openPanel(page, "http", "", `${request.method.toUpperCase()} ${request.url}`);
+        panelOpen = true;
+        if (request.body !== void 0) {
+          const body = typeof request.body === "string" ? request.body : JSON.stringify(request.body, null, 2) ?? "";
+          await printToPanel(page, "http", body.split("\n").map((text) => ({ text, tone: "muted" })));
+        }
+        const response = await run();
+        await printToPanel(page, "http", httpLines(response));
+        return response;
+      },
+      async highlight(locator) {
+        await showHighlight(locator);
+      },
+      async screenshot(screenshotOptions = {}) {
+        const chapter = running2;
+        if (chapter === void 0) throw new Error("demo.screenshot() must be called inside demo.chapter()");
+        await chapter.idle();
+        if (chapter.checks.length === 0) throw new Error("demo.screenshot() must be called after at least one check of the chapter");
+        const file = `screenshots/${pad(chapter.number)}.png`;
+        const fullPage = screenshotOptions.fullPage === true;
+        const masked = screenshotOptions.masks === true && masks.length > 0;
+        const sha256 = await takeFrame(page, { path: path.join(folder, file), options, masks: masked ? [...masks] : [], fullPage, hideOverlay: true });
+        chapter.screenshot = { check: chapter.checks.length - 1, file, sha256, fullPage, masked };
+      },
+      async mask(locator) {
+        masks.push(locator);
+        await drawMask(locator);
+      },
+      async chapter(criterionId, title, narrationOrBody, maybeBody) {
+        const told = typeof narrationOrBody === "function";
+        const narration = told ? "" : narrationOrBody;
+        const body = told ? narrationOrBody : maybeBody;
+        const checks = [];
+        const beats = [];
+        const stills = [];
+        chapterCount += 1;
+        const number = chapterCount;
+        let queue = Promise.resolve();
+        const onPass = (check) => {
+          queue = queue.then(async () => {
+            const file = `stills/${pad(number)}-${pad(check)}.png`;
+            try {
+              const sha256 = await takeStill(page, { path: path.join(folder, file), options, masks: [...masks] });
+              stills.push({ check, file, sha256 });
+            } catch {
+            }
+          });
+          return queue;
+        };
+        const start = seconds(performance.now() - startedAt);
+        const current = { number, checks, beats, idle: () => queue };
+        running2 = current;
+        const finish = async () => {
+          const end = Math.max(seconds(performance.now() - startedAt), start + 1e-3);
+          running2 = void 0;
+          chapters.push({
+            criterionId,
+            start,
+            end,
+            title,
+            // A chapter told in beats lists its lines in the narration, for a reader of the record.
+            narration: told ? beats.map((beat) => beat.narration).join(" ").slice(0, 2e3) : narration,
+            checks,
+            stills: stills.sort((a, b) => a.check - b.check),
+            ...current.screenshot === void 0 ? {} : { screenshot: current.screenshot },
+            ...told ? { beats } : {}
+          });
+          await clearMasks();
+        };
+        try {
+          const result = await recordChecksDuring(checks, body, onPass);
+          await finish();
+          return result;
+        } catch (error) {
+          if (!(typeof error === "object" && error !== null && error[RECORDED] === true)) {
+            const message = error instanceof Error ? error.message.split("\n")[0] : String(error);
+            checks.push({ text: clipCheckText(`the chapter body threw: ${message}`), passed: false });
+          }
+          await finish();
+          throw error;
+        }
+      }
+    };
+    try {
+      await use(demo);
+    } finally {
+      voice.close();
+    }
+    const video = page.video();
+    await paintFrame(page).catch(() => void 0);
+    await page.close();
+    if (video === null) return;
+    const videoPath = path.join(folder, "video.webm");
+    await video.saveAs(videoPath);
+    const manifest = buildManifest({ testFile: testInfo.file, rootDir: testInfo.config.rootDir, video: "video.webm", chapters, ...smaller === void 0 ? {} : { viewport: smaller } });
+    const manifestPath = path.join(folder, "manifest.json");
+    fs.writeFileSync(manifestPath, JSON.stringify(manifest, null, 2));
+    await testInfo.attach("demo-video", { path: videoPath, contentType: "video/webm" });
+    await testInfo.attach("demo-manifest", { path: manifestPath, contentType: "application/json" });
+  }
+});
+
+exports.DEMO_FOLDER = DEMO_FOLDER;
+exports.expect = expect;
+exports.test = test;