@gallop.software/studio 0.1.83 → 0.1.85

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 (9) hide show
  1. package/dist/{StudioUI-MVIOZTZH.js → StudioUI-P4TLZNF7.js} +109 -26
  2. package/dist/StudioUI-P4TLZNF7.js.map +1 -0
  3. package/dist/{StudioUI-XV7HCEAF.mjs → StudioUI-PPX6VKNU.mjs} +157 -74
  4. package/dist/StudioUI-PPX6VKNU.mjs.map +1 -0
  5. package/dist/index.js +1 -1
  6. package/dist/index.mjs +1 -1
  7. package/package.json +1 -1
  8. package/dist/StudioUI-MVIOZTZH.js.map +0 -1
  9. package/dist/StudioUI-XV7HCEAF.mjs.map +0 -1
package/dist/{StudioUI-MVIOZTZH.js → StudioUI-P4TLZNF7.js} RENAMED
@@ -677,6 +677,13 @@ function StudioFolderPicker({ selectedItems, currentPath, onMove, onCancel }) {
677
677
  // src/components/R2SetupModal.tsx
678
678
 
679
679
 
680
+
681
+ var ENV_TEMPLATE = `CLOUDFLARE_R2_ACCOUNT_ID=your_account_id
682
+ CLOUDFLARE_R2_ACCESS_KEY_ID=your_access_key
683
+ CLOUDFLARE_R2_SECRET_ACCESS_KEY=your_secret_key
684
+ CLOUDFLARE_R2_BUCKET_NAME=your_bucket_name
685
+ CLOUDFLARE_R2_PUBLIC_URL=https://pub-xxx.r2.dev
686
+ NEXT_PUBLIC_CLOUDFLARE_R2_PUBLIC_URL=https://pub-xxx.r2.dev`;
680
687
  var styles3 = {
681
688
  overlay: _react3.css`
682
689
  position: fixed;
@@ -793,12 +800,16 @@ var styles3 = {
793
800
  text-decoration: underline;
794
801
  }
795
802
  `,
803
+ envVarsWrapper: _react3.css`
804
+ position: relative;
805
+ margin-top: 20px;
806
+ `,
796
807
  envVars: _react3.css`
797
808
  background: ${_chunkUFCWGUAGjs.colors.background};
798
809
  border: 1px solid ${_chunkUFCWGUAGjs.colors.border};
799
810
  border-radius: 8px;
800
811
  padding: 16px;
801
- margin-top: 20px;
812
+ padding-right: 48px;
802
813
  font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
803
814
  font-size: 13px;
804
815
  line-height: 1.8;
@@ -814,6 +825,57 @@ var styles3 = {
814
825
  envValue: _react3.css`
815
826
  color: ${_chunkUFCWGUAGjs.colors.textSecondary};
816
827
  `,
828
+ copyBtn: _react3.css`
829
+ position: absolute;
830
+ top: 8px;
831
+ right: 8px;
832
+ width: 32px;
833
+ height: 32px;
834
+ display: flex;
835
+ align-items: center;
836
+ justify-content: center;
837
+ background: ${_chunkUFCWGUAGjs.colors.surface};
838
+ border: 1px solid ${_chunkUFCWGUAGjs.colors.border};
839
+ border-radius: 6px;
840
+ cursor: pointer;
841
+ color: ${_chunkUFCWGUAGjs.colors.textMuted};
842
+ transition: all 0.15s ease;
843
+
844
+ &:hover {
845
+ background: ${_chunkUFCWGUAGjs.colors.surfaceHover};
846
+ color: ${_chunkUFCWGUAGjs.colors.text};
847
+ border-color: #d0d5dd;
848
+ }
849
+ `,
850
+ copyIcon: _react3.css`
851
+ width: 16px;
852
+ height: 16px;
853
+ `,
854
+ copiedTooltip: _react3.css`
855
+ position: absolute;
856
+ top: 50%;
857
+ right: 100%;
858
+ transform: translateY(-50%);
859
+ background: #1a1f36;
860
+ color: white;
861
+ padding: 4px 8px;
862
+ border-radius: 4px;
863
+ font-size: 12px;
864
+ white-space: nowrap;
865
+ margin-right: 6px;
866
+ pointer-events: none;
867
+
868
+ &::before {
869
+ content: '';
870
+ position: absolute;
871
+ right: -4px;
872
+ top: 50%;
873
+ transform: translateY(-50%);
874
+ border-left: 4px solid #1a1f36;
875
+ border-top: 4px solid transparent;
876
+ border-bottom: 4px solid transparent;
877
+ }
878
+ `,
817
879
  footer: _react3.css`
818
880
  padding: 16px 24px;
819
881
  border-top: 1px solid ${_chunkUFCWGUAGjs.colors.border};
@@ -862,6 +924,16 @@ var styles3 = {
862
924
  `
863
925
  };
864
926
  function R2SetupModal({ isOpen, onClose }) {
927
+ const [copied, setCopied] = _react.useState.call(void 0, false);
928
+ const handleCopy = async () => {
929
+ try {
930
+ await navigator.clipboard.writeText(ENV_TEMPLATE);
931
+ setCopied(true);
932
+ setTimeout(() => setCopied(false), 2e3);
933
+ } catch (error) {
934
+ console.error("Failed to copy:", error);
935
+ }
936
+ };
865
937
  if (!isOpen) return null;
866
938
  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: styles3.overlay, onClick: onClose, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles3.modal, onClick: (e) => e.stopPropagation(), children: [
867
939
  /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles3.header, children: [
@@ -926,31 +998,42 @@ function R2SetupModal({ isOpen, onClose }) {
926
998
  ] })
927
999
  ] })
928
1000
  ] }),
929
- /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles3.envVars, children: [
930
- /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { css: styles3.envVar, children: [
931
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { css: styles3.envKey, children: "CLOUDFLARE_R2_ACCOUNT_ID" }),
932
- "=",
933
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { css: styles3.envValue, children: "your_account_id" })
934
- ] }),
935
- /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { css: styles3.envVar, children: [
936
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { css: styles3.envKey, children: "CLOUDFLARE_R2_ACCESS_KEY_ID" }),
937
- "=",
938
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { css: styles3.envValue, children: "your_access_key" })
939
- ] }),
940
- /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { css: styles3.envVar, children: [
941
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { css: styles3.envKey, children: "CLOUDFLARE_R2_SECRET_ACCESS_KEY" }),
942
- "=",
943
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { css: styles3.envValue, children: "your_secret_key" })
944
- ] }),
945
- /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { css: styles3.envVar, children: [
946
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { css: styles3.envKey, children: "CLOUDFLARE_R2_BUCKET_NAME" }),
947
- "=",
948
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { css: styles3.envValue, children: "your_bucket_name" })
1001
+ /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles3.envVarsWrapper, children: [
1002
+ /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles3.envVars, children: [
1003
+ /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { css: styles3.envVar, children: [
1004
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { css: styles3.envKey, children: "CLOUDFLARE_R2_ACCOUNT_ID" }),
1005
+ "=",
1006
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { css: styles3.envValue, children: "your_account_id" })
1007
+ ] }),
1008
+ /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { css: styles3.envVar, children: [
1009
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { css: styles3.envKey, children: "CLOUDFLARE_R2_ACCESS_KEY_ID" }),
1010
+ "=",
1011
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { css: styles3.envValue, children: "your_access_key" })
1012
+ ] }),
1013
+ /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { css: styles3.envVar, children: [
1014
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { css: styles3.envKey, children: "CLOUDFLARE_R2_SECRET_ACCESS_KEY" }),
1015
+ "=",
1016
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { css: styles3.envValue, children: "your_secret_key" })
1017
+ ] }),
1018
+ /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { css: styles3.envVar, children: [
1019
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { css: styles3.envKey, children: "CLOUDFLARE_R2_BUCKET_NAME" }),
1020
+ "=",
1021
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { css: styles3.envValue, children: "your_bucket_name" })
1022
+ ] }),
1023
+ /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { css: styles3.envVar, children: [
1024
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { css: styles3.envKey, children: "CLOUDFLARE_R2_PUBLIC_URL" }),
1025
+ "=",
1026
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { css: styles3.envValue, children: "https://pub-xxx.r2.dev" })
1027
+ ] }),
1028
+ /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { css: styles3.envVar, children: [
1029
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { css: styles3.envKey, children: "NEXT_PUBLIC_CLOUDFLARE_R2_PUBLIC_URL" }),
1030
+ "=",
1031
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { css: styles3.envValue, children: "https://pub-xxx.r2.dev" })
1032
+ ] })
949
1033
  ] }),
950
- /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { css: styles3.envVar, children: [
951
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { css: styles3.envKey, children: "CLOUDFLARE_R2_PUBLIC_URL" }),
952
- "=",
953
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { css: styles3.envValue, children: "https://pub-xxx.r2.dev" })
1034
+ /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "button", { css: styles3.copyBtn, onClick: handleCopy, title: "Copy to clipboard", children: [
1035
+ copied && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { css: styles3.copiedTooltip, children: "Copied!" }),
1036
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles3.copyIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" }) })
954
1037
  ] })
955
1038
  ] })
956
1039
  ] }),
@@ -4442,4 +4525,4 @@ var StudioUI_default = StudioUI;
4442
4525
 
4443
4526
 
4444
4527
  exports.StudioUI = StudioUI; exports.default = StudioUI_default;
4445
- //# sourceMappingURL=StudioUI-MVIOZTZH.js.map
4528
+ //# sourceMappingURL=StudioUI-P4TLZNF7.js.map