tinacms 2.7.3 → 2.7.4

package/dist/index.mjs

@@ -43,6 +43,7 @@ import { twMerge } from "tailwind-merge";
 import { Command as Command$1 } from "cmdk";
 import { isHotkey } from "is-hotkey";
 import { Transforms, Element, Range, Path, Node, Editor as Editor$1 } from "slate";
+import { useWindowWidth } from "@react-hook/window-size";
 import get from "lodash.get";
 import moment from "moment";
 import { formatDistanceToNow } from "date-fns";
@@ -52,7 +53,6 @@ import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import { ELEMENT_PARAGRAPH as ELEMENT_PARAGRAPH$1 } from "@udecode/plate-paragraph";
 import { ELEMENT_BLOCKQUOTE as ELEMENT_BLOCKQUOTE$1 } from "@udecode/plate-block-quote";
 import { useFloatingToolbarState, offset, flip, useFloatingToolbar } from "@udecode/plate-floating";
-import { useWindowWidth } from "@react-hook/window-size";
 import { getIntrospectionQuery, buildClientSchema, print, parse as parse$3, buildSchema } from "graphql";
 import gql from "graphql-tag";
 import { TinaSchema, addNamespaceToSchema, parseURL, resolveForm, normalizePath, validateSchema } from "@tinacms/schema-tools";
@@ -9635,7 +9635,7 @@ let Alerts$1 = class Alerts {
     return this.add("error", message, timeout);
   }
 };
-const NoFormsPlaceholder = () => /* @__PURE__ */ React.createElement(
+const SidebarLoadingPlaceholder = () => /* @__PURE__ */ React.createElement(
   "div",
   {
     className: "relative flex flex-col items-center justify-center text-center p-5 pb-16 w-full h-full overflow-y-auto",
@@ -9648,25 +9648,8 @@ const NoFormsPlaceholder = () => /* @__PURE__ */ React.createElement(
       animationDuration: "150ms"
     }
   },
-  /* @__PURE__ */ React.createElement(Emoji$1, { className: "pb-5" }, "🔎"),
-  /* @__PURE__ */ React.createElement("p", { className: "block pb-5" }, "Looks like there's ", /* @__PURE__ */ React.createElement("br", null), "nothing to edit on ", /* @__PURE__ */ React.createElement("br", null), "this page."),
-  /* @__PURE__ */ React.createElement("p", { className: "block" }, /* @__PURE__ */ React.createElement(
-    Button$1,
-    {
-      href: "https://tina.io/docs/tinacms-context/",
-      target: "_blank",
-      as: "a"
-    },
-    /* @__PURE__ */ React.createElement(Emoji$1, { className: "mr-1.5" }, "📖"),
-    " Contextual Editing"
-  ))
-);
-const Emoji$1 = ({ className = "", ...props }) => /* @__PURE__ */ React.createElement(
-  "span",
-  {
-    className: `text-[24px] leading-none inline-block ${className}`,
-    ...props
-  }
+  /* @__PURE__ */ React.createElement("p", { className: "block pb-5" }, "Please wait while TinaCMS", /* @__PURE__ */ React.createElement("br", null), "loads your content"),
+  /* @__PURE__ */ React.createElement(LoadingDots, { color: "var(--tina-color-primary)" })
 );
 class SidebarState {
   constructor(events, options = {}) {
@@ -9681,7 +9664,7 @@ class SidebarState {
     };
     this.position = options.position || "displace";
     this.renderNav = options.renderNav || true;
-    this.placeholder = options.placeholder || NoFormsPlaceholder;
+    this.loadingPlaceholder = options.placeholder || SidebarLoadingPlaceholder;
     if ((_a = options.buttons) == null ? void 0 : _a.save) {
       this.buttons.save = options.buttons.save;
     }
@@ -9755,238 +9738,6 @@ const ModalLayout = ({ children, name, close: close2, layout }) => {
     children
   )));
 };
-const Item = ({
-  item,
-  depth,
-  setActiveFormId
-}) => {
-  const cms = useCMS();
-  const depths = ["pl-6", "pl-10", "pl-14"];
-  const form = React.useMemo(
-    () => cms.state.forms.find(({ tinaForm }) => item.formId === tinaForm.id),
-    [item.formId]
-  );
-  return /* @__PURE__ */ React.createElement(
-    "button",
-    {
-      type: "button",
-      key: item.path,
-      onClick: () => setActiveFormId(item.formId),
-      className: `${depths[depth] || "pl-12"} pr-6 py-3 w-full h-full bg-transparent border-none text-lg text-gray-700 group hover:bg-gray-50 transition-all ease-out duration-150 flex items-center justify-between gap-2`
-    },
-    /* @__PURE__ */ React.createElement(BiEdit, { className: "opacity-70 w-5 h-auto text-blue-500 flex-none" }),
-    /* @__PURE__ */ React.createElement("div", { className: "flex-1 flex flex-col gap-0.5 items-start" }, /* @__PURE__ */ React.createElement("div", { className: "group-hover:text-blue-500 font-sans text-xs font-semibold text-gray-700 whitespace-normal" }, form.tinaForm.label), /* @__PURE__ */ React.createElement("div", { className: "group-hover:text-blue-500 text-base truncate leading-tight text-gray-600" }, form.tinaForm.id))
-  );
-};
-const FormListItem = ({
-  item,
-  depth,
-  setActiveFormId
-}) => {
-  var _a;
-  return /* @__PURE__ */ React.createElement("div", { className: "divide-y divide-gray-200" }, /* @__PURE__ */ React.createElement(Item, { setActiveFormId, item, depth }), item.subItems && /* @__PURE__ */ React.createElement("ul", { className: "divide-y divide-gray-200" }, (_a = item.subItems) == null ? void 0 : _a.map((subItem) => {
-    if (subItem.type === "document") {
-      return /* @__PURE__ */ React.createElement("li", { key: subItem.formId }, /* @__PURE__ */ React.createElement(
-        Item,
-        {
-          setActiveFormId,
-          depth: depth + 1,
-          item: subItem
-        }
-      ));
-    }
-  })));
-};
-const FormLists = (props) => {
-  const cms = useCMS();
-  return /* @__PURE__ */ React.createElement(
-    Transition,
-    {
-      appear: true,
-      show: true,
-      as: "div",
-      enter: "transition-all ease-out duration-150",
-      enterFrom: "opacity-0 -translate-x-1/2",
-      enterTo: "opacity-100",
-      leave: "transition-all ease-out duration-150",
-      leaveFrom: "opacity-100",
-      leaveTo: "opacity-0 -translate-x-1/2"
-    },
-    cms.state.formLists.map((formList, index) => /* @__PURE__ */ React.createElement("div", { key: `${formList.id}-${index}`, className: "pt-16" }, /* @__PURE__ */ React.createElement(
-      FormList,
-      {
-        isEditing: props.isEditing,
-        setActiveFormId: (id) => {
-          cms.dispatch({ type: "forms:set-active-form-id", value: id });
-        },
-        formList
-      }
-    )))
-  );
-};
-const FormList = (props) => {
-  const cms = useCMS();
-  const listItems = React.useMemo(() => {
-    var _a;
-    const orderedListItems = [];
-    const globalItems = [];
-    const topItems = [];
-    props.formList.items.forEach((item) => {
-      if (item.type === "document") {
-        const form = cms.state.forms.find(
-          ({ tinaForm }) => tinaForm.id === item.formId
-        );
-        if (form.tinaForm.global) {
-          globalItems.push(item);
-        } else {
-          orderedListItems.push(item);
-        }
-      } else {
-        orderedListItems.push(item);
-      }
-    });
-    if (((_a = orderedListItems[0]) == null ? void 0 : _a.type) === "document") {
-      topItems.push({ type: "list", label: "Documents" });
-    }
-    let extra = [];
-    if (globalItems.length) {
-      extra = [{ type: "list", label: "Global Documents" }, ...globalItems];
-    }
-    return [...topItems, ...orderedListItems, ...extra];
-  }, [JSON.stringify(props.formList.items)]);
-  return /* @__PURE__ */ React.createElement("ul", null, /* @__PURE__ */ React.createElement("li", { className: "divide-y divide-gray-200" }, listItems.map((item, index) => {
-    if (item.type === "list") {
-      return /* @__PURE__ */ React.createElement(
-        "div",
-        {
-          key: item.label,
-          className: `relative group text-left w-full bg-white shadow-sm
-   border-gray-100 px-6 -mt-px pb-3 ${index > 0 ? "pt-6 bg-gradient-to-b from-gray-50 via-white to-white" : "pt-3"}`
-        },
-        /* @__PURE__ */ React.createElement(
-          "span",
-          {
-            className: "text-sm tracking-wide font-bold text-gray-700 uppercase"
-          },
-          item.label
-        )
-      );
-    }
-    return /* @__PURE__ */ React.createElement(
-      FormListItem,
-      {
-        setActiveFormId: (id) => props.setActiveFormId(id),
-        key: item.formId,
-        item,
-        depth: 0
-      }
-    );
-  })));
-};
-const FormsView = ({
-  children
-}) => {
-  const cms = useCMS$1();
-  const { setFormIsPristine } = React.useContext(SidebarContext);
-  const isMultiform = cms.state.forms.length > 1;
-  const activeForm = cms.state.forms.find(
-    ({ tinaForm }) => tinaForm.id === cms.state.activeFormId
-  );
-  const isEditing = !!activeForm;
-  if (!cms.state.formLists.length) {
-    return /* @__PURE__ */ React.createElement(React.Fragment, null, " ", children, " ");
-  }
-  if (isMultiform && !activeForm) {
-    return /* @__PURE__ */ React.createElement(FormLists, { isEditing });
-  }
-  const formMetas = cms.plugins.all("form:meta");
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, activeForm && /* @__PURE__ */ React.createElement(FormWrapper$1, { isEditing, isMultiform }, isMultiform && /* @__PURE__ */ React.createElement(MultiformFormHeader, { activeForm }), !isMultiform && /* @__PURE__ */ React.createElement(FormHeader, { activeForm }), formMetas == null ? void 0 : formMetas.map((meta) => /* @__PURE__ */ React.createElement(React.Fragment, { key: meta.name }, /* @__PURE__ */ React.createElement(meta.Component, null))), /* @__PURE__ */ React.createElement(FormBuilder, { form: activeForm, onPristineChange: setFormIsPristine })));
-};
-const FormWrapper$1 = ({ isEditing, children }) => {
-  return /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      className: "flex-1 flex flex-col flex-nowrap overflow-hidden h-full w-full relative bg-white",
-      style: isEditing ? {
-        transform: "none",
-        animationName: "fly-in-left",
-        animationDuration: "150ms",
-        animationDelay: "0",
-        animationIterationCount: 1,
-        animationTimingFunction: "ease-out"
-      } : {
-        transform: "translate3d(100%, 0, 0)"
-      }
-    },
-    children
-  );
-};
-const MultiformFormHeader = ({
-  activeForm
-}) => {
-  const cms = useCMS$1();
-  const { formIsPristine } = React.useContext(SidebarContext);
-  return /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      className: "pt-18 pb-4 px-6 border-b border-gray-200 bg-gradient-to-t from-white to-gray-50"
-    },
-    /* @__PURE__ */ React.createElement("div", { className: "max-w-form mx-auto flex gap-2 justify-between items-center" }, /* @__PURE__ */ React.createElement(
-      "button",
-      {
-        type: "button",
-        className: "pointer-events-auto text-xs text-blue-400 hover:text-blue-500 hover:underline transition-all ease-out duration-150",
-        onClick: () => {
-          const state = activeForm.tinaForm.finalForm.getState();
-          if (state.invalid === true) {
-            cms.alerts.error("Cannot navigate away from an invalid form.");
-          } else {
-            cms.dispatch({ type: "forms:set-active-form-id", value: null });
-          }
-        }
-      },
-      /* @__PURE__ */ React.createElement(BiDotsVertical, { className: "h-auto w-5 inline-block opacity-70" })
-    ), /* @__PURE__ */ React.createElement(
-      "button",
-      {
-        type: "button",
-        className: "pointer-events-auto text-xs text-blue-400 hover:text-blue-500 hover:underline transition-all ease-out duration-150",
-        onClick: () => {
-          const collectionName = cms.api.tina.schema.getCollectionByFullPath(
-            cms.state.activeFormId
-          ).name;
-          window.location.href = `${new URL(window.location.href).pathname}#/collections/${collectionName}/~`;
-        }
-      },
-      /* @__PURE__ */ React.createElement(BiHomeAlt, { className: "h-auto w-5 inline-block opacity-70" })
-    ), /* @__PURE__ */ React.createElement("span", { className: "opacity-30 text-sm leading-tight whitespace-nowrap flex-0" }, "/"), /* @__PURE__ */ React.createElement("span", { className: "block w-full text-sm leading-tight whitespace-nowrap truncate" }, activeForm.tinaForm.label || activeForm.tinaForm.id), /* @__PURE__ */ React.createElement(FormStatus, { pristine: formIsPristine }))
-  );
-};
-const FormHeader = ({ activeForm }) => {
-  const { formIsPristine } = React.useContext(SidebarContext);
-  const cms = useCMS$1();
-  const shortFormLabel = activeForm.tinaForm.label ? activeForm.tinaForm.label.replace(/^.*[\\\/]/, "") : false;
-  return /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      className: "pt-18 pb-4 px-6 border-b border-gray-200 bg-gradient-to-t from-white to-gray-50"
-    },
-    /* @__PURE__ */ React.createElement("div", { className: "max-w-form mx-auto flex gap-2 justify-between items-center" }, /* @__PURE__ */ React.createElement(
-      "button",
-      {
-        type: "button",
-        className: "pointer-events-auto text-xs text-blue-400 hover:text-blue-500 hover:underline transition-all ease-out duration-150",
-        onClick: () => {
-          const collectionName = cms.api.tina.schema.getCollectionByFullPath(
-            cms.state.activeFormId
-          ).name;
-          window.location.href = `${new URL(window.location.href).pathname}#/collections/${collectionName}/~`;
-        }
-      },
-      /* @__PURE__ */ React.createElement(BiHomeAlt, { className: "h-auto w-5 inline-block opacity-70" })
-    ), shortFormLabel && /* @__PURE__ */ React.createElement("span", { className: "block w-full text-sm leading-tight whitespace-nowrap truncate" }, shortFormLabel), /* @__PURE__ */ React.createElement(FormStatus, { pristine: formIsPristine }))
-  );
-};
 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" }, "child": [] }, { "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" }, "child": [] }] })(props);
 }
@@ -10229,7 +9980,7 @@ const SyncStatus = ({ cms, setEventsOpen }) => {
     "Event Log"
   ));
 };
-const version = "2.7.3";
+const version = "2.7.4";
 const Nav = ({
   isLocalMode,
   className = "",
@@ -10274,201 +10025,488 @@ const Nav = ({
       acc[category].push(screen);
       return acc;
     },
-    { Site: [] }
+    { Site: [] }
+  );
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: `relative z-30 flex flex-col bg-white border-r border-gray-200 w-96 h-full ${className}`,
+      style: { maxWidth: `${sidebarWidth}px` },
+      ...props
+    },
+    /* @__PURE__ */ React.createElement("div", { className: "border-b border-gray-200" }, /* @__PURE__ */ React.createElement(Menu, { as: "div", className: "relative block" }, ({ open: open2 }) => /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
+      MenuButton,
+      {
+        className: `group w-full px-6 py-3 gap-2 flex justify-between items-center transition-colors duration-150 ease-out ${open2 ? "bg-gray-50" : "bg-transparent"}`
+      },
+      /* @__PURE__ */ React.createElement("span", { className: "text-left inline-flex items-center text-xl 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")),
+      /* @__PURE__ */ React.createElement(SyncErrorWidget, { cms }),
+      /* @__PURE__ */ React.createElement(
+        FiMoreVertical,
+        {
+          className: `flex-0 w-6 h-full inline-block group-hover:opacity-80 transition-all duration-300 ease-in-out transform ${open2 ? "opacity-100 text-blue-400" : "text-gray-400 opacity-50 hover:opacity-70"}`
+        }
+      )
+    ), /* @__PURE__ */ React.createElement("div", { className: "transform translate-y-full absolute bottom-3 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(MenuItems, { className: "bg-white border border-gray-150 rounded-lg shadow-lg flex flex-col items-stretch overflow-hidden" }, /* @__PURE__ */ React.createElement(MenuItem, null, /* @__PURE__ */ React.createElement(
+        "button",
+        {
+          className: `text-lg px-4 py-2 first:pt-3 last:pb-3 tracking-wide whitespace-nowrap flex items-center opacity-80 text-gray-600 hover:text-blue-400 hover:bg-gray-50 hover:opacity-100`,
+          onClick: async () => {
+            var _a, _b, _c, _d, _e, _f, _g, _h;
+            updateBodyDisplacement({
+              displayState: "closed",
+              sidebarWidth: null,
+              resizingSidebar: false
+            });
+            try {
+              if ((_c = (_b = (_a = cms == null ? void 0 : cms.api) == null ? void 0 : _a.tina) == null ? void 0 : _b.authProvider) == null ? void 0 : _c.logout) {
+                await ((_d = cms.api.tina) == null ? void 0 : _d.authProvider.logout());
+                if ((_f = (_e = cms == null ? void 0 : cms.api) == null ? void 0 : _e.tina) == null ? void 0 : _f.onLogout) {
+                  await ((_h = (_g = cms == null ? void 0 : cms.api) == null ? void 0 : _g.tina) == null ? void 0 : _h.onLogout());
+                  await new Promise(
+                    (resolve) => setTimeout(resolve, 500)
+                  );
+                }
+                window.location.href = new URL(
+                  window.location.href
+                ).pathname;
+              }
+            } catch (e) {
+              cms.alerts.error(`Error logging out: ${e}`);
+              console.error("Unexpected error calling logout");
+              console.error(e);
+            }
+          }
+        },
+        /* @__PURE__ */ React.createElement(BiExit, { className: "w-6 h-auto mr-2 text-blue-400" }),
+        " Log Out"
+      )), /* @__PURE__ */ React.createElement(MenuItem, null, /* @__PURE__ */ React.createElement(
+        WrappedSyncStatus,
+        {
+          cms,
+          setEventsOpen
+        }
+      )))
+    ))))),
+    eventsOpen && /* @__PURE__ */ React.createElement(SyncStatusModal, { cms, closeEventsModal }),
+    children,
+    /* @__PURE__ */ React.createElement("div", { className: "flex flex-col px-6 flex-1 overflow-auto" }, showCollections && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("h4", { className: "flex space-x-1 justify-items-start uppercase font-sans font-bold text-sm mb-3 mt-8 text-gray-700" }, /* @__PURE__ */ React.createElement("span", null, "Collections"), isLocalMode && /* @__PURE__ */ React.createElement("span", { className: "flex items-center" }, /* @__PURE__ */ React.createElement(
+      "a",
+      {
+        href: "https://tina.io/docs/schema/#defining-collections",
+        target: "_blank"
+      },
+      /* @__PURE__ */ React.createElement(FiInfo, null)
+    ))), /* @__PURE__ */ React.createElement(
+      CollectionsList,
+      {
+        RenderNavCollection,
+        collections: contentCollections
+      }
+    )), (screenCategories.Site.length > 0 || contentCreators.length) > 0 && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("h4", { className: "uppercase font-sans font-bold text-sm mb-3 mt-8 text-gray-700" }, "Site"), /* @__PURE__ */ React.createElement("ul", { className: "flex flex-col gap-4" }, screenCategories.Site.map((view) => {
+      return /* @__PURE__ */ React.createElement("li", { key: `nav-site-${view.name}` }, /* @__PURE__ */ React.createElement(RenderNavSite, { view }));
+    }), contentCreators.map((plugin, idx) => {
+      return /* @__PURE__ */ React.createElement(CreateContentNavItem, { key: `plugin-${idx}`, plugin });
+    }), authCollection && /* @__PURE__ */ React.createElement(
+      CollectionsList,
+      {
+        RenderNavCollection: AuthRenderNavCollection,
+        collections: [authCollection]
+      }
+    ))), Object.entries(screenCategories).map(([category, screens2]) => {
+      if (category !== "Site") {
+        return /* @__PURE__ */ React.createElement("div", { key: category }, /* @__PURE__ */ React.createElement("h4", { className: "uppercase font-sans font-bold text-sm mb-3 mt-8 text-gray-700" }, category), /* @__PURE__ */ React.createElement("ul", { className: "flex flex-col gap-4" }, screens2.map((view) => {
+          return /* @__PURE__ */ React.createElement("li", { key: `nav-site-${view.name}` }, /* @__PURE__ */ React.createElement(RenderNavSite, { view }));
+        })));
+      }
+    }), !!(cloudConfigs == null ? void 0 : cloudConfigs.length) && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("h4", { className: "uppercase font-sans font-bold text-sm mb-3 mt-8 text-gray-700" }, "Cloud"), /* @__PURE__ */ React.createElement("ul", { className: "flex flex-col gap-4" }, cloudConfigs.map((config) => {
+      return /* @__PURE__ */ React.createElement("li", { key: `nav-site-${config.name}` }, /* @__PURE__ */ React.createElement(RenderNavCloud, { config }));
+    }))), /* @__PURE__ */ React.createElement("div", { className: "grow" }), /* @__PURE__ */ React.createElement("span", { className: "font-sans font-light text-xs mb-3 mt-8 text-gray-500" }, "v", version))
+  );
+};
+const CollectionsList = ({
+  collections,
+  RenderNavCollection
+}) => {
+  if (collections.length === 0) {
+    return /* @__PURE__ */ React.createElement("div", null, "No collections found");
+  }
+  return /* @__PURE__ */ React.createElement("ul", { className: "flex flex-col gap-4" }, collections.map((collection) => {
+    return /* @__PURE__ */ React.createElement("li", { key: `nav-collection-${collection.name}` }, /* @__PURE__ */ React.createElement(RenderNavCollection, { collection }));
+  }));
+};
+const CreateContentNavItem = ({ plugin }) => {
+  const [open2, setOpen] = React.useState(false);
+  return /* @__PURE__ */ React.createElement("li", { key: plugin.name }, /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      className: "text-base tracking-wide text-gray-500 hover:text-blue-600 flex items-center opacity-90 hover:opacity-100",
+      onClick: () => {
+        setOpen(true);
+      }
+    },
+    /* @__PURE__ */ React.createElement(VscNewFile, { className: "mr-3 h-6 opacity-80 w-auto" }),
+    " ",
+    plugin.name
+  ), open2 && /* @__PURE__ */ React.createElement(FormModal, { plugin, close: () => setOpen(false) }));
+};
+const ResizeHandle = () => {
+  const {
+    resizingSidebar,
+    setResizingSidebar,
+    fullscreen,
+    setSidebarWidth,
+    displayState
+  } = React.useContext(SidebarContext);
+  React.useEffect(() => {
+    const handleMouseUp = () => setResizingSidebar(false);
+    window.addEventListener("mouseup", handleMouseUp);
+    return () => {
+      window.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, []);
+  React.useEffect(() => {
+    const handleMouseMove = (e) => {
+      setSidebarWidth((sidebarWidth) => {
+        const newWidth = sidebarWidth + e.movementX;
+        const maxWidth = window.innerWidth - 8;
+        if (newWidth < minSidebarWidth) {
+          return minSidebarWidth;
+        } else if (newWidth > maxWidth) {
+          return maxWidth;
+        } else {
+          return newWidth;
+        }
+      });
+    };
+    if (resizingSidebar) {
+      window.addEventListener("mousemove", handleMouseMove);
+      document.body.classList.add("select-none");
+    }
+    return () => {
+      window.removeEventListener("mousemove", handleMouseMove);
+      document.body.classList.remove("select-none");
+    };
+  }, [resizingSidebar]);
+  const handleresizingSidebar = () => setResizingSidebar(true);
+  if (fullscreen) {
+    return null;
+  }
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      onMouseDown: handleresizingSidebar,
+      className: `z-100 absolute top-1/2 right-px w-2 h-32 bg-white rounded-r-md border border-gray-150 shadow-sm hover:shadow-md origin-left transition-all duration-150 ease-out transform translate-x-full -translate-y-1/2 group hover:bg-gray-50 ${displayState !== "closed" ? `opacity-100` : `opacity-0`} ${resizingSidebar ? `scale-110` : `scale-90 hover:scale-100`}`,
+      style: { cursor: "grab" }
+    },
+    /* @__PURE__ */ React.createElement("span", { className: "absolute top-1/2 left-1/2 h-4/6 w-px bg-gray-200 transform -translate-y-1/2 -translate-x-1/2 opacity-30 transition-opacity duration-150 ease-out group-hover:opacity-100" })
+  );
+};
+const Item = ({
+  item,
+  depth,
+  setActiveFormId
+}) => {
+  const cms = useCMS();
+  const depths = ["pl-6", "pl-10", "pl-14"];
+  const form = React.useMemo(
+    () => cms.state.forms.find(({ tinaForm }) => item.formId === tinaForm.id),
+    [item.formId]
+  );
+  return /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      type: "button",
+      key: item.path,
+      onClick: () => setActiveFormId(item.formId),
+      className: `${depths[depth] || "pl-12"} pr-6 py-3 w-full h-full bg-transparent border-none text-lg text-gray-700 group hover:bg-gray-50 transition-all ease-out duration-150 flex items-center justify-between gap-2`
+    },
+    /* @__PURE__ */ React.createElement(BiEdit, { className: "opacity-70 w-5 h-auto text-blue-500 flex-none" }),
+    /* @__PURE__ */ React.createElement("div", { className: "flex-1 flex flex-col gap-0.5 items-start" }, /* @__PURE__ */ React.createElement("div", { className: "group-hover:text-blue-500 font-sans text-xs font-semibold text-gray-700 whitespace-normal" }, form.tinaForm.label), /* @__PURE__ */ React.createElement("div", { className: "group-hover:text-blue-500 text-base truncate leading-tight text-gray-600" }, form.tinaForm.id))
+  );
+};
+const FormListItem = ({
+  item,
+  depth,
+  setActiveFormId
+}) => {
+  var _a;
+  return /* @__PURE__ */ React.createElement("div", { className: "divide-y divide-gray-200" }, /* @__PURE__ */ React.createElement(Item, { setActiveFormId, item, depth }), item.subItems && /* @__PURE__ */ React.createElement("ul", { className: "divide-y divide-gray-200" }, (_a = item.subItems) == null ? void 0 : _a.map((subItem) => {
+    if (subItem.type === "document") {
+      return /* @__PURE__ */ React.createElement("li", { key: subItem.formId }, /* @__PURE__ */ React.createElement(
+        Item,
+        {
+          setActiveFormId,
+          depth: depth + 1,
+          item: subItem
+        }
+      ));
+    }
+  })));
+};
+const FormLists = (props) => {
+  const cms = useCMS();
+  return /* @__PURE__ */ React.createElement(
+    Transition,
+    {
+      appear: true,
+      show: true,
+      as: "div",
+      enter: "transition-all ease-out duration-150",
+      enterFrom: "opacity-0 -translate-x-1/2",
+      enterTo: "opacity-100",
+      leave: "transition-all ease-out duration-150",
+      leaveFrom: "opacity-100",
+      leaveTo: "opacity-0 -translate-x-1/2"
+    },
+    cms.state.formLists.map((formList, index) => /* @__PURE__ */ React.createElement("div", { key: `${formList.id}-${index}`, className: "pt-16" }, /* @__PURE__ */ React.createElement(
+      FormList,
+      {
+        isEditing: props.isEditing,
+        setActiveFormId: (id) => {
+          cms.dispatch({ type: "forms:set-active-form-id", value: id });
+        },
+        formList
+      }
+    )))
+  );
+};
+const FormList = (props) => {
+  const cms = useCMS();
+  const listItems = React.useMemo(() => {
+    var _a;
+    const orderedListItems = [];
+    const globalItems = [];
+    const topItems = [];
+    props.formList.items.forEach((item) => {
+      if (item.type === "document") {
+        const form = cms.state.forms.find(
+          ({ tinaForm }) => tinaForm.id === item.formId
+        );
+        if (form.tinaForm.global) {
+          globalItems.push(item);
+        } else {
+          orderedListItems.push(item);
+        }
+      } else {
+        orderedListItems.push(item);
+      }
+    });
+    if (((_a = orderedListItems[0]) == null ? void 0 : _a.type) === "document") {
+      topItems.push({ type: "list", label: "Documents" });
+    }
+    let extra = [];
+    if (globalItems.length) {
+      extra = [{ type: "list", label: "Global Documents" }, ...globalItems];
+    }
+    return [...topItems, ...orderedListItems, ...extra];
+  }, [JSON.stringify(props.formList.items)]);
+  return /* @__PURE__ */ React.createElement("ul", null, /* @__PURE__ */ React.createElement("li", { className: "divide-y divide-gray-200" }, listItems.map((item, index) => {
+    if (item.type === "list") {
+      return /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          key: item.label,
+          className: `relative group text-left w-full bg-white shadow-sm
+   border-gray-100 px-6 -mt-px pb-3 ${index > 0 ? "pt-6 bg-gradient-to-b from-gray-50 via-white to-white" : "pt-3"}`
+        },
+        /* @__PURE__ */ React.createElement(
+          "span",
+          {
+            className: "text-sm tracking-wide font-bold text-gray-700 uppercase"
+          },
+          item.label
+        )
+      );
+    }
+    return /* @__PURE__ */ React.createElement(
+      FormListItem,
+      {
+        setActiveFormId: (id) => props.setActiveFormId(id),
+        key: item.formId,
+        item,
+        depth: 0
+      }
+    );
+  })));
+};
+const SidebarNoFormsPlaceholder = () => /* @__PURE__ */ React.createElement(
+  "div",
+  {
+    className: "relative flex flex-col items-center justify-center text-center p-5 pb-16 w-full h-full overflow-y-auto",
+    style: {
+      animationName: "fade-in",
+      animationDelay: "300ms",
+      animationTimingFunction: "ease-out",
+      animationIterationCount: 1,
+      animationFillMode: "both",
+      animationDuration: "150ms"
+    }
+  },
+  /* @__PURE__ */ React.createElement("p", { className: "block pb-5" }, "Looks like there's ", /* @__PURE__ */ React.createElement("br", null), "nothing to edit on ", /* @__PURE__ */ React.createElement("br", null), "this page."),
+  /* @__PURE__ */ React.createElement("p", { className: "block pt-5" }, /* @__PURE__ */ React.createElement(
+    Button$1,
+    {
+      href: "https://tina.io/docs/contextual-editing/overview",
+      target: "_blank",
+      as: "a"
+    },
+    /* @__PURE__ */ React.createElement(Emoji$1, { className: "mr-1.5" }, "📖"),
+    " Contextual Editing Docs"
+  ))
+);
+const Emoji$1 = ({ className = "", ...props }) => /* @__PURE__ */ React.createElement(
+  "span",
+  {
+    className: `text-[24px] leading-none inline-block ${className}`,
+    ...props
+  }
+);
+const minimumTimeToShowLoadingIndicator = 1e3;
+const FormsView = ({ loadingPlaceholder } = {}) => {
+  const cms = useCMS$1();
+  const { setFormIsPristine } = React.useContext(SidebarContext);
+  const [isShowingLoading, setIsShowingLoading] = React.useState(true);
+  const [initialLoadComplete, setInitialLoadComplete] = React.useState(false);
+  React.useEffect(() => {
+    if (cms.state.isLoadingContent) {
+      setIsShowingLoading(true);
+      const timer = setTimeout(() => {
+        if (!cms.state.isLoadingContent) {
+          setIsShowingLoading(false);
+          setInitialLoadComplete(true);
+        }
+      }, minimumTimeToShowLoadingIndicator);
+      return () => clearTimeout(timer);
+    } else {
+      const timer = setTimeout(() => {
+        setIsShowingLoading(false);
+        setInitialLoadComplete(true);
+      }, minimumTimeToShowLoadingIndicator);
+      return () => clearTimeout(timer);
+    }
+  }, [cms.state.isLoadingContent]);
+  if (isShowingLoading || !initialLoadComplete) {
+    const LoadingPlaceholder = loadingPlaceholder || SidebarLoadingPlaceholder;
+    return /* @__PURE__ */ React.createElement(LoadingPlaceholder, null);
+  }
+  if (!cms.state.formLists.length) {
+    return /* @__PURE__ */ React.createElement(SidebarNoFormsPlaceholder, null);
+  }
+  const isMultiform = cms.state.forms.length > 1;
+  const activeForm = cms.state.forms.find(
+    ({ tinaForm }) => tinaForm.id === cms.state.activeFormId
+  );
+  const isEditing = !!activeForm;
+  if (isMultiform && !activeForm) {
+    return /* @__PURE__ */ React.createElement(FormLists, { isEditing });
+  }
+  const formMetas = cms.plugins.all("form:meta");
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, activeForm && /* @__PURE__ */ React.createElement(FormWrapper$1, { isEditing, isMultiform }, isMultiform && /* @__PURE__ */ React.createElement(MultiformFormHeader, { activeForm }), !isMultiform && /* @__PURE__ */ React.createElement(FormHeader, { activeForm }), formMetas == null ? void 0 : formMetas.map((meta) => /* @__PURE__ */ React.createElement(React.Fragment, { key: meta.name }, /* @__PURE__ */ React.createElement(meta.Component, null))), /* @__PURE__ */ React.createElement(FormBuilder, { form: activeForm, onPristineChange: setFormIsPristine })));
+};
+const FormWrapper$1 = ({ isEditing, children }) => {
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: "flex-1 flex flex-col flex-nowrap overflow-hidden h-full w-full relative bg-white",
+      style: isEditing ? {
+        transform: "none",
+        animationName: "fly-in-left",
+        animationDuration: "150ms",
+        animationDelay: "0",
+        animationIterationCount: 1,
+        animationTimingFunction: "ease-out"
+      } : {
+        transform: "translate3d(100%, 0, 0)"
+      }
+    },
+    children
   );
+};
+const MultiformFormHeader = ({
+  activeForm
+}) => {
+  const cms = useCMS$1();
+  const { formIsPristine } = React.useContext(SidebarContext);
   return /* @__PURE__ */ React.createElement(
     "div",
     {
-      className: `relative z-30 flex flex-col bg-white border-r border-gray-200 w-96 h-full ${className}`,
-      style: { maxWidth: `${sidebarWidth}px` },
-      ...props
+      className: "pt-18 pb-4 px-6 border-b border-gray-200 bg-gradient-to-t from-white to-gray-50"
     },
-    /* @__PURE__ */ React.createElement("div", { className: "border-b border-gray-200" }, /* @__PURE__ */ React.createElement(Menu, { as: "div", className: "relative block" }, ({ open: open2 }) => /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
-      MenuButton,
-      {
-        className: `group w-full px-6 py-3 gap-2 flex justify-between items-center transition-colors duration-150 ease-out ${open2 ? "bg-gray-50" : "bg-transparent"}`
-      },
-      /* @__PURE__ */ React.createElement("span", { className: "text-left inline-flex items-center text-xl 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")),
-      /* @__PURE__ */ React.createElement(SyncErrorWidget, { cms }),
-      /* @__PURE__ */ React.createElement(
-        FiMoreVertical,
-        {
-          className: `flex-0 w-6 h-full inline-block group-hover:opacity-80 transition-all duration-300 ease-in-out transform ${open2 ? "opacity-100 text-blue-400" : "text-gray-400 opacity-50 hover:opacity-70"}`
-        }
-      )
-    ), /* @__PURE__ */ React.createElement("div", { className: "transform translate-y-full absolute bottom-3 right-5 z-50" }, /* @__PURE__ */ React.createElement(
-      Transition,
+    /* @__PURE__ */ React.createElement("div", { className: "max-w-form mx-auto flex gap-2 justify-between items-center" }, /* @__PURE__ */ React.createElement(
+      "button",
       {
-        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(MenuItems, { className: "bg-white border border-gray-150 rounded-lg shadow-lg flex flex-col items-stretch overflow-hidden" }, /* @__PURE__ */ React.createElement(MenuItem, null, /* @__PURE__ */ React.createElement(
-        "button",
-        {
-          className: `text-lg px-4 py-2 first:pt-3 last:pb-3 tracking-wide whitespace-nowrap flex items-center opacity-80 text-gray-600 hover:text-blue-400 hover:bg-gray-50 hover:opacity-100`,
-          onClick: async () => {
-            var _a, _b, _c, _d, _e, _f, _g, _h;
-            updateBodyDisplacement({
-              displayState: "closed",
-              sidebarWidth: null,
-              resizingSidebar: false
-            });
-            try {
-              if ((_c = (_b = (_a = cms == null ? void 0 : cms.api) == null ? void 0 : _a.tina) == null ? void 0 : _b.authProvider) == null ? void 0 : _c.logout) {
-                await ((_d = cms.api.tina) == null ? void 0 : _d.authProvider.logout());
-                if ((_f = (_e = cms == null ? void 0 : cms.api) == null ? void 0 : _e.tina) == null ? void 0 : _f.onLogout) {
-                  await ((_h = (_g = cms == null ? void 0 : cms.api) == null ? void 0 : _g.tina) == null ? void 0 : _h.onLogout());
-                  await new Promise(
-                    (resolve) => setTimeout(resolve, 500)
-                  );
-                }
-                window.location.href = new URL(
-                  window.location.href
-                ).pathname;
-              }
-            } catch (e) {
-              cms.alerts.error(`Error logging out: ${e}`);
-              console.error("Unexpected error calling logout");
-              console.error(e);
-            }
+        type: "button",
+        className: "pointer-events-auto text-xs text-blue-400 hover:text-blue-500 hover:underline transition-all ease-out duration-150",
+        onClick: () => {
+          const state = activeForm.tinaForm.finalForm.getState();
+          if (state.invalid === true) {
+            cms.alerts.error("Cannot navigate away from an invalid form.");
+          } else {
+            cms.dispatch({ type: "forms:set-active-form-id", value: null });
           }
-        },
-        /* @__PURE__ */ React.createElement(BiExit, { className: "w-6 h-auto mr-2 text-blue-400" }),
-        " Log Out"
-      )), /* @__PURE__ */ React.createElement(MenuItem, null, /* @__PURE__ */ React.createElement(
-        WrappedSyncStatus,
-        {
-          cms,
-          setEventsOpen
         }
-      )))
-    ))))),
-    eventsOpen && /* @__PURE__ */ React.createElement(SyncStatusModal, { cms, closeEventsModal }),
-    children,
-    /* @__PURE__ */ React.createElement("div", { className: "flex flex-col px-6 flex-1 overflow-auto" }, showCollections && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("h4", { className: "flex space-x-1 justify-items-start uppercase font-sans font-bold text-sm mb-3 mt-8 text-gray-700" }, /* @__PURE__ */ React.createElement("span", null, "Collections"), isLocalMode && /* @__PURE__ */ React.createElement("span", { className: "flex items-center" }, /* @__PURE__ */ React.createElement(
-      "a",
-      {
-        href: "https://tina.io/docs/schema/#defining-collections",
-        target: "_blank"
       },
-      /* @__PURE__ */ React.createElement(FiInfo, null)
-    ))), /* @__PURE__ */ React.createElement(
-      CollectionsList,
-      {
-        RenderNavCollection,
-        collections: contentCollections
-      }
-    )), (screenCategories.Site.length > 0 || contentCreators.length) > 0 && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("h4", { className: "uppercase font-sans font-bold text-sm mb-3 mt-8 text-gray-700" }, "Site"), /* @__PURE__ */ React.createElement("ul", { className: "flex flex-col gap-4" }, screenCategories.Site.map((view) => {
-      return /* @__PURE__ */ React.createElement("li", { key: `nav-site-${view.name}` }, /* @__PURE__ */ React.createElement(RenderNavSite, { view }));
-    }), contentCreators.map((plugin, idx) => {
-      return /* @__PURE__ */ React.createElement(CreateContentNavItem, { key: `plugin-${idx}`, plugin });
-    }), authCollection && /* @__PURE__ */ React.createElement(
-      CollectionsList,
+      /* @__PURE__ */ React.createElement(BiDotsVertical, { className: "h-auto w-5 inline-block opacity-70" })
+    ), /* @__PURE__ */ React.createElement(
+      "button",
       {
-        RenderNavCollection: AuthRenderNavCollection,
-        collections: [authCollection]
-      }
-    ))), Object.entries(screenCategories).map(([category, screens2]) => {
-      if (category !== "Site") {
-        return /* @__PURE__ */ React.createElement("div", { key: category }, /* @__PURE__ */ React.createElement("h4", { className: "uppercase font-sans font-bold text-sm mb-3 mt-8 text-gray-700" }, category), /* @__PURE__ */ React.createElement("ul", { className: "flex flex-col gap-4" }, screens2.map((view) => {
-          return /* @__PURE__ */ React.createElement("li", { key: `nav-site-${view.name}` }, /* @__PURE__ */ React.createElement(RenderNavSite, { view }));
-        })));
-      }
-    }), !!(cloudConfigs == null ? void 0 : cloudConfigs.length) && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("h4", { className: "uppercase font-sans font-bold text-sm mb-3 mt-8 text-gray-700" }, "Cloud"), /* @__PURE__ */ React.createElement("ul", { className: "flex flex-col gap-4" }, cloudConfigs.map((config) => {
-      return /* @__PURE__ */ React.createElement("li", { key: `nav-site-${config.name}` }, /* @__PURE__ */ React.createElement(RenderNavCloud, { config }));
-    }))), /* @__PURE__ */ React.createElement("div", { className: "grow" }), /* @__PURE__ */ React.createElement("span", { className: "font-sans font-light text-xs mb-3 mt-8 text-gray-500" }, "v", version))
+        type: "button",
+        className: "pointer-events-auto text-xs text-blue-400 hover:text-blue-500 hover:underline transition-all ease-out duration-150",
+        onClick: () => {
+          const collectionName = cms.api.tina.schema.getCollectionByFullPath(
+            cms.state.activeFormId
+          ).name;
+          window.location.href = `${new URL(window.location.href).pathname}#/collections/${collectionName}/~`;
+        }
+      },
+      /* @__PURE__ */ React.createElement(BiHomeAlt, { className: "h-auto w-5 inline-block opacity-70" })
+    ), /* @__PURE__ */ React.createElement("span", { className: "opacity-30 text-sm leading-tight whitespace-nowrap flex-0" }, "/"), /* @__PURE__ */ React.createElement("span", { className: "block w-full text-sm leading-tight whitespace-nowrap truncate" }, activeForm.tinaForm.label || activeForm.tinaForm.id), /* @__PURE__ */ React.createElement(FormStatus, { pristine: formIsPristine }))
   );
 };
-const CollectionsList = ({
-  collections,
-  RenderNavCollection
-}) => {
-  if (collections.length === 0) {
-    return /* @__PURE__ */ React.createElement("div", null, "No collections found");
-  }
-  return /* @__PURE__ */ React.createElement("ul", { className: "flex flex-col gap-4" }, collections.map((collection) => {
-    return /* @__PURE__ */ React.createElement("li", { key: `nav-collection-${collection.name}` }, /* @__PURE__ */ React.createElement(RenderNavCollection, { collection }));
-  }));
-};
-const CreateContentNavItem = ({ plugin }) => {
-  const [open2, setOpen] = React.useState(false);
-  return /* @__PURE__ */ React.createElement("li", { key: plugin.name }, /* @__PURE__ */ React.createElement(
-    "button",
-    {
-      className: "text-base tracking-wide text-gray-500 hover:text-blue-600 flex items-center opacity-90 hover:opacity-100",
-      onClick: () => {
-        setOpen(true);
-      }
-    },
-    /* @__PURE__ */ React.createElement(VscNewFile, { className: "mr-3 h-6 opacity-80 w-auto" }),
-    " ",
-    plugin.name
-  ), open2 && /* @__PURE__ */ React.createElement(FormModal, { plugin, close: () => setOpen(false) }));
-};
-const ResizeHandle = () => {
-  const {
-    resizingSidebar,
-    setResizingSidebar,
-    fullscreen,
-    setSidebarWidth,
-    displayState
-  } = React.useContext(SidebarContext);
-  React.useEffect(() => {
-    const handleMouseUp = () => setResizingSidebar(false);
-    window.addEventListener("mouseup", handleMouseUp);
-    return () => {
-      window.removeEventListener("mouseup", handleMouseUp);
-    };
-  }, []);
-  React.useEffect(() => {
-    const handleMouseMove = (e) => {
-      setSidebarWidth((sidebarWidth) => {
-        const newWidth = sidebarWidth + e.movementX;
-        const maxWidth = window.innerWidth - 8;
-        if (newWidth < minSidebarWidth) {
-          return minSidebarWidth;
-        } else if (newWidth > maxWidth) {
-          return maxWidth;
-        } else {
-          return newWidth;
-        }
-      });
-    };
-    if (resizingSidebar) {
-      window.addEventListener("mousemove", handleMouseMove);
-      document.body.classList.add("select-none");
-    }
-    return () => {
-      window.removeEventListener("mousemove", handleMouseMove);
-      document.body.classList.remove("select-none");
-    };
-  }, [resizingSidebar]);
-  const handleresizingSidebar = () => setResizingSidebar(true);
-  if (fullscreen) {
-    return null;
-  }
+const FormHeader = ({ activeForm }) => {
+  const { formIsPristine } = React.useContext(SidebarContext);
+  const cms = useCMS$1();
+  const shortFormLabel = activeForm.tinaForm.label ? activeForm.tinaForm.label.replace(/^.*[\\\/]/, "") : false;
   return /* @__PURE__ */ React.createElement(
     "div",
     {
-      onMouseDown: handleresizingSidebar,
-      className: `z-100 absolute top-1/2 right-px w-2 h-32 bg-white rounded-r-md border border-gray-150 shadow-sm hover:shadow-md origin-left transition-all duration-150 ease-out transform translate-x-full -translate-y-1/2 group hover:bg-gray-50 ${displayState !== "closed" ? `opacity-100` : `opacity-0`} ${resizingSidebar ? `scale-110` : `scale-90 hover:scale-100`}`,
-      style: { cursor: "grab" }
+      className: "pt-18 pb-4 px-6 border-b border-gray-200 bg-gradient-to-t from-white to-gray-50"
     },
-    /* @__PURE__ */ React.createElement("span", { className: "absolute top-1/2 left-1/2 h-4/6 w-px bg-gray-200 transform -translate-y-1/2 -translate-x-1/2 opacity-30 transition-opacity duration-150 ease-out group-hover:opacity-100" })
+    /* @__PURE__ */ React.createElement("div", { className: "max-w-form mx-auto flex gap-2 justify-between items-center" }, /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        type: "button",
+        className: "pointer-events-auto text-xs text-blue-400 hover:text-blue-500 hover:underline transition-all ease-out duration-150",
+        onClick: () => {
+          const collectionName = cms.api.tina.schema.getCollectionByFullPath(
+            cms.state.activeFormId
+          ).name;
+          window.location.href = `${new URL(window.location.href).pathname}#/collections/${collectionName}/~`;
+        }
+      },
+      /* @__PURE__ */ React.createElement(BiHomeAlt, { className: "h-auto w-5 inline-block opacity-70" })
+    ), shortFormLabel && /* @__PURE__ */ React.createElement("span", { className: "block w-full text-sm leading-tight whitespace-nowrap truncate" }, shortFormLabel), /* @__PURE__ */ React.createElement(FormStatus, { pristine: formIsPristine }))
   );
 };
 const SidebarContext = React.createContext(null);
@@ -10689,7 +10727,7 @@ const Sidebar$1 = ({
         isLocalMode: (_d = (_c = cms.api) == null ? void 0 : _c.tina) == null ? void 0 : _d.isLocalMode,
         branchingEnabled
       }
-    ), /* @__PURE__ */ React.createElement(FormsView, null, /* @__PURE__ */ React.createElement(sidebar.placeholder, null)), activeScreen && /* @__PURE__ */ React.createElement(
+    ), /* @__PURE__ */ React.createElement(FormsView, { loadingPlaceholder: sidebar.loadingPlaceholder }), activeScreen && /* @__PURE__ */ React.createElement(
       ScreenPluginModal,
       {
         screen: activeScreen,
@@ -12053,6 +12091,7 @@ const initialState = (cms) => {
     forms: [],
     formLists: [],
     editingMode: "basic",
+    isLoadingContent: false,
     quickEditSupported: false,
     sidebarDisplayState: ((_a = cms == null ? void 0 : cms.sidebar) == null ? void 0 : _a.defaultState) || "open"
   };
@@ -12112,7 +12151,12 @@ function tinaReducer(state, action) {
           }
         });
       }
-      return { ...state, activeFormId, formLists: nextFormLists };
+      return {
+        ...state,
+        activeFormId,
+        formLists: nextFormLists,
+        isLoadingContent: false
+      };
     }
     case "form-lists:remove": {
       const nextFormLists = state.formLists.filter(
@@ -12181,6 +12225,9 @@ function tinaReducer(state, action) {
       }
       return { ...state, sidebarDisplayState: action.value };
     }
+    case "sidebar:set-loading-state": {
+      return { ...state, isLoadingContent: action.value };
+    }
     default:
       throw new Error(`Unhandled action ${action.type}`);
   }
@@ -12866,7 +12913,6 @@ const CreateBranchModel = ({
 }) => {
   const cms = useCMS$1();
   const tinaApi = cms.api.tina;
-  tinaApi.branch;
   const [disabled, setDisabled] = React.useState(false);
   const [newBranchName, setNewBranchName] = React.useState("");
   const [error, setError] = React.useState("");
@@ -12892,10 +12938,10 @@ const CreateBranchModel = ({
     const newUrl = window.location.href.replace(hash, newHash);
     window.location.href = newUrl;
   };
-  return /* @__PURE__ */ React.createElement(Modal, null, /* @__PURE__ */ React.createElement(PopupModal, null, /* @__PURE__ */ React.createElement(ModalHeader, { close: close2 }, /* @__PURE__ */ React.createElement(BiGitBranch, { className: "w-6 h-auto mr-1 text-blue-500 opacity-70" }), " ", "Create Branch"), /* @__PURE__ */ React.createElement(ModalBody, { padded: true }, /* @__PURE__ */ React.createElement("p", { className: "text-base text-gray-700 mb-2" }, "This branch is ", /* @__PURE__ */ React.createElement("strong", null, "protected"), ". Create a new branch to save your changes."), /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(Modal, null, /* @__PURE__ */ React.createElement(PopupModal, null, /* @__PURE__ */ React.createElement(ModalHeader, { close: close2 }, /* @__PURE__ */ React.createElement(BiGitBranch, { className: "w-6 h-auto mr-1 text-blue-500 opacity-70" }), " ", "Create Branch"), /* @__PURE__ */ React.createElement(ModalBody, { padded: true }, /* @__PURE__ */ React.createElement("p", { className: "text-lg text-gray-700 font-bold mb-2" }, "This content is protected 🚧"), /* @__PURE__ */ React.createElement("p", { className: "text-sm text-gray-700 mb-4" }, "To make changes, you need to create a copy then get it approved and merged for it to go live."), /* @__PURE__ */ React.createElement(
     PrefixedTextField,
     {
-      placeholder: "Branch Name",
+      placeholder: "e.g. {{PAGE-NAME}}-updates",
       value: newBranchName,
       onChange: (e) => {
         setError("");
@@ -32645,6 +32691,35 @@ const FullscreenError = ({
 }) => {
   return /* @__PURE__ */ React__default.createElement("div", { className: "flex flex-col justify-center items-center h-screen bg-gray-100" }, /* @__PURE__ */ React__default.createElement("div", { className: "text-red-500 text-4xl mb-6 flex items-center" }, /* @__PURE__ */ React__default.createElement(BiError, { className: "w-12 h-auto fill-current text-red-400 opacity-70 mr-1" }), " ", title), /* @__PURE__ */ React__default.createElement("p", { className: "text-gray-700 text-xl mb-8" }, errorMessage), /* @__PURE__ */ React__default.createElement(Button$1, { variant: "danger", onClick: () => window.location.reload() }, /* @__PURE__ */ React__default.createElement(BiSync, { className: "w-7 h-auto fill-current opacity-70 mr-1" }), " Reload"));
 };
+const isValidSortKey = (sortKey, collection) => {
+  if (collection.fields) {
+    const sortKeys = collection.fields.map((x) => x.name);
+    return sortKeys.includes(sortKey);
+  } else if (collection.templates) {
+    const collectionMap = {};
+    const conflictedFields = /* @__PURE__ */ new Set();
+    for (const template of collection.templates) {
+      for (const field of template.fields) {
+        if (collectionMap[field.name]) {
+          if (collectionMap[field.name].type !== field.type) {
+            conflictedFields.add(field.name);
+          }
+        } else {
+          collectionMap[field.name] = field;
+        }
+      }
+    }
+    for (const key in conflictedFields) {
+      delete collectionMap[key];
+    }
+    for (const key in collectionMap) {
+      if (key === sortKey) {
+        return true;
+      }
+    }
+    return false;
+  }
+};
 const useGetCollection = (cms, collectionName, includeDocuments = true, folder, after = "", sortKey, filterArgs) => {
   const api = new TinaAdminApi(cms);
   const schema = cms.api.tina.schema;
@@ -32656,10 +32731,9 @@ const useGetCollection = (cms, collectionName, includeDocuments = true, folder,
   useEffect(() => {
     let cancelled = false;
     const fetchCollection = async () => {
-      var _a;
       if (await api.isAuthenticated() && !folder.loading && !cancelled) {
         const { name, order } = JSON.parse(sortKey || "{}");
-        const validSortKey = ((_a = collectionExtra.fields) == null ? void 0 : _a.map((x) => x.name).includes(name)) ? name : void 0;
+        const validSortKey = isValidSortKey(name, collectionExtra) ? name : void 0;
         try {
           const collection2 = await api.fetchCollection(
             collectionName,