@humanjs/playwright 0.2.0 → 0.4.0

package/dist/index.js

@@ -1,7 +1,84 @@
-import { resolvePersonality, createRng, bezierPath, humanizePath } from '@humanjs/core';
-export { applyMicroJitter, applyVelocityProfile, bezierPath, blend, careful, createRng, distracted, fast, humanizePath, precise, resolvePersonality } from '@humanjs/core';
+import { resolvePersonality, createRng, sleep as sleep$1, planScroll, countWords, computeReadingDwellMs, planReadingScan, planTypeKeystrokes, bezierPath, humanizePath } from '@humanjs/core';
+export { applyMicroJitter, applyVelocityProfile, bezierPath, blend, careful, computeReadingDwellMs, countWords, createRng, distracted, fast, humanizePath, planScroll, planTypeKeystrokes, precise, resolvePersonality, sleep } from '@humanjs/core';
+import { spawn } from 'child_process';
+import { rmSync } from 'fs';
+import { mkdir, writeFile, mkdtemp, rm } from 'fs/promises';
+import { dirname, extname, join } from 'path';
+import ffmpegStatic from 'ffmpeg-static';
+import { tmpdir } from 'os';
+export { chromium, firefox, webkit } from 'playwright';
 
 // src/index.ts
+
+// src/internal/timing.ts
+function sleep(ms) {
+  return ms > 0 ? new Promise((resolve) => setTimeout(resolve, ms)) : Promise.resolve();
+}
+function speedModeFactor(speed) {
+  switch (speed) {
+    case "fast":
+      return 0.5;
+    case "instant":
+      return 0;
+    default:
+      return 1;
+  }
+}
+function computeDwellTime(meanMs, jitter, personality, speed, rng) {
+  if (meanMs <= 0) return 0;
+  const jitterMag = meanMs * jitter;
+  const offset = rng.nextFloat(-jitterMag, jitterMag);
+  return Math.max(0, (meanMs + offset) * personality.speed * speedModeFactor(speed));
+}
+
+// src/keyboard/index.ts
+async function executeType(target, value, ctx) {
+  const locator = typeof target === "string" ? ctx.page.locator(target) : target;
+  if (value.length === 0) {
+    return { characters: 0, typos: 0, corrections: 0 };
+  }
+  if (ctx.speed === "instant") {
+    await locator.pressSequentially(value, { delay: 0 });
+    return { characters: value.length, typos: 0, corrections: 0 };
+  }
+  await locator.focus();
+  const plan = planTypeKeystrokes(value, ctx.personality.typing, ctx.rng, {
+    personalitySpeed: ctx.personality.speed,
+    speedFactor: speedModeFactor(ctx.speed)
+  });
+  let typos = 0;
+  let corrections = 0;
+  for (const step of plan) {
+    if (step.delayBeforeMs > 0) await sleep(step.delayBeforeMs);
+    await dispatchKey(ctx.page, step.key);
+    if (step.isTypo) typos++;
+    if (step.isCorrection) corrections++;
+  }
+  return { characters: value.length, typos, corrections };
+}
+async function dispatchKey(page, key) {
+  if (key.length > 1 || key.charCodeAt(0) < 128) {
+    await page.keyboard.press(key);
+  } else {
+    await page.keyboard.insertText(key);
+  }
+}
+
+// src/internal/mouse-walk.ts
+async function walkMouseAlongPath(page, path, durationMs) {
+  if (path.length === 0) return;
+  const stepDelayMs = path.length > 1 && durationMs > 0 ? durationMs / (path.length - 1) : 0;
+  for (let i = 0; i < path.length; i++) {
+    const point = path[i];
+    if (!point) continue;
+    await page.mouse.move(point.x, point.y);
+    if (i < path.length - 1 && stepDelayMs > 0) {
+      await sleep(stepDelayMs);
+    }
+  }
+}
+
+// src/mouse/index.ts
 async function executeClick(target, ctx) {
   const locator = typeof target === "string" ? ctx.page.locator(target) : target;
   if (ctx.speed === "instant") {
@@ -23,7 +100,8 @@ async function executeClick(target, ctx) {
     curvature: ctx.personality.mouse.curvature
   });
   const path = humanizePath(rawPath, ctx.rng);
-  await walkMouseAlongPath(ctx.page, path, ctx.personality, ctx.rng, ctx.speed);
+  const travelMs = computeTravelTime(path, ctx.personality, ctx.speed, ctx.rng);
+  await walkMouseAlongPath(ctx.page, path, travelMs);
   const preClickMs = computeDwellTime(
     ctx.personality.dwell.preClickMs,
     ctx.personality.dwell.preClickJitter,
@@ -51,19 +129,6 @@ function pickClickPoint(box, rng) {
   const y = clamp(cy + rng.nextGaussian(0, box.height / 8), box.y, box.y + box.height);
   return { x, y };
 }
-async function walkMouseAlongPath(page, path, personality, rng, speed) {
-  if (path.length === 0) return;
-  const totalTimeMs = computeTravelTime(path, personality, speed, rng);
-  const stepDelayMs = path.length > 1 ? totalTimeMs / (path.length - 1) : 0;
-  for (let i = 0; i < path.length; i++) {
-    const point = path[i];
-    if (!point) continue;
-    await page.mouse.move(point.x, point.y);
-    if (i < path.length - 1 && stepDelayMs > 0) {
-      await sleep(stepDelayMs);
-    }
-  }
-}
 function computeTravelTime(path, personality, speed, rng) {
   let distance = 0;
   for (let i = 1; i < path.length; i++) {
@@ -78,31 +143,779 @@ function computeTravelTime(path, personality, speed, rng) {
   const total = (baseTime + jitter) * personality.speed * speedModeFactor(speed);
   return Math.max(0, total);
 }
-function computeDwellTime(meanMs, jitter, personality, speed, rng) {
-  if (meanMs <= 0) return 0;
-  const jitterMag = meanMs * jitter;
-  const offset = rng.nextFloat(-jitterMag, jitterMag);
-  return Math.max(0, (meanMs + offset) * personality.speed * speedModeFactor(speed));
-}
-function speedModeFactor(speed) {
-  switch (speed) {
-    case "fast":
-      return 0.5;
-    case "instant":
-      return 0;
-    default:
-      return 1;
-  }
-}
 function describeTarget(target) {
   return typeof target === "string" ? target : target.toString?.() ?? "locator";
 }
 function clamp(value, min, max) {
   return value < min ? min : value > max ? max : value;
 }
-function sleep(ms) {
-  return new Promise((resolve) => setTimeout(resolve, ms));
+async function executeRead(target, ctx, options = {}) {
+  let words = 0;
+  let locator;
+  if (typeof target === "string") {
+    locator = ctx.page.locator(target);
+  } else if ("words" in target) {
+    words = target.words;
+  } else if ("text" in target) {
+    words = countWords(target.text);
+  } else {
+    locator = target;
+  }
+  let autoDetectedKind;
+  if (locator) {
+    if (options.scrollIntoView) {
+      await locator.scrollIntoViewIfNeeded();
+    }
+    const text = await locator.innerText().catch(() => "");
+    words = countWords(text);
+    if (options.kind === void 0) {
+      autoDetectedKind = await detectKindFromTag(locator);
+    }
+  }
+  const kind = options.kind ?? autoDetectedKind ?? "prose";
+  const durationMs = computeReadingDwellMs(words, ctx.personality.reading, ctx.rng, {
+    kind,
+    wpmMultiplier: options.wpmMultiplier,
+    personalitySpeed: ctx.personality.speed,
+    speedFactor: speedModeFactor(ctx.speed)
+  });
+  const withMotion = options.withMotion ?? true;
+  if (withMotion && locator && durationMs > 0) {
+    const box = await locator.boundingBox().catch(() => null);
+    if (box) {
+      const lineRects = await getLineRects(locator).catch(() => []);
+      const path = planReadingScan(box, ctx.rng, {
+        start: ctx.getMousePosition(),
+        lineRects: lineRects.length > 0 ? lineRects : void 0
+      });
+      await walkMouseAlongPath(ctx.page, path, durationMs);
+      const final = path[path.length - 1];
+      if (final) ctx.setMousePosition(final);
+      return { words, durationMs, kind };
+    }
+  }
+  if (durationMs > 0) await sleep(durationMs);
+  return { words, durationMs, kind };
+}
+async function getLineRects(locator) {
+  const result = await locator.evaluate((el) => {
+    const walker = el.ownerDocument.createTreeWalker(el, 4);
+    const rects = [];
+    let node = walker.nextNode();
+    while (node) {
+      const text = node.textContent ?? "";
+      if (text.trim().length > 0) {
+        const range = el.ownerDocument.createRange();
+        range.selectNodeContents(node);
+        for (const r of Array.from(range.getClientRects())) {
+          if (r.width > 0 && r.height > 0) {
+            rects.push({ x: r.x, y: r.y, width: r.width, height: r.height });
+          }
+        }
+      }
+      node = walker.nextNode();
+    }
+    rects.sort((a, b) => a.y - b.y || a.x - b.x);
+    const merged = [];
+    for (const r of rects) {
+      const last = merged[merged.length - 1];
+      if (last && Math.abs(last.y - r.y) < 1 && r.x - (last.x + last.width) < 6) {
+        const right = Math.max(last.x + last.width, r.x + r.width);
+        const bottom = Math.max(last.y + last.height, r.y + r.height);
+        last.width = right - last.x;
+        last.height = bottom - last.y;
+      } else {
+        merged.push({ ...r });
+      }
+    }
+    return merged;
+  });
+  if (!Array.isArray(result)) return [];
+  return result.filter(
+    (r) => r != null && typeof r === "object" && typeof r.x === "number" && typeof r.y === "number" && typeof r.width === "number" && typeof r.height === "number"
+  );
 }
+async function detectKindFromTag(locator) {
+  const tag = await locator.evaluate((el) => el.tagName?.toLowerCase() ?? "").catch(() => "");
+  if (tag === "pre" || tag === "code") return "code";
+  return void 0;
+}
+var pendingFrameCleanups = /* @__PURE__ */ new Set();
+var exitHandlerInstalled = false;
+function ensureExitHandler() {
+  if (exitHandlerInstalled) return;
+  exitHandlerInstalled = true;
+  process.on("exit", () => {
+    for (const dir of pendingFrameCleanups) {
+      try {
+        rmSync(dir, { recursive: true, force: true });
+      } catch {
+      }
+    }
+    pendingFrameCleanups.clear();
+  });
+}
+var FFMPEG_PATH = ffmpegStatic;
+var QUALITY_PRESETS = {
+  fast: {
+    captureFormat: "jpeg",
+    captureJpegQuality: 85,
+    captureFps: 24,
+    crf: 23,
+    preset: "fast"
+  },
+  standard: {
+    captureFormat: "jpeg",
+    captureJpegQuality: 90,
+    captureFps: 30,
+    crf: 20,
+    preset: "fast"
+  },
+  high: {
+    captureFormat: "jpeg",
+    captureJpegQuality: 95,
+    captureFps: 30,
+    crf: 18,
+    preset: "slow",
+    // 'animation' suits screen content (large solid regions, sharp edges)
+    // better than 'film' which is tuned for live-action grain.
+    tune: "animation"
+  },
+  lossless: {
+    // PNG capture for perceptually lossless source frames. Temp files are
+    // 10-20× larger than JPEG; output mp4 still benefits from the extra
+    // headroom (no JPEG artifacts to preserve).
+    captureFormat: "png",
+    captureJpegQuality: 100,
+    captureFps: 30,
+    crf: 12,
+    preset: "veryslow",
+    tune: "animation"
+  }
+};
+function getCaptureSettingsForQuality(quality) {
+  const preset = QUALITY_PRESETS[quality];
+  return {
+    format: preset.captureFormat,
+    quality: preset.captureJpegQuality,
+    fps: preset.captureFps
+  };
+}
+var Recording = class {
+  #capture;
+  #windowStartMs;
+  #windowEndMs;
+  #timelineSource;
+  // Frames live on disk until `dispose()` is called. Exporters
+  // (`toVideo`, `toGif`) are repeatable and interleavable — they read the
+  // same frame source, they don't consume it.
+  #disposed = false;
+  constructor(capture, windowStartMs, windowEndMs, timelineSource) {
+    this.#capture = capture;
+    this.#windowStartMs = windowStartMs;
+    this.#windowEndMs = windowEndMs;
+    this.#timelineSource = timelineSource;
+    if (capture !== null) {
+      pendingFrameCleanups.add(capture.dir);
+      ensureExitHandler();
+    }
+  }
+  /** Wall-clock duration of the recorded window. */
+  get durationMs() {
+    return this.#windowEndMs - this.#windowStartMs;
+  }
+  /** True if frames were captured during this recording. */
+  get hasVideo() {
+    return this.#capture !== null;
+  }
+  /**
+   * The structured action timeline of this recording — same data that
+   * `toTimeline()` writes to disk.
+   */
+  get timeline() {
+    return {
+      version: 1,
+      personality: this.#timelineSource.personality,
+      seed: this.#timelineSource.seed,
+      speed: this.#timelineSource.speed,
+      durationMs: this.durationMs,
+      events: this.#timelineSource.events
+    };
+  }
+  /**
+   * Assembles the captured frames into a video at `outputPath`. The output
+   * format is inferred from the extension — `.mp4` (H.264, re-encoded
+   * with the configured quality) or `.webm` (VP9).
+   *
+   * Repeatable and interleavable with `toGif()` — the frame source is read,
+   * not consumed. Frames live until you call `dispose()` (or `await using`
+   * goes out of scope, or the process exits and the OS reaps `tmpdir`).
+   *
+   * @returns the resolved output path.
+   */
+  async toVideo(outputPath, options = {}) {
+    if (this.#disposed) {
+      throw new Error("Recording.toVideo() called after dispose() \u2014 the source frames are gone.");
+    }
+    if (this.#capture === null) {
+      throw new Error(
+        "Recording.toVideo() requires video capture, which was disabled for this recording. Call `human.record(cb)` (default captures video) or pass `output` to @humanjs/recorder's `record()`. `toTimeline()` and `.timeline` work without capture."
+      );
+    }
+    const preset = QUALITY_PRESETS[options.quality ?? "high"];
+    const crf = options.crf ?? preset.crf;
+    const ffmpegPreset = options.preset ?? preset.preset;
+    const tune = options.tune ?? preset.tune;
+    const { dir, frames, startedAtMs, stoppedAtMs } = this.#capture;
+    if (frames.length === 0) {
+      throw new Error(
+        "No frames were captured. The recording window may have been too short, or the page may not have rendered any frames before the callback completed."
+      );
+    }
+    await mkdir(dirname(outputPath), { recursive: true });
+    const ext = extname(outputPath).toLowerCase();
+    if (ext !== ".mp4" && ext !== ".webm") {
+      throw new Error(`Unsupported output extension: ${ext || "(none)"}. Use .mp4 or .webm.`);
+    }
+    const concatPath = `${dir}/concat.txt`;
+    const concatBody = buildConcatFile(frames, stoppedAtMs - startedAtMs);
+    await writeFile(concatPath, concatBody, "utf8");
+    const args = ["-y", "-f", "concat", "-safe", "0", "-i", concatPath, "-vsync", "vfr"];
+    if (ext === ".mp4") {
+      args.push(
+        "-c:v",
+        "libx264",
+        "-pix_fmt",
+        "yuv420p",
+        "-crf",
+        String(crf),
+        "-preset",
+        ffmpegPreset
+      );
+      if (tune) args.push("-tune", tune);
+      args.push("-movflags", "+faststart");
+    } else {
+      args.push(
+        "-c:v",
+        "libvpx-vp9",
+        "-pix_fmt",
+        "yuv420p",
+        "-crf",
+        String(crf),
+        "-b:v",
+        "0",
+        "-deadline",
+        ffmpegPreset === "fast" || ffmpegPreset === "veryfast" ? "realtime" : "good"
+      );
+    }
+    args.push(outputPath);
+    await runFfmpeg(args);
+    return outputPath;
+  }
+  /**
+   * Assembles the captured frames into an animated GIF at `outputPath`.
+   * Optimized for embedding in READMEs, PRs, Slack, and docs — uses a
+   * per-recording palette (`palettegen` + `paletteuse`) with Bayer dithering
+   * so gradients stay smooth without exploding the file size.
+   *
+   * Repeatable and interleavable with `toVideo()` — call them in any order,
+   * any number of times. Frames live until you call `dispose()`.
+   *
+   * @returns the resolved output path.
+   */
+  async toGif(outputPath, options = {}) {
+    if (this.#disposed) {
+      throw new Error("Recording.toGif() called after dispose() \u2014 the source frames are gone.");
+    }
+    if (this.#capture === null) {
+      throw new Error(
+        "Recording.toGif() requires video capture, which was disabled for this recording. Call `human.record(cb)` (default captures video) or pass `output` to @humanjs/recorder's `record()`. `toTimeline()` and `.timeline` work without capture."
+      );
+    }
+    const fps = options.fps ?? 15;
+    const width = options.width;
+    const { dir, frames, startedAtMs, stoppedAtMs } = this.#capture;
+    if (frames.length === 0) {
+      throw new Error(
+        "No frames were captured. The recording window may have been too short, or the page may not have rendered any frames before the callback completed."
+      );
+    }
+    await mkdir(dirname(outputPath), { recursive: true });
+    const ext = extname(outputPath).toLowerCase();
+    if (ext !== ".gif") {
+      throw new Error(`Unsupported output extension: ${ext || "(none)"}. Use .gif.`);
+    }
+    const concatPath = `${dir}/concat.txt`;
+    const concatBody = buildConcatFile(frames, stoppedAtMs - startedAtMs);
+    await writeFile(concatPath, concatBody, "utf8");
+    const filterSteps = [`fps=${fps}`];
+    if (width !== void 0) {
+      filterSteps.push(`scale=${width}:-1:flags=lanczos`);
+    }
+    const preFilter = filterSteps.join(",");
+    const filterComplex = `${preFilter},split [a][b]; [a] palettegen=stats_mode=diff [p]; [b][p] paletteuse=dither=bayer:bayer_scale=5`;
+    const args = [
+      "-y",
+      "-f",
+      "concat",
+      "-safe",
+      "0",
+      "-i",
+      concatPath,
+      "-filter_complex",
+      filterComplex,
+      "-loop",
+      "0",
+      outputPath
+    ];
+    await runFfmpeg(args);
+    return outputPath;
+  }
+  /**
+   * Writes the structured action timeline to `outputPath` as JSON.
+   * Independent of `toVideo()` / `toGif()` — call before, after, in between,
+   * or instead. Safe to call multiple times. Unaffected by `dispose()`
+   * (the timeline lives in memory, not in the captured-frames temp dir).
+   *
+   * @returns the resolved output path.
+   */
+  async toTimeline(outputPath) {
+    await mkdir(dirname(outputPath), { recursive: true });
+    await writeFile(outputPath, `${JSON.stringify(this.timeline, null, 2)}
+`, "utf8");
+    return outputPath;
+  }
+  /**
+   * Releases the captured-frames temp directory. After this call, `toVideo()`
+   * and `toGif()` throw — but `toTimeline()` and the in-memory `timeline`
+   * still work because those don't depend on the frames.
+   *
+   * **Optional.** A process-exit handler also sweeps any un-disposed frame
+   * dirs, so casual scripts can skip this entirely. Call it explicitly when
+   * you want to release frames proactively (long-running services, batch
+   * jobs, or anywhere you want predictable disk usage).
+   *
+   * Idempotent. Safe to call on a Recording that never had a capture
+   * (timeline-only mode) — no-op there.
+   *
+   * Also wired to `Symbol.asyncDispose`, so the explicit-resource-management
+   * `await using` syntax (TypeScript ≥ 5.2 / Node ≥ 20.4) works:
+   *
+   * ```ts
+   * await using rec = await human.record(fn);
+   * await rec.toVideo('demo.mp4');
+   * await rec.toGif('demo.gif');
+   * // frames cleaned up automatically when `rec` goes out of scope
+   * ```
+   */
+  async dispose() {
+    if (this.#disposed) return;
+    if (this.#capture !== null) {
+      await this.#capture.cleanup();
+      pendingFrameCleanups.delete(this.#capture.dir);
+    }
+    this.#disposed = true;
+  }
+  async [Symbol.asyncDispose]() {
+    await this.dispose();
+  }
+};
+function buildConcatFile(frames, totalMs) {
+  const lines = [];
+  for (let i = 0; i < frames.length; i++) {
+    const frame = frames[i];
+    const next = frames[i + 1];
+    const nextTMs = next ? next.tMs : totalMs;
+    const durationS = Math.max(1e-3, (nextTMs - frame.tMs) / 1e3);
+    lines.push(`file '${frame.path.replaceAll("'", "'\\''")}'`);
+    lines.push(`duration ${durationS.toFixed(6)}`);
+  }
+  const last = frames[frames.length - 1];
+  if (last) {
+    lines.push(`file '${last.path.replaceAll("'", "'\\''")}'`);
+  }
+  return `${lines.join("\n")}
+`;
+}
+function runFfmpeg(args) {
+  if (!FFMPEG_PATH) {
+    return Promise.reject(
+      new Error(
+        "ffmpeg-static did not bundle a binary for this platform. Install system ffmpeg and set FFMPEG_PATH, or run on a supported platform."
+      )
+    );
+  }
+  return new Promise((resolve, reject) => {
+    const proc = spawn(FFMPEG_PATH, [...args]);
+    let stderr = "";
+    proc.stderr?.on("data", (chunk) => {
+      stderr += chunk.toString();
+    });
+    proc.on("error", reject);
+    proc.on("close", (code) => {
+      if (code === 0) resolve();
+      else reject(new Error(`ffmpeg exited with code ${code}
+${stderr.trim()}`));
+    });
+  });
+}
+async function startCapture(page, options = {}) {
+  const format = options.format ?? "jpeg";
+  const quality = options.quality ?? 95;
+  const fps = Math.max(1, Math.min(60, options.fps ?? 30));
+  const intervalMs = 1e3 / fps;
+  const dir = await mkdtemp(join(tmpdir(), "humanjs-capture-"));
+  const frames = [];
+  const ext = format === "png" ? "png" : "jpg";
+  let stopped = false;
+  let frameIndex = 0;
+  const writes = [];
+  const startedAtMs = Date.now();
+  const captureLoop = async () => {
+    while (!stopped) {
+      const loopStart = Date.now();
+      try {
+        const buf = await page.screenshot({
+          type: format,
+          quality: format === "jpeg" ? quality : void 0
+        });
+        if (stopped) return;
+        const idx = frameIndex++;
+        const path = join(dir, `frame_${String(idx).padStart(6, "0")}.${ext}`);
+        const tMs = loopStart - startedAtMs;
+        writes.push(
+          writeFile(path, buf).then(
+            () => {
+              frames.push({ path, tMs });
+            },
+            (err) => {
+              console.warn(`humanjs capture: write failed for frame ${idx}:`, err);
+            }
+          )
+        );
+      } catch (err) {
+        if (stopped) return;
+        console.warn("humanjs capture: screenshot failed, stopping loop:", err);
+        stopped = true;
+        return;
+      }
+      const elapsed = Date.now() - loopStart;
+      const wait = intervalMs - elapsed;
+      if (wait > 0) await sleep$1(wait);
+    }
+  };
+  const loopPromise = captureLoop();
+  const finish = async () => {
+    stopped = true;
+    await loopPromise;
+    await Promise.allSettled(writes);
+  };
+  return {
+    async stop() {
+      await finish();
+      const stoppedAtMs = Date.now();
+      return {
+        dir,
+        frames: [...frames].sort((a, b) => a.tMs - b.tMs),
+        startedAtMs,
+        stoppedAtMs,
+        format,
+        fps,
+        cleanup: () => rm(dir, { recursive: true, force: true }).then(() => void 0)
+      };
+    },
+    async abort() {
+      await finish();
+      await rm(dir, { recursive: true, force: true }).catch(() => void 0);
+    }
+  };
+}
+var RESERVED_TARGETS = /* @__PURE__ */ new Set(["natural", "end", "top"]);
+async function executeScroll(target, ctx, options = {}) {
+  const { page, personality, rng, speed } = ctx;
+  const speedFactor = speedModeFactor(speed);
+  const axis = options.axis ?? "y";
+  const container = resolveWithin(options.within, ctx);
+  const geom = container ? await readContainerGeometry(container, axis) : await readWindowGeometry(page, axis);
+  if (!geom) {
+    return { from: 0, to: 0, distance: 0, durationMs: 0 };
+  }
+  const from = geom.current;
+  const targetPos = await resolveTarget(target, ctx, geom, container, axis, options.block);
+  const to = clamp2(targetPos, 0, Math.max(0, geom.total - geom.viewport));
+  const distance = to - from;
+  if (distance === 0) {
+    return { from, to, distance: 0, durationMs: 0 };
+  }
+  if (speed === "instant") {
+    if (container) {
+      await container.evaluate(
+        (el, args) => {
+          const a = args;
+          if (a.axis === "x") el.scrollTo(a.pos, el.scrollTop);
+          else el.scrollTo(el.scrollLeft, a.pos);
+        },
+        { axis, pos: to }
+      );
+    } else {
+      await page.evaluate(
+        (args) => {
+          if (args.axis === "x") window.scrollTo(args.pos, window.scrollY);
+          else window.scrollTo(window.scrollX, args.pos);
+        },
+        { axis, pos: to }
+      );
+    }
+    return { from, to, distance, durationMs: 0 };
+  }
+  const segments = planScroll(from, to, personality.scroll, rng, {
+    forceOvershoot: options.overshoot,
+    withPauses: options.withPauses,
+    personalitySpeed: personality.speed,
+    speedFactor
+  });
+  if (container && geom.hover) {
+    await page.mouse.move(geom.hover.x, geom.hover.y);
+  }
+  const startedAt = Date.now();
+  await walkSegments(page, segments, axis, container);
+  const durationMs = Date.now() - startedAt;
+  return { from, to, distance, durationMs };
+}
+function resolveWithin(within, ctx) {
+  if (!within) return null;
+  return typeof within === "string" ? ctx.page.locator(within) : within;
+}
+async function readWindowGeometry(page, axis) {
+  const g = await page.evaluate((a) => {
+    if (a === "x") {
+      return {
+        current: window.scrollX,
+        viewport: window.innerWidth,
+        total: Math.max(document.documentElement.scrollWidth, document.body?.scrollWidth ?? 0)
+      };
+    }
+    return {
+      current: window.scrollY,
+      viewport: window.innerHeight,
+      total: Math.max(document.documentElement.scrollHeight, document.body?.scrollHeight ?? 0)
+    };
+  }, axis);
+  return { current: g.current, viewport: g.viewport, total: g.total };
+}
+async function readContainerGeometry(container, axis) {
+  return container.evaluate((el, a) => {
+    const rect = el.getBoundingClientRect();
+    const isX = a === "x";
+    return {
+      current: isX ? el.scrollLeft : el.scrollTop,
+      viewport: isX ? el.clientWidth : el.clientHeight,
+      total: isX ? el.scrollWidth : el.scrollHeight,
+      hover: {
+        x: rect.left + rect.width / 2,
+        y: rect.top + rect.height / 2
+      }
+    };
+  }, axis).catch(() => null);
+}
+async function resolveTarget(target, ctx, geom, container, axis, block = "start") {
+  if (target === void 0 || target === "natural") return geom.current + geom.viewport;
+  if (target === "end") return geom.total;
+  if (target === "top") return 0;
+  if (typeof target === "object" && "by" in target) return geom.current + target.by;
+  if (typeof target === "object" && "to" in target) return target.to;
+  const elementLocator = typeof target === "string" && !RESERVED_TARGETS.has(target) ? ctx.page.locator(target) : typeof target === "string" ? null : target;
+  if (!elementLocator) return geom.current + geom.viewport;
+  return container ? resolveElementWithinContainer(elementLocator, container, geom, axis, block) : resolveElementInWindow(elementLocator, geom, axis, block);
+}
+async function resolveElementInWindow(elementLocator, geom, axis, block) {
+  const rect = await elementLocator.boundingBox().catch(() => null);
+  if (!rect) return geom.current;
+  const relStart = axis === "x" ? rect.x : rect.y;
+  const length = axis === "x" ? rect.width : rect.height;
+  const absoluteStart = geom.current + relStart;
+  const absoluteEnd = absoluteStart + length;
+  if (block === "start") return absoluteStart;
+  if (block === "end") return absoluteEnd - geom.viewport;
+  if (block === "nearest") {
+    if (relStart >= 0 && relStart + length <= geom.viewport) return geom.current;
+    if (relStart < 0) return absoluteStart;
+    return absoluteEnd - geom.viewport;
+  }
+  return absoluteStart - (geom.viewport - length) / 2;
+}
+async function resolveElementWithinContainer(elementLocator, container, geom, axis, block) {
+  const rects = await container.evaluate(
+    (containerEl, args) => {
+      const elementEl = args.sel ? document.querySelector(args.sel) : null;
+      const targetEl = elementEl ?? containerEl.querySelector(":scope > *");
+      if (!targetEl) return null;
+      const cRect = containerEl.getBoundingClientRect();
+      const eRect = targetEl.getBoundingClientRect();
+      return args.axis === "x" ? { relStart: eRect.left - cRect.left, length: eRect.width } : { relStart: eRect.top - cRect.top, length: eRect.height };
+    },
+    { sel: await locatorSelector(elementLocator), axis }
+  ).catch(() => null);
+  if (!rects) return geom.current;
+  const offsetStart = rects.relStart + geom.current;
+  const offsetEnd = offsetStart + rects.length;
+  if (block === "start") return offsetStart;
+  if (block === "end") return offsetEnd - geom.viewport;
+  if (block === "nearest") {
+    if (rects.relStart >= 0 && rects.relStart + rects.length <= geom.viewport) {
+      return geom.current;
+    }
+    if (rects.relStart < 0) return offsetStart;
+    return offsetEnd - geom.viewport;
+  }
+  return offsetStart - (geom.viewport - rects.length) / 2;
+}
+async function locatorSelector(locator) {
+  const s = locator.toString?.();
+  if (typeof s !== "string") return null;
+  const match = /locator\(['"](.+?)['"]/.exec(s);
+  if (!match) return null;
+  const raw = match[1] ?? "";
+  const eq = raw.indexOf("=");
+  return eq > 0 && /^[a-z]+$/.test(raw.slice(0, eq)) ? raw.slice(eq + 1) : raw;
+}
+async function walkSegments(page, segments, axis, container) {
+  for (const segment of segments) {
+    if (segment.delayBeforeMs > 0) await sleep(segment.delayBeforeMs);
+    if (segment.delta === 0) continue;
+    if (container) {
+      await container.evaluate(
+        (el, args) => {
+          const a = args;
+          if (a.axis === "x") el.scrollLeft += a.delta;
+          else el.scrollTop += a.delta;
+        },
+        { axis, delta: segment.delta }
+      );
+    } else if (axis === "x") {
+      await page.mouse.wheel(segment.delta, 0);
+    } else {
+      await page.mouse.wheel(0, segment.delta);
+    }
+  }
+}
+function clamp2(value, min, max) {
+  return value < min ? min : value > max ? max : value;
+}
+
+// src/mouse-helper/index.ts
+var CURSOR_PATH = "M 0 0 L 16 6 L 8 9.5 L 5 19 Z";
+var INSTALLED_FLAG = /* @__PURE__ */ Symbol.for("@humanjs/playwright:mouse-helper:installed");
+async function installMouseHelper(target, options = {}) {
+  const tagged = target;
+  if (tagged[INSTALLED_FLAG]) return;
+  tagged[INSTALLED_FLAG] = true;
+  const config = {
+    color: options.color ?? "#f5a55c",
+    stroke: "#020203",
+    size: options.size ?? 22,
+    showClicks: options.showClicks ?? true,
+    haloOpacity: options.haloOpacity ?? 0.18,
+    path: CURSOR_PATH
+  };
+  await target.addInitScript(installScript, config);
+  const attachPageHooks = (page) => {
+    page.on("domcontentloaded", () => {
+      page.evaluate(installScript, config).catch(() => void 0);
+    });
+  };
+  const pages = "pages" in target ? target.pages() : [target];
+  for (const page of pages) attachPageHooks(page);
+  if ("on" in target && "newPage" in target) {
+    target.on("page", attachPageHooks);
+  }
+  await Promise.all(
+    pages.map((page) => page.evaluate(installScript, config).catch(() => void 0))
+  );
+}
+function installScript(config) {
+  if (document.querySelector("[data-humanjs-cursor]")) return;
+  const attach = () => {
+    const cursor = document.createElement("div");
+    cursor.setAttribute("aria-hidden", "true");
+    cursor.setAttribute("data-humanjs-cursor", "true");
+    cursor.style.cssText = [
+      "position: fixed",
+      "left: 0",
+      "top: 0",
+      `width: ${config.size}px`,
+      `height: ${config.size + 4}px`,
+      "pointer-events: none",
+      "z-index: 2147483647",
+      // Start visible at (0, 0) so the cursor is on screen from the moment
+      // the page loads — without this the helper looks like nothing happened
+      // until the first mousemove arrives.
+      "opacity: 1",
+      "transform: translate(0px, 0px)",
+      // CSS interpolates between successive `mousemove` updates so the
+      // cursor reads as continuous motion instead of discrete hops. Slightly
+      // longer than the path-walker's typical step interval (~30–80ms) so
+      // each tween is still settling when the next move lands → no pauses.
+      "transition: transform 110ms ease-out, opacity 0.18s ease-out",
+      "will-change: transform"
+    ].join("; ");
+    const haloRadius = Math.round(config.size * 0.6);
+    cursor.innerHTML = `
+      <svg width="${config.size}" height="${config.size + 4}" viewBox="0 0 22 24" style="overflow: visible;">
+        <circle cx="0" cy="0" r="${haloRadius}" fill="${config.color}" opacity="${config.haloOpacity}" />
+        <path d="${config.path}" fill="${config.color}" stroke="${config.stroke}" stroke-width="0.7" stroke-linejoin="round" />
+      </svg>
+    `;
+    document.body.appendChild(cursor);
+    let lastX = 0;
+    let lastY = 0;
+    const onMove = (e) => {
+      lastX = e.clientX;
+      lastY = e.clientY;
+      cursor.style.transform = `translate(${lastX}px, ${lastY}px)`;
+      cursor.style.opacity = "1";
+    };
+    window.addEventListener("mousemove", onMove, { capture: true, passive: true });
+    document.addEventListener("mousemove", onMove, { capture: true, passive: true });
+    document.addEventListener(
+      "mouseleave",
+      () => {
+        cursor.style.opacity = "0";
+      },
+      { capture: true, passive: true }
+    );
+    if (config.showClicks) {
+      const styleEl = document.createElement("style");
+      styleEl.textContent = "@keyframes humanjs-ripple { 0% { transform: translate(-50%, -50%) scale(0.4); opacity: 0.9; } 100% { transform: translate(-50%, -50%) scale(2); opacity: 0; } }";
+      document.head.appendChild(styleEl);
+      window.addEventListener(
+        "mousedown",
+        () => {
+          const ripple = document.createElement("div");
+          ripple.style.cssText = [
+            "position: fixed",
+            `left: ${lastX}px`,
+            `top: ${lastY}px`,
+            "width: 28px",
+            "height: 28px",
+            "border-radius: 50%",
+            `border: 1.5px solid ${config.color}`,
+            "pointer-events: none",
+            "z-index: 2147483646",
+            "animation: humanjs-ripple 0.45s ease-out forwards"
+          ].join("; ");
+          document.body.appendChild(ripple);
+          window.setTimeout(() => ripple.remove(), 500);
+        },
+        { capture: true, passive: true }
+      );
+    }
+  };
+  if (document.body) attach();
+  else document.addEventListener("DOMContentLoaded", attach, { once: true });
+}
+
+// src/index.ts
 async function createHuman(page, options = {}) {
   const personality = resolvePersonality(options.personality ?? "careful");
   const rng = createRng(options.seed);
@@ -112,6 +925,9 @@ async function createHuman(page, options = {}) {
   for (const plugin of plugins) {
     await plugin.install?.(context);
   }
+  let hasRecorded = false;
+  let activeRecordingEvents = null;
+  let activeRecordingStartMs = 0;
   async function performAction(action, actionFn) {
     for (const plugin of plugins) {
       await plugin.beforeAction?.(action);
@@ -119,15 +935,30 @@ async function createHuman(page, options = {}) {
     const startedAt = Date.now();
     try {
       const value = await actionFn();
-      const result = {
-        type: action.type,
-        durationMs: Date.now() - startedAt
-      };
+      const durationMs = Date.now() - startedAt;
+      const result = { type: action.type, durationMs };
+      if (activeRecordingEvents !== null && action.type !== "record") {
+        activeRecordingEvents.push({
+          type: action.type,
+          params: action.params ?? {},
+          tMs: startedAt - activeRecordingStartMs,
+          durationMs
+        });
+      }
       for (const plugin of plugins) {
         await plugin.afterAction?.(action, result);
       }
       return value;
     } catch (error) {
+      if (activeRecordingEvents !== null && action.type !== "record") {
+        activeRecordingEvents.push({
+          type: action.type,
+          params: action.params ?? {},
+          tMs: startedAt - activeRecordingStartMs,
+          durationMs: Date.now() - startedAt,
+          error: error instanceof Error ? error.message : String(error)
+        });
+      }
       for (const plugin of plugins) {
         await plugin.onError?.(action, error);
       }
@@ -157,10 +988,118 @@ async function createHuman(page, options = {}) {
           }
         });
       });
+    },
+    async type(target, value) {
+      const description = typeof target === "string" ? target : target.toString?.() ?? "locator";
+      await performAction(
+        { type: "type", params: { target: description, length: value.length } },
+        async () => {
+          await executeType(target, value, { page, personality, rng, speed });
+        }
+      );
+    },
+    async read(target, options2) {
+      const description = describeReadTarget(target);
+      return performAction(
+        {
+          type: "read",
+          params: {
+            target: description,
+            kind: options2?.kind
+          }
+        },
+        () => executeRead(
+          target,
+          {
+            page,
+            personality,
+            rng,
+            speed,
+            // Read shares the session's tracked cursor position so an eye
+            // scan starts from where the last click left off, and the next
+            // click starts from where the scan ended.
+            getMousePosition: () => lastMousePosition,
+            setMousePosition: (point) => {
+              lastMousePosition = point;
+            }
+          },
+          options2
+        )
+      );
+    },
+    async scroll(target, options2) {
+      const description = describeScrollTarget(target);
+      return performAction(
+        {
+          type: "scroll",
+          params: { target: description }
+        },
+        () => executeScroll(target, { page, personality, rng, speed }, options2)
+      );
+    },
+    async sleep(ms) {
+      await performAction({ type: "sleep", params: { ms } }, () => sleep$1(ms));
+    },
+    async record(optionsOrFn, maybeFn) {
+      const [recordOptions, fn] = typeof optionsOrFn === "function" ? [{}, optionsOrFn] : [optionsOrFn, maybeFn];
+      if (hasRecorded) {
+        throw new Error(
+          "human.record() can only be called once per session. Create a new browser context (and a new human session) to record a separate clip."
+        );
+      }
+      hasRecorded = true;
+      const captureEnabled = recordOptions.video !== false;
+      const captureQuality = recordOptions.quality ?? "high";
+      let captureSession = null;
+      if (captureEnabled) {
+        const { format, quality, fps } = getCaptureSettingsForQuality(captureQuality);
+        captureSession = await startCapture(page, { format, quality, fps });
+      }
+      const events = [];
+      const windowStartMs = Date.now();
+      activeRecordingEvents = events;
+      activeRecordingStartMs = windowStartMs;
+      let windowEndMs = windowStartMs;
+      try {
+        await performAction({ type: "record", params: {} }, async () => {
+          try {
+            await fn();
+          } finally {
+            windowEndMs = Date.now();
+          }
+        });
+      } catch (error) {
+        if (captureSession) await captureSession.abort();
+        throw error;
+      } finally {
+        activeRecordingEvents = null;
+      }
+      const captureResult = captureSession ? await captureSession.stop() : null;
+      return new Recording(captureResult, windowStartMs, windowEndMs, {
+        personality: personality.name,
+        seed: options.seed === void 0 ? null : String(options.seed),
+        speed,
+        events
+      });
     }
   };
 }
+function describeScrollTarget(target) {
+  if (target === void 0) return "natural";
+  if (typeof target === "string") return target;
+  if ("by" in target) return `by:${target.by}`;
+  if ("to" in target) return `to:${target.to}`;
+  return target.toString?.() ?? "locator";
+}
+function describeReadTarget(target) {
+  if (typeof target === "string") return target;
+  if ("words" in target && typeof target.words === "number") return `${target.words} words`;
+  if ("text" in target && typeof target.text === "string") {
+    return `text:${target.text.length} chars`;
+  }
+  return target.toString?.() ?? "locator";
+}
 
-export { createHuman };
+export { Recording, createHuman, installMouseHelper };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map