tinacms 0.66.8 → 0.67.0

package/dist/index.js

@@ -30,8 +30,8 @@ var __objRest = (source, exclude) => {
   return target;
 };
 (function(global, factory) {
-  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("@tinacms/toolkit"), require("graphql"), require("lodash.set"), require("react"), require("graphql-tag"), require("styled-components"), require("yup"), require("@tinacms/sharedctx"), require("final-form"), require("url-pattern"), require("react-router-dom"), require("@headlessui/react")) : typeof define === "function" && define.amd ? define(["exports", "@tinacms/toolkit", "graphql", "lodash.set", "react", "graphql-tag", "styled-components", "yup", "@tinacms/sharedctx", "final-form", "url-pattern", "react-router-dom", "@headlessui/react"], 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));
-})(this, function(exports2, toolkit, G, set, React, gql$1, styled, yup, sharedctx, finalForm, UrlPattern, reactRouterDom, react) {
+  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("@tinacms/toolkit"), require("graphql"), require("lodash.set"), require("react"), require("final-form"), require("@tinacms/schema-tools"), require("graphql-tag"), require("yup"), require("styled-components"), require("@tinacms/sharedctx"), require("url-pattern"), require("react-router-dom"), require("@headlessui/react")) : typeof define === "function" && define.amd ? define(["exports", "@tinacms/toolkit", "graphql", "lodash.set", "react", "final-form", "@tinacms/schema-tools", "graphql-tag", "yup", "styled-components", "@tinacms/sharedctx", "url-pattern", "react-router-dom", "@headlessui/react"], 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));
+})(this, function(exports2, toolkit, G, set, React, finalForm, schemaTools, gql$1, yup, styled, sharedctx, UrlPattern, reactRouterDom, react) {
   "use strict";
   function _interopDefaultLegacy(e) {
     return e && typeof e === "object" && "default" in e ? e : { "default": e };
@@ -60,8 +60,8 @@ var __objRest = (source, exclude) => {
   var set__default = /* @__PURE__ */ _interopDefaultLegacy(set);
   var React__default = /* @__PURE__ */ _interopDefaultLegacy(React);
   var gql__default = /* @__PURE__ */ _interopDefaultLegacy(gql$1);
-  var styled__default = /* @__PURE__ */ _interopDefaultLegacy(styled);
   var yup__namespace = /* @__PURE__ */ _interopNamespace(yup);
+  var styled__default = /* @__PURE__ */ _interopDefaultLegacy(styled);
   var UrlPattern__default = /* @__PURE__ */ _interopDefaultLegacy(UrlPattern);
   function popupWindow(url, title, window2, w, h) {
     const y = window2.top.outerHeight / 2 + window2.top.screenY - h / 2;
@@ -396,1306 +396,2561 @@ var __objRest = (source, exclude) => {
       throw new Error(`Expected an instance of GraphQLUnionType for type ${type.name}`);
     }
   }
-  const isNodeField = (type) => {
-    if (G__namespace.isUnionType(type)) {
-      return type.getTypes().every((type2) => {
-        return type2.getInterfaces().find((intfc) => intfc.name === "Node");
-      });
-    } else if (G__namespace.isObjectType(type)) {
-      return !!type.getInterfaces().find((intfc) => intfc.name === "Node");
-    } else if (G__namespace.isInterfaceType(type)) {
-      if (type.name === "Node") {
-        return true;
-      }
-    } else {
-      throw new Error(`Expected GraphQLObjectType or GraphQLUnionType for isNodeField check`);
-    }
-  };
-  const isConnectionField = (type) => {
-    if (G__namespace.isObjectType(type)) {
-      return !!type.getInterfaces().find((intfc) => intfc.name === "Connection");
-    } else {
-      throw new Error(`Expected GraphQLObjectType for isCollectionField check`);
-    }
-  };
-  const getObjectField = (object, selectionNode) => {
-    return object.getFields()[selectionNode.name.value];
-  };
-  const getSelectedUnionType = (unionType, selectionNode) => {
-    return unionType.getTypes().find((type) => type.name === selectionNode.typeCondition.name.value);
+  const createClient = ({
+    clientId,
+    isLocalClient = true,
+    branch,
+    tinaioConfig,
+    schema
+  }) => {
+    return isLocalClient ? new LocalClient({ schema }) : new Client({
+      clientId: clientId || "",
+      branch: branch || "main",
+      tokenStorage: "LOCAL_STORAGE",
+      tinaioConfig,
+      schema
+    });
   };
-  function ensureNodeField(field) {
-    if (!isNodeField(field)) {
-      throw new Error(`Expected field to implement Node interface`);
-    }
-  }
-  function ensureUnionType(type) {
-    if (!G__namespace.isUnionType(type)) {
-      throw new Error(`Expected type to be GraphQLUnionType`);
-    }
-  }
-  function ensureObjectType(type) {
-    if (!G__namespace.isObjectType(type)) {
-      console.log(type);
-      throw new Error(`Expected type to be GraphQLObjectType`);
-    }
-  }
-  function ensureOperationDefinition(type) {
-    if (type.kind !== "OperationDefinition") {
-      throw new Error(`Expected top-level definition to be an OperationDefinition node, ensure your query has been optimized before calling formify`);
+  function assertShape(value, yupSchema, errorMessage) {
+    const shape = yupSchema(yup__namespace);
+    try {
+      shape.validateSync(value);
+    } catch (e) {
+      const message = errorMessage || `Failed to assertShape - ${e.message}`;
+      throw new Error(message);
     }
   }
-  function getNameAndAlias(fieldNode, list) {
-    return {
-      name: fieldNode.name.value,
-      alias: fieldNode.alias ? fieldNode.alias.value : fieldNode.name.value,
-      list: !!list
-    };
-  }
-  const node = G__namespace.parse(`
- query Sample {
-   _internalSys: sys {
-     path
-     collection {
-       name
-     }
-   }
-   form
-   values
- }`);
-  const metaFields = node.definitions[0].selectionSet.selections;
-  const NOOP = "This is either an error or is not yet supported";
-  const UNEXPECTED = "Formify encountered an unexpected error, please contact support";
-  const DATA_NODE_NAME = "data";
-  const EDGES_NODE_NAME = "edges";
-  const NODE_NAME = "node";
-  const COLLECTION_FIELD_NAME = "getCollection";
-  const COLLECTIONS_FIELD_NAME = "getCollections";
-  const COLLECTIONS_DOCUMENTS_NAME = "documents";
-  class FormifyError extends Error {
-    constructor(code, details) {
-      let message;
-      switch (code) {
-        case "NOOP":
-          message = NOOP;
-          break;
-        case "UNEXPECTED":
-          message = UNEXPECTED;
-          break;
-        default:
-          message = "";
-          break;
-      }
-      super(`${message} ${details || ""}`);
-      this.name = "FormifyError";
+  function safeAssertShape(value, yupSchema) {
+    try {
+      assertShape(value, yupSchema);
+      return true;
+    } catch (e) {
+      return false;
     }
   }
-  const formify = async ({
-    schema,
+  function useGraphqlFormsUnstable({
+    variables,
+    onSubmit,
     query,
-    getOptimizedQuery
-  }) => {
-    const nodes = [];
-    const documentNode = G__namespace.parse(query);
-    const visitor2 = {
-      OperationDefinition: (node2) => {
-        if (!node2.name) {
-          return __spreadProps(__spreadValues({}, node2), {
-            name: {
-              kind: "Name",
-              value: `QueryOperation`
-            }
-          });
+    formify: formify2,
+    eventList
+  }) {
+    const cms = toolkit.useCMS();
+    const state = useFormify({
+      query,
+      cms,
+      variables,
+      formify: formify2,
+      eventList,
+      onSubmit
+    });
+    return [state.data, state.status !== "done"];
+  }
+  function useGraphqlForms({
+    variables,
+    onSubmit,
+    formify: formify2 = null,
+    query
+  }) {
+    const cms = toolkit.useCMS();
+    const [formValues, setFormValues] = React__default["default"].useState({});
+    const [data, setData] = React__default["default"].useState(null);
+    const [initialData, setInitialData] = React__default["default"].useState({});
+    const [pendingReset, setPendingReset] = React__default["default"].useState(null);
+    const [isLoading, setIsLoading] = React__default["default"].useState(true);
+    const [newUpdate, setNewUpdate] = React__default["default"].useState(null);
+    const { currentBranch } = toolkit.useBranchData();
+    const updateData = async () => {
+      var _a;
+      if (newUpdate) {
+        const newValue = finalForm.getIn(formValues, newUpdate.get);
+        const activeForm = finalForm.getIn(data, [newUpdate.queryName, "form"].join("."));
+        if (!activeForm) {
+          throw new Error(`Unable to find form for query ${newUpdate.queryName}`);
         }
-        return node2;
-      }
-    };
-    const documentNodeWithName = G.visit(documentNode, visitor2);
-    const optimizedQuery = await getOptimizedQuery(documentNodeWithName);
-    const typeInfo = new G__namespace.TypeInfo(schema);
-    const formifyConnection = ({
-      namedFieldType,
-      selectionNode,
-      path
-    }) => {
-      ensureObjectType(namedFieldType);
-      return __spreadProps(__spreadValues({}, selectionNode), {
-        selectionSet: {
-          kind: "SelectionSet",
-          selections: selectionNode.selectionSet.selections.map((selectionNode2) => {
-            switch (selectionNode2.kind) {
-              case "Field":
-                if (selectionNode2.name.value === EDGES_NODE_NAME) {
-                  const edgeField = namedFieldType.getFields()[EDGES_NODE_NAME];
-                  const edgeType = G__namespace.getNamedType(edgeField.type);
-                  ensureObjectType(edgeType);
-                  return __spreadProps(__spreadValues({}, selectionNode2), {
-                    selectionSet: {
-                      kind: "SelectionSet",
-                      selections: selectionNode2.selectionSet.selections.map((subSelectionNode) => {
-                        switch (subSelectionNode.kind) {
-                          case "Field":
-                            if (subSelectionNode.name.value === NODE_NAME) {
-                              const nodeField = edgeType.getFields()[NODE_NAME];
-                              return formifyNode({
-                                fieldOrInlineFragmentNode: subSelectionNode,
-                                parentType: nodeField.type,
-                                path: [
-                                  ...path,
-                                  getNameAndAlias(selectionNode2),
-                                  getNameAndAlias(subSelectionNode, true)
-                                ]
-                              });
-                            } else {
-                              return subSelectionNode;
-                            }
-                          default:
-                            throw new FormifyError("NOOP");
-                        }
-                      })
-                    }
-                  });
-                }
-                return selectionNode2;
-              default:
-                throw new FormifyError("UNEXPECTED");
-            }
-          })
+        if (activeForm == null ? void 0 : activeForm.paths) {
+          const asyncUpdate = (_a = activeForm.paths) == null ? void 0 : _a.find((p) => p.dataPath.join(".") === newUpdate.setReference);
+          if (asyncUpdate) {
+            const res = await cms.api.tina.request(asyncUpdate.queryString, {
+              variables: { id: newValue }
+            });
+            const newData2 = finalForm.setIn(data, newUpdate.set, res.node);
+            const newDataAndNewJSONData2 = finalForm.setIn(newData2, newUpdate.set.replace("data", "dataJSON"), newValue);
+            setData(newDataAndNewJSONData2);
+            setNewUpdate(null);
+            return;
+          }
         }
-      });
-    };
-    function formifyNode({
-      fieldOrInlineFragmentNode,
-      parentType,
-      path
-    }) {
-      let extraFields = [];
-      const namedParentType = G__namespace.getNamedType(parentType);
-      const formifiedNode = __spreadProps(__spreadValues({}, fieldOrInlineFragmentNode), {
-        selectionSet: {
-          kind: "SelectionSet",
-          selections: [
-            ...fieldOrInlineFragmentNode.selectionSet.selections.map((selectionNode) => {
-              switch (selectionNode.kind) {
-                case "InlineFragment":
-                  if (G__namespace.isInterfaceType(namedParentType)) {
-                    const type2 = schema.getImplementations(namedParentType).objects[selectionNode.typeCondition.name.value];
-                    return formifyNode({
-                      fieldOrInlineFragmentNode: selectionNode,
-                      parentType: type2,
-                      path
-                    });
-                  }
-                  ensureUnionType(namedParentType);
-                  const type = getSelectedUnionType(namedParentType, selectionNode);
-                  return formifyNode({
-                    fieldOrInlineFragmentNode: selectionNode,
-                    parentType: type,
-                    path
-                  });
-                case "Field":
-                  if (selectionNode.name.value === DATA_NODE_NAME) {
-                    extraFields = metaFields;
-                    if (G__namespace.isObjectType(namedParentType)) {
-                      const field = getObjectField(namedParentType, selectionNode);
-                      const namedType = G__namespace.getNamedType(field.type);
-                      ensureObjectType(namedType);
-                      return __spreadProps(__spreadValues({}, selectionNode), {
-                        selectionSet: {
-                          kind: "SelectionSet",
-                          selections: [
-                            ...selectionNode.selectionSet.selections.map((subSelectionNode) => {
-                              switch (subSelectionNode.kind) {
-                                case "Field":
-                                  const subSelectionField = getObjectField(namedType, subSelectionNode);
-                                  if (!subSelectionField) {
-                                    return subSelectionNode;
-                                  }
-                                  return formifyField({
-                                    fieldNode: subSelectionNode,
-                                    parentType: field.type,
-                                    path: [
-                                      ...path,
-                                      getNameAndAlias(subSelectionNode, G__namespace.isListType(subSelectionField.type))
-                                    ]
-                                  });
-                                default:
-                                  throw new FormifyError("UNEXPECTED", `selection ${subSelectionNode.kind}`);
-                              }
-                            })
-                          ]
-                        }
-                      });
-                    }
-                    return selectionNode;
-                  }
-                  return selectionNode;
-                default:
-                  throw new FormifyError("UNEXPECTED");
+        if (newUpdate.lookup) {
+          const field = getFieldUpdate(newUpdate, activeForm, formValues);
+          if (field && field.typeMap) {
+            newValue.forEach((item) => {
+              if (!item.__typename) {
+                item["__typename"] = field.typeMap[item._template];
               }
-            }),
-            ...extraFields
-          ]
-        }
-      });
-      return formifiedNode;
-    }
-    const formifyField = ({
-      fieldNode,
-      parentType,
-      path
-    }) => {
-      const namedParentType = G__namespace.getNamedType(parentType);
-      ensureObjectType(namedParentType);
-      const field = getObjectField(namedParentType, fieldNode);
-      if (!field) {
-        if (fieldNode.name.value === "__typename") {
-          return fieldNode;
-        } else {
-          throw new FormifyError("UNEXPECTED", `field with no associated type ${fieldNode.name.value}`);
+            });
+          }
         }
+        const newData = finalForm.setIn(data, newUpdate.set, newValue);
+        const newDataAndNewJSONData = finalForm.setIn(newData, newUpdate.set.replace("data", "dataJSON"), newValue);
+        setData(newDataAndNewJSONData);
+        setNewUpdate(null);
       }
-      const namedType = G__namespace.getNamedType(field.type);
-      if (G__namespace.isScalarType(namedType)) {
-        return fieldNode;
+    };
+    React__default["default"].useEffect(() => {
+      updateData();
+    }, [JSON.stringify(formValues)]);
+    React__default["default"].useEffect(() => {
+      if (pendingReset) {
+        setData(__spreadProps(__spreadValues({}, data), { [pendingReset]: initialData[pendingReset] }));
+        setPendingReset(null);
       }
-      return __spreadProps(__spreadValues({}, fieldNode), {
-        selectionSet: {
-          kind: "SelectionSet",
-          selections: [
-            ...fieldNode.selectionSet.selections.map((selectionNode) => {
-              switch (selectionNode.kind) {
-                case "Field":
-                  if (selectionNode.name.value === "__typename") {
-                    return selectionNode;
-                  }
-                  ensureObjectType(namedType);
-                  const field2 = getObjectField(namedType, selectionNode);
-                  if (!field2) {
-                    return fieldNode;
-                  }
-                  if (G__namespace.isScalarType(G__namespace.getNamedType(field2.type))) {
-                    return selectionNode;
-                  }
-                  return __spreadProps(__spreadValues({}, selectionNode), {
-                    selectionSet: {
-                      kind: "SelectionSet",
-                      selections: selectionNode.selectionSet.selections.map((selectionNode2) => {
-                        switch (selectionNode2.kind) {
-                          case "Field":
-                            if (selectionNode2.name.value === "__typename") {
-                              return selectionNode2;
-                            }
-                            return formifyField({
-                              fieldNode: selectionNode2,
-                              parentType: field2.type,
-                              path
-                            });
-                          case "InlineFragment":
-                            const namedType2 = G__namespace.getNamedType(field2.type);
-                            ensureNodeField(namedType2);
-                            return formifyNode({
-                              fieldOrInlineFragmentNode: selectionNode2,
-                              parentType: field2.type,
-                              path
-                            });
-                          default:
-                            throw new FormifyError("UNEXPECTED", `selection ${selectionNode2.kind}`);
-                        }
-                      })
-                    }
-                  });
-                case "InlineFragment":
-                  ensureUnionType(namedType);
-                  if (isNodeField(namedType)) {
-                    const parentType2 = getSelectedUnionType(namedType, selectionNode);
-                    return formifyNode({
-                      fieldOrInlineFragmentNode: selectionNode,
-                      parentType: parentType2,
-                      path
-                    });
-                  }
-                  return __spreadProps(__spreadValues({}, selectionNode), {
-                    selectionSet: {
-                      kind: "SelectionSet",
-                      selections: selectionNode.selectionSet.selections.map((subSelectionNode) => {
-                        switch (subSelectionNode.kind) {
-                          case "Field":
-                            const parentType2 = getSelectedUnionType(namedType, selectionNode);
-                            return formifyField({
-                              fieldNode: subSelectionNode,
-                              parentType: parentType2,
-                              path
-                            });
-                          default:
-                            throw new FormifyError("UNEXPECTED", `selection ${subSelectionNode.kind}`);
-                        }
-                      })
-                    }
+    }, [pendingReset]);
+    React__default["default"].useEffect(() => {
+      if (!query) {
+        setIsLoading(false);
+        return;
+      }
+      const useUnstableFormify = (cms == null ? void 0 : cms.flags.get("use-unstable-formify")) === false ? false : true;
+      const formIds = [];
+      setIsLoading(true);
+      cms.api.tina.requestWithForm((gql2) => gql2(query), {
+        variables,
+        useUnstableFormify
+      }).then((payload) => {
+        cms.plugins.remove(new toolkit.FormMetaPlugin({ name: "tina-admin-link" }));
+        setData(payload);
+        setInitialData(payload);
+        setIsLoading(false);
+        Object.entries(payload).map(([queryName, result]) => {
+          formIds.push(queryName);
+          const canBeFormified = safeAssertShape(result, (yup2) => yup2.object({
+            values: yup2.object().required(),
+            form: yup2.object().required()
+          }));
+          if (!canBeFormified) {
+            return;
+          }
+          assertShape(result, (yup2) => yup2.object({
+            values: yup2.object().required(),
+            form: yup2.object().required()
+          }), `Unable to build form shape for fields at ${queryName}`);
+          let formConfig = {};
+          const formCommon = {
+            id: queryName,
+            initialValues: result.values,
+            reset: () => {
+              setPendingReset(queryName);
+            },
+            onSubmit: async (payload2) => {
+              try {
+                const params = transformDocumentIntoMutationRequestPayload(payload2, result.form.mutationInfo);
+                const variables2 = { params };
+                const mutationString = result.form.mutationInfo.string;
+                if (onSubmit) {
+                  onSubmit({
+                    queryString: mutationString,
+                    mutationString,
+                    variables: variables2
                   });
-                default:
-                  throw new FormifyError("UNEXPECTED", `selection ${selectionNode.kind}`);
-              }
-            })
-          ]
-        }
-      });
-    };
-    const formifiedQuery = {
-      kind: "Document",
-      definitions: optimizedQuery.definitions.map((definition) => {
-        typeInfo.enter(definition);
-        ensureOperationDefinition(definition);
-        const type = typeInfo.getType();
-        const namedType = G__namespace.getNamedType(type);
-        ensureObjectType(namedType);
-        return __spreadProps(__spreadValues({}, definition), {
-          selectionSet: {
-            kind: "SelectionSet",
-            selections: definition.selectionSet.selections.map((selectionNode) => {
-              switch (selectionNode.kind) {
-                case "Field":
-                  const parentType = type;
-                  const namedParentType = G__namespace.getNamedType(parentType);
-                  ensureObjectType(namedParentType);
-                  const field = getObjectField(namedParentType, selectionNode);
-                  const namedFieldType = G__namespace.getNamedType(field.type);
-                  if (isNodeField(namedFieldType)) {
-                    return formifyNode({
-                      fieldOrInlineFragmentNode: selectionNode,
-                      parentType: field.type,
-                      path: [getNameAndAlias(selectionNode)]
-                    });
-                  } else if (isConnectionField(namedFieldType)) {
-                    return formifyConnection({
-                      namedFieldType,
-                      selectionNode,
-                      path: [getNameAndAlias(selectionNode)]
-                    });
-                  }
-                  if (selectionNode.name.value === COLLECTION_FIELD_NAME || selectionNode.name.value === COLLECTIONS_FIELD_NAME) {
-                    return __spreadProps(__spreadValues({}, selectionNode), {
-                      selectionSet: {
-                        kind: "SelectionSet",
-                        selections: selectionNode.selectionSet.selections.map((selectionNode2) => {
-                          switch (selectionNode2.kind) {
-                            case "Field":
-                              if (selectionNode2.name.value === COLLECTIONS_DOCUMENTS_NAME) {
-                                ensureObjectType(namedFieldType);
-                                const n = namedFieldType.getFields()[COLLECTIONS_DOCUMENTS_NAME];
-                                const docType = G__namespace.getNamedType(n.type);
-                                return formifyConnection({
-                                  namedFieldType: docType,
-                                  selectionNode: selectionNode2,
-                                  path: [getNameAndAlias(selectionNode2)]
-                                });
-                              }
-                              return selectionNode2;
-                            default:
-                              throw new FormifyError("NOOP");
-                          }
-                        })
-                      }
+                } else {
+                  try {
+                    await cms.api.tina.request(mutationString, {
+                      variables: variables2
                     });
+                    cms.alerts.success("Document saved!");
+                  } catch (e) {
+                    cms.alerts.error("There was a problem saving your document");
+                    console.error(e);
                   }
-                  throw new FormifyError("NOOP");
-                default:
-                  throw new FormifyError("UNEXPECTED");
+                }
+              } catch (e) {
+                console.error(e);
+                cms.alerts.error("There was a problem saving your document");
               }
-            })
-          }
-        });
-      })
-    };
-    nodes.map((node2) => {
-      const namePath = [];
-      const aliasPath = [];
-      node2.path.forEach((p) => {
-        namePath.push(p.name);
-        aliasPath.push(p.alias);
-        if (p.list) {
-          namePath.push("NUM");
-          aliasPath.push("NUM");
-        }
-      });
-      JSON.stringify({
-        namePath: namePath.join("."),
-        aliasPath: aliasPath.join(".")
-      }, null, 2);
-    });
-    return { formifiedQuery, nodes };
-  };
-  const captureBranchName = /^refs\/heads\/(.*)/;
-  const parseRefForBranchName = (ref) => {
-    const matches = ref.match(captureBranchName);
-    return matches[1];
-  };
-  class Client {
-    constructor(_a) {
-      var _b = _a, { tokenStorage = "MEMORY" } = _b, options = __objRest(_b, ["tokenStorage"]);
-      this.events = new toolkit.EventBus();
-      this.addPendingContent = async (props) => {
-        const mutation = `#graphql
-mutation addPendingDocumentMutation(
-  $relativePath: String!
-  $collection: String!
-  $template: String
-) {
-  addPendingDocument(
-    relativePath: $relativePath
-    template: $template
-    collection: $collection
-  ) {
-    ... on Document {
-      sys {
-        relativePath
-        path
-        breadcrumbs
-        collection {
-          slug
-        }
-      }
-    }
-  }
-}`;
-        const result = await this.request(mutation, {
-          variables: props
-        });
-        return result;
-      };
-      this.getSchema = async () => {
-        if (!this.schema) {
-          const data = await this.request(G.getIntrospectionQuery(), {
-            variables: {}
-          });
-          this.schema = G.buildClientSchema(data);
-        }
-        return this.schema;
-      };
-      this.getOptimizedQuery = async (documentNode) => {
-        const data = await this.request(`query GetOptimizedQuery($queryString: String!) {
-        getOptimizedQuery(queryString: $queryString)
-      }`, {
-          variables: { queryString: G.print(documentNode) }
-        });
-        return G.parse(data.getOptimizedQuery);
-      };
-      this.options = options;
-      this.setBranch(options.branch);
-      this.events.subscribe("branch:change", ({ branchName }) => {
-        this.setBranch(branchName);
-      });
-      this.clientId = options.clientId;
-      switch (tokenStorage) {
-        case "LOCAL_STORAGE":
-          this.getToken = async function() {
-            const tokens = localStorage.getItem(AUTH_TOKEN_KEY) || null;
-            if (tokens) {
-              return await this.getRefreshedToken(tokens);
-            } else {
-              return {
-                access_token: null,
-                id_token: null,
-                refresh_token: null
-              };
             }
           };
-          this.setToken = function(token) {
-            localStorage.setItem(AUTH_TOKEN_KEY, JSON.stringify(token, null, 2));
+          if (cms.api.tina.schema) {
+            const enrichedSchema = cms.api.tina.schema;
+            const collection = enrichedSchema.getCollection(result._internalSys.collection.name);
+            const template = enrichedSchema.getTemplateForData({
+              collection,
+              data: result.values
+            });
+            const formInfo = schemaTools.resolveForm({
+              collection,
+              basename: collection.name,
+              schema: enrichedSchema,
+              template
+            });
+            formConfig = __spreadValues({
+              label: formInfo.label,
+              fields: formInfo.fields
+            }, formCommon);
+          } else {
+            formConfig = __spreadValues({
+              label: result.form.label,
+              fields: result.form.fields
+            }, formCommon);
+          }
+          const { createForm, createGlobalForm } = generateFormCreators(cms);
+          const SKIPPED = "SKIPPED";
+          let form;
+          let skipped;
+          const skip = () => {
+            skipped = SKIPPED;
           };
-          break;
-        case "MEMORY":
-          this.getToken = async () => {
-            if (this.token) {
-              return await this.getRefreshedToken(this.token);
+          if (skipped)
+            return;
+          if (formify2) {
+            form = formify2({ formConfig, createForm, createGlobalForm, skip }, cms);
+          } else {
+            form = createForm(formConfig);
+          }
+          if (!(form instanceof toolkit.Form)) {
+            if (skipped === SKIPPED) {
+              return;
+            }
+            throw new Error("formify must return a form or skip()");
+          }
+          const { change } = form.finalForm;
+          form.finalForm.change = (name, value) => {
+            let referenceName = "";
+            if (typeof name === "string") {
+              referenceName = name.split(".").filter((item) => isNaN(Number(item))).join(".");
             } else {
-              return {
-                access_token: null,
-                id_token: null,
-                refresh_token: null
-              };
+              throw new Error(`Expected name to be of type string for FinalForm change callback`);
             }
+            setNewUpdate({
+              queryName,
+              get: [queryName, "values", name].join("."),
+              set: [queryName, "data", name].join("."),
+              setReference: [queryName, "data", referenceName].join(".")
+            });
+            return change(name, value);
           };
-          this.setToken = (token) => {
-            this.token = JSON.stringify(token, null, 2);
-          };
-          break;
-        case "CUSTOM":
-          if (!options.getTokenFn) {
-            throw new Error("When CUSTOM token storage is selected, a getTokenFn must be provided");
-          }
-          this.getToken = options.getTokenFn;
-          break;
-      }
-    }
-    get isLocalMode() {
-      return this.contentApiUrl.includes("localhost");
+          const _a = form.finalForm.mutators, { insert, move, remove } = _a, rest = __objRest(_a, ["insert", "move", "remove"]);
+          const prepareNewUpdate = (name, lookup) => {
+            const extra = {};
+            if (lookup) {
+              extra["lookup"] = lookup;
+            }
+            const referenceName = name.split(".").filter((item) => isNaN(Number(item))).join(".");
+            setNewUpdate(__spreadValues({
+              queryName,
+              get: [queryName, "values", name].join("."),
+              set: [queryName, "data", name].join("."),
+              setReference: [queryName, "data", referenceName].join(".")
+            }, extra));
+          };
+          form.finalForm.mutators = __spreadValues({
+            insert: (...args) => {
+              const fieldName = args[0];
+              prepareNewUpdate(fieldName, fieldName);
+              insert(...args);
+            },
+            move: (...args) => {
+              const fieldName = args[0];
+              prepareNewUpdate(fieldName, fieldName);
+              move(...args);
+            },
+            remove: (...args) => {
+              const fieldName = args[0];
+              prepareNewUpdate(fieldName, fieldName);
+              remove(...args);
+            }
+          }, rest);
+          form.subscribe(({ values }) => {
+            setFormValues(__spreadProps(__spreadValues({}, formValues), { [queryName]: { values } }));
+          }, { values: true });
+        });
+      }).catch((e) => {
+        cms.alerts.error("There was a problem setting up forms for your query");
+        console.error("There was a problem setting up forms for your query");
+        console.error(e);
+        setIsLoading(false);
+      });
+      return () => {
+        formIds.forEach((name) => {
+          const formPlugin = cms.forms.find(name);
+          if (formPlugin) {
+            cms.forms.remove(formPlugin);
+          }
+        });
+      };
+    }, [query, JSON.stringify(variables), currentBranch]);
+    return [data, isLoading];
+  }
+  const transformDocumentIntoMutationRequestPayload = (document, instructions) => {
+    const _a = document, { _collection, __typename, _template } = _a, rest = __objRest(_a, ["_collection", "__typename", "_template"]);
+    const params = transformParams(rest);
+    const paramsWithTemplate = instructions.includeTemplate ? { [_template]: params } : params;
+    return instructions.includeCollection ? { [_collection]: paramsWithTemplate } : paramsWithTemplate;
+  };
+  const transformParams = (data) => {
+    if (["string", "number", "boolean"].includes(typeof data)) {
+      return data;
     }
-    setBranch(branchName) {
-      var _a, _b, _c;
-      const encodedBranch = encodeURIComponent(branchName);
-      this.frontendUrl = ((_a = this.options.tinaioConfig) == null ? void 0 : _a.frontendUrlOverride) || "https://app.tina.io";
-      this.identityApiUrl = ((_b = this.options.tinaioConfig) == null ? void 0 : _b.identityApiUrlOverride) || "https://identity.tinajs.io";
-      this.contentApiBase = ((_c = this.options.tinaioConfig) == null ? void 0 : _c.contentApiUrlOverride) || `https://content.tinajs.io`;
-      this.contentApiUrl = this.options.customContentApiUrl || `${this.contentApiBase}/content/${this.options.clientId}/github/${encodedBranch}`;
+    if (Array.isArray(data)) {
+      return data.map((item) => transformParams(item));
     }
-    async requestWithForm(query, {
-      variables,
-      useUnstableFormify
-    }) {
-      const schema = await this.getSchema();
-      let formifiedQuery;
-      if (useUnstableFormify) {
-        const res = await formify({
-          schema,
-          query: G.print(query(gql__default["default"])),
-          getOptimizedQuery: this.getOptimizedQuery
+    try {
+      assertShape(data, (yup2) => yup2.object({ _template: yup2.string().required() }));
+      const _a = data, { _template, __typename } = _a, rest = __objRest(_a, ["_template", "__typename"]);
+      const nested = transformParams(rest);
+      return { [_template]: nested };
+    } catch (e) {
+      if (e.message === "Failed to assertShape - _template is a required field") {
+        if (!data) {
+          return [];
+        }
+        const accum = {};
+        Object.entries(data).map(([keyName, value]) => {
+          accum[keyName] = transformParams(value);
         });
-        formifiedQuery = res.formifiedQuery;
+        return accum;
       } else {
-        formifiedQuery = formify$1(query(gql__default["default"]), schema);
+        if (!data) {
+          return [];
+        }
+        throw e;
       }
-      return this.request(G.print(formifiedQuery), { variables });
     }
-    async request(query, { variables }) {
-      const res = await fetch(this.contentApiUrl, {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-          Authorization: "Bearer " + (await this.getToken()).id_token
-        },
-        body: JSON.stringify({
-          query: typeof query === "function" ? G.print(query(gql__default["default"])) : query,
-          variables
-        })
-      });
-      if (res.status !== 200) {
-        throw new Error(`Unable to complete request, ${res.statusText}`);
+  };
+  const getFieldUpdate = (newUpdate, activeForm, formValues) => {
+    const items = newUpdate.lookup.split(".");
+    let currentFields = activeForm.fields;
+    items.map((item, index) => {
+      const lookupName = items.slice(0, index + 1).join(".");
+      const value = finalForm.getIn(formValues, [newUpdate.queryName, "values", lookupName].join("."));
+      if (isNaN(Number(item))) {
+        if (Array.isArray(currentFields)) {
+          currentFields = currentFields.find((field) => field.name === item);
+        }
+      } else {
+        const template = currentFields.templates ? currentFields.templates[value._template] : currentFields;
+        currentFields = template.fields;
       }
-      const json = await res.json();
-      if (json.errors) {
-        throw new Error(`Unable to fetch, errors: 
-	${json.errors.map((error) => error.message).join("\n")}`);
+    });
+    return currentFields;
+  };
+  const generateFormCreators = (cms) => {
+    const createForm = (formConfig) => {
+      const form = new toolkit.Form(formConfig);
+      cms.forms.add(form);
+      return form;
+    };
+    const createGlobalForm = (formConfig, options) => {
+      const form = new toolkit.Form(formConfig);
+      cms.plugins.add(new toolkit.GlobalFormPlugin(form, options == null ? void 0 : options.icon, options == null ? void 0 : options.layout));
+      return form;
+    };
+    return { createForm, createGlobalForm };
+  };
+  const generateFormCreatorsUnstable = (cms, showInSidebar) => {
+    const createForm = (formConfig) => {
+      const form = new toolkit.Form(formConfig);
+      if (showInSidebar) {
+        cms.forms.add(form);
       }
-      return json.data;
-    }
-    parseJwt(token) {
-      const base64Url = token.split(".")[1];
-      const base64 = base64Url.replace(/-/g, "+").replace(/_/g, "/");
-      const jsonPayload = decodeURIComponent(atob(base64).split("").map(function(c) {
-        return "%" + ("00" + c.charCodeAt(0).toString(16)).slice(-2);
-      }).join(""));
-      return JSON.parse(jsonPayload);
-    }
-    async getRefreshedToken(tokens) {
-      const { access_token, id_token, refresh_token } = JSON.parse(tokens);
-      const { exp, iss, client_id } = this.parseJwt(access_token);
-      if (Date.now() / 1e3 >= exp - 120) {
-        const refreshResponse = await fetch(iss, {
-          method: "POST",
-          headers: {
-            "Content-Type": "application/x-amz-json-1.1",
-            "x-amz-target": "AWSCognitoIdentityProviderService.InitiateAuth"
-          },
-          body: JSON.stringify({
-            ClientId: client_id,
-            AuthFlow: "REFRESH_TOKEN_AUTH",
-            AuthParameters: {
-              REFRESH_TOKEN: refresh_token,
-              DEVICE_KEY: null
+      return form;
+    };
+    const createGlobalForm = (formConfig, options) => {
+      const form = new toolkit.Form(formConfig);
+      if (showInSidebar) {
+        cms.plugins.add(new toolkit.GlobalFormPlugin(form, options == null ? void 0 : options.icon, options == null ? void 0 : options.layout));
+      }
+      return form;
+    };
+    return { createForm, createGlobalForm };
+  };
+  const getValueForBlueprint = (state, path) => {
+    const pathArray = path.split(".");
+    let latest = state;
+    pathArray.every((item, index) => {
+      if (item === "[]") {
+        const restOfItems = pathArray.slice(index + 1);
+        if (latest) {
+          const next = [];
+          if (Array.isArray(latest)) {
+            latest.forEach((latest2, index2) => {
+              const res = getValueForBlueprint(latest2, restOfItems.join("."));
+              next.push(res);
+            });
+          } else {
+            throw new Error(`Expected value to be an array for "[]" item`);
+          }
+          if (next.length > 0) {
+            latest = next;
+          } else {
+            latest = void 0;
+          }
+        }
+        return false;
+      } else {
+        if (latest) {
+          latest = latest[item];
+        } else {
+          latest = void 0;
+        }
+      }
+      return true;
+    });
+    return latest;
+  };
+  const getFieldNameOrAlias = (fieldBlueprint) => {
+    return fieldBlueprint.path[fieldBlueprint.path.length - 1].alias;
+  };
+  const spliceLocation = (string, location) => {
+    const accum = [];
+    let counter = 0;
+    string.split(".").forEach((item) => {
+      if (item === "[]") {
+        accum.push(location[counter]);
+        counter++;
+      } else {
+        accum.push(item);
+      }
+    });
+    return accum.join(".");
+  };
+  const getPathToChange = (documentBlueprint, formNode, event) => {
+    const fieldName = event.field.name;
+    const location = [...formNode.location, ...stripIndices(fieldName)];
+    const accum = [];
+    let counter = 0;
+    documentBlueprint.path.forEach((item) => {
+      accum.push(item.alias);
+      if (item.list) {
+        if (location[counter] !== void 0) {
+          accum.push(location[counter]);
+          counter++;
+        }
+      }
+    });
+    return accum.join(".");
+  };
+  const buildForm = (doc, cms, formify2, showInSidebar = false, onSubmit) => {
+    const { createForm, createGlobalForm } = generateFormCreatorsUnstable(cms, showInSidebar);
+    const SKIPPED = "SKIPPED";
+    let form;
+    let skipped;
+    const skip = () => {
+      skipped = SKIPPED;
+    };
+    if (skipped)
+      return;
+    const id = doc._internalSys.path;
+    const formCommon = {
+      id,
+      label: doc.form.label,
+      initialValues: doc.values,
+      onSubmit: async (payload) => {
+        try {
+          const params = transformDocumentIntoMutationRequestPayload(payload, doc.form.mutationInfo);
+          const variables = { params };
+          const mutationString = doc.form.mutationInfo.string;
+          if (onSubmit) {
+            onSubmit({
+              queryString: mutationString,
+              mutationString,
+              variables
+            });
+          } else {
+            try {
+              await cms.api.tina.request(mutationString, {
+                variables
+              });
+              cms.alerts.success("Document saved!");
+            } catch (e) {
+              cms.alerts.error("There was a problem saving your document");
+              console.error(e);
             }
-          })
-        });
-        if (refreshResponse.status !== 200) {
-          throw new Error("Unable to refresh auth tokens");
+          }
+        } catch (e) {
+          console.error(e);
+          cms.alerts.error("There was a problem saving your document");
         }
-        const responseJson = await refreshResponse.json();
-        const newToken = {
-          access_token: responseJson.AuthenticationResult.AccessToken,
-          id_token: responseJson.AuthenticationResult.IdToken,
-          refresh_token
-        };
-        this.setToken(newToken);
-        return Promise.resolve(newToken);
       }
-      return Promise.resolve({ access_token, id_token, refresh_token });
+    };
+    let formConfig = {};
+    if (cms.api.tina.schema) {
+      const enrichedSchema = cms.api.tina.schema;
+      const collection = enrichedSchema.getCollection(doc._internalSys.collection.name);
+      const template = enrichedSchema.getTemplateForData({
+        collection,
+        data: doc.values
+      });
+      const formInfo = schemaTools.resolveForm({
+        collection,
+        basename: collection.name,
+        schema: enrichedSchema,
+        template
+      });
+      formConfig = __spreadValues({
+        label: formInfo.label,
+        fields: formInfo.fields
+      }, formCommon);
+    } else {
+      formConfig = __spreadValues({
+        label: doc.form.label,
+        fields: doc.form.fields
+      }, formCommon);
     }
-    async isAuthorized() {
-      return this.isAuthenticated();
+    if (formify2) {
+      form = formify2({
+        formConfig,
+        createForm,
+        createGlobalForm,
+        skip
+      }, cms);
+    } else {
+      form = createForm(formConfig);
     }
-    async isAuthenticated() {
-      return !!await this.getUser();
+    if (!(form instanceof toolkit.Form)) {
+      if (skipped === SKIPPED) {
+        return;
+      }
+      throw new Error("formify must return a form or skip()");
     }
-    async authenticate() {
-      const token = await authenticate(this.clientId, this.frontendUrl);
-      this.setToken(token);
-      return token;
+    return form;
+  };
+  const formNodeId = (formNode) => {
+    return spliceLocation(formNode.documentBlueprintId, formNode.location) + formNode.documentFormId;
+  };
+  const formNodePath = (formNode) => {
+    return spliceLocation(formNode.documentBlueprintId, formNode.location);
+  };
+  const formNodeNotIn = (formNode, formNodes) => {
+    return !formNodes.find((fn) => formNodeId(fn) === formNodeId(formNode));
+  };
+  const sequential = async (items, callback) => {
+    const accum = [];
+    if (!items) {
+      return [];
     }
-    async fetchWithToken(input, init) {
-      const headers = (init == null ? void 0 : init.headers) || {};
-      return await fetch(input, __spreadProps(__spreadValues({}, init), {
-        headers: new Headers(__spreadValues({
-          Authorization: "Bearer " + (await this.getToken()).id_token
-        }, headers))
-      }));
+    const reducePromises = async (previous, endpoint) => {
+      const prev = await previous;
+      if (prev) {
+        accum.push(prev);
+      }
+      return callback(endpoint, accum.length);
+    };
+    const result = await items.reduce(reducePromises, Promise.resolve());
+    if (result) {
+      accum.push(result);
     }
-    async getUser() {
-      if (!this.clientId) {
-        return null;
+    return accum;
+  };
+  const getFormNodesStartingWith = (string, state) => {
+    return state.formNodes.filter((subFormNode) => {
+      return subFormNode.documentBlueprintId.startsWith(string);
+    });
+  };
+  const getFormNodesForField = (fieldBlueprint, formNode, event, state) => {
+    const pathToChange = getPathToChange(fieldBlueprint, formNode, event);
+    const formNodes = getFormNodesStartingWith(fieldBlueprint.id, state);
+    const eventLocation = [
+      ...formNode.location,
+      ...stripIndices(event.field.name)
+    ];
+    const existing = finalForm.getIn(state.data, pathToChange);
+    return { pathToChange, formNodes, eventLocation, existing };
+  };
+  const getBlueprintAliasPath = (blueprint) => {
+    const namePath = [];
+    const aliasPath = [];
+    blueprint.path.forEach((p) => {
+      namePath.push(p.name);
+      aliasPath.push(p.alias);
+      if (p.list) {
+        namePath.push("[]");
+        aliasPath.push("[]");
       }
-      const url = `${this.identityApiUrl}/v2/apps/${this.clientId}/currentUser`;
-      try {
-        const res = await this.fetchWithToken(url, {
-          method: "GET"
-        });
-        const val = await res.json();
-        if (!res.status.toString().startsWith("2")) {
-          console.error(val.error);
-          return null;
-        }
-        return val;
-      } catch (e) {
-        console.error(e);
-        return null;
+    });
+    return aliasPath.join(".");
+  };
+  const getBlueprintFieldsForEvent = (blueprint, event) => {
+    return blueprint.fields.filter((fbp) => {
+      if (getBlueprintNamePath(fbp) === getEventPath(event, blueprint)) {
+        return true;
       }
-    }
-    async listBranches() {
-      const url = `${this.contentApiBase}/github/${this.clientId}/list_branches`;
-      const res = await this.fetchWithToken(url, {
-        method: "GET"
-      });
-      return res.json();
-    }
-    async createBranch({ baseBranch, branchName }) {
-      const url = `${this.contentApiBase}/github/${this.clientId}/create_branch`;
-      try {
-        const res = await this.fetchWithToken(url, {
-          method: "POST",
-          body: JSON.stringify({
-            baseBranch,
-            branchName
-          }),
-          headers: {
-            "Content-Type": "application/json"
-          }
-        });
-        return await res.json().then((r) => parseRefForBranchName(r.data.ref));
-      } catch (error) {
-        console.error("There was an error creating a new branch.", error);
-        return null;
+    }).filter((fbp) => {
+      return filterFieldBlueprintsByParentTypename(fbp, event.field.data.tinaField.parentTypename);
+    });
+  };
+  const filterFieldBlueprintsByParentTypename = (fbp, typename) => {
+    let lastDisambiguator;
+    fbp.path.forEach((path) => {
+      if (path.parentTypename) {
+        lastDisambiguator = path.parentTypename;
       }
+    });
+    if (lastDisambiguator) {
+      return typename === lastDisambiguator;
+    } else {
+      return true;
     }
-  }
-  const DEFAULT_LOCAL_TINA_GQL_SERVER_URL = "http://localhost:4001/graphql";
-  class LocalClient extends Client {
-    constructor(props) {
-      const clientProps = {
-        clientId: "",
-        branch: "",
-        customContentApiUrl: props && props.customContentApiUrl ? props.customContentApiUrl : DEFAULT_LOCAL_TINA_GQL_SERVER_URL
-      };
-      super(clientProps);
+  };
+  const getBlueprintNamePath = (blueprint, disambiguator) => {
+    const namePath = [];
+    blueprint.path.forEach((p) => {
+      if (disambiguator) {
+        if (p.parentTypename) {
+          namePath.push(p.parentTypename);
+        }
+      }
+      namePath.push(p.name);
+      if (p.list) {
+        namePath.push("[]");
+      }
+    });
+    return namePath.join(".");
+  };
+  const getEventPath = (event, blueprint) => {
+    const stringArray = event.field.name.split(".");
+    const eventPath = stringArray.map((item) => {
+      if (isNaN(Number(item))) {
+        return item;
+      }
+      return `[]`;
+    }).join(".");
+    const items = [blueprint.id, DATA_NODE_NAME$1, eventPath];
+    const isList = event.field.data.tinaField.list;
+    if (isList && !eventPath.endsWith("[]")) {
+      items.push(`[]`);
     }
-    async isAuthorized() {
-      return true;
+    return items.join(".");
+  };
+  const stripIndices = (string) => {
+    const accum = [];
+    const stringArray = string.split(".");
+    stringArray.forEach((item) => {
+      if (isNaN(item))
+        ;
+      else {
+        accum.push(Number(item));
+      }
+    });
+    return accum;
+  };
+  const replaceRealNum = (string) => {
+    const stringArray = string.split(".");
+    return stringArray.map((item) => {
+      if (isNaN(item)) {
+        return item;
+      }
+      return "[]";
+    }).join(".");
+  };
+  const getMatchName = ({ field, prefix, blueprint }) => {
+    const fieldName = field.list ? `${field.name}.[]` : field.name;
+    const blueprintName = getBlueprintNamePath(blueprint);
+    const extra = [];
+    if (prefix) {
+      extra.push(prefix);
     }
-    async isAuthenticated() {
-      return true;
+    const matchName = [blueprintName, DATA_NODE_NAME$1, ...extra, fieldName].join(".");
+    return { matchName, fieldName };
+  };
+  const getFormNodesFromEvent = (state, event) => {
+    const formNodes = state.formNodes.filter((formNode) => formNode.documentFormId === event.formId);
+    return formNodes;
+  };
+  const DATA_NODE_NAME$1 = "data";
+  const printEvent = (event) => {
+    var _a, _b;
+    return {
+      type: event.type,
+      value: event.value,
+      previousValue: event.previousValue,
+      mutationType: event.mutationType,
+      formId: event.formId,
+      field: {
+        data: (_a = event.field) == null ? void 0 : _a.data,
+        name: (_b = event.field) == null ? void 0 : _b.name
+      }
+    };
+  };
+  const getFormNodeBlueprint = (formNode, state) => {
+    return state.blueprints.find((d) => d.id === formNode.documentBlueprintId);
+  };
+  const getMoveMapping = (existing, from, to) => {
+    const newOrderObject = {};
+    if (from < to) {
+      existing.map((_, i) => {
+        if (i === from) {
+          newOrderObject[i] = to;
+          return;
+        }
+        if (i > from) {
+          if (i < to) {
+            newOrderObject[i] = i - 1;
+            return;
+          } else {
+            if (i === to) {
+              newOrderObject[i] = i - 1;
+              return;
+            }
+            newOrderObject[i] = i;
+            return;
+          }
+        } else {
+          newOrderObject[i] = i;
+          return;
+        }
+      });
+    } else {
+      existing.map((_, i) => {
+        if (i === from) {
+          newOrderObject[i] = to;
+          return;
+        }
+        if (i > to) {
+          if (i < from) {
+            newOrderObject[i] = i + 1;
+            return;
+          } else {
+            newOrderObject[i] = i;
+            return;
+          }
+        } else {
+          if (i === to) {
+            newOrderObject[i] = i + 1;
+            return;
+          }
+          newOrderObject[i] = i;
+          return;
+        }
+      });
     }
-  }
-  function ModalBuilder(modalProps) {
-    return /* @__PURE__ */ React__default["default"].createElement(toolkit.Modal, null, /* @__PURE__ */ React__default["default"].createElement(toolkit.ModalPopup, null, /* @__PURE__ */ React__default["default"].createElement(toolkit.ModalHeader, null, modalProps.title), /* @__PURE__ */ React__default["default"].createElement(toolkit.ModalBody, {
-      padded: true
-    }, /* @__PURE__ */ React__default["default"].createElement("p", null, modalProps.message), modalProps.error && /* @__PURE__ */ React__default["default"].createElement(ErrorLabel, null, modalProps.error)), /* @__PURE__ */ React__default["default"].createElement(toolkit.ModalActions, null, modalProps.actions.map((action) => /* @__PURE__ */ React__default["default"].createElement(AsyncButton, __spreadValues({
-      key: action.name
-    }, action))))));
-  }
-  const ErrorLabel = styled__default["default"].p`
-  color: var(--tina-color-error) !important;
-`;
-  const AsyncButton = ({ name, primary, action }) => {
-    const [submitting, setSubmitting] = React.useState(false);
-    const onClick = React.useCallback(async () => {
-      setSubmitting(true);
-      try {
-        await action();
-        setSubmitting(false);
-      } catch (e) {
-        setSubmitting(false);
-        throw e;
+    return newOrderObject;
+  };
+  const matchLocation = (eventLocation, formNode) => {
+    return eventLocation.every((item, index) => item === formNode.location[index]);
+  };
+  const bumpLocation = (location) => {
+    return location.map((item, index) => {
+      if (index === location.length - 1) {
+        return item + 1;
       }
-    }, [action, setSubmitting]);
-    return /* @__PURE__ */ React__default["default"].createElement(toolkit.Button, {
-      variant: primary ? "primary" : "secondary",
-      onClick,
-      busy: submitting,
-      disabled: submitting
-    }, submitting && /* @__PURE__ */ React__default["default"].createElement(toolkit.LoadingDots, null), !submitting && name);
+      return item;
+    });
   };
-  const TINA_AUTH_CONFIG = "tina_auth_config";
-  const useTinaAuthRedirect = () => {
-    React.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;
+  const maybeLowerLocation = (location, at) => {
+    return location.map((item, index) => {
+      if (index === location.length - 1) {
+        return item < at ? item : item - 1;
       }
-      localStorage[TINA_AUTH_CONFIG] = JSON.stringify(config);
-    }, []);
+      return item;
+    });
   };
-  const createClient = ({
-    clientId,
-    isLocalClient = true,
-    branch,
-    tinaioConfig
-  }) => {
-    return isLocalClient ? new LocalClient() : new Client({
-      clientId: clientId || "",
-      branch: branch || "main",
-      tokenStorage: "LOCAL_STORAGE",
-      tinaioConfig
+  const matchesAt = (location, at) => {
+    let matches = false;
+    location.map((item, index) => {
+      if (index === location.length - 1) {
+        if (item === at) {
+          matches = true;
+        }
+      }
     });
+    return matches;
   };
-  function assertShape(value, yupSchema, errorMessage) {
-    const shape = yupSchema(yup__namespace);
-    try {
-      shape.validateSync(value);
-    } catch (e) {
-      const message = errorMessage || `Failed to assertShape - ${e.message}`;
-      throw new Error(message);
+  const swapLocation = (location, mapping) => {
+    return location.map((item, index) => {
+      if (index === location.length - 1) {
+        return mapping[item];
+      }
+      return item;
+    });
+  };
+  const getSubFields = (changeSet) => {
+    var _a;
+    const fields = changeSet.fieldDefinition.fields ? changeSet.fieldDefinition.fields : changeSet.fieldDefinition.templates[changeSet.value[0]._template].fields;
+    let __typename;
+    if ((_a = changeSet.fieldDefinition) == null ? void 0 : _a.templates) {
+      __typename = changeSet.fieldDefinition.typeMap[changeSet.value[0]._template];
     }
-  }
-  function safeAssertShape(value, yupSchema) {
-    try {
-      assertShape(value, yupSchema);
-      return true;
-    } catch (e) {
+    return { fields, __typename };
+  };
+  const isFormifiableDocument = (t) => {
+    const type = G__namespace.getNamedType(t);
+    if (G__namespace.isUnionType(type)) {
+      return type.getTypes().every((type2) => {
+        return type2.getInterfaces().find((intfc) => intfc.name === "Node");
+      });
+    } else if (G__namespace.isObjectType(type)) {
+      return !!type.getInterfaces().find((intfc) => intfc.name === "Node");
+    } else {
       return false;
     }
-  }
-  class TinaAdminApi {
-    constructor(cms) {
-      this.api = cms.api.tina;
+  };
+  const isScalarType = (t) => {
+    const namedType = G__namespace.getNamedType(t);
+    return G__namespace.isScalarType(namedType);
+  };
+  const isConnectionField = (t) => {
+    const type = G__namespace.getNamedType(t);
+    if (G__namespace.isObjectType(type)) {
+      return !!type.getInterfaces().find((intfc) => intfc.name === "Connection");
+    } else {
+      throw new Error(`Expected GraphQLObjectType for isConnectionField check`);
     }
-    async isAuthenticated() {
-      return await this.api.isAuthenticated();
+  };
+  const getObjectField = (object, selectionNode) => {
+    const namedType = G__namespace.getNamedType(object);
+    ensureObjectOrInterfaceType(namedType);
+    return namedType.getFields()[selectionNode.name.value];
+  };
+  const getSelectedUnionType = (unionType, selectionNode) => {
+    const namedType = G__namespace.getNamedType(unionType);
+    if (!G__namespace.isUnionType(namedType)) {
+      return;
     }
-    async fetchCollections() {
-      const response = await this.api.request(`#graphql
-      query{ 
-        getCollections { 
-          label, 
-          name 
-        } 
-      }`, { variables: {} });
-      return response;
+    const types = namedType.getTypes();
+    const typeCondition = selectionNode.typeCondition.name.value;
+    let intfc;
+    types.forEach((type) => {
+      intfc = type.getInterfaces().find((intfc2) => intfc2.name === typeCondition);
+    });
+    if (intfc) {
+      return intfc;
     }
-    async fetchCollection(collectionName, includeDocuments) {
-      const response = await this.api.request(`#graphql
-      query($collection: String!, $includeDocuments: Boolean!){
-        getCollection(collection: $collection){
-          name
-          label
-          format
-          templates
-          documents @include(if: $includeDocuments) {
-            totalCount
-            edges {
-              node {
-                ... on Document {
-                  sys {
-                    template
-                    breadcrumbs
-                    path
-                    basename
-                    relativePath
-                    filename
-                    extension
-                  }
-                }
-              }
-            }
-          }
-        }
-      }`, { variables: { collection: collectionName, includeDocuments } });
-      return response;
+    return namedType.getTypes().find((type) => type.name === typeCondition);
+  };
+  function isListType(type) {
+    if (G__namespace.isListType(type)) {
+      return true;
+    } else if (G__namespace.isNonNullType(type)) {
+      if (G__namespace.isListType(type.ofType)) {
+        return true;
+      }
     }
-    async fetchDocument(collectionName, relativePath) {
-      const response = await this.api.request(`#graphql
-      query($collection: String!, $relativePath: String!) {
-        getDocument(collection:$collection, relativePath:$relativePath) {
-          ... on Document {
-            form
-            values
-          }
-        }
-      }`, { variables: { collection: collectionName, relativePath } });
-      return response;
-    }
-    async fetchDocumentFields() {
-      const response = await this.api.request(`#graphql
-      query { 
-        getDocumentFields 
-      }`, { variables: {} });
-      return response;
-    }
-    async createDocument(collectionName, relativePath, params) {
-      const response = await this.api.request(`#graphql
-      mutation($collection: String!, $relativePath: String!, $params: DocumentMutation!) {
-        createDocument(
-          collection: $collection,
-          relativePath: $relativePath,
-          params: $params
-        ){__typename}
-      }`, {
-        variables: {
-          collection: collectionName,
-          relativePath,
-          params
-        }
-      });
-      return response;
+    return false;
+  }
+  function ensureObjectOrInterfaceType(type) {
+    if (G__namespace.isInterfaceType(type) || G__namespace.isObjectType(type))
+      ;
+    else {
+      console.log("Expected type to be GraphQLObjectType or GraphQLInterfaceType", type);
+      throw new Error(`Expected type to be GraphQLObjectType or GraphQLInterfaceType`);
     }
-    async updateDocument(collectionName, relativePath, params) {
-      const response = await this.api.request(`#graphql
-      mutation($collection: String!, $relativePath: String!, $params: DocumentMutation!) {
-        updateDocument( 
-          collection: $collection,
-          relativePath: $relativePath,
-          params: $params
-        ){__typename}
-      }`, {
-        variables: {
-          collection: collectionName,
-          relativePath,
-          params
-        }
-      });
-      return response;
+  }
+  function ensureOperationDefinition(type) {
+    if (type.kind !== "OperationDefinition") {
+      throw new Error(`Expected top-level definition to be an OperationDefinition node, ensure your query has been optimized before calling formify`);
     }
   }
-  function sleep(ms) {
-    return new Promise((resolve) => setTimeout(resolve, ms));
+  function buildPath({
+    fieldNode,
+    type,
+    parentTypename,
+    path
+  }) {
+    const p = path || [];
+    const list = isListType(type);
+    const isNode = isFormifiableDocument(type);
+    return [
+      ...p,
+      {
+        name: fieldNode.name.value,
+        alias: fieldNode.alias ? fieldNode.alias.value : fieldNode.name.value,
+        parentTypename,
+        list: !!list,
+        isNode: !!isNode
+      }
+    ];
   }
-  const AuthWallInner = ({
-    children,
-    cms,
-    loginScreen,
-    getModalActions
-  }) => {
-    const client = cms.api.tina;
-    const [activeModal, setActiveModal] = React.useState(null);
-    const [showChildren, setShowChildren] = React.useState(false);
-    React__default["default"].useEffect(() => {
-      client.isAuthenticated().then((isAuthenticated) => {
-        if (isAuthenticated) {
-          setShowChildren(true);
-          cms.enable();
-        } else {
-          sleep(500).then(() => {
-            setActiveModal("authenticate");
-          });
+  const node = G__namespace.parse(`
+ query Sample {
+   _internalSys: sys {
+     path
+     collection {
+       name
+     }
+   }
+   form
+   values
+ }`);
+  const metaFields = node.definitions[0].selectionSet.selections;
+  const getRelativeBlueprint = (path) => {
+    let indexOfLastNode = 0;
+    path.forEach((item, i) => {
+      if (item.isNode) {
+        if (i === path.length - 1)
+          ;
+        else {
+          indexOfLastNode = i;
         }
-      });
-    }, []);
-    const onAuthSuccess = async () => {
-      if (await client.isAuthenticated()) {
-        setShowChildren(true);
-        setActiveModal(null);
-      } else {
-        throw new Error("No access to repo");
       }
-    };
-    const otherModalActions = getModalActions ? getModalActions({
-      closeModal: () => {
-        setActiveModal(null);
+    });
+    const documentBlueprintPath = path.slice(0, indexOfLastNode + 1);
+    return getBlueprintNamePath({ path: documentBlueprintPath });
+  };
+  const getBlueprintId = (path) => {
+    const namePath = [];
+    const aliasPath = [];
+    path.forEach((p) => {
+      namePath.push(p.name);
+      aliasPath.push(p.alias);
+      if (p.list) {
+        namePath.push("[]");
+        aliasPath.push("[]");
       }
-    }) : [];
-    return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, activeModal === "authenticate" && /* @__PURE__ */ React__default["default"].createElement(ModalBuilder, {
-      title: "Tina Cloud Authorization",
-      message: "To save edits, Tina Cloud authorization is required. On save, changes will get commited using your account.",
-      close,
-      actions: [
-        ...otherModalActions,
-        {
-          action: async () => {
-            sharedctx.setEditing(false);
-            window.location.reload();
-          },
-          name: "Close",
-          primary: false
-        },
-        {
-          name: "Continue to Tina Cloud",
-          action: async () => {
-            await client.authenticate();
-            onAuthSuccess();
-          },
-          primary: true
-        }
-      ]
-    }), showChildren ? children : loginScreen ? loginScreen : null);
+    });
+    return namePath.join(".");
   };
-  const TinaCloudProvider = (props) => {
-    const baseBranch = props.branch || "main";
-    const [currentBranch, setCurrentBranch] = toolkit.useLocalStorage("tinacms-current-branch", baseBranch);
-    useTinaAuthRedirect();
-    const cms = React__default["default"].useMemo(() => props.cms || new toolkit.TinaCMS({
-      enabled: true,
-      sidebar: true
-    }), [props.cms]);
-    if (!cms.api.tina) {
-      cms.registerApi("tina", createClient(props));
-    }
-    if (!cms.api.admin) {
-      cms.registerApi("admin", new TinaAdminApi(cms));
-    }
-    const setupMedia = async () => {
-      var _a;
-      if (props.mediaStore) {
-        if ((_a = props.mediaStore.prototype) == null ? void 0 : _a.persist) {
-          cms.media.store = new props.mediaStore(cms.api.tina);
-        } else {
-          const MediaClass = await props.mediaStore();
-          cms.media.store = new MediaClass(cms.api.tina);
+  const NOOP = "This is either an error or is not yet supported";
+  const UNEXPECTED = "Formify encountered an unexpected error, please contact support";
+  const EDGES_NODE_NAME = "edges";
+  const NODE_NAME = "node";
+  const COLLECTION_FIELD_NAME = "getCollection";
+  const COLLECTIONS_FIELD_NAME = "getCollections";
+  const COLLECTIONS_DOCUMENTS_NAME = "documents";
+  const DATA_NODE_NAME = "data";
+  const formify = async ({
+    schema,
+    query,
+    getOptimizedQuery
+  }) => {
+    const blueprints = [];
+    const documentNode = G__namespace.parse(query);
+    const visitor = {
+      OperationDefinition: (node2) => {
+        if (!node2.name) {
+          return __spreadProps(__spreadValues({}, node2), {
+            name: {
+              kind: "Name",
+              value: `QueryOperation`
+            }
+          });
         }
+        return node2;
       }
     };
-    const handleListBranches = async () => {
-      const { owner, repo } = props;
-      const branches = await cms.api.tina.listBranches({ owner, repo });
-      if (!Array.isArray(branches)) {
-        return [];
-      }
-      return branches;
-    };
-    const handleCreateBranch = async (data) => {
-      const newBranch = await cms.api.tina.createBranch(data);
-      return newBranch;
+    const documentNodeWithName = G__namespace.visit(documentNode, visitor);
+    const optimizedQuery = await getOptimizedQuery(documentNodeWithName);
+    const typeInfo = new G__namespace.TypeInfo(schema);
+    const formifyConnection = ({
+      parentType,
+      selectionNode,
+      path
+    }) => {
+      return __spreadProps(__spreadValues({}, selectionNode), {
+        selectionSet: {
+          kind: "SelectionSet",
+          selections: selectionNode.selectionSet.selections.map((selectionNode2) => {
+            switch (selectionNode2.kind) {
+              case "Field":
+                if (selectionNode2.name.value === EDGES_NODE_NAME) {
+                  const edgeField = getObjectField(parentType, selectionNode2);
+                  const edgesPath = buildPath({
+                    fieldNode: selectionNode2,
+                    type: edgeField.type,
+                    path
+                  });
+                  return __spreadProps(__spreadValues({}, selectionNode2), {
+                    selectionSet: {
+                      kind: "SelectionSet",
+                      selections: selectionNode2.selectionSet.selections.map((subSelectionNode) => {
+                        switch (subSelectionNode.kind) {
+                          case "Field":
+                            if (subSelectionNode.name.value === NODE_NAME) {
+                              const nodeField = getObjectField(edgeField.type, subSelectionNode);
+                              return formifyFieldNodeDocument({
+                                fieldNode: subSelectionNode,
+                                type: nodeField.type,
+                                path: buildPath({
+                                  fieldNode: subSelectionNode,
+                                  type: nodeField.type,
+                                  path: edgesPath
+                                }),
+                                showInSidebar: false
+                              });
+                            } else {
+                              return subSelectionNode;
+                            }
+                          default:
+                            throw new FormifyError("NOOP");
+                        }
+                      })
+                    }
+                  });
+                }
+                return selectionNode2;
+              default:
+                throw new FormifyError("UNEXPECTED");
+            }
+          })
+        }
+      });
     };
-    setupMedia();
-    const [branchingEnabled, setBranchingEnabled] = React__default["default"].useState(() => cms.flags.get("branch-switcher"));
-    React__default["default"].useEffect(() => {
-      cms.events.subscribe("flag:set", ({ key, value }) => {
-        if (key === "branch-switcher") {
-          setBranchingEnabled(value);
+    function formifyInlineFragmentDocument({
+      inlineFragmentNode,
+      type,
+      path,
+      showInSidebar = false
+    }) {
+      return formifyDocument({
+        selection: inlineFragmentNode,
+        type,
+        path,
+        showInSidebar
+      });
+    }
+    function formifyFieldNodeDocument({
+      fieldNode,
+      type,
+      path,
+      showInSidebar = false
+    }) {
+      return formifyDocument({ selection: fieldNode, type, path, showInSidebar });
+    }
+    function formifyDocument({
+      selection,
+      type,
+      path,
+      showInSidebar = false
+    }) {
+      let extraFields = [];
+      let hasDataJSONField = false;
+      let hasValuesField = false;
+      let shouldFormify = false;
+      selection.selectionSet.selections.forEach((selection2) => {
+        if (selection2.kind === "Field") {
+          if (selection2.name.value === "dataJSON") {
+            shouldFormify = true;
+            hasDataJSONField = true;
+          }
+          if (selection2.name.value === "values") {
+            shouldFormify = true;
+            hasValuesField = true;
+          }
+          if (selection2.name.value === "data") {
+            shouldFormify = true;
+          }
         }
       });
-    }, [cms.events]);
-    React__default["default"].useEffect(() => {
-      let branchSwitcher;
-      if (branchingEnabled) {
-        branchSwitcher = new toolkit.BranchSwitcherPlugin({
-          listBranches: handleListBranches,
-          createBranch: handleCreateBranch
+      if (shouldFormify) {
+        blueprints.push({
+          id: getBlueprintId(path),
+          path,
+          selection,
+          fields: [],
+          showInSidebar,
+          hasDataJSONField,
+          hasValuesField
         });
-        cms.plugins.add(branchSwitcher);
+        extraFields = metaFields;
       }
-      return () => {
-        if (branchingEnabled && branchSwitcher) {
-          cms.plugins.remove(branchSwitcher);
+      return __spreadProps(__spreadValues({}, selection), {
+        selectionSet: {
+          kind: "SelectionSet",
+          selections: [
+            ...selection.selectionSet.selections.map((selectionNode) => {
+              switch (selectionNode.kind) {
+                case "InlineFragment": {
+                  const namedType = G__namespace.getNamedType(type);
+                  if (G__namespace.isInterfaceType(namedType)) {
+                    const subType = schema.getImplementations(namedType).objects.find((item) => item.name === selectionNode.typeCondition.name.value);
+                    return formifyInlineFragmentDocument({
+                      inlineFragmentNode: selectionNode,
+                      type: subType,
+                      path,
+                      showInSidebar: true
+                    });
+                  }
+                  return formifyInlineFragmentNode({
+                    inlineFragmentNode: selectionNode,
+                    parentType: type,
+                    path
+                  });
+                }
+                case "Field": {
+                  if (selectionNode.name.value === DATA_NODE_NAME) {
+                    const field = getObjectField(type, selectionNode);
+                    return __spreadProps(__spreadValues({}, selectionNode), {
+                      selectionSet: {
+                        kind: "SelectionSet",
+                        selections: [
+                          ...selectionNode.selectionSet.selections.map((subSelectionNode) => {
+                            switch (subSelectionNode.kind) {
+                              case "Field":
+                                return formifyFieldNode({
+                                  fieldNode: subSelectionNode,
+                                  parentType: field.type,
+                                  path: buildPath({
+                                    fieldNode: selectionNode,
+                                    type: field.type,
+                                    path
+                                  })
+                                });
+                              default:
+                                throw new FormifyError("UNEXPECTED", `selection ${subSelectionNode.kind}`);
+                            }
+                          })
+                        ]
+                      }
+                    });
+                  }
+                  return selectionNode;
+                }
+                default:
+                  throw new FormifyError("UNEXPECTED");
+              }
+            }),
+            ...extraFields
+          ]
         }
-      };
-    }, [branchingEnabled, props.branch]);
-    React__default["default"].useEffect(() => {
-      if (props.cmsCallback) {
-        props.cmsCallback(cms);
+      });
+    }
+    const formifyFieldNode = ({
+      fieldNode,
+      parentType,
+      path
+    }) => {
+      if (fieldNode.name.value === "__typename") {
+        return fieldNode;
       }
-    }, []);
-    return /* @__PURE__ */ React__default["default"].createElement(toolkit.BranchDataProvider, {
-      currentBranch,
-      setCurrentBranch: (b) => {
-        setCurrentBranch(b);
+      const field = getObjectField(parentType, fieldNode);
+      if (!field) {
+        return fieldNode;
       }
-    }, /* @__PURE__ */ React__default["default"].createElement(toolkit.TinaProvider, {
-      cms
-    }, /* @__PURE__ */ React__default["default"].createElement(AuthWallInner, __spreadProps(__spreadValues({}, props), {
-      cms
-    }))));
-  };
-  const TinaCloudAuthWall = TinaCloudProvider;
-  function useGraphqlForms({
-    variables,
-    onSubmit,
-    formify: formify2 = null,
-    query
-  }) {
-    const cms = toolkit.useCMS();
-    const [formValues, setFormValues] = React__default["default"].useState({});
-    const [data, setData] = React__default["default"].useState(null);
-    const [initialData, setInitialData] = React__default["default"].useState({});
-    const [pendingReset, setPendingReset] = React__default["default"].useState(null);
-    const [isLoading, setIsLoading] = React__default["default"].useState(true);
-    const [newUpdate, setNewUpdate] = React__default["default"].useState(null);
-    const { currentBranch } = toolkit.useBranchData();
-    const updateData = async () => {
-      var _a;
-      if (newUpdate) {
-        const newValue = finalForm.getIn(formValues, newUpdate.get);
-        const activeForm = finalForm.getIn(data, [newUpdate.queryName, "form"].join("."));
-        if (!activeForm) {
-          throw new Error(`Unable to find form for query ${newUpdate.queryName}`);
+      const blueprint = blueprints.find((blueprint2) => blueprint2.id === getRelativeBlueprint(path));
+      if (!blueprint) {
+        return fieldNode;
+      }
+      const fieldPath = buildPath({
+        fieldNode,
+        type: field.type,
+        parentTypename: G__namespace.getNamedType(parentType).name,
+        path
+      });
+      blueprint.fields.push({
+        id: getBlueprintId(fieldPath),
+        documentBlueprintId: blueprint.id,
+        path: fieldPath
+      });
+      if (isScalarType(field.type)) {
+        return fieldNode;
+      }
+      return __spreadProps(__spreadValues({}, fieldNode), {
+        selectionSet: {
+          kind: "SelectionSet",
+          selections: [
+            ...fieldNode.selectionSet.selections.map((selectionNode) => {
+              switch (selectionNode.kind) {
+                case "Field": {
+                  return formifyFieldNode({
+                    fieldNode: selectionNode,
+                    parentType: field.type,
+                    path: fieldPath
+                  });
+                }
+                case "InlineFragment": {
+                  return formifyInlineFragmentNode({
+                    inlineFragmentNode: selectionNode,
+                    parentType: field.type,
+                    path: fieldPath
+                  });
+                }
+                default:
+                  throw new FormifyError("UNEXPECTED", `selection ${selectionNode.kind}`);
+              }
+            })
+          ]
         }
-        if (activeForm == null ? void 0 : activeForm.paths) {
-          const asyncUpdate = (_a = activeForm.paths) == null ? void 0 : _a.find((p) => p.dataPath.join(".") === newUpdate.setReference);
-          if (asyncUpdate) {
-            const res = await cms.api.tina.request(asyncUpdate.queryString, {
-              variables: { id: newValue }
-            });
-            const newData2 = finalForm.setIn(data, newUpdate.set, res.node);
-            const newDataAndNewJSONData2 = finalForm.setIn(newData2, newUpdate.set.replace("data", "dataJSON"), newValue);
-            setData(newDataAndNewJSONData2);
-            setNewUpdate(null);
-            return;
+      });
+    };
+    const formifyInlineFragmentNode = ({
+      inlineFragmentNode,
+      parentType,
+      path
+    }) => {
+      const type = getSelectedUnionType(parentType, inlineFragmentNode);
+      if (!type) {
+        return inlineFragmentNode;
+      }
+      if (isFormifiableDocument(type)) {
+        return formifyInlineFragmentDocument({
+          inlineFragmentNode,
+          type,
+          path,
+          showInSidebar: false
+        });
+      }
+      return __spreadProps(__spreadValues({}, inlineFragmentNode), {
+        selectionSet: {
+          kind: "SelectionSet",
+          selections: inlineFragmentNode.selectionSet.selections.map((selectionNode) => {
+            switch (selectionNode.kind) {
+              case "Field":
+                return formifyFieldNode({
+                  fieldNode: selectionNode,
+                  parentType: type,
+                  path
+                });
+              default:
+                throw new FormifyError("UNEXPECTED", `selection ${selectionNode.kind}`);
+            }
+          })
+        }
+      });
+    };
+    const formifiedQuery = {
+      kind: "Document",
+      definitions: optimizedQuery.definitions.map((definition) => {
+        typeInfo.enter(definition);
+        ensureOperationDefinition(definition);
+        const parentType = typeInfo.getType();
+        return __spreadProps(__spreadValues({}, definition), {
+          selectionSet: {
+            kind: "SelectionSet",
+            selections: definition.selectionSet.selections.map((selectionNode) => {
+              switch (selectionNode.kind) {
+                case "Field":
+                  const field = getObjectField(parentType, selectionNode);
+                  const path = buildPath({
+                    fieldNode: selectionNode,
+                    type: field.type
+                  });
+                  if (isFormifiableDocument(field.type)) {
+                    return formifyFieldNodeDocument({
+                      fieldNode: selectionNode,
+                      type: field.type,
+                      path,
+                      showInSidebar: true
+                    });
+                  } else if (isConnectionField(field.type)) {
+                    return formifyConnection({
+                      parentType: field.type,
+                      selectionNode,
+                      path
+                    });
+                  }
+                  if (selectionNode.name.value === COLLECTION_FIELD_NAME || selectionNode.name.value === COLLECTIONS_FIELD_NAME) {
+                    const path2 = buildPath({
+                      fieldNode: selectionNode,
+                      type: field.type
+                    });
+                    return __spreadProps(__spreadValues({}, selectionNode), {
+                      selectionSet: {
+                        kind: "SelectionSet",
+                        selections: selectionNode.selectionSet.selections.map((subSelectionNode) => {
+                          switch (subSelectionNode.kind) {
+                            case "Field":
+                              if (subSelectionNode.name.value === COLLECTIONS_DOCUMENTS_NAME) {
+                                const subField = getObjectField(field.type, subSelectionNode);
+                                return formifyConnection({
+                                  parentType: subField.type,
+                                  selectionNode: subSelectionNode,
+                                  path: buildPath({
+                                    fieldNode: subSelectionNode,
+                                    type: subField.type,
+                                    path: path2
+                                  })
+                                });
+                              }
+                              return subSelectionNode;
+                            default:
+                              throw new FormifyError("NOOP");
+                          }
+                        })
+                      }
+                    });
+                  }
+                  throw new FormifyError("NOOP");
+                default:
+                  throw new FormifyError("UNEXPECTED");
+              }
+            })
           }
+        });
+      })
+    };
+    return { formifiedQuery, blueprints };
+  };
+  class FormifyError extends Error {
+    constructor(code, details) {
+      let message;
+      switch (code) {
+        case "NOOP":
+          message = NOOP;
+          break;
+        case "UNEXPECTED":
+          message = UNEXPECTED;
+          break;
+        default:
+          message = "";
+          break;
+      }
+      super(`${message} ${details || ""}`);
+      this.name = "FormifyError";
+    }
+  }
+  const defaultState = {
+    status: "idle",
+    schema: void 0,
+    query: null,
+    queryString: null,
+    data: {},
+    changeSets: [],
+    count: 0,
+    blueprints: [],
+    formNodes: [],
+    documentForms: []
+  };
+  function reducer(state, action) {
+    var _a, _b, _c, _d;
+    switch (action.type) {
+      case "start":
+        return __spreadProps(__spreadValues(__spreadValues({}, state), defaultState), {
+          query: action.value.query ? G__namespace.parse(action.value.query) : null,
+          queryString: action.value.query,
+          status: "initialized"
+        });
+      case "addDocumentBlueprints":
+        return __spreadProps(__spreadValues({}, state), {
+          status: "formified",
+          blueprints: action.value.blueprints,
+          query: action.value.formifiedQuery
+        });
+      case "addOrReplaceDocumentFormNode": {
+        const existingDocumentForms = state.documentForms.filter((documentForm) => {
+          var _a2, _b2;
+          return documentForm.id !== ((_b2 = (_a2 = action.value) == null ? void 0 : _a2.documentForm) == null ? void 0 : _b2.id);
+        });
+        const existingDocumentFormNodes = state.formNodes.filter((formNode) => {
+          return formNodeId(formNode) !== formNodeId(action.value.formNode);
+        });
+        const newDocumentForms = [];
+        if ((_a = action.value) == null ? void 0 : _a.documentForm) {
+          newDocumentForms.push((_b = action.value) == null ? void 0 : _b.documentForm);
         }
-        if (newUpdate.lookup) {
-          const field = getFieldUpdate(newUpdate, activeForm, formValues);
-          if (field && field.typeMap) {
-            newValue.forEach((item) => {
-              if (!item.__typename) {
-                item["__typename"] = field.typeMap[item._template];
+        return __spreadProps(__spreadValues({}, state), {
+          formNodes: [...existingDocumentFormNodes, action.value.formNode],
+          documentForms: [...existingDocumentForms, ...newDocumentForms]
+        });
+      }
+      case "onFieldChange": {
+        const event = action.value.event;
+        const changeSets = [];
+        const formNodesToReplace = [];
+        const formNodesToRemove = [];
+        const newFormNodes = [];
+        const form = state.documentForms.find((documentForm) => documentForm.id === event.formId);
+        getFormNodesFromEvent(state, event).forEach((formNode) => {
+          const blueprint = getFormNodeBlueprint(formNode, state);
+          if (blueprint.hasValuesField) {
+            changeSets.push(__spreadProps(__spreadValues({
+              path: [formNodePath(formNode), "values"].join(".")
+            }, buildChangeSet(event, formNode)), {
+              value: form.values,
+              mutationType: {
+                type: "global"
+              }
+            }));
+          }
+          if (blueprint.hasDataJSONField) {
+            changeSets.push(__spreadProps(__spreadValues({
+              path: [formNodePath(formNode), "dataJSON"].join(".")
+            }, buildChangeSet(event, formNode)), {
+              value: form.values,
+              mutationType: {
+                type: "global"
+              }
+            }));
+          }
+          if (event.mutationType.type === "change") {
+            if (!action.value.form) {
+              getBlueprintFieldsForEvent(blueprint, event).forEach((fieldBlueprint) => {
+                const { pathToChange } = getFormNodesForField(fieldBlueprint, formNode, event, state);
+                changeSets.push(__spreadValues({
+                  path: pathToChange
+                }, buildChangeSet(event, formNode)));
+              });
+            }
+          } else if (event.mutationType.type === "referenceChange") {
+            getBlueprintFieldsForEvent(blueprint, event).forEach((fieldBlueprint) => {
+              const {
+                pathToChange,
+                formNodes: subFormNodes,
+                eventLocation
+              } = getFormNodesForField(fieldBlueprint, formNode, event, state);
+              if (action.value.form && state.blueprints.find((blueprint2) => blueprint2.id === fieldBlueprint.id)) {
+                const newFormNode = {
+                  documentBlueprintId: fieldBlueprint.id,
+                  documentFormId: action.value.form.id,
+                  location: eventLocation
+                };
+                newFormNodes.push(newFormNode);
+                changeSets.push(__spreadValues({
+                  path: pathToChange
+                }, buildChangeSet(event, newFormNode)));
+              }
+              subFormNodes.forEach((subFormNode) => {
+                if (matchLocation(eventLocation, subFormNode)) {
+                  if (!action.value.form) {
+                    changeSets.push(__spreadProps(__spreadValues({
+                      path: pathToChange
+                    }, buildChangeSet(event, subFormNode)), {
+                      value: null
+                    }));
+                  }
+                  formNodesToReplace.push(subFormNode);
+                }
+              });
+            });
+          } else {
+            getBlueprintFieldsForEvent(blueprint, event).forEach((fieldBlueprint) => {
+              const { pathToChange, formNodes, existing, eventLocation } = getFormNodesForField(fieldBlueprint, formNode, event, state);
+              if (event.mutationType.type === "insert") {
+                formNodes.forEach((subFormNode) => {
+                  if (matchLocation(eventLocation, subFormNode)) {
+                    newFormNodes.push(__spreadProps(__spreadValues({}, subFormNode), {
+                      location: bumpLocation(subFormNode.location)
+                    }));
+                    formNodesToReplace.push(subFormNode);
+                  }
+                });
+                changeSets.push(__spreadValues({
+                  path: pathToChange
+                }, buildChangeSet(event, formNode)));
+              }
+              if (event.mutationType.type === "remove") {
+                const { at } = event.mutationType;
+                formNodes.forEach((subFormNode) => {
+                  if (matchLocation(eventLocation, subFormNode)) {
+                    if (matchesAt(subFormNode.location, at)) {
+                      formNodesToRemove.push(subFormNode);
+                    } else {
+                      newFormNodes.push(__spreadProps(__spreadValues({}, subFormNode), {
+                        location: maybeLowerLocation(subFormNode.location, at)
+                      }));
+                      formNodesToReplace.push(subFormNode);
+                    }
+                  }
+                });
+                const next = existing.filter((_, index) => index !== at);
+                changeSets.push(__spreadProps(__spreadValues({
+                  path: pathToChange
+                }, buildChangeSet(event, formNode)), {
+                  value: next
+                }));
+              }
+              if (event.mutationType.type === "move") {
+                const next = [];
+                const { from, to } = event.mutationType;
+                const newOrderObject = getMoveMapping(existing, from, to);
+                formNodes.forEach((subFormNode) => {
+                  if (matchLocation(eventLocation, subFormNode)) {
+                    newFormNodes.push(__spreadProps(__spreadValues({}, subFormNode), {
+                      location: swapLocation(subFormNode.location, newOrderObject)
+                    }));
+                    formNodesToReplace.push(subFormNode);
+                  }
+                });
+                Object.values(newOrderObject).forEach((orderIndex, index) => {
+                  next[orderIndex] = existing[index];
+                });
+                changeSets.push(__spreadProps(__spreadValues({
+                  path: pathToChange
+                }, buildChangeSet(event, formNode)), {
+                  value: next
+                }));
               }
             });
           }
+        });
+        const existingDocumentForms = state.documentForms.filter((documentForm) => {
+          var _a2;
+          return documentForm.id !== ((_a2 = action.value.form) == null ? void 0 : _a2.id);
+        });
+        const newDocumentForms = [];
+        if ((_c = action.value) == null ? void 0 : _c.form) {
+          newDocumentForms.push((_d = action.value) == null ? void 0 : _d.form);
         }
-        const newData = finalForm.setIn(data, newUpdate.set, newValue);
-        const newDataAndNewJSONData = finalForm.setIn(newData, newUpdate.set.replace("data", "dataJSON"), newValue);
-        setData(newDataAndNewJSONData);
-        setNewUpdate(null);
+        return __spreadProps(__spreadValues({}, state), {
+          changeSets,
+          formNodes: [
+            ...state.formNodes.filter((formNode) => formNodeNotIn(formNode, formNodesToReplace)).filter((formNode) => formNodeNotIn(formNode, formNodesToRemove)),
+            ...newFormNodes
+          ],
+          documentForms: [...existingDocumentForms, ...newDocumentForms]
+        });
+      }
+      case "formOnReset": {
+        const { event } = action.value;
+        const changeSets = [];
+        const form = state.documentForms.find((documentForm) => documentForm.id === event.formId);
+        state.formNodes.filter((fn) => fn.documentFormId === (form == null ? void 0 : form.id)).forEach((formNode) => {
+          const blueprint = getFormNodeBlueprint(formNode, state);
+          if (blueprint.hasValuesField) {
+            changeSets.push(__spreadValues({
+              path: [formNodePath(formNode), "values"].join(".")
+            }, buildChangeSet(event, formNode)));
+          }
+          if (blueprint.hasDataJSONField) {
+            changeSets.push(__spreadValues({
+              path: [formNodePath(formNode), "dataJSON"].join(".")
+            }, buildChangeSet(event, formNode)));
+          }
+          changeSets.push(__spreadValues({
+            path: [formNodePath(formNode), "data"].join(".")
+          }, buildChangeSet(event, formNode)));
+        });
+        return __spreadProps(__spreadValues({}, state), { changeSets });
+      }
+      case "ready":
+        return __spreadProps(__spreadValues({}, state), { status: "ready" });
+      case "done":
+        return __spreadProps(__spreadValues({}, state), { status: "done" });
+      case "setData":
+        return __spreadProps(__spreadValues({}, state), { data: action.value });
+      case "setIn": {
+        let newData;
+        if (action.value.displaceIndex) {
+          const existing = finalForm.getIn(state.data, action.value.path) || [];
+          newData = finalForm.setIn(state.data, action.value.path, [
+            action.value.value,
+            ...existing
+          ]);
+        } else {
+          newData = finalForm.setIn(state.data, action.value.path, action.value.value);
+        }
+        const changeSets = state.changeSets.filter((cs) => cs.path !== action.value.path);
+        return __spreadProps(__spreadValues({}, state), {
+          data: newData,
+          changeSets
+        });
       }
+      default:
+        return state;
+    }
+  }
+  const buildChangeSet = (event, formNode) => {
+    var _a, _b, _c;
+    return {
+      fieldDefinition: (_b = (_a = event.field) == null ? void 0 : _a.data) == null ? void 0 : _b.tinaField,
+      name: (_c = event.field) == null ? void 0 : _c.name,
+      formId: event.formId,
+      mutationType: event.mutationType,
+      value: event.value,
+      formNode
     };
+  };
+  const useFormify = ({
+    query,
+    cms,
+    variables,
+    onSubmit,
+    formify: formifyFunc,
+    eventList
+  }) => {
+    const formIds = React__default["default"].useRef([]);
+    const [state, dispatch] = React__default["default"].useReducer(reducer, {
+      status: "idle",
+      schema: void 0,
+      query: query ? G__namespace.parse(query) : null,
+      queryString: query,
+      data: {},
+      changeSets: [],
+      count: 0,
+      blueprints: [],
+      formNodes: [],
+      documentForms: []
+    });
     React__default["default"].useEffect(() => {
-      updateData();
-    }, [JSON.stringify(formValues)]);
+      if (query) {
+        dispatch({ type: "start", value: { query } });
+        formIds.current.forEach((formId) => {
+          const form = cms.forms.find(formId);
+          if (form) {
+            cms.plugins.remove(form);
+          }
+        });
+      }
+    }, [query, JSON.stringify(variables)]);
     React__default["default"].useEffect(() => {
-      if (pendingReset) {
-        setData(__spreadProps(__spreadValues({}, data), { [pendingReset]: initialData[pendingReset] }));
-        setPendingReset(null);
+      if (state.status === "initialized") {
+        cms.api.tina.request(query, { variables }).then((res) => {
+          delete res.paths;
+          dispatch({ type: "setData", value: res });
+        });
       }
-    }, [pendingReset]);
+    }, [state.status]);
     React__default["default"].useEffect(() => {
-      if (!query) {
-        setIsLoading(false);
-        return;
+      const run = async () => {
+        const schema = await cms.api.tina.getSchema();
+        const result = await formify({
+          schema,
+          query,
+          getOptimizedQuery: cms.api.tina.getOptimizedQuery
+        });
+        dispatch({
+          type: "addDocumentBlueprints",
+          value: result
+        });
+      };
+      if (state.status === "initialized") {
+        run();
       }
-      const formIds = [];
-      setIsLoading(true);
-      cms.api.tina.requestWithForm((gql2) => gql2(query), {
-        variables,
-        useUnstableFormify: cms.flags.get("use-unstable-formify")
-      }).then((payload) => {
-        cms.plugins.remove(new toolkit.FormMetaPlugin({ name: "tina-admin-link" }));
-        setData(payload);
-        setInitialData(payload);
-        setIsLoading(false);
-        Object.entries(payload).map(([queryName, result]) => {
-          formIds.push(queryName);
-          const canBeFormified = safeAssertShape(result, (yup2) => yup2.object({
-            values: yup2.object().required(),
-            form: yup2.object().required()
-          }));
-          if (!canBeFormified) {
-            return;
-          }
-          assertShape(result, (yup2) => yup2.object({
-            values: yup2.object().required(),
-            form: yup2.object().required()
-          }), `Unable to build form shape for fields at ${queryName}`);
-          const formConfig = {
-            id: queryName,
-            label: result.form.label,
-            initialValues: result.values,
-            fields: result.form.fields,
-            reset: () => {
-              setPendingReset(queryName);
-            },
-            onSubmit: async (payload2) => {
-              try {
-                const params = transformDocumentIntoMutationRequestPayload(payload2, result.form.mutationInfo);
-                const variables2 = { params };
-                const mutationString = result.form.mutationInfo.string;
-                if (onSubmit) {
-                  onSubmit({
-                    queryString: mutationString,
-                    mutationString,
-                    variables: variables2
-                  });
+    }, [state.status]);
+    React__default["default"].useEffect(() => {
+      const run = async () => {
+        const result = await cms.api.tina.request(G__namespace.print(state.query), {
+          variables
+        });
+        state.blueprints.map((blueprint) => {
+          const responseAtBlueprint = getValueForBlueprint(result, getBlueprintAliasPath(blueprint));
+          const location = [];
+          const findFormNodes = (res, location2) => {
+            if (Array.isArray(res)) {
+              res.forEach((item, index) => {
+                if (Array.isArray(item)) {
+                  findFormNodes(item, [...location2, index]);
                 } else {
-                  try {
-                    await cms.api.tina.request(mutationString, {
-                      variables: variables2
+                  if (item) {
+                    const form = buildForm(item, cms, formifyFunc, blueprint.showInSidebar, onSubmit);
+                    const formNode = buildFormNode(blueprint, form, [
+                      ...location2,
+                      index
+                    ]);
+                    dispatch({
+                      type: "addOrReplaceDocumentFormNode",
+                      value: {
+                        formNode,
+                        documentForm: form
+                      }
                     });
-                    cms.alerts.success("Document saved!");
-                  } catch (e) {
-                    cms.alerts.error("There was a problem saving your document");
-                    console.error(e);
                   }
                 }
-              } catch (e) {
-                console.error(e);
-                cms.alerts.error("There was a problem saving your document");
+              });
+            } else {
+              if (res) {
+                const form = buildForm(res, cms, formifyFunc, blueprint.showInSidebar, onSubmit);
+                const formNode = buildFormNode(blueprint, form, location2);
+                dispatch({
+                  type: "addOrReplaceDocumentFormNode",
+                  value: {
+                    formNode,
+                    documentForm: form
+                  }
+                });
               }
             }
           };
-          const { createForm, createGlobalForm } = generateFormCreators(cms);
-          const SKIPPED = "SKIPPED";
-          let form;
-          let skipped;
-          const skip = () => {
-            skipped = SKIPPED;
-          };
-          if (skipped)
-            return;
-          if (formify2) {
-            form = formify2({ formConfig, createForm, createGlobalForm, skip }, cms);
-          } else {
-            form = createForm(formConfig);
+          findFormNodes(responseAtBlueprint, location);
+        });
+        dispatch({ type: "ready" });
+      };
+      if (state.status === "formified") {
+        run();
+      }
+    }, [state.status]);
+    React__default["default"].useEffect(() => {
+      if (state.status === "ready") {
+        cms.events.subscribe(`forms:reset`, (event) => {
+          if (eventList) {
+            eventList.push(printEvent(event));
           }
-          if (!(form instanceof toolkit.Form)) {
-            if (skipped === SKIPPED) {
-              return;
-            }
-            throw new Error("formify must return a form or skip()");
+          dispatch({ type: "formOnReset", value: { event } });
+        });
+        cms.events.subscribe(`forms:fields:onChange`, async (event) => {
+          if (eventList) {
+            eventList.push(printEvent(event));
           }
-          const { change } = form.finalForm;
-          form.finalForm.change = (name, value) => {
-            let referenceName = "";
-            if (typeof name === "string") {
-              referenceName = name.split(".").filter((item) => isNaN(Number(item))).join(".");
-            } else {
-              throw new Error(`Expected name to be of type string for FinalForm change callback`);
+          if (event.field.data.tinaField.type === "reference") {
+            let form;
+            if (event.value && typeof event.value === "string") {
+              const existingForm = cms.forms.find(event.value);
+              if (existingForm) {
+                form = existingForm;
+              } else {
+                const formInfo = await cms.api.tina.request(`#graphql
+                    query Node($id: String!) {
+                      node(id: $id) {
+                        ...on Document {
+                          form
+                          values
+                          _internalSys: sys {
+                            path
+                            collection {
+                              name
+                            }
+                          }
+                        }
+                      }
+                    }
+                    `, { variables: { id: event.value } });
+                form = buildForm(formInfo.node, cms, formifyFunc, false, onSubmit);
+              }
             }
-            setNewUpdate({
-              queryName,
-              get: [queryName, "values", name].join("."),
-              set: [queryName, "data", name].join("."),
-              setReference: [queryName, "data", referenceName].join(".")
+            dispatch({
+              type: "onFieldChange",
+              value: {
+                event: __spreadProps(__spreadValues({}, event), {
+                  mutationType: { type: "referenceChange" }
+                }),
+                form
+              }
             });
-            return change(name, value);
-          };
-          const _a = form.finalForm.mutators, { insert, move, remove } = _a, rest = __objRest(_a, ["insert", "move", "remove"]);
-          const prepareNewUpdate = (name, lookup) => {
-            const extra = {};
-            if (lookup) {
-              extra["lookup"] = lookup;
-            }
-            const referenceName = name.split(".").filter((item) => isNaN(Number(item))).join(".");
-            setNewUpdate(__spreadValues({
-              queryName,
-              get: [queryName, "values", name].join("."),
-              set: [queryName, "data", name].join("."),
-              setReference: [queryName, "data", referenceName].join(".")
-            }, extra));
-          };
-          form.finalForm.mutators = __spreadValues({
-            insert: (...args) => {
-              const fieldName = args[0];
-              prepareNewUpdate(fieldName, fieldName);
-              insert(...args);
-            },
-            move: (...args) => {
-              const fieldName = args[0];
-              prepareNewUpdate(fieldName, fieldName);
-              move(...args);
-            },
-            remove: (...args) => {
-              const fieldName = args[0];
-              prepareNewUpdate(fieldName, fieldName);
-              remove(...args);
-            }
-          }, rest);
-          form.subscribe(({ values }) => {
-            setFormValues(__spreadProps(__spreadValues({}, formValues), { [queryName]: { values } }));
-          }, { values: true });
+          } else {
+            dispatch({ type: "onFieldChange", value: { event } });
+          }
         });
-      }).catch((e) => {
-        cms.alerts.error("There was a problem setting up forms for your query");
-        console.error("There was a problem setting up forms for your query");
-        console.error(e);
-        setIsLoading(false);
+        dispatch({ type: "done" });
+      }
+    }, [state.status]);
+    React__default["default"].useEffect(() => {
+      state.changeSets.forEach((changeSet) => {
+        if (changeSet.mutationType.type === "reset") {
+          const form = cms.forms.find(changeSet.formId);
+          resolveSubFields({
+            formNode: changeSet.formNode,
+            form,
+            loc: []
+          }).then((res) => {
+            dispatch({
+              type: "setIn",
+              value: {
+                value: res,
+                path: changeSet.path
+              }
+            });
+          });
+          return;
+        } else if (changeSet.mutationType.type === "insert") {
+          if (changeSet.fieldDefinition.type === "object") {
+            const fieldName = changeSet.fieldDefinition.list ? `${changeSet.name}.[]` : changeSet.name;
+            const { fields, __typename } = getSubFields(changeSet);
+            resolveSubFields({
+              formNode: changeSet.formNode,
+              prefix: replaceRealNum(fieldName),
+              loc: [...stripIndices(changeSet.path), 0],
+              form: {
+                fields,
+                values: changeSet.value[0]
+              }
+            }).then((res) => {
+              const extra = {};
+              if (__typename) {
+                extra["__typename"] = __typename;
+              }
+              dispatch({
+                type: "setIn",
+                value: __spreadProps(__spreadValues({
+                  displaceIndex: true
+                }, changeSet), {
+                  value: __spreadValues(__spreadValues({}, res), extra)
+                })
+              });
+            });
+          } else {
+            dispatch({
+              type: "setIn",
+              value: __spreadProps(__spreadValues({
+                displaceIndex: true
+              }, changeSet), {
+                value: changeSet.value[0]
+              })
+            });
+          }
+        } else {
+          if (changeSet.mutationType.type === "referenceChange") {
+            const { formNode } = changeSet;
+            const blueprint = getFormNodeBlueprint(formNode, state);
+            if (!changeSet.value) {
+              dispatch({
+                type: "setIn",
+                value: __spreadProps(__spreadValues({}, changeSet), {
+                  value: null
+                })
+              });
+            } else {
+              cms.api.tina.request(`
+              query Node($id: String!) {
+                node(id: $id) {
+                  ${G__namespace.print(blueprint.selection)}
+                }
+              }
+            `, { variables: { id: changeSet.value } }).then(async (res) => {
+                const form = state.documentForms.find((documentForm) => documentForm.id === formNode.documentFormId);
+                const data = await resolveSubFields({
+                  formNode,
+                  form,
+                  loc: formNode.location
+                });
+                dispatch({
+                  type: "setIn",
+                  value: __spreadProps(__spreadValues({}, changeSet), {
+                    value: __spreadProps(__spreadValues({}, res.node), {
+                      data
+                    })
+                  })
+                });
+              }).catch((e) => {
+                cms.alerts.error(`Unexpected error fetching reference`);
+                console.log(e);
+              });
+            }
+          } else {
+            dispatch({ type: "setIn", value: changeSet });
+          }
+        }
       });
+    }, [state.changeSets.length]);
+    React__default["default"].useEffect(() => {
+      formIds.current = state.documentForms.map((df) => df.id);
+    }, [state.documentForms.length]);
+    React__default["default"].useEffect(() => {
       return () => {
-        formIds.forEach((name) => {
-          const formPlugin = cms.forms.find(name);
-          if (formPlugin) {
-            cms.forms.remove(formPlugin);
+        formIds.current.forEach((formId) => {
+          const form = cms.forms.find(formId);
+          if (form) {
+            cms.plugins.remove(form);
           }
         });
       };
-    }, [query, JSON.stringify(variables), currentBranch]);
-    return [data, isLoading];
-  }
-  const transformDocumentIntoMutationRequestPayload = (document, instructions) => {
-    const _a = document, { _collection, __typename, _template } = _a, rest = __objRest(_a, ["_collection", "__typename", "_template"]);
-    const params = transformParams(rest);
-    const paramsWithTemplate = instructions.includeTemplate ? { [_template]: params } : params;
-    return instructions.includeCollection ? { [_collection]: paramsWithTemplate } : paramsWithTemplate;
-  };
-  const transformParams = (data) => {
-    if (["string", "number", "boolean"].includes(typeof data)) {
+    }, []);
+    const resolveSubFields = React__default["default"].useCallback(async (args) => {
+      const { form, formNode, prefix, loc } = args;
+      const data = {};
+      await sequential(form.fields, async (field) => {
+        const value = form.values[field.name];
+        const blueprint = getFormNodeBlueprint(formNode, state);
+        const { matchName, fieldName } = getMatchName({
+          field,
+          prefix,
+          blueprint
+        });
+        const fieldBlueprints = blueprint.fields.filter((fieldBlueprint) => {
+          return matchName === getBlueprintNamePath(fieldBlueprint);
+        }).filter((fbp) => filterFieldBlueprintsByParentTypename(fbp, field.parentTypename));
+        switch (field.type) {
+          case "object":
+            if (field.templates) {
+              if (field.list) {
+                await sequential(fieldBlueprints, async (fieldBlueprint) => {
+                  const keyName = getFieldNameOrAlias(fieldBlueprint);
+                  if (!value) {
+                    data[keyName] = null;
+                    return true;
+                  }
+                  if (!Array.isArray(value)) {
+                    throw new Error(`Expected value for object list field to be an array`);
+                  }
+                  data[keyName] = await sequential(value, async (item, index) => {
+                    const template = field.templates[item._template];
+                    return __spreadProps(__spreadValues({}, await resolveSubFields({
+                      formNode,
+                      form: { fields: template.fields, values: item },
+                      prefix: prefix ? [prefix, fieldName].join(".") : fieldName,
+                      loc: [...loc, index]
+                    })), {
+                      __typename: field.typeMap[item._template]
+                    });
+                  });
+                });
+              } else {
+                throw new Error("blocks without list true is not yet supported");
+              }
+            } else {
+              if (field.list) {
+                await sequential(fieldBlueprints, async (fieldBlueprint) => {
+                  const keyName = getFieldNameOrAlias(fieldBlueprint);
+                  if (!value) {
+                    data[keyName] = null;
+                    return true;
+                  }
+                  if (!Array.isArray(value)) {
+                    throw new Error(`Expected value for object list field to be an array`);
+                  }
+                  data[keyName] = await sequential(value, async (item, index) => {
+                    return resolveSubFields({
+                      formNode,
+                      form: { fields: field.fields, values: item },
+                      prefix: [prefix, fieldName].join("."),
+                      loc: [...loc, index]
+                    });
+                  });
+                  return true;
+                });
+              } else {
+                await sequential(fieldBlueprints, async (fieldBlueprint) => {
+                  const keyName = getFieldNameOrAlias(fieldBlueprint);
+                  if (!value) {
+                    data[keyName] = null;
+                    return true;
+                  }
+                  data[keyName] = await resolveSubFields({
+                    formNode,
+                    form: { fields: field.fields, values: value },
+                    prefix: [prefix, fieldName].join("."),
+                    loc
+                  });
+                  return true;
+                });
+              }
+            }
+            break;
+          case "reference":
+            let form2;
+            if (typeof value === "string") {
+              const existingForm = cms.forms.find(value);
+              if (existingForm) {
+                form2 = existingForm;
+              } else {
+                const formInfo = await cms.api.tina.request(`#graphql
+                      query Node($id: String!) {
+                        node(id: $id) {
+                          ...on Document {
+                            form
+                            values
+                            _internalSys: sys {
+                              path
+                              collection {
+                                name
+                              }
+                            }
+                          }
+                        }
+                      }
+                    `, { variables: { id: value } });
+                form2 = buildForm(formInfo.node, cms, formifyFunc, false, onSubmit);
+              }
+            }
+            await sequential(fieldBlueprints, async (fieldBlueprint) => {
+              const keyName = getFieldNameOrAlias(fieldBlueprint);
+              if (!value) {
+                data[keyName] = null;
+                return true;
+              }
+              const documentBlueprint = state.blueprints.find((dp) => getBlueprintNamePath(dp) === matchName);
+              const location = [...formNode.location];
+              if (loc) {
+                loc.forEach((item) => location.push(item));
+              }
+              const subDocumentFormNode = buildFormNode(documentBlueprint, form2, location);
+              dispatch({
+                type: "addOrReplaceDocumentFormNode",
+                value: {
+                  formNode: subDocumentFormNode,
+                  documentForm: form2
+                }
+              });
+              const res = await cms.api.tina.request(`
+                    query Node($id: String!) {
+                      node(id: $id) {
+                        ${G__namespace.print(documentBlueprint.selection)}
+                      }
+                    }
+                  `, { variables: { id: value } });
+              data[keyName] = __spreadProps(__spreadValues({}, res.node), {
+                data: await resolveSubFields({
+                  formNode: subDocumentFormNode,
+                  form: form2,
+                  loc: location
+                })
+              });
+            });
+            break;
+          default:
+            fieldBlueprints.forEach((fieldBlueprint) => {
+              const keyName = getFieldNameOrAlias(fieldBlueprint);
+              if (!value) {
+                data[keyName] = null;
+              } else {
+                data[keyName] = value;
+              }
+            });
+            break;
+        }
+        return true;
+      });
       return data;
+    }, [cms, JSON.stringify(state), dispatch]);
+    return __spreadProps(__spreadValues({}, state), {
+      queryString: G__namespace.print(state.query)
+    });
+  };
+  const buildFormNode = (documentBlueprint, form, location) => {
+    return {
+      documentBlueprintId: documentBlueprint.id,
+      documentFormId: form.id,
+      location
+    };
+  };
+  const captureBranchName = /^refs\/heads\/(.*)/;
+  const parseRefForBranchName = (ref) => {
+    const matches = ref.match(captureBranchName);
+    return matches[1];
+  };
+  class Client {
+    constructor(_a) {
+      var _b = _a, { tokenStorage = "MEMORY" } = _b, options = __objRest(_b, ["tokenStorage"]);
+      this.events = new toolkit.EventBus();
+      this.addPendingContent = async (props) => {
+        const mutation = `#graphql
+mutation addPendingDocumentMutation(
+  $relativePath: String!
+  $collection: String!
+  $template: String
+) {
+  addPendingDocument(
+    relativePath: $relativePath
+    template: $template
+    collection: $collection
+  ) {
+    ... on Document {
+      sys {
+        relativePath
+        path
+        breadcrumbs
+        collection {
+          slug
+        }
+      }
+    }
+  }
+}`;
+        const result = await this.request(mutation, {
+          variables: props
+        });
+        return result;
+      };
+      this.getSchema = async () => {
+        if (!this.gqlSchema) {
+          const data = await this.request(G.getIntrospectionQuery(), {
+            variables: {}
+          });
+          this.gqlSchema = G.buildClientSchema(data);
+        }
+        return this.gqlSchema;
+      };
+      this.getOptimizedQuery = async (documentNode) => {
+        const data = await this.request(`query GetOptimizedQuery($queryString: String!) {
+        getOptimizedQuery(queryString: $queryString)
+      }`, {
+          variables: { queryString: G.print(documentNode) }
+        });
+        return G.parse(data.getOptimizedQuery);
+      };
+      if (options.schema) {
+        const enrichedSchema = new schemaTools.TinaSchema(__spreadValues({
+          version: { fullVersion: "", major: "", minor: "", patch: "" },
+          meta: { flags: [] }
+        }, schemaTools.addNamespaceToSchema(options.schema, [])));
+        this.schema = enrichedSchema;
+      }
+      this.options = options;
+      this.setBranch(options.branch);
+      this.events.subscribe("branch:change", ({ branchName }) => {
+        this.setBranch(branchName);
+      });
+      this.clientId = options.clientId;
+      switch (tokenStorage) {
+        case "LOCAL_STORAGE":
+          this.getToken = async function() {
+            const tokens = localStorage.getItem(AUTH_TOKEN_KEY) || null;
+            if (tokens) {
+              return await this.getRefreshedToken(tokens);
+            } else {
+              return {
+                access_token: null,
+                id_token: null,
+                refresh_token: null
+              };
+            }
+          };
+          this.setToken = function(token) {
+            localStorage.setItem(AUTH_TOKEN_KEY, JSON.stringify(token, null, 2));
+          };
+          break;
+        case "MEMORY":
+          this.getToken = async () => {
+            if (this.token) {
+              return await this.getRefreshedToken(this.token);
+            } else {
+              return {
+                access_token: null,
+                id_token: null,
+                refresh_token: null
+              };
+            }
+          };
+          this.setToken = (token) => {
+            this.token = JSON.stringify(token, null, 2);
+          };
+          break;
+        case "CUSTOM":
+          if (!options.getTokenFn) {
+            throw new Error("When CUSTOM token storage is selected, a getTokenFn must be provided");
+          }
+          this.getToken = options.getTokenFn;
+          break;
+      }
+    }
+    get isLocalMode() {
+      return this.contentApiUrl.includes("localhost");
+    }
+    setBranch(branchName) {
+      var _a, _b, _c;
+      const encodedBranch = encodeURIComponent(branchName);
+      this.frontendUrl = ((_a = this.options.tinaioConfig) == null ? void 0 : _a.frontendUrlOverride) || "https://app.tina.io";
+      this.identityApiUrl = ((_b = this.options.tinaioConfig) == null ? void 0 : _b.identityApiUrlOverride) || "https://identity.tinajs.io";
+      this.contentApiBase = ((_c = this.options.tinaioConfig) == null ? void 0 : _c.contentApiUrlOverride) || `https://content.tinajs.io`;
+      this.contentApiUrl = this.options.customContentApiUrl || `${this.contentApiBase}/content/${this.options.clientId}/github/${encodedBranch}`;
+    }
+    async requestWithForm(query, {
+      variables,
+      useUnstableFormify
+    }) {
+      const schema = await this.getSchema();
+      let formifiedQuery;
+      if (useUnstableFormify) {
+        const res = await formify({
+          schema,
+          query: G.print(query(gql__default["default"])),
+          getOptimizedQuery: this.getOptimizedQuery
+        });
+        formifiedQuery = res.formifiedQuery;
+      } else {
+        formifiedQuery = formify$1(query(gql__default["default"]), schema);
+      }
+      return this.request(G.print(formifiedQuery), { variables });
+    }
+    async request(query, { variables }) {
+      const res = await fetch(this.contentApiUrl, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: "Bearer " + (await this.getToken()).id_token
+        },
+        body: JSON.stringify({
+          query: typeof query === "function" ? G.print(query(gql__default["default"])) : query,
+          variables
+        })
+      });
+      if (res.status !== 200) {
+        throw new Error(`Unable to complete request, ${res.statusText}`);
+      }
+      const json = await res.json();
+      if (json.errors) {
+        throw new Error(`Unable to fetch, errors: 
+	${json.errors.map((error) => error.message).join("\n")}`);
+      }
+      return json.data;
+    }
+    parseJwt(token) {
+      const base64Url = token.split(".")[1];
+      const base64 = base64Url.replace(/-/g, "+").replace(/_/g, "/");
+      const jsonPayload = decodeURIComponent(atob(base64).split("").map(function(c) {
+        return "%" + ("00" + c.charCodeAt(0).toString(16)).slice(-2);
+      }).join(""));
+      return JSON.parse(jsonPayload);
+    }
+    async getRefreshedToken(tokens) {
+      const { access_token, id_token, refresh_token } = JSON.parse(tokens);
+      const { exp, iss, client_id } = this.parseJwt(access_token);
+      if (Date.now() / 1e3 >= exp - 120) {
+        const refreshResponse = await fetch(iss, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/x-amz-json-1.1",
+            "x-amz-target": "AWSCognitoIdentityProviderService.InitiateAuth"
+          },
+          body: JSON.stringify({
+            ClientId: client_id,
+            AuthFlow: "REFRESH_TOKEN_AUTH",
+            AuthParameters: {
+              REFRESH_TOKEN: refresh_token,
+              DEVICE_KEY: null
+            }
+          })
+        });
+        if (refreshResponse.status !== 200) {
+          throw new Error("Unable to refresh auth tokens");
+        }
+        const responseJson = await refreshResponse.json();
+        const newToken = {
+          access_token: responseJson.AuthenticationResult.AccessToken,
+          id_token: responseJson.AuthenticationResult.IdToken,
+          refresh_token
+        };
+        this.setToken(newToken);
+        return Promise.resolve(newToken);
+      }
+      return Promise.resolve({ access_token, id_token, refresh_token });
+    }
+    async isAuthorized() {
+      return this.isAuthenticated();
+    }
+    async isAuthenticated() {
+      return !!await this.getUser();
+    }
+    async authenticate() {
+      const token = await authenticate(this.clientId, this.frontendUrl);
+      this.setToken(token);
+      return token;
+    }
+    async fetchWithToken(input, init) {
+      const headers = (init == null ? void 0 : init.headers) || {};
+      return await fetch(input, __spreadProps(__spreadValues({}, init), {
+        headers: new Headers(__spreadValues({
+          Authorization: "Bearer " + (await this.getToken()).id_token
+        }, headers))
+      }));
+    }
+    async getUser() {
+      if (!this.clientId) {
+        return null;
+      }
+      const url = `${this.identityApiUrl}/v2/apps/${this.clientId}/currentUser`;
+      try {
+        const res = await this.fetchWithToken(url, {
+          method: "GET"
+        });
+        const val = await res.json();
+        if (!res.status.toString().startsWith("2")) {
+          console.error(val.error);
+          return null;
+        }
+        return val;
+      } catch (e) {
+        console.error(e);
+        return null;
+      }
+    }
+    async listBranches() {
+      const url = `${this.contentApiBase}/github/${this.clientId}/list_branches`;
+      const res = await this.fetchWithToken(url, {
+        method: "GET"
+      });
+      return res.json();
+    }
+    async createBranch({ baseBranch, branchName }) {
+      const url = `${this.contentApiBase}/github/${this.clientId}/create_branch`;
+      try {
+        const res = await this.fetchWithToken(url, {
+          method: "POST",
+          body: JSON.stringify({
+            baseBranch,
+            branchName
+          }),
+          headers: {
+            "Content-Type": "application/json"
+          }
+        });
+        return await res.json().then((r) => parseRefForBranchName(r.data.ref));
+      } catch (error) {
+        console.error("There was an error creating a new branch.", error);
+        return null;
+      }
+    }
+  }
+  const DEFAULT_LOCAL_TINA_GQL_SERVER_URL = "http://localhost:4001/graphql";
+  class LocalClient extends Client {
+    constructor(props) {
+      const clientProps = __spreadProps(__spreadValues({}, props), {
+        clientId: "",
+        branch: "",
+        customContentApiUrl: props && props.customContentApiUrl ? props.customContentApiUrl : DEFAULT_LOCAL_TINA_GQL_SERVER_URL
+      });
+      super(clientProps);
+    }
+    async isAuthorized() {
+      return true;
+    }
+    async isAuthenticated() {
+      return true;
+    }
+  }
+  function ModalBuilder(modalProps) {
+    return /* @__PURE__ */ React__default["default"].createElement(toolkit.Modal, null, /* @__PURE__ */ React__default["default"].createElement(toolkit.ModalPopup, null, /* @__PURE__ */ React__default["default"].createElement(toolkit.ModalHeader, null, modalProps.title), /* @__PURE__ */ React__default["default"].createElement(toolkit.ModalBody, {
+      padded: true
+    }, /* @__PURE__ */ React__default["default"].createElement("p", null, modalProps.message), modalProps.error && /* @__PURE__ */ React__default["default"].createElement(ErrorLabel, null, modalProps.error)), /* @__PURE__ */ React__default["default"].createElement(toolkit.ModalActions, null, modalProps.actions.map((action) => /* @__PURE__ */ React__default["default"].createElement(AsyncButton, __spreadValues({
+      key: action.name
+    }, action))))));
+  }
+  const ErrorLabel = styled__default["default"].p`
+  color: var(--tina-color-error) !important;
+`;
+  const AsyncButton = ({ name, primary, action }) => {
+    const [submitting, setSubmitting] = React.useState(false);
+    const onClick = React.useCallback(async () => {
+      setSubmitting(true);
+      try {
+        await action();
+        setSubmitting(false);
+      } catch (e) {
+        setSubmitting(false);
+        throw e;
+      }
+    }, [action, setSubmitting]);
+    return /* @__PURE__ */ React__default["default"].createElement(toolkit.Button, {
+      variant: primary ? "primary" : "secondary",
+      onClick,
+      busy: submitting,
+      disabled: submitting
+    }, submitting && /* @__PURE__ */ React__default["default"].createElement(toolkit.LoadingDots, null), !submitting && name);
+  };
+  const TINA_AUTH_CONFIG = "tina_auth_config";
+  const useTinaAuthRedirect = () => {
+    React.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);
+    }, []);
+  };
+  class TinaAdminApi {
+    constructor(cms) {
+      this.api = cms.api.tina;
+    }
+    async isAuthenticated() {
+      return await this.api.isAuthenticated();
+    }
+    async fetchCollections() {
+      const response = await this.api.request(`#graphql
+      query{ 
+        getCollections { 
+          label, 
+          name 
+        } 
+      }`, { variables: {} });
+      return response;
+    }
+    async fetchCollection(collectionName, includeDocuments) {
+      const response = await this.api.request(`#graphql
+      query($collection: String!, $includeDocuments: Boolean!){
+        getCollection(collection: $collection){
+          name
+          label
+          format
+          templates
+          documents @include(if: $includeDocuments) {
+            totalCount
+            edges {
+              node {
+                ... on Document {
+                  sys {
+                    template
+                    breadcrumbs
+                    path
+                    basename
+                    relativePath
+                    filename
+                    extension
+                  }
+                }
+              }
+            }
+          }
+        }
+      }`, { variables: { collection: collectionName, includeDocuments } });
+      return response;
+    }
+    async fetchDocument(collectionName, relativePath) {
+      const response = await this.api.request(`#graphql
+      query($collection: String!, $relativePath: String!) {
+        getDocument(collection:$collection, relativePath:$relativePath) {
+          ... on Document {
+            form
+            values
+          }
+        }
+      }`, { variables: { collection: collectionName, relativePath } });
+      return response;
     }
-    if (Array.isArray(data)) {
-      return data.map((item) => transformParams(item));
+    async fetchDocumentFields() {
+      const response = await this.api.request(`#graphql
+      query { 
+        getDocumentFields 
+      }`, { variables: {} });
+      return response;
     }
-    try {
-      assertShape(data, (yup2) => yup2.object({ _template: yup2.string().required() }));
-      const _a = data, { _template, __typename } = _a, rest = __objRest(_a, ["_template", "__typename"]);
-      const nested = transformParams(rest);
-      return { [_template]: nested };
-    } catch (e) {
-      if (e.message === "Failed to assertShape - _template is a required field") {
-        if (!data) {
-          return [];
+    async createDocument(collectionName, relativePath, params) {
+      const response = await this.api.request(`#graphql
+      mutation($collection: String!, $relativePath: String!, $params: DocumentMutation!) {
+        createDocument(
+          collection: $collection,
+          relativePath: $relativePath,
+          params: $params
+        ){__typename}
+      }`, {
+        variables: {
+          collection: collectionName,
+          relativePath,
+          params
         }
-        const accum = {};
-        Object.entries(data).map(([keyName, value]) => {
-          accum[keyName] = transformParams(value);
-        });
-        return accum;
-      } else {
-        if (!data) {
-          return [];
+      });
+      return response;
+    }
+    async updateDocument(collectionName, relativePath, params) {
+      const response = await this.api.request(`#graphql
+      mutation($collection: String!, $relativePath: String!, $params: DocumentMutation!) {
+        updateDocument( 
+          collection: $collection,
+          relativePath: $relativePath,
+          params: $params
+        ){__typename}
+      }`, {
+        variables: {
+          collection: collectionName,
+          relativePath,
+          params
         }
-        throw e;
-      }
+      });
+      return response;
     }
-  };
-  const getFieldUpdate = (newUpdate, activeForm, formValues) => {
-    const items = newUpdate.lookup.split(".");
-    let currentFields = activeForm.fields;
-    items.map((item, index) => {
-      const lookupName = items.slice(0, index + 1).join(".");
-      const value = finalForm.getIn(formValues, [newUpdate.queryName, "values", lookupName].join("."));
-      if (isNaN(Number(item))) {
-        if (Array.isArray(currentFields)) {
-          currentFields = currentFields.find((field) => field.name === item);
+  }
+  function sleep(ms) {
+    return new Promise((resolve) => setTimeout(resolve, ms));
+  }
+  const AuthWallInner = ({
+    children,
+    cms,
+    loginScreen,
+    getModalActions
+  }) => {
+    const client = cms.api.tina;
+    const [activeModal, setActiveModal] = React.useState(null);
+    const [showChildren, setShowChildren] = React.useState(false);
+    React__default["default"].useEffect(() => {
+      client.isAuthenticated().then((isAuthenticated) => {
+        if (isAuthenticated) {
+          setShowChildren(true);
+          cms.enable();
+        } else {
+          sleep(500).then(() => {
+            setActiveModal("authenticate");
+          });
         }
+      });
+    }, []);
+    const onAuthSuccess = async () => {
+      if (await client.isAuthenticated()) {
+        setShowChildren(true);
+        setActiveModal(null);
       } else {
-        const template = currentFields.templates ? currentFields.templates[value._template] : currentFields;
-        currentFields = template.fields;
+        throw new Error("No access to repo");
       }
-    });
-    return currentFields;
+    };
+    const otherModalActions = getModalActions ? getModalActions({
+      closeModal: () => {
+        setActiveModal(null);
+      }
+    }) : [];
+    return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, activeModal === "authenticate" && /* @__PURE__ */ React__default["default"].createElement(ModalBuilder, {
+      title: "Tina Cloud Authorization",
+      message: "To save edits, Tina Cloud authorization is required. On save, changes will get commited using your account.",
+      close,
+      actions: [
+        ...otherModalActions,
+        {
+          action: async () => {
+            sharedctx.setEditing(false);
+            window.location.reload();
+          },
+          name: "Close",
+          primary: false
+        },
+        {
+          name: "Continue to Tina Cloud",
+          action: async () => {
+            await client.authenticate();
+            onAuthSuccess();
+          },
+          primary: true
+        }
+      ]
+    }), showChildren ? children : loginScreen ? loginScreen : null);
   };
-  const generateFormCreators = (cms) => {
-    const createForm = (formConfig) => {
-      const form = new toolkit.Form(formConfig);
-      cms.forms.add(form);
-      return form;
+  const TinaCloudProvider = (props) => {
+    const baseBranch = props.branch || "main";
+    const [currentBranch, setCurrentBranch] = toolkit.useLocalStorage("tinacms-current-branch", baseBranch);
+    useTinaAuthRedirect();
+    const cms = React__default["default"].useMemo(() => props.cms || new toolkit.TinaCMS({
+      enabled: true,
+      sidebar: true
+    }), [props.cms]);
+    if (!cms.api.tina) {
+      cms.registerApi("tina", createClient(props));
+    }
+    if (!cms.api.admin) {
+      cms.registerApi("admin", new TinaAdminApi(cms));
+    }
+    const setupMedia = async () => {
+      var _a;
+      if (props.mediaStore) {
+        if ((_a = props.mediaStore.prototype) == null ? void 0 : _a.persist) {
+          cms.media.store = new props.mediaStore(cms.api.tina);
+        } else {
+          const MediaClass = await props.mediaStore();
+          cms.media.store = new MediaClass(cms.api.tina);
+        }
+      }
     };
-    const createGlobalForm = (formConfig, options) => {
-      const form = new toolkit.Form(formConfig);
-      cms.plugins.add(new toolkit.GlobalFormPlugin(form, options == null ? void 0 : options.icon, options == null ? void 0 : options.layout));
-      return form;
+    const handleListBranches = async () => {
+      const { owner, repo } = props;
+      const branches = await cms.api.tina.listBranches({ owner, repo });
+      if (!Array.isArray(branches)) {
+        return [];
+      }
+      return branches;
     };
-    return { createForm, createGlobalForm };
+    const handleCreateBranch = async (data) => {
+      const newBranch = await cms.api.tina.createBranch(data);
+      return newBranch;
+    };
+    setupMedia();
+    const [branchingEnabled, setBranchingEnabled] = React__default["default"].useState(() => cms.flags.get("branch-switcher"));
+    React__default["default"].useEffect(() => {
+      cms.events.subscribe("flag:set", ({ key, value }) => {
+        if (key === "branch-switcher") {
+          setBranchingEnabled(value);
+        }
+      });
+    }, [cms.events]);
+    React__default["default"].useEffect(() => {
+      let branchSwitcher;
+      if (branchingEnabled) {
+        branchSwitcher = new toolkit.BranchSwitcherPlugin({
+          listBranches: handleListBranches,
+          createBranch: handleCreateBranch
+        });
+        cms.plugins.add(branchSwitcher);
+      }
+      return () => {
+        if (branchingEnabled && branchSwitcher) {
+          cms.plugins.remove(branchSwitcher);
+        }
+      };
+    }, [branchingEnabled, props.branch]);
+    React__default["default"].useEffect(() => {
+      if (props.cmsCallback) {
+        props.cmsCallback(cms);
+      }
+    }, []);
+    return /* @__PURE__ */ React__default["default"].createElement(toolkit.BranchDataProvider, {
+      currentBranch,
+      setCurrentBranch: (b) => {
+        setCurrentBranch(b);
+      }
+    }, /* @__PURE__ */ React__default["default"].createElement(toolkit.TinaProvider, {
+      cms
+    }, /* @__PURE__ */ React__default["default"].createElement(AuthWallInner, __spreadProps(__spreadValues({}, props), {
+      cms
+    }))));
   };
+  const TinaCloudAuthWall = TinaCloudProvider;
   class ContentCreatorPlugin {
     constructor(options) {
       this.__type = "content-creator";
@@ -1976,11 +3231,13 @@ mutation addPendingDocumentMutation(
     var _d = _c, {
       query,
       documentCreatorCallback,
-      formifyCallback
+      formifyCallback,
+      schema
     } = _d, props = __objRest(_d, [
       "query",
       "documentCreatorCallback",
-      "formifyCallback"
+      "formifyCallback",
+      "schema"
     ]);
     const validOldSetup = new Boolean(props == null ? void 0 : props.isLocalClient) || new Boolean(props == null ? void 0 : props.clientId) && new Boolean(props == null ? void 0 : props.branch);
     if (!props.apiURL && !validOldSetup) {
@@ -1997,7 +3254,8 @@ mutation addPendingDocumentMutation(
       tinaioConfig: props.tinaioConfig,
       isLocalClient,
       cmsCallback: props.cmsCallback,
-      mediaStore: props.mediaStore
+      mediaStore: props.mediaStore,
+      schema
     }, /* @__PURE__ */ React__default["default"].createElement("style", null, styles), /* @__PURE__ */ React__default["default"].createElement(ErrorBoundary, null, /* @__PURE__ */ React__default["default"].createElement(DocumentCreator, {
       documentCreatorCallback
     }), /* @__PURE__ */ React__default["default"].createElement(TinaDataProvider, {
@@ -2039,13 +3297,25 @@ mutation addPendingDocumentMutation(
       payload: void 0,
       isLoading: true
     });
+    const cms = toolkit.useCMS();
+    const useUnstableFormify = React__default["default"].useMemo(() => {
+      if ((cms == null ? void 0 : cms.flags.get("use-unstable-formify")) === false) {
+        return false;
+      }
+      return true;
+    }, [cms == null ? void 0 : cms.flags]);
     return /* @__PURE__ */ React__default["default"].createElement(sharedctx.TinaDataContext.Provider, {
       value: {
         setRequest,
         isLoading: state.isLoading,
         state: { payload: state.payload }
       }
-    }, /* @__PURE__ */ React__default["default"].createElement(FormRegistrar, {
+    }, useUnstableFormify ? /* @__PURE__ */ React__default["default"].createElement(FormRegistrarUnstable, {
+      key: request == null ? void 0 : request.query,
+      request,
+      formifyCallback,
+      onPayloadStateChange: setState
+    }) : /* @__PURE__ */ React__default["default"].createElement(FormRegistrar, {
       key: request == null ? void 0 : request.query,
       request,
       formifyCallback,
@@ -2074,6 +3344,35 @@ mutation addPendingDocumentMutation(
     }, [JSON.stringify(payload), isLoading]);
     return isLoading ? /* @__PURE__ */ React__default["default"].createElement(Loader, null, /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null)) : null;
   };
+  const FormRegistrarUnstable = (props) => {
+    var _a;
+    if (!((_a = props.request) == null ? void 0 : _a.query)) {
+      return null;
+    }
+    return /* @__PURE__ */ React__default["default"].createElement(FormRegistrarUnstableInner, __spreadValues({}, props));
+  };
+  const FormRegistrarUnstableInner = ({
+    request,
+    formifyCallback,
+    onPayloadStateChange
+  }) => {
+    const cms = toolkit.useCMS();
+    const [payload, isLoading] = useGraphqlFormsUnstable({
+      query: request == null ? void 0 : request.query,
+      variables: request == null ? void 0 : request.variables,
+      formify: (args) => {
+        if (formifyCallback) {
+          return formifyCallback(args, cms);
+        } else {
+          return args.createForm(args.formConfig);
+        }
+      }
+    });
+    React__default["default"].useEffect(() => {
+      onPayloadStateChange({ payload, isLoading });
+    }, [JSON.stringify(payload), isLoading]);
+    return isLoading ? /* @__PURE__ */ React__default["default"].createElement(Loader, null, /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null)) : null;
+  };
   const Loader = (props) => {
     return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */ React__default["default"].createElement("div", {
       style: {
@@ -2684,7 +3983,7 @@ This will work when developing locally but NOT when deployed to production.
       window.location.href = routeOverride;
       return null;
     } else {
-      navigate(document.sys.filename);
+      navigate(document.sys.breadcrumbs.join("/"));
     }
   };
   const CollectionListPage = () => {
@@ -2717,8 +4016,9 @@ This will work when developing locally but NOT when deployed to production.
         }, /* @__PURE__ */ React__default["default"].createElement("tbody", {
           className: "divide-y divide-gray-150"
         }, documents.map((document) => {
+          const subfolders = document.node.sys.breadcrumbs.slice(0, -1).join("/");
           return /* @__PURE__ */ React__default["default"].createElement("tr", {
-            key: `document-${document.node.sys.filename}`,
+            key: `document-${document.node.sys.relativePath}`,
             className: ""
           }, /* @__PURE__ */ React__default["default"].createElement("td", {
             className: "px-6 py-2 whitespace-nowrap"
@@ -2733,7 +4033,9 @@ This will work when developing locally but NOT when deployed to production.
             className: "block text-xs text-gray-400 mb-1 uppercase"
           }, "Filename"), /* @__PURE__ */ React__default["default"].createElement("span", {
             className: "h-5 leading-5 block whitespace-nowrap"
-          }, document.node.sys.filename)))), /* @__PURE__ */ React__default["default"].createElement("td", {
+          }, subfolders && /* @__PURE__ */ React__default["default"].createElement("span", {
+            className: "text-xs text-gray-400"
+          }, `${subfolders}/`), /* @__PURE__ */ React__default["default"].createElement("span", null, document.node.sys.filename))))), /* @__PURE__ */ React__default["default"].createElement("td", {
             className: "px-6 py-4 whitespace-nowrap"
           }, /* @__PURE__ */ React__default["default"].createElement("span", {
             className: "block text-xs text-gray-400 mb-1 uppercase"
@@ -2857,6 +4159,22 @@ This will work when developing locally but NOT when deployed to production.
     var _a, _b;
     const navigate = reactRouterDom.useNavigate();
     const [formIsPristine, setFormIsPristine] = React.useState(true);
+    const schema = cms.api.tina.schema;
+    let schemaFields = fields;
+    if (schema) {
+      const schemaCollection = schema.getCollection(collection.name);
+      const template2 = schema.getTemplateForData({
+        collection: schemaCollection,
+        data: {}
+      });
+      const formInfo = schemaTools.resolveForm({
+        collection: schemaCollection,
+        basename: schemaCollection.name,
+        schema,
+        template: template2
+      });
+      schemaFields = formInfo.fields;
+    }
     const form = React.useMemo(() => {
       return new toolkit.Form({
         id: "create-form",
@@ -2866,7 +4184,7 @@ This will work when developing locally but NOT when deployed to production.
             name: "filename",
             label: "Filename",
             component: "text",
-            description: `A unique filename for the content.  Example: My_Document`,
+            description: /* @__PURE__ */ React__default["default"].createElement("span", null, "A unique filename for the content.", /* @__PURE__ */ React__default["default"].createElement("br", null), "Examples: ", /* @__PURE__ */ React__default["default"].createElement("code", null, "My_Document"), ", ", /* @__PURE__ */ React__default["default"].createElement("code", null, "My_Document.en"), ",", " ", /* @__PURE__ */ React__default["default"].createElement("code", null, "sub-folder/My_Document")),
             placeholder: `My_Document`,
             validate: (value, allValues, meta) => {
               if (!value) {
@@ -2875,13 +4193,13 @@ This will work when developing locally but NOT when deployed to production.
                 }
                 return true;
               }
-              const isValid = /^[_a-zA-Z][-,_a-zA-Z0-9]*$/.test(value);
+              const isValid = /^[_a-zA-Z][\.\-_\/a-zA-Z0-9]*$/.test(value);
               if (value && !isValid) {
-                return "Must begin with a-z, A-Z, or _ and contain only a-z, A-Z, 0-9, - or _";
+                return "Must begin with a-z, A-Z, or _ and contain only a-z, A-Z, 0-9, -, _, ., or /.";
               }
             }
           },
-          ...fields
+          ...schemaFields
         ],
         onSubmit: async (values) => {
           try {
@@ -2974,7 +4292,8 @@ This will work when developing locally but NOT when deployed to production.
     }
   };
   const CollectionUpdatePage = () => {
-    const { collectionName, filename } = reactRouterDom.useParams();
+    const _a = reactRouterDom.useParams(), { collectionName } = _a, rest = __objRest(_a, ["collectionName"]);
+    const { "*": filename } = rest;
     return /* @__PURE__ */ React__default["default"].createElement(GetCMS, null, (cms) => /* @__PURE__ */ React__default["default"].createElement(GetDocumentFields, {
       cms,
       collectionName
@@ -3003,13 +4322,28 @@ This will work when developing locally but NOT when deployed to production.
     mutationInfo
   }) => {
     var _a, _b;
-    reactRouterDom.useNavigate();
     const [formIsPristine, setFormIsPristine] = React.useState(true);
+    const schema = cms.api.tina.schema;
+    let schemaFields = document.form.fields;
+    if (schema) {
+      const schemaCollection = schema.getCollection(collection.name);
+      const template = schema.getTemplateForData({
+        collection: schemaCollection,
+        data: document.value
+      });
+      const formInfo = schemaTools.resolveForm({
+        collection: schemaCollection,
+        basename: schemaCollection.name,
+        schema,
+        template
+      });
+      schemaFields = formInfo.fields;
+    }
     const form = React.useMemo(() => {
       return new toolkit.Form({
         id: "update-form",
         label: "form",
-        fields: document.form.fields,
+        fields: schemaFields,
         initialValues: document.values,
         onSubmit: async (values) => {
           try {
@@ -3093,7 +4427,7 @@ This will work when developing locally but NOT when deployed to production.
           path: "collections/:collectionName/:templateName/new",
           element: /* @__PURE__ */ React__default["default"].createElement(CollectionCreatePage, null)
         }), /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Route, {
-          path: "collections/:collectionName/:filename",
+          path: "collections/:collectionName/*",
           element: /* @__PURE__ */ React__default["default"].createElement(CollectionUpdatePage, null)
         }), /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Route, {
           path: "collections/:collectionName",
@@ -3151,6 +4485,7 @@ This will work when developing locally but NOT when deployed to production.
   exports2.staticRequest = staticRequest;
   exports2.useDocumentCreatorPlugin = useDocumentCreatorPlugin;
   exports2.useGraphqlForms = useGraphqlForms;
+  exports2.useGraphqlFormsUnstable = useGraphqlFormsUnstable;
   exports2.useTinaAuthRedirect = useTinaAuthRedirect;
   Object.keys(toolkit).forEach(function(k) {
     if (k !== "default" && !exports2.hasOwnProperty(k))