@fogg/bug-reporter 1.0.1 → 1.0.2

package/dist/index.cjs

@@ -1,8 +1,35 @@
 'use strict';
 
-var chunk6TCI6T2U_cjs = require('./chunk-6TCI6T2U.cjs');
-var react = require('react');
+var React = require('react');
 var reactDom = require('react-dom');
+var html2canvas = require('html2canvas');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var html2canvas__default = /*#__PURE__*/_interopDefault(html2canvas);
+
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 
 // src/diagnostics/ua.ts
 function detectBrowserAndOS(userAgent) {
@@ -71,14 +98,14 @@ function collectDiagnostics(config, options) {
 var ConsoleBuffer = class {
   constructor(maxEntries) {
     this.maxEntries = maxEntries;
-    chunk6TCI6T2U_cjs.__publicField(this, "entries", []);
-    chunk6TCI6T2U_cjs.__publicField(this, "originals", /* @__PURE__ */ new Map());
-    chunk6TCI6T2U_cjs.__publicField(this, "installed", false);
-    chunk6TCI6T2U_cjs.__publicField(this, "onWindowError", (event) => {
+    __publicField(this, "entries", []);
+    __publicField(this, "originals", /* @__PURE__ */ new Map());
+    __publicField(this, "installed", false);
+    __publicField(this, "onWindowError", (event) => {
       var _a;
       this.push("error", [event.message, event.error instanceof Error ? (_a = event.error.stack) != null ? _a : "" : ""]);
     });
-    chunk6TCI6T2U_cjs.__publicField(this, "onUnhandledRejection", (event) => {
+    __publicField(this, "onUnhandledRejection", (event) => {
       this.push("error", ["Unhandled promise rejection", event.reason]);
     });
   }
@@ -166,11 +193,11 @@ function extractMethod(input, init) {
 var NetworkBuffer = class {
   constructor(maxEntries) {
     this.maxEntries = maxEntries;
-    chunk6TCI6T2U_cjs.__publicField(this, "entries", []);
-    chunk6TCI6T2U_cjs.__publicField(this, "installed", false);
-    chunk6TCI6T2U_cjs.__publicField(this, "originalFetch");
-    chunk6TCI6T2U_cjs.__publicField(this, "originalXhrOpen");
-    chunk6TCI6T2U_cjs.__publicField(this, "originalXhrSend");
+    __publicField(this, "entries", []);
+    __publicField(this, "installed", false);
+    __publicField(this, "originalFetch");
+    __publicField(this, "originalXhrOpen");
+    __publicField(this, "originalXhrSend");
   }
   install() {
     if (this.installed) {
@@ -311,7 +338,7 @@ var NetworkBuffer = class {
     }
   }
 };
-var BugReporterContext = react.createContext(void 0);
+var BugReporterContext = React.createContext(void 0);
 
 // src/core/defaults.ts
 var DEFAULT_MASK_SELECTORS = [
@@ -371,6 +398,18 @@ function withDefaults(config) {
   };
 }
 
+// src/types/index.ts
+var BugReporterError = class extends Error {
+  constructor(code, message, cause) {
+    super(message);
+    __publicField(this, "code");
+    __publicField(this, "cause");
+    this.name = "BugReporterError";
+    this.code = code;
+    this.cause = cause;
+  }
+};
+
 // src/storage/local-public.ts
 var LocalPublicProvider = class {
   constructor(options) {
@@ -398,7 +437,7 @@ var LocalPublicProvider = class {
       body: form
     });
     if (!response.ok) {
-      throw new chunk6TCI6T2U_cjs.BugReporterError("UPLOAD_ERROR", `Local upload failed (${response.status}).`);
+      throw new BugReporterError("UPLOAD_ERROR", `Local upload failed (${response.status}).`);
     }
     const payload = await response.json();
     onProgress == null ? void 0 : onProgress(1);
@@ -441,7 +480,7 @@ var ProxyProvider = class {
       body: blob
     });
     if (!response.ok) {
-      throw new chunk6TCI6T2U_cjs.BugReporterError("UPLOAD_ERROR", `Proxy upload failed (${response.status}).`);
+      throw new BugReporterError("UPLOAD_ERROR", `Proxy upload failed (${response.status}).`);
     }
     const payload = await response.json();
     onProgress == null ? void 0 : onProgress(1);
@@ -473,11 +512,11 @@ var S3PresignedProvider = class {
       body: JSON.stringify({ files })
     });
     if (!response.ok) {
-      throw new chunk6TCI6T2U_cjs.BugReporterError("UPLOAD_ERROR", `Failed to prepare uploads (${response.status}).`);
+      throw new BugReporterError("UPLOAD_ERROR", `Failed to prepare uploads (${response.status}).`);
     }
     const payload = await response.json();
     if (!((_a = payload.uploads) == null ? void 0 : _a.length)) {
-      throw new chunk6TCI6T2U_cjs.BugReporterError("UPLOAD_ERROR", "Presign endpoint did not return upload instructions.");
+      throw new BugReporterError("UPLOAD_ERROR", "Presign endpoint did not return upload instructions.");
     }
     return payload.uploads;
   }
@@ -493,7 +532,7 @@ var S3PresignedProvider = class {
         body: formData
       });
       if (!response.ok) {
-        throw new chunk6TCI6T2U_cjs.BugReporterError("UPLOAD_ERROR", `S3 form upload failed (${response.status}).`);
+        throw new BugReporterError("UPLOAD_ERROR", `S3 form upload failed (${response.status}).`);
       }
     } else {
       const response = await fetch(instruction.uploadUrl, {
@@ -502,7 +541,7 @@ var S3PresignedProvider = class {
         body: blob
       });
       if (!response.ok) {
-        throw new chunk6TCI6T2U_cjs.BugReporterError("UPLOAD_ERROR", `S3 upload failed (${response.status}).`);
+        throw new BugReporterError("UPLOAD_ERROR", `S3 upload failed (${response.status}).`);
       }
     }
     onProgress == null ? void 0 : onProgress(1);
@@ -604,7 +643,7 @@ async function uploadAssets(options) {
   for (const asset of options.assets) {
     const instruction = byId.get(asset.id);
     if (!instruction) {
-      throw new chunk6TCI6T2U_cjs.BugReporterError("UPLOAD_ERROR", `No upload instruction for asset ${asset.id}.`);
+      throw new BugReporterError("UPLOAD_ERROR", `No upload instruction for asset ${asset.id}.`);
     }
     const ref = await withRetry(
       () => options.provider.upload(instruction, asset.blob, (inner) => {
@@ -671,7 +710,7 @@ async function submitReport(options) {
   };
   const transformed = options.config.hooks.beforeSubmit ? await options.config.hooks.beforeSubmit(payloadBase) : payloadBase;
   if (!transformed) {
-    throw new chunk6TCI6T2U_cjs.BugReporterError("ABORTED", "Submission aborted by beforeSubmit hook.");
+    throw new BugReporterError("ABORTED", "Submission aborted by beforeSubmit hook.");
   }
   console.log("[bug-reporter] payload to submit", transformed);
   console.log("[bug-reporter] payload to submit (json)", JSON.stringify(transformed, null, 2));
@@ -686,7 +725,7 @@ async function submitReport(options) {
   });
   if (!response.ok) {
     const body = await response.text().catch(() => "");
-    throw new chunk6TCI6T2U_cjs.BugReporterError("SUBMIT_ERROR", `Report submit failed (${response.status}): ${body || response.statusText}`);
+    throw new BugReporterError("SUBMIT_ERROR", `Report submit failed (${response.status}): ${body || response.statusText}`);
   }
   return await response.json();
 }
@@ -711,21 +750,21 @@ var BASE_STATE = {
   error: void 0
 };
 function BugReporterProvider({ config, children }) {
-  const resolvedConfig = react.useMemo(() => withDefaults(config), [config]);
+  const resolvedConfig = React.useMemo(() => withDefaults(config), [config]);
   const initialDockSide = resolvedConfig.theme.position === "bottom-left" || resolvedConfig.theme.position === "top-left" ? "left" : "right";
-  const [state, setState] = react.useState(() => ({
+  const [state, setState] = React.useState(() => ({
     ...BASE_STATE,
     dockSide: initialDockSide,
     attributes: { ...resolvedConfig.attributes }
   }));
-  const [sessionActive, setSessionActive] = react.useState(false);
-  const consoleBufferRef = react.useRef(null);
-  const networkBufferRef = react.useRef(null);
-  const assetsRef = react.useRef([]);
-  const resetAssets = react.useCallback((assets) => {
+  const [sessionActive, setSessionActive] = React.useState(false);
+  const consoleBufferRef = React.useRef(null);
+  const networkBufferRef = React.useRef(null);
+  const assetsRef = React.useRef([]);
+  const resetAssets = React.useCallback((assets) => {
     assets.forEach((asset) => revokeObjectUrl(asset.previewUrl));
   }, []);
-  const open = react.useCallback(() => {
+  const open = React.useCallback(() => {
     setSessionActive(true);
     setState((prev) => ({
       ...prev,
@@ -733,13 +772,13 @@ function BugReporterProvider({ config, children }) {
       error: void 0
     }));
   }, []);
-  const close = react.useCallback(() => {
+  const close = React.useCallback(() => {
     setState((prev) => ({
       ...prev,
       isOpen: false
     }));
   }, []);
-  const reset = react.useCallback(() => {
+  const reset = React.useCallback(() => {
     var _a, _b;
     setSessionActive(false);
     setState((prev) => {
@@ -754,13 +793,13 @@ function BugReporterProvider({ config, children }) {
     (_a = consoleBufferRef.current) == null ? void 0 : _a.clear();
     (_b = networkBufferRef.current) == null ? void 0 : _b.clear();
   }, [resetAssets, resolvedConfig.attributes]);
-  const setStep = react.useCallback((step) => {
+  const setStep = React.useCallback((step) => {
     setState((prev) => ({ ...prev, step }));
   }, []);
-  const setDockSide = react.useCallback((dockSide) => {
+  const setDockSide = React.useCallback((dockSide) => {
     setState((prev) => ({ ...prev, dockSide }));
   }, []);
-  const updateDraft = react.useCallback((next) => {
+  const updateDraft = React.useCallback((next) => {
     setState((prev) => ({
       ...prev,
       draft: {
@@ -769,13 +808,13 @@ function BugReporterProvider({ config, children }) {
       }
     }));
   }, []);
-  const setAttributes = react.useCallback((next) => {
+  const setAttributes = React.useCallback((next) => {
     setState((prev) => ({
       ...prev,
       attributes: next
     }));
   }, []);
-  const updateAttribute = react.useCallback((key, value2) => {
+  const updateAttribute = React.useCallback((key, value2) => {
     setState((prev) => ({
       ...prev,
       attributes: {
@@ -784,7 +823,7 @@ function BugReporterProvider({ config, children }) {
       }
     }));
   }, []);
-  const setAssetByType = react.useCallback((type, next) => {
+  const setAssetByType = React.useCallback((type, next) => {
     setState((prev) => {
       const previous = prev.assets.find((asset) => asset.type === type);
       if (previous) {
@@ -797,13 +836,13 @@ function BugReporterProvider({ config, children }) {
       };
     });
   }, []);
-  const setScreenshot = react.useCallback((asset) => {
+  const setScreenshot = React.useCallback((asset) => {
     setAssetByType("screenshot", asset);
   }, [setAssetByType]);
-  const setRecording = react.useCallback((asset) => {
+  const setRecording = React.useCallback((asset) => {
     setAssetByType("recording", asset);
   }, [setAssetByType]);
-  const submit = react.useCallback(async () => {
+  const submit = React.useCallback(async () => {
     var _a, _b, _c, _d, _e, _f;
     setState((prev) => ({
       ...prev,
@@ -848,10 +887,10 @@ function BugReporterProvider({ config, children }) {
       (_f = (_e = resolvedConfig.hooks).onError) == null ? void 0 : _f.call(_e, error);
     }
   }, [resolvedConfig, state.assets, state.attributes, state.draft]);
-  const retrySubmit = react.useCallback(async () => {
+  const retrySubmit = React.useCallback(async () => {
     await submit();
   }, [submit]);
-  const getDiagnosticsPreview = react.useCallback(() => {
+  const getDiagnosticsPreview = React.useCallback(() => {
     var _a, _b, _c, _d;
     const logs = resolvedConfig.features.consoleLogs ? (_b = (_a = consoleBufferRef.current) == null ? void 0 : _a.snapshot()) != null ? _b : [] : [];
     const requests = resolvedConfig.features.networkInfo ? (_d = (_c = networkBufferRef.current) == null ? void 0 : _c.snapshot()) != null ? _d : [] : [];
@@ -863,7 +902,7 @@ function BugReporterProvider({ config, children }) {
       })
     };
   }, [resolvedConfig.features.consoleLogs, resolvedConfig.features.networkInfo]);
-  react.useEffect(() => {
+  React.useEffect(() => {
     if (!sessionActive) {
       return;
     }
@@ -892,10 +931,10 @@ function BugReporterProvider({ config, children }) {
     resolvedConfig.features.consoleLogs,
     resolvedConfig.features.networkInfo
   ]);
-  react.useEffect(() => {
+  React.useEffect(() => {
     assetsRef.current = state.assets;
   }, [state.assets]);
-  react.useEffect(() => {
+  React.useEffect(() => {
     return () => {
       var _a, _b;
       resetAssets(assetsRef.current);
@@ -903,7 +942,7 @@ function BugReporterProvider({ config, children }) {
       (_b = networkBufferRef.current) == null ? void 0 : _b.uninstall();
     };
   }, [resetAssets]);
-  const value = react.useMemo(
+  const value = React.useMemo(
     () => ({
       config: resolvedConfig,
       state,
@@ -939,10 +978,10 @@ function BugReporterProvider({ config, children }) {
       getDiagnosticsPreview
     ]
   );
-  return /* @__PURE__ */ chunk6TCI6T2U_cjs.React.createElement(BugReporterContext.Provider, { value }, children);
+  return /* @__PURE__ */ React__namespace.createElement(BugReporterContext.Provider, { value }, children);
 }
 function useBugReporter() {
-  const context = react.useContext(BugReporterContext);
+  const context = React.useContext(BugReporterContext);
   if (!context) {
     throw new Error("useBugReporter must be used inside BugReporterProvider.");
   }
@@ -956,7 +995,7 @@ function getFocusable(node) {
   ).filter((el) => !el.hasAttribute("disabled"));
 }
 function useFocusTrap(enabled, containerRef) {
-  react.useEffect(() => {
+  React.useEffect(() => {
     const container = containerRef.current;
     if (!enabled || !container) {
       return;
@@ -1367,7 +1406,7 @@ function LauncherButton({ position, text, themeMode = "dark", buttonColor }) {
     buttonColor: resolvedButtonColor,
     themeMode
   });
-  return /* @__PURE__ */ chunk6TCI6T2U_cjs.React.createElement(
+  return /* @__PURE__ */ React__namespace.createElement(
     "button",
     {
       type: "button",
@@ -1379,9 +1418,9 @@ function LauncherButton({ position, text, themeMode = "dark", buttonColor }) {
   );
 }
 function Modal({ isOpen, dockSide, themeMode, buttonColor, title, zIndex, onRequestClose, children }) {
-  const dialogRef = react.useRef(null);
+  const dialogRef = React.useRef(null);
   useFocusTrap(isOpen, dialogRef);
-  react.useEffect(() => {
+  React.useEffect(() => {
     if (!isOpen) {
       return;
     }
@@ -1400,23 +1439,309 @@ function Modal({ isOpen, dockSide, themeMode, buttonColor, title, zIndex, onRequ
   const overlayStyle = getModalOverlayStyle({ dockSide, themeMode, zIndex });
   const modalStyle = getModalStyle({ dockSide, themeMode, buttonColor });
   return reactDom.createPortal(
-    /* @__PURE__ */ chunk6TCI6T2U_cjs.React.createElement("div", { style: overlayStyle }, /* @__PURE__ */ chunk6TCI6T2U_cjs.React.createElement("div", { ref: dialogRef, style: modalStyle, role: "dialog", "aria-modal": "true", "aria-label": title }, children)),
+    /* @__PURE__ */ React__namespace.createElement("div", { style: overlayStyle }, /* @__PURE__ */ React__namespace.createElement("div", { ref: dialogRef, style: modalStyle, role: "dialog", "aria-modal": "true", "aria-label": title }, children)),
     document.body
   );
 }
+function applyMasking(selectors) {
+  const masked = [];
+  for (const selector of selectors) {
+    document.querySelectorAll(selector).forEach((element) => {
+      masked.push({ element, previous: element.style.filter });
+      element.style.filter = "blur(12px)";
+    });
+  }
+  return masked;
+}
+function resetMasking(masked) {
+  masked.forEach(({ element, previous }) => {
+    element.style.filter = previous;
+  });
+}
+function scrubText(root, patterns) {
+  var _a, _b;
+  if (!patterns.length) {
+    return [];
+  }
+  const walkers = [];
+  const regexes = patterns.map((pattern) => typeof pattern === "string" ? new RegExp(pattern, "g") : pattern);
+  const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
+  while (walker.nextNode()) {
+    const text = walker.currentNode;
+    let replaced = (_a = text.textContent) != null ? _a : "";
+    for (const regex of regexes) {
+      replaced = replaced.replace(regex, "[redacted]");
+    }
+    if (replaced !== text.textContent) {
+      walkers.push({ node: text, previous: (_b = text.textContent) != null ? _b : "" });
+      text.textContent = replaced;
+    }
+  }
+  return walkers;
+}
+function restoreText(changed) {
+  changed.forEach(({ node, previous }) => {
+    node.textContent = previous;
+  });
+}
+function createSelectionOverlay() {
+  return new Promise((resolve, reject) => {
+    const overlay = document.createElement("div");
+    overlay.setAttribute("data-bug-reporter-overlay", "true");
+    overlay.style.position = "fixed";
+    overlay.style.inset = "0";
+    overlay.style.background = "rgba(0,0,0,0.35)";
+    overlay.style.cursor = "crosshair";
+    overlay.style.zIndex = "2147483647";
+    const box = document.createElement("div");
+    box.style.position = "fixed";
+    box.style.border = "2px solid #ffffff";
+    box.style.background = "rgba(27, 116, 228, 0.2)";
+    box.style.pointerEvents = "none";
+    box.style.display = "none";
+    overlay.appendChild(box);
+    const cleanup = () => {
+      overlay.removeEventListener("mousedown", onMouseDown);
+      overlay.removeEventListener("mousemove", onMouseMove);
+      overlay.removeEventListener("mouseup", onMouseUp);
+      window.removeEventListener("keydown", onKeyDown);
+      overlay.remove();
+    };
+    let startX = 0;
+    let startY = 0;
+    let isDragging = false;
+    const onKeyDown = (event) => {
+      if (event.key === "Escape") {
+        cleanup();
+        reject(new BugReporterError("ABORTED", "Screenshot capture cancelled."));
+      }
+    };
+    const onMouseDown = (event) => {
+      isDragging = true;
+      startX = event.clientX;
+      startY = event.clientY;
+      box.style.display = "block";
+      box.style.left = `${startX}px`;
+      box.style.top = `${startY}px`;
+      box.style.width = "0px";
+      box.style.height = "0px";
+    };
+    const onMouseMove = (event) => {
+      if (!isDragging) {
+        return;
+      }
+      const left = Math.min(startX, event.clientX);
+      const top = Math.min(startY, event.clientY);
+      const width = Math.abs(startX - event.clientX);
+      const height = Math.abs(startY - event.clientY);
+      box.style.left = `${left}px`;
+      box.style.top = `${top}px`;
+      box.style.width = `${width}px`;
+      box.style.height = `${height}px`;
+    };
+    const onMouseUp = (event) => {
+      if (!isDragging) {
+        return;
+      }
+      isDragging = false;
+      const left = Math.min(startX, event.clientX);
+      const top = Math.min(startY, event.clientY);
+      const width = Math.abs(startX - event.clientX);
+      const height = Math.abs(startY - event.clientY);
+      cleanup();
+      if (width < 8 || height < 8) {
+        reject(new BugReporterError("CAPTURE_ERROR", "Selection area is too small."));
+        return;
+      }
+      resolve({ left, top, width, height });
+    };
+    overlay.addEventListener("mousedown", onMouseDown);
+    overlay.addEventListener("mousemove", onMouseMove);
+    overlay.addEventListener("mouseup", onMouseUp);
+    window.addEventListener("keydown", onKeyDown);
+    document.body.appendChild(overlay);
+  });
+}
+function canvasToBlob(canvas) {
+  return new Promise((resolve, reject) => {
+    canvas.toBlob((blob) => {
+      if (!blob) {
+        reject(new BugReporterError("CAPTURE_ERROR", "Failed to build screenshot blob."));
+        return;
+      }
+      resolve(blob);
+    }, "image/png");
+  });
+}
+async function captureScreenshotArea(options) {
+  const selection = await createSelectionOverlay();
+  const masked = applyMasking(options.maskSelectors);
+  const textChanges = scrubText(document.body, options.redactTextPatterns);
+  try {
+    const baseCanvas = await html2canvas__default.default(document.documentElement, {
+      useCORS: true,
+      scrollX: -window.scrollX,
+      scrollY: -window.scrollY,
+      backgroundColor: null,
+      logging: false,
+      windowWidth: document.documentElement.scrollWidth,
+      windowHeight: document.documentElement.scrollHeight
+    });
+    const scaleX = baseCanvas.width / window.innerWidth;
+    const scaleY = baseCanvas.height / window.innerHeight;
+    const sx = Math.round(selection.left * scaleX);
+    const sy = Math.round(selection.top * scaleY);
+    const sw = Math.round(selection.width * scaleX);
+    const sh = Math.round(selection.height * scaleY);
+    const cropped = document.createElement("canvas");
+    cropped.width = sw;
+    cropped.height = sh;
+    const context = cropped.getContext("2d");
+    if (!context) {
+      throw new BugReporterError("CAPTURE_ERROR", "Canvas 2D context unavailable.");
+    }
+    context.drawImage(baseCanvas, sx, sy, sw, sh, 0, 0, sw, sh);
+    return await canvasToBlob(cropped);
+  } catch (error) {
+    if (error instanceof BugReporterError) {
+      throw error;
+    }
+    throw new BugReporterError("CAPTURE_ERROR", "Screenshot capture failed.", error);
+  } finally {
+    resetMasking(masked);
+    restoreText(textChanges);
+  }
+}
+
+// src/core/recording.ts
+function pickMimeType() {
+  const candidates = ["video/webm;codecs=vp9", "video/webm;codecs=vp8", "video/webm"];
+  for (const candidate of candidates) {
+    if (typeof MediaRecorder !== "undefined" && MediaRecorder.isTypeSupported(candidate)) {
+      return candidate;
+    }
+  }
+  return "video/webm";
+}
+async function startScreenRecording(options) {
+  var _a;
+  if (!((_a = navigator.mediaDevices) == null ? void 0 : _a.getDisplayMedia)) {
+    throw new BugReporterError("RECORDING_ERROR", "Screen recording is not supported by this browser.");
+  }
+  let stream;
+  try {
+    stream = await navigator.mediaDevices.getDisplayMedia({
+      video: true,
+      audio: false
+    });
+  } catch (error) {
+    throw new BugReporterError("PERMISSION_DENIED", "Permission denied for screen recording.", error);
+  }
+  const mimeType = pickMimeType();
+  let recorder;
+  try {
+    recorder = new MediaRecorder(stream, { mimeType });
+  } catch (error) {
+    stream.getTracks().forEach((track) => track.stop());
+    throw new BugReporterError("RECORDING_ERROR", "Could not initialize MediaRecorder.", error);
+  }
+  const chunks = [];
+  const startedAt = Date.now();
+  let latestSize = 0;
+  let tickSeconds = 0;
+  let completed = false;
+  let isCancelled = false;
+  let resolvePromise;
+  let rejectPromise;
+  const promise = new Promise((resolve, reject) => {
+    resolvePromise = resolve;
+    rejectPromise = reject;
+  });
+  const tickInterval = window.setInterval(() => {
+    var _a2;
+    tickSeconds += 1;
+    (_a2 = options.onTick) == null ? void 0 : _a2.call(options, tickSeconds);
+  }, 1e3);
+  const hardStop = window.setTimeout(() => {
+    if (recorder.state !== "inactive") {
+      recorder.stop();
+    }
+  }, options.maxSeconds * 1e3);
+  const teardown = () => {
+    if (completed) {
+      return;
+    }
+    completed = true;
+    window.clearInterval(tickInterval);
+    window.clearTimeout(hardStop);
+    stream.getTracks().forEach((track) => track.stop());
+  };
+  recorder.addEventListener("dataavailable", (event) => {
+    if (!event.data || event.data.size === 0) {
+      return;
+    }
+    chunks.push(event.data);
+    latestSize += event.data.size;
+    if (latestSize > options.maxBytes) {
+      isCancelled = true;
+      recorder.stop();
+      rejectPromise(
+        new BugReporterError(
+          "VALIDATION_ERROR",
+          `Recording exceeds max size (${Math.round(options.maxBytes / 1024 / 1024)}MB).`
+        )
+      );
+    }
+  });
+  recorder.addEventListener("error", (event) => {
+    teardown();
+    rejectPromise(new BugReporterError("RECORDING_ERROR", "Recording failed.", event));
+  });
+  recorder.addEventListener("stop", () => {
+    teardown();
+    if (isCancelled) {
+      return;
+    }
+    const blob = new Blob(chunks, { type: mimeType });
+    resolvePromise({
+      blob,
+      mimeType,
+      durationMs: Date.now() - startedAt
+    });
+  });
+  recorder.start(300);
+  return {
+    stop: () => {
+      if (recorder.state !== "inactive") {
+        recorder.stop();
+      }
+    },
+    cancel: () => {
+      isCancelled = true;
+      if (recorder.state !== "inactive") {
+        recorder.stop();
+      }
+      teardown();
+      rejectPromise(new BugReporterError("ABORTED", "Recording cancelled by user."));
+    },
+    promise
+  };
+}
 
 // src/core/lazy.ts
+var screenshotCaptureModule = { captureScreenshotArea };
+var screenRecordingModule = { startScreenRecording };
 async function loadScreenshotCapture() {
-  return import('./screenshot-AWRHVVWJ.cjs');
+  return screenshotCaptureModule;
 }
 async function loadScreenRecording() {
-  return import('./recording-DZREYVVL.cjs');
+  return screenRecordingModule;
 }
 
 // src/core/validation.ts
 function validateScreenshotSize(size, maxBytes) {
   if (size > maxBytes) {
-    throw new chunk6TCI6T2U_cjs.BugReporterError(
+    throw new BugReporterError(
       "VALIDATION_ERROR",
       `Screenshot exceeds max size (${Math.round(maxBytes / 1024 / 1024)}MB).`
     );
@@ -1424,7 +1749,7 @@ function validateScreenshotSize(size, maxBytes) {
 }
 function validateVideoSize(size, maxBytes) {
   if (size > maxBytes) {
-    throw new chunk6TCI6T2U_cjs.BugReporterError("VALIDATION_ERROR", `Recording exceeds max size (${Math.round(maxBytes / 1024 / 1024)}MB).`);
+    throw new BugReporterError("VALIDATION_ERROR", `Recording exceeds max size (${Math.round(maxBytes / 1024 / 1024)}MB).`);
   }
 }
 function drawArrow(ctx, start, end) {
@@ -1441,14 +1766,14 @@ function drawArrow(ctx, start, end) {
   ctx.closePath();
   ctx.fill();
 }
-var AnnotationCanvas = react.forwardRef(function AnnotationCanvas2({ imageUrl }, ref) {
-  const canvasRef = react.useRef(null);
-  const imageRef = react.useRef(null);
-  const [tool, setTool] = react.useState("rectangle");
-  const [shapes, setShapes] = react.useState([]);
-  const [draftShape, setDraftShape] = react.useState(null);
-  const dragStartRef = react.useRef(null);
-  const redraw = react.useCallback(
+var AnnotationCanvas = React.forwardRef(function AnnotationCanvas2({ imageUrl }, ref) {
+  const canvasRef = React.useRef(null);
+  const imageRef = React.useRef(null);
+  const [tool, setTool] = React.useState("rectangle");
+  const [shapes, setShapes] = React.useState([]);
+  const [draftShape, setDraftShape] = React.useState(null);
+  const dragStartRef = React.useRef(null);
+  const redraw = React.useCallback(
     (ctx) => {
       const canvas = canvasRef.current;
       const image = imageRef.current;
@@ -1477,7 +1802,7 @@ var AnnotationCanvas = react.forwardRef(function AnnotationCanvas2({ imageUrl },
     },
     [draftShape, shapes]
   );
-  react.useEffect(() => {
+  React.useEffect(() => {
     const image = new Image();
     image.crossOrigin = "anonymous";
     image.onload = () => {
@@ -1496,7 +1821,7 @@ var AnnotationCanvas = react.forwardRef(function AnnotationCanvas2({ imageUrl },
     };
     image.src = imageUrl;
   }, [imageUrl, redraw]);
-  react.useEffect(() => {
+  React.useEffect(() => {
     const canvas = canvasRef.current;
     if (!canvas) {
       return;
@@ -1507,7 +1832,7 @@ var AnnotationCanvas = react.forwardRef(function AnnotationCanvas2({ imageUrl },
     }
     redraw(ctx);
   }, [redraw]);
-  const getCoords = react.useCallback((event) => {
+  const getCoords = React.useCallback((event) => {
     const canvas = canvasRef.current;
     if (!canvas) {
       return { x: 0, y: 0 };
@@ -1550,7 +1875,7 @@ var AnnotationCanvas = react.forwardRef(function AnnotationCanvas2({ imageUrl },
     }
     setDraftShape(null);
   };
-  const canvasToBlob = react.useCallback(async () => {
+  const canvasToBlob2 = React.useCallback(async () => {
     const canvas = canvasRef.current;
     if (!canvas) {
       throw new Error("Annotation canvas unavailable.");
@@ -1563,23 +1888,23 @@ var AnnotationCanvas = react.forwardRef(function AnnotationCanvas2({ imageUrl },
     }
     return blob;
   }, []);
-  react.useImperativeHandle(
+  React.useImperativeHandle(
     ref,
     () => ({
-      exportBlob: canvasToBlob,
+      exportBlob: canvasToBlob2,
       clear: () => setShapes([]),
       hasAnnotations: () => shapes.length > 0
     }),
-    [canvasToBlob, shapes.length]
+    [canvasToBlob2, shapes.length]
   );
-  const toolButtons = react.useMemo(
+  const toolButtons = React.useMemo(
     () => [
       { value: "rectangle", label: "Rectangle" },
       { value: "arrow", label: "Arrow" }
     ],
     []
   );
-  return /* @__PURE__ */ chunk6TCI6T2U_cjs.React.createElement("div", { style: inlineStyles.annotation }, /* @__PURE__ */ chunk6TCI6T2U_cjs.React.createElement("div", { style: inlineStyles.annotationTools, role: "toolbar", "aria-label": "Annotation tools" }, toolButtons.map((option) => /* @__PURE__ */ chunk6TCI6T2U_cjs.React.createElement(
+  return /* @__PURE__ */ React__namespace.createElement("div", { style: inlineStyles.annotation }, /* @__PURE__ */ React__namespace.createElement("div", { style: inlineStyles.annotationTools, role: "toolbar", "aria-label": "Annotation tools" }, toolButtons.map((option) => /* @__PURE__ */ React__namespace.createElement(
     "button",
     {
       key: option.value,
@@ -1588,7 +1913,7 @@ var AnnotationCanvas = react.forwardRef(function AnnotationCanvas2({ imageUrl },
       onClick: () => setTool(option.value)
     },
     option.label
-  )), /* @__PURE__ */ chunk6TCI6T2U_cjs.React.createElement("button", { type: "button", style: getButtonStyle("secondary"), onClick: () => setShapes([]) }, "Clear")), /* @__PURE__ */ chunk6TCI6T2U_cjs.React.createElement(
+  )), /* @__PURE__ */ React__namespace.createElement("button", { type: "button", style: getButtonStyle("secondary"), onClick: () => setShapes([]) }, "Clear")), /* @__PURE__ */ React__namespace.createElement(
     "canvas",
     {
       ref: canvasRef,
@@ -1612,12 +1937,12 @@ function StepRecording({ onBack, onNext, embedded = false, compact = false }) {
     state: { assets },
     setRecording
   } = useBugReporter();
-  const recording = react.useMemo(() => assets.find((asset) => asset.type === "recording"), [assets]);
-  const activeRef = react.useRef(null);
-  const mountedRef = react.useRef(true);
-  const [isRecording, setIsRecording] = react.useState(Boolean(sharedRecording));
-  const [seconds, setSeconds] = react.useState((_a = sharedRecording == null ? void 0 : sharedRecording.seconds) != null ? _a : 0);
-  const [error, setError] = react.useState(null);
+  const recording = React.useMemo(() => assets.find((asset) => asset.type === "recording"), [assets]);
+  const activeRef = React.useRef(null);
+  const mountedRef = React.useRef(true);
+  const [isRecording, setIsRecording] = React.useState(Boolean(sharedRecording));
+  const [seconds, setSeconds] = React.useState((_a = sharedRecording == null ? void 0 : sharedRecording.seconds) != null ? _a : 0);
+  const [error, setError] = React.useState(null);
   const start = async () => {
     if (sharedRecording) {
       setError("Recording is already in progress.");
@@ -1676,7 +2001,7 @@ function StepRecording({ onBack, onNext, embedded = false, compact = false }) {
     }
     (_a2 = activeRef.current) == null ? void 0 : _a2.stop();
   };
-  react.useEffect(() => {
+  React.useEffect(() => {
     mountedRef.current = true;
     const sync = () => {
       var _a2, _b;
@@ -1692,10 +2017,10 @@ function StepRecording({ onBack, onNext, embedded = false, compact = false }) {
     };
   }, []);
   if (compact) {
-    const compactRecordingAction = !isRecording ? /* @__PURE__ */ chunk6TCI6T2U_cjs.React.createElement("button", { type: "button", style: { ...getButtonStyle("primary", { fullWidth: true }), ...inlineStyles.captureButton }, onClick: start }, /* @__PURE__ */ chunk6TCI6T2U_cjs.React.createElement("svg", { style: inlineStyles.captureIcon, viewBox: "0 0 24 24", "aria-hidden": "true", focusable: "false" }, /* @__PURE__ */ chunk6TCI6T2U_cjs.React.createElement("circle", { cx: "12", cy: "12", r: "4.5" }), /* @__PURE__ */ chunk6TCI6T2U_cjs.React.createElement("path", { d: "M3.5 8.5h3l1.2-2h8.6l1.2 2h3v7h-3l-1.2 2H7.7l-1.2-2h-3z" })), /* @__PURE__ */ chunk6TCI6T2U_cjs.React.createElement("span", null, recording ? "Retake recording" : "Record a video"), recording ? /* @__PURE__ */ chunk6TCI6T2U_cjs.React.createElement("span", { style: inlineStyles.captureDone }, "Saved") : null) : /* @__PURE__ */ chunk6TCI6T2U_cjs.React.createElement("button", { type: "button", style: { ...getButtonStyle("danger", { fullWidth: true }), ...inlineStyles.captureButton }, onClick: stop }, /* @__PURE__ */ chunk6TCI6T2U_cjs.React.createElement("svg", { style: inlineStyles.captureIcon, viewBox: "0 0 24 24", "aria-hidden": "true", focusable: "false" }, /* @__PURE__ */ chunk6TCI6T2U_cjs.React.createElement("rect", { x: "7", y: "7", width: "10", height: "10" })), /* @__PURE__ */ chunk6TCI6T2U_cjs.React.createElement("span", null, "Stop (", seconds, "s)"));
-    return /* @__PURE__ */ chunk6TCI6T2U_cjs.React.createElement("div", { style: inlineStyles.captureItem }, compactRecordingAction, error ? /* @__PURE__ */ chunk6TCI6T2U_cjs.React.createElement("p", { style: { ...inlineStyles.error, marginTop: "8px" } }, error) : null);
+    const compactRecordingAction = !isRecording ? /* @__PURE__ */ React__namespace.createElement("button", { type: "button", style: { ...getButtonStyle("primary", { fullWidth: true }), ...inlineStyles.captureButton }, onClick: start }, /* @__PURE__ */ React__namespace.createElement("svg", { style: inlineStyles.captureIcon, viewBox: "0 0 24 24", "aria-hidden": "true", focusable: "false" }, /* @__PURE__ */ React__namespace.createElement("circle", { cx: "12", cy: "12", r: "4.5" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M3.5 8.5h3l1.2-2h8.6l1.2 2h3v7h-3l-1.2 2H7.7l-1.2-2h-3z" })), /* @__PURE__ */ React__namespace.createElement("span", null, recording ? "Retake recording" : "Record a video"), recording ? /* @__PURE__ */ React__namespace.createElement("span", { style: inlineStyles.captureDone }, "Saved") : null) : /* @__PURE__ */ React__namespace.createElement("button", { type: "button", style: { ...getButtonStyle("danger", { fullWidth: true }), ...inlineStyles.captureButton }, onClick: stop }, /* @__PURE__ */ React__namespace.createElement("svg", { style: inlineStyles.captureIcon, viewBox: "0 0 24 24", "aria-hidden": "true", focusable: "false" }, /* @__PURE__ */ React__namespace.createElement("rect", { x: "7", y: "7", width: "10", height: "10" })), /* @__PURE__ */ React__namespace.createElement("span", null, "Stop (", seconds, "s)"));
+    return /* @__PURE__ */ React__namespace.createElement("div", { style: inlineStyles.captureItem }, compactRecordingAction, error ? /* @__PURE__ */ React__namespace.createElement("p", { style: { ...inlineStyles.error, marginTop: "8px" } }, error) : null);
   }
-  return /* @__PURE__ */ chunk6TCI6T2U_cjs.React.createElement("div", { style: embedded ? void 0 : inlineStyles.step }, embedded ? /* @__PURE__ */ chunk6TCI6T2U_cjs.React.createElement("h3", { style: inlineStyles.h3 }, "Screen recording") : /* @__PURE__ */ chunk6TCI6T2U_cjs.React.createElement("h2", { style: inlineStyles.h2 }, "Screen recording"), /* @__PURE__ */ chunk6TCI6T2U_cjs.React.createElement("p", { style: inlineStyles.p }, "Record up to ", config.storage.limits.maxVideoSeconds, " seconds. You can minimize this sidebar while recording."), /* @__PURE__ */ chunk6TCI6T2U_cjs.React.createElement("div", { style: inlineStyles.actions }, onBack ? /* @__PURE__ */ chunk6TCI6T2U_cjs.React.createElement("button", { type: "button", style: getButtonStyle("secondary", { disabled: isRecording }), onClick: onBack, disabled: isRecording }, "Back") : null, !isRecording ? /* @__PURE__ */ chunk6TCI6T2U_cjs.React.createElement("button", { type: "button", style: getButtonStyle("primary"), onClick: start }, recording ? "Retake recording" : "Record a video") : /* @__PURE__ */ chunk6TCI6T2U_cjs.React.createElement("button", { type: "button", style: getButtonStyle("danger"), onClick: stop }, "Stop (", seconds, "s)")), recording ? /* @__PURE__ */ chunk6TCI6T2U_cjs.React.createElement("video", { src: recording.previewUrl, style: inlineStyles.preview, controls: true }) : null, error ? /* @__PURE__ */ chunk6TCI6T2U_cjs.React.createElement("p", { style: inlineStyles.error }, error) : null, onNext ? /* @__PURE__ */ chunk6TCI6T2U_cjs.React.createElement("div", { style: inlineStyles.actions }, /* @__PURE__ */ chunk6TCI6T2U_cjs.React.createElement("button", { type: "button", style: getButtonStyle("primary"), onClick: onNext }, "Continue")) : null);
+  return /* @__PURE__ */ React__namespace.createElement("div", { style: embedded ? void 0 : inlineStyles.step }, embedded ? /* @__PURE__ */ React__namespace.createElement("h3", { style: inlineStyles.h3 }, "Screen recording") : /* @__PURE__ */ React__namespace.createElement("h2", { style: inlineStyles.h2 }, "Screen recording"), /* @__PURE__ */ React__namespace.createElement("p", { style: inlineStyles.p }, "Record up to ", config.storage.limits.maxVideoSeconds, " seconds. You can minimize this sidebar while recording."), /* @__PURE__ */ React__namespace.createElement("div", { style: inlineStyles.actions }, onBack ? /* @__PURE__ */ React__namespace.createElement("button", { type: "button", style: getButtonStyle("secondary", { disabled: isRecording }), onClick: onBack, disabled: isRecording }, "Back") : null, !isRecording ? /* @__PURE__ */ React__namespace.createElement("button", { type: "button", style: getButtonStyle("primary"), onClick: start }, recording ? "Retake recording" : "Record a video") : /* @__PURE__ */ React__namespace.createElement("button", { type: "button", style: getButtonStyle("danger"), onClick: stop }, "Stop (", seconds, "s)")), recording ? /* @__PURE__ */ React__namespace.createElement("video", { src: recording.previewUrl, style: inlineStyles.preview, controls: true }) : null, error ? /* @__PURE__ */ React__namespace.createElement("p", { style: inlineStyles.error }, error) : null, onNext ? /* @__PURE__ */ React__namespace.createElement("div", { style: inlineStyles.actions }, /* @__PURE__ */ React__namespace.createElement("button", { type: "button", style: getButtonStyle("primary"), onClick: onNext }, "Continue")) : null);
 }
 
 // src/components/StepDescribe.tsx
@@ -1708,13 +2033,13 @@ function StepDescribe({ onNext, CustomForm }) {
     updateAttribute,
     setScreenshot
   } = useBugReporter();
-  const screenshot = react.useMemo(() => assets.find((asset) => asset.type === "screenshot"), [assets]);
-  const recording = react.useMemo(() => assets.find((asset) => asset.type === "recording"), [assets]);
-  const annotationRef = react.useRef(null);
-  const customFormRef = react.useRef(null);
-  const [isCapturing, setIsCapturing] = react.useState(false);
-  const [error, setError] = react.useState(null);
-  react.useEffect(() => {
+  const screenshot = React.useMemo(() => assets.find((asset) => asset.type === "screenshot"), [assets]);
+  const recording = React.useMemo(() => assets.find((asset) => asset.type === "recording"), [assets]);
+  const annotationRef = React.useRef(null);
+  const customFormRef = React.useRef(null);
+  const [isCapturing, setIsCapturing] = React.useState(false);
+  const [error, setError] = React.useState(null);
+  React.useEffect(() => {
     if (!CustomForm) {
       return;
     }
@@ -1794,7 +2119,7 @@ function StepDescribe({ onNext, CustomForm }) {
     onNext();
   };
   const canContinue = Boolean(draft.title.trim()) && (!config.features.screenshot || Boolean(screenshot));
-  return /* @__PURE__ */ chunk6TCI6T2U_cjs.React.createElement("div", { style: { ...inlineStyles.step, display: "flex", flexDirection: "column", minHeight: "100%" } }, /* @__PURE__ */ chunk6TCI6T2U_cjs.React.createElement("h2", { style: inlineStyles.h2 }, "Report a bug"), /* @__PURE__ */ chunk6TCI6T2U_cjs.React.createElement("p", { style: inlineStyles.p }, "Provide enough context so engineers can reproduce what happened."), /* @__PURE__ */ chunk6TCI6T2U_cjs.React.createElement("label", { style: inlineStyles.field }, "Title", /* @__PURE__ */ chunk6TCI6T2U_cjs.React.createElement(
+  return /* @__PURE__ */ React__namespace.createElement("div", { style: { ...inlineStyles.step, display: "flex", flexDirection: "column", minHeight: "100%" } }, /* @__PURE__ */ React__namespace.createElement("h2", { style: inlineStyles.h2 }, "Report a bug"), /* @__PURE__ */ React__namespace.createElement("p", { style: inlineStyles.p }, "Provide enough context so engineers can reproduce what happened."), /* @__PURE__ */ React__namespace.createElement("label", { style: inlineStyles.field }, "Title", /* @__PURE__ */ React__namespace.createElement(
     "input",
     {
       style: inlineStyles.input,
@@ -1803,7 +2128,7 @@ function StepDescribe({ onNext, CustomForm }) {
       placeholder: "Short summary",
       required: true
     }
-  )), /* @__PURE__ */ chunk6TCI6T2U_cjs.React.createElement("label", { style: inlineStyles.field }, "Description", /* @__PURE__ */ chunk6TCI6T2U_cjs.React.createElement(
+  )), /* @__PURE__ */ React__namespace.createElement("label", { style: inlineStyles.field }, "Description", /* @__PURE__ */ React__namespace.createElement(
     "textarea",
     {
       style: inlineStyles.input,
@@ -1812,7 +2137,7 @@ function StepDescribe({ onNext, CustomForm }) {
       placeholder: "What happened?",
       rows: 4
     }
-  )), CustomForm ? /* @__PURE__ */ chunk6TCI6T2U_cjs.React.createElement("div", { ref: customFormRef }, /* @__PURE__ */ chunk6TCI6T2U_cjs.React.createElement(CustomForm, { attributes, setAttributes, updateAttribute })) : null, config.features.screenshot || config.features.recording ? /* @__PURE__ */ chunk6TCI6T2U_cjs.React.createElement(chunk6TCI6T2U_cjs.React.Fragment, null, /* @__PURE__ */ chunk6TCI6T2U_cjs.React.createElement("h3", { style: inlineStyles.h3 }, "Capture"), /* @__PURE__ */ chunk6TCI6T2U_cjs.React.createElement("div", { style: inlineStyles.captureRow }, config.features.screenshot ? /* @__PURE__ */ chunk6TCI6T2U_cjs.React.createElement("div", { style: inlineStyles.captureItem }, /* @__PURE__ */ chunk6TCI6T2U_cjs.React.createElement(
+  )), CustomForm ? /* @__PURE__ */ React__namespace.createElement("div", { ref: customFormRef }, /* @__PURE__ */ React__namespace.createElement(CustomForm, { attributes, setAttributes, updateAttribute })) : null, config.features.screenshot || config.features.recording ? /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, /* @__PURE__ */ React__namespace.createElement("h3", { style: inlineStyles.h3 }, "Capture"), /* @__PURE__ */ React__namespace.createElement("div", { style: inlineStyles.captureRow }, config.features.screenshot ? /* @__PURE__ */ React__namespace.createElement("div", { style: inlineStyles.captureItem }, /* @__PURE__ */ React__namespace.createElement(
     "button",
     {
       type: "button",
@@ -1820,10 +2145,10 @@ function StepDescribe({ onNext, CustomForm }) {
       onClick: startCapture,
       disabled: isCapturing
     },
-    /* @__PURE__ */ chunk6TCI6T2U_cjs.React.createElement("svg", { style: inlineStyles.captureIcon, viewBox: "0 0 24 24", "aria-hidden": "true", focusable: "false" }, /* @__PURE__ */ chunk6TCI6T2U_cjs.React.createElement("path", { d: "M4 8.5h3l1.2-2h7.6l1.2 2h3v9H4z" }), /* @__PURE__ */ chunk6TCI6T2U_cjs.React.createElement("circle", { cx: "12", cy: "13", r: "3.5" })),
-    /* @__PURE__ */ chunk6TCI6T2U_cjs.React.createElement("span", null, isCapturing ? "Capturing..." : screenshot ? "Retake screenshot" : "Screenshot"),
-    screenshot ? /* @__PURE__ */ chunk6TCI6T2U_cjs.React.createElement("span", { style: inlineStyles.captureDone }, "Saved") : null
-  )) : null, config.features.recording ? /* @__PURE__ */ chunk6TCI6T2U_cjs.React.createElement(StepRecording, { embedded: true, compact: true }) : null), /* @__PURE__ */ chunk6TCI6T2U_cjs.React.createElement("p", { style: inlineStyles.captureNote }, config.features.screenshot && config.features.recording ? `Capture a screenshot and optionally record up to ${config.storage.limits.maxVideoSeconds} seconds.` : config.features.screenshot ? "Capture the relevant area before continuing." : `Record up to ${config.storage.limits.maxVideoSeconds} seconds.`), screenshot ? /* @__PURE__ */ chunk6TCI6T2U_cjs.React.createElement("div", { style: inlineStyles.previewWrapper }, config.features.annotations ? /* @__PURE__ */ chunk6TCI6T2U_cjs.React.createElement(AnnotationCanvas, { ref: annotationRef, imageUrl: screenshot.previewUrl }) : /* @__PURE__ */ chunk6TCI6T2U_cjs.React.createElement("img", { src: screenshot.previewUrl, alt: "Screenshot preview", style: inlineStyles.preview })) : null, !screenshot && recording ? /* @__PURE__ */ chunk6TCI6T2U_cjs.React.createElement("p", { style: inlineStyles.captureNote }, "Recording saved.") : null) : null, error ? /* @__PURE__ */ chunk6TCI6T2U_cjs.React.createElement("p", { style: inlineStyles.error }, error) : null, /* @__PURE__ */ chunk6TCI6T2U_cjs.React.createElement(
+    /* @__PURE__ */ React__namespace.createElement("svg", { style: inlineStyles.captureIcon, viewBox: "0 0 24 24", "aria-hidden": "true", focusable: "false" }, /* @__PURE__ */ React__namespace.createElement("path", { d: "M4 8.5h3l1.2-2h7.6l1.2 2h3v9H4z" }), /* @__PURE__ */ React__namespace.createElement("circle", { cx: "12", cy: "13", r: "3.5" })),
+    /* @__PURE__ */ React__namespace.createElement("span", null, isCapturing ? "Capturing..." : screenshot ? "Retake screenshot" : "Screenshot"),
+    screenshot ? /* @__PURE__ */ React__namespace.createElement("span", { style: inlineStyles.captureDone }, "Saved") : null
+  )) : null, config.features.recording ? /* @__PURE__ */ React__namespace.createElement(StepRecording, { embedded: true, compact: true }) : null), /* @__PURE__ */ React__namespace.createElement("p", { style: inlineStyles.captureNote }, config.features.screenshot && config.features.recording ? `Capture a screenshot and optionally record up to ${config.storage.limits.maxVideoSeconds} seconds.` : config.features.screenshot ? "Capture the relevant area before continuing." : `Record up to ${config.storage.limits.maxVideoSeconds} seconds.`), screenshot ? /* @__PURE__ */ React__namespace.createElement("div", { style: inlineStyles.previewWrapper }, config.features.annotations ? /* @__PURE__ */ React__namespace.createElement(AnnotationCanvas, { ref: annotationRef, imageUrl: screenshot.previewUrl }) : /* @__PURE__ */ React__namespace.createElement("img", { src: screenshot.previewUrl, alt: "Screenshot preview", style: inlineStyles.preview })) : null, !screenshot && recording ? /* @__PURE__ */ React__namespace.createElement("p", { style: inlineStyles.captureNote }, "Recording saved.") : null) : null, error ? /* @__PURE__ */ React__namespace.createElement("p", { style: inlineStyles.error }, error) : null, /* @__PURE__ */ React__namespace.createElement(
     "div",
     {
       style: {
@@ -1836,7 +2161,7 @@ function StepDescribe({ onNext, CustomForm }) {
         paddingBottom: "12px"
       }
     },
-    /* @__PURE__ */ chunk6TCI6T2U_cjs.React.createElement(
+    /* @__PURE__ */ React__namespace.createElement(
       "button",
       {
         type: "button",
@@ -1855,7 +2180,7 @@ function StepReview({ onBack }) {
     state: { assets, draft, isSubmitting, uploadProgress, error },
     submit
   } = useBugReporter();
-  return /* @__PURE__ */ chunk6TCI6T2U_cjs.React.createElement("div", { style: { ...inlineStyles.step, display: "flex", flexDirection: "column", minHeight: "100%" } }, /* @__PURE__ */ chunk6TCI6T2U_cjs.React.createElement("h2", { style: inlineStyles.h2 }, "Review and submit"), /* @__PURE__ */ chunk6TCI6T2U_cjs.React.createElement("p", { style: inlineStyles.p }, "Confirm details, then send your report."), /* @__PURE__ */ chunk6TCI6T2U_cjs.React.createElement("div", { style: inlineStyles.summary }, /* @__PURE__ */ chunk6TCI6T2U_cjs.React.createElement("strong", null, draft.title || "Untitled bug report"), /* @__PURE__ */ chunk6TCI6T2U_cjs.React.createElement("p", { style: inlineStyles.p }, draft.description || "No description provided.")), /* @__PURE__ */ chunk6TCI6T2U_cjs.React.createElement("div", { style: inlineStyles.assets }, assets.map((asset) => /* @__PURE__ */ chunk6TCI6T2U_cjs.React.createElement("div", { key: asset.id, style: inlineStyles.assetCard }, /* @__PURE__ */ chunk6TCI6T2U_cjs.React.createElement("span", { style: inlineStyles.assetType }, asset.type), asset.type === "recording" ? /* @__PURE__ */ chunk6TCI6T2U_cjs.React.createElement("video", { src: asset.previewUrl, controls: true, style: inlineStyles.preview }) : /* @__PURE__ */ chunk6TCI6T2U_cjs.React.createElement("img", { src: asset.previewUrl, alt: `${asset.type} preview`, style: inlineStyles.preview })))), isSubmitting ? /* @__PURE__ */ chunk6TCI6T2U_cjs.React.createElement("div", { style: inlineStyles.uploadProgress, "aria-live": "polite" }, "Uploading assets: ", Math.round(uploadProgress * 100), "%", /* @__PURE__ */ chunk6TCI6T2U_cjs.React.createElement("div", { style: inlineStyles.progressTrack }, /* @__PURE__ */ chunk6TCI6T2U_cjs.React.createElement("div", { style: { ...inlineStyles.progressFill, width: `${Math.round(uploadProgress * 100)}%` } }))) : null, error ? /* @__PURE__ */ chunk6TCI6T2U_cjs.React.createElement("p", { style: inlineStyles.error }, error) : null, /* @__PURE__ */ chunk6TCI6T2U_cjs.React.createElement(
+  return /* @__PURE__ */ React__namespace.createElement("div", { style: { ...inlineStyles.step, display: "flex", flexDirection: "column", minHeight: "100%" } }, /* @__PURE__ */ React__namespace.createElement("h2", { style: inlineStyles.h2 }, "Review and submit"), /* @__PURE__ */ React__namespace.createElement("p", { style: inlineStyles.p }, "Confirm details, then send your report."), /* @__PURE__ */ React__namespace.createElement("div", { style: inlineStyles.summary }, /* @__PURE__ */ React__namespace.createElement("strong", null, draft.title || "Untitled bug report"), /* @__PURE__ */ React__namespace.createElement("p", { style: inlineStyles.p }, draft.description || "No description provided.")), /* @__PURE__ */ React__namespace.createElement("div", { style: inlineStyles.assets }, assets.map((asset) => /* @__PURE__ */ React__namespace.createElement("div", { key: asset.id, style: inlineStyles.assetCard }, /* @__PURE__ */ React__namespace.createElement("span", { style: inlineStyles.assetType }, asset.type), asset.type === "recording" ? /* @__PURE__ */ React__namespace.createElement("video", { src: asset.previewUrl, controls: true, style: inlineStyles.preview }) : /* @__PURE__ */ React__namespace.createElement("img", { src: asset.previewUrl, alt: `${asset.type} preview`, style: inlineStyles.preview })))), isSubmitting ? /* @__PURE__ */ React__namespace.createElement("div", { style: inlineStyles.uploadProgress, "aria-live": "polite" }, "Uploading assets: ", Math.round(uploadProgress * 100), "%", /* @__PURE__ */ React__namespace.createElement("div", { style: inlineStyles.progressTrack }, /* @__PURE__ */ React__namespace.createElement("div", { style: { ...inlineStyles.progressFill, width: `${Math.round(uploadProgress * 100)}%` } }))) : null, error ? /* @__PURE__ */ React__namespace.createElement("p", { style: inlineStyles.error }, error) : null, /* @__PURE__ */ React__namespace.createElement(
     "div",
     {
       style: {
@@ -1868,7 +2193,7 @@ function StepReview({ onBack }) {
         paddingBottom: "12px"
       }
     },
-    /* @__PURE__ */ chunk6TCI6T2U_cjs.React.createElement(
+    /* @__PURE__ */ React__namespace.createElement(
       "button",
       {
         type: "button",
@@ -1878,7 +2203,7 @@ function StepReview({ onBack }) {
       },
       "Back"
     ),
-    /* @__PURE__ */ chunk6TCI6T2U_cjs.React.createElement(
+    /* @__PURE__ */ React__namespace.createElement(
       "button",
       {
         type: "button",
@@ -1895,15 +2220,15 @@ function StepReview({ onBack }) {
 var DOCK_SIDES = ["left", "right", "top", "bottom"];
 function DockIcon({ side }) {
   if (side === "left") {
-    return /* @__PURE__ */ chunk6TCI6T2U_cjs.React.createElement("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", focusable: "false", style: inlineStyles.iconSvg }, /* @__PURE__ */ chunk6TCI6T2U_cjs.React.createElement("path", { d: "M3.5 5.5h17v13h-17z" }), /* @__PURE__ */ chunk6TCI6T2U_cjs.React.createElement("path", { d: "M3.5 5.5h4.5v13H3.5z", fill: "currentColor", stroke: "none", opacity: "0.85" }));
+    return /* @__PURE__ */ React__namespace.createElement("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", focusable: "false", style: inlineStyles.iconSvg }, /* @__PURE__ */ React__namespace.createElement("path", { d: "M3.5 5.5h17v13h-17z" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M3.5 5.5h4.5v13H3.5z", fill: "currentColor", stroke: "none", opacity: "0.85" }));
   }
   if (side === "right") {
-    return /* @__PURE__ */ chunk6TCI6T2U_cjs.React.createElement("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", focusable: "false", style: inlineStyles.iconSvg }, /* @__PURE__ */ chunk6TCI6T2U_cjs.React.createElement("path", { d: "M3.5 5.5h17v13h-17z" }), /* @__PURE__ */ chunk6TCI6T2U_cjs.React.createElement("path", { d: "M16 5.5h4.5v13H16z", fill: "currentColor", stroke: "none", opacity: "0.85" }));
+    return /* @__PURE__ */ React__namespace.createElement("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", focusable: "false", style: inlineStyles.iconSvg }, /* @__PURE__ */ React__namespace.createElement("path", { d: "M3.5 5.5h17v13h-17z" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M16 5.5h4.5v13H16z", fill: "currentColor", stroke: "none", opacity: "0.85" }));
   }
   if (side === "top") {
-    return /* @__PURE__ */ chunk6TCI6T2U_cjs.React.createElement("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", focusable: "false", style: inlineStyles.iconSvg }, /* @__PURE__ */ chunk6TCI6T2U_cjs.React.createElement("path", { d: "M3.5 5.5h17v13h-17z" }), /* @__PURE__ */ chunk6TCI6T2U_cjs.React.createElement("path", { d: "M3.5 5.5h17v4.5h-17z", fill: "currentColor", stroke: "none", opacity: "0.85" }));
+    return /* @__PURE__ */ React__namespace.createElement("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", focusable: "false", style: inlineStyles.iconSvg }, /* @__PURE__ */ React__namespace.createElement("path", { d: "M3.5 5.5h17v13h-17z" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M3.5 5.5h17v4.5h-17z", fill: "currentColor", stroke: "none", opacity: "0.85" }));
   }
-  return /* @__PURE__ */ chunk6TCI6T2U_cjs.React.createElement("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", focusable: "false", style: inlineStyles.iconSvg }, /* @__PURE__ */ chunk6TCI6T2U_cjs.React.createElement("path", { d: "M3.5 5.5h17v13h-17z" }), /* @__PURE__ */ chunk6TCI6T2U_cjs.React.createElement("path", { d: "M3.5 14h17v4.5h-17z", fill: "currentColor", stroke: "none", opacity: "0.85" }));
+  return /* @__PURE__ */ React__namespace.createElement("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", focusable: "false", style: inlineStyles.iconSvg }, /* @__PURE__ */ React__namespace.createElement("path", { d: "M3.5 5.5h17v13h-17z" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M3.5 14h17v4.5h-17z", fill: "currentColor", stroke: "none", opacity: "0.85" }));
 }
 function BugReporterShell({ CustomForm, launcherPosition, launcherText, themeMode, buttonColor }) {
   const { config, state, setDockSide, setStep, close, reset } = useBugReporter();
@@ -1917,7 +2242,7 @@ function BugReporterShell({ CustomForm, launcherPosition, launcherText, themeMod
     close();
   };
   const modalTitle = state.step === "success" ? "Report submitted" : "Report a bug";
-  return /* @__PURE__ */ chunk6TCI6T2U_cjs.React.createElement(chunk6TCI6T2U_cjs.React.Fragment, null, /* @__PURE__ */ chunk6TCI6T2U_cjs.React.createElement(LauncherButton, { position: launcherPosition, text: launcherText, themeMode, buttonColor }), /* @__PURE__ */ chunk6TCI6T2U_cjs.React.createElement(
+  return /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, /* @__PURE__ */ React__namespace.createElement(LauncherButton, { position: launcherPosition, text: launcherText, themeMode, buttonColor }), /* @__PURE__ */ React__namespace.createElement(
     Modal,
     {
       isOpen: state.isOpen,
@@ -1928,9 +2253,9 @@ function BugReporterShell({ CustomForm, launcherPosition, launcherText, themeMod
       zIndex: config.theme.zIndex + 1,
       onRequestClose: requestClose
     },
-    /* @__PURE__ */ chunk6TCI6T2U_cjs.React.createElement("div", { style: inlineStyles.modalHeader }, /* @__PURE__ */ chunk6TCI6T2U_cjs.React.createElement("div", { style: inlineStyles.dockControls, role: "group", "aria-label": "Dock side" }, DOCK_SIDES.map((side) => {
+    /* @__PURE__ */ React__namespace.createElement("div", { style: inlineStyles.modalHeader }, /* @__PURE__ */ React__namespace.createElement("div", { style: inlineStyles.dockControls, role: "group", "aria-label": "Dock side" }, DOCK_SIDES.map((side) => {
       const isActive = state.dockSide === side;
-      return /* @__PURE__ */ chunk6TCI6T2U_cjs.React.createElement(
+      return /* @__PURE__ */ React__namespace.createElement(
         "button",
         {
           key: side,
@@ -1940,11 +2265,11 @@ function BugReporterShell({ CustomForm, launcherPosition, launcherText, themeMod
           "aria-pressed": isActive,
           "aria-label": `Dock ${side}`
         },
-        /* @__PURE__ */ chunk6TCI6T2U_cjs.React.createElement(DockIcon, { side })
+        /* @__PURE__ */ React__namespace.createElement(DockIcon, { side })
       );
-    })), /* @__PURE__ */ chunk6TCI6T2U_cjs.React.createElement("button", { style: inlineStyles.iconButton, type: "button", onClick: requestClose, "aria-label": "Close bug reporter" }, /* @__PURE__ */ chunk6TCI6T2U_cjs.React.createElement("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", focusable: "false", style: inlineStyles.iconSvg }, /* @__PURE__ */ chunk6TCI6T2U_cjs.React.createElement("path", { d: "M6 6 18 18M18 6 6 18" })))),
-    state.step === "describe" ? /* @__PURE__ */ chunk6TCI6T2U_cjs.React.createElement(StepDescribe, { onNext: nextFromDescribe, CustomForm }) : null,
-    state.step === "review" || state.step === "submitting" ? /* @__PURE__ */ chunk6TCI6T2U_cjs.React.createElement(
+    })), /* @__PURE__ */ React__namespace.createElement("button", { style: inlineStyles.iconButton, type: "button", onClick: requestClose, "aria-label": "Close bug reporter" }, /* @__PURE__ */ React__namespace.createElement("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", focusable: "false", style: inlineStyles.iconSvg }, /* @__PURE__ */ React__namespace.createElement("path", { d: "M6 6 18 18M18 6 6 18" })))),
+    state.step === "describe" ? /* @__PURE__ */ React__namespace.createElement(StepDescribe, { onNext: nextFromDescribe, CustomForm }) : null,
+    state.step === "review" || state.step === "submitting" ? /* @__PURE__ */ React__namespace.createElement(
       StepReview,
       {
         onBack: () => {
@@ -1952,7 +2277,7 @@ function BugReporterShell({ CustomForm, launcherPosition, launcherText, themeMod
         }
       }
     ) : null,
-    state.step === "success" ? /* @__PURE__ */ chunk6TCI6T2U_cjs.React.createElement("div", { style: inlineStyles.step }, /* @__PURE__ */ chunk6TCI6T2U_cjs.React.createElement("h2", { style: inlineStyles.h2 }, "Thanks, report submitted"), /* @__PURE__ */ chunk6TCI6T2U_cjs.React.createElement("p", { style: inlineStyles.p }, "Your bug report has been sent successfully."), /* @__PURE__ */ chunk6TCI6T2U_cjs.React.createElement("div", { style: inlineStyles.actions }, /* @__PURE__ */ chunk6TCI6T2U_cjs.React.createElement("button", { type: "button", style: getButtonStyle("primary"), onClick: requestClose }, "Close"))) : null
+    state.step === "success" ? /* @__PURE__ */ React__namespace.createElement("div", { style: inlineStyles.step }, /* @__PURE__ */ React__namespace.createElement("h2", { style: inlineStyles.h2 }, "Thanks, report submitted"), /* @__PURE__ */ React__namespace.createElement("p", { style: inlineStyles.p }, "Your bug report has been sent successfully."), /* @__PURE__ */ React__namespace.createElement("div", { style: inlineStyles.actions }, /* @__PURE__ */ React__namespace.createElement("button", { type: "button", style: getButtonStyle("primary"), onClick: requestClose }, "Close"))) : null
   ));
 }
 function BugReporter({
@@ -1965,7 +2290,7 @@ function BugReporter({
 }) {
   var _a, _b;
   const resolvedButtonColor = (_b = buttonColor != null ? buttonColor : (_a = config.theme) == null ? void 0 : _a.primaryColor) != null ? _b : "#3b82f6";
-  return /* @__PURE__ */ chunk6TCI6T2U_cjs.React.createElement(BugReporterProvider, { config }, /* @__PURE__ */ chunk6TCI6T2U_cjs.React.createElement(
+  return /* @__PURE__ */ React__namespace.createElement(BugReporterProvider, { config }, /* @__PURE__ */ React__namespace.createElement(
     BugReporterShell,
     {
       CustomForm,
@@ -1977,11 +2302,8 @@ function BugReporter({
   ));
 }
 
-Object.defineProperty(exports, "BugReporterError", {
-  enumerable: true,
-  get: function () { return chunk6TCI6T2U_cjs.BugReporterError; }
-});
 exports.BugReporter = BugReporter;
+exports.BugReporterError = BugReporterError;
 exports.BugReporterProvider = BugReporterProvider;
 exports.useBugReporter = useBugReporter;
 //# sourceMappingURL=index.cjs.map