tinacms 0.0.0-d20d4ee-20250329210608 → 0.0.0-d28d795-20250427004334

package/dist/index.js

@@ -1,6 +1,6 @@
 (function(global, factory) {
-  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("zod"), require("react"), require("react-dom"), require("@udecode/cn"), require("@udecode/plate"), require("@udecode/plate-common"), require("@udecode/plate-slash-command"), require("slate-react"), require("@udecode/plate-code-block"), require("@monaco-editor/react"), require("@headlessui/react"), require("class-variance-authority"), require("lucide-react"), require("mermaid"), require("@udecode/plate-heading"), require("@ariakit/react"), require("@udecode/plate-combobox"), require("@udecode/plate-table"), require("@udecode/plate-resizable"), require("@radix-ui/react-popover"), require("@radix-ui/react-slot"), require("@radix-ui/react-dropdown-menu"), require("@radix-ui/react-separator"), require("final-form-arrays"), require("final-form-set-field-data"), require("final-form"), require("react-final-form"), require("prop-types"), require("react-beautiful-dnd"), require("react-color"), require("color-string"), require("react-dropzone"), require("clsx"), require("tailwind-merge"), require("cmdk"), require("is-hotkey"), require("slate"), require("@react-hook/window-size"), require("lodash.get"), require("moment"), require("date-fns"), require("@udecode/plate-link"), require("@radix-ui/react-toolbar"), require("@radix-ui/react-tooltip"), require("@udecode/plate-paragraph"), require("@udecode/plate-block-quote"), require("@udecode/plate-floating"), require("graphql"), require("graphql-tag"), require("@tinacms/schema-tools"), require("@graphql-inspector/core"), require("yup"), require("react-router-dom"), require("@tinacms/mdx")) : typeof define === "function" && define.amd ? define(["exports", "zod", "react", "react-dom", "@udecode/cn", "@udecode/plate", "@udecode/plate-common", "@udecode/plate-slash-command", "slate-react", "@udecode/plate-code-block", "@monaco-editor/react", "@headlessui/react", "class-variance-authority", "lucide-react", "mermaid", "@udecode/plate-heading", "@ariakit/react", "@udecode/plate-combobox", "@udecode/plate-table", "@udecode/plate-resizable", "@radix-ui/react-popover", "@radix-ui/react-slot", "@radix-ui/react-dropdown-menu", "@radix-ui/react-separator", "final-form-arrays", "final-form-set-field-data", "final-form", "react-final-form", "prop-types", "react-beautiful-dnd", "react-color", "color-string", "react-dropzone", "clsx", "tailwind-merge", "cmdk", "is-hotkey", "slate", "@react-hook/window-size", "lodash.get", "moment", "date-fns", "@udecode/plate-link", "@radix-ui/react-toolbar", "@radix-ui/react-tooltip", "@udecode/plate-paragraph", "@udecode/plate-block-quote", "@udecode/plate-floating", "graphql", "graphql-tag", "@tinacms/schema-tools", "@graphql-inspector/core", "yup", "react-router-dom", "@tinacms/mdx"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.tinacms = {}, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP));
-})(this, function(exports2, zod, React, reactDom, cn$1, plate, plateCommon, plateSlashCommand, slateReact, plateCodeBlock, MonacoEditor, react, classVarianceAuthority, lucideReact, mermaid, plateHeading, react$1, plateCombobox, plateTable, plateResizable, PopoverPrimitive, reactSlot, DropdownMenuPrimitive, SeparatorPrimitive, arrayMutators, setFieldData, finalForm, reactFinalForm, PropTypes, reactBeautifulDnd, pkg$1, pkg, dropzone, clsx, tailwindMerge, cmdk, isHotkey, slate, windowSize, get, moment, dateFns, plateLink, ToolbarPrimitive, TooltipPrimitive, plateParagraph, plateBlockQuote, plateFloating, graphql, gql, schemaTools, core, yup, reactRouterDom, mdx) {
+  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("zod"), require("react"), require("react-dom"), require("@udecode/cn"), require("@udecode/plate"), require("@udecode/plate-common"), require("@udecode/plate-slash-command"), require("slate-react"), require("@udecode/plate-code-block"), require("@monaco-editor/react"), require("@headlessui/react"), require("class-variance-authority"), require("lucide-react"), require("mermaid"), require("@udecode/plate-heading"), require("@ariakit/react"), require("@udecode/plate-combobox"), require("@udecode/plate-table"), require("@udecode/plate-resizable"), require("@radix-ui/react-popover"), require("@radix-ui/react-slot"), require("@radix-ui/react-dropdown-menu"), require("@radix-ui/react-separator"), require("final-form-arrays"), require("final-form-set-field-data"), require("final-form"), require("react-final-form"), require("prop-types"), require("react-beautiful-dnd"), require("react-color"), require("color-string"), require("react-dropzone"), require("clsx"), require("tailwind-merge"), require("cmdk"), require("is-hotkey"), require("slate"), require("@react-hook/window-size"), require("lodash.get"), require("moment"), require("date-fns"), require("@udecode/plate-link"), require("@radix-ui/react-toolbar"), require("@radix-ui/react-tooltip"), require("@udecode/plate-paragraph"), require("@udecode/plate-block-quote"), require("@udecode/plate-floating"), require("graphql"), require("@tinacms/schema-tools"), require("graphql-tag"), require("@graphql-inspector/core"), require("yup"), require("react-router-dom"), require("@tinacms/mdx")) : typeof define === "function" && define.amd ? define(["exports", "zod", "react", "react-dom", "@udecode/cn", "@udecode/plate", "@udecode/plate-common", "@udecode/plate-slash-command", "slate-react", "@udecode/plate-code-block", "@monaco-editor/react", "@headlessui/react", "class-variance-authority", "lucide-react", "mermaid", "@udecode/plate-heading", "@ariakit/react", "@udecode/plate-combobox", "@udecode/plate-table", "@udecode/plate-resizable", "@radix-ui/react-popover", "@radix-ui/react-slot", "@radix-ui/react-dropdown-menu", "@radix-ui/react-separator", "final-form-arrays", "final-form-set-field-data", "final-form", "react-final-form", "prop-types", "react-beautiful-dnd", "react-color", "color-string", "react-dropzone", "clsx", "tailwind-merge", "cmdk", "is-hotkey", "slate", "@react-hook/window-size", "lodash.get", "moment", "date-fns", "@udecode/plate-link", "@radix-ui/react-toolbar", "@radix-ui/react-tooltip", "@udecode/plate-paragraph", "@udecode/plate-block-quote", "@udecode/plate-floating", "graphql", "@tinacms/schema-tools", "graphql-tag", "@graphql-inspector/core", "yup", "react-router-dom", "@tinacms/mdx"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.tinacms = {}, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP));
+})(this, function(exports2, zod, React, reactDom, cn$1, plate, plateCommon, plateSlashCommand, slateReact, plateCodeBlock, MonacoEditor, react, classVarianceAuthority, lucideReact, mermaid, plateHeading, react$1, plateCombobox, plateTable, plateResizable, PopoverPrimitive, reactSlot, DropdownMenuPrimitive, SeparatorPrimitive, arrayMutators, setFieldData, finalForm, reactFinalForm, PropTypes, reactBeautifulDnd, pkg$1, pkg, dropzone, clsx, tailwindMerge, cmdk, isHotkey, slate, windowSize, get, moment, dateFns, plateLink, ToolbarPrimitive, TooltipPrimitive, plateParagraph, plateBlockQuote, plateFloating, graphql, schemaTools, gql, core, yup, reactRouterDom, mdx) {
   "use strict";var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => {
@@ -4403,36 +4403,6 @@ flowchart TD
   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__namespace.createContext({
-    currentBranch: null,
-    setCurrentBranch: (branch) => {
-      console.warn("BranchContext not initialized");
-    }
-  });
-  const BranchDataProvider = ({
-    currentBranch,
-    setCurrentBranch,
-    children
-  }) => {
-    return /* @__PURE__ */ React__namespace.createElement(
-      BranchContext.Provider,
-      {
-        value: {
-          currentBranch,
-          setCurrentBranch
-        }
-      },
-      children
-    );
-  };
-  const useBranchData = () => {
-    const branchData = React__namespace.useContext(BranchContext);
-    const { dispatch } = useEvent("branch:change");
-    React__namespace.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__namespace.forwardRef(({ className, disabled, ...rest }, ref) => {
@@ -8036,9 +8006,6 @@ flowchart TD
     },
     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);
   }
@@ -8057,6 +8024,39 @@ flowchart TD
   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__namespace.createContext({
+    currentBranch: null,
+    setCurrentBranch: (branch) => {
+      console.warn("BranchContext not initialized");
+    }
+  });
+  const BranchDataProvider = ({
+    currentBranch,
+    setCurrentBranch,
+    children
+  }) => {
+    return /* @__PURE__ */ React__namespace.createElement(
+      BranchContext.Provider,
+      {
+        value: {
+          currentBranch,
+          setCurrentBranch
+        }
+      },
+      children
+    );
+  };
+  const useBranchData = () => {
+    const branchData = React__namespace.useContext(BranchContext);
+    const { dispatch } = useEvent("branch:change");
+    React__namespace.useEffect(() => {
+      dispatch({ branchName: branchData.currentBranch });
+    }, [branchData.currentBranch]);
+    return branchData;
+  };
   function formatBranchName$1(str) {
     const pattern = /[^/\w-]+/g;
     const formattedStr = str.replace(pattern, "");
@@ -8155,7 +8155,7 @@ flowchart TD
         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__namespace.createElement("p", null, /* @__PURE__ */ React__namespace.createElement(
       Button$1,
       {
@@ -8391,7 +8391,7 @@ flowchart TD
         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__namespace.createElement("p", null, /* @__PURE__ */ React__namespace.createElement(
       Button$1,
       {
@@ -9423,7 +9423,7 @@ flowchart TD
   });
   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
   });
@@ -9953,7 +9953,7 @@ flowchart TD
       "Event Log"
     ));
   };
-  const version = "2.7.4";
+  const version = "2.7.5";
   const Nav = ({
     isLocalMode,
     className = "",
@@ -11016,6 +11016,93 @@ flowchart TD
       );
     };
   }
+  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.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.createElement("div", { className: "w-full flex items-center text-[16px] text-gray-300" }, directory !== "" && /* @__PURE__ */ React.createElement(
+      IconButton,
+      {
+        variant: "ghost",
+        className: "mr-2",
+        onClick: () => setDirectory(prevDir)
+      },
+      /* @__PURE__ */ React.createElement(
+        LeftArrowIcon,
+        {
+          className: `w-7 h-auto fill-gray-300 hover:fill-gray-900 transition duration-150 ease-out`
+        }
+      )
+    ), /* @__PURE__ */ React.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.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.useState(false);
+    const [fadeOut, setFadeOut] = React.useState(false);
+    return /* @__PURE__ */ React.createElement("div", { className: "w-full" }, label && /* @__PURE__ */ React.createElement("label", { className: "w-full mb-1 block flex-1  text-sm font-bold leading-5 text-gray-700" }, label), /* @__PURE__ */ React.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.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.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.createElement("span", null, "Copied to clipboard!")
+      )
+    ), description && /* @__PURE__ */ React.createElement("p", { className: "mt-2 text-sm text-gray-500" }, description));
+  };
   function ListMediaItem({ item, onClick, active }) {
     let FileIcon = BiFile;
     if (item.type === "dir") {
@@ -11091,59 +11178,6 @@ flowchart TD
       )
     );
   }
-  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.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.createElement("div", { className: "w-full flex items-center text-[16px] text-gray-300" }, directory !== "" && /* @__PURE__ */ React.createElement(
-      IconButton,
-      {
-        variant: "ghost",
-        className: "mr-2",
-        onClick: () => setDirectory(prevDir)
-      },
-      /* @__PURE__ */ React.createElement(
-        LeftArrowIcon,
-        {
-          className: `w-7 h-auto fill-gray-300 hover:fill-gray-900 transition duration-150 ease-out`
-        }
-      )
-    ), /* @__PURE__ */ React.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.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,
@@ -11197,40 +11231,6 @@ flowchart TD
       "Create New Folder"
     ))));
   };
-  const CopyField = ({ label, description, value }) => {
-    const [copied, setCopied] = React.useState(false);
-    const [fadeOut, setFadeOut] = React.useState(false);
-    return /* @__PURE__ */ React.createElement("div", { className: "w-full" }, label && /* @__PURE__ */ React.createElement("label", { className: "w-full mb-1 block flex-1  text-sm font-bold leading-5 text-gray-700" }, label), /* @__PURE__ */ React.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.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.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.createElement("span", null, "Copied to clipboard!")
-      )
-    ), description && /* @__PURE__ */ React.createElement("p", { className: "mt-2 text-sm text-gray-500" }, description));
-  };
   const { useDropzone } = dropzone__namespace;
   const join = function(...parts) {
     const [first, last, slash] = [0, parts.length - 1, "/"];
@@ -11732,7 +11732,7 @@ flowchart TD
           target: "_blank",
           href: `${cms.api.tina.appDashboardLink}/media`
         },
-        "Sync Your Media In Tina Cloud.",
+        "Sync Your Media In TinaCloud.",
         /* @__PURE__ */ React.createElement(BiLinkExternal, { className: `w-5 h-auto flex-shrink-0` })
       )
     )))) : /* @__PURE__ */ React.createElement(SyncStatusContext.Provider, { value: { syncStatus } }, children);
@@ -30337,9 +30337,31 @@ flowchart TD
   }
   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",
@@ -30420,6 +30442,7 @@ flowchart TD
       this.frontendUrl = frontendUrl;
       this.clientId = clientId;
       this.identityApiUrl = identityApiUrl;
+      this.oauth2 = options.oauth2 || false;
       switch (tokenStorage) {
         case "LOCAL_STORAGE":
           this.getToken = async function() {
@@ -30465,9 +30488,52 @@ flowchart TD
       }
     }
     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) {
@@ -30576,7 +30642,7 @@ flowchart TD
   });
   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;
@@ -30657,7 +30723,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() {
@@ -30669,6 +30736,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";
@@ -30711,7 +30779,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);
@@ -30847,7 +30915,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"
                     );
                   }
                 }
@@ -31483,7 +31551,52 @@ mutation addPendingDocumentMutation(
     const [showChildren, setShowChildren] = React.useState(false);
     const [authProps, setAuthProps] = React.useState({ username: "", password: "" });
     const [authenticated, setAuthenticated] = React.useState(false);
+    const [code, setCode] = React.useState(null);
+    const [state, setState] = React.useState(null);
+    const [retrievingToken, setRetrievingToken] = React.useState(false);
+    React.useEffect(() => {
+      if (typeof window !== "undefined") {
+        const queryParams = new URLSearchParams(window.location.search);
+        setCode(queryParams.get("code"));
+        setState(queryParams.get("state"));
+      }
+    }, []);
+    React.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.useEffect(() => {
+      if (retrievingToken) {
+        console.log("Retrieving token...");
+        return;
+      }
       let mounted = true;
       client.authProvider.isAuthenticated().then((isAuthenticated) => {
         if (!mounted)
@@ -31528,7 +31641,7 @@ mutation addPendingDocumentMutation(
       return () => {
         mounted = false;
       };
-    }, [authenticated]);
+    }, [authenticated, retrievingToken]);
     const onAuthenticated = async () => {
       setAuthenticated(true);
       setActiveModal(null);
@@ -31558,7 +31671,7 @@ mutation addPendingDocumentMutation(
         });
       }
     };
-    let modalTitle = "Tina Cloud";
+    let modalTitle = "TinaCloud";
     if (activeModal === "authenticate" && loginStrategy === "Redirect" && !isTinaCloud) {
       modalTitle = "Enter into edit mode";
     } else if (activeModal === "authenticate" && loginStrategy === "UsernamePassword") {
@@ -31574,7 +31687,7 @@ mutation addPendingDocumentMutation(
       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,
@@ -32297,6 +32410,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.createElement(React.Fragment, null, children(cms));
+    } catch (e) {
+      return null;
+    }
+  };
   const Layout = ({ children }) => {
     return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
       "div",
@@ -32508,47 +32629,6 @@ This will work when developing locally but NOT when deployed to production.
     }
     return /* @__PURE__ */ React.createElement("span", { className: "text-base tracking-wide text-gray-500 hover:text-blue-600 flex items-center opacity-90 hover:opacity-100" }, /* @__PURE__ */ React.createElement(config.Icon, { className: "mr-2 h-6 opacity-80 w-auto" }), /* @__PURE__ */ React.createElement("a", { target: "_blank", href: config.link.href }, config.link.text));
   };
-  const GetCMS = ({ children }) => {
-    try {
-      const cms = useCMS$1();
-      return /* @__PURE__ */ React.createElement(React.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.useState(
-      () => cms.flags.get("branch-switcher")
-    );
-    React.useEffect(() => {
-      cms.events.subscribe("flag:set", ({ key, value }) => {
-        if (key === "branch-switcher") {
-          setBranchingEnabled(value);
-        }
-      });
-    }, [cms.events]);
-    return /* @__PURE__ */ React.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.createElement(BranchBanner, null), children);
-  };
-  const PageHeader = ({
-    isLocalMode,
-    children
-  }) => {
-    return /* @__PURE__ */ React.createElement(React.Fragment, null, isLocalMode && /* @__PURE__ */ React.createElement(LocalWarning, null), !isLocalMode && /* @__PURE__ */ React.createElement(BillingWarning, null), /* @__PURE__ */ React.createElement("div", { className: "pt-16 xl:pt-12 px-6 xl:px-12" }, /* @__PURE__ */ React.createElement("div", { className: "w-full mx-auto max-w-screen-xl" }, /* @__PURE__ */ React.createElement("div", { className: "w-full flex justify-between items-end" }, children))));
-  };
-  const PageBody = ({ children }) => /* @__PURE__ */ React.createElement("div", { className: "py-8 px-6 xl:px-12" }, children);
-  const PageBodyNarrow = ({ children }) => /* @__PURE__ */ React.createElement("div", { className: "py-10 px-6 xl:px-12" }, /* @__PURE__ */ React.createElement("div", { className: "w-full mx-auto max-w-screen-xl" }, children));
-  const DashboardPage = () => {
-    return /* @__PURE__ */ React.createElement(GetCMS, null, (cms) => {
-      var _a, _b;
-      return /* @__PURE__ */ React.createElement(PageWrapper, null, /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(PageHeader, { isLocalMode: (_b = (_a = cms.api) == null ? void 0 : _a.tina) == null ? void 0 : _b.isLocalMode }, /* @__PURE__ */ React.createElement("h3", { className: "text-2xl font-sans text-gray-700" }, "Welcome to Tina!")), /* @__PURE__ */ React.createElement(PageBodyNarrow, null, "This is your dashboard for editing or creating content. Select a collection on the left to begin.")));
-    });
-  };
-  function 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.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
     "div",
     {
@@ -32658,231 +32738,33 @@ This will work when developing locally but NOT when deployed to production.
       )
     )
   ));
-  const FullscreenError = ({
-    title = "Error",
-    errorMessage = "It looks like something went wrong."
-  }) => {
-    return /* @__PURE__ */ React.createElement("div", { className: "flex flex-col justify-center items-center h-screen bg-gray-100" }, /* @__PURE__ */ React.createElement("div", { className: "text-red-500 text-4xl mb-6 flex items-center" }, /* @__PURE__ */ React.createElement(BiError, { className: "w-12 h-auto fill-current text-red-400 opacity-70 mr-1" }), " ", title), /* @__PURE__ */ React.createElement("p", { className: "text-gray-700 text-xl mb-8" }, errorMessage), /* @__PURE__ */ React.createElement(Button$1, { variant: "danger", onClick: () => window.location.reload() }, /* @__PURE__ */ React.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] = React.useState(void 0);
-    const [loading, setLoading] = React.useState(true);
-    const [error, setError] = React.useState(void 0);
-    const [resetState, setResetSate] = React.useState(0);
-    React.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] = React.useState(void 0);
-    const [loading, setLoading] = React.useState(true);
-    const [error, setError] = React.useState(void 0);
-    const [resetState, setResetSate] = React.useState(0);
+  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.useState(
+      () => cms.flags.get("branch-switcher")
+    );
     React.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);
+      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.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.createElement(BranchBanner, null), children);
   };
-  const GetCollection = ({
-    cms,
-    collectionName,
-    folder,
-    includeDocuments = true,
-    startCursor,
-    sortKey,
-    children,
-    filterArgs,
-    search
+  const PageHeader = ({
+    isLocalMode,
+    children
   }) => {
-    const navigate = reactRouterDom.useNavigate();
-    const { collection, loading, error, reFetchCollection, collectionExtra } = search ? useSearchCollection(
-      cms,
-      collectionName,
-      includeDocuments,
-      folder,
-      startCursor || "",
-      search
-    ) : useGetCollection(
-      cms,
-      collectionName,
-      includeDocuments,
-      folder,
-      startCursor || "",
-      sortKey,
-      filterArgs
-    ) || {};
-    React.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.createElement(FullscreenError, null);
-    }
-    if (loading) {
-      return /* @__PURE__ */ React.createElement(LoadingPage, null);
-    }
-    return /* @__PURE__ */ React.createElement(React.Fragment, null, children(collection, loading, reFetchCollection, collectionExtra));
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, isLocalMode && /* @__PURE__ */ React.createElement(LocalWarning, null), !isLocalMode && /* @__PURE__ */ React.createElement(BillingWarning, null), /* @__PURE__ */ React.createElement("div", { className: "pt-16 xl:pt-12 px-6 xl:px-12" }, /* @__PURE__ */ React.createElement("div", { className: "w-full mx-auto max-w-screen-xl" }, /* @__PURE__ */ React.createElement("div", { className: "w-full flex justify-between items-end" }, children))));
   };
+  const PageBody = ({ children }) => /* @__PURE__ */ React.createElement("div", { className: "py-8 px-6 xl:px-12" }, children);
+  const PageBodyNarrow = ({ children }) => /* @__PURE__ */ React.createElement("div", { className: "py-10 px-6 xl:px-12" }, /* @__PURE__ */ React.createElement("div", { className: "w-full mx-auto max-w-screen-xl" }, children));
   const folderRegex = /^.*\/~\/*(.*)$/;
   const parentFolder = (folder) => {
     return {
@@ -33760,6 +33642,231 @@ This will work when developing locally but NOT when deployed to production.
       "Rename"
     ))));
   };
+  const FullscreenError = ({
+    title = "Error",
+    errorMessage = "It looks like something went wrong."
+  }) => {
+    return /* @__PURE__ */ React.createElement("div", { className: "flex flex-col justify-center items-center h-screen bg-gray-100" }, /* @__PURE__ */ React.createElement("div", { className: "text-red-500 text-4xl mb-6 flex items-center" }, /* @__PURE__ */ React.createElement(BiError, { className: "w-12 h-auto fill-current text-red-400 opacity-70 mr-1" }), " ", title), /* @__PURE__ */ React.createElement("p", { className: "text-gray-700 text-xl mb-8" }, errorMessage), /* @__PURE__ */ React.createElement(Button$1, { variant: "danger", onClick: () => window.location.reload() }, /* @__PURE__ */ React.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] = React.useState(void 0);
+    const [loading, setLoading] = React.useState(true);
+    const [error, setError] = React.useState(void 0);
+    const [resetState, setResetSate] = React.useState(0);
+    React.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] = React.useState(void 0);
+    const [loading, setLoading] = React.useState(true);
+    const [error, setError] = React.useState(void 0);
+    const [resetState, setResetSate] = React.useState(0);
+    React.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 = reactRouterDom.useNavigate();
+    const { collection, loading, error, reFetchCollection, collectionExtra } = search ? useSearchCollection(
+      cms,
+      collectionName,
+      includeDocuments,
+      folder,
+      startCursor || "",
+      search
+    ) : useGetCollection(
+      cms,
+      collectionName,
+      includeDocuments,
+      folder,
+      startCursor || "",
+      sortKey,
+      filterArgs
+    ) || {};
+    React.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.createElement(FullscreenError, null);
+    }
+    if (loading) {
+      return /* @__PURE__ */ React.createElement(LoadingPage, null);
+    }
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, children(collection, loading, reFetchCollection, collectionExtra));
+  };
   const ErrorDialog = (props) => {
     return /* @__PURE__ */ React.createElement(
       "div",
@@ -34303,6 +34410,12 @@ This will work when developing locally but NOT when deployed to production.
       ), /* @__PURE__ */ React.createElement("span", { className: "opacity-30 text-sm leading-tight whitespace-nowrap flex-0" }, "/"), /* @__PURE__ */ React.createElement("span", { className: "flex-1 w-full text-sm leading-tight whitespace-nowrap truncate" }, `${filename}.${collection.format}`), /* @__PURE__ */ React.createElement(FormStatus, { pristine: formIsPristine }))
     ), activeForm && /* @__PURE__ */ React.createElement(FormBuilder, { form: activeForm, onPristineChange: setFormIsPristine }));
   };
+  const DashboardPage = () => {
+    return /* @__PURE__ */ React.createElement(GetCMS, null, (cms) => {
+      var _a, _b;
+      return /* @__PURE__ */ React.createElement(PageWrapper, null, /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(PageHeader, { isLocalMode: (_b = (_a = cms.api) == null ? void 0 : _a.tina) == null ? void 0 : _b.isLocalMode }, /* @__PURE__ */ React.createElement("h3", { className: "text-2xl font-sans text-gray-700" }, "Welcome to Tina!")), /* @__PURE__ */ React.createElement(PageBodyNarrow, null, "This is your dashboard for editing or creating content. Select a collection on the left to begin.")));
+    });
+  };
   const ScreenPage = () => {
     const { screenName } = reactRouterDom.useParams();
     return /* @__PURE__ */ React.createElement(GetCMS, null, (cms) => {
@@ -34321,6 +34434,71 @@ This will work when developing locally but NOT when deployed to production.
       } })));
     });
   };
+  function AuthCallback({
+    clientId,
+    identityApiUrl
+  }) {
+    console.log("AuthCallback", clientId, identityApiUrl);
+    const [code, setCode] = React__namespace.useState(null);
+    const [state, setState] = React__namespace.useState(null);
+    const [tokenResponse, setTokenResponse] = React__namespace.useState(null);
+    const [app, setApp] = React__namespace.useState(null);
+    React__namespace.useEffect(() => {
+      if (typeof window !== "undefined") {
+        const queryParams = new URLSearchParams(window.location.search);
+        setCode(queryParams.get("code"));
+        setState(queryParams.get("state"));
+      }
+    }, []);
+    React__namespace.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__namespace.useEffect(() => {
+      localStorage.setItem(
+        AUTH_TOKEN_KEY,
+        JSON.stringify(tokenResponse, null, 2)
+      );
+    }, [tokenResponse]);
+    React__namespace.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__namespace.createElement("div", null, code && /* @__PURE__ */ React__namespace.createElement("div", null, "Code: ", /* @__PURE__ */ React__namespace.createElement("pre", null, code), /* @__PURE__ */ React__namespace.createElement("br", null)), state && /* @__PURE__ */ React__namespace.createElement("div", null, "State: ", /* @__PURE__ */ React__namespace.createElement("pre", null, state), /* @__PURE__ */ React__namespace.createElement("br", null)), tokenResponse && /* @__PURE__ */ React__namespace.createElement("div", null, /* @__PURE__ */ React__namespace.createElement("h2", null, "Token Response:"), /* @__PURE__ */ React__namespace.createElement("pre", null, tokenResponse.access_token), /* @__PURE__ */ React__namespace.createElement("br", null)), /* @__PURE__ */ React__namespace.createElement("div", null, app && /* @__PURE__ */ React__namespace.createElement("div", null, /* @__PURE__ */ React__namespace.createElement("h2", null, "Project Name: ", app.name), /* @__PURE__ */ React__namespace.createElement("p", null, "Project ID: ", /* @__PURE__ */ React__namespace.createElement("pre", null, app.id)))));
+  }
   const IndexingPage = () => {
     const cms = useCMS$1();
     const tinaApi = cms.api.tina;
@@ -34385,7 +34563,7 @@ This will work when developing locally but NOT when deployed to production.
           } 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");
           }
@@ -34553,7 +34731,7 @@ This will work when developing locally but NOT when deployed to production.
             );
           }
         }).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}`);
@@ -34668,6 +34846,18 @@ This will work when developing locally but NOT when deployed to production.
             path: "screens/:screenName",
             element: /* @__PURE__ */ React.createElement(DefaultWrapper, { cms }, /* @__PURE__ */ React.createElement(ScreenPage, null))
           }
+        ), /* @__PURE__ */ React.createElement(
+          reactRouterDom.Route,
+          {
+            path: "auth/callback",
+            element: /* @__PURE__ */ React.createElement(DefaultWrapper, { cms }, /* @__PURE__ */ React.createElement(
+              AuthCallback,
+              {
+                clientId: tinaClient.clientId,
+                identityApiUrl: tinaClient.identityApiUrl
+              }
+            ))
+          }
         ), /* @__PURE__ */ React.createElement(
           reactRouterDom.Route,
           {