@diegotsi/flint-react 0.1.0

package/dist/index.cjs

@@ -0,0 +1,1116 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  FlintModal: () => FlintModal,
+  FlintWidget: () => FlintWidget
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/FlintWidget.tsx
+var import_react2 = require("react");
+var import_react_i18next3 = require("react-i18next");
+
+// src/FlintModal.tsx
+var import_react = require("react");
+var import_react_i18next = require("react-i18next");
+
+// src/api.ts
+var import_fflate = require("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 = (0, import_fflate.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
+  };
+}
+
+// src/FlintModal.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var SEVERITIES = ["P1", "P2", "P3", "P4"];
+var SEV_COLOR = {
+  P1: "#ef4444",
+  P2: "#f97316",
+  P3: "#eab308",
+  P4: "#22c55e"
+};
+function injectKeyframes() {
+  if (typeof document === "undefined") return;
+  if (document.getElementById("_flint_kf")) return;
+  const s = document.createElement("style");
+  s.id = "_flint_kf";
+  s.textContent = `
+    @keyframes _flint_in {
+      from { opacity: 0; transform: scale(0.93) translateY(10px); }
+      to   { opacity: 1; transform: scale(1)    translateY(0); }
+    }
+    @keyframes _flint_overlay_in {
+      from { opacity: 0; }
+      to   { opacity: 1; }
+    }
+    @keyframes _flint_spin {
+      to { transform: rotate(360deg); }
+    }
+    @keyframes _flint_pulse {
+      0%, 100% { opacity: 0.5; transform: scale(0.88); }
+      50%       { opacity: 1;   transform: scale(1.08); }
+    }
+    @keyframes _flint_ripple {
+      0%   { opacity: 0.5; transform: scale(0.75); }
+      100% { opacity: 0;   transform: scale(1.55); }
+    }
+    @keyframes _flint_sending_dot {
+      0%, 80%, 100% { opacity: 0.2; transform: scale(0.8); }
+      40%           { opacity: 1;   transform: scale(1); }
+    }
+    @keyframes _flint_success_up {
+      from { opacity: 0; transform: translateY(8px); }
+      to   { opacity: 1; transform: translateY(0); }
+    }
+  `;
+  document.head.appendChild(s);
+}
+function FlintModal({
+  projectKey,
+  serverUrl,
+  user,
+  meta,
+  theme,
+  zIndex,
+  onClose,
+  getEnvironment,
+  getConsoleLogs,
+  getNetworkErrors,
+  getReplayEvents,
+  externalReplayUrl
+}) {
+  const { t } = (0, import_react_i18next.useTranslation)();
+  const colors = resolveTheme(theme);
+  const isDark = theme === "dark";
+  const [severity, setSeverity] = (0, import_react.useState)("P2");
+  const [description, setDescription] = (0, import_react.useState)("");
+  const [expectedBehavior, setExpectedBehavior] = (0, import_react.useState)("");
+  const [screenshot, setScreenshot] = (0, import_react.useState)(null);
+  const [status, setStatus] = (0, import_react.useState)("idle");
+  const [result, setResult] = (0, import_react.useState)(null);
+  const [errorMsg, setErrorMsg] = (0, import_react.useState)("");
+  const fileRef = (0, import_react.useRef)(null);
+  const overlayRef = (0, import_react.useRef)(null);
+  (0, import_react.useEffect)(() => {
+    injectKeyframes();
+  }, []);
+  (0, import_react.useEffect)(() => {
+    const handler = (e) => {
+      if (e.key === "Escape" && status !== "submitting") onClose();
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [onClose, status]);
+  const handleOverlayClick = (0, import_react.useCallback)(
+    (e) => {
+      if (e.target === overlayRef.current && status !== "submitting") onClose();
+    },
+    [onClose, status]
+  );
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    if (!description.trim()) return;
+    setStatus("submitting");
+    setErrorMsg("");
+    const collectedMeta = {
+      ...meta,
+      environment: getEnvironment(),
+      consoleLogs: getConsoleLogs(),
+      networkErrors: getNetworkErrors()
+    };
+    try {
+      const res = await submitReport(
+        serverUrl,
+        projectKey,
+        {
+          reporterId: user?.id ?? "anonymous",
+          reporterName: user?.name ?? "Anonymous",
+          description: description.trim(),
+          expectedBehavior: expectedBehavior.trim() || void 0,
+          externalReplayUrl: externalReplayUrl || void 0,
+          severity,
+          url: window.location.href,
+          meta: collectedMeta
+        },
+        screenshot ?? void 0
+      );
+      setResult(res);
+      setStatus("success");
+      const events = getReplayEvents();
+      if (events.length > 0) {
+        submitReplay(serverUrl, projectKey, res.id, events).catch(() => {
+        });
+      }
+    } catch (err) {
+      setErrorMsg(err instanceof Error ? err.message : t("errorLabel"));
+      setStatus("error");
+    }
+  };
+  const inputBorder = isDark ? "rgba(255,255,255,0.1)" : "rgba(0,0,0,0.1)";
+  const accentGlow = `0 0 20px ${colors.accent}40, 0 4px 16px rgba(0,0,0,0.2)`;
+  const overlayStyle = {
+    position: "fixed",
+    inset: 0,
+    background: "rgba(0,0,0,0.5)",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    zIndex,
+    padding: "16px",
+    backdropFilter: "blur(10px)",
+    WebkitBackdropFilter: "blur(10px)",
+    animation: "_flint_overlay_in 0.2s ease"
+  };
+  const modalStyle = {
+    background: colors.background,
+    backdropFilter: colors.backdropFilter,
+    WebkitBackdropFilter: colors.backdropFilter,
+    borderRadius: "20px",
+    boxShadow: colors.shadow,
+    border: `1px solid ${colors.border}`,
+    width: "100%",
+    maxWidth: "480px",
+    maxHeight: "92vh",
+    overflowY: "auto",
+    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+    color: colors.text,
+    animation: "_flint_in 0.28s cubic-bezier(0.16, 1, 0.3, 1)"
+  };
+  const inputStyle = {
+    width: "100%",
+    padding: "11px 13px",
+    borderRadius: "10px",
+    border: `1px solid ${inputBorder}`,
+    background: colors.backgroundSecondary,
+    color: colors.text,
+    fontSize: "14px",
+    outline: "none",
+    boxSizing: "border-box",
+    fontFamily: "inherit",
+    transition: "border-color 0.15s"
+  };
+  if (status === "submitting" || status === "success") {
+    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__ */ (0, import_jsx_runtime.jsx)("div", { style: overlayStyle, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: modalStyle, role: "dialog", "aria-modal": "true", "aria-label": isSuccess ? t("successTitle") : t("sending"), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ModalHeader, { colors, inputBorder, showClose: false, onClose }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { padding: "40px 32px 48px", textAlign: "center", display: "flex", flexDirection: "column", alignItems: "center" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { position: "relative", width: 80, height: 80, marginBottom: 28 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("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__ */ (0, import_jsx_runtime.jsx)("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__ */ (0, import_jsx_runtime.jsx)("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__ */ (0, import_jsx_runtime.jsxs)("div", { style: { position: "absolute", inset: 14, borderRadius: "50%" }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("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__ */ (0, import_jsx_runtime.jsx)(SparkIcon, { color: colors.accent, size: 20 }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("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__ */ (0, import_jsx_runtime.jsx)(CheckIcon, { size: 20 }) })
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { position: "relative", height: 26, width: "100%", marginBottom: 10 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: {
+            position: "absolute",
+            inset: 0,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            fontSize: 17,
+            fontWeight: 700,
+            color: colors.text,
+            letterSpacing: "-0.02em",
+            opacity: isSuccess ? 0 : 1,
+            transition: "opacity 0.25s ease",
+            pointerEvents: "none"
+          }, children: t("sending") }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: {
+            position: "absolute",
+            inset: 0,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            fontSize: 17,
+            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__ */ (0, import_jsx_runtime.jsxs)("div", { style: { position: "relative", minHeight: 76, width: "100%" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: {
+            position: "absolute",
+            inset: 0,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            gap: 6,
+            color: colors.textMuted,
+            fontSize: 13,
+            opacity: isSuccess ? 0 : 1,
+            transition: "opacity 0.2s ease",
+            pointerEvents: "none"
+          }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: t("capturingContext") }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SendingDots, { color: colors.accent })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("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__ */ (0, import_jsx_runtime.jsx)("p", { style: { fontSize: 13, color: colors.textMuted, margin: 0 }, children: result?.isDuplicate ? t("successDuplicate") : result ? `ID: ${result.id}` : "" }),
+            result?.githubIssueUrl && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+              "a",
+              {
+                href: result.githubIssueUrl,
+                target: "_blank",
+                rel: "noreferrer",
+                style: {
+                  display: "inline-flex",
+                  alignItems: "center",
+                  gap: 6,
+                  padding: "9px 18px",
+                  borderRadius: "10px",
+                  background: `linear-gradient(135deg, ${colors.accent}, ${colors.accentHover})`,
+                  color: colors.buttonText,
+                  textDecoration: "none",
+                  fontSize: "13px",
+                  fontWeight: 600,
+                  boxShadow: accentGlow
+                },
+                children: [
+                  t("successGitHub"),
+                  " \u2197"
+                ]
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "button",
+              {
+                onClick: onClose,
+                style: {
+                  background: "none",
+                  border: "none",
+                  cursor: "pointer",
+                  fontSize: 13,
+                  color: colors.textMuted,
+                  padding: "4px 8px",
+                  fontFamily: "inherit"
+                },
+                children: t("cancel")
+              }
+            )
+          ] })
+        ] })
+      ] })
+    ] }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref: overlayRef, style: overlayStyle, onClick: handleOverlayClick, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: modalStyle, role: "dialog", "aria-modal": "true", "aria-labelledby": "flint-modal-title", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      ModalHeader,
+      {
+        colors,
+        inputBorder,
+        showClose: true,
+        onClose,
+        titleId: "flint-modal-title",
+        title: t("modalTitle")
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("form", { onSubmit: handleSubmit, style: { padding: "20px 24px 24px" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { marginBottom: 18 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FieldLabel, { colors, children: t("severityLabel") }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 8 }, children: SEVERITIES.map((sev) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          SeverityButton,
+          {
+            sev,
+            label: t(`severity_${sev}_label`),
+            selected: severity === sev,
+            hint: t(`severity_${sev}_hint`),
+            color: SEV_COLOR[sev],
+            accent: colors.accent,
+            border: inputBorder,
+            bg: colors.backgroundSecondary,
+            text: colors.text,
+            onClick: () => setSeverity(sev)
+          },
+          sev
+        )) })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { marginBottom: 14 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FieldLabel, { colors, htmlFor: "flint-description", children: t("whatIsBrokenLabel") }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "textarea",
+          {
+            id: "flint-description",
+            style: { ...inputStyle, resize: "vertical", minHeight: 80 },
+            value: description,
+            onChange: (e) => setDescription(e.target.value),
+            placeholder: t("whatIsBrokenPlaceholder"),
+            required: true
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { marginBottom: 14 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FieldLabel, { colors, htmlFor: "flint-expected", children: t("expectedBehaviorLabel") }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "textarea",
+          {
+            id: "flint-expected",
+            style: { ...inputStyle, resize: "vertical", minHeight: 72 },
+            value: expectedBehavior,
+            onChange: (e) => setExpectedBehavior(e.target.value),
+            placeholder: t("expectedBehaviorPlaceholder")
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { marginBottom: 20 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FieldLabel, { colors, children: t("screenshotLabel") }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "label",
+          {
+            htmlFor: "flint-screenshot",
+            style: {
+              display: "flex",
+              alignItems: "center",
+              gap: 8,
+              padding: "10px 13px",
+              borderRadius: 10,
+              border: `1px dashed ${inputBorder}`,
+              cursor: "pointer",
+              fontSize: 13,
+              color: colors.textMuted,
+              background: colors.backgroundSecondary
+            },
+            children: [
+              "\u{1F4CE} ",
+              screenshot ? screenshot.name : t("screenshotPlaceholder")
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "input",
+          {
+            id: "flint-screenshot",
+            ref: fileRef,
+            type: "file",
+            accept: "image/*",
+            style: { display: "none" },
+            onChange: (e) => setScreenshot(e.target.files?.[0] ?? null)
+          }
+        )
+      ] }),
+      status === "error" && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("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: 12,
+        marginBottom: 16
+      }, children: [
+        "\u26A0\uFE0F ",
+        errorMsg || t("errorLabel")
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        "button",
+        {
+          type: "submit",
+          style: {
+            width: "100%",
+            padding: "13px 20px",
+            borderRadius: 12,
+            border: "none",
+            background: `linear-gradient(135deg, ${colors.accent}, ${colors.accentHover})`,
+            color: colors.buttonText,
+            fontSize: 15,
+            fontWeight: 700,
+            cursor: "pointer",
+            letterSpacing: "-0.01em",
+            boxShadow: accentGlow,
+            fontFamily: "inherit",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            gap: 8
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SparkIcon, { color: colors.buttonText, size: 15 }),
+            t("submitLabel")
+          ]
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "button",
+        {
+          type: "button",
+          onClick: onClose,
+          style: {
+            width: "100%",
+            padding: "10px",
+            marginTop: 8,
+            background: "none",
+            border: "none",
+            cursor: "pointer",
+            fontSize: 13,
+            color: colors.textMuted,
+            fontFamily: "inherit",
+            borderRadius: 8
+          },
+          children: t("cancel")
+        }
+      )
+    ] })
+  ] }) });
+}
+function ModalHeader({
+  colors,
+  inputBorder,
+  showClose,
+  onClose,
+  titleId,
+  title
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: {
+    display: "flex",
+    alignItems: "center",
+    gap: 10,
+    padding: "16px 20px 14px",
+    borderBottom: `1px solid ${inputBorder}`
+  }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("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__ */ (0, import_jsx_runtime.jsx)(SparkIcon, { color: colors.accent, size: 13 }) }),
+    titleId && title ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { id: titleId, style: { margin: 0, fontSize: 14, fontWeight: 600, color: colors.text, letterSpacing: "-0.01em", flex: 1 }, children: title }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { flex: 1, fontSize: 13, fontWeight: 600, color: colors.textMuted }, children: "Flint" }),
+    showClose && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "button",
+      {
+        onClick: onClose,
+        "aria-label": "Close",
+        style: {
+          background: "none",
+          border: "none",
+          cursor: "pointer",
+          padding: 4,
+          color: colors.textMuted,
+          fontSize: 20,
+          lineHeight: 1,
+          borderRadius: 6,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          opacity: 0.6,
+          fontFamily: "inherit"
+        },
+        children: "\xD7"
+      }
+    )
+  ] });
+}
+function FieldLabel({
+  children,
+  colors,
+  htmlFor
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "label",
+    {
+      htmlFor,
+      style: {
+        display: "block",
+        fontSize: "10px",
+        fontWeight: 700,
+        color: colors.textMuted,
+        marginBottom: 6,
+        textTransform: "uppercase",
+        letterSpacing: "0.07em"
+      },
+      children
+    }
+  );
+}
+function SendingDots({ color }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { display: "inline-flex", gap: 3, alignItems: "center" }, children: [0, 1, 2].map((i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "span",
+    {
+      style: {
+        width: 4,
+        height: 4,
+        borderRadius: "50%",
+        background: color,
+        display: "inline-block",
+        animation: `_flint_sending_dot 1.4s ease-in-out infinite ${i * 0.2}s`
+      }
+    },
+    i
+  )) });
+}
+function SeverityButton({ sev, label, selected, hint, color, accent, border, bg, text, onClick }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "button",
+    {
+      type: "button",
+      title: hint,
+      onClick,
+      style: {
+        padding: "9px 6px 8px",
+        borderRadius: 10,
+        border: selected ? `2px solid ${accent}` : `1.5px solid ${border}`,
+        background: selected ? `${accent}15` : bg,
+        cursor: "pointer",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        gap: 5,
+        transition: "border-color 0.12s, background 0.12s",
+        fontFamily: "inherit"
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { width: 8, height: 8, borderRadius: "50%", background: color, display: "block" } }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontSize: 11, fontWeight: selected ? 700 : 500, color: selected ? accent : text, letterSpacing: "0.02em" }, children: sev }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontSize: 9, color: selected ? accent : text, opacity: 0.6, letterSpacing: "0.02em" }, children: label })
+      ]
+    }
+  );
+}
+function SparkIcon({ color = "currentColor", size = 14 }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("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__ */ (0, import_jsx_runtime.jsx)("path", { d: "M13 2L3 14h9l-1 8 10-12h-9l1-8z" }) });
+}
+function CheckIcon({ size = 20 }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("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__ */ (0, import_jsx_runtime.jsx)("polyline", { points: "20 6 9 17 4 12" }) });
+}
+
+// src/i18n/index.ts
+var import_i18next = require("i18next");
+var import_react_i18next2 = require("react-i18next");
+
+// src/i18n/locales/en.json
+var en_default = {
+  buttonLabel: "Report bug",
+  modalTitle: "Report an issue",
+  severityLabel: "Severity",
+  severity_P1_hint: "Critical \u2014 system down",
+  severity_P2_hint: "High \u2014 core feature broken",
+  severity_P3_hint: "Medium \u2014 noticeable but workable",
+  severity_P4_hint: "Low \u2014 cosmetic or improvement",
+  severity_P1_label: "Critical",
+  severity_P2_label: "High",
+  severity_P3_label: "Medium",
+  severity_P4_label: "Low",
+  whatIsBrokenLabel: "What Is Broken",
+  whatIsBrokenPlaceholder: "1\u20132 sentences: what is currently happening that should NOT happen.",
+  expectedBehaviorLabel: "Expected Behavior (optional)",
+  expectedBehaviorPlaceholder: "Describe exactly what the user should see or receive after the fix.",
+  screenshotLabel: "Screenshot (optional)",
+  screenshotPlaceholder: "Click to attach...",
+  submitLabel: "Submit",
+  successTitle: "Bug reported!",
+  successDuplicate: "Looks like a duplicate of an existing bug.",
+  successGitHub: "View GitHub issue",
+  errorLabel: "Failed to submit. Please try again.",
+  cancel: "Cancel",
+  sending: "Sending report",
+  capturingContext: "Capturing context"
+};
+
+// src/i18n/index.ts
+var widgetI18n = (0, import_i18next.createInstance)();
+widgetI18n.use(import_react_i18next2.initReactI18next).init({
+  lng: "en-US",
+  fallbackLng: "en-US",
+  resources: { "en-US": { translation: en_default } },
+  interpolation: { escapeValue: false },
+  initImmediate: false
+});
+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 = 20;
+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() {
+  const entries = [];
+  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);
+        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", () => {
+          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/FlintWidget.tsx
+var import_rrweb = require("rrweb");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var REPLAY_WINDOW_MS = 6e4;
+function FlintWidget(props) {
+  const { locale = "en-US" } = props;
+  (0, import_react2.useEffect)(() => {
+    i18n_default.changeLanguage(locale);
+  }, [locale]);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_i18next3.I18nextProvider, { i18n: i18n_default, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(WidgetContent, { ...props }) });
+}
+function WidgetContent({
+  projectKey,
+  serverUrl,
+  user,
+  meta,
+  extraFields,
+  buttonLabel,
+  theme = "dark",
+  zIndex = 9999
+}) {
+  const externalReplayUrl = extraFields?.sessionReplay;
+  const { t } = (0, import_react_i18next3.useTranslation)();
+  const [open, setOpen] = (0, import_react2.useState)(false);
+  const [hovered, setHovered] = (0, import_react2.useState)(false);
+  const colors = resolveTheme(theme);
+  const consoleCollector = (0, import_react2.useRef)(null);
+  const networkCollector = (0, import_react2.useRef)(null);
+  const replayEvents = (0, import_react2.useRef)([]);
+  const stopReplay = (0, import_react2.useRef)(null);
+  if (!consoleCollector.current) {
+    consoleCollector.current = createConsoleCollector();
+    consoleCollector.current.start();
+  }
+  if (!networkCollector.current) {
+    networkCollector.current = createNetworkCollector();
+    networkCollector.current.start();
+  }
+  (0, import_react2.useEffect)(() => {
+    const stopFn = (0, import_rrweb.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 () => {
+      consoleCollector.current?.stop();
+      networkCollector.current?.stop();
+      stopReplay.current?.();
+    };
+  }, []);
+  const label = buttonLabel ?? t("buttonLabel");
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+      "button",
+      {
+        onClick: () => setOpen(true),
+        onMouseEnter: () => setHovered(true),
+        onMouseLeave: () => setHovered(false),
+        "aria-label": label,
+        style: {
+          position: "fixed",
+          bottom: "20px",
+          right: "20px",
+          zIndex: zIndex - 1,
+          display: "flex",
+          alignItems: "center",
+          gap: "8px",
+          padding: "10px 18px",
+          borderRadius: "24px",
+          border: "none",
+          background: `linear-gradient(135deg, ${colors.accent}, ${colors.accentHover})`,
+          color: colors.buttonText,
+          fontSize: "13px",
+          fontWeight: 600,
+          cursor: "pointer",
+          boxShadow: hovered ? `0 0 28px ${colors.accent}55, 0 8px 24px rgba(0,0,0,0.3)` : `0 0 16px ${colors.accent}33, 0 4px 16px rgba(0,0,0,0.2)`,
+          fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+          transform: hovered ? "translateY(-2px)" : "translateY(0)",
+          transition: "transform 0.15s ease, box-shadow 0.15s ease",
+          letterSpacing: "0.01em"
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(SparkIcon2, {}),
+          label
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      FlintModal,
+      {
+        projectKey,
+        serverUrl,
+        user,
+        meta,
+        theme,
+        zIndex,
+        onClose: () => setOpen(false),
+        getEnvironment: collectEnvironment,
+        getConsoleLogs: () => consoleCollector.current?.getEntries() ?? [],
+        getNetworkErrors: () => networkCollector.current?.getEntries() ?? [],
+        getReplayEvents: () => [...replayEvents.current],
+        externalReplayUrl
+      }
+    )
+  ] });
+}
+function SparkIcon2() {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "svg",
+    {
+      width: "14",
+      height: "14",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2.2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M13 2L3 14h9l-1 8 10-12h-9l1-8z" })
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  FlintModal,
+  FlintWidget
+});
+//# sourceMappingURL=index.cjs.map