tinacms 0.57.1 → 0.58.0

package/dist/index.es.js

@@ -32,9 +32,9 @@ var __objRest = (source, exclude) => {
 import { TypeInfo, visit, visitWithTypeInfo, getNamedType, GraphQLObjectType, isLeafType, GraphQLUnionType, isScalarType, getIntrospectionQuery, buildClientSchema, print } from "graphql";
 import set from "lodash.set";
 import gql$1 from "graphql-tag";
-import { EventBus, StyleReset, Modal, ModalPopup, ModalHeader, ModalBody, ModalActions, Button, LoadingDots, TinaCMS, BranchSwitcherPlugin, TinaProvider, useCMS, Form, GlobalFormPlugin, FullscreenFormBuilder } from "@tinacms/toolkit";
+import { EventBus, StyleReset, Modal, ModalPopup, ModalHeader, ModalBody, ModalActions, Button, LoadingDots, TinaCMS, BranchSwitcherPlugin, TinaProvider, useCMS, FormMetaPlugin, Form, GlobalFormPlugin, FullscreenFormBuilder } from "@tinacms/toolkit";
 export * from "@tinacms/toolkit";
-import React, { useState, useCallback, useEffect } from "react";
+import React, { useState, useCallback, useEffect, Fragment } from "react";
 import styled from "styled-components";
 import * as yup from "yup";
 import { getIn, setIn } from "final-form";
@@ -746,8 +746,14 @@ const TinaCloudProvider = (props) => {
     cms.api.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 () => {
@@ -794,6 +800,91 @@ const TinaCloudProvider = (props) => {
   })));
 };
 const TinaCloudAuthWall = TinaCloudProvider;
+var DefaultContext = {
+  color: void 0,
+  size: void 0,
+  className: void 0,
+  style: void 0,
+  attr: void 0
+};
+var IconContext = React.createContext && React.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.createElement(node.tag, __assign({
+      key: i
+    }, node.attr), Tree2Element(node.child));
+  });
+}
+function GenIcon(data) {
+  return function(props) {
+    return React.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.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.createElement("title", null, title), props.children);
+  };
+  return IconContext !== void 0 ? React.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,
@@ -807,7 +898,6 @@ function useGraphqlForms({
   const [pendingReset, setPendingReset] = React.useState(null);
   const [isLoading, setIsLoading] = React.useState(true);
   const [newUpdate, setNewUpdate] = React.useState(null);
-  React.useState([]);
   const updateData = async () => {
     var _a;
     if (newUpdate) {
@@ -856,12 +946,15 @@ function useGraphqlForms({
     }
   }, [pendingReset]);
   React.useEffect(() => {
+    const formIds = [];
     setIsLoading(true);
     cms.api.tina.requestWithForm(query, { variables }).then((payload) => {
+      cms.plugins.remove(new 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()
@@ -873,6 +966,32 @@ function useGraphqlForms({
           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 FormMetaPlugin({
+            name: "tina-admin-link",
+            Component: () => /* @__PURE__ */ React.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.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,
@@ -981,6 +1100,14 @@ function useGraphqlForms({
       console.error(e);
       setIsLoading(false);
     });
+    return () => {
+      formIds.forEach((name) => {
+        const formPlugin = cms.forms.find(name);
+        if (formPlugin) {
+          cms.forms.remove(formPlugin);
+        }
+      });
+    };
   }, [queryString, JSON.stringify(variables)]);
   return [data, isLoading];
 }
@@ -1454,81 +1581,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.createContext && React.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.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.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.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.createElement("title", null, title), props.children);
-  };
-  return IconContext !== void 0 ? React.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);
@@ -1575,15 +1633,6 @@ const GetCollections = ({ cms, children }) => {
     return null;
   return /* @__PURE__ */ React.createElement(React.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);
 }
@@ -1656,12 +1705,14 @@ const useGetCollection = (cms, collectionName, includeDocuments = true) => {
               name
               label
               format
+              templates
               documents @include(if: $includeDocuments) {
                 totalCount
                 edges {
                   node {
                     ... on Document {
                       sys {
+                        template
                         breadcrumbs
                         path
                         basename
@@ -1693,59 +1744,119 @@ const GetCollection = ({
   }
   return /* @__PURE__ */ React.createElement(React.Fragment, null, children(collection));
 };
+const TemplateMenu = ({ templates }) => {
+  return /* @__PURE__ */ React.createElement(Menu, {
+    as: "div",
+    className: "relative inline-block text-left"
+  }, ({ open }) => /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(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.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.createElement("g", {
+    opacity: "1.0"
+  }, /* @__PURE__ */ React.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.createElement(Transition, {
+    as: 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.createElement(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.createElement("div", {
+    className: "py-1"
+  }, templates.map((template) => /* @__PURE__ */ React.createElement(Menu.Item, {
+    key: `${template.label}-${template.name}`
+  }, ({ active }) => /* @__PURE__ */ React.createElement(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 = useLocation();
+  const location2 = useLocation();
   const { collectionName } = useParams();
-  return /* @__PURE__ */ React.createElement(GetCMS, null, (cms) => /* @__PURE__ */ React.createElement(GetCollection, {
-    cms,
-    collectionName,
-    includeDocuments: true
-  }, (collection) => {
-    const totalCount = collection.documents.totalCount;
-    const documents = collection.documents.edges;
-    return /* @__PURE__ */ React.createElement("div", {
-      className: "px-6 py-14 h-screen overflow-y-auto flex justify-center"
-    }, /* @__PURE__ */ React.createElement("div", {
-      className: "max-w-screen-md w-full"
-    }, /* @__PURE__ */ React.createElement("div", {
-      className: "w-full flex justify-between items-end"
-    }, /* @__PURE__ */ React.createElement("h3", {
-      className: "text-3xl"
-    }, collection.label), /* @__PURE__ */ React.createElement(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.createElement("div", {
-      className: "mt-8 shadow overflow-hidden border-b border-gray-200 sm:rounded-lg"
-    }, /* @__PURE__ */ React.createElement("table", {
-      className: "min-w-full"
-    }, /* @__PURE__ */ React.createElement("tbody", {
-      className: "bg-white divide-y divide-gray-150"
-    }, documents.map((document2) => /* @__PURE__ */ React.createElement("tr", {
-      key: document2.node.sys.relativePath
-    }, /* @__PURE__ */ React.createElement("td", {
-      className: "px-6 py-2 whitespace-nowrap"
-    }, /* @__PURE__ */ React.createElement(Link, {
-      to: `${location.pathname}/${document2.node.sys.filename}`,
-      className: "text-blue-600 hover:text-blue-400 flex items-center gap-3"
-    }, /* @__PURE__ */ React.createElement(BiEdit, {
-      className: "inline-block h-6 w-auto opacity-70"
-    }), " ", /* @__PURE__ */ React.createElement("span", null, /* @__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 whitespace-nowrap"
-    }, document2.node.sys.filename)))), /* @__PURE__ */ React.createElement("td", {
-      className: "px-6 py-4 whitespace-nowrap"
-    }, /* @__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"
-    }, document2.node.sys.extension)))))))));
-  }));
+  return /* @__PURE__ */ React.createElement(GetCMS, null, (cms) => {
+    const plugins = cms.plugins.all("tina-admin");
+    const routeMapping = plugins.find(({ name }) => name === "route-mapping");
+    return /* @__PURE__ */ React.createElement(GetCollection, {
+      cms,
+      collectionName,
+      includeDocuments: true
+    }, (collection) => {
+      const totalCount = collection.documents.totalCount;
+      const documents = collection.documents.edges;
+      return /* @__PURE__ */ React.createElement("div", {
+        className: "px-6 py-14 h-screen overflow-y-auto flex justify-center"
+      }, /* @__PURE__ */ React.createElement("div", {
+        className: "max-w-screen-md w-full"
+      }, /* @__PURE__ */ React.createElement("div", {
+        className: "w-full flex justify-between items-end"
+      }, /* @__PURE__ */ React.createElement("h3", {
+        className: "text-3xl"
+      }, collection.label), !collection.templates && /* @__PURE__ */ React.createElement(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.createElement(TemplateMenu, {
+        templates: collection.templates
+      })), totalCount > 0 && /* @__PURE__ */ React.createElement("div", {
+        className: "mt-8 shadow overflow-hidden border-b border-gray-200 sm:rounded-lg"
+      }, /* @__PURE__ */ React.createElement("table", {
+        className: "min-w-full"
+      }, /* @__PURE__ */ React.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.createElement("tr", {
+          key: document2.node.sys.relativePath
+        }, /* @__PURE__ */ React.createElement("td", {
+          className: "px-5 py-3 whitespace-nowrap"
+        }, /* @__PURE__ */ React.createElement("span", {
+          className: "block text-xs mb-0.5 text-gray-400 uppercase"
+        }, "Filename"), /* @__PURE__ */ React.createElement(Link, {
+          to: `${location2.pathname}/${document2.node.sys.filename}`,
+          className: "h-5 leading-5 block"
+        }, /* @__PURE__ */ React.createElement("span", {
+          className: "leading-5 font-medium text-base overflow-ellipsis overflow-hidden whitespace-nowrap text-gray-700"
+        }, document2.node.sys.filename), /* @__PURE__ */ React.createElement("span", {
+          className: "leading-5 text-base font-medium text-gray-300"
+        }, document2.node.sys.extension))), /* @__PURE__ */ React.createElement("td", {
+          className: "px-5 py-3 whitespace-nowrap"
+        }, /* @__PURE__ */ React.createElement("span", {
+          className: "block text-xs mb-0.5 text-gray-400 uppercase"
+        }, "Template"), /* @__PURE__ */ React.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.createElement("td", {
+          className: "px-5 py-3 whitespace-nowrap flex gap-3 items-center justify-end"
+        }, livesiteRoute && /* @__PURE__ */ React.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.createElement(BiLinkExternal, {
+          className: "inline-block h-5 w-auto opacity-70"
+        }), " ", "View"), /* @__PURE__ */ React.createElement(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.createElement(BiEdit, {
+          className: "inline-block h-5 w-auto opacity-70"
+        }), " ", "Edit")));
+      }))))));
+    });
+  });
 };
-const useGetDocumentFields = (cms, collectionName) => {
+const useGetDocumentFields = (cms, collectionName, templateName) => {
   const [info, setInfo] = useState({
     collection: void 0,
+    template: void 0,
     fields: void 0,
     mutationInfo: void 0
   });
@@ -1754,10 +1865,18 @@ const useGetDocumentFields = (cms, collectionName) => {
       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
       });
@@ -1769,44 +1888,44 @@ const useGetDocumentFields = (cms, collectionName) => {
 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.createElement(React.Fragment, null, children(collection, fields, mutationInfo));
+  return /* @__PURE__ */ React.createElement(React.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
   });
-  await cms.api.tina.request(`mutation($collection: String!, $relativePath: String!, $params: DocumentMutation!) {
-      createDocument(
-        collection: $collection, 
+  await cms.api.tina.request(`mutation($relativePath: String!, $params: DocumentMutation!) {
+      createDocument( 
         relativePath: $relativePath, 
         params: $params
       ){__typename}
     }`, {
     variables: {
-      collection: collection.name,
       relativePath,
       params
     }
   });
 };
 const CollectionCreatePage = () => {
-  const { collectionName } = useParams();
+  const { collectionName, templateName } = useParams();
   const history = useHistory();
   return /* @__PURE__ */ React.createElement(GetCMS, null, (cms) => /* @__PURE__ */ React.createElement(GetDocumentFields, {
     cms,
-    collectionName
-  }, (collection, fields, mutationInfo) => {
+    collectionName,
+    templateName
+  }, ({ collection, template, fields, mutationInfo }) => {
     const form = new Form({
       id: "create-form",
       label: "form",
@@ -1821,16 +1940,17 @@ const CollectionCreatePage = () => {
         ...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.createElement("div", {
       className: "w-full h-screen"
     }, /* @__PURE__ */ React.createElement("div", {
       className: "flex flex-col items-center w-full flex-1"
     }, /* @__PURE__ */ React.createElement(FullscreenFormBuilder, {
-      label: collection.label + " - Create New",
+      label: formLabel,
       form
     })));
   }));
@@ -1866,21 +1986,19 @@ const GetDocument = ({
   }
   return /* @__PURE__ */ React.createElement(React.Fragment, null, children(document2));
 };
-const updateDocument = async (cms, collection, document2, relativePath, values) => {
-  const { includeCollection, includeTemplate } = document2.form.mutationInfo;
+const updateDocument = async (cms, relativePath, 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, 
+  await cms.api.tina.request(`mutation($relativePath: String!, $params: DocumentMutation!) {
+      updateDocument( 
         relativePath: $relativePath, 
         params: $params
       ){__typename}
     }`, {
     variables: {
-      collection: collection.name,
       relativePath,
       params
     }
@@ -1889,11 +2007,10 @@ const updateDocument = async (cms, collection, document2, relativePath, values)
 const CollectionUpdatePage = () => {
   const { collectionName, filename } = useParams();
   const history = useHistory();
-  return /* @__PURE__ */ React.createElement(GetCMS, null, (cms) => /* @__PURE__ */ React.createElement(GetCollection, {
+  return /* @__PURE__ */ React.createElement(GetCMS, null, (cms) => /* @__PURE__ */ React.createElement(GetDocumentFields, {
     cms,
-    collectionName,
-    includeDocuments: false
-  }, (collection) => {
+    collectionName
+  }, ({ collection, mutationInfo }) => {
     const relativePath = `${filename}.${collection.format}`;
     return /* @__PURE__ */ React.createElement(GetDocument, {
       cms,
@@ -1906,7 +2023,7 @@ const CollectionUpdatePage = () => {
         fields: document2.form.fields,
         initialValues: document2.values,
         onSubmit: async (values) => {
-          await updateDocument(cms, collection, document2, relativePath, values);
+          await updateDocument(cms, relativePath, mutationInfo, values);
           history.push(`/admin/collections/${collection.name}`);
         }
       });
@@ -2026,6 +2143,8 @@ const TinaAdmin = () => {
     className: "flex-1"
   }, /* @__PURE__ */ React.createElement(Switch, null, /* @__PURE__ */ React.createElement(Route, {
     path: `/admin/collections/:collectionName/new`
+  }, /* @__PURE__ */ React.createElement(CollectionCreatePage, null)), /* @__PURE__ */ React.createElement(Route, {
+    path: `/admin/collections/:collectionName/:templateName/new`
   }, /* @__PURE__ */ React.createElement(CollectionCreatePage, null)), /* @__PURE__ */ React.createElement(Route, {
     path: `/admin/collections/:collectionName/:filename`
   }, /* @__PURE__ */ React.createElement(CollectionUpdatePage, null)), /* @__PURE__ */ React.createElement(Route, {
@@ -2034,4 +2153,11 @@ const TinaAdmin = () => {
     path: `/admin`
   }, /* @__PURE__ */ React.createElement(DashboardPage, null)))))))));
 };
-export { AuthWallInner, Client, DEFAULT_LOCAL_TINA_GQL_SERVER_URL, LocalClient, TinaAdmin, TinaCMSProvider2, TinaCloudAuthWall, TinaCloudProvider, assertShape, createClient, TinaCMSProvider2 as default, getStaticPropsForTina, gql, safeAssertShape, staticRequest, useDocumentCreatorPlugin, useGraphqlForms, useTinaAuthRedirect };
+class RouteMappingPlugin {
+  constructor(mapper) {
+    this.__type = "tina-admin";
+    this.name = "route-mapping";
+    this.mapper = mapper;
+  }
+}
+export { AuthWallInner, Client, DEFAULT_LOCAL_TINA_GQL_SERVER_URL, LocalClient, RouteMappingPlugin, TinaAdmin, TinaCMSProvider2, TinaCloudAuthWall, TinaCloudProvider, assertShape, createClient, TinaCMSProvider2 as default, getStaticPropsForTina, gql, safeAssertShape, staticRequest, useDocumentCreatorPlugin, useGraphqlForms, useTinaAuthRedirect };