glitchgrab 1.6.1 → 1.6.3

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 (5) hide show
  1. package/dist/index.js +333 -323
  2. package/dist/index.js.map +1 -1
  3. package/dist/index.mjs +333 -323
  4. package/dist/index.mjs.map +1 -1
  5. package/package.json +1 -1
package/dist/index.mjs CHANGED
@@ -539,6 +539,7 @@ function GlitchgrabProvider(props) {
539
539
 
540
540
  // src/report-button.tsx
541
541
  import { useState as useState2, useRef as useRef2, useEffect as useEffect2 } from "react";
542
+ import { createPortal } from "react-dom";
542
543
  import { Fragment as Fragment2, jsx as jsx2, jsxs } from "react/jsx-runtime";
543
544
  function useGlitchgrabSafe() {
544
545
  try {
@@ -678,309 +679,315 @@ function ReportButton({
678
679
  isTop
679
680
  }
680
681
  ),
681
- isOpen && /* @__PURE__ */ jsx2(
682
- "div",
683
- {
684
- style: {
685
- position: "fixed",
686
- inset: 0,
687
- zIndex: 99999,
688
- display: "flex",
689
- alignItems: "center",
690
- justifyContent: "center",
691
- backgroundColor: "rgba(0,0,0,0.5)"
692
- },
693
- onClick: () => {
694
- if (!previewOpen) setIsOpen(false);
695
- },
696
- children: /* @__PURE__ */ jsxs(
697
- "div",
698
- {
699
- ref: modalRef,
700
- onClick: (e) => e.stopPropagation(),
701
- style: {
702
- position: children ? "relative" : "fixed",
703
- ...modalPositionStyles,
704
- zIndex: 1e5,
705
- width: "340px",
706
- maxWidth: "calc(100% - 32px)",
707
- backgroundColor: t.bg,
708
- borderRadius: "12px",
709
- boxShadow: "0 20px 60px rgba(0, 0, 0, 0.2), 0 4px 16px rgba(0, 0, 0, 0.1)",
710
- fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
711
- overflow: "hidden",
712
- color: t.text,
713
- isolation: "isolate"
714
- },
715
- children: [
716
- /* @__PURE__ */ jsx2(
717
- "div",
718
- {
719
- style: {
720
- padding: "16px 16px 12px",
721
- borderBottom: `1px solid ${t.border}`
722
- },
723
- children: /* @__PURE__ */ jsxs(
724
- "div",
725
- {
726
- style: {
727
- display: "flex",
728
- justifyContent: "space-between",
729
- alignItems: "center"
730
- },
731
- children: [
732
- /* @__PURE__ */ jsx2(
733
- "span",
734
- {
735
- style: {
736
- fontSize: "15px",
737
- fontWeight: 600,
738
- color: t.text
739
- },
740
- children: "Report a Bug"
741
- }
742
- ),
743
- /* @__PURE__ */ jsx2(
744
- "button",
745
- {
746
- type: "button",
747
- onClick: () => setIsOpen(false),
748
- style: {
749
- background: "none",
750
- border: "none",
751
- cursor: "pointer",
752
- padding: "4px",
753
- display: "flex",
754
- alignItems: "center",
755
- justifyContent: "center"
756
- },
757
- "aria-label": "Close",
758
- 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" }) })
759
- }
760
- )
761
- ]
762
- }
763
- )
764
- }
765
- ),
766
- /* @__PURE__ */ jsx2("div", { style: { padding: "16px" }, children: submitted ? /* @__PURE__ */ jsx2(
767
- "div",
768
- {
769
- style: {
770
- textAlign: "center",
771
- padding: "20px 0",
772
- color: t.accent,
773
- fontSize: "14px",
774
- fontWeight: 500
775
- },
776
- children: "Bug report sent. Thank you!"
777
- }
778
- ) : /* @__PURE__ */ jsxs(Fragment2, { children: [
779
- screenshot && /* @__PURE__ */ jsxs("div", { style: { marginBottom: "10px", position: "relative" }, children: [
780
- /* @__PURE__ */ jsx2(
781
- "img",
782
- {
783
- src: screenshot,
784
- alt: "Page screenshot",
785
- onClick: () => setPreviewOpen(true),
786
- style: {
787
- width: "100%",
788
- borderRadius: "6px",
789
- border: `1px solid ${t.border}`,
790
- maxHeight: "120px",
791
- objectFit: "cover",
792
- objectPosition: "top",
793
- cursor: "pointer"
794
- }
795
- }
796
- ),
797
- /* @__PURE__ */ jsx2(
798
- "button",
799
- {
800
- type: "button",
801
- onClick: () => setScreenshot(null),
802
- style: {
803
- position: "absolute",
804
- top: "4px",
805
- right: "4px",
806
- background: "rgba(0,0,0,0.6)",
807
- border: "none",
808
- borderRadius: "50%",
809
- width: "20px",
810
- height: "20px",
811
- cursor: "pointer",
812
- display: "flex",
813
- alignItems: "center",
814
- justifyContent: "center"
815
- },
816
- "aria-label": "Remove screenshot",
817
- 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" }) })
818
- }
819
- ),
820
- /* @__PURE__ */ jsxs(
821
- "div",
822
- {
823
- style: {
824
- position: "absolute",
825
- bottom: "4px",
826
- left: "6px",
827
- right: "6px",
828
- display: "flex",
829
- justifyContent: "space-between",
830
- alignItems: "center"
831
- },
832
- children: [
833
- /* @__PURE__ */ jsxs(
834
- "span",
835
- {
836
- style: {
837
- background: "rgba(0,0,0,0.6)",
838
- color: "#fff",
839
- fontSize: "10px",
840
- padding: "2px 6px",
841
- borderRadius: "4px"
842
- },
843
- children: [
844
- "Screenshot (",
845
- Math.round(screenshot.length * 0.75 / 1024),
846
- "KB) \u2014 click to preview"
847
- ]
848
- }
849
- ),
850
- /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "4px" }, children: [
682
+ isOpen && typeof document !== "undefined" && createPortal(
683
+ /* @__PURE__ */ jsx2(
684
+ "div",
685
+ {
686
+ style: {
687
+ position: "fixed",
688
+ inset: 0,
689
+ zIndex: 2147483647,
690
+ display: "flex",
691
+ alignItems: "center",
692
+ justifyContent: "center",
693
+ backgroundColor: "rgba(0,0,0,0.5)",
694
+ fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'
695
+ },
696
+ onClick: () => {
697
+ if (!previewOpen) setIsOpen(false);
698
+ },
699
+ children: /* @__PURE__ */ jsxs(
700
+ "div",
701
+ {
702
+ ref: modalRef,
703
+ onClick: (e) => e.stopPropagation(),
704
+ style: {
705
+ position: children ? "relative" : "fixed",
706
+ ...modalPositionStyles,
707
+ zIndex: 2147483647,
708
+ width: "340px",
709
+ maxWidth: "calc(100% - 32px)",
710
+ backgroundColor: t.bg,
711
+ borderRadius: "12px",
712
+ boxShadow: "0 20px 60px rgba(0, 0, 0, 0.2), 0 4px 16px rgba(0, 0, 0, 0.1)",
713
+ fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
714
+ overflow: "hidden",
715
+ color: t.text,
716
+ isolation: "isolate"
717
+ },
718
+ children: [
719
+ /* @__PURE__ */ jsx2(
720
+ "div",
721
+ {
722
+ style: {
723
+ padding: "16px 16px 12px",
724
+ borderBottom: `1px solid ${t.border}`
725
+ },
726
+ children: /* @__PURE__ */ jsxs(
727
+ "div",
728
+ {
729
+ style: {
730
+ display: "flex",
731
+ justifyContent: "space-between",
732
+ alignItems: "center"
733
+ },
734
+ children: [
851
735
  /* @__PURE__ */ jsx2(
852
- "button",
736
+ "span",
853
737
  {
854
- type: "button",
855
- onClick: () => {
856
- var _a2;
857
- return (_a2 = fileInputRef.current) == null ? void 0 : _a2.click();
858
- },
859
738
  style: {
860
- background: "rgba(0,0,0,0.6)",
861
- color: t.accent,
862
- fontSize: "10px",
863
- padding: "2px 6px",
864
- borderRadius: "4px",
865
- border: "none",
866
- cursor: "pointer"
739
+ fontSize: "15px",
740
+ fontWeight: 600,
741
+ color: t.text
867
742
  },
868
- children: "Upload"
743
+ children: "Report a Bug"
869
744
  }
870
745
  ),
871
746
  /* @__PURE__ */ jsx2(
872
747
  "button",
873
748
  {
874
749
  type: "button",
875
- onClick: retakeScreenshot,
750
+ onClick: () => setIsOpen(false),
876
751
  style: {
877
- background: "rgba(0,0,0,0.6)",
878
- color: t.accent,
879
- fontSize: "10px",
880
- padding: "2px 6px",
881
- borderRadius: "4px",
752
+ background: "none",
882
753
  border: "none",
883
- cursor: "pointer"
754
+ cursor: "pointer",
755
+ padding: "4px",
756
+ display: "flex",
757
+ alignItems: "center",
758
+ justifyContent: "center"
884
759
  },
885
- children: "Retake"
760
+ "aria-label": "Close",
761
+ 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" }) })
886
762
  }
887
763
  )
888
- ] })
889
- ]
890
- }
891
- )
892
- ] }),
893
- !screenshot && !submitted && /* @__PURE__ */ jsx2(
894
- "button",
895
- {
896
- type: "button",
897
- onClick: () => {
898
- var _a2;
899
- return (_a2 = fileInputRef.current) == null ? void 0 : _a2.click();
900
- },
901
- style: {
902
- marginBottom: "10px",
903
- padding: "10px",
904
- borderRadius: "6px",
905
- border: `1px dashed ${t.inputBorder}`,
906
- textAlign: "center",
907
- fontSize: "11px",
908
- color: t.textMuted,
909
- width: "100%",
910
- background: "none",
911
- cursor: "pointer"
912
- },
913
- children: "Click to upload a screenshot"
764
+ ]
765
+ }
766
+ )
914
767
  }
915
768
  ),
916
- /* @__PURE__ */ jsx2(
917
- "textarea",
769
+ /* @__PURE__ */ jsx2("div", { style: { padding: "16px" }, children: submitted ? /* @__PURE__ */ jsx2(
770
+ "div",
918
771
  {
919
- value: description,
920
- onChange: (e) => setDescription(e.target.value),
921
- placeholder: "Describe what went wrong...",
922
772
  style: {
923
- width: "100%",
924
- minHeight: "100px",
925
- padding: "10px 12px",
926
- borderRadius: "8px",
927
- border: `1px solid ${t.inputBorder}`,
773
+ textAlign: "center",
774
+ padding: "20px 0",
775
+ color: t.accent,
928
776
  fontSize: "14px",
929
- fontFamily: "inherit",
930
- resize: "vertical",
931
- outline: "none",
932
- boxSizing: "border-box",
933
- color: t.text,
934
- backgroundColor: t.inputBg
935
- },
936
- onFocus: (e) => {
937
- e.target.style.borderColor = t.accent;
777
+ fontWeight: 500
938
778
  },
939
- onBlur: (e) => {
940
- e.target.style.borderColor = t.inputBorder;
941
- },
942
- autoFocus: true
779
+ children: "Bug report sent. Thank you!"
943
780
  }
944
- ),
781
+ ) : /* @__PURE__ */ jsxs(Fragment2, { children: [
782
+ screenshot && /* @__PURE__ */ jsxs("div", { style: { marginBottom: "10px", position: "relative" }, children: [
783
+ /* @__PURE__ */ jsx2(
784
+ "img",
785
+ {
786
+ src: screenshot,
787
+ alt: "Page screenshot",
788
+ onClick: () => setPreviewOpen(true),
789
+ style: {
790
+ width: "100%",
791
+ borderRadius: "6px",
792
+ border: `1px solid ${t.border}`,
793
+ maxHeight: "120px",
794
+ objectFit: "cover",
795
+ objectPosition: "top",
796
+ cursor: "pointer"
797
+ }
798
+ }
799
+ ),
800
+ /* @__PURE__ */ jsx2(
801
+ "button",
802
+ {
803
+ type: "button",
804
+ onClick: () => setScreenshot(null),
805
+ style: {
806
+ position: "absolute",
807
+ top: "4px",
808
+ right: "4px",
809
+ background: "rgba(0,0,0,0.6)",
810
+ border: "none",
811
+ borderRadius: "50%",
812
+ width: "20px",
813
+ height: "20px",
814
+ cursor: "pointer",
815
+ display: "flex",
816
+ alignItems: "center",
817
+ justifyContent: "center"
818
+ },
819
+ "aria-label": "Remove screenshot",
820
+ 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" }) })
821
+ }
822
+ ),
823
+ /* @__PURE__ */ jsxs(
824
+ "div",
825
+ {
826
+ style: {
827
+ position: "absolute",
828
+ bottom: "4px",
829
+ left: "6px",
830
+ right: "6px",
831
+ display: "flex",
832
+ justifyContent: "space-between",
833
+ alignItems: "center"
834
+ },
835
+ children: [
836
+ /* @__PURE__ */ jsxs(
837
+ "span",
838
+ {
839
+ style: {
840
+ background: "rgba(0,0,0,0.6)",
841
+ color: "#fff",
842
+ fontSize: "10px",
843
+ padding: "2px 6px",
844
+ borderRadius: "4px"
845
+ },
846
+ children: [
847
+ "Screenshot (",
848
+ Math.round(screenshot.length * 0.75 / 1024),
849
+ "KB) \u2014 click to preview"
850
+ ]
851
+ }
852
+ ),
853
+ /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "4px" }, children: [
854
+ /* @__PURE__ */ jsx2(
855
+ "button",
856
+ {
857
+ type: "button",
858
+ onClick: () => {
859
+ var _a2;
860
+ return (_a2 = fileInputRef.current) == null ? void 0 : _a2.click();
861
+ },
862
+ style: {
863
+ background: t.accent,
864
+ color: t.accentText,
865
+ fontSize: "10px",
866
+ padding: "3px 8px",
867
+ borderRadius: "4px",
868
+ border: "none",
869
+ cursor: "pointer",
870
+ fontWeight: 600
871
+ },
872
+ children: "Upload"
873
+ }
874
+ ),
875
+ /* @__PURE__ */ jsx2(
876
+ "button",
877
+ {
878
+ type: "button",
879
+ onClick: retakeScreenshot,
880
+ style: {
881
+ background: t.accent,
882
+ color: t.accentText,
883
+ fontSize: "10px",
884
+ padding: "3px 8px",
885
+ borderRadius: "4px",
886
+ border: "none",
887
+ cursor: "pointer",
888
+ fontWeight: 600
889
+ },
890
+ children: "Retake"
891
+ }
892
+ )
893
+ ] })
894
+ ]
895
+ }
896
+ )
897
+ ] }),
898
+ !screenshot && !submitted && /* @__PURE__ */ jsx2(
899
+ "button",
900
+ {
901
+ type: "button",
902
+ onClick: () => {
903
+ var _a2;
904
+ return (_a2 = fileInputRef.current) == null ? void 0 : _a2.click();
905
+ },
906
+ style: {
907
+ marginBottom: "10px",
908
+ padding: "10px",
909
+ borderRadius: "6px",
910
+ border: `1px dashed ${t.inputBorder}`,
911
+ textAlign: "center",
912
+ fontSize: "11px",
913
+ color: t.textMuted,
914
+ width: "100%",
915
+ background: "none",
916
+ cursor: "pointer"
917
+ },
918
+ children: "Click to upload a screenshot"
919
+ }
920
+ ),
921
+ /* @__PURE__ */ jsx2(
922
+ "textarea",
923
+ {
924
+ value: description,
925
+ onChange: (e) => setDescription(e.target.value),
926
+ placeholder: "Describe what went wrong...",
927
+ style: {
928
+ width: "100%",
929
+ minHeight: "100px",
930
+ padding: "10px 12px",
931
+ borderRadius: "8px",
932
+ border: `1px solid ${t.inputBorder}`,
933
+ fontSize: "14px",
934
+ fontFamily: "inherit",
935
+ resize: "vertical",
936
+ outline: "none",
937
+ boxSizing: "border-box",
938
+ color: t.text,
939
+ backgroundColor: t.inputBg
940
+ },
941
+ onFocus: (e) => {
942
+ e.target.style.borderColor = t.accent;
943
+ },
944
+ onBlur: (e) => {
945
+ e.target.style.borderColor = t.inputBorder;
946
+ },
947
+ autoFocus: true
948
+ }
949
+ ),
950
+ /* @__PURE__ */ jsx2(
951
+ "button",
952
+ {
953
+ type: "button",
954
+ onClick: handleSubmit,
955
+ disabled: !description.trim() || isSubmitting,
956
+ style: {
957
+ marginTop: "12px",
958
+ width: "100%",
959
+ padding: "10px",
960
+ borderRadius: "8px",
961
+ border: "none",
962
+ backgroundColor: !description.trim() || isSubmitting ? t.bgSecondary : t.accent,
963
+ color: !description.trim() || isSubmitting ? t.textMuted : t.accentText,
964
+ fontSize: "14px",
965
+ fontWeight: 600,
966
+ cursor: !description.trim() || isSubmitting ? "not-allowed" : "pointer",
967
+ fontFamily: "inherit",
968
+ transition: "background-color 0.15s ease"
969
+ },
970
+ children: isSubmitting ? "Sending..." : "Send Report"
971
+ }
972
+ )
973
+ ] }) }),
945
974
  /* @__PURE__ */ jsx2(
946
- "button",
975
+ "div",
947
976
  {
948
- type: "button",
949
- onClick: handleSubmit,
950
- disabled: !description.trim() || isSubmitting,
951
977
  style: {
952
- marginTop: "12px",
953
- width: "100%",
954
- padding: "10px",
955
- borderRadius: "8px",
956
- border: "none",
957
- backgroundColor: !description.trim() || isSubmitting ? t.bgSecondary : t.accent,
958
- color: !description.trim() || isSubmitting ? t.textMuted : t.accentText,
959
- fontSize: "14px",
960
- fontWeight: 600,
961
- cursor: !description.trim() || isSubmitting ? "not-allowed" : "pointer",
962
- fontFamily: "inherit",
963
- transition: "background-color 0.15s ease"
978
+ padding: "8px 16px 10px",
979
+ borderTop: `1px solid ${t.border}`,
980
+ textAlign: "center"
964
981
  },
965
- children: isSubmitting ? "Sending..." : "Send Report"
982
+ children: /* @__PURE__ */ jsx2("span", { style: { fontSize: "11px", color: t.textMuted }, children: "Powered by Glitchgrab" })
966
983
  }
967
984
  )
968
- ] }) }),
969
- /* @__PURE__ */ jsx2(
970
- "div",
971
- {
972
- style: {
973
- padding: "8px 16px 10px",
974
- borderTop: `1px solid ${t.border}`,
975
- textAlign: "center"
976
- },
977
- children: /* @__PURE__ */ jsx2("span", { style: { fontSize: "11px", color: t.textMuted }, children: "Powered by Glitchgrab" })
978
- }
979
- )
980
- ]
981
- }
982
- )
983
- }
985
+ ]
986
+ }
987
+ )
988
+ }
989
+ ),
990
+ document.body
984
991
  ),
985
992
  /* @__PURE__ */ jsx2(
986
993
  "input",
@@ -992,55 +999,58 @@ function ReportButton({
992
999
  style: { display: "none" }
993
1000
  }
994
1001
  ),
995
- previewOpen && screenshot && /* @__PURE__ */ jsxs(
996
- "div",
997
- {
998
- style: {
999
- position: "fixed",
1000
- inset: 0,
1001
- zIndex: 2e5,
1002
- backgroundColor: "rgba(0,0,0,0.85)",
1003
- display: "flex",
1004
- flexDirection: "column",
1005
- alignItems: "center",
1006
- justifyContent: "center",
1007
- padding: "16px",
1008
- cursor: "pointer"
1009
- },
1010
- onClick: (e) => {
1011
- e.stopPropagation();
1012
- setPreviewOpen(false);
1013
- },
1014
- onMouseDown: (e) => e.stopPropagation(),
1015
- children: [
1016
- /* @__PURE__ */ jsx2(
1017
- "img",
1018
- {
1019
- src: screenshot,
1020
- alt: "Screenshot preview",
1021
- onClick: (e) => e.stopPropagation(),
1022
- style: {
1023
- maxWidth: "100%",
1024
- maxHeight: "calc(100vh - 80px)",
1025
- borderRadius: "8px",
1026
- objectFit: "contain",
1027
- cursor: "default"
1002
+ previewOpen && screenshot && typeof document !== "undefined" && createPortal(
1003
+ /* @__PURE__ */ jsxs(
1004
+ "div",
1005
+ {
1006
+ style: {
1007
+ position: "fixed",
1008
+ inset: 0,
1009
+ zIndex: 2147483647,
1010
+ backgroundColor: "rgba(0,0,0,0.85)",
1011
+ display: "flex",
1012
+ flexDirection: "column",
1013
+ alignItems: "center",
1014
+ justifyContent: "center",
1015
+ padding: "16px",
1016
+ cursor: "pointer"
1017
+ },
1018
+ onClick: (e) => {
1019
+ e.stopPropagation();
1020
+ setPreviewOpen(false);
1021
+ },
1022
+ onMouseDown: (e) => e.stopPropagation(),
1023
+ children: [
1024
+ /* @__PURE__ */ jsx2(
1025
+ "img",
1026
+ {
1027
+ src: screenshot,
1028
+ alt: "Screenshot preview",
1029
+ onClick: (e) => e.stopPropagation(),
1030
+ style: {
1031
+ maxWidth: "100%",
1032
+ maxHeight: "calc(100vh - 80px)",
1033
+ borderRadius: "8px",
1034
+ objectFit: "contain",
1035
+ cursor: "default"
1036
+ }
1028
1037
  }
1029
- }
1030
- ),
1031
- /* @__PURE__ */ jsx2(
1032
- "span",
1033
- {
1034
- style: {
1035
- marginTop: "12px",
1036
- color: t.textMuted,
1037
- fontSize: "12px"
1038
- },
1039
- children: "Click outside to close"
1040
- }
1041
- )
1042
- ]
1043
- }
1038
+ ),
1039
+ /* @__PURE__ */ jsx2(
1040
+ "span",
1041
+ {
1042
+ style: {
1043
+ marginTop: "12px",
1044
+ color: t.textMuted,
1045
+ fontSize: "12px"
1046
+ },
1047
+ children: "Click outside to close"
1048
+ }
1049
+ )
1050
+ ]
1051
+ }
1052
+ ),
1053
+ document.body
1044
1054
  )
1045
1055
  ] });
1046
1056
  }