@codefilm/recorder 3.0.0

package/dist/core/FilmRecorder.js

@@ -0,0 +1,1504 @@
+import { createCameraRecordingOverlay as I, createCustomRecordingOverlay as D } from "./recording-overlays.js";
+const O = [
+  { label: "YouTube HD (16:9)", w: 1920, h: 1080 },
+  { label: "Twitter / X (16:9)", w: 1200, h: 675 },
+  { label: "Instagram Post (4:5)", w: 1080, h: 1350 },
+  { label: "Instagram Reel / Story (9:16)", w: 1080, h: 1920 },
+  { label: "TikTok (9:16)", w: 1080, h: 1920 }
+], g = 24, F = 6, z = 1e3, B = 12, H = 0.08, $ = 0.015, N = 3e3, G = 500, x = 56, K = 2, j = "j", U = 12e4, _ = 3e3, W = Object.freeze({
+  cps: 24,
+  jitter: 0.22,
+  punctuationPauseMs: 120,
+  mistakeRate: 0.012
+}), V = Object.freeze({
+  cps: 24,
+  jitter: 0.22,
+  punctuationPauseMs: 120,
+  mistakeRate: 0.012
+});
+class Q {
+  options;
+  listeners = /* @__PURE__ */ new Set();
+  state;
+  videoEl;
+  canvasEl;
+  recorder = null;
+  stream = null;
+  chunks = [];
+  lastRecording = null;
+  lastRecordingError = null;
+  recordingStartedAt = 0;
+  timelineMetadata = null;
+  activeFilmTitle = null;
+  destroyed = !1;
+  cameraRafId = 0;
+  renderRafId = 0;
+  targetRect;
+  liveRect;
+  mousePosGlobal = { x: 0, y: 0 };
+  holdTimer = null;
+  zoomOutTimer = null;
+  scrollPausedUntil = 0;
+  anchorX = 0;
+  anchorY = 0;
+  pointerEl = null;
+  pointerX = 0;
+  pointerY = 0;
+  tourRafId = 0;
+  tourAbortController = null;
+  activeFilmScriptContext = null;
+  activeFilmScriptOptions = null;
+  activeExecutionPromise = null;
+  finalizationPromise = null;
+  pendingActionGates = [];
+  activeTypingRandom = Math.random;
+  ignoredElements = /* @__PURE__ */ new Map();
+  overlays = /* @__PURE__ */ new Map();
+  constructor(e = {}) {
+    const t = {
+      fps: e.fps ?? 60,
+      resolutions: e.resolutions ?? O,
+      defaultResolutionIndex: e.defaultResolutionIndex ?? 0,
+      autoZoom: e.autoZoom ?? !0,
+      pauseDuringScroll: e.pauseDuringScroll ?? !0,
+      showGrid: e.showGrid ?? !0,
+      showOutline: e.showOutline ?? !1,
+      enableShortcuts: e.enableShortcuts ?? !0,
+      elementSelector: e.elementSelector ?? null,
+      elementPadding: e.elementPadding ?? 1.1,
+      fixedRecordingRegion: e.fixedRecordingRegion ?? null,
+      movePointerToSelector: e.movePointerToSelector ?? null,
+      pointerClassName: e.pointerClassName ?? "",
+      pointerFillColor: e.pointerFillColor ?? "#ffffff",
+      pointerBorderColor: e.pointerBorderColor ?? "#18181b",
+      pointerRippleColor: e.pointerRippleColor ?? "#64748b",
+      disableRipple: e.disableRipple ?? !1,
+      ignoreSelector: e.ignoreSelector ?? null,
+      overlays: e.overlays ?? [],
+      autoDownload: e.autoDownload ?? !0,
+      includeTimelineMetadata: e.includeTimelineMetadata ?? !1,
+      selectorTimeoutMs: e.selectorTimeoutMs ?? _,
+      typingDefaults: this.resolveTypingOptions(e.typingDefaults),
+      typingSeed: e.typingSeed ?? "",
+      onRecordingStart: e.onRecordingStart ?? (() => {
+      }),
+      onRecordingStop: e.onRecordingStop ?? (() => {
+      }),
+      onRecordingError: e.onRecordingError ?? (() => {
+      }),
+      onTourStart: e.onTourStart ?? (() => {
+      }),
+      onTourStop: e.onTourStop ?? (() => {
+      }),
+      onReadyToEnd: e.onReadyToEnd ?? (() => {
+      }),
+      onTourError: e.onTourError ?? (() => {
+      }),
+      onSceneStart: e.onSceneStart ?? (() => {
+      }),
+      onSceneEnd: e.onSceneEnd ?? (() => {
+      }),
+      onActionStart: e.onActionStart ?? (() => {
+      }),
+      onActionEnd: e.onActionEnd ?? (() => {
+      })
+    };
+    this.options = t;
+    const i = this.options.resolutions[this.options.defaultResolutionIndex] || O[0], o = {
+      w: typeof window < "u" ? window.innerWidth : 1280,
+      h: typeof window < "u" ? window.innerHeight : 720
+    }, n = this.computeGrid(o.w, o.h);
+    let r;
+    if (this.options.elementSelector) {
+      const s = this.calculateElementRect(
+        this.options.elementSelector,
+        this.options.elementPadding,
+        i.w / i.h
+      );
+      if (s)
+        r = s;
+      else {
+        const a = this.getRecordingRegionBox(
+          i.w / i.h,
+          g,
+          n.rows,
+          g
+        ), c = Math.floor((g - a.w) / 2), h = Math.floor((n.rows - a.h) / 2);
+        r = { col: c, row: h, w: a.w, h: a.h };
+      }
+    } else {
+      const s = this.getRecordingRegionBox(
+        i.w / i.h,
+        g,
+        n.rows,
+        g
+      ), a = Math.floor((g - s.w) / 2), c = Math.floor((n.rows - s.h) / 2);
+      r = { col: a, row: c, w: s.w, h: s.h };
+    }
+    this.targetRect = {
+      col: r.col,
+      row: r.row,
+      w: r.w,
+      h: r.h
+    }, this.liveRect = { ...this.targetRect }, this.state = {
+      recording: !1,
+      showGrid: this.options.showGrid,
+      autoZoom: this.options.autoZoom,
+      pauseDuringScroll: this.options.pauseDuringScroll,
+      resolution: i,
+      mousePaused: !1,
+      viewport: o,
+      displayRect: { ...this.liveRect },
+      showOutline: this.options.showOutline,
+      elementSelector: this.options.elementSelector,
+      elementPadding: this.options.elementPadding,
+      fixedRecordingRegion: this.options.fixedRecordingRegion,
+      movePointerToSelector: this.options.movePointerToSelector,
+      pointerClassName: this.options.pointerClassName,
+      pointerFillColor: this.options.pointerFillColor,
+      pointerBorderColor: this.options.pointerBorderColor,
+      pointerRippleColor: this.options.pointerRippleColor,
+      disableRipple: this.options.disableRipple,
+      ignoreSelector: this.options.ignoreSelector,
+      tourState: "idle",
+      executionState: "idle",
+      currentScene: null
+    }, typeof window < "u" ? (this.videoEl = document.createElement("video"), this.videoEl.muted = !0, this.videoEl.playsInline = !0, this.videoEl.style.display = "none", document.body.appendChild(this.videoEl), this.canvasEl = document.createElement("canvas"), this.canvasEl.style.display = "none", document.body.appendChild(this.canvasEl), this.setupEventListeners(), this.startCameraLoop(), this.options.overlays.forEach((s) => {
+      s.type === "camera" && this.createCameraOverlay(s);
+    })) : (this.videoEl = {}, this.canvasEl = {});
+  }
+  // Grid and Aspect Helper Methods
+  computeGrid(e, t) {
+    const i = e / g, o = i * 9 / 16, n = Math.max(0, t - x), r = Math.max(1, Math.floor(n / o));
+    return { cellW: i, cellH: o, rows: r };
+  }
+  getAspectBox(e, t, i, o) {
+    let n = 1, r = 1, s = 1 / 0;
+    const a = Math.min(t, o);
+    for (let c = 1; c <= a; c++) {
+      const h = c * 16 / (9 * e), d = [Math.floor(h), Math.ceil(h)].filter((p) => p >= 1 && p <= i);
+      for (const p of d) {
+        const u = c / p * 1.7777777777777777, m = Math.abs(u - e);
+        (m < s - 1e-6 || Math.abs(m - s) < 1e-6 && c > n) && (s = m, n = c, r = p);
+      }
+    }
+    return { w: n, h: r };
+  }
+  getRecordingRegionBox(e, t, i, o) {
+    return this.options.fixedRecordingRegion === "smallest-16:9" ? this.getAspectBox(16 / 9, t, i, F) : this.getAspectBox(e, t, i, o);
+  }
+  clampRect(e, t) {
+    const i = Math.min(g, Math.max(1, e.w)), o = Math.min(t, Math.max(1, e.h)), n = Math.min(g - i, Math.max(0, e.col)), r = Math.min(t - o, Math.max(0, e.row));
+    return { col: n, row: r, w: i, h: o };
+  }
+  centeredRectOnPoint(e, t, i, o, n) {
+    const { cellW: r, cellH: s, rows: a } = this.computeGrid(i, o), c = Math.max(0, t - x), h = Math.min(g - 1, Math.max(0, Math.floor(e / r))), d = Math.min(a - 1, Math.max(0, Math.floor(c / s))), { w: p, h: u } = this.getRecordingRegionBox(n, g, a, F);
+    return this.clampRect(
+      {
+        col: Math.round(h - p / 2 + 0.5),
+        row: Math.round(d - u / 2 + 0.5),
+        w: p,
+        h: u
+      },
+      a
+    );
+  }
+  // Event Handlers
+  setupEventListeners() {
+    window.addEventListener("resize", this.handleResize), window.addEventListener("mousemove", this.handleMouseMove), window.addEventListener("wheel", this.handleScrollOrWheel, { passive: !0 }), window.addEventListener("scroll", this.handleScrollOrWheel, { passive: !0 }), this.options.enableShortcuts && window.addEventListener("keydown", this.handleKeyDown);
+  }
+  cleanupEventListeners() {
+    window.removeEventListener("resize", this.handleResize), window.removeEventListener("mousemove", this.handleMouseMove), window.removeEventListener("wheel", this.handleScrollOrWheel), window.removeEventListener("scroll", this.handleScrollOrWheel), window.removeEventListener("keydown", this.handleKeyDown);
+  }
+  handleResize = () => {
+    const e = window.innerWidth, t = window.innerHeight;
+    if (this.updateState({ viewport: { w: e, h: t } }), this.options.elementSelector) return;
+    const i = this.computeGrid(e, t), o = this.state.resolution.w / this.state.resolution.h, { w: n, h: r } = this.getRecordingRegionBox(o, g, i.rows, g), s = Math.floor((g - n) / 2), a = Math.floor((i.rows - r) / 2);
+    this.targetRect = { col: s, row: a, w: n, h: r };
+  };
+  handleMouseMove = (e) => {
+    this.state.mousePaused || this.options.elementSelector || (this.mousePosGlobal = { x: e.clientX, y: e.clientY }, Math.hypot(e.clientX - this.anchorX, e.clientY - this.anchorY) > B && (this.armHold(e.clientX, e.clientY), this.zoomOutTimer && (clearTimeout(this.zoomOutTimer), this.zoomOutTimer = null)));
+  };
+  handleScrollOrWheel = () => {
+    this.options.elementSelector || (this.scrollPausedUntil = performance.now() + G, this.holdTimer && clearTimeout(this.holdTimer));
+  };
+  handleKeyDown = (e) => {
+    if (!(e.metaKey || e.ctrlKey)) return;
+    const i = e.key.toLowerCase();
+    i === j ? (e.preventDefault(), this.state.recording ? this.stopRecording() : this.startRecording()) : i === "l" ? (e.preventDefault(), this.setMousePaused(!this.state.mousePaused)) : e.key === "ArrowUp" ? (e.preventDefault(), this.options.elementSelector ? this.setElementSelector(null) : this.zoomTop()) : e.key === "ArrowDown" && (e.preventDefault(), this.options.elementSelector || this.zoomBottom());
+  };
+  armHold(e, t) {
+    this.holdTimer && clearTimeout(this.holdTimer), this.anchorX = e, this.anchorY = t, this.holdTimer = setTimeout(() => {
+      this.state.autoZoom && (this.state.pauseDuringScroll && performance.now() < this.scrollPausedUntil || (this.zoomToMouse(), this.scheduleIdleZoomOut()));
+    }, z);
+  }
+  scheduleIdleZoomOut() {
+    this.zoomOutTimer && clearTimeout(this.zoomOutTimer), this.zoomOutTimer = setTimeout(() => {
+      this.zoomOutTimer = null, !(!this.state.autoZoom || this.options.elementSelector) && (this.state.pauseDuringScroll && performance.now() < this.scrollPausedUntil || this.resetFullScreen());
+    }, N);
+  }
+  calculateElementRect(e, t = 1.1, i) {
+    if (typeof document > "u") return null;
+    const o = document.querySelector(e);
+    if (!o) return null;
+    const n = o.getBoundingClientRect(), r = window.innerWidth, s = window.innerHeight, a = this.computeGrid(r, s), c = n.left + n.width / 2, h = n.top + n.height / 2, d = c / a.cellW, p = (h - x) / a.cellH, u = n.width / a.cellW, m = n.height / a.cellH, l = i ?? this.state.resolution.w / this.state.resolution.h, f = a.cellH / a.cellW, v = l * f;
+    if (this.options.fixedRecordingRegion) {
+      const { w: C, h: R } = this.getRecordingRegionBox(l, g, a.rows, F);
+      return this.clampRect(
+        {
+          col: d - C / 2,
+          row: p - R / 2,
+          w: C,
+          h: R
+        },
+        a.rows
+      );
+    }
+    const w = u * t, y = m * t;
+    let E = Math.max(w, y * v), b = E / v;
+    const A = d - E / 2, P = p - b / 2;
+    return this.clampRect({ col: A, row: P, w: E, h: b }, a.rows);
+  }
+  // Camera Zoom Loop
+  startCameraLoop() {
+    const e = () => {
+      if (this.options.elementSelector) {
+        const r = this.calculateElementRect(
+          this.options.elementSelector,
+          this.options.elementPadding
+        );
+        r && (this.targetRect = r);
+      }
+      const t = this.targetRect, i = this.liveRect, n = t.w > i.w ? $ : H;
+      this.liveRect = {
+        col: i.col + (t.col - i.col) * n,
+        row: i.row + (t.row - i.row) * n,
+        w: i.w + (t.w - i.w) * n,
+        h: i.h + (t.h - i.h) * n
+      }, this.updateState({ displayRect: { ...this.liveRect } }), this.cameraRafId = requestAnimationFrame(e);
+    };
+    this.cameraRafId = requestAnimationFrame(e);
+  }
+  // Public Actions
+  zoomToMouse() {
+    const e = this.state.resolution.w / this.state.resolution.h;
+    this.targetRect = this.centeredRectOnPoint(
+      this.mousePosGlobal.x,
+      this.mousePosGlobal.y,
+      window.innerWidth,
+      window.innerHeight,
+      e
+    );
+  }
+  getFullFrameRect(e) {
+    const t = this.state.resolution.w / this.state.resolution.h, i = this.computeGrid(window.innerWidth, window.innerHeight), { w: o, h: n } = this.getRecordingRegionBox(t, g, i.rows, g), r = e === "top" ? 0 : e === "bottom" ? i.rows - n : Math.floor((i.rows - n) / 2);
+    return {
+      col: Math.floor((g - o) / 2),
+      row: r,
+      w: o,
+      h: n
+    };
+  }
+  setFullFrameRect(e, t = !1) {
+    const i = this.getFullFrameRect(e);
+    this.targetRect = i, t && (this.liveRect = { ...i }, this.updateState({ displayRect: { ...i } }));
+  }
+  zoomTop(e = !1) {
+    this.setFullFrameRect("top", e);
+  }
+  zoomCenter(e = !1) {
+    this.setFullFrameRect("center", e);
+  }
+  zoomBottom(e = !1) {
+    this.setFullFrameRect("bottom", e);
+  }
+  zoomBottomFold() {
+    this.zoomBottom();
+  }
+  zoomTopFold(e = !1) {
+    this.zoomTop(e);
+  }
+  resetFullScreen() {
+    this.zoomCenter();
+  }
+  zoomTopFullFrame(e = !1) {
+    this.zoomTop(e);
+  }
+  // Recording API
+  getRecordingElapsedMs() {
+    return this.recordingStartedAt ? Math.max(0, Math.round(performance.now() - this.recordingStartedAt)) : 0;
+  }
+  beginTimelineMetadata() {
+    if (!this.options.includeTimelineMetadata) {
+      this.timelineMetadata = null;
+      return;
+    }
+    this.timelineMetadata = {
+      schema: "code-film.timeline.v1",
+      title: this.activeFilmTitle,
+      fps: this.options.fps,
+      width: this.state.resolution.w,
+      height: this.state.resolution.h,
+      scenes: [],
+      actions: [],
+      markers: []
+    }, this.recordTimelineMarker("recording:start");
+  }
+  finishTimelineMetadata() {
+    if (this.timelineMetadata)
+      return this.recordTimelineMarker("recording:stop"), {
+        ...this.timelineMetadata,
+        scenes: this.timelineMetadata.scenes.map((e) => ({ ...e })),
+        actions: this.timelineMetadata.actions.map((e) => ({ ...e })),
+        markers: this.timelineMetadata.markers.map((e) => ({ ...e }))
+      };
+  }
+  recordTimelineMarker(e, t = {}) {
+    this.timelineMetadata && this.timelineMetadata.markers.push({
+      timeMs: this.getRecordingElapsedMs(),
+      name: e,
+      ...t
+    });
+  }
+  recordOverlayEvent(e) {
+    this.recordTimelineMarker(`overlay:${e.type}`, {
+      data: {
+        id: e.id,
+        ...e.data
+      }
+    });
+  }
+  renderRecordingOverlays(e) {
+    this.overlays.forEach((t) => {
+      t.includeInCapture && t.draw(e, this.state.resolution.w, this.state.resolution.h);
+    });
+  }
+  createCameraOverlay(e) {
+    if (typeof document > "u")
+      throw new Error("[FilmRecorder] createCameraOverlay requires a browser document.");
+    const t = I(e, (i) => {
+      this.recordOverlayEvent(i);
+    });
+    return this.overlays.set(t.id, t), t;
+  }
+  registerOverlay(e) {
+    if (typeof document > "u")
+      throw new Error("[FilmRecorder] registerOverlay requires a browser document.");
+    const t = D(e, (i) => {
+      this.recordOverlayEvent(i);
+    });
+    return this.overlays.set(t.id, t), t;
+  }
+  getOverlay(e) {
+    return this.overlays.get(e) ?? null;
+  }
+  removeOverlay(e) {
+    const t = this.overlays.get(e);
+    t && (t.destroy(), this.overlays.delete(e));
+  }
+  setOverlays(e) {
+    this.overlays.forEach((t) => t.destroy()), this.overlays.clear(), e.forEach((t) => {
+      t.type === "camera" && this.createCameraOverlay(t);
+    });
+  }
+  startTimelineScene(e, t) {
+    if (!this.timelineMetadata) return null;
+    const i = {
+      id: `scene-${t + 1}`,
+      name: e.name,
+      declaredStartMs: Math.round(e.startTime * 1e3),
+      declaredEndMs: Math.round(e.endTime * 1e3),
+      actualStartMs: this.getRecordingElapsedMs(),
+      actualEndMs: null
+    };
+    return this.timelineMetadata.scenes.push(i), this.recordTimelineMarker("scene:start", {
+      data: { label: e.name },
+      scene: e.name
+    }), i;
+  }
+  endTimelineScene(e) {
+    e && (e.actualEndMs = this.getRecordingElapsedMs(), this.recordTimelineMarker("scene:end", {
+      data: { label: e.name },
+      scene: e.name
+    }));
+  }
+  startTimelineAction(e, t, i) {
+    if (!this.timelineMetadata || !e) return null;
+    const o = {
+      type: t.type,
+      startMs: this.getRecordingElapsedMs(),
+      endMs: null,
+      commandIndex: i,
+      scene: e.name,
+      selector: t.selector,
+      to: t.to,
+      padding: t.padding,
+      text: t.text,
+      durationMs: t.durationMs
+    };
+    return this.timelineMetadata.actions.push(o), this.recordTimelineMarker(`command:${t.type}:start`, {
+      data: { label: t.selector ?? t.to ?? t.text ?? t.type },
+      scene: e.name,
+      commandIndex: i
+    }), o;
+  }
+  endTimelineAction(e, t) {
+    !e || !t || (t.endMs = this.getRecordingElapsedMs(), this.recordTimelineMarker(`command:${t.type}:end`, {
+      data: { label: t.selector ?? t.to ?? t.text ?? t.type },
+      scene: e.name,
+      commandIndex: t.commandIndex
+    }));
+  }
+  getLastRecording() {
+    return this.lastRecording;
+  }
+  clearLastRecording() {
+    this.lastRecording && (URL.revokeObjectURL(this.lastRecording.url), this.lastRecording = null);
+  }
+  getLastRecordingError() {
+    return this.lastRecordingError;
+  }
+  normalizeRecordingError(e) {
+    return e instanceof Error ? e : new Error(typeof e == "string" ? e : "Unknown recording error");
+  }
+  handleRecordingError(e) {
+    const t = this.normalizeRecordingError(e);
+    return this.lastRecordingError = t, this.updateState({ showGrid: this.options.showGrid }), this.options.onRecordingError?.(t), t;
+  }
+  async requestCaptureStream() {
+    return navigator.mediaDevices.getDisplayMedia({
+      video: { frameRate: this.options.fps, width: { ideal: 3840 }, height: { ideal: 2160 } },
+      audio: !0,
+      // @ts-ignore
+      preferCurrentTab: !0
+    });
+  }
+  async attachCaptureStream(e) {
+    this.stream = e, this.videoEl.srcObject = e, await this.videoEl.play(), await this.waitForCaptureVideoFrame();
+  }
+  async waitForCaptureVideoFrame(e = 3e3) {
+    this.videoEl.videoWidth > 0 && this.videoEl.videoHeight > 0 || await new Promise((t, i) => {
+      let o = 0;
+      const n = window.setTimeout(() => {
+        r(), i(new Error("Screen capture started, but no video frame was available."));
+      }, e), r = () => {
+        window.clearTimeout(n), o && cancelAnimationFrame(o), this.videoEl.removeEventListener("loadedmetadata", s), this.videoEl.removeEventListener("canplay", s);
+      }, s = () => {
+        if (this.videoEl.videoWidth > 0 && this.videoEl.videoHeight > 0) {
+          r(), t();
+          return;
+        }
+        o = requestAnimationFrame(s);
+      };
+      this.videoEl.addEventListener("loadedmetadata", s), this.videoEl.addEventListener("canplay", s), s();
+    });
+  }
+  stopCaptureStream() {
+    this.stream?.getTracks().forEach((e) => e.stop()), this.stream = null, this.videoEl.srcObject = null;
+  }
+  hideIgnoredElements() {
+    this.restoreIgnoredElements(), !(!this.options.ignoreSelector || typeof document > "u") && document.querySelectorAll(this.options.ignoreSelector).forEach((e) => {
+      e instanceof HTMLElement && (e.closest(".cfr-settings-bar, .cfr-recording-overlay") || (this.ignoredElements.set(e, {
+        visibility: e.style.getPropertyValue("visibility"),
+        priority: e.style.getPropertyPriority("visibility")
+      }), e.style.setProperty("visibility", "hidden", "important")));
+    });
+  }
+  restoreIgnoredElements() {
+    this.ignoredElements.forEach((e, t) => {
+      t.style.setProperty("visibility", e.visibility, e.priority);
+    }), this.ignoredElements.clear();
+  }
+  getActiveCaptureStream() {
+    return this.stream && this.stream.getTracks().some((e) => e.readyState === "live") ? this.stream : null;
+  }
+  async prepareCapture() {
+    if (this.getActiveCaptureStream()) return !0;
+    try {
+      const e = await this.requestCaptureStream();
+      return await this.attachCaptureStream(e), this.lastRecordingError = null, !0;
+    } catch (e) {
+      throw this.stopCaptureStream(), this.handleRecordingError(e);
+    }
+  }
+  async startRecording() {
+    if (this.state.recording) return !1;
+    try {
+      const e = this.getActiveCaptureStream();
+      e ? await this.attachCaptureStream(e) : await this.prepareCapture();
+      const t = this.getActiveCaptureStream();
+      if (!t)
+        throw new Error("No active capture stream is available.");
+      this.options.elementSelector && (this.options.elementSelector = null, this.updateState({ elementSelector: null })), this.zoomTopFullFrame(!0), this.resetPointerEntryPosition(), this.hideIgnoredElements(), this.updateState({ showGrid: !1 });
+      const i = this.canvasEl.getContext("2d");
+      i.imageSmoothingEnabled = !0, i.imageSmoothingQuality = "high", this.canvasEl.width = this.state.resolution.w, this.canvasEl.height = this.state.resolution.h;
+      const o = () => {
+        const a = window.innerWidth, c = window.innerHeight, h = this.computeGrid(a, c), d = this.liveRect, p = this.videoEl.videoWidth / a, u = this.videoEl.videoHeight / c;
+        i.drawImage(
+          this.videoEl,
+          d.col * h.cellW * p,
+          (x + d.row * h.cellH) * u,
+          d.w * h.cellW * p,
+          d.h * h.cellH * u,
+          0,
+          0,
+          this.state.resolution.w,
+          this.state.resolution.h
+        ), this.renderRecordingOverlays(i), this.renderRafId = requestAnimationFrame(o);
+      };
+      o();
+      const n = this.canvasEl.captureStream(this.options.fps);
+      t.getAudioTracks().forEach((a) => n.addTrack(a));
+      const r = [
+        "video/webm;codecs=vp9",
+        "video/webm;codecs=vp8",
+        "video/webm",
+        "video/mp4"
+      ].find((a) => MediaRecorder.isTypeSupported(a)), s = new MediaRecorder(n, {
+        ...r && { mimeType: r },
+        videoBitsPerSecond: 1e7
+      });
+      return this.chunks = [], this.recordingStartedAt = performance.now(), this.beginTimelineMetadata(), s.ondataavailable = (a) => {
+        a.data.size && this.chunks.push(a.data);
+      }, s.onstop = () => {
+        const a = performance.now(), c = new Blob(this.chunks, { type: s.mimeType }), h = URL.createObjectURL(c), d = s.mimeType.includes("mp4") ? "capture.mp4" : "capture.webm", p = Math.max(0, Math.round(a - this.recordingStartedAt)), u = {
+          blob: c,
+          url: h,
+          mimeType: s.mimeType,
+          filename: d,
+          durationMs: p,
+          startedAt: this.recordingStartedAt,
+          stoppedAt: a,
+          timeline: this.finishTimelineMetadata(),
+          webm: s.mimeType.includes("webm") ? {
+            seekable: !1,
+            hasDurationMetadata: !1,
+            durationMs: p,
+            sizeBytes: c.size
+          } : void 0
+        };
+        this.clearLastRecording(), this.lastRecording = u;
+        try {
+          this.options.onRecordingStop?.(u);
+        } finally {
+          if (this.options.autoDownload) {
+            const m = document.createElement("a");
+            m.href = u.url, m.download = u.filename, m.click();
+          }
+          this.destroyed && this.clearLastRecording(), this.timelineMetadata = null, this.recordingStartedAt = 0, this.activeFilmTitle = null;
+        }
+      }, s.start(1e3), this.recorder = s, this.lastRecordingError = null, this.updateState({ recording: !0 }), this.options.onRecordingStart?.(), this.options.movePointerToSelector && setTimeout(() => {
+        this.options.movePointerToSelector && this.state.recording && this.playPointerTour(this.options.movePointerToSelector);
+      }, 500), !0;
+    } catch (e) {
+      throw e === this.lastRecordingError ? e : (cancelAnimationFrame(this.renderRafId), this.renderRafId = 0, this.stopCaptureStream(), this.restoreIgnoredElements(), this.recorder = null, this.handleRecordingError(e));
+    }
+  }
+  stopRecording() {
+    this.state.recording && (cancelAnimationFrame(this.renderRafId), this.recorder?.stop(), this.stopCaptureStream(), this.restoreIgnoredElements(), this.recorder = null, this.pointerEl && (this.pointerEl.style.display = "none", this.pointerEl.classList.remove("cfr-holding")), this.tourRafId && (cancelAnimationFrame(this.tourRafId), this.tourRafId = 0), this.updateState({
+      recording: !1,
+      showGrid: this.options.showGrid
+    }));
+  }
+  captureBitmap() {
+    this.state.recording && this.canvasEl.toBlob((e) => {
+      if (!e) return;
+      const t = document.createElement("a");
+      t.href = URL.createObjectURL(e), t.download = "capture.png", t.click(), setTimeout(() => URL.revokeObjectURL(t.href), 1e3);
+    }, "image/png");
+  }
+  ensurePointerEl() {
+    typeof window > "u" || typeof document > "u" || (this.pointerEl || (this.pointerEl = document.createElement("div"), this.pointerX = window.innerWidth / 2, this.pointerY = window.innerHeight + 40, this.pointerEl.style.left = `${this.pointerX}px`, this.pointerEl.style.top = `${this.pointerY}px`, document.body.appendChild(this.pointerEl)), this.applyPointerClassName(), this.applyPointerColors(), this.pointerEl.style.display = "block");
+  }
+  applyPointerClassName() {
+    if (!this.pointerEl) return;
+    const e = this.pointerEl.classList.contains("cfr-holding"), t = this.options.pointerClassName.split(/\s+/).filter(Boolean);
+    this.pointerEl.className = ["cfr-simulated-pointer", ...t].join(" "), e && this.pointerEl.classList.add("cfr-holding"), this.pointerEl.classList.toggle("cfr-ripple-disabled", this.options.disableRipple);
+  }
+  validatePointerColor(e, t) {
+    if (!/^#[0-9a-f]{6}$/i.test(e))
+      throw new TypeError(`[FilmRecorder] ${t} must be a 6-digit hex color.`);
+    return e;
+  }
+  applyPointerColors() {
+    if (!this.pointerEl) return;
+    const e = this.validatePointerColor(this.options.pointerFillColor, "pointerFillColor"), t = this.validatePointerColor(this.options.pointerBorderColor, "pointerBorderColor"), i = this.validatePointerColor(this.options.pointerRippleColor, "pointerRippleColor"), o = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="30" viewBox="0 0 24 30" fill="none"><path d="M2 2.25V23.15L7.55 17.83L11.65 27.4L16.05 25.52L12.08 16.25H20.2L2 2.25Z" fill="${e}" stroke="${t}" stroke-width="2.2" stroke-linejoin="round"/></svg>`;
+    this.pointerEl.style.backgroundImage = `url("data:image/svg+xml,${encodeURIComponent(o)}")`, this.pointerEl.style.setProperty("--cfr-pointer-ripple-color", i);
+  }
+  resetPointerEntryPosition() {
+    this.ensurePointerEl(), this.pointerEl && (this.pointerX = window.innerWidth / 2, this.pointerY = window.innerHeight + 40, this.pointerEl.style.left = `${this.pointerX}px`, this.pointerEl.style.top = `${this.pointerY}px`, this.pointerEl.classList.remove("cfr-holding"));
+  }
+  async getTargetElement(e, t, i, o = this.options.selectorTimeoutMs) {
+    if (typeof e != "string")
+      return e;
+    const n = performance.now();
+    for (; ; ) {
+      if (i?.aborted)
+        throw new DOMException("Aborted", "AbortError");
+      const r = document.querySelector(e);
+      if (r)
+        return r;
+      if (performance.now() - n > o)
+        throw this.createSelectorError(e, t);
+      await new Promise((s) => setTimeout(s, 50));
+    }
+  }
+  async animatePointerTo(e, t = 800, i, o = this.options.selectorTimeoutMs) {
+    if (typeof window > "u" || typeof document > "u") return;
+    if (this.ensurePointerEl(), i?.aborted)
+      throw new DOMException("Aborted", "AbortError");
+    const n = await this.getTargetElement(
+      e,
+      "animatePointerTo",
+      i,
+      o
+    ), r = n.getBoundingClientRect(), s = r.left + r.width / 2, a = r.top + r.height / 2, c = this.pointerX, h = this.pointerY, d = performance.now();
+    return this.tourRafId && cancelAnimationFrame(this.tourRafId), new Promise((p, u) => {
+      const m = () => {
+        cancelAnimationFrame(this.tourRafId), u(new DOMException("Aborted", "AbortError"));
+      };
+      i && i.addEventListener("abort", m);
+      const l = (f) => {
+        if (i?.aborted) return;
+        const v = f - d, w = Math.min(v / t, 1), y = w < 0.5 ? 2 * w * w : 1 - Math.pow(-2 * w + 2, 2) / 2, E = c + (s - c) * y, b = h + (a - h) * y;
+        this.pointerX = E, this.pointerY = b, this.pointerEl && (this.pointerEl.style.left = `${E}px`, this.pointerEl.style.top = `${b}px`), w < 1 ? this.tourRafId = requestAnimationFrame(l) : (this.dispatchPointerHover(n, s, a), i && i.removeEventListener("abort", m), p());
+      };
+      this.tourRafId = requestAnimationFrame(l);
+    });
+  }
+  dispatchPointerHover(e, t, i) {
+    const o = {
+      bubbles: !0,
+      cancelable: !0,
+      view: window,
+      clientX: t,
+      clientY: i
+    };
+    e.dispatchEvent(new MouseEvent("mouseover", o)), e.dispatchEvent(new MouseEvent("mouseenter", { ...o, bubbles: !1 })), e.dispatchEvent(new MouseEvent("mousemove", o));
+  }
+  async simulateClick(e, t, i = this.options.selectorTimeoutMs) {
+    if (typeof window > "u" || typeof document > "u") return;
+    if (t?.aborted)
+      throw new DOMException("Aborted", "AbortError");
+    if (await this.animatePointerTo(e, 600, t, i), t?.aborted)
+      throw new DOMException("Aborted", "AbortError");
+    this.pointerEl && this.pointerEl.classList.add("cfr-holding");
+    let o;
+    try {
+      o = await this.getTargetElement(e, "simulateClick", t, i);
+    } catch (a) {
+      throw this.pointerEl && this.pointerEl.classList.remove("cfr-holding"), a;
+    }
+    const n = new MouseEvent("mousedown", { bubbles: !0, cancelable: !0, view: window }), r = new MouseEvent("mouseup", { bubbles: !0, cancelable: !0, view: window }), s = new MouseEvent("click", { bubbles: !0, cancelable: !0, view: window });
+    o.dispatchEvent(n), o.dispatchEvent(r), o instanceof HTMLElement ? o.click() : o.dispatchEvent(s), await new Promise((a, c) => {
+      const h = () => {
+        clearTimeout(d), this.pointerEl && this.pointerEl.classList.remove("cfr-holding"), c(new DOMException("Aborted", "AbortError"));
+      };
+      t && t.addEventListener("abort", h);
+      const d = setTimeout(() => {
+        t && t.removeEventListener("abort", h), this.pointerEl && this.pointerEl.classList.remove("cfr-holding"), a();
+      }, 250);
+    });
+  }
+  isFormTypingTarget(e) {
+    return typeof HTMLInputElement < "u" && typeof HTMLTextAreaElement < "u" && (e instanceof HTMLInputElement || e instanceof HTMLTextAreaElement) ? !0 : "value" in e && typeof e.value == "string";
+  }
+  isContentEditableTypingTarget(e) {
+    return e instanceof HTMLElement && e.isContentEditable;
+  }
+  dispatchKeyboardInputEvents(e, t, i = "insertText") {
+    const o = new KeyboardEvent("keydown", {
+      key: t,
+      charCode: t.length === 1 ? t.charCodeAt(0) : 0,
+      bubbles: !0
+    }), n = new KeyboardEvent("keypress", {
+      key: t,
+      charCode: t.length === 1 ? t.charCodeAt(0) : 0,
+      bubbles: !0
+    }), r = new InputEvent("input", {
+      data: i === "insertText" ? t : null,
+      inputType: i,
+      bubbles: !0
+    }), s = new KeyboardEvent("keyup", {
+      key: t,
+      charCode: t.length === 1 ? t.charCodeAt(0) : 0,
+      bubbles: !0
+    });
+    e.dispatchEvent(o), i === "insertText" && e.dispatchEvent(n), e.dispatchEvent(r), e.dispatchEvent(s);
+  }
+  typeChar(e, t) {
+    if (!this.isFormTypingTarget(e)) {
+      this.typeContentEditableChar(e, t);
+      return;
+    }
+    const i = e.selectionStart ?? e.value.length, o = e.selectionEnd ?? e.value.length, n = e.value;
+    e.value = n.substring(0, i) + t + n.substring(o), e.selectionStart = e.selectionEnd = i + 1;
+    const r = e._valueTracker;
+    r && r.setValue(n), this.dispatchKeyboardInputEvents(e, t), e.dispatchEvent(new Event("change", { bubbles: !0 }));
+  }
+  typeContentEditableChar(e, t) {
+    const i = window.getSelection();
+    if (!i) return;
+    if (!i.rangeCount || !e.contains(i.anchorNode)) {
+      const r = document.createRange();
+      r.selectNodeContents(e), r.collapse(!1), i.removeAllRanges(), i.addRange(r);
+    }
+    const o = i.getRangeAt(0);
+    o.deleteContents();
+    const n = document.createTextNode(t);
+    o.insertNode(n), o.setStartAfter(n), o.collapse(!0), i.removeAllRanges(), i.addRange(o), this.dispatchKeyboardInputEvents(e, t), e.dispatchEvent(new Event("change", { bubbles: !0 }));
+  }
+  simulateBackspace(e) {
+    if (!this.isFormTypingTarget(e)) {
+      this.simulateContentEditableBackspace(e);
+      return;
+    }
+    const t = e.value;
+    if (t.length === 0) return;
+    const i = e.selectionStart ?? t.length, o = e.selectionEnd ?? t.length;
+    let n = t, r = i;
+    i !== o ? n = t.substring(0, i) + t.substring(o) : i > 0 && (n = t.substring(0, i - 1) + t.substring(i), r = i - 1), e.value = n, e.selectionStart = e.selectionEnd = r;
+    const s = e._valueTracker;
+    s && s.setValue(t), this.dispatchKeyboardInputEvents(e, "Backspace", "deleteContentBackward"), e.dispatchEvent(new Event("change", { bubbles: !0 }));
+  }
+  simulateContentEditableBackspace(e) {
+    const t = window.getSelection();
+    if (!t) return;
+    if (!t.rangeCount || !e.contains(t.anchorNode)) {
+      const o = document.createRange();
+      o.selectNodeContents(e), o.collapse(!1), t.removeAllRanges(), t.addRange(o);
+    }
+    const i = t.getRangeAt(0);
+    if (!i.collapsed)
+      i.deleteContents();
+    else if (i.startContainer.nodeType === Node.TEXT_NODE && i.startOffset > 0) {
+      const o = i.startContainer;
+      o.textContent = (o.textContent ?? "").slice(0, i.startOffset - 1) + (o.textContent ?? "").slice(i.startOffset), i.setStart(o, i.startOffset - 1), i.collapse(!0);
+    } else
+      return;
+    t.removeAllRanges(), t.addRange(i), this.dispatchKeyboardInputEvents(e, "Backspace", "deleteContentBackward"), e.dispatchEvent(new Event("change", { bubbles: !0 }));
+  }
+  async focusTypingTarget(e, t, i = this.options.selectorTimeoutMs) {
+    const o = await this.getTargetElement(e, "simulateType", t, i);
+    if (!(o instanceof HTMLInputElement || o instanceof HTMLTextAreaElement || this.isContentEditableTypingTarget(o)))
+      throw new Error(
+        "[FilmRecorder] Target element for simulateType must be an input, textarea, or contenteditable element."
+      );
+    return await this.simulateClick(o, t, i), o.focus(), o;
+  }
+  async simulateType(e, t, i, o) {
+    await this.simulateTypeWithRandom(
+      e,
+      t,
+      i,
+      o,
+      Math.random,
+      this.options.selectorTimeoutMs
+    );
+  }
+  async simulateTypeWithRandom(e, t, i, o, n, r = this.options.selectorTimeoutMs) {
+    if (typeof window > "u" || typeof document > "u") return;
+    this.throwIfAborted(o);
+    const s = this.resolveTypingOptions(
+      typeof i == "number" ? { cps: i } : i
+    ), { cps: a, jitter: c, punctuationPauseMs: h, mistakeRate: d } = s, p = await this.focusTypingTarget(e, o, r), u = 1e3 / a, m = (l, f, v = !1) => {
+      if (c <= 0)
+        return u;
+      let w = 1;
+      if (!v && l > 0) {
+        const T = t[l - 1], M = f;
+        M === T && /[a-zA-Z0-9]/.test(M) ? w = 0.4 : /[a-zA-Z0-9]/.test(T) && /[a-zA-Z0-9]/.test(M) ? w = 0.75 : M === " " ? w = 1.5 : T === " " && /[a-zA-Z0-9]/.test(M) && (w = 1.25);
+      }
+      const y = /[A-Z]/.test(f), E = l > 0 && /[A-Z]/.test(t[l - 1]);
+      y && !E && !v && (w += 0.4);
+      const b = n(), A = n(), P = Math.sqrt(-2 * Math.log(b || 1e-4)) * Math.cos(2 * Math.PI * A), C = Math.exp(P * c * 0.8);
+      let R = u * w * C;
+      if (!v && l > 0 && l % 18 === 0 && n() < 0.6) {
+        const T = u * (1.5 + n() * 2) * c;
+        R += T;
+      }
+      const k = Math.max(10, u * 0.25), L = u * 4;
+      return Math.min(L, Math.max(k, R));
+    };
+    for (let l = 0; l < t.length; l++) {
+      this.throwIfAborted(o);
+      const f = t[l];
+      if (d > 0 && n() < d && /[a-z0-9]/i.test(f)) {
+        const w = this.getPlausibleTypo(f, n);
+        this.typeChar(p, w);
+        const y = m(l, w, !0) * 1.3;
+        await this.delay(y, o), this.throwIfAborted(o), this.simulateBackspace(p);
+        const E = m(l, "Backspace", !0) * 1.1;
+        await this.delay(E, o);
+      }
+      this.typeChar(p, f);
+      let v = m(l, f);
+      /[.,!?;;:]/.test(f) && (v += h), await this.delay(v, o);
+    }
+  }
+  getPlausibleTypo(e, t) {
+    const i = {
+      a: "sqwz",
+      b: "vghn",
+      c: "xdfv",
+      d: "ersfcx",
+      e: "wsdr",
+      f: "rtgdvc",
+      g: "tyfhvb",
+      h: "yugjbn",
+      i: "ujko",
+      j: "uikhmn",
+      k: "ijolm",
+      l: "kop",
+      m: "njk",
+      n: "bhjm",
+      o: "iklp",
+      p: "ol",
+      q: "wa",
+      r: "edft",
+      s: "wedxza",
+      t: "rfgy",
+      u: "yhji",
+      v: "cfgb",
+      w: "qase",
+      x: "zsdc",
+      y: "tghu",
+      z: "asx"
+    }, o = e.toLowerCase(), n = i[o] ?? "abcdefghijklmnopqrstuvwxyz", r = n[Math.floor(t() * n.length)];
+    return e === e.toUpperCase() ? r.toUpperCase() : r;
+  }
+  playPointerTour(e, t) {
+    if (typeof window > "u" || typeof document > "u") return Promise.resolve();
+    const i = t?.moveDuration ?? 1e3, o = t?.holdDuration ?? 2e3;
+    if (this.ensurePointerEl(), !this.pointerEl) return Promise.resolve();
+    this.pointerEl.style.display = "block", this.pointerEl.classList.remove("cfr-holding"), this.resetFullScreen();
+    const n = document.querySelector(e);
+    if (!n)
+      return console.warn(`[FilmRecorder] Pointer tour target element not found: ${e}`), Promise.resolve();
+    const r = n.getBoundingClientRect(), s = r.left + r.width / 2, a = r.top + r.height / 2, c = this.pointerX, h = this.pointerY, d = performance.now();
+    return this.tourRafId && cancelAnimationFrame(this.tourRafId), new Promise((p) => {
+      const u = (m) => {
+        const l = m - d, f = Math.min(l / i, 1), v = f < 0.5 ? 2 * f * f : 1 - Math.pow(-2 * f + 2, 2) / 2, w = c + (s - c) * v, y = h + (a - h) * v;
+        if (this.pointerX = w, this.pointerY = y, this.pointerEl && (this.pointerEl.style.left = `${w}px`, this.pointerEl.style.top = `${y}px`), f < 1)
+          this.tourRafId = requestAnimationFrame(u);
+        else {
+          this.pointerEl && this.pointerEl.classList.add("cfr-holding"), this.mousePosGlobal = { x: s, y: a };
+          const E = this.state.resolution.w / this.state.resolution.h;
+          this.targetRect = this.centeredRectOnPoint(
+            s,
+            a,
+            window.innerWidth,
+            window.innerHeight,
+            E
+          ), setTimeout(() => {
+            this.pointerEl && this.pointerEl.classList.remove("cfr-holding"), this.resetFullScreen(), setTimeout(() => {
+              this.pointerEl && !this.pointerEl.classList.contains("cfr-holding") && (this.pointerEl.style.display = "none"), p();
+            }, 1e3);
+          }, o);
+        }
+      };
+      this.tourRafId = requestAnimationFrame(u);
+    });
+  }
+  // State Management
+  getState() {
+    return { ...this.state };
+  }
+  onStateChange(e) {
+    return this.listeners.add(e), e(this.getState()), () => this.listeners.delete(e);
+  }
+  updateState(e) {
+    this.state = { ...this.state, ...e }, this.listeners.forEach((t) => t(this.state));
+  }
+  // Getters/Setters for Option Controls
+  setResolution(e) {
+    if (this.state.recording) return;
+    this.updateState({ resolution: e });
+    const t = this.computeGrid(window.innerWidth, window.innerHeight), i = e.w / e.h, { w: o, h: n } = this.getRecordingRegionBox(i, g, t.rows, g), r = Math.floor((g - o) / 2), s = Math.floor((t.rows - n) / 2);
+    this.targetRect = { col: r, row: s, w: o, h: n }, this.liveRect = { ...this.targetRect };
+  }
+  setAutoZoom(e) {
+    this.updateState({ autoZoom: e });
+  }
+  setPauseDuringScroll(e) {
+    this.updateState({ pauseDuringScroll: e });
+  }
+  setShowGrid(e) {
+    this.updateState({ showGrid: e });
+  }
+  setShowOutline(e) {
+    this.updateState({ showOutline: e });
+  }
+  setMousePaused(e) {
+    this.updateState({ mousePaused: e });
+  }
+  setElementSelector(e) {
+    if (this.options.elementSelector = e, this.updateState({ elementSelector: e }), e) {
+      const t = this.calculateElementRect(e, this.options.elementPadding);
+      t && (this.targetRect = t);
+    } else
+      this.resetFullScreen();
+  }
+  setElementPadding(e) {
+    if (this.options.elementPadding = e, this.updateState({ elementPadding: e }), this.options.elementSelector) {
+      const t = this.calculateElementRect(this.options.elementSelector, e);
+      t && (this.targetRect = t);
+    }
+  }
+  setFixedRecordingRegion(e) {
+    if (this.options.fixedRecordingRegion = e, this.updateState({ fixedRecordingRegion: e }), this.options.elementSelector) {
+      const t = this.calculateElementRect(
+        this.options.elementSelector,
+        this.options.elementPadding
+      );
+      t && (this.targetRect = t);
+    } else
+      this.resetFullScreen();
+  }
+  setMovePointerToSelector(e) {
+    this.options.movePointerToSelector = e, this.updateState({ movePointerToSelector: e });
+  }
+  setPointerClassName(e) {
+    this.options.pointerClassName = e, this.updateState({ pointerClassName: e }), this.applyPointerClassName();
+  }
+  setPointerFillColor(e) {
+    this.options.pointerFillColor = this.validatePointerColor(e, "pointerFillColor"), this.updateState({ pointerFillColor: this.options.pointerFillColor }), this.applyPointerColors();
+  }
+  setPointerBorderColor(e) {
+    this.options.pointerBorderColor = this.validatePointerColor(e, "pointerBorderColor"), this.updateState({ pointerBorderColor: this.options.pointerBorderColor }), this.applyPointerColors();
+  }
+  setPointerRippleColor(e) {
+    this.options.pointerRippleColor = this.validatePointerColor(e, "pointerRippleColor"), this.updateState({ pointerRippleColor: this.options.pointerRippleColor }), this.applyPointerColors();
+  }
+  setDisableRipple(e) {
+    this.options.disableRipple = e, this.updateState({ disableRipple: e }), this.applyPointerClassName();
+  }
+  setIgnoreSelector(e) {
+    this.restoreIgnoredElements(), this.options.ignoreSelector = e, this.updateState({ ignoreSelector: e }), this.state.recording && this.hideIgnoredElements();
+  }
+  setTypingDefaults(e) {
+    this.options.typingDefaults = this.resolveTypingOptions(e);
+  }
+  resolveSelectorTimeoutMs(e) {
+    const t = e ?? this.options.selectorTimeoutMs;
+    if (!Number.isFinite(t) || t < 0)
+      throw new TypeError("[FilmRecorder] selectorTimeoutMs must be a finite number >= 0.");
+    return t;
+  }
+  resolveTypingOptions(...e) {
+    const t = { ...W };
+    for (const i of e)
+      if (i)
+        for (const o of Object.keys(i)) {
+          const n = i[o];
+          n !== void 0 && (t[o] = n);
+        }
+    return this.validateTypingOptions(t), { ...t };
+  }
+  validateTypingOptions(e, t = "[FilmRecorder] Invalid typing options") {
+    const i = [
+      ["cps", e.cps, "must be a finite number greater than 0"],
+      ["jitter", e.jitter, "must be between 0 and 1"],
+      [
+        "punctuationPauseMs",
+        e.punctuationPauseMs,
+        "must be a finite number greater than or equal to 0"
+      ],
+      ["mistakeRate", e.mistakeRate, "must be between 0 and 1"]
+    ];
+    for (const [o, n, r] of i) {
+      if (n === void 0) continue;
+      if (!(Number.isFinite(n) && (o === "cps" ? n > 0 : o === "punctuationPauseMs" ? n >= 0 : n >= 0 && n <= 1)))
+        throw new TypeError(`${t}: ${o} ${r}; received ${String(n)}.`);
+    }
+  }
+  // Helper for abortable delay
+  delay(e, t) {
+    return new Promise((i, o) => {
+      if (t?.aborted)
+        return o(new DOMException("Aborted", "AbortError"));
+      const n = () => {
+        clearTimeout(r), o(new DOMException("Aborted", "AbortError"));
+      };
+      t && t.addEventListener("abort", n);
+      const r = setTimeout(() => {
+        t && t.removeEventListener("abort", n), i();
+      }, e);
+    });
+  }
+  // Text element finding & actions
+  findElementByText(e) {
+    if (typeof document > "u") return null;
+    try {
+      const i = `//*[text()='${e}' or contains(text(), '${e}')]`, n = document.evaluate(i, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
+      if (n) return n;
+    } catch {
+    }
+    const t = Array.from(document.querySelectorAll("button, a, label, span, div, h1, h2, h3, h4, p"));
+    for (const i of t)
+      if (i.textContent?.trim() === e)
+        return i;
+    for (const i of t)
+      if (i.textContent?.includes(e))
+        return i;
+    return null;
+  }
+  async findElementByTextAsync(e, t, i = 3e3) {
+    const o = performance.now();
+    for (; ; ) {
+      if (t?.aborted)
+        throw new DOMException("Aborted", "AbortError");
+      const n = this.findElementByText(e);
+      if (n)
+        return n;
+      if (performance.now() - o > i)
+        return null;
+      await new Promise((r) => setTimeout(r, 50));
+    }
+  }
+  async clickText(e, t) {
+    const i = await this.findElementByTextAsync(e, t, this.options.selectorTimeoutMs);
+    if (!i)
+      throw this.createSelectorError(e, "clickText");
+    await this.simulateClick(i, t);
+  }
+  async focusText(e, t) {
+    const i = await this.findElementByTextAsync(e, t, this.options.selectorTimeoutMs);
+    if (!i)
+      throw this.createSelectorError(e, "focusText");
+    const o = "data-cfr-temp-focus";
+    i.setAttribute(o, "true"), this.setElementSelector(`[${o}="true"]`), await this.animatePointerTo(i, 800, t);
+  }
+  createSelectorError(e, t) {
+    const i = this.state.currentScene ? ` in scene "${this.state.currentScene}"` : "";
+    return new Error(
+      `[FilmRecorder] Selector safety check failed for "${e}" during action "${t}"${i}.
+Suggested fix: Ensure the element is mounted in the DOM, or add a stable attribute like data-film-target="${e}" or data-testid.`
+    );
+  }
+  validateFilmScript(e) {
+    const t = Y(e), i = [];
+    t.length === 0 && i.push({
+      line: 1,
+      scene: null,
+      commandIndex: null,
+      message: "No film script scenes were found."
+    });
+    for (const o of t)
+      o.commands.forEach((n, r) => {
+        if (["camera", "type", "click", "pointer", "move"].includes(n.type) && n.type !== "camera" && !n.selector && i.push({
+          line: n.sourceLine ?? 1,
+          scene: o.name,
+          commandIndex: r,
+          message: `${n.type} requires a non-empty selector.`
+        }), n.type === "type" && n.text === void 0 && i.push({
+          line: n.sourceLine ?? 1,
+          scene: o.name,
+          commandIndex: r,
+          message: "type requires text."
+        }), n.type === "type")
+          try {
+            this.validateTypingOptions(
+              {
+                cps: n.cps,
+                jitter: n.jitter,
+                punctuationPauseMs: n.punctuationPauseMs,
+                mistakeRate: n.mistakeRate
+              },
+              `[FilmRecorder] Invalid type command in scene "${o.name}"`
+            );
+          } catch (s) {
+            i.push({
+              line: n.sourceLine ?? 1,
+              scene: o.name,
+              commandIndex: r,
+              message: s instanceof Error ? s.message : String(s)
+            });
+          }
+      });
+    return {
+      valid: i.length === 0,
+      scenes: t,
+      diagnostics: i
+    };
+  }
+  createScriptValidationError(e) {
+    const t = e.map((i) => {
+      const o = i.scene ? ` scene "${i.scene}"` : "", n = i.commandIndex === null ? "" : ` command ${i.commandIndex}`;
+      return `line ${i.line}${o}${n}: ${i.message}`;
+    }).join(`
+`);
+    return new Error(`[FilmRecorder] Invalid film script:
+${t}`);
+  }
+  // Tour State Updates
+  updateTourState(e, t = null) {
+    this.updateState({ tourState: e, currentScene: t });
+  }
+  // Stop Tour & All Semantics
+  async stopTour() {
+    this.tourAbortController && (this.tourAbortController.abort(), this.tourAbortController = null), this.activeExecutionPromise = null, this.finalizationPromise = null, this.pendingActionGates = [], this.activeFilmScriptContext = null, this.activeFilmScriptOptions = null, this.updateState({
+      tourState: "stopped",
+      executionState: "finished",
+      currentScene: null
+    }), await this.options.onTourStop?.();
+  }
+  async stopAll() {
+    await this.stopTour(), this.stopRecording();
+  }
+  finishRecording(e) {
+    const t = typeof e == "function" ? { onReadyToEnd: e } : e ?? {};
+    if (this.finalizationPromise && !t.force)
+      return this.finalizationPromise;
+    const i = this.finalizeRecording(t);
+    return t.force || (this.finalizationPromise = i), i;
+  }
+  async finalizeRecording(e) {
+    const t = this.activeFilmScriptContext ?? {
+      recorder: this,
+      signal: new AbortController().signal,
+      scenes: []
+    };
+    try {
+      e.force ? this.tourAbortController?.abort() : (await this.activeExecutionPromise, this.updateState({ executionState: "waiting" }), await this.awaitActionGates(t)), this.updateState({ executionState: "finalizing" }), await e.onReadyToEnd?.(t), await this.activeFilmScriptOptions?.onReadyToEnd?.(t), await this.options.onReadyToEnd?.(t), this.options.elementSelector && (this.options.elementSelector = null, this.updateState({ elementSelector: null })), this.zoomTopFullFrame(), await this.delay(1e3, e.force ? void 0 : t.signal), this.state.recording && this.stopRecording(), await this.completeActiveFilmScript(t);
+    } catch (i) {
+      throw await this.failActiveFilmScript(t, i), i;
+    }
+  }
+  executeFilmScript(e, t = {}) {
+    this.activeFilmTitle = X(e), this.timelineMetadata && !this.timelineMetadata.title && (this.timelineMetadata.title = this.activeFilmTitle);
+    const i = this.validateFilmScript(e);
+    if (!i.valid)
+      return Promise.reject(this.createScriptValidationError(i.diagnostics));
+    try {
+      this.resolveTypingOptions(this.options.typingDefaults, t.typingDefaults);
+    } catch (n) {
+      return Promise.reject(n);
+    }
+    this.tourAbortController && this.tourAbortController.abort(), this.pendingActionGates = [], this.finalizationPromise = null;
+    const o = this.executeFilmScriptScenes(i.scenes, t);
+    return this.activeExecutionPromise = o, o.finally(() => {
+      this.activeExecutionPromise === o && (this.activeExecutionPromise = null), this.state.executionState === "executing" && this.updateState({ executionState: "waiting" });
+    });
+  }
+  async executeFilmScriptScenes(e, t) {
+    const i = this.resolveTypingOptions(
+      this.options.typingDefaults,
+      t.typingDefaults
+    );
+    this.activeTypingRandom = this.createSeededRandom(
+      t.typingSeed ?? this.options.typingSeed
+    );
+    const o = this.resolveSelectorTimeoutMs(t.selectorTimeoutMs);
+    this.tourAbortController = new AbortController();
+    const n = t.signal ? this.linkAbortSignals(t.signal, this.tourAbortController.signal) : this.tourAbortController.signal, r = {
+      recorder: this,
+      signal: n,
+      scenes: e
+    };
+    this.activeFilmScriptContext = r, this.activeFilmScriptOptions = t, this.updateState({
+      tourState: "running",
+      executionState: "executing",
+      currentScene: null
+    });
+    try {
+      await this.options.onTourStart?.();
+      for (const [s, a] of e.entries()) {
+        this.throwIfAborted(n);
+        const c = performance.now(), h = this.startTimelineScene(a, s);
+        this.updateTourState("running", a.name), await t.onSceneStart?.(a), await this.options.onSceneStart?.(a);
+        for (const [m, l] of a.commands.entries()) {
+          this.throwIfAborted(n);
+          const f = performance.now(), v = this.startTimelineAction(h, l, m), w = (E) => {
+            const b = Promise.resolve(E).then(() => {
+            });
+            b.catch(() => {
+            }), this.pendingActionGates.push({
+              promise: b,
+              scene: a,
+              command: l,
+              commandIndex: m
+            });
+          }, y = () => ({
+            ...r,
+            scene: a,
+            command: l,
+            commandIndex: m,
+            elapsedMs: performance.now() - f,
+            waitUntil: w
+          });
+          switch (await t.onActionStart?.(y()), await this.options.onActionStart?.(y()), l.type) {
+            case "camera":
+              l.selector ? (this.setElementSelector(l.selector), this.setElementPadding(l.padding ?? 1.1)) : (this.setElementSelector(null), this.zoomCenter());
+              break;
+            case "zoom":
+              this.setElementSelector(null), l.to === "top" ? this.zoomTop() : l.to === "bottom" ? this.zoomBottom() : this.zoomCenter();
+              break;
+            case "type":
+              if (l.selector && l.text) {
+                const E = this.resolveTypingOptions(i, {
+                  cps: l.cps,
+                  jitter: l.jitter,
+                  punctuationPauseMs: l.punctuationPauseMs,
+                  mistakeRate: l.mistakeRate
+                });
+                await this.simulateTypeWithRandom(
+                  l.selector,
+                  l.text,
+                  E,
+                  n,
+                  this.activeTypingRandom,
+                  o
+                );
+              }
+              break;
+            case "click":
+              l.selector && await this.simulateClick(l.selector, n, o);
+              break;
+            case "pointer":
+            case "move":
+              l.selector && await this.animatePointerTo(
+                l.selector,
+                l.durationMs ?? 800,
+                n,
+                o
+              );
+              break;
+            case "wait":
+              l.durationMs && await this.delay(l.durationMs, n);
+              break;
+          }
+          await t.onActionEnd?.(y()), await this.options.onActionEnd?.(y()), this.endTimelineAction(h, v);
+        }
+        const d = (a.endTime - a.startTime) * 1e3, p = performance.now() - c, u = d - p;
+        u > 0 && await this.delay(u, n), await t.onSceneEnd?.(a), await this.options.onSceneEnd?.(a), this.endTimelineScene(h);
+      }
+    } catch (s) {
+      throw await this.failActiveFilmScript(r, s), s;
+    }
+  }
+  // Deterministic Script Runner
+  async runFilmScript(e, t = {}) {
+    try {
+      await this.executeFilmScript(e, t);
+      const i = this.activeFilmScriptContext;
+      if (!i) return;
+      if (t.waitForCompletion) {
+        const o = Promise.resolve(t.waitForCompletion(i)).then(() => {
+        });
+        o.catch(() => {
+        }), this.pendingActionGates.push({
+          promise: o,
+          scene: i.scenes[i.scenes.length - 1] ?? {
+            name: "completion",
+            startTime: 0,
+            endTime: 0,
+            commands: []
+          },
+          command: { type: "wait" },
+          commandIndex: -1
+        });
+      }
+      await this.finishRecording();
+    } catch (i) {
+      const o = this.activeFilmScriptContext;
+      if (o && await this.failActiveFilmScript(o, i), !this.isAbortError(i))
+        throw i;
+    }
+  }
+  async awaitActionGates(e) {
+    const t = this.activeFilmScriptOptions?.completionTimeoutMs ?? U;
+    for (let i = 0; i < this.pendingActionGates.length; i++) {
+      const o = this.pendingActionGates[i];
+      try {
+        await this.waitForCompletion(o.promise, e.signal, t);
+      } catch (n) {
+        if (this.isAbortError(n)) throw n;
+        const r = n instanceof Error ? n.message : String(n);
+        throw new Error(
+          `[FilmRecorder] Completion gate failed in scene "${o.scene.name}", command ${o.commandIndex} (${o.command.type}): ${r}`
+        );
+      }
+    }
+  }
+  async waitForCompletion(e, t, i) {
+    if (!Number.isFinite(i) || i <= 0)
+      throw new Error("[FilmRecorder] completionTimeoutMs must be a positive finite number.");
+    this.throwIfAborted(t);
+    let o, n;
+    const r = new Promise((a, c) => {
+      o = setTimeout(() => {
+        c(
+          new Error(
+            `[FilmRecorder] waitForCompletion timed out after ${i}ms.`
+          )
+        );
+      }, i);
+    }), s = new Promise((a, c) => {
+      n = () => c(new DOMException("Aborted", "AbortError")), t.addEventListener("abort", n, { once: !0 });
+    });
+    try {
+      await Promise.race([Promise.resolve(e), r, s]);
+    } finally {
+      o && clearTimeout(o), n && t.removeEventListener("abort", n);
+    }
+  }
+  throwIfAborted(e) {
+    if (e?.aborted)
+      throw new DOMException("Aborted", "AbortError");
+  }
+  createSeededRandom(e) {
+    if (e === void 0 || e === "") return Math.random;
+    let t = 2166136261;
+    for (const i of String(e))
+      t ^= i.charCodeAt(0), t = Math.imul(t, 16777619);
+    return () => {
+      t += 1831565813;
+      let i = t;
+      return i = Math.imul(i ^ i >>> 15, i | 1), i ^= i + Math.imul(i ^ i >>> 7, i | 61), ((i ^ i >>> 14) >>> 0) / 4294967296;
+    };
+  }
+  isAbortError(e) {
+    return typeof e == "object" && e !== null && "name" in e && e.name === "AbortError";
+  }
+  async completeActiveFilmScript(e) {
+    if (!this.activeFilmScriptContext && e.scenes.length === 0) {
+      this.updateState({ executionState: "finished" });
+      return;
+    }
+    this.activeFilmScriptContext === e && (this.activeFilmScriptContext = null, this.activeFilmScriptOptions = null, this.tourAbortController = null, this.activeExecutionPromise = null, this.pendingActionGates = [], this.updateState({
+      tourState: "stopped",
+      executionState: "finished",
+      currentScene: null
+    }), await this.options.onTourStop?.());
+  }
+  async failActiveFilmScript(e, t) {
+    if (this.activeFilmScriptContext !== e) return;
+    if (this.tourAbortController?.abort(), this.activeFilmScriptContext = null, this.activeFilmScriptOptions = null, this.tourAbortController = null, this.activeExecutionPromise = null, this.pendingActionGates = [], this.isAbortError(t)) {
+      this.updateState({
+        tourState: "stopped",
+        executionState: "finished",
+        currentScene: null
+      }), await this.options.onTourStop?.();
+      return;
+    }
+    const i = t instanceof Error ? t : new Error(String(t));
+    this.updateState({
+      tourState: "error",
+      executionState: "error",
+      currentScene: null
+    }), await this.options.onTourError?.(i);
+  }
+  // Links two abort signals together to produce a third linked signal
+  linkAbortSignals(e, t) {
+    const i = new AbortController(), o = () => i.abort();
+    return e.aborted || t.aborted ? (i.abort(), i.signal) : (e.addEventListener("abort", o), t.addEventListener("abort", o), i.signal.addEventListener("abort", () => {
+      e.removeEventListener("abort", o), t.removeEventListener("abort", o);
+    }), i.signal);
+  }
+  // Cleanup
+  destroy() {
+    this.destroyed = !0, this.cleanupEventListeners(), cancelAnimationFrame(this.cameraRafId), cancelAnimationFrame(this.renderRafId), this.holdTimer && clearTimeout(this.holdTimer), this.zoomOutTimer && clearTimeout(this.zoomOutTimer), this.state.recording ? this.stopRecording() : (this.stopCaptureStream(), this.restoreIgnoredElements()), this.pointerEl && this.pointerEl.parentNode && (this.pointerEl.parentNode.removeChild(this.pointerEl), this.pointerEl = null), this.overlays.forEach((e) => e.destroy()), this.overlays.clear(), this.tourRafId && cancelAnimationFrame(this.tourRafId), this.videoEl && this.videoEl.parentNode && this.videoEl.parentNode.removeChild(this.videoEl), this.canvasEl && this.canvasEl.parentNode && this.canvasEl.parentNode.removeChild(this.canvasEl), this.clearLastRecording(), this.listeners.clear();
+  }
+}
+function X(S) {
+  const e = /\bfilm\s+"([^"]+)"/.exec(S);
+  return e ? e[1] : null;
+}
+function Y(S) {
+  const e = [], t = /scene\s+"([^"]+)"\s+@(\d+(?:\.\d+)?)s\s*->\s*(\d+(?:\.\d+)?)s\s*\{/g;
+  let i;
+  for (; (i = t.exec(S)) !== null; ) {
+    const o = i[1], n = parseFloat(i[2]), r = parseFloat(i[3]);
+    let s = 1, a = t.lastIndex;
+    const c = a;
+    for (; s > 0 && a < S.length; ) {
+      const u = S[a];
+      u === "{" ? s++ : u === "}" && s--, a++;
+    }
+    const h = S.substring(c, a - 1), d = S.slice(0, i.index).split(`
+`).length, p = q(h, d);
+    e.push({
+      name: o,
+      startTime: n,
+      endTime: r,
+      commands: p
+    });
+  }
+  return e;
+}
+function q(S, e) {
+  const t = [], i = S.replace(/\/\/.*$/gm, (s) => " ".repeat(s.length)), o = (s, a) => {
+    Object.defineProperty(s, "sourceLine", {
+      value: a,
+      enumerable: !1,
+      configurable: !0
+    }), t.push(s);
+  }, n = /\b(camera|zoom|type|click|pointer|move)\s*\{([\s\S]*?)\}|\bwait\s+(\d+(?:\.\d+)?)(ms|s)/g;
+  let r;
+  for (; (r = n.exec(i)) !== null; ) {
+    const s = e + S.slice(0, r.index).split(`
+`).length;
+    if (r[3]) {
+      const l = parseFloat(r[3]);
+      o({
+        type: "wait",
+        durationMs: r[4] === "s" ? l * 1e3 : l
+      }, s);
+      continue;
+    }
+    const a = r[1], c = r[2], h = (l) => {
+      const f = new RegExp(`${l}:\\s*(?:"([^"]*)"|'([^']*)')`).exec(
+        c
+      );
+      return f ? f[1] ?? f[2] : void 0;
+    }, d = (l) => {
+      const f = new RegExp(`${l}:\\s*([^\\s}]+)`).exec(c);
+      return f ? Number(f[1]) : void 0;
+    }, p = () => {
+      const l = h("to") ?? h("position");
+      return l === "top" || l === "bottom" || l === "center" ? l : void 0;
+    }, m = /selector:\s*(null|undefined)/.exec(c) ? null : h("selector");
+    o(a === "camera" ? {
+      type: a,
+      selector: m ?? null,
+      padding: d("padding") ?? 1.1
+    } : a === "zoom" ? {
+      type: a,
+      to: p() ?? "center"
+    } : a === "type" ? {
+      type: a,
+      selector: m,
+      text: h("text"),
+      cps: d("cps"),
+      jitter: d("jitter"),
+      punctuationPauseMs: d("punctuationPauseMs"),
+      mistakeRate: d("mistakeRate")
+    } : a === "pointer" || a === "move" ? {
+      type: a,
+      selector: m,
+      durationMs: d("durationMs") ?? 800
+    } : { type: a, selector: m }, s);
+  }
+  return t;
+}
+export {
+  g as COLS,
+  U as DEFAULT_COMPLETION_TIMEOUT_MS,
+  O as DEFAULT_RESOLUTIONS,
+  _ as DEFAULT_SELECTOR_TIMEOUT_MS,
+  Q as FilmRecorder,
+  x as HEADER_PX,
+  z as HOLD_MS,
+  B as HOLD_RADIUS_PX,
+  V as HUMAN_TYPING_PRESET,
+  H as LERP_IN,
+  $ as LERP_OUT,
+  F as MIN_BOX_COLS,
+  K as OUTLINE_PX,
+  G as SCROLL_PAUSE_MS,
+  W as SDK_TYPING_DEFAULTS,
+  j as SHORTCUT_KEY,
+  N as ZOOM_OUT_AFTER_MOVE_MS,
+  Y as parseFilmScript
+};