tinacms 0.0.0-d240606-20250315175410 → 0.0.0-d28d795-20250427004334

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,14 +53,13 @@ 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";
 import { NAMER, resolveField } from "@tinacms/schema-tools";
+import gql from "graphql-tag";
 import { diff } from "@graphql-inspector/core";
 import * as yup from "yup";
-import { NavLink, useNavigate, useLocation, useParams, Link, useSearchParams, HashRouter, Routes, Route } from "react-router-dom";
+import { NavLink, useLocation, useNavigate, useParams, Link, useSearchParams, HashRouter, Routes, Route } from "react-router-dom";
 import { stringifyMDX } from "@tinacms/mdx";
 const ModalProvider = ({ children }) => {
   const [modalRootContainerRef, setModalRootContainerRef] = useState(
@@ -4430,36 +4430,6 @@ function MdOutlineArrowBackIos(props) {
 function MdOutlinePerson(props) {
   return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "fill": "none", "d": "M0 0h24v24H0V0z" }, "child": [] }, { "tag": "path", "attr": { "d": "M12 6c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2m0 10c2.7 0 5.8 1.29 6 2H6c.23-.72 3.31-2 6-2m0-12C9.79 4 8 5.79 8 8s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 10c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" }, "child": [] }] })(props);
 }
-const BranchContext = React.createContext({
-  currentBranch: null,
-  setCurrentBranch: (branch) => {
-    console.warn("BranchContext not initialized");
-  }
-});
-const BranchDataProvider = ({
-  currentBranch,
-  setCurrentBranch,
-  children
-}) => {
-  return /* @__PURE__ */ React.createElement(
-    BranchContext.Provider,
-    {
-      value: {
-        currentBranch,
-        setCurrentBranch
-      }
-    },
-    children
-  );
-};
-const useBranchData = () => {
-  const branchData = React.useContext(BranchContext);
-  const { dispatch } = useEvent("branch:change");
-  React.useEffect(() => {
-    dispatch({ branchName: branchData.currentBranch });
-  }, [branchData.currentBranch]);
-  return branchData;
-};
 const textFieldClasses = "shadow-inner focus:shadow-outline focus:border-blue-500 focus:outline-none block text-base placeholder:text-gray-300 px-3 py-2 text-gray-600 w-full bg-white border border-gray-200 transition-all ease-out duration-150 focus:text-gray-900 rounded-md";
 const disabledClasses$1 = "opacity-50 pointer-events-none cursor-not-allowed";
 const BaseTextField = React.forwardRef(({ className, disabled, ...rest }, ref) => {
@@ -8063,9 +8033,6 @@ const PasswordFieldPlugin = {
   },
   parse: parse$2
 };
-function GrCircleQuestion(props) {
-  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "fill": "none", "strokeWidth": "2", "d": "M12,22 C17.5228475,22 22,17.5228475 22,12 C22,6.4771525 17.5228475,2 12,2 C6.4771525,2 2,6.4771525 2,12 C2,17.5228475 6.4771525,22 12,22 Z M12,15 L12,14 C12,13 12,12.5 13,12 C14,11.5 15,11 15,9.5 C15,8.5 14,7 12,7 C10,7 9,8.26413718 9,10 M12,16 L12,18" }, "child": [] }] })(props);
-}
 function AiFillWarning(props) {
   return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 1024 1024" }, "child": [{ "tag": "path", "attr": { "d": "M955.7 856l-416-720c-6.2-10.7-16.9-16-27.7-16s-21.6 5.3-27.7 16l-416 720C56 877.4 71.4 904 96 904h832c24.6 0 40-26.6 27.7-48zM480 416c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v184c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V416zm32 352a48.01 48.01 0 0 1 0-96 48.01 48.01 0 0 1 0 96z" }, "child": [] }] })(props);
 }
@@ -8084,6 +8051,39 @@ function FaSpinner(props) {
 function FaUnlock(props) {
   return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 448 512" }, "child": [{ "tag": "path", "attr": { "d": "M400 256H152V152.9c0-39.6 31.7-72.5 71.3-72.9 40-.4 72.7 32.1 72.7 72v16c0 13.3 10.7 24 24 24h32c13.3 0 24-10.7 24-24v-16C376 68 307.5-.3 223.5 0 139.5.3 72 69.5 72 153.5V256H48c-26.5 0-48 21.5-48 48v160c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V304c0-26.5-21.5-48-48-48z" }, "child": [] }] })(props);
 }
+function GrCircleQuestion(props) {
+  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "fill": "none", "strokeWidth": "2", "d": "M12,22 C17.5228475,22 22,17.5228475 22,12 C22,6.4771525 17.5228475,2 12,2 C6.4771525,2 2,6.4771525 2,12 C2,17.5228475 6.4771525,22 12,22 Z M12,15 L12,14 C12,13 12,12.5 13,12 C14,11.5 15,11 15,9.5 C15,8.5 14,7 12,7 C10,7 9,8.26413718 9,10 M12,16 L12,18" }, "child": [] }] })(props);
+}
+const BranchContext = React.createContext({
+  currentBranch: null,
+  setCurrentBranch: (branch) => {
+    console.warn("BranchContext not initialized");
+  }
+});
+const BranchDataProvider = ({
+  currentBranch,
+  setCurrentBranch,
+  children
+}) => {
+  return /* @__PURE__ */ React.createElement(
+    BranchContext.Provider,
+    {
+      value: {
+        currentBranch,
+        setCurrentBranch
+      }
+    },
+    children
+  );
+};
+const useBranchData = () => {
+  const branchData = React.useContext(BranchContext);
+  const { dispatch } = useEvent("branch:change");
+  React.useEffect(() => {
+    dispatch({ branchName: branchData.currentBranch });
+  }, [branchData.currentBranch]);
+  return branchData;
+};
 function formatBranchName$1(str) {
   const pattern = /[^/\w-]+/g;
   const formattedStr = str.replace(pattern, "");
@@ -8182,7 +8182,7 @@ const BranchSwitcherLegacy = ({
       className: "transition-all duration-150 ease-out text-blue-600 hover:text-blue-400 hover:underline no-underline",
       href: "https://tina.io/docs/tina-cloud/"
     },
-    "Learn more about moving to production with Tina Cloud."
+    "Learn more about moving to production with TinaCloud."
   )), /* @__PURE__ */ React.createElement("p", null, /* @__PURE__ */ React.createElement(
     Button$1,
     {
@@ -8418,7 +8418,7 @@ const EditoralBranchSwitcher = ({
       className: "transition-all duration-150 ease-out text-blue-600 hover:text-blue-400 hover:underline no-underline",
       href: "https://tina.io/docs/tina-cloud/"
     },
-    "Learn more about moving to production with Tina Cloud."
+    "Learn more about moving to production with TinaCloud."
   )), /* @__PURE__ */ React.createElement("p", null, /* @__PURE__ */ React.createElement(
     Button$1,
     {
@@ -9450,7 +9450,7 @@ const E_BAD_ROUTE = new MediaListError({
 });
 new MediaListError({
   title: "An Error Occurred",
-  message: "Something went wrong accessing your media from Tina Cloud.",
+  message: "Something went wrong accessing your media from TinaCloud.",
   docsLink: ""
   // TODO
 });
@@ -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.2";
+const version = "2.7.5";
 const Nav = ({
   isLocalMode,
   className = "",
@@ -10471,6 +10222,293 @@ const ResizeHandle = () => {
     /* @__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: "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 }))
+  );
+};
 const SidebarContext = React.createContext(null);
 const minPreviewWidth = 440;
 const minSidebarWidth = 360;
@@ -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,
@@ -11005,6 +11043,93 @@ function createPlaceholder(name, _pr) {
     );
   };
 }
+function dirname(path) {
+  var _a, _b;
+  const pattern = new RegExp("(?<prevDir>.*)/");
+  return (_b = (_a = path.match(pattern)) == null ? void 0 : _a.groups) == null ? void 0 : _b.prevDir;
+}
+const BreadcrumbButton = ({ className = "", ...props }) => /* @__PURE__ */ React__default.createElement(
+  "button",
+  {
+    className: "capitalize transition-colors duration-150 border-0 bg-transparent hover:text-blue-500 " + className,
+    ...props
+  }
+);
+function Breadcrumb$1({ directory = "", setDirectory }) {
+  directory = directory.replace(/^\/|\/$/g, "");
+  let prevDir = dirname(directory) || "";
+  if (prevDir === ".") {
+    prevDir = "";
+  }
+  return /* @__PURE__ */ React__default.createElement("div", { className: "w-full flex items-center text-[16px] text-gray-300" }, directory !== "" && /* @__PURE__ */ React__default.createElement(
+    IconButton,
+    {
+      variant: "ghost",
+      className: "mr-2",
+      onClick: () => setDirectory(prevDir)
+    },
+    /* @__PURE__ */ React__default.createElement(
+      LeftArrowIcon,
+      {
+        className: `w-7 h-auto fill-gray-300 hover:fill-gray-900 transition duration-150 ease-out`
+      }
+    )
+  ), /* @__PURE__ */ React__default.createElement(
+    BreadcrumbButton,
+    {
+      onClick: () => setDirectory(""),
+      className: directory === "" ? "text-gray-500 font-bold" : "text-gray-300 font-medium after:pl-1.5 after:content-['/']"
+    },
+    "Media"
+  ), directory && directory.split("/").map((part, index, parts) => {
+    const currentDir = parts.slice(0, index + 1).join("/");
+    return /* @__PURE__ */ React__default.createElement(
+      BreadcrumbButton,
+      {
+        className: "pl-1.5 " + (index + 1 === parts.length ? "text-gray-500 font-bold" : "text-gray-300 font-medium after:pl-1.5 after:content-['/']"),
+        key: currentDir,
+        onClick: () => {
+          setDirectory(currentDir);
+        }
+      },
+      part
+    );
+  }));
+}
+const CopyField = ({ label, description, value }) => {
+  const [copied, setCopied] = React__default.useState(false);
+  const [fadeOut, setFadeOut] = React__default.useState(false);
+  return /* @__PURE__ */ React__default.createElement("div", { className: "w-full" }, label && /* @__PURE__ */ React__default.createElement("label", { className: "w-full mb-1 block flex-1  text-sm font-bold leading-5 text-gray-700" }, label), /* @__PURE__ */ React__default.createElement(
+    "span",
+    {
+      onClick: () => {
+        if (copied === true)
+          return;
+        setCopied(true);
+        setTimeout(() => {
+          setFadeOut(true);
+        }, 2500);
+        setTimeout(() => {
+          setCopied(false);
+          setFadeOut(false);
+        }, 3e3);
+        navigator.clipboard.writeText(value);
+      },
+      className: `shadow-inner text-base leading-5 whitespace-normal break-all px-3 py-2 text-gray-600 w-full bg-gray-50 border border-gray-200 transition-all ease-out duration-150 rounded-md relative overflow-hidden appearance-none flex items-center w-full cursor-pointer hover:bg-white hover:text-blue-500  ${copied ? `pointer-events-none` : ``}`
+    },
+    /* @__PURE__ */ React__default.createElement(BiCopyAlt, { className: "relative text-blue-500 shrink-0 w-5 h-auto mr-1.5 -ml-0.5 z-20" }),
+    " ",
+    value,
+    " ",
+    copied && /* @__PURE__ */ React__default.createElement(
+      "span",
+      {
+        className: `${fadeOut ? `opacity-0` : `opacity-100`} text-blue-500 transition-opacity	duration-500 absolute right-0 w-full h-full px-3 py-2 bg-white bg-opacity-90 flex items-center justify-center text-center tracking-wide font-medium z-10`
+      },
+      /* @__PURE__ */ React__default.createElement("span", null, "Copied to clipboard!")
+    )
+  ), description && /* @__PURE__ */ React__default.createElement("p", { className: "mt-2 text-sm text-gray-500" }, description));
+};
 function ListMediaItem({ item, onClick, active }) {
   let FileIcon = BiFile;
   if (item.type === "dir") {
@@ -11080,59 +11205,6 @@ function GridMediaItem({ item, active, onClick }) {
     )
   );
 }
-function dirname(path) {
-  var _a, _b;
-  const pattern = new RegExp("(?<prevDir>.*)/");
-  return (_b = (_a = path.match(pattern)) == null ? void 0 : _a.groups) == null ? void 0 : _b.prevDir;
-}
-const BreadcrumbButton = ({ className = "", ...props }) => /* @__PURE__ */ React__default.createElement(
-  "button",
-  {
-    className: "capitalize transition-colors duration-150 border-0 bg-transparent hover:text-blue-500 " + className,
-    ...props
-  }
-);
-function Breadcrumb$1({ directory = "", setDirectory }) {
-  directory = directory.replace(/^\/|\/$/g, "");
-  let prevDir = dirname(directory) || "";
-  if (prevDir === ".") {
-    prevDir = "";
-  }
-  return /* @__PURE__ */ React__default.createElement("div", { className: "w-full flex items-center text-[16px] text-gray-300" }, directory !== "" && /* @__PURE__ */ React__default.createElement(
-    IconButton,
-    {
-      variant: "ghost",
-      className: "mr-2",
-      onClick: () => setDirectory(prevDir)
-    },
-    /* @__PURE__ */ React__default.createElement(
-      LeftArrowIcon,
-      {
-        className: `w-7 h-auto fill-gray-300 hover:fill-gray-900 transition duration-150 ease-out`
-      }
-    )
-  ), /* @__PURE__ */ React__default.createElement(
-    BreadcrumbButton,
-    {
-      onClick: () => setDirectory(""),
-      className: directory === "" ? "text-gray-500 font-bold" : "text-gray-300 font-medium after:pl-1.5 after:content-['/']"
-    },
-    "Media"
-  ), directory && directory.split("/").map((part, index, parts) => {
-    const currentDir = parts.slice(0, index + 1).join("/");
-    return /* @__PURE__ */ React__default.createElement(
-      BreadcrumbButton,
-      {
-        className: "pl-1.5 " + (index + 1 === parts.length ? "text-gray-500 font-bold" : "text-gray-300 font-medium after:pl-1.5 after:content-['/']"),
-        key: currentDir,
-        onClick: () => {
-          setDirectory(currentDir);
-        }
-      },
-      part
-    );
-  }));
-}
 const DeleteModal$1 = ({
   close: close2,
   deleteFunc,
@@ -11186,40 +11258,6 @@ const NewFolderModal = ({ onSubmit, close: close2 }) => {
     "Create New Folder"
   ))));
 };
-const CopyField = ({ label, description, value }) => {
-  const [copied, setCopied] = React__default.useState(false);
-  const [fadeOut, setFadeOut] = React__default.useState(false);
-  return /* @__PURE__ */ React__default.createElement("div", { className: "w-full" }, label && /* @__PURE__ */ React__default.createElement("label", { className: "w-full mb-1 block flex-1  text-sm font-bold leading-5 text-gray-700" }, label), /* @__PURE__ */ React__default.createElement(
-    "span",
-    {
-      onClick: () => {
-        if (copied === true)
-          return;
-        setCopied(true);
-        setTimeout(() => {
-          setFadeOut(true);
-        }, 2500);
-        setTimeout(() => {
-          setCopied(false);
-          setFadeOut(false);
-        }, 3e3);
-        navigator.clipboard.writeText(value);
-      },
-      className: `shadow-inner text-base leading-5 whitespace-normal break-all px-3 py-2 text-gray-600 w-full bg-gray-50 border border-gray-200 transition-all ease-out duration-150 rounded-md relative overflow-hidden appearance-none flex items-center w-full cursor-pointer hover:bg-white hover:text-blue-500  ${copied ? `pointer-events-none` : ``}`
-    },
-    /* @__PURE__ */ React__default.createElement(BiCopyAlt, { className: "relative text-blue-500 shrink-0 w-5 h-auto mr-1.5 -ml-0.5 z-20" }),
-    " ",
-    value,
-    " ",
-    copied && /* @__PURE__ */ React__default.createElement(
-      "span",
-      {
-        className: `${fadeOut ? `opacity-0` : `opacity-100`} text-blue-500 transition-opacity	duration-500 absolute right-0 w-full h-full px-3 py-2 bg-white bg-opacity-90 flex items-center justify-center text-center tracking-wide font-medium z-10`
-      },
-      /* @__PURE__ */ React__default.createElement("span", null, "Copied to clipboard!")
-    )
-  ), description && /* @__PURE__ */ React__default.createElement("p", { className: "mt-2 text-sm text-gray-500" }, description));
-};
 const { useDropzone } = dropzone;
 const join = function(...parts) {
   const [first, last, slash] = [0, parts.length - 1, "/"];
@@ -11721,7 +11759,7 @@ const SyncStatusContainer = ({ children }) => {
         target: "_blank",
         href: `${cms.api.tina.appDashboardLink}/media`
       },
-      "Sync Your Media In Tina Cloud.",
+      "Sync Your Media In TinaCloud.",
       /* @__PURE__ */ React__default.createElement(BiLinkExternal, { className: `w-5 h-auto flex-shrink-0` })
     )
   )))) : /* @__PURE__ */ React__default.createElement(SyncStatusContext.Provider, { value: { syncStatus } }, children);
@@ -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("");
@@ -30318,9 +30364,31 @@ function popupWindow(url, title, window2, w, h) {
 }
 const TINA_LOGIN_EVENT = "tinaCloudLogin";
 const AUTH_TOKEN_KEY = "tinacms-auth";
-const authenticate = (clientId, frontendUrl) => {
-  return new Promise((resolve) => {
+const generateRandomString = (length) => {
+  const array = new Uint32Array(length);
+  window.crypto.getRandomValues(array);
+  return Array.from(array, (dec) => ("0" + dec.toString(16)).slice(-2)).join(
+    ""
+  );
+};
+const generateCodeChallenge = async (codeVerifier) => {
+  const encoder = new TextEncoder();
+  const data = encoder.encode(codeVerifier);
+  const digest = await window.crypto.subtle.digest("SHA-256", data);
+  return btoa(String.fromCharCode(...new Uint8Array(digest))).replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "");
+};
+const authenticate = (clientId, frontendUrl, oauth2) => {
+  return new Promise(async (resolve) => {
     const origin = `${window.location.protocol}//${window.location.host}`;
+    if (oauth2) {
+      const codeVerifier = generateRandomString(32);
+      const codeChallenge = await generateCodeChallenge(codeVerifier);
+      localStorage.setItem("code_verifier", codeVerifier);
+      const redirectUri = encodeURIComponent(`${origin}/admin`);
+      window.location.href = `${frontendUrl}/oauth-signin?redirect_uri=${redirectUri}&code_challenge=${codeChallenge}&client_id=${clientId}`;
+      resolve(void 0);
+      return;
+    }
     const authTab = popupWindow(
       `${frontendUrl}/signin?clientId=${clientId}&origin=${origin}`,
       "_blank",
@@ -30401,6 +30469,7 @@ class TinaCloudAuthProvider extends AbstractAuthProvider {
     this.frontendUrl = frontendUrl;
     this.clientId = clientId;
     this.identityApiUrl = identityApiUrl;
+    this.oauth2 = options.oauth2 || false;
     switch (tokenStorage) {
       case "LOCAL_STORAGE":
         this.getToken = async function() {
@@ -30446,9 +30515,52 @@ class TinaCloudAuthProvider extends AbstractAuthProvider {
     }
   }
   async authenticate() {
-    const token = await authenticate(this.clientId, this.frontendUrl);
-    this.setToken(token);
-    return token;
+    const params = new URLSearchParams(window.location.search);
+    console.log({ params });
+    const code = params.get("code");
+    const state = params.get("state");
+    const codeVerifier = localStorage.getItem("code_verifier");
+    console.log({
+      code,
+      state,
+      codeVerifier
+    });
+    if (code && state && codeVerifier) {
+      const origin = `${window.location.protocol}//${window.location.host}`;
+      const redirectUri = encodeURIComponent(`${origin}/admin`);
+      const tokenUrl = `${this.identityApiUrl}/oauth2/${this.clientId}/token`;
+      console.log("Token URL:", tokenUrl);
+      await fetch(tokenUrl, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/x-www-form-urlencoded"
+        },
+        body: new URLSearchParams({
+          grant_type: "authorization_code",
+          code,
+          redirect_uri: redirectUri,
+          client_id: this.clientId,
+          code_verifier: localStorage.getItem("code_verifier")
+        })
+      }).then((response) => response.json()).then((data) => {
+        console.log("Token exchange response:", data);
+        this.setToken(data);
+      }).catch((error) => {
+        console.error("Error during token exchange:", error);
+      });
+    } else {
+      console.log("calling authenticate");
+      const token = await authenticate(
+        this.clientId,
+        this.frontendUrl,
+        this.oauth2
+      );
+      console.log("Token:", token);
+      if (token) {
+        this.setToken(token);
+      }
+    }
+    return this.getToken();
   }
   async getUser() {
     if (!this.clientId) {
@@ -30557,7 +30669,7 @@ const IndexStatusResponse = z.object({
 });
 class Client {
   constructor({ tokenStorage = "MEMORY", ...options }) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w;
     this.events = new EventBus();
     this.protectedBranches = [];
     this.usingEditorialWorkflow = false;
@@ -30638,7 +30750,8 @@ mutation addPendingDocumentMutation(
       identityApiUrl: this.identityApiUrl,
       getTokenFn: options.getTokenFn,
       tokenStorage,
-      frontendUrl: this.frontendUrl
+      frontendUrl: this.frontendUrl,
+      oauth2: (_w = (_v = options.schema) == null ? void 0 : _v.config) == null ? void 0 : _w.oauth2
     });
   }
   get isLocalMode() {
@@ -30650,6 +30763,7 @@ mutation addPendingDocumentMutation(
   setBranch(branchName) {
     var _a, _b, _c, _d;
     const encodedBranch = encodeURIComponent(branchName);
+    document.cookie = `x-branch=${encodedBranch}; path=/; max-age=3600`;
     this.branch = encodedBranch;
     this.assetsApiUrl = ((_a = this.options.tinaioConfig) == null ? void 0 : _a.assetsApiUrlOverride) || "https://assets.tinajs.io";
     this.frontendUrl = ((_b = this.options.tinaioConfig) == null ? void 0 : _b.frontendUrlOverride) || "https://app.tina.io";
@@ -30692,7 +30806,7 @@ mutation addPendingDocumentMutation(
 	branch: ${this.branch}.`;
         if (this.branch !== "main") {
           errorMessage = `${errorMessage}
-	Note: This error can occur if the branch does not exist on GitHub or on Tina Cloud`;
+	Note: This error can occur if the branch does not exist on GitHub or on TinaCloud`;
         }
       }
       throw new Error(errorMessage);
@@ -30828,7 +30942,7 @@ mutation addPendingDocumentMutation(
                 unknownCount++;
                 if (unknownCount > 5) {
                   throw new Error(
-                    "AsyncPoller: status unknown for too long, please check indexing progress the Tina Cloud dashboard"
+                    "AsyncPoller: status unknown for too long, please check indexing progress the TinaCloud dashboard"
                   );
                 }
               }
@@ -31464,7 +31578,52 @@ const AuthWallInner = ({
   const [showChildren, setShowChildren] = useState(false);
   const [authProps, setAuthProps] = useState({ username: "", password: "" });
   const [authenticated, setAuthenticated] = useState(false);
+  const [code, setCode] = useState(null);
+  const [state, setState] = useState(null);
+  const [retrievingToken, setRetrievingToken] = useState(false);
+  useEffect(() => {
+    if (typeof window !== "undefined") {
+      const queryParams = new URLSearchParams(window.location.search);
+      setCode(queryParams.get("code"));
+      setState(queryParams.get("state"));
+    }
+  }, []);
+  useEffect(() => {
+    const codeVerifier = localStorage.getItem("code_verifier");
+    if (codeVerifier && code && state) {
+      setRetrievingToken(true);
+      const origin = `${window.location.protocol}//${window.location.host}`;
+      const redirectUri = encodeURIComponent(`${origin}/admin`);
+      const tokenUrl = `${client.identityApiUrl}/oauth2/${client.clientId}/token`;
+      console.log("Token URL:", tokenUrl);
+      fetch(tokenUrl, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/x-www-form-urlencoded"
+        },
+        body: new URLSearchParams({
+          grant_type: "authorization_code",
+          code,
+          redirect_uri: redirectUri,
+          client_id: client.clientId,
+          code_verifier: localStorage.getItem("code_verifier")
+        })
+      }).then((response) => response.json()).then((data) => {
+        console.log("Token exchange response:", data);
+        setRetrievingToken(false);
+        localStorage.setItem(AUTH_TOKEN_KEY, JSON.stringify(data));
+        setAuthenticated(true);
+      }).catch((error) => {
+        console.error("Error during token exchange:", error);
+        setRetrievingToken(false);
+      });
+    }
+  }, [code, state]);
   React__default.useEffect(() => {
+    if (retrievingToken) {
+      console.log("Retrieving token...");
+      return;
+    }
     let mounted = true;
     client.authProvider.isAuthenticated().then((isAuthenticated) => {
       if (!mounted)
@@ -31509,7 +31668,7 @@ const AuthWallInner = ({
     return () => {
       mounted = false;
     };
-  }, [authenticated]);
+  }, [authenticated, retrievingToken]);
   const onAuthenticated = async () => {
     setAuthenticated(true);
     setActiveModal(null);
@@ -31539,7 +31698,7 @@ const AuthWallInner = ({
       });
     }
   };
-  let modalTitle = "Tina Cloud";
+  let modalTitle = "TinaCloud";
   if (activeModal === "authenticate" && loginStrategy === "Redirect" && !isTinaCloud) {
     modalTitle = "Enter into edit mode";
   } else if (activeModal === "authenticate" && loginStrategy === "UsernamePassword") {
@@ -31555,7 +31714,7 @@ const AuthWallInner = ({
     ModalBuilder,
     {
       title: modalTitle,
-      message: isTinaCloud ? "Your site uses Tina Cloud to track changes. To make edits, you must log in." : "To save edits, enter into edit mode. On save, changes will saved to the local filesystem.",
+      message: isTinaCloud ? "Your site uses TinaCloud to track changes. To make edits, you must log in." : "To save edits, enter into edit mode. On save, changes will saved to the local filesystem.",
       close,
       actions: [
         ...otherModalActions,
@@ -31658,7 +31817,6 @@ const TinaCloudProvider = (props) => {
     "tinacms-current-branch",
     baseBranch
   );
-  console.log({ currentBranch });
   useTinaAuthRedirect();
   const cms = React__default.useMemo(
     () => props.cms || new TinaCMS({
@@ -31778,10 +31936,7 @@ const TinaCloudProvider = (props) => {
           cms.flags.set("branch-switcher", true);
           client.usingEditorialWorkflow = true;
           client.protectedBranches = project.protectedBranches;
-          console.log("currentBranch", currentBranch);
-          console.log(project.metadata[currentBranch]);
           if (!project.metadata[currentBranch]) {
-            console.log("resetting to default branch", project.defaultBranch);
             setCurrentBranch(project.defaultBranch || "main");
           }
         }
@@ -32282,6 +32437,14 @@ This will work when developing locally but NOT when deployed to production.
   }
   return client.request(query, { variables });
 };
+const GetCMS = ({ children }) => {
+  try {
+    const cms = useCMS$1();
+    return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, children(cms));
+  } catch (e) {
+    return null;
+  }
+};
 const Layout = ({ children }) => {
   return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(
     "div",
@@ -32493,47 +32656,6 @@ const SidebarCloudLink = ({ config }) => {
   }
   return /* @__PURE__ */ React__default.createElement("span", { className: "text-base tracking-wide text-gray-500 hover:text-blue-600 flex items-center opacity-90 hover:opacity-100" }, /* @__PURE__ */ React__default.createElement(config.Icon, { className: "mr-2 h-6 opacity-80 w-auto" }), /* @__PURE__ */ React__default.createElement("a", { target: "_blank", href: config.link.href }, config.link.text));
 };
-const GetCMS = ({ children }) => {
-  try {
-    const cms = useCMS$1();
-    return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, children(cms));
-  } catch (e) {
-    return null;
-  }
-};
-const PageWrapper = ({ children }) => {
-  var _a, _b;
-  const cms = useCMS$1();
-  const isLocalMode = (_b = (_a = cms.api) == null ? void 0 : _a.tina) == null ? void 0 : _b.isLocalMode;
-  const [branchingEnabled, setBranchingEnabled] = React__default.useState(
-    () => cms.flags.get("branch-switcher")
-  );
-  React__default.useEffect(() => {
-    cms.events.subscribe("flag:set", ({ key, value }) => {
-      if (key === "branch-switcher") {
-        setBranchingEnabled(value);
-      }
-    });
-  }, [cms.events]);
-  return /* @__PURE__ */ React__default.createElement("div", { className: "relative left-0 w-full h-full bg-gradient-to-b from-gray-50/50 to-gray-50 shadow-2xl overflow-y-auto transition-opacity duration-300 ease-out flex flex-col opacity-100" }, branchingEnabled && !isLocalMode && /* @__PURE__ */ React__default.createElement(BranchBanner, null), children);
-};
-const PageHeader = ({
-  isLocalMode,
-  children
-}) => {
-  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, isLocalMode && /* @__PURE__ */ React__default.createElement(LocalWarning, null), !isLocalMode && /* @__PURE__ */ React__default.createElement(BillingWarning, null), /* @__PURE__ */ React__default.createElement("div", { className: "pt-16 xl:pt-12 px-6 xl:px-12" }, /* @__PURE__ */ React__default.createElement("div", { className: "w-full mx-auto max-w-screen-xl" }, /* @__PURE__ */ React__default.createElement("div", { className: "w-full flex justify-between items-end" }, children))));
-};
-const PageBody = ({ children }) => /* @__PURE__ */ React__default.createElement("div", { className: "py-8 px-6 xl:px-12" }, children);
-const PageBodyNarrow = ({ children }) => /* @__PURE__ */ React__default.createElement("div", { className: "py-10 px-6 xl:px-12" }, /* @__PURE__ */ React__default.createElement("div", { className: "w-full mx-auto max-w-screen-xl" }, children));
-const DashboardPage = () => {
-  return /* @__PURE__ */ React__default.createElement(GetCMS, null, (cms) => {
-    var _a, _b;
-    return /* @__PURE__ */ React__default.createElement(PageWrapper, null, /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(PageHeader, { isLocalMode: (_b = (_a = cms.api) == null ? void 0 : _a.tina) == null ? void 0 : _b.isLocalMode }, /* @__PURE__ */ React__default.createElement("h3", { className: "text-2xl font-sans text-gray-700" }, "Welcome to Tina!")), /* @__PURE__ */ React__default.createElement(PageBodyNarrow, null, "This is your dashboard for editing or creating content. Select a collection on the left to begin.")));
-  });
-};
-function RiHome2Line(props) {
-  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24", "fill": "currentColor" }, "child": [{ "tag": "path", "attr": { "d": "M19 21H5C4.44772 21 4 20.5523 4 20V11L1 11L11.3273 1.6115C11.7087 1.26475 12.2913 1.26475 12.6727 1.6115L23 11L20 11V20C20 20.5523 19.5523 21 19 21ZM6 19H18V9.15745L12 3.7029L6 9.15745V19Z" }, "child": [] }] })(props);
-}
 const LoadingPage = () => /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(
   "div",
   {
@@ -32643,203 +32765,33 @@ const LoadingPage = () => /* @__PURE__ */ React__default.createElement(React__de
     )
   )
 ));
-const FullscreenError = ({
-  title = "Error",
-  errorMessage = "It looks like something went wrong."
-}) => {
-  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 useGetCollection = (cms, collectionName, includeDocuments = true, folder, after = "", sortKey, filterArgs) => {
-  const api = new TinaAdminApi(cms);
-  const schema = cms.api.tina.schema;
-  const collectionExtra = schema.getCollection(collectionName);
-  const [collection, setCollection] = useState(void 0);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState(void 0);
-  const [resetState, setResetSate] = useState(0);
-  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;
-        try {
-          const collection2 = await api.fetchCollection(
-            collectionName,
-            includeDocuments,
-            (filterArgs == null ? void 0 : filterArgs.filterField) ? "" : folder.fullyQualifiedName,
-            after,
-            validSortKey,
-            order,
-            filterArgs
-          );
-          setCollection(collection2);
-        } catch (error2) {
-          cms.alerts.error(
-            `[${error2.name}] GetCollection failed: ${error2.message}`
-          );
-          console.error(error2);
-          setCollection(void 0);
-          setError(error2);
-        }
-        setLoading(false);
-      }
-    };
-    if (cancelled)
-      return;
-    setLoading(true);
-    fetchCollection();
-    return () => {
-      cancelled = true;
-    };
-  }, [
-    cms,
-    collectionName,
-    folder.loading,
-    folder.fullyQualifiedName,
-    resetState,
-    after,
-    sortKey
-  ]);
-  const reFetchCollection = () => setResetSate((x) => x + 1);
-  return { collection, loading, error, reFetchCollection, collectionExtra };
-};
-const useSearchCollection = (cms, collectionName, includeDocuments = true, folder, after = "", search) => {
-  const api = new TinaAdminApi(cms);
-  const schema = cms.api.tina.schema;
-  const collectionExtra = schema.getCollection(collectionName);
-  const [collection, setCollection] = useState(void 0);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState(void 0);
-  const [resetState, setResetSate] = useState(0);
-  useEffect(() => {
-    let cancelled = false;
-    const searchCollection = async () => {
-      if (await api.isAuthenticated() && !folder.loading && !cancelled) {
-        try {
-          const response = await cms.api.search.query(
-            `${search} AND _collection:${collectionName}`,
-            {
-              limit: 15,
-              cursor: after
-            }
-          );
-          const docs = await Promise.allSettled(
-            response.results.map((result) => {
-              const [collection2, relativePath2] = result._id.split(":");
-              return api.fetchDocument(collection2, relativePath2, false);
-            })
-          );
-          const edges = docs.filter((p) => {
-            var _a;
-            return p.status === "fulfilled" && !!((_a = p.value) == null ? void 0 : _a.document);
-          }).map((result) => ({ node: result.value.document }));
-          const c = await api.fetchCollection(collectionName, false, "");
-          setCollection({
-            format: collection.format,
-            label: collection.label,
-            name: collectionName,
-            templates: collection.templates,
-            documents: {
-              pageInfo: {
-                hasNextPage: !!response.nextCursor,
-                hasPreviousPage: !!response.prevCursor,
-                startCursor: "",
-                endCursor: response.nextCursor || ""
-              },
-              edges
-            }
-          });
-        } catch (error2) {
-          cms.alerts.error(
-            `[${error2.name}] GetCollection failed: ${error2.message}`
-          );
-          console.error(error2);
-          setCollection(void 0);
-          setError(error2);
-        }
-        setLoading(false);
+function RiHome2Line(props) {
+  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24", "fill": "currentColor" }, "child": [{ "tag": "path", "attr": { "d": "M19 21H5C4.44772 21 4 20.5523 4 20V11L1 11L11.3273 1.6115C11.7087 1.26475 12.2913 1.26475 12.6727 1.6115L23 11L20 11V20C20 20.5523 19.5523 21 19 21ZM6 19H18V9.15745L12 3.7029L6 9.15745V19Z" }, "child": [] }] })(props);
+}
+const PageWrapper = ({ children }) => {
+  var _a, _b;
+  const cms = useCMS$1();
+  const isLocalMode = (_b = (_a = cms.api) == null ? void 0 : _a.tina) == null ? void 0 : _b.isLocalMode;
+  const [branchingEnabled, setBranchingEnabled] = React__default.useState(
+    () => cms.flags.get("branch-switcher")
+  );
+  React__default.useEffect(() => {
+    cms.events.subscribe("flag:set", ({ key, value }) => {
+      if (key === "branch-switcher") {
+        setBranchingEnabled(value);
       }
-    };
-    if (cancelled)
-      return;
-    setLoading(true);
-    searchCollection();
-    return () => {
-      cancelled = true;
-    };
-  }, [
-    cms,
-    collectionName,
-    folder.loading,
-    folder.fullyQualifiedName,
-    resetState,
-    after,
-    search
-  ]);
-  const reFetchCollection = () => setResetSate((x) => x + 1);
-  return { collection, loading, error, reFetchCollection, collectionExtra };
+    });
+  }, [cms.events]);
+  return /* @__PURE__ */ React__default.createElement("div", { className: "relative left-0 w-full h-full bg-gradient-to-b from-gray-50/50 to-gray-50 shadow-2xl overflow-y-auto transition-opacity duration-300 ease-out flex flex-col opacity-100" }, branchingEnabled && !isLocalMode && /* @__PURE__ */ React__default.createElement(BranchBanner, null), children);
 };
-const GetCollection = ({
-  cms,
-  collectionName,
-  folder,
-  includeDocuments = true,
-  startCursor,
-  sortKey,
-  children,
-  filterArgs,
-  search
+const PageHeader = ({
+  isLocalMode,
+  children
 }) => {
-  const navigate = useNavigate();
-  const { collection, loading, error, reFetchCollection, collectionExtra } = search ? useSearchCollection(
-    cms,
-    collectionName,
-    includeDocuments,
-    folder,
-    startCursor || "",
-    search
-  ) : useGetCollection(
-    cms,
-    collectionName,
-    includeDocuments,
-    folder,
-    startCursor || "",
-    sortKey,
-    filterArgs
-  ) || {};
-  useEffect(() => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _i;
-    if (loading)
-      return;
-    const collectionDefinition = cms.api.tina.schema.getCollection(
-      collection.name
-    );
-    const allowCreate = ((_b = (_a = collectionDefinition == null ? void 0 : collectionDefinition.ui) == null ? void 0 : _a.allowedActions) == null ? void 0 : _b.create) ?? true;
-    const allowDelete = ((_d = (_c = collectionDefinition == null ? void 0 : collectionDefinition.ui) == null ? void 0 : _c.allowedActions) == null ? void 0 : _d.delete) ?? true;
-    const collectionResponse = collection;
-    if (!allowCreate && !allowDelete && // Check there is only one document
-    ((_f = (_e = collectionResponse.documents) == null ? void 0 : _e.edges) == null ? void 0 : _f.length) === 1 && // Check to make sure the file is not a folder
-    ((_i = (_h = (_g = collectionResponse.documents) == null ? void 0 : _g.edges[0]) == null ? void 0 : _h.node) == null ? void 0 : _i.__typename) !== "Folder") {
-      const doc = collectionResponse.documents.edges[0].node;
-      handleNavigate(
-        navigate,
-        cms,
-        collectionResponse,
-        collectionDefinition,
-        doc
-      );
-    }
-  }, [(collection == null ? void 0 : collection.name) || "", loading]);
-  if (error) {
-    return /* @__PURE__ */ React__default.createElement(FullscreenError, null);
-  }
-  if (loading) {
-    return /* @__PURE__ */ React__default.createElement(LoadingPage, null);
-  }
-  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, children(collection, loading, reFetchCollection, collectionExtra));
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, isLocalMode && /* @__PURE__ */ React__default.createElement(LocalWarning, null), !isLocalMode && /* @__PURE__ */ React__default.createElement(BillingWarning, null), /* @__PURE__ */ React__default.createElement("div", { className: "pt-16 xl:pt-12 px-6 xl:px-12" }, /* @__PURE__ */ React__default.createElement("div", { className: "w-full mx-auto max-w-screen-xl" }, /* @__PURE__ */ React__default.createElement("div", { className: "w-full flex justify-between items-end" }, children))));
 };
+const PageBody = ({ children }) => /* @__PURE__ */ React__default.createElement("div", { className: "py-8 px-6 xl:px-12" }, children);
+const PageBodyNarrow = ({ children }) => /* @__PURE__ */ React__default.createElement("div", { className: "py-10 px-6 xl:px-12" }, /* @__PURE__ */ React__default.createElement("div", { className: "w-full mx-auto max-w-screen-xl" }, children));
 const folderRegex = /^.*\/~\/*(.*)$/;
 const parentFolder = (folder) => {
   return {
@@ -33717,6 +33669,231 @@ const RenameModal = ({
     "Rename"
   ))));
 };
+const FullscreenError = ({
+  title = "Error",
+  errorMessage = "It looks like something went wrong."
+}) => {
+  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;
+  const collectionExtra = schema.getCollection(collectionName);
+  const [collection, setCollection] = useState(void 0);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(void 0);
+  const [resetState, setResetSate] = useState(0);
+  useEffect(() => {
+    let cancelled = false;
+    const fetchCollection = async () => {
+      if (await api.isAuthenticated() && !folder.loading && !cancelled) {
+        const { name, order } = JSON.parse(sortKey || "{}");
+        const validSortKey = isValidSortKey(name, collectionExtra) ? name : void 0;
+        try {
+          const collection2 = await api.fetchCollection(
+            collectionName,
+            includeDocuments,
+            (filterArgs == null ? void 0 : filterArgs.filterField) ? "" : folder.fullyQualifiedName,
+            after,
+            validSortKey,
+            order,
+            filterArgs
+          );
+          setCollection(collection2);
+        } catch (error2) {
+          cms.alerts.error(
+            `[${error2.name}] GetCollection failed: ${error2.message}`
+          );
+          console.error(error2);
+          setCollection(void 0);
+          setError(error2);
+        }
+        setLoading(false);
+      }
+    };
+    if (cancelled)
+      return;
+    setLoading(true);
+    fetchCollection();
+    return () => {
+      cancelled = true;
+    };
+  }, [
+    cms,
+    collectionName,
+    folder.loading,
+    folder.fullyQualifiedName,
+    resetState,
+    after,
+    sortKey
+  ]);
+  const reFetchCollection = () => setResetSate((x) => x + 1);
+  return { collection, loading, error, reFetchCollection, collectionExtra };
+};
+const useSearchCollection = (cms, collectionName, includeDocuments = true, folder, after = "", search) => {
+  const api = new TinaAdminApi(cms);
+  const schema = cms.api.tina.schema;
+  const collectionExtra = schema.getCollection(collectionName);
+  const [collection, setCollection] = useState(void 0);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(void 0);
+  const [resetState, setResetSate] = useState(0);
+  useEffect(() => {
+    let cancelled = false;
+    const searchCollection = async () => {
+      if (await api.isAuthenticated() && !folder.loading && !cancelled) {
+        try {
+          const response = await cms.api.search.query(
+            `${search} AND _collection:${collectionName}`,
+            {
+              limit: 15,
+              cursor: after
+            }
+          );
+          const docs = await Promise.allSettled(
+            response.results.map((result) => {
+              const [collection2, relativePath2] = result._id.split(":");
+              return api.fetchDocument(collection2, relativePath2, false);
+            })
+          );
+          const edges = docs.filter((p) => {
+            var _a;
+            return p.status === "fulfilled" && !!((_a = p.value) == null ? void 0 : _a.document);
+          }).map((result) => ({ node: result.value.document }));
+          const c = await api.fetchCollection(collectionName, false, "");
+          setCollection({
+            format: collection.format,
+            label: collection.label,
+            name: collectionName,
+            templates: collection.templates,
+            documents: {
+              pageInfo: {
+                hasNextPage: !!response.nextCursor,
+                hasPreviousPage: !!response.prevCursor,
+                startCursor: "",
+                endCursor: response.nextCursor || ""
+              },
+              edges
+            }
+          });
+        } catch (error2) {
+          cms.alerts.error(
+            `[${error2.name}] GetCollection failed: ${error2.message}`
+          );
+          console.error(error2);
+          setCollection(void 0);
+          setError(error2);
+        }
+        setLoading(false);
+      }
+    };
+    if (cancelled)
+      return;
+    setLoading(true);
+    searchCollection();
+    return () => {
+      cancelled = true;
+    };
+  }, [
+    cms,
+    collectionName,
+    folder.loading,
+    folder.fullyQualifiedName,
+    resetState,
+    after,
+    search
+  ]);
+  const reFetchCollection = () => setResetSate((x) => x + 1);
+  return { collection, loading, error, reFetchCollection, collectionExtra };
+};
+const GetCollection = ({
+  cms,
+  collectionName,
+  folder,
+  includeDocuments = true,
+  startCursor,
+  sortKey,
+  children,
+  filterArgs,
+  search
+}) => {
+  const navigate = useNavigate();
+  const { collection, loading, error, reFetchCollection, collectionExtra } = search ? useSearchCollection(
+    cms,
+    collectionName,
+    includeDocuments,
+    folder,
+    startCursor || "",
+    search
+  ) : useGetCollection(
+    cms,
+    collectionName,
+    includeDocuments,
+    folder,
+    startCursor || "",
+    sortKey,
+    filterArgs
+  ) || {};
+  useEffect(() => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i;
+    if (loading)
+      return;
+    const collectionDefinition = cms.api.tina.schema.getCollection(
+      collection.name
+    );
+    const allowCreate = ((_b = (_a = collectionDefinition == null ? void 0 : collectionDefinition.ui) == null ? void 0 : _a.allowedActions) == null ? void 0 : _b.create) ?? true;
+    const allowDelete = ((_d = (_c = collectionDefinition == null ? void 0 : collectionDefinition.ui) == null ? void 0 : _c.allowedActions) == null ? void 0 : _d.delete) ?? true;
+    const collectionResponse = collection;
+    if (!allowCreate && !allowDelete && // Check there is only one document
+    ((_f = (_e = collectionResponse.documents) == null ? void 0 : _e.edges) == null ? void 0 : _f.length) === 1 && // Check to make sure the file is not a folder
+    ((_i = (_h = (_g = collectionResponse.documents) == null ? void 0 : _g.edges[0]) == null ? void 0 : _h.node) == null ? void 0 : _i.__typename) !== "Folder") {
+      const doc = collectionResponse.documents.edges[0].node;
+      handleNavigate(
+        navigate,
+        cms,
+        collectionResponse,
+        collectionDefinition,
+        doc
+      );
+    }
+  }, [(collection == null ? void 0 : collection.name) || "", loading]);
+  if (error) {
+    return /* @__PURE__ */ React__default.createElement(FullscreenError, null);
+  }
+  if (loading) {
+    return /* @__PURE__ */ React__default.createElement(LoadingPage, null);
+  }
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, children(collection, loading, reFetchCollection, collectionExtra));
+};
 const ErrorDialog = (props) => {
   return /* @__PURE__ */ React__default.createElement(
     "div",
@@ -34260,6 +34437,12 @@ const RenderForm = ({
     ), /* @__PURE__ */ React__default.createElement("span", { className: "opacity-30 text-sm leading-tight whitespace-nowrap flex-0" }, "/"), /* @__PURE__ */ React__default.createElement("span", { className: "flex-1 w-full text-sm leading-tight whitespace-nowrap truncate" }, `${filename}.${collection.format}`), /* @__PURE__ */ React__default.createElement(FormStatus, { pristine: formIsPristine }))
   ), activeForm && /* @__PURE__ */ React__default.createElement(FormBuilder, { form: activeForm, onPristineChange: setFormIsPristine }));
 };
+const DashboardPage = () => {
+  return /* @__PURE__ */ React__default.createElement(GetCMS, null, (cms) => {
+    var _a, _b;
+    return /* @__PURE__ */ React__default.createElement(PageWrapper, null, /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(PageHeader, { isLocalMode: (_b = (_a = cms.api) == null ? void 0 : _a.tina) == null ? void 0 : _b.isLocalMode }, /* @__PURE__ */ React__default.createElement("h3", { className: "text-2xl font-sans text-gray-700" }, "Welcome to Tina!")), /* @__PURE__ */ React__default.createElement(PageBodyNarrow, null, "This is your dashboard for editing or creating content. Select a collection on the left to begin.")));
+  });
+};
 const ScreenPage = () => {
   const { screenName } = useParams();
   return /* @__PURE__ */ React__default.createElement(GetCMS, null, (cms) => {
@@ -34278,6 +34461,71 @@ const ScreenPage = () => {
     } })));
   });
 };
+function AuthCallback({
+  clientId,
+  identityApiUrl
+}) {
+  console.log("AuthCallback", clientId, identityApiUrl);
+  const [code, setCode] = React.useState(null);
+  const [state, setState] = React.useState(null);
+  const [tokenResponse, setTokenResponse] = React.useState(null);
+  const [app, setApp] = React.useState(null);
+  React.useEffect(() => {
+    if (typeof window !== "undefined") {
+      const queryParams = new URLSearchParams(window.location.search);
+      setCode(queryParams.get("code"));
+      setState(queryParams.get("state"));
+    }
+  }, []);
+  React.useEffect(() => {
+    if (code && state) {
+      if (localStorage.getItem("code_verifier")) {
+        const origin = `${window.location.protocol}//${window.location.host}`;
+        const redirectUri = encodeURIComponent(
+          `${origin}/admin#/auth/callback`
+        );
+        fetch(`${identityApiUrl}/oauth2/${clientId}/token`, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/x-www-form-urlencoded"
+          },
+          body: new URLSearchParams({
+            grant_type: "authorization_code",
+            code,
+            redirect_uri: redirectUri,
+            client_id: clientId || "",
+            code_verifier: localStorage.getItem("code_verifier")
+          })
+        }).then((response) => response.json()).then((data) => {
+          console.log("Token exchange response:", data);
+          setTokenResponse(data);
+        }).catch((error) => {
+          console.error("Error during token exchange:", error);
+        });
+      }
+    }
+  }, [code, state]);
+  React.useEffect(() => {
+    localStorage.setItem(
+      AUTH_TOKEN_KEY,
+      JSON.stringify(tokenResponse, null, 2)
+    );
+  }, [tokenResponse]);
+  React.useEffect(() => {
+    fetch(`${identityApiUrl}/v2/apps/${clientId}`, {
+      method: "GET",
+      headers: {
+        "Content-Type": "application/x-www-form-urlencoded",
+        Authorization: "Bearer " + (tokenResponse == null ? void 0 : tokenResponse.access_token)
+      }
+    }).then((response) => response.json()).then((data) => {
+      setApp(data);
+    }).catch((error) => {
+      console.error("Error fetching apps:", error);
+    });
+  }, [tokenResponse]);
+  return /* @__PURE__ */ React.createElement("div", null, code && /* @__PURE__ */ React.createElement("div", null, "Code: ", /* @__PURE__ */ React.createElement("pre", null, code), /* @__PURE__ */ React.createElement("br", null)), state && /* @__PURE__ */ React.createElement("div", null, "State: ", /* @__PURE__ */ React.createElement("pre", null, state), /* @__PURE__ */ React.createElement("br", null)), tokenResponse && /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("h2", null, "Token Response:"), /* @__PURE__ */ React.createElement("pre", null, tokenResponse.access_token), /* @__PURE__ */ React.createElement("br", null)), /* @__PURE__ */ React.createElement("div", null, app && /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("h2", null, "Project Name: ", app.name), /* @__PURE__ */ React.createElement("p", null, "Project ID: ", /* @__PURE__ */ React.createElement("pre", null, app.id)))));
+}
 const IndexingPage = () => {
   const cms = useCMS$1();
   const tinaApi = cms.api.tina;
@@ -34342,7 +34590,7 @@ const IndexingPage = () => {
         } catch {
           cms.alerts.error("Branch indexing failed.");
           setErrorMessage(
-            'Branch indexing failed, please check the Tina Cloud dashboard for more information. To try again chick "re-index" on the branch in the dashboard.'
+            'Branch indexing failed, please check the TinaCloud dashboard for more information. To try again chick "re-index" on the branch in the dashboard.'
           );
           setState("error");
         }
@@ -34510,7 +34758,7 @@ const CheckSchema = ({
           );
         }
       }).catch((e) => {
-        if (e.message.includes("has not been indexed by Tina Cloud")) {
+        if (e.message.includes("has not been indexed by TinaCloud")) {
           setSchemaMissingError(true);
         } else {
           cms.alerts.error(`Unexpected error checking schema: ${e}`);
@@ -34625,6 +34873,18 @@ const TinaAdmin = ({
           path: "screens/:screenName",
           element: /* @__PURE__ */ React__default.createElement(DefaultWrapper, { cms }, /* @__PURE__ */ React__default.createElement(ScreenPage, null))
         }
+      ), /* @__PURE__ */ React__default.createElement(
+        Route,
+        {
+          path: "auth/callback",
+          element: /* @__PURE__ */ React__default.createElement(DefaultWrapper, { cms }, /* @__PURE__ */ React__default.createElement(
+            AuthCallback,
+            {
+              clientId: tinaClient.clientId,
+              identityApiUrl: tinaClient.identityApiUrl
+            }
+          ))
+        }
       ), /* @__PURE__ */ React__default.createElement(
         Route,
         {