next-tinacms-dos 1.2.0 → 1.3.0

package/dist/handlers.js

@@ -4,34 +4,36 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
 var __export = (target, all) => {
-  __markAsModule(target);
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
 };
-var __reExport = (target, module2, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && key !== "default")
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
   }
-  return target;
-};
-var __toModule = (module2) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", module2 && module2.__esModule && "default" in module2 ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+  return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/handlers.ts
-__export(exports, {
+var handlers_exports = {};
+__export(handlers_exports, {
   createMediaHandler: () => createMediaHandler,
   mediaHandlerConfig: () => mediaHandlerConfig
 });
-var import_client_s3 = __toModule(require("@aws-sdk/client-s3"));
-var import_path = __toModule(require("path"));
-var import_fs = __toModule(require("fs"));
-var import_multer = __toModule(require("multer"));
-var import_util = __toModule(require("util"));
+module.exports = __toCommonJS(handlers_exports);
+var import_client_s3 = require("@aws-sdk/client-s3");
+var import_path = __toESM(require("path"));
+var import_fs = __toESM(require("fs"));
+var import_multer = __toESM(require("multer"));
+var import_util = require("util");
 var mediaHandlerConfig = {
   api: {
     bodyParser: false
@@ -70,16 +72,18 @@ var createMediaHandler = (config, options) => {
   };
 };
 async function uploadMedia(req, res, client, bucket, mediaRoot, cdnUrl) {
-  const upload = (0, import_util.promisify)((0, import_multer.default)({
-    storage: import_multer.default.diskStorage({
-      directory: (req2, file, cb) => {
-        cb(null, "/tmp");
-      },
-      filename: (req2, file, cb) => {
-        cb(null, file.originalname);
-      }
-    })
-  }).single("file"));
+  const upload = (0, import_util.promisify)(
+    (0, import_multer.default)({
+      storage: import_multer.default.diskStorage({
+        directory: (req2, file, cb) => {
+          cb(null, "/tmp");
+        },
+        filename: (req2, file, cb) => {
+          cb(null, file.originalname);
+        }
+      })
+    }).single("file")
+  );
   await upload(req, res);
   const { directory } = req.body;
   let prefix = directory.replace(/^\//, "").replace(/\/$/, "");
@@ -103,7 +107,11 @@ async function uploadMedia(req, res, client, bucket, mediaRoot, cdnUrl) {
       id: prefix + filename,
       filename,
       directory: prefix,
-      thumbnail: src,
+      thumbnails: {
+        "75x75": src,
+        "400x400": src,
+        "1000x1000": src
+      },
       src: cdnUrl + (mediaRoot ? import_path.default.join(mediaRoot, prefix + filename) : prefix + filename)
     });
   } catch (e) {
@@ -158,10 +166,12 @@ async function listMedia(req, res, client, bucket, mediaRoot, cdnUrl) {
         directory: import_path.default.dirname(strippedPrefix)
       });
     });
-    items.push(...(response.Contents || []).filter((file) => {
-      const strippedKey = stripMediaRoot(mediaRoot, file.Key);
-      return strippedKey !== prefix;
-    }).map(getDOSToTinaFunc(cdnUrl, mediaRoot)));
+    items.push(
+      ...(response.Contents || []).filter((file) => {
+        const strippedKey = stripMediaRoot(mediaRoot, file.Key);
+        return strippedKey !== prefix;
+      }).map(getDOSToTinaFunc(cdnUrl, mediaRoot))
+    );
     res.json({
       items,
       offset: response.NextMarker
@@ -208,7 +218,11 @@ function getDOSToTinaFunc(cdnUrl, mediaRoot) {
       filename,
       directory,
       src,
-      thumbnail: src,
+      thumbnails: {
+        "75x75": src,
+        "400x400": src,
+        "1000x1000": src
+      },
       type: "file"
     };
   };

package/dist/index.es.js

@@ -52894,6 +52894,9 @@ function BiArrowToBottom(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 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,6 +52915,9 @@ 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 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);
+}
 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);
 }
@@ -52962,7 +52968,12 @@ 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)(\?.*)?$/i.test(filename);
+};
+const absoluteImgURL = (str) => {
+  if (str.startsWith("http"))
+    return str;
+  return `${window.location.origin}${str}`;
 };
 const onKeyDownSoftBreak = (editor, { options: { rules = [] } }) => (event) => {
   const entry = getBlockAbove(editor);
@@ -54372,50 +54383,37 @@ 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)
+    className: `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);
+      }
+    }
   }, /* @__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" : ""}`
+    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" : ""}`
   }, /* @__PURE__ */ React__default.createElement("button", {
-    className: "absolute w-full h-full flex items-center justify-center bg-gray-50",
+    className: "absolute w-full h-full flex items-center justify-center bg-white",
     onClick: () => {
       if (!active3) {
         onClick(item);
@@ -54423,9 +54421,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 +54470,74 @@ 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 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 +54586,7 @@ function MediaPicker({
       return "loading";
     return "not-configured";
   });
+  const [deleteModalOpen, setDeleteModalOpen] = 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 +54596,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 +54618,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) => {
@@ -54570,12 +54647,6 @@ function MediaPicker({
     return cms.events.subscribe(["media:upload:success", "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 +54659,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;
@@ -54678,7 +54747,16 @@ function MediaPicker({
       docsLink
     });
   }
-  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(MediaPickerWrap, null, /* @__PURE__ */ React__default.createElement("div", {
+  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)
+  }), /* @__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"
   }, /* @__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`
@@ -54711,10 +54789,12 @@ function MediaPicker({
     onClick,
     uploading
   })), /* @__PURE__ */ React__default.createElement("div", {
-    className: "flex h-full overflow-hidden"
+    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 +54803,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 +54835,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 +54879,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 +54914,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,23 +54933,6 @@ 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();
-    }
-  }, "Sync Media"))));
-};
 createScreen({
   name: "Media Manager",
   Component: MediaPicker,

package/dist/index.js

@@ -52898,6 +52898,9 @@
   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 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);
   }
@@ -52916,6 +52919,9 @@
   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 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);
+  }
   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);
   }
@@ -52966,7 +52972,12 @@
     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)(\?.*)?$/i.test(filename);
+  };
+  const absoluteImgURL = (str) => {
+    if (str.startsWith("http"))
+      return str;
+    return `${window.location.origin}${str}`;
   };
   const onKeyDownSoftBreak = (editor, { options: { rules = [] } }) => (event) => {
     const entry = getBlockAbove(editor);
@@ -54376,50 +54387,37 @@
       className: "w-6 h-full ml-2 opacity-70"
     })));
   }
-  function ListMediaItem({
-    item,
-    onClick,
-    onSelect,
-    onDelete
-  }) {
+  function ListMediaItem({ item, onClick, active: active2 }) {
     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)
+      className: `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 ${active2 ? "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 (!active2) {
+          onClick(item);
+        } else {
+          onClick(false);
+        }
+      }
     }, /* @__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: active2, 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 ${active2 ? "shadow-outline" : "shadow hover:shadow-md hover:scale-103 hover:border-gray-150"} ${item.type === "dir" ? "cursor-pointer" : ""}`
+      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 ${active2 ? "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: "absolute w-full h-full flex items-center justify-center bg-white",
       onClick: () => {
         if (!active2) {
           onClick(item);
@@ -54427,9 +54425,9 @@
           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"
@@ -54476,6 +54474,74 @@
       }, 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 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;
@@ -54524,6 +54590,7 @@
         return "loading";
       return "not-configured";
     });
+    const [deleteModalOpen, setDeleteModalOpen] = 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({
@@ -54533,6 +54600,7 @@
     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];
@@ -54554,7 +54622,16 @@
     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) => {
@@ -54574,12 +54651,6 @@
       return cms.events.subscribe(["media:upload:success", "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") {
@@ -54592,9 +54663,7 @@
     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;
@@ -54682,7 +54751,16 @@
         docsLink
       });
     }
-    return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(MediaPickerWrap, null, /* @__PURE__ */ React__default.createElement("div", {
+    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)
+    }), /* @__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"
     }, /* @__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`
@@ -54715,10 +54793,12 @@
       onClick,
       uploading
     })), /* @__PURE__ */ React__default.createElement("div", {
-      className: "flex h-full overflow-hidden"
+      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, {
@@ -54727,24 +54807,27 @@
       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,
@@ -54756,23 +54839,41 @@
   }
   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, {
@@ -54782,14 +54883,14 @@
       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, {
@@ -54817,9 +54918,9 @@
   };
   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", {
@@ -54836,23 +54937,6 @@
       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();
-      }
-    }, "Sync Media"))));
-  };
   createScreen({
     name: "Media Manager",
     Component: MediaPicker,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "next-tinacms-dos",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "main": "dist/index.js",
   "files": [
     "dist"
@@ -21,13 +21,13 @@
     "multer": "1.4.5-lts.1"
   },
   "devDependencies": {
-    "@tinacms/toolkit": "1.4.0",
-    "@tinacms/scripts": "1.0.3",
+    "@tinacms/toolkit": "1.5.0",
+    "@tinacms/scripts": "1.0.4",
     "@types/crypto-js": "^3.1.47",
     "@types/js-cookie": "^2.2.6",
     "@types/node": "^13.13.1",
     "next": "12.2.4",
-    "tinacms": "1.3.0",
+    "tinacms": "1.3.1",
     "typescript": "4.3.5"
   },
   "publishConfig": {