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