glitchgrab 1.10.0 → 1.12.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/README.md +4 -1
  2. package/dist/index.d.mts +13 -3
  3. package/dist/index.d.ts +13 -3
  4. package/dist/index.js +618 -228
  5. package/dist/index.js.map +1 -1
  6. package/dist/index.mjs +618 -228
  7. package/dist/index.mjs.map +1 -1
  8. package/package.json +1 -1
package/dist/index.mjs CHANGED
@@ -500,9 +500,9 @@ function GlitchgrabProviderInner({
500
500
  },
501
501
  []
502
502
  );
503
- const openReportDialog = useCallback(() => {
503
+ const openReportDialog = useCallback((options) => {
504
504
  if (typeof window !== "undefined") {
505
- window.dispatchEvent(new CustomEvent("glitchgrab:open-report"));
505
+ window.dispatchEvent(new CustomEvent("glitchgrab:open-report", { detail: options }));
506
506
  }
507
507
  }, []);
508
508
  return /* @__PURE__ */ jsx(
@@ -575,6 +575,9 @@ function ReportButton({
575
575
  position = "bottom-right",
576
576
  label = "Report Bug",
577
577
  className,
578
+ variant = "classic",
579
+ showSeverity = true,
580
+ types,
578
581
  children
579
582
  }) {
580
583
  var _a, _b;
@@ -588,8 +591,12 @@ function ReportButton({
588
591
  const fileInputRef = useRef2(null);
589
592
  const modalRef = useRef2(null);
590
593
  const glitchgrab = useGlitchgrabSafe();
594
+ const [step, setStep] = useState2(1);
595
+ const [reportType, setReportType] = useState2("BUG");
596
+ const [severity, setSeverity] = useState2("medium");
597
+ const availableTypes = types != null ? types : ["BUG", "FEATURE_REQUEST", "QUESTION", "OTHER"];
591
598
  if (!glitchgrab) return null;
592
- const { reportBug } = glitchgrab;
599
+ const { reportBug, report } = glitchgrab;
593
600
  const isDark = useIsDark();
594
601
  const t = getTheme(isDark);
595
602
  const handleFileUpload = (e) => {
@@ -624,6 +631,10 @@ function ReportButton({
624
631
  const handleOpen = async () => {
625
632
  setCapturing(true);
626
633
  setSubmitted(false);
634
+ if (variant === "stepper" && availableTypes.length === 1) {
635
+ setReportType(availableTypes[0]);
636
+ setStep(2);
637
+ }
627
638
  try {
628
639
  const { default: html2canvas } = await import("html2canvas-pro");
629
640
  const canvas = await html2canvas(document.body, {
@@ -639,35 +650,53 @@ function ReportButton({
639
650
  setIsOpen(true);
640
651
  };
641
652
  useEffect2(() => {
642
- const handler = () => {
643
- if (!isOpen) handleOpen();
653
+ const handler = (e) => {
654
+ if (isOpen) return;
655
+ const detail = e.detail;
656
+ if (detail == null ? void 0 : detail.description) setDescription(detail.description);
657
+ if (detail == null ? void 0 : detail.type) {
658
+ setReportType(detail.type);
659
+ if (variant === "stepper") setStep(2);
660
+ }
661
+ handleOpen();
644
662
  };
645
663
  window.addEventListener("glitchgrab:open-report", handler);
646
664
  return () => window.removeEventListener("glitchgrab:open-report", handler);
647
- }, [isOpen, handleOpen]);
665
+ }, [isOpen, handleOpen, variant]);
648
666
  useEffect2(() => {
649
667
  if (!isOpen) return;
650
668
  const handleEsc = (e) => {
651
669
  if (e.key === "Escape") {
652
670
  if (previewOpen) setPreviewOpen(false);
653
- else setIsOpen(false);
671
+ else handleClose();
654
672
  }
655
673
  };
656
674
  document.addEventListener("keydown", handleEsc);
657
675
  return () => document.removeEventListener("keydown", handleEsc);
658
676
  }, [isOpen, previewOpen]);
677
+ const handleClose = () => {
678
+ setIsOpen(false);
679
+ setStep(1);
680
+ setReportType("BUG");
681
+ setSeverity("medium");
682
+ };
659
683
  const handleSubmit = async () => {
660
684
  try {
661
685
  if (!description.trim() || isSubmitting) return;
662
686
  setIsSubmitting(true);
663
- const result = await reportBug(description.trim(), screenshot ? { screenshot } : void 0);
687
+ const metadata = {};
688
+ if (screenshot) metadata.screenshot = screenshot;
689
+ if (variant === "stepper" && showSeverity && reportType === "BUG") {
690
+ metadata.severity = severity;
691
+ }
692
+ const result = variant === "stepper" ? await report(reportType, description.trim(), Object.keys(metadata).length > 0 ? metadata : void 0) : await reportBug(description.trim(), Object.keys(metadata).length > 0 ? metadata : void 0);
664
693
  if (result) {
665
694
  setSubmitted(true);
666
695
  setDescription("");
667
696
  setScreenshot(null);
668
697
  setTimeout(() => {
669
698
  setSubmitted(false);
670
- setIsOpen(false);
699
+ handleClose();
671
700
  }, 2e3);
672
701
  }
673
702
  setIsSubmitting(false);
@@ -709,7 +738,7 @@ function ReportButton({
709
738
  fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'
710
739
  },
711
740
  onClick: () => {
712
- if (!previewOpen) setIsOpen(false);
741
+ if (!previewOpen) handleClose();
713
742
  },
714
743
  children: /* @__PURE__ */ jsxs(
715
744
  "div",
@@ -731,54 +760,90 @@ function ReportButton({
731
760
  isolation: "isolate"
732
761
  },
733
762
  children: [
734
- /* @__PURE__ */ jsx2(
763
+ /* @__PURE__ */ jsxs(
735
764
  "div",
736
765
  {
737
766
  style: {
738
767
  padding: "16px 16px 12px",
739
768
  borderBottom: `1px solid ${t.border}`
740
769
  },
741
- children: /* @__PURE__ */ jsxs(
742
- "div",
743
- {
744
- style: {
745
- display: "flex",
746
- justifyContent: "space-between",
747
- alignItems: "center"
748
- },
749
- children: [
750
- /* @__PURE__ */ jsx2(
751
- "span",
752
- {
753
- style: {
754
- fontSize: "15px",
755
- fontWeight: 600,
756
- color: t.text
757
- },
758
- children: "Report a Bug"
759
- }
760
- ),
761
- /* @__PURE__ */ jsx2(
762
- "button",
763
- {
764
- type: "button",
765
- onClick: () => setIsOpen(false),
766
- style: {
767
- background: "none",
768
- border: "none",
769
- cursor: "pointer",
770
- padding: "4px",
771
- display: "flex",
772
- alignItems: "center",
773
- justifyContent: "center"
774
- },
775
- "aria-label": "Close",
776
- children: /* @__PURE__ */ jsx2("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", style: { display: "block" }, children: /* @__PURE__ */ jsx2("path", { d: "M4 4L12 12M12 4L4 12", stroke: t.textMuted, strokeWidth: "2", strokeLinecap: "round" }) })
777
- }
778
- )
779
- ]
780
- }
781
- )
770
+ children: [
771
+ /* @__PURE__ */ jsxs(
772
+ "div",
773
+ {
774
+ style: {
775
+ display: "flex",
776
+ justifyContent: "space-between",
777
+ alignItems: "center"
778
+ },
779
+ children: [
780
+ /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
781
+ variant === "stepper" && step > 1 && /* @__PURE__ */ jsx2(
782
+ "button",
783
+ {
784
+ type: "button",
785
+ onClick: () => setStep((s) => s - 1),
786
+ style: {
787
+ background: "none",
788
+ border: "none",
789
+ cursor: "pointer",
790
+ padding: "2px",
791
+ display: "flex",
792
+ alignItems: "center"
793
+ },
794
+ "aria-label": "Back",
795
+ children: /* @__PURE__ */ jsx2("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsx2("path", { d: "M10 3L5 8L10 13", stroke: t.textMuted, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
796
+ }
797
+ ),
798
+ /* @__PURE__ */ jsx2(
799
+ "span",
800
+ {
801
+ style: {
802
+ fontSize: "15px",
803
+ fontWeight: 600,
804
+ color: t.text
805
+ },
806
+ children: variant === "stepper" ? step === 1 ? "What's on your mind?" : step === 2 ? "Tell us more" : "Review & Send" : "Report a Bug"
807
+ }
808
+ )
809
+ ] }),
810
+ /* @__PURE__ */ jsx2(
811
+ "button",
812
+ {
813
+ type: "button",
814
+ onClick: handleClose,
815
+ style: {
816
+ background: "none",
817
+ border: "none",
818
+ cursor: "pointer",
819
+ padding: "4px",
820
+ display: "flex",
821
+ alignItems: "center",
822
+ justifyContent: "center"
823
+ },
824
+ "aria-label": "Close",
825
+ children: /* @__PURE__ */ jsx2("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", style: { display: "block" }, children: /* @__PURE__ */ jsx2("path", { d: "M4 4L12 12M12 4L4 12", stroke: t.textMuted, strokeWidth: "2", strokeLinecap: "round" }) })
826
+ }
827
+ )
828
+ ]
829
+ }
830
+ ),
831
+ variant === "stepper" && /* @__PURE__ */ jsx2("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", gap: "0", marginTop: "12px" }, children: [1, 2, 3].map((s, i) => /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center" }, children: [
832
+ /* @__PURE__ */ jsx2("div", { style: {
833
+ width: "8px",
834
+ height: "8px",
835
+ borderRadius: "50%",
836
+ backgroundColor: s <= step ? t.accent : t.inputBorder,
837
+ transition: "background-color 0.2s ease"
838
+ } }),
839
+ i < 2 && /* @__PURE__ */ jsx2("div", { style: {
840
+ width: "40px",
841
+ height: "2px",
842
+ backgroundColor: s < step ? t.accent : t.inputBorder,
843
+ transition: "background-color 0.2s ease"
844
+ } })
845
+ ] }, s)) })
846
+ ]
782
847
  }
783
848
  ),
784
849
  /* @__PURE__ */ jsx2("div", { style: { padding: "16px" }, children: submitted ? /* @__PURE__ */ jsx2(
@@ -791,201 +856,474 @@ function ReportButton({
791
856
  fontSize: "14px",
792
857
  fontWeight: 500
793
858
  },
794
- children: "Bug report sent. Thank you!"
859
+ children: variant === "stepper" ? `${getTypeLabel(reportType)} sent. Thank you!` : "Bug report sent. Thank you!"
795
860
  }
796
- ) : /* @__PURE__ */ jsxs(Fragment2, { children: [
797
- screenshot && /* @__PURE__ */ jsxs("div", { style: { marginBottom: "10px", position: "relative" }, children: [
798
- /* @__PURE__ */ jsx2(
799
- "img",
800
- {
801
- src: screenshot,
802
- alt: "Page screenshot",
803
- onClick: () => setPreviewOpen(true),
804
- style: {
805
- width: "100%",
806
- borderRadius: "6px",
807
- border: `1px solid ${t.border}`,
808
- maxHeight: "120px",
809
- objectFit: "cover",
810
- objectPosition: "top",
811
- cursor: "pointer"
812
- }
813
- }
814
- ),
815
- /* @__PURE__ */ jsx2(
861
+ ) : variant === "stepper" ? (
862
+ /* ─── Stepper Flow ─── */
863
+ /* @__PURE__ */ jsxs(Fragment2, { children: [
864
+ step === 1 && /* @__PURE__ */ jsx2("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: "8px" }, children: availableTypes.map((type) => /* @__PURE__ */ jsxs(
816
865
  "button",
817
866
  {
818
867
  type: "button",
819
- onClick: () => setScreenshot(null),
868
+ onClick: () => {
869
+ setReportType(type);
870
+ setStep(2);
871
+ },
820
872
  style: {
821
- position: "absolute",
822
- top: "4px",
823
- right: "4px",
824
- background: "rgba(0,0,0,0.6)",
825
- border: "none",
826
- borderRadius: "50%",
827
- width: "20px",
828
- height: "20px",
829
- cursor: "pointer",
830
873
  display: "flex",
874
+ flexDirection: "column",
831
875
  alignItems: "center",
832
- justifyContent: "center"
876
+ gap: "8px",
877
+ padding: "16px 8px",
878
+ borderRadius: "8px",
879
+ border: `1px solid ${t.inputBorder}`,
880
+ background: t.inputBg,
881
+ cursor: "pointer",
882
+ color: t.text,
883
+ fontFamily: "inherit",
884
+ transition: "border-color 0.15s ease"
833
885
  },
834
- "aria-label": "Remove screenshot",
835
- children: /* @__PURE__ */ jsx2("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", children: /* @__PURE__ */ jsx2("path", { d: "M1 1L9 9M9 1L1 9", stroke: "#fff", strokeWidth: "1.5", strokeLinecap: "round" }) })
836
- }
837
- ),
838
- /* @__PURE__ */ jsxs(
839
- "div",
840
- {
841
- style: {
842
- position: "absolute",
843
- bottom: "4px",
844
- left: "6px",
845
- right: "6px",
846
- display: "flex",
847
- justifyContent: "space-between",
848
- alignItems: "center"
886
+ onMouseEnter: (e) => {
887
+ e.currentTarget.style.borderColor = t.accent;
888
+ },
889
+ onMouseLeave: (e) => {
890
+ e.currentTarget.style.borderColor = t.inputBorder;
849
891
  },
850
892
  children: [
851
- /* @__PURE__ */ jsxs(
852
- "span",
853
- {
854
- style: {
855
- background: "rgba(0,0,0,0.6)",
856
- color: "#fff",
857
- fontSize: "10px",
858
- padding: "2px 6px",
859
- borderRadius: "4px"
860
- },
861
- children: [
862
- "Screenshot (",
863
- Math.round(screenshot.length * 0.75 / 1024),
864
- "KB) \u2014 click to preview"
865
- ]
893
+ getTypeIcon(type, t.accent),
894
+ /* @__PURE__ */ jsx2("span", { style: { fontSize: "13px", fontWeight: 600 }, children: getTypeLabel(type) }),
895
+ /* @__PURE__ */ jsx2("span", { style: { fontSize: "11px", color: t.textMuted, lineHeight: "1.3" }, children: getTypeSubtitle(type) })
896
+ ]
897
+ },
898
+ type
899
+ )) }),
900
+ step === 2 && /* @__PURE__ */ jsxs(Fragment2, { children: [
901
+ /* @__PURE__ */ jsx2(
902
+ "textarea",
903
+ {
904
+ value: description,
905
+ onChange: (e) => setDescription(e.target.value),
906
+ placeholder: getPlaceholder(reportType),
907
+ style: {
908
+ width: "100%",
909
+ minHeight: "100px",
910
+ padding: "10px 12px",
911
+ borderRadius: "8px",
912
+ border: `1px solid ${t.inputBorder}`,
913
+ fontSize: "14px",
914
+ fontFamily: "inherit",
915
+ resize: "vertical",
916
+ outline: "none",
917
+ boxSizing: "border-box",
918
+ color: t.text,
919
+ backgroundColor: t.inputBg
920
+ },
921
+ onFocus: (e) => {
922
+ e.target.style.borderColor = t.accent;
923
+ },
924
+ onBlur: (e) => {
925
+ e.target.style.borderColor = t.inputBorder;
926
+ },
927
+ autoFocus: true
928
+ }
929
+ ),
930
+ showSeverity && reportType === "BUG" && /* @__PURE__ */ jsxs("div", { style: { marginTop: "10px" }, children: [
931
+ /* @__PURE__ */ jsx2("span", { style: { fontSize: "12px", color: t.textMuted, marginBottom: "6px", display: "block" }, children: "Severity" }),
932
+ /* @__PURE__ */ jsx2("div", { style: { display: "flex", gap: "6px" }, children: ["low", "medium", "high"].map((s) => /* @__PURE__ */ jsx2(
933
+ "button",
934
+ {
935
+ type: "button",
936
+ onClick: () => setSeverity(s),
937
+ style: {
938
+ flex: 1,
939
+ padding: "6px 0",
940
+ borderRadius: "6px",
941
+ border: `1px solid ${severity === s ? t.accent : t.inputBorder}`,
942
+ background: severity === s ? t.accent : "transparent",
943
+ color: severity === s ? t.accentText : t.text,
944
+ fontSize: "12px",
945
+ fontWeight: 600,
946
+ cursor: "pointer",
947
+ fontFamily: "inherit",
948
+ textTransform: "capitalize",
949
+ transition: "all 0.15s ease"
950
+ },
951
+ children: s
952
+ },
953
+ s
954
+ )) })
955
+ ] }),
956
+ /* @__PURE__ */ jsx2(
957
+ "button",
958
+ {
959
+ type: "button",
960
+ onClick: () => setStep(3),
961
+ disabled: !description.trim(),
962
+ style: {
963
+ marginTop: "12px",
964
+ width: "100%",
965
+ padding: "10px",
966
+ borderRadius: "8px",
967
+ border: "none",
968
+ backgroundColor: !description.trim() ? t.bgSecondary : t.accent,
969
+ color: !description.trim() ? t.textMuted : t.accentText,
970
+ fontSize: "14px",
971
+ fontWeight: 600,
972
+ cursor: !description.trim() ? "not-allowed" : "pointer",
973
+ fontFamily: "inherit",
974
+ transition: "background-color 0.15s ease"
975
+ },
976
+ children: "Next"
977
+ }
978
+ )
979
+ ] }),
980
+ step === 3 && /* @__PURE__ */ jsxs(Fragment2, { children: [
981
+ /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "6px", flexWrap: "wrap", marginBottom: "12px" }, children: [
982
+ /* @__PURE__ */ jsxs("span", { style: {
983
+ display: "inline-flex",
984
+ alignItems: "center",
985
+ gap: "4px",
986
+ padding: "4px 10px",
987
+ borderRadius: "12px",
988
+ fontSize: "12px",
989
+ fontWeight: 600,
990
+ backgroundColor: t.bgSecondary,
991
+ color: t.text,
992
+ border: `1px solid ${t.border}`
993
+ }, children: [
994
+ getTypeIcon(reportType, t.accent, 12),
995
+ getTypeLabel(reportType)
996
+ ] }),
997
+ showSeverity && reportType === "BUG" && /* @__PURE__ */ jsx2("span", { style: {
998
+ display: "inline-flex",
999
+ alignItems: "center",
1000
+ padding: "4px 10px",
1001
+ borderRadius: "12px",
1002
+ fontSize: "12px",
1003
+ fontWeight: 600,
1004
+ backgroundColor: severity === "high" ? "#fef2f2" : severity === "medium" ? "#fffbeb" : "#f0fdf4",
1005
+ color: severity === "high" ? "#dc2626" : severity === "medium" ? "#d97706" : "#16a34a",
1006
+ border: `1px solid ${severity === "high" ? "#fecaca" : severity === "medium" ? "#fde68a" : "#bbf7d0"}`,
1007
+ textTransform: "capitalize"
1008
+ }, children: severity })
1009
+ ] }),
1010
+ /* @__PURE__ */ jsx2("div", { style: {
1011
+ padding: "10px 12px",
1012
+ borderRadius: "8px",
1013
+ border: `1px solid ${t.inputBorder}`,
1014
+ backgroundColor: t.inputBg,
1015
+ fontSize: "13px",
1016
+ color: t.text,
1017
+ marginBottom: "10px",
1018
+ maxHeight: "80px",
1019
+ overflow: "hidden",
1020
+ lineHeight: "1.4"
1021
+ }, children: description.length > 200 ? description.slice(0, 200) + "..." : description }),
1022
+ screenshot && /* @__PURE__ */ jsxs("div", { style: { marginBottom: "10px", position: "relative" }, children: [
1023
+ /* @__PURE__ */ jsx2(
1024
+ "img",
1025
+ {
1026
+ src: screenshot,
1027
+ alt: "Page screenshot",
1028
+ onClick: () => setPreviewOpen(true),
1029
+ style: {
1030
+ width: "100%",
1031
+ borderRadius: "6px",
1032
+ border: `1px solid ${t.border}`,
1033
+ maxHeight: "80px",
1034
+ objectFit: "cover",
1035
+ objectPosition: "top",
1036
+ cursor: "pointer"
866
1037
  }
867
- ),
868
- /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "4px" }, children: [
869
- /* @__PURE__ */ jsx2(
870
- "button",
1038
+ }
1039
+ ),
1040
+ /* @__PURE__ */ jsx2(
1041
+ "button",
1042
+ {
1043
+ type: "button",
1044
+ onClick: () => setScreenshot(null),
1045
+ style: {
1046
+ position: "absolute",
1047
+ top: "4px",
1048
+ right: "4px",
1049
+ background: "rgba(0,0,0,0.6)",
1050
+ border: "none",
1051
+ borderRadius: "50%",
1052
+ width: "20px",
1053
+ height: "20px",
1054
+ cursor: "pointer",
1055
+ display: "flex",
1056
+ alignItems: "center",
1057
+ justifyContent: "center"
1058
+ },
1059
+ "aria-label": "Remove screenshot",
1060
+ children: /* @__PURE__ */ jsx2("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", children: /* @__PURE__ */ jsx2("path", { d: "M1 1L9 9M9 1L1 9", stroke: "#fff", strokeWidth: "1.5", strokeLinecap: "round" }) })
1061
+ }
1062
+ )
1063
+ ] }),
1064
+ !screenshot && /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "6px", marginBottom: "10px" }, children: [
1065
+ /* @__PURE__ */ jsx2(
1066
+ "button",
1067
+ {
1068
+ type: "button",
1069
+ onClick: () => {
1070
+ var _a2;
1071
+ return (_a2 = fileInputRef.current) == null ? void 0 : _a2.click();
1072
+ },
1073
+ style: {
1074
+ flex: 1,
1075
+ padding: "8px",
1076
+ borderRadius: "6px",
1077
+ border: `1px dashed ${t.inputBorder}`,
1078
+ textAlign: "center",
1079
+ fontSize: "11px",
1080
+ color: t.textMuted,
1081
+ background: "none",
1082
+ cursor: "pointer"
1083
+ },
1084
+ children: "Upload screenshot"
1085
+ }
1086
+ ),
1087
+ /* @__PURE__ */ jsx2(
1088
+ "button",
1089
+ {
1090
+ type: "button",
1091
+ onClick: retakeScreenshot,
1092
+ style: {
1093
+ flex: 1,
1094
+ padding: "8px",
1095
+ borderRadius: "6px",
1096
+ border: `1px dashed ${t.inputBorder}`,
1097
+ textAlign: "center",
1098
+ fontSize: "11px",
1099
+ color: t.textMuted,
1100
+ background: "none",
1101
+ cursor: "pointer"
1102
+ },
1103
+ children: "Retake screenshot"
1104
+ }
1105
+ )
1106
+ ] }),
1107
+ /* @__PURE__ */ jsx2(
1108
+ "button",
1109
+ {
1110
+ type: "button",
1111
+ onClick: handleSubmit,
1112
+ disabled: isSubmitting,
1113
+ style: {
1114
+ width: "100%",
1115
+ padding: "10px",
1116
+ borderRadius: "8px",
1117
+ border: "none",
1118
+ backgroundColor: isSubmitting ? t.bgSecondary : t.accent,
1119
+ color: isSubmitting ? t.textMuted : t.accentText,
1120
+ fontSize: "14px",
1121
+ fontWeight: 600,
1122
+ cursor: isSubmitting ? "not-allowed" : "pointer",
1123
+ fontFamily: "inherit",
1124
+ transition: "background-color 0.15s ease"
1125
+ },
1126
+ children: isSubmitting ? "Sending..." : "Send Report"
1127
+ }
1128
+ )
1129
+ ] })
1130
+ ] })
1131
+ ) : (
1132
+ /* ─── Classic Flow ─── */
1133
+ /* @__PURE__ */ jsxs(Fragment2, { children: [
1134
+ screenshot && /* @__PURE__ */ jsxs("div", { style: { marginBottom: "10px", position: "relative" }, children: [
1135
+ /* @__PURE__ */ jsx2(
1136
+ "img",
1137
+ {
1138
+ src: screenshot,
1139
+ alt: "Page screenshot",
1140
+ onClick: () => setPreviewOpen(true),
1141
+ style: {
1142
+ width: "100%",
1143
+ borderRadius: "6px",
1144
+ border: `1px solid ${t.border}`,
1145
+ maxHeight: "120px",
1146
+ objectFit: "cover",
1147
+ objectPosition: "top",
1148
+ cursor: "pointer"
1149
+ }
1150
+ }
1151
+ ),
1152
+ /* @__PURE__ */ jsx2(
1153
+ "button",
1154
+ {
1155
+ type: "button",
1156
+ onClick: () => setScreenshot(null),
1157
+ style: {
1158
+ position: "absolute",
1159
+ top: "4px",
1160
+ right: "4px",
1161
+ background: "rgba(0,0,0,0.6)",
1162
+ border: "none",
1163
+ borderRadius: "50%",
1164
+ width: "20px",
1165
+ height: "20px",
1166
+ cursor: "pointer",
1167
+ display: "flex",
1168
+ alignItems: "center",
1169
+ justifyContent: "center"
1170
+ },
1171
+ "aria-label": "Remove screenshot",
1172
+ children: /* @__PURE__ */ jsx2("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", children: /* @__PURE__ */ jsx2("path", { d: "M1 1L9 9M9 1L1 9", stroke: "#fff", strokeWidth: "1.5", strokeLinecap: "round" }) })
1173
+ }
1174
+ ),
1175
+ /* @__PURE__ */ jsxs(
1176
+ "div",
1177
+ {
1178
+ style: {
1179
+ position: "absolute",
1180
+ bottom: "4px",
1181
+ left: "6px",
1182
+ right: "6px",
1183
+ display: "flex",
1184
+ justifyContent: "space-between",
1185
+ alignItems: "center"
1186
+ },
1187
+ children: [
1188
+ /* @__PURE__ */ jsxs(
1189
+ "span",
871
1190
  {
872
- type: "button",
873
- onClick: () => {
874
- var _a2;
875
- return (_a2 = fileInputRef.current) == null ? void 0 : _a2.click();
876
- },
877
1191
  style: {
878
- background: t.accent,
879
- color: t.accentText,
1192
+ background: "rgba(0,0,0,0.6)",
1193
+ color: "#fff",
880
1194
  fontSize: "10px",
881
- padding: "3px 8px",
882
- borderRadius: "4px",
883
- border: "none",
884
- cursor: "pointer",
885
- fontWeight: 600
1195
+ padding: "2px 6px",
1196
+ borderRadius: "4px"
886
1197
  },
887
- children: "Upload"
1198
+ children: [
1199
+ "Screenshot (",
1200
+ Math.round(screenshot.length * 0.75 / 1024),
1201
+ "KB) \u2014 click to preview"
1202
+ ]
888
1203
  }
889
1204
  ),
890
- /* @__PURE__ */ jsx2(
891
- "button",
892
- {
893
- type: "button",
894
- onClick: retakeScreenshot,
895
- style: {
896
- background: t.accent,
897
- color: t.accentText,
898
- fontSize: "10px",
899
- padding: "3px 8px",
900
- borderRadius: "4px",
901
- border: "none",
902
- cursor: "pointer",
903
- fontWeight: 600
904
- },
905
- children: "Retake"
906
- }
907
- )
908
- ] })
909
- ]
1205
+ /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "4px" }, children: [
1206
+ /* @__PURE__ */ jsx2(
1207
+ "button",
1208
+ {
1209
+ type: "button",
1210
+ onClick: () => {
1211
+ var _a2;
1212
+ return (_a2 = fileInputRef.current) == null ? void 0 : _a2.click();
1213
+ },
1214
+ style: {
1215
+ background: t.accent,
1216
+ color: t.accentText,
1217
+ fontSize: "10px",
1218
+ padding: "3px 8px",
1219
+ borderRadius: "4px",
1220
+ border: "none",
1221
+ cursor: "pointer",
1222
+ fontWeight: 600
1223
+ },
1224
+ children: "Upload"
1225
+ }
1226
+ ),
1227
+ /* @__PURE__ */ jsx2(
1228
+ "button",
1229
+ {
1230
+ type: "button",
1231
+ onClick: retakeScreenshot,
1232
+ style: {
1233
+ background: t.accent,
1234
+ color: t.accentText,
1235
+ fontSize: "10px",
1236
+ padding: "3px 8px",
1237
+ borderRadius: "4px",
1238
+ border: "none",
1239
+ cursor: "pointer",
1240
+ fontWeight: 600
1241
+ },
1242
+ children: "Retake"
1243
+ }
1244
+ )
1245
+ ] })
1246
+ ]
1247
+ }
1248
+ )
1249
+ ] }),
1250
+ !screenshot && !submitted && /* @__PURE__ */ jsx2(
1251
+ "button",
1252
+ {
1253
+ type: "button",
1254
+ onClick: () => {
1255
+ var _a2;
1256
+ return (_a2 = fileInputRef.current) == null ? void 0 : _a2.click();
1257
+ },
1258
+ style: {
1259
+ marginBottom: "10px",
1260
+ padding: "10px",
1261
+ borderRadius: "6px",
1262
+ border: `1px dashed ${t.inputBorder}`,
1263
+ textAlign: "center",
1264
+ fontSize: "11px",
1265
+ color: t.textMuted,
1266
+ width: "100%",
1267
+ background: "none",
1268
+ cursor: "pointer"
1269
+ },
1270
+ children: "Click to upload a screenshot"
1271
+ }
1272
+ ),
1273
+ /* @__PURE__ */ jsx2(
1274
+ "textarea",
1275
+ {
1276
+ value: description,
1277
+ onChange: (e) => setDescription(e.target.value),
1278
+ placeholder: "Describe what went wrong...",
1279
+ style: {
1280
+ width: "100%",
1281
+ minHeight: "100px",
1282
+ padding: "10px 12px",
1283
+ borderRadius: "8px",
1284
+ border: `1px solid ${t.inputBorder}`,
1285
+ fontSize: "14px",
1286
+ fontFamily: "inherit",
1287
+ resize: "vertical",
1288
+ outline: "none",
1289
+ boxSizing: "border-box",
1290
+ color: t.text,
1291
+ backgroundColor: t.inputBg
1292
+ },
1293
+ onFocus: (e) => {
1294
+ e.target.style.borderColor = t.accent;
1295
+ },
1296
+ onBlur: (e) => {
1297
+ e.target.style.borderColor = t.inputBorder;
1298
+ },
1299
+ autoFocus: true
1300
+ }
1301
+ ),
1302
+ /* @__PURE__ */ jsx2(
1303
+ "button",
1304
+ {
1305
+ type: "button",
1306
+ onClick: handleSubmit,
1307
+ disabled: !description.trim() || isSubmitting,
1308
+ style: {
1309
+ marginTop: "12px",
1310
+ width: "100%",
1311
+ padding: "10px",
1312
+ borderRadius: "8px",
1313
+ border: "none",
1314
+ backgroundColor: !description.trim() || isSubmitting ? t.bgSecondary : t.accent,
1315
+ color: !description.trim() || isSubmitting ? t.textMuted : t.accentText,
1316
+ fontSize: "14px",
1317
+ fontWeight: 600,
1318
+ cursor: !description.trim() || isSubmitting ? "not-allowed" : "pointer",
1319
+ fontFamily: "inherit",
1320
+ transition: "background-color 0.15s ease"
1321
+ },
1322
+ children: isSubmitting ? "Sending..." : "Send Report"
910
1323
  }
911
1324
  )
912
- ] }),
913
- !screenshot && !submitted && /* @__PURE__ */ jsx2(
914
- "button",
915
- {
916
- type: "button",
917
- onClick: () => {
918
- var _a2;
919
- return (_a2 = fileInputRef.current) == null ? void 0 : _a2.click();
920
- },
921
- style: {
922
- marginBottom: "10px",
923
- padding: "10px",
924
- borderRadius: "6px",
925
- border: `1px dashed ${t.inputBorder}`,
926
- textAlign: "center",
927
- fontSize: "11px",
928
- color: t.textMuted,
929
- width: "100%",
930
- background: "none",
931
- cursor: "pointer"
932
- },
933
- children: "Click to upload a screenshot"
934
- }
935
- ),
936
- /* @__PURE__ */ jsx2(
937
- "textarea",
938
- {
939
- value: description,
940
- onChange: (e) => setDescription(e.target.value),
941
- placeholder: "Describe what went wrong...",
942
- style: {
943
- width: "100%",
944
- minHeight: "100px",
945
- padding: "10px 12px",
946
- borderRadius: "8px",
947
- border: `1px solid ${t.inputBorder}`,
948
- fontSize: "14px",
949
- fontFamily: "inherit",
950
- resize: "vertical",
951
- outline: "none",
952
- boxSizing: "border-box",
953
- color: t.text,
954
- backgroundColor: t.inputBg
955
- },
956
- onFocus: (e) => {
957
- e.target.style.borderColor = t.accent;
958
- },
959
- onBlur: (e) => {
960
- e.target.style.borderColor = t.inputBorder;
961
- },
962
- autoFocus: true
963
- }
964
- ),
965
- /* @__PURE__ */ jsx2(
966
- "button",
967
- {
968
- type: "button",
969
- onClick: handleSubmit,
970
- disabled: !description.trim() || isSubmitting,
971
- style: {
972
- marginTop: "12px",
973
- width: "100%",
974
- padding: "10px",
975
- borderRadius: "8px",
976
- border: "none",
977
- backgroundColor: !description.trim() || isSubmitting ? t.bgSecondary : t.accent,
978
- color: !description.trim() || isSubmitting ? t.textMuted : t.accentText,
979
- fontSize: "14px",
980
- fontWeight: 600,
981
- cursor: !description.trim() || isSubmitting ? "not-allowed" : "pointer",
982
- fontFamily: "inherit",
983
- transition: "background-color 0.15s ease"
984
- },
985
- children: isSubmitting ? "Sending..." : "Send Report"
986
- }
987
- )
988
- ] }) }),
1325
+ ] })
1326
+ ) }),
989
1327
  /* @__PURE__ */ jsx2(
990
1328
  "div",
991
1329
  {
@@ -1069,6 +1407,58 @@ function ReportButton({
1069
1407
  )
1070
1408
  ] });
1071
1409
  }
1410
+ function getTypeLabel(type) {
1411
+ switch (type) {
1412
+ case "BUG":
1413
+ return "Bug Report";
1414
+ case "FEATURE_REQUEST":
1415
+ return "Feature Request";
1416
+ case "QUESTION":
1417
+ return "Question";
1418
+ case "OTHER":
1419
+ return "Other";
1420
+ }
1421
+ }
1422
+ function getTypeSubtitle(type) {
1423
+ switch (type) {
1424
+ case "BUG":
1425
+ return "Something isn't working";
1426
+ case "FEATURE_REQUEST":
1427
+ return "Suggest an improvement";
1428
+ case "QUESTION":
1429
+ return "Ask a question";
1430
+ case "OTHER":
1431
+ return "General feedback";
1432
+ }
1433
+ }
1434
+ function getPlaceholder(type) {
1435
+ switch (type) {
1436
+ case "BUG":
1437
+ return "What went wrong?";
1438
+ case "FEATURE_REQUEST":
1439
+ return "Describe the feature you'd like...";
1440
+ case "QUESTION":
1441
+ return "What would you like to know?";
1442
+ case "OTHER":
1443
+ return "Tell us what's on your mind...";
1444
+ }
1445
+ }
1446
+ function getTypeIcon(type, color, size = 24) {
1447
+ const props = { width: size, height: size, viewBox: "0 0 24 24", fill: "none", style: { flexShrink: 0 } };
1448
+ switch (type) {
1449
+ case "BUG":
1450
+ return /* @__PURE__ */ jsx2("svg", { ...props, children: /* @__PURE__ */ jsx2("path", { d: "M8 2L6.5 3.5M16 2L17.5 3.5M3 9H7M17 9H21M12 2a5 5 0 015 5v4a5 5 0 01-10 0V7a5 5 0 015-5zM7 16l-2 3M17 16l2 3", stroke: color, strokeWidth: "1.5", strokeLinecap: "round" }) });
1451
+ case "FEATURE_REQUEST":
1452
+ return /* @__PURE__ */ jsx2("svg", { ...props, children: /* @__PURE__ */ jsx2("path", { d: "M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2z", stroke: color, strokeWidth: "1.5", strokeLinejoin: "round" }) });
1453
+ case "QUESTION":
1454
+ return /* @__PURE__ */ jsxs("svg", { ...props, children: [
1455
+ /* @__PURE__ */ jsx2("circle", { cx: "12", cy: "12", r: "10", stroke: color, strokeWidth: "1.5" }),
1456
+ /* @__PURE__ */ jsx2("path", { d: "M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3M12 17h.01", stroke: color, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
1457
+ ] });
1458
+ case "OTHER":
1459
+ return /* @__PURE__ */ jsx2("svg", { ...props, children: /* @__PURE__ */ jsx2("path", { d: "M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2v10z", stroke: color, strokeWidth: "1.5", strokeLinejoin: "round" }) });
1460
+ }
1461
+ }
1072
1462
  function DefaultTrigger({
1073
1463
  onClick,
1074
1464
  capturing,