tinacms 1.4.5 → 1.5.0

package/dist/index.js

@@ -233,12 +233,16 @@ mutation addPendingDocumentMutation(
       this.contentApiUrl = this.options.customContentApiUrl || `${this.contentApiBase}/${this.tinaGraphQLVersion}/content/${this.options.clientId}/github/${encodedBranch}`;
     }
     async request(query, { variables }) {
+      const token = await this.getToken();
+      const headers = {
+        "Content-Type": "application/json"
+      };
+      if (token == null ? void 0 : token.id_token) {
+        headers["Authorization"] = "Bearer " + (token == null ? void 0 : token.id_token);
+      }
       const res = await fetch(this.contentApiUrl, {
         method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-          Authorization: "Bearer " + (await this.getToken()).id_token
-        },
+        headers,
         body: JSON.stringify({
           query: typeof query === "function" ? graphql.print(query(gql__default["default"])) : query,
           variables
@@ -350,12 +354,13 @@ mutation addPendingDocumentMutation(
     }
     async fetchWithToken(input, init) {
       const headers = (init == null ? void 0 : init.headers) || {};
+      const token = await this.getToken();
+      if (token == null ? void 0 : token.id_token) {
+        headers["Authorization"] = "Bearer " + (token == null ? void 0 : token.id_token);
+      }
       return await fetch(input, {
         ...init,
-        headers: new Headers({
-          Authorization: "Bearer " + (await this.getToken()).id_token,
-          ...headers
-        })
+        headers: new Headers(headers)
       });
     }
     async getUser() {
@@ -632,7 +637,7 @@ mutation addPendingDocumentMutation(
   }
 }`, { variables: { collection, relativePath } });
     }
-    async fetchCollection(collectionName, includeDocuments, after, sortKey, order, filterArgs) {
+    async fetchCollection(collectionName, includeDocuments, folder = "", after, sortKey, order, filterArgs) {
       let filter = null;
       const filterField = filterArgs == null ? void 0 : filterArgs.filterField;
       if (filterField) {
@@ -669,13 +674,13 @@ mutation addPendingDocumentMutation(
       if (includeDocuments === true) {
         const sort = sortKey || this.schema.getIsTitleFieldName(collectionName);
         const response = order === "asc" ? await this.api.request(`#graphql
-      query($collection: String!, $includeDocuments: Boolean!, $sort: String,  $limit: Float, $after: String, $filter: DocumentFilter){
+      query($collection: String!, $includeDocuments: Boolean!, $sort: String,  $limit: Float, $after: String, $filter: DocumentFilter, $folder: String){
         collection(collection: $collection){
           name
           label
           format
           templates
-          documents(sort: $sort, after: $after, first: $limit, filter: $filter) @include(if: $includeDocuments) {
+          documents(sort: $sort, after: $after, first: $limit, filter: $filter, folder: $folder) @include(if: $includeDocuments) {
             totalCount
             pageInfo {
               hasPreviousPage
@@ -685,6 +690,11 @@ mutation addPendingDocumentMutation(
             }
             edges {
               node {
+                __typename
+                ... on Folder {
+                    name
+                    path
+                }
                 ... on Document {
                   _sys {
                     title
@@ -705,19 +715,20 @@ mutation addPendingDocumentMutation(
           variables: {
             collection: collectionName,
             includeDocuments,
+            folder,
             sort,
             limit: 50,
             after,
             filter
           }
         }) : await this.api.request(`#graphql
-      query($collection: String!, $includeDocuments: Boolean!, $sort: String,  $limit: Float, $after: String, $filter: DocumentFilter){
+      query($collection: String!, $includeDocuments: Boolean!, $sort: String,  $limit: Float, $after: String, $filter: DocumentFilter, $folder: String) {
         collection(collection: $collection){
           name
           label
           format
           templates
-          documents(sort: $sort, before: $after, last: $limit, filter: $filter) @include(if: $includeDocuments) {
+          documents(sort: $sort, before: $after, last: $limit, filter: $filter, folder: $folder) @include(if: $includeDocuments) {
             totalCount
             pageInfo {
               hasPreviousPage
@@ -727,6 +738,11 @@ mutation addPendingDocumentMutation(
             }
             edges {
               node {
+                __typename
+                ... on Folder {
+                    name
+                    path
+                }
                 ... on Document {
                   _sys {
                     title
@@ -747,6 +763,7 @@ mutation addPendingDocumentMutation(
           variables: {
             collection: collectionName,
             includeDocuments,
+            folder,
             sort,
             limit: 50,
             after,
@@ -1479,6 +1496,9 @@ mutation addPendingDocumentMutation(
 .tina-tailwind .flex-shrink-0 {
   flex-shrink: 0;
 }
+.tina-tailwind .shrink-0 {
+  flex-shrink: 0;
+}
 .tina-tailwind .flex-grow-0 {
   flex-grow: 0;
 }
@@ -1541,6 +1561,9 @@ mutation addPendingDocumentMutation(
 .tina-tailwind .items-stretch {
   align-items: stretch;
 }
+.tina-tailwind .justify-start {
+  justify-content: flex-start;
+}
 .tina-tailwind .justify-end {
   justify-content: flex-end;
 }
@@ -1556,6 +1579,9 @@ mutation addPendingDocumentMutation(
 .tina-tailwind .gap-0\\.5 {
   gap: 2px;
 }
+.tina-tailwind .gap-1 {
+  gap: 4px;
+}
 .tina-tailwind .gap-2 {
   gap: 8px;
 }
@@ -1616,9 +1642,15 @@ mutation addPendingDocumentMutation(
 .tina-tailwind .border {
   border-width: 1px;
 }
+.tina-tailwind .border-0 {
+  border-width: 0;
+}
 .tina-tailwind .border-b {
   border-bottom-width: 1px;
 }
+.tina-tailwind .border-r {
+  border-right-width: 1px;
+}
 .tina-tailwind .border-gray-100 {
   --tw-border-opacity: 1;
   border-color: rgb(237 236 243 / var(--tw-border-opacity));
@@ -1643,6 +1675,12 @@ mutation addPendingDocumentMutation(
   --tw-bg-opacity: 1;
   background-color: rgb(246 246 249 / var(--tw-bg-opacity));
 }
+.tina-tailwind .bg-gray-50\\/30 {
+  background-color: rgb(246 246 249 / .3);
+}
+.tina-tailwind .bg-transparent {
+  background-color: transparent;
+}
 .tina-tailwind .bg-white {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
@@ -1684,6 +1722,9 @@ mutation addPendingDocumentMutation(
 .tina-tailwind .fill-current {
   fill: currentColor;
 }
+.tina-tailwind .p-0 {
+  padding: 0px;
+}
 .tina-tailwind .px-12 {
   padding-left: 48px;
   padding-right: 48px;
@@ -1752,6 +1793,12 @@ mutation addPendingDocumentMutation(
 .tina-tailwind .pl-8 {
   padding-left: 32px;
 }
+.tina-tailwind .pr-0 {
+  padding-right: 0px;
+}
+.tina-tailwind .pr-0\\.5 {
+  padding-right: 2px;
+}
 .tina-tailwind .pr-3 {
   padding-right: 12px;
 }
@@ -1822,6 +1869,10 @@ mutation addPendingDocumentMutation(
 .tina-tailwind .tracking-wide {
   letter-spacing: 0.025em;
 }
+.tina-tailwind .text-blue-400 {
+  --tw-text-opacity: 1;
+  color: rgb(34 150 254 / var(--tw-text-opacity));
+}
 .tina-tailwind .text-blue-500 {
   --tw-text-opacity: 1;
   color: rgb(0 132 255 / var(--tw-text-opacity));
@@ -1833,6 +1884,10 @@ mutation addPendingDocumentMutation(
 .tina-tailwind .text-current {
   color: currentColor;
 }
+.tina-tailwind .text-gray-200 {
+  --tw-text-opacity: 1;
+  color: rgb(225 221 236 / var(--tw-text-opacity));
+}
 .tina-tailwind .text-gray-300 {
   --tw-text-opacity: 1;
   color: rgb(178 173 190 / var(--tw-text-opacity));
@@ -1853,10 +1908,6 @@ mutation addPendingDocumentMutation(
   --tw-text-opacity: 1;
   color: rgb(67 62 82 / var(--tw-text-opacity));
 }
-.tina-tailwind .text-gray-800 {
-  --tw-text-opacity: 1;
-  color: rgb(54 49 69 / var(--tw-text-opacity));
-}
 .tina-tailwind .text-gray-900 {
   --tw-text-opacity: 1;
   color: rgb(37 35 54 / var(--tw-text-opacity));
@@ -1876,6 +1927,15 @@ mutation addPendingDocumentMutation(
 .tina-tailwind .underline {
   text-decoration-line: underline;
 }
+.tina-tailwind .decoration-blue-200 {
+  text-decoration-color: #85C5FE;
+}
+.tina-tailwind .decoration-1 {
+  text-decoration-thickness: 1px;
+}
+.tina-tailwind .underline-offset-2 {
+  text-underline-offset: 2px;
+}
 .tina-tailwind .opacity-0 {
   opacity: 0;
 }
@@ -1987,14 +2047,24 @@ mutation addPendingDocumentMutation(
   --tw-bg-opacity: 1;
   background-color: rgb(5 116 228 / var(--tw-bg-opacity));
 }
+.tina-tailwind .hover\\:bg-gray-50\\/50:hover {
+  background-color: rgb(246 246 249 / .5);
+}
 .tina-tailwind .hover\\:text-blue-400:hover {
   --tw-text-opacity: 1;
   color: rgb(34 150 254 / var(--tw-text-opacity));
 }
+.tina-tailwind .hover\\:text-blue-500:hover {
+  --tw-text-opacity: 1;
+  color: rgb(0 132 255 / var(--tw-text-opacity));
+}
 .tina-tailwind .hover\\:text-blue-600:hover {
   --tw-text-opacity: 1;
   color: rgb(5 116 228 / var(--tw-text-opacity));
 }
+.tina-tailwind .hover\\:decoration-blue-400:hover {
+  text-decoration-color: #2296fe;
+}
 .tina-tailwind .hover\\:opacity-100:hover {
   opacity: 1;
 }
@@ -2578,12 +2648,24 @@ This will work when developing locally but NOT when deployed to production.
   function IoMdClose(props) {
     return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 512 512" }, "child": [{ "tag": "path", "attr": { "d": "M405 136.798L375.202 107 256 226.202 136.798 107 107 136.798 226.202 256 107 375.202 136.798 405 256 285.798 375.202 405 405 375.202 285.798 256z" } }] })(props);
   }
+  function BiArrowBack(props) {
+    return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "M21 11H6.414l5.293-5.293-1.414-1.414L2.586 12l7.707 7.707 1.414-1.414L6.414 13H21z" } }] })(props);
+  }
+  function BiCopy(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" } }] })(props);
+  }
   function BiEdit(props) {
     return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "m7 17.013 4.413-.015 9.632-9.54c.378-.378.586-.88.586-1.414s-.208-1.036-.586-1.414l-1.586-1.586c-.756-.756-2.075-.752-2.825-.003L7 12.583v4.43zM18.045 4.458l1.589 1.583-1.597 1.582-1.586-1.585 1.594-1.58zM9 13.417l6.03-5.973 1.586 1.586-6.029 5.971L9 15.006v-1.589z" } }, { "tag": "path", "attr": { "d": "M5 21h14c1.103 0 2-.897 2-2v-8.668l-2 2V19H8.158c-.026 0-.053.01-.079.01-.033 0-.066-.009-.1-.01H5V5h6.847l2-2H5c-1.103 0-2 .897-2 2v14c0 1.103.897 2 2 2z" } }] })(props);
   }
   function BiError(props) {
     return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "M11.001 10h2v5h-2zM11 16h2v2h-2z" } }, { "tag": "path", "attr": { "d": "M13.768 4.2C13.42 3.545 12.742 3.138 12 3.138s-1.42.407-1.768 1.063L2.894 18.064a1.986 1.986 0 0 0 .054 1.968A1.984 1.984 0 0 0 4.661 21h14.678c.708 0 1.349-.362 1.714-.968a1.989 1.989 0 0 0 .054-1.968L13.768 4.2zM4.661 19 12 5.137 19.344 19H4.661z" } }] })(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);
+  }
+  function BiFolder(props) {
+    return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "M20 5h-8.586L9.707 3.293A.997.997 0 0 0 9 3H4c-1.103 0-2 .897-2 2v14c0 1.103.897 2 2 2h16c1.103 0 2-.897 2-2V7c0-1.103-.897-2-2-2zM4 19V7h16l.002 12H4z" } }] })(props);
+  }
   function BiLogIn(props) {
     return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "m13 16 5-4-5-4v3H4v2h9z" } }, { "tag": "path", "attr": { "d": "M20 3h-9c-1.103 0-2 .897-2 2v4h2V5h9v14h-9v-4H9v4c0 1.103.897 2 2 2h9c1.103 0 2-.897 2-2V5c0-1.103-.897-2-2-2z" } }] })(props);
   }
@@ -2642,7 +2724,7 @@ This will work when developing locally but NOT when deployed to production.
       }),
       RenderNavCollection: ({ collection }) => /* @__PURE__ */ React__default["default"].createElement(SidebarLink, {
         label: collection.label ? collection.label : collection.name,
-        to: `/collections/${collection.name}`,
+        to: `/collections/${collection.name}/~`,
         Icon: ImFilesEmpty
       })
     }), !renderDesktopNav && /* @__PURE__ */ React__default["default"].createElement(react.Transition, {
@@ -2679,7 +2761,7 @@ This will work when developing locally but NOT when deployed to production.
       }),
       RenderNavCollection: ({ collection }) => /* @__PURE__ */ React__default["default"].createElement(SidebarLink, {
         label: collection.label ? collection.label : collection.name,
-        to: `/collections/${collection.name}`,
+        to: `/collections/${collection.name}/~`,
         Icon: ImFilesEmpty,
         onClick: () => {
           setMenuIsOpen(false);
@@ -2917,6 +2999,9 @@ This will work when developing locally but NOT when deployed to production.
       }, "Welcome to Tina!")), /* @__PURE__ */ React__default["default"].createElement(PageBodyNarrow, null, "This is your dashboard for editing or creating content. Select a collection on the left to begin.")));
     });
   };
+  function RiHome2Line(props) {
+    return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "g", "attr": {}, "child": [{ "tag": "path", "attr": { "fill": "none", "d": "M0 0h24v24H0z" } }, { "tag": "path", "attr": { "d": "M19 21H5a1 1 0 0 1-1-1v-9H1l10.327-9.388a1 1 0 0 1 1.346 0L23 11h-3v9a1 1 0 0 1-1 1zM6 19h12V9.157l-6-5.454-6 5.454V19z" } }] }] })(props);
+  }
   const LoadingPage = () => /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */ React__default["default"].createElement("div", {
     style: {
       position: "absolute",
@@ -3035,7 +3120,7 @@ This will work when developing locally but NOT when deployed to production.
       className: "w-7 h-auto fill-current opacity-70 mr-1"
     }), " Reload"));
   };
-  const useGetCollection = (cms, collectionName, includeDocuments = true, after = "", sortKey, filterArgs) => {
+  const useGetCollection = (cms, collectionName, includeDocuments = true, folder, after = "", sortKey, filterArgs) => {
     const api = new TinaAdminApi(cms);
     const schema = cms.api.tina.schema;
     const collectionExtra = schema.getCollection(collectionName);
@@ -3044,13 +3129,14 @@ This will work when developing locally but NOT when deployed to production.
     const [error, setError] = React.useState(void 0);
     const [resetState, setResetSate] = React.useState(0);
     React.useEffect(() => {
+      let cancelled = false;
       const fetchCollection = async () => {
         var _a;
-        if (await api.isAuthenticated()) {
+        if (await api.isAuthenticated() && !folder.loading && !cancelled) {
           const { name, order } = JSON.parse(sortKey || "{}");
           const validSortKey = ((_a = collectionExtra.fields) == null ? void 0 : _a.map((x) => x.name).includes(name)) ? name : void 0;
           try {
-            const collection2 = await api.fetchCollection(collectionName, includeDocuments, after, validSortKey, order, filterArgs);
+            const collection2 = await api.fetchCollection(collectionName, includeDocuments, (filterArgs == null ? void 0 : filterArgs.filterField) ? "" : folder.fullyQualifiedName, after, validSortKey, order, filterArgs);
             setCollection(collection2);
           } catch (error2) {
             cms.alerts.error(`[${error2.name}] GetCollection failed: ${error2.message}`);
@@ -3061,15 +3147,29 @@ This will work when developing locally but NOT when deployed to production.
           setLoading(false);
         }
       };
+      if (cancelled)
+        return;
       setLoading(true);
       fetchCollection();
-    }, [cms, collectionName, resetState, after, sortKey]);
+      return () => {
+        cancelled = true;
+      };
+    }, [
+      cms,
+      collectionName,
+      folder.loading,
+      folder.fullyQualifiedName,
+      resetState,
+      after,
+      sortKey
+    ]);
     const reFetchCollection = () => setResetSate((x) => x + 1);
     return { collection, loading, error, reFetchCollection, collectionExtra };
   };
   const GetCollection = ({
     cms,
     collectionName,
+    folder,
     includeDocuments = true,
     startCursor,
     sortKey,
@@ -3077,7 +3177,7 @@ This will work when developing locally but NOT when deployed to production.
     filterArgs
   }) => {
     const navigate = reactRouterDom.useNavigate();
-    const { collection, loading, error, reFetchCollection, collectionExtra } = useGetCollection(cms, collectionName, includeDocuments, startCursor || "", sortKey, filterArgs) || {};
+    const { collection, loading, error, reFetchCollection, collectionExtra } = useGetCollection(cms, collectionName, includeDocuments, folder, startCursor || "", sortKey, filterArgs) || {};
     React.useEffect(() => {
       var _a, _b, _c, _d, _e, _f, _g, _h;
       if (loading)
@@ -3087,7 +3187,11 @@ This will work when developing locally but NOT when deployed to production.
       const allowDelete = (_f = (_e = (_d = collectionDefinition == null ? void 0 : collectionDefinition.ui) == null ? void 0 : _d.allowedActions) == null ? void 0 : _e.delete) != null ? _f : true;
       if (!allowCreate && !allowDelete && ((_h = (_g = collection.documents) == null ? void 0 : _g.edges) == null ? void 0 : _h.length) === 1) {
         const doc = collection.documents.edges[0].node;
-        handleNavigate(navigate, cms, collection, collectionDefinition, doc);
+        const pathToDoc = doc._sys.breadcrumbs;
+        if (folder.fullyQualifiedName) {
+          pathToDoc.unshift("~");
+        }
+        navigate(`/${["collections", "edit", collectionName, ...pathToDoc].join("/")}`, { replace: true });
       }
     }, [(collection == null ? void 0 : collection.name) || "", loading]);
     if (error) {
@@ -3098,6 +3202,42 @@ This will work when developing locally but NOT when deployed to production.
     }
     return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, children(collection, loading, reFetchCollection, collectionExtra));
   };
+  const folderRegex = /^.*\/~\/*(.*)$/;
+  const parentFolder = (folder) => {
+    return {
+      ...folder,
+      name: folder.name.split("/").slice(0, -1).join("/"),
+      fullyQualifiedName: folder.fullyQualifiedName.split("/").slice(0, -1).join("/"),
+      parentName: folder.parentName.split("/").slice(0, -1).join("/")
+    };
+  };
+  const useCollectionFolder = () => {
+    const [folder, setFolder] = React.useState({
+      loading: true,
+      name: "",
+      fullyQualifiedName: "",
+      parentName: ""
+    });
+    const loc = reactRouterDom.useLocation();
+    React.useEffect(() => {
+      const match = loc.pathname.match(folderRegex);
+      const update = {
+        name: match ? match[1] : "",
+        fullyQualifiedName: match ? match[1] ? `~/${match[1]}` : "~" : "",
+        loading: false,
+        parentName: ""
+      };
+      if (update.fullyQualifiedName) {
+        const pathParts = update.fullyQualifiedName.split("/");
+        update.parentName = `/${pathParts.slice(0, pathParts.length - 1).join("/")}`;
+      }
+      setFolder({
+        ...folder,
+        ...update
+      });
+    }, [loc]);
+    return folder;
+  };
   const LOCAL_STORAGE_KEY = "tinacms.admin.collection.list.page";
   const isSSR = typeof window === "undefined";
   const TemplateMenu = ({ templates }) => {
@@ -3117,14 +3257,14 @@ This will work when developing locally but NOT when deployed to production.
       leaveFrom: "transform opacity-100 scale-100",
       leaveTo: "transform opacity-0 scale-95"
     }, /* @__PURE__ */ React__default["default"].createElement(react.Menu.Items, {
-      className: "origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none"
+      className: "origin-top-right absolute right-0 mt-2 z-menu w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none"
     }, /* @__PURE__ */ React__default["default"].createElement("div", {
       className: "py-1"
     }, templates.map((template) => /* @__PURE__ */ React__default["default"].createElement(react.Menu.Item, {
       key: `${template.label}-${template.name}`
     }, ({ active }) => /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Link, {
       to: `${template.name}/new`,
-      className: `w-full text-md px-4 py-2 tracking-wide flex items-center opacity-80 text-gray-600 ${active && "text-gray-800 opacity-100"}`
+      className: `w-full text-md px-4 py-2 tracking-wide flex items-center transition ease-out duration-100 ${active ? "text-blue-600 opacity-100 bg-gray-50" : "opacity-80 text-gray-600"}`
     }, template.label))))))));
   };
   const handleNavigate = (navigate, cms, collection, collectionDefinition, document) => {
@@ -3143,7 +3283,8 @@ This will work when developing locally but NOT when deployed to production.
       tinaPreview ? navigate(`/~/${routeOverride}`) : window.location.href = routeOverride;
       return null;
     } else {
-      navigate(document._sys.breadcrumbs.join("/"));
+      const pathToDoc = document._sys.breadcrumbs;
+      navigate(`/${["collections", "edit", collection.name, ...pathToDoc].join("/")}`, { replace: true });
     }
   };
   const CollectionListPage = () => {
@@ -3162,15 +3303,17 @@ This will work when developing locally but NOT when deployed to production.
       after: "",
       booleanEquals: null
     });
+    const [activeSearch, setActiveSearch] = React__default["default"].useState(false);
     const [endCursor, setEndCursor] = React.useState("");
     const [prevCursors, setPrevCursors] = React.useState([]);
     const [sortKey, setSortKey] = React.useState(isSSR ? "" : window.localStorage.getItem(`${LOCAL_STORAGE_KEY}.${collectionName}`) || JSON.stringify({
       order: "asc",
       name: ""
     }));
-    const { order = "asc" } = JSON.parse(sortKey || "{}");
+    const { order = "asc", name: sortName } = JSON.parse(sortKey || "{}");
     const [sortOrder, setSortOrder] = React.useState(order);
     const loc = reactRouterDom.useLocation();
+    const folder = useCollectionFolder();
     React.useEffect(() => {
       setSortKey(window.localStorage.getItem(`${LOCAL_STORAGE_KEY}.${collectionName}`) || JSON.stringify({
         order: "asc",
@@ -3200,6 +3343,7 @@ This will work when developing locally but NOT when deployed to production.
         includeDocuments: true,
         startCursor: endCursor,
         sortKey,
+        folder,
         filterArgs: collectionName === vars.collection ? vars : {
           collection: collectionName,
           relativePath: "",
@@ -3218,6 +3362,7 @@ This will work when developing locally but NOT when deployed to production.
         const admin = cms.api.admin;
         const pageInfo = collection.documents.pageInfo;
         const fields = (_a = collectionExtra.fields) == null ? void 0 : _a.filter((x) => ["string", "number", "datetime", "boolean"].includes(x.type));
+        const sortField = fields.find((field) => field.name === sortName);
         const filterFields = (_b = collectionExtra.fields) == null ? void 0 : _b.filter((x) => {
           return ["string", "datetime", "boolean"].includes(x.type) && !x.list;
         });
@@ -3228,6 +3373,7 @@ This will work when developing locally but NOT when deployed to production.
         const collectionDefinition = cms.api.tina.schema.getCollection(collection.name);
         const allowCreate = (_e = (_d = (_c = collectionDefinition == null ? void 0 : collectionDefinition.ui) == null ? void 0 : _c.allowedActions) == null ? void 0 : _d.create) != null ? _e : true;
         const allowDelete = (_h = (_g = (_f = collectionDefinition == null ? void 0 : collectionDefinition.ui) == null ? void 0 : _f.allowedActions) == null ? void 0 : _g.delete) != null ? _h : true;
+        const folderView = folder.fullyQualifiedName !== "";
         return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, deleteModalOpen && /* @__PURE__ */ React__default["default"].createElement(DeleteModal, {
           filename: vars.relativePath,
           deleteFunc: async () => {
@@ -3275,9 +3421,9 @@ This will work when developing locally but NOT when deployed to production.
           className: "flex flex-col gap-4"
         }, /* @__PURE__ */ React__default["default"].createElement("h3", {
           className: "font-sans text-2xl text-gray-700"
-        }, collection.label ? collection.label : collection.name), (fields == null ? void 0 : fields.length) > 0 && /* @__PURE__ */ React__default["default"].createElement("div", {
+        }, collection.label ? collection.label : collection.name), /* @__PURE__ */ React__default["default"].createElement("div", {
           className: "flex gap-4 items-end flex-wrap"
-        }, /* @__PURE__ */ React__default["default"].createElement("div", {
+        }, (fields == null ? void 0 : fields.length) > 0 && /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */ React__default["default"].createElement("div", {
           className: "flex flex-col gap-2 items-start"
         }, /* @__PURE__ */ React__default["default"].createElement("label", {
           htmlFor: "sort",
@@ -3440,6 +3586,7 @@ This will work when developing locally but NOT when deployed to production.
           className: "flex gap-3"
         }, /* @__PURE__ */ React__default["default"].createElement(toolkit.Button, {
           onClick: () => {
+            setActiveSearch(true);
             setEndCursor("");
             setPrevCursors([]);
             reFetchCollection();
@@ -3450,8 +3597,10 @@ This will work when developing locally but NOT when deployed to production.
           className: "w-5 h-full ml-1.5 opacity-70"
         })), (vars.startsWith || vars.after || vars.before || vars.booleanEquals) && /* @__PURE__ */ React__default["default"].createElement(toolkit.Button, {
           onClick: () => {
+            setActiveSearch(false);
             setVars((old) => ({
               ...old,
+              filterField: "",
               startsWith: "",
               after: "",
               before: "",
@@ -3464,10 +3613,16 @@ This will work when developing locally but NOT when deployed to production.
           variant: "white"
         }, "Clear", " ", /* @__PURE__ */ React__default["default"].createElement(BiX, {
           className: "w-5 h-full ml-1 opacity-70"
-        })))))), /* @__PURE__ */ React__default["default"].createElement("div", {
+        }))))))), /* @__PURE__ */ React__default["default"].createElement("div", {
           className: "flex self-end	justify-self-end"
         }, !collection.templates && allowCreate && /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Link, {
-          to: `new`,
+          to: `/${folder.fullyQualifiedName ? [
+            "collections",
+            "new",
+            collectionName,
+            "~",
+            folder.name
+          ].join("/") : ["collections", "new", collectionName].join("/")}`,
           className: "icon-parent inline-flex items-center font-medium focus:outline-none focus:ring-2 focus:shadow-outline text-center rounded-full justify-center transition-all duration-150 ease-out whitespace-nowrap shadow text-white bg-blue-500 hover:bg-blue-600 focus:ring-blue-500 text-sm h-10 px-6"
         }, "Create New", " ", /* @__PURE__ */ React__default["default"].createElement(BiPlus, {
           className: "w-5 h-full ml-1 opacity-70"
@@ -3475,25 +3630,73 @@ This will work when developing locally but NOT when deployed to production.
           templates: collection.templates
         })))), /* @__PURE__ */ React__default["default"].createElement(PageBody, null, /* @__PURE__ */ React__default["default"].createElement("div", {
           className: "w-full mx-auto max-w-screen-xl"
-        }, documents.length > 0 ? /* @__PURE__ */ React__default["default"].createElement("table", {
+        }, sortField && !sortField.required && /* @__PURE__ */ React__default["default"].createElement("p", {
+          className: "mb-4 text-gray-500"
+        }, /* @__PURE__ */ React__default["default"].createElement("em", null, "Sorting on a non-required field. Some documents may be excluded (if they don't have a value for", " ", sortName, ")")), documents.length > 0 ? /* @__PURE__ */ React__default["default"].createElement("table", {
           className: "table-auto shadow bg-white border-b border-gray-200 w-full max-w-full rounded-lg"
         }, /* @__PURE__ */ React__default["default"].createElement("tbody", {
           className: "divide-y divide-gray-150"
-        }, documents.map((document) => {
+        }, !activeSearch && folder.name && /* @__PURE__ */ React__default["default"].createElement("tr", null, /* @__PURE__ */ React__default["default"].createElement("td", {
+          colSpan: 5
+        }, /* @__PURE__ */ React__default["default"].createElement(Breadcrumb, {
+          folder,
+          navigate,
+          collectionName
+        }))), documents.map((document) => {
           var _a2;
+          if (document.node.__typename === "Folder") {
+            return /* @__PURE__ */ React__default["default"].createElement("tr", {
+              key: `folder-${document.node.path}`
+            }, /* @__PURE__ */ React__default["default"].createElement("td", {
+              className: "pl-5 pr-3 py-3 truncate max-w-0"
+            }, /* @__PURE__ */ React__default["default"].createElement("a", {
+              className: "text-blue-600 hover:text-blue-400 flex items-center gap-3 cursor-pointer truncate",
+              onClick: () => {
+                navigate(`/${[
+                  "collections",
+                  collectionName,
+                  document.node.path
+                ].join("/")}`, { replace: true });
+              }
+            }, /* @__PURE__ */ React__default["default"].createElement(BiFolder, {
+              className: "inline-block h-6 w-auto flex-shrink-0 opacity-70"
+            }), /* @__PURE__ */ React__default["default"].createElement("span", {
+              className: "truncate block"
+            }, /* @__PURE__ */ React__default["default"].createElement("span", {
+              className: "block text-xs text-gray-400 mb-1 uppercase"
+            }, "Name"), /* @__PURE__ */ React__default["default"].createElement("span", {
+              className: "h-5 leading-5 block truncate"
+            }, /* @__PURE__ */ React__default["default"].createElement("span", null, document.node.name))))), /* @__PURE__ */ React__default["default"].createElement("td", {
+              className: "px-3 py-3 truncate max-w-0",
+              colSpan: 4
+            }, /* @__PURE__ */ React__default["default"].createElement("span", {
+              className: "block text-xs text-gray-400 mb-1 uppercase"
+            }, "Path"), /* @__PURE__ */ React__default["default"].createElement("span", {
+              className: "leading-5 block text-sm font-medium text-gray-900 truncate"
+            }, document.node.path.substring(2).split("/").map((node) => {
+              return /* @__PURE__ */ React__default["default"].createElement("span", {
+                key: node
+              }, /* @__PURE__ */ React__default["default"].createElement("span", {
+                className: "text-gray-300 pr-0.5"
+              }, "/"), /* @__PURE__ */ React__default["default"].createElement("span", {
+                className: "pr-0.5"
+              }, node));
+            }))));
+          }
           const hasTitle = Boolean(document.node._sys.title);
           const subfolders = document.node._sys.breadcrumbs.slice(0, -1).join("/");
           return /* @__PURE__ */ React__default["default"].createElement("tr", {
             key: `document-${document.node._sys.relativePath}`,
             className: ""
           }, /* @__PURE__ */ React__default["default"].createElement("td", {
-            className: "pl-5 pr-3 py-2 truncate max-w-0"
+            className: "pl-5 pr-3 py-3 truncate max-w-0",
+            colSpan: hasTitle ? 1 : 2
           }, /* @__PURE__ */ React__default["default"].createElement("a", {
             className: "text-blue-600 hover:text-blue-400 flex items-center gap-3 cursor-pointer truncate",
             onClick: () => {
               handleNavigate(navigate, cms, collection, collectionDefinition, document.node);
             }
-          }, /* @__PURE__ */ React__default["default"].createElement(BiEdit, {
+          }, /* @__PURE__ */ React__default["default"].createElement(BiFile, {
             className: "inline-block h-6 w-auto flex-shrink-0 opacity-70"
           }), /* @__PURE__ */ React__default["default"].createElement("span", {
             className: "truncate block"
@@ -3501,24 +3704,24 @@ This will work when developing locally but NOT when deployed to production.
             className: "block text-xs text-gray-400 mb-1 uppercase"
           }, hasTitle ? "Title" : "Filename"), /* @__PURE__ */ React__default["default"].createElement("span", {
             className: "h-5 leading-5 block truncate"
-          }, !hasTitle && subfolders && /* @__PURE__ */ React__default["default"].createElement("span", {
+          }, !folderView && !hasTitle && subfolders && /* @__PURE__ */ React__default["default"].createElement("span", {
             className: "text-xs text-gray-400"
           }, `${subfolders}/`), /* @__PURE__ */ React__default["default"].createElement("span", null, hasTitle ? (_a2 = document.node._sys) == null ? void 0 : _a2.title : document.node._sys.filename))))), hasTitle && /* @__PURE__ */ React__default["default"].createElement("td", {
-            className: "px-3 py-4 truncate max-w-0 "
+            className: "px-3 py-3 truncate max-w-0"
           }, /* @__PURE__ */ React__default["default"].createElement("span", {
             className: "block text-xs text-gray-400 mb-1 uppercase"
           }, "Filename"), /* @__PURE__ */ React__default["default"].createElement("span", {
             className: "h-5 leading-5 block text-sm font-medium text-gray-900 truncate"
-          }, subfolders && /* @__PURE__ */ React__default["default"].createElement("span", {
+          }, !folderView && subfolders && /* @__PURE__ */ React__default["default"].createElement("span", {
             className: "text-xs text-gray-400"
           }, `${subfolders}/`), /* @__PURE__ */ React__default["default"].createElement("span", null, document.node._sys.filename))), /* @__PURE__ */ React__default["default"].createElement("td", {
-            className: "px-3 py-4 truncate w-[15%]"
+            className: "px-3 py-3 truncate w-[15%]"
           }, /* @__PURE__ */ React__default["default"].createElement("span", {
             className: "block text-xs text-gray-400 mb-1 uppercase"
           }, "Extension"), /* @__PURE__ */ React__default["default"].createElement("span", {
             className: "h-5 leading-5 block text-sm font-medium text-gray-900"
           }, document.node._sys.extension)), /* @__PURE__ */ React__default["default"].createElement("td", {
-            className: "px-3 py-4 truncate w-[15%]"
+            className: "px-3 py-3 truncate w-[15%]"
           }, /* @__PURE__ */ React__default["default"].createElement("span", {
             className: "block text-xs text-gray-400 mb-1 uppercase"
           }, "Template"), /* @__PURE__ */ React__default["default"].createElement("span", {
@@ -3534,7 +3737,35 @@ This will work when developing locally but NOT when deployed to production.
                   size: "1.3rem"
                 }),
                 onMouseDown: () => {
-                  navigate(`${document.node._sys.breadcrumbs.join("/")}`, { replace: true });
+                  const pathToDoc = document.node._sys.breadcrumbs;
+                  if (folder.fullyQualifiedName) {
+                    pathToDoc.unshift("~");
+                  }
+                  navigate(`/${[
+                    "collections",
+                    "edit",
+                    collectionName,
+                    ...pathToDoc
+                  ].join("/")}`, { replace: true });
+                }
+              },
+              allowCreate && {
+                name: "duplicate",
+                label: "Duplicate",
+                Icon: /* @__PURE__ */ React__default["default"].createElement(BiCopy, {
+                  size: "1.3rem"
+                }),
+                onMouseDown: () => {
+                  const pathToDoc = document.node._sys.breadcrumbs;
+                  if (folder.fullyQualifiedName) {
+                    pathToDoc.unshift("~");
+                  }
+                  navigate(`/${[
+                    "collections",
+                    "duplicate",
+                    collectionName,
+                    ...pathToDoc
+                  ].join("/")}`, { replace: true });
                 }
               },
               allowDelete && {
@@ -3596,6 +3827,51 @@ This will work when developing locally but NOT when deployed to production.
       }));
     });
   };
+  const Breadcrumb = ({ folder, navigate, collectionName }) => {
+    const folderArray = folder.name.split("/");
+    return /* @__PURE__ */ React__default["default"].createElement("div", {
+      className: "w-full bg-gray-50/30 flex items-stretch"
+    }, /* @__PURE__ */ React__default["default"].createElement("button", {
+      onClick: () => {
+        const folders = folder.fullyQualifiedName.split("/");
+        navigate(`/${[
+          "collections",
+          collectionName,
+          ...folders.slice(0, folders.length - 1)
+        ].join("/")}`, { replace: true });
+      },
+      className: "px-3 py-2 bg-white hover:bg-gray-50/50 transition ease-out duration-100 border-r border-gray-100 text-blue-500 hover:text-blue-600"
+    }, /* @__PURE__ */ React__default["default"].createElement(BiArrowBack, {
+      className: "w-6 h-full opacity-70"
+    })), /* @__PURE__ */ React__default["default"].createElement("span", {
+      className: "px-3 py-2 text-gray-600 flex flex-wrap items-center justify-start gap-1"
+    }, /* @__PURE__ */ React__default["default"].createElement("button", {
+      onClick: () => {
+        navigate(`/collections/${collectionName}/~`, {
+          replace: true
+        });
+      },
+      className: "shrink-0 bg-transparent p-0 border-0 text-blue-400 hover:text-blue-500 transition-all ease-out duration-100 opacity-70 hover:opacity-100"
+    }, /* @__PURE__ */ React__default["default"].createElement(RiHome2Line, {
+      className: "w-5 h-auto"
+    })), folderArray.map((node, index) => {
+      return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */ React__default["default"].createElement("span", {
+        className: "text-gray-200 shrink-0"
+      }, "/"), index < folderArray.length - 1 ? /* @__PURE__ */ React__default["default"].createElement("button", {
+        className: "bg-transparent whitespace-nowrap truncate p-0 border-0 text-blue-500 hover:text-blue-600 transition-all ease-out duration-100 underline underline-offset-2 decoration-1	decoration-blue-200 hover:decoration-blue-400",
+        onClick: () => {
+          const folders = folder.fullyQualifiedName.split("/");
+          navigate(`/${[
+            "collections",
+            collectionName,
+            ...folders.slice(0, folders.length - (folders.length - (index + 2)))
+          ].join("/")}`, { replace: true });
+        }
+      }, node) : /* @__PURE__ */ React__default["default"].createElement("span", {
+        className: "whitespace-nowrap truncate"
+      }, node));
+    })));
+  };
   const NoDocumentsPlaceholder = () => {
     return /* @__PURE__ */ React__default["default"].createElement("div", {
       className: "text-center px-5 py-3 flex flex-col items-center justify-center shadow border border-gray-100 bg-gray-50 border-b border-gray-200 w-full max-w-full rounded-lg"
@@ -3658,10 +3934,10 @@ This will work when developing locally but NOT when deployed to production.
   function FaUnlock(props) {
     return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 448 512" }, "child": [{ "tag": "path", "attr": { "d": "M400 256H152V152.9c0-39.6 31.7-72.5 71.3-72.9 40-.4 72.7 32.1 72.7 72v16c0 13.3 10.7 24 24 24h32c13.3 0 24-10.7 24-24v-16C376 68 307.5-.3 223.5 0 139.5.3 72 69.5 72 153.5V256H48c-26.5 0-48 21.5-48 48v160c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V304c0-26.5-21.5-48-48-48z" } }] })(props);
   }
-  const createDocument = async (cms, collection, template, mutationInfo, values) => {
+  const createDocument = async (cms, collection, template, mutationInfo, folder, values) => {
     const api = new TinaAdminApi(cms);
     const { filename, ...leftover } = values;
-    const relativePath = `${filename}.${collection.format}`;
+    const relativePath = `${folder ? `${folder}/` : ""}${filename}.${collection.format}`;
     const params = api.schema.transformPayload(collection.name, {
       _collection: collection.name,
       ...template && { _template: template.name },
@@ -3677,10 +3953,12 @@ This will work when developing locally but NOT when deployed to production.
     }
   };
   const CollectionCreatePage = () => {
+    const folder = useCollectionFolder();
     const { collectionName, templateName } = reactRouterDom.useParams();
     return /* @__PURE__ */ React__default["default"].createElement(GetCMS, null, (cms) => /* @__PURE__ */ React__default["default"].createElement(GetCollection, {
       cms,
       collectionName,
+      folder,
       includeDocuments: false
     }, (collection) => {
       const mutationInfo = {
@@ -3691,7 +3969,8 @@ This will work when developing locally but NOT when deployed to production.
         cms,
         collection,
         templateName,
-        mutationInfo
+        mutationInfo,
+        folder
       });
     }));
   };
@@ -3713,7 +3992,14 @@ This will work when developing locally but NOT when deployed to production.
       className: `text-blue-500 absolute top-1/2 left-2 -translate-y-1/2 pointer-events-none h-5 w-auto transition-opacity duration-150 ease-out ${!filenameTouched && !props.readonly ? "opacity-0 group-hover:opacity-80 group-active:opacity-80" : "opacity-0"}`
     }));
   };
-  const RenderForm$1 = ({ cms, collection, templateName, mutationInfo }) => {
+  const RenderForm$1 = ({
+    cms,
+    collection,
+    folder,
+    templateName,
+    mutationInfo,
+    customDefaults
+  }) => {
     var _a, _b, _c, _d, _e, _f;
     const navigate = reactRouterDom.useNavigate();
     const [formIsPristine, setFormIsPristine] = React.useState(true);
@@ -3739,7 +4025,7 @@ This will work when developing locally but NOT when deployed to production.
         };
       }
     }
-    const defaultItem = ((_d = template.ui) == null ? void 0 : _d.defaultItem) || (template == null ? void 0 : template.defaultItem);
+    const defaultItem = customDefaults || ((_d = template.ui) == null ? void 0 : _d.defaultItem) || (template == null ? void 0 : template.defaultItem);
     const form = React.useMemo(() => {
       var _a2, _b2;
       return new toolkit.Form({
@@ -3796,9 +4082,12 @@ This will work when developing locally but NOT when deployed to production.
         ],
         onSubmit: async (values) => {
           try {
-            await createDocument(cms, collection, template, mutationInfo, values);
+            const folderName = folder.fullyQualifiedName ? folder.name : "";
+            await createDocument(cms, collection, template, mutationInfo, folderName, values);
             cms.alerts.success("Document created!");
-            navigate(`/collections/${collection.name}`);
+            setTimeout(() => {
+              navigate(`/collections/${collection.name}${folder.fullyQualifiedName ? `/${folder.fullyQualifiedName}` : ""}`);
+            }, 10);
           } catch (error) {
             console.error(error);
             const defaultErrorText = "There was a problem saving your document.";
@@ -3825,7 +4114,7 @@ This will work when developing locally but NOT when deployed to production.
     }, /* @__PURE__ */ React__default["default"].createElement("span", {
       className: "block text-sm leading-tight uppercase text-gray-400 mb-1"
     }, /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Link, {
-      to: `/collections/${collection.name}`,
+      to: `/collections/${collection.name}${folder.fullyQualifiedName ? `/${folder.fullyQualifiedName}` : ""}`,
       className: "inline-block text-current hover:text-blue-400 focus:underline focus:outline-none focus:text-blue-400 font-medium transition-colors duration-150 ease-out"
     }, collection.label ? collection.label : collection.name), /* @__PURE__ */ React__default["default"].createElement(HiChevronRight, {
       className: "inline-block -mt-0.5 opacity-50"
@@ -3878,6 +4167,38 @@ This will work when developing locally but NOT when deployed to production.
     }
     return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, children(document, loading));
   };
+  const CollectionDuplicatePage = () => {
+    const folder = useCollectionFolder();
+    const { collectionName, ...rest } = reactRouterDom.useParams();
+    const { "*": filename } = rest;
+    return /* @__PURE__ */ React__default["default"].createElement(GetCMS, null, (cms) => /* @__PURE__ */ React__default["default"].createElement(GetCollection, {
+      cms,
+      collectionName,
+      folder,
+      includeDocuments: false
+    }, (collection) => {
+      const relativePath = `${filename.startsWith("~/") ? filename.substring(2) : filename}.${collection.format}`;
+      const mutationInfo = {
+        includeCollection: true,
+        includeTemplate: !!collection.templates
+      };
+      return /* @__PURE__ */ React__default["default"].createElement(GetDocument, {
+        cms,
+        collectionName: collection.name,
+        relativePath
+      }, (document) => {
+        var _a;
+        return /* @__PURE__ */ React__default["default"].createElement(RenderForm$1, {
+          cms,
+          collection,
+          templateName: (_a = document._values) == null ? void 0 : _a._template,
+          folder: parentFolder(folder),
+          mutationInfo,
+          customDefaults: document._values
+        });
+      });
+    }));
+  };
   const updateDocument = async (cms, relativePath, collection, mutationInfo, values) => {
     const api = new TinaAdminApi(cms);
     const params = api.schema.transformPayload(collection.name, values);
@@ -3892,13 +4213,16 @@ This will work when developing locally but NOT when deployed to production.
   };
   const CollectionUpdatePage = () => {
     const { collectionName, ...rest } = reactRouterDom.useParams();
+    const folder = useCollectionFolder();
     const { "*": filename } = rest;
+    const resolvedFile = folder.fullyQualifiedName ? folder.name : filename;
     return /* @__PURE__ */ React__default["default"].createElement(GetCMS, null, (cms) => /* @__PURE__ */ React__default["default"].createElement(GetCollection, {
       cms,
       collectionName,
+      folder,
       includeDocuments: false
     }, (collection) => {
-      const relativePath = `${filename}.${collection.format}`;
+      const relativePath = `${resolvedFile}.${collection.format}`;
       const mutationInfo = {
         includeCollection: true,
         includeTemplate: !!collection.templates
@@ -3910,7 +4234,7 @@ This will work when developing locally but NOT when deployed to production.
       }, (document) => /* @__PURE__ */ React__default["default"].createElement(RenderForm, {
         cms,
         document,
-        filename,
+        filename: resolvedFile,
         relativePath,
         collection,
         mutationInfo
@@ -3928,6 +4252,7 @@ This will work when developing locally but NOT when deployed to production.
     var _a, _b;
     const [formIsPristine, setFormIsPristine] = React.useState(true);
     const schema = cms.api.tina.schema;
+    const parentFolder2 = relativePath.split("/").slice(0, -1).join("/");
     const schemaCollection = schema.getCollection(collection.name);
     const template = schema.getTemplateForData({
       collection: schemaCollection,
@@ -3969,7 +4294,7 @@ This will work when developing locally but NOT when deployed to production.
     }, /* @__PURE__ */ React__default["default"].createElement("span", {
       className: "block text-sm leading-tight uppercase text-gray-400 mb-1"
     }, /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Link, {
-      to: `/collections/${collection.name}`,
+      to: `/collections/${collection.name}/~${parentFolder2}`,
       className: "inline-block text-current hover:text-blue-400 focus:underline focus:outline-none focus:text-blue-400 font-medium transition-colors duration-150 ease-out"
     }, collection.label ? collection.label : collection.name), /* @__PURE__ */ React__default["default"].createElement(HiChevronRight, {
       className: "inline-block -mt-0.5 opacity-50"
@@ -4130,22 +4455,42 @@ This will work when developing locally but NOT when deployed to production.
           path: "graphql",
           element: /* @__PURE__ */ React__default["default"].createElement(PlainLayout, null, /* @__PURE__ */ React__default["default"].createElement(Playground, null))
         }), /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Route, {
-          path: "collections/:collectionName/new",
+          path: "collections/new/:collectionName",
           element: /* @__PURE__ */ React__default["default"].createElement(DefaultWrapper, {
             cms
           }, /* @__PURE__ */ React__default["default"].createElement(CollectionCreatePage, null))
         }), /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Route, {
-          path: "collections/:collectionName/:templateName/new",
+          path: "collections/duplicate/:collectionName/~/*",
+          element: /* @__PURE__ */ React__default["default"].createElement(DefaultWrapper, {
+            cms
+          }, /* @__PURE__ */ React__default["default"].createElement(CollectionDuplicatePage, null))
+        }), /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Route, {
+          path: "collections/duplicate/:collectionName/*",
+          element: /* @__PURE__ */ React__default["default"].createElement(DefaultWrapper, {
+            cms
+          }, /* @__PURE__ */ React__default["default"].createElement(CollectionDuplicatePage, null))
+        }), /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Route, {
+          path: "collections/new/:collectionName/:templateName",
           element: /* @__PURE__ */ React__default["default"].createElement(DefaultWrapper, {
             cms
           }, /* @__PURE__ */ React__default["default"].createElement(CollectionCreatePage, null))
         }), /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Route, {
-          path: "collections/:collectionName/*",
+          path: "collections/new/:collectionName/:templateName/~/*",
+          element: /* @__PURE__ */ React__default["default"].createElement(DefaultWrapper, {
+            cms
+          }, /* @__PURE__ */ React__default["default"].createElement(CollectionCreatePage, null))
+        }), /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Route, {
+          path: "collections/new/:collectionName/~/*",
+          element: /* @__PURE__ */ React__default["default"].createElement(DefaultWrapper, {
+            cms
+          }, /* @__PURE__ */ React__default["default"].createElement(CollectionCreatePage, null))
+        }), /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Route, {
+          path: "collections/edit/:collectionName/*",
           element: /* @__PURE__ */ React__default["default"].createElement(DefaultWrapper, {
             cms
           }, /* @__PURE__ */ React__default["default"].createElement(CollectionUpdatePage, null))
         }), /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Route, {
-          path: "collections/:collectionName",
+          path: "collections/:collectionName/*",
           element: /* @__PURE__ */ React__default["default"].createElement(DefaultWrapper, {
             cms
           }, /* @__PURE__ */ React__default["default"].createElement(CollectionListPage, null))