tinacms 0.66.0 → 0.66.1

package/dist/index.es.js

@@ -29,18 +29,18 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
-import { EventBus, Modal, ModalPopup, ModalHeader, ModalBody, ModalActions, Button, LoadingDots, useLocalStorage, TinaCMS, BranchSwitcherPlugin, BranchDataProvider, TinaProvider, useCMS, useBranchData, FormMetaPlugin, Form, GlobalFormPlugin, FullscreenFormBuilder } from "@tinacms/toolkit";
+import { EventBus, Modal, ModalPopup, ModalHeader, ModalBody, ModalActions, Button, LoadingDots, useLocalStorage, TinaCMS, BranchSwitcherPlugin, BranchDataProvider, TinaProvider, useCMS, useBranchData, FormMetaPlugin, Form, GlobalFormPlugin, Nav, LocalWarning, FormStatus, FormBuilder } from "@tinacms/toolkit";
 export * from "@tinacms/toolkit";
 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 React, { useState, useCallback, useEffect, Fragment } from "react";
+import React, { useState, useCallback, useEffect, Fragment, useMemo } from "react";
 import styled from "styled-components";
 import * as yup from "yup";
 import { setEditing, TinaDataContext, useEditState } from "@tinacms/sharedctx";
 import { getIn, setIn } from "final-form";
 import UrlPattern from "url-pattern";
-import { NavLink, useLocation, useParams, Link, useNavigate, BrowserRouter, Routes, Route } from "react-router-dom";
+import { NavLink, useParams, useNavigate, Link, BrowserRouter, Routes, Route } from "react-router-dom";
 import { Menu, Transition } from "@headlessui/react";
 function popupWindow(url, title, window2, w, h) {
   const y = window2.top.outerHeight / 2 + window2.top.screenY - h / 2;
@@ -706,6 +706,104 @@ function safeAssertShape(value, yupSchema) {
     return false;
   }
 }
+class TinaAdminApi {
+  constructor(cms) {
+    this.api = cms.api.tina;
+  }
+  async fetchCollections() {
+    const response = await this.api.request(`#graphql
+      query{ 
+        getCollections { 
+          label, 
+          name 
+        } 
+      }`, { variables: {} });
+    return response;
+  }
+  async fetchCollection(collectionName, includeDocuments) {
+    const response = await this.api.request(`#graphql
+      query($collection: String!, $includeDocuments: Boolean!){
+        getCollection(collection: $collection){
+          name
+          label
+          format
+          templates
+          documents @include(if: $includeDocuments) {
+            totalCount
+            edges {
+              node {
+                ... on Document {
+                  sys {
+                    template
+                    breadcrumbs
+                    path
+                    basename
+                    relativePath
+                    filename
+                    extension
+                  }
+                }
+              }
+            }
+          }
+        }
+      }`, { variables: { collection: collectionName, includeDocuments } });
+    return response;
+  }
+  async fetchDocument(collectionName, relativePath) {
+    const response = await this.api.request(`#graphql
+      query($collection: String!, $relativePath: String!) {
+        getDocument(collection:$collection, relativePath:$relativePath) {
+          ... on Document {
+            form
+            values
+          }
+        }
+      }`, { variables: { collection: collectionName, relativePath } });
+    return response;
+  }
+  async fetchDocumentFields() {
+    const response = await this.api.request(`#graphql
+      query { 
+        getDocumentFields 
+      }`, { variables: {} });
+    return response;
+  }
+  async createDocument(collectionName, relativePath, params) {
+    const response = await this.api.request(`#graphql
+      mutation($collection: String!, $relativePath: String!, $params: DocumentMutation!) {
+        createDocument(
+          collection: $collection,
+          relativePath: $relativePath,
+          params: $params
+        ){__typename}
+      }`, {
+      variables: {
+        collection: collectionName,
+        relativePath,
+        params
+      }
+    });
+    return response;
+  }
+  async updateDocument(collectionName, relativePath, params) {
+    const response = await this.api.request(`#graphql
+      mutation($collection: String!, $relativePath: String!, $params: DocumentMutation!) {
+        updateDocument( 
+          collection: $collection,
+          relativePath: $relativePath,
+          params: $params
+        ){__typename}
+      }`, {
+      variables: {
+        collection: collectionName,
+        relativePath,
+        params
+      }
+    });
+    return response;
+  }
+}
 function sleep(ms) {
   return new Promise((resolve) => setTimeout(resolve, ms));
 }
@@ -803,6 +901,11 @@ const TinaCloudProvider = (props) => {
     return newBranch;
   };
   setupMedia();
+  React.useMemo(() => {
+    if (cms.flags.get("tina-admin") === true) {
+      cms.registerApi("admin", new TinaAdminApi(cms));
+    }
+  }, [cms, cms.flags.get("tina-admin")]);
   const [branchingEnabled, setBranchingEnabled] = React.useState(() => cms.flags.get("branch-switcher"));
   React.useEffect(() => {
     cms.events.subscribe("flag:set", ({ key, value }) => {
@@ -1904,40 +2007,49 @@ Document
 	position: relative !important;
 }
 
-.tina-tailwind .bottom-3 {
-	bottom: 12px !important;
-}
-
-.tina-tailwind .right-5 {
-	right: 20px !important;
+.tina-tailwind .left-0 {
+	left: 0px !important;
 }
 
 .tina-tailwind .right-0 {
 	right: 0px !important;
 }
 
+.tina-tailwind .bottom-2 {
+	bottom: 8px !important;
+}
+
+.tina-tailwind .right-5 {
+	right: 20px !important;
+}
+
 .tina-tailwind .z-50 {
 	z-index: 50 !important;
 }
 
-.tina-tailwind .-ml-1 {
-	margin-left: -4px !important;
+.tina-tailwind .mx-auto {
+	margin-left: auto !important;
+	margin-right: auto !important;
 }
 
-.tina-tailwind .mr-1\\.5 {
-	margin-right: 6px !important;
+.tina-tailwind .mr-2 {
+	margin-right: 8px !important;
 }
 
-.tina-tailwind .mr-1 {
-	margin-right: 4px !important;
+.tina-tailwind .mb-2 {
+	margin-bottom: 8px !important;
 }
 
-.tina-tailwind .mb-3 {
-	margin-bottom: 12px !important;
+.tina-tailwind .mb-1 {
+	margin-bottom: 4px !important;
 }
 
-.tina-tailwind .mr-2 {
-	margin-right: 8px !important;
+.tina-tailwind .-mt-0\\.5 {
+	margin-top: -2px !important;
+}
+
+.tina-tailwind .-mt-0 {
+	margin-top: 0px !important;
 }
 
 .tina-tailwind .ml-1 {
@@ -1948,16 +2060,12 @@ Document
 	margin-top: 8px !important;
 }
 
-.tina-tailwind .mt-8 {
-	margin-top: 32px !important;
-}
-
-.tina-tailwind .mb-0\\.5 {
-	margin-bottom: 2px !important;
+.tina-tailwind .mr-1\\.5 {
+	margin-right: 6px !important;
 }
 
-.tina-tailwind .mb-0 {
-	margin-bottom: 0px !important;
+.tina-tailwind .mr-1 {
+	margin-right: 4px !important;
 }
 
 .tina-tailwind .block {
@@ -1988,10 +2096,18 @@ Document
 	height: auto !important;
 }
 
+.tina-tailwind .h-full {
+	height: 100% !important;
+}
+
 .tina-tailwind .h-6 {
 	height: 24px !important;
 }
 
+.tina-tailwind .h-10 {
+	height: 40px !important;
+}
+
 .tina-tailwind .h-5 {
 	height: 20px !important;
 }
@@ -2004,48 +2120,48 @@ Document
 	width: 40px !important;
 }
 
-.tina-tailwind .w-80 {
-	width: 320px !important;
-}
-
-.tina-tailwind .w-2\\/3 {
-	width: 66.666667% !important;
-}
-
-.tina-tailwind .w-6 {
-	width: 24px !important;
-}
-
 .tina-tailwind .w-auto {
 	width: auto !important;
 }
 
+.tina-tailwind .w-5 {
+	width: 20px !important;
+}
+
 .tina-tailwind .w-56 {
 	width: 224px !important;
 }
 
-.tina-tailwind .min-w-full {
-	min-width: 100% !important;
+.tina-tailwind .w-0 {
+	width: 0px !important;
+}
+
+.tina-tailwind .w-6 {
+	width: 24px !important;
 }
 
 .tina-tailwind .max-w-lg {
 	max-width: 32rem !important;
 }
 
-.tina-tailwind .max-w-screen-md {
-	max-width: 768px !important;
+.tina-tailwind .max-w-screen-xl {
+	max-width: 1280px !important;
+}
+
+.tina-tailwind .max-w-form {
+	max-width: 900px !important;
 }
 
-.tina-tailwind .max-w-xs {
-	max-width: 20rem !important;
+.tina-tailwind .max-w-full {
+	max-width: 100% !important;
 }
 
 .tina-tailwind .flex-1 {
 	flex: 1 1 0% !important;
 }
 
-.tina-tailwind .flex-shrink-0 {
-	flex-shrink: 0 !important;
+.tina-tailwind .table-auto {
+	table-layout: auto !important;
 }
 
 .tina-tailwind .origin-top-right {
@@ -2067,16 +2183,6 @@ Document
 	transform: var(--tw-transform) !important;
 }
 
-.tina-tailwind .rotate-90 {
-	--tw-rotate: 90deg !important;
-	transform: var(--tw-transform) !important;
-}
-
-.tina-tailwind .rotate-0 {
-	--tw-rotate: 0deg !important;
-	transform: var(--tw-transform) !important;
-}
-
 .tina-tailwind .scale-95 {
 	--tw-scale-x: .95 !important;
 	--tw-scale-y: .95 !important;
@@ -2109,14 +2215,6 @@ Document
 	align-items: stretch !important;
 }
 
-.tina-tailwind .justify-start {
-	justify-content: flex-start !important;
-}
-
-.tina-tailwind .justify-end {
-	justify-content: flex-end !important;
-}
-
 .tina-tailwind .justify-center {
 	justify-content: center !important;
 }
@@ -2137,18 +2235,10 @@ Document
 	gap: 16px !important;
 }
 
-.tina-tailwind .gap-1 {
-	gap: 4px !important;
-}
-
 .tina-tailwind .gap-3 {
 	gap: 12px !important;
 }
 
-.tina-tailwind .gap-1\\.5 {
-	gap: 6px !important;
-}
-
 .tina-tailwind .divide-y > :not([hidden]) ~ :not([hidden]) {
 	--tw-divide-y-reverse: 0 !important;
 	border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse))) !important;
@@ -2163,10 +2253,6 @@ Document
 	overflow-y: auto !important;
 }
 
-.tina-tailwind .overflow-ellipsis {
-	text-overflow: ellipsis !important;
-}
-
 .tina-tailwind .whitespace-nowrap {
 	white-space: nowrap !important;
 }
@@ -2191,10 +2277,6 @@ Document
 	border-bottom-width: 1px !important;
 }
 
-.tina-tailwind .border-r {
-	border-right-width: 1px !important;
-}
-
 .tina-tailwind .border-gray-200 {
 	--tw-border-opacity: 1 !important;
 	border-color: rgba(225, 221, 236, var(--tw-border-opacity)) !important;
@@ -2214,8 +2296,9 @@ Document
 	background-color: rgba(246, 246, 249, var(--tw-bg-opacity)) !important;
 }
 
-.tina-tailwind .bg-transparent {
-	background-color: transparent !important;
+.tina-tailwind .bg-blue-500 {
+	--tw-bg-opacity: 1 !important;
+	background-color: rgba(0, 132, 255, var(--tw-bg-opacity)) !important;
 }
 
 .tina-tailwind .bg-gradient-to-b {
@@ -2227,19 +2310,10 @@ Document
 	--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(29, 44, 108, 0)) !important;
 }
 
-.tina-tailwind .from-white {
-	--tw-gradient-from: #fff !important;
-	--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(255, 255, 255, 0)) !important;
-}
-
 .tina-tailwind .to-gray-900 {
 	--tw-gradient-to: #252336 !important;
 }
 
-.tina-tailwind .to-gray-50 {
-	--tw-gradient-to: #F6F6F9 !important;
-}
-
 .tina-tailwind .px-4 {
 	padding-left: 16px !important;
 	padding-right: 16px !important;
@@ -2260,6 +2334,21 @@ Document
 	padding-bottom: 16px !important;
 }
 
+.tina-tailwind .px-12 {
+	padding-left: 48px !important;
+	padding-right: 48px !important;
+}
+
+.tina-tailwind .py-10 {
+	padding-top: 40px !important;
+	padding-bottom: 40px !important;
+}
+
+.tina-tailwind .px-20 {
+	padding-left: 80px !important;
+	padding-right: 80px !important;
+}
+
 .tina-tailwind .px-6 {
 	padding-left: 24px !important;
 	padding-right: 24px !important;
@@ -2275,47 +2364,22 @@ Document
 	padding-bottom: 8px !important;
 }
 
-.tina-tailwind .py-7 {
-	padding-top: 28px !important;
-	padding-bottom: 28px !important;
-}
-
-.tina-tailwind .px-8 {
-	padding-left: 32px !important;
-	padding-right: 32px !important;
-}
-
-.tina-tailwind .py-2\\.5 {
-	padding-top: 10px !important;
-	padding-bottom: 10px !important;
-}
-
-.tina-tailwind .py-14 {
-	padding-top: 56px !important;
-	padding-bottom: 56px !important;
-}
-
 .tina-tailwind .py-3 {
 	padding-top: 12px !important;
 	padding-bottom: 12px !important;
 }
 
-.tina-tailwind .py-1\\.5 {
-	padding-top: 6px !important;
-	padding-bottom: 6px !important;
-}
-
-.tina-tailwind .py-10 {
-	padding-top: 40px !important;
-	padding-bottom: 40px !important;
+.tina-tailwind .px-8 {
+	padding-left: 32px !important;
+	padding-right: 32px !important;
 }
 
-.tina-tailwind .pt-16 {
-	padding-top: 64px !important;
+.tina-tailwind .pb-4 {
+	padding-bottom: 16px !important;
 }
 
-.tina-tailwind .pb-10 {
-	padding-bottom: 40px !important;
+.tina-tailwind .pt-18 {
+	padding-top: 72px !important;
 }
 
 .tina-tailwind .text-left {
@@ -2340,40 +2404,26 @@ Document
 	line-height: 1.5 !important;
 }
 
-.tina-tailwind .text-lg {
-	font-size: 18px !important;
-	line-height: 1.55 !important;
-}
-
 .tina-tailwind .text-sm {
 	font-size: 14px !important;
 	line-height: 1.43 !important;
 }
 
+.tina-tailwind .text-xl {
+	font-size: 20px !important;
+	line-height: 1.4 !important;
+}
+
 .tina-tailwind .text-md {
 	font-size: 16px !important;
 	line-height: 1.5 !important;
 }
 
-.tina-tailwind .text-3xl {
-	font-size: 30px !important;
-	line-height: 1.2 !important;
-}
-
 .tina-tailwind .text-xs {
 	font-size: 13px !important;
 	line-height: 1.33 !important;
 }
 
-.tina-tailwind .text-4xl {
-	font-size: 36px !important;
-	line-height: 1.1 !important;
-}
-
-.tina-tailwind .font-bold {
-	font-weight: 700 !important;
-}
-
 .tina-tailwind .font-medium {
 	font-weight: 500 !important;
 }
@@ -2390,14 +2440,18 @@ Document
 	line-height: 1.5 !important;
 }
 
-.tina-tailwind .leading-4 {
-	line-height: 16px !important;
+.tina-tailwind .leading-tight {
+	line-height: 1.25 !important;
 }
 
 .tina-tailwind .leading-5 {
 	line-height: 20px !important;
 }
 
+.tina-tailwind .leading-4 {
+	line-height: 16px !important;
+}
+
 .tina-tailwind .tracking-wide {
 	letter-spacing: 0.025em !important;
 }
@@ -2407,24 +2461,23 @@ Document
 	color: rgba(67, 62, 82, var(--tw-text-opacity)) !important;
 }
 
-.tina-tailwind .text-gray-800 {
+.tina-tailwind .text-blue-600 {
 	--tw-text-opacity: 1 !important;
-	color: rgba(54, 49, 69, var(--tw-text-opacity)) !important;
+	color: rgba(5, 116, 228, var(--tw-text-opacity)) !important;
 }
 
-.tina-tailwind .text-gray-600 {
+.tina-tailwind .text-gray-500 {
 	--tw-text-opacity: 1 !important;
-	color: rgba(86, 81, 101, var(--tw-text-opacity)) !important;
+	color: rgba(113, 108, 127, var(--tw-text-opacity)) !important;
 }
 
-.tina-tailwind .text-blue-400 {
+.tina-tailwind .text-gray-400 {
 	--tw-text-opacity: 1 !important;
-	color: rgba(34, 150, 254, var(--tw-text-opacity)) !important;
+	color: rgba(145, 140, 158, var(--tw-text-opacity)) !important;
 }
 
-.tina-tailwind .text-blue-600 {
-	--tw-text-opacity: 1 !important;
-	color: rgba(5, 116, 228, var(--tw-text-opacity)) !important;
+.tina-tailwind .text-current {
+	color: currentColor !important;
 }
 
 .tina-tailwind .text-white {
@@ -2432,56 +2485,66 @@ Document
 	color: rgba(255, 255, 255, var(--tw-text-opacity)) !important;
 }
 
-.tina-tailwind .text-gray-400 {
+.tina-tailwind .text-gray-600 {
 	--tw-text-opacity: 1 !important;
-	color: rgba(145, 140, 158, var(--tw-text-opacity)) !important;
+	color: rgba(86, 81, 101, var(--tw-text-opacity)) !important;
 }
 
-.tina-tailwind .text-gray-300 {
+.tina-tailwind .text-gray-800 {
 	--tw-text-opacity: 1 !important;
-	color: rgba(178, 173, 190, var(--tw-text-opacity)) !important;
+	color: rgba(54, 49, 69, var(--tw-text-opacity)) !important;
 }
 
-.tina-tailwind .text-gray-500 {
+.tina-tailwind .text-gray-900 {
 	--tw-text-opacity: 1 !important;
-	color: rgba(113, 108, 127, var(--tw-text-opacity)) !important;
+	color: rgba(37, 35, 54, var(--tw-text-opacity)) !important;
 }
 
-.tina-tailwind .underline {
-	text-decoration: underline !important;
+.tina-tailwind .text-blue-500 {
+	--tw-text-opacity: 1 !important;
+	color: rgba(0, 132, 255, var(--tw-text-opacity)) !important;
 }
 
-.tina-tailwind .opacity-80 {
-	opacity: .8 !important;
+.tina-tailwind .text-blue-400 {
+	--tw-text-opacity: 1 !important;
+	color: rgba(34, 150, 254, var(--tw-text-opacity)) !important;
 }
 
-.tina-tailwind .opacity-50 {
-	opacity: .5 !important;
+.tina-tailwind .underline {
+	text-decoration: underline !important;
 }
 
 .tina-tailwind .opacity-100 {
 	opacity: 1 !important;
 }
 
-.tina-tailwind .opacity-0 {
-	opacity: 0 !important;
-}
-
 .tina-tailwind .opacity-90 {
 	opacity: .9 !important;
 }
 
+.tina-tailwind .opacity-80 {
+	opacity: .8 !important;
+}
+
+.tina-tailwind .opacity-50 {
+	opacity: .5 !important;
+}
+
 .tina-tailwind .opacity-70 {
 	opacity: .7 !important;
 }
 
+.tina-tailwind .opacity-0 {
+	opacity: 0 !important;
+}
+
 .tina-tailwind .shadow-lg {
 	--tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
 	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
 }
 
-.tina-tailwind .shadow-sm {
-	--tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
+.tina-tailwind .shadow-2xl {
+	--tw-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
 	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
 }
 
@@ -2490,6 +2553,11 @@ Document
 	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
 }
 
+.tina-tailwind .shadow-sm {
+	--tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
+	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
+}
+
 .tina-tailwind .ring-1 {
 	--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;
 	--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
@@ -2509,14 +2577,14 @@ Document
 	filter: var(--tw-filter) !important;
 }
 
-.tina-tailwind .transition-colors {
-	transition-property: background-color, border-color, color, fill, stroke !important;
+.tina-tailwind .transition-opacity {
+	transition-property: opacity !important;
 	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
 	transition-duration: 150ms !important;
 }
 
-.tina-tailwind .transition-opacity {
-	transition-property: opacity !important;
+.tina-tailwind .transition-colors {
+	transition-property: background-color, border-color, color, fill, stroke !important;
 	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
 	transition-duration: 150ms !important;
 }
@@ -2533,38 +2601,55 @@ Document
 	transition-duration: 150ms !important;
 }
 
-.tina-tailwind .duration-150 {
-	transition-duration: 150ms !important;
-}
-
 .tina-tailwind .duration-300 {
 	transition-duration: 300ms !important;
 }
 
-.tina-tailwind .duration-75 {
-	transition-duration: 75ms !important;
+.tina-tailwind .duration-150 {
+	transition-duration: 150ms !important;
 }
 
 .tina-tailwind .duration-100 {
 	transition-duration: 100ms !important;
 }
 
+.tina-tailwind .duration-75 {
+	transition-duration: 75ms !important;
+}
+
 .tina-tailwind .ease-out {
 	transition-timing-function: cubic-bezier(0, 0, 0.2, 1) !important;
 }
 
+.tina-tailwind .ease-in {
+	transition-timing-function: cubic-bezier(0.4, 0, 1, 1) !important;
+}
+
 .tina-tailwind .ease-in-out {
 	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
 }
 
-.tina-tailwind .ease-in {
-	transition-timing-function: cubic-bezier(0.4, 0, 1, 1) !important;
-}
+.tina-tailwind .icon-parent svg {
+        fill: currentColor !important;
+      }
 
 .tina-tailwind {
-  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-  --tw-text-opacity: 1;
-  color: rgba(86, 81, 101, var(--tw-text-opacity));
+    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+    --tw-text-opacity: 1;
+    color: rgba(86, 81, 101, var(--tw-text-opacity));
+}
+
+.first\\:pt-3:first-child {
+	padding-top: 12px !important;
+}
+
+.last\\:pb-3:last-child {
+	padding-bottom: 12px !important;
+}
+
+.hover\\:bg-blue-600:hover {
+	--tw-bg-opacity: 1 !important;
+	background-color: rgba(5, 116, 228, var(--tw-bg-opacity)) !important;
 }
 
 .hover\\:bg-gray-50:hover {
@@ -2577,9 +2662,9 @@ Document
 	color: rgba(5, 116, 228, var(--tw-text-opacity)) !important;
 }
 
-.hover\\:text-blue-500:hover {
+.hover\\:text-blue-400:hover {
 	--tw-text-opacity: 1 !important;
-	color: rgba(0, 132, 255, var(--tw-text-opacity)) !important;
+	color: rgba(34, 150, 254, var(--tw-text-opacity)) !important;
 }
 
 .hover\\:opacity-100:hover {
@@ -2590,31 +2675,38 @@ Document
 	opacity: .8 !important;
 }
 
-.focus\\:outline-none:focus {
-	outline: 2px solid transparent !important;
-	outline-offset: 2px !important;
+.focus\\:text-blue-400:focus {
+	--tw-text-opacity: 1 !important;
+	color: rgba(34, 150, 254, var(--tw-text-opacity)) !important;
 }
 
-.group:hover .group-hover\\:opacity-100 {
-	opacity: 1 !important;
+.focus\\:underline:focus {
+	text-decoration: underline !important;
 }
 
-.group:hover .group-hover\\:opacity-80 {
-	opacity: .8 !important;
+.focus\\:shadow-outline:focus {
+	--tw-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5) !important;
+	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
 }
 
-@media (min-width: 640px) {
+.focus\\:outline-none:focus {
+	outline: 2px solid transparent !important;
+	outline-offset: 2px !important;
+}
 
-	.sm\\:rounded-lg {
-		border-radius: 8px !important;
-	}
+.focus\\:ring-2:focus {
+	--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;
+	--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
+	box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important;
 }
 
-@media (min-width: 1024px) {
+.focus\\:ring-blue-500:focus {
+	--tw-ring-opacity: 1 !important;
+	--tw-ring-color: rgba(0, 132, 255, var(--tw-ring-opacity)) !important;
+}
 
-	.lg\\:w-96 {
-		width: 384px !important;
-	}
+.group:hover .group-hover\\:opacity-100 {
+	opacity: 1 !important;
 }
 `;
 function useTina({
@@ -3064,210 +3156,70 @@ function IconBase(props) {
     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 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);
-}
-class TinaAdminApi {
-  constructor(TinaApi) {
-    this.api = TinaApi;
-  }
-  async fetchCollections() {
-    const response = await this.api.request(`query{ getCollections { label, name } }`, { variables: {} });
-    return response;
-  }
-  async fetchCollection(collectionName, includeDocuments) {
-    const response = await this.api.request(`
-      query($collection: String!, $includeDocuments: Boolean!){
-        getCollection(collection: $collection){
-          name
-          label
-          format
-          templates
-          documents @include(if: $includeDocuments) {
-            totalCount
-            edges {
-              node {
-                ... on Document {
-                  sys {
-                    template
-                    breadcrumbs
-                    path
-                    basename
-                    relativePath
-                    filename
-                    extension
-                  }
-                }
-              }
-            }
-          }
-        }
-      }`, { variables: { collection: collectionName, includeDocuments } });
-    return response;
-  }
-  async fetchDocument(collectionName, relativePath) {
-    const response = await this.api.request(`
-      query($collection: String!, $relativePath: String!) {
-        getDocument(collection:$collection, relativePath:$relativePath) {
-          ... on Document {
-            form
-            values
-          }
-        }
-      }`, { variables: { collection: collectionName, relativePath } });
-    return response;
-  }
-  async fetchDocumentFields() {
-    const response = await this.api.request(`query { getDocumentFields }`, { variables: {} });
-    return response;
-  }
-  async createDocument(collectionName, relativePath, params) {
-    const response = await this.api.request(`#graphql
-      mutation($collection: String!, $relativePath: String!, $params: DocumentMutation!) {
-        createDocument(
-          collection: $collection,
-          relativePath: $relativePath,
-          params: $params
-        ){__typename}
-      }`, {
-      variables: {
-        collection: collectionName,
-        relativePath,
-        params
-      }
-    });
-    return response;
-  }
-  async updateDocument(collectionName, relativePath, params) {
-    const response = await this.api.request(`#graphql
-      mutation($collection: String!, $relativePath: String!, $params: DocumentMutation!) {
-        updateDocument(
-          collection: $collection,
-          relativePath: $relativePath,
-          params: $params
-        ){__typename}
-      }`, {
-      variables: {
-        collection: collectionName,
-        relativePath,
-        params
-      }
-    });
-    return response;
-  }
-}
 const useGetCollections = (cms) => {
-  const api = new TinaAdminApi(cms.api.tina);
-  const [collections, setCollections] = useState([]);
+  const api = new TinaAdminApi(cms);
+  const [info, setInfo] = useState({ collections: [], loading: true, error: false });
   useEffect(() => {
     const fetchCollections = async () => {
       const response = await api.fetchCollections();
-      setCollections(response.getCollections);
+      setInfo({
+        collections: response.getCollections,
+        loading: false,
+        error: false
+      });
     };
     fetchCollections();
   }, [cms]);
-  return collections;
+  return info;
 };
 const GetCollections = ({ cms, children }) => {
-  const collections = useGetCollections(cms);
+  const { collections, loading, error } = useGetCollections(cms);
   if (!collections)
     return null;
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, children(collections));
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, children(collections, loading, error));
+};
+const slugify = (text) => {
+  return text.toString().toLowerCase().trim().replace(/[^\w\s-]/g, "").replace(/[\s_-]+/g, "_").replace(/^-+|-+$/g, "");
 };
 const Sidebar = ({ cms }) => {
-  const { setEdit } = useEditState();
-  const logout2 = () => setEdit(false);
+  const screens = cms.plugins.getType("screen").all();
   return /* @__PURE__ */ React.createElement(GetCollections, {
     cms
-  }, (collections) => /* @__PURE__ */ React.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.createElement("div", {
-    className: "border-b border-gray-200"
-  }, /* @__PURE__ */ React.createElement(Menu, {
-    as: "div",
-    className: "relative block"
-  }, ({ open }) => /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(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.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.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.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.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.createElement("span", null, "Tina Admin")), /* @__PURE__ */ React.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.createElement("g", {
-    opacity: "0.3"
-  }, /* @__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("div", {
-    className: "transform translate-y-full absolute bottom-3 right-5 w-2/3 z-50"
-  }, /* @__PURE__ */ React.createElement(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.createElement(Menu.Items, {
-    className: "w-full py-1 bg-white border border-gray-150 rounded-lg shadow-lg"
-  }, /* @__PURE__ */ React.createElement(Menu.Item, null, ({ active }) => /* @__PURE__ */ React.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.createElement(VscOpenPreview, {
-    className: "w-6 h-auto mr-1.5 text-blue-400"
-  }), " ", "View Website")), /* @__PURE__ */ React.createElement(Menu.Item, null, ({ active }) => /* @__PURE__ */ React.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.createElement(BiExit, {
-    className: "w-6 h-auto mr-1.5 text-blue-400"
-  }), " ", "Log out")))))))), /* @__PURE__ */ React.createElement("div", {
-    className: "px-6 py-7 flex-1"
-  }, /* @__PURE__ */ React.createElement("h4", {
-    className: "uppercase font-bold text-sm mb-3"
-  }, "Collections"), /* @__PURE__ */ React.createElement("ul", {
-    className: "flex flex-col gap-4"
-  }, collections.map((collection) => {
-    return /* @__PURE__ */ React.createElement("li", {
-      key: `${collection.name}-link`
-    }, /* @__PURE__ */ React.createElement(NavLink, {
-      className: ({ isActive }) => {
-        return `text-lg tracking-wide ${isActive ? "text-blue-600" : ""} hover:text-blue-600 flex items-center opacity-90 hover:opacity-100`;
-      },
-      to: `/admin/collections/${collection.name}`
-    }, /* @__PURE__ */ React.createElement(ImFilesEmpty, {
-      className: "mr-2 h-6 opacity-80 w-auto"
-    }), " ", collection.label));
-  })))));
+  }, (collections, loading, error) => /* @__PURE__ */ React.createElement(Nav, {
+    sidebarWidth: 360,
+    showCollections: true,
+    collectionsInfo: {
+      collections,
+      loading,
+      error
+    },
+    screens,
+    contentCreators: [],
+    RenderNavSite: ({ view }) => /* @__PURE__ */ React.createElement(SidebarLink, {
+      label: view.name,
+      to: `screens/${slugify(view.name)}`,
+      Icon: view.Icon ? view.Icon : ImFilesEmpty
+    }),
+    RenderNavCollection: ({ collection }) => /* @__PURE__ */ React.createElement(SidebarLink, {
+      label: collection.label,
+      to: `collections/${collection.name}`,
+      Icon: ImFilesEmpty
+    })
+  }));
+};
+const SidebarLink = (props) => {
+  const { to, label, Icon } = props;
+  return /* @__PURE__ */ React.createElement(NavLink, {
+    className: ({ isActive }) => {
+      return `text-base tracking-wide ${isActive ? "text-blue-600" : "text-gray-500"} hover:text-blue-600 flex items-center opacity-90 hover:opacity-100`;
+    },
+    to
+  }, /* @__PURE__ */ React.createElement(Icon, {
+    className: "mr-2 h-6 opacity-80 w-auto"
+  }), " ", label);
 };
 const GetCMS = ({ children }) => {
   try {
@@ -3277,6 +3229,21 @@ const GetCMS = ({ children }) => {
     return null;
   }
 };
+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 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 BiPlus(props) {
+  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "M19 11h-6V5h-2v6H5v2h6v6h2v-6h6z" } }] })(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);
 }
@@ -3345,25 +3312,50 @@ const LogoutPage = () => {
     className: "w-6 h-auto mr-1.5 opacity-80"
   }), " Log out"));
 };
-const DashboardPage = () => {
+const PageWrapper = ({
+  children
+}) => {
   return /* @__PURE__ */ React.createElement("div", {
-    className: "h-screen overflow-y-auto flex flex-col justify-start items-stretch"
-  }, /* @__PURE__ */ React.createElement("div", {
-    className: "flex-0 px-6 pt-16 pb-10 w-full flex justify-center bg-white border-b border-gray-150"
-  }, /* @__PURE__ */ React.createElement("div", {
-    className: "max-w-screen-md w-full"
-  }, /* @__PURE__ */ React.createElement("h3", {
-    className: "text-4xl"
-  }, "Welcome to Tina CMS."))), /* @__PURE__ */ React.createElement("div", {
-    className: "w-full px-6 py-10 flex justify-center"
-  }, /* @__PURE__ */ React.createElement("div", {
-    className: "max-w-screen-md w-full"
-  }, /* @__PURE__ */ React.createElement("p", {
-    className: "text-gray-700 text-lg"
-  }, "This is your dashboard for editing or creating content. Select a collection on the left to begin."))));
+    className: "relative left-0 w-full h-full bg-gray-50 shadow-2xl overflow-hidden transition-opacity duration-300 ease-out flex flex-col opacity-100"
+  }, children);
+};
+const PageHeader = ({
+  isLocalMode,
+  children
+}) => /* @__PURE__ */ React.createElement(React.Fragment, null, isLocalMode && /* @__PURE__ */ React.createElement(LocalWarning, null), /* @__PURE__ */ React.createElement("div", {
+  className: "bg-white pb-4 pt-18 border-b border-gray-200 px-12"
+}, /* @__PURE__ */ React.createElement("div", {
+  className: "w-full mx-auto max-w-screen-xl"
+}, /* @__PURE__ */ React.createElement("div", {
+  className: "w-full flex justify-between items-end"
+}, children))));
+const PageBody = ({
+  children
+}) => /* @__PURE__ */ React.createElement("div", {
+  className: "py-10 px-12"
+}, children);
+const PageBodyNarrow = ({
+  children
+}) => /* @__PURE__ */ React.createElement("div", {
+  className: "py-10 px-12"
+}, /* @__PURE__ */ React.createElement("div", {
+  className: "w-full mx-auto max-w-screen-xl"
+}, children));
+const DashboardPage = () => {
+  return /* @__PURE__ */ React.createElement(GetCMS, null, (cms) => {
+    var _a, _b;
+    return /* @__PURE__ */ React.createElement(PageWrapper, null, /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(PageHeader, {
+      isLocalMode: (_b = (_a = cms.api) == null ? void 0 : _a.tina) == null ? void 0 : _b.isLocalMode
+    }, /* @__PURE__ */ React.createElement("h3", {
+      className: "text-2xl text-gray-700"
+    }, "Welcome to Tina!")), /* @__PURE__ */ React.createElement(PageBodyNarrow, null, "This is your dashboard for editing or creating content. Select a collection on the left to begin.")));
+  });
 };
+function FiMoreVertical(props) {
+  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "child": [{ "tag": "circle", "attr": { "cx": "12", "cy": "12", "r": "1" } }, { "tag": "circle", "attr": { "cx": "12", "cy": "5", "r": "1" } }, { "tag": "circle", "attr": { "cx": "12", "cy": "19", "r": "1" } }] })(props);
+}
 const useGetCollection = (cms, collectionName, includeDocuments = true) => {
-  const api = new TinaAdminApi(cms.api.tina);
+  const api = new TinaAdminApi(cms);
   const [collection, setCollection] = useState(void 0);
   useEffect(() => {
     const fetchCollection = async () => {
@@ -3390,22 +3382,11 @@ 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, {
+  }, () => /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Menu.Button, {
+    className: "icon-parent inline-flex items-center font-medium focus:outline-none focus:ring-2 focus:shadow-outline text-center rounded-full justify-center transition-all duration-150 ease-out  shadow text-white bg-blue-500 hover:bg-blue-600 focus:ring-blue-500 text-sm h-10 px-6"
+  }, "Create New ", /* @__PURE__ */ React.createElement(BiPlus, {
+    className: "w-5 h-full ml-1 opacity-70"
+  }))), /* @__PURE__ */ React.createElement(Transition, {
     as: Fragment,
     enter: "transition ease-out duration-100",
     enterFrom: "transform opacity-0 scale-95",
@@ -3420,13 +3401,13 @@ const TemplateMenu = ({ templates }) => {
   }, templates.map((template) => /* @__PURE__ */ React.createElement(Menu.Item, {
     key: `${template.label}-${template.name}`
   }, ({ active }) => /* @__PURE__ */ React.createElement(Link, {
-    to: `${location.pathname}/${template.name}/new`,
+    to: `${template.name}/new`,
     className: `w-full text-md px-4 py-2 tracking-wide flex items-center opacity-80 text-gray-600 ${active && "text-gray-800 opacity-100"}`
   }, template.label))))))));
 };
 const CollectionListPage = () => {
-  const location2 = useLocation();
   const { collectionName } = useParams();
+  const navigate = useNavigate();
   return /* @__PURE__ */ React.createElement(GetCMS, null, (cms) => {
     const plugins = cms.plugins.all("tina-admin");
     const routeMapping = plugins.find(({ name }) => name === "route-mapping");
@@ -3435,68 +3416,117 @@ const CollectionListPage = () => {
       collectionName,
       includeDocuments: true
     }, (collection) => {
+      var _a, _b;
       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"
+      return /* @__PURE__ */ React.createElement(PageWrapper, null, /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(PageHeader, {
+        isLocalMode: (_b = (_a = cms == null ? void 0 : cms.api) == null ? void 0 : _a.tina) == null ? void 0 : _b.isLocalMode
+      }, /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("h3", {
+        className: "text-2xl text-gray-700"
       }, 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, {
+        to: `new`,
+        className: "icon-parent inline-flex items-center font-medium focus:outline-none focus:ring-2 focus:shadow-outline text-center rounded-full justify-center transition-all duration-150 ease-out  shadow text-white bg-blue-500 hover:bg-blue-600 focus:ring-blue-500 text-sm h-10 px-6"
+      }, "Create New", " ", /* @__PURE__ */ React.createElement(BiPlus, {
+        className: "w-5 h-full ml-1 opacity-70"
+      })), 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(PageBody, null, /* @__PURE__ */ React.createElement("div", {
+        className: "w-full mx-auto max-w-screen-xl"
+      }, totalCount > 0 && /* @__PURE__ */ React.createElement("table", {
+        className: "table-auto shadow bg-white border-b border-gray-200 w-full max-w-full rounded-lg"
       }, /* @__PURE__ */ React.createElement("tbody", {
-        className: "bg-white divide-y divide-gray-150"
+        className: "divide-y divide-gray-150"
       }, documents.map((document) => {
-        const livesiteRoute = routeMapping ? routeMapping.mapper(collection, document.node) : void 0;
+        const overrideRoute = routeMapping ? routeMapping.mapper(collection, document.node) : void 0;
         return /* @__PURE__ */ React.createElement("tr", {
-          key: document.node.sys.relativePath
+          key: `document-${document.node.sys.filename}`,
+          className: ""
         }, /* @__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}/${document.node.sys.filename}`,
-          className: "h-5 leading-5 flex max-w-xs"
+          className: "px-6 py-2 whitespace-nowrap"
+        }, overrideRoute && /* @__PURE__ */ React.createElement("a", {
+          className: "text-blue-600 hover:text-blue-400 flex items-center gap-3",
+          href: `${overrideRoute}`
+        }, /* @__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"
+        }, document.node.sys.filename))), !overrideRoute && /* @__PURE__ */ React.createElement(Link, {
+          className: "text-blue-600 hover:text-blue-400 flex items-center gap-3",
+          to: `${document.node.sys.filename}`
+        }, /* @__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"
+        }, document.node.sys.filename)))), /* @__PURE__ */ React.createElement("td", {
+          className: "px-6 py-4 whitespace-nowrap"
         }, /* @__PURE__ */ React.createElement("span", {
-          className: "flex-shrink-1 leading-5 font-medium text-base overflow-ellipsis overflow-hidden whitespace-nowrap text-gray-700"
-        }, document.node.sys.filename), /* @__PURE__ */ React.createElement("span", {
-          className: "flex-shrink-0 leading-5 text-base font-medium text-gray-300"
-        }, document.node.sys.extension))), /* @__PURE__ */ React.createElement("td", {
-          className: "px-5 py-3 whitespace-nowrap"
+          className: "block text-xs text-gray-400 mb-1 uppercase"
+        }, "Extension"), /* @__PURE__ */ React.createElement("span", {
+          className: "h-5 leading-5 block text-sm font-medium text-gray-900"
+        }, document.node.sys.extension)), /* @__PURE__ */ React.createElement("td", {
+          className: "px-6 py-4 whitespace-nowrap"
         }, /* @__PURE__ */ React.createElement("span", {
-          className: "block text-xs mb-0.5 text-gray-400 uppercase"
+          className: "block text-xs text-gray-400 mb-1 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"
-        }, document.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 text-base 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}/${document.node.sys.filename}`,
-          className: "flex gap-1.5 items-center text-base 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")));
-      }))))));
+          className: "h-5 leading-5 block text-sm font-medium text-gray-900"
+        }, document.node.sys.template)), overrideRoute && /* @__PURE__ */ React.createElement("td", {
+          className: "w-0"
+        }, /* @__PURE__ */ React.createElement(OverflowMenu, {
+          items: [
+            {
+              label: "Edit in Admin",
+              icon: BiEdit,
+              onClick: () => {
+                navigate(`${document.node.sys.filename}`, { replace: true });
+              }
+            }
+          ]
+        })));
+      })))))));
     });
   });
 };
+const OverflowMenu = ({ items = [] }) => {
+  if (items.length === 0)
+    return null;
+  return /* @__PURE__ */ React.createElement(Menu, null, ({ open }) => /* @__PURE__ */ React.createElement("div", {
+    className: "relative"
+  }, /* @__PURE__ */ React.createElement(Menu.Button, {
+    className: `flex-1 group px-5 py-3 flex justify-between items-center transition-all duration-300 ease-in-out transform`
+  }, /* @__PURE__ */ React.createElement(FiMoreVertical, {
+    className: `flex-0 w-6 h-full inline-block text-gray-400 transition-all duration-300 ease-in-out transform ${open ? `opacity-100 text-blue-500` : `opacity-70 group-hover:opacity-100`}`
+  })), /* @__PURE__ */ React.createElement("div", {
+    className: "transform translate-y-full absolute bottom-2 right-5 z-50"
+  }, /* @__PURE__ */ React.createElement(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.createElement(Menu.Items, {
+    className: "bg-white border border-gray-150 rounded-lg shadow-lg"
+  }, items.map((item) => {
+    const Icon = item.icon ? item.icon : BiExit;
+    return /* @__PURE__ */ React.createElement(Menu.Item, {
+      key: `menu-item-${item.label}`
+    }, ({ active }) => /* @__PURE__ */ React.createElement("button", {
+      className: `w-full text-base px-4 py-2 first:pt-3 last:pb-3 tracking-wide whitespace-nowrap flex items-center opacity-80 text-gray-600 ${active && "text-blue-400 bg-gray-50 opacity-100"}`,
+      onClick: item.onClick
+    }, /* @__PURE__ */ React.createElement(Icon, {
+      className: "w-6 h-auto mr-2 text-blue-400"
+    }), " ", item.label));
+  }))))));
+};
+function HiChevronRight(props) {
+  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 20 20", "fill": "currentColor" }, "child": [{ "tag": "path", "attr": { "fillRule": "evenodd", "d": "M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z", "clipRule": "evenodd" } }] })(props);
+}
 const useGetDocumentFields = (cms, collectionName, templateName) => {
-  const api = new TinaAdminApi(cms.api.tina);
+  const api = new TinaAdminApi(cms);
   const [info, setInfo] = useState({
     collection: void 0,
     template: void 0,
@@ -3541,7 +3571,7 @@ const GetDocumentFields = ({
   return /* @__PURE__ */ React.createElement(React.Fragment, null, children({ collection, template, fields, mutationInfo }));
 };
 const createDocument = async (cms, collection, template, mutationInfo, values) => {
-  const api = new TinaAdminApi(cms.api.tina);
+  const api = new TinaAdminApi(cms);
   const _a = values, { relativePath } = _a, leftover = __objRest(_a, ["relativePath"]);
   const { includeCollection, includeTemplate } = mutationInfo;
   const params = transformDocumentIntoMutationRequestPayload(__spreadValues(__spreadValues({
@@ -3554,13 +3584,24 @@ const createDocument = async (cms, collection, template, mutationInfo, values) =
 };
 const CollectionCreatePage = () => {
   const { collectionName, templateName } = useParams();
-  const navigate = useNavigate();
   return /* @__PURE__ */ React.createElement(GetCMS, null, (cms) => /* @__PURE__ */ React.createElement(GetDocumentFields, {
     cms,
     collectionName,
     templateName
-  }, ({ collection, template, fields, mutationInfo }) => {
-    const form = new Form({
+  }, ({ collection, template, fields, mutationInfo }) => /* @__PURE__ */ React.createElement(RenderForm$1, {
+    cms,
+    collection,
+    template,
+    fields,
+    mutationInfo
+  })));
+};
+const RenderForm$1 = ({ cms, collection, template, fields, mutationInfo }) => {
+  var _a, _b;
+  const navigate = useNavigate();
+  const [formIsPristine, setFormIsPristine] = useState(true);
+  const form = useMemo(() => {
+    return new Form({
       id: "create-form",
       label: "form",
       fields: [
@@ -3575,22 +3616,34 @@ const CollectionCreatePage = () => {
       ],
       onSubmit: async (values) => {
         await createDocument(cms, collection, template, mutationInfo, values);
-        navigate(`/admin/collections/${collection.name}`);
+        navigate(`/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: formLabel,
-      form
-    })));
-  }));
+  }, [cms, collection, template, fields, mutationInfo]);
+  return /* @__PURE__ */ React.createElement(PageWrapper, null, /* @__PURE__ */ React.createElement(React.Fragment, null, ((_b = (_a = cms == null ? void 0 : cms.api) == null ? void 0 : _a.tina) == null ? void 0 : _b.isLocalMode) && /* @__PURE__ */ React.createElement(LocalWarning, null), /* @__PURE__ */ React.createElement("div", {
+    className: "py-4 px-20 border-b border-gray-200 bg-white"
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: "max-w-form mx-auto"
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: "mb-2"
+  }, /* @__PURE__ */ React.createElement("span", {
+    className: "block text-sm leading-tight uppercase text-gray-400 mb-1"
+  }, /* @__PURE__ */ React.createElement(Link, {
+    to: `/collections/${collection.name}`,
+    className: "inline-block text-current hover:text-blue-400 focus:underline focus:outline-none focus:text-blue-400 font-medium transition-colors duration-150 ease-out"
+  }, collection.label), /* @__PURE__ */ React.createElement(HiChevronRight, {
+    className: "inline-block -mt-0.5 opacity-50"
+  })), /* @__PURE__ */ React.createElement("span", {
+    className: "text-xl text-gray-700 font-medium leading-tight"
+  }, "Create New")), /* @__PURE__ */ React.createElement(FormStatus, {
+    pristine: formIsPristine
+  }))), /* @__PURE__ */ React.createElement(FormBuilder, {
+    form,
+    onPristineChange: setFormIsPristine
+  })));
 };
 const useGetDocument = (cms, collectionName, relativePath) => {
-  const api = new TinaAdminApi(cms.api.tina);
+  const api = new TinaAdminApi(cms);
   const [document, setDocument] = useState(void 0);
   useEffect(() => {
     const fetchDocument = async () => {
@@ -3614,7 +3667,7 @@ const GetDocument = ({
   return /* @__PURE__ */ React.createElement(React.Fragment, null, children(document));
 };
 const updateDocument = async (cms, relativePath, collection, mutationInfo, values) => {
-  const api = new TinaAdminApi(cms.api.tina);
+  const api = new TinaAdminApi(cms);
   const { includeCollection, includeTemplate } = mutationInfo;
   const params = transformDocumentIntoMutationRequestPayload(values, {
     includeCollection,
@@ -3624,7 +3677,6 @@ const updateDocument = async (cms, relativePath, collection, mutationInfo, value
 };
 const CollectionUpdatePage = () => {
   const { collectionName, filename } = useParams();
-  const navigate = useNavigate();
   return /* @__PURE__ */ React.createElement(GetCMS, null, (cms) => /* @__PURE__ */ React.createElement(GetDocumentFields, {
     cms,
     collectionName
@@ -3634,28 +3686,77 @@ const CollectionUpdatePage = () => {
       cms,
       collectionName: collection.name,
       relativePath
-    }, (document) => {
-      const form = new Form({
-        id: "update-form",
-        label: "form",
-        fields: document.form.fields,
-        initialValues: document.values,
-        onSubmit: async (values) => {
-          await updateDocument(cms, relativePath, collection, mutationInfo, values);
-          navigate(`/collections/${collection.name}`);
-        }
-      });
-      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 + ` - ` + filename,
-        form
-      })));
-    });
+    }, (document) => /* @__PURE__ */ React.createElement(RenderForm, {
+      cms,
+      document,
+      filename,
+      relativePath,
+      collection,
+      mutationInfo
+    }));
   }));
 };
+const RenderForm = ({
+  cms,
+  document,
+  filename,
+  relativePath,
+  collection,
+  mutationInfo
+}) => {
+  var _a, _b;
+  const navigate = useNavigate();
+  const [formIsPristine, setFormIsPristine] = useState(true);
+  const form = useMemo(() => {
+    return new Form({
+      id: "update-form",
+      label: "form",
+      fields: document.form.fields,
+      initialValues: document.values,
+      onSubmit: async (values) => {
+        await updateDocument(cms, relativePath, collection, mutationInfo, values);
+        navigate(`/collections/${collection.name}`);
+      }
+    });
+  }, [cms, document, relativePath, collection, mutationInfo]);
+  return /* @__PURE__ */ React.createElement(PageWrapper, null, /* @__PURE__ */ React.createElement(React.Fragment, null, ((_b = (_a = cms == null ? void 0 : cms.api) == null ? void 0 : _a.tina) == null ? void 0 : _b.isLocalMode) && /* @__PURE__ */ React.createElement(LocalWarning, null), /* @__PURE__ */ React.createElement("div", {
+    className: "py-4 px-20 border-b border-gray-200 bg-white"
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: "max-w-form mx-auto"
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: "mb-2"
+  }, /* @__PURE__ */ React.createElement("span", {
+    className: "block text-sm leading-tight uppercase text-gray-400 mb-1"
+  }, /* @__PURE__ */ React.createElement(Link, {
+    to: `/collections/${collection.name}`,
+    className: "inline-block text-current hover:text-blue-400 focus:underline focus:outline-none focus:text-blue-400 font-medium transition-colors duration-150 ease-out"
+  }, collection.label), /* @__PURE__ */ React.createElement(HiChevronRight, {
+    className: "inline-block -mt-0.5 opacity-50"
+  })), /* @__PURE__ */ React.createElement("span", {
+    className: "text-xl text-gray-700 font-medium leading-tight"
+  }, "Edit ", `${filename}.${collection.format}`)), /* @__PURE__ */ React.createElement(FormStatus, {
+    pristine: formIsPristine
+  }))), /* @__PURE__ */ React.createElement(FormBuilder, {
+    form,
+    onPristineChange: setFormIsPristine
+  })));
+};
+const ScreenPage = () => {
+  const { screenName } = useParams();
+  return /* @__PURE__ */ React.createElement(GetCMS, null, (cms) => {
+    var _a, _b;
+    const screens = cms.plugins.getType("screen").all();
+    const selectedScreen = screens.find(({ name }) => slugify(name) === screenName);
+    return /* @__PURE__ */ React.createElement("div", {
+      className: "relative w-full h-full flex flex-col items-stretch justify-between"
+    }, ((_b = (_a = cms == null ? void 0 : cms.api) == null ? void 0 : _a.tina) == null ? void 0 : _b.isLocalMode) && /* @__PURE__ */ React.createElement(LocalWarning, null), /* @__PURE__ */ React.createElement("div", {
+      className: "flex-1 overflow-y-auto relative flex flex-col items-stretch justify-between"
+    }, /* @__PURE__ */ React.createElement(selectedScreen.Component, {
+      close: () => {
+      }
+    })));
+  });
+};
 const Redirect = () => {
   React.useEffect(() => {
     if (window) {
@@ -3676,34 +3777,41 @@ const TinaAdmin = () => {
   return /* @__PURE__ */ React.createElement(GetCMS, null, (cms) => {
     const isTinaAdminEnabled = cms.flags.get("tina-admin");
     if (isTinaAdminEnabled) {
-      return /* @__PURE__ */ React.createElement(Layout, null, /* @__PURE__ */ React.createElement(BrowserRouter, null, /* @__PURE__ */ React.createElement("div", {
+      return /* @__PURE__ */ React.createElement(Layout, null, /* @__PURE__ */ React.createElement(BrowserRouter, {
+        basename: "/admin"
+      }, /* @__PURE__ */ React.createElement("div", {
         className: "flex items-stretch h-screen overflow-hidden"
       }, /* @__PURE__ */ React.createElement(Sidebar, {
         cms
       }), /* @__PURE__ */ React.createElement("div", {
         className: "flex-1"
       }, /* @__PURE__ */ React.createElement(Routes, null, /* @__PURE__ */ React.createElement(Route, {
-        path: "/admin/collections/:collectionName/new",
+        path: "collections/:collectionName/new",
         element: /* @__PURE__ */ React.createElement(CollectionCreatePage, null)
       }), /* @__PURE__ */ React.createElement(Route, {
-        path: "/admin/collections/:collectionName/:templateName/new",
+        path: "collections/:collectionName/:templateName/new",
         element: /* @__PURE__ */ React.createElement(CollectionCreatePage, null)
       }), /* @__PURE__ */ React.createElement(Route, {
-        path: "/admin/collections/:collectionName/:filename",
+        path: "collections/:collectionName/:filename",
         element: /* @__PURE__ */ React.createElement(CollectionUpdatePage, null)
       }), /* @__PURE__ */ React.createElement(Route, {
-        path: "/admin/collections/:collectionName",
+        path: "collections/:collectionName",
         element: /* @__PURE__ */ React.createElement(CollectionListPage, null)
       }), /* @__PURE__ */ React.createElement(Route, {
-        path: "/admin",
+        path: "screens/:screenName",
+        element: /* @__PURE__ */ React.createElement(ScreenPage, null)
+      }), /* @__PURE__ */ React.createElement(Route, {
+        path: "/",
         element: /* @__PURE__ */ React.createElement(DashboardPage, null)
       }))))));
     } else {
-      return /* @__PURE__ */ React.createElement(Layout, null, /* @__PURE__ */ React.createElement(BrowserRouter, null, /* @__PURE__ */ React.createElement(Routes, null, /* @__PURE__ */ React.createElement(Route, {
-        path: "/admin/logout",
+      return /* @__PURE__ */ React.createElement(Layout, null, /* @__PURE__ */ React.createElement(BrowserRouter, {
+        basename: "/admin"
+      }, /* @__PURE__ */ React.createElement(Routes, null, /* @__PURE__ */ React.createElement(Route, {
+        path: "logout",
         element: /* @__PURE__ */ React.createElement(LogoutPage, null)
       }), /* @__PURE__ */ React.createElement(Route, {
-        path: "/admin",
+        path: "/",
         element: /* @__PURE__ */ React.createElement(Redirect, null)
       }))));
     }