tinacms 0.57.3 → 0.59.0

package/dist/index.js

@@ -397,6 +397,7 @@ var __objRest = (source, exclude) => {
   class Client {
     constructor(_a) {
       var _b = _a, { tokenStorage = "MEMORY" } = _b, options = __objRest(_b, ["tokenStorage"]);
+      this.events = new toolkit.EventBus();
       this.addPendingContent = async (props) => {
         const mutation = `#graphql
 mutation addPendingDocumentMutation(
@@ -437,8 +438,7 @@ mutation addPendingDocumentMutation(
       };
       this.options = options;
       this.setBranch(options.branch);
-      this.events = new toolkit.EventBus();
-      this.events.subscribe("branch-switcher:change-branch", ({ branchName }) => {
+      this.events.subscribe("branch:change", ({ branchName }) => {
         this.setBranch(branchName);
       });
       this.clientId = options.clientId;
@@ -489,8 +489,8 @@ mutation addPendingDocumentMutation(
       const encodedBranch = encodeURIComponent(branchName);
       this.frontendUrl = ((_a = this.options.tinaioConfig) == null ? void 0 : _a.frontendUrlOverride) || "https://app.tina.io";
       this.identityApiUrl = ((_b = this.options.tinaioConfig) == null ? void 0 : _b.identityApiUrlOverride) || "https://identity.tinajs.io";
-      const contentApiBase = ((_c = this.options.tinaioConfig) == null ? void 0 : _c.contentApiUrlOverride) || `https://content.tinajs.io`;
-      this.contentApiUrl = this.options.customContentApiUrl || `${contentApiBase}/content/${this.options.clientId}/github/${encodedBranch}`;
+      this.contentApiBase = ((_c = this.options.tinaioConfig) == null ? void 0 : _c.contentApiUrlOverride) || `https://content.tinajs.io`;
+      this.contentApiUrl = this.options.customContentApiUrl || `${this.contentApiBase}/content/${this.options.clientId}/github/${encodedBranch}`;
     }
     async requestWithForm(query, { variables }) {
       const schema = await this.getSchema();
@@ -555,28 +555,24 @@ mutation addPendingDocumentMutation(
         return null;
       }
     }
-    async listBranches({ owner, repo }) {
-      const url = `${this.contentApiUrl}/list_branches?owner=${owner}&repo=${repo}`;
-      try {
-        const res = await this.fetchWithToken(url, {
-          method: "GET"
-        });
-        return JSON.stringify(res);
-      } catch (e) {
-        console.error("There was an issue fetching the branch list.", e);
-        return null;
-      }
+    async listBranches() {
+      const url = `${this.contentApiBase}/github/${this.clientId}/list_branches`;
+      const res = await this.fetchWithToken(url, {
+        method: "GET"
+      });
+      return res.json();
     }
-    async createBranch({ owner, repo, baseBranch, branchName }) {
-      const url = `${this.contentApiUrl}/create_branch`;
+    async createBranch({ baseBranch, branchName }) {
+      const url = `${this.contentApiBase}/github/${this.clientId}/create_branch`;
       try {
         const res = await this.fetchWithToken(url, {
           method: "POST",
           body: {
-            owner,
-            repo,
             baseBranch,
             branchName
+          },
+          headers: {
+            "Content-Type": "application/json"
           }
         });
         return JSON.stringify(res);
@@ -758,63 +754,165 @@ mutation addPendingDocumentMutation(
     }), showChildren ? children : loginScreen ? loginScreen : null);
   };
   const TinaCloudProvider = (props) => {
+    const baseBranch = props.branch || "main";
+    const [currentBranch, setCurrentBranch] = toolkit.useLocalStorage("tinacms-current-branch", baseBranch);
     useTinaAuthRedirect();
     const cms = React__default["default"].useMemo(() => props.cms || new toolkit.TinaCMS({
       enabled: true,
       sidebar: true
     }), [props.cms]);
     if (!cms.api.tina) {
-      cms.api.tina = createClient(props);
+      cms.registerApi("tina", createClient(props));
     }
     const setupMedia = async () => {
+      var _a;
       if (props.mediaStore) {
-        cms.media.store = new (await props.mediaStore)(cms.api.tina);
+        if ((_a = props.mediaStore.prototype) == null ? void 0 : _a.persist) {
+          cms.media.store = new props.mediaStore(cms.api.tina);
+        } else {
+          const MediaClass = await props.mediaStore();
+          cms.media.store = new MediaClass(cms.api.tina);
+        }
       }
     };
     const handleListBranches = async () => {
       const { owner, repo } = props;
       const branches = await cms.api.tina.listBranches({ owner, repo });
-      return branches.map((branch) => branch.name);
+      if (!Array.isArray(branches)) {
+        return [];
+      }
+      return branches;
     };
     const handleCreateBranch = async (data) => {
       const newBranch = await cms.api.tina.createBranch(data);
       return newBranch;
     };
     setupMedia();
-    const branchingEnabled = cms.flags.get("branch-switcher");
+    const [branchingEnabled, setBranchingEnabled] = React__default["default"].useState(() => cms.flags.get("branch-switcher"));
+    React__default["default"].useEffect(() => {
+      cms.events.subscribe("flag:set", ({ key, value }) => {
+        if (key === "branch-switcher") {
+          setBranchingEnabled(value);
+        }
+      });
+    }, [cms.events]);
     React__default["default"].useEffect(() => {
       let branchSwitcher;
       if (branchingEnabled) {
         branchSwitcher = new toolkit.BranchSwitcherPlugin({
-          cms,
-          owner: props.owner,
-          repo: props.repo,
-          baseBranch: props.branch || "main",
-          currentBranch: props.branch || "main",
           listBranches: handleListBranches,
-          createBranch: handleCreateBranch,
-          setCurrentBranch: () => console.log(props.branch)
+          createBranch: handleCreateBranch
         });
         cms.plugins.add(branchSwitcher);
       }
       return () => {
-        if (!branchingEnabled) {
-          if (branchSwitcher) {
-            cms.plugins.remove(branchSwitcher);
-          }
+        if (branchingEnabled && branchSwitcher) {
+          cms.plugins.remove(branchSwitcher);
         }
       };
     }, [branchingEnabled, props.branch]);
-    if (props.cmsCallback) {
-      props.cmsCallback(cms);
-    }
-    return /* @__PURE__ */ React__default["default"].createElement(toolkit.TinaProvider, {
+    React__default["default"].useEffect(() => {
+      if (props.cmsCallback) {
+        props.cmsCallback(cms);
+      }
+    }, []);
+    return /* @__PURE__ */ React__default["default"].createElement(toolkit.BranchDataProvider, {
+      currentBranch,
+      setCurrentBranch: (b) => {
+        setCurrentBranch(b);
+      }
+    }, /* @__PURE__ */ React__default["default"].createElement(toolkit.TinaProvider, {
       cms
     }, /* @__PURE__ */ React__default["default"].createElement(AuthWallInner, __spreadProps(__spreadValues({}, props), {
       cms
-    })));
+    }))));
   };
   const TinaCloudAuthWall = TinaCloudProvider;
+  var DefaultContext = {
+    color: void 0,
+    size: void 0,
+    className: void 0,
+    style: void 0,
+    attr: void 0
+  };
+  var IconContext = React__default["default"].createContext && React__default["default"].createContext(DefaultContext);
+  var __assign = function() {
+    __assign = Object.assign || function(t) {
+      for (var s, i = 1, n = arguments.length; i < n; i++) {
+        s = arguments[i];
+        for (var p in s)
+          if (Object.prototype.hasOwnProperty.call(s, p))
+            t[p] = s[p];
+      }
+      return t;
+    };
+    return __assign.apply(this, arguments);
+  };
+  var __rest = function(s, e) {
+    var t = {};
+    for (var p in s)
+      if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+      for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+        if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+          t[p[i]] = s[p[i]];
+      }
+    return t;
+  };
+  function Tree2Element(tree) {
+    return tree && tree.map(function(node, i) {
+      return React__default["default"].createElement(node.tag, __assign({
+        key: i
+      }, node.attr), Tree2Element(node.child));
+    });
+  }
+  function GenIcon(data) {
+    return function(props) {
+      return React__default["default"].createElement(IconBase, __assign({
+        attr: __assign({}, data.attr)
+      }, props), Tree2Element(data.child));
+    };
+  }
+  function IconBase(props) {
+    var elem = function(conf) {
+      var attr = props.attr, size = props.size, title = props.title, svgProps = __rest(props, ["attr", "size", "title"]);
+      var computedSize = size || conf.size || "1em";
+      var className;
+      if (conf.className)
+        className = conf.className;
+      if (props.className)
+        className = (className ? className + " " : "") + props.className;
+      return React__default["default"].createElement("svg", __assign({
+        stroke: "currentColor",
+        fill: "currentColor",
+        strokeWidth: "0"
+      }, conf.attr, attr, svgProps, {
+        className,
+        style: __assign(__assign({
+          color: props.color || conf.color
+        }, conf.style), props.style),
+        height: computedSize,
+        width: computedSize,
+        xmlns: "http://www.w3.org/2000/svg"
+      }), title && React__default["default"].createElement("title", null, title), props.children);
+    };
+    return IconContext !== void 0 ? React__default["default"].createElement(IconContext.Consumer, null, function(conf) {
+      return elem(conf);
+    }) : elem(DefaultContext);
+  }
+  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 BiExit(props) {
+    return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "M19.002 3h-14c-1.103 0-2 .897-2 2v4h2V5h14v14h-14v-4h-2v4c0 1.103.897 2 2 2h14c1.103 0 2-.897 2-2V5c0-1.103-.898-2-2-2z" } }, { "tag": "path", "attr": { "d": "m11 16 5-4-5-4v3.001H3v2h8z" } }] })(props);
+  }
+  function BiLinkExternal(props) {
+    return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "m13 3 3.293 3.293-7 7 1.414 1.414 7-7L21 11V3z" } }, { "tag": "path", "attr": { "d": "M19 19H5V5h7l-2-2H5c-1.103 0-2 .897-2 2v14c0 1.103.897 2 2 2h14c1.103 0 2-.897 2-2v-5l-2-2v7z" } }] })(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);
+  }
   function useGraphqlForms({
     query,
     variables,
@@ -828,7 +926,7 @@ mutation addPendingDocumentMutation(
     const [pendingReset, setPendingReset] = React__default["default"].useState(null);
     const [isLoading, setIsLoading] = React__default["default"].useState(true);
     const [newUpdate, setNewUpdate] = React__default["default"].useState(null);
-    React__default["default"].useState([]);
+    const { currentBranch } = toolkit.useBranchData();
     const updateData = async () => {
       var _a;
       if (newUpdate) {
@@ -877,12 +975,15 @@ mutation addPendingDocumentMutation(
       }
     }, [pendingReset]);
     React__default["default"].useEffect(() => {
+      const formIds = [];
       setIsLoading(true);
       cms.api.tina.requestWithForm(query, { variables }).then((payload) => {
+        cms.plugins.remove(new toolkit.FormMetaPlugin({ name: "tina-admin-link" }));
         setData(payload);
         setInitialData(payload);
         setIsLoading(false);
         Object.entries(payload).map(([queryName, result]) => {
+          formIds.push(queryName);
           const canBeFormified = safeAssertShape(result, (yup2) => yup2.object({
             values: yup2.object().required(),
             form: yup2.object().required()
@@ -894,6 +995,32 @@ mutation addPendingDocumentMutation(
             values: yup2.object().required(),
             form: yup2.object().required()
           }), `Unable to build form shape for fields at ${queryName}`);
+          if (cms.flags.get("tina-admin")) {
+            const TinaAdminLink = new toolkit.FormMetaPlugin({
+              name: "tina-admin-link",
+              Component: () => /* @__PURE__ */ React__default["default"].createElement("a", {
+                href: `/admin/collections/${result._internalSys.collection.name}/${result._internalSys.filename}`,
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  padding: "10px 20px",
+                  borderTop: "1px solid var(--tina-color-grey-2)",
+                  textTransform: "uppercase",
+                  fontSize: "11px",
+                  fontWeight: 500,
+                  background: "var(--tina-color-grey-0)"
+                }
+              }, /* @__PURE__ */ React__default["default"].createElement(BiLinkExternal, {
+                style: {
+                  height: "1.25em",
+                  width: "auto",
+                  opacity: "0.8",
+                  marginRight: "8px"
+                }
+              }), " ", "Edit in Tina Admin")
+            });
+            cms.plugins.add(TinaAdminLink);
+          }
           const formConfig = {
             id: queryName,
             label: result.form.label,
@@ -1002,7 +1129,15 @@ mutation addPendingDocumentMutation(
         console.error(e);
         setIsLoading(false);
       });
-    }, [queryString, JSON.stringify(variables)]);
+      return () => {
+        formIds.forEach((name) => {
+          const formPlugin = cms.forms.find(name);
+          if (formPlugin) {
+            cms.forms.remove(formPlugin);
+          }
+        });
+      };
+    }, [queryString, JSON.stringify(variables), currentBranch]);
     return [data, isLoading];
   }
   const transformDocumentIntoMutationRequestPayload = (document2, instructions) => {
@@ -1061,9 +1196,9 @@ mutation addPendingDocumentMutation(
       cms.forms.add(form);
       return form;
     };
-    const createGlobalForm = (formConfig) => {
+    const createGlobalForm = (formConfig, options) => {
       const form = new toolkit.Form(formConfig);
-      cms.plugins.add(new toolkit.GlobalFormPlugin(form));
+      cms.plugins.add(new toolkit.GlobalFormPlugin(form, options == null ? void 0 : options.icon, options == null ? void 0 : options.layout));
       return form;
     };
     return { createForm, createGlobalForm };
@@ -1475,81 +1610,12 @@ This will work when developing locally but NOT when deployed to production.
     }
     return client.request(query, { variables });
   };
-  function gql(strings) {
-    return strings[0];
-  }
-  var DefaultContext = {
-    color: void 0,
-    size: void 0,
-    className: void 0,
-    style: void 0,
-    attr: void 0
-  };
-  var IconContext = React__default["default"].createContext && React__default["default"].createContext(DefaultContext);
-  var __assign = function() {
-    __assign = Object.assign || function(t) {
-      for (var s, i = 1, n = arguments.length; i < n; i++) {
-        s = arguments[i];
-        for (var p in s)
-          if (Object.prototype.hasOwnProperty.call(s, p))
-            t[p] = s[p];
-      }
-      return t;
-    };
-    return __assign.apply(this, arguments);
-  };
-  var __rest = function(s, e) {
-    var t = {};
-    for (var p in s)
-      if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-      for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-        if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-          t[p[i]] = s[p[i]];
-      }
-    return t;
-  };
-  function Tree2Element(tree) {
-    return tree && tree.map(function(node, i) {
-      return React__default["default"].createElement(node.tag, __assign({
-        key: i
-      }, node.attr), Tree2Element(node.child));
+  function gql(strings, ...args) {
+    let str = "";
+    strings.forEach((string, i) => {
+      str += string + (args[i] || "");
     });
-  }
-  function GenIcon(data) {
-    return function(props) {
-      return React__default["default"].createElement(IconBase, __assign({
-        attr: __assign({}, data.attr)
-      }, props), Tree2Element(data.child));
-    };
-  }
-  function IconBase(props) {
-    var elem = function(conf) {
-      var attr = props.attr, size = props.size, title = props.title, svgProps = __rest(props, ["attr", "size", "title"]);
-      var computedSize = size || conf.size || "1em";
-      var className;
-      if (conf.className)
-        className = conf.className;
-      if (props.className)
-        className = (className ? className + " " : "") + props.className;
-      return React__default["default"].createElement("svg", __assign({
-        stroke: "currentColor",
-        fill: "currentColor",
-        strokeWidth: "0"
-      }, conf.attr, attr, svgProps, {
-        className,
-        style: __assign(__assign({
-          color: props.color || conf.color
-        }, conf.style), props.style),
-        height: computedSize,
-        width: computedSize,
-        xmlns: "http://www.w3.org/2000/svg"
-      }), title && React__default["default"].createElement("title", null, title), props.children);
-    };
-    return IconContext !== void 0 ? React__default["default"].createElement(IconContext.Consumer, null, function(conf) {
-      return elem(conf);
-    }) : elem(DefaultContext);
+    return str;
   }
   function ImFilesEmpty(props) {
     return GenIcon({ "tag": "svg", "attr": { "version": "1.1", "viewBox": "0 0 16 16" }, "child": [{ "tag": "path", "attr": { "d": "M14.341 5.579c-0.347-0.473-0.831-1.027-1.362-1.558s-1.085-1.015-1.558-1.362c-0.806-0.591-1.197-0.659-1.421-0.659h-5.75c-0.689 0-1.25 0.561-1.25 1.25v11.5c0 0.689 0.561 1.25 1.25 1.25h9.5c0.689 0 1.25-0.561 1.25-1.25v-7.75c0-0.224-0.068-0.615-0.659-1.421zM12.271 4.729c0.48 0.48 0.856 0.912 1.134 1.271h-2.406v-2.405c0.359 0.278 0.792 0.654 1.271 1.134v0zM14 14.75c0 0.136-0.114 0.25-0.25 0.25h-9.5c-0.136 0-0.25-0.114-0.25-0.25v-11.5c0-0.135 0.114-0.25 0.25-0.25 0 0 5.749-0 5.75 0v3.5c0 0.276 0.224 0.5 0.5 0.5h3.5v7.75z" } }, { "tag": "path", "attr": { "d": "M9.421 0.659c-0.806-0.591-1.197-0.659-1.421-0.659h-5.75c-0.689 0-1.25 0.561-1.25 1.25v11.5c0 0.604 0.43 1.109 1 1.225v-12.725c0-0.135 0.115-0.25 0.25-0.25h7.607c-0.151-0.124-0.297-0.238-0.437-0.341z" } }] })(props);
@@ -1596,15 +1662,6 @@ This will work when developing locally but NOT when deployed to production.
       return null;
     return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, children(collections));
   };
-  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 BiExit(props) {
-    return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "M19.002 3h-14c-1.103 0-2 .897-2 2v4h2V5h14v14h-14v-4h-2v4c0 1.103.897 2 2 2h14c1.103 0 2-.897 2-2V5c0-1.103-.898-2-2-2z" } }, { "tag": "path", "attr": { "d": "m11 16 5-4-5-4v3.001H3v2h8z" } }] })(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);
-  }
   function MdOutlineArrowBack(props) {
     return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "fill": "none", "d": "M0 0h24v24H0V0z" } }, { "tag": "path", "attr": { "d": "M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" } }] })(props);
   }
@@ -1677,12 +1734,14 @@ This will work when developing locally but NOT when deployed to production.
               name
               label
               format
+              templates
               documents @include(if: $includeDocuments) {
                 totalCount
                 edges {
                   node {
                     ... on Document {
                       sys {
+                        template
                         breadcrumbs
                         path
                         basename
@@ -1714,59 +1773,119 @@ 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));
   };
+  const TemplateMenu = ({ templates }) => {
+    return /* @__PURE__ */ React__default["default"].createElement(react.Menu, {
+      as: "div",
+      className: "relative inline-block text-left"
+    }, ({ open }) => /* @__PURE__ */ React__default["default"].createElement("div", null, /* @__PURE__ */ React__default["default"].createElement("div", null, /* @__PURE__ */ React__default["default"].createElement(react.Menu.Button, {
+      className: "inline-flex items-center px-8 py-2.5 shadow-sm border border-transparent text-sm leading-4 font-medium rounded-full text-white hover:opacity-80 focus:outline-none focus:shadow-outline-blue  transition duration-150 ease-out",
+      style: { background: "#0084FF" }
+    }, "Create New", /* @__PURE__ */ React__default["default"].createElement("svg", {
+      width: "20",
+      height: "20",
+      viewBox: "0 0 20 20",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      className: `ml-1 flex-0 inline-block opacity-50 group-hover:opacity-80 transition-all duration-300 ease-in-out transform ${open ? `rotate-90 opacity-100` : `rotate-0`}`
+    }, /* @__PURE__ */ React__default["default"].createElement("g", {
+      opacity: "1.0"
+    }, /* @__PURE__ */ React__default["default"].createElement("path", {
+      d: "M7.91675 13.8086L9.16675 15.0586L14.2253 10L9.16675 4.9414L7.91675 6.1914L11.7253 10L7.91675 13.8086Z",
+      fill: "currentColor"
+    }))))), /* @__PURE__ */ React__default["default"].createElement(react.Transition, {
+      as: React.Fragment,
+      enter: "transition ease-out duration-100",
+      enterFrom: "transform opacity-0 scale-95",
+      enterTo: "transform opacity-100 scale-100",
+      leave: "transition ease-in duration-75",
+      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"
+    }, /* @__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: `${location.pathname}/${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"}`
+    }, template.label))))))));
+  };
   const CollectionListPage = () => {
-    const location = reactRouterDom.useLocation();
+    const location2 = reactRouterDom.useLocation();
     const { collectionName } = reactRouterDom.useParams();
-    return /* @__PURE__ */ React__default["default"].createElement(GetCMS, null, (cms) => /* @__PURE__ */ React__default["default"].createElement(GetCollection, {
-      cms,
-      collectionName,
-      includeDocuments: true
-    }, (collection) => {
-      const totalCount = collection.documents.totalCount;
-      const documents = collection.documents.edges;
-      return /* @__PURE__ */ React__default["default"].createElement("div", {
-        className: "px-6 py-14 h-screen overflow-y-auto flex justify-center"
-      }, /* @__PURE__ */ React__default["default"].createElement("div", {
-        className: "max-w-screen-md w-full"
-      }, /* @__PURE__ */ React__default["default"].createElement("div", {
-        className: "w-full flex justify-between items-end"
-      }, /* @__PURE__ */ React__default["default"].createElement("h3", {
-        className: "text-3xl"
-      }, collection.label), /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Link, {
-        to: `${location.pathname}/new`,
-        className: "inline-flex items-center px-8 py-3 shadow-sm border border-transparent text-sm leading-4 font-medium rounded-full text-white hover:opacity-80 focus:outline-none focus:shadow-outline-blue  transition duration-150 ease-out",
-        style: { background: "#0084FF" }
-      }, "Create New")), totalCount > 0 && /* @__PURE__ */ React__default["default"].createElement("div", {
-        className: "mt-8 shadow overflow-hidden border-b border-gray-200 sm:rounded-lg"
-      }, /* @__PURE__ */ React__default["default"].createElement("table", {
-        className: "min-w-full"
-      }, /* @__PURE__ */ React__default["default"].createElement("tbody", {
-        className: "bg-white divide-y divide-gray-150"
-      }, documents.map((document2) => /* @__PURE__ */ React__default["default"].createElement("tr", {
-        key: document2.node.sys.relativePath
-      }, /* @__PURE__ */ React__default["default"].createElement("td", {
-        className: "px-6 py-2 whitespace-nowrap"
-      }, /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Link, {
-        to: `${location.pathname}/${document2.node.sys.filename}`,
-        className: "text-blue-600 hover:text-blue-400 flex items-center gap-3"
-      }, /* @__PURE__ */ React__default["default"].createElement(BiEdit, {
-        className: "inline-block h-6 w-auto opacity-70"
-      }), " ", /* @__PURE__ */ React__default["default"].createElement("span", null, /* @__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 whitespace-nowrap"
-      }, document2.node.sys.filename)))), /* @__PURE__ */ React__default["default"].createElement("td", {
-        className: "px-6 py-4 whitespace-nowrap"
-      }, /* @__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"
-      }, document2.node.sys.extension)))))))));
-    }));
+    return /* @__PURE__ */ React__default["default"].createElement(GetCMS, null, (cms) => {
+      const plugins = cms.plugins.all("tina-admin");
+      const routeMapping = plugins.find(({ name }) => name === "route-mapping");
+      return /* @__PURE__ */ React__default["default"].createElement(GetCollection, {
+        cms,
+        collectionName,
+        includeDocuments: true
+      }, (collection) => {
+        const totalCount = collection.documents.totalCount;
+        const documents = collection.documents.edges;
+        return /* @__PURE__ */ React__default["default"].createElement("div", {
+          className: "px-6 py-14 h-screen overflow-y-auto flex justify-center"
+        }, /* @__PURE__ */ React__default["default"].createElement("div", {
+          className: "max-w-screen-md w-full"
+        }, /* @__PURE__ */ React__default["default"].createElement("div", {
+          className: "w-full flex justify-between items-end"
+        }, /* @__PURE__ */ React__default["default"].createElement("h3", {
+          className: "text-3xl"
+        }, collection.label), !collection.templates && /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Link, {
+          to: `${location2.pathname}/new`,
+          className: "inline-flex items-center px-8 py-3 shadow-sm border border-transparent text-sm leading-4 font-medium rounded-full text-white hover:opacity-80 focus:outline-none focus:shadow-outline-blue  transition duration-150 ease-out",
+          style: { background: "#0084FF" }
+        }, "Create New"), collection.templates && /* @__PURE__ */ React__default["default"].createElement(TemplateMenu, {
+          templates: collection.templates
+        })), totalCount > 0 && /* @__PURE__ */ React__default["default"].createElement("div", {
+          className: "mt-8 shadow overflow-hidden border-b border-gray-200 sm:rounded-lg"
+        }, /* @__PURE__ */ React__default["default"].createElement("table", {
+          className: "min-w-full"
+        }, /* @__PURE__ */ React__default["default"].createElement("tbody", {
+          className: "bg-white divide-y divide-gray-150"
+        }, documents.map((document2) => {
+          const livesiteRoute = routeMapping ? routeMapping.mapper(collection, document2.node) : void 0;
+          return /* @__PURE__ */ React__default["default"].createElement("tr", {
+            key: document2.node.sys.relativePath
+          }, /* @__PURE__ */ React__default["default"].createElement("td", {
+            className: "px-5 py-3 whitespace-nowrap"
+          }, /* @__PURE__ */ React__default["default"].createElement("span", {
+            className: "block text-xs mb-0.5 text-gray-400 uppercase"
+          }, "Filename"), /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Link, {
+            to: `${location2.pathname}/${document2.node.sys.filename}`,
+            className: "h-5 leading-5 block"
+          }, /* @__PURE__ */ React__default["default"].createElement("span", {
+            className: "leading-5 font-medium text-base overflow-ellipsis overflow-hidden whitespace-nowrap text-gray-700"
+          }, document2.node.sys.filename), /* @__PURE__ */ React__default["default"].createElement("span", {
+            className: "leading-5 text-base font-medium text-gray-300"
+          }, document2.node.sys.extension))), /* @__PURE__ */ React__default["default"].createElement("td", {
+            className: "px-5 py-3 whitespace-nowrap"
+          }, /* @__PURE__ */ React__default["default"].createElement("span", {
+            className: "block text-xs mb-0.5 text-gray-400 uppercase"
+          }, "Template"), /* @__PURE__ */ React__default["default"].createElement("span", {
+            className: "h-5 block leading-5 font-regular text-base overflow-ellipsis overflow-hidden whitespace-nowrap text-gray-500"
+          }, document2.node.sys.template)), /* @__PURE__ */ React__default["default"].createElement("td", {
+            className: "px-5 py-3 whitespace-nowrap flex gap-3 items-center justify-end"
+          }, livesiteRoute && /* @__PURE__ */ React__default["default"].createElement("a", {
+            href: livesiteRoute,
+            className: "flex gap-1.5 items-center px-4 py-1.5 rounded-full transition-all ease-out duration-150 text-gray-500 hover:text-blue-500"
+          }, /* @__PURE__ */ React__default["default"].createElement(BiLinkExternal, {
+            className: "inline-block h-5 w-auto opacity-70"
+          }), " ", "View"), /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Link, {
+            to: `${location2.pathname}/${document2.node.sys.filename}`,
+            className: "flex gap-1.5 items-center px-4 py-1.5 rounded-full border border-gray-150 transition-all ease-out duration-150 text-gray-700  hover:bg-gray-50 hover:text-blue-500"
+          }, /* @__PURE__ */ React__default["default"].createElement(BiEdit, {
+            className: "inline-block h-5 w-auto opacity-70"
+          }), " ", "Edit")));
+        }))))));
+      });
+    });
   };
-  const useGetDocumentFields = (cms, collectionName) => {
+  const useGetDocumentFields = (cms, collectionName, templateName) => {
     const [info, setInfo] = React.useState({
       collection: void 0,
+      template: void 0,
       fields: void 0,
       mutationInfo: void 0
     });
@@ -1775,10 +1894,18 @@ This will work when developing locally but NOT when deployed to production.
         const response = await cms.api.tina.request(`query { getDocumentFields }`, {});
         const documentFields = response.getDocumentFields;
         const collection = documentFields[collectionName].collection;
-        const fields = documentFields[collectionName].fields;
         const mutationInfo = documentFields[collectionName].mutationInfo;
+        let fields = void 0;
+        let template = void 0;
+        if (templateName && documentFields[collectionName].templates && documentFields[collectionName].templates[templateName]) {
+          template = documentFields[collectionName].templates[templateName].template;
+          fields = documentFields[collectionName].templates[templateName].fields;
+        } else {
+          fields = documentFields[collectionName].fields;
+        }
         setInfo({
           collection,
+          template,
           fields,
           mutationInfo
         });
@@ -1790,20 +1917,21 @@ This will work when developing locally but NOT when deployed to production.
   const GetDocumentFields = ({
     cms,
     collectionName,
+    templateName,
     children
   }) => {
-    const { collection, fields, mutationInfo } = useGetDocumentFields(cms, collectionName);
-    if (!collection || !fields || !mutationInfo) {
+    const { collection, template, fields, mutationInfo } = useGetDocumentFields(cms, collectionName, templateName);
+    if (!collection) {
       return null;
     }
-    return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, children(collection, fields, mutationInfo));
+    return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, children({ collection, template, fields, mutationInfo }));
   };
-  const createDocument = async (cms, collection, mutationInfo, values) => {
+  const createDocument = async (cms, collection, template, mutationInfo, values) => {
     const _a = values, { relativePath } = _a, leftover = __objRest(_a, ["relativePath"]);
     const { includeCollection, includeTemplate } = mutationInfo;
-    const params = transformDocumentIntoMutationRequestPayload(__spreadValues({
+    const params = transformDocumentIntoMutationRequestPayload(__spreadValues(__spreadValues({
       _collection: collection.name
-    }, leftover), {
+    }, template && { _template: template.name }), leftover), {
       includeCollection,
       includeTemplate
     });
@@ -1822,12 +1950,13 @@ This will work when developing locally but NOT when deployed to production.
     });
   };
   const CollectionCreatePage = () => {
-    const { collectionName } = reactRouterDom.useParams();
+    const { collectionName, templateName } = reactRouterDom.useParams();
     const history = reactRouterDom.useHistory();
     return /* @__PURE__ */ React__default["default"].createElement(GetCMS, null, (cms) => /* @__PURE__ */ React__default["default"].createElement(GetDocumentFields, {
       cms,
-      collectionName
-    }, (collection, fields, mutationInfo) => {
+      collectionName,
+      templateName
+    }, ({ collection, template, fields, mutationInfo }) => {
       const form = new toolkit.Form({
         id: "create-form",
         label: "form",
@@ -1842,16 +1971,17 @@ This will work when developing locally but NOT when deployed to production.
           ...fields
         ],
         onSubmit: async (values) => {
-          await createDocument(cms, collection, mutationInfo, values);
+          await createDocument(cms, collection, template, mutationInfo, values);
           history.push(`/admin/collections/${collection.name}`);
         }
       });
+      const formLabel = template ? `${collection.label} - Create New ${template.label}` : `${collection.label} - Create New`;
       return /* @__PURE__ */ React__default["default"].createElement("div", {
         className: "w-full h-screen"
       }, /* @__PURE__ */ React__default["default"].createElement("div", {
         className: "flex flex-col items-center w-full flex-1"
       }, /* @__PURE__ */ React__default["default"].createElement(toolkit.FullscreenFormBuilder, {
-        label: collection.label + " - Create New",
+        label: formLabel,
         form
       })));
     }));
@@ -1887,15 +2017,15 @@ This will work when developing locally but NOT when deployed to production.
     }
     return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, children(document2));
   };
-  const updateDocument = async (cms, collection, document2, relativePath, values) => {
-    const { includeCollection, includeTemplate } = document2.form.mutationInfo;
+  const updateDocument = async (cms, relativePath, collection, mutationInfo, values) => {
+    const { includeCollection, includeTemplate } = mutationInfo;
     const params = transformDocumentIntoMutationRequestPayload(values, {
       includeCollection,
       includeTemplate
     });
     await cms.api.tina.request(`mutation($collection: String!, $relativePath: String!, $params: DocumentMutation!) {
-      updateDocument(
-        collection: $collection, 
+      updateDocument( 
+        collection: $collection,
         relativePath: $relativePath, 
         params: $params
       ){__typename}
@@ -1910,11 +2040,10 @@ This will work when developing locally but NOT when deployed to production.
   const CollectionUpdatePage = () => {
     const { collectionName, filename } = reactRouterDom.useParams();
     const history = reactRouterDom.useHistory();
-    return /* @__PURE__ */ React__default["default"].createElement(GetCMS, null, (cms) => /* @__PURE__ */ React__default["default"].createElement(GetCollection, {
+    return /* @__PURE__ */ React__default["default"].createElement(GetCMS, null, (cms) => /* @__PURE__ */ React__default["default"].createElement(GetDocumentFields, {
       cms,
-      collectionName,
-      includeDocuments: false
-    }, (collection) => {
+      collectionName
+    }, ({ collection, mutationInfo }) => {
       const relativePath = `${filename}.${collection.format}`;
       return /* @__PURE__ */ React__default["default"].createElement(GetDocument, {
         cms,
@@ -1927,7 +2056,7 @@ This will work when developing locally but NOT when deployed to production.
           fields: document2.form.fields,
           initialValues: document2.values,
           onSubmit: async (values) => {
-            await updateDocument(cms, collection, document2, relativePath, values);
+            await updateDocument(cms, relativePath, collection, mutationInfo, values);
             history.push(`/admin/collections/${collection.name}`);
           }
         });
@@ -2047,6 +2176,8 @@ This will work when developing locally but NOT when deployed to production.
       className: "flex-1"
     }, /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Switch, null, /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Route, {
       path: `/admin/collections/:collectionName/new`
+    }, /* @__PURE__ */ React__default["default"].createElement(CollectionCreatePage, null)), /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Route, {
+      path: `/admin/collections/:collectionName/:templateName/new`
     }, /* @__PURE__ */ React__default["default"].createElement(CollectionCreatePage, null)), /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Route, {
       path: `/admin/collections/:collectionName/:filename`
     }, /* @__PURE__ */ React__default["default"].createElement(CollectionUpdatePage, null)), /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Route, {
@@ -2055,10 +2186,18 @@ This will work when developing locally but NOT when deployed to production.
       path: `/admin`
     }, /* @__PURE__ */ React__default["default"].createElement(DashboardPage, null)))))))));
   };
+  class RouteMappingPlugin {
+    constructor(mapper) {
+      this.__type = "tina-admin";
+      this.name = "route-mapping";
+      this.mapper = mapper;
+    }
+  }
   exports2.AuthWallInner = AuthWallInner;
   exports2.Client = Client;
   exports2.DEFAULT_LOCAL_TINA_GQL_SERVER_URL = DEFAULT_LOCAL_TINA_GQL_SERVER_URL;
   exports2.LocalClient = LocalClient;
+  exports2.RouteMappingPlugin = RouteMappingPlugin;
   exports2.TinaAdmin = TinaAdmin;
   exports2.TinaCMSProvider2 = TinaCMSProvider2;
   exports2.TinaCloudAuthWall = TinaCloudAuthWall;