glitchgrab 1.0.1 → 1.2.0

package/dist/index.mjs

@@ -10,7 +10,7 @@ import {
 } from "react";
 
 // src/error-boundary.tsx
-import React from "react";
+import * as React from "react";
 
 // src/breadcrumbs.ts
 var MAX_DEFAULT = 50;
@@ -329,6 +329,7 @@ function useGlitchgrab() {
 }
 function GlitchgrabProviderInner({
   token,
+  session,
   baseUrl,
   onError,
   onReportSent,
@@ -383,6 +384,7 @@ function GlitchgrabProviderInner({
   useEffect(() => {
     try {
       if (typeof window === "undefined") return;
+      if (process.env.NODE_ENV === "development") return;
       const handleError = (event) => {
         var _a, _b, _c, _d, _e;
         try {
@@ -402,7 +404,10 @@ function GlitchgrabProviderInner({
               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 : "")
+              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) => {
@@ -430,7 +435,10 @@ function GlitchgrabProviderInner({
             metadata: {
               timestamp: context.timestamp,
               visitedPages: JSON.stringify(context.visitedPages),
-              type: "unhandledrejection"
+              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) => {
@@ -466,6 +474,10 @@ function GlitchgrabProviderInner({
           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
           }
         };
@@ -513,47 +525,103 @@ function GlitchgrabProviderInner({
   );
 }
 function GlitchgrabProvider(props) {
+  if (!props.token) return /* @__PURE__ */ jsx(Fragment, { children: props.children });
+  const resolvedProps = {
+    ...props,
+    baseUrl: props.baseUrl || (typeof window !== "undefined" ? window.location.origin : DEFAULT_BASE_URL2)
+  };
   try {
-    return /* @__PURE__ */ jsx(GlitchgrabProviderInner, { ...props });
+    return /* @__PURE__ */ jsx(GlitchgrabProviderInner, { ...resolvedProps });
   } catch (e) {
     return /* @__PURE__ */ jsx(Fragment, { children: props.children });
   }
 }
 
 // src/report-button.tsx
-import { useState, useRef as useRef2, useEffect as useEffect2 } from "react";
+import { useState as useState2, useRef as useRef2, useEffect as useEffect2 } from "react";
 import { Fragment as Fragment2, jsx as jsx2, jsxs } from "react/jsx-runtime";
 function ReportButton({
   position = "bottom-right",
   label = "Report Bug",
-  className
+  className,
+  children
 }) {
-  const [isOpen, setIsOpen] = useState(false);
-  const [description, setDescription] = useState("");
-  const [isSubmitting, setIsSubmitting] = useState(false);
-  const [submitted, setSubmitted] = useState(false);
+  var _a, _b;
+  const [capturing, setCapturing] = useState2(false);
+  const [isOpen, setIsOpen] = useState2(false);
+  const [description, setDescription] = useState2("");
+  const [isSubmitting, setIsSubmitting] = useState2(false);
+  const [submitted, setSubmitted] = useState2(false);
+  const [screenshot, setScreenshot] = useState2(null);
+  const [previewOpen, setPreviewOpen] = useState2(false);
+  const fileInputRef = useRef2(null);
   const modalRef = useRef2(null);
   const { reportBug } = useGlitchgrab();
-  useEffect2(() => {
+  const handleFileUpload = (e) => {
+    var _a2;
+    const file = (_a2 = e.target.files) == null ? void 0 : _a2[0];
+    if (!file) return;
+    const reader = new FileReader();
+    reader.onload = () => {
+      setScreenshot(reader.result);
+    };
+    reader.readAsDataURL(file);
+    e.target.value = "";
+  };
+  const retakeScreenshot = async () => {
+    setPreviewOpen(false);
+    setIsOpen(false);
+    setScreenshot(null);
+    await new Promise((r) => setTimeout(r, 300));
     try {
-      if (!isOpen) return;
-      const handleClickOutside = (event) => {
-        if (modalRef.current && !modalRef.current.contains(event.target)) {
-          setIsOpen(false);
-        }
-      };
-      document.addEventListener("mousedown", handleClickOutside);
-      return () => document.removeEventListener("mousedown", handleClickOutside);
+      const { default: html2canvas } = await import("html2canvas-pro");
+      const canvas = await html2canvas(document.body, {
+        scale: 0.5,
+        logging: false,
+        useCORS: true,
+        allowTaint: true
+      });
+      setScreenshot(canvas.toDataURL("image/jpeg", 0.6));
+    } catch (e) {
+    }
+    setIsOpen(true);
+  };
+  const handleOpen = async () => {
+    setCapturing(true);
+    setSubmitted(false);
+    try {
+      const { default: html2canvas } = await import("html2canvas-pro");
+      const canvas = await html2canvas(document.body, {
+        scale: 0.5,
+        logging: false,
+        useCORS: true,
+        allowTaint: true
+      });
+      setScreenshot(canvas.toDataURL("image/jpeg", 0.6));
     } catch (e) {
     }
-  }, [isOpen]);
+    setCapturing(false);
+    setIsOpen(true);
+  };
+  useEffect2(() => {
+    if (!isOpen) return;
+    const handleEsc = (e) => {
+      if (e.key === "Escape") {
+        if (previewOpen) setPreviewOpen(false);
+        else setIsOpen(false);
+      }
+    };
+    document.addEventListener("keydown", handleEsc);
+    return () => document.removeEventListener("keydown", handleEsc);
+  }, [isOpen, previewOpen]);
   const handleSubmit = () => {
     try {
       if (!description.trim() || isSubmitting) return;
       setIsSubmitting(true);
-      reportBug(description.trim());
+      reportBug(description.trim(), screenshot ? { screenshot } : void 0);
       setSubmitted(true);
       setDescription("");
+      setScreenshot(null);
       setIsSubmitting(false);
       setTimeout(() => {
         setSubmitted(false);
@@ -563,206 +631,386 @@ function ReportButton({
       setIsSubmitting(false);
     }
   };
-  const positionStyles = position === "bottom-left" ? { left: "16px", bottom: "16px" } : { right: "16px", bottom: "16px" };
-  const modalPositionStyles = position === "bottom-left" ? { left: "16px", bottom: "64px" } : { right: "16px", bottom: "64px" };
+  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__ */ jsxs(Fragment2, { children: [
-    /* @__PURE__ */ jsxs(
-      "button",
+    children ? children({ onClick: handleOpen, capturing }) : /* @__PURE__ */ jsx2(
+      DefaultTrigger,
       {
-        type: "button",
-        onClick: () => {
-          setIsOpen(!isOpen);
-          setSubmitted(false);
-        },
+        onClick: handleOpen,
+        capturing,
+        label,
         className,
+        position,
+        isLeft,
+        isTop
+      }
+    ),
+    isOpen && /* @__PURE__ */ jsx2(
+      "div",
+      {
         style: {
           position: "fixed",
-          ...positionStyles,
+          inset: 0,
           zIndex: 99999,
-          padding: "10px 18px",
-          borderRadius: "24px",
-          border: "none",
-          backgroundColor: "#18181b",
-          color: "#fafafa",
-          fontSize: "14px",
-          fontWeight: 500,
-          fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
-          cursor: "pointer",
-          boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.1)",
-          transition: "transform 0.15s ease, box-shadow 0.15s ease",
           display: "flex",
           alignItems: "center",
-          gap: "6px"
-        },
-        onMouseEnter: (e) => {
-          e.target.style.transform = "scale(1.05)";
+          justifyContent: "center",
+          backgroundColor: "rgba(0,0,0,0.5)"
         },
-        onMouseLeave: (e) => {
-          e.target.style.transform = "scale(1)";
+        onClick: () => {
+          if (!previewOpen) setIsOpen(false);
         },
-        "aria-label": label,
-        children: [
-          /* @__PURE__ */ jsx2(
-            "svg",
-            {
-              width: "16",
-              height: "16",
-              viewBox: "0 0 16 16",
-              fill: "none",
-              style: { flexShrink: 0 },
-              children: /* @__PURE__ */ jsx2(
-                "path",
+        children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ref: modalRef,
+            onClick: (e) => e.stopPropagation(),
+            style: {
+              position: children ? "relative" : "fixed",
+              ...modalPositionStyles,
+              zIndex: 1e5,
+              width: "340px",
+              maxWidth: "calc(100% - 32px)",
+              backgroundColor: "#1c1c1e",
+              borderRadius: "12px",
+              boxShadow: "0 20px 60px rgba(0, 0, 0, 0.4), 0 4px 16px rgba(0, 0, 0, 0.3)",
+              fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+              overflow: "hidden",
+              color: "#fafafa"
+            },
+            children: [
+              /* @__PURE__ */ jsx2(
+                "div",
                 {
-                  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",
-                  fill: "currentColor"
+                  style: {
+                    padding: "16px 16px 12px",
+                    borderBottom: "1px solid #2c2c2e"
+                  },
+                  children: /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      style: {
+                        display: "flex",
+                        justifyContent: "space-between",
+                        alignItems: "center"
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx2(
+                          "span",
+                          {
+                            style: {
+                              fontSize: "15px",
+                              fontWeight: 600,
+                              color: "#fafafa"
+                            },
+                            children: "Report a Bug"
+                          }
+                        ),
+                        /* @__PURE__ */ jsx2(
+                          "button",
+                          {
+                            type: "button",
+                            onClick: () => setIsOpen(false),
+                            style: {
+                              background: "none",
+                              border: "none",
+                              cursor: "pointer",
+                              padding: "4px",
+                              color: "#a1a1aa",
+                              fontSize: "18px",
+                              lineHeight: 1
+                            },
+                            "aria-label": "Close",
+                            children: "\xD7"
+                          }
+                        )
+                      ]
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx2("div", { style: { padding: "16px" }, children: submitted ? /* @__PURE__ */ jsx2(
+                "div",
+                {
+                  style: {
+                    textAlign: "center",
+                    padding: "20px 0",
+                    color: "#22d3ee",
+                    fontSize: "14px",
+                    fontWeight: 500
+                  },
+                  children: "Bug report sent. Thank you!"
+                }
+              ) : /* @__PURE__ */ jsxs(Fragment2, { children: [
+                screenshot && /* @__PURE__ */ jsxs("div", { style: { marginBottom: "10px", position: "relative" }, children: [
+                  /* @__PURE__ */ jsx2(
+                    "img",
+                    {
+                      src: screenshot,
+                      alt: "Page screenshot",
+                      onClick: () => setPreviewOpen(true),
+                      style: {
+                        width: "100%",
+                        borderRadius: "6px",
+                        border: "1px solid #2c2c2e",
+                        maxHeight: "120px",
+                        objectFit: "cover",
+                        objectPosition: "top",
+                        cursor: "pointer"
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ jsx2(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => setScreenshot(null),
+                      style: {
+                        position: "absolute",
+                        top: "4px",
+                        right: "4px",
+                        background: "rgba(0,0,0,0.6)",
+                        border: "none",
+                        borderRadius: "50%",
+                        color: "#fff",
+                        width: "20px",
+                        height: "20px",
+                        fontSize: "12px",
+                        cursor: "pointer",
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        lineHeight: 1
+                      },
+                      "aria-label": "Remove screenshot",
+                      children: "\xD7"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      style: {
+                        position: "absolute",
+                        bottom: "4px",
+                        left: "6px",
+                        right: "6px",
+                        display: "flex",
+                        justifyContent: "space-between",
+                        alignItems: "center"
+                      },
+                      children: [
+                        /* @__PURE__ */ 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__ */ jsxs("div", { style: { display: "flex", gap: "4px" }, children: [
+                          /* @__PURE__ */ jsx2(
+                            "button",
+                            {
+                              type: "button",
+                              onClick: () => {
+                                var _a2;
+                                return (_a2 = fileInputRef.current) == null ? void 0 : _a2.click();
+                              },
+                              style: {
+                                background: "rgba(0,0,0,0.6)",
+                                color: "#22d3ee",
+                                fontSize: "10px",
+                                padding: "2px 6px",
+                                borderRadius: "4px",
+                                border: "none",
+                                cursor: "pointer"
+                              },
+                              children: "Upload"
+                            }
+                          ),
+                          /* @__PURE__ */ jsx2(
+                            "button",
+                            {
+                              type: "button",
+                              onClick: retakeScreenshot,
+                              style: {
+                                background: "rgba(0,0,0,0.6)",
+                                color: "#22d3ee",
+                                fontSize: "10px",
+                                padding: "2px 6px",
+                                borderRadius: "4px",
+                                border: "none",
+                                cursor: "pointer"
+                              },
+                              children: "Retake"
+                            }
+                          )
+                        ] })
+                      ]
+                    }
+                  )
+                ] }),
+                !screenshot && !submitted && /* @__PURE__ */ jsx2(
+                  "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 #3f3f46",
+                      textAlign: "center",
+                      fontSize: "11px",
+                      color: "#71717a",
+                      width: "100%",
+                      background: "none",
+                      cursor: "pointer"
+                    },
+                    children: "Click to upload a screenshot"
+                  }
+                ),
+                /* @__PURE__ */ jsx2(
+                  "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 #3f3f46",
+                      fontSize: "14px",
+                      fontFamily: "inherit",
+                      resize: "vertical",
+                      outline: "none",
+                      boxSizing: "border-box",
+                      color: "#fafafa",
+                      backgroundColor: "#27272a"
+                    },
+                    onFocus: (e) => {
+                      e.target.style.borderColor = "#22d3ee";
+                    },
+                    onBlur: (e) => {
+                      e.target.style.borderColor = "#3f3f46";
+                    },
+                    autoFocus: true
+                  }
+                ),
+                /* @__PURE__ */ jsx2(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: handleSubmit,
+                    disabled: !description.trim() || isSubmitting,
+                    style: {
+                      marginTop: "12px",
+                      width: "100%",
+                      padding: "10px",
+                      borderRadius: "8px",
+                      border: "none",
+                      backgroundColor: !description.trim() || isSubmitting ? "#3f3f46" : "#22d3ee",
+                      color: !description.trim() || isSubmitting ? "#71717a" : "#09090b",
+                      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__ */ jsx2(
+                "div",
+                {
+                  style: {
+                    padding: "8px 16px 10px",
+                    borderTop: "1px solid #2c2c2e",
+                    textAlign: "center"
+                  },
+                  children: /* @__PURE__ */ jsx2("span", { style: { fontSize: "11px", color: "#52525b" }, children: "Powered by Glitchgrab" })
                 }
               )
-            }
-          ),
-          label
-        ]
+            ]
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx2(
+      "input",
+      {
+        ref: fileInputRef,
+        type: "file",
+        accept: "image/*",
+        onChange: handleFileUpload,
+        style: { display: "none" }
       }
     ),
-    isOpen && /* @__PURE__ */ jsxs(
+    previewOpen && screenshot && /* @__PURE__ */ jsxs(
       "div",
       {
-        ref: modalRef,
         style: {
           position: "fixed",
-          ...modalPositionStyles,
-          zIndex: 1e5,
-          width: "320px",
-          backgroundColor: "#ffffff",
-          borderRadius: "12px",
-          boxShadow: "0 20px 60px rgba(0, 0, 0, 0.15), 0 4px 16px rgba(0, 0, 0, 0.1)",
-          fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
-          overflow: "hidden"
+          inset: 0,
+          zIndex: 2e5,
+          backgroundColor: "rgba(0,0,0,0.85)",
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "center",
+          padding: "16px",
+          cursor: "pointer"
+        },
+        onClick: (e) => {
+          e.stopPropagation();
+          setPreviewOpen(false);
         },
+        onMouseDown: (e) => e.stopPropagation(),
         children: [
           /* @__PURE__ */ jsx2(
-            "div",
+            "img",
             {
+              src: screenshot,
+              alt: "Screenshot preview",
+              onClick: (e) => e.stopPropagation(),
               style: {
-                padding: "16px 16px 12px",
-                borderBottom: "1px solid #e4e4e7"
-              },
-              children: /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  style: {
-                    display: "flex",
-                    justifyContent: "space-between",
-                    alignItems: "center"
-                  },
-                  children: [
-                    /* @__PURE__ */ jsx2(
-                      "span",
-                      {
-                        style: {
-                          fontSize: "15px",
-                          fontWeight: 600,
-                          color: "#18181b"
-                        },
-                        children: "Report a Bug"
-                      }
-                    ),
-                    /* @__PURE__ */ jsx2(
-                      "button",
-                      {
-                        type: "button",
-                        onClick: () => setIsOpen(false),
-                        style: {
-                          background: "none",
-                          border: "none",
-                          cursor: "pointer",
-                          padding: "4px",
-                          color: "#71717a",
-                          fontSize: "18px",
-                          lineHeight: 1
-                        },
-                        "aria-label": "Close",
-                        children: "\xD7"
-                      }
-                    )
-                  ]
-                }
-              )
+                maxWidth: "100%",
+                maxHeight: "calc(100vh - 80px)",
+                borderRadius: "8px",
+                objectFit: "contain",
+                cursor: "default"
+              }
             }
           ),
-          /* @__PURE__ */ jsx2("div", { style: { padding: "16px" }, children: submitted ? /* @__PURE__ */ jsx2(
-            "div",
-            {
-              style: {
-                textAlign: "center",
-                padding: "20px 0",
-                color: "#16a34a",
-                fontSize: "14px",
-                fontWeight: 500
-              },
-              children: "Bug report sent. Thank you!"
-            }
-          ) : /* @__PURE__ */ jsxs(Fragment2, { children: [
-            /* @__PURE__ */ jsx2(
-              "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 #d4d4d8",
-                  fontSize: "14px",
-                  fontFamily: "inherit",
-                  resize: "vertical",
-                  outline: "none",
-                  boxSizing: "border-box",
-                  color: "#18181b",
-                  backgroundColor: "#fafafa"
-                },
-                onFocus: (e) => {
-                  e.target.style.borderColor = "#18181b";
-                },
-                onBlur: (e) => {
-                  e.target.style.borderColor = "#d4d4d8";
-                }
-              }
-            ),
-            /* @__PURE__ */ jsx2(
-              "button",
-              {
-                type: "button",
-                onClick: handleSubmit,
-                disabled: !description.trim() || isSubmitting,
-                style: {
-                  marginTop: "12px",
-                  width: "100%",
-                  padding: "10px",
-                  borderRadius: "8px",
-                  border: "none",
-                  backgroundColor: !description.trim() || isSubmitting ? "#a1a1aa" : "#18181b",
-                  color: "#fafafa",
-                  fontSize: "14px",
-                  fontWeight: 500,
-                  cursor: !description.trim() || isSubmitting ? "not-allowed" : "pointer",
-                  fontFamily: "inherit",
-                  transition: "background-color 0.15s ease"
-                },
-                children: isSubmitting ? "Sending..." : "Send Report"
-              }
-            )
-          ] }) }),
           /* @__PURE__ */ jsx2(
-            "div",
+            "span",
             {
               style: {
-                padding: "8px 16px 10px",
-                borderTop: "1px solid #e4e4e7",
-                textAlign: "center"
+                marginTop: "12px",
+                color: "#a1a1aa",
+                fontSize: "12px"
               },
-              children: /* @__PURE__ */ jsx2("span", { style: { fontSize: "11px", color: "#a1a1aa" }, children: "Powered by Glitchgrab" })
+              children: "Click outside to close"
             }
           )
         ]
@@ -770,6 +1018,76 @@ function ReportButton({
     )
   ] });
 }
+function DefaultTrigger({
+  onClick,
+  capturing,
+  label,
+  className,
+  position,
+  isLeft,
+  isTop
+}) {
+  const positionStyles = {
+    ...isLeft ? { left: "16px" } : { right: "16px" },
+    ...isTop ? { top: "16px" } : { bottom: "16px" }
+  };
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick,
+      disabled: capturing,
+      className,
+      style: {
+        position: "fixed",
+        ...positionStyles,
+        zIndex: 99999,
+        padding: "10px 18px",
+        borderRadius: "24px",
+        border: "none",
+        backgroundColor: "#18181b",
+        color: "#fafafa",
+        fontSize: "14px",
+        fontWeight: 500,
+        fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+        cursor: capturing ? "wait" : "pointer",
+        boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.1)",
+        transition: "transform 0.15s ease, box-shadow 0.15s ease",
+        display: "flex",
+        alignItems: "center",
+        gap: "6px",
+        opacity: capturing ? 0.7 : 1
+      },
+      onMouseEnter: (e) => {
+        e.target.style.transform = "scale(1.05)";
+      },
+      onMouseLeave: (e) => {
+        e.target.style.transform = "scale(1)";
+      },
+      "aria-label": label,
+      children: [
+        /* @__PURE__ */ jsx2(
+          "svg",
+          {
+            width: "16",
+            height: "16",
+            viewBox: "0 0 16 16",
+            fill: "none",
+            style: { flexShrink: 0 },
+            children: /* @__PURE__ */ jsx2(
+              "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",
+                fill: "currentColor"
+              }
+            )
+          }
+        ),
+        capturing ? "Capturing..." : label
+      ]
+    }
+  );
+}
 export {
   GlitchgrabErrorBoundary,
   GlitchgrabProvider,