@gallop.software/studio 0.1.82 → 0.1.84
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.
- package/dist/{StudioUI-VJVOSOPD.mjs → StudioUI-EER6PAXH.mjs} +987 -509
- package/dist/StudioUI-EER6PAXH.mjs.map +1 -0
- package/dist/{StudioUI-YFDO5MGG.js → StudioUI-VNSW7JUI.js} +691 -213
- package/dist/StudioUI-VNSW7JUI.js.map +1 -0
- package/dist/index.js +1 -1
- package/dist/index.mjs +1 -1
- package/package.json +1 -1
- package/dist/StudioUI-VJVOSOPD.mjs.map +0 -1
- package/dist/StudioUI-YFDO5MGG.js.map +0 -1
|
@@ -7,8 +7,8 @@ import {
|
|
|
7
7
|
} from "./chunk-HXE6XCG2.mjs";
|
|
8
8
|
|
|
9
9
|
// src/components/StudioUI.tsx
|
|
10
|
-
import { useEffect as useEffect3, useCallback as useCallback3, useState as
|
|
11
|
-
import { css as
|
|
10
|
+
import { useEffect as useEffect3, useCallback as useCallback3, useState as useState9 } from "react";
|
|
11
|
+
import { css as css10 } from "@emotion/react";
|
|
12
12
|
|
|
13
13
|
// src/components/StudioContext.tsx
|
|
14
14
|
import { createContext, useContext } from "react";
|
|
@@ -65,8 +65,8 @@ function useStudio() {
|
|
|
65
65
|
}
|
|
66
66
|
|
|
67
67
|
// src/components/StudioToolbar.tsx
|
|
68
|
-
import { useCallback, useRef, useState as
|
|
69
|
-
import { css as
|
|
68
|
+
import { useCallback, useRef, useState as useState3 } from "react";
|
|
69
|
+
import { css as css4, keyframes as keyframes3 } from "@emotion/react";
|
|
70
70
|
|
|
71
71
|
// src/components/StudioModal.tsx
|
|
72
72
|
import React from "react";
|
|
@@ -674,14 +674,390 @@ function StudioFolderPicker({ selectedItems, currentPath, onMove, onCancel }) {
|
|
|
674
674
|
] }) });
|
|
675
675
|
}
|
|
676
676
|
|
|
677
|
+
// src/components/R2SetupModal.tsx
|
|
678
|
+
import { useState as useState2 } from "react";
|
|
679
|
+
import { css as css3 } from "@emotion/react";
|
|
680
|
+
import { jsx as jsx3, jsxs as jsxs3 } from "@emotion/react/jsx-runtime";
|
|
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
|
+
var styles3 = {
|
|
687
|
+
overlay: css3`
|
|
688
|
+
position: fixed;
|
|
689
|
+
inset: 0;
|
|
690
|
+
background: rgba(0, 0, 0, 0.6);
|
|
691
|
+
display: flex;
|
|
692
|
+
align-items: center;
|
|
693
|
+
justify-content: center;
|
|
694
|
+
z-index: 1100;
|
|
695
|
+
padding: 20px;
|
|
696
|
+
`,
|
|
697
|
+
modal: css3`
|
|
698
|
+
background: ${colors.surface};
|
|
699
|
+
border-radius: 12px;
|
|
700
|
+
max-width: 560px;
|
|
701
|
+
width: 100%;
|
|
702
|
+
max-height: 90vh;
|
|
703
|
+
overflow-y: auto;
|
|
704
|
+
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
|
|
705
|
+
`,
|
|
706
|
+
header: css3`
|
|
707
|
+
display: flex;
|
|
708
|
+
align-items: center;
|
|
709
|
+
gap: 12px;
|
|
710
|
+
padding: 20px 24px;
|
|
711
|
+
border-bottom: 1px solid ${colors.border};
|
|
712
|
+
`,
|
|
713
|
+
icon: css3`
|
|
714
|
+
width: 32px;
|
|
715
|
+
height: 32px;
|
|
716
|
+
color: ${colors.primary};
|
|
717
|
+
flex-shrink: 0;
|
|
718
|
+
`,
|
|
719
|
+
title: css3`
|
|
720
|
+
font-size: ${fontSize.xl};
|
|
721
|
+
font-weight: 600;
|
|
722
|
+
color: ${colors.text};
|
|
723
|
+
margin: 0;
|
|
724
|
+
`,
|
|
725
|
+
closeBtn: css3`
|
|
726
|
+
margin-left: auto;
|
|
727
|
+
background: none;
|
|
728
|
+
border: none;
|
|
729
|
+
padding: 4px;
|
|
730
|
+
cursor: pointer;
|
|
731
|
+
color: ${colors.textMuted};
|
|
732
|
+
border-radius: 4px;
|
|
733
|
+
|
|
734
|
+
&:hover {
|
|
735
|
+
color: ${colors.text};
|
|
736
|
+
background: ${colors.surfaceHover};
|
|
737
|
+
}
|
|
738
|
+
`,
|
|
739
|
+
closeIcon: css3`
|
|
740
|
+
width: 20px;
|
|
741
|
+
height: 20px;
|
|
742
|
+
`,
|
|
743
|
+
content: css3`
|
|
744
|
+
padding: 24px;
|
|
745
|
+
`,
|
|
746
|
+
intro: css3`
|
|
747
|
+
font-size: ${fontSize.base};
|
|
748
|
+
color: ${colors.textSecondary};
|
|
749
|
+
margin: 0 0 20px 0;
|
|
750
|
+
line-height: 1.6;
|
|
751
|
+
`,
|
|
752
|
+
steps: css3`
|
|
753
|
+
list-style: none;
|
|
754
|
+
padding: 0;
|
|
755
|
+
margin: 0;
|
|
756
|
+
display: flex;
|
|
757
|
+
flex-direction: column;
|
|
758
|
+
gap: 16px;
|
|
759
|
+
`,
|
|
760
|
+
step: css3`
|
|
761
|
+
display: flex;
|
|
762
|
+
gap: 12px;
|
|
763
|
+
`,
|
|
764
|
+
stepNumber: css3`
|
|
765
|
+
width: 28px;
|
|
766
|
+
height: 28px;
|
|
767
|
+
border-radius: 50%;
|
|
768
|
+
background: ${colors.primaryLight};
|
|
769
|
+
color: ${colors.primary};
|
|
770
|
+
font-size: ${fontSize.sm};
|
|
771
|
+
font-weight: 600;
|
|
772
|
+
display: flex;
|
|
773
|
+
align-items: center;
|
|
774
|
+
justify-content: center;
|
|
775
|
+
flex-shrink: 0;
|
|
776
|
+
`,
|
|
777
|
+
stepContent: css3`
|
|
778
|
+
flex: 1;
|
|
779
|
+
padding-top: 3px;
|
|
780
|
+
`,
|
|
781
|
+
stepTitle: css3`
|
|
782
|
+
font-size: ${fontSize.base};
|
|
783
|
+
font-weight: 500;
|
|
784
|
+
color: ${colors.text};
|
|
785
|
+
margin: 0 0 4px 0;
|
|
786
|
+
`,
|
|
787
|
+
stepDesc: css3`
|
|
788
|
+
font-size: ${fontSize.sm};
|
|
789
|
+
color: ${colors.textSecondary};
|
|
790
|
+
margin: 0;
|
|
791
|
+
line-height: 1.5;
|
|
792
|
+
`,
|
|
793
|
+
link: css3`
|
|
794
|
+
color: ${colors.primary};
|
|
795
|
+
text-decoration: none;
|
|
796
|
+
font-weight: 500;
|
|
797
|
+
|
|
798
|
+
&:hover {
|
|
799
|
+
text-decoration: underline;
|
|
800
|
+
}
|
|
801
|
+
`,
|
|
802
|
+
envVarsWrapper: css3`
|
|
803
|
+
position: relative;
|
|
804
|
+
margin-top: 20px;
|
|
805
|
+
`,
|
|
806
|
+
envVars: css3`
|
|
807
|
+
background: ${colors.background};
|
|
808
|
+
border: 1px solid ${colors.border};
|
|
809
|
+
border-radius: 8px;
|
|
810
|
+
padding: 16px;
|
|
811
|
+
padding-right: 48px;
|
|
812
|
+
font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
|
|
813
|
+
font-size: 13px;
|
|
814
|
+
line-height: 1.8;
|
|
815
|
+
color: ${colors.text};
|
|
816
|
+
overflow-x: auto;
|
|
817
|
+
`,
|
|
818
|
+
envVar: css3`
|
|
819
|
+
display: block;
|
|
820
|
+
`,
|
|
821
|
+
envKey: css3`
|
|
822
|
+
color: ${colors.primary};
|
|
823
|
+
`,
|
|
824
|
+
envValue: css3`
|
|
825
|
+
color: ${colors.textSecondary};
|
|
826
|
+
`,
|
|
827
|
+
copyBtn: css3`
|
|
828
|
+
position: absolute;
|
|
829
|
+
top: 8px;
|
|
830
|
+
right: 8px;
|
|
831
|
+
width: 32px;
|
|
832
|
+
height: 32px;
|
|
833
|
+
display: flex;
|
|
834
|
+
align-items: center;
|
|
835
|
+
justify-content: center;
|
|
836
|
+
background: ${colors.surface};
|
|
837
|
+
border: 1px solid ${colors.border};
|
|
838
|
+
border-radius: 6px;
|
|
839
|
+
cursor: pointer;
|
|
840
|
+
color: ${colors.textMuted};
|
|
841
|
+
transition: all 0.15s ease;
|
|
842
|
+
|
|
843
|
+
&:hover {
|
|
844
|
+
background: ${colors.surfaceHover};
|
|
845
|
+
color: ${colors.text};
|
|
846
|
+
border-color: #d0d5dd;
|
|
847
|
+
}
|
|
848
|
+
`,
|
|
849
|
+
copyIcon: css3`
|
|
850
|
+
width: 16px;
|
|
851
|
+
height: 16px;
|
|
852
|
+
`,
|
|
853
|
+
copiedTooltip: css3`
|
|
854
|
+
position: absolute;
|
|
855
|
+
top: 50%;
|
|
856
|
+
right: 100%;
|
|
857
|
+
transform: translateY(-50%);
|
|
858
|
+
background: #1a1f36;
|
|
859
|
+
color: white;
|
|
860
|
+
padding: 4px 8px;
|
|
861
|
+
border-radius: 4px;
|
|
862
|
+
font-size: 12px;
|
|
863
|
+
white-space: nowrap;
|
|
864
|
+
margin-right: 6px;
|
|
865
|
+
pointer-events: none;
|
|
866
|
+
|
|
867
|
+
&::before {
|
|
868
|
+
content: '';
|
|
869
|
+
position: absolute;
|
|
870
|
+
right: -4px;
|
|
871
|
+
top: 50%;
|
|
872
|
+
transform: translateY(-50%);
|
|
873
|
+
border-left: 4px solid #1a1f36;
|
|
874
|
+
border-top: 4px solid transparent;
|
|
875
|
+
border-bottom: 4px solid transparent;
|
|
876
|
+
}
|
|
877
|
+
`,
|
|
878
|
+
footer: css3`
|
|
879
|
+
padding: 16px 24px;
|
|
880
|
+
border-top: 1px solid ${colors.border};
|
|
881
|
+
display: flex;
|
|
882
|
+
justify-content: flex-end;
|
|
883
|
+
gap: 12px;
|
|
884
|
+
`,
|
|
885
|
+
docsBtn: css3`
|
|
886
|
+
padding: 10px 16px;
|
|
887
|
+
border-radius: 6px;
|
|
888
|
+
font-size: ${fontSize.base};
|
|
889
|
+
font-weight: 500;
|
|
890
|
+
border: 1px solid ${colors.border};
|
|
891
|
+
background: ${colors.surface};
|
|
892
|
+
color: ${colors.text};
|
|
893
|
+
cursor: pointer;
|
|
894
|
+
text-decoration: none;
|
|
895
|
+
display: inline-flex;
|
|
896
|
+
align-items: center;
|
|
897
|
+
gap: 6px;
|
|
898
|
+
transition: all 0.15s ease;
|
|
899
|
+
|
|
900
|
+
&:hover {
|
|
901
|
+
background: ${colors.surfaceHover};
|
|
902
|
+
border-color: #d0d5dd;
|
|
903
|
+
}
|
|
904
|
+
`,
|
|
905
|
+
doneBtn: css3`
|
|
906
|
+
padding: 10px 20px;
|
|
907
|
+
border-radius: 6px;
|
|
908
|
+
font-size: ${fontSize.base};
|
|
909
|
+
font-weight: 500;
|
|
910
|
+
border: none;
|
|
911
|
+
background: ${colors.primary};
|
|
912
|
+
color: white;
|
|
913
|
+
cursor: pointer;
|
|
914
|
+
transition: background 0.15s ease;
|
|
915
|
+
|
|
916
|
+
&:hover {
|
|
917
|
+
background: ${colors.primaryHover};
|
|
918
|
+
}
|
|
919
|
+
`,
|
|
920
|
+
externalIcon: css3`
|
|
921
|
+
width: 14px;
|
|
922
|
+
height: 14px;
|
|
923
|
+
`
|
|
924
|
+
};
|
|
925
|
+
function R2SetupModal({ isOpen, onClose }) {
|
|
926
|
+
const [copied, setCopied] = useState2(false);
|
|
927
|
+
const handleCopy = async () => {
|
|
928
|
+
try {
|
|
929
|
+
await navigator.clipboard.writeText(ENV_TEMPLATE);
|
|
930
|
+
setCopied(true);
|
|
931
|
+
setTimeout(() => setCopied(false), 2e3);
|
|
932
|
+
} catch (error) {
|
|
933
|
+
console.error("Failed to copy:", error);
|
|
934
|
+
}
|
|
935
|
+
};
|
|
936
|
+
if (!isOpen) return null;
|
|
937
|
+
return /* @__PURE__ */ jsx3("div", { css: styles3.overlay, onClick: onClose, children: /* @__PURE__ */ jsxs3("div", { css: styles3.modal, onClick: (e) => e.stopPropagation(), children: [
|
|
938
|
+
/* @__PURE__ */ jsxs3("div", { css: styles3.header, children: [
|
|
939
|
+
/* @__PURE__ */ jsx3("svg", { css: styles3.icon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx3("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z" }) }),
|
|
940
|
+
/* @__PURE__ */ jsx3("h2", { css: styles3.title, children: "Set Up CDN Storage" }),
|
|
941
|
+
/* @__PURE__ */ jsx3("button", { css: styles3.closeBtn, onClick: onClose, children: /* @__PURE__ */ jsx3("svg", { css: styles3.closeIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx3("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) })
|
|
942
|
+
] }),
|
|
943
|
+
/* @__PURE__ */ jsxs3("div", { css: styles3.content, children: [
|
|
944
|
+
/* @__PURE__ */ jsx3("p", { css: styles3.intro, children: "Sync your images to Cloudflare R2 for faster global delivery. R2 offers generous free tier with no egress fees." }),
|
|
945
|
+
/* @__PURE__ */ jsxs3("ol", { css: styles3.steps, children: [
|
|
946
|
+
/* @__PURE__ */ jsxs3("li", { css: styles3.step, children: [
|
|
947
|
+
/* @__PURE__ */ jsx3("span", { css: styles3.stepNumber, children: "1" }),
|
|
948
|
+
/* @__PURE__ */ jsxs3("div", { css: styles3.stepContent, children: [
|
|
949
|
+
/* @__PURE__ */ jsx3("h4", { css: styles3.stepTitle, children: "Create a Cloudflare account" }),
|
|
950
|
+
/* @__PURE__ */ jsxs3("p", { css: styles3.stepDesc, children: [
|
|
951
|
+
"Sign up at",
|
|
952
|
+
" ",
|
|
953
|
+
/* @__PURE__ */ jsx3("a", { css: styles3.link, href: "https://dash.cloudflare.com/sign-up", target: "_blank", rel: "noopener noreferrer", children: "dash.cloudflare.com" }),
|
|
954
|
+
" ",
|
|
955
|
+
"if you don't have one already."
|
|
956
|
+
] })
|
|
957
|
+
] })
|
|
958
|
+
] }),
|
|
959
|
+
/* @__PURE__ */ jsxs3("li", { css: styles3.step, children: [
|
|
960
|
+
/* @__PURE__ */ jsx3("span", { css: styles3.stepNumber, children: "2" }),
|
|
961
|
+
/* @__PURE__ */ jsxs3("div", { css: styles3.stepContent, children: [
|
|
962
|
+
/* @__PURE__ */ jsx3("h4", { css: styles3.stepTitle, children: "Create an R2 bucket" }),
|
|
963
|
+
/* @__PURE__ */ jsxs3("p", { css: styles3.stepDesc, children: [
|
|
964
|
+
"Go to R2 in your Cloudflare dashboard and create a new bucket. Choose a name like ",
|
|
965
|
+
/* @__PURE__ */ jsx3("code", { children: "my-images" }),
|
|
966
|
+
"."
|
|
967
|
+
] })
|
|
968
|
+
] })
|
|
969
|
+
] }),
|
|
970
|
+
/* @__PURE__ */ jsxs3("li", { css: styles3.step, children: [
|
|
971
|
+
/* @__PURE__ */ jsx3("span", { css: styles3.stepNumber, children: "3" }),
|
|
972
|
+
/* @__PURE__ */ jsxs3("div", { css: styles3.stepContent, children: [
|
|
973
|
+
/* @__PURE__ */ jsx3("h4", { css: styles3.stepTitle, children: "Enable public access" }),
|
|
974
|
+
/* @__PURE__ */ jsxs3("p", { css: styles3.stepDesc, children: [
|
|
975
|
+
'In bucket settings, enable "Public Access" and copy the public URL (e.g., ',
|
|
976
|
+
/* @__PURE__ */ jsx3("code", { children: "https://pub-xxx.r2.dev" }),
|
|
977
|
+
")."
|
|
978
|
+
] })
|
|
979
|
+
] })
|
|
980
|
+
] }),
|
|
981
|
+
/* @__PURE__ */ jsxs3("li", { css: styles3.step, children: [
|
|
982
|
+
/* @__PURE__ */ jsx3("span", { css: styles3.stepNumber, children: "4" }),
|
|
983
|
+
/* @__PURE__ */ jsxs3("div", { css: styles3.stepContent, children: [
|
|
984
|
+
/* @__PURE__ */ jsx3("h4", { css: styles3.stepTitle, children: "Create API token" }),
|
|
985
|
+
/* @__PURE__ */ jsx3("p", { css: styles3.stepDesc, children: 'Go to R2 \u2192 Manage R2 API Tokens \u2192 Create API Token. Select "Object Read & Write" permissions for your bucket.' })
|
|
986
|
+
] })
|
|
987
|
+
] }),
|
|
988
|
+
/* @__PURE__ */ jsxs3("li", { css: styles3.step, children: [
|
|
989
|
+
/* @__PURE__ */ jsx3("span", { css: styles3.stepNumber, children: "5" }),
|
|
990
|
+
/* @__PURE__ */ jsxs3("div", { css: styles3.stepContent, children: [
|
|
991
|
+
/* @__PURE__ */ jsx3("h4", { css: styles3.stepTitle, children: "Add environment variables" }),
|
|
992
|
+
/* @__PURE__ */ jsxs3("p", { css: styles3.stepDesc, children: [
|
|
993
|
+
"Add these to your ",
|
|
994
|
+
/* @__PURE__ */ jsx3("code", { children: ".env.local" }),
|
|
995
|
+
" file:"
|
|
996
|
+
] })
|
|
997
|
+
] })
|
|
998
|
+
] })
|
|
999
|
+
] }),
|
|
1000
|
+
/* @__PURE__ */ jsxs3("div", { css: styles3.envVarsWrapper, children: [
|
|
1001
|
+
/* @__PURE__ */ jsxs3("div", { css: styles3.envVars, children: [
|
|
1002
|
+
/* @__PURE__ */ jsxs3("span", { css: styles3.envVar, children: [
|
|
1003
|
+
/* @__PURE__ */ jsx3("span", { css: styles3.envKey, children: "CLOUDFLARE_R2_ACCOUNT_ID" }),
|
|
1004
|
+
"=",
|
|
1005
|
+
/* @__PURE__ */ jsx3("span", { css: styles3.envValue, children: "your_account_id" })
|
|
1006
|
+
] }),
|
|
1007
|
+
/* @__PURE__ */ jsxs3("span", { css: styles3.envVar, children: [
|
|
1008
|
+
/* @__PURE__ */ jsx3("span", { css: styles3.envKey, children: "CLOUDFLARE_R2_ACCESS_KEY_ID" }),
|
|
1009
|
+
"=",
|
|
1010
|
+
/* @__PURE__ */ jsx3("span", { css: styles3.envValue, children: "your_access_key" })
|
|
1011
|
+
] }),
|
|
1012
|
+
/* @__PURE__ */ jsxs3("span", { css: styles3.envVar, children: [
|
|
1013
|
+
/* @__PURE__ */ jsx3("span", { css: styles3.envKey, children: "CLOUDFLARE_R2_SECRET_ACCESS_KEY" }),
|
|
1014
|
+
"=",
|
|
1015
|
+
/* @__PURE__ */ jsx3("span", { css: styles3.envValue, children: "your_secret_key" })
|
|
1016
|
+
] }),
|
|
1017
|
+
/* @__PURE__ */ jsxs3("span", { css: styles3.envVar, children: [
|
|
1018
|
+
/* @__PURE__ */ jsx3("span", { css: styles3.envKey, children: "CLOUDFLARE_R2_BUCKET_NAME" }),
|
|
1019
|
+
"=",
|
|
1020
|
+
/* @__PURE__ */ jsx3("span", { css: styles3.envValue, children: "your_bucket_name" })
|
|
1021
|
+
] }),
|
|
1022
|
+
/* @__PURE__ */ jsxs3("span", { css: styles3.envVar, children: [
|
|
1023
|
+
/* @__PURE__ */ jsx3("span", { css: styles3.envKey, children: "CLOUDFLARE_R2_PUBLIC_URL" }),
|
|
1024
|
+
"=",
|
|
1025
|
+
/* @__PURE__ */ jsx3("span", { css: styles3.envValue, children: "https://pub-xxx.r2.dev" })
|
|
1026
|
+
] })
|
|
1027
|
+
] }),
|
|
1028
|
+
/* @__PURE__ */ jsxs3("button", { css: styles3.copyBtn, onClick: handleCopy, title: "Copy to clipboard", children: [
|
|
1029
|
+
copied && /* @__PURE__ */ jsx3("span", { css: styles3.copiedTooltip, children: "Copied!" }),
|
|
1030
|
+
/* @__PURE__ */ jsx3("svg", { css: styles3.copyIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx3("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" }) })
|
|
1031
|
+
] })
|
|
1032
|
+
] })
|
|
1033
|
+
] }),
|
|
1034
|
+
/* @__PURE__ */ jsxs3("div", { css: styles3.footer, children: [
|
|
1035
|
+
/* @__PURE__ */ jsxs3(
|
|
1036
|
+
"a",
|
|
1037
|
+
{
|
|
1038
|
+
css: styles3.docsBtn,
|
|
1039
|
+
href: "https://developers.cloudflare.com/r2/get-started/",
|
|
1040
|
+
target: "_blank",
|
|
1041
|
+
rel: "noopener noreferrer",
|
|
1042
|
+
children: [
|
|
1043
|
+
"R2 Documentation",
|
|
1044
|
+
/* @__PURE__ */ jsx3("svg", { css: styles3.externalIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx3("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" }) })
|
|
1045
|
+
]
|
|
1046
|
+
}
|
|
1047
|
+
),
|
|
1048
|
+
/* @__PURE__ */ jsx3("button", { css: styles3.doneBtn, onClick: onClose, children: "Got it" })
|
|
1049
|
+
] })
|
|
1050
|
+
] }) });
|
|
1051
|
+
}
|
|
1052
|
+
|
|
677
1053
|
// src/components/StudioToolbar.tsx
|
|
678
|
-
import { Fragment as Fragment2, jsx as
|
|
1054
|
+
import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs4 } from "@emotion/react/jsx-runtime";
|
|
679
1055
|
var btnHeight = "36px";
|
|
680
1056
|
var spin = keyframes3`
|
|
681
1057
|
to { transform: rotate(360deg); }
|
|
682
1058
|
`;
|
|
683
|
-
var
|
|
684
|
-
toolbar:
|
|
1059
|
+
var styles4 = {
|
|
1060
|
+
toolbar: css4`
|
|
685
1061
|
display: flex;
|
|
686
1062
|
flex-wrap: nowrap;
|
|
687
1063
|
align-items: center;
|
|
@@ -697,21 +1073,21 @@ var styles3 = {
|
|
|
697
1073
|
padding: 12px 24px;
|
|
698
1074
|
}
|
|
699
1075
|
`,
|
|
700
|
-
left:
|
|
1076
|
+
left: css4`
|
|
701
1077
|
display: flex;
|
|
702
1078
|
flex-wrap: nowrap;
|
|
703
1079
|
flex-shrink: 0;
|
|
704
1080
|
align-items: center;
|
|
705
1081
|
gap: 8px;
|
|
706
1082
|
`,
|
|
707
|
-
right:
|
|
1083
|
+
right: css4`
|
|
708
1084
|
display: flex;
|
|
709
1085
|
flex-wrap: nowrap;
|
|
710
1086
|
flex-shrink: 0;
|
|
711
1087
|
align-items: center;
|
|
712
1088
|
gap: 8px;
|
|
713
1089
|
`,
|
|
714
|
-
btn:
|
|
1090
|
+
btn: css4`
|
|
715
1091
|
display: inline-flex;
|
|
716
1092
|
align-items: center;
|
|
717
1093
|
justify-content: center;
|
|
@@ -738,10 +1114,10 @@ var styles3 = {
|
|
|
738
1114
|
opacity: 0.5;
|
|
739
1115
|
}
|
|
740
1116
|
`,
|
|
741
|
-
btnIconOnly:
|
|
1117
|
+
btnIconOnly: css4`
|
|
742
1118
|
padding: 0 10px;
|
|
743
1119
|
`,
|
|
744
|
-
btnPrimary:
|
|
1120
|
+
btnPrimary: css4`
|
|
745
1121
|
background: ${colors.primary};
|
|
746
1122
|
border-color: ${colors.primary};
|
|
747
1123
|
color: white;
|
|
@@ -751,7 +1127,7 @@ var styles3 = {
|
|
|
751
1127
|
border-color: ${colors.primaryHover};
|
|
752
1128
|
}
|
|
753
1129
|
`,
|
|
754
|
-
btnDanger:
|
|
1130
|
+
btnDanger: css4`
|
|
755
1131
|
color: ${colors.danger};
|
|
756
1132
|
|
|
757
1133
|
&:hover:not(:disabled) {
|
|
@@ -759,14 +1135,14 @@ var styles3 = {
|
|
|
759
1135
|
border-color: ${colors.danger};
|
|
760
1136
|
}
|
|
761
1137
|
`,
|
|
762
|
-
icon:
|
|
1138
|
+
icon: css4`
|
|
763
1139
|
width: 16px;
|
|
764
1140
|
height: 16px;
|
|
765
1141
|
`,
|
|
766
|
-
iconSpin:
|
|
1142
|
+
iconSpin: css4`
|
|
767
1143
|
animation: ${spin} 1s linear infinite;
|
|
768
1144
|
`,
|
|
769
|
-
selectionCount:
|
|
1145
|
+
selectionCount: css4`
|
|
770
1146
|
font-size: ${fontSize.base};
|
|
771
1147
|
color: ${colors.textSecondary};
|
|
772
1148
|
display: flex;
|
|
@@ -774,7 +1150,7 @@ var styles3 = {
|
|
|
774
1150
|
gap: 8px;
|
|
775
1151
|
margin-right: 8px;
|
|
776
1152
|
`,
|
|
777
|
-
clearBtn:
|
|
1153
|
+
clearBtn: css4`
|
|
778
1154
|
color: ${colors.primary};
|
|
779
1155
|
background: none;
|
|
780
1156
|
border: none;
|
|
@@ -787,13 +1163,13 @@ var styles3 = {
|
|
|
787
1163
|
text-decoration: underline;
|
|
788
1164
|
}
|
|
789
1165
|
`,
|
|
790
|
-
divider:
|
|
1166
|
+
divider: css4`
|
|
791
1167
|
width: 1px;
|
|
792
1168
|
height: 24px;
|
|
793
1169
|
background: ${colors.border};
|
|
794
1170
|
margin: 0 4px;
|
|
795
1171
|
`,
|
|
796
|
-
viewToggle:
|
|
1172
|
+
viewToggle: css4`
|
|
797
1173
|
display: flex;
|
|
798
1174
|
align-items: center;
|
|
799
1175
|
height: ${btnHeight};
|
|
@@ -802,12 +1178,12 @@ var styles3 = {
|
|
|
802
1178
|
border-radius: 6px;
|
|
803
1179
|
overflow: hidden;
|
|
804
1180
|
`,
|
|
805
|
-
searchWrapper:
|
|
1181
|
+
searchWrapper: css4`
|
|
806
1182
|
position: relative;
|
|
807
1183
|
display: flex;
|
|
808
1184
|
align-items: center;
|
|
809
1185
|
`,
|
|
810
|
-
searchInput:
|
|
1186
|
+
searchInput: css4`
|
|
811
1187
|
height: ${btnHeight};
|
|
812
1188
|
padding: 0 32px 0 12px;
|
|
813
1189
|
border: 1px solid ${colors.border};
|
|
@@ -828,7 +1204,7 @@ var styles3 = {
|
|
|
828
1204
|
color: ${colors.textMuted};
|
|
829
1205
|
}
|
|
830
1206
|
`,
|
|
831
|
-
searchClearBtn:
|
|
1207
|
+
searchClearBtn: css4`
|
|
832
1208
|
position: absolute;
|
|
833
1209
|
right: 5px;
|
|
834
1210
|
top: 5px;
|
|
@@ -848,7 +1224,7 @@ var styles3 = {
|
|
|
848
1224
|
background: ${colors.primaryHover};
|
|
849
1225
|
}
|
|
850
1226
|
`,
|
|
851
|
-
viewBtn:
|
|
1227
|
+
viewBtn: css4`
|
|
852
1228
|
height: 100%;
|
|
853
1229
|
padding: 0 10px;
|
|
854
1230
|
background: transparent;
|
|
@@ -865,7 +1241,7 @@ var styles3 = {
|
|
|
865
1241
|
background-color: ${colors.surfaceHover};
|
|
866
1242
|
}
|
|
867
1243
|
`,
|
|
868
|
-
viewBtnActive:
|
|
1244
|
+
viewBtnActive: css4`
|
|
869
1245
|
background-color: ${colors.primaryLight};
|
|
870
1246
|
color: ${colors.primary};
|
|
871
1247
|
|
|
@@ -879,25 +1255,27 @@ function StudioToolbar() {
|
|
|
879
1255
|
const { selectedItems, viewMode, setViewMode, clearSelection, currentPath, triggerRefresh, focusedItem } = useStudio();
|
|
880
1256
|
const fileInputRef = useRef(null);
|
|
881
1257
|
const abortControllerRef = useRef(null);
|
|
882
|
-
const [uploading, setUploading] =
|
|
883
|
-
const [refreshing, setRefreshing] =
|
|
884
|
-
const [processing, setProcessing] =
|
|
885
|
-
const [showDeleteConfirm, setShowDeleteConfirm] =
|
|
886
|
-
const [showProcessConfirm, setShowProcessConfirm] =
|
|
887
|
-
const [showProgress, setShowProgress] =
|
|
888
|
-
const [progressState, setProgressState] =
|
|
1258
|
+
const [uploading, setUploading] = useState3(false);
|
|
1259
|
+
const [refreshing, setRefreshing] = useState3(false);
|
|
1260
|
+
const [processing, setProcessing] = useState3(false);
|
|
1261
|
+
const [showDeleteConfirm, setShowDeleteConfirm] = useState3(false);
|
|
1262
|
+
const [showProcessConfirm, setShowProcessConfirm] = useState3(false);
|
|
1263
|
+
const [showProgress, setShowProgress] = useState3(false);
|
|
1264
|
+
const [progressState, setProgressState] = useState3({
|
|
889
1265
|
current: 0,
|
|
890
1266
|
total: 0,
|
|
891
1267
|
percent: 0,
|
|
892
1268
|
status: "processing"
|
|
893
1269
|
});
|
|
894
|
-
const [processCount, setProcessCount] =
|
|
895
|
-
const [processMode, setProcessMode] =
|
|
896
|
-
const [imagesToProcess, setImagesToProcess] =
|
|
897
|
-
const [alertMessage, setAlertMessage] =
|
|
898
|
-
const [showNewFolderModal, setShowNewFolderModal] =
|
|
899
|
-
const [showRenameFolderModal, setShowRenameFolderModal] =
|
|
900
|
-
const [showMoveModal, setShowMoveModal] =
|
|
1270
|
+
const [processCount, setProcessCount] = useState3(0);
|
|
1271
|
+
const [processMode, setProcessMode] = useState3("all");
|
|
1272
|
+
const [imagesToProcess, setImagesToProcess] = useState3([]);
|
|
1273
|
+
const [alertMessage, setAlertMessage] = useState3(null);
|
|
1274
|
+
const [showNewFolderModal, setShowNewFolderModal] = useState3(false);
|
|
1275
|
+
const [showRenameFolderModal, setShowRenameFolderModal] = useState3(false);
|
|
1276
|
+
const [showMoveModal, setShowMoveModal] = useState3(false);
|
|
1277
|
+
const [showR2SetupModal, setShowR2SetupModal] = useState3(false);
|
|
1278
|
+
const [syncing, setSyncing] = useState3(false);
|
|
901
1279
|
const isInImagesFolder = currentPath === "public/images" || currentPath.startsWith("public/images/");
|
|
902
1280
|
const handleUpload = useCallback(() => {
|
|
903
1281
|
fileInputRef.current?.click();
|
|
@@ -1194,9 +1572,60 @@ function StudioToolbar() {
|
|
|
1194
1572
|
});
|
|
1195
1573
|
}
|
|
1196
1574
|
}, [selectedItems, clearSelection, triggerRefresh]);
|
|
1197
|
-
const handleSyncCdn = useCallback(() => {
|
|
1198
|
-
|
|
1199
|
-
|
|
1575
|
+
const handleSyncCdn = useCallback(async () => {
|
|
1576
|
+
if (selectedItems.size === 0) return;
|
|
1577
|
+
const imageKeys = Array.from(selectedItems).filter((p) => !p.endsWith("/")).map((p) => "/" + p.replace(/^public\//, ""));
|
|
1578
|
+
if (imageKeys.length === 0) {
|
|
1579
|
+
setAlertMessage({
|
|
1580
|
+
title: "No Images Selected",
|
|
1581
|
+
message: "Please select image files to sync to CDN."
|
|
1582
|
+
});
|
|
1583
|
+
return;
|
|
1584
|
+
}
|
|
1585
|
+
setSyncing(true);
|
|
1586
|
+
try {
|
|
1587
|
+
const response = await fetch("/api/studio/sync", {
|
|
1588
|
+
method: "POST",
|
|
1589
|
+
headers: { "Content-Type": "application/json" },
|
|
1590
|
+
body: JSON.stringify({ imageKeys })
|
|
1591
|
+
});
|
|
1592
|
+
const data = await response.json();
|
|
1593
|
+
if (response.ok) {
|
|
1594
|
+
const syncedCount = data.synced?.length || 0;
|
|
1595
|
+
const errorCount = data.errors?.length || 0;
|
|
1596
|
+
if (errorCount > 0) {
|
|
1597
|
+
setAlertMessage({
|
|
1598
|
+
title: "Sync Partially Complete",
|
|
1599
|
+
message: `Synced ${syncedCount} images. ${errorCount} failed.`
|
|
1600
|
+
});
|
|
1601
|
+
} else {
|
|
1602
|
+
setAlertMessage({
|
|
1603
|
+
title: "Sync Complete",
|
|
1604
|
+
message: `Successfully synced ${syncedCount} images to CDN.`
|
|
1605
|
+
});
|
|
1606
|
+
}
|
|
1607
|
+
clearSelection();
|
|
1608
|
+
triggerRefresh();
|
|
1609
|
+
} else {
|
|
1610
|
+
if (data.error?.includes("R2 not configured") || data.error?.includes("CLOUDFLARE_R2")) {
|
|
1611
|
+
setShowR2SetupModal(true);
|
|
1612
|
+
} else {
|
|
1613
|
+
setAlertMessage({
|
|
1614
|
+
title: "Sync Failed",
|
|
1615
|
+
message: data.error || "Failed to sync to CDN."
|
|
1616
|
+
});
|
|
1617
|
+
}
|
|
1618
|
+
}
|
|
1619
|
+
} catch (error) {
|
|
1620
|
+
console.error("Sync error:", error);
|
|
1621
|
+
setAlertMessage({
|
|
1622
|
+
title: "Sync Failed",
|
|
1623
|
+
message: "Failed to sync to CDN. Check console for details."
|
|
1624
|
+
});
|
|
1625
|
+
} finally {
|
|
1626
|
+
setSyncing(false);
|
|
1627
|
+
}
|
|
1628
|
+
}, [selectedItems, clearSelection, triggerRefresh]);
|
|
1200
1629
|
const handleCreateFolder = useCallback(async (folderName) => {
|
|
1201
1630
|
setShowNewFolderModal(false);
|
|
1202
1631
|
try {
|
|
@@ -1293,8 +1722,8 @@ function StudioToolbar() {
|
|
|
1293
1722
|
if (focusedItem) {
|
|
1294
1723
|
return null;
|
|
1295
1724
|
}
|
|
1296
|
-
return /* @__PURE__ */
|
|
1297
|
-
showDeleteConfirm && /* @__PURE__ */
|
|
1725
|
+
return /* @__PURE__ */ jsxs4(Fragment2, { children: [
|
|
1726
|
+
showDeleteConfirm && /* @__PURE__ */ jsx4(
|
|
1298
1727
|
ConfirmModal,
|
|
1299
1728
|
{
|
|
1300
1729
|
title: "Delete Items",
|
|
@@ -1305,7 +1734,7 @@ function StudioToolbar() {
|
|
|
1305
1734
|
onCancel: () => setShowDeleteConfirm(false)
|
|
1306
1735
|
}
|
|
1307
1736
|
),
|
|
1308
|
-
showProcessConfirm && /* @__PURE__ */
|
|
1737
|
+
showProcessConfirm && /* @__PURE__ */ jsx4(
|
|
1309
1738
|
ConfirmModal,
|
|
1310
1739
|
{
|
|
1311
1740
|
title: "Process Images",
|
|
@@ -1315,7 +1744,7 @@ function StudioToolbar() {
|
|
|
1315
1744
|
onCancel: () => setShowProcessConfirm(false)
|
|
1316
1745
|
}
|
|
1317
1746
|
),
|
|
1318
|
-
showProgress && /* @__PURE__ */
|
|
1747
|
+
showProgress && /* @__PURE__ */ jsx4(
|
|
1319
1748
|
ProgressModal,
|
|
1320
1749
|
{
|
|
1321
1750
|
title: "Processing Images",
|
|
@@ -1332,7 +1761,7 @@ function StudioToolbar() {
|
|
|
1332
1761
|
}
|
|
1333
1762
|
}
|
|
1334
1763
|
),
|
|
1335
|
-
showNewFolderModal && /* @__PURE__ */
|
|
1764
|
+
showNewFolderModal && /* @__PURE__ */ jsx4(
|
|
1336
1765
|
InputModal,
|
|
1337
1766
|
{
|
|
1338
1767
|
title: "New Folder",
|
|
@@ -1343,7 +1772,7 @@ function StudioToolbar() {
|
|
|
1343
1772
|
onCancel: () => setShowNewFolderModal(false)
|
|
1344
1773
|
}
|
|
1345
1774
|
),
|
|
1346
|
-
showMoveModal && /* @__PURE__ */
|
|
1775
|
+
showMoveModal && /* @__PURE__ */ jsx4(
|
|
1347
1776
|
StudioFolderPicker,
|
|
1348
1777
|
{
|
|
1349
1778
|
selectedItems,
|
|
@@ -1355,7 +1784,7 @@ function StudioToolbar() {
|
|
|
1355
1784
|
onCancel: () => setShowMoveModal(false)
|
|
1356
1785
|
}
|
|
1357
1786
|
),
|
|
1358
|
-
showRenameFolderModal && selectedFolderPath && /* @__PURE__ */
|
|
1787
|
+
showRenameFolderModal && selectedFolderPath && /* @__PURE__ */ jsx4(
|
|
1359
1788
|
InputModal,
|
|
1360
1789
|
{
|
|
1361
1790
|
title: "Rename Folder",
|
|
@@ -1367,7 +1796,7 @@ function StudioToolbar() {
|
|
|
1367
1796
|
onCancel: () => setShowRenameFolderModal(false)
|
|
1368
1797
|
}
|
|
1369
1798
|
),
|
|
1370
|
-
alertMessage && /* @__PURE__ */
|
|
1799
|
+
alertMessage && /* @__PURE__ */ jsx4(
|
|
1371
1800
|
AlertModal,
|
|
1372
1801
|
{
|
|
1373
1802
|
title: alertMessage.title,
|
|
@@ -1375,8 +1804,15 @@ function StudioToolbar() {
|
|
|
1375
1804
|
onClose: () => setAlertMessage(null)
|
|
1376
1805
|
}
|
|
1377
1806
|
),
|
|
1378
|
-
/* @__PURE__ */
|
|
1379
|
-
|
|
1807
|
+
/* @__PURE__ */ jsx4(
|
|
1808
|
+
R2SetupModal,
|
|
1809
|
+
{
|
|
1810
|
+
isOpen: showR2SetupModal,
|
|
1811
|
+
onClose: () => setShowR2SetupModal(false)
|
|
1812
|
+
}
|
|
1813
|
+
),
|
|
1814
|
+
/* @__PURE__ */ jsxs4("div", { css: styles4.toolbar, children: [
|
|
1815
|
+
/* @__PURE__ */ jsx4(
|
|
1380
1816
|
"input",
|
|
1381
1817
|
{
|
|
1382
1818
|
ref: fileInputRef,
|
|
@@ -1387,87 +1823,87 @@ function StudioToolbar() {
|
|
|
1387
1823
|
style: { display: "none" }
|
|
1388
1824
|
}
|
|
1389
1825
|
),
|
|
1390
|
-
/* @__PURE__ */
|
|
1391
|
-
/* @__PURE__ */
|
|
1826
|
+
/* @__PURE__ */ jsxs4("div", { css: styles4.left, children: [
|
|
1827
|
+
/* @__PURE__ */ jsxs4(
|
|
1392
1828
|
"button",
|
|
1393
1829
|
{
|
|
1394
|
-
css: [
|
|
1830
|
+
css: [styles4.btn, styles4.btnPrimary],
|
|
1395
1831
|
onClick: handleUpload,
|
|
1396
1832
|
disabled: uploading || isInImagesFolder,
|
|
1397
1833
|
children: [
|
|
1398
|
-
/* @__PURE__ */
|
|
1834
|
+
/* @__PURE__ */ jsx4(UploadIcon, {}),
|
|
1399
1835
|
uploading ? "Uploading..." : "Upload"
|
|
1400
1836
|
]
|
|
1401
1837
|
}
|
|
1402
1838
|
),
|
|
1403
|
-
/* @__PURE__ */
|
|
1839
|
+
/* @__PURE__ */ jsxs4(
|
|
1404
1840
|
"button",
|
|
1405
1841
|
{
|
|
1406
|
-
css:
|
|
1842
|
+
css: styles4.btn,
|
|
1407
1843
|
onClick: () => singleFolderSelected ? setShowRenameFolderModal(true) : setShowNewFolderModal(true),
|
|
1408
1844
|
disabled: isInImagesFolder && !singleFolderSelected,
|
|
1409
1845
|
title: isInImagesFolder && !singleFolderSelected ? "Cannot create folders in protected images folder" : void 0,
|
|
1410
1846
|
children: [
|
|
1411
|
-
singleFolderSelected ? /* @__PURE__ */
|
|
1847
|
+
singleFolderSelected ? /* @__PURE__ */ jsx4(RenameIcon, {}) : /* @__PURE__ */ jsx4(FolderPlusIcon, {}),
|
|
1412
1848
|
singleFolderSelected ? "Rename Folder" : "New Folder"
|
|
1413
1849
|
]
|
|
1414
1850
|
}
|
|
1415
1851
|
),
|
|
1416
|
-
/* @__PURE__ */
|
|
1417
|
-
/* @__PURE__ */
|
|
1852
|
+
/* @__PURE__ */ jsx4("div", { css: styles4.divider }),
|
|
1853
|
+
/* @__PURE__ */ jsxs4(
|
|
1418
1854
|
"button",
|
|
1419
1855
|
{
|
|
1420
|
-
css:
|
|
1856
|
+
css: styles4.btn,
|
|
1421
1857
|
onClick: handleProcessImages,
|
|
1422
1858
|
disabled: processing || isInImagesFolder,
|
|
1423
1859
|
title: isInImagesFolder ? "Cannot process images folder" : void 0,
|
|
1424
1860
|
children: [
|
|
1425
|
-
/* @__PURE__ */
|
|
1861
|
+
/* @__PURE__ */ jsx4(ImageStackIcon, {}),
|
|
1426
1862
|
processing ? "Processing..." : "Process Images"
|
|
1427
1863
|
]
|
|
1428
1864
|
}
|
|
1429
1865
|
),
|
|
1430
|
-
/* @__PURE__ */
|
|
1866
|
+
/* @__PURE__ */ jsxs4(
|
|
1431
1867
|
"button",
|
|
1432
1868
|
{
|
|
1433
|
-
css: [
|
|
1869
|
+
css: [styles4.btn, styles4.btnDanger],
|
|
1434
1870
|
onClick: handleDeleteClick,
|
|
1435
1871
|
disabled: !hasSelection,
|
|
1436
1872
|
children: [
|
|
1437
|
-
/* @__PURE__ */
|
|
1873
|
+
/* @__PURE__ */ jsx4(TrashIcon, {}),
|
|
1438
1874
|
"Delete"
|
|
1439
1875
|
]
|
|
1440
1876
|
}
|
|
1441
1877
|
),
|
|
1442
|
-
/* @__PURE__ */
|
|
1878
|
+
/* @__PURE__ */ jsxs4(
|
|
1443
1879
|
"button",
|
|
1444
1880
|
{
|
|
1445
|
-
css:
|
|
1881
|
+
css: styles4.btn,
|
|
1446
1882
|
onClick: handleMoveClick,
|
|
1447
1883
|
disabled: !hasSelection,
|
|
1448
1884
|
children: [
|
|
1449
|
-
/* @__PURE__ */
|
|
1885
|
+
/* @__PURE__ */ jsx4(MoveIcon, {}),
|
|
1450
1886
|
"Move"
|
|
1451
1887
|
]
|
|
1452
1888
|
}
|
|
1453
1889
|
),
|
|
1454
|
-
/* @__PURE__ */
|
|
1890
|
+
/* @__PURE__ */ jsxs4(
|
|
1455
1891
|
"button",
|
|
1456
1892
|
{
|
|
1457
|
-
css:
|
|
1893
|
+
css: styles4.btn,
|
|
1458
1894
|
onClick: handleSyncCdn,
|
|
1459
|
-
disabled: !hasSelection,
|
|
1895
|
+
disabled: !hasSelection || syncing,
|
|
1460
1896
|
children: [
|
|
1461
|
-
/* @__PURE__ */
|
|
1462
|
-
"Sync CDN"
|
|
1897
|
+
/* @__PURE__ */ jsx4(CloudIcon, {}),
|
|
1898
|
+
syncing ? "Syncing..." : "Sync CDN"
|
|
1463
1899
|
]
|
|
1464
1900
|
}
|
|
1465
1901
|
),
|
|
1466
|
-
/* @__PURE__ */
|
|
1467
|
-
/* @__PURE__ */
|
|
1902
|
+
/* @__PURE__ */ jsxs4("div", { css: styles4.searchWrapper, children: [
|
|
1903
|
+
/* @__PURE__ */ jsx4(
|
|
1468
1904
|
"input",
|
|
1469
1905
|
{
|
|
1470
|
-
css:
|
|
1906
|
+
css: styles4.searchInput,
|
|
1471
1907
|
type: "text",
|
|
1472
1908
|
placeholder: "Search images...",
|
|
1473
1909
|
value: searchQuery,
|
|
@@ -1475,48 +1911,48 @@ function StudioToolbar() {
|
|
|
1475
1911
|
onKeyDown: handleSearchKeyDown
|
|
1476
1912
|
}
|
|
1477
1913
|
),
|
|
1478
|
-
searchQuery && /* @__PURE__ */
|
|
1914
|
+
searchQuery && /* @__PURE__ */ jsx4(
|
|
1479
1915
|
"button",
|
|
1480
1916
|
{
|
|
1481
|
-
css:
|
|
1917
|
+
css: styles4.searchClearBtn,
|
|
1482
1918
|
onClick: () => setSearchQuery(""),
|
|
1483
1919
|
title: "Clear search",
|
|
1484
|
-
children: /* @__PURE__ */
|
|
1920
|
+
children: /* @__PURE__ */ jsx4("svg", { width: "14", height: "14", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx4("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
|
|
1485
1921
|
}
|
|
1486
1922
|
)
|
|
1487
1923
|
] })
|
|
1488
1924
|
] }),
|
|
1489
|
-
/* @__PURE__ */
|
|
1490
|
-
hasSelection && /* @__PURE__ */
|
|
1925
|
+
/* @__PURE__ */ jsxs4("div", { css: styles4.right, children: [
|
|
1926
|
+
hasSelection && /* @__PURE__ */ jsxs4("span", { css: styles4.selectionCount, children: [
|
|
1491
1927
|
selectedItems.size,
|
|
1492
1928
|
" selected",
|
|
1493
|
-
/* @__PURE__ */
|
|
1929
|
+
/* @__PURE__ */ jsx4("button", { css: styles4.clearBtn, onClick: clearSelection, children: "Clear" })
|
|
1494
1930
|
] }),
|
|
1495
|
-
/* @__PURE__ */
|
|
1931
|
+
/* @__PURE__ */ jsx4(
|
|
1496
1932
|
"button",
|
|
1497
1933
|
{
|
|
1498
|
-
css: [
|
|
1934
|
+
css: [styles4.btn, styles4.btnIconOnly],
|
|
1499
1935
|
onClick: handleRefresh,
|
|
1500
|
-
children: /* @__PURE__ */
|
|
1936
|
+
children: /* @__PURE__ */ jsx4(RefreshIcon, { spinning: refreshing })
|
|
1501
1937
|
}
|
|
1502
1938
|
),
|
|
1503
|
-
/* @__PURE__ */
|
|
1504
|
-
/* @__PURE__ */
|
|
1939
|
+
/* @__PURE__ */ jsxs4("div", { css: styles4.viewToggle, children: [
|
|
1940
|
+
/* @__PURE__ */ jsx4(
|
|
1505
1941
|
"button",
|
|
1506
1942
|
{
|
|
1507
|
-
css: [
|
|
1943
|
+
css: [styles4.viewBtn, viewMode === "grid" && styles4.viewBtnActive],
|
|
1508
1944
|
onClick: () => setViewMode("grid"),
|
|
1509
1945
|
"aria-label": "Grid view",
|
|
1510
|
-
children: /* @__PURE__ */
|
|
1946
|
+
children: /* @__PURE__ */ jsx4(GridIcon, {})
|
|
1511
1947
|
}
|
|
1512
1948
|
),
|
|
1513
|
-
/* @__PURE__ */
|
|
1949
|
+
/* @__PURE__ */ jsx4(
|
|
1514
1950
|
"button",
|
|
1515
1951
|
{
|
|
1516
|
-
css: [
|
|
1952
|
+
css: [styles4.viewBtn, viewMode === "list" && styles4.viewBtnActive],
|
|
1517
1953
|
onClick: () => setViewMode("list"),
|
|
1518
1954
|
"aria-label": "List view",
|
|
1519
|
-
children: /* @__PURE__ */
|
|
1955
|
+
children: /* @__PURE__ */ jsx4(ListIcon, {})
|
|
1520
1956
|
}
|
|
1521
1957
|
)
|
|
1522
1958
|
] })
|
|
@@ -1525,42 +1961,42 @@ function StudioToolbar() {
|
|
|
1525
1961
|
] });
|
|
1526
1962
|
}
|
|
1527
1963
|
function UploadIcon() {
|
|
1528
|
-
return /* @__PURE__ */
|
|
1964
|
+
return /* @__PURE__ */ jsx4("svg", { css: styles4.icon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx4("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" }) });
|
|
1529
1965
|
}
|
|
1530
1966
|
function RefreshIcon({ spinning }) {
|
|
1531
|
-
return /* @__PURE__ */
|
|
1967
|
+
return /* @__PURE__ */ jsx4("svg", { css: [styles4.icon, spinning && styles4.iconSpin], fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx4("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" }) });
|
|
1532
1968
|
}
|
|
1533
1969
|
function TrashIcon() {
|
|
1534
|
-
return /* @__PURE__ */
|
|
1970
|
+
return /* @__PURE__ */ jsx4("svg", { css: styles4.icon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx4("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" }) });
|
|
1535
1971
|
}
|
|
1536
1972
|
function FolderPlusIcon() {
|
|
1537
|
-
return /* @__PURE__ */
|
|
1973
|
+
return /* @__PURE__ */ jsx4("svg", { css: styles4.icon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx4("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 13h6m-3-3v6m-9 1V7a2 2 0 012-2h6l2 2h6a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2z" }) });
|
|
1538
1974
|
}
|
|
1539
1975
|
function RenameIcon() {
|
|
1540
|
-
return /* @__PURE__ */
|
|
1976
|
+
return /* @__PURE__ */ jsx4("svg", { css: styles4.icon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx4("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" }) });
|
|
1541
1977
|
}
|
|
1542
1978
|
function MoveIcon() {
|
|
1543
|
-
return /* @__PURE__ */
|
|
1979
|
+
return /* @__PURE__ */ jsx4("svg", { css: styles4.icon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx4("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4" }) });
|
|
1544
1980
|
}
|
|
1545
1981
|
function CloudIcon() {
|
|
1546
|
-
return /* @__PURE__ */
|
|
1982
|
+
return /* @__PURE__ */ jsx4("svg", { css: styles4.icon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx4("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" }) });
|
|
1547
1983
|
}
|
|
1548
1984
|
function GridIcon() {
|
|
1549
|
-
return /* @__PURE__ */
|
|
1985
|
+
return /* @__PURE__ */ jsx4("svg", { css: styles4.icon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx4("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" }) });
|
|
1550
1986
|
}
|
|
1551
1987
|
function ListIcon() {
|
|
1552
|
-
return /* @__PURE__ */
|
|
1988
|
+
return /* @__PURE__ */ jsx4("svg", { css: styles4.icon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx4("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 6h16M4 10h16M4 14h16M4 18h16" }) });
|
|
1553
1989
|
}
|
|
1554
1990
|
function ImageStackIcon() {
|
|
1555
|
-
return /* @__PURE__ */
|
|
1991
|
+
return /* @__PURE__ */ jsx4("svg", { css: styles4.icon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx4("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" }) });
|
|
1556
1992
|
}
|
|
1557
1993
|
|
|
1558
1994
|
// src/components/StudioFileGrid.tsx
|
|
1559
|
-
import { useState as
|
|
1560
|
-
import { css as
|
|
1995
|
+
import { useState as useState5 } from "react";
|
|
1996
|
+
import { css as css5, keyframes as keyframes4 } from "@emotion/react";
|
|
1561
1997
|
|
|
1562
1998
|
// src/hooks/useFileList.ts
|
|
1563
|
-
import { useEffect as useEffect2, useState as
|
|
1999
|
+
import { useEffect as useEffect2, useState as useState4, useRef as useRef2, useCallback as useCallback2 } from "react";
|
|
1564
2000
|
|
|
1565
2001
|
// src/lib/api.ts
|
|
1566
2002
|
var StudioApiClient = class {
|
|
@@ -1659,8 +2095,8 @@ function useFileList() {
|
|
|
1659
2095
|
searchQuery,
|
|
1660
2096
|
showError
|
|
1661
2097
|
} = useStudio();
|
|
1662
|
-
const [items, setItems] =
|
|
1663
|
-
const [loading, setLoading] =
|
|
2098
|
+
const [items, setItems] = useState4([]);
|
|
2099
|
+
const [loading, setLoading] = useState4(true);
|
|
1664
2100
|
const isInitialLoad = useRef2(true);
|
|
1665
2101
|
const lastPath = useRef2(currentPath);
|
|
1666
2102
|
useEffect2(() => {
|
|
@@ -1746,18 +2182,18 @@ function useFileList() {
|
|
|
1746
2182
|
}
|
|
1747
2183
|
|
|
1748
2184
|
// src/components/StudioFileGrid.tsx
|
|
1749
|
-
import { jsx as
|
|
2185
|
+
import { jsx as jsx5, jsxs as jsxs5 } from "@emotion/react/jsx-runtime";
|
|
1750
2186
|
var spin2 = keyframes4`
|
|
1751
2187
|
to { transform: rotate(360deg); }
|
|
1752
2188
|
`;
|
|
1753
|
-
var
|
|
1754
|
-
loading:
|
|
2189
|
+
var styles5 = {
|
|
2190
|
+
loading: css5`
|
|
1755
2191
|
display: flex;
|
|
1756
2192
|
align-items: center;
|
|
1757
2193
|
justify-content: center;
|
|
1758
2194
|
height: 256px;
|
|
1759
2195
|
`,
|
|
1760
|
-
spinner:
|
|
2196
|
+
spinner: css5`
|
|
1761
2197
|
width: 32px;
|
|
1762
2198
|
height: 32px;
|
|
1763
2199
|
border-radius: 50%;
|
|
@@ -1765,7 +2201,7 @@ var styles4 = {
|
|
|
1765
2201
|
border-top-color: ${colors.primary};
|
|
1766
2202
|
animation: ${spin2} 0.8s linear infinite;
|
|
1767
2203
|
`,
|
|
1768
|
-
empty:
|
|
2204
|
+
empty: css5`
|
|
1769
2205
|
display: flex;
|
|
1770
2206
|
flex-direction: column;
|
|
1771
2207
|
align-items: center;
|
|
@@ -1773,13 +2209,13 @@ var styles4 = {
|
|
|
1773
2209
|
height: 256px;
|
|
1774
2210
|
color: ${colors.textSecondary};
|
|
1775
2211
|
`,
|
|
1776
|
-
emptyIcon:
|
|
2212
|
+
emptyIcon: css5`
|
|
1777
2213
|
width: 48px;
|
|
1778
2214
|
height: 48px;
|
|
1779
2215
|
margin-bottom: 16px;
|
|
1780
2216
|
opacity: 0.5;
|
|
1781
2217
|
`,
|
|
1782
|
-
emptyText:
|
|
2218
|
+
emptyText: css5`
|
|
1783
2219
|
font-size: ${fontSize.base};
|
|
1784
2220
|
margin: 0 0 4px 0;
|
|
1785
2221
|
|
|
@@ -1788,7 +2224,7 @@ var styles4 = {
|
|
|
1788
2224
|
font-size: ${fontSize.sm};
|
|
1789
2225
|
}
|
|
1790
2226
|
`,
|
|
1791
|
-
grid:
|
|
2227
|
+
grid: css5`
|
|
1792
2228
|
display: grid;
|
|
1793
2229
|
grid-template-columns: 1fr;
|
|
1794
2230
|
gap: 12px;
|
|
@@ -1798,7 +2234,7 @@ var styles4 = {
|
|
|
1798
2234
|
@media (min-width: 1024px) { grid-template-columns: repeat(4, 1fr); }
|
|
1799
2235
|
@media (min-width: 1280px) { grid-template-columns: repeat(5, 1fr); }
|
|
1800
2236
|
`,
|
|
1801
|
-
item:
|
|
2237
|
+
item: css5`
|
|
1802
2238
|
position: relative;
|
|
1803
2239
|
border-radius: 8px;
|
|
1804
2240
|
border: 1px solid ${colors.border};
|
|
@@ -1814,7 +2250,7 @@ var styles4 = {
|
|
|
1814
2250
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
|
|
1815
2251
|
}
|
|
1816
2252
|
`,
|
|
1817
|
-
itemSelected:
|
|
2253
|
+
itemSelected: css5`
|
|
1818
2254
|
border-color: ${colors.primary};
|
|
1819
2255
|
box-shadow: 0 0 0 1px ${colors.primary};
|
|
1820
2256
|
|
|
@@ -1823,14 +2259,14 @@ var styles4 = {
|
|
|
1823
2259
|
box-shadow: 0 0 0 1px ${colors.primary};
|
|
1824
2260
|
}
|
|
1825
2261
|
`,
|
|
1826
|
-
parentItem:
|
|
2262
|
+
parentItem: css5`
|
|
1827
2263
|
cursor: pointer;
|
|
1828
2264
|
|
|
1829
2265
|
&:hover {
|
|
1830
2266
|
border-color: ${colors.primary};
|
|
1831
2267
|
}
|
|
1832
2268
|
`,
|
|
1833
|
-
checkboxWrapper:
|
|
2269
|
+
checkboxWrapper: css5`
|
|
1834
2270
|
position: absolute;
|
|
1835
2271
|
top: 0;
|
|
1836
2272
|
left: 0;
|
|
@@ -1838,13 +2274,13 @@ var styles4 = {
|
|
|
1838
2274
|
padding: 8px;
|
|
1839
2275
|
cursor: pointer;
|
|
1840
2276
|
`,
|
|
1841
|
-
checkbox:
|
|
2277
|
+
checkbox: css5`
|
|
1842
2278
|
width: 18px;
|
|
1843
2279
|
height: 18px;
|
|
1844
2280
|
accent-color: ${colors.primary};
|
|
1845
2281
|
cursor: pointer;
|
|
1846
2282
|
`,
|
|
1847
|
-
cdnBadge:
|
|
2283
|
+
cdnBadge: css5`
|
|
1848
2284
|
position: absolute;
|
|
1849
2285
|
top: 8px;
|
|
1850
2286
|
right: 8px;
|
|
@@ -1856,7 +2292,7 @@ var styles4 = {
|
|
|
1856
2292
|
padding: 2px 8px;
|
|
1857
2293
|
border-radius: 4px;
|
|
1858
2294
|
`,
|
|
1859
|
-
content:
|
|
2295
|
+
content: css5`
|
|
1860
2296
|
position: relative;
|
|
1861
2297
|
aspect-ratio: 1;
|
|
1862
2298
|
display: flex;
|
|
@@ -1865,20 +2301,20 @@ var styles4 = {
|
|
|
1865
2301
|
padding: 16px;
|
|
1866
2302
|
background: ${colors.background};
|
|
1867
2303
|
`,
|
|
1868
|
-
folderIcon:
|
|
2304
|
+
folderIcon: css5`
|
|
1869
2305
|
width: 56px;
|
|
1870
2306
|
height: 56px;
|
|
1871
2307
|
color: #f9935e;
|
|
1872
2308
|
`,
|
|
1873
|
-
imagesFolderIcon:
|
|
2309
|
+
imagesFolderIcon: css5`
|
|
1874
2310
|
width: 56px;
|
|
1875
2311
|
height: 56px;
|
|
1876
2312
|
color: ${colors.imagesFolder};
|
|
1877
2313
|
`,
|
|
1878
|
-
imagesFolderWrapper:
|
|
2314
|
+
imagesFolderWrapper: css5`
|
|
1879
2315
|
position: relative;
|
|
1880
2316
|
`,
|
|
1881
|
-
lockIcon:
|
|
2317
|
+
lockIcon: css5`
|
|
1882
2318
|
position: absolute;
|
|
1883
2319
|
bottom: 4px;
|
|
1884
2320
|
right: 4px;
|
|
@@ -1889,23 +2325,23 @@ var styles4 = {
|
|
|
1889
2325
|
border-radius: 50%;
|
|
1890
2326
|
padding: 2px;
|
|
1891
2327
|
`,
|
|
1892
|
-
parentIcon:
|
|
2328
|
+
parentIcon: css5`
|
|
1893
2329
|
width: 56px;
|
|
1894
2330
|
height: 56px;
|
|
1895
2331
|
color: ${colors.textMuted};
|
|
1896
2332
|
`,
|
|
1897
|
-
fileIcon:
|
|
2333
|
+
fileIcon: css5`
|
|
1898
2334
|
width: 40px;
|
|
1899
2335
|
height: 40px;
|
|
1900
2336
|
color: ${colors.textMuted};
|
|
1901
2337
|
`,
|
|
1902
|
-
image:
|
|
2338
|
+
image: css5`
|
|
1903
2339
|
max-width: 100%;
|
|
1904
2340
|
max-height: 100%;
|
|
1905
2341
|
object-fit: contain;
|
|
1906
2342
|
border-radius: 4px;
|
|
1907
2343
|
`,
|
|
1908
|
-
noThumbnail:
|
|
2344
|
+
noThumbnail: css5`
|
|
1909
2345
|
display: flex;
|
|
1910
2346
|
flex-direction: column;
|
|
1911
2347
|
align-items: center;
|
|
@@ -1925,31 +2361,31 @@ var styles4 = {
|
|
|
1925
2361
|
background: ${colors.surfaceHover};
|
|
1926
2362
|
}
|
|
1927
2363
|
`,
|
|
1928
|
-
noThumbnailIcon:
|
|
2364
|
+
noThumbnailIcon: css5`
|
|
1929
2365
|
width: 32px;
|
|
1930
2366
|
height: 32px;
|
|
1931
2367
|
color: ${colors.textMuted};
|
|
1932
2368
|
`,
|
|
1933
|
-
noThumbnailText:
|
|
2369
|
+
noThumbnailText: css5`
|
|
1934
2370
|
font-size: ${fontSize.xs};
|
|
1935
2371
|
color: ${colors.textMuted};
|
|
1936
2372
|
text-align: center;
|
|
1937
2373
|
`,
|
|
1938
|
-
label:
|
|
2374
|
+
label: css5`
|
|
1939
2375
|
padding: 10px 12px;
|
|
1940
2376
|
background-color: ${colors.surface};
|
|
1941
2377
|
border-top: 1px solid ${colors.borderLight};
|
|
1942
2378
|
`,
|
|
1943
|
-
labelRow:
|
|
2379
|
+
labelRow: css5`
|
|
1944
2380
|
display: flex;
|
|
1945
2381
|
flex-direction: column;
|
|
1946
2382
|
gap: 2px;
|
|
1947
2383
|
`,
|
|
1948
|
-
labelText:
|
|
2384
|
+
labelText: css5`
|
|
1949
2385
|
flex: 1;
|
|
1950
2386
|
min-width: 0;
|
|
1951
2387
|
`,
|
|
1952
|
-
copyBtn:
|
|
2388
|
+
copyBtn: css5`
|
|
1953
2389
|
position: absolute;
|
|
1954
2390
|
top: 4px;
|
|
1955
2391
|
right: 4px;
|
|
@@ -1971,11 +2407,11 @@ var styles4 = {
|
|
|
1971
2407
|
color: ${colors.text};
|
|
1972
2408
|
}
|
|
1973
2409
|
`,
|
|
1974
|
-
copyIcon:
|
|
2410
|
+
copyIcon: css5`
|
|
1975
2411
|
width: 18px;
|
|
1976
2412
|
height: 18px;
|
|
1977
2413
|
`,
|
|
1978
|
-
tooltip:
|
|
2414
|
+
tooltip: css5`
|
|
1979
2415
|
position: absolute;
|
|
1980
2416
|
top: 50%;
|
|
1981
2417
|
right: 100%;
|
|
@@ -2000,7 +2436,7 @@ var styles4 = {
|
|
|
2000
2436
|
border-left-color: #1a1f36;
|
|
2001
2437
|
}
|
|
2002
2438
|
`,
|
|
2003
|
-
openBtn:
|
|
2439
|
+
openBtn: css5`
|
|
2004
2440
|
position: absolute;
|
|
2005
2441
|
bottom: 8px;
|
|
2006
2442
|
right: 8px;
|
|
@@ -2024,7 +2460,7 @@ var styles4 = {
|
|
|
2024
2460
|
border-color: ${colors.primary};
|
|
2025
2461
|
}
|
|
2026
2462
|
`,
|
|
2027
|
-
name:
|
|
2463
|
+
name: css5`
|
|
2028
2464
|
font-size: ${fontSize.sm};
|
|
2029
2465
|
font-weight: 500;
|
|
2030
2466
|
color: ${colors.text};
|
|
@@ -2034,12 +2470,12 @@ var styles4 = {
|
|
|
2034
2470
|
margin: 0;
|
|
2035
2471
|
letter-spacing: -0.01em;
|
|
2036
2472
|
`,
|
|
2037
|
-
size:
|
|
2473
|
+
size: css5`
|
|
2038
2474
|
font-size: ${fontSize.xs};
|
|
2039
2475
|
color: ${colors.textMuted};
|
|
2040
2476
|
margin: 2px 0 0 0;
|
|
2041
2477
|
`,
|
|
2042
|
-
selectAllRow:
|
|
2478
|
+
selectAllRow: css5`
|
|
2043
2479
|
display: flex;
|
|
2044
2480
|
align-items: center;
|
|
2045
2481
|
margin-bottom: 16px;
|
|
@@ -2048,7 +2484,7 @@ var styles4 = {
|
|
|
2048
2484
|
border-radius: 8px;
|
|
2049
2485
|
border: 1px solid ${colors.border};
|
|
2050
2486
|
`,
|
|
2051
|
-
selectAllLabel:
|
|
2487
|
+
selectAllLabel: css5`
|
|
2052
2488
|
display: flex;
|
|
2053
2489
|
align-items: center;
|
|
2054
2490
|
gap: 10px;
|
|
@@ -2061,7 +2497,7 @@ var styles4 = {
|
|
|
2061
2497
|
color: ${colors.text};
|
|
2062
2498
|
}
|
|
2063
2499
|
`,
|
|
2064
|
-
selectAllCheckbox:
|
|
2500
|
+
selectAllCheckbox: css5`
|
|
2065
2501
|
width: 16px;
|
|
2066
2502
|
height: 16px;
|
|
2067
2503
|
accent-color: ${colors.primary};
|
|
@@ -2083,22 +2519,22 @@ function StudioFileGrid() {
|
|
|
2083
2519
|
handleSelectAll
|
|
2084
2520
|
} = useFileList();
|
|
2085
2521
|
if (loading) {
|
|
2086
|
-
return /* @__PURE__ */
|
|
2522
|
+
return /* @__PURE__ */ jsx5("div", { css: styles5.loading, children: /* @__PURE__ */ jsx5("div", { css: styles5.spinner }) });
|
|
2087
2523
|
}
|
|
2088
2524
|
if (sortedItems.length === 0 && isAtRoot) {
|
|
2089
|
-
return /* @__PURE__ */
|
|
2090
|
-
/* @__PURE__ */
|
|
2091
|
-
/* @__PURE__ */
|
|
2092
|
-
/* @__PURE__ */
|
|
2525
|
+
return /* @__PURE__ */ jsxs5("div", { css: styles5.empty, children: [
|
|
2526
|
+
/* @__PURE__ */ jsx5("svg", { css: styles5.emptyIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx5("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" }) }),
|
|
2527
|
+
/* @__PURE__ */ jsx5("p", { css: styles5.emptyText, children: "No files in this folder" }),
|
|
2528
|
+
/* @__PURE__ */ jsx5("p", { css: styles5.emptyText, children: "Upload images to get started" })
|
|
2093
2529
|
] });
|
|
2094
2530
|
}
|
|
2095
|
-
return /* @__PURE__ */
|
|
2096
|
-
sortedItems.length > 0 && /* @__PURE__ */
|
|
2097
|
-
/* @__PURE__ */
|
|
2531
|
+
return /* @__PURE__ */ jsxs5("div", { children: [
|
|
2532
|
+
sortedItems.length > 0 && /* @__PURE__ */ jsx5("div", { css: styles5.selectAllRow, children: /* @__PURE__ */ jsxs5("label", { css: styles5.selectAllLabel, children: [
|
|
2533
|
+
/* @__PURE__ */ jsx5(
|
|
2098
2534
|
"input",
|
|
2099
2535
|
{
|
|
2100
2536
|
type: "checkbox",
|
|
2101
|
-
css:
|
|
2537
|
+
css: styles5.selectAllCheckbox,
|
|
2102
2538
|
checked: allItemsSelected,
|
|
2103
2539
|
ref: (el) => {
|
|
2104
2540
|
if (el) el.indeterminate = someItemsSelected && !allItemsSelected;
|
|
@@ -2110,22 +2546,22 @@ function StudioFileGrid() {
|
|
|
2110
2546
|
sortedItems.length,
|
|
2111
2547
|
")"
|
|
2112
2548
|
] }) }),
|
|
2113
|
-
/* @__PURE__ */
|
|
2114
|
-
!isAtRoot && !isSearching && /* @__PURE__ */
|
|
2549
|
+
/* @__PURE__ */ jsxs5("div", { css: styles5.grid, children: [
|
|
2550
|
+
!isAtRoot && !isSearching && /* @__PURE__ */ jsxs5(
|
|
2115
2551
|
"div",
|
|
2116
2552
|
{
|
|
2117
|
-
css: [
|
|
2553
|
+
css: [styles5.item, styles5.parentItem],
|
|
2118
2554
|
onClick: navigateUp,
|
|
2119
2555
|
children: [
|
|
2120
|
-
/* @__PURE__ */
|
|
2121
|
-
/* @__PURE__ */
|
|
2122
|
-
/* @__PURE__ */
|
|
2123
|
-
/* @__PURE__ */
|
|
2556
|
+
/* @__PURE__ */ jsx5("div", { css: styles5.content, children: /* @__PURE__ */ jsx5("svg", { css: styles5.parentIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx5("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6" }) }) }),
|
|
2557
|
+
/* @__PURE__ */ jsxs5("div", { css: styles5.label, children: [
|
|
2558
|
+
/* @__PURE__ */ jsx5("p", { css: styles5.name, children: ".." }),
|
|
2559
|
+
/* @__PURE__ */ jsx5("p", { css: styles5.size, children: "Parent folder" })
|
|
2124
2560
|
] })
|
|
2125
2561
|
]
|
|
2126
2562
|
}
|
|
2127
2563
|
),
|
|
2128
|
-
sortedItems.map((item) => /* @__PURE__ */
|
|
2564
|
+
sortedItems.map((item) => /* @__PURE__ */ jsx5(
|
|
2129
2565
|
GridItem,
|
|
2130
2566
|
{
|
|
2131
2567
|
item,
|
|
@@ -2140,7 +2576,7 @@ function StudioFileGrid() {
|
|
|
2140
2576
|
] });
|
|
2141
2577
|
}
|
|
2142
2578
|
function GridItem({ item, isSelected, onClick, onOpen, onGenerateThumbnail }) {
|
|
2143
|
-
const [showCopied, setShowCopied] =
|
|
2579
|
+
const [showCopied, setShowCopied] = useState5(false);
|
|
2144
2580
|
const isFolder = item.type === "folder";
|
|
2145
2581
|
const isImage = !isFolder && item.thumbnail !== void 0;
|
|
2146
2582
|
const isImagesFolder = isFolder && (item.name === "images" || item.path.includes("/images/"));
|
|
@@ -2151,46 +2587,46 @@ function GridItem({ item, isSelected, onClick, onOpen, onGenerateThumbnail }) {
|
|
|
2151
2587
|
setShowCopied(true);
|
|
2152
2588
|
setTimeout(() => setShowCopied(false), 1500);
|
|
2153
2589
|
};
|
|
2154
|
-
return /* @__PURE__ */
|
|
2590
|
+
return /* @__PURE__ */ jsxs5(
|
|
2155
2591
|
"div",
|
|
2156
2592
|
{
|
|
2157
|
-
css: [
|
|
2593
|
+
css: [styles5.item, isSelected && styles5.itemSelected],
|
|
2158
2594
|
onClick,
|
|
2159
2595
|
children: [
|
|
2160
|
-
/* @__PURE__ */
|
|
2596
|
+
/* @__PURE__ */ jsx5(
|
|
2161
2597
|
"div",
|
|
2162
2598
|
{
|
|
2163
|
-
css:
|
|
2599
|
+
css: styles5.checkboxWrapper,
|
|
2164
2600
|
onClick: (e) => e.stopPropagation(),
|
|
2165
|
-
children: /* @__PURE__ */
|
|
2601
|
+
children: /* @__PURE__ */ jsx5(
|
|
2166
2602
|
"input",
|
|
2167
2603
|
{
|
|
2168
2604
|
type: "checkbox",
|
|
2169
|
-
css:
|
|
2605
|
+
css: styles5.checkbox,
|
|
2170
2606
|
checked: isSelected,
|
|
2171
2607
|
onChange: () => onClick({})
|
|
2172
2608
|
}
|
|
2173
2609
|
)
|
|
2174
2610
|
}
|
|
2175
2611
|
),
|
|
2176
|
-
item.cdnSynced && /* @__PURE__ */
|
|
2177
|
-
/* @__PURE__ */
|
|
2178
|
-
/* @__PURE__ */
|
|
2612
|
+
item.cdnSynced && /* @__PURE__ */ jsx5("span", { css: styles5.cdnBadge, children: "CDN" }),
|
|
2613
|
+
/* @__PURE__ */ jsxs5("div", { css: styles5.content, children: [
|
|
2614
|
+
/* @__PURE__ */ jsxs5(
|
|
2179
2615
|
"button",
|
|
2180
2616
|
{
|
|
2181
|
-
css:
|
|
2617
|
+
css: styles5.copyBtn,
|
|
2182
2618
|
onClick: handleCopyPath,
|
|
2183
2619
|
title: "Copy file path",
|
|
2184
2620
|
children: [
|
|
2185
|
-
showCopied && /* @__PURE__ */
|
|
2186
|
-
/* @__PURE__ */
|
|
2621
|
+
showCopied && /* @__PURE__ */ jsx5("span", { css: styles5.tooltip, children: "Copied!" }),
|
|
2622
|
+
/* @__PURE__ */ jsx5("svg", { css: styles5.copyIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx5("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" }) })
|
|
2187
2623
|
]
|
|
2188
2624
|
}
|
|
2189
2625
|
),
|
|
2190
|
-
/* @__PURE__ */
|
|
2626
|
+
/* @__PURE__ */ jsx5(
|
|
2191
2627
|
"button",
|
|
2192
2628
|
{
|
|
2193
|
-
css:
|
|
2629
|
+
css: styles5.openBtn,
|
|
2194
2630
|
onClick: (e) => {
|
|
2195
2631
|
e.stopPropagation();
|
|
2196
2632
|
onOpen();
|
|
@@ -2198,40 +2634,40 @@ function GridItem({ item, isSelected, onClick, onOpen, onGenerateThumbnail }) {
|
|
|
2198
2634
|
children: "Open"
|
|
2199
2635
|
}
|
|
2200
2636
|
),
|
|
2201
|
-
isFolder ? isImagesFolder ? /* @__PURE__ */
|
|
2202
|
-
/* @__PURE__ */
|
|
2203
|
-
/* @__PURE__ */
|
|
2204
|
-
] }) : /* @__PURE__ */
|
|
2637
|
+
isFolder ? isImagesFolder ? /* @__PURE__ */ jsxs5("div", { css: styles5.imagesFolderWrapper, children: [
|
|
2638
|
+
/* @__PURE__ */ jsx5("svg", { css: styles5.imagesFolderIcon, fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx5("path", { d: "M10 4H4a2 2 0 00-2 2v12a2 2 0 002 2h16a2 2 0 002-2V8a2 2 0 00-2-2h-8l-2-2z" }) }),
|
|
2639
|
+
/* @__PURE__ */ jsx5("svg", { css: styles5.lockIcon, fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx5("path", { fillRule: "evenodd", d: "M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z", clipRule: "evenodd" }) })
|
|
2640
|
+
] }) : /* @__PURE__ */ jsx5("svg", { css: styles5.folderIcon, fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx5("path", { d: "M10 4H4a2 2 0 00-2 2v12a2 2 0 002 2h16a2 2 0 002-2V8a2 2 0 00-2-2h-8l-2-2z" }) }) : isImage && item.hasThumbnail ? /* @__PURE__ */ jsx5(
|
|
2205
2641
|
"img",
|
|
2206
2642
|
{
|
|
2207
|
-
css:
|
|
2643
|
+
css: styles5.image,
|
|
2208
2644
|
src: item.thumbnail,
|
|
2209
2645
|
alt: item.name,
|
|
2210
2646
|
loading: "lazy"
|
|
2211
2647
|
}
|
|
2212
|
-
) : isImage && !item.hasThumbnail ? /* @__PURE__ */
|
|
2648
|
+
) : isImage && !item.hasThumbnail ? /* @__PURE__ */ jsxs5(
|
|
2213
2649
|
"button",
|
|
2214
2650
|
{
|
|
2215
|
-
css:
|
|
2651
|
+
css: styles5.noThumbnail,
|
|
2216
2652
|
onClick: (e) => {
|
|
2217
2653
|
e.stopPropagation();
|
|
2218
2654
|
onGenerateThumbnail();
|
|
2219
2655
|
},
|
|
2220
2656
|
title: "Generate thumbnail",
|
|
2221
2657
|
children: [
|
|
2222
|
-
/* @__PURE__ */
|
|
2223
|
-
/* @__PURE__ */
|
|
2658
|
+
/* @__PURE__ */ jsx5("svg", { css: styles5.noThumbnailIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx5("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" }) }),
|
|
2659
|
+
/* @__PURE__ */ jsx5("span", { css: styles5.noThumbnailText, children: "Generate" })
|
|
2224
2660
|
]
|
|
2225
2661
|
}
|
|
2226
|
-
) : /* @__PURE__ */
|
|
2662
|
+
) : /* @__PURE__ */ jsx5("svg", { css: styles5.fileIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx5("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" }) })
|
|
2227
2663
|
] }),
|
|
2228
|
-
/* @__PURE__ */
|
|
2229
|
-
/* @__PURE__ */
|
|
2230
|
-
isFolder ? /* @__PURE__ */
|
|
2664
|
+
/* @__PURE__ */ jsx5("div", { css: styles5.label, children: /* @__PURE__ */ jsx5("div", { css: styles5.labelRow, children: /* @__PURE__ */ jsxs5("div", { css: styles5.labelText, children: [
|
|
2665
|
+
/* @__PURE__ */ jsx5("p", { css: styles5.name, title: item.name, children: truncateMiddle(item.name) }),
|
|
2666
|
+
isFolder ? /* @__PURE__ */ jsxs5("p", { css: styles5.size, children: [
|
|
2231
2667
|
item.fileCount !== void 0 ? `${item.fileCount} files` : "",
|
|
2232
2668
|
item.fileCount !== void 0 && item.totalSize !== void 0 ? " \xB7 " : "",
|
|
2233
2669
|
item.totalSize !== void 0 ? formatFileSize(item.totalSize) : ""
|
|
2234
|
-
] }) : item.size !== void 0 && /* @__PURE__ */
|
|
2670
|
+
] }) : item.size !== void 0 && /* @__PURE__ */ jsx5("p", { css: styles5.size, children: formatFileSize(item.size) })
|
|
2235
2671
|
] }) }) })
|
|
2236
2672
|
]
|
|
2237
2673
|
}
|
|
@@ -2257,20 +2693,20 @@ function truncateMiddle(str, maxLength = 24) {
|
|
|
2257
2693
|
}
|
|
2258
2694
|
|
|
2259
2695
|
// src/components/StudioFileList.tsx
|
|
2260
|
-
import { useState as
|
|
2261
|
-
import { css as
|
|
2262
|
-
import { jsx as
|
|
2696
|
+
import { useState as useState6 } from "react";
|
|
2697
|
+
import { css as css6, keyframes as keyframes5 } from "@emotion/react";
|
|
2698
|
+
import { jsx as jsx6, jsxs as jsxs6 } from "@emotion/react/jsx-runtime";
|
|
2263
2699
|
var spin3 = keyframes5`
|
|
2264
2700
|
to { transform: rotate(360deg); }
|
|
2265
2701
|
`;
|
|
2266
|
-
var
|
|
2267
|
-
loading:
|
|
2702
|
+
var styles6 = {
|
|
2703
|
+
loading: css6`
|
|
2268
2704
|
display: flex;
|
|
2269
2705
|
align-items: center;
|
|
2270
2706
|
justify-content: center;
|
|
2271
2707
|
height: 256px;
|
|
2272
2708
|
`,
|
|
2273
|
-
spinner:
|
|
2709
|
+
spinner: css6`
|
|
2274
2710
|
width: 32px;
|
|
2275
2711
|
height: 32px;
|
|
2276
2712
|
border-radius: 50%;
|
|
@@ -2278,7 +2714,7 @@ var styles5 = {
|
|
|
2278
2714
|
border-top-color: ${colors.primary};
|
|
2279
2715
|
animation: ${spin3} 0.8s linear infinite;
|
|
2280
2716
|
`,
|
|
2281
|
-
empty:
|
|
2717
|
+
empty: css6`
|
|
2282
2718
|
display: flex;
|
|
2283
2719
|
flex-direction: column;
|
|
2284
2720
|
align-items: center;
|
|
@@ -2286,19 +2722,19 @@ var styles5 = {
|
|
|
2286
2722
|
height: 256px;
|
|
2287
2723
|
color: ${colors.textSecondary};
|
|
2288
2724
|
`,
|
|
2289
|
-
tableWrapper:
|
|
2725
|
+
tableWrapper: css6`
|
|
2290
2726
|
background: ${colors.surface};
|
|
2291
2727
|
border-radius: 8px;
|
|
2292
2728
|
border: 1px solid ${colors.border};
|
|
2293
2729
|
overflow-x: auto;
|
|
2294
2730
|
`,
|
|
2295
|
-
table:
|
|
2731
|
+
table: css6`
|
|
2296
2732
|
width: 100%;
|
|
2297
2733
|
min-width: 600px;
|
|
2298
2734
|
border-collapse: collapse;
|
|
2299
2735
|
white-space: nowrap;
|
|
2300
2736
|
`,
|
|
2301
|
-
th:
|
|
2737
|
+
th: css6`
|
|
2302
2738
|
text-align: left;
|
|
2303
2739
|
font-size: 11px;
|
|
2304
2740
|
color: ${colors.textMuted};
|
|
@@ -2309,20 +2745,20 @@ var styles5 = {
|
|
|
2309
2745
|
background: ${colors.background};
|
|
2310
2746
|
border-bottom: 1px solid ${colors.border};
|
|
2311
2747
|
`,
|
|
2312
|
-
thCheckbox:
|
|
2748
|
+
thCheckbox: css6`
|
|
2313
2749
|
width: 48px;
|
|
2314
2750
|
`,
|
|
2315
|
-
thSize:
|
|
2751
|
+
thSize: css6`
|
|
2316
2752
|
width: 96px;
|
|
2317
2753
|
`,
|
|
2318
|
-
thDimensions:
|
|
2754
|
+
thDimensions: css6`
|
|
2319
2755
|
width: 128px;
|
|
2320
2756
|
`,
|
|
2321
|
-
thCdn:
|
|
2757
|
+
thCdn: css6`
|
|
2322
2758
|
width: 96px;
|
|
2323
2759
|
`,
|
|
2324
|
-
tbody:
|
|
2325
|
-
row:
|
|
2760
|
+
tbody: css6``,
|
|
2761
|
+
row: css6`
|
|
2326
2762
|
cursor: pointer;
|
|
2327
2763
|
transition: background-color 0.15s ease;
|
|
2328
2764
|
user-select: none;
|
|
@@ -2335,14 +2771,14 @@ var styles5 = {
|
|
|
2335
2771
|
border-bottom: 1px solid ${colors.borderLight};
|
|
2336
2772
|
}
|
|
2337
2773
|
`,
|
|
2338
|
-
rowSelected:
|
|
2774
|
+
rowSelected: css6`
|
|
2339
2775
|
background-color: ${colors.primaryLight};
|
|
2340
2776
|
|
|
2341
2777
|
&:hover {
|
|
2342
2778
|
background-color: ${colors.primaryLight};
|
|
2343
2779
|
}
|
|
2344
2780
|
`,
|
|
2345
|
-
parentRow:
|
|
2781
|
+
parentRow: css6`
|
|
2346
2782
|
cursor: pointer;
|
|
2347
2783
|
border-bottom: 1px solid ${colors.border};
|
|
2348
2784
|
|
|
@@ -2350,22 +2786,22 @@ var styles5 = {
|
|
|
2350
2786
|
background-color: ${colors.surfaceHover};
|
|
2351
2787
|
}
|
|
2352
2788
|
`,
|
|
2353
|
-
td:
|
|
2789
|
+
td: css6`
|
|
2354
2790
|
padding: 12px 16px;
|
|
2355
2791
|
`,
|
|
2356
|
-
checkboxCell:
|
|
2792
|
+
checkboxCell: css6`
|
|
2357
2793
|
padding: 12px 16px;
|
|
2358
2794
|
cursor: pointer;
|
|
2359
2795
|
vertical-align: middle;
|
|
2360
2796
|
`,
|
|
2361
|
-
checkbox:
|
|
2797
|
+
checkbox: css6`
|
|
2362
2798
|
width: 18px;
|
|
2363
2799
|
height: 18px;
|
|
2364
2800
|
accent-color: ${colors.primary};
|
|
2365
2801
|
cursor: pointer;
|
|
2366
2802
|
display: block;
|
|
2367
2803
|
`,
|
|
2368
|
-
actionsCell:
|
|
2804
|
+
actionsCell: css6`
|
|
2369
2805
|
display: flex;
|
|
2370
2806
|
align-items: center;
|
|
2371
2807
|
justify-content: flex-end;
|
|
@@ -2373,7 +2809,7 @@ var styles5 = {
|
|
|
2373
2809
|
margin-left: auto;
|
|
2374
2810
|
flex-shrink: 0;
|
|
2375
2811
|
`,
|
|
2376
|
-
copyBtn:
|
|
2812
|
+
copyBtn: css6`
|
|
2377
2813
|
position: relative;
|
|
2378
2814
|
flex-shrink: 0;
|
|
2379
2815
|
height: 32px;
|
|
@@ -2396,11 +2832,11 @@ var styles5 = {
|
|
|
2396
2832
|
color: ${colors.text};
|
|
2397
2833
|
}
|
|
2398
2834
|
`,
|
|
2399
|
-
copyIcon:
|
|
2835
|
+
copyIcon: css6`
|
|
2400
2836
|
width: 16px;
|
|
2401
2837
|
height: 16px;
|
|
2402
2838
|
`,
|
|
2403
|
-
tooltip:
|
|
2839
|
+
tooltip: css6`
|
|
2404
2840
|
position: absolute;
|
|
2405
2841
|
top: 50%;
|
|
2406
2842
|
right: 100%;
|
|
@@ -2425,13 +2861,13 @@ var styles5 = {
|
|
|
2425
2861
|
border-left-color: #1a1f36;
|
|
2426
2862
|
}
|
|
2427
2863
|
`,
|
|
2428
|
-
nameCell:
|
|
2864
|
+
nameCell: css6`
|
|
2429
2865
|
display: flex;
|
|
2430
2866
|
align-items: center;
|
|
2431
2867
|
gap: 12px;
|
|
2432
2868
|
flex: 1;
|
|
2433
2869
|
`,
|
|
2434
|
-
thumbnailWrapper:
|
|
2870
|
+
thumbnailWrapper: css6`
|
|
2435
2871
|
width: 48px;
|
|
2436
2872
|
height: 36px;
|
|
2437
2873
|
display: flex;
|
|
@@ -2439,7 +2875,7 @@ var styles5 = {
|
|
|
2439
2875
|
justify-content: center;
|
|
2440
2876
|
flex-shrink: 0;
|
|
2441
2877
|
`,
|
|
2442
|
-
folderIconWrapper:
|
|
2878
|
+
folderIconWrapper: css6`
|
|
2443
2879
|
width: 48px;
|
|
2444
2880
|
height: 36px;
|
|
2445
2881
|
display: flex;
|
|
@@ -2447,12 +2883,12 @@ var styles5 = {
|
|
|
2447
2883
|
justify-content: center;
|
|
2448
2884
|
flex-shrink: 0;
|
|
2449
2885
|
`,
|
|
2450
|
-
folderIcon:
|
|
2886
|
+
folderIcon: css6`
|
|
2451
2887
|
width: 24px;
|
|
2452
2888
|
height: 24px;
|
|
2453
2889
|
color: #f9935e;
|
|
2454
2890
|
`,
|
|
2455
|
-
imagesFolderWrapper:
|
|
2891
|
+
imagesFolderWrapper: css6`
|
|
2456
2892
|
width: 48px;
|
|
2457
2893
|
height: 36px;
|
|
2458
2894
|
display: flex;
|
|
@@ -2462,31 +2898,31 @@ var styles5 = {
|
|
|
2462
2898
|
position: relative;
|
|
2463
2899
|
align-items: center;
|
|
2464
2900
|
`,
|
|
2465
|
-
imagesFolderIcon:
|
|
2901
|
+
imagesFolderIcon: css6`
|
|
2466
2902
|
width: 24px;
|
|
2467
2903
|
height: 24px;
|
|
2468
2904
|
color: ${colors.imagesFolder};
|
|
2469
2905
|
`,
|
|
2470
|
-
lockIcon:
|
|
2906
|
+
lockIcon: css6`
|
|
2471
2907
|
width: 10px;
|
|
2472
2908
|
height: 10px;
|
|
2473
2909
|
color: ${colors.imagesFolder};
|
|
2474
2910
|
margin-left: -6px;
|
|
2475
2911
|
margin-top: 8px;
|
|
2476
2912
|
`,
|
|
2477
|
-
parentIcon:
|
|
2913
|
+
parentIcon: css6`
|
|
2478
2914
|
width: 20px;
|
|
2479
2915
|
height: 20px;
|
|
2480
2916
|
color: ${colors.textMuted};
|
|
2481
2917
|
flex-shrink: 0;
|
|
2482
2918
|
`,
|
|
2483
|
-
fileIcon:
|
|
2919
|
+
fileIcon: css6`
|
|
2484
2920
|
width: 20px;
|
|
2485
2921
|
height: 20px;
|
|
2486
2922
|
color: ${colors.textMuted};
|
|
2487
2923
|
flex-shrink: 0;
|
|
2488
2924
|
`,
|
|
2489
|
-
thumbnail:
|
|
2925
|
+
thumbnail: css6`
|
|
2490
2926
|
max-width: 100%;
|
|
2491
2927
|
max-height: 100%;
|
|
2492
2928
|
width: auto;
|
|
@@ -2495,7 +2931,7 @@ var styles5 = {
|
|
|
2495
2931
|
border-radius: 4px;
|
|
2496
2932
|
border: 1px solid ${colors.borderLight};
|
|
2497
2933
|
`,
|
|
2498
|
-
noThumbnail:
|
|
2934
|
+
noThumbnail: css6`
|
|
2499
2935
|
width: 36px;
|
|
2500
2936
|
height: 36px;
|
|
2501
2937
|
display: flex;
|
|
@@ -2513,12 +2949,12 @@ var styles5 = {
|
|
|
2513
2949
|
background: ${colors.surfaceHover};
|
|
2514
2950
|
}
|
|
2515
2951
|
`,
|
|
2516
|
-
noThumbnailIcon:
|
|
2952
|
+
noThumbnailIcon: css6`
|
|
2517
2953
|
width: 16px;
|
|
2518
2954
|
height: 16px;
|
|
2519
2955
|
color: ${colors.textMuted};
|
|
2520
2956
|
`,
|
|
2521
|
-
name:
|
|
2957
|
+
name: css6`
|
|
2522
2958
|
font-size: ${fontSize.base};
|
|
2523
2959
|
font-weight: 500;
|
|
2524
2960
|
color: ${colors.text};
|
|
@@ -2528,11 +2964,11 @@ var styles5 = {
|
|
|
2528
2964
|
white-space: nowrap;
|
|
2529
2965
|
max-width: 300px;
|
|
2530
2966
|
`,
|
|
2531
|
-
meta:
|
|
2967
|
+
meta: css6`
|
|
2532
2968
|
font-size: ${fontSize.sm};
|
|
2533
2969
|
color: ${colors.textSecondary};
|
|
2534
2970
|
`,
|
|
2535
|
-
cdnBadge:
|
|
2971
|
+
cdnBadge: css6`
|
|
2536
2972
|
display: inline-flex;
|
|
2537
2973
|
align-items: center;
|
|
2538
2974
|
gap: 4px;
|
|
@@ -2540,15 +2976,15 @@ var styles5 = {
|
|
|
2540
2976
|
font-weight: 500;
|
|
2541
2977
|
color: ${colors.success};
|
|
2542
2978
|
`,
|
|
2543
|
-
cdnIcon:
|
|
2979
|
+
cdnIcon: css6`
|
|
2544
2980
|
width: 12px;
|
|
2545
2981
|
height: 12px;
|
|
2546
2982
|
`,
|
|
2547
|
-
cdnEmpty:
|
|
2983
|
+
cdnEmpty: css6`
|
|
2548
2984
|
font-size: ${fontSize.sm};
|
|
2549
2985
|
color: ${colors.textMuted};
|
|
2550
2986
|
`,
|
|
2551
|
-
openBtn:
|
|
2987
|
+
openBtn: css6`
|
|
2552
2988
|
height: 32px;
|
|
2553
2989
|
font-size: ${fontSize.sm};
|
|
2554
2990
|
font-weight: 500;
|
|
@@ -2584,18 +3020,18 @@ function StudioFileList() {
|
|
|
2584
3020
|
handleSelectAll
|
|
2585
3021
|
} = useFileList();
|
|
2586
3022
|
if (loading) {
|
|
2587
|
-
return /* @__PURE__ */
|
|
3023
|
+
return /* @__PURE__ */ jsx6("div", { css: styles6.loading, children: /* @__PURE__ */ jsx6("div", { css: styles6.spinner }) });
|
|
2588
3024
|
}
|
|
2589
3025
|
if (sortedItems.length === 0 && isAtRoot) {
|
|
2590
|
-
return /* @__PURE__ */
|
|
3026
|
+
return /* @__PURE__ */ jsx6("div", { css: styles6.empty, children: /* @__PURE__ */ jsx6("p", { children: "No files in this folder" }) });
|
|
2591
3027
|
}
|
|
2592
|
-
return /* @__PURE__ */
|
|
2593
|
-
/* @__PURE__ */
|
|
2594
|
-
/* @__PURE__ */
|
|
3028
|
+
return /* @__PURE__ */ jsx6("div", { css: styles6.tableWrapper, children: /* @__PURE__ */ jsxs6("table", { css: styles6.table, children: [
|
|
3029
|
+
/* @__PURE__ */ jsx6("thead", { children: /* @__PURE__ */ jsxs6("tr", { children: [
|
|
3030
|
+
/* @__PURE__ */ jsx6("th", { css: [styles6.th, styles6.thCheckbox], children: sortedItems.length > 0 && /* @__PURE__ */ jsx6(
|
|
2595
3031
|
"input",
|
|
2596
3032
|
{
|
|
2597
3033
|
type: "checkbox",
|
|
2598
|
-
css:
|
|
3034
|
+
css: styles6.checkbox,
|
|
2599
3035
|
checked: allItemsSelected,
|
|
2600
3036
|
ref: (el) => {
|
|
2601
3037
|
if (el) el.indeterminate = someItemsSelected && !allItemsSelected;
|
|
@@ -2603,23 +3039,23 @@ function StudioFileList() {
|
|
|
2603
3039
|
onChange: handleSelectAll
|
|
2604
3040
|
}
|
|
2605
3041
|
) }),
|
|
2606
|
-
/* @__PURE__ */
|
|
2607
|
-
/* @__PURE__ */
|
|
2608
|
-
/* @__PURE__ */
|
|
2609
|
-
/* @__PURE__ */
|
|
3042
|
+
/* @__PURE__ */ jsx6("th", { css: styles6.th, children: "Name" }),
|
|
3043
|
+
/* @__PURE__ */ jsx6("th", { css: [styles6.th, styles6.thSize], children: "Size" }),
|
|
3044
|
+
/* @__PURE__ */ jsx6("th", { css: [styles6.th, styles6.thDimensions], children: "Dimensions" }),
|
|
3045
|
+
/* @__PURE__ */ jsx6("th", { css: [styles6.th, styles6.thCdn], children: "CDN" })
|
|
2610
3046
|
] }) }),
|
|
2611
|
-
/* @__PURE__ */
|
|
2612
|
-
!isAtRoot && !isSearching && /* @__PURE__ */
|
|
2613
|
-
/* @__PURE__ */
|
|
2614
|
-
/* @__PURE__ */
|
|
2615
|
-
/* @__PURE__ */
|
|
2616
|
-
/* @__PURE__ */
|
|
3047
|
+
/* @__PURE__ */ jsxs6("tbody", { css: styles6.tbody, children: [
|
|
3048
|
+
!isAtRoot && !isSearching && /* @__PURE__ */ jsxs6("tr", { css: styles6.parentRow, onClick: navigateUp, children: [
|
|
3049
|
+
/* @__PURE__ */ jsx6("td", { css: styles6.td }),
|
|
3050
|
+
/* @__PURE__ */ jsx6("td", { css: styles6.td, children: /* @__PURE__ */ jsxs6("div", { css: styles6.nameCell, children: [
|
|
3051
|
+
/* @__PURE__ */ jsx6("svg", { css: styles6.parentIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx6("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6" }) }),
|
|
3052
|
+
/* @__PURE__ */ jsx6("span", { css: styles6.name, children: ".." })
|
|
2617
3053
|
] }) }),
|
|
2618
|
-
/* @__PURE__ */
|
|
2619
|
-
/* @__PURE__ */
|
|
2620
|
-
/* @__PURE__ */
|
|
3054
|
+
/* @__PURE__ */ jsx6("td", { css: [styles6.td, styles6.meta], children: "--" }),
|
|
3055
|
+
/* @__PURE__ */ jsx6("td", { css: [styles6.td, styles6.meta], children: "Parent folder" }),
|
|
3056
|
+
/* @__PURE__ */ jsx6("td", { css: styles6.td, children: "--" })
|
|
2621
3057
|
] }),
|
|
2622
|
-
sortedItems.map((item) => /* @__PURE__ */
|
|
3058
|
+
sortedItems.map((item) => /* @__PURE__ */ jsx6(
|
|
2623
3059
|
ListRow,
|
|
2624
3060
|
{
|
|
2625
3061
|
item,
|
|
@@ -2634,7 +3070,7 @@ function StudioFileList() {
|
|
|
2634
3070
|
] }) });
|
|
2635
3071
|
}
|
|
2636
3072
|
function ListRow({ item, isSelected, onClick, onOpen, onGenerateThumbnail }) {
|
|
2637
|
-
const [showCopied, setShowCopied] =
|
|
3073
|
+
const [showCopied, setShowCopied] = useState6(false);
|
|
2638
3074
|
const isFolder = item.type === "folder";
|
|
2639
3075
|
const isImage = !isFolder && item.thumbnail !== void 0;
|
|
2640
3076
|
const isImagesFolder = isFolder && (item.name === "images" || item.path.includes("/images/"));
|
|
@@ -2645,62 +3081,62 @@ function ListRow({ item, isSelected, onClick, onOpen, onGenerateThumbnail }) {
|
|
|
2645
3081
|
setShowCopied(true);
|
|
2646
3082
|
setTimeout(() => setShowCopied(false), 1500);
|
|
2647
3083
|
};
|
|
2648
|
-
return /* @__PURE__ */
|
|
3084
|
+
return /* @__PURE__ */ jsxs6(
|
|
2649
3085
|
"tr",
|
|
2650
3086
|
{
|
|
2651
|
-
css: [
|
|
3087
|
+
css: [styles6.row, isSelected && styles6.rowSelected],
|
|
2652
3088
|
onClick,
|
|
2653
3089
|
children: [
|
|
2654
|
-
/* @__PURE__ */
|
|
3090
|
+
/* @__PURE__ */ jsx6(
|
|
2655
3091
|
"td",
|
|
2656
3092
|
{
|
|
2657
|
-
css: [
|
|
3093
|
+
css: [styles6.td, styles6.checkboxCell],
|
|
2658
3094
|
onClick: (e) => e.stopPropagation(),
|
|
2659
|
-
children: /* @__PURE__ */
|
|
3095
|
+
children: /* @__PURE__ */ jsx6(
|
|
2660
3096
|
"input",
|
|
2661
3097
|
{
|
|
2662
3098
|
type: "checkbox",
|
|
2663
|
-
css:
|
|
3099
|
+
css: styles6.checkbox,
|
|
2664
3100
|
checked: isSelected,
|
|
2665
3101
|
onChange: () => onClick({})
|
|
2666
3102
|
}
|
|
2667
3103
|
)
|
|
2668
3104
|
}
|
|
2669
3105
|
),
|
|
2670
|
-
/* @__PURE__ */
|
|
2671
|
-
isFolder ? isImagesFolder ? /* @__PURE__ */
|
|
2672
|
-
/* @__PURE__ */
|
|
2673
|
-
/* @__PURE__ */
|
|
2674
|
-
] }) : /* @__PURE__ */
|
|
3106
|
+
/* @__PURE__ */ jsx6("td", { css: styles6.td, children: /* @__PURE__ */ jsxs6("div", { css: styles6.nameCell, children: [
|
|
3107
|
+
isFolder ? isImagesFolder ? /* @__PURE__ */ jsxs6("div", { css: styles6.imagesFolderWrapper, children: [
|
|
3108
|
+
/* @__PURE__ */ jsx6("svg", { css: styles6.imagesFolderIcon, fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx6("path", { d: "M10 4H4a2 2 0 00-2 2v12a2 2 0 002 2h16a2 2 0 002-2V8a2 2 0 00-2-2h-8l-2-2z" }) }),
|
|
3109
|
+
/* @__PURE__ */ jsx6("svg", { css: styles6.lockIcon, fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx6("path", { fillRule: "evenodd", d: "M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z", clipRule: "evenodd" }) })
|
|
3110
|
+
] }) : /* @__PURE__ */ jsx6("div", { css: styles6.folderIconWrapper, children: /* @__PURE__ */ jsx6("svg", { css: styles6.folderIcon, fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx6("path", { d: "M10 4H4a2 2 0 00-2 2v12a2 2 0 002 2h16a2 2 0 002-2V8a2 2 0 00-2-2h-8l-2-2z" }) }) }) : isImage && item.hasThumbnail ? /* @__PURE__ */ jsx6("div", { css: styles6.thumbnailWrapper, children: /* @__PURE__ */ jsx6("img", { css: styles6.thumbnail, src: item.thumbnail, alt: item.name, loading: "lazy" }) }) : isImage && !item.hasThumbnail ? /* @__PURE__ */ jsx6("div", { css: styles6.thumbnailWrapper, children: /* @__PURE__ */ jsx6(
|
|
2675
3111
|
"button",
|
|
2676
3112
|
{
|
|
2677
|
-
css:
|
|
3113
|
+
css: styles6.noThumbnail,
|
|
2678
3114
|
onClick: (e) => {
|
|
2679
3115
|
e.stopPropagation();
|
|
2680
3116
|
onGenerateThumbnail();
|
|
2681
3117
|
},
|
|
2682
3118
|
title: "Generate thumbnail",
|
|
2683
|
-
children: /* @__PURE__ */
|
|
3119
|
+
children: /* @__PURE__ */ jsx6("svg", { css: styles6.noThumbnailIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx6("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" }) })
|
|
2684
3120
|
}
|
|
2685
|
-
) }) : /* @__PURE__ */
|
|
2686
|
-
/* @__PURE__ */
|
|
2687
|
-
/* @__PURE__ */
|
|
2688
|
-
/* @__PURE__ */
|
|
3121
|
+
) }) : /* @__PURE__ */ jsx6("div", { css: styles6.thumbnailWrapper, children: /* @__PURE__ */ jsx6("svg", { css: styles6.fileIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx6("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" }) }) }),
|
|
3122
|
+
/* @__PURE__ */ jsx6("span", { css: styles6.name, title: item.name, children: truncateMiddle2(item.name) }),
|
|
3123
|
+
/* @__PURE__ */ jsxs6("div", { css: styles6.actionsCell, children: [
|
|
3124
|
+
/* @__PURE__ */ jsxs6(
|
|
2689
3125
|
"button",
|
|
2690
3126
|
{
|
|
2691
|
-
css:
|
|
3127
|
+
css: styles6.copyBtn,
|
|
2692
3128
|
onClick: handleCopyPath,
|
|
2693
3129
|
title: "Copy file path",
|
|
2694
3130
|
children: [
|
|
2695
|
-
showCopied && /* @__PURE__ */
|
|
2696
|
-
/* @__PURE__ */
|
|
3131
|
+
showCopied && /* @__PURE__ */ jsx6("span", { css: styles6.tooltip, children: "Copied!" }),
|
|
3132
|
+
/* @__PURE__ */ jsx6("svg", { css: styles6.copyIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx6("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" }) })
|
|
2697
3133
|
]
|
|
2698
3134
|
}
|
|
2699
3135
|
),
|
|
2700
|
-
/* @__PURE__ */
|
|
3136
|
+
/* @__PURE__ */ jsx6(
|
|
2701
3137
|
"button",
|
|
2702
3138
|
{
|
|
2703
|
-
css:
|
|
3139
|
+
css: styles6.openBtn,
|
|
2704
3140
|
onClick: (e) => {
|
|
2705
3141
|
e.stopPropagation();
|
|
2706
3142
|
onOpen();
|
|
@@ -2710,12 +3146,12 @@ function ListRow({ item, isSelected, onClick, onOpen, onGenerateThumbnail }) {
|
|
|
2710
3146
|
)
|
|
2711
3147
|
] })
|
|
2712
3148
|
] }) }),
|
|
2713
|
-
/* @__PURE__ */
|
|
2714
|
-
/* @__PURE__ */
|
|
2715
|
-
/* @__PURE__ */
|
|
2716
|
-
/* @__PURE__ */
|
|
3149
|
+
/* @__PURE__ */ jsx6("td", { css: [styles6.td, styles6.meta], children: isFolder ? item.fileCount !== void 0 ? `${item.fileCount} files` : "--" : item.size !== void 0 ? formatFileSize2(item.size) : "--" }),
|
|
3150
|
+
/* @__PURE__ */ jsx6("td", { css: [styles6.td, styles6.meta], children: isFolder ? item.totalSize !== void 0 ? formatFileSize2(item.totalSize) : "--" : item.dimensions ? `${item.dimensions.width}x${item.dimensions.height}` : "--" }),
|
|
3151
|
+
/* @__PURE__ */ jsx6("td", { css: styles6.td, children: item.cdnSynced ? /* @__PURE__ */ jsxs6("span", { css: styles6.cdnBadge, children: [
|
|
3152
|
+
/* @__PURE__ */ jsx6("svg", { css: styles6.cdnIcon, fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx6("path", { fillRule: "evenodd", d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z", clipRule: "evenodd" }) }),
|
|
2717
3153
|
"Synced"
|
|
2718
|
-
] }) : /* @__PURE__ */
|
|
3154
|
+
] }) : /* @__PURE__ */ jsx6("span", { css: styles6.cdnEmpty, children: "--" }) })
|
|
2719
3155
|
]
|
|
2720
3156
|
}
|
|
2721
3157
|
);
|
|
@@ -2740,9 +3176,9 @@ function truncateMiddle2(str, maxLength = 32) {
|
|
|
2740
3176
|
}
|
|
2741
3177
|
|
|
2742
3178
|
// src/components/StudioDetailView.tsx
|
|
2743
|
-
import { useState as
|
|
2744
|
-
import { css as
|
|
2745
|
-
import { Fragment as Fragment3, jsx as
|
|
3179
|
+
import { useState as useState7 } from "react";
|
|
3180
|
+
import { css as css7 } from "@emotion/react";
|
|
3181
|
+
import { Fragment as Fragment3, jsx as jsx7, jsxs as jsxs7 } from "@emotion/react/jsx-runtime";
|
|
2746
3182
|
var IMAGE_EXTENSIONS = [".jpg", ".jpeg", ".png", ".gif", ".webp", ".svg", ".ico", ".bmp", ".tiff", ".tif"];
|
|
2747
3183
|
var VIDEO_EXTENSIONS = [".mp4", ".webm", ".mov", ".avi", ".mkv", ".m4v"];
|
|
2748
3184
|
function isImageFile(filename) {
|
|
@@ -2753,8 +3189,8 @@ function isVideoFile(filename) {
|
|
|
2753
3189
|
const ext = filename.toLowerCase().substring(filename.lastIndexOf("."));
|
|
2754
3190
|
return VIDEO_EXTENSIONS.includes(ext);
|
|
2755
3191
|
}
|
|
2756
|
-
var
|
|
2757
|
-
overlay:
|
|
3192
|
+
var styles7 = {
|
|
3193
|
+
overlay: css7`
|
|
2758
3194
|
position: absolute;
|
|
2759
3195
|
top: 0;
|
|
2760
3196
|
left: 0;
|
|
@@ -2764,7 +3200,7 @@ var styles6 = {
|
|
|
2764
3200
|
display: flex;
|
|
2765
3201
|
background: transparent;
|
|
2766
3202
|
`,
|
|
2767
|
-
container:
|
|
3203
|
+
container: css7`
|
|
2768
3204
|
display: flex;
|
|
2769
3205
|
flex: 1;
|
|
2770
3206
|
margin: 24px;
|
|
@@ -2774,7 +3210,7 @@ var styles6 = {
|
|
|
2774
3210
|
overflow: hidden;
|
|
2775
3211
|
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
|
|
2776
3212
|
`,
|
|
2777
|
-
main:
|
|
3213
|
+
main: css7`
|
|
2778
3214
|
position: relative;
|
|
2779
3215
|
flex: 1;
|
|
2780
3216
|
display: flex;
|
|
@@ -2785,7 +3221,7 @@ var styles6 = {
|
|
|
2785
3221
|
background: ${colors.background};
|
|
2786
3222
|
overflow: auto;
|
|
2787
3223
|
`,
|
|
2788
|
-
headerButtons:
|
|
3224
|
+
headerButtons: css7`
|
|
2789
3225
|
position: absolute;
|
|
2790
3226
|
top: 16px;
|
|
2791
3227
|
right: 16px;
|
|
@@ -2793,7 +3229,7 @@ var styles6 = {
|
|
|
2793
3229
|
gap: 8px;
|
|
2794
3230
|
z-index: 10;
|
|
2795
3231
|
`,
|
|
2796
|
-
copyBtn:
|
|
3232
|
+
copyBtn: css7`
|
|
2797
3233
|
position: relative;
|
|
2798
3234
|
padding: 8px;
|
|
2799
3235
|
background: ${colors.surface};
|
|
@@ -2811,12 +3247,12 @@ var styles6 = {
|
|
|
2811
3247
|
border-color: ${colors.borderHover};
|
|
2812
3248
|
}
|
|
2813
3249
|
`,
|
|
2814
|
-
copyIcon:
|
|
3250
|
+
copyIcon: css7`
|
|
2815
3251
|
width: 20px;
|
|
2816
3252
|
height: 20px;
|
|
2817
3253
|
color: ${colors.textSecondary};
|
|
2818
3254
|
`,
|
|
2819
|
-
tooltip:
|
|
3255
|
+
tooltip: css7`
|
|
2820
3256
|
position: absolute;
|
|
2821
3257
|
right: 100%;
|
|
2822
3258
|
top: 50%;
|
|
@@ -2841,7 +3277,7 @@ var styles6 = {
|
|
|
2841
3277
|
border-left-color: #1a1f36;
|
|
2842
3278
|
}
|
|
2843
3279
|
`,
|
|
2844
|
-
mainCloseBtn:
|
|
3280
|
+
mainCloseBtn: css7`
|
|
2845
3281
|
padding: 8px;
|
|
2846
3282
|
background: ${colors.surface};
|
|
2847
3283
|
border: 1px solid ${colors.border};
|
|
@@ -2858,32 +3294,32 @@ var styles6 = {
|
|
|
2858
3294
|
border-color: ${colors.borderHover};
|
|
2859
3295
|
}
|
|
2860
3296
|
`,
|
|
2861
|
-
mainCloseIcon:
|
|
3297
|
+
mainCloseIcon: css7`
|
|
2862
3298
|
width: 20px;
|
|
2863
3299
|
height: 20px;
|
|
2864
3300
|
color: ${colors.textSecondary};
|
|
2865
3301
|
`,
|
|
2866
|
-
mediaWrapper:
|
|
3302
|
+
mediaWrapper: css7`
|
|
2867
3303
|
max-width: 100%;
|
|
2868
3304
|
max-height: 100%;
|
|
2869
3305
|
display: flex;
|
|
2870
3306
|
align-items: center;
|
|
2871
3307
|
justify-content: center;
|
|
2872
3308
|
`,
|
|
2873
|
-
image:
|
|
3309
|
+
image: css7`
|
|
2874
3310
|
max-width: 100%;
|
|
2875
3311
|
max-height: calc(100vh - 200px);
|
|
2876
3312
|
object-fit: contain;
|
|
2877
3313
|
border-radius: 8px;
|
|
2878
3314
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
|
2879
3315
|
`,
|
|
2880
|
-
video:
|
|
3316
|
+
video: css7`
|
|
2881
3317
|
max-width: 100%;
|
|
2882
3318
|
max-height: calc(100vh - 200px);
|
|
2883
3319
|
border-radius: 8px;
|
|
2884
3320
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
|
2885
3321
|
`,
|
|
2886
|
-
filePlaceholder:
|
|
3322
|
+
filePlaceholder: css7`
|
|
2887
3323
|
display: flex;
|
|
2888
3324
|
flex-direction: column;
|
|
2889
3325
|
align-items: center;
|
|
@@ -2893,19 +3329,19 @@ var styles6 = {
|
|
|
2893
3329
|
border-radius: 12px;
|
|
2894
3330
|
border: 1px solid ${colors.border};
|
|
2895
3331
|
`,
|
|
2896
|
-
fileIcon:
|
|
3332
|
+
fileIcon: css7`
|
|
2897
3333
|
width: 80px;
|
|
2898
3334
|
height: 80px;
|
|
2899
3335
|
color: ${colors.textMuted};
|
|
2900
3336
|
margin-bottom: 16px;
|
|
2901
3337
|
`,
|
|
2902
|
-
fileName:
|
|
3338
|
+
fileName: css7`
|
|
2903
3339
|
font-size: ${fontSize.lg};
|
|
2904
3340
|
font-weight: 600;
|
|
2905
3341
|
color: ${colors.text};
|
|
2906
3342
|
margin: 0;
|
|
2907
3343
|
`,
|
|
2908
|
-
sidebar:
|
|
3344
|
+
sidebar: css7`
|
|
2909
3345
|
width: 280px;
|
|
2910
3346
|
background: ${colors.surface};
|
|
2911
3347
|
border-left: 1px solid ${colors.border};
|
|
@@ -2913,36 +3349,36 @@ var styles6 = {
|
|
|
2913
3349
|
flex-direction: column;
|
|
2914
3350
|
overflow: hidden;
|
|
2915
3351
|
`,
|
|
2916
|
-
sidebarHeader:
|
|
3352
|
+
sidebarHeader: css7`
|
|
2917
3353
|
padding: 16px 20px;
|
|
2918
3354
|
border-bottom: 1px solid ${colors.border};
|
|
2919
3355
|
`,
|
|
2920
|
-
sidebarTitle:
|
|
3356
|
+
sidebarTitle: css7`
|
|
2921
3357
|
font-size: ${fontSize.base};
|
|
2922
3358
|
font-weight: 600;
|
|
2923
3359
|
color: ${colors.text};
|
|
2924
3360
|
margin: 0;
|
|
2925
3361
|
`,
|
|
2926
|
-
sidebarContent:
|
|
3362
|
+
sidebarContent: css7`
|
|
2927
3363
|
flex: 1;
|
|
2928
3364
|
padding: 20px;
|
|
2929
3365
|
overflow: auto;
|
|
2930
3366
|
`,
|
|
2931
|
-
info:
|
|
3367
|
+
info: css7`
|
|
2932
3368
|
display: flex;
|
|
2933
3369
|
flex-direction: column;
|
|
2934
3370
|
gap: 12px;
|
|
2935
3371
|
margin-bottom: 24px;
|
|
2936
3372
|
`,
|
|
2937
|
-
infoRow:
|
|
3373
|
+
infoRow: css7`
|
|
2938
3374
|
display: flex;
|
|
2939
3375
|
justify-content: space-between;
|
|
2940
3376
|
font-size: ${fontSize.sm};
|
|
2941
3377
|
`,
|
|
2942
|
-
infoLabel:
|
|
3378
|
+
infoLabel: css7`
|
|
2943
3379
|
color: ${colors.textSecondary};
|
|
2944
3380
|
`,
|
|
2945
|
-
infoValue:
|
|
3381
|
+
infoValue: css7`
|
|
2946
3382
|
color: ${colors.text};
|
|
2947
3383
|
font-weight: 500;
|
|
2948
3384
|
text-align: right;
|
|
@@ -2951,7 +3387,7 @@ var styles6 = {
|
|
|
2951
3387
|
text-overflow: ellipsis;
|
|
2952
3388
|
white-space: nowrap;
|
|
2953
3389
|
`,
|
|
2954
|
-
infoValueWrap:
|
|
3390
|
+
infoValueWrap: css7`
|
|
2955
3391
|
color: ${colors.text};
|
|
2956
3392
|
font-weight: 500;
|
|
2957
3393
|
text-align: right;
|
|
@@ -2959,12 +3395,12 @@ var styles6 = {
|
|
|
2959
3395
|
word-break: break-all;
|
|
2960
3396
|
white-space: normal;
|
|
2961
3397
|
`,
|
|
2962
|
-
actions:
|
|
3398
|
+
actions: css7`
|
|
2963
3399
|
display: flex;
|
|
2964
3400
|
flex-direction: column;
|
|
2965
3401
|
gap: 8px;
|
|
2966
3402
|
`,
|
|
2967
|
-
actionBtn:
|
|
3403
|
+
actionBtn: css7`
|
|
2968
3404
|
display: flex;
|
|
2969
3405
|
align-items: center;
|
|
2970
3406
|
gap: 10px;
|
|
@@ -2985,7 +3421,7 @@ var styles6 = {
|
|
|
2985
3421
|
border-color: ${colors.borderHover};
|
|
2986
3422
|
}
|
|
2987
3423
|
`,
|
|
2988
|
-
actionBtnDanger:
|
|
3424
|
+
actionBtnDanger: css7`
|
|
2989
3425
|
color: ${colors.danger};
|
|
2990
3426
|
|
|
2991
3427
|
&:hover {
|
|
@@ -2993,7 +3429,7 @@ var styles6 = {
|
|
|
2993
3429
|
border-color: ${colors.danger};
|
|
2994
3430
|
}
|
|
2995
3431
|
`,
|
|
2996
|
-
actionIcon:
|
|
3432
|
+
actionIcon: css7`
|
|
2997
3433
|
width: 16px;
|
|
2998
3434
|
height: 16px;
|
|
2999
3435
|
flex-shrink: 0;
|
|
@@ -3001,12 +3437,14 @@ var styles6 = {
|
|
|
3001
3437
|
};
|
|
3002
3438
|
function StudioDetailView() {
|
|
3003
3439
|
const { focusedItem, setFocusedItem, triggerRefresh, clearSelection } = useStudio();
|
|
3004
|
-
const [showDeleteConfirm, setShowDeleteConfirm] =
|
|
3005
|
-
const [showRenameModal, setShowRenameModal] =
|
|
3006
|
-
const [showProcessConfirm, setShowProcessConfirm] =
|
|
3007
|
-
const [
|
|
3008
|
-
const [
|
|
3009
|
-
const [
|
|
3440
|
+
const [showDeleteConfirm, setShowDeleteConfirm] = useState7(false);
|
|
3441
|
+
const [showRenameModal, setShowRenameModal] = useState7(false);
|
|
3442
|
+
const [showProcessConfirm, setShowProcessConfirm] = useState7(false);
|
|
3443
|
+
const [showR2SetupModal, setShowR2SetupModal] = useState7(false);
|
|
3444
|
+
const [processProgress, setProcessProgress] = useState7(null);
|
|
3445
|
+
const [alertMessage, setAlertMessage] = useState7(null);
|
|
3446
|
+
const [showCopied, setShowCopied] = useState7(false);
|
|
3447
|
+
const [syncing, setSyncing] = useState7(false);
|
|
3010
3448
|
if (!focusedItem) return null;
|
|
3011
3449
|
const isImage = isImageFile(focusedItem.name);
|
|
3012
3450
|
const isVideo = isVideoFile(focusedItem.name);
|
|
@@ -3078,8 +3516,41 @@ function StudioDetailView() {
|
|
|
3078
3516
|
});
|
|
3079
3517
|
}
|
|
3080
3518
|
};
|
|
3081
|
-
const handleSync = () => {
|
|
3082
|
-
|
|
3519
|
+
const handleSync = async () => {
|
|
3520
|
+
const imageKey = "/" + focusedItem.path.replace(/^public\//, "");
|
|
3521
|
+
setSyncing(true);
|
|
3522
|
+
try {
|
|
3523
|
+
const response = await fetch("/api/studio/sync", {
|
|
3524
|
+
method: "POST",
|
|
3525
|
+
headers: { "Content-Type": "application/json" },
|
|
3526
|
+
body: JSON.stringify({ imageKeys: [imageKey] })
|
|
3527
|
+
});
|
|
3528
|
+
const data = await response.json();
|
|
3529
|
+
if (response.ok) {
|
|
3530
|
+
setAlertMessage({
|
|
3531
|
+
title: "Sync Complete",
|
|
3532
|
+
message: "Successfully synced to CDN."
|
|
3533
|
+
});
|
|
3534
|
+
triggerRefresh();
|
|
3535
|
+
} else {
|
|
3536
|
+
if (data.error?.includes("R2 not configured") || data.error?.includes("CLOUDFLARE_R2")) {
|
|
3537
|
+
setShowR2SetupModal(true);
|
|
3538
|
+
} else {
|
|
3539
|
+
setAlertMessage({
|
|
3540
|
+
title: "Sync Failed",
|
|
3541
|
+
message: data.error || "Failed to sync to CDN."
|
|
3542
|
+
});
|
|
3543
|
+
}
|
|
3544
|
+
}
|
|
3545
|
+
} catch (error) {
|
|
3546
|
+
console.error("Sync error:", error);
|
|
3547
|
+
setAlertMessage({
|
|
3548
|
+
title: "Sync Failed",
|
|
3549
|
+
message: "Failed to sync to CDN. Check console for details."
|
|
3550
|
+
});
|
|
3551
|
+
} finally {
|
|
3552
|
+
setSyncing(false);
|
|
3553
|
+
}
|
|
3083
3554
|
};
|
|
3084
3555
|
const handleProcessImage = async () => {
|
|
3085
3556
|
setShowProcessConfirm(false);
|
|
@@ -3137,18 +3608,18 @@ function StudioDetailView() {
|
|
|
3137
3608
|
};
|
|
3138
3609
|
const renderMedia = () => {
|
|
3139
3610
|
if (isImage) {
|
|
3140
|
-
return /* @__PURE__ */
|
|
3611
|
+
return /* @__PURE__ */ jsx7("img", { css: styles7.image, src: imageSrc, alt: focusedItem.name });
|
|
3141
3612
|
}
|
|
3142
3613
|
if (isVideo) {
|
|
3143
|
-
return /* @__PURE__ */
|
|
3614
|
+
return /* @__PURE__ */ jsx7("video", { css: styles7.video, src: imageSrc, controls: true });
|
|
3144
3615
|
}
|
|
3145
|
-
return /* @__PURE__ */
|
|
3146
|
-
/* @__PURE__ */
|
|
3147
|
-
/* @__PURE__ */
|
|
3616
|
+
return /* @__PURE__ */ jsxs7("div", { css: styles7.filePlaceholder, children: [
|
|
3617
|
+
/* @__PURE__ */ jsx7("svg", { css: styles7.fileIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx7("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" }) }),
|
|
3618
|
+
/* @__PURE__ */ jsx7("p", { css: styles7.fileName, children: focusedItem.name })
|
|
3148
3619
|
] });
|
|
3149
3620
|
};
|
|
3150
|
-
return /* @__PURE__ */
|
|
3151
|
-
showDeleteConfirm && /* @__PURE__ */
|
|
3621
|
+
return /* @__PURE__ */ jsxs7(Fragment3, { children: [
|
|
3622
|
+
showDeleteConfirm && /* @__PURE__ */ jsx7(
|
|
3152
3623
|
ConfirmModal,
|
|
3153
3624
|
{
|
|
3154
3625
|
title: "Delete File",
|
|
@@ -3159,7 +3630,7 @@ function StudioDetailView() {
|
|
|
3159
3630
|
onCancel: () => setShowDeleteConfirm(false)
|
|
3160
3631
|
}
|
|
3161
3632
|
),
|
|
3162
|
-
alertMessage && /* @__PURE__ */
|
|
3633
|
+
alertMessage && /* @__PURE__ */ jsx7(
|
|
3163
3634
|
AlertModal,
|
|
3164
3635
|
{
|
|
3165
3636
|
title: alertMessage.title,
|
|
@@ -3167,7 +3638,14 @@ function StudioDetailView() {
|
|
|
3167
3638
|
onClose: () => setAlertMessage(null)
|
|
3168
3639
|
}
|
|
3169
3640
|
),
|
|
3170
|
-
|
|
3641
|
+
/* @__PURE__ */ jsx7(
|
|
3642
|
+
R2SetupModal,
|
|
3643
|
+
{
|
|
3644
|
+
isOpen: showR2SetupModal,
|
|
3645
|
+
onClose: () => setShowR2SetupModal(false)
|
|
3646
|
+
}
|
|
3647
|
+
),
|
|
3648
|
+
showRenameModal && /* @__PURE__ */ jsx7(
|
|
3171
3649
|
InputModal,
|
|
3172
3650
|
{
|
|
3173
3651
|
title: "Rename File",
|
|
@@ -3179,7 +3657,7 @@ function StudioDetailView() {
|
|
|
3179
3657
|
onCancel: () => setShowRenameModal(false)
|
|
3180
3658
|
}
|
|
3181
3659
|
),
|
|
3182
|
-
showProcessConfirm && /* @__PURE__ */
|
|
3660
|
+
showProcessConfirm && /* @__PURE__ */ jsx7(
|
|
3183
3661
|
ConfirmModal,
|
|
3184
3662
|
{
|
|
3185
3663
|
title: "Process Image",
|
|
@@ -3189,7 +3667,7 @@ function StudioDetailView() {
|
|
|
3189
3667
|
onCancel: () => setShowProcessConfirm(false)
|
|
3190
3668
|
}
|
|
3191
3669
|
),
|
|
3192
|
-
processProgress && /* @__PURE__ */
|
|
3670
|
+
processProgress && /* @__PURE__ */ jsx7(
|
|
3193
3671
|
ProgressModal,
|
|
3194
3672
|
{
|
|
3195
3673
|
title: "Processing Image",
|
|
@@ -3197,61 +3675,61 @@ function StudioDetailView() {
|
|
|
3197
3675
|
onClose: () => setProcessProgress(null)
|
|
3198
3676
|
}
|
|
3199
3677
|
),
|
|
3200
|
-
/* @__PURE__ */
|
|
3201
|
-
/* @__PURE__ */
|
|
3202
|
-
/* @__PURE__ */
|
|
3203
|
-
/* @__PURE__ */
|
|
3204
|
-
showCopied && /* @__PURE__ */
|
|
3205
|
-
/* @__PURE__ */
|
|
3678
|
+
/* @__PURE__ */ jsx7("div", { css: styles7.overlay, onClick: handleClose, children: /* @__PURE__ */ jsxs7("div", { css: styles7.container, onClick: (e) => e.stopPropagation(), children: [
|
|
3679
|
+
/* @__PURE__ */ jsxs7("div", { css: styles7.main, children: [
|
|
3680
|
+
/* @__PURE__ */ jsxs7("div", { css: styles7.headerButtons, children: [
|
|
3681
|
+
/* @__PURE__ */ jsxs7("button", { css: styles7.copyBtn, onClick: handleCopyPath, title: "Copy file path", children: [
|
|
3682
|
+
showCopied && /* @__PURE__ */ jsx7("span", { css: styles7.tooltip, children: "Copied!" }),
|
|
3683
|
+
/* @__PURE__ */ jsx7("svg", { css: styles7.copyIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx7("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" }) })
|
|
3206
3684
|
] }),
|
|
3207
|
-
/* @__PURE__ */
|
|
3685
|
+
/* @__PURE__ */ jsx7("button", { css: styles7.mainCloseBtn, onClick: handleClose, "aria-label": "Close", children: /* @__PURE__ */ jsx7("svg", { css: styles7.mainCloseIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx7("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) })
|
|
3208
3686
|
] }),
|
|
3209
|
-
/* @__PURE__ */
|
|
3687
|
+
/* @__PURE__ */ jsx7("div", { css: styles7.mediaWrapper, children: renderMedia() })
|
|
3210
3688
|
] }),
|
|
3211
|
-
/* @__PURE__ */
|
|
3212
|
-
/* @__PURE__ */
|
|
3213
|
-
/* @__PURE__ */
|
|
3214
|
-
/* @__PURE__ */
|
|
3215
|
-
/* @__PURE__ */
|
|
3216
|
-
/* @__PURE__ */
|
|
3217
|
-
/* @__PURE__ */
|
|
3689
|
+
/* @__PURE__ */ jsxs7("div", { css: styles7.sidebar, children: [
|
|
3690
|
+
/* @__PURE__ */ jsx7("div", { css: styles7.sidebarHeader, children: /* @__PURE__ */ jsx7("h3", { css: styles7.sidebarTitle, children: "Details" }) }),
|
|
3691
|
+
/* @__PURE__ */ jsxs7("div", { css: styles7.sidebarContent, children: [
|
|
3692
|
+
/* @__PURE__ */ jsxs7("div", { css: styles7.info, children: [
|
|
3693
|
+
/* @__PURE__ */ jsxs7("div", { css: styles7.infoRow, children: [
|
|
3694
|
+
/* @__PURE__ */ jsx7("span", { css: styles7.infoLabel, children: "Name" }),
|
|
3695
|
+
/* @__PURE__ */ jsx7("span", { css: styles7.infoValueWrap, children: focusedItem.name })
|
|
3218
3696
|
] }),
|
|
3219
|
-
/* @__PURE__ */
|
|
3220
|
-
/* @__PURE__ */
|
|
3221
|
-
/* @__PURE__ */
|
|
3697
|
+
/* @__PURE__ */ jsxs7("div", { css: styles7.infoRow, children: [
|
|
3698
|
+
/* @__PURE__ */ jsx7("span", { css: styles7.infoLabel, children: "Path" }),
|
|
3699
|
+
/* @__PURE__ */ jsx7("span", { css: styles7.infoValueWrap, children: focusedItem.path.replace(/^public\//, "") })
|
|
3222
3700
|
] }),
|
|
3223
|
-
focusedItem.size !== void 0 && /* @__PURE__ */
|
|
3224
|
-
/* @__PURE__ */
|
|
3225
|
-
/* @__PURE__ */
|
|
3701
|
+
focusedItem.size !== void 0 && /* @__PURE__ */ jsxs7("div", { css: styles7.infoRow, children: [
|
|
3702
|
+
/* @__PURE__ */ jsx7("span", { css: styles7.infoLabel, children: "Size" }),
|
|
3703
|
+
/* @__PURE__ */ jsx7("span", { css: styles7.infoValue, children: formatFileSize3(focusedItem.size) })
|
|
3226
3704
|
] }),
|
|
3227
|
-
focusedItem.dimensions && /* @__PURE__ */
|
|
3228
|
-
/* @__PURE__ */
|
|
3229
|
-
/* @__PURE__ */
|
|
3705
|
+
focusedItem.dimensions && /* @__PURE__ */ jsxs7("div", { css: styles7.infoRow, children: [
|
|
3706
|
+
/* @__PURE__ */ jsx7("span", { css: styles7.infoLabel, children: "Dimensions" }),
|
|
3707
|
+
/* @__PURE__ */ jsxs7("span", { css: styles7.infoValue, children: [
|
|
3230
3708
|
focusedItem.dimensions.width,
|
|
3231
3709
|
" \xD7 ",
|
|
3232
3710
|
focusedItem.dimensions.height
|
|
3233
3711
|
] })
|
|
3234
3712
|
] }),
|
|
3235
|
-
/* @__PURE__ */
|
|
3236
|
-
/* @__PURE__ */
|
|
3237
|
-
/* @__PURE__ */
|
|
3713
|
+
/* @__PURE__ */ jsxs7("div", { css: styles7.infoRow, children: [
|
|
3714
|
+
/* @__PURE__ */ jsx7("span", { css: styles7.infoLabel, children: "CDN Status" }),
|
|
3715
|
+
/* @__PURE__ */ jsx7("span", { css: styles7.infoValue, children: focusedItem.cdnSynced ? "Synced" : "Not synced" })
|
|
3238
3716
|
] })
|
|
3239
3717
|
] }),
|
|
3240
|
-
/* @__PURE__ */
|
|
3241
|
-
/* @__PURE__ */
|
|
3242
|
-
/* @__PURE__ */
|
|
3718
|
+
/* @__PURE__ */ jsxs7("div", { css: styles7.actions, children: [
|
|
3719
|
+
/* @__PURE__ */ jsxs7("button", { css: styles7.actionBtn, onClick: () => setShowRenameModal(true), children: [
|
|
3720
|
+
/* @__PURE__ */ jsx7("svg", { css: styles7.actionIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx7("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" }) }),
|
|
3243
3721
|
"Rename"
|
|
3244
3722
|
] }),
|
|
3245
|
-
/* @__PURE__ */
|
|
3246
|
-
/* @__PURE__ */
|
|
3247
|
-
"Sync to CDN"
|
|
3723
|
+
/* @__PURE__ */ jsxs7("button", { css: styles7.actionBtn, onClick: handleSync, disabled: syncing, children: [
|
|
3724
|
+
/* @__PURE__ */ jsx7("svg", { css: styles7.actionIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx7("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" }) }),
|
|
3725
|
+
syncing ? "Syncing..." : "Sync to CDN"
|
|
3248
3726
|
] }),
|
|
3249
|
-
/* @__PURE__ */
|
|
3250
|
-
/* @__PURE__ */
|
|
3727
|
+
/* @__PURE__ */ jsxs7("button", { css: styles7.actionBtn, onClick: () => setShowProcessConfirm(true), children: [
|
|
3728
|
+
/* @__PURE__ */ jsx7("svg", { css: styles7.actionIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx7("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" }) }),
|
|
3251
3729
|
"Process Image"
|
|
3252
3730
|
] }),
|
|
3253
|
-
/* @__PURE__ */
|
|
3254
|
-
/* @__PURE__ */
|
|
3731
|
+
/* @__PURE__ */ jsxs7("button", { css: [styles7.actionBtn, styles7.actionBtnDanger], onClick: () => setShowDeleteConfirm(true), children: [
|
|
3732
|
+
/* @__PURE__ */ jsx7("svg", { css: styles7.actionIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx7("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" }) }),
|
|
3255
3733
|
"Delete"
|
|
3256
3734
|
] })
|
|
3257
3735
|
] })
|
|
@@ -3267,12 +3745,12 @@ function formatFileSize3(bytes) {
|
|
|
3267
3745
|
}
|
|
3268
3746
|
|
|
3269
3747
|
// src/components/StudioSettings.tsx
|
|
3270
|
-
import { useState as
|
|
3271
|
-
import { css as
|
|
3272
|
-
import { Fragment as Fragment4, jsx as
|
|
3748
|
+
import { useState as useState8 } from "react";
|
|
3749
|
+
import { css as css8 } from "@emotion/react";
|
|
3750
|
+
import { Fragment as Fragment4, jsx as jsx8, jsxs as jsxs8 } from "@emotion/react/jsx-runtime";
|
|
3273
3751
|
var btnHeight2 = "36px";
|
|
3274
|
-
var
|
|
3275
|
-
btn:
|
|
3752
|
+
var styles8 = {
|
|
3753
|
+
btn: css8`
|
|
3276
3754
|
height: ${btnHeight2};
|
|
3277
3755
|
padding: 0 12px;
|
|
3278
3756
|
background: ${colors.surface};
|
|
@@ -3289,12 +3767,12 @@ var styles7 = {
|
|
|
3289
3767
|
border-color: ${colors.borderHover};
|
|
3290
3768
|
}
|
|
3291
3769
|
`,
|
|
3292
|
-
icon:
|
|
3770
|
+
icon: css8`
|
|
3293
3771
|
width: 16px;
|
|
3294
3772
|
height: 16px;
|
|
3295
3773
|
color: ${colors.textSecondary};
|
|
3296
3774
|
`,
|
|
3297
|
-
overlay:
|
|
3775
|
+
overlay: css8`
|
|
3298
3776
|
position: fixed;
|
|
3299
3777
|
top: 0;
|
|
3300
3778
|
right: 0;
|
|
@@ -3307,7 +3785,7 @@ var styles7 = {
|
|
|
3307
3785
|
background-color: rgba(26, 31, 54, 0.4);
|
|
3308
3786
|
backdrop-filter: blur(4px);
|
|
3309
3787
|
`,
|
|
3310
|
-
panel:
|
|
3788
|
+
panel: css8`
|
|
3311
3789
|
${baseReset}
|
|
3312
3790
|
position: relative;
|
|
3313
3791
|
background-color: ${colors.surface};
|
|
@@ -3317,20 +3795,20 @@ var styles7 = {
|
|
|
3317
3795
|
max-width: 512px;
|
|
3318
3796
|
padding: 24px;
|
|
3319
3797
|
`,
|
|
3320
|
-
header:
|
|
3798
|
+
header: css8`
|
|
3321
3799
|
display: flex;
|
|
3322
3800
|
align-items: center;
|
|
3323
3801
|
justify-content: space-between;
|
|
3324
3802
|
margin-bottom: 24px;
|
|
3325
3803
|
`,
|
|
3326
|
-
title:
|
|
3804
|
+
title: css8`
|
|
3327
3805
|
font-size: ${fontSize.xl};
|
|
3328
3806
|
font-weight: 600;
|
|
3329
3807
|
color: ${colors.text};
|
|
3330
3808
|
margin: 0;
|
|
3331
3809
|
letter-spacing: -0.02em;
|
|
3332
3810
|
`,
|
|
3333
|
-
closeBtn:
|
|
3811
|
+
closeBtn: css8`
|
|
3334
3812
|
padding: 6px;
|
|
3335
3813
|
background: ${colors.surface};
|
|
3336
3814
|
border: 1px solid ${colors.border};
|
|
@@ -3346,26 +3824,26 @@ var styles7 = {
|
|
|
3346
3824
|
border-color: ${colors.borderHover};
|
|
3347
3825
|
}
|
|
3348
3826
|
`,
|
|
3349
|
-
sections:
|
|
3827
|
+
sections: css8`
|
|
3350
3828
|
display: flex;
|
|
3351
3829
|
flex-direction: column;
|
|
3352
3830
|
gap: 24px;
|
|
3353
3831
|
`,
|
|
3354
|
-
sectionTitle:
|
|
3832
|
+
sectionTitle: css8`
|
|
3355
3833
|
font-size: ${fontSize.base};
|
|
3356
3834
|
font-weight: 600;
|
|
3357
3835
|
color: ${colors.text};
|
|
3358
3836
|
margin: 0 0 12px 0;
|
|
3359
3837
|
`,
|
|
3360
|
-
description:
|
|
3838
|
+
description: css8`
|
|
3361
3839
|
font-size: ${fontSize.sm};
|
|
3362
3840
|
color: ${colors.textSecondary};
|
|
3363
3841
|
margin: 0 0 12px 0;
|
|
3364
3842
|
`,
|
|
3365
|
-
codeWrapper:
|
|
3843
|
+
codeWrapper: css8`
|
|
3366
3844
|
position: relative;
|
|
3367
3845
|
`,
|
|
3368
|
-
code:
|
|
3846
|
+
code: css8`
|
|
3369
3847
|
background-color: ${colors.background};
|
|
3370
3848
|
border-radius: 8px;
|
|
3371
3849
|
padding: 12px;
|
|
@@ -3377,7 +3855,7 @@ var styles7 = {
|
|
|
3377
3855
|
overflow-x: auto;
|
|
3378
3856
|
white-space: nowrap;
|
|
3379
3857
|
`,
|
|
3380
|
-
copyBtn:
|
|
3858
|
+
copyBtn: css8`
|
|
3381
3859
|
position: absolute;
|
|
3382
3860
|
top: 8px;
|
|
3383
3861
|
right: 8px;
|
|
@@ -3396,7 +3874,7 @@ var styles7 = {
|
|
|
3396
3874
|
border-color: ${colors.borderHover};
|
|
3397
3875
|
}
|
|
3398
3876
|
`,
|
|
3399
|
-
tooltip:
|
|
3877
|
+
tooltip: css8`
|
|
3400
3878
|
position: absolute;
|
|
3401
3879
|
bottom: 100%;
|
|
3402
3880
|
left: 50%;
|
|
@@ -3421,19 +3899,19 @@ var styles7 = {
|
|
|
3421
3899
|
border-top-color: #1a1f36;
|
|
3422
3900
|
}
|
|
3423
3901
|
`,
|
|
3424
|
-
copyIcon:
|
|
3902
|
+
copyIcon: css8`
|
|
3425
3903
|
width: 14px;
|
|
3426
3904
|
height: 14px;
|
|
3427
3905
|
color: ${colors.textSecondary};
|
|
3428
3906
|
`,
|
|
3429
|
-
codeLine:
|
|
3907
|
+
codeLine: css8`
|
|
3430
3908
|
margin: 0 0 4px 0;
|
|
3431
3909
|
|
|
3432
3910
|
&:last-child {
|
|
3433
3911
|
margin: 0;
|
|
3434
3912
|
}
|
|
3435
3913
|
`,
|
|
3436
|
-
input:
|
|
3914
|
+
input: css8`
|
|
3437
3915
|
width: 100%;
|
|
3438
3916
|
padding: 10px 14px;
|
|
3439
3917
|
border: 1px solid ${colors.border};
|
|
@@ -3453,19 +3931,19 @@ var styles7 = {
|
|
|
3453
3931
|
color: ${colors.textMuted};
|
|
3454
3932
|
}
|
|
3455
3933
|
`,
|
|
3456
|
-
grid:
|
|
3934
|
+
grid: css8`
|
|
3457
3935
|
display: grid;
|
|
3458
3936
|
grid-template-columns: repeat(3, 1fr);
|
|
3459
3937
|
gap: 12px;
|
|
3460
3938
|
`,
|
|
3461
|
-
label:
|
|
3939
|
+
label: css8`
|
|
3462
3940
|
font-size: ${fontSize.xs};
|
|
3463
3941
|
font-weight: 500;
|
|
3464
3942
|
color: ${colors.textSecondary};
|
|
3465
3943
|
display: block;
|
|
3466
3944
|
margin-bottom: 6px;
|
|
3467
3945
|
`,
|
|
3468
|
-
footer:
|
|
3946
|
+
footer: css8`
|
|
3469
3947
|
margin-top: 24px;
|
|
3470
3948
|
padding-top: 20px;
|
|
3471
3949
|
border-top: 1px solid ${colors.border};
|
|
@@ -3473,7 +3951,7 @@ var styles7 = {
|
|
|
3473
3951
|
justify-content: flex-end;
|
|
3474
3952
|
gap: 12px;
|
|
3475
3953
|
`,
|
|
3476
|
-
cancelBtn:
|
|
3954
|
+
cancelBtn: css8`
|
|
3477
3955
|
padding: 10px 18px;
|
|
3478
3956
|
font-size: ${fontSize.base};
|
|
3479
3957
|
font-weight: 500;
|
|
@@ -3489,7 +3967,7 @@ var styles7 = {
|
|
|
3489
3967
|
border-color: ${colors.borderHover};
|
|
3490
3968
|
}
|
|
3491
3969
|
`,
|
|
3492
|
-
saveBtn:
|
|
3970
|
+
saveBtn: css8`
|
|
3493
3971
|
padding: 10px 18px;
|
|
3494
3972
|
font-size: ${fontSize.base};
|
|
3495
3973
|
font-weight: 500;
|
|
@@ -3507,12 +3985,12 @@ var styles7 = {
|
|
|
3507
3985
|
`
|
|
3508
3986
|
};
|
|
3509
3987
|
function StudioSettings() {
|
|
3510
|
-
const [isOpen, setIsOpen] =
|
|
3511
|
-
return /* @__PURE__ */
|
|
3512
|
-
/* @__PURE__ */
|
|
3988
|
+
const [isOpen, setIsOpen] = useState8(false);
|
|
3989
|
+
return /* @__PURE__ */ jsxs8(Fragment4, { children: [
|
|
3990
|
+
/* @__PURE__ */ jsx8("button", { css: styles8.btn, onClick: () => setIsOpen(true), "aria-label": "Settings", children: /* @__PURE__ */ jsxs8(
|
|
3513
3991
|
"svg",
|
|
3514
3992
|
{
|
|
3515
|
-
css:
|
|
3993
|
+
css: styles8.icon,
|
|
3516
3994
|
xmlns: "http://www.w3.org/2000/svg",
|
|
3517
3995
|
viewBox: "0 0 24 24",
|
|
3518
3996
|
fill: "none",
|
|
@@ -3521,12 +3999,12 @@ function StudioSettings() {
|
|
|
3521
3999
|
strokeLinecap: "round",
|
|
3522
4000
|
strokeLinejoin: "round",
|
|
3523
4001
|
children: [
|
|
3524
|
-
/* @__PURE__ */
|
|
3525
|
-
/* @__PURE__ */
|
|
4002
|
+
/* @__PURE__ */ jsx8("circle", { cx: "12", cy: "12", r: "3" }),
|
|
4003
|
+
/* @__PURE__ */ jsx8("path", { d: "M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-2 2 2 2 0 01-2-2v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83 0 2 2 0 010-2.83l.06-.06a1.65 1.65 0 00.33-1.82 1.65 1.65 0 00-1.51-1H3a2 2 0 01-2-2 2 2 0 012-2h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 010-2.83 2 2 0 012.83 0l.06.06a1.65 1.65 0 001.82.33H9a1.65 1.65 0 001-1.51V3a2 2 0 012-2 2 2 0 012 2v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 0 2 2 0 010 2.83l-.06.06a1.65 1.65 0 00-.33 1.82V9a1.65 1.65 0 001.51 1H21a2 2 0 012 2 2 2 0 01-2 2h-.09a1.65 1.65 0 00-1.51 1z" })
|
|
3526
4004
|
]
|
|
3527
4005
|
}
|
|
3528
4006
|
) }),
|
|
3529
|
-
isOpen && /* @__PURE__ */
|
|
4007
|
+
isOpen && /* @__PURE__ */ jsx8(SettingsPanel, { onClose: () => setIsOpen(false) })
|
|
3530
4008
|
] });
|
|
3531
4009
|
}
|
|
3532
4010
|
var envTemplate = `CLOUDFLARE_R2_ACCOUNT_ID=abc123def456ghi789
|
|
@@ -3535,65 +4013,65 @@ CLOUDFLARE_R2_SECRET_ACCESS_KEY=your_secret_access_key_here
|
|
|
3535
4013
|
CLOUDFLARE_R2_BUCKET_NAME=my-images-bucket
|
|
3536
4014
|
CLOUDFLARE_R2_PUBLIC_URL=https://cdn.yourdomain.com`;
|
|
3537
4015
|
function SettingsPanel({ onClose }) {
|
|
3538
|
-
const [copied, setCopied] =
|
|
4016
|
+
const [copied, setCopied] = useState8(false);
|
|
3539
4017
|
const handleCopy = () => {
|
|
3540
4018
|
navigator.clipboard.writeText(envTemplate);
|
|
3541
4019
|
setCopied(true);
|
|
3542
4020
|
setTimeout(() => setCopied(false), 2e3);
|
|
3543
4021
|
};
|
|
3544
|
-
return /* @__PURE__ */
|
|
3545
|
-
/* @__PURE__ */
|
|
3546
|
-
/* @__PURE__ */
|
|
3547
|
-
/* @__PURE__ */
|
|
4022
|
+
return /* @__PURE__ */ jsx8("div", { css: styles8.overlay, onClick: onClose, children: /* @__PURE__ */ jsxs8("div", { css: styles8.panel, onClick: (e) => e.stopPropagation(), children: [
|
|
4023
|
+
/* @__PURE__ */ jsxs8("div", { css: styles8.header, children: [
|
|
4024
|
+
/* @__PURE__ */ jsx8("h2", { css: styles8.title, children: "Settings" }),
|
|
4025
|
+
/* @__PURE__ */ jsx8("button", { css: styles8.closeBtn, onClick: onClose, children: /* @__PURE__ */ jsx8("svg", { css: styles8.icon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx8("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) })
|
|
3548
4026
|
] }),
|
|
3549
|
-
/* @__PURE__ */
|
|
3550
|
-
/* @__PURE__ */
|
|
3551
|
-
/* @__PURE__ */
|
|
3552
|
-
/* @__PURE__ */
|
|
3553
|
-
/* @__PURE__ */
|
|
3554
|
-
/* @__PURE__ */
|
|
3555
|
-
copied && /* @__PURE__ */
|
|
3556
|
-
/* @__PURE__ */
|
|
4027
|
+
/* @__PURE__ */ jsxs8("div", { css: styles8.sections, children: [
|
|
4028
|
+
/* @__PURE__ */ jsxs8("section", { children: [
|
|
4029
|
+
/* @__PURE__ */ jsx8("h3", { css: styles8.sectionTitle, children: "Cloudflare R2" }),
|
|
4030
|
+
/* @__PURE__ */ jsx8("p", { css: styles8.description, children: "Configure in .env.local file:" }),
|
|
4031
|
+
/* @__PURE__ */ jsxs8("div", { css: styles8.codeWrapper, children: [
|
|
4032
|
+
/* @__PURE__ */ jsxs8("button", { css: styles8.copyBtn, onClick: handleCopy, title: "Copy to clipboard", children: [
|
|
4033
|
+
copied && /* @__PURE__ */ jsx8("span", { css: styles8.tooltip, children: "Copied!" }),
|
|
4034
|
+
/* @__PURE__ */ jsx8("svg", { css: styles8.copyIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx8("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" }) })
|
|
3557
4035
|
] }),
|
|
3558
|
-
/* @__PURE__ */
|
|
3559
|
-
/* @__PURE__ */
|
|
3560
|
-
/* @__PURE__ */
|
|
3561
|
-
/* @__PURE__ */
|
|
3562
|
-
/* @__PURE__ */
|
|
3563
|
-
/* @__PURE__ */
|
|
4036
|
+
/* @__PURE__ */ jsxs8("div", { css: styles8.code, children: [
|
|
4037
|
+
/* @__PURE__ */ jsx8("p", { css: styles8.codeLine, children: "CLOUDFLARE_R2_ACCOUNT_ID=abc123def456ghi789" }),
|
|
4038
|
+
/* @__PURE__ */ jsx8("p", { css: styles8.codeLine, children: "CLOUDFLARE_R2_ACCESS_KEY_ID=your_access_key_id_here" }),
|
|
4039
|
+
/* @__PURE__ */ jsx8("p", { css: styles8.codeLine, children: "CLOUDFLARE_R2_SECRET_ACCESS_KEY=your_secret_access_key_here" }),
|
|
4040
|
+
/* @__PURE__ */ jsx8("p", { css: styles8.codeLine, children: "CLOUDFLARE_R2_BUCKET_NAME=my-images-bucket" }),
|
|
4041
|
+
/* @__PURE__ */ jsx8("p", { css: styles8.codeLine, children: "CLOUDFLARE_R2_PUBLIC_URL=https://cdn.yourdomain.com" })
|
|
3564
4042
|
] })
|
|
3565
4043
|
] })
|
|
3566
4044
|
] }),
|
|
3567
|
-
/* @__PURE__ */
|
|
3568
|
-
/* @__PURE__ */
|
|
3569
|
-
/* @__PURE__ */
|
|
3570
|
-
/* @__PURE__ */
|
|
3571
|
-
/* @__PURE__ */
|
|
3572
|
-
/* @__PURE__ */
|
|
4045
|
+
/* @__PURE__ */ jsxs8("section", { children: [
|
|
4046
|
+
/* @__PURE__ */ jsx8("h3", { css: styles8.sectionTitle, children: "Thumbnail Sizes" }),
|
|
4047
|
+
/* @__PURE__ */ jsxs8("div", { css: styles8.grid, children: [
|
|
4048
|
+
/* @__PURE__ */ jsxs8("div", { children: [
|
|
4049
|
+
/* @__PURE__ */ jsx8("label", { css: styles8.label, children: "Small" }),
|
|
4050
|
+
/* @__PURE__ */ jsx8("input", { css: styles8.input, type: "number", defaultValue: 300 })
|
|
3573
4051
|
] }),
|
|
3574
|
-
/* @__PURE__ */
|
|
3575
|
-
/* @__PURE__ */
|
|
3576
|
-
/* @__PURE__ */
|
|
4052
|
+
/* @__PURE__ */ jsxs8("div", { children: [
|
|
4053
|
+
/* @__PURE__ */ jsx8("label", { css: styles8.label, children: "Medium" }),
|
|
4054
|
+
/* @__PURE__ */ jsx8("input", { css: styles8.input, type: "number", defaultValue: 700 })
|
|
3577
4055
|
] }),
|
|
3578
|
-
/* @__PURE__ */
|
|
3579
|
-
/* @__PURE__ */
|
|
3580
|
-
/* @__PURE__ */
|
|
4056
|
+
/* @__PURE__ */ jsxs8("div", { children: [
|
|
4057
|
+
/* @__PURE__ */ jsx8("label", { css: styles8.label, children: "Large" }),
|
|
4058
|
+
/* @__PURE__ */ jsx8("input", { css: styles8.input, type: "number", defaultValue: 1400 })
|
|
3581
4059
|
] })
|
|
3582
4060
|
] })
|
|
3583
4061
|
] })
|
|
3584
4062
|
] }),
|
|
3585
|
-
/* @__PURE__ */
|
|
3586
|
-
/* @__PURE__ */
|
|
3587
|
-
/* @__PURE__ */
|
|
4063
|
+
/* @__PURE__ */ jsxs8("div", { css: styles8.footer, children: [
|
|
4064
|
+
/* @__PURE__ */ jsx8("button", { css: styles8.cancelBtn, onClick: onClose, children: "Cancel" }),
|
|
4065
|
+
/* @__PURE__ */ jsx8("button", { css: styles8.saveBtn, children: "Save Changes" })
|
|
3588
4066
|
] })
|
|
3589
4067
|
] }) });
|
|
3590
4068
|
}
|
|
3591
4069
|
|
|
3592
4070
|
// src/components/ErrorModal.tsx
|
|
3593
|
-
import { css as
|
|
3594
|
-
import { jsx as
|
|
3595
|
-
var
|
|
3596
|
-
overlay:
|
|
4071
|
+
import { css as css9 } from "@emotion/react";
|
|
4072
|
+
import { jsx as jsx9, jsxs as jsxs9 } from "@emotion/react/jsx-runtime";
|
|
4073
|
+
var styles9 = {
|
|
4074
|
+
overlay: css9`
|
|
3597
4075
|
position: fixed;
|
|
3598
4076
|
inset: 0;
|
|
3599
4077
|
background: rgba(0, 0, 0, 0.5);
|
|
@@ -3602,7 +4080,7 @@ var styles8 = {
|
|
|
3602
4080
|
justify-content: center;
|
|
3603
4081
|
z-index: 1100;
|
|
3604
4082
|
`,
|
|
3605
|
-
modal:
|
|
4083
|
+
modal: css9`
|
|
3606
4084
|
background: ${colors.surface};
|
|
3607
4085
|
border-radius: 12px;
|
|
3608
4086
|
padding: 24px;
|
|
@@ -3610,31 +4088,31 @@ var styles8 = {
|
|
|
3610
4088
|
width: 90%;
|
|
3611
4089
|
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
|
|
3612
4090
|
`,
|
|
3613
|
-
header:
|
|
4091
|
+
header: css9`
|
|
3614
4092
|
display: flex;
|
|
3615
4093
|
align-items: center;
|
|
3616
4094
|
gap: 12px;
|
|
3617
4095
|
margin-bottom: 12px;
|
|
3618
4096
|
`,
|
|
3619
|
-
icon:
|
|
4097
|
+
icon: css9`
|
|
3620
4098
|
width: 24px;
|
|
3621
4099
|
height: 24px;
|
|
3622
4100
|
color: ${colors.danger};
|
|
3623
4101
|
flex-shrink: 0;
|
|
3624
4102
|
`,
|
|
3625
|
-
title:
|
|
4103
|
+
title: css9`
|
|
3626
4104
|
font-size: ${fontSize.lg};
|
|
3627
4105
|
font-weight: 600;
|
|
3628
4106
|
color: ${colors.text};
|
|
3629
4107
|
margin: 0;
|
|
3630
4108
|
`,
|
|
3631
|
-
message:
|
|
4109
|
+
message: css9`
|
|
3632
4110
|
font-size: ${fontSize.base};
|
|
3633
4111
|
color: ${colors.textSecondary};
|
|
3634
4112
|
margin: 0 0 20px 0;
|
|
3635
4113
|
line-height: 1.5;
|
|
3636
4114
|
`,
|
|
3637
|
-
button:
|
|
4115
|
+
button: css9`
|
|
3638
4116
|
width: 100%;
|
|
3639
4117
|
padding: 10px 16px;
|
|
3640
4118
|
border-radius: 6px;
|
|
@@ -3654,28 +4132,28 @@ var styles8 = {
|
|
|
3654
4132
|
function ErrorModal() {
|
|
3655
4133
|
const { error, clearError } = useStudio();
|
|
3656
4134
|
if (!error) return null;
|
|
3657
|
-
return /* @__PURE__ */
|
|
3658
|
-
/* @__PURE__ */
|
|
3659
|
-
/* @__PURE__ */
|
|
3660
|
-
/* @__PURE__ */
|
|
4135
|
+
return /* @__PURE__ */ jsx9("div", { css: styles9.overlay, onClick: clearError, children: /* @__PURE__ */ jsxs9("div", { css: styles9.modal, onClick: (e) => e.stopPropagation(), children: [
|
|
4136
|
+
/* @__PURE__ */ jsxs9("div", { css: styles9.header, children: [
|
|
4137
|
+
/* @__PURE__ */ jsx9("svg", { css: styles9.icon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx9("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" }) }),
|
|
4138
|
+
/* @__PURE__ */ jsx9("h3", { css: styles9.title, children: error.title })
|
|
3661
4139
|
] }),
|
|
3662
|
-
/* @__PURE__ */
|
|
3663
|
-
/* @__PURE__ */
|
|
4140
|
+
/* @__PURE__ */ jsx9("p", { css: styles9.message, children: error.message }),
|
|
4141
|
+
/* @__PURE__ */ jsx9("button", { css: styles9.button, onClick: clearError, children: "OK" })
|
|
3664
4142
|
] }) });
|
|
3665
4143
|
}
|
|
3666
4144
|
|
|
3667
4145
|
// src/components/StudioUI.tsx
|
|
3668
|
-
import { jsx as
|
|
4146
|
+
import { jsx as jsx10, jsxs as jsxs10 } from "@emotion/react/jsx-runtime";
|
|
3669
4147
|
var btnHeight3 = "36px";
|
|
3670
|
-
var
|
|
3671
|
-
container:
|
|
4148
|
+
var styles10 = {
|
|
4149
|
+
container: css10`
|
|
3672
4150
|
${baseReset}
|
|
3673
4151
|
display: flex;
|
|
3674
4152
|
flex-direction: column;
|
|
3675
4153
|
height: 100%;
|
|
3676
4154
|
background: ${colors.background};
|
|
3677
4155
|
`,
|
|
3678
|
-
header:
|
|
4156
|
+
header: css10`
|
|
3679
4157
|
display: flex;
|
|
3680
4158
|
align-items: center;
|
|
3681
4159
|
justify-content: space-between;
|
|
@@ -3684,7 +4162,7 @@ var styles9 = {
|
|
|
3684
4162
|
border-bottom: 1px solid ${colors.border};
|
|
3685
4163
|
position: relative;
|
|
3686
4164
|
`,
|
|
3687
|
-
title:
|
|
4165
|
+
title: css10`
|
|
3688
4166
|
font-size: ${fontSize.lg};
|
|
3689
4167
|
font-weight: 600;
|
|
3690
4168
|
color: ${colors.text};
|
|
@@ -3692,14 +4170,14 @@ var styles9 = {
|
|
|
3692
4170
|
letter-spacing: -0.02em;
|
|
3693
4171
|
flex-shrink: 0;
|
|
3694
4172
|
`,
|
|
3695
|
-
headerLeft:
|
|
4173
|
+
headerLeft: css10`
|
|
3696
4174
|
display: flex;
|
|
3697
4175
|
align-items: center;
|
|
3698
4176
|
gap: 12px;
|
|
3699
4177
|
flex: 1;
|
|
3700
4178
|
min-width: 0;
|
|
3701
4179
|
`,
|
|
3702
|
-
headerCenter:
|
|
4180
|
+
headerCenter: css10`
|
|
3703
4181
|
position: absolute;
|
|
3704
4182
|
left: 50%;
|
|
3705
4183
|
transform: translateX(-50%);
|
|
@@ -3707,7 +4185,7 @@ var styles9 = {
|
|
|
3707
4185
|
align-items: center;
|
|
3708
4186
|
max-width: 50%;
|
|
3709
4187
|
`,
|
|
3710
|
-
breadcrumbs:
|
|
4188
|
+
breadcrumbs: css10`
|
|
3711
4189
|
display: flex;
|
|
3712
4190
|
align-items: center;
|
|
3713
4191
|
gap: 6px;
|
|
@@ -3715,11 +4193,11 @@ var styles9 = {
|
|
|
3715
4193
|
color: ${colors.textSecondary};
|
|
3716
4194
|
overflow: hidden;
|
|
3717
4195
|
`,
|
|
3718
|
-
breadcrumbSeparator:
|
|
4196
|
+
breadcrumbSeparator: css10`
|
|
3719
4197
|
color: ${colors.border};
|
|
3720
4198
|
flex-shrink: 0;
|
|
3721
4199
|
`,
|
|
3722
|
-
breadcrumbItem:
|
|
4200
|
+
breadcrumbItem: css10`
|
|
3723
4201
|
color: ${colors.textSecondary};
|
|
3724
4202
|
text-decoration: none;
|
|
3725
4203
|
cursor: pointer;
|
|
@@ -3730,19 +4208,19 @@ var styles9 = {
|
|
|
3730
4208
|
color: ${colors.primary};
|
|
3731
4209
|
}
|
|
3732
4210
|
`,
|
|
3733
|
-
breadcrumbCurrent:
|
|
4211
|
+
breadcrumbCurrent: css10`
|
|
3734
4212
|
color: ${colors.text};
|
|
3735
4213
|
font-weight: 500;
|
|
3736
4214
|
white-space: nowrap;
|
|
3737
4215
|
overflow: hidden;
|
|
3738
4216
|
text-overflow: ellipsis;
|
|
3739
4217
|
`,
|
|
3740
|
-
headerActions:
|
|
4218
|
+
headerActions: css10`
|
|
3741
4219
|
display: flex;
|
|
3742
4220
|
align-items: center;
|
|
3743
4221
|
gap: 8px;
|
|
3744
4222
|
`,
|
|
3745
|
-
headerBtn:
|
|
4223
|
+
headerBtn: css10`
|
|
3746
4224
|
height: ${btnHeight3};
|
|
3747
4225
|
padding: 0 12px;
|
|
3748
4226
|
background: ${colors.surface};
|
|
@@ -3759,23 +4237,23 @@ var styles9 = {
|
|
|
3759
4237
|
border-color: ${colors.borderHover};
|
|
3760
4238
|
}
|
|
3761
4239
|
`,
|
|
3762
|
-
headerIcon:
|
|
4240
|
+
headerIcon: css10`
|
|
3763
4241
|
width: 16px;
|
|
3764
4242
|
height: 16px;
|
|
3765
4243
|
color: ${colors.textSecondary};
|
|
3766
4244
|
`,
|
|
3767
|
-
content:
|
|
4245
|
+
content: css10`
|
|
3768
4246
|
flex: 1;
|
|
3769
4247
|
display: flex;
|
|
3770
4248
|
overflow: hidden;
|
|
3771
4249
|
`,
|
|
3772
|
-
fileBrowser:
|
|
4250
|
+
fileBrowser: css10`
|
|
3773
4251
|
flex: 1;
|
|
3774
4252
|
min-width: 0;
|
|
3775
4253
|
overflow: auto;
|
|
3776
4254
|
padding: 20px 24px;
|
|
3777
4255
|
`,
|
|
3778
|
-
dropOverlay:
|
|
4256
|
+
dropOverlay: css10`
|
|
3779
4257
|
position: absolute;
|
|
3780
4258
|
top: 0;
|
|
3781
4259
|
left: 0;
|
|
@@ -3790,7 +4268,7 @@ var styles9 = {
|
|
|
3790
4268
|
z-index: 50;
|
|
3791
4269
|
pointer-events: none;
|
|
3792
4270
|
`,
|
|
3793
|
-
dropMessage:
|
|
4271
|
+
dropMessage: css10`
|
|
3794
4272
|
display: flex;
|
|
3795
4273
|
flex-direction: column;
|
|
3796
4274
|
align-items: center;
|
|
@@ -3799,23 +4277,23 @@ var styles9 = {
|
|
|
3799
4277
|
font-size: ${fontSize.lg};
|
|
3800
4278
|
font-weight: 600;
|
|
3801
4279
|
`,
|
|
3802
|
-
dropIcon:
|
|
4280
|
+
dropIcon: css10`
|
|
3803
4281
|
width: 48px;
|
|
3804
4282
|
height: 48px;
|
|
3805
4283
|
`
|
|
3806
4284
|
};
|
|
3807
4285
|
function StudioUI({ onClose, isVisible = true }) {
|
|
3808
|
-
const [currentPath, setCurrentPathInternal] =
|
|
3809
|
-
const [selectedItems, setSelectedItems] =
|
|
3810
|
-
const [lastSelectedPath, setLastSelectedPath] =
|
|
3811
|
-
const [viewMode, setViewMode] =
|
|
3812
|
-
const [focusedItem, setFocusedItem] =
|
|
3813
|
-
const [meta, setMeta] =
|
|
3814
|
-
const [isLoading, setIsLoading] =
|
|
3815
|
-
const [refreshKey, setRefreshKey] =
|
|
3816
|
-
const [searchQuery, setSearchQuery] =
|
|
3817
|
-
const [error, setError] =
|
|
3818
|
-
const [isDragging, setIsDragging] =
|
|
4286
|
+
const [currentPath, setCurrentPathInternal] = useState9("public");
|
|
4287
|
+
const [selectedItems, setSelectedItems] = useState9(/* @__PURE__ */ new Set());
|
|
4288
|
+
const [lastSelectedPath, setLastSelectedPath] = useState9(null);
|
|
4289
|
+
const [viewMode, setViewMode] = useState9("grid");
|
|
4290
|
+
const [focusedItem, setFocusedItem] = useState9(null);
|
|
4291
|
+
const [meta, setMeta] = useState9(null);
|
|
4292
|
+
const [isLoading, setIsLoading] = useState9(false);
|
|
4293
|
+
const [refreshKey, setRefreshKey] = useState9(0);
|
|
4294
|
+
const [searchQuery, setSearchQuery] = useState9("");
|
|
4295
|
+
const [error, setError] = useState9(null);
|
|
4296
|
+
const [isDragging, setIsDragging] = useState9(false);
|
|
3819
4297
|
const triggerRefresh = useCallback3(() => {
|
|
3820
4298
|
setRefreshKey((k) => k + 1);
|
|
3821
4299
|
}, []);
|
|
@@ -3961,42 +4439,42 @@ function StudioUI({ onClose, isVisible = true }) {
|
|
|
3961
4439
|
showError,
|
|
3962
4440
|
clearError
|
|
3963
4441
|
};
|
|
3964
|
-
return /* @__PURE__ */
|
|
3965
|
-
/* @__PURE__ */
|
|
3966
|
-
/* @__PURE__ */
|
|
3967
|
-
/* @__PURE__ */
|
|
3968
|
-
/* @__PURE__ */
|
|
3969
|
-
/* @__PURE__ */
|
|
3970
|
-
/* @__PURE__ */
|
|
4442
|
+
return /* @__PURE__ */ jsx10(StudioContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs10("div", { css: styles10.container, children: [
|
|
4443
|
+
/* @__PURE__ */ jsxs10("div", { css: styles10.header, children: [
|
|
4444
|
+
/* @__PURE__ */ jsx10("div", { css: styles10.headerLeft, children: /* @__PURE__ */ jsx10("h1", { css: styles10.title, children: "Studio" }) }),
|
|
4445
|
+
/* @__PURE__ */ jsx10("div", { css: styles10.headerCenter, children: /* @__PURE__ */ jsx10(Breadcrumbs, { currentPath, onNavigate: setCurrentPath }) }),
|
|
4446
|
+
/* @__PURE__ */ jsxs10("div", { css: styles10.headerActions, children: [
|
|
4447
|
+
/* @__PURE__ */ jsx10(StudioSettings, {}),
|
|
4448
|
+
/* @__PURE__ */ jsx10(
|
|
3971
4449
|
"button",
|
|
3972
4450
|
{
|
|
3973
|
-
css:
|
|
4451
|
+
css: styles10.headerBtn,
|
|
3974
4452
|
onClick: onClose,
|
|
3975
4453
|
"aria-label": "Close Studio",
|
|
3976
|
-
children: /* @__PURE__ */
|
|
4454
|
+
children: /* @__PURE__ */ jsx10(CloseIcon, {})
|
|
3977
4455
|
}
|
|
3978
4456
|
)
|
|
3979
4457
|
] })
|
|
3980
4458
|
] }),
|
|
3981
|
-
/* @__PURE__ */
|
|
3982
|
-
/* @__PURE__ */
|
|
4459
|
+
/* @__PURE__ */ jsx10(StudioToolbar, {}),
|
|
4460
|
+
/* @__PURE__ */ jsxs10(
|
|
3983
4461
|
"div",
|
|
3984
4462
|
{
|
|
3985
|
-
css:
|
|
4463
|
+
css: styles10.content,
|
|
3986
4464
|
onDragOver: handleDragOver,
|
|
3987
4465
|
onDragLeave: handleDragLeave,
|
|
3988
4466
|
onDrop: handleDrop,
|
|
3989
4467
|
children: [
|
|
3990
|
-
isDragging && /* @__PURE__ */
|
|
3991
|
-
/* @__PURE__ */
|
|
3992
|
-
/* @__PURE__ */
|
|
4468
|
+
isDragging && /* @__PURE__ */ jsx10("div", { css: styles10.dropOverlay, children: /* @__PURE__ */ jsxs10("div", { css: styles10.dropMessage, children: [
|
|
4469
|
+
/* @__PURE__ */ jsx10("svg", { css: styles10.dropIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx10("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" }) }),
|
|
4470
|
+
/* @__PURE__ */ jsx10("span", { children: "Drop files to upload" })
|
|
3993
4471
|
] }) }),
|
|
3994
|
-
/* @__PURE__ */
|
|
4472
|
+
/* @__PURE__ */ jsx10("div", { css: styles10.fileBrowser, children: viewMode === "grid" ? /* @__PURE__ */ jsx10(StudioFileGrid, {}) : /* @__PURE__ */ jsx10(StudioFileList, {}) })
|
|
3995
4473
|
]
|
|
3996
4474
|
}
|
|
3997
4475
|
),
|
|
3998
|
-
focusedItem && /* @__PURE__ */
|
|
3999
|
-
/* @__PURE__ */
|
|
4476
|
+
focusedItem && /* @__PURE__ */ jsx10(StudioDetailView, {}),
|
|
4477
|
+
/* @__PURE__ */ jsx10(ErrorModal, {})
|
|
4000
4478
|
] }) });
|
|
4001
4479
|
}
|
|
4002
4480
|
function Breadcrumbs({ currentPath, onNavigate }) {
|
|
@@ -4005,12 +4483,12 @@ function Breadcrumbs({ currentPath, onNavigate }) {
|
|
|
4005
4483
|
name: part,
|
|
4006
4484
|
path: parts.slice(0, index + 1).join("/")
|
|
4007
4485
|
}));
|
|
4008
|
-
return /* @__PURE__ */
|
|
4009
|
-
index > 0 && /* @__PURE__ */
|
|
4010
|
-
index === breadcrumbs.length - 1 ? /* @__PURE__ */
|
|
4486
|
+
return /* @__PURE__ */ jsx10("div", { css: styles10.breadcrumbs, children: breadcrumbs.map((crumb, index) => /* @__PURE__ */ jsxs10("span", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
|
|
4487
|
+
index > 0 && /* @__PURE__ */ jsx10("span", { css: styles10.breadcrumbSeparator, children: "/" }),
|
|
4488
|
+
index === breadcrumbs.length - 1 ? /* @__PURE__ */ jsx10("span", { css: styles10.breadcrumbCurrent, children: crumb.name }) : /* @__PURE__ */ jsx10(
|
|
4011
4489
|
"span",
|
|
4012
4490
|
{
|
|
4013
|
-
css:
|
|
4491
|
+
css: styles10.breadcrumbItem,
|
|
4014
4492
|
onClick: () => onNavigate(crumb.path),
|
|
4015
4493
|
children: crumb.name
|
|
4016
4494
|
}
|
|
@@ -4018,10 +4496,10 @@ function Breadcrumbs({ currentPath, onNavigate }) {
|
|
|
4018
4496
|
] }, crumb.path)) });
|
|
4019
4497
|
}
|
|
4020
4498
|
function CloseIcon() {
|
|
4021
|
-
return /* @__PURE__ */
|
|
4499
|
+
return /* @__PURE__ */ jsxs10(
|
|
4022
4500
|
"svg",
|
|
4023
4501
|
{
|
|
4024
|
-
css:
|
|
4502
|
+
css: styles10.headerIcon,
|
|
4025
4503
|
xmlns: "http://www.w3.org/2000/svg",
|
|
4026
4504
|
viewBox: "0 0 24 24",
|
|
4027
4505
|
fill: "none",
|
|
@@ -4030,8 +4508,8 @@ function CloseIcon() {
|
|
|
4030
4508
|
strokeLinecap: "round",
|
|
4031
4509
|
strokeLinejoin: "round",
|
|
4032
4510
|
children: [
|
|
4033
|
-
/* @__PURE__ */
|
|
4034
|
-
/* @__PURE__ */
|
|
4511
|
+
/* @__PURE__ */ jsx10("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
|
|
4512
|
+
/* @__PURE__ */ jsx10("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
|
|
4035
4513
|
]
|
|
4036
4514
|
}
|
|
4037
4515
|
);
|
|
@@ -4041,4 +4519,4 @@ export {
|
|
|
4041
4519
|
StudioUI,
|
|
4042
4520
|
StudioUI_default as default
|
|
4043
4521
|
};
|
|
4044
|
-
//# sourceMappingURL=StudioUI-
|
|
4522
|
+
//# sourceMappingURL=StudioUI-EER6PAXH.mjs.map
|