glitchgrab 1.6.2 → 1.6.4

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 -325
  2. package/dist/index.js.map +1 -1
  3. package/dist/index.mjs +333 -325
  4. package/dist/index.mjs.map +1 -1
  5. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -568,7 +568,7 @@ function GlitchgrabProvider(props) {
568
568
  if (!props.token) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: props.children });
569
569
  const resolvedProps = {
570
570
  ...props,
571
- baseUrl: props.baseUrl || (typeof window !== "undefined" ? window.location.origin : DEFAULT_BASE_URL2)
571
+ baseUrl: props.baseUrl || DEFAULT_BASE_URL2
572
572
  };
573
573
  try {
574
574
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(GlitchgrabProviderInner, { ...resolvedProps });
@@ -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,311 +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: 2147483647,
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: 2147483647,
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: t.accent,
901
- color: t.accentText,
902
- fontSize: "10px",
903
- padding: "3px 8px",
904
- borderRadius: "4px",
905
- border: "none",
906
- cursor: "pointer",
907
- fontWeight: 600
779
+ fontSize: "15px",
780
+ fontWeight: 600,
781
+ color: t.text
908
782
  },
909
- children: "Upload"
783
+ children: "Report a Bug"
910
784
  }
911
785
  ),
912
786
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
913
787
  "button",
914
788
  {
915
789
  type: "button",
916
- onClick: retakeScreenshot,
790
+ onClick: () => setIsOpen(false),
917
791
  style: {
918
- background: t.accent,
919
- color: t.accentText,
920
- fontSize: "10px",
921
- padding: "3px 8px",
922
- borderRadius: "4px",
792
+ background: "none",
923
793
  border: "none",
924
794
  cursor: "pointer",
925
- fontWeight: 600
795
+ padding: "4px",
796
+ display: "flex",
797
+ alignItems: "center",
798
+ justifyContent: "center"
926
799
  },
927
- 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" }) })
928
802
  }
929
803
  )
930
- ] })
931
- ]
932
- }
933
- )
934
- ] }),
935
- !screenshot && !submitted && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
936
- "button",
937
- {
938
- type: "button",
939
- onClick: () => {
940
- var _a2;
941
- return (_a2 = fileInputRef.current) == null ? void 0 : _a2.click();
942
- },
943
- style: {
944
- marginBottom: "10px",
945
- padding: "10px",
946
- borderRadius: "6px",
947
- border: `1px dashed ${t.inputBorder}`,
948
- textAlign: "center",
949
- fontSize: "11px",
950
- color: t.textMuted,
951
- width: "100%",
952
- background: "none",
953
- cursor: "pointer"
954
- },
955
- children: "Click to upload a screenshot"
804
+ ]
805
+ }
806
+ )
956
807
  }
957
808
  ),
958
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
959
- "textarea",
809
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { padding: "16px" }, children: submitted ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
810
+ "div",
960
811
  {
961
- value: description,
962
- onChange: (e) => setDescription(e.target.value),
963
- placeholder: "Describe what went wrong...",
964
812
  style: {
965
- width: "100%",
966
- minHeight: "100px",
967
- padding: "10px 12px",
968
- borderRadius: "8px",
969
- border: `1px solid ${t.inputBorder}`,
813
+ textAlign: "center",
814
+ padding: "20px 0",
815
+ color: t.accent,
970
816
  fontSize: "14px",
971
- fontFamily: "inherit",
972
- resize: "vertical",
973
- outline: "none",
974
- boxSizing: "border-box",
975
- color: t.text,
976
- backgroundColor: t.inputBg
977
- },
978
- onFocus: (e) => {
979
- e.target.style.borderColor = t.accent;
817
+ fontWeight: 500
980
818
  },
981
- onBlur: (e) => {
982
- e.target.style.borderColor = t.inputBorder;
983
- },
984
- autoFocus: true
819
+ children: "Bug report sent. Thank you!"
985
820
  }
986
- ),
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
+ ] }) }),
987
1014
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
988
- "button",
1015
+ "div",
989
1016
  {
990
- type: "button",
991
- onClick: handleSubmit,
992
- disabled: !description.trim() || isSubmitting,
993
1017
  style: {
994
- marginTop: "12px",
995
- width: "100%",
996
- padding: "10px",
997
- borderRadius: "8px",
998
- border: "none",
999
- backgroundColor: !description.trim() || isSubmitting ? t.bgSecondary : t.accent,
1000
- color: !description.trim() || isSubmitting ? t.textMuted : t.accentText,
1001
- fontSize: "14px",
1002
- fontWeight: 600,
1003
- cursor: !description.trim() || isSubmitting ? "not-allowed" : "pointer",
1004
- fontFamily: "inherit",
1005
- transition: "background-color 0.15s ease"
1018
+ padding: "8px 16px 10px",
1019
+ borderTop: `1px solid ${t.border}`,
1020
+ textAlign: "center"
1006
1021
  },
1007
- children: isSubmitting ? "Sending..." : "Send Report"
1022
+ children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { fontSize: "11px", color: t.textMuted }, children: "Powered by Glitchgrab" })
1008
1023
  }
1009
1024
  )
1010
- ] }) }),
1011
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1012
- "div",
1013
- {
1014
- style: {
1015
- padding: "8px 16px 10px",
1016
- borderTop: `1px solid ${t.border}`,
1017
- textAlign: "center"
1018
- },
1019
- children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { fontSize: "11px", color: t.textMuted }, children: "Powered by Glitchgrab" })
1020
- }
1021
- )
1022
- ]
1023
- }
1024
- )
1025
- }
1025
+ ]
1026
+ }
1027
+ )
1028
+ }
1029
+ ),
1030
+ document.body
1026
1031
  ),
1027
1032
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1028
1033
  "input",
@@ -1034,55 +1039,58 @@ function ReportButton({
1034
1039
  style: { display: "none" }
1035
1040
  }
1036
1041
  ),
1037
- previewOpen && screenshot && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
1038
- "div",
1039
- {
1040
- style: {
1041
- position: "fixed",
1042
- inset: 0,
1043
- zIndex: 2147483647,
1044
- backgroundColor: "rgba(0,0,0,0.85)",
1045
- display: "flex",
1046
- flexDirection: "column",
1047
- alignItems: "center",
1048
- justifyContent: "center",
1049
- padding: "16px",
1050
- cursor: "pointer"
1051
- },
1052
- onClick: (e) => {
1053
- e.stopPropagation();
1054
- setPreviewOpen(false);
1055
- },
1056
- onMouseDown: (e) => e.stopPropagation(),
1057
- children: [
1058
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1059
- "img",
1060
- {
1061
- src: screenshot,
1062
- alt: "Screenshot preview",
1063
- onClick: (e) => e.stopPropagation(),
1064
- style: {
1065
- maxWidth: "100%",
1066
- maxHeight: "calc(100vh - 80px)",
1067
- borderRadius: "8px",
1068
- objectFit: "contain",
1069
- 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
+ }
1070
1077
  }
1071
- }
1072
- ),
1073
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1074
- "span",
1075
- {
1076
- style: {
1077
- marginTop: "12px",
1078
- color: t.textMuted,
1079
- fontSize: "12px"
1080
- },
1081
- children: "Click outside to close"
1082
- }
1083
- )
1084
- ]
1085
- }
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
1086
1094
  )
1087
1095
  ] });
1088
1096
  }