tinacms 0.57.4 → 0.59.1

package/dist/index.js

@@ -30,8 +30,8 @@ var __objRest = (source, exclude) => {
   return target;
 };
 (function(global, factory) {
-  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("graphql"), require("lodash.set"), require("graphql-tag"), require("@tinacms/toolkit"), require("react"), require("styled-components"), require("yup"), require("final-form"), require("react-router-dom"), require("@headlessui/react")) : typeof define === "function" && define.amd ? define(["exports", "graphql", "lodash.set", "graphql-tag", "@tinacms/toolkit", "react", "styled-components", "yup", "final-form", "react-router-dom", "@headlessui/react"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.tinacms = {}, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP));
-})(this, function(exports2, graphql, set, gql$1, toolkit, React, styled, yup, finalForm, reactRouterDom, react) {
+  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("graphql"), require("lodash.set"), require("graphql-tag"), require("@tinacms/toolkit"), require("react"), require("styled-components"), require("yup"), require("@tinacms/sharedctx"), require("final-form"), require("react-router-dom"), require("@headlessui/react")) : typeof define === "function" && define.amd ? define(["exports", "graphql", "lodash.set", "graphql-tag", "@tinacms/toolkit", "react", "styled-components", "yup", "@tinacms/sharedctx", "final-form", "react-router-dom", "@headlessui/react"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.tinacms = {}, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP));
+})(this, function(exports2, graphql, set, gql$1, toolkit, React, styled, yup, sharedctx, finalForm, reactRouterDom, react) {
   "use strict";
   function _interopDefaultLegacy(e) {
     return e && typeof e === "object" && "default" in e ? e : { "default": e };
@@ -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);
@@ -677,24 +673,6 @@ mutation addPendingDocumentMutation(
       return false;
     }
   }
-  const LOCALSTORAGEKEY = "tina.isEditing";
-  const isSSR = typeof window === "undefined";
-  const isEditing = () => {
-    if (!isSSR) {
-      const isEdit = window.localStorage.getItem(LOCALSTORAGEKEY);
-      return isEdit && isEdit === "true";
-    }
-    return false;
-  };
-  const setEditing = (isEditing2) => {
-    if (!isSSR) {
-      window.localStorage.setItem(LOCALSTORAGEKEY, isEditing2 ? "true" : "false");
-    }
-  };
-  React__default["default"].createContext({
-    edit: isEditing(),
-    setEdit: void 0
-  });
   function sleep(ms) {
     return new Promise((resolve) => setTimeout(resolve, ms));
   }
@@ -740,7 +718,7 @@ mutation addPendingDocumentMutation(
         ...otherModalActions,
         {
           action: async () => {
-            setEditing(false);
+            sharedctx.setEditing(false);
             window.location.reload();
           },
           name: "Close",
@@ -758,13 +736,15 @@ 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;
@@ -780,47 +760,144 @@ mutation addPendingDocumentMutation(
     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 BiLogOut(props) {
+    return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "M16 13v-2H7V8l-5 4 5 4v-3z" } }, { "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,
@@ -834,6 +911,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);
+    const { currentBranch } = toolkit.useBranchData();
     const updateData = async () => {
       var _a;
       if (newUpdate) {
@@ -885,6 +963,7 @@ mutation addPendingDocumentMutation(
       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);
@@ -901,6 +980,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,
@@ -1017,7 +1122,7 @@ mutation addPendingDocumentMutation(
           }
         });
       };
-    }, [queryString, JSON.stringify(variables)]);
+    }, [queryString, JSON.stringify(variables), currentBranch]);
     return [data, isLoading];
   }
   const transformDocumentIntoMutationRequestPayload = (document2, instructions) => {
@@ -1076,9 +1181,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 };
@@ -1490,87 +1595,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);
-  }
-  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);
-  }
-  function VscOpenPreview(props) {
-    return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 16 16", "fill": "currentColor" }, "child": [{ "tag": "path", "attr": { "fillRule": "evenodd", "clipRule": "evenodd", "d": "M3 1h11l1 1v5.3a3.21 3.21 0 0 0-1-.3V2H9v10.88L7.88 14H3l-1-1V2l1-1zm0 12h5V2H3v11zm10.379-4.998a2.53 2.53 0 0 0-1.19.348h-.03a2.51 2.51 0 0 0-.799 3.53L9 14.23l.71.71 2.35-2.36c.325.22.7.358 1.09.4a2.47 2.47 0 0 0 1.14-.13 2.51 2.51 0 0 0 1-.63 2.46 2.46 0 0 0 .58-1 2.63 2.63 0 0 0 .07-1.15 2.53 2.53 0 0 0-1.35-1.81 2.53 2.53 0 0 0-1.211-.258zm.24 3.992a1.5 1.5 0 0 1-.979-.244 1.55 1.55 0 0 1-.56-.68 1.49 1.49 0 0 1-.08-.86 1.49 1.49 0 0 1 1.18-1.18 1.49 1.49 0 0 1 .86.08c.276.117.512.311.68.56a1.5 1.5 0 0 1-1.1 2.324z" } }] })(props);
+    return str;
   }
   const Layout = ({ children }) => {
     return /* @__PURE__ */ React__default["default"].createElement("div", {
@@ -1586,14 +1616,12 @@ This will work when developing locally but NOT when deployed to production.
       }
     }, children);
   };
-  const GetCMS = ({ children }) => {
-    try {
-      const cms = toolkit.useCMS();
-      return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, children(cms));
-    } catch (e) {
-      return null;
-    }
-  };
+  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);
+  }
+  function VscOpenPreview(props) {
+    return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 16 16", "fill": "currentColor" }, "child": [{ "tag": "path", "attr": { "fillRule": "evenodd", "clipRule": "evenodd", "d": "M3 1h11l1 1v5.3a3.21 3.21 0 0 0-1-.3V2H9v10.88L7.88 14H3l-1-1V2l1-1zm0 12h5V2H3v11zm10.379-4.998a2.53 2.53 0 0 0-1.19.348h-.03a2.51 2.51 0 0 0-.799 3.53L9 14.23l.71.71 2.35-2.36c.325.22.7.358 1.09.4a2.47 2.47 0 0 0 1.14-.13 2.51 2.51 0 0 0 1-.63 2.46 2.46 0 0 0 .58-1 2.63 2.63 0 0 0 .07-1.15 2.53 2.53 0 0 0-1.35-1.81 2.53 2.53 0 0 0-1.211-.258zm.24 3.992a1.5 1.5 0 0 1-.979-.244 1.55 1.55 0 0 1-.56-.68 1.49 1.49 0 0 1-.08-.86 1.49 1.49 0 0 1 1.18-1.18 1.49 1.49 0 0 1 .86.08c.276.117.512.311.68.56a1.5 1.5 0 0 1-1.1 2.324z" } }] })(props);
+  }
   const useGetCollections = (cms) => {
     const [collections, setCollections] = React.useState([]);
     React.useEffect(() => {
@@ -1611,23 +1639,97 @@ 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);
-  }
+  const Sidebar = ({ cms }) => {
+    const { setEdit } = sharedctx.useEditState();
+    const logout2 = () => setEdit(false);
+    return /* @__PURE__ */ React__default["default"].createElement(GetCollections, {
+      cms
+    }, (collections) => /* @__PURE__ */ React__default["default"].createElement("div", {
+      className: "flex flex-col w-80 lg:w-96 flex-shrink-0 bg-gradient-to-b from-white to-gray-50 border-r border-gray-200"
+    }, /* @__PURE__ */ React__default["default"].createElement("div", {
+      className: "border-b border-gray-200"
+    }, /* @__PURE__ */ React__default["default"].createElement(react.Menu, {
+      as: "div",
+      className: "relative block"
+    }, ({ open }) => /* @__PURE__ */ React__default["default"].createElement("div", null, /* @__PURE__ */ React__default["default"].createElement(react.Menu.Button, {
+      className: `group w-full px-6 py-4 flex justify-between items-center transition-colors duration-150 ease-out ${open ? `bg-gray-50` : `bg-transparent`}`
+    }, /* @__PURE__ */ React__default["default"].createElement("span", {
+      className: "text-left inline-flex items-center text-2xl tracking-wide text-gray-800 flex-1 gap-1 opacity-80 group-hover:opacity-100 transition-opacity duration-150 ease-out"
+    }, /* @__PURE__ */ React__default["default"].createElement("svg", {
+      viewBox: "0 0 32 32",
+      fill: "#EC4815",
+      xmlns: "http://www.w3.org/2000/svg",
+      className: "w-10 h-auto -ml-1"
+    }, /* @__PURE__ */ React__default["default"].createElement("path", {
+      d: "M18.6466 14.5553C19.9018 13.5141 20.458 7.36086 21.0014 5.14903C21.5447 2.9372 23.7919 3.04938 23.7919 3.04938C23.7919 3.04938 23.2085 4.06764 23.4464 4.82751C23.6844 5.58738 25.3145 6.26662 25.3145 6.26662L24.9629 7.19622C24.9629 7.19622 24.2288 7.10204 23.7919 7.9785C23.355 8.85496 24.3392 17.4442 24.3392 17.4442C24.3392 17.4442 21.4469 22.7275 21.4469 24.9206C21.4469 27.1136 22.4819 28.9515 22.4819 28.9515H21.0296C21.0296 28.9515 18.899 26.4086 18.462 25.1378C18.0251 23.8669 18.1998 22.596 18.1998 22.596C18.1998 22.596 15.8839 22.4646 13.8303 22.596C11.7767 22.7275 10.4072 24.498 10.16 25.4884C9.91287 26.4787 9.81048 28.9515 9.81048 28.9515H8.66211C7.96315 26.7882 7.40803 26.0129 7.70918 24.9206C8.54334 21.8949 8.37949 20.1788 8.18635 19.4145C7.99321 18.6501 6.68552 17.983 6.68552 17.983C7.32609 16.6741 7.97996 16.0452 10.7926 15.9796C13.6052 15.914 17.3915 15.5965 18.6466 14.5553Z"
+    }), /* @__PURE__ */ React__default["default"].createElement("path", {
+      d: "M11.1268 24.7939C11.1268 24.7939 11.4236 27.5481 13.0001 28.9516H14.3511C13.0001 27.4166 12.8527 23.4155 12.8527 23.4155C12.1656 23.6399 11.3045 24.3846 11.1268 24.7939Z"
+    })), /* @__PURE__ */ React__default["default"].createElement("span", null, "Tina Admin")), /* @__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: `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: "0.3"
+    }, /* @__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("div", {
+      className: "transform translate-y-full absolute bottom-3 right-5 w-2/3 z-50"
+    }, /* @__PURE__ */ React__default["default"].createElement(react.Transition, {
+      enter: "transition duration-150 ease-out",
+      enterFrom: "transform opacity-0 -translate-y-2",
+      enterTo: "transform opacity-100 translate-y-0",
+      leave: "transition duration-75 ease-in",
+      leaveFrom: "transform opacity-100 translate-y-0",
+      leaveTo: "transform opacity-0 -translate-y-2"
+    }, /* @__PURE__ */ React__default["default"].createElement(react.Menu.Items, {
+      className: "w-full py-1 bg-white border border-gray-150 rounded-lg shadow-lg"
+    }, /* @__PURE__ */ React__default["default"].createElement(react.Menu.Item, null, ({ active }) => /* @__PURE__ */ React__default["default"].createElement("a", {
+      className: `w-full text-lg px-4 py-2 tracking-wide flex items-center opacity-80 text-gray-600 ${active && "text-gray-800 opacity-100"}`,
+      href: "/"
+    }, /* @__PURE__ */ React__default["default"].createElement(VscOpenPreview, {
+      className: "w-6 h-auto mr-1.5 text-blue-400"
+    }), " ", "View Website")), /* @__PURE__ */ React__default["default"].createElement(react.Menu.Item, null, ({ active }) => /* @__PURE__ */ React__default["default"].createElement("button", {
+      className: `w-full text-lg px-4 py-2 tracking-wide flex items-center opacity-80 text-gray-600 ${active && "text-gray-800 opacity-100"}`,
+      onClick: () => logout2()
+    }, /* @__PURE__ */ React__default["default"].createElement(BiExit, {
+      className: "w-6 h-auto mr-1.5 text-blue-400"
+    }), " ", "Log out")))))))), /* @__PURE__ */ React__default["default"].createElement("div", {
+      className: "px-6 py-7 flex-1"
+    }, /* @__PURE__ */ React__default["default"].createElement("h4", {
+      className: "uppercase font-bold text-sm mb-3"
+    }, "Collections"), /* @__PURE__ */ React__default["default"].createElement("ul", {
+      className: "flex flex-col gap-4"
+    }, collections.map((collection) => {
+      return /* @__PURE__ */ React__default["default"].createElement("li", {
+        key: `${collection.name}-link`
+      }, /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.NavLink, {
+        className: `text-lg tracking-wide hover:text-blue-600 flex items-center opacity-90 hover:opacity-100`,
+        activeClassName: "text-blue-600",
+        to: `/admin/collections/${collection.name}`
+      }, /* @__PURE__ */ React__default["default"].createElement(ImFilesEmpty, {
+        className: "mr-2 h-6 opacity-80 w-auto"
+      }), " ", collection.label));
+    })))));
+  };
+  const GetCMS = ({ children }) => {
+    try {
+      const cms = toolkit.useCMS();
+      return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, children(cms));
+    } catch (e) {
+      return null;
+    }
+  };
   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);
   }
-  const login = () => {
-    setEditing(true);
-    window.location.reload();
-  };
-  const LoginPage = () => {
+  const AuthTemplate = ({
+    message,
+    children
+  }) => {
     return /* @__PURE__ */ React__default["default"].createElement("div", {
       className: "h-screen w-full bg-gradient-to-b from-blue-900 to-gray-900 flex items-center justify-center px-4 py-6"
     }, /* @__PURE__ */ React__default["default"].createElement("div", {
@@ -1645,12 +1747,19 @@ This will work when developing locally but NOT when deployed to production.
       d: "M18.6466 14.5553C19.9018 13.5141 20.458 7.36086 21.0014 5.14903C21.5447 2.9372 23.7919 3.04938 23.7919 3.04938C23.7919 3.04938 23.2085 4.06764 23.4464 4.82751C23.6844 5.58738 25.3145 6.26662 25.3145 6.26662L24.9629 7.19622C24.9629 7.19622 24.2288 7.10204 23.7919 7.9785C23.355 8.85496 24.3392 17.4442 24.3392 17.4442C24.3392 17.4442 21.4469 22.7275 21.4469 24.9206C21.4469 27.1136 22.4819 28.9515 22.4819 28.9515H21.0296C21.0296 28.9515 18.899 26.4086 18.462 25.1378C18.0251 23.8669 18.1998 22.596 18.1998 22.596C18.1998 22.596 15.8839 22.4646 13.8303 22.596C11.7767 22.7275 10.4072 24.498 10.16 25.4884C9.91287 26.4787 9.81048 28.9515 9.81048 28.9515H8.66211C7.96315 26.7882 7.40803 26.0129 7.70918 24.9206C8.54334 21.8949 8.37949 20.1788 8.18635 19.4145C7.99321 18.6501 6.68552 17.983 6.68552 17.983C7.32609 16.6741 7.97996 16.0452 10.7926 15.9796C13.6052 15.914 17.3915 15.5965 18.6466 14.5553Z"
     }), /* @__PURE__ */ React__default["default"].createElement("path", {
       d: "M11.1268 24.7939C11.1268 24.7939 11.4236 27.5481 13.0001 28.9516H14.3511C13.0001 27.4166 12.8527 23.4155 12.8527 23.4155C12.1656 23.6399 11.3045 24.3846 11.1268 24.7939Z"
-    })), /* @__PURE__ */ React__default["default"].createElement("span", null, "Tina Admin"))), /* @__PURE__ */ React__default["default"].createElement("div", {
+    })), /* @__PURE__ */ React__default["default"].createElement("span", null, "Tina Admin"))), message && /* @__PURE__ */ React__default["default"].createElement("div", {
       className: "px-5 py-4 "
     }, /* @__PURE__ */ React__default["default"].createElement("p", {
       className: "text-base font-sans leading-normal"
-    }, "Please log in to Tina Cloud to access your admin dashboard.")), /* @__PURE__ */ React__default["default"].createElement("div", {
+    }, message)), /* @__PURE__ */ React__default["default"].createElement("div", {
       className: "px-5 py-4 flex gap-4 w-full justify-between"
+    }, children)));
+  };
+  const LoginPage = () => {
+    const { setEdit } = sharedctx.useEditState();
+    const login = () => setEdit(true);
+    return /* @__PURE__ */ React__default["default"].createElement(AuthTemplate, {
+      message: "Please log in to Tina Cloud to access your content."
     }, /* @__PURE__ */ React__default["default"].createElement("a", {
       href: "/",
       className: "flex-1 text-center inline-flex justify-center items-center px-8 py-3 shadow-sm text-sm leading-4 font-medium rounded-full text-gray-600 border border-gray-150 hover:opacity-80 hover:bg-gray-50 focus:outline-none focus:shadow-outline-blue  transition duration-150 ease-out"
@@ -1663,7 +1772,26 @@ This will work when developing locally but NOT when deployed to production.
       style: { background: "#0084FF" }
     }, /* @__PURE__ */ React__default["default"].createElement(BiLogIn, {
       className: "w-6 h-auto mr-1.5 opacity-80"
-    }), " Log in"))));
+    }), " Log in"));
+  };
+  const logout = () => {
+    sharedctx.setEditing(false);
+    window.location.href = "/";
+  };
+  const LogoutPage = () => {
+    return /* @__PURE__ */ React__default["default"].createElement(AuthTemplate, null, /* @__PURE__ */ React__default["default"].createElement("a", {
+      href: "/",
+      className: "flex-1 text-center inline-flex justify-center items-center px-8 py-3 shadow-sm text-sm leading-4 font-medium rounded-full text-gray-600 border border-gray-150 hover:opacity-80 hover:bg-gray-50 focus:outline-none focus:shadow-outline-blue  transition duration-150 ease-out"
+    }, /* @__PURE__ */ React__default["default"].createElement(MdOutlineArrowBack, {
+      className: "w-6 h-auto mr-1.5 opacity-80"
+    }), " Back to site"), /* @__PURE__ */ React__default["default"].createElement("button", {
+      type: "submit",
+      onClick: () => logout(),
+      className: "flex-1 justify-center text-center 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" }
+    }, /* @__PURE__ */ React__default["default"].createElement(BiLogOut, {
+      className: "w-6 h-auto mr-1.5 opacity-80"
+    }), " Log out"));
   };
   const DashboardPage = () => {
     return /* @__PURE__ */ React__default["default"].createElement("div", {
@@ -1772,60 +1900,73 @@ This will work when developing locally but NOT when deployed to production.
   const CollectionListPage = () => {
     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), !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) => /* @__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: `${location2.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)), /* @__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"
-      }, "Template"), /* @__PURE__ */ React__default["default"].createElement("span", {
-        className: "h-5 leading-5 block text-sm font-medium text-gray-900"
-      }, document2.node.sys.template)))))))));
-    }));
+    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, templateName) => {
     const [info, setInfo] = React.useState({
@@ -1880,13 +2021,15 @@ This will work when developing locally but NOT when deployed to production.
       includeCollection,
       includeTemplate
     });
-    await cms.api.tina.request(`mutation($relativePath: String!, $params: DocumentMutation!) {
-      createDocument( 
+    await cms.api.tina.request(`mutation($collection: String!, $relativePath: String!, $params: DocumentMutation!) {
+      createDocument(
+        collection: $collection, 
         relativePath: $relativePath, 
         params: $params
       ){__typename}
     }`, {
       variables: {
+        collection: collection.name,
         relativePath,
         params
       }
@@ -1960,19 +2103,21 @@ 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, relativePath, mutationInfo, values) => {
+  const updateDocument = async (cms, relativePath, collection, mutationInfo, values) => {
     const { includeCollection, includeTemplate } = mutationInfo;
     const params = transformDocumentIntoMutationRequestPayload(values, {
       includeCollection,
       includeTemplate
     });
-    await cms.api.tina.request(`mutation($relativePath: String!, $params: DocumentMutation!) {
+    await cms.api.tina.request(`mutation($collection: String!, $relativePath: String!, $params: DocumentMutation!) {
       updateDocument( 
+        collection: $collection,
         relativePath: $relativePath, 
         params: $params
       ){__typename}
     }`, {
       variables: {
+        collection: collection.name,
         relativePath,
         params
       }
@@ -1997,7 +2142,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, relativePath, mutationInfo, values);
+            await updateDocument(cms, relativePath, collection, mutationInfo, values);
             history.push(`/admin/collections/${collection.name}`);
           }
         });
@@ -2014,8 +2159,8 @@ This will work when developing locally but NOT when deployed to production.
   };
   const useEmbedTailwind = () => {
     React.useEffect(() => {
-      const isSSR2 = typeof window === "undefined";
-      if (!isSSR2) {
+      const isSSR = typeof window === "undefined";
+      if (!isSSR) {
         const head = document.head;
         const link = document.createElement("link");
         link.id = "tina-admin-stylesheet";
@@ -2026,111 +2171,59 @@ This will work when developing locally but NOT when deployed to production.
       }
     }, []);
   };
-  const logout = () => {
-    setEditing(false);
-    window.location.reload();
-  };
   const TinaAdmin = () => {
     useEmbedTailwind();
-    const isSSR2 = typeof window === "undefined";
-    if (isSSR2) {
+    const isSSR = typeof window === "undefined";
+    if (isSSR) {
       return null;
     }
-    const isEdit = isEditing();
-    if (!isEdit) {
+    const { edit } = sharedctx.useEditState();
+    if (!edit) {
       return /* @__PURE__ */ React__default["default"].createElement(Layout, null, /* @__PURE__ */ React__default["default"].createElement(LoginPage, null));
     }
-    return /* @__PURE__ */ React__default["default"].createElement(GetCMS, null, (cms) => /* @__PURE__ */ React__default["default"].createElement(GetCollections, {
-      cms
-    }, (collections) => /* @__PURE__ */ React__default["default"].createElement(Layout, null, /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.BrowserRouter, null, /* @__PURE__ */ React__default["default"].createElement("div", {
-      className: "flex items-stretch h-screen overflow-hidden"
-    }, /* @__PURE__ */ React__default["default"].createElement("div", {
-      className: "flex flex-col w-80 lg:w-96 flex-shrink-0 bg-gradient-to-b from-white to-gray-50 border-r border-gray-200"
-    }, /* @__PURE__ */ React__default["default"].createElement("div", {
-      className: "border-b border-gray-200"
-    }, /* @__PURE__ */ React__default["default"].createElement(react.Menu, {
-      as: "div",
-      className: "relative block"
-    }, ({ open }) => /* @__PURE__ */ React__default["default"].createElement("div", null, /* @__PURE__ */ React__default["default"].createElement(react.Menu.Button, {
-      className: `group w-full px-6 py-4 flex justify-between items-center transition-colors duration-150 ease-out ${open ? `bg-gray-50` : `bg-transparent`}`
-    }, /* @__PURE__ */ React__default["default"].createElement("span", {
-      className: "text-left inline-flex items-center text-2xl tracking-wide text-gray-800 flex-1 gap-1 opacity-80 group-hover:opacity-100 transition-opacity duration-150 ease-out"
-    }, /* @__PURE__ */ React__default["default"].createElement("svg", {
-      viewBox: "0 0 32 32",
-      fill: "#EC4815",
-      xmlns: "http://www.w3.org/2000/svg",
-      className: "w-10 h-auto -ml-1"
-    }, /* @__PURE__ */ React__default["default"].createElement("path", {
-      d: "M18.6466 14.5553C19.9018 13.5141 20.458 7.36086 21.0014 5.14903C21.5447 2.9372 23.7919 3.04938 23.7919 3.04938C23.7919 3.04938 23.2085 4.06764 23.4464 4.82751C23.6844 5.58738 25.3145 6.26662 25.3145 6.26662L24.9629 7.19622C24.9629 7.19622 24.2288 7.10204 23.7919 7.9785C23.355 8.85496 24.3392 17.4442 24.3392 17.4442C24.3392 17.4442 21.4469 22.7275 21.4469 24.9206C21.4469 27.1136 22.4819 28.9515 22.4819 28.9515H21.0296C21.0296 28.9515 18.899 26.4086 18.462 25.1378C18.0251 23.8669 18.1998 22.596 18.1998 22.596C18.1998 22.596 15.8839 22.4646 13.8303 22.596C11.7767 22.7275 10.4072 24.498 10.16 25.4884C9.91287 26.4787 9.81048 28.9515 9.81048 28.9515H8.66211C7.96315 26.7882 7.40803 26.0129 7.70918 24.9206C8.54334 21.8949 8.37949 20.1788 8.18635 19.4145C7.99321 18.6501 6.68552 17.983 6.68552 17.983C7.32609 16.6741 7.97996 16.0452 10.7926 15.9796C13.6052 15.914 17.3915 15.5965 18.6466 14.5553Z"
-    }), /* @__PURE__ */ React__default["default"].createElement("path", {
-      d: "M11.1268 24.7939C11.1268 24.7939 11.4236 27.5481 13.0001 28.9516H14.3511C13.0001 27.4166 12.8527 23.4155 12.8527 23.4155C12.1656 23.6399 11.3045 24.3846 11.1268 24.7939Z"
-    })), /* @__PURE__ */ React__default["default"].createElement("span", null, "Tina Admin")), /* @__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: `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: "0.3"
-    }, /* @__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("div", {
-      className: "transform translate-y-full absolute bottom-3 right-5 w-2/3 z-50"
-    }, /* @__PURE__ */ React__default["default"].createElement(react.Transition, {
-      enter: "transition duration-150 ease-out",
-      enterFrom: "transform opacity-0 -translate-y-2",
-      enterTo: "transform opacity-100 translate-y-0",
-      leave: "transition duration-75 ease-in",
-      leaveFrom: "transform opacity-100 translate-y-0",
-      leaveTo: "transform opacity-0 -translate-y-2"
-    }, /* @__PURE__ */ React__default["default"].createElement(react.Menu.Items, {
-      className: "w-full py-1 bg-white border border-gray-150 rounded-lg shadow-lg"
-    }, /* @__PURE__ */ React__default["default"].createElement(react.Menu.Item, null, ({ active }) => /* @__PURE__ */ React__default["default"].createElement("a", {
-      className: `w-full text-lg px-4 py-2 tracking-wide flex items-center opacity-80 text-gray-600 ${active && "text-gray-800 opacity-100"}`,
-      href: "/"
-    }, /* @__PURE__ */ React__default["default"].createElement(VscOpenPreview, {
-      className: "w-6 h-auto mr-1.5 text-blue-400"
-    }), " ", "View Website")), /* @__PURE__ */ React__default["default"].createElement(react.Menu.Item, null, ({ active }) => /* @__PURE__ */ React__default["default"].createElement("button", {
-      className: `w-full text-lg px-4 py-2 tracking-wide flex items-center opacity-80 text-gray-600 ${active && "text-gray-800 opacity-100"}`,
-      onClick: () => logout()
-    }, /* @__PURE__ */ React__default["default"].createElement(BiExit, {
-      className: "w-6 h-auto mr-1.5 text-blue-400"
-    }), " ", "Log out")))))))), /* @__PURE__ */ React__default["default"].createElement("div", {
-      className: "px-6 py-7 flex-1"
-    }, /* @__PURE__ */ React__default["default"].createElement("h4", {
-      className: "uppercase font-bold text-sm mb-3"
-    }, "Collections"), /* @__PURE__ */ React__default["default"].createElement("ul", {
-      className: "flex flex-col gap-4"
-    }, collections.map((collection) => {
-      return /* @__PURE__ */ React__default["default"].createElement("li", {
-        key: `${collection.name}-link`
-      }, /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.NavLink, {
-        className: `text-lg tracking-wide hover:text-blue-600 flex items-center opacity-90 hover:opacity-100`,
-        activeClassName: "text-blue-600",
-        to: `/admin/collections/${collection.name}`
-      }, /* @__PURE__ */ React__default["default"].createElement(ImFilesEmpty, {
-        className: "mr-2 h-6 opacity-80 w-auto"
-      }), " ", collection.label));
-    })))), /* @__PURE__ */ React__default["default"].createElement("div", {
-      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, {
-      path: `/admin/collections/:collectionName`
-    }, /* @__PURE__ */ React__default["default"].createElement(CollectionListPage, null)), /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Route, {
-      path: `/admin`
-    }, /* @__PURE__ */ React__default["default"].createElement(DashboardPage, null)))))))));
+    return /* @__PURE__ */ React__default["default"].createElement(GetCMS, null, (cms) => {
+      const isTinaAdminEnabled = cms.flags.get("tina-admin");
+      if (isTinaAdminEnabled) {
+        return /* @__PURE__ */ React__default["default"].createElement(Layout, null, /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.BrowserRouter, null, /* @__PURE__ */ React__default["default"].createElement("div", {
+          className: "flex items-stretch h-screen overflow-hidden"
+        }, /* @__PURE__ */ React__default["default"].createElement(Sidebar, {
+          cms
+        }), /* @__PURE__ */ React__default["default"].createElement("div", {
+          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, {
+          path: `/admin/collections/:collectionName`
+        }, /* @__PURE__ */ React__default["default"].createElement(CollectionListPage, null)), /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Route, {
+          path: `/admin`
+        }, /* @__PURE__ */ React__default["default"].createElement(DashboardPage, null)))))));
+      } else {
+        return /* @__PURE__ */ React__default["default"].createElement(Layout, null, /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.BrowserRouter, null, /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Switch, null, /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Route, {
+          path: [`/admin/logout`, `/admin/exit`, `/admin/exit-admin`]
+        }, /* @__PURE__ */ React__default["default"].createElement(LogoutPage, null)), /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Route, {
+          path: `/admin`
+        }, () => {
+          window.location.href = "/";
+        }))));
+      }
+    });
   };
+  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;