@diegotsi/flint-react 0.6.0 → 1.0.1

package/dist/index.js

@@ -1,14 +1,13 @@
-// src/FlintWidget.tsx
-import { useState as useState3, useEffect as useEffect3, useRef as useRef3, useCallback as useCallback2 } from "react";
-import { I18nextProvider, useTranslation as useTranslation2 } from "react-i18next";
-
 // src/FlintModal.tsx
-import { useRef as useRef2, useState as useState2, useEffect as useEffect2, useCallback } from "react";
+import { useCallback, useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "react";
 import { useTranslation } from "react-i18next";
 
+// src/api.ts
+import { submitReplay, submitReport } from "@flint/core";
+
 // src/ScreenAnnotator.tsx
-import { useEffect, useRef, useState } from "react";
 import { domToCanvas } from "modern-screenshot";
+import { useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 function normalizeRect(startX, startY, endX, endY) {
   return {
@@ -53,9 +52,7 @@ function ScreenAnnotator({ zIndex, onCapture, onCancel }) {
     const dpr = window.devicePixelRatio ?? 1;
     const vw = window.innerWidth;
     const vh = window.innerHeight;
-    await new Promise(
-      (resolve) => requestAnimationFrame(() => requestAnimationFrame(() => resolve()))
-    );
+    await new Promise((resolve) => requestAnimationFrame(() => requestAnimationFrame(() => resolve())));
     try {
       const fullCanvas = await domToCanvas(document.documentElement, {
         scale: dpr,
@@ -70,17 +67,7 @@ function ScreenAnnotator({ zIndex, onCapture, onCancel }) {
       canvas.width = vw * dpr;
       canvas.height = vh * dpr;
       const ctx = canvas.getContext("2d");
-      ctx.drawImage(
-        fullCanvas,
-        0,
-        0,
-        vw * dpr,
-        vh * dpr,
-        0,
-        0,
-        vw * dpr,
-        vh * dpr
-      );
+      ctx.drawImage(fullCanvas, 0, 0, vw * dpr, vh * dpr, 0, 0, vw * dpr, vh * dpr);
       ctx.fillStyle = "rgba(255,200,0,0.25)";
       ctx.fillRect(finalRect.x * dpr, finalRect.y * dpr, finalRect.w * dpr, finalRect.h * dpr);
       ctx.strokeStyle = "#f97316";
@@ -118,123 +105,50 @@ function ScreenAnnotator({ zIndex, onCapture, onCancel }) {
         pointerEvents: isCapturing ? "none" : "auto"
       },
       children: [
-        !isCapturing && /* @__PURE__ */ jsx("div", { style: {
-          position: "absolute",
-          top: 16,
-          left: "50%",
-          transform: "translateX(-50%)",
-          background: "rgba(0,0,0,0.75)",
-          color: "#fff",
-          padding: "8px 18px",
-          borderRadius: 8,
-          fontSize: 14,
-          fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
-          pointerEvents: "none",
-          whiteSpace: "nowrap",
-          backdropFilter: "blur(4px)"
-        }, children: "Drag to highlight the problem area \xA0\xB7\xA0 Esc to cancel" }),
-        rect && phase === "selecting" && /* @__PURE__ */ jsx("div", { style: {
-          position: "absolute",
-          left: rect.x,
-          top: rect.y,
-          width: rect.w,
-          height: rect.h,
-          background: "rgba(255,200,0,0.2)",
-          border: "2px dashed #f97316",
-          boxSizing: "border-box",
-          pointerEvents: "none"
-        } })
+        !isCapturing && /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              top: 16,
+              left: "50%",
+              transform: "translateX(-50%)",
+              background: "rgba(0,0,0,0.75)",
+              color: "#fff",
+              padding: "8px 18px",
+              borderRadius: 8,
+              fontSize: 14,
+              fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+              pointerEvents: "none",
+              whiteSpace: "nowrap",
+              backdropFilter: "blur(4px)"
+            },
+            children: "Drag to highlight the problem area \xA0\xB7\xA0 Esc to cancel"
+          }
+        ),
+        rect && phase === "selecting" && /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              left: rect.x,
+              top: rect.y,
+              width: rect.w,
+              height: rect.h,
+              background: "rgba(255,200,0,0.2)",
+              border: "2px dashed #f97316",
+              boxSizing: "border-box",
+              pointerEvents: "none"
+            }
+          }
+        )
       ]
     }
   );
 }
 
-// src/api.ts
-import { gzipSync } from "fflate";
-async function submitReport(serverUrl, projectKey, payload, screenshot) {
-  const url = `${serverUrl.replace(/\/$/, "")}/api/v1/bug-reports`;
-  let body;
-  let headers = {
-    "x-project-key": projectKey
-  };
-  if (screenshot) {
-    const form = new FormData();
-    form.append("reporterId", payload.reporterId);
-    form.append("reporterName", payload.reporterName);
-    form.append("description", payload.description);
-    if (payload.expectedBehavior) form.append("expectedBehavior", payload.expectedBehavior);
-    if (payload.stepsToReproduce) form.append("stepsToReproduce", JSON.stringify(payload.stepsToReproduce));
-    if (payload.externalReplayUrl) form.append("externalReplayUrl", payload.externalReplayUrl);
-    if (payload.additionalContext) form.append("additionalContext", payload.additionalContext);
-    form.append("severity", payload.severity);
-    if (payload.url) form.append("url", payload.url);
-    if (payload.meta) form.append("meta", JSON.stringify(payload.meta));
-    form.append("screenshot", screenshot);
-    body = form;
-  } else {
-    body = JSON.stringify(payload);
-    headers["Content-Type"] = "application/json";
-  }
-  const res = await fetch(url, { method: "POST", headers, body });
-  if (!res.ok) {
-    const err = await res.json().catch(() => ({ error: "Unknown error" }));
-    throw new Error(err.error ?? `HTTP ${res.status}`);
-  }
-  return res.json();
-}
-async function submitReplay(serverUrl, projectKey, reportId, events) {
-  const json = JSON.stringify(events);
-  const encoded = new TextEncoder().encode(json);
-  const compressed = gzipSync(encoded);
-  const url = `${serverUrl.replace(/\/$/, "")}/api/v1/bug-reports/${reportId}/replay`;
-  await fetch(url, {
-    method: "POST",
-    headers: {
-      "x-project-key": projectKey,
-      "Content-Type": "application/octet-stream"
-    },
-    body: compressed.buffer
-  });
-}
-
 // src/theme.ts
-var light = {
-  background: "rgba(255,255,255,0.90)",
-  backgroundSecondary: "rgba(249,250,251,0.75)",
-  accent: "#2563eb",
-  accentHover: "#1d4ed8",
-  text: "#111827",
-  textMuted: "#6b7280",
-  border: "rgba(255,255,255,0.9)",
-  shadow: "0 32px 80px rgba(0,0,0,0.18), 0 8px 32px rgba(0,0,0,0.1), 0 0 0 1px rgba(0,0,0,0.04)",
-  buttonText: "#ffffff",
-  backdropFilter: "blur(32px) saturate(1.8)"
-};
-var dark = {
-  background: "rgba(15,20,35,0.88)",
-  backgroundSecondary: "rgba(5,8,18,0.65)",
-  accent: "#f97316",
-  accentHover: "#ea6c0a",
-  text: "#dde3ef",
-  textMuted: "#6b7a93",
-  border: "rgba(255,255,255,0.08)",
-  shadow: "0 24px 60px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.04)",
-  buttonText: "#ffffff",
-  backdropFilter: "blur(32px) saturate(1.6)"
-};
-function resolveTheme(theme) {
-  if (theme === "dark") return dark;
-  if (theme === "light") return light;
-  const override = theme;
-  return {
-    ...light,
-    background: override.background ?? light.background,
-    accent: override.accent ?? light.accent,
-    accentHover: override.accent ?? light.accentHover,
-    text: override.text ?? light.text,
-    border: override.border ?? light.border
-  };
-}
+import { resolveTheme } from "@flint/core";
 
 // src/FlintModal.tsx
 import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
@@ -294,7 +208,12 @@ function FlintModal({
   getNetworkErrors,
   getReplayEvents,
   getExternalReplayUrl,
-  initialSelection = ""
+  initialSelection = "",
+  enableScreenshot = true,
+  statusPageUrl,
+  onBeforeSubmit,
+  onSuccess,
+  onError
 }) {
   const { t } = useTranslation();
   const colors = resolveTheme(theme);
@@ -354,33 +273,40 @@ function FlintModal({
         lang: textLang
       };
     }
+    const payload = {
+      reporterId: user?.id ?? "anonymous",
+      reporterName: user?.name ?? "Anonymous",
+      reporterEmail: user?.email,
+      description: isText ? `[Text issue] "${textOriginal.trim()}" \u2192 "${textSuggested.trim()}"` : description.trim(),
+      expectedBehavior: !isText ? expectedBehavior.trim() || void 0 : void 0,
+      externalReplayUrl: getExternalReplayUrl() || void 0,
+      severity: isText ? "P3" : severity,
+      url: window.location.href,
+      meta: collectedMeta,
+      label: isText ? "TEXT" : void 0
+    };
+    if (onBeforeSubmit) {
+      const proceed = await onBeforeSubmit(payload);
+      if (!proceed) {
+        setStatus("idle");
+        return;
+      }
+    }
     try {
-      const res = await submitReport(
-        serverUrl,
-        projectKey,
-        {
-          reporterId: user?.id ?? "anonymous",
-          reporterName: user?.name ?? "Anonymous",
-          description: isText ? `[Text issue] "${textOriginal.trim()}" \u2192 "${textSuggested.trim()}"` : description.trim(),
-          expectedBehavior: !isText ? expectedBehavior.trim() || void 0 : void 0,
-          externalReplayUrl: getExternalReplayUrl() || void 0,
-          severity: isText ? "P3" : severity,
-          url: window.location.href,
-          meta: collectedMeta,
-          label: isText ? "TEXT" : void 0
-        },
-        !isText ? screenshot ?? void 0 : void 0
-      );
+      const res = await submitReport(serverUrl, projectKey, payload, !isText ? screenshot ?? void 0 : void 0);
       setResult(res);
       setStatus("success");
+      onSuccess?.(res);
       const events = getReplayEvents();
       if (events.length > 0) {
         submitReplay(serverUrl, projectKey, res.id, events).catch(() => {
         });
       }
     } catch (err) {
-      setErrorMsg(err instanceof Error ? err.message : t("errorLabel"));
+      const error = err instanceof Error ? err : new Error(t("errorLabel"));
+      setErrorMsg(error.message);
       setStatus("error");
+      onError?.(error);
     }
   };
   const inputBorder = isDark ? "rgba(255,255,255,0.1)" : "rgba(0,0,0,0.1)";
@@ -430,157 +356,249 @@ function FlintModal({
     const isSuccess = status === "success";
     const ringBorder = isSuccess ? "3px solid #22c55e" : `3px solid ${isDark ? "rgba(255,255,255,0.08)" : "rgba(0,0,0,0.08)"}`;
     const ringTopColor = isSuccess ? "#22c55e" : colors.accent;
-    return /* @__PURE__ */ jsx2("div", { style: overlayStyle, children: /* @__PURE__ */ jsxs2("div", { style: modalStyle, role: "dialog", "aria-modal": "true", "aria-label": isSuccess ? t("successTitle") : t("sending"), children: [
-      /* @__PURE__ */ jsx2(ModalHeader, { colors, inputBorder, showClose: false, onClose }),
-      /* @__PURE__ */ jsxs2("div", { style: { padding: "40px 32px 48px", textAlign: "center", display: "flex", flexDirection: "column", alignItems: "center" }, children: [
-        /* @__PURE__ */ jsxs2("div", { style: { position: "relative", width: 80, height: 80, marginBottom: 28 }, children: [
-          /* @__PURE__ */ jsx2("div", { style: {
-            position: "absolute",
-            inset: -10,
-            borderRadius: "50%",
-            border: `1.5px solid ${colors.accent}`,
-            animation: "_flint_ripple 1.8s ease-out infinite",
-            opacity: isSuccess ? 0 : 1,
-            transition: "opacity 0.3s ease"
-          } }),
-          /* @__PURE__ */ jsx2("div", { style: {
-            position: "absolute",
-            inset: -10,
-            borderRadius: "50%",
-            border: `1.5px solid ${colors.accent}`,
-            animation: "_flint_ripple 1.8s ease-out infinite 0.6s",
-            opacity: isSuccess ? 0 : 1,
-            transition: "opacity 0.3s ease"
-          } }),
-          /* @__PURE__ */ jsx2("div", { style: {
-            position: "absolute",
-            inset: 0,
-            borderRadius: "50%",
-            border: ringBorder,
-            borderTopColor: ringTopColor,
-            animation: isSuccess ? "none" : "_flint_spin 0.85s linear infinite",
-            transition: "border-color 0.45s ease, border-top-color 0.45s ease"
-          } }),
-          /* @__PURE__ */ jsxs2("div", { style: { position: "absolute", inset: 14, borderRadius: "50%" }, children: [
-            /* @__PURE__ */ jsx2("div", { style: {
-              position: "absolute",
-              inset: 0,
-              borderRadius: "50%",
-              background: `linear-gradient(135deg, ${colors.accent}30, ${colors.accentHover}50)`,
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              animation: isSuccess ? "none" : "_flint_pulse 2s ease-in-out infinite",
-              opacity: isSuccess ? 0 : 1,
-              transition: "opacity 0.3s ease"
-            }, children: /* @__PURE__ */ jsx2(SparkIcon, { color: colors.accent, size: 20 }) }),
-            /* @__PURE__ */ jsx2("div", { style: {
-              position: "absolute",
-              inset: 0,
-              borderRadius: "50%",
-              background: "rgba(34,197,94,0.15)",
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              opacity: isSuccess ? 1 : 0,
-              transform: isSuccess ? "scale(1)" : "scale(0.65)",
-              transition: "opacity 0.35s ease 0.2s, transform 0.4s cubic-bezier(0.16,1,0.3,1) 0.2s"
-            }, children: /* @__PURE__ */ jsx2(CheckIcon, { size: 20 }) })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxs2("div", { style: { position: "relative", height: 26, width: "100%", marginBottom: 10 }, children: [
-          /* @__PURE__ */ jsx2("div", { style: {
-            position: "absolute",
-            inset: 0,
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            fontSize: 19,
-            fontWeight: 700,
-            color: colors.text,
-            letterSpacing: "-0.02em",
-            opacity: isSuccess ? 0 : 1,
-            transition: "opacity 0.25s ease",
-            pointerEvents: "none"
-          }, children: t("sending") }),
-          /* @__PURE__ */ jsx2("div", { style: {
-            position: "absolute",
-            inset: 0,
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            fontSize: 19,
-            fontWeight: 700,
-            color: colors.text,
-            letterSpacing: "-0.02em",
-            opacity: isSuccess ? 1 : 0,
-            transform: isSuccess ? "translateY(0)" : "translateY(6px)",
-            transition: "opacity 0.35s ease 0.25s, transform 0.35s ease 0.25s",
-            pointerEvents: isSuccess ? "auto" : "none"
-          }, children: t("successTitle") })
-        ] }),
-        /* @__PURE__ */ jsxs2("div", { style: { position: "relative", minHeight: 76, width: "100%" }, children: [
-          /* @__PURE__ */ jsxs2("div", { style: {
-            position: "absolute",
-            inset: 0,
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            gap: 6,
-            color: colors.textMuted,
-            fontSize: 15,
-            opacity: isSuccess ? 0 : 1,
-            transition: "opacity 0.2s ease",
-            pointerEvents: "none"
-          }, children: [
-            /* @__PURE__ */ jsx2("span", { children: t("capturingContext") }),
-            /* @__PURE__ */ jsx2(SendingDots, { color: colors.accent })
-          ] }),
-          /* @__PURE__ */ jsxs2("div", { style: {
-            position: "absolute",
-            inset: 0,
-            display: "flex",
-            flexDirection: "column",
-            alignItems: "center",
-            gap: 10,
-            opacity: isSuccess ? 1 : 0,
-            transform: isSuccess ? "translateY(0)" : "translateY(8px)",
-            transition: "opacity 0.35s ease 0.35s, transform 0.35s ease 0.35s",
-            pointerEvents: isSuccess ? "auto" : "none"
-          }, children: [
-            /* @__PURE__ */ jsx2("p", { style: { fontSize: 15, color: colors.textMuted, margin: 0 }, children: result ? `ID: ${result.id}` : "" }),
-            /* @__PURE__ */ jsx2(
-              "button",
-              {
-                onClick: onClose,
-                style: {
-                  width: "100%",
-                  padding: "13px 20px",
-                  borderRadius: 12,
-                  border: "none",
-                  background: `linear-gradient(135deg, ${colors.accent}, ${colors.accentHover})`,
-                  color: colors.buttonText,
-                  fontSize: 17,
-                  fontWeight: 700,
-                  cursor: "pointer",
-                  letterSpacing: "-0.01em",
-                  boxShadow: accentGlow,
-                  fontFamily: "inherit",
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "center",
-                  gap: 8
-                },
-                children: t("close")
-              }
-            )
-          ] })
-        ] })
-      ] })
-    ] }) });
+    return /* @__PURE__ */ jsx2("div", { style: overlayStyle, children: /* @__PURE__ */ jsxs2(
+      "div",
+      {
+        style: modalStyle,
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-label": isSuccess ? t("successTitle") : t("sending"),
+        children: [
+          /* @__PURE__ */ jsx2(ModalHeader, { colors, inputBorder, showClose: false, onClose }),
+          /* @__PURE__ */ jsxs2(
+            "div",
+            {
+              style: {
+                padding: "40px 32px 48px",
+                textAlign: "center",
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "center"
+              },
+              children: [
+                /* @__PURE__ */ jsxs2("div", { style: { position: "relative", width: 80, height: 80, marginBottom: 28 }, children: [
+                  /* @__PURE__ */ jsx2(
+                    "div",
+                    {
+                      style: {
+                        position: "absolute",
+                        inset: -10,
+                        borderRadius: "50%",
+                        border: `1.5px solid ${colors.accent}`,
+                        animation: "_flint_ripple 1.8s ease-out infinite",
+                        opacity: isSuccess ? 0 : 1,
+                        transition: "opacity 0.3s ease"
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ jsx2(
+                    "div",
+                    {
+                      style: {
+                        position: "absolute",
+                        inset: -10,
+                        borderRadius: "50%",
+                        border: `1.5px solid ${colors.accent}`,
+                        animation: "_flint_ripple 1.8s ease-out infinite 0.6s",
+                        opacity: isSuccess ? 0 : 1,
+                        transition: "opacity 0.3s ease"
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ jsx2(
+                    "div",
+                    {
+                      style: {
+                        position: "absolute",
+                        inset: 0,
+                        borderRadius: "50%",
+                        border: ringBorder,
+                        borderTopColor: ringTopColor,
+                        animation: isSuccess ? "none" : "_flint_spin 0.85s linear infinite",
+                        transition: "border-color 0.45s ease, border-top-color 0.45s ease"
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs2("div", { style: { position: "absolute", inset: 14, borderRadius: "50%" }, children: [
+                    /* @__PURE__ */ jsx2(
+                      "div",
+                      {
+                        style: {
+                          position: "absolute",
+                          inset: 0,
+                          borderRadius: "50%",
+                          background: `linear-gradient(135deg, ${colors.accent}30, ${colors.accentHover}50)`,
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "center",
+                          animation: isSuccess ? "none" : "_flint_pulse 2s ease-in-out infinite",
+                          opacity: isSuccess ? 0 : 1,
+                          transition: "opacity 0.3s ease"
+                        },
+                        children: /* @__PURE__ */ jsx2(SparkIcon, { color: colors.accent, size: 20 })
+                      }
+                    ),
+                    /* @__PURE__ */ jsx2(
+                      "div",
+                      {
+                        style: {
+                          position: "absolute",
+                          inset: 0,
+                          borderRadius: "50%",
+                          background: "rgba(34,197,94,0.15)",
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "center",
+                          opacity: isSuccess ? 1 : 0,
+                          transform: isSuccess ? "scale(1)" : "scale(0.65)",
+                          transition: "opacity 0.35s ease 0.2s, transform 0.4s cubic-bezier(0.16,1,0.3,1) 0.2s"
+                        },
+                        children: /* @__PURE__ */ jsx2(CheckIcon, { size: 20 })
+                      }
+                    )
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxs2("div", { style: { position: "relative", height: 26, width: "100%", marginBottom: 10 }, children: [
+                  /* @__PURE__ */ jsx2(
+                    "div",
+                    {
+                      style: {
+                        position: "absolute",
+                        inset: 0,
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        fontSize: 19,
+                        fontWeight: 700,
+                        color: colors.text,
+                        letterSpacing: "-0.02em",
+                        opacity: isSuccess ? 0 : 1,
+                        transition: "opacity 0.25s ease",
+                        pointerEvents: "none"
+                      },
+                      children: t("sending")
+                    }
+                  ),
+                  /* @__PURE__ */ jsx2(
+                    "div",
+                    {
+                      style: {
+                        position: "absolute",
+                        inset: 0,
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        fontSize: 19,
+                        fontWeight: 700,
+                        color: colors.text,
+                        letterSpacing: "-0.02em",
+                        opacity: isSuccess ? 1 : 0,
+                        transform: isSuccess ? "translateY(0)" : "translateY(6px)",
+                        transition: "opacity 0.35s ease 0.25s, transform 0.35s ease 0.25s",
+                        pointerEvents: isSuccess ? "auto" : "none"
+                      },
+                      children: t("successTitle")
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs2("div", { style: { position: "relative", minHeight: 76, width: "100%" }, children: [
+                  /* @__PURE__ */ jsxs2(
+                    "div",
+                    {
+                      style: {
+                        position: "absolute",
+                        inset: 0,
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        gap: 6,
+                        color: colors.textMuted,
+                        fontSize: 15,
+                        opacity: isSuccess ? 0 : 1,
+                        transition: "opacity 0.2s ease",
+                        pointerEvents: "none"
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx2("span", { children: t("capturingContext") }),
+                        /* @__PURE__ */ jsx2(SendingDots, { color: colors.accent })
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs2(
+                    "div",
+                    {
+                      style: {
+                        position: "absolute",
+                        inset: 0,
+                        display: "flex",
+                        flexDirection: "column",
+                        alignItems: "center",
+                        gap: 10,
+                        opacity: isSuccess ? 1 : 0,
+                        transform: isSuccess ? "translateY(0)" : "translateY(8px)",
+                        transition: "opacity 0.35s ease 0.35s, transform 0.35s ease 0.35s",
+                        pointerEvents: isSuccess ? "auto" : "none"
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx2("p", { style: { fontSize: 15, color: colors.textMuted, margin: 0 }, children: result ? `ID: ${result.id}` : "" }),
+                        statusPageUrl && user?.id && /* @__PURE__ */ jsxs2(
+                          "a",
+                          {
+                            href: `${statusPageUrl}/status?project_key=${encodeURIComponent(projectKey)}&reporter_id=${encodeURIComponent(user.id)}&server_url=${encodeURIComponent(serverUrl)}`,
+                            target: "_blank",
+                            rel: "noreferrer",
+                            style: {
+                              fontSize: 14,
+                              color: colors.accent,
+                              textDecoration: "none",
+                              fontWeight: 600,
+                              animation: "_flint_success_up 0.35s ease 0.4s both"
+                            },
+                            children: [
+                              "\u{1F4CB}",
+                              " Track your bugs ",
+                              "\u2192"
+                            ]
+                          }
+                        ),
+                        /* @__PURE__ */ jsx2(
+                          "button",
+                          {
+                            onClick: onClose,
+                            style: {
+                              width: "100%",
+                              padding: "13px 20px",
+                              borderRadius: 12,
+                              border: "none",
+                              background: `linear-gradient(135deg, ${colors.accent}, ${colors.accentHover})`,
+                              color: colors.buttonText,
+                              fontSize: 17,
+                              fontWeight: 700,
+                              cursor: "pointer",
+                              letterSpacing: "-0.01em",
+                              boxShadow: accentGlow,
+                              fontFamily: "inherit",
+                              display: "flex",
+                              alignItems: "center",
+                              justifyContent: "center",
+                              gap: 8
+                            },
+                            children: t("close")
+                          }
+                        )
+                      ]
+                    }
+                  )
+                ] })
+              ]
+            }
+          )
+        ]
+      }
+    ) });
   }
   return /* @__PURE__ */ jsxs2(Fragment, { children: [
-    annotating && /* @__PURE__ */ jsx2(
+    enableScreenshot && annotating && /* @__PURE__ */ jsx2(
       ScreenAnnotator,
       {
         zIndex: zIndex + 1,
@@ -604,37 +622,43 @@ function FlintModal({
         }
       ),
       /* @__PURE__ */ jsxs2("form", { onSubmit: handleSubmit, style: { padding: "20px 24px 24px" }, children: [
-        /* @__PURE__ */ jsx2("div", { style: {
-          display: "flex",
-          gap: 4,
-          marginBottom: 20,
-          background: colors.backgroundSecondary,
-          borderRadius: 12,
-          padding: 4,
-          border: `1px solid ${inputBorder}`
-        }, children: ["bug", "text"].map((m) => /* @__PURE__ */ jsx2(
-          "button",
+        /* @__PURE__ */ jsx2(
+          "div",
           {
-            type: "button",
-            onClick: () => setMode(m),
             style: {
-              flex: 1,
-              padding: "8px 10px",
-              borderRadius: 9,
-              border: "none",
-              cursor: "pointer",
-              fontSize: 13,
-              fontWeight: mode === m ? 700 : 500,
-              fontFamily: "inherit",
-              transition: "background 0.15s, color 0.15s",
-              background: mode === m ? `linear-gradient(135deg, ${colors.accent}, ${colors.accentHover})` : "transparent",
-              color: mode === m ? colors.buttonText : colors.textMuted,
-              boxShadow: mode === m ? `0 2px 8px ${colors.accent}30` : "none"
+              display: "flex",
+              gap: 4,
+              marginBottom: 20,
+              background: colors.backgroundSecondary,
+              borderRadius: 12,
+              padding: 4,
+              border: `1px solid ${inputBorder}`
             },
-            children: m === "bug" ? "\u{1F41B} Bug" : "\u{1F524} Text / Translation"
-          },
-          m
-        )) }),
+            children: ["bug", "text"].map((m) => /* @__PURE__ */ jsx2(
+              "button",
+              {
+                type: "button",
+                onClick: () => setMode(m),
+                style: {
+                  flex: 1,
+                  padding: "8px 10px",
+                  borderRadius: 9,
+                  border: "none",
+                  cursor: "pointer",
+                  fontSize: 13,
+                  fontWeight: mode === m ? 700 : 500,
+                  fontFamily: "inherit",
+                  transition: "background 0.15s, color 0.15s",
+                  background: mode === m ? `linear-gradient(135deg, ${colors.accent}, ${colors.accentHover})` : "transparent",
+                  color: mode === m ? colors.buttonText : colors.textMuted,
+                  boxShadow: mode === m ? `0 2px 8px ${colors.accent}30` : "none"
+                },
+                children: m === "bug" ? "\u{1F41B} Bug" : "\u{1F524} Text / Translation"
+              },
+              m
+            ))
+          }
+        ),
         mode === "text" && /* @__PURE__ */ jsxs2(Fragment, { children: [
           /* @__PURE__ */ jsxs2("div", { style: { marginBottom: 14 }, children: [
             /* @__PURE__ */ jsx2(FieldLabel, { colors, htmlFor: "flint-text-original", children: "Original text" }),
@@ -731,7 +755,7 @@ function FlintModal({
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs2("div", { style: { marginBottom: 20, display: mode === "text" ? "none" : void 0 }, children: [
+        /* @__PURE__ */ jsxs2("div", { style: { marginBottom: 20, display: mode === "text" || !enableScreenshot ? "none" : void 0 }, children: [
           /* @__PURE__ */ jsx2(FieldLabel, { colors, children: t("screenshotLabel") }),
           screenshot ? /* @__PURE__ */ jsxs2("div", { style: { display: "flex", alignItems: "center", gap: 10 }, children: [
             /* @__PURE__ */ jsx2(
@@ -742,7 +766,20 @@ function FlintModal({
                 style: { height: 60, borderRadius: 8, objectFit: "cover", border: `1px solid ${inputBorder}` }
               }
             ),
-            /* @__PURE__ */ jsx2("span", { style: { fontSize: 13, color: colors.textMuted, flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: screenshot.name }),
+            /* @__PURE__ */ jsx2(
+              "span",
+              {
+                style: {
+                  fontSize: 13,
+                  color: colors.textMuted,
+                  flex: 1,
+                  overflow: "hidden",
+                  textOverflow: "ellipsis",
+                  whiteSpace: "nowrap"
+                },
+                children: screenshot.name
+              }
+            ),
             /* @__PURE__ */ jsx2(
               "button",
               {
@@ -829,31 +866,43 @@ function FlintModal({
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs2("div", { style: {
-          display: "flex",
-          alignItems: "center",
-          gap: 8,
-          padding: "9px 12px",
-          borderRadius: 10,
-          background: isDark ? "rgba(255,255,255,0.04)" : "rgba(0,77,240,0.04)",
-          border: `1px solid ${isDark ? "rgba(255,255,255,0.08)" : "rgba(0,77,240,0.1)"}`,
-          marginBottom: 16
-        }, children: [
-          /* @__PURE__ */ jsx2("span", { style: { fontSize: 16 }, children: "\u{1F3A5}" }),
-          /* @__PURE__ */ jsx2("span", { style: { fontSize: 14, color: colors.textMuted, lineHeight: 1.4 }, children: t("replayInfo") })
-        ] }),
-        status === "error" && /* @__PURE__ */ jsxs2("div", { style: {
-          padding: "10px 13px",
-          borderRadius: 10,
-          background: "rgba(239,68,68,0.08)",
-          border: "1px solid rgba(239,68,68,0.2)",
-          color: "#f87171",
-          fontSize: 14,
-          marginBottom: 16
-        }, children: [
-          "\u26A0\uFE0F ",
-          errorMsg || t("errorLabel")
-        ] }),
+        /* @__PURE__ */ jsxs2(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              gap: 8,
+              padding: "9px 12px",
+              borderRadius: 10,
+              background: isDark ? "rgba(255,255,255,0.04)" : "rgba(0,77,240,0.04)",
+              border: `1px solid ${isDark ? "rgba(255,255,255,0.08)" : "rgba(0,77,240,0.1)"}`,
+              marginBottom: 16
+            },
+            children: [
+              /* @__PURE__ */ jsx2("span", { style: { fontSize: 16 }, children: "\u{1F3A5}" }),
+              /* @__PURE__ */ jsx2("span", { style: { fontSize: 14, color: colors.textMuted, lineHeight: 1.4 }, children: t("replayInfo") })
+            ]
+          }
+        ),
+        status === "error" && /* @__PURE__ */ jsxs2(
+          "div",
+          {
+            style: {
+              padding: "10px 13px",
+              borderRadius: 10,
+              background: "rgba(239,68,68,0.08)",
+              border: "1px solid rgba(239,68,68,0.2)",
+              color: "#f87171",
+              fontSize: 14,
+              marginBottom: 16
+            },
+            children: [
+              "\u26A0\uFE0F ",
+              errorMsg || t("errorLabel")
+            ]
+          }
+        ),
         /* @__PURE__ */ jsxs2(
           "button",
           {
@@ -914,49 +963,68 @@ function ModalHeader({
   titleId,
   title
 }) {
-  return /* @__PURE__ */ jsxs2("div", { style: {
-    display: "flex",
-    alignItems: "center",
-    gap: 10,
-    padding: "16px 20px 14px",
-    borderBottom: `1px solid ${inputBorder}`
-  }, children: [
-    /* @__PURE__ */ jsx2("div", { style: {
-      width: 28,
-      height: 28,
-      borderRadius: 8,
-      background: `linear-gradient(135deg, ${colors.accent}20, ${colors.accentHover}35)`,
-      border: `1px solid ${colors.accent}30`,
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center",
-      flexShrink: 0
-    }, children: /* @__PURE__ */ jsx2(SparkIcon, { color: colors.accent, size: 13 }) }),
-    titleId && title ? /* @__PURE__ */ jsx2("h2", { id: titleId, style: { margin: 0, fontSize: 16, fontWeight: 600, color: colors.text, letterSpacing: "-0.01em", flex: 1 }, children: title }) : /* @__PURE__ */ jsx2("span", { style: { flex: 1, fontSize: 15, fontWeight: 600, color: colors.textMuted }, children: "Flint" }),
-    showClose && /* @__PURE__ */ jsx2(
-      "button",
-      {
-        onClick: onClose,
-        "aria-label": "Close",
-        style: {
-          background: "none",
-          border: "none",
-          cursor: "pointer",
-          padding: 4,
-          color: colors.textMuted,
-          fontSize: 22,
-          lineHeight: 1,
-          borderRadius: 6,
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          opacity: 0.6,
-          fontFamily: "inherit"
-        },
-        children: "\xD7"
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: 10,
+        padding: "16px 20px 14px",
+        borderBottom: `1px solid ${inputBorder}`
+      },
+      children: [
+        /* @__PURE__ */ jsx2(
+          "div",
+          {
+            style: {
+              width: 28,
+              height: 28,
+              borderRadius: 8,
+              background: `linear-gradient(135deg, ${colors.accent}20, ${colors.accentHover}35)`,
+              border: `1px solid ${colors.accent}30`,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              flexShrink: 0
+            },
+            children: /* @__PURE__ */ jsx2(SparkIcon, { color: colors.accent, size: 13 })
+          }
+        ),
+        titleId && title ? /* @__PURE__ */ jsx2(
+          "h2",
+          {
+            id: titleId,
+            style: { margin: 0, fontSize: 16, fontWeight: 600, color: colors.text, letterSpacing: "-0.01em", flex: 1 },
+            children: title
+          }
+        ) : /* @__PURE__ */ jsx2("span", { style: { flex: 1, fontSize: 15, fontWeight: 600, color: colors.textMuted }, children: "Flint" }),
+        showClose && /* @__PURE__ */ jsx2(
+          "button",
+          {
+            onClick: onClose,
+            "aria-label": "Close",
+            style: {
+              background: "none",
+              border: "none",
+              cursor: "pointer",
+              padding: 4,
+              color: colors.textMuted,
+              fontSize: 22,
+              lineHeight: 1,
+              borderRadius: 6,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              opacity: 0.6,
+              fontFamily: "inherit"
+            },
+            children: "\xD7"
+          }
+        )
+      ]
+    }
+  );
 }
 function FieldLabel({
   children,
@@ -1018,19 +1086,74 @@ function SeverityButton({ sev, label, selected, hint, color, accent, border, bg,
       },
       children: [
         /* @__PURE__ */ jsx2("span", { style: { width: 8, height: 8, borderRadius: "50%", background: color, display: "block" } }),
-        /* @__PURE__ */ jsx2("span", { style: { fontSize: 13, fontWeight: selected ? 700 : 500, color: selected ? accent : text, letterSpacing: "0.02em" }, children: sev }),
+        /* @__PURE__ */ jsx2(
+          "span",
+          {
+            style: {
+              fontSize: 13,
+              fontWeight: selected ? 700 : 500,
+              color: selected ? accent : text,
+              letterSpacing: "0.02em"
+            },
+            children: sev
+          }
+        ),
         /* @__PURE__ */ jsx2("span", { style: { fontSize: 11, color: selected ? accent : text, opacity: 0.6, letterSpacing: "0.02em" }, children: label })
       ]
     }
   );
 }
 function SparkIcon({ color = "currentColor", size = 14 }) {
-  return /* @__PURE__ */ jsx2("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx2("path", { d: "M13 2L3 14h9l-1 8 10-12h-9l1-8z" }) });
+  return /* @__PURE__ */ jsx2(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: color,
+      strokeWidth: "2.2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx2("path", { d: "M13 2L3 14h9l-1 8 10-12h-9l1-8z" })
+    }
+  );
 }
 function CheckIcon({ size = 20 }) {
-  return /* @__PURE__ */ jsx2("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "#22c55e", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx2("polyline", { points: "20 6 9 17 4 12" }) });
+  return /* @__PURE__ */ jsx2(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "#22c55e",
+      strokeWidth: "2.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx2("polyline", { points: "20 6 9 17 4 12" })
+    }
+  );
 }
 
+// src/FlintWidget.tsx
+import { useCallback as useCallback2, useEffect as useEffect3, useRef as useRef3, useState as useState3 } from "react";
+import { I18nextProvider, useTranslation as useTranslation2 } from "react-i18next";
+
+// src/collectors/console.ts
+import { createConsoleCollector } from "@flint/core";
+
+// src/collectors/environment.ts
+import { collectEnvironment } from "@flint/core";
+
+// src/collectors/frustration.ts
+import { createFrustrationCollector } from "@flint/core";
+
+// src/collectors/network.ts
+import { createNetworkCollector } from "@flint/core";
+
 // src/i18n/index.ts
 import { createInstance } from "i18next";
 import { initReactI18next } from "react-i18next";
@@ -1080,251 +1203,15 @@ widgetI18n.use(initReactI18next).init({
 });
 var i18n_default = widgetI18n;
 
-// src/collectors/environment.ts
-function collectEnvironment() {
-  const ua = navigator.userAgent;
-  let browser = "Unknown";
-  const chromeM = ua.match(/Chrome\/(\d+)/);
-  const firefoxM = ua.match(/Firefox\/(\d+)/);
-  const edgeM = ua.match(/Edg\/(\d+)/);
-  const safariM = ua.match(/Version\/(\d+)/);
-  const operaM = ua.match(/OPR\/(\d+)/);
-  if (operaM) {
-    browser = `Opera ${operaM[1]}`;
-  } else if (edgeM) {
-    browser = `Edge ${edgeM[1]}`;
-  } else if (chromeM && !/Edg|OPR/.test(ua)) {
-    browser = `Chrome ${chromeM[1]}`;
-  } else if (firefoxM) {
-    browser = `Firefox ${firefoxM[1]}`;
-  } else if (safariM && /Safari\//.test(ua)) {
-    browser = `Safari ${safariM[1]}`;
-  }
-  let os = "Unknown";
-  const macM = ua.match(/Mac OS X (\d+[._]\d+)/);
-  const winM = ua.match(/Windows NT (\d+\.\d+)/);
-  const androidM = ua.match(/Android (\d+)/);
-  const iosM = ua.match(/iPhone OS (\d+[._]\d+)/);
-  if (macM) {
-    os = `macOS ${macM[1].replace("_", ".")}`;
-  } else if (winM) {
-    const winMap = {
-      "10.0": "10/11",
-      "6.3": "8.1",
-      "6.2": "8",
-      "6.1": "7"
-    };
-    os = `Windows ${winMap[winM[1]] ?? winM[1]}`;
-  } else if (androidM) {
-    os = `Android ${androidM[1]}`;
-  } else if (iosM) {
-    os = `iOS ${iosM[1].replace(/_/g, ".")}`;
-  } else if (/Linux/.test(ua)) {
-    os = "Linux";
-  }
-  return {
-    browser,
-    os,
-    viewport: `${window.innerWidth}x${window.innerHeight}`,
-    screen: `${screen.width}x${screen.height}`,
-    language: navigator.language,
-    timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
-    online: navigator.onLine
-  };
-}
-
-// src/collectors/console.ts
-var MAX_ENTRIES = 50;
-function createConsoleCollector() {
-  const entries = [];
-  let active = false;
-  const originals = {
-    log: console.log.bind(console),
-    warn: console.warn.bind(console),
-    error: console.error.bind(console)
-  };
-  let origOnerror = null;
-  let origUnhandled = null;
-  function push(level, args) {
-    let str;
-    try {
-      str = args.map((a) => typeof a === "string" ? a : JSON.stringify(a)).join(" ");
-    } catch {
-      str = String(args[0]);
-    }
-    if (str.length > 500) str = str.slice(0, 500) + "\u2026";
-    entries.push({ level, args: str, timestamp: Date.now() });
-    if (entries.length > MAX_ENTRIES) entries.shift();
-  }
-  return {
-    start() {
-      if (active) return;
-      active = true;
-      console.log = (...args) => {
-        push("log", args);
-        originals.log(...args);
-      };
-      console.warn = (...args) => {
-        push("warn", args);
-        originals.warn(...args);
-      };
-      console.error = (...args) => {
-        push("error", args);
-        originals.error(...args);
-      };
-      origOnerror = window.onerror;
-      window.onerror = (msg, src, line, col, err) => {
-        push("error", [err?.message ?? String(msg), `${src}:${line}:${col}`]);
-        if (typeof origOnerror === "function")
-          return origOnerror(msg, src, line, col, err);
-        return false;
-      };
-      origUnhandled = window.onunhandledrejection;
-      window.onunhandledrejection = (event) => {
-        const reason = event.reason instanceof Error ? event.reason.message : JSON.stringify(event.reason);
-        push("error", ["UnhandledRejection:", reason]);
-        if (typeof origUnhandled === "function")
-          origUnhandled.call(window, event);
-      };
-    },
-    stop() {
-      if (!active) return;
-      active = false;
-      console.log = originals.log;
-      console.warn = originals.warn;
-      console.error = originals.error;
-      window.onerror = origOnerror;
-      window.onunhandledrejection = origUnhandled;
-    },
-    getEntries() {
-      return [...entries];
-    }
-  };
-}
-
-// src/collectors/network.ts
-var MAX_ENTRIES2 = 50;
-var BLOCKED_HOSTS = /* @__PURE__ */ new Set([
-  "browser-intake-datadoghq.com",
-  "rum.browser-intake-datadoghq.com",
-  "logs.browser-intake-datadoghq.com",
-  "session-replay.browser-intake-datadoghq.com"
-]);
-function isBlockedUrl(url, extra) {
-  try {
-    const host = new URL(url, location.href).hostname;
-    const all = [...BLOCKED_HOSTS, ...extra];
-    return all.some((b) => host === b || host.endsWith("." + b));
-  } catch {
-    return false;
-  }
-}
-function truncateUrl(url) {
-  try {
-    const u = new URL(url, location.href);
-    const base = `${u.origin}${u.pathname}`;
-    return base.length > 200 ? base.slice(0, 200) + "\u2026" : base;
-  } catch {
-    return url.length > 200 ? url.slice(0, 200) + "\u2026" : url;
-  }
-}
-function createNetworkCollector(extraBlockedHosts = []) {
-  const entries = [];
-  const blocked = new Set(extraBlockedHosts);
-  let origFetch = null;
-  let origXHROpen = null;
-  let active = false;
-  function push(entry) {
-    entries.push(entry);
-    if (entries.length > MAX_ENTRIES2) entries.shift();
-  }
-  return {
-    start() {
-      if (active) return;
-      active = true;
-      origFetch = window.fetch;
-      window.fetch = async (input, init) => {
-        const method = (init?.method ?? "GET").toUpperCase();
-        const url = typeof input === "string" ? input : input instanceof URL ? input.href : input.url;
-        const startTime = Date.now();
-        const res = await origFetch.call(window, input, init);
-        if (res.status >= 400 && !isBlockedUrl(url, blocked)) {
-          push({
-            method,
-            url: truncateUrl(url),
-            status: res.status,
-            duration: Date.now() - startTime,
-            timestamp: startTime
-          });
-        }
-        return res;
-      };
-      origXHROpen = XMLHttpRequest.prototype.open;
-      XMLHttpRequest.prototype.open = function(method, url, async, username, password) {
-        const startTime = Date.now();
-        const urlStr = typeof url === "string" ? url : url.href;
-        this.addEventListener("load", () => {
-          if (this.status >= 400 && !isBlockedUrl(urlStr, blocked)) {
-            push({
-              method: method.toUpperCase(),
-              url: truncateUrl(urlStr),
-              status: this.status,
-              duration: Date.now() - startTime,
-              timestamp: startTime
-            });
-          }
-        });
-        return origXHROpen.apply(this, [
-          method,
-          url,
-          async ?? true,
-          username,
-          password
-        ]);
-      };
-    },
-    stop() {
-      if (!active) return;
-      active = false;
-      if (origFetch) window.fetch = origFetch;
-      if (origXHROpen) XMLHttpRequest.prototype.open = origXHROpen;
-    },
-    getEntries() {
-      return [...entries];
-    }
-  };
-}
-
 // src/store.ts
+import { getSnapshot, subscribe } from "@flint/core";
 import { useSyncExternalStore } from "react";
-var state = { user: void 0, sessionReplay: void 0 };
-var listeners = /* @__PURE__ */ new Set();
-function emit() {
-  listeners.forEach((fn) => fn());
-}
-function subscribeStore(fn) {
-  listeners.add(fn);
-  return () => listeners.delete(fn);
-}
-function getSnapshot() {
-  return state;
-}
+import { flint as flint2 } from "@flint/core";
 function useFlintStore() {
-  return useSyncExternalStore(subscribeStore, getSnapshot);
+  return useSyncExternalStore(subscribe, getSnapshot);
 }
-var flint = {
-  setUser(user) {
-    state = { ...state, user: user ?? void 0 };
-    emit();
-  },
-  setSessionReplay(url) {
-    state = { ...state, sessionReplay: url };
-    emit();
-  }
-};
 
 // src/FlintWidget.tsx
-import { record } from "rrweb";
 import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 var REPLAY_WINDOW_MS = 6e4;
 function FlintWidget(props) {
@@ -1343,7 +1230,19 @@ function WidgetContent({
   buttonLabel,
   theme = "dark",
   zIndex = 9999,
-  datadogSite
+  statusPageUrl,
+  datadogSite,
+  enableReplay = true,
+  enableScreenshot = true,
+  enableConsole = true,
+  enableNetwork = true,
+  enableFrustration = false,
+  autoReportFrustration = false,
+  onBeforeSubmit,
+  onSuccess,
+  onError,
+  onOpen,
+  onClose
 }) {
   const globalState = useFlintStore();
   const resolvedUser = user ?? globalState.user;
@@ -1357,9 +1256,9 @@ function WidgetContent({
         const ddRum = window.DD_RUM;
         const ctx = ddRum?.getInternalContext?.();
         if (ctx?.session_id) {
-          const now = Date.now();
-          const fromTs = now - 3e4;
-          const toTs = now + 5e3;
+          const now = Math.floor(Date.now() / 1e3);
+          const fromTs = now - 30;
+          const toTs = now + 5;
           return `https://${datadogSite}/rum/replay/sessions/${ctx.session_id}?from_ts=${fromTs}&to_ts=${toTs}&tab=replay&live=false`;
         }
       } catch {
@@ -1412,16 +1311,17 @@ function WidgetContent({
     pendingSelection.current = text;
     setSelectionTooltip(null);
     setOpen(true);
+    onOpen?.();
   };
   const consoleCollector = useRef3(null);
   const networkCollector = useRef3(null);
   const replayEvents = useRef3([]);
   const stopReplay = useRef3(null);
-  if (!consoleCollector.current) {
+  if (enableConsole && !consoleCollector.current) {
     consoleCollector.current = createConsoleCollector();
     consoleCollector.current.start();
   }
-  if (!networkCollector.current) {
+  if (enableNetwork && !networkCollector.current) {
     const flintHost = (() => {
       try {
         return new URL(serverUrl).hostname;
@@ -1432,23 +1332,58 @@ function WidgetContent({
     networkCollector.current = createNetworkCollector(flintHost ? [flintHost] : []);
     networkCollector.current.start();
   }
+  const frustrationCollector = useRef3(null);
+  if (enableFrustration && !frustrationCollector.current) {
+    frustrationCollector.current = createFrustrationCollector();
+    frustrationCollector.current.start();
+  }
   useEffect3(() => {
-    const stopFn = record({
-      emit(event) {
-        replayEvents.current.push(event);
-        const cutoff = Date.now() - REPLAY_WINDOW_MS;
-        while (replayEvents.current.length > 0 && replayEvents.current[0].timestamp < cutoff) {
-          replayEvents.current.shift();
-        }
-      }
-    });
-    stopReplay.current = stopFn ?? null;
+    let cancelled = false;
+    if (enableReplay) {
+      import("rrweb").then(({ record }) => {
+        if (cancelled) return;
+        const stopFn = record({
+          emit(event) {
+            replayEvents.current.push(event);
+            const cutoff = Date.now() - REPLAY_WINDOW_MS;
+            while (replayEvents.current.length > 0 && replayEvents.current[0].timestamp < cutoff) {
+              replayEvents.current.shift();
+            }
+          }
+        });
+        stopReplay.current = stopFn ?? null;
+      });
+    }
     return () => {
+      cancelled = true;
       consoleCollector.current?.stop();
       networkCollector.current?.stop();
+      frustrationCollector.current?.stop();
       stopReplay.current?.();
     };
-  }, []);
+  }, [enableReplay]);
+  useEffect3(() => {
+    if (!enableFrustration || !autoReportFrustration || !frustrationCollector.current) return;
+    const unsubscribe = frustrationCollector.current.onFrustration(async (event) => {
+      const user2 = resolvedUser;
+      await submitReport(serverUrl, projectKey, {
+        reporterId: user2?.id ?? "anonymous",
+        reporterName: user2?.name ?? "Anonymous",
+        reporterEmail: user2?.email,
+        description: `[Auto-detected] ${event.type.replace(/_/g, " ")}: ${event.details}`,
+        severity: event.type === "error_loop" ? "P1" : event.type === "rage_click" ? "P2" : "P3",
+        url: event.url,
+        meta: {
+          environment: collectEnvironment(),
+          consoleLogs: consoleCollector.current?.getEntries() ?? [],
+          networkErrors: networkCollector.current?.getEntries() ?? [],
+          frustrationEvent: event
+        }
+      }).catch(() => {
+      });
+    });
+    return unsubscribe;
+  }, [enableFrustration, autoReportFrustration]);
   const label = buttonLabel ?? t("buttonLabel");
   return /* @__PURE__ */ jsxs3(Fragment2, { children: [
     /* @__PURE__ */ jsxs3(
@@ -1458,7 +1393,10 @@ function WidgetContent({
         onMouseDown: () => {
           pendingSelection.current = window.getSelection()?.toString().trim() ?? "";
         },
-        onClick: () => setOpen(true),
+        onClick: () => {
+          setOpen(true);
+          onOpen?.();
+        },
         onMouseEnter: () => setHovered(true),
         onMouseLeave: () => setHovered(false),
         "aria-label": label,
@@ -1539,6 +1477,7 @@ function WidgetContent({
         zIndex,
         onClose: () => {
           setOpen(false);
+          onClose?.();
           pendingSelection.current = "";
         },
         getEnvironment: collectEnvironment,
@@ -1546,18 +1485,37 @@ function WidgetContent({
         getNetworkErrors: () => networkCollector.current?.getEntries() ?? [],
         getReplayEvents: () => [...replayEvents.current],
         getExternalReplayUrl,
-        initialSelection: pendingSelection.current
+        initialSelection: pendingSelection.current,
+        enableScreenshot,
+        statusPageUrl,
+        onBeforeSubmit,
+        onSuccess,
+        onError
       }
     )
   ] });
 }
 function TextIcon() {
-  return /* @__PURE__ */ jsxs3("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
-    /* @__PURE__ */ jsx3("path", { d: "M17 10H3" }),
-    /* @__PURE__ */ jsx3("path", { d: "M21 6H3" }),
-    /* @__PURE__ */ jsx3("path", { d: "M21 14H3" }),
-    /* @__PURE__ */ jsx3("path", { d: "M17 18H3" })
-  ] });
+  return /* @__PURE__ */ jsxs3(
+    "svg",
+    {
+      width: "12",
+      height: "12",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2.2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx3("path", { d: "M17 10H3" }),
+        /* @__PURE__ */ jsx3("path", { d: "M21 6H3" }),
+        /* @__PURE__ */ jsx3("path", { d: "M21 14H3" }),
+        /* @__PURE__ */ jsx3("path", { d: "M17 18H3" })
+      ]
+    }
+  );
 }
 function SparkIcon2() {
   return /* @__PURE__ */ jsx3(
@@ -1579,6 +1537,6 @@ function SparkIcon2() {
 export {
   FlintModal,
   FlintWidget,
-  flint
+  flint2 as flint
 };
 //# sourceMappingURL=index.js.map