@fogg/bug-reporter 1.0.0

package/dist/index.js

@@ -0,0 +1,1956 @@
+import { React, BugReporterError, __publicField } from './chunk-S2YRP4GT.js';
+export { BugReporterError } from './chunk-S2YRP4GT.js';
+import { createContext, forwardRef, useRef, useState, useCallback, useEffect, useImperativeHandle, useMemo, useContext } from 'react';
+import { createPortal } from 'react-dom';
+
+// src/diagnostics/ua.ts
+function detectBrowserAndOS(userAgent) {
+  let browser = "Unknown";
+  let os = "Unknown";
+  if (/Edg\//.test(userAgent)) browser = "Edge";
+  else if (/Chrome\//.test(userAgent)) browser = "Chrome";
+  else if (/Firefox\//.test(userAgent)) browser = "Firefox";
+  else if (/Safari\//.test(userAgent) && !/Chrome\//.test(userAgent)) browser = "Safari";
+  if (/Windows NT/.test(userAgent)) os = "Windows";
+  else if (/Mac OS X/.test(userAgent)) os = "macOS";
+  else if (/Android/.test(userAgent)) os = "Android";
+  else if (/iPhone|iPad|iPod/.test(userAgent)) os = "iOS";
+  else if (/Linux/.test(userAgent)) os = "Linux";
+  return { browser, os };
+}
+
+// src/diagnostics/collect.ts
+function getUserAgentDataSnapshot() {
+  const userAgentData = navigator.userAgentData;
+  if (!userAgentData) {
+    return void 0;
+  }
+  return {
+    brands: userAgentData.brands?.map((item) => ({
+      brand: item.brand,
+      version: item.version
+    })),
+    mobile: userAgentData.mobile,
+    platform: userAgentData.platform
+  };
+}
+function collectDiagnostics(config, options) {
+  const nav = performance.getEntriesByType("navigation")[0];
+  const { browser, os } = detectBrowserAndOS(navigator.userAgent);
+  return {
+    url: window.location.href,
+    referrer: document.referrer,
+    timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+    timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+    viewport: {
+      width: window.innerWidth,
+      height: window.innerHeight,
+      pixelRatio: window.devicePixelRatio || 1
+    },
+    browser,
+    os,
+    language: navigator.language,
+    userAgent: navigator.userAgent,
+    userAgentData: getUserAgentDataSnapshot(),
+    appVersion: config.appVersion,
+    environment: config.environment,
+    projectId: config.projectId,
+    logs: options?.logs,
+    requests: options?.requests,
+    navigationTiming: {
+      domComplete: nav?.domComplete,
+      loadEventEnd: nav?.loadEventEnd,
+      responseEnd: nav?.responseEnd
+    }
+  };
+}
+
+// src/diagnostics/console-buffer.ts
+var ConsoleBuffer = class {
+  constructor(maxEntries) {
+    this.maxEntries = maxEntries;
+    __publicField(this, "entries", []);
+    __publicField(this, "originals", /* @__PURE__ */ new Map());
+    __publicField(this, "installed", false);
+    __publicField(this, "onWindowError", (event) => {
+      this.push("error", [event.message, event.error instanceof Error ? event.error.stack ?? "" : ""]);
+    });
+    __publicField(this, "onUnhandledRejection", (event) => {
+      this.push("error", ["Unhandled promise rejection", event.reason]);
+    });
+  }
+  install() {
+    if (this.installed) {
+      return;
+    }
+    const levels = ["log", "info", "warn", "error"];
+    levels.forEach((level) => {
+      const original = console[level];
+      this.originals.set(level, original.bind(console));
+      console[level] = ((...args) => {
+        this.push(level, args);
+        original(...args);
+      });
+    });
+    if (typeof window !== "undefined") {
+      window.addEventListener("error", this.onWindowError);
+      window.addEventListener("unhandledrejection", this.onUnhandledRejection);
+    }
+    this.installed = true;
+  }
+  uninstall() {
+    if (!this.installed) {
+      return;
+    }
+    this.originals.forEach((original, level) => {
+      console[level] = original;
+    });
+    this.originals.clear();
+    if (typeof window !== "undefined") {
+      window.removeEventListener("error", this.onWindowError);
+      window.removeEventListener("unhandledrejection", this.onUnhandledRejection);
+    }
+    this.installed = false;
+  }
+  clear() {
+    this.entries.length = 0;
+  }
+  snapshot() {
+    return [...this.entries];
+  }
+  push(level, args) {
+    const message = args.map((arg) => {
+      if (typeof arg === "string") {
+        return arg;
+      }
+      try {
+        return JSON.stringify(arg);
+      } catch {
+        return String(arg);
+      }
+    }).join(" ");
+    this.entries.push({
+      level,
+      message,
+      timestamp: (/* @__PURE__ */ new Date()).toISOString()
+    });
+    if (this.entries.length > this.maxEntries) {
+      this.entries.splice(0, this.entries.length - this.maxEntries);
+    }
+  }
+};
+
+// src/diagnostics/network-buffer.ts
+var xhrMeta = /* @__PURE__ */ new WeakMap();
+function extractUrl(input) {
+  if (typeof input === "string") {
+    return input;
+  }
+  if (input instanceof URL) {
+    return input.toString();
+  }
+  return input.url;
+}
+function extractMethod(input, init) {
+  if (init?.method) {
+    return String(init.method).toUpperCase();
+  }
+  if (typeof Request !== "undefined" && input instanceof Request) {
+    return input.method.toUpperCase();
+  }
+  return "GET";
+}
+var NetworkBuffer = class {
+  constructor(maxEntries) {
+    this.maxEntries = maxEntries;
+    __publicField(this, "entries", []);
+    __publicField(this, "installed", false);
+    __publicField(this, "originalFetch");
+    __publicField(this, "originalXhrOpen");
+    __publicField(this, "originalXhrSend");
+  }
+  install() {
+    if (this.installed) {
+      return;
+    }
+    this.installFetch();
+    this.installXhr();
+    this.installed = true;
+  }
+  uninstall() {
+    if (!this.installed) {
+      return;
+    }
+    if (this.originalFetch) {
+      window.fetch = this.originalFetch;
+    }
+    if (this.originalXhrOpen) {
+      XMLHttpRequest.prototype.open = this.originalXhrOpen;
+    }
+    if (this.originalXhrSend) {
+      XMLHttpRequest.prototype.send = this.originalXhrSend;
+    }
+    this.installed = false;
+  }
+  clear() {
+    this.entries.length = 0;
+  }
+  snapshot() {
+    return [...this.entries];
+  }
+  installFetch() {
+    if (typeof window === "undefined" || typeof window.fetch !== "function") {
+      return;
+    }
+    this.originalFetch = window.fetch.bind(window);
+    const originalFetch = this.originalFetch;
+    window.fetch = async (input, init) => {
+      const timestamp = (/* @__PURE__ */ new Date()).toISOString();
+      const startedAt = performance.now();
+      const method = extractMethod(input, init);
+      const url = extractUrl(input);
+      try {
+        const response = await originalFetch(input, init);
+        this.push({
+          transport: "fetch",
+          method,
+          url,
+          status: response.status,
+          ok: response.ok,
+          durationMs: Math.round(performance.now() - startedAt),
+          timestamp
+        });
+        return response;
+      } catch (error) {
+        this.push({
+          transport: "fetch",
+          method,
+          url,
+          durationMs: Math.round(performance.now() - startedAt),
+          timestamp,
+          error: error instanceof Error ? error.message : String(error)
+        });
+        throw error;
+      }
+    };
+  }
+  installXhr() {
+    if (typeof XMLHttpRequest === "undefined") {
+      return;
+    }
+    this.originalXhrOpen = XMLHttpRequest.prototype.open;
+    this.originalXhrSend = XMLHttpRequest.prototype.send;
+    const buffer = this;
+    XMLHttpRequest.prototype.open = function patchedOpen(method, url, async, username, password) {
+      xhrMeta.set(this, {
+        method: String(method || "GET").toUpperCase(),
+        url: String(url),
+        startedAt: 0,
+        timestamp: ""
+      });
+      buffer.originalXhrOpen?.call(this, method, url, async ?? true, username ?? null, password ?? null);
+    };
+    XMLHttpRequest.prototype.send = function patchedSend(body) {
+      const existing = xhrMeta.get(this);
+      if (existing) {
+        existing.startedAt = performance.now();
+        existing.timestamp = (/* @__PURE__ */ new Date()).toISOString();
+        xhrMeta.set(this, existing);
+        const onLoadEnd = () => {
+          const meta = xhrMeta.get(this);
+          if (!meta) {
+            return;
+          }
+          buffer.push({
+            transport: "xhr",
+            method: meta.method,
+            url: meta.url,
+            status: this.status,
+            ok: this.status >= 200 && this.status < 300,
+            durationMs: Math.round(performance.now() - meta.startedAt),
+            timestamp: meta.timestamp
+          });
+          xhrMeta.delete(this);
+          this.removeEventListener("loadend", onLoadEnd);
+          this.removeEventListener("error", onError);
+        };
+        const onError = () => {
+          const meta = xhrMeta.get(this);
+          if (!meta) {
+            return;
+          }
+          buffer.push({
+            transport: "xhr",
+            method: meta.method,
+            url: meta.url,
+            status: this.status || void 0,
+            ok: false,
+            durationMs: Math.round(performance.now() - meta.startedAt),
+            timestamp: meta.timestamp,
+            error: "XMLHttpRequest failed"
+          });
+          xhrMeta.delete(this);
+          this.removeEventListener("loadend", onLoadEnd);
+          this.removeEventListener("error", onError);
+        };
+        this.addEventListener("loadend", onLoadEnd);
+        this.addEventListener("error", onError);
+      }
+      buffer.originalXhrSend?.call(this, body);
+    };
+  }
+  push(entry) {
+    this.entries.push(entry);
+    if (this.entries.length > this.maxEntries) {
+      this.entries.splice(0, this.entries.length - this.maxEntries);
+    }
+  }
+};
+var BugReporterContext = createContext(void 0);
+
+// src/core/defaults.ts
+var DEFAULT_MASK_SELECTORS = [
+  "input[type='password']",
+  "[data-bug-reporter-mask='true']"
+];
+function withDefaults(config) {
+  return {
+    apiEndpoint: config.apiEndpoint,
+    projectId: config.projectId,
+    appVersion: config.appVersion,
+    environment: config.environment,
+    storage: {
+      mode: config.storage?.mode ?? "proxy",
+      s3: config.storage?.s3,
+      local: config.storage?.local,
+      proxy: config.storage?.proxy,
+      limits: {
+        maxVideoSeconds: config.storage?.limits?.maxVideoSeconds ?? 30,
+        maxVideoBytes: config.storage?.limits?.maxVideoBytes ?? 50 * 1024 * 1024,
+        maxScreenshotBytes: config.storage?.limits?.maxScreenshotBytes ?? 8 * 1024 * 1024
+      }
+    },
+    auth: {
+      headers: config.auth?.headers ?? {},
+      withCredentials: config.auth?.withCredentials ?? false
+    },
+    theme: {
+      primaryColor: config.theme?.primaryColor ?? "#1b74e4",
+      position: config.theme?.position ?? "bottom-right",
+      zIndex: config.theme?.zIndex ?? 2147483e3,
+      borderRadius: config.theme?.borderRadius ?? "999px"
+    },
+    features: {
+      screenshot: config.features?.screenshot ?? true,
+      recording: config.features?.recording ?? true,
+      annotations: config.features?.annotations ?? true,
+      consoleLogs: config.features?.consoleLogs ?? false,
+      networkInfo: config.features?.networkInfo ?? false
+    },
+    user: config.user,
+    attributes: config.attributes ?? {},
+    privacy: {
+      maskSelectors: config.privacy?.maskSelectors ?? DEFAULT_MASK_SELECTORS,
+      redactTextPatterns: config.privacy?.redactTextPatterns ?? []
+    },
+    diagnostics: {
+      consoleBufferSize: config.diagnostics?.consoleBufferSize ?? 100,
+      requestBufferSize: config.diagnostics?.requestBufferSize ?? 200
+    },
+    hooks: {
+      beforeSubmit: config.hooks?.beforeSubmit,
+      onSuccess: config.hooks?.onSuccess,
+      onError: config.hooks?.onError
+    }
+  };
+}
+
+// src/storage/local-public.ts
+var LocalPublicProvider = class {
+  constructor(options) {
+    this.options = options;
+  }
+  async prepareUploads(files) {
+    return files.map((file) => ({
+      id: file.id,
+      method: "POST",
+      uploadUrl: this.options.uploadEndpoint,
+      headers: this.options.authHeaders,
+      type: file.type
+    }));
+  }
+  async upload(instruction, blob, onProgress) {
+    onProgress?.(0);
+    const form = new FormData();
+    form.append("file", blob, instruction.id);
+    form.append("id", instruction.id);
+    form.append("type", instruction.type);
+    const response = await fetch(instruction.uploadUrl, {
+      method: "POST",
+      headers: instruction.headers,
+      credentials: this.options.withCredentials ? "include" : "same-origin",
+      body: form
+    });
+    if (!response.ok) {
+      throw new BugReporterError("UPLOAD_ERROR", `Local upload failed (${response.status}).`);
+    }
+    const payload = await response.json();
+    onProgress?.(1);
+    return {
+      id: instruction.id,
+      type: instruction.type,
+      url: payload.url || (payload.key && this.options.publicBaseUrl ? `${this.options.publicBaseUrl.replace(/\/$/, "")}/${payload.key}` : instruction.uploadUrl),
+      key: payload.key,
+      mimeType: blob.type,
+      size: blob.size
+    };
+  }
+};
+
+// src/storage/proxy.ts
+var ProxyProvider = class {
+  constructor(options) {
+    this.options = options;
+  }
+  async prepareUploads(files) {
+    return files.map((file) => ({
+      id: file.id,
+      method: "POST",
+      uploadUrl: this.options.uploadEndpoint,
+      headers: this.options.authHeaders,
+      type: file.type
+    }));
+  }
+  async upload(instruction, blob, onProgress) {
+    onProgress?.(0);
+    const response = await fetch(instruction.uploadUrl, {
+      method: "POST",
+      headers: {
+        "content-type": blob.type || "application/octet-stream",
+        "x-bug-reporter-asset-id": instruction.id,
+        "x-bug-reporter-asset-type": instruction.type,
+        ...instruction.headers
+      },
+      credentials: this.options.withCredentials ? "include" : "same-origin",
+      body: blob
+    });
+    if (!response.ok) {
+      throw new BugReporterError("UPLOAD_ERROR", `Proxy upload failed (${response.status}).`);
+    }
+    const payload = await response.json();
+    onProgress?.(1);
+    return {
+      id: instruction.id,
+      type: instruction.type,
+      url: payload.url,
+      key: payload.key,
+      mimeType: blob.type,
+      size: blob.size
+    };
+  }
+};
+
+// src/storage/s3-presigned.ts
+var S3PresignedProvider = class {
+  constructor(options) {
+    this.options = options;
+  }
+  async prepareUploads(files) {
+    const response = await fetch(this.options.presignEndpoint, {
+      method: "POST",
+      headers: {
+        "content-type": "application/json",
+        ...this.options.authHeaders
+      },
+      credentials: this.options.withCredentials ? "include" : "same-origin",
+      body: JSON.stringify({ files })
+    });
+    if (!response.ok) {
+      throw new BugReporterError("UPLOAD_ERROR", `Failed to prepare uploads (${response.status}).`);
+    }
+    const payload = await response.json();
+    if (!payload.uploads?.length) {
+      throw new BugReporterError("UPLOAD_ERROR", "Presign endpoint did not return upload instructions.");
+    }
+    return payload.uploads;
+  }
+  async upload(instruction, blob, onProgress) {
+    onProgress?.(0);
+    if (instruction.method === "POST" && instruction.fields) {
+      const formData = new FormData();
+      Object.entries(instruction.fields).forEach(([key, value]) => formData.append(key, value));
+      formData.append("file", blob);
+      const response = await fetch(instruction.uploadUrl, {
+        method: "POST",
+        body: formData
+      });
+      if (!response.ok) {
+        throw new BugReporterError("UPLOAD_ERROR", `S3 form upload failed (${response.status}).`);
+      }
+    } else {
+      const response = await fetch(instruction.uploadUrl, {
+        method: instruction.method,
+        headers: instruction.headers,
+        body: blob
+      });
+      if (!response.ok) {
+        throw new BugReporterError("UPLOAD_ERROR", `S3 upload failed (${response.status}).`);
+      }
+    }
+    onProgress?.(1);
+    const publicUrl = instruction.publicUrl ?? (this.options.publicBaseUrl && instruction.key ? `${this.options.publicBaseUrl.replace(/\/$/, "")}/${instruction.key}` : instruction.uploadUrl);
+    return {
+      id: instruction.id,
+      type: instruction.type,
+      key: instruction.key,
+      url: publicUrl,
+      mimeType: blob.type,
+      size: blob.size
+    };
+  }
+};
+
+// src/storage/factory.ts
+function createStorageProvider(config) {
+  if (config.storage.mode === "s3-presigned") {
+    const presignEndpoint = config.storage.s3?.presignEndpoint;
+    if (!presignEndpoint) {
+      throw new Error("storage.s3.presignEndpoint is required for s3-presigned mode.");
+    }
+    return new S3PresignedProvider({
+      presignEndpoint,
+      publicBaseUrl: config.storage.s3?.publicBaseUrl,
+      authHeaders: config.auth.headers,
+      withCredentials: config.auth.withCredentials
+    });
+  }
+  if (config.storage.mode === "local-public") {
+    const uploadEndpoint2 = config.storage.local?.uploadEndpoint;
+    if (!uploadEndpoint2) {
+      throw new Error("storage.local.uploadEndpoint is required for local-public mode.");
+    }
+    return new LocalPublicProvider({
+      uploadEndpoint: uploadEndpoint2,
+      publicBaseUrl: config.storage.local?.publicBaseUrl,
+      authHeaders: config.auth.headers,
+      withCredentials: config.auth.withCredentials
+    });
+  }
+  const uploadEndpoint = config.storage.proxy?.uploadEndpoint;
+  if (!uploadEndpoint) {
+    throw new Error("storage.proxy.uploadEndpoint is required for proxy mode.");
+  }
+  return new ProxyProvider({
+    uploadEndpoint,
+    authHeaders: config.auth.headers,
+    withCredentials: config.auth.withCredentials
+  });
+}
+
+// src/core/utils.ts
+function uid(prefix = "br") {
+  return `${prefix}_${Math.random().toString(36).slice(2, 10)}_${Date.now().toString(36)}`;
+}
+function blobToObjectUrl(blob) {
+  return URL.createObjectURL(blob);
+}
+function revokeObjectUrl(url) {
+  if (!url) {
+    return;
+  }
+  URL.revokeObjectURL(url);
+}
+async function sleep(ms) {
+  await new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+// src/core/upload.ts
+async function withRetry(fn, retries) {
+  let lastError;
+  for (let attempt = 0; attempt <= retries; attempt += 1) {
+    try {
+      return await fn();
+    } catch (error) {
+      lastError = error;
+      if (attempt < retries) {
+        await sleep(300 * (attempt + 1));
+      }
+    }
+  }
+  throw lastError;
+}
+async function uploadAssets(options) {
+  const files = options.assets.map((asset) => ({
+    id: asset.id,
+    name: asset.filename,
+    type: asset.type,
+    mimeType: asset.mimeType,
+    size: asset.size
+  }));
+  const instructions = await options.provider.prepareUploads(files);
+  const byId = new Map(instructions.map((instruction) => [instruction.id, instruction]));
+  const refs = [];
+  let completed = 0;
+  for (const asset of options.assets) {
+    const instruction = byId.get(asset.id);
+    if (!instruction) {
+      throw new BugReporterError("UPLOAD_ERROR", `No upload instruction for asset ${asset.id}.`);
+    }
+    const ref = await withRetry(
+      () => options.provider.upload(instruction, asset.blob, (inner) => {
+        const aggregate = (completed + inner) / options.assets.length;
+        options.onProgress?.(aggregate);
+      }),
+      options.retries ?? 2
+    );
+    refs.push(ref);
+    completed += 1;
+    options.onProgress?.(completed / options.assets.length);
+  }
+  return refs;
+}
+
+// src/core/submit.ts
+async function submitReport(options) {
+  const provider = createStorageProvider(options.config);
+  const assetReferences = await uploadAssets({
+    provider,
+    assets: options.assets,
+    retries: 2,
+    onProgress: options.onUploadProgress
+  });
+  const payloadBase = {
+    issue: {
+      title: options.draft.title,
+      description: options.draft.description,
+      projectId: options.config.projectId,
+      environment: options.config.environment,
+      appVersion: options.config.appVersion,
+      assets: assetReferences
+    },
+    context: {
+      url: options.diagnostics.url,
+      referrer: options.diagnostics.referrer,
+      timestamp: options.diagnostics.timestamp,
+      timezone: options.diagnostics.timezone,
+      viewport: options.diagnostics.viewport,
+      client: {
+        browser: options.diagnostics.browser,
+        os: options.diagnostics.os,
+        language: options.diagnostics.language,
+        userAgent: options.diagnostics.userAgent
+      },
+      userAgentData: options.diagnostics.userAgentData,
+      performance: {
+        navigationTiming: options.diagnostics.navigationTiming
+      },
+      logs: options.diagnostics.logs,
+      requests: options.diagnostics.requests
+    },
+    reporter: {
+      id: options.config.user?.id,
+      name: options.config.user?.name,
+      email: options.config.user?.email,
+      role: options.config.user?.role,
+      ip: options.config.user?.ip,
+      anonymous: options.config.user?.anonymous ?? !(options.config.user?.id || options.config.user?.email || options.config.user?.name)
+    },
+    attributes: options.attributes
+  };
+  const transformed = options.config.hooks.beforeSubmit ? await options.config.hooks.beforeSubmit(payloadBase) : payloadBase;
+  if (!transformed) {
+    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));
+  const response = await fetch(options.config.apiEndpoint, {
+    method: "POST",
+    headers: {
+      "content-type": "application/json",
+      ...options.config.auth.headers
+    },
+    credentials: options.config.auth.withCredentials ? "include" : "same-origin",
+    body: JSON.stringify(transformed)
+  });
+  if (!response.ok) {
+    const body = await response.text().catch(() => "");
+    throw new BugReporterError("SUBMIT_ERROR", `Report submit failed (${response.status}): ${body || response.statusText}`);
+  }
+  return await response.json();
+}
+
+// src/components/BugReporterProvider.tsx
+var EMPTY_DRAFT = {
+  title: "",
+  description: "",
+  stepsToReproduce: "",
+  expectedBehavior: "",
+  actualBehavior: ""
+};
+var BASE_STATE = {
+  isOpen: false,
+  dockSide: "right",
+  step: "describe",
+  draft: EMPTY_DRAFT,
+  attributes: {},
+  assets: [],
+  uploadProgress: 0,
+  isSubmitting: false,
+  error: void 0
+};
+function BugReporterProvider({ config, children }) {
+  const resolvedConfig = useMemo(() => withDefaults(config), [config]);
+  const initialDockSide = resolvedConfig.theme.position === "bottom-left" || resolvedConfig.theme.position === "top-left" ? "left" : "right";
+  const [state, setState] = useState(() => ({
+    ...BASE_STATE,
+    dockSide: initialDockSide,
+    attributes: { ...resolvedConfig.attributes }
+  }));
+  const [sessionActive, setSessionActive] = useState(false);
+  const consoleBufferRef = useRef(null);
+  const networkBufferRef = useRef(null);
+  const assetsRef = useRef([]);
+  const resetAssets = useCallback((assets) => {
+    assets.forEach((asset) => revokeObjectUrl(asset.previewUrl));
+  }, []);
+  const open = useCallback(() => {
+    setSessionActive(true);
+    setState((prev) => ({
+      ...prev,
+      isOpen: true,
+      error: void 0
+    }));
+  }, []);
+  const close = useCallback(() => {
+    setState((prev) => ({
+      ...prev,
+      isOpen: false
+    }));
+  }, []);
+  const reset = useCallback(() => {
+    setSessionActive(false);
+    setState((prev) => {
+      resetAssets(prev.assets);
+      return {
+        ...BASE_STATE,
+        dockSide: prev.dockSide,
+        attributes: { ...resolvedConfig.attributes },
+        isOpen: prev.isOpen
+      };
+    });
+    consoleBufferRef.current?.clear();
+    networkBufferRef.current?.clear();
+  }, [resetAssets, resolvedConfig.attributes]);
+  const setStep = useCallback((step) => {
+    setState((prev) => ({ ...prev, step }));
+  }, []);
+  const setDockSide = useCallback((dockSide) => {
+    setState((prev) => ({ ...prev, dockSide }));
+  }, []);
+  const updateDraft = useCallback((next) => {
+    setState((prev) => ({
+      ...prev,
+      draft: {
+        ...prev.draft,
+        ...next
+      }
+    }));
+  }, []);
+  const setAttributes = useCallback((next) => {
+    setState((prev) => ({
+      ...prev,
+      attributes: next
+    }));
+  }, []);
+  const updateAttribute = useCallback((key, value2) => {
+    setState((prev) => ({
+      ...prev,
+      attributes: {
+        ...prev.attributes,
+        [key]: value2
+      }
+    }));
+  }, []);
+  const setAssetByType = useCallback((type, next) => {
+    setState((prev) => {
+      const previous = prev.assets.find((asset) => asset.type === type);
+      if (previous) {
+        revokeObjectUrl(previous.previewUrl);
+      }
+      const rest = prev.assets.filter((asset) => asset.type !== type);
+      return {
+        ...prev,
+        assets: next ? [...rest, next] : rest
+      };
+    });
+  }, []);
+  const setScreenshot = useCallback((asset) => {
+    setAssetByType("screenshot", asset);
+  }, [setAssetByType]);
+  const setRecording = useCallback((asset) => {
+    setAssetByType("recording", asset);
+  }, [setAssetByType]);
+  const submit = useCallback(async () => {
+    setState((prev) => ({
+      ...prev,
+      step: "submitting",
+      isSubmitting: true,
+      uploadProgress: 0,
+      error: void 0
+    }));
+    try {
+      const logs = resolvedConfig.features.consoleLogs ? consoleBufferRef.current?.snapshot() : void 0;
+      const requests = resolvedConfig.features.networkInfo ? networkBufferRef.current?.snapshot() : void 0;
+      const diagnostics = collectDiagnostics(resolvedConfig, {
+        logs,
+        requests
+      });
+      const response = await submitReport({
+        config: resolvedConfig,
+        draft: state.draft,
+        attributes: state.attributes,
+        diagnostics,
+        assets: state.assets,
+        onUploadProgress: (progress) => {
+          setState((prev) => ({ ...prev, uploadProgress: progress }));
+        }
+      });
+      setState((prev) => ({
+        ...prev,
+        diagnostics,
+        isSubmitting: false,
+        uploadProgress: 1,
+        step: "success"
+      }));
+      resolvedConfig.hooks.onSuccess?.(response);
+    } catch (error) {
+      const message = error instanceof Error ? error.message : "Unexpected submit failure.";
+      setState((prev) => ({
+        ...prev,
+        isSubmitting: false,
+        step: "review",
+        error: message
+      }));
+      resolvedConfig.hooks.onError?.(error);
+    }
+  }, [resolvedConfig, state.assets, state.attributes, state.draft]);
+  const retrySubmit = useCallback(async () => {
+    await submit();
+  }, [submit]);
+  const getDiagnosticsPreview = useCallback(() => {
+    const logs = resolvedConfig.features.consoleLogs ? consoleBufferRef.current?.snapshot() ?? [] : [];
+    const requests = resolvedConfig.features.networkInfo ? networkBufferRef.current?.snapshot() ?? [] : [];
+    return {
+      errorLogs: logs.filter((entry) => entry.level === "error"),
+      failedRequests: requests.filter((request) => Boolean(request.error) || request.ok === false || (request.status ?? 0) >= 400)
+    };
+  }, [resolvedConfig.features.consoleLogs, resolvedConfig.features.networkInfo]);
+  useEffect(() => {
+    if (!sessionActive) {
+      return;
+    }
+    let consoleBuffer = null;
+    let networkBuffer = null;
+    if (resolvedConfig.features.consoleLogs) {
+      consoleBuffer = new ConsoleBuffer(resolvedConfig.diagnostics.consoleBufferSize);
+      consoleBuffer.install();
+      consoleBufferRef.current = consoleBuffer;
+    }
+    if (resolvedConfig.features.networkInfo) {
+      networkBuffer = new NetworkBuffer(resolvedConfig.diagnostics.requestBufferSize);
+      networkBuffer.install();
+      networkBufferRef.current = networkBuffer;
+    }
+    return () => {
+      consoleBuffer?.uninstall();
+      networkBuffer?.uninstall();
+      consoleBufferRef.current = null;
+      networkBufferRef.current = null;
+    };
+  }, [
+    sessionActive,
+    resolvedConfig.diagnostics.consoleBufferSize,
+    resolvedConfig.diagnostics.requestBufferSize,
+    resolvedConfig.features.consoleLogs,
+    resolvedConfig.features.networkInfo
+  ]);
+  useEffect(() => {
+    assetsRef.current = state.assets;
+  }, [state.assets]);
+  useEffect(() => {
+    return () => {
+      resetAssets(assetsRef.current);
+      consoleBufferRef.current?.uninstall();
+      networkBufferRef.current?.uninstall();
+    };
+  }, [resetAssets]);
+  const value = useMemo(
+    () => ({
+      config: resolvedConfig,
+      state,
+      open,
+      close,
+      reset,
+      setDockSide,
+      setStep,
+      updateDraft,
+      setAttributes,
+      updateAttribute,
+      setScreenshot,
+      setRecording,
+      submit,
+      retrySubmit,
+      getDiagnosticsPreview
+    }),
+    [
+      resolvedConfig,
+      state,
+      open,
+      close,
+      reset,
+      setDockSide,
+      setStep,
+      updateDraft,
+      setAttributes,
+      updateAttribute,
+      setScreenshot,
+      setRecording,
+      submit,
+      retrySubmit,
+      getDiagnosticsPreview
+    ]
+  );
+  return /* @__PURE__ */ React.createElement(BugReporterContext.Provider, { value }, children);
+}
+function useBugReporter() {
+  const context = useContext(BugReporterContext);
+  if (!context) {
+    throw new Error("useBugReporter must be used inside BugReporterProvider.");
+  }
+  return context;
+}
+function getFocusable(node) {
+  return Array.from(
+    node.querySelectorAll(
+      "button, [href], input, select, textarea, [tabindex]:not([tabindex='-1'])"
+    )
+  ).filter((el) => !el.hasAttribute("disabled"));
+}
+function useFocusTrap(enabled, containerRef) {
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!enabled || !container) {
+      return;
+    }
+    const focusable = getFocusable(container);
+    const first = focusable[0];
+    const last = focusable[focusable.length - 1];
+    first?.focus();
+    const onKeyDown = (event) => {
+      if (event.key !== "Tab") {
+        return;
+      }
+      if (!first || !last) {
+        event.preventDefault();
+        return;
+      }
+      if (event.shiftKey && document.activeElement === first) {
+        event.preventDefault();
+        last.focus();
+      } else if (!event.shiftKey && document.activeElement === last) {
+        event.preventDefault();
+        first.focus();
+      }
+    };
+    container.addEventListener("keydown", onKeyDown);
+    return () => {
+      container.removeEventListener("keydown", onKeyDown);
+    };
+  }, [enabled, containerRef]);
+}
+
+// src/styles/inline.ts
+var FONT_FAMILY = '"IBM Plex Sans", "Segoe UI", sans-serif';
+var THEME = {
+  dark: {
+    bg: "rgba(7, 10, 14, 0.84)",
+    text: "#e9eff8",
+    muted: "#a8b5c7",
+    border: "rgba(202, 219, 243, 0.22)",
+    fieldBg: "rgba(255, 255, 255, 0.03)",
+    panelBg: "rgba(5, 8, 12, 0.72)",
+    secondaryBg: "rgba(255, 255, 255, 0.05)",
+    secondaryBgAlt: "rgba(255, 255, 255, 0.03)",
+    surfaceBg: "rgba(255, 255, 255, 0.02)",
+    overlaySide: "linear-gradient(to left, rgba(0, 0, 0, 0.32), rgba(0, 0, 0, 0.08) 45%, transparent 72%)",
+    overlayTop: "linear-gradient(to bottom, rgba(0, 0, 0, 0.34), rgba(0, 0, 0, 0.1) 45%, transparent 72%)",
+    overlayBottom: "linear-gradient(to top, rgba(0, 0, 0, 0.34), rgba(0, 0, 0, 0.1) 45%, transparent 72%)",
+    launcherText: "#f8fbff",
+    launcherShadow: "0 10px 28px rgba(0, 0, 0, 0.35)"
+  },
+  light: {
+    bg: "rgba(248, 250, 252, 0.96)",
+    text: "#0f172a",
+    muted: "#475569",
+    border: "rgba(15, 23, 42, 0.18)",
+    fieldBg: "rgba(15, 23, 42, 0.04)",
+    panelBg: "rgba(241, 245, 249, 0.9)",
+    secondaryBg: "rgba(15, 23, 42, 0.06)",
+    secondaryBgAlt: "rgba(15, 23, 42, 0.06)",
+    surfaceBg: "rgba(15, 23, 42, 0.03)",
+    overlaySide: "linear-gradient(to left, rgba(15, 23, 42, 0.16), rgba(15, 23, 42, 0.06) 45%, transparent 72%)",
+    overlayTop: "linear-gradient(to bottom, rgba(15, 23, 42, 0.16), rgba(15, 23, 42, 0.06) 45%, transparent 72%)",
+    overlayBottom: "linear-gradient(to top, rgba(15, 23, 42, 0.16), rgba(15, 23, 42, 0.06) 45%, transparent 72%)",
+    launcherText: "#ffffff",
+    launcherShadow: "0 10px 24px rgba(15, 23, 42, 0.24)"
+  }
+};
+function getLauncherStyle(options) {
+  const { position, borderRadius, zIndex, buttonColor, themeMode } = options;
+  const [vertical, horizontal] = position.split("-");
+  const theme = THEME[themeMode];
+  return {
+    position: "fixed",
+    [vertical]: "24px",
+    [horizontal]: "24px",
+    color: theme.launcherText,
+    backgroundColor: buttonColor,
+    border: 0,
+    borderRadius,
+    padding: "12px 18px",
+    font: `600 14px ${FONT_FAMILY}`,
+    cursor: "pointer",
+    boxShadow: theme.launcherShadow,
+    zIndex
+  };
+}
+function getModalOverlayStyle(options) {
+  const { dockSide, themeMode, zIndex } = options;
+  const theme = THEME[themeMode];
+  const base = {
+    position: "fixed",
+    inset: 0,
+    display: "flex",
+    pointerEvents: "none",
+    zIndex,
+    background: theme.overlaySide
+  };
+  if (dockSide === "left") {
+    return { ...base, alignItems: "stretch", justifyContent: "flex-start" };
+  }
+  if (dockSide === "top") {
+    return { ...base, alignItems: "flex-start", justifyContent: "stretch", background: theme.overlayTop };
+  }
+  if (dockSide === "bottom") {
+    return { ...base, alignItems: "flex-end", justifyContent: "stretch", background: theme.overlayBottom };
+  }
+  return { ...base, alignItems: "stretch", justifyContent: "flex-end" };
+}
+function getModalStyle(options) {
+  const { dockSide, themeMode, buttonColor } = options;
+  const theme = THEME[themeMode];
+  const base = {
+    pointerEvents: "auto",
+    width: "min(430px, 100vw)",
+    height: "100vh",
+    overflow: "auto",
+    color: theme.text,
+    background: theme.bg,
+    fontFamily: FONT_FAMILY,
+    backdropFilter: "blur(8px)",
+    boxShadow: "-14px 0 40px rgba(0, 0, 0, 0.42)",
+    borderLeft: "1px solid transparent",
+    borderRight: "1px solid transparent",
+    borderTop: "1px solid transparent",
+    borderBottom: "1px solid transparent",
+    ["--br-primary"]: buttonColor,
+    ["--br-bg"]: theme.bg,
+    ["--br-text"]: theme.text,
+    ["--br-muted"]: theme.muted,
+    ["--br-border"]: theme.border,
+    ["--br-field-bg"]: theme.fieldBg,
+    ["--br-panel-bg"]: theme.panelBg,
+    ["--br-secondary-bg"]: theme.secondaryBg,
+    ["--br-secondary-bg-alt"]: theme.secondaryBgAlt,
+    ["--br-surface-bg"]: theme.surfaceBg,
+    ["--br-danger"]: "#ef4444"
+  };
+  if (dockSide === "left") {
+    return { ...base, borderRightColor: "var(--br-border)", boxShadow: "14px 0 40px rgba(0, 0, 0, 0.42)" };
+  }
+  if (dockSide === "top") {
+    return {
+      ...base,
+      width: "100vw",
+      maxHeight: "100vh",
+      height: "min(460px, 100vh)",
+      borderBottomColor: "var(--br-border)",
+      boxShadow: "0 14px 40px rgba(0, 0, 0, 0.42)"
+    };
+  }
+  if (dockSide === "bottom") {
+    return {
+      ...base,
+      width: "100vw",
+      maxHeight: "100vh",
+      height: "min(460px, 100vh)",
+      borderTopColor: "var(--br-border)",
+      boxShadow: "0 -14px 40px rgba(0, 0, 0, 0.42)"
+    };
+  }
+  return { ...base, borderLeftColor: "var(--br-border)" };
+}
+var inlineStyles = {
+  modalHeader: {
+    position: "sticky",
+    top: 0,
+    zIndex: 2,
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    padding: "14px 16px",
+    borderBottom: "1px solid var(--br-border)",
+    background: "var(--br-panel-bg)"
+  },
+  dockControls: {
+    display: "flex",
+    gap: "6px"
+  },
+  iconButton: {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    border: "1px solid var(--br-border)",
+    borderRadius: "8px",
+    background: "var(--br-secondary-bg-alt)",
+    color: "var(--br-text)",
+    width: "30px",
+    height: "30px",
+    padding: 0,
+    cursor: "pointer"
+  },
+  iconSvg: {
+    width: "14px",
+    height: "14px",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: 1.8,
+    strokeLinecap: "round"
+  },
+  step: {
+    padding: "16px"
+  },
+  h2: {
+    margin: "0 0 8px"
+  },
+  h3: {
+    margin: "0"
+  },
+  p: {
+    margin: "0 0 16px",
+    color: "var(--br-muted)"
+  },
+  field: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "8px",
+    marginBottom: "14px",
+    fontSize: "13px",
+    fontWeight: 600
+  },
+  input: {
+    border: "1px solid var(--br-border)",
+    borderRadius: "10px",
+    font: `400 14px ${FONT_FAMILY}`,
+    color: "var(--br-text)",
+    background: "var(--br-field-bg)",
+    padding: "10px"
+  },
+  actions: {
+    display: "flex",
+    gap: "10px",
+    flexWrap: "wrap",
+    marginTop: "16px"
+  },
+  captureRow: {
+    display: "flex",
+    gap: "10px",
+    flexWrap: "wrap",
+    marginTop: "10px"
+  },
+  captureItem: {
+    flex: "1 1 190px"
+  },
+  captureButton: {
+    width: "100%",
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: "8px"
+  },
+  captureIcon: {
+    width: "14px",
+    height: "14px",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: 1.7,
+    strokeLinejoin: "round"
+  },
+  captureDone: {
+    fontSize: "11px",
+    color: "var(--br-text)",
+    opacity: 0.7
+  },
+  captureNote: {
+    margin: "10px 0 0",
+    color: "var(--br-muted)",
+    fontSize: "13px"
+  },
+  previewWrapper: {
+    display: "grid",
+    gap: "12px",
+    marginTop: "14px",
+    justifyItems: "center"
+  },
+  preview: {
+    width: "100%",
+    maxHeight: "240px",
+    borderRadius: "10px",
+    border: "1px solid var(--br-border)",
+    objectFit: "contain",
+    background: "var(--br-surface-bg)"
+  },
+  error: {
+    color: "#fca5a5",
+    fontSize: "14px",
+    marginTop: "10px"
+  },
+  summary: {
+    border: "1px solid var(--br-border)",
+    borderRadius: "10px",
+    padding: "12px",
+    marginTop: "12px",
+    background: "var(--br-surface-bg)"
+  },
+  assets: {
+    display: "grid",
+    gap: "12px",
+    marginTop: "14px",
+    gridTemplateColumns: "repeat(auto-fit, minmax(140px, 1fr))"
+  },
+  assetCard: {
+    border: "1px solid var(--br-border)",
+    borderRadius: "10px",
+    padding: "10px",
+    background: "var(--br-surface-bg)"
+  },
+  assetType: {
+    fontSize: "12px",
+    textTransform: "uppercase",
+    color: "var(--br-muted)"
+  },
+  uploadProgress: {
+    marginTop: "12px",
+    fontSize: "14px"
+  },
+  progressTrack: {
+    height: "8px",
+    borderRadius: "999px",
+    background: "rgba(148, 163, 184, 0.25)",
+    overflow: "hidden",
+    marginTop: "6px"
+  },
+  progressFill: {
+    height: "100%",
+    background: "var(--br-primary)"
+  },
+  annotation: {
+    border: "1px solid var(--br-border)",
+    borderRadius: "10px",
+    padding: "10px",
+    background: "var(--br-surface-bg)"
+  },
+  annotationTools: {
+    display: "flex",
+    gap: "8px",
+    marginBottom: "10px",
+    flexWrap: "wrap"
+  },
+  annotationCanvas: {
+    width: "auto",
+    maxWidth: "100%",
+    height: "auto",
+    maxHeight: "min(48vh, 360px)",
+    display: "block",
+    margin: "0 auto",
+    border: "1px solid var(--br-border)",
+    borderRadius: "8px"
+  }
+};
+function getButtonStyle(variant, options) {
+  const disabled = options?.disabled ?? false;
+  const active = options?.active ?? false;
+  const fullWidth = options?.fullWidth ?? false;
+  const base = {
+    border: "1px solid transparent",
+    borderRadius: "10px",
+    padding: "8px 12px",
+    cursor: disabled ? "not-allowed" : "pointer",
+    font: `600 13px ${FONT_FAMILY}`,
+    opacity: disabled ? 0.6 : 1,
+    width: fullWidth ? "100%" : void 0
+  };
+  if (variant === "primary") {
+    return { ...base, background: "var(--br-primary)", color: "#fff" };
+  }
+  if (variant === "danger") {
+    return { ...base, background: "var(--br-danger)", color: "#fff" };
+  }
+  return {
+    ...base,
+    background: active ? "var(--br-primary)" : "var(--br-secondary-bg)",
+    borderColor: active ? "var(--br-primary)" : "var(--br-border)",
+    color: active ? "#fff" : "var(--br-text)"
+  };
+}
+function getDockButtonStyle(isActive) {
+  if (!isActive) {
+    return inlineStyles.iconButton;
+  }
+  return {
+    ...inlineStyles.iconButton,
+    borderColor: "var(--br-primary)",
+    color: "#fff",
+    background: "var(--br-primary)",
+    boxShadow: "0 0 0 1px rgba(255, 255, 255, 0.35) inset"
+  };
+}
+
+// src/components/LauncherButton.tsx
+function LauncherButton({ position, text, themeMode = "dark", buttonColor }) {
+  const {
+    config,
+    state: { isOpen },
+    open
+  } = useBugReporter();
+  if (isOpen) {
+    return null;
+  }
+  const resolvedPosition = position ?? config.theme.position ?? "bottom-right";
+  const label = text ?? "Get Help";
+  const resolvedButtonColor = buttonColor ?? config.theme.primaryColor;
+  const launcherStyle = getLauncherStyle({
+    position: resolvedPosition,
+    borderRadius: config.theme.borderRadius,
+    zIndex: config.theme.zIndex,
+    buttonColor: resolvedButtonColor,
+    themeMode
+  });
+  return /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      type: "button",
+      style: launcherStyle,
+      onClick: open,
+      "aria-label": "Open bug reporter"
+    },
+    label
+  );
+}
+function Modal({ isOpen, dockSide, themeMode, buttonColor, title, zIndex, onRequestClose, children }) {
+  const dialogRef = useRef(null);
+  useFocusTrap(isOpen, dialogRef);
+  useEffect(() => {
+    if (!isOpen) {
+      return;
+    }
+    const onKeyDown = (event) => {
+      if (event.key === "Escape") {
+        event.preventDefault();
+        onRequestClose();
+      }
+    };
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [isOpen, onRequestClose]);
+  if (!isOpen || typeof document === "undefined") {
+    return null;
+  }
+  const overlayStyle = getModalOverlayStyle({ dockSide, themeMode, zIndex });
+  const modalStyle = getModalStyle({ dockSide, themeMode, buttonColor });
+  return createPortal(
+    /* @__PURE__ */ React.createElement("div", { style: overlayStyle }, /* @__PURE__ */ React.createElement("div", { ref: dialogRef, style: modalStyle, role: "dialog", "aria-modal": "true", "aria-label": title }, children)),
+    document.body
+  );
+}
+
+// src/core/lazy.ts
+async function loadScreenshotCapture() {
+  return import('./screenshot-F4W72WRK.js');
+}
+async function loadScreenRecording() {
+  return import('./recording-YSR6IORT.js');
+}
+
+// src/core/validation.ts
+function validateScreenshotSize(size, maxBytes) {
+  if (size > maxBytes) {
+    throw new BugReporterError(
+      "VALIDATION_ERROR",
+      `Screenshot exceeds max size (${Math.round(maxBytes / 1024 / 1024)}MB).`
+    );
+  }
+}
+function validateVideoSize(size, maxBytes) {
+  if (size > maxBytes) {
+    throw new BugReporterError("VALIDATION_ERROR", `Recording exceeds max size (${Math.round(maxBytes / 1024 / 1024)}MB).`);
+  }
+}
+function drawArrow(ctx, start, end) {
+  const headLength = 14;
+  const angle = Math.atan2(end.y - start.y, end.x - start.x);
+  ctx.beginPath();
+  ctx.moveTo(start.x, start.y);
+  ctx.lineTo(end.x, end.y);
+  ctx.stroke();
+  ctx.beginPath();
+  ctx.moveTo(end.x, end.y);
+  ctx.lineTo(end.x - headLength * Math.cos(angle - Math.PI / 6), end.y - headLength * Math.sin(angle - Math.PI / 6));
+  ctx.lineTo(end.x - headLength * Math.cos(angle + Math.PI / 6), end.y - headLength * Math.sin(angle + Math.PI / 6));
+  ctx.closePath();
+  ctx.fill();
+}
+var AnnotationCanvas = forwardRef(function AnnotationCanvas2({ imageUrl }, ref) {
+  const canvasRef = useRef(null);
+  const imageRef = useRef(null);
+  const [tool, setTool] = useState("rectangle");
+  const [shapes, setShapes] = useState([]);
+  const [draftShape, setDraftShape] = useState(null);
+  const dragStartRef = useRef(null);
+  const redraw = useCallback(
+    (ctx) => {
+      const canvas = canvasRef.current;
+      const image = imageRef.current;
+      if (!canvas || !image) {
+        return;
+      }
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
+      const toDraw = draftShape ? [...shapes, draftShape] : shapes;
+      ctx.strokeStyle = "#ff3b30";
+      ctx.fillStyle = "#ff3b30";
+      ctx.lineWidth = 3;
+      ctx.font = "16px sans-serif";
+      toDraw.forEach((shape) => {
+        if (shape.kind === "rectangle") {
+          const x = Math.min(shape.start.x, shape.end.x);
+          const y = Math.min(shape.start.y, shape.end.y);
+          const width = Math.abs(shape.end.x - shape.start.x);
+          const height = Math.abs(shape.end.y - shape.start.y);
+          ctx.strokeRect(x, y, width, height);
+        }
+        if (shape.kind === "arrow") {
+          drawArrow(ctx, shape.start, shape.end);
+        }
+      });
+    },
+    [draftShape, shapes]
+  );
+  useEffect(() => {
+    const image = new Image();
+    image.crossOrigin = "anonymous";
+    image.onload = () => {
+      imageRef.current = image;
+      const canvas = canvasRef.current;
+      if (!canvas) {
+        return;
+      }
+      canvas.width = image.width;
+      canvas.height = image.height;
+      const ctx = canvas.getContext("2d");
+      if (!ctx) {
+        return;
+      }
+      redraw(ctx);
+    };
+    image.src = imageUrl;
+  }, [imageUrl, redraw]);
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) {
+      return;
+    }
+    const ctx = canvas.getContext("2d");
+    if (!ctx) {
+      return;
+    }
+    redraw(ctx);
+  }, [redraw]);
+  const getCoords = useCallback((event) => {
+    const canvas = canvasRef.current;
+    if (!canvas) {
+      return { x: 0, y: 0 };
+    }
+    const rect = canvas.getBoundingClientRect();
+    const scaleX = canvas.width / rect.width;
+    const scaleY = canvas.height / rect.height;
+    return {
+      x: (event.clientX - rect.left) * scaleX,
+      y: (event.clientY - rect.top) * scaleY
+    };
+  }, []);
+  const onMouseDown = (event) => {
+    const point = getCoords(event);
+    dragStartRef.current = point;
+  };
+  const onMouseMove = (event) => {
+    const start = dragStartRef.current;
+    if (!start) {
+      return;
+    }
+    const end = getCoords(event);
+    if (tool === "rectangle") {
+      setDraftShape({ kind: "rectangle", start, end });
+    } else if (tool === "arrow") {
+      setDraftShape({ kind: "arrow", start, end });
+    }
+  };
+  const onMouseUp = (event) => {
+    const start = dragStartRef.current;
+    if (!start) {
+      return;
+    }
+    dragStartRef.current = null;
+    const end = getCoords(event);
+    if (tool === "rectangle") {
+      setShapes((prev) => [...prev, { kind: "rectangle", start, end }]);
+    } else if (tool === "arrow") {
+      setShapes((prev) => [...prev, { kind: "arrow", start, end }]);
+    }
+    setDraftShape(null);
+  };
+  const canvasToBlob = useCallback(async () => {
+    const canvas = canvasRef.current;
+    if (!canvas) {
+      throw new Error("Annotation canvas unavailable.");
+    }
+    const blob = await new Promise((resolve) => {
+      canvas.toBlob(resolve, "image/png");
+    });
+    if (!blob) {
+      throw new Error("Failed to create annotated screenshot.");
+    }
+    return blob;
+  }, []);
+  useImperativeHandle(
+    ref,
+    () => ({
+      exportBlob: canvasToBlob,
+      clear: () => setShapes([]),
+      hasAnnotations: () => shapes.length > 0
+    }),
+    [canvasToBlob, shapes.length]
+  );
+  const toolButtons = useMemo(
+    () => [
+      { value: "rectangle", label: "Rectangle" },
+      { value: "arrow", label: "Arrow" }
+    ],
+    []
+  );
+  return /* @__PURE__ */ React.createElement("div", { style: inlineStyles.annotation }, /* @__PURE__ */ React.createElement("div", { style: inlineStyles.annotationTools, role: "toolbar", "aria-label": "Annotation tools" }, toolButtons.map((option) => /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      key: option.value,
+      type: "button",
+      style: getButtonStyle("secondary", { active: tool === option.value }),
+      onClick: () => setTool(option.value)
+    },
+    option.label
+  )), /* @__PURE__ */ React.createElement("button", { type: "button", style: getButtonStyle("secondary"), onClick: () => setShapes([]) }, "Clear")), /* @__PURE__ */ React.createElement(
+    "canvas",
+    {
+      ref: canvasRef,
+      style: inlineStyles.annotationCanvas,
+      onMouseDown,
+      onMouseMove,
+      onMouseUp,
+      "aria-label": "Screenshot annotation canvas"
+    }
+  ));
+});
+var sharedRecording = null;
+var subscribers = /* @__PURE__ */ new Set();
+function notifySubscribers() {
+  subscribers.forEach((handler) => handler());
+}
+function StepRecording({ onBack, onNext, embedded = false, compact = false }) {
+  const {
+    config,
+    state: { assets },
+    setRecording
+  } = useBugReporter();
+  const recording = useMemo(() => assets.find((asset) => asset.type === "recording"), [assets]);
+  const activeRef = useRef(null);
+  const mountedRef = useRef(true);
+  const [isRecording, setIsRecording] = useState(Boolean(sharedRecording));
+  const [seconds, setSeconds] = useState(sharedRecording?.seconds ?? 0);
+  const [error, setError] = useState(null);
+  const start = async () => {
+    if (sharedRecording) {
+      setError("Recording is already in progress.");
+      return;
+    }
+    setError(null);
+    setSeconds(0);
+    setIsRecording(true);
+    try {
+      const recorderModule = await loadScreenRecording();
+      const active = await recorderModule.startScreenRecording({
+        maxSeconds: config.storage.limits.maxVideoSeconds,
+        maxBytes: config.storage.limits.maxVideoBytes,
+        onTick: (tick) => {
+          if (sharedRecording) {
+            sharedRecording.seconds = tick;
+            notifySubscribers();
+          }
+        }
+      });
+      activeRef.current = active;
+      sharedRecording = { active, seconds: 0 };
+      notifySubscribers();
+      const result = await active.promise;
+      validateVideoSize(result.blob.size, config.storage.limits.maxVideoBytes);
+      setRecording({
+        id: uid("recording"),
+        type: "recording",
+        blob: result.blob,
+        previewUrl: blobToObjectUrl(result.blob),
+        mimeType: result.mimeType,
+        filename: `recording-${Date.now()}.webm`,
+        size: result.blob.size
+      });
+    } catch (recordingError) {
+      if (recordingError instanceof Error && recordingError.message.includes("cancelled")) {
+        return;
+      }
+      if (mountedRef.current) {
+        setError(recordingError instanceof Error ? recordingError.message : "Recording failed.");
+      }
+    } finally {
+      activeRef.current = null;
+      sharedRecording = null;
+      notifySubscribers();
+      if (mountedRef.current) {
+        setIsRecording(false);
+      }
+    }
+  };
+  const stop = () => {
+    if (sharedRecording) {
+      sharedRecording.active.stop();
+      return;
+    }
+    activeRef.current?.stop();
+  };
+  useEffect(() => {
+    mountedRef.current = true;
+    const sync = () => {
+      activeRef.current = sharedRecording?.active ?? null;
+      setIsRecording(Boolean(sharedRecording));
+      setSeconds(sharedRecording?.seconds ?? 0);
+    };
+    sync();
+    subscribers.add(sync);
+    return () => {
+      mountedRef.current = false;
+      subscribers.delete(sync);
+    };
+  }, []);
+  if (compact) {
+    const compactRecordingAction = !isRecording ? /* @__PURE__ */ React.createElement("button", { type: "button", style: { ...getButtonStyle("primary", { fullWidth: true }), ...inlineStyles.captureButton }, onClick: start }, /* @__PURE__ */ React.createElement("svg", { style: inlineStyles.captureIcon, viewBox: "0 0 24 24", "aria-hidden": "true", focusable: "false" }, /* @__PURE__ */ React.createElement("circle", { cx: "12", cy: "12", r: "4.5" }), /* @__PURE__ */ React.createElement("path", { d: "M3.5 8.5h3l1.2-2h8.6l1.2 2h3v7h-3l-1.2 2H7.7l-1.2-2h-3z" })), /* @__PURE__ */ React.createElement("span", null, recording ? "Retake recording" : "Record a video"), recording ? /* @__PURE__ */ React.createElement("span", { style: inlineStyles.captureDone }, "Saved") : null) : /* @__PURE__ */ React.createElement("button", { type: "button", style: { ...getButtonStyle("danger", { fullWidth: true }), ...inlineStyles.captureButton }, onClick: stop }, /* @__PURE__ */ React.createElement("svg", { style: inlineStyles.captureIcon, viewBox: "0 0 24 24", "aria-hidden": "true", focusable: "false" }, /* @__PURE__ */ React.createElement("rect", { x: "7", y: "7", width: "10", height: "10" })), /* @__PURE__ */ React.createElement("span", null, "Stop (", seconds, "s)"));
+    return /* @__PURE__ */ React.createElement("div", { style: inlineStyles.captureItem }, compactRecordingAction, error ? /* @__PURE__ */ React.createElement("p", { style: { ...inlineStyles.error, marginTop: "8px" } }, error) : null);
+  }
+  return /* @__PURE__ */ React.createElement("div", { style: embedded ? void 0 : inlineStyles.step }, embedded ? /* @__PURE__ */ React.createElement("h3", { style: inlineStyles.h3 }, "Screen recording") : /* @__PURE__ */ React.createElement("h2", { style: inlineStyles.h2 }, "Screen recording"), /* @__PURE__ */ React.createElement("p", { style: inlineStyles.p }, "Record up to ", config.storage.limits.maxVideoSeconds, " seconds. You can minimize this sidebar while recording."), /* @__PURE__ */ React.createElement("div", { style: inlineStyles.actions }, onBack ? /* @__PURE__ */ React.createElement("button", { type: "button", style: getButtonStyle("secondary", { disabled: isRecording }), onClick: onBack, disabled: isRecording }, "Back") : null, !isRecording ? /* @__PURE__ */ React.createElement("button", { type: "button", style: getButtonStyle("primary"), onClick: start }, recording ? "Retake recording" : "Record a video") : /* @__PURE__ */ React.createElement("button", { type: "button", style: getButtonStyle("danger"), onClick: stop }, "Stop (", seconds, "s)")), recording ? /* @__PURE__ */ React.createElement("video", { src: recording.previewUrl, style: inlineStyles.preview, controls: true }) : null, error ? /* @__PURE__ */ React.createElement("p", { style: inlineStyles.error }, error) : null, onNext ? /* @__PURE__ */ React.createElement("div", { style: inlineStyles.actions }, /* @__PURE__ */ React.createElement("button", { type: "button", style: getButtonStyle("primary"), onClick: onNext }, "Continue")) : null);
+}
+
+// src/components/StepDescribe.tsx
+function StepDescribe({ onNext, CustomForm }) {
+  const {
+    config,
+    state: { draft, attributes, assets },
+    updateDraft,
+    setAttributes,
+    updateAttribute,
+    setScreenshot
+  } = useBugReporter();
+  const screenshot = useMemo(() => assets.find((asset) => asset.type === "screenshot"), [assets]);
+  const recording = useMemo(() => assets.find((asset) => asset.type === "recording"), [assets]);
+  const annotationRef = useRef(null);
+  const customFormRef = useRef(null);
+  const [isCapturing, setIsCapturing] = useState(false);
+  const [error, setError] = useState(null);
+  useEffect(() => {
+    if (!CustomForm) {
+      return;
+    }
+    const root = customFormRef.current;
+    if (!root) {
+      return;
+    }
+    const applyInlineFormStyles = () => {
+      root.querySelectorAll("input, textarea, select").forEach((control) => {
+        if (control.dataset.brInlineStyled === "true") {
+          return;
+        }
+        Object.assign(control.style, inlineStyles.input, {
+          width: "100%",
+          boxSizing: "border-box"
+        });
+        control.dataset.brInlineStyled = "true";
+      });
+      root.querySelectorAll("label.br-field").forEach((field) => {
+        if (field.dataset.brInlineStyled === "true") {
+          return;
+        }
+        Object.assign(field.style, inlineStyles.field);
+        field.dataset.brInlineStyled = "true";
+      });
+    };
+    applyInlineFormStyles();
+    const observer = new MutationObserver(() => {
+      applyInlineFormStyles();
+    });
+    observer.observe(root, { childList: true, subtree: true });
+    return () => observer.disconnect();
+  }, [CustomForm]);
+  const startCapture = async () => {
+    setError(null);
+    setIsCapturing(true);
+    try {
+      const capture = await loadScreenshotCapture();
+      const blob = await capture.captureScreenshotArea({
+        maskSelectors: config.privacy.maskSelectors,
+        redactTextPatterns: config.privacy.redactTextPatterns
+      });
+      validateScreenshotSize(blob.size, config.storage.limits.maxScreenshotBytes);
+      setScreenshot({
+        id: uid("screenshot"),
+        type: "screenshot",
+        blob,
+        previewUrl: blobToObjectUrl(blob),
+        mimeType: blob.type || "image/png",
+        filename: `screenshot-${Date.now()}.png`,
+        size: blob.size
+      });
+    } catch (captureError) {
+      setError(captureError instanceof Error ? captureError.message : "Screenshot capture failed.");
+    } finally {
+      setIsCapturing(false);
+    }
+  };
+  const continueToNext = async () => {
+    setError(null);
+    if (config.features.screenshot && !screenshot) {
+      setError("Capture a screenshot to continue.");
+      return;
+    }
+    if (config.features.screenshot && screenshot && config.features.annotations && annotationRef.current?.hasAnnotations()) {
+      const annotatedBlob = await annotationRef.current.exportBlob();
+      validateScreenshotSize(annotatedBlob.size, config.storage.limits.maxScreenshotBytes);
+      setScreenshot({
+        ...screenshot,
+        blob: annotatedBlob,
+        previewUrl: blobToObjectUrl(annotatedBlob),
+        mimeType: annotatedBlob.type || "image/png",
+        size: annotatedBlob.size
+      });
+    }
+    onNext();
+  };
+  const canContinue = Boolean(draft.title.trim()) && (!config.features.screenshot || Boolean(screenshot));
+  return /* @__PURE__ */ React.createElement("div", { style: { ...inlineStyles.step, display: "flex", flexDirection: "column", minHeight: "100%" } }, /* @__PURE__ */ React.createElement("h2", { style: inlineStyles.h2 }, "Report a bug"), /* @__PURE__ */ React.createElement("p", { style: inlineStyles.p }, "Provide enough context so engineers can reproduce what happened."), /* @__PURE__ */ React.createElement("label", { style: inlineStyles.field }, "Title", /* @__PURE__ */ React.createElement(
+    "input",
+    {
+      style: inlineStyles.input,
+      value: draft.title,
+      onChange: (event) => updateDraft({ title: event.target.value }),
+      placeholder: "Short summary",
+      required: true
+    }
+  )), /* @__PURE__ */ React.createElement("label", { style: inlineStyles.field }, "Description", /* @__PURE__ */ React.createElement(
+    "textarea",
+    {
+      style: inlineStyles.input,
+      value: draft.description,
+      onChange: (event) => updateDraft({ description: event.target.value }),
+      placeholder: "What happened?",
+      rows: 4
+    }
+  )), CustomForm ? /* @__PURE__ */ React.createElement("div", { ref: customFormRef }, /* @__PURE__ */ React.createElement(CustomForm, { attributes, setAttributes, updateAttribute })) : null, config.features.screenshot || config.features.recording ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("h3", { style: inlineStyles.h3 }, "Capture"), /* @__PURE__ */ React.createElement("div", { style: inlineStyles.captureRow }, config.features.screenshot ? /* @__PURE__ */ React.createElement("div", { style: inlineStyles.captureItem }, /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      type: "button",
+      style: { ...getButtonStyle("primary", { disabled: isCapturing, fullWidth: true }), ...inlineStyles.captureButton },
+      onClick: startCapture,
+      disabled: isCapturing
+    },
+    /* @__PURE__ */ React.createElement("svg", { style: inlineStyles.captureIcon, viewBox: "0 0 24 24", "aria-hidden": "true", focusable: "false" }, /* @__PURE__ */ React.createElement("path", { d: "M4 8.5h3l1.2-2h7.6l1.2 2h3v9H4z" }), /* @__PURE__ */ React.createElement("circle", { cx: "12", cy: "13", r: "3.5" })),
+    /* @__PURE__ */ React.createElement("span", null, isCapturing ? "Capturing..." : screenshot ? "Retake screenshot" : "Screenshot"),
+    screenshot ? /* @__PURE__ */ React.createElement("span", { style: inlineStyles.captureDone }, "Saved") : null
+  )) : null, config.features.recording ? /* @__PURE__ */ React.createElement(StepRecording, { embedded: true, compact: true }) : null), /* @__PURE__ */ 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__ */ React.createElement("div", { style: inlineStyles.previewWrapper }, config.features.annotations ? /* @__PURE__ */ React.createElement(AnnotationCanvas, { ref: annotationRef, imageUrl: screenshot.previewUrl }) : /* @__PURE__ */ React.createElement("img", { src: screenshot.previewUrl, alt: "Screenshot preview", style: inlineStyles.preview })) : null, !screenshot && recording ? /* @__PURE__ */ React.createElement("p", { style: inlineStyles.captureNote }, "Recording saved.") : null) : null, error ? /* @__PURE__ */ React.createElement("p", { style: inlineStyles.error }, error) : null, /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      style: {
+        ...inlineStyles.actions,
+        marginTop: "auto",
+        position: "sticky",
+        bottom: 0,
+        background: "var(--br-bg)",
+        paddingTop: "12px",
+        paddingBottom: "12px"
+      }
+    },
+    /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        type: "button",
+        style: getButtonStyle("primary", { disabled: !canContinue, fullWidth: true }),
+        disabled: !canContinue,
+        onClick: continueToNext
+      },
+      "Continue"
+    )
+  ));
+}
+
+// src/components/StepReview.tsx
+function StepReview({ onBack }) {
+  const {
+    state: { assets, draft, isSubmitting, uploadProgress, error },
+    submit
+  } = useBugReporter();
+  return /* @__PURE__ */ React.createElement("div", { style: { ...inlineStyles.step, display: "flex", flexDirection: "column", minHeight: "100%" } }, /* @__PURE__ */ React.createElement("h2", { style: inlineStyles.h2 }, "Review and submit"), /* @__PURE__ */ React.createElement("p", { style: inlineStyles.p }, "Confirm details, then send your report."), /* @__PURE__ */ React.createElement("div", { style: inlineStyles.summary }, /* @__PURE__ */ React.createElement("strong", null, draft.title || "Untitled bug report"), /* @__PURE__ */ React.createElement("p", { style: inlineStyles.p }, draft.description || "No description provided.")), /* @__PURE__ */ React.createElement("div", { style: inlineStyles.assets }, assets.map((asset) => /* @__PURE__ */ React.createElement("div", { key: asset.id, style: inlineStyles.assetCard }, /* @__PURE__ */ React.createElement("span", { style: inlineStyles.assetType }, asset.type), asset.type === "recording" ? /* @__PURE__ */ React.createElement("video", { src: asset.previewUrl, controls: true, style: inlineStyles.preview }) : /* @__PURE__ */ React.createElement("img", { src: asset.previewUrl, alt: `${asset.type} preview`, style: inlineStyles.preview })))), isSubmitting ? /* @__PURE__ */ React.createElement("div", { style: inlineStyles.uploadProgress, "aria-live": "polite" }, "Uploading assets: ", Math.round(uploadProgress * 100), "%", /* @__PURE__ */ React.createElement("div", { style: inlineStyles.progressTrack }, /* @__PURE__ */ React.createElement("div", { style: { ...inlineStyles.progressFill, width: `${Math.round(uploadProgress * 100)}%` } }))) : null, error ? /* @__PURE__ */ React.createElement("p", { style: inlineStyles.error }, error) : null, /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      style: {
+        ...inlineStyles.actions,
+        marginTop: "auto",
+        position: "sticky",
+        bottom: 0,
+        background: "var(--br-bg)",
+        paddingTop: "12px",
+        paddingBottom: "12px"
+      }
+    },
+    /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        type: "button",
+        style: { ...getButtonStyle("secondary", { disabled: isSubmitting }), flex: 1 },
+        onClick: onBack,
+        disabled: isSubmitting
+      },
+      "Back"
+    ),
+    /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        type: "button",
+        style: { ...getButtonStyle("primary", { disabled: isSubmitting }), flex: 1 },
+        onClick: submit,
+        disabled: isSubmitting
+      },
+      "Submit"
+    )
+  ));
+}
+
+// src/components/BugReporter.tsx
+var DOCK_SIDES = ["left", "right", "top", "bottom"];
+function DockIcon({ side }) {
+  if (side === "left") {
+    return /* @__PURE__ */ React.createElement("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", focusable: "false", style: inlineStyles.iconSvg }, /* @__PURE__ */ React.createElement("path", { d: "M3.5 5.5h17v13h-17z" }), /* @__PURE__ */ React.createElement("path", { d: "M3.5 5.5h4.5v13H3.5z", fill: "currentColor", stroke: "none", opacity: "0.85" }));
+  }
+  if (side === "right") {
+    return /* @__PURE__ */ React.createElement("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", focusable: "false", style: inlineStyles.iconSvg }, /* @__PURE__ */ React.createElement("path", { d: "M3.5 5.5h17v13h-17z" }), /* @__PURE__ */ React.createElement("path", { d: "M16 5.5h4.5v13H16z", fill: "currentColor", stroke: "none", opacity: "0.85" }));
+  }
+  if (side === "top") {
+    return /* @__PURE__ */ React.createElement("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", focusable: "false", style: inlineStyles.iconSvg }, /* @__PURE__ */ React.createElement("path", { d: "M3.5 5.5h17v13h-17z" }), /* @__PURE__ */ React.createElement("path", { d: "M3.5 5.5h17v4.5h-17z", fill: "currentColor", stroke: "none", opacity: "0.85" }));
+  }
+  return /* @__PURE__ */ React.createElement("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", focusable: "false", style: inlineStyles.iconSvg }, /* @__PURE__ */ React.createElement("path", { d: "M3.5 5.5h17v13h-17z" }), /* @__PURE__ */ React.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();
+  const nextFromDescribe = () => {
+    setStep("review");
+  };
+  const requestClose = () => {
+    if (state.step === "success") {
+      reset();
+    }
+    close();
+  };
+  const modalTitle = state.step === "success" ? "Report submitted" : "Report a bug";
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(LauncherButton, { position: launcherPosition, text: launcherText, themeMode, buttonColor }), /* @__PURE__ */ React.createElement(
+    Modal,
+    {
+      isOpen: state.isOpen,
+      dockSide: state.dockSide,
+      themeMode,
+      buttonColor,
+      title: modalTitle,
+      zIndex: config.theme.zIndex + 1,
+      onRequestClose: requestClose
+    },
+    /* @__PURE__ */ React.createElement("div", { style: inlineStyles.modalHeader }, /* @__PURE__ */ React.createElement("div", { style: inlineStyles.dockControls, role: "group", "aria-label": "Dock side" }, DOCK_SIDES.map((side) => {
+      const isActive = state.dockSide === side;
+      return /* @__PURE__ */ React.createElement(
+        "button",
+        {
+          key: side,
+          style: getDockButtonStyle(isActive),
+          type: "button",
+          onClick: () => setDockSide(side),
+          "aria-pressed": isActive,
+          "aria-label": `Dock ${side}`
+        },
+        /* @__PURE__ */ React.createElement(DockIcon, { side })
+      );
+    })), /* @__PURE__ */ React.createElement("button", { style: inlineStyles.iconButton, type: "button", onClick: requestClose, "aria-label": "Close bug reporter" }, /* @__PURE__ */ React.createElement("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", focusable: "false", style: inlineStyles.iconSvg }, /* @__PURE__ */ React.createElement("path", { d: "M6 6 18 18M18 6 6 18" })))),
+    state.step === "describe" ? /* @__PURE__ */ React.createElement(StepDescribe, { onNext: nextFromDescribe, CustomForm }) : null,
+    state.step === "review" || state.step === "submitting" ? /* @__PURE__ */ React.createElement(
+      StepReview,
+      {
+        onBack: () => {
+          setStep("describe");
+        }
+      }
+    ) : null,
+    state.step === "success" ? /* @__PURE__ */ React.createElement("div", { style: inlineStyles.step }, /* @__PURE__ */ React.createElement("h2", { style: inlineStyles.h2 }, "Thanks, report submitted"), /* @__PURE__ */ React.createElement("p", { style: inlineStyles.p }, "Your bug report has been sent successfully."), /* @__PURE__ */ React.createElement("div", { style: inlineStyles.actions }, /* @__PURE__ */ React.createElement("button", { type: "button", style: getButtonStyle("primary"), onClick: requestClose }, "Close"))) : null
+  ));
+}
+function BugReporter({
+  config,
+  CustomForm,
+  launcherPosition,
+  launcherText,
+  themeMode = "dark",
+  buttonColor
+}) {
+  const resolvedButtonColor = buttonColor ?? config.theme?.primaryColor ?? "#3b82f6";
+  return /* @__PURE__ */ React.createElement(BugReporterProvider, { config }, /* @__PURE__ */ React.createElement(
+    BugReporterShell,
+    {
+      CustomForm,
+      launcherPosition,
+      launcherText,
+      themeMode,
+      buttonColor: resolvedButtonColor
+    }
+  ));
+}
+
+export { BugReporter, BugReporterProvider, useBugReporter };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map