@tra-bilisim/report-issue 0.1.0

package/dist/index.js

@@ -0,0 +1,687 @@
+import { createVideoRecorder, CONSENT_VERSION } from './chunk-5S66KGBW.js';
+export { CONSENT_VERSION } from './chunk-5S66KGBW.js';
+import { cn, useReportIssueConfig, Button, useReportIssue } from './chunk-JMQUG5Q7.js';
+export { ReportIssueProvider, useReportIssue, useReportIssueConfig } from './chunk-JMQUG5Q7.js';
+import { getConsoleLogs, getNetworkLogs } from './chunk-EXDFVVYA.js';
+export { getConsoleLogs, getNetworkLogs, patchConsole } from './chunk-EXDFVVYA.js';
+import { toggleVideoMask } from './chunk-ZYF6UFBB.js';
+import { createPortal } from 'react-dom';
+import { X, ShieldCheck, Camera, Video, Film, FileText, Circle, Square, MessageSquareWarning, Check, ChevronDown } from 'lucide-react';
+import { forwardRef, lazy, useCallback, useState, useRef, useEffect, useMemo, Suspense } from 'react';
+import * as RadixDialog from '@radix-ui/react-dialog';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import * as RadixCheckbox from '@radix-ui/react-checkbox';
+import * as Popover from '@radix-ui/react-popover';
+
+var Dialog = RadixDialog.Root;
+var DialogContent = forwardRef(
+  ({ size = "md", showClose = true, className, children, ...rest }, ref) => /* @__PURE__ */ jsxs(RadixDialog.Portal, { children: [
+    /* @__PURE__ */ jsx(RadixDialog.Overlay, { className: "rpi-dialog__overlay", "data-slot": "dialog-overlay" }),
+    /* @__PURE__ */ jsxs(
+      RadixDialog.Content,
+      {
+        ref,
+        className: cn(
+          "rpi-root",
+          "rpi-dialog__content",
+          size === "lg" && "rpi-dialog__content--lg",
+          size === "xl" && "rpi-dialog__content--xl",
+          className
+        ),
+        ...rest,
+        children: [
+          children,
+          showClose && /* @__PURE__ */ jsx(RadixDialog.Close, { className: "rpi-dialog__close", "aria-label": "Close", children: /* @__PURE__ */ jsx(X, { size: 16 }) })
+        ]
+      }
+    )
+  ] })
+);
+DialogContent.displayName = "RpiDialogContent";
+var DialogHeader = ({ children }) => /* @__PURE__ */ jsx("div", { className: "rpi-dialog__header", children });
+var DialogTitle = ({ children, className }) => /* @__PURE__ */ jsx(RadixDialog.Title, { className: cn("rpi-dialog__title", className), children });
+var DialogDescription = ({ children }) => /* @__PURE__ */ jsx(RadixDialog.Description, { className: "rpi-dialog__desc", children });
+var DialogFooter = ({ children }) => /* @__PURE__ */ jsx("div", { className: "rpi-dialog__footer", children });
+var Input = forwardRef(
+  ({ textarea, className, rows, ...rest }, ref) => {
+    if (textarea) {
+      return /* @__PURE__ */ jsx(
+        "textarea",
+        {
+          ref,
+          rows,
+          className: cn("rpi-textarea", className),
+          ...rest
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref,
+        className: cn("rpi-input", className),
+        ...rest
+      }
+    );
+  }
+);
+Input.displayName = "RpiInput";
+var Checkbox = ({ id, checked, onCheckedChange, label }) => /* @__PURE__ */ jsxs("label", { htmlFor: id, className: "rpi-check", children: [
+  /* @__PURE__ */ jsx(
+    RadixCheckbox.Root,
+    {
+      id,
+      checked,
+      onCheckedChange: (value) => onCheckedChange?.(value === true),
+      className: "rpi-check__box",
+      children: /* @__PURE__ */ jsx(RadixCheckbox.Indicator, { children: /* @__PURE__ */ jsx(Check, { size: 13, strokeWidth: 3 }) })
+    }
+  ),
+  label != null && /* @__PURE__ */ jsx("span", { className: "rpi-check__label", children: label })
+] });
+var Select = ({
+  options,
+  value,
+  onChange,
+  placeholder,
+  isSearchable = false,
+  disabled = false,
+  t = (k) => k
+}) => {
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState("");
+  const searchRef = useRef(null);
+  const selected = options.find((o) => o.value === value);
+  const filtered = useMemo(() => {
+    if (!isSearchable || !query.trim()) return options;
+    const q = query.toLowerCase();
+    return options.filter((o) => o.label.toLowerCase().includes(q));
+  }, [options, query, isSearchable]);
+  const commit = (next) => {
+    onChange(next === value ? void 0 : next);
+    setOpen(false);
+    setQuery("");
+  };
+  return /* @__PURE__ */ jsxs(
+    Popover.Root,
+    {
+      open,
+      onOpenChange: (next) => {
+        if (disabled) return;
+        setOpen(next);
+        if (!next) setQuery("");
+      },
+      children: [
+        /* @__PURE__ */ jsx(Popover.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            disabled,
+            "data-placeholder": !selected,
+            className: "rpi-select__trigger",
+            children: [
+              /* @__PURE__ */ jsx("span", { children: selected ? selected.label : placeholder ?? "" }),
+              /* @__PURE__ */ jsx(ChevronDown, { size: 16 })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsxs(
+          Popover.Content,
+          {
+            className: "rpi-root rpi-select__panel",
+            align: "start",
+            sideOffset: 4,
+            onOpenAutoFocus: (e) => {
+              if (isSearchable) {
+                e.preventDefault();
+                searchRef.current?.focus();
+              }
+            },
+            children: [
+              isSearchable && /* @__PURE__ */ jsx(
+                "input",
+                {
+                  ref: searchRef,
+                  value: query,
+                  onChange: (e) => setQuery(e.target.value),
+                  placeholder: t("Search"),
+                  className: "rpi-select__search"
+                }
+              ),
+              /* @__PURE__ */ jsx("div", { className: "rpi-select__list", children: filtered.length === 0 ? /* @__PURE__ */ jsx("div", { className: "rpi-select__empty", children: t("No results") }) : filtered.map((o) => /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  "data-selected": o.value === value,
+                  className: cn("rpi-select__option"),
+                  onClick: () => commit(o.value),
+                  children: o.label
+                },
+                String(o.value)
+              )) })
+            ]
+          }
+        ) })
+      ]
+    }
+  );
+};
+function useReportIssueCapture() {
+  const collectConsoleLogs = useCallback(() => getConsoleLogs(), []);
+  const collectNetworkLogs = useCallback(() => getNetworkLogs(), []);
+  return { collectConsoleLogs, collectNetworkLogs };
+}
+function useVideoRecorder({ onComplete, onRecordingChange, maxDurationMs }) {
+  const [isRecording, setIsRecording] = useState(false);
+  const [elapsed, setElapsed] = useState(0);
+  const controllerRef = useRef(null);
+  const onCompleteRef = useRef(onComplete);
+  const onRecordingChangeRef = useRef(onRecordingChange);
+  useEffect(() => {
+    onCompleteRef.current = onComplete;
+  }, [onComplete]);
+  useEffect(() => {
+    onRecordingChangeRef.current = onRecordingChange;
+  }, [onRecordingChange]);
+  if (!controllerRef.current) {
+    controllerRef.current = createVideoRecorder(
+      {
+        onComplete: (file) => onCompleteRef.current(file),
+        onStateChange: (next) => {
+          setIsRecording(next);
+          onRecordingChangeRef.current?.(next);
+        },
+        onTick: (seconds) => setElapsed(seconds)
+      },
+      { maxDurationMs }
+    );
+  }
+  useEffect(() => () => controllerRef.current?.dispose(), []);
+  const start = useCallback(
+    () => controllerRef.current.start(),
+    []
+  );
+  const stop = useCallback(() => controllerRef.current.stop(), []);
+  return {
+    isRecording,
+    elapsed,
+    maxDuration: controllerRef.current.maxDurationSeconds,
+    start,
+    stop
+  };
+}
+var RecordingConsentDialog = ({ open, captureType = "video", onOpenChange, onAccept }) => {
+  const { t } = useReportIssueConfig();
+  const [checked, setChecked] = useState(false);
+  const isScreenshot = captureType === "screenshot";
+  useEffect(() => {
+    if (open) setChecked(false);
+  }, [open]);
+  const handleAccept = () => {
+    if (!checked) return;
+    onAccept({ accepted: true, version: CONSENT_VERSION, acceptedAt: (/* @__PURE__ */ new Date()).toISOString(), captureType });
+  };
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(DialogContent, { "data-report-issue-dialog": true, "data-report-ignore-capture": true, size: "lg", children: [
+    /* @__PURE__ */ jsxs(DialogHeader, { children: [
+      /* @__PURE__ */ jsxs(DialogTitle, { children: [
+        /* @__PURE__ */ jsx(ShieldCheck, { size: 20, className: "rpi-icon-primary" }),
+        isScreenshot ? t("Screenshot Consent") : t("Screen Recording Consent")
+      ] }),
+      /* @__PURE__ */ jsx(DialogDescription, { children: isScreenshot ? t("Before the screenshot is taken, please review which data is collected and give your consent.") : t("Before the recording starts, please review which data is collected and give your consent.") })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "rpi-consent__body", children: [
+      /* @__PURE__ */ jsx("p", { children: isScreenshot ? t("To diagnose the issue you reported, a screenshot of this application screen will be captured. Sensitive on-screen data is masked before capture.") : t("To diagnose the issue you reported, a short screen recording of only this tab will be captured. All on-screen data is masked during recording; you may temporarily reveal it.") }),
+      /* @__PURE__ */ jsxs("div", { className: "rpi-consent__group", children: [
+        /* @__PURE__ */ jsx("span", { style: { fontWeight: 500 }, children: t("Data that will be collected:") }),
+        /* @__PURE__ */ jsxs("ul", { className: "rpi-consent__list", children: [
+          /* @__PURE__ */ jsx("li", { children: isScreenshot ? t("A masked screenshot of this application screen") : t("A masked screen recording limited to this application tab") }),
+          /* @__PURE__ */ jsx("li", { children: t("Console and network logs of this session") }),
+          /* @__PURE__ */ jsx("li", { children: t("Session metadata (user, roles, browser, page)") })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("p", { className: "rpi-muted", children: t("This data is used solely to diagnose and resolve the reported issue and is shared only with the relevant technical team. You may withdraw your consent by not submitting the report.") })
+    ] }),
+    /* @__PURE__ */ jsx(
+      Checkbox,
+      {
+        id: "rpi-recording-consent",
+        checked,
+        onCheckedChange: setChecked,
+        label: t("I have read the above and give my explicit consent to the processing and sharing of this data.")
+      }
+    ),
+    /* @__PURE__ */ jsxs(DialogFooter, { children: [
+      /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: () => onOpenChange(false), children: t("Cancel") }),
+      /* @__PURE__ */ jsx(Button, { disabled: !checked, onClick: handleAccept, children: isScreenshot ? t("Take Screenshot") : t("Start Recording") })
+    ] })
+  ] }) });
+};
+var RecordingConsentDialog_default = RecordingConsentDialog;
+var AnnotationEditor = lazy(() => import('./AnnotationEditor-ILMYBTOG.js'));
+var getAppOrigin = () => typeof window !== "undefined" ? window.location.origin : "";
+var toAbsoluteUrl = (value) => {
+  if (!value) return "";
+  try {
+    return new URL(value, getAppOrigin()).href;
+  } catch {
+    return value;
+  }
+};
+var ReportIssueDialog = ({ open, onOpenChange }) => {
+  const {
+    config,
+    setIsCapturing,
+    isRecording,
+    setIsRecording,
+    setIsVideoMaskEnabled
+  } = useReportIssue();
+  const {
+    adapter,
+    t,
+    locale,
+    toast,
+    environmentResolver,
+    getCurrentUrl,
+    maxFiles,
+    maxFileSizeBytes,
+    maxRecordingSeconds
+  } = config;
+  const { collectConsoleLogs, collectNetworkLogs } = useReportIssueCapture();
+  const [view, setView] = useState("form");
+  const [editorImage, setEditorImage] = useState(null);
+  const [consentOpen, setConsentOpen] = useState(false);
+  const consentRef = useRef(null);
+  const [screenshotConsentOpen, setScreenshotConsentOpen] = useState(false);
+  const screenshotConsentRef = useRef(null);
+  const [attachments, setAttachments] = useState([]);
+  const [useCurrentPage, setUseCurrentPage] = useState(true);
+  const [customPage, setCustomPage] = useState("");
+  const [category, setCategory] = useState(null);
+  const [categoryOptions, setCategoryOptions] = useState([]);
+  const [description, setDescription] = useState("");
+  const [submitting, setSubmitting] = useState(false);
+  const fileInputRef = useRef(null);
+  const currentUrl = getCurrentUrl();
+  useEffect(() => {
+    if (!open || !adapter.getCategories) return;
+    let active = true;
+    Promise.resolve(adapter.getCategories()).then((list) => {
+      if (active) setCategoryOptions(Array.isArray(list) ? list : []);
+    }).catch(() => void 0);
+    return () => {
+      active = false;
+    };
+  }, [open, adapter]);
+  const localizedCategoryOptions = useMemo(
+    () => [...categoryOptions].map((o) => ({ label: t(o.label), value: o.value })).sort((a, b) => a.label.localeCompare(b.label, locale, { sensitivity: "base" })),
+    [categoryOptions, locale, t]
+  );
+  const pageOptions = useMemo(() => {
+    const raw = typeof adapter.pageOptions === "function" ? adapter.pageOptions() : adapter.pageOptions;
+    return (raw ?? []).slice().sort((a, b) => a.label.localeCompare(b.label));
+  }, [adapter]);
+  const detectKind = (file) => {
+    if (file.type.startsWith("image/")) return "image";
+    if (file.type.startsWith("video/")) return "video";
+    return "other";
+  };
+  const addFiles = useCallback((files, origin = "upload") => {
+    setAttachments((prev) => {
+      const next = [...prev];
+      let limitHit = false;
+      files.forEach((file) => {
+        if (next.length >= maxFiles) {
+          limitHit = true;
+          return;
+        }
+        if (file.size > maxFileSizeBytes) {
+          toast.error(t("{name} exceeds the size limit.").replace("{name}", file.name));
+          return;
+        }
+        next.push({ id: `${file.name}-${Date.now()}-${Math.random()}`, file, url: URL.createObjectURL(file), kind: detectKind(file), origin });
+      });
+      if (limitHit) toast.error(t("You can attach at most {count} files.").replace("{count}", String(maxFiles)));
+      return next;
+    });
+  }, [maxFiles, maxFileSizeBytes, t, toast]);
+  const removeAttachment = (id) => {
+    setAttachments((prev) => {
+      const target = prev.find((a) => a.id === id);
+      if (target) URL.revokeObjectURL(target.url);
+      return prev.filter((a) => a.id !== id);
+    });
+  };
+  const captureScreenshot = useCallback(async () => {
+    setIsCapturing(true);
+    try {
+      const { captureMaskedScreenshot } = await import('./screenshot-BQPXCSLD.js');
+      const dataUrl = await captureMaskedScreenshot();
+      setEditorImage(dataUrl);
+      await new Promise((resolve) => {
+        requestAnimationFrame(() => {
+          requestAnimationFrame(() => resolve());
+        });
+      });
+      setView("editor");
+    } catch {
+      toast.error(t("Failed to capture screenshot."));
+    } finally {
+      setIsCapturing(false);
+    }
+  }, [setIsCapturing, t, toast]);
+  const handleScreenshotConsentAccept = useCallback((consent) => {
+    screenshotConsentRef.current = consent;
+    setScreenshotConsentOpen(false);
+    captureScreenshot();
+  }, [captureScreenshot]);
+  const handleEditorConfirm = useCallback((file) => {
+    addFiles([file], "screenshot");
+    setEditorImage(null);
+    setView("form");
+  }, [addFiles]);
+  const handleEditorCancel = useCallback(() => {
+    setEditorImage(null);
+    setView("form");
+  }, []);
+  const handleRecordingChange = useCallback((next) => {
+    setIsRecording(next);
+    if (!next) {
+      setIsVideoMaskEnabled(false);
+      toggleVideoMask(false);
+    }
+  }, [setIsRecording, setIsVideoMaskEnabled]);
+  const { isRecording: recording, elapsed, maxDuration, start, stop } = useVideoRecorder({
+    onComplete: (file) => {
+      addFiles([file], "recording");
+      onOpenChange(true);
+    },
+    onRecordingChange: handleRecordingChange,
+    maxDurationMs: maxRecordingSeconds * 1e3
+  });
+  const handleStartRecording = useCallback(async () => {
+    setIsVideoMaskEnabled(true);
+    toggleVideoMask(true);
+    onOpenChange(false);
+    const result = await start();
+    if (result !== "started") {
+      handleRecordingChange(false);
+      onOpenChange(true);
+      const message = result === "unsupported" ? t("Screen recording is only supported on Chrome and Edge browsers.") : result === "wrong-surface" ? t("Only this application tab can be recorded. Please share this tab.") : t("Screen recording permission was denied.");
+      toast.error(message);
+    }
+  }, [start, setIsVideoMaskEnabled, handleRecordingChange, onOpenChange, t, toast]);
+  const handleConsentAccept = useCallback((consent) => {
+    consentRef.current = consent;
+    setConsentOpen(false);
+    handleStartRecording();
+  }, [handleStartRecording]);
+  const resetForm = useCallback(() => {
+    setAttachments((prev) => {
+      prev.forEach((a) => URL.revokeObjectURL(a.url));
+      return [];
+    });
+    setUseCurrentPage(true);
+    setCustomPage("");
+    setCategory(null);
+    setDescription("");
+    setView("form");
+    setEditorImage(null);
+    consentRef.current = null;
+    screenshotConsentRef.current = null;
+  }, []);
+  const handleSubmit = useCallback(async () => {
+    const page = useCurrentPage ? currentUrl : toAbsoluteUrl(customPage.trim());
+    if (!page) {
+      toast.error(t("Please specify the page."));
+      return;
+    }
+    setSubmitting(true);
+    try {
+      const consoleLogs = collectConsoleLogs();
+      const networkLogs = collectNetworkLogs();
+      const environment = environmentResolver(page);
+      const hasRecording = attachments.some((a) => a.origin === "recording");
+      const hasScreenshot = attachments.some((a) => a.origin === "screenshot");
+      const recordingConsent = hasRecording ? consentRef.current : null;
+      const screenshotConsent = hasScreenshot ? screenshotConsentRef.current : null;
+      const baseMetadata = {
+        userAgent: navigator.userAgent,
+        screenResolution: `${window.screen.width}x${window.screen.height}`,
+        timestamp: (/* @__PURE__ */ new Date()).toISOString()
+      };
+      const provided = adapter.getMetadata ? await adapter.getMetadata() : {};
+      const metadata = { ...baseMetadata, ...provided };
+      const payload = {
+        files: attachments.map((a) => a.file),
+        page,
+        environment,
+        categoryId: category,
+        description: description.trim() || null,
+        consoleLogs,
+        networkLogs,
+        recordingConsent,
+        screenshotConsent,
+        metadata
+      };
+      const formData = new FormData();
+      attachments.forEach((a) => formData.append("files", a.file, a.file.name));
+      formData.append("page", page);
+      formData.append("environment", environment);
+      if (category) formData.append("categoryId", String(category));
+      if (description.trim()) formData.append("description", description.trim());
+      formData.append("consoleLogs", JSON.stringify(consoleLogs));
+      formData.append("networkLogs", JSON.stringify(networkLogs));
+      if (recordingConsent) formData.append("recordingConsent", JSON.stringify(recordingConsent));
+      if (screenshotConsent) formData.append("screenshotConsent", JSON.stringify(screenshotConsent));
+      formData.append("metadata", JSON.stringify(metadata));
+      const result = await adapter.submit(payload, formData);
+      if (result.ok) {
+        toast.success(t(result.message ?? "Your report has been submitted. Thank you!"));
+        resetForm();
+        onOpenChange(false);
+      } else {
+        toast.error(t(result.message ?? "An error occurred!"));
+      }
+    } catch {
+      toast.error(t("An error occurred!"));
+    } finally {
+      setSubmitting(false);
+    }
+  }, [
+    attachments,
+    useCurrentPage,
+    customPage,
+    currentUrl,
+    category,
+    description,
+    adapter,
+    environmentResolver,
+    collectConsoleLogs,
+    collectNetworkLogs,
+    onOpenChange,
+    resetForm,
+    t,
+    toast
+  ]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Dialog, { open, onOpenChange: (val) => {
+      if (!recording) onOpenChange(val);
+    }, children: /* @__PURE__ */ jsx(
+      DialogContent,
+      {
+        "data-report-issue-dialog": true,
+        "data-report-ignore-capture": true,
+        showClose: false,
+        className: view === "editor" ? "rpi-dialog__content--editor" : void 0,
+        children: view === "form" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs(DialogHeader, { children: [
+            /* @__PURE__ */ jsx(DialogTitle, { children: t("Report an Issue") }),
+            /* @__PURE__ */ jsx(DialogDescription, { children: t("Describe the problem and attach screenshots or a screen recording.") })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "rpi-form-body", children: [
+            /* @__PURE__ */ jsxs("div", { className: "rpi-col", children: [
+              /* @__PURE__ */ jsx("span", { className: "rpi-field-label", children: t("Attachments") }),
+              /* @__PURE__ */ jsxs("div", { className: "rpi-row-wrap", children: [
+                /* @__PURE__ */ jsxs(Button, { variant: "outline", onClick: () => setScreenshotConsentOpen(true), children: [
+                  /* @__PURE__ */ jsx(Camera, { size: 16 }),
+                  t("Take a Screenshot")
+                ] }),
+                /* @__PURE__ */ jsxs(Button, { variant: "outline", onClick: () => setConsentOpen(true), children: [
+                  /* @__PURE__ */ jsx(Video, { size: 16 }),
+                  t("Record Video")
+                ] }),
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    ref: fileInputRef,
+                    type: "file",
+                    multiple: true,
+                    accept: "image/*,video/*",
+                    style: { display: "none" },
+                    onChange: (e) => {
+                      if (e.target.files) addFiles(Array.from(e.target.files));
+                      e.target.value = "";
+                    }
+                  }
+                )
+              ] }),
+              attachments.length > 0 && /* @__PURE__ */ jsx("div", { className: "rpi-row-wrap", style: { marginTop: 4 }, children: attachments.map((a) => /* @__PURE__ */ jsxs("div", { className: "rpi-attach", children: [
+                a.kind === "image" && /* @__PURE__ */ jsx("img", { src: a.url, alt: a.file.name }),
+                a.kind === "video" && /* @__PURE__ */ jsx("video", { src: a.url }),
+                a.kind === "video" && /* @__PURE__ */ jsx(Film, { size: 24, className: "rpi-attach__badge" }),
+                a.kind === "other" && /* @__PURE__ */ jsx(FileText, { size: 28, className: "rpi-muted" }),
+                /* @__PURE__ */ jsx("button", { type: "button", onClick: () => removeAttachment(a.id), className: "rpi-attach__remove", children: /* @__PURE__ */ jsx(X, { size: 12 }) })
+              ] }, a.id)) })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "rpi-col", children: [
+              /* @__PURE__ */ jsx("span", { className: "rpi-field-label", children: t("The page where the issue occurred") }),
+              /* @__PURE__ */ jsx(
+                Checkbox,
+                {
+                  id: "rpi-use-current-page",
+                  checked: useCurrentPage,
+                  onCheckedChange: (val) => {
+                    setUseCurrentPage(val);
+                    if (val) setCustomPage("");
+                  },
+                  label: `${t("Current page")}: ${currentUrl}`
+                }
+              ),
+              pageOptions.length > 0 && /* @__PURE__ */ jsx(
+                Select,
+                {
+                  placeholder: t("Enter the page where the issue occurred"),
+                  options: pageOptions,
+                  value: customPage || void 0,
+                  onChange: (val) => setCustomPage(typeof val === "string" ? val : ""),
+                  isSearchable: true,
+                  disabled: useCurrentPage,
+                  t
+                }
+              )
+            ] }),
+            localizedCategoryOptions.length > 0 && /* @__PURE__ */ jsxs("div", { className: "rpi-col", children: [
+              /* @__PURE__ */ jsx("span", { className: "rpi-field-label", children: `${t("Category")} (${t("optional")})` }),
+              /* @__PURE__ */ jsx(
+                Select,
+                {
+                  placeholder: t("Select"),
+                  options: localizedCategoryOptions,
+                  value: category ?? void 0,
+                  onChange: (val) => setCategory(typeof val === "number" ? val : null),
+                  t
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "rpi-col", children: [
+              /* @__PURE__ */ jsx("span", { className: "rpi-field-label", children: `${t("Description")} (${t("optional")})` }),
+              /* @__PURE__ */ jsx(
+                Input,
+                {
+                  textarea: true,
+                  rows: 3,
+                  placeholder: t("Describe what happened..."),
+                  value: description,
+                  onChange: (e) => setDescription(e.target.value),
+                  "data-report-mask-ignore": true
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs(DialogFooter, { children: [
+            /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: () => onOpenChange(false), children: t("Cancel") }),
+            /* @__PURE__ */ jsx(Button, { loading: submitting, onClick: handleSubmit, children: t("Submit") })
+          ] })
+        ] }) : editorImage && /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
+          AnnotationEditor,
+          {
+            imageDataUrl: editorImage,
+            onConfirm: handleEditorConfirm,
+            onCancel: handleEditorCancel
+          }
+        ) })
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      RecordingConsentDialog_default,
+      {
+        open: consentOpen,
+        captureType: "video",
+        onOpenChange: setConsentOpen,
+        onAccept: handleConsentAccept
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      RecordingConsentDialog_default,
+      {
+        open: screenshotConsentOpen,
+        captureType: "screenshot",
+        onOpenChange: setScreenshotConsentOpen,
+        onAccept: handleScreenshotConsentAccept
+      }
+    ),
+    (isRecording || recording) && createPortal(
+      /* @__PURE__ */ jsxs("div", { "data-report-mask-ignore": true, "data-report-ignore-capture": true, className: "rpi-root rpi-rec", children: [
+        /* @__PURE__ */ jsxs("div", { className: "rpi-rec__row", children: [
+          /* @__PURE__ */ jsxs("span", { className: "rpi-rec__label", children: [
+            /* @__PURE__ */ jsx(Circle, { size: 12, className: "rpi-rec__dot" }),
+            "REC"
+          ] }),
+          /* @__PURE__ */ jsx("span", { className: "rpi-rec__time", children: `00:${String(elapsed).padStart(2, "0")} / 00:${String(maxDuration).padStart(2, "0")}` })
+        ] }),
+        /* @__PURE__ */ jsxs(Button, { color: "error", size: "sm", onClick: stop, children: [
+          /* @__PURE__ */ jsx(Square, { size: 16 }),
+          t("Stop")
+        ] })
+      ] }),
+      document.body
+    )
+  ] });
+};
+var ReportIssueDialog_default = ReportIssueDialog;
+var FloatingReportButton = () => {
+  const { isReportOpen, setIsReportOpen, isRecording, config } = useReportIssue();
+  const { t } = config;
+  return createPortal(
+    /* @__PURE__ */ jsxs(Fragment, { children: [
+      !isRecording && !isReportOpen && /* @__PURE__ */ jsx("div", { "data-report-ignore-capture": true, className: "rpi-root rpi-fab", children: /* @__PURE__ */ jsxs(
+        Button,
+        {
+          color: "error",
+          onClick: () => setIsReportOpen(true),
+          title: t("Report an Issue"),
+          children: [
+            t("Report an Issue"),
+            /* @__PURE__ */ jsx(MessageSquareWarning, { size: 18 }),
+            /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "rpi-fab__dot" })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsx(ReportIssueDialog_default, { open: isReportOpen, onOpenChange: setIsReportOpen })
+    ] }),
+    document.body
+  );
+};
+var FloatingReportButton_default = FloatingReportButton;
+
+export { FloatingReportButton_default as FloatingReportButton, RecordingConsentDialog_default as RecordingConsentDialog, ReportIssueDialog_default as ReportIssueDialog, useReportIssueCapture, useVideoRecorder };

package/dist/screenshot-BQPXCSLD.js

@@ -0,0 +1,2 @@
+export { captureMaskedScreenshot } from './chunk-KY2IRP36.js';
+import './chunk-ZYF6UFBB.js';