tinacms 1.4.6 → 1.5.0

package/dist/index.es.js

@@ -10,7 +10,7 @@ import React, { useState, useCallback, useEffect, Fragment, useMemo } from "reac
 import * as yup from "yup";
 import { setEditing, useEditState } from "@tinacms/sharedctx";
 import { diff } from "@graphql-inspector/core";
-import { NavLink, useSearchParams, useNavigate, useParams, useLocation, Link, HashRouter, Routes, Route } from "react-router-dom";
+import { NavLink, useSearchParams, useNavigate, useLocation, useParams, Link, HashRouter, Routes, Route } from "react-router-dom";
 import { Transition, Menu } from "@headlessui/react";
 import { useWindowWidth } from "@react-hook/window-size";
 function popupWindow(url, title, window2, w, h) {
@@ -218,12 +218,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" ? print(query(gql$1)) : query,
         variables
@@ -335,12 +339,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() {
@@ -617,7 +622,7 @@ class TinaAdminApi {
   }
 }`, { 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) {
@@ -654,13 +659,13 @@ class TinaAdminApi {
     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
@@ -670,6 +675,11 @@ class TinaAdminApi {
             }
             edges {
               node {
+                __typename
+                ... on Folder {
+                    name
+                    path
+                }
                 ... on Document {
                   _sys {
                     title
@@ -690,19 +700,20 @@ class TinaAdminApi {
         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
@@ -712,6 +723,11 @@ class TinaAdminApi {
             }
             edges {
               node {
+                __typename
+                ... on Folder {
+                    name
+                    path
+                }
                 ... on Document {
                   _sys {
                     title
@@ -732,6 +748,7 @@ class TinaAdminApi {
         variables: {
           collection: collectionName,
           includeDocuments,
+          folder,
           sort,
           limit: 50,
           after,
@@ -1464,6 +1481,9 @@ var styles = `.tina-tailwind {
 .tina-tailwind .flex-shrink-0 {
   flex-shrink: 0;
 }
+.tina-tailwind .shrink-0 {
+  flex-shrink: 0;
+}
 .tina-tailwind .flex-grow-0 {
   flex-grow: 0;
 }
@@ -1526,6 +1546,9 @@ var styles = `.tina-tailwind {
 .tina-tailwind .items-stretch {
   align-items: stretch;
 }
+.tina-tailwind .justify-start {
+  justify-content: flex-start;
+}
 .tina-tailwind .justify-end {
   justify-content: flex-end;
 }
@@ -1541,6 +1564,9 @@ var styles = `.tina-tailwind {
 .tina-tailwind .gap-0\\.5 {
   gap: 2px;
 }
+.tina-tailwind .gap-1 {
+  gap: 4px;
+}
 .tina-tailwind .gap-2 {
   gap: 8px;
 }
@@ -1601,9 +1627,15 @@ var styles = `.tina-tailwind {
 .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));
@@ -1628,6 +1660,12 @@ var styles = `.tina-tailwind {
   --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));
@@ -1669,6 +1707,9 @@ var styles = `.tina-tailwind {
 .tina-tailwind .fill-current {
   fill: currentColor;
 }
+.tina-tailwind .p-0 {
+  padding: 0px;
+}
 .tina-tailwind .px-12 {
   padding-left: 48px;
   padding-right: 48px;
@@ -1737,6 +1778,12 @@ var styles = `.tina-tailwind {
 .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;
 }
@@ -1807,6 +1854,10 @@ var styles = `.tina-tailwind {
 .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));
@@ -1818,6 +1869,10 @@ var styles = `.tina-tailwind {
 .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));
@@ -1857,6 +1912,15 @@ var styles = `.tina-tailwind {
 .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;
 }
@@ -1968,14 +2032,24 @@ var styles = `.tina-tailwind {
   --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;
 }
@@ -2559,12 +2633,24 @@ const useGetCollections = (cms) => {
 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);
 }
@@ -2623,7 +2709,7 @@ const Sidebar = ({ cms }) => {
     }),
     RenderNavCollection: ({ collection }) => /* @__PURE__ */ React.createElement(SidebarLink, {
       label: collection.label ? collection.label : collection.name,
-      to: `/collections/${collection.name}`,
+      to: `/collections/${collection.name}/~`,
       Icon: ImFilesEmpty
     })
   }), !renderDesktopNav && /* @__PURE__ */ React.createElement(Transition, {
@@ -2660,7 +2746,7 @@ const Sidebar = ({ cms }) => {
     }),
     RenderNavCollection: ({ collection }) => /* @__PURE__ */ React.createElement(SidebarLink, {
       label: collection.label ? collection.label : collection.name,
-      to: `/collections/${collection.name}`,
+      to: `/collections/${collection.name}/~`,
       Icon: ImFilesEmpty,
       onClick: () => {
         setMenuIsOpen(false);
@@ -2898,6 +2984,9 @@ const DashboardPage = () => {
     }, "Welcome to Tina!")), /* @__PURE__ */ React.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.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", {
   style: {
     position: "absolute",
@@ -3016,7 +3105,7 @@ const FullscreenError = ({
     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);
@@ -3025,13 +3114,14 @@ const useGetCollection = (cms, collectionName, includeDocuments = true, after =
   const [error, setError] = useState(void 0);
   const [resetState, setResetSate] = useState(0);
   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}`);
@@ -3042,15 +3132,29 @@ const useGetCollection = (cms, collectionName, includeDocuments = true, after =
         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,
@@ -3058,7 +3162,7 @@ const GetCollection = ({
   filterArgs
 }) => {
   const navigate = 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) || {};
   useEffect(() => {
     var _a, _b, _c, _d, _e, _f, _g, _h;
     if (loading)
@@ -3068,7 +3172,11 @@ const GetCollection = ({
     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) {
@@ -3079,6 +3187,42 @@ const GetCollection = ({
   }
   return /* @__PURE__ */ React.createElement(React.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] = useState({
+    loading: true,
+    name: "",
+    fullyQualifiedName: "",
+    parentName: ""
+  });
+  const loc = useLocation();
+  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 }) => {
@@ -3124,7 +3268,8 @@ const handleNavigate = (navigate, cms, collection, collectionDefinition, documen
     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 = () => {
@@ -3143,15 +3288,17 @@ const CollectionListPage = () => {
     after: "",
     booleanEquals: null
   });
+  const [activeSearch, setActiveSearch] = React.useState(false);
   const [endCursor, setEndCursor] = useState("");
   const [prevCursors, setPrevCursors] = useState([]);
   const [sortKey, setSortKey] = 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] = useState(order);
   const loc = useLocation();
+  const folder = useCollectionFolder();
   useEffect(() => {
     setSortKey(window.localStorage.getItem(`${LOCAL_STORAGE_KEY}.${collectionName}`) || JSON.stringify({
       order: "asc",
@@ -3181,6 +3328,7 @@ const CollectionListPage = () => {
       includeDocuments: true,
       startCursor: endCursor,
       sortKey,
+      folder,
       filterArgs: collectionName === vars.collection ? vars : {
         collection: collectionName,
         relativePath: "",
@@ -3199,6 +3347,7 @@ const CollectionListPage = () => {
       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;
       });
@@ -3209,6 +3358,7 @@ const CollectionListPage = () => {
       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.createElement(React.Fragment, null, deleteModalOpen && /* @__PURE__ */ React.createElement(DeleteModal, {
         filename: vars.relativePath,
         deleteFunc: async () => {
@@ -3256,9 +3406,9 @@ const CollectionListPage = () => {
         className: "flex flex-col gap-4"
       }, /* @__PURE__ */ React.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.createElement("div", {
+      }, collection.label ? collection.label : collection.name), /* @__PURE__ */ React.createElement("div", {
         className: "flex gap-4 items-end flex-wrap"
-      }, /* @__PURE__ */ React.createElement("div", {
+      }, (fields == null ? void 0 : fields.length) > 0 && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", {
         className: "flex flex-col gap-2 items-start"
       }, /* @__PURE__ */ React.createElement("label", {
         htmlFor: "sort",
@@ -3421,6 +3571,7 @@ const CollectionListPage = () => {
         className: "flex gap-3"
       }, /* @__PURE__ */ React.createElement(Button, {
         onClick: () => {
+          setActiveSearch(true);
           setEndCursor("");
           setPrevCursors([]);
           reFetchCollection();
@@ -3431,8 +3582,10 @@ const CollectionListPage = () => {
         className: "w-5 h-full ml-1.5 opacity-70"
       })), (vars.startsWith || vars.after || vars.before || vars.booleanEquals) && /* @__PURE__ */ React.createElement(Button, {
         onClick: () => {
+          setActiveSearch(false);
           setVars((old) => ({
             ...old,
+            filterField: "",
             startsWith: "",
             after: "",
             before: "",
@@ -3445,10 +3598,16 @@ const CollectionListPage = () => {
         variant: "white"
       }, "Clear", " ", /* @__PURE__ */ React.createElement(BiX, {
         className: "w-5 h-full ml-1 opacity-70"
-      })))))), /* @__PURE__ */ React.createElement("div", {
+      }))))))), /* @__PURE__ */ React.createElement("div", {
         className: "flex self-end	justify-self-end"
       }, !collection.templates && allowCreate && /* @__PURE__ */ React.createElement(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.createElement(BiPlus, {
         className: "w-5 h-full ml-1 opacity-70"
@@ -3456,25 +3615,73 @@ const CollectionListPage = () => {
         templates: collection.templates
       })))), /* @__PURE__ */ React.createElement(PageBody, null, /* @__PURE__ */ React.createElement("div", {
         className: "w-full mx-auto max-w-screen-xl"
-      }, documents.length > 0 ? /* @__PURE__ */ React.createElement("table", {
+      }, sortField && !sortField.required && /* @__PURE__ */ React.createElement("p", {
+        className: "mb-4 text-gray-500"
+      }, /* @__PURE__ */ React.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.createElement("table", {
         className: "table-auto shadow bg-white border-b border-gray-200 w-full max-w-full rounded-lg"
       }, /* @__PURE__ */ React.createElement("tbody", {
         className: "divide-y divide-gray-150"
-      }, documents.map((document) => {
+      }, !activeSearch && folder.name && /* @__PURE__ */ React.createElement("tr", null, /* @__PURE__ */ React.createElement("td", {
+        colSpan: 5
+      }, /* @__PURE__ */ React.createElement(Breadcrumb, {
+        folder,
+        navigate,
+        collectionName
+      }))), documents.map((document) => {
         var _a2;
+        if (document.node.__typename === "Folder") {
+          return /* @__PURE__ */ React.createElement("tr", {
+            key: `folder-${document.node.path}`
+          }, /* @__PURE__ */ React.createElement("td", {
+            className: "pl-5 pr-3 py-3 truncate max-w-0"
+          }, /* @__PURE__ */ React.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.createElement(BiFolder, {
+            className: "inline-block h-6 w-auto flex-shrink-0 opacity-70"
+          }), /* @__PURE__ */ React.createElement("span", {
+            className: "truncate block"
+          }, /* @__PURE__ */ React.createElement("span", {
+            className: "block text-xs text-gray-400 mb-1 uppercase"
+          }, "Name"), /* @__PURE__ */ React.createElement("span", {
+            className: "h-5 leading-5 block truncate"
+          }, /* @__PURE__ */ React.createElement("span", null, document.node.name))))), /* @__PURE__ */ React.createElement("td", {
+            className: "px-3 py-3 truncate max-w-0",
+            colSpan: 4
+          }, /* @__PURE__ */ React.createElement("span", {
+            className: "block text-xs text-gray-400 mb-1 uppercase"
+          }, "Path"), /* @__PURE__ */ React.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.createElement("span", {
+              key: node
+            }, /* @__PURE__ */ React.createElement("span", {
+              className: "text-gray-300 pr-0.5"
+            }, "/"), /* @__PURE__ */ React.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.createElement("tr", {
           key: `document-${document.node._sys.relativePath}`,
           className: ""
         }, /* @__PURE__ */ React.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.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.createElement(BiEdit, {
+        }, /* @__PURE__ */ React.createElement(BiFile, {
           className: "inline-block h-6 w-auto flex-shrink-0 opacity-70"
         }), /* @__PURE__ */ React.createElement("span", {
           className: "truncate block"
@@ -3482,24 +3689,24 @@ const CollectionListPage = () => {
           className: "block text-xs text-gray-400 mb-1 uppercase"
         }, hasTitle ? "Title" : "Filename"), /* @__PURE__ */ React.createElement("span", {
           className: "h-5 leading-5 block truncate"
-        }, !hasTitle && subfolders && /* @__PURE__ */ React.createElement("span", {
+        }, !folderView && !hasTitle && subfolders && /* @__PURE__ */ React.createElement("span", {
           className: "text-xs text-gray-400"
         }, `${subfolders}/`), /* @__PURE__ */ React.createElement("span", null, hasTitle ? (_a2 = document.node._sys) == null ? void 0 : _a2.title : document.node._sys.filename))))), hasTitle && /* @__PURE__ */ React.createElement("td", {
-          className: "px-3 py-4 truncate max-w-0 "
+          className: "px-3 py-3 truncate max-w-0"
         }, /* @__PURE__ */ React.createElement("span", {
           className: "block text-xs text-gray-400 mb-1 uppercase"
         }, "Filename"), /* @__PURE__ */ React.createElement("span", {
           className: "h-5 leading-5 block text-sm font-medium text-gray-900 truncate"
-        }, subfolders && /* @__PURE__ */ React.createElement("span", {
+        }, !folderView && subfolders && /* @__PURE__ */ React.createElement("span", {
           className: "text-xs text-gray-400"
         }, `${subfolders}/`), /* @__PURE__ */ React.createElement("span", null, document.node._sys.filename))), /* @__PURE__ */ React.createElement("td", {
-          className: "px-3 py-4 truncate w-[15%]"
+          className: "px-3 py-3 truncate w-[15%]"
         }, /* @__PURE__ */ React.createElement("span", {
           className: "block text-xs text-gray-400 mb-1 uppercase"
         }, "Extension"), /* @__PURE__ */ React.createElement("span", {
           className: "h-5 leading-5 block text-sm font-medium text-gray-900"
         }, document.node._sys.extension)), /* @__PURE__ */ React.createElement("td", {
-          className: "px-3 py-4 truncate w-[15%]"
+          className: "px-3 py-3 truncate w-[15%]"
         }, /* @__PURE__ */ React.createElement("span", {
           className: "block text-xs text-gray-400 mb-1 uppercase"
         }, "Template"), /* @__PURE__ */ React.createElement("span", {
@@ -3515,7 +3722,35 @@ const CollectionListPage = () => {
                 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.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 && {
@@ -3577,6 +3812,51 @@ const CollectionListPage = () => {
     }));
   });
 };
+const Breadcrumb = ({ folder, navigate, collectionName }) => {
+  const folderArray = folder.name.split("/");
+  return /* @__PURE__ */ React.createElement("div", {
+    className: "w-full bg-gray-50/30 flex items-stretch"
+  }, /* @__PURE__ */ React.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.createElement(BiArrowBack, {
+    className: "w-6 h-full opacity-70"
+  })), /* @__PURE__ */ React.createElement("span", {
+    className: "px-3 py-2 text-gray-600 flex flex-wrap items-center justify-start gap-1"
+  }, /* @__PURE__ */ React.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.createElement(RiHome2Line, {
+    className: "w-5 h-auto"
+  })), folderArray.map((node, index) => {
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("span", {
+      className: "text-gray-200 shrink-0"
+    }, "/"), index < folderArray.length - 1 ? /* @__PURE__ */ React.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.createElement("span", {
+      className: "whitespace-nowrap truncate"
+    }, node));
+  })));
+};
 const NoDocumentsPlaceholder = () => {
   return /* @__PURE__ */ React.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"
@@ -3639,10 +3919,10 @@ function FaLock(props) {
 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 },
@@ -3658,10 +3938,12 @@ const createDocument = async (cms, collection, template, mutationInfo, values) =
   }
 };
 const CollectionCreatePage = () => {
+  const folder = useCollectionFolder();
   const { collectionName, templateName } = useParams();
   return /* @__PURE__ */ React.createElement(GetCMS, null, (cms) => /* @__PURE__ */ React.createElement(GetCollection, {
     cms,
     collectionName,
+    folder,
     includeDocuments: false
   }, (collection) => {
     const mutationInfo = {
@@ -3672,7 +3954,8 @@ const CollectionCreatePage = () => {
       cms,
       collection,
       templateName,
-      mutationInfo
+      mutationInfo,
+      folder
     });
   }));
 };
@@ -3694,7 +3977,14 @@ const FilenameInput = (props) => {
     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 = useNavigate();
   const [formIsPristine, setFormIsPristine] = useState(true);
@@ -3720,7 +4010,7 @@ const RenderForm$1 = ({ cms, collection, templateName, mutationInfo }) => {
       };
     }
   }
-  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 = useMemo(() => {
     var _a2, _b2;
     return new Form({
@@ -3777,9 +4067,12 @@ const RenderForm$1 = ({ cms, collection, templateName, mutationInfo }) => {
       ],
       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.";
@@ -3806,7 +4099,7 @@ const RenderForm$1 = ({ cms, collection, templateName, mutationInfo }) => {
   }, /* @__PURE__ */ React.createElement("span", {
     className: "block text-sm leading-tight uppercase text-gray-400 mb-1"
   }, /* @__PURE__ */ React.createElement(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.createElement(HiChevronRight, {
     className: "inline-block -mt-0.5 opacity-50"
@@ -3859,6 +4152,38 @@ const GetDocument = ({
   }
   return /* @__PURE__ */ React.createElement(React.Fragment, null, children(document, loading));
 };
+const CollectionDuplicatePage = () => {
+  const folder = useCollectionFolder();
+  const { collectionName, ...rest } = useParams();
+  const { "*": filename } = rest;
+  return /* @__PURE__ */ React.createElement(GetCMS, null, (cms) => /* @__PURE__ */ React.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.createElement(GetDocument, {
+      cms,
+      collectionName: collection.name,
+      relativePath
+    }, (document) => {
+      var _a;
+      return /* @__PURE__ */ React.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);
@@ -3873,13 +4198,16 @@ const updateDocument = async (cms, relativePath, collection, mutationInfo, value
 };
 const CollectionUpdatePage = () => {
   const { collectionName, ...rest } = useParams();
+  const folder = useCollectionFolder();
   const { "*": filename } = rest;
+  const resolvedFile = folder.fullyQualifiedName ? folder.name : filename;
   return /* @__PURE__ */ React.createElement(GetCMS, null, (cms) => /* @__PURE__ */ React.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
@@ -3891,7 +4219,7 @@ const CollectionUpdatePage = () => {
     }, (document) => /* @__PURE__ */ React.createElement(RenderForm, {
       cms,
       document,
-      filename,
+      filename: resolvedFile,
       relativePath,
       collection,
       mutationInfo
@@ -3909,6 +4237,7 @@ const RenderForm = ({
   var _a, _b;
   const [formIsPristine, setFormIsPristine] = 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,
@@ -3950,7 +4279,7 @@ const RenderForm = ({
   }, /* @__PURE__ */ React.createElement("span", {
     className: "block text-sm leading-tight uppercase text-gray-400 mb-1"
   }, /* @__PURE__ */ React.createElement(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.createElement(HiChevronRight, {
     className: "inline-block -mt-0.5 opacity-50"
@@ -4111,22 +4440,42 @@ const TinaAdmin = ({
         path: "graphql",
         element: /* @__PURE__ */ React.createElement(PlainLayout, null, /* @__PURE__ */ React.createElement(Playground, null))
       }), /* @__PURE__ */ React.createElement(Route, {
-        path: "collections/:collectionName/new",
+        path: "collections/new/:collectionName",
         element: /* @__PURE__ */ React.createElement(DefaultWrapper, {
           cms
         }, /* @__PURE__ */ React.createElement(CollectionCreatePage, null))
       }), /* @__PURE__ */ React.createElement(Route, {
-        path: "collections/:collectionName/:templateName/new",
+        path: "collections/duplicate/:collectionName/~/*",
+        element: /* @__PURE__ */ React.createElement(DefaultWrapper, {
+          cms
+        }, /* @__PURE__ */ React.createElement(CollectionDuplicatePage, null))
+      }), /* @__PURE__ */ React.createElement(Route, {
+        path: "collections/duplicate/:collectionName/*",
+        element: /* @__PURE__ */ React.createElement(DefaultWrapper, {
+          cms
+        }, /* @__PURE__ */ React.createElement(CollectionDuplicatePage, null))
+      }), /* @__PURE__ */ React.createElement(Route, {
+        path: "collections/new/:collectionName/:templateName",
         element: /* @__PURE__ */ React.createElement(DefaultWrapper, {
           cms
         }, /* @__PURE__ */ React.createElement(CollectionCreatePage, null))
       }), /* @__PURE__ */ React.createElement(Route, {
-        path: "collections/:collectionName/*",
+        path: "collections/new/:collectionName/:templateName/~/*",
+        element: /* @__PURE__ */ React.createElement(DefaultWrapper, {
+          cms
+        }, /* @__PURE__ */ React.createElement(CollectionCreatePage, null))
+      }), /* @__PURE__ */ React.createElement(Route, {
+        path: "collections/new/:collectionName/~/*",
+        element: /* @__PURE__ */ React.createElement(DefaultWrapper, {
+          cms
+        }, /* @__PURE__ */ React.createElement(CollectionCreatePage, null))
+      }), /* @__PURE__ */ React.createElement(Route, {
+        path: "collections/edit/:collectionName/*",
         element: /* @__PURE__ */ React.createElement(DefaultWrapper, {
           cms
         }, /* @__PURE__ */ React.createElement(CollectionUpdatePage, null))
       }), /* @__PURE__ */ React.createElement(Route, {
-        path: "collections/:collectionName",
+        path: "collections/:collectionName/*",
         element: /* @__PURE__ */ React.createElement(DefaultWrapper, {
           cms
         }, /* @__PURE__ */ React.createElement(CollectionListPage, null))