@yassine-bouassida/scenecap 1.0.0

package/dist/index.mjs

@@ -0,0 +1,1420 @@
+// src/annotations/overlay.ts
+var AnnotationOverlay = class {
+  constructor(container) {
+    this.annotations = /* @__PURE__ */ new Map();
+    this.animationFrame = null;
+    this.resize = () => {
+      const dpr = window.devicePixelRatio || 1;
+      const rect = this.canvas.parentElement.getBoundingClientRect();
+      this.canvas.width = rect.width * dpr;
+      this.canvas.height = rect.height * dpr;
+      this.ctx.scale(dpr, dpr);
+    };
+    this.canvas = document.createElement("canvas");
+    this.canvas.style.cssText = `
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      pointer-events: none;
+      z-index: 999999;
+    `;
+    container.style.position = "relative";
+    container.appendChild(this.canvas);
+    const ctx = this.canvas.getContext("2d");
+    if (!ctx) throw new Error("Canvas 2D context not available");
+    this.ctx = ctx;
+    this.resize();
+    window.addEventListener("resize", this.resize);
+  }
+  // ── Add annotations ──
+  addCircle(id, target, color = "#ff3b30", thickness = 3) {
+    this.annotations.set(id, {
+      id,
+      type: "circle",
+      target,
+      color,
+      thickness,
+      opacity: 1,
+      animProgress: 0
+    });
+    this.startAnimation();
+  }
+  addHighlight(id, target, color = "#ffcc02", thickness = 0) {
+    this.annotations.set(id, {
+      id,
+      type: "highlight",
+      target,
+      color,
+      thickness,
+      opacity: 0.3,
+      animProgress: 0
+    });
+    this.startAnimation();
+  }
+  addArrow(id, target, color = "#ff3b30", thickness = 3) {
+    this.annotations.set(id, {
+      id,
+      type: "arrow",
+      target,
+      color,
+      thickness,
+      opacity: 1,
+      animProgress: 0
+    });
+    this.startAnimation();
+  }
+  addText(id, target, text, color = "#1a1a1a") {
+    this.annotations.set(id, {
+      id,
+      type: "text",
+      target,
+      color,
+      thickness: 0,
+      text,
+      opacity: 1,
+      animProgress: 0
+    });
+    this.startAnimation();
+  }
+  addZoomIndicator(id, target) {
+    this.annotations.set(id, {
+      id,
+      type: "zoom-indicator",
+      target,
+      color: "#007aff",
+      thickness: 2,
+      opacity: 0.6,
+      animProgress: 0
+    });
+    this.startAnimation();
+  }
+  remove(id) {
+    this.annotations.delete(id);
+    if (this.annotations.size === 0) this.stopAnimation();
+    else this.render();
+  }
+  clear() {
+    this.annotations.clear();
+    this.stopAnimation();
+    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+  }
+  // ── Rendering ──
+  startAnimation() {
+    if (this.animationFrame) return;
+    const animate = () => {
+      this.update();
+      this.render();
+      this.animationFrame = requestAnimationFrame(animate);
+    };
+    this.animationFrame = requestAnimationFrame(animate);
+  }
+  stopAnimation() {
+    if (this.animationFrame) {
+      cancelAnimationFrame(this.animationFrame);
+      this.animationFrame = null;
+    }
+  }
+  update() {
+    for (const ann of this.annotations.values()) {
+      if (ann.animProgress < 1) {
+        ann.animProgress = Math.min(1, ann.animProgress + 0.04);
+      }
+    }
+  }
+  render() {
+    const dpr = window.devicePixelRatio || 1;
+    this.ctx.clearRect(0, 0, this.canvas.width / dpr, this.canvas.height / dpr);
+    for (const ann of this.annotations.values()) {
+      switch (ann.type) {
+        case "circle":
+          this.drawCircle(ann);
+          break;
+        case "highlight":
+          this.drawHighlight(ann);
+          break;
+        case "arrow":
+          this.drawArrow(ann);
+          break;
+        case "text":
+          this.drawText(ann);
+          break;
+        case "zoom-indicator":
+          this.drawZoomIndicator(ann);
+          break;
+      }
+    }
+  }
+  drawCircle(ann) {
+    const { target, color, thickness, animProgress } = ann;
+    const ctx = this.ctx;
+    const cx = target.x + target.width / 2;
+    const cy = target.y + target.height / 2;
+    const rx = target.width / 2 + 8;
+    const ry = target.height / 2 + 8;
+    ctx.save();
+    ctx.strokeStyle = color;
+    ctx.lineWidth = thickness;
+    ctx.globalAlpha = ann.opacity;
+    ctx.setLineDash([]);
+    ctx.beginPath();
+    const endAngle = animProgress * Math.PI * 2;
+    ctx.ellipse(cx, cy, rx, ry, 0, 0, endAngle);
+    ctx.stroke();
+    if (animProgress > 0.5) {
+      ctx.shadowColor = color;
+      ctx.shadowBlur = 8;
+      ctx.globalAlpha = ann.opacity * 0.3;
+      ctx.beginPath();
+      ctx.ellipse(cx, cy, rx, ry, 0, 0, Math.PI * 2);
+      ctx.stroke();
+    }
+    ctx.restore();
+  }
+  drawHighlight(ann) {
+    const { target, color, animProgress } = ann;
+    const ctx = this.ctx;
+    const pad = 4;
+    ctx.save();
+    ctx.fillStyle = color;
+    ctx.globalAlpha = ann.opacity * animProgress;
+    const r = 4;
+    const x = target.x - pad;
+    const y = target.y - pad;
+    const w = target.width + pad * 2;
+    const h = target.height + pad * 2;
+    ctx.beginPath();
+    ctx.moveTo(x + r, y);
+    ctx.lineTo(x + w - r, y);
+    ctx.quadraticCurveTo(x + w, y, x + w, y + r);
+    ctx.lineTo(x + w, y + h - r);
+    ctx.quadraticCurveTo(x + w, y + h, x + w - r, y + h);
+    ctx.lineTo(x + r, y + h);
+    ctx.quadraticCurveTo(x, y + h, x, y + h - r);
+    ctx.lineTo(x, y + r);
+    ctx.quadraticCurveTo(x, y, x + r, y);
+    ctx.closePath();
+    ctx.fill();
+    ctx.restore();
+  }
+  drawArrow(ann) {
+    const { target, color, thickness, animProgress } = ann;
+    const ctx = this.ctx;
+    const endX = target.x + target.width / 2;
+    const endY = target.y + target.height / 2;
+    const startX = endX + 80;
+    const startY = endY - 60;
+    const progress = easeOutCubic(animProgress);
+    const currentX = startX + (endX - startX) * progress;
+    const currentY = startY + (endY - startY) * progress;
+    ctx.save();
+    ctx.strokeStyle = color;
+    ctx.fillStyle = color;
+    ctx.lineWidth = thickness;
+    ctx.globalAlpha = ann.opacity;
+    ctx.beginPath();
+    ctx.moveTo(startX, startY);
+    ctx.lineTo(currentX, currentY);
+    ctx.stroke();
+    if (progress > 0.8) {
+      const angle = Math.atan2(endY - startY, endX - startX);
+      const headLen = 12;
+      ctx.beginPath();
+      ctx.moveTo(currentX, currentY);
+      ctx.lineTo(
+        currentX - headLen * Math.cos(angle - 0.5),
+        currentY - headLen * Math.sin(angle - 0.5)
+      );
+      ctx.lineTo(
+        currentX - headLen * Math.cos(angle + 0.5),
+        currentY - headLen * Math.sin(angle + 0.5)
+      );
+      ctx.closePath();
+      ctx.fill();
+    }
+    ctx.restore();
+  }
+  drawText(ann) {
+    const { target, color, text, animProgress } = ann;
+    if (!text) return;
+    const ctx = this.ctx;
+    const x = target.x + target.width + 12;
+    const y = target.y + target.height / 2;
+    ctx.save();
+    ctx.globalAlpha = ann.opacity * animProgress;
+    ctx.font = '600 14px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif';
+    const metrics = ctx.measureText(text);
+    const padX = 10;
+    const padY = 6;
+    const bgW = metrics.width + padX * 2;
+    const bgH = 24 + padY;
+    ctx.fillStyle = "#1a1a1a";
+    ctx.beginPath();
+    const r = 6;
+    ctx.moveTo(x + r, y - bgH / 2);
+    ctx.lineTo(x + bgW - r, y - bgH / 2);
+    ctx.quadraticCurveTo(x + bgW, y - bgH / 2, x + bgW, y - bgH / 2 + r);
+    ctx.lineTo(x + bgW, y + bgH / 2 - r);
+    ctx.quadraticCurveTo(x + bgW, y + bgH / 2, x + bgW - r, y + bgH / 2);
+    ctx.lineTo(x + r, y + bgH / 2);
+    ctx.quadraticCurveTo(x, y + bgH / 2, x, y + bgH / 2 - r);
+    ctx.lineTo(x, y - bgH / 2 + r);
+    ctx.quadraticCurveTo(x, y - bgH / 2, x + r, y - bgH / 2);
+    ctx.closePath();
+    ctx.fill();
+    ctx.fillStyle = color === "#1a1a1a" ? "#ffffff" : color;
+    ctx.textBaseline = "middle";
+    ctx.fillText(text, x + padX, y);
+    ctx.restore();
+  }
+  drawZoomIndicator(ann) {
+    const { target, color, thickness, animProgress } = ann;
+    const ctx = this.ctx;
+    ctx.save();
+    ctx.strokeStyle = color;
+    ctx.lineWidth = thickness;
+    ctx.globalAlpha = ann.opacity * (1 - animProgress * 0.3);
+    ctx.setLineDash([6, 4]);
+    const pad = 12;
+    const x = target.x - pad;
+    const y = target.y - pad;
+    const w = target.width + pad * 2;
+    const h = target.height + pad * 2;
+    ctx.strokeRect(x, y, w, h);
+    const iconX = x + w + 6;
+    const iconY = y - 6;
+    ctx.setLineDash([]);
+    ctx.beginPath();
+    ctx.arc(iconX, iconY, 8, 0, Math.PI * 2);
+    ctx.stroke();
+    ctx.beginPath();
+    ctx.moveTo(iconX + 6, iconY + 6);
+    ctx.lineTo(iconX + 12, iconY + 12);
+    ctx.stroke();
+    ctx.restore();
+  }
+  destroy() {
+    this.stopAnimation();
+    window.removeEventListener("resize", this.resize);
+    this.canvas.remove();
+  }
+};
+function easeOutCubic(t) {
+  return 1 - Math.pow(1 - t, 3);
+}
+
+// src/core/recorder.ts
+var DEFAULT_OPTIONS = {
+  format: "webm",
+  fps: 30,
+  videoBitrate: 5e6,
+  width: 1280,
+  height: 720,
+  audio: false,
+  backgroundColor: "#ffffff",
+  devicePixelRatio: 1
+};
+var VideoRecorder = class {
+  constructor(options) {
+    this.mediaRecorder = null;
+    this.chunks = [];
+    this.canvas = null;
+    this.stream = null;
+    this.captureInterval = null;
+    this.options = { ...DEFAULT_OPTIONS, ...options };
+  }
+  /**
+   * Start recording from a canvas element.
+   */
+  async startFromCanvas(canvas) {
+    this.canvas = canvas;
+    this.chunks = [];
+    const stream = canvas.captureStream(this.options.fps);
+    this.stream = stream;
+    const mimeType = this.options.format === "mp4" ? "video/mp4" : "video/webm;codecs=vp9";
+    const supportedMime = MediaRecorder.isTypeSupported(mimeType) ? mimeType : MediaRecorder.isTypeSupported("video/webm;codecs=vp8") ? "video/webm;codecs=vp8" : "video/webm";
+    this.mediaRecorder = new MediaRecorder(stream, {
+      mimeType: supportedMime,
+      videoBitsPerSecond: this.options.videoBitrate
+    });
+    this.mediaRecorder.ondataavailable = (e) => {
+      if (e.data.size > 0) {
+        this.chunks.push(e.data);
+      }
+    };
+    this.mediaRecorder.start(100);
+  }
+  /**
+   * Start recording a DOM element by continuously painting it to a canvas.
+   */
+  async startFromElement(element) {
+    const canvas = document.createElement("canvas");
+    const dpr = this.options.devicePixelRatio;
+    canvas.width = this.options.width * dpr;
+    canvas.height = this.options.height * dpr;
+    await this.startFromCanvas(canvas);
+    const ctx = canvas.getContext("2d");
+    this.captureInterval = window.setInterval(async () => {
+      try {
+        const data = await domToImage(element, this.options.width, this.options.height);
+        if (data) {
+          ctx.clearRect(0, 0, canvas.width, canvas.height);
+          ctx.drawImage(data, 0, 0, canvas.width, canvas.height);
+        }
+      } catch {
+      }
+    }, 1e3 / this.options.fps);
+  }
+  /**
+   * Stop recording and return the video blob.
+   */
+  async stop() {
+    if (this.captureInterval) {
+      clearInterval(this.captureInterval);
+      this.captureInterval = null;
+    }
+    return new Promise((resolve, reject) => {
+      if (!this.mediaRecorder) {
+        reject(new Error("No active recording"));
+        return;
+      }
+      this.mediaRecorder.onstop = () => {
+        const mimeType = this.mediaRecorder.mimeType || "video/webm";
+        const blob = new Blob(this.chunks, { type: mimeType });
+        this.cleanup();
+        resolve(blob);
+      };
+      this.mediaRecorder.onerror = (e) => {
+        this.cleanup();
+        reject(new Error(`Recording error: ${e}`));
+      };
+      if (this.mediaRecorder.state !== "inactive") {
+        this.mediaRecorder.stop();
+      } else {
+        const blob = new Blob(this.chunks, { type: "video/webm" });
+        this.cleanup();
+        resolve(blob);
+      }
+    });
+  }
+  cleanup() {
+    if (this.stream) {
+      this.stream.getTracks().forEach((t) => t.stop());
+      this.stream = null;
+    }
+    this.mediaRecorder = null;
+    this.canvas = null;
+  }
+  get isRecording() {
+    return this.mediaRecorder?.state === "recording";
+  }
+};
+async function domToImage(element, width, height) {
+  const clone = element.cloneNode(true);
+  inlineStyles(element, clone);
+  const html = new XMLSerializer().serializeToString(clone);
+  const svg = `
+    <svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}">
+      <foreignObject width="100%" height="100%">
+        <div xmlns="http://www.w3.org/1999/xhtml" style="width:${width}px;height:${height}px;overflow:hidden;">
+          ${html}
+        </div>
+      </foreignObject>
+    </svg>
+  `;
+  const svgBlob = new Blob([svg], { type: "image/svg+xml;charset=utf-8" });
+  const url = URL.createObjectURL(svgBlob);
+  return new Promise((resolve) => {
+    const img = new Image();
+    img.onload = () => {
+      URL.revokeObjectURL(url);
+      resolve(img);
+    };
+    img.onerror = () => {
+      URL.revokeObjectURL(url);
+      resolve(null);
+    };
+    img.src = url;
+  });
+}
+function inlineStyles(source, target) {
+  const computed = window.getComputedStyle(source);
+  const inline = Array.from(computed).map((prop) => `${prop}:${computed.getPropertyValue(prop)}`).join(";");
+  target.setAttribute("style", inline);
+  const sourceChildren = source.children;
+  const targetChildren = target.children;
+  for (let i = 0; i < sourceChildren.length; i++) {
+    if (targetChildren[i]) {
+      inlineStyles(sourceChildren[i], targetChildren[i]);
+    }
+  }
+}
+
+// src/core/zoom.ts
+var ZoomController = class {
+  constructor(container) {
+    this.currentZoom = 1;
+    this.currentTranslateX = 0;
+    this.currentTranslateY = 0;
+    this.container = container;
+    this.container.style.transformOrigin = "0 0";
+    this.container.style.transition = "transform 0.6s cubic-bezier(0.4, 0, 0.2, 1)";
+  }
+  /**
+   * Zoom into a specific element.
+   */
+  async zoomTo(target, level = 2, duration = 600) {
+    const containerRect = this.container.getBoundingClientRect();
+    const targetCenterX = target.x - containerRect.x + target.width / 2;
+    const targetCenterY = target.y - containerRect.y + target.height / 2;
+    const viewportCenterX = containerRect.width / 2;
+    const viewportCenterY = containerRect.height / 2;
+    this.currentTranslateX = viewportCenterX - targetCenterX * level;
+    this.currentTranslateY = viewportCenterY - targetCenterY * level;
+    this.currentZoom = level;
+    this.container.style.transition = `transform ${duration}ms cubic-bezier(0.4, 0, 0.2, 1)`;
+    this.container.style.transform = `translate(${this.currentTranslateX}px, ${this.currentTranslateY}px) scale(${this.currentZoom})`;
+    return new Promise((resolve) => setTimeout(resolve, duration + 50));
+  }
+  /**
+   * Reset zoom to default.
+   */
+  async resetZoom(duration = 500) {
+    this.currentZoom = 1;
+    this.currentTranslateX = 0;
+    this.currentTranslateY = 0;
+    this.container.style.transition = `transform ${duration}ms cubic-bezier(0.4, 0, 0.2, 1)`;
+    this.container.style.transform = "translate(0, 0) scale(1)";
+    return new Promise((resolve) => setTimeout(resolve, duration + 50));
+  }
+  get zoom() {
+    return this.currentZoom;
+  }
+  destroy() {
+    this.container.style.transform = "";
+    this.container.style.transition = "";
+    this.container.style.transformOrigin = "";
+  }
+};
+
+// src/utils/cursor.ts
+var VirtualCursor = class {
+  constructor(container) {
+    this.x = 0;
+    this.y = 0;
+    this.visible = false;
+    this.el = document.createElement("div");
+    this.el.innerHTML = `
+      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <g filter="url(#shadow)">
+          <path d="M5 3L19 12.5L12.5 13.5L9.5 20L5 3Z" fill="white" stroke="black" stroke-width="1.2"/>
+        </g>
+        <defs>
+          <filter id="shadow" x="0" y="0" width="28" height="28" filterUnits="userSpaceOnUse">
+            <feDropShadow dx="1" dy="1" stdDeviation="1.5" flood-opacity="0.3"/>
+          </filter>
+        </defs>
+      </svg>
+    `;
+    this.el.style.cssText = `
+      position: absolute;
+      pointer-events: none;
+      z-index: 1000000;
+      transform: translate(-2px, -2px);
+      opacity: 0;
+      transition: opacity 0.2s ease;
+    `;
+    container.style.position = "relative";
+    container.appendChild(this.el);
+  }
+  show() {
+    this.visible = true;
+    this.el.style.opacity = "1";
+  }
+  hide() {
+    this.visible = false;
+    this.el.style.opacity = "0";
+  }
+  /**
+   * Smoothly move cursor to a position.
+   */
+  async moveTo(targetX, targetY, duration = 600) {
+    if (!this.visible) this.show();
+    const startX = this.x;
+    const startY = this.y;
+    const startTime = performance.now();
+    return new Promise((resolve) => {
+      const animate = (now) => {
+        const elapsed = now - startTime;
+        const progress = Math.min(1, elapsed / duration);
+        const eased = easeInOutCubic(progress);
+        this.x = startX + (targetX - startX) * eased;
+        this.y = startY + (targetY - startY) * eased;
+        this.el.style.left = `${this.x}px`;
+        this.el.style.top = `${this.y}px`;
+        if (progress < 1) {
+          requestAnimationFrame(animate);
+        } else {
+          resolve();
+        }
+      };
+      requestAnimationFrame(animate);
+    });
+  }
+  /**
+   * Move to center of a DOM element.
+   */
+  async moveToElement(el, duration = 600) {
+    const rect = el.getBoundingClientRect();
+    const container = this.el.parentElement.getBoundingClientRect();
+    const targetX = rect.x - container.x + rect.width / 2;
+    const targetY = rect.y - container.y + rect.height / 2;
+    return this.moveTo(targetX, targetY, duration);
+  }
+  /**
+   * Click animation at current position.
+   */
+  async clickAnimation() {
+    const ripple = document.createElement("div");
+    ripple.style.cssText = `
+      position: absolute;
+      left: ${this.x}px;
+      top: ${this.y}px;
+      width: 20px;
+      height: 20px;
+      border-radius: 50%;
+      background: rgba(0, 122, 255, 0.3);
+      transform: translate(-50%, -50%) scale(0);
+      pointer-events: none;
+      z-index: 999999;
+    `;
+    this.el.parentElement.appendChild(ripple);
+    ripple.animate(
+      [
+        { transform: "translate(-50%, -50%) scale(0)", opacity: 0.6 },
+        { transform: "translate(-50%, -50%) scale(3)", opacity: 0 }
+      ],
+      { duration: 400, easing: "ease-out" }
+    );
+    this.el.style.transform = "translate(-2px, -2px) scale(0.85)";
+    await sleep(100);
+    this.el.style.transform = "translate(-2px, -2px) scale(1)";
+    await sleep(300);
+    ripple.remove();
+  }
+  destroy() {
+    this.el.remove();
+  }
+};
+function easeInOutCubic(t) {
+  return t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
+}
+function sleep(ms) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+// src/utils/element-resolver.ts
+function resolveElement(selector, root = document.documentElement) {
+  const hasTextMatch = selector.match(/^(.+?):has-text\(["'](.+?)["']\)$/);
+  if (hasTextMatch) {
+    const [, baseSelector, searchText] = hasTextMatch;
+    return findByText(baseSelector, searchText, root);
+  }
+  const selectors = selector.split(",").map((s) => s.trim());
+  for (const sel of selectors) {
+    const subTextMatch = sel.match(/^(.+?):has-text\(["'](.+?)["']\)$/);
+    if (subTextMatch) {
+      const [, baseSel, txt] = subTextMatch;
+      const found = findByText(baseSel, txt, root);
+      if (found) return found;
+      continue;
+    }
+    try {
+      const el = root.querySelector(sel);
+      if (el) return el;
+    } catch {
+    }
+  }
+  return findByAccessibility(selector, root);
+}
+function findByText(baseSelector, text, root) {
+  const lower = text.toLowerCase();
+  try {
+    const candidates = root.querySelectorAll(baseSelector);
+    for (const el of candidates) {
+      const content = el.textContent?.trim().toLowerCase();
+      if (content && (content === lower || content.includes(lower))) {
+        return el;
+      }
+    }
+  } catch {
+  }
+  return null;
+}
+function findByAccessibility(text, root) {
+  const cleaned = text.replace(/^["']|["']$/g, "").replace(/^the\s+/i, "").trim().toLowerCase();
+  const ariaElements = root.querySelectorAll("[aria-label]");
+  for (const el of ariaElements) {
+    const label = el.getAttribute("aria-label")?.toLowerCase();
+    if (label && label.includes(cleaned)) return el;
+  }
+  const placeholders = root.querySelectorAll("[placeholder]");
+  for (const el of placeholders) {
+    const ph = el.getAttribute("placeholder")?.toLowerCase();
+    if (ph && ph.includes(cleaned)) return el;
+  }
+  const allElements = root.querySelectorAll("button, a, label, h1, h2, h3, h4, h5, h6, [role]");
+  for (const el of allElements) {
+    const content = el.textContent?.trim().toLowerCase();
+    if (content && content.includes(cleaned)) return el;
+  }
+  return null;
+}
+function getElementRect(el) {
+  return el.getBoundingClientRect();
+}
+function scrollIntoView(el, smooth = true) {
+  return new Promise((resolve) => {
+    el.scrollIntoView({ behavior: smooth ? "smooth" : "auto", block: "center", inline: "center" });
+    setTimeout(resolve, smooth ? 500 : 50);
+  });
+}
+function simulateClick(el) {
+  const events = ["mouseenter", "mouseover", "mousedown", "mouseup", "click"];
+  for (const eventType of events) {
+    const rect = el.getBoundingClientRect();
+    const event = new MouseEvent(eventType, {
+      bubbles: true,
+      cancelable: true,
+      view: window,
+      clientX: rect.x + rect.width / 2,
+      clientY: rect.y + rect.height / 2
+    });
+    el.dispatchEvent(event);
+  }
+}
+async function simulateType(el, text, speed = 50) {
+  if (el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement) {
+    el.focus();
+    el.value = "";
+    for (let i = 0; i < text.length; i++) {
+      const char = text[i];
+      el.value += char;
+      el.dispatchEvent(new InputEvent("input", { bubbles: true, data: char, inputType: "insertText" }));
+      el.dispatchEvent(new Event("change", { bubbles: true }));
+      await sleep2(speed + Math.random() * speed * 0.5);
+    }
+  }
+}
+function sleep2(ms) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+// src/parsers/natural-language.ts
+var PATTERNS = [
+  // ── Click Actions ──
+  {
+    pattern: /(?:click|tap|press)\s+(?:on\s+)?(?:the\s+)?["'](.+?)["']\s*button/i,
+    build: (m) => ({ type: "click", target: `button:has-text("${m[1]}")` }),
+    confidence: 0.95
+  },
+  {
+    pattern: /(?:click|tap|press)\s+(?:on\s+)?(?:the\s+)?(.+?)\s+button/i,
+    build: (m) => ({ type: "click", target: `button:has-text("${m[1]}")` }),
+    confidence: 0.9
+  },
+  {
+    pattern: /(?:click|tap|press)\s+(?:on\s+)?(?:the\s+)?["'](.+?)["']\s*link/i,
+    build: (m) => ({ type: "click", target: `a:has-text("${m[1]}")` }),
+    confidence: 0.95
+  },
+  {
+    pattern: /(?:click|tap|press)\s+(?:on\s+)?(?:the\s+)?(.+?)\s+link/i,
+    build: (m) => ({ type: "click", target: `a:has-text("${m[1]}")` }),
+    confidence: 0.85
+  },
+  {
+    pattern: /(?:click|tap|press)\s+(?:on\s+)?(?:the\s+)?(.+)/i,
+    build: (m) => ({ type: "click", target: resolveSelector(m[1]) }),
+    confidence: 0.75
+  },
+  // ── Type / Input Actions ──
+  {
+    pattern: /(?:type|enter|input|fill(?:\s+in)?)\s+["'](.+?)["']\s+(?:in(?:to)?|on)\s+(?:the\s+)?(.+?)(?:\s+(?:field|input|box|area))?$/i,
+    build: (m) => ({ type: "type", value: m[1], target: resolveInputSelector(m[2]) }),
+    confidence: 0.95
+  },
+  {
+    pattern: /(?:type|enter|input|fill(?:\s+in)?)\s+["'](.+?)["']\s+(?:in(?:to)?|on)\s+(?:the\s+)?(.+)/i,
+    build: (m) => ({ type: "type", value: m[1], target: resolveInputSelector(m[2]) }),
+    confidence: 0.85
+  },
+  {
+    pattern: /(?:type|enter|input)\s+["'](.+?)["']/i,
+    build: (m) => ({ type: "type", value: m[1] }),
+    confidence: 0.7
+  },
+  // ── Zoom Actions ──
+  {
+    pattern: /zoom\s+(?:in(?:to)?|on)\s+(?:the\s+)?(.+?)(?:\s+(?:to|at|by)\s+(\d+)%?)?$/i,
+    build: (m) => ({
+      type: "zoom",
+      target: resolveSelector(m[1]),
+      zoomLevel: m[2] ? parseInt(m[2]) / 100 : 2
+    }),
+    confidence: 0.95
+  },
+  {
+    pattern: /(?:magnify|enlarge|focus\s+on)\s+(?:the\s+)?(.+)/i,
+    build: (m) => ({ type: "zoom", target: resolveSelector(m[1]), zoomLevel: 2 }),
+    confidence: 0.85
+  },
+  {
+    pattern: /zoom\s+out/i,
+    build: () => ({ type: "zoom", zoomLevel: 1 }),
+    confidence: 0.95
+  },
+  // ── Circle / Highlight Actions ──
+  {
+    pattern: /(?:circle|ring|outline)\s+(?:the\s+)?(.+?)(?:\s+(?:in|with)\s+(\w+))?$/i,
+    build: (m) => ({
+      type: "circle",
+      target: resolveSelector(m[1]),
+      color: m[2] || "#ff3b30"
+    }),
+    confidence: 0.95
+  },
+  {
+    pattern: /(?:draw\s+a\s+circle\s+(?:around|on))\s+(?:the\s+)?(.+)/i,
+    build: (m) => ({ type: "circle", target: resolveSelector(m[1]), color: "#ff3b30" }),
+    confidence: 0.9
+  },
+  {
+    pattern: /highlight\s+(?:the\s+)?(.+?)(?:\s+(?:in|with)\s+(\w+))?$/i,
+    build: (m) => ({
+      type: "highlight",
+      target: resolveSelector(m[1]),
+      color: m[2] || "#ffcc02"
+    }),
+    confidence: 0.95
+  },
+  // ── Arrow Actions ──
+  {
+    pattern: /(?:draw\s+)?(?:an?\s+)?arrow\s+(?:to|towards|pointing\s+(?:to|at))\s+(?:the\s+)?(.+)/i,
+    build: (m) => ({ type: "arrow", target: resolveSelector(m[1]), color: "#ff3b30" }),
+    confidence: 0.9
+  },
+  // ── Annotation / Text Actions ──
+  {
+    pattern: /(?:annotate|label|add\s+(?:a\s+)?(?:text|note|label))\s+["'](.+?)["']\s+(?:on|near|next\s+to|beside)\s+(?:the\s+)?(.+)/i,
+    build: (m) => ({ type: "annotate", value: m[1], target: resolveSelector(m[2]) }),
+    confidence: 0.9
+  },
+  {
+    pattern: /(?:show\s+(?:a\s+)?(?:tooltip|callout|note))\s+["'](.+?)["']\s+(?:on|near|at)\s+(?:the\s+)?(.+)/i,
+    build: (m) => ({ type: "annotate", value: m[1], target: resolveSelector(m[2]) }),
+    confidence: 0.85
+  },
+  // ── Scroll Actions ──
+  {
+    pattern: /scroll\s+(up|down)\s*(?:(\d+)\s*(?:px|pixels)?)?/i,
+    build: (m) => ({
+      type: "scroll",
+      value: m[1],
+      offset: { x: 0, y: m[2] ? parseInt(m[2]) : 300 }
+    }),
+    confidence: 0.9
+  },
+  {
+    pattern: /scroll\s+(?:to\s+)?(?:the\s+)?(.+)/i,
+    build: (m) => ({ type: "scroll", target: resolveSelector(m[1]) }),
+    confidence: 0.8
+  },
+  // ── Wait Actions ──
+  {
+    pattern: /(?:wait|pause|delay)\s+(?:for\s+)?(\d+(?:\.\d+)?)\s*(?:s(?:ec(?:ond)?s?)?|ms|milliseconds?)/i,
+    build: (m) => ({
+      type: "wait",
+      duration: m[0].includes("ms") ? parseInt(m[1]) : parseFloat(m[1]) * 1e3
+    }),
+    confidence: 0.95
+  },
+  {
+    pattern: /(?:wait|pause|delay)\s+(?:for\s+)?(\d+)/i,
+    build: (m) => ({ type: "wait", duration: parseInt(m[1]) * 1e3 }),
+    confidence: 0.8
+  },
+  // ── Hover Actions ──
+  {
+    pattern: /(?:hover|move\s+(?:the\s+)?(?:mouse|cursor))\s+(?:over|on(?:to)?)\s+(?:the\s+)?(.+)/i,
+    build: (m) => ({ type: "hover", target: resolveSelector(m[1]) }),
+    confidence: 0.9
+  },
+  // ── Navigate Actions ──
+  {
+    pattern: /(?:navigate|go)\s+to\s+(.+)/i,
+    build: (m) => ({ type: "navigate", value: m[1].trim() }),
+    confidence: 0.9
+  },
+  {
+    pattern: /(?:open|visit)\s+(?:the\s+)?(?:page\s+)?(.+)/i,
+    build: (m) => ({ type: "navigate", value: m[1].trim() }),
+    confidence: 0.8
+  },
+  // ── Screenshot Actions ──
+  {
+    pattern: /(?:take\s+a\s+)?screenshot/i,
+    build: () => ({ type: "screenshot" }),
+    confidence: 0.95
+  }
+];
+function resolveSelector(naturalDesc) {
+  const desc = naturalDesc.trim().toLowerCase();
+  if (desc.startsWith("#") || desc.startsWith(".") || desc.startsWith("[")) {
+    return naturalDesc.trim();
+  }
+  const elementMap = {
+    "search bar": 'input[type="search"], input[placeholder*="search" i]',
+    "search input": 'input[type="search"], input[placeholder*="search" i]',
+    "search box": 'input[type="search"], input[placeholder*="search" i]',
+    "email field": 'input[type="email"], input[placeholder*="email" i]',
+    "email input": 'input[type="email"], input[placeholder*="email" i]',
+    "password field": 'input[type="password"]',
+    "password input": 'input[type="password"]',
+    "username field": 'input[name*="user" i], input[placeholder*="user" i]',
+    "submit button": 'button[type="submit"], input[type="submit"]',
+    "login button": 'button:has-text("Log in"), button:has-text("Login"), button:has-text("Sign in")',
+    "signup button": 'button:has-text("Sign up"), button:has-text("Register")',
+    "navbar": 'nav, [role="navigation"]',
+    "navigation": 'nav, [role="navigation"]',
+    "header": 'header, [role="banner"]',
+    "footer": 'footer, [role="contentinfo"]',
+    "sidebar": 'aside, [role="complementary"]',
+    "main content": 'main, [role="main"]',
+    "logo": '[class*="logo" i], img[alt*="logo" i]',
+    "menu": '[role="menu"], nav ul',
+    "dropdown": '[role="listbox"], select, [class*="dropdown" i]',
+    "modal": '[role="dialog"], [class*="modal" i]',
+    "close button": 'button[aria-label="Close"], button:has-text("\xD7"), [class*="close" i]'
+  };
+  for (const [key, selector] of Object.entries(elementMap)) {
+    if (desc === key || desc === `the ${key}`) {
+      return selector;
+    }
+  }
+  const buttonMatch = desc.match(/^(?:the\s+)?(.+?)\s+button$/);
+  if (buttonMatch) {
+    return `button:has-text("${buttonMatch[1]}")`;
+  }
+  const inputMatch = desc.match(/^(?:the\s+)?(.+?)\s+(?:input|field|box|area)$/);
+  if (inputMatch) {
+    return resolveInputSelector(inputMatch[1]);
+  }
+  const linkMatch = desc.match(/^(?:the\s+)?(.+?)\s+link$/);
+  if (linkMatch) {
+    return `a:has-text("${linkMatch[1]}")`;
+  }
+  const cleaned = desc.replace(/^the\s+/, "");
+  return `[aria-label*="${cleaned}" i], [placeholder*="${cleaned}" i], [title*="${cleaned}" i], :has-text("${cleaned}")`;
+}
+function resolveInputSelector(name) {
+  const n = name.trim().toLowerCase().replace(/^the\s+/, "");
+  return `input[name*="${n}" i], input[placeholder*="${n}" i], textarea[name*="${n}" i], textarea[placeholder*="${n}" i], [aria-label*="${n}" i]`;
+}
+var COLOR_MAP = {
+  red: "#ff3b30",
+  blue: "#007aff",
+  green: "#34c759",
+  yellow: "#ffcc02",
+  orange: "#ff9500",
+  purple: "#af52de",
+  pink: "#ff2d55",
+  white: "#ffffff",
+  black: "#000000",
+  gray: "#8e8e93",
+  grey: "#8e8e93",
+  cyan: "#32ade6",
+  teal: "#5ac8fa"
+};
+function resolveColor(colorStr) {
+  if (!colorStr) return void 0;
+  if (colorStr.startsWith("#") || colorStr.startsWith("rgb")) return colorStr;
+  return COLOR_MAP[colorStr.toLowerCase()] || colorStr;
+}
+function parseInstruction(text) {
+  const trimmed = text.trim();
+  for (const matcher of PATTERNS) {
+    const match = trimmed.match(matcher.pattern);
+    if (match) {
+      const partial = matcher.build(match);
+      const action = {
+        type: partial.type,
+        ...partial,
+        color: resolveColor(partial.color)
+      };
+      return { raw: trimmed, action, confidence: matcher.confidence };
+    }
+  }
+  return {
+    raw: trimmed,
+    action: { type: "click", target: resolveSelector(trimmed) },
+    confidence: 0.3
+  };
+}
+function parseNaturalLanguageScenario(script, options) {
+  const lines = script.split(/[\n;]|(?:\d+\.\s+)/).map((l) => l.trim()).filter((l) => l.length > 0 && !l.startsWith("//") && !l.startsWith("#"));
+  const actions = [];
+  const lowConfidence = [];
+  for (const line of lines) {
+    const parsed = parseInstruction(line);
+    actions.push(parsed.action);
+    if (parsed.confidence < 0.5) {
+      lowConfidence.push({ line, confidence: parsed.confidence });
+    }
+  }
+  if (lowConfidence.length > 0) {
+    console.warn(
+      `[scenecap] ${lowConfidence.length} instruction(s) had low parse confidence:`,
+      lowConfidence
+    );
+  }
+  return {
+    name: options?.name || "Untitled Scenario",
+    description: options?.description,
+    startUrl: options?.startUrl,
+    viewportWidth: 1280,
+    viewportHeight: 720,
+    actions
+  };
+}
+
+// src/core/runner.ts
+var DEFAULT_CONFIG = {
+  recording: {
+    format: "webm",
+    fps: 30,
+    videoBitrate: 5e6,
+    width: 1280,
+    height: 720,
+    audio: false,
+    backgroundColor: "#ffffff",
+    devicePixelRatio: typeof window !== "undefined" ? window.devicePixelRatio : 1
+  },
+  annotations: {
+    circleColor: "#ff3b30",
+    highlightColor: "#ffcc02",
+    arrowColor: "#ff3b30",
+    textColor: "#1a1a1a",
+    thickness: 3,
+    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+    fontSize: 14
+  },
+  animation: {
+    defaultDuration: 800,
+    defaultEasing: "ease-in-out",
+    zoomDuration: 600
+  }
+};
+var ScenarioRunner = class {
+  constructor(config) {
+    this.session = null;
+    // Runtime components (created per-run)
+    this.overlay = null;
+    this.recorder = null;
+    this.zoom = null;
+    this.cursor = null;
+    this.config = mergeDeep(DEFAULT_CONFIG, config || {});
+    this.callbacks = config?.callbacks || {};
+  }
+  // ─── Public API ─────────────────────────────────────────────
+  /**
+   * Record a scenario described in natural language.
+   *
+   * @param script - Natural language description of the scenario
+   * @param container - The DOM element to record
+   * @param options - Additional scenario options
+   * @returns The recorded video as a Blob
+   *
+   * @example
+   * ```ts
+   * const blob = await runner.record(`
+   *   Click on the "Sign Up" button
+   *   Type "john@email.com" in the email field
+   *   Zoom in on the submit button
+   *   Circle the success message in green
+   * `, document.getElementById('app')!);
+   * ```
+   */
+  async record(script, container, options) {
+    const scenario = parseNaturalLanguageScenario(script, options);
+    return this.recordScenario(scenario, container);
+  }
+  /**
+   * Record a structured scenario object.
+   */
+  async recordScenario(scenario, container) {
+    this.session = {
+      id: generateId(),
+      scenario,
+      options: this.config.recording,
+      status: "preparing",
+      progress: 0
+    };
+    try {
+      this.overlay = new AnnotationOverlay(container);
+      this.zoom = new ZoomController(container);
+      this.cursor = new VirtualCursor(container);
+      this.recorder = new VideoRecorder(this.config.recording);
+      this.session.status = "recording";
+      await this.recorder.startFromElement(container);
+      await sleep3(500);
+      const total = scenario.actions.length;
+      for (let i = 0; i < total; i++) {
+        const action = scenario.actions[i];
+        this.callbacks.onActionStart?.(action, i);
+        if (action.delay) {
+          await sleep3(action.delay);
+        }
+        await this.executeAction(action, container);
+        this.session.progress = (i + 1) / total * 100;
+        this.callbacks.onProgress?.(this.session.progress);
+        this.callbacks.onActionComplete?.(action, i);
+        await sleep3(300);
+      }
+      await sleep3(1e3);
+      this.session.status = "processing";
+      const blob = await this.recorder.stop();
+      this.cleanup();
+      this.session.status = "complete";
+      this.session.result = blob;
+      this.callbacks.onComplete?.(blob);
+      return blob;
+    } catch (error) {
+      this.session.status = "error";
+      this.session.error = error.message;
+      this.cleanup();
+      this.callbacks.onError?.(error);
+      throw error;
+    }
+  }
+  /**
+   * Parse a natural language script without recording (for previewing).
+   */
+  parse(script) {
+    return parseNaturalLanguageScenario(script);
+  }
+  /**
+   * Get current session info.
+   */
+  getSession() {
+    return this.session;
+  }
+  // ─── Action Execution ──────────────────────────────────────
+  async executeAction(action, container) {
+    const duration = action.duration || this.config.animation?.defaultDuration || 800;
+    let target = null;
+    if (action.target) {
+      target = resolveElement(action.target, container);
+      if (!target && action.type !== "wait" && action.type !== "navigate") {
+        console.warn(`[scenecap] Element not found: ${action.target}`);
+        return;
+      }
+    }
+    switch (action.type) {
+      case "click": {
+        if (!target) return;
+        await scrollIntoView(target);
+        await this.cursor?.moveToElement(target, 500);
+        await this.cursor?.clickAnimation();
+        simulateClick(target);
+        await sleep3(200);
+        break;
+      }
+      case "type": {
+        if (!target) return;
+        await scrollIntoView(target);
+        await this.cursor?.moveToElement(target, 500);
+        await this.cursor?.clickAnimation();
+        simulateClick(target);
+        if (action.value) {
+          await simulateType(target, action.value, 60);
+        }
+        break;
+      }
+      case "hover": {
+        if (!target) return;
+        await scrollIntoView(target);
+        await this.cursor?.moveToElement(target, 600);
+        target.dispatchEvent(new MouseEvent("mouseenter", { bubbles: true }));
+        target.dispatchEvent(new MouseEvent("mouseover", { bubbles: true }));
+        await sleep3(duration);
+        break;
+      }
+      case "scroll": {
+        if (target) {
+          await scrollIntoView(target, true);
+        } else if (action.offset) {
+          const dir = action.value === "up" ? -1 : 1;
+          container.scrollBy({ top: action.offset.y * dir, behavior: "smooth" });
+          await sleep3(500);
+        }
+        break;
+      }
+      case "zoom": {
+        if (action.zoomLevel === 1 || !action.target) {
+          await this.zoom?.resetZoom(duration);
+          this.overlay?.clear();
+        } else if (target) {
+          const rect = getElementRect(target);
+          this.overlay?.addZoomIndicator(`zoom-${Date.now()}`, rect);
+          await this.zoom?.zoomTo(rect, action.zoomLevel || 2, duration);
+          await sleep3(300);
+        }
+        break;
+      }
+      case "circle": {
+        if (!target) return;
+        await scrollIntoView(target);
+        const rect = getElementRect(target);
+        const id = `circle-${Date.now()}`;
+        this.overlay?.addCircle(
+          id,
+          rect,
+          action.color || this.config.annotations?.circleColor,
+          action.thickness || this.config.annotations?.thickness
+        );
+        await sleep3(duration);
+        break;
+      }
+      case "highlight": {
+        if (!target) return;
+        await scrollIntoView(target);
+        const rect = getElementRect(target);
+        const id = `hl-${Date.now()}`;
+        this.overlay?.addHighlight(
+          id,
+          rect,
+          action.color || this.config.annotations?.highlightColor
+        );
+        await sleep3(duration);
+        break;
+      }
+      case "arrow": {
+        if (!target) return;
+        await scrollIntoView(target);
+        const rect = getElementRect(target);
+        const id = `arrow-${Date.now()}`;
+        this.overlay?.addArrow(
+          id,
+          rect,
+          action.color || this.config.annotations?.arrowColor,
+          action.thickness || this.config.annotations?.thickness
+        );
+        await sleep3(duration);
+        break;
+      }
+      case "annotate": {
+        if (!target) return;
+        await scrollIntoView(target);
+        const rect = getElementRect(target);
+        const id = `text-${Date.now()}`;
+        this.overlay?.addText(
+          id,
+          rect,
+          action.value || "",
+          action.color || this.config.annotations?.textColor
+        );
+        await sleep3(duration);
+        break;
+      }
+      case "wait": {
+        await sleep3(action.duration || 1e3);
+        break;
+      }
+      case "navigate": {
+        if (action.value) {
+          window.location.href = action.value;
+          await sleep3(2e3);
+        }
+        break;
+      }
+      case "screenshot": {
+        const flash = document.createElement("div");
+        flash.style.cssText = `
+          position: fixed; top: 0; left: 0; right: 0; bottom: 0;
+          background: white; z-index: 9999999; pointer-events: none;
+        `;
+        document.body.appendChild(flash);
+        flash.animate([{ opacity: 0.7 }, { opacity: 0 }], { duration: 300 });
+        await sleep3(300);
+        flash.remove();
+        break;
+      }
+    }
+  }
+  // ─── Cleanup ────────────────────────────────────────────────
+  cleanup() {
+    this.overlay?.destroy();
+    this.zoom?.destroy();
+    this.cursor?.destroy();
+    this.overlay = null;
+    this.zoom = null;
+    this.cursor = null;
+  }
+};
+function generateId() {
+  return `sc_${Date.now()}_${Math.random().toString(36).slice(2, 8)}`;
+}
+function sleep3(ms) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+function mergeDeep(target, source) {
+  const result = { ...target };
+  for (const key of Object.keys(source)) {
+    if (source[key] && typeof source[key] === "object" && !Array.isArray(source[key]) && target[key] && typeof target[key] === "object") {
+      result[key] = mergeDeep(target[key], source[key]);
+    } else if (source[key] !== void 0) {
+      result[key] = source[key];
+    }
+  }
+  return result;
+}
+
+// src/hooks/useScenecap.ts
+import { useRef, useState, useCallback } from "react";
+function useScenecap(config) {
+  const containerRef = useRef(null);
+  const runnerRef = useRef(null);
+  const [isRecording, setIsRecording] = useState(false);
+  const [progress, setProgress] = useState(0);
+  const [session, setSession] = useState(null);
+  const [error, setError] = useState(null);
+  const [blob, setBlob] = useState(null);
+  const getRunner = useCallback(() => {
+    if (!runnerRef.current) {
+      runnerRef.current = new ScenarioRunner({
+        ...config,
+        callbacks: {
+          ...config?.callbacks,
+          onProgress: (p) => {
+            setProgress(p);
+            config?.callbacks?.onProgress?.(p);
+          },
+          onError: (err) => {
+            setError(err.message);
+            setIsRecording(false);
+            config?.callbacks?.onError?.(err);
+          },
+          onComplete: (b) => {
+            setBlob(b);
+            setIsRecording(false);
+            config?.callbacks?.onComplete?.(b);
+          }
+        }
+      });
+    }
+    return runnerRef.current;
+  }, [config]);
+  const record = useCallback(
+    async (script, options) => {
+      if (!containerRef.current) {
+        setError("Container ref not attached to a DOM element");
+        return null;
+      }
+      setIsRecording(true);
+      setProgress(0);
+      setError(null);
+      setBlob(null);
+      try {
+        const runner = getRunner();
+        const result = await runner.record(script, containerRef.current, options);
+        setSession(runner.getSession());
+        return result;
+      } catch (err) {
+        setError(err.message);
+        return null;
+      } finally {
+        setIsRecording(false);
+      }
+    },
+    [getRunner]
+  );
+  const recordScenario = useCallback(
+    async (scenario) => {
+      if (!containerRef.current) {
+        setError("Container ref not attached to a DOM element");
+        return null;
+      }
+      setIsRecording(true);
+      setProgress(0);
+      setError(null);
+      setBlob(null);
+      try {
+        const runner = getRunner();
+        const result = await runner.recordScenario(scenario, containerRef.current);
+        setSession(runner.getSession());
+        return result;
+      } catch (err) {
+        setError(err.message);
+        return null;
+      } finally {
+        setIsRecording(false);
+      }
+    },
+    [getRunner]
+  );
+  const parse = useCallback(
+    (script) => {
+      return getRunner().parse(script);
+    },
+    [getRunner]
+  );
+  const download = useCallback(
+    (filename = "scenecap-recording.webm") => {
+      if (!blob) {
+        console.warn("[scenecap] No recording to download");
+        return;
+      }
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = filename;
+      a.click();
+      URL.revokeObjectURL(url);
+    },
+    [blob]
+  );
+  return {
+    containerRef,
+    record,
+    recordScenario,
+    parse,
+    download,
+    isRecording,
+    progress,
+    session,
+    error,
+    blob
+  };
+}
+
+// src/index.ts
+function createScenecap(config) {
+  return new ScenarioRunner(config);
+}
+export {
+  AnnotationOverlay,
+  ScenarioRunner,
+  VideoRecorder,
+  VirtualCursor,
+  ZoomController,
+  createScenecap,
+  parseInstruction,
+  parseNaturalLanguageScenario,
+  resolveElement,
+  scrollIntoView,
+  simulateClick,
+  simulateType,
+  useScenecap
+};