glitchgrab 1.12.0 → 1.13.1

package/dist/index.js

@@ -50,7 +50,7 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/provider.tsx
-var import_react = require("react");
+var import_react2 = require("react");
 
 // src/error-boundary.tsx
 var React = __toESM(require("react"));
@@ -359,244 +359,10 @@ var GlitchgrabErrorBoundary = class extends React.Component {
   }
 };
 
-// src/provider.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
-var DEFAULT_BASE_URL2 = "https://www.glitchgrab.dev";
-var GlitchgrabContext = (0, import_react.createContext)(null);
-function useGlitchgrab() {
-  const ctx = (0, import_react.useContext)(GlitchgrabContext);
-  if (!ctx) {
-    throw new Error("useGlitchgrab must be used within a GlitchgrabProvider");
-  }
-  return ctx;
-}
-function GlitchgrabProviderInner({
-  token,
-  session,
-  baseUrl,
-  onError,
-  onReportSent,
-  breadcrumbs: enableBreadcrumbs = true,
-  maxBreadcrumbs: maxBreadcrumbs2 = 50,
-  children,
-  fallback
-}) {
-  const visitedPagesRef = (0, import_react.useRef)([]);
-  (0, import_react.useEffect)(() => {
-    if (enableBreadcrumbs) {
-      initBreadcrumbs(maxBreadcrumbs2);
-    }
-  }, [enableBreadcrumbs, maxBreadcrumbs2]);
-  (0, import_react.useEffect)(() => {
-    try {
-      if (typeof window === "undefined") return;
-      const trackPage = () => {
-        try {
-          const sanitized = sanitizeUrl(window.location.href);
-          const pages = visitedPagesRef.current;
-          if (pages[pages.length - 1] !== sanitized) {
-            pages.push(sanitized);
-            if (pages.length > 20) {
-              pages.splice(0, pages.length - 20);
-            }
-          }
-        } catch (e) {
-        }
-      };
-      trackPage();
-      const handlePopState = () => trackPage();
-      window.addEventListener("popstate", handlePopState);
-      const origPushState = history.pushState.bind(history);
-      const origReplaceState = history.replaceState.bind(history);
-      history.pushState = function(...args) {
-        origPushState(...args);
-        trackPage();
-      };
-      history.replaceState = function(...args) {
-        origReplaceState(...args);
-        trackPage();
-      };
-      return () => {
-        window.removeEventListener("popstate", handlePopState);
-        history.pushState = origPushState;
-        history.replaceState = origReplaceState;
-      };
-    } catch (e) {
-    }
-  }, []);
-  (0, import_react.useEffect)(() => {
-    try {
-      if (typeof window === "undefined") return;
-      if (process.env.NODE_ENV === "development") return;
-      const handleError = (event) => {
-        var _a, _b, _c, _d, _e;
-        try {
-          const context = captureContext(visitedPagesRef.current);
-          const payload = {
-            token,
-            source: "SDK_AUTO",
-            type: "BUG",
-            errorMessage: event.message,
-            errorStack: (_a = event.error) == null ? void 0 : _a.stack,
-            pageUrl: context.url,
-            userAgent: context.userAgent,
-            breadcrumbs: context.breadcrumbs,
-            deviceInfo: (_b = context.deviceInfo) != null ? _b : void 0,
-            metadata: {
-              timestamp: context.timestamp,
-              visitedPages: JSON.stringify(context.visitedPages),
-              filename: (_c = event.filename) != null ? _c : "",
-              lineno: String((_d = event.lineno) != null ? _d : ""),
-              colno: String((_e = event.colno) != null ? _e : ""),
-              ...(session == null ? void 0 : session.userId) ? { sessionUserId: session.userId } : {},
-              ...(session == null ? void 0 : session.name) ? { sessionUserName: String(session.name) } : {},
-              ...(session == null ? void 0 : session.email) ? { sessionUserEmail: String(session.email) } : {}
-            }
-          };
-          sendReport(payload, baseUrl).then((result) => {
-            if (result && onReportSent) onReportSent(result);
-          });
-          if (onError && event.error) onError(event.error);
-        } catch (e) {
-        }
-      };
-      const handleRejection = (event) => {
-        var _a;
-        try {
-          const context = captureContext(visitedPagesRef.current);
-          const reason = event.reason;
-          const payload = {
-            token,
-            source: "SDK_AUTO",
-            type: "BUG",
-            errorMessage: reason instanceof Error ? reason.message : String(reason),
-            errorStack: reason instanceof Error ? reason.stack : void 0,
-            pageUrl: context.url,
-            userAgent: context.userAgent,
-            breadcrumbs: context.breadcrumbs,
-            deviceInfo: (_a = context.deviceInfo) != null ? _a : void 0,
-            metadata: {
-              timestamp: context.timestamp,
-              visitedPages: JSON.stringify(context.visitedPages),
-              type: "unhandledrejection",
-              ...(session == null ? void 0 : session.userId) ? { sessionUserId: session.userId } : {},
-              ...(session == null ? void 0 : session.name) ? { sessionUserName: String(session.name) } : {},
-              ...(session == null ? void 0 : session.email) ? { sessionUserEmail: String(session.email) } : {}
-            }
-          };
-          sendReport(payload, baseUrl).then((result) => {
-            if (result && onReportSent) onReportSent(result);
-          });
-          if (onError && reason instanceof Error) onError(reason);
-        } catch (e) {
-        }
-      };
-      window.addEventListener("error", handleError);
-      window.addEventListener("unhandledrejection", handleRejection);
-      return () => {
-        window.removeEventListener("error", handleError);
-        window.removeEventListener("unhandledrejection", handleRejection);
-      };
-    } catch (e) {
-    }
-  }, [token, baseUrl, onError, onReportSent]);
-  const report = (0, import_react.useCallback)(
-    async (type, description, metadata) => {
-      var _a;
-      try {
-        const context = captureContext(visitedPagesRef.current);
-        const payload = {
-          token,
-          source: "SDK_USER_REPORT",
-          type,
-          description,
-          pageUrl: context.url,
-          userAgent: context.userAgent,
-          breadcrumbs: context.breadcrumbs,
-          deviceInfo: (_a = context.deviceInfo) != null ? _a : void 0,
-          metadata: {
-            timestamp: context.timestamp,
-            visitedPages: JSON.stringify(context.visitedPages),
-            ...(session == null ? void 0 : session.userId) ? { sessionUserId: session.userId } : {},
-            ...(session == null ? void 0 : session.name) ? { sessionUserName: String(session.name) } : {},
-            ...(session == null ? void 0 : session.email) ? { sessionUserEmail: String(session.email) } : {},
-            ...(session == null ? void 0 : session.phone) ? { sessionUserPhone: String(session.phone) } : {},
-            ...metadata
-          }
-        };
-        const result = await sendReport(payload, baseUrl);
-        if (result && onReportSent) onReportSent(result);
-        return result;
-      } catch (e) {
-        return null;
-      }
-    },
-    [token, baseUrl, onReportSent, session]
-  );
-  const reportBug = (0, import_react.useCallback)(
-    (description, metadata) => report("BUG", description, metadata),
-    [report]
-  );
-  const addBreadcrumb2 = (0, import_react.useCallback)(
-    (message, data) => {
-      addBreadcrumb("custom", message, data);
-    },
-    []
-  );
-  const openReportDialog = (0, import_react.useCallback)((options) => {
-    if (typeof window !== "undefined") {
-      window.dispatchEvent(new CustomEvent("glitchgrab:open-report", { detail: options }));
-    }
-  }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    GlitchgrabContext.Provider,
-    {
-      value: {
-        token,
-        baseUrl: baseUrl != null ? baseUrl : DEFAULT_BASE_URL2,
-        reportBug,
-        report,
-        addBreadcrumb: addBreadcrumb2,
-        openReportDialog
-      },
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        GlitchgrabErrorBoundary,
-        {
-          token,
-          baseUrl,
-          onError,
-          fallback,
-          visitedPages: visitedPagesRef.current,
-          children
-        }
-      )
-    }
-  );
-}
-function GlitchgrabProvider(props) {
-  if (!props.token) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: props.children });
-  const resolvedProps = {
-    ...props,
-    baseUrl: props.baseUrl || DEFAULT_BASE_URL2
-  };
-  try {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(GlitchgrabProviderInner, { ...resolvedProps });
-  } catch (e) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: props.children });
-  }
-}
-
-// src/report-button.tsx
-var import_react2 = require("react");
+// src/report-dialog.tsx
+var import_react = require("react");
 var import_react_dom = require("react-dom");
-var import_jsx_runtime2 = require("react/jsx-runtime");
-function useGlitchgrabSafe() {
-  try {
-    return useGlitchgrab();
-  } catch (e) {
-    return null;
-  }
-}
+var import_jsx_runtime = require("react/jsx-runtime");
 function useIsDark() {
   if (typeof window === "undefined") return true;
   try {
@@ -614,37 +380,32 @@ function useIsDark() {
 function getTheme(dark) {
   return dark ? { bg: "#1c1c1e", bgSecondary: "#27272a", border: "#2c2c2e", text: "#fafafa", textMuted: "#a1a1aa", accent: "#22d3ee", accentText: "#09090b", inputBg: "#27272a", inputBorder: "#3f3f46" } : { bg: "#ffffff", bgSecondary: "#f4f4f5", border: "#e4e4e7", text: "#18181b", textMuted: "#71717a", accent: "#0891b2", accentText: "#ffffff", inputBg: "#fafafa", inputBorder: "#d4d4d8" };
 }
-function ReportButton({
-  position = "bottom-right",
-  label = "Report Bug",
-  className,
-  variant = "classic",
-  showSeverity = true,
+function ReportDialog({
+  report,
   types,
-  children
+  showSeverity = true
 }) {
-  var _a, _b;
-  const [capturing, setCapturing] = (0, import_react2.useState)(false);
-  const [isOpen, setIsOpen] = (0, import_react2.useState)(false);
-  const [description, setDescription] = (0, import_react2.useState)("");
-  const [isSubmitting, setIsSubmitting] = (0, import_react2.useState)(false);
-  const [submitted, setSubmitted] = (0, import_react2.useState)(false);
-  const [screenshot, setScreenshot] = (0, import_react2.useState)(null);
-  const [previewOpen, setPreviewOpen] = (0, import_react2.useState)(false);
-  const fileInputRef = (0, import_react2.useRef)(null);
-  const modalRef = (0, import_react2.useRef)(null);
-  const glitchgrab = useGlitchgrabSafe();
-  const [step, setStep] = (0, import_react2.useState)(1);
-  const [reportType, setReportType] = (0, import_react2.useState)("BUG");
-  const [severity, setSeverity] = (0, import_react2.useState)("medium");
+  const [mounted, setMounted] = (0, import_react.useState)(false);
+  (0, import_react.useEffect)(() => {
+    setMounted(true);
+  }, []);
+  const [isOpen, setIsOpen] = (0, import_react.useState)(false);
+  const [description, setDescription] = (0, import_react.useState)("");
+  const [isSubmitting, setIsSubmitting] = (0, import_react.useState)(false);
+  const [submitted, setSubmitted] = (0, import_react.useState)(false);
+  const [screenshot, setScreenshot] = (0, import_react.useState)(null);
+  const [previewOpen, setPreviewOpen] = (0, import_react.useState)(false);
+  const fileInputRef = (0, import_react.useRef)(null);
+  const modalRef = (0, import_react.useRef)(null);
+  const [step, setStep] = (0, import_react.useState)(1);
+  const [reportType, setReportType] = (0, import_react.useState)("BUG");
+  const [severity, setSeverity] = (0, import_react.useState)("medium");
   const availableTypes = types != null ? types : ["BUG", "FEATURE_REQUEST", "QUESTION", "OTHER"];
-  if (!glitchgrab) return null;
-  const { reportBug, report } = glitchgrab;
   const isDark = useIsDark();
   const t = getTheme(isDark);
   const handleFileUpload = (e) => {
-    var _a2;
-    const file = (_a2 = e.target.files) == null ? void 0 : _a2[0];
+    var _a;
+    const file = (_a = e.target.files) == null ? void 0 : _a[0];
     if (!file) return;
     const reader = new FileReader();
     reader.onload = () => {
@@ -672,9 +433,8 @@ function ReportButton({
     setIsOpen(true);
   };
   const handleOpen = async () => {
-    setCapturing(true);
     setSubmitted(false);
-    if (variant === "stepper" && availableTypes.length === 1) {
+    if (availableTypes.length === 1) {
       setReportType(availableTypes[0]);
       setStep(2);
     }
@@ -689,24 +449,23 @@ function ReportButton({
       setScreenshot(canvas.toDataURL("image/jpeg", 0.6));
     } catch (e) {
     }
-    setCapturing(false);
     setIsOpen(true);
   };
-  (0, import_react2.useEffect)(() => {
+  (0, import_react.useEffect)(() => {
     const handler = (e) => {
       if (isOpen) return;
       const detail = e.detail;
       if (detail == null ? void 0 : detail.description) setDescription(detail.description);
       if (detail == null ? void 0 : detail.type) {
         setReportType(detail.type);
-        if (variant === "stepper") setStep(2);
+        setStep(2);
       }
       handleOpen();
     };
     window.addEventListener("glitchgrab:open-report", handler);
     return () => window.removeEventListener("glitchgrab:open-report", handler);
-  }, [isOpen, handleOpen, variant]);
-  (0, import_react2.useEffect)(() => {
+  }, [isOpen, handleOpen]);
+  (0, import_react.useEffect)(() => {
     if (!isOpen) return;
     const handleEsc = (e) => {
       if (e.key === "Escape") {
@@ -729,10 +488,10 @@ function ReportButton({
       setIsSubmitting(true);
       const metadata = {};
       if (screenshot) metadata.screenshot = screenshot;
-      if (variant === "stepper" && showSeverity && reportType === "BUG") {
+      if (showSeverity && reportType === "BUG") {
         metadata.severity = severity;
       }
-      const result = variant === "stepper" ? await report(reportType, description.trim(), Object.keys(metadata).length > 0 ? metadata : void 0) : await reportBug(description.trim(), Object.keys(metadata).length > 0 ? metadata : void 0);
+      const result = await report(reportType, description.trim(), Object.keys(metadata).length > 0 ? metadata : void 0);
       if (result) {
         setSubmitted(true);
         setDescription("");
@@ -747,27 +506,10 @@ function ReportButton({
       setIsSubmitting(false);
     }
   };
-  const isTop = (_a = position == null ? void 0 : position.startsWith("top")) != null ? _a : false;
-  const isLeft = (_b = position == null ? void 0 : position.endsWith("left")) != null ? _b : false;
-  const modalPositionStyles = children ? {} : {
-    ...isLeft ? { left: "16px" } : { right: "16px" },
-    ...isTop ? { top: "64px" } : { bottom: "64px" }
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
-    children ? children({ onClick: handleOpen, capturing }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-      DefaultTrigger,
-      {
-        onClick: handleOpen,
-        capturing,
-        label,
-        className,
-        position,
-        isLeft,
-        isTop
-      }
-    ),
-    isOpen && typeof document !== "undefined" && (0, import_react_dom.createPortal)(
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  if (!mounted) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    isOpen && (0, import_react_dom.createPortal)(
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         "div",
         {
           style: {
@@ -783,14 +525,13 @@ function ReportButton({
           onClick: () => {
             if (!previewOpen) handleClose();
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
             "div",
             {
               ref: modalRef,
               onClick: (e) => e.stopPropagation(),
               style: {
-                position: children ? "relative" : "fixed",
-                ...modalPositionStyles,
+                position: "relative",
                 zIndex: 2147483647,
                 width: "340px",
                 maxWidth: "calc(100% - 32px)",
@@ -803,7 +544,7 @@ function ReportButton({
                 isolation: "isolate"
               },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
                   "div",
                   {
                     style: {
@@ -811,7 +552,7 @@ function ReportButton({
                       borderBottom: `1px solid ${t.border}`
                     },
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
                         "div",
                         {
                           style: {
@@ -820,8 +561,8 @@ function ReportButton({
                             alignItems: "center"
                           },
                           children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
-                              variant === "stepper" && step > 1 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+                              step > 1 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                                 "button",
                                 {
                                   type: "button",
@@ -835,10 +576,10 @@ function ReportButton({
                                     alignItems: "center"
                                   },
                                   "aria-label": "Back",
-                                  children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M10 3L5 8L10 13", stroke: t.textMuted, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
+                                  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M10 3L5 8L10 13", stroke: t.textMuted, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
                                 }
                               ),
-                              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                                 "span",
                                 {
                                   style: {
@@ -846,11 +587,11 @@ function ReportButton({
                                     fontWeight: 600,
                                     color: t.text
                                   },
-                                  children: variant === "stepper" ? step === 1 ? "What's on your mind?" : step === 2 ? "Tell us more" : "Review & Send" : "Report a Bug"
+                                  children: step === 1 ? "What's on your mind?" : step === 2 ? "Tell us more" : "Review & Send"
                                 }
                               )
                             ] }),
-                            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                               "button",
                               {
                                 type: "button",
@@ -865,21 +606,21 @@ function ReportButton({
                                   justifyContent: "center"
                                 },
                                 "aria-label": "Close",
-                                children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", style: { display: "block" }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M4 4L12 12M12 4L4 12", stroke: t.textMuted, strokeWidth: "2", strokeLinecap: "round" }) })
+                                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", style: { display: "block" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M4 4L12 12M12 4L4 12", stroke: t.textMuted, strokeWidth: "2", strokeLinecap: "round" }) })
                               }
                             )
                           ]
                         }
                       ),
-                      variant === "stepper" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", gap: "0", marginTop: "12px" }, children: [1, 2, 3].map((s, i) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "flex", alignItems: "center" }, children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: {
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", gap: "0", marginTop: "12px" }, children: [1, 2, 3].map((s, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", alignItems: "center" }, children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: {
                           width: "8px",
                           height: "8px",
                           borderRadius: "50%",
                           backgroundColor: s <= step ? t.accent : t.inputBorder,
                           transition: "background-color 0.2s ease"
                         } }),
-                        i < 2 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: {
+                        i < 2 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: {
                           width: "40px",
                           height: "2px",
                           backgroundColor: s < step ? t.accent : t.inputBorder,
@@ -889,7 +630,7 @@ function ReportButton({
                     ]
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { padding: "16px" }, children: submitted ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { padding: "16px" }, children: submitted ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
                   "div",
                   {
                     style: {
@@ -899,283 +640,172 @@ function ReportButton({
                       fontSize: "14px",
                       fontWeight: 500
                     },
-                    children: variant === "stepper" ? `${getTypeLabel(reportType)} sent. Thank you!` : "Bug report sent. Thank you!"
+                    children: [
+                      getTypeLabel(reportType),
+                      " sent. Thank you!"
+                    ]
                   }
-                ) : variant === "stepper" ? (
-                  /* ─── Stepper Flow ─── */
-                  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
-                    step === 1 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: "8px" }, children: availableTypes.map((type) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-                      "button",
-                      {
-                        type: "button",
-                        onClick: () => {
-                          setReportType(type);
-                          setStep(2);
-                        },
-                        style: {
-                          display: "flex",
-                          flexDirection: "column",
-                          alignItems: "center",
-                          gap: "8px",
-                          padding: "16px 8px",
-                          borderRadius: "8px",
-                          border: `1px solid ${t.inputBorder}`,
-                          background: t.inputBg,
-                          cursor: "pointer",
-                          color: t.text,
-                          fontFamily: "inherit",
-                          transition: "border-color 0.15s ease"
+                ) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+                  step === 1 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: "8px" }, children: availableTypes.map((type) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => {
+                        setReportType(type);
+                        setStep(2);
+                      },
+                      style: {
+                        display: "flex",
+                        flexDirection: "column",
+                        alignItems: "center",
+                        gap: "8px",
+                        padding: "16px 8px",
+                        borderRadius: "8px",
+                        border: `1px solid ${t.inputBorder}`,
+                        background: t.inputBg,
+                        cursor: "pointer",
+                        color: t.text,
+                        fontFamily: "inherit",
+                        transition: "border-color 0.15s ease"
+                      },
+                      onMouseEnter: (e) => {
+                        e.currentTarget.style.borderColor = t.accent;
+                      },
+                      onMouseLeave: (e) => {
+                        e.currentTarget.style.borderColor = t.inputBorder;
+                      },
+                      children: [
+                        getTypeIcon(type, t.accent),
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontSize: "13px", fontWeight: 600 }, children: getTypeLabel(type) }),
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontSize: "11px", color: t.textMuted, lineHeight: "1.3" }, children: getTypeSubtitle(type) })
+                      ]
+                    },
+                    type
+                  )) }),
+                  step === 2 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      "textarea",
+                      {
+                        value: description,
+                        onChange: (e) => setDescription(e.target.value),
+                        placeholder: getPlaceholder(reportType),
+                        style: {
+                          width: "100%",
+                          minHeight: "100px",
+                          padding: "10px 12px",
+                          borderRadius: "8px",
+                          border: `1px solid ${t.inputBorder}`,
+                          fontSize: "14px",
+                          fontFamily: "inherit",
+                          resize: "vertical",
+                          outline: "none",
+                          boxSizing: "border-box",
+                          color: t.text,
+                          backgroundColor: t.inputBg
                         },
-                        onMouseEnter: (e) => {
-                          e.currentTarget.style.borderColor = t.accent;
+                        onFocus: (e) => {
+                          e.target.style.borderColor = t.accent;
                         },
-                        onMouseLeave: (e) => {
-                          e.currentTarget.style.borderColor = t.inputBorder;
+                        onBlur: (e) => {
+                          e.target.style.borderColor = t.inputBorder;
                         },
-                        children: [
-                          getTypeIcon(type, t.accent),
-                          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { fontSize: "13px", fontWeight: 600 }, children: getTypeLabel(type) }),
-                          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { fontSize: "11px", color: t.textMuted, lineHeight: "1.3" }, children: getTypeSubtitle(type) })
-                        ]
-                      },
-                      type
-                    )) }),
-                    step === 2 && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                        "textarea",
-                        {
-                          value: description,
-                          onChange: (e) => setDescription(e.target.value),
-                          placeholder: getPlaceholder(reportType),
-                          style: {
-                            width: "100%",
-                            minHeight: "100px",
-                            padding: "10px 12px",
-                            borderRadius: "8px",
-                            border: `1px solid ${t.inputBorder}`,
-                            fontSize: "14px",
-                            fontFamily: "inherit",
-                            resize: "vertical",
-                            outline: "none",
-                            boxSizing: "border-box",
-                            color: t.text,
-                            backgroundColor: t.inputBg
-                          },
-                          onFocus: (e) => {
-                            e.target.style.borderColor = t.accent;
-                          },
-                          onBlur: (e) => {
-                            e.target.style.borderColor = t.inputBorder;
-                          },
-                          autoFocus: true
-                        }
-                      ),
-                      showSeverity && reportType === "BUG" && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { marginTop: "10px" }, children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { fontSize: "12px", color: t.textMuted, marginBottom: "6px", display: "block" }, children: "Severity" }),
-                        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { display: "flex", gap: "6px" }, children: ["low", "medium", "high"].map((s) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                          "button",
-                          {
-                            type: "button",
-                            onClick: () => setSeverity(s),
-                            style: {
-                              flex: 1,
-                              padding: "6px 0",
-                              borderRadius: "6px",
-                              border: `1px solid ${severity === s ? t.accent : t.inputBorder}`,
-                              background: severity === s ? t.accent : "transparent",
-                              color: severity === s ? t.accentText : t.text,
-                              fontSize: "12px",
-                              fontWeight: 600,
-                              cursor: "pointer",
-                              fontFamily: "inherit",
-                              textTransform: "capitalize",
-                              transition: "all 0.15s ease"
-                            },
-                            children: s
-                          },
-                          s
-                        )) })
-                      ] }),
-                      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                        autoFocus: true
+                      }
+                    ),
+                    showSeverity && reportType === "BUG" && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { marginTop: "10px" }, children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontSize: "12px", color: t.textMuted, marginBottom: "6px", display: "block" }, children: "Severity" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { display: "flex", gap: "6px" }, children: ["low", "medium", "high"].map((s) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                         "button",
                         {
                           type: "button",
-                          onClick: () => setStep(3),
-                          disabled: !description.trim(),
+                          onClick: () => setSeverity(s),
                           style: {
-                            marginTop: "12px",
-                            width: "100%",
-                            padding: "10px",
-                            borderRadius: "8px",
-                            border: "none",
-                            backgroundColor: !description.trim() ? t.bgSecondary : t.accent,
-                            color: !description.trim() ? t.textMuted : t.accentText,
-                            fontSize: "14px",
+                            flex: 1,
+                            padding: "6px 0",
+                            borderRadius: "6px",
+                            border: `1px solid ${severity === s ? t.accent : t.inputBorder}`,
+                            background: severity === s ? t.accent : "transparent",
+                            color: severity === s ? t.accentText : t.text,
+                            fontSize: "12px",
                             fontWeight: 600,
-                            cursor: !description.trim() ? "not-allowed" : "pointer",
+                            cursor: "pointer",
                             fontFamily: "inherit",
-                            transition: "background-color 0.15s ease"
+                            textTransform: "capitalize",
+                            transition: "all 0.15s ease"
                           },
-                          children: "Next"
-                        }
-                      )
+                          children: s
+                        },
+                        s
+                      )) })
                     ] }),
-                    step === 3 && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "flex", gap: "6px", flexWrap: "wrap", marginBottom: "12px" }, children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { style: {
-                          display: "inline-flex",
-                          alignItems: "center",
-                          gap: "4px",
-                          padding: "4px 10px",
-                          borderRadius: "12px",
-                          fontSize: "12px",
-                          fontWeight: 600,
-                          backgroundColor: t.bgSecondary,
-                          color: t.text,
-                          border: `1px solid ${t.border}`
-                        }, children: [
-                          getTypeIcon(reportType, t.accent, 12),
-                          getTypeLabel(reportType)
-                        ] }),
-                        showSeverity && reportType === "BUG" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: {
-                          display: "inline-flex",
-                          alignItems: "center",
-                          padding: "4px 10px",
-                          borderRadius: "12px",
-                          fontSize: "12px",
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: () => setStep(3),
+                        disabled: !description.trim(),
+                        style: {
+                          marginTop: "12px",
+                          width: "100%",
+                          padding: "10px",
+                          borderRadius: "8px",
+                          border: "none",
+                          backgroundColor: !description.trim() ? t.bgSecondary : t.accent,
+                          color: !description.trim() ? t.textMuted : t.accentText,
+                          fontSize: "14px",
                           fontWeight: 600,
-                          backgroundColor: severity === "high" ? "#fef2f2" : severity === "medium" ? "#fffbeb" : "#f0fdf4",
-                          color: severity === "high" ? "#dc2626" : severity === "medium" ? "#d97706" : "#16a34a",
-                          border: `1px solid ${severity === "high" ? "#fecaca" : severity === "medium" ? "#fde68a" : "#bbf7d0"}`,
-                          textTransform: "capitalize"
-                        }, children: severity })
-                      ] }),
-                      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: {
-                        padding: "10px 12px",
-                        borderRadius: "8px",
-                        border: `1px solid ${t.inputBorder}`,
-                        backgroundColor: t.inputBg,
-                        fontSize: "13px",
+                          cursor: !description.trim() ? "not-allowed" : "pointer",
+                          fontFamily: "inherit",
+                          transition: "background-color 0.15s ease"
+                        },
+                        children: "Next"
+                      }
+                    )
+                  ] }),
+                  step === 3 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", gap: "6px", flexWrap: "wrap", marginBottom: "12px" }, children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { style: {
+                        display: "inline-flex",
+                        alignItems: "center",
+                        gap: "4px",
+                        padding: "4px 10px",
+                        borderRadius: "12px",
+                        fontSize: "12px",
+                        fontWeight: 600,
+                        backgroundColor: t.bgSecondary,
                         color: t.text,
-                        marginBottom: "10px",
-                        maxHeight: "80px",
-                        overflow: "hidden",
-                        lineHeight: "1.4"
-                      }, children: description.length > 200 ? description.slice(0, 200) + "..." : description }),
-                      screenshot && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { marginBottom: "10px", position: "relative" }, children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                          "img",
-                          {
-                            src: screenshot,
-                            alt: "Page screenshot",
-                            onClick: () => setPreviewOpen(true),
-                            style: {
-                              width: "100%",
-                              borderRadius: "6px",
-                              border: `1px solid ${t.border}`,
-                              maxHeight: "80px",
-                              objectFit: "cover",
-                              objectPosition: "top",
-                              cursor: "pointer"
-                            }
-                          }
-                        ),
-                        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                          "button",
-                          {
-                            type: "button",
-                            onClick: () => setScreenshot(null),
-                            style: {
-                              position: "absolute",
-                              top: "4px",
-                              right: "4px",
-                              background: "rgba(0,0,0,0.6)",
-                              border: "none",
-                              borderRadius: "50%",
-                              width: "20px",
-                              height: "20px",
-                              cursor: "pointer",
-                              display: "flex",
-                              alignItems: "center",
-                              justifyContent: "center"
-                            },
-                            "aria-label": "Remove screenshot",
-                            children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M1 1L9 9M9 1L1 9", stroke: "#fff", strokeWidth: "1.5", strokeLinecap: "round" }) })
-                          }
-                        )
-                      ] }),
-                      !screenshot && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "flex", gap: "6px", marginBottom: "10px" }, children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                          "button",
-                          {
-                            type: "button",
-                            onClick: () => {
-                              var _a2;
-                              return (_a2 = fileInputRef.current) == null ? void 0 : _a2.click();
-                            },
-                            style: {
-                              flex: 1,
-                              padding: "8px",
-                              borderRadius: "6px",
-                              border: `1px dashed ${t.inputBorder}`,
-                              textAlign: "center",
-                              fontSize: "11px",
-                              color: t.textMuted,
-                              background: "none",
-                              cursor: "pointer"
-                            },
-                            children: "Upload screenshot"
-                          }
-                        ),
-                        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                          "button",
-                          {
-                            type: "button",
-                            onClick: retakeScreenshot,
-                            style: {
-                              flex: 1,
-                              padding: "8px",
-                              borderRadius: "6px",
-                              border: `1px dashed ${t.inputBorder}`,
-                              textAlign: "center",
-                              fontSize: "11px",
-                              color: t.textMuted,
-                              background: "none",
-                              cursor: "pointer"
-                            },
-                            children: "Retake screenshot"
-                          }
-                        )
+                        border: `1px solid ${t.border}`
+                      }, children: [
+                        getTypeIcon(reportType, t.accent, 12),
+                        getTypeLabel(reportType)
                       ] }),
-                      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                        "button",
-                        {
-                          type: "button",
-                          onClick: handleSubmit,
-                          disabled: isSubmitting,
-                          style: {
-                            width: "100%",
-                            padding: "10px",
-                            borderRadius: "8px",
-                            border: "none",
-                            backgroundColor: isSubmitting ? t.bgSecondary : t.accent,
-                            color: isSubmitting ? t.textMuted : t.accentText,
-                            fontSize: "14px",
-                            fontWeight: 600,
-                            cursor: isSubmitting ? "not-allowed" : "pointer",
-                            fontFamily: "inherit",
-                            transition: "background-color 0.15s ease"
-                          },
-                          children: isSubmitting ? "Sending..." : "Send Report"
-                        }
-                      )
-                    ] })
-                  ] })
-                ) : (
-                  /* ─── Classic Flow ─── */
-                  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
-                    screenshot && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { marginBottom: "10px", position: "relative" }, children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                      showSeverity && reportType === "BUG" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: {
+                        display: "inline-flex",
+                        alignItems: "center",
+                        padding: "4px 10px",
+                        borderRadius: "12px",
+                        fontSize: "12px",
+                        fontWeight: 600,
+                        backgroundColor: severity === "high" ? "#fef2f2" : severity === "medium" ? "#fffbeb" : "#f0fdf4",
+                        color: severity === "high" ? "#dc2626" : severity === "medium" ? "#d97706" : "#16a34a",
+                        border: `1px solid ${severity === "high" ? "#fecaca" : severity === "medium" ? "#fde68a" : "#bbf7d0"}`,
+                        textTransform: "capitalize"
+                      }, children: severity })
+                    ] }),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: {
+                      padding: "10px 12px",
+                      borderRadius: "8px",
+                      border: `1px solid ${t.inputBorder}`,
+                      backgroundColor: t.inputBg,
+                      fontSize: "13px",
+                      color: t.text,
+                      marginBottom: "10px",
+                      maxHeight: "80px",
+                      overflow: "hidden",
+                      lineHeight: "1.4"
+                    }, children: description.length > 200 ? description.slice(0, 200) + "..." : description }),
+                    screenshot && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { marginBottom: "10px", position: "relative" }, children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                         "img",
                         {
                           src: screenshot,
@@ -1185,14 +815,14 @@ function ReportButton({
                             width: "100%",
                             borderRadius: "6px",
                             border: `1px solid ${t.border}`,
-                            maxHeight: "120px",
+                            maxHeight: "80px",
                             objectFit: "cover",
                             objectPosition: "top",
                             cursor: "pointer"
                           }
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                         "button",
                         {
                           type: "button",
@@ -1212,153 +842,69 @@ function ReportButton({
                             justifyContent: "center"
                           },
                           "aria-label": "Remove screenshot",
-                          children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M1 1L9 9M9 1L1 9", stroke: "#fff", strokeWidth: "1.5", strokeLinecap: "round" }) })
+                          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M1 1L9 9M9 1L1 9", stroke: "#fff", strokeWidth: "1.5", strokeLinecap: "round" }) })
+                        }
+                      )
+                    ] }),
+                    !screenshot && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", gap: "6px", marginBottom: "10px" }, children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: () => {
+                            var _a;
+                            return (_a = fileInputRef.current) == null ? void 0 : _a.click();
+                          },
+                          style: {
+                            flex: 1,
+                            padding: "8px",
+                            borderRadius: "6px",
+                            border: `1px dashed ${t.inputBorder}`,
+                            textAlign: "center",
+                            fontSize: "11px",
+                            color: t.textMuted,
+                            background: "none",
+                            cursor: "pointer"
+                          },
+                          children: "Upload screenshot"
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-                        "div",
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                        "button",
                         {
+                          type: "button",
+                          onClick: retakeScreenshot,
                           style: {
-                            position: "absolute",
-                            bottom: "4px",
-                            left: "6px",
-                            right: "6px",
-                            display: "flex",
-                            justifyContent: "space-between",
-                            alignItems: "center"
+                            flex: 1,
+                            padding: "8px",
+                            borderRadius: "6px",
+                            border: `1px dashed ${t.inputBorder}`,
+                            textAlign: "center",
+                            fontSize: "11px",
+                            color: t.textMuted,
+                            background: "none",
+                            cursor: "pointer"
                           },
-                          children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-                              "span",
-                              {
-                                style: {
-                                  background: "rgba(0,0,0,0.6)",
-                                  color: "#fff",
-                                  fontSize: "10px",
-                                  padding: "2px 6px",
-                                  borderRadius: "4px"
-                                },
-                                children: [
-                                  "Screenshot (",
-                                  Math.round(screenshot.length * 0.75 / 1024),
-                                  "KB) \u2014 click to preview"
-                                ]
-                              }
-                            ),
-                            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "flex", gap: "4px" }, children: [
-                              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                                "button",
-                                {
-                                  type: "button",
-                                  onClick: () => {
-                                    var _a2;
-                                    return (_a2 = fileInputRef.current) == null ? void 0 : _a2.click();
-                                  },
-                                  style: {
-                                    background: t.accent,
-                                    color: t.accentText,
-                                    fontSize: "10px",
-                                    padding: "3px 8px",
-                                    borderRadius: "4px",
-                                    border: "none",
-                                    cursor: "pointer",
-                                    fontWeight: 600
-                                  },
-                                  children: "Upload"
-                                }
-                              ),
-                              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                                "button",
-                                {
-                                  type: "button",
-                                  onClick: retakeScreenshot,
-                                  style: {
-                                    background: t.accent,
-                                    color: t.accentText,
-                                    fontSize: "10px",
-                                    padding: "3px 8px",
-                                    borderRadius: "4px",
-                                    border: "none",
-                                    cursor: "pointer",
-                                    fontWeight: 600
-                                  },
-                                  children: "Retake"
-                                }
-                              )
-                            ] })
-                          ]
+                          children: "Retake screenshot"
                         }
                       )
                     ] }),
-                    !screenshot && !submitted && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                      "button",
-                      {
-                        type: "button",
-                        onClick: () => {
-                          var _a2;
-                          return (_a2 = fileInputRef.current) == null ? void 0 : _a2.click();
-                        },
-                        style: {
-                          marginBottom: "10px",
-                          padding: "10px",
-                          borderRadius: "6px",
-                          border: `1px dashed ${t.inputBorder}`,
-                          textAlign: "center",
-                          fontSize: "11px",
-                          color: t.textMuted,
-                          width: "100%",
-                          background: "none",
-                          cursor: "pointer"
-                        },
-                        children: "Click to upload a screenshot"
-                      }
-                    ),
-                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                      "textarea",
-                      {
-                        value: description,
-                        onChange: (e) => setDescription(e.target.value),
-                        placeholder: "Describe what went wrong...",
-                        style: {
-                          width: "100%",
-                          minHeight: "100px",
-                          padding: "10px 12px",
-                          borderRadius: "8px",
-                          border: `1px solid ${t.inputBorder}`,
-                          fontSize: "14px",
-                          fontFamily: "inherit",
-                          resize: "vertical",
-                          outline: "none",
-                          boxSizing: "border-box",
-                          color: t.text,
-                          backgroundColor: t.inputBg
-                        },
-                        onFocus: (e) => {
-                          e.target.style.borderColor = t.accent;
-                        },
-                        onBlur: (e) => {
-                          e.target.style.borderColor = t.inputBorder;
-                        },
-                        autoFocus: true
-                      }
-                    ),
-                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                       "button",
                       {
                         type: "button",
                         onClick: handleSubmit,
-                        disabled: !description.trim() || isSubmitting,
+                        disabled: isSubmitting,
                         style: {
-                          marginTop: "12px",
                           width: "100%",
                           padding: "10px",
                           borderRadius: "8px",
                           border: "none",
-                          backgroundColor: !description.trim() || isSubmitting ? t.bgSecondary : t.accent,
-                          color: !description.trim() || isSubmitting ? t.textMuted : t.accentText,
+                          backgroundColor: isSubmitting ? t.bgSecondary : t.accent,
+                          color: isSubmitting ? t.textMuted : t.accentText,
                           fontSize: "14px",
                           fontWeight: 600,
-                          cursor: !description.trim() || isSubmitting ? "not-allowed" : "pointer",
+                          cursor: isSubmitting ? "not-allowed" : "pointer",
                           fontFamily: "inherit",
                           transition: "background-color 0.15s ease"
                         },
@@ -1366,8 +912,8 @@ function ReportButton({
                       }
                     )
                   ] })
-                ) }),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                ] }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                   "div",
                   {
                     style: {
@@ -1375,7 +921,7 @@ function ReportButton({
                       borderTop: `1px solid ${t.border}`,
                       textAlign: "center"
                     },
-                    children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { fontSize: "11px", color: t.textMuted }, children: "Powered by Glitchgrab" })
+                    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontSize: "11px", color: t.textMuted }, children: "Powered by Glitchgrab" })
                   }
                 )
               ]
@@ -1385,7 +931,7 @@ function ReportButton({
       ),
       document.body
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "input",
       {
         ref: fileInputRef,
@@ -1395,8 +941,8 @@ function ReportButton({
         style: { display: "none" }
       }
     ),
-    previewOpen && screenshot && typeof document !== "undefined" && (0, import_react_dom.createPortal)(
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    previewOpen && screenshot && (0, import_react_dom.createPortal)(
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
         "div",
         {
           style: {
@@ -1417,7 +963,7 @@ function ReportButton({
           },
           onMouseDown: (e) => e.stopPropagation(),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
               "img",
               {
                 src: screenshot,
@@ -1432,7 +978,7 @@ function ReportButton({
                 }
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
               "span",
               {
                 style: {
@@ -1490,36 +1036,290 @@ function getTypeIcon(type, color, size = 24) {
   const props = { width: size, height: size, viewBox: "0 0 24 24", fill: "none", style: { flexShrink: 0 } };
   switch (type) {
     case "BUG":
-      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M8 2L6.5 3.5M16 2L17.5 3.5M3 9H7M17 9H21M12 2a5 5 0 015 5v4a5 5 0 01-10 0V7a5 5 0 015-5zM7 16l-2 3M17 16l2 3", stroke: color, strokeWidth: "1.5", strokeLinecap: "round" }) });
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M8 2L6.5 3.5M16 2L17.5 3.5M3 9H7M17 9H21M12 2a5 5 0 015 5v4a5 5 0 01-10 0V7a5 5 0 015-5zM7 16l-2 3M17 16l2 3", stroke: color, strokeWidth: "1.5", strokeLinecap: "round" }) });
     case "FEATURE_REQUEST":
-      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2z", stroke: color, strokeWidth: "1.5", strokeLinejoin: "round" }) });
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2z", stroke: color, strokeWidth: "1.5", strokeLinejoin: "round" }) });
     case "QUESTION":
-      return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("svg", { ...props, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "12", cy: "12", r: "10", stroke: color, strokeWidth: "1.5" }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3M12 17h.01", stroke: color, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { ...props, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "12", r: "10", stroke: color, strokeWidth: "1.5" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3M12 17h.01", stroke: color, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
       ] });
     case "OTHER":
-      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2v10z", stroke: color, strokeWidth: "1.5", strokeLinejoin: "round" }) });
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2v10z", stroke: color, strokeWidth: "1.5", strokeLinejoin: "round" }) });
   }
 }
-function DefaultTrigger({
-  onClick,
-  capturing,
-  label,
+
+// src/provider.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var DEFAULT_BASE_URL2 = "https://www.glitchgrab.dev";
+var GlitchgrabContext = (0, import_react2.createContext)(null);
+function useGlitchgrab() {
+  const ctx = (0, import_react2.useContext)(GlitchgrabContext);
+  if (!ctx) {
+    throw new Error("useGlitchgrab must be used within a GlitchgrabProvider");
+  }
+  return ctx;
+}
+function GlitchgrabProviderInner({
+  token,
+  session,
+  baseUrl,
+  onError,
+  onReportSent,
+  breadcrumbs: enableBreadcrumbs = true,
+  maxBreadcrumbs: maxBreadcrumbs2 = 50,
+  children,
+  fallback,
+  types,
+  showSeverity
+}) {
+  const visitedPagesRef = (0, import_react2.useRef)([]);
+  (0, import_react2.useEffect)(() => {
+    if (enableBreadcrumbs) {
+      initBreadcrumbs(maxBreadcrumbs2);
+    }
+  }, [enableBreadcrumbs, maxBreadcrumbs2]);
+  (0, import_react2.useEffect)(() => {
+    try {
+      if (typeof window === "undefined") return;
+      const trackPage = () => {
+        try {
+          const sanitized = sanitizeUrl(window.location.href);
+          const pages = visitedPagesRef.current;
+          if (pages[pages.length - 1] !== sanitized) {
+            pages.push(sanitized);
+            if (pages.length > 20) {
+              pages.splice(0, pages.length - 20);
+            }
+          }
+        } catch (e) {
+        }
+      };
+      trackPage();
+      const handlePopState = () => trackPage();
+      window.addEventListener("popstate", handlePopState);
+      const origPushState = history.pushState.bind(history);
+      const origReplaceState = history.replaceState.bind(history);
+      history.pushState = function(...args) {
+        origPushState(...args);
+        trackPage();
+      };
+      history.replaceState = function(...args) {
+        origReplaceState(...args);
+        trackPage();
+      };
+      return () => {
+        window.removeEventListener("popstate", handlePopState);
+        history.pushState = origPushState;
+        history.replaceState = origReplaceState;
+      };
+    } catch (e) {
+    }
+  }, []);
+  (0, import_react2.useEffect)(() => {
+    try {
+      if (typeof window === "undefined") return;
+      if (process.env.NODE_ENV === "development") return;
+      const handleError = (event) => {
+        var _a, _b, _c, _d, _e;
+        try {
+          const context = captureContext(visitedPagesRef.current);
+          const payload = {
+            token,
+            source: "SDK_AUTO",
+            type: "BUG",
+            errorMessage: event.message,
+            errorStack: (_a = event.error) == null ? void 0 : _a.stack,
+            pageUrl: context.url,
+            userAgent: context.userAgent,
+            breadcrumbs: context.breadcrumbs,
+            deviceInfo: (_b = context.deviceInfo) != null ? _b : void 0,
+            metadata: {
+              timestamp: context.timestamp,
+              visitedPages: JSON.stringify(context.visitedPages),
+              filename: (_c = event.filename) != null ? _c : "",
+              lineno: String((_d = event.lineno) != null ? _d : ""),
+              colno: String((_e = event.colno) != null ? _e : ""),
+              ...(session == null ? void 0 : session.userId) ? { sessionUserId: session.userId } : {},
+              ...(session == null ? void 0 : session.name) ? { sessionUserName: String(session.name) } : {},
+              ...(session == null ? void 0 : session.email) ? { sessionUserEmail: String(session.email) } : {}
+            }
+          };
+          sendReport(payload, baseUrl).then((result) => {
+            if (result && onReportSent) onReportSent(result);
+          });
+          if (onError && event.error) onError(event.error);
+        } catch (e) {
+        }
+      };
+      const handleRejection = (event) => {
+        var _a;
+        try {
+          const context = captureContext(visitedPagesRef.current);
+          const reason = event.reason;
+          const payload = {
+            token,
+            source: "SDK_AUTO",
+            type: "BUG",
+            errorMessage: reason instanceof Error ? reason.message : String(reason),
+            errorStack: reason instanceof Error ? reason.stack : void 0,
+            pageUrl: context.url,
+            userAgent: context.userAgent,
+            breadcrumbs: context.breadcrumbs,
+            deviceInfo: (_a = context.deviceInfo) != null ? _a : void 0,
+            metadata: {
+              timestamp: context.timestamp,
+              visitedPages: JSON.stringify(context.visitedPages),
+              type: "unhandledrejection",
+              ...(session == null ? void 0 : session.userId) ? { sessionUserId: session.userId } : {},
+              ...(session == null ? void 0 : session.name) ? { sessionUserName: String(session.name) } : {},
+              ...(session == null ? void 0 : session.email) ? { sessionUserEmail: String(session.email) } : {}
+            }
+          };
+          sendReport(payload, baseUrl).then((result) => {
+            if (result && onReportSent) onReportSent(result);
+          });
+          if (onError && reason instanceof Error) onError(reason);
+        } catch (e) {
+        }
+      };
+      window.addEventListener("error", handleError);
+      window.addEventListener("unhandledrejection", handleRejection);
+      return () => {
+        window.removeEventListener("error", handleError);
+        window.removeEventListener("unhandledrejection", handleRejection);
+      };
+    } catch (e) {
+    }
+  }, [token, baseUrl, onError, onReportSent]);
+  const report = (0, import_react2.useCallback)(
+    async (type, description, metadata) => {
+      var _a;
+      try {
+        const context = captureContext(visitedPagesRef.current);
+        const payload = {
+          token,
+          source: "SDK_USER_REPORT",
+          type,
+          description,
+          pageUrl: context.url,
+          userAgent: context.userAgent,
+          breadcrumbs: context.breadcrumbs,
+          deviceInfo: (_a = context.deviceInfo) != null ? _a : void 0,
+          metadata: {
+            timestamp: context.timestamp,
+            visitedPages: JSON.stringify(context.visitedPages),
+            ...(session == null ? void 0 : session.userId) ? { sessionUserId: session.userId } : {},
+            ...(session == null ? void 0 : session.name) ? { sessionUserName: String(session.name) } : {},
+            ...(session == null ? void 0 : session.email) ? { sessionUserEmail: String(session.email) } : {},
+            ...(session == null ? void 0 : session.phone) ? { sessionUserPhone: String(session.phone) } : {},
+            ...metadata
+          }
+        };
+        const result = await sendReport(payload, baseUrl);
+        if (result && onReportSent) onReportSent(result);
+        return result;
+      } catch (e) {
+        return null;
+      }
+    },
+    [token, baseUrl, onReportSent, session]
+  );
+  const reportBug = (0, import_react2.useCallback)(
+    (description, metadata) => report("BUG", description, metadata),
+    [report]
+  );
+  const addBreadcrumb2 = (0, import_react2.useCallback)(
+    (message, data) => {
+      addBreadcrumb("custom", message, data);
+    },
+    []
+  );
+  const openReportDialog = (0, import_react2.useCallback)((options) => {
+    if (typeof window !== "undefined") {
+      window.dispatchEvent(new CustomEvent("glitchgrab:open-report", { detail: options }));
+    }
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    GlitchgrabContext.Provider,
+    {
+      value: {
+        token,
+        baseUrl: baseUrl != null ? baseUrl : DEFAULT_BASE_URL2,
+        reportBug,
+        report,
+        addBreadcrumb: addBreadcrumb2,
+        openReportDialog
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          GlitchgrabErrorBoundary,
+          {
+            token,
+            baseUrl,
+            onError,
+            fallback,
+            visitedPages: visitedPagesRef.current,
+            children
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ReportDialog, { report, types, showSeverity })
+      ]
+    }
+  );
+}
+function GlitchgrabProvider(props) {
+  if (!props.token) return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: props.children });
+  const resolvedProps = {
+    ...props,
+    baseUrl: props.baseUrl || DEFAULT_BASE_URL2
+  };
+  try {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(GlitchgrabProviderInner, { ...resolvedProps });
+  } catch (e) {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: props.children });
+  }
+}
+
+// src/report-button.tsx
+var import_react3 = require("react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function useGlitchgrabSafe() {
+  try {
+    return useGlitchgrab();
+  } catch (e) {
+    return null;
+  }
+}
+function ReportButton({
+  position = "bottom-right",
+  label = "Report Bug",
   className,
-  position,
-  isLeft,
-  isTop
+  children
 }) {
+  var _a, _b;
+  const [capturing, setCapturing] = (0, import_react3.useState)(false);
+  const glitchgrab = useGlitchgrabSafe();
+  if (!glitchgrab) return null;
+  const handleClick = async () => {
+    setCapturing(true);
+    glitchgrab.openReportDialog();
+    setCapturing(false);
+  };
+  if (children) {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: children({ onClick: handleClick, capturing }) });
+  }
+  const isTop = (_a = position == null ? void 0 : position.startsWith("top")) != null ? _a : false;
+  const isLeft = (_b = position == null ? void 0 : position.endsWith("left")) != null ? _b : false;
   const positionStyles = {
     ...isLeft ? { left: "16px" } : { right: "16px" },
     ...isTop ? { top: "16px" } : { bottom: "16px" }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
     "button",
     {
       type: "button",
-      onClick,
+      onClick: handleClick,
       disabled: capturing,
       className,
       style: {
@@ -1550,7 +1350,7 @@ function DefaultTrigger({
       },
       "aria-label": label,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
           "svg",
           {
             width: "16",
@@ -1558,7 +1358,7 @@ function DefaultTrigger({
             viewBox: "0 0 16 16",
             fill: "none",
             style: { flexShrink: 0 },
-            children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
               "path",
               {
                 d: "M8 1C4.134 1 1 4.134 1 8s3.134 7 7 7 7-3.134 7-7-3.134-7-7-7zm0 12.5a.75.75 0 110-1.5.75.75 0 010 1.5zm.75-3.5a.75.75 0 01-1.5 0V5a.75.75 0 011.5 0v5z",
@@ -1574,18 +1374,18 @@ function DefaultTrigger({
 }
 
 // src/use-reports.ts
-var import_react3 = require("react");
+var import_react4 = require("react");
 var BASE_URL = "https://www.glitchgrab.dev";
 function useGlitchgrabReports({
   token,
   userId,
   limit = 100
 }) {
-  const [reports, setReports] = (0, import_react3.useState)([]);
-  const [isLoading, setIsLoading] = (0, import_react3.useState)(true);
-  const [isFetching, setIsFetching] = (0, import_react3.useState)(false);
-  const [error, setError] = (0, import_react3.useState)(null);
-  const fetchReports = (0, import_react3.useCallback)(async () => {
+  const [reports, setReports] = (0, import_react4.useState)([]);
+  const [isLoading, setIsLoading] = (0, import_react4.useState)(true);
+  const [isFetching, setIsFetching] = (0, import_react4.useState)(false);
+  const [error, setError] = (0, import_react4.useState)(null);
+  const fetchReports = (0, import_react4.useCallback)(async () => {
     var _a, _b;
     if (!token || !userId) {
       setIsLoading(false);
@@ -1611,7 +1411,7 @@ function useGlitchgrabReports({
       setIsFetching(false);
     }
   }, [token, userId, limit]);
-  (0, import_react3.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     fetchReports();
   }, [fetchReports]);
   return { reports, isLoading, isFetching, error, refetch: fetchReports };
@@ -1648,9 +1448,9 @@ function useGlitchgrabActions({
   onSuccess,
   onError
 }) {
-  const [isPending, setIsPending] = (0, import_react3.useState)(false);
-  const [error, setError] = (0, import_react3.useState)(null);
-  const run = (0, import_react3.useCallback)(
+  const [isPending, setIsPending] = (0, import_react4.useState)(false);
+  const [error, setError] = (0, import_react4.useState)(null);
+  const run = (0, import_react4.useCallback)(
     async (reportId, body) => {
       setIsPending(true);
       setError(null);