tinacms 2.7.2 → 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,13 +53,12 @@ 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 * as yup from "yup";
 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 { stringifyMDX } from "@tinacms/mdx";
 const ModalProvider = ({ children }) => {
@@ -5332,7 +5332,9 @@ const Combobox = ({ cms, input, field }) => {
   }, [value, input, optionSets]);
   React.useEffect(() => {
     if (field.experimental___filter && optionSets.length > 0) {
-      setFilteredOptionsList(field.experimental___filter(optionSets, void 0));
+      setFilteredOptionsList(
+        field.experimental___filter(optionSets, void 0)
+      );
     } else {
       setFilteredOptionsList(optionSets);
     }
@@ -5702,7 +5704,9 @@ const Item$2 = ({
         onClick: () => {
           const state = tinaForm.finalForm.getState();
           if (state.invalid === true) {
-            cms.alerts.error("Cannot navigate away from an invalid form.");
+            cms.alerts.error(
+              "Cannot navigate away from an invalid form."
+            );
             return;
           }
           cms.dispatch({
@@ -6286,7 +6290,9 @@ const BlockListItem = ({
       onClick: () => {
         const state = tinaForm.finalForm.getState();
         if (state.invalid === true) {
-          cms.alerts.error("Cannot navigate away from an invalid form.");
+          cms.alerts.error(
+            "Cannot navigate away from an invalid form."
+          );
           return;
         }
         cms.dispatch({
@@ -6768,28 +6774,28 @@ class DaysView extends React__default.Component {
   }
   renderDayHeaders() {
     const locale = this.props.viewDate.localeData();
-    let dayItems = getDaysOfWeek(locale).map((day, index) => /* @__PURE__ */ React__default.createElement("th", { key: day + index, className: "dow" }, day));
+    const dayItems = getDaysOfWeek(locale).map((day, index) => /* @__PURE__ */ React__default.createElement("th", { key: day + index, className: "dow" }, day));
     return /* @__PURE__ */ React__default.createElement("tr", null, dayItems);
   }
   renderDays() {
     const date = this.props.viewDate;
     const startOfMonth = date.clone().startOf("month");
     const endOfMonth = date.clone().endOf("month");
-    let rows = [[], [], [], [], [], []];
-    let startDate = date.clone().subtract(1, "months");
+    const rows = [[], [], [], [], [], []];
+    const startDate = date.clone().subtract(1, "months");
     startDate.date(startDate.daysInMonth()).startOf("week");
-    let endDate = startDate.clone().add(42, "d");
+    const endDate = startDate.clone().add(42, "d");
     let i = 0;
     while (startDate.isBefore(endDate)) {
-      let row = getRow$2(rows, i++);
+      const row = getRow$2(rows, i++);
       row.push(this.renderDay(startDate, startOfMonth, endOfMonth));
       startDate.add(1, "d");
     }
     return rows.map((r, i2) => /* @__PURE__ */ React__default.createElement("tr", { key: `${endDate.month()}_${i2}` }, r));
   }
   renderDay(date, startOfMonth, endOfMonth) {
-    let selectedDate = this.props.selectedDate;
-    let dayProps = {
+    const selectedDate = this.props.selectedDate;
+    const dayProps = {
       key: date.format("M_D"),
       "data-value": date.date(),
       "data-month": date.month(),
@@ -6843,7 +6849,7 @@ function getRow$2(rows, day) {
 }
 function getDaysOfWeek(locale) {
   const first = locale.firstDayOfWeek();
-  let dow = [];
+  const dow = [];
   let i = 0;
   locale._weekdaysMin.forEach(function(day) {
     dow[(7 + i++ - first) % 7] = day;
@@ -6861,7 +6867,7 @@ class MonthsView extends React__default.Component {
     return /* @__PURE__ */ React__default.createElement("div", { className: "rdtMonths" }, /* @__PURE__ */ React__default.createElement("table", null, /* @__PURE__ */ React__default.createElement("thead", null, this.renderNavigation())), /* @__PURE__ */ React__default.createElement("table", null, /* @__PURE__ */ React__default.createElement("tbody", null, this.renderMonths())));
   }
   renderNavigation() {
-    let year = this.props.viewDate.year();
+    const year = this.props.viewDate.year();
     return /* @__PURE__ */ React__default.createElement(
       ViewNavigation,
       {
@@ -6874,9 +6880,9 @@ class MonthsView extends React__default.Component {
     );
   }
   renderMonths() {
-    let rows = [[], [], []];
+    const rows = [[], [], []];
     for (let month = 0; month < 12; month++) {
-      let row = getRow$1(rows, month);
+      const row = getRow$1(rows, month);
       row.push(this.renderMonth(month));
     }
     return rows.map((months, i) => /* @__PURE__ */ React__default.createElement("tr", { key: i }, months));
@@ -6893,7 +6899,7 @@ class MonthsView extends React__default.Component {
     if (selectedDate && selectedDate.year() === this.props.viewDate.year() && selectedDate.month() === month) {
       className += " rdtActive";
     }
-    let props = { key: month, className, "data-value": month, onClick };
+    const props = { key: month, className, "data-value": month, onClick };
     if (this.props.renderMonth) {
       return this.props.renderMonth(
         props,
@@ -6905,11 +6911,11 @@ class MonthsView extends React__default.Component {
     return /* @__PURE__ */ React__default.createElement("td", { ...props }, this.getMonthText(month));
   }
   isDisabledMonth(month) {
-    let isValidDate = this.props.isValidDate;
+    const isValidDate = this.props.isValidDate;
     if (!isValidDate) {
       return false;
     }
-    let date = this.props.viewDate.clone().set({ month });
+    const date = this.props.viewDate.clone().set({ month });
     let day = date.endOf("month").date() + 1;
     while (day-- > 1) {
       if (isValidDate(date.date(day))) {
@@ -6961,9 +6967,9 @@ class YearsView extends React__default.Component {
   }
   renderYears() {
     const viewYear = this.getViewYear();
-    let rows = [[], [], []];
+    const rows = [[], [], []];
     for (let year = viewYear - 1; year < viewYear + 11; year++) {
-      let row = getRow(rows, year - viewYear);
+      const row = getRow(rows, year - viewYear);
       row.push(this.renderYear(year));
     }
     return rows.map((years, i) => /* @__PURE__ */ React__default.createElement("tr", { key: i }, years));
@@ -6980,7 +6986,7 @@ class YearsView extends React__default.Component {
     if (selectedYear === year) {
       className += " rdtActive";
     }
-    let props = { key: year, className, "data-value": year, onClick };
+    const props = { key: year, className, "data-value": year, onClick };
     return this.props.renderYear(
       props,
       year,
@@ -6994,15 +7000,15 @@ class YearsView extends React__default.Component {
     return this.props.selectedDate && this.props.selectedDate.year();
   }
   isDisabledYear(year) {
-    let cache = this.disabledYearsCache;
+    const cache = this.disabledYearsCache;
     if (cache[year] !== void 0) {
       return cache[year];
     }
-    let isValidDate = this.props.isValidDate;
+    const isValidDate = this.props.isValidDate;
     if (!isValidDate) {
       return false;
     }
-    let date = this.props.viewDate.clone().set({ year });
+    const date = this.props.viewDate.clone().set({ year });
     let day = date.endOf("year").dayOfYear() + 1;
     while (day-- > 1) {
       if (isValidDate(date.dayOfYear(day))) {
@@ -7049,7 +7055,7 @@ const timeConstraints = {
   }
 };
 function createConstraints(overrideTimeConstraints) {
-  let constraints = {};
+  const constraints = {};
   Object.keys(timeConstraints).forEach((type) => {
     constraints[type] = {
       ...timeConstraints[type],
@@ -7065,7 +7071,7 @@ class TimeView extends React__default.Component {
     this.state = this.getTimeParts(props.selectedDate || props.viewDate);
   }
   render() {
-    let items2 = [];
+    const items2 = [];
     const timeParts = this.state;
     this.getCounters().forEach((c, i) => {
       if (i && c !== "ampm") {
@@ -7127,8 +7133,8 @@ class TimeView extends React__default.Component {
     }
     if (type === "ampm")
       return this.toggleDayPart();
-    let update = {};
-    let body = document.body;
+    const update = {};
+    const body = document.body;
     update[type] = this[action](type);
     this.setState(update);
     this.timer = setTimeout(() => {
@@ -7171,8 +7177,8 @@ class TimeView extends React__default.Component {
     return pad(type, value);
   }
   getCounters() {
-    let counters = [];
-    let format2 = this.props.timeFormat;
+    const counters = [];
+    const format2 = this.props.timeFormat;
     if (format2.toLowerCase().indexOf("h") !== -1) {
       counters.push("hours");
       if (format2.indexOf("m") !== -1) {
@@ -7304,7 +7310,7 @@ class Datetime extends React__default.Component {
     __publicField(this, "_renderCalendar", () => {
       const props = this.props;
       const state = this.state;
-      let viewProps = {
+      const viewProps = {
         viewDate: state.viewDate.clone(),
         selectedDate: this.getSelectedDate(),
         isValidDate: props.isValidDate,
@@ -7347,10 +7353,10 @@ class Datetime extends React__default.Component {
     __publicField(this, "viewToMethod", { days: "date", months: "month", years: "year" });
     __publicField(this, "nextView", { days: "time", months: "days", years: "months" });
     __publicField(this, "_updateDate", (e) => {
-      let state = this.state;
-      let currentView = state.currentView;
-      let updateOnView = this.getUpdateOn(this.getFormat("date"));
-      let viewDate = this.state.viewDate.clone();
+      const state = this.state;
+      const currentView = state.currentView;
+      const updateOnView = this.getUpdateOn(this.getFormat("date"));
+      const viewDate = this.state.viewDate.clone();
       viewDate[this.viewToMethod[currentView]](
         parseInt(e.target.getAttribute("data-value"), 10)
       );
@@ -7358,7 +7364,7 @@ class Datetime extends React__default.Component {
         viewDate.month(parseInt(e.target.getAttribute("data-month"), 10));
         viewDate.year(parseInt(e.target.getAttribute("data-year"), 10));
       }
-      let update = { viewDate };
+      const update = { viewDate };
       if (currentView === updateOnView) {
         update.selectedDate = viewDate.clone();
         update.inputValue = viewDate.format(this.getFormat("datetime"));
@@ -7372,7 +7378,7 @@ class Datetime extends React__default.Component {
       this.setState(update);
     });
     __publicField(this, "_viewNavigate", (modifier, unit) => {
-      let viewDate = this.state.viewDate.clone();
+      const viewDate = this.state.viewDate.clone();
       viewDate.add(modifier, unit);
       if (modifier > 0) {
         this.props.onNavigateForward(modifier, unit);
@@ -7382,7 +7388,7 @@ class Datetime extends React__default.Component {
       this.setState({ viewDate });
     });
     __publicField(this, "_setTime", (type, value) => {
-      let date = (this.getSelectedDate() || this.state.viewDate).clone();
+      const date = (this.getSelectedDate() || this.state.viewDate).clone();
       date[type](value);
       if (!this.props.value) {
         this.setState({
@@ -7406,7 +7412,7 @@ class Datetime extends React__default.Component {
       });
     });
     __publicField(this, "_handleClickOutside", () => {
-      let props = this.props;
+      const props = this.props;
       if (props.input && this.state.open && props.open === void 0 && props.closeOnClickOutside) {
         this._closeCalendar();
       }
@@ -7421,7 +7427,7 @@ class Datetime extends React__default.Component {
         return;
       const value = e.target ? e.target.value : e;
       const localMoment = this.localMoment(value, this.getFormat("datetime"));
-      let update = { inputValue: value };
+      const update = { inputValue: value };
       if (localMoment.isValid()) {
         update.selectedDate = localMoment;
         update.viewDate = localMoment.clone().startOf("month");
@@ -7485,9 +7491,9 @@ class Datetime extends React__default.Component {
     return this.props.renderView(this.state.currentView, this._renderCalendar);
   }
   getInitialState() {
-    let props = this.props;
-    let inputFormat = this.getFormat("datetime");
-    let selectedDate = this.parseDate(
+    const props = this.props;
+    const inputFormat = this.getFormat("datetime");
+    const selectedDate = this.parseDate(
       props.value || props.initialValue,
       inputFormat
     );
@@ -7518,7 +7524,7 @@ class Datetime extends React__default.Component {
     return this.getInitialDate();
   }
   getInitialDate() {
-    let m = this.localMoment();
+    const m = this.localMoment();
     m.hour(0).minute(0).second(0).millisecond(0);
     return m;
   }
@@ -7538,8 +7544,8 @@ class Datetime extends React__default.Component {
   }
   getClassName() {
     let cn2 = "rdt";
-    let props = this.props;
-    let propCn = props.className;
+    const props = this.props;
+    const propCn = props.className;
     if (Array.isArray(propCn)) {
       cn2 += " " + propCn.join(" ");
     } else if (propCn) {
@@ -7572,14 +7578,14 @@ class Datetime extends React__default.Component {
     return viewModes.DAYS;
   }
   getLocaleData() {
-    let p = this.props;
+    const p = this.props;
     return this.localMoment(
       p.value || p.defaultValue || /* @__PURE__ */ new Date()
     ).localeData();
   }
   getDateFormat() {
     const locale = this.getLocaleData();
-    let format2 = this.props.dateFormat;
+    const format2 = this.props.dateFormat;
     if (format2 === true)
       return locale.longDateFormat("L");
     if (format2)
@@ -7588,7 +7594,7 @@ class Datetime extends React__default.Component {
   }
   getTimeFormat() {
     const locale = this.getLocaleData();
-    let format2 = this.props.timeFormat;
+    const format2 = this.props.timeFormat;
     if (format2 === true) {
       return locale.longDateFormat("LT");
     }
@@ -7600,12 +7606,12 @@ class Datetime extends React__default.Component {
     } else if (type === "time") {
       return this.getTimeFormat();
     }
-    let dateFormat = this.getDateFormat();
-    let timeFormat = this.getTimeFormat();
+    const dateFormat = this.getDateFormat();
+    const timeFormat = this.getTimeFormat();
     return dateFormat && timeFormat ? dateFormat + " " + timeFormat : dateFormat || timeFormat;
   }
   updateTime(op, amount, type, toSelected) {
-    let update = {};
+    const update = {};
     const date = toSelected ? "selectedDate" : "viewDate";
     update[date] = this.state[date].clone()[op](amount, type);
     this.setState(update);
@@ -7638,7 +7644,7 @@ class Datetime extends React__default.Component {
     if (prevProps === this.props)
       return;
     let needsUpdate = false;
-    let thisProps = this.props;
+    const thisProps = this.props;
     ["locale", "utc", "displayZone", "dateFormat", "timeFormat"].forEach(
       function(p) {
         prevProps[p] !== thisProps[p] && (needsUpdate = true);
@@ -7654,8 +7660,8 @@ class Datetime extends React__default.Component {
   }
   regenerateDates() {
     const props = this.props;
-    let viewDate = this.state.viewDate.clone();
-    let selectedDate = this.state.selectedDate && this.state.selectedDate.clone();
+    const viewDate = this.state.viewDate.clone();
+    const selectedDate = this.state.selectedDate && this.state.selectedDate.clone();
     if (props.locale) {
       viewDate.locale(props.locale);
       selectedDate && selectedDate.locale(props.locale);
@@ -7670,7 +7676,7 @@ class Datetime extends React__default.Component {
       viewDate.locale();
       selectedDate && selectedDate.locale();
     }
-    let update = { viewDate, selectedDate };
+    const update = { viewDate, selectedDate };
     if (selectedDate && selectedDate.isValid()) {
       update.inputValue = selectedDate.format(this.getFormat("datetime"));
     }
@@ -7679,7 +7685,7 @@ class Datetime extends React__default.Component {
   getSelectedDate() {
     if (this.props.value === void 0)
       return this.state.selectedDate;
-    let selectedDate = this.parseDate(
+    const selectedDate = this.parseDate(
       this.props.value,
       this.getFormat("datetime")
     );
@@ -7698,7 +7704,7 @@ class Datetime extends React__default.Component {
     return "";
   }
   getInputValue() {
-    let selectedDate = this.getSelectedDate();
+    const selectedDate = this.getSelectedDate();
     return selectedDate ? selectedDate.format(this.getFormat("datetime")) : this.state.inputValue;
   }
   /**
@@ -7708,7 +7714,7 @@ class Datetime extends React__default.Component {
    * @public
    */
   setViewDate(date) {
-    let logError = function() {
+    const logError = function() {
       return log("Invalid date passed to the `setViewDate` method: " + date);
     };
     if (!date)
@@ -7804,7 +7810,7 @@ __publicField(Datetime, "defaultProps", {
 // Make moment accessible through the Datetime class
 __publicField(Datetime, "moment", moment);
 function log(message, method) {
-  let con = typeof window !== "undefined" && window.console;
+  const con = typeof window !== "undefined" && window.console;
   if (!con)
     return;
   if (!method) {
@@ -8627,7 +8633,10 @@ const BranchSelector = ({
               label: "View in GitHub",
               Icon: /* @__PURE__ */ React.createElement(BiLinkExternal, { className: "w-5 h-auto text-blue-500 opacity-70" }),
               onMouseDown: () => {
-                window.open(branch.githubPullRequestUrl, "_blank");
+                window.open(
+                  branch.githubPullRequestUrl,
+                  "_blank"
+                );
               }
             },
             typeof previewFunction === "function" && ((_b2 = previewFunction({ branch: branch.name })) == null ? void 0 : _b2.url) && {
@@ -8933,7 +8942,9 @@ class EventBus {
     } else {
       events = event;
     }
-    const newListeners = events.map((event2) => new Listener(event2, callback));
+    const newListeners = events.map(
+      (event2) => new Listener(event2, callback)
+    );
     newListeners.forEach((newListener) => this.listeners.add(newListener));
     return () => {
       newListeners.forEach((listener) => this.listeners.delete(listener));
@@ -9289,9 +9300,7 @@ class TinaMediaStore {
           const deleteStartTime = Date.now();
           while (true) {
             await new Promise((resolve) => setTimeout(resolve, 1e3));
-            const { error, message } = await this.api.getRequestStatus(
-              requestId
-            );
+            const { error, message } = await this.api.getRequestStatus(requestId);
             if (error !== void 0) {
               if (error) {
                 throw new Error(message);
@@ -9626,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",
@@ -9639,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 = {}) {
@@ -9672,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;
     }
@@ -9746,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);
 }
@@ -10220,7 +9980,7 @@ const SyncStatus = ({ cms, setEventsOpen }) => {
     "Event Log"
   ));
 };
-const version = "2.7.2";
+const version = "2.7.4";
 const Nav = ({
   isLocalMode,
   className = "",
@@ -10462,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;
@@ -10680,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,
@@ -11446,7 +11493,10 @@ function MediaPicker({
     const observer = new IntersectionObserver((entries) => {
       const target = entries[0];
       if (target.isIntersecting && list.nextOffset) {
-        setOffsetHistory((offsetHistory2) => [...offsetHistory2, list.nextOffset]);
+        setOffsetHistory((offsetHistory2) => [
+          ...offsetHistory2,
+          list.nextOffset
+        ]);
       }
     });
     if (loaderRef.current) {
@@ -12041,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"
   };
@@ -12100,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(
@@ -12169,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}`);
   }
@@ -12410,7 +12469,9 @@ const ActiveFieldIndicator = () => {
     if (activeEle) {
       setDisplay(true);
       setPosition(activeEle.getBoundingClientRect());
-      const iframe = document.getElementById("tina-iframe");
+      const iframe = document.getElementById(
+        "tina-iframe"
+      );
       if (iframe) {
         setIframePosition(iframe.getBoundingClientRect());
       }
@@ -12852,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("");
@@ -12878,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("");
@@ -13028,7 +13088,9 @@ const ImgEmbed = ({
   const { fieldName } = useTemplates();
   const { handleClose, handleRemove, handleSelect, isExpanded } = useEmbedHandles(editor, element, fieldName);
   useHotkey("enter", () => {
-    insertNodes(editor, [{ type: ELEMENT_PARAGRAPH, children: [{ text: "" }] }]);
+    insertNodes(editor, [
+      { type: ELEMENT_PARAGRAPH, children: [{ text: "" }] }
+    ]);
   });
   return /* @__PURE__ */ React__default.createElement("span", { ...attributes, className: "" }, children, element.url ? /* @__PURE__ */ React__default.createElement(
     "div",
@@ -13171,7 +13233,9 @@ const InlineEmbed = ({
   const { templates, fieldName } = useTemplates();
   const { handleClose, handleRemove, handleSelect, isExpanded } = useEmbedHandles(editor, element, fieldName);
   useHotkey("enter", () => {
-    insertNodes(editor, [{ type: ELEMENT_PARAGRAPH, children: [{ text: "" }] }]);
+    insertNodes(editor, [
+      { type: ELEMENT_PARAGRAPH, children: [{ text: "" }] }
+    ]);
   });
   useHotkey("space", () => {
     insertNodes(editor, [{ text: " " }], {
@@ -13227,7 +13291,9 @@ const BlockEmbed = ({
   const { templates, fieldName } = useTemplates();
   const { handleClose, handleRemove, handleSelect, isExpanded } = useEmbedHandles(editor, element, fieldName);
   useHotkey("enter", () => {
-    insertNodes(editor, [{ type: ELEMENT_PARAGRAPH, children: [{ text: "" }] }]);
+    insertNodes(editor, [
+      { type: ELEMENT_PARAGRAPH, children: [{ text: "" }] }
+    ]);
   });
   const activeTemplate = templates.find(
     (template) => template.name === element.name
@@ -14086,7 +14152,9 @@ const EMBED_ICON_WIDTH = 78;
 const CONTAINER_MD_BREAKPOINT = 448;
 const FLOAT_BUTTON_WIDTH = 25;
 const HEADING_LABEL = "Headings";
-const ToolbarContext = createContext(void 0);
+const ToolbarContext = createContext(
+  void 0
+);
 const ToolbarProvider = ({
   tinaForm,
   templates,
@@ -30298,7 +30366,14 @@ const TINA_LOGIN_EVENT = "tinaCloudLogin";
 const AUTH_TOKEN_KEY = "tinacms-auth";
 const authenticate = (clientId, frontendUrl) => {
   return new Promise((resolve) => {
-    let authTab;
+    const origin = `${window.location.protocol}//${window.location.host}`;
+    const authTab = popupWindow(
+      `${frontendUrl}/signin?clientId=${clientId}&origin=${origin}`,
+      "_blank",
+      window,
+      1e3,
+      700
+    );
     window.addEventListener("message", function(e) {
       if (e.data.source === TINA_LOGIN_EVENT) {
         if (authTab) {
@@ -30311,14 +30386,6 @@ const authenticate = (clientId, frontendUrl) => {
         });
       }
     });
-    const origin = `${window.location.protocol}//${window.location.host}`;
-    authTab = popupWindow(
-      `${frontendUrl}/signin?clientId=${clientId}&origin=${origin}`,
-      "_blank",
-      window,
-      1e3,
-      700
-    );
   });
 };
 const DefaultSessionProvider = ({
@@ -31024,56 +31091,6 @@ const AsyncButton = ({ name, primary, action }) => {
     !submitting && name
   );
 };
-const TINA_AUTH_CONFIG = "tina_auth_config";
-const useTinaAuthRedirect = () => {
-  useEffect(() => {
-    const urlParams = new URLSearchParams(window.location.search);
-    const config = {
-      code: urlParams.get("code") || "",
-      scope: urlParams.get("scope") || "email",
-      state: urlParams.get("state")
-    };
-    if (!config.code) {
-      return;
-    }
-    localStorage[TINA_AUTH_CONFIG] = JSON.stringify(config);
-  }, []);
-};
-const createClient = ({
-  clientId,
-  isLocalClient = true,
-  branch,
-  tinaioConfig,
-  schema,
-  apiUrl,
-  tinaGraphQLVersion
-}) => {
-  return isLocalClient ? new LocalClient({ customContentApiUrl: apiUrl, schema }) : new Client({
-    clientId: clientId || "",
-    branch: branch || "main",
-    tokenStorage: "LOCAL_STORAGE",
-    tinaioConfig,
-    schema,
-    tinaGraphQLVersion
-  });
-};
-function assertShape(value, yupSchema, errorMessage) {
-  const shape = yupSchema(yup);
-  try {
-    shape.validateSync(value);
-  } catch (e) {
-    const message = errorMessage || `Failed to assertShape - ${e.message}`;
-    throw new Error(message);
-  }
-}
-function safeAssertShape(value, yupSchema) {
-  try {
-    assertShape(value, yupSchema);
-    return true;
-  } catch (e) {
-    return false;
-  }
-}
 class TinaAdminApi {
   constructor(cms) {
     var _a, _b, _c, _d;
@@ -31420,6 +31437,56 @@ class TinaAdminApi {
     );
   }
 }
+const createClient = ({
+  clientId,
+  isLocalClient = true,
+  branch,
+  tinaioConfig,
+  schema,
+  apiUrl,
+  tinaGraphQLVersion
+}) => {
+  return isLocalClient ? new LocalClient({ customContentApiUrl: apiUrl, schema }) : new Client({
+    clientId: clientId || "",
+    branch: branch || "main",
+    tokenStorage: "LOCAL_STORAGE",
+    tinaioConfig,
+    schema,
+    tinaGraphQLVersion
+  });
+};
+function assertShape(value, yupSchema, errorMessage) {
+  const shape = yupSchema(yup);
+  try {
+    shape.validateSync(value);
+  } catch (e) {
+    const message = errorMessage || `Failed to assertShape - ${e.message}`;
+    throw new Error(message);
+  }
+}
+function safeAssertShape(value, yupSchema) {
+  try {
+    assertShape(value, yupSchema);
+    return true;
+  } catch (e) {
+    return false;
+  }
+}
+const TINA_AUTH_CONFIG = "tina_auth_config";
+const useTinaAuthRedirect = () => {
+  useEffect(() => {
+    const urlParams = new URLSearchParams(window.location.search);
+    const config = {
+      code: urlParams.get("code") || "",
+      scope: urlParams.get("scope") || "email",
+      state: urlParams.get("state")
+    };
+    if (!config.code) {
+      return;
+    }
+    localStorage[TINA_AUTH_CONFIG] = JSON.stringify(config);
+  }, []);
+};
 function sleep(ms) {
   return new Promise((resolve) => setTimeout(resolve, ms));
 }
@@ -31756,6 +31823,9 @@ const TinaCloudProvider = (props) => {
           cms.flags.set("branch-switcher", true);
           client.usingEditorialWorkflow = true;
           client.protectedBranches = project.protectedBranches;
+          if (!project.metadata[currentBranch]) {
+            setCurrentBranch(project.defaultBranch || "main");
+          }
         }
       });
     };
@@ -31768,7 +31838,7 @@ const TinaCloudProvider = (props) => {
       }
     });
     return unsubscribe;
-  }, [isTinaCloud, cms]);
+  }, [currentBranch, isTinaCloud, cms]);
   return /* @__PURE__ */ React__default.createElement(SessionProvider, { basePath: "/api/tina/auth" }, /* @__PURE__ */ React__default.createElement(
     BranchDataProvider,
     {
@@ -32621,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;
@@ -32632,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,
@@ -33087,7 +33185,9 @@ const CollectionListPage = () => {
             safeSubmit: async () => {
               try {
                 await admin.deleteDocument(vars);
-                cms.alerts.info("Document was successfully deleted");
+                cms.alerts.info(
+                  "Document was successfully deleted"
+                );
                 reFetchCollection();
               } catch (error) {
                 cms.alerts.warn(
@@ -33116,7 +33216,9 @@ const CollectionListPage = () => {
                   relativePath: vars.relativePath,
                   newRelativePath
                 });
-                cms.alerts.info("Document was successfully renamed");
+                cms.alerts.info(
+                  "Document was successfully renamed"
+                );
                 reFetchCollection();
               } catch (error) {
                 if (error.message.indexOf("has references")) {
@@ -33216,7 +33318,9 @@ const CollectionListPage = () => {
               name: "sort",
               value: sortKey,
               onChange: (e) => {
-                const val = JSON.parse(e.target.value);
+                const val = JSON.parse(
+                  e.target.value
+                );
                 setEndCursor("");
                 setPrevCursors([]);
                 window == null ? void 0 : window.localStorage.setItem(
@@ -34005,7 +34109,10 @@ const useGetDocument = (cms, collectionName, relativePath2) => {
     const fetchDocument = async () => {
       if (api.isAuthenticated()) {
         try {
-          const response = await api.fetchDocument(collectionName, relativePath2);
+          const response = await api.fetchDocument(
+            collectionName,
+            relativePath2
+          );
           setDocument(response.document);
         } catch (error2) {
           cms.alerts.error(