quick-bug-reporter-react 1.0.0

package/dist/index.js

@@ -0,0 +1,3028 @@
+import html2canvas from 'html2canvas-pro';
+import { createContext, useState, useRef, useMemo, useEffect, useCallback, useContext } from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { Square, Camera, Crop, CircleDot, FilePenLine, TriangleAlert, ArrowRight, ArrowLeft, X } from 'lucide-react';
+import { cva } from 'class-variance-authority';
+import { Slot, Dialog as Dialog$1 } from 'radix-ui';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+// src/core/NetworkLogger.ts
+function resolveMethod(input, init) {
+  if (init?.method) {
+    return init.method;
+  }
+  if (typeof Request !== "undefined" && input instanceof Request) {
+    return input.method;
+  }
+  return "GET";
+}
+function resolveUrl(input) {
+  if (typeof input === "string") {
+    return input;
+  }
+  if (typeof URL !== "undefined" && input instanceof URL) {
+    return input.toString();
+  }
+  if (typeof Request !== "undefined" && input instanceof Request) {
+    return input.url;
+  }
+  return String(input);
+}
+function nowMs() {
+  if (typeof performance !== "undefined" && typeof performance.now === "function") {
+    return performance.now();
+  }
+  return Date.now();
+}
+var NetworkLogger = class {
+  constructor() {
+    this.originalFetch = null;
+    this.logs = [];
+    this.recording = false;
+  }
+  start() {
+    if (this.recording) {
+      return;
+    }
+    if (typeof globalThis.fetch !== "function") {
+      throw new Error("Fetch API is unavailable in this environment.");
+    }
+    this.originalFetch = globalThis.fetch;
+    const originalFetch = this.originalFetch;
+    globalThis.fetch = (async (input, init) => {
+      const started = nowMs();
+      const method = resolveMethod(input, init);
+      const url = resolveUrl(input);
+      const timestamp = (/* @__PURE__ */ new Date()).toISOString();
+      try {
+        const response = await originalFetch.call(globalThis, input, init);
+        this.logs.push({
+          method,
+          url,
+          status: response.status,
+          durationMs: Math.max(0, Math.round(nowMs() - started)),
+          timestamp
+        });
+        return response;
+      } catch (error) {
+        this.logs.push({
+          method,
+          url,
+          status: null,
+          durationMs: Math.max(0, Math.round(nowMs() - started)),
+          timestamp
+        });
+        throw error;
+      }
+    });
+    this.recording = true;
+  }
+  stop() {
+    if (!this.recording) {
+      return this.getLogs();
+    }
+    if (this.originalFetch) {
+      globalThis.fetch = this.originalFetch;
+    }
+    this.originalFetch = null;
+    this.recording = false;
+    return this.getLogs();
+  }
+  clear() {
+    this.logs = [];
+  }
+  getLogs() {
+    return [...this.logs];
+  }
+  isRecording() {
+    return this.recording;
+  }
+};
+
+// src/core/ScreenRecorder.ts
+var MIME_TYPES = ["video/webm;codecs=vp9,opus", "video/webm;codecs=vp8,opus", "video/webm"];
+function mapRecorderError(error) {
+  if (error instanceof DOMException) {
+    if (error.name === "NotAllowedError" || error.name === "SecurityError") {
+      return new Error("Screen or microphone permission was denied.");
+    }
+    if (error.name === "AbortError") {
+      return new Error("Recording setup was cancelled before it started.");
+    }
+    if (error.name === "NotFoundError") {
+      return new Error("No screen/tab or microphone source was found.");
+    }
+    if (error.name === "NotReadableError") {
+      return new Error("Unable to access the selected screen/tab or microphone.");
+    }
+    return new Error(error.message || "Failed to start recording.");
+  }
+  if (error instanceof Error) {
+    return error;
+  }
+  return new Error("Failed to start recording.");
+}
+function pickMimeType() {
+  if (typeof MediaRecorder === "undefined") {
+    return void 0;
+  }
+  return MIME_TYPES.find((mime) => MediaRecorder.isTypeSupported(mime));
+}
+var ScreenRecorder = class {
+  constructor() {
+    this.mediaRecorder = null;
+    this.displayStream = null;
+    this.microphoneStream = null;
+    this.mixedStream = null;
+    this.audioContext = null;
+    this.displayAudioStream = null;
+    this.microphoneAudioStream = null;
+    this.chunks = [];
+    this.recording = false;
+    this.stopPromise = null;
+    this.stopResolver = null;
+    this.lastBlob = null;
+    this.onEnded = null;
+  }
+  async start(options = {}) {
+    if (this.recording) {
+      return;
+    }
+    if (typeof navigator === "undefined" || !navigator.mediaDevices || typeof navigator.mediaDevices.getDisplayMedia !== "function" || typeof navigator.mediaDevices.getUserMedia !== "function" || typeof MediaRecorder === "undefined") {
+      throw new Error("This browser does not support screen and microphone recording.");
+    }
+    this.cleanupStreams();
+    this.resetStopPromise();
+    this.chunks = [];
+    this.lastBlob = null;
+    this.onEnded = options.onEnded ?? null;
+    try {
+      const displayOptions = {
+        video: {
+          frameRate: { ideal: 15, max: 24 },
+          width: { ideal: 1280, max: 1920 },
+          height: { ideal: 720, max: 1080 }
+        },
+        audio: true,
+        // Browser hints only; the user still decides what to share in the native prompt.
+        preferCurrentTab: true,
+        selfBrowserSurface: "include",
+        surfaceSwitching: "include",
+        monitorTypeSurfaces: "include"
+      };
+      const displayStream = await navigator.mediaDevices.getDisplayMedia(displayOptions);
+      this.displayStream = displayStream;
+      let microphoneStream;
+      try {
+        microphoneStream = await navigator.mediaDevices.getUserMedia({
+          audio: {
+            echoCancellation: true,
+            noiseSuppression: true
+          },
+          video: false
+        });
+      } catch (error) {
+        for (const track of displayStream.getTracks()) {
+          track.stop();
+        }
+        throw error;
+      }
+      this.microphoneStream = microphoneStream;
+      const microphoneAudioTracks = microphoneStream.getAudioTracks();
+      if (microphoneAudioTracks.length === 0) {
+        for (const track of displayStream.getTracks()) {
+          track.stop();
+        }
+        for (const track of microphoneStream.getTracks()) {
+          track.stop();
+        }
+        throw new Error("Microphone audio track is unavailable.");
+      }
+      for (const track of microphoneAudioTracks) {
+        track.enabled = true;
+      }
+      const mixedAudioTracks = await this.buildMixedAudioTracks(displayStream, microphoneStream);
+      const tracks = [...displayStream.getVideoTracks(), ...mixedAudioTracks];
+      if (tracks.length === 0) {
+        for (const track of displayStream.getTracks()) {
+          track.stop();
+        }
+        for (const track of microphoneStream.getTracks()) {
+          track.stop();
+        }
+        throw new Error("No media tracks available for recording.");
+      }
+      this.mixedStream = new MediaStream(tracks);
+      const mimeType = pickMimeType();
+      const recorderOptions = {
+        videoBitsPerSecond: 12e5,
+        audioBitsPerSecond: 96e3
+      };
+      if (mimeType) {
+        recorderOptions.mimeType = mimeType;
+      }
+      try {
+        this.mediaRecorder = new MediaRecorder(this.mixedStream, recorderOptions);
+      } catch {
+        if (mimeType) {
+          try {
+            this.mediaRecorder = new MediaRecorder(this.mixedStream, { mimeType });
+          } catch {
+            this.mediaRecorder = new MediaRecorder(this.mixedStream);
+          }
+        } else {
+          this.mediaRecorder = new MediaRecorder(this.mixedStream);
+        }
+      }
+      this.mediaRecorder.ondataavailable = (event) => {
+        if (event.data && event.data.size > 0) {
+          this.chunks.push(event.data);
+        }
+      };
+      this.mediaRecorder.onstop = () => {
+        const mime = this.mediaRecorder?.mimeType || mimeType || "video/webm";
+        const blob = this.chunks.length > 0 ? new Blob(this.chunks, { type: mime }) : null;
+        this.lastBlob = blob;
+        this.recording = false;
+        this.cleanupStreams();
+        const resolve = this.stopResolver;
+        this.resetStopPromise();
+        resolve?.(blob);
+      };
+      for (const track of displayStream.getVideoTracks()) {
+        track.onended = () => {
+          if (!this.recording) {
+            return;
+          }
+          void this.stop().finally(() => {
+            this.onEnded?.();
+          });
+        };
+      }
+      this.mediaRecorder.start(1e3);
+      this.recording = true;
+    } catch (error) {
+      this.cleanupStreams();
+      this.recording = false;
+      throw mapRecorderError(error);
+    }
+  }
+  async stop() {
+    if (!this.recording && !this.stopPromise) {
+      return this.lastBlob;
+    }
+    if (this.stopPromise) {
+      return this.stopPromise;
+    }
+    if (!this.mediaRecorder) {
+      this.recording = false;
+      this.cleanupStreams();
+      return this.lastBlob;
+    }
+    this.stopPromise = new Promise((resolve) => {
+      this.stopResolver = resolve;
+    });
+    if (this.mediaRecorder.state === "inactive") {
+      this.mediaRecorder.onstop?.(new Event("stop"));
+    } else {
+      this.mediaRecorder.stop();
+    }
+    return this.stopPromise;
+  }
+  isRecording() {
+    return this.recording;
+  }
+  getLastBlob() {
+    return this.lastBlob;
+  }
+  clearLastBlob() {
+    this.lastBlob = null;
+  }
+  dispose() {
+    this.cleanupStreams();
+    this.recording = false;
+    this.resetStopPromise();
+  }
+  cleanupStreams() {
+    if (this.audioContext) {
+      void this.audioContext.close().catch(() => void 0);
+    }
+    if (this.mixedStream) {
+      for (const track of this.mixedStream.getTracks()) {
+        track.stop();
+      }
+    }
+    if (this.displayStream) {
+      for (const track of this.displayStream.getTracks()) {
+        track.stop();
+      }
+    }
+    if (this.microphoneStream) {
+      for (const track of this.microphoneStream.getTracks()) {
+        track.stop();
+      }
+    }
+    if (this.displayAudioStream) {
+      for (const track of this.displayAudioStream.getTracks()) {
+        track.stop();
+      }
+    }
+    if (this.microphoneAudioStream) {
+      for (const track of this.microphoneAudioStream.getTracks()) {
+        track.stop();
+      }
+    }
+    this.mediaRecorder = null;
+    this.mixedStream = null;
+    this.displayStream = null;
+    this.microphoneStream = null;
+    this.audioContext = null;
+    this.displayAudioStream = null;
+    this.microphoneAudioStream = null;
+  }
+  resetStopPromise() {
+    this.stopPromise = null;
+    this.stopResolver = null;
+  }
+  async buildMixedAudioTracks(displayStream, microphoneStream) {
+    const displayAudioTracks = displayStream.getAudioTracks();
+    const microphoneAudioTracks = microphoneStream.getAudioTracks();
+    if (displayAudioTracks.length === 0 && microphoneAudioTracks.length === 0) {
+      return [];
+    }
+    if (typeof AudioContext === "undefined") {
+      return [...displayAudioTracks, ...microphoneAudioTracks];
+    }
+    const audioContext = new AudioContext();
+    await audioContext.resume().catch(() => void 0);
+    const destination = audioContext.createMediaStreamDestination();
+    if (displayAudioTracks.length > 0) {
+      this.displayAudioStream = new MediaStream(displayAudioTracks);
+      const displaySource = audioContext.createMediaStreamSource(this.displayAudioStream);
+      const displayGain = audioContext.createGain();
+      displayGain.gain.value = 1;
+      displaySource.connect(displayGain);
+      displayGain.connect(destination);
+    }
+    if (microphoneAudioTracks.length > 0) {
+      this.microphoneAudioStream = new MediaStream(microphoneAudioTracks);
+      const microphoneSource = audioContext.createMediaStreamSource(this.microphoneAudioStream);
+      const microphoneGain = audioContext.createGain();
+      microphoneGain.gain.value = 1;
+      microphoneSource.connect(microphoneGain);
+      microphoneGain.connect(destination);
+    }
+    this.audioContext = audioContext;
+    const mixedAudioTracks = destination.stream.getAudioTracks();
+    if (mixedAudioTracks.length > 0) {
+      return mixedAudioTracks;
+    }
+    return [...displayAudioTracks, ...microphoneAudioTracks];
+  }
+};
+var BUG_REPORTER_UI_ATTR = "data-bug-reporter-ui";
+var UNSUPPORTED_COLOR_FUNCTION_PATTERN = /\b(?:lab|lch|oklab|oklch|color)\([^)]*\)/gi;
+var COLOR_FALLBACK_VALUE = "rgb(17, 24, 39)";
+var DEFAULT_BACKGROUND_COLOR = "#ffffff";
+function replaceUnsupportedColorFunctions(value) {
+  return value.replace(UNSUPPORTED_COLOR_FUNCTION_PATTERN, COLOR_FALLBACK_VALUE);
+}
+function unclampClonedLayout(clonedDoc) {
+  for (const el of [clonedDoc.documentElement, clonedDoc.body]) {
+    if (!el) {
+      continue;
+    }
+    el.style.setProperty("height", "auto", "important");
+    el.style.setProperty("overflow", "visible", "important");
+  }
+  const overrideStyle = clonedDoc.createElement("style");
+  overrideStyle.textContent = `html, body { height: auto !important; overflow: visible !important; }`;
+  clonedDoc.head.appendChild(overrideStyle);
+}
+function sanitizeCloneForModernColors(clonedDocument) {
+  const styleElements = clonedDocument.querySelectorAll("style");
+  for (const styleElement of styleElements) {
+    if (!styleElement.textContent) {
+      continue;
+    }
+    styleElement.textContent = replaceUnsupportedColorFunctions(styleElement.textContent);
+  }
+  const styledElements = clonedDocument.querySelectorAll("[style]");
+  for (const element of styledElements) {
+    const style = element.getAttribute("style");
+    if (!style) {
+      continue;
+    }
+    element.setAttribute("style", replaceUnsupportedColorFunctions(style));
+  }
+}
+async function canvasToPngBlob(canvas) {
+  const blob = await new Promise((resolve) => {
+    canvas.toBlob(resolve, "image/png", 1);
+  });
+  if (!blob) {
+    throw new Error("Failed to generate screenshot image.");
+  }
+  return blob;
+}
+var ScreenshotCapturer = class {
+  async capture() {
+    if (typeof window === "undefined" || typeof document === "undefined") {
+      throw new Error("Screenshot capture is not available in this environment.");
+    }
+    const target = document.documentElement;
+    if (!target) {
+      throw new Error("Could not find a capture target for screenshot.");
+    }
+    try {
+      return await this.captureViaDomSnapshot(target);
+    } catch (error) {
+      const message = error instanceof Error ? error.message : "Unknown DOM capture error.";
+      throw new Error(
+        `Quick screenshot failed in this browser (${message}). Try video capture for this page.`
+      );
+    }
+  }
+  async captureViaDomSnapshot(target) {
+    const viewportWidth = Math.max(1, window.innerWidth || document.documentElement.clientWidth || 1);
+    const viewportHeight = Math.max(1, window.innerHeight || document.documentElement.clientHeight || 1);
+    const scale = Math.min(Math.max(window.devicePixelRatio || 1, 1), 2);
+    const bodyBackgroundColor = window.getComputedStyle(document.body).backgroundColor;
+    const backgroundColor = bodyBackgroundColor && bodyBackgroundColor !== "rgba(0, 0, 0, 0)" ? bodyBackgroundColor : DEFAULT_BACKGROUND_COLOR;
+    const savedScrollX = window.scrollX;
+    const savedScrollY = window.scrollY;
+    window.scrollTo(0, 0);
+    const htmlEl = document.documentElement;
+    const bodyEl = document.body;
+    const origHtmlHeight = htmlEl.style.height;
+    const origHtmlOverflow = htmlEl.style.overflow;
+    const origBodyHeight = bodyEl.style.height;
+    const origBodyOverflow = bodyEl.style.overflow;
+    htmlEl.style.setProperty("height", "auto", "important");
+    htmlEl.style.setProperty("overflow", "visible", "important");
+    bodyEl.style.setProperty("height", "auto", "important");
+    bodyEl.style.setProperty("overflow", "visible", "important");
+    const sharedOptions = {
+      backgroundColor,
+      logging: false,
+      useCORS: true,
+      allowTaint: false,
+      scale,
+      windowWidth: viewportWidth,
+      windowHeight: viewportHeight,
+      scrollX: 0,
+      scrollY: 0,
+      ignoreElements: (element) => {
+        return element instanceof HTMLElement && element.getAttribute(BUG_REPORTER_UI_ATTR) === "true";
+      }
+    };
+    let lastError = null;
+    const attempts = [
+      { foreignObjectRendering: true, sanitizeColorFunctions: false },
+      { foreignObjectRendering: false, sanitizeColorFunctions: false },
+      { foreignObjectRendering: false, sanitizeColorFunctions: true }
+    ];
+    try {
+      for (const attempt of attempts) {
+        try {
+          const fullCanvas = await html2canvas(target, {
+            ...sharedOptions,
+            foreignObjectRendering: attempt.foreignObjectRendering,
+            onclone: (clonedDocument) => {
+              unclampClonedLayout(clonedDocument);
+              if (attempt.sanitizeColorFunctions) {
+                sanitizeCloneForModernColors(clonedDocument);
+              }
+            }
+          });
+          const cropW = Math.round(viewportWidth * scale);
+          const cropH = Math.round(viewportHeight * scale);
+          const cropX = Math.round(savedScrollX * scale);
+          const cropY = Math.round(savedScrollY * scale);
+          const cropCanvas = document.createElement("canvas");
+          cropCanvas.width = cropW;
+          cropCanvas.height = cropH;
+          const ctx = cropCanvas.getContext("2d");
+          if (!ctx) {
+            return await canvasToPngBlob(fullCanvas);
+          }
+          ctx.drawImage(fullCanvas, cropX, cropY, cropW, cropH, 0, 0, cropW, cropH);
+          return await canvasToPngBlob(cropCanvas);
+        } catch (error) {
+          lastError = error;
+        }
+      }
+      throw lastError ?? new Error("DOM snapshot capture failed.");
+    } finally {
+      htmlEl.style.height = origHtmlHeight;
+      htmlEl.style.overflow = origHtmlOverflow;
+      bodyEl.style.height = origBodyHeight;
+      bodyEl.style.overflow = origBodyOverflow;
+      window.scrollTo(savedScrollX, savedScrollY);
+    }
+  }
+  async captureRegion(region) {
+    const fullBlob = await this.capture();
+    return this.cropBlob(fullBlob, region);
+  }
+  async cropBlob(blob, region) {
+    const bitmap = await createImageBitmap(blob);
+    const scale = bitmap.width / (window.innerWidth || 1);
+    const sx = Math.round(region.x * scale);
+    const sy = Math.round(region.y * scale);
+    const sw = Math.round(region.width * scale);
+    const sh = Math.round(region.height * scale);
+    const canvas = document.createElement("canvas");
+    canvas.width = Math.max(1, sw);
+    canvas.height = Math.max(1, sh);
+    const ctx = canvas.getContext("2d");
+    if (!ctx) {
+      bitmap.close();
+      throw new Error("Could not create canvas for region crop.");
+    }
+    ctx.drawImage(bitmap, sx, sy, sw, sh, 0, 0, sw, sh);
+    bitmap.close();
+    return canvasToPngBlob(canvas);
+  }
+};
+
+// src/core/types.ts
+var DEFAULT_MAX_RECORDING_MS = 2 * 60 * 1e3;
+function formatNetworkLogs(logs) {
+  if (logs.length === 0) {
+    return "No network requests captured.";
+  }
+  return logs.map((entry) => {
+    const status = entry.status === null ? "FAILED" : String(entry.status);
+    return `[${entry.timestamp}] ${entry.method.toUpperCase()} ${entry.url} -> ${status} (${entry.durationMs}ms)`;
+  }).join("\n");
+}
+function toErrorMessage(error) {
+  if (error instanceof Error && error.message.trim().length > 0) {
+    return error.message;
+  }
+  return "Unknown error";
+}
+function toBlobFile(blob, fileName, fallbackMimeType) {
+  return new File([blob], fileName, {
+    type: blob.type || fallbackMimeType,
+    lastModified: Date.now()
+  });
+}
+function collectClientEnvironmentMetadata() {
+  if (typeof window === "undefined" || typeof navigator === "undefined") {
+    return {
+      locale: null,
+      timezone: null,
+      language: null,
+      languages: [],
+      platform: null,
+      referrer: null,
+      colorScheme: "unknown",
+      viewport: {
+        width: null,
+        height: null,
+        pixelRatio: null
+      },
+      screen: {
+        width: null,
+        height: null,
+        availWidth: null,
+        availHeight: null,
+        colorDepth: null
+      },
+      device: {
+        hardwareConcurrency: null,
+        deviceMemoryGb: null,
+        maxTouchPoints: null,
+        online: null,
+        cookieEnabled: null
+      },
+      connection: {
+        effectiveType: null,
+        downlinkMbps: null,
+        rttMs: null,
+        saveData: null
+      }
+    };
+  }
+  const nav = navigator;
+  const connection = nav.connection || nav.mozConnection || nav.webkitConnection;
+  let colorScheme = "unknown";
+  if (typeof window.matchMedia === "function") {
+    if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
+      colorScheme = "dark";
+    } else if (window.matchMedia("(prefers-color-scheme: light)").matches) {
+      colorScheme = "light";
+    }
+  }
+  let timezone = null;
+  try {
+    timezone = Intl.DateTimeFormat().resolvedOptions().timeZone || null;
+  } catch {
+    timezone = null;
+  }
+  return {
+    locale: typeof navigator.language === "string" ? navigator.language : null,
+    timezone,
+    language: typeof navigator.language === "string" ? navigator.language : null,
+    languages: Array.isArray(navigator.languages) ? [...navigator.languages] : [],
+    platform: typeof nav.userAgentData?.platform === "string" && nav.userAgentData.platform || (typeof navigator.platform === "string" ? navigator.platform : null),
+    referrer: typeof document !== "undefined" ? document.referrer || null : null,
+    colorScheme,
+    viewport: {
+      width: typeof window.innerWidth === "number" ? window.innerWidth : null,
+      height: typeof window.innerHeight === "number" ? window.innerHeight : null,
+      pixelRatio: typeof window.devicePixelRatio === "number" ? window.devicePixelRatio : null
+    },
+    screen: {
+      width: typeof window.screen?.width === "number" ? window.screen.width : null,
+      height: typeof window.screen?.height === "number" ? window.screen.height : null,
+      availWidth: typeof window.screen?.availWidth === "number" ? window.screen.availWidth : null,
+      availHeight: typeof window.screen?.availHeight === "number" ? window.screen.availHeight : null,
+      colorDepth: typeof window.screen?.colorDepth === "number" ? window.screen.colorDepth : null
+    },
+    device: {
+      hardwareConcurrency: typeof navigator.hardwareConcurrency === "number" ? navigator.hardwareConcurrency : null,
+      deviceMemoryGb: typeof nav.deviceMemory === "number" ? nav.deviceMemory : null,
+      maxTouchPoints: typeof navigator.maxTouchPoints === "number" ? navigator.maxTouchPoints : null,
+      online: typeof navigator.onLine === "boolean" ? navigator.onLine : null,
+      cookieEnabled: typeof navigator.cookieEnabled === "boolean" ? navigator.cookieEnabled : null
+    },
+    connection: {
+      effectiveType: typeof connection?.effectiveType === "string" ? connection.effectiveType : null,
+      downlinkMbps: typeof connection?.downlink === "number" ? connection.downlink : null,
+      rttMs: typeof connection?.rtt === "number" ? connection.rtt : null,
+      saveData: typeof connection?.saveData === "boolean" ? connection.saveData : null
+    }
+  };
+}
+
+// src/core/BugSession.ts
+var BugSession = class {
+  constructor(options = {}) {
+    this.recording = false;
+    this.startedAtMs = null;
+    this.autoStopTimeout = null;
+    this.stopInFlight = null;
+    this.lastArtifacts = null;
+    this.maxDurationMs = options.maxDurationMs ?? DEFAULT_MAX_RECORDING_MS;
+    this.screenRecorder = options.screenRecorder ?? new ScreenRecorder();
+    this.screenshotCapturer = options.screenshotCapturer ?? new ScreenshotCapturer();
+    this.networkLogger = options.networkLogger ?? new NetworkLogger();
+    this.onAutoStop = options.onAutoStop;
+  }
+  async start() {
+    if (this.recording) {
+      return;
+    }
+    this.clearAutoStopTimer();
+    this.networkLogger.clear();
+    this.lastArtifacts = null;
+    this.networkLogger.start();
+    try {
+      await this.screenRecorder.start({
+        onEnded: () => {
+          void this.handleForcedStop("screen_ended");
+        }
+      });
+    } catch (error) {
+      this.networkLogger.stop();
+      this.networkLogger.clear();
+      throw error;
+    }
+    this.recording = true;
+    this.startedAtMs = Date.now();
+    this.autoStopTimeout = setTimeout(() => {
+      void this.handleForcedStop("time_limit");
+    }, this.maxDurationMs);
+  }
+  async captureScreenshot(region) {
+    if (this.recording) {
+      await this.stop("manual");
+    }
+    this.clearAutoStopTimer();
+    this.networkLogger.clear();
+    this.lastArtifacts = null;
+    const startedAtMs = Date.now();
+    this.networkLogger.start();
+    try {
+      const screenshotBlob = region ? await this.screenshotCapturer.captureRegion(region) : await this.screenshotCapturer.capture();
+      const networkLogs = this.networkLogger.stop();
+      const stoppedAtMs = Date.now();
+      const artifacts = {
+        videoBlob: null,
+        screenshotBlob,
+        networkLogs,
+        captureMode: "screenshot",
+        startedAt: new Date(startedAtMs).toISOString(),
+        stoppedAt: new Date(stoppedAtMs).toISOString(),
+        elapsedMs: Math.max(0, stoppedAtMs - startedAtMs),
+        stopReason: "manual"
+      };
+      this.lastArtifacts = artifacts;
+      return artifacts;
+    } catch (error) {
+      this.networkLogger.stop();
+      this.networkLogger.clear();
+      throw error;
+    }
+  }
+  async stop(reason = "manual") {
+    if (this.stopInFlight) {
+      return this.stopInFlight;
+    }
+    if (!this.recording) {
+      return this.lastArtifacts;
+    }
+    this.stopInFlight = this.stopInternal(reason).finally(() => {
+      this.stopInFlight = null;
+    });
+    return this.stopInFlight;
+  }
+  isRecording() {
+    return this.recording;
+  }
+  getElapsedMs() {
+    if (this.recording && this.startedAtMs) {
+      return Math.max(0, Date.now() - this.startedAtMs);
+    }
+    return this.lastArtifacts?.elapsedMs ?? 0;
+  }
+  getMaxDurationMs() {
+    return this.maxDurationMs;
+  }
+  getLastArtifacts() {
+    return this.lastArtifacts;
+  }
+  getLastCaptureMode() {
+    return this.lastArtifacts?.captureMode ?? null;
+  }
+  resetArtifacts() {
+    this.lastArtifacts = null;
+    this.screenRecorder.clearLastBlob();
+    this.networkLogger.clear();
+  }
+  async dispose() {
+    await this.stop("manual");
+    this.clearAutoStopTimer();
+    this.screenRecorder.dispose();
+    this.networkLogger.stop();
+    this.networkLogger.clear();
+  }
+  async stopInternal(reason) {
+    this.clearAutoStopTimer();
+    const startedAtMs = this.startedAtMs ?? Date.now();
+    this.recording = false;
+    this.startedAtMs = null;
+    const videoBlob = await this.screenRecorder.stop();
+    const networkLogs = this.networkLogger.stop();
+    const stoppedAtMs = Date.now();
+    const artifacts = {
+      videoBlob,
+      screenshotBlob: null,
+      networkLogs,
+      captureMode: "video",
+      startedAt: new Date(startedAtMs).toISOString(),
+      stoppedAt: new Date(stoppedAtMs).toISOString(),
+      elapsedMs: Math.max(0, stoppedAtMs - startedAtMs),
+      stopReason: reason
+    };
+    this.lastArtifacts = artifacts;
+    return artifacts;
+  }
+  async handleForcedStop(reason) {
+    const artifacts = await this.stop(reason);
+    if (artifacts && this.onAutoStop) {
+      this.onAutoStop(artifacts);
+    }
+  }
+  clearAutoStopTimer() {
+    if (this.autoStopTimeout) {
+      clearTimeout(this.autoStopTimeout);
+      this.autoStopTimeout = null;
+    }
+  }
+};
+
+// src/core/BugReporter.ts
+var BugReporter = class {
+  constructor(options) {
+    this.integration = options.integration;
+    this.session = options.session ?? new BugSession({
+      maxDurationMs: options.maxDurationMs ?? DEFAULT_MAX_RECORDING_MS,
+      onAutoStop: options.onAutoStop
+    });
+  }
+  async start() {
+    await this.session.start();
+  }
+  async captureScreenshot(region) {
+    return this.session.captureScreenshot(region);
+  }
+  async stop() {
+    return this.session.stop("manual");
+  }
+  async submit(title, description, options = {}) {
+    if (this.isRecording()) {
+      await this.stop();
+    }
+    const artifacts = this.session.getLastArtifacts();
+    if (!artifacts) {
+      throw new Error("Capture a screenshot or record and stop a bug session before submitting.");
+    }
+    const normalizedTitle = title.trim();
+    if (!normalizedTitle) {
+      throw new Error("A bug title is required.");
+    }
+    const normalizedDescription = description.trim() || "No additional details provided.";
+    const metadata = {
+      ...collectClientEnvironmentMetadata(),
+      captureMode: artifacts.captureMode,
+      capture: {
+        startedAt: artifacts.startedAt,
+        stoppedAt: artifacts.stoppedAt,
+        elapsedMs: artifacts.elapsedMs
+      },
+      ...options.metadata || {}
+    };
+    const payload = {
+      title: normalizedTitle,
+      description: normalizedDescription,
+      videoBlob: artifacts.videoBlob,
+      screenshotBlob: options.screenshotBlob ?? artifacts.screenshotBlob,
+      networkLogs: artifacts.networkLogs,
+      captureMode: artifacts.captureMode,
+      pageUrl: typeof window !== "undefined" ? window.location.href : "",
+      userAgent: typeof navigator !== "undefined" ? navigator.userAgent : "",
+      startedAt: artifacts.startedAt,
+      stoppedAt: artifacts.stoppedAt,
+      elapsedMs: artifacts.elapsedMs,
+      metadata
+    };
+    options.onProgress?.("Submitting to " + this.integration.provider + "\u2026");
+    const result = await this.integration.submit(payload, options.onProgress);
+    this.session.resetArtifacts();
+    return result;
+  }
+  isRecording() {
+    return this.session.isRecording();
+  }
+  getElapsedMs() {
+    return this.session.getElapsedMs();
+  }
+  getMaxDurationMs() {
+    return this.session.getMaxDurationMs();
+  }
+  getLastArtifacts() {
+    return this.session.getLastArtifacts();
+  }
+  clearDraft() {
+    this.session.resetArtifacts();
+  }
+  setIntegration(integration) {
+    this.integration = integration;
+  }
+  getSelectedProvider() {
+    return this.integration.provider;
+  }
+  async dispose() {
+    await this.session.dispose();
+  }
+};
+
+// src/integrations/linear.ts
+var DEFAULT_GRAPHQL_ENDPOINT = "https://api.linear.app/graphql";
+var noop = () => {
+};
+function isRecord(value) {
+  return typeof value === "object" && value !== null;
+}
+function parseErrorMessage(body, fallback) {
+  if (!isRecord(body)) {
+    return fallback;
+  }
+  if (Array.isArray(body.errors)) {
+    const messages = body.errors.map((entry) => {
+      if (isRecord(entry) && typeof entry.message === "string") {
+        return entry.message;
+      }
+      return "";
+    }).filter(Boolean);
+    if (messages.length > 0) {
+      return messages.join("; ");
+    }
+  }
+  return fallback;
+}
+function ensureString(value, message) {
+  if (typeof value !== "string" || value.trim().length === 0) {
+    throw new Error(message);
+  }
+  return value;
+}
+function buildCleanDescription(payload, mediaLinks) {
+  const lines = [
+    payload.description,
+    "",
+    "### Context",
+    `- Reported At: ${payload.stoppedAt}`,
+    `- Capture Mode: ${payload.captureMode === "screenshot" ? "Screenshot" : "Video"}`,
+    `- Page URL: ${payload.pageUrl || "Unknown"}`,
+    ""
+  ];
+  if (mediaLinks.screenshotUrl || mediaLinks.recordingUrl) {
+    lines.push("### Media");
+    if (mediaLinks.screenshotUrl) {
+      lines.push(`- Screenshot: [Open screenshot](${mediaLinks.screenshotUrl})`);
+    }
+    if (mediaLinks.recordingUrl) {
+      lines.push(`- Recording: [Open recording](${mediaLinks.recordingUrl})`);
+    }
+    lines.push("");
+  }
+  lines.push(
+    "*Network logs and client metadata are attached as comments below.*"
+  );
+  return lines.join("\n");
+}
+var LinearIntegration = class {
+  constructor(options) {
+    this.provider = "linear";
+    this.apiKey = options.apiKey;
+    this.teamId = options.teamId;
+    this.projectId = options.projectId;
+    this.graphqlEndpoint = options.graphqlEndpoint ?? DEFAULT_GRAPHQL_ENDPOINT;
+    this.submitProxyEndpoint = options.submitProxyEndpoint;
+    this.createIssueProxyEndpoint = options.createIssueProxyEndpoint;
+    this.uploadProxyEndpoint = options.uploadProxyEndpoint;
+    this.fetchImpl = options.fetchImpl ?? ((input, init) => globalThis.fetch(input, init));
+  }
+  async submit(payload, onProgress) {
+    if (this.submitProxyEndpoint) {
+      return this.submitViaProxy(payload, onProgress);
+    }
+    const progress = onProgress ?? noop;
+    let screenshotUrl = null;
+    if (payload.screenshotBlob) {
+      progress("Uploading screenshot\u2026");
+      screenshotUrl = await this.uploadAsset(payload.screenshotBlob, "bug-screenshot.png", "image/png");
+    }
+    let recordingUrl = null;
+    if (payload.videoBlob) {
+      progress("Uploading recording\u2026");
+      recordingUrl = await this.uploadAsset(payload.videoBlob, "bug-recording.webm", "video/webm");
+    }
+    progress("Creating Linear issue\u2026");
+    const description = buildCleanDescription(payload, { screenshotUrl, recordingUrl });
+    const issue = await this.createIssue(payload.title, description);
+    progress("Attaching logs\u2026");
+    const logsComment = "### Network Logs\n```text\n" + formatNetworkLogs(payload.networkLogs) + "\n```";
+    await this.addComment(issue.id, logsComment);
+    const metadataComment = "### Client Metadata\n```json\n" + JSON.stringify(payload.metadata, null, 2) + "\n```";
+    await this.addComment(issue.id, metadataComment);
+    progress("Done!");
+    return {
+      provider: this.provider,
+      issueId: issue.id,
+      issueKey: issue.identifier,
+      issueUrl: issue.url,
+      warnings: []
+    };
+  }
+  async submitViaProxy(payload, onProgress) {
+    if (!this.submitProxyEndpoint) {
+      throw new Error("Linear submit proxy endpoint is not configured.");
+    }
+    const formData = new FormData();
+    formData.set("provider", "linear");
+    formData.set("title", payload.title);
+    formData.set("description", payload.description);
+    formData.set("pageUrl", payload.pageUrl);
+    formData.set("userAgent", payload.userAgent);
+    formData.set("reportedAt", payload.stoppedAt);
+    formData.set("captureMode", payload.captureMode);
+    formData.set("clientMetadata", JSON.stringify(payload.metadata));
+    const formattedLogs = formatNetworkLogs(payload.networkLogs);
+    formData.set("networkLogs", formattedLogs);
+    formData.append("requestsLogFile", new Blob([formattedLogs], { type: "text/plain" }), "network-logs.txt");
+    if (payload.videoBlob) {
+      const file = toBlobFile(payload.videoBlob, "bug-recording.webm", "video/webm");
+      formData.append("screenRecordingFile", file, file.name);
+    }
+    if (payload.screenshotBlob) {
+      const file = toBlobFile(payload.screenshotBlob, "bug-screenshot.png", "image/png");
+      formData.append("screenshotFile", file, file.name);
+    }
+    (onProgress ?? noop)("Submitting to Linear\u2026");
+    const response = await this.fetchImpl(this.submitProxyEndpoint, {
+      method: "POST",
+      body: formData
+    });
+    const body = await response.json().catch(() => null);
+    if (!response.ok) {
+      const errorMessage = typeof body?.error === "string" ? body.error : body?.error?.message || "Linear proxy submission failed.";
+      throw new Error(errorMessage);
+    }
+    const linear = body?.linear;
+    if (!linear?.id || !linear.identifier) {
+      throw new Error("Linear proxy submission failed: invalid response.");
+    }
+    return {
+      provider: this.provider,
+      issueId: linear.id,
+      issueKey: linear.identifier,
+      issueUrl: linear.url ?? null,
+      warnings: Array.isArray(body?.warnings) ? body.warnings : []
+    };
+  }
+  async createIssue(title, description) {
+    if (this.createIssueProxyEndpoint) {
+      const response2 = await this.fetchImpl(this.createIssueProxyEndpoint, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify({
+          title,
+          description,
+          teamId: this.teamId,
+          projectId: this.projectId
+        })
+      });
+      const payload = await response2.json().catch(() => null);
+      if (!response2.ok || !payload?.id || !payload.identifier) {
+        throw new Error(payload?.error || "Linear issue creation proxy failed.");
+      }
+      return {
+        id: payload.id,
+        identifier: payload.identifier,
+        url: payload.url ?? null
+      };
+    }
+    if (!this.apiKey || !this.teamId) {
+      throw new Error(
+        "Linear integration is missing credentials. Configure apiKey + teamId or a createIssueProxyEndpoint."
+      );
+    }
+    const query = `
+      mutation IssueCreate($input: IssueCreateInput!) {
+        issueCreate(input: $input) {
+          success
+          issue {
+            id
+            identifier
+            url
+          }
+        }
+      }
+    `;
+    const issueInput = {
+      teamId: this.teamId,
+      title,
+      description
+    };
+    if (this.projectId) {
+      issueInput.projectId = this.projectId;
+    }
+    const response = await this.fetchImpl(this.graphqlEndpoint, {
+      method: "POST",
+      headers: {
+        Authorization: this.apiKey,
+        "Content-Type": "application/json"
+      },
+      body: JSON.stringify({
+        query,
+        variables: {
+          input: issueInput
+        }
+      })
+    });
+    const body = await response.json().catch(() => null);
+    if (!response.ok) {
+      throw new Error(parseErrorMessage(body, `Linear issue creation failed (${response.status})`));
+    }
+    const parsedIssueCreate = isRecord(body) && isRecord(body.data) && isRecord(body.data.issueCreate) ? body.data.issueCreate : null;
+    const parsedIssue = parsedIssueCreate && isRecord(parsedIssueCreate.issue) ? parsedIssueCreate.issue : null;
+    if (!parsedIssueCreate || !parsedIssue || parsedIssueCreate.success !== true) {
+      throw new Error(parseErrorMessage(body, "Linear issue creation failed."));
+    }
+    return {
+      id: ensureString(parsedIssue.id, "Linear did not return issue id."),
+      identifier: ensureString(parsedIssue.identifier, "Linear did not return issue identifier."),
+      url: typeof parsedIssue.url === "string" ? parsedIssue.url : null
+    };
+  }
+  async addComment(issueId, body) {
+    if (!this.apiKey) {
+      return;
+    }
+    const query = `
+      mutation CommentCreate($input: CommentCreateInput!) {
+        commentCreate(input: $input) {
+          success
+        }
+      }
+    `;
+    const response = await this.fetchImpl(this.graphqlEndpoint, {
+      method: "POST",
+      headers: {
+        Authorization: this.apiKey,
+        "Content-Type": "application/json"
+      },
+      body: JSON.stringify({
+        query,
+        variables: {
+          input: { issueId, body }
+        }
+      })
+    });
+    if (!response.ok) ;
+  }
+  async uploadAsset(blob, fileName, fallbackMimeType) {
+    const file = toBlobFile(blob, fileName, fallbackMimeType);
+    if (this.uploadProxyEndpoint) {
+      const formData = new FormData();
+      formData.set("file", file, file.name);
+      formData.set("filename", file.name);
+      formData.set("contentType", file.type || fallbackMimeType);
+      const response = await this.fetchImpl(this.uploadProxyEndpoint, {
+        method: "POST",
+        body: formData
+      });
+      const payload = await response.json().catch(() => null);
+      if (!response.ok || !payload?.assetUrl) {
+        throw new Error(payload?.error || "Linear upload proxy failed.");
+      }
+      return payload.assetUrl;
+    }
+    if (!this.apiKey) {
+      throw new Error("Linear upload requires apiKey or uploadProxyEndpoint.");
+    }
+    const uploadTarget = await this.requestUploadTarget(file);
+    const uploadHeaders = uploadTarget.headers.reduce((acc, entry) => {
+      if (entry.key && entry.value) {
+        acc[entry.key] = entry.value;
+      }
+      return acc;
+    }, {});
+    const uploadResponse = await this.fetchImpl(uploadTarget.uploadUrl, {
+      method: "PUT",
+      headers: uploadHeaders,
+      body: file
+    });
+    if (!uploadResponse.ok) {
+      throw new Error(
+        "Linear media upload failed. Configure an uploadProxyEndpoint if your browser blocks direct uploads."
+      );
+    }
+    return uploadTarget.assetUrl;
+  }
+  async requestUploadTarget(file) {
+    const query = `
+      mutation FileUpload($contentType: String!, $filename: String!, $size: Int!) {
+        fileUpload(contentType: $contentType, filename: $filename, size: $size) {
+          success
+          uploadFile {
+            uploadUrl
+            assetUrl
+            headers {
+              key
+              value
+            }
+          }
+        }
+      }
+    `;
+    const response = await this.fetchImpl(this.graphqlEndpoint, {
+      method: "POST",
+      headers: {
+        Authorization: ensureString(this.apiKey, "Linear upload requires apiKey."),
+        "Content-Type": "application/json"
+      },
+      body: JSON.stringify({
+        query,
+        variables: {
+          contentType: file.type || "application/octet-stream",
+          filename: file.name,
+          size: file.size
+        }
+      })
+    });
+    const body = await response.json().catch(() => null);
+    if (!response.ok) {
+      throw new Error(parseErrorMessage(body, `Linear upload target request failed (${response.status})`));
+    }
+    const uploadFile = isRecord(body) && isRecord(body.data) && isRecord(body.data.fileUpload) && isRecord(body.data.fileUpload.uploadFile) ? body.data.fileUpload.uploadFile : null;
+    const headers = Array.isArray(uploadFile?.headers) ? uploadFile.headers.filter((entry) => {
+      return isRecord(entry) && typeof entry.key === "string" && typeof entry.value === "string";
+    }) : [];
+    if (!uploadFile || typeof uploadFile.uploadUrl !== "string" || typeof uploadFile.assetUrl !== "string") {
+      throw new Error(parseErrorMessage(body, "Linear did not return a valid upload target."));
+    }
+    return {
+      uploadUrl: uploadFile.uploadUrl,
+      assetUrl: uploadFile.assetUrl,
+      headers
+    };
+  }
+};
+
+// src/integrations/jira.ts
+var noop2 = () => {
+};
+function isRecord2(value) {
+  return typeof value === "object" && value !== null;
+}
+function toBasicAuth(email, token) {
+  if (typeof btoa !== "function") {
+    throw new Error("btoa is unavailable; use backend proxy endpoints for Jira auth.");
+  }
+  return `Basic ${btoa(`${email}:${token}`)}`;
+}
+function getErrorDetail(payload, fallback) {
+  if (!isRecord2(payload)) {
+    return fallback;
+  }
+  if (Array.isArray(payload.errorMessages) && payload.errorMessages.length > 0) {
+    return payload.errorMessages.map((entry) => String(entry)).join("; ");
+  }
+  if (isRecord2(payload.errors)) {
+    return Object.values(payload.errors).map((entry) => String(entry)).join("; ");
+  }
+  return fallback;
+}
+function buildCleanDescription2(payload) {
+  const lines = [
+    payload.description,
+    "",
+    "Context:",
+    `- Reported At: ${payload.stoppedAt}`,
+    `- Capture Mode: ${payload.captureMode === "screenshot" ? "Screenshot" : "Video"}`,
+    `- Page URL: ${payload.pageUrl || "Unknown"}`
+  ];
+  const hasScreenshot = Boolean(payload.screenshotBlob);
+  const hasVideo = Boolean(payload.videoBlob);
+  if (hasScreenshot || hasVideo) {
+    lines.push("", "Attachments:");
+    if (hasScreenshot) lines.push("- Screenshot attached");
+    if (hasVideo) lines.push("- Screen recording attached");
+    lines.push("- Network logs attached (network-logs.txt)");
+    lines.push("- Client metadata attached (client-metadata.json)");
+  }
+  return lines.join("\n");
+}
+function toJiraAdf(text) {
+  const paragraphs = text.split(/\n{2,}/).map((chunk) => chunk.trim()).filter(Boolean).map((chunk) => ({
+    type: "paragraph",
+    content: [{ type: "text", text: chunk }]
+  }));
+  return {
+    type: "doc",
+    version: 1,
+    content: paragraphs
+  };
+}
+var JiraIntegration = class {
+  constructor(options) {
+    this.provider = "jira";
+    this.baseUrl = options.baseUrl?.replace(/\/$/, "");
+    this.email = options.email;
+    this.apiToken = options.apiToken;
+    this.projectKey = options.projectKey;
+    this.issueType = options.issueType ?? "Bug";
+    this.submitProxyEndpoint = options.submitProxyEndpoint;
+    this.createIssueProxyEndpoint = options.createIssueProxyEndpoint;
+    this.uploadAttachmentProxyEndpoint = options.uploadAttachmentProxyEndpoint;
+    this.fetchImpl = options.fetchImpl ?? ((input, init) => globalThis.fetch(input, init));
+  }
+  async submit(payload, onProgress) {
+    if (this.submitProxyEndpoint) {
+      return this.submitViaProxy(payload, onProgress);
+    }
+    const progress = onProgress ?? noop2;
+    progress("Creating Jira issue\u2026");
+    const issue = await this.createIssue(payload);
+    if (payload.screenshotBlob) {
+      progress("Uploading screenshot\u2026");
+      await this.uploadAttachment(issue.key, payload.screenshotBlob, "bug-screenshot.png", "image/png");
+    }
+    if (payload.videoBlob) {
+      progress("Uploading recording\u2026");
+      await this.uploadAttachment(issue.key, payload.videoBlob, "bug-recording.webm", "video/webm");
+    }
+    progress("Attaching logs\u2026");
+    const logsBlob = new Blob([formatNetworkLogs(payload.networkLogs)], { type: "text/plain" });
+    await this.uploadAttachment(issue.key, logsBlob, "network-logs.txt", "text/plain");
+    const metadataBlob = new Blob([JSON.stringify(payload.metadata, null, 2)], { type: "application/json" });
+    await this.uploadAttachment(issue.key, metadataBlob, "client-metadata.json", "application/json");
+    progress("Done!");
+    return {
+      provider: this.provider,
+      issueId: issue.id,
+      issueKey: issue.key,
+      issueUrl: issue.url,
+      warnings: []
+    };
+  }
+  async submitViaProxy(payload, onProgress) {
+    if (!this.submitProxyEndpoint) {
+      throw new Error("Jira submit proxy endpoint is not configured.");
+    }
+    const formData = new FormData();
+    formData.set("provider", "jira");
+    formData.set("title", payload.title);
+    formData.set("description", payload.description);
+    formData.set("pageUrl", payload.pageUrl);
+    formData.set("userAgent", payload.userAgent);
+    formData.set("reportedAt", payload.stoppedAt);
+    formData.set("captureMode", payload.captureMode);
+    formData.set("clientMetadata", JSON.stringify(payload.metadata));
+    const formattedLogs = formatNetworkLogs(payload.networkLogs);
+    formData.append("requestsLogFile", new Blob([formattedLogs], { type: "text/plain" }), "network-logs.txt");
+    formData.append("clientMetadataFile", new Blob([JSON.stringify(payload.metadata, null, 2)], { type: "application/json" }), "client-metadata.json");
+    if (payload.videoBlob) {
+      const file = toBlobFile(payload.videoBlob, "bug-recording.webm", "video/webm");
+      formData.append("screenRecordingFile", file, file.name);
+    }
+    if (payload.screenshotBlob) {
+      const file = toBlobFile(payload.screenshotBlob, "bug-screenshot.png", "image/png");
+      formData.append("screenshotFile", file, file.name);
+    }
+    (onProgress ?? noop2)("Submitting to Jira\u2026");
+    const response = await this.fetchImpl(this.submitProxyEndpoint, {
+      method: "POST",
+      body: formData
+    });
+    const body = await response.json().catch(() => null);
+    if (!response.ok) {
+      const errorMessage = typeof body?.error === "string" ? body.error : body?.error?.message || "Jira proxy submission failed.";
+      throw new Error(errorMessage);
+    }
+    const jira = body?.jira;
+    if (!jira?.id || !jira.key) {
+      throw new Error("Jira proxy submission failed: invalid response.");
+    }
+    return {
+      provider: this.provider,
+      issueId: jira.id,
+      issueKey: jira.key,
+      issueUrl: jira.url ?? null,
+      warnings: Array.isArray(body?.warnings) ? body.warnings : []
+    };
+  }
+  async createIssue(payload) {
+    if (this.createIssueProxyEndpoint) {
+      const response2 = await this.fetchImpl(this.createIssueProxyEndpoint, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify({
+          summary: payload.title,
+          description: buildCleanDescription2(payload),
+          issueType: this.issueType,
+          projectKey: this.projectKey
+        })
+      });
+      const data2 = await response2.json().catch(() => null);
+      if (!response2.ok || !data2?.id || !data2.key || !data2.url) {
+        throw new Error(data2?.error || "Jira issue creation proxy failed.");
+      }
+      return {
+        id: data2.id,
+        key: data2.key,
+        url: data2.url
+      };
+    }
+    if (!this.baseUrl || !this.email || !this.apiToken || !this.projectKey) {
+      throw new Error(
+        "Jira integration is missing credentials. Configure baseUrl + email + apiToken + projectKey or a createIssueProxyEndpoint."
+      );
+    }
+    const response = await this.fetchImpl(`${this.baseUrl}/rest/api/3/issue`, {
+      method: "POST",
+      credentials: "omit",
+      headers: {
+        Authorization: toBasicAuth(this.email, this.apiToken),
+        "Content-Type": "application/json",
+        Accept: "application/json"
+      },
+      body: JSON.stringify({
+        fields: {
+          project: { key: this.projectKey },
+          summary: payload.title,
+          description: toJiraAdf(buildCleanDescription2(payload)),
+          issuetype: { name: this.issueType }
+        }
+      })
+    });
+    const data = await response.json().catch(() => null);
+    if (!response.ok) {
+      throw new Error(getErrorDetail(data, `Jira issue creation failed (${response.status}).`));
+    }
+    if (!isRecord2(data) || typeof data.id !== "string" || typeof data.key !== "string") {
+      throw new Error("Jira issue creation failed: invalid API response.");
+    }
+    return {
+      id: data.id,
+      key: data.key,
+      url: `${this.baseUrl}/browse/${data.key}`
+    };
+  }
+  async uploadAttachment(issueKey, blob, fileName, fallbackMimeType) {
+    const file = toBlobFile(blob, fileName, fallbackMimeType);
+    if (this.uploadAttachmentProxyEndpoint) {
+      const formData2 = new FormData();
+      formData2.set("issueKey", issueKey);
+      formData2.set("file", file, file.name);
+      const response2 = await this.fetchImpl(this.uploadAttachmentProxyEndpoint, {
+        method: "POST",
+        body: formData2
+      });
+      if (!response2.ok) {
+        const data = await response2.json().catch(() => null);
+        throw new Error(data?.error || "Jira attachment upload proxy failed.");
+      }
+      return;
+    }
+    if (!this.baseUrl || !this.email || !this.apiToken) {
+      throw new Error("Jira attachment upload requires credentials or uploadAttachmentProxyEndpoint.");
+    }
+    const formData = new FormData();
+    formData.set("file", file, file.name);
+    const response = await this.fetchImpl(`${this.baseUrl}/rest/api/3/issue/${issueKey}/attachments`, {
+      method: "POST",
+      credentials: "omit",
+      headers: {
+        Authorization: toBasicAuth(this.email, this.apiToken),
+        Accept: "application/json",
+        "X-Atlassian-Token": "no-check"
+      },
+      body: formData
+    });
+    if (!response.ok) {
+      const data = await response.json().catch(() => null);
+      throw new Error(getErrorDetail(data, `Jira attachment upload failed (${response.status}).`));
+    }
+  }
+};
+function RegionSelector({ onSelect, onCancel }) {
+  const overlayRef = useRef(null);
+  const [start, setStart] = useState(null);
+  const [current, setCurrent] = useState(null);
+  const [isDragging, setIsDragging] = useState(false);
+  const getRect = useCallback(() => {
+    if (!start || !current) {
+      return null;
+    }
+    const x = Math.min(start.x, current.x);
+    const y = Math.min(start.y, current.y);
+    const width = Math.abs(current.x - start.x);
+    const height = Math.abs(current.y - start.y);
+    if (width < 8 || height < 8) {
+      return null;
+    }
+    return { x, y, width, height };
+  }, [start, current]);
+  useEffect(() => {
+    const handleKeyDown = (event) => {
+      if (event.key === "Escape") {
+        onCancel();
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [onCancel]);
+  const handlePointerDown = (event) => {
+    event.preventDefault();
+    event.currentTarget.setPointerCapture(event.pointerId);
+    const point = { x: event.clientX, y: event.clientY };
+    setStart(point);
+    setCurrent(point);
+    setIsDragging(true);
+  };
+  const handlePointerMove = (event) => {
+    if (!isDragging) {
+      return;
+    }
+    setCurrent({ x: event.clientX, y: event.clientY });
+  };
+  const handlePointerUp = (event) => {
+    if (!isDragging) {
+      return;
+    }
+    event.currentTarget.releasePointerCapture(event.pointerId);
+    setIsDragging(false);
+    const finalPoint = { x: event.clientX, y: event.clientY };
+    setCurrent(finalPoint);
+    const sX = start?.x ?? 0;
+    const sY = start?.y ?? 0;
+    const x = Math.min(sX, finalPoint.x);
+    const y = Math.min(sY, finalPoint.y);
+    const width = Math.abs(finalPoint.x - sX);
+    const height = Math.abs(finalPoint.y - sY);
+    if (width >= 8 && height >= 8) {
+      onSelect({ x, y, width, height });
+    } else {
+      onCancel();
+    }
+  };
+  const rect = getRect();
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: overlayRef,
+      className: "fixed inset-0 z-[1200] cursor-crosshair",
+      "data-bug-reporter-ui": "true",
+      onPointerDown: handlePointerDown,
+      onPointerMove: handlePointerMove,
+      onPointerUp: handlePointerUp,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-black/30" }),
+        rect && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "absolute border-2 border-dashed border-white bg-white/10 shadow-[0_0_0_9999px_rgba(0,0,0,0.3)]",
+              style: {
+                left: rect.x,
+                top: rect.y,
+                width: rect.width,
+                height: rect.height
+              }
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "absolute rounded bg-black/70 px-2 py-0.5 text-xs font-medium text-white",
+              style: {
+                left: rect.x,
+                top: rect.y + rect.height + 6
+              },
+              children: [
+                Math.round(rect.width),
+                " \xD7 ",
+                Math.round(rect.height)
+              ]
+            }
+          )
+        ] }),
+        !isDragging && !rect && /* @__PURE__ */ jsxs("div", { className: "absolute left-1/2 top-8 -translate-x-1/2 rounded-xl bg-black/70 px-5 py-3 text-sm font-medium text-white shadow-lg", children: [
+          "Drag to select an area \xB7 Press ",
+          /* @__PURE__ */ jsx("kbd", { className: "rounded border border-white/30 bg-white/10 px-1.5 py-0.5 font-mono text-xs", children: "Esc" }),
+          " to cancel"
+        ] })
+      ]
+    }
+  );
+}
+var BugReporterContext = createContext(null);
+function getProviderLabel(provider) {
+  return provider === "linear" ? "Linear" : "Jira";
+}
+function BugReporterProvider({
+  children,
+  integrations,
+  defaultProvider,
+  maxDurationMs = DEFAULT_MAX_RECORDING_MS
+}) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [isRecording, setIsRecording] = useState(false);
+  const [elapsedMs, setElapsedMs] = useState(0);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [submissionProgress, setSubmissionProgress] = useState(null);
+  const [isCapturingScreenshot, setIsCapturingScreenshot] = useState(false);
+  const [isSelectingRegion, setIsSelectingRegion] = useState(false);
+  const [error, setError] = useState(null);
+  const [success, setSuccess] = useState(null);
+  const [autoStopNotice, setAutoStopNotice] = useState(null);
+  const [selectedProvider, setSelectedProvider] = useState(null);
+  const [draftMode, setDraftMode] = useState(null);
+  const [videoBlob, setVideoBlob] = useState(null);
+  const [videoPreviewUrl, setVideoPreviewUrl] = useState(null);
+  const [screenshotBlob, setScreenshotBlob] = useState(null);
+  const [screenshotPreviewUrl, setScreenshotPreviewUrl] = useState(null);
+  const [screenshotAnnotation, setScreenshotAnnotation] = useState({
+    annotatedBlob: null,
+    highlights: [],
+    imageWidth: 0,
+    imageHeight: 0
+  });
+  const reporterRef = useRef(null);
+  const availableProviders = useMemo(() => {
+    return ["linear", "jira"].filter((provider) => Boolean(integrations[provider]));
+  }, [integrations]);
+  const hasDraft = useMemo(() => {
+    if (draftMode === "video") {
+      return Boolean(videoBlob);
+    }
+    if (draftMode === "screenshot") {
+      return Boolean(screenshotBlob);
+    }
+    return false;
+  }, [draftMode, screenshotBlob, videoBlob]);
+  useEffect(() => {
+    if (!videoBlob) {
+      setVideoPreviewUrl((current) => {
+        if (current) {
+          URL.revokeObjectURL(current);
+        }
+        return null;
+      });
+      return;
+    }
+    const nextUrl = URL.createObjectURL(videoBlob);
+    setVideoPreviewUrl((current) => {
+      if (current) {
+        URL.revokeObjectURL(current);
+      }
+      return nextUrl;
+    });
+    return () => {
+      URL.revokeObjectURL(nextUrl);
+    };
+  }, [videoBlob]);
+  useEffect(() => {
+    if (availableProviders.length === 0) {
+      setSelectedProvider(null);
+      return;
+    }
+    if (defaultProvider && availableProviders.includes(defaultProvider)) {
+      setSelectedProvider((current) => current ?? defaultProvider);
+      return;
+    }
+    setSelectedProvider((current) => {
+      if (current && availableProviders.includes(current)) {
+        return current;
+      }
+      return availableProviders[0];
+    });
+  }, [availableProviders, defaultProvider]);
+  useEffect(() => {
+    if (!screenshotBlob) {
+      setScreenshotPreviewUrl((current) => {
+        if (current) {
+          URL.revokeObjectURL(current);
+        }
+        return null;
+      });
+      return;
+    }
+    const nextUrl = URL.createObjectURL(screenshotBlob);
+    setScreenshotPreviewUrl((current) => {
+      if (current) {
+        URL.revokeObjectURL(current);
+      }
+      return nextUrl;
+    });
+    return () => {
+      URL.revokeObjectURL(nextUrl);
+    };
+  }, [screenshotBlob]);
+  const handleAutoStop = useCallback(
+    (artifacts) => {
+      setIsRecording(false);
+      setElapsedMs(artifacts.elapsedMs);
+      setDraftMode("video");
+      setVideoBlob(artifacts.videoBlob ?? null);
+      if (artifacts.stopReason === "time_limit") {
+        const durationSeconds = Math.round(maxDurationMs / 1e3);
+        setAutoStopNotice(`Recording reached the ${durationSeconds}-second limit and stopped automatically.`);
+        return;
+      }
+      if (artifacts.stopReason === "screen_ended") {
+        setAutoStopNotice("Screen sharing ended and recording was stopped.");
+      }
+    },
+    [maxDurationMs]
+  );
+  useEffect(() => {
+    if (!selectedProvider) {
+      return;
+    }
+    const integration = integrations[selectedProvider];
+    if (!integration) {
+      return;
+    }
+    if (!reporterRef.current) {
+      reporterRef.current = new BugReporter({
+        integration,
+        maxDurationMs,
+        onAutoStop: handleAutoStop
+      });
+      return;
+    }
+    reporterRef.current.setIntegration(integration);
+  }, [handleAutoStop, integrations, maxDurationMs, selectedProvider]);
+  useEffect(() => {
+    if (!isRecording) {
+      return;
+    }
+    const interval = window.setInterval(() => {
+      const reporter = reporterRef.current;
+      if (!reporter) {
+        return;
+      }
+      setElapsedMs(reporter.getElapsedMs());
+      if (!reporter.isRecording()) {
+        setIsRecording(false);
+      }
+    }, 250);
+    return () => {
+      window.clearInterval(interval);
+    };
+  }, [isRecording]);
+  useEffect(() => {
+    return () => {
+      setScreenshotPreviewUrl((current) => {
+        if (current) {
+          URL.revokeObjectURL(current);
+        }
+        return null;
+      });
+      setVideoPreviewUrl((current) => {
+        if (current) {
+          URL.revokeObjectURL(current);
+        }
+        return null;
+      });
+      if (reporterRef.current) {
+        void reporterRef.current.dispose();
+        reporterRef.current = null;
+      }
+    };
+  }, []);
+  const resetMessages = useCallback(() => {
+    setError(null);
+    setSuccess(null);
+    setAutoStopNotice(null);
+  }, []);
+  const clearDraft = useCallback(() => {
+    reporterRef.current?.clearDraft();
+    setDraftMode(null);
+    setVideoBlob(null);
+    setScreenshotBlob(null);
+    setScreenshotAnnotation({
+      annotatedBlob: null,
+      highlights: [],
+      imageWidth: 0,
+      imageHeight: 0
+    });
+    setElapsedMs(0);
+  }, []);
+  const getOrCreateReporter = useCallback(() => {
+    if (reporterRef.current) {
+      return reporterRef.current;
+    }
+    const fallbackProvider = selectedProvider ?? availableProviders[0];
+    if (!fallbackProvider) {
+      return null;
+    }
+    const integration = integrations[fallbackProvider];
+    if (!integration) {
+      return null;
+    }
+    reporterRef.current = new BugReporter({
+      integration,
+      maxDurationMs,
+      onAutoStop: handleAutoStop
+    });
+    if (!selectedProvider) {
+      setSelectedProvider(fallbackProvider);
+    }
+    return reporterRef.current;
+  }, [availableProviders, handleAutoStop, integrations, maxDurationMs, selectedProvider]);
+  const openModal = useCallback(() => {
+    setIsOpen(true);
+  }, []);
+  const closeModal = useCallback(() => {
+    setIsOpen(false);
+  }, []);
+  const startRecording = useCallback(async () => {
+    const reporter = getOrCreateReporter();
+    if (!reporter) {
+      setError("No bug tracker integration is configured.");
+      return false;
+    }
+    resetMessages();
+    clearDraft();
+    try {
+      await reporter.start();
+      setElapsedMs(0);
+      setIsRecording(true);
+      setDraftMode("video");
+      return true;
+    } catch (error2) {
+      setIsRecording(false);
+      setError(toErrorMessage(error2));
+      return false;
+    }
+  }, [clearDraft, getOrCreateReporter, resetMessages]);
+  const stopRecording = useCallback(async () => {
+    const reporter = reporterRef.current;
+    if (!reporter) {
+      return false;
+    }
+    try {
+      const artifacts = await reporter.stop();
+      setElapsedMs(artifacts?.elapsedMs ?? reporter.getElapsedMs());
+      setIsRecording(false);
+      if (artifacts?.videoBlob) {
+        setDraftMode("video");
+        setVideoBlob(artifacts.videoBlob);
+        return true;
+      }
+      return false;
+    } catch (error2) {
+      setError(toErrorMessage(error2));
+      return false;
+    }
+  }, []);
+  const startRegionSelection = useCallback(() => {
+    if (isRecording) {
+      return;
+    }
+    resetMessages();
+    setIsSelectingRegion(true);
+  }, [isRecording, resetMessages]);
+  const cancelRegionSelection = useCallback(() => {
+    setIsSelectingRegion(false);
+  }, []);
+  const handleRegionSelected = useCallback(
+    async (region) => {
+      setIsSelectingRegion(false);
+      const reporter = getOrCreateReporter();
+      if (!reporter) {
+        setError("No bug tracker integration is configured.");
+        return;
+      }
+      resetMessages();
+      clearDraft();
+      setIsCapturingScreenshot(true);
+      try {
+        const artifacts = await reporter.captureScreenshot(region);
+        if (!artifacts.screenshotBlob) {
+          throw new Error("Region screenshot returned no image.");
+        }
+        setDraftMode("screenshot");
+        setScreenshotBlob(artifacts.screenshotBlob);
+        setScreenshotAnnotation({
+          annotatedBlob: null,
+          highlights: [],
+          imageWidth: 0,
+          imageHeight: 0
+        });
+        setElapsedMs(artifacts.elapsedMs);
+        setIsRecording(false);
+        setAutoStopNotice(null);
+        setIsOpen(true);
+      } catch (error2) {
+        setError(toErrorMessage(error2));
+      } finally {
+        setIsCapturingScreenshot(false);
+      }
+    },
+    [clearDraft, getOrCreateReporter, resetMessages]
+  );
+  const captureQuickScreenshot = useCallback(async () => {
+    const reporter = getOrCreateReporter();
+    if (!reporter) {
+      setError("No bug tracker integration is configured.");
+      return false;
+    }
+    if (isRecording) {
+      const stopped = await stopRecording();
+      if (!stopped) {
+        return false;
+      }
+    }
+    resetMessages();
+    clearDraft();
+    setIsCapturingScreenshot(true);
+    try {
+      const artifacts = await reporter.captureScreenshot();
+      if (!artifacts.screenshotBlob) {
+        throw new Error("Quick screenshot returned no image.");
+      }
+      setDraftMode("screenshot");
+      setScreenshotBlob(artifacts.screenshotBlob);
+      setScreenshotAnnotation({
+        annotatedBlob: null,
+        highlights: [],
+        imageWidth: 0,
+        imageHeight: 0
+      });
+      setElapsedMs(artifacts.elapsedMs);
+      setIsRecording(false);
+      setAutoStopNotice(null);
+      return true;
+    } catch (error2) {
+      setError(toErrorMessage(error2));
+      return false;
+    } finally {
+      setIsCapturingScreenshot(false);
+    }
+  }, [clearDraft, getOrCreateReporter, isRecording, resetMessages, stopRecording]);
+  const updateScreenshotAnnotation = useCallback((annotation) => {
+    setScreenshotAnnotation(annotation);
+  }, []);
+  const submitReport = useCallback(
+    async (title, description) => {
+      const reporter = getOrCreateReporter();
+      if (!reporter) {
+        setError("No bug tracker integration is configured.");
+        return null;
+      }
+      if (!selectedProvider || !integrations[selectedProvider]) {
+        setError("Select a bug tracker provider before submitting.");
+        return null;
+      }
+      const artifacts = reporter.getLastArtifacts();
+      if (!artifacts || !draftMode || artifacts.captureMode !== draftMode) {
+        setError("Capture evidence first, then tag and submit.");
+        return null;
+      }
+      reporter.setIntegration(integrations[selectedProvider]);
+      setIsSubmitting(true);
+      setSubmissionProgress("Preparing submission\u2026");
+      setError(null);
+      setSuccess(null);
+      const screenshotBlobForSubmit = draftMode === "screenshot" ? screenshotAnnotation.annotatedBlob ?? screenshotBlob : null;
+      const metadata = {
+        annotation: draftMode === "screenshot" && screenshotAnnotation.highlights.length > 0 ? {
+          imageWidth: screenshotAnnotation.imageWidth,
+          imageHeight: screenshotAnnotation.imageHeight,
+          highlights: screenshotAnnotation.highlights
+        } : void 0
+      };
+      try {
+        const result = await reporter.submit(title, description, {
+          screenshotBlob: screenshotBlobForSubmit,
+          metadata,
+          onProgress: setSubmissionProgress
+        });
+        setSuccess(`Submitted to ${getProviderLabel(result.provider)} (${result.issueKey}).`);
+        clearDraft();
+        setIsOpen(false);
+        return result;
+      } catch (error2) {
+        setError(toErrorMessage(error2));
+        return null;
+      } finally {
+        setIsSubmitting(false);
+        setSubmissionProgress(null);
+      }
+    },
+    [
+      clearDraft,
+      draftMode,
+      getOrCreateReporter,
+      integrations,
+      screenshotAnnotation,
+      screenshotBlob,
+      selectedProvider
+    ]
+  );
+  const value = useMemo(
+    () => ({
+      isOpen,
+      openModal,
+      closeModal,
+      draftMode,
+      hasDraft,
+      isRecording,
+      elapsedMs,
+      maxDurationMs,
+      isSubmitting,
+      submissionProgress,
+      isCapturingScreenshot,
+      isSelectingRegion,
+      error,
+      success,
+      autoStopNotice,
+      availableProviders,
+      selectedProvider,
+      setSelectedProvider,
+      startRecording,
+      stopRecording,
+      captureQuickScreenshot,
+      startRegionSelection,
+      videoPreviewUrl,
+      screenshotPreviewUrl,
+      screenshotHighlightCount: screenshotAnnotation.highlights.length,
+      updateScreenshotAnnotation,
+      clearDraft,
+      submitReport,
+      resetMessages
+    }),
+    [
+      autoStopNotice,
+      availableProviders,
+      captureQuickScreenshot,
+      clearDraft,
+      closeModal,
+      draftMode,
+      elapsedMs,
+      error,
+      hasDraft,
+      isCapturingScreenshot,
+      isOpen,
+      isRecording,
+      isSelectingRegion,
+      isSubmitting,
+      submissionProgress,
+      maxDurationMs,
+      openModal,
+      resetMessages,
+      screenshotAnnotation.highlights.length,
+      startRegionSelection,
+      videoPreviewUrl,
+      screenshotPreviewUrl,
+      selectedProvider,
+      startRecording,
+      stopRecording,
+      submitReport,
+      success,
+      updateScreenshotAnnotation
+    ]
+  );
+  return /* @__PURE__ */ jsxs(BugReporterContext.Provider, { value, children: [
+    children,
+    isSelectingRegion && /* @__PURE__ */ jsx(
+      RegionSelector,
+      {
+        onSelect: (region) => void handleRegionSelected(region),
+        onCancel: cancelRegionSelection
+      }
+    )
+  ] });
+}
+function useBugReporter() {
+  const context = useContext(BugReporterContext);
+  if (!context) {
+    throw new Error("useBugReporter must be used within BugReporterProvider.");
+  }
+  return context;
+}
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var buttonVariants = cva(
+  "focus-visible:border-indigo-500 focus-visible:ring-indigo-500/50 aria-invalid:ring-red-500/20 dark:aria-invalid:ring-red-500/40 aria-invalid:border-red-500 dark:aria-invalid:border-red-500/50 rounded-4xl border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none",
+  {
+    variants: {
+      variant: {
+        default: "bg-gray-900 text-white hover:bg-gray-800",
+        outline: "border-gray-300 bg-gray-100/30 hover:bg-gray-200/50 hover:text-gray-900 aria-expanded:bg-gray-100 aria-expanded:text-gray-900",
+        secondary: "bg-gray-100 text-gray-900 hover:bg-gray-200 aria-expanded:bg-gray-100 aria-expanded:text-gray-900",
+        ghost: "hover:bg-gray-100 hover:text-gray-900 dark:hover:bg-gray-800 aria-expanded:bg-gray-100 aria-expanded:text-gray-900",
+        destructive: "bg-red-500/10 hover:bg-red-500/20 focus-visible:ring-red-500/20 dark:focus-visible:ring-red-500/40 dark:bg-red-500/20 text-red-600 focus-visible:border-red-500/40 dark:hover:bg-red-500/30",
+        link: "text-gray-900 underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-9 gap-1.5 px-3 has-data-[icon=inline-end]:pr-2.5 has-data-[icon=inline-start]:pl-2.5",
+        xs: "h-6 gap-1 px-2.5 text-xs has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-8 gap-1 px-3 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        lg: "h-10 gap-1.5 px-4 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3",
+        icon: "size-9",
+        "icon-xs": "size-6 [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot.Root : "button";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      "data-slot": "button",
+      "data-variant": variant,
+      "data-size": size,
+      className: cn(buttonVariants({ variant, size, className })),
+      ...props
+    }
+  );
+}
+function formatElapsed(ms) {
+  const totalSeconds = Math.max(0, Math.floor(ms / 1e3));
+  const minutes = Math.floor(totalSeconds / 60).toString().padStart(2, "0");
+  const seconds = (totalSeconds % 60).toString().padStart(2, "0");
+  return `${minutes}:${seconds}`;
+}
+function FloatingBugButton() {
+  const {
+    availableProviders,
+    captureQuickScreenshot,
+    draftMode,
+    elapsedMs,
+    hasDraft,
+    isCapturingScreenshot,
+    isRecording,
+    isSelectingRegion,
+    maxDurationMs,
+    openModal,
+    startRecording,
+    startRegionSelection,
+    stopRecording
+  } = useBugReporter();
+  const [menuOpen, setMenuOpen] = useState(false);
+  const containerRef = useRef(null);
+  const elapsed = useMemo(() => formatElapsed(elapsedMs), [elapsedMs]);
+  const maxElapsed = useMemo(() => formatElapsed(maxDurationMs), [maxDurationMs]);
+  useEffect(() => {
+    if (!menuOpen) {
+      return;
+    }
+    const onPointerDown = (event) => {
+      const target = event.target;
+      if (!(target instanceof Node)) {
+        return;
+      }
+      if (!containerRef.current?.contains(target)) {
+        setMenuOpen(false);
+      }
+    };
+    window.addEventListener("pointerdown", onPointerDown);
+    return () => {
+      window.removeEventListener("pointerdown", onPointerDown);
+    };
+  }, [menuOpen]);
+  if (availableProviders.length === 0) {
+    return null;
+  }
+  const handleQuickScreenshot = async () => {
+    setMenuOpen(false);
+    await captureQuickScreenshot();
+    openModal();
+  };
+  const handleStartRecording = async () => {
+    setMenuOpen(false);
+    await startRecording();
+  };
+  const handleStopRecording = async () => {
+    const ok = await stopRecording();
+    if (ok) {
+      openModal();
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: containerRef,
+      className: "fixed bottom-4 right-4 z-[1100] flex flex-col items-end",
+      "data-bug-reporter-ui": "true",
+      children: isRecording ? /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsxs(Button, { className: "h-11 gap-2 rounded-full px-4 shadow-lg shadow-black/20", type: "button", variant: "destructive", onClick: () => void handleStopRecording(), children: [
+          /* @__PURE__ */ jsx(Square, { className: "size-4" }),
+          "Stop recording"
+        ] }),
+        /* @__PURE__ */ jsxs("p", { className: "rounded-full border border-red-300 bg-red-50 px-3 py-1 text-xs text-red-700", children: [
+          "Recording ",
+          elapsed,
+          " / ",
+          maxElapsed
+        ] })
+      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        menuOpen ? /* @__PURE__ */ jsxs("div", { className: "mb-2 w-72 rounded-2xl border border-gray-200 bg-white p-2 shadow-xl", "data-bug-reporter-ui": "true", children: [
+          /* @__PURE__ */ jsxs(
+            Button,
+            {
+              className: "h-10 w-full justify-start gap-2 rounded-xl",
+              disabled: isCapturingScreenshot || isSelectingRegion,
+              type: "button",
+              variant: "ghost",
+              onClick: () => void handleQuickScreenshot(),
+              children: [
+                /* @__PURE__ */ jsx(Camera, { className: "size-4" }),
+                "Full page screenshot"
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            Button,
+            {
+              className: "h-10 w-full justify-start gap-2 rounded-xl",
+              disabled: isCapturingScreenshot || isSelectingRegion,
+              type: "button",
+              variant: "ghost",
+              onClick: () => {
+                setMenuOpen(false);
+                startRegionSelection();
+              },
+              children: [
+                /* @__PURE__ */ jsx(Crop, { className: "size-4" }),
+                "Select area"
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            Button,
+            {
+              className: "h-10 w-full justify-start gap-2 rounded-xl",
+              disabled: isCapturingScreenshot || isSelectingRegion,
+              type: "button",
+              variant: "ghost",
+              onClick: () => void handleStartRecording(),
+              children: [
+                /* @__PURE__ */ jsx(CircleDot, { className: "size-4" }),
+                "Record flow video"
+              ]
+            }
+          ),
+          hasDraft ? /* @__PURE__ */ jsxs(
+            Button,
+            {
+              className: "h-10 w-full justify-start gap-2 rounded-xl",
+              disabled: isCapturingScreenshot || isSelectingRegion,
+              type: "button",
+              variant: "ghost",
+              onClick: () => {
+                setMenuOpen(false);
+                openModal();
+              },
+              children: [
+                /* @__PURE__ */ jsx(FilePenLine, { className: "size-4" }),
+                "Continue draft",
+                /* @__PURE__ */ jsx("span", { className: "ml-auto text-xs text-gray-500", children: draftMode === "screenshot" ? "Screenshot" : "Video" })
+              ]
+            }
+          ) : null
+        ] }) : null,
+        /* @__PURE__ */ jsxs(
+          Button,
+          {
+            className: "h-11 gap-2 rounded-full px-4 shadow-lg shadow-black/15",
+            disabled: isCapturingScreenshot || isSelectingRegion,
+            type: "button",
+            onClick: () => setMenuOpen((current) => !current),
+            children: [
+              /* @__PURE__ */ jsxs("span", { className: "relative inline-flex items-center", children: [
+                /* @__PURE__ */ jsx(TriangleAlert, { className: "size-4" }),
+                hasDraft ? /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    "aria-hidden": true,
+                    className: "absolute -right-1.5 -top-1.5 inline-flex size-2 rounded-full bg-emerald-500 shadow-[0_0_0_4px_rgba(16,185,129,0.2)]"
+                  }
+                ) : null
+              ] }),
+              "Report Bug"
+            ]
+          }
+        )
+      ] })
+    }
+  );
+}
+function Dialog({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(Dialog$1.Root, { "data-slot": "dialog", ...props });
+}
+function DialogPortal({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(Dialog$1.Portal, { "data-slot": "dialog-portal", ...props });
+}
+function DialogOverlay({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Dialog$1.Overlay,
+    {
+      "data-slot": "dialog-overlay",
+      className: cn("data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/60 duration-100 supports-backdrop-filter:backdrop-blur-sm fixed inset-0 isolate z-50", className),
+      ...props
+    }
+  );
+}
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(DialogPortal, { children: [
+    /* @__PURE__ */ jsx(DialogOverlay, {}),
+    /* @__PURE__ */ jsxs(
+      Dialog$1.Content,
+      {
+        "data-slot": "dialog-content",
+        className: cn(
+          "bg-white text-gray-900 data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 ring-gray-900/5 grid max-w-[calc(100%-2rem)] gap-6 rounded-4xl p-6 text-sm ring-1 shadow-xl duration-100 sm:max-w-md fixed top-1/2 left-1/2 z-50 w-full -translate-x-1/2 -translate-y-1/2 outline-none",
+          className
+        ),
+        ...props,
+        children: [
+          children,
+          showCloseButton && /* @__PURE__ */ jsx(Dialog$1.Close, { "data-slot": "dialog-close", asChild: true, children: /* @__PURE__ */ jsxs(Button, { variant: "ghost", className: "absolute top-4 right-4", size: "icon-sm", children: [
+            /* @__PURE__ */ jsx(X, {}),
+            /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+          ] }) })
+        ]
+      }
+    )
+  ] });
+}
+function DialogHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "dialog-header",
+      className: cn("gap-2 flex flex-col", className),
+      ...props
+    }
+  );
+}
+function DialogFooter({
+  className,
+  showCloseButton = false,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "dialog-footer",
+      className: cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        showCloseButton && /* @__PURE__ */ jsx(Dialog$1.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "outline", children: "Close" }) })
+      ]
+    }
+  );
+}
+function DialogTitle({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Dialog$1.Title,
+    {
+      "data-slot": "dialog-title",
+      className: cn("text-base leading-none font-medium", className),
+      ...props
+    }
+  );
+}
+function DialogDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Dialog$1.Description,
+    {
+      "data-slot": "dialog-description",
+      className: cn("text-gray-500 *:[a]:hover:text-gray-900 text-sm *:[a]:underline *:[a]:underline-offset-3", className),
+      ...props
+    }
+  );
+}
+function Input({ className, type, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      type,
+      "data-slot": "input",
+      className: cn(
+        "bg-gray-100/30 border-gray-300 focus-visible:border-indigo-500 focus-visible:ring-indigo-500/50 aria-invalid:ring-red-500/20 dark:aria-invalid:ring-red-500/40 aria-invalid:border-red-500 dark:aria-invalid:border-red-500/50 h-9 rounded-4xl border px-3 py-1 text-base text-gray-900 transition-colors file:h-7 file:text-sm file:font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] md:text-sm file:text-gray-900 placeholder:text-gray-400 w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function Textarea({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "textarea",
+    {
+      "data-slot": "textarea",
+      className: cn(
+        "border-gray-300 bg-gray-100/30 focus-visible:border-indigo-500 focus-visible:ring-indigo-500/50 aria-invalid:ring-red-500/20 dark:aria-invalid:ring-red-500/40 aria-invalid:border-red-500 dark:aria-invalid:border-red-500/50 resize-none rounded-xl border px-3 py-3 text-base text-gray-900 transition-colors focus-visible:ring-[3px] aria-invalid:ring-[3px] md:text-sm placeholder:text-gray-400 flex field-sizing-content min-h-16 w-full outline-none disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function clamp(value) {
+  if (value < 0) {
+    return 0;
+  }
+  if (value > 1) {
+    return 1;
+  }
+  return value;
+}
+function normalizeRect(start, end) {
+  const x = clamp(Math.min(start.x, end.x));
+  const y = clamp(Math.min(start.y, end.y));
+  const maxX = clamp(Math.max(start.x, end.x));
+  const maxY = clamp(Math.max(start.y, end.y));
+  return {
+    x,
+    y,
+    width: Math.max(0, maxX - x),
+    height: Math.max(0, maxY - y)
+  };
+}
+function toDisplayRect(rect, width, height) {
+  return {
+    x: rect.x * width,
+    y: rect.y * height,
+    width: rect.width * width,
+    height: rect.height * height
+  };
+}
+async function renderAnnotatedBlob(imageUrl, imageWidth, imageHeight, highlights) {
+  const image = new Image();
+  image.src = imageUrl;
+  await new Promise((resolve, reject) => {
+    const handleLoad = () => {
+      cleanup();
+      resolve();
+    };
+    const handleError = () => {
+      cleanup();
+      reject(new Error("Failed to prepare screenshot annotation image."));
+    };
+    const cleanup = () => {
+      image.removeEventListener("load", handleLoad);
+      image.removeEventListener("error", handleError);
+    };
+    image.addEventListener("load", handleLoad, { once: true });
+    image.addEventListener("error", handleError, { once: true });
+  });
+  const canvas = document.createElement("canvas");
+  canvas.width = imageWidth;
+  canvas.height = imageHeight;
+  const context = canvas.getContext("2d");
+  if (!context) {
+    throw new Error("Could not prepare screenshot annotation canvas.");
+  }
+  context.drawImage(image, 0, 0, imageWidth, imageHeight);
+  context.lineWidth = Math.max(2, Math.round(Math.min(imageWidth, imageHeight) / 300));
+  context.strokeStyle = "#ef4444";
+  context.fillStyle = "rgba(239, 68, 68, 0.18)";
+  for (const rect of highlights) {
+    const draw = toDisplayRect(rect, imageWidth, imageHeight);
+    context.fillRect(draw.x, draw.y, draw.width, draw.height);
+    context.strokeRect(draw.x, draw.y, draw.width, draw.height);
+  }
+  const blob = await new Promise((resolve) => {
+    canvas.toBlob(resolve, "image/png", 1);
+  });
+  if (!blob) {
+    throw new Error("Failed to generate screenshot annotation.");
+  }
+  return blob;
+}
+function ScreenshotAnnotator({ imageUrl, disabled = false, onChange }) {
+  const imageRef = useRef(null);
+  const canvasRef = useRef(null);
+  const [highlights, setHighlights] = useState([]);
+  const [startPoint, setStartPoint] = useState(null);
+  const [activeRect, setActiveRect] = useState(null);
+  const [displaySize, setDisplaySize] = useState({ width: 0, height: 0 });
+  const [naturalSize, setNaturalSize] = useState({ width: 0, height: 0 });
+  const isDrawing = Boolean(startPoint && activeRect);
+  const syncCanvasSize = useCallback(() => {
+    const image = imageRef.current;
+    const canvas = canvasRef.current;
+    if (!image || !canvas) {
+      return;
+    }
+    const width = Math.max(1, Math.round(image.clientWidth));
+    const height = Math.max(1, Math.round(image.clientHeight));
+    if (canvas.width !== width || canvas.height !== height) {
+      canvas.width = width;
+      canvas.height = height;
+    }
+    setDisplaySize({ width, height });
+  }, []);
+  const handleImageLoad = useCallback(() => {
+    const image = imageRef.current;
+    if (!image) {
+      return;
+    }
+    setNaturalSize({
+      width: Math.max(1, image.naturalWidth || 1),
+      height: Math.max(1, image.naturalHeight || 1)
+    });
+    syncCanvasSize();
+  }, [syncCanvasSize]);
+  useEffect(() => {
+    const onResize = () => {
+      syncCanvasSize();
+    };
+    window.addEventListener("resize", onResize);
+    return () => {
+      window.removeEventListener("resize", onResize);
+    };
+  }, [syncCanvasSize]);
+  const drawCanvas = useCallback(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) {
+      return;
+    }
+    const context = canvas.getContext("2d");
+    if (!context) {
+      return;
+    }
+    context.clearRect(0, 0, canvas.width, canvas.height);
+    context.lineWidth = 2;
+    context.strokeStyle = "#ef4444";
+    context.fillStyle = "rgba(239, 68, 68, 0.18)";
+    for (const rect of highlights) {
+      const draw = toDisplayRect(rect, canvas.width, canvas.height);
+      context.fillRect(draw.x, draw.y, draw.width, draw.height);
+      context.strokeRect(draw.x, draw.y, draw.width, draw.height);
+    }
+    if (activeRect) {
+      const draw = toDisplayRect(activeRect, canvas.width, canvas.height);
+      context.fillRect(draw.x, draw.y, draw.width, draw.height);
+      context.strokeRect(draw.x, draw.y, draw.width, draw.height);
+    }
+  }, [activeRect, highlights]);
+  useEffect(() => {
+    drawCanvas();
+  }, [drawCanvas, displaySize]);
+  useEffect(() => {
+    let cancelled = false;
+    const publish = async () => {
+      if (naturalSize.width <= 0 || naturalSize.height <= 0) {
+        return;
+      }
+      if (highlights.length === 0) {
+        onChange({
+          annotatedBlob: null,
+          highlights: [],
+          imageWidth: naturalSize.width,
+          imageHeight: naturalSize.height
+        });
+        return;
+      }
+      try {
+        const annotatedBlob = await renderAnnotatedBlob(imageUrl, naturalSize.width, naturalSize.height, highlights);
+        if (cancelled) {
+          return;
+        }
+        onChange({
+          annotatedBlob,
+          highlights,
+          imageWidth: naturalSize.width,
+          imageHeight: naturalSize.height
+        });
+      } catch {
+        if (cancelled) {
+          return;
+        }
+        onChange({
+          annotatedBlob: null,
+          highlights,
+          imageWidth: naturalSize.width,
+          imageHeight: naturalSize.height
+        });
+      }
+    };
+    void publish();
+    return () => {
+      cancelled = true;
+    };
+  }, [highlights, imageUrl, naturalSize.height, naturalSize.width, onChange]);
+  const toPoint = useCallback((event) => {
+    const canvas = canvasRef.current;
+    if (!canvas || canvas.width <= 0 || canvas.height <= 0) {
+      return null;
+    }
+    const bounds = canvas.getBoundingClientRect();
+    if (bounds.width <= 0 || bounds.height <= 0) {
+      return null;
+    }
+    const x = clamp((event.clientX - bounds.left) / bounds.width);
+    const y = clamp((event.clientY - bounds.top) / bounds.height);
+    return { x, y };
+  }, []);
+  const handlePointerDown = (event) => {
+    if (disabled) {
+      return;
+    }
+    const point = toPoint(event);
+    if (!point) {
+      return;
+    }
+    event.currentTarget.setPointerCapture(event.pointerId);
+    setStartPoint(point);
+    setActiveRect({ x: point.x, y: point.y, width: 0, height: 0 });
+  };
+  const handlePointerMove = (event) => {
+    if (disabled || !startPoint) {
+      return;
+    }
+    const point = toPoint(event);
+    if (!point) {
+      return;
+    }
+    setActiveRect(normalizeRect(startPoint, point));
+  };
+  const completeDrawing = (point) => {
+    if (!point || !startPoint) {
+      setStartPoint(null);
+      setActiveRect(null);
+      return;
+    }
+    const rect = normalizeRect(startPoint, point);
+    if (rect.width >= 0.01 && rect.height >= 0.01) {
+      setHighlights((current) => [...current, rect]);
+    }
+    setStartPoint(null);
+    setActiveRect(null);
+  };
+  const handlePointerUp = (event) => {
+    if (disabled) {
+      return;
+    }
+    const point = toPoint(event);
+    completeDrawing(point);
+    event.currentTarget.releasePointerCapture(event.pointerId);
+  };
+  const handlePointerCancel = () => {
+    setStartPoint(null);
+    setActiveRect(null);
+  };
+  const clearHighlights = () => {
+    setHighlights([]);
+    setStartPoint(null);
+    setActiveRect(null);
+  };
+  const undoLast = () => {
+    setHighlights((current) => current.slice(0, -1));
+  };
+  const highlightCountLabel = useMemo(() => {
+    const count = highlights.length;
+    return `${count} highlight${count === 1 ? "" : "s"}`;
+  }, [highlights.length]);
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2", children: [
+      /* @__PURE__ */ jsxs("p", { className: "text-xs text-gray-500", children: [
+        "Drag over the screenshot to highlight the exact area with an issue. ",
+        highlightCountLabel,
+        " added."
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(Button, { disabled: disabled || highlights.length === 0, size: "sm", type: "button", variant: "outline", onClick: undoLast, children: "Undo" }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            disabled: disabled || highlights.length === 0 && !isDrawing,
+            size: "sm",
+            type: "button",
+            variant: "outline",
+            onClick: clearHighlights,
+            children: "Clear"
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "relative overflow-hidden rounded-lg border border-gray-200 bg-black/5", children: [
+      /* @__PURE__ */ jsx(
+        "img",
+        {
+          ref: imageRef,
+          alt: "Captured screenshot",
+          className: "mx-auto h-auto max-h-[45vh] w-full select-none object-contain",
+          onLoad: handleImageLoad,
+          src: imageUrl
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "canvas",
+        {
+          ref: canvasRef,
+          className: `absolute inset-0 h-full w-full ${disabled ? "cursor-not-allowed" : "cursor-crosshair"}`,
+          onPointerCancel: handlePointerCancel,
+          onPointerDown: handlePointerDown,
+          onPointerMove: handlePointerMove,
+          onPointerUp: handlePointerUp
+        }
+      )
+    ] })
+  ] });
+}
+function formatElapsed2(ms) {
+  const totalSeconds = Math.max(0, Math.floor(ms / 1e3));
+  const minutes = Math.floor(totalSeconds / 60).toString().padStart(2, "0");
+  const seconds = (totalSeconds % 60).toString().padStart(2, "0");
+  return `${minutes}:${seconds}`;
+}
+function providerLabel(provider) {
+  return provider === "linear" ? "Linear" : "Jira";
+}
+function BugReporterModal() {
+  const {
+    autoStopNotice,
+    availableProviders,
+    captureQuickScreenshot,
+    clearDraft,
+    closeModal,
+    draftMode,
+    elapsedMs,
+    error,
+    hasDraft,
+    isCapturingScreenshot,
+    isOpen,
+    isSubmitting,
+    submissionProgress,
+    openModal,
+    resetMessages,
+    screenshotHighlightCount,
+    screenshotPreviewUrl,
+    selectedProvider,
+    setSelectedProvider,
+    startRecording,
+    startRegionSelection,
+    submitReport,
+    success,
+    updateScreenshotAnnotation,
+    videoPreviewUrl
+  } = useBugReporter();
+  const [title, setTitle] = useState("");
+  const [description, setDescription] = useState("");
+  const [step, setStep] = useState("review");
+  const elapsedLabel = useMemo(() => formatElapsed2(elapsedMs), [elapsedMs]);
+  const handleDialogOpenChange = (open) => {
+    if (open) {
+      openModal();
+      return;
+    }
+    closeModal();
+    setStep("review");
+  };
+  const handleSubmit = async (event) => {
+    event.preventDefault();
+    const result = await submitReport(title, description);
+    if (result) {
+      setTitle("");
+      setDescription("");
+      setStep("review");
+    }
+  };
+  const hasIntegrations = availableProviders.length > 0;
+  const canSubmit = !isSubmitting && !isCapturingScreenshot && hasIntegrations && !!selectedProvider && hasDraft && title.trim().length > 0;
+  return /* @__PURE__ */ jsx(Dialog, { open: isOpen, onOpenChange: handleDialogOpenChange, children: /* @__PURE__ */ jsx(
+    DialogContent,
+    {
+      className: "max-h-[90vh] overflow-y-auto sm:max-w-2xl",
+      "data-bug-reporter-ui": "true",
+      showCloseButton: !isSubmitting,
+      children: /* @__PURE__ */ jsx("form", { className: "space-y-4", onSubmit: handleSubmit, children: step === "review" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs(DialogHeader, { children: [
+          /* @__PURE__ */ jsx(DialogTitle, { children: "Review capture" }),
+          /* @__PURE__ */ jsxs(DialogDescription, { children: [
+            "Step 1 of 2. Review your ",
+            draftMode === "video" ? "video" : "screenshot",
+            ", annotate if needed, or retake."
+          ] })
+        ] }),
+        !hasDraft ? /* @__PURE__ */ jsxs("div", { className: "space-y-2 rounded-xl border border-gray-200 bg-gray-100/20 px-4 py-3 text-sm", children: [
+          /* @__PURE__ */ jsx("p", { className: "font-medium", children: "No capture draft yet" }),
+          /* @__PURE__ */ jsx("p", { className: "text-gray-500", children: "Start from the Report Bug button and choose Quick screenshot or Record flow first." })
+        ] }) : draftMode === "screenshot" ? /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2", children: [
+            /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500", children: "Drag on the image to highlight exactly where the issue appears." }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsxs(
+                Button,
+                {
+                  className: "gap-2",
+                  disabled: isSubmitting || isCapturingScreenshot,
+                  size: "sm",
+                  type: "button",
+                  variant: "outline",
+                  onClick: () => {
+                    closeModal();
+                    void captureQuickScreenshot().then(() => openModal());
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(Camera, { className: "size-4" }),
+                    "Full page"
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                Button,
+                {
+                  className: "gap-2",
+                  disabled: isSubmitting || isCapturingScreenshot,
+                  size: "sm",
+                  type: "button",
+                  variant: "outline",
+                  onClick: () => {
+                    closeModal();
+                    startRegionSelection();
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(Crop, { className: "size-4" }),
+                    "Select area"
+                  ]
+                }
+              )
+            ] })
+          ] }),
+          screenshotPreviewUrl ? /* @__PURE__ */ jsx(
+            ScreenshotAnnotator,
+            {
+              imageUrl: screenshotPreviewUrl,
+              onChange: updateScreenshotAnnotation
+            },
+            screenshotPreviewUrl
+          ) : null,
+          /* @__PURE__ */ jsxs("p", { className: "text-xs text-gray-500", children: [
+            "Highlights added: ",
+            screenshotHighlightCount
+          ] })
+        ] }) : /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2", children: [
+            /* @__PURE__ */ jsxs("p", { className: "text-sm text-gray-500", children: [
+              "Duration: ",
+              elapsedLabel,
+              ". Screen + microphone attached."
+            ] }),
+            /* @__PURE__ */ jsxs(
+              Button,
+              {
+                className: "gap-2",
+                disabled: isSubmitting || isCapturingScreenshot,
+                size: "sm",
+                type: "button",
+                variant: "outline",
+                onClick: () => {
+                  closeModal();
+                  void startRecording();
+                },
+                children: [
+                  /* @__PURE__ */ jsx(CircleDot, { className: "size-4" }),
+                  "Record again"
+                ]
+              }
+            )
+          ] }),
+          videoPreviewUrl ? /* @__PURE__ */ jsx(
+            "video",
+            {
+              className: "w-full rounded-lg border border-gray-200 bg-black",
+              controls: true,
+              playsInline: true,
+              preload: "metadata",
+              src: videoPreviewUrl
+            }
+          ) : null,
+          /* @__PURE__ */ jsx("p", { className: "text-xs text-amber-700", children: "Video recording uses the browser share prompt each time by web platform design." })
+        ] }),
+        error ? /* @__PURE__ */ jsx("p", { className: "text-sm text-red-600", children: error }) : null,
+        /* @__PURE__ */ jsxs(DialogFooter, { children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              disabled: isSubmitting || isCapturingScreenshot,
+              type: "button",
+              variant: "outline",
+              onClick: () => {
+                clearDraft();
+                resetMessages();
+                closeModal();
+                setStep("review");
+              },
+              children: "Discard draft"
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            Button,
+            {
+              className: "gap-2",
+              disabled: !hasDraft || isCapturingScreenshot,
+              type: "button",
+              onClick: () => {
+                resetMessages();
+                setStep("context");
+              },
+              children: [
+                "Next",
+                /* @__PURE__ */ jsx(ArrowRight, { className: "size-4" })
+              ]
+            }
+          )
+        ] })
+      ] }) : (
+        /* ── Step 2: Add context & submit ── */
+        /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs(DialogHeader, { children: [
+            /* @__PURE__ */ jsx(DialogTitle, { children: "Add context" }),
+            /* @__PURE__ */ jsx(DialogDescription, { children: "Step 2 of 2. Describe the issue and submit. Metadata and network logs are attached automatically." })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "grid gap-4 sm:grid-cols-2", children: [
+            /* @__PURE__ */ jsxs("div", { className: "space-y-1.5 sm:col-span-2", children: [
+              /* @__PURE__ */ jsx("label", { className: "text-sm font-medium", htmlFor: "bug-title", children: "Title" }),
+              /* @__PURE__ */ jsx(
+                Input,
+                {
+                  id: "bug-title",
+                  maxLength: 140,
+                  placeholder: "Short summary of the bug",
+                  value: title,
+                  onChange: (event) => setTitle(event.target.value)
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "space-y-1.5 sm:col-span-2", children: [
+              /* @__PURE__ */ jsx("label", { className: "text-sm font-medium", htmlFor: "bug-description", children: "Quick note" }),
+              /* @__PURE__ */ jsx(
+                Textarea,
+                {
+                  id: "bug-description",
+                  maxLength: 4e3,
+                  placeholder: "What did you expect, what happened, and any quick repro steps.",
+                  value: description,
+                  onChange: (event) => setDescription(event.target.value)
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+              /* @__PURE__ */ jsx("label", { className: "text-sm font-medium", htmlFor: "bug-provider", children: "Submit to" }),
+              /* @__PURE__ */ jsx(
+                "select",
+                {
+                  id: "bug-provider",
+                  className: "bg-gray-100/30 border-gray-300 focus-visible:border-indigo-500 focus-visible:ring-indigo-500/50 h-9 w-full rounded-4xl border px-3 text-sm text-gray-900 outline-none focus-visible:ring-[3px]",
+                  disabled: isSubmitting || isCapturingScreenshot || !hasIntegrations,
+                  value: selectedProvider ?? "",
+                  onChange: (event) => setSelectedProvider(event.target.value),
+                  children: availableProviders.map((provider) => /* @__PURE__ */ jsx("option", { value: provider, children: providerLabel(provider) }, provider))
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "rounded-xl border border-gray-200 bg-gray-100/20 px-3 py-2", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-sm", children: [
+                /* @__PURE__ */ jsx("span", { className: "font-medium", children: "Capture" }),
+                /* @__PURE__ */ jsx("span", { className: "text-gray-500", children: draftMode === "screenshot" ? "Screenshot" : draftMode === "video" ? "Video" : "None" })
+              ] }),
+              /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-gray-500", children: draftMode === "screenshot" ? `${screenshotHighlightCount} highlight${screenshotHighlightCount === 1 ? "" : "s"} added` : draftMode === "video" ? `Duration: ${elapsedLabel}` : "Missing capture" })
+            ] })
+          ] }),
+          autoStopNotice ? /* @__PURE__ */ jsx("p", { className: "text-sm text-amber-700", children: autoStopNotice }) : null,
+          error ? /* @__PURE__ */ jsx("p", { className: "text-sm text-red-600", children: error }) : null,
+          success ? /* @__PURE__ */ jsx("p", { className: "text-sm text-emerald-600", children: success }) : null,
+          /* @__PURE__ */ jsxs(DialogFooter, { children: [
+            /* @__PURE__ */ jsxs(
+              Button,
+              {
+                className: "gap-2",
+                disabled: isSubmitting,
+                type: "button",
+                variant: "outline",
+                onClick: () => {
+                  resetMessages();
+                  setStep("review");
+                },
+                children: [
+                  /* @__PURE__ */ jsx(ArrowLeft, { className: "size-4" }),
+                  "Back"
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(Button, { disabled: !canSubmit, type: "submit", children: isSubmitting ? /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx("span", { className: "inline-block size-3.5 animate-spin rounded-full border-2 border-current border-t-transparent" }),
+              submissionProgress || "Submitting\u2026"
+            ] }) : `Submit to ${selectedProvider ? providerLabel(selectedProvider) : "tracker"}` })
+          ] })
+        ] })
+      ) })
+    }
+  ) });
+}
+
+export { BugReporter, BugReporterModal, BugReporterProvider, BugSession, DEFAULT_MAX_RECORDING_MS, FloatingBugButton, JiraIntegration, LinearIntegration, NetworkLogger, ScreenRecorder, ScreenshotCapturer, collectClientEnvironmentMetadata, formatNetworkLogs, toErrorMessage, useBugReporter };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map