glitchgrab 1.11.0 → 1.13.0

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,30 +380,28 @@ 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,
-  children
+function ReportDialog({
+  report,
+  types,
+  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();
-  if (!glitchgrab) return null;
-  const { reportBug } = glitchgrab;
+  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"];
   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 = () => {
@@ -665,8 +429,11 @@ function ReportButton({
     setIsOpen(true);
   };
   const handleOpen = async () => {
-    setCapturing(true);
     setSubmitted(false);
+    if (availableTypes.length === 1) {
+      setReportType(availableTypes[0]);
+      setStep(2);
+    }
     try {
       const { default: html2canvas } = await import("html2canvas-pro");
       const canvas = await html2canvas(document.body, {
@@ -678,42 +445,56 @@ 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);
+        setStep(2);
+      }
       handleOpen();
     };
     window.addEventListener("glitchgrab:open-report", handler);
     return () => window.removeEventListener("glitchgrab:open-report", handler);
   }, [isOpen, handleOpen]);
-  (0, import_react2.useEffect)(() => {
+  (0, import_react.useEffect)(() => {
     if (!isOpen) return;
     const handleEsc = (e) => {
       if (e.key === "Escape") {
         if (previewOpen) setPreviewOpen(false);
-        else setIsOpen(false);
+        else handleClose();
       }
     };
     document.addEventListener("keydown", handleEsc);
     return () => document.removeEventListener("keydown", handleEsc);
   }, [isOpen, previewOpen]);
+  const handleClose = () => {
+    setIsOpen(false);
+    setStep(1);
+    setReportType("BUG");
+    setSeverity("medium");
+  };
   const handleSubmit = async () => {
     try {
       if (!description.trim() || isSubmitting) return;
       setIsSubmitting(true);
-      const result = await reportBug(description.trim(), screenshot ? { screenshot } : void 0);
+      const metadata = {};
+      if (screenshot) metadata.screenshot = screenshot;
+      if (showSeverity && reportType === "BUG") {
+        metadata.severity = severity;
+      }
+      const result = await report(reportType, description.trim(), Object.keys(metadata).length > 0 ? metadata : void 0);
       if (result) {
         setSubmitted(true);
         setDescription("");
         setScreenshot(null);
         setTimeout(() => {
           setSubmitted(false);
-          setIsOpen(false);
+          handleClose();
         }, 2e3);
       }
       setIsSubmitting(false);
@@ -721,27 +502,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 (typeof document === "undefined") 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: {
@@ -755,16 +519,15 @@ function ReportButton({
             fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'
           },
           onClick: () => {
-            if (!previewOpen) setIsOpen(false);
+            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)",
@@ -777,58 +540,94 @@ function ReportButton({
                 isolation: "isolate"
               },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
                   "div",
                   {
                     style: {
                       padding: "16px 16px 12px",
                       borderBottom: `1px solid ${t.border}`
                     },
-                    children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-                      "div",
-                      {
-                        style: {
-                          display: "flex",
-                          justifyContent: "space-between",
-                          alignItems: "center"
-                        },
-                        children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                            "span",
-                            {
-                              style: {
-                                fontSize: "15px",
-                                fontWeight: 600,
-                                color: t.text
-                              },
-                              children: "Report a Bug"
-                            }
-                          ),
-                          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                            "button",
-                            {
-                              type: "button",
-                              onClick: () => setIsOpen(false),
-                              style: {
-                                background: "none",
-                                border: "none",
-                                cursor: "pointer",
-                                padding: "4px",
-                                display: "flex",
-                                alignItems: "center",
-                                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" }) })
-                            }
-                          )
-                        ]
-                      }
-                    )
-                  }
-                ),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { padding: "16px" }, children: submitted ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                  "div",
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                        "div",
+                        {
+                          style: {
+                            display: "flex",
+                            justifyContent: "space-between",
+                            alignItems: "center"
+                          },
+                          children: [
+                            /* @__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",
+                                  onClick: () => setStep((s) => s - 1),
+                                  style: {
+                                    background: "none",
+                                    border: "none",
+                                    cursor: "pointer",
+                                    padding: "2px",
+                                    display: "flex",
+                                    alignItems: "center"
+                                  },
+                                  "aria-label": "Back",
+                                  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_runtime.jsx)(
+                                "span",
+                                {
+                                  style: {
+                                    fontSize: "15px",
+                                    fontWeight: 600,
+                                    color: t.text
+                                  },
+                                  children: step === 1 ? "What's on your mind?" : step === 2 ? "Tell us more" : "Review & Send"
+                                }
+                              )
+                            ] }),
+                            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                              "button",
+                              {
+                                type: "button",
+                                onClick: handleClose,
+                                style: {
+                                  background: "none",
+                                  border: "none",
+                                  cursor: "pointer",
+                                  padding: "4px",
+                                  display: "flex",
+                                  alignItems: "center",
+                                  justifyContent: "center"
+                                },
+                                "aria-label": "Close",
+                                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" }) })
+                              }
+                            )
+                          ]
+                        }
+                      ),
+                      /* @__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_runtime.jsx)("div", { style: {
+                          width: "40px",
+                          height: "2px",
+                          backgroundColor: s < step ? t.accent : t.inputBorder,
+                          transition: "background-color 0.2s ease"
+                        } })
+                      ] }, s)) })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { padding: "16px" }, children: submitted ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                  "div",
                   {
                     style: {
                       textAlign: "center",
@@ -837,202 +636,280 @@ function ReportButton({
                       fontSize: "14px",
                       fontWeight: 500
                     },
-                    children: "Bug report sent. Thank you!"
+                    children: [
+                      getTypeLabel(reportType),
+                      " sent. Thank you!"
+                    ]
                   }
-                ) : /* @__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)(
-                      "img",
+                ) : /* @__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",
                       {
-                        src: screenshot,
-                        alt: "Page screenshot",
-                        onClick: () => setPreviewOpen(true),
+                        value: description,
+                        onChange: (e) => setDescription(e.target.value),
+                        placeholder: getPlaceholder(reportType),
                         style: {
                           width: "100%",
-                          borderRadius: "6px",
-                          border: `1px solid ${t.border}`,
-                          maxHeight: "120px",
-                          objectFit: "cover",
-                          objectPosition: "top",
-                          cursor: "pointer"
-                        }
+                          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)(
+                    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: () => 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_runtime.jsx)(
                       "button",
                       {
                         type: "button",
-                        onClick: () => setScreenshot(null),
+                        onClick: () => setStep(3),
+                        disabled: !description.trim(),
                         style: {
-                          position: "absolute",
-                          top: "4px",
-                          right: "4px",
-                          background: "rgba(0,0,0,0.6)",
+                          marginTop: "12px",
+                          width: "100%",
+                          padding: "10px",
+                          borderRadius: "8px",
                           border: "none",
-                          borderRadius: "50%",
-                          width: "20px",
-                          height: "20px",
-                          cursor: "pointer",
-                          display: "flex",
-                          alignItems: "center",
-                          justifyContent: "center"
+                          backgroundColor: !description.trim() ? t.bgSecondary : t.accent,
+                          color: !description.trim() ? t.textMuted : t.accentText,
+                          fontSize: "14px",
+                          fontWeight: 600,
+                          cursor: !description.trim() ? "not-allowed" : "pointer",
+                          fontFamily: "inherit",
+                          transition: "background-color 0.15s ease"
                         },
-                        "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: "Next"
                       }
-                    ),
-                    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-                      "div",
+                    )
+                  ] }),
+                  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,
+                        border: `1px solid ${t.border}`
+                      }, children: [
+                        getTypeIcon(reportType, t.accent, 12),
+                        getTypeLabel(reportType)
+                      ] }),
+                      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,
+                          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_runtime.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_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_runtime.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"
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      "button",
                       {
+                        type: "button",
+                        onClick: handleSubmit,
+                        disabled: isSubmitting,
                         style: {
-                          position: "absolute",
-                          bottom: "4px",
-                          left: "6px",
-                          right: "6px",
-                          display: "flex",
-                          justifyContent: "space-between",
-                          alignItems: "center"
+                          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: [
-                          /* @__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: isSubmitting ? "Sending..." : "Send Report"
                       }
                     )
-                  ] }),
-                  !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)(
-                    "button",
-                    {
-                      type: "button",
-                      onClick: handleSubmit,
-                      disabled: !description.trim() || 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,
-                        fontSize: "14px",
-                        fontWeight: 600,
-                        cursor: !description.trim() || isSubmitting ? "not-allowed" : "pointer",
-                        fontFamily: "inherit",
-                        transition: "background-color 0.15s ease"
-                      },
-                      children: isSubmitting ? "Sending..." : "Send Report"
-                    }
-                  )
+                  ] })
                 ] }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                   "div",
                   {
                     style: {
@@ -1040,7 +917,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" })
                   }
                 )
               ]
@@ -1050,7 +927,7 @@ function ReportButton({
       ),
       document.body
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "input",
       {
         ref: fileInputRef,
@@ -1060,8 +937,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: {
@@ -1082,7 +959,7 @@ function ReportButton({
           },
           onMouseDown: (e) => e.stopPropagation(),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
               "img",
               {
                 src: screenshot,
@@ -1097,7 +974,7 @@ function ReportButton({
                 }
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
               "span",
               {
                 style: {
@@ -1115,24 +992,330 @@ function ReportButton({
     )
   ] });
 }
-function DefaultTrigger({
-  onClick,
-  capturing,
-  label,
+function getTypeLabel(type) {
+  switch (type) {
+    case "BUG":
+      return "Bug Report";
+    case "FEATURE_REQUEST":
+      return "Feature Request";
+    case "QUESTION":
+      return "Question";
+    case "OTHER":
+      return "Other";
+  }
+}
+function getTypeSubtitle(type) {
+  switch (type) {
+    case "BUG":
+      return "Something isn't working";
+    case "FEATURE_REQUEST":
+      return "Suggest an improvement";
+    case "QUESTION":
+      return "Ask a question";
+    case "OTHER":
+      return "General feedback";
+  }
+}
+function getPlaceholder(type) {
+  switch (type) {
+    case "BUG":
+      return "What went wrong?";
+    case "FEATURE_REQUEST":
+      return "Describe the feature you'd like...";
+    case "QUESTION":
+      return "What would you like to know?";
+    case "OTHER":
+      return "Tell us what's on your mind...";
+  }
+}
+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_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_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_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_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" }) });
+  }
+}
+
+// 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: {
@@ -1163,7 +1346,7 @@ function DefaultTrigger({
       },
       "aria-label": label,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
           "svg",
           {
             width: "16",
@@ -1171,7 +1354,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",
@@ -1187,18 +1370,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);
@@ -1224,7 +1407,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 };
@@ -1261,9 +1444,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);