next-tinacms-cloudinary 4.2.0 → 4.3.1

package/dist/index.es.js

@@ -52675,11 +52675,13 @@ const PopupModal = ({ className = "", style = {}, ...props }) => /* @__PURE__ */
 const ERROR_MISSING_CMS = `useCMS could not find an instance of CMS`;
 const CMSContext = react.exports.createContext(null);
 function useCMS$1() {
-  const cms = react.exports.useContext(CMSContext);
+  const { cms, dispatch, state } = react.exports.useContext(CMSContext);
   if (!cms) {
     throw new Error(ERROR_MISSING_CMS);
   }
   const [, setEnabled] = react.exports.useState(cms.enabled);
+  cms.dispatch = dispatch;
+  cms.state = state;
   react.exports.useEffect(() => {
     return cms.events.subscribe("cms", () => {
       setEnabled(cms.enabled);
@@ -52739,7 +52741,8 @@ const Button = ({
   const roundedClasses = {
     full: `rounded-full`,
     left: `rounded-l-full`,
-    right: `rounded-r-full`
+    right: `rounded-r-full`,
+    custom: ""
   };
   const sizeClasses = {
     small: `text-xs h-8 px-3`,
@@ -52888,12 +52891,24 @@ function IconBase(props) {
     return elem(conf);
   }) : elem(DefaultContext);
 }
+function IoMdRefresh(props) {
+  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 512 512" }, "child": [{ "tag": "path", "attr": { "d": "M256 388c-72.597 0-132-59.405-132-132 0-72.601 59.403-132 132-132 36.3 0 69.299 15.4 92.406 39.601L278 234h154V80l-51.698 51.702C348.406 99.798 304.406 80 256 80c-96.797 0-176 79.203-176 176s78.094 176 176 176c81.045 0 148.287-54.134 169.401-128H378.85c-18.745 49.561-67.138 84-122.85 84z" } }] })(props);
+}
+function IoMdSync(props) {
+  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 512 512" }, "child": [{ "tag": "path", "attr": { "d": "M256 93.09V32l-80 81.454 80 81.456v-61.093c65.996 0 120 54.982 120 122.183 0 20.363-5 39.714-14.004 57.016L391 342.547c15.996-25.457 25-54.988 25-86.547 0-89.599-72.002-162.91-160-162.91zm0 285.094c-66.001 0-120-54.988-120-122.184 0-20.363 5-39.709 13.999-57.02L121 169.454C104.999 193.89 96 224.436 96 256c0 89.599 72.002 162.91 160 162.91V480l80-81.453-80-81.457v61.094z" } }] })(props);
+}
 function BiArrowToBottom(props) {
   return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "M6 18h12v2H6zm5-14v8.586L6.707 8.293 5.293 9.707 12 16.414l6.707-6.707-1.414-1.414L13 12.586V4z" } }] })(props);
 }
 function BiCloudUpload(props) {
   return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "M13 19v-4h3l-4-5-4 5h3v4z" } }, { "tag": "path", "attr": { "d": "M7 19h2v-2H7c-1.654 0-3-1.346-3-3 0-1.404 1.199-2.756 2.673-3.015l.581-.102.192-.558C8.149 8.274 9.895 7 12 7c2.757 0 5 2.243 5 5v1h1c1.103 0 2 .897 2 2s-.897 2-2 2h-3v2h3c2.206 0 4-1.794 4-4a4.01 4.01 0 0 0-3.056-3.888C18.507 7.67 15.56 5 12 5 9.244 5 6.85 6.611 5.757 9.15 3.609 9.792 2 11.82 2 14c0 2.757 2.243 5 5 5z" } }] })(props);
 }
+function BiCopyAlt(props) {
+  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "M20 2H10c-1.103 0-2 .897-2 2v4H4c-1.103 0-2 .897-2 2v10c0 1.103.897 2 2 2h10c1.103 0 2-.897 2-2v-4h4c1.103 0 2-.897 2-2V4c0-1.103-.897-2-2-2zM4 20V10h10l.002 10H4zm16-6h-4v-4c0-1.103-.897-2-2-2h-4V4h10v10z" } }, { "tag": "path", "attr": { "d": "M6 12h6v2H6zm0 4h6v2H6z" } }] })(props);
+}
+function BiFileBlank(props) {
+  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "M19.937 8.68c-.011-.032-.02-.063-.033-.094a.997.997 0 0 0-.196-.293l-6-6a.997.997 0 0 0-.293-.196c-.03-.014-.062-.022-.094-.033a.991.991 0 0 0-.259-.051C13.04 2.011 13.021 2 13 2H6c-1.103 0-2 .897-2 2v16c0 1.103.897 2 2 2h12c1.103 0 2-.897 2-2V9c0-.021-.011-.04-.013-.062a.99.99 0 0 0-.05-.258zM16.586 8H14V5.414L16.586 8zM6 20V4h6v5a1 1 0 0 0 1 1h5l.002 10H6z" } }] })(props);
+}
 function BiFile(props) {
   return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "M19.903 8.586a.997.997 0 0 0-.196-.293l-6-6a.997.997 0 0 0-.293-.196c-.03-.014-.062-.022-.094-.033a.991.991 0 0 0-.259-.051C13.04 2.011 13.021 2 13 2H6c-1.103 0-2 .897-2 2v16c0 1.103.897 2 2 2h12c1.103 0 2-.897 2-2V9c0-.021-.011-.04-.013-.062a.952.952 0 0 0-.051-.259c-.01-.032-.019-.063-.033-.093zM16.586 8H14V5.414L16.586 8zM6 20V4h6v5a1 1 0 0 0 1 1h5l.002 10H6z" } }, { "tag": "path", "attr": { "d": "M8 12h8v2H8zm0 4h8v2H8zm0-8h2v2H8z" } }] })(props);
 }
@@ -52912,8 +52927,8 @@ function BiListUl(props) {
 function BiRightArrowAlt(props) {
   return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "m11.293 17.293 1.414 1.414L19.414 12l-6.707-6.707-1.414 1.414L15.586 11H6v2h9.586z" } }] })(props);
 }
-function IoMdSync(props) {
-  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 512 512" }, "child": [{ "tag": "path", "attr": { "d": "M256 93.09V32l-80 81.454 80 81.456v-61.093c65.996 0 120 54.982 120 122.183 0 20.363-5 39.714-14.004 57.016L391 342.547c15.996-25.457 25-54.988 25-86.547 0-89.599-72.002-162.91-160-162.91zm0 285.094c-66.001 0-120-54.988-120-122.184 0-20.363 5-39.709 13.999-57.02L121 169.454C104.999 193.89 96 224.436 96 256c0 89.599 72.002 162.91 160 162.91V480l80-81.453-80-81.457v61.094z" } }] })(props);
+function BiX(props) {
+  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "m16.192 6.344-4.243 4.242-4.242-4.242-1.414 1.414L10.535 12l-4.242 4.242 1.414 1.414 4.242-4.242 4.243 4.242 1.414-1.414L13.364 12l4.242-4.242z" } }] })(props);
 }
 React__default.createContext({
   rawMode: false,
@@ -52939,9 +52954,33 @@ const createHTMLInlinePlugin = createPluginFactory({
   isVoid: true,
   isInline: true
 });
+const textFieldClasses = "shadow-inner focus:shadow-outline focus:border-blue-500 focus:outline-none block text-base placeholder:text-gray-300 px-3 py-2 text-gray-600 w-full bg-white border border-gray-200 transition-all ease-out duration-150 focus:text-gray-900 rounded-md";
+const disabledClasses = "opacity-50 pointer-events-none cursor-not-allowed";
+react.exports.forwardRef(({ className, disabled, ...rest }, ref) => {
+  return /* @__PURE__ */ react.exports.createElement("input", {
+    ref,
+    type: "text",
+    className: `${textFieldClasses} ${disabled ? disabledClasses : ""} ${className}`,
+    ...rest
+  });
+});
+react.exports.forwardRef(({ ...props }, ref) => {
+  return /* @__PURE__ */ react.exports.createElement("textarea", {
+    ...props,
+    className: "shadow-inner text-base px-3 py-2 text-gray-600 resize-y focus:shadow-outline focus:border-blue-500 block w-full border border-gray-200 focus:text-gray-900 rounded-md",
+    ref,
+    style: { minHeight: "160px" }
+  });
+});
 function MdOutlinePhotoLibrary(props) {
   return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "fill": "none", "d": "M0 0h24v24H0V0z" } }, { "tag": "path", "attr": { "d": "M20 4v12H8V4h12m0-2H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-8.5 9.67l1.69 2.26 2.48-3.1L19 15H9zM2 6v14c0 1.1.9 2 2 2h14v-2H4V6H2z" } }] })(props);
 }
+const Input = ({ ...props }) => {
+  return /* @__PURE__ */ react.exports.createElement("input", {
+    className: textFieldClasses,
+    ...props
+  });
+};
 function useCMS() {
   return useCMS$1();
 }
@@ -52962,8 +53001,79 @@ const dropzoneAcceptFromString = (str) => {
   return Object.assign({}, ...(str || DEFAULT_MEDIA_UPLOAD_TYPES).split(",").map((x2) => ({ [x2]: [] })));
 };
 const isImage = (filename) => {
-  return /\.(gif|jpg|jpeg|tiff|png|svg|webp)$/i.test(filename);
+  return /\.(gif|jpg|jpeg|tiff|png|svg|webp|avif)(\?.*)?$/i.test(filename);
 };
+const absoluteImgURL = (str) => {
+  if (str.startsWith("http"))
+    return str;
+  return `${window.location.origin}${str}`;
+};
+const StyledImage = ({ src }) => {
+  const isSvg = /\.svg$/.test(src);
+  return /* @__PURE__ */ react.exports.createElement("img", {
+    src,
+    className: `"block max-w-full rounded shadow overflow-hidden max-h-48 h-auto object-contain transition-opacity duration-100 ease-out m-0 bg-gray-200 bg-auto bg-center bg-no-repeat ${isSvg ? "min-w-[12rem]" : ""}`
+  });
+};
+const StyledFile = ({ src }) => {
+  return /* @__PURE__ */ react.exports.createElement("div", {
+    className: "max-w-full w-full overflow-hidden flex-1 flex justify-start items-center gap-3"
+  }, /* @__PURE__ */ react.exports.createElement("div", {
+    className: "w-14 h-14 bg-gray-50 shadow border border-gray-100 rounded flex justify-center flex-none"
+  }, /* @__PURE__ */ react.exports.createElement(BiFileBlank, {
+    className: "w-3/5 h-full fill-gray-300"
+  })), /* @__PURE__ */ react.exports.createElement("span", {
+    className: "text-base text-left flex-1 text-gray-500 w-full break-words truncate"
+  }, src));
+};
+react.exports.forwardRef(({ onDrop, onClear, onClick, value, src, loading }, ref) => {
+  const cms = useCMS();
+  const { getRootProps, getInputProps } = useDropzone({
+    accept: dropzoneAcceptFromString(cms.media.accept || DEFAULT_MEDIA_UPLOAD_TYPES),
+    onDrop,
+    noClick: !!onClick
+  });
+  return /* @__PURE__ */ react.exports.createElement("div", {
+    className: "w-full max-w-full",
+    ...getRootProps()
+  }, /* @__PURE__ */ react.exports.createElement("input", {
+    ...getInputProps()
+  }), value ? loading ? /* @__PURE__ */ react.exports.createElement(ImageLoadingIndicator, null) : /* @__PURE__ */ react.exports.createElement("div", {
+    className: `relative w-full max-w-full flex justify-start gap-3 ${isImage(src) ? `items-start` : `items-center`}`
+  }, /* @__PURE__ */ react.exports.createElement("button", {
+    className: "shadow-inner focus-within:shadow-outline focus-within:border-blue-500 outline-none overflow-visible cursor-pointer border-none hover:opacity-60 transition ease-out duration-100",
+    onClick,
+    ref
+  }, isImage(src) ? /* @__PURE__ */ react.exports.createElement(StyledImage, {
+    src
+  }) : /* @__PURE__ */ react.exports.createElement(StyledFile, {
+    src
+  })), onClear && /* @__PURE__ */ react.exports.createElement(DeleteImageButton, {
+    onClick: (e2) => {
+      e2.stopPropagation();
+      onClear();
+    }
+  })) : /* @__PURE__ */ react.exports.createElement("button", {
+    className: "outline-none relative hover:opacity-60 w-full",
+    onClick
+  }, loading ? /* @__PURE__ */ react.exports.createElement(ImageLoadingIndicator, null) : /* @__PURE__ */ react.exports.createElement("div", {
+    className: "text-center rounded-[5px] bg-gray-100 text-gray-300 leading-[1.35] py-3 text-[15px] font-normal transition-all ease-out duration-100 hover:opacity-60"
+  }, "Drag 'n' drop a file here,", /* @__PURE__ */ react.exports.createElement("br", null), "or click to select a file")));
+});
+const DeleteImageButton = ({
+  onClick
+}) => {
+  return /* @__PURE__ */ react.exports.createElement(IconButton, {
+    variant: "white",
+    className: "flex-none",
+    onClick
+  }, /* @__PURE__ */ react.exports.createElement(TrashIcon, {
+    className: "w-7 h-auto"
+  }));
+};
+const ImageLoadingIndicator = () => /* @__PURE__ */ react.exports.createElement("div", {
+  className: "p-4 w-full min-h-[96px] flex flex-col justify-center items-center"
+}, /* @__PURE__ */ react.exports.createElement(LoadingDots, null));
 const onKeyDownSoftBreak = (editor, { options: { rules = [] } }) => (event) => {
   const entry = getBlockAbove(editor);
   if (!entry)
@@ -54343,12 +54453,6 @@ class ClickOutBase extends React__default.Component {
   }
 }
 const ClickableWrapper = onClickOutsideHOC(ClickOutBase);
-react.exports.createContext({
-  currentBranch: null,
-  setCurrentBranch: (branch) => {
-    console.warn("BranchContext not initialized");
-  }
-});
 function CursorPaginator({
   navigateNext,
   navigatePrev,
@@ -54372,50 +54476,41 @@ function CursorPaginator({
     className: "w-6 h-full ml-2 opacity-70"
   })));
 }
-function ListMediaItem({
-  item,
-  onClick,
-  onSelect,
-  onDelete
-}) {
+function ListMediaItem({ item, onClick, active: active3 }) {
   const FileIcon = item.type === "dir" ? BiFolder : BiFile;
+  const thumbnail = (item.thumbnails || {})["75x75"];
   return /* @__PURE__ */ React__default.createElement("li", {
-    className: "flex gap-3 items-center py-2 pl-2 pr-3 bg-white transition duration-150 ease-out hover:bg-white/50 " + (item.type === "dir" ? "cursor-pointer" : ""),
-    onClick: () => onClick(item)
-  }, /* @__PURE__ */ React__default.createElement("div", {
+    className: `relative flex shrink-0 gap-3 items-center py-2 pl-2 pr-3 transition duration-150 ease-out cursor-pointer border-b border-gray-150 ${active3 ? "bg-gradient-to-r from-white to-gray-50/50 text-blue-500 hover:bg-gray-50" : "bg-white hover:bg-gray-50/50"}`,
+    onClick: () => {
+      if (!active3) {
+        onClick(item);
+      } else {
+        onClick(false);
+      }
+    }
+  }, item.new && /* @__PURE__ */ React__default.createElement("span", {
+    className: "absolute top-1.5 left-1.5 rounded-full shadow bg-green-100 border border-green-200 text-[10px] tracking-wide	 font-bold text-green-600 px-1.5 py-0.5 z-10"
+  }, "NEW"), /* @__PURE__ */ React__default.createElement("div", {
     className: "w-20 h-20 bg-gray-50 shadow border border-gray-100 rounded overflow-hidden flex justify-center flex-shrink-0"
-  }, isImage(item.thumbnail) ? /* @__PURE__ */ React__default.createElement("img", {
+  }, isImage(thumbnail) ? /* @__PURE__ */ React__default.createElement("img", {
     className: "object-cover w-full h-full object-center",
-    src: item.thumbnail,
+    src: thumbnail,
     alt: item.filename
   }) : /* @__PURE__ */ React__default.createElement(FileIcon, {
     className: "w-3/5 h-full fill-gray-300"
-  })), /* @__PURE__ */ React__default.createElement(Filename, null, item.filename), /* @__PURE__ */ React__default.createElement("div", {
-    className: "flex justify-end gap-3 items-center group transition duration-150 ease-out opacity-70 hover:opacity-100"
-  }, onSelect && item.type === "file" && /* @__PURE__ */ React__default.createElement(Button, {
-    size: "medium",
-    variant: "white",
-    onClick: () => onSelect(item)
-  }, "Insert", " ", /* @__PURE__ */ React__default.createElement(BiArrowToBottom, {
-    className: "ml-1 -mr-0.5 w-6 h-auto text-blue-500 opacity-70"
-  })), onDelete && item.type === "file" && /* @__PURE__ */ React__default.createElement(IconButton, {
-    variant: "ghost",
-    size: "medium",
-    onClick: () => onDelete(item)
-  }, /* @__PURE__ */ React__default.createElement(TrashIcon, {
-    className: "w-6 h-auto"
-  }))));
+  })), /* @__PURE__ */ React__default.createElement("span", {
+    className: "text-base flex-grow w-full break-words truncate"
+  }, item.filename));
 }
-const Filename = ({ className = "", ...props }) => /* @__PURE__ */ React__default.createElement("span", {
-  className: "text-base flex-grow w-full break-words truncate " + className,
-  ...props
-});
 function GridMediaItem({ item, active: active3, onClick }) {
   const FileIcon = item.type === "dir" ? BiFolder : BiFile;
+  const thumbnail = (item.thumbnails || {})["400x400"];
   return /* @__PURE__ */ React__default.createElement("li", {
-    className: `relative pb-[100%] h-0 block shadow border border-gray-100 rounded-md overflow-hidden flex justify-center shrink-0 transition duration-150 ease-out ${active3 ? "shadow-outline" : "shadow hover:shadow-md hover:scale-103 hover:border-gray-150"} ${item.type === "dir" ? "cursor-pointer" : ""}`
-  }, /* @__PURE__ */ React__default.createElement("button", {
-    className: "absolute w-full h-full flex items-center justify-center bg-gray-50",
+    className: `relative pb-[100%] h-0 block border border-gray-100 rounded-md overflow-hidden flex justify-center shrink-0 w-full transition duration-150 ease-out ${active3 ? "shadow-outline" : "shadow hover:shadow-md hover:scale-103 hover:border-gray-150"} ${item.type === "dir" ? "cursor-pointer" : ""}`
+  }, item.new && /* @__PURE__ */ React__default.createElement("span", {
+    className: "absolute top-1.5 left-1.5 rounded-full shadow bg-green-100 border border-green-200 text-[10px] tracking-wide	 font-bold text-green-600 px-1.5 py-0.5 z-10"
+  }, "NEW"), /* @__PURE__ */ React__default.createElement("button", {
+    className: "absolute w-full h-full flex items-center justify-center bg-white",
     onClick: () => {
       if (!active3) {
         onClick(item);
@@ -54423,9 +54518,9 @@ function GridMediaItem({ item, active: active3, onClick }) {
         onClick(false);
       }
     }
-  }, isImage(item.thumbnail) ? /* @__PURE__ */ React__default.createElement("img", {
+  }, isImage(thumbnail) ? /* @__PURE__ */ React__default.createElement("img", {
     className: "object-cover w-full h-full object-center",
-    src: item.thumbnail,
+    src: thumbnail,
     alt: item.filename
   }) : /* @__PURE__ */ React__default.createElement("div", {
     className: "p-4 w-full flex flex-col gap-4 items-center justify-center"
@@ -54472,6 +54567,106 @@ function Breadcrumb({ directory = "", setDirectory }) {
     }, part);
   }));
 }
+const DeleteModal = ({
+  close,
+  deleteFunc,
+  filename
+}) => {
+  return /* @__PURE__ */ React__default.createElement(Modal, null, /* @__PURE__ */ React__default.createElement(PopupModal, null, /* @__PURE__ */ React__default.createElement(ModalHeader, {
+    close
+  }, "Delete ", filename), /* @__PURE__ */ React__default.createElement(ModalBody, {
+    padded: true
+  }, /* @__PURE__ */ React__default.createElement("p", null, "Are you sure you want to delete ", /* @__PURE__ */ React__default.createElement("strong", null, filename), "?")), /* @__PURE__ */ React__default.createElement(ModalActions, null, /* @__PURE__ */ React__default.createElement(Button, {
+    style: { flexGrow: 2 },
+    onClick: close
+  }, "Cancel"), /* @__PURE__ */ React__default.createElement(Button, {
+    style: { flexGrow: 3 },
+    variant: "danger",
+    onClick: () => {
+      deleteFunc();
+      close();
+    }
+  }, "Delete"))));
+};
+const NewFolderModal = ({ onSubmit, close }) => {
+  const [folderName, setFolderName] = React__default.useState("");
+  return /* @__PURE__ */ React__default.createElement(Modal, null, /* @__PURE__ */ React__default.createElement(PopupModal, null, /* @__PURE__ */ React__default.createElement(ModalHeader, {
+    close
+  }, "New Folder"), /* @__PURE__ */ React__default.createElement(ModalBody, {
+    padded: true
+  }, /* @__PURE__ */ React__default.createElement("p", {
+    className: "text-base text-gray-700 mb-2"
+  }, "Please provide a name for your folder."), /* @__PURE__ */ React__default.createElement("p", {
+    className: "text-sm text-gray-500 mb-4 italic"
+  }, /* @__PURE__ */ React__default.createElement("span", {
+    className: "font-bold"
+  }, "Note"), " \u2013 If you navigate away before uploading a media item, the folder will disappear."), /* @__PURE__ */ React__default.createElement(Input, {
+    value: folderName,
+    placeholder: "Folder Name",
+    required: true,
+    onChange: (e2) => setFolderName(e2.target.value)
+  })), /* @__PURE__ */ React__default.createElement(ModalActions, null, /* @__PURE__ */ React__default.createElement(Button, {
+    style: { flexGrow: 2 },
+    onClick: close
+  }, "Cancel"), /* @__PURE__ */ React__default.createElement(Button, {
+    disabled: !folderName,
+    style: { flexGrow: 3 },
+    variant: "primary",
+    onClick: () => {
+      if (!folderName)
+        return;
+      onSubmit(folderName);
+      close();
+    }
+  }, "Create New Folder"))));
+};
+const SyncModal = ({ close, syncFunc, folder, branch }) => {
+  return /* @__PURE__ */ React__default.createElement(Modal, null, /* @__PURE__ */ React__default.createElement(PopupModal, null, /* @__PURE__ */ React__default.createElement(ModalHeader, {
+    close
+  }, "Sync Media"), /* @__PURE__ */ React__default.createElement(ModalBody, {
+    padded: true
+  }, /* @__PURE__ */ React__default.createElement("p", null, `This will copy media assets from the \`${folder}\` folder on branch \`${branch}\` in your git repository to Tina Cloud's asset service. This will allow you to use these assets in your site with Tina Cloud`)), /* @__PURE__ */ React__default.createElement(ModalActions, null, /* @__PURE__ */ React__default.createElement(Button, {
+    style: { flexGrow: 2 },
+    onClick: close
+  }, "Cancel"), /* @__PURE__ */ React__default.createElement(Button, {
+    style: { flexGrow: 3 },
+    variant: "primary",
+    onClick: async () => {
+      await syncFunc();
+      close();
+    }
+  }, "Sync Media"))));
+};
+const CopyField = ({ label, description, value }) => {
+  const [copied, setCopied] = React__default.useState(false);
+  const [fadeOut, setFadeOut] = React__default.useState(false);
+  return /* @__PURE__ */ React__default.createElement("div", {
+    className: "w-full"
+  }, label && /* @__PURE__ */ React__default.createElement("label", {
+    className: "w-full mb-1 block flex-1  text-sm font-bold leading-5 text-gray-700"
+  }, label), /* @__PURE__ */ React__default.createElement("span", {
+    onClick: () => {
+      if (copied === true)
+        return;
+      setCopied(true);
+      setTimeout(() => {
+        setFadeOut(true);
+      }, 2500);
+      setTimeout(() => {
+        setCopied(false);
+        setFadeOut(false);
+      }, 3e3);
+      navigator.clipboard.writeText(value);
+    },
+    className: `shadow-inner text-base leading-5 whitespace-normal break-all px-3 py-2 text-gray-600 w-full bg-gray-50 border border-gray-200 transition-all ease-out duration-150 rounded-md relative overflow-hidden appearance-none flex items-center w-full cursor-pointer hover:bg-white hover:text-blue-500  ${copied ? `pointer-events-none` : ``}`
+  }, /* @__PURE__ */ React__default.createElement(BiCopyAlt, {
+    className: "relative text-blue-500 shrink-0 w-5 h-auto mr-1.5 -ml-0.5 z-20"
+  }), " ", value, " ", copied && /* @__PURE__ */ React__default.createElement("span", {
+    className: `${fadeOut ? `opacity-0` : `opacity-100`} text-blue-500 transition-opacity	duration-500 absolute right-0 w-full h-full px-3 py-2 bg-white bg-opacity-90 flex items-center justify-center text-center tracking-wide font-medium z-10`
+  }, /* @__PURE__ */ React__default.createElement("span", null, "Copied to clipboard!"))), description && /* @__PURE__ */ React__default.createElement("p", {
+    className: "mt-2 text-sm text-gray-500"
+  }, description));
+};
 async function poll(fn2, timeout, interval) {
   const endTime = Number(new Date()) + (timeout || 2e3);
   interval = interval || 100;
@@ -54520,6 +54715,8 @@ function MediaPicker({
       return "loading";
     return "not-configured";
   });
+  const [deleteModalOpen, setDeleteModalOpen] = React__default.useState(false);
+  const [newFolderModalOpen, setNewFolderModalOpen] = React__default.useState(false);
   const [listError, setListError] = react.exports.useState(defaultListError);
   const [directory, setDirectory] = react.exports.useState(props.directory);
   const [list2, setList] = react.exports.useState({
@@ -54529,6 +54726,7 @@ function MediaPicker({
   const [showSync, setShowSync] = react.exports.useState(false);
   const [viewMode, setViewMode] = react.exports.useState("grid");
   const [activeItem, setActiveItem] = react.exports.useState(false);
+  const closePreview = () => setActiveItem(false);
   const [offsetHistory, setOffsetHistory] = react.exports.useState([]);
   const [loadingText, setLoadingText] = react.exports.useState("");
   const offset2 = offsetHistory[offsetHistory.length - 1];
@@ -54550,7 +54748,16 @@ function MediaPicker({
   const branch = (_m = cms.api.tina) == null ? void 0 : _m.branch;
   function loadMedia() {
     setListState("loading");
-    cms.media.list({ offset: offset2, limit: cms.media.pageSize, directory }).then((list22) => {
+    cms.media.list({
+      offset: offset2,
+      limit: cms.media.pageSize,
+      directory,
+      thumbnailSizes: [
+        { w: 75, h: 75 },
+        { w: 400, h: 400 },
+        { w: 1e3, h: 1e3 }
+      ]
+    }).then((list22) => {
       setList(list22);
       setListState("loaded");
     }).catch((e2) => {
@@ -54567,15 +54774,9 @@ function MediaPicker({
     if (!cms.media.isConfigured)
       return;
     loadMedia();
-    return cms.events.subscribe(["media:upload:success", "media:delete:success", "media:pageSize"], loadMedia);
+    return cms.events.subscribe(["media:delete:success", "media:pageSize"], loadMedia);
   }, [offset2, directory, cms.media.isConfigured]);
   const onClickMediaItem = (item) => {
-    if (item.type === "dir") {
-      setDirectory(item.directory === "." || item.directory === "" ? item.filename : join(item.directory, item.filename));
-      resetOffset();
-    }
-  };
-  const onClickGridMediaItem = (item) => {
     if (!item) {
       setActiveItem(false);
     } else if (item.type === "dir") {
@@ -54588,9 +54789,7 @@ function MediaPicker({
   let deleteMediaItem;
   if (allowDelete) {
     deleteMediaItem = (item) => {
-      if (confirm("Are you sure you want to delete this file?")) {
-        cms.media.delete(item);
-      }
+      cms.media.delete(item);
     };
   }
   let selectMediaItem;
@@ -54605,15 +54804,50 @@ function MediaPicker({
   const { getRootProps, getInputProps, isDragActive } = useDropzone({
     accept: dropzoneAcceptFromString(cms.media.accept || DEFAULT_MEDIA_UPLOAD_TYPES),
     multiple: true,
-    onDrop: async (files) => {
+    onDrop: async (files, fileRejections) => {
       try {
         setUploading(true);
-        await cms.media.persist(files.map((file) => {
+        const mediaItems = await cms.media.persist(files.map((file) => {
           return {
             directory: directory || "/",
             file
           };
         }));
+        const errorCodes = {
+          "file-invalid-type": "Invalid file type",
+          "file-too-large": "File too large",
+          "file-too-small": "File too small",
+          "too-many-files": "Too many files"
+        };
+        const printError = (error) => {
+          const message2 = errorCodes[error.code];
+          if (message2) {
+            return message2;
+          }
+          console.error(error);
+          return "Unknown error";
+        };
+        if (fileRejections.length > 0) {
+          const messages = [];
+          fileRejections.map((fileRejection) => {
+            messages.push(`${fileRejection.file.name}: ${fileRejection.errors.map((error) => printError(error)).join(", ")}`);
+          });
+          cms.alerts.error(() => {
+            return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, "Upload Failed. ", /* @__PURE__ */ React__default.createElement("br", null), messages.join(". "), ".");
+          });
+        }
+        if (mediaItems.length !== 0) {
+          setActiveItem(mediaItems[0]);
+          setList((mediaList) => {
+            return {
+              items: [
+                ...mediaItems.map((x2) => ({ ...x2, new: true })),
+                ...mediaList.items
+              ],
+              nextOffset: mediaList.nextOffset
+            };
+          });
+        }
       } catch {
       }
       setUploading(false);
@@ -54678,28 +54912,56 @@ function MediaPicker({
       docsLink
     });
   }
-  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(MediaPickerWrap, null, /* @__PURE__ */ React__default.createElement("div", {
-    className: "flex items-center bg-gray-50 border-b border-gray-150 gap-x-4 py-3 px-5 shadow-sm flex-shrink-0"
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, deleteModalOpen && /* @__PURE__ */ React__default.createElement(DeleteModal, {
+    filename: activeItem ? activeItem.filename : "",
+    deleteFunc: () => {
+      if (activeItem) {
+        deleteMediaItem(activeItem);
+        setActiveItem(false);
+      }
+    },
+    close: () => setDeleteModalOpen(false)
+  }), newFolderModalOpen && /* @__PURE__ */ React__default.createElement(NewFolderModal, {
+    onSubmit: (name) => {
+      setDirectory((oldDir) => {
+        if (oldDir) {
+          return join(oldDir, name);
+        } else {
+          return name;
+        }
+      });
+      resetOffset();
+    },
+    close: () => setNewFolderModalOpen(false)
+  }), /* @__PURE__ */ React__default.createElement(MediaPickerWrap, null, /* @__PURE__ */ React__default.createElement("div", {
+    className: "flex flex-wrap items-center bg-gray-50 border-b border-gray-150 gap-4 py-3 px-5 shadow-sm flex-shrink-0"
   }, /* @__PURE__ */ React__default.createElement("div", {
-    className: `grow-0 flex divide-x divide-gray-150 shadow-inner bg-gray-50 border border-gray-150 justify-between rounded-md`
-  }, /* @__PURE__ */ React__default.createElement("button", {
-    className: `relative whitespace-nowrap flex items-center justify-center flex-1 block font-medium text-base px-2.5 py-1 transition-all ease-out duration-150 rounded-l-md ${viewMode === "grid" ? "bg-white text-blue-500 shadow" : "text-gray-400"}`,
-    onClick: () => {
-      setViewMode("grid");
-    }
-  }, /* @__PURE__ */ React__default.createElement(BiGridAlt, {
-    className: "w-6 h-full opacity-70"
-  })), /* @__PURE__ */ React__default.createElement("button", {
-    className: `relative whitespace-nowrap flex items-center justify-center flex-1 block font-medium text-base px-2 py-1 transition-all ease-out duration-150 rounded-r-md ${viewMode === "list" ? "bg-white text-blue-500 shadow" : "text-gray-400"}`,
-    onClick: () => {
-      setViewMode("list");
-    }
-  }, /* @__PURE__ */ React__default.createElement(BiListUl, {
-    className: "w-8 h-full opacity-70"
-  }))), /* @__PURE__ */ React__default.createElement(Breadcrumb, {
+    className: "flex flex-1 items-center gap-4"
+  }, /* @__PURE__ */ React__default.createElement(ViewModeToggle, {
+    viewMode,
+    setViewMode
+  }), /* @__PURE__ */ React__default.createElement(Breadcrumb, {
     directory,
     setDirectory
-  }), !isLocal2 && hasTinaMedia && /* @__PURE__ */ React__default.createElement(Button, {
+  })), /* @__PURE__ */ React__default.createElement("div", {
+    className: "flex items-center gap-4"
+  }, /* @__PURE__ */ React__default.createElement(Button, {
+    busy: false,
+    variant: "white",
+    onClick: loadMedia,
+    className: "whitespace-nowrap"
+  }, "Refresh", /* @__PURE__ */ React__default.createElement(IoMdRefresh, {
+    className: "w-6 h-full ml-2 opacity-70 text-blue-500"
+  })), /* @__PURE__ */ React__default.createElement(Button, {
+    busy: false,
+    variant: "white",
+    onClick: () => {
+      setNewFolderModalOpen(true);
+    },
+    className: "whitespace-nowrap"
+  }, "New Folder", /* @__PURE__ */ React__default.createElement(BiFolder, {
+    className: "w-6 h-full ml-2 opacity-70 text-blue-500"
+  })), !isLocal2 && hasTinaMedia && /* @__PURE__ */ React__default.createElement(Button, {
     busy: false,
     variant: "white",
     onClick: () => {
@@ -54710,11 +54972,13 @@ function MediaPicker({
   })), /* @__PURE__ */ React__default.createElement(UploadButton, {
     onClick,
     uploading
-  })), /* @__PURE__ */ React__default.createElement("div", {
-    className: "flex h-full overflow-hidden"
+  }))), /* @__PURE__ */ React__default.createElement("div", {
+    className: "flex h-full overflow-hidden bg-white"
+  }, /* @__PURE__ */ React__default.createElement("div", {
+    className: "flex w-full flex-col h-full @container"
   }, /* @__PURE__ */ React__default.createElement("ul", {
     ...rootProps,
-    className: `h-full bg-white overflow-y-auto transition duration-150 ease-out ${viewMode === "list" && "flex flex-1 flex-col divide-y divide-gray-100"} ${viewMode === "grid" && "w-full grid grid-cols-[repeat(auto-fit,_minmax(min(100%,_max(220px,_100%/8)),_1fr))] auto-rows-auto grid-flow-dense p-4 gap-4 content-start"} ${isDragActive ? `border-2 border-blue-500 rounded-lg` : ``}`
+    className: `h-full grow overflow-y-auto transition duration-150 ease-out bg-gradient-to-b from-gray-50/50 to-gray-50 ${list2.items.length === 0 || viewMode === "list" && "w-full flex flex-1 flex-col justify-start -mb-px"} ${list2.items.length > 0 && viewMode === "grid" && "w-full p-4 gap-4 grid grid-cols-1 @sm:grid-cols-2 @lg:grid-cols-3 @2xl:grid-cols-4 @4xl:grid-cols-6 @6xl:grid-cols-8 auto-rows-auto content-start justify-start"} ${isDragActive ? `border-2 border-blue-500 rounded-lg` : ``}`
   }, /* @__PURE__ */ React__default.createElement("input", {
     ...getInputProps()
   }), listState === "loaded" && list2.items.length === 0 && /* @__PURE__ */ React__default.createElement(EmptyMediaList, {
@@ -54723,24 +54987,27 @@ function MediaPicker({
     key: item.id,
     item,
     onClick: onClickMediaItem,
-    onSelect: selectMediaItem,
-    onDelete: deleteMediaItem
+    active: activeItem && activeItem.id === item.id
   })), viewMode === "grid" && list2.items.map((item) => /* @__PURE__ */ React__default.createElement(GridMediaItem, {
     key: item.id,
     item,
-    onClick: onClickGridMediaItem,
+    onClick: onClickMediaItem,
     active: activeItem && activeItem.id === item.id
-  }))), viewMode === "grid" && activeItem && /* @__PURE__ */ React__default.createElement(ActiveItemPreview, {
-    activeItem,
-    selectMediaItem,
-    deleteMediaItem
-  })), /* @__PURE__ */ React__default.createElement("div", {
-    className: "bg-gray-50 border-t border-gray-150 py-3 px-5 shadow-sm z-10"
+  }))), /* @__PURE__ */ React__default.createElement("div", {
+    className: "bg-gradient-to-r to-gray-50/50 from-gray-50 shrink-0 grow-0 border-t border-gray-150 py-3 px-5 shadow-sm z-10"
   }, /* @__PURE__ */ React__default.createElement(CursorPaginator, {
     hasNext,
     navigateNext,
     hasPrev,
     navigatePrev
+  }))), /* @__PURE__ */ React__default.createElement(ActiveItemPreview, {
+    activeItem,
+    close: closePreview,
+    selectMediaItem,
+    allowDelete,
+    deleteMediaItem: () => {
+      setDeleteModalOpen(true);
+    }
   }))), showSync && /* @__PURE__ */ React__default.createElement(SyncModal, {
     folder,
     branch,
@@ -54752,23 +55019,41 @@ function MediaPicker({
 }
 const ActiveItemPreview = ({
   activeItem,
+  close,
   selectMediaItem,
-  deleteMediaItem
+  deleteMediaItem,
+  allowDelete
 }) => {
+  const thumbnail = activeItem ? (activeItem.thumbnails || {})["1000x1000"] : "";
   return /* @__PURE__ */ React__default.createElement("div", {
-    className: "p-4 shrink-0 h-full flex flex-col items-start gap-3 overflow-y-auto w-[40%] max-w-[460px] min-w-[240px] bg-white border-l border-gray-100 bg-white shadow-md animate-slide-in-left"
-  }, isImage(activeItem.thumbnail) ? /* @__PURE__ */ React__default.createElement("img", {
-    className: "object-cover border border-gray-100 rounded-md overflow-hidden w-full h-auto max-h-[40%] object-center shadow",
-    src: activeItem.thumbnail,
+    className: `shrink-0 h-full flex flex-col items-start gap-3 overflow-y-auto bg-white border-l border-gray-100 bg-white shadow-md transition ease-out duration-150 ${activeItem ? `p-4 opacity-100 w-[35%] max-w-[560px] min-w-[240px]` : `translate-x-8 opacity-0 w-[0px]`}`
+  }, activeItem && /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("div", {
+    className: "flex grow-0 shrink-0 gap-2 w-full items-center justify-between"
+  }, /* @__PURE__ */ React__default.createElement("h3", {
+    className: "text-lg text-gray-600 w-full max-w-full break-words block truncate flex-1"
+  }, activeItem.filename), /* @__PURE__ */ React__default.createElement(IconButton, {
+    variant: "ghost",
+    className: "group grow-0 shrink-0",
+    onClick: close
+  }, /* @__PURE__ */ React__default.createElement(BiX, {
+    className: `w-7 h-auto text-gray-500 opacity-50 group-hover:opacity-100 transition duration-150 ease-out`
+  }))), isImage(thumbnail) ? /* @__PURE__ */ React__default.createElement("div", {
+    className: "w-full max-h-[75%]"
+  }, /* @__PURE__ */ React__default.createElement("img", {
+    className: "block border border-gray-100 rounded-md overflow-hidden max-w-full max-h-full object-fit h-auto shadow",
+    src: thumbnail,
     alt: activeItem.filename
-  }) : /* @__PURE__ */ React__default.createElement("span", {
+  })) : /* @__PURE__ */ React__default.createElement("span", {
     className: "p-3 border border-gray-100 rounded-md overflow-hidden bg-gray-50 shadow"
   }, /* @__PURE__ */ React__default.createElement(BiFile, {
     className: "w-14 h-auto fill-gray-300"
-  })), /* @__PURE__ */ React__default.createElement("h3", {
-    className: "text-lg text-gray-600 flex-grow w-full break-words truncate"
-  }, activeItem.filename), /* @__PURE__ */ React__default.createElement("div", {
-    className: "grow w-full flex flex-col justify-end items-start"
+  })), /* @__PURE__ */ React__default.createElement("div", {
+    className: "grow h-full w-full shrink flex flex-col gap-3 items-start justify-start"
+  }, /* @__PURE__ */ React__default.createElement(CopyField, {
+    value: absoluteImgURL(activeItem.src),
+    label: "URL"
+  })), /* @__PURE__ */ React__default.createElement("div", {
+    className: "shrink-0 w-full flex flex-col justify-end items-start"
   }, /* @__PURE__ */ React__default.createElement("div", {
     className: "flex w-full gap-3"
   }, selectMediaItem && /* @__PURE__ */ React__default.createElement(Button, {
@@ -54778,14 +55063,14 @@ const ActiveItemPreview = ({
     onClick: () => selectMediaItem(activeItem)
   }, "Insert", /* @__PURE__ */ React__default.createElement(BiArrowToBottom, {
     className: "ml-1 -mr-0.5 w-6 h-auto text-white opacity-70"
-  })), /* @__PURE__ */ React__default.createElement(Button, {
+  })), allowDelete && /* @__PURE__ */ React__default.createElement(Button, {
     variant: "white",
     size: "medium",
     className: "grow max-w-[40%]",
-    onClick: () => deleteMediaItem(activeItem)
+    onClick: deleteMediaItem
   }, "Delete", /* @__PURE__ */ React__default.createElement(TrashIcon, {
     className: "ml-1 -mr-0.5 w-6 h-auto text-red-500 opacity-70"
-  })))));
+  }))))));
 };
 const UploadButton = ({ onClick, uploading }) => {
   return /* @__PURE__ */ React__default.createElement(Button, {
@@ -54813,9 +55098,9 @@ const MediaPickerWrap = ({ children }) => {
 };
 const EmptyMediaList = (props) => {
   return /* @__PURE__ */ React__default.createElement("div", {
-    className: `text-2xl opacity-50 p-12 text-center`,
+    className: `p-12 text-xl opacity-50 text-center`,
     ...props
-  }, "Drag and Drop assets here", props.hasTinaMedia && " or click 'Sync' to sync your media to Tina Cloud");
+  }, "Drag and drop assets here", props.hasTinaMedia && " or click 'Sync' to sync your media to Tina Cloud.");
 };
 const DocsLink = ({ title, message: message2, docsLink, ...props }) => {
   return /* @__PURE__ */ React__default.createElement("div", {
@@ -54832,22 +55117,29 @@ const DocsLink = ({ title, message: message2, docsLink, ...props }) => {
     className: "font-bold text-blue-500 hover:text-blue-600 hover:underline transition-all ease-out duration-150"
   }, "Learn More"));
 };
-const SyncModal = ({ close, syncFunc, folder, branch }) => {
-  return /* @__PURE__ */ React__default.createElement(Modal, null, /* @__PURE__ */ React__default.createElement(PopupModal, null, /* @__PURE__ */ React__default.createElement(ModalHeader, {
-    close
-  }, "Sync Media"), /* @__PURE__ */ React__default.createElement(ModalBody, {
-    padded: true
-  }, /* @__PURE__ */ React__default.createElement("p", null, `This will copy media assets from the \`${folder}\` folder on branch \`${branch}\` in your git repository to Tina Cloud's asset service. This will allow you to use these assets in your site with Tina Cloud`)), /* @__PURE__ */ React__default.createElement(ModalActions, null, /* @__PURE__ */ React__default.createElement(Button, {
-    style: { flexGrow: 2 },
-    onClick: close
-  }, "Cancel"), /* @__PURE__ */ React__default.createElement(Button, {
-    style: { flexGrow: 3 },
-    variant: "primary",
-    onClick: async () => {
-      await syncFunc();
-      close();
+const ViewModeToggle = ({ viewMode, setViewMode }) => {
+  const toggleClasses = {
+    base: "relative whitespace-nowrap flex items-center justify-center flex-1 block font-medium text-base py-1 transition-all ease-out duration-150 border",
+    active: "bg-white text-blue-500 shadow-inner border-gray-50 border-t-gray-100",
+    inactive: "bg-gray-50 text-gray-400 shadow border-gray-100 border-t-white"
+  };
+  return /* @__PURE__ */ React__default.createElement("div", {
+    className: `grow-0 flex justify-between rounded-md border border-gray-100`
+  }, /* @__PURE__ */ React__default.createElement("button", {
+    className: `${toggleClasses.base} px-2.5 rounded-l-md ${viewMode === "grid" ? toggleClasses.active : toggleClasses.inactive}`,
+    onClick: () => {
+      setViewMode("grid");
     }
-  }, "Sync Media"))));
+  }, /* @__PURE__ */ React__default.createElement(BiGridAlt, {
+    className: "w-6 h-full opacity-70"
+  })), /* @__PURE__ */ React__default.createElement("button", {
+    className: `${toggleClasses.base} px-2 rounded-r-md ${viewMode === "list" ? toggleClasses.active : toggleClasses.inactive}`,
+    onClick: () => {
+      setViewMode("list");
+    }
+  }, /* @__PURE__ */ React__default.createElement(BiListUl, {
+    className: "w-8 h-full opacity-70"
+  })));
 };
 createScreen({
   name: "Media Manager",
@@ -54859,6 +55151,12 @@ createScreen({
   }
 });
 react.exports.createContext(-1);
+react.exports.createContext({
+  currentBranch: null,
+  setCurrentBranch: (branch) => {
+    console.warn("BranchContext not initialized");
+  }
+});
 react.exports.createContext(null);
 class MediaListError extends Error {
   constructor(config2) {
@@ -54940,7 +55238,11 @@ class CloudinaryMediaStore {
         id: fileRes.public_id,
         filename: fileRes.original_filename,
         directory: "/",
-        thumbnail: fileRes.url,
+        thumbnails: {
+          "75x75": fileRes.url,
+          "400x400": fileRes.url,
+          "1000x1000": fileRes.url
+        },
         src: fileRes.url
       };
       newFiles.push(parsedRes);